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

🧪 HTML и API

Экономика усилий пользователя: будьте выгодной сделкой

Автор предлагает рассматривать усилия пользователя как валюту. Хороший продукт — это тот, где сложность задачи соразмерна усилиям, которые приходится приложить. Советы по проектированию интерфейсов, которые пользователи действительно полюбят. Как проектировать с учётом усилий пользователя

Почему WCAG устаревают?

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

Почему липкая навигация может мешать доступности

Липкие («прилипающие») шапки и меню могут создавать проблемы для пользователей с ограниченными возможностями, особенно при использовании клавиатуры или скринридеров. Статья объясняет, в чём риск и как его избежать. Проблемы липкой навигации с точки зрения доступности

Автоматизированные тесты доступности — не панацея

Автоматические инструменты проверки доступности часто пропускают важные проблемы, особенно связанные с контекстом использования. Видео объясняет, почему ручное тестирование остаётся критически важным. Что упускают автоматические тесты доступности

• Обновление Baseline — ежемесячный отчёт о прогрессе проекта Baseline, включая новые интеграции в инструменты разработки. Последние новости Baseline

🎨 CSS и дизайн

Насколько хорошо вы знаете медиа-запросы?

Медиа-запросы — это не только про ширину экрана. В этой статье разбираются малоизвестные, но полезные дескрипторы вроде aspect-ratio, monochrome и даже vertical-viewport-segments. Автор показывает, как их можно использовать уже сегодня для более точной адаптации интерфейсов под разные устройства. Как использовать медиа-запросы на полную

Новые возможности CSS в Safari 26

Safari 26 принёс с собой поддержку ряда современных CSS-фич. В статье подробно описано, какие именно возможности теперь доступны разработчикам и как они могут упростить создание адаптивных и выразительных интерфейсов. Обзор новых CSS-фич в Safari 26

Желание CSS: внутренние брейкпоинты

Что если бы можно было задавать брейкпоинты не только для окна браузера или контейнера, но и для отдельных HTML-элементов внутри них? Автор предлагает идею «внутренних брейкпоинтов» — концепции, которая могла бы значительно упростить сложные компоновки. Почему нужны внутренние брейкпоинты в CSS

Стилизация соседних элементов стала проще

С появлением новых псевдоклассов и экспериментальных возможностей, таких как sibling-count и sibling-index, стилизовать соседние элементы в CSS стало гораздо удобнее. Статья содержит наглядные примеры и демонстрации. Как стилизовать соседние элементы в CSS

Лучшая единица измерения в CSS — это комбинация

Благодаря новым CSS-функциям сравнения (например, min(), max(), clamp()), теперь не нужно выбирать между px и rem — можно использовать обе единицы одновременно, чтобы получить гибкие и предсказуемые отступы. Почему лучшая CSS-единица — это комбинация

Стартовый CSS-файл от Криса Койера

Крис Койер (Chris Coyier) поделился своим персональным CSS-сбросом, в котором он объясняет, почему включил или исключил те или иные правила. Это не просто набор стилей, а философия подхода к базовой стилизации. CSS-стартовый файл от Криса Койера

Новое CSS-свойство corner-shape — потрясающе!

Свойство corner-shape позволяет создавать нестандартные скругления углов — от волнистых до «вырезанных». В видео показано, как это работает и какие креативные эффекты можно получить. Как использовать corner-shape в CSS

📦 JavaScript

• Открыт опрос State of JS 2025 — вы можете поделиться своим мнением о современных инструментах и технологиях во фронтенде. Пройти опрос

Можно ли перехватывать приведение объекта к boolean в JavaScript?

Интересный технический вопрос: можно ли заставить if (myObject) вести себя иначе, чем по умолчанию? Оказывается, стандарт не даёт такой возможности напрямую, но есть обходные пути. Обсуждение с примерами

В JavaScript появился метод findLast()

Вместо того чтобы писать .reverse().find(), который создаёт лишнюю копию массива, теперь можно использовать .findLast() — он ищет элемент с конца, но не изменяет исходный массив. Это чище, быстрее и понятнее. Как использовать findLast()

TC39 одобрил новые предложения для JavaScript

На последнем заседании комитета TC39 (который развивает стандарт JavaScript) продвинулись несколько интересных функций:

• Import Bytes — импорт бинарных данных как модулей,

• Iterator Chunking — разбиение итераторов на «порции»,

• Array.prototype.pushAll — массовое добавление элементов в массив. Агenda встречи TC39

