mefody.dev

Калькулятор метрик шрифта для font-size-adjust

Есть такое замечательное и мощное свежее свойство для шрифтов, font-size-adjust. Оно позволяет задавать отношение некоторого размера из свойств шрифта к самому размеру шрифта.

Попробую объяснить на примере:
• Допустим, у вас есть шрифт Roboto.
• Его прописные буквы по высоте составляют 0.713 от размера шрифта.
• Его строчные буквы по высоте составляют 0.531 от размера шрифта.
• Получается, если размер шрифта — 72px, то cap-height будет 51.336px, а ex-height — 38.232px.

Теперь, если вам нужно на момент загрузки шрифта Roboto показать фолбек системным шрифтом, вы можете написать font-size-adjust: ex-height 0.531 — и строчки после загрузки прыгать не будут. Или если в одной строке нужно показать два разных шрифта зачем-то, то тоже можно сделать красиво.

Откуда я взял числа для вычислений? По ссылке ниже. Простая страничка, работает сугубо на клиенте. Загрузили шрифт — получили метрики. Удобно. Вот бы ещё PWA из неё собрать — вообще счастье было бы.

https://clagnut.com/sandbox/font-size-adjust.html

Что на самом деле важно в разработке?

Видео выходного дня. Вова Гриненко на ЯЛФ в этом году прочитал шикарный доклад про то, что так или иначе волнует каждого разработчика. Философское размышление с добротной порцией фирменного юмора.

https://youtu.be/nBbTeDUYgyU

Axios скомпрометирован

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

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

Затем убедитесь, что нигде в пайплайне не используете npx — в нём у вас контроль минимальный. К слову, npx часто используют для работы с MCP, привет современной разработке. Если npx ну очень нужен, перейдите на --no --offline.

А потом внимательно прочитайте статью и прислушайтесь к советам из неё. Кстати, ещё можно перейти на pnpm, он по умолчанию более требовательный к любым зависимостям.

https://socket.dev/blog/hidden-blast-radius-of-the-axios-compromise

Шрифт-график Datatype

Крайне интересная находка. Вариативный шрифт Datatype, который превращает инструкции текстом в графики. Например, {l:15,45,90,30,75,20,85,95} — линейный график, {b:30,70,50,90} — диаграмма столбиками, {p:65} — круговая диаграмма. Собсна, пока всё. Вся магия в лигатурах.

Из минусов вижу только то, что копировать такой текст, как и читать его скринридером, будет тем ещё приколом. И если доступность починить довольно легко, то с копированием не придумал, что можно сделать.

https://franktisellano.github.io/datatype/

Два круга, одна стрелка и Anchor Positioning

Темани Афиф продолжает экспериментировать с различными свежими API, чтобы исследовать их пользу на практике.

Задача: соединить два круга стрелкой. Круги можно двигать при помощи JS. Для усложения над стрелкой нужно выводить расстояние между кругами, без JS. И двигать круги можно вообще как угодно. Темани по шагам, демка за демкой приходит к реализации.

А потом ради интереса реализует на CSS алгоритм нахождения кратчайшего пути в графе. Потому что может.

Когда-то давно у меня был доклад с названием «CSS — язык программирования». Кажется, пора с него сдуть пыль и переделать под современные реалии.

https://frontendmasters.com/blog/two-circles-one-arrow-and-anchor-positioning/

Flexbox Masonry Layout

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

На самом деле получился не совсем masonry, а только очень частный его случай. И на узких экранах подход ломается. Но для реализации фотогалереи с превьюшками, честно говоря, идея очень интересная, к тому же не нуждающаяся в JavaScript — всё на CSS-переменных и небольших `atan2`-хаках.

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

https://frontendmasters.com/blog/flexbox-masonry-layout-explained-with-math/

Browser Score

Страничка от Лии Веру, которая проверяет, какие фичи CSS ваш браузер поддерживает. Раньше это называлось CSS3 Test, но CSS3 — устаревший термин, даже в вакансиях вижу его всё реже.

Практическое применение у него есть полезное как минимум для процессов поддержки. Можно просить пользователя, у которого что-то визуально сломалось, открыть страницу и через девтулзы сделать её скриншот полностью (если пользователь знает, что такое девтулзы). Это всё равно проще, чем пытаться на машине разработчика имитировать все браузеры мира.

https://browserscore.dev/

Книга ‘Accessibility for Everyone’

У меня эта книга есть в бумажном виде довольно давно. Крайне полезный источник знаний про доступность для веба и не только. Спасибо Лоре Калбаг.

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

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

https://accessibilityforeveryone.site/

NES.css

Нашёл визуальное наслаждение. CSS-библиотеку, которая превращает интерфейс в 8-битную игру. Олдскулы радуются.

Проект, к сожалению, не обновлялся с 2021 года. Но это не мешает вдохновиться и форкнуть, если очень нужно.

https://nostalgic-css.github.io/NES.css/

Будущее карьеры разработчика

Внезапно не про веб, а про профессию в целом.

Маттео Коллина (легенда) поделился своим видением, что изменится в нашей работе и в карьерных возможностях будущих новичков.

