Доке — 3 года!

Искренне люблю Доку — проект, где разработчики делятся с другими разработчиками, как работает веб. Хороших обучающих материалов по фронтенду много не бывает, а у Доки их много. Внимательно наблюдал за ребятами, ещё когда они только придумывали идею, собирали редакцию, и вот им уже исполнилось три годика.

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

https://teletype.in/@doka_guide/MmnpSofIQSH

CSS @scope

Мириам Сюзанн объясняет, в чём разница между обычным сложным селектором и относительно новой директивой @scope в CSS. Напомню, в CSS теперь можно задать область применения CSS-правил относительно какого-то родителя. И если раньше мы это делали банальным перечислением классов, то сейчас есть другой способ.

- Специфичность псевдокласса :scope, который позволяет обратиться к тому самому ограничивающему элементу, всегда равна [0, 1, 0].
- При этом вложенные в @scope селекторы не увеличивают свою специфичность. Это позволяет решить ту проблему, которую долгое время помогал решать БЭМ — борьба со специфичностью в проекте.
- При помощи синтаксиса @scope (.from) to (.to) можно задать «бублик» применения стилей. То есть стили начнут применяться по дереву внутри .from, но не будут залазить внутрь .to. Это вполне себе полезно для различных сложных компонентов со слотовой структурой.
- Чем ближе @scope по DOM-дереву, тем значимее стиль. Ещё раз, при нескольких @scope на странице, применимых к одному блоку применится не тот, что ниже в CSS-файле, а тот, что ближе к элементу по DOM-дереву. Это принципиально другой подход к стилизации.
- <style>@scope {...}</style> — гига-фича, позволяющая привязать стили к родительскому над style элементу. Я таким образом демки для слайдов начал собирать, чтобы не париться с iframe. Никаким наследованием такое не сделать. Как CSS-модули, только нативное и без предобработки.

Жду, когда эта крутая фича станет доступна не только в Chromium, но для демок в докладах пока хватает.

https://12daysofweb.dev/2023/css-scope/

Введение в Shared Compression Dictionaries

Новый интересный способ сжатия поверх HTTP подъехал. Точнее, относительно новый и относительно подъехал, но обо всё по порядку.

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

Если для вашего проекта важен перфоманс, то, возможно, вы даже игрались с Brotli или Zstandard. Тут алгоритмы уже посложнее, при этом под капотом используются специальные словари, которые увеличивают вероятность того, что повторные куски текста передавать не придётся. И включить их тоже уже относительно просто, есть готовые решения почти на любой вкус.

Был ещё такой проект, SDCH (Shared Compression Dictionary over HTTP). К сожалению, его реализация была супер-небезопасной, из-за чего браузеры перестали его поддерживать.

Но работа над идеей не остановилась. А идея такая. Скорее всего у вас в проекте есть какие-то файлы, которые от релиза к релизу меняются частично. Например, вы поправили конкретную кнопку, для чего переписали немного JS и добавили новых стилей в CSS. Во время релиза у вас собрался бандл, который содержит крайне мало правок, но из-за того, что это всё же новый файл, нельзя пользоваться кэшированием браузера — пользователю приходится перекачивать весь файл целиком. (Часто здесь перфоманс-инженеры начинают играться с чанками, но универсального решения всё равно нет.)

А что было бы, если бы браузеру можно было сказать, чтобы он взял старую версию файла (из кэша, чтобы почти мгновенно), а потом поверх неё применил только дифф, как в git? И ещё сжал этот дифф, потому что он же тоже текст. Если максимально упростить и опустить море деталей, в этом и суть Delta Compression. Старую версию используем как словарь, а новая получается применением диффа.

Похожую идею можно применить и для динамических сайтов. Скорее всего у вас есть футер и шапка, какое-нибудь меню. И все они от релиза к релизу одинаковые. Можно добавить их в словарь, который браузер закэширует, а загружать для каждой страницы нужно будет только различия. Что тоже может нехило сэкономить байтики.

Лабораторные тесты показывают, что новый формат может как ничего не давать полезного вообще (тот же Brotli вполне себе мощный из коробки), так и экономить до 80% трафика. Так что не стоит бросаться внедрять просто потому что, начать стоит с пробных замеров.

И как же этим пользоваться, если всё-таки готовы?

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

- Amazon CloudFront, Cloudflare и Fastly уже поддержали этот формат у себя. Думаю, другие CDN тоже скоро подтянутся, потому что это позволяет на том же железе зарабатывать в разы больше на раздаче статики. Золотая жила.

