JavaScript *

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

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

DatePicker казался нам небольшой задачей в разработке UI, пока мы не попробовали создать компонент, который будет корректно работать с keyboard navigation, screen reader’ом, управляемым состоянием и реальными проверками доступности.

Нам потребовался DatePicker производственного уровня на React и TypeScript, и сначала очевидный путь казался очень заманчивым: дать AI четкий запрос, получить 80% готового кода, а остальное доработать руками. Подробный разбор этого кейса есть в моей предыдущей статье «Попросили Claude создать WCAG-доступный DatePicker на React и потратили 3 дня на доработки».

Так вот.

Модель может сгенерировать структуру календаря, атрибуты ARIA, базовую keyboard navigation и логику работы с датами.

Затем начинается интеграция: поведение фокуса становится нестабильным; возникают конфликты между обработчиками событий; озвучивание screen reader’ами требует тщательного тестирования; небольшое изменение в логике работы с датами может неожиданно нарушить работу календаря; код выглядит нормально, но компонент пока не является надежным.

В этой статье я сравниваю два способа создания доступного DatePicker'а с помощью AI:

Первый — 80% кода с помощью AI, остальные 20% руками. Второй — системное проектирование с AI-агентом: PRD, декомпозиция задач, правила агента, внешняя верификация, Vitest, Playwright, сборка Vite, проверки типов и строгий цикл, в котором агент не может двигаться дальше, пока не будет пройден текущий шаг.

Дальше все по делу: в чем AI действительно нам помог; где он начал сбиваться с курса; почему одного большого promt'а оказалось недостаточно; как The Verifier изменил процесс и почему основная задача инженера в разработке с использованием AI больше не сводится только к написанию кода, а заключается в контроле над замыслом, архитектурой, контрактами и стоимостью изменений.

У меня есть сайт на Next.js. Часть страниц индексируется почти сразу. Часть застряла в статусе «Обнаружено, не проиндексировано» уже две недели. Самое неприятное в том что все страницы технически одинаковые. Тот же фреймворк, тот же сервер, тот же sitemap.

Расскажу, как я перебирал гипотезы одну за другой, и что в итоге осталось.

Выбор даты кажется небольшой задачей в UI, пока не попробуешь сделать его по-настоящему WCAG-доступным.

Нам понадобился настраиваемый DatePicker на React для процесса записи на прием к врачу, где пользователи, работающие с keyboard navigation, и люди, использующие screen reader’ы, должны были выбрать дату без лишних затруднений.

Claude сделал нам хорошую первую версию: структуру компонента, ARIA-атрибуты, базовую keyboard navigation и логику календаря. На первый взгляд результат выглядел почти готовым.

Затем мы запустили NVDA, VoiceOver и протестировали сценарий keyboard navigation.

Фокус выходил за пределы диалогового окна; некоторые даты озвучивались неверно; переключение между месяцами сопровождалось слишком тихим звуком; нажатие клавиши «Esc» закрывало календарь, но оставляло пользователя без контекста; режим высокой контрастности Windows нарушал отображение выбранного состояния.

Код выглядел нормально, но UX оставлял желать лучшего.

В этой статье мы рассмотрим реальную работу, стоящую за WCAG-доступным DatePicker'ом: где AI сэкономил нам время; где он не справился; как нам помог WAI-ARIA APG; какие детали нам пришлось исправлять вручную и почему доступность нельзя проверить, просто прочитав сгенерированный код.

Приготовьтесь к инсайтам, багам и победам!

Codex это прекрасно, но лимиты все меньше, а цена все выше. Но ведь под капотом просто gpt-5.5(вот промпт)?

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

Так появился экспериментальный Chrome-плагин ChatGPT Multi Pane: GitHub

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

Когда речь заходит о Flipper Zero, большинство вспоминает RFID, NFC, Sub-GHz и бесконечные ролики про открытие шлагбаумов. Но одна из самых интересных возможностей устройства — встроенный JavaScript-движок и модуль BadUSB, который позволяет превратить Flipper в программируемую USB-клавиатуру.

В этой статье разберём небольшой, но показательный скрипт, который автоматически устанавливает набор инструментов для пентеста на macOS через Homebrew. Заодно посмотрим, почему JavaScript на Flipper оказывается значительно интереснее классического DuckyScript.

Cruzo — минималистичный UI-фреймворк без лишней сложности 

Знакомимся с Cruzo. Часть 1. RxBucket – контейнер состояний и конфигураций компонентов на фронте

Я продолжаю серию обзорных статей о js-фреймворке Cruzo. Я работаю над этим фреймворком последние 6 лет, много идей отпало, осталось только что реально нужно в работе.
Здесь я расскажу вам о сердце фреймворка – шаблонизаторе. Для его реализации была написана стековая виртуальная машина.
Какая еще виртуальная машина внутри js спросите вы? Это VM — но не «виртуальный процессор» вроде JVM или WebAssembly, а интерпретатор байткода, написанный на JavaScript.

