🧩 Как вернуть случайно удалённую ветку

Удалили локальную ветку — и поняли, что в ней были нужные коммиты? Не спешим паниковать — если она ещё жива в origin, всё можно вернуть одной командой:

git fetch origin refs/heads/feature-branch:refs/heads/feature-branch

🔤 Что произойдёт:

— Git скачает ветку с origin
— Восстановит её локально с тем же именем
— Вся история коммитов сохранится

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

#readme #git

✨ Вариативные отступы через clamp()

Делаем отступы адаптивными без медиазапросов — пусть дизайн сам подстраивается под ширину экрана:

.section {
  padding: clamp(1rem, 5vw, 3rem);
}

Что это дает:

— Минимальный отступ — 1rem, максимум — 3rem

— В промежутке — плавное масштабирование по ширине вьюпорта

— Один рядок кода вместо трёх @media

💡 Работает не только с padding, но и с font-size, margin, gap и даже border-radius

🔤 Поддержка: Chrome 79+, Safari 16+, Firefox 75+

Сейчас на курсы Proglib действует −40%🥰

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

#readme #css

🔍 Валидация форм без раздражения

Вместо :invalid, который срабатывает сразу, используйте :user-invalid.

Что это дает:

— Валидация срабатывает только после взаимодействия с полем

— Не показываем ошибки в пустой форме при загрузке

— Лучший UX без дополнительного JS

⚙️ Поддержка: Chrome 119+, Safari 16.5+, Firefox 88+

Сейчас на курсы Proglib действует −40%🥰

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

#readme #css

📌 Git Blame с суперсилами

Обычный git blame показывает, кто последним менял строку. Но что если код был перемещён из другого файла или отформатирован? Есть команда, которая превращает Git в настоящего детектива.

git blame -w -C -C -C src/components/Button.jsx

ℹ️ Что делает каждый флаг:

-w — игнорирует пробелы и форматирование. Если кто-то запустил prettier на весь файл, Git «видит сквозь» это изменение и показывает реального автора логики.

-C — отслеживает копирование кода в пределах одного коммита. Вынесли функцию в отдельный файл? Git покажет оригинального автора.

-C -C — ищет копирование при создании нового файла. Идеально для рефакторинга, когда код переезжает в новые модули.

-C -C -C — ищет происхождение кода во всех коммитах. Покажет источник, даже если код путешествовал между файлами несколько раз.

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

#readme #git

✨ Контейнерные запросы — адаптивность нового уровня

Обычно мы пишем:

@media (min-width: 600px) {
  .card { flex-direction: row; }
}

Но что, если карточка живёт в разных местах — и в сайдбаре, и в сетке?
Глобальный @media ломает вёрстку.

💡 Решение — @container

@container (min-width: 400px) {
  .card { flex-direction: row; }
}

Теперь адаптация зависит от ширины контейнера, а не всего экрана. Каждый блок подстраивается под своё окружение — без медиазапросного ада.

⚙️ Работает в Chrome 105+, Safari 16+, Firefox 109+

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

#readme #css