- В статье есть ссылки на рецепты, как прикрутить новый формат к себе, но там прям надо хорошо разбираться и уметь патчить запросы на уровне заголовков. Ещё и сборку проекта нехило так нужно дописать, чтобы помимо нового бандла хранить дифф со старым бандлом. Но если у вас уже настроена тонкая настройка Brotli или Zstandard, то дотюнить под новые словари будет не так сложно.

- Хоть и выглядит всё довольно сложно, верю, что автоматизацию в случае успеха в Chrome подвезут быстро. Когда-то нужно было `.gz`-версии файликов подкладывать руками рядом с обычными версиями, чтобы твой сайт работал быстрее, чем у конкурентов, а сейчас многие даже и не в курсе, что у них на сервере gzip-сжатие срабатывает автоматически.

https://www.debugbear.com/blog/shared-compression-dictionaries

Цвета в console.log()

Джим Нильсен дебажил в приложении цвета, которые меняются при помощи JS, и делал это самым правильным способом: через console.log(). Но беда в том, что если написать в консоль new color is hsl(62 50% 25%), это не то чтобы полезно. Не знаю как вы, но я не умею до сих пор быстро представлять в голове цвета по числам.

Джим вспомнил, что ещё в 2018 году у него была заметка в блоге про то, как стилизовать вывод console.log(). На самом деле если написать console.log('%c some text', 'color: white; background-color: black'), то %c и будет указанием браузеру применить стили из второго аргумента при выводе в консоль.

Я про такой лайфхак хоть и знаю давно, всё никак не мог найти полезного применения. А ведь для дебага цветов это самое оно.

https://blog.jim-nielsen.com/2024/color-console-log/

Уроки, полученные от 222 557 шрифтовых сабсетов

Стоян Стефанов задался вопросом: сколько можно экономить на размере файлов шрифтов, если оставлять в них не просто диапазон символов (латинские, кириллические и так далее), а только нужные на странице. И ответить на него решил при помощи исследования.

Он взял 1009 шрифтов из гитхаба Google Fonts, при помощи fontkit исследовал, какие глифы есть в каждом из шрифтов, затем, используя Glyphhanger, сгенерировал 222 557 отдельных файлов шрифтов, чтобы в них было от 1 до N глифов. Заморочился, конечно, знатно, но зато в статье можно найти примеры скриптов, как можно так же заморочиться.

В итоге Стоян опытным путём выяснил, что каждый глиф в среднем весит 0.1 KB, то есть если вы используете какой-то шрифт только для заголовков на статическом сайте, то есть смысл оставить только нужные символы. И если у вас нет кириллицы на сайте в принципе, то её имеет смысл вынести в отдельный сабсет.

Почему не убрать целый набор символов совсем? Потому что есть браузерный автоперевод, когда текстовый контент всё равно меняется на те символы, которые вы не предусмотрели. И если вы хотите, чтобы было красиво, то лучше оставить возможность докачать шрифт. Но чтобы не грузить всё сразу, unicode-range вам в помощь — браузер скачает только то, что есть на странице в виде символов.

https://www.phpied.com/lessons-learned-from-222557-font-file-subsets/

Адаптивный TOC с точками-соединителями для страниц на CSS

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

Для веба такой пример скорее бесполезен, потому что нет такого понятия, как страница. Но если вы верстаете что-то типографическое (а многие книги, на самом деле, вполне себе верстаются в веб-инструментах), то есть прекрасная спека с content: leader(dotted); — делает ровно то, что надо. Беда в том, что работает это примерно нигде. Мне в далёком 2017 году пришлось подключать PrinceXML, который умеет в печатные стили лучше браузеров.

Кристоф Грабо попробовал использовать для такого гриды и хак с переполнением контента. Получилось вполне себе адаптивно. Причём он использует точки как текст, разделяет их пробелами. Из-за этого лишние точки переносятся на следующую строку, не оставляя артефактов. Взял себе на вооружение, если вдруг снова понадобится верстать что-то печатное.

https://markentier.tech/posts/2021/03/responsive-toc-leader-lines-with-css/

Doom на CSS

Думаю, вы слышали, что Doom на чём только не запускали. На калькуляторах, градусниках и тестах для беременности было. Даже на микроорганизмах с крайне низким FPS было.

К сожалению, на HTML и CSS полноценный Doom я не видел, но наткнулся на потрясающую демку Адама Куна, где он при помощи Scroll Animation API и 3D-трансформаций сделал возможность передвигаться по 3D-карте, стрелять в монстров, всё это в узнаваемой стилистике.

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

https://codepen.io/cobra_winfrey/pen/oNOMRav

CSS Loaders

