66 инструментов для веб-разработчика на все случаи жизни
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, чтобы сделать его более динамичным
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
Невероятная ментальная карта, которая поможет разобраться с определенными вещами