Еженедельный дайджест #17: Новости фронтенда

🧪 HTML и API

🧭 Safari 26.0 вышел вместе с iOS/macOS 26

В релизе — множество улучшений CSS, новый элемент <model> для встраивания 3D на страницу и важное изменение на iOS/iPadOS: любому сайту проще стать «веб‑приложением», если пользователь добавляет его на домашний экран. Это расширяет возможности PWA без обходных путей. Читайте обзор: что нового в Safari 26.

Доступность (A11Y)

• WCAG 3.3.8: Authentication Without Frustration — руководство по тому, как сделать процесс входа в систему менее болезненным для пользователей с когнитивными нарушениями. Практичные советы по упрощению форм и шагов аутентификации: читать руководство.

• Understanding Focus Indicators — объяснение, почему индикаторы фокуса (outline, ring и т.п.) важны для доступности и как их правильно стилизовать: пояснение по focus indicators.

• ‘Screen Readers Do Not Need to Be Saved by AI’ — статья о том, почему озвучивание интерфейсов с помощью ИИ — не панацея, и какие реальные практики улучшения работы со скрин-ридерами нужны сейчас: читать.

• Если нужно обновить Safari без полной переустановки macOS — есть инструкция: как обновиться до Safari 26 отдельно.

🎨 CSS и дизайн

Что можно делать с corner-shape?

corner-shape — новое свойство (пока поддерживается в Chrome/Edge), которое даёт больше контроля над формой углов, чем border-radius. Это не просто радиусы — с ним можно создавать интересные декоративные и практические формы на углах блоков. Посмотрите примеры и демки: разбор corner-shape (и заметка о поддержке: Chrome/Edge).

• Следите за поддержкой в браузерах перед использованием в продакшене.

Follow-the-Leader: шаблон с CSS anchor positioning

Небольшая, но наглядная демонстрация того, как с помощью anchor positioning можно сделать «следящий» элемент: элемент-фолловер динамически привязывается к разным якорям в зависимости от состояния страницы. Примеры и демо: Follow-the-Leader с anchor positioning.

Subgrid: как выровнять элементы

Статья объясняет, почему subgrid всё ещё вызывает путаницу и показывает практический пример — компонент, который выигрывает от использования subgrid. Хорошо для понимания, когда стоит применять subgrid и как это упрощает сложную вёрстку: Subgrid: объяснение и примеры.

Breakpoint columns — пять подходов

Разбор разных способов переключать колонки на точках перелома (media queries, CSS-функции и т.д.). Полезно, чтобы выбрать тот подход, который проще поддерживать в вашем проекте: сравнение способов.

• You Don’t Need Animations — простая инструкция о том, когда анимации действительно полезны, а когда они мешают пользователю. Рекомендации по ответственному использованию анимаций: читать.
• Replace Your Animated GIFs with SVGs — почему анимированные SVG часто лучше GIF: меньше вес, масштабируемость, гибкость медиа-запросов; есть нюансы, но стоит попробовать. Обзор и примеры: замена GIF на SVG.
• CSS: свойство zoom Майк Пенниси рассказывает о свойстве CSS zoom, которое часто игнорируется, но может быть полезным для масштабирования элементов. Подробности в статье.

📦 JavaScript

Deno борется за освобождение JavaScript от Oracle

Название “JavaScript” является торговой маркой Oracle, и команда Deno во главе с Райаном Далем собирает $200,000 для юридической борьбы за её освобождение. Подробности кампании в объявлении Deno и дополнительной информации.

• WebAssembly 3.0 стал официальным стандартом Новый стандарт WebAssembly уже поддерживается большинством браузеров. Он улучшает взаимодействие с JavaScript, добавляя сборку мусора, обработку исключений и работу со строками. Читайте в официальном анонсе.

• Кто из npm-пакетов имеет самый большой номер версии? Разработчик с помощью Bun исследовал реестр npm и выяснил, какой пакет имеет самый высокий номер версии. Узнайте результаты в его посте.s

⚛️ React

🛠️ Авария в Cloudflare из‑за ошибочного useEffect

В Cloudflare Dashboard произошёл сбой, корень которого — не баг в React как таковом, а неудачное использование эффекта, из‑за чего приложение засыпало бекенд лишними запросами. Это хороший повод ещё раз вспомнить про правила зависимостей и идемпотентность эффектов. Подробности — в разборе от Cloudflare: история сбоя и уроки.

