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

Knotwork

Абстрактная интерактивная анимация на Three.js.

👉 @sWebDev

Глубокое погружение в формы в современном React

Статья подробно рассматривает создание форм в современном React без использования сторонних библиотек. Автор описывает основные методы работы с формами, такие как использование POST запросов, управление состоянием формы, асинхронная обработка данных, и оптимистичное обновление интерфейса.

👉 @sWebDev

Fire shader

Настраиваемая анимация камина на Three.js.

👉 @sWebDev

Gun.js

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

👉 @sWebDev

Курам на смех.

👉 @sWebDev | #юмор

Random Three.js

Генератор коробки на Three.js.

👉 @sWebDev

Создание кастомных валидаторов с ValidatorFn

ValidatorFn — это функция, которая принимает AbstractControl (например, FormControl) и возвращает null, если данные валидны, или объект с ошибкой, если нет.

Пример кастомного валидатора, который проверяет, начинается ли значение с определенной буквы:

import { AbstractControl, ValidatorFn } from '@angular/forms';

export function startsWithLetterValidator(letter: string): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const startsWithLetter = control.value?.startsWith(letter);
    return startsWithLetter ? null : { startsWithLetter: { value: control.value } };
  };
}

Применение валидатора:

import { FormBuilder, Validators } from '@angular/forms';
import { startsWithLetterValidator } from './validators/starts-with-letter.validator';

this.form = this.fb.group({
  name: ['', [Validators.required, startsWithLetterValidator('A')]]
});

Валидатор проверяет, что значение поля name начинается с буквы "A".

👉 @sWebDev

Доступное объяснение.

👉 @sWebDev | #юмор

Создание контекста в React

Что используется для создания контекста в React?

Если забыли, то вернитесь к посту от 12.08.2024.

👉 @sWebDev

Quixote

Quixote — это JavaScript-библиотека, предназначенная для тестирования пользовательских интерфейсов. Она позволяет создавать изолированные среды (фреймы) для тестирования компонентов HTML, CSS и JavaScript. Quixote позволяет проверять внешний вид и поведение интерфейсов в различных условиях, обеспечивая точность и кроссбраузерную совместимость.

👉 @sWebDev

Three.js animated rocket

Анимация ракеты на Three.js.

👉 @sWebDev

Гибкая предварительная загрузка данных в SPA

Статья рассказывает о создании кастомного скрипта для предварительной загрузки данных в одностраничных приложениях (SPA). Автор объясняет, как это помогает ускорить загрузку приложений, делая запросы на получение данных параллельно с загрузкой страницы.

👉 @sWebDev

Carousel

Интерактивная карусель на Plain.js.

👉 @sWebDev

Bottleneck

Bottleneck — это библиотека для управления параллельными запросами в Node.js. Она предоставляет простой способ управления количеством одновременно выполняемых асинхронных операций, что помогает избежать перегрузки системы и эффективно распределять ресурсы.

👉 @sWebDev

Сталкивались с разочарованием от курсов?

❤️ — Да.

👍 — Нет.

👉 @sWebDev | #юмор

Low Poly Experiment

Анимация колбы с окрашивающимся реагентом на GSAP.

👉 @sWebDev

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

ViewContainerRef в Angular позволяет динамически создавать компоненты и внедрять в них зависимости. Сначала нужно получить доступ к ViewContainerRef через @ViewChild, затем использовать метод createComponent для создания экземпляра компонента. После создания можно передать данные через инстанс компонента.

Пример:

@Component({
  selector: 'app-dynamic-host',
  template: `<ng-container #container></ng-container>`,
})
export class DynamicHostComponent {
  @ViewChild('container', { read: ViewContainerRef, static: true })
  container!: ViewContainerRef;

  loadComponent() {
    const componentRef = this.container.createComponent(DynamicComponent);
    componentRef.instance.data = 'Переданные данные';
  }
}

@Component({
  selector: 'app-dynamic-component',
  template: `<p>{{ data }}</p>`,
})
export class DynamicComponent {
  data!: string;
}

👉 @sWebDev

Ситуация знакома?

❤️ - Нет.

👍 - Еще как.

👉 @sWebDev | #юмор