Собирать клон реального приложения полезно: сразу понимаешь, как на практике решаются типовые 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

Оптимизация SVG – краткий гайд для начинающих

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

Лаура Калбаг из Penpot делится практическими советами, как сделать SVG-файлы меньше по размеру, но без видимой потери качества – от базовых приёмов до полезных автоматизированных инструментов

Читайте здесь

@WebDev_Plus

Как структурировать React-проект, который можно масштабировать:

app/ → pages/ → features/ → shared/

@WebDev_Plus

Интерактивная статья: как анимировать курсоры других игроков в мультиплеере.

Плавный рендер курсоров почти всегда требует интерполяции, потому что сеть никогда не бывает идеальной. Вот рабочий подход. Автор писал это пару лет назад, но техники все еще актуальны

Ссылка ↓

@WebDev_Plus

ilamy Calendar

Мощная, полнофункциональная библиотека календарных компонентов для React, написанная на TypeScript, Tailwind CSS и с использованием современных React-паттернов. Поддерживает несколько режимов отображения календаря, drag-and-drop, повторяющиеся события и продвинутую интернационализацию

GitHub тут

@WebDev_Plus

Условные типы TypeScript применяют различные правила в зависимости от типа

@WebDev_Plus