🐧 Тёмная тема в 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

🔥 Безопасный доступ без falsy-ловушек

В чём разница:

— || реагирует на ВСЕ falsy (0, '', false, null, undefined)
— ?? реагирует ТОЛЬКО на null и undefined
— ?. безопасно идёт по цепочке, не бросая ошибок

💡 Реальный пример:

API вернул { price: 0, inStock: false }

const price = product?.price ?? 99;         // 0
const inStock = product?.inStock ?? true;   // false
const name = product?.name ?? 'Unknown';    // undefined → 'Unknown’

⚡️ Поддержка: ES2020+ (все современные браузеры)

📍 Навигация: [Вакансии]

🎁 Новогодняя акция: 3 курса по цене 1
🤝 Помощь с выбором курса

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

#readme #js

📌 npm outdated — контроль техдолга в зависимостях

В любом живом проекте зависимости устаревают быстрее, чем кажется.

npm outdated

⏺ Что показывает:

 wanted — безопасное обновление по semver
 latest — последняя доступная версия

Одним взглядом видно, где мелкие апдейты, а где назревает боль.

Зачем используют:

🔴 Контроль техдолга

Показывает пакеты, которые давно не трогали и которые со временем выстрелят багами.

🔴 Планирование апдейтов

Помогает отделить:
• patch / minor — обновить быстро
• major — вынести в отдельную задачу

🔴 Подготовка к крупным обновлениям

Перед апдейтом React / Next / Vue сразу видно, какие зависимости не готовы.

📍 Навигация: [Вакансии]

🎁 Новогодняя акция: 3 курса по цене 1
🤝 Помощь с выбором курса

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

#readme #npm

⚙️ Git: remote’ы, которые ломают сборки

Проблема часто не в коде, а в том, откуда он взят.

✅ Зачем git remote:

Когда есть dev / stage / prod, форки и PR, легко:

— тестировать не ту версию
— чинить несуществующий баг
— деплоить «не туда»

Полезные команды:

🔵 Подключить fork или окружение

git remote add <name> <url>

🔵 Проверить источники кода (must-have)

git remote -v

🔵 Посмотреть доступные ветки

git remote show <name>

🔵 Переименовать origin → prod

git remote rename <old> <new>

🔵 Убрать лишний remote

git remote remove <name>

📍 Навигация: [Вакансии]

🎁 Новогодняя акция: 3 курса по цене 1
🤝 Помощь с выбором курса

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

#readme #git

🎨 Визуальная шпаргалка по CSS

Сайт, который должен быть в закладках у каждого фронтендера.

♾ Фишки:

— Иллюстрации для каждого свойства
— Удобные коллекции: Flexbox, Grid, Animations, Typography
— Быстрый поиск по свойствам
— Идеально для освежить память перед собесом

Особенно полезно для объяснения CSS джунам — показали картинку, и не нужно рисовать на доске 😄

📍 Навигация: [Вакансии]

🎁 Новогодняя акция: 3 курса по цене 1
🤝 Помощь с выбором курса

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

#readme #css

📎 Шпаргалка по фронтенду

Сжатый конспект ключевых тем и механизмов современной фронтенд-разработки.

🗳 Объяснения, примеры и практические заметки — для быстрого повторения, работы и подготовки к собеседованиям.

📍 Навигация: [Вакансии]

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

#readme