FWFrontend Weekly
Ctrl K
Поддержи
На главную

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

Как читать этот дайджест
  • Начните с заголовков статей, чтобы получить общее представление о содержании
  • Быстро пробегитесь по первым абзацам, чтобы понять актуальность материалов именно для вас
  • Выберите наиболее интересные или полезные темы под текущие задачи
  • Планируйте чтение: выделите, например, 15 минут утром и 15 минут вечером
  • Не пытайтесь прочитать всё сразу — возвращайтесь к дайджесту в удобное время
  • При повторном просмотре читайте выбранные статьи более вдумчиво, делая заметки
  • Не сожалейте, если прочитали лишь часть: ценность в качестве, а не в количестве
  • Используйте закладки для сохранения интересных материалов
  • Делитесь инсайтами и ссылками с коллегами — так информация лучше усвоится
Фронти на связи - выпуск #60! 🗞️
HTML берет на себя еще больше интерактивности, а браузеры готовят JPEG XL. 🧪
CSS учится балансировать flex-строки, связывать страницы и рисовать настоящее 3D. 🎨
Bun 1.4 переехал на Rust, а Solid 2.0 заморозил новый API. 📦
React-проекты мигрируют между фреймворками, ускоряют тесты и закрывают уязвимости. ⚛️
React Native получил новые библиотеки для графики, фоновых вычислений и сборки. 📱
Node.js 26 читает ZIP, pnpm 12 переписан на Rust, а Fetch Server API обсуждается. 🟢
TypeScript прячет внутреннее состояние и даже считает числа во время компиляции. 📘
ИИ-агенты обзаводятся памятью, IDE, браузерами и собственными бенчмарками. 🤖
Инструменты недели работают с медиа, редакторами, тестами и терминалами. 🧰
Фронти - маскот дайджеста

🧪 HTML и веб-платформа

Современный HTML берет на себя задачи, для которых раньше требовался JavaScript

Manuel Matuzović обновил свой шаблон HTML-документа для 2026 года и подробно объяснил назначение элементов, которые использует в <head>. Это не заготовка для бездумного копирования, а удобная проверка базовых настроек страницы: кодировки, viewport, метаданных и других деталей, о которых легко забыть.

Chris Burnell дополняет тему восемью примерами того, что современный HTML уже умеет без JavaScript. Среди них popover, команды для управления элементами и hidden="until-found", позволяющий браузерному поиску раскрывать скрытый фрагмент страницы. У новых возможностей пока есть ограничения, но они помогают строить более простые и устойчивые интерфейсы.

  • В Firefox 154 появились сокращенная запись text-box, функции sibling-index() и sibling-count(). Последняя возможность одновременно перешла в Baseline, поэтому ее поддержка становится достаточно широкой для практического применения.
  • Mozilla рассказала о планах добавить JPEG XL в Firefox. Формат предлагает хорошее сжатие, HDR и широкую цветовую гамму; Chrome также готовит его поддержку.
  • В Chrome 153 Beta тестируют новые возможности платформы, включая CSS-свойство scroll-axis-lock, которое ограничивает прокрутку выбранной осью.
  • Официальное расширение WordPress для браузера переносит частые действия из верхней панели администратора в интерфейс расширения.
  • Статья об аккордеоне, содержимое которого видит браузерный поиск показывает, как не спрятать полезный текст от функции «Найти на странице».
  • Компонент Form Saver сохраняет значения формы в localStorage, восстанавливает их после неожиданного закрытия страницы и очищает после отправки. Поведение можно проверить в живых примерах.
  • Исследование показывает, как AliExpress пытался распознавать устройства неслышимыми звуками. Защита Firefox нейтрализовала прием, а Chrome изначально не выдавал нужные данные.
  • Авторы проекта 0.mk проверили 657 607 адресов и показали, куда исчезают старые ссылки. Страницы переезжают, домены закрываются, а накопленные знания постепенно становятся недоступными.

🎨 CSS и дизайн

flex-wrap: balance равномерно распределяет элементы по строкам

