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

✅ Сохраняйте мегашпаргалку с полезными нейросетями на все случаи жизни от Сергея Фролова.

Вот самое крутое:
🤩Claude 3.7 Sonnet — мастхев для программистов
🤩Skyreels AI — превращает любой текст в длинное видео
🤩Openrouter — доступ ко всем ИИ
🤩Suno AI — своя музыка с нейросетью

Подпишись и находи для себя мощные нейросети бесплатно: https://t.me/+VjFnutGM-r1lNmQy

Heatmap 3D

Анимация планеты на Three.js.

👉 @sWebDev

Изоляция внедрения зависимостей

Флаг InjectFlags.SkipSelf позволяет пропустить текущий инжектор и искать зависимость в родительских инжекторах. Это используется, когда в компоненте не должно быть локальных определений сервиса, а требуется внедрить его из вышестоящего уровня, например, из родителя или модуля.

Например, компонент внедряет ConfigService, но пропускает локальный провайдер и получает зависимость извне:

import { Component, Inject, inject, InjectionToken, InjectFlags } from '@angular/core';

export const CONFIG_TOKEN = new InjectionToken<string>('Config');

@Component({
  selector: 'child-component',
  template: `Config: {{ value }}`,
  providers: [{ provide: CONFIG_TOKEN, useValue: 'локальная конфигурация' }]
})
export class ChildComponent {
  value = inject(CONFIG_TOKEN, InjectFlags.SkipSelf);
}

В этом случае будет получено значение из родительского инжектора, даже если в текущем компоненте есть свой провайдер CONFIG_TOKEN.

👉 @sWebDev

Что больнее для разработчика?

👍 - Увидеть 502 на своем проекте.

❤️ - Объяснять пользователю, что роутер тут ни при чем.

👉 @sWebDev | #юмор

Тип представления в Angular

Какой тип представления в Angular представляет собой экземпляр шаблона, а не компонента?

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

👉 @sWebDev

Slideout.js

Slideout.js — небольшая библиотека для создания боковых выезжающих меню. Поддерживает свайпы, не зависит от сторонних фреймворков и подходит для адаптивных интерфейсов на мобильных и десктопных устройствах.

👉 @sWebDev

Animated Galaxy and Ribbons

Анимация галактики на Three.js.

👉 @sWebDev

LinkedSignal в Angular 19: управление состоянием, зависящим от других сигналов

Когда одно состояние зависит от другого, легко запутаться в логике обновлений. linkedSignal решает эту проблему — он синхронизирует изменения автоматически, упрощая управление связанными данными в компонентах. В статье — разбор, чем linkedSignal отличается от других сигналов, и как применять его в реальных сценариях, чтобы избежать лишней логики и багов.

👉 @sWebDev

Dynamic Lens Flare Shader

Интерактивная анимация фона на Three.js.

👉 @sWebDev

Notie

Notie — это минималистичная библиотека для отображения уведомлений, подтверждений и запросов в браузере. Не требует зависимостей, легко настраивается и подходит для быстрого информирования пользователя без перегрузки интерфейса.

👉 @sWebDev

Считаете ли вы формат "за час" хорошим стартом?

👍 - Да, идеально, чтобы попробовать и не испугаться.

❤️ - Нет, лучше сразу настроиться на серьезное обучение.

👉 @sWebDev | #юмор

Shader & Light Experiments

Анимация освящения фона на Three.js.

👉 @sWebDev

Ручной запуск обновления

Метод ɵmarkDirty() в Angular вручную помечает компонент как «грязный», инициируя обновление при следующем цикле детекции изменений. Это используется вне зоны Angular (например, в стороннем коде), и работает только с ChangeDetectionStrategy.OnPush.

import {
  Component,
  ChangeDetectionStrategy,
  ɵmarkDirty
} from '@angular/core';

declare const externalClick: (cb: () => void) => void;

@Component({
  selector: 'app-alert',
  template: `<p *ngIf="visible">Внешнее событие!</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AlertComponent {
  visible = false;

  ngOnInit() {
    externalClick(() => {
      this.visible = true;
      ɵmarkDirty(this);
    });
  }
}

В этом примере внешний обработчик (externalClick) активирует компонент, не запуская Angular change detection. Мы вручную вызываем ɵmarkDirty(this), чтобы Angular отрендерил компонент на следующем проходе.

👉 @sWebDev

А каким «файлообменником» пользуетесь вы?

👍 – GitHub или Гугл-диск.

❤️ – Фотографирую код и отправляю в мессенджеры.

👉 @sWebDev | #юмор

Как работает flushSync?

Что делает метод flushSync() в React?

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

👉 @sWebDev

NProgress

NProgress — миниатюрная библиотека для добавления индикатора загрузки в верхней части веб-страницы. Позволяет визуально показать прогресс загрузки или выполнения задачи.

👉 @sWebDev

Particle Flow

Пример скролл-анимации на GSAP и Three.js.

👉 @sWebDev

Адаптивное видеостриминг с использованием Dash.js в React

Стандартный видеоплеер в браузере часто не справляется с разной скоростью интернета пользователей, вызывая паузы и зависания. Статья показывает, как решить эту проблему с помощью адаптивного битрейт-стриминга (ABR) на основе Dash.js. Автор объясняет, как настроить сегментирование видео, использовать FFmpeg и интегрировать Dash.js в React-приложение, чтобы обеспечить плавное воспроизведение при любом соединении.

👉 @sWebDev