├── 2019
    ├── 2019-01-29-Polyfill 方案的过去、现在和未来.md
    └── 2019-03-21-装了啥 2019 版.md
├── .github
    └── ISSUE_TEMPLATE.md
└── README.md


/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | <!--
2 | 此为个人 Blog，请勿提交 issue。
3 | dva 问题请在 https://github.com/dvajs/dva/issues 提交。
4 | -->
5 | 


--------------------------------------------------------------------------------
/2019/2019-01-29-Polyfill 方案的过去、现在和未来.md:
--------------------------------------------------------------------------------
  1 | # Polyfill 方案过去、现在和未来
  2 | 
  3 | 任何一个小知识点，深挖下去，也是非常有意思的。
  4 | 
  5 | ## 什么是补丁？
  6 | 
  7 | > A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will.
  8 | 
  9 | 我们希望浏览器提供一些特性，但是没有，然后我们自己写一段代码来实现他，那这段代码就是补丁。
 10 | 
 11 | 比如 [IE11 不支持 Promise](https://caniuse.com/#feat=promises)，而我们又需要在项目里用到，写了这样的代码：
 12 | 
 13 | ```html
 14 | <script>
 15 |   Promise.resolve('bar')
 16 |     .then(function(foo) {
 17 |       document.write(foo);
 18 |     });
 19 | </script>
 20 | ```
 21 | 
 22 | 这时在 IE 下运行就会报错了，
 23 | 
 24 | ![](https://camo.githubusercontent.com/348c3453fc18218b9a60e6eb67821c83e1ec8bdf/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f726d73706f7274616c2f6b766d4e755778747758636e764f574f6c6f4d752e706e67)
 25 | 
 26 | 然后在此之前加上补丁，
 27 | 
 28 | ```html
 29 | <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
 30 | <script>
 31 |   Promise.resolve('bar')
 32 |     .then(function(foo) {
 33 |       document.write(foo);
 34 |     });
 35 | </script>
 36 | ```
 37 | 
 38 | 刷新浏览器，就可以正常运行了，
 39 | 
 40 | ![](https://camo.githubusercontent.com/d8aae6399751c7cc33c634397162e0d3dfd3f31e/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f726d73706f7274616c2f6c6b7a4e70546878667a7565506a51736f586a792e706e67)
 41 | 
 42 | ## 过去
 43 | 
 44 | ### shim + sham
 45 | 
 46 | 如果你是一个 3 年陈 + 的前端，应该会有听说过 shim、sham、[es5-shim](https://github.com/es-shims/es5-shim) 和 [es6-shim](https://github.com/es-shims/es6-shim) 等等现在看起来很古老的补丁方式。
 47 | 
 48 | 那么，shim 和 sham 是啥？又有什么区别？
 49 | 
 50 | * shim 是**能用**的补丁
 51 | * sham 顾名思义，是假的意思，所以 sham 是一些**假的方法**，只能使用保证不出错，但不能用。至于为啥会有 sham，因为有些方法的低端浏览器里根本实现不了
 52 | 
 53 | ### babel-polyfill.js
 54 | 
 55 | 在 shim 和 sham 之后，还有一种补丁方式是引入包含所有语言层补丁的 `babel-polyfill.js`。比如：
 56 | 
 57 | ```html
 58 | <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.2.5/polyfill.js"></script>
 59 | ```
 60 | 
 61 | 然后就 es6、es7 特性随便写了。
 62 | 
 63 | 但缺点是，babel-polyfill 包含所有补丁，不管浏览器是否支持，也不管你的项目是否有用到，都全量引了，所以如果你的用户全都不差流量和带宽（比如内部应用），尽可以用这种方式。
 64 | 
 65 | ## 现在
 66 | 
 67 | 现在还没有银弹，各种方案百花齐放。
 68 | 
 69 | ### @babel/preset-env + useBuiltins: entry + targets
 70 | 
 71 | babel-polyfill 包含所有补丁，那我只需要支持某些浏览器的某些版本，是否有办法只包含这些浏览器的补丁？这就是 `@babel/preset-env` + `useBuiltins: entry` + `targets` 配置的方案。
 72 | 
 73 | 我们先在入口文件里引入 `@babel/polyfill`，
 74 | 
 75 | ```js
 76 | import '@babel/polyfill';
 77 | ```
 78 | 
 79 | 然后配置 .babelrc，添加 preset `@babel/preset-env`，并设置 `useBuiltIns` 和 `targets`，
 80 | 
 81 | ```js
 82 | {
 83 |   "presets": [
 84 |     ["@babel/env", {
 85 |       useBuiltIns: 'entry',
 86 |       targets: { chrome: 62 }
 87 |     }]
 88 |   ]
 89 | }
 90 | ```
 91 | 
 92 | `useBuiltIns: entry` 的含义是找到入口文件里引入的 `@babel/polyfill`，并替换为 targets 浏览器/环境需要的补丁列表。
 93 | 
 94 | 替换后的内容，比如：
 95 | 
 96 | ```js
 97 | import "core-js/modules/es7.string.pad-start";
 98 | import "core-js/modules/es7.string.pad-end";
 99 | ...
100 | ```
101 | 
102 | 这样就只会引入 chrome@62 及以上所需要的补丁，什么 Promise 之类的都不会再打包引入。
103 | 
104 | > 是不是很好用？
105 | 
106 | 😄
107 | 
108 | > 有什么问题？
109 | 
110 | 🤔
111 | 
112 | 细细想想，其实还有不少问题，
113 | 
114 | 1. 特性列表是按浏览器整理的，那怎么知道哪些特性我用了，哪些没有用到，没有用到的部分也引入了是不是也是冗余？`@babel/preset-env` 有提供 [exclude](https://babeljs.io/docs/en/next/babel-preset-env.html#exclude) 的配置，如果我配置了 exclude，后面是否得小心翼翼地确保不要用到 exclude 掉的特性
115 | 2. 补丁是打包到静态文件的，如果我配置 targets 为 `chrome: 62, ie: 9`，那意味着 chrome 62 也得载入 ie 9 相关的补丁，这也是一份冗余
116 | 3. 我们是基于 core-js 打的补丁，所以只会包含 ecmascript 规范里的内容，其他比如说 dom 里的补丁，就不在此列，应该如何处理？
117 | 
118 | ### 手动引入
119 | 
120 | 传统的手动打补丁方案虽然低效，但直观有用。有些非常在乎性能的场景，比如我们公司的部分无线 H5 业务，他们宁可牺牲效率也要追求性能。所以他们的补丁方案是手动引入 [core-js/modules](https://github.com/zloirock/core-js/tree/v2/modules) 下的文件，缺啥加啥就好。
121 | 
122 | 注意：
123 | 
124 | 1. core-js 目前用的是 v2 版本，不是 v3-beta
125 | 2. 补丁用的是 core-js/modules，而不是 [core-js/library](https://github.com/zloirock/core-js/tree/v2/library)。为啥？二者又有啥区别呢？
126 | 
127 | ### 在线补丁，比如：polyfill.io
128 | 
129 | 前面的手动引入解决的是特性列表的问题，有了特性列表，要做到按需下载，就需要用到在线的补丁服务了。目前最流行的应该就是 [polyfill.io](https://polyfill.io/)，提供的是 cdn 服务，有些站点在用，例如 [https://spectrum.chat/](https://spectrum.chat/)。另外，polyfill.io 还开源了 [polyfill-service](https://github.com/financial-times/polyfill-service) 供我们自己搭建使用。
130 | 
131 | 使用上，比如：
132 | 
133 | ```html
134 | <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2CPromise"></script>
135 | ```
136 | 
137 | 然后在 Chrome@71 下的输出是：
138 | 
139 | ```js
140 | /* Disable minification (remove `.min` from URL path) for more info */
141 | ```
142 | 
143 | 啥都没有，因为 Promsie 特性 Chrome@71 已经支持了。
144 | 
145 | 阿里的 CBU 团队有基于此搭建了一套服务在 alicdn，比如：https://polyfill.alicdn.com/polyfill.min.js?features=Promise 。
146 | 
147 | ## 未来
148 | 
149 | 关于补丁方案的未来，我觉得**按需特性探测 + 在线补丁**才是终极方案。
150 | 
151 | 按需特性探测保证特性的最小集；在线补丁做按需下载。
152 | 
153 | 按需特性探测可以用 `@babel/preset-env` 配上 `targets` 以及试验阶段的 `useBuiltIns: usage`，保障特性集的最小化。之所以说是未来，因为 JavaScript 的动态性，语法探测不太可能探测出所有特性，但上了 TypeScript 之后可能会好一些。另外，要注意一个前提是 node_modules 也需要走 babel 编译，不然 node_modules 下用到的特性会探测不出来。
154 | 
155 | 在线补丁可以用类似前面介绍的 <https://polyfill.io/> 提供的方案，让浏览器只下载必要的补丁，通常大公司用的话会部署一份到自己的 cdn 上。（阿里好像有团队部署了，但一时间想不起地址了。）
156 | 
157 | ## FAQ
158 | 
159 | ### 组件应该包含补丁吗？比如 dva 里用了 Promise，是否应该把 Promise 打在 dva 的产出里？
160 | 
161 | **不应该。**比如项目了依赖了 a 和 b，a 和 b 都包含 Promise 的补丁，就会有冗余。所以组件不应该包含补丁，补丁应该由项目决定。
162 | 
163 | ### 组件不包含补丁？那需要处理啥？
164 | 
165 | 通常不需要做特殊处理，但是有些语言特性的实现会需要引入额外的 helper 方法。
166 | 
167 | 比如：
168 | 
169 | ```js
170 | console.log({ ...a });
171 | ```
172 | 
173 | 编译后是：
174 | 
175 | ```js
176 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
177 | 
178 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
179 | 
180 | console.log(_objectSpread({}, a));
181 | ```
182 | 
183 | 然后我们会有很多文件，每个文件都引入一遍 helper 方法，会有很多冗余。所以我们通常会使用 [@babel/plugin-transform-runtime](https://babeljs.io/docs/en/next/babel-plugin-transform-runtime.html) 来复用这些 helper 方法。
184 | 
185 | 在 `.babelrc` 里配置：
186 | 
187 | ```json
188 | {
189 |   "plugins": [
190 |     "@babel/transform-runtime"
191 |   ]
192 | }
193 | ```
194 | 
195 | 编译后是：
196 | 
197 | ```js
198 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
199 | var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
200 | 
201 | console.log((0, _objectSpread2.default)({}, a));
202 | ```
203 | 
204 | 所以，组件编译只要确保没有冗余的 helper 方法就好了。
205 | 
206 | ### core-js/library or core-js/modules？
207 | 
208 | core-js 提供了两种补丁方式。
209 | 
210 | 1. `core-js/library`，通过 helper 方法的方式提供
211 | 2. `core-js/module`，通过覆盖全局变量的方式提供
212 | 
213 | 举个例子，
214 | 
215 | ```js
216 | import '@babel/polyfill';
217 | Promise.resolve('foo');
218 | ```
219 | 
220 | `.babelrc` 配：
221 | 
222 | ```json
223 | {
224 |   "presets": [
225 |     ["@babel/env", {
226 |     	"useBuiltIns": "entry",
227 |       "targets": {
228 |         "ie": 9
229 |       }
230 |     }]
231 |   ]
232 | }
233 | ```
234 | 
235 | 编译结果是：
236 | 
237 | ```js
238 | require("core-js/modules/es6.promise");
239 | require("core-js/modules/es7.promise.finally");
240 | // 此处省略数十个其他补丁...
241 | 
242 | Promise.resolve('foo');
243 | ```
244 | 
245 | 然后把文件内容换成：
246 | 
247 | ```js
248 | // import '@babel/polyfill';
249 | Promise.resolve('foo');
250 | ```
251 | 
252 | `.babelrc` 配：
253 | 
254 | ```json
255 | {
256 |   "plugins": [
257 |     ["@babel/transform-runtime", {
258 |       "corejs": 2
259 |     }]
260 |   ]
261 | }
262 | ```
263 | 
264 | 编译结果是：
265 | 
266 | ```js
267 | var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");
268 | var _promise = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/promise"));
269 | 
270 | _promise.default.resolve('foo');
271 | ```
272 | 
273 | 然后 `@babel/runtime-corejs2/core-js/promise` 的内容是：
274 | 
275 | ```js
276 | module.exports = require("core-js/library/fn/promise");
277 | ```
278 | 
279 | 目前推荐是用 `core-js/modules`，因为 node_modules 不走 babel 编译，所以 `core-js/library` 的方式无法为依赖库提供补丁。
280 | 
281 | ### 非 core-js 里的特性，如何打补丁？
282 | 
283 | 手动引入，比如 [Intl.js](https://github.com/andyearnshaw/Intl.js/)、URL 等。但是得小心有些规范后续加入 ecmascript 之后可能的冗余，比如 [URL](https://github.com/zloirock/core-js/pull/454)。
284 | 
285 | ## 参考
286 | 
287 | * <http://2ality.com/2011/12/shim-vs-polyfill.html>
288 | * https://babeljs.io/docs/en/next/babel-preset-env.html
289 | * https://github.com/zloirock/core-js/tree/v2
290 | 
291 | 


--------------------------------------------------------------------------------
/2019/2019-03-21-装了啥 2019 版.md:
--------------------------------------------------------------------------------
  1 | # 装了啥 2019 版
  2 | 
  3 | 转眼 2019 了，整体更新下[装了啥](https://github.com/sorrycc/blog/issues/16)。
  4 | 
  5 | ## 翻墙
  6 | 
  7 | 主 [**google cloud**](https://cloud.google.com/)，备 [**rixcloud**](https://home.rixcloud.me/aff.php?aff=1432)、**阿里云香港**和**公司翻墙**。
  8 | 
  9 | - google cloud 免费，一年到期后可无限续，支持 netflix
 10 | - rixcloud 到期后可能不续了，有点贵，不过老牌服务商，比较稳定，支持 surge 客户端，当时买这个主要是为了看 netflix，后来 google cloud 支持 netflix 后就没必要再买他了
 11 | - 软件方面，Mac 下用 [**ShadowsocksX-NG-R**](https://github.com/qinyuhang/ShadowsocksX-NG-R/releases)，iPhone 下用 [**ShadowRocket**](https://itunes.apple.com/us/app/shadowrocket/id932747118?mt=8)（需切美区下载）
 12 | - 通过 [**Proxifier**](https://www.proxifier.com/) 实现命令行应用或其他应用翻墙，比如 iTerm2 下执行 npm publish 偶尔会被墙，并且实测下来比 `export http_proxy` 快
 13 | - 家里的路由器翻墙是用 [**RT-AC88U**](https://www.asus.com/us/Networking/RT-AC88U/) + **梅林小宝版固件**
 14 | - 电视上看 youtube 和 netflix 可以用 [**Nvidia Shield TV**](https://www.nvidia.com/en-us/shield/)，我买的美版，据说国版也可刷原生系统
 15 | 
 16 | ## Mac 软件
 17 | 
 18 | ### 编辑器和 Terminal
 19 | 
 20 | 主 [**Intellij Idea**](https://www.jetbrains.com/idea/)，辅 [**VSCode**](https://code.visualstudio.com/) 和 **Vim**。选 Intellij Idea 的原因是无需安装插件就很好用，另外也是没有时间去折腾插件。
 21 | 
 22 | - 字体主 [**Dank Mono**](https://dank.sh/)，辅 [**Operator Mono**](http://www.typography.com/fonts/operator/overview/)，看厌了一个换另一个
 23 | - Intellij Idea 使用 [**material-theme-jetbrains**](https://github.com/ChrisRM/material-theme-jetbrains)，Theme 选 Material One Dark，字号 16 号，行距 1.2，[效果图](https://gw.alipayobjects.com/zos/rmsportal/JKRPNvvHhPgFonHHXvPe.png)
 24 | - Intellij Idea 插件额外装了 **File Watchers**、**GitLink**、**Import Cost**、**Prettier** 和 **Rainbow Brackets**
 25 | - 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)
 26 | - zsh 的插件开了 git、autojump、brew、git、git-extra、git-flow、git-prompt、git-remote-branch、github、gitignore、history、history-substring-search、iterm2、node、npm、npx、nvm、tig、vscode、yarn
 27 | - iTerm2 里配 `Run command...` 为 `/usr/local/bin/idea \1` ([图](https://zos.alipayobjects.com/rmsportal/RmWdxKRQUWFMoVDjerNQ.png))，这样 Command + 点击文件路径，就会在 Intellij Idea 里打开
 28 | 
 29 | ### 开发辅助
 30 | 
 31 | - [**SourceTree**](https://www.sourcetreeapp.com/)，git 辅助，由于 git 高级操作命令记不住，就只用借助 UI 了
 32 | - [**Paw**](https://paw.cloud/)，请求模拟，前后端联调时我会用这个先走一遍
 33 | - [**Github Desktop**](https://github.com/desktop/desktop)，管理 github 仓库的变更和 PR，代替了 SourceTree 的部分工作，可以方便地把别人的 PR checkout 到本地验证
 34 | - [**Gas Mask**](https://github.com/2ndalpha/gasmask) ，Hosts 管理
 35 | - [**ColorSnapper2**](https://colorsnapper.com/)，取色工具
 36 | - [**Charles**](https://www.charlesproxy.com/)，抓包用，支持 https
 37 | - [**Google Chrome**](https://www.google.com/chrome/) + [**Google Chrome Canary**](https://www.google.com/chrome/canary/) + [**Firefox**](https://www.mozilla.org/en-US/firefox/new/) + **Safari**，浏览器，调试用，IE 的测试会借助内网的云测平台
 38 | 
 39 | ### 输出
 40 | 
 41 | - [**Notion**](https://www.notion.so/?r=d5a0d43dd99f446cb27477785ede47f9)，笔记工具，准备逐渐从 Bear 迁到 Notion
 42 | - [**Bear**](http://www.bear-writer.com/)，笔记工具，颜值高，订阅了 Pro，和手机同步
 43 | - [**Typora**](https://typora.io/)，可以基于目录编辑 Markdown，所以 github 仓库的文档都会用他编辑
 44 | - [**OmniGraffle**](https://www.omnigroup.com/omnigraffle) + [**iThoughtsX**](https://www.toketaware.com/ithoughts-osx)，画流程图
 45 | - [**LICEcap**](http://www.cockos.com/licecap/) ，GIF 录屏工具
 46 | 
 47 | ### 输入
 48 | 
 49 | - [**Reeder**](http://reederapp.com/mac/)，RSS 阅读软件，我的主要信息来源，没有提供 rss 源的我会先在 [**rsshub.app**](https://docs.rsshub.app/) 上找，再没有就自己写一个 serverless 服务部署在 now@2 上
 50 | - [**Kiwi for Gmail**](http://kiwiforgmail.com/)，Gmail 客户端
 51 | 
 52 | ### 效率
 53 | 
 54 | - [**Alfred**](https://www.alfredapp.com/) + [**Powerpack**](https://www.alfredapp.com/powerpack/)，应用启动、粘贴板管理、Workflow、Snippets 管理等
 55 | - [**Thor**](https://github.com/gbammc/Thor)，一键直达应用
 56 | - [**OmniFocus**](https://www.omnigroup.com/omnifocus) ，任务管理，通过 Omni Sync Server 和 iPhone 同步
 57 | - [**Karabiner Element**](https://pqrs.org/osx/karabiner/)，用于[把右 Command 和 Capslock 键利用起来](http://lucifr.com/2013/02/16/caps-lock-to-hyper-key/)，避免快捷键冲突，[简单 note](https://hackmd.io/s/rk4u9i-pG)，详见[《我的快捷键技巧》](https://www.bilibili.com/video/av44127555)
 58 | 
 59 | ### vlog 相关
 60 | 
 61 | - [**ScreenFlow**](http://www.telestream.net/screenflow/overview.htm)，视频录制和剪辑
 62 | - [**Final Cut Pro**](https://www.apple.com/final-cut-pro/)，视频剪辑
 63 | - [**RDM**](https://github.com/avibrazil/RDM)，分辨率切换，允许设置未支持的分辨率，比如我会在录屏时设置 720p(hd) 的分辨率
 64 | - [**KeyCastr**](https://github.com/keycastr/keycastr)，按键显示
 65 | 
 66 | ### 其他
 67 | 
 68 | - [**CleanMyMac 3**](https://macpaw.com/cleanmymac)，系统清理
 69 | - [**1Password**](https://1password.com/)，密码管理
 70 | - [**Bartender 3**](https://www.macbartender.com/)，管理系统右上菜单项，隐藏或收起不常用的
 71 | - [**KeepingYouAwake**](https://github.com/newmarcel/KeepingYouAwake)，可保证系统不自动休眠
 72 | - [**Softorino YouTube Converter**](https://softorino.com/youtube-converter)，YouTube 视频下载
 73 | - [**Downie 3**](http://software.charliemonroe.net/downie.php)，通用视频下载
 74 | - [**Folx 5**](https://mac.eltima.com/download-manager.html) + [**qBittorrent**](https://www.qbittorrent.org/) + [**Motrix**](https://motrix.app/)，下载工具，Folx 下 http，qBittorrent 下 magnet，Motrix 是 aria2 的封装，可以[下百度云盘、115 等](https://www.yuque.com/moapp/help/extensions)
 75 | - [**f.lux**](https://justgetflux.com)，调节显示器色温，护眼，尤其是早上起来屏幕实在是刺眼
 76 | - [**IINA**](https://github.com/iina/iina)，视频播放
 77 | - [**snipaste**](https://www.snipaste.com/)，截图工具，需要标注的时候用
 78 | - [**Get Plain Text**](https://zipzapmac.com/GetPlainText)，自动清除粘贴板内容的格式
 79 | - [**RunCat**](https://itunes.apple.com/nz/app/runcat/id1429033973?mt=12&ref=appinn) - 菜单栏显示奔跑的小猫，CPU 占用率越高跑地越快
 80 | - [**钉钉**](https://tms.dingtalk.com/markets/dingtalk/download) + [**QQ**](https://im.qq.com/macqq/) + [**微信**](https://mac.weixin.qq.com/) + [**Telegram**](https://macos.telegram.org/) + [**Slack**](https://slack.com/downloads/mac)，通讯交流
 81 | 
 82 | ### 命令行
 83 | 
 84 | #### 通过 [homebrew](https://brew.sh/) 安装
 85 | 
 86 | - [**autojump**](https://github.com/wting/autojump)，目录跳转
 87 | - [**the_silver_searcher**](https://github.com/ggreer/the_silver_searcher)，文件搜索，命令行是 ag
 88 | - [**hub**](https://hub.github.com/) - git 扩展
 89 | - [**tig**](https://github.com/jonas/tig) - git 扩展
 90 | - [**bat**](https://github.com/sharkdp/bat)，带行号的 cat，可以配 `alias cat="bat"`
 91 | - [**fd**](https://github.com/sharkdp/fd)，比系统自带的 find 友好
 92 | 
 93 | #### 通过 `yarn global add` 安装
 94 | 
 95 | - [**projj**](https://github.com/popomore/projj)，github/gitlab 项目管理
 96 | - [**serve**](https://github.com/zeit/serve)，本地静态服务器
 97 | - [**fkill**](https://github.com/sindresorhus/fkill)，比 kill 好用的进程 killer
 98 | - [**qrcode-terminal**](https://github.com/gtanner/qrcode-terminal)，二维码生成
 99 | 
100 | ### Chrome 插件
101 | 
102 | #### Github 相关
103 | 
104 | - [**OctoLinker**](https://github.com/OctoLinker/browser-extension)，根据 require/import 或 package.json 中的 dependencies 进行快速跳转
105 | - [**Refined Github**](https://github.com/sindresorhus/refined-github)，Github 改进
106 | - [**npmhub**](https://github.com/npmhub/npmhub)，在 README 下方显示 npm 依赖信息
107 | - [**Hide Files on GitHub**](https://github.com/sindresorhus/hide-files-on-github)，隐藏配置文件等非必要文件
108 | - [**Github Hovercard**](https://github.com/Justineo/github-hovercard)，比如不用点进去就能看到 issue 详情
109 | - [**Git History Browser Extension**](https://chrome.google.com/webstore/detail/git-history-browser-exten/laghnmifffncfonaoffcndocllegejnf)，可视化的方式显示文件修改历史
110 | - [**File Icon for GitHub, GitLab and Bitbucket**](https://chrome.google.com/webstore/detail/file-icon-for-github-gitl/ficfmibkjjnpogdcfhfokmihanoldbfe)，更好看的文件 icon
111 | 
112 | #### 其他
113 | 
114 | - [**Workona**](https://workona.com/)，tab 管理，基于使用场景
115 | - [**JSON Formatter**](https://github.com/callumlocke/json-formatter)，让 JSON 更易读
116 | - [**Better History**](https://chrome.google.com/webstore/detail/chrome-better-history/aadbaagbanfijdnflkhepgjmhlpppbad?hl=en)，搜索历史记录用
117 | - [**Tampermonkey**](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo)，油猴，通过脚本定制网页
118 | 
119 | - [**uBlock Origin**](https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm)，广告 Block
120 | - [**Netflix Rating**](https://chrome.google.com/webstore/detail/imdb-ratings-for-netflix/dnbpnlalaijjbogmjbpdkdcohoibjcmp/related?hl=en)，在 netflix 上显示每个影片的 IMDB 的评分信息
121 | - [**Select like a boss**](https://chrome.google.com/webstore/detail/select-like-a-boss/mnbiiidkialopoakajjpeghipbpljffi/related?hl=en)，可以选择链接里的内容
122 | 
123 | ## iPhone 软件
124 | 
125 | ### 每天用
126 | 
127 | - **支付宝**
128 | - **微信**
129 | - **Chrome**，代替 Safari，好处是可以和电脑同步
130 | - **Gmail**
131 | - **Reeder**，我是 RSS 重度用户
132 | - **钉钉**，工作交流
133 | - **Shadowrocket**，你懂的，需切换美区安装
134 | - **Twitter**，感觉官方客户端够用了
135 | - **Workflow**，最常用的一个 workflow 是 clipboard to instapaper，用于把微信文章经由 instapaper 保存到 github issue
136 | - **网易云音乐**
137 | - **OmniFocus**，任务管理
138 | 
139 | 更多 https://github.com/sorrycc/ama/issues/12
140 | 
141 | ## 在线服务
142 | 
143 | #### 免费
144 | 
145 | - [**refiddle**](http://refiddle.com/) + [**regex101**](https://regex101.com/)，调正则表达式
146 | - [**30 seconds of code**](https://30secondsofcode.org/)，代码片段
147 | - [**astexplorer**](https://astexplorer.net/)，调 ast
148 | - [**globtester**](http://www.globtester.com/)，调 glob
149 | - [**ghub.io**](http://ghub.io/)，redirect to an npm package's repository page
150 | - [**unpkg**](https://unpkg.com/)，npm 包的 cdn 服务，可以查看 npm 包发布后的内容
151 | - [**sketchboard**](https://sketchboard.me/) + [**draw.io**](https://www.draw.io/) + [**MindMeister**](https://www.mindmeister.com/)，在线画流程图
152 | - [**HackMD**](https://hackmd.io/recent)，在线笔记，有 PPT 展示功能
153 | - [**Slides**](https://slides.com/)，PPT 制作
154 | - [**CodeSandbox**](https://codesandbox.io/) + [**glitch**](https://glitch.com/) + [**repl.it**](https://repl.it/)，在线代码编辑，前者支持 sandbox container，可以跑 npm scripts
155 | - [**node.green**](https://node.green/)，查询 NodeJS 的 ES2018 特性支持情况
156 | - [**Can I use**](https://caniuse.com/)，查询浏览器的特性支持情况
157 | - [**carbon**](https://carbon.now.sh/)，根据源码生成图片
158 | - [**Tell me when it closes**](https://tellmewhenitcloses.com)，github issue 关闭时发送邮件通知
159 | - [**Package Diff**](https://diff.intrinsic.com/)，比较 npm 包两个版本直接的区别
160 | - [**Firefox Send**](https://send.firefox.com/) + [**ffsend**](https://github.com/timvisee/ffsend)，文件分享服务
161 | - （beta）[**Webpack config tool**](https://webpack.jakoblind.no/)，webpack 配置工具
162 | 
163 | #### 付费
164 | 
165 | - [**Oreilly Safari Books**](https://www.safaribooksonline.com/)，Oreilly 图书、视频教程、newsletter 等，看地比较少，到期了不准备续费了
166 | - [**Frontend Masters**](https://frontendmasters.com/)，视频教程
167 | - [**Zeit Now**](https://zeit.co/now)，serverless 服务，域名等
168 | - [**name.com**](https://www.name.com/)，域名服务，之后会转到 Zeit Now 上
169 | - [**少数派 Power+ 2.0**](https://sspai.com/series/70)，提效相关文章
170 | - [**网易云音乐**](https://music.163.com/)
171 | - **百度云盘** + **115 网盘** + [**麦果网盘中转**](https://www.maiguopan.com/)，资料下载
172 | - **爱奇艺** + **腾讯视频** + **优酷**，会员去广告
173 | - [**Netflix**](https://www.netflix.com)
174 | - [**Youtube Premium**](https://www.youtube.com/)，主要为了 iPhone 上切换应用或锁屏后能继续播放
175 | 
176 | ## 硬件
177 | 
178 | #### 电脑
179 | 
180 | - **MacBook Pro 15-inch, Mid 2015**，公司配的，256 G 不太够用，自己买了个 [**SDCZ43 128G U 盘**](https://www.sandisk.co.uk/home/usb-flash/ultra-fit-usb) 一直插着做扩展
181 | - [**神舟战神 Z7-KP7S1**](https://detail.tmall.com/item.htm?id=543437409299&skuId=3434337259021)，可以玩一些要求不太高的 PC 游戏
182 | 
183 | #### 电脑配件
184 | 
185 | 显示器、键盘、鼠标都 x2，保证公司和家里的体验一致。
186 | 
187 | - [**U28E590D**](https://detail.tmall.com/item.htm?id=523282229383)x2，三星显示器，应该是 4K 中最便宜的了
188 | - (**HHKB Pro 2 无刻** + [彩色键帽](https://item.taobao.com/item.htm?id=522721338431&_u=41h6urte838))x2
189 | - [**Razer DeathAdder Chroma**](http://www.razerzone.com/store/razer-deathadder-chroma)x2
190 | 
191 | #### 家庭网络
192 | 
193 | - J1900 软路由 + UBNT 交换机 + （UBNT AP & [**华硕 RT-AC88U**](https://item.jd.com/2104499.html)）
194 | 
195 | #### 手机
196 | 
197 | - [**iPhoneX**](https://www.apple.com/iphone-x/)
198 | 
199 | #### 耳机
200 | 
201 | - [**Bose QC30**](https://www.bose.com/en_us/products/headphones/earphones/quietcontrol-30.html)，公司环境有点吵，降噪耳机必备
202 | 
203 | #### 相机
204 | 
205 | - [**FUJIFILM X100T**](https://www.fujifilmusa.com/products/digital_cameras/x/fujifilm_x100t/)
206 | - [**GoPro Hero7 Black**](https://zh.shop.gopro.com/China/cameras/hero7-black/CHDHX-701-master.html)
207 | 
208 | ## 参考
209 | 
210 | - https://github.com/sorrycc/blog/issues/16
211 | - https://github.com/sorrycc/todos/issues/90
212 | - https://github.com/sorrycc/todos/issues/77
213 | 
214 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # blog
2 | 
3 | personal blog repository.
4 | 
5 | 


--------------------------------------------------------------------------------