Как стать автором
Обновить
0
0
Сергей @sinh

Software Developer

Отправить сообщение

Создание gulp-плагина на примере построения графа зависимостей для модулей Angular JS

Время на прочтение4 мин
Количество просмотров10K

Предисловие


В данной статье я поделюсь с вами опытом, как быстро и безболезненно создавать простые плагины для gulp. Статья ориентирована на таких же чайников, как и я. На тех, кто до сих пор лишь использовал готовые плоды gulp, срывая их с великого Древа Познания NPM, и не имел серьезного опыта работы с Node JS и его стримами.

Я не буду отвечать на вопросы вида «А зачем создавать свои плагины, если уже написано все, что только возможно?». Придет время, и вам за полчаса нужно будет написать что-то очень специфичное для вашего проекта. Перерыв весь npm, вы найдете один заброшенный плагин с убогим функционалом, автор которого недоступен, код ужасен и так далее. А может быть, это будет настолько специфичная задача, что вы не найдете абсолютно ничего.

Такой задачей для меня стала визуализация большого проекта, использующего Angular JS. Было огромное количество angular-модулей, связи между которыми были для меня уже не столь очевидными. Плюс мне хотелось видеть «диверсантов» — модули, которые каким-либо образом нарушали общую концепцию проекта (например, лезли в другой модуль не через провайдера, а напрямую).

Поискав, я нашел такое решение своей задачи. В принципе, запускать grunt плагины в gulp достаточно просто, но реализация в этом плагине меня не слишком впечатлила. Мне не хотелось использовать сторонние программы, а именно graphviz в качестве средства визуализации графа. Плюс ко всему, кто знает, что мне потребуется еще, а зависимость от сторонних библиотек всегда налагает ограничения.

Если читателя интересует лишь этот плагин, а не сама статья, то вот ссылка на проект на github и на npm. Всем остальным — добро пожаловать под кат.
Читать дальше →
Всего голосов 10: ↑10 и ↓0+10
Комментарии2

Именованные параметры C++. Не пригодились

Время на прочтение5 мин
Количество просмотров30K
Время от времени вдруг начинает хотеться именованных параметров в C++. Не так давно была статья, да и сам какое-то время назад писал на эту тему. И вот что удивительно — со времен той своей статьи я участвую в новом проекте без необходимости тащить за собой старый код, и как-то удивительным образом всего этого описанного собой же не использую. Т.е. в вопросе разобрался, восхитился перспективами… и продолжил работать по-старинке! Как же так? Лень? Инерция? Ответ постараюсь дать под катом.
Читать дальше →
Всего голосов 76: ↑64 и ↓12+52
Комментарии86

Раскол nodejs

Время на прочтение1 мин
Количество просмотров58K

Приключения JS продолжаются! На прошлой неделе произошло знаковое событие, приведшее к появлению форка nodejs. Неразрешенные проблемы проекта набрали критическую массу и привели к расколу: часть основных разработчиков недовольных политикой Joyent в отношении развития проекта создали форк и вышли из проекта. В частности они недовольны тем, что с 2013 года (версия 0.10) проект практически не развивается, использует старую версию v8, а система версионирования стала запутанной и не соответствует общепринятой модели semver и вообще. И так, встречайте io.js.

Читать дальше →
Всего голосов 98: ↑87 и ↓11+76
Комментарии47

AngularJS + UI Router: проверка авторизации и прав доступа

Время на прочтение3 мин
Количество просмотров74K
Если ваше приложение предполагает авторизацию пользователей и/или проверку прав доступа, то вам придется либо изобретать велосипед, либо гуглить в поисках подходящего решения. В принципе, я тоже это делал. В итоге я принял приемлемым для себя описанный ниже вариант.

Предпосылки


