На этой неделе с вами Виталий @harisov Харисов.

Работаю в Яндексе, живу в Симферополе, один из создателей @bem_ru

Начнём через пару часов.

На этой неделе

Я работал программистом с 2001 (vitaly.harisov.name/resume).

Писал на Java и C++ (драйвер компорта под Win).

Вёрстка была хобби. Тусил в фидо.

С сентября 2005 начал верстать для Яндекса, первый проект был Адреса (ныне закрыт).

С января 2006 работаю в Яндексе официально.

Работаю в Симферополе, построил офис с нуля.

Начинал надомником, через 9 месяцев присоединился @makishvili, сняли офис 20 кв.м.

Через год пришли @yuritkachenko и @natashamaki.

Делали всю вёрстку новых сервисов Яндекса: Адреса, Музыка, Яру, Погода, Народ, что-то ещё.

В 2008 сменили офис (если интересно покажу фотки) на 90 кв.м. (позже расширили до 120).

Пришли @olyuwik, @lento4ka45 и @gurugray.

Об опыте построения офиса писал большой пост на Яру, но он уже недоступен. :(

В 2012 мы переехали в новый офис.

В пике было 75, сейчас 57.

@cssunderhood Сразу традиционный вопрос - верстальщик умирающая профессия или верстальщики еще нужны?

@freiksenet_ru @cssunderhood я считаю, верстальщик - это переходная профессия. Кому нравится верстать со временем идет дальше, к фронтенду.

@cssunderhood @freiksenet_ru а куда все движется?

@cssunderhood @freiksenet_ru ваша правда, но я не верю, что человеку достаточно, то что он имеет.

Каждый выбирает чем ему заниматься и куда двигаться. Не обязательно иди во фронтенд, если к этому нет желания.

@hellbeast92 @freiksenet_ru

@cssunderhood где какие люди будут трудиться?) а что с дизайнерами? Они будут верстать? @freiksenet_ru

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

Они будут на фрилансе и в мелких фирмах.

@voischev @freiksenet_ru

Верстающий дизайнер стОит на рынке дороже, но спрос на них не большой, только у тех компаний, кто до этого дорос.

@voischev @freiksenet_ru

@cssunderhood @voischev Контринтуитивно, не наоборот ли будет? Большая компания может позволить отдельных верстальщиков, маленькая - нет.

Отдельный верстальщик — удлинение процесса разработки.

Два универсала стоят дороже, чем верстальщик+программист.

@freiksenet_ru @voischev

@cssunderhood @voischev Два человека в целом дороже чем один человек, даже если один человек на ступеньку выше. Особенно это так на западе.

Двух универсалов нанять (и удержать!) сильно сложнее, чем верстальщика+прог.

От фрилансера проще получить вёрстку, чем всё.

@freiksenet_ru

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

Мы в Яндексе от отдельных верстальщиков отказались, переучили почти всех на фронтендеров. Флоу меняется при желании.

@naorunaoru

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

@naorunaoru

@cssunderhood @naorunaoru а если верстальщик больше в дизайн чем программирование, все ровно переучивали во фронтенд?:)

У нас не было верстальщиков «больше в дизайн», мы не искали и не нанимали таких людей.

@MikitaLisavets @naorunaoru

@cssunderhood Расскажи про возраст. Что меняется в работе? Что бы ты 5 лет назад сделал по другому чтобы сегодня тебе было лучше?

Как сказал @veosys на CodeFest2015:

— Оглядываясь на год назад, что бы вы поменяли в стартапе?

— Я бы поменял рубли…

@toivonens

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

@toivonens

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

Идеально чтобы одновременно.

@toivonens

Ну и очень важно не только, что делать, но и с кем.

Для меня сейчас гораздо важнее команда и ощущение единства, чем 5 лет назад

@toivonens

Я сейчас и есть руководитель команды/продуктовый менеджер БЭМ и Лего (тот же БЭМ, но внутри Яндекса).

@Devgru @toivonens

Рост как разработчика дал бы в некоторых случаях больше результата продукту.

И повысил бы мою стоимость вне Яндекса.

@Devgru @toivonens

@cssunderhood как думаешь, сменишь ли когда-нибудь работу после стольких лет в Яндексе?

Я сильно завязан на Симферополь и сдвинуть меня с места нереально.

Для смены компании нужны обстоятельства непреодолимой силы

@mistadikay

@cssunderhood @toivonens а ты говоришь что надо было расти как разработчику. Почему? Это дало бы больше результата?

@cssunderhood @toivonens «наибольший результат» → кажется, для этого нужно как раз из разработчика стать менеджером или арт.диром а-ля Бюро

Пост про опыт построения офиса Яндекса в Симферополе с 2006 по 2011:

vitaly.harisov.name/article/office/

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

@operatino

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

@operatino

«Вы не любите кошек? Да вы их просто готовить не умеете!»

Вот и с БЭМ так.

Не вижу причины стыда.

@kalashnikau @Devgru @toivonens

Сегодня день разогрева.

Задавайте вопросы про опыт работы, про Яндекс, про профессию.

Про CSS и БЭМ поговорим позже, в течение недели.

@cssunderhood Как думаешь, надо 2 аккаунта @cssunderhood и @jsunderhood ?

Если эти аккаунты вести близко к их названию, то да, мне интересно читать их оба.

@toivonens @jsunderhood

