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

Underscore.js Underscore.js предоставляет более 60 функций. Часть из них рассчитана на любителей map-reduce, другая — специальные вспомогательные функции для javascript. Библиотека умеет делегировать вызовы, если какая-то функциональность реализована разработчиками браузеров. Примеры // Первый элемент массива _.first([5, 4, 3, 2, 1]); // => 5 // Последний элемент массива _.last([5, 4, 3, 2, 1]); // => 1 // Убрать неугодные элементы _.without([1, 2, 1, 0, 3, 1, 4], 0, 1); // => [2, 3, 4] // Оставить только уникальные элементы _.uniq([1, 2, 1, 3, 1, 4]); // => [1, 2, 3, 4] 👉 @sWebDev

Лень искать тесты по JavaScript? Для вас уже все сделали! 🔥 Канал "Front Wars | JavaScript, HTML, CSS " Публикует полезные тесты которые помогут вам закрепить знания в программирование. 👉 Подписывайтесь и начинайте прокачиваться прямо сейчас @FrontWars

RxJS RxJS - это библиотека для реактивного программирования, которая позволит удобно организовать работу с событиями и асинхронным кодом, писать сложную логику декларативно. RxJS активно используется в фреймворке Angular, а также с Vue (Vue-rx) и лежит в основе реализации middleware для Redux (redux-observable) для React. 👉 @sWebDev

Typed.js Используется для анимации набора текста. Все строки, которые нужно запрограммировать, можно передать в виде массива. В библиотеке реализован SEO-подход, в котором текст, который нужно «оживить», можно прочитать из HTML-блока div на веб-странице. Поведение анимации настраивается с помощью набора параметров, таких как: 1. Скорость набора; 2. Скорость обратного интервала; 3. Задержка запуска; 4. Обратная задержка; 5. Количество циклов и так далее. 👉 @sWebDev

LitElement. Библиотека для создания легких веб-компонентов. Использует подход к созданию шаблонов для веб-приложений lit-html для асинхронного рендеринга. Пример создания шаблона: import { LitElement, html } from 'lit-element'; class MyElement extends LitElement { render() { return html`<p>template content</p>`; } } 👉 @sWebDev

Vivus Библиотека была создана специально для работы с SVG. Позволяет анимировать строки сразу, с задержкой или одну за другой, что дает больше возможностей при установке времени анимации. Примечание: Vivus всегда анимирует элементы в том порядке, в котором они определены в SVG. Кроме того, они должны иметь обводку вместо заливки. Чтобы создать приведенную выше анимацию, понадобилось всего шесть строк кода. 👉 @sWebDev

Date-fns. Это альтернатива библиотеки Moment.js. Предоставляет набор инструментов для синтаксического анализа, обработки и форматирования данных JavaScript. Примеры: import { format, formatDistance, formatRelative, subDays } from 'date-fns' format(new Date(), "'Today is a' eeee") //=> "Today is a Friday" formatDistance(subDays(new Date(), 3), new Date(), { addSuffix: true }) //=> "3 days ago" formatRelative(subDays(new Date(), 3), new Date()) //=> "last Friday at 7:26 p.m." 👉 @sWebDev

ScrollReveal Пригодится, если надо анимировать элементы, когда они прокручивают в область просмотра или из нее. В библиотеке можно контролировать ход анимации с помощью свойств delay, duration и interval. Также есть опции для управления вращением, масштабом и перемещением объектов. 👉 @sWebDev

😤Стартовый свисток прозвучал, болельщики с замиранием сердца смотрят на поле. Кто они — новые игроки в команде опытного тренера Ивана Пясецкого? 🙇🏻Архитектор сервиса будет финтить в системах автоматизации, оптимизировать работу в социально значимом продукте и завоёвывать кубки!🏆 🙌🏻Мы ждём от тебя опыта анализа и моделирования бизнес-процессов, работы с СУБД Oracle, знания XML-технологий. Для тебя — интересные задачи, возможность участия во всероссийском проекте и полный пакет плюшек — от ДМС до льготной ипотеки. ☕️Java developer будет передавать точные пасы остальным игрокам, поддерживать командный настрой, предлагать и оценивать фичи и разрабатывать приложение enterprise-уровня с высоким уровнем доступности. 😉Ждём, что ты понимаешь принципы SOLID, опыта программирования от трёх лет и победных матчей. С нас — открытая дорога к новым знаниям и крутая команда!

Lottie Анализирует анимацию, созданную Adobe After Effects, которая была экспортирована как JSON с помощью плагина Bodymovin. На странице репозитория подробно объясняется процесс установки и принципы работы Lottie. Для управления анимацией доступно множество глобальных параметров. Например, можно запускать, останавливать и менять направление движения анимированных объектов. 👉 @sWebDev

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