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

🧪 HTML и API

Что такое popover=hint?

Новое значение popover="hint" позволяет показывать подсказки, которые накладываются друг на друга в нужном порядке. Очень полезно для создания сложных UI без JS.

• Гайд по уведомлениям с хорошим UX — подборка паттернов и анти-паттернов от Vitaly Friedman.
• Команда Edge достигла < 300мс First Contentful Paint по всему миру
• Автоматизация доступности с помощью Storybook 9

🎨 CSS и дизайн

Условные конструкции в CSS с новой функцией if()

Функция if() — это революционное нововведение, которое позволяет делать условия прямо в CSS. Теперь можно использовать условную логику внутри media, supports и style-запросов. Пока поддерживается только в Chrome 137+, но это только начало. В статье есть много наглядных примеров.

→ Дополнительно: забавная демка логических вентилей на CSS

CSS-интеллект: будущее “умного” языка

Автор размышляет, как CSS эволюционирует в язык с логикой и условиями. Всё больше возможностей появляется, но не станет ли CSS слишком сложным?

Лучшая работа с формами с помощью shape() в CSS

Заключительная часть серии статей об использовании CSS-функции shape() — в фокусе команды close и move. Эти команды редкие, но в нужный момент незаменимы.

CSS Cascade Layers против BEM и Utility-классов: как управлять специфичностью

Интересное сравнение трёх подходов к стилям: каскадные слои CSS, методология BEM и утилитарные классы. Автор показывает, как они могут сочетаться для лучшего контроля специфичности.

Зернистые градиенты (Grainy Gradients)

Ана Тудор показывает, как сделать градиенты с лёгкой текстурой, избегая полос (banding), используя SVG displacement карты. Красиво и креативно!

Обзор функции if() в CSS

Обзор новой CSS-функции if(), появившейся в Chrome 137+. Позволяет писать условия прямо внутри CSS, без JS.

Понимание corner-shape и силы superellipse

Полезный разбор нового свойства corner-shape и функции superellipse(). Подходит как для простых скруглений, так и для более сложных форм.

Публичные и приватные CSS cascade layers в дизайн-системе

Крис Фердинанди рассказывает, как разделять каскадные слои на публичные и приватные, чтобы упростить поддержку компонентов.

• Tailwind — худшая форма CSS, кроме всех остальных — ироничное, но полезное мнение о пользе Tailwind.

🌐 JavaScript

📌 Подробный обзор последнего заседания TC39

Команда Igalia делится большим обзором заседания комитета, который управляет развитием ECMAScript. Обсуждаются новые фичи, такие как Array.fromAsync, Temporal API, управление ресурсами и идеи по AsyncContext. Это полезное чтиво, если ты хочешь понимать, как рождаются новые возможности в языке.

📌 Почему hoisting в JavaScript может ломать сборку

Создатель Parcel пишет о том, что “scope hoisting” — техника, которую используют сборщики, может создавать ошибки в современных приложениях. Он даже подумывает убрать её в Parcel 3.

• JavaScript → Rust: переписывание инструментов — Обзор тренда на использование Rust в JS-инфраструктуре.
• Реактивный менеджер состояния на Proxy — Минималистичный способ сделать свой стейт-менеджер.
• TypeScript 5.9 Beta вышел.

⚛️ React

🎥 Как создать кинетическую анимацию изображения с помощью React Three Fiber

Эффектная анимация для Web, созданная с помощью React Three Fiber — библиотеки, позволяющей использовать WebGL через React. В статье подробно объясняется, как это работает. Можно посмотреть пример вживую.

☁️ Рендеринг анимаций КТ-сканов в облаке

React Three Fiber можно использовать не только для эффектных визуализаций, но и для научных проектов. Пример — анимации медицинских КТ-сканов.

▶️ Что React-разработчику нужно знать о Signals

Автор SolidJS делится опытом, как “сигналы” — новый тренд в реактивности — отличаются от подхода React. Видео на 10 минут, но сделано с душой и вниманием к деталям.

🌍 Как Patreon обновил систему интернационализации

История перехода с устаревшей i18n-библиотеки на более современный подход в React-приложении. Использовались codemods, чтобы автоматизировать миграцию.

⚙️ Node.js

🧰 jsonrepair: Исправление недействительных JSON-документов

Инструмент, который автоматически чинит JSON-файлы с ошибками. Это полезно, когда, например, API или LLM возвращают некорректные данные. Можно использовать через CLI или онлайн-редактор (попробовать здесь).

