Передозировка useMemo

В статье автор рассказывает о том, как чрезмерное использование хука useMemo может негативно повлиять на производительность вашего React-приложения, например, привести к ненужному кэшированию значений, что может увеличить объем памяти, используемой вашим приложением.

👉 @sWebDev

Basic animations via Anime.js

Примеры реализации базовых анимаций на Anime.js.

👉 @sWebDev

Dnd Kit

Библиотека для создания элементов drag and drop в React. Соответственно, разработчик может без проблем добавлять эти функции в свои приложения, давая возможность пользователям управлять контентом при помощи визуальных инструментов.
Важная особенность Dnd Kit — бесшовная работа с HTML5 drag-and-drop API.

👉 @sWebDev

Объединение рефов в React

Какая функция позволяет объединить два или более рефов в один?

👉 @sWebDev

Генератор HTML-таблиц в React

В этой статье автор рассказывает о том, как создать генератор HTML-таблиц с помощью React.

Генератор HTML-таблиц — это инструмент, который позволяет динамически создавать HTML-таблицы. Это может быть полезно в различных случаях, например, когда вам нужно отображать данные из базы данных или API.

👉 @sWebDev

Передача контекста в шаблоны

Директива ngTemplateOutletContext позволяет передавать контекст шаблону, вставляемому с помощью ngTemplateOutlet. Директива имеет один атрибут: context.

<div>
  <ng-template-outlet name="myTemplate" [ngTemplateOutletContext]="context"></ng-template-outlet>
</div>

<ng-template #myTemplate let-data>
  <p>{{data.name}}</p>
</ng-template>

<button (click)="changeContext()">Изменить контекст</button>


import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {

  context = {
    name: 'John Doe'
  };

  changeContext() {
    this.context = {
      name: 'Jane Doe'
    };
  }

}

В этом примере ngTemplateOutletContext используется для передачи объекта context в шаблон myTemplate, который использует переменную let-data для доступа к значению свойства name объекта context.

👉 @sWebDev

Anime.js

Анимация линий на Anime.js.

👉 @sWebDev

Упрощение импорта файлов в Angular с помощью новых параметров загрузчика

В статье представлены три новых типа загрузчиков:
загрузчик текста (text): преобразует содержимое файла в строку, что идеально подходит для текстовых файлов;
бинарный загрузчик (binary): преобразует бинарные файлы в Uint8Array, что удобно для работы с бинарными данными;
загрузчик файлов (file): сохраняет файлы отдельно и предоставляет их местоположение во время выполнения, что идеально подходит для ресурсов.

👉 @sWebDev

Next-typed-routes

Next-typed-routes - это библиотека TypeScript, которая добавляет типобезопасность к маршрутизации Next.js.

👉 @sWebDev

Netbase Animated Icons

Анимированные иконки на Anime.js.

👉 @sWebDev

Оптимизация рендеринга Vue с помощью v-once и v-memo

Фреймворки front-end, такие как Vue и React, завоевали популярность как ответ на отсутствие реактивности в JavaScript. В этой статье рассматривается, чем реактивные данные отличаются от нереактивных данных в Vue.

👉 @sWebDev

CARD NARUTO

Слайд анимация карточек с персонажами из Наруто на Anime.js.

👉 @sWebDev

gl-matrix

gl-matrix - это библиотека JavaScript для работы с векторами и матрицами, оптимизированная для WebGL. Она предоставляет набор функций для выполнения различных операций с векторами и матрицами.

👉 @sWebDev

Назначение параметра loading в use(Promise)

Что означает параметр loading в хуке use(Promise)?

👉 @sWebDev

Улучшаем типизацию роутинга в Next.js

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

Без типобезопасности маршрутизации возможны ошибки, такие как: сломанные ссылки, неверно отформатированные строки запросов или отсутствующие параметры маршрута.

👉 @sWebDev

Тонкая настройка директивы ngModel

ngModelOptions – это объект, который позволяет настроить различные параметры директивы ngModel.

updateOn: определяет, когда происходит обновление модели (при blur, change или input).
debounceTime: задержка обновления модели (в миллисекундах).
emitModelToViewChange: позволяет синхронизировать изменения модели с представлением.
modelToViewConverter: функция для преобразования значения модели перед отображением в представлении.
viewToModelConverter: функция для преобразования значения представления перед сохранением в модели.

Пример использования:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent {
  model = '';

  constructor() {}

  ngOnInit() {
    this.model = '初始值';
  }
}

<input [(ngModel)]="model" ngModelOptions="{updateOn: 'blur', debounceTime: 500}">

В этом примере значение модели будет обновляться только при потере фокуса с поля ввода. обновление модели будет задерживаться на 500 миллисекунд.

👉 @sWebDev

Разрыв фото на Gsap.js

Пример анимации разрыва фото на GSAP.js.

👉 @sWebDev

Управление состоянием в Angular: какие есть варианты?

Статья рассказывает о различных вариантах управления состоянием в Angular приложениях. Автор объясняет, что такое состояние, зачем им нужно управлять, и какие библиотеки и подходы существуют для этого.

👉 @sWebDev