Frontend Status: свежий дайджест фронтенда и AI — 18.02.2026

Привет!

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

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

• Медиа: Mastra Workspaces — свой «Claude Code» в песочнице; Рич Харрис про реактивность и RSC; безопасность фреймворков (Анастасия Егорова).

• AI: безопасность агентов (Auth0), пост-обучение LLM в Netflix, Brave Search API для агентов.

• A11y: Axe MCP в DevTools, чеклист Shopify (ADA), когда нужен role="presentation" (Стив Френзел).

• Браузеры: Interop 2026, WebMCP — зачем и ранний доступ в Chrome.

• 3D и анимации: 3D-труба на React-three-fiber, procedural snake на Three.js и кривых Безье.

• CSS: эластичный текст, круговая диаграмма, параллакс и пирамидальные сетки (Темани Афиф), текстовый вихрь (Ли Мейер), дизайн-система Ambient, освещение (Крис Койер).

• JS/TS: sql.js в браузере, Perspective BI, дженерики в TypeScript.

• React: State of React 2025, shadcn/ui vs MUI, HighTable на миллиарды строк, FrankenTUI, Ant Design 6.3, гайд по оптимизации.

• UX/DX: UX фоновых задач, интерфейсы для агентов (Смэшинг), семантические токены.

• Тестирование: JIT Tests от Meta — тесты от LLM в реальном времени.

• Разное: Electrobun (Bun + нативный WebView), учебник по мат/CS/AI, UI в стиле WarCraft 3, npmx, Stockfish 18 в WASM.

Медиа

• Mastra Workspaces позволяет за минуты собрать агента, который сам пишет и выполняет код в изолированной среде — как Claude Code, но свой и open-source ^[1] – В этом видео показывают, как с помощью Mastra Workspaces легко собрать своего собственного «Claude Code»-подобного агента в изолированной песочнице: создаёшь workspace, подключаешь LLM, даёшь доступ к файлам и терминалу — и агент сам пишет, редактирует и запускает код. Всё просто, безопасно и без внешних сервисов вроде Anthropic. Отличный гайд для тех, кто хочет поэкспериментировать с computer-use агентами самостоятельно!

• Рич Харрис дискутирует о реактивности, перформансе фронтенда и RSC ^[2], сравнивает подход Svelte и SvelteKit и рассуждает о будущем – об асинхронно-ориентированных фреймворках.

• Самый безопасный фреймворк ^[3] – Анастасия Егорова рассказывает о проблемах и уязвимостях современных фреймворков.

AI

• Наскольно безопасно доверять агентам? ^[4] В статье поднимается ряд проблем и вариант решения, и, хоть и является статья рекламной, всё же даёт ряд нюансов, над которыми необходимо задуматься и проверить.

• Netflix опубликовали архитектуру и философию подхода к пост обучению моделей ^[5]. Данный метод позволяет команде R&D сосоредоточиться на инновациях в моделях, а не на инфраструктурных проблемах.

• Brave запустил самый мощный API поиска для AI агентов ^[6], что позволяет получать LLM оптимизированный результат запроса. Согласно внутренним бенчмаркам, Brave Search API уступает только Grok и превосходит ChatGPT, Perplexity и Google AI Mode.

A11y

• Axe MCP Server включён в Axe DevTools и доступен бесплатно ^[7] с 11 февраля. Это один из лучших инструментов тестирования и дебага доступности.

• Shopify выложили подробный чеклист требований доступности ^[8] для соответствия стандартам ADA (закон США об американцах с ограниченными возможностями). Чеклист также полезен и для WCAG, но WCAG строже и для соответствия AAA данного чеклиста недостаточно, т.к. считается, что ADA == WCAG AA.

• Когда же использовать role="presentation" ^[9], а когда нужно использовать другие aria- атрибуты? Стив Френзел приводит несколько примеров и подробно рассказывает, как правильно описать нужные элементы.

Браузеры

• Все крупные разработчики браузеров (Chrome, Firefox, Apple и другие) опубликовали анонс Interop 2026. Ждём фактуру и результаты!)

• Зачем нужен WebMCP ^[10] и о пользе этой спецификации рассуждает Кристиан Хейльман.

• А в блоге Chrome можно зарегистрироваться в программу раннего доступа ^[11] WebMCP и попробовать подготовить свои сайты для работы с агентами.

3D и анимации

