📕 Библиотека UI-компонентов

Коллекция из 4000+ готовых элементов интерфейса: кнопки, карточки, инпуты, чекбоксы, лоадеры. Всё на чистом CSS или Tailwind.

🎥 Каждый элемент сделан сообществом, открыт по MIT-лицензии. Копируете код в один клик, вставляете в проект.

🔗 Ссылка

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

#readme #ui

📘 Справочник по JavaScript

400+ страниц решений на все случаи жизни:

〰️ Как правильно работать с массивами? — 30+ методов с примерами

〰️ Что такое замыкания и зачем они нужны? — объясняем на пальцах

〰️ Почему промисы лучше колбэков? — сравнение с кодом

〰️ Как отловить баг в консоли? — 9 способов debugging

105 глав. От переменных до unit-тестирования. Каждая тема — с примерами кода и пояснениями.

Ставь ❤️, если было полезно

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

#readme #js

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

Этот документ объединяет ключевые темы, техники и механизмы, которые лежат в основе современной фронтенд-разработки.

➡️ В нём собраны объяснения, примеры и практические заметки, помогающие быстро освежить знания, разобраться в устройстве веб-технологий и подготовиться к выполнению задач или прохождению собеседований.

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

#readme

🔥 View Transitions API — морфинг без тяжёлых JS-библиотек

Раньше для плавной анимации между состояниями приходилось городить свои анимации и тащить JS-утилиты. Теперь достаточно одного вызова API + немного CSS.

⏺ Как работает:

document.startViewTransition(() => { /* обновляем DOM */ }) делает снимок DOM «до» и «после», а браузер сам строит плавный переход между ними.

Элементы с одинаковым view-transition-name анимируются как связанные: старое состояние плавно превращается в новое.

✨ Идеально для:

- переходов между страницами
- раскрытия карточек
- галерей и модальных окон
- лёгких SPA без фреймворков

⚠️ Поддержка:

Same-document переходы (SPA):
- Chrome 111+, Edge 111+
- Safari 18+
- Firefox 144+

Cross-document переходы (MPA):
- Chrome 126+, Edge 126+
- Safari 18.2+
- Firefox — пока не поддерживается

Используйте как прогрессивное улучшение: в старых браузерах будет обычная навигация.

📎 Демо

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

#readme #js #css

😮 Visual Types: типизация через картинки

Вместо чтения про "Union type позволяет переменной быть одним из нескольких типов" — видишь схему, и всё сразу понятно.

🔤 Что покрывает:

Примитивы, объекты, массивы, Union/Intersection типы, дженерики — все базовые концепции.

Полезно для начинающих в TypeScript или тех, кто запутался в терминологии.

🔗 Ссылка на гид

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

#readme #ts

📋 Копирование в буфер обмена в 2025

Clipboard API — стандарт. document.execCommand() deprecated с 2020.

✅ Поддержка: Chrome 66+, Firefox 63+, Safari 13.1+, Opera 53+

⚠️ Различия между браузерами:

Chrome/Edge:
— User gesture не требуется
— Работает только в активной вкладке

Firefox/Safari:
— Требуется user gesture (клик/тап)
— Вызов должен быть в обработчике события

🔜 Общие требования:

— Только HTTPS (или localhost)
— Для readText() требуется разрешение

🔜 Где использовать:

Кнопки «Скопировать код», промокоды, токены, ссылки

💡 Вызывайте копирование в обработчике клика — работает везде.

🔹 Основы IT для непрограммистов
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib

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

#readme

⭐️ Как работать с несколькими ветками одновременно

Делаешь фичу, но нужно срочно проверить баг в main? Не стэшь и не коммить — создай отдельную рабочую папку с другой веткой.

git worktree add ../hotfix main
cd ../hotfix

Git создаст папку hotfix рядом с основным проектом — в ней будет ветка main. Исходная папка остаётся нетронутой.

⏺ Фишка:

— Можно создать сразу с новой веткой:

git worktree add -b feature-new ../feature-new

— Посмотреть все worktree:

git worktree list

— Удалить после работы:

git worktree remove ../hotfix

— Каждый worktree может иметь свои node_modules — удобно, если между ветками разные зависимости.

— Нельзя открыть одну ветку дважды — Git защищает от конфликтов.

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

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

#readme #git

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

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

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

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

🔗 Демо на CodePen

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

#readme #js

⭐️ Шпаргалка по основным командам Git

Содержание:

— Настройка и базовый workflow
— Ветки, stashing, tagging
— Отмена изменений
— Git Flow и продвинутые команды

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

#readme #git

🔆 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