67 полезных инструментов, библиотек и ресурсов для экономии вашего времени в качестве веб-разработчика

В этой статье я не буду говорить о больших интерфейсных фреймворках, таких как React, Angular, Vue и т. д., Ни об уже популярных редакторах кода, таких как Atom, VS Code, Sublime… Я просто хочу поделиться списком инструментов, которые я нахожу полезными для ускорения рабочего процесса разработчика. Некоторые, вероятно, вы видели большинство из них, но я буду рад, если каждый из читателей обнаружит что-то новое и полезное для себя. Этот список содержит множество разнообразных ресурсов, поэтому я буду организовывать их в группы.

Библиотеки Javascript

Particles.js — Библиотека для создания красивых плавающих частиц на веб - странице;

Three.js — Библиотека для создания 3d-объектов и пространств на веб - странице;

Fullpage.js — это jquery плагин, который позволяет создать постраничный скроллинг. Для плагина написана хорошая документация с большим количеством примеров;

Typed.js — Эффект пишущей машинки;

Waypoints.js — Запуск функции при прокрутке до элемента;

Highlight.js — это инструмент для подсветки синтаксиса, написанный на JavaScript. Он работает и в браузере, и на сервере. Он работает с практически любой HTML разметкой, не зависит от каких-либо фреймворков и умеет автоматически определять язык;

Chart.js — Создавайте красивые диаграммы, используя только javascript;

Instantclick — Значительно ускорит время загрузки вашего сайта, предварительно загружая ресурсы при наведении мыши;

Chartist — Еще одна библиотека диаграмм;

Motio — Библиотека для анимации и панорамирования на основе спрайтов;

Animstion — плагин Jquery для css анимированных переходов страницы;

Barba.js — Плавные переходы между страницами;

TwentyTwenty — Визуальный инструмент для определения различий;

Vivus.js — Библиотека для создания анимации рисования на SVG;

Wow.js — Отображение анимации при прокрутке;

Scrolline.js — Посмотрите, сколько вы прокрутили до конца страницы;

Velocity.js — Очень быстрая и плавная анимация javascript;

Animate on scroll — Довольно просто;

Handlebars.js — Шаблоны Javascript;

jInvertScroll — Параллаксная прокрутка;

One page scroll — И снова библиотека прокрутки одной страницы;

Parallax.js — Механизм параллакса, который реагирует на ориентацию интеллектуального устройства;

Typeahead.js — поставляется со специально подготовленным CSS кодом. Данный код не влияет на визуальное представление, а используется для реализации эффекта выпадающего списка и позиционирования возможных вариантов ответов;

Dragdealer.js — Довольно классная библиотека перетаскивания;

Bounce.js — Создавайте классные анимации CSS3;

Pagepiling.js — Прокрутка одной страницы;

Multiscroll.js — Мультипрокрутка веб-сайта на две панели с вертикальной прокруткой;

Favico.js — Динамические фавиконы;

Midnight.js — Переключайте фиксированные заголовки на лету;

Anime.js — это легковесная библиотека анимации на основе JavaScript. Вы можете использовать его для анимации различных свойств CSS, SVG или DOM атрибутов на веб-странице;

Keycode — Получить код ключа javascript для нажатой кнопки;

Sortable — Перетаскивание и падение;

Flexdatalist — Автозаполнение;

Slideout.js — Выдвижное меню навигации для мобильных приложений;

Jquerymy — Двусторонняя привязка данных с использованием jquery;

Cleave.js —  это библиотека JavaScript, которая помогает автоматически форматировать вводимый текст ;

Page — клиента для одностраничных приложений;

Selectize.js — Гибридное поле выбора для добавления тегов;

Nice select — Jquery для создания красивых полей выбора;

Tether — Эффективно прикрепляет абсолютно расположенные элементы;

Shepherd.js — Проводите пользователей через свое приложение;

Tooltip — Название говорит само за себя;

Select2 — Замена Jquery для полей выбора;

IziToast — Простая реализация уведомлений js;

IziModal.js — это один из самых элегантных плагинов для модальных окон на jQuery;

Библиотеки CSS / Материалы для дизайна

Animate.css — это коллекция кроссбраузерных CSS анимаций, которые вы сможете использовать для своих слайдеров, домашних страниц и других веб-проектов;

Flat UI Colors — Список простых и эффективных основных цветов;

Material design lite — Фреймворк, основанный на дизайне материалов Google;

Materialui.co — Множество ресурсов для основы проектирования материалов;

Colorrrs — Генератор случайных цветов;

Topcoat — Разделители секций Css;

Create ken burns effect — Эффект Кена Бернса с использованием анимации css3;

DynCSS — Добавьте функции в css, чтобы сделать его динамичным;

Magic animations — Название говорит само за себя;

CSSpin — Коллекция css-блесен;

Feather icons — Набор иконок;

Ion icons — Набор иконок;

Font awesome — Набор иконок;

Font generator — Объедините несколько шрифтов и создайте смесь;

On/Off switch — Создайте переключатель включения/выключения в css, подходящий для проверки или переключателей;

UI Kit — Модульный фреймворк в стиле материального дизайна (Material Design – дизайн программного обеспечения и приложений операционной системы Android от компании Google);

Bootstrap —  это открытый и бесплатный HTML, CSS и JS фреймворк, который используется веб-разработчиками для быстрой вёрстки адаптивных дизайнов сайтов и веб-приложений;

Foundation — Данный фреймворк имеет модульную структуру и состоит в основном из стилей Sass. Он построен на основе сетки в 940 пикселей, которая является адаптивным макетом;

Little Widgets — это коллекция красиво оформленных HTML-виджетов и всплывающих окон. Он закодирован, отзывчив, анимирован и готов к использованию на вашем сайте ;

Следить за обновлениями, вы можете в моём Twitter аккаунте.