#дайджест недели

Понедельник
Jhey показал эффект с подсветкой краёв карточек по движению мыши — координаты курсора, CSS и SVG-фильтры. Аккуратная демка, чистая реализация.
https://t.me/htmlshit/3914

Вторник
virtua — библиотека для виртуализации списков с динамическими размерами, бесконечным скроллом и поддержкой популярных фреймворков. Быстрая и универсальная.
https://t.me/htmlshit/3916

Среда
ESLint Plugin De Morgan переписывает отрицания по законам де Моргана. Два правила, автофикс, без зависимостей — мелочь, но делает логику чище.
https://t.me/htmlshit/3917

Пятница
Хороший буст к скорости тестов: заменить ts-jest на @swc/jest. SWC работает быстрее за счёт native-кода и отсутствия проверки типов — проекты ощутимо ускоряются.
https://t.me/htmlshit/3919

#статья дня

Google в очередной раз доказал всем, что дизайн — это не про них.

Если вы, как и я, понимаете, что на этой иллюстрации не так — обнимемся.

Если же нет, или хотите понять больше — есть всё ещё пока лучшая в русскоязычном сегменте интернета статья Оптическое выравнивание и пользовательские интерфейсы.

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

Всё там :) Очень рекомендую.

Кстати, раз уж снова подняли эту тему, маленький лайфхак для дизайнеров: размойте иконку и сразу станет понятно, сбалансирована она, или нет. Вот как тут.

#design #alignment #icons

#поделись дня

Я в этом году просрал все сроки поиска интересных адвент-календарей по коду и разным статьям.

Поэтому, делитесь, котаны. Кто что читает в этом декабре?

Я вот только календарь от HTMHell сходу вспомнил: https://htmhell.dev/adventcalendar/, одна статья в день.

Ну и, пожалуй, ещё https://adventjs.dev/en, возможно, я даже в него ещё запрыгну и буду с вами делиться.

Показывайте ваши!

#advent

#молния дня


В React обнаружили критическую уязвимость в механизме серверных компонентов (React Server Components). Из-за ошибки в том, как React разбирает входящие данные, сервер может попытаться выполнить вредоносный объект как часть своей логики. Достаточно специально подготовленного HTTP-запроса — и код на сервере окажется под контролем не того, кто его писал.

Это не проблема конкретного фреймворка. Под удар попадает любой проект, где используются RSC: Next.js, Remix (с RSC-вставками), любые кастомные серверные интеграции, экспериментальные рантаймы, кастомные бандлы — неважно. Если у вас есть React Server Components, риск реальный.

Уязвимы версии пакетов react-server-dom-* — 19.0.0, 19.1.0, 19.1.1, 19.2.0.
Официальное описание: https://react.dev/blog/2025/12/03/critical-security-vulnerability-in-react-server-components

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

Патчи уже вышли: React закрыл её в версиях 19.0.1, 19.1.2, 19.2.1.

