🔥 Debounce на одной строке

Когда пользователь вводит текст в поиск или изменяет размер окна — запросы летят десятками. Debounce откладывает выполнение функции до тех пор, пока события не прекратятся.

const debounce = (fn, ms) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
};

// Использование
const handleSearch = debounce((value) => {
  console.log('Поиск:', value);
}, 300);

// В React
<input onChange={(e) => handleSearch(e.target.value)} />

✅ Когда использовать:
— Автокомплит и live-поиск
— Обработка resize/scroll событий
— Валидация форм при вводе
— Любые частые события

💡 Почему это работает:
При каждом новом вызове старый таймер сбрасывается и создаётся новый. Функция выполнится только когда пройдёт 300ms без новых событий.

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

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

#readme #js #react

🌸 Как безопасно тестировать большие изменения

Когда фича крупная или экспериментальная, лучше не рисковать основной рабочей веткой. Проще создать временную песочницу, где можно тестировать всё, что угодно — без страха что-то сломать.

🆖 Как сделать:

1. Создать временную ветку:

git switch -c sandbox

2. Перенести только нужные коммиты из своей фичи:

git cherry-pick <hash>

Можно брать по одному, можно — диапазоном.

3. Протестировать изменения в изоляции.

Никаких конфликтов, никакой порчи основной ветки.

4. Удалить песочницу, когда всё готово:

git branch -D sandbox

Используйте песочницы, если фича явно рискованная или слишком большая — это экономит время и нервы.

🤌 Бонусы для подписчиков:
— Скидка 40% на все курсы Академии
— Розыгрыш Apple MacBook
— Бесплатный тест на знание математики

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

#readme #git

📎 Шпаргалка по React Hooks

Хуки сделали React-компоненты проще и мощнее. Эта шпаргалка — ваш быстрый справочник по всем основным хукам с примерами кода.

Что внутри:

Разбор каждого хука по принципу «что делает → как работает → когда использовать».

➕ Подходит и новичкам для изучения, и опытным разработчикам как quick reference в работе.

🎥 Источник

🤌 Бонусы для подписчиков:
— Скидка 40% на все курсы Академии
— Розыгрыш Apple MacBook
— Бесплатный тест на знание математики

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

#readme #react

🔥 Telegram-анимация для скрытого текста

SpoilerJS — веб-компонент для создания эффекта спойлера с анимацией частиц, вдохновлённый Telegram.

— Работает с любым фреймворком
— Открытый исходный код (MIT License)
— Простая интеграция

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

🔗 Ссылка на репозиторий

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

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

#readme #js

📌 Шпаргалка React Router v7

React Router v7 объединил v6 и Remix в одну библиотеку. Два режима на выбор: легковесный Library Mode для SPA или полноценный Framework Mode с SSR.

Требования: Node.js 20+ и React 18+

➕ Шпаргалка включает установку, роутинг, навигацию, работу с данными, формы и обработку ошибок с примерами кода.

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

#readme #react

💫 CSS в движении: 4 базовых эффекта

Вращение, появление, пульсация и bounce — четыре примера, которые пригодятся в любом проекте.

Каждый эффект — это @keyframes и несколько строк CSS. Копируйте и адаптируйте под свои задачи.

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

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

#readme #css

🟦 Git restore — когда нужно аккуратно вынуть файлы из staged

Большинство разработчиков знают только git add . и git reset, но есть команда, которая позволяет работать чище и безопаснее — git restore --staged.

Она снимает изменения только из индекса (staged), не трогая рабочую директорию. То есть код остаётся в файлах, но не попадёт в коммит.

Когда это используют:

🔢 Случайно сделали git add .

Добавили лишние файлы?
Вернуть индекс в чистое состояние проще простого:

git restore --staged .

🔢 Собираете «чистый» коммит

Когда в PR важно отделить:

– правки логики
– форматирование
– обновления зависимостей
– рефакторинг

Если что-то случайно попало — легко убрать из staged:

git restore --staged src/utils/helpers.js

🔢 Работа через git add -p

Интерактивно добавляли куски кода и выбрали не тот?
Команда помогает быстро исправить ошибку — без потери изменений в файле.

🔢 Перед rebase или amend

Нужно собрать идеальный коммит.
Важно иметь чистый staged — restore отлично помогает контролировать этот процесс.

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

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

#readme #git

🎯 CSS Селекторы: nth-child

Восемь способов выбрать нужный элемент без лишних классов. От базовых :first-child и :last-child до продвинутых формул с :nth-child(3n+1). Один селектор вместо десятка классов.

➕ Простая математика для точного контроля над версткой.

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

#readme #css

💳 Официальное руководство по Scrum

Гайд от Кена Швабера и Джеффа Сазерленда — 17 страниц, которые задают единственный корректный способ понимать Scrum.

🔤 Если вы работаете в продуктовой команде, строите процессы или хотите лучше понимать, как организуются современные фронтенд-команды, — это must-have.

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

#readme #scrum

💡 Новое в CSS: автоматическая подгонка текста под контейнер

В Chrome Canary 145 появились свойства, которые позволяют нативно растягивать или ужимать текст под ширину блока — без JS.

h1 {
  text-grow: per-line scale;
}

ℹ️ Что добавили:

• text-grow — растягивает короткие строки
• text-shrink — ужимает длинные

ℹ️ Методы подгонки:

scale, scale-inline, font-size, letter-spacing

По сути, это нативный FitText.js, только одной строкой CSS.

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

#release_digest #readme #css

🔥 Deep Clone — глубокое копирование объектов

Когда копируете объект через {...obj}, вложенные структуры остаются по ссылке. Меняете копию → меняется оригинал.

🔤 Два способа глубокого копирования:

Ограниченный, но быстрый для простых структур

const clone = (obj) => JSON.parse(JSON.stringify(obj));

Современный универсальный API (Chrome 98+, Firefox 94+, Node 17+, Safari 15+)

const clone = (obj) => structuredClone(obj);

🔤 Пример в React:

const addItem = (newItem) => {
  const clonedState = structuredClone(state);
  clonedState.items.push(newItem);
  setState(clonedState);
};

⚠️ Глубокое копирование — дорогая операция. В React его используют точечно, а не для всего состояния. В крупных приложениях лучше использовать immer или нормализованные структуры данных.

🔤 Когда deep clone действительно нужен:

— Копирование вложенных объектов и графов
— Redux / Zustand, когда нельзя мутировать state
— Снимки данных перед трансформациями
— Копирование конфигураций, где нет функций и методов

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

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

#readme #js #react