🎂 Еженедельный дайджест #37: С днём рождения! 🎂

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

Необычная доступность элемента Geolocation

В тексте о доступности элемента Geolocation разбирают нестандартное поведение HTML-элемента, которое выделяет его на фоне других. Материал может быть особенно интересен тем, кто следит за тем, как браузерная платформа сама встраивает требования доступности в новые API.

• В видео о взломе и защите OAuth 2.0 во фронтенде объясняют, где обычно ошибаются при авторизации в браузерных приложениях и как закрыть эти уязвимости.

🎨 CSS и дизайн

CSS-анимации как машина состояний

Инженер команды Edge показал необычный приём: CSS-анимации можно использовать как машину состояний, чтобы менять оформление элемента в зависимости от того, был ли он когда-либо в фокусе. Идея выросла из обсуждения новой функции focusgroup и хорошо показывает, что CSS иногда может решать задачи, для которых обычно тянут JavaScript.

Запрос на отзывы о focusgroup

Браузерная команда Chrome просит разработчиков посмотреть на предлагаемый HTML-атрибут focusgroup. Его цель — упростить навигацию стрелками в составных виджетах вроде меню, табов и тулбаров, чтобы не писать много однотипного JavaScript-кода вручную.

• В статье «Ценность z-index» объясняется, почему хаотичные большие значения z-index быстро превращают интерфейс в беспорядок и как навести порядок с помощью токенов слоёв.
• В материале о главной ловушке Anchor Positioning показан неожиданный побочный эффект новой CSS-возможности, о котором стоит знать заранее.
• В заметке о свойстве tabular-nums на простом примере объясняют, как сделать числа визуально аккуратнее и ровнее в таблицах, счётчиках и карточках.
• В обзоре нативной случайности в CSS рассказывают о будущем функций random() и random-item() и о том, что с ними можно будет делать, когда поддержка станет шире.
• В статье про Flappy Bird только на HTML и CSS показывают любопытный эксперимент: простую игру можно собрать даже без JavaScript.

📦 JavaScript

Temporal дошёл до Stage 4

На очередной встрече TC39 предложение Temporal перешло на Stage 4 — это очень важный этап для новой стандартной работы с датой и временем в JavaScript. В статье «Temporal: девятилетний путь к исправлению времени в JavaScript» подробно объясняется, почему старый Date давно не устраивает разработчиков и что именно улучшает Temporal. Теперь остаётся дождаться, когда Node.js включит Temporal по умолчанию.

Асинхронные переходы между страницами на чистом JavaScript

В разборе async page transitions на Vanilla JavaScript показано, как сделать лёгкий SPA-роутер с плавными crossfade-переходами между страницами. Материал полезен тем, кто хочет понять механику таких переходов без большого фреймворка, используя обычный JavaScript, GSAP и Vite.

Насколько быстрым должен быть сайт на самом деле

В статье «Насколько быстро — это уже достаточно быстро?» предлагают смотреть на производительность не только через сухие метрики, но и через реальный пользовательский опыт. Это хороший вводный материал для новичков, которые уже знают про Lighthouse и Core Web Vitals, но хотят понять, как связывать цифры с ощущением скорости.

Исследование утечек памяти во фронтенде

В эмпирическом исследовании утечек памяти автор проанализировал 500 репозиториев, из которых 210 были React-приложениями. Самые частые проблемы оказались довольно приземлёнными: забытые clearTimeout / clearInterval и неубранные обработчики событий. Для новичков это хороший материал, чтобы понять, какие мелкие недочёты со временем превращаются в реальные баги производительности.

• В заметке про requestAnimationFrame разбирают, как с его помощью сделать анимации плавнее и не перегружать браузер.
• В подборке бенчмарков минификации JavaScript сравнивают скорость и качество работы инструментов вроде esbuild, Bun, SWC и Uglify.
• В статье как декодировать VIN на JavaScript объясняется, как работать с кодами идентификации автомобилей, а при необходимости можно отдельно посмотреть, что такое VIN.

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

Vite 8.0

Vite 8.0 — крупное обновление популярного инструмента сборки. Для разработчиков на React особенно важно, что @vitejs/plugin-react v6 больше не требует Babel: часть работы теперь берёт на себя Oxc. Ещё одно большое изменение — Rolldown приходит на замену Rollup и esbuild в ряде сценариев. Также появились поддержка Wasm для SSR, проброс логов браузерной консоли в терминал и заметные улучшения производительности. Для проектов на Remix, TanStack Start и Astro это особенно хорошие новости.

• Vitest 4.1 получил поддержку Vite 8, так что обновлять тестовую инфраструктуру будет проще.

Переписали 130 тысяч строк с React на Svelte за две недели

