Добрый день. Помнится должен был пройти вебинар 23.03.2017 или 24.03.2017 (могу ошибаться, но примерно в этих датах). Есть запись? Все обыскал, но найти не могу, также нет никакого упоминания.
Добрый день. Помнится должен был пройти вебинар 23.03.2017 или 24.03.2017 (могу ошибаться, но примерно в этих датах). Есть запись? Все обыскал, но найти не могу, также нет никакого упоминания.
Вебинар по БЭМ Немного БЭМ в вашем React переносится на 29 марта. Теперь вам не придется выбирать между двумя интересными событиями:
Stay BEMed!
UPD: Изменилась дата проведения вебинара: 29 марта, 18:00. Ссылка на трансляцию обновлена.
29 марта, Антон Виноградов расскажет про новую для БЭМ-сообщества библиотеку bem-react-core, которая позволяет разрабатывать веб-приложения с использованием React и БЭМ-методологии.
Если вы уже знакомы с методологией и библиотекой от Facebook, то самое время начать использовать bem-react-core — декларативно описывать React-компоненты, гибко их доопределять и использовать уровни переопределения.
В рамках вебинара:
create-bem-react-app
-генератора. Трансляция начнется 29 марта в 18:00 на отдельной странице. https://www.youtube.com/watch?v=UeqPPkGXmbE
Уважаемая команда разработчиков БЭМ, может проведете вебинар по БЭМ для новичков, где будут рассмотрены такие моменты как:
Всем привет!
29 сентября в 19:00 Алексей @zxqfox Ярошевич проведет вебинар про сборку проектов с помощью gulp.
На вебинаре вы научитесь собирать с помощью gulp и модулей любые БЭМ-проекты: как простые статичные HTML-странички для верстки по макету, так и сложные сервисы на node.js, генерирующие BEMJSON в рантайме.
Запись трансляции 19:00 29 сентября доступна по ссылке: https://youtu.be/l1G425VcUUg
Пришло время поговорить об успехах и продвижениях в работе над сборкой с помощью BEM SDK.
На вебинаре мы расскажем вам:
С нашими новыми модулями для компонентной сборки ваши волосы станут чистыми и шелковистыми, а глаза перестанут быть красными.
Трансляция начнется в 19:00 28 июля на отдельной странице. Ведущий вебинара — @zxqfox.
Товарисчи! Подскажите где посмотреть последний вебинар про шаблонизаторы.
Новый вебинар по БЭМ совсем скоро!
17 мая в 19:00 мы поговорим об использовании BEMHTML и BEMTREE. Расскажем, как все это можно использовать с любыми источниками данных (файловой системой, базой данных, HTTP API или бэкендом на любом языке).
Поговорим о том, как писать шаблоны в стиле CSS, как повторно использовать разметку, как легко доставлять обновления разметки на несколько страниц или даже проектов.
Затронем работу как на сервере, так и на клиенте.
Обратите внимание, трансляция начнется в 19:00 17 мая на отдельной странице.
На предыдущих вебинарах мы говорили о декларативных возможностях CSS и BEMHTML, используемых в методологии БЭМ, а также о специальном фреймворке JavaScript для БЭМ.
В этот раз мы расскажем об open-source библиотеке БЭМ-блоков bem-components, используемой в Яндексе. Она вобрала в себя весь накопленный опыт и учитывает множество тонких нюансов от пуленепробиваемости благодаря БЭМ методологии и полному покрытию тестами, до соответствия высоким требованиям доступности (a11y).
Мы разработали её таким образом, что вы легко сможете внедрить её в свой проект, изменить визуальную тему или расширить.
Это вебинар для тех, кто уже немного знаком с БЭМ, знает HTML и CSS хотя бы на базовом уровне, понимает общие процессы веб-разработки и умеет пользоваться командной строкой. Также пригодятся знания, полученные на прошлых вебинарах. Для выполнения заданий понадобится терминал с установленными git, node.js и npm.
Обратите внимание, трансляция начнется в 17:00 16 марта на отдельной странице.
Важно! В этот раз мы хотим поэкспериментировать с Hangouts, так что трансляция будет выглядеть по-новому и предварительная регистрация не нужна.
На прошлых вебинарах с Димой Белицким мы сверстали простую страницу следуя БЭМ-методологии: написали 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, последнее «правило» перебивает предыдущее.
На предыдущих вебинарах мы говорили о декларативных возможностях CSS и BEMHTML, используемых в БЭМ. В этот раз — 16 декабря в 17:00 — мы расскажем и покажем, что декларативно можно писать не только стили и шаблоны, но и код на JavaScript — в том числе и для уровней переопределения. Применяется i-bem — специальный JavaScript-фреймворк для БЭМ.
Это вебинар для тех, кто уже немного знаком с БЭМ, знает HTML и CSS хотя бы на базовом уровне, понимает общие процессы веб-разработки и знаком с командной строкой. Также пригодятся знания, полученные на прошлых вебинарах. Для выполнения заданий понадобится терминал с установленными git и node.js.
Чтобы стать участником, пожалуйста, зарегистрируйтесь. Регистрация завершится 15 декабря в 16.00.
Обратите внимание, трансляция будет не на этой странице. За день до вебинара мы пришлём напоминание на электронную почту, указанную при регистрации, а за час до начала — индивидуальную ссылку на трансляцию.
Привет!
Скажите пожалуйста когда будет продолжение серии вебинаров Дмитрия Белицкого? Вот на чем остановились еще пол года назад: https://events.yandex.ru/lib/talks/2890/
На мой взгляд это лучшее что сейчас есть в сети на тему БЭМ!
Практикуюсь по мастер классу Мастер-класс+наоборот+вы+пишете+БЭМ-проект,+а+мы+подсказываем+—+Евгений+Константинов,+Дима+Белицкий Клонирую репозиторий https://github.com/bem/do-it-yourself-workshop Теперь надо установить зависимости через npm i. Вместо этого получаю ошибки. Работаю в Ubuntu 15.04 Прилагаю скриншот установки зависимостей. https://yadi.sk/i/GIFiNVGtgyRDi
Здравствуйте, сегодня мы провели вебинар — «Верстаем веб-страницу по БЭМ-методологии». Надеюсь вам было интересно и полезные знания влились в ваши головы.
Видеозапись будет доступна в течении двух недель.
Ссылки для изучения: — Методология. Определения — История создания БЭМ — Видео: История создания БЭМ. Кратко, сбивчиво и неполно — Side effects in CSS — Методология. Организация файловой системы
Ссылка на слайды на github.com. Ссылка на проект.
Конфиг vim
— это форк vimi
.
Всем БЭМ.