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

🧪 HTML и Платформа

Всё, что вы не хотели знать про visually-hidden

Глубокое погружение в «визуально скрытый, но доступный для скринридеров» контент. Разбираются нюансы, почему разные реализации могут вести себя по‑разному, и где легко случайно ухудшить доступность (например, скрыть фокус или «сломать» чтение).

Interop 2026: браузеры наконец догоняют друг друга

Подкаст/разбор инициатив Interop: цель — чтобы важные веб‑фичи работали одинаково во всех движках. Обсуждают то, где особенно много пользы для фронтенда: container style queries, anchor positioning, scroll‑driven animations, view transitions и т. п. (Внутри есть ссылка на контекст про Interop этого года.)

Как стилизовать новый псевдоэлемент ::search-text

В статье How to Style the New ::search-text объясняется, как работать с новым псевдоэлементом ::search-text.

Он позволяет стилизовать результаты поиска по странице (например, когда пользователь использует встроенный поиск браузера).

Это открывает новые возможности для улучшения UX — можно настраивать цвет фона, текста и другие параметры подсветки.

• Как уважать системный размер текста на мобильных ОС — почему увеличение текста в Android/iOS не всегда масштабирует текст на веб‑странице и что с этим делать.
• Нативные HTML‑компоненты не гарантируют хороший UX — напоминание, что «native» ≠ «удобно»: важно учитывать контекст, поведение, ожидания и доступность.
• Navigation API стала Baseline (Newly Available) во всех основных браузерах — это значит, что API считается достаточно доступным «по умолча
• PWAscore: сравнение возможностей PWA в мобильных браузерах — «скоркарды» по Chrome/Firefox на Android и Safari на iOS на основе 200+ PWA‑фич.
• Sugarcube Toolkit: дизайн‑токены в CSS‑переменные, утилиты и стили компонентов — тулкит, который превращает токены стандарта W3C DTCG в удобные артефакты; документация здесь.
• Page Gym: тест скорости страниц и оптимизация — метрики LCP/FCP/CLS, выбор региона и режима (desktop/mobile), сравнение прогонов и история тестов.
• Как публиковать в npm из GitHub Actions — про новый OIDC trusted publishing workflow.
• Полезные «магические» файлы Git — .gitignore, .gitmessage и другие.

Теперь JS-модули можно использовать в Service Workers

С релизом Firefox 147 стало возможным использовать JS-модули в service workers во всех основных браузерах. Это упрощает архитектуру проектов и делает код более модульным.

🎨 CSS и дизайн

border-shape: будущее «неквадратного» веба

Una Kravets показывает эксперименты с новым CSS‑свойством border-shape, которое может сделать «геометрию» интерфейсов гораздо богаче (не только прямоугольники и скругления). Фича пока ранняя: сейчас она доступна только за флагом Chromium, поэтому это скорее «потрогать будущее» и понять, какие паттерны дизайна станут проще.

• Бонус: взгляд изнутри на то, как реализуют corner-shape — и что именно уже можно использовать в Chrome и Edge прямо сейчас.

Скоро появится стандартная «ленивая загрузка» для <video> и <audio>

Обновление по стандартизации lazy‑loading для HTML‑элементов видео и аудио. Идея простая: браузер сможет сам откладывать загрузку медиа, пока оно не нужно (например, до появления в области видимости), без костылей на JS. Сейчас это ещё не стандарт, но поддержка уже «приземлилась» за флагом в Chrome Canary.

• Спрайты в вебе без GIF: CSS‑анимации кадрами — как делать «покадровку» через steps() и управлять изображениями через object-fit.

• Подчёркивание ссылок в CSS — шпаргалка по text-decoration-*, чтобы underline выглядел аккуратно и предсказуемо.

• Типографические шкалы в CSS с :heading(), sibling-index() и pow() — идея, как держать размеры заголовков/текста согласованными «почти формулой».