Проще при смене работы, но и возможностей/результата в отдельно взятой компании меньше.

Это два разных вектора.

@operatino @toivonens

@cssunderhood @toivonens Исходя из ваших ответов, вывод один - быть разработчиком проще. Больше позиций в по миру, чем для руководителей.

@cssunderhood По факту сильные руководители всем нужны, и ценятся больше (или не хуже) разработчиков. Сложность в том, что их обычно растят.

Всё так. Руководителей редко нанимают с улицы, обычно это рост внутри компании.

Поэтому при смене работы важен опыт разработки

@operatino

@cssunderhood И сложно стать хорошим руководителем работая в одной компании, нужен очень разносторонний опыт, особенно на интернац. рынке.

@toivonens @cssunderhood Просто это относительно очевидно. Может есть еще какие то мотивы?

@operatino достаточно много вакансий всевозможных тим-лидов в последнее время, где нужен именно опыт руководства @cssunderhood @toivonens

И руководства, И разработки.

Вопрос был про то, чтобы я изменил 5 лет назад.

@mistadikay @operatino @toivonens

@mistadikay Зависит от рынка конечно, но да, последнее время особенно из Украины много подобных вакансие в FE dev. @cssunderhood @toivonens

@operatino @cssunderhood Мне кажется для разработчика долгий опыт в одной компании это тоже плохо. Привыкаешь к одной модели работы.

Это не про Яндекс точно, у нас мало кто работает над одним проектом очень долго.

Много возможностей для перехода

@freiksenet_ru @operatino

@cssunderhood @toivonens Спасибо за ответы. Я тоже считаю, что тех. руководителю нужно расти одновременно и в разработке.

@operatino @cssunderhood Это еще хуже если компания что-то типа Яндекса (или, хз, Гугла). Это свой мир, практически отдельный от индустрии.

@operatino @cssunderhood Даже много разных проектов в одной компании скорее всего будут иметь похожую внутреннюю культуру.

И да, и нет.

В Яндексе достаточно большое разнообразие проектов/технологий, чтобы мочь выбрать что-то своё.

@freiksenet_ru @operatino

@cssunderhood Ну как не спросить твоего мнения:

БЭМ без тулзов уже не БЭМ?

Про БЭМ не сегодня, будет отдельные дни, тогда поговорим обстоятельно.

Тогда и отвечу на вопрос.

@janitor42

@cssunderhood @operatino Но проекты все Яндекса, значит в них все похожее - культура, билд инструменты, стиль.

У вас слишком романтическое представление о культуре разработки Яндексе :)

@freiksenet_ru @operatino

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

У меня практически не было застоя в компании, всегда двигался вперёд и деятельность постепенно менялась.

Активность — внутри

@rajdee_mhm

Важно самому себе ставить цели и достигать их, быть проактивным, управлять самим собой

Тогда застоя не будет, что бы не делал

@rajdee_mhm

@freiksenet_ru @cssunderhood @operatino через сколько лет надо менять место?

@cssunderhood @operatino Я работал с людьми из гугла и у них были гугловские представления о том как все делать. Не верю что такого нет в Я.

Конечно общие представления есть, но все команды разные.

Например, code style для XSLT:

4 spaces indent

Всё )

@freiksenet_ru @operatino

@cssunderhood а если работа перестает быть интересной, перспективной с позиции опыта, инструментов, языка - пилить opensource, контриб-ть?

Искать другую.

Сначала внутри компании, потом снаружи.

@rajdee_mhm

@cssunderhood Практикуется ли удаленная работа в Яндексе?

@cssunderhood По теме верстак vs фронт. Каким набором знаний/технологий должен овладеть верстак что бы стать фронтом (объективно)?

1) Сборка проекта
2) Шаблонизатор
3) Клиентский JavaScript
4) Deploy

@sskrebkov

@cssunderhood @blond_ru но предпочтение всё же офисной работе? или не так важно

Да, предпочтение офису

При этом каждая команда сама решает какому именно офису, у нас их много.

Большой перекос в сторону Москвы

@meuwka

Это тви, тут принято скрщт.

@SilentImp @sskrebkov

@cssunderhood а в Я есть отдел, который занимается вопросами безопасности фрнтнд? Например тестирует его на наличие «дыр»?

Да, но не только фронтенда, а вообще безопасности всего.

@SilentImp

@cssunderhood @sskrebkov какой шаблонизатор рекомендуете?

На вкус и цвет все фломастеры разные.

Я использую и мне нравится bemtree/bemhtml.

@akochemasov @sskrebkov

@cssunderhood а у вас есть какой то «чек-лист» безопасности для фронтенда? Поделитесь?

Скорее всего есть, но я про него ничего не знаю. Ну и NDA же

@SilentImp

@cssunderhood Тот же вопрос по доступности верстки — как вы её контролируете? Есть ли чек-лист, которым можно поделиться или все секретно?

Про accessibility у нас есть прекраснейший гайд, сделал Руслан Сагитов (github.com/ruslansagitov/), надо перевести и опубликовать

@SilentImp

@cssunderhood pixel perfect практикуете? чем/кем тестируете?

В вёрстке макета скорее нет, чем да. И между браузерами тоже.

В одном браузере между версиями библиотеки

ru.bem.info/tools/testing/…

@makoni

