🚀 Шпаргалка по HTML

Всё от базовой структуры до таблиц, форм, списков и современных тегов разметки.

➕ Отличный инструмент для быстрой проверки кода и обучения.

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

#readme #html

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

Удалили локальную ветку — и поняли, что в ней были нужные коммиты? Не спешим паниковать — если она ещё жива в 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

🏓 Table tenniCSS

Мини-анимация, созданная только с помощью HTML и SCSS, без единой строки JS.

Отличный пример того, насколько мощными могут быть CSS-анимации.

🔗 Попробуйте запустить демо на CodePen

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

#readme #css

🎨 7 способов скрыть элемент с помощью CSS

Не все display: none одинаково полезны — иногда элемент нужно спрятать визуально, но оставить доступным для screen reader’ов.

🔤 Шпаргалка показывает, чем отличаются display, visibility, opacity, transform, clip-path и другие способы — и когда какой применять.

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

#readme #css

📌 Команда для поиска виновного коммита

Когда баг появился «внезапно», но непонятно когда — git bisect превращает охоту за ошибкой в алгоритм.

git bisect start
git bisect bad HEAD
git bisect good v1.4.2

➕ Git автоматически поделит историю на половины и будет переключать коммиты — ты тестируешь и отмечаешь результат:

git bisect good
git bisect bad

➕ Через несколько итераций Git покажет конкретный коммит, где баг появился.

🧠 Фишка: можно автоматизировать поиск, если тест можно запустить командой:

git bisect run ./run-tests.sh

Так Git сам переберёт историю и найдёт момент, где всё сломалось.

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

#readme #git