Соглашения именования дизайн-токенов: практическое руководство. Стюарт Робсон рассказывает, как называть токены, которые масштабируются между командами и продуктами. Он разбирает три уровня токенов (примитивы, семантические и компонентные) и пять подходов к именованию, от категория-свойство-модификатор до многоуровневых структур. Ключевые принципы: единообразие важнее идеала, ясность важнее краткости, смысл важнее визуального описания. #design #component

https://www.alwaystwisted.com/articles/design-token-naming-conventions

Синтаксис диапазонов в медиавыражениях. Ахмад Шадид показывает, как классические min-width и max-width приводят к ошибкам на совпадающих брейкпоинтах — например, два элемента скрываются на одних и тех же 300px. Решение: синтаксис диапазонов с операторами <=, >=, > — он поддерживается во всех браузерах с марта 2023. Код понятнее, без 1px сдвигов, и та же логика работает для выражений от контейнера. #css #layout

https://ishadeed.com/article/range-syntax/

Новинки Chrome 148. CSS-выражения от контейнера могут срабатывать только по container-name, без container-type. Функция at-rule() в @supports проверяет поддержку CSS-директив. Элементы <video> и <audio> получили loading="lazy" для отложенной загрузки. Prompt API даёт доступ к локальным языковым моделям ИИ. Также добавлены Web Serial API на Android, режим Immediate UI в Web Authentication, text-decoration-skip-ink: all и revert-rule. #chrome #browser

https://developer.chrome.com/release-notes/148

Использование safe-area-inset для безопасных раскладок на мобильных. У современных телефонов есть вырезы, камеры и плавающие кнопки, которые перекрывают интерфейс, если их не учесть. В блоге Polypane разбирают env(safe-area-inset-*), зачем нужен viewport-fit=cover в <meta viewport>, как комбинировать отступы с calc(), а также новые safe-area-max-inset-*, которые не меняются, даже когда адресная строка прячется при прокрутке. #css #layout

https://polypane.app/blog/using-safe-area-inset-to-build-mobile-safe-layouts/

От React к нативному вебу с nanotags: миграция, сэкономившая 100 Кб. Павел Гринченко рассказывает, как они перенесли маркетинговый сайт на Astro с React и Ark UI на нативные веб-компоненты, сократив JavaScript на 100 Кб. Nanotags — обёртка размером менее 2,5 Кб с валидацией пропсов, типизированными рефами и автоматической очисткой, а также подключаемыми ARIA-паттернами. В связке с nanostores этого хватает для меню, модалок и переключателей. #webcomponents #react

https://evilmartians.com/chronicles/from-react-to-native-web-with-nanotags-a-migration-that-saved-100kb

Выпуск №526. Алексей Симоненко, Никита Дубко и Вадим Макеев про Chrome 148, Blink для Apple tvOS, Node.js 26, No-Vary-Search и Local-first.

— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте

00:01:38 Новинки Chrome 148
00:45:29 Blink для Apple tvOS
00:59:37 Релиз Node.js 26
01:18:59 No-Vary-Search сохраняет кэш
01:36:42 Мечта о Local-first

Как управлять бесконечными CSS-анимациями. В первой части из двух Темани Афиф показывает, как ускорять, замедлять и разворачивать бесконечные CSS-анимации налету. С помощью animation-composition: add анимации накладываются, CSS-переменные задают длительность и коэффициент скорости, а функции abs() и sign() позволяют управлять скоростью и направлением независимо — без перезапуска анимации. #css #animation

https://frontendmasters.com/blog/how-to-control-infinite-css-animations-part-1-of-2/

Новинки WebKit в Safari 26.5. Джен Симмонс представляет псевдокласс :open для стилизации открытого состояния <details>, <dialog>, <select> и <input>, ключевое слово element-scoped для функции random(), color-interpolation с linearRGB для SVG-градиентов, ToggleEvent.source для popover API и новый Origin API для структурного сравнения источников. Плюс 63 багфикса в SVG, WebRTC, сети, редактировании, anchor positioning и анимациях по прокрутке. #safari #browser

https://webkit.org/blog/17938/webkit-features-for-safari-26-5/

Скоро мы наконец сможем отправить JavaScript в ShadowRealm. Мэт Маркиз разбирает предложение TC39 ShadowRealm, создающее изолированные контексты исполнения с собственными глобальными объектами в том же потоке, что и основной хост. Двух методов evaluate() и importValue() достаточно, чтобы изолировать сторонние скрипты, рекламу и тесты без загрязнения основного окружения. Сейчас на стадии 2.7, в браузерах пока нет. #js #ecmascript

