Frontender Libs - обзор библиотек JS / CSS

Flip Grid Size

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

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

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

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

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

👉 @sWebDev | #юмор

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

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

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

👉 @sWebDev

Slip.js

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

👉 @sWebDev

Chrome mirror ball

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

👉 @sWebDev

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

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

👉 @sWebDev

Cinematic glitch slideshow

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

👉 @sWebDev

Kefir.js

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

👉 @sWebDev

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

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

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

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

👉 @sWebDev | #юмор

Scroll-driven frame animation

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

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

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

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

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

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

👉 @sWebDev | #юмор

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

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

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

👉 @sWebDev

Vidbg.js

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

👉 @sWebDev

Flair Confetti!

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

👉 @sWebDev

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

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

👉 @sWebDev

Split scroll animation

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

👉 @sWebDev