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

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

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

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

Почему логотип Coca-Cola — не шрифт, зачем одной гарнитуре сотни знаков, почему хороший веб-шрифт надо проверять на плохом мониторе и что именно нейросети уже могут забрать у шрифтового дизайнера?

Я, Александр, автор телеграм-канала «Shulepov Code», поговорил с Александрой Корольковой — арт-директором Paratype, автором книги «Живая типографика» и YouTube-канала «Шрифтовой видеоблог», соавтором PT Sans, PT Serif и других известных шрифтовых систем. Обсудили историю профессии от металлических литер до веб-шрифтов, устройство работы шрифтовой студии, лицензии и цены, роль кириллицы, инструменты, заказные проекты, ИИ и довольно практичный ответ на вопрос, сколько шрифтов действительно нужно одному сайту. 

Хочу рассказать о своей npm‑библиотеке — это мой второй и самый сложный npm‑проект на момент написания статьи.
Библиотека решает ряд проблем и ограничений связанных с дефолтным поведением браузерного элемента скролл.

Глубоко в код погружаться не буду — поделюсь историей создания и мотивацией.✨

React 19.3 уже доступен в npm!

В прошлом году мы представили View Transitions и Fragment Refs как новые экспериментальные API, которые готовились к появлению в React. Теперь оба API получили стабильный статус в React 19.3.

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

Расположить иконку рядом с текстом — с этой задачей сталкивался каждый фронтенд-разработчик. Вроде бы ничего сложного.

Тогда почему с ней не могут справиться ни Apple, ни Microsoft, ни Google, ни другие техногиганты? 

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

Выкатили новую фичу, а потом бэкендер со своим Firefox пишет, что у него что-то не работает? Или пользователь с Safari жалуется на неудобства? Ничего страшного: поищу причину в интернете, починю баг и продолжу использовать для разработки Chrome </sarcasm>.

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

Задача звучала просто: создать ВКС с jitsi и чатом нарисовать красивый интерфейс в корп стиле.

Решение — написать собственный тонкий веб‑клиент поверх matrix-js-sdk, который разговаривает с уже существующим Synapse‑сервером и Jitsi‑сервером, но выглядит и ведёт себя как часть внутреннего портала компании.

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

Мы сделали свой UI Kit: 6 компонентов превратились в 30+, а одна ошибка сломала разметку во всех проектах

С чего всё начиналось

Когда в проекте начинает появляться всё больше одинаковых элементов интерфейса, рано или поздно возникает вопрос: зачем каждый раз создавать один и тот же Button, Input или Select?

Мы рассматривали готовые решения, в том числе Ant Design и Material UI, но они не закрывали наши требования. Нам требовался больший контроль над внешним видом и поведением компонентов, возможность детально адаптировать их под наши задачи и учитывать требования проекта к безопасности.

Когда работаешь с такими масштабными продуктами, как мы делаем в VK, быстро начинаешь ценить код, который можно не писать. Особенно если речь о небольших сценариях: открыть поповер, анимировать появление блока или подстроить поле под контент. Ещё недавно для таких задач мы почти автоматически тянулись к JavaScript. Но за последние два года CSS сильно расширил свои возможности для задач, связанных с интерфейсом.

Я Максим Кузнецов, занимаюсь оптимизацией производительности и улучшением стабильности веб-версий ВКонтакте. В этой статье расскажу, что уже можно использовать как альтернативу JS, что стоит попробовать аккуратно, а за чем пока лучше просто следить.

Атрибуты width и height сэкономят ресурсы CPU затрачиваемые на отрисовку страницы. Также они избавят от эффекта «скачущих изображений», когда во время загрузки страница резко дёргается, раздвигается, чтобы освободить место под под появляющиеся изображения.

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

Начну со спорного решения: я храню в базе готовый HTML с Tailwind-классами.

Не Markdown, не JSON-схему блоков, а буквально это:

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

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

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

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

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

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

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

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

Что, если я скажу вам, что в 2026 году JavaScript для всего этого нам больше не нужен?

У вас бывает такое чувство, когда вы при выполнении работы упёрлись в какую-то проблему и что-то внутри подсказывает, что не может такого быть, чтобы у неё не было решения? Когда кажется, что уже всё пропало и мы столкнулись с фундаментальным ограничением реальности, но отказ принять это продолжает вести вас в дебри спецификаций, беседы на Github 10 летней давности и изучение статей гигантов уже прошедших этот путь и поделившихся с нами своими результатами? И вот спустя многие часы напряжённого скрипа извилин вы дописали очередную строчку, обновили страницу и вот оно, то, что вы хотели получить смотрит на вас с экрана? Это ощущение успеха, наверное, в той или иной степени знакомо каждому инженеру. В такие моменты мне, обычно, очень хочется поделиться результатом с коллегами и, по возможности, написать статью если это может быть полезно кому-то ещё. В этой записи я собрал 3 подобных ситуации, где в рамках нашей работы возникли решения, которые, насколько мне известно, довольно уникальны и в полной мере не были описаны раньше. Приглашаю вас разделить со мной радость обнаружения решения, которое казалось невозможным!

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

