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

Это разбор реального опыта внедрения доступности в крупном веб-продукте с десятками микросервисов и сложным фронтендом. Без лозунгов, зато с кодом, ошибками, переработками дизайн-системы и неожиданными проблемами в CI. Поговорим про ARIA, серверный рендеринг, мобильные скринридеры, автоматическое тестирование и про то, почему доступность — это не про alt у картинок, а про архитектуру.

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

Мы работали над крупной B2B-платформой. Много форм, таблиц, кастомных контролов, графиков, drag-and-drop, модалки внутри модалок. И в какой-то момент заказчик сказал: продукт должен соответствовать WCAG 2.1 AA. Причём не формально, а чтобы им реально могли пользоваться люди с ограничениями по зрению и моторике.

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

Давайте по порядку.

Доступность часто воспринимают как техническую тему. ARIA, WCAG, скринридеры — будто это зона разработчиков. Но правда в том, что большая часть проблем появляется ещё в макетах. И если дизайнер не заложил структуру, смысл и сценарий — разработчик это уже не исправит без редизайна.

В части 1 мы выяснили, что объекты в Heap не освобождаются сами по себе этим занимается Garbage Collector. Но как именно GC решает, что можно удалить? Если подумать, задача не такая очевидная: объект не нужен - понятие логическое, а GC работает с физическим графом ссылок.

Ответ в том, что GC не пытается угадать намерения программы. Он задаёт более простой вопрос: можно ли добраться до этого объекта из работающего кода? Если нельзя объект недостижим, и никакой код уже не сможет его использовать. Значит, память можно вернуть.

Алгоритм, реализующий эту логику, называется Mark and Sweep.

В последние несколько дней я начал замечать странную вещь: находясь под средствами обхода блокировок, у меня перестают работать отечественные ресурсы — вроде Яндекс Маркета, Яндекс Телемоста и других сервисов.
Но стоит отключить обход — всё снова функционирует нормально.

Получается парадоксальная ситуация: людям, которые просто хотят посмотреть котиков на YouTube или спросить ChatGPT о какой-нибудь ерунде, снова начинают вставлять палки в колёса.

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

Не знаю, как вам, но мне кажется, что в долгосрочной перспективе это ударит прежде всего по владельцам самих этих ресурсов.

Всем привет! Меня зовут Саша, и последние 12 лет моя жизнь — это дизайн. Сегодня я руковожу дизайн-командой в KISLOROD, а в прошлом — помогал крупным брендам и миллионным сервисам обрести их уникальный голос и форму.

Сегодня расскажу о реализации удобного функционала фильтрации и сортировки товаров.

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

Веб-сокеты (WebSocket) — набор правил для двусторонней связи между браузером и сервером в реальном времени. Если HTTP работает по принципу "спросил - ответил", то протокол веб-сокетов предусматривает постоянный канал: сервер может сам отправлять данные браузеру, не дожидаясь запроса. Именно по этому протоколу работают чаты, онлайн-редакторы, многопользовательские игры.

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

Привет, друзья!

В этой небольшой статье я расскажу вам о новом свойстве события toggle - source, а также о новом атрибуте HTML-элемента dialog - closedby.

Свойство source позволяет определять источник переключения видимости поповера (popover), а атрибут closedby позволяет декларативно управлять логикой закрытия dialog, но обо всем по порядку.

Привет! Я — Аля, старший продакт-менеджер выделенных серверов в Selectel. Представьте, вашей команде нужно разработать новый интерфейс для продукта. Вы ставите задачу на дизайнера, а он приносит статичные картинки экранов в Figma. На встрече команда смотрит на них и понимает, что половина сценариев не продумана. Возникают вопросы: «Что будет, если пользователь нажмет на кнопку или данные не загрузятся?» И вместо того, чтобы передать задачу в разработку, вам приходится выяснять детали в комментариях и чатах.

