技术文档与规范#

Devdocs： http://devdocs.io/ Web.dev：https://web.dev/?hl=zh-cn 真正的 w3school：https://www.w3schools.com/ 印记中文： https://www.docschina.org/ MDN： https://developer.mozilla.org/en-US/docs/Web 现代 JavaScript 教程：https://zh.javascript.info/ JavaScript 基础（网道）： https://wangdoc.com/javascript/ TypeScript 基础（网道）：https://wangdoc.com/typescript/ WebAPI（网道）： https://wangdoc.com/webapi/ WebAPI（MDN）：https://developer.mozilla.org/en-US/docs/Web/API JS Api 全解析：https://js.yanceyleo.com/ Node.js 官方文档： https://nodejs.cn/api/ npm 官方文档：https://docs.npmjs.com/ ES6： https://es6.ruanyifeng.com/ 阮一峰的早期 Node.js API 文档： https://javascript.ruanyifeng.com/nodejs/basic.html 学习 HTTP/3 协议： https://http3-explained.haxx.se/zh/ 学习 HTTP/1、2 协议： https://github.com/bagder/http2-explained CSS（MDN）： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS HTML（MDN）：https://developer.mozilla.org/en-US/docs/Web/HTML HTTP（MDN）：https://developer.mozilla.org/en-US/docs/Web/HTTP 所有 HTTP 头： https://zh.wikipedia.org/wiki/HTTP%E5%A4%B4%E5%AD%97%E6%AE%B5 （外网访问）

规格文档：

JSDoc 规范：https://jsdoc.app/ YAML 规范： https://zh.wikipedia.org/wiki/YAML Markdown 规范： http://www.markdown.cn/ HTML5 规范： https://www.w3.org/html/ig/zh/wiki/HTML5 ECMA 规范： https://ecma262.docschina.org/ ECMA 5 中文翻译： http://yanhaijing.com/es5/ JSON5 支持注释和尾缀逗号的 JSON 格式：https://json5.org/

技术博客#

阮一峰： http://www.ruanyifeng.com/ 张鑫旭： https://www.zhangxinxu.com/ 风动之石：https://blog.windstone.cc/ TooBug：https://www.toobug.net/ 一像素：https://www.cnblogs.com/onepixel/ 羡澈： http://zhangwenli.com/ 颜海镜：https://yanhaijing.com/ PHODAL：https://www.phodal.com/ Alili：https://alili.tech/ 紫云飞：https://www.cnblogs.com/ziyunfei/ （作者在知乎活跃） 迷渡 justjavac： https://justjavac.com/ （作者在知乎活跃） 司徒正美：https://www.cnblogs.com/rubylouvre/ （博主已去世 R.I.P） 二丫讲梵：https://wiki.eryajf.net/ （顶级 DevOps）

以下是已经无法访问的：

HTML5ify（朴灵）： https://html5ify.com/ Chrisyue： https://www.chrisyue.com/ 众成翻译：https://zcfy.cc/ HTML中文网： https://www.html.cn/ （以前的CSS88）

在线工具#

CSS 在线设计工具：

CSS clip-path 工具：https://bennettfeely.com/clippy/ CSS 波浪形裁切在线设计1：https://www.shapedivider.app/ CSS 波浪形裁切在线设计2：https://getwaves.io/ CSS 毛玻璃特效在线设计：https://ui.glass/generator/ CSS flex 布局在线体验：https://bennettfeely.com/flexplorer/ CSS grid 布局在线设计：https://cssgrid-generator.netlify.app/ CSS Tooltip 气泡在线设计：https://cssarrowplease.com/ CSS 过渡贝塞尔曲线：https://matthewlein.com/tools/ceaser CSS 过渡贝塞尔曲线2：https://cubic-bezier.com/

Web 前端常用：

SVG、JSON 等与代码互转：https://transform.tools/ 字体转 Base64：https://transfonter.org/ 在线字体裁剪：https://font-subset.disidu.com/ CanIUse 浏览器特性支持：https://caniuse.com/ NodeGreen Node.js 特性支持：https://node.green/ Nginx 图形化配置：https://nginxconfig.io/ CodeSandBox：https://codesandbox.io/ （建议外网访问） CodePen：https://codepen.io/pen/ （建议外网访问） 国产代码沙箱 RunJS：https://runjs.work/ TypeScript 在线转码：https://www.typescriptlang.org/play Babel 在线转码：https://babeljs.io/repl （建议外网访问） 测试网站的浏览器兼容情况：https://browsershots.org/