В CSS огромное количество псевдо-элементов и псевдо-классов. Так много, что я не знаю ни одного фронтендера, который помнит все. Я тоже не исключение из этого правила.

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

Сегодня я пришёл к вам, чтобы исправить это. Мы рассмотрим несколько псевдо-элементов и псевдо-классов, которые, по моему мнению, редко используют. Хотя они принесут немало пользы!

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

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

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

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

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

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

В прошлой статье про StyleX я разбирал, почему компилируемый CSS выглядит логичным продолжением ветки CSS-in-JS. Одно из главных свойств StyleX для меня — предсказуемость: стили описываются в ограниченной форме, которую можно анализировать ещё до запуска приложения.

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

Теперь Meta открыла Astryx — дизайн-систему, построенную на React и StyleX. На первый взгляд это выглядит как релиз большой библиотеки: больше 170 компонентов, темы, тёмный режим, шаблоны, CLI, всё как мы любим. Но количество компонентов здесь не самое интересное. Astryx стоит рассматривать как следующий шаг после StyleX: если StyleX делает предсказуемыми стили, то Astryx пытается сделать предсказуемой работу с интерфейсом целиком — и для человека, и для AI-агента.

Статья посвящена базовым принципам работы тайловых веб‑карт. В ней рассматривается, как карта мира разбивается на небольшие изображения — тайлы, как устроен их URL и что означают параметры zoom, x и y.

На простых примерах разбирается связь между географическими координатами и положением тайла в общей сетке. Пошагово выводятся формулы преобразования долготы в координату X и широты в координату Y с учётом проекции Web Mercator.

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

Часто разработка начинается с кода. Есть идея - мы открываем IDE, создаём проект и начинаем писать. Не задумываясь о том, что в этот момент мы ещё можем не понимать, какую проблему решаем и что вообще должна делать система.

В этой статье разберём путь от пользовательской потребности до реализации: UCD → FR/NFR → KISS → компонентная разработка → код.

CSS «слушает» нас. Нет, не в буквальном смысле. Суть в том, что в CSS появляется все больше псевдоклассов, которые позволяют реагировать на события JS без необходимости писать сам JS. Формально псевдоклассы отслеживают состояния, а не события, но порой они настолько похожи на обработчики событий, что разница становится почти незаметной (хотя в контексте CSS это не так уж важно).

TL;DR

За последний год я собрал вайбкодингом не один десяток лендингов — для программ МФТИ, для своих проектов и на заказ. Разберу четыре самых показательных: Школу Техпреда, конференцию «Точка сборки», курс «ИИ Продакт-менеджмент» (aimipt.ru) и один свой, личный — на нём эффекты раскачаны сильнее всего.

У всех четырёх есть слой «дорогих» визуальных эффектов: интерактивная вода на WebGL-шейдере с освещением, 3D-логотип Физтеха из тысяч частиц-спрайтов, живая 3D-башня из кубов, облако частиц, которое морфит форму по скроллу.

К этому слою я пришёл двумя разными путями. На «Точке сборки» эффекты написаны руками на чистом WebGL — ноль анимационных библиотек. На остальных работает свой движок на Three.js: вынесен отдельными файлами, переиспользуется между сайтами и откатывается на 2D-canvas, если CDN не ответит.

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

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

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

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

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

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

Когда мы на Бесте с нашими технарями задумали сделать эту тактическую RPG «Путь Героя», пришлось выбирать платформу для серверной части. В итоге мы решили использовать наш старый форум ещё времён 2004 года, обновив его с древней версии 3.4.6 до свежего каркаса IPS 5. Из коробки у него есть всё, что нужно: нормальная система прав, готовая база пользователей и вменяемое API. Но чтобы превратить обычный форум в нормальную игру, пришлось знатно поковыряться под капотом и в базах. Первым делом нужно было решить две главные проблемы: как упаковать всё это дело в легкое мобильное приложение и раз и навсегда отвадить игроков от читерства с кубиками.

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

В прошлом месяце я опубликовал статью с вопросами о HTML. Неожиданно для меня, она понравилась многим и стала одной из самых популярных за последнее время. Раз так получилось, то почему бы не сделать то же самое про CSS? Вот я и пришёл со своими вопросами и, конечно, ответами.

