🏓 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

🖍 Все используют em, но пора перейти на lh

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

p + p { margin-top: 1em; }

Но em завязан на размер шрифта, а не на высоту строки.
В итоге при изменении line-height вертикальный ритм ломается.

💡 Решение — lh и rlh:

p + p {
  margin-block-start: 1lh;
}

1lh = текущая высота строки элемента.

1rlh = высота строки корневого элемента (root line height).

Теперь отступы живут в ритме текста, а не в пикселях. Типографика становится гибкой, гармоничной и адаптивной.

🔤 Поддержка: Chrome 108+, Safari 16.4+, Firefox 111+

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

#readme #css