На этой неделе я очень обрадовался, когда наконец-то использовал :has. Проблема с ним заключалась в поддержке браузерами, которая пока недостаточно высока, чтобы использовать его в производственном коде. В частности, в Firefox его не будет до 121 версии (наконец-то!), а это мой любимый браузер...

Но на этой неделе у меня появился повод им воспользоваться. Это было связано с тем, что это всего лишь эстетическое изменение, поэтому не имеет значения, если оно не будет работать для людей на старых браузерах. А также потому, что проект, в котором я его использую, не будет запущен в течение нескольких месяцев, и к тому времени он будет работать в гораздо большем количестве браузеров.

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

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

Я покажу вам, как это сделать без использования JavaScript, а затем мы добавим немного JavaScript, чтобы сделать его еще лучше.

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

Вот несколько уникальных примеров использования HTML, включающих различные элементы и атрибуты:

SVG-интеграция:

• Объединение HTML с SVG для создания масштабируемой векторной графики.

Как фронтенд-разработчик, я всегда нахожусь в поиске инструментов и фреймворков, которые могут облегчить мне жизнь и сделать мой код более эффективным. Одним из таких инструментов, который произвел настоящую революцию в моем рабочем процессе, является Tailwind CSS.

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

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

Ранее мы уже создавали учебные пособия по этой теме, например, по анимации "водопада" карточек при прокрутке или по градиентному раскрытию текста. Сегодня мы добавим к этому списку еще один пример: изменение цвета фона страницы при прокрутке.

Этот эффект позволит придать дизайну динамичность и сделать каждый раздел уникальным.

Часть 1. Правильный образ устройства

Адаптивный веб-дизайн (RWD) имеет важное значение в современном мире с множеством устройств. Ключевой задачей в RWD является выбор и загрузка изображения правильного размера в зависимости от размера экрана устройства. Это обеспечивает как качество изображения, так и производительность веб-сайта.

Для этого урока мы вдохновились красивой моделью ручки, созданной Джеем Томпкинсом, в которой при прокрутке из темноты появляется участок, состоящий из текста. Джей показал, как использовать свойство background-clip и анимацию, управляемую прокруткой, для создания эффекта градиентного раскрытия текста.

Однако на момент написания статьи эта техника работает только в Chrome и Edge, поскольку свойство animation-timeline: scroll() пока не поддерживается в других браузерах. По этой причине - а также для того, чтобы иметь больше возможностей для контроля над анимацией, - мы воссоздали подобный эффект с помощью JavaScript и Tailwind CSS.

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

Когда браузер запрашивает веб-страницу, он сначала получает HTML-документ. Браузер разбирает этот документ, и если в нем встречается внешний файл, то браузер посылает еще один запрос на его получение. Например, представьте, что у вас есть сайт со следующей структурой:

Я изучаю веб-компоненты в рамках курса Роба Айзенберга "Разработка веб-компонентов" и решил, что мне стоит изложить свои знания в письменном виде. Итак, здесь представлен очень простой веб-компонент, демонстрирующий некоторые фундаментальные характеристики веб-компонентов, которые мы будем развивать в будущем (я прошел всего несколько уроков, а впереди еще очень много).