React хук для изменения ширины и длины элемента

use-resize-observer  —  React-хук, который позволяет измерять ширину и высоту элемента. Этот хук невероятно удобен при работе с обрезкой, редактированием, обработкой изображений и т.д.

Пример:

    import React from "react";
    import ReactDOM from "react-dom";
    import useResizeObserver from "use-resize-observer";
    import "./styles.css";

    const App = () => {
    const { ref, width, height } = useResizeObserver<HTMLDivElement>();
    return (
    <div>
    <div className="instructions">Try resizing this div!</div>
    <div ref={ref} className="box">
    {width}x{height}
    </div>
    </div>
    )};

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

👉 @sWebDev

LIVE: React Gallery with Keyboard Control

Проект анимированной галереи, выполненной на React.

👉 @sWebDev

Новый способ передачи данных в динамически создаваемые компоненты

Рассмотрим новый функционал Angular, позволяющий передавать данные в динамически создаваемые компоненты более эффективно и удобно. В статье приведен пример использования, который демонстрирует простой способ создания динамических компонентов и передачи им данных.

👉 @sWebDev

Matter.js

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

👉 @sWebDev

React Animated BB-8

Отслеживание курсора в стиле Star Wars. Проект с анимированным BB-8, выполнено на React.

👉 @sWebDev

Разработка одностраничного приложения с помощью Flask и Vue.js

Пошаговое руководство по настройке CRUD при помощи Vue и Flask. Начнем с создания Vue-приложения и перейдем к выполнению CRUD операций.

👉 @sWebDev

Sortable.js

Библиотека для создания интерактивных списков и таблиц, которые можно перетаскивать и сортировать при помощи мыши или сенсорного экрана. Sortable.js имеет широкий выбор функций и настроек, таких как возможность блокировки элементов, анимации перетаскивания и поддержку событий drag и drop.

👉 @sWebDev

Pinball Physics

Реализация известной игры, выполненная с применением библиотеки Matter.js.

👉 @sWebDev

Как получить доступ к реактивным данным и активным событиям Vue.js?

Каким хуком воспользоваться для получения доступа к реактивным данным и активным событиям?

👉 @sWebDev

Angular Material Sidebar

Проект админки, выполненный на Angular.

👉 @sWebDev

Повышаем производительность браузера React

На веб-странице может быть функциональность, требующая трудоемких вычислений. Например, загрузка изображений, несколько вызовов API и т.д. Если методы вызываются слишком часто, то это повлияет на производительность. Дебаунсинг  —  практика, гарантирующая, что трудоемкие задачи не будут вызываться так часто, достигается благодаря хуку useDebounce.

    import React, { useState } from 'react';
    import { useDebounce } from 'use-debounce';
    export default function Input() {
      const [text, setText] = useState('Hello');
      const [value] = useDebounce(text, 1000);
      return (
        <div>
          <input
            defaultValue={'Hello'}
            onChange={(e) => {
              setText(e.target.value);
            }}
          />
          <p>Actual value: {text}</p>
          <p>Debounce value: {value}</p>
        </div>
      );
    }

👉 @sWebDev

Matter JS Pool

Бильярд, выполненный на Matter.js.

👉 @sWebDev

Реализация слайдера изображений и текста на React.js с вариантами оптимизации

По ссылке обзор и решение популярного тестового задания на должность фронтенд-разработчика — Слайдера изображений.

👉 @sWebDev

Typed.js

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

👉 @sWebDev

A colourful world of Turbulence

Анимированная сцена, выполненная на Angular.

👉 @sWebDev

3 ключевых рецепта для навигации по вашим маршрутам Angular

Обзор правильной настройки маршрутизации в Angular для обеспечения лучшего варианта пользовательской навигации. Три конкретных примера обработки маршрутов и полезные советы.

👉 @sWebDev

Cash

Cash - это легковесная и быстрая библиотека для работы с DOM. Cash поддерживает селекторы, похожие на jQuery, а также имеет удобный API для работы с элементами, включая возможность создания, изменения и удаления элементов, обработку событий и многое другое.

👉 @sWebDev

React Hamburger Builder with Matter.js Physics

Проект, в котором нужно собирать гамбургеры. Выполнено с применением React и Matter.js.

👉 @sWebDev

Как добавить событие на элемент Vue?

Какой директивой воспользоваться, чтобы добавить событие на элемент Vue, передав аргументом название нужного события?

👉 @sWebDev