Landing page with GSAP & Tailwind CSS

Анимация элементов на странице на GSAP.

👉 @sWebDev

Как React Fiber улучшает производительность рендеринга

Когда приложение React начинает «тормозить» при больших обновлениях, проблема часто кроется в блокировке основного потока. Статья подробно объясняет, как архитектура React Fiber решает данную проблему. Разбирается, как Fiber позволяет разбивать рендеринг на части и приостанавливать его, чтобы интерфейс оставался отзывчивым. Понимание этого механизма помогает писать более производительный код.

👉 @sWebDev

Metaballs hero section with ThreeJS

Анимация объектов с эффектом магнетизма на Three.js.

👉 @sWebDev

Atropos.js

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

👉 @sWebDev

Определение типа

Что представляет собой тип ReactElement в контексте React?

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

👉 @sWebDev

Представьте, что это случилось. На что вы потратите освободившееся время?

👍 — Наконец-то разберу свой бэклог из курсов, книг и собственных проектов.

❤️ — Буду лежать и деградировать с удовольствием.

🤔 — Попробую найти новую работу, которую ИИ пока не заменил.

👉 @sWebDev | #юмор

Отслеживание значения с условием

Базовый хук usePrevious можно уточнить, добавив выборочное сохранение. Такой хук принимает вторым аргументом предикат-функцию, которая решает, нужно ли обновлять "предыдущее" значение.

Внутренний ref хука изменится только при положительном ответе предиката. Это позволяет отслеживать не последнее значение, а последнее, подошедшее под определенное правило.

import { useEffect, useRef } from 'react';

function useConditionalPrevious<T>(
  value: T,
  predicate: (prev: T, current: T) => boolean
) {
  const previousRef = useRef<T>();
  const currentRef = useRef<T>(value);

  useEffect(() => {
    if (predicate(currentRef.current, value)) {
      previousRef.current = currentRef.current;
    }
    currentRef.current = value;
  }, [value, predicate]);

  return previousRef.current;
}

👉 @sWebDev

Rain

Настраиваемая анимация дождя на Three.js.

👉 @sWebDev

Умение правильно гуглить — это 50% успеха в работе программиста. Умение вспомнить, как ты гуглил, — остальные 50%.

👍 — Это хороший повод выработать привычку сразу сохранять в закладки или в базу знаний полезные ссылки.

❤️ — Скоро AI будет искать за нас, и этот навык отомрет, как умение писать на ассемблере.

👉 @sWebDev | #юмор

Swapy

Заставить элементы в списке плавно меняться местами при перетаскивании может быть непросто. Библиотека Swapy создана специально для реализации такого drag-to-swap поведения и не зависит от фреймворков. Она берёт на себя всю сложную логику обработки событий и анимаций, чтобы вы могли добавить интуитивный обмен элементов в любой список или сетку.

👉 @sWebDev

Night Highway

Анимация ночной дороги на Three.js.

👉 @sWebDev

Создание WYSIWYG-редактора на React и Draft.js

Попытка построить свой редактор на contenteditable часто заканчивается борьбой с непредсказуемым поведением браузеров. Статья показывает, как фреймворк Draft.js помогает навести порядок в этом хаосе. В ней разбирается структурированный подход к управлению состоянием редактора, обработке стилей и созданию плагинов, который позволяет построить надёжный и расширяемый WYSIWYG-инструмент.

👉 @sWebDev

Classic Watch

Фотореалистичный рендер часов на Three.js и WebGi.

👉 @sWebDev

Mermaid

Создание диаграмм в графических редакторах отнимает много времени, а поддерживать их в актуальном состоянии ещё сложнее. Библиотека Mermaid решает эту проблему, позволяя описывать схемы и графики текстом, прямо как в Markdown. Такой подход упрощает версионирование и встраивание диаграмм в документацию или веб-приложения.

👉 @sWebDev

Условие выполнения

При каком условии вызывается колбэк, переданный в useDebouncedEffect?

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

👉 @sWebDev

В итоге, AI-ассистенты экономят ваше время или тратят его?

👍 — Экономят на рутинных задачах, если использовать их с умом.

❤️ — Пока что это скорее «игрушка», которая может подкинуть идею, но не написать готовый к продакшену код.

🤔 — ИИ делает почти всю работу за меня.

👉 @sWebDev | #юмор

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

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

Прокси-компонент для контроля доступа оборачивает защищенный контент. Он обращается к 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