Информацию об авторизованном пользователе я решил хранить в sessionStorage, копируя её при запуске приложения в $rootScope. Также по рекомендации авторов UI Router я храню в $rootScope значения объекты $state и $stateParam, для удобного доступа. Информацию же о доступе к тому или иному состоянию можно передавать через блок data при описании самого состояния. Поскольку в моем приложении везде закрыт доступ, я решил идти от обратного и добавлять значение noLogin = true для состояний, которые не требуют авторизации, например страницы ввода логина, восстановления пароля или регистрации.
Читать дальше →
Всего голосов 31: ↑27 и ↓4+23
Комментарии23

Пересмотренное руководство по Grunt для начинающих

Время на прочтение6 мин
Количество просмотров50K
Еще в марте 2013 года я написал статью руководство по Grunt для начинающих и она стала самой посещаемой статьей на моем сайте. Я написал ее в то время, когда сам только начинал своё знакомство с Grunt, и это было скорее руководство для себя, чем для кого-то ещё. Теперь, спустя 18 месяцев, я почувствовал, что пришло время пересмотреть как я использую Grunt потому что сейчас я знаю гораздо больше, чем в то время.

Если вам не терпится просто увидеть код, то весь он есть на Github.
Читать дальше →
Всего голосов 22: ↑20 и ↓2+18
Комментарии16

Выразительный JavaScript: HTTP

Время на прочтение19 мин
Количество просмотров120K

Содержание




Мечта, ради которой создавалась Сеть – это общее информационное пространство, в котором мы общаемся, делясь информацией. Его универсальность является его неотъемлемой частью: ссылка в гипертексте может вести куда угодно, будь то персональная, локальная или глобальная информация, черновик или выверенный текст.

Тим Бернес-Ли, Всемирная паутина: Очень короткая личная история

Читать дальше →
Всего голосов 40: ↑38 и ↓2+36
Комментарии4

Как изобрести велосипед и познакомиться с FRP

Время на прочтение10 мин
Количество просмотров18K
Недавно мне выпал шанс заняться веб-приложением для взаимодействия с интерактивной доской (!) для мобильных устройств (!!) на любом стеке технологий, как серверных, так и клиентских (!!!). На этапе прототипа задача представляла собой простейший графический редактор. Заказчик изъявил желание уметь рисовать ломаные каким-нибудь способом, круги, отрезки, произвольные кривые и добавлять текст. Все вроде бы просто, однако, наученный горьким опытом GoF, Фаулера и прочих апологетов всяческих паттернов, я сразу понял, что заказчик лукавит, и что уже через неделю-месяц после прототипа ему понадобится рисовать эллипсы, прямоугольники и кучи прочих ништяков. И все это точно надо будет делать разными способами. По крайней мере, для десктопа и мобил.

Собственно, можно все сделать в лоб (для прототипа-то), но выпали выходные, пауза в задачах текущего проекта, и я решил сделать все по-хорошему. И в первый же вечер — callback hell.

А потом…
Потому что на работе больше заниматься нечем

И вот так я изобрел велосипед...
Всего голосов 26: ↑20 и ↓6+14
Комментарии5

5 историй успеха, которые бы не случились без promises

Время на прочтение7 мин
Количество просмотров24K
Привет Хабр!

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



Мораль проста: если вы еще не используете promise-ы, начните это делать!
Читать дальше →
Всего голосов 39: ↑24 и ↓15+9
Комментарии27

Выразительный JavaScript: Формы и поля форм

Время на прочтение17 мин
Количество просмотров198K

Содержание




Я нынче ж на ученом кутеже
Твое доверье службой завоюю,
Ты ж мне черкни расписку долговую,
Чтоб мне не сомневаться в платеже.

Мефистофель, в «Фаусте» Гёте


Формы были кратко представлены в предыдущей главе в качестве способа передачи информации, введённой пользователем, через HTTP. Они были разработаны в вебе до появления JavaScript, с тем расчётом, что взаимодействие с сервером происходит при переходе на другую страницу.

Но их элементы являются частями DOM, как и остальные части страницы, а элементы DOM, представляющие поля формы, поддерживают несколько свойств и событий, которых нет у других элементов. Это делает возможным просматривать и управлять полями ввода из программ JavaScript и добавлять функциональности к классическим формам или использовать формы и поля как основу для построения приложения.
Читать дальше →
Всего голосов 22: ↑22 и ↓0+22
Комментарии13

