🔆 Pikaday: date picker'ы не нужны

Крутой гайд о том, что JavaScript календари обычно избыточны.

Лучшие альтернативы:

ℹ️ Нативный <input type="date"> — браузер всё сделает сам

ℹ️ Раздельные поля (день/месяц/год) — удобнее для памятных дат

ℹ️ Select'ы — для ограниченного набора вариантов

ℹ️ Masked input (DD/MM/YYYY) — быстрее, чем календарь

Сложные UI = больше ошибок и брошенных форм. Простота побеждает.

🔗 Ссылка

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

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

#readme #js

🔥 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

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

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

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

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

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

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

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

#readme #js

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

#code_challenge #js

🔥 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