Простой

9 мин

9.5K

Привет!

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

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

• 📺 Если Next.js кажется слишком «магическим»: интервью с создателем TanStack — про client-first, type inference и честный выбор стека без маркетингового тумана.

• 🤖 Когда ИИ уже в проде, а контроля нет: от джунов без Copilot до паттерна «архитектор + разработчик», ревью агентских PR, «В поисках Мемо» (одна таблица в ClickHouse вместо Qdrant и Chroma) и on-premise на 4× RTX 4090 с водянкой — чтобы внедрять AI дисциплинированно.

• 🛡️ Один пропуск в npm — и секреты в CI утекают: атака на 84 пакета @tanstack, чеклист безопасности React (XSS, HttpOnly, CSP, Zod) и инициатива Mozilla WAICT — чтобы не узнавать об инциденте из новостей.

• 🎨 CSS и анимации без лишнего JS: safe-area-inset на реальных устройствах, забытые HTML/CSS-фичи, scrollytelling на scroll-state queries и портфолио на GSAP + шейдерах — чтобы интерфейс выглядел дороже, а код оставался прозрачным.

• ⚡ JavaScript и Node.js 26 без сюрпризов при миграции: orval из OpenAPI, когда цепочки .filter().map() вредят читаемости, Temporal и ломающие изменения в релизе от 5 мая — чтобы меньше гадать и быстрее обновлять рантайм.

• ⚛️ React-стек 2026 без ставки вслепую: патчи Next.js, local-first как data architecture, карта 60+ библиотек, Ant Design 6.4 и whisper.rn on-device — чтобы выбрать инструменты осознанно, а не по инерции.

• 🅰️ Angular и инфраструктура вокруг него: Taiga UI MCP для агентов.

• 📦 GitHub в России, интерактивная карта HistoryPrint на 13 000 событий, критика FSD, Safari TP 243, дизайн-система в DESIGN.md без дизайнера и сводка апдейтов Deno, Vite, Next.js, Vue и Tailwind — …и многое другое.

📺 Медиа

• Почему React-разработчики уходят с Next.js на TanStack: Nuno Maduro беседует с Tanner Linsley — создателем TanStack — про экосистему как бизнес (партнёрства и спонсорство вместо одного корпоративного спонсора), TanStack Start как client-first альтернативу App Router, inference-first type safety без ручных аннотаций, почему Next.js кажется слишком «магическим», зачем (не) нужны RSC, поддержку Vue/Alpine, TanStack AI и вопрос, вырастет ли стек до Laravel или Rails.

🤖 AI

• Джун пишет с ИИ, но теряется без него: в обсуждении на Reddit (прямую ссылку не даём — ресурс в РФ периодически ограничивали) разбирают junior-разработчиков, которые выдают готовый код, но не могут поправить ошибки, отдебажить или объяснить, как он работает.

• Как я использовал Cursor для онбординга в продукт в бигтех-компании. Cursor помог @RJME ускорить онбординг в проекте MTS Web Services благодаря использованию чётких промптов с контекстом, стеком (React, TypeScript, Zustand, CSS Modules) и правилами из .cursor/rules/.mdc, но всё же требует внимания к сложным сценариям из-за галлюцинаций, особенно при неполном контексте или хаотичных кодовых базах.

• GitHub применяет dominator analysis из компиляторной теории к валидации Copilot Coding Agent: вместо сравнения трейсов по шагам строит граф из 2–10 успешных прогонов и оставляет только узлы, через которые обязан пройти каждый успешный путь.

• GitHub разбирает, как ревьюить агентские PR без накопления тихого техдолга: чистый на вид код от Copilot одобряется охотнее человеческого (по данным январского исследования «More Code, Less Reuse»), и в этом ловушка.

• В поисках Мемо. История путешествия @Aule от MemPalace с 58 тысячами чанков, 96% которых дубликаты, к 300 строкам Python для solo-сценария и одной таблице в ClickHouse, которые заменяют весь зоопарк из Qdrant, Chroma и отдельных сервисов памяти. Главный поинт: log DB давно умеет всё, что нужно памяти агента.