@cssunderhood а у вас есть сертификация людей использующих БЭМ? Что бы сдать и получить бумажку «Знаток css-бем заверенный самим Я».

Мы хотим раздавать БЭМ-ачивки через Mozilla Open Badges (openbadges.org), но никак не дойдём задеплоить, код уже написан @SilentImp

@cssunderhood @SilentImp Опубликуй по-русски. Как раз на русском материалов очень мало.

Чтобы опубликовать на русском, надо придумать куда, а мы пока с этим не определились. И есть небольшие «проблемки».

@toivonens @SilentImp

Напиши мне на vitaly@yandex-team.ru, дальше договоримся что и как.

@SilentImp @frontenderinfo

В удалённую работу руководителем — нет.

@toivonens @mistadikay

@cssunderhood сколько собеседований прошел что бы работать в яндекс

Одно собеседование и тестовое задание сверстать главную Яндекса (потратил 18 часов и ещё 4 чтобы сделать поддержку NN4 и IE4)

@CodeRuleZZZ

@cssunderhood @MikitaLisavets @naorunaoru ну не совсем, у нас скорее были (есть) дизайнеры с вёрсткой, например Даня Ковчий

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

@gurugray @MikitaLisavets @naorunaoru

@cssunderhood С какого года занимаетесь версткой/фронтенд ?

С 2001.

Погружение в вёрстку начал с вдумчивого чтения спецификаций CSS2 и HTML 4.01.

Из спецификаций много что не работало

@CodeRuleZZZ

@cssunderhood @CodeRuleZZZ "вдумчивого чтения спецификаций" - это то, чего сейчас многим не хватает

@cssunderhood ну так-то это необходимый минимум, но недостаточно же еще магии для превращения. Наставник там, или отэц!

Наставник в любом деле нужен, не только в превращении верстальщика во фронтендера.

@yaroshevich

@cssunderhood Что должен знать фронтендер? Понятно, что JS и что требования могут разниться от компании к компании. Есть ли некий стандарт?

Сделать сайт от начала (вёрстка) до конца (деплой в продакшн).

Чем сложнее сайт и его архитектура — тем круче разработчик.

@LostSenSS

@cssunderhood Кто был твоим наставником по организации офиса в Симфи?

Мой ментор — руководитель в Москве, Надежда Строганкова.

Надя меня нашла в ЖЖ (harisov.livejournal.com/26279.html), собеседовала, наняла

@yaroshevich

@cssunderhood Подскажи инструмент, сейчас вроде модно делать сайты без всяких php, простой шаблонизатор типа, пару команд и он тебе html

Помогите с ответом

@andexds Подскажи инструмент, сейчас модно делать сайты без всяких php, простой шаблонизатор, пару команд и он тебе html

@cssunderhood От начала до конца, включая бэкенд? Это full stack разработчик уже. Или в чём разница?

Да, это full stack, если без backend — frontend.

@LostSenSS

@cssunderhood иногда говорят, что фронтенд+дизайнер в одном хорошо и правильно. Ваше мнение?

Знающий вёрстку дизайнер, умеющий сверстать свой макет, хотя бы работающий в одном браузере — это чудо.

В Яндексе такие есть.

@askaza

@cssunderhood Как должен быть построен идеальный процесс взаимоотношений front и back разработчиков?

@cssunderhood Я себе представляла это скорее как фронтенд, который такой молодец, что и в дизайне и интерфейсах чудо как хорош.

@cssunderhood а есть какие то курсы или куда обратиться чтобы подтянуть недостающих знаний и пониманий для работы во фронтэнде?

Вопрос ко всем — как лучше/быстрее всего учится вёрстке и фронтенду?

Какие самоучители, курсы, сайты?

В Яндексе есть ШРИ.

@sushkazzlo

@cssunderhood @askaza Это чудо, пока цель сверстать без натяжки на движок. Натягивающему возможно придется переделывать некоторые вещи

Никто не берёт код дизайнера для дальнейшей работы с ним, он используется как живой прототип вместо макета в psd.

@arseniydmitriev @askaza

@cssunderhood Расскажи, вы в Gemini проверяли компоненты с кастовыми шрифтами? Работало?

Ничего про это не знаю, может быть @arik0n или @SevInf ответят.

@toivonens

@cssunderhood @sushkazzlo лучший способ, это прочитать пару книг по html\css для базы, а потом идти работать за еду в какую нибудь компанию

@cssunderhood @CodeRuleZZZ а сейчас фронтендеры через что должны пройти чтобы попасть в Яндекс?

Попасть в Яндекс — заполнить заявку на yandex.ru/jobs/

Резюме/ответы хорошие — будет 4 собеседования по часу

@xwoody @CodeRuleZZZ

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

Завтра продолжим, не переключайтесь.

Всем доброго утра.

Вопрос залу: что считается bleeding edge современной вёрстки?

Что-то такое, что нигде или почти нигде не работает.

@xwoody @cssunderhood @CodeRuleZZZ а БЭМ это обязательный пункт для работы в Яндекс?

Нет, БЭМ не являтся обязательным пунктом для работы в Яндексе

В нём нет ничего сложного, понять работая

@hellbeast92 @xwoody @CodeRuleZZZ

Привет, посоветуйте плиз какие есть правильные способы локализации на клиенте. @cssunderhood

Сайт статика, i18n(форматы, даты, валюты) не критично, просто перевод ru en c переключателем языка. @cssunderhood

