PixiJS

PixiJS часто используют в качестве игрового движка, но у библиотеки более широкое применение. Она упрощает вывод интерактивной 2D-графики и анимации в любых приложениях на базе HTML5. Для рендеринга PixiJS может использовать как WebGL, так и стандартный Canvas.

👉 @sWebDev

Three js - Interactive solar system

Анимированный проект солнечной системы, выполненный на Three.js.

👉 @sWebDev

Angular. Работа с template-driven формами

Разработчики angular, как правило знают, что для работы с формами существует два подхода: reactive forms и template driven forms. Также, хорошо известно, что для работы с формами разработан такой функционал как валидация, однако исчерпывающе описано его применения для подхода reactive forms. Давайте рассмотрим как можно получить те же преимущества для template driven подхода.

👉 @sWebDev

Airplanes

Реализация анимированного скролла при помощи библиотеки Gsap.js.

👉 @sWebDev

Управление состоянием компонента в React

Можем ли мы в React управлять состоянием компонента, используя функцию-редьюсер?

👉 @sWebDev

Voxelizing Three.js Geometries

Проект генератора геометрических фигур, выполненный с применением библиотеки Three.js.

👉 @sWebDev

Klona

Klona - это библиотека для создания копий JavaScript-объектов. Она поддерживает работу с обычными объектами, массивами, датами и другими структурами данных. Klona предоставляет дополнительные методы для взаимодействия с объектами. Например, клонирование с выбором глубины вложенности. Библиотека будет полезной для разработчиков, работающих с большими объемами данных и желающими повысить производительность своих приложений.

👉 @sWebDev

Декомпозиция и интерфейс vue-компонентов

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

👉 @sWebDev

Оптимизируем производительность в React

Рассмотрим одну из новых фич Reacta - Automatic Batching. Батчинг является процессом оптимизации производительности в React, при котором несколько обновлений состояния и свойств компонентов объединяются в одно обновление перед рендерингом. Это позволяет уменьшить количество обновлений DOM и повысить производительность. Пример использования:

    function MyComponent() {
        const [count, setCount] = useState(0);
        
        const handleClick = () => {
          setCount(count + 1);
          setCount(count + 1);
          setCount(count + 1);
        }
        
        return (
          <div>
            <p>Count: {count}</p>
            <button onClick={handleClick}>Increment</button>
          </div>
        );
      }

При клике на Increment будет вызван три раза метод setCount, но благодаря batching'у обновления будут объединены в одно.

До React 18 батчинг также существовал, но автоматически работал только для обработчиков DOM событий.

👉 @sWebDev

Встраивание WebGL в HTML-страницу с помощью Three.JS

В статье рассмотрим совмещение WebGL‑анимации с прокруткой страницы HTML, используя библиотеку Three.js. Работа с ней во многом схожа с работой 3D‑редактора. Для получения результата в виде картинки или анимации необходимо создать сцену, поместить в нее камеру, создать примитив (геометрию или 3D‑модель), создать источник освещения и запустить процесс рендеринга.

👉 @sWebDev

jsPDF

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

👉 @sWebDev

GSAP 3 Radio

Анимированное радио, выполненное с использованием библиотеки Gsap.js.

👉 @sWebDev

Зачем и когда использовать ng-template в Angular?

По ссылке обзор 3 полезных возможностей директивы <ng-template>.

NanoSQL

NanoSQL - легковесная и быстрая база данных, которую можно использовать как в браузере, так и на сервере. Библиотека обладает множеством полезных функций, таких как индексы, транзакции, агрегирующие функции и т.д. NanoSQL поддерживает различные бэкэнды баз данных, включая IndexedDB, WebSQL, SQLite, LevelDB и другие.

👉 @sWebDev

Toilet Paper Toggle

Забавный переключатель для сайта, выполненный с использованием библиотеки Gsap.js.

👉 @sWebDev

Часто используемые шаблоны проектирования в Angular

Обзор нескольких распространенных паттернов проектирования в Angular, таких как Singleton, Facade, Observer и других. Материал описывает, как использовать каждый паттерн и какие преимущества он может принести в разработке приложений.

👉 @sWebDev

Как отложить загрузку компонента React?

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

👉 @sWebDev

Li´l Vikings

Анимированная сцена, выполненная с использованием Gsap.js.

👉 @sWebDev

Возврат отложенной версии переданного значения React

Рассмотрим грядущее изменение, которое появится в React 18. Хук useDeferredValue вернет отложенную версию переданного значения, которая будет “отставать” от исходной на время, равное таймауту:

     import { useDeferredValue } from "react";

    // ...

    const [text, setText] = useState("text");
    const deferredText = useDeferredValue(text, { timeoutMs: 2000 });

👉 @sWebDev