🐛 Безопасное усечение по кодовым точкам: исправление проблем с эмодзи в Node

Если вы нарезаете строки с эмодзи с помощью slice, это может привести к ошибкам, особенно в CSV-импортах. Статья показывает, как использовать spread-оператор для корректного обрезания строк.

📄 Новые инструменты для работы с документацией API в Node.js

Команда Node работает над обновлением документации API. Проект api-docs-tooling позволяет автоматически генерировать более удобные страницы. Скриншот, подробнее о процессе.

• Обновления всех версий Node.js на следующей неделе из-за уязвимостей

🧠 Обучение и статьи

• 🌐 Am I Online? — Как надёжно определить, онлайн ли ваше приложение.
• 🎨 Создание ИИ-помощника по выбору цвета — Использование разных технологий для создания системы подсказок цвета. Попробовать.
• Rspack 1.4 — Быстрый сборщик (альтернатива webpack), теперь работает и в браузере.
• Copilot Chat от Microsoft открыт для всех — Расширение для VS Code теперь с открытым исходным кодом. 100 лендингов DevTools — что работает в 2025 году
• Генерация alt-текста с помощью ИИ — как LLM-модели могут помочь с написанием полезных альтернативных описаний изображений.
• Как пользоваться консолью разработчика в Chrome — от основ до продвинутых трюков.
• Как отключить CORS в Chrome для тестирования — короткое видео с советом.

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

• VS Code 1.102, Angular 20.1, Ember 6.5
• 🧱 BlockNote 0.33 — Блоковый редактор в стиле Notion. Есть перетаскивание, Slash-команды, поддержка ИИ и куча примеров. Основан на ProseMirror и TipTap. Также можно добавить AI-функции.
• 🧠 Поддержка MCP в Next.js — Доступ к пользовательским данным для AI-приложений типа Claude и Cursor.
• 🖌️ Unistyles 3.0 — Производительная библиотека стилизации для React Native, использующая C++ и интеграцию с Fabric. Подробнее в блоге Expo.
• 🔧 Bruno — Альтернатива Postman для тестирования API. Работает как десктопное приложение, построено на Node и Electron.
• 🧵 Poolifier 5.0 — Библиотека для создания пула воркеров с поддержкой worker_threads и cluster. Теперь можно отменять задачи.
• 🤖 grammY — Фреймворк для создания Telegram-ботов. Поддерживает последние фичи Telegram API. GitHub
• 🔥 0x 6.0 — Инструмент для профилирования Node-процессов и создания flamegraph в одну команду.
• @vitejs/plugin-rsc теперь официально в организации Vite.
• line-numbers — web-компонент, добавляющий номера строк к HTML-коду.
• Monorail — визуализация CSS-анимаций с keyframes.
• snapDOM 1.8 — делает скриншоты HTML-элементов в виде SVG.
• Vecto3D — превращает SVG в 3D-модели.
• URL to Any — преобразует веб-страницы в PDF, Markdown и другие форматы.
• Spark для Three.js — продвинутый рендерер 3D Gaussian Splatting.

📦 Обновления пакетов

• Babel 7.28.0 — Поддержка TS-конфигов, Explicit Resource Management из ES2026 и режим CommonJS sourceType.
• Inquirer.js 12.7 — CLI-интерфейсы: ввод, списки и прочее.
• Repomix 1.1 — Упаковка репозитория в один AI-удобный файл.
• Secretlint 10.2 — Линтер, предотвращающий попадание секретов в репозиторий.
• Faker 9.9 — Генератор фейковых данных.
• Oxlint 1.6 — Линтер для JS/TS, написанный на Rust.
• Next.js Boilerplate 5.0 — Стартовый шаблон с авторизацией, БД, i18n и формами.
• 📅 React DayPicker 9.8 — Кастомный выбор даты, теперь с улучшенной навигацией с клавиатуры.
• 🔍 React Scan 0.4 — Сканер медленных рендеров.
• 🌌 react-force-graph 1.48 — Компонент для графов с силовым расположением.
• 📊 Ant Design Charts 2.6 — Графики в стиле Ant Design. Демо и примеры.
• 🎨 Material UI 7.2 — Компоненты на основе Material Design.
• 🤖 React ChatBotify 2.2 — Создание чат-ботов.
• 💅 stylex 0.14.0 — Стилизатор от Facebook.
• ♟ React Chessboard 5.1 — Отображение шахматных досок. Примеры.
• 📉 Recharts 3.1 — Графики на базе D3.