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

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

👉 @sWebDev

Smooth GSAP Text Reveal Animation

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

👉 @sWebDev

Gridstack.js

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

👉 @sWebDev

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

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

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

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

Работа с ChangeDetectionStrategy.OnPush

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

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

👉 @sWebDev

Жизненно?

👍 - Да.

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

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

Small heart animation

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

👉 @sWebDev

Согласны с диаграммой?

👍 - Да.

❤️ - А минусы будут?

👉 @sWebDev | #юмор

Turbolinks

Turbolinks — это библиотека, которая ускоряет навигацию на веб-сайтах, загружая только HTML-содержимое страницы вместо полной перезагрузки.

👉 @sWebDev

Particle Emitter

Генератор искр на Pixi.js.

👉 @sWebDev

Как преобразовать приложение на Angular с помощью Signals

Статья описывает, как использовать библиотеку Signals для управления состоянием и реактивными обновлениями в приложениях на Angular. Автор объясняет, как интегрировать Signals в существующий проект Angular для улучшения производительности и упрощения работы с состоянием.

👉 @sWebDev

Perlin Waves on PIXI

Шум Перлина для создания волновых эффектов с использованием библиотеки Pixi.js.

👉 @sWebDev

Pica

Pica — это библиотека JavaScript для масштабирования изображений в браузере, что делает её полезной для приложений, где требуется качественная обработка изображений без серверных запросов.

👉 @sWebDev

Использование хука useFieldArray

Для чего используется хук useFieldArray?

Забыли? Вернитесь к посту от 16.09.2024.

👉 @sWebDev

Интересный фильм мог бы получиться.

👉 @sWebDev | #юмор

Как использовать директиву NgClass для динамической привязки стилей к компонентам

Директива NgClass в Angular динамически применяет CSS-классы к элементам в зависимости от состояния компонента. Это позволяет гибко назначать или удалять классы на основе условий.

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

<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">
  Этот элемент будет активен или отключен в зависимости от состояния.
</div>

Классы active и disabled применяются в зависимости от переменных isActive и isDisabled.

Динамическая привязка через объект:

NgClass часто используется для привязки классов через объект, где ключи — это имена классов, а значения — булевые выражения.

@Component({
  selector: 'app-example',
  template: `<button [ngClass]="buttonClasses">Кнопка</button>`
})
export class ExampleComponent {
  isActive = true;
  isDisabled = false;

  get buttonClasses() {
    return {
      'btn-active': this.isActive,
      'btn-disabled': this.isDisabled
    };
  }
}

👉 @sWebDev

Solar System Scale Model

Анимированная солнечная система на Vue.js.

👉 @sWebDev