• Рабочий паттерн “архитектор + разработчик” в два окна с AI-агентами без общего контекста: одно ловит дыры в ТЗ и забытые edge cases, второе делает многошаговые рефакторинги в репе. У автора Claude Code и GPT-5.5 в режиме высокого мышления, но Claude+Claude с разными системными промптами тоже работает. Цена: две подписки, по мнению автора окупается одним критичным багом, пойманным до прода.

• Как мы собрали локальный AI-сервер на 4× RTX 4090 с водянкой — кейс для крупного клиента. История сборки on-premise сервера для речевой аналитики на 4× RTX 4090 с кастомной водянкой, двумя БП и двумя радиаторами.

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

• Разбираем масштабную атаку на TanStack, 84 пакета под угрозой: Команда Socket Threat Research обнаружила компрометацию 84 npm-пакетов в пространстве @tanstack: в них внедрили вредоносный имплант Mini Shai-Hulud, нацеленный на кражу учётных данных и секретов из CI/CD-сред, включая GitHub Actions.

• Безопасность в React-приложениях: Aurora Scharff разбирает, что даёт встроенное экранирование JSX и где его обходят (dangerouslySetInnerHTML + DOMPurify), как хранить токены в HttpOnly-cookie с Secure/SameSite и защищаться от CSRF, валидировать вход Server Functions через Zod с параметризованными SQL-запросами и настраивать Content Security Policy с nonce для inline-скриптов.

• Cybersecurity Metaphors. Эрик Лоу (создатель Fiddler, теперь в Microsoft Defender) собрал три картинки-метафоры про распространённые ошибки в безопасности. Uneven protection: атаки текут как вода, ищут самую низкую стену, в таком случае делать самую высокую стену ещё выше обычно бесполезно. Encryption: шифрование даёт конфиденциальность и целостность только пока секретный ключ защищён, а защитить ключ почти всегда сложнее самого шифрования. Enclaves: secure enclaves в наивных реализациях часто работают как confused deputy: послушно выполняют запросы любого, кто умеет до них достучаться.

• Trustworthy JavaScript for the Open Web. Mozilla запускает WAICT: Web Application Integrity, Consistency and Transparency. Это криптографическая привязка клиентского JS к manifest плюс публичный auditable log, чтобы скомпрометированный сервер не мог незаметно подменить код для отдельного пользователя.

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

• From Shader Uniforms to Clip-Path Wipes: How GSAP Drives My Portfolio. Тибо Гиньянд про свой портфолио: GSAP тянет один progress от 0 до 1, который через uniform уезжает в шейдер. Видео-текстуры обновляются точечно только на участвующих в переходе. Из неочевидных багов - Safari кеширует clip-path при активных view-transition псевдоэлементах, автор лечит это post-transition буфером и форс-репейнтом void el.offsetHeight.

🎨 CSS

• Using safe-area-inset to build mobile-safe layouts. Полный гайд по env(safe-area-inset-), теперь Baseline widely available. Главная ловушка для разработчиков: на десктопе и в Chrome responsive view все insets равны нулю, баги ловятся только на реальных устройствах.

• Зря вы забыли эти HTML- и CSS-фичи. Новая статья от @melnik909, где он объясняет свойства background-clip и background-origin, управляющие областью отображения фона в CSS. background-clip ограничивает отрисовку до определённой области (content-box, padding-box, border-box), а background-origin задаёт начальную область для отрисовки. Также рассматриваются элемент , атрибут contenteditable и применение currentColor в CSS.

• A Scrollytelling Gift for Mum on Mother’s Day 2026. Ли Мейер делает интерактивную открытку ко Дню матери, где рассказывает личную историю про маму, которая в 90-х писала на QuickBASIC игру про фотографию задолго до Pokémon Snap, и техническое демо новых scroll-snap events и scroll-state queries.

⚡ JS / TS

• orval: генератор type-safe TypeScript-клиентов из OpenAPI v3 и Swagger v2 (yaml/json) — модели, запросы, хуки и моки (MSW) для React Query, Vue Query, Svelte/Solid Query, Angular, SWR, Hono, Zod, fetch и MCP.

