Interop Feature Ranking

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

Джейк Арчибальд, который теперь работает в команде Firefox, собрал дашборд, который поможет команде Firefox более взвешенно обработать пожелания разработчиков для Interop 2026. Обычно все предложения — это просто ишьи на гитхабе, и для меня, например, всё ещё тайна, как браузеры выбирают из списка то, что точно будут делать. Потому что самые залайканные ишьи часто в Interop не попадают.

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

https://interop-rank.jakearchibald.com/

Next.js 16 (beta)

Если у вас проект написан на Next.js, то сейчас можно поиграться с бетой 16-го мажорного обновления.

- Переключили дефолтный бандлер на Turbopack. По замерам команды сборка проектов ускоряется в 2–5 раз.
- Поддержка React Compiler. По умолчанию не включён. Но добавляет оптимизаций, мемоизаций и автоматизаций при включении.
- Опять изменения в роутинге. На этот раз систему навигации переписали, чтобы эффективнее работать с запрашиваемыми ресурсами и префетчингом. В коде ничего менять не нужно.
- Переделали работу с Caching API. Добавили больше методов. Мне почему-то каждый раз страшно, когда вижу обновления в этой части Next.js. Надеюсь, в этот раз новых секьюрити-багов не насыпали.
- Вместе с React 19.2 приехала работа с View Transitions в реактовом стиле. Можно будет делать красивые переходы между страницами.

Больше подробностей — по ссылке.

https://nextjs.org/blog/next-16-beta

Yandex Cup 2025

Надо же иногда рассказывать, чем я вообще на работе занимаюсь.

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

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

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

https://yandex.ru/cup/frontend

Давай поиграем со шрифтами

Сегодня прочитал на FrontendConf доклад про то, как под капотом устроены шрифты, как браузер с ними работает, что может CSS для красивых и точных фолбеков и как загружать шрифты производительно.

Как всегда, видео опубликую здесь, как только оно появится в общем доступе.

Слайды: https://mefody.dev/talks/fonts-loading/

Дополнительные материалы: https://gist.github.com/MeFoDy/f44aa1d3f027500d1663abe60532f44b

Настоящее и будущее прогрессивного рендеринга изображений

Не смогу в короткой заметке рассказать всё то, что рассказал Джейк Арчибальд в своей статье. Обязательно почитайте её. Или послушайте 497-й выпуск подкаста «Веб-стандарты», где мы подробно обсудили статью голосом. Но постараюсь дать основные выводы.

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

JPEG всё ещё лучший по метрикам размера картинки и времени на декодирование в браузере. WebP тоже хорош, но Safari грузит картинку только целиком.

AVIF не умеет в хороший прогрессивный рендеринг по дефолту, но в статье есть пример, как его научить. Даёт хорошие результаты по размеру файла, но декодирование уже идёт дольше в 2 раза.

Есть надежды на JPEG XL, но он пока не реализован в браузерах полноценно. Точнее, сейчас он включён только в Safari без прогрессивного рендеринга, а в других браузерах — спрятан за флагами.

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

Тем не менее это не повод бежать выключать прогрессивный рендеринг ради экономии 3 kB на картинку. Где-то оно всё же поможет.

https://jakearchibald.com/2025/present-and-future-of-progressive-image-rendering/

Когда «идеальный» код падает

Марек Маркевка пишет простую функцию внутри Next.js-приложения.

const isOwner = (userMail: string, ownerMail: string) => {
  return userMail === ownerMail;
};

Казалось бы, что может пойти не так? Функция же примитивная, для неё тестов много не нужно.

Беда в том, что в месте вызова isOwner(email1, email2) всегда возвращается true. Почему так? Читайте в статье.

На самом деле статья про то, что всякие автоматизации поверх вашего кода нужно понимать и знать. Next.js и React 19 принесли много «полезной автоматики», которая может привести к критичным багам в проде, если не разбираться, во что ваш код на самом деле превращается в итоговом продовом бандле.

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

https://marma.dev/articles/2025/when-perfect-code-fails

