remove assets

ywanhzy · Apr 16, 2021 · 3e3cc53 · 3e3cc53
1 parent ea4d303
commit 3e3cc53
Show file tree

Hide file tree

Showing 83 changed files with 46 additions and 46 deletions.
diff --git a/assets/1/cube.jpeg b/assets/1/cube.jpeg
diff --git a/assets/11/coffee.jpg b/assets/11/coffee.jpg
diff --git a/assets/11/last-item.png b/assets/11/last-item.png
diff --git a/assets/12/Form.png b/assets/12/Form.png
diff --git a/assets/12/higher.png b/assets/12/higher.png
diff --git a/assets/13/1.png b/assets/13/1.png
diff --git a/assets/13/logo.jpeg b/assets/13/logo.jpeg
diff --git a/assets/15/juanzhou.png b/assets/15/juanzhou.png
diff --git a/assets/16/logo.png b/assets/16/logo.png
diff --git a/assets/17/safely.jpeg b/assets/17/safely.jpeg
diff --git a/assets/19/logo.png b/assets/19/logo.png
diff --git a/assets/2/modal.png b/assets/2/modal.png
diff --git a/assets/20/logo.png b/assets/20/logo.png
diff --git a/assets/22/v8.png b/assets/22/v8.png
diff --git a/assets/23/api-design.jpg b/assets/23/api-design.jpg
diff --git a/assets/24/gt.jpeg b/assets/24/gt.jpeg
diff --git a/assets/26/Encrypted_Media_Extensions_Provide_a_Common_Ground_Greg_Rutz.jpg b/assets/26/Encrypted_Media_Extensions_Provide_a_Common_Ground_Greg_Rutz.jpg
diff --git a/assets/26/eme-support.jpg b/assets/26/eme-support.jpg
diff --git a/assets/26/mse-eme.jpg b/assets/26/mse-eme.jpg
diff --git a/assets/26/mse-support.jpg b/assets/26/mse-support.jpg
diff --git a/assets/27/logo.jpeg b/assets/27/logo.jpeg
diff --git a/assets/28/logo.jpeg b/assets/28/logo.jpeg
diff --git a/assets/29/1.jpg b/assets/29/1.jpg
diff --git a/assets/29/2.jpg b/assets/29/2.jpg
diff --git a/assets/29/3.gif b/assets/29/3.gif
diff --git a/assets/29/4.jpg b/assets/29/4.jpg
diff --git a/assets/3/ssr.png b/assets/3/ssr.png
diff --git a/assets/30/1.gif b/assets/30/1.gif
diff --git a/assets/30/1.png b/assets/30/1.png
diff --git a/assets/31/never give up.jpeg b/assets/31/never give up.jpeg
diff --git a/assets/32/1.jpeg b/assets/32/1.jpeg
diff --git a/assets/32/router-logo.png b/assets/32/router-logo.png
diff --git a/assets/35/Reaction.png b/assets/35/Reaction.png
diff --git a/assets/35/collect1.png b/assets/35/collect1.png
diff --git a/assets/35/collect2.png b/assets/35/collect2.png
diff --git a/assets/35/collect3.png b/assets/35/collect3.png
diff --git a/assets/35/collect4.png b/assets/35/collect4.png
diff --git a/assets/35/debug.png b/assets/35/debug.png
diff --git a/assets/35/react.png b/assets/35/react.png
diff --git a/assets/4/async (1).png b/assets/4/async (1).png
diff --git a/assets/4/async.png b/assets/4/async.png
diff --git a/assets/44/logo.png b/assets/44/logo.png
diff --git a/assets/5/data-stream.jpeg b/assets/5/data-stream.jpeg
diff --git a/assets/5/logo.gif b/assets/5/logo.gif
diff --git a/assets/54/ssr.png b/assets/54/ssr.png
diff --git a/assets/68/1.png b/assets/68/1.png
diff --git a/assets/68/2.jpg b/assets/68/2.jpg
diff --git a/assets/68/3.png b/assets/68/3.png
diff --git a/assets/7/css-in-js.png b/assets/7/css-in-js.png
diff --git a/assets/8/react.jpg b/assets/8/react.jpg
diff --git a/assets/9/hash-maps-tire-1.png b/assets/9/hash-maps-tire-1.png
diff --git a/assets/9/hash-maps-tire-2.png b/assets/9/hash-maps-tire-2.png
diff --git a/assets/9/share.gif b/assets/9/share.gif
diff --git a/assets/9/share.jpeg b/assets/9/share.jpeg
diff --git a/assets/9/tire.png b/assets/9/tire.png
diff --git a/assets/9/vector-tire.png b/assets/9/vector-tire.png
diff --git a/前沿技术/1.精读《js 模块化发展》.md b/前沿技术/1.精读《js 模块化发展》.md
@@ -8,7 +8,7 @@
 
 # 1 引言
 
