Всем привет! На этой неделе с вами Лев @ruGreLI из московского офиса Яндекса.

В Яндексе работаю два года в отделе разработки поисковых интерфейсов. Так же я ментейнер SVGO — поддерживаю в рабочем состоянии.

В мире веба я уже больше 15 лет. Сверстал первую веб-страницу на таблицах ещё где-то в 1999 году. Нарисовал сам же в Фотошопе 5.5.

Начал с того, что прочитал спецификации HTML 4 и CSS 2. Они достаточно легко читаются даже с моим английским тогда не выше Pre-Intermediate.

Это приводит нас сразу к теме первого вопроса: а вы читали спецификации? Если не всю (бывают зубодробительные как HTML5), то хоть частично?

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

@cssunderhood Отдельные части её, конечно, вполне полезны и верстальщику, тут спорить не стану. Но информация зачастую доступна и в статьях.

@cssunderhood За частую спеки как книга по "технике безопастности". Все написано в бою кровью и потом. Особые извращуги живут и без нее. ГЫ

Продолжая про себя: в 2014 году мой опыт пригодился для вёрстки версии серпа для старых браузеров. Рассказ коллеги:
events.yandex.ru/lib/talks/2584/

Даже я не думал, что мне в 2014 году пригодится опыт вёрстки под IE6. Сейчас его даже на приборах не видно. (IE7 мало, но видно.)

@webholt @cssunderhood есть нюанс: в статьях доступна _интерпретация_ спеки авторами статей, кот. может сильно отличаться от оригинала:)

@cssunderhood Читаю спецификацию, чтобы целиком понять какие-то сложные вещи вроде stacking context и containing block.

К слову про нюансы и сложные штуки: я даже писал статью про способы вёрстки в рамках CSS 2.
web-standards.ru/articles/css-t…
web-standards.ru/articles/css-t…

А также небольшую статью про нюансы CSS:
web-standards.ru/articles/css-n…

Впрочем, выдача поиска довольно простая для верстки в IE6. Отжигал с прозрачными картинками (белая обводка иконок). pic.twitter.com/j2SAdug86T

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

@iamakulov_ @cssunderhood к вопросу, как читать спецификации — не могу не процитировать 1 абзац сегодняшней новинки spec.piraruco.com/html5/introduc…)

@cssunderhood читал HTML4 и CSS 2.1, раза по три в разное время. Всегда узнавал что-то новое.

Ребята купили готовый шаблон. Хотел поделиться болью, но не влезло pic.twitter.com/OnRn0jE2LN

А вот разработчик CSS Grid Layout в движке Хрома разъясняет новые детали спецификации. blogs.igalia.com/mrego/2016/02/…

@cssunderhood прикольно, бывают же совпадения: css-live.ru/articles/zolot… — просто какая-то сезонная эпидемия гриДа! :)

П - преданность профессии pic.twitter.com/AycSZQKe4e

CSS Grid Layout — уникальная спецификация.
Во-первых, самая продвинутая раскладка. Можно делать сетки независимо от порядка элементов.

Во-вторых, изначально её предложила Microsoft.
В-третьих, браузеры делают её не с префиксами, а под флагами. Старые баги не будут досаждать.

В-четвёртых, активно разрабатываются версии для движков Chrome и Gecko. Microsoft хочет доработать в Edge свою изначальную реализацию.

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

Разработчика, на блог которого я ранее сослался, кстати, спонсирует компания Bloomberg именно для разработки реализации. Такой интерес!

А вот пример вклада сообщества: по мотивам доклада разработчицы добавили промежутки меж рядов/столбцов (*-gap) rachelandrew.co.uk/archives/2015/…

А пока я тут веду монолог, Твиттер запустил шарики. pic.twitter.com/q2NAutDK7W

@cakeinpanic @cssunderhood я так пластиковые окна заказал там, где дизайн сайта и верстка больше всего понравились

@cssunderhood folks, feel free to write me about some work also. kiryl.ply@gmail.com

А вы следите за тем как появляются новые спцификации? Например, у рабочей группы W3 по CSS есть официальный блог: w3.org/blog/css/

@cssunderhood +1. Не уверен насчёт алфавита, но по группам (positioning/display/text) разбивать удобно

И завершая тему спецификаций, у W3 есть портал по CSS, позволяющий ориентироваться в обстановке: w3.org/Style/CSS/

