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

GSAP.js или Greensock Это библиотека JavaScript для создания высокопроизводительных анимаций. По сути, GSAP — манипулятор свойств объекта, который обновляет значения быстро и с высокой точностью. Анимацию можно останавливать, замедлять, ускорять, делать плавной. Имеет готовый набор функций, которые делают анимацию кроссбраузерной. 👉 @sWebDev

Даешь фронтенд! Долгое время на этом канале была разносортная информация по веб разработке, наконец то мы нашли свою нишу - теперь здесь будут размещаться обзоры библиотек по фронтенду Также приглашаем всех на наши другие каналы по другим тематикам: WebCraft - PHP / Laravel Senior Frontend - Современный Frontend Frontend Interview - Cобеседования по React / JS / CSS

Bluebird bluebird это библиотека, реализующая функционал промисов для javascript. Если в клиентскую сборку вы её вряд ли потащите, как никак 21Kb gzipped, то не использовать её на стороне сервера вы просто не имеете морального права. Bluebird всё ещё работает быстрее нативной реализации. Можете не верить на слово, а скачать репозиторий и запустить бенчмарки на последней версии Node.js (9.x.x). Подробней о преимуществах можно прочитать в кратком обзоре архитектурных принципов библиотеки. 👉 @sWebDev

Backend-Мастер - авторский блог про backend в телеграм. Этот канал для тебя, если ты: - учишь backend и языки программирования - работаешь на Python / PHP / Ruby - хочешь выйти на фриланс - интересуешься Django / Laravel / Ruby on Rails / Node.js - работаешь бэком, но хочешь быть в курсе последних тенденций в верстке и на фронте в целом

Fabric React Еще одна библиотека, созданная одним из крупных игроков рынка. Речь идет о Microsoft. Fabric React может помочь вам в создании Office-подобного пользовательского опыта. Это не значит, что вы будете копировать Office, просто у вас будет доступ к похожему поведению и графике. Fabric React совместима с десктопами, устройствами Android и iOS, а также используется на таких сайтах как Office 365, OneNote, Azure DevOps и пр. 👉 @sWebDev

Numeral.js — библиотека для форматирования чисел На создание библиотеки для удобного форматирования чисел программиста и веб-дизайнера Адама Дрэйпера вдохновила аналогичная библиотека для даты и времени — moment.js. Numeral.js позволяет задавать число знаков после запятой, символы-разделители для дробной части и групп разрядов, формат представления валют, процентов, времени, аббревиатуры для миллионов, миллиардов, мегабайтов и т.п. Кроме того, можно восстанавливать числовые значения из существующего строкового представления. Пример обработки числа с помощью библиотеки:

 var number = numeral(1000);
 var string = number.format('0,0'); // '1,000'
 var value = number.value(); // 1000

👉 @sWebDev

React Bootstrap Помните старую добрую библиотеку Bootstrap? Это была, собственно, смесь CSS и JS-файлов, позволявшая вам легко добавлять уже подготовленные UI-компоненты. Так может ли быть лучшее сочетание, чем Bootstrap и React? Эта библиотека заполняет пробел между старым и новым подходом, добавляя мощь React к уже и так мощной библиотеке. Все, что вы могли делать с Bootstrap, можно делать и с этой библиотекой, с той лишь разницей, что вы будете при этом следовать паттерну React-компонентов. 👉 @sWebDev

Moment.js Moment - это библиотека JavaScript, которая помогает анализировать, проверять, манипулировать и отображать дату и время в JavaScript очень простым способом Она позволяет отображать дату в соответствии с локализацией и в удобочитаемом формате. Вы можете использовать MomentJS внутри браузера, используя метод script. Он также доступен с Node.js и может быть установлен с помощью npm. Примеры использования:

 moment().format('MMMM Do YYYY, HH:mm:ss');

вернет дату в заданном формате

 февраль 21. 2013, 18:48:48

 moment().add('days', 7).add('months', 1);

добавит к изначальной дате семь дней, а затем 1 месяц 👉 @sWebDev

