JavaScript *

Поиск работы в 2026 году — это инженерная задача, которую все решают вручную. hh.ru перемешивает релевантные роли с шумом: на запрос «Senior PHP» прилетают джуны, фронтендеры и «PHP со знанием 1С». Одна и та же вакансия репостится под разными URL — и отследить, что ты уже откликался на неё месяц назад, практически невозможно. Зарплатные вилки скрыты или указаны в разных форматах. Значительная часть рынка вообще живёт вне hh — в ATS западных компаний (Greenhouse, Ashby, Lever, Workday), на Habr Career, в GetMatch и GeekJob, и у каждого источника свой API и своя схема данных. А поверх всего этого — ИИ по обе стороны воронки: резюме первым читает ATS-скринер, а не человек, рынок захлёстывают массовые AI-отклики, и рекрутёры в ответ закручивают фильтры.

Если декомпозировать задачу честно, получается типовой ETL-конвейер: агрегация из неоднородных источников, нормализация и дедупликация в единую модель, скоринг против резюме, трекинг откликов во времени. Ровно то, что бэкендеры строят на работе, — только над данными о собственном трудоустройстве. Я так и поступил: написал локальный клиент, который агрегирует 41 источник, оценивает каждую вакансию под резюме, ловит репосты, ведёт воронку откликов и разворачивается одной командой. Сервер слушает только loopback — резюме и история откликов не покидают машину.

В статье — разбор архитектуры и решений: фронтенд без сборки и без virtual DOM, два реестра адаптеров с тестами на согласованность, SSRF-защита на DNS-pinning, двухфазный SSE с детерминированным завершением, 13 локалей с RTL, тестовая пирамида из 1543 кейсов и Spec-Driven Development как замена командного ревью для solo-проекта.

Начнём с предыстории. Когда я опубликовал первую статью про клон Flappy Bird, я хотел получить результат, который был бы мне приятен, но вместо этого получил всего понемногу. Можно сказать, сработал эффект Зейгарник, когда незавершённая задача создаёт когнитивное напряжение, которое буквально «заставляет» нас возвращаться к мыслям о ней. Вроде поучил физику, посмотрел, как лучше работать с рендерингом, узнал, почему птица стала такой популярной игрой, но один комментарий заставил задуматься, что на этом нельзя останавливаться и стоит сделать ещё что-то, пока эффект не пропал.

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

Делимся веб-компонентами

Приложения у нас самодостаточные, так что друг о друге они не знают. Нам необходимо каким-то образом поделиться веб-компонентами. Есть два способа.

Привет, Хабр! Меня зовут Александр, я руковожу веб-разработкой в InfoWatch. Мы занимаемся проектированием решений, которые обеспечивают информационную безопасность для разных компаний. 

В этой статье я расскажу, как мы обеспечиваем интеграцию SPA-приложений. Главная цель этого процесса — сохранить стабильность и совместимость приложений, при этом не потеряв по пути скорость поставки функционала. Под катом — о подходах и решениях, которые мы используем, а также пара примеров из практики и немного рекомендаций, если вы по работе занимаетесь подобными вещами.

npm install — такая привычная многим из читателей команда, но за последние пару месяцев она обернулась сущим кошмаром для инженеров по безопасности. И ладно бы всё сводилось к проверке 5 пакетов из package.json, но у каждой зависимости по 10 своих зависимостей, а у тех ещё по 10. В итоге мы тянем 2000, а не 5 пакетов, и тут, кажется, уже руками не проверишь. И именно на этой боли всех безопасников, поддерживающих JS-проекты, сыграла команда TeamPCP. В этой статье я хочу подробно, от А до Я, разобраться, в чём опасность, почему так произошло и как от этого защититься.

В этой статье разберу пять направлений, в которых мы получили измеримый эффект:

1. Type checking — TSCheck vs TSGO

2. Linting — ESLint vs Biome vs Oxlint

3. Bundling — Webpack → Vite → Rsbuild

4. API-контракты — Кодогенерация без AI

5. React-оптимизации — React Compiler в production

