11 Công cụ trực tuyến hữu ích cho lập trình viên Frontend

11 tháng 01, 2021 - 749 lượt xem

Bài viết được dịch từ Medium

Internet có đầy đủ các công cụ tuyệt vời giúp cuộc sống của chúng ta trở nên dễ dàng hơn với tư cách là lập trình viên frontend. Trong bài đăng này, tôi sẽ đánh giá nhanh 11 công cụ mà tôi thường xuyên sử dụng trong công việc lập trình của mình.

1. CanIUse

Bạn đã bao giờ không chắc liệu một API Web sẽ tương thích trong một trình duyệt nhất định hay thậm chí có sẵn trong các trình duyệt di động? Công cụ trực tuyến này giúp bạn dễ dàng kiểm tra API Web về khả năng tương thích của trình duyệt.

caniuse.com

Giả sử chúng tôi muốn biết trình duyệt nào và phiên bản của chúng sẽ hỗ trợ API chia sẻ web: Navigator.share (...)

Image for post

Xem kết quả. Tất cả các trình duyệt và phiên bản hỗ trợ Navigator.share (...) đều được liệt kê.

2. Minify

Để giảm kích thước gói của code ứng dụng của chúng tôi, chúng tôi thúc đẩy sản xuất, chúng tôi giảm thiểu chúng. Điều này dẫn đến việc giảm đáng kể kích thước gói ứng dụng, dẫn đến thời gian tải trên trình duyệt nhanh hơn.

Công cụ trực tuyến minify.com này cho phép chúng tôi rút gọn mã từ một ứng dụng web.

3. Bit.dev

Bit.dev là một trung tâm thành phần. Tôi sử dụng nó để lưu trữ, lập tài liệu và quản lý các thành phần có thể sử dụng lại từ các dự án khác nhau của mình. Đó là một cách tuyệt vời để tăng khả năng sử dụng lại mã, tăng tốc độ phát triển và tối ưu hóa sự cộng tác của nhóm của bạn.

Nó cũng là một giải pháp thay thế tốt để xây dựng một hệ thống thiết kế từ đầu (vì nó về cơ bản có mọi thứ mà một hệ thống thiết kế cần). Bit.dev hoạt động hoàn hảo với Bit, một công cụ mã nguồn mở xử lý việc phân lập và xuất bản thành phần. 

Bit.dev hỗ trợ React, React với TypeScript, Angular, Vue và nhiều loại khác.

Image for post
Ví dụ: tìm kiếm các thành phần React được chia sẻ trong Bit.dev
 

4. Unminify

Công cụ này đảo ngược những gì minify làm.

unminify.com

Công cụ này cho phép bạn làm cho một đoạn mã JS được rút gọn có thể đọc lại được bằng cách giải nén, giải mã và kiểm tra chúng.

5. Stackblitz

Đây là công cụ phổ biến của mọi người. Stackblitz đã cung cấp cho chúng tôi khả năng sử dụng IDE phổ biến và được sử dụng nhiều nhất trên thế giới, Visual Studio Code trên web.

stackblitz.com

Stackblitz cung cấp một kho dự án Angular, React, Vue, Vanilla, RxJS, TypeScript nhanh chóng chỉ với một cú nhấp chuột.

Stackblitz đặc biệt hữu ích khi bạn muốn dùng thử một đoạn mã hoặc một tính năng trong bất kỳ khung JS hiện tại nào từ trình duyệt của bạn. Hãy tưởng tượng bạn đang đọc một bài báo về Angular và bạn bắt gặp một đoạn mã mà bạn muốn thử. Bạn có thể thu nhỏ trình duyệt của mình và xây dựng một dự án Angular mới chỉ với một vài LOC.

Nhanh và dễ.

Có những IDE trực tuyến khác, nhưng tôi tin rằng điểm mấu chốt của Stackblitz là sử dụng cảm giác Visual Studio Code yêu thích của mọi người, công cụ mà mọi người đều quen thuộc.