View Transitions Feature Explorer

Спецификация View Transition API постепенно разрастается, всё чаще нужно понимать, какие её части в каких браузерах работают.

Брамус собрал демку-подсказчик, которая поможет разобраться. Со ссылками на документацию и релиз-ноуты.

Интересно, что внутри демки тоже используются View Transitions.

https://codepen.io/web-dot-dev/full/EaPbbgx

Harmonizer

Ещё один полезный инструмент от Злых Марсиан.

В интернетах много генераторов палитр можно найти, но здесь — современный, доступный, в виде плагина для Figma и в виде веб-приложения. Цвета — «оклыч» (OKLCH), проверка контрастности — APCA. Есть удобный предпросмотр для тёмной и светлой темы, причём палитра математически подстраивается сама. И сразу же можно выгрузить палитру в виде CSS-переменных и не только.

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

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

https://evilmartians.com/opensource/harmonizer

Примеры использования field-sizing

Есть такая мощная комбинация для элементов форм: field-sizing: content. Напишете так — получите подстраивание размера инпута под контент внутри.

Ахмад Шадид делится различными примерами, где применение свойства выглядит полезным.

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

https://ishadeed.com/article/field-sizing/

Pikaday

Pick a day. Выбери день. Дейтпикер, короче.

Дэвид Бушелл делится гайдом, как собрать хороший дейтпикер для сайта. Спойлер: нативные инпуты.

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

При этом нативные инпуты тоже не идеальный вариант. В разных браузерах разный внешний вид. Нужно писать код руками (о ужас!).

Но в гайде есть примеры, как сделать хорошо. И доступно. И удобно.

Гайд в процессе написания, так что можете присылать автору свои идеи и комментарии.

https://pikaday.dbushell.com/

Форматы изображений: кодеки и инструменты сжатия

Полина Гуртовая продолжает цикл статей про цвета и пиксели. Теперь — про сжатие белочек и прятание вороны.

Полина берёт изображение белочки размером 2733 × 3727 пикселей с глубиной цвета 16-bit. И затем с различными параметрами сжимает эту картинку в JPEG и AVIF. Интересно посмотреть, как наивный подход без изменения параметров сжатия по дефолту отличается от более глубокого манипулирования SSIM и MSE.

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

https://developer.mozilla.org/en-US/blog/image-formats-codecs-compression-tools/

Доклад «Давай поиграем со шрифтами»

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

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

Приятно удивлён, что этот доклад получил топ-1 по оценкам зрителей. Как говорил Тор: «Всё ещё достоин».

https://youtu.be/ktoxhEQqS60

HTML-in-Canvas

Увидел сначала в твиттерах, потом в чатике редакции «Веб-стандартов» ссылочку на пропозал: рендерить HTML внутри Canvas.

«Шо, опять?» — подумал я. До этого были разной степени проработанности идеи уже, через CSS картинку рендерить, через Browser API. И библиотеки есть популярные, которые эту задачу худо-бедно решают. Основная сложность в том, что для решения задачи нужно либо полностью скопировать поведение браузера (дорого и сложно), либо ограничиться каким-то набором поддерживаемых свойств. И весят все существующие решения прилично.

Но в этот раз как будто всё серьёзно. Потому что в Chrome Canary 138.0.7175.0+ уже можно включить специальный флаг, чтобы начать пользоваться апишкой для экспериментов.

const ctx = document.getElementById('canvas').getContext('2d');
const element = document.getElementById('element');
ctx.drawElementImage(element, 0, 0);

Да, вот так просто. Заинтригован. Буду следить за развитием пропозала.

https://github.com/WICG/html-in-canvas

«Самые ненавидимые» фичи в CSS

По результатам опроса State of CSS 2025 тригонометрические функции победили в номинации 'Most Hated'. Всего 9.1% респондентов отметили, что фича прям не нравится, но этого оказалось достаточно, чтобы выйти в топ.

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

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

И да, это Baseline Widely Available, то есть не что-то новое и нигде не работающее, а вполне себе стабильные фичи.

