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

Ваши действия?

👍 - Взять и сделать.

❤️ - Притвориться, что не слышишь.

👉 @sWebDev | #юмор

Работа с NgZone

Для чего используется метод runOutsideAngular()?

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

👉 @sWebDev

Sprite.js

Sprite.js — фреймворк для 2D-анимаций на Canvas и WebGL. Позволяет легко работать со спрайтами, фигурами и анимацией для веб-приложений.

👉 @sWebDev

Twisting

Анимация спирали из прямоугольников наThree.js.

👉 @sWebDev

Понимание шаблона ресурсов Angular 19: практическое руководство

Статья описывает ресурсный паттерн в Angular для управления состоянием запросов. Используя resource и rxResource, автор демонстрирует создание загрузчиков данных, работу с состояниями (загрузка, ошибка, успех) и обработку запросов с помощью Promise и Observable. Пример с CRUD-приложением для продуктов объясняет использование этих подходов в реальных проектах.

👉 @sWebDev

Strange tubes

Интерактивная анимация цветных труб на Three.js.

👉 @sWebDev

Ogl

Ogl — легковесный WebGL-фреймворк для создания интерактивной 3D-графики. Поддерживает модели, текстуры и шейдеры.

👉 @sWebDev

Как вы относитесь к новым фреймворкам?

👍 - Надо пробовать.

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

🤔 - Пишу на чистом JS, мне хватает. (Что я делаю в этом канале?)

👉 @sWebDev | #юмор

Animation on scroll

Скролл-анимация пчелы на Three.js.

👉 @sWebDev

Использование Injector.create() для динамического создания зависимостей

В Angular зависимости обычно предоставляются через инжекторы, зарегистрированные в дереве компонентов или на уровне приложения. Однако в некоторых случаях может потребоваться создать зависимость вне контекста стандартного механизма DI (Dependency Injection). Метод Injector.create() предоставляет возможность вручную создать инжектор и настроить его с необходимыми зависимостями.

Пример:

import { Injector } from '@angular/core';

class LoggerService {
  log(message: string) {
    console.log('Logger:', message);
  }
}

// Создаем локальный инжектор с конфигурацией
const injector = Injector.create({
  providers: [
    { provide: LoggerService, useClass: LoggerService }
  ]
});

// Получаем экземпляр LoggerService из инжектора
const logger = injector.get(LoggerService);
logger.log('Динамическое создание зависимости выполнено!');

В данном примере создается инжектор, регистрирующий LoggerService в локальном контексте.

👉 @sWebDev

Любите "наводить красоту" в своем коде?

👍 - Да.

❤️ - Нет, код — это про функциональность.

🤔 - Иногда, если есть время.

👉 @sWebDev | #юмор

Назначение AnimationBuilder

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

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

👉 @sWebDev

Detect.js

Detect.js — библиотека для определения типа устройства, браузера, версии операционной системы и других характеристик клиента. Это полезно для адаптации интерфейса под разные платформы или для отображения специфического контента.

👉 @sWebDev

Interactive Christmas Tree

Интерактивная новогодняя елка на Three.js.

👉 @sWebDev

Как настроить автофокус с помощью React Hooks

В статье объясняется, как с помощью React Hooks легко добавить автофокус на элементы формы. На простых примерах показано, как использовать useRef, чтобы сделать интерфейс удобнее и отзывчивее.

👉 @sWebDev

Snowfall!

Анимация курсора в виде шлейфа снежинок на GSAP.

👉 @sWebDev

Wow.js

Wow.js — это JavaScript-библиотека, которая добавляет анимации элементам страницы при прокрутке. Она автоматически выявляет элементы, которые попадают в видимую область окна браузера, и применяет к ним CSS-анимации.

👉 @sWebDev

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

👍 - Да, работать вместе отлично.

❤️ - Нет, это замедляет процесс.

🤔 - Насчет скорости не знаю, зато не скучно!

👉 @sWebDev