综合工具：

Cron 解析：https://cron.qqe2.com/ （外网访问） 正则表达式测试：https://tool.oschina.net/regex 带速查表支持多语言的正则工具：https://regex101.com/ （支持 PCRE 正则） 带速查表和图示化的正则工具：https://regexr.com/ （支持 PCRE 正则） 图形化正则：https://jex.im/regulex/ 编码转码工具库：https://www.bejson.com/ OSChina 的工具库：https://tool.oschina.net/ 站长 whois 查询：https://whois.chinaz.com/ 站长网站测试：https://tool.chinaz.com/sitespeed 域名 ping 测试：https://tcp.ping.pe/ 文件格式互转：https://convertio.co/zh/ 草料二维码：https://mh.cli.im/ 在线数学公式编辑：https://www.mathcha.io/ （知乎的也不错） 批量文件重命名：https://webrename.cn/

设计工具与素材#

素材库：

Iconfont：https://www.iconfont.cn/ Emoji 高清图：https://emojipedia.org/apple 艺术字体1：https://www.qt86.com/ 艺术字体2：http://www.akuziti.com/yw/ 免费图库索引：https://www.yuque.com/ruanyf/weekly/free-photos SVG 图标库1：https://leungwensen.github.io/svg-icon/ SVG 图标库2：https://icomoon.io/app/#/select 免费透明 PNG 和 SVG 的 Logo：https://seeklogo.com/ （外网访问） 各种循环图库索引：https://desdev.tools/tools/categories/textures-patterns/ 各种循环纹理图：https://www.transparenttextures.com/

在线设计工具：

地理数据图：https://pixelmap.amcharts.com/ 词云：https://wordart.com/ 循环图库：https://github.com/tholman/the-pattern-library 循环图制作器：https://patterninja.com/ 安卓 .9.png 工具：https://alloyteam.github.io/gopng/ 卷积神经网络放大图片：https://waifu2x.udp.jp/index.zh-CN.html AI 放大图片2：https://bigjpg.com/ 消除图片背景：https://www.remove.bg/zh 泼辣修图：https://photoeditor.polarr.com/ 在线 Photoshop：https://ps.gaoding.com/

商业设计工具：

创客贴：https://www.chuangkit.com/ Fotor 懒设计：https://www.fotor.com.cn/ 淘宝店装修醉语言设计：https://ecplay.com/z1_8.html

开发体验#

代码字体一览：https://www.programmingfonts.org/ Markdown 数据徽标：https://shields.io/ 好看的徽标：https://forthebadge.com/ 各种 .gitignore：https://www.toptal.com/developers/gitignore/ Markdown 写文件树：https://devtool.tech/tree Carbon 分享代码：https://carbon.now.sh/ 最好的 Git 教程：https://nulab.com/zh-cn/learn/software-development/git-tutorial/git-basics/ Git 官网文档：https://git-scm.com/book/zh/v2 交互式学习 Git 的分支：https://learngitbranching.js.org/?locale=zh_CN WSL 各种报错排查：https://blog.mjyai.com/2020/06/01/win10-wsl2-ubuntu/ WSL 更换盘符：https://dev.to/mefaba/installing-wsl-on-another-drive-in-windows-5c4a （外网访问） WSL 默认用户：https://askubuntu.com/questions/816732/how-to-change-default-user-in-wsl-ubuntu-bash-on-windows-10 macOS 为 iTerm2 选个好配色：https://pjchender.blogspot.com/2017/02/mac-terminal-iterm-2-oh-my-zsh.html Git commit 书写建议：https://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html standard-version 使用规范的 Git 提交来生成改动日志：https://www.npmjs.com/package/standard-version 一款漂亮的 Hexo 主题：https://github.com/chaooo/hexo-theme-BlueLake GitHub 使用 GPG 密钥：https://www.zackwu.com/posts/2019-08-04-how-to-use-gpg-on-github/ GitHub 团队项目贡献者 README 展示工具：https://allcontributors.org/

特效和样式库#

