Привет!

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

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

• 📺 TanStack AI генерирует картинки, а не только чат-ботов.

• 🤖 Почему ИИ выдаёт глупый код — и трёхуровневая архитектура, которая это исправляет.

• 🎨 Математическая модель masonry-раскладки на Flexbox — с алгеброй, а не «работающим примером».

• ⚡ TypeScript 6.0, обновления безопасности Node.js, петиция против AI-кода в ядре Node.js и Kafka из Node.js по-взрослому.

• ⚛️ TanStack улучшил пропускную способность SSR в 5 раз, а Strawberry Browser переписал 130 000 строк с React на Svelte за две недели.

• 🅰️ Angular выпустила официальные скиллы для AI-агентов.

• 💚 Компоненты визуализации звука для Vue.js на Web Audio API.

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

📺 Медиа

• Генерация картинок с помощью TanStack AI -Tanstack AI можно использовать не только для создания чат-ботов, но и для генерации изображений, видео, преобразования текста в речь, перевода и структурированного вывода.

🤖 AI

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

• Почему ИИ выдаёт глупый код — и как это исправить — Трёхуровневая архитектура инструментов разработки с MCP для синхронизации контекста. Объясняет, почему AI-ассистент «теряется» без явной связи между задачей и окружением, и как этот разрыв закрыть на уровне архитектуры инструмента.

• Как я перестал бояться Claude Code и научил его не ломать мои проекты — Практические настройки CLAUDE.md: расширение контекстного окна до миллиона токенов, оптимизация компакции, правила для предотвращения деструктивных изменений. Статья для тех, кто уже пробовал Claude Code, но столкнулся с тем, что агент начинает «фантазировать».

🌐 Браузеры

• Почему ваш монитор не умеет показывать бирюзовый (и ещё 65% цветов) — Технический разбор цветопередачи: преобразование спектральных данных через CIE 1931, ограничения sRGB-гамута и почему OLED не решает проблему. Крайне полезное знание для тех, кто проектирует UI.

• Смотрим в будущее веб-платформы с Рэйчел Эндрю, который объясняет, как Baseline-датасет отслеживает внедрение браузерных фич: 30-месячный переход от «Новости» до «Широкой доступности». Короткая, но практичная точка входа для тех, кто планирует поддержку и хочет перестать гадать.

🎨 CSS

• Flexbox Masonry Layout (Explained with Math) — Математическая модель masonry-раскладки на Flexbox: как распределить элементы с разными соотношениями сторон так, чтобы высоты сходились. Автор выводит алгебраические преобразования, а не просто показывает «работающий пример». Нужна таки математика программистам!

• Лёгкое переключение изображений между тёмной и светлой темой от Брамуса. — Функция light-dark() скоро заработает с изображениями, и Брамус разбирает, что стояло за этим ограничением. В статье рассказывается про строгую проверку типов и будущие решения через @function и color-scheme().

• Галерея изображений с поповерами и не только — Крис Койер показывает анимацию попапов через @starting-style и :popover-open, с нестандартным применением единиц dvb/dvi для точного позиционирования.

⚡ JS / TS

• Node.js 25.x, 24.x, 22.x, 20.x обновление безопасности - Доступны новые обновления безопасности для Node.js

• Анонс TypeScript 6.0 - TypeScript 6.0 последняя версия основанная на базе JavaScript

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

• Три года в одиночку: как я строил бэкенд-фреймворк поверх Next.js и что из этого вышло — разбор фреймворка Vovk.ts: двухэтапное разрешение типов через паттерн procedure().handle(), которое решает проблемы с рекурсивными и условными типами в крупных системах.

• Мы переписали наш парсер WASM с Rust на TypeScript — и он ускорился в три раза — Контринтуитивный результат с чёткой причиной: сокращение сложности с O(N²) до O(N) даёт больше, чем оптимизация на уровне языка. Детальные бенчмарки и вывод, который стоит запомнить: язык - не главный рычаг производительности.

