JavaScript *

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

При написании своего 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 и каких камней повстречал можно узнать под катом.

За прошедшие, с момента публикации предыдущего обзора, 3 месяца уже успели обновиться почти все рассмотренные алгоритмы минимизации (кроме, Packer`а). Кроме того в Bundle Transformer появился новый модуль-минимизатор на базе Clean-css — BundleTransformer.CleanCss.

При подготовке данного сравнительного обзора были учтены следующие пожелания читателей:

1. В предыдущем обзоре в качестве исходных файлов использовались: bootstrap.css и bootstrap.js из Twitter Bootstrap 2.3.2, из-за чего достоверность результатов была низкой. В новом же обзоре размер выборки был увеличен: для сравнения были отобраны 7 JS-файлов и 5 CSS-файлов из 10 популярных Open Source-проектов.
2. Теперь в сравнении минимизаторов CSS-кода также участвуют встроенные средства минимизации препроцессоров LESS и Sass.
3. Как известно, Bundle Transformer минимизирует каждый файл по отдельности и затем производит объединение минимизированного кода в один файл. Данный механизм сделан для того, чтобы предотвратить повторную минимизацию предварительно минимизированных файлов. Другие аналогичные библиотеки сначала объединяют код файлов, а затем минимизируют этот объединенный файл. Поэтому для полноты картины мы произведем 2 сравнения: сначала сравним эффективность минимизаторов на файлах, полученных путем объединения минимизированного кода, а затем на файлах, полученных путем минимизации объединенного кода файлов.

Как и в предыдущем обзоре, для минимизации файлов мы будем использовать модули Bundle Transformer, а для измерения размеров полученных файлов – расширение YSlow.

На днях потребовалось ускорить открытие сайта. Проблема заключалась в том, что одни только JS-файлы, даже собранные в один и сжатые обфускацией, весили более 500kB, а ведь еще есть css тоже довольно крупный.
В связи с этим, пользователям, у которых файлы закешированы (например новый пользователь или после билда сменилась версия), с медленным интернетом приходилось ждать довольно долго, смотря на белый экран.

Всем привет

Вариантов использования Google Apps Scripts множество. Мой друг работал с иностранным заказчиком и тот просил каждый день отчет ему на почту с текстом кто и что делал. В результате он попросил сотрудников трэкать все в гугл таблицу не позднее 21:00, потом стартовал скрипт и собирал данные и слал по нужному адресу.
В статье я приведу простой и, как мне кажется, полезный пример использования Google Apps Scripts.

Что такое Google Apps Scripts?

Если коротко, то это сервис который позволяет на JavaScript писать скрипты, работающие в облаке Google. Сервис предоставляет широкий API, к примеру в данной статье мы создадим гугл таблицу на основе метрик приложения из Flurry.

Уважаемые хабровчане!

Сегодня и до следующей среды у нас проводится акция.
Объявлена скидка 20% на книгу

JavaScript: сильные стороны

Дугласа Крокфорда

см. Часть 1

Производительность: создание классов через __proto__

По производительности Object.create к сожалению не дает больших результатов (в особенности со вторым аргументом — дескрипторами). В отличии от использования __proto__ напрямую, который оказался даже быстрее связки функции–конструктора с оператором new — см. jsPerf. Отмечу также, что использование дескрипторов не особо удобно.

Здравствуй, <%= habrauser %>!

Я очень люблю фреймворк Ruby On Rails, он правда очень и очень крут. Он позволяет в кратчайшие сроки реализовать твои замыслы. Раньше я много писал на нем, но сегодня я front-end разработчик. Когда я узнал о методологии БЭМ, я был в полном восторге, потому что так или иначе ты сам приходишь к чему-то подобному. Хорошо, когда дзен-процесс сокращается в разы. О том, что такое БЭМ можно прочитать тут и тут. Недавно прошедший BEMup окончательно расставил все на свои места. Мне были просто необходимы инструменты для работы с БЭМ в рамках проектов на Ruby on Rails. Конкретных решений не существовало, а bem-tools не подходит по вполне понятным причинам, описанным ниже. Я решил написать bem-tools на Ruby.