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

Best of Awesomeness & Usefulness for Web Developers

Две недели назад я опубликовал «Лучшие интересности и полезности за год». Моим дайджестам тогда исполнился ровно один год и я хотел разместить пост точно в срок. Но не правильно рассчитал время и не упомянул много всего, что должно было быть в той подборке. И даже в опросах забыл указать в редакторах Vim, во фреймворках ExtJS и тд. За что мне очень стыдно. В целом подборка выросла как минимум в два раза и я создал репозиторий на GitHub. Моей целью не было сделать очередной awesome-* список, в которые попадает практически все подряд — лучшие и ненужные альтернативы. Я попытался выделить все самое лучшее.

DUO

Авторы проекта называют его сборщиком нового поколения для фронтенд разработчиков. DUO собрал в себе все самое лучшее от Component, Browserify и Go.

Прозрачность, контроль, ощущение прогресса, лёгкая и неформальная передача задач — это верные спутники гибких методологий. Мы много лет работали в софтверных компаниях и привыкли к тем преимуществам, которые дарит аджайл. Когда мы начали делать Кнопку, большая часть которой — это оффлайновая работа бухгалтеров, юристов и бизнес-ассистентов, первый вопрос, которым мы задались: «Будет ли аджайл работать в бухгалтерской компании?» Сейчас мы с уверенностью ответим утвердительно, но прежде нам пришлось приложить немало усилий. Про это сегодня и расскажем.

Сегодня моя цель – коротко рассказать о подходах data-informed продуктового менеджмента, который я исповедую и попытаться заинтересовать вас в использовании его базовых инструментов в ваших продуктах.

Короткий дисклеймер – я пришла в продуктовую разработку из проектного менеджмента в аутсорсе. Для меня стало неожиданностью, что в то время как продуктовым метрикам уделяется пристальное внимание, процессные и командные часто незаслуженно уходят на задний план.

Для себя я сформулировала, что измерения успешности продукта состоит из трех блоков:

— счастье пользователей;
— успешность (качественная и количественная) итераций и релизов;
— счастье команды.

Хочу рассказать о некоммерческом проекте Кодабра. Здесь мы учим детей программировать и создавать игры.

Предыстория

Как-то пришло осознание того, что максимум удовольствия в этой жизни фаундерам приносят три процесса — программирование, обучение других и общение с детьми. Мысли стали активно бурлить по поводу школы для детей, а активные действия начались с января 2014. Нас вдохновили такие проекты как codeclub.org.uk, code.org, cs-first.com. И мы решили использовать их опыт и организовывать бесплатные уроки на базе существующих школ, детских домов и иных детских учреждений.

Явный акцент сделали на мотивацию детей. Мы учим их делать мультфильмы, компьютерные игры, творить в цифровой вселенной.

Продолжая рассказывать о технологиях, которые используются в нашем сервисе email-маркетинга Pechkin-mail.ru, мы просто обязаны упомянуть об автоматическом определении пола подписчика по имени. Еще в 2007 году, разрабатывая сервис sms-рассылок, мы очень хотели реализовать возможность автоматического подставления окончаний в прилагательные “Уважаемый”, “Дорогой” и так далее. Обычно такая подстановка осуществляется на основании дополнительного поля в адресной базе клиента. Однако, как нам кажется, это полный отстой.
На это есть 3 причины:

1. заставлять подписчика задавать свой пол глупо (чем больше полей в форме, тем ниже вероятность ее заполнения)
2. определять вручную — долго, а значит дорого
3. от ошибок человек не застрахован ровно так же, как и машина.

Но мы не лингвисты, поэтому реализовать такой модуль было бы слишком сложно для нас, да и функция “не первой необходимости”. Но недавно, работая над склонениями текстов бесконечных актов, договоров и прочих юридических документов, мы вспомнили об используемом нами уже 2 года сервисе Морфер. Это прекрасный лингвистический сервис, специализирующийся на русском языке и позволяющий склонять по падежам слова, целые предложения, числительные, а также получать текст из цифр. В общем, потрясающая разработка всего одного человека — Сергея Слепова.

Mail.Ru — огромный портал, существующий более 15-ти лет. За это время мы прошли путь от небольшого веб-проекта до самого посещаемого сайта рунета. В состав портала входит огромное количество сервисов, у каждого из которых своя судьба, и над каждым из которых работает отдельная команда. Разработчикам пришлось как следует потрудиться, чтобы на всех проектах — и новых, и старых, и тех, которые присоединились к порталу по мере его развития, — использовалась единая система авторизации. А через много лет перед нами встала фактически обратная задача: разделить пользовательские сессии. О том, зачем мы это делали, какие трудности нас ожидали и как мы их обошли, я расскажу в этом посте.

