JavaScript *

Привет, Хабр!

Мы выпустили WebStorm 7 — новую версию нашей JavaScript IDE, и с радостью хотим рассказать вам о том, что же нового в ней появилось.

Конечно же, в новом WebStorm 7 вы сможете порадоваться поддержке новых и востребованных технологий, например, JavaScript шаблонов, Stylus, Web Components. К тому же мы значительно переработали и улучшили внутренние инструменты IDE, что должно положительно отразиться на удобстве использования WebStorm и на вашей продуктивности.

Доброго времени суток, уважаемые хабражители. Хочу поделиться с вами одной замечательной находкой на GitHub — SVG.js — удобная манипуляция и анимация SVG. Хочется сказать о трех вещах, которые сосредоточили мое внимание на этой библиотеке. Самое простое и важное это то, что с появлением retina дисплеев SVG становится популярнее, более нужным, чем раньше. SVG.min.js весит 34кб и 9кб в Gzip, что в разы меньше Raphaël и что можно пожертвовать для дизайна и эффектов. Минифицированный SVG.filter.js размером в 3кб является прекрасным кроссбраузерным аналогом для свойства webkit-filter.

На первый поверхностный взгляд, слова JavaScript и «утечка памяти» рядом стоять не могут. Настоящих утечек памяти в JS, конечно, не может быть, потому что процесс сборки мусора происходит автоматически и не может контролироваться из нашего кода. Выделить память под объект и забыть освободить невозможно. Но могут быть ситуации, связанные с ошибками в логике работы приложения, которые приводят к утечкам памяти другого рода. Например, забиндили обработчик, в котором что-то делаем с методами общего объекта и забыли его анбиндить. Или же посылаем письмо с большим телом и не очищаем тело даже после отправки.



Мы в Яндекс.Почте, сложном и массовом проекте, накопили заметный опыт в поиске и устранении таких утечек, и хотим им поделиться.

Доброго времени, Хабр!
Я всегда очень любил котов, и любил их рисовать, особенно морды кошачьи. Чуть изменишь форму, линию — и совершенно другое выражение, другое настроение. У меня листы А4 были изрисованы под предел. И тут мне недавно стукнуло в голову — а что если сделать генератор морд котов? Чтобы нажал на кнопочку и тебе выкинется случайная морда кота. Как можно более случайная и интересная. Давайте же посмотрим, как же сделать такую штуку.
Прошу под кат, любители котов.

