📌 npm explain — кто притащил эту зависимость

Команда (алиас npm why с npm 7+) показывает полную цепочку зависимостей — кто, через что и зачем тянет пакет.

🔢 Раздутый бандл

Нужно узнать, откуда lodash в зависимостях:

npm explain lodash

Получаете цепочку: проект → axios → follow-redirects → lodash.
Сразу видно, что обновлять или менять.

🔢 Конфликт версий

Подозрение на несколько React одновременно:

npm ls react

Команда покажет каждую версию и её источник.

🔢 Security audit

Нашлась уязвимая транзитивная зависимость:

npm explain vulnerable-package

Понимаете, через какой пакет она попала — обновляете или заменяете.

🔢 Чистка проекта перед продом

Проверить только прямые зависимости:

npm ls --depth=0

Быстро находит забытый мусор в package.json.

🧶 Yarn альтернатива

yarn why package-name

Работает так же, с более подробным выводом.

🔹 Курс «Алгоритмы и структуры данных»
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib

🐸 Библиотека фронтендера

#readme #npm

⚡️ Iconoir

Каталог минималистичных SVG-иконок (1600+), выровненных под сетку 24×24. Открытый код, свободная MIT-лицензия, единый визуальный стиль.

🔜 Что делает библиотеку удобной:

🔘 Поддержка экосистемы — React, Vue, Flutter, React Native, Swift; в Figma и Framer встроена нативно

🔘 Быстрый старт — установка через NPM, импорт компонента — иконка готова

🔘 Стиль без компромиссов — единая геометрия и толщина линий, подходит для любых дизайн-систем

🔘 MIT License — без ограничений для коммерческих проектов

🔜 Как использовать:

npm i iconoir-react  # или iconoir, или @iconoir/vue

// React — иконка как компонент
import { Bell, HandBrake } from 'iconoir-react';
<Bell color="hotpink" width={32} />

// Или old-school CSS
<i class="iconoir-hand-brake"></i>

💻 Полный каталог иконок — iconoir.com: поиск, предпросмотр, копирование SVG одним кликом.

🐸 Библиотека фронтендера

#stack

🐸 Библиотека фронтендера

#pixel_pause

📊 Карта GitHub-репозитория за пару секунд

GitDiagram визуализирует структуру любого репо: файлы, директории, связи между модулями — всё в виде интерактивной схемы. Удобно, когда нужно быстро понять архитектуру незнакомого проекта.

🔴 Работает предельно просто:
замените github → gitdiagram в адресе репозитория.

🈁 Дальше можно:
— кликать по узлам, проваливаясь в структуру
— экспортировать диаграмму
— анализировать связность, размеры и «тяжёлые» модули

Для фронтендеров особенно полезно — моментально видно, как устроены компоненты и где находятся ключевые части интерфейса.

🔗 Ссылка на GitHub

🐸 Библиотека фронтендера

#resource_drop

☺️ Vite 8 Beta — стоит ли переходить

Vite полностью переписали на Rust-бандлере Rolldown, заменив старую связку esbuild + Rollup. Теперь dev и production используют один инструмент — никаких расхождений в поведении.

➡️ Что это даёт:

— Скорость: в 10-30 раз быстрее Rollup

— Проверено на практике: Linear сократил сборку с 46с до 6с, другие компании ускорились на 40-64%

— Без боли: большинство плагинов работают из коробки

— Единый стек: Vite + Rolldown + Oxc от команды VoidZero

➡️ Что нового:

• Встроенная поддержка tsconfig paths
• Поддержка TypeScript decorators (emitDecoratorMetadata)
• Скоро: Full Bundle Mode — dev-сервер быстрее в 3 раза

➡️ Миграция:

Обновить до 8.0.0-beta.0 и следовать гайду. Для сложных проектов рекомендуют постепенный переход через пакет rolldown-vite.

Если у вас медленные сборки — точно стоит попробовать. Rust делает своё дело, и цифры это подтверждают 📈

🐸 Библиотека фронтендера

#release_digest

👨‍💻 React Server Components в React Router: зачем и как использовать

Представьте: вместо отправки данных клиенту, их обработки и рендера — вы просто отдаёте готовый UI с сервера. Никакой лишней гидратации, меньший бандл, быстрее загрузка.

Зачем это нужно:

🔢 Меньше JS на клиенте — UI рендерится на сервере

🔢 Компоненты могут сами загружать данные — проще типизация

🔢 Инкрементальная миграция — можно внедрять постепенно

🔢 Server Functions — формы работают без привязки к роутам

Особенно круто для сложных приложений с CMS-контентом или динамическими комбинациями компонентов — сервер сразу отдаёт нужный UI.

⚠️ Фича пока experimental и может иметь breaking changes в минорных релизах. Для продакшена использовать с осторожностью, но для экспериментов — самое время!

🔗 Подробности на epicreact.dev

🐸 Библиотека фронтендера

#read_watch

📎 Шпаргалка для подготовки к React-собеседованию

🔵 30 самых популярных вопросов
🔵 Развёрнутые ответы с примерами кода
🔵 JavaScript, React, Redux, веб-технологии
🔵 Источники и ссылки на документацию

Скачай, изучи, получи оффер 👨‍💻

🔗 Источник

🐸 Библиотека фронтендера

#readme #react

🐸 Библиотека фронтендера

#pixel_pause

🐧 Тёмная тема в React: простой хук или архитектура

Каждый проект проходит один и тот же путь. Сначала — кнопка переключения темы. Через месяц — система настроек.

Разница в том, что вы выбрали в первый день.

1️⃣ useLocalStorage

Состояние в браузере, API как у useState:

const [theme, setTheme] = useLocalStorage('theme', 'dark')

🔴 Когда подходит:
- Одна настройка
- Прототип или MVP
- Нет планов масштабирования

🔴 Что сломается позже:
- Ключи localStorage расползаются по компонентам
- Нет миграций при смене структуры
- Рассинхронизация состояния между вкладками

Это не баг. Это предел подхода.

2️⃣ zustand + persist

Когда добавляются язык, feature flags, пользовательские настройки — нужен единый стор:

const theme = useSettings(s => s.theme)
const setTheme = useSettings(s => s.setTheme)

🔴 Что получаете:
- Один источник правды
- Селекторы → меньше ререндеров
- Миграции версий состояния из коробки
- Синхронизация между вкладками

🔴 Цена входа:
- +1 зависимость
- 20-30 строк на стор вместо 3 на хук

🔴 Результат:
- Архитектура, которая не разваливается через полгода

❓ Как выбрать:

- 1 настройка →
useLocalStorage

- 2-3 настройки → можно ещё потерпеть

- Система настроек → zustand сразу

localStorage — это инструмент.

zustand — это способ не переписывать проект через полгода.

🐸 Библиотека фронтендера

#readme #react