• Безошибочная работа с Kafka из Node.js. Часть 1: Продьюсер — Технические детали KafkaJS: маршрутизация сообщений, управление партициями, настройка acks как баланс между скоростью и надёжностью. Статья разбирает механизмы транзакций, которые обычно обходят стороной в обзорных материалах.

• Три причины разрастания зависимостей - деревья зависимостей npm со временем увеличиваются в размерах, часто содержая давно устаревший код. Автор рассматривает три основных типа раздувания зависимостей, причины возникновения и способы решения этой проблемы.

⚛️ React

• Пятикратное увеличение пропускной способности SSR - TanStack улучшили производительность SSR в 5 раз.

• вышел next-forge 6.0 - Шаблон Turborepo от Vercel для монорепозитория приложений Next.js.

• Next.js 16.2 - в новой версии Next.js улучшения производительности: на 400% быстрее запуск, 50% быстрее рендеринг

• Как мы переписали 130 000 строк кода с React на Svelte за две недели - мигрировали на другой фреймворк с помощью ИИ и ускорили работу браузера Strawberry в два раза.

🅰️ Angular

• Angular выпустила официальные скиллы для AI-агентов - Создание приложений, написание компонентов и многое другое

💚 Vue js

• Компоненты визуализации звука VueJS - Красивые аудио-визуализаторы для Vue 3: бары, круг, волна, линия и live с микрофона — всё на Web Audio API в одном лёгком пакете vue-audio-visual

• ООП для управления состоянием во Vue - Интеграция паттернов domain-driven дизайна с системой реактивности Vue через жизненный цикл моделей. Действия как первоклассные объекты, управление состоянием и обработка ошибок без зависимости от глобальных хранилищ.

📦 Разное

• Малоизвестные, но мощные функции Vue - Vue часто хвалят за простоту и понятный API. Большинство разработчиков знакомы и работают с ref(), reactive(), computed(), watch(), v-if/v-for, но Vue также включает в себя несколько менее известных функций, которые могут значительно улучшить производительность, ясность кода, архитектуру и удобство работы разработчиков.

• Собираем красивые 3D переходы на Webflow, GSAP и Three.js — Связка Three.js, Barba.js и GSAP для плавных переходов между 3D-сценами. Автор подробно разбирает data-атрибуты как точки управления анимацией и оптимизацию резонансного движения камеры.

• Разработка через капсулы: как мы упаковали архитектуру в ДНК проектов. Фреймворк объединяет гексагональную структуру, NATS, OpenTelemetry и AI для автоматической документации. Интеграция AI для анализа кода и генерации диаграмм.

• Страница на 49 мегабайт.Перевод разбора того, как современный новостной сайт стал весить 49 МБ: ад из сетевых запросов, рекламные скрипты, CLS и мобильные устройства под нагрузкой.

• Когда Deno или bun лучше, чем Node.js? Сравнение с конкретными метриками, а не абстрактное «Bun быстрее». Автор защищает гибридный подход: Bun для разработки, Node.js для продакшена.

🎨 Дизайн

• Anime vs. Marvel/DC: проектируем цифровые продукты с учётом эмоций: метод синхронизации эмоциональной дуги с ключевыми точками интерфейса: неопределённость => ясность => ожидание => достижение => спокойствие. Автор разбирает, как это работает в реальных продуктах, а не в теории. Статья для тех, кто проектирует флоу, а не отдельные экраны.

• Что выбрать: отдельную страницу или модальное окно? Виталий Фридман предлагает четырёхэтапный процесс выбора между модалкой, страницей и другими компонентами. Не интуиция, а структурированный критерий: количество вариантов, глубина задачи, необходимость контекста.

♿ Доступность

• Автотесты или ручное тестирование доступности?Автоматические инструменты вроде Axe находят часть проблем, ручное тестирование - другую, и замены одного другим нет. Статья даёт модели зрелости и конкретные стратегии интеграции тестирования доступности в CI/CD без воды и без лишних призывов «думать об a11y».

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