React input автофокус с помощью ref

Представьте ситуацию, когда вам нужно поставить фокус в инпут. Для input’а, который есть на странице в момент загрузки — никаких проблем, в документации указано как использовать ref. Остается только вызвать метод .focus()

Но если элемента на странице нет, например, по клику на «Логин» появляется модальное окно, и в нем нужно установить фокус в input…
читать далее

Объединение результатов нескольких потоков в gulp

Собственно не часто, но возникает задача объединить результаты нескольких потоков в один, при этом желательно сохранить порядок, дабы далее выполнять необходимые действия уже с результирующими данными. С этим нам поможет плагин streamqueue.

читать далее

Webpack source map для удобной отладки

Сегодня на операционном столе сайт с интерфейсом администратора. Причина заболевания: переезд с gulp на webpack.
Первая проблема: удобный source map.
Поехали 😉

читать далее

Получить список всех слушателей jQuery объекта

Пост буквально одной строкой! Проблема — производительность.
Почему? Часто навешиваете обработчик и забываете его снять? Работаете в команде, и не можете гарантировать, что кто-нибудь не навесил случайно на $(window).on(‘resize’,..) кучу тяжелых функций?
Посмотрите список всех обработчиков

jQuery._data( window, "events" );

P.S. и да, не забывайте давать своим событиям «namespace», например так:

$(window).on('resize.playstop', myFunction)
//потом легко снять
$(window).off('resize.playstop')

P.P.S подсмотрел кусочек про _data на StackOverflow.

Boilerplate: Angular.js + JADE + Gulp

Изначально я долго и усердно настраивал browserify+angular.js, и был близок к победе, но что-то пошло не так (а именно inject кастомных директив) и я решил немного повременить. Поэтому связка будет немного иной и в консоли придется выполнить на одну команду больше. Так или иначе, этот пост в первую очередь для моего друга-бэкэндера и здесь будет сделан упор на автосборку проекта с помощью таск-менеджера Gulp.
Lexa-007, You’re welcome 😉
читать далее

Кастомизируем angular-strap datepicker

Это не пост, скорее заметка, чтобы не забыть.
Речь идет про http://mgcrea.github.io/angular-strap/##datepickers
читать далее

Ньюанс base64 decode image для сохранения на диск

html5-canvas

Всеми любимый canvas имеет классный метод .toDataUrl(), который возвращает base64 закодированный текст. Но, внимание, с припиской вначале: data:image/png;base64, как раз в этом вся и проблема. При сохранении такой последовательности, ваше изображение получается испорченным. Все дело в том, что само изображение это ровно то, что идет после этого. Поэтому берите на вооружение вот такую регулярочку:

imgData.replace(/^data:image\/png;base64,/,'');
При копировании материалов обратная ссылка на play-stop.ru желательна обязательна!