canvas 烟花：https://www.kirilv.com/canvas-confetti/ 组件样板：https://webframe.xyz/ 各种 CSS 动效：https://cssfx.netlify.com/ （外网访问） 各种 CSS 动效：https://animate.style/ （via Janet） 各种特效工具：https://zhuanlan.zhihu.com/p/34645979 CSS 渐变实现复杂循环纹理：https://bennettfeely.com/gradients/ CSS 渐变实现复杂循环纹理：https://projects.verou.me/css3patterns/ （via《CSS 揭秘》） CSS 简单循环纹理：https://bansal.io/pattern-css#cross-dots CSS 渐变配色一览：https://bennettfeely.com/scales/ 字体 font-family 速查表：https://www.cnblogs.com/ysshuai/p/6925476.html CSS 伪元素相册效果： https://designshack.net/articles/css/use-pseudo-elements-to-create-an-image-stack-illusion/ 各种 CSS 居中效果：https://segmentfault.com/a/1190000013082888 防御性 CSS：https://defensivecss.dev/ 一些 canvas 案例 demo：https://snayan.github.io/canvas-demo/ 使用 canvas 动态绘制线条：https://maxwellito.github.io/vivus/ 鼠标悬停 3D 视差效果：https://atroposjs.com/ 鼠标悬停视差效果：https://matthew.wagerfield.com/parallax/ 类似苹果官网的滚动效果：http://scrollmagic.io/ 滚动视差效果：https://dixonandmoe.com/rellax/ 各种 Checkbox：https://getcssscan.com/css-checkboxes-examples （拉到最底下还有其他的） 各种 3D 按钮：https://csspro.com/css-3d-buttons?ref=beautifulboxshadow-bottom （拉到最底下还有其他的） 基于 tailwindcss 的纯标签组件库：https://sailboatui.com/ 光标移动特效：https://tholman.com/cursor-effects/ （同 the-pattern-library 作者）

技术摘录与优秀案例#

React 技术揭秘：https://react.iamkasong.com/ React 的 react-app-env.d.ts 是什么：https://segmentfault.com/a/1190000038874526 Vue 2 设计揭秘与源码拆解：https://github.com/HcySunYang/vue-design （记得看一下 elegant 分支） 通过 Vue Loader 理解 Vue SFC：https://zhuanlan.zhihu.com/p/355401219 简单的从零搭建一个 Vue 2 SPA 项目：https://segmentfault.com/a/1190000014324125 Vue 2 的自带的 Webpack 配置：https://blog.csdn.net/hongchh/article/details/55113751 Vue 2 使用 CDN 以及区分环境：https://www.jianshu.com/p/9d6c1efebcd9 深入理解 TypeScript：https://jkchao.github.io/typescript-book-chinese/ 阮一峰 Flex 布局： https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 阮一峰 Grid 布局： http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html Flex 和 Grid 讲解和演示：https://linxz.github.io/flex_learn_manual/ 简单有深度的前端面试题：https://www.cnblogs.com/hzg1981/p/5718157.html 实现 “查看全部” 效果：https://wintc.top/article/58 H5 唤起 App 的方案：https://github.com/suanmei/callapp-lib/issues/1 计算机基础面试题：https://github.com/wolverinn/Waking-Up jQuery 源码分析：https://www.cnblogs.com/aaronjs/p/3279314.html TooBug 的 Webpack 指南：https://www.toobug.net/webpack/ Webpack 常见面试题：https://zhuanlan.zhihu.com/p/44438844 （部分过时） require 的五种用法：https://www.cnblogs.com/lvdabao/p/5953884.html （2016 年的文，回味一下） Webpack 搭建指南：https://webpack.eleven.net.cn/ 通过 Webpack 优化网站：https://segmentfault.com/a/1190000007891318 Babel 的 polyfill 和 transform-runtime：https://segmentfault.com/a/1190000020237790 Babel 的 useBuiltIns 选项：https://segmentfault.com/a/1190000020237779 3D 全景看房的实现：https://juejin.cn/post/6973865268426571784 神奇操作之给 img 标签的请求定制 header：https://segmentfault.com/a/1190000020366227 优化网站的图片：https://cjting.me/2019/07/29/image-optimization/ 我给网站做了一场性能手术：https://juejin.cn/post/6959333330277892133 从渲染原理谈前端性能优化：https://segmentfault.com/a/1190000019504744 iPhone X 等手机的安全区适配：https://jelly.jd.com/article/6006b1055b6c6a01506c87fd jQuery 插件站1：https://www.jq22.com/ jQuery 插件中2：http://www.htmleaf.com/ Mongoose 为什么会添加 __v 字段：https://blog.csdn.net/qq_41499782/article/details/121258473 Mongoose 官方文档关于 __v 字段的解释和配置方式：https://mongoosejs.com/docs/guide.html#versionKey koa2 进阶学习笔记：https://chenshenhai.github.io/koa2-note/ CSS 知多少：https://www.kancloud.cn/digest/css-know/77946 CSS 的 BFC：https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 经典手写 XHR：https://www.cnblogs.com/xiaohuochai/p/6036475.html 阮一峰的网站性能管理详解：https://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html 阮一峰的 RESTful 最佳实践：https://www.ruanyifeng.com/blog/2018/10/restful-api-best-practices.html 阮一峰的 OAuth 四种方式讲解：https://www.ruanyifeng.com/blog/2019/04/oauth-grant-types.html 理解 CSS 中的 width：https://www.zhangxinxu.com/wordpress/2016/05/css3-width-max-contnet-min-content-fit-content/ CSS 巧用内外边距实现高度自适应：https://segmentfault.com/a/1190000004231995 CSS 百分比 padding 实现图片固定比例：https://www.zhangxinxu.com/wordpress/2017/08/css-percent-padding-image-layout/ 几种 Cache-Control 区别：https://zhuanlan.zhihu.com/p/55623075