• Как создать бесконечно зацикливающуюся 3D трубу ^[12] с прокруткой на React-three-fiber рассказывает Матис Дене в блоге Codrops. Гайд требует базового понимания работы с шейдерами и three.js.

• А следом там же рассказывается о создании системы генерации кривых ^[13] с помощью кривых Безье. Статья рекламирует бесплатный курс по GSAP, но, тем не менее, интересна. Также требует небольшого опыта ^[14] работы с 3D в вебе.

СSS

• Сделать эластичный текст можно на чистом CSS ^[15], а как именно – рассказывает Темани Афиф. Можно сделать пуньк мышкой!) Но, как и в случае с любой побуквенной анимацией, требует продумывания фоллбека для скринридеров.

• Делаем круговую диаграмму на CSS ^[16]. В прошлом дайджесте был гайд по созданию гистограммы без JS, теперь можно научиться делать и pie charts, но JS всё-таки пригодится!

• Современный CSS позволяет создавать параллакс-эффект, привязанный к скроллу ^[17], причём весьма минималистично, декларативно и просто. Правда, Firefox пока не поддерживает.

• Темани Афиф рассказал о создании пирамидальных сеток на чистом CSS ^[18]. Во втором выпуске дайджеста вы уже читали статью о создании адаптивных гексагонов, теперь Темани продолжает программировать селекторами и жонглировать гексагонами, укладывая их в адаптивные пирамидки.

• Ли Мейер создает текстовый вихрь ^[19], ещё и преимущественно на CSS! Текст располагается спирально и крутится по скроллу вокруг центра.

• В NPM опубликована дизайн-система Ambient ^[20], которая рассматривает интерфейс как физический объект в комнате с освещением. С помощью этого пакета можно построить интерфейсы, учитывающие направление света. Предоставлены два пакета – примитивы освещения, классы в пакете @ambientcss/css и реакт компоненты в @ambientcss/components. Посмотреть демо можно тут ^[21].

• А как работает освещение в CSS разобрал Крис Койер ^[22], ссылаясь также на статьи коллег.

JS / TS

• sql.js v1.14.0 ^[23] – это порт SQLite на JavaScript, который работает прямо в браузере через WebAssembly, позволяя создавать, запрашивать и экспортировать in-memory реляционные базы данных без сервера

• Perspective — мощный BI-компонент ^[24] — это framework-agnostic (работает с любым фреймворком) компонент для интерактивной аналитики и визуализации больших/стримящихся данных

• Погружаемся в TS дженерики ^[25] на примере создания функции, которая принимает ключ запроса, функцию сервера (API библиотеки Tanstack Start ^[26]) и пэйлоад, а возвращает часть параметров запроса для устранения дублирования. Кейс крайне узкий, но хорошо показывает возможности дженериков.

• Развлечения с дженериками в TS ^[25] — некоторые продвинутые и нестандартные способы применения дженериков.

React

• Популярные UI библиотеки React ^[27]. shadcn/ui почти догнал MUI в рейтинге React-компонентов 2025 — смотрите свежие цифры!

• Миллиарды строк в таблице React без тормозов ^[28] – HighTable рендерит только видимые ячейки, обходит лимит высоты HTML и даёт пиксельную точность даже на триллионах строк — без canvas и фейковых скроллбаров

• Terminal User Interface на React ^[29] – с FrankenTUI можно засунуть настоящий крутой терминал (с менюшками, цветами, рамочками, как в htop или lazygit) прямо внутрь обычной веб-страницы на React.

• Пора обновляться на Ant Design 6.3.0 ^[30] – Ant Design 6.3.0: ConfigProvider теперь позволяет глобально настраивать maskClosable в Modal/Drawer, иконки в DatePicker/TimePicker/Cascader/Button, прокрутку в Table и множество других параметров, добавлен брейкпоинт xxxl (1920 px), улучшена семантика Switch, доступность (ARIA, Tree, Spin) и исправлены ошибки ^[31] в Upload, Button (тёмная тема), Select, Tooltip/Popover и других компонентах

• Полный гайд по оптимизации React приложений ^[32]. От дебага до исправления кода, хорошая работа в актуальном стеке.

• State of React 2025 ^[33] – Опубликованы результаты ежегодного опроса по React.

• Виртуальный скролл для миллиардов строк ^[28] – пять методов, связанных с вертикальной прокруткой, используемых в HighTable компоненте React, который может отображать миллиарды строк в таблице, сохраняя при этом хорошую производительность и доступность.

