Генератор 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

Reatom

Reatom - это библиотека управления состоянием для React, которая является альтернативой RTK, Zustand и React Query.

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

👉 @sWebDev

When Animators Become Web Designers

Пример анимации загрузки страницы на GSAP.js.

👉 @sWebDev

Создание навигационной панели с помощью Angular 17 и Tailwind CSS

Гайд по созданию навигационной панели с помощью Angular 17 и Tailwind CSS.

👉 @sWebDev

Loadig003

Пример анимации загрузки на Three.js.

👉 @sWebDev

Million.js

Million.js - это минималистичный фреймворк на JavaScript, который эффективно работает с элементами DOM. В отличие от традиционных фреймворков, которые обновляют весь DOM при каждом изменении состояния.

Библиотека использует более детальный подход, обновляя только необходимые части DOM. Million.js также имеет свой компилятор, который автоматически оптимизирует компоненты React на сервере.

👉 @sWebDev