React 生态#

React 新官网：https://zh-hans.react.dev/ create-react-app：https://create-react-app.dev/

开发框架：

SSR 框架 Next.js：https://nextjs.org/docs SSR 框架 SSR-RC：https://doc.ssr-fc.com/ 前端应用框架 Umi.js：https://umijs.org/ 组件库开发框架 Dumi.js：https://d.umijs.org/

常用工具：

路由 react-router：https://reactrouter.com/ 最好的状态管理 Zustand：https://github.com/pmndrs/zustand SWR：https://swr.vercel.app/zh-CN （外网访问） hooks 工具 ahooks：https://ahooks.gitee.io/zh-CN hooks 工具 react-use：https://github.com/streamich/react-use 定制 head 标签 react-helmet ：https://github.com/nfl/react-helmet 表单控件管理 react-hook-form：https://react-hook-form.com/ 异步组件 @loadable：https://loadable-components.com/ 取代 classnames 的工具：https://www.npmjs.com/package/clsx redux 功能增强 @redux/toolkit：https://redux-toolkit.js.org/ use-upgrade 检测网站是否有新版本：https://www.npmjs.com/package/use-upgrade （给自己的库打个广告） 可拖拽方案：https://www.npmjs.com/package/react-draggable 拖拽放置方案：https://react-dnd.github.io/react-dnd/docs/overview 最好的拖拽放置方案：https://react-beautiful-dnd.netlify.app/ 拖拽排序方案：https://clauderic.github.io/react-sortable-hoc/ 滚动到底加载方案：https://www.npmjs.com/package/react-infinite-scroll-component 优质的 Toast 库：https://react-hot-toast.com/ 头像裁剪：https://advanced-cropper.github.io/react-advanced-cropper/ antd 图片裁剪：https://www.npmjs.com/package/antd-img-crop react-joyride 新手引导：https://github.com/gilbarbara/react-joyride （通用工具一节还有更多） tours 新手引导：https://www.react.tours/ （通用工具一节还有更多） 代码渲染 demo 演示：https://formidable.com/open-source/react-live/ markdown 渲染：https://www.npmjs.com/package/react-markdown

样式与动效：

CSS-In-JS 方案 @emotion：https://emotion.sh/ CSS-In-JS 方案 styled-components：https://styled-components.com/ CSS-In-JS 方案 polished：https://polished.js.org/ CSS-In-JS 方案 jss：https://cssinjs.org/ Ant Motion 动效规范（用到 6 个库）：https://motion.ant.design/index-cn React Spring 动效库：https://www.react-spring.dev/ Framer Motion 动效库：https://www.framer.com/motion/ 各种 loading：https://www.davidhu.io/react-spinners/ 各种 Icon：https://react-icons.github.io/react-icons

外部插件：

cra 定制 customize-cra：https://github.com/arackaf/customize-cra cra 定制 react-app-rewired：https://github.com/timarney/react-app-rewired/ cra 定制 craco：https://craco.js.org/

UI 库：

