前端收藏夹

本项目为个人技术收藏夹，里面会不定期分享一些作者平时用到的一些库，或者常用的网站和小工具。

如果你有好的推荐你可以提 issue 或者 pr 来告诉作者

推荐库
- 前端常用
- Css && 动画
- Vue
- 实践库
- 文档
- 工具库
- Node
  - 工具库
  - 命令行
  - 文件处理
  - 调试
- GraphQL
- 工具
- Webpack
- 移动端
- 性能优化
- 请求处理
- 工程
- Mac
- 录制
- Chrome 拓展
- VS Code
  - 主题
  - 字体
- 编辑器和 Terminal
  - zsh 插件
- 开发常用软件
- 有趣
网站
- 常看的网站
- Github
- 开发
- 设计
- 有趣
- 交互
- Css
- 教程
- 产品
- 实用
- Talk
- 算法
- Typescript

# 推荐库

这里主要推荐一下自己平时常用，提高效率的一些库和软件。

# 前端常用

sweetalert2 (opens new window) 一个自适应，且自定义性强的弹出框（零依赖）
tippy.js (opens new window) 最著名的 tooltip/popover library
text-mask (opens new window) 可以让 input 按照规则输入(如电话,email,日期,信用卡等)，特殊格式 input
dinero.js (opens new window) 用来创建、计算和格式化货币价值的不可变的框架，支持国际化
lerna (opens new window) 大项目版本控制工具，项目中可以有多个 package.json 文件
img-2 (opens new window) 一个提高图片加载性能和体验的库，懒加载使用 web worker 模糊预览
fingerprintjs (opens new window) 是一个快速的浏览器指纹库，通浏览环境的一系列配置生成 id
ajv (opens new window) 一个 json schema 验证的库
dayjs (opens new window) 一个轻量级类 moment.js API 时间库
primjs (opens new window) 让页面支持代码高亮
ReLaXed (opens new window) 一个将 document html 转成 PDF 的工具
uppy (opens new window) 一个很好看的也很好用的前端上传库
Filepond (opens new window) 一个小巧的文件上传库
tui-calendar (opens new window) 功能全面的日程安排日历控件，还支持拖拽
tui.editor (opens new window) markdown 所见即所得编辑器
tabler (opens new window) 基于 Bootstrap 4 的 Dashboard UI Kit 和美观高颜值 ui 模板
pulltorefresh.js (opens new window) 下个下拉刷新插件
lulu (opens new window) 腾讯阅文基于 jQuery，针对 PC 网站 IE8+（peak 主题）的前端 UI 框架
chancejs (opens new window) 生成随机数据的库
spritejs (opens new window) 360 奇舞团出的跨平台绘图对象模型
tui.image-editor (opens new window) 一个功能齐全的在线图片编辑，基于 canvas
nanoid (opens new window) 前端轻量 unique string ID 生成库
rxdb (opens new window) 一款开源的快速、灵活的客户端数据库，支持各种浏览器以及 NodeJS，Electron、React 等等，是 PouthDB 之上的一个封装库
percollate (opens new window) 命令行工具能将网页转换成 pdf
rawact (opens new window) 一个 babel 插件，把 react 组件转为原生 dom
irondb (opens new window) 是一个浏览器 key-value 储存的封装库，把 Cookies、IndexedDB、LocalStorage、SessionStorage 统一成一个接口。它的最大特色就是数据冗余机制，即使某种底层储存机制失效，它可以从其他机制恢复数据。
big.js (opens new window) 解决 js 浮点数问题。主要就是 Big Number 或者小数点温柔
bignumber.js (opens new window) 同上
stickybits (opens new window) CSS 的 position: sticky 是一个很有用的设置，但是老的浏览器不支持。这个 JS 库是该功能的垫片库。
react-jsonschema-form (opens new window) Mozilla service 开源了一个通过 JSON 直接生成表单的 React 组件
cleave.js (opens new window) 用于在输入时格式化输入内容（信用卡格式、日期等）
shiny (opens new window) 在手机设备上模拟光的反射效果。支持 DeviceMotion 事件
cloudquery (opens new window) Turn any website to serverless API
A-Programmers-Guide-to-English (opens new window) 专为程序员编写的英语学习指南。
rrweb (opens new window) 一个可以记录你页面中所有操作的库
nodeppt (opens new window) markdown 写 ppt
flexsearch (opens new window) 能让你更加高效和快速的检索文本内容
public-apis (opens new window) 汇集了市面上一些对外免费开放的 api，做一些自己练手 app 的时候很好用。
scroll-hint (opens new window) 用于提示用户页面可以左右滑动的一个提示库
fuse.js (opens new window) 轻量级前端模糊查询库非常的好用
FileSaver.js (opens new window) 文件下载插件很多时候下载会有兼容性问题，它能帮你解决这些问题
instant.page (opens new window) 一个判断用户行为预测提前加载页面的库
screenfull.js (opens new window) 浏览器全屏插件解决了不少兼容性问题
VuePress (opens new window) 本网站就是基于它实现的，简单方便的静态网站生成器
selection (opens new window) 可视化选择页面元素的库
scroll-out (opens new window) 滚动效果（滚动视差）的框架，框架大小不到 1KB,使用回调的方式将相关动画元素的属性进行实时分配
gpu.js (opens new window) 通过将 js 转为特定的 language，利用 GPU 来执行，大大提高了执行性能和速度
pressure (opens new window) 前端实现 3D Touch
hammer (opens new window) 移动端手势库
AlloyFinger (opens new window) 腾讯出的手势库
lowdb (opens new window) LowDB 是一个本地 JSON 数据库，基于 Lodash 开发的
JSON-server (opens new window) 可以配合 LowDB 使用快速搭建一个 REST API
lunr.js (opens new window) 是个用于浏览器的轻量级 JavaScript 全文搜索引擎,对于一些小型的博客、开发者文档或 Wiki 网站来说,完全可以通过它实现站内离线搜索
he (opens new window) 一个前端 encoder/decoder 库
grade (opens new window) 一个可以根据你的图片调整底色的插件
pretty-bytes (opens new window) 将字节转换成可以读的字符串，比如 1337 个字节，会显示成 1.34 KB
runkit (opens new window) 一个基于 node 的在线 playground
chart.xkcd (opens new window) 手绘风格的图表库
sketchviz (opens new window) 手绘风格流程图
pagemap (opens new window) Mini map for web pages 页面导航图
commonmark.js (opens new window) parser and renderer markdown
body-scroll-lock (opens new window) 解决滚动穿透问题
lodash (opens new window) 前端工具函数集合
dayjs (opens new window) 时间处理库，不过大部分情况下我还是用自己的封装的函数
lightgallery (opens new window) 图片预览组件
photoswipe (opens new window) 图片预览组件，支持移动端
darken (opens new window) 页面黑夜模式切换
mitt (opens new window) 轻量级 pub/sub
sanitize-html (opens new window) html 过滤库，防 xss
DOMPurify (opens new window) 比 sanitize-html 更轻量，建议一般业务用这个

