Веб-разработка *

Привет!

Это 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-систем.

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

После трех лет в IT меня меньше всего бесит код. Код хотя бы честная сущность. Если он сломан, он обычно не делает вид, что это часть командной культуры.

Гораздо сильнее меня начали бесить вещи вокруг разработки.

Бизнес-чаты в Telegram — это не только флуд, но и доска объявлений с услугами и вакансиями. В нем нет структуры, но есть запросы на поиск подрядчиков, советы или просьбы о помощи. Мы поняли, что если системно отслеживать чаты, то можно найти клиентов для услуг нашего агентства, то есть организовать канал для лидогенерации. Искать эти лиды вручную довольно сложно, и потому с помощью вайбкодинга сделали бота, который автоматически находит потенциальных клиентов в чатах. Рассказываем, как с помощью ИИ и всего за 5000 рублей в месяц мы получили стабильный поток заявок.

Вы уверены, что ваш бандлер вырезает неиспользуемый код? Я тоже был уверен — пока бандл Next.js проекта не оказался в два раза тяжелее, чем нужно. Прогнал одинаковый тест на webpack, rollup, vite, esbuild и Next.js — 5 из 7 ломаются на банальном barrel файле. Полез в исходники, нашёл основную причину — и она оказалась не там, где ожидал.

Привет, Хабр! Вот два факта:

R&D - это единственный путь к реальным инновациям, которые дают конкурентные преимущества и, потенциально, меняют или даже создают новые рынки

Большинство менеджеров и представителей бизнеса боятся столкновения с R&D-задачами как огня, и решаются эти задачи, часто, “вопреки”, а не “благодаря”

Давайте разберемся, почему так происходит и что с этим делать.

Каждый день регистрируются сотни тысяч новых доменов, поэтому найти среди оставшихся что-то короткое, понятное и незанятое становится сложнее. Хороший домен — это узнаваемость и доверие пользователя. 

Привет, Хабр! Меня зовут Сергей. Я работаю инженером в Selectel, а в свободное время пишу пет-проекты для души. Недавно я прикинул: а что, если прямо сейчас мне понадобится запустить свой бренд или продукт? Первое, во что упираешься в таких раздумьях — это выбор домена. В этой статье я покажу небольшой проект, благодаря которому можно подбирать доменные имена не вручную, а автоматически с применением ИИ-агентов. Удобно или нет, решайте сами, подробности под катом.

Авторская колонка CMO Veai

В 2026 году нам больше не нужно специально искать время на паузу. AI-агенты взяли на себя рутину - и в разработке, и в маркетинге. Код-ревью, генерация тестов, написание текстов, мониторинг тональности в больших пабликах, сбор трендов, аналитика того, что реально заходит на рынке прямо сейчас - все это агенты делают быстро и качественно.

Это уже не будущее. Это ежедневная реальность - для команд разработки и для команд маркетинга одновременно.

Но именно сейчас, когда это время наконец появилось, возникает по-настоящему важный вопрос: а куда мы, собственно, идем?

Агент выполнит любую задачу, которую мы ему дадим, - быстро и точно. Но если задача неверно сформулирована, он с той же скоростью и точностью приведет нас к неудаче.

Поэтому самый важный навык нашего времени - не освоить очередной инструмент. А научиться правильно ставить цель и видеть, что стоит за ней: какую ценность она защищает, какой результат на самом деле нужен. Именно это определяет, куда в итоге придет агент - и вся команда вместе с ним.

Бесконечный backlog с P0 у каждого тикета

Есть популярная управленческая метафора: цели - как камни в банке. Сначала клади крупные, иначе мелкие займут все место. Для разработчиков и аналитиков это описание не работает, потому что жизнь - не банка. Это бесконечный backlog, где у каждого тикета стоит приоритет P0.

Доставлять фичи быстрее - P0. Качество кода - P0. Безопасность - P0. Семья - P0. Здоровье - P0. Рост команды - P0.

Классический тайм-менеджмент здесь ломается: нельзя «просто расставить приоритеты», когда все одинаково важно. Работает только одно: понять, какую ценность защищает каждый тикет. Тогда конфликт между целями становится управляемым.

Пока все в погоне за всё более универсальными ИИ-агентами пытаясь создать тот самый AGI по нашему подобию, мне кажется полезным спуститься на уровень ниже и посмотреть на более приземлённую инженерную проблему.

Мы неплохо научили модели работать с текстом, кодом, изображениями и инструментами. Мы научили их вызывать функции, научили эти ИИ писать собственные инструменты каждый раз для задач которые повторяются миллионы раз, видеть как мы(фото), думать как мы(рассуждения). Мы научились – дообучать их под новые сценарии через fine-tuning.

Но если убрать хайп, остаётся неприятный факт: во многих практических задачах модели по-прежнему работают грубо и дорого. Особенно хорошо это видно на фронтенде.

Сегодня у модели есть два типовых способа "увидеть" сайт. Первый – читать код: HTML, CSS, JS, и серверную логику (если вы предоставили модели доступ). Второй – смотреть на скриншоты, а в более дорогом варианте – на видео (хоть и таких решений я не видел, и скорее не видео, а слайд-шоу, но считаю логичным внедрением для некоторых сценариев).

И эти оба подхода неудобны. А обучать модель внутреннему представлению через имеющиеся виды зрения – как правильно, – как распознать кнопку итд – дорого, требует ещё больших данных, больше вычислений. А банально небольшое отклонение стиля уже ломает верстку. Да с бэкендом мы можем строить среду в которой благодаря RL обучению модель научится решать задачу.

