Создание 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

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

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

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

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

👉 @sWebDev | #юмор

Dragscroll

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

👉 @sWebDev

Split scroll animation

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

👉 @sWebDev

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

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

👉 @sWebDev

Flair Confetti!

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

👉 @sWebDev

Vidbg.js

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

👉 @sWebDev

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

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

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

👉 @sWebDev

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

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

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

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

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