Angular

• Angular Signal Forms Config ^[34] – в Angular Signal Forms с помощью provideSignalFormsConfig теперь можно легко вернуть классические CSS-классы состояния (ng-valid, ng-invalid, ng-touched и др.) для обратной совместимости со старыми стилями или настроить собственные кастомные классы для продвинутой стилизации форм

UX / DX

• Как улучшить UX ожидания выполнения фоновой задачи ^[35] рассказывает Эриг Чунг. Когда у пользователя нет понимания длительности таких процессов, у него растёт раздражение. Почему и как этого избежать – читайте в статье!)

• Виктор Йокко рассказывает, как проектировать интерфейсы для агентов. ^[36] Точнее, как проектировать интерфейсы, которые агент показывает пользователю, и упор больше на UX, чем UI.

• Улучшаем дизайн-систему, делая токены семантическими ^[37]. В статье защищается семантический подход к названиям токенов и их типизации с примерами “как плохо” и “как надо”.

Тестирование

• Инженеры запрещённой в РФ организации Meta запустили JIT Тесты ^[38]. Это новый подход к тестированию, при котором тесы генерируются LLM в режиме реального времени, фокусируясь на поиске регрессий, возникающих в результате изменения кода. Это работает так: LLM анализирует цель добавленного кода и создаёт код с багами для имитации проблем, генерирует и выполняет тесты для выявления этих ошибок и эксперты исследуют полученные отчёты.

Разное

Материалы про веб-разработку, но не относящиеся напрямую к CSS или JS.

• Electrobun — кросс-платформенный рантайм для десктопных приложений на JS/TS ^[39] – В отличие от Electron (который тащит с собой Chromium + Node.js), Electrobun использует нативный вебвью системы (WebView2 на Windows, WKWebView на macOS, WebKitGTK на Linux) для рендеринга интерфейса. А вместо Node.js за backend и bundling отвечает Bun — сверхбыстрый JS/TS-рантайм.

• Опубликован учебник по информатике, математике и AI ^[40], обещающий глубокое погружение в данные темы. Автор утверждает, что на его заметках смогли подготовиться к собеседованиям сотрудники DeepMind, OpenAI и других крупных AI компаний, и теперь переводит эти заметки в учебник. Выглядит интересно, требуется английский или умение переводить страницу программно!)

• UI кит в стиле WarCraft 3 ^[41] готов к использованию в любом фреймворке! 0 зависимостей, минималистичный, лёгкий и ностальгический!

• Electrobun — кросс-платформенный рантайм для десктопных приложений на JS/TS ^[39] – В отличие от Electron (который тащит с собой Chromium + Node.js), Electrobun использует нативный вебвью системы (WebView2 на Windows, WKWebView на macOS, WebKitGTK на Linux) для рендеринга интерфейса. А вместо Node.js за backend и bundling отвечает Bun — сверхбыстрый JS/TS-рантайм.

• Stockfish 18 – новая версия самого сильного шахматного движка ^[42] – команда разработчиков представила крупный релиз одного из ведущих open-source шахматных движков, который используется для анализа партий, ботов и шахматных сервисов по всему миру. Движок можно использовать как WebAssembly-сборку и библиотеку для JS, встраивая шахматный анализ напрямую в веб-приложения и фронтенд-проекты.

Прошедшие события за эту неделю

Я 💛 Фронтенд 2026 от Яндекса

Я 💛 Фронтенд 2026 от Яндекса — ежегодная фронтенд-конференция, которая прошла 14 февраля 2026 года в гибридном формате (Москва + онлайн-трансляция). Разработчики и дизайнеры собрались, чтобы обсудить адаптивный CSS, веб-компоненты, локальные LLM в браузере через WebGPU/WebAssembly, дизайн-системы, AI и будущее фронтенда.

Питерский DUMP SPb 2026

Питерский DUMP SPb 2026 успешно прошёл 13 февраля в Airportcity Plaza : легендарная IT-конференция с 15-летней историей собрала 600 участников, предложив 5 тематических треков (Backend, Frontend, Management, Testing&QA, SA&BA), более 20 качественных докладов с живыми кейсами от топовых спикеров, безлимитный нетворкинг с экспертами и компаниями, а также мощную афтепати с наградами спикерам, тусовкой и отличной атмосферой.

Статья подготовлена при поддержке @CosyFrontend ^[43], @alexbraun ^[44] и @DreamShaded ^[45].