Javascript

🖥 CSS conic-gradient blur — использование фильтра фона и конического градиента для создания 4-цветного элемента с размытием для области градиента. Элемент реализован с помощью CSS и JavaScript.

https://codepen.io/apchnk/pen/KKBPeWN

@javascriptv

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

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

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


📌 Читать

@javascriptv

🖥 Quickchat UI Themes

Адаптивная панель управления с темой пользовательского интерфейса Quickchat. Реализована с помощью JavaScript.

#ui #панельуправления #javascript

@javascriptv

🖥 Как создать планировщик по управлению недвижимостью с помощью Bryntum и ванильного JavaScript

Компонент Bryntum Scheduler  — это виджет управления ресурсами на JavaScript, который используется для того, чтобы вести сложные графики.

Он обладает обширным функционалом и высокой производительностью. Вы можете настроить этот компонент в соответствии со своими потребностями.

▪Статья
▪Bryntum Scheduler

@javascriptv

✅️ 3D-эффект перехода между элементами

В этом проекте интересным образом реализован эффект перехода между элементами. Так, например, вы можете, просматривая изображения в галереи, узнать подробности или описание, наведя на изображение. При этом, если до этого курсор был на другой карточке, то возникнет эффект «перекатывания кубика».

Посмотреть код и поиграть с эффектом можно тут:

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

@javascriptv

🖥 Grid Items Share Background — сетка с анимированными блоками, выполненная с помощью SCSS и JavaScript.

https://codepen.io/noahraskin/pen/JjrydbL

@javascriptv

🔥 1000 бесплатных онлайн-курсов по программированию, актуальные в 2023 году.

Двенадцать лет назад такие университеты, как Стэнфорд и Массачусетский технологический институт, открыли для публики бесплатные онлайн-курсы. Сегодня более 1200 школ по всему миру создали тысячи бесплатных онлайн-курсов.

Чтобы поприветствовать новый год, я составил этот список из 1000+ таких бесплатных онлайн-курсов, которые вы можете начать прямо сейчас.

Для этого я перебрал базу данных Class Central, содержащую более 100 000 онлайн-курсов. Если в каталог были оценки курсов, я включил их средний рейтинг. Это самый большой каталог курсов доступных в сети.

📌 Сохраняте себе и отправляйте коллегам, чтобы не потерять.

⏩ Cписок

@javascriptv

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

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

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

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

@javascriptv

🖥 Profile Card UI — карточка профиля, реализованная с помощью SCSS и JavaScript. Красивая анимация, котору стоит попробовать.

https://codepen.io/team/jotform/pen/XWmqoMp

@javascriptv

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

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

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

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

@javascriptv

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

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

#js #css

@javascriptv

✅ Генератор рисунков, выполненный с помощью SVG, CSS и библиотеки GSAP.js. Хороший проект для практики.

https://codepen.io/cassie-codes/pen/vYerjmr

@javascriptv

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

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

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

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

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

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

@javascriptv

⭐ 3D Futuristic Room | Pure CSS — 3D комната, созданная с помощью Pug, SCSS и JavaScript. Красивый и интресный для изучения проект.

https://codepen.io/ricardoolivaalonso/pen/LYzwGyW

@javascriptv

🔥Direction-aware 3D hover effect (Concept)

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

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

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

@javascriptv

🖥 Самые популярные проекты JavaScript в 2023 году.

Недавно “Best of JS” официально объявили список лучших проектов JavaScript 2023 года. В нём представлен обзор трендовых проектов в экосистеме JavaScript за последние 12 месяцев!

Список включает в себя следующие разделы: Most Popular Projects, Frontend Frameworks, React Ecosystem, Vue Ecosystem, Backend/Full Stack, Build Tools, CSS in JS, Testing Tools, Mobile, Desktop, Static Sites, State management, GraphQL.

➡️ Читать дальше

@javascriptv

🖥 Infinite Scroll Animation – бесконечная прокрутка элементов, которая сделает сайт динамичнее и поможет уместить много заголовков в ограниченное пространство.

https://codepen.io/ykadosh/pen/KKezJzz

@javascriptv

🖥 Оптимизация разработки на React.js: Советы и рекомендации экспертов

Это руководство познакомит вас с основными проблемами каждого разработчика React. Вам просто необходимо знать о них для того, чтобы быть в курсе, как справиться с этими проблемами. Советы из статьи, помогут вам в разработке ваших компонентов и организации вашего проекта. После этого введения, вам будут представлены рекомендации для ReactJS разраюотки, которые включают теоретические и практические советы и примеры кода.

➡️ Читать дальше

@react_tg

🔥 Responsive Parallax Drag-slider With Transparent Letters

Отзывчивый слайдер Parallax с прозрачными буквами. Реализован с помощью JavaScript и CSS.

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

https://codepen.io/mrspok407/pen/bwLwvL

@javascriptv

🖥 Subcolor – инструмент для генерации оттенков между двумя разными цветами

Представлен в двух видах: js-библиотеки и веб-сервиса

@javascriptv