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

RoughViz.js

RoughViz.js — библиотека для визуализации данных в «рисованном» стиле, основанная на d3 и Rough.js. Поддерживает диаграммы, круговые графики и гистограммы. Подойдёт для инфографики, презентаций и нестандартных визуальных интерфейсов.

👉 @sWebDev

Сколько экранов вам нужно?

👍 — Два или три норм.

❤️ — Одиного хватает.

🤔 — Экраны? Есть же AR/VR очки.

👉 @sWebDev | #юмор

Producer-Consumer Pattern

Интерактивная анимация потоковой очереди на GSAP.

👉 @sWebDev

Получение зависимостей из активного маршрута

Свойство injector у RouterOutlet позволяет напрямую получить зависимости, предоставленные активным маршрутом. Это полезно при работе с динамическими компонентами, вложенными маршрутами и Standalone-архитектурой, где требуется доступ к провайдерам из маршрута без дополнительных обёрток.

import { Component, ViewChild } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { MyService } from './my.service';

@Component({
  selector: 'app-shell',
  template: `<router-outlet #outlet="outlet"></router-outlet>`,
})
export class ShellComponent {
  @ViewChild('outlet', { static: true }) outlet!: RouterOutlet;

  ngAfterViewInit() {
    const myService = this.outlet.injector.get(MyService);
    myService.log();
  }
}

Если MyService предоставлен только в маршруте, то доступ к нему возможен только через RouterOutlet.injector. Это исключает необходимость передачи данных через @Input или общие сервисы.

👉 @sWebDev

Как изменились ваши ожидания от IT-карьеры?

👍 – Реальность оказалась совсем другой, заставив стать более прагматичным(ой).

❤️ – Мои ожидания полностью соответствуют действительности.

🤔 – Я еще не понял(а).

👉 @sWebDev | #юмор

Назначение метода onDestroy()

Зачем используется метод onDestroy()?

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

👉 @sWebDev

Smartcrop.js

Smartcrop.js — библиотека для умного кадрирования изображений. Автоматически находит визуально важные области и обрезает изображение под заданный размер. Подойдёт для аватаров, превью и адаптивной медиавёрстки.

👉 @sWebDev

Ammo.js demo

Интерактивная анимация вращающегося куба с предметами на Ammo.js.

👉 @sWebDev

Контекст в React: различие между родительскими и владельцами компонентов

В React важно понимать разницу между родительскими и владельцами компонентов, особенно при работе с контекстом. Родитель — это компонент, в котором вложен другой, а владелец — тот, который его рендерит. Это различие влияет на обновления: при изменении состояния перерисовываются компоненты во владении, а не все вложенные. В статье показано, как вынести Context.Provider и состояние в отдельный компонент, чтобы избежать лишних перерисовок и улучшить производительность. Подходит тем, кто хочет глубже разобраться в механизмах обновления и оптимизации React-приложений.

👉 @sWebDev

Align HTML Elements to 3D Globe

Интерактивная анимация глобуса с настройкой отображения названий на Three.js.

👉 @sWebDev

Trianglify

Trianglify — JavaScript-библиотека для генерации фоновых узоров из треугольников с помощью Delaunay-триангуляции. Поддерживает кастомизацию цветов, размеров и плотности. Подойдёт для генерации фоновых изображений, placeholder’ов и декоративных элементов.

👉 @sWebDev

Главное правило вайб-кодера?

👍 – Не спрашивать, как это работает.

❤️ – Если работает – не трогать.

🤔 – Не говорить о вайб-кодинге на ревью.

👉 @sWebDev | #юмор

Snake Game

Игра "Змейка" на GSAP.

👉 @sWebDev

Предзагрузка ресурсов с помощью ReactDOM.preinit()

Метод ReactDOM.preinit() регистрирует ресурс (например, скрипт или стили), который React должен начать загружать до начала рендеринга. Такой подход ускоряет время отображения контента за счёт раннего запроса критических файлов. Метод не выполняет загрузку — он сообщает React, что ресурс уже начал загружаться или должен быть загружен, и исключает дублирование при отрисовке.

import ReactDOM from 'react-dom';

ReactDOM.preinit('https://example.com/script.js', { as: 'script' });
ReactDOM.preinit('/style.css', { as: 'style', precedence: 'high' });

Сценарий: если известно, что модуль или стиль понадобится в первом кадре (например, в suspense-компоненте или при серверной вставке), вызов preinit() до рендера уменьшает задержку между HTML и визуальным отображением. Поддерживаются типы 'script', 'style', 'font', 'image', 'fetch', 'worker'.

👉 @sWebDev

Чего не хватает современному минимализму?

👍 – Душевных интро-роликов уровня Flash.

❤️ – Ничего, лишние эффекты только отвлекают.

👉 @sWebDev | #юмор

Работа с ChangeDetectorRef.detach()

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

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

👉 @sWebDev

Jump.js

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

👉 @sWebDev

Astral temple, 3d tarot display

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

👉 @sWebDev