mefody.dev

Шрифт Martian Mono v1.1.0

Приятный релиз для любителей шрифтов с лигатурами. У «Злых Марсиан» есть свой моноширинный шрифт, Martian Mono. Мне он нравится не только за приятные и читаемые формы символов, но и за уважение к многообразию языков в мире. У меня есть свой тест для шрифтов: смотрю на букву Ў. Если что, это не просто «У» с шляпкой, а 22-я буква беларусского алфавита, а я иногда в личных проектах пишу комментарии на беларусском языке (і што вы мне зробіце? гэта мая родная мова, дзе хачу, там і выкарыстоўваю). Очень многие хорошие кириллические шрифты на этом тесте ломаются.

В версии 1.1.0 появилось ещё больше символов из разных языков мира. И новые программистские лигатуры.

https://github.com/evilmartians/mono/releases/tag/v1.1.0

Любопытное применение CSS-импортов в вебе

Эрвин Хофман подсвечивает большую проблему в современном вебе. По статистике Веб-Альманаха за 2024 год на 18.86% сайтов есть @import в CSS. Причём на 15.16% это подключение чего-то стороннего. Чаще всего — веб-шрифтов, fonts.googleapis.com в статистике лидирует.

Почему это проблема? Потому что @import блокирует рендеринг. Браузер видит @import в CSS-коде, идёт качать новые стили, в это время много какие процессы уходят на перекур. И только после того, как новые стили скачаются, можно продолжить остальное важное для рендера страницы. В случае со сторонними доменами тратится ещё и неприличное время на DNS-резолвинг, рукопожатия лишние и прочее междоменное. Ну и заодно любезно сливаются данные о пользователе, которые можно достать из запроса даже к CSS-файлу.

А вот был бы старый надёжный <link rel="stylesheet" href="another.css">, таких проблем бы не было. У браузера есть так называемый preload scanner, который умеет для оптимизации скачивать ресурсы заранее. Ещё и приоритет ресурсу можно выставить повыше, если стили очень важные.

В общем, если у вас есть в команде внутренние KPI на ускорение сайта, при этом в коде есть CSS-импорты — уберите их, с высокой вероятностью полезные метрики вырастут.

https://calendar.perfplanet.com/2024/the-curious-performance-case-of-css-import/

hyphenate-limit-chars

Одно из недавних моих открытий в мире CSS-спецификаций. Думаю, про свойство hyphens: auto, которое включает перенос на новую строку для длинных слов, вы знаете. Точнее, просит браузер, если у него есть правильные словари, включить эти самые переносы. Использую редко, потому что мне в целом не нравится, когда в веб бездумно переносят то же самое, что есть на бумаге.

Но, оказывается, есть ещё одно полезное свойство, которое не даёт браузеру переносить слишком короткие слова. Если записать hyphenate-limit-chars: 10 4 3, то вы говорите браузеру:
- не переноси слова, которые короче 10 символов;
- при переносе оставляй на первой строке не меньше 4 символов;
- при переносе оставляй на второй строке не меньше 3 символов.

Можно написать короче, hyphenate-limit-chars: 10, если вам важен контроль только над длиной слов.

Хоть и пользуюсь автопереносами в вебе я редко, там, где всё-таки пользуюсь, мне этот маленький файнтюнинг прям будет полезен. Да, только для Chromium-браузеров, но прогрессивное улучшение никто не отменял.

https://developer.mozilla.org/en-US/docs/Web/CSS/hyphenate-limit-chars

CTF для конференции «Я люблю фронтенд»

Уже сбился со счёта, сколько лет помогаю делать конференцию «Я люблю фронтенд» в составе програмного комитета. Не буду говорить, что программа там классная. Не буду намекать, что можно будет 15 февраля подключиться посмотреть в онлайне или прийти офлайн (если успели ухватить билет).