Компоненты Ant-design Ant-design предлагает полновесный список из больше чем 50 настраиваемых компонентов, которые вы можете использовать для создания прекрасных приложений. Особенность библиотеки в том, что все ее компоненты базируются на языке дизайна, разработанном создателями этой библиотеки. 👉 @sWebDev

Chart.js Chart.js - это бесплатная JavaScript-библиотека с открытым исходным кодом для визуализации данных, которая поддерживает 8 типов диаграмм: линейчатая, линейная, площадь, круговая, пузырьковая, радарная, полярная и разбросанная. И все эти диаграммы можно легко настроить и застилизовать под свои нужды. 👉 @sWebDev

React Spinner Вам случалось слышать фразу «иногда меньше значит больше»? Эта библиотека — прекрасная иллюстрация данной фразы. React Spinner фокусируется не на общем виде вашего приложения и не на внутреннем дизайне его архитектуры. Вместо этого она заботится об одной-единственной вещи: индикаторах загрузки. 👉 @sWebDev

Lodash Lodash - это библиотека, с набором полезных функций, для работы с данными, для конвертирования их из одного формата в другой, фильтрации, маппинга и других вещей. Конечно, можно реализовать все функции самому, но зачем очередной раз изобретать велосипед, когда до нас уже столько сделано, и, главное, хорошо оттестировано, а бывает даже и нормально задокументировано. Вот несколько примеров функций, реализованных в lodash для массивов: difference - Создаем новый массив, как разницу, где из первого массива исключили все значения второго (А-Б) first - Возвращает первый или несколько первых элементов массива flatten - Извлекает, в виде массива, элементы из объектов, содержащихся в передаваемом массиве для объектов: assign - Дополняет объект отсутствующими (не просто undefined) свойствами из другого объекта clone - Делает копию объекта (вложенные объекты копируются по ссылке) cloneDeep - Глубокое копирование объекта (вложенные объекты копируются по содержанию) 👉 @sWebDev

React Material-UI React Material-UI — это набор компонентов React, которые реализуют концепцию Material Design от Google. Если учесть то, что у библиотеки Material-UI более 30 тысяч звёзд на GitHub, она, вероятно, является самой популярной библиотекой для React. Стоит отметить качество и объем документации этой библиотеки. Вам нужно разобраться, как все работает, а чем больше функционала, тем больше проблем может возникнуть. Так что наличие обширной и хорошо продуманной документации очень важно. 👉 @sWebDev

JavaScript задачи с собеседований - канал на котором публикуются интересные задачки по JavaScript. Так же react, vue, angular, node.js Тематика канала : — cинтаксис, — условные операторы, переменные и типы данных, — функции и функциональные выражения, — циклы, взаимодействие с пользователем, — строки, массивы. Проверь свои знания языка на @javascriptquiz

Интересные эффекты наведения реализованные на чистом css. 👉 @sWebDev

Lazy load в том числе и нативный Отложенная загрузка изображений значительно сокращает время показа страницы, существует множество библиотек для решения этой задачи, луче всего справляются те, что используют Intersection Observer. Так же создана и потихоньку внедряется в браузеры технология ленивой загрузки средствами самого браузера, но у него пока плохая поддержка. lozad.js - работает без зависимостей, поддерживает <img>, <picture>, iframe, video, audio, background-image и т.д. Отличается простой настройкой, но немного запутанной документацией. vanilla-lazyload - так же написан на чистом js, но имеет гораздо более богатый функционал, можно настроить все аспекты работы, отличная документация, примеры реализации и советы по использованию. 👉 @sWebDev

Автоматическая респонсивная гексагональная сетка, интересное решение для галереи, списка новостей или контактов. 👉 @sWebDev

FrontendQuiz задачи с собеседований - канал на котором публикуются задачки для фронтендщиков: алгоритмы, регулярные выражения, вопросы с интервью, задачи для Junior Frontend и разбор их решения. Проверь свои знания на @frontendquiz

👉 @sWebDev