feat: update to use jsDelivr CDN as GitHub images url

README.md

@@ -35,11 +35,11 @@
 
 ## **BIG CHANGE!!! MOVED TO DISTRIBUTED GITHUB REPO**
 
-### Focus 
+### Focus
 
 This repo will only record ideas and posts, which means I will focus on writing and learning in [jimmylv.github.io](https://github.com/JimmyLv/jimmylv.github.io) and other features will be support by other individual GitHub repo: `jimmylv.github.io/xxx`.
 
-Actually the biggest benefits is that you can use this repo as git submodules of other repos, which can make things more flexible and make our life easier. 
+Actually the biggest benefits is that you can use this repo as git submodules of other repos, which can make things more flexible and make our life easier.
 
 ### APIs
 
@@ -49,11 +49,11 @@ As you can see in [JimmyLv/api](https://github.com/JimmyLv/api) repo which will
 
 #TODO: add more details in wiki, and also update md images url from qiniu to github id:50
 
-* [x] [JimmyLv/jekyll-blog](https://github.com/JimmyLv/jekyll-blog): `jekyll` version, which is the default blog to be published on <https://blog.jimmylv.info> | <http://jekyll.jimmylv.info>..
-* [ ] [JimmyLv/hexo-blog](https://github.com/JimmyLv/hexo-blog): `hexo` version, which is another alternative of `jekyll` and you can play with `nodejs` easily, <http://hexo.jimmylv.info>.
-* [x] [JimmyLv/Haiku](https://github.com/JimmyLv/Haiku)：`react` version, which be invoke the markdown raw files from GitHub repo, and we can easily enjoy the frontend deployment, <https://haiku.jimmylv.info>
-* [x] [JimmyLv/nobackend.website](https://github.com/JimmyLv/nobackend.website)：`angular 1.5x` version, also created for frontend but gave up because of `AngularJS` <http://nobackend.website/_ng>  
-* [ ] [JimmyLv/gitbook](https://github.com/JimmyLv/GitBook)：`gitbook` version, which can be used to generate beautiful e-book and also you just put all markdown files together. <https://www.gitbook.com/@jimmylv>
+- [x] [JimmyLv/jekyll-blog](https://github.com/JimmyLv/jekyll-blog): `jekyll` version, which is the default blog to be published on <https://blog.jimmylv.info> | <http://jekyll.jimmylv.info>..
+- [ ] [JimmyLv/hexo-blog](https://github.com/JimmyLv/hexo-blog): `hexo` version, which is another alternative of `jekyll` and you can play with `nodejs` easily, <http://hexo.jimmylv.info>.
+- [x] [JimmyLv/Haiku](https://github.com/JimmyLv/Haiku)：`react` version, which be invoke the markdown raw files from GitHub repo, and we can easily enjoy the frontend deployment, <https://haiku.jimmylv.info>
+- [x] [JimmyLv/nobackend.website](https://github.com/JimmyLv/nobackend.website)：`angular 1.5x` version, also created for frontend but gave up because of `AngularJS` <http://nobackend.website/_ng>
+- [ ] [JimmyLv/gitbook](https://github.com/JimmyLv/GitBook)：`gitbook` version, which can be used to generate beautiful e-book and also you just put all markdown files together. <https://www.gitbook.com/@jimmylv>
 
 ### Slides
 
@@ -68,7 +68,6 @@ nodeppt generate ./演讲 ./slides -a
 - `default`: GitHub Pages with `jekyll`, so easy and no configuration need and whatever the repo you are in.
 - `travis-ci`: Try whatever you want, I prefer to use Node to do all these stuff in one place, <https://travis-ci.org/JimmyLv/jimmylv.github.io>.
 
-
 ## Related Tools
 
 - [WebStrom](https://www.jetbrains.com/webstorm/)
@@ -89,4 +88,3 @@ nodeppt generate ./演讲 ./slides -a
 ## GitHub Stargazers over time
 
 [![Stargazers over time](https://starchart.cc/JimmyLv/jimmylv.github.io.svg)](https://starchart.cc/JimmyLv/jimmylv.github.io)
-

前端/2014-09-26-write-article-use-jekyll-github-markdown.md

@@ -52,7 +52,7 @@ $ cd my-awesome-site
 ```
 
 打开浏览器可以看到：
-![3](https://jimmylv.github.io/images/images/tech/0926-3.png)
+![3](https://cdn.jsdelivr.net/gh/jimmylv/images/images/tech/0926-3.png)
 
 ## 使用[「JekyllBootstrap」](http://jekyllbootstrap.com/)
 
@@ -92,7 +92,7 @@ Error:  Address already in use - bind(2)
 
 这个错误是因为在另外一个在和终端里面也运行了 jekyll serve，关掉之后在打开就可以看到自己的博客了。
 
-![4](https://jimmylv.github.io/images/images/tech/0926-4.png)
+![4](https://cdn.jsdelivr.net/gh/jimmylv/images/images/tech/0926-4.png)
 
 ```sh
 $ jekyll serve
@@ -159,7 +159,7 @@ published: 表示发布与否
 
 最终就选择了 Prose.io 直接在线编辑修改 GitHub 上的文章，无比方便。
 
-![5](https://jimmylv.github.io/images/images/tech/0926-5.png)
+![5](https://cdn.jsdelivr.net/gh/jimmylv/images/images/tech/0926-5.png)
 
 ## 其他的快速「博客」方案
 

前端/2015-11-10-reading-open-resource-code-from-github.md

@@ -8,7 +8,7 @@ published: True
 
 # GitHub 开源项目：getAwesomeness
 
-![](https://jimmylv.github.io/images/images/getAwesome.png)
+![](https://cdn.jsdelivr.net/gh/jimmylv/images/images/getAwesome.png)
 
 repo url: <https://github.com/panzhangwang/getawesomeness/>
 
@@ -66,7 +66,7 @@ app.use(function (req, res, next) {
 })
 ```
 
-![](https://jimmylv.github.io/images/images/swig_404.png)
+![](https://cdn.jsdelivr.net/gh/jimmylv/images/images/swig_404.png)
 
 当然可以再次分层，把具体的`res.render()`函数放到不同的地方。
 

前端/2016-03-08-introduction-of-angular-new-features-by-examples.md

@@ -16,7 +16,7 @@ published: True
 
 本次更新的 `.component()` 方法其实就是一种更加方便定义元素指令的方式，并自带默认配置使之符合最佳实践。而组件开发的方式也就使应用更加符合 [Angular 2.0](http://www.angular.io/) 的架构风格，所以说，Angular 1.5 就是为了方便开发者能够更加顺利地过渡到 Angular 2.0。为了 Angular 2.0 的未来 Google 也是迫不得已啊，要知道很多前端开发者在经历过 Angular 1.x 的「折磨」过后都转投了其他框架的怀抱。可以说前有 [React.js](https://github.com/facebook/react) 携着组件化，虚拟 DOM ，单向数据流等利器，给前端 UI 构建掀起了一波声势浩大的函数式新潮流；后有 [Vue.js](http://vuejs.org/) 等更轻便的 MVVM 框架穷追猛赶，据说用过 Vue 的开发者都一致叫好。
 
-![](https://jimmylv.github.io/images/2016/1466241519959.png)
+![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1466241519959.png)
 
 - 终于支持了 **Multi-slot transclusion**：
 
@@ -99,7 +99,7 @@ AngularJS 在早些版本引入了 `controllerAs` 语法，相当于给 ViewMode
       this.name = 'JimmyLv';
     });
 
-![](https://jimmylv.github.io/images/2016/1466241548419.png)
+![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1466241548419.png)
 
 但与此同时，在指令使用 `controllerAs` 语法也会遇到问题：
 

前端/2016-06-10-thirteen-steps-to-a-faster-web-app.md

@@ -127,7 +127,7 @@ const MyComponent = () => (
 
 如果你正在使用 [React](https://facebook.github.io/react/)，[Ember](http://emberjs.com/)，[Angular](https://angularjs.org/) 或者其他 DOM 操作库，使用 array-ids（或者 Angular 1.x 中的 track-by 特性）非常有助于实现高性能，对于动态网页尤其如此。我们已经在上一篇程序衡量标准的文章中看到这个特性的效果了： [More Benchmarks: Virtual DOM vs Angular 1 & 2 vs Mithril.js vs cito.js vs The Rest (Updated and Improved!)](https://auth0.com/blog/2016/01/11/updated-and-improved-more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/)。
 
-![Benchmarks showing the difference between array-ids and no array-ids https://cdn.auth0.com/blog/newdombenchs2/usedheap.svg](https://jimmylv.github.io/images/2016/1465566744065.png)
+![Benchmarks showing the difference between array-ids and no array-ids https://cdn.auth0.com/blog/newdombenchs2/usedheap.svg](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1465566744065.png)
 
 > The main concept behind this feature is to reuse as much existing nodes as possible. **Array ids** allow DOM-manipulation engines to "know" when a certain node can be mapped to a certain element in an array. Without **array-ids** or **track-by** most libraries resort to destroying the existing nodes and creating new ones. This impairs performance.
 
@@ -157,7 +157,7 @@ const MyComponent = () => (
 
 越来越多的浏览器都开始支持 HTTP/2。这可能听起来没有必要，但是 HTTP/2 为同一服务器的并发连接问题带来了很多好处。换句话说，如果有很多小型资源需要加载（如果你打包过的话就没有必要了），在延迟和性能方面 HTTP/2 秒杀 HTTP/1。试试 [Akamai 的 HTTP/2 demo](https://http2.akamai.com/demo)，可以在最新的浏览器中看到区别。
 
-![](https://jimmylv.github.io/images/2016/1465566806854.png)
+![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1465566806854.png)
 
 ## 6. Profile Your App | 6. 应用性能分析
 
@@ -169,13 +169,13 @@ const MyComponent = () => (
 
 对于 Web 应用来说，延迟时间是最大的抱怨之一，所以你需要确保数据的加载和显示都尽可能得快。Chrome 提供了非常棒的性能分析工具。特别是 Chrome Dev Tools 中的时间线和网络视图都对于定位延迟问题有着很大的帮助：
 
-![](https://jimmylv.github.io/images/2016/1465566860809.png) 
+![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1465566860809.png) 
 
 > The timeline view can help in finding long running operations.
 
 时间线视图可以帮忙找到运行时间较长的操作。
 
-![](https://jimmylv.github.io/images/2016/1465566882266.png)
+![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1465566882266.png)
 
 > The network view can help identify additional latency generated by slow requests or serial access to an endpoint.
 
@@ -189,7 +189,7 @@ const MyComponent = () => (
 
 CPU 性能分析也可以在 Chrome Dev Tools 中找到。看看这篇来自 Google 官方文档中的文章 [Profiling JavaScript Performance](https://developer.chrome.com/devtools/docs/cpu-profiling)。
 
-![](https://jimmylv.github.io/images/2016/1465566917028.png)
+![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1465566917028.png)
 
 > Finding performance cost centers lets you target optimizations effectively.
 
@@ -215,7 +215,7 @@ CPU 性能分析也可以在 Chrome Dev Tools 中找到。看看这篇来自 Goo
 
 负载均衡就跟使用某个 round-robin（循环）解决方案一样简单，可以基于一个 [nginx 反向代理](http://nginx.org/en/docs/http/load_balancing.html) ，或者基于一个成熟的分布式网络，比如 [Cloudflare](https://www.cloudflare.com/) 或者 [Amazon CloudFront](https://aws.amazon.com/cloudfront/)。
 
-![](https://jimmylv.github.io/images/2016/1465566942211.png)
+![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1465566942211.png)
 
 > > The above diagram is based on [this one](http://docs.citrix.com/content/dam/docs/en-us/legacy-edocs/netscaler-traffic-management-10-5-map/LB-Round_Robin_Mechanism.PNG) from Citrix.
 > > For load-balancing to be really useful, dynamic and static content should be split for easy concurrent access. In other words, serial access to elements impairs the ability of the load balancer to find the best way to split the work. At the same time, concurrent access to resources can improve startup times.

前端/2016-07-04-rules-for-structuring-redux-applications.md

@@ -114,7 +114,7 @@ rootReducer.js
 
 Rich Hickey 在他的 Ruby Conf 2012 演讲 [Simplicity Matters](https://www.youtube.com/watch?v=rI8tNMsozo0) 中，将复杂度定义为一种**编织**（或交织）的东西。当你把模块耦合在一起，你将会从代码当中看到某种跟现实中的绳结或者辫子一样的形态。
 
-![](https://jimmylv.github.io/images/2016/1467619650283.png)
+![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1467619650283.png)
 
 > The relevence of complexity to project structure is that when you place objects in **close proximity** to one another, the **barrier to couple** them lowers dramatically.
 
@@ -285,7 +285,7 @@ a(); // ???
 
 换句话来说，制造循环依赖，你就是**在用最糟糕的方式在打着绳子的结**。想象一下一个模块就是一缕头发，然后模块之间相互依赖着形成了一个巨大的，混乱的毛团。
 
-![](https://jimmylv.github.io/images/2016/1467640142143.png)
+![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1467640142143.png)
 
 > Whenever you want to use a small module within the hairball, you will have no choice but to pull in the giant mess. And even worse, when you change something inside the hairball, it would be hard _not_ to break something else.
 

前端/2016-07-07-what-the-flux-on-flux-ddd-and-cqrs.md

@@ -52,13 +52,13 @@ published: True
 
 在 MVC 当中，一个 Model 可以被多个 Views 读取，并且可以被多个 Controllers 进行更新。在大型应用当中，单个 Model 会导致多个 Views 去通知 Controllers，并可能触发更多的 Model 更新，这样结果就会变得非常复杂。
 
-![](https://jimmylv.github.io/images/2016/1467895052725.png)
+![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1467895052725.png)
 
 > Flux attempts to solve this complexity by forcing a unidirectional data flow. In this architecture, Views query Stores (not Models), and user interactions result in Actions that are submitted to a centralized Dispatcher. When the Actions are dispatched, Stores can then update themselves accordingly and notify Views of any changes. These changes in the Store prompts Views to query for new data.
 
 Flux 试图通过强制单向数据流来解决这个复杂度。在这种架构当中，Views 查询 Stores（而不是 Models），并且用户交互将会触发 Actions，Actions 则会被提交到一个集中的 Dispatcher 当中。当 Actions 被派发之后，Stores 将会随之更新自己并且通知 Views 进行修改。这些 Store 当中的修改会进一步促使 Views 查询新的数据。
 
-![](https://jimmylv.github.io/images/2016/1467895448296.png)
+![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1467895448296.png)
 
 > The main difference between MVC and Flux is the separation of queries and updates. In MVC, the Model is both updated by the Controller _and_ queried by the View. In Flux, the data that a View gets from a Store is read-only. Stores can only be updated through Actions, which would affect the Stores themselves _not_ the read-only data.
 
@@ -405,7 +405,7 @@ e.g. `ShoppingCartActionCreators.addItem(…)`
 2. 一个处理显示汇总，税，配送和包装，以及总数的视图。
 3. 一个处理购物车中物品的个数，以及下拉详情菜单的视图。
 
-![](https://jimmylv.github.io/images/2016/1467904299891.png)
+![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1467904299891.png)
 
 > In this system, we don’t want to tie different views and controllers directly to a ShoppingCart model because changes to the model causes a complex data flow that is hard to reason about.
 

前端/2016-12-07-react-testing-with-enzyme.md

@@ -14,15 +14,15 @@ published: True
 
 React.js 作为前端框架的后起之秀，却在 2015 年携着虚拟 DOM，组件化，单向数据流等利器，给前端 UI 构建掀起了一波声势浩大的函数式新潮流。虽然说组件化不是 React 最先提出来的，但却是 React 使得组件化在前端世界里发扬光大的，而现在几乎所有的所谓现代化 UI 框架比如 Angular 或者 Vue 都已经将组件化作为框架的立足之本。
 
-![](https://jimmylv.github.io/images/2016/1481267000925.png)
+![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1481267000925.png)
 
 React 已经让 UI 测试变得容易很多，React 组件都可以被简化为这样一个表达式，即 `UI = f(data)`，这个纯函数返回的只是一个描述 UI 组件应该是什么样子的虚拟 DOM，本质上就是一个树形的数据结构。给这个纯函数输入一些应用程序的状态，就会得到相应的 UI 描述的输出，这个过程不会去直接操作实际的 UI 元素，也不会产生所谓的副作用。
 
 ## React 组件树的测试
 
 按理来说按照纯函数这样的思路，React 组件的测试应该很简单的说。但与此同时对于（渲染出 UI 的）组件树进行测试依然存在一个问题，从下图中可以看出，越处于上层的组件，其复杂度必然会随之提高。对于最底层的子组件来说，我们可以很容易得将其进行渲染并测试其逻辑的正确与否，但对于较上层的父组件来说，通常来说就需要对其所包含的所有子组件都进行预先渲染，甚至于最上面的组件需要渲染出整个 UI 页面的真实 DOM 节点才能对其进行测试，这显然是不可取的。
 
-![Components-Tree](https://jimmylv.github.io/images/2016/1481119659338.png)
+![Components-Tree](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1481119659338.png)
 
 > Shallow rendering lets you render a component "one level deep" and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered. This does not require a DOM.
 
@@ -38,7 +38,7 @@ React 已经让 UI 测试变得容易很多，React 组件都可以被简化为
 
 对比一下两者 `facebook/react-addons-test-utils` vs `airbnb/enzyme` 的 API 就一目了然，立见分明：
 
-![](https://jimmylv.github.io/images/2016/1481121353201.png)
+![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1481121353201.png)
 
 ## Enzyme 的三种渲染方法
 
@@ -171,4 +171,4 @@ Enzyme 推荐在测试环境中使用 [react-native-mock](https://github.com/Rea
 
 > **技术雷达**：我们非常享受 Enzyme 为 React.js 应用提供的快速组件级 UI 测试功能。与许多其他基于快照的测试框架不同，Enzyme 允许开发者在不进行设备渲染的情况下做测试，从而实现速度更快，粒度更小的测试。在开发 React 应用时，我们经常需要做大量的功能测试，而 Enzyme 可以在大规模地减少功能测试数量上做出贡献。
 
-![TechRadar](https://jimmylv.github.io/images/2016/1481128632569.png)
+![TechRadar](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1481128632569.png)