Опубликовали скринкаст! https://www.youtube.com/watch?v=BuKeVrQmVKI&t Ведущий: Владимир Гриненко
Репозиторий проекта с материалами для БЭМапа.
Привет!
Не знаешь, чем заняться в выходные в августе? Вот тебе подборка полезных видюшек про БЭМ:
Найти все прошедшие вебинары можно по тегу webinar. А все новые видео будут появляться в канале bem.info на YouTube. Подписыватесь!
Stay BEMed!
UPD: Опубликовали видео с митапа https://www.youtube.com/watch?v=o1MeyEvpDTg
11 августа в 19:00 в питерском офисе Яндекса пройдет еще один митап по БЭМ!
Сергей Бережной проведет мастер-класс по использованию bem-react-core — библиотеки, расширяющей возможности React. Вы получите возможность изменять любые аспекты поведения компонентов без добавления лапши из if-ов в коде. В точности так, как это делается в CSS.
Вы сможете:
Кроме того, мы ответим на любые ваши вопросы, связанные с БЭМ и работой фронтендера в Яндексе.
По традиции вы можете задать вопросы заранее в комментариях к этому посту, а мы постараемся подробно ответить на них во время митапа.
Участие, как всегда, бесплатно, но количество мест в зале ограничено, так что успейте зарегистрироваться! Мы просматриваем все заявки вручную, поэтому ответ с приглашением может прийти с задержкой.
Регистрация открыта!
Stay BEMed!
UPD: Опубликовали скринкаст митапа!
30 июня в московском офисе Яндекса пройдет очередная встреча БЭМ-сообщества.
В этот раз мы решили последовать общему реактовому тренду и ответить на ваши вопросы про разработку на БЭМ и React. Мы расскажем про нашу библиотеку bem-react-core и про всё, что успели сделать в этом направлении, ответим на ваши вопросы про React/БЭМ и не только.
По традиции на БЭМапе мы ответим на все вопросы, которые вы зададите в комментариях к этому анонсу.
Участие, как всегда, бесплатно, но количество мест в зале ограничено, так что успейте зарегистрироваться! Мы просматриваем все заявки вручную, поэтому могут быть некоторые задержки в получении.
https://www.youtube.com/watch?v=ztDWggzH8W4
Stay BEMed!
О том как развивается библиотека bem-react-core, которая позволяет декларативно работать с React-компонентами в рамках БЭМ-методологии. Спикер Антон Виноградов.
Часть 1 https://www.youtube.com/watch?v=4QblH4SKeIg
Часть 2 https://www.youtube.com/watch?v=MFlqi5maFX8
Спикер Дима Андриянов. https://www.youtube.com/watch?v=n0iF2zxa3DY
Добрый день. Помнится должен был пройти вебинар 23.03.2017 или 24.03.2017 (могу ошибаться, но примерно в этих датах). Есть запись? Все обыскал, но найти не могу, также нет никакого упоминания.
Недавно в библиотеке bem-react-core появилась документация, а на WSD в Москве я сделал быстрый обзорный доклад (начало в 4h30m36s):
Всем привет!
29 сентября в 19:00 Алексей @zxqfox Ярошевич проведет вебинар про сборку проектов с помощью gulp.
На вебинаре вы научитесь собирать с помощью gulp и модулей любые БЭМ-проекты: как простые статичные HTML-странички для верстки по макету, так и сложные сервисы на node.js, генерирующие BEMJSON в рантайме.
Запись трансляции 19:00 29 сентября доступна по ссылке: https://youtu.be/l1G425VcUUg
@tadatuta рассказал как использовать автоматическую генерацию актуальной документации для модульного фронтенда, презентация.
~Осталось не понятно, как это использовать. Покажите минимальный кейс использования bem-lib-site и расскажите где читать про остальное.~
UPD
git clone git@github.com:ilyar/bem-lib-site-test.git
cd bem-lib-site-test && npm install
npm test
open docs/index.html
Работает, хак внутри (может быть он уже не нужен). Сборку можно посмотреть тут ilyar.github.io/bem-lib-site-test/.
UPD 1/1/17
Убрал один хак https://github.com/ilyar/bem-lib-site-test/commit/a18e4849d46ed3ec370823080b204b3e14041877, добавил автотест генерации доки:
Пришло время поговорить об успехах и продвижениях в работе над сборкой с помощью BEM SDK.
На вебинаре мы расскажем вам:
С нашими новыми модулями для компонентной сборки ваши волосы станут чистыми и шелковистыми, а глаза перестанут быть красными.
Трансляция начнется в 19:00 28 июля на отдельной странице. Ведущий вебинара — @zxqfox.
Товарисчи! Подскажите где посмотреть последний вебинар про шаблонизаторы.
На PiterJS рассказал о стеке технологий БЭМ.
Было мало времени на подготовку, но я старался.
Видео: http://bit.ly/bem-full__video Доклад: http://bit.ly/bem-full
Буду рад вашим вопросам и предложениям!
Пишите: https://github.com/alexbaumgertner/presentation-bem-stack/issues
Спасибо!
На прошлых вебинарах с Димой Белицким мы сверстали простую страницу следуя БЭМ-методологии: написали HTML и CSS, немного декларативного JavaScript, а также настроили сборку с помощью gulp.
В этом вебинаре мы получим BEMJSON имеющихся страниц, напишем простые BEMHTML-шаблоны и посмотрим на некоторые интересные возможности BEMHTML.
Итак, немного про декларативные шаблоны.
Все привыкли к декларативной природе CSS, поэтому удобно провести аналогию.
Допустим, у нас есть список:
<ul class="menu">
<li class="menu__item">
Привет
<li>
<li class="menu__item">
BEM!
<li>
</ul>
Чтобы задать определенный внешний вид всем элементам списка можно написать CSS:
.menu__item {
background: red;
}
А если же хочется изменить связку ul + li, например, на nav + a? Что если это можно было бы сделать по аналогии с CSS, написав соответствующий «селектор» и просто задать другое значение свойству tag?
Так это выглядит в BEMHTML:
block('menu')(
tag()('nav')
)
block('menu').elem('item')(
tag()('a')
)
Чтобы иметь возможность таким образом пребразовывать HTML необходима особая декларация страницы.
BEMJSON — это описание структуры страницы в терминах БЭМ на JavaScript с зарезервированными полями. Указанный ранее список в BEMJSON описывается так:
({
block: 'menu',
tag: 'ul',
content: [
{
elem: 'item',
tag: 'li',
content: 'Привет'
},
{
elem: 'item',
tag: 'li',
content: 'BEM!'
}
]
})
BEMJSON компилирутся в HTML.
Избавиться от копипасты tag: 'li' поможет BEMHTML-шаблон.
block('menu')(
tag()('ul')
)
block('menu').elem('item')(
tag()('li')
)
BEMHTML-шаблон накладывается на BEMJSON по аналогии с тем, как CSS накладывается на DOM-дерево. На выходе — получаем HTML.
Код — 01858d
Если есть HTML, написанный по БЭМ, то BEMJSON можно получить автоматически с помощью пакета html2bemjson
npm install html2bemjson
Код — eef725
Далее нужно дотюнить сборку:
Код — 51ec21
BEMJSON представляет собой plain JavaScript, поэтому позволяет любые вычисления во время компиляции — то, чего не достает HTML.
Например,
({
block: 'menu',
// построим BEMJSON списка динамически из массива текстов элементов
content: [
'Привет',
'BEM!'
].map(function(text) {
return {
elem: 'item',
content: text
};
})
})
({
block: 'menu',
// определим массив текстов динамически,
// который будет разным при каждой генерации итогового HTML
content: (function() {
return Math.random() > 0.5 ? ['Привет'] : ['Привет', 'BEM!'];
}()).map(function(text) {
return {
elem: 'item',
content: text
};
})
})
Код — 17d9a6
Упростим полученный автоматической конвертацией BEMJSON:
pageКод — bad312
Шаблонизатор BEMHTML имеет некоторые интересные возможности:
Например, блок link должен быть представлен в HTML span-ом, а не ссылкой, если в BEMJSON не было поля url.
Например, менюшка на странице с Поттером должна быть в HTML представлена тегом ol, а на всех других страницах — ul. Для этого достаточно определить блок меню на уровне potter.blocks. После сборки всех шаблонов в один файл получим:
// common.blocks
block('menu')(...)
// potter.blocks
block('menu')(...)
По аналогии с CSS, последнее «правило» перебивает предыдущее.
Привет!
Скажите пожалуйста когда будет продолжение серии вебинаров Дмитрия Белицкого? Вот на чем остановились еще пол года назад: https://events.yandex.ru/lib/talks/2890/
На мой взгляд это лучшее что сейчас есть в сети на тему БЭМ!
