Простой

10 мин

0

Привет!

Это 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.