Transition.css

Полезная мини-библиотека для переходов на CSS.

После того, как transition.css был добавлен в ваш проект, добавьте атрибут к элементу и наблюдайте за магией.

<div transition-style="in:circle:bottom-right"> A transitioned IN element
</div>

👉 @fullstack_libs

Parsel

Крошечный, удобный парсер CSS-селекторов весом всего в два килобайта.

👉 @fullstack_libs

CSS Scan

CSS Scan сильно упрощает просмотр ваших любимых веб-сайтов. Наведите курсор на любой элемент и мгновенно получите его CSS, цвета, ресурсы, анимацию, шрифт и размеры.

Скопируйте, экспортируйте или доработайте их с помощью интуитивно понятного редактора CSS.

👉 @fullstack_libs

Shapedivider

Настраиваемые фигурные разделители: волны, кривые, стрелки и т. д., на HTML, SVG и CSS.

👉 @fullstack_libs

Sketch2Code

Artificial Intelligence (AI) Sketch2Code способен преобразовать нарисованный от руки макет сайта в код HTML. Разработка Microsoft упрощает процесс верстки, а также предлагает образцы дизайна страниц проекта.

👉 @fullstack_libs

k6

Облачный сервис генерирует тестовую нагрузку при большом объеме трафика для сайтов, веб-приложений, мобильных приложений и разнообразных API.

При необходимости k6 эмулирует одновременное посещение ресурса более чем миллионом пользователей.

👉 @fullstack_libs

Bit for React Native

Bit - это не еще одна библиотека - это новый способ поделиться своими компонентами с другими проектами.

Используйте Bit, чтобы отслеживать компоненты в вашем проекте и «экспортировать» их в виртуальный монорепозиторий Bit.dev. Это сделает каждый компонент доступным для использования в других проектах и даже для независимого обслуживания и разработки (это означает, что нет необходимости настраивать среду разработки только для внесения нескольких изменений).

👉 @fullstack_libs

UXCheck.co

Для Chrome нет ничего невозможного. Он способен даже определить, имеются ли на сайте проблемы с юзабилити.

Сервис UXChek – это расширение для Chrome, которое занимается поиском проблем. Отметки затем могут быть экспортированы.

👉 @fullstack_libs

Donut Progress Bar

В этой демонстрации реализован индикатор выполнения с меняющимися карточками.

Для переключения карточек необходимо нажимать на стрелки внизу: каждый раз изображения героев из мультсериала «Симпсоны» будут перекрывать друг друга.

👉 @fullstack_libs

Granim.js

Библиотека JS, которая помогает создавать плавные и интерактивные градиентные анимации. Таким образом, вы можете сделать свой сайт выделяющимся при помощи красочных фонов.

👉 @fullstack_libs

Color.hailpixel.com

Это сайт для подбора гармоничной световой палитры. Достаточно просто двигать курсор по странице, чтобы видеть изменения цвета фона. А в окошке, расположенном в центральной части экрана, отображается hex-код цвета. Для создания полоски цвета и получения его кода, необходимо просто кликнуть мышью.

👉 @fullstack_libs

AnyChart

Хорошо проработанная, легковесная, многофункциональная JS библиотека для визуализации данных с рендерингом в SVG/VML. Позволяет веб-разработчикам создавать всевозможные графики и диаграммы для дальнейшего принятия решений на их основе.

👉 @fullstack_libs

Reveal.js

Вы когда-нибудь задумывались о том, что настанет день, когда вы сможете создавать презентации, используя JavaScript? В общем-то, этот день, благодаря замечательной библиотеке Reveal.js, уже настал.

Её, как и другие подобные библиотеки, можно установить в виде NPM-пакета, или можно просто скачать её материалы из GitHub-репозитория и подключить соответствующие .js и .css-файлы к странице.

👉 @fullstack_libs

Look Alive

3D-глаз, который будто бы следит за перемещением курсора. Зрелище завораживает в первую очередь благодаря высококачественной детализации и эффектной графике.

Вся сцена сделана на canvas и анимирована при помощи Three.js.

👉 @fullstack_libs

Autosize.js

Плагин, который автоматически регулирует высоту текстовой области, добавляя ей свойство автоматической регулировки высоты. Пользователю удобней просматривать набранную информацию.

👉 @fullstack_libs

Hammer.js

JavaScript библиотека, которая привносит в ваши веб-приложения мультисенсорные жесты. Она невелика, не имеет зависимостей и способна распознавать жесты, сделанные прикосновением, мышью или указателем (pointer events). По умолчанию она добавляет распознавание для касания, двойного касания, свайпа, нажатия и пр.

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

👉 @fullstack_libs

React Content Loader

Инструмент для простого создания ваших анимированных компонентов skeleton-screen, заменяющий обычную загрузку и улучшающий взаимодействие с пользователями, предоставляя каркас ваших страниц, например, плэйсхолдеры для контента и изображений. Поддерживает React, React Native, Vue и ванильный HTML.

👉 @fullstack_libs

turn.js

Библиотека JavaScript, которая сделает ваш контент похожим на настоящую книгу или журнал, используя все преимущества HTML5.

👉 @fullstack_libs

Medium

Библиотека JavaScript для масштабирования изображений.

👉 @fullstack_libs

particles.js

Легкая библиотека JavaScript для создания частиц.

👉 @fullstack_libs