• Мэтт Смитт пишет, что цепочка users.filter(u => u.active).map(u => u.name)[0] выглядит чисто, но проходит весь массив ради одного результата — find() сделает то же самое лениво. Плюс внутрь chain не воткнёшь console.log без переписывания, а в async-варианте control flow смешивается с трансформацией данных. Правило простое: один-два шага норм, на трёх-четырёх - it depends, пять и больше - строго разделяем на именованные промежуточные значения. Мэтта поддержал даже Крис Койер, ждём ответа от адептов ФП!)

⚛️ React

• В последних patch-релизах Next.js закрыли несколько серьезных уязвимостей: были поправлены SSRF, обход middleware, DoS-риски в серверных компонентах, а также проблемы с исчерпанием соединений.

• whisper.rn: React Native-обёртка над whisper.cpp для on-device распознавания речи моделью Whisper — транскрипция аудиофайлов, VAD через Silero, поддержка iOS (в том числе Core ML) и Android, работает с Expo после prebuild.

• Ant Design 6.4.0: очередное обновление Ant Design UI-библиотеки — компонент BorderBeam с анимацией «бордера», расширение ConfigProvider (глобальные иконки, allowClear, focusable для Modal/Drawer и десятки настроек Select/DatePicker/Upload), семантические узлы для кастомизации classNames и styles, улучшения a11y (Input.Password, DatePicker, Image preview), design tokens colorErrorAffix/colorWarningAffix, Form с сообщениями валидации на 8 языках и Agent Readiness для ant.design.

• The Architecture Of Local-First Web Development. Дургеш Павар разбирает local-first как архитектурный подход в 2026 на основе своего опыта трёх продакшен-приложений и двух, откуда local-first пришлось вырвать. Ключевая мысль: local-first это data architecture, а не offline-first, не service worker и не PWA.

• React stack 2026: карта лучших библиотек по категориям. Большая карта React-стека 2026 года по 60+ категориям: победитель, runner-up и legacy в каждой с разбором что было стандартом, что им стало и почему.

🅰️ Angular

• Taiga UI MCP Server: MCP-сервер, который подключает Taiga UI к AI-воркфлоу — полная markdown-документация и готовые Angular-примеры в одном месте, без локальной установки Angular. Четыре инструмента: get_overview для обзора, get_list_components для поиска компонентов, get_component_example для примеров кода и get_migration_guide для гайдов по миграции. Источник документации можно переключать (stable/next) через конфиг.

• Когда Angular API отдаёт 200, а фронтенд уже ломается для пользователя: сервер отвечает 200, а в JSON лежит "error": true — Angular идёт по success-каналу Observable и тихо кладёт невалидные данные в стейт. Выход — централизованный interceptor, который превращает доменную ошибку в настоящий stream error, и проверки инвариантов в потоке через map/throw перед catchError. Бонусом можно стандартизировать формат ответов, чтобы на клиенте не выкапывать ошибку из самописной схемы.

NodeJS, Deno, Bun, etc

• Что нового в Node.js 26: кодовый разбор релиза от 5 мая 2026 — Temporal API без флагов (неизменяемые дата/время и таймзоны), Map.getOrInsert/getOrInsertComputed, Iterator.concat(), сырые ключи Ed25519 в crypto, V8 14.6, Undici 8 и чеклист ломающих изменений для миграции. Это последний релиз по текущему циклу: с Node.js 27 каждый релиз станет LTS, нумерация привяжется к календарному году (27.0.0 в 2027, 28.0.0 в 2028).

📦 Разное

• Заблокируют ли GitHub в России: Российские разработчики заметили, что GitHub всё чаще оказывается недоступен, однако РКН сообщает, что не ограничивает работу GitHub. Может ли это быть сознательная дискриминация российских пользователей администрацией платформы?