# Css && 动画

animate.css (opens new window) 最有名的动画效果库
magic.css (opens new window) css 动画效果库类似 animate.css
popmotion (opens new window) 一个函数式声明前端动画库
NES.css (opens new window) 任天堂主题风格 css 库
particles.js (opens new window) 前端实现颗粒粒子的动画效果库，比较炫酷，但相对的也比较吃性能
PaperCSS (opens new window) 手绘风格感觉 css 库
rough (opens new window) 基于 Canvas 的手绘风格图形库
wired-elements (opens new window) 基于 rough.js 分装 button input radio 等组件。它的底层是 Web components
roughViz (opens new window) rough 风格的图表库手绘风格的图表库
matter-js (opens new window) web 物理引擎
micron (opens new window) 通过在元素上绑定属性从而实现动画效果的库
direction-reveal (opens new window) 根据鼠标进入位置，展现从不同方向展现 hover 效果
laxxx (opens new window) 滚动特效库轻量级压缩完 2kb
cssfx (opens new window) 优雅的 CSS 动画效果，开箱即用
zdog (opens new window) 3D engine 引擎
leonsans (opens new window) 酷炫的字体动画 geometric sans-serif typeface made with code
css-doodle (opens new window) A web component for drawing patterns with CSS 一个用于使用 CSS 绘制图案的 Web 组件

# Vue

