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

Уменьшение сложности CSS с псевдоклассом :is() #почитать Недавно появился повод воспользоваться новым псевдоклассом CSS :is(), и он превосходен! Хочу рассказать, как с его помощью можно значительно уменьшить сложность селекторов. ⏱Читать статью

Адаптивная вёрстка с учётом размера шрифта пользователя и брейкпоинты #почитать Как говорят приверженцы ТРИЗ, лучшая машина — та, которой нет (но её функции исполняются). CSS даёт нам множество инструментов для адаптивной вёрстки. Брейкпоинты — не единственный, и далеко не самый лучший из них. Если ваша вёрстка слишком сильно зависит от них — возможно, что вы что-то делаете неправильно. Разберём эту мысль подробнее. Иногда мы начинаем верстать сложный интерфейс, а чтобы при этом не изобретать велосипед — берём за основу какой-то фреймворк (с брейкпоинтами). Затем нам хочется добавить немного адаптивности в какой-то конкретный блок. ⏱Читать статью

Настройка распределения контента по столбцам с помощью column-fill #почитать Свойство column-fill управляет тем, как контент распределяется по колонкам при использовании многостолбцового макета. Обычно оно используется, чтобы задать, заполняется ли каждая колонка полностью или контент равномерно распределяется между ними. Можно установить column-fill в auto — тогда колонкам присваивается равное количество контента по мере его загрузки, или в balance — чтобы все колонки заполнялись равномерно. Для многостолбцовых контейнеров это особенно полезно при создании аккуратных газета-подобных блоков. ⏱Читать статью

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

Селектор :root и CSS переменные #почитать Используйте возможности CSS3 с селектором :root, упрощающим глобальную стилизацию, повышающим удобство сопровождения и открывающим динамичный, отзывчивый дизайн. ⏱Читать статью

Итак, вы хотите отказаться от пре- и постпроцессоров CSS #почитать Разбираем, можно ли в 2025 году отказаться от Sass и PostCSS в пользу нативного CSS, Lightning CSS и Tailwind. Плюсы и минусы современных инструментов. ⏱Читать статью

ChatGPT vs Гик. Сможет ли AI заменить опытного верстальщика? #почитать Моя подруга постоянно читает новости о том, что искусственный интеллект заменит какую-то профессию. Тестировщик, программист, дизайнер, писатель и т. д. А сможет ли он заменить опытного верстальщика? Мне стало интересно, сможет ли ChatGPT написать код, как я. Чтобы мог сказать: «Да, вот это мы допускаем в продакшен». Добиваться этой цели я буду на примере нескольких популярных паттернов. Я уверен, что фронтендеры постоянно верстают их из проекта в проект. Ещё я честно признаюсь, что у меня мало опыта работы с такими системами. Я новичок. Так что тоже учитывайте это при чтении. ⏱Читать статью

Каскадные слои CSS vs БЭМ vs утилитарные классы: управление специфичностью #почитать CSS бывает непредсказуемым — и зачастую виновата именно специфичность. Автор статьи объясняет, почему ваши стили могут вести себя неожиданным образом и почему лучше разобраться в специфичности, чем полагаться на флаги !important. CSS — штука дикая, реально дикая. И хитрая. Но давайте поговорим конкретно о специфичности. При написании CSS практически невозможно избежать разочарования, когда стили применяются не так, как ожидалось — это особенность специфичности. Вы применили стиль, он сработал, а позже пытаетесь переопределить его другим стилем и... ничего, он вас игнорирует. Опять же, дело в специфичности. Да, есть вариант прибегнуть к флагу !important, однако, как и все разработчики до нас, мы знаем, что это рискованно и нежелательно. Гораздо лучше разобраться в механике специфичности, чтобы потом не сражаться с расставленными кругом флагами важности. ⏱Читать статью

Простой интернет-магазин на HTML, CSS, JS с отправкой данных на почту #почитать

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

⏱Читать статью

Функции в CSS? #почитать Очень нужный дисклеймер: Теперь в CSS мы (вроде как) можем использовать функции! Я знаю, это не самое приятное чувство - закончить читать о новой фиче только для того, чтобы автор сказал: "И, надеюсь, мы увидим её через пару лет". К счастью, прямо сейчас вы можете попробовать (неполную) версию функций CSS в Chrome Canary с экспериментальным флагом, хотя кто знает, когда мы сможем использовать на рабочем сайте. ⏱Читать статью

