67 инструментов для веб-разработчика на все случаи жизни

0
5438

Ognjen Gatalo сделал подборку инструментов, сделавшие его работу немного легче, а также позволившие его ускорить. Мы перевели ее для вас.

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

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

Список состоит из следующих групп:

Библиотеки Javascript

Particles.js 

Библиотека, позволяющая создать красивые «плавающие» частицы на странице

Three.js 

Библиотека для создания пространств и 3D объектов на странице

Fullpage.js 

Легко реализуемые функции прокрутки

Typed.js 

Эффект печатной машинки

Waypoints.js 

Служит триггером для функции, когда вы прокручиваете до какого-то элемента

Highlight.js 

Подсвечивает веб-синтаксис

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 

Дополнение поиска

Dragdealer.js 

Крутая библиотека для перетаскивания

Bounce.js 

Создание крутых анимаций CSS3

Pagepiling.js 

Постраничная прокрутка

Multiscroll.js 

Мультипрокрутка в две вертикальные панели

Favico.js 

Динамические fav-иконки

Midnight.js 

Переключение фиксированных header на «летающие»

Anime.js 

Библиотека анимаций

Keycode 

Получение javascript keycode от нажатой кнопки

Sortable 

Drag & drop

Flexdatalist 

Автозаполнение

Slideout.js 

Скользящее меню для мобильных приложений

Jquerymy 

Два варианта для связывания информации с использованием jquery

Cleave.js 

Форматирование контента во время его набора

Page 

Фронт-энд маршрутизация для одностраничного приложения

Selectize.js 

Гибридный блок select для добавления тегов

Nice select 

Библиотека Jquery для создания красивых select

Tether 

Эффективное прикрепление элементов с позиционированием absolute

Shepherd.js 

Гид для пользователей вашего приложения

Tooltip 

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

Select2 

Замена Jquery для выбранных блоков

IziToast 

Уведомления js, которые легко реализовать

IziModal 

Модальные окна, которые легко реализовать

Библиотеки CSS / Полезности для дизайна

Animate.css 

Библиотека анимаций

Flat UI Colors 

Список простых и эффектных основных цветов

Material design lite 

Фреймворк, основанный на материальном дизайне Google

Colorrrs 

Рандомный генератор цветов

Section separators 

Разделение CSS на секции

Topcoat 

Фреймворк

Create ken burns effect 

Эффект Ken burns с использованием анимаций css3

DynCSS 

Добавляет функции к CSS, чтобы сделать его более динамичным

Magic animations 

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

CSSpin 

Коллекция спиннеров CSS

Feather icons 

Иконки

Ion icons 

Иконки

Font awesome 

Иконки

Font generator 

Комбинирует несколько шрифтов и создает их смесь

On/Off switch 

Создание переключателей включения/выключения в CSS, хорошо использовать для проверки или radio кнопок

UI Kit 

Фреймворк

Bootstrap 

Фреймворк

Foundation 

Фреймворк

Полезные ссылки/продукты

Шпаргалка <head>  

список всего, что может быть внутри тега <head>

Ghost 

Простая платформа для блогинга на node.js

What runs 

Плагин Chrome который поможет узнать с помощью чего был создан сайт

Learn anything 

Невероятная ментальная карта, которая поможет разобраться с определенными вещами