WebDev+ | Веб-разработка

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

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

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

Забираем тут

@WebDev_Plus

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

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

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

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

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

@WebDev_Plus

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

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

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

Представили 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

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

@WebDev_Plus

Пихать use client в каждый файл React? Не надо.

✅Вместо этого прокидывай Server Components как children.

Интерактивная кнопка не должна делать всю страницу клиентской.

@WebDev_Plus

Кстати, нашёл для вас суперкрутой API

Этот API погоды бесплатный, без регистрации и без API-ключа. Можно получать прогнозы, температуру, данные по ветру и прочее - обычным запросом.

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

100% исходный код 🎩

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

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

Попробовать

@WebDev_Plus

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

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

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

@WebDev_Plus

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

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

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

@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

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

https://github.com/braedonsaunders/codeflow

@WebDev_Plus

Вертикальные вкладки доступны за флагом в Chrome 145 (текущая бета)

1. Перейдите на chrome://flags/#vertical-tabs

2. Включите флаг (установите Enabled)

3. Перезапустите Chrome

4. Кликните правой кнопкой по панели вкладок и выберите “Move Tabs To The Side” (переместить вкладки вбок)

@WebDev_Plus

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

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

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

@WebDev_Plus

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

Это полностью опенсорсный тул, который собирает в одном месте техданные, инфру и базовую инфу по безопасности :)

@WebDev_Plus

Классный браузерный ASCII-арт редактор

Позволяет рисовать и генерировать ASCII-арт прямо в браузере. По сути, это для кастомных баннеров в README, шапок для терминала, вывода CLI или хакерских визуалок для твоих проектов :)

https://files.littlebird.com.au/ascii-sketch.html

@WebDev_Plus

«Есть ли тип для настройки промежуточного ПО/прокси в Next.js?»

Да

@WebDev_Plus