В статье «Как мы переписали 130K строк с React на Svelte за две недели» команда рассказывает, как быстро мигрировала большой проект. Материал интересен тем, что показывает: с современными инструментами и LLM переход между фреймворками стал заметно реальнее, чем раньше. А в обсуждении на Bluesky эта история используется как аргумент против идеи, что все будут навсегда заперты в одном популярном стеке.

shadcn/cli v4

shadcn/cli v4 — важное обновление CLI для shadcn/ui. Теперь инструмент лучше подходит не только людям, но и AI-агентам: появились skills, пресеты для быстрого переключения дизайн-систем, dry run для предварительного просмотра изменений и обновлённый shadcn/create, который помогает быстрее просматривать готовые наборы компонентов.

• Dan Abramov отметил, что на сайте React появился режим Copy Page, который копирует страницу как Markdown. Можно также просто добавить .md к URL документации.
• В посте Joe Savona говорится, что у React Compiler скоро появится версия на Rust.
• В официальной документации React появятся интерактивные RSC-песочницы.
• Пользователям React Admin пригодится сводка свежих изменений.
• Рендеринг ошибок в React Server Components объясняет, что происходит, когда серверный компонент падает во время рендера.
• В видео TanStack Start SSR: 3 Reasons to Love It разбирают, чем хорош SSR в TanStack Start.
• Статья о динамических формах в React и Next.js показывает, как строить формы со сложной логикой.
• Материал Why React Fiber Exists полезен тем, кто хочет понять, зачем React понадобилась своя архитектура рендера.

Eleventy теперь называется Build Awesome

Создатель 11ty объявил, что Eleventy меняет имя на Build Awesome. Ребрендинг должен выровнять название с экосистемой Font Awesome и Web Awesome, а вместе с этим планировался запуск Pro-версии с визуальным редактором. Правда, связанный с этим Kickstarter позже поставили на паузу. Новость вызвала споры: разработчики активно обсуждали сам ребрендинг, свои впечатления и общее направление проекта.

Solid 2.0.0 Beta: эпоха <Suspense> закончилась

Бета Solid 2.0 приносит важный сдвиг в том, как фреймворк работает с асинхронностью. Теперь вычисления могут возвращать Promise и асинхронные итераторы напрямую, а реактивная система умеет сама «останавливать» и «возобновлять» нужные участки приложения без старой схемы с <Suspense>. Вместо него для первого рендера теперь используется <Loading>, а для мутаций появился новый примитив action() с поддержкой оптимистичных обновлений. Для новичка это значит одно: работа с загрузками и изменением данных становится более встроенной в сам фреймворк, а не навешивается поверх. Но если проект уже на Solid 1.x, изменения довольно серьёзные, поэтому лучше сразу открыть гайд по миграции.

Astro 6.0

Astro 6.0 начинает использовать новый Environment API из Vite в команде astro dev. Для разработчика это значит, что локальная разработка становится ближе к реальному продакшен-окружению, а значит неприятных сюрпризов после деплоя должно быть меньше. Ещё одна заметная новинка — новый Fonts API, который упрощает работу с кастомными шрифтами.

• В разборе source maps для Next.js объясняется, как настроить карты исходников так, чтобы Sentry показывал стек ошибок по вашему коду, а не по непонятным минифицированным чанкам.
• Из релизов вышли React Native 0.85 RC.0 и Recharts 3.8.

📘 TypeScript

TypeScript 6.0 Release Candidate

Релиз-кандидат TypeScript 6.0 выглядит не как революция, а как важный подготовительный шаг перед будущим TypeScript 7.0, который Microsoft хочет сильнее связать с нативной реализацией на Go. Главная практическая мысль для разработчика: если вы обновитесь и приведёте tsconfig.json к новым требованиям, то потом будет проще перейти на следующие версии. Между недавней beta и текущим RC отличий немного — Microsoft отдельно перечисляет небольшие изменения.

Семь лет до TypeScript: как Patreon перевёл 11 000 файлов

В материале о миграции Patreon на TypeScript рассказывается, как команда постепенно переводила огромную кодовую базу с JavaScript. Это не статья про «волшебную кнопку миграции», а честный разбор того, какие инструменты, приёмы и организационные решения помогают перевести большой проект без остановки разработки. Полезно всем, кто думает, что перейти на TypeScript можно только в маленьком проекте.

ArkType 2.2: типы TypeScript как runtime-валидаторы

ArkType 2.2 интересен идеей «один раз описал тип — и он работает и как типизация, и как проверка во время выполнения». Для новичков это удобная мысль: не нужно отдельно писать TypeScript-тип и отдельно валидатор. В версии 2.2 появился type.fn, который умеет проверять аргументы и возвращаемое значение функций прямо во время работы программы.

⚙️ Node.js

Персональные правила Маттео Коллины для AI-разработки под Node.js

