Конференция по AngularJS
16-17 января 2014 года в Солт-Лэйк-Сити (США) прошла конференция по AngularJS. Вот сайт конференции — http://ng-conf.org/ Вот видео с докладов — http://www.youtube.com/user/ngconfvideos Далее буду выкладывать видео докладов со своими комментариями
AngularJS: директива для вставки html выполнением всех скриптов
Допустим, мы получаем с сервера код вида <script>alert(1234)</script><script type=»text/javascript»>alert(12345)</script> <script type=»asdf»>alert(1234)</script><script src=»/js/alert.js»>alert(1234)</script> <span style=»color: red;»>1234</span> и хотим его вывести в шаблоне. Для обычного вывода с парсингом html-тегов достаточно <div ng-bind-html=»ad.html | trustAsHtml»></div> Но, к примеру, jQuery умеет выполнять все скрипты, которые есть в строке ad.html. AngularJS такого из коробки не умеет. Поэтому была написана директива …
Странный вывод странного кода
var x = ‘outer’; (function() { var x = ‘inner’; eval(‘console.log(x)’); (1,eval)(‘console.log(x)’); })(); выведет inner outer Почему? Вкратце — судя по всему, eval работает с контекстом корректно только при прямом вызове. А если вызвать его ненапрямую, например var ev = eval; ev(‘console.log(x)’); то и в этом случае контекст сбросится на глобальный. Тут есть попытки объяснения: …
Тест на регулярные выражения
http://regex.alf.nu/ Вот мой результат — http://grab.by/trRg (заняло часа три, помогал ребёнок трёх лет). Максимум, который видел — 3886 очков (правда за 3 с лишним дня).
CSS-анимация разных вращений
Всё сводится к подбору нужной перспективы у контейнера (http://www.w3.org/TR/css3-transforms/#perspective-property) perspective: 300px; -webkit-perspective: 300px; А для самого элемента к подбору точки вращения (http://www.w3.org/TR/css3-transforms/#transform-origin-property) transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; и повороту по нужной оси на нужный угол (http://www.w3.org/TR/css3-transforms/#funcdef-rotate) transform: rotateX(90deg); -webkit-transform: rotateX(90deg);
Kanbanflow — система распределения задач
На вид симпатичная, простая и быстрая. Позволяет бесплатно создавать множество «досок». Совместный доступ. Есть мобильная версия (правда, не приложение). https://kanbanflow.com/
Фильтры картинок на клиенте
«Фильтрация изображений (автоматические корректировки параметров, эффекты, пост-обработка и т.п.) – это задачи которые до недавнего времени вообще не возможно было решить в браузере. Все делалось с помощью старых друзей: флеша, сервера или фотошопа. Сейчас, в связи с повсеместным использованием html5 и css3, появилось и развивается сразу несколько возможностей обработки изображений непосредственно в браузере. Давайте попробуем …
Grunt-таск для замены ng-include на код шаблонов
Чтобы не делать лишних запросов на production, здесь решили вставить подключаемый шаблон напрямую: https://github.com/mgcrea/grunt-nginclude
Loading bar-сервис для AngularJS
Всё сделано через interceptors, всё «по-умному». http://chieffancypants.github.io/angular-loading-bar/ Мне, правда, аткой вариант не подходит (я про интерсепторы), уж очень он сильно ограничивает.
Алгоритм бесконечного скролла для AngularJS
Сам не реализовывал (не было надобности), только отдельные части, но кое-какие идейки имеются. Основные идеи Нужно ограничить общее количество элементов, выводимых на странице (допустим, минимальная высота элемента 100 пикселей, максимальная высота экрана — 2000 пикселей, тогда выводить нужно 50 элементов, с запасом). Обновлять выводимые элементы при скролле с использованием throttle. Если хотим иметь правильный скролл, …