NGX Bootstrap

Библиотека NGX Bootstrap набрала около 5 тысяч звёзд на GitHub. В ней можно найти базовые компоненты, реализующие возможности шаблона Bootstrap и написанные для Angular, да и не только их. Она подходит для разработки настольных и мобильных приложений и спроектирована с учётом расширяемости и адаптивности.

👉 @sWebDev

Typeahead.js

Библиотека с открытым исходным кодом. Обеспечивает автозаполнение для окон поиска и других текстовых полей на веб-сайтах. Состоит из двух компонентов — механизма предложений и UI-элемента.

Ключевые функции:
1. Компоненты библиотеки можно использовать отдельно модульно;
2. Обширная библиотека для каждого компонента;
3. Поддержка всех десктопных браузеров (не для мобильных).

👉 @sWebDev

Prime NG

Это библиотека, включающая в себя обширный набор из более чем 70-ти компонентов пользовательского интерфейса. При этом здесь доступны разные виды их стилизации, например — Material Design и Flat Design. Ей пользуются такие компании, как eBay, Fox, и многие другие. Всё это говорит о том, что данная библиотека достойна внимания тех, кто ищет подходящий набор компонентов для своего проекта.

👉 @sWebDev

ApexChart

Представляет собой функцию интерактивных диаграмм, которую можно использовать с веб-сайтами, работающими с фреймворками JavaScript. Интерактивные предварительно упакованные диаграммы с простым API предоставляются вместе с библиотекой.

Функции:
1. Оболочки для популярных фреймворков, таких как React, Vue и Angular;
2. Обширная документации и кроссбраузерная поддержка;
3. Единый и простой в использовании API.

👉 @sWebDev

Сколько времени учатся на фронтендера с нуля?

От 6-ти месяцев. Вот несколько правил, с которыми сделать это будет проще:

- Не изучайте фреймворк, не разобравшись в азах;
- Не учитесь по любительским урокам, где могут показать плохие практики;
- Не делайте перерывов в обучении;
- Выполняйте практические задания, выбирайте их соответственно своему уровню;
- Найдите ментора, который будет вас проверять и выявлять пробелы в знаниях.

Плохая организация обучения отодвинет срок вашей первой ЗП на годы, отнеситесь к этому ответственно.

Можно выбрать готовое решение - Профессия Frontend-разработчик PRO от Skillbox.

Курс разработан грамотно и проверен на тысячах студентов.

В него входят:
- 3 месяца бесплатного периода;
- изучение React, Vue
- гарантия трудоустройства;
и многое другое.

Летняя скидка - 40%

NG-ZORRO

Компоненты из библиотеки NG-ZORRO написаны на TypeScript с полной типизацией. Цель этого проекта — дать разработчикам высококлассные компоненты для создания пользовательских интерфейсов в стиле Ant Design. Эта интересная библиотека создана китайскими разработчиками, на GitHub у неё около 2 тысяч звёзд.

👉 @sWebDev

Ext JS

Ещё пару лет назад этот продукт бил все рекорды популярности у опытных разработчиков, заслуженно завоевав их уважение. Был даже период, когда Sencha Ext JS был безраздельным властелином на рынке UI библиотек.

👉 @sWebDev

Meanderer

Маленькая библиотека JavaScript для создания отзывчивых траекторий анимации. Перед началом работы автор Meanderer рекомендует воспользоваться SVGOMG.

👉 @sWebDev

amCharts

amCharts — одна из JavaScript библиотек, полезных тем, кто ищет простое и в то же время гибкое решение для визуализации данных.

Основные возможности
1. Много разнообразных типов графиков, включая интерактивные карты и диаграммы Ганта.
2. Возможность анализа данных «вглубь» (дрилдаун) и другие хорошо проработанные интерактивные опции.
3. Документация, описывающая все нужные методы, хорошо написана, правда, на мой вкус, не слишком удобна в использовании.
4. Крутая анимация графиков.
5. Интеграция с React, Angular, Vue, Ember и др.
6. Готовый плагин для WordPress.
7. Экспорт графиков в изображение или PDF файл.

👉 @sWebDev

MoreToggles.css

Библиотека на чистом CSS со множеством приятных глазу переключателей.

👉 @sWebDev

Plotly.js

Plotly.js — это библиотека JavaScript высокого уровня, бесплатная, с открытым исходным кодом. Построена на D3.js и WebGL. Ее можно использовать для создания множества самых разных типов визуализации данных, включая, например, трехмерные статистические графики.

👉 @sWebDev

Halfmoon

Интерфейсный фреймворк со встроенным тёмным режимом и полной настраиваемостью с использованием переменных CSS; отлично подходит для панелей мониторинга и инструментов.

👉 @sWebDev

Luxon

Библиотека Luxon заявлена как мощное, современное и удобное средство для работы с датами и временем в JavaScript. Библиотеку создал Айзек Камброн (Isaac Cambron), входящий в команду разработчиков Moment с 2013 года.

👉 @sWebDev

reseter.css

Футуристическая альтернатива Normalize.css и CSS Resets. На картинке представлены различия с конкурирующими библиотеками.

👉 @sWebDev

Charts.css

CSS-фреймворк с открытым исходным кодом для визуализации данных помогает разработчикам интерфейсов превращать данные в красивые диаграммы и графики при помощи простых классов CSS.

👉 @sWebDev

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. Множество готовых примеров графиков, диаграмм, дашбордов, а также собственная

react-dates

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

👉 @sWebDev

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

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'
// }

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

StoryBook

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

StoryBook позволяет создавать компоненты пользовательского интерфейса React-приложений и заниматься настройкой их внешнего вида в интерактивном графическом окружении, которое упрощает работу с компонентами React.

👉 @sWebDev