17 полезных библиотек и инструментов для фронтенда

Мы расскажем о 17 полезных библиотеках и инструментах, которые используют Frontend-разработчики Студии Т. Речь пойдет о технологиях, в ценности которых убедились на личном опыте. Каждая из них увеличит продуктивность и поможет в реализации конкретной задачи.

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

Fontsquirrel — генератор веб-шрифтов. Загружаешь файл шрифта — получаешь несколько форматов и уже готовый файл со стилями, который можно подключить.

Colorzilla — колорпикер. Аналог пипетки в Photoshop. Решает задачи с цветом. Позволяет получить образец цвета из любой точки браузера и скопировать в нужную программу. Анализирует страницу на палитру цветов и создает расширенные CSS градиенты.

Препроцессор Sass — простой язык стилей и мощный препроцессор. Легкая читабельность кода. Благодаря подключенной библиотеке Compass можно выйти за рамки CSS и работать со спрайтами в автоматическом режиме.

Sprite — простой способ сделать из множества картинок одну. Предположим, у вас на сайте четыре картинки. Когда пользователь заходит на страницу, он подгружает эти изображения. Sprite создает контейнер и помещает изображения в него. Количество обращений к серверу сокращается и подгружаются даже те картинки, которые понадобятся позже.

PhpStorm — среда разработки. Содержит отличное автодополнение кода. Поддерживает смешивание языков. В него встроен git, который позволяет работать с сервером, минуя лишнее открытие консоли. Удобная установка плагинов. Включает в себя опознаватель языка php для бэкенда. Включает гибкую систему настроек для разработчика.

git — система контроля версий. Обладает высокой скоростью работы, интеграцией с другими системами, удобным интерфейсом. Иногда нужно изменить проект и сохранить работоспособный вариант. Создается папка с названием «Новая папка», в которую копируется рабочая версия. Со временем количество папок растет. Это создает трудности при откате на предыдущие версии. Такие проблемы решает система контроля версий.

gulp — сборщик проектов. Перед сдачей сайта код необходимо сжать. Делается это для предотвращения кражи и уменьшения «веса». Автоматически сжимает JavaScript файлы, файлы стилей, преобразует SASS в CSS. Браузер читает только CSS. Ставится в проект.

Prettier — автоматически форматирует JavaScript код, при этом гарантирует, что код соответствует заданной максимальной длине строки. В отличие от ESlint, где требуется ручное исправление, Prettir делает все за вас. Интегрируется со средой разработки.

Figma — графический редактор. Объединяет в себе фишки по работе с векторной графикой и прочим инструментами UI-дизайна. Открывает одновременный доступ к проекту. Разработчику достаточно кликнуть на объект и справа видно всю информацию: его высоту, ширину, отступы, цветовой код. Если это шрифт — название, размерности, выравнивание.

Подробнее о Figma и ее функционале читайте тут

Optimizilla — веб-сервис, который уменьшает размер фото без потери качества. Работает с изображениями в форматах JPEG и PNG. Одновременно загружается до 20 изображений. Уровень качества и размер сжатия регулируется.

Clip path — инструмент для создания кривых блоков. Благодаря изменению координат можно создать и изменить любую геометрическую область. Она определяет, какая часть элемента будет видна, остальное скрывается. При создании генерируется CSS код, готовый к работе.

Box shadows — добавляет элементу одну или несколько теней. Тень — копия элемента, смещенная на заданное расстояние. Имеет широкие настройки теней — внешние, внутренние, размытые, плоские. Могут следовать контурам блоков. Тени внутри элемента сделают элемент объемным.

Favicon generator — генератор FAV-иконок под любые разрешения. Загружаешь картинку и сервис генерирует иконку с кодом для HTML. Иконки подойдут как для android, так и для IOS.

json editor online — редактор позволяет избегать ошибок. Пропустить запятую или двоеточие теперь не страшно. Json покажет, как код выглядит в консоли и браузере.

js fiddle — популярная среда веб-разработки. Редактирует и запускает код, написанный на HTML, JavaScript и CSS. Поддерживает библиотеки jQuery. Используется, когда проект большой, нужно добавить небольшую функцию и не запороть код. Тестируем, смотрим как работает функция, и вставляем в проект.

pug — препроцессор для HTML. Код автоматически генерируется в HTML. Позволяет использовать циклы и условия. Создавать переиспользуемые блоки CSS, чтобы избежать дублирования кода. Обычный HTML такого не умеет. Тег с классами в pug пишется в два раза быстрее, чем в HTML.