Если у вас Next.js, то актуальные безопасные релизы: 15.0.5+ и 16.0.7
(детали: https://nextjs.org/blog/CVE-2025-66478)

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

Кстати, вот и технический разбор как проблемы, так и патча: https://www.ox.security/blog/rce-in-react-server-components/

#react #rsc #next

#ссылка дня

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

Кстати, в X прямо сейчас очередной напоминающий жабогадюкинг срач как раз на эту тему.

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

Чаще всего они сидят в условиях, близких к идеальным. На стуле, перед большим монитором. И рисуют, не знаю, приложение для оплаты парковки. Он или она молоды и здоровы, мышка твёрдо лежит в руке. Идиллия.

Как по их представлению человек будет пользоваться приложением? Припарковался, устроился поудобнее и оплатил?

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

И так с любым проектом. Думать надо.

Собственно, вот и ссылка на сегодня: https://a11ymyths.com/ru/

Мифы о доступности на разных языках. Всем читать, котаны.

#a11y #бородач

#игра дня

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

Проект родился как университетская учебная разработка: автор сделал GameShell для студентов, которым нужно было быстро освоить базовые Linux-команды. Идея сработала — вместо скучных лекций студенты начали проходить практические миссии, используя реальные инструменты командной строки.

GameShell полностью open-source, работает на Linux, macOS, есть образ Docker. Установка минимальна: скачал скрипт, запустил — и получил тренировочное окружение с сохранением прогресса.

Каждая задача — маленькая текстовая «комната» из старых приключенческих игр, только с реальными командами.

Очень круто, однозначно рекомендация.

#bash #game #console

#заметка дня

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

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

Но нас тут заинтересовало, зачем Cloudflare добивает стандартную страницу ошибки комментариями?

<!-- a padding to disable MSIE and Chrome friendly error page -->

...не, ну ок, вроде оно само говорит, зачем. Но почему?

Дело в том, что если страница ошибки короче определённого минимального размера (обычно 512 байт), браузер скрывает её и показывает свою стандартную ошибку вида «This page cannot be displayed».

Очевидно, это не шибко-то и удобно: скрывает реальную причину проблемы, мешает автотестам. Собственно, в Internet Explorer была настройка скрытия дружелюбных страниц ошибок, а вот в Chrome так никогда и не сделали.

Да-да, динозаврик — это вот оно, оттуда. Очень весело, очень бесполезно.

Вот даже проблему в трекере подняли лет 15 назад: https://issues.chromium.org/issues/40361889, без подвижек.

На самом деле, добитие комментариями, конечно, не решение Cloudflare. Это работа сервера nginx: https://hg.nginx.org/nginx/file/release-1.6.0/src/http/ngx_http_special_response.c

Одобряем такое поведение, или динозаврик получше будет, котаны?

#nginx #cloudflare #error

#такое дня

Отлично провёл вечер в компании шестигранных ключей. Засор чистил-с.

#фишка дня

Не совсем про разработку, но достаточно интересно.

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

А он чёрный. Элементы UI и... чёрный экран.

— DRM, — подумал Штирлиц.

И таки да, DRM. Защита авторских прав содержимого.

Виральность? Не, не слышали.

Технология, по которой работает DRM на стримингах, называется EME: Encrypted Media Extensions. Разработана совместно Netflix, Google и Microsoft.

Есть хорошее описание её работы: https://hsivonen.fi/eme/

Encrypted Media Extensions (EME) — это JavaScript API для <video> и <audio>, предназначенное для работы с DRM-защищенным контентом. Для расшифровки требуется Content Decryption Module (CDM), который доверен правообладателями и скрывает определенные данные от пользователя. Браузер при этом считается ненадежным.

CDM может быть встроен в браузер, загружен отдельно или реализован на уровне ОС и железа. Он управляет ключами для расшифровки контента. В EME есть учебная система Clear Key, но она не предназначена для коммерческого использования.

CDM может работать по-разному: просто расшифровывать данные, расшифровывать и декодировать видео в браузере, передавать декодированные кадры напрямую ОС или работать с GPU, скрывая пиксели даже от системы. EME определяет только интерфейс API, оставляя детали DRM разработчикам.

Так вот, к фишке дня. В Firefox EME не реализованы, скриншоты делаются без проблем. А в Chrome — работают на GPU, иначе ваши процессоры сошли бы с ума.

А это значит, что достаточно (по крайней мере пока) отключить аппаратное ускорение графики. И, вуаля, скриншоты снова можно делать!

Очевидно, с развитием железа и это скоро станет невозможно. Останется только аналоговая брешь (крутое название для экранки, не правда ли?).

#drm #eme #api #бородач

#ссылка дня

CSS Wrapped 2025 от разработчиков Google Chrome!

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

Пластилиновую!

В этом году в CSS сильно прокачали готовые элементы: диалоги стали умнее, поповеры — гибче, а <select> наконец можно нормально стилизовать. Появились и новые мелочи вроде скролл-кнопок и скролл-маркеров, которые позволяют делать аккуратные нативные галереи без лишнего JS.

Но не всё — в Safari :(

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

Отдельная тема — сахар. Это всё, что делает код чище: новые функции вроде if() и shape(), более понятные размеры, формы и условия.

Всё очень приятно оформлено, заходите хотя бы просто посмотреть: https://chrome.dev/css-wrapped-2025/

#css #google #chrome

#дайджест недели, а точнее, двух

Понедельник

Разбор оптического выравнивания и причин, почему иконки выглядят смещёнными даже при точном центрировании. Про барицентр фигур, автоматизацию и простой способ быстро проверить баланс иконки.
https://t.me/htmlshit/3922

Среда

Обсуждение адвент-календарей по разработке и статьям.
https://t.me/htmlshit/3923

Четверг

Критическая уязвимость в React Server Components, позволяющая выполнить код на сервере через специально сформированный запрос. Затрагивает все проекты с RSC, патчи уже выпущены.
https://t.me/htmlshit/3925


Воскресенье

Текст о доступности в реальных условиях использования, а не в идеальной среде. Разбор распространённых мифов и причин, почему a11y касается всех.
https://t.me/htmlshit/3927

Понедельник

GameShell — обучающая консольная игра для изучения Unix-команд в формате текстового квеста. Подходит для практики базовой работы с терминалом.
https://t.me/htmlshit/3928

Вторник

Почему серверы специально увеличивают размер страниц ошибок. Коротко о поведении браузеров, стандартных заглушках и решении, которое использует nginx и Cloudflare.
https://t.me/htmlshit/3930

Среда

Как DRM в стриминговых сервисах блокирует скриншоты через EME и GPU. Почему в Chrome кадры чёрные и при чём тут аппаратное ускорение.
https://t.me/htmlshit/3932

Пятница

CSS Wrapped 2025 — обзор ключевых изменений в CSS за год: нативные компоненты, скролл, анимации и новые функции языка.
https://t.me/htmlshit/3933

#статья дня

Одна из самых сложных и плохо контролируемых проблем в интерфейсной типографике — встроенные вертикальные метрики шрифтов (ascent, descent, line gap).

Из-за них текстовый элемент по box-модели почти никогда не совпадает с тем, как текст выглядит визуально: появляется лишнее пространство сверху и снизу, которое мешает точному вертикальному выравниванию.

Для этого в Chrome и Safari не так давно появился text-box-trim — CSS-правило, позволяющее обрезать это дополнительное пространство и привести текстовый бокс к реальным границам глифов:

.text {
text-box: trim-both cap alphabetic;
}

А вот и ссылка на статью в девблоге: https://developer.chrome.com/blog/css-text-box-trim

В Firefox пока не работает совсем.

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

text-box-trim — это попытка решить задачу на уровне браузера и сделать точную вертикальную типографику частью нативного CSS.

Давно пора или классическая типографика — наше всё, котаны?

#css #trim

#статья дня

SourceCraft обновил ИИ-агента — Code Assistant теперь помогает с безопасностью кода и командной работой.

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

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

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

Хороший пример того, как ИИ перестаёт быть «магией» и становится инструментом ежедневной разработки.

#ai #code #security

#заметка дня

Минутка удивительно полезной информации!

Почему Vite.js стартует на порту 5137, а не на 8000, 8080, 8888 и прочих стандартных для разработки веба портах?

Потому что, следим за руками:

V — 5
I — 1
T — 7
E — 3

Я уже вижу, как вы потянулись к клавиатуре чтобы написать: «Пять и один-то понятно, римские. А 7 и E тут при чём?»

Так вот, котаны, это называется leetspeak. Пруф: https://en.wikipedia.org/wiki/Leet

Просто 7 похожа на T, а 3 на E. А ещё всё это вместе похоже на SITE :)

Кстати, Evan You, собственно, создатель Vitejs, Vitest, и Vue.js, подтвердил это достаточно давно.

Какие ещё будут примеры, помимо 1337? :)