Ahmad Shadeed разобрал балансировку элементов с flex-wrap: balance. Обычный перенос может оставить в последней строке одинокий элемент, даже если более равномерное распределение выглядело бы лучше. Новое значение пытается подобрать число элементов в каждой строке так, чтобы композиция оставалась аккуратной при разной ширине контейнера.

Вместе с ним предлагается flex-line-count, с помощью которого стили смогут учитывать количество получившихся строк. Пока обе возможности есть только в Chrome, поэтому в статье отдельно показаны интерактивные примеры и запасные решения.

CSS готовится анимировать переходы между конкретными страницами

Предложение CSS Navigation Matching связывает страницы через правила @location, а переходы между ними описывает в @navigation. В перспективе это позволит оформлять разные анимации для движения вперед и назад или для конкретных маршрутов без JavaScript.

Сейчас это ранний черновик без реализации в браузерах. Но он показывает, как View Transitions могут превратиться из набора общих эффектов в полноценный способ описания навигации средствами CSS.

От псевдообъема до настоящей 3D-сцены на CSS

Интерактивное руководство «3D CSS: от Super Mario Bros. 3 до Mario 64» начинает с плоской имитации глубины и постепенно переходит к трехмерным преобразованиям. Для этого достаточно разобраться с шестью свойствами и значениями, включая perspective, preserve-3d и translateZ.

  • История миграции с Sass на нативный CSS объясняет, какие возможности препроцессора уже заменили переменные, вложенность и другие функции платформы.
  • Будущий селектор по префиксу класса может дать запись наподобие .btn-*, выбирающую все классы, начинающиеся с btn-.
  • Генератор corner-shape для сквирклов позволяет настроить форму ползунками, скопировать CSS и получить запасной вариант. У автора есть и разбор техники с fallback.
  • CSS-in-JS Arena сравнивает StyleX, Panda CSS и новый Bamboo CSS на одном приложении с React Router 8.
  • Dither превращает изображения в настраиваемую векторную штриховку: можно выбрать градиент, один из девяти узоров, до восьми цветов и экспортировать результат в SVG или PNG.
  • Dither Image Online предлагает более простой способ добавить фотографии пиксельный ретро-эффект прямо в браузере.
  • Архив из более чем 11 000 изображений помогает находить вручную отобранные произведения, перешедшие в общественное достояние.

Заходите в Telegram-канал

Там можно спокойно обсудить выпуск, принести свою ссылку, задать вопрос или просто отметить материал, который пригодился в работе

Заглянуть

📦 JavaScript, Bun и фреймворки

Bun 1.4 завершил большой переход с Zig на Rust

Bun 1.4 стал результатом масштабной переработки рантайма. Команда отдельно описала переезд с Zig на Rust, в котором для механической части использовала ИИ, а затем вручную доводила совместимость и производительность.

Релиз лучше работает с пакетами и инструментами из экосистем Node.js, а также с Next.js, Playwright, Vitest и Nuxt. Одновременно выросла пропускная способность и снизилось потребление процессора и памяти.

Solid 2.0 RC перестраивает асинхронность вокруг реактивного графа

В релиз-кандидате Solid 2.0 асинхронные данные стали обычной частью реактивного графа и могут проходить через memo-вычисления. Отдельные API createResource, batch и startTransition больше не нужны, а SolidStart превращается в настройку start: true для Vite-плагина.