-<img src="assets/1/cube.jpeg" alt="logo" width="500" />
+<img src="https://img.alicdn.com/imgextra/i4/O1CN01mvDKCM1owPSsLDBmI_!!6000000005289-2-tps-475-297.png" alt="logo" width="500" />
 
 > 如今，Javascript 模块化规范非常方便、自然，但这个新规范仅执行了 2 年，就在 4 年前，js 的模块化还停留在运行时支持，10 年前，通过后端模版定义、注释定义模块依赖。对经历过来的人来说，历史的模块化方式还停留在脑海中，反而新上手的同学会更快接受现代的模块化规范。
 

diff --git a/前沿技术/11.精读《前端调试技巧》.md b/前沿技术/11.精读《前端调试技巧》.md
@@ -4,7 +4,7 @@
 
 # 1 引言
 
-<img src="assets/11/coffee.jpg" width="500" alt="logo" />
+<img src="https://img.alicdn.com/imgextra/i2/O1CN01JC1TZ51Nxn24teojP_!!6000000001637-2-tps-1024-1296.png" width="500" alt="logo" />
 
 梵高这幅画远景漆黑一片，近景的咖啡店色彩却反差很大，他只是望着黑夜中温暖的咖啡馆，交织着矛盾与孤独。代码不可能没有 BUG，调试与开发也始终交织在一起，我们在这两种矛盾中不断成长。
 
@@ -105,7 +105,7 @@ Css 不像 Js 一样方便分析规则是否存在冗余，Chrome 帮我们做
 
 Chrome 会记录最后插入的 5 个元素，分别以 `$0` ~ `$4` 的方式在控制台直接输出。
 
-<img src="assets/11/last-item.png" width="500" alt="last-items" />
+<img src="https://img.alicdn.com/imgextra/i4/O1CN01xsKHb822gkXhDDcCA_!!6000000007150-2-tps-417-516.png" width="500" alt="last-items" />
 
 ### Console.table
 

diff --git a/前沿技术/13.精读《This 带来的困惑》.md b/前沿技术/13.精读《This 带来的困惑》.md
@@ -1,6 +1,6 @@
 # 1 引言
 
-<img src="assets/13/logo.jpeg" width="500" alt="logo" />
+<img src="https://img.alicdn.com/imgextra/i2/O1CN014VGV7a1x3ILYqK9OD_!!6000000006387-2-tps-1024-732.png" width="500" alt="logo" />
 
 javascript 的 this 是个头痛的话题，本期精读的文章更是引出了一个观点，避免使用 this。我们来看看是否有道理。
 