@cssunderhood Затронь пожалуйста тему динамики. Кто за это отвечает, какие инструменты и какой подход используете? Документируется как-то?

В том, что описано, но не работает с большим отрывом лидирует Grid Layout.

Давние боли: вёрстка paged media (версия для печати) и писем.

@cssunderhood @arseniydmitriev @askaza Были попытки избежать дублирования работы и использовать дизайнерский код? С чем возникли трудности?

@cssunderhood неужели версии для печати актуальны?

Версии для печати актуальны для использования информации в офлайне, иногда это бывает нужно.

@VasyaRomashova

Тема прикручивания вёрстки к динамике обширна и холиварна, я не хочу её сам обсуждать. Но готов дать возможность получить ответы
@pepelsbey

@VasyaRomashova @cssunderhood Лично я знаю случай: электронные билеты. Плюс различные документы ради документов в государственные инстанции

@cssunderhood @VasyaRomashova есть области, в которых версия для печати дико актуальна vimeo.com/74930902

Увы да, например делал шаблоны для резюме, там это очень актуально. @VasyaRomashova @cssunderhood

@cssunderhood, плюс «печать» это ещё и экспорт в PDF (эта сволочь ещё жива), речь не только о бумаге.

@cssunderhood судя по ответам, как ни крути, от бумажек не избавиться. ;(

@cssunderhood @arseniydmitriev @askaza Что если есть хорошая, кросбраузенрая, базовая библиотека компонентов. Дизайн по сути реиспользование

Это и создание нового, и реиспользование.

Новое дизайнеру закодить сложно, готовое может быть сложным.

@koloskof @arseniydmitriev @askaza

@cssunderhood кстати, многие боли paged media (что где и как разрывать и т.д.) актуальны и для CSS Columns

@cssunderhood @arseniydmitriev @askaza в этом плане интересен подход, который предлагают в @protein_io

Да, если у @protein_io всё получится — это будет заметный шаг вперёд. Ждём первую альфу.

@koloskof @arseniydmitriev @askaza

Мы сделали для себя bem-components и предлагаем всем использовать:

ru.bem.info/libs/bem-compo…

@koloskof @gearmobile @arseniydmitriev @askaza

Давайте всё-таки заставим MS Edge обновиться до актуального CSS Grid! wpdev.uservoice.com/forums/257854-…

Morning! A quick push with some new articles, videos, slides added to my BEM resources repo

github.com/sturobson/BEM-…

@cssunderhood а обратное? Где уместно использовать display:table-* для нетабличных данных, чисто визуально?

bem-components сделана так, что дизайн задаётся на отдельном уровне, легко сделать свой.

@koloskof @gearmobile @arseniydmitriev @askaza

@cssunderhood @gearmobile @arseniydmitriev @askaza Что по поводу более крупных "кирпичиков". Списков, табов, менюшек и.т.д (то что кочует)?

По аналогии с bem-components делается библиотека. Взять инфраструктуру тестов и док-ции.

@koloskof @gearmobile @arseniydmitriev @askaza

@yuritkachenko @iamstarkov @cssunderhood @kizmarh @gearmobile все не так. Частично права на Stylus перешли Automatic (1/2)

@yuritkachenko @iamstarkov @cssunderhood @kizmarh @gearmobile Т.к. TJ во время его написания работал в LearnBoost (ныне Cloudup) (2/2)

@iamstarkov @cssunderhood @kizmarh @gearmobile никто из Automattic и ex-LearnBoost/Cloudup ничего не коммитит уже больше 2-х лет.

@_h4_ @cssunderhood @iamstarkov @kizmarh @gearmobile права до сих пор у Automattic, они разрешили нам перенести его в свою организацию.

@toivonens @cssunderhood m.habrahabr.ru/post/265753/

@cssunderhood а почему velocity сейчас становится чуть ли не обязательным skill'ом?

wtf velocity?

@gearmobile

Сегодня был менее активный день. Всем спасибо.

Завтра продолжим, поговорим о БЭМ.

У меня сегодня вынужденное молчание.

Утром проснулся, а айфон — нет. :(

Твиттер для меня — TweetBot3/iOS.

Починил телефон, снова на связи

Мы сейчас делим БЭМ на три части

Методология
Как делать, теория

Платформа
Готовый код

Комьюнити
Кто использует
Проекты сообщества

Сегодня о первой части — методологии.

Это теория, как делать. Никакого готового кода.

Используя методологию можно сделать свою реализацию.

Мы переделали описание методологии, убрали упоминания платформы (bemjson, bemhtml, enb, etc).

Какие проблемы решает
ru.bem.info/method/solved-…

Вводим терминологию

Блок
Элемент
Модификатор
Микс
Дерево
Реализация блока
Технология блока
Уровень переопределения

ru.bem.info/method/definit…

Соглашение по именованию.

Важно мочь в строке найти имя блока, элемента, модификатора.

Чем отделяются — НЕ ВАЖНО.

ru.bem.info/method/naming-…

Имена могут быть составными.

control-group
ControlGroup

Должна быть нотация для составных имён и возможность программно понять где что.

Это всё БЭМ:

.block-name__elem-name_mod-name_mod-val

.blockName__elemName—modName

.blockName-elemName_modName_modVal

.block₽elem€mod£val

В БЭМ-нотации НЕТ возможности вкладывать элементы в элементы:

.blo__list__item

Можно:

.blo__list
.blo__list-item

clck.ru/9aUSS

Собственно это всё про БЭМ в CSS.

Следующий важный шаг — перестать писать весь CSS в одном файле и начинать бить его поблочно на файлы.

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

blocks/
blo1.css
blo2.css

ru.bem.info/method/filesys…

Уровень переопределения позволяет добавить реализацию к блоку или перекрыть, что было раньше.

На примере CSS это понятнее всего объяснить.

После разбиения блоков по файлам, нужно собрать это всё обратно для использования в продакшене одного файла.

Сборка
ru.bem.info/method/build-m…

В сборке страницы (или бандла, всякая страница — бандл, но не всякий бандл — страница) важны декларация, зависимости блоков, порядок уровней

Собственно, разбивка блоков по файлам и применение сборки сильно отдаляет от просто «БЭМ в CSS» и приближает к использованию в полный рост.

Собственно, про БЭМ-методологию на сегодня всё, завтра продолжим.

Задавайте вопросы.

Наверное, уже есть тыщи примеров, но я случайно сделал открытие/закрытие паранджи на CSS codepen.io/tyv/pen/rOVRrZ

@cssunderhood это относится к минусам подхода. Напомню про свой доклад (в нем, в том числе, есть эта цитата) slideshare.net/basisjs/ss-484…

@cssunderhood главным образом, пре-процессоры, которые трансформируют исходный код в рамках всех "технологий" обеспечивая инкапсуляцию

@cssunderhood @Splurov reset.css сейчас можно заменить автовключением all: initial в блоки и элементы github.com/maximkoretskiy…

@cssunderhood @Splurov ну и для all: initial есть полифил github.com/maximkoretskiy…

@Andre_487 @cssunderhood общего плана, например, css modules github.com/css-modules/cs… (как бы я к нему не относился)

@Andre_487 @cssunderhood из более частного шаблонизатор в @basisjs, пока нет хорошей статьи, но про это есть тут: slideshare.net/basisjs/ss-484…

@rdvornov @cssunderhood Разве в CSS Modules не так же, как в любых модулях, где соответствие иерархии на ФС делает только лучше?

@cssunderhood супер! Но мне всегда было странно, почему не идете в сторону стат. анализа. Если начнете применять – будет большой шаг вперед

@Andre_487 @cssunderhood в css modules не важно как расположены файлы, можно сослаться на любой css файл, где бы он ни был (в рамках FS)

@cssunderhood а еще я общался с чуваками, что агитировали за css-modules. Они решают проблемы, которые в хорошей команде(-ах) не возникнут

@dersmoll @cssunderhood если у вас хорошая архитектура (достаточно инкаплированные модули или "блоки") – редизайн может быть помодульным

@dersmoll @cssunderhood помодульно = процесс может быть либо последовательным, либо параллельным, а не "большой бабабум на неопредел. срок"

@meuwka @cssunderhood адаптивность и правда чаще всего просто в блоке пишется, а вот если отдельная версия, то уровнем переопределения

@Andre_487 @cssunderhood главное понимать, компоненты не могут быть полноценными черными ящиками, если мы делаем сложные интерфейсы/сценарии

@Andre_487 @cssunderhood основные проблемы возникают на межкомпонентной интеграции и в попытках сделать что-то "нестандартное"

@rdvornov @cssunderhood Это да Такая проблема в яндексовом БЭМе пока не имеет продуманного решения, каждая команда делает по-своему

@Andre_487 @cssunderhood эта проблема практически нигде не решена. Те кто говорят, что у них такой проблемы нет, скорей всего, обманывают ;)

@cssunderhood а так:
b-block[mod-name=mod-val] .elem
Вопрос с подвохом ;-)