Material UI：https://mui.com/ （配套使用：https://notistack.com/ 。另外 mui 适配了移动端） Ant Design：https://ant-design.antgroup.com/index-cn （移动端：https://mobile.ant.design/） TDesign（腾讯）：https://tdesign.tencent.com/ （含移动端组件） Semi UI（抖音）：https://semi.design/zh-CN/ Arco Design（字节）：https://arco.design/ Fluent UI（微软）：https://react.fluentui.dev/ Primer Design（GitHub）：https://primer.style/design/ Semantic UI：https://semantic-ui.com/ Blueprint UI：https://blueprintjs.com/ Chakra UI：https://chakra-ui.com/ React Suite：https://rsuitejs.com/zh/ （嗨普智能） Shadcn：https://ui.shadcn.com/ （无需安装，粘贴源码即可使用） Radix UI：https://www.radix-ui.com/ （分离样式的 UI 库，兼容 Next.js） React95 仿 Win95 风格：https://github.com/React95/React95 React95-io 仿 Win95 风格：https://github.com/react95-io/React95

移动端 UI 库：

Nut UI（京东）：https://nutui.jd.com/h5/react/2x/#/zh-CN/guide/intro-react Zarm Design（众安）：https://zarm.gitee.io/ WeUI React（腾讯）：https://weui.github.io/react-weui/docs/ Vant React（有赞）：https://react-vant.3lang.dev/ （建议外网访问） Quarkd（哈啰）：https://react-quarkd.hellobike.com/ Arco Design Mobile（字节）：https://arco.design/mobile/react

Vue 生态#

官方文档：https://cn.vuejs.org/ create-vue：https://github.com/vuejs/create-vue Vue CLI（推荐改用 create-vue）：https://cli.vuejs.org/zh/ Vue Router：https://router.vuejs.org/zh/ Vue Loader：https://vue-loader.vuejs.org/zh/ 状态管理 Pinia：https://pinia.vuejs.org/ Vuex（推荐改用 Pinia）：https://vuex.vuejs.org/zh/ Vue Test Utils 测试套件：https://test-utils.vuejs.org/

开发框架：

SSR 框架 Nuxt.js：https://nuxt.com/ 小程序开发 vue-mini：https://vuemini.org/

常用工具：

vue-use：https://vueuse.org/ Vue 的组件库文档方案：https://github.com/vuese/vuese 滚动区方案：https://github.com/ustbhuangyi/better-scroll ncform 动态表单：https://github.com/ncform/ncform form-create 动态表单：http://www.form-create.com/v2/ mini-vue 实现最简 vue3 模型：https://github.com/cuixiaorui/mini-vue 头像裁剪：https://advanced-cropper.github.io/vue-advanced-cropper/ vue-tour 新手引导：https://www.npmjs.com/package/vue-tour （通用工具一节还有更多） mavon 一款 markdown 渲染和编辑工具：https://github.com/hinesboy/mavonEditor quill 的 vue 版：https://github.surmon.me/vue-quill-editor 几款组件推荐：https://segmentfault.com/a/1190000037650043 基于 Vue 和 bpmn.js 的流程图制作工具：https://miyuesc.github.io/process-designer/ 页面标题：https://github.com/vinicius73/vue-page-title

UI 库：

Element（vue2）：https://element.eleme.cn/ Element Plus（vue3）：https://element-plus.org/zh-CN/ TDesign（腾讯）：https://tdesign.tencent.com/ （含移动端组件） Arco Design（字节）：https://arco.design/ DevUI（华为）：https://vue-devui.github.io/ Ant Design Vue：https://antdv.com/docs/vue/introduce-cn iView：https://www.iviewui.com/ Naive UI：https://www.naiveui.com/zh-CN/os-theme Vue Material：https://www.creative-tim.com/vuematerial/ Vuetify（也是 Material 风格）：https://vuetifyjs.com/zh-Hans/ （含移动端组件） Quasar（也是 Material 风格）https://quasar.dev/ Hey UI：https://v2.heyui.top/ Lay UI Vue：http://www.layui-vue.com/ Shadcn UI Vue：https://www.shadcn-vue.com/ （无需安装） Radix UI Vue：https://www.radix-vue.com/ （兼容 Nuxt.js）

移动端 UI 库：

