Development tool set

This article mainly shares personal development commonly used development tools, interested students can understand.

One, note class

Notion

Website address: www.notion.so/

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1eb7d2f100~tplv-t2oaga2asx-image.image

Youdao Cloud Notes

Website address: Note.youdao

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130fcdae056474~tplv-t2oaga2asx-image.image

Vuepress

Website address: github.com/vuejs/vuepr…

Vue driven static website generator

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1eb7e7da87~tplv-t2oaga2asx-image.image

GitBook

Website address: www.gitbook.com/

GitBook is a tool for building books using Git and Markdown. It can output your book in many formats: PDF, ePub, MOBi, or static web pages.

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1eb733650e~tplv-t2oaga2asx-image.image

Two, chart class

Gantt chart dhtmlxGantt

Website address: github.com/DHTMLX/gant…

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1eec5929d1~tplv-t2oaga2asx-image.image

echarts

Website address: www.echartsjs.com/zh/index.ht…

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1ef0ccc56c~tplv-t2oaga2asx-image.image

F2 Mobile charting library

Website address: f2.antv.vision/zh

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1ef15f85ef~tplv-t2oaga2asx-image.image

Third, development tools class

VS Code

Website address: code.visualStudio.com/

Simply don’t too fragrant, I write js/ Java/Python and so on all use this code editor.

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1f1dd84d8a~tplv-t2oaga2asx-image.image

Polacode

A vsCode plug-in, the main code beautification (code into pictures), if there are often write blogs or articles of students must love it. Ploacod-2019 is recommended

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1f2549264b~tplv-t2oaga2asx-image.image

The actual effect in the article:

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1ef4b8140b~tplv-t2oaga2asx-image.image

eruda

Website address: github.com/liriliri/er…

Eruda is a debug panel designed for the mobile web front end. It is a mini-version of DevTools. Its main features include capturing console logs, checking element status, capturing XHR requests, displaying local storage and Cookie information, and more.

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1f2e6aad60~tplv-t2oaga2asx-image.image

majestic

Website address: github.com/Raathigesh/…

The unit test results and code coverage are displayed in the browser

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1f5f46f711~tplv-t2oaga2asx-image.image

image-cropper

Elemefe. github. IO /image-cropp…

Image Cropper displays a clipping box for an Image. The clipping box allows the user to adjust the size and position of the Image. It is often used to customize the Image clipping function. The current implementation of Image Cropper is independent and the browser supports IE8+. Image Cropper can be used with Angular or on its own.

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1f7e90e545~tplv-t2oaga2asx-image.image

terminalizer

Website address: github.com/faressoft/t…

Record the terminal input and output the GIFT GIFs, which are often used to show the project installation process or usage scenarios when writing a blog.

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f204349aa87~tplv-t2oaga2asx-image.image

Sentry

Website address: sentry. IO /welcome/

Javascript address: github.com/getsentry/s…

A JS /Android/IOS open source error monitoring platform, really easy to use.

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1fdc4ae43e~tplv-t2oaga2asx-image.image
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1fddac53c4~tplv-t2oaga2asx-image.image

google-access-helper

Website address: github.com/haotian-wan…

Scientific tools, the most easy-to-use Google Access Assistant, tailor-made for Chrome extension users. You can also access Google search, Gmail, Google + and other Google services.

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f20147d29ea~tplv-t2oaga2asx-image.image

Mobile phone projection screen Vysor

Website address: www.vysor.io/

A use of mobile phone screen to the computer artifact, recommended to install Google’s Vysor plug-in.

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f2030861c10~tplv-t2oaga2asx-image.image
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f2053da57f2~tplv-t2oaga2asx-image.image

Postman

Website address: www.postman.com/

I believe that most of the students have used this tool, debugging back-end interface artifact. You are advised to install the Google plug-in version

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f2062d94896~tplv-t2oaga2asx-image.image

Lighthouse

Website address: developers.google.com/web/tools/l…

Google has produced must-have, a front end performance optimization tool. One-click detection of site performance. It can be installed as Npm or using the Google plugin

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f209b7f42ce~tplv-t2oaga2asx-image.image
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f20a723e462~tplv-t2oaga2asx-image.image

yeoman

Yeoman.io /

Project scaffolding tools

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f20bd65dfe5~tplv-t2oaga2asx-image.image

Bmob

Official website address: doc.bmob.cn/

If you don’t want to write a backend service in Java/Node, or just want to have a backend service for storage, bMob can help you eliminate most of the server-side coding effort, reducing development costs and time exponentially.

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f20c0853da9~tplv-t2oaga2asx-image.image

4. Packet capture class

Whistle

Website address :github.com/avwo/whistl…

If you use whistle, you’ll love it. Mock it, cross it.

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f2103eca98c~tplv-t2oaga2asx-image.image
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f210a26fc05~tplv-t2oaga2asx-image.image

Fiddler

Website address: www.telerik.com/fiddler

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f2115567040~tplv-t2oaga2asx-image.image

Charles

Website address: www.charlesproxy.com/

Charles is a very good bag grabber. Through this software can help users to easily capture packets, it can easily record all traffic between the browser and the Internet, is very professional and based on Java development network HTTP packet capture tool software

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f2165dedcf7~tplv-t2oaga2asx-image.image

Five, the UX

iconfont

Website address: www.iconfont.cn/

