В данной статье представлена коллекция полезных ресурсов frontend-разработчика, включающая различные инструменты и библиотеки, которые помогают на всех этапах реализации проектов: от создания потрясающих пользовательских интерфейсов до тонкой настройки производительности.

Интерфейс (UI)

1. Material Tailwind: проверенный набор, сочетающий все преимущества Material Design, React.js и Tailwind CSS.
2. MiracleUI: настраиваемые компоненты на чистом CSS
3. Bentoed: каталог html, css и tailwind элементов в bento-стиле
4. Aceternity UI: современные изящные компоненты пользовательского интерфейса
5. NextUI: незаменимый помощник в создании красивых интерфейсов
6. ChakraUI: доступная простая, модульная библиотека компонентов
7. Trading view Charts: облегченные диаграммы от Trading View
8. AutoAnimate: создание анимаций
9. React-magic-motion: добавляет немного волшебства в компоненты React
10. Keep React: более 40 настраиваемых компонентов Keep React с открытым исходным кодом
11. Daisy UI: популярная библиотерка компонентов для Tailwind CSS
12. ShadCn: красиво оформленные компоненты
13. Clip path: создание сложных фигур на CSS
14. Radix: нестилизованные примитивы с открытым исходным кодом
15. Layout generator: создание адаптивных макетов
16. Utilities: набор инструментов для создания градиентов, курсоров и многого другого
17. Image Generator: доступные наборы высокачественных картинок
18. Buttons: коллекция CSS-кнопок Tailwind
19. PrimeReact: комплексный набор настраиваемых многофункциональных компонентов пользовательского интерфейса PrimeReact
20. Everything in one page: коллекция бесплатных ресурсов, в том числе значков, изображений, иллюстраций, компонентов, библиотек
21. Beer CSS: семантический HTML и CSS на базе Material Design 3

Градиенты

1. Firecms: бесплатный инструмент, создающий красивую градиентную анимацию
2. Shadergradient: красивые движущиеся градиенты
3. MSHR: 464 нативных CSS-градиента, которые можно бесплатно использовать в любых проектах

SVG

1. Shapes: более 120 базовых SVG-фигур
2. SVGs: большая коллекция SVG-изображений
3. SVG Illustrations: иллюстрации от Undraw
4. Flags: более 250 различных флагов с открытым исходным кодом

Иконки

1. Huge Icons: первоклассная библиотека иконок
2. Hero Icons: SVG-иконки от создателей Tailwind CSS.
3. Icons Finder: коллекции иконок от независимых дизайнеров
4. React Icons: наборы React-иконок с поддержкой импорта ES6
5. Tabler Icons: бесплатная коллекция иконок с открытым исходным кодом
6. Animated Icons: пополняющаяся библиотека высококачественных статических и анимированных оригинальных иконок от Lordicon

Tailwind

1. Animations: плагин анимации
2. Intersection Observer: синхронизация видимости элементов
3. Backgrounds: коллекция сниппетов для создания фонов

JavaScript

1. Masonry Grid: библиотка макетов сетки для размещения элементов в зависимости от свободного вертикального пространства
2. MiniMasonry: минималистичная библиотека макетов Masonry без зависимостей
3. Gallery PhotoSwipe: демонстрация изображений
4. Gallery LightGallery: модульный плагин галереи изображений и видео
5. Tempo: взаимодействие с датами и временм
6. [Tippy (Tooltips) JS]()https://atomiks.github.io/tippyjs: всплывающие подскази и окна, раскрывающиеся списки
7. Just: библиотека утилит
8. GLTFs into JSX: преобразование GLTF в компоненты JSX
9. Theme Toggle Effect: переключение между светлой и темной темами с красивой анимацией
10. Code Speed Comparation: проверка скорости выполнения кода

React

1. Counter: анимированные счетчики
2. Masonry layout: адаптивные макеты
3. Drag and Drop: перетаскивание элементов
4. FilePond: загрузка файлов и оптимизация изображений
5. Faker: создание массивов фейковых данных
6. Random: генерация наборов случайных слов для тестирования приложений и сайтов
7. Charts: визуализация данных
8. UseSound: звуковые эффекты
9. ReCharts: диаграммы
10. Floating UI (Tooltips): создание, позиционирование и взаимодействие плавающих элементов
11. Tippy (Tooltips) React: компонент всплывающих подсказок и окон для React
12. Calendar: многофункциональный компонент календаря
13. CMDK Console: консоль
14. Sliders: наборы слайдеров
15. Drag To Swap: возможность перетаскивания элементов макета

Анимация

1. Scroll Reveal: простая анимация элементов при их входе в область просмотра или выходе из нее
2. AOS: библиотка анимаций при прокрутке страницы
3. Motion: современная библиотека анимации на основе собственных API браузеров

Другое

1. Sliders — Swiper: мобильный сенсорный слайдер
2. Toast notifications — Sonner: всплывающие уведомления
3. Atropos - 3D Elements: легкая бесплатная JavaScript-библиотека с открытым исходным кодом для создания сенсорных 3D-эффектов параллакса
4. Auto Animate (Native Javascript): анимированные эффекты переходов
5. Vaul (Mobile Slider): Apple Sheet для веб-страниц
6. Calendar: многофункциональные компоненты календаря
7. Contrast picker: калькулятор уровня контрастности текста и фона
8. Image optimizer: сервис сжатия изображений
9. Relative Time: преобразование метки времени в автоматически обновляющийся текст
10. Shots: создание фото, презентаций, мокапов
11. Profile Readme Generator Github: генерация readme-файлов на основе шаблонов
12. Responsively: адаптивное представление приложения
13. Apis: перечень доступных для разработчиков API

Спасибо за внимание

Написано по материалам статьи Miguel “Frontend Resources V2!”