@aristov7 @cssunderhood а так нет миксов, так что не БЭМ.

Всем доброе утро.

Продолжаем нашу неделю
БЭМ в @cssunderhood

Сегодня поговорим о БЭМ-платформе.

Не переключайте канал.

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

Методологию можно использовать по частям.

Многим достаточно BEM CSS.

Если освоена сборка — можно картинки блоков класть в папки блоков.

Тесты скриншотами для контроля регрессий туда же
ru.bem.info/tools/testing/…

Когда CSS пишется по БЭМ, всё разложено по файлам, есть сборка, хочется, чтобы и HTML блока лежал с CSS.

Начинаем писать шаблоны поблочно.

Если CSS ничего особенного не надо, то с шаблонами сложнее.

Для отрисовки блока, нужно передать данные этого блока, всё, что не разметка.

Мы в качестве формата данных блока используем JSON с предопределёнными полями.

Назвали его (сюрприз) BEMJSON:

ru.bem.info/technology/bem…

Описание БЭМ-дерева делается в промежуточном формате, описывающем блоки/элементы/модификаторы/данные-блока.

Это позволяет генерировать HTML

Формат данных блока может быть любым, не обязательно BEMJSON, важно, чтобы там была информация о сущностях и данные.

BENJSON переводится в HTML шаблонизатором.

bh-php
github.com/bem/bh-php/

BEMHTML
ru.bem.info/technology/bem…

BH
ru.bem.info/technology/bh/

Шаблоны для каждого блока кладутся в папку блока:

blocks/
blo1/
blo1.css
blo1.png
blo1.bh.php

Собираются через enb.

