00:01:22 Новинки Chrome 142
00:28:15 HTTPS по умолчанию
00:36:58 ESM в 2026
00:47:36 Перфоманс фреймворков
01:14:19 Пора регулировать React

setHTML(), Trusted Types и Sanitizer API. Олли Уильямс объясняет, как новый метод setHTML() и API Sanitizer защищают от XSS, безопасно вставляя HTML в DOM. Вместе с Trusted Types они дают современный и настраиваемый способ контроля разрешённых элементов и атрибутов, постепенно заменяя библиотеки вроде DOMPurify. Поддерживаются в Firefox Nightly и Chrome Canary. #security #html

https://olliewilliams.xyz/blog/sanitizer/

Новинки WebKit для Safari 26.1. Джен Симмонс представила релиз с поддержкой rem, вьюпорт, типографических и container query-единиц внутри SVG и улучшенным Anchor Positioning — меньше сдвигов раскладки и исправления для мультиколонок и прокрутки. Всего 36 исправлений в CSS, доступности, WebGPU и WebRTC. #browser #safari

https://webkit.org/blog/17541/webkit-features-for-safari-26-1/

Harmonizer — генератор доступных цветовых палитр. Плагин для Figma и веб-приложение от Evil Martians для создания гармоничных палитр, одинаково хорошо работающих в светлых и тёмных темах. Использует цветовую модель OKLCH и формулы контраста WCAG или APCA, чтобы сохранять равномерную яркость и контраст между оттенками. #design #a11y

https://harmonizer.evilmartians.com/

Директивы и рамки платформы. Таннер Линсли анализирует тренд кастомных директив вроде use client, use server и use cache, появившихся в современных JavaScript-фреймворках. Они удобны, но размывают границу между платформой и библиотеками, создавая путаницу, нагрузку на инструменты и риск замыкания в экосистеме. Автор призывает использовать явные API и работать над стандартами. #js

https://tanstack.com/blog/directives-and-the-platform-boundary

Сворачиваемые секции, которые можно найти с hidden=until-found. Нейтан Ноулер показывает, как улучшить привычный аккордеон, сделав скрытый контент доступным для поиска с помощью нового атрибута hidden=until-found. Прогрессивное улучшение, поддержка в браузерах (Chrome, Firefox, Safari TP) и пример с событием beforematch для лучшего UX. #html #a11y

https://knowler.dev/blog/searchable-collapsible-sections-with-hidden-until-found

Выпуск №500. Андрей Мелихов, Полина Гуртовая, Вадим Макеев, Никита Дубко, Алексей Симоненко про новости по-английски, как меняется фронтенд за 100 выпусков, как пишем код в 2025, что нас бесит и что будет в 600-м.

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

00:01:54 Новости по-английски
00:10:51 Как меняется фронтенд
00:32:03 Мы пишем код в 2025
01:06:47 Что нас бесит
01:31:58 Вангуем 600-й

<color‑input> — современный веб‑компонент Адама Аргайла для выбора цвета, который поддерживает широкий цветовой охват (sRGB, Display P3, Rec2020) с автоматическим определением и конвертирует между sRGB, HSL, HWB, LAB, LCH, OKLCH и OKLAB. Построенный на Color.js, Preact Signals и Shadow DOM, он настраивается через CSS parts и поставляется в виде tree‑shakeable ES-модулей. Кастомный элемент автоматически регистрируется при импорте, работает в браузерах с Popover API и умно позиционируется. #webcomponent #color

https://color-input.netlify.app/

Незаслуженно забытый HTML-элемент <output>. Ден Оделл объясняет, как этот малоизвестный элемент делает динамические результаты доступными по умолчанию. Его встроенная role="status" объявляет изменения значений без дополнительного ARIA-кода. <output> существует с 2008 года, связывается через for="", работает не только в формах и поддерживается всеми браузерами. #html #a11y

https://denodell.com/blog/html-best-kept-secret-output-tag