Рассмотрим возможности браузеров по синтезу звука. Разберём основы и в качестве практического применения сделаем эмулятор синтезатора Yamaha DX7.

В данной статье Вас ждет подробная история о том, как я создал игровой движок с нуля, совместимым с RenderWare (движком, на котором работает GTA San Andreas), запускающийся в браузере. Один, за три недели, с Claude Code.

Привет, Хабр! Меня зовут Антон, я фронтенд‑разработчик в Домклик. Наша команда отвечает за библиотеку «Продуктовых сниппетов» — те самые карточки недвижимости, которые вы видите в нашей поисковой выдаче.

Проблема в том, что этих карточек у нас более 40 видов (сниппеты вторичной, первичной, загородной, краткосрочной недвижимости, каждый тип имеет несколько размеров под разные разрешения), и все они живут в одной монорепозиторной библиотеке на React 19. Любая правка в общих стилях или глобальных дизайн-токенах, или элементарное обновление компонентов дизайн-системы превращалось в игру «Сапёр»: поправил отступ в одном типе сниппета — поехала вёрстка или поплыл паддинг в другом, о чём мы узнавали уже при тестировании релиза или, что хуже, от пользователей после релиза.

Я расскажу, как мы внедрили полноценное визуальное регрессионное тестирование (Visual Regression Testing) на основе Storybook, Playwright и Jest, с какими трудностями столкнулись при стабилизации скриншотов и как заставили тесты работать стабильно.

Инженеры узнают о межсайтовом скриптинге (Cross-Site Scripting, XSS) тремя способами.

Счастливчики узнают о нем благодаря полезному анализу кода или проактивному правилу проверки кода. Внимательные — во время аудита безопасности, который выявляет уязвимость до того, как она попадет в продакшн.

А есть те, кто узнает о нем через страдания, когда их сайт становится уязвимым. Когда злоумышленник внедряет скрипт, который крадет токены сессий из localStorage, перехватывает файлы cookie или перенаправляет пользователей на фишинговый сайт. Я лично присоединился к клубу «пострадавших» еще в 2005 году, когда встроенная Flash-подпись на форуме, которым я владел, превратилась в кошмар с точки зрения безопасности… но это уже другая история.

В этой статье мы рассмотрим, как браузер, наконец, снимает с нас бремя очистки данных (sanitizing) благодаря новому HTML API Sanitizer.

Astro — фреймворк для сайтов, который минимизирует поставку JavaScript на клиент, обеспечивая высокую производительность. 22 июня вышла седьмая версия, в которой разработчики серьёзно прокачали скорость. Компилятор .astro переписали на Rust, туда же перенесли обработку Markdown и MDX, а движок рендеринга заменили на систему с очередями. Вкупе с Vite 8 и новым бандлером Rolldown сборки ускорились на 15–61% по внутренним бенчмаркам. А поскольку самая быстрая сборка — та, которую не нужно запускать вовсе, в Astro 7 также стабилизировали кэширование маршрутов и добавили экспериментальных CDN-провайдеров кэша для Netlify, Vercel и Cloudflare.

В Astro 7 добавили продвинутый роутинг: появляется точка входа src/fetch.ts, дающая полный контроль над конвейером обработки запросов в Astro. Для разработки с участием ИИ Astro теперь умеет определять coding agents, запускать dev-сервер в фоне и выводить структурированные JSON-логи, когда агентам нужен машиночитаемый ответ.

Чат как интерфейс упирается в потолок. Текст хорош, когда ответ это объяснение или код. Но на запрос «покажи продажи за квартал и сравни с прошлым годом» модель отвечает стеной чисел, в которой ничего не покрутить. Хочется другого: интерактивный дашборд прямо в чате, который при следующей реплике не пересобирается с нуля, а аккуратно обновляется. Очевидное решение — попросить модель сгенерировать React-компонент — оказывается тупиком. Вывод нестабилен: один и тот же промпт сегодня даёт useState, завтра — Zustand. Сгенерированный JSX это исполняемый код, то есть открытая дверь для инъекций: в мае 2025 Invariant Labs показали на официальной GitHub MCP-интеграции, как вредоносный issue провоцирует агент на утечку данных из приватных репозиториев. И главное, что нет инкрементальности: на запрос «добавь фильтр» модель регенерирует весь компонент, состояние теряется, ввод сбрасывается.

