Гость выпуска — Константин Щеглов, Google
Читать полностью »
Рубрика «javascript» - 437
«Разбор Полетов» — Dart-аньян веб-разработки
2014-01-26 в 22:24, admin, рубрики: dart, dart editor, java, javascript, разбор-полетов, метки: dart, dart editor, java, javascript, разбор-полетовmyStreamer
2014-01-26 в 17:45, admin, рубрики: AngularJS, html, html5, javascript, web, видео, сервис, Украина, метки: html5, web, видео, сервис, УкраинаДоброго времени суток, уважаемые читатели!
Сегодня я хотел бы поделиться с вами небольшим веб приложением — myStreamer, которое буквально собиралось на коленках за 2 ночи.
Немного предыстории:
Не секрет, что у нас тут “на” Украине творится, назовем это условно, дабы не обидеть стороны и остаться аполитичным, “массовые волнения народа, по поводу происходящих в стране событий”. И вот спустя два, с небольшим, месяца после начала этого действа ко мне в Skype постучался друг (он же в последствии и идейный вдохновитель первой стадии проекта) Avicorn (человек сугубо суровый и любящий порядок, собственно это и стало первопричиной идеи). Выразив свою обеспокоенностью отсутствием времени искать и собирать видео потоки новостных каналов, а так же постоянно их обновлять (youtube заставляет, как мы поняли запускать новые сессии вещания после каждого перерыва в трансляция), он намекнул, что не плохо бы было собрать с миру по нитке на одной страничке и куда-нибудь (это выяснилось уже позже, оказывается плеерам нужны “домены” и localhost им не нравится) выложить, чтобы он мог в свободную минуту предаться созерцанию происходящего действа. Одни каналы крутят постоянно новости, другие транслируют “стримеров” с полей, третьи аналитику толкают и открывать много страниц для обычного человека весьма затруднительно, поэтому, хоть какой то, но порядок в виде «все на одной странице» — весьма и весьма доставляет, а если еще кто-то озаботится обновлением ссылок на потоки, то будет совершенно замечательно.
Дросселирование ввода на AngularJS с помощью debounce
2014-01-26 в 16:29, admin, рубрики: AngularJS, debounce, javascript, throttle, underscoreСуществуют различные сценарии для использования дросселирования (throttling) ввода так, что пересчет значений фильтра будет происходить не каждый раз при изменении значения, а реже. Более подходящий термин — это «устранение дребезга» (debounce), так как в сущности вы ожидаете стабилизации значения на каком-либо постоянном уровне перед вызовом функции, чтобы не вызвать «дребезг» постоянных запросов к серверу. Канонический случай такого рода — это пользователь, вводящий текст в поле ввода для фильтрации списка элементов. Если логика вашего фильтра включает некоторый оверхед (например, фильтрация происходит через REST-ресурс, который выполняет запрос на базе данных бекенда), то вы точно не захотите все время перезапускать и перезагружать результаты запроса в то время, как пользователь пишет текст в поле. Более правильным будет вместо этого подождать, пока он закончит, и уже после этого выполнить запрос один раз.
Простое решение этой проблемы находится тут: jsfiddle.net/nZdgm/
Представим, что у вас есть список ($scope.list), который вы публикуете как фильтрованный список ($scope.filteredList) на основе чего-либо содержащего текст из поля $scope.searchText. Ваша форма выглядела бы примерно следующим образом (не обращайте внимание на чекбокс throttle пока что):Читать полностью »
Оптимизация обработки сложных селекторов
2014-01-25 в 11:54, admin, рубрики: css, github, javascript, jquery 
CSS селекторы в фронтенде можно сравнить с SQL операторами в бэкенде. Не смотря на их изначальную роль в CSS, мы активно используем селекторы в нашем Javascript коде, и, учитывая декларативный стиль селекторов, они являются приоритетными кандидатами на оптимизацию.Читать полностью »
Пишем парсер на NodeJS
2014-01-24 в 8:20, admin, рубрики: javascript, node.js, nodejs, parser, метки: javascript, nodejs, parser Раньше основной библиотекой для парсинга был JSDOM, который страдал излишней тяжеловесностью и на самом деле тормозил скорее процесс парсинга. Но время изменились и пришел cheerio. Он делает почти все то же самое, и отбрасывает лишние из процесса, при этом сам реализует какую-то часть jQuery(а именно ту, которая нам нужна для парсинга). И за счет этого позволяет наконец написать не тормозящий парсер, при этом не используя regexp'ы ради увеличения производительности. Он справляется и с xml, только нужно вызвать его с {xmlMode: true}. О том как можно легко парсить на nodeJS под катом.
Читать полностью »
Видеопроигрыватель для сайтов обучающих иностранным языкам
2014-01-24 в 5:43, admin, рубрики: html, javascript, Веб-разработка, изучение иностранных языков, иностранные языки, метки: изучение иностранных языков, иностранные языки 
Некоторое время назад я разработал ряд плагинов для javascript-видеопроигрывателя MedialElement, сейчас выложил их в открытый доступ. Эти плагины расширяют функциональность плейера таким образом, что он может быть использован для просмотра видеороликов обучающих иностранным языкам. Разумеется, и без моих плагинов никто не мешает просматривать обучающие видео в этом проигрывателе, но эти плагины делают процесс просмотра и изучения более комфортным.
За эталон, к которому я стремился при разработке, был взят проигрыватель http://www.yabla.com (не буду скрывать, изначально планировалось склонировать ресурс целиком, но проект не завёлся). Этот проигрыватель обладает следующими особенностями:
- навигация по таймлайну осуществляется не с точностью до секунды, а с точностью до предложения. Человеку, изучающему язык по видеороликам, часто приходится проматывать видео назад, чтобы несколько раз переслушать неразборчивую фразу и гораздо удобнее одним кликом переместиться к началу фразы, а не искать её начало несколькими кликами.
- Каждая фраза может быть зациклена, чтобы прослушать её многократно.
- Разбивка таймлайна на фразы не требует от редактора какой-то особой подготовки: данные о таймингах выбираются из стандартного srt-файла с титрами.
- Титры на всех доступных языках выводятся под видеороликом (при желании могут быть скрыты). Эта особенность позволяет, например, показывать пользователю титры на языке оригинала видео и на родном языке пользователя. Клик по слову в титрах ставит видео на паузу и показывает пользователю перевод слова, по которому сделан щелчок.
- Таймер показывает не только время от начала видеоролика, но также номер фразы и общее число фраз в ролике.
- Скорость проигрывания ролика может быть замедлена или ускорена.
- Переход между фразами возможен не только кликом по таймлайну, но и при помощи хоткеев Ctrl + стрелки влево/вправо. Другие горячие клавиши: пробел — зациклить фразу/снять зацикливание, Ctrl + стрелки вверх/вниз — изменение скорости ролика.
Web Components — будущее Web
2014-01-23 в 10:01, admin, рубрики: css, html, javascript, web, web components, метки: css, html, javascript, web, web components
Спустя какое время стало ясно, что основная идея Prototype вошла в противоречие с миром. Создатели браузеров ответили на возрождение Javascript добавлением новых API, многие из которых конфликтовали с реализацией Prototype.
— Sam Stephenson, создатель Prototype.js, You Are Not Your Code
Создатели браузеров поступают гармонично. Решение о новых API принимают с учётом текущих трендов в opensource сообществах. Так prototype.js способствовал появлению Array.prototype.forEach(), map() и т.д., jquery вдохновил разработчиков на HTMLElement.prototype.querySelector() и querySelectorAll().
Код на стороне клиента становится сложнее и объёмнее. Появляются многочисленные фреймворки, которые помогают держать этот хаус под контролем. Backbone, ember, angular и другие создали, чтобы помочь писать чистый, модульный код. Фреймворки уровня приложения — это тренд. Его дух присутствует в JS среде уже какое-то время. Не удивительно, что создатели браузеров решили обратить на него внимание.
Читать полностью »
Доступ к контенту iFrame с другого домена
2014-01-23 в 8:48, admin, рубрики: iframe, java, javascript, nginx, postMessage, proxy, Блог компании Mail.Ru Group, браузеры, Веб-разработка, метки: iframe, java, javascript, nginx, postMessage, proxy Сегодня я хочу рассказать о том, как мы в своем проекте indexisto.com сделали дешевую китайскую подделку аналог инструмента Google Webmaster Marker. Напомню, что Marker это инструмент в кабинете Google Webmaster, который позволяет аннотировать ваши страницы Open Graph тегами. Для этого вы просто выделяете мышкой кусок текста на странице и указываете что это title, а это рейтинг. Ваша страница при этом грузиться в Iframe в кабинете вебмастера.
Теперь Google, встретив подобную страницу на вашем сайте, уже знает, что за контент на ней опубликован, и как его красиво распарсить в сущность (статью, товар, видео..)
Нам был нужен подобный функционал. Задача казалась несложной и исключительно клиентсайд. Однако на практике решение лежит на стыке клиентсайда и серверсайда («чистые» JS программисты могу ничего не знать про различные прокси серверы и очень долго подходить к снаряду). При этом я не нашел в интернетах статью которая описывала бы всю технологию от начала до конца. Также хочется сказать спасибо пользователю BeLove и нашим безопасникам за помощь.
X-Notifier. Пишем оповещалку для трекера и диалогов на Хабарахабр
2014-01-23 в 8:47, admin, рубрики: api, Firefox, Google Chrome, javascript, mail, notifications, браузеры, метки: api, firefox, Google Chrome, mail, notifications 
Есть хороший плагин для всех популярных браузеров, X-Notifier. Он позволяет получать уведомления о новых письмах, сообщениях, да о чем угодно с различных сервисов в одном месте. Для него написано множество скриптов (Gmail, Яндекс.Почта, Google+, Facebook, Twitter и прочих). Но скрипта для Хабра, до сих пор никто не написал, пора исправить это недоразумение!
Читать полностью »
Глубинное погружение в test-driven JavaScript
2014-01-22 в 8:30, admin, рубрики: jasmine, javascript, qunit, tdd, метки: jasmine, javascript, qunit, tddМногие JavaScript-фреймворки предлагают свое представление о том, как должен выглядеть код. Более того, речь идет не просто о стиле, речь идет о способе написания сценариев. Это обусловлено практически абсолютной демократичностью JavaScript, да-да, именно таким является мультипарадигменный язык с С-подобным синтаксисом, прототипным наследованием, динамической типизацией и реализацией разнящейся от браузера к браузеру. Поэтому, когда речь идет о test-driven JavaScript я понимаю, что речь идет не просто об особом стиле программирования, но об особых технических принципах для особого фреймворка позволяющего тестировать JS приложения.
В этой статье я буду спорить сам с собой что же из себя представляет тестопригодный JavaScript-код и в какую цену он обойдется, ежели его начать использовать.
Внимание: длиннопост.
Читать полностью »