vue-multiselect (opens new window) select 组件目前 vue 里面用过最好用的
Vue.Draggable (opens new window) DnD 拖拽组件基于 Sortable.js 的 vue 版本
vue-sauce (opens new window) 一个可以展示 vue 源码的指令
vue-smooth-dnd (opens new window) Vue wrappers components for smooth-dnd
vuegg (opens new window) 一个 vue 可视化拖拽界面生成器
vee-validate (opens new window) 基于 vue 的验证，能验证的内容比较全
vuesax (opens new window) 一个很漂亮的基于 vue 的 ui 框架
vue-analytics (opens new window) 基于 vue 的谷歌统计封装
vue-virtual-scroller (opens new window) 基于 vue 的虚拟列表无限滚动
vue-content-placeholders (opens new window) 页面龙骨 skeleton
buefy (opens new window) 适配移动端的 vue 组件库看着还挺舒服的
vxe-table (opens new window)vue 表格解决方案，还没具体用过看着的确解决了其它 table 组件的一些问题
Vue 测试指南 (opens new window) vue 测试指南

# 实践库

Jasonette (opens new window) 一个用 json 来构建 hybrid App 的框架
crate (opens new window) 一个 react 全栈练习(pc,mobile,rn,api) demo，适合入门拿来练手
react-in-patterns (opens new window) 一本开源教你如何写 react 的书
hocs (opens new window) react 相关 hoc 收集库

# 文档

vuepress (opens new window) vue 官方出品的文档工具
docsify (opens new window) 轻量级文档工具，但其是运行时编译的，所以 seo 不好
GitBook (opens new window) 除了编译慢没啥毛病
mdx (opens new window) jsx + markdown
docz (opens new window)
storybook (opens new window)

# 工具库

live-server (opens new window) 可以快速启一个本地 dev 服务并且支持自动刷新的 http server
serve (opens new window) 快速起本地静态服务
picojs (opens new window) js 人脸识别库
es-checker (opens new window) 检查当前环境对 ES6 支持的情况。支持浏览器和 node.js
merge-images (opens new window) 图片合成，利用canvas能将几张图片合成一张
fabric.js (opens new window) 基于 canvas 创建交互式的图片编辑界面非常适合用来做图片合成类工作。
phaser (opens new window) 这是一个为桌面和移动浏览器开发 HTML5 游戏的快速开源框架。你可以为 iOS、 Android 和不同的本地应用程序创建游戏。
purifycss (opens new window) 移除没使用到的 css
dropcss (opens new window) 同上
fast-cli (opens new window) 命令行测试下载上传速度
@pika/web (opens new window) 让你不需要在本地 webpack 中 import，直接在游览器里面运行 npm 包
pinyin (opens new window) 汉字拼音转换工具
JavaScript Obfuscator Tool (opens new window) js 代码混淆工具
tesseract (opens new window) 图像识别，它能识别图片中的文字，支持中文
gka (opens new window) 一款高效、高性能的帧动画生成工具。只需一行命令，快速图片优化、生成动画文件，支持效果预览。
recast (opens new window) 前端 ast 库
jscodeshift (opens new window) 将 js 内容解析成 AST 语法树，然后提供一些便利的操作接口，方便我们对各个节点进行更改
stats.js (opens new window) 前端性能监控如 FPS、内存使用情况等
PapaParse (opens new window) 解析 csv excel
mddir (opens new window) 生成 markdown file/folder structure 目录结构 tree
imagemin (opens new window) 图片压缩库
inline-css (opens new window) css covert to inline style 在生成 email 格式 html 的时候特别有用
babel-plugin-try-catch-error-report (opens new window) 全局自动 catch 错误进行数据上报
StreamSaver.js (opens new window) 大文件下载，不用像 saveAs 那样先读到内存中再下载
mammoth.js (opens new window) Convert Word documents (.docx files) to HTML
npkill (opens new window) 列出所有 node_modules，并支持删除
strapi (opens new window) 开源的解决方案来创建、部署和管理自己的 API，通过图形化界面进行操作

# Node

# 工具库

