🕺 AnimatiSS — коллекция CSS-анимаций

Библиотека готовых keyframe-анимаций: bounce, fade, shake, blur, jello и другие эффекты.

Можно посмотреть демо на странице и скопировать код нужной анимации. Всё на чистом CSS, легковесно.

📎 Ссылка

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

#readme #css

📕 Библиотека 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