Alibaba’s Icon platform is simply not too easy to use

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f217eeb5f9c~tplv-t2oaga2asx-image.image

draw.io

Website: app.diagrams.net/

I draw almost all of my flowchart, architecture diagrams, and support for browser, MAC, Windows, and browser applications.

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f218112a2d1~tplv-t2oaga2asx-image.image

MxGraph

Website address: github.com/jgraph/mxgr…

Draw. IO is based on MxGraph. Mxgraph’s main method of drawing is SVG.

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f21856841c4~tplv-t2oaga2asx-image.image

Sketch

Website address: www.sketch.com/get/

It seems that the Sketch has become the standard UX component for most companies.

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f21c8130967~tplv-t2oaga2asx-image.image

Markdown-nice article beautification

Website: mdnice.com/

All of the author’s articles are using this beautification tool to beautify oh, support nuggets, Zhihu, wechat public number directly copy. (Wechat public accounts are notoriously unfriendly to snippet spending)

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f21d018b1d8~tplv-t2oaga2asx-image.image

Figure monster

Official address: 818ps.com/

Picture monster inside the vicious free pictures can be used for us, many wechat public account cover big picture is using picture monster cut oh.

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f21d56f5c45~tplv-t2oaga2asx-image.image

Gift production

When writing articles, gift GIFs need to be recorded in many cases. In addition to the commonly used QQ recording screen gift, I recommend one. This section is from juejin.cn/post/684490…

Mac:

1. Use the screen snapshot of the computer itself for screen recording, and the recorded file is a VIDEO in MOV format

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f21dc561565~tplv-t2oaga2asx-image.image

2. Download and install PicGif Lite in AppStore, and then convert the previously recorded MOV video into GIF inside

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f21f3e82981~tplv-t2oaga2asx-image.image

* * * * Windows end

Use the Swift Gift GIFs

Website address: www2.tianduntech.com/xjgif/index…

The public,GiftDynamic figure

Website address: www.gaoding.com/templates?q…

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f2205beac59~tplv-t2oaga2asx-image.image

6. Open source libraries

vant

Website address: github.com/youzan/vant

Youzan.github. IO/vant-appl /…

There is a mobile terminal Vue component library like open source, there is also a corresponding micro channel small program component library.

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f22a37748cb~tplv-t2oaga2asx-image.image

Common front-end component libraries

Iview website address: www.iviewui.com/docs/guide/…

Ant design website address: Ant. Design /index-cn

Element-ui website: element.eleme.cn/#/

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f230d78b1d9~tplv-t2oaga2asx-image.image

animate.css

Website address: github.com/daneden/ani…

Claims to be the most complete CSS animation library

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f2320bdffba~tplv-t2oaga2asx-image.image

vue-grid-layout

Website address: github.com/jbaysolutio…

Vue-grid-layout is a grid layout system similar to gridster for vue.js.

  • Can drag and drop
  • Adjustable size
  • Static parts (no drag, no resize)
  • Boundary checks are performed when dragging and resizing
  • Avoid rebuilding grids when adding or subtracting components
  • Serializable and reducible layouts
  • Automated RTL support
  • responsive
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f2360b32a60~tplv-t2oaga2asx-image.image

Vue.Draggable

Website address: github.com/SortableJS/…

List drag best selection

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f2367612b3f~tplv-t2oaga2asx-image.image

monaco-editor

Website address: github.com/microsoft/m…

Microsoft Online Code editor

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f236e0bd54c~tplv-t2oaga2asx-image.image

electron

Website address: www.electron.build/

Vue package address: github.com/nklayman/vu…

The best way to package front-end code into Mac/ Windows /Linux programs

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f23704dd408~tplv-t2oaga2asx-image.image

Lodash

Website: lodash.com/

Compared to this well-known, a set of tools library, inside the wrapper string, array, object and other common data types processing functions.

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f2387a21291~tplv-t2oaga2asx-image.image

Moment.js

Website address: Momentjs.com/

A time processing tool, including time formatting, multi – language, conversion, etc

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f23ee1ee220~tplv-t2oaga2asx-image.image

jscodeshift

Website address: github.com/facebook/js…

Jscodeshift is a toolkit for running Codemods on multiple JavaScript or TypeScript files. It offers:

  • Runs the program, performing the provided transformation for each file passed to it. It also outputs a summary of how many files have been converted (and not converted).

  • recast

    Wrapper, which provides different apis. Recasting is an AST-to-AST conversion tool that also tries to preserve as much of the original code as possible.

Swiper

Official website: swiperjs.com/

Mobile touch scrolling, such as a carousel, scrolling up and down

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f24292147d3~tplv-t2oaga2asx-image.image

fullPage

Website address: alvarotrigo.com/fullPage/zh…

A full screen scroll tool library, go to the official website to try, thieves good-looking, smooth.

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f23fbe78ea0~tplv-t2oaga2asx-image.image

html2canvas

Website address: github.com/niklasvh/ht…

A super useful open source library for converting HTML DOM nodes into images.

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f243ff43f40~tplv-t2oaga2asx-image.image

This article was typeset using MDNICE

jstoflowchart

Website address: github.com/Bogdan-Lyas…

Convert the Js code to an image.

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/2/1713a38cef76e5fc~tplv-t2oaga2asx-image.image

Welcome to follow my public account, and push front-end knowledge regularly every day