Фактически, генерация HTML может быть отдельным слоем, который получает на вход БЭМ-дерево и отдаёт HTML.

Этот слой можно унести в браузер.

Бекенд генерирует JSON (или любой другой формат с данными).

Он преобразуется в BEMJSON (БЭМ-дерево).

Из него получается HTML.

Слой BEMJSON -> HTML максимально простой, работа с данными и их преобразование на уровне трансформации JSON -> BEMJSON.

Один из вариантов преобразования JSON -> BEMJSON — шаблонизатор BEMTREE

ru.bem.info/technology/bem…

Назван так, потому что создаёт БЭМ-дерево.

BEMTREE шаблоны добавляются в папку блока.

Блок знает как построить свой BEMJSON и HTML

blocks/
b/
b.css
b.bemtree
b.bemhtml

После перехода на блочное написание шаблонов (а иногда до), хочется и js писать блочно.

И иметь возможность доопределять блоки, как в CSS.

Для этого мы разработали мини-фреймворк i-bem.js

декларативной стиль — набор состояний

интегрируется с BEMHTML/BH

ru.bem.info/technology/i-b…

Ну и что бы совсем хорошо было — ко всему этому добавляем библиотеки готовых блоков:

ru.bem.info/libs/bem-core/

ru.bem.info/libs/bem-compo…

bem-core
ru.bem.info/libs/bem-core/

Базовый набор блоков, i-bem.js, page.

Ничего визуального, только необходимые технологии/хелперы.

bem-components
ru.bem.info/libs/bem-compo…

Визуальные примитивы, «кирпичи» практически любой страницы.

Для быстрого старта проекта сделали

project-stub
ru.bem.info/tutorials/quic…

И генератор для yeoman, для кастомизации
ru.bem.info/tools/bem/bem-…

БЭМ-платформа

BEMJSON
BEMHTML / BH
i-bem.js
bem-core / bem-components
project-stub
enb-bem

Всё интегрированно, можно использовать отдельно

Про платформу это всё на сегодня. Задавайте вопросы.

Завтра поговорим о третьей важной части БЭМ — сообществе.

Доброе утро.

Сегодня поговорим о третьей составляющей БЭМ — сообществе.

Какие каналы получения информации, как участвовать в разработке.

ru.bem.info

Много информации, всё сложно

Переписали раздел Методология.

Редизайн

Выделим явно разделы Платформа и Сообщество

ru.bem.info/forum/

Форум для вопросов и обсуждений.

Каждый топик — issue в проекте

github.com/bem/bem-forum-…

Можно читать на гитхабе.

Код проектов, разрабатываемых и поддерживаемых bem core team:

github.com/bem/

Экспериментальные проекты:

github.com/bem-incubator/

Блог (новости, дайджест):

ru.bem.info/blog/

Твиттер на русском

@bem_ru

на английском

@bem_en

У всякой штуки в этом мире есть как поклонники, так и хейтеры.

Есть хейтеры и у БЭМ.

Подписывайтесь, бывает весело

@bem_xxx

getbem.com

Максимально простое описание методологии BEM CSS.

Сделан @iamstarkov, @floatdrop, @toivonens.

Твиттер @getbem.

Подборка ресурсов про БЭМ на английском:

github.com/sturobson/BEM-…

Вебинары

Вёрстка
ru.bem.info/talks/loftscho…

Вёрстка
ru.bem.info/talks/beminar-…

Сборка
ru.bem.info/talks/beminar-…

JS
ru.bem.info/talks/beminar-…

Овер 500 фоловеров! Наберу тыщу — опубликую своё фото. RT если заинтриговал, если нет — в избранное.

Хочется, чтобы браузеры научились поддерживать favicon.svg

Это позволит отдавать одну векторную иконку, вместо кучи apple-touch-icon и пр.

.@cssunderhood pic.twitter.com/jxjmwJzISQ

@cssunderhood @bem_xxx так это что, хейтеры здесь? Я думал, это смешная пародия от фанатов

Любые вопросы про БЭМ, нужна помощь или что-то не работает — пишите на форум,

ru.bem.info/forum/

Для этого нужен аккаунт на гитхабе.

Вакансия в команду разработки Лего/БЭМ в

Москва
yandex.ru/jobs/vacancies…

Питер
yandex.ru/jobs/vacancies…

Симферополь
yandex.ru/jobs/vacancies…

@cssunderhood @ros_ivanov @meuwka а как на счёт tadatuta.github.io/bemmet/ ;)

В общем я, кажется, всё что хотел рассказать за эту неделю — рассказал.

Задавайте вопросы.

В воскресенье freestyle, поговорим про хобби.

@cssunderhood то, что svg везде хочется, я не спорю :) но бывает растр еще. а пока нет svg это оверкил, по-моему pic.twitter.com/83hkHwuWmw

