我的收藏

学习资源

• 清华镜像源：https://mirrors.tuna.tsinghua.edu.cn/
• 安装 MongoDB：https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-os-x/
• 安装 MySQL：https://blog.csdn.net/guorenhao/article/details/124508441
• Mac 切换 HomeBrew 镜像源：https://cloud.tencent.com/developer/article/1614039
• 设计模式：https://refactoringguru.cn/design-patterns
• 阮一峰 ES6：https://es6.ruanyifeng.com/
• URL 类图中六种箭头的含义：https://blog.csdn.net/qq_20936333/article/details/86773664
• 阮一峰 JavaScript：https://wangdoc.com/javascript/
• 阮一峰 ES6：https://wangdoc.com/es6/
• 阮一峰 TypeScript：https://wangdoc.com/typescript/
• 其它教程（ssh、dom、c）可参考：https://wangdoc.com/，github：https://github.com/wangdoc
• 在线图书馆：https://zh.zlibrary-sg.se/?signAll=1&ts=1124
• https 如何保障安全可靠：https://cloud.tencent.com/developer/article/1652093
• socket 聊天室：https://github.com/plhwin/nodejs-socketio-chat
• 前端面试题库：https://github.com/febobo/web-interview
• typescript 类型体操：https://github.com/type-challenges/type-challenges
• vue 源码分析：https://ustbhuangyi.github.io/vue-analysis/
• vue 项目实战：
  • 饿了么外卖 App：https://github.com/ustbhuangyi/vue-sell
• 在线学习网站（w3schools）：https://www.w3schools.com/
• 大部分中文技术网站：https://nodejs.cn/
• javascript 学习网站（javascript.info）：https://javascript.info/
• 前端面经：https://github.com/paddingme/Front-end-Web-Development-Interview-Question
• 前端知识文档：https://github.com/tsejx/tsejx
• 前端练手项目：https://github.com/fengxianqi/front_end-demos
• 前端练手项目：https://github.com/fengxianqi/front_end-demos
• 前端知识笔记：https://github.com/tsejx/tsejx
• Flutter 中文网：https://docs.flutter.cn/get-started/install
• 华为山海社区开源地址：https://github.com/originjs
• nodejs 用 Chrome 开发者工具进行调试（核心：node --inspect xxx.js）：https://nodejs.org/en/learn/getting-started/debugging
• umi，react 社区框架：https://github.com/umijs/umi
• 大佬网站（张鑫旭）：https://www.zhangxinxu.com/
• node 自定义命令行工具：https://juejin.cn/post/7233391595306647609
• node 部署（MDN 推荐，数字海洋）：https://www.digitalocean.com/
• vue 后台管理模板：https://github.com/vbenjs/vue-vben-admin
• 算法动画图解（Hello 算法）：https://github.com/krahets/hello-algo
• ts 中文手册：https://github.com/zhongsp/TypeScript
• 免费的网络服务合集：https://github.com/awesome-selfhosted/awesome-selfhosted
• 开发者学习路线：https://github.com/kamranahmedse/developer-roadmap
• 软件工程师成长路线：https://github.com/jwasham/coding-interview-university
• 许多编程语言的免费学习资源：https://github.com/EbookFoundation/free-programming-books
• 免费开源的代码学习课程：https://github.com/freeCodeCamp/freeCodeCamp
• 算法刷题套路（fucking-algorithm）：https://github.com/labuladong/fucking-algorithm
• JavaGuide 面试指南：https://github.com/Snailclimb/JavaGuide
• 前端安全认证（Web Authentication）：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Authentication_API
• 前端实时通信技术（直播）（Web RTC）：https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API
• 前端权限控制（Permission API）：https://developer.mozilla.org/zh-CN/docs/Web/API/Permissions_API
• AST 语法学习工具 ast explorer：https://astexplorer.net/
• package.json 中 browserslist 如何书写？官方文档：https://browsersl.ist/
• 基于 Rust 的前端构建工具 swc：https://github.com/swc-project/swc
• 印记中文：https://docschina.org/
• ThreeJs 学习：https://discoverthreejs.com/zh/book/introduction/
• amandakelake 个人博客（前端面试）：https://github.com/amandakelake/blog
• Fiddler 使用教程（瘦瘦摇）：https://blog.csdn.net/weixin_44330336/article/details/125522082
• SSO 单点登录详解（JavaGuide）：https://javaguide.cn/system-design/security/sso-intro.html

工具

• 桌面贴图：https://www.snipaste.com/

• Windows 终端：https://github.com/microsoft/terminal

• 强大的文本工具，支持文档对比：https://www.ultraedit.com/

• 做笔记工具：https://obsidian.md/

• 网络工具（ipop.exe，可做本地代理）介绍：https://blog.csdn.net/weixin_42466857/article/details/113007198

