IO /12-useful… But instead of simply translating, I replaced some of the original texts that I thought were not very practical and added some of my own summaries.
There are a lot of great tools on the Internet that make life easier for us as front-end developers. In this article, I’ll take a quick look at 11 tools I use frequently in my development work.
Node.green
Used to check whether the current Node version has certain functions. For example, object expanders (Rest/Spread Properties)
You can see that this 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});
Copy the code
When you encounter any of these errors, it’s mostly a Node version problem.
Online address: Node.green /
CanIUse
When you want to determine the compatibility of a Web API, this online tool is a breeze.
Suppose we want to know which browsers and their versions will support the Web Share API: Navigator.share (…
View the results. Browser and support navigator.share(…) Are listed in the version of
Online: caniuse.com/
Minify
To reduce the package size of our application code, we need to minimize it when we release it to production. Minimization eliminates whitespace, invalid code, etc. This can result in a significant reduction in the size of the application package, saving load time on the browser. (While there are plugins like WebPack uglifyJS these days, this is a good choice when I’m developing simple applications that aren’t packaged.)
Online address: www.minifier.org/
Bit.dev
Bit.dev is a great component hub. You can use it to host, record, and manage reusable components from different projects. This is a great way to increase code reuse, speed up development, and optimize team collaboration.
This is also a good choice for building a design system from scratch (because it essentially has everything you need to design a system). Bit.dev works perfectly with Bit, an open source tool that handles component isolation and publishing.
Bit.dev supports React, React with TypeScript, Angular, Vue, etc.
Online address: bit.dev/
Unminify
Free online tool for minimizing (unzip, de-obfuscate) JavaScript, CSS and HTML code to make it readable and beautiful
Online: unminify.com/
Stackblitz
This is everyone’s favorite tool. Stackblitz enables us to use the most popular and used IDE in the world, Visual Studio code on the Web.
Stackblitz quickly provides frameworks for Angular, React, Vue, Vanilla, RxJS, and TypeScript projects with one click.
Stackblitz is very useful when you want to try out a piece of code or any of the features in the current JS framework from the browser. Suppose you’re reading an Angular article and come across code 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 to use the Visual Studio Code feel and tools that everyone loves. (PS: very fast and smooth, with the picture above, much faster than the Sandbox)
Online: 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 back end.
One way to determine whether a route or resource should be accessed is to check the expiration time of the token. Sometimes we want to decode JWT to see its payload, and jwt. IO provides just that.
This online tool allows us to insert a token to see its payload. Once we paste the token, jwt. IO decodes the token and displays its payload.
Online address: jwt. IO /
BundlePhobia
Have you ever been unsure about the size of node_modules, or just wanted to know the size of pakckage.json to install on your computer? BundlePhobia provides the answer
This tool enables us to load package.json files and display the size of dependencies to be installed from package.json, as well as query the volume of individual packages.
Online: bundlephobia.com/
Babel REPL
Babel is a free open source JS-to-compiler for converting modern ES code into plain ES5 JavaScript.
The tool is a Web application built on the Web by the Babeljs team that converts ES6 + code to ES5.
I summed up the two more convenient way to use
- Write advanced grammar online during aspect interviews.
- You can quickly see how some polyfills are written.
Online address: babeljs. IO /en/repl
Prettier Playground
Prettier is a self-righteous JS code formatter. It enforces a consistent style by parsing the code and reprinting it using JS best coding practices.
This tool has been used extensively in our development environment, but it also has an online address where you can beautify your code.
IO/Playground Prettier. IO /playground prettier. IO /playground
postwoman
Postwoman is a powerful Chrome extension that supports almost all types of HTTP requests. This can be used to test interfaces, such as the ones you generate with easy-mock.
Online: postwoman.io/
conclusion
There are more on the list, but these are my favorites.
If you have any questions about this or anything I should add, correct or remove, please feel free to comment.
Thanks!!
Focus on
