Всем привет!

Сегодня мы готовы рассказать о результатах конкурса разработки проектов на БЭМ, который мы провели в рамках открытого вебинара для LoftSchool, организованного совместно c проектом LoftBlog.

Напомним задание конкурса: разработать веб-проект, использовав максимальное количество технологий и инструментов стека БЭМ и показать отличное знание одноименной методологии.

Конкурс стартовал 31 января и длился 3 недели. 23 февраля 2015 года мы завершили прием заявок, написав небольшой пост. Мы получили 7 интересных конкурсных работ и взяли тайм-аут до 17 марта на тщательное ревью кода. Сейчас мы готовы рассказать вам о результатах, а также назвать имена победителей, которые получат интересные и полезные призы.

Начнем!

Проекты, принявшие участие в конкурсе

Набор карточек в стиле материального (material) дизайна от Google

Демо | Репозиторий | Полная версия ревью

Ревьюер проекта — Гела Константинова. В Яндексе с 2011 года. Руководит группой разработки сайта БЭМ. Участвует в развитии технологии. У Гелы сильно развито чувство прекрасного, поэтому проект, который напрямую связан с дизайном, лучше нее никто бы не оценил.

Автор проекта Алексей Милов реализовал набор блоков, который формирует блок-карточку с информацией в стиле модного материального дизайна от Google.

По словам ревьюра, автор уверенно знает CSS, поэтому явных промахов в этой части замечено не было.

Алексей старался следовать БЭМ-методологии, что видно по коду проекта, но допустил ряд отклонений, используя время от времени каскад и матчинг на HTML-теги.

По мнению ревьюера, проект можно улучшить в части верстки, правильного использования модификаторов для блоков и описания БЭМ-дерева страницы в формате BEMJSON.

Вывод: у автора достаточно знаний для разработки проектов с использованием БЭМ-стека, и это знание позволит ему уверенно вывести разработку своих веб-проектов на новый уровень.

Большое спасибо за участие в нашем конкурсе!

Вёрстка шаблона посадочной страницы Halcyon Days

Репозиторий | Полная версия ревью

Ревьюер — Дмитрий Белицкий. Разработчик интерфейсов в группе разработки БЭМ в симферопольском офисе Яндекса. Верстает, программирует на серверном и клиентском js. Читает сказки и ездит на работу на велосипеде. Дима — тот самый автор статьи на хабре о том, как разработать сайт на БЭМ с нуля.

По мнению ревьюера, автор проекта oozywaters сверстал на БЭМ красивый и современный шаблон и использовал при этом полный набор БЭМ-стека. Ему удалось задействовать известную библиотеку Bootstrap и доказать, что БЭМ дружит не только со своими библиотеками и не ограничивает разработчика в возможностях использования технологий и инструментов. Кроме того, автор проекта использовал на базовом уровне JS-фреймворк i-bem.js и подключал сторонние jQuery-плагины. Также автор по полной программе использовал шаблонизатор BEMHTML, вынеся в него базовые шаблоны для блоков.

В качестве направления для улучшения проекта ревьюер предложил автору более универсальный вариант подключения JS-плагинов и дал краткую инструкцию, как это можно сделать в project-stub. Кроме того, используя БЭМ-ориентированные библиотеки блоков и плагинов, например, bem-grid для создания модульной сетки и bem-components для реализации контролов страницы, разработчик проекта на БЭМ сможет получить пользы в виде более гибкой и надежной верстки и возможности повторно использовать код.

Вывод: проект получился по-настоящему в духе БЭМ!

Большое спасибо автору за участие в конкурсе! Мы надеемся, что полученный в ходе выполнения проекта опыт поможет ему в его работе.

Альтернативный вариант главной страницы bem.info

Демо | Репозиторий | Полная версия ревью

Ревью этого проекта досталось мне. Меня зовут Николай Ильченко. Я верстаю сайты последние 5 лет. Работаю в Яндексе с 2013 года, занимаюсь разработкой bem.info и форума на полном БЭМ-стеке.

На мой взгляд, идея проекта Ивана Лукьянца очень креативная — автор представил альтернативный взгляд на то, как могла бы выглядеть главная страница bem.info.

В проекте на основе project-stub использован полный БЭМ-стек (BEMJSON, BEMHTML, i-bem.js), библиотеки блоков bem-components и bem-grid. Последнюю Иван внедрил, разобравшись, как подключать к проекту сторонние БЭМ-библиотеки при сборке на ENB.

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

Вывод: проект привлек внимание креативностью и качеством исполнения.

Хотим сказать автору спасибо за участие в конкурсе, пожелать дальнейших успехов в использовании БЭМ и пригласить вступить в дружное БЭМ-сообщество!

БЭМ-библиотека для подключения шрифтовых иконок Font Awesome

Демо | Репозиторий | Полная версия ревью

Еще одна работа от Ивана Лукьянца, ревью которой проводил Андрей Абрамов, разработчик интерфейсов в службе разработки БЭМ и мейнтейнер сборщика ENB.

