Recommended 11 must-have websites for front-end developers in 2022

There are many great tools on the Internet that make our lives as front-end developers easier. In this post, I’ll take a quick look at 11 tools that I use regularly in my development work.

Node.green

is used to query whether the current Node version has certain functions. For example, the object spreader (Rest/Spread Properties)

can be seen that it is not supported under Node v8.3.0. Run the following code snippets under Node v8.5.0 and v8.2.1 respectively

const a = { foo: 1};
console.log({...a, b: 2});

When you encounter the above error, That's mostly a Node version issue.

Online address: https://node.green/

CanIUse

When you want to determine the compatibility of a Web API, this online tool will easily Done.

Suppose we want to know which browsers and their versions will support the Web Share API: navigator.share(...

View the results. Browsers and versions that support navigator.share(…) are listed.

Online address: https://caniuse.com/

Minify

In order to reduce the package size of application code, we need to minimize it when publishing it to the production environment. Minimization eliminates whitespace, invalid code, etc. This can make the application package size significantly smaller. , thus saving the loading time on the browser. (Although currently, there are plug-ins such as webpack uglifyJS, but when I am developing a simple non-packaged application, this is a good choice.)

Online address: https://www.minifier.org/

Bit.dev

Bit.dev is a very Awesome Component Center. You can use it to host, document and manage reusable components from different projects. It's a great way to increase code reuse, speed up development and optimize team collaboration.

It's also a great way to start from scratch A good choice for building design systems (since it essentially has everything you need for a design system). Bit.dev works perfectly with Bit, Bit is an open source tool that handles component isolation and publishing .

Bit.dev supports React, React with TypeScript, Angular , Vue, etc.

Online address: https://bit.dev/

Unminify

Free Online tool for minimizing (decompressing, deobfuscating) JavaScript, CSS and HTML codes to make them more readable and beautiful

Online address: https:/ /unminify.com/

Stackblitz

It’s everyone’s favorite tool. Stackblitz allows us to use the most popular and used IDE in the world, Visual Studio Code on the web.

With just one click, Stackblitz quickly delivers Angular, React, Vue, Framework for Vanilla, RxJS, TypeScript projects.

Stackblitz is very useful when you want to try out a piece of code or any feature in the current JS framework from the browser. Suppose you are reading the Angular article and come across code that you want to try. You can minimize your browser and quickly build a new Angular project.

There are other great online IDEs, but I believe the turning point for

Stackblitz is using the Visual Studio Code feel and tools that everyone loves. (ps: my own experience, very fast and smooth, attached picture, much faster than sandbox)

Online address: https://stackblitz.com/

JWT.io

If you use JSON Web Tokens (JWT) to secure your application, or use JWT to allow users to access protected resources on the backend.

One way to decide whether a route or resource should be accessed is to check the token's expiration time. Sometimes we want to decode a JWT to see its valid

payload, jwt.io provides exactly this.

This online tool allows us to insert the token to see its valid

payload. Once we paste the token, jwt.io decodes the token and shows it to be a valid payload.

Online address: https://jwt.io/

BundlePhobia

Have you ever been unsure of the size of node_modules, or just wondered how big pakckage.json will be when installed on your computer? BundlePhobia provides the answer

This tool allows us to load the package.json file and display the size of the dependencies that will be installed from the package.json. It can also query the size of a single package. volume.

Online address: https://bundlephobia.com/

Babel REPL

Babel is a free open source JS transpiler, For converting modern ES code into plain ES5 JavaScript.

This tool is a web application built online by the Babeljs team, which can convert ES6 code to ES5.

I have summarized two more convenient ways to use it

1. In terms of writing advanced grammar online during interviews.
2. You can quickly check how some polyfills are written.

Online address: https://babeljs.io/en/repl

Prettier Playground

Prettier is a self-righteous person JS code formatter. It enforces consistent styling by parsing the code and reprinting it using JS best coding practices.

This tool is used extensively in our development environment, but it also has an online address where you can beautify your code.

Online address: https://prettier.io/playground

postwoman

postwoman is a A powerful Chrome plug-in for debugging and simulating HTTP requests for web pages. It supports almost all types of HTTP requests and is simple and convenient to operate. Can be used for interface testing, such as testing the interface you generated with easy-mock.

Online address: https://postwoman.io/

This article is translated from https://blog.bitsrc.io/12-useful-online -tools-for-frontend-developers-bf98f3bf7c63 But it is not just a simple translation, but also replaced some parts of the original text that I think are not practical and added some of my own summaries.