• 在线画图工具（手绘风格）：https://excalidraw.com/

• excalidraw ”桌面版“：https://github.com/revezone/revezone/releases

• 在线画图工具，drawio（风格中规中矩）：https://app.diagrams.net/

• 获取随机图片：https://picsum.photos/

• 和 npm、yarn 类似的包管理工具：https://pnpm.io/

• Node 热更新工具：

  • nodemon：https://nodemon.io/
  • node-dev：https://github.com/fgnass/node-dev#readme
  • pm2：https://github.com/Unitech/pm2

• 网页模板（htmlrev）：https://htmlrev.com/

• AI 聊天：

  • https://openai.com/blog/chatgpt/
  • https://ai.hohoo.fun/
  • https://www.coze.com/

• 内网穿透工具：花生壳

• 原型、设计工具（与 Sketch、Figma 类似）

  • Pixso: https://pixso.cn/
  • 即时设计: https://js.design/

• 连接远程服务器：

  • SSH 连接：https://www.netsarang.com/en/xshell/
  • VNC 连接：https://www.realvnc.com/en/connect/download/viewer/

• Vercel 网站托管平台：https://vercel.com/

• Tooling.Report 谷歌打包工具比较：https://bundlers.tooling.report/

• 面试鸭，面试刷题网站：https://github.com/liyupi/mianshiya

• 篡改猴，修改网页的扩展程序：https://chromewebstore.google.com/detail/%E7%AF%A1%E6%94%B9%E7%8C%B4/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=zh-CN

• 沉浸式翻译 Chrome 扩展程序：https://chromewebstore.google.com/detail/%E6%B2%89%E6%B5%B8%E5%BC%8F%E7%BF%BB%E8%AF%91-%E7%BD%91%E9%A1%B5%E7%BF%BB%E8%AF%91%E6%8F%92%E4%BB%B6-pdf%E7%BF%BB%E8%AF%91-%E5%85%8D%E8%B4%B9/bpoadfkcbjbfhfodiogcnhhhpibjhbnh?utm_source=ext_app_menu

• 查看 Chrome 中的 ServiceWorker、SharedWorker、扩展等：chrome://inspect/#devices

• 拦截网页广告 AdBlock 扩展程序：https://chromewebstore.google.com/detail/adblock-%E6%8B%A6%E6%88%AA%E6%95%B4%E4%B8%AA%E7%BD%91%E7%BB%9C%E7%9A%84%E5%B9%BF%E5%91%8A/gighmmpiobklfepjocnamgkkbiglidom

• 个人 GPT 搭建（AutoGPT）：https://github.com/Significant-Gravitas/AutoGPT

• 通过文字描述创建视频的 AI（Sora）：https://openai.com/index/sora/

• 前端“幻灯片”样式展示：https://github.com/hakimel/reveal.js

• 前端首页高级效果 gsap：https://github.com/greensock/GSAP

• AI 代码编辑器：https://www.cursor.com/

• 在线免费使用的 api mock 接口，支持自定义数据格式：https://jsonplaceholder.typicode.com/

• Apifox 一站式接口调试工具：https://apifox.com/

• Postman 接口调试工具：https://www.postman.com/

• 手写风格 UML 画图（Excalidraw）：https://excalidraw.com/

NPM

• 命令行样式（chalk）：https://github.com/chalk/chalk#readme
• Node 后端框架（Nest）：
  • https://docs.nestjs.com/
  • https://docs.nestjs.cn/10/firststeps
• Node 后端框架（Express）：
  • https://expressjs.com/
  • https://expressjs.com/zh-cn/
• express 请求日志中间件（morgan）：https://github.com/expressjs/morgan#readme
• express cookie 处理中间件（cookie-parser）：https://github.com/expressjs/cookie-parser#readme
• express session 处理中间件（express-session）：https://github.com/expressjs/session#readme
• 前端在线表格（handsontable）：https://github.com/handsontable/handsontable
• 喝彩特效（canvas-confetti）：https://github.com/catdad/canvas-confetti
• 配置文件工具（dotenv）：https://github.com/motdotla/dotenv#readme
• node 执行 typescript（ts-node）：https://github.com/TypeStrong/ts-node
• socket 通信：https://socket.io/
• 视频播放器（video.js）：https://github.com/videojs/video.js
• 全屏操作（MDN, fullscreen）：https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API
• 全屏操作第三方库（screenfull）：https://github.com/sindresorhus/screenfull
• 移动端网页调试 VConsole：https://github.com/Tencent/vConsole
• 更方便的方式使用不可变状态 immer：https://github.com/immerjs/immer
• 消除命令行运行差异（cross-env）：https://github.com/kentcdodds/cross-env
• 更优雅地获取命令行传入的参数（minimist）：https://github.com/minimistjs/minimist
• Promise 列表并发控制（p-limit）：https://github.com/sindresorhus/p-limit
• mock 数据（mockjs）：https://github.com/nuysoft/Mock
• highlight.js 代码高亮：https://github.com/highlightjs/highlight.js
• marked markdown 编译转换：https://github.com/markedjs/marked
• AntV 蚂蚁数据可视化方案：https://antv.antgroup.com/
  • G6（关系图）：https://g6.antv.antgroup.com/
  • X6（流程图）：https://x6.antv.antgroup.com/
  • 还有 G2（统计图表）、S2（多维表格）、L7（地图）、F2（移动统计图）、F6（移动关系图）、F7（移动地图）
