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

🎨 CSS и дизайн

Идеально нацеленные тултипы на Anchor Positioning

Как с помощью API Anchor Positioning ставить подсказку строго к нужной точке: где закрепить «якорь», как выбирать стороны и перестраивать позицию при переполнении. Автор показывает много картинок и кода, поэтому разложить по полочкам легко даже начинающему. Есть и вторая часть. Читать: Perfectly Pointed Tooltips

field-sizing: подгоняем ширину/высоту инпута под содержимое

Свойство field-sizing позволяет полям форм подстраиваться под текст — удобно для аккуратных карточек и адаптивных форм без «пляшущих» размеров. В статье разбираются варианты и ограничения. С примерами: Use Cases for Field Sizing

Обрезаем текст по строкам с line-clamp

Короткое руководство по line-clamp: где пригодится (карточки, ленты, юзер-контент), как подключить и что учесть для кросс-браузерности. Гайд: How to Use CSS line-clamp to Trim Lines of Text

«Самая нелюбимая» функция: tan() в CSS

Тригонометрия в CSS часто пугает, но функции из семейства тригонометрии могут помогать в сложных эффектах и геометрии. Серия статей по шагам объясняет, как применять tan(). Старт серии: The “Most Hated” CSS Feature: tan()

Проверка в градациях серого — недостающий шаг в контроле цвета

Почему важно прогонять макеты в grayscale: так легче увидеть, где контраст «провисает», даже если классический контраст-чекер зелёный. Автор даёт простые рабочие приёмы. Статья: Grayscale Testing: The Missing Step in Color Accessibility

• Как быстро добавить View Transitions на сайт и не сломать навигацию: руководство

• Подсветка синтаксиса без библитек: используем CSS Custom Highlight API — теперь поддерживается во всех основных браузерах. Гайд с примерами: High-Performance Syntax Highlighting….

• Производительность веб-анимаций: большая памятка-«тиер-лист» по техникам и их цене. Полезно перед релизом: Web Animation Performance Tier List.

📦 JavaScript

Внутренности source maps в JavaScript

Как девтулы показывают исходники вместо минифицированного кода? Автор разбирает формат, mappings, генерацию и типичные грабли (offset’ы, инлайновые карты, цепочки карт при бандлинге). Отличный ликбез, чтобы понимать, что происходит «под капотом». Почитать: The Inner Workings of JavaScript Source Maps. Дополнительно: что такое source map.

• Мини-трюк от Lea Verou: ленивое создание Symbol через прокси — кратко и занимательно. Смотрите идею: proxy-based trick.

• Почему NaN !== NaN — краткая и понятная заметка про IEEE-754 и особенности сравнения чисел с NaN. Читайте: Why NaN !== NaN

TypeScript

Андерс Хейлсберг о взлёте TypeScript

Создатель TS делится мыслями о популярности языка (в 2025 — №1 на GitHub), переписывании компилятора на Go и роли ИИ в разработке. Интервью даёт контекст, куда движется экосистема. Читать: Anders Hejlsberg’s Take on the Rise of TypeScript. По теме: TS — язык №1 на GitHub.

• Встраиваем TS/JS-движок Hako через WebAssembly — чтобы запускать скрипты в разных средах (включая мобильные). Обзор: Embedding TypeScript with Hako. Сам движок: Hako.

⚛️ React

Storybook 10: теперь только ESM, легче на 29% и с новым automocking

Что изменилось: Storybook полностью отказался от CommonJS в пользу ESM, за счёт чего сборки стали легче. Появился новый подход к авто-мокингу модулей (совместно с командой Vitest), добавили поддержку Next.js 16 и Vitest 4, а также «прокачали» формат историй CSF (обновлённая версия CSF). Зачем новичку: быстрее сборка, проще моки в тестах, меньше сюрпризов с модулями. Подробнее в анонсе — Storybook 10.

• Видео: React Compiler 1.0 + TanStack Start — как авто-мемоизация ускоряет приложение: короткий разбор от Джека Херрингтона — смотреть 9 мин.

• Reddit-тред: почему у Facebook 140 слоёв контекст-провайдеров и чем это оправдано — обсуждение.

• Исследование: Evil Martians посмотрели на стартUPы с фандингом — React у большинства — разбор.

• Встраиваем Godot в RN-приложение: свежий open-source мост, Android/iOS, доступ к API из JS — Born React Native Godot (про движок Godot).

• Как передать базу SQLite через AirDrop из RN-приложения — пошагово в статье.

• Критическая уязвимость в React Native Community CLI: при запуске dev-сервера возможен удалённый запуск команд. Детали и рекомендации — отчёт JFrog, проект CLI — здесь.

• Запускаем Next.js внутри ChatGPT: глубокий разбор «нативной интеграции» — статья Vercel.

• Генеративное искусство в браузере: как рисовать абстракции на Three.js из React — гид.

⚙️ Node.js

Путеводитель по миграции с Node v22 на v24

Официальная команда Node подготовила подробный гид по апгрейду на актуальный LTS v24: что изменилось, какие флаги и API тронули, на что обратить внимание при продакшен-миграции. Полезный компаньон — набор официальных кодмодов, которые автоматизируют часть правок (например, замену import … assert на import … with при миграции с v20 на v22). Также есть гайды для v20 → v22, v14 → v16 и v12 → v14. Источник: Node v22 → v24 Migration Guide

Node 24 стал активным LTS: что это значит

Версия v24.11.0 (LTS) закрепляет статус ветки 24 как активного LTS. Существенных отличий от последнего релиза 24.x нет, но в статье коротко разбирают, чем 24-я ветка отличается от 22-й, и на какие нюансы смотреть при обновлении. Читать: Node.js 24 Becomes LTS: What You Need to Know

