Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/michealwayne/fe-tools

前端开发常用文档/网站地址、样式/js方法封装库、项目模板。提供Chrome拓展程序
https://github.com/michealwayne/fe-tools
css frontend js nodejs tools
Last synced: 14 days ago
JSON representation
前端开发常用文档/网站地址、样式/js方法封装库、项目模板。提供Chrome拓展程序
Host: GitHub
URL: https://github.com/michealwayne/fe-tools
Owner: MichealWayne
Created: 2017-08-29T03:21:10.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2024-10-15T06:07:51.000Z (29 days ago)
Last Synced: 2024-10-24T13:08:43.394Z (20 days ago)
Topics: css, frontend, js, nodejs, tools
Language: TypeScript
Homepage: https://blog.michealwayne.cn/fe-tools/stable/
Size: 35.5 MB
Stars: 174
Watchers: 4
Forks: 33
Open Issues: 1
Metadata Files:
- Readme: README-en.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project

README

        # fe-tools

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

---

## 1. Common Websites

Contents:

- [1.1 HTML/CSS/JavaScript](https://github.com/MichealWayne/fe-tools#11-htmlcssjavascript)

- [1.2 Compatibility/Query](https://github.com/MichealWayne/fe-tools#12-%E5%85%BC%E5%AE%B9%E6%9F%A5%E8%AF%A2)

- [1.3 CSS Tools](https://github.com/MichealWayne/fe-tools#13-css%E5%B7%A5%E5%85%B7)

- [1.4 JS Plugins/Libraries](https://github.com/MichealWayne/fe-tools#14-js%E6%8F%92%E4%BB%B6%E5%BA%93)

- [1.5 Vue](https://github.com/MichealWayne/fe-tools#15-vue)

- [1.6 React](https://github.com/MichealWayne/fe-tools#16-react)

- [1.7 Nodejs and Building](https://github.com/MichealWayne/fe-tools#17-nodejs%E5%92%8C%E6%9E%84%E5%BB%BA)

- [1.8 Hybrid and Cross-Platform](https://github.com/MichealWayne/fe-tools#18-hybird%E5%92%8C%E8%B7%A8%E7%AB%AF)

- [1.9 Auxiliary Tools](https://github.com/MichealWayne/fe-tools#19-%E8%BE%85%E5%8A%A9%E5%B7%A5%E5%85%B7)

- [1.10 Testing, Security, and Encryption](https://github.com/MichealWayne/fe-tools#110-%E6%B5%8B%E8%AF%95%E5%AE%89%E5%85%A8%E5%8F%8A%E5%8A%A0%E5%AF%86)

- [1.11 AI Artificial Intelligence Library](https://github.com/MichealWayne/fe-tools#111-AI%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD%E5%BA%93)

- [1.12 IDE Plugins](https://github.com/MichealWayne/fe-tools#112-ide%E6%8F%92%E4%BB%B6)

- [1.13 Life Edition](https://github.com/MichealWayne/fe-tools#113-%E7%94%9F%E6%B4%BB%E7%AF%87)

> 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/](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocorrect) | 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  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. | Used to send mail library, support SMTP/SES/Sendmail/Stream mode |

### 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](https://github.com/veeral-patel/how-to-secure-anything)

[crypto-js front-end data encryption tool](https://github.com/brix/crypto-js)

[Front-end Security](https://cloud.tencent.com/developer/article/1136202)

[Revisiting Front-end Security](http://blog.michealwayne.cn/2020/04/19/safety/%E3%80%90%E6%80%BB%E7%BB%93%E3%80%91%E5%86%8D%E8%B0%88%E5%89%8D%E7%AB%AF%E5%AE%89%E5%85%A8/)

[8 Major Front-end Security Issues](https://mawei.blog/post/frontend-security-vulnerabilities-part1/)

[Front-end Encryption Matters](https://juejin.im/post/5c452021518825242062979f)

[What Does HTTPS Encrypt?](https://zhuanlan.zhihu.com/p/38278311)

[Web-side Anti-crawling Technical Solutions](https://juejin.im/post/5b6d579cf265da0f6e51a7e0)

[Front-end Encryption Methods We Should Discuss](https://juejin.im/entry/5bc93545e51d450e5f3dceff)

### 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. |