• monaco-editor 浏览器代码编辑器：https://github.com/microsoft/monaco-editor
• cherryio 高效操作 HTML、XML：https://github.com/cheeriojs/cheerio
• libphonenumber 转换、格式化、验证国际手机号码：https://github.com/google/libphonenumber
• clipboard 复制到剪切板：https://github.com/zenorocha/clipboard.js
• resize-observer 高效监听 DOM 元素变化：https://github.com/juggle/resize-observer
• xlsx 前端处理表格工具：https://github.com/SheetJS/sheetjs
• uuid uuid 生成工具：https://github.com/uuidjs/uuid
• tslib 降低编译体积，可参考：https://juejin.cn/post/7136104350912348174
• sortable 页面拖拽处理工具：https://github.com/SortableJS/Sortable
• single-spa 微前端路由处理：https://github.com/single-spa/single-spa
• single-spa-angular 使用 Angular 构建 single-spa 应用：https://github.com/single-spa/single-spa-angular
• css 初始化标准库，和 normalize.css 类似：https://github.com/csstools/sanitize.css
• qs URL query 转换工具：https://github.com/ljharb/qs
• qiankun 微前端构建工具：https://github.com/umijs/qiankun
• moment 日期处理工具：https://github.com/moment/moment
• luxon 日期处理工具：https://github.com/moment/luxon
• lodash JS 工具函数：https://github.com/lodash/lodash
• ky 基于 fetch 的网络请求：https://github.com/sindresorhus/ky
• json5 json 扩展处理：https://github.com/json5/json5
• js-cookie 处理浏览器 cookie：https://github.com/js-cookie/js-cookie
• js-base64 处理 base64：https://github.com/dankogai/js-base64
• immer 创建不可变状态：https://github.com/immerjs/immer
• jsdiff 文本对比工具：https://github.com/kpdecker/jsdiff
• d3 可基于 Canvas、SVG、HTML 可视化展示数据：https://github.com/d3/d3
• core-js JS 标准库：https://github.com/zloirock/core-js
• clsx 动态拼接 CSS 类名：https://github.com/lukeed/clsx
• CodeMirror 代码编译器：https://github.com/codemirror/dev
• ajv JSON schema 校验工具：https://github.com/ajv-validator/ajv
• amimate.css css 动画汇总：https://github.com/animate-css/animate.css
• 前端展示数据公式 MathML：https://developer.mozilla.org/zh-CN/docs/Web/MathML
• 国际化方案（i18n）：
  • vue-i18n：https://github.com/kazupon/vue-i18n
  • react-i18next：https://github.com/i18next/react-i18next
  • ngx-translate：https://github.com/ngx-translate/core
• 非 CSS 动画方案：
  • lottie：https://github.com/airbnb/lottie-web
  • svga：https://github.com/svga/SVGAPlayer-Web-Lite
  • 视频
• 后端管理系统：
  • vue-element-plus-admin：https://github.com/zxwk1998/vue-admin-better
• Algolia 搜索：https://github.com/algolia/instantsearch
• 拼写检查（cSpell）：https://cspell.org/
• 代码着色（highlight.js）：https://highlightjs.org/
• 代码平台编排系统（interact.js）：https://interactjs.io/
• GSAP 动画库（官网做炫酷的动画效果）：https://gsap.com/
• node 文件匹配模块（glob，例如 angular.json 配置）：https://github.com/isaacs/node-glob

技术概念

• SOLID 原则：https://zh.wikipedia.org/wiki/SOLID_(%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E8%AE%BE%E8%AE%A1)
• uuid：通用唯一识别码（英语：Universally Unique Identifier，缩写：UUID）是用于计算机体系中以识别信息的一个 128 位标识符
• 雪花 id：nowflake 是 Twitter 开源的分布式 ID 生成算法，结果是 64 bit 的 Long 类型的 ID，有着全局唯一和有序递增的特点

VSCode 扩展程序

• Code Spell Checker：代码拼写检查

浏览器扩展程序

• 沉浸式翻译：网站英文翻译，非常强大