• Как держать package.json под контролем: заметки Тома МакРайта о «гигиене зависимостей» и том, как не разрастить node_modules до сотен мегабайт. Полезно новичкам: начните с периодического аудита и инструментов для анализа деревьев зависимостей.
• Поддержка React Server Components в разных фреймворках: сравнение возможностей Next.js, Vite, Waku, Forket, Parcel, React Router и RedwoodSDK. Есть и репозиторий с тестами, который можно использовать как «шпаргалку».
• «React победил по умолчанию — и это тормозит инновации»: мнение об эффектах «реакт‑по‑умолчанию». Хороший материал, чтобы посмотреть на экосистему критично.
• В канале Canary появился <Activity />: анонс и детали. Ожидается поддержка в ближайшем релизе Next.js.
• Шпаргалка React 19 от Кента Доддса всё ещё актуальна: сохранить в закладки.
• React Router 7.9.0: стабильные middleware Долгожданная функция middleware в React Router 7.9.0 теперь стабильна, что упрощает управление маршрутами в React-приложениях.
• Solid.js против React: мнение разработчика В статье разработчик сравнивает Solid.js и React, отмечая, что Solid.js предлагает более современный подход, который React вряд ли сможет повторить.

🚀 Expo SDK 54: крупное обновление

Новая версия Expo приносит предсобранные iOS‑билды React Native (сильно ускоряет сборку), поддержку iOS 26 и Liquid Glass, переход на React Native 0.81 и React 19.1, а также стабильный Expo File System. Для начинающих это означает более быстрый цикл «правка‑запуск» и меньшую боль с нативными зависимостями. Читайте релиз: что нового в SDK 54. Краткий видеообзор: все изменения за 10 минут.

• Карта «текущее местоположение» в Expo/React Native: пошаговый гид по разрешениям и отображению точки на карте.

• Путь Discord к React Native: разговор о мотивации и подводных камнях миграции.

• Conform 1.10: типобезопасная валидация форм: контроль жизненного цикла отправки, useForm(), улучшения интеграции с Valibot (заметки к версии, Valibot).

• TanStack Form 1.20: мощное управление состоянием веб‑форм с типами из коробки.

⚙️ Node.js

Атака “Шай-Хулуд” на цепочку поставок npm продолжается

В экосистеме npm обнаружена масштабная атака, названная в честь песчаных червей из вселенной “Дюны”. Злоумышленники заразили сотни пакетов, чтобы красть конфиденциальные данные с компьютеров разработчиков. Эта новость вызвала множество обсуждений и мер по защите. Узнайте подробности в статье от Socket.

• pnpm 10.16 добавляет защиту от атак Новый релиз pnpm включает опцию minimumReleaseAge, которая откладывает обновление зависимостей, чтобы снизить риск использования вредоносных пакетов. Подробности в объявлении о релизе и дополнительном объяснении.

• Размышления о безопасности npm Тейн Пайпер в статье о цепочке поставок npm обсуждает роль Microsoft в текущих проблемах безопасности.

• Будущее JavaScript: мечты и реальность Дрю ДеВолт в своем посте предлагает системные изменения для повышения безопасности JavaScript, но считает их реализацию маловероятной.

• npm-check-updates 18.2: обновление зависимостей с защитой Инструмент для обновления зависимостей в package.json до последних версий теперь имеет функцию “охлаждения”, которая требует, чтобы версия пакета была опубликована не менее заданного времени. Это помогает защититься от атак. Подробности в описании релиза.

Node.js 24.8.0 (текущая ветка)

В релизе добавили возможность инспектировать HTTP/2-запросы из Node прямо в Chrome DevTools — это удобно, когда вы дебажите стримы, push и нестандартные заголовки. Также подъехали улучшения в криптографии и обновление npm до 11.6. Если вы работаете с современными API или пишете прокси/шлюзы на Node, стоит попробовать новую версию в отдельной ветке проекта. Подробнее в заметке: Node.js v24.8.0 (Current) и в кратком пункте про крипту: crypto-обновления.