Но для меня одна из самых любимых частей этого события — ежегодный CTF для фронтендеров, который мы готовим к конфе с 2021 года. Многие же говорят, что пришли в айтишечку, чтобы делать игры (а потом что-то пошло не так). А мы вот прямо сейчас доделываем ещё одну игру, которая стартует сегодня в MTk6MDMgKEdNVCszKQ==.

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

P.S. Авторы игры не несут ответственности за тильт и батхёрт во время решения задач

Сохранение интерактивности страницы во время View Transition

Я несколько раз в подкасте жаловался на то, что у прекрасного View Transition API есть один существенный недостаток: пока идёт анимация перехода, страница перестаёт быть интерактивной. То есть кнопки не нажимаются, ховеры не срабатывают и так далее.

В целом, оно и логично. Во время перехода по сути у вас одна картинка превращается в другую. Не очень понятно, куда клик должен проваливаться.

И вот Брамус поделился простым, но интересным решением.

::view-transition {
    pointer-events: none;
}

Во время перехода на странице создаётся псевдоэлемент ::view-transition, который накладывается поверх вьюпорта. И ведь в CSS уже давно есть способ убирать с элементов обработку событий указателя. Классно! Классно же, да?

Увы, есть нюанс. Сниппет действительно хороший, если вы используете VTA для анимации чего-то внутри документа. Карточка, которая превращается в другую карточку, например. А вот если вы сам документ и анимируете, то ничего не получится. То есть этот сниппет удобен как раз для того, чтобы не весь вьюпорт замораживать, а только ту область, которая анимируется.

У меня в проекте переключение темы сделано через VTA, и там этот сниппет, к сожалению, не применить, потому что тема переключается на всём документе единомоментно. Но я уже поигрался с тем, чтобы анимировать внутри страниц таким образом — нравится.

https://www.bram.us/2025/01/29/view-transitions-page-interactivity/

Кнопка «Вверх» с индикатором прогресса

Мануэль Матузович собирает популярную на различных сайтах кнопку «Scroll to top» на HTML и CSS. Кнопка из коробки доступная (потому что ссылка), заодно показывает, сколько процентов страницы уже прочитано пользователем. «2-в-1, только сейчас в нашем онлайн-магазине, ещё и бесплатно!»

Заранее предупрежу, что использует она под капотом современные возможности браузеров вроде Scroll Timeline API и @property, но это не мешает прогрессбар прикручивать как прогрессивное улучшение.

https://matuzo.at/blog/2025/scroll-to-top-button

Время избавляться от BlinkMacSystemFont и -apple-system

Короткий рецепт. Если у вас в стилях подключаются шрифты BlinkMacSystemFont и -apple-system, то удалите их и замените на system-ui. Поищите в фолбеках.

А вот почему так, откуда эти шрифты взялись и безопасно ли их вообще использовать — в посте Стояна Стефанова.

https://highperformancewebfonts.com/read/ditch-BlinkMacSystemFont-and-apple-system

Опция --erasableSyntaxOnly в TypeScript

Вышли релизноуты беты TypeScript 5.8. Там есть разное полезное, но меня зацепила одна конкретная опция. В новом релизе хотят добавить аргумент --erasableSyntaxOnly, который попросит TS ругаться на конструкции языка, несовместимые с Node.js.

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

В общем, Node.js и TypeScript идут навстречу друг другу, это здорово.

https://devblogs.microsoft.com/typescript/announcing-typescript-5-8-beta/

create-react-app всё

Я уже пару лет прошу фронтендеров не пользоваться CRA, потому что он устарел, не поддерживается командой разработки и не планировался быть совместимым с React 19. А теперь и сама команда CRA добавила в ридми проекта плашку «Ухадити! Тут никого нет! Используйте фреймворки, не используйте create-react-app!»

https://github.com/facebook/create-react-app/pull/17003

Шаблонные литералы в TypeScript

У доктора Акселя Раушмайера вышел очень хороший гайд по тому, как можно полезно применять шаблонные литералы в TS. Это когда вы пишете что-то вроде type TailwindColor = `${BaseColor}-${Variant}`;, а внутри уточняете допустимые типы-значения.

