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

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

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

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

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

👉 @frontend_1

Создаем dropzone с помощью HTML, CSS и JavaScript 🚀

https://github.com/atherosai/ui/tree/main/dropzone-03

👉 @frontend_1

Как проверить, что страница открыта из кэша Edge Cache на Vercel

👉 @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));
}

👉 @frontend_1

Совет по CSS! ✨

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

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

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

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

👉 @frontend_1

Совет по CSS 💡

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

👉 @frontend_1

Layout vs Template в Next.js

👉 @frontend_1

Создаем галерею с красивым эффектом наведения, используя только HTML и CSS 👨‍💻

https://github.com/atherosai/ui/tree/main/gallery-02

👉 @frontend_1

Создайте форму входа в систему с помощью HTML и CSS 🚀

https://github.com/atherosai/ui/tree/main/login-04

👉 @frontend_1

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

👉 @frontend_1

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

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

👉 @frontend_1

Подборка Telegram каналов для программистов

Системное администрирование 📌
https://yangx.top/tipsysdmin Типичный Сисадмин (фото железа, было/стало)
https://yangx.top/sysadminof Книги для админов, полезные материалы
https://yangx.top/i_odmin Все для системного администратора
https://yangx.top/i_odmin_book Библиотека Системного Администратора
https://yangx.top/i_odmin_chat Чат системных администраторов
https://yangx.top/i_DevOps DevOps: Пишем о Docker, Kubernetes и др.
https://yangx.top/sysadminoff Новости Линукс Linux


https://yangx.top/tikon_1 Новости высоких технологий, науки и техники💡
https://yangx.top/mir_teh Мир технологий (Technology World)

https://yangx.top/rust_lib Полезный контент по программированию на Rust
https://yangx.top/golang_lib Библиотека Go (Golang) разработчика

https://yangx.top/itmozg Программисты, дизайнеры, новости из мира IT.
https://yangx.top/phis_mat Обучающие видео, книги по Физике и Математике

https://yangx.top/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻
https://yangx.top/nodejs_lib Подборки по Node js и все что с ним связано
https://yangx.top/ruby_lib Библиотека Ruby программиста

1C разработка 📌
https://yangx.top/odin1C_rus Cтатьи, курсы, советы, шаблоны кода 1С

Программирование C++📌
https://yangx.top/cpp_lib Библиотека C/C++ разработчика
https://yangx.top/cpp_knigi Книги для программистов C/C++
https://yangx.top/cpp_geek Учим C/C++ на примерах

Программирование Python 📌
https://yangx.top/pythonofff Python академия. Учи Python быстро и легко🐍
https://yangx.top/BookPython Библиотека Python разработчика
https://yangx.top/python_real Python подборки на русском и английском
https://yangx.top/python_360 Книги по Python Rus

Java разработка 📌
https://yangx.top/BookJava Библиотека Java разработчика
https://yangx.top/java_360 Книги по Java Rus
https://yangx.top/java_geek Учим Java на примерах

GitHub Сообщество 📌
https://yangx.top/Githublib Интересное из GitHub

Базы данных (Data Base) 📌
https://yangx.top/database_info Все про базы данных

Мобильная разработка: iOS, Android 📌
https://yangx.top/developer_mobila Мобильная разработка
https://yangx.top/kotlin_lib Подборки полезного материала по Kotlin

Фронтенд разработка 📌
https://yangx.top/frontend_1 Подборки для frontend разработчиков
https://yangx.top/frontend_sovet Frontend советы, примеры и практика!
https://yangx.top/React_lib Подборки по React js и все что с ним связано

Разработка игр 📌
https://yangx.top/game_devv Все о разработке игр

Вакансии 📌
https://yangx.top/sysadmin_rabota Системный Администратор
https://yangx.top/progjob Вакансии в IT

Чат программистов📌
https://yangx.top/developers_ru

Библиотеки 📌
https://yangx.top/book_for_dev Книги для программистов Rus
https://yangx.top/programmist_of Книги по программированию
https://yangx.top/proglb Библиотека программиста
https://yangx.top/bfbook Книги для программистов
https://yangx.top/books_reserv Книги для программистов

БигДата, машинное обучение 📌
https://yangx.top/bigdata_1 Data Science, Big Data, Machine Learning, Deep Learning

Программирование 📌
https://yangx.top/bookflow Лекции, видеоуроки, доклады с IT конференций
https://yangx.top/coddy_academy Полезные советы по программированию

QA, тестирование 📌
https://yangx.top/testlab_qa Библиотека тестировщика

Шутки программистов 📌
https://yangx.top/itumor Шутки программистов

Защита, взлом, безопасность 📌
https://yangx.top/thehaking Канал о кибербезопасности
https://yangx.top/xakep_1 Статьи из "Хакера"

Книги, статьи для дизайнеров 📌
https://yangx.top/ux_web Статьи, книги для дизайнеров

Английский 📌
https://yangx.top/UchuEnglish Английский с нуля

Математика 📌
https://yangx.top/Pomatematike Канал по математике

Excel лайфхак📌
https://yangx.top/Excel_lifehack

Создание навигации по боковой панели с помощью HTML, CSS и JavaScript 🚀

https://github.com/atherosai/ui/tree/main/sidebar-10

👉 @frontend_1

Совет по Javascript 💡

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

👉 @frontend_1

Создание отзывчивого нижнего колонтитула с помощью HTML и CSS 🚀

https://github.com/atherosai/ui/tree/main/footer-06

👉 @frontend_1

Все в одном CSS-чите 💪

👉 @frontend_1

Используйте сгенерированный CSS clip-path, чтобы получить более тонкую форму 🤙

.squircle {
clip-path: polygon(
100.00% 50.00%, 99.95% 62.53%, 99.80% 67.70%, ...
);
}

👉 @frontend_1

Совет по производительности веб-приложений 💡

Используйте изображения в формате WebP для повышения производительности ✅

👉 @frontend_1

Совет по Javascript 💡

Если вы имеете дело с фреймворками, делающими ставку на неизменяемые структуры данных (*cough* React), и вам нужно изменить записи в массиве, `with` станет вашим лучшим другом!

👉 @frontend_1

Совет по CSS 💡

Пользовательский Range Slider с всплывающей подсказкой

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

https://codepen.io/t_afif/pen/vYweZQa

👉 @frontend_1