Фронтенд дайджест #213 Лучшее за неделю Подкаст Цифровая т | FrontoWeek: Недельный дайджест [Фронтовик]

Фронтенд дайджест #213
Лучшее за неделю
Подкаст

Цифровая типографика унаследовала многие подходы из бумажной и за этим кроется несколько проблем, о которых и рассказал в своей статье Никита Прокопов — создатель шрифта Fira Code.

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

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

Что, по мнению автора, могло бы решить проблему, так это соответствие размера шрифта высоте заглавной буквы в пикселях, а размера межстрочного интервала — расстоянию между базовыми линиями строк.
Такой подход позволит отображать разные шрифты более консистентно, независимо от окружения пользователя.
В выпуске 122 я уже писал о свойствах text-edge и leading-trim которые должны будут решить эту проблему. А пока можно использовать Capsize — сервис для расчёта стилей под нужный шрифт.

[EN] Бесят сложные регулярки?
Этот плагин для ESLint поможет избежать распространенных ошибок в написании регулярных выражений, оптимизировать классы символов и упростить паттерны.
С полным списком правил можно ознакомиться в репозитории плагина.

[EN] Лия Веру поделилась лайфхаком, который позволит легко добавить поддержку тёмной темы в ваше веб-приложение.

Вместо переопределения каждого цвета, как советуют большинство мануалов по тёмной теме, Лия предлагает задать базовые цвета в формате HSL, где светлоту (L) определить через кастомное CSS-свойство.
Для тёмной же темы каждое такое свойство нужно будет переопределить по формуле 100% - начальное значение.

Однако, у HSL воспринимаемая яркость неоднородна, поэтому достичь лучшего результата, изменяя только светлоту, может быть затруднительно.
Эту проблему решил бы формат LCH, но его поддержка пока есть только в Safari Technology Preview 120+. Для конвертации RGB цветов в HSL и LCH можно воспользоваться онлайн утилитой.

[EN] Современным фронтендерам приходится заботится не только о производительности JavaScript но и о производительности CSS.

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

Также стоит избегать импортов в CSS — они мешают параллельной загрузке
Для оптимизации страницы с анимациями, стоит анимировать только свойства translate, scale, rotation и opacity, чтобы не смещать контент и не вызывать кучу relayout.

С помощью свойства contain можно определить изолированные блоки, не влияющие на остальной контент страницы.
А чтобы кастомные шрифты не отображались при загрузке пустым местом, стоит использовать font-display: swap и уменьшать размер шрифтов, например используя вариативные шрифты.
Но вот о чем стоит беспокоиться в последнюю очередь — так это об оптимизации селекторов.

[EN] Сталкивались ли вы с проблемой, что из JavaScript нельзя выбрать псевдо-элемент (который создаётся через :before и :after), а, соответственно, и нельзя напрямую изменить его стили?

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

[EN] Какой минификатор кода лучше?
В этом репозитории собраны бенчмарки по размеру выходного бандла и по времени сборки для популярных минификаторов:
- babel-minify
- esbuild
- google-closure-compiler
- swc
- terser
- UglifyJS

По размеру бандла лидирует UglifyJS, а сразу за ним — Terser.

По скорости однозначным победителем стал esbuild, написанный на Go. Более-менее сравнимые результаты выдает swc — компилятор для TypeScript и JavaScript, написанный на Rust.

Я ни на что не намекаю, но теперь вы знаете, чем заняться на майских.