Frontend Status: свежий дайджест фронтенда и AI — 06.05.2026

Привет!

Это 15-й выпуск Frontend Status — дайджеста по фронтенд-разработке.

В этом выпуске:

• 📺 MoscowJS 70 про инженерную культуру в действии: доклады и круглый стол показывают, как командам быстрее синхронизироваться и принимать сильные технические решения.

• ⚛️ React Server Components и кеширование страниц: разбираем partial page caching, чтобы ускорять загрузку и снижать стоимость рендеринга без потери актуальности контента.

• 🤖 AI из «вау-демо» переходит в дисциплину: разбираем рабочие промпт-пайплайны и практики Claude Code, которые дают предсказуемый результат, а не случайный успех.

• 🛡️ Безопасность больше не факультатив: кейс критической уязвимости в GitHub и массовый багхант в Firefox напоминают, как быстро один пропуск превращается в инцидент.

• 🎨 CSS и анимации взрослеют: от scroll-driven подходов до нативной случайности и новых API, которые делают интерфейсы богаче без тяжёлого JS.

• ⚡ JavaScript и React на новом витке: ES2025/ES2026, типизированные контракты, React Compiler, TanStack Form и useHotkeys как база для масштабируемой фронтенд-разработки.

• 🌐 Стандарты и платформа двигаются вперёд: Baseline, Long Animation Frames, CBOR-LD и апдейты WebGPU меняют практику производительности и межплатформенной разработки.

• …и многое другое.

📺 Медиа

• MoscowJS 70 (30 апреля, X5 Tech): в программе — доклады про продуктовую документацию, обработку фото в «Клубе Тайных Покупателей» X5 и инженерные практики в эпоху AI, а также круглый стол про инженерную культуру и переход на «бигтех-рельсы».

• Частичное кеширование страниц с React Server Components: видео о том, как применять частичное кеширование страниц с React Server Components, чтобы ускорять загрузку и снижать стоимость рендеринга без потери актуальности контента.

🤖 AI

• Разбор доклада Anthropic Prompting 101 на реальном кейсе со шведской страховой: как за пять итераций промпт превращается из «изучи бланк и определи виновника» (Claude уверенно отвечает «лыжная авария», хотя про лыжи в задаче ни слова) в рабочую структуру из десяти блоков с XML-разметкой, prefill и few-shot примерами. Главный вывод: нормального промпта с первого раза не бывает, а порядок шагов даёт прирост качества не на проценты, а кратно. В конце готовый Project для Claude.ai с системным промптом и веб-сервис prompt-architect, который проводит по методике за руку и собирает промпт в браузере.

• Десять настроек Claude Code, которые превращают “работает, но странно” в “работает как отдел”. CLAUDE.md на 30 строк вместо 300 (если убрать строку и Claude не начнёт ошибаться, удаляй), settings.json с deny-побеждает-allow, acceptEdits через Shift+Tab, хуки-guardrails с exit code 2 для блокировки опасных команд, совещание агентов из Codex и Gemini как второе мнение когда Claude залип, новый /effort xhigh на свежем Opus 4.7, борьба с context rot по правилу “сжимай на 60–65%, не жди auto-compaction”, правило двух коррекций (если объяснил дважды и не помогло — /clear, а не /compact), sandbox-режим со снижением permission-промптов на 84% и lazy-loading инструкций через .claude/skills/ вместо раздутого CLAUDE.md — можно брать и вставлять в свои проекты.

🛡️ Безопасность

• CVE-2026-3854 на GitHub: одной командой git push с подделанной push-option любой пользователь с push-доступом мог получить RCE на сервере через инъекцию в служебную метаинформацию между сервисами. Сам github.com и GitHub Enterprise Cloud уже пропатчены в день получения отчёта от Wiz, действий от пользователей не требуется, никто кроме исследователей эксплойт не находил, а GitHub Enterprise Server нужно срочно обновить.

• В Firefox 150 закрыли 271 уязвимость, найденную ранней версией Claude Mythos Preview, и в Mozilla утверждают, что модели теперь находят то, что раньше требовало месяцев работы элитного ресёрчера, причём ничего принципиально нового, все баги в пределах человеческого понимания.

💫 Анимации и 3D