cheerio (opens new window) 用类 jQuery 语法处理 HTML
node-semver (opens new window) node 版本验证库
live-server (opens new window) 一个简单的 http server 带有 reload 功能
node-portfinder (opens new window) 一个端口嗅探工具
update-notifier (opens new window)node 依赖升级提醒工具
fastscan (opens new window) node 敏感词库
hygen (opens new window) 快速方便的创建代码可以命令行创建预设的 template
plop (opens new window) 同上，代码生成工具
ink (opens new window) 是一个 React 的命令行渲染器，命令行界面可以像写页面那么写了
dotenv (opens new window) 通过.env 设置环境部变量 vue-cli 也依赖它
patch-package (opens new window) 优雅的修改 node_modules 中的依赖库
Playwright (opens new window) 同 Puppeteer 团队出品，但区别是它支持 Chrome、Safari、Firefox、Edge
tree-cli (opens new window) node 根据目录结构生成 tree
tree-node-cli (opens new window) node 根据目录结构生成 tree
open (opens new window) node 打开浏览器

# 命令行

signale (opens new window) 一个 Node 的日志格式库，自带 16 个级别，可以定制颜色和 Emoji，可扩展的日志记录器
consola (opens new window) 优雅的命令行 console logger vuepress 也使用了它
chalk (opens new window) 命令行着色美化库
progress-estimator (opens new window) 命令行 progress bar 进度条模拟库
ora (opens new window) Elegant terminal spinner 命令行 loading
listr (opens new window) Terminal task 命令行任务列表
yargs (opens new window) 命令行参数解析
y18n (opens new window) yargs 基于 i18n 的一个包
commander.js (opens new window) 自动的解析命令和参数，合并多选项，处理短参，等等，功能强大，上手简单
Inquirer.js (opens new window) A collection of common interactive command line user interfaces. 命令行询问库
enquirer (opens new window) 命令行 prompt 询问库，写 cli 的时候很有用
Qoa (opens new window) 同上
cli-progress (opens new window) Terminal Progress Bar
cli-table (opens new window) tables for the CLI
node-notifier (opens new window) 在 NodeJS 环境中，可以很方便的唤起 notifier 通知

# 文件处理

rimraf (opens new window) 删除文件
globby (opens new window) 用于模式匹配目录文件
glob (opens new window) 文件查找
tiny-glob (opens new window) 文件查找
chokidar (opens new window) node 监听文件变化的库
fs-extra (opens new window) fs-extra 模块是系统 fs 模块的扩展，提供了更多便利的 API，并继承了 fs 模块的 API
execa (opens new window) 比 child_process 好用，返回 Promise
npm-run-all (opens new window) 一个 CLI 工具可以并行或者串行执行 script 指令
memfs (opens new window) memory-fs 的替代品，将文件放在内存中优化读写，webpack 依赖

# 调试

fx (opens new window) 命令行优化 JSON 输出
dumper.js (opens new window) 能让你的 node console 更加的规整，方便调试
ndb (opens new window) node 调试
why-is-node-running (opens new window) 查看 node 为什么在运行
siege (opens new window) 压测工具
node-in-debugging (opens new window) node.js 调试指南
node-best-practices (opens new window) node 最佳实践
Node.js 最佳实践 (opens new window)

# GraphQL

prisma (opens new window) 让前端也能快速的写出
Apollo GraphQL (opens new window) 是基于 GraphQL 的全栈解决方案集合。从后端到前端提供了对应的 lib 使得开发使用 GraphQL 更加的方便
dataloader (opens new window) 解决 Graphql 中的 N+1 查询问题

# 工具