#web

#фишка дня

Вот как вы чаще всего распространяете свои компоненты для всякого рода тулбаров? Наверняка, группы кнопок или, например, кнопка и текстовое поле будут в своём контейнере.

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

Но есть решение! Правило display: contents буквально развернёт контейнер и предоставит внешнему потоку полный контроль над компонентами внутри. Это реально самая мозговзрывающая вещь на сегодня.

Демо: https://codepen.io/alinaki/pen/abeOjKw

Статья на тему от Ахмада Шадида: https://ishadeed.com/article/display-contents/

Пугаться данных на caniuse.com не надо: смотрите сноску о доступности.

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

Да, ваш любимый TailwindCSS тоже в курсе: https://tailwindcss.com/docs/display#contents

Спасибо Весу Босу за напоминание об этом.

#css #display #contents #бородач

#статья дня, даже две

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

Речь про Sanitizer API — нативную замену innerHTML, которая сразу учитывает XSS и не оставляет это на совести разработчика. Вместо работы со строками используется setHTML(): HTML парсится один раз, очищается и сразу вставляется в DOM.

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

API по умолчанию намеренно жёсткий. Удаляются <script>, <iframe>, <object>, <embed>, SVG-элементы, style, link, все form-теги, кастомные элементы, комментарии и любые on*-атрибуты — по факту остаётся минимум безопасного HTML, остальное надо разрешать вручную через конфигурацию. Подробности: https://olliewilliams.xyz/blog/sanitizer/

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

