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

🧪 HTML и API

WebAssembly 3.0 официально завершён

Вышла третья версия стандарта WebAssembly, которая уже поддерживается большинством браузеров. В неё вошли важные улучшения: 64-битные адресные пространства, сборка мусора, обработка исключений, типизированные ссылки и другие функции, значительно улучшающие взаимодействие с JavaScript. Читать статью

• Офлайн-документация MDN в одном архиве Bogdan Popescu собрал полные комплекты документации MDN по HTML, CSS, JavaScript и SVG в удобных для скачивания форматах. Идеально для работы без интернета. Скачать
• Как незрячие люди пользуются интернетом Обзор методов и инструментов, которые помогают слепым и слабовидящим пользователям взаимодействовать с вебом и реальным миром. Важный взгляд на инклюзивный дизайн. Читать статью
• IEEE назвал лучшие языки программирования 2025 года JavaScript занял 6-е место, TypeScript — 7-е. Оба остаются в топе самых востребованных языков — рейтинг.

🎨 CSS и дизайн

Что нужно знать о современном CSS (издание 2025)

Подробный обзор свежих возможностей CSS, которые уже можно использовать в реальных проектах благодаря улучшению поддержки в браузерах. Автор рассказывает о таких новинках, как атрибут popover, функция if(), свойство field-sizing и других. Это отличный способ понять, какие инструменты CSS уже «созрели» для повседневного применения и что ждёт нас в ближайшем будущем. Читать статью

CSS-свойства offset и animation-composition для создания круговых меню

Показано, как с помощью относительно простых и эффективных CSS-техник создавать красивые анимированные радиальные (круговые) меню. Используются современные свойства offset и animation-composition, которые позволяют управлять движением и комбинированием анимаций. Читать статью

Уже пора отказываться от Sass?

Автор замечает, что многие возможности, которые раньше были доступны только через препроцессоры вроде Sass (например, переменные, вложенные правила, функции), теперь появляются прямо в нативном CSS. Это заставляет задуматься: а стоит ли продолжать использовать Sass, если браузеры сами догоняют эти функции? Читать статью

Как внедрить CSS Cascade Layers в существующий проект

Руководство по постепенному внедрению CSS-слоёв (@layer) в унаследованный код без поломок. Это особенно полезно для больших проектов, где сложно переписать всё с нуля, но хочется начать использовать современные подходы к управлению специфичностью стилей. Читать статью

CSS Boilerplate с использованием cascade layers

Минималистичный стартовый файл для CSS-проектов любого масштаба. Основная особенность — структурирование стилей через @layer, что помогает избежать конфликтов и упрощает поддержку кода. Читать статью

• Свойство zoom наконец стало стандартом Раньше zoom был нестандартным свойством Internet Explorer, но за 25 лет оно прошло путь до официального стандарта и теперь входит в Interop 2025. Сегодня оно даёт уникальные возможности для масштабирования и управления макетом. Читать статью
• Ваши изображения, скорее всего, слишком большие Многие разработчики забывают использовать атрибут sizes в тегах <img>, из-за чего браузеры загружают изображения гораздо большего размера, чем нужно для текущего экрана. Это ведёт к перерасходу трафика и замедлению загрузки сайта. Читать статью

📦 JavaScript

• Серия статей от доктора Акселя Ройшмайера для новичков Автор знаменитых книг по JavaScript запустил цикл уроков для тех, кто только начинает путь в веб-разработке. Темы включают:
  • Числа, переменные и функции
  • Строки и методы
  • Логические значения и условия
  • Циклы
  • Объекты, массивы, Map и исключения
  • Введение во фреймворки (на примере Preact)
  • Установка пакетов и сборка проекта
  • Промисы и async/await
• 30 лет назад вышел Netscape Navigator 2.0 Beta — первый браузер с поддержкой JavaScript. Именно с него началась история языка, на котором сегодня работает большая часть веба — читать историю.
• TC39 одобрил новые предложения для стандарта JavaScript:
  • Import Bytes — импорт бинарных данных напрямую,
  • Iterator Chunking — разбиение итераторов на части,
  • Array.prototype.pushAll — массовое добавление элементов в массив. Это шаг к более выразительному и эффективному языку — агенда заседания.
• Temporal API скоро появится в Chrome — ожидается в версии Chromium 144. Temporal — это современная замена устаревшему Date, которая решает множество проблем с датами и временем — подробнее.
• Не используйте .reverse().find() — есть findLast() В современном JavaScript появился метод findLast(), который ищет последний подходящий элемент без изменения исходного массива. Это чище и быстрее — объяснение.
• Можно ли хранить большие данные в BigInt? Оказывается, BigInt в JavaScript позволяет хранить очень большие числа, и некоторые разработчики используют это не по назначению — например, для хранения данных. Интересный, но рискованный трюк — подробнее.
• JSON не везде одинаковый Разные языки программирования по-разному обрабатывают JSON: например, числа, даты или null могут интерпретироваться неоднозначно. Это частая причина багов при обмене данными между системами — читать.
• Стартовал опрос State of JavaScript 2025 Ежегодный масштабный опрос о состоянии экосистемы JavaScript снова открыт для участия. Пройти опрос

