Верстальщик от бога

Кастомные медиавыражения #почитать Что такое кастомные медиавыражения и почему обычные CSS-переменные не работают внутри @media. Простое объяснение, понятные примеры и разбор того, как браузер вычисляет стили под капотом. ⏱Читать статью

Как совместить утилиты и рукописный CSS в атомарном подходе? #почитать В этой статье мы поговорим о том, нормально ли применять в рамках Atomic CSS подхода рукописный CSS. Бытуют разные мнения по этому поводу. Кто-то считает, что в атомарном подходе нужно использовать только утилиты, а кто-то допускает и произвольные сочетания рукописных CSS классов с ними. Я постараюсь разобраться в этом, аргументируя свою позицию. ⏱Читать статью

Делаем интерфейс дружелюбнее. Коллекция простых HTML/CSS лайфхаков #почитать Красивый и интуитивно понятный интерфейс — это моя личная страсть. Я тратил дни, чтобы докрутить свои проекты до нужного мне уровня. В итоге я начал систематически собирать приёмы HTML и CSS, которые мгновенно улучшают восприятие пользователя. Сегодня я решил показать вам несколько проверенных трюков. Выбрал самые лёгкие в освоении, чтобы вы смогли внедрить их уже сегодня, не отвлекаясь на сложности. ⏱Читать статью

HTML мёртв, да здравствует HTML #почитать Браузеры — это очень странный мир. Хотя WebAssembly добился успеха, в том числе и на серверах, клиент по-прежнему ощущается примерно таким же, как и десять лет назад. Энтузиасты будут говорить вам, что доступ к нативным веб-API через WASM — это решённая задача, достаточно лишь минимального клея JS. Но никто не задаёт вопрос, зачем нам вообще нужно получать доступ к DOM. Это лишь один из вариантов. В этой статье мне бы хотелось объяснить, почему уже настало время отправить DOM и всевозможные API на радугу, а также поделиться некоторыми идеями о том, как это сделать. Не буду притворяться, что знаю о браузерах всё. Сегодня уже никто не знает всего, в этом-то и проблема. ⏱Читать статью

Коллекция полезных CSS фишек, которые вы редко используете #почитать В мире фронтенда активно всё меняется. Появляются одни инструменты, но только их выучишь — они устаревают, и нужно уже учить новые. Новые методы и API в JavaScript. Даже в HTML появляется что-то новое. И, конечно, CSS не отстаёт. В общем не удивительно, что люди забывают или не успевают услышать о возможностях в CSS. В этой статье я постараюсь показать несколько из их, которые считаю полезными. ⏱Читать статью

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

Влияние селекторов CSS на скорость рендеринга web-приложения #почитать Хотя различия в скорости работы CSS-селекторов хорошо документированы, на практике разработчики часто недооценивают их влияние на производительность. В этой статье мы количественно оценим, как некорректный выбор селекторов замедляет работу приложения, и систематизируем ключевые принципы оптимизации CSS. ⏱Читать статью

Shadcn для Vue: норм или стрём? #почитать Опыт использования shadcn-vue в продакшн проекте: что работает хорошо, а с чем придется помучиться. Честный обзор популярной UI библиотеки от практикующего разработчика. Стек: Vue/Nuxt 3, Tailwindcss 3, Typescript, Telegram WebApp. ⏱Читать статью

Умный рабочий стол, который живёт по солнцу #почитать Идея «умного» рабочего стола у меня появилась давно. Под "умным" я понимал не виджеты, прогнозы погоды и не очередную анимацию, а максимально простую идею: фон рабочего стола должен соответствовать тому времени суток, которое сейчас у меня за окном. Без условностей. Только солнце. ⏱Читать статью

I Learned The First Rule of ARIA the Hard Way #почитать Semantic HTML does a lot more accessibility work than we usually give it credit for already — and ARIA is simple to abuse when we use it both as a shortcut and as a supplement. ⏱Читать статью