Видел, как при помощи таких «умных» типов делали супер-мощные проверки контрактов с бекендом, прокачивали типы внешних библиотек и в целом сильно улучшали DX (автокомплит — одно удовольствие).

https://2ality.com/2025/01/template-literal-types.html

Браузер Lightpanda

Происходит интересное. Думаю, не секрет, что запустить безголовый Chrome — дорого. То есть если вам нужно просто распарсить страничку, то проще дёрнуть её через cURL, если это статика. Но если это SPA, которых сейчас в интернетах много, то тогда уже надо брать какой-нибудь Playwright или Puppeteer.

И вот команда Lightpanda решила для задач скраппинга страниц (для тех же LLM, например) сделать свой быстрый браузер, который в принципе ничего не рендерит. Естественно, по их бенчмаркам вверху описания проекта браузер работает в 10 раз быстрее и эффективнее по памяти. И внизу страницы написано, что скорее всего большинство сайтов у вас сломается, потому что браузер пока в глубокой бете. Но судя по активности коммитов в репозитории и тому, что этот браузер нужен самой команде для их бизнеса, есть все шансы, что в каком-то удобоваривом виде браузер скоро выйдет из беты. Жду.

https://github.com/lightpanda-io/browser

6 CSS-сниппетов, которые должен знать каждый фронтендер в 2025 году

Ох, как же я люблю такие заголовки в статьях. Год ещё только начался, а я уже кому-то что-то должен. Но, тем не менее, Адам Аргайл делится полезными «карапульками», знание которых вам может помочь:
- Анимация через linear().
- Типизированные кастомные свойства.
- View Transitions для переходов между страницами.
- Анимации появления и скрытия диалогов и поповеров.
- Анимация скрытия и раскрытия details.
- Анимированный градиентный текст.

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

https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025

Псевдокласс :empty

Крис Фердинанди напоминает о том, что в CSS довольно давно работает псевдокласс :empty. Всё, что он делает, это ищет элементы, внутри которых буквально ничего нет. Акцентирую на этом внимание: нет ничего, совсем ничего, даже пробела — это важно.

Применять такой селектор удобно для тех случаев, когда с сервера могут прийти любые данные, в том числе пустые. Обычно принято в JavaScript писать логику, проверять данные, в зависимости от этого перестраивать компонент. Со списками — делать фильтрацию. Но если по какой-то причине в код компонента залезть нельзя, а в стили можно, то вот вам и решение: .card:empty { display: none; }

https://gomakethings.com/the-empty-pseudo-class-in-css/

Перевод aria-description

Адриан Розелли продолжает разбираться, как работают различные a11y-фичи в браузерах на самом деле. В этот раз он проверил, как сочетаются атрибут aria-description и автоматические переводчики. У браузеров для пользователей есть функции автоперевода, для пользователей с особыми потребностями эта фича тоже важна.

Увы, оказалось, что только Firefox переводит, и то не везде. Chrome и Safari не переводят совсем. Google Translate, к слову, тоже не справляется.

Поэтому более правильный способ перевода доступных описаний — через aria-describedby, который связывается с реальным элементом в DOM, а там перевод вполне себе работает.

https://adrianroselli.com/2025/01/aria-description-does-not-translate.html

You don't know HTML: fetchpriority

Алексей Назаренко у себя в канале понятным языком объясняет, как работает атрибут fetchpriority на уровне браузера. И вообще, имхо, у Лёши полезный канал про веб, рекомендую.

https://t.me/alexnozer_dev/183

Рефакторинг на максималках

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

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

https://refactor-like-a-superhero.vercel.app/ru

CPU-хак для CSS

Рубрика «Ненормальное программирование».

Задача: сделать так, чтобы значение CSS-переменной самостоятельно увеличивалось от собственного значения по какому-то сигналу. Что-то вроде --my-var: calc(var(--my-var) + 1);. В императивных языках же есть i++, подавайте-ка его сюда и в декларативные языки, будьте любезны.

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