Автор проекта Иван Лукьянец разработал библиотеку для подключения иконочного шрифта Font Awesome в БЭМ-проект. В проекте частично используется БЭМ-стек: сборщик ENB, шаблонизатор BEMHTML и формат BEMJSON для описания демо-страницы примеров.

Андрей отправил PR, в котором предложил автору ряд улучшений, оптимизировал сборку проекта, убрал лишние bower-зависимости, обновил npm-зависимости, кастомизировал API блоков для подключения иконок, объяснил в ревью, зачем это нужно, и помог автору сделать демо-страницу более презентабельной.

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

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

Аналог jQuery UI слайдера в виде БЭМ-блока

Демо | Репозиторий | Полная версия ревью

Ревьюер — Евгений Константинов. Разработчик интерфейсов в группе разработки БЭМ в симферопольском офисе Яндекса. Занимается вёрсткой и программированием на js. Вместе с коллегами Евгений разрабатывает библиотеку блоков bem-components и активно выступает на мероприятиях по БЭМ и не только.

Проект, который достался на ревью Евгению, представляет собой БЭМ-блок, который интерпретирует <input type="range"> в БЭМ-терминах.

Автор проекта Игорь Уваров использовал для создания блока шаблонизатор BEMHTML и API фреймворка i-bem.js. По словам ревьюера, у автора получился работоспособный продукт, который реализует поставленную задачу.

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

Вывод: автор проекта разобрался с БЭМ-стеком, понял основные паттерны разработки проекта на БЭМ и создал красивую страницу для презентации своего блока.

Хочется сказать спасибо за участие в конкурсе и пример реализации настоящего БЭМ-блока.

Компонент выезжающего двухуровневого меню в виде БЭМ-библиотеки

Демо | Репозиторий | Полная версия ревью

Ревьюер — БЭМ-разработчик со стажем Владимир Гриненко aka tadatuta. Он руководит службой разработки БЭМ в Яндексе, занимается вёрсткой и JS-программированием, а также с удовольствием отвечает на вопросы разработчиков про БЭМ. Вне Яндекса не один год разрабатывал сайты и консультировал команды различного уровня.

Проект Алексея Гурьянова, который достался на ревью Владимиру, представляет собой компонент, который реализует сложное двухуровневое меню с помощью нескольких составных БЭМ-блоков. По словам ревьюера, проект выполнен на достаточно высоком уровне, чувствуется глубокое погружение автора в тему.

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

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

Вывод: подобный уровень реализации вдохновляет нашу команду на дальнейшее развитие БЭМ и разработки для сообщества и вместе с вами.

Большое спасибо за участие в конкурсе и активную позицию в жизни БЭМ-сообщества!

Верстка макета Velo Dashboard на базе заготовки БЭМ-проектов

Демо | Репозиторий | Полная версия ревью

Ревьюер — Александр Белянский, разработчик интерфейсов в группе рекламных технологий в Симферополе. Занимается вёрсткой и программированием на JavaScript, активно помогает команде БЭМ и является автором прототипа BEM-IDE.

Проект автора gcor, который оценивал Александр, представляет собой верстку портала о туризме. Автор разобрался с описанием БЭМ-дерева в формате BEMJSON, использовал ряд блоков из библиотеки bem-components и, следуя методологии БЭМ, правильно разбил код проекта в файловой системе.

Ревьювер предложил Антону свой путь развития проекта и дал полезные ссылки на примеры БЭМ-проектов и библиотек. Надеемся, что рекомендации натолкнут автора на новые интересные мысли и помогут в будущем.

Вывод: хочется отметить старания автора, ведь он выбрал не самый простой макет для верстки.

Большое спасибо за участие в конкурсе! Желаем удачи в освоении профессии.

Итоги конкурса проектов на БЭМ

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

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

Первое место

• Альтернативный вариант главной страницы bem.info, автор Иван Лукьянец
• Компонент выезжающего двухуровневого меню в виде БЭМ-библиотеки, автор Алексей Гурьянов

Второе место

• Вёрстка шаблона посадочной страницы Halcyon Days, автор oozywaters
• Аналог jQuery UI слайдера в виде БЭМ-блока, автор Игорь Уваров

Третье место

• Верстка макета Velo Dashboard на базе заготовки БЭМ-проектов, автор gcor
• Набор карточек в стиле материального (material) дизайна от Google, автор Алексей Милов
• БЭМ-библиотека для подключения шрифтовых иконок Font Awesome, автор Иван Лукьянец

Для получения призов просим всех участников связаться с нами по электронной почте info@bem.info и выслать следующую информацию: ФИО, домашний или рабочий адрес с индексом, мобильный или домашний номер телефона, по которому с вами можно было бы связаться.

Огромное спасибо всем за участие в конкурсе! Надеемся, что он дал вам необходимые знания и практический опыт, а также мотивацию двигаться дальше. Продолжайте развиваться, как разработчики, используйте БЭМ в реализации своих проектов и приходите к нам на форум делиться своим опытом разработки!

И конечно же, всем Stay BEMed!

P.S. На всякий случай – в организации bem-projects-competition-2015 вы сможете найти список всех ревью и форки проектов.