Прокси-компонент для управления доступом

Паттерн Компонент-прокси можно применить для более сложных задач, чем управление загрузкой. Его используют для инкапсуляции и разграничения прав доступа к отдельным частям интерфейса.

Прокси-компонент для контроля доступа оборачивает защищенный контент. Он обращается к AuthContext, чтобы получить роль текущего пользователя, и сравнивает её с требуемой ролью, переданной в props. В зависимости от результата проверки, прокси либо отрисовывает дочерние элементы, либо возвращает null или компонент-заглушку.

import { useContext, ReactNode } from 'react';
import { AuthContext } from './AuthContext'; // контекст создан

interface AccessControlProxyProps {
  children: ReactNode;
  requiredRole: 'admin' | 'user';
}

function AccessControlProxy({ children, requiredRole }: AccessControlProxyProps) {
  const { user } = useContext(AuthContext);

  if (user?.role !== requiredRole) {
    return null; // или <AccessDenied />
  }

  return <>{children}</>;
}

👉 @sWebDev

Three.js particle morph

Морфинг частиц между фигурами на Three.js и GSAP.

👉 @sWebDev

Какой должностью лучше представляться, чтобы избежать лишних просьб?

👍 — «Мне платят за то, что я гуглю лучше других».

❤️ — «Ассенизатор цифровых потоков и архивариус темпоральных данных».

🤔 — «Менеджер». Никто не знает, что они делают, и поэтому боятся о чем-то просить.

👉 @sWebDev | #юмор

Dragscroll

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

👉 @sWebDev

Split scroll animation

Анимация разделенной прокрутки на GSAP.

👉 @sWebDev

Профессиональная обработка ошибок в TypeScript

Обработка ошибок через try...catch часто приводит к запутанному коду и потере типизации при работе с any или unknown. Статья предлагает структурированный подход к созданию надёжной системы обработки ошибок в TypeScript. Разбираются паттерны, которые помогают сохранить типобезопасность и сделать код более предсказуемым и поддерживаемым.

👉 @sWebDev

Flair Confetti!

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

👉 @sWebDev

Vidbg.js

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

👉 @sWebDev

Контекст выполнения

Какое ключевое условие необходимо для корректной работы оператора takeUntilDestroyed?

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

👉 @sWebDev

Ваша первая мысль, когда вы дочитали до конца?

👍 — В технических спорах самый весомый аргумент — это работающий (или неработающий) продукт.

❤️ — Злодейский смех.

🤔 — Может, это и есть работа будущего? Не писать код, а находить факапы.

👉 @sWebDev | #юмор

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

Хук 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