@cssunderhood а еще спеки есть на гитхабе: github.com/SelenIT/csswg-… — можно прямо там править найденные корявости)

@cssunderhood CSS IS AWES
OME pic.twitter.com/OhIWfNcjbU

Видео с первой встречи FrontendFellows в Екатеринбурге 29 января: <input>, Relay, сборка — youtu.be/2uo74fpwCN4?li… pic.twitter.com/GXRiVh0dPe

Сегодня поговорим о командной строке. Умеете пользоваться? Ищете grep'ом? Правили файлы sed'ом или парсили логи awk'ом? Ну, и куда без git?

10 видео с декабрьской Web Standards Days в Москве и статистика из анкет участников — habr.ru/p/276307/ pic.twitter.com/Hltb9fi280

@cssunderhood какие-то магические слова

Пользуетесь ли вы командной строкой?

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

@cssunderhood указывай вначале [опрос], а то да, не видно..

@dcromster @cssunderhood я по этому и мак обожаю - есть и нормальный GUI и прекрасная консоль. Терминал очень удобная штука

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

@cssunderhood конечно! Вот сегодня закончил перевод своих дотфайлов с bash на zsh: github.com/denysdovhan/do…
Получилось очень круто.

@cssunderhood в IDE есть GUI для git/npm/gulp/etc, но руками быстрее. Собственно иногда и vim быстрее IDE и из строки уходит не надо.

Уже ясно, что многие пользуются, а что скажут те, кто предпочитает избегать командной строки?

@cssunderhood командная строка для git - SourceThree. Гит в командной строке это больно.

@Copypasting @cssunderhood Не видел пока ни одной удобной графической реализации `git rebase -i`

Да, а ещё к этому ребэйзу есть --autosquash — очень удобно править непоследние коммиты вместе с git commit --fixup @iamakulov_ @Copypasting

@cssunderhood, чёрт, почему я не знал об этих параметрах раньше! Огромное спасибо. @Copypasting

По поводу таких хороших команд есть статья «How to undo (almost) anything with Git»
github.com/blog/2019-how-…
@iamakulov_

@iamakulov_ @cssunderhood @Copypasting git reset --mixed @~2 ещё часто использую, рибейз для бедных

@cssunderhood @iamstarkov Отменяет последние два коммита, но сохраняет их изменения в файлах

@cssunderhood Ну если Гит еще можно на GUI перестроить и многим нравится, то проекты собирать как-то совсем извращенно будет.

@golodenko @cssunderhood собирать проекты пока в терминале удобней, это да. Но есть Codekit, который добавляет UI

Итоги голосования:
76% — Да, каждый день.
14% — Только если припрёт.
7% — Нет необходимости.
3% — Нет, это сложно.

@cssunderhood встроенный в @intellijidea (но на chunk'и режу Tower'ом, их IDEA не умеет)

@cssunderhood ну это-то да. npm, bower, php -S, mysqld, nginx, sass-convert, ls -A, npm-check-updates, wp-cli

Выходит, практически все могут пользоваться консолью. А что делают те, кому нет необходимости? Хватает GUI? Пересылают свёрстанное клиенту?

Мне всегда было проще верстать на живых (пусть тестовых) данных. Без рыбы, видно типичные кейсы. Но это требует технической вовлечённости.

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

Бывают среды разработки (не будем показывать пальцем), индексирующие все файлы. Но через сеть они тормозят, плюс замедляют сам сервер.

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

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

@cssunderhood @koderhan не благодарите :) github.com/encharm/Font-A…

Во, отлично! А я с ходу не нашёл. @GrawlCore @koderhan

@vovagabel @cssunderhood @bem_ru там весьма специфичный БЭМ…
.fsWrap #document .list .artboard {
width: 30vh;
}

@cssunderhood это система публикации артбордов текущего документа скетча в локальной сети. но там совсем не БЭМ.

@denswor @vovagabel @cssunderhood @bem_ru это совсем не #b_

Сегодня поговорим об оптимизации изображений. По статистике проекта HTTP Archive они занимают 62±2% траффика. А вы оптимизируете картинки?

[Опрос] Оптимизируете ли вы картинки?

@cssunderhood 4%. SVGO.

@cssunderhood 4% от общего объема трафика на текущем проекте. От загрузки отдельной страницы без учета ajax-обновлений контента.

