Здравствуйте, хотите быть в курсе последних и самых крутых тенденций в веб-разработке, тогда Вам нужно знать про лучшие Javascript и CSS библиотеки на данный момент.
Скачать исходники для статьи можно ниже
1. localForage
Сайт: “github.com/localForage/localForage”
LocalForage является удобной оберткой над хранилищами WebSQL, IndexedDB и localStorage, отделяя работу с хранилищами от непосредственной работы с данными, хранимыми offline.
2. AOS
Сайт: “michalsnik.github.io/aos/”
AOS – это CSS библиотека, которая позволяет добавлять эффекты анимации при прокрутки страчки. Библиотека очень крошечная, настраиваемая, простая в использовании (установка через CDN), и, самое главное, хорошо работает, в отличие от некоторых других анимированных библиотек прокрутки.
3. MJML
Сайт: “mjml.io/”
MJML – это простой XML-подобный язык, который предоставляет простой синтаксис разметки с различными стилизованными компонентами, которые могут быть скомпилированы в HTML. Таким образом, мы не должны вручную кодировать целые макеты из таблиц и устаревших встроенных стилей.
Mjml — ориентирован на создания электронных писем. По заявлениям разработчиков, сервис значительно ускоряет написание писем. Кроме того, письма, созданные с помощью mjml, адаптируются под любые почтовые клиенты. “Даже Outlook”, — говорят разработчики.
4. Monaco editor
Сайт: “github.com/Microsoft/monaco-editor”
Редактор кода от Microsoft на основе кода Visual Studio. В нем есть все, что можно ожидать от современного редактора кода: подсветка синтаксиса для многих языков, сочетания клавиш, завершение кода и т. д. Monaco – это редактор с открытым исходным кодом, поэтому он может быть встроен в Ваш проект.
5. A-frame
Сайт: “aframe.io/”
A-frame – это библиотека для упрощённого создания VR-сайтов.
После того, как вы создали свой 3D мир в HTML, библиотека А-frame возьмет его и разделит на два экрана с немного разными углами обзора. Теперь, вы можете запустить свой 3d мир на смартфоне с помощью Google Cardboard или другой гарнитуры и насладиться VR технологиями.
6. Bootstrap 4
Сайт: “github.com/twbs/bootstrap”
Bootstrap 4 приносит много изменений и новых функций в сравнение с версии 3, вот самые интересные из них:
– Переход от Less к Sass.
– Улучшенная система сетки. Была добавлена новая сетка, которая более целенаправленная на мобильные устройства, и был полностью переработан семантический миксин.
– Поддержка flexbox опции.
– Новые варианты настроек. Были переработаны стили визуального оформление, такие как градиенты, тени, переходы и так далее, все эти свойства были записаны в переменные Sass. В результате если вы хотите изменить тень, или изменить радиус скругления, достаточно будет сменить переменную.
– Брошена поддержка IE8 и переход к rem и em единиц.
– Были переписаны все JavaScript плагины. Каждый плагин был переписан в ES6, чтобы воспользоваться преимуществами новейших усовершенствований JavaScript.
– Улучшено автоматическое размещение подсказок и всплывающих окон благодаря помощи библиотек Tether.
Улучшенная документация.
И многое другое!
7. Prettier
Сайт: “github.com/prettier/prettier”
Prettier – инструмент для форматирования кода. Он помогает сделать код более аккуратным и читабельным.
Проект имеет более 20000 звёзд на Github. Его любят разработчики, потому что данная вещь значительно упрощает жизнь многим из них. Если вы не используете автоформатирование кода, вам стоит присмотреться к Prettier.
8. GPU.js
Сайт: “gpu.rocks/”
Библиотека для запуска браузерного JavaScript кода прямо в GPU (графическом процессоре). Что позволяет выполнять сложные вычисления намного быстрее, компилируя написанный JS в шейдерный язык, который может работать на GPU через WebGL. Если WebGL недоступен, функции выполняются как обычный JavaScript.
9. r2
Сайт: “github.com/mikeal/r2”
Это обновленная версия популярной библиотеки request для Node.js. Он представляет собой более легковесное HTTP-клиентское решение, которое построено на нативном Fetch API и подогнано под Node.js. R2 имеет размер 16K в сжатом виде, для сравнения request ~ 500 КБ.
10. Puppeteer
Сайт: “github.com/GoogleChrome/puppeteer”
Puppeteer — это высокоуровневый API Node.js для работы с новой функцией headless Chrome. Это официальный проект Google, поддерживаемый командой Chrome DevTools. Подробнее об этом можно прочитать в статье Automating Google Chrome with Node.js, где рассмотрены некоторые из его функций.
11. Push
Сайт: “github.com/Nickersoft/push.js”
Push — это самая быстрая JavaScript библиотека для управления десктопными уведомлениями. Он основан на мощном Notification API, но также выступает в качестве надежного кросс-браузерного решения, откатываясь до старых реализаций, если браузер пользователя не поддерживает новый API.
12. Draggable
Сайт: “shopify.github.io/draggable/”
Draggable – библиотека для реализации функционала drag and drop.
У данной библиотеки есть дополнительные модули, которые помогают добавить ещё больше функций, такие как сортировка, обмен и другие.
13. Devices.css
Сайт: “github.com/picturepan2/devices.css”
Библиотека, которая демонстрирует современные мобильные устройства, созданные с помощью Pure CSS. Он включает в себя некоторые из самых популярных мобильных устройств, таких как iPhone 8, iPadPro, MacBook и Samsung Galaxy S8. Дизайн элегантный и высококачественный и может быть использован для лендинга или скриншотов.
14. Card
Сайт: ‘github.com/jessepollak/card”
Card – это крошечный проект vanilla JS, который создает анимированную кредитную карту, которая заполняется по мере ввода данных пользователями.
15. Webpack
Сайт: “github.com/webpack/webpack”
Webpack – это статический модульный сборщик для приложений на JavaScript. Официальный сайт проекта: “webpack.js.org/”. Чем полезен вебпак. Приложения, написанные на JavaScript, постоянно усложняются, поэтому хорошим выходом является использование сборщика (или бандлера). … Подобная модульная система позволяет добиться лучшей организации проекта, так как получается, что он разбит на небольшие модули. Вебпак на данный момент является одним из самых мощных подобных инструментов. Он имеет открытый исходный код и позволяет решать множество разных задач.
16. Deeplearn.js
Сайт: “github.com/PAIR-code/deeplearnjs”
Deeplearn.js – это библиотека от компании Google, которая позволяет работать с машинным обучением.
Deeplearn.js позволяет на стороне клиента производить машинное обучение, библиотека полезна для создания интерактивных презентаций, быстрого формирования прототипов моделей и визуализации написанного кода ещё до полного его завершения. Расширение позволит создавать вычисления без доступа к сети.
Благодаря технологии WebGL JavaScript API, что способствует обработке 2D и 3D графики. Deeplearn.js позволит выполнять вычислительные операции непосредственно в графическом ядре. Благодаря инновационному подходу значительно увеличивается производительность обрабатываемого кода, а также устраняется часть негативного эффекта от достаточно медлительной работы языка JavaScript.
17. Keystone
Сайт: “github.com/keystonejs/keystone”
KeystoneJS – мощная CMS, построенная на Express и MongoDB. Это позволяет создавать динамические проекты. Он предлагает красивый интерфейс администратора, полезные утилиты API, возможность отправки электронной почты, различные расширения и многое другое. Он также предлагает инструмент командной строки для создания нового проекта и настройки всех его активов.
18. Popper.js
Сайт: “github.com/FezVrasta/popper.js”
Popper – это библиотека JavaScript для добавления всплывающих подсказок и всплывающих окон в элементы HTML. Он предлагает большое количество вариантов настройки и полностью модульный с отдельными плагинами для каждой функции. Поппер действительно маленький по размеру, не имеет абсолютно никаких зависимостей и очень прост в использовании. Он используется такими компаниями, как Twitter в Bootstrap 4, Microsoft в WebClipper и Atlassian в AtlasKit.
19. Apollo Client
Сайт: “github.com/apollographql/apollo-client”
Apollo Client-это полнофункциональный клиент GraphQL, который можно использовать с любой frontend платформой. Применяется для создания современных, интерактивных приложений React.
Мало весит – 25кб в сжатом виде.
20. Animate.css
Сайт: “github.com/daneden/animate.css”
Простоя в использовании CSS кроссбраузерная библиотека для создания анимации на сайте.
Библиотека содержит более 50 различных анимационных эффектов, таких как изменение прозрачности элемента, эффекты для привлечения внимания, эффекты поворота, появления и исчезновения, увеличения и уменьшения, и многие другие.
Данные эффекты можно применять как к тексту, так и к изображениям, формам и так далее.
На этом всё! Красивых Вам сайтов!