Публичный API уже заморожен перед финальной версией. Авторы библиотек могут начинать адаптацию, не ожидая новых крупных перестроений.

  • SvelteKit 3 RC позволяет заранее проверить следующий крупный релиз и подготовить приложения к несовместимым изменениям.
  • Svelte Bits переносит в Svelte набор анимированных компонентов React Bits от того же автора.
  • Formisch 1.0 - headless-библиотека форм, в которой схема Valibot одновременно задает типы и правила проверки. Она работает с восемью фреймворками и поддерживает Angular и React Native.
  • Ionic Framework 9 обновил мобильный UI-набор для React, Angular и Vue после двухлетнего перерыва. В релиз вошли React Router 6 и zoneless change detection, а переход с v8 описан в руководстве.
  • Papa Parse 5.7 развивает быстрый конвертер CSV в JSON и обратно с поддержкой больших файлов и потоковой обработки.
  • MapLibre GL JS 6.6 обновил библиотеку интерактивных векторных карт с GPU-рендерингом.
  • Plotly.js 4.0 принес крупное обновление библиотеки интерактивных графиков и визуализаций.
  • Axios 1.20 обновил HTTP-клиент для браузера и Node.js; основной код и документация доступны в репозитории Axios.
  • Вышли ESLint 10.9 и исправляющий его ошибки ESLint 10.9.1, а также pnpm 11.23.
  • Музыкальная теория для JavaScript-разработчиков выводит ноты, гаммы, аккорды и последовательности из арифметики и дает запускать примеры через Web Audio API.
  • Статья об ESM и CommonJS показывает: import остается связан с экспортируемым значением, а деструктурированный require() получает копию. Это особенно заметно при циклических зависимостях.
  • Alex Russell объясняет, почему для производительности удалить лишний код полезнее, чем хитрее планировать его загрузку.
  • Cloudflare рассказала о переезде блога с WordPress на EmDash - собственную CMS на Astro. Команда тестировала нагрузку через k6 и постепенно переводила трафик прокси-воркером; EmDash доступен отдельно.
  • TermDOM дает DOM и layout engine для терминальных интерфейсов, поэтому TUI можно писать на HTML, CSS и любом фреймворке, а не только на React через Ink. В версии 0.1.5 появился CSS Grid.
  • N64.js - эмулятор Nintendo 64 на JavaScript, который можно запустить в браузере со своим ROM-файлом.
  • Библиотека YouTube.js 18 обновила JavaScript-клиент для внутреннего API YouTube.

⚛️ React и Next.js

Lovable перенесла 850 тысяч строк с Next.js на TanStack Start

В отчете Lovable объяснила, как мигрировала с Next.js на TanStack Start. Проект насчитывал почти 400 маршрутов и больше 850 тысяч строк, поэтому одномоментный переход был бы слишком рискованным.

Команда поставила оба фреймворка за общим прокси, переносила маршруты постепенно и держала общий код в доступной обоим приложениям папке. Подход показывает, как раскладывать большую миграцию на небольшие проверяемые шаги.

В Next.js закрыли две критические уязвимости удаленного выполнения кода

Разработчики опубликовали августовское обновление безопасности Next.js, исправляющее две критические RCE-уязвимости без аутентификации. Проекты на актуальной ветке следует обновить минимум до 16.3.3, а приложения на старой поддерживаемой ветке - до 15.5.24.

RCE означает, что злоумышленник может заставить сервер выполнить чужой код. Поэтому такое обновление нельзя откладывать до обычного цикла обновления зависимостей.

React Canary учится откладывать отдельные компоненты до браузера

В Canary-канале появился API browser() для компонентов, которые невозможно отрисовать на сервере. Вызов use(browser()) останавливает серверный рендер ветки, оставляет ближайший fallback от Suspense, а затем показывает компонент в браузере. Статус экспериментальных API объясняет политика версионирования React.