cos() и sin():
https://css-tricks.com/the-most-hated-css-feature-cos-and-sin/

tan():
https://css-tricks.com/the-most-hated-css-feature-tan/

a-():
https://css-tricks.com/the-most-hated-css-feature-asin-acos-atan-and-atan2/

Адвент-календарь HTMHell

Мануэль Матузович в 2021 году запустил первый HTMHell Advent Calendar, в котором собрал ссылки на полезные материалы, видео, статьи и инструменты. В 2022 году этот проект превратился в сборник 24 статей от 24 авторов со всего мира про веб-разработку.

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

https://htmhell.dev/adventcalendar/

Пикселизация при помощи SVG

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

Как оно работает:
Шаг 1. При помощи feFlood, feComposite и feTile создаём паттерн, где однопиксельные белые точки расположены в сетке 10x10.
Шаг 2. При помощи ещё одного фильтра feComposite смешиваем паттерн и картинку. Вместо белых пикселей теперь получаем пиксели с цветами из оригинального изображения. Но всего 1% этих пикселей, остальные чёрные.
Шаг 3. Применяем feMorphology с оператором dilate, чтобы «раздуть» пиксели во все стороны. Можем задавать радиус, чтобы сделать либо эффект мозаики, либо эффект LED-пикселей на чёрной подложке.

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

https://codepen.io/jh3y/pen/pvyZZmO

CVE-2025-55182

Если коротко, обновите Next.js и React.

Если чуть длиннее, то реализация React Server Components содержит критическую уязвимость, которая позволяет выполнять на сервере то, что вы не просили выполнять. Даже если вы не используете RSC.

Затронуло версии:
- Next.js 15.x
- Next.js 16.x
- Next.js 14.3.0-canary.77+
- React 19.0, 19.1.0, 19.1.1 и 19.2.0

Ну и на самом деле зацепило react-server-dom-parcel, react-server-dom-turbopack и react-server-dom-webpack, так что обновлять надо всё, что от них зависит.

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

https://react.dev/blog/2025/12/03/critical-security-vulnerability-in-react-server-components

Привязываем крестик к диалогу

Задача: нарисовать крестик в диалоге (попапе), который визуально выходит за границы диалога. Много видел разных реализаций в разные эпохи, дизайнеры рисуют такие макеты на моей памяти с тех времён, как появились модалки на position: fixed.

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

Дарин Сеннефф предлагает современный вариант с Invoker Command и Anchor Positioning, где кода нужно сильно меньше, а результат вполне себе неплохой.

https://www.darins.page/articles/close-button-hang-dialog

Никаких токенов! Обезопашиваем npm publish

С учётом последних «весёлых» событий в мире npm любые хорошие советы, как работать с пакетами, не будут зря.

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

https://www.zachleat.com/web/npm-security/

Ещё пара уязвимостей в React Server Components

Спустя неделю после просьбы обновить уязвимые библиотеки команда React просит сделать это снова. На этот раз исследователи нашли две уязвимости, которые могут быть крайне неприятны.

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

CVE-2025-55183 — позволяет достать исходный код серверной функции. Опасно, только если вы прямо в коде храните пароли или супер-секретную бизнес-логику пишете прям в серверных функциях.

В общем, снова нужно обновить библиотеки из списка в статье. И фреймворки, у которых они в зависимостях (особенно Next.js).

Интересно, как много команд завело встречку в календаре обсудить «Переезд на <не-реакт, подставить нужное>».

https://react.dev/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components

Голосование за фичи веб-платформы

WebDX Community Group предлагает «новый» способ влиять на вес фичей в бэклогах браузеров. Теперь в виджетах со статусом Baseline в разных источниках рядом с названием фичи появился счётчик лайков. Когда вы на него кликните, то сможете перейти в ишью на гитхабе, где тоже можете лайкнуть, если вам фича откликается и вы её хотите начать применять.

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

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

Полезное изменение. Любой сигнал от комьюнити лучше, чем его отсутствие.

https://web.dev/blog/upvote-features?hl=en