• Как я собрал интерактивную карту 13 000 исторических событий и научил её определять архетип любого города. @truer_xd разработал исторический сервис HistoryPrint, который ранжирует события по формуле score = (значимость/100)² × exp(−расстояние/) × вес эпохи × вес категории × 1000, где decay зависит от категории (500 км для войн, 1500 для остальных), а вес эпохи снижает современные события (0.8) и повышает древние (2.0). Проект использует Next.js 14, Mapbox GL JS, Tailwind и Vercel Functions + KV, а также реализует защиту лидерборда через HMAC без аутентификации.

• Мы увязли в Feature‑Sliced Design. @strannik_k критикует FSD за избыточную вложенность и неправильную группировку файлов, предлагая альтернативную группировку по функциональному назначению с использованием суффиксов в названиях файлов (например, orderForm.ui.tsx) и папок, указывающих на принадлежность (formModel). Такой подход снижает вложенность, улучшает связь между компонентами и лучше соответствует принципам Low Coupling и High Cohesion, чем строгие сегменты.

🌎 Браузеры

• Заметки о выпуске Safari Technology Preview 243: в Web Inspector появились метки Subgrid и Grid-Lanes, исправлены ошибки в WebAssembly и WebGPU, в том числе поддержка clip_distances в WGSL-шейдерах. Остальное — правки стабильности, совместимости и отладки.

🎨 UI|UX и дизайн

• Маркетинговый сайт без дизайнера: 5 практик с Open Design и Claude Code. @ayusavin переделал сайт конференции DevFest с использованием ИИ-агентов, таких как Claude Code, и управляемой дизайн-системы в формате DESIGN.md. Система хранит цвета, типографику и правила в markdown, обеспечивая версионность и интеграцию с кодом через символические ссылки. Автоматическое применение изменений в коде без мерджа или синхронизации упрощает работу с дизайном.

📋 Обновления популярных репозиториев за неделю:

Deno: исправлены уязвимости в TLS-валидации, добавлены проверки безопасности для TCPWrap, исправлены проблемы с deadlock в TLS, добавлена опция таймаута в Deno.test, улучшена обработка циклических зависимостей в модулях.

Bun: исправлены проблемы с TLS в macOS и Windows, исправлены ошибки в работе с процессами и Terminal, улучшена обработка зависимостей.

Vite: исправлены проблемы с worker-сборкой, интеграция TanStack CLI, предотвращение ошибок при конкурентных импортах, улучшена изоляция окружений.

Transformers: Добавлен Generic Sequence Classifier для мультимодальных задач, добавлены поддержка Qwen3.5 и HyperCLOVAX SEED Think 14B, исправлены ошибки в moe.py и gemma4, удалён FuyuBatchFeature.

llama.cpp: добавлены поддержка Gemma4_26B, Vertex AI API, Adreno GEMM, sarashina2.2-vision-3b, фикс бага с сохранением состояния устройства.

Ollama: отключён запуск Claude Desktop, добавлено ограничение моделей по плану, добавлена поддержка MTP для Gemma4.

OpenAI Cookbook: Добавлен пример использования SDK, оптимизация потребления памяти.

LangChain: исправлена уязвимость при десериализации, усилена защита при загрузке из ненадежных манифестов, восстановлен тег ls_agent_type в create_agent.

Svelte: исправлены ошибки в обработке батчей и асинхронных веток, улучшена стабильность SSR, исправлены проблемы с промисами и ошибками в итерациях, оптимизированы процессы обновления состояния.

Angular: исправлены проблемы с абстрактными классами, добавлены возможности для inline-таблиц в шаблонах, возможность компилировать неэкспортированные классы в standalone, добавлен параметр allowedHosts для renderModule.

React: улучшена производительность в FlightReply, добавлены утилиты для отслеживания предзагрузки стилей в Fiber.

Next.js: Стабилизация unstable_io, добавлен chunkLoadingGlobal для Turbopack, исправлены уязвимости через cherry-pick ghsa, исправлен middleware matcher, отслеживание searchParams через Proxy.

Vue.js: исправлены утечки DOM в suspense, улучшена валидация props, исправлены проблемы с типами в компиляторе SFC, предотвращено создание орфанных эффектов в реактивности, сохранены хэш-ссылки на изображения.

Tailwind CSS: добавлены утилиты tab-, zoom-, scrollbar-gutter-*.

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