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.me/tbilisi_js/567

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

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

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

https://t.me/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/

Оптимизация SVG. Гайд для новичков

Постоянно вижу на разных сайтах SVG, которые очень сильно не оптимизированы. Не считаем PNG в base64 внутри SVG, это совсем уж вопиющее, речь скорее про лишние группы, ненужные атрибуты и координаты с точностью до 10 знаков.

Лаура Калбаг делится инструкцией, с чего стоит начать, чтобы SVG на выходе были поменьше размером, не теряя в качестве.

https://penpot.app/blog/how-to-optimize-svg-files-a-complete-guide-for-beginners/

Почему я всё ещё использую jQuery

Андрей Мелихов поделился в редакторском чатике ссылкой на статью «Why I Still Use jQuery», которая мне откликнулась. Мнение автора можете почитать по ссылке, а я хочу поделиться своими размышлениями.

С недавним мажорным обновлением jQuery 4.0 в блогах и твиттерах видел много бурлений на тему: «А зачем оно вообще надо? Кто-то до сих применяет jQuery?»

Для начала: да, кто-то применяет. Я редко, но применяю jQuery, и мне не стыдно. Даже горжусь этим иногда.

1. Если вы думаете, что во всём мире у всех пользователей современные компы с современными ОС и браузерами, то это заблуждение. Как бы мы не хоронили Internet Explorer, во многих государственных учреждениях до сих пор стоят закупленные в райне 2005 компы с Windows XP, где IE нужен как минимум чтобы запустить закупленные в те же годы Silverlight-приложения. Да, доля для какого-нибудь маркетплейса ничтожная, но для разработчиков приложений под такую ЦА Internet Explorer, к сожалению, никуда не делся. Кстати, этим разработчикам jQuery 4.0 уже не пригодится, в нём отказались от поддержки IE.

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

3. Если есть адепты секты React / Tailwind / подставь_своё, то почему не может быть адептов секты jQuery? Некоторые разработчики используют React просто потому, что больше ничего не освоили, при этом быстро собирают сайты, выдают по проекту в день, решают задачи бизнеса и хорошо зарабатывают. Так почему не могут себе такое же позволить jQuery-разработчики? Когда код на jQuery на кончиках пальцев, причём LLM с ним тоже замечательно дружит, а пользователь при этом не страдает — ну и хорошо же.

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

5. DX для простых сайтов типа лендингов лучше, чем у нативных методов. В статье есть хороший пример про AJAX. Код на нём для меня лично более читаемый, чем пачки хуков и провайдеров.

Это не значит, что я призываю всех выбросить React, Vue.js или на чём вы там пишете. Даже наоборот, если ваш рабочий процесс отлажен на удобном вам инструменте и это не портит UX, то нет смысла в 2026 году осваивать и внедрять jQuery. Но это всё ещё инструмент, который в некоторых местах нужен и полезен. Хейтить ручную пилу, что она не достаточно электропила — сомнительно.

Всем добра :)

https://www.docker.com/blog/why-i-still-use-jquery-2025/

CSS Stats

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

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

В общем, в закладки сохранил, с вами тоже делюсь.

https://cssstats.com/

Returns Undefined

Забава вам на вечер. Игра, которая проверяет ваши знания приведения типов в JavaScript. И не только. В пиксельной графике.

Местами есть абсолютно издевательские вопросы, но тем и веселее.

Кстати, проект написан на Svelte, лежит в опенсорсе.

https://ylovits.github.io/returns-undefined/