Привет!
Это 18 выпуск Frontend Status — дайджеста по фронтенд-разработке.
В этом выпуске:
📺 Экосистема TanStack кажется бесконечной, а browser gaming снова стал серьёзной платформой: Jack Herrington собирает 17 библиотек в одном приложении, а Software Engineering Daily с Эриком Дабилбором из Poki разбирает WebAssembly и WebGL/WebGPU на практике — чтобы увидеть, как устроены и стек, и дистрибуция современных веб-игр.
🤖 Старые приёмы промптинга режут точность reasoning-моделей, а закрытая вкладка не останавливает счёт — токены и GPU крутятся впустую — чтобы перестроить работу с ИИ и не платить за отменённую работу.
🛡️ Next.js с дефолтными настройками уязвим к RCE через Server Actions — даже если «серверных функций у нас нет» — чтобы не жить с иллюзией безопасности.
🎨 Центрирование всё ещё ломает голову, а каскадные анимации плодят сотни
:nth-child— честный разбор центрирования и новыеsibling-index()/sibling-count()— чтобы понимать, почему код работает, а не подбирать методом тыка.⚡ Зелёные async-тесты врут, PDF застревает в iframe, геометрия — в sin/cos, DI падает на проде — PDFSlick, Geometric.js, InferDI и разбор ловушек Jest — чтобы ловить ошибки до деплоя, а не в три часа ночи.
⚛️ React-зоопарк, неделя конфигов и ручная мемоизация: карта Robin Wieruch на 2026-й, Rockpack из коробки, TanStack AI без вендорного замка, visx 4.0, RSC в TanStack Start и React Compiler — чтобы собирать стек без споров и вычистить лишний шум из кодбейза.
👁️ TanStack Table почти убил типы и автокомплит во Vue — честный разбор на Habr — чтобы брать библиотеку только под ту боль, которую не решить за час на чистом Vue.
🌎 Chrome подставляет тяжёлые блоки по ходу стрима, Firefox говорит с железом через Web Serial, canvas наконец принимает DOM — чтобы меньше костылей в вёрстке и проще UI поверх графики.
🦮
aria-labelна div — ложная доступность, которую скринридер проглатывает — чтобы не тратить время на иллюзию a11y.📦 Код пишут агенты, а ценность — в суждении: cpojer, автор Jest, о том, что осталось важно инженеру — чтобы направлять систему, а не печатать быстрее.
⚡ Node молча жрёт память, если стримы игнорируют backpressure — чтобы баг не всплыл только на по-настоящему большом датасете.
📺 Медиа
Все 17 проектов TanStack в одном приложении: Jack Herrington собрал все 17 библиотек TanStack в одном приложении — трекер тренировок — и за четверть часа показывает, кто за что отвечает: роутинг и сервер в центре, вокруг — таблицы, формы, виртуальные списки, горячие клавиши, ИИ, девтулзы и остальное. Если экосистема TanStack кажется бесконечной и непонятно, с чего начать и как куски стыкуются — это карта на одном экране. К коду — TanMaxx на GitHub.
Браузерные игры как инженерная платформа: Poki, WebAssembly и WebGL/WebGPU: Software Engineering Daily с Эриком Дабилбором, principal engineer в Poki и разработчиком веб-игр. Ниже — сжатый пересказ о том, как браузер снова стал серьезной игровой платформой, где реальные ограничения, и почему дистрибуция в вебе отличается от Steam и App Store.
🤖 AI
Reasoning-модели сломали мой промпт-инжиниринг: @sergei_ai выкинул трёхлетний арсенал — развёрнутый CoT, шесть few-shot примеров, роль «аналитик с 15 лет опыта» — после того как на GPT-5.5, o-серии, Opus 4.7 и Gemini 3 thinking эти техники дали минус 5–7% к точности вместо привычного плюса, потому что модель сама прокручивает chain-of-thought внутри, и второй слой рассуждения сверху с ним конфликтует.
Скрытая цена «осиротевшей» AI-работы: пользователь закрыл вкладку, а LLM-стрим всё ещё генерирует токены, vector search сканирует, tool calls выполняются — работа пережила причину, по которой запускалась, и счёт придёт завтра; на проде 100 000 брошенных запросов в день по 3–5 секунд лишнего downstream складываются в миллионы сожжённых токенов и GPU-время.
🛡️ Безопасность
CVE, Shell и побег из контейнера: испытываем возможности PT Cloud Application Firewall: Иван Чеботарёв из К2 разбирает свежую CVE-2025-55182 — RCE в Next.js через Server Actions, и главная неприятность в том, что уязвим любой Next.js с дефолтными настройками: Server Actions включены по умолчанию с 14-й версии, а срабатывает баг на этапе десериализации React Flight, ещё до проверки хэша действия, то есть RCE достигается одним POST-запросом, даже если в приложении нет ни одной серверной функции.
🎨 CSS
Центрирование в CSS в 2026 году: Темани Афиф пересобирает вечную тему «как отцентрировать элемент» вокруг простой мысли — универсального ответа нет, техника зависит от контекста (элемент в потоке или вынесен из него), и важно понимать, почему выбранный код работает, а не подбирать рабочую комбинацию методом тыка.
Математические раскладки: подсчёт соседей в дереве: новые CSS-функции
sibling-index()иsibling-count()дают элементу его номер и общее число соседей прямо в стилях, а значит, ступенчатую анимацию-каскад можно описать одной строкой черезcalc(), без препроцессорных циклов, плодящих по:nth-child()-правилу на каждый элемент, и даже без JS.
⚡ JS / TS
PDFSlick: PDF в React, Solid и Svelte: встроить PDF в веб-приложение — обычно это отдельный мир: чужой просмотрщик, мало контроля, боль с несколькими тяжёлыми файлами сразу. PDFSlick подключает PDF к React, Solid, Svelte и обычному JavaScript как к своим компонентам — от простого просмотра с зумом до аннотаций, комментариев и нескольких документов в одном окне. Если нужен полноценный просмотрщик, а не встроенный iframe — можно взять готовое и докрутить под задачу.
Geometric.js: геометрия для канвы и вёрстки: нарисовать фигуру на экране — легко, а вот ответить «пересекаются ли два многоугольника?» или «точка внутри области?» — и вы снова в школьной геометрии с формулами и костылями. Harry Stevens, график из New York Times, собрал Geometric.js: аккуратная библиотека, которая берёт на себя повороты, отражения, обводки, интерполяцию и все эти вопросы «да или нет» между фигурами. На сайте — десятки живых примеров, от простых до булевых операций над многоугольниками. Если нужна геометрия на канве или в интерактивной вёрстке, а не очередной переписанный со школьной парты sin и cos — вот готовый ответ.
InferDI: типобезопасный DI для TypeScript: контейнер зависимостей обычно ловит ошибки на проде — не тот тип, забыли зарегистрировать, ресурс не закрыли, и сервер падает в три часа ночи. InferDI — опенсорсный DI для TypeScript с другим подходом: подавляющее большинство промахов отлавливается при сборке, а не после деплоя; ресурсы сами закрываются через новый стандарт
using, без ручной возни; под капотом быстрый реактивный движок, в бандле — около 2 КБ, без декораторов и лишних зависимостей. Если DI нужен, но страшно тащить тяжёлую магию — вот лёгкий вариант с проверками заранее.Вы неправильно тестируете асинхронный код: зелёный async-тест доказывает ровно одно — что вернувшийся из функции
Promiseразрешился, а не что проверки внутри отработали; раннер ждёт только тотPromise, что вы ему отдали, а Jest по умолчанию считает пройденным тест с нулём вызововexpect, поэтому.thenбезreturn,asyncбезawaitилиforEachс async-колбэком оставляют проверку выполняться в пустоте, и тест “зелёный” даже с заведомо невернымexpect.
⚛️ React
React-библиотеки на 2026 год: пришли в React — а там не одна библиотека, а целый рынок на каждый шаг: с чего собрать проект, как жить с сервером, чем красить интерфейс, где хранить логин. Robin Wieruch, который каждый год раскладывает этот зоопарк по полочкам, обновил карту на 2026-й: не каталог из сотни названий, а один рабочий ответ на типичный вопрос. Его совет — начинать с самого React и докладывать по мере реальной боли, а не тащить всё сразу; многие привычные «обязательные» зависимости прошлых лет (тяжёлые хранилища состояния, устаревшие способы стилизации, ручная возня с оптимизацией) сегодня только мешают. Если не хотите потерять неделю в спорах «что взять» — заберите готовый маршрут.
Rockpack: React-проект из коробки с SSR и ИИ: новый React-проект обычно начинается с недели настройки — сборка, линтер, тесты, серверный рендеринг, — а потом ещё думаешь, как не утонуть в коде от ИИ. Rockpack собирает всё одной командой: TypeScript, SSR, проверки качества и структура проекта, с которой и человеку, и ассистенту проще работать без хаоса; в комплекте даже готовый CLAUDE.md с правилами, чтобы агент не разносил репозиторий. Если хотите сразу писать фичи, а не неделю крутить конфиги — вот стартовая площадка.
TanStack AI Beta: «нейтральная территория» AI-инструментов выросла: встроить ИИ в своё приложение хочется — а на практике выбираешь между привязкой к одному облаку, дорогой миграцией и чужими правилами игры. Команда TanStack, которая привыкла делать инструменты под ваш стек, а не наоборот, довела TanStack AI до беты: в декабре пообещали «нейтральную территорию» без вендорного замка — и за полгода из сырого прототипа выросла платформа, на которой уже можно собирать настоящий продукт. Чат, картинки, голос, видео — одна и та же схема; захотели другую модель — меняете одну строчку, остальное не трогаете. Если вас пугает, что завтра придётся переезжать ради смены поставщика — это открытый путь без такого сценария.
visx 4.0: примитивы визуализации для React: графики и диаграммы обычно живут в отдельном мире — чужой синтаксис, тяжёлые готовые библиотеки, борьба с тем, как у вас уже устроен React. Вышел visx 4.0 с полной поддержкой React 19: не «ещё один конструктор графиков», а набор кирпичиков, из которых вы сами собираете то, что нужно именно вам — со своей анимацией, стилями и логикой. Главная мысль простая: если вы умеете React, вы умеете рисовать данные; на сайте можно посмотреть все компоненты в деле, для тех, кто на третьей версии — есть гайд по переходу.
Серверные компоненты React в TanStack: Адам Ракис разбирает реализацию RSC в TanStack Start с нуля и считает её устроенной иначе и удачнее, чем в Next.js — компоненты выполняются server-only, их код никогда не уезжает в клиентские бандлы, они могут
await-ить что угодно от стороннего fetch до прямого запроса к Postgres без утечки connection strings, но за это лишены state и обработчиков вроде onClick.React Compiler убил половину моих оптимизаций — и это хорошо: React Compiler анализирует код на build-time и сам расставляет мемоизацию, близкую к
React.memo, поэтому годами разбросанные по кодбейзуuseMemo/useCallback/React.memoво многих местах превращаются в лишний шум — автор показывает, какusers.filter(u => u.active)без обёртки читается чище и часто оптимизируется без вашего участия.
👁️ Vue
@tanstack/vue-table: почему я почти отказался от этого: почему @Pnym выкинул
FlexRender(рушит автокомплит и типы, тянет магию сh()иcomponent :is) и рендерит таблицу обычнымv-forсо слотами для кастомных ячеек. Алексей даёт совет перед подключением — лучше собрать таблицу на чистом Vue за час, а TanStack брать только под серверную сортировку, пагинацию и группировку.
NodeJS, Deno, Bun, etc
Node.js-стримы не тормозят продюсера и молча жрут память: привычное «стримы читают данные по кусочкам, значит память в безопасности» — миф. Backpressure в Node не автоматика, а вежливая просьба: потребитель может сказать продюсеру “не успеваю, притормози”, но заставить не может. Игнорируешь просьбу — Node молча буферизует всё подряд, пока не упадёт V8, и баг не виден ровно до того дня, когда придёт по-настоящему большой датасет.
🦮 A11y
Не вешайте aria-label на div и другие generic-элементы: если тянет повесить
aria-labelна div, то это сигнал, что выбран не тот элемент. У div и span роль generic, которую спека именовать запрещает, и лейбл либо проглатывается, либо читается криво. Лечится семантикой: берёшь элемент с настоящей ролью, и имя подхватывается само —<section>с label становится регионом-landmark, а div сpopoverполучает роль group.
📦 Разное
Современные инженерные ценности: Christoph Nakazawa, автор Jest и Fate, признаётся: «не верю, что раньше писал код руками». За полгода агенты написали для него целые проекты — от игры до инструментов — и он пересобрал, какие инженерные ценности вообще остались важны. Код давно не узкое место, узкое место — суждение: что стоит делать, кто за что отвечает, насколько быстро вы узнаёте, что сломалось. Его план на 2026-й: маленькие команды с чёткой зоной ответственности, вкус (отсеивать лишнее, а не генерировать ещё), жёсткие правила и быстрая обратная связь — чтобы агент чинил за минуту, а не за час, — и весь контекст продукта прямо в репозитории, а не в головах и разбросанных документах. Если боитесь, что ИИ заменит инженеров — наоборот: нужно больше людей, которые умеют направлять, а не печатать.
🌎 Браузеры
Декларативные частичные обновления: HTML всегда приходил строго сверху вниз, по порядку, но с недавних пор Chrome предлагает это снять. Out-of-order streaming через
<template for="...">и плейсхолдеры-процессинг-инструкции<?marker>позволяет отдать статику сразу, показать «Loading…» на месте будущего блока, а тяжёлый кусок (например, результат запроса к БД) вставить туда позже по ходу того же стрима.Web Serial в Firefox: Firefox 151 для десктопа получил Web Serial — теперь сайт через JavaScript общается с микроконтроллерами (ESP32, Raspberry Pi Pico), 3D-принтерами, LEGO и USB-измерителями мощности без нативных приложений и установщиков; на этом, например, ESPHome ставит прошивку для Home Assistant в пару кликов.
🌐 Веб-стандарты
HTML внутри canvas: origin trial в Chrome: многолетний выбор «DOM ради семантики и доступности или canvas ради графической производительности» Chrome предлагает больше не делать — новый HTML-in-Canvas API рисует DOM-контент прямо в 2D-canvas или WebGL/WebGPU-текстуру, и при этом текст остаётся выделяемым, доступным скринридерам, ищется через Ctrl+F и индексируется краулерами и AI-агентами.
📋 Обновления популярных репозиториев за неделю:
AI / ML
Transformers: Исправлена уязвимость в пути при сохранении шаблонов, добавлена поддержка XPU для FlashAttention, добавлена новая модель cohere2_moe, исправлены ошибки в проверке модели и в MaskGenerationPipeline.
llama.cpp: исправлены уязвимости в ggml-alloc, добавлены оптимизации CUDA, исправлены ошибки в UI и управлении контекстом, добавлена поддержка NVFP4 для сжатых тензоров, расширены функции gguf для инициализации из буфера.
Ollama: улучшена инвентаризация моделей, оптимизирован запуск, добавлены метаданные для codex, исправлены состояния в mlxrunner, откат DFlash speculative decoding.
LangChain: добавлены средства для обработки PII в потоках, зарегистрированы трансформеры потоков в middleware, исправлена защита от неинициализированных экземпляров в OpenAI, добавлена логика повторных попыток для ошибок подключения Fireworks.
Фронтенд
React: исправлен баг с генерацией лишних импортов в компиляторе.
Svelte: исправлены ошибки в асинхронных эффектах, улучшена обработка батчей, оптимизирована гидрация, исправлены ошибки в асинхронных зависимостях, улучшена обработка символов.
Tailwind CSS: исправлена проблема с sourcemaps, добавлено --silent для CLI, исправлен парсинг селекторов, добавлены новые узлы селекторов, улучшен парсинг shadow-значений.
Бэкенд
Next.js: Исправлены ошибки в merge driver, добавлены утилиты next-dev-loop и next-ppr-optimizer, обновлены метаданные для динамических сегментов, включены экспериментальные фичи cachedNavigations, optimisticRouting и varyParams.
Deno: исправлена ошибка конфигурации при неудачном преобразовании пути в URL, улучшена обработка бsdiff delta в zstd-сжатии, восстановлен поддержка brotli в CompressionFormat, улучшена обработка позиционных аргументов в fs.promises, оптимизирован TLS-провайдер Quinn и ServerResponse.
Bun: Исправлены ошибки паников при обработке TypeScript и JSX, добавлены улучшения безопасности в webcrypto, исправлены проблемы с HTTP/2 и обработка Blob’ов, оптимизированы CSS-преобразования.
Angular: исправлена уязвимость в доверии к JSDoc, добавлено подтверждение перед загрузкой рабочего пространства, улучшена производительность при обработке ошибок парсера, отключено ядро языка в ненадежных рабочих пространствах.
Безопасность
Transformers: Исправлена уязвимость в пути при сохранении шаблонов.
Deno: улучшена обработка бsdiff delta в zstd-сжатии, восстановлен поддержка brotli в CompressionFormat.
Bun: добавлены улучшения безопасности в webcrypto.
Angular: исправлена уязвимость в доверии к JSDoc.
Инструменты разработчика
Vite: исправлены ошибки в работе с glob и обработке путей HTML, добавлена отправка 408 при таймауте, исправлена уязвимость в зависимости ws.
Статья подготовлена при поддержке @CosyFrontend, @alexbraun и @DreamShaded.