Но... Джейн Ори делится интересным хаком, который позволяет всё-таки обойти это ограничение. Для хака нужно знать три вещи:
1. Анимация имеет высокий приоритет в каскаде. Свойство, которое меняется анимацией, никакой специфичностью не перебить.
2. У анимаций есть кэш. Чтобы не считать значения свойств внутри анимаций по кругу, они жёстко кэшируются, даже если внутри идёт обращение к var(--my-var), которая где-то снаружи меняется.
3. Кэш анимации сбрасывается, если изменить сами свойства, касающиеся настроек анимации, вроде animation-play-state или animation-duration.

А дальше нужно хитрым образом переключать «кадры» так, чтобы кэш то сбрасывался, то включался. Коротко объяснить не смогу, смотрите демки в статье, с ними становится понятнее. Работает вся магия по ховеру, потому что для запуска заклинания без JavaScript всё-таки нужно из мира HTML прокинуть каким-то образом сигнал для старта в CSS.

Почему это называется CPU-хаком? Потому что по сути у вас появляется простой вычислительный юнит в CSS, настоящий счётчик, который можно менять под свои нужды. Так Джейн Ори делится демками, где она на чистом CSS подбирает позицию курсора во вьюпорте (причём бинарным поиском, чтобы быстрее было), запускает игру «Жизнь» Конвея, а потом всё это комбинирует в полноценный Арканоид.

Зачем это уметь? Ведь на JS объективно понятнее, производительнее и правильнее такое делать.
- Во-первых, я пока разбирался в демках, сломал мозг, но немного прозрел. Мне просто нравится разбираться в таких нюансах. Знание — сила.
- Во-вторых, знание про особенности кэширования значений в CSS может спасти вам часы дебага хитроумных ошибок в проде. У меня буквально такой кейс был в одном из проектов, где надо было сбросить кэш, а до этого в принципе понять, что ошибка в кэше.
- В-третьих, скажите потом ещё, что CSS — не язык программирования.

https://dev.to/janeori/expert-css-the-cpu-hack-4ddj

Запуск TypeScript на Node.js

Начиная с Node.js v23.6.0 можно запускать TypeScript-файлы в Node.js без всяких флагов. Это всё ещё экспериментальная фича, но вот, как она работает:
- Нода выпиливает TS-фичи из кода и просто выполняет, что получилось. Убирает типы, то есть.
- Если в коде есть enum, namespace и прочие улучшалки из мира TS, которых на самом деле нет в JS, то магия не случится, код сломается.
- Расширение файла .mts — это модульный JS, .cts — CommonJS, .tsx — не поддерживается.
- Просто .ts файлы обрабатываются как .js, то есть модульность берётся из package.json.

Таким образом, рано или поздно для серверных штук мы вполне можем прийти к сценарию, когда для разработки активно используется TypeScript со всеми проверками, строгими и нестрогими, чтобы писать более-менее качественный код, а запускаются на выполнение в проде те же самые файлы, без транспиляции. Для всяких CI/CD — обалденная экономия. А то сейчас надо сначала установить TypeScript или достать его из кэша, запустить на транспиляцию, и только потом можно что-то запускать. Для мелких скриптов — расточительнейшая трата времени и железа.

Больше подробностей про фичу — у доктора Акселя Раушмайера.

https://2ality.com/2025/01/nodejs-strip-type.html

Чиним год в футере

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

А тут вот поделились готовым решением всех проблем. Есть как npm-пакет, так и API, которое позволит вам больше не думать о проблеме.

Надеюсь, вы понимаете, что это шутка. Но сайт прекрасен.

https://getfullyear.com/

Новогодний выпуск №455. Вадим, Алексей, Юля, Полина, Никита, Андрей кормят белок, играют колмимейби, красят плитку, ждут группу, спрашивают шляпу и атакуют титанов.