Выразительный JavaScript: Проект: программа Paint

Время на прочтение16 мин
Количество просмотров41K

Содержание




Я смотрю на многообразие цветов. Я смотрю на пустой холст. Затем я пытаюсь нанести цвета как слова, из которых возникают поэмы, как ноты, из которых возникает музыка.

Жоан Миро


Материал предыдущих глав даёт вам всё необходимое для создания простого веб-приложения. Именно этим мы и займёмся.

Наше приложение будет программой для рисования в браузере, схожей с Microsoft Paint. С его помощью можно будет открывать файлы с изображениями, малевать на них мышкой и сохранять обратно. Вот, как это будет выглядеть:


Простая программа рисования
Читать дальше →
Всего голосов 42: ↑39 и ↓3+36
Комментарии3

Выразительный JavaScript: Node.js

Время на прочтение22 мин
Количество просмотров148K

Содержание




Ученик спросил: «Программисты встарь использовали только простые компьютеры и программировали без языков, но они делали прекрасные программы. Почему мы используем сложные компьютеры и языки программирования?». Фу-Тзу ответил: «Строители встарь использовали только палки и глину, но они делали прекрасные хижины».

Мастер Юан-Ма, «Книга программирования»


На текущий момент вы учили язык JavaScript и использовали его в единственном окружении: в браузере. В этой и следующей главе мы кратко представим вам Node.js, программу, которая позволяет применять навыки JavaScript вне браузера. С ней вы можете написать всё, от утилит командной строки до динамических HTTP серверов.

Эти главы посвящены обучению важным идеям, составляющим Node.js и предназначены для передачи вам достаточного количества информации, чтобы вы могли писать полезные программы в этой среде. Они не пытаются быть всеобъемлющими справочниками по Node.

Код из предыдущих глав вы могли писать и исполнять прямо в браузере, но код из этой главы написан для Node и в браузере работать не будет.

Если вы хотите сразу запускать код из этой главы, начните с установки Node с сайта nodejs.org для вашей операционки. Также на этом сайте вы найдёте документацию по Node и его встроенным модулям.
Читать дальше →
Всего голосов 45: ↑42 и ↓3+39
Комментарии8

webpack: 7 бед — один ответ

Время на прочтение12 мин
Количество просмотров179K
После моего недавнего выступления на MoscowJS #17 с одноимённым докладом у многих возник интерес к этому инструменту. В рамках 11-го выпуска RadioJS, Миша Башкиров bashmish рассказал, что решился попробовать его в своём новом проекте, об успешном опыте и множестве положительных эмоций. Но были озвучены вопросы и возникла дискуссия, в результате которой я решил написать эту статью, чтобы раскрыть основные тезисы с доклада и рассказать о том, что тогда не успел.
Статья ориентирована, как на профессионалов, так и на тех, кто с похожими технологиями ещё не сталкивался.
Итак, начнём.
Читать дальше →
Всего голосов 17: ↑16 и ↓1+15
Комментарии13

Выразительный JavaScript: Проект: Веб-сайт по обмену опытом

Время на прочтение22 мин
Количество просмотров37K

Содержание




На встречах по обмену опытом люди с общими интересами встречаются и делают небольшие неформальные презентации на тему своих знаний. На встрече по обмену опытом среди фермеров кто-нибудь может рассказать о выращивании сельдерея. На встрече программистов вы можете выступить с рассказом про Node.js

Такие встречи – отличный способ расширить свой кругозор, узнать о новинках области, или просто пообщаться с людьми со схожими интересами. Во многих городах есть встречи любителей JavaScript. Обычно их посещение бесплатное, и я нашёл те, которые посещал, дружелюбными и гостеприимными.


Встречи моноциклистов

