JavaScript *

Видео, подкасты

ES6 vs Today
An Angular2 Todo App: First look at App Development in Angular2
Async Apps with React and Flux
A 90 minute overview of ECMAScript 6
Building with React.js
Intro to Webpack
io.js with Isaac Schleuter and Mikeal Rogers

Доброго времени!
У нас пополнение коллекции «Head First O'Reilly»


С помощью этой книги Вы узнаете все о языке JavaScript: от переменных до циклов. Вы поймете, почему разные браузеры по-разному реагируют на код и как написать универсальный код, поддерживаемый всеми браузерами. Вам станет ясно, почему с кодом JavaScript никогда не придется беспокоиться о перегруженности страниц и ошибках передачи данных. Не пугайтесь, даже если ранее вы не написали ни одной строчки кода, — благодаря уникальному формату подачи материала эта книга с легкостью проведет вас по всему пути обучения: от написания простейшего скрипта до создания сложных веб-проектов, которые будут работать во всех современных браузерах.

Недавно от знакомого фриланс-работодателя поступило предложение о небольшой работе, связанной с организацией смс-рассылки, данные для которой должны браться из .xls-таблицы. Плюс к этому было необязательное пожелание вынести эту же таблицу на корпоративный веб-сайт с обязательной возможностью её редактирования. При этом был озвучен весьма малый бюджет максимум на два человеко-дня.

Минимальное исследование существующих веб-инструментов работы с электронными таблицами показало, что разработка на их основе потребует времени в разы больше. Например, связка PHPExcel и какой-нибудь AJAX-таблицы выливалась в разработку функционала полноценного сайта. К тому же требующего отдельного хостинга в целях безопасности. Теоретически рассматривался вариант MS Excel + VB script, но и тут были свои подводные камни. В итоге выбор пал на Google Sheets.

Формы это неплохой способ добавить некую изюминку элементам на вашей веб странице. Круги особенно хороши в этом отношении, потому что они целостны, просты и похожи на пирог. А теперь серьёзно, кто не любит пироги?



Демо – Исходный код

Как вы, должно быть, заметили по собственному многолетнему опыту пользования интернетом, большинство элементов на веб страницах, по сути, являются либо квадратами, либо, прямоугольниками. Поэтому, в некоторых случаях, интересные элементы, такие как круги и треугольники в вашем дизайне могут быть весьма полезными. Этот туториал продемонстрирует, как построить анимированную круговую диаграмму, подобную тем, которые вы обычно видите на сайтах портфолио. Это может помочь визуально подчеркнуть ваши навыки, а также продемонстрировать то, с какими задачами вы можете справиться. Взгляните на демо, чтобы увидеть конечный результат.

Open Data Protocol (OData) – это открытый веб-протокол для запроса и обновления данных. Протокол позволяет выполнять операции с ресурсами, используя в качестве запросов HTTP-команды, и обмениваться данными в форматах JSON или XML.

OData является одним из лучших стандартов для создания RESTful API.

Вы можете запрашивать данные используя простые HTTP запросы, например:

https://samples.databoom.space/api1/sampledb/collections/persons?$filter=firstname eq 'Lamar'
Найти всех людей по имени Lamar.

OData позволяет задавать огромное число параметров, которые позволяют сформировать очень сложные запросы к источнику данных, например:

https://samples.databoom.space/api1/sampledb/collections/books?$filter=publisher/president/likes/author/firstname eq 'Georgie'&$top=10&$orderby=title
Выбрать все книги, удовлетворяющие следующему условию: президент издательства в котором издана книга, любит книги некоего автора с именем “Georgie”. Результат запроса необходимо отсортировать по названию, выдать первые 10 книг.

Язык запросов OData сопоставим по мощности с SQL.

Приветствую. Представляю сообществу проект Konva.js.

Konva.js — это фреймворк, который позволяет работать c canvas 2d в объектном стиле с поддержкой событий.

Кратко список особенностей выглядит так:

1. Объектное API
2. Вложенные объекты и «всплытие» событий
3. Поддержка нескольких слоёв (нескольких canvas элементов)
4. Кэширование объектов
5. Поддержка анимаций
6. Настраиваемый drag&drop
7. Фильтры
8. Готовые к использованию объекты, включая прямоугольник, круг, изображение, текст, линия, SVG путь, ..
9. Простое создание собственных фигур
10. Событийная архитектура, которая позволяет разработчикам подписываться на события изменений аттрибутов, отрисовки, и так далее
11. Сериализация и десериализация
12. Продвинутый поиск с помощью селекторов stage.get('#foo') и layer.get('.bar')
13. Десктоп и мобильные события
14. Встроенная подержка HDPI устройств
15. и еще много разного

Далее подробней рассмотрим возможности фреймворка с примерами кода.

Мне захотелось наладить общение скриптов из разных вкладок браузера. Будущий API SharedWorker позволяет передавать данные между разными iframe и даже вкладками или окнами. В Chrome он работает давно, в Firefox – недавно, а в IE и Safari его не видать. Но существует кроссбраузерная альтернатива, о которой мало кто знает. Давайте разбираться.

Представьте, что на одной вкладке человек залогинился, затем открыл другую, и там разлогинился. На первой он вроде как залогинен, но когда он сделает там что-либо, ему выдадут ошибку. Хорошо было бы хотя бы показать ему диалог о том, что он разлогинился и ему надо войти ещё раз.

Когда-то давно друзья подарили вот такую головоломку:



Собрать её самостоятельно я так и не смог (всегда оставался один фрагмент). Посему было решено написать программу.

Для тех, кто не любит читать, решение доступно по ссылке (внимание, сильно нагружает процессор).

Привет, меня зовут Рэймонд, и я пишу плохой код. Ну, не совсем плохой, но я точно не следую всем «лучшим практикам». Однако давайте я расскажу вам, как один проект помог мне начать писать код, которым я могу гордиться.

Как-то в выходной я решил отказаться от использования компьютера. Но ничего не вышло. Я наткнулся на Star Wars API. Этот простой интерфейс основан на REST, и с его помощью можно запрашивать информацию о персонажах, фильмах, космических кораблях и других вещах из вселенной SW. Поиска нет, но сервис свободный.

Это первая статья в нашем корпоративном блоге. На этот раз я расскажу о нашем решении задачи обмена сообщениями между вкладками браузера.

К примеру, мне потребовалось решить эту задачу при реализации JavaScript API к Comet сервису. Эта задача встречается достаточно часто и её уже рассматривали на хабре раньше здесь и здесь, но я решил написать своё решение задачи исходя из следующих требований к коду:

• Кросбраузерность
• Отсутствие зависимостей
• Минимальный размер кода
• Простота и удобство

У фреймворка AngularJS есть несколько интересных решений в коде. Сегодня мы рассмотрим два из них – как работают области видимости и директивы.

Первое, чему обучают всех в AngularJS – директивы должны взаимодействовать с DOM. А больше всего новичка запутывает процесс взаимодействия между областями видимости, директивами и контроллерами. В этой статье мы рассмотрим подробности работы областей видимости и жизненный цикл Angular-приложения.

Если в следующей картинке вам что-то непонятно – эта статья для вас.



(В статье рассматривается AngularJS 1.3.0)

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости

Angular Light — это самостоятельный клиентский MV(C/VM) фреймворк, который построен на идеях Angular.js и Knockout.js, и похож на упрощенный Angular.js



Вышла версия Angular Light 0.8 которая включает разные улучшения и исправления, основные изменения:

1. Поддержка Object.observe и Array.observe, что может увеличить производительность веб-приложений.
Использование Object.observe — это опциональная фича, так же её можно включать для отдельных Scope (scope деревьев). Браузеры которые не поддерживают Object.observe продолжают работать через dirty-checking, так же нужно знать некоторые нюансы.