⚛️ React

TanStack Start достиг версии-кандидата 1.0

Фреймворк TanStack Start — это попытка создать полноценное решение для разработки React-приложений с поддержкой SSR и типобезопасностью, но без излишней сложности. Сейчас он вышел в стадию Release Candidate (v1.0), то есть почти готов к финальному релизу. Авторы приглашают сообщество протестировать его и дать обратную связь. Это отличный выбор, если вы ищете современный, гибкий и производительный инструмент для создания как SPA, так и серверных приложений на React.

Middleware теперь стабильна в React Router

В React Router 7.9.0 официально стабилизирована поддержка middleware через флаг future.v8_middleware. Middleware позволяет перехватывать и обрабатывать запросы до того, как они достигнут компонентов — это полезно для аутентификации, логирования или модификации данных. Подробности и примеры использования помогут понять, как применять эту функцию на практике.

Возможно, вам нужен useSyncExternalStore

Если вы часто используете useEffect для обновления состояния через useState на основе внешних данных (например, из глобального хранилища или WebSocket), то, скорее всего, вам подойдёт хук useSyncExternalStore. Он создан специально для синхронизации React-состояния с внешними источниками и помогает избежать лишних ререндеров и гонок состояний.

• Preact 11 beta: обновление легковесной альтернативы React Новая версия улучшает производительность и добавляет новые возможности для разработчиков, ценящих минимализм — обзор от InfoQ.
• ESLint-плагин против лишних useEffect в React Многие разработчики злоупотребляют useEffect. Этот плагин автоматически находит и подсвечивает ненужные эффекты, помогая писать чище и эффективнее — репозиторий.
• Сравнение Solid и React — автор делится впечатлениями: Solid показал, насколько React мог бы быть быстрее и проще, но, вероятно, никогда не станет таким из-за своей архитектуры. Читать сравнение.
• Что язык Elm научил автора о useReducer в React — размышления о том, как строгие ограничения в Elm помогают писать более предсказуемый код, и как применить эти идеи в React с помощью useReducer. Статья.
• Создание 3D-визуализации погоды с React Three Fiber — пошаговое руководство по созданию интерактивной 3D-карты погоды с использованием Three.js и React. Перейти к туториалу.
• Анимация элементов с Framer Motion в React — вводный гайд по созданию плавных и выразительных анимаций с популярной библиотекой Framer Motion. Изучить примеры.
• Руководство разработчика по безопасной аутентификации Обзор современных практик построения безопасной системы входа в веб-приложения. Статья поможет избежать распространённых ошибок и ускорит разработку с учётом лучших стандартов безопасности. Читать статью

⚙️ Node.js

• Node.js: v24.9.0 (Current) и v22.20.0 (LTS)
• Лучшие практики безопасности для npm Подробное руководство по защите проектов: от двухфакторной аутентификации до анализа зависимостей и настройки политик публикации — читать.
• GitHub укрепляет безопасность npm — в ответ на недавние инциденты с компрометацией пакетов, GitHub представил план по улучшению безопасности цепочки поставок в npm. Подробнее.

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

• Проблемы измерения прогресса загрузки через fetch — Jake Archibald объясняет, почему стандартные потоки (ReadableStream, WritableStream) не всегда подходят для отслеживания прогресса загрузки/выгрузки файлов. Анализ.
• Интервью с создателем Vue.js — Evan You рассказал о своём пути от Google до создания Vue, отношениях между Next.js и Nuxt, а также о своём новом проекте void(0). Видеоинтервью.

🤖 ИИ

Chrome DevTools теперь доступны для ИИ-агентов через MCP

Команда Chrome представила протокол Model Context Protocol (MCP), который позволяет ИИ-ассистентам (вроде Claude или Gemini) напрямую использовать DevTools для отладки и анализа производительности веб-страниц. Это открывает новые возможности для автоматизированной разработки и диагностики. Читать статью

Chrome DevTools теперь может использовать ИИ для отладки

Команда Chrome представила MCP-сервер для DevTools, который позволяет ИИ-агентам (например, от Claude или OpenAI) автоматически анализировать и отлаживать веб-приложения. Это открывает путь к «зрячему» ИИ, который может не только читать код, но и взаимодействовать с живым браузером — подробнее.

GitHub Copilot CLI вышел в публичный превью

Теперь разработчики могут использовать Copilot прямо в терминале — для генерации команд, автоматизации задач и помощи в коде. Инструмент написан на Node.js и конкурирует с другими ИИ-агентами вроде Claude Code — подробнее.

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

React Old Icons: 2000+ ретро-иконок