— Видео на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте

Going Offline

У Джереми Кейта в 2018 году вышла хорошая книга по тому, как сделать offline first приложение. Он объясняет возможности сервис-воркеров, как работать с запросами, какие стратегии существуют и как это связано с PWA. И хоть прошло уже 6 лет, книга всё ещё хороша, чтобы научиться основам работы с сетью через сервис-воркеры, рекомендую.

А сейчас она ещё и бесплатная. В PDF, ePub и Mobi.

https://goingoffline.adactio.com/

А вот и доклады с Субботника https://www.youtube.com/playlist?list=PLKaafC45L_STvTWPrSF_m5hV9LMj0uFi0

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

Собственный инструмент замеров скорости сайта на основе Puppeteer

Генри Прайс показывает, как можно при помощи Puppeteer собирать нужные именно вам метрики с сайта.

В статье есть примеры, как искусственно замедлить сеть, эмулировать устройства, собрать Core Web Vitals и выгрузить это всё в табличку Excel. Но на самом деле, так как вы по сути запускаете почти полноценный браузер в CI, то делать на странице можно почти что угодно и замерять можно почти какие угодно синтетические метрики. Важно только не забывать, что это синтетические замеры, а не RUM.

https://calendar.perfplanet.com/2024/build-your-own-site-speed-testing-tool-with-puppeteer/

Про local-first подход, движки синхронизации и архитектуру приложений

Видео выходного дня. Кирилл Мокевнин и Андрей Ситник хорошо обсудили то, как современные возможности браузеров позволяют делать полноценные приложения без нужды в запросах к бекенду на каждое нажатие кнопки. И хоть local-first подход не применить вообще для любого приложения, но знать и уметь работать с «умной» синхронизацией — полезный навык.

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

https://youtu.be/-57r5AARRgY

Переходы страниц как в Internet Explorer

Когда я читал доклад про View Transitions API, то шутил, что современные браузеры наконец-то научились делать то, что Internet Explorer умел ещё в версии 4.0. Можно было написать что-то вроде <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Blinds(Duration=3)" />, и страница появлялась через 3 секунды со спецэффектами жалюзи. Олды помнят.

А Брамус взял и собрал библиотеку, которая реально обрабатывает такие метатеги и при помощи View Transitions API воссоздаёт те самые милые сердцу спецэффекты. Пока игрался с демкой, олдскулы порвало.

https://page-transitions.style/

Автоматизируем все, что можно автоматизировать, по рецептам старого веб-мастера!

Наш четвертый спикер — Никита Дубко, руководитель продуктов Яндекс Контест, HR Tech Яндекса🔥 И он точно знает, как ускорить рабочие процессы и разгрузить сотрудников от рутинных задач..

Из доклада Никиты вы узнаете:

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

📺 Смотреть на нашем YouTube канале

💙 Смотреть VK видео

Как звучит загрузка страницы

Пока многие решают задачки в Advent of Code, Advent of TypeScript или просто открывают классические адвент-календари с подарочками, я дополнительно читаю Web Performance Calendar, который в декабре каждого года тоже раз в день выкладывает по одной интересной статье.

Брайан Луис Рамирес в рамках одной из таких статей поделился забавным инструментом, который озвучивает загрузку страницы по HAR-файлу. Вам нужно открыть DevTools, во вкладке Network поставить тротлинг сети (чтобы звук был подольше), загрузить нужную вам страницу, экспортировать HAR-файл и загрузить его в утилиту Soundtrace.

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

https://calendar.perfplanet.com/2024/how-does-web-performance-sound/

Опыт использования CSS Container Queries командой Netflix

На web.dev периодически появляются «истории успеха», когда большие компании делятся тем, как они использовали современные технологии (часто — доступные только в Chrome) и им это сильно помогло. И вот, чем поделилась команда Netflix (очень популярный стриминговый сервис с фильмами и сериалами, если вдруг не знали).

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

