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

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

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

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

👉 @sWebDev

Wavesurfer.js

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

👉 @sWebDev

THE EYE

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

👉 @sWebDev

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

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

👉 @sWebDev

Tangent

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

👉 @sWebDev

Lory

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

👉 @sWebDev

Чем больше вы углубляетесь в программирование, тем сложнее оно вам кажется?

❤️ - Да, приходится постоянно держать в голове кучу информации.

👍 - Иногда что-то забываешь, но в целом справляюсь.

🤔 - Знания растут и с опытом легче справляться с новым.

👉 @sWebDev | #юмор

Poppy

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

👉 @sWebDev

Внедрение необязательных зависимостей в Angular

Декоратор @Optional() в Angular используется для указания того, что зависимость может быть необязательной. Если нужная зависимость отсутствует, Angular не выбросит ошибку, а просто передаст null. Это полезно, когда сервис или зависимость может не всегда быть доступна в контексте компонента.

Пример:

import { Component, Optional } from '@angular/core';
import { LoggingService } from './logging.service';

@Component({
  selector: 'app-optional-demo',
  template: `<p>Декоратор @Optional() пример</p>`
})
export class OptionalDemoComponent {
  constructor(@Optional() private loggingService: LoggingService) {
    if (this.loggingService) {
      this.loggingService.log('Logging service is available');
    } else {
      console.log('Logging service is not available');
    }
  }
}

В этом примере сервис LoggingService внедряется как необязательный. Если он не зарегистрирован, вместо ошибки просто будет выведено сообщение о его отсутствии.

👉 @sWebDev

HTTP 404 в реальной жизни.

👉 @sWebDev | #юмор

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

Как обычно передаются классы в директиву NgClass?

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

👉 @sWebDev

Timeago.js

Timeago.js — это библиотека для динамического форматирования времени в стиле "3 минуты назад" или "2 часа назад". Она автоматически обновляет текстовую метку времени на основе текущего времени, что удобно для создания лент новостей, чатов и систем комментариев. Библиотека поддерживает множество языков и является легковесной, что делает её отличным выбором для любого веб-приложения.

👉 @sWebDev

Invasive cows

Скролл-анимация с коровами на GSAP.

👉 @sWebDev

Представляем @svg-use

В статье рассказывается о создании и использовании библиотеки @svg-use для работы с SVG-иконками в JavaScript-приложениях, таких как React. Основное внимание уделено оптимизации загрузки SVG-файлов с помощью <use href>, а не через инлайновые SVG, что снижает нагрузку на JS-бандлы и DOM. Также рассматриваются плюсы и минусы использования этой техники и перспективы для будущих стандартов веб-разработки.

👉 @sWebDev

GSAP GRID

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

👉 @sWebDev

Filesize.js

Filesize.js — библиотека для форматирования размера файлов в удобочитаемый вид, например, "1.2 MB" или "150 KB". Она поддерживает различные системы единиц измерения и может округлять значения до нужного количества знаков после запятой. Используется в интерфейсах для отображения информации о размере загружаемых и скачиваемых файлов.

👉 @sWebDev

А как часто вы видите подобные комментарии в коде?

👍 — Часто.

❤️ — Такие комментарии после меня.

👉 @sWebDev | #юмор

Philosophy any form of art

Генератор абстракций на Three.js.

👉 @sWebDev