Моя цель — это развлечь вас. Хотя вопросы связаны с практикой, на них не так просто ответить. Если вы не сможете ответить на большинство, то ничего страшного. Но, возможно, они покажутся вам легкотнёй.

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

В этом небольшом туториале я покажу вам, как с помощью нескольких новых возможностей CSS можно создать действительно прикольную динамичную систему тематизации (theming). Эта техника позволяет создавать тематизированные компоненты с тенями в светлом режиме и светящимися границами в темном режиме, с текстом, который всегда остается читаемым, независимо от динамичного цвета его фона. Все на CSS. Доступно во всех современных браузерах с мая 2026 года.

Cвойство backdrop-filter: blur() под капотом работает совсем не так, как интуитивно кажется, и это приводит к багам, которые нелегко воспроизвести и довольно сложно объяснить. Потому давайте разбираться.

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

Я начал использовать медиа-запросы ещё в 2011 году. Помню, как на работе руководитель подарил мне книгу Итана Маркотта «Отзывчивый веб-дизайн». В тот день я даже не работал, а сел читать её. В конце дня я сделал свою первую реализацию адаптивной вёрстки.

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

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

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

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

С примерами работы на TypeScript, React, Vue и Angular можно ознакомиться на домашней странице проекта Layout Virtual.

Репозиторий с проектом тут.

Уже почти июнь подходит к концу, а я так и не выпустил эту статью. Исправляюсь.

Обзор на браузерные API, которые стали Widely available в мае 2026. Раз в месяц я буду вам напоминать, что вы уже можете использовать в проде.

Каждый месяц выходят новые CSS-свойства, HTML-атрибуты, JavaScript-методы и WebAPI, но применять в проде мы их конечно же не будем. 2.5 года назад также каждый месяц выходили новые фичи в браузере, а вот их уже пора начинать применять.

Друзья, сегодня отличный день, чтобы сделать свою первую статью на Хабре, который я читаю многие годы. Сегодня я успешно запустил в прод свой первый полноценный хобби (пет) проект.

Два года назад работая с замечательной командой консультантов института Адизеса, мы столкнулись с проблемой наличия бесплатного гибкого софта для построения орг.моделей. Быстро собрать подразделения и функции, перетащить ветки в новое место, покрасить и так что бы не рисовать линии и квадратики, а только сосредоточиться на самой модели, потому что все это происходит во время страт. сессии, где сидят руководители тех самых подразделений. А подразделений и веток много, сценариев много – кого-то временно скрыть или свернуть, кого-то скопировать как типовую функцию в другие ветки. Все делать нужно быстро и на большом экране и не всегда в логике HR штатной модели (а точнее всегда не в ней). Миро, Фигма и прочие конструкторы не подходят по той или иной причине.

Так у меня родилась идея приложения ORGFORMAT. Но только спустя два года я нашел время, чтобы ее реализовать.

Но мало сделать приложение, не менее важным было сделать легкий обмен сформированными моделями, возможность их просмотра и доработки участниками. А еще лучше часть рутины по низшим ветвям отдать ИИ на проверку или доработку. Так родилась еще одна идея – создать формат моделей, который говорит и на языке программы (data-to-diagram), и на языке человека, и на языке ИИ, и не зашит никакими лицензиями и нечитаемым кодом. То есть открытый формат. Было важно, чтобы формат работал с иерархическими моделями и не позволял никакие кросс-связи буквально, что бы пользователи не творили хаос между ветвями. Только прямая естественная потоковая иерархия и прямая ответственность. Но и признаки блокам нужны, так как не все способна отразить иерархия - так пришла идея тегов, как гибкая система реквизитов (а во многом и, по сути, мини база данных, при необходимости. Лайфхак!). Так же очень хотелось, что бы модель не только строила связи, но и по ним могла что-то посчитать - конечно же нужна универсальная ценность (value), но не ограничивать ее только одним типом, а дать свободно выбирать, что считать и в каких единицах схмерения – бюджет, время, единицы товара или количество населения страны. И это тоже нам надо! Для всего это отлично подошел хорошо известный ИТ-ишникам формат YAML, который для людей открыт, как текст, а для машины, по сути, четкая структура данных. Вот и отлично, я собрал на его базе прототип структуры и необходимых атрибутов. И дал короткое название .orgf. Сгенерировал несколько моделей через ИИ и дал проверить результат другой ИИ – результат великолепный. ИИ легко переводила любые данные в этот формат, хоть штатное расписание из Екселя, хоть выгруженные в PDF структуры функций и процессов. Прототип открытого формата ORGF себя полностью оправдал! Так получилось, что модели и формат появились раньше самого редактора моделей (приложения). Ну что же есть понятный запрос, теперь надо было сделать под него софт!

