Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money

preface

The front end so much jiao, make the world code farmers do bow.

Front-end knowledge is full of beautiful things in eyes, good and bad, so that we spend a lot of time in the screening process. In order to avoid repeating the wheel and improve the efficiency of development, it is necessary to classify the websites used for common front-end development.

It is recommended to add a favorite (Ctrl + D or Command + D) in case of need.

JavaScript utility library

lodash

www.lodashjs.com

underscore

underscorejs.net

outils

Github.com/proYang/out… Business code tool library, can be introduced on demand, click can directly view the implementation of the function. Easy to learn and use, I think it is worth recommending.

ramda

github.com/ramda/ramda (a tool library abroad, just understand, not commonly used.)

Common animation library, chart summary (common)

animejs

Animejs.com/ (recommended, compressed only 7KB, easy to use, can achieve more complex effects)

animista

animista.net/play/basic (recommended to try, custom animation artifact, with it can be arbitrarily generated CSS animation code, and then copy into the project, effectively reduce redundant unused CSS code)

animate.css

Github.com/animate-css… (The file is too big, 72KB after compression, this is a bit disappointing 😔)

three.js

Github.com/mrdoob/thre… (3d animation, based on WebGL)

d3js

www.d3js.org.cn/ (Data visualization library, good compatibility)

echarts

Echarts.apache.org/zh/index.ht… (Recommended, everyone knows, has been taken over by Apache)

Chart.js

www.chartjs.org/

highcharts

www.highcharts.com.cn/

NPM library collection

Check the NPM download status

Npm-stat.com/ (Enter NPM package name, multiple package names separated by commas, click Show Charts to query, showing day, week, month, year data) as shown below

'Through analysis and comparison, we can initially assess its ecology and activity. In the selection of technology can also provide us with reference help
Copy the code

NPM package downloads comparison

www.npmtrends.com/

Commonly used NPM packages

Vuex-persistedstate, vuex-persist, and JS-cookie

, Budo, Anywhere, HTTP-server, Lodash, echarts, dayjs, ScreenFull, QrCodeJs2, ClipBoard, VUe-Clipboard2, nProgress, Downloadjs, Crypto-js, MD5, UUID, MockJS, PDfKit , Node-html-pdf, Winston (logging service), Mockjs, Vue-quill-Editor, Node-cron (scheduled task), Lru-cache (page caching), Chokidar (file monitoring), dotenV-defaults (support defaults) Value of dotenv system, Similar to DeValue), classNames, QueryString, vue-lazyload, terser-webpack-plugin, webpack-bundle-Analyzer, compression-webpack-plugin , Sequelize (NodeJS ORM tool)

Front-end monitoring, buried point

growingio

www.growingio.com/ (gio for short, buried point statistics, good data visualization, the use of more companies.)

Fundebug www.fundebug.com/(paid product, can support JS, NodeJS, applets, Java, etc. If you are able to do your own research, you can refer to this)

sentry

Sentry. IO (automatic reporting of errors and exceptions)

sonar

Front-end quality code scan artifact (recommended, many companies have use, compatible with different languages. Scan for potential bugs in code)

kibana

Function similar to Sentry, error reporting on the server.

pinpoint

(Tools for statistics and monitoring of interface conditions)

Alibaba uses the real-time monitoring service ARMS

(Data statistics, buried point visualization)

Tencent Log Service

Cloud.tencent.com/document/pr… (Data statistics, buried point visualization)

Their Allies

www.umeng.com/ (Data statistics, visualization of buried points)

UI and CSS tool libraries

svga

Svga. IO /index.html(High-tech animation playback)

gka

Github.com/tagerwang/g… (Recommended to try, one-click fast image optimization, generate animation files)

tinypng

Tinypng.com/ (essential for front-end online compression)

Vue UI library

ElementUI, IView, vantUI, ANTDV… I don’t want to introduce them here.

The react UI library

Material-UI(personally feel that the user experience is really good, such as water ripple, etc.), antDesign, semantic- UI(seems to be used abroad, I wonder if it is easy to use, have you used it?)

angular

NgAnt, Angular Material

Other tools

Simultaneously debugging software on multiple mobile devices: responder.app /

The last

If you find it helpful, you can like it and support it. If you have useful tools, libraries, I hope you can leave a message at 👇🏻, thank you very much.

Related articles Portal

  • JavaScript Tools (new)

  • Front-end common plug-ins, tool class library summary, do not repeat the wheel!!

  • Collection of dACHang front-end component library tools (PC, mobile, JS, CSS, etc.)

Personal recent award-winning articles

Article link: Two sentences of CSS to fix the page scrolling lag problem? 😅😅 (by Tager) Official Announcement: juejin.cn/post/702325…