• BigInt для хранения огромных чисел — статья о том, как использовать BigInt не только для математики, но и как способ хранить большие объёмы данных. Читать

⚛️ React

Вышел React 19.2

Это уже третий релиз React за год! В нём появились новые возможности:

• Компонент <Activity />, который позволяет временно скрывать часть интерфейса, сохраняя её внутреннее состояние.
• Хук useEffectEvent — помогает избежать лишних пересозданий колбэков внутри эффектов.
• Улучшения в профилировании производительности через Chrome DevTools: теперь видно, как React планирует обновления и как устроено дерево компонентов.
• Также добавлена поддержка частичного предварительного рендеринга (partial pre-rendering), что ускоряет отображение сложных страниц. Подробнее о релизе | Что такое partial pre-rendering?

Управление состоянием в React в 2025 году: что действительно нужно?

Автор статьи Надя Макаревич разбирает, какие виды состояния бывают в приложениях и как выбрать подходящее решение для управления им. В итоге она рекомендует Zustand как простой и эффективный инструмент.

Шесть часов разговоров о React с Рики Хэнлоном и Райаном Карниато

В длинном видео на YouTube Рики Хэнлон (член команды React) и Райан Карниато (создатель SolidJS) обсуждают устройство React, плюсы и минусы useEffect, а также показывают живые примеры разработки. Видео разбито на главы, так что можно смотреть только интересующие части.

Почему @ts-ignore — почти всегда плохая идея

Автор объясняет, что @ts-ignore скрывает потенциальные ошибки и делает код менее надёжным. Лучше использовать @ts-expect-error (если вы точно знаете, что игнорируете ошибку) или временно приводить тип к any, чтобы явно обозначить «дыру» в типизации. Подробный разбор

• Astro 5.14 добавил поддержку React 19 action states, что позволяет использовать новые возможности React даже в гибридных приложениях на Astro.
• TanStack Start вышел в стадию Release Candidate. Это SSR-фреймворк от создателей TanStack Router, и уже есть руководство по миграции с SPA на TanStack Start.
• Подробное руководство по созданию интерактивной таблицы с TanStack Table v8, включая живую демонстрацию.
• Как переехать с Next.js на Astro — пошаговое руководство от Локмана Муслиу.
• Как работает useState внутри React — объяснение для новичков от Эдаки Морторэя.
• Electron-приложения вызывали лаги в macOS 26 (Tahoe), но проблема исправлена в версиях Electron 38.2, 37.6 и 36.9.2.

⚙️ Node.js

Вышли новые версии Node.js

Выпущены обновления для двух веток Node.js:

• Node v24.9.0 (Current) — небольшие улучшения в модулях http, sqlite и worker.
• Node v22.20 (LTS) — обновление OpenSSL до версии 3.5.2 для повышения безопасности. Node v24.9.0 | Node v22.20

Cloudflare Workers теперь лучше поддерживают Node.js

Cloudflare значительно улучшили совместимость своей платформы Workers с Node.js. Теперь можно запускать HTTP-серверы в Workers, несмотря на то, что там нет обычной файловой системы. В статье подробно объясняется, какие части стандартной библиотеки Node.js уже работают, как устроены потоки ввода-вывода и как эмулируется файловая система. Это особенно полезно для тех, кто хочет использовать Node.js вне традиционных серверов. Читать подробнее

GitHub усиливает безопасность npm из-за атак на цепочку поставок

После недавних инцидентов с вредоносными пакетами в npm, GitHub анонсировал меры по защите экосистемы: блокировку подозрительных пакетов при загрузке, ужесточение правил публикации и продвижение «доверенной публикации» (trusted publishing). Это поможет разработчикам избежать случайной установки вредоносного кода. Подробнее о мерах безопасности Техническое обновление по изменениям в npm

Как Deno защищает от уязвимостей в npm

Deno — альтернативная среда выполнения JavaScript/TypeScript — работает по принципу «безопасно по умолчанию». В отличие от Node.js, где пакеты из npm могут делать почти всё, Deno требует явного разрешения на доступ к файловой системе, сети и другим ресурсам. В статье разбирается, как эта модель помогает избежать многих проблем, связанных с вредоносными пакетами в npm. Читать подробнее

Полезная шпаргалка по команде npx

Команда npx позволяет запускать утилиты из npm без их предварительной установки. В статье объясняются неочевидные фишки: как запускать локальные скрипты, кэшировать пакеты, использовать флаги и избегать распространённых ошибок. Отлично подойдёт для тех, кто только начинает работать с Node.js и npm. Шпаргалка по npx