Когда у вас один AI-агент в браузере, всё просто. Когда их пять и они параллельно ходят по разным сайтам через Playwright MCP, начинается война за вкладку. Штатный @playwright/mcp работает в общем BrowserContext, и агенты перехватывают страницы друг у друга. Отдельный контекст через newContext() решает изоляцию, но убивает логины.

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

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

За последние пару лет доступность внешних реестров и CDN для российских команд стала менее предсказуемой. Для пользователя это обычно выглядит как «сайт не открывается», а для разработчиков — как внезапно упавший CI, зависшая сборка или сорванный деплой.

Привет, Хабр! Меня зовут Рахимов Искандер, я фронтенд-разработчик в компании Sofoil.

Для понимания контекста: речь идёт о подразделении Sofoil, которое занимается разработкой интерактивных обучающих систем. В команде работает 16 разработчиков, а основной стек — Angular на фронтенде и Python на бэкенде.

Со временем проблемы с внешними реестрами начали накапливаться: сборки замедлялись, периодически возникали таймауты, а стабильность релизов всё чаще зависела не от нашего кода, а от доступности сторонних сервисов.

В какой-то момент стало понятно, что проблему нужно решать системно. В качестве решения мы выбрали Sonatype Nexus 3. Расскажу, как внедряли его в инфраструктуру, какие задачи он закрыл и с какими нюансами пришлось столкнуться.

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

Проблема в том, что этих карточек у нас более 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-логи, когда агентам нужен машиночитаемый ответ.

Что, если мы создадим такой интерфейс в 1С, чтобы он был удобнее, чем в Excel? Да не просто удобнее — а чтобы сотрудники сказали: «Ого, это же как игра!» С вами снова Ведущий специалист модуля разработки 1С Михеев Антон. Давайте вместе сделаем эту игру идею реальностью

Представьте, что Excel — это склад, вид сверху. Синие ячейки — стеллажи, в них лежат товары. Да, на множестве складов топология нарисована именно в Excel. Сотрудникам так понятнее и удобнее: закрашивать ячейки в таблице куда проще, чем разбираться, как заполнять справочники с кучей непонятных цифр в 1С.

Как перестать искать подходящее расширение и написать его самому. Отличия API Firefox и Chrome Extensions.

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

Хочу поделиться опытом разработки новостного агрегатора HypeNet. Проект работает на связке Cloudflare Workers + Supabase, фронтенд - чистый HTML + Vanilla JS без фреймворков. Сайт хостится на VPS.

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

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

Так появилась идея PrivacyKit.

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

Поэтому все инструменты работают локально. Никаких API, регистрации и загрузки данных на бэкенд.

Например, сжатие изображений происходит прямо в браузере:

Коротко. Сервис открывает чужой сайт и считает штраф по КоАП. Внутри двухуровневая проверка по 22 правилам: дешёвые эвристики на cheerio там, где хватает регулярок, и Claude через российский прокси там, где нужно понять смысл текста. На выходе балл от 0 до 100, список нарушений со статьями КоАП и вилкой штрафа. Законы в основе: 152-ФЗ о персональных данных, 242-ФЗ о локализации, закон о рекламе, закон о защите прав потребителей. Ниже стек, архитектура и грабли. Самая обидная грабля в том, что \b в JavaScript не образует границу слова перед кириллицей, и детектор молча слепнет на русском тексте.

Зачем я вообще это делал

У меня небольшой сервисный центр по ремонту техники. В какой‑то момент дошли руки до юридической части собственного сайта, я полез читать 152-ФЗ, и довольно быстро стало ясно: требований к обычному сайту с формой заявки куда больше, чем кажется, и разбросаны они по нескольким законам.

В мае 2025 КоАП по части персональных данных переписали: штрафы выросли в разы, появились оборотные за повторные нарушения, отдельная крупная санкция за утечки. При этом требований к сайту наберётся больше двадцати, и они размазаны по нескольким законам и подзаконным актам. Юрист за разовый аудит просит десятки тысяч. Малый бизнес такое не заказывает, пока не прилетит проверка.

Захотелось собрать что‑то на стыке юриста и линтера: автоматический сканер, который читает сайт и говорит «вот тут нарушение, вот статья, вот порядок суммы». Сначала для себя и своего центра, потом понял, что это нужно не только мне.

Чат как интерфейс упирается в потолок. Текст хорош, когда ответ это объяснение или код. Но на запрос «покажи продажи за квартал и сравни с прошлым годом» модель отвечает стеной чисел, в которой ничего не покрутить. Хочется другого: интерактивный дашборд прямо в чате, который при следующей реплике не пересобирается с нуля, а аккуратно обновляется. Очевидное решение — попросить модель сгенерировать 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. Через всю статью я протащу один пример: дашборд продаж, который пользователь докручивает репликами «добавь разбивку по регионам», «сравни с прошлым годом», «убери блок». Сразу обозначу жанр: это мой первый пилотный заход в тему, поэтому текст ближе к обзору с пробами, чем к боевому отчёту из эксплуатации.