2. Проще работать с медиавыражениями. Раньше нужно было опираться одновременно и на размеры вьюпорта, и на какие-то классы или стили, устанавливаемые через JavaScript. Теперь достаточно смотреть только на размеры контейнера.

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

4. Лучший Developer Experience. Судя по цитатам, некоторые разработчики считают, что так и должен был работать CSS изначально.

5. Ко всему этому можно привязать полифил, если надо работать в браузерах, где Container Queries нет.

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

https://web.dev/case-studies/netflix-cq

Иконочные шрифты — это плохо?

Олли Уильямс пробует разобраться, действительно ли в 2024 году плохо использовать иконочные шрифты.

- Говорят, иконки в шрифтах невозможно перекрасить. Но вообще-то браузеры уже умеют в COLRv1, то есть в цветные шрифты, которые вполне себе можно перекрашивать.

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

- Говорят, иконочные шрифты негативно влияют на производительность страницы. Но ведь woff2 очень даже компактный, а если сверху добавить unicode-range вместе с каким-нибудь glyphhanger, то ничего лишнего на страницу и не попадёт.

- Говорят, если шрифт не загрузится, пользователь увидит страшное. Ну, вообще-то если ваши иконки не встроены SVG-спрайтом или инлайном на страницу, то всё тоже может сломаться.

- Говорят, иконочные шрифты ломают доступность. Да, символы в том же Font Awesome явно не те, которые будет адекватно озвучивать скринридер. Но у нас уже есть в браузерах как ARIA-атрибуты, так и content: 'text' / 'alt-text'; для псевдоэлементов.

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

Я же хочу добавить, что добавляя иконочный шрифт на сайт вы сами себя делаете заложниками этого шрифта. Не знаю, как вы, а я вот довольно плохо понимаю, как сделать качественный шрифт, который не содержит внутри кучу мусора, правильно обрабатывается всеми инструментами, умеет в вариативность, цветные глифы, ещё и с текстом выравнивается адекватно, если вставить его в строку. Почитайте хотя бы Романа Шамина в твиттере, как он подходил к разработке шрифта Злых Марсиан — я о таких нюансах даже не задумывался раньше. А с SVG, мне кажется, веб-разработчик всё-таки как-нибудь справится, если ему нужно будет что-то даже радикально поменять.

https://fullystacked.net/icon-fonts/

Эффект полутонов в 3 строчки CSS

Ана Тюдор показывает, как совместить всего три свойства — background, background-blend-mode, filter — чтобы получить красивый эффект рисования однотонными точками (и не только). Вся магия в том, что filter: contrast превращает полутона в превалирующий цвет. Было разблюренное чёрное пятно на белом фоне — получится яркий чёрный кружок с чёткими белыми краями.

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

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

https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/

Эффект матового стекла с backfrop-filter

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

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

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

https://www.joshwcomeau.com/css/backdrop-filter/

Релиз Node.js 22.12.0

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

А случилось важное. С этой версии можно подгружать ES-модули при помощи require(). Раньше для этого надо было запускать ноду с флагом --experimental-require-module, если уж очень надо было. А теперь флаг не нужен, работает по умолчанию.

Если вам наоборот надо выключить от греха подальше приятную новинку, то можно использовать флаг --no-experimental-require-module.

Давно жду этой маленькой, но приятной мелочи. Страдать из-за модулей-немодулей мы в Node.js, кажется, будем вечно, но теперь хоть поприятнее будет совмещать два мира и не бояться получить ошибку при очередном обновлении зависимостей.

https://nodejs.org/en/blog/release/v22.12.0

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

<оффтоп>

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

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

Можно было бы забить и просто постить что угодно — это ж мой канал, что хочу, то и делаю. Но совесть не позволяет. Самого бесит, когда классные блогеры начинают сезон шаринга «очень полезными папками», не очень релевантный каналу.

Поэтому завёл отдельный канал @mefody_work, куда буду постить всякое интересное про свою работу и про то, как я обучаюсь продуктовому менеджменту.