Параллельные transitions включили по умолчанию в Canary-сборках, включая React Native. Механизм позволяет нескольким независимым обновлениям выполняться одновременно; обсуждение реализации помогает понять его устройство.

  • Материал о data grid для React, Vue и Svelte показывает, что основные затраты приходятся не на фреймворк, а на виртуализацию, обновление данных и работу браузера.
  • В Next.js 16.3 показаны Instant Navigations, Cache Components и Partial Prefetching на четырех открытых приложениях.
  • Надежный prefetch запросов с TanStack Router выносит queryOptions в контекст маршрута, чтобы loader и компонент использовали одно определение.
  • Статья о координации оптимистичных обновлений в Next.js разбирает интерфейсы, которые сразу показывают предполагаемый результат, а затем согласуют его с сервером.
  • Автор ускорил тесты React Testing Library на 43%, найдя и убрав лишнюю работу в тестовом окружении.
  • Oxlint получил поддержку React Compiler: 22 правила запускают те же проверки, что и компилятор, и находят нарушения Rules of React. Отдельный разбор ускорения на Rust объясняет выигрыш относительно Babel-плагина, а основы линтера есть в документации Oxc.
  • Waku 1.0 RC заморозил API минимального React-фреймворка на Server Components и добавил типобезопасную навигацию.
  • Rifm 1.0 предлагает небольшой компонент и hook для форматированных полей ввода, который сохраняет позицию курсора.
  • В TanStack Query 5.102 появились методы query и infiniteQuery, призванные заменить fetchQuery и fetchInfiniteQuery. Изменение обсуждается в pull request, а автор назвал его крупнейшим релизом со времен v5.
  • GTKX 1.5 позволяет создавать на React настоящие GTK-приложения без WebView и подключать React Hook Form к элементам Adwaita. Предыдущий релиз GTKX 1.3 показывает развитие проекта, а основы собраны на сайте GTKX.
  • Streamdown 2.6 - замена react-markdown от Vercel для потокового Markdown в ИИ-интерфейсах; примеры доступны на сайте проекта.
  • react-jsonschema-form 6.8 строит формы по JSON Schema, а playground помогает увидеть результат схемы.
  • nuqs 2.10 управляет типобезопасным состоянием в query-параметрах URL через API, похожий на useState.
  • Material UI 9.4 обновил большой набор готовых React-компонентов.

📱 React Native и мобильная разработка

  • React Native 0.87 принес обновление платформы и базовых инструментов для нативных приложений на React.
  • Руководство по созданию 3D ИИ-аватара показывает рендеринг персонажа через React Native Filament.
  • Nano Icons превращает папку SVG в быстрые нативные иконки для React Native и Expo.
  • React Native Bottom Sheet добавляет встроенные и модальные нижние панели с динамическим размером и отслеживанием положения.
  • Nitro Vision выполняет на устройстве вырезание объектов, распознавание изображений и OCR через Nitro Modules.
  • FACETPACK ускоряет сборку React Native с помощью Rust, улучшает ошибки и включает Doctor CLI.
  • react-native-data-detector находит в тексте телефоны, ссылки, адреса, даты и email через системные API iOS и Android.
  • react-native-runtimes выносит тяжелую UI- и бизнес-логику в отдельные рантаймы Hermes, чтобы основной поток не зависал.
  • react-native-morph-view плавно превращает одно изображение в другое нативным шейдером.
  • d3-maps дает React 19 и Vue 3 компоненты для SVG-карт с областями, маркерами, маршрутами и масштабированием на базе D3.
  • DSSSP - React-компоненты для графиков частотной характеристики и настройки аудиофильтров.

⚙️ Node.js

Node.js 26.8 научился работать с ZIP без сторонних пакетов

В Node.js 26.8.0 появился API zlib.ZipBuffer для чтения и записи ZIP. В REPL добавили подсветку синтаксиса. Вскоре вышла версия 26.8.1, исправившая неверную строку версии.

Node.js 24.20 LTS получил package maps, аудит разрешений, node:stream/iter и WebAssembly JSPI, упрощающий взаимодействие синхронного WASM-кода с асинхронным JavaScript.

Сообщество обсудило ближайшее будущее Node.js

В обзоре Node.js Interactive 2026 собраны планы по ИИ, безопасности цепочки поставок, WinterCG в Ecma TC55, QUIC и HTTP/3 и переходу Node.js на один крупный релиз в год.

Проект запустил ежегодный опрос пользователей. Для контрибьюторов приняли правила использования ИИ: автор обязан понимать и проверять сгенерированный код, а автоматические PR требуют согласования.

📘 TypeScript

🤖 ИИ и инструменты для агентов

Как ИИ меняет фронтенд-разработку и обучение

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

