Добрый день. Помнится должен был пройти вебинар 23.03.2017 или 24.03.2017 (могу ошибаться, но примерно в этих датах). Есть запись? Все обыскал, но найти не могу, также нет никакого упоминания.

Вебинар по БЭМ Немного БЭМ в вашем React переносится на 29 марта. Теперь вам не придется выбирать между двумя интересными событиями:

• 15 марта пройдет React Moscow Meetup #2. Регистрация еще открыта.
• 29 марта состоится вебинар по БЭМ от Антона Виноградова. Актуальная ссылка на трансляцию здесь: https://www.youtube.com/watch?v=UeqPPkGXmbE

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

Уважаемая команда разработчиков БЭМ, может проведете вебинар по БЭМ для новичков, где будут рассмотрены такие моменты как:

1. Использование картинок в css и html;
2. Подключение и использование шрифтов;
3. Вынесение логических частей в отдельные файлы: header, footer и т.д.
4. Подключение и использование сторонних библиотек: как jquery, так и другие библиотеки использующие данный framework: magnific-popup, bx-slider и т.д. Просто на примере одного любого.
5. Подготовка проекта для production.

Всем привет!

29 сентября в 19:00 Алексей @zxqfox Ярошевич проведет вебинар про сборку проектов с помощью gulp.

На вебинаре вы научитесь собирать с помощью gulp и модулей любые БЭМ-проекты: как простые статичные HTML-странички для верстки по макету, так и сложные сервисы на node.js, генерирующие BEMJSON в рантайме.

Запись трансляции 19:00 29 сентября доступна по ссылке: https://youtu.be/l1G425VcUUg

Пришло время поговорить об успехах и продвижениях в работе над сборкой с помощью BEM SDK.

На вебинаре мы расскажем вам:

• Про проблемные места в имеющихся инструментах сборки и удобство модульного подхода.
• О целях организаций bem-sdk и gulp-bem на GitHub.
• Про интроспекцию своими руками по файлам компонентов ваших проектов и библиотек с помощью библиотеки bem-walk.
• О построении и использовании графа зависимостей и вычислении требуемых для сборки сущностей в различных технологиях (js, css, шаблоны) с помощью библиотеки bem-graph.
• О построении списка итоговых файлов компонент по .deps.js-файлам компонент с помощью bem-deps и bem-walk.
• Про сборку итоговых файлов для браузера из списка файлов компонент, полученных на предыдущем шаге, с помощью библиотек gulp-bem-*.

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

Трансляция начнется в 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

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.

BEMJSON для наших страниц

Код — 01858d

Если есть HTML, написанный по БЭМ, то BEMJSON можно получить автоматически с помощью пакета html2bemjson

npm install html2bemjson

Сборка

Код — eef725

Далее нужно дотюнить сборку:

• gulp научился собирать зависимости по BEMJSON, а не HTML
• добавился таск для компиляции HTML по BEMJSON с использованием BEMHTML-шаблонов

  Вычисления во время компиляции в BEMJSON

Код — 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
    };
  })
})

Напишем простые BEMHTML-шаблоны

Код — 17d9a6

Упростим полученный автоматической конвертацией BEMJSON:

• вынесем всю HTML-обвязку страницы в блок page
• упростим представление меню в BEMJSON, сгенерировав BEMJSON самого списка элементов в шаблоне
• напишем простой шаблон для ссылки

  Специальные возможности BEMHTML

Код — 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.

Всем БЭМ.