• Джон Реа пересобрал на чистом CSS классную скролл-анимацию со страницы Apple Vision Pro с разлетающимися компонентами устройства и финальным «откидыванием» наушника к глазам. Под капотом view timeline, position: sticky для удержания, grid с одной grid-area для наложения картинок, кейфреймы с background-image вместо видео и animation-range для точного управления стартом и финишем.

• Джош Комо разбирает Animation Timeline API: view() и scroll(), ranges (cover, contain, entry, exit), гачу с animation-fill-mode: backwards и связанные таймлайны через view-timeline и timeline-scope для элементов в разных ветках DOM.

🎨 CSS

• Почему random() и random-item() в CSS Values and Units Module Level 5 — это сдвиг, а не просто фича: рандом возвращается в layout-слой, заканчивается эпоха чётких определений через :nth-child, Sass-компиляцию и JavaScript, и CSS превращается из стилевого языка в генеративную систему.

⚡ JS / TS

• Эксперимент с типизированным контрактом между сервером и клиентом от @andrew_zol. Один TypeScript-модуль с defineApi() и tagged-template route() для путей вроде /category/:categoryName/:articleId с параметрами number() и coerce(), а дальше тот же контракт расширяется на сервере через .authorize() и .inject() с DI-токенами на основе схем @cleverbrush/schema, и mapHandlers() требует обработчик на каждый эндпоинт под угрозой ошибки компиляции. На клиенте createClient() через Proxy выводит типы прямо из контракта, для React есть унифицированный клиент с .useQuery(), .useMutation() и useSuspenseQuery(), плюс useSubscription() для двунаправленных WebSocket-каналов.

• Что нового в JavaScript (и что будет дальше): обзор того, что уже приехало в ES2025, что близко в ES2026 и какие новые возможности JavaScript можно применять уже сейчас — в том числе в связке с AI-ассистентами при генерации кода.

• anime.js: Enhanced transforms: в библиотеке появился композиционный API для плавного смешивания отдельных CSS-трансформаций, включая individual transforms, function-based values и blend composition.

⚛️ React

• Как превратить React-SPA с фильтрами и поиском из одной страницы в SEO-дружелюбный сайт: History API через replacePath, двусторонняя синхронизация URL и стейта с защитой от циклов, каноникализация путей, React Helmet с canonical/og/JSON-LD и noindex,follow для бесконечных текстовых запросов.

• Раджгопал Девабхактуни на DZone рассказывает, как Google Code Assist встраивается в повседневную React-разработку прямо в VS Code: контекстно генерирует функциональные компоненты, подсказывает хуки и их зависимости, помогает с тестами и снижает долю ручной обвязки — стейта, пропсов, бойлерплейта, который и есть основной тормоз в React-проектах. Автор подчёркивает, что это всё ещё ассистент: код стоит просматривать, переименовывать переменные под конвенции команды и проверять зависимости хуков, иначе из ускорителя инструмент превращается в костыль.

• Обзор TanStack Form: типизированный useForm с автокомплитом по defaultValues, headless render-функции, валидация на onSubmit/onBlur, mode=“array” для динамических списков, реактивный доступ к чужим полям через useStore и form.Subscribe, плюс композиция через createFormHook и useFieldContext для переиспользуемых полей.

• useHotkeys 5.3: хук для keyboard shortcuts в компонентах: библиотека позволяет декларативно навешивать сочетания клавиш прямо в компонентах (например, useHotkeys('ctrl+k', callback)), управлять областями действия и держать горячие клавиши рядом с UI-логикой.

• Марк Эриксон, мейнтейнер Redux и автор канонического “A (Mostly) Complete Guide to React Rendering Behavior”, выложил с React Miami 2026 свой новый доклад про React Compiler. Сначала повторение основ рендеринга, дальше разбор реального вывода компилятора: что он делает с компонентами, как именно оптимизирует, и как это переворачивает ментальную модель React. Если useMemo и useCallback теперь раздаёт компилятор, привычное “компонент перерендерится, если родитель перерендерился” начинает работать иначе. Слайды на сайте, видео тоже в посте.

𝐒 Svelte

• Майский ченджлог Svelte: TypeScript 6.0 в SvelteKit 2.56, breaking changes в remote-функциях (разрешения на refresh, стабильный кеш, run()), community add-ons в sv CLI и попадание в ThoughtWorks Technology Radar.

