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

Snap svg Это JavaScript библиотека. Позволяет создавать и анимировать векторную графику в современных браузерах. Можно загружать код SVG асинхронно и запрашивать части, которые нужны, для превращения SVG файлов в спрайты. 👉 @sWebDev

Чего не хватало нам весь прошлый год, так это хороших IT-конференций в офлайне — HighLoad++ 2021 пройдет в Крокус-Экспо 17 и 18 мая. В этом году особенно радует состав спикеров и партнеров, которые не только разбавляют конференцию интерактивом, но и помогают набрать команды на проекты. Мы о Skillbox сейчас. Их курсами по программированию довольны — Skillbox за 2020 год трудоустроили 400 студентов. И вам помогут найти своего человека, просто подойдите к их стенду и расскажите о вашем запросе. Сюрприз: всем, кто придет на конференцию, Skillbox дает бесплатный доступ к курсу «Как подготовиться к профессиональной конференции». Поможет вам справиться с любым выступлением 💪🏻 Такое пропустить нельзя. Билет на конференцию приобретайте по ссылке 👉 https://clc.am/PxSH8A

Rebass Это маленькая React библиотека UI-компонентов, благодаря которой можно создавать очень мощные наборы примитивных UI-элементов для тем на основе библиотеки Styled System. Среди ключевых особенностей этой библиотеки стоит отметить следующие: 1. Очень простой старт. У вас не будет нужды писать большое количество бойлерплейт-кода: вы его просто импортируете и начнете расширять примитивные компоненты, а также создавать собственные при необходимости. 2. Привыкнув к рабочему процессу и синтаксису, вы сможете реализовывать темы для своих приложений, причем они будут обладать потрясающим уровнем кастомизации и расширяемости. А лучше всего то, что система тем полностью совместима с Theme UI. 3. При создании этой библиотеки применялся подход mobile-first. Вы получите новейшую философию дизайна прямо из коробки. 4. Flexbox layout с примитивными компонентами Box и Flex, которые вы можете расширять. 👉 @sWebDev

Device.js Device будет полезен больше для изменения интерфейса страницы или приложения на различных устройствах. Например, можно сделать версию для Android несколько иной, чем версия под iOS. Или пойти дальше и заточить, например, телефонную портретную версию под интерфейс iOS или Android. Ещё очень часто возникает необходимость отображения ссылок на онлайн-маркеты в зависимости от устройства пользователя. Например, при заходе с устройств на Android отображать ссылку на Google Play, на iPhone и iPad — AppStore, на Windows — магазин Windows Phone и т.д. Device.js с этим справляется прекрасно. 👉 @sWebDev

React Desktop Этот проект пытается подражать десктопному опыту в вебе. Как видите, при помощи этой библиотеки вы можете идеально воспроизвести десктопный опыт, используя JavaScript. А это значит, что вы сможете создавать настоящие десктопные приложения, используя Electron.js или же просто добавлять интересные эффекты в ваши веб-приложения (эти примеры лучше всего работают в Chrome, так что используйте именно этот браузер для тестирования). 👉 @sWebDev

Autosize.js Этот плагин автоматически регулирует высоту текстовой области, добавляя ей свойство автоматической регулировки высоты. Пользователю удобней просматривать набранную информацию. 👉 @sWebDev

Тесты и задачи по JavaScript На канале Front Wars | Javascript, HTML, CSS публикуют полезные мини-тесты разной сложности, которые помогут закрепить и улучшить свой скилл!😉 📊 — Каждый день новый тест ✉️ — Личный чат фронтендеров 🎁 — Скоро новая фича... 🚀 Залетайте на канал Front Wars @FrontWars

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

Интересуешься веб-разработкой? Пройди онлайн-курс по fullstack-разработке, изучи полный цикл работы с backend и frontend, освой Python, JavaScript или PHP, а также смежные навыки, — и получи высокооплачиваемую профессию. По данным Lucky Hunter, fullstack-разработчик входит в тройку самых востребованных IT-профессий, а значит, проблем с работой у тебя не будет. С нас — помощь с трудоустройством! Переходи на сайт https://clc.am/XOUzYQ , чтобы узнать больше и записаться.

Swiper.js Это превосходный слайдер, заточен для работы с мобильными версиями сайта и веб-приложениями. Swiper обеспечивает аппаратное ускорение анимации на нативном уровне. Гибкий, имеет множество настроек. Подогнать можно под любой дизайн или задачу. 👉 @sWebDev

Gestalt Библиотека компонентов Gestalt была разработана Pinterest на основе их внутреннего языка дизайна. Как и Material UI, и Ant-Design, Gestalt была создана для упрощения коммуникации между дизайнерами и разработчиками путем внедрения множества готовых компонентов. 👉 @sWebDev

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