🔴 Тестовое собеседование с ТимЛидом Frontend-разработки в этот четверг 6 августа(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика. Как это будет: 📂 Алексей Романов, Teamlead в Underhood.dev с опытом 6+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу 📂 Алексей будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью 📂 В конце можно будет задать любой вопрос Алексею Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.

Atomic CSS: верстка и легкость бытия #почитать Обсудим имеющиеся проблемы в верстке и посмотрим, как атомарный подход их решает (или не решает). Разберем основные мифы, посмотрим на лучшие практики этого подхода и сделаем выводы. Эту статью можно отчасти считать продолжением моей предыдущей, по данной теме, хотя напрямую они не связанны. Но если там был хардкор и технические детали, то здесь уже разберем прикладные вопросы: как верстать в Atomic CSS, чтобы получить заявленный эффект. ⏱Читать статью

Верстаем сложный прогрессбар в 2026 году #почитать Раньше, чтобы сделать круговой прогрессбар, мы страдали с SVG. Мне до сих пор больно заглядывать в инспектор на старых реализациях. Сегодня всё кардинально упростилось. Современный CSS позволяет собрать сложный, гибкий и красивый круговой прогрессбар буквально на одном div и на одном CSS-свойстве. И всё это — с отличной браузерной поддержкой. В этой статье я разберу именно этот приём. Сначала — ключевую идею подхода, затем — возможности кастомизации, после этого добавлю немного визуальной «дороговизны», удобные ручки управления и экспериментальную CSS-логику. Да-да, напоследок мы немного попрограммируем на CSS! ⏱Читать статью

Как получить оффер в Яндекс, Сбер, МТС и другие крутые компании? На фото ребята из моего комьюнити, где уже больше 220 frontend-разработчиков. Все они успешно устроились в крутые компании и получили офферы от 300 тыс рублей 🫂 👋 Привет, меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и остаюсь рядом на испытательном сроке.

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

И у тебя тоже получится 😎 У меня есть канал, где я: 👉 Показываю, как пройти HR-фильтр и превратить отклики в реальные приглашения 👉 Помогаю найти мотивацию и разбираюсь с убеждениями, которые мешают расти 👉 На примерах показываю, как проходить собеседования, включая техничку 👉 Разбираю резюме и делюсь лайфхаками — например, как аккуратно «пинговать» рекрутеров И регулярно выкладываю полезное: ▪️ Задачи, на которых валятся кандидаты ▪️ Подборка из 100+ каналов с вакансиями для разработчиков ▪️ 100 вопросов, которые помогут тебе на собеседовании ▪️ Чек-лист для проверки своего резюме Подписывайся: https://t.me/+7oWkeZXB4d44ODAy Реклама, erid: 2W5zFH8ydtu ИП Галактионов Тихон Витальевич, ИНН 771618975809

View Transitions API #почитать Полистав различные ресурсы в Интернете и просмотрев множество видео по данной теме, я решил составить наиболее полную картину по данному, не побоюсь этого слова, революционному API, чтобы вы уже сегодня могли начать использовать его в своём проекте! ⏱Читать статью

text-decoration-inset is Like Padding for Text Decorations #почитать The text-decoration-inset property solves a problem that we’ve had since the beginning of the web, which is that text decorations such as underlines extend beyond the first and last characters, resulting in vertical misalignment. ⏱Читать статью

Что на самом деле делает фронтенд: путь данных от сервера до вашего экрана #почитать Фронтенд обычно представляют как «кнопки» и «красивые интерфейсы». Но это очень поверхностное понимание. На самом деле фронтенд — это слой приложения, который работает между пользователем и сервером, управляет данными, обновляет экран без перезагрузки и обеспечивает взаимодействие с системой. ⏱Читать статью

Коллекция полезных HTML и CSS фич, которые редко используются #почитать Я люблю помогать фронтендерам больше узнать о HTML и CSS. Общаясь, я составил список HTML и CSS фич, которые полезные, но почему-то о них мало кто знает. В этой статье я пришёл поделиться ими. ⏱Читать статью

Управляем «протягиванием» прокрутки: разбор overscroll‑behavior #почитать Распространённый сценарий: вы прокручиваете модальное окно, доезжаете до конца и… вместо того чтобы остановиться, браузер продолжает тянуть основной документ. Это так называемый «scroll chaining»: событие прокрутки передаётся родительскому контейнеру. На мобильных устройствах этот эффект сопровождается bounce‑анимацией или pull‑to‑refresh. Для некоторых интерфейсов такое поведение отвлекает пользователя и может мешать вашему коду. В этой статье я расскажу, как CSS‑свойство overscroll-behavior помогает контролировать такие эффекты, избавится от хака overflow: hidden, а также рассмотрим практические примеры и подводные камни. ⏱Читать статью

Старые и новые проблемы Safari на iOS #почитать Safari — новый Internet Explorer для фронтенд-разработчиков! Поведение вёрстки в нём отличается от спецификаций, а иногда бывает и непредсказуемым. Но если Microsoft свой браузер похоронила, то Apple регулярно обновляет Safari, создавая новые проблемы для фронтендеров. Релиз Safari 26.0 не стал исключением, а усложнил ситуацию новый дизайн Liquid Glass, изменивший интерфейс браузера. ⏱Читать статью