🎨Что, если бы мы сказали вам, что для создания графики вроде градиентов или эффекта дождя, может потребоваться всего несколько строк кода? Добро пожаловать в мир шейдеров!

👀 Перед вами крутой интерактивный гайд о том, как устроены шейдеры на уровне математики/кода и как применять их в вебе для создания визуальных эффектов.

⚒ Как использовать html-элемент <dialog>: гайд для фронтенд-разработчика

🤔 Размышления на тему того, почему хорошая нативная реализация подобных компонентов будет лучше, чем альтернативное решение на JS, даже если оно учитывает все требования к работе компонента.

💬 Если в вашем проекте какой-то функционал уже реализован на JavaScript, при наличии/появлении нативных HTML-элементов вы проведете рефакторинг?

🔘SVG viewBox: гайд для фронтенд-разработчика

Творческий туториал с интерактивными примерами, который объясняет, как использовать атрибут viewBox в SVG.

📌 Что внутри:

☑️ SVG как уникальный формат изображения и преимущества производительности
☑️ Встраивание SVG
☑️ Использование и анимация viewBox, манипуляции с viewBox
☑️ Учет масштабирования обводки

💡 Вы можете создавать микровзаимодействия, управляемые прокруткой, с помощью animation-timeline и кастомных свойств.

.search {
    animation: shrink;
    animation-timeline: scroll();
    animation-range: 0 calc(var(--header-height) * 0.5);
}
@keyframes shrink {
    to { width: calc(100% - var(--button-size)); }
}

Переменная --header-height используется для определения высоты контейнера заголовка. Вы можете использовать это для animation-range, применяемого в различных анимациях прокрутки 🤙

В качестве другого примера, вы можете анимировать появление тени (box-shadow) на заголовке, как только поиск зафиксирован 🍡

header {
      animation: shadow;
      animation-timeline: scroll();
      animation-range:
          var(--header-height)
          calc(var(--header-height) * 1.5);
}
@keyframes shadow {
    to { box-shadow: 0 5px 10px hsl(0 0% 0%); }
}

Все это работает на основе scroll() в animation-timeline, который подключается к прокрутке страницы. И затем используя --header-height в различных animation-range ✨

Вы можете нажать на выглядывающего медведя, чтобы прокрутить страницу вверх:

<a href="#">Back to top</a>

CSS :focus-within используется для активации плавной прокрутки только для этого взаимодействия.

html:focus-within {
    scroll-behavior: smooth;
}

➡️ Поиграть можно здесь

#css #tip by Jhey

👀67 странных приемов отладки, о которых ваш браузер не хочет, чтобы вы знали

🤩Подборка полезных, но неочевидных приемов, которые помогут максимально эффективно использовать отладчик вашего браузера.

📌Не самый свежий гайд, но он достоин того, чтобы остаться в ваших закладках.

👉 Читать

💭Какой JavaScript фреймворк или библиотеку вы бы посоветовали новичку-фронтендеру для изучения, который знаком с HTML/CSS и кодит на чистом JavaScript?

#холивар