Маттео Коллина — один из самых заметных участников экосистемы Node.js и создатель Fastify — рассказал, как он использует AI в работе так, чтобы код получался ближе к его собственному стилю. В материале «Персональные навыки Маттео Коллины для AI-разработки под Node.js» собраны практики и правила, которые можно использовать как основу для собственных AI-агентов. Если хочется глубже, у него отдельно опубликованы навыки для Node.js, Fastify и работы с документацией. Вдобавок можно посмотреть, как подобные подходы проверяли на практике в эксперименте Simon Maple.

Node.js переходит на один мажорный релиз в год

Команда Node.js официально утвердила новое расписание релизов: начиная с Node 27 платформа будет выпускать один крупный релиз в год. Для большинства разработчиков на LTS это почти ничего не меняет, но тем, кто следит за Current-веткой и ранним внедрением новых возможностей, станет проще понимать ритм обновлений.

• Вышли новые версии Node.js v25.8.1, v22.22.1 LTS и v20.20.1 LTS — полезно обновиться, если вы следите за исправлениями и стабильностью.

В 76% проверенных Node-репозиториев нашли блокирующий I/O

Исследование «В 76% из 250 Node-репозиториев нашли блокирующий I/O» показывает, что синхронные вызовы вроде execSync, existsSync и readFileSync всё ещё часто встречаются в реальных проектах. Для новичков это хороший повод разобраться, почему такие операции могут тормозить сервер и мешать масштабированию приложения.

• В Node появился встроенный словарный Zstd: статья «Словарное сжатие наконец-то здесь, и оно очень хорошее» объясняет, что начиная с Node v24.6+ и v22.19+ в zlib есть поддержка dictionary compression. Это особенно интересно для сервисов, где важны скорость и размер передаваемых данных.

Браузеры и DevTools

Chrome 146: новые анимации и Sanitizer API

В анонсе Chrome 146 среди главных новинок отмечены новые scroll-triggered анимации и поддержка Sanitizer API. Для фронтендеров это значит больше нативных возможностей для анимации интерфейсов и безопасной работы с HTML-контентом.

• Mozilla готовит редизайн Firefox под кодовым именем Nova, и уже можно посмотреть ранние скриншоты.
• В обзоре новинок DevTools в Chrome 146 показывают встроенные аудиты Lighthouse и новые возможности отладки, связанные с DevTools MCP server.
• В материале о поддержке PWA в браузерах и на устройствах собрана полезная практическая сводка по тому, где прогрессивные веб-приложения работают хорошо, а где всё ещё есть ограничения.

🤖 ИИ и остальное

Как украсть npm publish token через GitHub Issue

В статье про кражу npm-токенов через GitHub Issue разобран показательный сценарий атаки. В одном репозитории использовалась AI-система для разбора issues, и заголовок issue напрямую попадал в prompt. Дальше это стало только первым шагом многоэтапной атаки. Для фронтендера и любого open source-разработчика здесь важный урок: автоматизация с ИИ, CI и токенами может быть опасной, если между пользовательским вводом и секретами нет жёсткой изоляции.

Wikipedia пострадала от самораспространяющегося JavaScript-червя

Разбор инцидента в Wikipedia показывает, как случайно активированный скрипт использовал общий глобальный сценарий и испортил почти 4 000 страниц на Meta-Wiki. Это хороший пример того, почему общие пользовательские скрипты и глобальные хуки в крупных системах требуют очень осторожного обращения.

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

Reveal.js 6.0

Вышел Reveal.js 6.0 — популярный HTML-фреймворк для презентаций. В версии 6.0 есть ломающие изменения, проект перешёл на Vite и получил официальный React-обёртку, но базовая идея осталась прежней: презентации по-прежнему можно собирать прямо на HTML.

Video.js 10 Beta

Популярный видеоплеер Video.js серьёзно переработали: бета Video.js v10 уже доступна. Это важная новость для тех, кто встраивает видео на сайты и хочет следить за обновлением старых, но до сих пор востребованных библиотек.

TinyBase 8.0: реактивное хранилище для local-first приложений

TinyBase 8.0 — это реактивное хранилище данных и движок синхронизации, который в некоторых сценариях может закрыть роль целого маленького бэкенда. Он умеет интегрироваться с разными системами хранения, а в версии 8.0 появились middleware и возможность хранить объекты и массивы прямо в ячейках. Для local-first приложений это довольно заметное обновление.

VMPrint: движок вёрстки PDF на чистом JavaScript

VMPrint предлагает интересную альтернативу связке с headless Chrome для генерации PDF. Авторы делают ставку на предсказуемый и повторяемый результат: если вход одинаковый, раскладка PDF тоже должна быть одинаковой вплоть до мелких деталей. Можно посмотреть и пример готового PDF. понять, как соединить типизацию и проверку данных во время выполнения.

MikroORM 7: большой шаг для TypeScript ORM

