Интерактивное объяснение CSS calc()

📲 Мы в MAX

👉 @frontend_1

Совет по CSS 💡

Несмотря на некоторые ограничения в отдельных браузерах, мы можем изменять размеры любого блочного элемента, а не только textarea!

📲 Мы в MAX

👉 @frontend_1

Spectral.js - это библиотека для смешивания красок, использующая теорию Кубелки-Мунка.

Используя возможности теории Кубелки-Мунка, надежной научной модели, имитирующей взаимодействие света с краской, Spectral.js гарантирует, что ваши проекты будут иметь яркие и реалистичные цвета.

Благодаря использованию 7 различных спектральных каналов, включая белый, голубой, пурпурный, желтый, красный, зеленый и синий, Spectral.js может быть эффективно использован в различных веб-проектах, таких как:

Веб-дизайн: Насыщайте свои веб-дизайны реалистичными цветовыми палитрами благодаря способности Spectral.js к реалистичному смешиванию цветов.
Графика: Повысьте качество графики, используя реалистичное смешивание цветов, которое точно отражает взаимодействие света с различными оттенками.
Генеративное искусство: Создавайте захватывающее генеративное искусство, используя мощные возможности смешивания цветов Spectral.js, в результате чего получаются визуально ошеломляющие и динамичные творения.
Воспользуйтесь гибкостью и точностью, которые предлагает Spectral.js, и преобразуйте свои проекты с помощью обширной и яркой цветовой палитры, имитирующей реальное взаимодействие цветов.

https://github.com/rvanwijnen/spectral.js

📲 Мы в MAX

👉 @frontend_1

Один цвет для светлого, другой для темного? 🌗

Используйте CSS light-dark в сочетании с color-scheme 🤙.

[data-theme=light] { color-scheme: light; }
[data-theme=dark] { color-scheme: dark; }
h1 {
color: light-dark(var(--red), var(--orange));
}

📲 Мы в MAX

👉 @frontend_1

Совет по CSS! ✨

Вы можете сделать стили компонентов портативными с помощью контейнерных запросов 😎

Изменение макета карты в зависимости от размера 🔥
Удаление текста кнопки, если она маленькая 🤏

.card {container-type: inline-size;}
@ container (min-width: 50ch) {.info { grid-column: 2; }}

https://codepen.io/jh3y/pen/JjZavRJ

📲 Мы в MAX

👉 @frontend_1

Совет по CSS 💡

Возможно, вы не знаете об этом новом и самом простом способе вертикального центрирования содержимого в box layout

📲 Мы в MAX

👉 @frontend_1

Layout vs Template в Next.js

📲 Мы в MAX

👉 @frontend_1

Метаданные в Next.js (статические и динамические)

📲 Мы в MAX

👉 @frontend_1

Генератор паролей на тему хакеров с использованием HTML, CSS и JavaScript 🚀

https://learning.atheros.ai/ui-components/password-checker-12

📲 Мы в MAX

👉 @frontend_1

Отзывчивый инвертированный раскрывающийся скроллер с CSS 🤙

img {
position: fixed;
animation: clip;
animation-timeline: --section;
animation-range: exit;
}
@​keyframes clip { to { clip-path: inset(100% 0 0 0); }

📲 Мы в MAX

👉 @frontend_1

Совет по Javascript 💡

Возможно, вы не знаете об этом простейшем способе таймаута запроса на выборку.

📲 Мы в MAX

👉 @frontend_1

Совет по Javascript 💡

Знаете ли вы, почему мы не можем создавать новые инстансы из arrow function?

📲 Мы в MAX

👉 @frontend_1

Совет по CSS 💡

:user-invalid

📲 Мы в MAX

👉 @frontend_1