Библиотека React Old Icons предоставляет более 2000 иконок из старых операционных систем (Windows 95, Mac OS и др.) в виде React-компонентов. Отлично подойдёт для ностальгических проектов или тематических интерфейсов. Важно: иконки могут быть защищены авторским правом, поэтому используйте их осторожно. GitHub-репозиторий.

nuqs: типобезопасное управление состоянием через URL

Библиотека nuqs позволяет работать с параметрами URL как с обычным состоянием React (useState), но с полной типизацией и синхронизацией. Поддерживает Next.js, Remix, React Router и другие роутеры. Очень удобно для фильтров, поиска и настроек интерфейса. GitHub-репозиторий.

react-native-big-calendar: календарь в стиле Google Calendar

Компонент react-native-big-calendar реализует полноценный календарь для React Native с поддержкой недельного и месячного вида, похожий на Google Calendar или Outlook. Можно посмотреть демо в Storybook.

• repo2txt — конвертер GitHub-репозиториев в один текстовый файл Утилита, которая объединяет всё содержимое репозитория (или локальной папки) в один форматированный текстовый файл. Очень полезно для передачи контекста языковой модели (LLM) при генерации кода или документации. Можно фильтровать файлы по расширениям. Попробовать онлайн | Исходный код
• Repomix — альтернатива repo2txt Ещё один инструмент для упаковки кода репозитория в компактный формат, удобный для использования с ИИ. Посмотреть на GitHub
• ASCIIFlow — редактор ASCII-диаграмм в браузере Простой и удобный инструмент для рисования схем, стрелок, блоков и других элементов с помощью ASCII-символов. Поддерживает отмену действий, панорамирование и экспорт в чистый текст. Попробовать
• Catalyst — стартовый шаблон для Next.js Современный boilerplate на базе Next.js, включающий Bun, Prisma, Tailwind CSS, shadcn/ui, Auth.js, Stripe и другие популярные технологии. Отличный выбор для быстрого старта full-stack-приложения. GitHub-репозиторий
• Kigen Color Generator — создание палитр для дизайн-систем Интерактивный генератор цветовых схем: выберите базовый цвет, и инструмент предложит гармоничную палитру с настройками алгоритмов и форматов экспорта (включая SVG). Попробовать
• Logoipsum — 100 бесплатных SVG-логотипов-заглушек Коллекция реалистичных placeholder-логотипов, разделённых по категориям. Удобно использовать при прототипировании или демонстрации интерфейсов. Перейти на сайт
• icomp — генератор React-компонентов из SVG CLI и веб-инструмент, который превращает SVG-файлы в готовые React-компоненты. Полезно для быстрого импорта иконок или иллюстраций в проект. Посмотреть проект
• Docusaurus 3.9 — генератор документации на React и MDX получил новые улучшения — релиз.
• VanJS 1.6 — миниатюрный реактивный UI-фреймворк, который набирает популярность благодаря простоте и скорости — сайт.
• Milkdown 7.16 — расширяемый WYSIWYG-редактор для Markdown, построенный на плагинах — релиз.

Обновления

• react-medium-image-zoom 5.4 — компонент для увеличения изображений в стиле Medium.com. Примеры работы. Ссылка на релиз.
• react-jsx-parser 2.4.1 — парсит строку с JSX и рендерит её как React-компоненты. Полезно для динамического контента. Релиз.
• Wasp 0.18 — фреймворк в стиле Ruby on Rails, но для Node.js и React с использованием Prisma. Позволяет быстро создавать full-stack-приложения. Официальный сайт. Релиз.
• Ink 6.3.1 — библиотека для создания CLI-приложений с помощью React. Релиз.
• ESLint v9.36.0 — очередной релиз популярного линтера. Ссылка.
• Cap’n Web — новый RPC для браузеров и серверов Созданный авторами Cap’n Proto, этот протокол позволяет легко вызывать функции между клиентом и сервером через HTTP, WebSocket или postMessage(). При этом данные остаются читаемыми для человека — подробнее.
• Billboard.js 3.17.0 — популярная библиотека для графиков теперь поддерживает изображения в метках, стилизацию границ и динамическую смену цветов — релиз.
• pretty-bytes 7.1 — удобная утилита для преобразования байтов в человекочитаемый формат (например, 1337 → "1.34 kB") — релиз.
• PythonMonkey 1.3 — позволяет встраивать движок JavaScript (SpiderMonkey) прямо в Python. Теперь поддерживается Python 3.14 — релиз.
• Neo.mjs 10.9 — многопоточный фреймворк для создания быстрых веб-приложений с «десктопным» поведением — релиз.
• eslint-plugin-vue 10.5 — официальный ESLint-плагин для Vue.js обновлён — релиз.
• pnpm 10.17: улучшена настройка проверки возраста релизов — релиз
• Astro 5.14: «урожай» новых функций и улучшений для разработчиков — релиз
• Nuxt UI 4.0, PostgreSQL 18.0, ESLint v9.36.0 — сборная ссылка