Но как быть с интерфейсом? Фото дает слишком много шума в виде пикселей, а код дает много лишнего шума в виде разметки, скриптов. Когда обычному пользователю: не нужно смотреть на каждый серый пиксель фона кнопки, или изучать все стили, js и html разметку сайта, он видит овал на котором написано "войти" – и понимает что это – кнопка, особенно, если при наведении или нажатии цвет фона кнопки меняется.

Заходят как-то в бар Битрикс24 и Диадок — и быстро выясняется, что работать вместе им пока сложно. Битрикс24 отвечает за сделки и коммуникации, Диадок — за документы и статусы. А бизнесу нужна единая цепочка: документ появился в Диадоке — менеджер сразу видит его в CRM без переключений и ручных сверок.

Мы реализовали такую интеграцию с нуля. Настроили автоматическую передачу документов из Диадока в Битрикс24. Документы создают лиды, а статусы, файлы и история изменений отображаются в CRM.

Привет, Хабр! Меня зовут Алексей, я разработчик в строительной компании ВитионГруп. Мы занимаемся ремонтом квартир в Москве, одновременно ведём 30–75 объектов, за 18 лет завершили более 1000 проектов.

В 2022 году я начал разрабатывать внутренний инструмент для управления ремонтными проектами. За три года из «чата с заказчиком» вырос полноценный продукт: PWA с чек-листами и таск-трекером, видеонаблюдением, конструктором смет, финансовым модулем и интеграцией с ИИ. Сейчас на базе этой системы работают два продукта по подписке, которыми пользуются строительные компании, а также частные мастера и их заказчики из разных регионов России и Казахстана.

Привет, Хабр.

Я часто рассказываю про CSS, потому что очень сильно люблю этот язык. И хочу, чтобы у вас с ним не было проблем. Но я совсем мало внимания уделяю HTML. А он тоже прекрасен и полезен!

Сегодня буду исправляться. Я собрал список полезных фич HTML. Большинство из них почему-то используются очень ограниченно. Хотя они могут помочь вам сделать интерфейсы проектов более дружелюбными к пользователям.

Особое внимание я уделил тому, как просто будет их внедрить в существующие проекты. Мне кажется, что они легко сочетаются с любым современным фреймворком.

Давайте посмотрим, что я вам подготовил.

Я узнал, что задача предварительной загрузки изображений с помощью JavaScript удивительно сложна. Существует несколько способов это сделать, и лучший из них зависит от требований конкретного приложения.

Привет! Меня зовут Егор Молчанов, я разработчик в компании Домклик.

В прошлой статье мы познакомились с новыми функциями input(), output() и model(), которые закладывают фундамент для будущего Angular без Zone.js. Сегодня мы поговорим о том, как эти изменения дошли до самой, пожалуй, наболевшей темы в любом приложении — работы с формами.

В Angular v21 появился новый, экспериментальный способ управления формами — Signal Forms. Он не отменяет старые добрые Reactive Forms, но предлагает совершенно иной подход, основанный на сигналах. Давайте разберёмся, как работали формы раньше, как они будут работать с Signal Forms, и что это нам даёт.

…В какой-то момент, ковыряясь в своём геоорганайзере «Места» (я писал о нём на Хабре), я поймал себя на простой мысли:

Всё работает — но не живёт

Нет, я не адепт восстания машин. Я о другом…

У каждого из нас есть «чёрная дыра», куда уходят полезные ссылки. Кто-то сохраняет их в «Избранном» браузера, кто-то пишет сам себе в Telegram, кто-то держит десяток вкладок открытыми «на потом». У меня была та же проблема. Я пробовал Notion, Evernote, Google Keep, Obsidian - всё это мощные инструменты, но для простого «сохранить ссылку и не забыть» они часто избыточны.

Так родилась идея KylikLink - минималистичного PWA-приложения для заметок и ссылок, которое работает без интернета и не требует регистрации.

Привет, это Андрей Мелихов, ведущий разработчик интерфейсов в Yandex Cloud. Я работаю в команде DataLens — BI‑системы для визуализации больших наборов данных на дашбордах и графиках. 

В прошлом году в DataLens появился чат‑интерфейс: пользователь общается с ИИ‑ассистентом, который строит графики, пишет формулы и решает аналитические задачи. В рамках работы над этим продуктом, который получил имя Нейроаналитик, мы пошли не совсем очевидным для многих путём и перераспределили ответственность между командами фронтенда и бэкенда. В статье хочется поделиться этим опытом: внутри вы найдёте демо‑проект в репозитории, чтобы самим увидеть нашу идею изнутри.

Как лучше запускать MVP — сразу с платной функциональностью или сначала сделать все бесплатным и собрать фидбек? Рассказываю, как это было у меня.

Несколько недель назад я описал на Хабре идею «честного российского мессенджера» с открытым кодом и прозрачным compliance. Та статья была про «зачем». Эта — про «как получилось». Web-клиент и Android-приложение полностью переписаны и работают в production, серверная часть развёрнута и обслуживает реальные подключения. iOS пока не трогали. Ниже — разбор архитектуры, решения, которые мы приняли, грабли, на которые наступили, и открытый набор людей в проект.

200 коммитов, векторная база FAISS и поиск по смыслу: разбор телеграм-приложения для бизнес-сообщества.

dc.send(file) не означает, что файл уже доставлен. Между отправкой и реальной доставкой – буфер, relay, запись на диск, ACK, reconnect и потерянный после refresh File. Разбираю шесть production-проблем WebRTC-файлообмена, которые обычно остаются за пределами туториалов.