Полезные онлайн-инструменты для разработчиков, которые я люблю использовать.
Интернет полон потрясающих инструментов, которые облегчают нашу жизнь как фронтенд-разработчиков. В этом посте я дам краткий обзор 12 инструментов, которые я часто использую в своей разработке.
1. Можно ли использовать
Вы когда-нибудь были не уверены, будет ли веб-API совместим с определенным браузером или даже доступен ли он в мобильных браузерах? Этот онлайн-инструмент упрощает тестирование веб-API на совместимость с браузером.
Могу ли я использовать ... Таблицы поддержки для HTML5, CSS3 и т. Д.
« Могу ли я использовать предоставляет обновленные таблицы поддержки браузеров для поддержки интерфейсного веб-интерфейса. технологии на компьютерах и мобильных устройствах… caniuse.com »
Допустим, мы хотим знать, какие браузеры и их версии будут поддерживать Web Share API: navigator.share(...)
Смотрите результаты. Все браузеры и версии, поддерживающие navigator.share(...), перечислены.
2. Уменьшить
Чтобы уменьшить размер пакета кода нашего приложения, который мы запускаем в производство, мы минимизируем их. Минификация удаляет пробелы, мертвый код и т. Д. Это приводит к резкому уменьшению размера пакета приложений, что приведет к более быстрой загрузке в браузерах.
Этот онлайн-инструмент minify.com позволяет нам минимизировать код из веб-приложения.
3. Bit.dev
Bit.dev - отличный компонентный хаб. Я использую его для размещения, документирования и управления повторно используемыми компонентами из моих разных проектов. Это отличный способ увеличить повторное использование кода, ускорить разработку и оптимизировать совместную работу вашей команды.
Это также хорошая альтернатива для создания дизайн-системы с нуля (поскольку в ней есть все, что нужно дизайн-системе). Bit.dev отлично работает с Bit, инструментом с открытым исходным кодом, который обеспечивает изоляцию и публикацию компонентов.
Bit.dev поддерживает React, React with TypeScript, Angular, Vue и многие другие.
4. Уничтожить
Этот инструмент меняет то, что делает minify.
Этот инструмент позволяет вам снова сделать часть минифицированного JS-кода доступной для чтения путем их распаковки, деобфускации и предварительной настройки.
5. Stackblitz
Это популярный инструмент. Stackblitz предложил нам возможность использовать всемирно популярную и наиболее используемую IDE в мире Visual Studio Code в Интернете.
Stackblitz предлагает быстрый набор проектов Angular, React, Vue, Vanilla, RxJS, TypeScript одним щелчком мыши.
Stackblitz особенно полезен, когда вы хотите опробовать фрагмент кода или функцию в любой из текущих JS-фреймворков из своего браузера. Представьте, что вы читаете статью об Angular и сталкиваетесь с кодом, который хотите опробовать. Вы можете свернуть свой браузер и создать новый проект Angular всего за несколько LOC.
Быстро и просто.
Есть и другие замечательные онлайн-IDE, но я считаю, что поворотным моментом для Stackblitz стало использование всеми любимого Visual Studio Code - инструмента, с которым все знакомы.
6. JWT.io
Если вы используете JSON Web Tokens (JWT) для защиты своего приложения или используете JWT, чтобы позволить пользователям получать доступ к защищенным ресурсам на вашем сервере.
Один из способов принять решение о том, следует ли осуществлять доступ к маршруту или ресурсу, - это проверить время истечения срока действия токена. Бывают случаи, когда мы хотим декодировать JWT, чтобы увидеть его полезную нагрузку, jwt.io предоставляет именно это.
Этот онлайн-инструмент позволяет нам подключать токены, чтобы увидеть их полезную нагрузку. Как только мы вставляем токен, jwt.io декодирует токен и отображает его полезные данные.
7. BundlePhobia
Вы когда-нибудь не были уверены в размере своего node_modules или просто хотели знать, какой размер pakckage.json будет установлен на вашем компьютере? BundlePhobia дает ответ
Этот инструмент позволяет нам загрузить файл package.json и отображает размер зависимостей, которые будут установлены из package.json.
8. Babel REPL
Babel - это бесплатный транскомпилятор JS с открытым исходным кодом, который используется для преобразования современного кода ES в простой старый JavaScript JavaScript.
Этот инструмент представляет собой онлайн-приложение, созданное командой Babeljs, с помощью которого мы можем перенести код ES6 + в ES5.
Это позволяет нам опробовать недавние дополнения, внесенные в ES, или некоторые функции, которые находятся на определенных этапах добавления в ECMA. ИТ-специалисты могут усовершенствовать код, ограничить размер файла и позволить нам путешествовать во времени на протяжении всей транспиляции.
9. Красивейшая детская площадка.
Prettier - упрямый форматтер JS-кода. Он обеспечивает единый стиль, анализируя ваш код и повторно распечатывая его с использованием передовых методов кодирования JS.
Этот инструмент широко используется в нашей среде разработки, но у него также есть онлайн-площадка, где вы можете изменить свой код.
10. Почтальон
Этот инструмент помогает быстро проверить конечные точки вашего API: GET, POST, DELETE, OPTIONS, PUT.
Я воспользовался этим инструментом, и он достоин 11-й позиции.
11. JSLint
В мире JS-линтеров JSLint возглавляет лигу. Эта онлайн-версия JSLint позволяет нам размещать фрагмент кода JS или файл JS в нашем браузере.
Перейдите на https://jslint.com, чтобы попробовать.
Заключение
В списке есть еще много других, но это мои любимые.
Если у вас есть какие-либо вопросы относительно этого или чего-либо, что я должен добавить, исправить или удалить, не стесняйтесь комментировать, писать по электронной почте или писать мне в прямом сообщении.
Спасибо !!!
Получить мою электронную книгу
Я написал электронную книгу, которая объясняет многие концепции JavaScript в более простых терминах со ссылкой на EcmaSpec в качестве руководства:
