Lory

Lory — это легковесная JavaScript-библиотека для создания слайдеров без зависимостей. Она предоставляет минимальный API для создания кастомных слайд-шоу с поддержкой жестов и событий прокрутки.

👉 @sWebDev

Tangent

Абстрактная анимация на Three.js.

👉 @sWebDev

Обработка Взаимодействий С Пользователем: Пять Основных Привязок Событий В Angular 18

Статья обсуждает ключевые события привязки в Angular 18, такие как click, input, blur, change, и submit. В статье подробно описаны способы их использования для обработки взаимодействий пользователя с формами, полями ввода, кнопками и другими элементами интерфейса.

👉 @sWebDev

THE EYE

Артхаусная анимация глаза на GSAP.

👉 @sWebDev

Wavesurfer.js

Wavesurfer.js — это библиотека JavaScript для визуализации аудиофайлов. Она предоставляет гибкий способ отображать аудиоволны в веб-приложениях, а также обеспечивает базовые возможности для воспроизведения, паузы, перемотки и изменения громкости звука. Библиотека поддерживает взаимодействие пользователя с аудиофайлами, позволяет визуализировать любые аудиоисточники (например, загруженные файлы или URL) и легко кастомизируется для различных целей.

👉 @sWebDev

Работа с методом createPortal

Что делает метод createPortal в React?

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

👉 @sWebDev

Часто пропускаете документацию?

👍 - Да.

❤️ - Обращаюсь к ней только если что-то не работает.

🤔 - Нет, это же база.

👉 @sWebDev | #юмор

Декоратор HostListener для работы с нестандартными пользовательскими событиями

В Angular декоратор @HostListener предоставляет удобный способ прослушивания событий, происходящих в DOM-элементах. Обычно он используется для стандартных событий, таких как клик, наведение мыши или прокрутка. Однако мало кто знает, что @HostListener можно использовать для регистрации и обработки нестандартных событий, включая те, что определены разработчиком, или даже событий, происходящих за пределами стандартных браузерных API.

Пример:

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

@Component({
  selector: 'app-custom-event-listener',
  template: `<p>Нажмите Shift + K, чтобы сработало событие.</p>`
})
export class CustomEventListenerComponent {

  @HostListener('window:keydown', ['$event'])
  handleKeyDown(event: KeyboardEvent) {
    if (event.shiftKey && event.key === 'k') {
      console.log('Комбинация Shift + K нажата!');
      // Здесь можно вызывать любые действия
    }
  }
}

👉 @sWebDev

Bike ride

Анимация езды на велосипеде на GSAP.

👉 @sWebDev

Чувствуете удовлетворение от своего кода?

👍 - Да.

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

👉 @sWebDev | #юмор

Awesomplete

Awesomplete – это библиотека автозаполнения для полей ввода. Она предлагает гибкий и легковесный способ добавления автокомплита на сайты без зависимости от крупных библиотек, таких как jQuery.

👉 @sWebDev

Fluids [TSL]

Анимация шара с лого на Three.js.

👉 @sWebDev

React и FormData

Статья объясняет, как работать с формами в React с использованием API FormData, позволяющего собирать данные из форм. Она охватывает важные моменты, такие как работа с управляемыми и неуправляемыми формами, обработка данных в TypeScript, а также использование инструментов для валидации данных, таких как Zod. Также рассматриваются современные функции React и фреймворки, поддерживающие FormData.

👉 @sWebDev

Sea at sunrise

Анимация моря на Three.js.

👉 @sWebDev

TypeIt

TypeIt – это библиотека JavaScript для анимации ввода текста. Она позволяет анимировать процесс набора текста прямо на странице, имитируя реальное написание.

👉 @sWebDev

Работа с методом trackBy

Для чего используется TrackBy в Angular?

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

👉 @sWebDev

Как думаете сколько здесь?

👍 - 250px.

❤️ - 25px.

👉 @sWebDev | #юмор

Декоратор @ViewChild с опцией { static: true } в Angular

@ViewChild в Angular предоставляет доступ к элементам DOM и дочерним компонентам в шаблоне. Опция { static: true } позволяет получить ссылку на элемент до инициализации представления, что полезно в случаях, когда к элементу нужно обратиться в ngOnInit.

Когда у @ViewChild установлено { static: true }, ссылка будет доступна в ngOnInit, а не только в ngAfterViewInit. Это может быть полезно для предварительной инициализации значений, которые зависят от состояния элементов шаблона. Например:

@ViewChild('myElement', { static: true }) myElement!: ElementRef;

ngOnInit() {
    console.log(this.myElement.nativeElement); // доступно уже здесь
}

Важно помнить, что если элемент в шаблоне может быть динамически добавлен или удален с помощью *ngIf, лучше использовать { static: false }, так как это предотвратит ошибки в доступе к элементу.

👉 @sWebDev