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

Свойство 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

CustomMarquee

Анимация бегущей строки на GSAP.

👉 @sWebDev

Glfx.js

Glfx.js — JavaScript-библиотека для применения визуальных эффектов к изображениям с использованием WebGL. Включает размытие, контраст, кривизну, пикселизацию и другие фильтры. Подойдёт для фоторедакторов, медиаплатформ и визуальных экспериментов.

👉 @sWebDev

Результат выборки

Что будет содержать QueryList, если использовать ContentChildren с read: TemplateRef?

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

👉 @sWebDev

Что бесит сильнее всего, когда ищешь работу?

👍 – Тишина после отклика.

❤️ – Бесконечная цепочка интервью.

🤔 – Ощущение, что на вакансию откликнулся весь твой город.

👉 @sWebDev | #юмор

Подписка на внешний стор с выборкой

Хук useSyncExternalStoreWithSelector() используется для подписки на внешний стор с избирательным обновлением компонента. Он расширяет useSyncExternalStore() за счёт функции выбора и сравнения: обновление вызывается только при изменении выбранного значения. Это снижает количество перерендеров при работе с глобальным состоянием.

import { useSyncExternalStoreWithSelector } from 'react';

function useCustomStore(selector, isEqual) {
  return useSyncExternalStoreWithSelector(
    subscribe, // подписка на стор
    getSnapshot, // получение полного состояния
    getSnapshot, // серверный snapshot
    selector, // выбор нужного значения
    isEqual // функция сравнения
  );
}

При вызове хука можно передать selector, чтобы отслеживать только часть состояния, и isEqual, чтобы предотвратить обновление при эквивалентных значениях. Может пригодиться при подписке на сложные сторы, например, Redux без лишних обёрток.

👉 @sWebDev

Twisted Torus

Анимация фигур на Three.js.

👉 @sWebDev

Как вы тестируете код, сгенерированный нейронкой?

👍 – Пускаю на прод — если выживет, значит норм.

❤️ – Смотрю в код и надеюсь на чудо.

🤔 – Проверка? А где кнопка “Deploy”?

👉 @sWebDev | #юмор

iNoBounce

iNoBounce — библиотека для отключения «резинового» скролла на мобильных устройствах iOS. Решает проблему неконтролируемой прокрутки за пределы контента.

👉 @sWebDev

GridClash

Игра три в ряд на Three.js.

👉 @sWebDev

Основы тестирования во Vue с использованием Vitest

В статье объясняется, как писать модульные тесты во Vue-проектах с использованием Vitest — современного и быстрого инструмента, совместимого с Vite. Разбираются базовые принципы, настройка окружения и примеры тестов для компонентов. Полезно тем, кто только осваивает тестирование во Vue и хочет понять, с чего начать.

👉 @sWebDev

Morphing Particle Sphere

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

👉 @sWebDev

SimplyCountdown.js

SimplyCountdown.js — JavaScript-библиотека для создания простого таймера обратного отсчёта. Не требует зависимостей, настраивается через HTML-атрибуты или JavaScript-объекты. Подойдёт для лендингов, акций, мероприятий и виджетов с ограниченным временем.

👉 @sWebDev