https://css-tricks.com/soon-we-can-finally-banish-javascript-to-the-shadowrealm/

HTML Sanitizer API. Ахмад Альфи рассказывает о новом браузерном API для защиты от XSS без DOMPurify. Безопасные методы setHTML и parseHTML всегда удаляют опасное содержимое, а setHTMLUnsafe и parseHTMLUnsafe уважают ваши настройки. Списки разрешённых и запрещённых элементов и атрибутов дают гибкий контроль. Подходит для комментариев, WYSIWYG-редакторов и предпросмотра Markdown, но серверная санитизация по-прежнему обязательна. #security #html

https://alfy.blog/2026/05/07/html-sanitizer-api.html

Браузеры по-другому относятся к крупным сайтам. Ден Оделл рассказывает, как Safari и Firefox содержат тысячи строк специфичного для сайтов кода, чтобы популярные сервисы вроде TikTok, Netflix и Reddit продолжали работать. В WebKit это Quirks.cpp, в Firefox — about:compat, иногда они даже подменяют user agent на Chrome. Доминирование Chrome заставляет другие браузеры приспосабливаться, повторяя эпоху Internet Explorer наоборот. #browser #interop

https://denodell.com/blog/browsers-treat-big-sites-differently

Выпуск №527. Никита Дубко и Алексей Симоненко про новинки Safari 26.5, полифил Prompt API, подписки на ИИ в редакторах и браузерные патчи для сайтов.

— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте

00:01:30 Новинки Safari 26.5
00:27:39 Полифил для Prompt API
00:55:08 Подписки на ИИ в редакторах
01:34:28 Браузерные патчи для сайтов

Результаты опроса State of AI 2026. Ежегодный опрос Саши Грифа среди 7258 разработчиков показал, что использование AI в коде стало массовым: респонденты теперь генерируют 54% кода с помощью AI против 28% годом ранее. Claude Code лидирует по уровню положительных оценок среди агентов — 42,3%. Расходы на AI-инструменты растут, индустрия переходит от субсидируемых цен к устойчивой монетизации. Главная боль — галлюцинации. #ai #survey

https://2026.stateofai.dev/en-US

Новинки Firefox 151 для разработчиков. Релиз добавляет shadowrootslotassignment для элементов <template>, выражения @container style(), position-anchor: normal, Document Picture-in-Picture API для всегда-сверху HTML-окон, Web Serial API на десктопе, CanvasRenderingContext2D.lang, keyboardLock в requestFullscreen() и экспериментальное свойство field-sizing для элементов форм. #firefox #browser

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/151

Modern web guidance. Набор постоянно обновляемых, проверенных экспертами скиллов для ИИ-агентов от команды Chrome — по UI-компонентам, модернизации старого кода, безопасности и производительности. Установка через npx modern-web-guidance@latest install или как плагин для Claude Code, Copilot CLI, Vercel Agent Skills и Antigravity. Скиллы помогают с современными возможностями: <dialog>, popover, выражения от контейнера, passkeys, CSP и улучшением Web Vitals. #tools #ai

https://developer.chrome.com/docs/modern-web-guidance

State of CSS 2026. Devographics запустили ежегодный опрос о состоянии CSS, в этом году с меньшим числом CSS-возможностей, чтобы его можно было завершить. Команда сосредоточилась на самом важном: от раскладки, селекторов и типографики до интерактивности и форм. Опрос займёт 15–20 минут и поможет понять, как разработчики используют современный CSS. Не забудьте проголосовать за любимые ресурсы и добавить всё новое в список чтения. #css #survey

https://survey.devographics.com/en-US/survey/state-of-css/2026

Поиск фич веб-платформы прямо из терминала. Консольная утилита wf Патрика Броссета ищет по ключевому слову и показывает статус Baseline, ссылки на документацию MDN, спецификации, баги браузеров, результаты опросов, позиции вендоров и статистику использования в Chrome. Данные берутся из web-features и web-features-mappings от W3C WebDX Community Group, актуальные значения подгружаются при каждом запуске. #tools #baseline

https://www.npmjs.com/package/web-features-cli

Выпуск №528. Вадим Макеев, Алексей Симоненко, Полина Гуртовая и Никита Дубко про новинки Firefox 151 и Google I/O: CSS и UI, WebMCP и агентный веб, Modern Web Guidance, DevTools, Prompt API, Core Web Vitals и HTML в Canvas.

— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте