tavriaforever commented 9 years ago

Всем привет!

На прошедшей неделе совместно с проектом LoftBlog мы проводили открытый вебинар по БЭМ, где в процессе знакомились с БЭМ-стеком и сверстали макет страницы Яндекс.Музыки.

webinar-promo

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

До дня защитника отечества – 23 февраля 2015 года мы ждем ваши проекты на БЭМ. Под проектами мы подразумеваем любые варианты разработки веб-проекта, будь то верстка страницы, написание отдельного компонента (слайдер чего-либо, корзина товаров и т.п.), БЭМ проект с бэкендом на node.js/php или разработка своей библиотеки с часто используемыми блоками.

Исполнителей лучших работ мы вознаградим подарками от команды БЭМ. Мы будем выбирать не по крутости проекта, а по полноте использования БЭМ стека и качеству выполнения. За основу можно брать заготовку для БЭМ проектов – Project-stub.

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

Требования:

Использование БЭМ платформы (bemjson, bemhtml/bh, i-bem.js).
Ссылка в комментарии к этому посту на открытый репозиторий с исходниками Вашего проекта на Github

Запись вебинара доступна на Youtube Тяжело в учении, легко в бою. Всем удачи в освоении и Stay BEMed!

phamap commented 9 years ago

Доброго дня, Николай. Был на вебинаре, все очень понравилось, а главное проникся идеей БЭМ. Поэтому не откладывая в долгий ящик решил реализовать свой небольшой проект.

Вот ссылка - https://github.com/phamap/bem-card-world

Еще нашел небольшую неточность в документации. Не знаю как на маках, но ubuntu 12.04 не установились зависимости, поэтому пришлось набирать в консоли "npm run deps". Да и клонировал я обычный project-stub, поэтому сборка как на вебинаре тоже не работала) пришлось лезть в конфиг и искать чего не хватает. В остальном разработка по БЭМ проходит весело)

tavriaforever commented 9 years ago

Супер, твою работу обязательно оценим с комментариями. Результаты будут после 23 февраля 2015 года. Ты большой молодец! p.s. Расскажи немного подробней, какие зависимости не поставились, если возможно скинь на http://gist.github.com лог. Мы постараемся пофиксить, если сможем повторить.

tadatuta commented 9 years ago

@phamap предположу, что ты пытался ставить зависимости под root-ом? если так, то это сознательное поведение на строне bower.

phamap commented 9 years ago

не поставились bower зависимости. да, пытался ставить под рутом. под линуксом без рута, что-то да обязательно не поставится, поэтому все, что связано с npm или node приходится через sudo ставить. кстати, решение взял здесь - https://ru.bem.info/forum/issues/65/

2 февраля 2015 г., 15:53 пользователь Vladimir Grinenko < notifications@github.com> написал:

@phamap https://github.com/phamap предложу, что ты пытался ставить зависимости под root-ом? если так, то это сознательное поведение на строне bower.

— Reply to this email directly or view it on GitHub https://github.com/bem/bem-forum-content-ru/issues/193#issuecomment-72430296 .

С уважением, Алексей. http://phamap.github.io

Guria commented 9 years ago

Рекомендую ставить nodejs через nvm, тогда рут не нужен будет.

phamap commented 9 years ago

учту, спасибо)

tavriaforever commented 9 years ago

Добавили развернутые ответы с полезными ссылками на вопросы под видео на ютубе http://youtu.be/1GWoMnYldYc

belozer commented 9 years ago

@phamap Не знаю как на U12.04, но на 14.04 и 14.10 всё с полпинка заработало

phamap commented 9 years ago

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

belozer commented 9 years ago

@phamap зато начинаешь понимать как всё устроено )

belozer commented 9 years ago

на работает команда дист dist

вот часть файла packege.json

...
  "scripts": {
    "start": "enb server",
    "postinstall": "[ \"$NODE_ENV\" != 'production' ] && bower-npm-install || true",
    "deps": "bower-npm-install --non-interactive",
    "dist": "YENV=production enb make dist -n"
  },
...

вот файл борщика

{
    "freeze_paths": {
        "img/**" : "dist/_",
        "**/*blocks/**": "dist/_"
    },

    "paths": {
        "./dist/_" : "_"
    }
}

при запуске enb run dist вываливается только помощь по использованию

$ enb run dist    

  Usage: enb [options] [command]

  Commands:

    make [options]         build specified targets
    server [options]       run development server
    help                   displays help about techs
    *                     

  Options:

    -h, --help     output usage information
    -V, --version  output the version number

phamap commented 9 years ago

а вот так - npm run dist ?)

belozer commented 9 years ago

@phamap что-то я не заметил ))

Но сейчас другая возникла проблема

$ npm run dist

> bem-project-stub@1.0.0 dist /home/sergey/projects/soprof
> YENV=production enb make dist -n

