Быстрое напоминание про React: useId() недооценивают.

Можно совместить useId(…) + атрибут form={…}, и тогда форма будет сабмититься кнопкой, которая находится вообще вне тега <form>.

И не нужно городить всю эту жонглёрку с useEffect() или useRef(), которую обычно приходится делать.

@WebDev_Plus

Архитектура кодовой базы карт по URL-адресу GitHub

https://github.com/braedonsaunders/codeflow

@WebDev_Plus

Если ты работаешь с React и Next.js, тебе нужен этот репозиторий!

10 лет знаний про оптимизации и best practices упакованы в скилл для AI-агентов.

40+ правил, отсортированных по влиянию
Срезать bundle, избегать waterfalls, избегать лишних rerender’ов...

https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices

@WebDev_Plus

Chrome DevTools теперь поддерживает троттлинг отдельных сетевых запросов!

Люди просили это годами. Теперь DevTools позволяет симулировать медленную сеть для конкретных запросов, а не для всей страницы целиком.

Это помогает тестировать, как веб-приложение ведёт себя и переживает проблемы, когда конкретные ресурсы (например, картинки, скрипты или API-вызовы) грузятся медленно.

@WebDev_Plus

Справочник бесплатных публичных API для разработчиков

Совместимы с любыми языками программирования.

Доступно 1500 → http://publicapis.io

@WebDev_Plus

Эта система grid-layout для React: Она позволяет собирать перетаскиваемые, ресайзабельные и адаптивные сетки в React. Типа дашбордов, админок, аналитических страниц или page builder’ов, где пользователь сам двигает и меняет размер блоков.

Ты один раз описываешь сетку, а дальше библиотека сама разруливает drag, resize и брейкпоинты. Идеально, когда хочется интерактивный лэйаут без написания всей этой логики руками :)

Попробовать

@WebDev_Plus

Впечатляющие анимации, которые можно создать с помощью библиотеки GSAP всего за несколько строк кода:

@WebDev_Plus

Представили Auto Layout в Anime.js v4.3

* Анимация display: flex / grid / none и т.д.
* Enter / Leave анимации
* Анимация изменения позиции DOM-элементов
* Прерываемые (interruptible) анимации
* Stagger-анимации для дочерних элементов
* Поддержка любых easing-функций
* Максимально простой API

Документация: https://animejs.com/documentation/layout
Примечания к выпуску: https://github.com/juliangarnier/anime/releases/tag/v4.3.0
CodePen Примеры: https://codepen.io/collection/yykPaw

@WebDev_Plus

Преобразования строк на уровне типов

type Feature = "user" | "payment" | "order";

type SuccessEvent<T extends string> = `${Uppercase<T>}_SUCCESS`;

type events = SuccessEvent<Feature>;
// "USER_SUCCESS" | "PAYMENT_SUCCESS" | "ORDER_SUCCESS"

type EventHandler<T extends string> = `on${Capitalize<T>}Success`;

type event_handler = EventHandler<Feature>;
// "onUserSuccess" | "onPaymentSuccess" | "onOrderSuccess"

@WebDev_Plus

Совет React: как избежать водопадов извлечения данных в серверных компонентах ↓

Принёс находку: sshx. Всего одна команда, и у вас в браузере открывается реплика локального терминала: можно звать коллег по ссылке, видеть курсоры друг друга и даже чатиться

Идеально для дебага, обучения или просто совместной работы. Cайт здесь, GitHub тут

@WebDev_Plus

❌ Не используй barrel imports в React
✅ Импортируй компоненты напрямую

Barrel imports (реэкспорт через index.js) тянут весь модуль, даже если тебе нужен один компонент.

В итоге в бандл попадает лишний, неиспользуемый код ↓

Интерактивная библиотека визуализации данных — ECharts

Позволяет добавлять интуитивно понятные, интерактивные и настраиваемые диаграммы в проект.

- Предоставляет более 20 типов диаграмм
- Переключение между рендерингом Canvas и SVG
- Автоматически генерируемые описания диаграмм
- Написана на чистом JavaScript

Забираем тут

@WebDev_Plus

Сохраняй отзывчивость UI во время тяжелых рендеров с useTransition():

React ставит пользовательский ввод выше переходов (transitions) ↓

Каждый раз, когда видишь setState внутри useEffect, иди постой в углу 5 минут и подумай о том, что ты натворил.

А потом удали этот useEffect

@WebDev_Plus

Чувак сделал плагин анимаций для Tailwind

✓ 70+ готовых переходов из коробки
✓ Настраивай анимации через классы
✓ Анимируй элементы по скроллу
✓ Чистый CSS, топ по производительности

npm install tailwind-animations

@WebDev_Plus