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

Popmotion В основном используется для анимации чисел, цветов и сложных строк. Основная функция анимации занимает около 5 Кб, а вся библиотека — около 12 Кб. Подходит для двух видов анимации: кейфреймов и пружин. В первых можно указать точку перехода для анимации по кейфреймам. Пружинная имеет такие свойства, как жесткость, демпфирование, масса и скорость, чтобы сделать анимацию естественнее. Библиотека содержит множество вспомогательных функции angle, clamp, distance и snap, которые можно использовать для расчетов. 👉 @sWebDev

ProgressBar.js Позволяет разработчикам добавлять на веб-сайты индикаторы прогресса с некоторыми встроенными формами, такими как линия, круг или полукруг. Также в библиотеке есть возможность использовать пользовательские формы. 👉 @sWebDev

Mo.js Обеспечивает плавную анимацию, которую можно подстроить под все типы устройств. Благодаря модульности позволяет избежать лишних расходов, если нужно использовать только определенные элементы. В библиотеке есть декларативный API, который используется для установки значений различных свойств для компонентов, которые создаются. Поставляется с четырьмя различными встроенными модулями: HTML, Shape, ShapeSwirl и Burst. Модули burst и swirl могут быть использованы для всех видов взаимодействия пользователя с элементами на веб-сайте. 👉 @sWebDev

Кому нужны виртуальные помощники? Как их создавать и сколько можно заработать? 🗣12 июля Антон Виноградов, руководитель управления разработки веб-интерфейсов в SberDevices, расскажет о том, что вас ждет в области разработки чат-ботов и голосовых ассистентов. Вы познакомитесь с инструментами решения подобных задач и программой онлайн-курса, разработанного совместно с OTUS. 🎁Также Антон расскажет о возможности создать свой смартап на курсе и принять участие в конкурсе ассистентов Салют с призами до 2,5 млн. рублей. 👉🏻Регистрируйтесь на вебинар и готовьте свои вопросы эксперту: https://otus.pw/U9eG/

🥳Финальный свисток прозвучал, но на этом игра не заканчивается. Команда лучших продолжает работать для тебя! Сбер — 180 лет в игре🙌🏻

Wheelnav Wheelnav.js — библиотека на основе SVG для создания анимированного навигационного меню. Она позволяет создавать округлые, табулированные и многие другие форматы меню навигации. Библиотека включает в себя предопределенные CSS-классы, а также поддерживает data-атрибуты HTML5. 👉 @sWebDev

Yako.js Yako.js представляет собой миниатюрную библиотеку для построения графиков без использования DOM, разработанную для быстрого рендеринга как на клиентской, так и на серверной стороне. Библиотека предназначена для создания простеньких легких SVG-графиков, которые работают гораздо быстрее по сравнению с highcharts / flot / c3 / d3. 👉 @sWebDev

Макеты для вёрстки сайтов - это канал, где собраны уникальные примеры макетов, которые заказчики присылают верстальщику. Учитесь, практикуйтесь, пополняйте свое портфолио настоящими работами вместе с @build_html

Layzr.js Маленькая, быстрая и независимая библиотека для ленивой загрузки. Она помогает ускорять загрузку страницы, так как с ней изображения будут подгружаться только, когда попадут в область видимости браузера.

Vorlon.js Vorlon.js – это open-source инструмент с поддержкой расширений, позволяющий удаленно вести отладку и тестирование javascript-кода. Библиотека основывается на node.js и socket.io. Чтобы установить Vorlon.JS, нужно будет добавить всего лишь одну строку кода в ваше веб-приложение. Затем запустить сервер и открыть консоль Vorlon.JS. Инструмент позволяет одновременно подключиться к 50 устройствам. Проверить работу кода на каждом из подключенных устройств можно в одно нажатие. Отладку можно проводить практически на любой платформе при помощи веб-интерфейса. Плагин также позволяет добавлять новые функции и подключать ресурсы. 👉 @sWebDev

Datalib Datalib — это библиотека для работы с данными. Она включает в себя средства для загрузки данных, ведения статистики и использования шаблонов строк. Хотя изначально библиотека разрабатывалась для движка Vega и связанных с ним проектов, datalib – это полноценная независимая библиотека. Ее можно использовать для создания приложений для управления данными как на стороне клиента (в браузере), так и сервера (например, в связке с node.js).

Канал для начинающих и продвинутых программистов, который научит вас программировать лучше и эффективнее. На канале Daily Coding ежедневно публикуются интересные задачи с собеседований, обучающие статьи, бесплатные книги, советы разработчикам и многое другое. Неважно на каком языке вы пишете, вы всегда сможете найти что-то полезное для себя!

SVG.JS Библиотека используется для работы с SVG, в стандартном JS, она упрощает работу с SVG, не теряя в производительности, плюсом также является то, что библиотека простая и крайне быстрая. SVG.js предоставляет более краткий и легко читаемый синтаксис. const draw = SVG('drawing') const rect = draw.rect(100, 100).fill('#f06')

Video.js Данная библиотека предназначена для работы с видео и аудио. Ее главное преимущество заключается в продвинутом плеере, который гораздо лучше стандартного браузерного.

Socket io Эта библиотека нужна для работы с WebSocket. Пример использования // Подключаем блок для вывода текста let text = document.getElementById("text") // Подключаемся к серверу let socket = io('http://localhost:3000'); // Отслеживаем подключение socket.on('connect', function () { // Выводим сообщение подключение text.innerHTML = "Подключение прошло успешно<br>" // Отслеживание сообщения от сервера со заголовком 'hello' socket.on('hello', function (data) { // Выводим сообщение от сервера text.innerHTML += "Сервер: " + data + "<br>" }); });

Peppermint.js Библиотека Peppermint.js нужна для создания слайдов, она позволяет сделать его для тач устройств, с нуля это сделать достаточно сложно, поэтому если вам нужен слайдер для мобильных устройств, вам нужна эта библиотека.

Mousetrap.js: Эта библиотека нужна чтобы создавать действия при нажатие различных комбинации клавиш, что бывает очень полезно при создание функционального web-приложения, например текстового редактора или разработке приложение для ПК на JS. Пример назначения клавиш: Mousetrap.bind('4', function() { console.log('4'); }); Mousetrap.bind("?", function() { console.log('show shortcuts!'); }); Mousetrap.bind('esc', function() { console.log('escape'); }, 'keyup'); 👉 @sWebDev

А ты знаешь, что на GitHub очень много крутых проектов? Канал с подборками интересных проектов c GitHub - https://t.me/opensourcefuture. Подписывайся @opensourcefuture - копилка проектов пополняется каждый день.

melonJS Это игровой движок для 2D-игр. Подключая эту библиотеку к своему коду, вы получаете доступ ко всем фичам, таким как поддержка физики, столкновения, спрайты и другие, важные в действительно стоящих играх. Хотя документация может быть не самой лучшей из имеющихся, вокруг продукта создано много юзер-контента, помогающего понять, что вам делать. 👉 @sWebDev

Parallax.js Parallax.js реагирует на ориентацию вашего cмартфона, смещая слои в зависимости от их глубины в сцене. А если вы используете не смартфон, то parallax.js вместо этого будет учитывать позицию вашего курсора. 👉 @sWebDev