Нам это хорошо знакомо. Долгие циклы согласований, переделки после релиза, сложности с тестированием — все это было частью нашего процесса. Чтобы решить эти проблемы, мы решили попробовать AI-инструменты для прототипирования. В статье расскажу, как Figma Make и другие сервисы помогли нашей команде ускорить создание прототипов и сократить количество правок. Будет полезно тем, кто устал от цикла «получить макет → найти проблему → подождать правки → повторить».

Долгое время я использовал пакет request (теперь устаревший) для выполнения HTTP-запросов в Node.js. Затем в моду вошли промисы (promises), и я переключился на request-promise (также ныне устаревший). Затем я начал использовать axios и думал, что на этом все... но ошибался. История HTTP в Node.js продолжает эволюционировать, и это прекрасно.

Выполнение запросов HTTP - одна из самых распространенных задач в Node.js. Будь то обращение к API, получение данных из внешнего сервиса или разработка веб-скрейпера (scraper), важно знать, как делать это эффективно. Хорошая новость состоит в том, что начиная с Node.js 18 в качестве глобальной переменной доступен стандартный fetch(). Если вы использовали fetch() в браузере, то уже знаете, как использовать его на сервере. Никаких дополнительных зависимостей, никаких оберток, только тот же знакомый API, предоставляющий все необходимое для выполнения запросов HTTP современным способом в Node.js.

Последние пару лет изменили то, как пишется код. Copilot, Cursor, ChatGPT, Claude - все это генерирует вполне работающий JavaScript быстрее, чем успеваешь сформулировать задачу. Это удобно. Но у этого удобства есть обратная сторона, сгенерированный код работает правильно в смысле делает что просили, но не всегда правильно в смысле не течет по памяти и не роняет прод под нагрузкой.

Модели хорошо знают синтаксис и паттерны. Они значительно хуже разбираются в том, что происходит под капотом конкретного движка. Closure, захватывающий лишние данные. Event listener, который никогда не снимается. Объект, который непреднамеренно продлевает жизнь половине DOM дерева. Все это - настоящие ошибки, которые реально встречаются в проде и ни один линтер их не поймает.

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

Эта серия состоит из трех частей. Первая - про то, как V8 вообще организует память, что такое Stack и Heap, чем они отличаются и что такое pointer. Вторая - про сборщик мусора, как он определяет, что живо, а что нет и как делает это, не останавливая программу надолго. Третья - практическое применение, откуда берутся утечки памяти, как их искать и как писать код, который не создает лишней работы для GC.

Помните сказку про мальчика, который кричал «волки»? Примерно так же в 2025 году случилось с «программированием на CSS». Вышла функция if(). Блогеры преждевременно хайпанули: всё, теперь у нас условия в CSS. Разработчики пошли читать спецификации, попробовали — и довольно быстро выяснилось, что внутри условного выражения style() возможностей почти нет. Многие разочаровались и похоронили идею.

В конце 2025 года Chrome выкатил революционный Range Syntax For Style Container Queries. Обновлённый style() научился сравнивать переменные между собой и поддерживать диапазонные выражения. Мы наконец‑то получили мощную условную логику в CSS, но мало кто это заметил.

В этой статье мы попытаемся реанимировать идею программирования на CSS. На примере интерфейсного паттерна — «выделение диапазона дат в календаре» — разберём, как обычная JS‑логика превращается в CSS‑логику (спойлер: очень просто).

Отвечая на этот вопрос, я разобрал следующие темы?

Где и почему агенты работают хорошо?
Где агенты делают только хуже?
Что значит "подготовить проект" к эпохе агентов
Пара тупых, но работающих советов как работать с Claude Code
Советы, что делать если ты разработчик, тимлид, владелец продукта
Как я думаю, куда всё это приведет

Вспомните нулевые — браузерные страницы мигали баннерами и интерактивными элементами, игры запускались прямо во вкладке, а Flash Player был знаком почти всем. Но в 2020 году Adobe завершила его поддержку и начала блокировать Flash-контент. Так и закончилась эта история, а что было бы, если всё пошло иначе? Историю Flash и альтернативный сценарий разбираю в статье. 

Привет!

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

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

Медиа · TanStack Router и маршрутизация в React · Pinia и будущее Vue (Эдуардо Сан Мартин)

