Декларативное управление подписками

Стандартная отписка от Observable в ngOnDestroy громоздка и провоцирует утечки памяти.

Пакет @angular/core/rxjs-interop предлагает более чистое решение. Оператор takeUntilDestroyed декларативно связывает жизненный цикл подписки с жизненным циклом компонента. Подписка автоматически завершится при уничтожении компонента. Важным условием его работы является вызов в инъекционном контексте, например, в конструкторе компонента.

import { Component, inject } from '@angular/core';
import { interval } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-news-feed',
  template: '<p>Последнее обновление: {{ time }}</p>',
  standalone: true,
})
export class NewsFeedComponent {
  time = 0;

  constructor() {
    interval(1000)
      .pipe(takeUntilDestroyed())
      .subscribe(value => {
        this.time = value;
        console.log(`Новое событие: ${value}`);
      });
  }
}

👉 @sWebDev

Pixel notepad

Интерактивный пиксельный блокнот на Draggable.js.

👉 @sWebDev

Какой вывод делаем?

👍 — Что в реальном мире иногда приходится идти на компромиссы.

❤️ — Что самый быстрый способ починить код — это его удалить.

🤔 — Что тимлид — уставший человек, которому нужна помощь и, возможно, отпуск.

👉 @sWebDev | #юмор

Moveable

Наделить DOM-элементы возможностью свободного перемещения и масштабирования вручную является непростой задачей. Библиотека Moveable инкапсулирует данную сложную логику и содержит готовые инструменты для манипуляции объектами в реальном времени. Этот инструмент отлично подходит для создания интерактивных редакторов, настраиваемых дашбордов или любых приложений с drag-and-drop интерфейсом.

👉 @sWebDev

Landing page with GSAP & Tailwind CSS

Анимация элементов на странице на GSAP.

👉 @sWebDev

Как React Fiber улучшает производительность рендеринга

Когда приложение React начинает «тормозить» при больших обновлениях, проблема часто кроется в блокировке основного потока. Статья подробно объясняет, как архитектура React Fiber решает данную проблему. Разбирается, как Fiber позволяет разбивать рендеринг на части и приостанавливать его, чтобы интерфейс оставался отзывчивым. Понимание этого механизма помогает писать более производительный код.

👉 @sWebDev

Metaballs hero section with ThreeJS

Анимация объектов с эффектом магнетизма на Three.js.

👉 @sWebDev

Atropos.js

Интерактивные элементы часто выглядят плоскими и не привлекают внимание. Atropos.js решает эту проблему, создавая трёхмерный параллакс-эффект при наведении курсора. Библиотека помогает добавить глубину карточкам, баннерам и другим блокам, делая интерфейс более живым и запоминающимся.

👉 @sWebDev

Определение типа

Что представляет собой тип ReactElement в контексте React?

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

👉 @sWebDev

Представьте, что это случилось. На что вы потратите освободившееся время?

👍 — Наконец-то разберу свой бэклог из курсов, книг и собственных проектов.

❤️ — Буду лежать и деградировать с удовольствием.

🤔 — Попробую найти новую работу, которую ИИ пока не заменил.

👉 @sWebDev | #юмор

Отслеживание значения с условием

Базовый хук usePrevious можно уточнить, добавив выборочное сохранение. Такой хук принимает вторым аргументом предикат-функцию, которая решает, нужно ли обновлять "предыдущее" значение.

Внутренний ref хука изменится только при положительном ответе предиката. Это позволяет отслеживать не последнее значение, а последнее, подошедшее под определенное правило.

import { useEffect, useRef } from 'react';

function useConditionalPrevious<T>(
  value: T,
  predicate: (prev: T, current: T) => boolean
) {
  const previousRef = useRef<T>();
  const currentRef = useRef<T>(value);

  useEffect(() => {
    if (predicate(currentRef.current, value)) {
      previousRef.current = currentRef.current;
    }
    currentRef.current = value;
  }, [value, predicate]);

  return previousRef.current;
}

👉 @sWebDev

Rain

Настраиваемая анимация дождя на Three.js.

👉 @sWebDev

Умение правильно гуглить — это 50% успеха в работе программиста. Умение вспомнить, как ты гуглил, — остальные 50%.

👍 — Это хороший повод выработать привычку сразу сохранять в закладки или в базу знаний полезные ссылки.

❤️ — Скоро AI будет искать за нас, и этот навык отомрет, как умение писать на ассемблере.

👉 @sWebDev | #юмор

Swapy

Заставить элементы в списке плавно меняться местами при перетаскивании может быть непросто. Библиотека Swapy создана специально для реализации такого drag-to-swap поведения и не зависит от фреймворков. Она берёт на себя всю сложную логику обработки событий и анимаций, чтобы вы могли добавить интуитивный обмен элементов в любой список или сетку.

👉 @sWebDev

Night Highway

Анимация ночной дороги на Three.js.

👉 @sWebDev

Создание WYSIWYG-редактора на React и Draft.js

Попытка построить свой редактор на contenteditable часто заканчивается борьбой с непредсказуемым поведением браузеров. Статья показывает, как фреймворк Draft.js помогает навести порядок в этом хаосе. В ней разбирается структурированный подход к управлению состоянием редактора, обработке стилей и созданию плагинов, который позволяет построить надёжный и расширяемый WYSIWYG-инструмент.

👉 @sWebDev

Classic Watch

Фотореалистичный рендер часов на Three.js и WebGi.

👉 @sWebDev

Mermaid

Создание диаграмм в графических редакторах отнимает много времени, а поддерживать их в актуальном состоянии ещё сложнее. Библиотека Mermaid решает эту проблему, позволяя описывать схемы и графики текстом, прямо как в Markdown. Такой подход упрощает версионирование и встраивание диаграмм в документацию или веб-приложения.

👉 @sWebDev

Условие выполнения

При каком условии вызывается колбэк, переданный в useDebouncedEffect?

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

👉 @sWebDev