Большая коллекция (больше 600) CSS-лоадеров от Темани Афиф. Каждый всего в один элемент <div class="loader"></div>, скопировать CSS можно по клику на пример.

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

https://css-loaders.com/

Полупрозрачность для эффективного UI-дизайна

Дизайнеры из Злых Марсиан делятся подходом, который позволяет упростить разработку дизайна для проектов. Правда, заголовок в оригинальной статье супер-жёлтый: «Вау, opacity! Полное руководство по этому герою эффективного UI-дизайна». Почитал статью, а полного руководства и конкретных рецептов так и не нашёл. Но тем не менее интересные мысли в статье есть.

1. Для начала, имея базовый цвет и играясь с его прозрачностью, можно сразу задать hover, focus и прочие состояния элементов.

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

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

4. С доступностью и контрастностью тоже всё хорошо, если следить за тем, что на что накладывается. В статье есть примеры с расчётом WCAG/APCA.

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

В статье в конце есть верное замечание, что такое подход хорош в первую очередь тогда, когда нужно быстро что-то запустить. Один раз придумал математику наложения полупрозрачных поверхностей — и побежали за деньгами от инвесторов быстрыми дизайнами. Но всё-таки богатые и приятные интерфейсы гораздо сложнее, там нужно уметь совмещать много разных цветов, иногда в самых неожиданных комбинациях, а тут прозрачность может сыграть с вами злую шутку (зелёная и красная кнопка внезапно смешаются — и ой, шоколадное мороженое).

https://evilmartians.com/chronicles/woah-opacity-a-full-guide-to-this-badass-hero-of-efficient-ui-design

Tbilisi JS Meetup #3

Сегодня вечером буду читать свой новый доклад про работу с девтулзами Chrome, а точнее — с вкладкой Performance. Сам постоянно путаюсь, где какая панелька за что отвечает, почему каждый блок своего уникального цвета, ещё и ненужные мне детали показывает, которые отвлекают. Решил собрать все свои знания в кучку, набраться новых и рассказать об этом на митапе в Тбилиси.

Помимо моего будет ещё три доклада, все можно посмотреть в онлайн-трансляции. До встречи 😉

https://news.1rj.ru/str/tbilisi_js_chat/11654

Как мы делали Yandex Cloud на дизайн-системе Gravity UI доступнее

Пока сижу на митапе A11Y&UX Day в Тбилиси, решил поделиться с вами хорошим примером, как большая дизайн-система работает над доступностью компонентов.

Что конкретно сделала команда gravity-ui, можно прочитать в статье, но интересно как раз то, что доступность — это не просто семантика и ариа-роли. В разных браузерах скринридеры работают по-разному, какие-то проблемы пришлось «лечить» необычным способом. С лейбла «Вы здесь» в компоненте хлебных крошек улыбнулся — непривычно, но элегантно. Кстати, посмотреть все фиксы можно прямо в GitHub, потому что библиотека лежит в опенсорсе. И если знаете, как можно сделать лучше — приносите ишьи или пулл-реквесты.

https://habr.com/ru/companies/yandex_cloud_and_infra/articles/853382/

Селекторы CSS: простые и сложные

Читал на FrontendConf доклад про то, что умеют селекторы и какие есть интересные и необычные приёмы, чтобы выбрать что-то в DOM-дереве. Казалось бы, что там можно на целый доклад собрать. А вот как начал собирать материалы, сам удивился, сколько всего в этой теме интересного есть, даже чему-то научился в процессе подготовки.

Под каждый пример есть интерактивные демки, можно с ними поиграться, чтобы лучше понять, что происходит. А в конце — квиз для проверки знаний (хотя на самом деле мне просто хотелось сделать квиз на чистом CSS, чтобы поразвлекаться с теми самыми селекторами).

Видео: https://youtu.be/uhfcGAQv7o8
Слайды: https://mefody.dev/talks/css-selectors

Прекрасные аутлайны для фокуса

Томас Гюнтер делится советами, как сделать хорошее выделение фокусом, если дефолтные браузерные вам не подходят.

1. Используйте :focus-visible вместо :focus. В таком случае фокусное выделение будет показываться тогда, когда оно действительно нужно.

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

3. Когда элемент находится на каком-то фоне, нужно помнить про контрастность, подсматривать в рекомендации WCAG. Красивая белая обводка на белом фоне — лучше уж дефолтная браузерная.

4. Обводку можно делать двойную (внутри светлое, снаружи тёмное) при помощи outline и box-shadow. Вполне себе универсальный паттерн, который будет смотреться хорошо почти на любом фоне, если вдруг не наткнётся на опасный overflow: hidden.

