🔥Direction-aware 3D hover effect (Concept)

Трехмерный эффект наведения с учетом направления (концепция). Реализовано с помощью JavaScript и CSS.

#анимация #css #js

https://codepen.io/noeldelgado/pen/nweYMz

@javascriptv

✔️ Создание веб-компонентов с помощью WebC на vanilla JavaScript

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

Веб-компоненты решают проблему инкапсуляции, позволяя вам ограничить влияние вашего кода CSS и JavaScript областью действия вашего компонента.

Конечно, популярные фреймворки JavaScript, такие как React и Angular, помогают вам достичь аналогичных эффектов инкапсуляции. Итак, что же делает веб-компоненты особенными? Этот вопрос подводит нас ко второму преимуществу: веб-компоненты не зависят от библиотек, и вы можете создавать их, используя только встроенные API JavaScript.

Независимый от библиотек характер веб-компонентов особенно полезен при разработке библиотеки компонентов пользовательского интерфейса. В отличие от других библиотек, созданных для конкретных фреймворков, вы можете использовать веб-компоненты для создания библиотеки, которая не связана с одним технологическим стеком. Это означает, что любой может использовать его, независимо от фреймворка JavaScript, который он использует для своего проекта.

▪Читать дальше

@javascriptv

💡 GitHub Dark Mode Toggle — элегантный переключатель тёмной темы.

https://codepen.io/milanraring/pen/qBEPzKB

#js #css

@javascriptv

API Яндекс.Карты – геокодирование и маршрутизация на JavaScript

Предположим, что перед пользователем стоит задача обработать большой список адресов/координат, а именно, посчитать расстояния между точками по автомобильным дорогам и определить координаты внушительного списка объектов.

Тогда-то он и столкнется с отсутствием возможности пакетной обработки в пользовательском интерфейсе сервиса. Однако, Яндекс об этом позаботился, предоставив в условно-бесплатное пользование JavaScript API.

▪ Читать дальше

@javascriptv

Пикачу в коробке

Пикачу в коробке отрисован и анимирован с помощью чисто CSS. Отдельные элементы графики сделаны с помощью DIV’ов и затем стилизованы.

Чтобы запустить анимацию нужно нажать на верх коробки и потянуть курсов в сторону. Попробуйте сами. Там же вы найдёте код проекта:

https://codepen.io/maxi83c/pen/JjOZdWX

@javascriptv

🗺 Дорожная карта для изучения React в 2023 году.

Содержание этой статьи:

▪Введение в React
▪React vs другие фреймворки
▪Необходимые навыки
▪Полезные советы для изучения
▪Процесс онлайн-обучения
▪RoadMap для изучения React
▪Почему следует изучать React?
▪Проблемы во время обучения


📌 Читать

@javascriptv