TypeScript *

Привет!

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

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

📺 Vue на развилке роста: разбираем State of Vue 2026, чтобы понять, куда вложить время сегодня и не чинить стек завтра.

🤖 AI без иллюзий, но с результатом: от генеративных UI и reasoning-RAG до правил, которые уменьшают «переписывание ради переписывания» в код-ассистентах.

🛡️ Безопасность как конкурентное преимущество: сверяем npm-практики по OWASP, кейс Context.ai и экономику фейковых звезд, чтобы не привезти риск в прод.

🎨 Новый CSS вместо старых костылей: sizes="auto" и HTML в <canvas> показывают, как делать богаче интерфейсы и проще поддержку.

⚡ JS/TS и фреймворки под давлением масштаба: читаемость кода, ускорение Angular и обновления React/Vue как ориентиры для технических решений.

🧪 Инструменты, которые сокращают путь до релиза: автогенерация E2E, Excel через WebAssembly и процедурный звук для живого интерфейса.

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

🔪 Гринд ликвидности с помощью ИИ

Телеграм полон каналов, публикующих торговые рекомендации с указанием цены входа в покупку или продажу биткоина. Прежде чем следовать любому из них, имеет смысл протестировать их на исторических данных.

По другую сторону клавиатуры робот злоумышленник

Большинство UI-тестов флакают, медленно работают и в итоге отключаются в CI. Показываю альтернативу — изоляционные UI-тесты без стендов, таймингов и боли.

У меня был проект, где один Next.js сайт обслуживал несколько доменов, и возникла задача — эффективно кешировать страницы, чтобы не пересоздавать их каждый раз. Сначала я попробовал внедрить кеширование через Redis: я написал хендлер, подключил его, но вскоре обнаружил, что Redis потребляет колоссальный объём оперативной памяти — порядка 100 ГБ, и это при том, что ещё не все запросы были закешированы. Тогда я решил поискать другой подход и обратил внимание на PVC — общее хранилище, которое могли бы использовать все поды. Я начал изучать варианты работы с PVC и довольно быстро пришёл к идее общего кеш‑хранилища для всех подов. Я попробовал просто писать данные в PVC, но столкнулся с проблемой: каждый раз, когда под поднимался, он перезаписывал кеш. До тех пор, пока не подняты все поды, данные постоянно перезаписывались, а мне нужно было, чтобы первый под записал данные, а последующие только читали их. Я начал искать, как сделать кастомный кеш‑хендлер, но готовых решений не нашёл.

Напомню, что я разрабатываю приложение для работы с Pomodoro-таймерами, которые помогают фокусироваться на задачах в течение заданных промежутков времени. Сегодня я начну работу над экраном «Таймер», который пока будет воспроизводить только демонстрационные таймеры, доступные на экране «Таймеры».

В данной статье я сосредоточусь на внешнем виде экрана, а также на механизме обратного отсчёта часов, минут и секунд таймера и кнопках управления. Также мне предстоит написать код, который получает данные таймера из базы данных SQLite3 по его id и осуществляет переход на экран таймера.

Заваривайте чай, доставайте вкусняшки — пора «расширять грядку для помидоров»! 🍅

Бывает, что фича готова и её пора передавать в тестирование, но при этом не покидает ощущение, что что-то не так. Однажды внутреннее чутьё меня не обмануло и привело в исходники React.

Меня зовут Денис Кондратьев — я фронтенд-разработчик в Точка Банк. В статье поговорим, как работает приоритетный рендеринг в React, что такое проблема разрыва и разберём реальный кейс на примере корпоративного мессенджера.

С формами в Next.js проблема обычно начинается не на уровне кнопки submit. Кнопка как раз почти всегда работает. Настоящая путаница начинается позже, когда форма уже живёт в проекте какое-то время. В одном месте ошибка показывается под полем, в другом только общей строкой сверху. Где-то кнопка блокируется на pending, а где-то можно отправить запрос несколько раз подряд. Клиент считает данные валидными, а сервер отвечает, что правило нарушено. Поле уже зелёное, а сохранение всё равно не прошло. В этот момент становится видно, что форма была собрана как кусок UI, а не как контракт.

Используем как примеры паттерны из проекта Workbench. Полезно смотреть на форму не как на набор input и submit, а как на договор между UI, валидацией и местом записи данных. У такого договора есть простая форма - какие данные считаются допустимыми, где и как они проверяются, в каком виде ошибка возвращается в интерфейс, что происходит на pending, когда форма блокируется, что считается успехом, а что общей ошибкой, не привязанной к конкретному полю.

Как только форма описывается так, код перестаёт расползаться. И здесь Zod в Next.js даёт не просто удобную схему, а способ удерживать client и server в одном наборе правил.

🧠ИИ анализ новостного сентимента как источник торгового сигнала 🐻🔄🐂

Рынок меняет тренд с бычего на медвежий несколько раз в день - это обусловлено новостными настроениями, а не историей цен. Индикаторы не работают

Используем изменение настроений в соцсетях как торговый сигнал