@cssunderhood Всех картинок, что грузятся. SVGO автоматически при сборке. Растр тоже вроде оптимизируется, но руками и не мной.

@cssunderhood Суровый embedded, борьба за каждый килобайт)

Меня в Sketch огорчает неподдержка viewBox у вложенных SVG. Можно встретить при сборке спрайтов, например.

@harisov @denswor @cssunderhood @bem_ru Вот! Разве тут нет отголосков БЭМ? pic.twitter.com/2RIMJegfXD

@cssunderhood Мне чертовски нравятся tinyjpg.com / tinypng.com. Сжимают с потерей качества, зато очень хорошо

@iamakulov_ @cssunderhood Мне тоже очень нравится, даже для gulp есть плагин. Жаль сам сервис платный для массовой оптимизации.

@vovagabel @denswor @cssunderhood @bem_ru

Это БЭМ, кроме

.pswp img

@cssunderhood так всё банально.

ImageOptim для растра, svgo для avg.

@cssunderhood imageOptim & imageAlpha

@harisov @cssunderhood для PNG сначала ImageAlpha и только потом ImageOptim

@cssunderhood да. ImageOptim на всё, иногда сборка сложных изображений (напр. фото с сеткой поверх) версткой.

@cssunderhood на “жирных” страницах выгадывали до пяти мегабайт этими средствами.

Перевод статьи автора реализации CSS Grid в Blink о размещении элементов, на css-live.ru; css-live.ru/articles/podro… pic.twitter.com/hW4ncQSZqI

Итоги опроса: Оптимизируете ли вы картинки?
56% — Да, постоянно.
24% — Время от времени.
08% — Нет, некогда/сложно.
12% — Это делают роботы.

Оптимизация картинок начинается с выбора верного формата. Думаю, вы и без меня знаете: jpeg — фото, png — графика, svg — вектор.

Можно ещё попробовать WebP, но он ещё не везде поддерживается. Ну, и начнём с основ.

Как ни странно, несколько байт может выиграть GIF (размер ~10 пикселей) в сравнении с PNG. Но имеет смысл только как внедрённый data:uri.

Пустая гифка может помочь в качестве фона для исправления бага с прокликивающимся насквозь элементом в IE.

С JPEG'ом вроде бы понятно: выбираете соотношение качество-размер при сохранении. Но всё равно есть настройки, которых нет в фотошопе.

Вот, например, недавняя статья советует сохранять с семплингом 4:2:0 calendar.perfplanet.com/2015/why-arent… Но есть замыливание, особенно на красном.

JPEG как казалось бы простой и изученный формат всё равно оставляет простор для оптимизаций. Этим занимается mozjpeg github.com/mozilla/mozjpeg

Ещё интереснее с PNG. Формат без потерь и уже есть много утилит оптимизации. Кажется, одна из лучших — ScriptPNG css-ig.net/scriptpng

Работает просто: перетаскиваешь файлы и выбираешь подходящий метод. Под виндой, но у вас всё равно же должна быть виртуалка с ней ;-).

Но, если для нас приемлемо сжатие с потерями в JPEG, то как насчёт PNG? Можно делать постеризацию (уменьшать количество цветов).

Можно подобрать так, что вес уменьшится на десятки %, а на глаз не различишь. В фотошопе неудобно, есть программка x128.ho.ua/color-quantize…

Что удобно, в ней можно выбрать как 256 цветов (PNG-8 с прозрачностью), так и больше. Например, 1024 или 4096 (зависит от изображения).

WebP даже с потерями гораздо труднее уже сражаться с такими оптимизированными картинками. Хотя свои 5–10% уменьшения тоже может дать.

Для SVG конечно же SVGO github.com/svg/svgo, однако, можно и подсобить. Немного рассказывал тут events.yandex.ru/lib/talks/3210/

Есть ещё пара статей про оптимизацию SVG: medium.com/larsenwork-and… (2¹⁄₂ части) и css-tricks.com/understanding-… (через масштабирование viewBox).

Хороши и старые статьи Сергея @chikuyonok: artlebedev.ru/tools/technogr… Много подробностей. «Грязная прозрачность» уже есть в инструментах.

Но это вручную, и занимает время. Для автоматизации есть такой проект как github.com/bem/image-optim. Есть линтинг. Правда, пока только PNG.

Как вы могли догадаться по адресу ссылки, это инструмент от Группы разработки Лего в Яндексе.

