Выпуск №502. Вадим Макеев, Андрей Мелихов, Алексей Симоненко, Никита Дубко про отчёты с TPAC и TC39, расписание на CSS, URL как состояние, компоненты тултипов и что Фаулер думает про AI.

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

00:01:22 Новости с TPAC
00:20:50 Отчёт TC39 за ноябрь
00:40:26 Расписание на CSS
01:02:55 URL как состояние
01:23:30 Компоненты тултипов
01:37:00 Фаулер про AI
01:55:20 Ответы на вопросы

HTML-атрибут popover на практике. Мануэль Матузович возвращается со свежим видео HTMHell и разбирает новый атрибут popover: режимы auto, manual и hint, позиционирования рядом с кнопкой и управление через showPopover и popovertargetaction для доступных всплывающих элементов. #html #a11y

https://youtu.be/KX8YQW7stzs

Мониторинг производительности веб-компонентов. Кассондра Робертс объясняет, как User Timing API позволяет замерять этапы жизненного цикла, вычислять время апгрейда и понимать поведение компонентов на реальных устройствах. Подход с базовыми классами, миксины, аналитика и самые важные метрики, влияющих на пользователей. #performance #webcomponents

https://allons-y.llc/posts/2025-11-23/

Новые идеи для раскладок с CSS-сабгридами. Джош Комо объясняет, как сабгриды позволяют вложенным элементам делить родительскую сетку, чтобы карточки, портфолио и тарифы выравнивали изображения и текст по соседям, а не по отдельным сеткам. Подводные камни, вроде резервирования строк, нумерация линий, ограничения гибких сеток и фолбеки для старых браузеров. #css #layout

https://www.joshwcomeau.com/css/subgrid/

Dialog и popover для слоистого UI. Дэвид Херрон рассказывает, как <dialog> и popover с поддержкой Baseline могут заменить самописные модальные окна, обеспечивая доступность, управление фокусом, верхний слой, а также анимированные появления с @starting-style, чтобы не изобретать велосипед. #html #baseline

https://web.dev/articles/baseline-in-action-dialog-popover

Как написать свой роутер для SPA с URLPattern. Джим Скофилд показывает, как использовать новый URLPattern API, веб-компоненты и History API, чтобы сопоставлять маршруты, перехватывать переходы и избегать XSS, сохраняя статический список компонентов. #javascript #routing

https://jschof.dev/posts/2025/11/build-your-own-router/

Выпуск №503. Никита Дубко и Алексей Симоненко про анимацию width/height в CSS, историю внедрения TS в Node.js, Shai-Hulud 2.0 в npm и вариативные шрифты.

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

00:01:38 Анимация width/height в CSS
00:16:32 Как писали поддержку TS в Node.js
00:37:42 Атака Shai-Hulud 2.0 в npm
01:07:50 Зачем вариативные шрифты

CSS против иллюзии свечения. Адам Аргайл показывает, как тёмная тема делает белый текст визуально толще, и как вариативные шрифты с осью GRAD помогают избежать сдвига раскладки. Он решает проблему при наведении у ссылок и учитывает prefers-contrast, чтобы текст оставался читабельным. #css #typography

https://nerdy.dev/adjust-perceived-typepace-weight-for-dark-mode-without-layout-shift

Проблемы с top layer: popover против диалога. Стефани Эклс открывает адвент-календарь HTMHell необычным кейсом: попап-тост может оказаться поверх модального диалога, но остаться недоступными с клавиатуры. Как showModal() мешает фоновым popover и как исправить это: перенести тосты в DOM диалога и включить popover="manual". #a11y #css

https://htmhell.dev/adventcalendar/2025/1/

Вписывание изображений до формата с помощью размытия на CSS. Ана Тюдор показывает, как упаковать фото любых соотношений в квадратную плитку с помощью aspect-ratio, object-fit, размытого фона через filter или backdrop-filter, градиентных масок, а также делится фолбеками и текущими ограничениями. #css #webdev

https://frontendmasters.com/blog/non-square-image-blur-extensions/

Новинки Chrome 143. Добавлены улучшения в CSS, Web App Manifest и WebTransport, а также новые события Gamepad и поддержка Unicode 16. Появились JSON ответы FedCM, Web Smart Card API для изолированных приложений и выпуск цифровых удостоверений. Chromium также начинает удаление XSLT из-за рисков безопасности и низкого использования. #chrome #browser

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

JSDoc как идеальный инструмент типизации для JavaScript. Джаред Уайт утверждает, что JavaScript в сочетании с JSDoc и проверкой типов через TypeScript tsc обеспечивает ту же безопасность и ясность, что и TypeScript, но без лишней сборки. Он описывает настройку jsconfig.json и tsconfig.json и показывает, как JSDoc делает код самодокументируемым и гибким. #js #jsdoc

https://thathtml.blog/2025/12/nuances-of-typing-with-jsdoc/

Выпуск №504. Алексей Симоненко, Полина Гуртовая и Вадим Макеев про адвент-календари, 30 лет JavaScript, Chrome 143, TypeScript 7, безопасность npm и Server Components, Tailwind и CSS-in-JS.

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

00:01:07 Адвент-календари
00:08:41 JavaScript 30 лет
00:20:15 Новинки Chrome 143
00:34:40 Планы на TypeScript 7
00:50:35 Безопасность npm
01:04:36 Опасные Server Components
01:12:09 Снова про Tailwind
01:32:00 Предательство CSS-in-JS

APCA + WCAG 2 чекер для контраста цветов. Инструмент Майка Гиффорда, который помогает проверять и подбирать цветовые сочетания, соответствующие требованиям доступности WCAG 2.x и APCA. Поддерживаются современные CSS-форматы и генерация гармоничных палитр. #a11y #color

https://mgifford.github.io/contrast-plus/

CSS в Chrome, итоги 2025 года. Команда Chrome DevRel представила 17 новых CSS и UI-фич, расширяющих возможности создания динамичных веб-интерфейсов: кастомный <select>, invoker commands, scroll-state queries, функции shape() и if() и другие. Эти обновления делают дизайн более декларативным и доступным. #css #chrome

https://chrome.dev/css-wrapped-2025/

Новинки Firefox 146 для разработчиков. Mozilla добавила поддержку contrast-color(), @scope, а также свойства text-decoration-inset в CSS. MathML получил свойство math-shift и улучшение операторов в RTL. SubtleCrypto.importKey() теперь поддерживает сжатые EC-ключи. Для экспериментов доступны @custom-media и Navigation API. #firefox #browser

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

Практическое руководство по современным цветам в CSS, часть 2. Кевин Пауэлл показывает, как функции oklch(), color-mix() и относительные цвета позволяют создавать адаптивные и визуально точные системы цветов прямо в браузере, значительно превосходя возможности дизайн-инструментов. #css #color

https://piccalil.li/blog/a-pragmatic-guide-to-modern-css-colours-part-two/