Frontender Libs - обзор библиотек JS / CSS
8.29K subscribers
2.04K photos
735 videos
3 files
242 links
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Купить рекламу: https://telega.in/c/sWebDev
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированный полет на Theatre.js и React Three

Создаем 3D-сцену в браузере с анимацией и возможностью прокрутки на Theatre.js и React Three.

👉 @sWebDev
👍5
Media is too big
VIEW IN TELEGRAM
React Virtuoso

React библиотека для рендеринга больших наборов данных. Подробный обзор доступен по ссылке.

👉 @sWebDev
👍4👎1
Media is too big
VIEW IN TELEGRAM
ThreeJS Toy - Fishes

Анимированный фон, выполненный с помощью библиотеки Three.js.

👉 @sWebDev
👍10
Аудиоплеер React

Подробное руководство по созданию собственного аудиоплеера на React.

👉 @sWebDev
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Виджет рейтинга на GSAP

Анимированный рейтинг, выполненный с применением библиотеки GSAP.js.

👉 @sWebDev
👍8
Как отследить находится ли пользователь в режиме ожидания React?

В вашем приложении заложен функционал, который должен срабатывать при нахождении пользователя в режиме ожидания. Каким хуком нужно воспользоваться, для отслеживания данного состояния?

👉 @sWebDev
👍6
Хук для отслеживания режима ожидания в React?
Anonymous Quiz
55%
useIdle
8%
useScroll
33%
useInterval
5%
useCookie
👍8
This media is not supported in your browser
VIEW IN TELEGRAM
Float-menu

Библиотека для Vue.js, которая предоставляет возможность добавления плавающего меню. Имеет гибкую настройку: перетаскивание, размещение, определение края экрана и вращение. Узнать все возможности библиотеки можно по ссылке.

👉 @sWebDev
👍4
Графики и чарты на React c использованием Recharts

Год назад мы рассказывали о библиотеке Recharts. В данной статье пошагово рассмотрим её использование в паре с React.

👉 @sWebDev
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Greensock SVG Search Animation

Забавная анимация загрузки, выполненная на GSAP.js.

👉 @sWebDev
👍4
Рендерим элементы Vue на основе булевого значения

Vue директива v-if позволяет условно рендерить элементы на основе значения булевой переменной. Пример кода:
        <template>
<div>
<p v-if="showText">This text will only show if showText is true.</p>
</div>
</template>

<script>
export default {
data() {
return {
showText: true
};
}
}
</script>


👉 @sWebDev
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Controlled Clock

Управляемые часы, выполненные с применением библиотеки Anime.js.

👉 @sWebDev
👍11
Создание компонентов Vue 3 с помощью Tailwind CSS

Рассмотрим руководство по использованию Tailwind CSS для создания компонентов Vue 3.

👉 @sWebDev
👍31
This media is not supported in your browser
VIEW IN TELEGRAM
Tone.js

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

👉 @sWebDev
👍6
Angular — API композиции директив

Композиция директив очень похожа на паттерн Компоновщик Composite. Он входит в семейство Структурных паттернов программирования, которые отвечают за создание удобных объектов. В этой статье разберемся с API композиции директив Directive composition API в Angular.

👉 @sWebDev
👍6
This media is not supported in your browser
VIEW IN TELEGRAM
ERROR

Вариант оформления страницы с ошибкой, выполненный на GSAP.js.

👉 @sWebDev
👍101👎1
Как узнать была ли прокрутка элемента React?

У вас есть функционал, который работает после прокрутки элемента. Как узнать совершена прокрутка или нет? Напоминаем, что у React для этого есть хук, какой?

👉 @sWebDev
👍5
Хук для отслеживания прокрутки в React?
Anonymous Quiz
11%
ResizeObserver
65%
useScroll
15%
listenScroll
10%
useRef
👎9👍5
Как использовать React в приложениях Angular

React в приложениях Angular может понадобится в двух случаях:
в экосистеме React есть компонент, на разработку которого, вероятно, уйдут недели, например компонент Timeline;
cотрудничество с компанией, использующей React, которой необходимо интегрировать его в существующее приложение;
В этой статье рассмотрим, как интегрировать React в обоих сценариях.

👉 @sWebDev
👍5🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
Rough.js

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

👉 @sWebDev
👍92👎2