@cssunderhood @hej_veronica если эффекты в плане моушена, то на сайтах codyhouse.co/library/ и tympanus.net/codrops/ много всего

Вчера @cssunderhood вещал об оптимизации картинок. Хочу обратить внимание, что их ещё нужно правильно масштабировать bit.ly/1TFhy0H

Открылась регистрация и программа первой встречи PiterCSS 9 февраля в офисе Яндекса — pitercss.timepad.ru/event/289721/ pic.twitter.com/vnkUltNyoy

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

RT, если не сложно :)

@Copypasting @cssunderhood В смысле как imsky.github.io/holder/ ?

Почему ограниченный? Нет подсказки при совпадении второго слова, например. Не говоря, о милом нам определении неверной раскладки клавиатуры.

БЭМ-методология: с чего всё начиналось и зачем это всё нужно — bit.ly/1PTSnSg #b_

Управляем поведением web-шрифтов с использованием CSS-свойства font-display developers.google.com/web/updates/20…

SVG-маски css.yoksel.ru/svg-masks/ pic.twitter.com/u6fmlW5bh2

Если вы ещё не читаете Юлию, то у неё фантастический блог вёрстку. @yoksel

Наступила пятница, и это хороший повод поговорить про то, кто как её проводит.

[Опрос] Где вы в основном работаете?

CSS-анимации для которых включилось аппаратное ускорение Firefox помечает значком молнии pic.twitter.com/by2kL1ga4h

Что касается меня, то в основном работаю в офисе. Иногда могу и дома, но дома семья больше отвлекает. Практически не работал где-то ещё.

Иногда почему-то хорошо работается под чьё-то выступление ;-). Ещё хорошо помогает войти в поток ненапряжная весёлая или ритмичная музыка.

@cssunderhood примерно 50/50 офис/дом

A masterclass in `background-clip` via @anatudor

css-tricks.com/the-backgound-…

Педантичный учебник по CSS-расклакам из 5 частей: блочная модель, позиционирование, флекс — book.mixu.net/css/ pic.twitter.com/1aN6e3OObs

Похоже, действительно весьма подробный учебник @webstandards_ru

[опрос] Что вы делаете по выходным?

Что касается меня, то практически никогда не работаю по выходным. А то не отдохну для работы в будни. По возможности для фана пилю SVGO.

@cssunderhood всё перечисленное.

Недавно встретил эпичный баг в IE11 с флексбоксами. Только в настоящем. В IE10 нет, в Edge эмулиции IE11 — nоже.

Ну, и стоит помнить какие есть возможности и ограничения в старых версиях IE. Например, Flexbox в IE10 с префиксами, а IE9 без фильтров SVG.

Впрочем, гораздо более заметную долю имеет IE8, так что по возможности стоит деградировать до CSS 2.1.

@cssunderhood по выходным у меня технологический шаббат.

@cssunderhood недавно доклад делал про стек технологий БЭМ, bit.ly/BEM-full
С примером реального проекта, полноценного магазина.

@cssunderhood alexbaumgertner.github.io/presentation-b…

@cssunderhood @OlkhovoiDmitry щас тебе расскажут, что MVC во фронтенде в чистом виде не бывает, и вообще он мёртв.

@OlkhovoiDmitry @cssunderhood MVC — паттерн о пользовательских интерфейсах, где как не во фронтенде ему место?

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

@meuwka @cssunderhood это не эмуляция старых _движков_ для тестирования, это эмуляция старых *багов* для совм-сти с *существующими* сайтами.

Внезапно обнаружил, что mozjpeg входит в ImageOptim, а у последнего в свою очередь есть настройки (например, выключить zopfli для скорости).

Результаты опроса: «Что вы делаете по выходным?»:
22% — Только отдыхаю
49% — Смотрю, читаю, учусь
10% — Пишу код для фана
19% — Работаю

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

Всегда должен быть вызов, что-то новое и неизведанное. Иначе работа превратится в рутину и быстро перегорите. Желаю всем найти такой!

@cssunderhood Процентов 80 раработчиков полостью устраиват рутина. Перегорают только те, кого не устраивает (вхожу в их число)

На этом я с вами прощаюсь. С вами был Лев Солнцев @ruGreLI, Москва, Яндекс. Надеюсь, эта спонтанная неделя была вам полезна. Ещё увидимся!