Привет, меня зовут Кондартов Алексей (github.com/ololobus, facebook.com/ololobus) и я представлял на хакатоне проект src2img.
Немного забегая вперед: на хакатоне мы сделали сервис для сохранения подсвеченного кода в виде картинки. Как так получилось, что мы решили делать именно этот проект?
В сентябре 2014 года я выступал с докладом на BEMup'е в Питере и, делая презентацию, я привычными движениями делал скриншоты своего любимого текстового редактора, чтобы вставить картинку с подсвеченными примерами кода. Потом выяснялось, что моя стандартная темная тема плохо читается на слайде, я делал скриншот снова в другой цветовой схеме. Иногда в выделенную область попадали элементы интерфейса, я опять переделывал. Иногда находил ошубку и... Ну, вы поняли :)
Само собой, мне этот процесс показался весьма несовершеным, и я стал искать что-то готовое. Хотелось просто сделать Ctrl + C нужного куска кода, потом Ctrl + V в форму, выбрать тему и скачать готовую картинку размером ровно по коду.
Потом я узнал про хакатон, предложил Леше (@rndD) поучаствовать, и он согласился. У нас было несколько идей, но в результате мы остановились на этом сервисе с картинками.
Мы остановились на этом маленьком сервисе, так как были почти на 100% уверены, что успеем все сделать и запустить готовый сервис вдвоем за отведенное время. Чтобы на хакатоне не заниматься неинтересной рутиной мы сделали несколько подготовительных действий:
- Зарегистрировали домен src2img.com
- Засетапили виртуалку на DigitalOcean
- Создали репозиторий team411/src2img
- Настроили DNS и повесили заглушку с картинкой
Изначально мы не были уверены, что сможем обойтись без бэкенда, поэтому хотели использовать на сервере phantom.js для отрисовки скриншотов. В остальном, планировалось использовать стандартный БЭМ-стэк: enb, bem-core, bem-components.
Задач было не так много, мы хотели реализовать базовую функциональность, описанную выше. Мы решили, что если к нам кто-нибудь еще присоединится, то можно будет докрутить каких-то дополнительных фич и улучшений. Иии, к нам присоединились еще двое ребят: Дима (@corpix) и Миша (@restrry)!
В самом начале мы немного поисследовали и выяснили, что для работы бозовой функциональности мы сможем обойтись совсем без бэкенда (спасибо библиотеке html2canvas)! Чтобы проверить это, мы буквально за полчаса сделали рабочий прототип в jsFiddle.
Так как наша команда теперь состояла аж из четырех человек вместо двух, то мы разделили задачи:
- Мы с Мишей больше занимались клиентскими блоками
- Леша помимо этого допиливал сборку и деплоил готовый результат на наш сервер
- Дима очень сильно помог со сборкой и фризом статики, а потом и вообще запилил свой экспериментальный бэкенд на
python, в котором он рендерилbemhtml-шаблоны.
В процессе работы у нас возникли серьезные проблемы с генератором проектов generator-bem-stub, который, несмотря на выбранные нами нужные опции, выдавал безумное количество ошибок в шаблонах bh, не собирал весь css и js даже для стандартных блоков из bem-components. Нам пришлось все удалить и скачать готовый project-stub. Это затормозило нас часа на 2-3.
По результатам хакатона мы сделали все, что и планировали, плюс немного вышли за рамки благодаря новым членам команды:
- Работающий сервис src2img.com
- Исходники github.com/team411/src2img
- Экспериментальный
python-бэкенд github.com/team411/src2img-backend
Я очень рад, что мне удалось поучастовать в этом хакатоне, а еще больше я рад, что к моей команде присоединились такие крутые ребята, и мы смогли вместе реализовать все задуманное :) Без них бы у меня ничего не получилось.
Трудно к чему-либо придраться в организации хакатона, поэтому просто еще раз скажу спасибо организаторам и своей команде. Было круто, надеюсь, что это был только первый хакатон по БЭМ!