🎨 50 оттенков... - Интерактивная палитра цветов, для реализации которой понадобится CSS и JavaScript.

Переключатели цвета с анимацией перехода между двумя выбранными цветами. Код основан на JavaScript и не использует сторонних фреймворков или библиотек.

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

Ключевые компоненты и функциональность кода:

1. Классы ColorElement и ColorElementInput:
Они представляют элементы цвета и текстовые поля выбора цвета соответственно. Классы обновляют значение цвета элементов и отображают его на странице с помощью CSS-свойств.

2. Класс DragSpaceDetector:
Позволяет пользователю перетаскивать целевой цвет (последний элемент переключателя) и изменять количество промежуточных цветов, отображаемых в переключателе.

3. Класс TransitionColorPicker:
Он объединяет предыдущие классы и управляет созданием переключателей цвета. Класс обновляет промежуточные цвета в зависимости от количества и отображает их в контейнере. При выборе нового цвета контейнер с промежуточными цветами очищается, и затем обновляется с новым количеством промежуточных цветов, создавая плавные переходы между начальным и конечным цветами.

4. Метод Array.from(document.querySelectorAll('.transition-color-picker')).map(...):
Этот метод ищет все элементы с классом "transition-color-picker" на странице и для каждого элемента создает объект TransitionColorPicker, активируя переключатели цвета на странице.

Таким образом, код является отличным примером интерактивных переключателей цвета и может помочь разобраться в различных аспектах разработки веб-приложений, особенно в работе с DOM, обработке событий, создании пользовательских интерфейсов и анимации.


https://codepen.io/tahazsh/pen/zYMwEXp

@javascriptv

🖥 Релиз MeteorJS 3.0

meteor update --release 3.0-rc.0
meteor reset

Над данным релизом работа началась примерно в середине 2021 года (обсуждение на github). Основной целью было избавиться от Fibers, т.к. это мешало обновить версию NodeJS до стабильной. Да, метеор был привязан к версии NodeJS 14 последние 3 года!

Что нового?
— Обновили документацию;

— Вместо Fibers теперь используются async методы;

— Вся работа с БД осуществляется через асинхронное API;

— Методы стали асинхронными;

— NodeJS обновлена до 20;

— Добавлена поддержка ARM на Linux;

— Обновлено много пакетов, чтобы поддержать асинхронное API.

Для релиза было сделано 160 задач

🖥 GitHub

@javascriptv

🖥 Релиз PeerTube 6.2, реализованного на AngularJS

16 июля 2024 года состоялся релиз новой стабильной версии открытого пирингового видеохостинга PeerTube 6.2.

Проект PeerTube — это стриминговая платформа на своём хостинге с поддержкой P2P (использует сеть распространения контента на базе P2P-коммуникаций и связывания между собой браузеров посетителей) для альтернативы YouTube, Dailymotion, Vimeo и Twitch. Разработчиком PeerTube является французская некоммерческая организация Framasoft.

Чтобы выложить видеоролик в PeerTube для всеобщего просмотра, нужно поднять у себя на компьютере инстанс PeerTube. Доступен официальный контейнер Docker. Коммуникация с другими серверами в PeerTube осуществляется по ActivityPub, что позволяет пользователям подписываться на каналы из других инстансов, а также серверов с поддержкой Mastodon, Pleroma и ActivityPub.

В настоящее время в децентрализованной системе PeerTube доступны более тысячи инстансов, а также работает поисковая система Sepia Search.

🖥 PeerTube 6.2 опубликован на GitHub под лицензией AGPLv3.
🟡 Доки

@javascriptv

🖥 Простая JS-библиотека для создания области для рисования

— npm install --save atrament

Atrament — это библиотека JavaScript для рисования и рукописного ввода на HTML-холсте.
Цель Atrament — сделать так, чтобы рисование было естественным и комфортным, а результат — плавным и приятным.

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

🖥 GitHub

@javascriptv

👾 Sturdy-Doodle

это красивый веб-сайт портфолио с открытым исходным кодом, созданный с использованием HTML, CSS и JavaScript. Его можно адаптировать под собственные нужды.

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

Основной код написан на JavaScript, с дополнительными компонентами на HTML, CSS, PLSQL и GDScript.

▪ Github

@javascriptv