JavaScript *

Задумываясь о разработке html5 приложения, многим сразу на ум приходит jQuery, или точнее jQueryMobile. И попробовав написать даже самое простенькое приложение используя jQueryMobile, очень легко разочароваться, так как производительность и отзывчивость получившегося html5 приложения куда ниже ожидаемого, и уж совсем его не сравнить с нативными приложениями.

Если у вас был опыт в написании JS приложений, то наверняка вы знакомы с его синтаксисом. Он весьма не обычен и имеет ряд причуд, но в целом обдуманный, понятный и имеющий множество сходств с другими языками.

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

Обратите внимание: На момент написание данной книги, большинство новых возможностей ES6 уже были имплементированы как популярными браузерами(Firefox, Chrome и т.п.), так и множеством интересных окружений. Но к сожалению не все браузеры или же окружения могут работать с ES6. Как мы говорили в прошлой главе — транспилинг это наше все. С помощью данного подхода вы можете запустить любой из приведенных в этой книге примеров. Для этого в нашем распоряжении есть ряд инструментов — ES6Fiddle (http://www.es6fiddle.net/) отличная и простая в использовании площадка, для того, чтобы попробовать ES6 и REPL для Babel (http://babeljs.io/repl/).

Совершенно случайно наткнулся на аналогичный опрос за июль 2008 года.

Результаты улыбнули:



Интересно было бы посмотреть на статистику использования современных фреймворков.
(* Это не призыв к холивару в комментариях с выяснением «чей фреймворк лучше?»)

Как сыграть ноты в браузере? Как сократить любое длиннейшее произведение до 107 отдельных нот (которые можно еще и закэшировать) и килобайта-другого текста? Немного музыкальной теории, js-библиотеки и MIDI под катом.

Иногда JavaScript может вводить разработчика в заблуждение, а иногда — доводить до белого каления из-за своей неполной консистентности. Есть в JavaScript некоторые вещи, которые только запутывают и сбивают с толку. Самые известные из них оператор with, неявные глобальные переменные и странное поведение при операции сравнения.

Пожалуй, вокруг JavaScript разгоралось больше всего споров в истории программирования. Помимо его недостатков (отчасти рассмотренных в новых спецификациях ECMAScript), большинство программистов недовольны следующими моментами:

• DOM, который многие ошибочно считают эквивалентом самого языка JavaScript, обладает очень неудачным API.
• Когда переходишь на JavaScript с языков С и Java, то попадаешь в ловушку синтаксиса, который устроен не так, как в императивных языках. Это очень часто приводит к багам и сильно раздражает.

В результате JavaScript обрёл довольно плохую репутацию, которой он, в общем-то, не заслуживает. И чаще всего это связано с тем, что многие разработчики переносят на JavaScript свой опыт работы на Java или С/С++. Здесь разобраны три наиболее трудных случая, демонстрирующих разницу в подходах между Java и JavaScript.

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

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

Хочу уделить внимание книге, которую написал Kyle Simpson — «ES6 и за его пределами» (англ. «ES6 & Beyond»). Конечно, вклад внес не только он, а множество замечательных контрибьюторов. Благодарности.
На данный момент имеет статус — завершенный черновик.

Оглавление:

• Глава 1: ES? Настоящее & Будущее
• Глава 2: Синтаксис
• Глава 3: Организация
• Глава 4: Асинхронное управление потоком
• Глава 5: Коллекции
• Глава 6: API Дополнения
• Глава 7: Мета программирование
• Глава 8: За пределами ES6

Перед тем как начать читать эту книгу, я полагаю, что вы уже обладаете твердым знанием JavaScript вплоть до самого популярного стандарта (на момент написание этой книги), который обычно называют ES5 (технически это ES5.1). Здесь мы будем говорить о предстоящем стандарте ES6 и попытаемся понять дальнейшее развитие JS.

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

“Работа оплачивается опытом, а он налогами не облагается” Хэнк Хилл

Здравствуй, Хабр! В данной статье мы хотели бы рассказать историю создания мобильной игры “Robot Alan”, мотивированной простым желанием “Сделать игру!”, которое вылилось в три с лишним года переделок, бросания и начинания заново. Мы постараемся показать весь наш путь и то как мы с моим товарищем развивались и менялись под влиянием этой небольшой игрушки. Осторожно! Много страшных картинок из прошлого, много трафика!

Это перевод четвертой части серии статей об открытой Javascript canvas библиотеке Fabric.js.

Мы уже многое знаем из предыдущих частей серии: (Ч1, Ч2, Ч3) от простых манипуляций с объектами, до анимаций, событий, групп и подклассов. Но есть еще несколько интересных и полезных вещей, которые стоить осветить.

Мы часто видим ошибки и опечатки в интернете. Как правило, принято или с достоинством пройти мимо, в глубине души презирая неграмотного (или невнимательного) писателя, или, наоборот, с увлечением развернуть просветительскую деятельность (не всегда, к сожалению, уважительную). В лучшем случае, если на сайте установлен Orphus — нажать Ctrl+Enter.

Так поступал и я, пока однажды с ужасом не заметил, что написал «вООбщем» или нечто подобное. Разрушительное влияние чтения форумов, да и, что уж там, самого Хабра, на читательскую грамотность — налицо. А между тем — сейчас есть многое, что могло бы облегчить участь наших бедных глаз!

Apple HTTP Live Streaming — широко распространенная технология для доставки видео на мобильные устройства, которая делает ставку на простоту, универсальность и проходимость. В качестве протокола доставки используется самый простой, доступный и проверенный протокол Интернета HTTP, что позволяет доставить видео практически на любое устройство или ПО в сети.

Ниже под катом рассматривается альтернатива — Websocket Streaming для iOS Safari и подробно описывается процесс тестирования.

На Хабре было уже довольно много статей про новые возможности стандарта ECMAScript 6 (например,«Отказываемся от коллбэков: Генераторы в ECMAScript 6») и многие используют эти возможности.

Используя примеры из приведенной статьи, мы можем:
1. Легко написать любой итератор, например, итератор по дереву
2. Написать псевдо-синхронный код (борьба с callback)

Но что делать, если нам надо написать рекурсивный итератор по дереву, а получение дочерних узлов требует вызова асинхронной функции с передачей callback?

Простой рекурсивный итератор (без вызова асинхронных функций) мог бы выглядеть довольно просто и кратко:

function* iterTree(treenode) {
    var children = getChildren(treenode);
    if (children) { // inner node
        for (let i=0; i < children.length; i++) {
            yield* iterTree(children[i]); // (*) recursion
        }
    } else { // leaf node
        yield treenode;
    }	
}

Приведенный выше пример прост, поскольку использует синхронный вызов функции getChildren. Если же функция getChildren асинхронная и требует передачи callback (например, это получение данных с диска или по сети) – то все существенно усложняется. Мы уже не можем так просто написать (следуя примерам из приведенной выше статьи)

let children = yield getChildren(treenode, resumecallback);

В этом случае функция iterTree остановится в месте вызова оператора yield и передаст управление вызывающей функции. Но у нас рекурсивная функция – и вызывающая функция тоже передаст управление выше (оператор yield *). В результате пользователь нашего итератора будет получать узлы дерева, перемежаемые неожиданными значениями.

Предыстория

Одно из самых больших упущений JavaScript это невозможность создания приватных полей в пользовательских типах. Есть только один хороший путь создания приватной переменной внутри конструктора и создания привилегированных методов, которые будут иметь к ним доступ, например:

function Person(name) {
    this.getName = function() {
        return name;
    };
}

В данном примере метод getName() использует аргумент name (по факту являющийся локальной переменной) для возврата значения имени персоны без раскрытия name как свойство объекта. Данный подход вполне себе подходящий, но очень неэффективен с точки зрения производительности. Как вы знаете функции в JavaScript являются объектами и если вы используете больше кол-во экземпляров объекта Person, каждый будет хранить свою копию метода getName(), вместо того, что бы использовать всего один из прототипа.

Предисловие

В данной статье я поделюсь с вами опытом, как быстро и безболезненно создавать простые плагины для gulp. Статья ориентирована на таких же чайников, как и я. На тех, кто до сих пор лишь использовал готовые плоды gulp, срывая их с великого Древа Познания NPM, и не имел серьезного опыта работы с Node JS и его стримами.

Я не буду отвечать на вопросы вида «А зачем создавать свои плагины, если уже написано все, что только возможно?». Придет время, и вам за полчаса нужно будет написать что-то очень специфичное для вашего проекта. Перерыв весь npm, вы найдете один заброшенный плагин с убогим функционалом, автор которого недоступен, код ужасен и так далее. А может быть, это будет настолько специфичная задача, что вы не найдете абсолютно ничего.

Такой задачей для меня стала визуализация большого проекта, использующего Angular JS. Было огромное количество angular-модулей, связи между которыми были для меня уже не столь очевидными. Плюс мне хотелось видеть «диверсантов» — модули, которые каким-либо образом нарушали общую концепцию проекта (например, лезли в другой модуль не через провайдера, а напрямую).

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

Если читателя интересует лишь этот плагин, а не сама статья, то вот ссылка на проект на github и на npm. Всем остальным — добро пожаловать под кат.

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

В этом посте решил поделиться с хабрасообществом своей подборкой справочников и обучающих ресурсов для web-разработки, в основном на javascript. Она будет полезна тем, кто недавно начал заниматься frontend-разработкой и хочет иметь под рукой выборку удобных справочных материалов для работы.

Всех поздравляю с майскими праздниками. Сегодня хочу поделиться опытом использования ECMAScript 6(ES6). Мотивацией для написания статьи было отсутствие полного поэтапного руководства по использованию ES6, а точнее системы модулей с помощью транспилятора Babel. Кому интересно — добро пожаловать!

Наверное, многие слышали про тулбар от Билайн. С их стороны этот сервис вежливо назван "Мини-кабинет".

«Мини-кабинет» – это сервис самообслуживания в браузере, с помощью которого можно узнавать баланс, остаток интернет трафика, управлять услугами связи и менять тарифные планы, а также получать ссылки на полезные сервисы от «Билайн»

Есть говорить по-другому, то билайн добавлял на любую не зашифрованную (http) страницу свой javascript код и в браузере отображался тулбар с информацией о балансе и ссылками на сайт билайна. На хабре о нем как-то писали и проблема вроде как была решена.

Однако, Билайн решил пойти еще дальше и начал добавлять на сайты тулбар с поиском mail.ru.