In our daily development work, we need to use a lot of tools to assist our development, and we often refer to a lot of websites to collect information. The following is a summary of 18 common tools used in the development process. Very useful, you can bookmark so that you can find it quickly when you need it, click on the title will go directly to the tool page.

You are also welcome to share and post any tools you find useful in the comments section.

1.Web Developer browser plug-in

A browser plug-in for Web developers that can do more in-depth operations on the site, such as

  1. Ban Javascript
  2. Ban CSS
  3. Display all images on the page
  4. .

2,Emmet: A great tool for Web developers

Efficient front-end development tool, you can write and modify HTML/CSS in Vue/React, and support a variety of editors, such as the popular VSCode.

The main function is to convert CSS style abbreviations to HTML, such as #page>(#header> UL# nav> Li *4>a)+(# Content >h1{Hello world}+ P)+#footer, and press Tab, Automatically generate the following HTML

<div id="page">
  <div id="header">
    <ul id="nav">
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </div>
  <div id="content">
    <h1>Hello world</h1>
    <p></p>
  </div>
  <div id="footer"></div>
</div>
Copy the code

The above extended Abbreviation function is called Expand Abbreviation. In addition, it has more detailed functions, which are called Actions in Emmet

  1. Remove the outermost label
  2. The selected label of the package
  3. .

3,URL-encoder for SVG

Convert SVG to DataURI and embed it in CSS styles

4,Svg Viewer

Visualize SVG and support compressing images, converting them to React/RN components, converting them to PNG format, etc

5,Svg-term-cli: Records terminal operations as SVG animations

A software based on Asciinema, written in javascript. Record terminal actions as SVG animations

$ cat demo.cast | svg-term > demo.svg
Copy the code

6,Asciinema: terminal action recording software

An animation tool for recording terminal commands in Python, which can be played online. With the help of third-party tools can be converted to GIF animation or SVG animation.

Use the following two commands to quickly start the recording terminal.

$ brew install asciinema

$ asciinema rec
Copy the code

7,Prettier Playground: Formatting arbitrary language code

Prettier is an excellent code formatting tool

Eight,Chrome Platform Status: An overview of new features in the Chrome release

List each of Chrome’s new features, current stable releases, and release dates for the next release.

9,CSS FFects: A variety of ultra-useful CSS animations

Collection of a variety of CSS animation, most of the hover effect, loading animation, pure CSS implementation. Save for when you need to design your own website.

10,SVG Wave Generator

Generate a wave SVG randomly, adjust the sawtooth, the degree of bend, etc., and save as SVG/PNG/JPG

11,Explain Shell: Illustrates the interpretation of each argument on any command line

Called the perfect aid for learning and writing a shell, PIPE can also parse nested and complex commands by typing any Linux command and pointing out the meaning of each parameter.

12,Browser Logos: High-resolution Logo of the Browser

This is a Github repository where you can find the Logo in any browser’s HD resolution by referencing the address directly.

If referencing Github addresses is slow, you can try jsdelivr’s CDN

13,User Agents: Everything about UA

A large number of UA databases and related functions

  • Obtain UA on any platform (Mac/Windows/Android)
  • Get any Spider/Crawer UA (Baidu/Google/Bing)
  • UA can be generated randomly
  • Can parse UA

14,Risingstars: 2020 Javascript Star project

In 2021, the most popular frameworks and surrounding products in various JS ecospheres, such as React ecosphere, Vue ecosphere, GraphQL ecosphere, build tool ecosphere, etc

15,Lorem Picsum: Random image of a specified size API

https://picsum.photos/200/200 will randomly Unsplash took a picture of a specified size

  • repo: DMarby/picsum-photos

16,Bestofjs: Discover the best frameworks and libraries for Javascript

Here are the most popular libraries in the JS ecosystem, updated and recommended in real time, and available for weekly subscription

  • repo: ritz078/transform

17,TableConvert: Bidirectional conversion of tables and arbitrary formats

Supports conversion between Excel, URL, HTML, Markdown, CSV, JSON, LaTeX, SQL, MediaWiki and other arbitrary formats

18,Transform: Programming language any format conversion

Support all kinds of code conversion tools, SVG, JSON, TS, GraphQL, CSS, SQL, you name it here. Light JSON can be converted to a dozen code formats.

There are 18 tools that you can use in this article.