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

VuePress Это генератор статических сайтов на основе Vue. Первоначально созданный как инструмент для написания технической документации, теперь это небольшая, компактная и мощная безголовая CMS. Начиная с версии 1.x, он предлагает отличные функции ведения блогов и мощную систему плагинов. Он поставляется с темой по умолчанию (с учетом технической документации), но вы также можете создавать собственные темы или использовать готовые опции сообщества. 👉 @sWebDev

Flux Софт для построения архитектуры приложения и пользовательских интерфейсов с однонаправленным потоком данных. Отличительные особенности: 1. позволяет легко находить ошибки в сложном приложении; 2. быстрое время перезагрузки. 👉 @sWebDev

Хочешь прокачать свои знания в JS, CSS и HTML? 👩‍💻 На фронте - канал где практикующие разработчики собирают для Вас самые актуальные материалы для обучения веб-разработке. На канале ты найдешь ✔️Обучающие туториалы ✔️Примеры кода ✔️Статьи  Подписывайся и начинай получать все самые лучшие материалы, которые помогут тебе прокачать свои знания -> @on_the_frontend

Vue CLI По умолчанию Vue CLI предлагает поддержку основных инструментов и технологий веб-разработки, таких как Babel, TypeScript, ESLint, PostCSS, PWA, Jest, Mocha, Cypress и Nightwatch. Это возможно благодаря расширяемой системе плагинов. Это означает, что сообщество может создавать и распространять повторно используемые плагины для общих нужд. 👉 @sWebDev

react-helmet Повторно используемый React-компонент, созданный для управления всеми изменениями в заголовке документа. Принимает и выводит простые HTML-теги – очень просто и React-friendly. Отличительные особенности: 1. поддержка всех допустимых тегов: title, base, meta, link и т. д; 2. поддержка рендеринга на стороне сервера; 3. вложенные компоненты переопределяют повторяющиеся изменения заголовка. 👉 @sWebDev

Element UI Дизайн система насчитывает порядка 60 компонентов со всевозможными кастомизациями, так как стили библиотеки легко переопределяются. Библиотека использует препроцесcор SCSS с возможностью заменить глобальные переменные цветов, тем самым можно легко создать свою цветовую тему. Кстати говоря, все классы в библиотеке названы по БЭМу. Присутствует поддержка 24 колоночной структуры и локализации на русском, украинском и казахском языках. 👉 @sWebDev

react-select Отличная альтернатива для компонента Select в React.js. Представляет собой совершенно новый способ развития мощных компонентов React.js, которые работают из коробки, будучи полностью настраиваемыми. Отличительные особенности: 1. гибкий подход к данным с настраиваемыми функциями; 2. расширяемый API с Emotion – JS-библиотека, предназначенная для написания CSS-стилей; 3. внедрение компонентов через API для полного контроля над поведением UI; 4. оption groups, поддержка портала, анимация и многое другое. 👉 @sWebDev

Superagent Библиотека Superagent подходит для Node.js и для современных браузеров. Она предоставляет разработчику простое и понятное API, с которым удобно работать. Для того чтобы выполнить HTTP-запрос средствами Superagent, достаточно вызвать подходящий метод объекта request:

 request
     .get('')
     .then(res => log(res))
     .catch(err => log(err))

Сильные стороны 1. Поддерживает плагины. 2. Поддаётся конфигурированию. 3. Имеет приятный интерфейс для выполнения HTTP-запросов. 4. Поддерживает объединение в цепочку нескольких вызовов для выполнения запросов. 5. Работает в среде Node.js и в браузерах. 6. Поддерживает индикацию прогресса для выгрузки и загрузки данных. 7. Поддерживает механизм chunked-transfer encoding. 8. Поддерживает коллбэки. Слабые стороны Имеет своеобразное API, не придерживающееся каких-либо стандартов. 👉 @sWebDev

Mozaik Mozaik — это отличная библиотека для создания приятных панелей управления, которые можно интегрировать в веб-приложения. Она поддерживает широкие возможности настройки и отзывчивый дизайн. В частности, она подходит для любых платформ — будь то настольный компьютер с огромным экраном, или смартфон. В Mozaik имеется множество стандартных тем, но разработчик ими не ограничен. Библиотека поддерживает позиционирование элементов на основе сетки, оптимизированное взаимодействие с серверной частью приложения, с её помощью можно, при необходимости, создавать множество панелей управления. 👉 @sWebDev

Elemental UI Elemental UI — это весьма гибкий и эффективный фреймворк для разработки привлекательных пользовательских интерфейсов. Он предназначен для React и основан на CSS. Этот фреймворк похож на Material UI, но он гораздо компактнее. Он спроектирован с учётом установки из npm и встраивания в проект с использованием Browserify или Webpack. 👉 @sWebDev

Spectacle Spectacle — это библиотека, основанная на React и предназначенная для создания качественных динамических слайдов для веб-презентаций. В ходе создания презентаций можно использовать компоненты React. В библиотеке имеются готовые к использованию компоненты, такие, как <Slide> и <BlockQuote>. Это упрощает работу по созданию презентаций. 👉 @sWebDev

