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

Glowing Snowflake Animation Анимация снежинки на GSAP. 👉 @sWebDev

Бесплатный курс по дизайну в FIGMA Онлайн-программа с наставником и чатом. Осторожно! 80% практики. По результату обучения у вас будет портфолио из нескольких работ. Сертификат о прохождении курса. Возможность пройти полное обучение и получить гарантированное трудоустройство! Учитесь дизайну у профессионалов. Переходи по кнопки: "Узнать больше" и начинай свое обучение. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

Реактивные формы с 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

Что вас больше раздражает на сайте: куки или их отсутствие? 👍 - Куки. ❤️ - Отсутствие. 👉 @sWebDev | #юмор

Работа с unstable_batchedUpdates Для чего используется метод unstable_batchedUpdates? Если забыли, то вернитесь к посту от 02.12.2024. 👉 @sWebDev

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

Dynamic Text Animation Анимация текста на GSAP и CSS. 👉 @sWebDev

Курс "Дизайн карточек для WB и Ozon". Бесплатно и с нуля Дизайнер карточек для маркетплейсов — востребованная и доходная профессия 💰 Научись ей бесплатно! - Бесплатный доступ - Разбор ДЗ от наставника - Мощные кейсы в портфолио Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

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

Apple Scrolling Effect Скролл-анимация монеты на GSAP. 👉 @sWebDev

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

Новые бесплатные курсы в канале Selectel Newsfeed. Подойдут всем: от новичков до продвинутых айтишников. Вас ждут обзоры, инструкции и статьи, которые помогут разобраться в темах структурно и последовательно. Вступайте в сообщество IT-специалистов в Telegram от Selectel. Подписаться #реклама 16+ О рекламодателе

А вас выматывают долгие созвоны? 👍 - Да, это просто кошмар. ❤️ - Нет, я легко их переношу. 👉 @sWebDev | #юмор

Randomizing Perlin Noise Абстрактная анимация на GSAP и Canvas. 👉 @sWebDev

Управление зонами через 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

Кем быть сложнее: фулстеком или девопсом? 👍 - Фулстеком: больше задач. ❤️ - Девопсом: никто не понимает, что ты делаешь. 👉 @sWebDev | #юмор

Работа с методом ngAfterContentInit Когда вызывается метод ngAfterContentInit в Angular? Если забыли, то вернитесь к посту от 25.11.2024. 👉 @sWebDev

Choices.js Choices.js — это легковесная библиотека для работы с пользовательскими элементами ввода, такими как выпадающие списки, многострочные выборы (multi-select), и текстовые поля с тегами. Она позволяет быстро создавать и стилизовать интерактивные элементы форм. 👉 @sWebDev