5. Можно в принципе не делать никакую обводку, если есть уже готовые стили для :hover, которые явно меняют внешний вид элемента, чтобы было видно, что он выделен. Заметное изменение фона, цвета текста, тени или бордера — что угодно, лишь бы было понятно, что я сфокусировался на элементе.

https://medienbaecker.com/articles/focus-outlines

Pkl — замена YML и JSON от Apple

Оказывается, у яблочной компании есть опенсорсное решение для конфигурационных файлов. Что обычно нужно для конфигов? Понятный простой синтаксис, возможность наследоваться от базовых конфигов и расширять шаблонные, валидация схемы данных. И новый pkl (Pickle) как будто всё это умеет.

class AppConfig {
  port: Int = 8080
  logLevel: String = "INFO"
  timeout: Duration = Duration.seconds(30)

  function validate() {
    port > 0 && port < 65536
  }
}

api = new AppConfig {
  port = 3000
  timeout = Duration.minutes(2)
}

Как будто всё по коду понятно даже без объяснений. Есть наследование, есть валидация, есть схема данных, всё в понятном формате.

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

https://www.trevorlasn.com/blog/pkl-apple-new-configuration-language

Самозванцы, выгорание, границы

Видео выходного дня. Анастасия Калашникова — практикующий психолог, ведущая тренингов для айтишников, основательница проекта PSYvIT. Давно подписан на её канал, смотрю доклады и вебинары.

Есть старенький, но всё ещё актуальный доклад от Анастасии, где она глубоко погружается в темы «синдром самозванца» и «выгорание»: что это такое, как оно влияет на нашу психику и физиологию, что с этим делать. Полезно посмотреть, чтобы понять, есть ли вообще у вас этот синдром (а то сейчас почти у каждого либо синдром самозванца, либо выгорание), и в целом немножко прокачаться в осознанности. Я сейчас как раз столкнулся с ощущением «вот они все молодцы, а я сюда только пришёл, я точно хуже остальных» — доклад устаканил тревогу в голове.

https://www.youtube.com/watch?v=2BBumwv-jVY

Отличия между поповерами и диалогами

Мы в подкасте часто обсуждаем, как в браузеры внедряются поповеры (атрибут popover), которые могут заменить в каких-то случаях тултипы, а в каких-то — модальные окна. При этом есть dialog, который как будто умеет в похожую функциональность. Когда и как что применять — большой вопрос.

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

https://css-tricks.com/clarifying-the-relationship-between-popovers-and-dialogs/

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

https://www.youtube.com/watch?v=x4ZCGfUZntk

У CSS новый лого

Пока в соц. сетях между адептами Tailwind и БЭМ идут очередные тёрки, а AI-стартапы учатся генерировать целые приложения в 2 клика, Адам Аргайл запустил на гитхабе голосование за новый логотип CSS. Началось это ещё в августе, а буквально вчера выбор был сделан.

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

https://github.com/CSS-Next/logo.css

Получить ширину скроллбара при помощи CSS

Короткий, но интересный лайфхак от Темани Афиф. Всё, что вам нужно, это простой советский CSS Container, @property и вычитание.

https://css-tip.com/width-scrollbar/

overflow: clip

В CSS у overflow-x: hidden и overflow-y: hidden есть одна важная особенность: если вы таким образом прячете переполнение по одной оси, автоматически переполнение прячется и по другой (там значение становится auto). То есть нет удобной возможности спрятать только то, что вылазит по вертикали, например.

Ахмад Шадид рассказывает про то, как работают значения overflow-*: clip. Это как раз то поведение, которое нам нужно, чтобы что-то спрятать по одной оси, но по другой оси всё красиво показывалось. В статье есть демки, которые помогают лучше разобраться с особенностями работы свойства.

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

https://ishadeed.com/article/overflow-clip/

Ведём диалоги

Адам Аргайл поделился несколькими примерами, как сверстать красивые модалки-диалоги на сайте при помощи CSS. Есть примеры с обычной модалкой, модалкой-сайдбаром и корзиной покупок. Заодно можно посмотреть, как будет выглядеть CSS, если в нём начать использовать все его самые современные возможности, потому что Адам вовсю использует вложенность, слои, новые директивы и свежие свойства. Но на то он и деврел.

https://nerdy.dev/have-a-dialog

Anchoreum

Люблю обучаться в игровой форме. Когда-то прокачивал навык вёрстки гридами при помощи CSS Grid Garden. А сейчас появилась похожая игрушка для практики с CSS Anchor Positioning. Работает в Chrome Canary, начал проходить — нравится.

https://anchoreum.com/