Используйте тригонометрические функции в CSS для создания плавной ступенчатой задержки перехода:

.character {
  transition-delay:
    calc(sin((var(--index) / 12) * 45deg) * 0.475s);
}

➡️ @tips_frontend

Раскрывающийся список без использования Javascript: HTML-теги <details> и <summary> в действии

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

➡️ @tips_frontend

AbortSignal.timeout() в действии: на заметку фронтенд-разработчику

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

➡️ @tips_frontend

Самый простой способ вертикального центрирования контента в макете блока: на заметку фронтенд-разработчику

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

➡️ @tips_frontend

Для повышения производительности загружайте изображения в зависимости от размера области просмотра, используя атрибуты srcset и size HTML-элемента img.

➡️ @tips_frontend

HTML-элемент <progress> в действии: на заметку фронтенд-разработчику

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

➡️ @tips_frontend

Range media queries в CSS: на заметку фронтенд-разработчику

➡️ @tips_frontend

Простой способ определения наличия в массиве повторяющихся элементов

➡️ @tips_frontend

Новый способ замены элемента в массиве

Актуальные версии всех браузеров поддерживают метод with(index, value) для создания копии массива с заменой одного элемента.

➡️ @tips_frontend

Slice vs Splice в JavaScript: на заметку фронтенд-разработчику

➡️ @tips_frontend

Псевдоэлемент ::marker в действии, или Как легко изменить стиль маркера/номера списка с помощью CSS

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

➡️ @tips_frontend

Мини-шпаргалка по значениям атрибута type HTML-тега <input>, задача которого — сообщать браузеру, к какому типу относится элемент формы.

➡️ @tips_frontend

Возможно, вы не знали об этом способе одновременного удаления нескольких event listeners с помощью AbortController. Поиграть можно здесь.

➡️ @tips_frontend

Шпаргалка по методам JavaScript DOM: на заметку фронтенд-разработчику.

➡️ @tips_frontend

Когда вы устанавливаете точку останова, вы можете сделать ее условной на основе результата выражения. Просто выберите Add Conditional Breakpoint и введите свое выражение.

➡️ @tips_frontend

4 простых шага для создания градиентной закругленной рамки с помощью CSS.

➡️ @tips_frontend

Простая альтернатива console.log() для отладки: на заметку фронтенд-разрабочику.

➡️ @tips_frontend

👋Как повысить скорость работы веб-приложения: советы для фронтенд-разработчика

⬅️ Источник

➡️ @tips_frontend