• Как кастомизировать списки в CSS: подробный гайд — много примеров, как уйти от «стандартных маркеров» и сделать списки частью дизайна, не ломая семантику.

Возможный будущий селектор :near()

Концепт псевдокласса :near() — чтобы реагировать на то, что курсор рядом с элементом, а не строго «на нём». Потенциально полезно для подсказок, раскрывающихся меню и «пред‑hover» эффектов. В статье также есть ссылка на обсуждение идеи.

📦 JavaScript

Oxfmt Beta: сверхбыстрый форматтер JavaScript на Rust

Oxfmt Beta — быстрый форматтер JavaScript — это на 100% совместимая альтернатива Prettier, написанная на Rust. Проект является «сестрой» Oxlint и заявляет производительность в 30 раз быстрее Prettier и в 3 раза быстрее Biome.

С последнего альфа-релиза добавили:

• форматирование встроенных языков (JSX, YAML, HTML и др.),
• сортировку Tailwind CSS классов,
• сортировку импортов.

Инструмент ориентирован на быструю работу в больших кодовых базах и CI.

⚛️ React и фреймворки

Запустился React Foundation

React, React Native и JSX теперь принадлежат не Meta, а независимому фонду под эгидой Linux Foundation. Это обычно означает более «нейтральное» управление: решения и торговые марки закреплены за организацией, а не за одной компанией. В управляющий совет вошли крупные участники экосистемы (вроде Meta, Vercel, Microsoft), а исполнительным директором назначен Seth Webster.

React Doctor: быстрая диагностика React-кода

React Doctor — инструмент от создателя React Scan. Сканирует кодовую базу и выставляет оценку от 0 до 100. Можно посмотреть репозиторий на GitHub. 💡 Есть аналог для Angular — Angular Doctor.

• Как делать «абстракции запросов» правильно — почему оборачивать useQuery в кастомные хуки часто плохая идея (теряются типы и гибкость), и как помогает API queryOptions для типизации и использования вне компонентов.
• «Слишком короткая жизнь, чтобы руками писать типы API»: React на базе OpenAPI — как уменьшить рассинхрон типов фронта и бэка, если считать OpenAPI «источником правды». В статье показывают связку генерации клиентских типов/SDK (например, через Hey API), типобезопасного мокинга сетевых запросов и валидации данных (например, Zod).
• Как собирать дизайн‑компоненты с action props на Async React — идея: вместо того чтобы передавать кучу коллбеков, задавать «действия» как пропсы и аккуратно работать с асинхронностью внутри компонента.
• Как строить формы в React на основе JSON Schema — обзор подхода «форма описывается JSON‑схемой», а UI собирается динамически. Полезно для опросов/конструкторов форм.

Опубликованы результаты опроса State of React Native 2025

Software Mansion и Devographics выложили результаты большого опроса по RN. Там много данных про используемые библиотеки и практики, а ещё интересно увидеть, что заметная часть разработчиков уже перешла на новую архитектуру React Native.

📘 TypeScript

⚙️ Node.js

Вышел AdonisJS v7 — «батарейки в комплекте» фреймворк для Node.js

AdonisJS — это фреймворк «всё‑в‑одном»: аутентификация, ORM, очереди, тестирование и другие типичные вещи идут как единая система, а не набор разрозненных пакетов. В версии 7 обновили и «осовременили» проект, добавили интеграцию с OpenTelemetry, новые стартовые наборы (starter kits) для быстрого старта, генерацию barrel‑файлов и заявляют end‑to‑end типобезопасность. Отдельно — новый сайт проекта. Если уже используешь Adonis v6, пригодится гайд по миграции с v6 на v7.

Как защититься от Path Traversal атак в Node

Path traversal — это когда злоумышленник подсовывает «хитрый» путь к файлу (например, с ../), чтобы добраться до файлов, которые приложение не собиралось показывать. В статье разбирают типичный сценарий атаки и практические способы защиты (валидация путей, нормализация, белые списки, правильная работа с файловой системой). Если времени мало — автор обещает TL;DR с выжимкой.

