avatar

Angular Light: «Ленивое» подключение директив и препроцессор

Опубликовал в блог Новости IT технологий
0
Для увеличения гибкости использования директив, я добавил «препроцессор» для директив. Он вызывается в момент «подключения» директивы в DOM. Вы можете расширить его либо заменить на свой, что дает такие возможности как:
  • Добавление своих атрибутов в директивы (наподобие template, templateUrl, scope ...)
  • Преобразование директив и их подмена
  • Смена местоположения директив, например в хранить часть директив в scope (ну а вдруг захочется)
Далее пара примеров: Читать дальше →
avatar

HTML5: Drag-and-Drop. Кроссбраузерный? Более чем…

Опубликовал в блог Новости IT технологий
0
image
Сегодня я запускаю первую версию js-скрипта DND v 1.0. Данный скрипт предоставляет возможность перетаскивать элементы на странице и помещать их в какую-либо область.
Перейти на сайт

Пролог
В современном web мы все привылки использовать такую прекрасную -библиотеку как . Но для того, чтобы создавать у себя на странице какие-то динамические эффекты приходиться еще прибегать к jQuery UI, не все слегкостью смогут осилить, разобраться с какими-то премудростями javascript-инициализации. В тем более теперь есть современный HTML5, который, со своим API, может дать легкий подход к разработке. Но как мы все знаем, HTML5 не поддерживается старыми браузерам, однако, это легко исправляется собственными решениями. В итоге я решил написать javascript библиотеку, которая дает возможность использовать HTML5 drag-and-drop у себя на сайте с поддержкой всех браузеров, включая десктопных. При этом технологию можно не изучать, привыкнуть и применять во благо, это все, что от нас требуется.

Особенности
  • Легкое использование
  • Легковесный скрипт -5 кб
  • Не требует сторонних js библиотек
  • Сочетается HTML5 и JS совместимость
  • Работает на всех компьютерах и на планшетах
  • От программиста требуются только знания CSS
Подробности
avatar

[Перевод] User Timing API

Опубликовал в блог Новости IT технологий
0
Данная статья была написана 21 января 2014 участником проекта HTML5Rocks, Алексом Данило. Хочу отметить, что это мой первый перевод на Хабре, поэтому к минусам я готов, к критике еще больше. По всем проблемам и недочетам старайтесь писать мне лично, я буду оперативно исправлять. Оригинал на английском.

Высокая производительность веб-приложений является ключевым моментом для конечного пользователя. Так как веб-приложения становятся всё более и более сложными, понимание управления производительностью является убедительным навыком программиста. За последние пару лет появилось множество новых API в браузере, позволяющих следить за производительностью сети, временем загрузки и т.д. но ни одно из них не позволяет достаточно гибко и детально определить, что же именно “тормозит” ваше приложение. Для этого и есть User Timing API, которое предоставляет механизм для вашего приложения, позволяющий определить, на что и когда расходуется время.
Читать дальше →
avatar

[Из песочницы] Создание клиентского MVC приложения с помощью RequireJS

Опубликовал в блог Новости IT технологий
0
Как веб-разработчик, вы, наверное, часто писали код в одном файле, и, когда количество кода становится все больше и больше, его трудно поддерживать. Для решения этой проблемы вы можете разделить свой ​​код на несколько файлов, добавить дополнительные теги script и использовать глобальные переменные для доступа к функциям, объявленным в других файлах. Но это загрязняет глобальное пространство имен и для каждого файла дополнительный запрос HTTP снижает пропускную способность, что увеличивает время загрузки страницы.

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

В этой пошаговой инструкции вы узнаете, как построить простое MVC (Model — View — Controller) приложение с помощью RequireJS. Вам не потребуются какие-либо предварительные знания в загрузке скриптов, основы мы рассмотрим в этой статье.
Читать дальше →
avatar

[Перевод] Будущее JavaScript MVC фреймворков

Опубликовал в блог Новости IT технологий
0

Представляем Om



Не так давно, мы узнали, что все структуры данных в ClojureScript постоянные в отличие от оригинального Clojure, в котором они реализованные на . Сейчас движки дошли до такого уровня, когда производительность коллекций стала в 2,5 раза выше, чем в JVМ.

Стоп, стоп, стоп. А какое же отношение может иметь производительность неизменяемых структур данных к JavaScript MVC? — Достаточно существенное.