Для всех, кому прохладного дождя за окном в эти дни мало, Marek Brodziak сделал забавное демо на js + canvas (демо #1, демо #2 — и сразу предупреждаю, что заработать может не во всех браузерах), которое имитирует капли дождя на стекле. Своей целью разработчик ставил добиться лучшей плавности анимации капель.

Для достижения наилучшего эффекта погружения смотреть демо рекомендуется предварительно открыв в соседней вкладке raining.fm.

Перелистнём несколько страниц недавнего прошлого.

16 мая 2012 года RReverser во блогозаписи «Javascript BMP Parser» рассказал об употреблении модуля jParser для анализа двоичных данных, во браузере совершаемого.

На следующий же день (17 мая 2012 года) во блогозаписи «jParser: анализ двоичных файлов работает просто» я перевёл документацию по jParser, а чуть позже (22 мая 2012 года во блогозаписи «Node.js на узле Фидонета: читаем джаваскриптом заголовки эхопочты, хранимой в формате JAM») поделился собственным опытом употребления этого модуля (на сей раз — на Node.js, а не во браузере).

Прошло ≈1⅓ года…

12 сентября нынешнего (2013) года во блогозаписи «Недоволен скоростью джаваскриптов? — Подожди год-полтора, и это пройдёт!» я выразил неудовольствие от скорости работы модуля, прежде мною сочинённого, и указал на один только повод для оптимизма: поступательное развитие Node.js от версии 0.6 до версии 0.10 привело к росту скорости моего кода в три раза.

А сегодня события совершили полный круг — я напрочь отказался от употребления jParser. И достигнутый результат (как неприятная, так и радостная сторона его) оказался заслуживающим внимания.

Позвольте же поделиться с вами как впечатлениями, так и исходниками.

Здравствуйте!

При написании своего WYSIWYG редактора возникла проблема копирования текста из Ворда. Собственно проблем три:

• Ворд вставляет много мусорного html кода, который необходимо чистить
• Для представления списков Ворд почему-то использует параграфы вместо тегов UL и LI
• Собственно как определить, что вставленный текст является вставленным из Ворда.

В общем, для решения этих проблем, был написан jquery-плагин, полный исходный код которого доступен в конце статьи. Пример использования:

$(‘#editor’). msword_html_filter();

Плагин вешается на событие keyup и проверяет, является ли исходный код внутри редактора вставленным из Ворда, если да, то запускается функция очистки. В результирующем html прибивается все что только можно – неразрывные пробелы, атрибуты style и align, теги span, все Mso-классы, пустые параграфы.

Детали реализации под катом.

UPD Демо на CodePen

Работаю я в одном проекте с картами Google. Новыми, версии 3. Новые карты всем хороши: и быстрые, и дизайн симпатичный, и клевая клиентская библиотека для них есть. Одна проблема — маркеры одноцветные, а мне нужны разноцветные. В этой статье мы эту проблему будем решать — сделаем маленький сервис, который будет отдавать перекрашенный стандартный маркер нужного нам цвета.
Результат, для нетерпеливых, доступен здесь.

Несмотря на заметные успехи, Node.js все еще остается специализированной технологией, которой преимущественно закрывают узкие места в системах, написанных в другом стеке технологий. Причина такого положения кроется в том, что сама по себе нода не имеет многих библиотек, к которым мы привыкли на других языках и которые обеспечивают быструю разработку именно прикладного ПО. Например, для того, чтобы разделить в коде обработчики разных URL, отдавать статические файлы, организовывать сессии, запускать нескольких потоков, иметь доступа к БД, кешировать данные в памяти, разграничивать права пользователей, иметь логи и ротировать их, создавать сетевое API, рендерить шаблоны, настраивать URL-реврайтинг, обеспечивать быструю доставку событий с сервера на клиенты, для всего этого, и многих других задач, используются отдельные библиотеки (модули). Разные модули написаны разными разработчиками, сложно стыкуются, конфликтуют. В общем, мы решили, весь этот набор обязательного функционала, необходимого практически в каждом веб-приложении, объединить в один сервер приложений и повысить, таким образом, связанность кода, сделать ядро сервера приложений монолитным и более согласованным, чем решения, собранные из отдельных библиотек. Проект Impress уже анонсировался как прототип, а сейчас предоставляет весь необходимый арсенал для быстрой разработки приложений, что протестировано на десятке живых проектов. Impress значительно отличается от другой широко распространенной платформы так же, как импрессионизм отличается от экспрессионизма, то есть, производит целостное, хорошо продуманное эстетическое впечатление, в противоположность внезапному выбросу эмоций. Но мы, не вовлекаясь в критику чужого кода, перейдем к демонстрации конструктивных особенностей Impress.

Часть вторая

Приветствую в серии статей о WebGL рендринге ландшафта, используемом в игре Trigger Rally!

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

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


От переводчика: в статье много косноязычия и технических неточностей. Помогите их исправить!

Привет, последнее время мне частенько приходится обрабатывать всякие события на сайтах, будь то сообщения в чатах, оповещения, напоминания, входящая почта и т.д. Этих событий становится все больше и больше и все они хотят как то привлечь внимание пользователя к себе. Я изощряюсь в разных видах анимации, элементы прыгают, мигают, крутятся и т.д. и т.п. В какой-то момент я понял, что все эти приемы бесполезны, если пользователь, например, отвернулся от экрана или вовсе перешел на соседнюю вкладку в браузере. Решение пришло быстро — звуки. Но как это сделать? Немножко погуглив я не нашел каких либо простых и удобных решений этой задачи. Зато нашел кучи аудио/видео плееров всевозможных видов. Вот я и решил написать собственный плагин для воспроизведения звуков у событий.

Часть первая — Введение

В этой серии постов, я буду рассказывать о технологии рендринга ландшафта в игре «Rally Trigger», базируемой на WebGL.


От переводчика: случайно натолкнулся на эту серию статей, которая на данный момент еще только пишется. Нужно сказать — статьи отменные, все отлично разжёвано!

Mozilla Labs выпустила открытую библиотеку TogetherJS, с помощью которой на сайт легко добавить возможность коллективной работы в реальном времени.

Библиотека написана на JavaScript, не требует от посетителей установки никаких плагинов или программного обеспечения, всё работает сразу в браузере.

Для установки достаточно скопировать и вставить библиотеку и HTML-сниппет. TogetherJS дружественна к существующей структуре сайтов: скрипт ничего не меняет на сайте, только добавляет небольшую кнопку . По нажатию открывается дополнительное меню и появляется уникальная ссылка для отправки коллегам. Каждый, кто откроет эту ссылку, присоединится к групповой работе над данным документом.

Пол Адамс из Intercom на связи:

'Kарточки' — будущее веба. Они быстро становятся лучшим шаблоном для дизайна под мобильные устройства.

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

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

Или, по-русски, — виджет данных становится новой элементарной частицей интернета, заменяя в этом веб страницу.


(картинка из блога Intercom)

Идея, конечно, неожиданна, но не нова. Есть уже Open Graph от Facebook и Twitter Cards для встраивания контента. Да и oEmbed, опубликованный в далеком 2008м году, еще долго будет востребован (по крайней мере пока в нем продолжает публиковать свои проигрыватели YouTube так точно).

Но вот в комментариях к статье наткнулся на что-то действительно новое и интересное — ссылка на недавно опубликованный протокол для встраивания резиновых виджетов — Iframely.

Mobyfy.js — открытая библиотека, предназначенная прежде всего для облегчения создания отзывчивых (responsible) сайтов. Основная фишка состоит в так называемом «Capturing API» — позволяющем модифицировать DOM непосредственно ДО начала загрузки браузером ресурсов (скриптов, изображений и т.д.)

Не нашёл на хабре — спешу поделиться. Восхитительное выступление Александра Соловьёва ingspree на конференции JavaScript Frameworks Day 2013. На видео ниже просто набор отрывков из него, желающим посмотреть полностью — сюда.

Nodeconf.eu в этом году проходила с 9 по 11 сентября, в городке Waterford, на юге Ирландии. Это одна из немногих конференций которая проходит в Европе и полностью посвящена Node.JS. Презентации проходили в центре города, а практические занятия закрепляющие выступления проводились на острове скромно названном (на время проведения мероприятия) Nodeland. Всего участвовало 140 человек. В этом посте я собрал материалы с конференции, а также свои впечатления.

Идея попробовать нарисовать карту появилась после просмотра карты метро в Википедии в формате SVG. В Firefox она открывается долго, к тому же при разрешении 1600x1300 она не вмещается в экран, а скроллинг по ней работает тоже очень долго. Стало интересно, а в Canvas она тоже будет тормозить? Решил нарисовать свою версию карты метро Москвы в качестве очередного демо для проекта dbcartajs.

Доброго времени суток, уважаемые хабравчане. С прошедшим вас днем программиста. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Cloudconvert

Великолепный онлайн конвертер файлов, который поддерживает в общей сложности 140 форматов следующих типов: archive, audio, cad, document, ebook, image, presentation, spreadsheet, video. Синхронизируется с Dropbox и Google Drive, благодаря чему возможно использование на всех смартфонах. А самое приятное это то, что для данного сервиса существует функциональное и простое API.

Этим прохладным днём я искал алгоритмы и реализации вычисления числа пи. Алгоритмов нашлось какое-то несметное множество, но тут нашёлся пост с описанием алгоритма и его реализацией на си.
Алгоритм подкупает своей скоростью, хоть и выдаёт hex представление, но так уж вышло, что мне нужен был вариант на js. Моментальная, практически, переработка на обычный js показала очень плохую статистику, работа при подсчёте 1000000-ого знака заняла… 48 секунд (4ГГц FF).
О том, как возился с asmjs и каких камней повстречал можно узнать под катом.