Новинки Firefox 145 для разработчиков. Добавлена поддержка text-autospace, универсального шрифта math и <hr> в <select> на Android. В JavaScript появился Atomics.waitAsync() для асинхронной синхронизации потоков, а в HTTP — заголовки Integrity-Policy для проверки целостности скриптов. Поддержан контейнер Matroska, новые события WebDriver BiDi и экспериментальные Anchor Positioning и Trusted Types. #browser #firefox

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

Простые поля для одноразовых кодов. Тайлер Стика показывает, как создать полностью рабочее поле для одноразового пароля (OTP) с помощью одного HTML-элемента — без JavaScript, CSS-хаков и сторонних библиотек. Достаточно атрибутов inputmode="numeric", autocomplete="one-time-code" и pattern="\d{6}", чтобы обеспечить автозаполнение, валидацию и доступность. Всё остальное можно добавить как прогрессивное улучшение. #html #a11y

https://cloudfour.com/thinks/simple-one-time-passcode-inputs/

Девятнадцать докладов с конференции CascadiaJS 2025. Плейлист включает сессии от GPT на чистом JavaScript, совместного редактирования и обработки больших данных до истории JavaScript, дискуссий о фреймворках, браузерных и мобильных ИИ‑приложений. А также управление состоянием в React, новейшие возможности CSS, клиентские агенты, GPT‑5, обновления React и Next.js, веб‑монетизацию и модели пользовательского взаимодействия, и многое другое. #js #video

https://www.youtube.com/playlist?list=PLLiioAbFTbKP4JVMijrNRRrNccfauPko8

Выпуск №501. Никита Дубко и Андрей Мелихов про Firefox 145, Safari 26.1 и Interop, как AI нравится TypeScript, дела у Baseline и историю Val Town.

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

00:01:38 Новинки Firefox 145
00:19:47 Safari 26.1 и Interop
00:28:08 AI нравится TypeScript
00:47:19 Как дела у Baseline
01:07:29 История Val Town
01:28:46 Ответы на вопросы

Полное руководство по <input type="number">. Олли Уильямс о том, как убрать стрелки через CSS, как работают атрибуты step, min, max, и как браузеры обрабатывают десятичные разделители и inputmode. Хотя этот элемент критиковали раньше, например, для полей с номером карты или индексом, многие ошибки доступности уже исправлены. #html #a11y

https://olliewilliams.xyz/blog/guide-to-html-number-input

Внутреннее устройство карт кода для JavaScript. Манодж Вивек подробно объясняет, как минифицированный JavaScript связывается с исходным: от структуры формата и VLQ-кодирования до того, как DevTools восстанавливают пути, строки и имена. Разбор проходит через этапы сборки TypeScript, структуру сегментов и примеры декодирования. #js #devtools

https://www.polarsignals.com/blog/posts/2025/11/04/javascript-source-maps-internals

Многоуровневое расписание на современном CSS. Нильс Биндер показывает, как с помощью grid, subgrid, round() и mod() построить расписание, где время точно ложится в строки, потоки остаются выровненными, а индикаторы времени и заголовки работают со скролл-анимацией. Подробный разбор структуры, вычислений и приёмов для сложных таймлайнов. #css #layout

https://9elements.com/blog/building-a-multi-stage-timetable-with-modern-css-using-grid-subgrid-round-and-mod/

Совершенствуем Baseline для реальной разработки. Патрик Броссет о том, как статусы Baseline newly/widely available помогают быстро оценить поддержку в основных браузерах, а группа WebDX продолжает работу над сигналами по доступности, прогрессивным улучшением и полифилами, маппингом с другими браузерами и новыми инструментами. #baseline #tools

https://piccalil.li/blog/perfecting-baseline/

Тестирование веб-компонентов в Light DOM проще, чем кажется. Херардо Родригес рассказывает, как связка Vitest, Lit, DOM Testing Library, vitest-axe, и продуманная архитектура Light DOM упростили проверку событий, форм, фокуса, и доступности в крупном легаси-проекте. #js #webcomponents #testing

https://cloudfour.com/thinks/testing-html-light-dom-web-components-easier-than-expected/