• Вышел Node.js v25.1.0 (Current).

• Через неделю-две npm аннулирует классические токены и перестанет выдавать новые — проверьте аутентификацию.

• Импорт модулей из BitTorrent — эксперимент, демонстрирующий, как с помощью хуков кастомизации импортов в Node можно подтянуть модули из P2P-сети. Полезно как «топливо для вдохновения». Читать: Importing Node Modules from BitTorrent

• Node на Hugging Face Spaces — если вы скучаете по Glitch, можно хостить небольшие серверные приложения на Hugging Face Spaces. Короткий разбор: Running Node.js in a Hugging Face Space

• Почему мигрировали с Python на Node.js — авторы недовольны историей с async в Python и делятся опытом переезда на Node, отдельно хвалят MikroORM. Пост: Why We Migrated from Python to Node.js

• URLPattern как роутер без фреймворка в Node 24 — как использовать стандартный API для маршрутизации, не притягивая внешние пакеты. Подробнее: Using URLPattern…

🌐 Браузеры

Что нового в WebKit (Safari 26.1)

Поддержка улучшенного Anchor Positioning, относительные единицы в SVG, переработка системы CSS Units — короче, обновление, которое заметно помогает вёрстке и графике. Обзор: WebKit Features for Safari 26.1

• Обновления платформы за месяц (stable/beta): подборка Рейчел Эндрю
• Деприкация XSLT в Chrome: зачем и как это улучшит безопасность: сообщение Google

Производительность и DevTools

• Небольшой «пит-стоп» по оптимизации: короткий тур по Performance-панели
• Как тормозить только нужные запросы в Chrome DevTools (для отладки): гайд
• Как устроены source maps под капотом: разбор

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

• image-dimensions — получить ширину/высоту изображений (JPEG, PNG/APNG, GIF, WebP, AVIF, HEIF) в любом современном JS-окружении. Смотрите: image-dimensions

  Нужна поддержка ещё большего числа форматов? Обратите внимание на Node-пакет image-size.

• type-flag — типобезопасный парсер аргументов CLI: описываете типы и получаете проверку «из коробки». Репозиторий: type-flag

• Electron 39.0 — апдейт до Chromium 142, V8 14.2 и Node 22.20. Подробности в посте: Electron 39.0

• on-change 6.0 — наблюдение за объектами/массивами через Proxy (рекурсивно). Репо: on-change

• sitemap.js 9.0 — библиотека и CLI для генерации XML-карт сайта; теперь ESM-first. Подробнее: sitemap.js

• react-jsonschema-form 6.0: делаем формы из JSON Schema «из коробки», есть живое демо и описание в репозитории.

• React Native Big Calendar v4.19: календарь «как в Google/Outlook», доступны демо-примеры — страница релиза.

• React Native WebGPU 0.4: реализация WebGPU на базе Dawn, теперь работает и в React Native Web — читать, о Dawn — здесь.

• React Chessboard 5.8: адаптивная шахматная доска — репозиторий.

• React Uploady 1.12: компоненты и хуки для загрузки файлов — репозиторий.

• Reactist 29.0: набор открытых React-компонентов — репозиторий.

• Reagent 2.0: интерфейс к React из ClojureScript — подробнее.

• ESLint v9.39.1: минорный релиз линтера — ноты.

• <lite-youtube> 1.9 — быстрые встраивания YouTube на веб-компонентах: репозиторий (см. также оригинальную идею)

• Slim Select 3.0 — продвинутый <select> без зависимостей, теперь есть официальный React-компонент и апдейты по доступности: страница проекта · v3.0

• React Syntax Highlighter — готовый компонент для отображения кода. Быстрый способ показать сниппеты: компонент и репозиторий.

• React Email 5.0 — компоненты для вёрстки писем: переключение тёмной темы и поддержка Tailwind 4. Релиз: React Email 5.0.

• htmx 4.0 Alpha 1 — v3 не будет, команда перескочила на 4-ю ветку; в статье — почему и что дальше. История релиза: htmx 4.0 alpha.

• Turborepo 2.6, Video.js 10, ESLint Config Inspector 1.4 — пачка обновлений для монореп, видео и инспекции конфигов ESLint. Ссылки: Turborepo 2.6, Video.js v10, ESLint Config Inspector.

• Парсер CSSOM на чистом JS (частичная реализация CSS Object Model): CSSOM.

• debounce 3.0 — задержка вызовов, теперь как чистый ES-модуль: debounce.

• bcrypt.js 3.0.3 — быстрее и работает даже в браузере: bcrypt.js.

• Marked 17.0 — парсер/компилятор Markdown: Marked 17 и доки.

• AlaSQL.js 4.8 — SQL в JS, изоморфный, работает в браузере и Node: AlaSQL 4.8.

• fast-copy 4.0 — быстрый глубокий клон объектов: fast-copy.

Обновления

• Dependency Cruiser 17.2 — визуализация зависимостей проекта.
• pnpm 10.20 — быстрый менеджер пакетов; есть pnpm help --all для полной справки.
• express-useragent 2.0 — быстрый парсер user-agent как middleware.
• jsdom 27.1 — реализация WHATWG DOM/HTML на JS.
• Immer 10.2 — удобная работа с иммутабельным состоянием.
• express-rate-limit 8.2 — базовый rate limiting для Express.
• npq 3.14 — аудит npm-пакетов до установки.
• rimraf 6.1 — аналог rm -rf из Node.
• Ink 6.4 — создаём CLI-приложения на React.
• ESLint v9.39.1 — минорные улучшения и исправления.