Впечатляющие анимации, которые можно создать с помощью библиотеки 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

Собирать клон реального приложения полезно: сразу понимаешь, как на практике решаются типовые dev-проблемы.

В этом курсе проведут тебя через сборку full-stack клона Instagram на Laravel и MongoDB.

Настроите, чтобы весь стек нормально дружил между собой, поднимете аутентификацию и профили, научитесь работать с изображениями и сделаете еще много всего.

Смотрим бесплатно

@WebDev_Plus

Await — это стена. Ничто не выполняется после нее, пока обещание не будет выполнено.

Поместите эту стену после ранних возвратов, а не перед ними.

@WebDev_Plus

Если вдруг пропустили: в Chrome DevTools появилась точечная эмуляция медленного интернета

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

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

@WebDev_Plus

Новое CSS-свойство corner-shape открывает кучу интересных новых UI-паттернов.

corner-shape: bevel round;
border-radius: 1em 0 / 3em 0;

@WebDev_Plus

Впечатляющая коллекция анимированных компонентов.

+100 доступных. Открытый исходный код и бесплатно:

→ http://github.com/kokonut-labs/kokonutui

@WebDev_Plus