Vant UI（有赞）：https://vant-ui.github.io/vant/ Quarkd（哈啰）：https://vue-quarkd.hellobike.com/ mui（uniapp）：https://dev.dcloud.net.cn/mui/ Mand Mobile（滴滴）：https://didi.github.io/mand-mobile/ Vux：https://vux.li/

Node.js 生态#

开发框架：

Nest.js：https://nestjs.com/ Nest.js 文档中文翻译：https://docs.nestjs.cn/ Egg.js：https://eggjs.org/zh-cn/ 微服务框架 Seneca：https://senecajs.org/ Daruk 基于 koa 的 IoC 开发工具：https://darukjs.com/

常用工具：

强大的 ORM 工具 Prisma：https://prisma.yoga/ Prisma 配合 Nest.js：https://www.npmjs.com/package/nestjs-prisma Prisma 软删除：https://www.npmjs.com/package/prisma-soft-delete-middleware 单文件数据库 LowDB：https://github.com/typicode/lowdb mysql 数据库连接：https://github.com/mysqljs/mysql mongoose 连接 MongoDB 和 ORM：https://www.npmjs.com/package/mongoose MongoDB 的 JS 驱动：https://mongodb.github.io/node-mongodb-native/ MongoDB 的查询：https://www.mongodb.com/docs/manual/crud/ Redis SDK：https://www.npmjs.com/package/ioredis 代码操作 Git：https://github.com/steveukx/git-js 代码操作 SSHKey：https://www.npmjs.com/package/sshpk yargs 用于开发 CLI 工具：https://yargs.js.org/ prompts 提供 CLI 交互式选单：https://www.npmjs.com/package/prompts @inquirer/prompts 和 Vue-cli 同款交互式 CLI：https://www.npmjs.com/package/@inquirer/prompts chalk 控制台输出美化：https://www.npmjs.com/package/chalk 简单微服务：https://www.npmjs.com/package/micro canvas：https://www.npmjs.com/package/canvas fs 模块增强 fs-extra：https://www.npmjs.com/package/fs-extra chokidar 用于取代 fs 的 watch：https://github.com/paulmillr/chokidar 图片转换调整 sharp：https://github.com/lovell/sharp ulid 实现：https://github.com/aarondcohen/id128 微信 JSSDK：https://github.com/JasonBoy/wechat-jssdk 优秀的 ORM 工具集合：https://www.prisma.io/dataguide/database-tools/top-nodejs-orms-query-builders-and-database-libraries polyfill.io 根据 UA 自动切换垫片：https://polyfill.io/ pm2：https://github.com/Unitech/pm2 nodemon 可以看作简化版 pm2：https://nodemon.io/ restify 像 koa 一样的 RESTful API 工具：http://restify.com/ 获取 mime 类型用于上传对象存储：https://www.npmjs.com/package/mime

模板渲染引擎：

Nunjucks：https://mozilla.github.io/nunjucks/ EJS：https://ejs.bootcss.com/ Jade：https://jade-lang.com/ xtemplate：https://github.com/xtemplate/xtemplate/

小程序与其他跨端开发#

React 开发：

Taro（京东）：https://taro.zone/ Rax（阿里）：https://rax.js.org/ Remax（阿里）：https://github.com/remaxjs/remax （备用官网：https://remaxjs.wdchiphop.cn/） Framework7（阿里）：https://framework7.io/ （前身是 SUI，只支持 H5 到 App）

Vue 开发：

uni-app：https://uniapp.dcloud.net.cn/ Taro（京东）：https://taro.zone/ Framework7（阿里）：https://framework7.io/ （前身是 SUI，只支持 H5 到 App） vue-mini：https://vuemini.org/

相关工具：

echarts 的小程序版：https://github.com/ecomfe/echarts-for-weixin 小程序 types：https://www.npmjs.com/package/@types/wechat-miniprogram 小程序官方 CI 工具：https://www.npmjs.com/package/miniprogram-ci fly.js 通用请求库：https://wendux.github.io/dist/#/doc/flyio/readme uni-app 的 UI 库：https://www.uviewui.com/ 提供 Stomp.js 垫片支持：https://www.npmjs.com/package/mp-websocket-polyfill （给自己的库打个广告） WeUI 小程序原生版：https://github.com/Tencent/weui-wxss

技术摘录与案例：

