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

Small heart animation

Интерактивная анимация сердца на GSAP и MO.js.

👉 @sWebDev

Инъекции зависимостей через глобальную функцию inject()

Функция inject() в Angular позволяет инъектировать зависимости непосредственно в тело функции. Это альтернатива стандартному подходу через конструкторы.

Пример использования:

import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export class DataService {
  private http = inject(HttpClient);

  fetchData() {
    return this.http.get('/api/data');
  }
}

inject() вызывает инъекцию Angular для получения нужной зависимости. Ее можно использовать в теле класса, а не только в параметрах конструктора.

Пример тестирования:

import { inject } from '@angular/core';
import { HttpTestingController } from '@angular/common/http/testing';

describe('DataService', () => {
  let httpMock = inject(HttpTestingController);

  it('should fetch data', () => {
    // Логика теста
  });
});

👉 @sWebDev

Жизненно?

👍 - Да.

❤️ - Неканон. Нужно еще 10 библиотек подключить.

👉 @sWebDev | #юмор

Работа с ChangeDetectionStrategy.OnPush

Когда компонент с ChangeDetectionStrategy.OnPush будет проверять изменения?

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

👉 @sWebDev

Разбираем как решать задачи на LeetCode

✅ Примеры решений
✅ Пояснения

Выбери своё направление:

1. Python
2. JavaScript
3. Java
4. C#
5. Golang
6. C/C++
7. PHP
8. Kotlin
9. Swift

Gridstack.js

Gridstack.js — это библиотека JavaScript для создания динамических, настраиваемых сеточных макетов с функцией drag-and-drop. С её помощью можно легко организовывать элементы на странице, перетаскивая их в нужные позиции. Gridstack.js подходит для создания интерактивных панелей, дашбордов и других интерфейсов, где важна гибкость и динамическое управление содержимым.

👉 @sWebDev

Smooth GSAP Text Reveal Animation

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

👉 @sWebDev

Интеграция аутентификации с отпечатком пальца и Face ID в ваше Angular-приложение с использованием WebAuthn: пошаговое руководство

Статья описывает процесс добавления биометрической аутентификации (отпечаток пальца и Face ID) в Angular-приложение с помощью WebAuthn.

👉 @sWebDev

Pixies at rockpoint palladium 1991

Интерактивный постер на Anime.js.

👉 @sWebDev

NoSleep.js

NoSleep.js — это библиотека JavaScript, которая предотвращает переход мобильных устройств в спящий режим, когда веб-страница активна. Это особенно полезно для приложений, где важно поддерживать активность экрана, таких как видеоплееры или приложения для работы с картами.

👉 @sWebDev

Когда выглядит не очень, но, в принципе, работает.

👉 @sWebDev | #юмор

Torus Vortex

Анимация тороидального вихря на Three.js.

👉 @sWebDev

Динамическая загрузка компонентов с использованием возможностей Angular Ivy

Одним из нововведений в Angular с появлением Ivy является возможность динамической загрузки компонентов. Ранее этот процесс требовал использования ComponentFactoryResolver. С Ivy же, динамическая загрузка компонентов стала проще и интуитивно понятнее.

Пример:

Для динамической загрузки компонентов мы можем использовать метод ViewContainerRef.createComponent. Он позволяет загружать компоненты по мере необходимости, не загружая их в основной бандл приложения.

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

@Component({
  selector: 'app-dynamic-loader',
  template: `<ng-template #container></ng-template>`
})
export class DynamicLoaderComponent {
  @ViewChild('container', { read: ViewContainerRef, static: true }) container: ViewContainerRef;

  constructor() {}

  loadComponent(component: any) {
    this.container.clear();
    this.container.createComponent(component);
  }
}

👉 @sWebDev

Разница налицо.

👉 @sWebDev | #юмор

Использование ValidatorFn

Что принимает функция-валидатор, созданная с использованием ValidatorFn?

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

👉 @sWebDev

Superfine

Superfine — это минималистичная JavaScript-библиотека для работы с виртуальным DOM, которая позволяет создавать и обновлять пользовательские интерфейсы с минимальными затратами на производительность.

👉 @sWebDev

Eye

Анимация глаза на GSAP.

👉 @sWebDev

Использование изолированных модулей в Angular

Статья описывает поддержку опции isolatedModules в Angular 18.2, которая ускоряет сборку приложения на 10% за счёт использования транспиляции TypeScript через бандлер (например, esbuild) вместо обычного TypeScript. Эта опция позволяет оптимизировать код, инлайнить const и обычные enum, и убрать необходимость в оптимизациях на основе Babel для TypeScript-кода. Для включения этой функции нужно добавить "isolatedModules": true в tsconfig.json.

👉 @sWebDev