Bun v1.2.23 и готовится релиз v1.3

Bun — альтернативный JavaScript-рантайм — получил очередное обновление с улучшениями совместимости с Node.js. Главное событие — ожидается выход версии 1.3 уже на этой неделе. Релиз Bun v1.2.23

Появился новый JavaScript-рантайм — Ion

Ion — это экспериментальный рантайм, позволяющий встраивать JavaScript-движок прямо в программы на Rust. Это может быть полезно для создания высокопроизводительных приложений с гибридной логикой. Подробнее об Ion

Как безопасно удалить 120 неиспользуемых зависимостей в Nx Monorepo

Автор делится опытом чистки большого монорепозитория на Nx с помощью инструмента Knip, который находит неиспользуемые зависимости и помогает их удалить без риска сломать сборку. Статья с пошаговым руководством

• Анализ цикла событий Node.js с помощью eBPF — продвинутая техника для отладки производительности серверных приложений. Подробнее

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

• Два способа делать «скриншоты» HTML-элементов в SVG, включая библиотеку Satori, особенно удобную для JSX-разработчиков.

• Тим Бернерс-Ли объяснил, почему отдал Всемирную паутину бесплатно — основатель WWW рассказал, что его решение было продиктовано желанием сделать интернет открытым и доступным для всех. Интервью с Тимом Бернерс-Ли

• Как выглядит сайт для пьяного пользователя? — исследование и интерактивная демонстрация того, как алкоголь влияет на восприятие интерфейса. Симулятор «пьяного пользователя»

• Полное руководство по HTTP-кешированию — подробный гид о том, зачем кешировать, что кешировать, как настраивать заголовки, работать с CDN и отлаживать кеш. Руководство по HTTP-кешированию

• Создание «крутых» анимаций в Three.js с GSAP — простой пример интеграции библиотеки анимаций GSAP с Three.js для создания впечатляющих 3D-эффектов. Анимации в Three.js с GSAP

• Системы дизайна — источник спокойствия во фронтенде — статья о том, как дизайн-системы помогают командам быстрее разрабатывать, меньше ошибаться и поддерживать единый стиль. Почему нужны дизайн-системы

• Интерактивный WebGL-эксперимент «Messenger» — красивый и плавный интерактивный опыт, созданный с помощью WebGL. Отличный пример того, на что способны современные браузеры. Посмотреть «Messenger»

🤖 ИИ

GitHub Copilot CLI теперь в публичном превью

GitHub запустил командную версию Copilot — помощника, который может писать и объяснять команды терминала. Он работает на Node.js и помогает автоматизировать рутинные задачи прямо в консоли. Copilot CLI

• Chrome DevTools теперь доступны для ИИ-агентов через MCP-сервер — это упрощает автоматизацию отладки и анализа производительности.

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

npm-check-updates 19.0 — обновление зависимостей с умом

Утилита для обновления версий пакетов в package.json до самых свежих. Новая версия добавляет интерактивный режим (-i) и функцию «временной задержки»: пакеты моложе определённого возраста не будут предлагаться к обновлению — это помогает избежать установки свежевыпущенных вредоносных версий. Подробнее об обновлении

Skia Canvas 3.0 — рисование в Node.js как в браузере

Это библиотека для рендеринга 2D-графики в Node.js с использованием движка Skia (того же, что и в Chrome). Поддерживает изображения, шрифты, фигуры и даже GPU-ускорение. Полезна для генерации изображений на сервере (например, аватарок или графиков). Сайт Skia Canvas | GitHub-репозиторий

Pompelmi — сканирование загружаемых файлов на вирусы

Лёгкая библиотека для Node.js, которая проверяет загружаемые файлы на наличие вредоносного кода. Поддерживает Express, Koa и Next.js, умеет «заглядывать» внутрь ZIP-архивов и интегрируется с инструментом YARA для продвинутого анализа. Описание Pompelmi | GitHub

modern-tar — работа с архивами без зависимостей

Простая и быстрая библиотека для чтения и записи .tar-архивов в Node.js. Не требует внешних зависимостей и работает в потоковом режиме, что экономит память при работе с большими файлами. GitHub-репозиторий

ffetch — умная обёртка над fetch с TypeScript-поддержкой

Это расширенная версия стандартного fetch с полезными фишками: автоматические повторы запросов, защита от перегрузки (circuit breaking), хуки и мониторинг активных запросов. Особенно удобна в TypeScript-проектах. Описание ffetch

Docusaurus 3.9: генератор сайтов на React и MDX

