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

👍 - Куки.

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

👉 @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

Любите "наводить красоту" в своем коде?

👍 - Да.

❤️ - Нет, код — это про функциональность.

🤔 - Иногда, если есть время.

👉 @sWebDev | #юмор

Использование Injector.create() для динамического создания зависимостей

В Angular зависимости обычно предоставляются через инжекторы, зарегистрированные в дереве компонентов или на уровне приложения. Однако в некоторых случаях может потребоваться создать зависимость вне контекста стандартного механизма DI (Dependency Injection). Метод Injector.create() предоставляет возможность вручную создать инжектор и настроить его с необходимыми зависимостями.

Пример:

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

class LoggerService {
  log(message: string) {
    console.log('Logger:', message);
  }
}

// Создаем локальный инжектор с конфигурацией
const injector = Injector.create({
  providers: [
    { provide: LoggerService, useClass: LoggerService }
  ]
});

// Получаем экземпляр LoggerService из инжектора
const logger = injector.get(LoggerService);
logger.log('Динамическое создание зависимости выполнено!');

В данном примере создается инжектор, регистрирующий LoggerService в локальном контексте.

👉 @sWebDev

Animation on scroll

Скролл-анимация пчелы на Three.js.

👉 @sWebDev

Как вы относитесь к новым фреймворкам?

👍 - Надо пробовать.

❤️ - Предпочитаю старые и проверенные.

🤔 - Пишу на чистом JS, мне хватает. (Что я делаю в этом канале?)

👉 @sWebDev | #юмор

Ogl

Ogl — легковесный WebGL-фреймворк для создания интерактивной 3D-графики. Поддерживает модели, текстуры и шейдеры.

👉 @sWebDev

Strange tubes

Интерактивная анимация цветных труб на Three.js.

👉 @sWebDev

Понимание шаблона ресурсов Angular 19: практическое руководство

Статья описывает ресурсный паттерн в Angular для управления состоянием запросов. Используя resource и rxResource, автор демонстрирует создание загрузчиков данных, работу с состояниями (загрузка, ошибка, успех) и обработку запросов с помощью Promise и Observable. Пример с CRUD-приложением для продуктов объясняет использование этих подходов в реальных проектах.

👉 @sWebDev

Twisting

Анимация спирали из прямоугольников наThree.js.

👉 @sWebDev

Sprite.js

Sprite.js — фреймворк для 2D-анимаций на Canvas и WebGL. Позволяет легко работать со спрайтами, фигурами и анимацией для веб-приложений.

👉 @sWebDev