Всем привет! Думаю, что не ошибусь если скажу, что почти каждому фронтендеру приходиться заниматься разработкой сложных форм. Те, кто уже имеют такой опыт знают, что работа с формами доставляет боль и страдания. Необходимо держать в голове все правила валидации и заполнения форм, связи между зависимыми полями, нужно как-то связывать данные формы с UI, при этом избегая лишних ререндеров.

Мотивацией для написания этого поста стали два года собеседований JS/TS-инженеров. Я интересуюсь языками и функциональным программированием, поэтому всегда «разбавлял» технические вопросы разговором о парадигмах. И заметил любопытную асимметрию.

Об ООП кандидаты рассуждали уверенно — но в основном на концептуальном уровне, не вдаваясь в то, как именно ООП реализовано в JavaScript. С FP картина была другой: уверенности меньше, зато критика — конкретная и повторяющаяся: «иммутабельность дорогая по памяти», «рекурсия небезопасна из-за стека». Что характерно — эти аргументы почти всегда были сформулированы через опыт работы с JS, а не с Haskell, Clojure или Scala.

Это важная деталь. Любая парадигма существует на двух уровнях: концептуальном (идеальная модель) и имплементационном (как конкретный язык эту модель выражает). Судить о FP по JS — примерно то же самое, что судить об ООП по bash-скриптам с глобальными переменными.

Параллельно я регулярно слышал, что JS — функциональный язык. Аргументы варьировались от «там есть .map()» до рассуждений о чистых функциях и каррировании. Именно это и стало поводом для поста: я хочу объяснить, что я считаю функциональным языком — и почему JS таковым не является. Не перечислить отсутствующие фичи, а показать, почему их нет и что это значит в реальном рантайме.

Привет!

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

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

📺 Для тех, кто хочет делать игровые интерфейсы быстрее: видео про 2D-игры с AI и Phaser, где генеративные инструменты работают как напарник, а не как «чёрный ящик».

🤖 В AI-разделе — разбор того, что уже можно брать в прод: micro-ml на Rust/WASM, кейс крупной техкомпании с роем из 50+ агентов, Flint Alpha и практическая интеграция Claude с видео.

🛡️ По безопасности фокус на снижении рисков: прикладной XSS, бесплатная оценка уязвимостей кода от GitHub и дорожная карта крупной техкомпании по постквантовой криптографии.

🎨 CSS-блок про баланс визуала и доступности: почему box-shadow не заменяет outline в forced-colors и как сохранить корректный фокус.

⚛️ React-секция для тех, у кого интерфейсный слой растёт в сложности: управление модалками без хаоса, UI без брейкпоинтов и состояние компонентов через radio state machine.

⚡ В JS/TS — практичный набор без перегруза: Pretext для текста, k-means для палитр, модульная архитектура, Intl API и Web Audio API в Node/Bun.

🅰️ Angular-раздел посвящён Signal Forms в v21 и тому, как перейти к типизированным формам без ручных подписок.

🌐 В стандартах и дизайне — что уже можно внедрять сейчас: CSS Image Animation, Baseline за март, Liquid UI и UX-подходы для legacy-систем.

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

Типовая задача на российском рынке: есть публичный сайт (лендинг, маркетплейс, каталог), на нём формы — заявка, регистрация, заявка партнёра. Эти лиды должны попадать в 1С Битрикс, где с ними работает отдел продаж.

Подход "в лоб" выглядит так: в обработчике формы сделать await fetch('https://bitrix.../crm.lead.add', ...) и вернуть пользователю ответ после того, как Битрикс подтвердил создание лида.

Это плохо работает. Битрикс REST API нестабилен по latency — 200 мс в норме, 8 секунд при нагрузке на стороне CRM. Пользователь сайта в это время смотрит на крутилку. Если Битрикс упал или таймаутит — сайт отдаёт ошибку, хотя пользователь форму заполнил корректно.

В этой статье — паттерн, который я использовал на маркетплейсе недвижимости на Next.js 16 + PostgreSQL 16 + 1С Битрикс. Без Redis, без BullMQ, без отдельного воркера. Просто Next.js API route + after() + минимальный HTTP-клиент с retry и таймаутом.

Цифры проекта для контекста: 25 объектов недвижимости в каталоге (отдельная сущность ready_homes оставлена за скобками статьи), 57 API-роутов, PostgreSQL 16.13 на VPS, деплой через systemd + nginx, интеграция с Битрикс — исключительно outbound (сайт → CRM).

Заголовок: Как я написал локальный редактор IPTV-плейлистов на FastAPI + React 19 (и почему всё состояние хранится по именам)

Хабы: React, FastAPI, TypeScript, Tailwind CSS, Open source, IPTV, Python

Теги: m3u, m3u8, iptv, fastapi, react, hls, epg, drag-and-drop, self-hosted

Я помню момент, когда это перестало быть абстракцией.