• 📗 Обзор дорожной карты QUIC в Node: что уже сделано и чего ждать в Node 25 — состояние QUIC.
• 🧪 Как подружить встроенный тест-раннер Node с TypeScript и React — гайд по тестам.
• Как настроить Express.js 5 для продакшена в 2025: TypeScript, ESLint/Prettier, структура, логирование — пошаговое руководство.
• Автоматизация релиза Electron-приложения через GitHub Actions на примере Dolt Workbench (с воркфлоу в открытом доступе) — инженерная заметка и workflow-код.
• Скомпилировать несколько CSS-файлов в один: через PostCSS или “чистый” Node-скрипт без зависимостей — разбор подходов.

📊 Видео и статьи

• How Fast Do Websites Load From Google Search? — исследование и сравнение разных стратегий предзагрузки/подачи ресурсов (prefetching, on-demand и т.д.). Если вы оптимизируете загрузку страниц, полезно посмотреть на реальные измерения: сравнение методов загрузки.

⚒️ Инструменты и библиотеки

Feedsmith 2.0 — парсинг и генерация веб-лент

Библиотека умеет читать и создавать RSS, Atom, JSON Feed, OPML с поддержкой популярных неймспейсов (iTunes/Podcast, Media RSS, Dublin Core и др.). Работает в браузере и Node. Старт: анонс Feedsmith, быстрый старт — tutorial, репозиторий — GitHub.

• trash 10.0 — кроссплатформенно отправляет файлы в системную “Корзину”, вместо unlink — утилита trash.
• openapi-typescript-server — генерация type-safe TS-серверов из OpenAPI-спек — кодоген серверов.
• Volume — 3D OKLCH палитра цветов Инструмент для работы с палитрами в пространстве OKLCH, визуализированный как 3D-инструмент: помогает выбирать цвета осознанно, не только по плоскому набору сватчей: Volume — 3D палитра.

Обновления

• TanStack Query 5.89: асинхронные данные, кэширование, фоновые обновления — всё как мы любим, но свежее.
• API на ClickHouse с React и MooseStack: как собирать «реалтайм‑аналитику» без боли.
• Компонент денежного ввода v4.0: аккуратно обрабатывает валюты, форматирование и курсор; можно «пощупать» в демо.
• DayPicker 9.10: календарь/датапикер с богатой кастомизацией.
• Кто‑то запустил сайт на одноразовой вейп‑ручке: как это вообще возможно — забавно и познавательно про жёсткие лимиты железа.
• Bun v1.2.22: очередной апдейт рантайма — стабильнее и шустрее.
• Ow 3.0 — человекочитаемые проверки аргументов функций — релиз Ow.
• terminal-image 4.0 — показ изображений в терминале; добавили протокол Kitty — terminal-image и Kitty graphics.
• npm-publish 4.0 — GitHub Action для публикации в npm; теперь на Node 24 и npm 11 — action релиз.
• jsdom 27.0 — реализация WHATWG DOM/HTML на JS — jsdom 27.
• LogTape 1.1 — простой мульти-рантайм логгер — LogTape и changelog.
• Undici 7.16 — мощный HTTP-клиент для Node — Undici.
• Hexo 8.0 — популярный блог-генератор — Hexo 8.
• node-soap 1.4 — SOAP-клиент и сервер — node-soap.
• TypeBox 1.0: типы для JSON Schema TypeBox — это библиотека для создания JSON Schema, которые автоматически преобразуются в типы TypeScript.
• wait-on 9.0: ожидание ресурсов Утилита wait-on помогает ждать доступности файлов, портов или HTTP-ресурсов, полезная для автоматизации.
• Wasp 0.18: фреймворк для быстрой разработки Wasp — это фреймворк, похожий на Rails, использующий Node, React и Prisma. Подробности в официальном описании.
• pretty-ms 9.3: удобное форматирование времени Библиотека pretty-ms преобразует миллисекунды в читаемый формат, например, “2 часа 30 минут”.
• Fresh 2.1: фреймворк на Deno Fresh — это веб-фреймворк, работающий на Deno, для создания современных приложений.
• BlueSky Likes: компоненты для социальных сетей Компоненты BlueSky Likes позволяют отображать количество лайков и аватары пользователей в постах BlueSky. Посмотрите живую демо.
• IINA: плагины на JavaScript Популярный медиаплеер для macOS IINA теперь поддерживает плагины на JavaScript для расширения функциональности.
• Оффлайн-документация MDN Создатель Dash делится архивами документации MDN для оффлайн-использования, включая JavaScript, CSS, HTML и SVG.