# bookmarks **Repository Path**: baizixv/bookmarks ## Basic Information - **Project Name**: bookmarks - **Description**: 个人收藏夹 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-07-27 - **Last Updated**: 2021-03-02 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Baizixv Bookmarks 在线地址：https://baizixv.github.io/bookmarks gitee 访问地址(github.io 有时候在国内访问会很慢)：https://baizixv.gitee.io/bookmarks **本项目为个人技术收藏集，里面会不定期分享一些作者平时用到的一些库，或者常用的网站和小工具.** **如果你有好的推荐你可以提 issue 或者 pr 来告诉作者** --- - [API 官网](#api-%E5%AE%98%E7%BD%91) * [1.API 查询网站](#1api-%E6%9F%A5%E8%AF%A2%E7%BD%91%E7%AB%99) * [2.前端常用](#2%E5%89%8D%E7%AB%AF%E5%B8%B8%E7%94%A8) + [版本控制系统](#%E7%89%88%E6%9C%AC%E6%8E%A7%E5%88%B6%E7%B3%BB%E7%BB%9F) + [运行时](#%E8%BF%90%E8%A1%8C%E6%97%B6) + [包管理工具](#%E5%8C%85%E7%AE%A1%E7%90%86%E5%B7%A5%E5%85%B7) + [前端工程化](#%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96) - [1.脚手架](#1%E8%84%9A%E6%89%8B%E6%9E%B6) - [2.构建工具](#2%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7) - [3.打包工具](#3%E6%89%93%E5%8C%85%E5%B7%A5%E5%85%B7) - [4.格式化工具 & 其他](#4%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%B7%A5%E5%85%B7--%E5%85%B6%E4%BB%96) - [5.持续集成工具](#5%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90%E5%B7%A5%E5%85%B7) + [语言，模板与框架](#%E8%AF%AD%E8%A8%80%E6%A8%A1%E6%9D%BF%E4%B8%8E%E6%A1%86%E6%9E%B6) + [兼容性](#%E5%85%BC%E5%AE%B9%E6%80%A7) + [其他](#%E5%85%B6%E4%BB%96) + [javascript 库与函数式编程库](#javascript-%E5%BA%93%E4%B8%8E%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BC%96%E7%A8%8B%E5%BA%93) + [可视化相关](#%E5%8F%AF%E8%A7%86%E5%8C%96%E7%9B%B8%E5%85%B3) + [静态站点生成器 && 文档管理](#%E9%9D%99%E6%80%81%E7%AB%99%E7%82%B9%E7%94%9F%E6%88%90%E5%99%A8--%E6%96%87%E6%A1%A3%E7%AE%A1%E7%90%86) * [3.MongoDB 相关](#3mongodb-%E7%9B%B8%E5%85%B3) * [4.GraphQL](#4graphql) * [其他](#%E5%85%B6%E4%BB%96-1) - [实用网站](#%E5%AE%9E%E7%94%A8%E7%BD%91%E7%AB%99) * [搜索引擎](#%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E) * [云平台](#%E4%BA%91%E5%B9%B3%E5%8F%B0) * [代码托管](#%E4%BB%A3%E7%A0%81%E6%89%98%E7%AE%A1) * [文档编辑](#%E6%96%87%E6%A1%A3%E7%BC%96%E8%BE%91) * [协同平台](#%E5%8D%8F%E5%90%8C%E5%B9%B3%E5%8F%B0) * [交流社区 && 技术论坛 && 写作平台](#%E4%BA%A4%E6%B5%81%E7%A4%BE%E5%8C%BA--%E6%8A%80%E6%9C%AF%E8%AE%BA%E5%9D%9B--%E5%86%99%E4%BD%9C%E5%B9%B3%E5%8F%B0) * [收集的网站或收藏册](#%E6%94%B6%E9%9B%86%E7%9A%84%E7%BD%91%E7%AB%99%E6%88%96%E6%94%B6%E8%97%8F%E5%86%8C) * [算法](#%E7%AE%97%E6%B3%95) * [Github](#github) * [在线编程，创建项目网站](#%E5%9C%A8%E7%BA%BF%E7%BC%96%E7%A8%8B%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE%E7%BD%91%E7%AB%99) * [开发](#%E5%BC%80%E5%8F%91) * [设计](#%E8%AE%BE%E8%AE%A1) * [有趣](#%E6%9C%89%E8%B6%A3) * [交互](#%E4%BA%A4%E4%BA%92) * [产品](#%E4%BA%A7%E5%93%81) * [实用](#%E5%AE%9E%E7%94%A8) * [Talk](#talk) * [面试相关](#%E9%9D%A2%E8%AF%95%E7%9B%B8%E5%85%B3) + [0.面试题](#0%E9%9D%A2%E8%AF%95%E9%A2%98) + [1.熟人内推](#1%E7%86%9F%E4%BA%BA%E5%86%85%E6%8E%A8) + [2.公司招聘官网](#2%E5%85%AC%E5%8F%B8%E6%8B%9B%E8%81%98%E5%AE%98%E7%BD%91) + [3.面试平台](#3%E9%9D%A2%E8%AF%95%E5%B9%B3%E5%8F%B0) * [第三方平台](#%E7%AC%AC%E4%B8%89%E6%96%B9%E5%B9%B3%E5%8F%B0) * [其他](#%E5%85%B6%E4%BB%96-2) - [常用库与工具](#%E5%B8%B8%E7%94%A8%E5%BA%93%E4%B8%8E%E5%B7%A5%E5%85%B7) * [常用库](#%E5%B8%B8%E7%94%A8%E5%BA%93) + [包管理工具](#%E5%8C%85%E7%AE%A1%E7%90%86%E5%B7%A5%E5%85%B7-1) + [收集库](#%E6%94%B6%E9%9B%86%E5%BA%93) + [通用库](#%E9%80%9A%E7%94%A8%E5%BA%93) + [Css && 动画](#css--%E5%8A%A8%E7%94%BB) + [React](#react) + [Vue](#vue) + [工具库](#%E5%B7%A5%E5%85%B7%E5%BA%93) + [命令行相关](#%E5%91%BD%E4%BB%A4%E8%A1%8C%E7%9B%B8%E5%85%B3) + [文件处理相关](#%E6%96%87%E4%BB%B6%E5%A4%84%E7%90%86%E7%9B%B8%E5%85%B3) + [开发调试相关](#%E5%BC%80%E5%8F%91%E8%B0%83%E8%AF%95%E7%9B%B8%E5%85%B3) + [Webpack](#webpack) + [移动端](#%E7%A7%BB%E5%8A%A8%E7%AB%AF) + [性能优化](#%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96) + [请求处理](#%E8%AF%B7%E6%B1%82%E5%A4%84%E7%90%86) + [工程化相关](#%E5%B7%A5%E7%A8%8B%E5%8C%96%E7%9B%B8%E5%85%B3) * [插件](#%E6%8F%92%E4%BB%B6) - [常用工具](#%E5%B8%B8%E7%94%A8%E5%B7%A5%E5%85%B7) * [通用工具](#%E9%80%9A%E7%94%A8%E5%B7%A5%E5%85%B7) * [技术工具](#%E6%8A%80%E6%9C%AF%E5%B7%A5%E5%85%B7) * [浏览器](#%E6%B5%8F%E8%A7%88%E5%99%A8) * [VS Code](#vs-code) + [通用](#%E9%80%9A%E7%94%A8) + [主题](#%E4%B8%BB%E9%A2%98) + [字体](#%E5%AD%97%E4%BD%93) * [Chrome 扩展](#chrome-%E6%89%A9%E5%B1%95) * [编辑器和 Terminal](#%E7%BC%96%E8%BE%91%E5%99%A8%E5%92%8C-terminal) * [zsh 插件](#zsh-%E6%8F%92%E4%BB%B6) * [开发常用软件](#%E5%BC%80%E5%8F%91%E5%B8%B8%E7%94%A8%E8%BD%AF%E4%BB%B6) * [其他有趣的工具](#%E5%85%B6%E4%BB%96%E6%9C%89%E8%B6%A3%E7%9A%84%E5%B7%A5%E5%85%B7) * [录制](#%E5%BD%95%E5%88%B6) * [Ubuntu](#ubuntu) * [Mac](#mac) * [在线解析工具](#%E5%9C%A8%E7%BA%BF%E8%A7%A3%E6%9E%90%E5%B7%A5%E5%85%B7) - [教程与书籍](#%E6%95%99%E7%A8%8B%E4%B8%8E%E4%B9%A6%E7%B1%8D) * [1.书籍](#1%E4%B9%A6%E7%B1%8D) + [Book](#book) + [JavaScript && ECMAScript && TypeScript](#javascript--ecmascript--typescript) + [Html && CSS](#html--css) + [React &&　 Vue](#react-%E3%80%80-vue) + [Node](#node) + [函数式编程](#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BC%96%E7%A8%8B) + [移动端](#%E7%A7%BB%E5%8A%A8%E7%AB%AF-1) + [信息安全](#%E4%BF%A1%E6%81%AF%E5%AE%89%E5%85%A8) + [Python](#python) + [其他](#%E5%85%B6%E4%BB%96-3) * [2.实践教程](#2%E5%AE%9E%E8%B7%B5%E6%95%99%E7%A8%8B) * [3.视频教程 && 交互式学习](#3%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B--%E4%BA%A4%E4%BA%92%E5%BC%8F%E5%AD%A6%E4%B9%A0) * [4.网络课程平台](#4%E7%BD%91%E7%BB%9C%E8%AF%BE%E7%A8%8B%E5%B9%B3%E5%8F%B0) - [文章收集](#%E6%96%87%E7%AB%A0%E6%94%B6%E9%9B%86) * [浏览器](#%E6%B5%8F%E8%A7%88%E5%99%A8-1) * [编程](#%E7%BC%96%E7%A8%8B) * [React](#react-1) * [Vue](#vue-1) * [前端](#%E5%89%8D%E7%AB%AF) * [GraphQL](#graphql) * [职业发展](#%E8%81%8C%E4%B8%9A%E5%8F%91%E5%B1%95) * [视频](#%E8%A7%86%E9%A2%91) * [其它](#%E5%85%B6%E5%AE%83) * [小程序](#%E5%B0%8F%E7%A8%8B%E5%BA%8F) * [node](#node) * [网络](#%E7%BD%91%E7%BB%9C) * [AST](#ast) * [交互](#%E4%BA%A4%E4%BA%92-1) - [资源网站](#%E8%B5%84%E6%BA%90%E7%BD%91%E7%AB%99) * [设计相关](#%E8%AE%BE%E8%AE%A1%E7%9B%B8%E5%85%B3) * [技术相关](#%E6%8A%80%E6%9C%AF%E7%9B%B8%E5%85%B3) * [前端开发](#%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91) * [技术书籍](#%E6%8A%80%E6%9C%AF%E4%B9%A6%E7%B1%8D) * [其他](#%E5%85%B6%E4%BB%96-4) - [友情链接](#%E5%8F%8B%E6%83%85%E9%93%BE%E6%8E%A5) * [其他人的收藏](#%E5%85%B6%E4%BB%96%E4%BA%BA%E7%9A%84%E6%94%B6%E8%97%8F) * [其他](#%E5%85%B6%E4%BB%96-5) # API 官网 **这里主要记录一下经常使用的 API 官网。** ## 1.API 查询网站 - [**MDN**](https://developer.mozilla.org/zh-CN/) - [**devdocs**](https://devdocs.io/) 快速 API 文档搜索工具 - [**docschina**](https://docschina.org/) 印记中文,深入挖掘国外前端新领域,为中国 Web 前端开发人员提供优质文档 - [**腾讯云开发者手册**](https://cloud.tencent.com/developer/doc/1096) 开发者手册是云+社区开发者共同维护的一个提供中文化编程基础技术教程的知识平台，提供了 HTML、CSS、JavaScript、Python、Ruby、C、Go 等各种编程语言的基础知识 - [**WebPlatform Docs**](https://webplatform.github.io/docs/)一个社区驱动的网站，旨在成为 Web 开发人员文档的综合性和权威性来源。 - [**html 中文**](https://www.html.cn/) 专业的 web 前端开发在线学习、培训、交流平台 - [**w3cschool**](https://www.w3cschool.cn/) 一个专业的 W3C 前端开发及编程入门学习平台,提供包括 HTML,CSS,Javascript,jQuery,C,PHP,Java,Python,Sql,Mysql 等编程语言和开源课程 ## 2.前端常用 ### 版本控制系统 - [**git 文档**](https://git-scm.com/book/zh/v2/) Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目 - [**git 参考手册**](http://gitref.justjavac.com/) - [**git 大全**](https://gitee.com/all-about-git) ### 运行时 - [**nodejs**](https://nodejs.org/en/) Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 - [**nodejs 中文文档**](http://nodejs.cn/api/fs.html) nodejs 中文文档 - [**Deno**](https://deno.land/v1)Deno 是作者 Ryan Dahl 在 Node 之后的又一大作,它是一个新的运行时,用于在 Web 浏览器之外执行 JavaScript 和 TypeScript ### 包管理工具 - [**npm**](https://www.npmjs.com/) npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具 - [**yarn**](https://yarnpkg.com/) yarn，Facebook 贡献的 Javascript 包管理器 - [**cnpm**](https://developer.aliyun.com/mirror/NPM?from=tnpm) 一个完整 npmjs.org 镜像，同步频率目前为 10 分钟一次 ### 前端工程化 #### 1.脚手架 - [**Create React App**](https://cli.vuejs.org/zh/) 官方支持的创建 React 单页应用程序的方法。它提供了一个零配置的现代构建设置。 - [**Vue CLI**](https://cli.vuejs.org/zh/) Vue.js 开发的标准工具 - [**Angular CLI**](https://cli.angular.io/) - [**Yeoman**](https://yeoman.io/learning/)Yeoman 是现代化前端项目的脚手架工具,用于生成包含指定框架结构的工程化目录结构。它是整个前端自动化工厂的第一站。 - [**Plop**](https://plopjs.com/documentation/)小型前端脚手架工具 #### 2.构建工具 - [**Grunt**](https://www.gruntjs.net/)是一个基于任务的 JavaScript 工程命令行构建工具 - [**Gulp**](https://www.gulpjs.com.cn/)基于流(stream)的自动化构建工具 - [**FIS3**](http://fis.baidu.com/)前端工程构建工具，FIS3 采取了类似 CSS 语法一样的配置风格,易于理解与上手 - [**vitejs**](https://github.com/vitejs/vite)Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。 #### 3.打包工具 - [**Browserify**](http://browserify.org/)Browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码，通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库。 - [**webpack**](https://webpack.js.org/) 一个用于现代 JavaScript 应用程序的静态模块打包工具 - [**webpack 中文文档**](https://webpack.docschina.org/concepts/) webpack 中文文档 - [**webpack 中文文档 2**](https://www.webpackjs.com/concepts/) webpack 中文文档 2 - [**Rollup.js**](https://github.com/rollup/rollup) Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,Rollup 对代码模块使用新的标准化格式,这些标准都包含在 JavaScript 的 ES6 版本中。 - [**Parcel**](https://parceljs.org/) 极速零配置Web应用打包工具 #### 4.格式化工具 & 其他 - [**ESLint 中文文档**](https://eslint.bootcss.com/)插件化的 JavaScript 代码检测工具 - [**Prettier**](https://prettier.io/docs/en/options.html) 一个流行的代码格式化工具 - [**Babel**](https://www.babeljs.cn/docs/) Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。 #### 5.持续集成工具 - [**Travis CI**](https://www.travis-ci.org/)在线托管的持续集成服务,绑定 Github 项目,抓取新的代码自动进行测试构建,甚至自动部署到测试环境。 - [**Jenkins**](https://www.jenkins.io/)一个开源软件项目，是基于 Java 开发的一种持续集成工具，用于监控持续重复的工作，旨在提供一个开放易用的软件平台，使软件的持续集成变成可能 ### 语言，模板与框架 - [**ECMAScript Language Specification**](http://www.ecma-international.org/ecma-262/5.1/#sec-11.13)ECMAScript 语言规范 - [**ECMAScript**](https://tc39.es/ecma262/#sec-promise-objects)ECMAScript 语言规范 - [**Typescript**](https://www.typescriptlang.org/docs/home.html) TypeScript 官方文档 - [**Typescript 中文文档**](https://www.tslang.cn/docs/home.html) 学习有关 TypeScript 的所有知识。 - [**Bootstrap 中文网**](https://www.bootcss.com/) Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。是一个 CSS/HTML 框架 - [**CSS 速查总表**](http://css.cuishifeng.cn/) CSS 是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现 - [**CSS 参考手册**](http://css.doyoe.com/) - [**Vue.js 官方文档**](https://cn.vuejs.org) 是一套构建用户界面的渐进式框架 - [**Vuex 官方文档**](https://vuex.vuejs.org/zh/) Vuex 是专门为 Vue.js 设计的状态管理库 - [**Element**](https://element.eleme.cn/#/zh-CN/component/installation) Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 - [**iView**](http://v1.iviewui.com/docs/guide/install) 一套基于 Vue.js 的高质量 UI 组件库 - [**React**](https://zh-hans.reactjs.org/docs/getting-started.html) React 是一个用于构建用户界面的 JavaScript 库 - [**Redux 中文文档**](https://cn.redux.js.org/) Redux 是 JavaScript 状态容器，提供可预测化的状态管理。 - [**React-Redux: Hooks**](https://react-redux.js.org/api/hooks) React-Redux 是 Redux 的官方 React 绑定库 - [**react-use**](https://github.com/streamich/react-use) React-use 一个很好用的 React Hooks 库 - [**ReactNative**](https://reactnative.cn/docs/getting-started.html) 开源的跨平台移动应用开发框架 - [**Umi**](https://umijs.org/zh-CN/docs) 是可扩展的企业级前端应用框架，蚂蚁金服的底层前端框架 - [**Umi Hooks**](https://hooks.umijs.org/zh-CN/hooks/async) 一个强大的管理异步数据请求的 Hook - [**DvaJS**](https://dvajs.com/guide/) 一个基于 redux 和 redux-saga 的数据流方案，一个轻量级的应用框架 - [**Ant Design**](https://ant.design/components/overview-cn/) 一个基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。 - [**Ant Design Pro**](https://preview.pro.ant.design/) 一个企业级中后台前端/设计解决方案 - [**Material-UI**](https://material-ui.com/zh/getting-started/installation/) 一个受欢迎的 React UI 框架 - [**React Router 官方文档**](https://reactrouter.com/web/guides/quick-start) 一个用于 React.js 的路由解决方案（routing solution）。它轻松可以同步你的 app 和 URL，同时给嵌套，转换，和服务端渲染一流的支持。 - [**React Router 中文文档**](https://react-router.docschina.org) React Router 中文文档 - [**React Router 中文文档 2**](https://react-guide.github.io/react-router-cn/) React Router 中文文档 2 - [**Ember.js**](https://emberjs.com/)Ember.js 是一个开源的 JavaScript 客户端框架,用于开发 Web 应用程序并使用 MVC(模型 - 视图 - 控制器)架构模式。 - [**Flutter**](https://flutter.dev/docs) Flutter 是 Google 提供的新一代跨平台方案，开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。 - [**Flutter 中文文档**](https://flutterchina.club/docs/) Flutter 中文文档 - [**tabler**](https://github.com/tabler/tabler) Tabler 是一个基于 Bootstrap 4 开发的 HTML 仪表盘 UI 套件，旨在提供一个用户友好，清晰简单的管理面板，可适用于简单和复杂的网站系统。 - [**lulu**](https://github.com/yued-fe/lulu) 腾讯阅文基于 jQuery，针对 PC 网站 IE8+（peak 主题）的前端 UI 框架 - [**Jasonette**](https://github.com/Jasonette/JASONETTE-iOS) 一个用 json 来构建 hybrid App 的框架 - [**art-template**](https://aui.github.io/art-template/zh-cn/docs/) art-template 是一个简约、超快的模板引擎。 - [**Smarty**](https://m.php.cn/manual/view/15656.html) Smarty是一个php模板引擎。 - [**EJS**](https://ejs.bootcss.com/) 高效的嵌入式 JavaScript 模板引擎。 ### 兼容性 - [**polyfill.io**](https://polyfill.io/) Polyfill 可以为旧浏览器提供和标准 API 一样的功能，polyfill.io 是自动化的 JavaScript Polyfill 服务，只需要引入一个 JS 文件。 Polyfill.io 通过分析请求头信息中的 UserAgent 实现自动加载浏览器所需的 polyfills ### 其他 - [**30 seconds of code**](https://www.30secondsofcode.org/)大量有用的 Javascript 片段（也有其他语言） - [**Chrome 版本发布查阅**](https://chromestatus.com/features) - [**GraphQL**](https://graphql.cn/learn/)一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义） ### javascript 库与函数式编程库 - [**jQuery API**](https://jquery.com/)jQuery 是一个快速，小型且功能丰富的 JavaScript 库 - [**jQuery API 中文在线手册**](http://jquery.cuishifeng.cn/index.html) - [**Lodash Documentation**](https://lodash.com/docs/) 是一个一致性、模块化、高性能的 JavaScript 实用工具库。 - [**Lodash 中文文档**](https://www.lodashjs.com/) Lodash 中文文档 - [**underscorejs.org**](http://underscorejs.org/) Underscore 一个 JavaScript 实用库，提供了一整套函数式编程的实用功能，但是没有扩展任何 JavaScript 内置对象 - [**Underscore.js 中文文档**](https://underscorejs.net/) Underscore.js 中文文档 - [**Underscore.js 中文文档 2**](https://www.underscore-js.com/) Underscore.js 中文文档 2 - [**Ramda 中文**](https://ramda.cn/)一款实用的 JavaScript 函数式编程库 - [**Folktale**](https://folktale.origamitower.com/)a standard library for functional programming in JavaScript - [**knockoutjs**](https://knockoutjs.com/documentation/introduction.html) Knockout 是一款很优秀的 JavaScript 库 - [**knockoutjs 中文**](http://www.aizhengli.com/knockoutjs/51/knockout-downloads-install.html) ### 可视化相关 - [**D3**](https://github.com/d3/d3) D3 是最流行的可视化库之一，它被很多其他的表格插件所使用。它允许绑定任意数据到DOM，然后将数据驱动转换应用到Document中。 - [**ECharts**](https://echarts.apache.org/zh/tutorial.html) ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。 - [**Three.js 中文网**](http://www.webgl3d.cn/)Three.js 是基于原生 WebGL 封装运行的三维引擎，在所有 WebGL 引擎中，Three.js 是国内文资料最多、使用最广泛的三维引擎 - [**chart.xkcd**](https://github.com/timqian/chart.xkcd) 手绘风格的图表库 - [**F2**](https://antv-f2.gitee.io/zh/docs/api/chart/chart) 移动端可视化，蚂蚁出品 - [**highcharts**](https://api.highcharts.com.cn/) 兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库 ### 静态站点生成器 && 文档管理 - [**VuePress 中文文档**](https://www.vuepress.cn/guide/#features)是一个基于 Vue 的轻量级静态网站生成器，以及为编写技术文档而优化的默认主题。本站就是使用它生成的 - [**docsify**](https://github.com/docsifyjs/docsify) 轻量级文档工具，但其是运行时编译的 - [**GitBook**](https://www.gitbook.com/) 除了编译慢没啥毛病 - [**docz**](https://github.com/pedronauck/docz) - [**GitHub Pages**](https://docs.github.com/cn/github/working-with-github-pages) ## 3.MongoDB 相关 - [**MongoDB 官网**](https://www.mongodb.com/) MongoDB 是一个基于分布式文件存储的数据库 - [**mongoose**](https://mongoosejs.com/docs/guide.html) - Mongoose 是在 node.js 异步环境下对 mongodb 进行便捷操作的对象模型工具 - [**mongoose 中文文档**](http://www.mongoosejs.net/docs/guide.html) mongoose 中文文档 - [**mLab**](https://docs.mlab.com/) mLab 是一款免费的在线 mongodb 云数据库产品,它为用户免费提供了 500M 容量 ## 4.GraphQL - [**prisma**](https://www.prisma.io/docs/) Prisma 则提供一套简洁的 API，使你更加方便地操作数据库和理解查询语句。Prisma 的 API 是类型安全的，返回的数据是普通的 JS 对象（plain old JavaScript objects）。让前端也能快速的写出 API - [**Apollo GraphQL**](https://www.apollographql.com/) 是基于 GraphQL 的全栈解决方案集合。从后端到前端提供了对应的 lib 使得开发使用 GraphQL 更加的方便 - [**dataloader**](https://github.com/facebook/dataloader) 解决 Graphql 中的 N+1 查询问题 ## 其他 - [**WebAssembly**](https://www.wasm.com.cn/) wasm 是一个可移植、体积小、加载快并且兼容 Web 的全新格式 - [**todomvc**](http://todomvc.com/) Helping you select an MV* framework # 实用网站 ## 搜索引擎 - [**百度**](https://www.baidu.com/) - [**Google**](https://www.google.com/) - [**快搜**](https://search.chongbuluo.com/) 集成各种搜索工具于一体，非常好用 ## 云平台 - [**七牛云**](https://www.qiniu.com/) - [**阿里云**](https://www.aliyun.com/) - [**腾讯云**](https://cloud.tencent.com/) ## 代码托管 - [**GitHub**](https://github.com/) - [**码云 Gitee**](https://gitee.com/) - [**coding.net**](https://coding.net/) ## 文档编辑 - [**语雀**](https://www.yuque.com/) - [**石墨文档**](https://shimo.im/welcome) - [**印象笔记**](https://www.yinxiang.com/) ## 协同平台 - [**蓝湖**](https://lanhuapp.com) 一款产品文档和设计图的共享平台，高效的产品设计协作平台 - [**Slack**](https://slack.com/intl/en-cn/) 用于企业沟通和协作 - [**钉钉**](https://www.dingtalk.com) 工作用途，沟通和协作 - [**TAPD**](https://www.tapd.cn/) 一站式敏捷研发协作云平台 - [**Trello**](https://trello.com/) - [**Teambition**](https://www.teambition.com/) ## 交流社区 && 技术论坛 && 写作平台 - [**stackoverflow**](https://stackoverflow.com/) - [**CSDN**](https://www.csdn.net/) - [**思否 segmentfault**](https://segmentfault.com/) - [**掘金**](https://juejin.im/) - [**简书**](https://www.jianshu.com/) - [**知乎**](https://www.zhihu.com/hot) - [**cnode**](https://cnodejs.org/)Node.js 专业中文社区 - [**V2EX**](https://www.v2ex.com/) 挺活跃的一个技术论坛 - [**InfoQ**](https://www.infoq.cn/topic/Front-end) 文章的质量比一般网站的高不少 ## 收集的网站或收藏册 - [**😎 Awesome lists**](https://github.com/sindresorhus/awesome) github 上各种 Awesome 的集合 - [**awesome-bookmarks**](https://panjiachen.gitee.io/awesome-bookmarks/repository/) panjiachen 的收藏站，也是本网站最初复制整理的网站。 - [**前端技术专题集**](https://github.com/qq449245884/xiaozhi) 前端技术专题集 - [**overreacted**](https://overreacted.io/) react Dan 的个人博客，更新频率很高（redux 作者，react 核心开发） - [**DailyJS**](https://medium.com/dailyjs) - [**codeburst**](https://codeburst.io/) - [**鱼塘**](https://www.printf520.com/hot.html) 划水网站收集了很多网站当天热门文章 - [**每日时报**](https://wubaiqing.github.io/zaobao/) 定期会分享一些库和工具 - [**awesome-f2e-libs**](https://github.com/sorrycc/awesome-f2e-libs) sorrycc 整理的个人关注使用的前端库 ## 算法 - [**leetcode**](https://leetcode-cn.com/) - [**POJ**](http://poj.org/problemlist) ## Github - [**github 国内镜像网站**](https://git.sdut.me/) git.sdut.me - [**github 国内镜像网站**](https://github.com.cnpmjs.org/) github.com.cnpmjs.org - [**github 短域名服务**](https://git.io) - [**shields**](https://shields.io/) Github README 里面的装逼小图标 - [**Emoji**](https://www.webpagefx.com/tools/emoji-cheat-sheet/) 方便平时写查找 emoji - [**emoji.muan**](http://emoji.muan.co/#) 同上而且更全 - [**git-awards**](http://git-awards.com/users/search?login=panjiachen) github ranking 没事可以查着玩玩 - [**http://githubrank.com/**](http://githubrank.com/) github 按照 followers 排名 - [**github-rank**](https://wangchujiang.com/github-rank/)同上，githubrank 基本算挂了已经，只能用这个新的 - [**star-history**](https://www.timqian.com/star-history/#PanJiaChen/vue-element-admin) 展示一个项目 Stars 增长规矩曲线 - [**probot**](https://github.com/probot/probot) 基于 github 做一个小机器人。可以做很多 workflow 的事情 ## 在线编程，创建项目网站 - [**glitch**](https://glitch.com/) 在线编程网站 - [**codesandbox**](https://codesandbox.io) 在线编程网站 - [**codepen**](https://codepen.io/) 在线编程网站 ## 开发 - [**Google Developers**](https://developers.google.com/web/updates/capabilities) Chrome 更新日志 - [**产品/设计师/独立开发者的资源库**](https://maliquankai.com/designnav/) 很全很强大 - [**can i use**](https://caniuse.com/) 前端常用网站了查看不同属性和方法的兼容性 - [**Squoosh**](https://squoosh.app/) 谷歌出品在线免费图片压缩工具神器 - [**codesandbox-client**](https://github.com/CompuIves/codesandbox-client) - 在线 web 开发容器 - [**astexplorer**](https://github.com/fkling/astexplorer) - 一个在线 ast 生成器 - [**30 seconds of code**](https://30secondsofcode.org/) 收集了许多有用的代码小片段 - [**zeplin**](https://app.zeplin.io/) 前端和设计师神器，有标注、Style Guide、版本管理、简单的团队协作，重点是前端不用写 css 了，复制就可以了。 - [**iconfont**](http://www.iconfont.cn/) 阿里出的图标库，非常实用，支持 svg、font、png 多种格式，基本现在所有图标都在上面找。 - [**cssicon**](http://cssicon.space/#/) 所有的 icon 都是纯 css 画的缺点：icon 不够多 - [**智图**](http://zhitu.isux.us/) 腾讯出品在线图片压缩支持转成 webP 处理静态图片时候很好用 - [**picdiet**](https://www.picdiet.com/zh-cn) 另一个图片压缩网站 - [**CSS triangle generator**](http://apps.eky.hk/css-triangle-generator/) 帮你快速用 css 做出三角形 - [**cssarrowplease**](http://www.cssarrowplease.com/) 帮你做对话框三角的 - [**clippy**](http://bennettfeely.com/clippy/) 在线帮你使用 css clip-path 做出各种形状的图形 - [**Regular Expressions**](https://regex101.com/) 在线正则网站 - [**jex**](https://jex.im/regulex/) 正则可视化网站，配合上面的 Regular Expressions，写正则方便很多 - [**jsfiddle**](https://jsfiddle.net/) 在线运行代码网站很不错，可惜要翻墙 - [**codepan**](https://codepan.net/) 在线运行代码网站不用翻墙，可以自己部署 - [**fiddle.md**](https://fiddle.md/) 一个方便的在线共享 markdown 在线笔试题一般都用这个 - [**jsdelivr**](https://www.jsdelivr.com/) cdn 服务 - [**unpkg**](https://unpkg.com) cdn 服务 - [**coderpad**](https://coderpad.io/) 远程面试的神器，可以让面试者远程写代码不过需要翻墙 - [**icode**](http://www.icode.live/) 有赞团队出品的 coderpad 可以互补，它不需要翻墙 - [**codeadvice**](https://www.codeadvice.io) 又一个让面试者远程写代码的网址 - [**snipper**](https://snipper.io) 一个代码协同的网站。你新建一个代码片段，然后把网址分享给其他人，就可以看到他们的实时编辑。 - [**codesandbox**](https://codesandbox.io/) 一个可以在线编辑且提供在线 demo 的网站支持 vue react angular 多种框架神器 - [**codrops**](https://tympanus.net/codrops/) 上面的交互都非常酷炫 - [**bgremover**](http://www.aigei.com/bgremover) 在线图片去底工具 - [**photopea**](https://www.photopea.com/) 一个网页端 Photoshop 很变态 - [**bestofjs**](https://bestofjs.org/) 查看一个项目增长经历，Star 数变化的网站，辅助你判断这个库的质量 - [**stackblitz**](https://stackblitz.com/) 一款在线 IDE,主要面向 Web 开发者,移植了很多 VS Code 的特性与功能 - [**programmingfonts.org**](http://app.programmingfonts.org) 一个专门介绍编程字体的网站 - [**早报**](https://wubaiqing.github.io/zaobao/) 一个个人开发者的前端开发的分享日报 - [**emoji-search**](https://emoji.muan.co/#) 帮你快速找到能表达你情感的 emoji - [**gitmoji**](https://github.com/carloscuesta/gitmoji) 通过 emoji 表达 git 的操作内容 - [**starcharts**](https://starcharts.herokuapp.com/PanJiaChen/vue-element-admin) 可以把你一个项目的 stars 增长轨迹当做 svg 放在 readme 中 - [**mockapi**](https://www.mockapi.io/) 一个还不错的在线 mock 服务（可在线可视化编辑），可以满足大部分简单需求了 - [**coder**](coder.com) 在线版 VS Code - [**browserstack**](https://www.browserstack.com/) 远程调整各种版本浏览器兼容性问题 - [**carbon**](https://carbon.now.sh/) 根据代码块生成图片主要作用是让你打代码片段分享的时候更好看一点 - [**clipboard2markdown**](https://euangoddard.github.io/clipboard2markdown/) 将你所有复制进去的内容都转化为 markdown - [**grammarly**](https://www.grammarly.com/) 英语写作检查工具 - [**quickchart**](https://quickchart.io/) 通过 URL 生成图表的开源服务 - [**hipdf**](https://www.hipdf.cn/) 一站式在线 PDF 解决方案 - [**whimsical**](https://whimsical.com) 画路程图 - [**Lorem Picsum**](https://picsum.photos/) 提供免费的占位图 - [**sm.ms**](https://sm.ms/) 免费图床 - [**webpagetest**](https://www.webpagetest.org/) 前端性能分析工具 - [**网络安全的教程**](hacksplaining.com/lessons) - [**Ananas Analytics Desktop**](https://ananasanalytics.com/) 一站式数据可视化 - [**“零宽” 长度的短网址服务**](https://zws.im) 利用“零宽字符”来缩短 url，还支持统计 - [**hotjar**](https://www.hotjar.com/) 用户调研支持用户反馈录屏 heatMap - [**独角兽公司榜单**](https://dujiaoshou.io/) 感觉大家想去大公司的时候，可以看看排名 - [**中国传统颜色手册**](https://colors.ichuantong.cn/) - [**coderlane**](https://coderlane.net/) 远程视频面试，目前使用的是牛客，这个工具待考察 ## 设计 - [**artbreeder**](https://artbreeder.com/) 可以在线生成随机 meme、头像、专辑封面、风景图片以及二次元头像，通过选定两个或多个图片你可以决定图片中的内容和风格 - [**Bēhance**](https://www.behance.net/) dribbble 是设计师的微博，Bēhance 是设计师的博客 - [**Logojoy**](https://logojoy.com/) 使用 ai 做 logo 的网站，做出来的 logo 质量还不错。 - [**brandmark**](http://brandmark.io/) 另一个在线制作 logo 网站 - [**instant**](https://instantlogodesign.com/) 又一个 logo 制作网站 - [**logo-maker**](https://www.designevo.com/logo-maker/) 又一个 logo 制作网站这个更简单点就是选模板之后微调 - [**coolors**](https://coolors.co/) 帮你在线配色的网站你能找到不少配色灵感 - [**colorhunt**](http://colorhunt.co/) 另一个配色网站 - [**uigradients**](https://uigradients.com/#SummerDog) 渐变色网站 - [**designcap**](https://www.designcap.com) 在线海报设计 - [**Flat UI 色表**](https://flatuicolors.com/) Flat UI 色表 - [**0to255**](https://www.0to255.com/) 颜色梯度 - [**Ikonate**](https://github.com/mikolajdobrucki/ikonate) 提供免费的图标 icons - [**remixicon**](https://remixicon.com/) 又一个提供免费图标 icons - [**feather**](https://github.com/feathericons/feather) 免费的 icons - [**nord**](https://github.com/arcticicestudio/nord) 北欧性冷淡风主题配色 - [**Unsplash**](https://unsplash.com/) 提供免费的高清图片 - [**colorkitty**](https://colorkitty.com/) 从你的图片中提取配色 - [**design.youzan**](design.youzan.com) 有赞设计原则 - [**undraw**](https://undraw.co/illustrations) 一个免费的插图网站，可以在上面寻找合适的插图，用于商业用途。 ## 有趣 - [**Pharaoh Ramesses VI Tomb**](https://my.matterportvr.cn/show/?m=NeiMEZa9d93&mls=1) 逆向工程三维扫描与 VR 室内漫游 - [**Nomad List — Best Places to Live and Work Remotely**](https://nomadlist.com) Nomad List,找适合远程工作的城市 - [**帮你百度一下**](http://www.baidu-x.com/) 可以 [点我测试一下\*\*](http://www.baidu-x.com/?q=%E5%92%8C%E8%B0%90%E6%9C%89%E7%88%B1%E5%AF%8C%E5%BC%BA)- - [**国际版**](http://lmgtfy.com/) 同`帮我百度一下`-[点我测试一下\*\*](http://lmgtfy.com/?q=a)- - [**wallhaven**](https://alpha.wallhaven.cc/) 壁纸网站- - [**URL 地址播放 Emojis 动画**](http://matthewrayfield.com/articles/animating-urls-with-javascript-and-emojis/#%F0%9F%8C%96) 在地址栏里面播放 emoji - [**Can't Unsee**](https://cantunsee.space/) 强烈建议前端、客户端、UI 开发的同学玩下，检查一下自己对设计稿的敏感度怎么样 - [**ggtalk**](https://talk.swift.gg/) 平时一直在听的一个技术博客 - [**awesome-comment**](https://github.com/Blankj/awesome-comment) 里面收集了很多有趣的代码注释 - [**text-img**](https://www.text-image.com/index.html) 都将图片转化为 ascii 用来写注释 - [**weird-fonts**](https://github.com/beizhedenglong/weird-fonts) 将普通字母转化为特殊 unicode - [**snake**](https://github.com/epidemian/snake) 在地址栏里面玩贪吃蛇 - [**zero-width-lib**](https://github.com/yuanfux/zero-width-lib) 利用零宽度字符实现隐形水印、加密信息分享、逃脱词匹配，很有创意 - [**abbreviations**](https://www.abbreviations.com/) 查看一个简写是什么意思的网站 - [**magi**](https://magi.com/) ai 搜索神器，超屌 - [**诺基亚短信图片生成器**](https://zzkia.noddl.me:8020/) ## 交互 - [**微交互**](http://aliscued.lofter.com/) 里面收集了市面上很多很好的微交互例子值得学习 - [**Little Big Details**](http://littlebigdetails.com/) 同上，一个国外微交互汇集网站 - [**cruip**](https://cruip.com/) 登录页的各种页面设计，可以免费下载模板 - [**Comixify**](https://comixify.ii.pw.edu.pl/) 一个波兰团队做了非常好玩的工具，可以把视频自动转成漫画，上图是他们提供的 demo，效果很棒。 - [**taiko-web**](https://github.com/bui/taiko-web) 太鼓达人网页版只能说很 6 ## 产品 - [**产品大牛**](http://www.pmdaniu.com/) 什么有很多完整的产品原型可以借鉴 - [**磨刀**](https://modao.cc/pricing) 快速出 ui 原型 ## 实用 - [**写作猫**](https://xiezuocat.com/#/) 可以通过 AI 的方式，帮你检查错别字，很有效的一个工具 - [**draw**](https://www.draw.io/) 在线 web 画流程图 - [**typeform**](https://admin.typeform.com/signup) 一个国外的在线调查问卷网站 - [**VideoFk**](https://www.videofk.com/) VideoFk 视频在线解析下载 - [**全历史**](https://www.allhistory.com/) 历史内容聚合网站 - [**UzerMe**](https://www.uzer.me/) 云端办公工具 - [**SoBooks**](https://sobooks.cc/) 强大的电子书资源网站 - [**稿定设计**](https://www.gaoding.com/) 键式设计工具+智能抠图 - [**pichance**](https://pichance.com/) 一个将低分辨率图片增强为高分辨率的工具，可以将分辨率增加 4 倍（即长和宽各增加一倍） - [**bigjpg**](http://bigjpg.com/) 放大图片的神器通过神经网络可以放大图片并能降噪 - [**大力盘**](https://dalipan.com) 百度网盘搜索 - [**ENFI 下载器**](https://www.macbl.com/app/internet/enfi) 不限速下载器 - [**来画视频**](https://www.laihua.com/) 像做 PPT 一样做短视频 - [**Arkie 海报制作工具**](https://www.arkie.cn/) - [**优品 PPT**](http://www.ypppt.com/) - [**比格 PPT**](http://www.tretars.com) - [**高清免费图片**](https://www.pexels.com/) - [**高清免费图片 2**](https://unsplash.com/) - [**历史价格查询**](http://www.lsjgcx.com/) 淘宝，京东等商品历史价格，能更清晰了解商家的活动是否为虚假促销以及促销的力度。神器 - [**Firefox Send**](https://send.firefox.com/) 文件分享服务，下载一次或者到期即焚，在当前网络监管下很实用的服务 - [**time.graphics**](https://time.graphics/editor) 在线 milestone timeline 生成器 - [**processon**](https://www.processon.com/) 免费在线作图，支持流程图、思维导图、原型图、UML、网络拓扑图、组织结构图等 - [**龙轩导航**](http://ilxdh.com/) 一个总结了不少实用网站的导航 ## Talk - [**peerigon-talks**](https://github.com/peerigon/talks) 收集了不少有意思的 talks ## 面试相关 ### 0.面试题 - [**拉勾每日面试题**](https://baizixv.gitee.io/bookmarks/interviews) 拉勾每日面试题复习回顾 ### 1.熟人内推 ### 2.公司招聘官网 ### 3.面试平台 - [**拉勾**](https://www.lagou.com/) - [**牛客网**](https://www.nowcoder.com/) - [**Boss 直聘**](https://www.zhipin.com/) - [**前程无忧**](https://www.51job.com/) - [**智联招聘**](https://www.zhaopin.com/) ## 第三方平台 - [**云雀客服**](https://www.yunque360.com/)全渠道客服系统 - 微信客服/微博客服/客资管理/在线咨询/在线客服软件 - [**容联云通讯**](https://www.yuntongxun.com/)短信平台、手机验证码、语音验证码、IM 即时通讯、云呼叫系统等互联网通信服务 - [**友盟**](https://www.umeng.com/) 第三方网站数据统计与监测 - [**百度统计**](https://tongji.baidu.com/web/welcome/login) 第三方网站数据统计与监测 - [**Google Analytics**](https://analytics.google.com/) 第三方网站数据统计与监测 - [**快海报**](https://kuaihaibao.com/doc/index.html) 快海报提供小程序分享海报生成服务，接口为 HTTP API ## 其他 - [**Godaddy**](https://sg.godaddy.com/zh) 购买域名 # 常用库与工具 **这里主要推荐一下自己平时常用，提高效率的一些库和工具。** ## 常用库 ### 包管理工具 - [**npm**](https://www.npmjs.com/) npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具 - [**yarn**](https://yarnpkg.com/) yarn，Facebook 贡献的 Javascript 包管理器 - [**cnpm**](https://developer.aliyun.com/mirror/NPM?from=tnpm) 一个完整 npmjs.org 镜像，同步频率目前为 10 分钟一次 - [**pnpm**](https://pnpm.js.org/) 继承了yarn的所有优点，包括离线模式和确定性安装。 ### 收集库 - [**hocs**](https://github.com/deepsweet/hocs) react 相关 hoc 收集库 - [**markdown-it-emoji**](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.json) 将对应 emoji 表情的符号码复制后输入你的 markdown 文本即可显示 emoji 表情。 ### 通用库 - [**markdown-toc**](https://github.com/jonschlinkert/markdown-toc) Generate a markdown TOC (table of contents) with Remarkable.自动生成 markdown 的导航栏 - [**html-dom**](https://github.com/phuoc-ng/html-dom) 一些常用的 dom 或者原生 js 操作判断，挺实用的 - [**moment.js**](https://momentjs.com/docs/)是一个简单易用的轻量级 JavaScript 日期处理类库，提供了日期格式化、日期解析等功能。它支持在浏览器和 NodeJS 两种环境中运行。 - [**moment.js 中文网**](http://momentjs.cn/docs/) - [**html2canvas**](http://html2canvas.hertzen.com/documentation)JavaScript 实现页面截图的类库 - [**Immutable.js**](https://immutable-js.github.io/immutable-js/docs/)Immutable 是 Facebook 开发的不可变数据集合 - [**clipboard.js**](https://clipboardjs.com/)Clipboard.js 实现了纯 JavaScript （无 Flash）的浏览器内容复制到系统剪贴板的功能。可以在浏览器和 Node 环境中使用。 - [**passportjs**](http://www.passportjs.org/docs/downloads/html/) Passport 是一个 Node 平台的身份认证中间件，极其灵活和模块化 - [**axios 中文文档**](http://axios-js.com/zh-cn/docs/) Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 - [**sweetalert2**](https://github.com/sweetalert2/sweetalert2) 一个自适应，且自定义性强的弹出框（零依赖） - [**tippy.js**](https://github.com/atomiks/tippyjs) 最著名的 tooltip/popover library - [**text-mask**](https://github.com/text-mask/text-mask) 可以让 input 按照规则输入(如电话,email,日期,信用卡等)，特殊格式 input - [**dinero.js**](https://github.com/sarahdayan/dinero.js) 用来创建、计算和格式化货币价值的不可变的框架，支持国际化 - [**img-2**](https://github.com/RevillWeb/img-2) 一个提高图片加载性能和体验的库，懒加载使用 web worker 模糊预览 - [**fingerprintjs**](https://github.com/Valve/fingerprintjs2) 是一个快速的浏览器指纹库，通浏览环境的一系列配置生成 id - [**ajv**](https://github.com/epoberezkin/ajv) 一个 json schema 验证的库 - [**dayjs**](https://github.com/iamkun/dayjs/blob/dev/docs/zh-cn/README.zh-CN.md) Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js - [**primjs**](https://github.com/PrismJS/prism) 让页面支持代码高亮 - [**uppy**](https://github.com/transloadit/uppy) 一个很好看的也很好用的前端上传库 - [**Filepond**](https://github.com/pqina/filepond) 一个小巧的文件上传库 - [**tui-calendar**](http://ui.toast.com/tui-calendar/) 功能全面的日程安排日历控件，还支持拖拽 - [**spritejs**](https://github.com/spritejs/spritejs) SpriteJS 是一款由 360 奇舞团开源的跨终端 canvas 绘图库，可以基于 canvas 快速绘制结构化 UI 、动画和交互效果，并发布到任何拥有 canvas 环境的平台上（比如浏览器、小程序和 node ） - [**tui.image-editor**](https://github.com/nhnent/tui.image-editor) 一个功能齐全的在线图片编辑，基于 canvas - [**nanoid**](https://github.com/ai/nanoid) 是使用 JavaScript 开发、一个小型、安全、对 URL 友好的唯一字符串 ID 生成器。据作者说，比 uuid 更可靠和好用。至少从 API 的功能和易用性来看，似乎确实如此 - [**rxdb**](https://github.com/pubkey/rxdb) 一款开源的快速、灵活的客户端数据库，支持各种浏览器以及 NodeJS，Electron、React 等等，是 PouthDB 之上的一个封装库 - [**ImmortalDB**](https://github.com/gruns/ImmortalDB) 是用于浏览器的弹性键值存储 ImmortalDB 是在浏览器中存储持久键值数据的最佳方法，保存在其中的数据被冗余地存储在 Cookies、IndexedDB - [**big.js**](https://github.com/MikeMcl/big.js) 解决 js 浮点数问题。主要就是 Big Number 或者小数点，一个用于任意精度十进制算术的小而快速的 JavaScript 库。 - [**bignumber.js**](https://github.com/MikeMcl/bignumber.js) 同上 - [**stickybits**](https://github.com/yowainwright/stickybits) CSS 的 position: sticky 是一个很有用的设置，但是老的浏览器不支持。这个 JS 库是该功能的垫片库。 - [**cleave.js**](https://github.com/nosir/cleave.js) 用于在输入时格式化输入内容（信用卡格式、日期等） - [**shiny**](https://github.com/rikschennink/shiny) 在手机设备上模拟光的反射效果。支持 DeviceMotion 事件 - [**rrweb**](https://github.com/rrweb-io/rrweb) 一个可以记录你页面中所有操作的库 - [**nodeppt**](https://github.com/ksky521/nodeppt) markdown 写 ppt - [**flexsearch**](https://github.com/nextapps-de/flexsearch) 能让你更加高效和快速的检索文本内容 - [**scroll-hint**](https://github.com/appleple/scroll-hint) 用于提示用户页面可以左右滑动的一个提示库 - [**fuse.js**](https://fusejs.io/getting-started/installation.html) 轻量级前端模糊查询库非常的好用 - [**FileSaver.js**](https://github.com/eligrey/FileSaver.js) 文件下载插件很多时候下载会有兼容性问题，它能帮你解决这些问题 - [**selection**](https://github.com/Simonwep/selection) 可视化选择页面元素的库 - [**scroll-out**](https://scroll-out.github.io/) 滚动效果（滚动视差）的框架，框架大小不到 1KB,使用回调的方式将相关动画元素的属性进行实时分配 - [**gpu.js**](https://github.com/gpujs/gpu.js) 通过将 js 转为特定的 language，利用 GPU 来执行，大大提高了执行性能和速度 - [**pressure**](https://github.com/stuyam/pressure) 前端实现 3D Touch - [**hammer**](https://github.com/hammerjs/hammer.js) 移动端手势库 - [**AlloyFinger**](https://github.com/AlloyTeam/AlloyFinger) 腾讯出的手势库 - [**lowdb**](https://github.com/typicode/lowdb) LowDB 是一个本地 JSON 数据库，基于 Lodash 开发的 - [**JSON-server**](https://github.com/typicode/json-server) 可以配合 LowDB 使用快速搭建一个 REST API - [**lunr.js**](https://github.com/olivernn/lunr.js) 是个用于浏览器的轻量级 JavaScript 全文搜索引擎,对于一些小型的博客、开发者文档或 Wiki 网站来说,完全可以通过它实现站内离线搜索 - [**he**](https://github.com/mathiasbynens/he) 一个前端 encoder/decoder 库 - [**grade**](https://github.com/benhowdle89/grade) 一个可以根据你的图片调整底色的插件 - [**pretty-bytes**](https://github.com/sindresorhus/pretty-bytes) 将字节转换成可以读的字符串，比如 1337 个字节，会显示成 1.34 KB - [**pagemap**](https://larsjung.de/pagemap/) Mini map for web pages 页面导航图 - [**commonmark.js**](https://github.com/commonmark/commonmark.js) parser and renderer markdown - [**body-scroll-lock**](https://github.com/willmcpo/body-scroll-lock) 解决滚动穿透问题 - [**lightgallery**](https://github.com/sachinchoolur/lightgallery.js) 图片预览组件 - [**photoswipe**](https://github.com/dimsemenov/photoswipe) 图片预览组件，支持移动端 - [**darken**](https://github.com/ColinEspinas/darken) 页面黑夜模式切换 - [**mitt**](https://github.com/developit/mitt) Tiny 200b functional event emitter / pubsub - [**sanitize-html**](https://github.com/apostrophecms/sanitize-html) html 过滤库，防 xss - [**DOMPurify**](https://github.com/cure53/DOMPurify) 比 sanitize-html 更轻量，建议一般业务用这个 - [**mdx**](https://github.com/mdx-js/mdx) jsx + markdown ### Css && 动画 - [**animate.css**](https://github.com/daneden/animate.css) 最有名的动画效果库 - [**magic.css**](https://github.com/miniMAC/magic) css 动画效果库类似 animate.css - [**popmotion**](https://github.com/Popmotion/popmotion) 一个函数式声明前端动画库 - [**NES.css**](https://github.com/BcRikko/NES.css) 任天堂主题风格 css 库 - [**particles.js**](https://github.com/VincentGarreau/particles.js) 前端实现颗粒粒子的动画效果库，比较炫酷，但相对的也比较吃性能 - [**PaperCSS**](https://www.getpapercss.com/docs/) 手绘风格感觉 css 库 - [**rough**](https://github.com/pshihn/rough) 基于 Canvas 的手绘风格图形库 - [**wired-elements**](https://github.com/wiredjs/wired-elements) 基于 rough.js 分装 button input radio 等组件。它的底层是 Web components - [**roughViz**](https://github.com/jwilber/roughViz) rough 风格的图表库手绘风格的图表库 - [**matter-js**](https://github.com/liabru/matter-js) web 物理引擎 - [**micron**](https://github.com/webkul/micron) 通过在元素上绑定属性从而实现动画效果的库 - [**direction-reveal**](https://github.com/NigelOToole/direction-reveal) 根据鼠标进入位置，展现从不同方向展现 hover 效果 - [**laxxx**](https://github.com/alexfoxy/laxxx) 滚动特效库轻量级压缩完 2kb - [**cssfx**](https://cssfx.dev/) 优雅的 CSS 动画效果，开箱即用 - [**zdog**](https://github.com/metafizzy/zdog) 3D engine 引擎 - [**leonsans**](https://github.com/cmiscm/leonsans) 酷炫的字体动画 geometric sans-serif typeface made with code - [**css-doodle**](https://github.com/css-doodle/css-doodle) A web component for drawing patterns with CSS 一个用于使用 CSS 绘制图案的 Web 组件 ### React - [**React Icons**](https://react-icons.github.io/react-icons/#/) 将一些受欢迎的图标包含到 React 项目中 - [**formik**](https://formik.org/docs/overview)构建 React 表单的开源库：Formik - [**react-jsonschema-form**](https://github.com/mozilla-services/react-jsonschema-form) Mozilla service 开源了一个通过 JSON 直接生成表单的 React 组件 - [**rawact**](https://github.com/sokra/rawact) 一个 babel 插件，把 react 组件转为原生 dom ### Vue - [**vue-multiselect**](https://github.com/shentao/vue-multiselect) select 组件目前 vue 里面用过最好用的 - [**Vue.Draggable**](https://github.com/SortableJS/Vue.Draggable) DnD 拖拽组件基于 Sortable.js 的 vue 版本 - [**vue-sauce**](https://github.com/Botre/vue-sauce) 一个可以展示 vue 源码的指令 - [**vue-smooth-dnd**](https://github.com/kutlugsahin/vue-smooth-dnd) Vue wrappers components for smooth-dnd - [**vuegg**](https://github.com/vuegg/vuegg) 一个 vue 可视化拖拽界面生成器 - [**vee-validate**](https://github.com/baianat/vee-validate) 基于 vue 的验证，能验证的内容比较全 - [**vuesax**](https://github.com/lusaxweb/vuesax) 一个很漂亮的基于 vue 的 ui 框架 - [**vue-analytics**](https://github.com/MatteoGabriele/vue-analytics) 基于 vue 的谷歌统计封装 - [**vue-virtual-scroller**](https://github.com/Akryum/vue-virtual-scroller) 基于 vue 的虚拟列表无限滚动 - [**vue-content-placeholders**](https://github.com/michalsnik/vue-content-placeholders) 页面龙骨 skeleton - [**buefy**](https://github.com/buefy/buefy) 适配移动端的 vue 组件库看着还挺舒服的 - [**vxe-table**](https://github.com/xuliangzhan/vxe-table)vue 表格解决方案，还没具体用过看着的确解决了其它 table 组件的一些问题 ### 工具库 - [**live-server**](https://github.com/tapio/live-server) 可以快速启一个本地 dev 服务并且支持自动刷新的 http server - [**serve**](https://github.com/zeit/serve) 快速起本地静态服务 - [**picojs**](https://github.com/tehnokv/picojs) js 人脸识别库 - [**es-checker**](https://github.com/ruanyf/es-checker) 检查当前环境对 ES6 支持的情况。支持浏览器和 node.js - [**merge-images**](https://github.com/lukechilds/merge-images) 图片合成，利用`canvas`能将几张图片合成一张 - [**fabric.js**](https://github.com/fabricjs/fabric.js) 基于 canvas 创建交互式的图片编辑界面非常适合用来做图片合成类工作。 - [**phaser**](https://github.com/photonstorm/phaser) 这是一个为桌面和移动浏览器开发 HTML5 游戏的快速开源框架。你可以为 iOS、 Android 和不同的本地应用程序创建游戏。 - [**purifycss**](https://github.com/purifycss/purifycss) 移除没使用到的 css - [**dropcss**](https://github.com/leeoniya/dropcss) 同上 - [**fast-cli**](https://github.com/sindresorhus/fast-cli) 命令行测试下载上传速度 - [**@pika/web**](https://github.com/pikapkg/web) 让你不需要在本地 webpack 中 import，直接在游览器里面运行 npm 包 - [**pinyin**](https://github.com/hotoo/pinyin) 汉字拼音转换工具 - [**JavaScript Obfuscator Tool**](https://obfuscator.io/) js 代码混淆工具 - [**tesseract**](https://github.com/naptha/tesseract.js) 图像识别，它能识别图片中的文字，支持中文 - [**gka**](https://github.com/gkajs/gka) 一款高效、高性能的帧动画生成工具。只需一行命令，快速图片优化、生成动画文件，支持效果预览。 - [**recast**](https://github.com/benjamn/recast) 前端 ast 库 - [**jscodeshift**](https://github.com/facebook/jscodeshift) 将 js 内容解析成 AST 语法树，然后提供一些便利的操作接口，方便我们对各个节点进行更改 - [**stats.js**](https://github.com/mrdoob/stats.js/) 前端性能监控如 FPS、内存使用情况等 - [**PapaParse**](https://github.com/mholt/PapaParse) 解析 csv excel - [**mddir**](https://github.com/JohnByrneRepo/mddir) 生成 markdown file/folder structure 目录结构 tree - [**imagemin**](https://github.com/imagemin/imagemin) 图片压缩库 - [**inline-css**](https://github.com/jonkemp/inline-css#readme) css covert to inline style 在生成 email 格式 html 的时候特别有用 - [**babel-plugin-try-catch-error-report**](https://github.com/mcuking/babel-plugin-try-catch-error-report) 全局自动 catch 错误进行数据上报 - [**StreamSaver.js**](https://github.com/jimmywarting/StreamSaver.js) 大文件下载，不用像 saveAs 那样先读到内存中再下载 - [**mammoth.js**](https://github.com/mwilliamson/mammoth.js) Convert Word documents (.docx files) to HTML - [**npkill**](https://github.com/voidcosmos/npkill) 列出所有 node_modules，并支持删除 - [**strapi**](https://github.com/strapi/strapi/) 开源的解决方案来创建、部署和管理自己的 API，通过图形化界面进行操作 - [**cheerio**](https://github.com/cheeriojs/cheerio) 为服务器特别定制的，快速、灵活、实施的 jQuery 核心实现. - [**node-semver**](https://github.com/npm/node-semver) node 版本验证库 - [**live-server**](https://github.com/tapio/live-server) 一个简单的 http server 带有 reload 功能 - [**node-portfinder**](https://github.com/indexzero/node-portfinder) 一个端口嗅探工具 - [**update-notifier**](https://github.com/yeoman/update-notifier)node 依赖升级提醒工具 - [**fastscan**](https://github.com/pyloque/fastscan) node 敏感词库 - [**hygen**](https://github.com/jondot/hygen) 快速方便的创建代码可以命令行创建预设的 template - [**ink**](https://github.com/vadimdemedes/ink) 是一个 React 的命令行渲染器，命令行界面可以像写页面那么写了 - [**dotenv**](https://github.com/motdotla/dotenv) 通过.env 设置环境部变量 vue-cli 也依赖它 - [**patch-package**](https://github.com/ds300/patch-package) 优雅的修改 node_modules 中的依赖库 - [**Playwright**](https://github.com/microsoft/playwright) 同 Puppeteer 团队出品，但区别是它支持 Chrome、Safari、Firefox、Edge - [**tree-cli**](https://github.com/MrRaindrop/tree-cli) node 根据目录结构生成 tree - [**tree-node-cli**](https://github.com/yangshun/tree-node-cli) node 根据目录结构生成 tree - [**open**](https://github.com/sindresorhus/open) node 打开浏览器 ### 命令行相关 - [**signale**](https://github.com/klauscfhq/signale) 一个 Node 的日志格式库，自带 16 个级别，可以定制颜色和 Emoji，可扩展的日志记录器 - [**consola**](https://github.com/nuxt/consola) 优雅的命令行 console logger `vuepress` 也使用了它 - [**chalk**](https://github.com/chalk/chalk) 命令行着色美化库 - [**progress-estimator**](https://github.com/bvaughn/progress-estimator) 命令行 progress bar 进度条模拟库 - [**ora**](https://github.com/sindresorhus/ora) Elegant terminal spinner 命令行 loading - [**listr**](https://github.com/SamVerschueren/listr) Terminal task 命令行任务列表 - [**yargs**](https://github.com/yargs/yargs) 命令行参数解析 - [**y18n**](https://github.com/yargs/y18n) yargs 基于 i18n 的一个包 - [**commander.js**](https://github.com/tj/commander.js) 自动的解析命令和参数，合并多选项，处理短参，等等，功能强大，上手简单 - [**Inquirer.js**](https://github.com/SBoudrias/Inquirer.js) A collection of common interactive command line user interfaces. 命令行询问库 - [**enquirer**](https://github.com/nasa/openmct) 命令行 prompt 询问库，写 cli 的时候很有用 - [**Qoa**](https://github.com/klaussinani/qoa) 同上 - [**cli-progress**](https://github.com/AndiDittrich/Node.CLI-Progress) Terminal Progress Bar - [**cli-table**](https://github.com/Automattic/cli-table) tables for the CLI - [**node-notifier**](https://github.com/mikaelbr/node-notifier) 在 NodeJS 环境中，可以很方便的唤起 notifier 通知 ### 文件处理相关 - [**rimraf**](https://github.com/isaacs/rimraf) 删除文件 - [**globby**](https://github.com/sindresorhus/globby) 用于模式匹配目录文件 - [**glob**](https://github.com/isaacs/node-glob) 文件查找 - [**tiny-glob**](https://github.com/terkelg/tiny-glob) 文件查找 - [**chokidar**](https://github.com/paulmillr/chokidar) node 监听文件变化的库 - [**fs-extra**](https://github.com/jprichardson/node-fs-extra) fs-extra 模块是系统 fs 模块的扩展，提供了更多便利的 API，并继承了 fs 模块的 API - [**execa**](https://github.com/sindresorhus/execa) 比 child_process 好用，返回 Promise - [**npm-run-all**](https://github.com/mysticatea/npm-run-all) 一个 CLI 工具可以并行或者串行执行 script 指令 - [**memfs**](https://github.com/streamich/memfs) memory-fs 的替代品，将文件放在内存中优化读写，webpack 依赖 ### 开发调试相关 - [**browser-sync**](https://github.com/BrowserSync/browser-sync) 浏览器同步调试工具包 - [**fx**](https://github.com/antonmedv/fx) 命令行优化 JSON 输出 - [**dumper.js**](https://github.com/zeeshanu/dumper.js) 能让你的 node console 更加的规整，方便调试 - [**ndb**](https://github.com/GoogleChromeLabs/ndb) node 调试 - [**why-is-node-running**](https://github.com/mafintosh/why-is-node-running) 查看 node 为什么在运行 - [**siege**](https://www.joedog.org/siege-home/) 压测工具 ### Webpack - [**webpackbar**](https://github.com/nuxt/webpackbar) webpack 打包进度条 - [**jarvis**](https://github.com/zouhir/jarvis) webpack dashboard - [**webpack-chain**](https://github.com/neutrinojs/webpack-chain) 通过 chain 风格 api 的方式修改 webpack 配置 - [**speed-measure-webpack-plugin**](https://github.com/stephencookdev/speed-measure-webpack-plugin) 统计 webpack 各阶段的耗时 - [**obsolete-webpack-plugin**](https://github.com/ElemeFE/obsolete-webpack-plugin) 基于 browserslist 做浏览器升级提示 - [**mini-css-extract-plugin**](https://github.com/webpack-contrib/mini-css-extract-plugin) 提取 CSS 为单独文件 - [**copy-webpack-plugin**](https://github.com/webpack-contrib/copy-webpack-plugin) 复制额外的文件到输出目录 - [**duplicate-package-checker-webpack-plugin**](https://github.com/darrenscerri/duplicate-package-checker-webpack-plugin) 检查是否存在重复依赖 - [**cssnano**](https://github.com/cssnano/cssnano) CSS 压缩 - [**bundle-buddy**](https://github.com/samccone/bundle-buddy) webpack bundle 依赖分析 ### 移动端 - [**fastclick**](https://github.com/ftlabs/fastclick) 解决移动端一些点击问题 ### 性能优化 - [**workbox**](https://github.com/googlechrome/workbox) PWA 方案，Google 出品 ### 请求处理 - [**axios**](https://github.com/axios/axios) 目前最常见的请求库 - [**got**](https://github.com/sindresorhus/got) http 请求库如果你觉得 request 太多的话这是一个不错的选择 - [**request**](https://github.com/request/request) 老牌请求库 - [**whatwg-fetch**](https://github.com/github/fetch) fetch 请求库 - [**grpc-web**](https://github.com/grpc/grpc-web) 前端直连 gRPC 服务 - [**node-fetch**](https://github.com/bitinn/node-fetch) node 环境下轻量级 fetch 请求库 - [**reqwest**](https://github.com/ded/reqwest) ### 工程化相关 - [**lerna**](https://github.com/lerna/lerna) monorepo 管理 - [**lerna-changelog**](https://github.com/lerna/lerna-changelog) 为 lerna 项目自动生成 changelog - [**eslint**](https://github.com/eslint/eslint) JS 风格约束 - [**eslint-config-airbnb**](https://github.com/airbnb/javascript) airbnb 约束风格 - [**xo**](https://github.com/xojs/xo) 封装自 eslint - [**prettier**](https://github.com/prettier/prettier) 更主观的风格自动修改 - [**yeoman-generator**](https://github.com/yeoman/generator) 脚手架工具 - [**serve**](https://github.com/zeit/serve) 本地静态服务器 - [**np**](https://github.com/sindresorhus/np) npm publish 辅助，自动 push、打 tag、升版本等 - [**lint-staged**](https://github.com/okonet/lint-staged) eslint 提速，只 lint 提交的代码 - [**coveralls**](https://github.com/marketplace/coveralls) 覆盖率 - [**husky**](https://github.com/typicode/husky) 添加 git hooks - [**cross-env**](https://github.com/kentcdodds/cross-env) 跨平台的环境变量声明 - [**nvm**](https://github.com/creationix/nvm) 管理 node 版本 - [**concurrently**](https://github.com/kimmobrunfeldt/concurrently) 在 npm scripts 里并行执行命令 - [**@zeit/ncc**](https://github.com/zeit/ncc) 打包为 npm 包为一个文件 - [**npm-check**](https://github.com/dylang/npm-check) 检测依赖升级情况，我会和 `yarn upgrade-interactive` 配合着用，主要用来检测冗余依赖 - [**cpx**](https://github.com/mysticatea/cpx) 复制，支持 glob，并且可以 watch - [**onchange**](https://github.com/Qard/onchange) 监听文件变动然后做一些事 - [**tasksfile**](https://github.com/pawelgalazka/tasksfile) 在 node 中执行 script 脚本 ## 插件 - [**pulltorefresh.js**](https://github.com/BoxFactura/pulltorefresh.js) 下个下拉刷新插件 - [**chancejs**](https://github.com/chancejs/chancejs) Chance 是一个轻量级的随机字符串生成器 JavaScript 插件，可帮助减少编写单调的代码，特别是在编写自动化测试时经常需要各种随机内容。 - [**instant.page**](https://instant.page/) 一个判断用户行为预测提前加载页面的库 - [**screenfull.js**](https://github.com/sindresorhus/screenfull.js) 浏览器全屏插件解决了不少兼容性问题 # 常用工具 **这里主要推荐一下平时常用的工具。** ## 通用工具 - [**Google 学术**](https://scholar.google.com) - [**掘金高级搜索**](http://zy2071.com/Fun/jueJinSearch.html) - [**grep.app**](https://grep.app/)搜索 50 万个 git repos - [**Pinbox**](https://withpinbox.com/) 跨平台收藏工具 - [**Uzer.me**](https://uzer.me/z/apps) 在网页上面可以直接使用常用的办公工具的云端软件平台 ## 技术工具 - [**photopea**](https://www.photopea.com/) 在线PS网站 - [**PS**](https://ps.gaoding.com/) 在线PS网站，国内适配版 - [**badge**](https://badgen.net/) Fast badge generating service - [**jsPerf**](https://jsperf.com/) 在线 js 性能测试工具 - [**StorePreviewer**](https://www.storepreviewer.com) See What Your App Will Look Like On The App Store - [**squoosh**](https://squoosh.app/) Squoosh 是一个理想的图片压缩，可以离线使用的 Web App - [**lerna**](https://github.com/lerna/lerna) Lerna 是一个管理包含多个软件包的 JavaScript 项目的工具 - [**ReLaXed**](https://github.com/RelaxedJS/ReLaXed) 一个将 document html 转成 PDF 的工具 - [**tui.editor**](https://github.com/nhnent/tui.editor) markdown 所见即所得编辑器 - [**percollate**](https://github.com/danburzo/percollate) 命令行工具能将网页转换成 pdf - [**cloudquery**](https://github.com/cloudfetch/cloudquery) 点击几下就可以把任何网站变成 API - [**public-apis**](https://github.com/toddmotto/public-apis) 汇集了市面上一些对外免费开放的 api，做一些自己练手 app 的时候很好用 - [**runkit**](https://runkit.com) 一个基于 node 的在线 playground - [**sketchviz**](https://sketchviz.com/new) 手绘风格流程图 - [**storybook**](https://github.com/storybooks/storybook)Storybook 是一个 UI 组件的开发环境。它允许您浏览组件库，查看每个组件的不同状态，以及交互式地开发和测试组件。 - [**high-speed-downloader**](https://github.com/high-speed-downloader/high-speed-downloader) 百度网盘不限速下载支持 Windows 和 Mac - [**hyper**](https://github.com/zeit/hyper) 前端命令行 - [**yapi**](https://github.com/ymfe/yapi) 是一个可本地部署的、打通前后端及 QA 的、可视化的接口管理平台 - [**sway**](https://sway.com/) 一个微软自己出的在线 ppt 很强大 - [**Ascii Art Generator**](https://asciiartgen.now.sh) 在线生成 Ascii 图案 - [**Winds**](https://github.com/GetStream/Winds) 开源 RSS - [**JSUI**](https://github.com/kitze/JSUI) 一个用来控制管理前端项目的客户端 - [**docz**](https://github.com/pedronauck/docz) 让你能快速写文档的一个库 - [**hiper**](https://github.com/pod4g/hiper) 性能统计分析工具 - [**verdaccio**](https://github.com/verdaccio/verdaccio) 私有 npm - [**git-guide**](http://rogerdudler.github.io/git-guide/index.zh.html) git 入门指南 - [**git-tips**](https://github.com/521xueweihan/git-tips) git 进阶 - [**bit**](https://github.com/teambit/bit) 实现了项目之间的代码共享可以自建私有 - [**simpread**](https://github.com/Kenshin/simpread) 简悦 ( SimpRead ) 让你瞬间进入沉浸式阅读的扩展 - [**mkcert**](https://github.com/FiloSottile/mkcert) 一键命令让本地也支持 https - [**termtosvg**](https://github.com/nbedos/termtosvg) 录制命令操作转成 svg 基于 python - [**gh-polls**](https://github.com/apex/gh-polls) 可以在 github issue 中添加投票 - [**eruda**](https://github.com/liriliri/eruda) 移动端调试工具 - [**vConsole**](https://github.com/Tencent/vConsole) 也是一个移动端调试工具腾讯出品 - [**terminalizer**](https://github.com/faressoft/terminalizer) 命令行录制工具基于 node - [**badgen**](https://github.com/amio/badgen-service) 快速构建和 shields 一样的 svg badge 但速度更快 - [**readability**](https://github.com/luin/readability) 移除页面非正文部分基于 jsdom - [**WeChatPlugin-MacOS**](https://github.com/TKkk-iOSer/WeChatPlugin-MacOS) 一款功能强大的 macOS 版微信小助手 - [**puppeteer-recorder**](https://github.com/checkly/puppeteer-recorder) 一个 chrome 插件能够根据你的操作自动生成 puppeteer 相关代码 - [**mdx-deck**](https://github.com/jxnblk/mdx-deck) 用 markdown 编写演示文稿 - [**code-surfer**](https://github.com/pomber/code-surfer) 基于 mdx-deck 的一个插件让你更好的在文稿中展示 code - [**Progressive Tooling**](https://progressivetooling.com/) 前端性能优化工具集合 - [**https://github.com/artf/grapesjs**](https://github.com/artf/grapesjs) 可视化建站工具不需要写代码就能写一个页面，前端再次再次要下岗了 - [**image-charts**](https://www.image-charts.com/) 该服务通过 URL 接受参数，然后生成图表，以图片形式返回 - [**eagle.js**](https://github.com/Zulko/eagle.js) 一个用 vue 来制作 PPT 的库 - [**Optimizely**](https://www.optimizely.com/) A/B Test - [**appadhoc**](http://www.appadhoc.com/) 一个国内的 A/B Test 服务 - [**glorious-demo**](https://github.com/glorious-codes/glorious-demo) 通过编写代码的方式构建一个命令行的演示例子 - [**nginxconfig**](https://github.com/valentinxxx/nginxconfig.io/) 可视化配置 nginx 提供了多个基础模板 - [**bundlephobia**](https://bundlephobia.com/) 一个可以查看某个库的大小，并且分析它的依赖 - [**jsperf**](https://jsperf.com/popular) 一个提供在线 test case 的网站，主要用来比较性能。可以比较如： forEach vs for 的性能 - [**perflink**](https://github.com/lukejacksonn/perflink) 与 jsperf 类似的一个比较 js 性能的网站 - [**algorithm-visualizer**](https://github.com/algorithm-visualizer/algorithm-visualizer) 算法代码可视化 - [**An-English-Guide-for-Programmers**](https://github.com/yujiangshui/An-English-Guide-for-Programmers) 专为程序员编写的英语学习指南 - [**Webhint**](https://webhint.io/) 用于检查代码的可访问性、性能和安全的开源检查（Linting）工具 - [**airtap**](https://github.com/airtap/airtap) 测试浏览器兼容性，可覆盖 800 多种浏览器 - [**jsonstore**](https://github.com/bluzi/jsonstore) 供免费，安全且基于 JSON 的云数据存储，自己玩的小项目神器 - [**git-history**](https://github.com/pomber/git-history) 可视化查看一个文件的历史变化 - [**x-spreadsheet**](https://github.com/myliang/x-spreadsheet) 一个基于 Canvas 的 JS 电子表格库 excel - [**imgcook**](https://imgcook.taobao.org/) 阿里出品，一键通过设计稿生成代码 - [**majestic**](https://github.com/Raathigesh/majestic) jest 可视化 - [**leon**](https://github.com/leon-ai/leon) 你开源项目的 ai 个人助手 - [**js-code-to-svg-flowchart**](https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart) 将代码逻辑用流程图的方式展现出来 - [**xterm.js**](https://github.com/xtermjs/xterm.js) 一个 web terminal - [**pixelmatch**](https://github.com/mapbox/pixelmatch) diff 两张图片不一样的地方 - [**readme-md-generator**](https://github.com/kefranabg/readme-md-generator) 一个命令行脚本帮你快速的创建一个 README - [**build-tracker**](https://github.com/paularmstrong/build-tracker) 构建大小追踪记录你多个版本构建后文件大小的变化 - [**zan-proxy**](https://github.com/youzan/zan-proxy/blob/master/README.zh-CN.md) 本地调试线上环境的工具 - [**mjml**](https://github.com/mjmlio/mjml) 一个让发 email 更简单的框架。定义了一套自己的语法，你用这套语法写邮件，然后编译成 HTML。 - [**any-rule**](https://any86.github.io/any-rule/) 正则大全 - [**outline**](https://github.com/outline/outline) 一个免费开源的库，能让你快速搭建自己的 wiki ## 浏览器 - [**Chrome**](https://www.google.com/chrome/) - [**Firefox**](http://www.firefox.com.cn/) - [**Firefox 开发者版本**](https://www.mozilla.org/zh-CN/firefox/developer/) - [**Edge**](https://www.microsoft.com/zh-cn/edge) - [**Opera**](http://www.oupeng.com/tor) - [**Safari**](https://www.apple.com.cn/safari/) - [**QQ 浏览器**](https://browser.qq.com/?adtag=SEM170314031) ## VS Code - [**marketplace.visualstudio.com**](https://marketplace.visualstudio.com/) VSCode的官方插件市场 - [**Live Server**]() 一个具有实时加载功能的小型服务器 ### 通用 - [**Import Cost**](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) 查看你引入的依赖模块大小 - [**Auto Close Tag**](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag) 自动补全 html 标签，如输入``将自动补全`` - [**Auto Rename Tag**](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) 自动重命名 html 标签，如修改`为`，将自动修改结尾标签`为` - [**polacode**](https://github.com/octref/polacode) 生产代码图片快照插件 - [**vscode-leetcode**](https://github.com/jdneo/vscode-leetcode) 一个能让你在 vscode 中刷 LeetCode 的插件算一个划水神器吧 - [**vscode-icons**](https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons) VS Code 必备吧，为文件添加炫图标 - [**CodeSnap**](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap) 生产代码截图 ### 主题 - [**官方主题页**](https://marketplace.visualstudio.com/search?target=VSCode&category=Themes&sortBy=Installs) 可以选择自己喜欢的主题 - [**one-monokai**](https://marketplace.visualstudio.com/items?itemName=azemoh.one-monokai) 我用的是这个主题，很多年了 ### 字体 - [**FiraCode**](https://github.com/tonsky/firacode) - [**Dank Mono**](https://dank.sh/) - [**Operator Mono**](https://www.typography.com/blog/introducing-operator) ## Chrome 扩展 - [**图片助手(ImageAssistant)**](https://chrome.google.com/webstore/detail/imageassistant-batch-imag/dbjbempljhcmhlfpfacalomonjpalpko) 图片助手(ImageAssistant) 批量图片下载器 - [**Tampermonkey**](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo) 油猴神器 - [**扩展管理器**](https://chrome.google.com/webstore/detail/extension-manager/gjldcdngmdknpinoemndlidpcabkggco/related?utm_source=chrome-ntp-icon) 轻松管理扩展，就不用担心安装太多扩展了 - [**visbug**](https://github.com/GoogleChromeLabs/ProjectVisBug) 它可以帮助你改变 css，移动元素等等一系类强大的功能,页面调试神器。当然有些时候还是 DevTools 更好用 - [**refined-github**](https://github.com/sindresorhus/refined-github) 优化 github 默认功能和样式的 chrome 插件 - [**ADB**](https://chrome.google.com/webstore/detail/adb/dpngiggdglpdnjdoaefidgiigpemgage) chrome 真机调试安卓神器 - [**Adblock Plus**](https://chrome.google.com/webstore/detail/adblock-plus-free-ad-bloc/cfhdojbkjhnklbpkdaibdccddilifddb) 免费广告拦截程序这个应该不用说了，装机必备 - [**Axure RP Extension**](https://chrome.google.com/webstore/detail/axure-rp-extension-for-ch/dogkpdfcklifaemcdfbildhcofnopogp) 看原型必备 - [**JSON Formatter**](https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa) JSON 格式化程序员必备 - [**Lighthouse**](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) 谷歌出品，检查网页综合性能评分，分析不足 - [**二维码(QR 码)生成器**](https://chrome.google.com/webstore/detail/%E4%BA%8C%E7%BB%B4%E7%A0%81qr%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8qr-code-generato/pflgjjogbmmcmfhfcnlohagkablhbpmg) 手机扫码神器 - [**Octotree**](https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc) github 上看代码必备神器 - [**OctoLinker**](https://chrome.google.com/webstore/detail/octolinker/jlmafbaeoofdegohdhinkhilhclaklkp) 能在 github 上看代码的时候快速链接跳转到依赖的库 - [**The Great Suspender**](https://chrome.google.com/webstore/detail/the-great-suspender/klbibkeccnjlkjkiokjodocebajanakg) chrome 太吃内存了，当页面开的很多时候会很卡，它就完美的解决了这个问题。它将几分钟没浏览过的页面都挂载了，当你想看是再重新加载 - [**WEB 前端助手**](https://chrome.google.com/webstore/detail/web%E5%89%8D%E7%AB%AF%E5%8A%A9%E6%89%8Bfehelper/pkgccpejnmalmdinmhkkfafefagiiiad) 支持 JSON 格式化、二维码生成与解码、代码压缩、Markdown 与 HTML 互转、网页滚动截屏、正则表达式、时间转换工具、JSON 比对工具等 - [**掘金**](https://chrome.google.com/webstore/detail/%E6%8E%98%E9%87%91/lecdifefmmfjnjjinhaennhdlmcaeeeb) 目前我默认新开 tab 的默认页，可以刷刷新的文章或者项目，还不错。 - [**沙拉查词**](https://chrome.google.com/webstore/detail/%E6%B2%99%E6%8B%89%E6%9F%A5%E8%AF%8D-%E8%81%9A%E5%90%88%E8%AF%8D%E5%85%B8%E5%88%92%E8%AF%8D%E7%BF%BB%E8%AF%91/cdonnmffkdaoajfknoeeecmchibpmkmg) 划词翻译插件 - [**npmhub**](https://github.com/npmhub/npmhub)在 README 下方显示 npm 依赖信息 - [**Ghelper**](http://googlehelper.net/)一个简单的用于访问 google 的插件 ## 编辑器和 Terminal - [**Go2shell**](https://zipzapmac.com/Go2Shell) 在当前文件夹打开 shell - Terminal 用 [**iTerm2**](https://www.iterm2.com/) + [**zsh**](https://en.wikipedia.org/wiki/Z_shell) + [**oh-my-zsh**](https://github.com/robbyrussell/oh-my-zsh) 的组合，主题是 [robbyrussell](https://github.com/robbyrussell/oh-my-zsh/blob/master/themes/robbyrussell.zsh-theme) ## zsh 插件 - [**Homebrew**](https://brew.sh/index_zh-cn) 必装 - [**autojump**](https://github.com/ohmyzsh/ohmyzsh/tree/master/plugins/autojump) 实现目录间快速跳转，想去哪个目录直接 j + 目录名，不用在频繁的 cd 了 - [**zsh-autosuggestions**](https://github.com/zsh-users/zsh-autosuggestions) 命令自动建议和补全 - [**zsh-syntax-highlighting**](https://github.com/zsh-users/zsh-syntax-highlighting) 命令行语法高亮 - [**history**](https://github.com/ohmyzsh/ohmyzsh/tree/master/plugins/history) 命令行记录 - [**zsh-git-prompt**](https://github.com/olivierverdier/zsh-git-prompt) git 分支信息提示 ## 开发常用软件 - [**Github Desktop**](https://github.com/desktop/desktop)管理 github 仓库的变更和 PR - [**runjs**](https://runjs.dev/) js 运行沙盒，写 test case 或者面试当场写代码的时候很有用 - [**Charles**](https://www.charlesproxy.com/) 抓包用，支持 https - [**Google Chrome**](https://www.google.com/chrome/) 前端必备没啥好说的 - [**ColorSnapper2**](https://colorsnapper.com/) 取色工具 - [**postman**](https://www.getpostman.com/) api 调试工具 - [**Sequel Pro**](https://www.sequelpro.com/) MySQL 界面管理工具 - [**KeepingYouAwake**](https://github.com/newmarcel/KeepingYouAwake) 可保证系统不自动休眠，挂机跑脚本很有用 - [**Swagger UI**](https://swagger.io/tools/swagger-ui/) Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务，部署管理和使用 API ## 其他有趣的工具 - [**演示图灵完备**](http://fatiherikli.github.io/brainfuck-visualizer/) Brainfuck Visualizer 演示图灵完备 - [**the-bread-code**](https://github.com/hendricius/the-bread-code) 使用程序员的思维制作面包，比如制作中使用 A/B test, 来比较那种做法更好。 - [**build-your-own-x**](https://github.com/danistefanovic/build-your-own-x) 教你用各种语言实现 Bot Database Neural Network - [**javascript-algorithms**](https://github.com/trekhleb/javascript-algorithms) 教你用前端知识认识各种算法 - [**not-paid**](https://github.com/kleampa/not-paid) 如果你给人做网站，交过去以后对方没有付款，那么这个 JS 会把网站的透明度一天调低一点，直到看不见 - [**nsfwjs**](https://github.com/infinitered/nsfwjs) 前端图片鉴黄，基于 Tensorflow - [**elevator.js**](https://github.com/tholman/elevator.js) 我很喜欢的一个库，让一个 back-to-top 的效果有了一种坐复古电梯的感觉 - [**app-ideas**](https://github.com/florinpop17/app-ideas) 很多年轻人苦于缺少练手的项目，这个项目收集了不少点子，每个点子都有明确的目标和复杂资源。 - [**WebGL-Fluid-Simulation**](https://github.com/PavelDoGreat/WebGL-Fluid-Simulation) 很酷的 WebGL 交互 - [**react-kawaii**](https://github.com/miukimiu/react-kawaii) 一个非常可爱的 React 卡通人脸库，很有意思 - [**chart-race-react**](https://github.com/Mckinsey666/chart-race-react) 图表竞赛长条图赛跑动画在微博或者 b 站这种类型视频很火 - [**98.css**](https://jdan.github.io/98.css/#tree-view) windows 98 主题分格 css ## 录制 - [**licecap**](https://www.cockos.com/licecap/) gif 录制，简洁好用，之前都用这个录制 - [**kap**](https://getkap.co/) 现在都用这个录制 gif，还支持导出 mp4，录制的 fps 很高 - [**KeyCastr**](https://github.com/keycastr/keycastr) 按键显示，录制的时候显示你的按键 ## Ubuntu ## Mac - [**get-plain-text**](https://itunes.apple.com/cn/app/get-plain-text/) 能清除剪贴板里的格式很实用 - [**IINA**](https://github.com/lhc70000/iina) mac 平台感觉免费最好的播放器强推 - [**magnet**](https://itunes.apple.com/cn/app/magnet/id441258766?mt=12&ign-mpt=uo%3D4) 分屏管理 - [**Xnip**](https://zh.xnipapp.com/) 方便好用的截图工具-支持截长图 - [**Spectacle**](https://www.spectacleapp.com/) 窗口管理工具 - [**vanilla**](https://matthewpalmer.net/vanilla/) 顶栏图标管理工具 - [**Dozer**](https://github.com/Mortennn/Dozer) 一个开源的顶栏管理 - [**腾讯电脑管家**](https://mac.guanjia.qq.com/index_o.html) 反正我用下来好觉得蛮好用的 - [**mos**](https://mos.caldis.me/) 鼠标平滑滚动软件，很好用。免费开源 - [**sequel pro**](https://www.sequelpro.com/) mysql 客户端好用 - [**Microsoft Remote Desktop Beta**](https://itunes.apple.com/us/app/microsoft-remote-desktop/id715768417?mt=12#) Mac 远程登录 Windows 调试神器 - [**pap.er**](http://paper.meiyuan.in/) 专为 Mac 设计的壁纸应用 - [**The Unarchive**](https://theunarchiver.com/) Mac 目前感觉最好用的免费解压软件 - [**Tickeys**](https://github.com/yingDev/Tickeys) 让你用 Mac 键盘也能打出机械键盘的感觉 - [**Beaker Browser**](https://github.com/beakerbrowser/beaker) P2P 开源浏览器支持点对点发布文件，成为了文件传输工具，支持 DAT 对等协议 - [**Gifski**](https://github.com/sindresorhus/gifski-app) 视频转 gif 工具 - [**more**](https://github.com/serhii-londar/open-source-mac-os-apps) 更多优秀的 mac app 介绍 - [**Motrix**](https://github.com/agalwood/Motrix) 支持 HTTP、FTP、BT、磁力链、百度网盘的下载工具 - [**webui-aria2**](https://ziahamza.github.io/webui-aria2/) 下载工具 Aria 的 WebUI 工具 - [**iPic**](https://apps.apple.com/cn/app/ipic-markdown-%E5%9B%BE%E5%BA%8A-%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E5%B7%A5%E5%85%B7/id1101244278?mt=12)这个应用可以让你方便地上传图片到各种图床 - [**Image2Icon**](http://www.img2icnsapp.com/) - [**hidden**](https://github.com/dwarvesf/hidden) 是用来帮助你隐藏 macOS 菜单栏上那些不常用的应用图标 ## 在线解析工具 - [**C 在线工具**](https://tool.oschina.net) - [**esprima.org 在线解析 AST**](https://esprima.org/demo/parse.html) - [**AST Visualization on browser 在线解析 AST**](http://nhiro.org/learn_language/AST-Visualization-on-browser.html) - [**ASTexplorer 在线解析 AST**](https://astexplorer.net/) - [**md5 在线解密破解,md5 解密加密**](https://www.cmd5.com/) - [**JSON 在线解析及格式化验证**](https://www.json.cn) - [**在线二维码生成器**](https://cli.im/) - [**在线正则解析工具**](https://regexper.com) - [**在线正则解析工具**](https://jex.im/regulex/) - [**在线测速**](https://www.17ce.com/) - [**站长工具**](http://tool.chinaz.com/) - [**在线转 pdf**](https://www.aconvert.com/cn/pdf/odt-to-pdf/) - [**地图选择器**](http://datav.aliyun.com/tools/atlas/) 获取对应地图区域的 geojson 和 svg - [**图片背景消除**](https://www.remove.bg/zh) 在线抠图工具，去除图片背景 - [**在线删除图片背景**](https://www.gaoding.com/koutu) 在线抠图工具，去除图片背景 # 教程与书籍 **这里主要记录一下有用的教程与书籍。** ## 1.书籍 ### Book - [**Regular Expressions for Regular Folk**](https://refrf.shreyasminocha.me/chapters/introduction) 正则表达式 ### JavaScript && ECMAScript && TypeScript - [**JavaScript 入门教程**](https://wangdoc.com/javascript/) 介绍 JavaScript 核心语法，覆盖了 ES5 和 DOM 规范的所有内容 - [**JavaScript 教程**](https://www.liaoxuefeng.com/wiki/1022910821149312) - [**JavaScript 迷你书**](http://liubin.org/promises-book/) - [**JavaScript&HTML&CSS 手册**](https://www.jc2182.com/javascript/javascript-html-dom-ref.html) - [**ECMAScript 入门教程**](https://es6.ruanyifeng.com/) - [**《Understanding ECMAScript 6》（简体中文版）**](https://oshotokill.gitbooks.io/understandinges6-simplified-chinese/content/) - [**TypeScript 入门教程**](https://ts.xcatliu.com/) 从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。 - [**深入理解 TypeScript**](https://jkchao.github.io/typescript-book-chinese/#why/) 此书是《TypeScript Deep Dive》的中文翻译版 - [**TypeScript 手册**](https://www.w3cschool.cn/typescript/typescript-tutorial.html) ### Html && CSS ### React &&　 Vue - [**React 源码解析**](https://react.jokcy.me/) - [**react-in-patterns**](https://github.com/SangKa/react-in-patterns-cn) 一本开源教你如何写 react 的书 - [**Vue 测试指南**](https://lmiller1990.github.io/vue-testing-handbook/zh-CN/) vue 测试指南 ### Node - [**node-in-debugging**](https://github.com/nswbmw/node-in-debugging) node.js 调试指南 - [**node-best-practices**](https://github.com/i0natan/nodebestpractices) node 最佳实践 - [**Node.js 最佳实践**](https://github.com/i0natan/nodebestpractices/blob/master/README.chinese.md) - [**狼叔：如何正确的学习 Node.js**](https://github.com/i5ting/How-to-learn-node-correctly) - [**npx**](https://egghead.io/courses/execute-npm-package-binaries-with-the-npx-package-runner) 教你怎么合理的使用 npx - [**Node.js CLI Apps Best Practices**](https://github.com/lirantal/nodejs-cli-apps-best-practices) 教你如何写好一个 node cli 工具 ### 函数式编程 - [**函数式编程指北**](https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html) ### 移动端 - [**mobile-web-best-practice**](https://github.com/mcuking/mobile-web-best-practice) 移动 web 最佳实践 ### 信息安全 - [**hacksplaining**](https://www.hacksplaining.com/lessons) 网络安全学习网站 ### Python - [**Think Python**](https://codingpy.com/books/thinkpython2/index.html) 《Think Python 2e》最新版中文翻译，还不错的 Python 入门教程 ### 其他 - [**SQL Murder Mystery**](https://mystery.knightlab.com/walkthrough.html) 一个英文的 SQL 初级教程，以游戏的方式，让你利用学到的 SQL 概念和命令来找出谋杀凶手 - [**Webpack 知识图谱**](https://tsejx.github.io/webpack-guidebook/) webpack 相关教程和原理分析还不错 - [**A-Programmers-Guide-to-English**](https://a-programmers-guide-to-english.harryyu.me/#) 专为程序员编写的英语学习指南 - [**Http, 数据结构，操作系统等**](https://hit-alibaba.github.io/interview/) - [**前端全栈技术介绍**](https://xiaohuochai.site) ## 2.实践教程 - [**crate**](https://github.com/atulmy/crate) 一个 react 全栈练习(pc,mobile,rn,api) demo，适合入门拿来练手 - [**vanillawebprojects**](https://github.com/bradtraversy/vanillawebprojects) 通过纯前端的手段实现一些小项目，适合入门 ## 3.视频教程 && 交互式学习 - [**FCC**](https://www.freecodecamp.org/learn) FreeCodeCamp 是 GitHub 上排名第一的开源项目，致力于帮助人们利用零散时间学习编程。 - [**css-tricks**](https://css-tricks.com/) 一个学习 css 不错的网站有很多有意思的 demo - [**Java 教程**](https://how2j.cn/) - [**深入浅出现代 Web 编程**](https://fullstackopen.com/zh/)一站式学习 React, Redux, Node.js, MongoDB, GraphQL 以及 TypeScript！ - [**sololearn**](https://www.sololearn.com/)交互式学习 Python 3,C++， Java - [**web.dev**](https://web.dev/learn/)可以由 Google 开发者 M 带你了解 Web 基础 - [**scrimba**](https://scrimba.com/)一个交互式编程教学网站，视频播放过程中,你可以随时编辑正在演示的代码 - [**Git 教学**](https://learngitbranching.js.org/?locale=zh_CN)一个交互式 git 教学网站 ## 4.网络课程平台 - [**拉勾教育**](https://edu.lagou.com/) - [**慕课网**](https://www.imooc.com/) - [**中国大学 MOOC**](https://www.icourse163.org/) - [**MOOC 中国**](https://www.mooc.cn/course) - [**网易云课堂**](https://study.163.com/) - [**网易公开课**](https://open.163.com/) - [**TED**](https://www.ted.com/) - [**MIT 开源课程**](https://ocw.mit.edu/) # 文章收集 ::: tip 说明主要是用来收集汇总平时看过得一些不错的文章，方便日后查找 ::: ## 浏览器 [How browsers work](http://taligarsiel.com/Projects/howbrowserswork1.htm#Resources) ## 编程 [leetcode 题解](https://github.com/azl397985856/leetcode) 用 js 刷 leetcode [代码重构经验](https://panjiachen.github.io/awesome-bookmarks/article/coding.html) [Functors, Applicatives, And Monads In Pictures](http://adit.io/posts/2013-04-17-functors,_applicatives,_and_monads_in_pictures.html) ## React ## Vue [手摸手，带你用 vue 撸后台系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2) [手摸手，带你用 vue 撸后台系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac) [手摸手，带你用 vue 撸后台系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35) [手摸手，带你用 vue 撸后台系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56) [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836) [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09) ## 前端 [Press Enter to Submit 背后的那些事](http://david-chen-blog.logdown.com/posts/177766-how-forms-submit-when-pressing-enter) [Webnovel 国际化实践](https://juejin.im/post/5c24a09d5188252a9412fabf) [Things I Don’t Know as of 2018](https://overreacted.io/things-i-dont-know-as-of-2018/) [The TypeScript Tax: A Cost vs Benefit Analysis](medium.com/javascript-scene/the-typescript-tax-132ff4cb175b) 主要讲 ts 收益，具有一定可读性 [TypeScript 解决了什么痛点？](https://www.zhihu.com/question/308844713/answer/594169638) 比较中肯的一个答案，做技术不要盲目跟风 ## GraphQL [GraphQL 核心概念](https://segmentfault.com/a/1190000014131950) [RPC vs REST vs GraphQL](https://segmentfault.com/a/1190000013961872) [Why use GraphQL, good and bad reasons](https://honest.engineering/posts/why-use-graphql-good-and-bad-reasons) ## 职业发展 [一个程序员的成长之路](https://github.com/fouber/blog/issues/41) 张云龙大佬的文章，强推！！值得反复阅读。 [开发者如何在「技术+管理」的路上越走越宽？](https://zhuanlan.zhihu.com/p/36018203) [蔡志忠：努力是没有用的](https://www.yuque.com/book-academy/share/shp7tu) ## 视频 [计算机科学速成课](https://www.bilibili.com/video/av21376839) 计算机科学基础的系列视频，很不错，浅显易懂，看完这四十节课能多计算机世界有一个大概的整体认知。 ## 其它 [前端人工智能？TensorFlow.js 学会游戏通关](https://zhuanlan.zhihu.com/p/35451395) [谈谈 WebSocket ](https://halfrost.com/websocket/) [https://zhuanlan.zhihu.com/p/37171897](https://zhuanlan.zhihu.com/p/37171897) ## 小程序 [只需两步获取任何微信小程序源码](https://juejin.im/post/5b0e431f51882515497d979f?utm_source=花裤衩) 挺有意思的一篇文章 ## node [基于 node.js 的脚手架工具开发经历](https://juejin.im/post/5a31d210f265da431a43330e) [How to build a CLI with Node.js](https://www.twilio.com/blog/how-to-build-a-cli-with-node-js) ## 网络 [什么是 RPC 框架？](https://www.zhihu.com/question/25536695) [前端技术清单](https://github.com/alienzhou/frontend-tech-list) [关于 JavaScript 单线程的一些事](https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md) [从零开始开发一款属于你的 Visual Studio Code 插件](https://www.microsoft.com/china/events/video_316) ## AST [平庸前端码农之蜕变 — AST](https://github.com/CodeLittlePrince/blog/issues/19) ## 交互 [让功能找到用户；让用户体验美好「自然交互 1」](https://zhuanlan.zhihu.com/p/41952711) # 资源网站 ## 设计相关 [**No Design**](https://nodesign.dev/) 网站上收集了许多十分便利的 UI 设计工具与设计资源 [**500px**](https://500px.com/) 照片分享网站 [**觅元素**](http://www.51yuansu.com/) 设计元素的免费下载网站\_免抠素材 [**站酷海洛**](https://www.hellorf.com/) 设计师互动平台，素材交易网站 [**uimovement**](https://uimovement.com/) 能从这个网站找到不少动画交互的灵感 [**awwwards**](https://www.awwwards.com/)是一个一个专门为设计精美的网站以及富有创意的网站颁奖的网站 [**dribbble**](https://dribbble.com/) 经常能在上面找到很多有创意好看的 gif 或者图片，基本上我所有的图都是上面找的 [Pexels](https://www.pexels.com/zh-cn/)免费素材图片 [Iconfont-阿里巴巴矢量图标库](https://www.iconfont.cn/) ## 技术相关 [Android FOSS](https://github.com/offa/android-foss)安卓系统的免费开源软件（FOSS）清单 ## 前端开发 [Awesomes-Web 前端开发资源库](https://www.awesomes.cn) [BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务](https://www.bootcdn.cn) [Appscope - Progressive Web Apps Examples](https://appsco.pe/)Appscope 是一款专门用来收集渐进式网页应用 Progressive Web Apps(PWA)的网站 ## 技术书籍 [技术书籍资源下载](http://www.xwood.net/index.html) [免费计算机书籍汇总](https://github.com/ruanyf/free-books) ## 其他 [chrome 插件/扩展推荐](https://www.extfans.com) [蜗牛图书馆](http://wnlib.com/)蜗牛图书馆集成全球知名高校图书馆，包含上百种期刊数据库，提供一站式文献检索下载服务 [知网](https://www.cnki.net/) [wikipedia](https://www.wikipedia.org/)自由的百科全书 # 友情链接 **这里主要收集一些自己觉得不错的网站。** ## 其他人的收藏 - [**awesome-bookmarks**](https://panjiachen.gitee.io/awesome-bookmarks/repository/) panjiachen 的收藏站，也是本网站最初参考的网站。 - [**阮一峰的网络日志**](http://www.ruanyifeng.com/blog/) 阮老师出的东西还是值得一读的 - [**Vue 作者尤雨溪**](https://evanyou.me/) - [**张鑫旭的个人主页**](https://www.zhangxinxu.com/) - [**guojun49.gitee.io/**](https://guojun49.gitee.io/) ## 其他 - [**SF**](https://baizixv.gitee.io/bookmarks/selflife)