- Это что, канал @mefody_dev всё?
- Нет, не всё. Фронтенд — это то, что мне супер-интересно. И не смогу я просто взять и бросить изучать то, чем занимаюсь больше 15 лет. Так что новости про фронтенд сюда буду продолжать постить.

- И что ты там будешь в новом канале постить?
- Я сейчас активно погружаюсь в роль руководителя продуктов, читаю умные книжки, смотрю полезные видео. Плюс мы с большой классной командой делаем всякое полезное для мира олимпиадного программирования и обучения. Буду рассказывать про это.

- А времени на всё хватит?
- Я пока не планирую в новом канале публиковать новое так же часто, как здесь. К тому же у меня мозг так работает, что мне проще чему-то научиться, пересказав это своими словами. Оказывается, есть люди, готовые читать такие пересказы — вас только в этом канале больше 4.5 тысяч 🙂 Так что посмотрим, но должно хватить.

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

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

</оффтоп>

https://t.me/mefody_work

Многослойный подход к Speculation Rules

Гарри Робертс делится интересным способом добавления эффекта «мгновенности» при переходе по ссылкам.

Сразу покажу его сниппет:

<script type=speculationrules>
  {
    "prefetch": [
      {
        "where": {
          "selector_matches": "[data-prefetch]"
        },
        "eagerness": "immediate"
      },
      {
        "where": {
          "href_matches": "/*"
        },
        "eagerness": "moderate"
      }
    ],
    "prerender": [
      {
        "where": {
          "selector_matches": "[data-prefetch=prerender]"
        },
        "eagerness": "immediate"
      },
      {
        "where": {
          "selector_matches": "[data-prefetch]"
        },
        "eagerness": "moderate"
      }
    ]
  }
</script>

Итак, что здесь происходит.

- <script type=speculationrules> — это подсказка браузеру, что на странице нужно применять Speculation Rules. Если ещё не сталкивались с такими, можете почитать про них тут: https://developer.chrome.com/docs/web-platform/prerender-pages.
- Вместо того, чтобы размечать конкретные ссылки, Гарри предлагает использовать атрибут [data-prefetch]. Если он есть у ссылки, тогда сработает оптимизация.
- Для всех внутренних ссылок без атрибута всё равно включается оптимизация, ресурсы начнут скачиваться по задержке курсора на ссылке или в начале нажатия на ссылку.
- Если атрибут выставлен как [data-prefetch=prerender], то это просьба браузеру отрендерить контент по ссылке заранее, как только он найдёт это правило.

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

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

https://csswizardry.com/2024/12/a-layered-approach-to-speculation-rules/

Дебаг производительности страницы средствами браузера

Читал на Tbilisi JS Meetup #3 доклад про то, как пользоваться вкладкой Performance в девтулзах Chrome. Уже после доклада понял, что я показал некоторые фишки раньше, чем был их официальный релиз в Chrome, потому что привык пользоваться «канареечной» версией браузера. Теперь делюсь и с вами.

https://www.youtube.com/watch?v=CBi-ycq3tuo

Работа с куками — минное поле

Эйприл Кинг наткнулась на интересный баг, когда в веб-приложении замечательно работали куки, которые собирались по принципу cookieNames=${JSON.stringify({ a: "some string" })}, но всё сломалось, когда на сервере начали использовать стандартную библиотеку Go для работы с куками.

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

- В спецификациях в принципе не хватает определённости. По многим необходимым ограничениям прописанных правил просто нет. Причём для сервера и клиента существующие правила местами разные.
- Разные браузеры разрешают использовать внутри кук разные символы. Причём ближе всех к спецификации Safari, но исходный код посмотреть нельзя, поэтому приходится догадываться. Совпадения множества символов нет ни в одной паре движков.
- Ruby и Rust просто разрешают вообще все опасные символы, а Python и Go много что запрещают. При этом поведение разных библиотек разное — где-то символы игнорируются при парсинге, где-то вообще удаляются, где-то библиотека банально падает.
- А вот тут самое интересное. Эйприл делится в статье коротким JS-сниппетом, который кладёт часть функциональности в большом количестве популярных сервисов. Всё, что делает сниппет — пытается установить куку, которая очень плохо парсится разными библиотеками. В итоге ломается не только функциональность, завязанная на куки, но и в принципе обработка любых запросов от клиента.

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