@@ -53,7 +53,7 @@ getName(person3) // Name: Sarah Doe
 getGreetingCallback(person3)('Jeff') // Hello Jeff, I'm Sarah Doe
 ```
 
-<img src="assets/13/1.png" width="500" alt="demo1" />
+<img src="https://img.alicdn.com/imgextra/i3/O1CN017Kw37u1oOyYHXGlqC_!!6000000005216-2-tps-1338-338.png" width="500" alt="demo1" />
 
 这样 person 实例是个纯对象，没有将方法挂载到原型链上，简单易懂。
 

diff --git a/前沿技术/15.精读《TC39 与 ECMAScript 提案》.md b/前沿技术/15.精读《TC39 与 ECMAScript 提案》.md
@@ -2,7 +2,7 @@
 
 # 1 引言
 
-<img src="assets/15/juanzhou.png" alt="logo" width="500" />
+<img src="https://img.alicdn.com/imgextra/i3/O1CN01Z7A0st1Xx0Vu2Tnbv_!!6000000002989-2-tps-1000-820.png" alt="logo" width="500" />
 
 觉得 es6 es7 动不动就加新特性很烦？提案的讨论已经放开了，每个人都可以做 js 的主人，赶快与我一起了解下有哪些特性在日程中！
 

diff --git a/前沿技术/16.精读《CSS Animations vs Web Animations API》.md b/前沿技术/16.精读《CSS Animations vs Web Animations API》.md
@@ -4,7 +4,7 @@
 
 # 1. 引言
 
-<img src="assets/16/logo.png" alt="logo" width="500" />
+<img src="https://img.alicdn.com/imgextra/i3/O1CN01O88KwS1bcAxfZER9N_!!6000000003485-2-tps-1438-583.png" alt="logo" width="500" />
 
 前端是一个很神奇的工种，一个合格的前端至少要熟练的使用 3 个技能，html、css 和 javascript。在传统的前端开发领域它们三个大多时候是各司其职，分别负责布局、样式以及交互。而在当代的前端开发中，由于多种原因 javascript 做的事情愈来愈多，大有一统全栈之势。服务端的 nodejs，让前端同学可以用自己的语言来开发 server。即便是在前端，我们现在好像也很少写 html 了，在 React 中出来了 JSX，在其他的开发体系中也有与之类似的前端模板代替了 html。我们好像也很少写 css 了，sass、less、stylus 等预处理器以及 css in js 出现。此外，很多 css 领域的的工作也可以通过 javascript 以更加优雅和高效的方式实现。今天我们来一起聊聊 CSS 动画与 WEB Animation API 的优劣。
 

diff --git a/前沿技术/19.精读《最佳前端面试题》及面试官技巧.md b/前沿技术/19.精读《最佳前端面试题》及面试官技巧.md
@@ -4,7 +4,7 @@
 
 # 1 引言
 
-<img src="assets/19/logo.png" width="500" alt="logo" />
+<img src="https://img.alicdn.com/imgextra/i1/O1CN01R3ijB026P7lUCn5wY_!!6000000007653-2-tps-1024-600.png" width="500" alt="logo" />
 
 又到了招聘的季节，如何为自己的团队找到真正优秀的人才？问哪些问题更合适？我们简单总结一把。
 

diff --git a/前沿技术/2.精读《模态框的最佳实践》.md b/前沿技术/2.精读《模态框的最佳实践》.md
@@ -2,7 +2,7 @@
 
 # 1 引言
 
-<img src="assets/2/modal.png" alt="logo" width="500" />
+<img src="https://img.alicdn.com/imgextra/i1/O1CN01DnoLTI1Yz7xqiVKKW_!!6000000003129-2-tps-1280-679.png" alt="logo" width="500" />
 
 我为什么要选这篇文章呢？
 

diff --git a/前沿技术/20.精读《Nestjs》文档.md b/前沿技术/20.精读《Nestjs》文档.md
@@ -6,7 +6,7 @@
 
 # 1 引言
 
-<img src="assets/20/logo.png" width="500" alt="logo" />
+<img src="https://img.alicdn.com/imgextra/i3/O1CN01t69Fct1E39Voy7ohY_!!6000000000295-2-tps-971-1200.png" width="500" alt="logo" />
 
 Nestjs 是我见过的，将 Typescript 与 Nodejs Framework 结合的最好的例子。
 

diff --git a/前沿技术/22.精读《V8 引擎特性带来的的 JS 性能变化》.md b/前沿技术/22.精读《V8 引擎特性带来的的 JS 性能变化》.md
@@ -3,7 +3,7 @@
 
 # 1 引言
 
-<img src="assets/22/v8.png" width="500" alt="logo" />
+<img src="https://img.alicdn.com/imgextra/i4/O1CN01mqqIMK1OKgpqCBZ3s_!!6000000001687-2-tps-1900-1900.png" width="500" alt="logo" />
 
 定时刷新一下对 js 的三观，防止经验变成坑。（对 IE 等浏览器的三观需保持不变）
 

diff --git a/前沿技术/23.精读《API设计原则》.md b/前沿技术/23.精读《API设计原则》.md
@@ -2,7 +2,7 @@
 
 # 1 引言
 
-<img src="assets/23/api-design.jpg" width="500" alt="logo" />
+<img src="https://img.alicdn.com/imgextra/i2/O1CN013NUl7g1KXHG160u9h_!!6000000001173-2-tps-468-434.png" width="500" alt="logo" />
 
 优秀的 API 之于代码，就如良好内涵对于每个人。好的 API 不但利于使用者理解，开发时也会事半功倍，后期维护更是顺风顺水。
 

diff --git a/前沿技术/26.精读《加密媒体扩展》.md b/前沿技术/26.精读《加密媒体扩展》.md
@@ -69,11 +69,11 @@ W3C 理事长 Tim Berners-Lee 在《[W3C Blog: 关于 HTML5 标准中的加密
 
 以下是截取 caniuse 网站统计的 EME 和 ESM 的支持情况（点击图片可跳转到对应网址）：
 
-[![](./assets/26/eme-support.jpg)](http://caniuse.com/#search=EME)
+[![](https://img.alicdn.com/imgextra/i1/O1CN01CdZ8cb1qTDS3t9GDW_!!6000000005496-2-tps-1269-619.png)](http://caniuse.com/#search=EME)
 
 
 
-[![](./assets/26/mse-support.jpg)](http://caniuse.com/#search=MSE)
+[![](https://img.alicdn.com/imgextra/i2/O1CN01iC9AAI1qaXmsgW6V7_!!6000000005512-2-tps-1267-591.png)](http://caniuse.com/#search=MSE)
 
 #### 现代播放器的技术原理
 
@@ -107,7 +107,7 @@ CENC 没有规定授权的发放、授权的格式、授权的存储、以及使
 
 结合 [cpearce/mse-eme](cpearce/mse-eme) 做简要说明，代码可参见对应的 Github 仓库。
 
-![](./assets/26/mse-eme.jpg)
+![](https://img.alicdn.com/imgextra/i1/O1CN01RtRhBw1EIGaAhtUtt_!!6000000000328-2-tps-185-141.png)
 
 - index.html：模拟内容服务商视频播放网页，获取 EME 设置（本例中 eme.js），通过调用 MSE 模块（本例中 mse.js） 逐块加载视频片段并控制播放。
 - resources.js：模拟 License（Key） server，与 CDM 模块交互并提供解密媒体资源所需的 `key`；

diff --git a/前沿技术/27.精读《css-in-js 杀鸡用牛刀》.md b/前沿技术/27.精读《css-in-js 杀鸡用牛刀》.md
@@ -2,7 +2,7 @@
 
 # 1 引言
 
-<img src="assets/27/logo.jpeg" width="500" alt="logo" />
+<img src="https://img.alicdn.com/imgextra/i3/O1CN01cpxa4o1zwpbWN5xZz_!!6000000006779-2-tps-356-220.png" width="500" alt="logo" />
 
 继 [精读《请停止 css-in-js 的行为》](https://zhuanlan.zhihu.com/p/26878157) 这篇文章之后，我们又读了一篇抵制 css-in-js 的文章，虽然大部分观点都有道理，但部分存在可商榷之处，让我们分析一下这篇文章，了解 css 还做了哪些努力，以及 css-in-js 会如何发展。
 

diff --git a/前沿技术/28.精读《2017前端性能优化备忘录》.md b/前沿技术/28.精读《2017前端性能优化备忘录》.md
@@ -4,7 +4,7 @@
 
 # 1 引言
 
-<img src="assets/28/logo.jpeg" width="500" alt="logo" />
+<img src="https://img.alicdn.com/imgextra/i2/O1CN01rWHv8I1StHD2o0bV3_!!6000000002304-2-tps-800-313.png" width="500" alt="logo" />
 
 本文提供了解决如何让网站响应更加迅速、访问更加流畅等前端性能优化问题的方法，读者们可以提供一些在实际场景中的性能优化问题以及解决方案，可泛谈优化策略，亦可针对性深入讨论某个优化方法。
 

diff --git a/前沿技术/3.精读《前后端渲染之争》.md b/前沿技术/3.精读《前后端渲染之争》.md
@@ -2,7 +2,7 @@
 
 # 1 引言
 
-<img src="assets/3/ssr.png" alt="logo" width="500" />
+<img src="https://img.alicdn.com/imgextra/i2/O1CN01PiYRah1qJ8jq4yeZM_!!6000000005474-2-tps-789-351.png" alt="logo" width="500" />
 
 我为什么要选这篇文章呢？
 

diff --git a/前沿技术/30.精读《Javascript 事件循环与异步》.md b/前沿技术/30.精读《Javascript 事件循环与异步》.md
@@ -18,7 +18,7 @@ sessionstack 最近接连发了好几篇文章, 深入探讨 JS, 以及  JS 中
 
 ### Event Loop 与 Call Stack、Web APIs 之间的关系
 
-![Event Loop](./assets/30/1.png)
+![Event Loop](https://img.alicdn.com/imgextra/i1/O1CN01kfYH061VI7vfO7App_!!6000000002629-2-tps-1024-768.png)
 
 原文通过 16 个图表达了 5 行代码的执行过程，太长就只贴第一张图了。
 
@@ -39,7 +39,7 @@ fetch().then()
 
 最终效果如下 gif 图所示：
 
-![Event Loop](./assets/30/1.gif)
+![Event Loop](https://img.alicdn.com/imgextra/i1/O1CN01AM2BOf1XF2UYPbGiF_!!6000000002893-2-tps-808-606.png)
 
 ### Microtask 与 Macrotask
 

diff --git a/前沿技术/31.精读《我不再使用高阶组件》.md b/前沿技术/31.精读《我不再使用高阶组件》.md
@@ -4,7 +4,7 @@
 
 ## 1 引言
 
-<img src="assets/31/never give up.jpeg" alt="logo" width="500" />
+<img src="https://img.alicdn.com/imgextra/i2/O1CN015wM4ZL1pMW2ZRbwmj_!!6000000005346-2-tps-600-551.png" alt="logo" width="500" />
 
 > React 与 Vue 相比，组件为一等公民是最大特色之一。
 

diff --git a/前沿技术/32.精读《React Router4.0 进阶概念》.md b/前沿技术/32.精读《React Router4.0 进阶概念》.md
@@ -4,11 +4,11 @@
 
 ## 1 引言
 
-<img src="assets/32/router-logo.png" alt="logo" width="500" />
+<img src="https://img.alicdn.com/imgextra/i1/O1CN01dqFFbE1eDqlwYtZay_!!6000000003838-2-tps-698-312.png" alt="logo" width="500" />
 
 React Router4.0 出来之前，许多人都对其夸张的变化感到不适，但其实 4.0 说不定真的是一个非常正确的改动。
 
-![1.jpeg](assets/32/1.jpeg)
+![1.jpeg](https://img.alicdn.com/imgextra/i3/O1CN01JkJldr27J05KNogqx_!!6000000007775-2-tps-440-900.png)
 
 也许，说 4.0 不好的人，正是另一个消极版的小红点，希望这篇文章可以让大家意识到，React Router4.0 对大多数人真的很棒！
 

diff --git a/前沿技术/35.精读《dob - 框架实现》.md b/前沿技术/35.精读《dob - 框架实现》.md
@@ -36,7 +36,7 @@ dob 是个类似 mobx 的框架，实现思路都很类似，如果难以读懂
 
 依赖追踪分为两部分，分别是 **依赖收集** 与 **触发回调**，如果把这两个功能合起来，就是 `observe` 函数，分开的话，就是较为底层的 `Reaction`：
 
-![](./assets/35/Reaction.png)
+![](https://img.alicdn.com/imgextra/i2/O1CN01F7u1J41JTKE1ZJp8x_!!6000000001029-2-tps-534-196.png)
 
 `Reaction` 双管齐下，一边监听用到了哪些变量，另一边在这些变量改变后，执行回调函数。`Observe` 利用 `Reaction` 实现（简化版）：
 
@@ -60,21 +60,21 @@ function observe(callback) {
 
 依赖收集由 getter、setter 完成，但触发时，却无法定位触发代码位于哪个函数中，所以为了依赖追踪（即变量与函数绑定），需要定义一个全局的变量标示当前执行函数，当各依赖收集函数执行没有交叉时，可以正常运作：
 
-![](./assets/35/collect1.png)
+![](https://img.alicdn.com/imgextra/i1/O1CN01yfV1zA1bj2tudPIt6_!!6000000003500-2-tps-547-554.png)
 
 上图右侧白色方块是函数体，`getter` 表示其中访问到某个变量的 `getter`，经由依赖收集后，变量被修改时，左侧控制器会重新调用其所在的函数。
 
 但是，当函数嵌套函数时，就会出现异常：
 
-![](./assets/35/collect2.png)
+![](https://img.alicdn.com/imgextra/i3/O1CN01Ex3IDC1e8M1IAvAvy_!!6000000003826-2-tps-558-312.png)
 
 由于采用全局变量标记法，当回调函数嵌套起来时，当内层函数执行完后，实际作用域已回到了外层，但依赖收集无法获取这个堆栈改变事件，导致后续 `getter` 都会误绑定到内层函数。
 
 异步（回调）也是同理，虽然写在一个函数体内，但执行的堆栈却不同，因此无法实现正确的依赖收集。
 
 所以需要一些办法，将嵌套的函数放在外层函数执行完毕后，再执行：
 
-![](./assets/35/collect3.png)
+![](https://img.alicdn.com/imgextra/i3/O1CN013SAiZf1IBAubeITp9_!!6000000000854-2-tps-219-358.png)
 
 换成代码描述如下：
 
@@ -93,7 +93,7 @@ observe(()=>{
 
 我们可以逐层分解，**在每一层执行时，子元素如果是 `observe`，就会临时放到队列里并跳过，在父 `observe` 执行完毕后，检查并执行队列**，两层嵌套时执行逻辑如下图所示：
 
-![](./assets/35/collect4.png)
+![](https://img.alicdn.com/imgextra/i4/O1CN01jKEwFP1ePIfuHNFkA_!!6000000003863-2-tps-421-568.png)
 
 这些努力，就是为了保证在同步执行时，所有 `getter` 都能绑定到正确的回调函数。
 
@@ -107,7 +107,7 @@ observe 可以类比到 React 的 render，它们都具有相同的特征：是
 
 要实现结合，用到两个小技巧：聚合生命周期、替换 render 函数，用图才能解释清楚：
 
-![](./assets/35/react.png)
+![](https://img.alicdn.com/imgextra/i4/O1CN01Jv4gvd21axvSNjoDU_!!6000000007002-2-tps-655-565.png)
 
 以上是简化版，正式版本使用 `reaction` 实现，可以更清晰的区分依赖收集与 rerender 阶段。
 
@@ -131,7 +131,7 @@ observe 可以类比到 React 的 render，它们都具有相同的特征：是
 
 由于数据流需要一个 `Provider` 提供数据源，与 `Connect` 注入数据，所以可以将所有与数据流绑定的 UI 元素一一映射到 Debug UI，就像一面镜子一样映射：
 
-![](./assets/35/debug.png)
+![](https://img.alicdn.com/imgextra/i2/O1CN01lrstnp1oyhRl6G5SY_!!6000000005294-2-tps-1211-512.png)
 
 通过 Debug UI，将 debug 信息与 UI 一一对应，实现 [dob-react-devtools](https://github.com/dobjs/dob-react-devtools) 的效果。
 

diff --git a/前沿技术/4.精读《AsyncAwait优越之处》.md b/前沿技术/4.精读《AsyncAwait优越之处》.md
@@ -2,7 +2,7 @@
 
 # 1 引言
 
-<img src="assets/4/async.png" alt="logo" width="500" />
+<img src="https://img.alicdn.com/imgextra/i4/O1CN01HcU2pR1XbTts6EZS5_!!6000000002942-2-tps-594-288.png" alt="logo" width="500" />
 
 我为什么要选这篇文章呢？
 

diff --git a/前沿技术/44.精读《Rekit Studio》.md b/前沿技术/44.精读《Rekit Studio》.md
@@ -40,7 +40,7 @@
 
 ## 2 概述
 
-<img src="assets/44/logo.png" alt="logo" width="500" />
+<img src="https://img.alicdn.com/imgextra/i3/O1CN011IvrhL28NPVymhalL_!!6000000007920-2-tps-1600-1007.png" alt="logo" width="500" />
 
 一图胜千言，仔细看完图，不然文章就漏掉了一半。
 

diff --git a/前沿技术/5.精读《民工叔单页数据流方案》.md b/前沿技术/5.精读《民工叔单页数据流方案》.md
@@ -2,7 +2,7 @@
 
 # 1 引言
 
-<img src="assets/5/data-stream.jpeg" alt="logo" width="500" />
+<img src="https://img.alicdn.com/imgextra/i1/O1CN01FRCFcw1SsooXOTIW2_!!6000000002303-2-tps-640-330.png" alt="logo" width="500" />
 
 > 前几期精读了前端模块化、语法相关的文章，这次讨论另一个举足轻重的话题：数据流。
 > 数据流在前端的地位与工程化、可视化、组件化是一样重要的，没有好的数据流框架与思想的指导，业务代码长期肯定倾向于不可维护的状态，当项目不断增加功能后，管理数据变得更加重要。

diff --git a/前沿技术/54.精读《在浏览器运行 serverRender》.md b/前沿技术/54.精读《在浏览器运行 serverRender》.md
@@ -27,7 +27,7 @@
 
 我们先了解整体流程：
 
-![](./assets/54/ssr.png)
+![](https://img.alicdn.com/imgextra/i4/O1CN01hOmtLc1VaRlyRsTRm_!!6000000002669-2-tps-1616-1598.png)
 
 ### service worker 拦截首页
 

diff --git a/前沿技术/6.精读《JavaScript错误堆栈处理》.md b/前沿技术/6.精读《JavaScript错误堆栈处理》.md
@@ -4,7 +4,7 @@
 
 # 1. 引言
 
-<img src="assets/5/logo.gif" alt="logo" width="500" />
+<img src="https://img.alicdn.com/imgextra/i2/O1CN01irhvv21FDyUJcJ0fe_!!6000000000454-2-tps-1960-720.png" alt="logo" width="500" />
 
 错误处理无论对那种语言来说，都至关重要。在 JavaScript 中主要是通过 Error 对象和 Stack Traces 提供有价值的错误堆栈，帮助开发者调试。在服务端开发中，开发者可以将有价值错误信息打印到服务器日志中，而对于客户端而言就很难重现用户环境下的报错，我们团队一直在做一个错误监控的应用，在这里也和大家一起讨论下 js 异常监控的常规方式。
 

diff --git a/前沿技术/68.精读《衡量用户体验》.md b/前沿技术/68.精读《衡量用户体验》.md
@@ -4,13 +4,13 @@
 
 从某种意义上说，定性反馈是 UX 设计师最常用的武器。今天从诸多交互出版物或文章中看到，Metrics-Driven Design 概念的发展和越来越受重视的趋势。但两者取一都是片面的，倾向任何一者都会出现问题，追求定性总是在小样本下。定量分析总是忽视用户的反馈，以为数据就可以说明问题。充其量只是达到局部高点。一位 UX 设计师称之为 tunnel vision。
 
-<img src="assets/68/1.png" />
+<img src="https://img.alicdn.com/imgextra/i3/O1CN01GRvHmt1nCJzbpoJFz_!!6000000005053-2-tps-782-466.png" />
 
 像 Booking 网站给出了『洞察数据，情感驱动』作为他们的设计准则。这里总是听上去像是在讲交互视觉范畴，而用户体验是不是指交互视觉呢。我觉得体验度量是不是就是度量交互视觉呢。
 
 ## 用户体验
 
-<img src="assets/68/2.jpg" />
+<img src="https://img.alicdn.com/imgextra/i1/O1CN01yOTJoR1S3WS763OsK_!!6000000002191-2-tps-720-726.png" />
 
 产品用户体验不仅是指交互视觉，我的理解用户体验反映用户与产品从认知，使用到传播整个情感的连接和反馈。能力上包括了产品设计与功能实现，用户交互界面，以及系统承载能力。
 
@@ -28,7 +28,7 @@
 
 比如，我们通过对设计一组反馈问题来统计用户对产品的满意度，其中 Bayes' Probability 在小样本中可以起到很好的作用，又回归到定量分析中。
 
-<img src="assets/68/3.png" />
+<img src="https://img.alicdn.com/imgextra/i2/O1CN01IOfYhb282LIKuuG7V_!!6000000007874-2-tps-638-246.png" />
 
 再比如，对 To B 或 To D 研究用抽样用户行为作单体分析也是一种行之有效的方法。推荐一定志愿者，在特定的数据采集中，持续跟踪志愿者的行为，细化收集几个关键指标：如平均完成一次关键路径的时长、关键路径完成效率等数据来研究产品可用性等作为体验 KPI 来衡量。
 

diff --git a/前沿技术/7.精读《请停止 css-in-js 的行为》.md b/前沿技术/7.精读《请停止 css-in-js 的行为》.md
@@ -2,7 +2,7 @@
 
 # 1 引言
 
-<img src="assets/7/css-in-js.png" alt="logo" width="500" />
+<img src="https://img.alicdn.com/imgextra/i1/O1CN01NR8Xe01sUFZlFbCJr_!!6000000005769-2-tps-450-453.png" alt="logo" width="500" />
 
 > 这篇文章表面是在讲 CSS in JS，实际上是 CSS Modules 支持者与 styled-components 拥趸之间的唇枪舌剑、你来我往。从 2014 年 Vjeux 的演讲开始，css-in-js 的轮子层出不穷。终于过了三年，鸡血时期已经慢慢过去，大家开始冷静思考了。
 

diff --git a/前沿技术/8.精读《入坑React前没有人会告诉你的事》.md b/前沿技术/8.精读《入坑React前没有人会告诉你的事》.md
@@ -6,7 +6,7 @@
 
 # 1 引言
 
-<img src="assets/8/react.jpg" width="500" alt="logo" />
+<img src="https://img.alicdn.com/imgextra/i3/O1CN01E6lPh91tyJBVCAH5B_!!6000000005970-2-tps-630-315.png" width="500" alt="logo" />
 
 我为什么要选这篇文章呢？