Collect web sites frequently used by front-end developers and update them periodically. Some sites may require scientific Internet access.

ES6 Console

es6console.com/

A tool to convert ES6 code into ES5 in real time. This is a great tool for those who want to learn how to implement some of the syntactic features of ES6 in ES5.

AST Explorer

astexplorer.net/

A tool that can transform the code of various languages into AST and make it easy to view, including the familiar CSS, HTML, JS. It supports a variety of compilers, most of which are familiar with Babel and typescript. If you want to learn more about how compilation works, or if you want to develop a Babel plug-in, this site will be very helpful.

TS playgroud

www.typescriptlang.org/play

The official Typescript website for learning ts. We can modify ts configuration, write TS code, check TS syntax problems, and see the result of js transfer. Those of you who want to practice type TS gymnastics will find this site very useful.

Carbon

carbon.now.sh/

If you’re a blogger, you probably like the Mac-style presentation of code blocks. Carbon is a website that allows us to paste code and generate Mac-style block images, as well as switch between languages and color schemes.

Shields.io

shields.io/

Many well-done open source projects have tabs on Their Github REANDME that show their build status, single-test coverage, downloads, etc. How do these labels work? We can use shields. IO to generate image links and insert README. As long as the image URL is constructed according to shields. IO specification, the NPM downloads and other data are automatically retrieved.

Character painting

The concept of character painting or ASCII art may be foreign to us, but we’ve certainly seen it somewhere. For example, in zhihu’s console panel, we can see itHIREPrint it in 3D art form. This tends to catch the eye, so you’ll see it in code comments, cli tool introductions, website console, etc.



Character painting generally has two forms, one is picture to text, the other is text to art word.

Photo to text recommendation website:www.degraeve.com/img2txt.php

Text to art word recommendation website:Textkool.com/en/ascii-ar…

Of course, the above two tools don’t look perfect, so you can search for better ones.

Unsplash

unsplash.com/

This site has many beautiful free images that can be used as a blog header.

conclusion

The article sorted out my front-end development that some of the more practical tools website, I hope to be useful to you. As for caniuse, MDN and other sites that the front end must know, I will not list them here.