Миссия команды TrackDuck — упростить процесс разработки любых веб-проектов. Мы понимаем, насколько важна надежная связь и понимание между заказчиком и исполнителем в процессе разработки. Нашему проекту уже почти 1,5 года, но мы чувствуем, что по-настоящему только начинаем работать над ним. И он, как любой хороший сервис, постоянно нуждается в улучшениях. Если вам интересен наш опыт — добро пожаловать под кат!

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

Awesome Python

Автор этого огромного списка полезностей для питонистов также как и автор похожего репозитория для сисадминов из прошлой моей подборки был вдохновлен проектом Awesome PHP. Это просто отличная тенденция, которая не может не радовать.

Chart.js

Потрясающие интерактивные графики и диаграммы на HTML5 Canvas. Chart.js не зависит от сторонник библиотек, работает во всех современных браузерах и даже в IE7/8 с полифилом, адаптивный к мобильный устройствам, очень гибкий и модульный. Выглядит все на самом деле очень красиво, но признаюсь я не настолько детально изучил проект, чтобы сказать чем он лучше DC.js из моего 19 выпуска. Дело в том, что Chart за несколько дней собрал почти 10 000 звезд на GitHub.

Ну и для того, чтобы добить тему визуализации данных, оставлю ссылку на Amcharts. Проект не open-source, но вы можете пользоваться им бесплатно, если будете размещать логотип. Хочу обратить ваше внимание на то, что с этой библиотекой работают Microsoft, Amazon, IBM, Bank of America, NASA, P&G, PayPal и многие другие мировые корпорации.

В работе почти каждого человека непременно есть цифры, от которых зависит всё. Посещаемость сайта, время отклика или количество коммитов — что угодно! И если поместить эти цифры на самое видное место, они сразу становятся либо отличным способом оперативно принимать решения, либо просто наглядным инструментом мотивации. А самый лучший способ сделать это — это собственный дешборд, информационное табло, которое можно повесить на самом видном месте в офисе.

Буквально пару абзацев я уделю внимание особенностям взаимодействия этой библиотеки с фреймворком Yii, остальное же в полной мере универсально и будет интересно всем, кто использует или планирует использовать эту библиотеку.

Если вы уже хорошо знакомы с Purifier, то можете смело начинать читать отсюда

Немного о HTML Purifier

Если вы не слышали о такой прекрасной библиотеке (а поиск на Хабре говорит о не такой уж большой популярности) как HTML Purifier, то советую обязательно к ней присмотреться, особенно если ваши пользователи генерируют контент в html формате. Это может быть рядовой пользователь, модератор или даже администратор.
Что же делает эта библиотека?
Согласно конфигурации она очищает любой html код от всех вредоносных, невалидных, запрещенных (вашей конфигурацией) частей кода, в том числе отдельные атрибуты.

У авиакомпаний было 90 лет, чтобы нарисовать посадочный талон, и они все равно облажались. Я предлагаю сделать так:

При разработке одного сервиса я столкнулся с необходимостью дать возможность пользователям сообщать об ошибках. Проблема заключалась в том, чтобы пользователь мог сделать скриншот без использования стороннего софта или сервиса.

Сначала эта задача показалась мне невыполнимой, но я нашел html2canvas.

/////////

Доброго времени суток, уважаемые хабражители. Хочу поделиться с вами одной замечательной находкой на GitHub — SVG.js — удобная манипуляция и анимация SVG. Хочется сказать о трех вещах, которые сосредоточили мое внимание на этой библиотеке. Самое простое и важное это то, что с появлением retina дисплеев SVG становится популярнее, более нужным, чем раньше. SVG.min.js весит 34кб и 9кб в Gzip, что в разы меньше Raphaël и что можно пожертвовать для дизайна и эффектов. Минифицированный SVG.filter.js размером в 3кб является прекрасным кроссбраузерным аналогом для свойства webkit-filter.

Это небольшой учебный пример редактора карты памяти. За счёт очень подробных комментариев и простого кода, понять его не составит проблем. Статья предназначена для знающих и изучающих Javascript.