@arturi @cssunderhood этого очень, очень мало - realfavicongenerator.net/faq. А до векторных иконок ещё далеко( caniuse.com/#feat=link-ico…

@cssunderhood для Atom вот этот неплохой: atom.io/packages/atom-… @meuwka

@arturi @cssunderhood может кто посоветует cli генератор? Хочу хранить в исходниках одну иконку 192x192, и генерировать все как build-step

Затронем тему производительности фронтенда.

Простые правила, чтобы не было мучительно больно.

И накидайте ссылок на хорошие книги/блоги.

Правило 1: всё передающееся по сети должно быть сжато.

Статику gzip-овать, используя zopfli, github.com/google/zopfli

@cssunderhood отличные материалы на google developers: developers.google.com/web/fundamenta…

Правило 2: всё передающееся по сети должно быть оптимизировано

PNG/JPG
imageoptim.com

CSS
github.com/jakubpawlowicz…

JS
Что лучше?

Правило 3: всё что можно не передавать по сети — не передавать (ваш КО)

Стили MSIE не нужны Safari.

Для touch не нужны стили desktop.

Правило 4: параллельная загрузка наше всё.

Браузер делает ограниченное количество запросов к одному хосту. И ограниченное количество хостов

@as_Crazy github.com/haydenbleasel/… @arturi @cssunderhood

@cssunderhood @meuwka а нам screenhero.com нравится

@cssunderhood Интересная заметка в блоге веб-студии о практических результатах оптимизации некоторых больших сайтов product.voxmedia.com/2015/8/13/9143…

Правило 5: генерировать в процессе сборки и потом отдавать статически всё, что можно.

Если можно сгенерировать статический HTML — делай это

@cssunderhood отличный доклад с DUMP 2015 - Оптимизация загрузки веб-страниц: vimeo.com/124015220

@cssunderhood caniuse.com/#search=spdy caniuse.com/#feat=http2 Все современные браузеры уже давно. IE стал вечнозелёным и скоро подтянется.

@cssunderhood Правило №4 сейчас скорее анти-паттерн. Лучше включить SPDY и HTTP/2 на сервере, чем городить паралльную загрузку с 3-4 хостов.

У меня есть вот такая штука github.com/tadatuta/creat… @cssunderhood @ros_ivanov

Правило 6: загрузка одних ресурсов не должна блокировать загрузку основного HTML и других ресурсов.

Но и мигания быть не должно.

4 сервера по 4 картинки одновременно или сколько там сейчас можно. Грузить с a.yastatic.net, b.yastatic.net,…

@mostolovista

@cssunderhood оно же и так параллельно загружается, куда уж параллельнее?

@cssunderhood у браузеров кроме ограничения количества соединения с хостом, есть просто ограничение на количество соединений

@cssunderhood и в самом популярном браузере оно составляет десять штук: browserscope.org/?category=netw…

@cssunderhood притом субдомены могут указывать технически на одно и то же пространство, одни и те же файлы, только домен в сырцах разный

Пользуясь случаем, рекомендую твиттер frontend performance engineer at Yandex

@mostolovista

.

@cssunderhood @mostolovista с распространением spdy/quic это уже не совсем правда. Один домен может быть быстрее

@alexeyten @cssunderhood если шардирование настроено с помощью CNAME тогда хуже не будет.

@alexeyten @cssunderhood но опять таки, оно и сейчас не всегда полезно. Всё надо применять к месту.

@cssunderhood подскажите - нужен gulp+bootstrap+sass для возможности кастомизации в ходе workflow

@cssunderhood Обнаружил еще один хороший ресурс, на котором переводятся на русский интересные статьи prgssr.ru

@cssunderhood Вот важный впрос ко всем верстальщиком в чатике: что почитать из профильной литературы для верстальщика?

@cssunderhood @dfilatov_ @kuksikus наверное имеется ввиду virtual DOM, т. к. чисто DOM-шаблонизаторы существуют давно и с ними есть проблемы

@cssunderhood @dfilatov_ @kuksikus с виртуальным тоже есть нюансы — экспериментируем github.com/dfilatov/vidom

@cssunderhood @dfilatov_ @kuksikus а чем не нравится строковый шаблонизатор, кроме того, что за него смузи в коворкингах не нальют?

@koloskof @cssunderhood github.com/kovchiy/jblock

От всей души поздравляем всех наших разработчиков с днём программиста!

Да и не наших тоже, чего уж там :)

Сегодня freestyle, любые вопросы/ответы.

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

Хобби — это то, что приносит моральное удовлетворение.

При этом, как правило, ест время и/или деньги.

@ardshock @cssunderhood abookapart.com

У меня таких хобби три

1. Игра на басу в офисной группе

2. Строительство пассивного дома

3. Благотворительный фонд
   gorod-mechty.org

   10:02

@veged @cssunderhood @dfilatov_ я про то, что i-bem из bemjson делает строку, а потом это вставляется в dom, или я чего-то не знаю?

@kuksikus @cssunderhood @dfilatov_ а что со скоростью? есть какие-то адекватные сравнения?

@veged @cssunderhood @dfilatov_ что быстрее вставляется в dom? Dom-объект или строка? Конечно есть. И разница огромная

@veged @cssunderhood @dfilatov_ можно призвать @rdvornov :) вот из его презентации, как это повлияло на backbone pic.twitter.com/ymqYbSAD5n

@veged @cssunderhood @dfilatov_ а если взять любой браузер без аппаратного ускарения (любой на iOS кроме safari) разница будет очень заметна

@ardshock @cssunderhood css secret - lea verou. А в целом хорошие книги по хтмл ксс - редкость. Имхо все тренды черпать из статей лучше.

На строительстве дома получил очень много опыта.

Только применить его больше пока негде.

Вообще стройка очень похожа на веб-разработку.

Хочу жить в Симферополе и при этом улучшать его — сделал благотворительный фонд «Город мечты»

