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

Кто вы в этой сцене?

👍 – Джун.

❤️ – Мидл.

🤔 – Сеньор.

👉 @sWebDev | #юмор

Bliss

Библиотека содержит набор легковесных хелперов, делающих работу с DOM на чистом JavaScript более лаконичной. Она расширяет нативные элементы новыми методами для использования синтаксиса в стиле jQuery без дополнительных зависимостей и обёрток.

👉 @sWebDev

Whimsical SVG hover animation

Анимация SVG-контура при наведении на GSAP.

👉 @sWebDev