Возможно, объяснить это будет не очень просто, но все же я постараюсь. Дело в том, что неизменяемые структуры данных, представленные в новой библиотеке Om позволяют создавать приложения на порядок производительнее, чем на популярных JS MVC фреймворков, таких как MVC Backbone.js (без ручной оптимизации). Om построен на прекрасном фреймворке от Facebook — React. Если вы не слышали о нём раньше, рекомендую посмотреть видео с JSConf EU 2013. Интересен тот факт, что из-за неизменяемых коллекций Om может продемонстрировать результаты лучше, чем при использовании React без каких-либо модификаций.
Читать дальше →
avatar

Библиотека для кэширования на стороне клиента

Опубликовал в блог Новости IT технологий
0
Поискал на хабре пост про эту библиотеку, не нашел и решил написать коротенько о ней.
Библиотека называется locache.js и позволяет кэшировать JS строки, массивы и объекты. Изюминка библиотеки в том, что кэшировать можно как внутри сессии пользователя, т.е. до перезагрузки окна браузера, так и за ее приделами, т.е. даже после закрытия браузера кэш останется.

Читать дальше →
avatar

[Из песочницы] Оптимизация вызовов функций из воркеров (web-workers)

Опубликовал в блог Новости IT технологий
0
Приветствую уважаемое Хабросообщество, и в качестве взноса в этот банк коллективного разума
— хочу поделиться своим опытом в работе с воркерами.

Воркеры (Web-workers), это технология, позволяющая запускать изолированные участки кода в отдельном потоке. Код из воркера не тормозит работу графического интерфейса, и выполняется быстрее, чем код на странице, что делает использование воркеров очень привлекательным, для ресурсоёмких расчётов, типа рисования графики или криптографии.
Кто ещё не встречался с этой технологией — здесь можно ознакомится с её основами.

Ниже, описан небольшой «лайфхак», который позволяет уменьшить количество кода, необходимого для вызова функций из воркера, если нужно вызывать больше одной функции.
Подробности
avatar

Jasmine DRY: а ты правильно пишешь тесты?

Опубликовал в блог Новости IT технологий
0
В промежутке времени между переквалификацией с Back-end программиста на Front-end, мне пришлось писать код для RoR приложения (да-да и тесты были). Интересным для меня показалась своеобразная атмосфера сообщества рубистов, которые очень строго относятся к написанию кода и если ты пишешь плохо, то тебе могут поломать пальцы не простить. Ведь код должен быть максимально простым и читабельным.

Это же правило применимо и к тестам (как по мне то, они должны быть на порядок проще чем сам код). В дополнение, в тестах есть свое золотое правило — One Expectation per Test. Не нужно писать кучу expect/assert/should вызовов в одном тесте, просто перестаньте это делать! И не забывайте, что тесты это тоже код, а copy-paste — плохая практика.
Читать дальше →
avatar

Несколько интересностей и полезностей для веб-разработчика #10

Опубликовал в блог Новости IT технологий
0
Доброго времени суток уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром. Это последняя подборка в этом году и я постарался сделать ее наиболее информативной и нужной.

image Летом 2013 года издательство The Guardian обновило свой сайт, согласно всем современным трендам/нормам/правилам. Но самым главным событием, является то, что разработчики выложили весь фронтенд сайта в открытый доступ на GitHub. Свыше 1500 старов, 10 000 коммитов и 100 веток. Там целый джентельменский набор. Для многих это будет кладезь знаний.

imageCenny.js — plug 'n play бэкенд для веб-приложений. Быстрый, защищенный, расширяемый.
<code class="">var server = new Cenny();
server.set({data: [1,2,3]});
server.get(function(data){ 
   console.log(data); 
});
</code>

imageМаленький скрипт от Filament Group (один из первых спонсоров ). Overthrow.js это полифил для отзывчивого дизайна, который стабилизирует работу стандартного скроллинга контента элементов (overflow: auto/scroll) на тач устройствах. Для тех, кто не совсем понял о чем речь, сравните на вашем гаджете работу обычного скроллинга и действие Overthrow.

Читать дальше →
avatar

HTTP Live Streaming на чистом Javascript

Опубликовал в блог Новости IT технологий
0
Недавно опубликовал в open-source напиленный за пару месяцев эксперимент (или proof-of-concept, как больше нравится): github.com/RReverser/mpegts.

Это работающий прототип реализации Apple HTTP Live Streaming (вкратце — один из трех популярных протоколов потокового видео), написанный вручную на . Он реализован на основе конвертации отдельных чанков MPEG-TS из оригинального манифеста потока в уже поддерживаемый практически всеми браузерами MP4 (а конкретнее, H264+AAC) непосредственно в браузере в отдельном потоке, и последующем проигрывании сконвертированных чанков в основном потоке. Читать дальше →