В этой статье мы подробно разберем процесс сборки фронтенд проекта, который прижился в моей повседневной работе и очень облегчил рутину.

Статья не претендует на истину в последней инстанции, так как сегодня существует большое количество различных сборщиков и подходов к сборке, и каждый выбирает по вкусу. Я лишь поделюсь своими мыслями по этой теме и покажу свой workflow.

UPD (13 марта 2015): Заменил несколько плагинов на более актуальные + решил проблему с импортом CSS файлов внутрь SCSS

В прошлой статье Breeze.js + Entity Framework + Angular.js = удобная работа с сущностями базы данных прямо из браузера мы рассмотрели создание простейшего приложения, где делали выборки и сохраняли данные в базе прямо из javascript в браузере. Конечно же первыми у читателей возникли вопросы о безопасности. Поэтому сегодня мы рассмотрим, как можно организовать разграничение доступа. Для этого мы немного доработаем наше приложение из прошлой статьи так, чтобы можно было при помощи атрибутов раздать определённые права доступа на добавление, удаление, изменение и просмотр данных определённым пользователям или ролям.

6 февраля вышла новая версия Node.js v0.12. Это был длительный и трудный процесс, не без потерь для NodeJS, в результате которого от основной ветки отделился io.js, но, тем не менее, список нововведений довольно внушительный. Давайте поглядим.

Streams 3

Как обещают разработчики, реализация потоков теперь работает так, как это и ожидается. Причем самое главное, что старые API, введенные в v0.10, не поменялись.

Добавлен механизм cork/uncork для приложений, которые несколько раз синхронно пишут в поток. .cork() включает буферизацию для всех записей в поток, .uncork() же сбрасывает весь буфер.

Введение

Сад JavaScript – коллекция документации по самым странным особенностям языка JavaScript. Тут собраны советы по тому, как избежать распространённых ошибок и малозаметных багов, а также проблем с быстродействием и неправильного стиля программирования.

Это не учебник по языку. Предполагается, что вы уже предварительно знаете язык. Для обучения языку рекомендую воспользоваться этим великолепным переводом чудесной книги "Выразительный JavaScript".

Две недели назад я начал вести свой подкаст на тему JavaScript. И каждую неделю у меня накапливается большой список интересных статей, видео и новостей, которыми интересно было бы поделиться с сообществом. В связи с этим я решил попробовать выложить вот такой набор интересных материалов.

На Хабре есть как минимум 2 еженедельных обзора мира фронтенда. Они классные, но пишут про весь фронтенд. А я пытаюсь больше уделять внимание JavaScript.

Если понравится — пишите, буду продолжать. Если нет — тоже пишите.

При написании серьезных проектов перед JavaScript программистами встает выбор: пожертвовать качеством кода и писать классы руками, или же пожертвовать скоростью и использовать систему классов. А если использовать систему, то какую выбрать?

В статье рассмотрена система автора, которая не уступает по скорости классам, написанным «от руки» (другими словами — одна из самых быстрых в мире). Но при этом классы имеют приятную структуру в стиле Си.

Системы классов

Есть шутка, что каждый программист должен написать свою систему классов. Кто не знаком с проблемой — смотрите этот комментарий, там их собрано минимум 50 штук.

Каждый из этих велосипедов отличается своим набором возможностей, своим стилем программирования и своим падением скорости. Так, например, создание класса MooTools примерно в 90 раз медленнее, чем создание класса, написанного от руки. Зачем тогда нужны все эти системы?

На изображении выше многие увидят известную картину. Так выглядит большинство CSS файлов на продакшене. Мы все стараемся, чтобы наши веб-страницы загружались быстро; для достижения этой цели используем различные инструменты и техники оптимизации загрузки и рендеринга страниц. Об одном, но редко используемом методе, я бы хотел поговорить и рассказать, как мне удалось сократить размер CSS файла почты mail.ru на 180Кб.