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

🧪 HTML и API

— Beacon API: «попрощаться» без блокировок: как надёжно отправлять небольшие запросы при закрытии страницы (не дожидаясь ответа сервера), например, для метрик — «Say Bye with JavaScript Beacon» и справка по API.

🎨 CSS и дизайн

🧭 Якорное позиционирование: основы

CSS получает новый способ «прикреплять» элемент к другому элементу — это anchor positioning. Представьте тултип, который всегда «заякорен» рядом с кнопкой и сам подстраивается по краям экрана. В статье пошагово показано, какую проблему решает подход, как выглядит синтаксис и где он пригодится, с примерами и картинками. Поддержка в браузерах пока неполная, но фича обещает часто экономить JS. Читайте разбор — «The Basics of Anchor Positioning», а текущее состояние поддержки — на Can I use.

3D-текст слоями: основы

Как сделать текст с эффектом 3D-слоёв только с помощью HTML и CSS? В статье шаг за шагом объясняется:

• как настроить перспективу,
• как организовать слои,
• как добиться впечатляющего результата.

— CSS Elevator — «лифт» на чистом CSS: демонстрация того, как сочетать :has(), кастомные свойства и счётчики, чтобы собрать мини‑машину состояний без JavaScript: «CSS Elevator: A Pure CSS State Machine with Floor Navigation».

— Креатив с изображениями в лонгридах: как «вырвать» картинки из прямоугольной сетки с помощью пары свойств CSS, чтобы лонгрид выглядел живее. Идеи и мини‑сниппеты: «Getting Creative with Images in Long-Form Content».

— Жидкая типографика понятным языком (видео): как работает clamp() и сочетание rem/em с vw/vi, чтобы шрифт плавно менялся по ширине экрана: «Visualizing Responsive Typography».

— Нужен ли light-dark() больше чем для двух тем? Короткая заметка-вопрос про расширение функции light-dark() сверх пары «светлая/тёмная»: обсуждение.

— 10 полезных фич CSS, которые реально выручают: подборка приёмов из новых спецификаций и не только, с небольшими примерами: подборка.

— Многое теперь можно без JavaScript: примеры, что уже получается на чистых HTML+CSS (переключатели, аккордеоны, эффекты) — «You No Longer Need JavaScript (For Many Frontend Things)».

— Инструкции для LLM прямо в HTML: предложение по inline‑подсказкам для ИИ на основе llms.txt. Это концепт, но любопытно — черновик идеи.

📦 JavaScript

• ⏱️ Почему браузеры «душат» таймеры JavaScript — разбор от Nolan Lawson.

Точная длина текста с помощью Intl.Segmenter

Если .length даёт «странные» числа (эмодзи, диакритика, азиатские письменности), используйте Intl.Segmenter. Пост показывает, как корректно считать символы и почему это важно для валидации и обрезки строк в UI.

Сделать XML читаемым без XSLT

Нишевый, но практичный разбор: как быстро «подсветить» и отформатировать XML на стороне клиента JavaScript‑ом, чтобы удобно смотреть данные в браузере.

Функциональные Web Components «по‑простому»

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

Стресс‑тест правила Biome noFloatingPromises

Практика для начинающих: что такое «плавающие промисы», почему они опасны и как линтер помогает ловить ошибки рантайма ещё на этапе разработки.

📦 Angular

Летнее обновление Angular: без zone.js, новые анимации, AI‑интеграции и отладка

Команда подвела итоги: зон‑лесс change detection движется к «по умолчанию», улучшаются анимации, появляются интеграции с ИИ‑инструментами и удобнее дебаг. Новичкам важно знать: современный Angular активно упрощают и ускоряют.

📦 TypeScript 

• 🧷 TypeScript 6.0: Дэниел Розенвассер предлагает включать --strict по умолчанию. Ещё планы — в отдельной сводке.

⚛️ React

⚛️ «React Server Components без фреймворка»

Автор показывает, как запустить RSC без Next.js и даже без минимальных обёрток вроде Waku. Идея — инструмент, который делит код на клиентскую и серверную части, чтобы вы могли пощупать RSC в «чистом» виде. Полезно, если хотите понять механику RSC без слоя фреймворка.

📚 «react-window 2.0: быстрый рендер больших списков»

Обновление популярной библиотеки виртуализации списков от Брайана Вона. Цель — эффективно выводить длинные ленты без лагов. Теперь требуется React 18. В качестве альтернативы автор упоминает и TanStack Virtual. Если у вас таблицы/ленты на тысячи строк — это must‑have.

🧩 «Redux Toolkit 2.9: комплект “всё‑в‑одном” для Redux»

Свежий релиз приносит ускорение за счёт переписывания внутренностей RTK Query (подписки, поллинг), авто‑отмену запросов при удалении кэш‑энтри, новый builder.addAsyncThunk и багфиксы. Если используете RTK Query — апдейт даст ощутимую стабильность и производительность.