• Node.js v25.7.0 (Current) и v24.14.0 (LTS) вышли; модуль node:sqlite перешёл в стадию release candidate (почти «готов к бою»).
• Идёт работа над тем, чтобы добавить в core Node «нативный логгер»: сначала — прогресс и обсуждение, а вот черновые (в процессе) доки к будущей фиче.
• Проект Node ужесточил приём отчётов о уязвимостях: после повышения порога «signal score» на HackerOne, теперь ещё и не принимают репорты от “новых исследователей без сигнала”, чтобы отсеять поток низкокачественных заявок.

🤖 ИИ

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

OpenSeadragon 6.0 — просмотрщик сверхбольших изображений в браузере

Если у вас есть карты, сканы, снимки или любая «огромная» графика, которую нужно приближать и таскать, OpenSeadragon — одно из самых проверенных решений. В версии 6 заявлены асинхронный и кэш‑управляемый пайплайн, что делает работу эффективнее на больших объёмах. Есть отдельная ссылка на анонс версии 6.

Yoopta Editor 6.0 — headless‑редактор «как Notion» для React

MIT‑лицензия, блочная модель (paragraph/heading/list и т.п.), плагины и готовые UI‑части поверх headless‑ядра. Посмотреть вживую можно в песочнице‑playground.

• Первая бета WordPress 7.0 — главный фокус: добавление совместного редактирования в реальном времени (real‑time collaboration).

• Beautiful Mermaid 1.0 — рендеринг Mermaid-диаграмм в SVG или ASCII.

• 📊 Plotly.js 3.4 — библиотека визуализации данных (графики, карты и др.). Есть примеры.

• 📄 DOCX 9.6.0 — генерация .docx файлов из JavaScript.

• Building an Endless Procedural Snake with Three.js and WebGL — создание процедурной 3D-анимации.

• Edge — шаблонизатор для Node, максимально похожий на JS: идея в том, чтобы писать логику в шаблонах почти как в JavaScript, без отдельного «языка шаблонов» как у Nunjucks или Pug.

• bignumber.js 10.0 — точная арифметика с большими числами: полезно, когда Number и даже BigInt не подходят (например, нужны большие дробные значения или контроль точности).

• Bun v1.3.10 — добавили build --compile --target=browser (см. описание фичи), чтобы собирать самодостаточные HTML‑файлы со всеми инлайн‑ассетами (включая полностью клиентские React‑приложения).

• Deno 2.7 — без «реактовых» фич, но полезно знать: стабилизировали поддержку Temporal API, улучшили совместимость с Node.js, добавили новые

Обновления

• Vuetify 4.0 — крупный релиз UI-фреймворка для Vue. Есть гайд по обновлению.
• npm v11.10.0 — поддержка массового trusted publishing и новый флаг --min-release-age.
• ESLint 10.0.2
• Hono 4.12
• Deno 2.6.10
• Electron 40.6
• Three.js r183
• Slowmo — инструмент для замедления времени в браузере (CSS-анимации, transitions, requestAnimationFrame).
• pnpm v10.30.0 — команда pnpm why теперь показывает обратное дерево зависимостей.
• Emscripten 5.0.2 — компилятор LLVM → WebAssembly: обновления/чистки, меньше «хака» под Node.
• BullMQ v5.70 — надёжные Redis‑очереди для Node (фоновые задачи, ретраи, расписания).
• Orange ORM 5.2 — обновление ORM.
• Basic FTP 5.2 — простой FTP‑клиент для Node.
• React PDF 10.4 — показ PDF в React‑приложениях; в релизе v10.4.0 добавили возможность переопределять цвета, используемые при рендеринге.
• React DayPicker 9.14 — настраиваемый компонент выбора даты.
• ReactToPrint 3.3 — печать содержимого React‑компонентов.