14702
Новости фронтенда в еженедельном подкасте сообщества веб-разработчиков. Поддержите нас! Патреон https://www.patreon.com/webstandards_ru Бусти https://boosty.to/webstandards_ru
Девятнадцать докладов с конференции CascadiaJS 2025. Плейлист включает сессии от GPT на чистом JavaScript, совместного редактирования и обработки больших данных до истории JavaScript, дискуссий о фреймворках, браузерных и мобильных ИИ‑приложений. А также управление состоянием в React, новейшие возможности CSS, клиентские агенты, GPT‑5, обновления React и Next.js, веб‑монетизацию и модели пользовательского взаимодействия, и многое другое. #js #video
https://www.youtube.com/playlist?list=PLLiioAbFTbKP4JVMijrNRRrNccfauPko8
Новинки 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
<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/
Выпуск №500. Андрей Мелихов, Полина Гуртовая, Вадим Макеев, Никита Дубко, Алексей Симоненко про новости по-английски, как меняется фронтенд за 100 выпусков, как пишем код в 2025, что нас бесит и что будет в 600-м.
— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте
Директивы и рамки платформы. Таннер Линсли анализирует тренд кастомных директив вроде use client, use server и use cache, появившихся в современных JavaScript-фреймворках. Они удобны, но размывают границу между платформой и библиотеками, создавая путаницу, нагрузку на инструменты и риск замыкания в экосистеме. Автор призывает использовать явные API и работать над стандартами. #js
https://tanstack.com/blog/directives-and-the-platform-boundary
Новинки 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/
00:01:22 Новинки Chrome 142
00:28:15 HTTPS по умолчанию
00:36:58 ESM в 2026
00:47:36 Перфоманс фреймворков
01:14:19 Пора регулировать React
Идеальные всплывающие подсказки. Темани Афиф показывает, как сделать тултипы с помощью CSS Anchor Positioning — свойств position-area, position-try-fallbacks и функции anchor(). Подсказки остаются во вьюпорте, переворачиваются, сохраняют хвостики и работают в Chrome, Edge и Safari — без единой строчки JavaScript. #css
https://frontendmasters.com/blog/perfectly-pointed-tooltips-a-foundation/
Одно и то же приложение 10 раз. Лорен Стюарт сравнил 10 метафреймворков: Marko, SolidStart, SvelteKit, Qwik и Nuxt дают FCP 35–39 мс и бандл от 28,8 до 176,3 КБ. Ключевой вывод — архитектурный потолок React: даже TanStack Start на React даёт вдвое больший бандл, чем тот же TanStack Start c Solid, Angular через Analog остаётся тяжёлым, а Vue через Nuxt вполне конкурентен. MPA на Marko и HTMX везут минимум JS на страницу, тогда как SPA платят базовым рантаймом. #js #perf
https://www.lorenstew.art/blog/10-kanban-boards/
00:00:59 Privacy Sandbox всё
00:21:06 React Compiler
00:39:10 Интерактивные элементы
00:57:41 JSON: import или fetch
01:13:29 ChatGPT Atlas и ARIA
01:34:24 Ответы на вопросы
JSON: import против fetch. Джейк Арчибальд разбирает, когда стоит использовать в браузере новый импорт JSON-модулей, а когда лучше остаться на старом fetch(). Статические локальные данные против динамических внешних, хранение в памяти, статус ответа, обработка ошибок и другие отличия. #js
https://jakearchibald.com/2025/importing-vs-fetching-json/
Нативный способ добавить несколько ручек на HTML-слайдер. Брехт Де Рёйте предлагает новый элемент <rangegroup> в рамках Open UI и ждёт отзывов. Элемент позволит объединять несколько <input type="range"> в один компонент со стилизацией ручек через псевдоэлементы ::slider-thumb() и ::slider-segment(). #html
https://utilitybend.com/blog/a-native-way-of-having-more-than-one-thumb-on-a-range-slider-in-html
MDN: Опрос разработчиков 2025. Команда MDN приглашает веб-разработчиков пройти опрос, чтобы сделать документацию полезнее для повседневной работы. В нём спрашивают о профессиональном опыте, инструментах, источниках знаний, использовании документации и участии в сообществе. Заполнение занимает около 10 минут, все ответы остаются анонимными. #survey
https://survey.alchemer.com/s3/8409929/MDN-Developer-Survey
Выпуск №497. Никита Дубко и Вадим Макеев про опрос MDN, новинки Firefox 144, прогрессивные картинки, библиотеку CSS extras и теорию мёртвых фреймворков.
— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте
Новинки Firefox 144 для разработчиков. В свежем релизе добавлена поддержка View Transitions для SPA, атрибуты command и commandfor, методы getOrInsert() для Map и WeakMap, DOM-метод moveBefore() и другие. Среди экспериментов — тайм-пикер для datetime-local. #firefox #browser
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/144
Простые поля для одноразовых кодов. Тайлер Стика показывает, как создать полностью рабочее поле для одноразового пароля (OTP) с помощью одного HTML-элемента — без JavaScript, CSS-хаков и сторонних библиотек. Достаточно атрибутов inputmode="numeric", autocomplete="one-time-code" и pattern="\d{6}", чтобы обеспечить автозаполнение, валидацию и доступность. Всё остальное можно добавить как прогрессивное улучшение. #html #a11y
https://cloudfour.com/thinks/simple-one-time-passcode-inputs/
Незаслуженно забытый HTML-элемент <output>. Ден Оделл объясняет, как этот малоизвестный элемент делает динамические результаты доступными по умолчанию. Его встроенная role="status" объявляет изменения значений без дополнительного ARIA-кода. <output> существует с 2008 года, связывается через for="", работает не только в формах и поддерживается всеми браузерами. #html #a11y
https://denodell.com/blog/html-best-kept-secret-output-tag
00:01:54 Новости по-английски
00:10:51 Как меняется фронтенд
00:32:03 Мы пишем код в 2025
01:06:47 Что нас бесит
01:31:58 Вангуем 600-й
Сворачиваемые секции, которые можно найти с 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
Harmonizer — генератор доступных цветовых палитр. Плагин для Figma и веб-приложение от Evil Martians для создания гармоничных палитр, одинаково хорошо работающих в светлых и тёмных темах. Использует цветовую модель OKLCH и формулы контраста WCAG или APCA, чтобы сохранять равномерную яркость и контраст между оттенками. #design #a11y
https://harmonizer.evilmartians.com/
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/
Выпуск №499. Никита Дубко и Алексей Симоненко про Chrome 142, HTTPS по умолчанию, ESM в 2026, перфоманс фреймворков и регуляцию React.
— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте
Новинки Chrome 142. В новой версии появился синтаксис диапазонов для CSS style queries и if(), атрибут interestfor для кнопок и ссылок, единый рендеринг <select> на мобильных и десктопах и поддержка атрибута download в SVG-ссылках. WebGPU и FedCM получили обновления, доступ к локальной сети теперь требует разрешения и многое другое. #browser #chrome
https://developer.chrome.com/release-notes/142
Отказ от XSLT в браузерах. Мейсон Фрид объявил о планах Chromium полностью удалить поддержку XSLT — технологии трансформации XML-документов, стандартизованной ещё в 1999 году. Решение связано с низким использованием (около 0,05% загрузок страниц) и высокими рисками безопасности. WHATWG, Firefox и Safari выразили поддержку. Депрекация начнётся в Chrome 143, а полное удаление ожидается в версии 155 с переходным периодом до 2027 года. #browser #chrome
https://groups.google.com/a/chromium.org/g/blink-dev/c/CxL4gYZeSJA/m/yNs4EsD5AQAJ
Выпуск №498. Андрей Мелихов, Полина Гуртовая, Вадим Макеев, Алексей Симоненко про Privacy Sandbox, React Compiler, интерактивные элементы, import или fetch, ChatGPT Atlas и ARIA.
— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте
React Compiler 1.0. Команда React объявила о стабильном релизе компилятора, автоматически оптимизирующего компоненты и хуки. Он уже используется в приложениях Meta, ускоряя загрузку и навигацию до 12% и ускоряя интерфейсы до 2,5 раз. В релиз вошли новые правила ESLint и руководство по постепенному внедрению. Поддерживаются React 17+ и интеграции с Expo, Vite и Next.js. #react
https://react.dev/blog/2025/10/07/react-compiler-1
Представляем Vite+ — единую экосистему инструментов для JavaScript. Эван Ю анонсировал на ViteConf новую надстройку над Vite, объединяющий создание, сборку, тестирование, линтинг и форматирование кода, а также сборку библиотек и визуальные инструменты в одной среде. Вся цепочка написана на Rust и совместима с React, Vue, SvelteKit и другими фреймворками. Vite+ будет бесплатен для индивидуальных и опенсорсных проектов, но получит коммерческую лицензию для бизнеса. #vite #js
https://voidzero.dev/posts/announcing-vite-plus
00:01:15 Опрос MDN
00:02:56 Новинки Firefox 144
00:19:13 Прогрессивные картинки
00:48:37 Библиотека CSS extras
01:05:44 Теория мёртвых фреймворков
01:29:41 Ответы на вопросы
Теория мёртвых фреймворков. Пол Кинлан о мире, где React перестаёт быть просто библиотекой и становится самой платформой — не по решению разработчиков, а по воле языковых моделей, обученных на нём. Новые фреймворки и идеи тонут в данных, не успевая попасть в следующий цикл обучения, а сеть всё больше заполняется кодом, созданным LLM по одним и тем же шаблонам. #react #ai
https://aifoc.us/dead-framework-theory/
Кастомные функции и if() в CSS. Юна Кравец и Брамус возвращаются в новом составе CSS Podcast. В свежем эпизоде — про нетипичные для CSS новинки, которые появились в Chrome в этом году и сильно поменяют, как мы пишем стили в будущем. #css #podcast
https://thecsspodcast.libsyn.com/92-css-if-and-custom-functions