🧪 «Используем Activity с данными под Suspense»

В React 19 новый Activity скрывает компонент, сохраняя его состояние, но размонтируя эффекты, и при этом продолжает подгружать данные под Suspense. В статье — зачем это нужно и как применять в реальных экранах с загрузкой.

🔗 «React on Rails 15: подружить React и Ruby on Rails»

Фреймворк для SSR‑интеграции с Rails. В v15 гидратация может начинаться ещё до полной загрузки страницы. Отдельно доступен (пока платный) вариант с поддержкой React Server Components и планом открытой лицензии. Смотрите и репозиторий.

🧱 «Next.js бесит: “бага на каждом углу”»

Мнение разработчика о реальных острых углах в Next.js: сочетание App Router, кешей/статов и RSC рождает много краевых случаев. Полезно как чек‑лист проблем, на которые стоит обратить внимание прежде чем тащить Next в прод.

📱 «Что даёт синхронный встроенный SQLite в Expo‑приложениях»

Кратко: офлайн‑хранилище, которое можно синхронизировать. Для мобильных приложений на React Native это упрощает работу с данными без поднятия полноценной БД на сервере.

🧵 «Клиентское состояние из серверного: когда и как выводить»

Автор разбирает, когда стоит выводить клиент‑стейт из серверного (например, через кэш запросов) и как избегать дублирования источников истины в приложениях на React/TS.

• Сегодня 11 лет со дня, когда Себастьян Маркбяге впервые представил спецификацию JSX. Да, JSX старше, чем кажется 🙂

⚙️ Node.js

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

🚀 Ускорение локального ИИ‑рантайма в Firefox

Команда Firefox ускорила инференс, заменив WASM‑реализацию ONNX‑рантайма (которую использует Transformers.js) на нативный C++ компонент. В результате — меньше задержки и выше стабильность при локальном выполнении моделей. Инженерный разбор — пост в блоге Mozilla.

VS Code: как восстановить удалённые файлы

Короткое видео о том, как вернуть случайно удалённые файлы в VS Code. Рассматривается встроенная «локальная история» редактора и способы отката к разным версиям файлов — даже без Git.

🎂 Chrome исполнилось 17 лет: история и вехи

От первых дней и идеи мультипроцессной архитектуры — до нынешних возможностей и рыночной доли. Статья возвращает нас к моментам, которые сформировали браузер: V8, быстрые релизы, DevTools, безопасность (site isolation) и т. д. Аккуратно собранная хроника и «кухня» разработки: «Google Chrome at 17 Years Old: A History».

— Немного ностальгии: первая бета Chrome вышла в 2008 — проверьте себя и взгляните на тот самый комикс про устройство Chrome.

— GitHub теперь поддерживает WebP‑изображения: меньше «битых» превью и экономия места в репозиториях. Детали — объявление.

• 🧰 Что нового в «Vite‑землях» за месяц: Vite, Vitest, Rolldown, Oxlint и события — дайджест.

— Стоит ли предзагружать шрифты (<link rel="preload">)? Когда это ускоряет First Paint, а когда наоборот мешает и тратит трафик, плюс базовые правила — разбор.

— Как ИИ меняет поведение в поиске: генеративные помощники не «убивают» классический поиск, но становятся частью пути пользователя — особенно для уточнения формулировок и сравнения вариантов. Ключевые наблюдения — исследование NN/g.

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

— EmbedPDF — встраиваемый PDF‑просмотрщик: без зависимостей, дружит с любыми фреймворками, поддерживает аннотации, редактирование, поиск и темы. Подробнее: репозиторий, документация, лайв‑демо.

— Cornerstone3D 4.0 — инструменты для медизображений в вебе: на их базе делают интерактивные DICOM‑вьюеры (CT, PET‑CT и т. п.). Смотрите анонс, примеры — CT‑вьюер, PET‑CT‑вьюер и другие туториалы.

— 90’s Cursor Effects: коллекция ретро‑эффектов курсора, но выполненная «по‑современному» (быстро и эффективно). Загляните на страницу проекта и репозиторий.

• 🧱 Rspack 1.5: быстрее вотчер, оптимизация «баррельных» файлов, расширенная поддержка браузеров — крупный релиз.
• «react-json-view-lite: дерево из JSON» — лёгкий просмотрщик JSON с разворачиванием объектов и массивов и сохранением «читаемости». Есть демо.
• «react-qrcode-logo 4.0» — генератор QR‑кодов с поддержкой логотипа.
• «React Native Reanimated 4.1» — переосмысление Animated для RN.
• «React Admin 5.11» — фреймворк для B2B‑интерфейсов.
• «React Stripe.js 4.0» — компоненты для Stripe Elements.
• «BlockNote 0.37» — редактор «как в Notion» на блоках.
• «Ink 6.2.3» — пишем CLI‑приложения на React.