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

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

app/ → pages/ → features/ → shared/

@WebDev_Plus

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

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

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

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

@WebDev_Plus

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

@WebDev_Plus

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

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

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

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

@WebDev_Plus

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

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

@WebDev_Plus

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

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

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

@WebDev_Plus

Фронтенд-библиотеки, без которых я в 2026 кодить не сяду:

▪️zod — валидация
▪️react-hook-form — формы
▪️tRPC + react-query — синхронизация данных
▪️shadcn — UI
▪️motion — анимации
▪️date-fns — утилиты для дат
▪️zustand — стейт-менеджмент
▪️nuqs — search params
▪️recharts — графики
▪️ai — AI toolkit
▪️react-table — таблицы (до сих пор недооценён)

@WebDev_Plus

❌Одновременное рендеринг 10 000 элементов

✅Рендеринг только того, что видно

@WebDev_Plus

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

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

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

@WebDev_Plus

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

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

@WebDev_Plus

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

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

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

@WebDev_Plus

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

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

@WebDev_Plus

⚡️Деструктуризация массива JavaScript

@WebDev_Plus

❌useMemo, useCallback, memo повсюду

✅React Compiler обрабатывает это автоматически

React Compiler v1.0 уже здесь.

Он анализирует ваш код во время сборки и добавляет мемоизацию там, где это необходимо.↓

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

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

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

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

@WebDev_Plus

Всем вайб-кодерам: какой тут использован JS-концепт?

Только не юзайте для этого ИИ.
Это же совсем базовая штука 😅

@WebDev_Plus

❌useMemo для простых вычислений

✅useMemo нужен только для реально дорогих операций

Цена мемоизации в React часто выше, чем просто пересчитать заново ↓

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

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

npm install tailwind-animations

@WebDev_Plus

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

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

@WebDev_Plus

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

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