Skip to content

Commit c35de5f

Browse files
JimmyLvJimmyLv
committed
feat: udpate to use raw.sevencdn.com via CloudFlare's CDN
1 parent ce45d3d commit c35de5f

File tree

48 files changed

+263
-263
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+263
-263
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ $ cd my-awesome-site
5252
```
5353

5454
打开浏览器可以看到：
55-
![3](https://raw.githack.com/JimmyLv/images/master/images/tech/0926-3.png)
55+
![3](https://raw.sevencdn.com/JimmyLv/images/master/images/tech/0926-3.png)
5656

5757
## 使用[「JekyllBootstrap」](http://jekyllbootstrap.com/)
5858

@@ -92,7 +92,7 @@ Error: Address already in use - bind(2)
9292

9393
这个错误是因为在另外一个在和终端里面也运行了 jekyll serve，关掉之后在打开就可以看到自己的博客了。
9494

95-
![4](https://raw.githack.com/JimmyLv/images/master/images/tech/0926-4.png)
95+
![4](https://raw.sevencdn.com/JimmyLv/images/master/images/tech/0926-4.png)
9696

9797
```sh
9898
$ jekyll serve
@@ -159,7 +159,7 @@ published: 表示发布与否
159159
160160
最终就选择了 Prose.io 直接在线编辑修改 GitHub 上的文章，无比方便。
161161