Мы рады объявить о релизе MDN MCP-сервера. MCP (Model Context Protocol) — это открытый стандарт, который позволяет ИИ-инструментам подключаться к внешним источникам данных. MDN MCP-сервер использует этот протокол, чтобы доставлять документацию MDN и данные о совместимости браузеров прямо в твой редактор кода или IDE.

Хочу поделиться кейсом, когда разработка типичного tab-switcher превращается в настоящее архитектурное решение.

Webnative - фреймворк для разработки нативных приложений на языках веба с использованием нативных webview компонентов.

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

Я поискал готовые шаблоны. Нашёл Excel-таблицы, PDF-чеклисты и десятки статей с советами. Ни одно из этого не открывалось быстро прямо на встрече и не помогало думать в реальном времени.

Поэтому я сделал BA Toolkit — набор интерактивных инструментов для структурирования BA-встреч. Открываешь в браузере, идёшь по шагам, фиксируешь всё на месте.

Три месяца спустя — три инструмента в продакшене, открытый код на GitHub и эта статья.

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

В общении с коллегами я всё чаще замечаю, что многие не знают о последних возможностях CSS. Кто-то настолько занят повседневными задачами, что просто не успевает следить за новинками. Кому-то это не особенно интересно. А кто-то уже много лет использует знакомые подходы и не видит причин что-то менять.

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

Давайте посмотрим, что у меня получилось.

Когда возникает идея создать браузерный IRC-клиент без JavaScript, приходится сталкиваться с классической проблемой фронтенда: все насколько привыкли гнать динамику через JavaScript, что перестали замечать возможности HTML/CSS с щепоткой серверной магии по реализации многих фич. HTTP Streaming существует с давних времён, а CSS эволюционировал настолько, что может справиться с логикой состояний — но мы упорно продолжаем грузить мегабайты JavaScript (и иногда даже WebAssembly) для решений, которые вполне можно реализовать иначе.

Идея создать IRC клиент без JavaScript не совсем нова (хоть это и выяснилось уже после создания такого :) ). Ещё в нулевых появился CGI:IRC — настоящий IRC клиент, который может работать полностью без JavaScript, позволяя людям общаться в реальном времени через браузер, даже если JavaScript по каким-то причинам не работал. Но это было в эру table-layouts, и когда CSS не был так развит, как сейчас. Сегодня возможностей больше, и мы воспользуемся ими, чтобы навернуть функциональность, которая не видана CGI:IRC.

Результат можно глянуть (хоть и с дополнительной стилизацией и изменениями, которые не так важны для статьи) здесь, а ещё на GitHub

Когда маркетологи хотят всё: сырые данные в GA4, запись сессий в Метрике, хитмапы в Clarity и при этом «Lighthouse 100» в PageSpeed Insights — приходится изобретать. Расскажу, как мы это сделали на небольшом проекте и во что это обошлось по времени и нервам.

Проект — нишевый агрегатор российских хостинг-провайдеров. Более 120 страниц в sitemap, 31 статья, десятки категорий услуг, живые цены, сравнения. Стек: Astro 6 + Strapi 5 + Tailwind 4, плюс Partytown, PostgreSQL, Nginx и обычный VPS на Ubuntu. Сайт собирается в статику во время билда, никакого SSR в рантайме нет.

На desktop — Lighthouse 100 / 100 / 100 / 100. На mobile с жёстким throttling (4x slow CPU) — 99 / 100 / 100 / 100. В реальных условиях и по Chrome UX Report — 100 везде. LCP на desktop — 0,5 секунды, на mobile throttled — 1,7 секунды. CLS — ноль. TBT — 10 ms на мобильном и 0 ms на десктопе.

Каждый раз, когда я хотел поправить отступ или цвет в процессе разработки, я делал одно и то же:

открыл DevTools → нашёл элемент → поменял значение → понравилось → скопировал → переключился в редактор → нашёл файл → вставил.

Это семь шагов ради однострочного изменения. Я сделал LiveStyleSync, чтобы это был один шаг.

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

Мне всегда нравилось следить за тем, как развивается CSS. Стараюсь следить за новыми возможностями, чтобы не пропускать что-то действительно важное. И недавно подумал: «А почему бы не рассказать о них читателям Хабра?» Так я и оказался здесь.

Я составил список новинок, которые кажутся мне особенно интересными и важными. Они всё ещё экспериментальные. Браузеры только в последние месяцы начали поддерживать их. Так что это суперсвежие штуки.

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