​Пройдите онлайн-курс от Skillbox и станьте востребованным PHP-разработчиком! PHP входит в десятку самых популярных языков программирования по индексу TIOBE. На этом серверном языке написано большинство CMS, в том числе и WordPress, на котором работает 65% всех сайтов в мире. Чтобы поддерживать работу старых проектов и писать веб-приложения с нуля, компании нанимают PHP-разработчиков. Вы с нуля научитесь программировать сайты и веб-приложения на PHP, освоите фреймворк Laravel, напишете облачное хранилище и поработаете над интернет-магазином в команде. Сможете устроиться на позицию Junior-разработчика. Прямо сейчас более 2 800 компаний ищут PHP-разработчиков, а средняя зарплата, по данным HeadHunter, составляет 90 000 рублей! Расходы за первые 3 месяца обучения берёт на себя Skillbox. За это время вы освоите базовые навыки и закрепите знания на практике. В конце обучения опытные HR-специалисты подберут лучшие вакансии, подготовят к собеседованию и помогут получить работу. Переходите по ссылке: https://clc.to/bnVusQ и узнайте больше о программе обучения.

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

StoryBook Разработку серверных частей приложений можно упростить с помощью специализированных фреймворков, таких, как Meteor и Firebase. React StoryBook — это библиотека, которая даёт те же возможности разработчикам клиентских частей приложений. StoryBook позволяет создавать компоненты пользовательского интерфейса React-приложений и заниматься настройкой их внешнего вида в интерактивном графическом окружении, которое упрощает работу с компонентами React. 👉 @sWebDev

react-themed Эта библиотека предоставляет HOC, который позволяет добавлять темы в React компонент в качестве prop. Пример использования: import themed from 'react-themed' import styles from './Button.css' const Button = ({ theme, ...props }) => ( <button {...props} className={theme.button} /> ) export default themed(styles)(Button) 👉 @sWebDev

sensitive-param-filter Эта библиотека без дополнительных зависимостей реализует фильтрацию уязвимых параметров в объекте. С помощью неё можно не только удалять разные свойства в объекте, но и заменять их на указанные значения. Пример использования: const { SensitiveParamFilter } = require('@amaabca/sensitive-param-filter') const paramFilter = new SensitiveParamFilter() const rawObject = { Authorization: 'Bearer somedatatoken', body: { info: '{ "amount": 28.64, "credit_card": "4242424242424242", "cvv": "123" }' }, method: 'POST', url: 'https://pay.example.com?user=bob.bobbington&password=asecurepassword1234' } const filteredObject = paramFilter.filter(rawObject) // filteredObject = { // Authorization: 'FILTERED', // body: { // info: '{ "amount": 28.64, "credit_card": "FILTERED", "cvv": "FILTERED" }' // }, // method: 'POST', // url: 'https://pay.example.com?user=bob.bobbington&password=FILTERED' // }

url-template Эта небольшая библиотека помогает очень легко и быстро создавать url адреса по заданным шаблонам. Может пригодиться как в серверной части приложения, так и на фронтенде. Пример использования: var template = require('url-template'); var emailUrlTemplate = template.parse('/{email}/{folder}/{id}'); var emailUrl = emailUrlTemplate.expand({ email: 'user@domain', folder: 'test', id: 42 }); console.log(emailUrl); // Returns '/user@domain/test/42' 👉 @sWebDev

react-dates Эта библиотека от air-bnb предоставляет настраиваемые одинарные и двойные date-пикеры для React. 👉 @sWebDev

​Раньше все хотели стать космонавтами, а теперь — программистами. Веб-разработчик — перспективная профессия в сфере IT. Они востребованы везде, где бизнесу нужны приложения. РАНХиГС и Skillbox разработали новый формат обучения — онлайн-бакалавриат. За 4 года обучения вы: • научитесь создавать сайты, разрабатывать дизайн для мобильных приложений и проектировать информационные системы; • углубитесь в математику и подтянете английский; • научитесь программировать на JavaScript и познакомитесь с популярными фреймворками; • узнаете, как работать с базами данных, программировать на SQL, PHP и Python; • углубите навыки разработки на PHP и Python; • освоите C# и Golang; • изучите DevOps и гибкие навыки, которые понадобятся в работе. Через 4 года получите государственный диплом и сможете начать карьеру. Также есть возможность участвовать в программе двойного диплома с Университетом Гренобль Альпы (Франция). Поступление: ЕГЭ — для всех абитуриентов. Проходной балл суммируется по всем предметам: математика, русский язык и на выбор — английский язык, физика или информатика и ИКТ. Завершение приёма документов — 19 августа!. Получите больше информации по ссылке: https://clc.am/IVcapA

AnyChart AnyChart — хорошо проработанная, легковесная, многофункциональная JS библиотека для визуализации данных с рендерингом в SVG/VML. Позволяет веб-разработчикам создавать всевозможные графики и диаграммы для дальнейшего принятия решений на их основе. Основные возможности 1. Более 80 типов графиков, включая обычные графики, биржевые графики, геовизуализации (карты), а также диаграммы Ганта и сетевые графики PERT. 2. Много вариантов, как можно загружать данные: XML, JSON, CSV, JS API, Google Sheets, HTML-таблицы. 3. Возможность «углубляться» в данные на графике (дрилдаун). 4. Технические индикаторы для технического анализа и аннотации (инструменты для рисования) «из коробки». 5. Исчерпывающие документация и описание API, отзывчивая поддержка. 6. Интеграция с Angular, Oracle APEX, React, Elasticsearch, Vue.js, Android, iOS и др. Для разработчиков приложений и дашбордов в Qlik есть специальный готовый экстеншн для Qlik Sense. 7. Множество готовых примеров графиков, диаграмм, дашбордов, а также собственная