От автора: в Интернете множество замечательных инструментов, которые облегчают нашу жизнь как веб-разработчикам. В этой статье я кратко расскажу о 11 инструментах, которые я часто использую в своей работе.
1. CanIUse
Случалось ли с вами, что вы были не уверены, будет ли веб-API совместим с определенным браузером или будет ли он доступен в мобильных браузерах? Этот онлайн-инструмент позволяет легко протестировать веб-API на совместимость с браузером.
Инструмент предоставляет постоянно обновляемые таблицы поддержки браузеров для front-end веб-технологий на настольных и в мобильных устройствах…
Допустим, мы хотим узнать, какие браузеры и их версии будут поддерживать API веб-ресурса: navigator.share(…)
Браузеры и их версии, которые поддерживают navigator.share(…), перечислены в таблице.
2. Minify
Чтобы уменьшить размер пакета кода приложения, мы минимизируем их. При минимизации удаляются пробелы, мертвый код и т. д. Это дает значительное уменьшение размера пакета приложений, что приводит к ускорению загрузки браузеров.
Онлайн-инструмент minify.com позволяет нам минимизировать код веб-приложения.
3. Bit.dev
Bit.dev — замечательный хаб компонентов. Я использую его для размещения, документирования и управления повторно используемыми компонентами из разных проектов. Это отличный способ улучшить повторное использование кода, ускорить разработку и оптимизировать сотрудничество команды.
Это также хорошая альтернатива для создания системы проектирования с нуля (поскольку в ней есть все, что нужно системе проектирования). Bit.dev отлично работает с Bit, инструментом с открытым исходным кодом, который обрабатывает изоляцию и публикацию компонентов.
Bit.dev поддерживает React, React с TypeScript, Angular, Vue и многие другие.
Пример: поиск общих компонентов 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
Источник: https://blog.bitsrc.io
Редакция: Команда webformyself.