high-speed-downloader (opens new window) 百度网盘不限速下载支持 Windows 和 Mac
hyper (opens new window) 前端命令行
yapi (opens new window) 是一个可本地部署的、打通前后端及 QA 的、可视化的接口管理平台
sway (opens new window) 一个微软自己出的在线 ppt 很强大
Ascii Art Generator (opens new window) 在线生成 Ascii 图案
Winds (opens new window) 开源 RSS
JSUI (opens new window) 一个用来控制管理前端项目的客户端
docz (opens new window) 让你能快速写文档的一个库
hiper (opens new window) 性能统计分析工具
verdaccio (opens new window) 私有 npm
git-guide (opens new window) git 入门指南
git-tips (opens new window) git 进阶
bit (opens new window) 实现了项目之间的代码共享可以自建私有
simpread (opens new window) 简悦 ( SimpRead ) 让你瞬间进入沉浸式阅读的扩展
mkcert (opens new window) 一键命令让本地也支持 https
termtosvg (opens new window) 录制命令操作转成 svg 基于 python
gh-polls (opens new window) 可以在 github issue 中添加投票
eruda (opens new window) 移动端调试工具
vConsole (opens new window) 也是一个移动端调试工具腾讯出品
terminalizer (opens new window) 命令行录制工具基于 node
badgen (opens new window) 快速构建和 shields 一样的 svg badge 但速度更快
readability (opens new window) 移除页面非正文部分基于 jsdom
WeChatPlugin-MacOS (opens new window) 一款功能强大的 macOS 版微信小助手
puppeteer-recorder (opens new window) 一个 chrome 插件能够根据你的操作自动生成 puppeteer 相关代码
mdx-deck (opens new window) 用 markdown 编写演示文稿
code-surfer (opens new window) 基于 mdx-deck 的一个插件让你更好的在文稿中展示 code
Progressive Tooling (opens new window) 前端性能优化工具集合
https://github.com/artf/grapesjs (opens new window) 可视化建站工具不需要写代码就能写一个页面，前端再次再次要下岗了
image-charts (opens new window) 该服务通过 URL 接受参数，然后生成图表，以图片形式返回
eagle.js (opens new window) 一个用 vue 来制作 PPT 的库
Optimizely (opens new window) A/B Test
appadhoc (opens new window) 一个国内的 A/B Test 服务
glorious-demo (opens new window) 通过编写代码的方式构建一个命令行的演示例子
nginxconfig (opens new window) 可视化配置 nginx 提供了多个基础模板
bundlephobia (opens new window) 一个可以查看某个库的大小，并且分析它的依赖
jsperf (opens new window) 一个提供在线 test case 的网站，主要用来比较性能。可以比较如： forEach vs for 的性能
perflink (opens new window) 与 jsperf 类似的一个比较 js 性能的网站
algorithm-visualizer (opens new window) 算法代码可视化
An-English-Guide-for-Programmers (opens new window) 专为程序员编写的英语学习指南
Webhint (opens new window) 用于检查代码的可访问性、性能和安全的开源检查（Linting）工具
airtap (opens new window) 测试浏览器兼容性，可覆盖 800 多种浏览器
jsonstore (opens new window) 供免费，安全且基于 JSON 的云数据存储，自己玩的小项目神器
git-history (opens new window) 可视化查看一个文件的历史变化
x-spreadsheet (opens new window) 一个基于 Canvas 的 JS 电子表格库 excel
imgcook (opens new window) 阿里出品，一键通过设计稿生成代码
majestic (opens new window) jest 可视化
leon (opens new window) 你开源项目的 ai 个人助手
js-code-to-svg-flowchart (opens new window) 将代码逻辑用流程图的方式展现出来
xterm.js (opens new window) 一个 web terminal
pixelmatch (opens new window) diff 两张图片不一样的地方
readme-md-generator (opens new window) 一个命令行脚本帮你快速的创建一个 README
build-tracker (opens new window) 构建大小追踪记录你多个版本构建后文件大小的变化
zan-proxy (opens new window) 本地调试线上环境的工具
mjml (opens new window) 一个让发 email 更简单的框架。定义了一套自己的语法，你用这套语法写邮件，然后编译成 HTML。
any-rule (opens new window) 正则大全
outline (opens new window) 一个免费开源的库，能让你快速搭建自己的 wiki

# Webpack

webpackbar (opens new window) webpack 打包进度条
jarvis (opens new window) webpack dashboard
webpack-chain (opens new window) 通过 chain 风格 api 的方式修改 webpack 配置
speed-measure-webpack-plugin (opens new window) 统计 webpack 各阶段的耗时
obsolete-webpack-plugin (opens new window) 基于 browserslist 做浏览器升级提示
mini-css-extract-plugin (opens new window) 提取 CSS 为单独文件
copy-webpack-plugin (opens new window) 复制额外的文件到输出目录
duplicate-package-checker-webpack-plugin (opens new window) 检查是否存在重复依赖
cssnano (opens new window) CSS 压缩
bundle-buddy (opens new window) webpack bundle 依赖分析

# 移动端

