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

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

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

👉 @sWebDev

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

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

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

👉 @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

Snake Game

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

👉 @sWebDev

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

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

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

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

👉 @sWebDev | #юмор

Trianglify

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

👉 @sWebDev

Align HTML Elements to 3D Globe

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

👉 @sWebDev

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

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

👉 @sWebDev

Ammo.js demo

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

👉 @sWebDev

Smartcrop.js

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

👉 @sWebDev

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

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

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

👉 @sWebDev

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

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

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

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

👉 @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

Producer-Consumer Pattern

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

👉 @sWebDev

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

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

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

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

👉 @sWebDev | #юмор

RoughViz.js

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

👉 @sWebDev

Ferris Wheel

Анимация обзорного колеса на Three.js.

👉 @sWebDev

RxJS в Angular 16: актуальные практики работы с потоками

В Angular 16 появились Signals, но RxJS остаётся важной частью экосистемы. В статье разбираются подходы, которые помогают сочетать оба инструмента: когда использовать Observables, а когда Signals, как избегать дублирования логики и улучшать читаемость кода. Материал полезен тем, кто хочет привести работу с потоками к более понятной и устойчивой архитектуре.

👉 @sWebDev