小程序 Awesome：https://github.com/justjavac/awesome-wechat-weapp 小程序文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ 微信开放平台：https://open.weixin.qq.com/ 登录问题1：https://developers.weixin.qq.com/community/develop/doc/bd11f741bdc90138ccdb51fa4d4b9896 登录问题2：https://ruby-china.org/topics/32128 Websocket 和 Stomp.js 断连问题：https://developers.weixin.qq.com/community/develop/article/doc/00028457db8230ae22ebb525e56c13

通用工具#

全局 CSS 重置：https://github.com/sindresorhus/modern-normalize lodash 中文文档：https://www.lodashjs.com/ cnchar 汉字拼音笔画：https://theajack.github.io/cnchar/ 中国省市区 JSON：https://www.npmjs.com/package/china-division 微信 JSSDK：https://github.com/JasonBoy/wechat-jssdk 时间日期 dayjs：https://dayjs.gitee.io/docs/zh-CN/installation/installation 时间日期 moment：https://momentjs.com/ 时间日期函数式库 date-fns：https://date-fns.org/ 函数式编程 ramda：https://ramda.cn/docs/ ramda 扩展：https://char0n.github.io/ramda-adjunct/2.30.0/index.html query-string 功能相近但体积更小的 qs：https://www.npmjs.com/package/query-string 最强表格 AG-Grid 组件：https://www.ag-grid.com/ 最强富文本编辑器 CKEditor：https://ckeditor.com/ quill.js 轻量易用的富文本编辑器：https://quilljs.com/ wang editor 目前已支持 Vue 和 React：https://www.wangeditor.com/ 图片上传插件配合 CKEditor：https://www.npmjs.com/package/ckeditor5-custom-image-upload-adapter excel 显示：https://github.com/jspreadsheet/ce 操作和生成 excel 文件：https://sheetjs.com/ pdf.js 前端渲染 PDF：https://www.npmjs.com/package/pdfjs-dist docx-preview 前端渲染 word：https://www.npmjs.com/package/docx-preview LocalStorage 管理：https://www.npmjs.com/package/store2 Cookies 管理：https://www.npmjs.com/package/js-cookie Dexie.js 提供 IndexedDB 的封装：https://dexie.org/ （知乎介绍） Licia 有四百种工具函数的库：https://licia.liriliri.io/ stateshot 实现撤销与重做功能：https://github.com/gaoding-inc/stateshot yjs 二进制增量同步数据：https://docs.yjs.dev/ y-websocket 配合上面的 yjs 库：https://github.com/yjs/y-websocket y-quill 配合上面的 yjs 库：https://github.com/yjs/y-quill JSONPath：https://github.com/JSONPath-Plus/JSONPath Lerna 用于 monorepo：https://lerna.js.org/ workbox 用于 PWA：https://developer.chrome.com/docs/workbox/ Lexical 富文本（前身是 draft.js）：https://lexical.dev/ Minditor 富文本由国人开发且功能不错：https://minditor.dev/ xss 预防：https://jsxss.com/zh/index.html highlight.js 代码高亮：https://www.npmjs.com/package/highlight.js clipboard 剪贴板操作：https://www.npmjs.com/package/clipboard package.json 字段排序的 prettier 插件：https://github.com/shellscape/prettier-plugin-package object-code 获取对象的哈希：https://www.npmjs.com/package/object-code axios 重试插件：https://www.npmjs.com/package/axios-retry 前后端通用的 axios 缓存插件：https://www.npmjs.com/package/axios-cache-interceptor ArtPlayer 视频播放器：https://artplayer.org/ cbor2 一种更高效的字符串序列化方式：https://www.npmjs.com/package/cbor2

可视化工具：

echarts 图表：https://echarts.apache.org/zh/index.html elastic-charts 图表：https://elastic.github.io/elastic-charts/ Chart.js 图表：https://www.chartjs.org/ d3.js 实现 3D 图形与动画：https://d3js.org/ three.js 实现 3D 图形与动画：https://threejs.org/ 手绘风格数据图表：https://timqian.com/chart.xkcd/ 流程图工具 bpmn.io：https://bpmn.io/toolkit/bpmn-js/ 简单流程图工具：https://github.com/maxGraph/maxGraph 2D 地图工具：https://leafletjs.com/ API 和 jQuery 相似的动效库：http://velocityjs.org/ 使用 canvas 动态绘制线条：https://maxwellito.github.io/vivus/ html2canvas 生成分享图海报：https://html2canvas.hertzen.com/ 鼠标悬停视差效果：https://atroposjs.com/ driver.js 超强的新手引导：https://driverjs.com/ intro.js 新手引导：https://introjs.com/