10:53:48.748 - build started
10:53:48.750 - build failed
Error: Target not found: dist
    at Error (<anonymous>)
    at TargetNotFoundError (/home/sergey/projects/soprof/node_modules/enb/lib/errors/target-not-found-error.js:11:23)
    at module.exports.inherit._resolveTarget (/home/sergey/projects/soprof/node_modules/enb/lib/make.js:392:15)
    at /home/sergey/projects/soprof/node_modules/enb/lib/make.js:409:36
    at Array.forEach (native)
    at module.exports.inherit._resolveTargets (/home/sergey/projects/soprof/node_modules/enb/lib/make.js:408:21)
    at module.exports.inherit.buildTargets (/home/sergey/projects/soprof/node_modules/enb/lib/make.js:442:35)
    at module.exports.inherit.build (/home/sergey/projects/soprof/node_modules/enb/lib/make.js:556:35)
    at /home/sergey/projects/soprof/node_modules/enb/lib/cli/make.js:28:37
    at Array.0 (/home/sergey/projects/soprof/node_modules/enb/node_modules/vow/lib/vow.js:202:56)

npm ERR! bem-project-stub@1.0.0 dist: `YENV=production enb make dist -n`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the bem-project-stub@1.0.0 dist script.
npm ERR! This is most likely a problem with the bem-project-stub package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     YENV=production enb make dist -n
npm ERR! You can get their info via:
npm ERR!     npm owner ls bem-project-stub
npm ERR! There is likely additional logging output above.
npm ERR! System Linux 3.16.0-30-generic
npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "run" "dist"
npm ERR! cwd /home/sergey/projects/soprof
npm ERR! node -v v0.10.25
npm ERR! npm -v 1.4.21
npm ERR! code ELIFECYCLE
npm WARN This failure might be due to the use of legacy binary "node"
npm WARN For further explanations, please read
/usr/share/doc/nodejs/README.Debian

npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /home/sergey/projects/soprof/npm-debug.log
npm ERR! not ok code 0

может я что пропустил?

добавил файл борщика
добавил команду
запустил команду

sipayRT commented 9 years ago

@belozyorcev а откуда у тебя в project-stub такой package.json? Ты его переписывал? Т.к. в оригинальном файле ничего про дист не сказано. Dist можно собрать в bem-components и bem-core, а в project-stub его еще настроить нужно. Да и что тебе в нем собирать?

phamap commented 9 years ago

@belozyorcev если речь о моей сборке, то я поменял .enb/make.js и package.json для того чтобы все работало. помимо блока scripts в package.json были добавлены еще несколько дополнительных зависимостей, после этого собрано все заново.

tavriaforever commented 9 years ago

@belozyorcev Чтобы собирать dist, тебе нужно не только добавить команду в package.json и конфиг борщика, нужно еще добавить таск в enb конфиг. Вот тут 2 коммита, где добавляется возможность сборки диста, раз и два

belozer commented 9 years ago

@tavriaforever спасибо :)

хорошо было бы, чтобы оно в комплекте уже шло )

tadatuta commented 9 years ago

@belozyorcev кажется, что для project-stub ты не должен хотеть собрать dist, а скорее то, что мы называем merged-bundle.

см. https://github.com/enb-bem/enb-bem-techs/blob/master/docs/build-merged-bundle.md

Drekrosh commented 9 years ago

@tavriaforever Николай , объясни мне пожалуйста, если у нас модификатор отвечает за внешний вид , почему мы пишет тогда стили не для модификатора при миксе. Яркий пример тому кнопки, вместо того чтобы задать какой то модификатор, Вы делаете микс и стилизуете элемент какого-то блока к примеру так : user__name , это как - то в корни расходиться с понятием БЭМ.

sipayRT commented 9 years ago

@Rahnar модификатор отвечает не только за внешний вид, но и за состояние блока. Опиши, плз, пример поподробней. Но если я правильно понял, то ты о примере типа

{
    block : 'image',
    mix : { block : 'user', elem : 'icon' },
    ...
}

Тут сделано именно миксом, чтобы выполнился шаблон блока image. И это не расходится с БЭМ.

Drekrosh commented 9 years ago

@sipayRT Не могу понять , в каких случаях стилизуют по миксу , в каких по элементу , в каких по модификатору.

Пересмотрел кучу видео , одни просто создают блок на уровне проекта, и туда кладут стили для кнопки без использования модификатора. button button.css Другие стилизуют по миксу аля

{
   block: 'name',
   mix: { block : 'header',  elem: 'search-name'}
}

типа этот блок является вложенным блоком , блока header другие это лепят так

{
   block: 'name',
   mods: { block : 'searching'}

}

потом по модификатору стилизуют.

Guria commented 9 years ago

