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

Декодирование CSS селекторов: :has(:not) и :not(:has) #почитать При комбинировании CSS функций вложенность функций имеет значение. В статье мы рассмотрим разницу между :has(:not) и :not(:has), а также то, как подходить к декодированию CSS селекторов, использующих эти вложенные CSS функции. ⏱Читать статью

Правило @import в CSS: модульность и организация стилей #почитать Если вы только начинаете свой путь в веб-разработке, то наверняка уже столкнулись с необходимостью писать CSS-код так, чтобы он был понятным, организованным и легко поддерживаемым. Представьте, что у вас есть проект с десятками компонентов, и все стили свалены в один огромный файл. Кошмар, правда? Вот тут на сцену выходит правило @import в CSS, которое позволяет загружать стили из других файлов, делая ваш код модульным и структурированным. В этой статье мы разберём, как работает @import, его историю, особенности использования и почему оно до сих пор актуально в 2025 году. ⏱Читать статью

Всё, что вы хотели знать, но стеснялись спросить о кастомных курсорах в CSS #почитать Курсоры могут сделать сайт как гораздо удобнее, так и намного хуже. В этой статье обсудим встроенные курсоры CSS и посмотрим, как с помощью CSS (и немножко — с JavaScript) создавать кастомные курсоры, чтобы ваш сайт лучше запоминался пользователям. Также сравним плюсы и минусы применения CSS и JavaScript для создания кастомных курсоров. Обсудим, когда стоит отказаться от курсоров по умолчанию и как учитывать потребности пользователей с ограниченными возможностями. Чтобы во всё это вникнуть, вам понадобятся базовые представления об HTML, CSS и JavaScript. ⏱Читать статью

CSS Scroll-Driven Animations: что это, зачем нужно и как начать пользоваться #почитать Раньше, чтобы анимировать что-то при прокрутке, приходилось писать JavaScript. Слушать события scroll, вычислять позиции элементов, руками задавать стили. Это было сложно и работало неэффективно. Но в 2025 в CSS появилась нормальная нативная поддержка скролл-анимаций. Частичная поддержка есть в Chrome 115+, Edge 115+ и Opera 117+, с флагами — в Firefox 110+. Ждём ещё Safari. ⏱Читать статью

Инкапсуляция UI на примере чат-виджета #почитать В рамках платформенного стрима мы занимаемся разработкой и развитием платформы для создания своих чат‑ботов. Cделать хорошего и полезного бота временами бывает сложно, поэтому для помощи разработчикам мы создаем инструменты, которые помогают ускорить разработку и упростить работу с ботами. В этой статье я расскажу, как реализовать изолированный UI, грамотно организовать код на примере виджета чата, и какие проблемы могут возникнуть в процессе разработки. В мире разработки, как и в жизни, мы постоянно балансируем между сотрудничеством и самостоятельностью: каждый компонент системы, как человек в обществе, хочет быть особенным и уникальным, но при этом быть готовым к сотрудничеству с другими. Мы исследуем технический подход, который помогает применить эту философию на практике: как создать программный элемент, который будет самостоятелен, но в то же время будет хорошо взаимодействовать с остальной системой. ⏱Читать статью

LGTM, approved ✅

Как красиво признаться в любви не покупая цветы и конфетки с плюшевым мишкой на память, используя чистый HTML и CSS с JS #почитать Хочу поделиться идеей, как сделать признание в любви особенным, запоминающимся и искренним, не прибегая к классическим цветам или банальным текстам в телеграме/вацапе на миллиард строк. Я расскажу про интерактивный веб-сайтик, который можно создать своими руками, чтобы передать свои чувства. Это не просто слова, а целая история, которая разворачивается на экране, погружая человека в атмосферу тепла и эмоций. Код, который я приложил, пример такого проекта, и сейчас я объясню, как он работает и почему это может стать идеальным способом признаться в любви. ⏱Читать статью

События keydown и keyup в JavaScript: управление клавиатурой #почитать Когда вы создаёте интерактивные веб-приложения, взаимодействие с клавиатурой пользователя становится важной частью. Хотите, чтобы ваш сайт реагировал на нажатие клавиши Enter для отправки формы? Или, может, мечтаете сделать простую браузерную игру, где персонаж движется при нажатии стрелок? Для этого в JavaScript есть события keydown и keyup. Они позволяют отслеживать, когда пользователь нажимает или отпускает клавишу. В этой статье мы разберём, как работают эти события, их историю, особенности и как безопасно использовать их в 2025 году. ⏱Читать статью

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

Красим посещённые ссылки: псевдоклассы :link, :visited и :any-link #почитать Когда вы создаёте веб-страницу, ссылки — один из ключевых элементов интерфейса. Они помогают пользователям перемещаться по сайту или переходить на внешние ресурсы. Но как сделать так, чтобы пользователь сразу понял, какие ссылки он уже посещал, а какие — нет? На помощь приходят псевдоклассы CSS :link, :visited и :any-link. Эти инструменты позволяют стилизовать ссылки в зависимости от их состояния, улучшая навигацию и пользовательский опыт. В этой статье мы разберём, как они работают, их историю, особенности и как безопасно использовать их в 2025 году. Псевдоклассы :link и :visited существуют с самого зарождения CSS, появившись в спецификации CSS1 в 1996 году. Тогда веб был преимущественно текстовым, и ссылки играли центральную роль в навигации. Разработчики хотели, чтобы пользователи могли визуально отличать непосещённые ссылки от тех, на которые они уже кликали. :link отвечал за стилизацию непосещённых ссылок, а :visited — посещённых, основываясь на истории браузера. Псевдокласс :any-link появился значительно позже, в спецификации CSS Selectors Level 4, чтобы упростить стилизацию ссылок независимо от их состояния (посещённые или нет). Он стал частью стандарта в 2022 году и быстро получил поддержку в браузерах. Эти псевдоклассы остаются важной частью веб-разработки, помогая создавать интуитивно понятные интерфейсы. ⏱Читать статью