AI · Агентное будущее Next.js · AGENTS.md по-новому (Эдди Османи) · Вайб-кодинг и ценность кода (Маттео Коллина) · Таймлайн LLM за 10 лет

Безопасность и браузеры · OWASP для агентных приложений (Auth0) · Firefox 148 setHTML() вместо innerHTML · CSS corner-shape в Blink (Chrome)

CSS · Псевдокласс :near() · Смерть скролл-фейду (Крис Койер) · x86 на чистом CSS/HTML

JS/TS · Зелёный дизайн интерфейсов (Смэшинг) · Полифил switch · TypeScript v6 beta · TSSLint v3 · Асинхронные паттерны

A11y · .visually-hidden в 2026 (Дэвид Бушелл)

Фреймворки · React: React Doctor, SVAR Gantt, когда RSC тормозит · Angular: PrimeNG 19→21, Taiga UI CDK v4.72 · Vue: Nuxt на русском, VueUse

Разное и 3D · Ностальгия по вебу 90-х · Штраф Amazon 2,5 млрд за тёмные паттерны · WebGL composite (Three.js) · voxCSS и Mahjong

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

Ситуация образная, но позволяет быстро обрисовать одну из болей во время разработки. В этой статье я бы хотел рассказать об одном из вариантов её решения в коде с помощью подхода Единого источника истины(Single source of truth).

Привет, Хабр! Меня зовут Василий Беляев. Я руководитель группы разработки по направлению фронтенда в ИТ-компании «Криптонит». В этой статье хочу поделиться опытом и рассказать об оптимизации библиотек: о том, с какими проблемами мы столкнулись, и как их пошагово решили.

Для начала кратко опишу фронтовый стек у нас в «Криптоните»: мы те ребята, которые не пишут на React. У нас все проекты и библиотеки написаны на Vue + Composition API. Из дополнительных инструментов мы используем следующие:

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

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

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

Обычно мы разрабатываем продукт, проверяем соответствие рынку (Product-Market Fit) и только спустя месяцы или годы решаем: «Пора выходить на глобальный уровень».

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

Как же с этим справиться? Заморозить разработку на неделю и рефакторить каждый компонент?

В последнее время я вижу много решений, основанных на compiler-driven подходе. Обещание заманчивое: добавьте пару строк кода, и приложение «само» станет мультиязычным.

Однако есть существенные недостатки.

Ты понимаешь, что баг хорош, если первым делом думаешь: «Как это вообще может происходить?»

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

Разумеется, сначала я обвинил в этом React.

Да, конечно, в современном веб-приложении может быть множество потенциальных причин проблем с производительностью: сторонний JavaScript, перегруженные серверы, раздутые ресурсы, отсутствующие индексы базы данных; список можно продолжать очень долго. Но опыт десятков лет разработки для веба подсказывал мне, что это была проблема фронтенда. Я просто чувствовал это. При загрузке страница дёргалась. И несмотря на то, что экосистема React сегодня — наименее плохой выбор для веб-фронтенда, она по разным причинам может оказаться хаотичной и тормозной.

Чтобы подтвердить свою теорию, я рассказал Claude¹, что загрузка дэшборда тормозит и что проблемы наверняка в React, попросив проанализировать их и ранжировать по степени серьёзности. Конечно же, Claude обнаружил в React кучу подозрительных аспектов — ненужный повторный рендеринг, отсутствующие мемоизации и так далее. К тому же он подсказал, что мы всё ещё не используем React Compiler. Я попросил Claude выполнить первый проход решения самых простых и самых серьёзных проблем React, но…

Практически ничего не поменялось. Возможно, дело всё-таки не в React.

Итак, я закатал рукава и начал тщательное расследование.

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

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

В общем расскажу про импортозамещение Dassault Systèmes 3DExperience, далее Enovia, а точнее - той её части, которая на протяжении многих лет востребована многими крупными предприятиями: гибкого движка для построения бизнес-приложений, с возможностями управления жизненным циклом (без привязки к тяжелому САПР).