В последней главе-проекте мы устроим веб-сайт по обслуживанию выступлений, которые делаются на таких встречах. Представьте себе группу людей, которые регулярно встречаются в офисе одного из участников, чтобы поговорить о моноциклах. Проблема в том, что когда предыдущий организатор встреч переехал в другой город, никто не занял его место. Нам нужна система, которая позволит участникам предлагать и обсуждать темы друг с другом, без участия организатора.
Читать дальше →
Всего голосов 36: ↑36 и ↓0+36
Комментарии9

Авторизация пользователей с AngularJS и Firebase

Время на прочтение4 мин
Количество просмотров17K
В прошлой статье, я рассказывал о Firebase. Сегодня я хочу рассказать как я организовал авторизацию пользователей с использованием AngularJS и Firebase.

На данный момент я работаю, в свободное время над своим проектом, если в вкратце, то это сервис для создания прототипов SPA-приложений, думаю в скором времени я смогу расказать о нем больше, но пока только об авторизации. Почему я выбрал Firebase? Все просто, я очень ленивый программист и не люблю писать велосипеды, а данный сервис предлагает кучу готовых решений среди которых и авторизация и регистрация пользователей.

Для основы проекта я использую ngBoilerplate, так считаю его достаточно удачной сборкой не требующей каких-то особых доработок. В сборке предустановлены Twitter Bootstrap, Angular UI, Angular Bootstrap, Font Awesome и LESS. Также замечательно настроен Grunt и Bower. Для установки и запуска чистого приложения, нужно всего лишь выполнить следующие команды:
$ git clone git://github.com/joshdmiller/ng-boilerplate
$ cd ng-boilerplate
$ sudo npm -g install grunt-cli karma bower
$ npm install
$ bower install
$ grunt watch


Читать дальше →
Всего голосов 18: ↑15 и ↓3+12
Комментарии7

Разбираемся с Flux, реактивной архитектурой от facebook

Время на прочтение7 мин
Количество просмотров115K


Введение


Добро пожаловать в третью часть серии статей «Изучаем React». Сегодня мы будем изучать, как устроена архитектура Facebook Flux, и как использовать ее в своих проектах.
Ррреактивно!
Всего голосов 25: ↑25 и ↓0+25
Комментарии16

Тренды JavaScript на 2015 год

Время на прочтение19 мин
Количество просмотров112K


Всем привет! Мы как-то задумали сделать легкий вводный курс на тему JavaScript и разработки приложений (он, кстати, скоро будет опубликован): и, пока я собирал материалы к нему, как-то само собой выяснилось, что есть довольно много вещей, которые, так сказать, находятся на переднем крае развития JavaScript. Отсюда родилась идея сделать отдельную обзорную статью в жанре «X трендов на год Y по технологии Z».

Многие из тех, вещей, которые я буду описывать, можно попробовать в той или иной степени уже сегодня (собственно, иначе я бы говорил о космическом будущем, а не о трендах). В этом есть несомненный плюс: если у вас будет свободное время (а на праздниках его обычно много), вам будет чем заняться. Да и, в целом, хорошо начинать новый год с расширения своих горизонтов!
Читать дальше →
Всего голосов 108: ↑88 и ↓20+68
Комментарии76

Учебник AngularJS: Всеобъемлющее руководство, часть 1

Время на прочтение7 мин
Количество просмотров272K

Содержание


1 Введение в AngularJS
2 Engineering concepts in JavaScript frameworks
3 Modules
4 Understanding $scope
5 Controllers
6 Services and Factories
7 Templating with the Angular core
8 Directives (Core)
9 Directives (Custom)
10 Filters (Core)
11 Filters (Custom)
12 Dynamic routing with $routeProvider
13 Form Validation
14 Server communication with $http and $resource

1 Введение в AngularJS


Angular – MVW-фреймворк для разработки качественных клиентских веб-приложений на JavaScript. Он создан и поддерживается в Google и предлагает взглянуть на будущее веба, на то, какие новые возможности и стандарты он готовит для нас.