Я опишу особенности создания редактора карты памяти, который использует базу данных браузера. Причём, это будет не LocalStorage, который не может превышать 5 мегабайт. Объём данных сможет превысить 100-200 мегабайт, так как используется IndexedDB или webSQL, смотря что доступно в конкретном браузере.

Исходники выложены в открытый доступ на Github.

Мы уложимся в 520 строк кода, при этом в нашей карте можно будет перетаскивать узлы между собой, удалять, переименовывать и создавать новые. А также можно будет назначать одну из 120 иконок через контекстное меню.

Секрет минимализма в том, что мы будем использовать проверенные в бою плагины:

1. Ydn.db — хранение информации в базе данных браузера с автоматическим выбором лучшего метода и единым API
2. jQuery context menu — контекстное меню, которое можно наполнять динамически при помощи Javascript
3. jsPlumb — расширение позволяющее рисовать линии между HTML элементами
4. jQuery UI — Drag&drop — перетаскивание элементов между собой

PS: Также мы научимся создавать «синглтон», облегчать себе асинхронное программирование при помощи jQuery и встроенного объекта $.Deferred(), а также при помощи плагина LiveReload, сохраним краску на клавише F5 при изменении свойств CSS и кода в HTML и Javascript.

Непрерывная интеграция (англ. Continuous Integration) — это практика разработки программного обеспечения, которая заключается в выполнении частых автоматизированных сборок проекта для скорейшего выявления и решения интеграционных проблем. В обычном проекте, где над разными частями системы разработчики трудятся независимо, стадия интеграции является заключительной. Она может непредсказуемо задержать окончание работ. Переход к непрерывной интеграции позволяет снизить трудоёмкость интеграции и сделать её более предсказуемой за счет наиболее раннего обнаружения и устранения ошибок и противоречий.

В этом топике мы в общих чертах рассмотрим процесс реализации непрерывной интеграции на примере TeamCity Enterprise 6.0 EAP (build 15400) и обратим внимание на применении инструментов рассмотренных в прошлой теме: Обеспечение качества программного продукта.

При разработке современного сайта часто возникает необходимость реализовать функционал вывода близлежащих географических точек. Самым оптимальным способом решения этой задачи является перекладывание работы по реализации определения точек на плечи MySQL. Если конкретней, то нам будут нужны возможности пространственных расширений MySQL (до версии 5.0.16 эти расширения были доступны только для MyISAM, более поздние версии MySQL поддерживают работу пространственных расширений с InnoDB, NDB, BDB и ARCHIVE).

Расстояние между точками будет вычисляться по формуле гаверсинусов. Формула позволяет получать расстояние между точками с очень низкой погрешностью (величина погрешности прямо пропорциональна расстоянию между точками, и не превышает 10-20 километров при вычислении очень больших расстояний, например между штаб-квартирой Google в Калифорнии (37.422045, -122.084347) и оперным театром в Сиднее, Австралия (-33.856553, 151.214696)).

Вольно цитируя вступление к соответствующей статье на RailsGuides,

Миграции — это удобный способ управления структурой и изменениями схемы БД.

Конечно, можно вести дела по старинке, оперируя множеством SQL-файлов, или, о ужас!, редактируя куски SQL-кода в одном большом файле, который представляет собой актуальную схему БД.

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

Если Вы уже заинтересовались, или все еще не уверены, но перспектива иметь прозрачную историю изменений и возможность с помощью одной-двух консольных команд откатиться на любою версию схемы, звучит заманчиво, прошу под кат.

Привет, Хабр. В этой статье я расскажу о HTML Notification API.

Какие возможности предоставляет Notification API

API позволяем отправлять уведомления через браузер. Вы можете задавать иконку для каждого уведомления, группировать уведомления, указывать заголовок и текст уведомления.

Поддержка в браузерах

• Safari 6
• Chrome 27
• Firefox 22

Opera 15 beta не работает с Notifications API, несмотря на наличие конструктора Notification.
На мобильных платформах технология не работает.
В движке webkit есть старая нотация в виде webkitNotifications.

Как это работает

Цикл работы следующий:

1. Получить разрешение на отправку;
2. Правило фиксируется для сайта;
3. Отправить уведомление.

Известные нам по гениальным обучающим скринкастам Rails for Zombies, Try Ruby и Try Git — команда Codeschool объединилась с корпорацией добра для создания Try DevTools — подробнейшего обучающего курса из семи глав, который, конечно же, является абсолютно бесплатным.