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

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

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

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

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

👉 @sWebDev | #юмор

Dragscroll

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

👉 @sWebDev

Split scroll animation

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

👉 @sWebDev

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

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

👉 @sWebDev