MVW означает Model-View-Whatever (модель – вид – что угодно), то есть гибкость в выборе шаблонов проектирования при разработке приложений. Мы можем выбрать модели MVC (Model-View-Controller) или MVVM (Model-View-ViewModel).

Этот обучающий материал задумывался как отправная точка для изучения AngularJS, его концепций и API, чтобы помочь вам создавать великолепные веб-приложения современным способом.
Читать дальше →
Всего голосов 44: ↑38 и ↓6+32
Комментарии29

Учебник AngularJS: Всеобъемлющее руководство, часть 2

Время на прочтение22 мин
Количество просмотров191K
Часть 1

4.1 $rootScope


$rootScope не сильно отличается от $scope, просто это объект $scope самого верхнего уровня, от которого происходят все остальные области видимости. Когда Angular начинает создание вашего приложение, он создаёт объект $rootScope, и все привязки и логика приложения создают объекты $scope, являющиеся наследниками $rootScope.

Обычно мы не используем $rootScope, но с его помощью можно обеспечить передачу данных между разными областями видимости.
Читать дальше →
Всего голосов 33: ↑29 и ↓4+25
Комментарии23

Краткая заметка про наследование в Node.js

Время на прочтение7 мин
Количество просмотров23K
В JavaScript существует множество разных способов наследования, классового и прототипного, фабричного и через примеси, прямого и непрямого, а так же гибриды нескольких методов. Но у Node.js есть его родной способ с применением util.inherits(ChildClass, ParentClass). До недавнего времени я использовал нодовский способ только для встроенных классов (когда нужно сделать своего наследника для EventEmitter, Readable/Writable Stream, Domain, Buffer и т.д.), а для моделирования предметной области применял общеупотребительные для всего JavaScript практики. И вот, впервые, понадобилось реализовать собственную иерархию системных классов, не наследников от встроенных, но и не классов предметной области, а классов, массово поражаемых в системном коде сервера приложений Impress. И простого использования util.inherits уже как-то не хватило, поискал я статьи и не найдя полностью всего, что мне нужно, изучил примеры наследования в исходниках самой ноды, подумал и сделал пример родного нодовского наследования себе на память и написал эту небольшую заметку, чтобы она, надеюсь, помогла еще и вам. Сразу предупреждаю, что реализация вызова метода родительского класса из переопределенного в дочернем классе метода, мне не очень нравится из-за громоздкости, поэтому, приветствую альтернативные способы и приглашаю коммитить их в репозиторий или в комментарии к этой заметке.

Читать дальше →
Всего голосов 17: ↑10 и ↓7+3
Комментарии66

JSON, который можно комментировать

Время на прочтение16 мин
Количество просмотров67K
Не все JSON нельзя комментировать (например, Хром[иум] вполне переносит комментарии в manifest.json), но в стандарте не предусмотрены комментарии к нему. Поэтому ряд функций в NodeJS не обрабатывают комментарии в формате JS и считают их ошибкой. Точно так же, AJAX с форматом JSON принимает их за ошибку. Поэтому для конфигурационных файлов в формате JSON имеется масса неудобств при попытках их использовать как человеко-читаемые файлы. Может быть, это иногда хорошо. Если хотим прокомментировать, то будем вынуждены оформить комментарий под или над строкой как «ключ-значение».
...{...
    "some-key_comment":"my comment for key and value",
    "some-key":"some-value",
...}...
Но если комментарии не пишем, следуя суровости протоколов, ошибки возникают уже из-за другого фактора — забывания смысла параметров настроек при редактировании человеком.
...{...
    "some-key":"some-value", //какой-какой key?? Ай, комментарии - нельзя!
...}...

Придумаем JSON-подобный формат с комментариями в стиле JS, чтобы их можно было выполнять как JS, а, очистив от комментариев — читать как JSON. ("TL:DR: покажите мне код.")
Как разрубить это узел
Всего голосов 35: ↑19 и ↓16+3
Комментарии49
1

Информация

В рейтинге
Не участвует
Откуда
Berlin, Berlin, Германия
Зарегистрирован
Активность