одни просто создают блок на уровне проекта, и туда кладут стили для кнопки без использования модификатора

так стилизуют все кнопки для текущего проекта

Другие стилизуют по миксу аля

так стилизуют элемент блока

другие это лепят так потом по модификатору стилизуют.

так стилизуют блок/элемент в определённом состоянии

Всё зависит от задачи и контекста.

Drekrosh commented 9 years ago

@Guria Благодарю. Просто в документации нигде это не написанно.

belozer commented 9 years ago

@tadatuta на project-stub я делаю интерфейс модуля и мне нужно получить его сборку для вставки в существующий проект на yii (php 5.2). Я прочитал про merged bundle и не совсем уверен, что это то, что нужно. (может я не так понял его назначение и как использовать)

Перейти на nodejs пока не можем.

tadatuta commented 9 years ago

@belozyorcev если речь про проект на yii, то скорее всего действительно нужен именно dist.

Про сборку dist нужно понимать следующее. Его сборка ничем не отличается от сборки обычного бандла, но с дополнительным первым шагом, на котором декларация bemdecl.js создается динамически по интроспекции файловой системы (итерируемся по всем блокам, элементам и модификаторам и создаем на их основе bemdecl).

Пример описания сборки dist-а есть в bem-components.

blond commented 9 years ago

Ещё есть небольшое руководство по сборке dist-а: https://github.com/enb-bem/enb-bem-techs/blob/master/docs/build-dist.md

qfox commented 9 years ago

Еще есть книжка по теории множеств ;-)

belozer commented 9 years ago

Пока больше всего подошёл способ предложенный @tavriaforever :) А со своми конфигами разберусь позже :)

oozywaters commented 9 years ago

Всем привет!

Хочу представить на суд общественности свою работу: https://github.com/oozywaters/Halcyon

Здесь представлена верстка случайного HTML-шаблона, найденного на просторах интернета, с применением БЭМ-технологий. В проекте задействован фреймворк bootstrap, а также некоторые jQuery-плагины для создания прикольных анимированных штук :)

phamap commented 9 years ago

круто) как раз хотел проект на БЭМ и bootstrap попробовать, а тут живой пример) если не секрет, сколько ушло на разработку такой страницы?

oozywaters commented 9 years ago

@phamap лично у меня ушло несколько недель, но нужно понимать, что я новичок, и параллельно с разработкой активно осваивал i-bem.js )

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

Думаю, если процесс отлажен, то вполне реально уложиться в 2-3 дня.

mursya commented 9 years ago

Ответы на все вопросы, видео и слайды мы собрали на отдельной странице https://ru.bem.info/talks/loftschool-music-2015/

1vank1n commented 9 years ago

Всем привет! Пристально смотрю в сторону БЭМ. Вот моя "проба пера". Наваял и заверстал лэндинг. Заиспользовал bem-grid от verybigman, за что – спасибо ему!

https://github.com/1vank1n/bem-landing/

Всем БЭМ )

qfox commented 9 years ago

1vank1n commented 9 years ago

В догонку "ленивый" БЭМ-проект: https://github.com/1vank1n/bem-fa А также сниппеты для Sublime Text (вдохновился идеей verybigman и его сниппетами под Atom): https://github.com/1vank1n/sublime-bemjson-snippets

kuflash commented 9 years ago

Приветствую всех! Для данного конкурса решил разработать один блок в БЭМ терминах. Выбор пал на компонент <input type="range">. Вот пару ссылок: Демонстрация, Проект на GitHub, Документация.

Блок корректно отображается во всех последних браузерах. Я постарался более-менее стандартизировать вид слайдера, но в IE 10+ он немного отличается.

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

P.S. В дальнейшем планируется улучшение этого блока, т.к. многое еще не сделано. P.P.S. Буду благодарен за код-ревью и советы по улучшению блока.

belozer commented 9 years ago

Ну вот и 23 число :)

Проект не успел подготовить поздно спохватился, но зато могу сказать следующее:

Вебинар прошёл успешно. Благодаря ему прояснились многие мелочи. Хоть и звучала фраза, что конкурс должен стимулировать изучение БЭМ, но стимулировал его именно вэбинар.

За всё время изучения успел ощупать много подводных камней. Было желание бросить и даже бросал... Перечитал много критики в сторону БЭМа. Даже есть статья, характеризующяя моё состояние на тот момент http://habrahabr.ru/post/203994/ БЭМ бросал до того момента, пока не наткнулся на проблему каскада... После чего появились новые силы для БЭМа.

Интересовался разными методологиями помимо БЭМ. Пытался придумать свою методологию, адоптировать БЭМ под себя... Но чтобы я не пытался придумать своё - всё сводилось к архитектуре БЭМ в результате чего решил не изобретать велосипед.