VirtualBox — виртуальная машина от Microsoft. Отличная возможность протестировать проект на Windows, если работаешь на Mac. В нее выгружаются разные версии, от XP до Windows 10. Позволяет тестировать проекты в любых браузерах — от IE до Chrome.

Библиотека — сборник готовых «кодовых» решений. Библиотеки сравнимы с продуктами. В блюдо можно добавить любой ингредиент, но отвечать за него будет разработчик, ведь решения используются исходя из его логики. Библиотеки экономят время. Если разработка проекта длится три месяца, смело вычеркивайте из них 20 дней.

JQuery — JavaScript библиотека с широкими возможностями. Проста в понимании и удобна в использовании. Все операции JQuery выполняются из кода JavaScript. Библиотека jQuery управляет поведением html-элементов и меняет структуру веб-страницы. Изменения касаются отображения страницы для пользователя — файлы HTML и CSS не меняются.

jQuery FancyBox — плагин для создания красивых фотогалерей и вывода изображений в модальных окнах. Для использования последней версии придется потратиться. Плагин платный.

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

Snap svg — JavaScript библиотека. Позволяет создавать и анимировать векторную графику в современных браузерах. Можно загружать код SVG асинхронно и запрашивать части, которые нужны, для превращения SVG файлов в спрайты.

GSAP.js или Greensock — библиотека JavaScript для создания высокопроизводительных анимаций. По сути, GSAP — манипулятор свойств объекта, который обновляет значения быстро и с высокой точностью. Примерно до 20 раз быстрее, чем jQuery. Анимацию можно останавливать, замедлять, ускорять, делать плавной. Имеет готовый набор функций, которые делают анимацию кроссбраузерной.

jQuery Form Styler — плагин меняет формы обратной связи, делая их привлекательнее. Меняет вид заявки на сайте, делая ее кроссбраузерной.

History — плагин управляет состоянием страницы. Отправляет ссылку на уже подгруженную историю браузера. Состояние страницы при этом сохраняется в виде нормального URL и всё работает так, как будто вы на самом деле переходите с одной страницы на другую.

Owl carousel — плагин для создания слайдеров. Имеет интуитивные настройки точек остановки слайдера. Адаптивен. Отлично работает как на мобильной, так и на десктопной версии. Owl карусель поддерживает модульную структуру плагина. Таким образом, можно отсоединить плагины, которые не используются в проекте, или создать новые, которые необходимы. Css2 поддерживает старые версии браузеров.

JQuery UI — библиотека собрала в себе стандарты фронтенд-разработки. Предоставляет упрощенный доступ к функциям взаимодействия, анимации, эффектов и набору виджетов. В коде прописывается один класс и библиотека делает все за тебя, достаточно обновить страницу.

Barba.js — библиотека делает «приложение одной страницы». Компоненты сайта загружаются на странице единоразово. Иными словами — страница без перезагрузки. Переходя между вкладками ничего не прогружается и создается впечатление, что находишься на одной странице. Как будто ты в приложении.

Пример сайта с использованием Barba.js — http://normsugar.com

Lettering.js — дает полный контроль над текстом. Используется для анимации. С помощью плагина слово разбивается на буквы и с каждой можно работать отдельно.

JQuery scroll bar — библиотека со скроллбаром. Заменяет квадратный скролл Windows на скролл IOS. Сделает сайт аутентичным, если он в стиле хайтек.

Swiper.js — превосходный слайдер, заточен для работы с мобильными версиями сайта и веб-приложениями. Swiper обеспечивает аппаратное ускорение анимации на нативном уровне. Гибкий, имеет множество настроек. Подогнать можно под любой дизайн или задачу.

Sticky kit.js — плагин дает простой способ «прилипания» элементов, которые всегда закреплены при скролле содержимого страницы. Имеет легкий обработчик прокрутки, который работает с кэшированными значениями.

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

Input mask — плагин для установки маски ввода элементу input с помощью кода JavaScript. Для своего функционирования требует наличие подключенной библиотеки jQuery.

PickMeUp.js — плагин jQuery datepicker. Простой и одновременно мощный календарь событий. Имеет гибкие настройки функционала и внешнего вида.

Мы не жадные и любим делиться полезным. Используешь крутой инструмент или библиотеку, но не увидел ее в статье — расскажи в комментариях.