В этой статье мы собрали для вас коллекцию из 15 различных на JavaScript и CSS библиотек, с которыми нам довелось работать в июле. Каждая из них представляет различные решения фронтенд-задач и может быть большим подспорьем для начинающих и продвинутых разработчиков.
Offline.js представляет собой автономную библиотеку JavaScript, которая оповещает пользователя о потере подключения к сети Интернет. Она не только оповещает, но также сохраняет все исходящие AJAX-запросы и отправляет их заново, когда соединение восстановлено. Библиотека имеет простой пользовательский интерфейс с несколькими темами на выбор.
Algolia Places может мгновенно превратить любой input в элемент поиска адреса с помощью автозаполнения. Она имеет встроенную систему ранжирования, которая предлагает наиболее очевидные варианты в первую очередь, и другие мощные функции, такие как возможность игнорировать небольшие опечатки и понять, что на самом деле имел в виду пользователь. Библиотека очень проста в использовании и поможет вам сэкономить кучу времени.
Генерирует случайный цвет при помощи различных функций. По умолчанию библиотека выбирает цвет из списка предустановленных цветов, убедившись в том, что результат всегда красив и годен к употреблению. Вы также можете сделать цвета, основанные на других, генерировать целые цветовые палитры или экспериментировать с насыщенностью, цветовым тоном и др.
JavaScript библиотека, которая упрощает поиск и фильтрацию элементов на странице. Holmes берет строку с запросом из поля ввода и ищет совпадения в списке элементов. Элементы, которые не содержат запроса в коде, скрываются, а те, которые содержат - показываются.
Легкая, шустрая JavaScript библиотека со своим собственным шаблонизатором. Monkberry шаблоны написаны в типичной манере разметки в .monk файлах, которые затем компилятся с помощью JS. Причина быстродействия Monkberry в том, что, когда любой из входных данных изменяется, рендерится только часть шаблона, а не весь DOM.
Zingtouch - отличная библиотека для определения жестов. Распознает 6 различных жестов: касание, пролистывание, масштабирование, расширение, вращение и панорамирование. Zingtouch позволяет изменять любой из предопределенных жестов, или сделать свои собственные.
Очень гибкий CSS-фреймворк для построения адаптивных веб-приложений. Blaze полностью модульный, а это означает, что он позволяет выбрать какие из его многочисленных компонентов вам на самом деле нужны, а какие нет. Он предлагает передовые сетки a la Bootstrap, плавную анимацию CSS переходов и многое другое.
Anime.js - это JavaScript библиотека анимаций, которая имеет крошечные размеры и вместе с тем предлагает огромный спектр возможностей и всевозможных вариантов настройки. Библиотека поддерживает несколько технологий для выполнения реалистичных анимации (CSS трансформации, SVG и т.д.), так что разработчики могут выбрать то, что им по душе.
Единственная цель библиотеки Minigrid заключается в обеспечении простого способа для создания каскадных сеток в Pinterest-стиле. Пользователи просто должны написать простую HTML-разметку и вызвать JavaScript-функцию, после чего библиотека создаст отзывчивую сетку, которая всегда остается симметричной при любом разрешении экрана.
Chocolat.js - jQuery-плагин для создания красивых Lightbox галерей изображений. Плагин имеет малый вес (всего 10 кб в минимизированом виде), имеет большую браузерную поддержку, а также массу функций, включая различные режимы просмотра и клавишную навигацию. Официальный сайт библиотека представляет собой один из самых странных (в хорошем смысле) сюрреалистических сайтов, которые нам доводилось видеть.
Stretchy - независимая JavaScript библиотека, которая позволяет автоматически изменять размер элементов в зависимости от вводимых пользователем данных. Весь введенный текст может быть увеличен или уменьшен в зависимости от длины строки. Библиотека имеет простой в использовании API и отличную браузерную совместимость.
Shine.js создает причудливые динамические тени, которые реагируют на положение курсора пользователя. Тени могут быть применены к любому HTML элементу, включая текст. Эфект выглядит потрясающе реалистично, так как анимация хорошо откалибрована и плавная.
С BackgroundCheck разработчики могут делать элементы на страницах ярче или темнее, подгоняя цвета или картинки к фону. Можно выбрать любой элемент и его цвет автоматически изменится, придав ему больше или меньше яркости, а также настроив максимальную видимость.
Улучшите отладки JavaScript-кода с помощью Logerr. Простая в установке, эта библиотека заменит дефолтные ошибки в консоли на более подробные и понятные. Еще одна интересная особенность Logerr - библиотека, которая отправляет POST-запросы, содержащие отчеты об ошибках по выбранному вами адресу.
Этот плагин JQuery превращает классические bottom-of-the-page footnotes в современные всплывающие подсказки. Bigfoot предлагает много вариантов настройки, стилизации и функциональности. ТДефолтная темаю полностью адаптивна и изменяет положение и размер всплывающих подсказок, чтобы сохранить их видимыми на всех размерах экрана.