MikroORM 7 заметно обновился: отказался от Knex в пользу Kysely, убрал жёсткую привязку к Node.js, получил type-safe query builder, поддержку CTE и стал нативным ESM-пакетом. Если вы уже используете эту ORM, пригодится гайд по переходу с v6 на v7. Даже если ORM вам пока не нужна, это хороший пример того, куда движется современная TypeScript-экосистема.

node-sqlite3 6.0 стал последним поддерживаемым релизом

Популярная привязка SQLite для Node.js — node-sqlite3 6.0 — получила финальный релиз и больше не будет поддерживаться. Если библиотека используется в проекте, самое время смотреть на альтернативы: better-sqlite3 или встроенный модуль node:sqlite. Дополнительно стоит знать, что уже вышел better-sqlite3 12.7.

Обновления

• Inspira UI предлагает набор open-source компонентов для анимированных интерфейсов на Vue и Nuxt; посмотреть примеры можно в галерее компонентов.

• Сервис Photo Palettes умеет строить цветовые палитры по фотографиям и может пригодиться в работе над визуальным стилем интерфейса.

• В каталоге All SVG Icons собрано более 250 тысяч SVG-иконок, которые можно настраивать, скачивать и копировать в форматах для SVG, React, Vue и других стеков.

• HeyForm — open-source конструктор форм, опросов и анкет.

• EXIF Metadata Viewer — расширение для Chrome, которое показывает скрытые метаданные изображений.

• Вышли pnpm v10.32.0 и Jest 30.3 — небольшие, но полезные обновления для повседневной разработки.

• Из релизов: Ember 6.11, Ionic Framework 8.8 и Knockout 3.5.2. Особенно забавно, что Knockout получил первое обновление за шесть лет.

• RevoGrid — производительный data grid для больших наборов данных, который работает с Vue, Angular, React, Svelte и обычным JavaScript. У проекта есть живое демо и репозиторий на GitHub.

• SQLite JS 1.3 позволяет писать пользовательские функции SQLite на JavaScript.

• Heapify 1.0 — быстрая очередь с приоритетами на базе бинарной кучи.

• OpenPlayer.js 3.0 — модульный HTML5-медиаплеер с поддержкой tree-shaking.

• Emittery 2.0 — современный асинхронный event emitter.

• Svelte Sonner 1.1 — компонент toast-уведомлений для Svelte.

• EmbedPDF 2.8 — JavaScript-просмотрщик PDF, не привязанный к конкретному фреймворку.

• Tabulator 6.4 — библиотека для интерактивных таблиц.

• melonJS 18.0 — лёгкий 2D-движок для HTML5-игр.

• flatted 3.4 — быстрый парсер circular JSON.

• Poku 4.0 — кроссплатформенный test runner.

• Библиотека Systeminformation помогает узнать данные о системе и железе: CPU, USB, Wi‑Fi, Bluetooth, принтеры и многое другое. Особенно полезна для desktop-утилит и системных приложений.

• Emittery 2.0 — небольшой современный асинхронный event emitter для Node.js и браузера. Подойдёт тем, кто хочет простой и аккуратный инструмент для событийной архитектуры.

• Verdaccio 6.3 — приватный npm-реестр и кэш-прокси для команд и компаний.

• get-windows 9.3 — библиотека для получения данных об открытых окнах в macOS, Windows и Linux.

• Mercurius 16.8 — инструмент для создания GraphQL-серверов и gateway поверх Fastify.

• wallpaper 7.3 — кроссплатформенная библиотека для установки обоев рабочего стола.

• fnm 1.39.0 — быстрый менеджер версий Node.js, написанный на Rust.

• Вышли ESLint 10.0.3 и ESLint 9.39.4 — полезно для тех, кто следит за линтингом и стабильностью пайплайна.

• Вышел pnpm 10.32.0 — очередное обновление популярного пакетного менеджера.

• Доступен Prisma 7.5 — новая версия одной из самых популярных ORM в TypeScript-мире.

• React Aria 1.16.0 добавил мультивыбор в ComboBox, и это можно посмотреть в демо.

• React Modal Sheet 5.4 — гибкий bottom sheet-компонент на базе Motion.

• BaseUI 1.3 — библиотека неоформленных UI-компонентов, на базе которых можно собирать собственный дизайн.

• react-share v5.3.0 — кнопки шеринга для React-приложений.

• Hit Area добавляет Tailwind CSS-утилиты hit-area-*, чтобы расширять область нажатия вокруг маленьких элементов интерфейса. Это особенно полезно для кнопок и иконок на мобильных устройствах.

• Bippy — набор инструментов для работы с внутренностями React. Он маскируется под devtools и получает доступ к внутренним механизмам React без изменений в коде приложения.

• theSVG — каталог из 4000+ брендовых иконок, которые можно взять как SVG или JSX для React. Для примера можно посмотреть логотип Apple.