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

Ваше первое резюме тоже выглядело беспомощно?

👍 – Очень.

❤️ – Оно до сих пор такое.

🤔 – Нет, сразу было норм.

👉 @sWebDev | #юмор

Адаптивный интерфейс

Хук useMediaQuery отслеживает media-запросы для адаптации интерфейса. Для корректной работы в SSR, где объект window недоступен и нельзя определить размер экрана, хук принимает начальное значение (defaultValue). Оно используется при рендеринге на сервере, а после гидратации на клиенте состояние обновляется до реального.

import { useState, useEffect } from 'react';

function useMediaQuery(query: string, defaultValue = false) {
  const [matches, setMatches] = useState(defaultValue);

  useEffect(() => {
    const mediaQueryList = window.matchMedia(query);
    
    const listener = (event: MediaQueryListEvent) => setMatches(event.matches);

    // Устанавливаем начальное значение после монтирования
    setMatches(mediaQueryList.matches);
    
    mediaQueryList.addEventListener('change', listener);
    return () => mediaQueryList.removeEventListener('change', listener);
  }, [query]);

  return matches;
}

👉 @sWebDev

Heart Animation

Анимация частиц в форме сердца на Three.js и GSAP.

👉 @sWebDev