🦮 A11y

• Доступность в React: распространённые ошибки и как их исправить: практический разбор типичных ошибок доступности в React-интерфейсах (семантика, формы, управление фокусом, ARIA) и конкретных паттернов, как исправлять их без регрессий в UX.

📦 Разное

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

🌎 Браузеры

• Разбор Forced Synchronous Layout в Chrome DevTools: почему classList.toggle с последующим scrollTop форсит синхронный layout, как починить двойным requestAnimationFrame, как читать вкладку Selector Stats и почему FSL ломает INP.

• What’s New in WebGPU (Chrome 147-148). В WebGPU добавлены расширения WGSL для вычислительных шейдеров, включая linear_indexing, что позволяет использовать global_invocation_index и workgroup_index для упрощения индексации. Проверить поддержку можно через navigator.gpu.wgslLanguageFeatures, а на Linux расширена поддержка с NVIDIA драйверами 2024-05 и добавлением FeatureName::AdapterPropertiesDRM в Dawn.

🌐 Веб-стандарты

• Baseline: апрель 2026 от @nikolayshabalin. В браузерах внедрены новые API, включая элемент <search>, улучшенный WebAuthn для passkey, методы isWellFormed() и toWellFormed() для работы с UTF-16, а также расширенную поддержку ARIA-атрибутов. ARIA-атрибуты теперь доступны как свойства DOM-элементов (например, element.ariaPressed), что позволяет синхронизировать значения между HTML-атрибутами и JS-свойствами в обоих направлениях. Добавлены массивы для атрибутов типа IDREF (например, aria-labelledby), но массивы, возвращаемые свойствами, не идентичны исходным объектам, поэтому требуется сравнение содержимого. Функции упрощают клиентскую обработку данных, но не заменяют серверную проверку. В следующем месяце ожидается пять новых функций.

• First Public Working Draft: Long Animation Frames API. Long Animation Frames API позволяет обнаруживать длительные анимационные кадры, блокирующие UI-поток. Это помогает оптимизировать производительность веб-страниц, предотвращая задержки в выполнении критических задач. Это развитие идеи Long Tasks API.

• W3C опубликовал FPWD CBOR-LD 1.0, бинарный формат для Linked Data поверх CBOR с семантическим сжатием через JSON-LD контексты, что даёт выигрыш над gzip больше 60%, IANA-тег 0xCB1D и реестр use-case словарей. Цель: IoT, wire-protocols и компактное хранилище.

🎨 UI|UX и дизайн

• Дизайнер Альфа-Инвестиций @Tanyen применяет Теорию ограничений Голдратта к продуктовому дизайну: считать конверсию в абсолюте, искать узкое место по всей воронке, формулировать гипотезу через метрику, согласовывать сценарий со смежными командами и помнить, что цена ошибочно выбранной проблемы — это миллионы рублей, а не часы на макет.

• Бен Шварц, основатель Calibre, рассказывает про метрику UX Rating и почему процент довольных пользователей иногда полезнее, чем LCP, Lighthouse-скор или зелёная плашка Core Web Vitals.

🛠️ Инструменты

• Исследование tree shaking на семи бандлерах с тремя кейсами импортов от @lykianovsky: direct import — единственный способ, который работает везде. Разбор почему webpack режет мёртвый код в два шага через scope hoisting и terser, почему rollup и vite ломаются на single file через shared chunks, и почему Next.js не включает ModuleConcatenationPlugin даже если попросить.

• Вышел релиз-кандидат pnpm v11: минимальная версия Node.js теперь 22, сам pnpm стал чистым ESM, по безопасности дефолты затянули: minimumReleaseAge=1440 (новые пакеты резолвятся не раньше суток после публикации, прямой ответ на свежие supply-chain атаки) и blockExoticSubdeps=true. Команды publish, login, view, deprecate, unpublish, dist-tag, version больше не делегируют в npm CLI, а переписаны нативно. Глобальные установки теперь изолированы: каждая pnpm add -g получает свою папку с собственным package.json и lockfile, никаких больше конфликтов peer-зависимостей между глобальными пакетами.

Статья подготовлена при поддержке @CosyFrontend, @alexbraun и @DreamShaded.