Frontender Libs - обзор библиотек JS / CSS

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

ThreeJS Toy - Fishes Анимированный фон, выполненный с помощью библиотеки Three.js. 👉 @sWebDev

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

Анимированный полет на Theatre.js и React Three Создаем 3D-сцену в браузере с анимацией и возможностью прокрутки на Theatre.js и React Three. 👉 @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

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

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

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

Как определить сервис на уровне модуля в Angular? Сервисы в Angular возможно определять на уровне приложения, модуля и компонента. Какой из этих вариантов определяет на уровне модуля? Вариант 1: @Injectable({providedIn: AccountsModule}) Вариант 2:

    selector: 'accounts-list',
    providers: [AccountsHttpService],
    template: <div>My accounts</div>
  })

Вариант 3: @Injectable({providedIn: 'root'}) 👉 @sWebDev

Анимированный 3D текст на GSAP.js 3D тест с анимацией, выполненный с применением GSAP.js. 👉 @sWebDev

Как упростить автоматизированное тестирование компонентов React Рассмотрим пример теста, который будет проверять только работу компонента и не содержать никакой информации о внутренней реализации. Такой подход позволяет рефакторить компонент, не нарушая тестирования. 👉 @sWebDev

Adonis Библиотека основанная на TypeScript и созданная для Node.js. Adonis направлен для использования в серверной структуре, но также подходит для полноценной разработки. Узнать все особенности данной библиотеки можно по ссылке. 👉 @sWebDev

FlawlessDog 3D animated cube Анимация вращающегося 3D куба, выполненная на GSAP.js. 👉 @sWebDev

🚀Как JavaScript-разработчику использовать XState? Узнаем 3 марта в 20:00 на открытом уроке онлайн-курса «JavaScript Developer. Professional» в OTUS. 😎Тема вебинара: «Управление сложным состоянием на основе XState». XState — это инструмент для создания и проверки диаграмм состояний для визуализации состояния ваших приложений. Вместе с преподавателем Арсением Высоцким, тимлидом в большой международной компании, научимся описывать бизнес-логику посредством конечных автоматов. 👉Пройдите вступительный тест, чтобы принять участие в занятии https://otus.pw/4Y6s/ Курс доступен в рассрочку. Реклама. Информация о рекламодателе на сайте www.otus.ru

Быстро о главном: визуализация с D3.js Мы уже рассматривали D3.js. В этой статье познакомимся с библиотекой на конкретных примерах. Пройдем по следующим этапам: загрузка данных  —  выборка элементов  —  привязка данных  —  создание/изменение/ удаление элементов. 👉 @sWebDev

React: слушаем события прокрутки элемента useScroll используется для прослушивания события прокрутки элемента и перерисовки при прокрутке. Не требует ручного добавления слушателей событий JavaScript. Например:

     import {useScroll} from 'react-use';
      const Demo = () => {
        const scrollRef = React.useRef(null);
        const {x, y} = useScroll(scrollRef);
      return (
          <div ref={scrollRef}>
            <div>x: {x}</div>
            <div>y: {y}</div>
          </div>
        );
      };

👉 @sWebDev

Хотите стабильно зарабатывать во фрилансе или найти новую профессию в 2023г.? Чтоб работа зажигала, а не высасывала время. И вас постоянно спрашивали: как вы к этому пришли? 📌 БЕСПЛАТНО освойте профессию дизайнера с нуля. Вместе сделаем вам портфолио из 4+ работ с личной поддержкой от наставника и расскажем, как заработать на дизайне. Что вы получите? — Доступ к личному кабинету с уроками — Личный разбор каждого ДЗ от куратора — Портфолио из 4+ работ и сертификат — Мастер-класс "Как заработать на дизайне в 2023 г." — 12000+ единомышленников в чате Будем делать: веб-дизайн, графический дизайн, анимацию интерфейсов. 👉 Начать обучение бесплатно Программа бесплатного курса: — Обучение по Figma с нуля и 4+ дз с личным разбором — Изучение основ дизайна (контент, сетки, композиция т.д.) — Создание анимации интерфейса — Все о профессии и доходе дизайнера (как найти клиентов и сколько можно заработать) 👉 Первый урок уже сегодня, кликайте сюда и забирайте все бонусы

В ритмах React'a: руководство по созданию аудиоплеера Будь вы новичок или опытный разработчик, это исчерпывающее руководство шаг за шагом проведет вас через процесс создания собственного аудиоплеера с помощью популярной JavaScript-библиотеки React. 👉 @sWebDev

Framer motion hamburger Проект с кнопкой меню-бургера, выполненный на CSS и React.js. 👉 @sWebDev