Обработка внешних кликов

Хук useOnClickOutside вызывает колбэк при клике вне группы отслеживаемых элементов, указанных в массиве refs. Для надежности используется событие mousedown, а не click. mousedown срабатывает до возможного удаления элемента из DOM, предотвращая баги, когда цель клика исчезает до проверки.

import { useEffect } from 'react';

function useOnClickOutside(refs, handler) {
  useEffect(() => {
    const listener = (event) => {
      if (refs.every(ref => !ref.current?.contains(event.target))) {
        handler(event);
      }
    };
    document.addEventListener('mousedown', listener);
    return () => document.removeEventListener('mousedown', listener);
  }, [refs, handler]);
}

👉 @sWebDev

Scroll-driven frame animation

Покадровая анимация, управляемая прокруткой, на GSAP.

👉 @sWebDev

Как победить неявное приведение типов?

👍 — Всегда использовать строгую проверку ===.

❤️ — Молиться.

🤔 — Использовать TypeScript.

👉 @sWebDev | #юмор

Kefir.js

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

👉 @sWebDev

Cinematic glitch slideshow

Слайдшоу с кинематографическим глитч-эффектом на Three.js и GSAP.

👉 @sWebDev

Зачем нужен паттерн Render Props в React

Когда нужно переиспользовать логику компонента, но с разным отображением, на помощь приходит паттерн Render Props. Статья наглядно объясняет, как передача функции через props помогает отделить поведение от представления, делая компоненты более гибкими. В материале разбираются практические примеры и проводится сравнение с кастомными хуками, чтобы вы могли выбрать правильный инструмент для своей задачи.

👉 @sWebDev

Chrome mirror ball

3D-сцена с отражениями в реальном времени на Three.js.

👉 @sWebDev

Slip.js

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

👉 @sWebDev

Логика предиката

Какую роль выполняет функция-предикат в хуке, который условно сохраняет предыдущее значение состояния?

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

👉 @sWebDev

Когда разработчик открыл свой бизнес.

👍 — Название домена купил, дальше лень.

❤️ — Главное вовремя закрыться.

👉 @sWebDev | #юмор

Безопасные асинхронные операции

Хук useIsMounted решает проблему вызова обновления состояния в размонтированном компоненте. Она возникает, когда асинхронная операция (например, fetch) завершается уже после того, как пользователь покинул страницу и компонент был удален из DOM.

Хук использует useRef для хранения флага, который устанавливается в true при монтировании компонента. Перед обновлением состояния асинхронная функция проверяет этот флаг. Важно, что useRef, а не useState, используется для хранения флага, чтобы его изменение не вызывало повторный рендер компонента.

import { useRef, useEffect } from 'react';

function useIsMounted() {
  const isMountedRef = useRef(true);

  useEffect(() => {
    return () => {
      isMountedRef.current = false;
    };
  }, []);

  return () => isMountedRef.current;
}

👉 @sWebDev

Flip Grid Size

Анимация изменения сетки галереи на GSAP.

👉 @sWebDev

Похоже на ваш карьерный путь?

👍 – 100%.

❤️ – Мой был еще хуже.

🤔 – У меня еще не началась карьера.

👉 @sWebDev | #юмор

MinDom

Библиотека MinDom предоставляет легковесный набор утилит для манипуляций с DOM и управления событиями. Она будет полезна в проектах, где требуется базовое взаимодействие с DOM без подключения тяжёлых фреймворков.

👉 @sWebDev

ThreeJS Shadow

3D-сцена с интерактивными тенями от статуй Моаи на Three.js.

👉 @sWebDev

Прощай, Zone.js: ускоряем Angular с помощью Signal API

Механизм Zone.js в Angular часто приводит к лишним проверкам и падению производительности из-за глобального отслеживания изменений. Статья разбирает, как новый Signal API и Zoneless-подход решают эту проблему. На примерах и замерах производительности показывается, как точечная реактивность сигналов устраняет избыточные перерисовки и ускоряет приложение.

👉 @sWebDev

Spooky Spectral Ghost

Интерактивная сцена с призраком и спектральными эффектами на Three.js.

👉 @sWebDev

Chocolat

Chocolat — адаптивная лайтбокс-галерея для изображений. Она позволяет создавать всплывающие галереи с поддержкой навигации и полноэкранного режима.

👉 @sWebDev

Поведение при отказе в доступе

Что отобразит прокси-компонент для контроля доступа, если у пользователя нет требуемой роли?

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

👉 @sWebDev