14702
Новости фронтенда в еженедельном подкасте сообщества веб-разработчиков. Поддержите нас! Патреон https://www.patreon.com/webstandards_ru Бусти https://boosty.to/webstandards_ru
Идеальные всплывающие подсказки. Темани Афиф показывает, как сделать тултипы с помощью 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
Рейтинг браузеров для PWA. Дэшборд Чарльза Уилтгена для сравнения возможностей веб-приложений в популярных мобильных браузерах (в планах и десктоп) на основе данных Can I Use и MDN: установка и манифест, уведомления, фоновые задачи, доступ к устройству, медиа и другие категории. #pwa #browsers
https://pwascore.com/
Выпуск №496. Андрей Мелихов, Алексей Симоненко, Полина Гуртовая про Chrome 141, гриды как таблицы, встроенное в Node.js, if() и цвета в CSS, историю Prettier, агенты в Playwright и вайб-инжиниринг.
— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте
Забытое наследие веба: а вы знали, что у HTML-таблиц есть собственный API? Кристиан Хайльман напоминает о встроенных DOM-методах insertRow и insertCell (и многих других) позволяющих удобнее собирать таблицы и запрашивать их части. #html #js
https://christianheilmann.com/2025/10/08/abandonware-of-the-web-do-you-know-that-there-is-an-html-tables-api/
Прагматичное руководство по современным цветам в CSS. Кевин Пауэлл освежает устаревшие представления о цветах, объясняет цветовые пространства, разбирается в относительных цветах и помогает упростить работу с цветовыми темами — и это только первая часть. #css #color
https://piccalil.li/blog/a-pragmatic-guide-to-modern-css-colours-part-one/
Выпуск №495. Андрей Мелихов, Алексей Симоненко, Вадим Макеев про State of JS и лого W3C, подчистку зависимостей, WPT и веб-платформу, эксплойты npm, HTML в скринридерах и так себе фреймворк Next.js.
— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте
Простое тестирование доступности прямо в браузере. Полезные букмарклеты от CAAT для проверки контрастности цветов и запуска автоматических тестов доступности Axe на любом сайте — прямо у вас в закладках, ближе и проще, чем любые инструменты. #a11y
https://tools.caat.report/
Поддержка HTML в скринридерах. Таблица совместимости HTML-элементов со скринридерами под редакцией Стива Фолкнера позволяет оценить поддержку в JAWS, NVDA, VoiceOver и TalkBack на основе тестов. База данных в процессе наполнения, но уже готова к использованию. #html #ally
https://tetralogical.github.io/screen-reader-HTML-support/lookup/lookup.html
Новинки 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
00:01:38 Новинки Chrome 141
00:23:11 Гриды как таблицы
00:30:40 Всё уже есть в Node.js
00:45:23 Современные цвета в CSS
00:53:15 Какой if() в CSS нам нужен
01:01:26 История Prettier
01:25:50 Агенты в Playwright
01:34:23 Вайб-инжиниринг
01:51:56 Ответы на вопросы
Новинки Chrome 141. Ускорение IndexedDB с методом getAllRecords() и новыми параметрами, обновление WebRTC Encoded Transform V2 вслед за спекой, поддержка атрибутов и свойств width и height для вложенных SVG, Proofreader API и обновления CSP в origin trials и другие. #chrome #browser
https://developer.chrome.com/release-notes/141
Представляем React Foundation. Команда React объявила о запуске некоммерческой организации в рамках Linux Foundation, куда перейдут React, React Native, и вспомогательные проекты вроде JSX. При поддержке Amazon, Meta, Microsoft, Vercel и других компаний, фонд займётся управлением, выделением грантов, организацией конференции React Conf и развитием открытого сообщества, чтобы обеспечить долгосрочную устойчивость и прозрачность разработки React. #react
https://react.dev/blog/2025/10/07/introducing-the-react-foundation
00:01:23 State of JS и лого W3C
00:10:47 Подчистка зависимостей
00:17:07 WPT спасли веб-платформу
00:38:25 Ответ Deno и GitHub на эксплойты npm
01:08:50 HTML в скринридерах
01:21:47 Так себе фреймворк Next.js
01:41:00 Ответы на вопросы
Как общий набор тестов исправил самые большие проблемы веба. Мэри Бранскомб об истории Web Platform Tests (WPT) — набора тестов, который помог превратить веб в согласованную и стабильную платформу, устранил множество несоответствий между браузерами и открыл дорогу к ежегодным проектам Interop. #interop
https://thenewstack.io/how-a-shared-test-suite-fixed-the-webs-biggest-problems/
State of JavaScript 2025. Открылся авторитетный опрос о состоянии языка и экосистемы JavaScript, который продлится до 1 ноября и займёт в среднем 15–20 минут. Не забудьте проголосовать за «Веб-стандарты» и добавить всё новое для вас в список чтения. #stateof #js
https://survey.devographics.com/en-US/survey/state-of-js/2025
00:01:22 Новинки Chrome 140
00:31:23 Масштабирование текста
00:45:58 Temporal в Chrome
00:57:07 Двойная обводка фокуса
01:11:28 Chrome DevTools MCP
01:25:45 Ответы на вопросы