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

CSS 2025: Baseline Widely Available — тирлист

Ребята из HTML Academy позвали вечером в формате лайва обсудить фичи CSS, которые в этом году перешли в статус Baseline Widely Available. Знаю, что Лёша Симоненко подготовил тирлист, будем распределять их по мощности. Подозреваю, не обойдётся без аниме :)

Забегайте в 20:00 пообщаться через комментарии.

https://www.youtube.com/live/ASLry05R8T8

Web Performance Calendar 2025

Ещё один адвент-календарь для фронтендеров. На этот раз про перфоманс.

Уже есть 22 статьи, ещё парочка доедет в течение ближайших дней. Core Web Vitals, инсайты после исследований перфоманса, оптимизация трафика, неблокирующий рендеринг картинок, соточка в Lighthouse, полезные инструменты и прочие темы для фанатов быстрого веба.

https://calendar.perfplanet.com/2025/

RSC Explorer

После всяких CVE-2025-55182 и прочих «маркетинговых кампаний» вокруг React Server Components всё чаще видел в твиттерах запрос: «Вот было бы круто иметь удобный визуализатор тех самых RSC-запросов, чтобы дебагать».

И вот Дэн Абрамов как раз делится таким инструментом под названием RSC Explorer.

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

В репозитории написано, что проект полностью навайбкожен.

https://overreacted.io/introducing-rsc-explorer/

Tbilisi JS XMas Stream 2025

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

ПыСы. Будьте внимательнее с таймзоной ;)

https://t.iss.one/tbilisi_js/567

Дизайнтюа и Фронтендюэль. Про вариативные шрифты

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

Мне написал наш слушатель и поделился ссылкой на свой блог, где в 21 посте тема разбирается куда более качественно, чем мы в подкасте наговорили, на мой субъективный взгляд. Неистово рекомендую к прочтению.

https://t.iss.one/designtua_frontenduel/73

!important и кастомные свойства в CSS

Сегодня я узнал, что когда вы пишете --color: orange !important; в CSS, то это не указание строки, которая потом распарсится как цвет, причём очень важный.

Крис Койер в статье поясняет, что на самом деле !important — это указание каскаду отработать на свойстве, пусть и кастомном. Парсер отделяет импортант от строки. Причём логично ведь, у нас же не CSS Custom String, а CSS Custom Property, значит и каскад со специфичностью они ломать не должны. Но что-то я сначала не понял, а потом как понял!

https://frontendmasters.com/blog/important-and-css-custom-properties/

Проектирование сложных UI

Виталий Фридман поделился материалами курса про проектирование по-настоящему сложных UI. Когда вам нужно собрать полноценное приложение с множеством контролов, панелек, сценариев, а не просто сайт.

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

https://smashed.by/maven26

Нет robots.txt — нет сайта в выдаче Google

Внезапное. Алан Смит делится интересным кейсом. В какой-то момент органический трафик из Google на сайт ушёл в 0. И причина, скорее всего, в том, что у сайта нет robots.txt — файла в корне сайта, который должен давать инструкции роботам, куда можно ходить, а куда нельзя ходить.

Дальнейший ресёрч показал, что вообще-то в поддержке есть целое видео про этот нюанс.

Честно говоря, я с таким никогда не сталкивался, потому что у меня для каждого личного проекта robots.txt на автомате копируется из предыдущего. Но удивительно, что если гуглобот не получил явное разрешение погулять по сайту, то он не наглеет и действительно не идёт гулять. Логично. Но удивительно.

https://www.alanwsmith.com/en/37/wa/jz/s1/