11 полезных онлайн-инструментов для frontend разработчиков

11 полезных онлайн-инструментов для frontend разработчиков

От автора: в Интернете множество замечательных инструментов, которые облегчают нашу жизнь как веб-разработчикам. В этой статье я кратко расскажу о 11 инструментах, которые я часто использую в своей работе.

1. CanIUse

Случалось ли с вами, что вы были не уверены, будет ли веб-API совместим с определенным браузером или будет ли он доступен в мобильных браузерах? Этот онлайн-инструмент позволяет легко протестировать веб-API на совместимость с браузером.

Инструмент предоставляет постоянно обновляемые таблицы поддержки браузеров для front-end веб-технологий на настольных и в мобильных устройствах…

Допустим, мы хотим узнать, какие браузеры и их версии будут поддерживать API веб-ресурса: navigator.share(…)

11 полезных онлайн-инструментов для frontend разработчиков

Браузеры и их версии, которые поддерживают navigator.share(…), перечислены в таблице.

2. Minify

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

Онлайн-инструмент minify.com позволяет нам минимизировать код веб-приложения.

3. Bit.dev

Bit.dev — замечательный хаб компонентов. Я использую его для размещения, документирования и управления повторно используемыми компонентами из разных проектов. Это отличный способ улучшить повторное использование кода, ускорить разработку и оптимизировать сотрудничество команды.

Это также хорошая альтернатива для создания системы проектирования с нуля (поскольку в ней есть все, что нужно системе проектирования). Bit.dev отлично работает с Bit, инструментом с открытым исходным кодом, который обрабатывает изоляцию и публикацию компонентов.

Bit.dev поддерживает React, React с TypeScript, Angular, Vue и многие другие.

11 полезных онлайн-инструментов для frontend разработчиков

Пример: поиск общих компонентов React в Bit.dev

Легко обменивайтесь повторно используемыми компонентами между проектами и приложениями, чтобы быстрее работать в команде…

4. Unminify

Этот инструмент работает с точностью до наоборот к minify. Этот инструмент позволяет вам сделать часть минимизированного кода JS снова доступной для чтения, распаковав, деобфусцировав и выполнив предварительную проверку.

5. Stackblitz

Это популярный среди многих разработчиков инструмент. Stackblitz предложил нам возможность использовать в веб всемирно популярную и наиболее используемую IDE Visual Studio Code.

Stackblitz предлагает возможность быстрого монтажа проектов Angular, React, Vue, Vanilla, RxJS, TypeScript одним кликом мыши.

Stackblitz особенно полезен, когда вы хотите опробовать фрагмент кода или функцию в любой из существующих платформ JS из браузера. Представьте, что вы читаете статью по Angular и наткнулись на код, который хотите попробовать. Вы можете свернуть браузер и создать новый проект Angular всего в несколько кликов.

Существуют и другие замечательные онлайн IDE, но я считаю, что переломным моментом для Stackblitz стало использование всеми любимого Visual Studio Code, инструмента, с которым все знакомы.

6. JWT.io

Полезен, если вы используете JSON Web Tokens (JWT) для защиты своего приложения или JWT, чтобы предоставить пользователям доступ к защищенным ресурсам в back-end.

Один из способов принять решение о том, должен ли предоставляться доступ к маршруту или ресурсу — это проверить время действительности токена. Когда мы хотим декодировать JWT, чтобы увидеть его полезную нагрузку, jwt.io предоставляет именно эту возможность.

Этот онлайн-инструмент позволяет нам подключать токены, чтобы увидеть их полезную нагрузку. Как только мы вставим токен, jwt.io декодирует его и отобразит его полезные данные.

7. BundlePhobia

Вы когда-нибудь были не уверены в размере файла node_modules или просто хотели узнать, какой размер pakckage.json будет установлен на вашем компьютере? BundlePhobia дает ответ.

Этот инструмент позволяет загрузить файл package.json и отображает размер зависимостей, которые будут установлены из package.json.

8. Babel REPL

Babel — это бесплатный JS-транскомпилятор с открытым исходным кодом, который используется для преобразования современного кода ES в старый ES5 JavaScript.

Этот инструмент представляет собой онлайн-настройку веб-приложения команды Babeljs, в которой мы можем перевести код ES6+ в ES5.

Он позволяет опробовать последние дополнения, внесенные в ES, или некоторые функции, которые находятся на определенных этапах добавления в ECMA. ИТ-специалисты могут предварительно оптимизировать код, ограничить размер файла и позволить нам перемещаться во времени на протяжении всей транспиляции.

9. Prettier Playground

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

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

10. Postman

Этот инструмент помогает быстро проверить конечные точки API: GET, POST, DELETE, OPTIONS, PUT. Я использую его постоянно.

11. JSLint

В мире линтеров JS JSLint является лидером. Эта онлайн-версия JSLint позволяет выполнить в браузере линты фрагмента кода JS или файла JS.

Вывод

Есть еще много полезных инструментов, но это мои любимые. Если у вас есть какие-либо вопросы, напишите об этом в комментариях. Спасибо за внимание!!!

Автор: Chidume Nnamdi

Источник: //blog.bitsrc.io

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: