Frontender Libs - обзор библиотек JS / CSS

Taffy DB Taffy DB — небольшая библиотека, которая реализует почти полноценную базу данных полностью на JavaScript. Предназначена она, как думаю, уже понятно, для хранения любых типов данных (в том числе и обьектов, передаваемых в виде JSON), обеспечивает парадигму CRUD, что и позволяет отнести библиотеку к специализированным базам данных, а также предоставляет расширенные функции поиска, фильтрации и сортировки данных. Taffy DB значительно расширяет список доступных операций над коллекциями данных, упрощает вставку, выборку, обновление и удаление данных, поддерживает сортировку в различных форматах (традиционную для SQL DESC/ASC, в том числе и по нескольких полях сразу) 👉 @sWebDev

Slick Slick поможет вам реализовать эффект карусели. Он полностью имеет множество опций, работает с жестами смахивания для мобильных устройств и поддерживает другие интересные функции. Вы даже можете синхронизировать две карусели, если хотите создать эффект наложения. 👉 @sWebDev

Glimmer Отличная библиотека, которая помогает при работе с компонентами пользовательского интерфейса и отрисовкой DOM. Она построена на базе Ember CLI и использует Git, Node.js, npm и Yarn. Если вы ищете инструмент для создания компонентов и хотите оптимизировать процесс работы с ними, обратите внимание на Glimmer. 👉 @sWebDev

Premonish Premonish – библиотека JavaScript, которая анализирует движение курсора и предсказывает, с каким элементом пользователь будет взаимодействовать дальше. Это позволяет применить на сайте интересные триггеры анимации и помогает выделить некоторые призывы к действию. 👉 @sWebDev

Cleave.js Вы когда-нибудь использовали поле формы, которое бы форматировало контент во время набора текста? Например, чтобы превратить 1234567890 в номер телефона с международным кодом: (123) 456-7890. Cleave.js – библиотека JavaScript, позволяющая добавить на сайт подобные функции. 👉 @sWebDev

Popper.js Эта библиотека JavaScript поможет вам создать на сайте красивые попперы. Если вам интересно, что такое поппер, вспомните коммиксы. Когда герой о чем-то думает, из его головы вырывается маленький пузырь мыслей. Popper.js предлагает несколько способов упорядочить эти мысли, привязать к элементам и обеспечить их работу на экране любого размера. 👉 @sWebDev

Multiple.js Если вы занимаетесь созданием интересных фоновых изображений, обязательно стоит попробовать Multiple.js. Библиотека позволяет использовать фоновое изображение для нескольких элементов с помощью CSS, что создает действительно интересный визуальный эффект. На сайте разработчиков доступна демонстрация возможностей продукта. 👉 @sWebDev

IT Верстальщик - канал про верстку и бэкенд в телеграм. Этот канал для тебя, если ты: - учишь верстку и языки программирования - работаешь верстальщиком/фронтом - хочешь выйти на фриланс - интересуешься бэкендом - работаешь бэком, но хочешь быть в курсе последних тенденций в верстке и на фронте в целом

Choreographer-js Choreographer-js – простая библиотека JavaScript для анимации CSS. Ее легко использовать, и она действительно поможет вам создать для сайта сложную CSS-анимацию. 👉 @sWebDev

Granim.js Украсьте фон своего сайта красочным градиентом с помощью Granim.js. Эта небольшая библиотека JavaScript идеально подходит для добавления плавных и интерактивных градиентов. Их можно использовать независимо от других элементов, можно также закрыть ими изображение или разместить их под графической маской. 👉 @sWebDev

Bideo.js Полноэкранные видео служат отличным фоном для сайта. Bideo.js – библиотека JavaScript для добавления видеофона, который хорошо смотрится на экране любого размера и плавно масштабируется. 👉 @sWebDev

Anime.js Анимация и микровзаимодействия сейчас в тренде. Anime.js добавит на сайт немного движения. Библиотека работает с CSS, SVG, атрибутами DOM и объектами JavaScript, что делает ее идеальной практически для любого проекта. 👉 @sWebDev