移动端工具：

vconsole 虚拟控制台：https://www.npmjs.com/package/vconsole callapp-lib 唤起 App：https://www.npmjs.com/package/callapp-lib isMobile.js 判断移动端：https://www.npmjs.com/package/ismobilejs

Devops 相关#

Docker：

Docker Hub：https://hub.docker.com/ Docker Compose 规范：https://docs.docker.com/compose/compose-file/ Dockerfile 规范：https://docs.docker.com/engine/reference/builder/ Docker 从入门到实践：https://yeasy.gitbook.io/docker_practice/ Dockerfile 的 CMD 与 ENTERPOINT 区别：https://myapollo.com.tw/blog/docker-cmd-vs-entrypoint/ Dockerfile 的 COPY 与 ADD 区别：https://www.cnblogs.com/sparkdev/p/9573248.html Docker API：https://docs.docker.com/engine/api/v1.42/ 将 Docker 指令转为 compose：https://www.composerize.com/ WSL 与 Docker：https://learn.microsoft.com/zh-cn/windows/wsl/wsl-config buildx 使用 BuildKit 来增强 docker build：https://github.com/docker/buildx

CI/CD 与 OPS：

Drone CI：https://www.drone.io/ Jenkins CI：https://www.jenkins.io/ Flow CI：https://flowci.github.io/ karma 多浏览器测试：https://www.npmjs.com/package/karma codecov 测试覆盖率：https://app.codecov.io/ 测试报告工具 istanbul（现在叫 nyc）：https://istanbul.js.org/ acme.sh 自动续约证书：https://github.com/acmesh-official/acme.sh 自搭 npm 私有库：https://verdaccio.org/zh-cn/ LiquiBase 数据库 shcema 管理与同步：https://www.liquibase.org/ frp 内网穿透：https://github.com/fatedier/frp

Nginx：

官方文档： http://www.nginx.cn/doc/ 图形化配置（再写一遍）：https://nginxconfig.io/ 入门教程： https://xuexb.github.io/learn-nginx/ 模块参考： https://tengine.taobao.org/nginx_docs/cn/docs/ NginxProxyManager：https://nginxproxymanager.com/

IT 服务#

Cloudflare：https://www.cloudflare.com/ （建议外网访问） Cloudns：https://www.cloudns.net/ API 服务 API Space：https://www.apispace.com/#/ 聚合数据：https://www.juhe.cn/ Lean Cloud 国际版：https://console.leancloud.app/

镜像源：

中科大：https://mirrors.ustc.edu.cn/ 清华大学：https://mirrors.tuna.tsinghua.edu.cn/ 清华 homebrew 源：https://mirrors.tuna.tsinghua.edu.cn/help/homebrew/ 阿里 npmmirror：https://npmmirror.com/ 阿里镜像：https://developer.aliyun.com/mirror/ 腾讯源：https://mirrors.cloud.tencent.com/ 南大镜像：https://mirror.nju.edu.cn/

其它#

itellyou 可用于下载 Windows 镜像：http://msdn.itellyou.cn/ GitHub 官方文档：https://docs.github.com/zh 适合旅行和远程工作的城市：https://nomadlist.com/ 网站时光机： https://archive.org/ （外网访问） iqdb 图片搜索： http://iqdb.org/ （外网访问） SauceNAO 图片搜索： http://saucenao.com/ （外网访问） Youtube 视频下载： https://www.videosolo.com/zh-CN/online-video-downloader/JSFuck jsfuck 代码加密： http://www.jsfuck.com/ JS 代码颜文字加密： http://utf-8.jp/public/aaencode.html JS 混淆加密转码： https://www.css-js.com/ 与佛论禅加密： http://www.keyfc.net/bbs/tools/tudoucode.aspx （外网访问） 玛丽苏加密： https://sulian-blog.com/marysue/ （知乎苏莉安） 互联网黑话生成器：http://www.shadowingszy.top/text-generator/index.html 狗屁不通文章生成器：https://suulnnka.github.io/BullshitGenerator/index.html 帮你激活 Windows：https://github.com/massgravel/Microsoft-Activation-Scripts 如何用 U 盘安装大于 4G 的 ISO 镜像：https://tieba.baidu.com/p/5494871275