Привет, на связи Виктор Степанов, лид одной из core-команд GitVerse. Сегодня хочу поговорить о важном аспекте нашей платформы — пользовательском опыте. А именно о том, как мы разрабатывали тёмную тему для GitVerse. Это был не просто косметический апгрейд, а полноценный инженерно-дизайнерский проект, в котором переплелись эргономика, технические ограничения и, конечно, ожидания пользователей.
Обзор на браузерные API, которые стали Widely available в октябре 2025. Раз в месяц я буду вам напоминать, что вы уже можете использовать в проде.
Каждый месяц выходят новые CSS-свойства, HTML-атрибуты, JavaScript-методы и WebAPI, но применять в проде мы их конечно же не будем. 2.5 года назад также каждый месяц выходили новые фичи в браузере, а вот их уже пора начинать применять.
Привет, Хабр!
В беседах с коллегами я всё чаще замечаю, что многие не в курсе последних фишек CSS. Конечно, у каждого свои причины. Кто-то погряз в повседневной рутине. Кому-то просто неинтересно, что там нового происходит в мире CSS. А кто-то годами сидит на десятилетних подходах и чувствует себя прекрасно.
Честно говоря, как давнему фанату CSS, мне становится немного грустно. Сколько классных возможностей проходит мимо них! А ведь их код мог бы быть короче, надёжнее и понятнее. Именно поэтому я собрал несколько примеров, которые были популярны раньше, и переписал их, используя современные возможности CSS.
Давайте посмотрим, что у меня получилось.
Всем привет. Я Артем Курочкин, frontend разработчик компании DD Planet.
Сегодня я расскажу об одном из ключевых нововведений в React, представленных на React Conf 2025. Прошу любить и жаловать ViewTransition - нативная поддержка view transition api в экосистеме реакта.
Что это значит для React-разработчиков и как нам всем это поможет, мы и разберем в этой статье.
У меня в VK несколько тысяч друзей, и истории давно превратились в шум: много людей, с которыми я не общаюсь, старые контакты, рабочие связи.
При этом удалять всех подряд из друзей не хочется, потому что сеть полезна для проектов и продвижения.
Поэтому я написал простой браузерный скрипт, который автоматически скрывает исто��ии почти от всех, кроме тех, кого я явно добавил в список исключений по имени или ID.
Скрипт запускается из консоли, продолжает работать даже в неактивной вкладке и доступен в открытом репозитории.
В сфере фронтенд‑разработки каждый день приходится решать однотипные задачи: создавать и настраивать внешний вид компонентов, обеспечивать адаптивность и доступность UI без вреда для производительности. Чтобы избавить нас от этой рутины, были созданы библиотеки стилизации.
В данной статье мы рассмотрим одну из таких библиотек — Chakra UI V3 в связке с React, так как она не особо большая и проста в изучении. В разных библиотеках синтаксис может немного отличаться, но в основном они все решают одни и те же проблемы. Давайте разберёмся, как она способна помочь нам в разработке.
Всем привет!
Не так давно вышла статья о том, как Валентин Ульянов aka @misterzsm нанял джуна в свой open source проект. Я и есть тот самый джун Рома (на самом деле я Рамазан).
В этой статье я бы хотел рассказать вам эту же историю, но со своей стороны. В частности, расскажу вам немного о своём бэкграунде, о том, почему я решил согласиться на это предложение, а также отвечу на некоторые комментарии из статьи Валика.
Привет, Хабр!
В последние годы CSS стабильно развивается. По себе знаю, что уследить непросто. По этой причине многие продолжают использовать лишь часть его возможностей, ограничиваясь проверенными годами решениями.
Ничего против них не имею. Просто хочу рассказать о нескольких приёмах, которые вы могли упустить. Они помогут вам в разных ситуациях.
Давайте посмотрим, что я вам подготовил.
Что такое кастомные медиавыражения и почему обычные CSS-переменные не работают внутри @media. Простое объяснение, понятные примеры и разбор того, как браузер вычисляет стили под капотом.
Пора к части второй! У нас уже есть очень хорошие функциональные тултипы с позиционированием, но они в основном «смотрели» вверх или вниз и смещались у краёв, чтобы избежать выхода за границы. Теперь мы пойдём дальше и рассмотрим четыре позиции без смещений.
Устал от однообразных каруселей? В статье показываю, как шаг за шагом собрать 3D-таймлайн-слайдер с перспективной сеткой, плавной прокруткой и переключением категорий на чистом TypeScript и CSS.
Я долго думал, аудит какого веб-приложения провести первым для своей небольшой заметки, чтобы показать наглядно подход из 5 шагов. С одной стороны, это должно быть что-то массовое, чем могут пользоваться большое количество людей с ограничениями. С другой стороны, владелец портала должен иметь достаточный бюджет для того, чтобы иметь возможность нанять высококвалифицированных веб-разработчиков, которые могут реализовать доступность.
Наивно ожидать доступности от госучреждений, сайтов госполиклиник или порталов чиновников — там нет таких зарплат, как в частном секторе коммерческого ИТ. Также приложение должно быть хорошо известно обывателю и быть на слуху, даже если он им не пользуется.
Кто же будет первым? Более 12 лет я являюсь клиентом Приорбанка (Беларусь, РБ). Банки — это важные сервисы, они определенно должны быть доступны людям с ограничениями. Я решил начать именно с него, это сервис который важен и для меня, поэтому в двойне интересно это сделать. Да простят меня сотрудники банка!)
Привет, Хабр! На связи Герман Frontend-разработчик в Webest, и сегодня хочу поделиться тем, почему мы продолжаем использовать препроцессор SASS/SCSS в наших проектах, несмотря на растущую популярность Tailwind и CSS-in-JS решений.
К слову, мы не «олдскульные фанаты» SASS, и Tailwind тоже используем, но в зависимости от типа проекта. Комбинированный подход дает гибкость, особенно в масштабируемых фронтенд-системах.
CSS interest-delay — это как «не торопись» для интерфейсов. Позволяет браузеру ждать, пока пользователь действительно хочет что-то сделать, а не просто мимо прошёл. Свойство, которое решить кучу головной боли, но пока не работает нигде — но когда заработает, вы перестанете ругать выпадающие меню.
Тултипы — классика веб-разработки. Кликаешь по элементу — и рядом всплывает небольшой «бабл» с дополнительной информацией. Но за этим простым кликом почти всегда стоит JavaScript, который рассчитывает, где именно показать тултип.
Попробуем поставить его сверху. Нет, места не хватает. Окей, давай снизу. Теперь он упирается в правый край — сдвинем чуть левее. Приходится учитывать кучу нюансов, чтобы тултип оказался на своём месте и нигде не обрезался, не теряя важный текст.
В этой статье я покажу, как написать хороший JavaScript, который обработает все такие случаи…
Шучу! Мы обойдёмся CSS и посмотрим, как современный Anchor Positioning API может помочь со всем этим. Никакого тяжёлого JS и лишних проблем с производительностью.
Как‑то на одном проекте понадобилось красиво равномерно разместить небольшие блоки‑виджеты в контейнере на странице. Сложность в том, что эти блоки различаются, как по высоте, так и по ширине. При чём нужно учесть адаптивность вёрстки и динамическое изменение содержимого, как контейнера, так и самих элементов — виджетов. Собственно мои изыскания по этой теме и вылились в разработку собственного решения и эту статью, которые, я надеюсь, будут полезны читателям.
Пишем Slider с Web Components
В этой статье мы создали полнофункциональный слайдер, используя современные веб-стандарты. Мы не только реализовали базовую логику, но и освоили ключевые концепции:
• Работу с Shadow DOM для изоляции стилей и структуры
• Использование слотов для композиции контента
• Реакцию на атрибуты для настройки поведения компонента
• Организацию жизненного цикла через connectedCallback
Представьте, что вы — разумный человек. Вы знаете, что CSS — это язык стилей. Cascading Style Sheets. Для оформления. Не для логики. Не для программирования. Просто цвета, шрифты, отступы.
А потом вы заходите на CodePen.
И там кто-то сделал полностью рабочий калькулятор. На чистом CSS. Без JavaScript.
Последняя часть по созданию своего starter-kit.
В этой статье мы рассмотрим основные подходы борьбы со сложностью с помощью веб-компонентов. Статья рассчитана на более-менее подготовленных читателей. Материал насыщен ссылками, которые очень желательно изучить.
Привет, Хабр!
При обучении разным языкам программирования всегда есть практики, которым не рекомендуется следовать. Это очень сильно помогает разработчикам избегать ошибок.
Только по какой-то причине сложно найти антипаттерны по языкам HTML и CSS. Может, потому что они не языки программирования?
В общем, у меня появилось желание это исправить. Я собрал несколько примеров, которые лично отношу к антипаттернам. Возможно, это субъективно, но надеюсь, что нет.
Давайте посмотрим, что я вам подготовил.
