Recommended front-end development tools for scaffolders

01: thunderclient: postman in VSCode

A plugin for VSCode that manages request resources in VSCode, just like postman.

It supports postman compatible formats and can be exported as a postman Collection.

02: Apifox, a tool for team API management

Apifox , currently has a desktop version and a WEB version, is very friendly to the team management API.

Assuming that in a team, if the front-end and back-end share the API interface and can synchronize freely, then the data joint debugging will become extremely simple. One of the advantages of Apifox is that the sharing of API collections among teams is completely free.

In addition, it is extremely friendly to the documentation. The following is the documentation address of all the interface examples of nginx I learned through docker.

PS: Attach all nginx configurations and docker compose to facilitate second-level verification and operation. See the Github repository learn-nginx for details.

03: analyze-css: Analyze the CSS resources of a website

Enter a URL to view all CSS resources of the URL , such as volume, selector, typography, color, font, etc.

04: BundleScanner, find out the npm library and the corresponding version number used on a website

Enter a URL to analyze all npm dependencies and their version numbers of the website, as well as the technology stack of each JS resource.

Its principle is to establish an inverted index (the kind of elasticsearch) for all popular npm libraries, and then match the target URL resources according to the specific extracted key tokens.

Compared with Wappalyzer, it extracts more and more precise npm libraries. Now there's just one browser plug-in.

In this way, is it not clear at a glance the technology stack and technology selection of a certain project of a large factory? If I want to know the technology stack of the Byte Douyin web version, then I can directly enter the address of the Douyin NetEase version!

05: bestofjs: Discover the best frameworks and libraries for Javascript

Here are the most popular libraries in the JS ecosystem, refreshed and recommended in real time, and available for weekly subscriptions.

Great, finally being able to do the most powerful shelf work.

• repo: ritz078/transform

06: npm dependency visualization

Graphical animation showing all dependencies of an npm package, open source anvaka/npmgraph , technology stack angular.js , browserify and gulp

The following figure uses webpack as a demonstration, you can see how huge its dependencies are!

• repo: anvaka/npmgraph.an

07: Learn CSS

The CSS core skill construction officially produced by Google is easy to understand and easy to use.

Each chapter is accompanied by an editable DEMO to study, and questions are provided to test your learning.

08: Svg Viewer

Visualize SVG, and support to compress images, convert to React/RN components, convert to png format images, etc.

If you encounter svg images in development, you can directly convert them into React Component through this website.

Moreover, in svgviewer, there are a large number of svg icons for you to retrieve, which is not too convenient.