Skip to content

Latest commit

 

History

History
812 lines (706 loc) · 64.5 KB

README-en.md

File metadata and controls

812 lines (706 loc) · 64.5 KB
Raw

fe-tools

Common documentation/websites for front-end development, style/JS method libraries (TS), and typical project templates.

1. Common Websites

Contents:

Note: Some options can be considered by asking chatGPT first, and then judging based on the organization (chatGPT's selection ability is currently average, but searching is still possible).

1.1 HTML/CSS/JavaScript/WASM/Dart

Address Tag Description
https://developer.mozilla.org/en-US/docs/Web html/css/js A very comprehensive and useful front-end query/learning website produced by Mozilla.
https://www.w3.org/ html/css/js The official W3C standard.
https://www.w3schools.com/ w3cshool W3C School, an international popular web development learning website.
https://www.w3.org/Style/CSS/ w3c-css W3C CSS documentation.
https://www.runoob.com/cssref/css-reference.html css Quickly query CSS properties and basic usage.
https://www.canvasapi.cn/ canvas Collection of canvas API methods.
https://www.w3.org/Graphics/SVG/ svg W3C website, SVG documentation.
http://www.t086.com/code/vml/ VML(IE) *Early DSL for graphics drawing developed by Microsoft that runs on low-end IE, similar to "SVG" (if you need to be compatible with IE6/7).
https://www.typescriptlang.org/docs/handbook/intro.html typescript TypeScript official manual.
https://github.com/type-challenges/type-challenges ts-challenges TypeScript Challenges, online learning/checking of one's TypeScript type programming level.
https://www.ecma-international.org/publications-and-standards/standards/ ecma ECMAScript protocol standard.
http://www.ecma-international.org/ecma-262/6.0/ ES6 ECMAScript 6 official documentation.
https://ecma262.docschina.org/ ES6 ECMAScript 6 official documentation, partially translated into Chinese.
http://es6-features.org/ ES6 Easy-to-understand ECMAScript 6 feature demos.
http://es6.ruanyifeng.com/ ES6 The most frequently used ECMAScript 6 documentation in China, especially suitable for beginners.
http://www.html5plus.org/doc/h5p.html html5 HTML5 web API query, such as camera/geolocation.
https://developer.apple.com/library/archive/ html Safari webview HTML tag query, used for mobile web development, such as some iOS-specific attributes or behaviors can be found here.
https://webkit.org/status/ webkit WebKit official website documentation, js/css feature status support query.
https://dart.dev/ dart Dart language English official website.
https://www.dartcn.com/guides/language/language-tour dart Dart language Chinese learning website.
https://github.com/dart-archive/ts2dart ts2dart A tool library for converting TypeScript to Dart language (of course, there will be some problems).
https://www.rfc-editor.org/ rfc/http RFC protocol official website, can query HTTP protocol and other content.
https://www.iana.org/assignments/media-types/media-types.xhtml MIME Media type list, MIME.
https://webassembly.org/ wasm Web Assembly (wasm) English official website.
https://www.wasm.com.cn/ wasm Web Assembly (wasm) Chinese website.
https://docs.krustlet.dev/ krustlet A Web Assembly framework.

1.2 Compatibility/Query

Address Tag Description
https://caniuse.com/ caniuse The most frequently used website for compatibility support queries.
https://github.com/compat-table/compat-table js ECMAScript compatibility query.
https://wechat-miniprogram.github.io/miniprogram-compat/ weapp Compatibility query for WeChat mini-program ES API and corresponding mini-program environment versions.
http://iosfonts.com/ ios font iOS system built-in font support query.
https://www.bootcss.com/p/websafecolors/ web color *To ensure that users see the same color on web pages as much as possible, please use the 216 colors of web-safe colors as much as possible.
https://gs.statcounter.com/ statcounter *StatCounter's browser usage statistics report.
http://tongji.baidu.com/data/browser browser *Baidu statistics on browser/app market share (no longer available, only Baidu statistics products remain).

1.3 CSS Tools

1.3.1 Preprocessors

Address Tag Description
https://lesscss.org/ less Easy-to-use CSS preprocessor tool.
https://sass-guidelin.es/zh/ sass Popular CSS preprocessor tool.
http://stylus-lang.com/ stylus Feature-rich CSS preprocessor tool.
https://stylus-lang.com/ stylus Official documentation for Stylus.
http://www.zhangxinxu.com/jq/stylus/ stylus Stylus Chinese documentation.
https://asmcss.com/ asmcss Assembler CSS official documentation, Just-in-time.

1.3.2 Postprocessors

Address Tag Description
http://api.postcss.org/ postcss Widely used CSS postprocessor tool.
https://github.com/postcss/postcss postcss Post plugin library center.
https://github.com/postcss/autoprefixer autoprefixer Postprocessing tool for automatically adding CSS prefixes.
https://cssnano.co/ cssnano CSS optimization and decomposition plugin.
https://www.npmjs.com/package/postcss-plugin-px2rem px2rem Tool that converts px units to rem units.
https://www.npmjs.com/package/postcss-px-to-viewport px2vw Tool that converts px units to vw units.
https://cssnext.github.io/ cssnext Allows us to write CSS properties that may be available in the future.

1.3.3 Style Library/Module

Address Tag Description
https://css.30secondsofcode.org/ 30s-of-code(css) A collection of commonly used CSS style modules from the 30s of code series.
https://daneden.github.io/animate.css/ bulma.css A CSS3 animation library.
http://ianlunn.github.io/Hover/ Hover.css A library of PC mouse hover interactive animations.
https://bulma.io/ bulma.css A lightweight CSS UI library.
http://cardinalcss.com/ cardinal.css A mobile-first LESS library.
http://bootflat.github.io/index.html bootflat.css A flat-style SCSS library based on BootStrap3.3.
https://jamiewilson.io/corpus/ corpus.css A collection of SCSS libraries.
https://github.com/Tencent/weui weui A style library in the WeChat style, by Tencent.
http://www.materializecss.cn/ materializecss A responsive front-end style framework in the Material style.
https://www.muicss.com/ MUI A lightweight front-end style framework in the Material style.
https://metroui.org.ua/ Metro UI A popular responsive front-end style framework, https://react.metroui.org.ua/.
https://nostalgic-css.github.io/NES.css/ NES.css A front-end style framework in the pixelated style of game consoles.
https://www.getpapercss.com/ paper.css A front-end style framework in the hand-drawn style.
http://www.uiplayground.in/css3-icons/ css3 icon Icons implemented purely in CSS.
http://bootstrap.css88.com/css/ bootstrap A front-end style framework that was once very popular.
https://www.layui.com/doc/ layui A front-end UI framework written in its own module specification.
https://fontawesome.com/ fontawesome A font icon library.
https://www.iconfont.cn/ iconfont A font icon library by Alibaba.
http://necolas.github.io/normalize.css/ normalize A relatively better CSS reset alternative.
https://tailwindcss.com/ tailwind A modular UI library.

1.3.4 Others

Address Tag Description
https://qishaoxuan.github.io/css_tricks/ css tricks Includes CSS tricks such as layout, icons, animations, etc.
https://en.bem.info/methodology/quick-start/ bem BEM writing specification.
https://acss.io/ acss Atomic CSS, a modular writing specification.
https://csswizardry.net/talks/2014/11/itcss-dafed.pdf itcss IT CSS, a component-based writing specification.
https://glenmaddern.com/articles/css-modules css-modules A solution for modularizing CSS styles.
https://github.com/MicheleBertoli/css-in-js css-in-js Generates CSS styles by writing in JavaScript.
http://blog.michealwayne.cn/Moo-CSS/docs/moocss/#m%E6%A8%A1%E5%9D%97 moo-css A CSS writing solution.
https://github.com/l-hammer/You-need-to-know-css You-need-to-know-css A collection of CSS tricks.
https://logotyp.us/ logotyp A collection of logos from well-known companies/businesses in and outside of China.

1.4 JS Plugins/Libraries

1.4.1 Libraries

Address Tag Description
https://lodash.com/docs/ lodash A well-known functional utility library.
https://github.com/ramda/ramda ramda A popular functional utility library.
https://gcanti.github.io/fp-ts/ fp-ts A TypeScript-encapsulated library following the functional programming paradigm.
https://github.com/rayepps/radash radash A TypeScript-functional utility library.
https://underscorejs.org/ underscorejs A once-popular functional utility library.
http://www.css88.com/jqapi-1.9/ jQuery A js encapsulation library that was once very popular.
http://www.css88.com/doc/zeptojs_api/ Zepto A lightweight "jQuery" that is commonly used for mobile devices.
https://github.com/basecss/city city Administrative division data files for all provinces and cities in China.
http://phaser.io/ phaser A 2D game front-end library.
http://fabricjs.com/ fabricjs A well-known library that encapsulates SVG and canvas conversion.
https://www.babylonjs.com/ babylonjs A well-known 3D game/video framework.
https://immutable-js.github.io/immutable-js/ immutable Production-level support for List, Stack, Map, OrderedMap, Set, OrderedSet, and Record data structures for JavaScript, usually used for ReactJs.
https://github.com/alibaba/GCanvas gcanvas A lightweight, cross-platform graphic engine (web/weex/react-native), developed by Alibaba.
https://github.com/jayphelps/core-decorators core-decorators A rich decorator encapsulation library based on ES2016/2017 decorator syntax.
https://github.com/prettymuchbryce/http-status-codes http-status-codes Constants for enumerating HTTP status codes. Supports all status codes defined in RFC1945 (HTTP/1.0), RFC2616 (HTTP/1.1), and RFC2518 (WebDAV). Commonly used for ajax request processing, TypeScript.
https://zod.dev/README_ZH zod
A schema declaration and verification library headed by TypeScript, which can be used for digital format verification and generation of ts declarations.

1.4.2 Data Tools

Address Tag Explanation
https://stdlib.io/ stdlib Math enhancement library for js.
http://winterbe.github.io/streamjs/ streamjs A tool for manipulating js data.
https://baconjs.github.io/ baconjs Another tool for manipulating js data.
https://date-fns.org/ date-fns A modular date formatting tool that supports on-demand usage.
https://day.js.org/ dayjs A lightweight date formatting tool that serves as an alternative to MomentJS.
https://momentjs.com/ momentjs A date formatting tool (discontinued in 2020).
http://numbrojs.com/ numbrojs A multi-language number conversion tool.
http://numeraljs.com/ numeraljs A js library for formatting and manipulating numbers.
http://openexchangerates.github.io/accounting.js/ accounting.js A tool for formatting numbers and money.
http://openexchangerates.github.io/money.js/ money.js A tool for converting money exchange rates.
https://github.com/MikeMcl/decimal.js#readme decimal.js A js library for precision processing.

1.4.3 Requests, Cookies, and Caching

Address Tag Explanation
https://github.com/axios/axios axios A commonly used ajax library.
https://github.com/github/fetch fetch A polyfill for the Fetch API.
https://github.com/webmodules/jsonp jsonp Implements jsonp. (Axios does not support jsonp.)
http://medialize.github.io/URI.js/ uri A library for URI parsing and manipulation.
https://github.com/marcuswestin/store.js/ storage A library for storage encapsulation that is compatible with IE6.
https://github.com/js-cookie/js-cookie js-cookie A library for cookie encapsulation.
https://dexie.org/ dexiejs A library for encapsulating IndexedDB.
https://localforage.github.io/localForage/ localForage A library for offline storage based on IndexedDB, WebSQL, and localStorage. (Mozilla)
https://addyosmani.com/basket.js/ basket.js Uses localStorage to cache script and css resources.

1.4.4 Plugins

Address Tag Explanation
https://www.swiper.com.cn/ swiper A carousel plugin.
https://github.com/jacoborus/nanobar/ nanobar A colorful progress bar display plugin (IE7+).
https://sweetalert.js.org/ sweetalertjs A good PC alert display plugin.
https://github.com/lancedikson/bowser bowserjs A browser detection plugin based on ua.
https://clipboardjs.com/ clipboardjs A plugin for controlling the clipboard.
https://github.com/kazuhikoarase/qrcode-generator/tree/master/js grcode-generator A tool for generating QR codes.
http://html2canvas.hertzen.com/documentation html2canvas Converts html to images (canvas), which is equivalent to implementing webpage screenshots.
https://www.rrweb.io/ rrweb A webpage "screen recording" tool based on style interception that captures and replays user operations.
https://github.com/sofish/pen#readme Pen Editor A web text editing tool.
https://nosir.github.io/cleave.js/ cleave.js A useful input control plugin.
https://github.com/jackmoore/autosize autosize.js A useful <textarea/> height auto-adaptation tool.
https://github.com/eligrey/FileSaver.js FileSaver.js A plugin for saving characters/images/files on the webpage.
http://danml.com/download.html download.js A plugin for saving characters/images/files on the webpage, which is faster than FileSaver.
https://github.com/mailru/FileAPI FileAPI A plugin for controlling file uploads.
https://github.com/alexgibson/shake.js shake.js A mobile-side shake and vibration monitoring plugin.
https://atomiks.github.io/tippyjs/ tippy.js A useful bubble component with a React version.
https://fusejs.io/ fusejs A lightweight and useful js fuzzy search library.
https://www.algolia.com/ algolia A useful search integration solution.
https://opensource.appbase.io/dejavu/ dejavu An elastic search solution, which is tailored for tech-savvy users.
https://kamranahmed.info/driver.js/#single-element-with-popover driverjs A lightweight plugin for user operation guidance.
https://michalsnik.github.io/aos/ aosjs A powerful page scrolling animation plugin.
http://lab.ejci.net/favico.js/ favicojs A plugin for animating the pc website icon.
https://alvarotrigo.com/fullPage/ fullpagejs A plugin for quickly building full-screen scrolling pages.
https://github.com/buuing/lucky-canvas lucky-canvas A lottery plugin that supports web and cross-platform compatibility with mini-programs (large turntables/nine-square grids/slot machines).
https://mattboldt.com/demos/typed-js/ typed.js A js UI library that simulates typewriter effects.

Video/Audio

Address Tag Description
http://www.mediaelementjs.com/ mediaelementjs A video control plugin.
https://videojs.com/ videojs A video control plugin.
https://github.com/bilibili/flv.js flvjs An FLV playback plugin that does not require Flash.
https://github.com/goldfire/howler.js#documentation howlerjs A video and audio control plugin.
http://jplayer.org/ jplayer A jQuery video and audio control plugin.
https://github.com/zohararad/audio5js audio5js An audio control plugin.

Images

Address Tag Description
http://camanjs.com/ camanjs A web image processing plugin.
https://sharp.pixelplumbing.com/ sharp A powerful image processing tool.
https://github.com/GoogleChromeLabs/squoosh squoosh An excellent image compression solution with browser support.
https://github.com/naptha/tesseract.js tesseract A powerful OCR recognition library.
https://imagesloaded.desandro.com/ imagesloaded A library for determining the loading status of element images.
https://github.com/fengyuanchen/cropperjs cropperjs An integrated image cropping plugin library.
https://fengyuanchen.github.io/viewerjs/ viewerjs An integrated image browsing/simple processing plugin library.
https://fengyuanchen.github.io/compressorjs/ compressorjs An integrated image compression processing plugin library.

Strings

Address Tag Description
https://vocajs.com/ vocajs camelcase/modify/fill/truncate/escape/change case and more for strings.
http://alexcorvi.github.io/anchorme.js/ anchormejs Automatically convert links/URLs/email addresses in text to clickable anchor links.
https://github.com/jprichardson/string.js stringjs A library for string operations such as truncation and deletion (not maintained for a long time).
https://github.com/ljharb/qs qsjs A library for handling URL parameters.
https://zelark.github.io/nano-id-cc/ nanoid A small (130-byte), secure, URL-friendly, unique string ID generator.
https://github.com/uuidjs/uuid uuid A library for generating RFC-compliant UUIDs.
https://github.com/pvorb/node-md5 md5 Get the md5 of characters and buffers.
https://github.com/indutny/hash.js hash Hash functions in pure javascript.

1.4.5 Tools

Address Tag Description
http://requirejs.org/ requirejs A js modularization tool.
http://yslove.net/seajs/ seajs A js modularization tool.
http://browserify.org/ browserify Use a require() method similar to node on the browser side.
https://github.com/rickharrison/validate.js validate.js A form validation tool.
https://github.com/validatorjs/validator.js validator.js A well-known content validation tool, including email validation, numerical validation, etc.
https://cn.rx.js.org/ RxJS A js asynchronous programming library based on the ReactiveX programming concept.
https://github.com/kelektiv/node.bcrypt.js#readme bcrypt A library for password hash processing.
https://github.com/Marak/Faker.js#readme faker Generate fake data in the browser/Nodejs (note that the author has deleted the source code).
https://joi.dev/ joi A powerful schema description language and data validator for js.
https://github.com/JedWatson/classnames#readme classnames A tool for combining className conditions, often used in React.
https://github.com/lukeed/clsx clsx A lightweight (228B) tool for combining className conditions, often used in React.
https://github.com/pillarjs/path-to-regexp#readme path-to-regexp A URL or path validation tool with wide usage.
https://craig.is/killing/mice Mousetrap A keyboard event registration and capture encapsulation library that supports Windows/Mac keyboards.
https://uaparser.dev/ UaParserJs Detect user's Browser, Engine, OS, CPU, and Device type/model. Runs either in browser or node.js.
https://github.com/ericclemmons/click-to-component click-to-component Option+Click React components in your browser to instantly open the source in VS Code

1.4.6 Data Visualization (Charts)

Address Tag Description
https://api.hcharts.cn/highcharts highcharts A visualizing library with the best compatibility (IE6+) and effects, but unfortunately requires payment for enterprise use.
http://echarts.baidu.com/api.html#echarts echarts The most comprehensive visualizing library in China.
https://github.com/d3/d3/wiki d3 A tool that outputs SVG for developing functions, not directly generating graphics.
http://www.chartjs.org/docs/latest/ chartjs A modular visualizing library.
http://antv.alipay.com/zh-cn/g2/3.x/demo/funnel/basic.html G2/F2 A visualizing library for PC and mobile, developed by Ant Financial.
http://blog.michealwayne.cn/FundCharts/docs/ fundcharts My own lightweight visualizing library that can be used across platforms.
https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene threejs/webGL A famous webGL 3D modeling library.
https://playcanvas.com/ playcanvas A webGL 3D modeling library for games.
http://scenejs.org/ scenejs A basic WebGL 3D library.
http://snapsvg.io/ snap An svg manipulation library.
https://www.pixijs.com/ pixijs A 2D WebGL rendering engine.
https://libcafe.com/3d/index.html svg-3d-builder A 3D SVG rendering engine.
https://github.com/jsplumb/jsplumb jsplumb A user-friendly library for visualizing flowcharts.
https://js.cytoscape.org/ cytoscape A user-friendly library for visualizing relationship charts.
http://mermaid-js.github.io/mermaid/#/ mermaid A user-friendly library for generating flowcharts.
https://ecomfe.github.io/zrender-doc/public/ zrender A 2D rendering engine that supports Canvas/SVG/VML, also the rendering engine for ECharts.

1.4.7 Data Visualization (Maps)

Address Tag Description
https://cesiumjs.org/ Cesium.js An open-source 3D city modeling library.
http://kartograph.org/ Kartograph.js A simple 2D SVG city data display library, IE7+.
https://leafletjs.com/ Leaflet.js A mobile-first map display plugin.

1.4.8 H5 Animation

Address Tag Description
http://bouncejs.com/ BounceJS A powerful CSS3 animation creation tool.
https://github.com/bendc/animateplus Animateplus A lightweight animation tool at only 3k.
https://animejs.com/ animejs A lightweight JS animation library.
https://svgjs.com/docs/3.0/ svgjs A lightweight SVG manipulation/animation library.
http://snapsvg.io/ Snap.svg A famous SVG manipulation/animation library.
http://airbnb.io/lottie/#/ lottie A cross-platform animation solution for web/native/mini programs/RN.
https://createjs.com/easeljs easeljs A canvas animation manipulation library, one of the CreateJS Four Knights.
https://createjs.com/tweenjs tweenjs An animation curve (ease/linear...) manipulation library, one of the CreateJS Four Knights.
https://createjs.com/soundjs soundjs An audio control library, one of the CreateJS Four Knights.
https://createjs.com/preloadjs preload A resource preloading library, one of the CreateJS Four Knights.
https://p5js.org/ p5js A canvas drawing functionality library.
https://roughjs.com/ roughjs An interesting canvas drawing library (drawn graphics have a hand-drawn style).
https://github.com/BabylonJS/Babylon.js BabylonJS A powerful, beautiful, simple, and open game and rendering engine.
https://github.com/sarcadass/granim.js#readme granimjs A 17k animation JS library for creating fluid and interactive gradients.
https://catdad.github.io/canvas-confetti/ canvas-confetti performant confetti animation in the browser.

1.4.9 Mobile Gesture

Address Tag Description
https://github.com/AlloyTeam/AlloyFinger AlloyFinger Adds various mobile gesture events.
http://hammerjs.github.io/ hammerjs A gesture encapsulation library that cancels the 300ms delay of mobile click.
https://interactjs.io/ interactjs Implements drag-and-drop, scaling, and multi-touch gestures using JavaScript.

1.4.10 Loading

Address Tag Description
http://pazguille.github.io/aload/ aload.js Asynchronous image/js/css loading tool.
http://callmecavs.com/layzr.js/ layzr.js Lightweight image lazy loading tool.
https://github.com/aFarkas/lazysizes lazysizes High-performance image/iframe lazy loading tool.
https://infinite-scroll.com/ infinite-scroll "Infinite" scroll loading plugin.

1.4.11 TypeScript Assistance

Address Tag Description
https://github.com/TypeStrong/ts-loader ts-loader TypeScript build plugin in webpack.
https://github.com/s-panferov/awesome-typescript-loader awesome-typescript-loader TypeScript build plugin in webpack, faster than ts-loader.
https://github.com/kimamula/ts-transformer-keys#readme ts-transformer-keys Used to extract key value arrays of interfaces (requires webpack).
https://github.com/tamino-martinius/node-ts-dedent#readme ts-dedent Print normal line breaks for logs on the node side.
https://github.com/kawamataryo/suppress-ts-errors suppress-ts-error Automatically add @ts-expect-error or @ts-ignore comments to all type errors in the project.
https://github.com/sindresorhus/type-fest type-fest Classic tool type encapsulation library.
https://microsoft.github.io/TypeChat/ typechat Based on OpenAi GPT model ts type production tools, Microsoft.

1.4.12 Others

Address Tag Description
https://github.com/krausest/js-framework-benchmark js-framework-benchmark Performance comparison of various front-end frameworks based on Chrome, with an analysis site.
https://angular.io/ angular Classic front-end framework with high encapsulation.
https://github.com/sveltejs/svelte svelte Lightweight web application compiler without virtual DOM, template, recently popular.
https://solidjs.com/ solid A library friendly to webComponent, with a development experience similar to React, which has been popular in foreign countries in recent years.
https://stenciljs.com/ stenciljs WebComponent's compilation and build framework, jsx.
https://www.infernojs.org/ infernojs Lightweight class React library, jsx.
https://emberjs.com/ emberjs A powerful web development framework with scaffolding, template.
https://github.com/akxcv/vuera vuera A library for mixing Vue/React components, which means Vue can use React components and React can use Vue components.
https://github.com/devilwjp/veaury veaury A library for mixing Vue3/React components, better than vuera
https://quark-design.hellobike.com/ quark A mobile cross-framework UI component library based on Web Components, Hallo.
https://github.com/web3/web3.js web3js Standard js encapsulation library for Ethereum.

1.5 Vue

Address Tag Description
https://vuejs.org/ vue Vue3 official documentation.
https://vuejs.org/v2/guide/syntax.html vue Vue2 official documentation.
https://cli.vuejs.org/ vue-cli Vue scaffolding tool documentation.
https://pinia.vuejs.org/ pinia Lightweight Vue state management tool recommended for Vue3.
https://vuex.vuejs.org/ vuex Vue data flow control tool.
https://router.vuejs.org/ vue-router Front-end routing control based on Vue.
https://danilowoz.com/create-vue-content-loader/ create-vue-content-loader Vue version of SVG skeleton screen plug-in.
https://ustbhuangyi.github.io/better-scroll/doc/api.html better-scroll Plugin for controlling scrolling scenes.
https://youzan.github.io/vant/ vant Mobile UI library from Youzan.
https://aidenzou.github.io/vue-weui/ vue-weui Mobile UI component library in WeUI style.
https://element.eleme.cn/ element UI component library for PC front-end development, from Eleme.
https://github.com/hilongjw/vue-lazyload vue-lazyload Vue version of image/component lazy loading plug-in.
http://v1.iviewui.com/docs/guide/install iview PC UI component library.
https://vue.ant.design/ antd-vue PC UI component library, Vue version of ant design.
https://kazupon.github.io/vue-i18n/ vue-i18n Multi-language solution.
https://terryz.github.io/vue/#/region v-region Vue administrative region selection component.
https://github.com/ecomfe/vue-echarts vue-echarts Echarts Vue encapsulation component.
https://nuxtjs.org/ nuxtjs Vue server-side rendering application framework.
https://github.com/vitejs/vite vitejs Lightweight front-end project construction tool for Vue without bundle.
https://github.com/vuejs/vue-class-component#readme vue-class-component Component decorator encapsulation for Vue, used for jsx/tsx Vue component writing.
https://formilyjs.org/ formilyjs Element/Antd form DSL solution.
https://github.com/privatenumber/vue-2-3 vue-2-3 A solution encapsulation for coexistence of Vue2 and Vue3.
https://docs-swrv.netlify.app/ SWRV Vue hook library for data requests, handling request caching, status, and more.
https://www.attojs.org/ vue-request The Vue hook library for data requests is slightly richer than swrv.
https://www.vueusejs.com/ vue-use Utility set based on Vue composite API, in addition to commonly used request animation package, but also packaged browser, electron utils.
https://github.com/devilwjp/vuereact-combined#readme vuereact-combined Use React in Vue2 and Vue2 in React, And as perfect as possible.
https://github.com/devilwjp/veaury veaury Use React in Vue3 and Vue3 in React, And as perfect as possible.

1.6 React

Address Tag Description
https://reactjs.org/ react React official documentation.
https://react.docschina.org/ react React Chinese translation documentation.
https://facebook.github.io/create-react-app/ create-react-app React scaffold tool documentation.
https://github.com/facebook/react-devtools react-devtools React Chrome development extension plugin.
http://react-guide.github.io/react-router-cn/ react-router Front-end routing control for React.
https://github.com/facebookexperimental/Recoil recoil Simple and hook-friendly data flow control tool.
https://www.redux.org.cn/docs/introduction/ redux Widely used data flow control tool, reducer+flux.
http://facebook.github.io/flux/ flux Data flow control tool.
https://cn.mobx.js.org/ mobx Lightweight data flow control tool.
https://dvajs.com/ dvajs Data flow solution based on redux and redux-saga, by Ant Financial.
https://umijs.org/zh/ umijs Pluggable enterprise-level React application framework, by Ant Financial.
http://rekit.js.org/ rekit React/Redux/React-router development tool/IDE.
https://nextjs.org/ nextjs Lightweight React server-side rendering application framework.
https://www.gatsbyjs.cn/ gatsbyjs Lightweight React static website building framework.
https://github.com/streamich/react-use react-use Easy-to-use React custom hooks encapsulation library.
https://cn.mobx.js.org/ umi hooks Hooks methods for the middle office, such as requests, dragging, and debouncing.
https://react-query.tanstack.com/docs/overview react-query Easy-to-use React ajax interface request processing encapsulation hook.
https://github.com/welldone-software/why-did-you-render#readme why-did-you-render Tool for detecting whether React components need to be re-rendered.
https://www.framer.com/motion/ framer-motion Very powerful React animation/interaction gesture library, from Farmer API.
http://danilowoz.com/create-content-loader/ create-content-loader React version of SVG skeleton screen plugin.
https://ant.design/docs/react/getting-started-cn antd Ant design, PC UI component library.
https://mobile.ant.design/index-cn antd-mobile Mobile version of antd, UI component library.
https://www.styled-components.com/ styled-components CSS-in-JS implementation for React.
https://github.com/cristianbote/goober goober CSS-in-JS library with only 1kb size.
https://github.com/twobin/react-lazyload react-lazyload React-based image/component loading plugin.
https://github.com/jamiebuilds/react-loadable#readme react-loadable Implementing code abstraction and dynamic loading of React components.
https://github.com/STRML/react-draggable react-draggable A React encapsulation component for drag and drop operations.
https://github.com/react-dnd/react-dnd#readme react-dnd Complex drag and drop control library for React, based on HTML5 drag and drop API.
https://github.com/JedWatson/react-tappable react-tappable A React encapsulation component for click event operations.
https://github.com/tajo/react-portal#readme react-portal A tool for rendering additional node components defined through portals.
https://github.com/vkbansal/react-contextmenu react-contextmenu PC web implementation of right-click menu tool components.
https://rexxars.github.io/react-markdown/ react-markdown Markdown tool for use on React.
https://github.com/30-seconds/30-seconds-of-react 30s-of-react Collection of commonly used React code modules, part of the 30s of code series.
https://vasanthk.gitbooks.io/react-bits/ react-bits Common React tricks.
https://docsite.js.org/zh-cn/docs/addDoc.html docsite React-based document generation tool.
http://casesandberg.github.io/react-color/ react-color React-based color picker plugin, simulating Sketch, Photoshop, Chrome and other color picking tools. Note that it can be directly used in Preact.
http://reactdesktop.js.org/ react-desktop React encapsulation component that simulates Mac or Windows desktop interaction.
https://www.reactboilerplate.com/ react-boilerplate A typical React project template that prioritizes performance.
https://github.com/sstur/react-rte react-rte Rich text editor based on draftJS.
https://react.i18next.com/ react-i18next Multi-language solution.
https://swr.vercel.app/ swr React Hooks library for data requests, handling request caching, state, and more.
https://formik.org/ formik Highly encapsulated, out-of-the-box form wrapper library for React Forms.

1.7 Nodejs and building

Address Label Description
https://github.com/goldbergyoni/nodebestpractices nodebestpractices A collection of Nodejs best practices.
https://www.npmjs.com/ npm Node package management platform.
https://yarn.bootcss.com/ yarn Fast Node package manager.
https://pnpm.js.org/ pnpm Fast and efficient (safe) Node package manager.
https://github.com/tj/n n Extremely simple Nodejs version manager.
https://storybook.js.org/ storybookjs UI component library navigation site for independent development of React, Vue, and Angular.
https://unpkg.com/ unpkg Foreign public static resource CDN, applicable to all content on npm.
http://nodejs.cn/api/ node Node official documentation.
https://doc.deno.land/https/github.com/denoland/deno/releases/latest/download/lib.deno.d.ts deno Official documentation for Deno (Nodejs.next).
https://bun.sh/ bun A js runtime container that claims to be 3 times faster than Nodejs.
https://turbo.build/repo turborepo Easy-to-use, high-performance multi-package management tool, monorepo.
https://lerna.js.org/ lerna Easy-to-use multi-package management tool, monorepo.
https://github.com/ds300/patch-package#readme patch-package Tool package for patching node_modules.
https://v8.dev/docs V8 js V8 engine documentation.
https://v8docs.nodesource.com/node-10.6/index.html v8 Introduction to the V8 engine.
https://github.com/bellard/quickjs quickjs A lightweight js engine.
https://github.com/GoogleChromeLabs/jsvu jsvu A must-have tool for debugging js engines, engine switching and version control.
https://docs.docker.com/ docker Application container engine Docker.
https://man.linuxde.net/ linux Linux command query manual.
http://aheckmann.github.io/gm/ gm Backend image processing tool.
https://github.com/protobi/js-xlsx/tree/beta#readme js-xlsx Library for editing and processing xlsx.
https://github.com/shelljs/shelljs shelljs Implement commonly used shell commands with Nodejs.
https://github.com/chalk/chalk chalk Console command line output style tool, mainly controls color.
https://github.com/node-schedule/node-schedule node-schedule Timing task tool for Nodejs.
https://www.npmjs.com/package/source-map-support source-map-support Module tool that supports SourceMap in the nodejs environment.
https://github.com/wclr/yalc yalc An effective alternative to npm link, using real npm packages instead of various links.

1.7.1 Building

Address Tag Description
https://prettier.io/ prettier Code formatting tool that does not affect the code.
https://ejs.bootcss.com/ ejs Easy-to-use HTML template engine.
http://mustache.github.io/ mustache HTML template library suitable for multiple languages.
https://pugjs.org/language/includes.html pug HTML template library.
http://www.nodeclass.com/api/jade.html jade HTML template library.
https://www.gulpjs.com.cn/docs/ gulp Automation building tool.
https://gulpjs.com/plugins/ gulp Gulp plugin center.
https://grunt.docschina.org/ grunt Automation building tool.
https://rollupjs.org/guide/en/ Rollup An ES6 module building tool.
https://webpack.docschina.org/ webpack The most widely used bundling tool.
https://github.com/neutrinojs/webpack-chain webpack-chain A tool to chain configure webpack configuration.
https://turbo.build/pack turbopack A high-performance packaging tool based on Rust.
https://parceljs.docschina.org/ parceljs Lightweight bundler.
https://www.snowpack.dev/ snowpack A lightweight frontend project building tool without bundle.
https://swc.rs/ swc A ts/js compiler written in Rust that claims to be 20 times faster than babel and supports all of its features.
http://babeljs.io/ babel The most widely used ES compiler.
https://github.com/fb55/htmlparser2#readme htmlparser2 A tool for converting html to AST.
https://github.com/inikulin/parse5/blob/master/packages/parse5/docs/index.md parse5 A tool for converting html to AST.
https://github.com/benjamn/recast recast A tool for converting js to AST.
https://github.com/airbnb/ts-migrate ts-migrate A tool for converting js to ts (TypeScript).
https://github.com/kimmobrunfeldt/concurrently#readme concurrently A Nodejs command line control tool that enables running multiple commands simultaneously.
https://github.com/evanw/esbuild esbuild An extremely fast js bundling and compression tool.
https://github.com/addyosmani/critical#readme critical A tool for extracting relevant CSS from HTML.
https://modernjs.dev/ modernjs A web frontend engineering system tool developed by ByteDance.
https://github.com/javascript-obfuscator/javascript-obfuscator obfuscator A js code obfuscation plugin.

1.7.2 Server

Address Tag Description
http://www.expressjs.com.cn/ express Lightweight web application development framework.
https://koajs.cn/#-application- koajs Web application development framework.
https://www.fastify.io/ fastify Claimed to be the fastest lightweight web application development framework, with a focus on JSON schema acceleration.
http://www.midwayjs.org/ midway Web application development framework that supports Web/Full Stack/Microservices/RPC/Socket/Serverless, used by Alibaba Taobao.
https://docs.feathersjs.com/ feathersjs Lightweight web application development framework suitable for data streaming.
https://docs.nestjs.com/ nestjs Powerful web application framework.
https://github.com/nuysoft/Mock/wiki mockjs Interface data simulation tool that can be used on both client and server sides.
https://sheetjs.com/ sheetjs Tool for manipulating Word through Node.
https://github.com/parallel-js/parallel.js paralleljs Tool for parallel processing of JS, usable in both the browser and Node server.
https://parall.ax/products/jspdf js-pdf Tool for generating PDFs through Node.
http://doc.pm2.io/en/plus/overview/ pm2 Node process management.
https://github.com/rvagg/node-worker-farm node-worker-farm The very common Node.js multiprocess computing library.
https://github.com/Marak/colors.js colorsjs Node log console output color control.
https://log4js-node.github.io/log4js-node/ log4js Log tool.
https://nwjs.io/ nwjs Application runtime environment based on NodeJs and Chromium, allowing you to call all Node.js modules directly from the DOM.
https://github.com/archiverjs/node-archiver node-archiver Supports ZIP/TAR document stream transmission and receiving plugins.
https://github.com/thejoshwolfe/yazl yazl Compression zip plugin, corresponding to decompression at https://github.com/thejoshwolfe/yauzl.
https://sailsjs.com/ sailsjs User-friendly MVC Nodejs framework.
https://helmetjs.github.io/ helmet Protects Express service applications by setting response header.
https://github.com/expressjs/cors#readme cors Cors middleware for Nodejs.
https://github.com/expressjs/body-parser#readme body-parser Request flow parsing middleware for Nodejs.
http://restify.com/ restify Web service framework for Nodejs.
https://github.com/expressjs/multer#readme multer Middleware for handling uploaded files in Nodejs.
https://github.com/node-cache/node-cache node-cache A Nodejs cache control module.
https://socket.io/ http://socket.io/ WebSocket solution.
https://github.com/luin/ioredis ioredis Redis invocation JS encapsulation library.
https://github.com/websockets/ws ws A nodejs package for WebSocket.
https://github.com/digitalocean/nginxconfig.io http://nginxconfig.io/ Tool for generating nginx configurations online.
https://github.com/davidmarkclements/fast-safe-stringify#readme fast-safe-stringify Securely and quickly serialize JSON, replacing JSON.stringify.

1.7.3 GraphQL

Address Tag Description
https://graphql.org/graphql-js/ graphql GraphQL's JS implementation.
https://github.com/hasura/graphql-engine hasura Powerful GraphQL engine solution.
https://github.com/apollographql/apollo-client apollo-client Solution for every UI framework and GraphQL server.

1.7.4 Micro Frontends

Address Tags Description
https://single-spa.js.org/ single-spa A micro-frontend solution with router configuration as its main feature.
https://qiankun.umijs.org/zh/ qiankun An Ant-design micro-frontend framework based on single-spa.
https://webpack.docschina.org/concepts/module-federation/ module-federation A micro-frontend solution with module sharing during build as its main feature, implemented in webpack (5).
https://fronts.js.org/ fronts A progressive micro-frontend framework based on webpack module-federation.
https://github.com/jsdom/jsdom jsdom A wrapped library for DOM manipulation in node environment.

1.7.5 Cloud and Serverless

Address Tags Description
https://wasmedge.org/ wasmedge A cloud-native and serverless framework related to WebAssembly.
https://www.serverless.com/ serverless A framework for quickly building node serverless services, supporting Tencent Cloud SCF, AWS Lambda, etc.
https://aws.amazon.com/cn/campaigns/lambda/ aws-lambda Classic, Amazon serverless computing service.
https://qingfuwu.cn/ qingfuwu Byte lightweight service, supports Serverless (FaaS), CDN and other services, with a free tier.
https://help.aliyun.com/document_detail/154438.html qingfuwu Alibaba Cloud Function Compute service, supports Serverless (FaaS).
https://cloud.tencent.com/document/product/583 qingfuwu Tencent Cloud Cloud Function service, supports Serverless (FaaS).

1.7.6 Low Code

Address Tags Description
https://lowcode-engine.cn/ lowcode-engine An open-source low-code engine from Alibaba.
https://weda.cloud.tencent.com/ weda Tencent low-code engine, Micro-Starter.
https://aisuda.bce.baidu.com/amis/zh-CN/docs/index amis Baidu open-source low-code engine, suitable for projects with a back-office focus.

1.8 Hybrid and Cross-platform

Link Tag Description
https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps PWA Progressive Web Apps.
https://developers.weixin.qq.com/miniprogram/dev/ Mini Program/Hybrid WeChat Mini Program official development website.
https://docs.alipay.com/mini/developer/getting-started Mini Program/Hybrid Alipay Mini Program official development website.
https://smartprogram.baidu.com/developer/index.html Mini Program/Hybrid Baidu Mini Program official development website.
https://wepyjs.github.io/wepy-docs/ Mini Program/Hybrid Vue syntax Mini Program official development website.
https://github.com/opendigg/awesome-github-wechat-weapp Mini Program/Hybrid Xiaomi Light App official development website.
https://dev.mi.com/doc/?page_id=2303 Light App/Hybrid Xiaomi Light App official development website.
https://www.quickapp.cn/ Light App/Hybrid Oppo/vivo Light App official development website.
https://developer.huawei.com/consumer/cn/quickApp Light App/Hybrid Huawei Light App official development website.
https://reactnative.cn/ Cross-platform Popular cross-platform tool using React syntax, RN.
https://github.com/NativeScript/NativeScript Cross-platform Popular cross-platform development framework that supports Angular/Vue/Svelte/React.
https://github.com/ionic-team/ionic-framework Cross-platform A powerful cross-platform UI toolkit for building native-quality iOS, Android, and PWA apps using HTML, CSS, and JavaScript.
https://github.com/quasarframework/quasar Cross-platform Build top-quality, high-performance Vue responsive websites, PWAs, SSR, mobile, and desktop apps
https://weex.apache.org/zh/ Cross-platform A cross-platform tool that was popular a few years ago using Vue syntax, but is no longer maintained.
https://alibaba.github.io/weex-ui/#/cn/ Cross-platform/Weex Weex UI component library.
https://taro.jd.com/ Mini Program/Cross-platform Cross-web/Mini Program/Native React syntax cross-platform tool, runtime cross-platform mode.
https://taro.jd.com/ Mini Program/Cross-platform/Flutter React syntax cross-platform tool for cross-web/Mini Program/Flutter, Alibaba.
https://wechat-miniprogram.github.io/kbone/docs/ Mini Program/Cross-platform Cross-web/Mini Program cross-platform build plugin with low cost and compatibility with various web frameworks, Tencent.
https://hippyjs.org/ Cross-platform Tencent's hybrid cross-platform framework.
https://uniapp.dcloud.io/ Mini Program/Cross-platform Vue syntax cross-platform tool for cross-web/Mini Program/Native.
https://openkraken.com/ Kraken High-performance web rendering engine built on Flutter that allows writing Flutter in web paradigm, Alibaba.
https://github.com/remaxjs/remax Remax React syntax cross-web/Mini Program tool, similar to taro-next(3) cross-platform mode, friendly for Mini Program, Alipay.
https://ant-move.github.io/guide/ Antmove Mini Program converter that converts to multi-platform Mini Program based on Alipay/WeChat Mini Program, Amap.
https://guoshuyu.cn/home/wx/Flutter-1.html Cross-platform Extremely popular Dart syntax cross-platform development tool.
http://electronjs.org/docs Cross-platform Development framework for PC, Windows/Mac applications.
http://electronjs.org/docs Cross-platform Development framework for PC, Windows applications, Microsoft.
https://tauri.app/ Tauri Development framework for web-based Windows/Mac applications written in Rust.
https://github.com/tw93/Pake Pake Scaffold tool for web page packaging and generating small desktop apps based on Rust Tauri framework, supporting Mac/Windows/Linux systems.
https://wendux.github.io/dist/#/doc/flyio/readme Fly Request encapsulation library that supports Web, Node.js, WeChat Mini Program, Weex, React Native, Quick App.
https://github.com/icindy/wxParse wxParse Rich text parsing component for WeChat Mini Program that supports conversion of HTML and markdown to wxml visualization (but is currently no longer maintained).
https://developer.chrome.com/extensions Chrome-extension Official documentation for Chrome extensions.
https://github.com/sxei/chrome-plugin-demo Chrome-plugin, Chrome-extension A good tutorial for developing Chrome extensions with demos.

1.9 Auxiliary Tools

Address Tag Description
https://chat.openai.com/chat chatGPT A question-answering robot based on OpenAPI, which is also good for looking up technical issues.
https://www.cursor.so/ cursor A programming assistant based on OpenAPI GPT-4, which feels even smoother than copilot.
https://codegeex.cn/zh-CN CodeGeeX A programming assistant for replacing Copilot, AI, and free.
https://stackoverflow.com/ stackoverflow A friendly community for solving technical problems.
https://bundlephobia.com/ bundlephobia A website for analyzing the size and loading performance of npm packages.
https://npmgraph.js.org/ npmgraph A tool website for analyzing the dependency relationships of npm packages.
https://www.typescriptlang.org/dt/search?search= joi A website for querying TypeScript declaration files of various libraries.
http://deerchao.net/tutorials/regex/regex.htm regexp A beginner's tutorial on regular expressions.
https://regexper.com/ regexper A visual online regular expression verification website.
https://extendsclass.com/regex-tester.html cyrilex An online visual regex tester and debugger.
http://wproxy.org/whistle/install.html whistle A web debugging proxy tool.
https://astexplorer.net/ astexplorer An online ast parsing tool for languages such as css/html/js/ts.
https://github.com/typicode/husky#readme Husky A git tool on NodeJS.
https://cn.eslint.org/ eslint A js code checking tool.
https://visualgo.net/en Visualgo A visualization algorithm query.
https://visualgo.net/en Visualgo A visualization algorithm query.
http://yisibl.github.io/cubic-bezier/#.48,1.06,1,1.45 cubic An animation curve query website (ease/linear...).
https://dev.w3.org/html5/html-author/charref charref A query for escape characters of character punctuation.
https://www.colorzilla.com/gradient-editor/ gradient-editor A CSS gradient style generation tool.
https://valine.js.org/cdn.html valine A comment system tool.
http://gittalk.com.cutestat.com/ gittalk A commenting tool for github.
https://github.com/Coding/WebIDE webide Writing code on the web.
https://hiroppy.github.io/fusuma/ fusuma Writing web ppt with markdown.
https://stackedit.io/ stackedit A browser-based markdown editor.
https://vuepress.vuejs.org/zh/ vuepress Writing documents/blogs with markdown.
https://vitejs.cn/vitepress/ vitepress Writing documents/blogs with markdown. VuePress's little brother, built with Vite.
https://hexo.io/zh-cn/ hexo Writing documents/blogs with markdown.
https://d.umijs.org/ dumi A tool suitable for writing front-end development documents, markdown, ants.
https://jsdoc.app/ jsdoc The most classic tool for generating documentation from js code comments.
https://github.com/jsdoc2md/jsdoc-to-markdown jsdoc-to-markdown Generating markdown documentation from js comments (jsdoc format).
https://www.materialui.co/colors materialui Quickly select color values.
https://carbon.now.sh/ carbon Generate beautiful screenshots of code when writing blogs.
https://tinypng.com/ Tinypng Compress png and jpeg images.
https://github.com/svg/svgo svgo A tool for compressing SVG graphic files.
https://jakearchibald.github.io/svgomg/ SVGOMG Compress SVG graphics online.
https://imagemagick.org/index.php imagemagick An image processing tool widely used in the background.
https://github.com/javierbyte/img2css img2css An interesting library that presents images in CSS using box-shadow.
https://www.whatfontis.com/ whatfontis A font recognition tool for images, limited to English fonts and registration is required.
https://www.toptal.com/developers/keycode keycode Enter a key and get its corresponding js keyCode for the online website
https://ps.gaoding.com/#/ ps Powerful online Photoshop.
https://avocode.com/convert-psd-to-sketch?ref=producthunt avocode One-click conversion of psd to sketch.
https://jakearchibald.github.io/svgomg/ svgomg Online svg optimization and preview.
https://code2flow.com/ code2flow Online pseudo-code to flowchart tool.
https://tool.lu/json/ json Online json formatting tool.
https://tool.lu/js/ js Online js formatting/obfuscation/compression tool.
https://tool.lu/css/ css Online css formatting/compression/responsive unit processing tool.
https://tool.lu/coderunner/ coderunner Online php/c/c++/python/go/js/java/bash code execution tool.
https://www.diffchecker.com/ diffchecker Online text/file diff tool.
https://isoflow.io/ isoflow Online flowchart drawing tool.
https://github.com/n8n-io/n8n n8n A workflow automation tool based on free and open fair code licenses for easily automating tasks across different services.
https://zijian.aliyun.com/detect/dns/DNS_PING-d31c5446aff9db99decd9d9d944b11c5-1640605424801 dns A domain name DNS detection website tool, Alibaba Cloud.
https://tabatkins.github.io/railroad-diagrams/generator.html railroad-diagrams A website tool for drawing railroad diagrams online.
https://unbug.github.io/codelf/ codeIf A naming search tool to help solve naming difficulties.
https://app.quicktype.io/ QuickType A tool website for generating type declaration code for specified languages (such as TypeScript, C++, Java, C#, Go, etc.) based on json text.
https://github.com/1c7/chinese-independent-developer chinese-independent-developer An aggregation of projects by independent developers in China.

1.10 Testing, Security, and Encryption

1.10.1 Unit Testing

Address Tag Description
https://mochajs.org/ mocha A unit testing tool.
https://jestjs.io/zh-Hans/ jest A unit testing tool.
https://www.cypress.io/ cypress A unit testing integrated platform tool.
https://github.com/avajs/ava avajs A fast testing tool.
http://karma-runner.github.io/latest/index.html karma A JavaScript testing execution process management tool based on Node.js (Testacular's new name).
https://enzymejs.github.io/enzyme/ enzyme A React unit testing tool that can test hooks.
https://github.com/marmelab/gremlins.js gremlins A node and browser Monkey Test tool.
https://uptime.kuma.pet/ uptime-kuma An open-source metric monitoring platform based on puppeteer.
https://playwright.dev/ playwright A newer e2e testing tool that supports mainstream browsers such as Chrome and Firefox.

1.10.2 Security and Encryption Knowledge

How to Secure Anything

crypto-js front-end data encryption tool

Front-end Security

Revisiting Front-end Security

8 Major Front-end Security Issues

Front-end Encryption Matters

What Does HTTPS Encrypt?

Web-side Anti-crawling Technical Solutions

Front-end Encryption Methods We Should Discuss

1.10.3 Debug

Address Tag Description
https://github.com/Tencent/vConsole vconsole Known as a web developer tool for mobile devices.
https://www.fundebug.com/ FunDebug A simple project debug monitoring tool, with a free version.
http://www.webfunny.cn/ webfunny_monitor A unified front-end exception monitoring solution.
https://github.com/typicode/json-server json-server A fast mock tool that runs locally.
https://www.pagespy.org/ Page spy A set of higher degree of remote web debugging tools, Huolala tech.

1.10.4 Quality Check

Address Tag Description
http://www.jslint.com/ jslint A JavaScript validation tool
https://jshint.com/ jshint A JavaScript validation tool
https://eslint.org/ eslint A JavaScript validation tool
http://csslint.net/ csslint A CSS validation tool
https://validator.w3.org/ validator Online HTML validation website
https://flow.org/ flow A JavaScript code checking tool
https://www.sonarlint.org/vscode/ sonarlint VSCode plugin for code quality validation of js/ts projects
https://github.com/google/eng-practices eng-practices Google engineering practices documentation
https://github.com/cheeriojs/cheerio#readme cheerio A tool for web scraping
https://pptr.dev/ puppeteer A headless browser based on Chromium, used for web automation including web crawling
https://www.selenium.dev/ selenium A powerful tool for testing web applications
https://github.com/GoogleChrome/lighthouse lighthouse Google's standard web performance testing tool, built into Chrome
https://github.com/nolanlawson/fuite fuite A tool for web memory detection, based on Puppeteer
https://github.com/chaitin/xray xray A comprehensive security assessment tool that supports common web security issue scanning and custom PoC, but is not open source.

1.11 AI Artificial Intelligence Library

Address Tag Description
https://langchain-langchain.vercel.app/ langchain Building applications with LLMs through composability
https://github.com/Significant-Gravitas/Auto-GPT autoGPT An experimental open-source attempt to make GPT-4 fully autonomous.
https://github.com/reworkd/AgentGPT agentGPT Assemble, configure, and deploy autonomous AI Agents in your browser.
https://tensorflow.google.cn/js tensorflow A library for building and running machine learning and deep learning models in the browser or Node.js
https://github.com/openai/openai-node openai OpenAI's Node.js API call encapsulation library
https://github.com/openai/openai-quickstart-node openai OpenAI Node.js Getting Started guide and examples
https://github.com/openai/whisper whisper OpenAI speech recognition model (transcription)
https://github.com/humanloop/awesome-chatgpt chatgpt Collection of chatGPT/GPT3 tools, demos, and documentation
https://github.com/f/awesome-chatgpt-prompts chatgpt Collection of chatGPT Q&A training practices
https://alibaba.github.io/pipcook/#/zh-cn/ pipcook Machine learning toolset friendly to web developers, from Alibaba
https://github.com/mljs/distance ml-distance Calculate vector distance or similarity between, can be used for Embeddings processing
https://promptperfect.jinaai.cn/ prompt-prefect An optimized Prompt online tools

1.12 WebAssembly

Link Tag Description
AssemblyScript assemblyscript write wasm by TypeScript
Wasmtime wasmtime fast and safety wasm runtime, from bytedance
WasmExplorer WasmExplorer online wasm playground

1.13 IDE Plugins

1.13.1 VS Code

Link Tag Description
https://marketplace.visualstudio.com/ marketplace Plugin homepage
https://vscode.dev/ VSCode VSCode online version
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight color-highlight Color preview.
https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview svg-preview SVG graphics preview.
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker code-spell-checker Code word spell check.
https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify beautify JavaScript, JSON, CSS, Sass, and HTML formatting optimization.
https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks bookmarks Code bookmark tool.
https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets rainbow-brackets Bracket color distinction tool.
https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-stylefmt stylefmt CSS formatting tool.
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome debugger-for-chrome VSCode and Chrome debugging plugin, essential for local development.
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint eslint JS check tool.
https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint stylelint CSS/LESS/SCSS check tool.
https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin typescript-tslint-plugin TypeScript check tool.
https://marketplace.visualstudio.com/items?itemName=octref.vetur vetur Vue development tool.
https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code dart-code Dart language development support.
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter Flutter Flutter development support.
https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets html-snippets HTML tag development tool.
https://marketplace.visualstudio.com/items?itemName=maximetinu.identical-sublime-monokai-csharp-theme-colorizer identical-sublime-monokai I prefer the Sublime style.
https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint markdownlint Markdown check tool.
https://marketplace.visualstudio.com/items?itemName=HookyQR.minify minify JS/CSS compression tool.
https://marketplace.visualstudio.com/items?itemName=pnp.polacode polacode VSCode IDE plugin for code screenshots
https://gitlens.amod.io/ gitlens Git source code management plugin
https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager project-manager Local project management tool
https://marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster javascript-booster JS/TS quick refactoring and optimization tool, such as changing var to const/let.

1.14 Life

Address Tag Description
https://github.com/Anduin2017/HowToCook HowToCook A programmer's guide to cooking at home.
https://github.com/geekan/HowToLiveLonger HowToLiveLonger A programmer's guide to living longer.