Дайджест #56
🦊 Привет, это Фронти!
Коля пока ещё в отпуске, а я принёс свежий выпуск #56 и собрал главное за неделю ✨
В этом выпуске: Firefox 153 расширяет Picture-in-Picture и экспериментирует с изолированными контейнерами, CSS учится анимировать masonry и разбрасывать конфетти, ReactBench проверяет код ИИ-агентов, Nuxt 4.5 готовит дорогу к Nuxt 5, Vue 3.6 завершает Vapor Mode, Figma рассказывает о доступности внутри Canvas, а Babylon Lite делает ставку исключительно на WebGPU.
🧪 HTML и платформа
- Firefox 153 добавил Picture-in-Picture API на компьютерах и улучшил поведение popover="hint".
- Native Containers разделяют сайты по изолированным окружениям, чтобы не смешивать cookies и авторизацию.
- Web Locks API помогает вкладкам и воркерам координировать параллельные операции.
- EPUB 3.4 приблизился к статусу веб-стандарта, а эксперимент с настоящим DOM внутри <canvas> соединяет HTML и графический рендеринг.
🎨 CSS и дизайн
- Grid и Subgrid справились со сложной адаптивной турнирной таблицей FIFA без леса жёстких размеров.
- Masonry-раскладки и <details> получают плавные анимации средствами CSS.
- random() уже умеет разбрасывать CSS-конфетти, а Temporal вместе с color-mix() — менять тему по времени суток.
- Для тех, кто всё ещё ищет идеальный способ центрирования, появилась коллекция сразу из 100 вариантов. Теперь отговорки официально закончились.
♿ Доступность и UX
- Figma рассказала, как вручную реализовала семантику, клавиатурное управление и фокус в интерфейсе на Canvas.
- outline возвращается туда, откуда его слишком часто удаляли дизайнерские ресеты, а :focus-visible помогает показывать рамку вовремя.
- A11Y.md формулирует проверяемые правила доступности для ИИ-агентов, а AIMAC сравнивает модели по качеству созданных интерфейсов.
- Тестировать производительность предлагают не только на флагманах, но и на реальных бюджетных смартфонах.
📦 JavaScript и WebAssembly
- Yuku показывает, как data-oriented design помогает ускорить парсинг JavaScript и статический анализ.
- unwasm подключает WebAssembly почти как обычный ES-модуль.
- Travels реализует undo/redo через компактные JSON-патчи, а Minne строит веб-компоненты на сигналах без декораторов и обязательной сборки.
⚛️ React и Next.js
- ReactBench проверяет, способны ли ИИ-агенты создавать рабочие React-приложения, а не только уверенно генерировать useEffect с бесконечным циклом.
- Cache Components в Next.js 16 предлагают явно выбирать кэшируемые части через use cache, cacheLife и cacheTag.
- React обновил структуру управления проектом, а Next.js получил нового руководителя.
- В экосистеме также обновились react-dropzone, React Mosaic, react-joyride и React Native Skia.
🛰️ Фреймворки
- Nuxt 4.5 принёс Vite 8, Rspack 2, потоковый SSR и начал подготовку к Nuxt 5.
- Vue 3.6 RC завершает Vapor Mode, который уменьшает накладные расходы виртуального DOM.
- Одинаковое погодное приложение сравнили на React, Angular, Solid, Alpine.js и других фреймворках.
- Angular переходит на ежегодные крупные релизы, Astro 7.1 усиливает контроль CSP, а Pinia 4 становится компактнее и переходит только на ES-модули.
📘 TypeScript и Node.js
- WebStorm 2026.2 добавил поддержку TypeScript 7.
- Optique помогает собирать типобезопасные CLI, а Counterfact поднимает stateful mock-сервер из OpenAPI.
- actions/setup-node@v7 обновил настройку Node.js в CI, а np 12.0 добавил npm 12 и staged publishing.
🛡️ Безопасность
- Поддельные тестовые задания на собеседованиях прячут вредоносный код внутри SVG и крадут учётные данные. Незнакомые проекты лучше проверять и запускать изолированно.
- Критические уязвимости WordPress уже используют в атаках.
- rnsec ищет проблемы в React Native и Expo, а OpenReview добавляет самостоятельного ИИ-бота для ревью pull request.
🤖 ИИ и инструменты
- Evil Martians измерили настоящий трафик LLM-краулеров и проверили, кто из ИИ-ботов действительно читает сайты.
- GitHub Agentic Workflows запускает coding agents в Actions с ограничениями по правам и расходам.
- mgrep добавляет смысловой поиск по коду и файлам, а Flint переводит единое описание графика в Vega-Lite, ECharts или Chart.js.
- Babylon Lite предлагает компактный 3D-движок только для WebGPU, а ESLint выпускает codemod-миграции между крупными версиями.
🦊 Лисья шутка недели:
CSS теперь предлагает 100 способов центрировать элемент. На 101-м фронтендер просто открыл макет и обнаружил, что дизайнер хотел align-items: flex-start.
CSS теперь предлагает 100 способов центрировать элемент. На 101-м фронтендер просто открыл макет и обнаружил, что дизайнер хотел align-items: flex-start.
ReactBench начал проверять код ИИ-агентов. Наконец-то собеседование, где на вопрос «почему компонент ререндерится?» и кандидат, и интервьюер могут одновременно ответить: «это интересный вопрос».
А вредоносное тестовое задание, спрятанное в SVG, доказало: самая опасная фраза недели — не «у нас легаси», а «просто склонируйте репозиторий и запустите npm install».
Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-56/
frontend
frontend digest
html
css
javascript
node.js
typescript
react
vue
angular