162-
![5](https://raw.githack.com/JimmyLv/images/master/images/tech/0926-5.png)
162+
![5](https://raw.sevencdn.com/JimmyLv/images/master/images/tech/0926-5.png)
163163

164164
## 其他的快速「博客」方案
165165

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ published: True
88

99
# GitHub 开源项目：getAwesomeness
1010

11-
![](https://raw.githack.com/JimmyLv/images/master/images/getAwesome.png)
11+
![](https://raw.sevencdn.com/JimmyLv/images/master/images/getAwesome.png)
1212

1313
repo url: <https://github.com/panzhangwang/getawesomeness/>
1414

@@ -66,7 +66,7 @@ app.use(function (req, res, next) {
6666
})
6767
```
6868

69-
![](https://raw.githack.com/JimmyLv/images/master/images/swig_404.png)
69+
![](https://raw.sevencdn.com/JimmyLv/images/master/images/swig_404.png)
7070

7171
当然可以再次分层，把具体的`res.render()`函数放到不同的地方。
7272

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ published: True
1616

1717
本次更新的 `.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 的开发者都一致叫好。
1818

19-
![](https://raw.githack.com/JimmyLv/images/master/2016/1466241519959.png)
19+
![](https://raw.sevencdn.com/JimmyLv/images/master/2016/1466241519959.png)
2020

2121
- 终于支持了 **Multi-slot transclusion**：
2222

@@ -99,7 +99,7 @@ AngularJS 在早些版本引入了 `controllerAs` 语法，相当于给 ViewMode
9999
this.name = 'JimmyLv';
100100
});
101101

102-
![](https://raw.githack.com/JimmyLv/images/master/2016/1466241548419.png)
102+
![](https://raw.sevencdn.com/JimmyLv/images/master/2016/1466241548419.png)
103103

104104
但与此同时，在指令使用 `controllerAs` 语法也会遇到问题：
105105

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ const MyComponent = () => (
127127
128128
如果你正在使用 [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/)。
129129
130-
![Benchmarks showing the difference between array-ids and no array-ids https://cdn.auth0.com/blog/newdombenchs2/usedheap.svg](https://raw.githack.com/JimmyLv/images/master/2016/1465566744065.png)
130+
![Benchmarks showing the difference between array-ids and no array-ids https://cdn.auth0.com/blog/newdombenchs2/usedheap.svg](https://raw.sevencdn.com/JimmyLv/images/master/2016/1465566744065.png)
131131
132132
> 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.
133133
@@ -157,7 +157,7 @@ const MyComponent = () => (
157157
158158
越来越多的浏览器都开始支持 HTTP/2。这可能听起来没有必要，但是 HTTP/2 为同一服务器的并发连接问题带来了很多好处。换句话说，如果有很多小型资源需要加载（如果你打包过的话就没有必要了），在延迟和性能方面 HTTP/2 秒杀 HTTP/1。试试 [Akamai 的 HTTP/2 demo](https://http2.akamai.com/demo)，可以在最新的浏览器中看到区别。
159159
160-
![](https://raw.githack.com/JimmyLv/images/master/2016/1465566806854.png)
160+
![](https://raw.sevencdn.com/JimmyLv/images/master/2016/1465566806854.png)
161161
162162
## 6. Profile Your App | 6. 应用性能分析
163163
@@ -169,13 +169,13 @@ const MyComponent = () => (
169169
170170
对于 Web 应用来说，延迟时间是最大的抱怨之一，所以你需要确保数据的加载和显示都尽可能得快。Chrome 提供了非常棒的性能分析工具。特别是 Chrome Dev Tools 中的时间线和网络视图都对于定位延迟问题有着很大的帮助：
171171
172-
![](https://raw.githack.com/JimmyLv/images/master/2016/1465566860809.png) 
172+
![](https://raw.sevencdn.com/JimmyLv/images/master/2016/1465566860809.png) 
173173
174174
> The timeline view can help in finding long running operations.
175175
176176
时间线视图可以帮忙找到运行时间较长的操作。
177177
178-
![](https://raw.githack.com/JimmyLv/images/master/2016/1465566882266.png)
178+
![](https://raw.sevencdn.com/JimmyLv/images/master/2016/1465566882266.png)
179179
180180
> The network view can help identify additional latency generated by slow requests or serial access to an endpoint.
181181
@@ -189,7 +189,7 @@ const MyComponent = () => (
189189
190190
CPU 性能分析也可以在 Chrome Dev Tools 中找到。看看这篇来自 Google 官方文档中的文章 [Profiling JavaScript Performance](https://developer.chrome.com/devtools/docs/cpu-profiling)。
191191
192-
![](https://raw.githack.com/JimmyLv/images/master/2016/1465566917028.png)
192+
![](https://raw.sevencdn.com/JimmyLv/images/master/2016/1465566917028.png)
193193
194194
> Finding performance cost centers lets you target optimizations effectively.
195195
@@ -215,7 +215,7 @@ CPU 性能分析也可以在 Chrome Dev Tools 中找到。看看这篇来自 Goo
215215
216216
负载均衡就跟使用某个 round-robin（循环）解决方案一样简单，可以基于一个 [nginx 反向代理](http://nginx.org/en/docs/http/load_balancing.html) ，或者基于一个成熟的分布式网络，比如 [Cloudflare](https://www.cloudflare.com/) 或者 [Amazon CloudFront](https://aws.amazon.com/cloudfront/)。
217217
218-
![](https://raw.githack.com/JimmyLv/images/master/2016/1465566942211.png)
218+
![](https://raw.sevencdn.com/JimmyLv/images/master/2016/1465566942211.png)
219219
220220
> > 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.
221221
> > 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‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ rootReducer.js
114114
115115
Rich Hickey 在他的 Ruby Conf 2012 演讲 [Simplicity Matters](https://www.youtube.com/watch?v=rI8tNMsozo0) 中，将复杂度定义为一种**编织**（或交织）的东西。当你把模块耦合在一起，你将会从代码当中看到某种跟现实中的绳结或者辫子一样的形态。
116116

117-
![](https://raw.githack.com/JimmyLv/images/master/2016/1467619650283.png)
117+
![](https://raw.sevencdn.com/JimmyLv/images/master/2016/1467619650283.png)
118118

119119
> 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.
120120
@@ -285,7 +285,7 @@ a(); // ???
285285
286286
换句话来说，制造循环依赖，你就是**在用最糟糕的方式在打着绳子的结**。想象一下一个模块就是一缕头发，然后模块之间相互依赖着形成了一个巨大的，混乱的毛团。
287287

288-
![](https://raw.githack.com/JimmyLv/images/master/2016/1467640142143.png)
288+
![](https://raw.sevencdn.com/JimmyLv/images/master/2016/1467640142143.png)
289289

290290
> 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.
291291

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,13 +52,13 @@ published: True
5252
5353
在 MVC 当中，一个 Model 可以被多个 Views 读取，并且可以被多个 Controllers 进行更新。在大型应用当中，单个 Model 会导致多个 Views 去通知 Controllers，并可能触发更多的 Model 更新，这样结果就会变得非常复杂。
5454

55-
![](https://raw.githack.com/JimmyLv/images/master/2016/1467895052725.png)
55+
![](https://raw.sevencdn.com/JimmyLv/images/master/2016/1467895052725.png)
5656

5757
> 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.
5858
5959
Flux 试图通过强制单向数据流来解决这个复杂度。在这种架构当中，Views 查询 Stores（而不是 Models），并且用户交互将会触发 Actions，Actions 则会被提交到一个集中的 Dispatcher 当中。当 Actions 被派发之后，Stores 将会随之更新自己并且通知 Views 进行修改。这些 Store 当中的修改会进一步促使 Views 查询新的数据。
6060

61-
![](https://raw.githack.com/JimmyLv/images/master/2016/1467895448296.png)
61+
![](https://raw.sevencdn.com/JimmyLv/images/master/2016/1467895448296.png)
6262

6363
> 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.
6464
@@ -405,7 +405,7 @@ e.g. `ShoppingCartActionCreators.addItem(…)`
405405
2. 一个处理显示汇总，税，配送和包装，以及总数的视图。
406406
3. 一个处理购物车中物品的个数，以及下拉详情菜单的视图。
407407

408-
![](https://raw.githack.com/JimmyLv/images/master/2016/1467904299891.png)
408+
![](https://raw.sevencdn.com/JimmyLv/images/master/2016/1467904299891.png)
409409

410410
> 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.
411411

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@ published: True
1414

1515
React.js 作为前端框架的后起之秀，却在 2015 年携着虚拟 DOM，组件化，单向数据流等利器，给前端 UI 构建掀起了一波声势浩大的函数式新潮流。虽然说组件化不是 React 最先提出来的，但却是 React 使得组件化在前端世界里发扬光大的，而现在几乎所有的所谓现代化 UI 框架比如 Angular 或者 Vue 都已经将组件化作为框架的立足之本。
1616

17-
![](https://raw.githack.com/JimmyLv/images/master/2016/1481267000925.png)
17+
![](https://raw.sevencdn.com/JimmyLv/images/master/2016/1481267000925.png)
1818

1919
React 已经让 UI 测试变得容易很多，React 组件都可以被简化为这样一个表达式，即 `UI = f(data)`，这个纯函数返回的只是一个描述 UI 组件应该是什么样子的虚拟 DOM，本质上就是一个树形的数据结构。给这个纯函数输入一些应用程序的状态，就会得到相应的 UI 描述的输出，这个过程不会去直接操作实际的 UI 元素，也不会产生所谓的副作用。
2020

2121
## React 组件树的测试
2222

2323
按理来说按照纯函数这样的思路，React 组件的测试应该很简单的说。但与此同时对于（渲染出 UI 的）组件树进行测试依然存在一个问题，从下图中可以看出，越处于上层的组件，其复杂度必然会随之提高。对于最底层的子组件来说，我们可以很容易得将其进行渲染并测试其逻辑的正确与否，但对于较上层的父组件来说，通常来说就需要对其所包含的所有子组件都进行预先渲染，甚至于最上面的组件需要渲染出整个 UI 页面的真实 DOM 节点才能对其进行测试，这显然是不可取的。
2424

25-
![Components-Tree](https://raw.githack.com/JimmyLv/images/master/2016/1481119659338.png)
25+
![Components-Tree](https://raw.sevencdn.com/JimmyLv/images/master/2016/1481119659338.png)
2626

2727
> 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.
2828
@@ -38,7 +38,7 @@ React 已经让 UI 测试变得容易很多，React 组件都可以被简化为
3838

3939
对比一下两者 `facebook/react-addons-test-utils` vs `airbnb/enzyme` 的 API 就一目了然，立见分明：
4040

41-
![](https://raw.githack.com/JimmyLv/images/master/2016/1481121353201.png)
41+
![](https://raw.sevencdn.com/JimmyLv/images/master/2016/1481121353201.png)
4242

4343
## Enzyme 的三种渲染方法
4444

@@ -171,4 +171,4 @@ Enzyme 推荐在测试环境中使用 [react-native-mock](https://github.com/Rea
171171
172172
> **技术雷达**：我们非常享受 Enzyme 为 React.js 应用提供的快速组件级 UI 测试功能。与许多其他基于快照的测试框架不同，Enzyme 允许开发者在不进行设备渲染的情况下做测试，从而实现速度更快，粒度更小的测试。在开发 React 应用时，我们经常需要做大量的功能测试，而 Enzyme 可以在大规模地减少功能测试数量上做出贡献。
173173
174-
![TechRadar](https://raw.githack.com/JimmyLv/images/master/2016/1481128632569.png)
174+
![TechRadar](https://raw.sevencdn.com/JimmyLv/images/master/2016/1481128632569.png)

‎前端/2017-01-10-wechat-app-with-business-and-technology-01.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ published: True
1010

1111
微信小程序已经在昨天（2017/01/09）正式发布，张小龙以发布日期的方式致敬了乔布斯的 iPhone（2007/01/09），其野心不可谓不大。
1212

13-
![初代 iPhone 发布时间](https://raw.githack.com/JimmyLv/images/master/2016/1484030180588.png)
13+
![初代 iPhone 发布时间](https://raw.sevencdn.com/JimmyLv/images/master/2016/1484030180588.png)
1414

1515
下面我将会尝试从商业和技术这两个角度来谈谈微信小程序。也许作为程序猿的我们会在技术架构上**看不起小程序**，不就是模仿了 Vue 的语法和 ReactNative（or Hybrid）的原理吗？也可能会因为其封闭性而**批判小程序**，破坏了万维网 Web 本来的开放性和去中心化；更加会由于其诸多限制而**抱怨小程序**，有限的官方 API 和打包程序大小让开发者感到捉襟见肘。
1616

@@ -22,13 +22,13 @@ published: True
2222

2323
极客公园前 CEO 阿禅在《[小程序想要什么？](https://kenengba.com/post/3538.html)》这篇文章中提到，一句话总结张小龙对小程序的定义：**小程序希望用即用即走的方式激活线下的弱连接场景。**
2424

25-
![微信·公众平台](https://raw.githack.com/JimmyLv/images/master/2016/1484051181209.png)
25+
![微信·公众平台](https://raw.sevencdn.com/JimmyLv/images/master/2016/1484051181209.png)
2626

2727
微信公众平台以「订阅号」起家，进而开创了「服务号」和「企业号」，当然还有「微信·开放平台」用于提供微信登录、微信支付等典型性 SDK。到了今天，小程序横空出世，其实我们可以把它当做是「服务号」的一种升级，首先从各种限制上来看，服务号本身的推送能力就特别弱（每月 4 次），而小程序的推送能力则几乎为零，只能被动地通知用户；其次便是小程序在功能型属性上的升级，扫描二维码即可开始使用，而不用「先关注在选择菜单」才能够进入 H5 页面，其目的也就在于解决服务号的体验不佳。
2828

2929
### 腾讯为何推出小程序？
3030

31-
![Facebook 太阳能无人飞机 Aquila](https://raw.githack.com/JimmyLv/images/master/2016/1484051363573.png)
31+
![Facebook 太阳能无人飞机 Aquila](https://raw.sevencdn.com/JimmyLv/images/master/2016/1484051363573.png)
3232

3333
在这个世界的另一端，另外一个社交巨头 Facebook 有着自己的[三大创新支柱](http://www.geekpark.net/topics/216488)：
3434

@@ -42,7 +42,7 @@ published: True
4242

4343
### 适合什么样的应用场景？
4444

45-
![](https://raw.githack.com/JimmyLv/images/master/2016/1484051459393.png)
45+
![](https://raw.sevencdn.com/JimmyLv/images/master/2016/1484051459393.png)
4646

4747
> 二维码背后是微信「连接一切」的野心，这样的决策也直接导致小程序第一批大量流量将来自于线下企业的导流。
4848
@@ -64,7 +64,7 @@ published: True
6464

6565
有一句话说这么说的，[「短期不可高估，长期不可低估」](https://www.zhihu.com/question/54547736/answer/140056623)，其实这就很适用于目前来说对于小程序该有的态度。小程序的一切都在腾讯的掌控之下，你会发现哪怕是缺点，有可能只是微信有意而为之，而所谓的这些缺点，也是可以被腾讯一步一步调整和改进的。
6666

67-
![](https://raw.githack.com/JimmyLv/images/master/2016/1484051670988.png)
67+
![](https://raw.sevencdn.com/JimmyLv/images/master/2016/1484051670988.png)
6868

6969
最后想说一点的是，在微信（[Weixin/Wechat Wide Web](https://zhuanlan.zhihu.com/p/24782839)）掌控之下的小程序所提供的服务对用户来说不见得是一件坏事儿。我们程序猿会从技术的角度批判它的封闭，违背了互联网/万维网的初衷，但在另一方面，我相信一句话「人性本恶」，放任不管的互联网最终会变成一个烂摊子，看看现在的[网络暴力](https://zh.wikipedia.org/zh-hant/%E7%B6%B2%E8%B7%AF%E9%9C%B8%E5%87%8C)、[比特币市场](http://if.pedaily.cn/news/201701/20170106161298634.shtml)以及被调教的[微软聊天机器人 Tay](https://www.zhihu.com/question/41764875)。
7070

0 commit comments

Comments
 (0)