От 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.

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

00:01:22 Новинки Firefox 151
00:26:00 CSS и UI на Google I/O
00:42:29 WebMCP и агентный веб
00:45:47 Modern Web Guidance
01:18:59 DevTools для агентов
01:32:06 Prompt API в Chrome
01:41:07 Core Web Vitals
01:53:26 HTML в Canvas

600+ миллионов человек пишут справа налево: две правки для вашего приложения. Нина Торгунакова разбирает два сценария. Для англоязычных приложений с полями свободного ввода достаточно dir="auto" — браузер сам определит направление по первому символу, без JavaScript. Для полностью локализованных интерфейсов задайте dir="rtl" на <html> и замените физические CSS-свойства на логические: margin-inline-start, padding-inline-end и text-align: start. #css #a11y

https://evilmartians.com/chronicles/600-million-people-write-right-to-left-2-fixes-your-app-needs

Декларативные частичные обновления HTML. Барри Поллард и Ноам Розенталь представляют две идеи для веб-платформы: инструкции обработки <?marker> и <?start>/<?end> в паре с <template> позволяют серверу вставлять HTML в нужные места документа без последовательной доставки. Новые JS-методы setHTML(), appendHTML() и streamHTML() дают единообразное API для частичных обновлений. Полифилы есть на npm. #html #api

https://developer.chrome.com/blog/declarative-partial-updates

Точные размеры резиновых блоков с round(). Ахмад Шадид рассказывает, как CSS-функция round() дополняет clamp(), округляя плавные значения до удобных шагов, избавляя от дробей вроде 19.7px. Он разбирает размеры шрифтов в карточках, системы типографики и базовые сетки, показывает round() с единицами от контейнера для сохранения визуального ритма при изменении вьюпорта. Также упоминает calc-size() для синхронизации высот соседних блоков. #css #typography

https://ishadeed.com/article/css-round/