https://grayduck.mn/2024/11/21/handling-cookies-is-a-minefield/

Линтинг CSS при помощи ESLint

Свежее. В репозитории ESLint появился ESLint CSS Language Plugin версии 0.1.0. Он пока супер-простой и вряд ли может стать заменой Stylelint прям сразу, но если у вас для CSS нет супер-жёстких правил в проекте, а вот количество зависимостей в проекте неприятное, то можно и попробовать мигрировать.

Что умеет плагин сейчас:
- Находит дублирование импортов.
- Ругается на пустые блоки.
- Ищет невалидные `@`-правила и свойства.

И всё. Прям маловато. Мне не хватает правил по форматированию кода: единый подход к написанию цветов, контроль за единицами измерения и порядком селекторов по специфичности в коде. Ещё было бы хорошо добавить сортировку самих свойств в блоке (`stylelint-order`).

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

https://www.npmjs.com/package/@eslint/css

Упражнения по curl

Имхо, умение «курлыкать» (дёргать ресуры при помощи `curl`) — супер-важный навык для любых разработчиков, которые работают с API. Джулия Эванс собрала 21 упражнение, которые помогут «набить руку». В первый заход разобраться в аргументах командной строки, во второй — сделать без документации, в третий — закрепить.

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

https://jvns.ca/blog/2019/08/27/curl-exercises/

Как квантовые компьютеры ломают интернет

Видео выходного дня. В нём обсуждается, как квантовые компьютеры могут взломать существующие системы шифрования, используя алгоритм Шора, в течение следующего десятилетия. Я не очень люблю такие «желтоватые» вбросы, но здесь неплохо объясняется, как работает современное шифрование на ключах, почему до квантовых компьютеров это считалось супер-надёжным методом и как алгоритм Шора всё может сломать. Но на самом деле в конце автор рассказывает и о том, что делают криптографы, чтобы всё-таки интернет не накрылся, так что слишком напрягаться не стоит.

https://www.youtube.com/watch?v=-UrdExQW0cs

Верни true, чтобы выиграть

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

https://alf.nu/ReturnTrue

Полезный TypeScript для React

Хороший набор советов, как TS может помочь вам удобнее работать с React-приложениями. Якоб Пэрис делится готовыми типами и лайфхаками.

1. ReturnType — очень удобный способ получить возвращаемый тип функции. Незаменимо для колбеков.

2. Для children лучше использовать ReactNode, который одновременно и ReactElement, и фрагмент, и строка, и число — что угодно, что для реакта может быть адекватным содержимым компонента.

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

4. Вместо того, чтобы перечислять все возможные значения полей типа, лучше делать union над разными вариациями типов. То есть не { verdict: 'ok' | 'not-ok'; isOk: boolean; }, а { verdict: 'ok'; isOk: true; } | { isOk: false; verdict: 'not-ok'; }. Так TS сможет вам помогать разруливать зашитую в типы логику, а не просто подсказывать все возможные значения полей в автокомплите.

Больше советов — по ссылке.

https://www.jacobparis.com/content/react-ts

Anchoreum

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

https://anchoreum.com/

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

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

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

overflow: clip

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

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

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

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

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

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

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

У CSS новый лого

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Tbilisi JS Meetup #3

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

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

https://t.me/tbilisi_js_chat/11654

Полупрозрачность для эффективного 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

CSS Loaders

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

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

https://css-loaders.com/

Doom на CSS

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

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

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

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

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

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

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

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

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

Уроки, полученные от 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/

Цвета в 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/