Frontender Libs - обзор библиотек JS / CSS

Swagger UI

Работать с чужим API вслепую — долго и неудобно. Swagger UI решает эту проблему, автоматически создавая интерактивную документацию из спецификации OpenAPI. Инструмент генерирует наглядный интерфейс, где можно не только изучить все эндпоинты, но и сразу отправить тестовые запросы.

👉 @sWebDev

Draggable Infinite Slider

Кастомный слайдер на GSAP.

👉 @sWebDev

Подводные камни URL Search Params в React

Хранение состояния в URL-параметрах кажется простым решением, но под поверхностью скрывается масса проблем. Статья рассматривает неочевидные сложности: от отсутствия типобезопасности и валидации до управления частотой обновлений и миграции схем.

👉 @sWebDev

Color Spectrum Layout

Анимация фона с настраиваемым градиентом на GSAP.

👉 @sWebDev

Es-toolkit

Es-toolkit — утилитарная JavaScript-библиотека, созданная как современная альтернатива Lodash. Содержит набор полезных функций (debounce, chunk, sum и другие), но с фокусом на производительность и малый размер.

👉 @sWebDev

Когда потратил на кастомные кейкапы больше, чем на курсы.

👍 — Эстетика рабочего пространства важна.

❤️ — Главное чтобы цвет кейкапов совпадал с цветом подсветки на проекторе.

🤔 — Он не бесполезный, он ночью светится.

👉 @sWebDev | #юмор

Draggable Sidepanel

Перетаскиваемая панель на Draggable.js.

👉 @sWebDev

Уточнение типов для дочерних элементов

При типизации children в React-компонентах часто используют ReactNode. Данный тип, принимающий JSX, строки, числа и null, достаточно гибкий. Однако для создания более строгого API лучше подходит ReactElement.

Он представляет собой только результат вызова React.createElement, исключая примитивные типы вроде строк или чисел. Данный подход полезен для компонентов-оберток, которые должны работать только с другими React-компонентами, например, для клонирования или анализа их пропсов, делая их поведение более предсказуемым.

import { ReactNode, ReactElement } from 'react';

// ReactNode принимает почти любые значения
const FlexibleContainer = ({ children }: { children: ReactNode }) => {
  return <div>{children}</div>;
};

// ReactElement принимает только React-элементы
const StrictContainer = ({ children }: { children: ReactElement }) => {
  return <div>{children}</div>;
};

👉 @sWebDev

Что для вас идеальный релиз?

👍 — Тот, который прошел в пятницу вечером, и за выходные не пришло ни одного алерта.

❤️ — Тот, который вообще состоялся.

👉 @sWebDev | #юмор

Механизм защиты данных в RSC

Какую проблему решают функции
taintObjectReference и taintUniqueValue?

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

👉 @sWebDev

Probot

Probot — фреймворк для создания GitHub-приложений на JavaScript. Предназначен для автоматизации рабочих процессов и задач в репозиториях, например, для комментирования pull-реквестов или проверки стиля кода. Подходит для команд и разработчиков, стремящихся упростить управление репозиториями и рутинные операции.

👉 @sWebDev

Glitchy GSAP animated checkboxes

Анимированные чекбоксы на GSAP.

👉 @sWebDev

Оптимизация TypeScript-типов в больших проектах

В крупных проектах проверка типов в TypeScript может стать серьёзным узким местом, замедляя сборку и работу IDE. Статья разбирает неочевидные проблемы производительности, связанные со сложными типами, и предлагает конкретные подходы к их оптимизации. Полезно для тех, кто работает с большими кодовыми базами и ищет способы ускорить работу с TypeScript.

👉 @web_craft | #frontend

Glow effect to LineBasicMaterial without bloom

Эффект свечения для линий без Bloom-фильтра в Three.js.

👉 @sWebDev

Dockview

Dockview — JavaScript-библиотека для создания сложных панельных интерфейсов, как в современных IDE. Поддерживает перемещаемые, стыкуемые и изменяемые по размеру панели. Подходит для разработки веб-приложений, где требуется гибкая и настраиваемая рабочая область.

👉 @sWebDev

Профдеформация?

👍 — Да, при удаленной работе стираются границы между профессиональной и личной коммуникацией.

❤️ — Следующий этап - отправит ей в личку ссылку на Google Calendar, чтобы «засинкаться».

👉 @sWebDev | #юмор

Interactive Particles Hero

Фоновая интерактивная анимация на Three.js.

👉 @sWebDev

Синхронизация состояния компонента с URL

Кастомный хук useQueryState инкапсулирует логику синхронизации состояния с URL-параметрами. Данный подход объединяет useState и useSearchParams, очищая код компонента и беря начальное значение из URL.

Для обновления применяется useLayoutEffect, гарантируя изменение адресной строки до отрисовки браузером и исключая визуальную рассинхронизацию.

import { useState, useLayoutEffect } from 'react';
import { useSearchParams } from 'react-router-dom';

function useQueryState(queryKey, initialValue) {
  const [searchParams, setSearchParams] = useSearchParams();
  
  const [value, setValue] = useState(
    searchParams.get(queryKey) ?? initialValue
  );

  useLayoutEffect(() => {
    const newParams = new URLSearchParams(searchParams);
    newParams.set(queryKey, value);
    setSearchParams(newParams);
  }, [value, queryKey, searchParams, setSearchParams]);

  return [value, setValue];
}

👉 @sWebDev

На самом деле, это не баг, а state-of-the-art UX. Система предугадывает код и показывает его вам заранее.

👍 — Несомненно.

❤️ — Скоро и пароль так же будут показывать, чтобы не забыл.

👉 @sWebDev | #юмор