• Фундаментальные знания стали ещё важнее. Так как LLM может взять на себя написание кода, кто-то должен ревьюить то, что оно напишет. И заранее можно эффективнее задачи ставить, если чётко формулировать, со знанием дела.

• Стажировки — самый правильный способ вкатиться в IT. Джуны с рынка не интересны, компаниям интереснее брать мотивированных новичков, которых можно обучить тому самому фундаменту. Чтобы с LLM работать эффективнее. Рынок сейчас принадлежит компаниям, правила устанавливают они.

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

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

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

https://adventures.nodeland.dev/archive/the-future-of-the-software-engineering-career/

Холивар про Tailwind

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

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

https://t.me/webstandards_ru/7667

Navigation API — теперь во всех браузерах

Как же я жду, когда эту апишку можно будет смело тащить в продакшен!

Как мы до сих пор работали со SPA:
• подписываемся на клики по ссылкам;
• или пытаемся вклиниться в History API;
• по клику делаем preventDefault;
• имитируем работу браузера, но через JS (ходим за данными, собираем компоненты, рендерим);
• обязательно руками обновляем window.history.

И потом ещё спорим на конференциях, какая библиотека для роутинга самая правильная.

Navigation API переворачивает процесс в правильную сторону:
• пользователь как-то изменяет URL страницы (ссылка, JS, серверный заголовок);
• мы подписываемся на событие изменения урла;
• вклиниваемся в ивент, если нужно, через event.intercept;
• имитируем работу браузера (ну а как без этого).

Кода меньше, урл становится единым источником правды, не толкаемся в History API с самим браузером. Хорошечно же!

Осталось дождаться 2.5 года, когда фича станет Widely Available. И когда фреймворки это внутрь себя затащат, чтобы нам меньше думать нужно было.

https://web.dev/blog/baseline-navigation-api

Dictionary Compression. Здесь и невероятно хорош

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

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

А что, если доставлять на клиент только diff, как при коммитах? Пусть старая версия бандла — это основа, клиент делится с сервером: «Смотри, у меня есть вот такая версия основы», а сервер отправляет на клиент только то, что нужно для построения новой версии бандла.

Больше всего удивился из статьи тому факту, что сама идея к нам могла прийти в пользование в вебе ещё в начале 2000-х, но в Internet Explorer и IIS был не совсем верно реализован алгоритм deflate, а потом в 2012 случился казус с уязвимостью CRIME… В общем, не так-то просто внедрять то, чем могут пользоваться все. Зато в 2026 вы можете начать экономить до 95% трафика, если правки у вас небольшие, а кэширование настроение верно.

https://httptoolkit.com/blog/dictionary-compression-performance-zstd-brotli/

Смотрим и комментируем

Это не призыв, это название нового подкаста. Олег Мохов, широко известный в узких кругах, решил стартовать свой подкаст, где вместе со спикерами разбирает их же доклады по полочкам.

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

Хм. Получается, всё-таки призыв. Хорошее название.

https://t.me/teamleading/486

Спрайты в вебе

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

Но интересно в демках показано, как можно ту же технику применять для анимаций внутри интерфейсов. Прямо поверх тега <img>. Сохранил в закладки.

https://t.me/webstandards_ru/7656

Красивый Select

Адам Аргайл выкручивает современные возможности CSS на максимум вокруг appearance: base-select. Напомню, в Chrome уже можно стилизовать выпадушки при помощи CSS, не создавая полную копию на дивах и спанах. А другие браузеры в целом смотрят позитивно на эти эксперименты и готовы в будущем подтянуть себе реализацию по более устаканившимся спецификациям.

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

https://nerdy.dev/nice-select

Гайд по Anchor Positioning

Anchor Positioning — это декларативный способ описать визуальную привязку одного элемента к другому на странице. Тулптипы, подсказки, сноски, выносные элементы — всё это можно реализовать относительно легко при помощи Anchor Positioning API.

Рома Ахмадуллин в Доке написал подробную статью, как работать с этим однозначно полезным API. Много интерактивных демок.

https://doka.guide/css/anchor-positioning-guide/

Собственная тема для VS Code

Зелл Лью делится опытом написания и публикации собственной темы для VS Code. Пошагово и с подробностями.

В начале статьи Зелл пишет, что ему понадобилось всего 6 часов на создание рабочей темы и пара дней на «полировку».

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

https://css-tricks.com/no-hassle-visual-studio-code-theming-building-an-extension/

Я 💛 Фронтенд 2026

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

Трансляция стартует в 11:00 по минскому времени: https://www.youtube.com/live/Da3cJi7RDPg

Программа и подробности тут: https://events.yandex.ru/events/ya-love-frontend-2026/

Эффект эластичного текста на чистом CSS

Для начала, это эффектно и красиво.

Темани Афиф собирает демку, в которой за текст можно потянуть курсором мышки — и он потянется в правильном направлении, а потом пружинкой отскочит обратно. Выглядит «вау», если знать, что там нет JavaScript. В статье есть пошаговый разбор, как достигнуть такого эффекта.

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

https://frontendmasters.com/blog/how-to-create-a-css-only-elastic-text-effect/