6. JWT.io

Nếu bạn đang sử dụng Mã thông báo web JSON (JWT) để bảo mật ứng dụng của mình hoặc sử dụng JWT để cho phép người dùng truy cập tài nguyên được bảo vệ trên chương trình phụ trợ của bạn.

Một cách để đưa ra quyết định có nên truy cập tuyến đường hoặc tài nguyên hay không là kiểm tra thời gian hết hạn của mã thông báo. Đôi khi chúng ta muốn giải mã JWT để xem trọng tải của nó, jwt.io chỉ cung cấp điều đó.

jwt.io

Công cụ trực tuyến này cho phép chúng tôi cắm các mã thông báo để xem tải trọng của chúng. Sau khi chúng tôi dán mã thông báo, jwt.io sẽ giải mã mã thông báo và hiển thị tải trọng của nó.

7. BundlePhobia

Bạn đã bao giờ không chắc chắn về kích thước của node_modules của mình hoặc chỉ muốn biết kích thước mà một pakckage.json sẽ được cài đặt trong máy của bạn? BundlePhobia cung cấp câu trả lời

bundlephobia.com

Công cụ này cho phép chúng tôi tải lên tệp package.json và nó hiển thị kích thước của các phần phụ thuộc sẽ được cài đặt từ package.json.

8. Babel REPL

Babel là một trình biên dịch JS mã nguồn mở và miễn phí được sử dụng để chuyển mã ES hiện đại sang JavaScript ES5 cũ. Công cụ này là một ứng dụng web trực tuyến do nhóm Babeljs thiết lập, nơi chúng tôi có thể chuyển mã ES6 + sang ES5.

babeljs.io/en/repl

Nó cho phép chúng tôi thử các bổ sung gần đây được thực hiện cho ES hoặc một số tính năng đang ở các giai đoạn nhất định để bổ sung vào ECMA. Nó có thể kiểm tra mã trước, giới hạn kích thước tệp và cho phép chúng tôi du hành thời gian trong suốt quá trình chuyển đổi. 

9. Prettier Playground

Prettier là một trình định dạng mã JS. Nó thực thi một phong cách nhất quán bằng cách phân tích cú pháp mã của bạn và in lại nó với các phương pháp mã hóa tốt nhất JS.

Công cụ này đã được sử dụng phổ biến trong cộng đồng lập trình viên của chúng tôi nhưng nó cũng có một sân chơi trực tuyến, nơi bạn có thể kiểm tra mã của mình.

prettier.io playground

10. Postman

Công cụ này giúp kiểm tra nhanh các điểm cuối API của bạn: GET, POST, DELETE, OPTIONS, PUT.

Tôi đã sử dụng công cụ này và nó xứng đáng đứng dưới vị trí thứ 11.

11. JSLint

Trong thế giới của JS linters, JSLint đứng đầu giải đấu. Phiên bản công cụ trực tuyến này của JSLint cho phép chúng tôi cài đặt một đoạn mã JS hoặc một tệp JS trong trình duyệt của mình.

jslint.com

Kết luận

Có rất nhiều thứ khác trong danh sách, nhưng đây là những mục yêu thích của tôi.

Cảm ơn !!!

Tham khảo khóa học Web Frontend tại đây

Liên hệ:

Ms Mẫn - 0963023185 (zalo)

manpham@techmaster.vn

Bình luận

avatar
John Tait 2023-08-12 07:12:56.541637 +0000 UTC

Hye,

This article is a true testament to the author's deep passion for frontend development and their genuine desire to empower fellow developers. The comprehensive collection of tools and insights provided here reflects their appreciation to enhance the frontend development experience.

For those eager to delve further into the world of development, I highly recommend exploring this valuable resource Unminify. I genuinely hope it proves to be a beneficial asset on your journey.

Avatar
* Vui lòng trước khi bình luận.
Ảnh đại diện
  0 Thích
0