fastclick (opens new window) 解决移动端一些点击问题

# 性能优化

workbox (opens new window) PWA 方案，Google 出品

# 请求处理

axios (opens new window) 目前最常见的请求库
got (opens new window) http 请求库如果你觉得 request 太多的话这是一个不错的选择
request (opens new window) 老牌请求库 -*whatwg-fetch** (opens new window) fetch 请求库
grpc-web (opens new window) 前端直连 gRPC 服务
node-fetch (opens new window) node 环境下轻量级 fetch 请求库
reqwest (opens new window)

# 工程

lerna (opens new window) monorepo 管理
lerna-changelog (opens new window) 为 lerna 项目自动生成 changelog
eslint (opens new window) JS 风格约束
eslint-config-airbnb (opens new window) airbnb 约束风格
xo (opens new window) 封装自 eslint
prettier (opens new window) 更主观的风格自动修改
yeoman-generator (opens new window) 脚手架工具
serve (opens new window) 本地静态服务器
np (opens new window) npm publish 辅助，自动 push、打 tag、升版本等
lint-staged (opens new window) eslint 提速，只 lint 提交的代码
coveralls (opens new window) 覆盖率
husky (opens new window) 添加 git hooks
cross-env (opens new window) 跨平台的环境变量声明
nvm (opens new window) 管理 node 版本
concurrently (opens new window) 在 npm scripts 里并行执行命令
@zeit/ncc (opens new window) 打包为 npm 包为一个文件
npm-check (opens new window) 检测依赖升级情况，我会和 yarn upgrade-interactive 配合着用，主要用来检测冗余依赖
cpx (opens new window) 复制，支持 glob，并且可以 watch
onchange (opens new window) 监听文件变动然后做一些事
tasksfile (opens new window) 在 node 中执行 script 脚本

# Mac

get-plain-text (opens new window) 能清除剪贴板里的格式很实用
IINA (opens new window) mac 平台感觉免费最好的播放器强推
magnet (opens new window) 分屏管理
Xnip (opens new window) 方便好用的截图工具-支持截长图
Spectacle (opens new window) 窗口管理工具
vanilla (opens new window) 顶栏图标管理工具
Dozer (opens new window) 一个开源的顶栏管理
腾讯电脑管家 (opens new window) 反正我用下来好觉得蛮好用的
mos (opens new window) 鼠标平滑滚动软件，很好用。免费开源
sequel pro (opens new window) mysql 客户端好用
Microsoft Remote Desktop Beta (opens new window) Mac 远程登录 Windows 调试神器
pap.er (opens new window) 专为 Mac 设计的壁纸应用
The Unarchive (opens new window) Mac 目前感觉最好用的免费解压软件
Tickeys (opens new window) 让你用 Mac 键盘也能打出机械键盘的感觉
Beaker Browser (opens new window) P2P 开源浏览器支持点对点发布文件，成为了文件传输工具，支持 DAT 对等协议
Gifski (opens new window) 视频转 gif 工具
more (opens new window) 更多优秀的 mac app 介绍
Motrix (opens new window) 支持 HTTP、FTP、BT、磁力链、百度网盘的下载工具
iPic (opens new window)这个应用可以让你方便地上传图片到各种图床
Image2Icon (opens new window)
hidden (opens new window) 是用来帮助你隐藏 macOS 菜单栏上那些不常用的应用图标

# 录制

licecap (opens new window) gif 录制，简洁好用，之前都用这个录制
kap (opens new window) 现在都用这个录制 gif，还支持导出 mp4，录制的 fps 很高
KeyCastr (opens new window) 按键显示，录制的时候显示你的按键

# Chrome 拓展

Tampermonkey (opens new window) 油猴神器
扩展管理器 (opens new window) 轻松管理扩展，就不用担心安装太多扩展了
visbug (opens new window) 它可以帮助你改变 css，移动元素等等一系类强大的功能,页面调试神器。当然有些时候还是 DevTools 更好用
refined-github (opens new window) 优化 github 默认功能和样式的 chrome 插件
ADB (opens new window) chrome 真机调试安卓神器
Adblock Plus (opens new window) 免费广告拦截程序这个应该不用说了，装机必备
Axure RP Extension (opens new window) 看原型必备
JSON Formatter (opens new window) JSON 格式化程序员必备
Lighthouse (opens new window) 谷歌出品，检查网页综合性能评分，分析不足
二维码(QR 码)生成器 (opens new window) 手机扫码神器
Octotree (opens new window) github 上看代码必备神器
OctoLinker (opens new window) 能在 github 上看代码的时候快速链接跳转到依赖的库
The Great Suspender (opens new window) chrome 太吃内存了，当页面开的很多时候会很卡，它就完美的解决了这个问题。它将几分钟没浏览过的页面都挂载了，当你想看是再重新加载
WEB 前端助手 (opens new window) 支持 JSON 格式化、二维码生成与解码、代码压缩、Markdown 与 HTML 互转、网页滚动截屏、正则表达式、时间转换工具、JSON 比对工具等
掘金 (opens new window) 目前我默认新开 tab 的默认页，可以刷刷新的文章或者项目，还不错。
沙拉查词 (opens new window) 划词翻译插件
npmhub (opens new window)在 README 下方显示 npm 依赖信息

# VS Code

Import Cost (opens new window) 查看你引入的依赖模块大小
Auto Close Tag (opens new window) 自动补全 html 标签，如输入<a>将自动补全</a>
Auto Rename Tag (opens new window) 自动重命名 html 标签，如修改<a>为<b>，将自动修改结尾标签</a>为</b>
polacode (opens new window) 生产代码图片快照插件
vscode-leetcode (opens new window) 一个能让你在 vscode 中刷 LeetCode 的插件算一个划水神器吧
vscode-icons (opens new window) VS Code 必备吧，为文件添加炫图标
CodeSnap (opens new window) 生产代码截图

# 主题

官方主题页 (opens new window) 可以选择自己喜欢的主题 one-monokai (opens new window) 我用的是这个主题，很多年了

# 字体

# 编辑器和 Terminal

Go2shell (opens new window) 在当前文件夹打开 shell
Terminal 用 iTerm2 (opens new window) + zsh (opens new window) + oh-my-zsh (opens new window) 的组合，主题是 robbyrussell (opens new window)

# zsh 插件

Homebrew (opens new window) 必装
autojump (opens new window) 实现目录间快速跳转，想去哪个目录直接 j + 目录名，不用在频繁的 cd 了
zsh-autosuggestions (opens new window) 命令自动建议和补全
zsh-syntax-highlighting (opens new window) 命令行语法高亮
history (opens new window) 命令行记录
zsh-git-prompt (opens new window) git 分支信息提示

# 开发常用软件

Github Desktop (opens new window)管理 github 仓库的变更和 PR
runjs (opens new window) js 运行沙盒，写 test case 或者面试当场写代码的时候很有用
Charles (opens new window) 抓包用，支持 https
Google Chrome (opens new window) 前端必备没啥好说的
ColorSnapper2 (opens new window) 取色工具
postman (opens new window) api 调试工具
Sequel Pro (opens new window) MySQL 界面管理工具
KeepingYouAwake (opens new window) 可保证系统不自动休眠，挂机跑脚本很有用

# 有趣

the-bread-code (opens new window) 使用程序员的思维制作面包，比如制作中使用 A/B test, 来比较那种做法更好。
build-your-own-x (opens new window) 教你用各种语言实现 Bot Database Neural Network
**javascript-algorithms ** (opens new window) 教你用前端知识认识各种算法
not-paid (opens new window) 如果你给人做网站，交过去以后对方没有付款，那么这个 JS 会把网站的透明度一天调低一点，直到看不见
nsfwjs (opens new window) 前端图片鉴黄，基于 Tensorflow
elevator.js (opens new window) 我很喜欢的一个库，让一个 back-to-top 的效果有了一种坐复古电梯的感觉
app-ideas (opens new window) 很多年轻人苦于缺少练手的项目，这个项目收集了不少点子，每个点子都有明确的目标和复杂资源。
WebGL-Fluid-Simulation (opens new window) 很酷的 WebGL 交互
react-kawaii (opens new window) 一个非常可爱的 React 卡通人脸库，很有意思
chart-race-react (opens new window) 图表竞赛长条图赛跑动画在微博或者 b 站这种类型视频很火
98.css (opens new window) windows 98 主题分格 css