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

Polymer Библиотека JavaScript с открытым исходным кодом от Google — Polymer используется для создания веб-приложений с использованием компонентов. Особенности и преимущества: 1. Предоставляет простой способ создания нестандартных элементов. 2. Поддерживает вычисляемые свойства. 3. Поддерживает как одностороннюю привязку данных, так и двустороннюю. 4. Хорошо работает с событиями жестов. 👉 @sWebDev

Highload — это новое издание с полезными техническими решениями и интересными историями из жизни тех, кто пишет код. Жмите на кнопку чтобы узнать правильный ответ на вопрос и подписывайтесь на Highload

Vuetify Vuetify — UI-библиотека Vue с красивыми, сделанными вручную компонентами. Все компоненты соответствуют спецификациям Material Design: они модульные, адаптивные и производительные. Благодаря использованию SASS-переменных вы сможете кастомизировать свои приложения, создавая уникальные и динамичные макеты и прекрасные стили компонентов. Vuetify учитывает руководства по доступности, поддерживает все современные браузеры и совместима с Vue CLI 3. Она легко интегрируется и имеет множество UI-компонентов, пригодных для многократного использования (карусели, навигация, карточки). Библиотека также предлагает базовые шаблоны для простого HTML, Webpack, NUXT, PWA, Electron, A La Carte и Apache Cordova. 👉 @sWebDev

Parsley Вы хотите добавлять формы в свои проекты? Если да, то Parsley может быть вам полезен. Это простая, но мощная библиотека JS, которую можно использовать для проверки форм. Особенности и преимущества: 1. Интуитивно понятный DOM API принимает входные данные непосредственно из тегов HTML, не требуя написания JS. 2. Проверка динамической формы путем динамического обнаружения изменений формы. 3. 12+ встроенных валидаторов, валидатор Ajax и другие расширения. 4. Вы можете переопределить поведение Parsley по умолчанию и предложить интерфейс, ориентированный на пользовательский интерфейс и UX. 5. Бесплатный, с открытым исходным кодом и сверхнадежный, а также работает со многими браузерами. 👉 @sWebDev

PrimeVue Это универсальная, простая в использовании и производительная библиотека UI-компонентов для Vue. Она создана, чтобы помочь вам строить прекрасные пользовательские интерфейсы. В этой библиотеке вы найдете больше 80 UI-компонентов с адаптивным дизайном и полной поддержкой WCAG (руководство по обеспечению доступности веб-контента). Благодаря последнему обновлению эта библиотека имеет полную поддержку Vue 3. В том же обновлении добавилось большое количество новых компонентов. Одно из основных преимуществ PrimeVue — широкий спектр компонентов. Там есть все, от таблиц и пагинаторов до продуманных диаграмм, которые вы можете использовать при создании интерактивных Vue-приложений. 👉 @sWebDev

Masonry Masonry - это потрясающая библиотека для создания сетки. Эта библиотека помогает размещать элементы раскладки в подходящих положениях в зависимости от доступного пространства по вертикали. 👉 @sWebDev

Всем привет! Меня зовут Алексей и я хочу пригласить Вас в свой авторский канал - Дневник веб программиста. В нем я рассказываю как сам изучал веб, пока не нашел работу (сейчас я мидл в крупной компании) и что делать Вам, если хотите стать программистом. А так же последние новости из мира фронтенд, авторские статьи и чат для помощи. Добро пожаловать! ➡️ @WebProgrammerDiary

Gatsby.js Это генератор статических сайтов, на котором делают очень быстрые веб-страницы. Gatsby написан на React и входит в инфраструктуру этой библиотеки. То есть фактически Gatsby представляет собой React-фреймворк, с помощью которого можно быстро собрать и опубликовать React-приложение. 👉 @sWebDev

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

Omniscient Omniscient.js — это библиотека JS, которая обеспечивает абстракцию компонентов React для быстрого рендеринга сверху вниз, охватывающего неизменяемые данные. Эта библиотека может помочь вам легко создать ваш проект, поскольку она оптимизирована и предлагает интересные функции. 👉 @sWebDev

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