Принёс находку: 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

Теперь доступно: https://iso-coaster.com

Бесплатный конструктор парка аттракционов с открытым исходным кодом, включающий магазины, водные/металлические/деревянные американские горки, гостей, еду, магазины и многое другое.

Регистрация не требуется, кооперативный режим включен.

@WebDev_Plus

Каждый раз, когда я начинаю новый проект на JavaScript, я устанавливаю эти библиотеки.

Сохраните это на потом ;)

@WebDev_Plus

Предотвращение цепной прокрутки с помощью overscroll-behavior

Если мы попытаемся выполнить прокрутку, когда граница скроллинга достигнута, то прокрутка будет выполнена в ближайшей родительской области скроллинга, что называется цепочкой прокрутки(scroll chaining)

Мы можем предотвратить цепочку прокрутки, установив для свойства overscroll-behaviour значение contain или none

- Подробнее
- Поиграть можно здесь

@WebDev_Plus

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

@WebDev_Plus