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.
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)
payload, jwt.io provides exactly this.
payload. Once we paste the token,
jwt.io decodes the token and shows it to be a valid
payload.
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
- In terms of writing advanced grammar online during interviews.
- 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.

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

Zend Studio 13.0.1
Powerful PHP integrated development environment

Notepad++7.3.1
Easy-to-use and free code editor

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.