Практическое руководство по иконкам в веб-проектах #почитать Узнайте, как создать собственный шрифт с иконками из SVG-файлов и интегрировать его в Angular-проект с помощью Fantasticon. ⏱Читать статью

Управление разрывами в многостолбцовых CSS макетах #почитать Колонные макеты с помощью свойств или column-count позволяют раскладывать контент в несколько колонок. Свойства break-after, break-before и break-inside` управляют тем, где происходит разрыв колонок — чтобы убрать нежелательные переносы или задать точку начала или конца колонок. ⏱Читать статью

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

Да, этот HTML и CSS старый, но всё ещё полезный #почитать

Следя за развитием HTML и CSS, очень сложно запомнить всё. Я заметил это, ведя свой канал и общаясь с коллегами. Многие люди не знают про возможности HTML и CSS, которые были внедрены в браузеры 6 лет назад или раньше. Только их возраст не является недостатком. Они всё ещё полезны в современной разработке. По этой причине я собрал их в небольшой список и на основе его написал эту статью. Надеюсь, найдёте для себя что-то полезное. Давайте посмотрим, что я подготовил.

⏱Читать статью

Настройка Jest и React Testing Library: пошаговое руководство для React и Next.js проектов #почитать В этой статье мы подробно рассмотрим процесс настройки среды unit-тестирования веб-приложений на базе React и Next.js с использованием Jest и React Testing Library. Расскажем об установке необходимых зависимостей, создании конфигурационных файлов, настройке Babel и TypeScript, подключении SCSS и SVG, а также организации структуры проекта. Особое внимание уделено специфике настройки Jest в среде Next.js. Материал будет полезен для frontend-разработчиков и команд разработки, которые работают с React или Next.js проектами и хотят внедрить качественное unit-тестирование. ⏱Читать статью

Создание глубины и движения: пошаговое руководство по созданию эффекта параллакса #почитать Создание визуально привлекательного сайта — это не только о ярких цветах и типографике. Сегодня это также о создании захватывающих пользовательских впечатлений, которые увлекают пользователей при прокрутке страницы. Один из самых эффективных способов достичь этого — использование эффекта параллакса, при котором элементы перемещаются с разной скоростью, создавая ощущение глубины и движения. С помощью продуманного подхода и небольшого количества JavaScript вы можете легко добавить этот эффект на свой сайт, сделав его более динамичным и увлекательным. В этой статье мы шаг за шагом рассмотрим, как интегрировать пользовательский эффект параллакса на ваш сайт. Будь то создание богатой функциональностью целевой страницы или улучшение элементов повествования, этот метод оживит ваш сайт. Давайте начнем. ⏱Читать статью

Regex стали лучше - История и будущее регулярных выражений в JavaScript #почитать Современные регулярные выражения JavaScript прошли долгий путь со времени своего появления. И они могут стать потрясающим средством поиска и замены текста, хотя у них до сих пор репутация сложного для написания и понимания инструмента. И особенно это актуально для среды JavaScript, где регулярные выражения много лет оставались в тени, будучи сравнительно менее мощными по сравнению с их более современными аналогами в PCRE, Perl, .NET, Java, Ruby, C++ и Python. Но, наконец, те времена прошли. В этой статье я расскажу об истории улучшений регулярных выражений в JavaScript (спойлер: ES2018 и ES2024 серьезно изменили правила игры), покажу примеры современных регулярных выражений в действии, познакомлю вас с облегчённой библиотекой JavaScript, которая позволяет JavaScript конкурировать с другими современными инструментами регулярных выражений или превосходить их, и в конце предложу обзор активно обсуждаемых предложений, которые позволят улучшить регулярные выражения в будущих версиях JavaScript (некоторые из них уже работают в вашем браузере сегодня). ⏱Читать статью

Интерактивные метки на изображении JS #почитать Хочу поделиться своим скриптом, который позволяет создавать адаптивные изображения с интерактивными метками. Скрипт по умолчанию поддерживает до 50 меток на изображении. ⏱Читать статью

Резервные значения пользовательских свойств CSS #почитать Браузер не знает, является ли значение CSS переменной валидным, пока переменная не будет разрешена, а к тому времени её обработает каскад и отбросит возможные резервные значения. ⏱Читать статью

юзабилист