И вот, собственно, статья о том, как все вместе приходили к упрощению API: https://frederikbraun.de/why-sethtml.html

Ссылки на ишью с намереними релизнуться:
https://groups.google.com/a/chromium.org/g/blink-dev/c/iu3VwMotMBc
https://groups.google.com/a/mozilla.org/g/dev-platform/c/9ddjRQbYKuk

Актуальный Sanitizer API в соответствии с новой уже есть в Firefox Nightly и в Chrome Canary за флагом. Ожидаем в 145 Хроме и 148 Лисе.

А вот Safari как обычно. Полифиллим, котаны?

Ах, да! MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API/Using_the_HTML_Sanitizer_API

#sanitizer #xss

#фишка дня

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

Всего-то достаточно загрузить свою аватарку или реакцию в HDR и начать выжигать глаза всем обладателям макбуков и вообще ноутбуков с экранами, поддерживающими расширенный динамический диапазон цвета. Вот: https://t.me/htmlshit/3594

И от этого, кстати, очень страдают соцсети, например, пресловутый твиттер, aka X. Стоит одному умнику загрузить свою аватарку в HDR — всё, вся страница сереет, а он один сверкает.

Но, как оказалось, на это есть решение! В CSS есть правило, которое позволяет в том числе нормализовать динамический диапазон:

dynamic-range-limit: standard;

...X ещё добавляет

filter: brightness(1);.

Забавно, что такая аватарка — у недавно пошедшего войной чуть ли не на весь интернет сооснователя Wordpress.

В общем, если вы не осилили нормализацию изображений в моменте загрузки — пользуйтесь :)

Работает в Chrome 136 и далее и Safari 26 и далее. А пользователи Firefox пока страдают.

#css #hdr

#заметка дня

Вам всем наверняка знакома раскладка masonry — «кладка каменщика». Собственно, название она получила от Masonry.js, библиотеки сетки, влияние которой на веб сложно переоценить.

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

Собственно, в 2020 Firefox стал первым браузером, внёс масонри в display: grid под флагом и так и сидел все эти годы. А Chrome 140 (и соответствующий Edge) так и назвали — display: masonry.

Масонам это не понравилось.

Потому в стандарт пошло название grid-lanes. Да-да, display: grid-lanes, частью grid это так и не стало (и очень хорошо).

Короче, к чему это я. Буквально три недели назад команда WebKit смёрджила в стабильную базу PR, который включает поддержку grid-lanes. И, соответственно, выпустила Safari Technology Preview 234 под соответствующую новость в блоге: https://webkit.org/blog/17660/introducing-css-grid-lanes/

Там очень подробная статья о том, как и когда применять, какие режимы есть, какие настройки.

Chrome и Firefox тоже уже вносят изменения в свой код, так что Masonry в Baseline не за горами!

P. S. кстати, скачивать разные ранние версии WebKit задолго до выхода очередной версии Safari TP можно отсюда: https://webkit.org/build-archives/

#css #masonry

#фишка дня

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

Но у аккордеонов есть один очевидный минус: поиск по странице не подсветит найденное. Ну ещё бы, оно же скрыто.

Так вот, Chrome очень старается это исправить и именно поэтому начиная со 102 версии у атрибута hidden есть уникальное для Chrome значение until-found, говорящее само за себя.

Ссылка на блог разработчиков: https://developer.chrome.com/docs/css-ui/hidden-until-found

Сразу пример, если кому-то в лом на статью лезть: https://codepen.io/web-dot-dev/pen/JjMxmom

Попробуйте поискать слово, которое скрыто в каком-либо из аккордеонов.

Ну и для браузеров, которые не поддерживают этот атрибут, либо для иных UI-виджетов, они предлагают проверять поддержку события onbeforematch:

if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}

Довольно странное решение, если честно, но очевидно, что проблема существует и делать с ней что-то надо.

#chrome #hidden #бородач