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

Создание реактивных форм без FormBuilder В Angular для работы с реактивными формами часто используют FormBuilder, но создать форму можно и вручную с помощью new FormGroup() и new FormControl(). При создании формы каждый элемент добавляется в FormGroup через new FormControl(), где первый аргумент — это начальное значение поля. Также можно динамически добавлять или удалять контролы с помощью методов addControl() и removeControl(). Пример:

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-login',
  template: `
    <form [formGroup]="loginForm">
      <input formControlName="email" placeholder="Email">
      <input formControlName="password" type="password" placeholder="Пароль">
    </form>
  `
})
export class LoginComponent {
  loginForm = new FormGroup({
    email: new FormControl(''),
    password: new FormControl('')
  });
}

👉 @sWebDev

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

Часто отвлекаетесь на что-то в компе? 👍 - Постоянно. ❤️ - Нет, только если в перерывах. 🤔 - Скорее отвлекаюсь на код. 👉 @sWebDev | #юмор

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

Midnight.js Midnight.js — это небольшая библиотека JavaScript, которая позволяет динамически изменять цвет навигационной панели в зависимости от фона, над которым она находится. Работает путем определения родительского элемента и применения соответствующих CSS-классов при прокрутке страницы. 👉 @sWebDev

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

Пример midnight.js Анимация с примером реализации библиотеки midnight.js. 👉 @sWebDev

Тестирование React-хуков с помощью Vitest В статье обсуждается, как эффективно тестировать пользовательские хуки в React, используя библиотеку Vitest. Рассматриваются методы настройки среды тестирования с помощью JSDOM, применения React Testing Library для рендеринга хуков и использования функций spyOn и waitFor для тестирования асинхронной логики и внешних API-вызовов. 👉 @sWebDev

Spline of frames Анимация пленки с фотографиями на Three.js. 👉 @sWebDev

Booking.js Booking.js — это библиотека для создания пользовательских интерфейсов бронирования с интуитивно понятным выбором дат. Она ориентирована на веб-приложения, требующие функционала бронирования, например, аренду жилья или услуги. 👉 @sWebDev

Какой вариант ветки вам удобнее? 👍 – Main, уже привык. ❤️ – Master, так исторически сложилось. 🤔 – О чем вообще речь? 👉 @sWebDev | #юмор

Custom Cursor Анимация курсора на Anime.js. 👉 @sWebDev

Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка для вас и 3-х ваших близких 30 дней бесплатно. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте сейчас❤️ Попробовать #реклама 18+ music.yandex.ru О рекламодателе Реклама на Яндексе

Рендеринг длинных списков без потерь производительности в Angular В Angular рендеринг длинных списков может перегружать DOM, снижая производительность. CdkVirtualScrollViewport из Angular CDK решает эту проблему, рендеря только видимые элементы. Пример:

<cdk-virtual-scroll-viewport itemSize="50" class="viewport">
  <div *cdkVirtualFor="let item of items" class="item">
    {{ item }}
  </div>
</cdk-virtual-scroll-viewport>

Этот компонент создает виртуальный список, динамически заменяя элементы при прокрутке. В памяти остается только небольшое количество элементов, необходимое для отображения. Дополнительно можно задать динамическую высоту элементов:

<cdk-virtual-scroll-viewport [itemSize]="getItemSize()" class="viewport">
  <div *cdkVirtualFor="let item of items" class="item">
    {{ item }}
  </div>
</cdk-virtual-scroll-viewport>

getItemSize() {
  return window.innerWidth > 768 ? 50 : 100;
}

Это позволяет адаптировать высоту элементов к ширине экрана, улучшая UX. 👉 @sWebDev

Что делать, если прод упал? 👍 – Пинать сервер. ❤️ – Брать больничный. 🤔 – Искать баг. 👉 @sWebDev | #юмор

Работа с методом runInInjectionContext() Что позволяет делать метод runInInjectionContext()? Забыли? Вернитесь к посту от 03.02.2025. 👉 @sWebDev

Canvg Canvg — библиотека, которая позволяет рендерить SVG-контент на <canvas> HTML5. Полезна для работы с графикой в браузерах, которые не поддерживают SVG в полной мере или требуют манипуляций с графикой. 👉 @sWebDev

WaVvVvVvVeSsS Анимация волн на GSAP. 👉 @sWebDev