Управление зонами через NgZone.runOutsideAngular()

Метод runOutsideAngular() из Angular позволяет выполнять код за пределами зоны Angular. Это предотвращает избыточное обнаружение изменений, ускоряя приложение в сценариях, где Angular не должен отслеживать изменения. Такой подход полезен для обработки скроллинга, таймеров или анимаций.

Пример:

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

@Component({
  selector: 'app-optimization-example',
  template: `<p>Скорость приложения оптимизирована!</p>`,
})
export class OptimizationExampleComponent {
  constructor(private ngZone: NgZone) {
    this.ngZone.runOutsideAngular(() => {
      window.addEventListener('scroll', this.handleScroll);
    });
  }

  handleScroll = () => {
    console.log('Событие скроллинга обработано!');
  };
}

В данном примере Angular не отслеживает события scroll, что снижает нагрузку на систему. Однако важно помнить, что для обновления интерфейса нужно вернуться в зону Angular с помощью NgZone.run().

👉 @sWebDev

Randomizing Perlin Noise

Абстрактная анимация на GSAP и Canvas.

👉 @sWebDev

А вас выматывают долгие созвоны?

👍 - Да, это просто кошмар.

❤️ - Нет, я легко их переношу.

👉 @sWebDev | #юмор

Htmx

Htmx — это библиотека для добавления интерактивности через HTML-атрибуты. Она помогает управлять асинхронными запросами, обновлять части страницы и обрабатывать события, минимизируя использование JavaScript.

👉 @sWebDev

Apple Scrolling Effect

Скролл-анимация монеты на GSAP.

👉 @sWebDev

UseContextSelector: ускоренный аналог useContext для React

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

👉 @sWebDev

Dynamic Text Animation

Анимация текста на GSAP и CSS.

👉 @sWebDev

Shifty

Shifty — это микробиблиотека для создания анимаций с точным контролем ключевых кадров. Она предоставляет интерфейс для управления анимационными свойствами через JavaScript, не завися от DOM. Полезна для кастомных анимаций, таких как переходы между сложными состояниями.

👉 @sWebDev

Работа с unstable_batchedUpdates

Для чего используется метод unstable_batchedUpdates?

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

👉 @sWebDev

Что вас больше раздражает на сайте: куки или их отсутствие?

👍 - Куки.

❤️ - Отсутствие.

👉 @sWebDev | #юмор

Реактивные формы с AbstractControl в Angular

AbstractControl — это базовый класс для всех контролов. Он предоставляет методы и свойства, которые позволяют управлять состоянием, валидацией и зависимостями полей формы.

Пример:

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

constructor(private fb: FormBuilder) {}

ngOnInit() {
  this.form = this.fb.group({
    password: ['', Validators.required],
    confirmPassword: ['']
  });
  this.form.get('confirmPassword')?.setValidators([
    this.matchPasswordsValidator(this.form.get('password'))
  ]);
}
matchPasswordsValidator(passwordControl: AbstractControl | null) {
  return (confirmPasswordControl: AbstractControl) => {
    const password = passwordControl?.value;
    const confirmPassword = confirmPasswordControl.value;

    return password === confirmPassword ? null : { passwordMismatch: true };
  };
}

В этом примере валидатор сравнивает значения password и confirmPassword, автоматически реагируя на изменения первого поля.

👉 @sWebDev

Glowing Snowflake Animation

Анимация снежинки на GSAP.

👉 @sWebDev

Работаете ли вы быстрее над проектом в команде?

👍 - Да, работать вместе отлично.

❤️ - Нет, это замедляет процесс.

🤔 - Насчет скорости не знаю, зато не скучно!

👉 @sWebDev

Wow.js

Wow.js — это JavaScript-библиотека, которая добавляет анимации элементам страницы при прокрутке. Она автоматически выявляет элементы, которые попадают в видимую область окна браузера, и применяет к ним CSS-анимации.

👉 @sWebDev

Snowfall!

Анимация курсора в виде шлейфа снежинок на GSAP.

👉 @sWebDev

Как настроить автофокус с помощью React Hooks

В статье объясняется, как с помощью React Hooks легко добавить автофокус на элементы формы. На простых примерах показано, как использовать useRef, чтобы сделать интерфейс удобнее и отзывчивее.

👉 @sWebDev

Interactive Christmas Tree

Интерактивная новогодняя елка на Three.js.

👉 @sWebDev

Detect.js

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

👉 @sWebDev

Назначение AnimationBuilder

Для чего используется сервис AnimationBuilder в Angular?

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

👉 @sWebDev