Вывод: код это плохой интерфейс между LLM и приложением. Нужен промежуточный слой. Эта статья про два таких слоя: json-render отвечает за то, что и как рендерить из декларативной спецификации, MCP Apps — за то, где и как доставить этот интерфейс в ассистент. По официальному анонсу MCP Apps поддерживаются в Claude, Goose, VS Code Insiders и ChatGPT; json-render заявляет MCP-интеграцию для Claude, ChatGPT, Cursor и VS Code. Через всю статью я протащу один пример: дашборд продаж, который пользователь докручивает репликами «добавь разбивку по регионам», «сравни с прошлым годом», «убери блок». Сразу обозначу жанр: это мой первый пилотный заход в тему, поэтому текст ближе к обзору с пробами, чем к боевому отчёту из эксплуатации.

🕹️ Подключение бота к бирже за час, а не неделю

Подключение торгового бота к бирже обычно отлаживается так: пишешь адаптер, запускаешь live и ждёшь торгового сигнала, чтобы поймать баг — а сигнала может не быть сутками. А в алготрейдинге мы делаем именно так.

Статья содержит руководство, как оптимизировать временные затраты на отладку интеграции в биржу

Что будет, если взять один HTML-файл, браузер, localStorage и git-хостинг с CRUD API? Получится мессенджер. Без backend, базы данных, регистрации, npm и WebSocket. В статье показываю, как устроен Macaroni Messenger: хранение сообщений в .macaroni/, outbox, git-agnostic adapters, storage branch, plugin API и опциональное шифрование.

Когда я говорю, что перешёл с React на Angular, на меня смотрят примерно так же, как если бы я сказал, что добровольно переехал из Амстердама куда-нибудь в Челябинск. С непониманием и вопросом «а зачем».

Если открыть типичный канал про разработку, там будет React, Next.js, React Native, снова React. Джуны учат его как первый фреймворк, мидлы обычно выносят в резюме жирным шрифтом. Angular воспринимается как что-то невероятно сложное, для мега-приложений масштаба «строим город на Луне» и бэкендеров, которым не повезло. Я тоже так думал. У меня за плечами был React, я понимал компонентный подход, умел работать с хуками, знал экосистему. И тут Angular.

Готовых инструкций, как перейти с React на Angular, в сети практически нет. Зато есть тысячи статей про обратный путь. Пришлось разбираться самому, и вот что из этого вышло.

Агент не ломает архитектуру. Он заливается в те щели, которые ты ему оставил. Как я перестроил проект на 200К строк, чтобы границы держал линтер и CI, а не слова в CLAUDE.md. С кодом и цифрами до и после.

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

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

Я кликнул, и пошла игра. Потом прошло пять минут, десять, пятнадцать, и я не мог оторваться, так как немного азартный и, пока не выиграю, не захочу заканчивать. После многих поражений, примерно на двадцать пятой минуте игры, я поймал себя на мысли: а почему яблоко всегда жертва и почему вообще змейка — наш главный герой?

Во многих проектах взаимодействие фронта с бэком до сих пор строится по классике: ручки, fetch, headers, дублирование типов. При таком подходе внушительная часть кода уходит на обслуживание сети, а не на саму бизнес-логику. 

Мы решили эту проблему через Chord — фреймворк сетевого уровня на базе JSON-RPC. Используем его уже более 2 лет. 

Эта статья для фронтенд- и фулстек-разработчиков, работающих с TypeScript и мета-фреймворками вроде SvelteKit, Next или Nuxt. В ней покажу, как мы с помощью Chord вызываем серверные методы как обычные функции и получаем типы с бэка без дублирования. 

Привет!

Это 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 — чтобы баг не всплыл только на по-настоящему большом датасете.