Автор предлагает проверять понимание, сохранять фундаментальные знания о платформе и не путать быстрый ответ с надежным решением. Это полезный взгляд на обучение, когда сгенерировать рабочий фрагмент проще, чем объяснить его поведение.

  • TanStack AI перешел в RC: API стабилизируется, а команда показывает основные возможности для потоковых ИИ-интерфейсов.
  • CodePilot - настольный клиент для агентов с несколькими моделями, MCP, skills и управлением с телефона.
  • ctx-wire запускает команды, сжимает вывод фильтрами и удаляет секреты перед передачей модели.
  • IAXT записывает действия Claude Code, Cursor, Aider, Codex и Copilot на macOS: команды, файлы, пакеты и Git.
  • Silo - нативная IDE для одновременной работы с агентами в нескольких проектах.
  • Reasonix - терминальный coding agent для DeepSeek, оптимизированный под prefix cache.
  • agentmemory добавляет постоянную память нескольким coding agents.
  • Dev Browser дает агенту управление браузером через изолированные JavaScript-сценарии и готовый skill.
  • AI Agents From Scratch учит собирать локальных агентов без фреймворков и понимать цикл модели, инструменты и состояние.
  • OpenHands - самостоятельный центр управления агентами, запускающий OpenHands, Claude Code, Codex, Gemini и ACP-совместимые решения.
  • Verne объединяет агента, файлы, редактор, браузер и Git в одной среде.
  • Meterbility записывает шаги агента, позволяет вмешаться, ответвить прогон и сравнить траектории.
  • ReactBench оценивает решение реальных React-задач агентами по работоспособности, производительности, доступности и качеству.

⚒️ Инструменты, редакторы и тестирование

MicroLighter подсвечивает код, не меняя DOM

MicroLighter - подсветка синтаксиса размером около 2 КБ без зависимостей. Вместо оборачивания токенов в <span> она использует CSS Custom Highlights API, поэтому разметка остается чистой. Темы и примеры есть в демо.

Stryker проверяет не код, а качество тестов

Stryker Mutator 10 намеренно меняет операторы, условия и значения, а затем запускает тесты. Если набор остается зеленым, значит он не замечает потенциальную ошибку. Преобразования есть в каталоге мутаторов, а настройка - в руководстве StrykerJS.

  • Mobile View показывает до пяти мобильных и планшетных размеров рядом и синхронизирует прокрутку.
  • EazyStudio объединяет более 75 браузерных утилит: изображения, PDF, аудио, QR-коды и JWT.
  • @web-kits/audio описывает синтезируемые звуки JavaScript-объектами и воспроизводит их одним вызовом.
  • Hyperblam предлагает декларативную оболочку над Web Audio API без зависимостей: инструменты и эффекты собираются HTML-разметкой.
  • ffmpeg webCLI запускает видеомонтаж на ffmpeg.wasm в браузере, не загружая файлы на сервер.
  • T-SQL Analyzer проверяет T-SQL в VS Code по более чем 140 правилам проектирования и производительности.
  • SuperDoc для VS Code открывает и редактирует .docx прямо в редакторе.
  • AI Engineering Fluency считает расход токенов, стоимость и статистику работы с ИИ в VS Code.
  • Save Editors Layout сохраняет расположение вкладок VS Code и применяет шаблон раскладки.
  • Claude Code Agent Monitor добавляет в VS Code панель активности Claude Code с токенами и стоимостью.
  • OGee показывает Open Graph-карточку страницы для разных платформ и тем.
  • shadscan проверяет React-компоненты shadcn на регрессии доступности, состояния и композиции.
  • pwa-check проверяет HTML, manifest, скрипты и service worker приложения PWA.
  • playwright-recorder-plus улучшает запись прогонов Playwright: качество, пауза, обрезка, несколько страниц и аудио.
  • pipenet - самохостинговая альтернатива localtunnel с клиентом и сервером.
  • git-knife дает GUI для изменения сообщения, автора и дат Git-коммита.
  • В Git 2.54+ команда git history split делит коммит по фрагментам; контекст есть в обзоре Git 2.54.
  • Lore экспериментирует с системой контроля версий для больших объемов данных и команд.
  • cmux - терминал macOS на Ghostty с вертикальными вкладками, разделением панели, уведомлениями агентов и CLI.
  • Instagit предоставляет MCP-серверу структурированный контекст о Git-репозитории.
  • rpg - терминал PostgreSQL на Rust, совместимый с psql, с диагностикой и ИИ-помощником.
  • HonorBox превращает GitHub-репозиторий в магазин цифровых товаров со Stripe.