Docusaurus обновился: теперь требует Node.js 20+, поддерживает Algolia DocSearch v4, улучшил интернационализацию и добавил поддержку Mermaid ELK. Это отличный выбор для документации и блогов.

Jeasx — лёгкий SSR-фреймворк на JSX без React

Jeasx позволяет писать серверный рендеринг с использованием JSX, но без React. В основе — Fastify и собственный jsx-async-runtime.

tldraw SDK 4.0 — встраиваемые белборды в React-приложениях

tldraw SDK — это коммерческое решение (с бесплатным пробным периодом) для добавления интерактивных «бесконечных холстов» в ваши React-приложения.

HN Term — чтение Hacker News прямо в терминале через React

HN Term — терминальное приложение на React и OpenTUI, которое позволяет просматривать новости и комментарии с Hacker News без браузера. Интересный пример использования React вне веба.

Polypane 26: точная эмуляция устройств

Polypane — браузер для разработчиков — обновился до версии 26. Теперь он поддерживает эмуляцию safe-area-inset и малых viewport-единиц, что делает тестирование на мобильных устройствах гораздо точнее. Что нового в Polypane 26

React Cookie Manager — компонент для согласия на куки

Готовое, настраиваемое решение для управления согласием на использование куки в React-приложениях. Компонент автоматически блокирует трекеры, если пользователь не дал разрешение. React Cookie Manager на GitHub

SurveyJS — библиотека для форм и опросов

SurveyJS позволяет быстро создавать сложные формы и опросы прямо в JavaScript-приложении. Поддерживается кастомизация, валидация и интеграция с любыми фреймворками. JavaScript-библиотека для форм SurveyJS

HTML3D — 3D-сцены с помощью CSS-трансформаций

Лёгкая JavaScript-библиотека, которая создаёт интерактивные 3D-сцены, используя только CSS 3D-трансформации. В демке даже есть редактор кода прямо внутри «игры». HTML3D: 3D на CSS без WebGL

eslint-plugin-depend — плагин для оптимизации зависимостей

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

Анимированные UI-компоненты для Svelte

Коллекция красивых анимированных компонентов для Svelte, вдохновлённая популярными библиотеками для React. Многие компоненты уже поддерживают Svelte 5. Svelte Animations на GitHub

SpaceTime 7.11 — лёгкая библиотека для работы с часовыми поясами

Если вам нужно работать с датами в разных часовых поясах, но не хочется тащить Moment.js, попробуйте SpaceTime. У неё похожий API, но она неизменяемая (immutable) и не имеет зависимостей. Сайт библиотеки | GitHub

Обновления

• pnpm 10.17 — улучшена настройка проверки возраста пакетов.
• TypeBox 1.0 — система типов, совмещающая JSON Schema и TypeScript.
• OpenAI Node 5.23.1 — добавлена поддержка gpt5-codex.
• pretty-bytes 7.1 — красивое форматирование размеров файлов.
• Wasp 0.18 — фреймворк в стиле Rails на базе Node, React и Prisma.
• MongoDB Node.js Driver 6.20 — обновлённый драйвер для работы с MongoDB.
• pg-boss 11.0 — система очередей задач на PostgreSQL.
• Verdaccio 6.2 — локальный приватный npm-репозиторий.
• react-i18next 16.0 — библиотека для интернационализации, теперь с новым CLI-инструментом i18next-cli.
• React Native URL Polyfill 3.0 — лёгкая реализация стандартного URL API для React Native.
• React Scroll Parallax 3.5 — хуки и компоненты для эффектов параллакса при прокрутке, теперь с поддержкой React 19.
• State in URL 6.0 — удобный способ хранить состояние приложения в URL-параметрах (репозиторий на GitHub).
• react-multistep 6.1 — компонент для многошаговых форм (демо).
• React Stripe.js 5.0 — официальные компоненты для интеграции Stripe в React-приложения.
• Anime.js 4.2 — мощный движок для анимаций на JavaScript.
• npm-check-updates 19.0 — утилита для поиска обновлений зависимостей в package.json.
• pnpm 10.18 — альтернативный менеджер пакетов.
• Oxlint 1.19 — быстрый линтер для JavaScript/TypeScript.
• Deno 2.5.3 — обновление среды выполнения Deno.
• Color Calendar 2.0 — интерактивный календарь с событиями.
• CKEditor5 47.0 — популярный редактор WYSIWYG.
• BlockNote 0.40 — редактор в стиле Notion.
• NodeBB 4.6 — форум на Node.js.