Keystone

Keystone - библиотека для Node.js, включающая в себя автоматизированный CRUD через GraphQL API. Также, доступно использование собственных компонентов React.js. Полный обзор по ссылке.

👉 @sWebDev

Слайдер температуры на Vue.js

Температурный датчик в виде слайдера, выполненный на Vue.js.

👉 @sWebDev

Генератор цвета

Генератор цветовой палитры, реализованный на React и Prism.js.

👉 @sWebDev

Задаем интервалы в React

useInterval - хук для функций с интервалом, которые автоматически размонтируют компонент clearInterval.

      import * as React from 'react';
      import {useInterval} from 'react-use';
      const Demo = () => {
        const [count, setCount] = React.useState(0);
        const [delay, setDelay] = React.useState(1000);
        const [isRunning, toggleIsRunning] = useBoolean(true);
      useInterval(
          () => {
            setCount(count + 1);
          },
          isRunning ? delay : null
        );
      return (
          <div>
            <div>
              delay: <input value={delay} onChange={event => setDelay(Number(event.target.value))} />
            </div>
            <h1>count: {count}</h1>
            <div>
              <button onClick={toggleIsRunning}>{isRunning ? 'stop' : 'start'}</button>
            </div>
          </div>
        );
      };

👉 @sWebDev

Анимированный полет на Theatre.js и React Three

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

👉 @sWebDev

React Virtuoso

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

👉 @sWebDev

ThreeJS Toy - Fishes

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

👉 @sWebDev

Аудиоплеер React

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

👉 @sWebDev

Виджет рейтинга на GSAP

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

👉 @sWebDev

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

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

👉 @sWebDev

Float-menu

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

👉 @sWebDev

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

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

👉 @sWebDev

Greensock SVG Search Animation

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

👉 @sWebDev

Рендерим элементы 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

Controlled Clock

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

👉 @sWebDev

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

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

👉 @sWebDev

Tone.js

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

👉 @sWebDev

Angular — API композиции директив

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

👉 @sWebDev

ERROR

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

👉 @sWebDev