Работать с классами начал сначала с помощью плагинов для jQuery. Но код становился сильно запутанным и нечитабельным... В результате чего обратился к i-bem. На удивление он оказался не таким страшным, как казалось... Единственное что смущало (и немного смущает) - это jQuery под капотом. Возникает когнетивное сопротивление при работе.

Для себя я выделил следующие моменты

из минусов:

избыточность (субъективно)
выглядит как beta-версия. Постоянно что-то меняется.
отладка похожа на минное поле, неизвестно где "собака зарыта"
сложность настройки сборки (хорошо, что узнал про генератор bem-stub, он немного облегчил жизнь)
не хватает более дружелюбного ввода в методологию (детского алгоритма этапов разработки).
сложность переименования блока (нужно много файлов менять вручную)

из плюсов:

методология
стабильность вёрстки
больше времени уделяется логике
быстрое прототипирование, при работе с реальными даными (json из БД)
отзывчивое сообщество
css выглядит приятней ;)

Это вроде всё, что хотел выразить.

П.Н.

Спасибо за БЭМ.

tadatuta commented 9 years ago

@belozyorcev Спасибо за подробный отзыв!

Хочется пройтись по минусам, чтобы мочь их исправить.

избыточность (субъективно)

Можешь, пожалуйста, раскрыть этот пункт подробнее? Что именно смущает и где на твой взгляд можно было бы сделать проще?

выглядит как beta-версия. Постоянно что-то меняется.

Это, наверное, общая болезнь фронтенда — здесь все время все меняется. Ну и не можем же мы остановиться, если знаем, как можно сделать еще лучше? ;)

отладка похожа на минное поле, неизвестно где "собака зарыта"

Расскажи подробнее о конкретных проблемах. Возможно смогу подсказать какие-то лайфхаки.

сложность настройки сборки (хорошо, что узнал про генератор bem-stub, он немного облегчил жизнь)

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

не хватает более дружелюбного ввода в методалогию (детского алгоритма этапов разработки).

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

сложность переименования блока (нужно много файлов менять вручную)

Это дело можно сильно упростить. Я сделал прототип, он даже работает как-то, начал переписывать по-человечески, а заодно добавлять bem cp, bem ls, и bem find, но тут каникулы закончились. Надеюсь, что доберусь и добью. Нужно пару дней свободного времени.

belozer commented 9 years ago

@tadatuta

избыточность

много инструментов для 1-2 страничного проекта (bemjson, i-bem, bh). Но повторюсь - это субъективно достаточно. Отбивает желание на простых проектах изучать/применять БЭМ.

отладка похожа на минное поле, неизвестно где "собака зарыта"

вот данный момент

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

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

Можешь помочь сформулировать оглавление для такого туториала? ...

Постараюсь помочь :)

... Я сделал прототип ...

Оооо! Действительно то, что нужно :) Спасибо.

Guria commented 9 years ago

Ох, а я что то думал до конца месяца. Сегодня ещё принимаете? Я в течении дня выложу.

tadatuta commented 9 years ago

@Guria да )

Guria commented 9 years ago

bem-drawer-menu

Моя первая попытка сделать переиспользуемый компонент на базе БЭМ-технологий для проектов, которые не используют БЭМ. Необходимо было сделать выезжающее двухуровневое меню (off-canvas menu), которое будет формироваться в клиентском javascript.

Компонент в данном репозитории представлен двумя блоками: основным kg-menu и вспомогательным kg-glyph. Сборка осущетвляется с помощью enb, в качестве шаблонизатора выбран bh. Проект настроен с помощью generator-bem-stub.

Компонент реализован с помощью блоков представленных в библиотеке bem-components. Реализация позволила хорошо разобраться в базовых БЭМ-библиотеках bem-core и bem-components, применить ряд хаков, завести несколлько issue, уверенно отвечать коллегам на БЭМ-форуме на их вопросы, заполучить практически бесплатную поддержку экранных ридеров и клавиатурной навигации.

GitHub - Демо

Выложил, как есть на текущий момент. В реализации есть ряд моментов, по которым я хотел бы дать комментарии и дать вопросы. Дополню в репозитории и форуме.

gcor commented 9 years ago

К сожалению, увидел слишком поздно информацию про конкурс. Попытался сверстать страницу, вот результат — Github, демо

tavriaforever commented 9 years ago

Конкурс завершен, информация по результатам https://ru.bem.info/forum/issues/253/

tavriaforever commented 9 years ago

С результатами конкурса можно ознакомиться здесь https://ru.bem.info/blog/bem-competition-winners

p.s. Просим всех участников связаться с нами по электронной почте info@bem.info и выслать информацию для получения призов.

bem-site / bem-forum-content-ru

Вебинар по БЭМ, информация по заданию #193

Ну вот и 23 число :)

Для себя я выделил следующие моменты

из минусов:

из плюсов:

bem-drawer-menu