Подключаете UI-кит, пишете свой класс — он не работает. Добавляете класс поконкретнее — всё равно. В итоге появляется !important, и так по цепочке. Знакомо?

Правило @layer решает это иначе — приоритет задаёт сам автор стилей, а не специфичность селекторов. Стили UI-кита можно завернуть в отдельный слой и спокойно их перебивать. С 2022 года поддерживается во всех современных браузерах. Как настроить порядок и что важно учесть — в статье. #css #uikit

⭐ Читать статью

Обновили главу «Радиальные градиенты» в тренажёре «Погружение в декоративные эффекты». Раньше она держалась на одном испытании. Теперь — полноценная глава, с теорией и практикой.

В финале собирается карточка-билет с круглым вырезом. Тот самый паттерн с купонов и билетов, который часто делают через SVG или дополнительные элементы. Здесь он работает на одном блоке — radial-gradient() и mask-image. Вырез «просвечивает» любой фон под карточкой.

Глава пока открыта бесплатно. Хороший момент попробовать.

💎 Попробовать → https://htmlacademy.ru/courses/419

Зачем команде со своими AI-сервисами джун-фронтендер

Maxis делает свои продукты для среднего бизнеса, в том числе с AI внутри. Сейчас компания запускает совместную программу обучения, чтобы готовить себе джунов-фронтендеров. В четверг 21 мая в 12:00 (MSK) — эфир с директором.

Спросим:
❤️ Какие задачи получает джун в первый месяц в команде
❤️ Как фронтендер растёт до фулстека внутри компании
❤️ Что меняется в работе, когда AI-агенты пишут часть кода
❤️ Почему компания вкладывается в свой поток джунов

Среди первых 100 регистраций разыграем место на программе обучения. Имя победителя — на эфире.

https://htmlacademy.ru/events/live-maxis

Три карточки в сетке. У каждой — заголовок, описание и кнопка. Заголовки разной длины, и кнопки разъезжаются по разной высоте. Сетка выглядит рваной.

Что с этим делали раньше? Считали высоту заголовков через JavaScript и проставляли min-height. Или мирились. Теперь хватает одной строки CSS — grid-template-rows: subgrid на каждой карточке. Карточки наследуют строки родительской сетки, и одинаковые блоки соседних карточек выстраиваются по общим линиям.

Внутри статьи — рабочая демка, разбор синтаксиса для строк и столбцов и сравнение с обычным Grid. Firefox с 2019-го, Chrome 117+, Safari 16+ — уже в baseline. #css #subgrid

🔔 Читать статью

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

А если ту же карточку нужно показать в узкой боковой колонке на широком экране? Окно широкое, контейнер узкий — @media смотрит на размер окна и промахивается. Карточка снова вытянулась горизонтально, хотя места ей не хватает.

Контейнерные запросы переключают акцент: элемент смотрит на размер своего контейнера. Один и тот же компонент в шапке, в колонке и в подвале адаптируется по-разному. И вам не нужно три разных вёрстки под три места.

В статье — пример с резиновой карточкой кроссовок и разбор container-type. А ещё — именованные контейнеры для нескольких блоков на странице и cqw — новые единицы измерения от ширины контейнера. Chrome 105+, Safari 16+, Firefox 110+ — уже в baseline. #css #webdev

📎 Читать статью

Завтра спросим у Maxis: зачем им джун, если код пишет Codex

Завтра в 12:00 (MSK) — эфир с директором Maxis. AI-агенты пишут джуновский код, и компании всё равно держат свои программы обучения. Спросим, как разработчик заходит в команду в этой реальности.

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

В программу обучения уже включён модуль «Фронтенд на автопилоте: AI-агенты на практике» — выпускники приходят к работодателю, умея работать с AI-кодингом.

💯 Среди первых 100 регистраций разыграем место на программе. Имя победителя — на эфире.

https://htmlacademy.ru/events/live-maxis

Сегодня в 12:00 (MSK) — эфир с директором Maxis. Команда делает свои продукты на React и AI-решения для среднего бизнеса, и через программу обучения растит к себе фронтендеров — с реальными задачами уже в первые месяцы. На эфире разберём, как джун попадает в команду и почему компания вкладывается в свой поток выпускников.

💯 Регистрация в первой сотне — последний шанс на розыгрыш места на программе. Имя победителя назовём в финале эфира.

https://htmlacademy.ru/events/live-maxis