Высаживаем деревья, восстанавливаем сломанное

Сайт «Город мечты» поднят на Wordpress, неудобно.

Хочу переписать на bem platform, но руки не доходят

Никто не хочет переделать для опыта?

В городе, особенно в центре, нельзя просто взять и посадить дерево.

Нужно разрешение от мэрии, получается сложно, фонду проще, чем частному

Садить дают не везде: коммуникации, рекламные щиты.

Из 30 первых высаженных деревьев два года назад осталась половина.

Остальные выломаны.

@kuksikus @cssunderhood @dfilatov_ а в замерах учитывается разница во времени генерации строки и объекта? ;-)

@cssunderhood apple-touch-icon достаточно 1 отдавать, самую большую, без указания размера. Она отскейлится в нужное. Это официальный хинт.

@dersmoll почитай про редизайн hh.ru Они переверстывали поблочно/постранично, в порядке приоритета "ужаса". @cssunderhood

@gearmobile @cssunderhood Если правильно понял – github.com/yeoman/generat…

@sudilkovsky «Переверстать всё и в срок». Андрей Сумин. @cssunderhood @dersmoll

Благотворительный фонд ест в основном только деньги, очень мало времени.

twitter.com/webholt/status…
@webholt

@harisov пользуясь случаем — очень хорошо переписали. Стройно и лаконично. Всем большой респект и @inna__neige, в частности :-)

@cssunderhood @koloskof это, к слову, один из громадных плюсов Крыма

@cssunderhood товарищи! мне кажется, вы немного заскучали без дела? есть желание ? сурово “потрепать” сие творение - goo.gl/Gx7c79

Пока я в эфире, рекламирую новый блог о производительности от @mostolovista:

perfception.com

Твиттер: @perfception

Будет круто!

@cssunderhood @veged @koloskof 3 года занимаюсь, тоже начал разваливаться. Йога спасла и дала гибкость, которая едва ли для меня реальна.

Задавайте вопросы, осталось 3 часа до конца смены.

Кстати, на следующей неделе будем вместе с @tadatuta на @FrontTalks в Екатеринбурге, хорошая возможность поговорить о #b_ и не только.

@cssunderhood посмотри на Parse b Firebase. Скоро логику модно будет писать двигая квадратики.

@cssunderhood @harisov большое спасибо. Было приятно читать всю неделю. Много полезных и нужных ответов. Переключаю фокус на @bem_ru

@veged @kuksikus @cssunderhood @dfilatov_ в моих замерах время ген. строк не учитывалось, но время ген. dom – да slideshare.net/basisjs/dom-27…

@veged @kuksikus @cssunderhood @dfilatov_ innerHTML обычно выигрывает на больших единичных фрагментах, но проигрывает на повторяющихся

@veged @kuksikus @cssunderhood @dfilatov_ основные накладные расходы получаются на операциях с полученым через innerHTML DOM-фрагментом

@veged @kuksikus @cssunderhood @dfilatov_ но все это имеет значение, в основном, для сложных динамических интерфейсов

@freiksenet_ru @kuksikus @cssunderhood @veged @dfilatov_ чтобы минимизировать погрешность + slideshare.net/basisjs/dom-27…

@freiksenet_ru @kuksikus @cssunderhood @veged @dfilatov_ и для сложных приложений 1000 это норм и не предел, не обязательно 1 список etc

@rdvornov @kuksikus @cssunderhood @veged @dfilatov_ Если вас волнует скорость на мобильниках то там и 20 элементов не влезет.

@rdvornov @kuksikus @cssunderhood @veged @dfilatov_ Надо рендерить то что пользователь видит и мерить это. Микробенчмарки это бесполезно.

@freiksenet_ru @rdvornov @cssunderhood @veged @dfilatov_ опрометчивое заявление. У меня есть другой опыт

Вообще, конечно, жаль, что это происходит на русском и остальной мир не видит

Надеюсь, что рунет когда-то дорастёт до общения на английском

@kuksikus @rdvornov @cssunderhood @veged @dfilatov_ Опрометчиво говорить про рендеринг 1000 элементов на мобильных как про типичный юзкейс.

@cssunderhood не всегда то, что ты делаешь, будет использоваться так, как ты планируешь…

@cssunderhood я делал большую тяжелую статистику думая, что ей будут пользоваться только на десктопах…

@freiksenet_ru @kuksikus @cssunderhood @veged @dfilatov_ мобильные отдельная тема, но и там DOM подходы дают большую производительность

Мне надоело вас ретвитить, напишите посты в блоги и подставьте на суд общественности.

@freiksenet_ru @rdvornov @kuksikus @veged @dfilatov_

@rdvornov @kuksikus @cssunderhood @veged @dfilatov_ Оптимизация в головах а не во фреймворке. Мерять надо приложение а не придуманный бенч

@cssunderhood @freiksenet_ru @kuksikus @veged @dfilatov_ если заапрувят, на HighLoad будет новый доклад по теме highload.ru/2015/abstracts…

@cssunderhood @freiksenet_ru @kuksikus @veged @dfilatov_
пока есть слайды (и где-то видео) устаревшего доклада slideshare.net/basisjs/moscow…

На этой неделе с вами был
@harisov, Яндекс, Симферополь

Работайте меньше, получайте больше, используйте #b_ и да пребудет с вами сила

Thnx