🪩 3D CSS анимация товарной карточки

Эффектная демонстрация 3D трансформаций на чистом CSS: анимированные коробки с кроссовками, плавное открытие крышки и переключение между товарами.

➰ Архитектура:

— JavaScript — переключение состояний
— SCSS — все визуальные эффекты и 3D трансформации
— Чистое разделение логики и презентации

🔗 Демо на CodePen

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

#readme #js

🔆 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