Хотите освоить фронтенд-разработку? Начните 24 июня с demo-занятия «Создание интерактивных страниц, работа с анимациями»! Вместе с преподавателем Эржаном Торокуловым вы рассмотрите способы создания интерактивных страниц, научитесь анимировать переходы состояний HTML элементов, а также создадите анимации как на CSS, так и на JavaScript. Для регистрации на вебинар оставьте заявку 👉 https://otus.pw/7rza/

vue-datepicker Это библиотека, предназначенная для организации выбора дат. Нечто подобное встречается в огромном множестве реально существующих приложений. Библиотек, реализующих этот функционал, существует гораздо больше, чем библиотек для решения других задач. Элементы управления для выбора дат, создаваемые с помощью этой библиотеки, легко поддаются стилизации. Она поддерживает массу настроек, касающихся выбора дат и диапазонов дат. Библиотека позволяет формировать аккуратные и удобные элементы пользовательского интерфейса. Она даже поддерживает средства локализации. 👉 @sWebDev

AOS – Animate On Scroll Работаете над одностраничным сайтом с эффектом parallax? Animate on Scroll добавит приятную анимацию при прокручивании страницы. Эта библиотека поможет вам создать привлекательный дизайн: в ней есть все, от эффектов затухания, до размещения статических привязок. 👉 @sWebDev

Front-end, Back-end, Mobile, QA, Scrum... Если для Вас это не просто слова, Вам сюда 👉 @digital_epoch – канал для разработчиков и тех, кто в теме 😎 Из интересного – подборки статей для фронтов – сервисы для дизайнеров и верстальщиков – бесплатные курсы Подписаться: @digital_epoch

vue-good-table. Таблицы — это очень важная часть многих веб-приложений. Если выбрать не очень качественную библиотеку для работы с таблицами, это может принести немало проблем. Эта библиотека способна решить большинство задач по работе таблицами, встающими перед разработчиком. И её название, «good-table» («хорошая таблица»), это — не просто слова. Это — действительно хорошая библиотека, которая предоставляет нам гораздо больше возможностей, чем можно ожидать. 👉 @sWebDev

Anchorme.js Это компактная и быстрая JavaScript-библиотека, предназначенная для поиска URL и адресов электронной почты в тексте и для преобразования их в рабочие гиперссылки. Вот её основные характеристики: 1. Высокая чувствительность, низкий процент ложноположительных срабатываний. 2. Валидация ссылок и адресов электронной почты по полному списку IANA. 3. Валидация номеров портов (при их наличии). 4. Валидация IP-адресов (при их наличии). 5. Поддержка URL, записанных символами, отличными от символов латиницы. 👉 @sWebDev

Онлайн-курс «Frontend-разработчик с нуля до PRO» — ваш проводник в мир IT. ⠀ По окончании обучения вы сможете стать middle-разработчиком и устроиться на высокооплачиваемую работу, даже если вы никогда раньше не программировали. ⠀ На курсе вы научитесь: - верстать веб-страницы; - создавать интерактивные веб-приложения; - работать в системе контроля версий GIT и командной строке Bash; - применять основные алгоритмы и структуры данных в реальных проектах; - работать с макетами в Photoshop и Figma; - создавать серверные приложения с использованием Node.js и многому другому. ⠀ А ещё у вас будет 4 дипломных проекта для вашего портфолио — они повысят шансы получить должность в одной из компаний, которые подберёт наш Центр карьеры. Переходите по ссылке: https://clc.am/vOHpEQ, чтобы зарегистрироваться на курс ⠀

vue-clickaway Иногда бывает так, что нужно вызвать событие, когда пользователь щёлкнет мышью за пределами некоего элемента. Чаще всего так нужно поступить тогда, когда требуется, чтобы таким образом можно было бы закрыть выпадающий список или диалоговое окно. Для реализации такого поведения существует один пакет, который я использую практически в каждом разрабатываемом мной приложении. 👉 @sWebDev