🪐 Новые вакансии фронтендеров 🚀 Frontend-разработчик в ДТ-Софт, 230 000 - 310 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/frontend-razrabotchik-dt-soft-f382489d 🚀 Frontend-разработчик в Алабуга.Политех, oт 150 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/frontend-razrabotchik-alabugapoliteh-6b3633d0 🚀 Frontend-разработчик в OQTACORE, oт 80 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/frontend-razrabotchik-oqtacore-e80afb43 🚀 Frontend Developer в Vital Partners, 600 000 - 800 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/frontend-developer-vital-partners-a2f24c92 🚀 Frontend-разработчик в Placebo/25, 110 000 - 150 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/frontend-razrabotchik-placebo25-2e5b0ca6 🚀 Junior frontend-разработчик (Vue.js), 60 000 - 155 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/junior-frontend-razrabotchik-vuejs-nda-9c5ebd30 🚀 Фронтенд-разработчик в Гуддело, oт 35 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/frontend-razrabotchik-guddelo-cd81dfd9 🚀 Фронтенд-разработчик в Data World, до 200 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/frontend-razrabotchik-data-world-ad1d66b9 🚀 Фронтенд-разработчик в Продуктовая лаборатория Mish, 160 000 - 250 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/frontend-razrabotchik-produktovaya-laboratoriya-mish-e457265f 🚀 Fullstack Developer (React/Java) в Транслогика, 200 000 - 230 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/fullstack-developer-reactjava-translogika-0cf0dc4f Больше вакансий здесь ⤵️ https://jobrocket.ru/?categories=frontend

Автоматический подбор браузером контрастного цвета в CSS #почитать Вам когда-нибудь хотелось, чтобы можно было написать простой CSS для объявления цвета, после чего браузер сам бы определял, чёрный или белый должен сочетаться с этим цветом? Теперь это возможно благодаря contrast-color(). В статье мы объясним, как это работает. Представьте, что вы разрабатываете веб-сайт или веб-приложение, и в дизайне требуется куча кнопок с разными цветами фона. Для обработки цвета фона можно создать переменную --button-color, а затем присваивать ей разные значения. Иногда фон кнопки будет тёмным цветом, а текст кнопки должен быть белым для создания контрастности. В других случаях фон светлее, поэтому текст должен быть чёрным. ⏱Читать статью

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

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

Использование currentColor #почитать Нужен ли currentColor? Не совсем, лучше использовать CSS переменные. Однако он всё равно имеет свою ценность, и об этом стоит поговорить. ⏱Читать статью

Функция `cubic-bezier()` в CSS для плавных анимаций #почитать Когда вы задаёте анимацию или переход в CSS, свойства изменяются неравномерно: сначала медленно, потом быстрее, в конце снова замедляются. Это поведение называется интерполяцией и определяется так называемой функцией ускорения (или «easing function»). По умолчанию браузеры используют значения вроде ease, ease-in, ease-out и linear. Но если вам нужно больше контроля над тем, как именно свойство изменяется во времени, пригодится функция cubic-bezier(). Эта функция позволяет задать собственную кривую ускорения с помощью четырёх чисел — координат двух управляющих точек Безье. Эти значения описывают, как «разгоняется» и «тормозит» анимация. cubic-bezier() поддерживается всеми современными браузерами с 29 января 2018 года (Baseline: Widely Available), так что её можно спокойно использовать в продакшене. ⏱Читать статью

7 хаков HTML: нестандартные решения в истории гипертекстовой разметки #почитать Сегодня мы решили вспомнить, как раньше веб-мастера обходили ограничения разметки. История веб-разработки полна креативных находок — технологии не всегда успевали за фантазией пользователей. На заре девяностых, чтобы выделиться на фоне конкурентов, веб-разработчики искали творческие решения. Собрали подборку из 7 популярных приемов и подходов, которые использовали веб-мастера, чтобы выйти за пределы ограничений HTML. Раньше возможности для создания первых сайтов были предельно ограничены: стандартные шрифты, минимум графики и полотна текста. Недостаток инструментов компенсировали изобретательностью. Она позволяла решать, казалось бы, невозможные задачи. Вспоминаем самые популярные из них. ⏱Читать статью

Проверка поддержки форматов в ClipboardItem.supports() #почитать Метод ClipboardItem.supports() — это современный способ проверить, поддерживает ли браузер запись данных определённого типа в буфер обмена. Он появился совсем недавно: доступен в Baseline в статусе «Newly Available» с 31 марта 2025 года. Это значит, что пока его можно использовать только в современных браузерах, и нужно внимательно проверять совместимость. ⏱Читать статью

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation) #почитать Мне понравился вид серии планет, которую я создал для другого личного проекта, и я решил использовать их на своем новом сайте. Частью этого было также повторное использование анимации, которую я создал примерно в 2019 году, где луна вращалась вокруг планеты. Изначально я просто вставил анимацию на новый сайт, изменив только единицы измерения (emединицы измерения на единицы измерения в области просмотра с помощью сложной математики, которой я очень, очень гордился), чтобы они правильно масштабировались, потому что я... эффективен со своим временем. Однако на мобильных устройствах планета перемещалась на несколько пикселей вверх и на несколько пикселей вниз, когда луны вращались вокруг нее. Я заподозрил, что виной этому была вставная анимация (это не так, но, по крайней мере, я получил оптимизированную анимацию и статью). ⏱Читать статью

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