Январь 2024 года. Команда Moderna и Merck публикует обновленные данные по KEYNOTE-942: в первичном анализе персонализированная mRNA-вакцина V940 в комбинации с пембролизумабом показала снижение риска рецидива меланомы на 44% (HR 0.561; 95% CI 0.309-1.017; двустороннее p=0.053), то есть результат на границе статистической значимости. Публикация в Lancet, 157 пациентов. Это не пресс-релиз с конференции и не слайд из инвесторской презентации, а рецензируемая статья в одном из самых строгих медицинских журналов. Потом картина стала только убедительнее: в 3-летнем наблюдении (ASCO 2024, абстракт LBA9512) сообщалось о 49% снижении риска рецидива или смерти (HR 0.510; 95% CI 0.288-0.906; двустороннее номинальное описательное p=0.019). В 5-летнем обновлении, опубликованном как корпоративное сообщение Moderna, эффект тоже описывался как сохраняющийся; в сообщении приводилось одностороннее номинальное p=0.0075.

А дальше все пошло быстро. К моменту публикации статьи в Lancet Moderna уже запустила третью фазу испытаний INTerpath-001. По записи ClinicalTrials.gov у исследования NCT05933577 дата первой публикации в реестре - 6 июля 2023 года; это фиксирует запуск уже в июле 2023-го. В протоколе - 1089 пациентов и, по данным запуска программы, 38 центров в 14 странах. Исследование по коду NCT05933577 находится сразу; статус - “active, not recruiting”. Параллельно Genentech вместе с BioNTech двигают вторую фазу autogene cevumeran по раку поджелудочной, NCT05968326, в комбинации с атезолизумабом и mFOLFIRINOX. Это заболевание, где пятилетняя выживаемость по срезу SEER для всей категории рака поджелудочной составляет 13.3% (интервал 2015-2021), а для PDAC профиль риска обычно еще хуже. В расширенном наблюдении первой фазы по раку поджелудочной (Sethna, Guasp et al., Nature, 2025; полный текст по платной подписке) у пациентов-респондеров на вакцину медиана выживаемости без рецидива не была достигнута при медиане наблюдения 3.2 года - против 13.4 месяца у нереспондеров (p = 0.007).

Вот уже 18 лет статический анализатор кода PVS-Studio находится на рынке. За это время он обзавёлся поддержкой языков C, C++, C# и Java. Разумеется, останавливаться на этих языках мы не планируем, и в этой статье расскажем про разработку нового JavaScript/TypeScript анализатора, который выйдет уже совсем скоро.

На QA-митапе инженер из крупной продуктовой компании показал: AI-агент пишет тесты — все зелёные, но баги не находят. Моки подогнаны, ассерты подменены, архитектура деградирует. Стек при этом — near-SOTA: свежая модель, топовый open-source агент. Я был комментатором на том митапе и сначала списал проблемы на слабые инструменты. Но при подготовке статьи перепроверил — и вынужден поправиться. Инструменты в порядке. Проблема — в коде и процессе. В статье разбираю формулу из четырёх множителей (модель × агент × процесс × качество кодовой базы), показываю, как any-типы из соседней команды обнуляют LSP-интеграцию, которую OpenCode даёт бесплатно из коробки, и даю пошаговый Spec-Driven Development — процесс, который ломает reward hacking и работает даже на слабых моделях. Плюс чеклист, что внедрить завтра.

Orillusion + кастомные шейдеры: полный разбор процесса

Как зарегистрировать WGSL-шейдер, связать его с геометрией, настроить атрибуты и добиться анимации. Разбираем compute-шейдеры для GPU-вычислений и инстансинг на примере пяти вращающихся 4D-тессерактов. Если вам интересно то код и небольшие пояснения ниже.

Несколько лет назад в одном из моих проектов на чистом JavaScript возникла задача: валидировать большие вложенные объекты со сложной структурой. Объекты содержали различные подобъекты, к каждому из которых применялись свои правила валидации в зависимости от типа.

Задача усложнялась двумя дополнительными требованиями:

🤡 Как контрить шитпостинг Президента США

Существующие решения на GitHub имеют фатальные изъяны. Разберём несколько примеров - плюсы и минусы.

Год назад я опубликовал первую статью про разработку приложения календаря тренировок. Спустя 5 месяцев опубликовал рассказ о 10 обновлениях. Сейчас время финала истории - ещё 7 обновлений за 7 месяцев.

Сам регулярно пользуюсь приложением - оно добавляет мотивации заниматься спортом дальше, сохраняет график тренировок, следит за объемом выполненных упражнений. На текущий момент в приложении больше 150 зарегистрированных пользователей.

Времени на пет-проект уделял крайне мало, но основная функциональность была уже готова ранее. Сейчас на нём можно пробовать что-то новое - получается хороший полигон для испытаний.

Исходный код

Приложение в RuStore

Веб-версия

Frontend: Typescript, Vitest, Vite, Vue, Tanstack Query, Vue I18n, Tauri

Backend: Typescript, Vitest, Esbuild, Fastify, Mongoose, MongoDB, Swagger