\n\t\t
\n\t\t
\n//...\n```\n\n从这里可以看出已经可以更新元素的内容，事实上也就是替换它。那么真正的行为是怎样的呢，其实它会生成一个“配置对象”并且其配置的动作会被相应地应用。在我们的场景下这个文字的更新操作可能形如：\n\n```javascript\n{\n afterNode: null,\n content: \"click state message\",\n fromIndex: null,\n fromNode: null,\n toIndex: null,\n type: \"TEXT_CONTENT\"\n}\n```\n我们可以看到很多字段是空，因为文字更新是比较简单的。但是它有很多属性字段，因为当你移动节点就会比仅仅更新字符串要复杂得多。我们来看这部分的源码加深理解。\n\n```javascript\n//src\\renderers\\dom\\client\\utils\\DOMChildrenOperations.js#172\nprocessUpdates: function(parentNode, updates) {\n for (var k = 0; k < updates.length; k++) {\n var update = updates[k];\n\n switch (update.type) {\n case 'INSERT_MARKUP':\n insertLazyTreeChildAt(\n parentNode,\n update.content,\n getNodeAfter(parentNode, update.afterNode)\n );\n break;\n case 'MOVE_EXISTING':\n moveChild(\n parentNode,\n update.fromNode,\n getNodeAfter(parentNode, update.afterNode)\n );\n break;\n case 'SET_MARKUP':\n setInnerHTML(\n parentNode,\n update.content\n );\n break;\n case 'TEXT_CONTENT':\n setTextContent(\n parentNode,\n update.content\n );\n break;\n case 'REMOVE_NODE':\n removeChild(parentNode, update.fromNode);\n break;\n }\n }\n }\n```\n\n在我们的情况下，更新类型是 `TEXT_CONTENT`，因此实际上这是最后一步，我们调用步骤 (3) 的 `setTextContent` 方法并且更新 HTML 节点（从真实 DOM 中操作）。\n\n非常好！内容已经被更新，界面上也做了重绘。我们还有什么遗忘的吗？让我们结束更新！这些事都做完了，我们的组件生命周期钩子函数 `componentDidUpdate` 会被调用。这样的延迟回调是怎么调用的呢？实际上就是通过事务的封装器。如果你还记得，脏组件的更新会被 `ReactUpdatesFlushTransaction` 封装器修饰，并且其中的一个封装器实际上包含了 `this.callbackQueue.notifyAll()` 逻辑，所以它回调用 `componentDidUpdate`。很好，现在看上去我们已经讲完了全部内容。\n\n### 好, 第 14 部分我们讲完了\n\n我们来回顾一下我们学到的。我们再看一下这种模式，然后去掉冗余的部分：\n\n[](https://rawgit.com/Bogdan-Lyashenko/Under-the-hood-ReactJS/master/stack/images/14/part-14-A.svg)\n\n
14.2 第 14 部分简化板 (点击查看大图)\n\n然后我们适当再调整一下：\n\n[](https://rawgit.com/Bogdan-Lyashenko/Under-the-hood-ReactJS/master/stack/images/14/part-14-B.svg)\n\n
14.3 第 14 简化和重构 (点击查看大图)\n\n很好，实际上，下面的示意图就是我们所讲的。因此，我们可以理解**第 14 部分**的本质，并将其用于最终的 `updating` 方案：\n\n[](https://rawgit.com/Bogdan-Lyashenko/Under-the-hood-ReactJS/master/stack/images/14/part-14-C.svg)\n\n
14.4 第 14 部分 本质 (点击查看大图)\n\n我们已经完成了更新操作的学习，让我们重头整理一下。\n\n[](https://rawgit.com/Bogdan-Lyashenko/Under-the-hood-ReactJS/master/stack/images/14/updating-parts-C.svg)\n\n
14.5 更新 (点击查看大图)\n"
},
{
"path": "TODO/Understanding-code-signing-for-iOS-apps.md",
"content": "> * 原文地址：[Understanding code signing for iOS apps](https://engineering.nodesagency.com/articles/iOS/Understanding-code-signing-for-iOS-apps/)\n* 原文作者：[MariusConstantinescu](https://twitter.com/marius_const)\n* 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)\n* 译者： [Nicolas(Yifei) Li](https://github.com/yifili09)\n* 校对者： [Tuccuay](https://github.com/Tuccuay), [fengzhihao123](https://github.com/fengzhihao123)\n\n# 理解 `iOS` 应用程序的代码签名机制\n\n\n如果你是一位 `iOS` 应用程序开发者，你有可能已经使用过代码签名了。如果你是一位初级的 `iOS` 应用程序开发者，你可能对开发者网站上那些有关 \"Certificates，Identifiers & Profiles\" 的部分感到不知所措。\n\n\n\n本文的目的是帮助初级 `iOS` 应用程序开发者从宏观角度理解代码签名是什么。这不是一个如何按部就班地对你的应用程序进行代码签名的操作手册。理想化来说，在你阅读完这篇文章后，你能够对应用程序进行代码签名而不需要按照任何操作手册。\n\n我不准备对底层细节进行讨论，但是我们将讨论一些非对称加密技术的内容。\n\n### [](#Asymmetric-cryptography \"Asymmetric cryptography\")非对称加密技术\n\n你至少要知道的是，非对称加密技术使用一个**公钥**和一个**私钥**。用户需要保留自己的私钥，但是他们能把公钥分享出去。并且使用这些公钥和私钥，用户就能证明那确实就是他自己。\n\n[这里](https://blog.vrypan.net/2013/08/28/public-key-cryptography-for-non-geeks/) 有一篇浅显易懂地解释什么是非对称加密技术的文章。如果你想知道实现这个技术的细节或者背后用到了哪些数学算法原理，在网络上有很多这样的文章。\n\n### [](#App-ID \"App ID\")App ID\n\n`App ID` 是你应用程序的唯一识别符。它由苹果为你创建的 `team id （团队 id）`（你无法插手） 和你应用程序的 `bundle id （程序包 id）` （比如，`com.youcompany.yourapp`）组成。\n\n也有通配符形式的 `App ID`: `com.yourcompany.*`。它们会匹配多个 `bundle id`。\n\n总而言之，你的应用程序会有一个明确的 `App ID`，而不是一个通配符形式的。\n\n### [](#Certificates \"Certificates\")Certificates / 证书\n\n你可能已经注意到，为了在苹果开发者网站上创建一个证书 / certificate，你需要上传一个签名证书申请 (Certificate Signing Request)。你能通过 `Keychain` 创建这个 `CSR` 文件，并且这个 `CSR` 文件包含一个私钥。\n\n之后在开发者网站上，你能使用这个 `CSR` 文件创建一个证书 （certificate）。\n\n证书 (certificates) 的类型有很多种。最常见的是:\n\n* 应用程序开发证书 (`iOS` 应用程序开发) - 你需要使用这些证书才能让 `XCode` 中的应用程序运行在设备上。 \n* 应用程序分发证书 (苹果应用市场和内部分发渠道) - 你需要使用这些证书，它能让你把应用程序提交到苹果应用市场或者内部分发渠道。\n* `APNS` (Apple Push Notification Service / 苹果推送通知服务系统) - 你需要使用这些证书，它能让你推送内容到你的应用程序中。与应用程序的开发证书和分发证书不同，`APNS` 与 `APP ID` 有关。`APNS` 有两种证书，对于开发环境来说 - Apple Push Notification Service / 苹果推送通知服务 SSL (适用于沙盒环境)，对生产环境来说 - Apple Push Notification Service / 苹果推送通知服务 `SSL` (适用于沙盒和生产环境)。如果你想让推送服务在调试和分发程序上都能使用，你需要创建这两个证书。\n\n### [](#Devices \"Devices\")Devices / 设备\n\n在你账户每年的会员期内，你能为每个产品添加最多 100 个设备。100 个 iPhone, 100 个 iPad, 100 个 iPod Touch， 100 个 Apple Watche 和 100 个 Apple TV。为了把设备添加到你的账户下，你需要添加该设备的唯一识别码。你能在 `Xcode` 中方便地找到它，或在 `iTunes` 中（可能会稍微麻烦点儿）。[这里](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/MaintainingProfiles/MaintainingProfiles.html#//apple_ref/doc/uid/TP40012582-CH30-SW10) 有一份详细的指导手册教你如何添加设备到你的账户下。\n\n### [](#Provisioning-profiles \"Provisioning profiles\")Provisioning profiles / 配置文件\n\n配置文件将 `App ID`，开发者或者内部分发证书和一些设备联系起来。你在苹果开发者网站上创建这些配置文件，然后在 `Xcode` 内下载它们。\n\n### [](#Usage \"Usage\")使用方法\n\n在你创建了这些以后，回到 `Xcode` 页面，添加你的证书，更新你的配置文件，之后选择你想要的那个配置文件。从这些配置文件中，你能选择需要的签名身份(这取决于联系到它的证书)。\n\n### [](#F-A-Q \"F.A.Q.\")常见问题解答\n\n多年来在 `iOS` 开发的过程中，我问过也被很多人问过有关代码签名的问题。比如下面的这些。\n\n* **问题**: 我已经从开发者网站上下载了配置文件和证书，但是我还是不能对应用程序签名。 \n **解答**: 是的，因为你没有私钥，就是那个在证书签名申请中使用的那个。可能是之前其他团队的成员创建了这些证书和配置文件。你能从原来的开发者那里获得这些私钥，重新激活这个证书并且创建一个新的 (和这个证书有联系的所有配置文件都会失效，但是不会对任何应用市场上使用这些证书的应用程序造成问题) 或者如果可能的话，创建一个全新的证书。（目前，每一个开发者账户最多申请 3 个应用程序分发证书。）\n\n* **问题**: 那有关推送服务的证书呢？我想让应用程序能接收推送通知。难道我不应该使用 `APNS` 证书创建一个配置文件么？ \n **解答**: 不是这样的。当你创建一个 `APNS` (Apple Push Notification Service / 苹果推送通知服务) 证书的时候，你把 `APP ID` 联系到这个证书上。所以，首先要有 `CSR` 文件，之后通过这个 `CSR` 文件创建一个新的 `APNS`，下载后在 `Keychain` 中打开它，并以 `.p12` 文件格式导出，之后把这个文件上传到你的推送服务提供商处。这个 `.p12` 文件知道它是和那个应用程序联系的，并且它会只推送内容到这个应用程序。这也是为什么你不能把一个 `APNS` 证书联系到通配符形式的 `APP ID` (com.youcompany.*)。推送通知的服务器需要知道，它需要推送内容到哪个应用程序。\n\n* **问题**: 我买了一个新的 `mac` 计算机，为了代码签名能正常工作，我应该从旧的 `mac` 计算机上 `keychain` 中导出什么到新的 `mac` 计算机中？ \n **解答**: 你可能想把所有 `keychain` 中的内容导出到新的 `mac` 计算机中。你可以通过 [这些步骤](https://support.apple.com/kb/PH20120?locale=en_US) 完成。但是如果你想导出一个证书，确保你也能导出这个私钥。在 `Keychain` 中，你应该可以通过点击证书旁边的三角选项展开它的内容，之后你就会看到这个私钥。这些证书都能以 `.p12` 文件格式导出。否则，他们会以 `.cer` 格式导出，没有私钥，这个文件是没用的。\n\n* **问题**: 我的 `iOS` 应用程序分发证书过期了，我的应用程序还能继续工作么？ \n **解答**: 当你的证书过期了，使用这个证书的配置文件就会失效了。在应用程序市场（`App Store`）上，只要你的开发者账号还有效，这个应用程序还是能正常使用的。但是通过这个证书在内部渠道分发的应用程序就不能继续使用了。\n\n* **问题**: 我的 `APNS` 证书过期了，现在会发生什么？ \n **解答**: 你不能再发送推送通知给应用程序。通过创建一个与 `App ID` 联系的 新的 `APNS` 证书，下载并导出这个 `.p12` 文件，之后把它上上传给你的推送通知服务提供商。并且不需要为此而更新应用程序。\n\n### [](#Summary \"Summary\")总结\n\n我想再次强调有关代码签名的是:\n\n* 每一个应用程序都有一个 `App ID`\n* 对所有使用中的证书，你都必须存有相关的**私钥**\n* 一个**调试版本的配置文件**把 `APP ID`，调试设备和应用程序开发证书联系在一起。\n* 一个**内部分发渠道的配置文件**把 `App ID`，调试设备和应用程序分发证书联系在一起。\n* 一个**应用程序市场 （`App Store`）的配置文件**把 `App ID` 和你的应用程序分发证书联系在一起。\n* 对于推送通知，创建一个 **APNS 证书**，它和 `App ID` 联系在一起，下载并以 `.p12` 文件格式导出，并上传这个文件到推送通知服务供应商处；如果你想要这个推送通知在调试和生产环境下都起作用，你不得不分别为开发调试和生产环境创建 2 个 `APNS` 证书。\n\n通晓这些能帮助你更好的理解代码签名机制，并且最终省去了很多时间。\n\n\n\n### [](#Further-reading \"Further reading\")延伸阅读\n\n* [深入理解代码签名机制](https://www.objc.io/issues/17-security/inside-code-signing/)\n* [官方指南 - 代码签名](https://developer.apple.com/support/code-signing/) \n* [从入门到放弃 - `iOS` 代码签名和配置文件](https://medium.com/ios-os-x-development/ios-code-signing-provisioning-in-a-nutshell-d5b247760bef)\n\n"
},
{
"path": "TODO/Unit-tests-with-Mockito.md",
"content": "> * 原文链接 : [Unit tests with Mockito - Tutorial](http://www.vogella.com/tutorials/Mockito/article.html)\n> * 原文作者 : [vogella](http://www.vogella.com/)\n> * 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner)\n> * 译者 : [edvardhua](https://github.com/edvardHua/)\n> * 校对者: [hackerkevin](https://github.com/hackerkevin), [futureshine](https://github.com/futureshine) \n\n# 使用强大的 Mockito 测试框架来测试你的代码\n\n>这篇教程介绍了如何使用 Mockito 框架来给软件写测试用例\n\n## 1\\. 预备知识\n\n如果需要往下学习，你需要先理解 Junit 框架中的单元测试。\n\n如果你不熟悉 JUnit，请查看下面的教程：\n[http://www.vogella.com/tutorials/JUnit/article.html](http://www.vogella.com/tutorials/JUnit/article.html)\n\n## 2\\. 使用mock对象来进行测试\n\n### 2.1\\. 单元测试的目标和挑战\n\n单元测试的思路是在不涉及依赖关系的情况下测试代码（隔离性），所以测试代码与其他类或者系统的关系应该尽量被消除。一个可行的消除方法是替换掉依赖类（测试替换），也就是说我们可以使用替身来替换掉真正的依赖对象。\n\n### 2.2\\. 测试类的分类\n\n_dummy object_ 做为参数传递给方法但是绝对不会被使用。譬如说，这种测试类内部的方法不会被调用，或者是用来填充某个方法的参数。\n\n_Fake_ 是真正接口或抽象类的实现体，但给对象内部实现很简单。譬如说，它存在内存中而不是真正的数据库中。（译者注：_Fake_ 实现了真正的逻辑，但它的存在只是为了测试，而不适合于用在产品中。）\n\n_stub_ 类是依赖类的部分方法实现，而这些方法在你测试类和接口的时候会被用到，也就是说 _stub_ 类在测试中会被实例化。_stub_ 类会回应任何外部测试的调用。_stub_ 类有时候还会记录调用的一些信息。\n\n_mock object_ 是指类或者接口的模拟实现，你可以自定义这个对象中某个方法的输出结果。\n\n测试替代技术能够在测试中模拟测试类以外对象。因此你可以验证测试类是否响应正常。譬如说，你可以验证在 Mock 对象的某一个方法是否被调用。这可以确保隔离了外部依赖的干扰只测试测试类。\n\n我们选择 Mock 对象的原因是因为 Mock 对象只需要少量代码的配置。\n\n### 2.3\\. Mock 对象的产生\n\n你可以手动创建一个 Mock 对象或者使用 Mock 框架来模拟这些类，Mock 框架允许你在运行时创建 Mock 对象并且定义它的行为。\n\n一个典型的例子是把 Mock 对象模拟成数据的提供者。在正式的生产环境中它会被实现用来连接数据源。但是我们在测试的时候 Mock 对象将会模拟成数据提供者来确保我们的测试环境始终是相同的。\n\nMock 对象可以被提供来进行测试。因此，我们测试的类应该避免任何外部数据的强依赖。\n\n通过 Mock 对象或者 Mock 框架，我们可以测试代码中期望的行为。譬如说，验证只有某个存在 Mock 对象的方法是否被调用了。\n\n### 2.4\\. 使用 Mockito 生成 Mock 对象\n\n_Mockito_ 是一个流行 mock 框架，可以和JUnit结合起来使用。Mockito 允许你创建和配置 mock 对象。使用Mockito可以明显的简化对外部依赖的测试类的开发。\n\n一般使用 Mockito 需要执行下面三步\n\n* 模拟并替换测试代码中外部依赖。\n\n* 执行测试代码\n\n* 验证测试代码是否被正确的执行\n\n\n\n## 3\\. 为自己的项目添加 Mockito 依赖\n\n### 3.1\\. 在 Gradle 添加 Mockito 依赖\n\n如果你的项目使用 Gradle 构建，将下面代码加入 Gradle 的构建文件中为自己项目添加 Mockito 依赖\n\n repositories { jcenter() }\n dependencies { testCompile \"org.mockito:mockito-core:2.0.57-beta\" }\n\n\n### 3.2\\. 在 Maven 添加 Mockito 依赖\n\n需要在 Maven 声明依赖，您可以在 [http://search.maven.org](http://search.maven.org) 网站中搜索 g:\"org.mockito\", a:\"mockito-core\" 来得到具体的声明方式。\n\n### 3.3\\. 在 Eclipse IDE 使用 Mockito\n\nEclipse IDE 支持 Gradle 和 Maven 两种构建工具，所以在 Eclipse IDE 添加依赖取决你使用的是哪一个构建工具。\n\n### 3.4\\. 以 OSGi 或者 Eclipse 插件形式添加 Mockito 依赖\n\n在 Eclipse RCP 应用依赖通常可以在 p2 update 上得到。Orbit 是一个很好的第三方仓库，我们可以在里面寻找能在 Eclipse 上使用的应用和插件。\n\nOrbit 仓库地址 [http://download.eclipse.org/tools/orbit/downloads](http://download.eclipse.org/tools/orbit/downloads)\n\n\n\n## 4\\. 使用Mockito API\n\n### 4.1\\. 静态引用\n\n如果在代码中静态引用了`org.mockito.Mockito.*;`，那你你就可以直接调用静态方法和静态变量而不用创建对象，譬如直接调用 mock() 方法。\n\n### 4.2\\. 使用 Mockito 创建和配置 mock 对象\n\n除了上面所说的使用 mock() 静态方法外，Mockito 还支持通过 `@Mock` 注解的方式来创建 mock 对象。\n\n如果你使用注解，那么必须要实例化 mock 对象。Mockito 在遇到使用注解的字段的时候，会调用`MockitoAnnotations.initMocks(this)` 来初始化该 mock 对象。另外也可以通过使用`@RunWith(MockitoJUnitRunner.class)`来达到相同的效果。\n\n通过下面的例子我们可以了解到使用`@Mock` 的方法和`MockitoRule`规则。\n\n\n import static org.mockito.Mockito.*;\n\n public class MockitoTest {\n\n @Mock\n MyDatabase databaseMock; (1)\n\n @Rule public MockitoRule mockitoRule = MockitoJUnit.rule(); (2)\n\n @Test\n public void testQuery() {\n ClassToTest t = new ClassToTest(databaseMock); (3)\n boolean check = t.query(\"* from t\"); (4)\n assertTrue(check); (5)\n verify(databaseMock).query(\"* from t\"); (6)\n }\n }\n\n\n1. 告诉 Mockito 模拟 databaseMock 实例\n\n2. Mockito 通过 @mock 注解创建 mock 对象\n\n3. 使用已经创建的mock初始化这个类\n\n4. 在测试环境下，执行测试类中的代码\n\n5. 使用断言确保调用的方法返回值为 true\n\n6. 验证 query 方法是否被 `MyDatabase` 的 mock 对象调用\n\n\n### 4.3\\. 配置 mock\n\n当我们需要配置某个方法的返回值的时候，Mockito 提供了链式的 API 供我们方便的调用\n\n`when(….).thenReturn(….)`可以被用来定义当条件满足时函数的返回值，如果你需要定义多个返回值，可以多次定义。当你多次调用函数的时候，Mockito 会根据你定义的先后顺序来返回返回值。Mocks 还可以根据传入参数的不同来定义不同的返回值。譬如说你的函数可以将`anyString` 或者 `anyInt`作为输入参数，然后定义其特定的放回值。\n\n import static org.mockito.Mockito.*;\n import static org.junit.Assert.*;\n\n @Test\n public void test1() {\n // 创建 mock\n MyClass test = Mockito.mock(MyClass.class);\n\n // 自定义 getUniqueId() 的返回值\n when(test.getUniqueId()).thenReturn(43);\n\n // 在测试中使用mock对象\n assertEquals(test.getUniqueId(), 43);\n }\n\n // 返回多个值\n @Test\n public void testMoreThanOneReturnValue() {\n Iterator i= mock(Iterator.class);\n when(i.next()).thenReturn(\"Mockito\").thenReturn(\"rocks\");\n String result=i.next()+\" \"+i.next();\n // 断言\n assertEquals(\"Mockito rocks\", result);\n }\n\n // 如何根据输入来返回值\n @Test\n public void testReturnValueDependentOnMethodParameter() {\n Comparable c= mock(Comparable.class);\n when(c.compareTo(\"Mockito\")).thenReturn(1);\n when(c.compareTo(\"Eclipse\")).thenReturn(2);\n // 断言\n assertEquals(1,c.compareTo(\"Mockito\"));\n }\n\n // 如何让返回值不依赖于输入\n @Test\n public void testReturnValueInDependentOnMethodParameter() {\n Comparable c= mock(Comparable.class);\n when(c.compareTo(anyInt())).thenReturn(-1);\n // 断言\n assertEquals(-1 ,c.compareTo(9));\n }\n\n // 根据参数类型来返回值\n @Test\n public void testReturnValueInDependentOnMethodParameter() {\n Comparable c= mock(Comparable.class);\n when(c.compareTo(isA(Todo.class))).thenReturn(0);\n // 断言\n Todo todo = new Todo(5);\n assertEquals(todo ,c.compareTo(new Todo(1)));\n }\n\n对于无返回值的函数，我们可以使用`doReturn(…).when(…).methodCall`来获得类似的效果。例如我们想在调用某些无返回值函数的时候抛出异常，那么可以使用`doThrow` 方法。如下面代码片段所示\n\n\n import static org.mockito.Mockito.*;\n import static org.junit.Assert.*;\n\n // 下面测试用例描述了如何使用doThrow()方法\n\n @Test(expected=IOException.class)\n public void testForIOException() {\n // 创建并配置 mock 对象\n OutputStream mockStream = mock(OutputStream.class);\n doThrow(new IOException()).when(mockStream).close();\n\n // 使用 mock\n OutputStreamWriter streamWriter= new OutputStreamWriter(mockStream);\n streamWriter.close();\n }\n\n\n### 4.4\\. 验证 mock 对象方法是否被调用 \n\nMockito 会跟踪 mock 对象里面所有的方法和变量。所以我们可以用来验证函数在传入特定参数的时候是否被调用。这种方式的测试称行为测试，行为测试并不会检查函数的返回值，而是检查在传入正确参数时候函数是否被调用。\n\n import static org.mockito.Mockito.*;\n\n @Test\n public void testVerify() {\n // 创建并配置 mock 对象\n MyClass test = Mockito.mock(MyClass.class);\n when(test.getUniqueId()).thenReturn(43);\n\n // 调用mock对象里面的方法并传入参数为12\n test.testing(12);\n test.getUniqueId();\n test.getUniqueId();\n\n // 查看在传入参数为12的时候方法是否被调用\n verify(test).testing(Matchers.eq(12));\n\n // 方法是否被调用两次\n verify(test, times(2)).getUniqueId();\n\n // 其他用来验证函数是否被调用的方法\n verify(mock, never()).someMethod(\"never called\");\n verify(mock, atLeastOnce()).someMethod(\"called at least once\");\n verify(mock, atLeast(2)).someMethod(\"called at least twice\");\n verify(mock, times(5)).someMethod(\"called five times\");\n verify(mock, atMost(3)).someMethod(\"called at most 3 times\");\n }\n\n### 4.5\\. 使用 Spy 封装 java 对象\n@Spy或者`spy()`方法可以被用来封装 java 对象。被封装后，除非特殊声明（打桩 _stub_），否则都会真正的调用对象里面的每一个方法\n\n\n import static org.mockito.Mockito.*;\n\n // Lets mock a LinkedList\n List list = new LinkedList();\n List spy = spy(list);\n\n // 可用 doReturn() 来打桩\n doReturn(\"foo\").when(spy).get(0);\n\n // 下面代码不生效\n // 真正的方法会被调用\n // 将会抛出 IndexOutOfBoundsException 的异常，因为 List 为空\n when(spy.get(0)).thenReturn(\"foo\");\n\n方法`verifyNoMoreInteractions()`允许你检查没有其他的方法被调用了。\n\n### 4.6\\. 使用 @InjectMocks 在 Mockito 中进行依赖注入\n\n我们也可以使用`@InjectMocks` 注解来创建对象，它会根据类型来注入对象里面的成员方法和变量。假定我们有 ArticleManager 类\n\n public class ArticleManager {\n private User user;\n private ArticleDatabase database;\n\n ArticleManager(User user) {\n this.user = user;\n }\n\n void setDatabase(ArticleDatabase database) { }\n }\n\n这个类会被 Mockito 构造，而类的成员方法和变量都会被 mock 对象所代替，正如下面的代码片段所示：\n\n @RunWith(MockitoJUnitRunner.class)\n public class ArticleManagerTest {\n\n @Mock ArticleCalculator calculator;\n @Mock ArticleDatabase database;\n @Most User user;\n\n @Spy private UserProvider userProvider = new ConsumerUserProvider();\n\n @InjectMocks private ArticleManager manager; (1)\n\n @Test public void shouldDoSomething() {\n // 假定 ArticleManager 有一个叫 initialize() 的方法被调用了\n // 使用 ArticleListener 来调用 addListener 方法\n manager.initialize();\n\n // 验证 addListener 方法被调用\n verify(database).addListener(any(ArticleListener.class));\n }\n }\n\n1. 创建ArticleManager实例并注入Mock对象\n\n更多的详情可以查看\n[http://docs.mockito.googlecode.com/hg/1.9.5/org/mockito/InjectMocks.html](http://docs.mockito.googlecode.com/hg/1.9.5/org/mockito/InjectMocks.html).\n\n### 4.7\\. 捕捉参数\n\n`ArgumentCaptor`类允许我们在verification期间访问方法的参数。得到方法的参数后我们可以使用它进行测试。\n\n```\nimport static org.hamcrest.Matchers.hasItem;\nimport static org.junit.Assert.assertThat;\nimport static org.mockito.Mockito.mock;\nimport static org.mockito.Mockito.verify;\n\nimport java.util.Arrays;\nimport java.util.List;\n\nimport org.junit.Rule;\nimport org.junit.Test;\nimport org.mockito.ArgumentCaptor;\nimport org.mockito.Captor;\nimport org.mockito.junit.MockitoJUnit;\nimport org.mockito.junit.MockitoRule;\n\npublic class MockitoTests {\n @Rule\n public MockitoRule rule = MockitoJUnit.rule();\n\n @Captor\n private ArgumentCaptor
> captor;\n\n @Test\n public final void shouldContainCertainListItem() {\n List asList = Arrays.asList(\"someElement_test\", \"someElement\");\n final List mockedList = mock(List.class);\n mockedList.addAll(asList);\n\n verify(mockedList).addAll(captor.capture());\n final List capturedArgument = captor.getValue();\n assertThat(capturedArgument, hasItem(\"someElement\"));\n }\n}\n```\n\n### 4.8\\. Mockito的限制\n\nMockito当然也有一定的限制。而下面三种数据类型则不能够被测试\n\n* final classes\n\n* anonymous classes\n\n* primitive types\n\n \n## 5\\. 在Android中使用Mockito\n\n在 Android 中的 Gradle 构建文件中加入 Mockito 依赖后就可以直接使用 Mockito 了。若想使用 Android Instrumented tests 的话，还需要添加 dexmaker 和 dexmaker-mockito 依赖到 Gradle 的构建文件中。（需要 Mockito 1.9.5版本以上）\n\n dependencies {\n testCompile 'junit:junit:4.12'\n // Mockito unit test 的依赖\n testCompile 'org.mockito:mockito-core:1.+'\n // Mockito Android instrumentation tests 的依赖\n androidTestCompile 'org.mockito:mockito-core:1.+'\n androidTestCompile \"com.google.dexmaker:dexmaker:1.2\"\n androidTestCompile \"com.google.dexmaker:dexmaker-mockito:1.2\"\n }\n\n\n## 6\\. 实例：使用Mockito写一个Instrumented Unit Test\n\n### 6.1\\. 创建一个测试的Android 应用\n\n创建一个包名为`com.vogella.android.testing.mockito.contextmock`的Android应用，添加一个静态方法\n，方法里面创建一个包含参数的Intent，如下代码所示：\n\n public static Intent createQuery(Context context, String query, String value) {\n // 简单起见，重用MainActivity\n Intent i = new Intent(context, MainActivity.class);\n i.putExtra(\"QUERY\", query);\n i.putExtra(\"VALUE\", value);\n return i;\n }\n\n\n### 6.2\\. 在app/build.gradle文件中添加Mockito依赖\n\n dependencies {\n // Mockito 和 JUnit 的依赖\n // instrumentation unit tests on the JVM\n androidTestCompile 'junit:junit:4.12'\n androidTestCompile 'org.mockito:mockito-core:2.0.57-beta'\n androidTestCompile 'com.android.support.test:runner:0.3'\n androidTestCompile \"com.google.dexmaker:dexmaker:1.2\"\n androidTestCompile \"com.google.dexmaker:dexmaker-mockito:1.2\"\n\n // Mockito 和 JUnit 的依赖\n // tests on the JVM\n testCompile 'junit:junit:4.12'\n testCompile 'org.mockito:mockito-core:1.+'\n\n }\n\n \n### 6.3\\. 创建测试\n\n使用 Mockito 创建一个单元测试来验证在传递正确 extra data 的情况下，intent 是否被触发。\n\n因此我们需要使用 Mockito 来 mock 一个`Context`对象，如下代码所示：\n\n package com.vogella.android.testing.mockitocontextmock;\n\n import android.content.Context;\n import android.content.Intent;\n import android.os.Bundle;\n\n import org.junit.Test;\n import org.junit.runner.RunWith;\n import org.mockito.Mockito;\n\n import static org.junit.Assert.assertEquals;\n import static org.junit.Assert.assertNotNull;\n\n public class TextIntentCreation {\n\n @Test\n public void testIntentShouldBeCreated() {\n Context context = Mockito.mock(Context.class);\n Intent intent = MainActivity.createQuery(context, \"query\", \"value\");\n assertNotNull(intent);\n Bundle extras = intent.getExtras();\n assertNotNull(extras);\n assertEquals(\"query\", extras.getString(\"QUERY\"));\n assertEquals(\"value\", extras.getString(\"VALUE\"));\n }\n }\n\n\n## 7\\. 实例：使用 Mockito 创建一个 mock 对象\n\n### 7.1\\. 目标\n\n创建一个 Api，它可以被 Mockito 来模拟并做一些工作\n\n### 7.2\\. 创建一个Twitter API 的例子\n\n实现 `TwitterClient`类，它内部使用到了 `ITweet` 的实现。但是`ITweet`实例很难得到，譬如说他需要启动一个很复杂的服务来得到。\n\n public interface ITweet {\n\n String getMessage();\n }\n\n\n public class TwitterClient {\n\n public void sendTweet(ITweet tweet) {\n String message = tweet.getMessage();\n\n // send the message to Twitter\n }\n }\n\n\n### 7.3\\. 模拟 ITweet 的实例\n\n为了能够不启动复杂的服务来得到 `ITweet`，我们可以使用 Mockito 来模拟得到该实例。\n\n\n @Test\n public void testSendingTweet() {\n TwitterClient twitterClient = new TwitterClient();\n\n ITweet iTweet = mock(ITweet.class);\n\n when(iTweet.getMessage()).thenReturn(\"Using mockito is great\");\n\n twitterClient.sendTweet(iTweet);\n }\n\n\n现在 `TwitterClient` 可以使用 `ITweet` 接口的实现，当调用 `getMessage()` 方法的时候将会打印 \"Using Mockito is great\" 信息。\n\n### 7.4\\. 验证方法调用\n\n确保 getMessage() 方法至少调用一次。\n\n @Test\n public void testSendingTweet() {\n TwitterClient twitterClient = new TwitterClient();\n\n ITweet iTweet = mock(ITweet.class);\n\n when(iTweet.getMessage()).thenReturn(\"Using mockito is great\");\n\n twitterClient.sendTweet(iTweet);\n\n verify(iTweet, atLeastOnce()).getMessage();\n }\n\n\n### 7.5\\. 验证\n\n运行测试，查看代码是否测试通过。\n\n## 8\\. 模拟静态方法\n\n### 8.1\\. 使用 Powermock 来模拟静态方法\n\n因为 Mockito 不能够 mock 静态方法，因此我们可以使用 `Powermock`。\n\n import java.net.InetAddress;\n import java.net.UnknownHostException;\n\n public final class NetworkReader {\n public static String getLocalHostname() {\n String hostname = \"\";\n try {\n InetAddress addr = InetAddress.getLocalHost();\n // Get hostname\n hostname = addr.getHostName();\n } catch ( UnknownHostException e ) {\n }\n return hostname;\n }\n }\n\n我们模拟了 NetworkReader 的依赖，如下代码所示：\n\n import org.junit.runner.RunWith;\n import org.powermock.core.classloader.annotations.PrepareForTest;\n\n @RunWith( PowerMockRunner.class )\n @PrepareForTest( NetworkReader.class )\n public class MyTest {\n\n // 测试代码\n\n @Test\n public void testSomething() {\n mockStatic( NetworkUtil.class );\n when( NetworkReader.getLocalHostname() ).andReturn( \"localhost\" );\n\n // 与 NetworkReader 协作的测试\n }\n\n\n### 8.2\\.用封装的方法代替Powermock \n\n有时候我们可以在静态方法周围包含非静态的方法来达到和 Powermock 同样的效果。\n\n class FooWraper { \n void someMethod() { \n Foo.someStaticMethod() \n } \n }\n\n\n### 9\\. Mockito 参考资料\n\nhttp://site.mockito.org - Mockito 官网\n\nhttps://github.com/mockito/mockito- Mockito Github\n\nhttps://github.com/mockito/mockito/blob/master/doc/release-notes/official.md - Mockito 发行说明\n\nhttp://martinfowler.com/articles/mocksArentStubs.html 与Mocks，Stub有关的文章\n\nhttp://chiuki.github.io/advanced-android-espresso/ 高级android教程（竟然是个妹子）\n"
},
{
"path": "TODO/Using-Flutter-in-China.md",
"content": "> * 原文地址：[Using Flutter in China](https://github.com/flutter/flutter/wiki/Using-Flutter-in-China)\n> * 原文作者：[Flutter](https://github.com/flutter)\n> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)\n> * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO/Using-Flutter-in-China.md](https://github.com/xitu/gold-miner/blob/master/TODO/Using-Flutter-in-China.md)\n> * 译者：[mysterytony](https://github.com/mysterytony)\n> * 校对者：[hanliuxin5](https://github.com/hanliuxin5), [Starriers](https://github.com/Starriers)\n\n# 在中国使用 Flutter\n\n如果你在中国安装或使用 Flutter ，可以用一个可信的本地镜像来托管 Flutter 的依赖关系。为了让 Flutter 能使用一个备用的在线访问地址，你需要在运行 `flutter` 指令之前设置两个环境变量：`PUB_HOSTED_URL` 和 `FLUTTER_STORAGE_BASE_URL`。\n\n比如说，在 MacOS 或 Linux 上，为了让你能使用镜像站点，下面是首先需要进行的一系列设置步骤。在你想要存储克隆下来的 Flutter 文件夹下运行下面的 Bash 命令：\n\n```source-shell\nexport PUB_HOSTED_URL=https://pub.flutter-io.cn\nexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn\ngit clone -b dev https://github.com/flutter/flutter.git\nexport PATH=\"$PWD/flutter/bin:$PATH\"\ncd ./flutter\nflutter doctor\n```\n\n然后，你就应该可以继续正常地 [配置 Flutter](https://flutter.io/setup/)。从现在开始，在有 `PUB_HOSTED_URL` 和 `FLUTTER_STORAGE_BASE_URL` 环境变量的控制台用 `flutter packages get` 下载的包将会从 `flutter-io.cn` 下载。\n\n`flutter-io.cn` 服务器是 Flutter 一个由 [GDG China](http://www.chinagdg.com/) 维护的依赖和包的临时镜像。Flutter 团队不能保证这个服务的长期可用性。你可以自由使用其他可用的镜像。如果你对在中国建立你自己的镜像感兴趣，请联系 [flutter-dev@googlegroups.com](mailto:flutter-dev@googlegroups.com) 以获得协助。\n\n已知问题：\n\n* 从源码运行 Flutter Gallery 程序需要的资源目前托管在这个解决方案暂不支持的域名。你可以订阅 [这个问题](https://github.com/flutter/flutter/issues/13763) 的更新。同时，你也可以在 Google Play 或者你信任的第三方商店看看 Flutter Gallery。\n\n\n---\n\n> [掘金翻译计划](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)、[前端](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#设计)、[人工智能](https://github.com/xitu/gold-miner#人工智能)等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)、[官方微博](http://weibo.com/juejinfanyi)、[知乎专栏](https://zhuanlan.zhihu.com/juejinfanyi)。\n"
},
{
"path": "TODO/What-would-be-your-advice-to-a-software-engineer-who-wants-to-learn-machine-learning.md",
"content": "> * 原文地址：[What would be your advice to a software engineer who wants to learn machine learning?](https://www.quora.com/What-would-be-your-advice-to-a-software-engineer-who-wants-to-learn-machine-learning-3/answer/Alex-Smola-1)\n> * 原文作者：[Alex Smola](https://www.quora.com/profile/Alex-Smola-1)\n> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)\n> * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO/What-would-be-your-advice-to-a-software-engineer-who-wants-to-learn-machine-learning.md](https://github.com/xitu/gold-miner/blob/master/TODO/What-would-be-your-advice-to-a-software-engineer-who-wants-to-learn-machine-learning.md)\n> * 译者：[lsvih](https://github.com/lsvih)\n> * 校对者：[吃土小2叉](https://github.com/xunge0613),[Tina92](https://github.com/Tina92)\n\n# 你会给想学习机器学习的软件工程师提出什么建议？\n\n这很大一部分都取决于这名软件工程师的背景，以及他希望掌握机器学习的哪一部分。为了具体讨论，现在假设这是一名初级工程师，他读了 4 年本科，从业 2 年，现在想从事计算广告学（CA）、自然语言处理（NLP）、图像分析、社交网络分析、搜索、推荐排名相关领域。现在，让我们从机器学习的必要课程开始讨论（声明：下面的清单很不完整，如果您的论文没有被包括在内，提前向您抱歉）。\n\n- 线性代数\n 很多的机器学习算法、统计学原理、模型优化都依赖线性代数。这也解释了为何在深度学习领域 GPU 要优于 CPU。在线性代数方面，你至少得熟练掌握以下内容：\n\n - 标量、向量、矩阵、张量。你可以将它们看成零维、一维、二维、三维与更高维的对象，可以对它们进行各种组合、变换，就像乐高玩具一样。它们为数据变换提供了最基础的处理方法。\n - 特征向量、标准化、矩阵近似、分解。实质上这些方法都是为了方便线性代数的运算。如果你想分析一个矩阵是如何运算的（例如检查神经网络中梯度消失问题，或者检查强化学习算法发散的问题），你得了解矩阵与向量应用了多少种缩放方法。而低阶矩阵近似与 Cholesky 分解可以帮你写出性能更好、稳定性更强的代码。\n - 数值线性代数\n 如果你想进一步优化算法的话，这是必修课。它对于理解核方法与深度学习很有帮助，不过对于图模型及采样来说它并不重要。\n - 推荐书籍\n [《Serge Lang, Linear Algebra》](http://www.amazon.com/Linear-Algebra-Undergraduate-Texts-Mathematics/dp/0387964126)\n 很基础的线代书籍，很适合在校学生。\n [《Bela Bolobas, Linear Analysis》](http://www.amazon.com/Linear-Analysis-Introductory-Cambridge-Mathematical/dp/0521655773)\n 这本书目标人群是那些想做数学分析、泛函分析的人。当然它的内容更加晦涩难懂，但更有意义。如果你攻读 PhD，值得一读。\n [《Lloyd Trefethen and David Bau, Numerical Linear Algebra》](http://www.amazon.com/Numerical-Linear-Algebra-Lloyd-Trefethen/dp/0898713617)\n 这本书是同类书籍中较为推荐的一本。[《Numerical Recipes》](http://www.amazon.com/Numerical-Recipes-Scientific-Computing-Second/dp/0521431085/)也是一本不错的书，但是里面的算法略为过时了。另外，推荐 Golub 和 van Loan 合著的书[《Matrix Computations》](http://www.amazon.com/Computations-Hopkins-Studies-Mathematical-Sciences/dp/1421407949/)。\n\n- 优化与基础运算\n\n 大多数时候提出问题是很简单的，而解答问题则是很困难的。例如，你想对一组数据使用线性回归（即线性拟合），那么你应该希望数据点与拟合线的距离平方和最小；又或者，你想做一个良好的点击预测模型，那么你应该希望最大程度地提高用户点击广告概率估计的准确性。也就是说，在一般情况下，我们会得到一个客观问题、一些参数、一堆数据，我们要做的就是找到通过它们解决问题的方法。找到这种方法是很重要的，因为我们一般得不到闭式解。\n\n - 凸优化\n\n 在大多情况下，优化问题不会存在太多的局部最优解，因此这类问题会比较好解决。这种“局部最优即全局最优”的问题就是凸优化问题。\n\n （如果你在集合的任意两点间画一条直线，整条线始终在集合范围内，则这个集合是一个凸集合；如果你在一条函数曲线的任意两点间画一条直线，这两点间的函数曲线始终在这条直线之下，则这个函数是一个凸函数）\n\n Steven Boyd 与 Lieven Vandenberghe [合著的书](http://stanford.edu/~boyd/cvxbook/)可以说是这个领域的规范书籍了，这本书非常棒，而且是免费的，值得一读；此外，你可以在 [Boyd 的课程](http://web.stanford.edu/~boyd/)中找到很多很棒的幻灯片；[Dimitri Bertsekas](http://www.mit.edu/~dimitrib/home.html) 写了一系列关于优化、控制方面的书籍。读通这些书足以让任何一个人在这个领域立足。\n\n - 随机梯度下降（SGD）\n\n 大多数问题其实最开始都是凸优化问题的特殊情况（至少早期定理如此），但是随着数据的增加，凸优化问题的占比会逐渐减少。因此，假设你现在得到了一些数据，你的算法将会需要在每一个更新步骤前将所有的数据都检查一遍。\n\n 现在，我不怀好意地给了你 10 份相同的数据，你将不得不重复 10 次没有任何帮助的工作。不过在现实中并不会这么糟糕，你可以设置很小的更新迭代步长，每次更新前都将所有的数据检查一遍，这种方法将会帮你解决这类问题。小步长计算在机器学习中已经有了很大的转型，配合上一些相关的算法会使得解决问题更加地简单。\n\n 不过，这样的做法对并行化计算提出了挑战。我们于 2009 年发表的[《Slow Learners are Fast》](http://arxiv.org/abs/0911.0491)论文可能就是这个方向的先导者之一。2013 年牛峰等人发表的[《Hogwild》](https://www.eecs.berkeley.edu/~brecht/papers/hogwildTR.pdf)论文给出了一种相当优雅的无锁版本变体。简而言之，这类各种各样的算法都是通过在单机计算局部梯度，并异步更新共有的参数集实现并行快速迭代运算。\n\n 随机梯度下降的另一个难题就是如何控制过拟合（例如可以通过正则化加以控制）。另外还有一种解决凸优化的惩罚方式叫近端梯度算法（PGD）。最流行的当属 Amir Beck 和 Marc Teboulle 提出的 [FISTA 算法](http://people.rennes.inria.fr/Cedric.Herzet/Cedric.Herzet/Sparse_Seminar/Entrees/2012/11/12_A_Fast_Iterative_Shrinkage-Thresholding_Algorithmfor_Linear_Inverse_Problems_(A._Beck,_M._Teboulle)_files/Breck_2009.pdf)了。相关代码可以参考 Francis Bach 的 [SPAM toolbox](http://spams-devel.gforge.inria.fr/)。\n\n - 非凸优化方法\n\n 许多的机器学习问题是非凸的。尤其是与深度学习相关的问题几乎都是非凸的，聚类、主题模型（topic model）、潜变量方法（latent variable method）等各种有趣的机器学习方法也是如此。一些最新的加速技术将对此有所帮助。例如我的学生 [Sashank Reddy](http://www.cs.cmu.edu/~sjakkamr/) 最近展示了如何在这种情况下得到良好的[收敛](http://arxiv.org/abs/1603.06160)[速率](http://arxiv.org/abs/1603.06159)。\n\n 也可以用一种叫做谱学习算法（Spectral Method）的技术。[Anima Anandkumar](http://newport.eecs.uci.edu/anandkumar/) 在最近的 [Quora session](/profile/Anima-Anandkumar-1) 中详细地描述了这项技术的细节。请仔细阅读她的文章，因为里面干货满满。简而言之，凸优化问题并不是唯一能够可靠解决的问题。在某些情况中你可以试着找出其问题的数学等价形式，通过这样找到能够真正反映数据中聚类、主题、相关维度、神经元等一切信息的参数。如果你愿意且能够将一切托付给数学解决，那是一件无比伟大的事。\n\n 最近，在深度神经网络训练方面涌现出了各种各样的新技巧。我将会在下面介绍它们，但是在一些情况中，我们的目标不仅仅是优化模型，而是找到一种特定的解决方案（就好像旅途的重点其实是过程一样）。\n\n- （分布式）系统\n\n 机器学习之所以现在成为了人类、测量学、传感器及数据相关领域几乎是最常用的工具，和过去 10 年规模化算法的发展密不可分。[Jeff Dean](http://research.google.com/pubs/jeff.html) 过去的一年发了 6 篇机器学习教程并不是巧合。在此简单介绍一下他：[点击查看](http://www.informatika.bg/jeffdean)，他是 MapReduce、GFS 及 BigTable 等技术背后的创造者，正是这些技术让 Google 成为了伟大的公司。\n\n 言归正传，（分布式）系统研究为我们提供了分布式、异步、容错、规模化、简单（Simplicity）的宝贵工具。最后一条“简单”是机器学习研究者们常常忽视的一件事。简单（Simplicity）不是 bug，而是一种特征。下面这些技术会让你受益良多：\n\n - 分布式哈希表\n\n 它是 [memcached](https://memcached.org/)、[dynamo](http://www.allthingsdistributed.com/files/amazon-dynamo-sosp2007.pdf)、[pastry](http://research.microsoft.com/en-us/um/people/antr/PAST/pastry.pdf) 以及 [ceph](http://docs.ceph.com/docs/hammer/rados/) 等的技术基础。它们所解决的都是同一件事情 —— 如何将对象分发到多台机器上，从而避免向中央存储区提出请求。为了达到这个目的，你必须将数据位置进行随机但确定的编码（即哈希）。另外，你需要考虑到当有机器出现故障时的处理方式。\n\n 我们自己的参数服务器就是使用这种[数据布局](https://www.cs.cmu.edu/~dga/papers/osdi14-paper-li_mu.pdf)。这个项目的幕后大脑是我的学生 [Mu Li](http://www.cs.cmu.edu/~muli/) 。请参阅 [DMLC](http://dmlc.ml/) 查看相关的工具集。\n\n - 一致性与通信\n\n 这一切的基础都是 Leslie Lamport 的 [PAXOS](http://research.microsoft.com/en-us/um/people/lamport/pubs/paxos-simple.pdf) 协议。它解决了不同机器（甚至部分机器不可用）的一致性问题。如果你曾经使用过版本控制工具，你应该可以直观地明白它是如何运行的——比如你有很多机器（或者很多开发者）都在进行数据更新（或更新代码），在它们（他们）不随时进行交流的情况下，你会如何将它们（他们）结合起来（不靠反复地求 diff）?\n\n 在（分布式）系统中，解决方案是一个叫做向量时钟的东西（请参考 Google 的 [Chubby](http://blogoscoped.com/archive/2008-07-24-n69.html)）。我们也在参数服务器上使用了这种向量时钟的变体，这个变体与本体的区别就是我们仅使用向量时钟来限制参数的范围（Mu Li 做的），这样可以确保内存不会被无限增长的向量时钟时间戳给撑爆，正如文件系统不需要给每个字节都打上时间戳。\n\n - 容错机制、规模化与云\n\n 学习这些内容最简单的方法就是在云服务器上运行各种算法，至于云服务可以找 [Amazon AWS](http://aws.amazon.com)、[Google GWC](http://console.google.com)、[Microsoft Azure](http://azure.microsoft.com) 或者 [其它各种各样的服务商](http://serverbear.com/)。一次性启动 1,000 台服务器，意识到自己坐拥如此之大的合法“僵尸网络”是多么的让人兴奋！之前我在 Google 工作，曾在欧洲某处接手 5,000 余台高端主机作为主题模型计算终端，它们是我们通过能源法案获益的核电厂相当可观的一部分资源。我的经理把我带到一旁，偷偷告诉我这个实验是多么的昂贵……\n\n 可能入门这块最简单的方法就是去了解 [docker](http://www.docker.com) 了吧。现在 docker 团队已经开发了大量的规模化工具。特别是他们最近加上的 [Docker Machine](https://docs.docker.com/machine/) 和 [Docker Cloud](https://docs.docker.com/cloud/)，可以让你就像使用打印机驱动一样连接云服务。\n\n - 硬件\n\n 说道硬件可能会让人迷惑，但是如果你了解你的算法会在什么硬件上运行，对优化算法是很有帮助的。这可以让你知道你的算法是否能在任何条件下保持巅峰性能。我认为每个入门者都应该看看 Jeff Dean 的 [《每个工程师都需要记住的数值》](https://gist.github.com/jboner/2841832)。我在面试时最喜欢的问题（至少现在最喜欢）就是“请问你的笔记本电脑有多快”。了解是什么限制了算法的性能是很有用的：是缓存？是内存带宽？延迟？还是磁盘？或者别的什么？[Anandtech](http://www.anandtech.com) 在微处理器架构与相关方面写了很多很好的文章与评论，在 Intel、ARM、AMD 发布新硬件的时候不妨去看一看他的评论。\n\n- 统计学\n\n 我故意把这块内容放在文章的末尾，因为几乎所有人都认为它是（它的确是）机器学习的关键因而忽视了其它内容。统计学可以帮你问出好的问题，也能帮你理解你的建模与实际数据有多接近。\n\n 大多数图模型、核方法、深度学习等都能从“问一个好的问题”得到改进，或者说能够定义一个合理的可优化的目标函数。\n\n - 统计学相关资料\n [Larry Wasserman](http://www.stat.cmu.edu/~larry/) 的书[《All of Statistics》](http://www.stat.cmu.edu/~larry/all-of-statistics/)很好地介绍了统计学。或者你也可以看看 David McKay 的 [《Machine Learning》](http://www.inference.phy.cam.ac.uk/itprnn/book.pdf)一书，它是免费的，内容丰富而全面。此外还有很多好书值得一看，例如 [Kevin Murphy](https://mitpress.mit.edu/books/machine-learning-0) 的、[Chris Bishop](http://research.microsoft.com/en-us/um/people/cmbishop/prml/) 的、以及 [Trevor Hastie、Rob Tibshirani 与 Jerome Friedman](http://statweb.stanford.edu/~tibs/ElemStatLearn/) 合著的书。还有，Bernhard Scholkopf 和我也[写了一本](https://mitpress.mit.edu/books/learning-kernels)。\n\n - 随机算法与概率计算\n\n 统计学算法本质上也是个计算机科学方面的问题。但是统计学的算法与计算机科学的最大区别在于，统计学是将计算机作为一个工具来设计算法，而不是作为一个黑箱进行调参。我很喜欢[这本 Michael Mitzenmacher 与 Eli Upfal 合著的书](http://www.amazon.com/Probability-Computing-Randomized-Algorithms-Probabilistic/dp/0521835402)，它涵盖了很多方面的问题，并且很容易读懂。另外如果你想更深入地了解这个“工具”，请阅读[这本 Rajeev Motwani 和 Prabhakar Raghavan 合著的书籍](http://www.amazon.com/Randomized-Algorithms-Rajeev-Motwani/dp/0521474655)。这本书写的很棒，但是没有统计学背景很难理解它。\n\n这篇文章已经写的够久了，不知道有没有人能读到这里，我要去休息啦。现在网上有很多很棒的视频内容可以帮助你学习，许多教师现在都开通了他们的 Youtube 频道，上传他们的上课内容。这些课程有时可以帮你解决一些复杂的问题。这儿是[我的 Youtube 频道](https://www.youtube.com/user/smolix/playlists)欢迎订阅。顺便推荐 [Nando de Freitas 的 Youtube 频道](https://www.youtube.com/user/ProfNandoDF)，他比我讲得好多了。\n\n最后推荐一个非常好用的工具：[DMLC](http://www.dmlc.ml)。它很适合入门，包含了大量的分布式、规模化的机器学习算法，还包括了通过 MXNET 实现的神经网络。\n\n虽然本文还有很多方面没有提到（例如编程语言、数据来源等），但是这篇文章已经太长了，这些内容请参考其他文章吧~\n\n---\n\n> [掘金翻译计划](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)。\n"
},
{
"path": "TODO/Yarn-A-new-package-manager-for-JavaScript.md",
"content": ">* 原文链接 : [Yarn: A new package manager for JavaScript](https://code.facebook.com/posts/1840075619545360)\n* 原文作者 : [SEBASTIAN MCKENZIE](https://www.facebook.com/sebmck)，[CHRISTOPH POJER](https://www.facebook.com/cpojer)，[JAMES KYLE](https://www.facebook.com/thejameskyle)\n* 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner)\n* 译者 : [达仔](https://github.com/Zhangjd)\n* 校对者: [根号三](https://github.com/sqrthree) \n\n\n在 JavaScript 社区中，工程师们互相分享成千上万的代码，帮助我们节省大量编写基础组件、类库或框架的时间。每个代码包可能都依赖于其他代码，而代码间的依赖关系则由包管理器负责维护。目前最流行的 JavaScript 包管理器是 `npm` 客户端，在 `npm` 仓库中提供了多达 30 万的软件包。据统计，已有超过 500 万的工程师使用 `npm` 仓库，其软件包下载量达到了 50 亿次/月。\n\n在 Facebook 中，我们多年来一直在使用 `npm` 客户端并取得了成功，但随着代码仓库与团队人数的增长，我们在一致性、安全性以及性能方面遇到了挑战。在尝试解决每个方面的问题后，我们最终决定着手打造一套新的客户端解决方案，以帮助我们更可靠地管理依赖。我们把这个客户端工具称为 `Yarn` —— 更加快速、可靠、安全的 `npm` 客户端的替代品。\n\n我们在此荣幸地宣布，我们与 Exponent、 Google 和 Tilde 进行了合作，并开源 `Yarn` 项目。工程师在使用 `Yarn` 时，依然可以访问 `npm` 仓库，但 `Yarn` 能够更快速地安装软件包和管理依赖关系，并且可以在跨机器或者无网络的安全环境中保持代码的一致性。`Yarn` 提高了开发效率，并解决了共享代码时面临的一些问题，使得工程师们可以专注在构建新产品以及新特性上。\n\n## JavaScript 包管理方式在 Facebook 的演变\n\n在包管理工具出现之前，JavaScript 工程师们通常依赖的项目并不多，因此会把依赖直接存储在工程目录或上传到 CDN 上。在 Node.js 出现后不久，第一个主流的 JavaScript 包管理工具 `npm` 被引入进来，并很快成为了最受欢迎的包管理工具之一。从此，新的开源项目不断涌现，工程师们比起以前更加乐于分享代码了。\n\n在 Facebook 中，我们有很多项目都要依赖 `npm` 仓库上的代码，比如 React。但随着内部规模的扩大，我们面临着以下挑战：在跨平台与跨用户之间安装依赖时的代码一致性问题、在安装依赖时花费太长时间、以及 `npm` 客户端自动执行某些依赖库的代码所导致的安全性问题。我们尝试过寻找这些问题的解决方案，但在这个过程中通常又会引起一些新的问题。\n\n### 尝试修改 npm 客户端\n\n在开始阶段，我们遵循了最佳实践，在代码仓库中只跟踪了 `package.json` 文件的变化，并要求工程师手动运行 `npm install` 命令安装依赖。这种模式在开发人员的电脑上没有问题，但在持续集成环境中遇到了困难，因为出于安全与可靠性的考虑，持续集成环境需要进行沙箱隔离，不能进行联网，因此也无法安装依赖。\n\n接下来，我们尝试在代码仓库中跟踪整个 `node_modules` 目录的文件变化。虽然这种方式有效，却使得一些简单操作变得复杂化了。比如，对 [babel](https://babeljs.io/) 更新一个次要版本号时，会产生多达 800,000 行的提交记录，此外由于 lint 规则的存在，引起无效的 utf-8 字节序列、windows 换行符、非 png 压缩图片等问题时，将会导致工程师经常需要花费一整天的时间合并 `node_modules` 目录的文件。而我们负责源码控制的团队也指出，跟踪 `node_modules` 目录会引入过多的元数据。比如 React Native 的 `package.json` 文件目前只列出了68项依赖，但在运行 `npm install` 后，`node_modules` 目录整整包含了 121,358 个文件。\n\n最后，为了有效组织 Facebook 逐渐增长的工程师人数以及管理需要安装的代码量，我们尝试修改 `npm` 客户端。我们决定压缩整个 `node_modules` 目录，并上传到内部 CDN，然后我们的工程师与持续集成系统都能从 CDN 上下载并解压文件，从而保证了代码一致性。这样我们就可以从源码控制系统中删除数以万计的文件了，但不足之处是工程师现在不仅在拉代码时需要联网了，构建也同样需要联网。\n\n我们还试图为 `npm` 的 [shrinkwrap](https://docs.npmjs.com/cli/shrinkwrap) 功能寻求优化方案，这个工具是用来锁定依赖版本号的。但 `Shrinkwrap` 功能的文件默认不会生成，如果开发者忘记了生成这一步骤，文件就不会被同步更新，因此我们编写了一个工具，以确定 `Shrinkwrap` 的文件内容和 `node_modules` 目录中的文件相符。这些文件由大量的 JSON 块组成，并且键名是无序的，因此每次更改通常会导致 `Shrinkwrap` 文件的内容大幅变化，难以进行代码审查。为减缓这一问题，我们还需要借助一个额外的脚本，对所有条目进行排序。\n\n最后，通过 `npm` 升级单个依赖包时，基于 [语义化版本号](http://semver.org/) 规则，`npm` 通常会连同其他无关依赖一起更新。这使得每次更新都会比预期产生更多的变化，工程师们认为这样把 `node_modules` 提交上传到 CDN 的过程，难以达到预期的效果。\n\n### 构建新客户端\n\n与其围绕 `npm` 客户端继续构建基础设施，不如从整体上再次回顾这些问题。伦敦办公室的 Sebastian McKenzie 提出，如果我们建立一个新客户端工具以代替 `npm` 客户端，从而解决我们的核心问题呢？这一构思很快得到了我们的认同，团队对于这个主意也感到非常兴奋。\n\n在开发过程中，我们与业界的工程师们进行了交流讨论，发现他们也面临着类似的问题，也尝试过许多类似的解决方案，通常只能把这些问题逐一解决。很明显，有必要把整个 JavaScript 社区正在面临的问题集合起来，然后我们就可以开发一个主流的解决方案了。在此感谢 Exponent、 Google 与 Tilde 的工程师们的协助，我们共同建立了 `Yarn` 客户端，并在每一个主流 JS 框架以及 Facebook 外的使用场景中测试验证了 Yarn 的性能。今天（2016-10-11），我们很荣幸把这个工具开源分享到社区中。\n\n## 介绍 Yarn\n\n`Yarn` 是一个新的包管理器，用于替代现有的 `npm` 客户端或者其他兼容 `npm` 仓库的包管理工具。`Yarn` 保留了现有工作流的特性，优点是更快、更安全、更可靠。\n\n任何包管理器的主要功能都是安装某些软件包，软件包即用于特定功能的某段代码，通常是从一个全局的仓库安装到工程师的本地环境。每个软件包可以依赖于其他包，也可以不依赖。一个典型的项目结构的依赖树通常会包含数十个、数百个甚至上千个软件包。\n\n这些依赖包通常是带版本号的，通过语义化版本控制（semver）安装。Semver 定义的版本号反映了每个新版本更改的类型，到底是进行了不兼容的API改动（MAJOR），还是添加了向后兼容的新特性（MINOR），还是进行了向后兼容的 bug 修复（PATCH）。然而，semver 依赖于软件包的开发者不能犯错误——如果依赖关系没有加锁，可能会引入一些破坏性更改或者产生新的 bug。\n\n### 结构\n\n在 Node 生态系统中，依赖通常安装在项目的 `node_modules` 文件夹中。然而，这个文件的结构和实际依赖树可能有所区别，因为重复的依赖可以合并到一起。`npm` 客户端把依赖安装到 `node_modules` 目录的过程具有不确定性。这意味着当依赖的安装顺序不同时，`node_modules` 目录的结构可能会发生变化。这种差异可能会导致类似“我的机子上可以运行，别的机子不行”的情况，并且通常要花费大量时间定位与解决。\n\n`Yarn` 通过 lockfiles 文件以及一个确定性的、可靠的安装算法，解决了版本问题和 `npm` 的不确定性问题。Lockfile 文件把安装的软件包版本锁定在某个特定版本，并保证 `node_modules` 目录在所有机器上的安装结果都是相同的。Lockfile 还使用简洁的有序键名的格式，保证了每次的文件变化最小化，进行代码审查也更为简单。\n\n安装过程分为以下三个步骤：\n\n1. **处理：** `Yarn` 通过向代码仓库发送请求，并递归查找每个依赖项，从而解决依赖关系。\n2. **抓取：** 接下来，`Yarn` 会查找全局的缓存目录，检查所需的软件包是否已被下载。如果没有，Yarn 会抓取对应的压缩包，并放置在全局的缓存目录中，因此 `Yarn` 支持离线安装，同一个安装包不需要下载多次。依赖也可以通过 tarball 的压缩形式放置在源码控制系统中，以支持完整的离线安装。\n3. **生成：** 最后，`Yarn` 从全局缓存中把需要用到的所有文件复制到本地的 `node_modules` 目录中。\n\n通过清晰地细分这些步骤，以及确定性的算法支持，使得 `Yarn` 支持并行操作，从而最大化地利用资源，并加速安装进程。在一些 Facebook 的项目上，`Yarn` 甚至可以把安装过程降低一个数量级，从几分钟到只需几秒钟。`Yarn` 还使用了互斥锁，以确保多个 CLI 实例同时运行时不会互相冲突与影响。\n\n纵观整个过程，`Yarn` 对于软件包安装加上了严格的限制。你可以对哪个生命周期脚本作用于哪个软件包进行控制。软件包的 checksum 也会存储在 lockfile 中，以确保每一次安装都可以得到同一个包。\n\n### 特性\n\n`Yarn` 除了让安装过程变得更快与更可靠，还添加了一些额外的特性，从而进一步简化依赖管理的工作流。\n\n* 同时兼容 `npm` 与 [bower](https://bower.io/) 工作流，并支持两种软件仓库混合使用\n* 可以限制已安装模块的协议，并提供方法输出协议信息\n* 提供一套稳定的公有 JS API，用于记录构建工具的输出信息\n* 可读、最小化、美观的 CLI 输出信息\n\n### Yarn 用于生产环境\n\n我们已经在 Facebook 中把 `Yarn` 用于生产环境，并且效果非常理想。`Yarn` 有效地管理了许多 JavaScript 项目的包依赖关系。在每次迁移时，构建都可以离线进行，因此加速了工作流程。我们基于 React Native 在不同条件下进行安装时间测试，比较了 `Yarn` 与 `npm` 的性能，[具体参见这里](https://yarnpkg.com/en/compare)。\n\n\n\n## 起步\n\n最简单的起步方法是：\n\n npm install -g yarnpkg\n yarn\n\n`yarn` CLI 代替了原有开发工作流中 `npm` CLI 的作用，用法可能是单纯的替代，也可能是一个新的、相似的命令：\n\n* `npm install` → `yarn`\n\n 不需要带参数，`yarn` 命令会读取 `package.json` 文件，然后从 npm 仓库中抓取软件包，并放置到 `node_modules` 目录中。等价于运行 `npm install`。\n* `npm install --save ` → `yarn add `\n\n 我们避免了 `npm install ` 命令中安装“不可见的依赖”的行为，并分离出一个新命令。运行 `yarn add ` 等价于运行 `npm install --save `。\n\n### 未来\n\n目前已经有许多成员一起参与到 `Yarn` 的构建中，以解决我们的共同问题，我们也希望 `Yarn` 未来能真正成为一个大众化的社区项目。`Yarn` 目前已经 [在 GitHub 开源](https://github.com/yarnpkg/yarn) ，我们也已经准备好向 Node 社区进行推广：使用 `Yarn`、分享构思、编写文档、互相支持，并帮助构建一个很棒的社区来进行长期维护。我们相信 `Yarn` 已经拥有一个良好的开局，如果有你的帮助，`Yarn` 的未来将会更加美好。\n"
},
{
"path": "TODO/a-5-minute-intro-to-styled-components.md",
"content": "> * 原文地址：[A 5-minute Intro to Styled Components](https://medium.freecodecamp.com/a-5-minute-intro-to-styled-components-41f40eb7cd55#.z1nrxe1zr)\n* 原文作者：[Sacha Greif](https://medium.freecodecamp.com/@sachagreif)\n* 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)\n* 译者：[根号三](https://github.com/sqrthree)\n* 校对者：[Tina92](https://github.com/Tina92)、[lovelyCiTY](https://github.com/lovelyCiTY)\n\n# 一个关于 Styled Components 的五分钟介绍\n\n\n\nCSS 是一个很神奇的语言，你可以在 15 分钟之内就学会一些基础部分，但是如果你要找到一个好的方式来组织你的样式，将会花费数年时间。\n\n这主要是由于语言本身很奇葩。不合常规的是， CSS 是相当有限的，没有变量、循环或者函数。与此同时，它又是相当自由的，你可以随意使用元素、Class、ID 或它们的任意组合。\n\n### 混乱的样式表\n\n正如你自己所经历过的那样，CSS 通常是很混乱的。虽然有诸如 SASS 和 LESS 这样的预处理器添加了大量有用的特性，但是它们仍然不能阻止 CSS 的这种混乱状态。\n\n组织工作留给了像 [BEM](http://getbem.com/) 这样的方法，这些方法虽然很有用但是完全是自选方案，不能在语言或工具级别强制实施。\n\n### CSS 的新浪潮\n\n最近一两年，新一波基于 JavaScript 的工具正试图通过改变编写 CSS 的方式来从根本上解决这些问题。\n\n[Styled Components](https://github.com/styled-components/styled-components) 就是那些工具库之一，因为兼顾创新和传统的优势，它很快就吸引了大量的关注。因此，如果你是 React 使用者（如果你不是的话，可以看看 [我的 JavaScript 学习计划](https://medium.freecodecamp.com/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1) 和我写的 [React 简介](https://medium.freecodecamp.com/the-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3)），就绝对值得看看这个新的 CSS 替代者。\n\n最近我用它 [重新设计了我的个人网站](http://sachagreif.com/)，今天我想分享下我在这个过程中所学到的一些东西。\n\n### 组件, 样式化\n\n关于 Styled Components 你需要理解的最主要的事情就是其名称应该采取字面意思。你不再根据他们的 Class 或者 HTML 元素来对 HTML 元素或组件进行样式化了。\n\n Hello World
\n\n h1.title {\n font-size: 1.5em;\n color: purple;\n }\n\n相反，你可以定义一个拥有它们自己的封装风格的 styled Components。然后你就可以在你的代码中自由的使用它们了。\n\n import styled from 'styled-components';\n\n const Title = styled.h1`\n font-size: 1.5em;\n color: purple;\n `;\n\n Hello World\n\n这两段代码看起来有一些细微的差别，事实上两者语法是非常相似的。但是它们的关键区别在于样式现在是这些组件的一部分啦。\n\n换句话说，我们正在摆脱 CSS class 作为组件和其样式的中间步骤这种情况。\n\nstyled-components 的联合创造者 Max Stoiber 说：\n\n> styled-components 的基本思想就是通过移除样式和组件之间的映射关系来达到最佳实践。\n\n### 减少复杂性\n\n这首先是反直觉的，因为使用 CSS 而不是直接定义 HTML 元素的关键点（还记得 `` 标签吗？）是引入 class 这个中间层来解耦样式和标签。\n\n但是这层解耦也创造了很多复杂性。有这样一个的观点：相比于 CSS，诸如 Javascript 这类『真正』的编程语言具备了更好的处理这种复杂性的能力。\n\n### 类（Class）上的 Props\n\n为了遵循 『无类(no-class)』的理念，当涉及到自定义一个组件的行为时，styled-components 使用了类上的 props（props over classes）。所以呢，代码不是这样的：\n\n Hello World
// will be blue\n\n h1.title{\n font-size: 1.5em;\n color: purple;\n\n &.primary{\n color: blue;\n }\n }\n\n你需要这样写：\n\n const Title = styled.h1`\n font-size: 1.5em;\n color: ${props => props.primary ? 'blue' : 'purple'};\n `;\n\n Hello World // will be blue\n\n正如你所看到的那样，styled-components 通过将所有的 CSS 和 HTML 之间的相关实现细节（从组件中）分离出来使你的 React 组件更干净。\n\n也就是说，styled-components 的 CSS 仍然还是 CSS。所以像下面这样的代码也是完全有效的（尽管略微不常用）。\n\n const Title = styled.h1`\n font-size: 1.5em;\n color: purple;\n\n &.primary{\n color: blue;\n }\n `;\n\n Hello World // will be blue\n\n这是让 styled-components 很容易就被接受的一个特性：当存在疑惑时，你总是可以倒退回你所熟悉的领域。\n\n### 警告\n\n需要提到的很重要的一点是 styled-components 仍然是一个很年轻的项目。有一些特性到目前为止还没有完全支持。例如，如果你想 [从父组件中样式化一个子组件](https://github.com/styled-components/styled-components/issues/142) 时，目前你仍不得不依靠 CSS class 来实现（至少要持续到 styled-components 版本 2 发布）。\n\n目前也有一个非官方的方法来实现 [服务端预渲染你的 CSS](https://github.com/styled-components/styled-components/issues/124)，虽然它是通过手动注入样式来实现的。\n\n事实上，styled-components 生成它自己的随机 class 名会使你很难通过浏览器的开发工具来确定你的样式最初是在哪里定义的。\n\n但是鼓舞人心的是，styled-components 核心团队已经意识到了这些问题，并且努力地一个又一个的攻克它们。[版本 2 很快就要来啦]((https://github.com/styled-components/styled-components/tree/v2))，我真的很期待它呢。\n\n### 了解更多一点吧\n\n我这篇文章的目的不是向你详细解释 styled-components 是如何生效的，更多的是给你一个小瞥。所以你可以自己决定是否值得一试。\n\n如果我的文章让你感到好奇的话，这里有一些链接你可以了解更多关于 styled-components 的知识。\n\n- Max Stoiber 最近给 [Smashing Magazine](https://www.smashingmagazine.com/2017/01/styled-components-enforcing-best-practices-component-based-systems/) 写了一篇文章有关创建 styled-components 的原因的文章。\n- [styled-components repo](https://github.com/styled-components/styled-components) 它自己就有一个很丰富的文档.\n- [Jamie Dixon 写的这篇文章](https://medium.com/@jamiedixon/styled-components-production-patterns-c22e24b1d896#.tfxr5bws2) 讲述了切换到 styled-components 的几个好处.\n- 如果你想了解更多关于这个库实际上是如何实现的，可以阅读 Max 的 [这篇文章](http://mxstbr.blog/2016/11/styled-components-magic-explained/)。\n\n如果你想更进一步，也可以了解下 [Glamor](https://github.com/threepointone/glamor) —— 一个完全不同的 CSS 新浪潮。\n"
},
{
"path": "TODO/a-beginners-guide-to-making-progressive-web-apps.md",
"content": "\n> * 原文地址：[A beginner’s guide to making Progressive Web Apps](https://medium.com/samsung-internet-dev/a-beginners-guide-to-making-progressive-web-apps-beb56224948e)\n> * 原文作者：[uve](https://medium.com/@uveavanto)\n> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)\n> * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO/a-beginners-guide-to-making-progressive-web-apps.md](https://github.com/xitu/gold-miner/blob/master/TODO/a-beginners-guide-to-making-progressive-web-apps.md)\n> * 译者：[Haichao Jiang](https://github.com/AceLeeWinnie)\n> * 校对者：[sun](https://github.com/sunui) [leviding](https://github.com/leviding) \n\n# 构建渐进式 Web 应用入门指南\n\n你可能已经听过渐进式 Web 应用或 PWA 的大名，然而我并不打算深入 PWA 的构建和工作细节。这篇文章的目的在于说明 **PWA 是一个可以添加到手机主屏幕的网页**，并且它还能够离线运行。\n\n\n\n\n我知道一些 HTML、CSS、JavaScript 的知识并且了解如何使用 GitHub。\n\n我是 web 开发新手，当下也不想学习 Web 开发的原理和工作机制。我希望有一个简单、基础的方式做出一些东西，而不用连篇累牍地阅读文档和教程。**希望通过这篇文章你会学到所有在开始构建 PWA 时需要的知识。**\n\n要做 PWA 首先要有一个网站。当然，本文假定你已经可以制作多端适配的网站。幸运的是我们不需要通过 scratch 才能做到，我们可以使用模板。我喜欢使用 [HTML5 UP](https://html5up.net/) 和 [Start Bootstrap](https://startbootstrap.com/)。\n\n选择并下载主题，把 index.html 中的所有内容替换成你自己的。如果你对编辑 CSS 有把握的话，你甚至可以更改颜色。\n\n在这个项目里，我为 Web Community Leads UK and IE 组织制作了一个登录页。你可以通过阅读 [Daniel](https://medium.com/@torgo) 的[相关博客](https://medium.com/samsung-internet-dev/web-communities-for-the-people-6440e0c8e543)读到更多内容，或者访问我做的网站 [https://webcommunityukie.github.io/](https://webcommunityukie.github.io/)。\n\n把这个网站做成 PWA 并没有为大多数用户带来更多体验，同时我也不希望每个人都把它加入主屏幕，但是它仍然优化了体验。我只是想要一个小网站来开启自己制作 PWA 之旅。\n\n我真的想要一个简单的网站，我喜欢 [Hacksmiths](http://goldsmiths.tech/) 并且知道它是开源的，所以我下载下来并且消化了源码。我保留了一个链接在下方，指向原网页和源码，人们可以 folk 出一个新网站。\n\n现在我们有个网站了，可以把它变成一个渐进式 web 应用。为了达到目的，我们需要添加一系列东西，待会我会说明为什么我们需要他们。\n\n### 测试你的 PWA\n\n要检查你的网站是否是 PWA，你可以用 [Lighthouse](https://developers.google.com/web/tools/lighthouse/)。Lighthouse 是一个 chrome 插件，可以告诉你访问的网站是不是支持 PWA，如果不支持应该如何优化。\n\n安装插件后打开网站点击浏览器右上角的 Lighthouse 图标然后点击 Generate Report。对网站检测后会打开一个新的 tab 页展示结果，你可以浏览全文或者关注顶部的数字，忽略其他部分。\n\n\n\n我开始处理网站的 PWA 部分前 Lighthouse 的检测结果。\n\n鉴于还没有对网站开始进行 PWA 改造，36/100 不是一个悲观的数字。\n\n### 制作 app icon\n\n你的网站要放在主屏幕，你需要图标来展示它。\n\n你不需要设计一个专业的 logo。对于大多数小项目来说，通过 [the noun project](https://thenounproject.com/)，找到一至两个喜欢的 icon，用 GIMP 把他们放在一起。然后在图层后面添加渐变背景。当然你也可以使用别的方法来制作 icon，只要确认它是方形的。\n\n\n\n这是我做的图标。现在回头看我本来应该再加上圆角的。\n\n现在你有一个 app icon 了。🎉\n\n是时候把它放进你的网站里去了。我的方法是通过 [在线 icon 生成工具](http://www.favicon-generator.org/)。上传 blingbling 的新 icon，它会返回一些列不同尺寸版本和 HTML 代码。\n- 下载文件并解压。\n- 把 icon 放进网站文件夹。\n- 把对应的代码放进 index.html 的 \\ 中\n- 确保 icon 的路径是正确的。我把 icon 放在子文件夹中，所以我需要添加\"/icons\"前缀。\n\n\n\n### Web App Manifest\n\n下一件要做的就是创建 manifest。manifest 是一个文件，包含了网站的数据，例如网站名字、偏好色彩和使用的 icon。\n实际上，你已经有了一份 manifest，是 icon 生成工具生成的，接着我们要在上面添加更多内容。\n打开 [web app manifest 生成器](https://tomitm.github.io/appmanifest/)，填写网站的相关信息。对要填写的内容不确定的话，设置为默认即可。\n页面右侧，有一些 JSON 数据。复制粘贴到 manifest.json 文件头部，为确保格式正确，你可能需要添加一个逗号或删除一个大括号。\n我的 manifest 文件是 [这样](https://github.com/webcommunityukie/webcommunityukie.github.io/blob/master/manifest.json) 的。\n\n再次运行 lighthouse，检测 manifest 是否正常工作。\n\n\n\nLighthouse 给 manifest 打分，并且 icon 也正常添加了。\n\n### 添加 service worker\n\nservice worker 是另一个我们要加入项目的文件，它允许网站离线工作。它也是实现 PWA 的一个要求，我们需要添加。\nservice worker 比较复杂，相关的文档都很长，并且很混乱，整个页面充满了链接，链接内容也同样又长又乱。\n幸运的是看到了 [Peter](https://medium.com/@poshaughnessy) 推荐的 sw-toolbox，他还给了我一个他自己的代码链接。\n所以我拷贝了他的代码，移除额外的 JavaScript 文件，添加到 service worker， 简化后用到我自己的项目里。\n\n#### 创建 service worker 需要做的 3 件事。\n\n- 在 index.html 的 \\ 里添加以下代码，注册 service worker：\n\n```javascript\n\n```\n\n- 添加 sw-toolbox 到项目里。你只需要添加 [这个文件](https://github.com/GoogleChrome/sw-toolbox/blob/master/sw-toolbox.js) 到根目录下。\n- 新建文件，命名为 \"sw.js\"，拷贝并粘贴以下代码：\n\n```javascript\n‘use strict’;\nimportScripts(‘sw-toolbox.js’); toolbox.precache([“index.html”,”style/style.css”]); toolbox.router.get(‘/images/*’, toolbox.cacheFirst); toolbox.router.get(‘/*’, toolbox.networkFirst, { networkTimeoutSeconds: 5});\n```\n\n你想要检查所有文件路径是否正确，编辑预缓存和列出离线时要存储的所有文件，我的站点只用到 index.html 和 style.css，你可能需要其他文件或页面。\n\n现在，用 Lighthouse 再次检测。\n\n\n\n\n添加 service worker 之后 —— 测试 localhost\n**如果你想要 service worker 做些不一样的事情，而不是仅仅是保存页面，例如网络不通时访问特定的离线页面，你可以试下 [pwabuilder](http://www.pwabuilder.com/generator) 这个 service worker 脚本。**\n\n### 托管到 GitHub Pages 上\n\n你完成了一个 PWA 页面，是时候和全世界分享了。\n我发现最简单的分享方法就是 [GitHub Pages](https://pages.github.com/)。因为它是免费的，并且能为你处理所有安全问题。\n新建一个仓库并上传代码到仓库，就可以托管你的代码了，GitHub GUI 会帮你做这些工作。\n完成以上步骤后，在网站上找到你的仓库，在设置最下面可以选择 master 分支开启 GitHub Pages 功能。\n它会返回访问 PWA 的在线 URL。\n通过 Lighthouse 运行会得到不（更）同（好）的结果，然后把网址分享给你所有的朋友就好啦，或者只要把它下载到自己的手机主屏幕上就可以了。\n\n\n\n在 GitHub Pages 托管网站后 Lighthouse 的结果。\n\n\n\n**代码如下：**[https://github.com/webcommunityukie/webcommunityukie.github.io](https://github.com/webcommunityukie/webcommunityukie.github.io)\n\n**完整网站如下：**[https://webcommunityukie.github.io/](https://webcommunityukie.github.io/)\n它看起来和我开始时完全一样，但是在 Samsung Internet 上浏览时，地址栏会变成主题色，即浅紫色。会出现一个加号图标让你把它添加到你的主屏幕，允许全屏和离线使用。\n\n还有很多 PWA 相关内容本文没有提到，你可以向他们发送推送通知告知用户你的应用有了新的内容。你可以阅读更多关于 [PWA 构成](https://www.smashingmagazine.com/2016/09/the-building-blocks-of-progressive-web-apps/) 的内容。\n\n我希望本文能帮助你第一次体验到渐进式 web app，如果你在使用的过程中遇到困难，请给我留言或在推特 @ 我。\n\n---\n\n> [掘金翻译计划](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)。\n"
},
{
"path": "TODO/a-beginners-guide-to-website-optimization.md",
"content": "> * 原文地址：[A beginner’s guide to website optimization](https://medium.freecodecamp.org/a-beginners-guide-to-website-optimization-2185edca0b72)\n> * 原文作者：[Mario Hoyos](https://medium.freecodecamp.org/@mariohoyos?source=post_header_lockup)\n> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)\n> * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO/a-beginners-guide-to-website-optimization.md](https://github.com/xitu/gold-miner/blob/master/TODO/a-beginners-guide-to-website-optimization.md)\n> * 译者：[Starrier](https://github.com/Starriers)\n> * 校对者：[Clarence](https://github.com/ClarenceC)、[dazhi1011](https://github.com/dazhi1011)\n\n# 网站优化初学者指南\n\n\n\n图片由 Pexels 提供。\n\n我是一名初学者，在 Google 优化排名中，我可以达到 99/100。如果我可以做到，那么您也可以。\n\n如果您和我一样，喜欢证据。下面是 [Google 的 PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) 结果。[hasslefreebeats](https://www.hasslefreebeats.com) 是我维护的网站，我最近花了一些时间进行优化。\n\n\n\n我的 PageSpeed Insights 分数截图。\n\n我对这些结果感到非常自豪，但是我想强调的是，几周前我还不知道如何去优化一个网站。今天我要和大家分享的只是一大堆 Google 搜素和故障排除所得出的结果，我希望可以为您省去麻烦。\n\n为了防止您想跳过，这篇文章被分成了几个小节。\n\n我绝不是专家，但我相信如果您实施以下技术，你会看到效果！\n\n### 图片\n\n\n\n图片由 Pexels 提供 (Medium 已做优化).\n\n作为一个网站开发初学者，我并没有想过图片的事情。我知道向我的网站添加高质量图片会使它看上去更专业，但是我从没有停下来考虑它们对我的网页加载时间的影响。\n\n我为优化图像所做的事情主要是压缩它们。\n\n回想起来，这从一开始就非常直观，只是我没有在意，可能您也一样。\n\n我用来压缩图片的服务是 [Optimizilla](http://optimizilla.com/), 一个易于使用的网站，那您只需上传图片，选择你要压缩的级别，然后下载压缩图片。我看到一些资源的大小减少了 70% 以上，这对于更快的加载时间有很大的帮助。\n\nOptimizilla 并不是您图片压缩需求的唯一选择。您可以使用一些独立的开源软件，Mac 环境下的 [ImageOptim](https://imageoptim.com/mac) 或者 Windows 环境下的 [FileOptimizer](https://sourceforge.net/projects/nikkhokkho/files/FileOptimizer/)。如果您更喜欢用构建工具进行压缩，那么可以使用 [Gulp](https://www.npmjs.com/package/gulp-imagemin) 和 [WebPack](https://github.com/Klathmon/imagemin-webpack-plugin) 插件。无论您怎么做，只要做了，那么即使是最小的努力，也会在性能上获取提升。\n\n根据您的情况，可能还需要查看文件格式。一般来说，jpg 会比 png更小。我是否使用其中一个的主要区别是我是否需要图片背后的透明度：如果我需要透明度就使用 png，否则使用 jpg。您可以在 [这里](https://www.digitaltrends.com/photography/jpeg-vs-png-photo-format/)更深入地了解这两者的利弊。\n\n此外，Google 已经推出了一种非常贴心的 webp 格式，但由于目前没有在所有浏览器被支持，所以我还在犹豫是否使用它。会留意未来是否有进一步地更新支持！\n\n我没有在我的图片上做更多的压缩来获得以上展示的结果，但是如果您想进一步优化 [这里有一篇很棒的文章。](https://www.frontamentals.com/practical-guide-to-images)\n\n### 视频\n\n\n\n照片来自 Pexels 的 Terje Sollie。\n\n尤其是我没有在我目前的任何项目中使用视频，所以我只会简单地涉及到这一点，因为我不觉得在这方面我这是最佳的解决方案。\n\n在这种情况下我可能会让专业人士来做繁重的工作。Vimeo 为托管视频提供了一个很好的平台，在那里它们会降低视频质量，从而降低链接速度，并压缩您的视频以优化性能。 \n\n您也可以在 YouTube 上托管视频，然后使用 [youtube-dl](https://rg3.github.io/youtube-dl/) 工具从 You Tube 下载视频，同时根据您网站的需要配置视频。\n\n至于其他可能的解决方案，请查看 [Brightcove](https://www.brightcove.com/en/), [Sprout](https://sproutvideo.com/) 或者 [Wistia](https://wistia.com/).\n\n### Gzip 压缩\n\n\n\n了解了么? Zip 压缩? Pexels 提供的图片。\n\n最初部署我的网站时，我不知道 gzip 是什么。\n\n长话短说，gzip 是一种大多数浏览器都能理解的文件压缩格式。它可以在幕后运行而不需要用户知道它正在发生。\n\n根据您应用程序所在的位置，gzip 可能非常简单，只需打开配置开关，以指定您希望服务器在发送文件时对其进行 gzip 压缩。就我而言，托管我网站的 Heroku 不提供这个选项。\n\n事实证明，在服务器代码中有些包可以进行显式压缩。这使得您只需几行代码即可获取 gzip 的好处。使用[这个](https://github.com/expressjs/compression)压缩中间件，[我能够将 JavaScript 和 CSS 捆绑包大小减少 75%。](https://codeburst.io/how-i-decreased-the-size-of-my-heroku-app-by-75-1a4cf329b0ab)\n\n检查一下您的托管服务是否提供 gzip 选项是值得的。如果没有，请查看如何将 gzip 添加到服务器代码中。\n\n### 最小化\n\n\n\n最小化的菠萝 Pexels 提供。\n\n最小化是在不影响代码功能（空格、换行符等）的情况下从代码中删除不必要字符的过程。这使您可以减少您正在通过互联网传输文件的大小。它也有助于混淆您的代码，这使得狡猾的黑客更难检测到安全弱点。\n\n如今，最小化功能通常是 Webpack 或 Gulp 或者其他方法作为构建过程的一部分。但是这些构建工具有一些学习曲线，因此如果您正在寻找更简单的替代方法，Google 推荐 [HTML-Minifier for HTML](https://github.com/kangax/html-minifier)、 [CSSNano for CSS](https://github.com/ben-eb/cssnano) 和 [UglifyJS for Javascript](https://github.com/mishoo/UglifyJS2)。\n\n### 浏览器缓存\n\n\n\n不太清楚浏览器具体如何存储数据，但它是我所能得到的最接近的。Pexels 赞助。\n\n将静态文件存储在浏览器的缓存中是提高网站速度的一种非常有效的方法，特别是在来自同一浏览器的回访时。直到 Google 告诉我，我的一些资源没有被适当地缓存，因为我从服务器发送的 HTTP 响应头中缺少标题，我才意识到这一点。\n\n一旦加载了我的主页，就会向我的服务器发送一个请求，以获取一堆歌曲的数据，然后在音乐播放器中解析这些歌曲。我不经常更新这个网站上的歌曲，所以如果这会是我的页面加载速度更快一些的话，我不介意用户在我的网站上看到他们上次访问的相同歌曲。\n\n为了提高性能，我在服务器的响应对象 (Express/Node server) 中添加了以下代码：\n\n```\nres.append(\"Cache-Control\", \"max-age=604800000\");\n\nres.status(200).json(response);\n```\n\n我在这里所做的就是在我的响应中附加一个说明超过一周（毫秒）应该重新下载资源的缓存控制头。如果您经常更新这些文件，缩短最长时间可能是个好主意。\n\n### **内容分发网络**\n\n\n\n现实中的 CDN 图像，Pexels 提供。\n\n内容分发网络（CDN）是允许来自世界各地的用户在地理上更接近您的内容的网络。如果用户必须加载来自日本的大图像，但您的服务器在美国，这将比您在东京的服务器花费更长的时间。\n\nCDN 允许您利用分布在世界各地的一组代理服务器，无论您的最终用户位于何处，都可以更快加载您的内容。\n\n我想指出的是，实现 CDN 之前，我能够实现**上面**你所看到的结果--我只是想提及它们，因为没有网站优化的文章提及到他们。如果您计划拥有全世界的读者，那么在您的网站上有一些创新是绝对必要的。\n\n一些流行的 CDNs 包括 [CloudFront](https://aws.amazon.com/cloudfront/) 和 [CloudFlare](https://www.cloudflare.com/lp/ddos-a/?_bt=157293179478&_bk=cloudflare&_bm=e&_bn=g&gclid=CjwKCAiA_c7UBRAjEiwApCZi8Ri3kAEt3UraYPUFUQOMTG0Xz7WGCNRUri0UNtCOUAdUMJI8osxuDRoCTx8QAvD_BwE).\n\n### 其他方法\n\n这里有些能让您有所收获的内容：\n\n* 首先通过增加您网站的感知性能优先加载“首页”来优化您的网站。一种常见的方法是[延迟加载](https://en.wikipedia.org/wiki/Lazy_loading)没有显示在登录页面上的图像。\n* 除非您的应用程序依赖于 JavaScript 来渲染 HTML，例如使用 Angular 或者 React 来构建网站，那么它会在你 HTML 文件的 body 底部看似安全的区域加载你的 script 标签。即使这可能会影响您的[交互时间](https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive)，所以我并不会对每个情况都推荐使用这种技术。\n\n### 总结\n\n当涉及到优化您的网站时，这都只是冰山一角。根据您接受的流量和所提供的服务数量，您可能会在许多不同的领域存在性能瓶颈。也许您需要更多的服务器，也许您需要一个拥有更多 RAM 的服务器，也许您的三重嵌套 for 循环可以使用一些重构--谁知道呢？\n\n对于加速您的网站来说，没有一个准确无误的方法，您最终将不得不根据您的测试来做出最好的决定。不要浪费时间去优化不需要优化的东西。分析您网站的性能，找出瓶颈，然后专门解决这些瓶颈。\n\n我希望您能在这篇文章中找到一些有用的东西！正如我所提到的，我在这个领域还有很多东西要学。如果您有任何额外的提示或者建议，请将它们留在下面的评论中！\n\n如果您喜欢我的文章，请为我鼓掌，还有以下内容：\n\n* [当我开始编码时，我希望我已经了解的工具](https://medium.freecodecamp.org/tools-i-wish-i-had-known-about-when-i-started-coding-57849efd9248)\n* [当我开始编码时，我希望我已经了解的工具: 重新访问](https://medium.freecodecamp.org/tools-i-wish-i-had-known-about-when-i-started-coding-revisited-ffb715ffd23f)\n\n当然，也可以关注我的 [Twitter](https://twitter.com/marioahoyos).\n\n\n---\n\n> [掘金翻译计划](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)、[前端](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#设计)、[人工智能](https://github.com/xitu/gold-miner#人工智能)等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)、[官方微博](http://weibo.com/juejinfanyi)、[知乎专栏](https://zhuanlan.zhihu.com/juejinfanyi)。\n"
},
{
"path": "TODO/a-better-underline-for-android.md",
"content": ">* 原文链接 : [A better underline for Android](https://medium.com/google-developers/a-better-underline-for-android-90ba3a2e4fb)\n* 原文作者 : [Romain Guy](https://medium.com/@romainguy)\n* 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner)\n* 译者 : [jamweak](https://github.com/jamweak)\n* 校对者: [yifili09](https://github.com/yifili09)，[whyalwaysmea](https://github.com/whyalwaysmea)\n\n# Android 中美腻的下划线\n\n在过去两年里，我经常发现一些尝试去如何提高有关在网页中渲染下划线文本修饰的[文章](https://medium.com/design/crafting-link-underlines-on-medium-7c03a9274f9)和[库](https://eager.io/blog/smarter-link-underlines/)。此类问题也同样发生在Android（平台）：下划线的文本修饰与[降部](http://www.fontke.com/article/712)相交。比较下Android当前如何绘制下划线文本(上图)以及它的替代方案(下图)：\n\n\n\n你更喜欢哪一种?\n\n尽管我完全认可这些努力，但是我从未喜欢过任何公开的解决方法。目前最新的技术（追求艺术般的状态）—毫无疑问地会强迫开发者们受限于CSS—似乎是通过绘制线性渐变以及多重阴影（我见过多达12层的！）来实现的。这些解决方案都具有无法否认的成效，但这种绘制如此多阴影的做法，即使没有增加模糊效果，也会使得图形开发者们足够头疼了。还有一点，这种方法仅仅在实色的背景下有效。\n\n我今天下午一时兴起，开始着手发掘满足以下需求的其他解决方案:\n\n* 兼容旧版本的Android系统\n* 仅使用标准的View和Canvas APIs\n* 不需要过度重绘或者大量的阴影开销\n* 在任何背景下都有效，而不是只支持实色背景\n* 不依赖绘制流水线的操作顺序(文本先于/晚于下划线的绘制是无关紧要的)\n\n我在这里提供了两种解决方案，你可以在[GitHub](https://github.com/romainguy/elegant-underline)获取。其中一种方法适用于[API level 19](https://www.android.com/versions/kit-kat-4-4/)及以上，另外一种适用于[API level 1](http://arstechnica.com/gadgets/2014/06/building-android-a-40000-word-history-of-googles-mobile-os/6/)及以上，或者说它 _应该_ 至少支持API level 1以上，我没有完全地测试，但我相信API文档。\n\n你可以在下面的截图中观察比较下这两种被称作 _Path_ 和 _Region_ 的方法：\n\n\n\n在Android中更好展示下划线文本的两种可能的实现方式\n\n### 如何实现的?\n\n这些实现背后的思想与之前提到的CSS方法出奇地类似。我们使用一整条直线段来表示下划线，剩下所需要做的就是为降部挪出空间...\n\n#### 使用Path类\n\nAPI level 19 (叫KitKat更耳熟) 中引入了一个操作路径的新API叫做[path ops](https://developer.android.com/reference/android/graphics/Path.html#op%28android.graphics.Path,%20android.graphics.Path.Op%29)。这个API允许你为实例建立两个路径的交叉点，或是从一条路径中减去其它的路径。\n\n使用这个API，制作我们想要的下划线就非常简单了。第一步就是为我们的文本[获取轮廓](https://developer.android.com/reference/android/graphics/Paint.html#getTextPath%28java.lang.String,%20int,%20int,%20float,%20float,%20android.graphics.Path%29)：\n\n mPaint.getTextPath(mText, 0, mText.length(), 0.0f, 0.0f, mOutline);\n\n注意返回的path可以通过一种填充的样式来渲染原始文本，我们在这里要使用它来进行后续操作。\n\n\n\n文本轮廓\n\n下一步就是剪切表示下划线的矩形轮廓。这一步不完全是必要的，但是这样可以避免在下一步可能出现的近似值偏差。我们只需使用intersection path操作就能方便的实现这一功能：\n\n mOutline.op(mUnderline, Path.Op.INTERSECT);\n\n现在轮廓路径仅仅包含几位降部与下划线的交叉部分。\n\n\n\n只有黑色区域表示是路径的一部分，其余的部分只是为了可视目的。\n\n剩下要做的就是从下划线中减去那些降部位置的部分。在做这个之前，我们必须扩大原始文本的尺寸来为降部与下划线间创造出间隙。这个功能可以通过划除我们剪切的轮廓然后建立一个新的填充路径实现：\n\n mStroke.setStyle(Paint.Style.FILL_AND_STROKE); mStroke.setStrokeWidth(UNDERLINE_CLEAR_GAP);\n mStroke.getFillPath(mOutline, strokedOutline);\n\n划掉的宽带代表着你想为降部和下划线之间留下多大的空间。\n\n\n\n划除剪切掉的轮廓\n\n最后一步就是使用另外一个path操作从下划线矩形轮廓中减去划除部分和剪切掉的部分：\n\n mUnderline.op(strokedOutline, Path.Op.DIFFERENCE);\n\n最后的下划线可以使用一个填充画笔绘制：\n\n canvas.drawPath(mUnderline, mPaint);\n\n#### 使用Region类\n\n[Region](https://developer.android.com/reference/android/graphics/Region.html)是一种在屏幕上高效展示非矩形形状的方法。你可以想象一块区域是由若干对齐到渲染缓冲区的矩形集合组成的。Regions可以被看作是_栅格化_的Path。这意味着如果我们将Path转换成Region后，我们获得的是一系列像素坐标点的集合，一旦Path被绘制，它将影响到这些获得的坐标集合。\n\nRegion有趣的地方在于它[提供了与Path相同的操作](https://developer.android.com/reference/android/graphics/Region.html#op%28android.graphics.Region,%20android.graphics.Region.Op%29)。两块Regions能够互相交错、扣除重叠的部分等等。更重要的是，Region从最早的Android API中就已经存在了。\n\n用Region实现下划线的方法几乎与用Path完全相同，主要的区别存在于轮廓何时怎样被剪切的：\n\n Region underlineRegion = new Region(underlineRect);\n\n // 为文本建立一个Region并且剪切掉下划线部分\n Region outlineRegion = new Region();\n outlineRegion.setPath(mOutline, underlineRegion);\n\n // 提取返回的Region的Path，从而获得一份剪切后的文本轮廓的拷贝\n mOutline.rewind();\n outlineRegion.getBoundaryPath(mOutline);\n\n // 划掉剪切掉的文本，将其结果转为一个填充样式的Path\n mStroke.getFillPath(mOutline, strokedOutline);\n\n // 使用划掉文本的轮廓建立一个Region对象\n outlineRegion = new Region();\n outlineRegion.setPath(strokedOutline, new Region(mBounds));\n\n // 在下划线轮廓中扣除剪切掉的，划掉的文本轮廓\n underlineRegion.op(outlineRegion, Region.Op.DIFFERENCE);\n\n // 使用下划线Region建立一个Path\n underlineRegion.getBoundaryPath(mUnderline);\n\n#### 两种方法的区别\n\n由于Path类和Region类的本质不同，两种实现间有着不易察觉的区别。因为Path类仅仅在曲线上操作，因此在我们从下划线轮廓中扣除降部时，就保留了降部轮廓的斜度，这就造成下划线空隙的边缘与降部的曲线斜度平行。这种效果或许是又或许不是所期望的。\n\n另一方面，Region类操作的是整个像素点，它会清除下划线竖向的切割（你的下划线足够细的话）。下图是两种实现的比较：\n\n\n\n上图: Path类. 下图: Region类. 注意到上面的斜度没？如果没有,你需要仔细看。\n\n### 应当在产品中使用吗?\n\n在你尝试将这些技术运用到你的应用之前，需要了解到我这次没有做任何的性能测试。请记住这些尝试很大程度上只是一种编程乐趣的挑战。所提供的代码没有根据文本的大小来适配下划线的位置，也没有适配间隙的宽度。可能在字体的适配上也有问题，我只尝试了几种Android默认的字型。就让我们将这些问题留给读者当做练习来解决吧。\n\n如果你将尝试着在你的应用里使用这些代码，那么我必须承认我将很乐于看到关于[spans](http://flavienlaurent.com/blog/2014/01/31/spans/)的实现，我会鼓励你至少缓存一下最后的填充Path。由于它仅仅依赖于字型，字体和字符串，缓存还是比较容易实现的。\n\n另外，文章中描述的这两种实现方法完全严格遵循开放的SDK API。如果在Android framework层直接实现的话，我有一些想法能使得这个功能变得更有效率。\n\n比如 _Region_ 的转换能够通过渲染自身来获得优化，而不用转换回 _Path_ 了（这会造成软件的碎片化以及GPU结构化更新）。Region类本身就是一系列矩形的集合，对于渲染流水线来说，与绘制碎片化的Path相比，绘制一系列的直线或矩形变得容易多了。\n\n你想了解更多关于Android文本的东西？学习[Android的硬件是如何加速字体渲染的？](https://medium.com/@romainguy/androids-font-renderer-c368bbde87d9#.493idqqrm)。\n\n在GitHub上获取[演示源码](https://github.com/romainguy/elegant-underline)。\n"
},
{
"path": "TODO/a-blurring-view-for-android.md",
"content": "> * 原文链接: [A Blurring View for Android](http://developers.500px.com/2015/03/17/a-blurring-view-for-android.html)\n* 原文作者 : [Jun Luo](https://500px.com/junluo)\n* 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner)\n* 译者 : [Sausre](https://github.com/Sausure)\n* 校对者 :[lekenny](https://github.com/lekenny),[Adam Shen](https://github.com/shenxn)\n\n# 在 Android 下进行实时模糊渲染\n\n## 模糊渲染\n 模糊渲染能生动地表达内容间的层次感。当专注于当前特定内容的时候，它允许用户维持相对的上下文，即使模糊层下面的内容发生了视差移动或者动态变化。\n\n在IOS开发中，我们首先可以通过构造`UIVisualEffectView`获得这种模糊效果：\n\n UIVisualEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];\n UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];\n\n接着我们可以添加`visualEffectView`到视图层中，那么在它之下的内容都会动态渲染模糊效果。\n\n## 在Android中的现状\n\n虽然在Android中并没有直接的方法实现模糊渲染，但我们依然能见到些十分优秀的例子比如Yahoo Weather应用，见[Nicholas Pomepuy的博文](http://nicolaspomepuy.fr/blur-effect-for-android-design/)，然而，它是通过缓存一张预先渲染模糊的背景图片实现的。\n\n虽然这种方法挺有效果，但并不是我们想要的。在[500px](https://500px.com)社区，图片并不是用作背景而是焦点内容，这意味着图片可以随意改变甚至迅速改变，即使它们被覆盖在模糊层之下。[我们的Android应用](https://play.google.com/store/apps/details?id=com.fivehundredpx.viewer)就是个十分典型的例子。比如，当用户滑到下一页时，图片会向反方向移动并淡出，通过适当地维护多个预先渲染模糊的图片是很难满足这种需求的。\n\n\n\n## 通过自定义View的OnDraw方法\n\n我们的需求是希望能实现一个模糊视图，它能实时动态地模糊渲染在它之下的视图。我们最终想要的代码最好能尽量简单例如直接让模糊视图拥有一份被模糊视图的引用:\n```java\n blurringView.setBlurredView(blurredView);\n```\n然后当被模糊视图改变时 - 不管是内容的改变（如显示张新的图片）、视图的移动、或者是视图动画，我们都需要刷新模糊视图：\n```java\n blurringView.invalidate();\n```\n为了实现模糊视图，我们需要继承`View`类然后重写`onDraw()`方法来渲染模糊效果：\n```java\n protected void onDraw(Canvas canvas) {\n super.onDraw(canvas);\n\n // 让被模糊视图的draw()方法在私有的画布上绘制\n mBlurredView.draw(mBlurringCanvas);\n\n // 模糊私有画布的位图并传递给mBlurredBitmap\n blur();\n\n // 经过转换后将mBlurredBitmap绘制在模糊视图的默认画布上\n canvas.save();\n canvas.translate(mBlurredView.getX() - getX(), mBlurredView.getY() - getY());\n canvas.scale(DOWNSAMPLE_FACTOR, DOWNSAMPLE_FACTOR);\n canvas.drawBitmap(mBlurredBitmap, 0, 0, null);\n canvas.restore();\n }\n```\n这里的关键是当模糊视图重绘的时候，我们会通过对被模糊视图的引用来调用它的`draw`方法，同时它会在我们私有的画布上绘画（译者注：对该画布的操作最终会作用到我们私有的位图上）:\n```java\n mBlurredView.draw(mBlurringCanvas);\n```\n（通过这种途径访问其它的视图的`draw`方法十分有参考价值，我们也可以实现一个放大镜或者用来标注的视图，相对于模糊渲染，放大镜或者标注的区域更需要放大。）\n\n下面的想法在[Nicholas Pomepuy的博文](http://nicolaspomepuy.fr/blur-effect-for-android-design/)中有谈到,我们结合二次抽样与[RenderScript](http://developer.android.com/guide/topics/renderscript/compute.html)进行快速处理。在我们完成模糊视图的私有画布`mBlurringCanvas`的初始化后二次抽样也设置完成：\n```java\n int scaledWidth = mBlurredView.getWidth() / DOWNSAMPLE_FACTOR;\n int scaledHeight = mBlurredView.getHeight() / DOWNSAMPLE_FACTOR;\n\n mBitmapToBlur = Bitmap.createBitmap(scaledWidth, scaledHeight, Bitmap.Config.ARGB_8888);\n mBlurringCanvas = new Canvas(mBitmapToBlur);\n```\n通过了上面的设置后再适当地初始化RenderScript。那么上文`onDraw()`调用的`blur()`方法就简单多了：\n```java\n mBlurInput.copyFrom(mBitmapToBlur);\n mBlurScript.setInput(mBlurInput);\n mBlurScript.forEach(mBlurOutput);\n mBlurOutput.copyTo(mBlurredBitmap);\n```\n注意此时`mBlurredBitmap`已经渲染好了，余下的工作是`onDraw()`方法对它适当的移动和缩放后绘制到模糊视图默认画布中。\n\n## 实现细节\n\n对于完全的实现，我们需要留心多个技术细节。首先，我们意识到，8个单位的缩放采样以及15个单位的模糊半径就能很好地呈现我们想要的效果。当然，或许对你来说，别的参数才能满足你的需求。\n\n其次，在模糊位图的边缘处我们遇到了一些RenderScript的历史遗留问题,为了应对这个问题,我们对宽度和高度缩放到近似4倍。\n```java\n // The rounding-off here is for suppressing RenderScript artifacts at the edge.\n scaledWidth = scaledWidth - (scaledWidth % 4) + 4;\n scaledHeight = scaledHeight - (scaledHeight % 4) + 4;\n```\n第三，我们为了更好地保证性能，需要创建两张位图分别是`mBitmapToBlur`做为私有画布`mBlurringCanvas`的底图和`mBlurredBitmap`，并会在被模糊视图的大小改变时重新创建它们。同时，我们也需要重新创建RenderScript的`Allocation`对象也就是`mBlurInput`和`mBlurOutput`。\n\n第四，为了设计的明亮程度考虑，当最上面的被模糊视图拥有属性`PorterDuff.Mode.OVERLAY`时我们也可以绘制一个统一白色半透明层。\n\n最后，由于RenderScript仅在API版本17及以上有效，我们在较低级版本也应该有个比较优雅的降级方案。可不幸的是，正如[Nicholas Pomepuy的博文](http://nicolaspomepuy.fr/blur-effect-for-android-design/)中说的那样，通过Java来实现图片模糊渲染速度上达不到实时渲染的需求。最后我们只能决定使用个有较高透明度的半透明视图做为降级方案。\n\n## 优缺点\n\n我们欣赏这个视图的绘制策略因为它能做到实时模糊同时十分简单易用。它无需知道被模糊视图的内容，同时在模糊和被模糊视图的关系之间有很大的灵活性。当然，最重要的是他很好地满足了我们的需求。\n\n然而，这种策略需要模糊视图通过适当的坐标转换来掌握被模糊视图的位置。关键是模糊视图不能是被模糊视图的子视图否则你将会收到堆栈溢出错误提示因为它们在互相调用对方的绘制方法。一个简单但又十分有效摆脱这种限制的方法是保证模糊视图是被模糊视图的姊妹视图并通过z-order来变换它们的层次关系。\n\n还有个注意点是对于矢量图和文本，默认的位图采样并不太有效。\n\n## 类库和演示\n\n你可以在[我们的Android应用](https://play.google.com/store/apps/details?id=com.fivehundredpx.viewer)中看到完全的解决方案。同时我们也[在GitHub上](https://github.com/500px/500px-android-blur)推出了一个轻量级的开源类库，里面有个演示应用来展示如何在内容发生改变和视图动画时使用该类库。\n\n\n"
},
{
"path": "TODO/a-cartoon-intro-to-webassembly.md",
"content": "> * 原文地址：[A cartoon intro to WebAssembly](https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/)\n> * 原文作者：本文已获作者 [Lin Clark](https://code-cartoons.com/@linclark) 授权\n> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)\n> * 译者： [根号三](https://github.com/sqrthree)\n> * 校对者：[Reid](https://github.com/reid3290)、[Tina92](https://github.com/Tina92)\n\n# 看漫画，学 WebAssembly\n\nWebAssembly 运行得很快，你可能已经听说过这个了。但是是什么让 WebAssembly 这么快呢？\n\n在这个系列的文章里，我想和你解释一下为什么 WebAssembly 这么快。\n\n## 等等，WebAssembly 究竟是什么？\n\nWebAssembly 是一种用 JavaScript 以外的编程语言编写代码并在浏览器中运行该代码的方法。因此当人们说 WebAssembly 运行得很快的时候，通常他们都是在和 JavaScript 进行比较。\n\n现在，我不想暗示这是一个二选一的情况 —— 你要么用 WebAssembly 或者用 JavaScript。事实上，我们期望开发者能够在同一个应用里面同时使用 WebAssembly 和 JavaScript。\n\n但是比较一下这二者是非常有用的，你可以因此理解 WebAssembly 将会具有的潜在影响。\n\n## 一点性能历史\n\nJavaScript 创建于 1995 年。它不是为了快而设计的，并且在最初前十年，它并不快。\n\n然后浏览器之间的竞争开始变得愈演愈烈。\n\n在 2008 年，人们所谓的“性能战争”时期开始了。很多浏览器都添加了即时编译器 —— 也叫做 JIT。当 JavaScript 运行时，JIT 可以看到模式（pattern）并且基于这些模式（pattern）让代码运行得更快。\n\n这些 JIT 的引入致使 JavaScript 的性能进入了一个转折点。JS 的执行速度快了 10 倍。\n\n\n\n通过这种性能的改善，JavaScript 开始被用于没有人期望用它来做的一些事情上。例如使用 Node.js 进行服务端编程。性能的改善使得在一个全新的问题上使用 JavaScript 成为了可能。\n\n伴随着 WebAssembly，我们现在可能正处于另一个转折点。\n\n\n\n因此，让我们深入细节之中，来理解是什么使得 WebAssembly 很快。\n\n[第二篇传送门](https://github.com/xitu/gold-miner/blob/master/TODO/a-crash-course-in-just-in-time-jit-compilers.md)\n"
},
{
"path": "TODO/a-case-for-using-storyboards-on-ios.md",
"content": "> * 原文地址：[A Case For Using Storyboards on iOS](https://medium.cobeisfresh.com/a-case-for-using-storyboards-on-ios-3bbe69efbdf4)\n> * 原文作者：[Marin Benčević](https://medium.cobeisfresh.com/@marinbenc)\n> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)\n> * 译者：\n> * 校对者：\n\n# A Case For Using Storyboards on iOS #\n\n\n\nI’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.\n\n#### Why use storyboards?\n\n> A picture is worth a thousand words.\n\nHumans 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.\n\nStoryboards 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.\n\nAnother 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.\n\n\n\nAlso, 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.\n\n#### How you should do it ####\n\n**One storyboard per UIViewController**\n\n\n\nYou 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.\n\n1. **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.\n\n2. **The storyboard is no longer slow to load, since it only loads one UIViewController.**\n\n3. **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.\n\nWhen 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.\n\n let feed = FeedViewController.instance()\n // `feed` is of type `FeedViewController`\n\nThis method works by finding a storyboard with the same name as the class name, and getting the initial view controller from that storyboard.\n\nI 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.\n\n**No segues**\n\nSegues 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.\n\n class UsersViewController: UIViewController, UITableViewDelegate {\n \n private enum SegueIdentifier {\n static let showUserDetails = \"showUserDetails\"\n }\n \n var usernames: [String] = [\"Marin\"]\n \n func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {\n usernameToSend = usernames[indexPath.row]\n performSegue(withIdentifier: SegueIdentifier.showUserDetails, sender: nil)\n }\n \n \n private var usernameToSend: String?\n \n override func prepare(for segue: UIStoryboardSegue, sender: Any?) {\n \n switch segue.identifier {\n case SegueIdentifier.showUserDetails?:\n \n guard let usernameToSend = usernameToSend else {\n assertionFailure(\"No username provided!\")\n return\n }\n \n let destination = segue.destination as! UserDetailViewController\n destination.username = usernameToSend\n \n default:\n break\n } \n }\n\n }\n\nThis 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.\n\nYou 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.\n\nI would much rather have a function that takes a non-optional value, and pushes the next view controller with that value. Simple and easy.\n\n class UsersViewController: UIViewController, UITableViewDelegate {\n \n var usernames: [String] = [\"Marin\"]\n \n func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {\n let username = usernames[indexPath.row]\n showDetail(withUsername: username)\n }\n \n private func showDetail(withUsername username: String) {\n let detail = UserDetailViewController.instance()\n detail.username = username\n navigationController?.pushViewController(detail, animated: true)\n }\n\n }\n\nThis code is much safer, more readable and more concise.\n\n**All properties are set in code**\n\nLeave 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.\n\n\n\nThe 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.\n\nAlso, scanning the code for view properties is easier than trying to find which checkmarks are checked in the storyboard.\n\nThis 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.\n\n#### What storyboards are for me ####\n\nYou 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!\n\nStoryboards 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.\n\nMy 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.**\n\nSo 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.\n\n*If you liked this one, check out some some other articles from my team:*\n\n[](https://medium.cobeisfresh.com/how-to-win-a-hackathon-tips-tricks-8cd391e18705)\n\n[](https://medium.cobeisfresh.com/accessing-types-from-extensions-in-swift-32ca87ec5190)\n\n\n\n---\n\n> [掘金翻译计划](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)。\n"
},
{
"path": "TODO/a-crash-course-in-assembly.md",
"content": "> * 原文地址：[A crash course in assembly](https://hacks.mozilla.org/2017/02/a-crash-course-in-assembly/)\n> * 原文作者：本文已获作者 [Lin Clark](https://code-cartoons.com/@linclark) 授权\n> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)\n> * 译者：[zhouzihanntu](https://github.com/zhouzihanntu)\n> * 校对者：[Tina92](https://github.com/Tina92)、[zhaochuanxing](https://github.com/zhaochuanxing)\n\n# 汇编快速入门\n\n**本文是 WebAssembly 系列文章的第三部分。如果你还没有阅读过前面的文章，我们建议你 [从头开始](https://github.com/xitu/gold-miner/blob/master/TODO/a-cartoon-intro-to-webassembly.md)。**\n\n理解汇编和编译器如何生成它的有助于你后续理解 WebAssembly 的工作原理，\n\n在 [介绍 JIT 的文章](https://hacks.mozilla.org/2017/02/a-crash-course-in-just-in-time-jit-compilers/)里，我谈到了与机器交流的方式和与外星人通信是相似的。\n\n\n\n我现在真想看看外星人大脑的思考方式——即机器大脑解析和理解通信的机制。\n\n大脑中有一部分专门用来思考（例如做加减或其他逻辑运算），一部分提供短期记忆存储，还有一部分提供长期记忆存储。\n\n这几个不同的部分都有各自的名称：\n\n- 负责思维的部分称为算术逻辑单元 (ALU)。\n- 短期存储由寄存器提供。\n- 长期存储由随机存取存储器 (RAM) 提供。\n\n\n\n机器码中的句子被称为指令。\n\n当一条指令进入大脑时会发生什么？它会被分解成带不同含义的不同部分。\n\n指令分解的方式是特定于当前大脑构造的。\n\n例如，这种结构的大脑可能总是将前六位传送给 ALU。ALU 根据接收到的序列中 1 和 0 的排列，就会明白需要将两个东西加在一起。\n\n这个字段称为操作码(opcode)，它的作用是告诉 ALU 要执行的操作。\n\n\n\n接下来大脑会取后续两个三位的字段来确定要相加的两个数。这两个数会存储在寄存器中。\n\n\n\n注意这里机器码上方的注释，有助于我们理解这个过程。这就叫做汇编。这段代码称为符号机器码。符号机器码是人类理解机器码的一种方式。\n\n你会发现汇编和这台机器的机器码有很直接的关系。因此不同的机器架构对应有不同的汇编方式。当你遇到使用不同架构的机器时，可能就得按它们自己的方式进行汇编。\n\n因此，我们的翻译对象并不止一个。机器码不止一种语言，有许多不同种类的机器码。就像我们人类会说不同的语言一样，机器也会使用不同的语言。\n\n随着人类和外星人之间的翻译问题解决，你也可以将英语、俄语、普通话等语言转化成外星文A、外星文B了。对编程而言，就是将 C、C++、Rust 等语言转化成 x86、ARM。\n\n如果你想将任意一种高级语言编译成对应任意体系结构的汇编语言，一种方法是创建一整套不同语言到不同汇编的转化器。\n\n\n\n但这样的做法非常低效。大部分编译器会在中间放置至少一个中间层。编译器接收高级编程语言并将其转化成相对底层的形式，转化结果也不能和机器码一样直接运行。这类形式称为中间表示(IR)。\n\n\n\n这意味着编译器可以将任意一种高级编程语言翻译成一种 IR 语言。编译器的另一部分将得到的 IR 内容编译成特定于目标架构的语言。\n\n编译器的前端部分将高级编程语言翻译成 IR 语言，再由后端将它们从 IR 语言编译成目标架构的汇编代码。\n\n\n\n## 总结\n\n以上就是汇编的简要说明，以及编译器将高级程序语言转成汇编的过程。在[下一篇文章](https://github.com/xitu/gold-miner/blob/master/TODO/creating-and-working-with-webassembly-modules.md)里，我们将会看到 WebAssembly 是如何实现的。\n"
},
{
"path": "TODO/a-crash-course-in-just-in-time-jit-compilers.md",
"content": "> * 原文地址：[A crash course in just-in-time (JIT) compilers](https://hacks.mozilla.org/2017/02/a-crash-course-in-just-in-time-jit-compilers/)\n> * 原文作者：本文已获作者 [Lin Clark](https://code-cartoons.com/@linclark) 授权\n> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)\n> * 译者：[zhouzihanntu](https://github.com/zhouzihanntu)\n> * 校对者：[Tina92](https://github.com/Tina92)、[Germxu](https://github.com/Germxu)\n\n# JIT 编译器快速入门 #\n\n**本文是 WebAssembly 系列文章的第二部分。如果你还没有阅读过前面的文章，我们建议你 [从头开始](https://github.com/xitu/gold-miner/blob/master/TODO/a-cartoon-intro-to-webassembly.md)。**\n\nJavaScript 刚面世时运行速度是很慢的，而 JIT 的出现令其性能快速提升。那么问题来了，JIT 是如何运作的呢？\n\n## JavaScript 在浏览器中的运行机制 ##\n\n作为一名开发者，当你向网页中添加 JavaScript 代码的时候，你有一个目标和一个问题。\n\n目标: 你想要告诉计算机做什么。\n\n问题: 你和计算机使用的是不同的语言。\n\n你使用的是人类语言，而计算机使用的是机器语言。即使你不愿承认，对于计算机来说 JavaScript 甚至其他高级编程语言都是人类语言。这些语言是为人类的认知设计的，而不是机器。\n\n所以 JavaScript 引擎的作用就是将你使用的人类语言转换成机器能够理解的东西。\n\n我认为这就像电影 [降临](https://en.wikipedia.org/wiki/Arrival_(film)) 里人类和外星人试图互相交谈的情节一样。\n\n\n\n在那部电影中，人类和外星人在尝试交流的过程里并不只是做逐字翻译。这两个群体对世界有不同的思考方式，人类和机器也是如此（我将在下一篇文章中详细说明）。\n\n既然这样，那转化是如何发生的呢？\n\n在编程中，我们通常使用解释器和编译器这两种方法将程序代码转化为机器语言。\n\n解释器会在程序运行时对代码进行逐行转义。\n\n\n\n相反的是，编译器会提前将代码转义并保存下来，而不是在运行时对代码进行转义。\n\n\n\n以上两种转化方式都各有优劣。\n\n### 解释器的优缺点 ###\n\n解释器可以迅速开始工作。在运行代码之前，你不必等待所有的汇编步骤完成，只要开始转义第一行代码就可以运行程序了。\n\n因此，解释器看起来自然很适用于 JavaScript 这类语言。对于 Web 开发者来说，能够快速运行代码相当重要。\n\n这就是各浏览器在初期使用 JavaScript 解释器的原因。\n\n但是当你重复运行同样的代码时，解释器的劣势就显现出来了。举个例子，如果在循环中，你就不得不重复对循环体进行转化。\n\n### 编译器的优缺点 ###\n\n编译器的优缺点恰恰和解释器相反。\n\n使用编译器在启动时会花费多一些时间，因为它必须在启动前完成编译的所有步骤。但是在循环体中的代码运行速度更快，因为它不需要在每次循环时都进行编译。\n\n另一个不同之处在于编译器有更多时间对代码进行查看和编辑，来让程序运行得更快。这些编辑我们称为优化。\n\n解释器在程序运行时工作，因此它无法在转义过程中花费大量时间来确定这些优化。\n\n## 两全其美的解决办法 —— JIT 编译器 ##\n\n为了解决解释器在循环时重复编译导致的低效问题，浏览器开始将编译器混合进来。\n\n不同浏览器的实现方式稍有不同，但基本思路是一致的。它们向 JavaScript 引擎添加了一个新的部件，我们称之为监视器（又名分析器）。监视器会在代码运行时监视并记录下代码的运行次数和使用到的类型。\n\n起初，监视器只是通过解释器执行所有操作。\n\n\n\n如果一段代码运行了几次，这段代码被称为 warm code；当这段代码运行了很多次时，它就会被称为 hot code。\n\n### 基线编译器 ###\n\n当一个函数运行了数次时，JIT 会将该函数发送给编译器编译，然后把编译结果保存下来。\n\n\n\n该函数的每一行都被编译成一个“存根”，存根以行号和变量类型为索引（这很重要，我后面会解释）。如果监视器监测到程序再次使用相同类型的变量运行这段代码，它将直接抽取出对应代码的编译后版本。\n\n这有助于加快程序的运行速度，但是像我说的，编译器可以做得更多。只要花费一些时间，它能够确定最高效的执行方式，即优化。\n\n基线编译器可以完成一些优化（我会在后续给出示例）。不过，为了不阻拦进程过久，它并不愿意在优化上花费太多时间。\n\n然而，如果这段代码运行次数实在太多，那就值得花费额外的时间对它做进一步优化。\n\n### 优化编译器 ###\n\n当一段代码运行的频率非常高时，监视器会把它发送给优化编译器。然后得到另一个运行速度更快的函数版本并保存下来。\n\n\n\n为了得到运行速度更快的代码版本，优化编译器会做一些假设。\n\n举例来说，如果它可以假设由特定构造函数创建的所有对象结构相同，即所有对象的属性名相同，并且这些属性的添加顺序相同，然后它就可以基于这个进行优化。\n\n优化编译器会依据监视器监测代码运行时收集到的信息做出判断。如果在之前通过的循环中有一个值总是 true，它便假定这个值在后续的循环中也是 true。\n\n但在 JavaScript 中没有任何情况是可以保证的。你可能会先得到 99 个结构相同的对象，但第 100 个就有可能缺少一个属性。\n\n所以编译后的代码在运行前需要检查假设是否有效。如果有效，编译后的代码即运行。但如果无效，JIT 就认为它做了错误的假设并销毁对应的优化后代码。\n\n\n\n进程会回退到解释器或基线编译器编译的版本。这个过程被称为去优化（或应急机制）。\n\n通常优化编译器会加快代码运行速度，但有时它们也会导致意外的性能问题。如果你的代码被不断的优化和去优化，运行速度会比基线编译版本更慢。\n\n为了防止这种情况发生，许多浏览器添加了限制，以便在“优化-去优化”这类循环发生时打破循环。例如，当 JIT 尝试了 10 次优化仍未成功时，就会停止当前优化。\n\n### 优化示例: 类型专门化 ###\n\n优化的类型有很多，但我只演示其中一种以便你理解优化是如何发生的。优化编译器最大的成功之一来自于类型专门化。\n\nJavaScript 使用的动态类型系统在运行时需要多做一些额外的工作。例如下面这段代码：\n\n```\nfunction arraySum(arr) {\n var sum = 0;\n for (var i = 0; i < arr.length; i++) {\n sum += arr[i];\n }\n}\n\n```\n\n执行循环中的 `+=` 一步似乎很简单。看起来你可以一步就得到计算结果，但由于 JavaScript 的动态类型，处理它所需要的步骤比你想象的多。\n\n假定 `arr` 是一个存放 100 个整数的数组。在代码执行几次后，基线编译器将为函数中的每个操作创建一个存根。`sum += arr[i]` 将会有一个把 `+=` 依据整数加法处理的存根。\n\n然而我们并不能保证 `sum` 和 `arr[i]` 一定是整数。因为在 JavaScript 中数据类型是动态的，有可能在下一次循环中的 `arr[i]` 是一个字符串。整数加法和字符串拼接是两个完全不同的操作，因此也会编译成非常不同的机器码。\n\nJIT 处理这种情况的方法是编译多个基线存根。一段代码如果是单态的（即总被同一种类型调用），将得到一个存根。如果是多态的（即被不同类型调用），那么它将得到分别对应各类型组合操作的存根。\n\n这意味着 JIT 在确定存根前要问许多问题。\n\n\n\n在基线编译器中，由于每一行代码都有各自对应的存根，每次代码运行时，JIT 要不断检查该行代码的操作类型。因此在每次循环时，JIT 都要询问相同的问题。\n\n\n\n如果 JIT 不需要重复这些检查，代码运行速度会加快很多。这就是优化编译器的工作之一了。\n\n在优化编译器中，整个函数会被一起编译。所以类型检查可以在循环开始前完成。\n\n\n\n一些 JIT 编译器做了进一步优化。例如，在 Firefox 中为仅包含整数的数组设立了一个特殊分类。如果 `arr` 是在这个分类下的数组，JIT 就不需要检查 `arr[i]` 是否是整数了。这意味着 JIT 可以在进入循环前完成所有类型检查。\n\n## 总结 ##\n\n简而言之，这就是 JIT。它通过监控代码运行确定高频代码，并进行优化，加快了 JavaScript 的运行速度，因此令大多数 JavaScript 应用程序的性能提高了数倍。\n\n即使有了这些改进，JavaScript 的性能仍是不可预测的。为了加速代码运行，JIT 在运行时增加了以下开销：\n\n- 优化和去优化\n- 用于存储监视器纪录和应急回退时的恢复信息的内存\n- 用于存储函数的基线和优化版本的内存\n\n这里还有改进空间：除去以上的开销，提高性能的可预测性。这是 WebAssembly 实现的工作之一。\n\n在[下一篇文章](https://github.com/xitu/gold-miner/blob/master/TODO/a-crash-course-in-assembly.md)中，我将对汇编做更多说明并解释编译器与它是如何工作的。\n"
},
{
"path": "TODO/a-day-without-javascript.md",
"content": "> * 原文地址：[A day without Javascript](https://sonniesedge.co.uk/blog/a-day-without-javascript)\n> * 原文作者：[A day without Javascript](https://sonniesedge.co.uk/about/)\n> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)\n> * 译者：\n> * 校对者：\n\n# A day without Javascript\n\nAs I write this it’s raining outside, and I’m trying to avoid having to go out into the murk and watch the Germans conduct their annual [diversity maneuvers](http://www.karneval-berlin.de/en/). I’ve therefore decided to pass my time by doing the one thing that counts as a religious crime in web dev land: I’m going to turn off javascript in my browser and see what sites work and what sites don’t.\n\nI know, I know, my life is simply too exciting.\n\nNow, I know that because I write a lot about the universal web and progressive enhancement, people assume that I must hate javascript.\n\nThis would be an incorrect assumption.\n\nI simply hate people relying on brittle client-side javascript when there are other alternatives. In the same way as I wouldn’t rely on some unknown minicab firm as the sole way of getting me to the airport for a wedding flight, I don’t like relying on a non-guaranteed technology as the sole way of delivering a web app.\n\nFor me it’s a matter of elegance and simplicity over unnecessary complexity.\n\n## Too many tabs\n\nSo, for my dreary grey day experiment I restricted myself to just the things open in my browser tabs. For normal people this might be two or three sites.\n\nNot for me. I have approximately 17 shitmillion tabs open, because I Have a Problem With Tabs.\n\nNo seriously. I can never just close a tab. I’ve tried things like [One Tab](https://www.one-tab.com/) but I just can’t get down to less than 30 in any one window (“I’ll just save that tab for later” I think, each and ever time). Let’s just agree that I need some kind of therapy, and we’ll all be able to move on.\n\nAnyway, there’s nothing fancy to this experiment. It was a case of turning off javascript in the browser and reloading a site, nothing more. To quickly disable the browser’s JS with one click I used Chrome and the [Toggle Javascript](https://chrome.google.com/webstore/detail/toggle-javascript/cidlcjdalomndpeagkjpnefhljffbnlo) extension - available, ironically enough, via the javascript-only Chrome web store.\n\nOh, and for you, sweet reader, I opened these tabs in new windows, so you don’t have to see the pain of 50 tabs open at once.\n\n## First impressions\n\nSo how was it? Well, with just a few minutes of sans-javascript life under my belt, my first impression was “Holy shit, things are *fast* without javascript”. There’s no ads. There’s no video loading at random times. There’s no sudden interrupts by “DO YOU WANT TO FUCKING SUBSCRIBE?” modals.\n\nIf this were the only manifestation of turning off javascript, I’d do this for the rest of time. However, a lot of things don’t work. Navigation is the most common failure mode. Hamburger menus fail to internally link to a nav section (come on, that’s an easy one kids). Forms die when javascript is taken away (point the form to an endpoint that accepts GET/POST queries ffs). Above the fold *images* fail to load (you do know they’re streaming by default, yes?).\n\n## The sites\n\nLet’s get to it. I think I’ve got a pretty representative list of sites in my open tabs (perhaps due to the aforementioned Tab Problem). Howl at me on Twitter if you feel I missed anything particularly important.\n\n### Feedly\n\n\n\nMy very first attempt at sans-JS and I get nothing but a blank white page. Fuck you feedly.\n\n*sighs, runs hands over face, shouts after Feedly*\n\nWait no, Feedly, I’m sorry. I didn’t mean that. It was the coffee talking. Can we talk this over? I like using you to keep up with blog posts.\n\nBut why do you work like this, Feedly? Your devs *could* offer the site in basic HTML and use advanced features such as, er, anchor links, to move to other articles. Then when JS is available, new content can be loaded via JS.\n\n*Verdict:* Relationship counselling.\n\n### Twitter\n\n\n\nTwitter shows the normal website (with full content) for a brief moment, then redirects to [mobile.twitter.com](https://mobile.twitter.com) (the old one, not the spanky new React one, of course). This is really frustrating, as the full site would still be great to load without javascript. It could use the same navigation method as the mobile site, where it sets a query parameter to the URL “?max_id=871333359884148737” that dictates what is the latest tweet in your timeline to show. Simple and elegant.\n\n*Verdict:* Could try harder.\n\n### Google Chrome\n\n\n\nThe Google Chrome download page just fails completely, with no notice, only a blank white page.\n\n*Sigh*.\n\n*Verdict:* No Chrome for you, you dirty javascriptophobe!\n\n### Youtube\n\n\n\nYoutube really really wants to load. Really, reallllllly, wants to. But then it fucks things up at the last nanosecond and farts out, showing no video, no preview icons, and no comments (that last one is perhaps a positive).\n\nEven if the site is doing some funky blob loading of video media, it wouldn’t be hard to put a basic version on the page initially (with `preload=\"none\"`), and then have it upgrade when JS kicks in.\n\n*Verdict:* Can’t watch My Drunk Kitchen or Superwoman. :( :( :(\n\n### 24 ways\n\n\n\nI’ve had this open in my tabs for the last 6 months, meaning to read it. Look, I’M SORRY, okay? But holy fuck, this site works great without javascript. All the animations are there (because they’re CSS) and the slide in navigation works (because it internally links to the static version of the menu at the bottom of the page).\n\n*Verdict:* Class act. Smoooooth. Jazzz.\n\n### Netflix\n\n\n\nI’m using netflix to try and indoctrinate my girlfriend into watching Star Trek. So far she’s not convinced, mainly because “Tasha *slept with Mr Data?* But it’d be like fucking your microwave”.\n\nAnyway, Netflix doesn’t work. Well, it loads the header, if you want to count that. I get why they don’t do things with HTML5 - DRMing all yo shit needs javascript. But still :(.\n\n*Verdict:* JavaScript-only is the New Black\n\n### NYtimes\n\n\n\n\n\nNot sure why this was in my tab list, but tbh I’ve found rotting tabs from 2015 in there, so I’m not surprised.\n\nThe NY Times site loads in *561ms* and 957kb without javascript. Holy crap, that’s what it should be like normally. For reference it took 12000ms (12seconds) and 4000kb (4mb) to load *with* javascript. Oh, and as a bonus, you get a screenful of adverts.\n\nA lot of images are lazy loaded, and so don’t work, getting replaced with funky loading icons. But hey ho, I can still read the stories.\n\n*Verdict:* Failing… to *not* work. Sad!\n\n### BBC News\n\n\n\nIt’s the day after the latest London terrorism attacks, and so I’ve got this open, just to see how the media intensifies and aids every terrorist action. The BBC is the inventor and poster-child for progressive enhancement via Cutting the Mustard, and it doesn’t disappoint. The non-CTM site works fully and while it doesn’t *look* the same as the full desktop site (it’s mobile-first and so is pretty much the mobile version), it still *works*.\n\n*Verdict:* Colman’s Mustard\n\n### Google search\n\n\n\nWithout JS, Google search still does what it’s best at: searching.\n\nOkay, there’s no autocomplete, the layout reverts to the early 2000s again, and image search is shockingly bad looking. But, in the best progressive enhancement manner, you can still perform your core tasks.\n\n*Verdict:* Solid.\n\n### Wikipedia\n\n\n\nLike a good friend, Wikipedia never disappoints. The site is indistinguishable from the JS version. Keep being beautiful, Wikipedia.\n\n*Verdict:* BFFs.\n\n### Amazon\n\n\n\nThe site looks a little… *off* without JS (the myriad accordions vomit their content over the page when JS isn’t there to keep them under control). But the entire site works! You can still search, you still get recommendations. You can still add items to your basket, and you can still proceed to the checkout.\n\n*Verdict:* Amazonian warrior.\n\n### Google Maps\n\n\n\nDiscounting Gmail, Google Maps is perhaps one of the most heavily used Single Page Applications out there. As such I expected some kind of fallback, like Gmail provides, even if it wasn’t true progressive enhancement. Maybe some kind of Streetmap style tile-by-tile navigation fallback?\n\nBut it failed completely.\n\n*Verdict:* Cartography catastrophe.\n\n## Overall verdict\n\nThis has made me appreciate the number of large sites that make the effort to build robust sites that work for everybody. But even on those sites that are progressively enhanced, it’s a sad indictment of things that they can be so slow on the multi-core hyperpowerful Mac that I use every day, but immediately become fast when JavaScript is disabled.\n\nIt’s even sadder when using a typical site and you realise how much Javascript it downloads. I now know why my 1GB mobile data allowance keeps burning out at least…\n\nI maintain that it’s perfectly possible to use the web without javascript, especially on those sites that are considerate to the diversity of devices and users out there. And if I want to browse the web without javascript, well fuck, that’s my choice as a user. This is the web, not the Javascript App Store, and we should be making sure that things work on even the most basic device.\n\nI think I’m going to be turning off javascript more, just on principle.\n\nHaters, please tweet at me as you feel fit.\n\n---\n\n> [掘金翻译计划](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)。\n"
},
{
"path": "TODO/a-detailed-guide-on-developing-android-apps-using-the-clean-architecture-pattern.md",
"content": ">* 原文链接 : [A detailed guide on developing Android apps using the Clean Architecture pattern](https://medium.com/@dmilicic/a-detailed-guide-on-developing-android-apps-using-the-clean-architecture-pattern-d38d71e94029#.7cz5w0dp3)\n* 原文作者 : [Dario Miličić](https://medium.com/@dmilicic)\n* 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner)\n* 译者 : \n* 校对者:\n\n\n\nEver since I started developing Android apps there was this feeling that it could be done better. I’ve seen a lot of bad software design decisions during my career, some of which were my own — and Android complexity mixed with bad software design is a recipe for disaster. But it is important to learn from your mistakes and keep improving. After a lot of searching for a better way to develop apps I encountered the **Clean Architecture**. After applying it to Android, with some refinement and inspiration from similar projects, I decided that this approach is practical enough and worth sharing.\n\nThe **goal** of this article is to provide a step-by-step guide for developing Android apps in a Clean way. This whole approach is how I’ve recently been building my apps for clients with great success.\n\n## What is Clean Architecture?\n\nI will not go into too much detail here as there are articles that explain it much better than I can. But the next paragraph provides the **crux** of what you need to know to understand Clean.\n\nGenerally in Clean, code is separated into layers in an onion shape with one **dependency rule:** The inner layers should not know anything about the outer layers. Meaning that the **dependencies should point inwards**.\n\nThis is the previous paragraph visualized:\n\n\n\nAwesome visual representation of the Clean Architecture. All credit for this image goes to [Uncle Bob](https://blog.8thlight.com/uncle-bob/archive.html).\n\nClean Architecture, as mentioned in the provided articles, makes your code:\n\n* **Independent of Frameworks**\n* **Testable.**\n* **Independent of UI.**\n* **Independent of Database.**\n* **Independent of any external agency.**\n\nI will hopefully make you understand how these points are achieved with examples below. For a more detailed explanation of Clean I really recommend this [article](https://blog.8thlight.com/uncle-bob/2012/08/13/the-clean-architecture.html) and this [video](https://vimeo.com/43612849).\n\n### What this means for Android\n\nGenerally, your app can have an arbitrary amount of layers but unless you have Enterprise wide business logic that you have to apply in every Android app, you will most often have 3 layers:\n\n* Outer: Implementation layer\n* Middle: Interface adapter layer\n* Inner: Business logic layer\n\nThe **implementation layer** is where everything framework specific happens. Framework specific code **includes every line of code that is not solving the problem you set to solve**, this includes all Android stuff like creating activities and fragments, sending intents, and other framework code like networking code and databases.\n\nThe purpose of the **interface adapter layer** is to act as a connector between your business logic and framework specific code.\n\nThe most important layer is the **business logic layer**. This is where you actually solve the problem you want to solve building your app. This layer does not contain any framework specific code and you **should be able to run it without an emulator**. This way you can have your business logic code that is **easy to test, develop and maintain**. That is the main benefit of the Clean Architecture.\n\nEach layer, above the core layer, is also responsible for converting models to lower layer models before the lower layer can use them. An inner layer can not have a reference to model class that belongs to the outer layer. However, the outer layer can use and reference models from the inner layer. Again, this is due to our **dependency rule**. It does create overhead but it is necessary for making sure code is decoupled between layers.\n\n> **Why is this model conversion necessary?** For example, your business logic models might not be appropriate for showing them to the user directly. Perhaps you need to show a combination of multiple business logic models at once. Therefore, I suggest you create a ViewModel class that makes it easier for you to display it to the UI. Then, you use a _converter_ class in the outer layer to convert your business models to the appropriate ViewModel.\n\n> Another example might be the following: Let’s say you get a **Cursor** object from a **ContentProvider** in an outer database layer. Then the outer layer would convert it to your inner business model first, and then send it to your business logic layer to be processed.\n\nI will add more resources to learn from at the bottom of the article. Now that we know about the basic principles of the Clean Architecture, let’s get our hands dirty with some actual code. I will show you how to build an example functionality using Clean in the next section.\n\n## How do I start writing Clean apps?\n\nI’ve made a [boilerplate project](https://github.com/dmilicic/Android-Clean-Boilerplate) that has all of the plumbing written for you. It acts as a **Clean starter pack** and is designed to be built upon immediately with most common tools included from the start. You are **free** to download it, modify it and build your apps with it.\n\nYou can find the starter project here: [**Android Clean Boilerplate**](https://github.com/dmilicic/Android-Clean-Boilerplate)\n\n## Getting started writing a new use case\n\nThis section will explain all the code you need to write to create a use case using the Clean approach on top of the boilerplate provided in the previous section. A use case is just some isolated functionality of the app. A use case may (e.g. on user click) or may not be started by a user.\n\nFirst let’s explain the structure and terminology of this approach. This is how I build apps but it is _not set in stone_ and you can organize it differently if you want.\n\n### Structure\n\nThe general structure for an Android app looks like this:\n\n* Outer layer packages: UI, Storage, Network, etc.\n* Middle layer packages: Presenters, Converters\n* Inner layer packages: Interactors, Models, Repositories, Executor\n\n### Outer layer\n\nAs already mentioned, this is where the framework details go.\n\n**UI — **This is where you put all your Activities, Fragments, Adapters and other Android code related to the user interface.\n\n**Storage — **Database specific code that implements the interface our Interactors use for accessing data and storing data. This includes, for example, [**ContentProviders**](http://developer.android.com/guide/topics/providers/content-providers.html) or ORM-s such as [**DBFlow**](https://github.com/Raizlabs/DBFlow).\n\n**Network — **Things like [**Retrofit**](http://square.github.io/retrofit/) go here.\n\n### Middle layer\n\nGlue code layer which connects the implementation details with your business logic.\n\n**Presenters — **Presenters handle events from the UI (e.g. user click) and usually serve as callbacks from inner layers (Interactors).\n\n**Converters — **Converter objects are responsible for converting inner models to outer models and vice versa.\n\n### Inner layer\n\nThe core layer contains the most high-level code. **All classes here are POJOs**. Classes and objects in this layer have no knowledge that they are run in an Android app and can easily be ported to any machine running JVM.\n\n**Interactors — **These are the classes which actually **contain your business logic code**. These are run in the background and communicate events to the upper layer using callbacks. They are also called UseCases in some projects (probably a better name). It is normal to have a lot of small Interactor classes in your projects that solve specific problems. This conforms to the [**Single Responsibility Principle**](https://en.wikipedia.org/wiki/Single_responsibility_principle)and in my opinion is easier on the brain.\n\n**Models — **These are your business models that you manipulate in your business logic.\n\n**Repositories — **This package only contains interfaces that the database or some other outer layer implements. These interfaces are used by Interactors to access and store data. This is also called a [repository pattern.](https://msdn.microsoft.com/en-us/library/ff649690.aspx)\n\n**Executor — **This package contains code for making Interactors run in the background by using a worker thread executor. This package is generally not something you need to change.\n\n### A simple example\n\nIn this example, our use case will be: **_“Greet the user with a message when the app starts where that message is stored in the database.”_** This example will showcase how to write the following three packages needed to make the use case work:\n\n* the **presentation** package\n* the **storage** package\n* the **domain** package\n\nThe first two belong to the outer layer while the last one is the inner/core layer.\n\n**Presentation** package is responsible for everything related to showing things on the screen — it includes the whole [MVP](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter) stack (it means it also includes both the UI and Presenter packages even though they belong to different layers).\n\nOK — less talk, more code.\n\n## Writing a new Interactor (inner/core layer)\n\nIn reality you could start in any layer of the architecture, but I recommend you to start on your core business logic first. You can write it, test it and make sure it works without ever creating an activity.\n\nSo let’s start by creating an Interactor. The Interactor is where the main logic of the use case resides. **All Interactors are run in the background thread so there shouldn’t be any impact on UI performance.** Let’s create a new Interactor with a warm name of **WelcomingInteractor**.\n\n public interface WelcomingInteractor extends Interactor { \n\n interface Callback { \n\n void onMessageRetrieved(String message);\n\n void onRetrievalFailed(String error);\n } \n }\n\nThe **Callback** is responsible for talking to the UI on the main thread, we put it into this Interactor’s interface so we don’t have to name it a _WelcomingInteractorCallback — _to distinguish it from other callbacks. Now let’s implement our logic of retrieving a message. Let’s say we have a **MessageRepository** that can give us our welcome message.\n\n public interface MessageRepository { \n String getWelcomeMessage();\n }\n\nNow let’s implement our Interactor interface with our business logic. **It is important that the implementation extends the AbstractInteractor which takes care of running it on the background thread.**\n\n```\npublic class WelcomingInteractorImpl extends AbstractInteractor implements WelcomingInteractor {\n \n private void notifyError() {\n mMainThread.post(new Runnable() {\n @Override\n public void run() {\n mCallback.onRetrievalFailed(\"Nothing to welcome you with :(\");\n }\n });\n }\n\n private void postMessage(final String msg) {\n mMainThread.post(new Runnable() {\n @Override\n public void run() {\n mCallback.onMessageRetrieved(msg);\n }\n });\n }\n\n @Override\n public void run() {\n\n // retrieve the message\n final String message = mMessageRepository.getWelcomeMessage();\n\n // check if we have failed to retrieve our message\n if (message == null || message.length() == 0) {\n\n // notify the failure on the main thread\n notifyError();\n\n return;\n }\n\n // we have retrieved our message, notify the UI on the main thread\n postMessage(message);\n }\n```\n \n\nThis just attempts to retrieve the message and sends the message or the error to the UI to display it. We notify the UI using our Callback which is actually going to be our Presenter. **That is the crux of our business logic. Everything else we need to do is framework dependent.**\n\nLet’s take a look which dependencies does this Interactor have:\n\n```\nimport com.kodelabs.boilerplate.domain.executor.Executor;\nimport com.kodelabs.boilerplate.domain.executor.MainThread;\nimport com.kodelabs.boilerplate.domain.interactors.WelcomingInteractor;\nimport com.kodelabs.boilerplate.domain.interactors.base.AbstractInteractor;\nimport com.kodelabs.boilerplate.domain.repository.MessageRepository;\n```\n\nAs you can see, there is **no mention of any Android code.** That is the **main benefit** of this approach. You can see that the **Independent of Frameworks** point holds. Also, we do not care about specifics of the UI or database, we just call interface methods that someone somewhere in the outer layer will implement. Therefore, we are **Independent of UI** and **Independent of Databases.**\n\n## Testing our Interactor\n\nWe can now run and **test our Interactor without running an emulator**. So let’s write a simple **JUnit** test to make sure it works:\n\n```\n @Test\n public void testWelcomeMessageFound() throws Exception {\n\n String msg = \"Welcome, friend!\";\n\n when(mMessageRepository.getWelcomeMessage())\n .thenReturn(msg);\n\n WelcomingInteractorImpl interactor = new WelcomingInteractorImpl(\n mExecutor, \n mMainThread, \n mMockedCallback, \n mMessageRepository\n );\n interactor.run();\n\n Mockito.verify(mMessageRepository).getWelcomeMessage();\n Mockito.verifyNoMoreInteractions(mMessageRepository);\n Mockito.verify(mMockedCallback).onMessageRetrieved(msg);\n }\n```\n \nAgain, this Interactor code has no idea that it will live inside an Android app. This proves that our business logic is **Testable,** which was the second point to show.\n\n## Writing the presentation layer\n\nPresentation code belongs to the **outer layer** in Clean. It consists of framework dependent code to display the UI to the user. We will use the **MainActivity** class to display the welcome message to the user when the app resumes.\n\nLet’s start by writing the interface of our **Presenter** and **View**. The only thing our view needs to do is to display the welcome message:\n\n public interface MainPresenter extends BasePresenter { \n\n interface View extends BaseView { \n void displayWelcomeMessage(String msg);\n } \n }\n\nSo how and where do we start the Interactor when an app resumes? Everything that is not strictly view related should go into the Presenter class. This helps achieve [**separation of concerns**](https://en.wikipedia.org/wiki/Separation_of_concerns) and prevents the Activity classes from getting bloated. This includes all code working with Interactors.\n\nIn our **MainActivity** class we override the **_onResume()_** method:\n\n @Override\n protected void onResume() {\n super.onResume();\n // let's start welcome message retrieval when the app resumes\n mPresenter.resume();\n }\n\nAll **Presenter** objects implement the **_resume()_** method when they extend **BasePresenter**.\n\n> **Note**: Astute readers will probably see that I have added Android lifecycle methods to the BasePresenter interface as helper methods, even though the Presenter is in a lower layer. The Presenter should not know about anything in the UI layer — e.g. that it has a lifecycle. However, I’m not specifying Android specific *_event_* here as every UI has to be shown to the user sometime. Imagine I called it **onUIShow()** instead of **onResume()**. It’s all good now, right? :)\n\nWe start the Interactor inside the **MainPresenter** class in the **_resume()_** method:\n\n @Override\n public void resume() {\n mView.showProgress();\n // initialize the interactor\n WelcomingInteractor interactor = new WelcomingInteractorImpl(\n mExecutor,\n mMainThread, \n this, \n mMessageRepository\n );\n // run the interactor\n interactor.execute();\n }\n\nThe **_execute()_** method will just execute the **_run()_** method of the **WelcomingInteractorImpl** in a background thread. The **_run()_** method can be seen in the **_Writing a new Interactor_** section.\n\nYou may notice that the Interactor behaves similarly to the **AsyncTask** class. You supply it with all that it needs to run and execute it. You might ask why didn’t we just use AsyncTask? Because that is **Android specific code** and you would need an emulator to run it and to test it.\n\nWe provide several things to the interactor:\n\n* The **ThreadExecutor** instance which is responsible for executing Interactors in a background thread. I usually make it a singleton. This class actually resides in the **domain** package and does not need to be implemented in an outer layer.\n* The **MainThreadImpl** instance which is responsible for posting runnables on the main thread from the Interactor. Main threads are accessible using framework specific code and so we should implement it in an outer layer.\n* You may also notice we provide **_this_** to the Interactor — **MainPresenter** is the Callback object the Interactor will use to notify the UI for events.\n* We provide an instance of the **WelcomeMessageRepository** which implements the **MessageRepository** interface that our interactor uses. The **WelcomeMessageRepository** is covered later in the **_Writing the storage layer_** section.\n\n> **Note**: Since there are many things you need to provide to an Interactor each time, a dependency injection framework like [Dagger 2](https://github.com/google/dagger) would be useful. But I choose not to include it here for simplicity. Implementation of such a framework is left to your own discretion.\n\nRegarding **_this_**, the **MainPresenter** of the **MainActivity** really does implement the Callback interface:\n\n public class MainPresenterImpl extends AbstractPresenter implements MainPresenter, WelcomingInteractor.Callback {\n\nAnd that is how we listen for events from the Interactor. This is the code from the **MainPresenter**:\n\n @Override \n public void onMessageRetrieved(String message) {\n mView.hideProgress(); \n mView.displayWelcomeMessage(message);\n } \n\n @Override \n public void onRetrievalFailed(String error) {\n mView.hideProgress(); \n onError(error);\n }\n\nThe View seen in these snippets is our **MainActivity** which implements this interface:\n\n public class MainActivity extends AppCompatActivity implements MainPresenter.View {\n\nWhich is then responsible for displaying the welcome message, as seen here:\n\n @Override \n public void displayWelcomeMessage(String msg) {\n mWelcomeTextView.setText(msg);\n }\n\nAnd that is pretty much it for the presentation layer.\n\n## Writing the storage layer\n\nThis is where our repository gets implemented. All the database specific code should come here. The repository pattern just abstracts where the data is coming from. Our main business logic is oblivious to the source of the data — be it from a database, a server or text files.\n\nFor complex data you can use [**ContentProviders**](http://developer.android.com/guide/topics/providers/content-providers.html) or ORM tools such as [**DBFlow**](https://github.com/Raizlabs/DBFlow). If you need to retrieve data from the web then [**Retrofit**](http://square.github.io/retrofit/) will help you. If you need simple key-value storage then you can use [**SharedPreferences**](http://developer.android.com/training/basics/data-storage/shared-preferences.html). You should use the right tool for the job.\n\nOur database is not really a database. It is going to be a very simple class with some simulated delay:\n\n public class WelcomeMessageRepository implements MessageRepository { \n @Override \n public String getWelcomeMessage() {\n String msg = \"Welcome, friend!\"; // let's be friendly\n\n // let's simulate some network/database lag \n try { \n Thread.sleep(2000);\n } catch (InterruptedException e) {\n e.printStackTrace();\n } \n\n return msg;\n } \n }\n\nAs far as our **WelcomingInteractor** is concerned, the lag might be because of the real network or any other reason. It doesn’t really care what is underneath the **MessageRepository** as long as it implements that interface.\n\n### Summary\n\nThis example can be accessed on a git repository [here](https://github.com/dmilicic/Android-Clean-Boilerplate/tree/example). The summarized version of calls by class is as follows:\n\n> **MainActivity ->MainPresenter -> WelcomingInteractor -> WelcomeMessageRepository -> WelcomingInteractor -> MainPresenter -> MainActivity**\n\nIt is important to note the flow of control:\n\n> **Outer — Mid — Core — Outer — Core — Mid — Outer**\n\nIt is common to access the outer layers multiple times during a single use case. In case you need to display something, store something and access something from the web, your flow of control will access the outer layer at least three times.\n\n## Conclusion\n\nFor me, this has been the best way to develop apps so far. Decoupled code makes it easy to focus your attention on specific issues without a lot of bloatware getting in the way. After all, I think this is a pretty [SOLID](https://en.wikipedia.org/wiki/SOLID_%28object-oriented_design%29) approach but it does take some time getting used to. That was also the reason I wrote all of this, to help people understand better with step-by-step examples. If anything remains unclear I will gladly address those concerns as your feedback is very important. I would also very much like to hear what can be improved. A healthy discussion would benefit everyone.\n\nI have also built and open sourced a sample cost tracker app with Clean to showcase how the code would look like on a real app. It’s nothing really innovative in terms of features but I think it covers what I talked about well with a bit more complex examples. You can find it here: [**Sample Cost Tracker App**](https://github.com/dmilicic/android-clean-sample-app)\n\nAnd again, that sample app was built upon the _Clean starter pack_ that can be found here: [**Android Clean Boilerplate**](https://github.com/dmilicic/Android-Clean-Boilerplate)\n\n"
},
{
"path": "TODO/a-dramatic-tour-through-pythons-data-visualization-landscape-including-ggplot-and-altair.md",
"content": "> * 原文地址：[A Dramatic Tour through Python’s Data Visualization Landscape (including ggplot and Altair)](https://dansaber.wordpress.com/2016/10/02/a-dramatic-tour-through-pythons-data-visualization-landscape-including-ggplot-and-altair/)\n* 原文作者：[Dan Saber](https://dansaber.wordpress.com/about-me/)\n* 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)\n* 译者：[cdpath](https://github.com/cdpath)\n* 校对者：[Gran](https://github.com/Graning), [Freya Yu](https://github.com/ZiXYu)\n\n# Python 数据可视化概览（涵盖 ggplot 和 Altair）\n\n\n\n\n\n### 伙计，为什么还要去尝试？\n\n* * *\n\n我最近偶然发现了 Brian Granger 和 Jake VanderPlas 开发的 Altair，一个非常有潜力的新可视化库。Altair 似乎非常适合用来表达 Python 对 ggplot 的羡慕，而它采用了 JavaScript 的 Vega-Lite 语法，这意味着后者开发的新功能（比如提示框和缩放）都能被 Altair 所用，而且看样子是免费的！\n\n我甚至是太喜欢 Altair 了，都想把本文的主题改成: **「嘿，用 Altair 吧。」**\n\n不过我随后开始反思自以为更 Pythonic 的可视化习惯，在这相当痛苦的自我反思中，我发现自己错得一塌糊涂：为了应对手头的工作我用了一大堆工具还有乱七八糟的技术，通常是随便选一个第一个能完成工作的库 1。 \n\n这并不好。俗话说得好，「未经校对的绘图不值得导出 PNG 文件」。\n\n于是我借着探索 Altair 的机会回过头来研究了 Python 可视化统计工具是如何组织在一起的。希望我的调查结果对你也有用。\n\n### 我们从哪里开始呢？\n\n* * *\n\n本文用别出心裁的对比手法写成：「你需要做某事。你要怎么用 matplotlib，pandas，Seaborn，ggplot 或者 Altair 来实现呢？」通过这些不同的实现方式，我们就可以得出它们的优点，缺点，还有其他收获 —— 至少这么多代码说不定啥时候有用呢。\n\n（警告：所有这一切都会以双幕剧的形式呈现）\n\n### 主角们（按主观复杂性递减排列）\n\n* * *\n\n首先，欢迎我们的朋友们2:\n\n**[matplotlib](http://matplotlib.org/)**\n\nmatplotlib 就像八百磅的大猩猩一样「重」，最好躲着它走，除非真的需要它的力量，比如需要定制化绘图或者提供可以出版的图像。\n\n（我们将会看到，当谈到统计可视化时，正确的思路可能是：「尽量用熟悉的工具（比如下面要讲到的四个库）把活干完，剩下的再用 matplotlib」。）\n\n**[pandas](http://pandas.pydata.org/pandas-docs/stable/visualization.html)**\n\n为数据框而生；坚持使用绘图便利函数，而这可以说比被取代的 matplotlib 代码好用多了。- 被拒的 pandas 广告语。\n\n（花边新闻：pandas 项目组肯定有些可视化迷，因为它包含了诸如 RadViz 图和 Andrews 曲线这类其他库没有的东西。）\n\n**[Seaborn](https://stanford.edu/~mwaskom/software/seaborn/)**\n\nSeaborn 一直是我最核心的统计可视化库，它这样自我总结的：\n\n**如果说 matplotlib 试图让简单的更简单，让难的变得可行，那么 Seaborn 就是试图让虽难却定义精良的部分也变得简单。**\n\n**[yhat’s ggplot](https://github.com/yhat/ggplot)**\n\nggplot 是出色的声明式 ggplot2 的 Python 实现。它不仅仅「逐一复刻」了 ggplot2 的特性，还有一些共有的强大特性。（对业余的 R 语言用户而言，重要的组件似乎应有尽有。）\n\n**[Altair](https://github.com/ellisonbg/altair)**\n\n新成员 Altair 是「声明式统计可视化库」，有着极其好用的 API。\n\n好极了。既然大伙都到了还做了自我介绍，我们开始尴尬的晚宴对话吧。我们的演出叫……\n\n## Python 可视化库小商店（每个库演的就是自己）\n\n* * *\n\n### 第一幕：线和点\n\n* * *\n\n（在第一场，我们要处理的是整洁数据集 `ts`。它有三列：`dt`（存日期），`value` （存值）和 `kind` （有四个不同的**水平**：A，B，C 和 D）。数据长这个样子：）\n\n\n||dt|kind|value|\n|---|---|---|---|\n|0|2000-01-01|A|1.442521|\n|1|2000-01-02|A|1.981290|\n|2|2000-01-03|A|1.586494|\n|3|2000-01-04|A|1.378969|\n|4|2000-01-05|A|-0.277937|\n\n\n\n#### 第一场：如何在一张图上画多个时间序列？\n\n* * *\n\n**matplotlib**: 哈！哈哈！不能再简单了。虽然我可以用很多复杂的方式搞定这个，不过我明白你们的笨脑子是无法理解其中的精妙的。所以我退而求其次给你们展示两个简单的方法。第一个方法，我循环使用你们虚构的矩阵，我相信你们这些人把它叫做「数据框」，取其子集传给相关的时间序列。然后调用 `plot` 方法，传入子集中的相关列。\n\n``` python\n# MATPLOTLIB\nfig, ax = plt.subplots(1, 1,\n figsize=(7.5, 5))\n\nfor k in ts.kind.unique():\n tmp = ts[ts.kind == k]\n ax.plot(tmp.dt, tmp.value, label=k)\n\nax.set(xlabel='Date',\n ylabel='Value',\n title='Random Timeseries')\n\nax.legend(loc=2)\nfig.autofmt_xdate()\n```\n\n\n\n\n**MPL**: 然后我把它转换成数组（给 pandas 做手势），让他对「数据框」做轴向旋转（pivot），结果是这样的：\n\n``` python\n# the notion of a tidy dataframe matters not here\ndfp = ts.pivot(index='dt', columns='kind', values='value')\ndfp.head()\n```\n\n\n|kind|A|B|C|D|\n|---|---|---|---|---|\n|dt|||||\n|2000-01-01|1.442521|1.808741|0.437415|0.096980|\n|2000-01-02|1.981290|2.277020|0.706127|-1.523108|\n|2000-01-03|1.586494|3.474392|1.358063|-3.100735|\n|2000-01-04|1.378969|2.906132|0.262223|-2.660599|\n|2000-01-05|-0.277937|3.489553|0.796743|-3.417402|\n\n\n\n\n\n\n**MPL**: 将数据转换为有四个列的索引 —— 每一列都对应待画的线 —— 我用一步就可以搞定这一切（比如，调用一次 `plot` 函数）。\n\n``` python\n# MATPLOTLIB\nfig, ax = plt.subplots(1, 1,\n figsize=(7.5, 5))\n\nax.plot(dfp)\n\nax.set(xlabel='Date',\n ylabel='Value',\n title='Random Timeseries')\n\nax.legend(dfp.columns, loc=2)\nfig.autofmt_xdate()\n```\n\n\n\n**pandas (看上去怯生生的):** 这很不错，Mat。真的不错。谢谢你提到我。我也能用同样的方法搞定这个 —— 希望可以同样出色（微微一笑）。\n\n\n``` python\n# PANDAS\nfig, ax = plt.subplots(1, 1,\n figsize=(7.5, 5))\n\ndfp.plot(ax=ax)\n\nax.set(xlabel='Date',\n ylabel='Value',\n title='Random Timeseries')\n\nax.legend(loc=2)\nfig.autofmt_xdate()\n```\n\n**pandas**: 结果看上去完全一样，所以我就不展示了。\n\n**Seaborn（抽着烟，调整着贝雷帽）**: 唔。看上去区区一个折线图就让你们做了这么多数据处理。我是说，for 循环和轴向旋转？这不是九十年代的微软 Excel（译者注：pivot table 即 Excel 的数据透视表）。我在国外学到一个叫做 FacetGrid 的东西。你们大概从来没有听说过……\n\n``` python\n# SEABORN\ng = sns.FacetGrid(ts, hue='kind', size=5, aspect=1.5)\ng.map(plt.plot, 'dt', 'value').add_legend()\ng.ax.set(xlabel='Date',\n ylabel='Value',\n title='Random Timeseries')\ng.fig.autofmt_xdate()\n```\n\n\n\n**SB:** 看懂了吗？直接给 FacetGrid 传入未处理的整洁数据。在这里，将 `kind` 赋给 `hue` 参数的意思是绘出四条不同的线 —— 每条线对应 `kind` 的一个水平。而真正画出这四条线，得把 FacetGrid 映射到到庸俗的（**示意 matplotlib**） plot 函数，再传入 `x` 和 `y` 参数。显然，这些东西得牢记，就像添加图例一样，但是也不会太难。好吧，对有些人来说没有什么东西有挑战性……\n\n**ggplot**: 哇，赞！我的方法和她差不多，但是我做起来更像我的大哥。你们听过他吗？他超级酷 ——\n\n**SB**: 谁邀请了这个孩子？\n\n**GG**: 快来看看！\n\n``` python\n# GGPLOT\nfig, ax = plt.subplots(1, 1, figsize=(7.5, 5))\n\ng = ggplot(ts, aes(x='dt', y='value', color='kind')) + \\\n geom_line(size=2.0) + \\\n xlab('Date') + \\\n ylab('Value') + \\\n ggtitle('Random Timeseries')\ng\n```\n\n\n\n**GG (拿起 Hadley Wickham 写的 《ggplot2》读出声来)**: 每一幅图都由数据（比如 `ds`），图形映射（比如 `x`，`y` 和 `color`）和几何图形（比如 `geom_line`）组成，而后者将数据和图形映射转换成真正的可视化。\n\n**Altair**: 没错，我也是这么做的。\n\n``` python\n# ALTAIR\nc = Chart(ts).mark_line().encode(\n x='dt',\n y='value',\n color='kind'\n)\nc\n```\n\n\n\n**ALT**: 给我的 Chart 类同样的数据，告诉它你要哪种可视化：这里就是 `mark_line`。然后指定想要的图形映射：x 轴是 `data`，y 轴是 `value`；因为我们想要按 `kind` 分组，所以把 `kind` 传给 `color`。就跟你一样，GG（**拨乱 GG 的头发**）。哦，这样一来，要用你们都用的配色方案也轻而易举了：\n\n``` python\n# ALTAIR\n\n# cp corresponds to Seaborn's standard color palette\nc = Chart(ts).mark_line().encode(\n x='dt',\n y='value',\n color=Color('kind', scale=Scale(range=cp.as_hex()))\n)\nc\n```\n\n\n\n**MPL 害怕又惊讶地盯着**\n\n#### 第一场的分析\n\n* * *\n\n除了混蛋的 matplotlib 3，还有一些要点值得注意。\n\n* 用 matplotlib 和 pandas 的时候，要么得多次调用 `plot` 函数（比如每个 for 循环里面），要么得对数据进行处理才能更好适用于 plot 函数（比如轴向旋转）。（也就是说我们在第二场还会见到其他的技术。）\n\n* （说实话，我从来不觉得这是个大问题，直到我遇到了 R 语言使用者。他们看到我都惊呆了。）\n\n* 与之相反，ggplot 和 Altair 用的是类似声明式「图形语法」的方法去解决这种简单问题：给「主」函数 （ggplot 中的 `ggplot` 和 Altair 中的 `Chart`）传入整洁的数据集。然后定义一组图形映射（x，y 和 color）来说明数据该如何映射到图形上（比如视觉标记做了很多努力以便更好地传达信息）。只要使用这些图形（ggplot 的 `geom_line` 和 Altair 的 `mark_line`），数据和图形映射就会被转换成便于人类理解的视觉形象，这样一来就大功告成了。\n\n* 聪明得话，你可以（甚至应该）透过同样的视角看待 Seaborn 的 FacetGrit；但是并不是完全一致。FacetGrid 除了数据集之外还需要**预先**提供 `hue` 参数，然后才需要 x 和 y 参数。这种映射并不是图形映射，只是函数映射：数据集中的每一个 `hue` 都会调用 matplotlib 的 plot 函数，`dt` 和 `value` 分别传给 x 和 y 参数。for 循环是不可见的底层实现。\n\n* 也就是说，尽管图形映射需要两个独立的步骤，比起命令式的思维方式，我还是更喜欢图形映射（至少在画图时如此）。\n\n**数据说明**\n\n（在第二场到第四场，我们会处理著名的「鸢尾花」数据集（在代码中用 `df` 表示）。它包含了四个数字列，对应不同的测量，还有一个类别列，表明它是三种鸢尾花中的哪一种。下面是预览：\n\n\n|花瓣长度|花瓣宽度|萼片长度|萼片宽度|品种|\n|---|---|---|---|---|\n|0|1.4|0.2|5.1|3.5|setosa|\n|1|1.4|0.2|4.9|3.0|setosa|\n|2|1.3|0.2|4.7|3.2|setosa|\n|3|1.5|0.2|4.6|3.1|setosa|\n|4|1.4|0.2|5.0|3.6|setosa|\n\n#### 第二场：如何画散点图？\n\n* * *\n\n**MPL（看上去有点震惊）**: 我是说，你可以继续用 for 循环，当然了。这样也没什么问题。当然。懂了吗？（**压低声音小声说**）只要记得显式地设定好颜色变量，不然所有的点都是蓝的……\n\n``` python\n# MATPLOTLIB\nfig, ax = plt.subplots(1, 1, figsize=(7.5, 7.5))\n\nfor i, s in enumerate(df.species.unique()):\n tmp = df[df.species == s]\n ax.scatter(tmp.petalLength, tmp.petalWidth,\n label=s, color=cp[i])\n\nax.set(xlabel='Petal Length',\n ylabel='Petal Width',\n title='Petal Width v. Length -- by Species')\n\nax.legend(loc=2)\n```\n\n\n\n**MPL**: 可是，呃，（**假装充满自信**）我有个更好的主意！看这个：\n\n``` python\n# MATPLOTLIB\nfig, ax = plt.subplots(1, 1, figsize=(7.5, 7.5))\n\ndef scatter(group):\n plt.plot(group['petalLength'],\n group['petalWidth'],\n 'o', label=group.name)\n\ndf.groupby('species').apply(scatter)\n\nax.set(xlabel='Petal Length',\n ylabel='Petal Width',\n title='Petal Width v. Length -- by Species')\n\nax.legend(loc=2)\n```\n\n\n\n**MPL**: 我在这定义了 `scatter` 函数。它用 pandas 的 groupby 对象得到分组，然后在 x 轴上画出花瓣长度，y 轴则是花瓣宽度。每组都如此处理一番！厉害吧！\n\n**P**: 真不错，Mat！真不错！基本上和我的方法差不多，所以我就坐这里不展示了。\n\n**SB (咧嘴笑)**: 这次怎么没用轴向旋转？\n\n**P**: 嗯，这个例子里要用轴向旋转的话比较复杂。因为不像处理时序数据一样有一个通用的索引，所以……\n\n**MPL**: 嘘！我们没必要跟她解释。\n\n**SB**: 随便你了。不管怎样，在我看来这个问题和上一个没有什么区别。还是构建一个 FacetGrid，只是这次将 `plt.plot` 换成 `plt.scatter`。\n\n``` python\n# SEABORN\ng = sns.FacetGrid(df, hue='species', size=7.5)\ng.map(plt.scatter, 'petalLength', 'petalWidth').add_legend()\ng.ax.set_title('Petal Width v. Length -- by Species')\n```\n\n\n\n**GG**: 对！对！就是这样！我的写法就是把 `geom_line` 换成 `geom_point`！\n\n``` python\n# GGPLOT\ng = ggplot(df, aes(x='petalLength',\n y='petalWidth',\n color='species')) + \\\n geom_point(size=40.0) + \\\n ggtitle('Petal Width v. Length -- by Species')\ng\n```\n\n\n\n**ALT (一脸茫然)**: 是的，只要把 `mark_line` 换成 `mark_point`。\n\n``` python\n# ALTAIR\nc = Chart(df).mark_point(filled=True).encode(\n x='petalLength',\n y='petalWidth',\n color='species'\n)\nc\n```\n\n\n\n#### 第二场的分析\n\n* * *\n\n* 到这儿，用数据构建 API 的潜在难题变得清晰了。尽管 pandas 的轴向旋转处理时序数据时非常方便，处理这个例子却力不从心了。\n\n* 公平地说，`group by` 方法是可以推导出来的，而 for 循环就更容易推出来了；但是这样一来就要有更多自定义的逻辑，也就意味着更多的工作：Seaborn 已经好心帮你做好了，不然你还得自己造轮子。\n\n* 反过来说，Seaborn，ggplot 和 Altair 都明白散点图在很多方面就是没有假设的折线图（尽管这些假设可能是无害的）。因此，第一场中的代码大都可以重用，但是得用新的几何对象（ggplot 和 Altair 分别用的是 `geom_point` 和 `mark_point`）或者新的方法（比如 Seaborn 的 `plt.scatter`）。在这个节点上，没有哪个库比其他库更方便，尽管我爱 Altair 优雅的简洁。\n\n#### 第三场：如何画分面的散点图？\n\n* * *\n\n**MPL**: 那么，嗯，一旦你掌握了 for 循环 —— 显然我就掌握了 —— 只需要简单调整一下之前的代码就行了。我用 `subplot` 方法画了三个轴，而不是一个。接下来就跟以前一样遍历一遍，用类似取数据子集的方法来取相关的 Axes 对象的子集。\n\n（**重拾自信）我敢打赌你们各位没有更简单的方法！（举起双臂，差点打到了 pandas）**\n\n``` python\n# MATPLOTLIB\nfig, ax = plt.subplots(1, 3, figsize=(15, 5))\n\nfor i, s in enumerate(df.species.unique()):\n tmp = df[df.species == s]\n\n ax[i].scatter(tmp.petalLength, tmp.petalWidth, c=cp[i])\n\n ax[i].set(xlabel='Petal Length',\n ylabel='Petal Width',\n title=s)\n\nfig.tight_layout()\n```\n\n\n\n**SB 和笑起来的 ALT 交换了目光；GG 仿佛听到笑话了笑了起来**\n\n**MPL**: 怎么啦？！\n\n**Altair**: 老兄，看看你的 x 轴和 y 轴。所有图像的坐标轴范围都不一样。\n\n**MPL (脸红了)**: 呃，是，当然啊。我就是想看看你们有没有注意听我说话。你当然可以在 `subplot` 函数中指定坐标轴范围，保证所有的子图坐标轴范围是统一的。\n\n``` python\n# MATPLOTLIB\nfig, ax = plt.subplots(1, 3, figsize=(15, 5),\n sharex=True, sharey=True)\n\nfor i, s in enumerate(df.species.unique()):\n tmp = df[df.species == s]\n\n ax[i].scatter(tmp.petalLength,\n tmp.petalWidth,\n c=cp[i])\n\n ax[i].set(xlabel='Petal Length',\n ylabel='Petal Width',\n title=s)\n\nfig.tight_layout()\n```\n\n\n\n**P（叹气）**: 我也是这么做的。跳过我吧。\n\n**SB**: 改写 FacetGrid 然后用在这个例子上很简单。就像使用 `hue` 变量一样，我们可以简单加一个 `col` 变量（比如 colum）。这会告诉 FacetGrid 不仅给每个种类一个唯一的颜色，还把每个种类都画在唯一的子图上，按列排列。（只要将 `col` 变量换成 `row` 就可以按行排列。）\n\n``` python\n# SEABORN\ng = sns.FacetGrid(df, col='species', hue='species', size=5)\ng.map(plt.scatter, 'petalLength', 'petalWidth')\n```\n\n\n\n**GG:** 哦，这和我的做法不同（**再一次拿起《ggplot2》开始读**）。看，分面和图形映射本质上是两个不同的步骤，我们不应该一时疏忽把它们混为一谈。因此，我们接着用之前的代码这次加上 `facet_grid` 层，也就是显式地用类别进行分面。（**开心地合上书**）至少我大哥是这么说的！你们听到他了吗？在书里。他真酷啊4。\n\n``` python\n# GGPLOT\ng = ggplot(df, aes(x='petalLength',\n y='petalWidth',\n color='species')) + \\\n facet_grid(y='species') + \\\n geom_point(size=40.0)\ng\n```\n\n\n\n**ALT****:** 我这里采用更具 Seaborn 风格的方法。具体地说，我给编码函数加了一个 `column` 参数。也就是说我也做了一些新工作：第一，虽然 `column` 参数可以接受一个简单的字符串变量，实际上我传给它的是 Column 对象，如此我可以自定义标题了。第二，我用了自定义的 `configure_cell` 方法，如果不用的话子图会变得特别巨大。\n\n``` python\n# ALTAIR\nc = Chart(df).mark_point().encode(\n x='petalLength',\n y='petalWidth',\n color='species',\n column=Column('species',\n title='Petal Width v. Length by Species')\n)\nc.configure_cell(height=300, width=300)\n```\n\n\n\n#### 第三场的分析\n\n* * *\n\n* matplotlib 说得很清楚：这个例子中，他的代码根据分类对数据进行分面的思路和上面的其他方案是一样的；假如你的脑袋可以搞清楚那些 for 循环的话，你可以再试试下面这段代码。但是我可没有让他再搞出更复杂的东西出来，比如 2 x 3 的网格。不然他就得像下面这样干：\n\n``` python\n# MATPLOTLIB\nfig, ax = plt.subplots(2, 3, figsize=(15, 10), sharex=True, sharey=True)\n\n# this is preposterous -- don't do this\nfor i, s in enumerate(df.species.unique()):\n for j, r in enumerate(df.random_factor.sort_values().unique()):\n tmp = df[(df.species == s) & (df.random_factor == r)]\n\n ax[j][i].scatter(tmp.petalLength,\n tmp.petalWidth,\n c=cp[i+j])\n\n ax[j][i].set(xlabel='Petal Length',\n ylabel='Petal Width',\n title=s + '--' + r)\n\nfig.tight_layout()\n```\n\n\n\n* 为了用正规的可视化表达式**: 呸**。如果用 Altair 的话一切都变得非常简单。\n\n``` python\n# ALTAIR\nc = Chart(df).mark_point().encode(\n x='petalLength',\n y='petalWidth',\n color='species',\n column=Column('species',\n title='Petal Width v. Length by Species'),\n row='random_factor'\n)\nc.configure_cell(height=200, width=200)\n```\n\n\n\n* 只比我们刚才用过的 `encode` 函数多一个变量！\n\n* 幸运的是，把分面构建到可视化库框架中的好处是显而易见的。\n\n### 第二幕：分布和条形图\n\n* * *\n\n#### 第四场：怎么可视化分布？\n\n* * *\n\n**MPL （信心明显不足了）**: 好吧，如果我们要画箱线图——我们真的要箱线图吗？——我知道怎么画。不过非常愚蠢；你肯定不会喜欢。不过我给 `boxplot` 方法传入一个数组组成的数组，每个数组就都会得到一个箱线图。你可能需要手动标注 X 轴的刻度。\n\n``` python\n# MATPLOTLIB\nfig, ax = plt.subplots(1, 1, figsize=(10, 10))\n\nax.boxplot([df[df.species == s]['petalWidth'].values\n for s in df.species.unique()])\n\nax.set(xticklabels=df.species.unique(),\n xlabel='Species',\n ylabel='Petal Width',\n title='Distribution of Petal Width by Species')\n```\n\n\n\n**MPL:** 如果要画柱状图 —— 我们真的要画柱状图吗？ —— 我也有个方法可以用，你可以用之前提到的 for 循环或者 `group by`。\n\n``` python\n# MATPLOTLIB\nfig, ax = plt.subplots(1, 1, figsize=(10, 10))\n\nfor i, s in enumerate(df.species.unique()):\n tmp = df[df.species == s]\n ax.hist(tmp.petalWidth, label=s, alpha=.8)\n\nax.set(xlabel='Petal Width',\n ylabel='Frequency',\n title='Distribution of Petal Width by Species')\n\nax.legend(loc=1)\n```\n\n\n\n**P (看上去不同寻常的骄傲）**: 哈！哈哈哈哈！该我大显身手了！你们都觉得我一无是处，只是 `matplotlib` 的替罪羊。虽然我目前都只是套用他的 `plot` 方法，但我也拥有一些特殊的函数可以处理箱线图**和**柱状图。用他们来可视化分布简直就是小菜一碟！你只需要提供两个列名：第一，用来分组的列名；第二，待分布统计的列名。分别把它们传给 `by` 和 `column` 参数，图马上就画好了！\n\n``` python\n# PANDAS\nfig, ax = plt.subplots(1, 1, figsize=(10, 10))\n\ndf.boxplot(column='petalWidth', by='species', ax=ax)\n```\n\n\n\n``` python\n# PANDAS\nfig, ax = plt.subplots(1, 1, figsize=(10, 10))\n\ndf.hist(column='petalWidth', by='species', grid=None, ax=ax)\n```\n\n\n\n**GG和ALT举手击掌然后祝贺P；高呼「棒极了！」，「就该这样！」，「就这么干！」**\n\n**SB (假装很热情)**: 喔喔喔。很赞。同时呢，分布对我非常重要，所以我为它准备了一些特殊方法。比如，我的 `boxplot` 方法只需要 x 变量、y 变量和数据就可以得到这个：\n\n``` python\n# SEABORN\nfig, ax = plt.subplots(1, 1, figsize=(10, 10))\n\ng = sns.boxplot('species', 'petalWidth', data=df, ax=ax)\ng.set(title='Distribution of Petal Width by Species')\n```\n\n\n\n**SB:** 这个图不错吧，我是说有人这么说过…… 不管了。我还有个特殊的分布方法叫 `distplot` 远不止条形图那么简单（傲慢的看了眼 pandas）。你可以用来画条形图，KDEs 和轴须图（rugplots） —— 甚至画在一起。比如把 `displot` 和 FacedGrid 结合起来，我就可以为每一种鸢尾花都画出直方轴须图：\n\n``` python\n# SEABORN\ng = sns.FacetGrid(df, hue='species', size=7.5)\n\ng.map(sns.distplot, 'petalWidth', bins=10,\n kde=False, rug=True).add_legend()\n\ng.set(xlabel='Petal Width',\n ylabel='Frequency',\n title='Distribution of Petal Width by Species')\n```\n\n\n\n**SB**: 不过…… 管他呢。\n\n**GG:** 这些只不过是新的几何对象！`GEOM_BOXPLOT` 来画箱线图，`GEOM_HISTOGRAM` 来画直方图！换用它俩就行了！（**绕着餐桌跑了起来**）\n\n``` python\n# GGPLOT\ng = ggplot(df, aes(x='species',\n y='petalWidth',\n fill='species')) + \\\n geom_boxplot() + \\\n ggtitle('Distribution of Petal Width by Species')\ng\n```\n\n\n\n``` python\n# GGPLOT\ng = ggplot(df, aes(x='petalWidth',\n fill='species')) + \\\n geom_histogram() + \\\n ylab('Frequency') + \\\n ggtitle('Distribution of Petal Width by Species')\ng\n```\n\n\n\n**ALT （看上去坚定又自信）**: 我要忏悔……\n\n**四周安静了下来 —— GG停了下来，把盘子撞到了地上。**\n\n**ALT：（沉重地喘气）** 我……我……我不会画箱线图。从来没学过怎么画，不过我相信我的源语言 JavaScript 的语法不支持箱线图肯定是有原因的。不过我会画直方图……\n\n``` python\n# ALTAIR\nc = Chart(df).mark_bar(opacity=.75).encode(\n x=X('petalWidth', bin=Bin(maxbins=30)),\n y='count(*)',\n color=Color('species', scale=Scale(range=cp.as_hex()))\n)\nc\n```\n\n\n\n**ALT**: 乍一看代码会觉得有点怪，但是不要担心。这里实际是在说：「嘿，直方图事实上就是条形图」。X 轴对应着 `bin`，我们可以用 `Bin` 类来定义；同时 y 轴对应到数据集里落到对应 Bin 的数据的数量。用 SQL 语言来说 y 就是 `count(*)`。\n\n#### 第四场的分析\n\n* * *\n\n* 在工作中，我的确发现 pandas 的便利函数很方便，但是我得承认，脑子里总要惦记着 pandas 给箱线图和直方图提供了 `by` 参数，却没有给折线图提供该参数。\n\n* 我把第一场和第二场分开是有原因的，其中最重要的原因是：从第二场开始 matplotlib 变得比较吓人。比如说要画箱线图还得记着用一个完全独立的界面，这根本不适合我。\n\n* 说起第一场和第二场，有一个有趣的小细节：其实我一开始是因为 Seaborn 有丰富的「专利级」可视化函数（比如，distplot，小提琴图，回归图等等）而从 matplotlib/pandas 转移阵营的。但我后来喜欢上了 FacetGrid，我必须说这些第二场中的函数是 Seaborn 的杀手级应用。只要我还在画图我就离不开它们。\n\n* （此外，我需要说明：Seaborn 提供了许多被小型库所忽略的优秀可视化函数；如果你碰巧需要一二，那么 Seaborn 是你唯一的选择。）\n\n* 这些例子真的可以让你领会到 ggplot 图形对象系统的力量。用基本相同的代码（更重要的是连思路都基本相同），就可以画出截然不同的图来。还不用调用不同的函数，只是改变图形映射呈现给视图的方式就行了，比如换一下几何对象。\n\n* 类似的，哪怕在第二场，Altair 的 API 也有非同寻常的一致性。哪怕对于那些看上去非常另类的操作，Altair 的 API 也非常简单、优雅，令人印象深刻。\n\n**数据说明**\n\n（在最后一幕，我们会处理「泰坦尼克」，另一个著名的整洁数据集（代码中仍然用 `df` 来表示）。下面是预览……）\n\n|survived|pclass|sex|age|fare|class|\n|---|---|---|---|---|---|\n|0|0|3|male|22.0|7.2500|Third|\n|1|1|1|female|38.0|71.2833|First|\n|2|1|3|female|26.0|7.9250|Third|\n|3|1|1|female|35.0|53.1000|First|\n|4|0|3|male|35.0|8.0500|Third|\n\n\n这个例子中，我们感兴趣的是看看每个客舱等级的平均费用是否和逃生率相关。显然，在 pandas 中我们可以这样写：\n\n``` python\ndfg = df.groupby(['survived', 'pclass']).agg({'fare': 'mean'})\ndfg\n```\n\n\n\n\n\n\n\n\n | \n | \nfare | \n
\n\n| survived | \npclass | \n | \n
\n\n\n\n| 0 | \n1 | \n64.684008 | \n
\n\n| 2 | \n19.412328 | \n
\n\n| 3 | \n13.669364 | \n
\n\n| 1 | \n1 | \n95.608029 | \n
\n\n| 2 | \n22.055700 | \n
\n\n| 3 | \n13.694887 | \n
\n\n
\n\n\n…… 不过这有什么意思呢？我写的可是数据可视化文章，所以用条形图再试一次！\n\n#### 第五场：如何画条形图？\n\n* * *\n\n**MPL (表情严肃)**: 一句话也没说。\n\n``` python\n# MATPLOTLIB\n\ndied = dfg.loc[0, :]\nsurvived = dfg.loc[1, :]\n\n# more or less copied from matplotlib's own\n# api example\nfig, ax = plt.subplots(1, 1, figsize=(12.5, 7))\n\nN = 3\n\nind = np.arange(N) # the x locations for the groups\nwidth = 0.35 # the width of the bars\n\nrects1 = ax.bar(ind, died.fare, width, color='r')\nrects2 = ax.bar(ind + width, survived.fare, width, color='y')\n\n# add some text for labels, title and axes ticks\nax.set_ylabel('Fare')\nax.set_title('Fare by survival and class')\nax.set_xticks(ind + width)\nax.set_xticklabels(('First', 'Second', 'Third'))\n\nax.legend((rects1[0], rects2[0]), ('Died', 'Survived'))\n\ndef autolabel(rects):\n # attach some text labels\n for rect in rects:\n height = rect.get_height()\n ax.text(rect.get_x() + rect.get_width()/2., 1.05*height,\n '%d' % int(height),\n ha='center', va='bottom')\n\nax.set_ylim(0, 110)\n\nautolabel(rects1)\nautolabel(rects2)\n\nplt.show()\n```\n\n\n\n**其他人都开始摇头**\n\n**P**: 我得先对数据进行一些处理 —— 也就是 `group by` 和 `pivot` —— 处理完就可以用非常帅气的条形图方法了，比上面这些简单得多！哇，我现在自信多了，我把其他人都比下去了！5\n\n``` python\n# PANDAS\nfig, ax = plt.subplots(1, 1, figsize=(12.5, 7))\n# note: dfg refers to grouped by\n# version of df, presented above\ndfg.reset_index().\\\n pivot(index='pclass',\n columns='survived',\n values='fare').plot.bar(ax=ax)\n\nax.set(xlabel='Class',\n ylabel='Fare',\n title='Fare by survival and class')\n```\n\n\n\n**SB:** 我恰好又认为这类工作非常重要。鉴于此，我使用了特殊的 `factorplot` 函数来帮助我：\n\n``` python\n# SEABORN\ng = sns.factorplot(x='class', y='fare', hue='survived',\n data=df, kind='bar',\n order=['First', 'Second', 'Third'],\n size=7.5, aspect=1.5)\ng.ax.set_title('Fare by survival and class')\n```\n\n\n\n**SB**: 跟之前一样，先将未处理过的数据传给数据框，再搞明白自己要按照什么进行分组，这里就是 `class` 和 `survived`，它们对应 `x` 和 `hue` 变量。然后搞明白要对哪个数据列进行摘要统计，这里就是 `fare`，对应到 `y` 变量。默认的摘要统计方法是求平均数，不过 `factorplot` 提供了 `estimator` 参数，可以通过它指定想要的函数，比如求和，标准差，中位数等等。而选择的函数会决定每个柱的高度。\n\n当然，有很多方法可以可视化这个信息，条形图只有一种。同样我还提供了 `kind` 参数用来指定不同的可视化方法。\n\n最后，**还有人**比较在意统计确定性，所以我会默认给你加上误差线，这样可以看出不同等级舱位的平均费用和生存率是否有关系。\n\n（**压低声音说**）希望你们做得比我还好\n\n**ggplot2 停下兰博基尼，走了进来**\n\n**ggplo2**: 嘿，你们看到 ——\n\n**GG**: 嘿，大哥。\n\n**GG2**: 嘿，小家伙。我们得走了。\n\n**GG**: 等一下，我得马上把这个条形图画好，不过遇到麻烦了。你会怎么做呢？\n\n**GG2 (阅读手册)**_: 哦，就像这样：\n\n``` python\n# GGPLOT2\n\n# R 语言中你得这样写\n\nggplot(df, aes(x=factor(survived), y=fare)) +\n stat_summary_bin(aes(fill=factor(survived)),\n fun.y=mean) +\n facet_wrap(~class)\n\n# 天啊，ggplot2 可真棒\n```\n\n\n\n\n**GG2**: 看懂了吗？你要像我之前说的一样定义好图形映射，不过得把 `y` 映射到平均费用上。这就得叫我的好兄弟 `stat_summary_bin` 帮忙了，我只要把 `mean` 传给 `fun.y` 参数就行了。\n\n**GG （惊讶地睁大眼睛）**: 哦，呃…… 我发现我还没有 `stat_summary_bin` 呢。我想想 —— pandas 你能帮帮我吗？\n\n**P**: 呃，当然可以。\n\n**GG**: 好诶！\n\n``` python\n# GGPLOT\ng = ggplot(df.groupby(['class', 'survived']).\\\n agg({'fare': 'mean'}).\\\n reset_index(), aes(x='class',\n fill='factor(survived)',\n weight='fare',\n y='fare')) + \\\n geom_bar() + \\\n ylab('Avg. Fare') + \\\n xlab('Class') + \\\n ggtitle('Fare by survival and class')\ng\n```\n\n\n\n**GG2**: 噢，不完全是图形式语法，不过我觉得只要 Hadley 还没有发现，这样也能用…… 特别是你不应该在可视化之前就对数据进行汇总。我也不是特别懂这个上下文中 `weight` 是什么意思……\n\n**GG**: 是这样，我的条形图形对象默认会使用简单计数，所以如果没有 `weight` 的话所有柱子的高度都是 `1`。\n\n**GG2**: 噢，我懂了…… 我们以后再讨论吧。\n\n**GG 和 GG2 道别并离开了晚宴**\n\n**ALT**: 噢，现在**这**可是我的安身立命之道。非常简单。\n\n\n\n\n\n\n\n\n\n``` python\n# ALTAIR\nc = Chart(df).mark_bar().encode(\n x='survived:N',\n y='mean(fare)',\n color='survived:N',\n column='class')\nc.configure_facet_cell(strokeWidth=0, height=250)\n```\n\n\n\n\n\n\n\n\n\n\n\n**ALT:** 我希望下面的解释可以让所有的变量都非常直观：我想按幸存数来画平均船费，按舱位等级进行分面。写在代码里就是 `survived` 是 x 变量，`mean(fare)` 是 y 变量，而 `class` 是 column 变量。（我还指定了 color 变量这样画面可以热闹点。）\n\n但是，这里也有一些新东西值得注意。注意，我在 x 和 color 中的 `survivde` 字符串后面加了 `:N`。这是我给自己加的注释，意思就是「这是个名义上的变量。」我需要加这个注释是因为 `survived` 看上去像个定量变量，而定量变量有可能让绘的图变得有点丑。也不要太担心啦，这问题也不是每次都能碰到，只有个别情况下会有影响。比如，在上面的时间序列图中，如果我不知道 `dt` 是时间变量，我可能会假设它们只是名义变量，这样子就尴尬了（还好我在后面加上了 `:T`，这样就好了）。\n\n另外我还用了 `configure_facet_cell` 协议让三个子图看上去更加统一。\n\n#### 第五场的分析\n\n* * *\n\n* 这条不要想太多：我再也不用 matplotlib 画条形图了，明确地说，这不是我的个人观点！事实上 matplotlib 不会像其他的库那样对传入的数据进行推测。这有时候就意味着你得写严格的命令式代码。\n\n* （当然，正是这种数据不可知论让 matplotlib 成了其他 Python 可视化库的基础。）\n\n* 相对而言，在需要汇总统计和误差线的时候，我总是会用 Seaborn。\n\n* （这样比较可能有失公允，毕竟我选的例子仿佛是为 Seaborn 的一个函数量身定制的，不过我的工作中这种事遇到的太多了，而且，嘿，这篇文章可是我写的。）\n\n* 我不觉得 pandas 或 ggplot 的方式有什么特别的优势。\n\n* 不过，就 pandas 而言，哪怕是简单的条形图也必须得记得用 `group by` 和 `pivot`，这看上去有点傻。\n\n* 同样，我的确认为这是 yhat 开发的 ggplot 的一个重大缺陷，要找一个 `stat_summary` 的替代品从而让 ggplot 变得功能完善全面还有很长的路要走。\n\n* 同时，Altair 依然让我印象深刻！我被解决这个例子的代码的直观性震惊了。哪怕你从来没有见过 Altair，我也能想象有人是可以看懂的。正是它**这种**思考，代码和可视化的一一对应让它成了我最爱的库。\n\n### 最后的感想\n\n* * *\n\n你知道有时我觉得心怀感激非常重要：我们有非常多的可视化库可以选择，我痴迷于深入探索这一切！\n\n（是啊，这只是种逃避。）\n\n尽管我在 matplotlib 上遇到了点困难，它还是非常好玩的（每一部剧都要有搞笑的部分）。不仅仅是因为 matplotlib 是 pandas，Seaborn 和 ggplot 这些库的底层基础，而且是因为它给予你非常细粒度的控制权。虽然我没有说，但是我用 matplotlib 调整了所有非 Altair 所绘的图。但是，注意听，matplotlib 是纯声明式的，非常细节地指定可视化图像的方方面面简直是无趣的（看看条形图的例子吧）。\n\n的确，还有这种结果：「用统计可视化能力来评价 matplotlib 是不公平的，你这个刻薄的家伙。你在用它的一种使用案例来和其他库的主要使用案例进行比较。这些方法显然应该一起使用。你可以使用自己喜欢的方便的/陈述式表达层—— pandas，Seaborn，ggplot 或者将来的 Altair（下文会详述）—— 来做基础工作。然后用 matplotlib 完成那些非基础工作。如果你穷尽了其他库所能提供的一切也找不到想要的东西，你会很高兴可以看到能力无限的 matplotlib 就在你身边，你这个不知感恩的业余绘图的。」\n\n对于这些人我得说：是的！这很有道理，却脱离现实……，尽管只是**说**这些并不会撑起博文的大部分内容。\n\n再说，要是我就不会骂人。\n\n同时，轴向旋转（pivot）结合 pandas 处理时间序列图像非常好用。考虑到 pandas 的时间序列支持更加广泛，我还会接着用。此外，下一次如果要画 [RadViz](http://pandas.pydata.org/pandas-docs/stable/visualization.html#radviz) 图，我就知道该怎么做了。也就是说，尽管 pandas 的确在 matplotlib 的命令式范式的基础上提供了声明式语法（比如条形图），它仍然极具 matplotlib 风格。\n\n接着说：如果你想要一些更偏向统计的东西，用 Seaborn 吧（她的确在国外学到了很多很酷的东西）。学习她的 API —— factorplot, regplot, displot 等等等等 —— 然后爱上她。这时间花得值。至于 faceting，我觉得 FacetGrid 是个很有用的共犯（wtf！）；但是要不是我使用 Seaborn 已久，我可能更喜欢 ggplot 或 Altair。\n\n说到声明式的优雅，我一直深爱着 ggplot2 ，而且对 Python 的 ggplot 留下了深刻印象。我肯定会持续关注这个项目。（更自私地说，我希望它可以阻止那些使用 R 语言同事取笑我。）\n\n最后，如果你要做的事可以用 Altair 完成（抱歉了，箱线图使用者），用它吧！它提供的 API 异常简单又非常好用。如果还需要其他动力，想想这些：Altair 一个令人激动的特性是（除了即将到来的针对其底层 Vega-Lite 语法的改进之外），从技术的角度来说，它并不是可视化库。它输出符合 Vega-Lite 标准的 JSON 对象，可以用 IPython Vega 渲染得非常好。\n\n这有什么好激动的？好吧，在底层，所有的可视化看上去都是这个样子的：\n\n\n\n的确，看上去没什么好激动的，但是想想它的影响：如果其他的库对此感兴趣，他们可以直接开发新方法将这些 Vega-Lite JSON 对象转换成可视化结果。这就意味着可以用 Altair 搞定基本工作，然后深入底层用 matplotlib 获得更多控制。\n\n我已经对此期待万分了。\n\n说完这一切，再说几句告别的话：Python 可视化可比一个男人，女人或者尼斯湖水怪大多了。所以你得有选择地接受我刚才说的一切，不论是代码还是意见。记得：互联网上的一切都是谎言，该死的谎言和统计。\n\n希望你喜欢这个书呆子气十足的疯帽匠茶会，如果学到了什么东西你可以用到自己的工作中。\n\n照旧, 代码在 [GitHub](https://github.com/dsaber/py-viz-blog) 上。\n\n#### _**注释**_\n\n* * *\n\n首先，非常感谢订阅了 /u/counters 的 reddit 用户，你们在[这个评论](https://www.reddit.com/r/Python/comments/55k4ru/a_dramatic_tour_through_pythons_data/d8bawp4)留下了非常有价值的反馈和观点。我选取了一些放在了「最后的感谢」一节；不过我的表示远没有那么清楚，也就是说，看看那个评论吧；非常不错。\n\n其次，非常非常感谢 [Thomas Caswell](https://plus.google.com/+ThomasCaswell)，他写的关于 matplotlib 的特性的评论你绝对要读一读。这样你就能一睹远比我写的优雅得多的 matplotlib 代码了。\n\n1. 严格地说，这不是真的。我会尽量使用 Seaborn，只有在需要定制的时候才深入到 matplotlib。也就是说，我觉得这个前提是更强有力的陷阱，毕竟我们生活在后真相社会。\n\n2. 马上解释一下，你都对我愤怒了，所以允许我解释一二：我爱 bokeh 和 plotly。真的，我在提交分析之前最爱做的一件事就是把图像传给相关的 bokeh/plotly 函数，获得自由的交互性；但是我对它俩都不是特别熟，没法做更高级的操作。（说实话，这篇文章已经够长的了。）\n\n显然，如果你要的是交互可视化（而不是统计可视化），你可能就得找它俩了。\n\n3. **请**注意：这只是为了好玩。我**没有**用业余的拟人化手法评价任何库。我相信显示生活中的 matplotlib 是非常可爱的。\n\n4. 坦率地说，我不是**完全**确定单独进行分面操作是为了意识形态上的纯洁，或者只是单纯出于实用的考虑。虽然我的 ggplot 角色声称他是前者（他的理解来自匆匆读完的[这篇论文](http://vita.had.co.nz/papers/layered-grammar.pdf)），也有可能是因为（实际上） ggplot2 对分面的支持太丰富了，所以需要当作是独立的步骤。如果我描述的角色违反了任何图形语法规则，请务必告诉我，我会去找个新的。\n\n5. 绝对不是这个故事的道德准则。\n"
},
{
"path": "TODO/a-fairer-vue-of-react-comparing-react-to-vue-for-dynamic-tabular-data-part-2.md",
"content": ">* 原文链接 : [\"A fairer Vue of React\" - Comparing React to Vue for dynamic tabular data, part 2.](https://engineering.footballradar.com/a-fairer-vue-of-react-comparing-react-to-vue-for-dynamic-tabular-data-part-2/)\n* 原文作者 : [Max Willmott](https://engineering.footballradar.com/author/max-willmott/)\n* 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner)\n* 译者 : [wildflame](https://github.com/wildflame)\n* 校对者:[hikerpig](https://github.com/hikerpig), [JolsonZhu](https://github.com/JolsonZhu), [godofchina](https://github.com/godofchina)\n\n# 较为完整的 React.js / Vue.js 的性能比较 Part 1\n\n_有关第一部分的文章，请访问 [https://engineering.footballradar.com/from-a-react-point-of-vue-comparing-reactjs-to-vuejs-for-dynamic-tabular-data/](https://engineering.footballradar.com/from-a-react-point-of-vue-comparing-reactjs-to-vuejs-for-dynamic-tabular-data/) 。第一篇文章的实验结果已经被证明有错误，但是它为这篇文章奠定了基础。_\n\n五月23日，周一，我们发布了一篇关于比较 React 和 Vue 的性能的文章，其实验数据比较了二者谁更适合处理频繁更新的列表数据，特别是在对性能要求非常高的情况下。比方说我们手头上的一个足球雷达（Football Radar）的项目。\n\n最初我们对实验结果信心满满，但发现几个较为重要的错误后，才知道实验结果并非像我们预期的那样。我们非常感谢在 React 和 Vue 社区里的宝贵意见 —— 特别是 React 的核心工程师克里斯托弗(Christopher Chedeau) ([@vjeux](https://twitter.com/vjeux))，和 Vue 的创始人尤雨溪([@youyuxi](https://twitter.com/youyuxi))—— 因为你们，我们才能快速的锁定这次测试中的出现的问题，可以说是因祸得福，因为尽管错误被公开使我感到有一些小小的尴尬，但我的确学到了很多，所以衷心的感谢你们的讨论。\n\n鉴于我们已为第一篇文章做了许多改进，不能否定还有进一步改进的余地，因此这篇文章比起来，更像是一篇游记，而不是一个全面完善的结果。\n\n这里首先，我想重申一下这次实验的目的，然后讲一下我们所犯的错误 —— 掌声送给那些帮助我们改正错误的人 —— 最后我会公布更新的更公正的测试结果。\n\n## 测试\n\n这个实验的输出是一组足球比赛，每一个都一秒更新一次数据。在实验中，为了测试性能及可拓展性，我们会修改两组独立的数据：足球比赛数量和每次更新之间的延迟。\n\n\n\n为了模拟页面加载情况及测量其可扩展性，我们分别使用 Vue 和 React 测试了50，100，500场比赛，其延迟分别是100ms，1s，然后看其可拓展性如何。\n\n我们的第一次结果不太客观，显示 Vue 的性能表现比 React 要好很多，其实是因为测试运行在开发模式（Development Mode），而这个疏忽直接造成了结果偏差。感谢克里斯多弗（@Christopher）提出这个问题：[https://github.com/footballradar/VueReactPerf/pull/3](https://github.com/footballradar/VueReactPerf/pull/3)。在生产模式（Production Mode）运行 React 忽略了一些消耗资源较大的进程，包括了 prop-types 的检查和警告。尽管这是一个非常明显的优化，但由于 React 默认运行在开发模式，所以这个优化很容易被忽略掉。我们要强调的是 Vue 也是运行在开发模式的，二者都同样被影响到了。那篇 pull-request 里接下来的相关讨论都非常醍醐灌顶。\n\n我们也用了一些无效的测试数据，这使得 Vue 比起 React 在同等条件下快了10倍。在我们的测试中，两个框架都具有相同的测试数据。但是 Github 上的 pull-request 里的那个版本并没有确保这点一致性，所以其他测试的人也许会看到这个具有误导性的结论。\n\n## 与上一个测试相比的改变\n\n* 在[生产模式](https://github.com/footballradar/VueReactPerf/pull/3)下运行。\n* 添加了 `webpack.optimize.UglifyJsPlugin` \n* 添加了 [babel-react-optimize preset](https://github.com/thejameskyle/babel-react-optimize)\n\n## 新发现\n\n以下是部分的开发者工具 timeline 的概要，在下面的这个项目里有实际的栈和 timeline 的截图：[[https://github.com/footballradar/VueReactPerf/tree/master/results/v2](https://github.com/footballradar/VueReactPerf/tree/master/results/v2)\n\n有意思的是，Chrome 的开发工具在获取 Vue 的 500 场比赛测试结果的 30s 时间线时崩溃了，但 React 的 500 场比赛测试却没有。我们截取了 15s 的结果以取代它，但是让人不解的是，Vue 相比于 React，其实有更多的空闲时间。\n\n所有下面的结果都共享同一个主题：由于 React 的虚拟 Dom 的实现，它的 scripting 上运行的时间更长；Vue 由于要直接更改 Dom ，所以它有关在 painting 和 rendering 工作上更耗费资源。然而，所有工作都做完以后，Vue 在大多数情况下仍然比 React 快25%。这虽然不同于我们最初的巨大区别，仍然是一个值得关注的问题。\n\n##### 50 场比赛，100ms 的延迟\nReact: \n\n\nVue: \n\n##### 50 场比赛，1s的延迟\nReact: \n\n\nVue: \n\n##### 100 场比赛，100ms 的延迟\nReact: \n\n\nVue: \n\n##### 100 场比赛，1s 的延迟\nReact: \n\n\nVue: \n\n##### 500 场比赛，100ms 的延迟\nReact: \n\n\nVue: \n\n##### 500 场比赛，1s 的延迟\nReact: \n\n\nVue: \n\n\n## 结论\n\n总的来说，最初那个 Vue 比 React 表现好的结论在_这个用例_上仍然是有价值的，但是明显还有很多可以优化的地方，特别是 React。一个附带的结论是，需要多少的工作和相关知识，才能提高 React 的性能，而 Vue 在开箱即用的情况下就优化的很好。但不管我们说些什么，Vue 的开发者体验毫无疑问是更棒的。\n"
},
{
"path": "TODO/a-first-walk-into-kotlin-coroutines-on-android.md",
"content": "> * 原文地址：[A first walk into Kotlin coroutines on Android](https://android.jlelse.eu/a-first-walk-into-kotlin-coroutines-on-android-fe4a6e25f46a)\n> * 原文作者：[Antonio Leiva](https://android.jlelse.eu/@antoniolg)\n> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)\n> * 译者：[Feximin](https://github.com/Feximin)\n> * 校对者：[wilsonandusa](https://github.com/wilsonandusa) 、[atuooo](https://github.com/atuooo)\n\n---\n\n# 第一次走进 Android 中的 Kotlin 协程\n\n\n\n> 本文提取并改编自最近更新的 [Kotlin for Android Developers](https://antonioleiva.com/book) 一书。\n\n\n协程是 Kotlin 1.1 引入的最牛逼的功能。他们确实很棒，不但很强大，而且社区仍然在挖掘如何使他们得到更加充分的利用。\n\n简单来说，协程是一种按序写异步代码的方式。**你可以一行一行地写代码，而不是到处都有乱七八糟的回调**。有的还将会有暂停执行然后等待结果返回的能力。\n\n如果你以前是 C# 程序员，async/await 是最接近的概念。但是 Kotlin 中的协程功能更强大，因为他们不是一个特定想法的实现，而是**一个语言级别的功能，可以有多种实现去解决各种问题**。\n\n你可以编写自己的实现，或者使用一个 Kotlin 团队和其他独立开发者已经构建好的实现。\n\n你要明白**协程在 Kotlin 1.1 中是一个实验性的功能**。这意味着当前实现在将来可能会改变，尽管旧的实现仍将被支持，但你有可能想迁移到新的定义上。如我们稍后将见，你需要去选择开启这个特性，否则在使用的时候会有警告。\n\n这也意味着你应该将本文视为一个（协程）可以做些什么的示例而不是一个经验法则。未来几个月可能会有很大变动。\n\n---\n \n### 理解协程如何工作\n\n本文旨在让你了解一些基本概念，会用一个现有的库，而不是去自己去实现一个。但我认为重要的是了解一些内部原理，这样你就不会盲目使用了。\n\n协程基于**暂停函数**的想法：那些函数被调用之后**可以终止（程序）执行**，一旦完成他们自己的任务之后又可以让他（程序）继续执行。\n\n暂停函数用保留关键字 `suspend` 来标记，而且只能在其他暂停函数或协程内部被调用。\n\n这意味着你不能随便调用一个暂停函数。需要有一个包裹函数来构建协程并提供所需的上下文。类似这样的： \n\n fun async(block: suspend () -> T)\n\n我并不是在解释如何实现上述方法。那是一个复杂的过程，不在本文范围内，并且大多情况下已经有多种实现好的方法了。\n\n如果你确实有兴趣实现自己的，你可以读一下 [**coroutines Github**](https://github.com/Kotlin/kotlin-coroutines/blob/master/kotlin-coroutines-informal.md) 中所写的规范。你仅需要知道的是：方法名字可以随意取，至少有一个暂停块做为参数。\n\n然后你可以实现一个暂停函数并在块中调用：\n\n suspend fun mySuspendingFun(x: Int) : Result {\n …\n }\n\n async {\n val res = mySuspendingFun(20)\n print(res)\n }\n\n协程是线程吗？不完全是。他们的工作方式相似，但是（协程）更轻量、更有效。你可以有数以百万的协程运行在少量的几个线程中，这打开了一个充满可能性的世界。\n\n使用协程功能有三种方式：\n\n- **原始实现**：意思是创建你自己的方式去使用协程。这非常复杂并且通常不是必要的。\n- **底层实现**： Kotlin 提供了一套库，解决了一些最难的部分并提供了不同场景下的具体实现，你可以在 [kotlinx.coroutines](https://github.com/Kotlin/kotlinx.coroutines) 仓库中找到这些库，比如说： [one for Android](https://github.com/Kotlin/kotlinx.coroutines/tree/master/ui/kotlinx-coroutines-android) 。\n- **高级实现**：如果你只是想要**一个可以提供一切你所需的解决方案**来开始马上使用协程的话，有几个库可以使用，他们为你做了所有复杂的工作，并且（库的）数量在持续增长。我推荐 [Anko](https://github.com/Kotlin/anko)，他提供了一个可以很好的工作在 Android 上的方案，有可能你已经很熟悉了。\n\n---\n\n### 使用 Anko 实现协程\n\n自从 0.10 版本以来，Anko 提供了两种方法以在 Android 上使用协程。\n\n第一种与我们在上面的例子中看到的非常相似，和其他的库所做的也类似。\n\n首先，你需要创建**一个可以调用暂停函数的异步块**：\n\n async(UI) {\n …\n }\n\nUI参数是 `async` 块的执行上下文。\n\n然后你可以创建**在后台线程中执行的块**，将结果返回给UI线程。那些块以 `bg` 方法定义：\n\n async(UI) {\n val r1: Deferred = bg { fetchResult1() }\n val r2: Deferred = bg { fetchResult2() }\n updateUI(r1.await(), r2.await())\n }\n\n`bg` 返回一个 `Deferred` 对象，这个对象**在 `await()` 方法被调用后会暂停协程**，直到有结果返回。我们将在下面的例子中采用这种方案。\n\n正如你可能知道的，由于 Kotlin 编译器能够[推导出变量类型](https://antonioleiva.com/variables-kotlin/)，因此可以更加简单：\n\n async(UI) {\n val r1 = bg { fetchResult1() }\n val r2 = bg { fetchResult2() }\n updateUI(r1.await(), r2.await())\n }\n\n第二种方法是利用与特定子库中提供的监听器的集成，这取决于你打算使用哪个监听器。\n\n例如，在 `anko-sdk15-coroutines` 中有一个 `onClick` 监听器，他的 lambda 实际上是一个协程。这样你就可以在监听器代码块上立即使用暂停函数：\n\n textView.onClick {\n val r1 = bg { fetchResult1() }\n val r2 = bg { fetchResult2() }\n updateUI(r1.await(), r2.await())\n }\n\n如你所见，结果与之前的很相似。只是少了一些代码。\n\n为了使用他，你需要添加一些依赖，这取决于你想要使用哪些监听器：\n\n compile “org.jetbrains.anko:anko-sdk15-coroutines:$anko_version”\n compile “org.jetbrains.anko:anko-appcompat-v7-coroutines:$anko_version”\n compile “org.jetbrains.anko:anko-design-coroutines:$anko_version”\n\n---\n\n### 在示例中使用协程\n\n在[这本书](https://antonioleiva.com/book)所解释的例子（你可以在[这里](https://github.com/antoniolg/Kotlin-for-Android-Developers)找到）中，我们创建了一个简单的天气应用。\n\n为了使用 Anko 协程，我们首先需要添加这个新的依赖：\n\n compile “org.jetbrains.anko:anko-coroutines:$anko_version”\n\n接下来，如果你还记得，我曾经告诉过你需要选择使用这个功能，否则就会出现警告。要做到这一点（使用协程功能），只需要简单地在根文件夹下的 `gradle.properties` 文件（如果不存在就创建）中添加这一行：\n\n kotlin.coroutines=enable\n\n现在，你已经准备好开始使用协程了。让我们首先进入详情 activity 中。他只是使用一个特定的命令调用了数据库（用来缓存每周的天气预报数据）。\n\n这是生成的代码：\n\n async(UI) {\n val id = intent.getLongExtra(ID, -1)\n val result = bg { RequestDayForecastCommand(id)\n .execute() }\n bindForecast(result.await())\n }\n\n太棒了！天气预报数据是在一个后台线程中请求的，这多亏了 `bg` 方法，这个方法返回了一个延迟结果。那个延迟结果在可以返回前会一直在 `bindForecast` 调用中等待。\n\n但并不是一切都好。发生了什么？协程有一个问题：**他们持有一个 `DetailActivity` 的引用，如果这个请求永不结束就会内存泄露**。\n\n别担心，因为 Anko 有一个解决方案。你可以为你的 activity 创建一个弱引用，然后使用那个弱引用来代替：\n\n val ref = asReference()\n val id = intent.getLongExtra(ID, -1)\n\n async(UI) {\n val result = bg { RequestDayForecastCommand(id).execute() }\n ref().bindForecast(result.await())\n }\n\n在 activity 可用时，弱引用允许访问 activity，当 activity 被杀死，协程将会取消。需要仔细确保的是所有对 activity 中的方法或属性的调用都要经过这个 `ref` 对象。\n\n但是如果协程多次和 activity 交互的话会有点复杂。例如，在 `MainActivity` 使用这个方案将变得更加复杂。\n\n这个 activity 将基于一个 zipCode 来调用一个端点来请求一周的天气预报数据：\n\n private fun loadForecast() {\n\n val ref = asReference()\n val localZipCode = zipCode\n\n async(UI) {\n val result = bg { RequestForecastCommand(localZipCode).execute() }\n val weekForecast = result.await()\n ref().updateUI(weekForecast)\n }\n }\n\n你不能在 `bg` 块中使用 `ref()` ，因为在那个块中的代码不是一个暂停上下文，因此你需要将 `zipCode` 保存在另一个本地变量中。\n\n老实说，我认为泄露 activity 对象 1-2 秒没那么糟糕，不过有可能不能成为样板代码。因此如果你能确保你的后台处理不会永远不结束（比如，为你的服务器请求设置一个超时）的话，不使用 `asReference()` 也是安全的。\n\n这样的话，`MainActivity` 将变得更加简单：\n\n private fun loadForecast() = async(UI) {\n val result = bg { RequestForecastCommand(zipCode).execute() }\n updateUI(result.await())\n }\n\n综上，你已经可以一种非常简单的同步方式来写你的异步代码。\n\n这些代码非常简单，但是想象一下复杂的情况：后台操作的结果被下一个后台操作使用，或者当你需要遍历列表并为每一项都执行请求的时候。\n\n所有一切都可以写成常规的同步代码，写起来、维护起来将更加容易。\n\n---\n\n关于如何充分利用协程还有很多需要学习。如果你有更多相关的经验，请评论以让我们更加了解协程。\n\n如果你刚刚开始学习 Kotlin ，你可以看看[我的博客](https://antonioleiva.com/kotlin)，[这本书](https://antonioleiva.com/book)，或者关注我的 [Twitter](https://twitter.com/lime_cl)， [LinkedIn](https://www.linkedin.com/in/antoniolg/) 或者 [Github](https://github.com/antoniolg/) 。\n\n---\n\n> [掘金翻译计划](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)。\n"
},
{
"path": "TODO/a-follow-up-on-how-to-store-tokens-securely-in-android.md",
"content": "> * 原文地址：[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)\n> * 原文作者：[Enrique López Mañas](https://medium.com/@enriquelopezmanas)\n> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)\n> * 译者： [lovexiaov](https://github.com/lovexiaov)\n> * 校对者：[luoqiuyu](https://github.com/luoqiuyu) [hackerkevin](https://github.com/hackerkevin)\n\n\n\n# 再谈如何安全地在 Android 中存储令牌 #\n\n作为本文的序言，我想对读者做一个简短的声明。下面的引言对本文的后续内容而言十分重要。\n\n> 没有绝对的安全。所谓的安全是指利用一系列措施的堆积和组合，来试图延缓必然发生的事情。\n\n大约 3 年前，我写了[一篇文章](http://codetalk.de/?p=86)，给出了几种方法来防止潜在攻击者反编译我们 Android 应用窃取字符串令牌。为了便于回忆，也为了防止不可避免的网络瘫痪，我将会在此重新列出一些章节。\n\n客户端应用与服务端的交互是最常见的场景之一。数据交换时的敏感度差别很大，并且登录请求、用户数据更改请求等之间交换的数据类型也变化多样。\n\n首先要提到并应用的技术是使用 [SSL](http://info.ssl.com/article.aspx?id=10241)（安全套接层）链接客户端与服务端。再看一下文章开头的引言。尽管这样做是一个良好的开端，但这并不能确保绝对的隐私和安全。\n\n当你使用 SSL 连接时（也就是当你看到浏览器上有一个小锁时），这意味着你与服务器之间的连接被加密了。理论上讲，没有什么能够访问到你请求里的信息（*）\n\n（*）我说过绝对的安全不存在吧？SSL 连接仍然可以被攻破。本文不打算提供所有可能的攻击手段列表，只想让你了解几种攻击的可能性。比如，可以伪造 SSL 证书，或者进行中间人攻击。\n\n我们继续。假设客户端正在通过加密的 SSL 通道与后台链接，它们在愉快的交换有用的数据，执行业务逻辑。但是我们还想提供一个额外的安全层。\n\n接下来要采取的措施是在通信中使用授权令牌或 API 密钥。当后台收到一个请求时，我们如何判断该请求是来自认证的客户端而不是任意一个想要获取我们 API 数据的家伙？后台会检查该客户端是否提供了一个有效的 API 密钥。如果密钥有效，则执行请求操作，否则拒绝该请求并根据业务需求采取一些措施（当出现此情况时，我一般会纪录他们的 IP 地址和客户端 ID，看一下他们的访问频率。如果频率高于我的忍受范围，我会考虑禁止并观察一下这个无礼的家伙想要得到什么）。\n\n让我们从头开始构建我们的城堡吧。在我们的应用中，添加一个叫做 API_KEY 的变量，该变量会自动注入到每次的请求（如果是 Android 应用，可能会是你的 Retrofit 客户端）中。\n\n```java\nprivate final static String API_KEY = “67a5af7f89ah3katf7m20fdj202”\n```\n\n很好，这样可以帮助我们鉴定客户端。但问题在于它本身并没有提供一个十分有效的安全保证。\n\n如果你使用 [apktool](https://ibotpeaches.github.io/Apktool/) 反编译该应用，然后搜索该字符串，你会在其中一个 .smali 文件中发现：\n\n```smali\nconst-string v1, “67a5af7f89ah3katf7m20fdj202”\n```\n\n是的，我知道。这并不能保证是一个有效的令牌，所以我们仍然需要通过一个精确的验证来决定如何找到那个字符串，和它是否可以用来通过验证。但是你知道我要表达什么：这通常只是时间和资源的问题。\n\nProguard 是否会能我们保证该字符串的安全呢？并不能。Proguard 在[常见问题](http://proguard.sourceforge.net/FAQ.html#encrypt)中提到了字符串的加密是完全不可能的。\n\n那将字符串保存到 Android 提供的其他存储机制中呢，比如说 SharedPreferences？这并不是一个好方法。在模拟器或者 root 过的设备中可以轻易的访问到 SharedPreferences。几年前，一个叫 [Srinivas](http://resources.infosecinstitute.com/android-hacking-security-part-9-insecure-local-storage-shared-preferences/) 的伙计向我们证明了如何更改一个视频游戏中的得分。跑题了！\n\n#### 原生开发工具包 (NDK) ####\n\n我将会更新我提出的初始模型，不断迭代它，以提供更安全的替代方案。我们假设有两个函数分别负责加密和解密数据：\n\n```java\n private static byte[] encrypt(byte[] raw, byte[] clear) throws Exception {\n SecretKeySpec skeySpec = new SecretKeySpec(raw, \"AES\");\n Cipher cipher = Cipher.getInstance(\"AES\");\n cipher.init(Cipher.ENCRYPT_MODE, skeySpec);\n byte[] encrypted = cipher.doFinal(clear);\n return encrypted;\n }\n\n private static byte[] decrypt(byte[] raw, byte[] encrypted) throws Exception {\n SecretKeySpec skeySpec = new SecretKeySpec(raw, \"AES\");\n Cipher cipher = Cipher.getInstance(\"AES\");\n cipher.init(Cipher.DECRYPT_MODE, skeySpec);\n byte[] decrypted = cipher.doFinal(encrypted);\n return decrypted;\n }\n```\n\n代码没啥好说的。这两个函数会使用一个密钥值和一个被用来编/解码的字符串作为入参。它们会返回相应的加密或解密过的字符串。我们会用如下方式调用它们：\n\n```java\nByteArrayOutputStream baos = new ByteArrayOutputStream();\nbm.compress(Bitmap.CompressFormat.PNG, 100, baos);\nbyte[] b = baos.toByteArray();\n\nbyte[] keyStart = \"encryption key\".getBytes();\nKeyGenerator kgen = KeyGenerator.getInstance(\"AES\");\nSecureRandom sr = SecureRandom.getInstance(\"SHA1PRNG\");\nsr.setSeed(keyStart);\nkgen.init(128, sr);\nSecretKey skey = kgen.generateKey();\nbyte[] key = skey.getEncoded();\n\n// encrypt\nbyte[] encryptedData = encrypt(key,b);\n// decrypt\nbyte[] decryptedData = decrypt(key,encryptedData);\n```\n\n猜到为什么要这么做了吗？是的，我们可以根据需求来加/解密令牌。这就为我们提供了一个额外的安全层：当代码混淆后，寻找令牌不再像执行字符串搜索和检查字符串周围的环境那样简单了。但是，你能指出还有一个需要解决的问题吗？\n\n找到了吗？\n\n如果还没找到就多花点时间。\n\n是的。我们仍然有一个加密密钥以字符串的形式存储。虽然这种隐晦的做法增加了更多的安全层，但不管这个令牌是用于加密或它本身就是一个令牌，我们仍然有一个以明文形式存在的令牌。\n\n现在，我们将使用 NDK 来继续迭代我们的安全机制。\n\nNDK 允许我们在 Android 代码中访问 C++ 代码库。首先我们来想一下要做什么。我们可以在一个 C++ 函数中存放 API 密钥或者敏感数据。该函数可以在之后的代码中调用，避免了在 Java 文件中存储字符串。这就提供了一个自动的保护机制来防止反编译技术。\n\nC++ 函数如下：\n\n```cpp\nJava_com_example_exampleApp_ExampleClass_getSecretKey( JNIEnv* env,\n jobject thiz )\n{\n return (*env)->NewStringUTF(env, \"mySecretKey\".\");\n}\n```\n\n在 Java 代码中调用它也很简单：\n\n```java\nstatic {\n System.loadLibrary(\"library-name\");\n }\n\npublic native String getSecretKey();\n```\n\n在加/解密函数中会这样调用：\n\n```java\nbyte[] keyStart = getSecretKey().getBytes();\n```\n\n此时我们生成 APK，混淆它，然后反编译并尝试在原生函数 getSecretKey() 中查找该字符串，无法找到！胜利了吗？\n\n并没有！NDK 代码其实也可以被反汇编和检查。只是难度较高，需要更高级的工具和技术。虽然这样可以摆脱掉 95% 的脚本小子，但一个有充足资源和动机的团队让然可以拿到令牌。还记得这句话吗？\n\n> 没有绝对的安全。所谓的安全是指利用一系列措施的堆积和组合，来试图延缓必然发生的事情。\n\n\n\n你仍然可以在反汇编代码中找到该字符串字面值。[Hex Rays](https://www.hex-rays.com/products/decompiler/) 在反编译原生文件方面就做的很好。我很确信有一大堆的工具可以解构 Android 生成的任意原生代码（我跟 Hex Rays 并没有关系，也没有从他们那里拿到任何形式的资金酬劳）。\n\n那么，我们要使用哪种方案来避免后台与客户端的通信被标记呢？\n\n**在设备上实时生成密钥。**\n\n你的设备不需要存储任何形式的密钥并处理各种保护字符串字面值的麻烦！这是在服务中用到的非常古老的技术，比如远程密钥验证。\n\n1. 客户端知道有个函数会返回一个密钥。\n2. 后台知道在客户端中实现的那个函数。\n3. 客户端通过该函数生成一个密钥，并发送到服务器上。\n4. 服务器验证密钥，并根据请求执行相应的操作。\n\n抓到重点了吗？为什么不使用返回三个随机素数（ 1～100 之间）之和的函数来代替返回一个字符串（很容易被识别）的原生函数呢？或者拿到当天的 UNIX 时间，然后给每一位数字加 1？通过设备的一些上下文相关信息(如正在使用的内存量)来提供一个更高程度的熵值？\n\n上面这段包含了一些想法，希望读者们已经得到重点了。\n\n### **总结** ###\n\n1. 绝对的安全是不存在的。\n2. 多种保护手段的结合是达到高安全度的关键。\n3. 不要在代码中存储字符串明文。\n4. 使用 NDK 来创建自生成的密钥。\n\n还记得开头的那段话吧？\n\n> 没有绝对的安全。所谓的安全是指利用一系列措施的堆积和组合，来试图延缓必然发生的事情。\n\n我想再强调一次，你的目标是尽可能的保护你的代码，同时不要忘记 100% 的安全是不可能的。但是，如果你能保证解密你代码中任意的敏感信息都需要耗费大量的资源，你就能安心睡觉啦。\n\n### 一个小小的免责声明 ###\n\n我知道，读到此处，纵观整文，你会纳闷“这家伙怎么讲了所有麻烦的方法而没有提到 [Dexguard](https://www.guardsquare.com/en/dexguard) 呢？”。是的 Dexguard 可以混淆字符串，他们在这方面做的很好。然而 Dexguard 的售价[让人望而却步](http://thinkdiff.net/mobile/dexguard-480-eur-to-10313-eur-the-worst-software-do-not-use/)。我在之前的公司的关键安全系统中使用过 Dexguard，但这也许并不是一个适合所有人的选择。再说了，像生活一样，在软件开发中选择越多世界越丰富多彩。\n\n愉快的编码吧！\n\n我会在 [Twitter](https://twitter.com/eenriquelopez) 上写一些关于软件工程和生活点滴的思考。如果你喜欢此文，或者它能帮到你，请随意分享，点赞或者留言。这是业余作者写作的动力。\n\n---\n\n> [掘金翻译计划](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)。\n"
},
{
"path": "TODO/a-functional-programmers-introduction-to-javascript-composing-software.md",
"content": "> * 原文地址：[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)\n> * 原文作者：[Eric Elliott](https://medium.com/@_ericelliott?source=post_header_lockup)\n> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)\n> * 译者：[sunui](http://suncafe.cc)\n> * 校对者：[Aladdin-ADD](https://github.com/Aladdin-ADD)、[avocadowang](https://github.com/avocadowang)\n\n# [第三篇] 函数式程序员的 JavaScript 简介（软件编写）\n\n![](\"https://cdn-images-1.medium.com/max/800/1*uVpU7iruzXafhU2VLeH4lw.jpeg\")
\n\n烟雾艺术魔方 — MattysFlicks — (CC BY 2.0)\n\n> 注意：这是“软件编写”系列文章的第三部分，该系列主要阐述如何在 JavaScript ES6+ 中从零开始学习函数式编程和组合化软件（compositional software）技术（译注：关于软件可组合性的概念，参见维基百科 [Composability](https://en.wikipedia.org/wiki/Composability)）。后续还有更多精彩内容，敬请期待！\n> [< 上一篇](https://github.com/xitu/gold-miner/blob/master/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)\n\n对于不熟悉 JavaScript 或 ES6+ 的同学，这里做一个简短的介绍。无论你是 JavaScript 开发新手还是有经验的老兵，你都可能学到一些新东西。以下内容仅是浅尝辄止，吊吊大家的兴致。如果想知道更多，还需深入学习。敬请期待吧。\n\n\n学习编程最好的方法就是动手编程。我建议您使用交互式 JavaScript 编程环境（如 [CodePen](https://codepen.io/) 或 [Babel REPL](https://babeljs.io/repl/)）。\n\n或者，您也可以使用 Node 或浏览器控制台 REPL。\n\n### 表达式和值 ###\n\n表达式是可以求得数据值的代码块。\n\n下面这些都是 JavaScript 中合法的表达式：\n\n```\n7;\n\n7 + 1; // 8\n\n7 * 2; // 14\n\n'Hello'; // Hello\n```\n\n表达式的值可以被赋予一个名称。执行此操作时，表达式首先被计算，取得的结果值被赋值给该名称。对于这一点我们将使用 `const` 关键字。这不是唯一的方式，但这将是你使用最多的，所以目前我们就可以坚持使用 `const`。\n\n```\nconst hello = 'Hello';\nhello; // Hello\n```\n\n### var、let 和 const ###\n\nJavaScript 支持另外两种变量声明关键字：`var`，还有 `let`。我喜欢根据选择的顺序来考虑它们。默认情况下，我选择最严格的声明方式：`const`。用 `const` 关键字声明的变量不能被重新赋值。最终值必须在声明时分配。这可能听起来很严格，但限制是一件好事。这是个标识在提醒你“赋给这个名称的值将不会改变”。它可以帮你全面了解这个名称的意义，而无需阅读整个函数或块级作用域。\n\n有时，给变量重新赋值很有用。比如，如果你正在写一个手动的强制性迭代，而不是一个更具功能性的方法，你可以迭代一个用 `let` 赋值的计数器。\n\n因为 `var` 能告诉你很少关于这个变量的信息，所以它是最无力的声明标识。自从开始用 ES6，我就再也没在实际软件项目中有意使用 `var` 作声明了。\n\n注意一下，一个变量一旦用 `let` 或 `const` 声明，任何再次声明的尝试都将导致报错。如果你在 REPL（读取-求值-输出循环）环境中更喜欢多一些实验性和灵活性，那么建议你使用 `var` 声明变量，与 `let` 和 `const` 不同，使用 `var` 重新声明变量是合法的。\n\n本文将使用 const 来让您习惯于为实际程序中用 `const`，而出于试验的目的自由切换回 `var`。\n\n### 数据类型 ###\n\n目前为止我们见到了两种数据类型：数字和字符串。JavaScript 也有布尔值（`true` 或 `false`）、数组、对象等。稍后我们再看其他类型。\n\n数组是一系列值的有序列表。可以把它比作一个能够装很多元素的容器。这是一个数组字面量：\n\n```\n[1, 2, 3];\n```\n\n当然，它也是一个可被赋予名称的表达式：\n\n```\nconst arr = [1, 2, 3];\n```\n\n在 JavaScript 中，对象是一系列键值对的集合。它也有字面量：\n\n```\n{\n key: 'value'\n}\n```\n\n当然，你也可以给对象赋予名称：\n\n```\nconst foo = {\n bar: 'bar'\n}\n```\n\n如果你想将现有变量赋值给同名的对象属性，这有个捷径。你可以仅输入变量名，而不用同时提供一个键和一个值：\n\n```\nconst a = 'a';\nconst oldA = { a: a }; // 长而冗余的写法\nconst oA = { a }; // 短小精悍！\n```\n\n为了好玩而已，让我们再来一次：\n\n```\nconst b = 'b';\nconst oB = { b };\n```\n\n对象可以轻松合并到新的对象中：\n\n```\nconst c = {...oA, ...oB}; // { a: 'a', b: 'b' }\n```\n\n这些点是对象扩展运算符。它迭代 `oA` 的属性并分配到新的对象中，`oB` 也是一样，在新对象中已经存在的键都会被重写。在撰写本文时，对象扩展是一个新的试验特性，可能还没有被所有主流浏览器支持，但如果你那不能用，还可以用 `Object.assign()` 替代：\n\n```\nconst d = Object.assign({}, oA, oB); // { a: 'a', b: 'b' }\n```\n\n这个 `Object.assign()` 的例子代码很少，如果你想合并很多对象，它甚至可以节省一些打字。注意当你使用 `Object.assign()` 时，你必须传一个目标对象作为第一个参数。它就是那个源对象的属性将被复制过去的对象。如果你忘了传，第一个参数传递的对象将被改变。\n\n以我的经验，改变一个已经存在的对象而不创建一个新的对象常常引发 bug。至少至少，它很容易出错。要小心使用 `Object.assign()`。\n\n### 解构 ###\n\n对象和数组都支持解构，这意味着你可以从中提取值分配给命过名的变量：\n\n```\nconst [t, u] = ['a', 'b'];\nt; // 'a'\nu; // 'b'\n\nconst blep = {\n blop: 'blop'\n};\n\n// 下面等同于：\n// const blop = blep.blop;\nconst { blop } = blep;\nblop; // 'blop'\n```\n\n和上面数组的例子类似，你可以一次解构多次分配。下面这行你在大量的 Redux 项目中都能见到。\n\n```\nconst { type, payload } = action;\n```\n\n下面是它在一个 reducer（后面的话题再详细说） 的上下文中的使用方法。\n\n```\nconst myReducer = (state = {}, action = {}) => {\n const { type, payload } = action;\n switch (type) {\n case 'FOO': return Object.assign({}, state, payload);\n default: return state;\n }\n};\n```\n\n如果不想为新绑定使用不同的名称，你可以分配一个新名称：\n\n```\nconst { blop: bloop } = blep;\nbloop; // 'blop'\n```\n\n读作：把 `blep.blop` 分配给 `bloop`。\n\n### 比较运算符和三元表达式 ###\n\n你可以用严格的相等操作符（有时称为“三等于”）来比较数据值：\n\n```\n3 + 1 === 4; // true\n```\n\n还有另外一种宽松的相等操作符。它正式地被称为“等于”运算符。非正式地可以叫“双等于”。双等于有一两个有效的用例，但大多数时候默认使用 `===` 操作符是更好的选择。\n\n\n其它比较操作符有:\n\n- `>` 大于\n- `<` 小于\n- `>=` 大于或等于\n- `<=` 小于或等于\n- `!=` 不等于\n- `!==` 严格不等于\n- `&&` 逻辑与\n- `||` 逻辑或\n\n三元表达式是一个可以让你使用一个比较器来问问题的表达式，运算出的不同答案取决于表达式是否为真:\n\n```\n14 - 7 === 7 ? 'Yep!' : 'Nope.'; // Yep!\n```\n\n### 函数 ###\n\nJavaScript 支持函数表达式，函数可以这样分配名称：\n\n```\nconst double = x => x * 2;\n```\n\n这和数学表达式 `f(x) = 2x` 是一个意思。大声说出来，这个函数读作 `x` 的 `f` 等于 `2x`。这个函数只有当你用一个具体的 `x` 的值应用它的时候才有意思。在其它方程式里面你写 `f(2)`，就等同于 `4`。\n\n换种说话就是 `f(2) = 4`。您可以将数学函数视为从输入到输出的映射。这个例子里 `f(x)` 是输入数值 `x` 到相应的输出数值的映射，等于输入数值和 `2` 的乘积。\n\n在 JavaScript 中，函数表达式的值是函数本身：\n\n```\ndouble; // [Function: double]\n```\n\n你可以使用 `.toString()` 方法看到这个函数的定义。\n\n```\ndouble.toString(); // 'x => x * 2'\n```\n\n如果要将函数应用于某些参数，则必须使用函数调用来调用它。函数调用会接收参数并且计算一个返回值。\n\n你可以使用 `(argument1, argument2, ...rest)` 调用一个函数。比如调用我们的 double 函数，就加一对括号并传进去一个值：\n\n```\ndouble(2); // 4\n```\n\n和一些函数式语言不同，这对括号是有意义的。没有它们，函数将不会被调用。\n\n```\ndouble 4; // SyntaxError: Unexpected number\n```\n\n### 签名 ###\n\n函数的签名可以包含以下内容：\n\n1. 一个 **可选的** 函数名。\n2. 在括号里的一组参数。 参数的命名是可选的。\n3. 返回值的类型。\n\nJavaScript 的签名无需指定类型。JavaScript 引擎将会在运行时断定类型。如果你提供足够的线索，签名信息也可以通过开发工具推断出来，比如一些 IDE（集成开发环境）和使用数据流分析的 [Tern.js](http://ternjs.net/)。\n\nJavaScript 缺少它自己的函数签名语法，所以有几个竞争标准：JSDoc 在历史上非常流行，但它太过笨拙臃肿，没有人会不厌其烦地维护更新文档与代码同步，所以很多 JS 开发者都弃坑了。\n\nTypeScript 和 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 能有一个好的标记系统标准，但目前为止，我觉得当前的解决方案没有能胜任这个任务的。现在，怪异的类型标记即使和你在用的不尽相同，也就将就先用着吧。\n\n```\nfunctionName(param1: Type, param2: Type) => Type\n```\n\ndouble 函数的签名是：\n\n```\ndouble(x: n) => n\n```\n\n尽管事实上 JavaScript 不需要注释签名，知道何为签名和它意味着什么依然很重要，它有助于你高效地交流函数是如何使用和如何构建的。大多数可重复使用的函数构建工具都需要你传入同样类型签名的函数。\n\n### 默认参数值 ###\n\nJavaScript 支持默认参数值。下面这个函数类似一个恒等函数（以你传入参数为返回值的函数），一旦你用 `undefined` 调用它，或者根本不传入参数——它就会返回 0，来替代：\n\n```\nconst orZero = (n = 0) => n;\n```\n\n如上，若想设置默认值，只需在传入参数时带上 `=` 操作符，比如 `n = 0`。当你用这种方式传入默认值，像 [Tern.js](http://ternjs.net/)、Flow、或者 TypeScript 这些类型检测工具可以自行推断函数的类型签名，甚至你不需要刻意声明类型注解。\n\n结果就是这样，在你的编辑器或者 IDE 中安装正确的插件，在你输入函数调用时，你可以看见内联显示的函数签名。依据它的调用签名，函数的使用方法也一目了然。无论起不起作用，使用默认值可以让你写出更具可读性的代码。\n\n> 注意： 使用默认值的参数不会增加函数的 `.length` 属性，比如使用依赖 `.length` 值的自动柯里化会抛出不可用异常。如果你碰上它，一些柯里化工具（比如 `lodash/curry`）允许你传入自定义参数来绕开这个限制。\n\n### 命名参数 ###\n\nJavaScript 函数可以传入对象字面量作为参数，并且使用对象解构来分配参数标识，这样做可以达到命名参数的同样效果。注意，你也可以使用默认参数特性传入默认值。\n\n```\nconst createUser = ({\n name = 'Anonymous',\n avatarThumbnail = '/avatars/anonymous.png'\n}) => ({\n name,\n avatarThumbnail\n});\n\nconst george = createUser({\n name: 'George',\n avatarThumbnail: 'avatars/shades-emoji.png'\n});\n\ngeorge;\n/*\n{\n name: 'George',\n avatarThumbnail: 'avatars/shades-emoji.png'\n}\n*/\n```\n\n### 剩余和展开 ###\n\nJavaScript 中函数共有的一个特性是可以在函数参数中使用剩余操作符 `...` 来将一组剩余的参数聚集到一起。\n\n例如下面这个函数简单地丢弃第一个参数，返回其余的参数：\n\n```\nconst aTail = (head, ...tail) => tail;\naTail(1, 2, 3); // [2, 3]\n```\n\n剩余参数将各个元素组成一个数组。而展开操作恰恰相反：它将一个数组中的元素扩展为独立元素。研究一下这个：\n\n```\nconst shiftToLast = (head, ...tail) => [...tail, head];\nshiftToLast(1, 2, 3); // [2, 3, 1]\n```\n\nJavaScript 数组在使用扩展操作符的时候会调用一个迭代器，对于数组中的每一个元素，迭代器都会传递一个值。在 `[...tail, head]` 表达式中，迭代器按顺序从 `tail` 数组中拷贝到一个刚刚创建的新的数组。之前 head 已经是一个独立元素了，我们只需把它放到数组的末端，就完成了。\n\n### 柯里化 ###\n\n可以通过返回另一个函数来实现柯里化（Curry）和偏应用（partial application）：\n\n```\nconst highpass = cutoff => n => n >= cutoff;\nconst gt4 = highpass(4); // highpass() 返回了一个新函数\n```\n\n你可以不使用箭头函数。JavaScript 也有一个 `function` 关键字。我们使用箭头函数是因为 `function` 关键字需要打更多的字。\n这种写法和上面的 `highPass()` 定义是一样的：\n\n```\nconst highpass = function highpass(cutoff) {\n return function (n) {\n return n >= cutoff;\n };\n};\n```\n\nJavaScript 中箭头的大致意义就是“函数”。使用不同种的方式声明，函数行为会有一些重要的不同点（`=>` 缺少了它自己的 `this` ，不能作为构造函数），但当我们遇见那就知道不同之处了。现在，当你看见 `x => x`，想到的是 “一个携带 `x` 并且返回 `x` 的函数”。所以 `const highpass = cutoff => n => n >= cutoff;` 可以这样读：\n\n“`highpass` 是一个携带 `cutoff` 返回一个携带 `n` 并返回结果 `n >= cutoff` 的函数的函数”\n\n既然 `highpass()` 返回一个函数，你可以使用它创建一个更独特的函数：\n\n```\nconst gt4 = highpass(4);\n\ngt4(6); // true\ngt4(3); // false\n```\n\n自动柯里化函数，有利于获得最大的灵活性。比如你有一个函数 `add3()`:\n\n```\nconst add3 = curry((a, b, c) => a + b + c);\n```\n\n使用自动柯里化，你可以有很多种不同方法使用它，它将根据你传入多少个参数返回正确结果：\n\n```\nadd3(1, 2, 3); // 6\nadd3(1, 2)(3); // 6\nadd3(1)(2, 3); // 6\nadd3(1)(2)(3); // 6\n```\n\n令 Haskell 粉遗憾的是，JavaScript 没有内置自动柯里化机制，但你可以从 Lodash 引入：\n\n```\n$ npm install --save lodash\n```\n\n然后在你的模块里:\n\n```\nimport curry from 'lodash/curry';\n```\n\n或者你可以使用下面这个魔性写法:\n\n```\n// 精简的递归自动柯里化\nconst curry = (\n f, arr = []\n) => (...args) => (\n a => a.length === f.length ?\n f(...a) :\n curry(f, a)\n)([...arr, ...args]);\n```\n\n### 函数组合 ###\n\n当然你能够开始组合函数了。组合函数是传入一个函数的返回值作为参数给另一个函数的过程。用数学符号标识：\n\n```\nf . g\n```\n\n翻译成 JavaScript:\n\n```\nf(g(x))\n```\n\n这是从内到外地求值：\n\n1. `x` 是被求数值\n2. `g()` 应用给 `x`\n3. `f()` 应用给 `g(x)` 的返回值\n\n例如:\n\n```\nconst inc = n => n + 1;\ninc(double(2)); // 5\n```\n\n数值 `2` 被传入 `double()`，求得 `4`。 `4` 被传入 `inc()` 求得 `5`。\n\n你可以给函数传入任何表达式作为参数。表达式在函数应用之前被计算:\n\n```\ninc(double(2) * double(2)); // 17\n```\n\n既然 `double(2)` 求得 `4`，你可以读作 `inc(4 * 4)`，然后计算得 `inc(16)`，然后求得 `17`。\n\n函数组合是函数式编程的核心。我们后面还会介绍很多。\n\n### 数组 ###\n\n数组有一些内置方法。方法是指对象关联的函数，通常是这个对象的属性：\n\n```\nconst arr = [1, 2, 3];\narr.map(double); // [2, 4, 6]\n```\n\n这个例子里，`arr` 是对象，`.map()` 是一个以函数为值的对象属性。当你调用它，这个函数会被应用给参数，和一个特别的参数叫做 `this`，`this` 在方法被调用之时自动设置。这个 `this` 的存在使 `.map()` 能够访问数组的内容。\n\n注意我们传递给 `map` 的是 `double` 函数而不是直接调用。因为 `map` 携带一个函数作为参数并将函数应用给数组的每一个元素。它返回一个包含了 `double()` 返回值的新的数组。\n\n注意原始的 `arr` 值没有改变：\n\n```\narr; // [1, 2, 3]\n```\n\n### 方法链 ###\n\n你也可以链式调用方法。方法链是指在函数返回值上直接调用方法的过程，在此期间不需要给返回值命名：\n\n```\nconst arr = [1, 2, 3];\narr.map(double).map(double); // [4, 8, 12]\n```\n\n返回布尔值（`true` 或 `false`）的函数叫做 **断言**（predicate）。`.filter()` 方法携带断言并返回一个新的数组，新数组中只包含传入断言函数（返回 `true`）的元素：\n\n```\n[2, 4, 6].filter(gt4); // [4, 6]\n```\n\n你常常会想要从一个列表选择一些元素，然后把这些元素序列化到一个新列表中：\n\n```\n[2, 4, 6].filter(gt4).map(double); [8, 12]\n```\n\n注意：后面的文章你将看到使用叫做 **transducer** 东西更高效地同时选择元素并序列化，不过这之前还有一些其他东西要了解。\n\n### 总结 ###\n\n如果你现在有点发懵，不必担心。我们仅仅概览了一下很多事情的表面，它们尚需大量的解释和总结。很快我们就会回过头来，深入探讨其中的一些话题。\n\n[**继续阅读 “高阶函数”…**](https://github.com/xitu/gold-miner/blob/master/TODO/higher-order-functions-composing-software.md)\n\n### 接下来 ###\n\n想要学习更多 JavaScript 函数式编程知识？\n\n[和 Eric Elliott 一起学习 JavaScript](http://ericelliottjs.com/product/lifetime-access-pass/)。 如果你不是其中一员，千万别错过！\n\n[![](\"https://cdn-images-1.medium.com/max/800/1*3njisYUeHOdyLCGZ8czt_w.jpeg\")
\n](https://ericelliottjs.com/product/lifetime-access-pass/)\n\n\n***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** 等公司，具有丰富的软件实践经验。\n\n**他大多数时间在 San Francisco By Area ，和世界上最美丽的姑娘在一起。**\n\n---\n\n> [掘金翻译计划](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)。\n"
},
{
"path": "TODO/a-gentle-introduction-to-self-sovereign-identity.md",
"content": "> * 原文地址：[A gentle introduction to self-sovereign identity](https://bitsonblocks.net/2017/05/17/a-gentle-introduction-to-self-sovereign-identity/)\n> * 原文作者：[antonylewis2015](https://bitsonblocks.net/author/antonylewis2015/)\n> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)\n> * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO/a-gentle-introduction-to-self-sovereign-identity.md](https://github.com/xitu/gold-miner/blob/master/TODO/a-gentle-introduction-to-self-sovereign-identity.md)\n> * 译者：[foxxnuaa](https://github.com/foxxnuaa)\n> * 校对者：[ryouaki](https://github.com/ryouaki)\n\n# 自主权身份简介\n\n\n\n2017 年 5 月，印度[互联网与社会智库中心]( http://cis-india.org/ )发布了一份[报告]( http://cis-india.org/internet-governance/information-security-practices-of-aadhaar-or-lack-thereof-a-documentation-of-public-availability-of-aadhaar-numbers-with-sensitive-personal-financial-information-1 )，详细介绍了印度国家身份数据库（ [ Adahaar ]（ https://uidai.gov.in/ ））泄漏可能危及个人信息的方式。这些信息涉及 1.3 亿印度国民。信息泄漏给金融诈骗创造了机会，同时对个人隐私造成不可挽回的伤害。\n\n很明显，中心化身份存储模型存在缺陷。本文描述了一种管理数字身份的新方式：自主权身份。\n\n自主权身份的含义是人们和企业将自己的身份数据存储在自己的设备上，并能有效地提供给需要的人进行验证，而不用依赖中心化的身份数据存储。相对如今的纸质处理，自主权身份是一种数字化方式。与手动处理和中心化存储如印度的 Aadhaar 相比，自主权身份更有益。\n\n高效地识别过程能够促进普惠金融。通过降低小企业开设银行账户的成本，融资对银行更加有利，小企业便可以获得融资。\n\n### 身份中有哪些重要概念？\n\n身份包含三个部分：**声明**、**证明** 和 **认证**。\n\n#### 声明\n\n身份 **声明** 是由个人或企业发起的：\n\n> “我是 Antony ，出生于 1901 年 1 月 1 日”\n\n\n\n#### 证明\n\n\n**证明** 是某种形式的文件，为声明提供证据。证明有各种格式。通常情况下，个人证明是护照、出生证和账单的复印件。对于公司来说，它是大量的公司和所有权结构文件。\n\n\n\n\n#### 认证\n\n**认证** 是第三方根据他们的记录验证声明是真实的。例如，一所大学可以证明有人在那里学习过并取得学位。来自权威机构的认证比伪造的证据更加有力。但是，由于信息是敏感的，认证对于权威机构来说是一个负担。认证意味着信息需要保持，且只有特定的人才能访问。\n\n\n\n\n### 身份的问题是什么？\n\n银行需要了解他们的新客户和商业客户以便检查资格，并向监管机构证明他们（银行）不是银行坏账。他们也需要保持客户的信息是最新的。\n\n问题在于：\n\n* 证明通常是图片和复印件形式的 **非结构化数据**。这意味着银行工作人员必须手动读取和扫描文档以提取相关数据，然后输入系统进行存储和处理。\n\n* 当在现实生活中发生 **数据变化** 时（如地址变更、公司所有权结构变更），客户有义务通知与他们有关系的各种金融服务提供商。\n\n* 某些形式的证据（如原始文件的复印件）**很容易被伪造**，这就需要采取额外的步骤来证明真实性，如经过公证的复印件，从而导致其他的矛盾和费用。\n\n结果是昂贵、耗时且麻烦的过程，使每个人都感到烦恼。\n\n\n\n### 技术上有哪些改进？\n\n无论采用什么样的整体解决方案，上述三个问题都需要在技术上解决。标准化和数字签名结合运作良好。\n\n**改进非结构化数据** 的技术解决方案是将数据以机器可读的结构化格式进行存储和传输，即将 **文本存储在标准化的标签中**。\n\n**管理数据变化** 的技术解决方案是更新所有必要实体的通用方法。即使用 **APIs**连接、验证自身（证明是您的账户）、更新详细信息。\n\n**证明身份真实性** 的技术解决方案是 **数字签名认证**，可能有时间限制。数字签名证明与认证一样有效，因为数字签名不能伪造。数字签名有如下两个属性，使其本质上比纸质文档更好：\n\n1. 如果签名文档发生任何更改，数字签名将失效。换句话说，它保证文件的完整性。\n2. 数字签名不能被取消，并从一个文档复制到另一个文档。\n\n### 什么是中心化解决方案？\n\n身份管理的常见解决方案是中心化存储。第三方拥有和控制许多人身份的存储。客户将自身信息录入到系统，并上传证据。无论谁需要，都可以访问这些数据（当然得有客户的许可），并可以系统地将这些数据存储到自己的系统中。如果细节发生变化，客户会更新一次，并将更新推送给相关的银行。\n\n\n\n这听起来不错，当然也有一些好处。但是这个模型有些问题。\n\n### 中心化解决方案有什么问题？\n\n#### 1. 不良数据\n\n运营身份存储是一把双刃剑。一方面，运营商可以通过对工具收费来赚钱。另一方面，数据对运营商是不利的：对于黑客来说，集中化的身份系统是一座金矿；而对于运营商，网络安全很是头痛。\n\n如果黑客可以侵入系统并拷贝数据，他们可以将数字身份和书面证据出售给其他坏人。这些坏人就可以以无辜者的名义窃取身份、欺诈和犯罪。这样会而且确实破坏了无辜者的生活，并给运营商造成重大的不利。\n\n#### 2. 司法政治\n\n监管机构希望将个人数据存储在其管辖下的地理范围内。因此，创建国际身份存储库是很困难的，因为总是有关于哪个国家存储数据和谁可以访问数据的争论。\n\n#### 3. 垄断倾向\n\n对于中心化存储库运营商来说，这不是问题，但对于用户来说是一个问题。如果一个公用事业运营商获得足够的关注，网络效应会吸引更多的用户。公用事业运营商可能成为准垄断企业。垄断性运营商往往对变革产生抵触；由于缺乏竞争力，他们会过度收费和乏于创新。这对于运营商是有利的，但是却损害了用户的利益。\n\n### 去中心化的解决方案是什么？\n\n#### 是区块链吗？\n\n区块链是一种分布式账簿，所有数据都可以实时复制到所有参与者。是否应该将身份数据存储在多个参与实体（比如大银行）管理的区块链中?不:\n\n1. 将所有身份数据复制到所有各方，打破了关于将个人数据保存在管辖范围内的所有规定;只储存与业务有关的个人资料;并且只存储客户授权的数据。\n\n2. 网络安全风险增加。如果中心化数据存储很难保证安全，那么现在您正在将这些数据复制到多个参与方，每个参与方都有自己的网络安全实践和漏洞。这使得攻击者更容易窃取数据。\n\n如果加密身份数据会怎样？\n\n1. 加密个人数据仍可能违反个人数据规定。\n\n2. 为什么各方(如银行)会存储和管理一些他们看不到或不使用的身份数据?积极的一面是什么?\n\n### 那么最终的答案是什么？\n\n最新的解决方案是 “**自主权身份**”。这个数字概念与我们今天保管非数字身份的方式非常相似。\n\n今天，我们自己保管护照、出生证明、家用水电费账单等，也许把他们放在一个“重要的抽屉”里，并且在需要的时候才拿出来。我们将这些纸质文件和其他东西分开存放。自主权身份等同于我们现在使用的纸质文件的数字等价物。\n\n### 如何对用户进行自主权身份识别？\n\n你会在智能手机或电脑上安装一个应用程序，类似于某种”身份钱包“，将身份数据存储在设备硬件上，可能备份在另一个设备上或个人备份解决方案上，但 **关键** 是不存储在中心化存储库中。\n\n身份钱包一开始是 **空** 的，只有一个根据公钥 **生成** 的 **识别号码** 以及相应的私钥(类似密码，用于创建数字签名)。这个密钥对不同于用户名和密码，因为它是由用户通过\"随机和数学运算\"创建的，而不是由第三方请求用户名/密码产生的。\n\n现阶段，**没有其他任何人** 知道这个识别号码。没有人发给你。你自己创建了它。这就是自主权。大数法则和随机数法则确保没有人会产生和你一样的识别号码。\n\n然后你可以使用这个 **识别号码**，连同 **身份声明** 一起，从相关部门得到 **认证**。\n\n你就可以使用这些证明作为你的身份信息。\n\n\n\n**声明** 会被输入到标准化文本中存储，并保存照片或扫描文档。\n\n**证明** 会通过保存扫描或者证明文件的照片来存储。 然而，这只是为了向后兼容，因为数字签名认证消除了我们今天所知道的证明的需要。\n\n**认证** - 即有效部分，也会存储在这个钱包里。它是机器可读的，数字签名的一些信息片段，在一定时间段内有效。官方如护照机构、医院、驾照机构、警察局等需要签署这些数字签名。\n\n**需要了解，但是无需更多**：官方可以提供“超过18”、“超过21”、“合格投资者”、“可驾驶汽车”等证明文件，供用户使用。身份所有者能够选择将哪些信息传递给请求者。例如，如果你需要证明你已经超过18岁，你不需要分享你的出生日期，你只需要一个声明说你已经超过18岁，该声明由相关部门签署。\n\n\n\n共享这类数据对于 **身份提供者和接收者来说都更安全**。提供者不需要过度共享，而接收者不需要存储不必要的敏感数据 — 例如，如果接收者被入侵，它们只存储“超过18岁”的标志，而不是出生日期。\n\n即使银行本身也可以证明哪些人在银行有账户。我们首先需要了解他们在创建这些认证时所承担的责任。我认为，当他们寄给你一张银行账单时，它不会比他们目前承担的责任更大，而你只是把它作为在其他地方的地址证明。\n\n#### 数据共享\n\n数据将存储在个人设备上(如同今天将纸质文件存储在家里），且在需要时，个人通过打开设备上的通知同意第三方收集特定数据。我们已经有一些类似的 - 如果你曾使用过“连接”你的 Facebook 或 LinkedIn 账户服务，这是相似的 - 但是，不是去 Facebook 服务器收集你的个人数据，而是从你的手机中请求它，同时你对共享的数据有粒度控制。\n\n\n\n### 总结 - 分布式账本\n\n谁来组织这些？也许这就是分布式账本的起源。软件、网络和工作流需要构建、运行和维护。数字签名需要管理公钥和私钥，证书需要颁发、撤销、刷新。身份数据不是静态的，它需要根据某些业务逻辑进行演化。\n\n**非区块链分布式账本将是一个理想的平台**。R3 的 Corda (注:我在 R3 中工作)已经具备了许多必要的元素 —— 协调工作流、数字签名、数据演化规则，以及一个由 80 多个金融机构组成的联盟，他们正在尝试这种精确的自我权身份概念。\n\n\n---\n\n> [掘金翻译计划](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)、[前端](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#设计)、[人工智能](https://github.com/xitu/gold-miner#人工智能)等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)、[官方微博](http://weibo.com/juejinfanyi)、[知乎专栏](https://zhuanlan.zhihu.com/juejinfanyi)。\n"
},
{
"path": "TODO/a-guide-to-automating-scraping-the-web-with-javascript-chrome-puppeteer-node-js.md",
"content": "> * 原文地址：[A Guide to Automating & Scraping the Web with JavaScript (Chrome + Puppeteer + Node JS)](https://codeburst.io/a-guide-to-automating-scraping-the-web-with-javascript-chrome-puppeteer-node-js-b18efb9e9921)\n> * 原文作者：[Brandon Morelli](https://codeburst.io/@bmorelli25?source=post_header_lockup)\n> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)\n> * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO/a-guide-to-automating-scraping-the-web-with-javascript-chrome-puppeteer-node-js.md](https://github.com/xitu/gold-miner/blob/master/TODO/a-guide-to-automating-scraping-the-web-with-javascript-chrome-puppeteer-node-js.md)\n> * 译者：[pot-code](https://github.com/pot-code)\n> * 校对者：[bambooom](https://github.com/bambooom)\n\n# JavaScript 自动化爬虫入门指北（Chrome + Puppeteer + Node JS）\n\n## 和 Headless Chrome 一起装逼一起飞\n\n\n\n> [**Udemy Black Friday Sale**](https://codeburst.io/udemys-black-friday-sale-starts-today-all-web-development-courses-just-10-44966e590bd4) — Thousands of Web Development & Software Development courses are on sale for only $10 for a limited time! [**Full details and course recommendations can be found here**](https://codeburst.io/udemys-black-friday-sale-starts-today-all-web-development-courses-just-10-44966e590bd4).\n\n#### 内容简介\n\n本文将会教你如何用 JavaScript 自动化 web 爬虫，技术上用到了 Google 团队开发的 Puppeteer。 [__Puppeteer__](https://github.com/GoogleChrome/puppeteer) 运行在 Node 环境，可以用来操作 headless Chrome。何谓 [__Headless Chrome__](https://developers.google.com/web/updates/2017/04/headless-chrome)？通俗来讲就是在不打开 Chrome 浏览器的情况下使用提供的 API 模拟用户的浏览行为。\n\n**如果你还是不理解，你可以想象成使用 JavaScript 全自动化操作 Chrome 浏览器。**\n\n#### 前言\n\n先确保你已经安装了 Node 8 及以上的版本，没有的话，可以先到 [**官网**](https://nodejs.org/en/) 里下载安装。注意，一定要选“Current”处显示的版本号大于 8 的。\n\n如果你是第一次接触 Node，最好先看一下入门教程：[**Learn Node JS — The 3 Best Online Node JS Courses**](https://codeburst.io/learn-node-js-the-3-best-online-node-js-courses-87e5841f4c47).\n\n安装好 Node 之后，创建一个项目文件夹，然后安装 Puppeteer。安装 Puppeteer 的过程中会附带下载匹配版本的 Chromium（译者注：国内网络环境可能会出现安装失败的问题，可以设置环境变量 `PUPPETEER_SKIP_CHROMIUM_DOWNLOAD = 1` 跳过下载，副作用是每次使用 `launch` 方法时，需要手动指定浏览器的执行路径）：\n\n```shell\nnpm install --save puppeteer\n```\n\n#### 例 1 —— 网页截图\n\nPuppeteer 安装好之后，我们就可以开始写一个简单的例子。这个例子直接照搬自官方文档，它可以对给定的网站进行截图。\n\n首先创建一个 js 文件，名字随便起，这里我们用 `test.js` 作为示例，输入以下代码：\n\n```javascript\nconst puppeteer = require('puppeteer');\n\nasync function getPic() {\n const browser = await puppeteer.launch();\n const page = await browser.newPage();\n await page.goto('https://google.com');\n await page.screenshot({path: 'google.png'});\n\n await browser.close();\n}\n\ngetPic();\n```\n\n下面我们来逐行分析上面的代码。\n\n* **第 1 行：** 引入依赖。\n* **第 3–10 行：** 核心代码，自动化过程在这里完成。\n* **第 12 行：** 执行 `getPic()` 方法。\n\n细心的读者会发现，`getPic()` 前面有个 `async` 前缀，它表示 `getPic()` 方法是个异步方法。`async` 和 `await` 成对出现，属于 ES 2017 新特性。介于它是个异步方法，所以调用之后返回的是 `Promise` 对象。当 `async` 方法返回值时，对应的 `Promise` 对象会将这个值传递给 `resolve`（如果抛出异常，那么会将错误信息传递给 `Reject`)。\n\n在 `async` 方法中，可以使用 `await` 表达式暂停方法的执行，直到表达式里的 `Promise` 对象完全解析之后再继续向下执行。看不懂没关系，后面我再详细讲解，到时候你就明白了。\n\n接下来，我们将会深入分析 `getPic()` 方法：\n\n* **第 4 行：**\n\n```javascript\nconst browser = await puppeteer.launch();\n```\n\n这段代码用于启动 puppeteer，实质上打开了一个 Chrome 的实例，然后将这个实例对象赋给变量 `browser`。因为使用了 `await` 关键字，代码运行到这里会阻塞（暂停），直到 `Promise` 解析完毕（无论执行结果是否成功）\n\n* **第 5 行：**\n\n```javascript\nconst page = await browser.newPage();\n```\n\n接下来，在上文获取到的浏览器实例中新建一个页面，等到其返回之后将新建的页面对象赋给变量 `page`。\n\n* **第 6 行：**\n\n```javascript\nawait page.goto('https://google.com');\n```\n\n使用上文获取到的 `page` 对象，用它来加载我们给的 URL 地址，随后代码暂停执行，等待页面加载完毕。\n\n* **第 7 行：**\n\n```javascript\nawait page.screenshot({path: 'google.png'});\n```\n\n等到页面加载完成之后，就可以对页面进行截图了。`screenshot()` 方法接受一个对象参数，可以用来配置截图保存的路径。注意，不要忘了加上 `await` 关键字。\n\n* **第 9 行：**\n\n```javascript\nawait browser.close();\n```\n\n最后，关闭浏览器。\n\n#### 运行示例\n\n在命令行输入以下命令执行示例代码：\n\n```shell\nnode test.js\n```\n\n以下是示例里的截图结果：\n\n\n\n是不是很厉害？这只是热身，下面教你怎么在非 headless 环境下运行代码。\n\n非 headless？百闻不如一见，自己先动手试一下吧，把第 4 行的代码：\n\n```javascript\nconst browser = await puppeteer.launch();\n```\n\n换成这句：\n\n```javascript\nconst browser = await puppeteer.launch({headless: false});\n```\n\n然后再次运行：\n\n```shell\nnode test.js\n```\n\n是不是更炫酷了？当配置了 `{headless: false}` 之后，就可以直观的看到代码是怎么操控 Chrome 浏览器的。\n\n这里还有一个小问题，之前我们的截图有点没截完整的感觉，那是因为 `page` 对象默认的截屏尺寸有点小的缘故，我们可以通过下面的代码重新设置 `page` 的视口大小，然后再截取：\n\n```javascript\nawait page.setViewport({width: 1000, height: 500})\n```\n\n这下就好多了：\n\n\n\n最终代码如下：\n\n```javascript\nconst puppeteer = require('puppeteer');\n\nasync function getPic() {\n const browser = await puppeteer.launch({headless: false});\n const page = await browser.newPage();\n await page.goto('https://google.com');\n await page.setViewport({width: 1000, height: 500})\n await page.screenshot({path: 'google.png'});\n\n await browser.close();\n}\n\ngetPic();\n```\n\n#### 例 2 —— 爬取数据\n\n通过上面的例子，你应该掌握了 Puppeteer 的基本用法，下面再来看一个稍微复杂点的例子。\n\n开始前，不妨先看看 [官方文档](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#)。你会发现 Puppeteer 能干很多事，像是模拟鼠标的点击、填充表单数据、输入文字、读取页面数据等。\n\n在接下来的教程里，我们将爬一个叫 [_Books To Scrape_](http://books.toscrape.com/) 的网站，这个网站是专门用来给开发者做爬虫练习用的。\n\n还是在之前创建的文件夹里，新建一个 js 文件，这里用 `scrape.js` 作为示例，然后输入以下代码：\n\n```javascript\nconst puppeteer = require('puppeteer');\n\nlet scrape = async () => {\n // Actual Scraping goes Here...\n \n // Return a value\n};\n\nscrape().then((value) => {\n console.log(value); // Success!\n});\n```\n\n有了上一个例子的经验，这段代码要看懂应该不难。如果你还是看不懂的话......那也没啥问题就是了。\n\n首先，还是引入 `puppeteer` 依赖，然后定义一个 `scrape()` 方法，用来写爬虫代码。这个方法返回一个值，到时候我们会处理这个返回值（示例代码是直接打印出这个值）\n\n先在 scrape 方法中添加下面这一行测试一下：\n\n```javascript\nlet scrape = async () => {\n return 'test';\n};\n```\n\n在命令行输入 `node scrape.js`，不出问题的话，控制台会打印一个 `test` 字符串。测试通过后，我们来继续完善 `scrape` 方法。\n\n**步骤 1：前期准备**\n\n和例 1 一样，先获取浏览器实例，再新建一个页面，然后加载 URL：\n\n```javascript\nlet scrape = async () => {\n const browser = await puppeteer.launch({headless: false});\n const page = await browser.newPage();\n await page.goto('http://books.toscrape.com/');\n await page.waitFor(1000);\n // Scrape\n browser.close();\n return result;\n};\n```\n\n再来分析一下上面的代码：\n\n首先，我们创建了一个浏览器实例，将 `headless` 设置为 `false`，这样就能直接看到浏览器的操作过程：\n\n```javascript\nconst browser = await puppeteer.launch({headless: false});\n```\n\n然后创建一个新标签页：\n\n```javascript\nconst page = await browser.newPage();\n```\n\n访问 `books.toscrape.com`：\n\n```javascript\nawait page.goto('http://books.toscrape.com/');\n```\n\n下面这一步可选，让代码暂停执行 1 秒，保证页面能完全加载完毕：\n\n```javascript\nawait page.waitFor(1000);\n```\n\n任务完成之后关闭浏览器，返回执行结果。\n\n```javascript\nbrowser.close();\nreturn result;\n```\n\n步骤 1 结束。\n\n**步骤 2： 开爬**\n\n打开 Books to Scrape 网站之后，想必你也发现了，这里面有海量的书籍，只是数据都是假的而已。先从简单的开始，我们先抓取页面里第一本书的数据，返回它的标题和价格信息（红色边框选中的那本）。\n\n\n\n查一下文档，注意到这个方法能模拟页面点击：\n\n**page.click(selector[, options])**\n\n* `selector` 选择器，定位需要进行点击的元素，如果有多个元素匹配，以第一个为准。\n\n这里可以使用开发者工具查看元素的选择器，在图片上右击选中 inspect：\n\n\n\n上面的操作会打开开发者工具栏，之前选中的元素也会被高亮显示，这个时候点击前面的三个小点，选择 copy - copy selector：\n\n\n\n有了元素的选择器之后，再加上之前查到的元素点击方法，得到如下代码：\n\n```javascript\nawait page.click('#default > div > div > div > div > section > div:nth-child(2) > ol > li:nth-child(1) > article > div.image_container > a > img');\n```\n\n然后就会观察到浏览器点击了第一本书的图片，页面也会跳转到详情页。\n\n在详情页里，我们只关心书的标题和价格信息 —— 见图中红框标注。\n\n\n\n为了获取这些数据，需要用到 `page.evaluate()` 方法。这个方法可以用来执行浏览器内置 DOM API ，例如 `querySelector()`。\n\n首先创建 `page.evaluate()` 方法，将其返回值保存在 `result` 变量中：\n\n```javascript\nconst result = await page.evaluate(() => {\n// return something\n});\n```\n\n同样，要在方法里选择我们要用到的元素，再次打开开发者工具，选择需要 inspect 的元素：\n\n\n\n标题是个简单的 `h1` 元素，使用下面的代码获取：\n\n```javascript\nlet title = document.querySelector('h1');\n```\n\n其实我们需要的只是元素里的文字部分，可以在后面加上 `.innerText`，代码如下：\n\n```javascript\nlet title = document.querySelector('h1').innerText;\n```\n\n获取价格信息同理：\n\n\n\n刚好价格元素上有个 `price_color` class，可以用这个 class 作为选择器获取到价格对应的元素：\n\n```javascript\nlet price = document.querySelector('.price_color').innerText;\n```\n\n这样，标题和价格都有了，把它们放到一个对象里返回：\n\n```javascript\nreturn {\n title,\n price\n}\n```\n\n回顾刚才的操作，我们获取到了标题和价格信息，将它们保存在一个对象里返回，返回结果赋给 `result` 变量。所以，现在你的代码应该是这样：\n\n```javascript\nconst result = await page.evaluate(() => {\n let title = document.querySelector('h1').innerText;\n let price = document.querySelector('.price_color').innerText;\nreturn {\n title,\n price\n}\n});\n```\n\n然后只需要将 `result` 返回即可，返回结果会打印到控制台：\n\n```javascript\nreturn result;\n```\n\n最后，综合起来代码如下：\n\n```javascript\nconst puppeteer = require('puppeteer');\n\nlet scrape = async () => {\n const browser = await puppeteer.launch({headless: false});\n const page = await browser.newPage();\n\n await page.goto('http://books.toscrape.com/');\n await page.click('#default > div > div > div > div > section > div:nth-child(2) > ol > li:nth-child(1) > article > div.image_container > a > img');\n await page.waitFor(1000);\n\n const result = await page.evaluate(() => {\n let title = document.querySelector('h1').innerText;\n let price = document.querySelector('.price_color').innerText;\n\n return {\n title,\n price\n }\n\n });\n\n browser.close();\n return result;\n};\n\nscrape().then((value) => {\n console.log(value); // Success!\n});\n```\n\n在控制台运行代码：\n\n```javascript\nnode scrape.js\n// { title: 'A Light in the Attic', price: '£51.77' }\n```\n\n操作正确的话，在控制台会看到正确的输出结果，到此为止，你已经完成了 web 爬虫。\n\n#### 例 3 —— 后期完善\n\n稍加思考一下你会发现，标题和价格信息是直接展示在首页的，所以，完全没必要进入详情页去抓取这些数据。既然这样，不妨再进一步思考，能否抓取所有书的标题和价格信息？\n\n所以，抓取的方式其实有很多，需要你自己去发现。另外，上面提到的直接在主页抓取数据也不一定可行，因为有些标题可能会显示不全。\n\n**拔高题**\n\n目标 —— 抓取主页所有书籍的标题和价格信息，并且用数组的形式保存返回。正确的输出应该是这样：\n\n\n\n开干吧，伙计，其实实现起来和上面的例子相差无几，如果你觉得实在太难，可以参考下面的提示。\n\n* * *\n\n**提示：**\n\n其实最大的区别在于你需要遍历整个结果集，代码的大致结构如下：\n\n```javascript\nconst result = await page.evaluate(() => {\n let data = []; // 创建一个空数组\n let elements = document.querySelectorAll('xxx'); // 选择所有相关元素\n // 遍历所有的元素\n // 提取标题信息\n // 提取价格信息\n data.push({title, price}); // 将数据插入到数组中\n return data; // 返回数据集\n});\n```\n\n* * *\n\n如果提示了还是做不出来的话，好吧，以下是参考答案。在以后的教程中，我会在下面这段代码的基础上再做一些拓展，同时也会涉及一些更高级的爬虫技术。你可以在 [**这里**](https://docs.google.com/forms/d/e/1FAIpQLSeQYYmBCBfJF9MXFmRJ7hnwyXvMwyCtHC5wxVDh5Cq--VT6Fg/viewform) 提交你的邮箱地址进行订阅，有新的内容更新时我们会通知你。\n\n**参考答案：**\n\n```javascript\nconst puppeteer = require('puppeteer');\n\nlet scrape = async () => {\n const browser = await puppeteer.launch({headless: false});\n const page = await browser.newPage();\n\n await page.goto('http://books.toscrape.com/');\n\n const result = await page.evaluate(() => {\n let data = []; // 创建一个数组保存结果\n let elements = document.querySelectorAll('.product_pod'); // 选择所有书籍\n\n for (var element of elements){ // 遍历书籍列表\n let title = element.childNodes[5].innerText; // 提取标题信息\n let price = element.childNodes[7].children[0].innerText; // 提取价格信息\n\n data.push({title, price}); // 组合数据放入数组\n }\n\n return data; // 返回数据集\n });\n\n browser.close();\n return result; // 返回数据\n};\n\nscrape().then((value) => {\n console.log(value); // 打印结果\n});\n```\n\n### 结语：\n\n谢谢观看！如果你有学习 NodeJS 的意向，可以移步 [**Learn Node JS — The 3 Best Online Node JS Courses**](https://codeburst.io/learn-node-js-the-3-best-online-node-js-courses-87e5841f4c47)。\n\n每周我都会发布 4 篇有关 web 开发的技术文章，[**欢迎订阅**](https://docs.google.com/forms/d/e/1FAIpQLSeQYYmBCBfJF9MXFmRJ7hnwyXvMwyCtHC5wxVDh5Cq--VT6Fg/viewform)！或者你也可以在 Twitter 上 [**关注我**](https://twitter.com/BrandonMorelli)\n\n---\n\n> [掘金翻译计划](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)、[前端](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#设计)、[人工智能](https://github.com/xitu/gold-miner#人工智能)等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)、[官方微博](http://weibo.com/juejinfanyi)、[知乎专栏](https://zhuanlan.zhihu.com/juejinfanyi)。\n"
},
{
"path": "TODO/a-guide-to-interviewing-for-product-design-internships.md",
"content": "\n>* 原文链接 : [A Guide to Interviewing for Product Design Internships](https://medium.com/facebook-design/a-guide-to-interviewing-for-product-design-internships-d719dd4c146c#.jhgjr12c)\n* 原文作者 : [Andrew Hwang](https://medium.com/@ahwng)\n* 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner)\n* 译者 : \n* 校对者: \n\n\n\n\n\n> “We reviewed your portfolio, and we’d love to interview you for our product design internship. What times will you be available in the upcoming week?”\n\nUpon seeing this email, your pulse quickens. Your eyes widen. You drool a little. You sent out so many cover letters, submitted so many applications, and — finally! A small but meaningful step on the journey to becoming a full-fledged product designer.\n\nBut what will they ask you? And how could you possibly prepare?\n\n\nBreaking into the product design field as a student is hard. Some product designers stumble into the field with a graphic design or art degree. Others are self-taught. Either way the field of digital product design is so new that there are very few resources for curious students.\n\nIn high school I hadn’t yet heard of the product design industry. I dabbled in web design but quite frankly, I was terrible at it. I couldn’t imagine it going anywhere.\n\nBut over time I accumulated enough design work to find myself with a design internship at a mobile app startup. There I first got a taste of product design. And I fell in love with the problem-solving, the complexity, the collaboration with product managers and engineers and illustrators to build something from nothing. So I pursued it ruthlessly.\n\nThe following summer I ramped up my internship application game, submitting resumes to over 50 companies. Five of them responded positively. Of those five, three small tech companies interviewed me immediately. But I went into those interviews not having the faintest idea what they’d ask, so those doors shut as quickly as they had opened.\n\nEvernote was the fourth company to respond positively. And though I had botched the previous three interviews, I had a better idea of what to expect when I hopped on the phone with the Evernote designers.\n\nI landed the Evernote product design internship that summer. And with a bit more experience under my belt, the following summer I received an offer for Facebook’s product design internship. Now I’m a full-time product designer at Facebook.\n\nAs a student I interviewed for product design internships at many of the Silicon Valley behemoths: Google; Facebook; Mozilla; Quora; Groupon; Dropbox. And if one thing stuck with me, it was that product design interviews are quite similar across tech companies. They usually include all or some combination of the following:\n\n1. Phone screen\n2. Portfolio review\n3. Design exercise\n4. App critique\n\nLet’s dig a little deeper into each step\n\nThe phone screen allows the recruiter to get to know you better, to go past the words on your resume. You might be asked:\n\n* What’s your background like?\n* How did you get into design?\n* Why are you interested in working here?\n* What was your favorite past project, and why?\n\nDuring the phone screen, sound excited. And come prepared with questions for the recruiter. Try to ask questions specific to the company, questions that are not easily answerable with a Google search. Recruiters can tell generic questions from authentic ones, and asking canned questions may damage the strength of your candidacy.\n\nWhile preparing for my first phone screen with Facebook, for instance, I [discovered](http://www.quora.com/What-do-Facebook-interns-do) the company regularly hosts intern hack-a-thons. So during the phone screen I probed further about the hack-a-thons: How do they work, exactly? Is it okay for interns to completely ignore their summer projects during the hack-a-thons? Who reviews the final projects? Questions like these show genuine interest. They tell the recruiter you’ve done your homework and care deeply about the internship opportunity.\n\nIf the recruiter thinks your background and interests might be a good fit for the internship, the next step is usually a showcase of your past work.\n\nHere you’ll speak with a designer. Typically, the review will include a deep dive into three or four of your portfolio projects. The point of the portfolio review is for the designer to tease out your design process, to understand what types of questions you ask and what kinds of solutions you consider. In short, the interviewer wants to know how you approach design. You might be asked questions such as:\n\n* What were the problems you were trying to solve?\n* Who did you partner with?\n* What kind of research did you perform, if any?\n* Why did you choose that design solution over this one?\n* What were the tradeoffs?\n* What challenges did you face in designing X?\n* If you had more time to work on Y, what would you change?\n* If you got stuck on a certain design problem, how did you overcome it?\n\nOne of your main tasks in the portfolio review is to show **intentionality** in your design process, to demonstrate that you thought through each design decision carefully, from the high-level product features to the visual styling of a button.\n\nDescribe your rationale clearly. Arbitrary design decisions won’t hold up to the scrutiny of a portfolio review.\n\n\n\n
\n\nMake sure you can articulate your design decisions. Comic credit: Andrew Hwang\n\n\n\nDuring the portfolio review, you should also be able to **thoughtfully critique** your own designs. No design solution is perfect. Reflect on your projects and come up with suggestions for how to improve them.\n\nMany companies think of product design as having three pillars:\n\n1. Visual design: How polished are your designs? Do they feel well-crafted and refined? Are they aesthetically pleasing?\n2. Interaction design: Can you design intuitive end-to-end user flows? Do you consider edge cases appropriately? How easy is it to get from point A to point B in an app you designed?\n3. Product thinking: What problems are you trying to solve? Who are you designing for? What features should be included in your product, and why?\n\nThe portfolio review helps the interviewer gauge your strengths and weaknesses in these areas. Maybe you’re more comfortable with visual design and less so with interaction design. Maybe you’re a fantastic product thinker but can’t build a prototype to save your life. But that’s okay! You’re a student. Interviewers don’t expect you to be a rockstar in every facet of product design. Being honest about your weaknesses shows humility, a vital quality for any designer.\n\n**Preparing for the portfolio review is key**. While interviewing I often found myself nervously rushing through each project in my portfolio. Having a list of talking points prevented me from skipping over any important items and forced me to slow down.\n\nYour list of talking points should shed more light on the specific design process for each project, elaborating on what went wrong and what went right. Reflect deeply on each piece you plan to present. Write down everything you can remember about the design process. Ask a friend to mock interview you. Prepare, prepare, prepare!\n\nIf the portfolio review goes well, it’s on to the design exercise.\n\nThe typical design exercise follows this pattern:\n\n_Please design an interface/object/product that does X or solves Y._\n\nIts on-the-spot nature can make the design exercise intimidating. Where the portfolio review fleshed out your past design processes, the design exercise asks that you flex your design chops right here, right now.\n\nSome exercises I’ve encountered:\n\n* Design a web form that collects only high-quality phone numbers. That is, if you called the phone numbers, someone would receive the call.\n* Design the homepage for a search engine.\n* Brainstorm products you could design using the Kindle’s e-reader screen material.\n\nEvery designer has their own design process, so I can’t exactly tell you how to go about the design exercise. But I’d suggest thinking about who you’re designing for, quickly sketching out many different options, and analyzing the tradeoffs of each option as you go. Don’t dive too deeply into the interaction or visual details of any one option before completing a thorough high-level exploration.\n\nI was once asked to design a mobile app that made it easy for restaurant customers to split the bill. The exercise started well. I quickly sketched one design option where the waiter enters the items on the receipt. Then another option where the customer enters the data by hand. But before finishing the high-level exploration, I became married to this option, diving too far into the details (what would the layout be? how would the typography work?)\n\nI wasted my time on the visual details and as a result, I didn’t have enough time to explore other types of solutions (e.g. using the customer’s smartphone to take a picture of the receipt). The week after that interview I received a rejection from the recruiter. But looking back, it taught me a valuable lesson about the design exercise: the interviewer cares much more about your high-level idea explorations than your pixel-level ambitions.\n\n\n\n
\n\nDon’t get caught up in the visual design details before thinking deeply about the bigger picture. Comic credit: Andrew Hwang\n\n\n\nIn the design exercise it’s crucial to **demonstrate your idea generation skills.** So don’t be afraid to come up with some crazy blue-sky ideas. Ask your interviewer questions. Don’t assume anything. And remember, brainstorming and analyzing high-level feature ideas is much more meaningful than exploring a bunch of different button styles.\n\nThankfully, the high-pressure design exercise is not part of every interview loop. You might be tasked with the app critique instead.\n\nPick an app. Any app. Make sure it’s an app you know well.\n\nThe app critique is intended to analyze your product thinking skills. You’ll walk the interviewer through an app of your choice. Along the way, the interviewer will stop you and ask questions such as:\n\n* What audience do you think this app was intended for?\n* What problem is the app supposed to solve?\n* How well does it solve the problem?\n* What are your favorite features on the app, and why?\n* What are your least favorite features on the app? Why?\n* Why do you think the designers made decision X?\n* What is the point of feature Y? What value does it add?\n* How would you improve the app?\n* Who are the app’s competitors?\n* What does the app do better than its competitors? What does it do worse?\n\nStrategizing for the app critique is hard because it relies so heavily on your product intuition. The best advice I can give is to practice analyzing apps at a high level. Forget about the colors, the typography, the buttons. Instead, think about **what value the app provides**. And **how features in the app align with the app’s overall value proposition**. Snapchat, for example, strives to be _the_ app for live sharing with friends. So they built awesome features like Live Snapchat stories for major events and Live Video in direct message threads.\n\nProduct design interviews are hard. They’re stressful, and open-ended, and you can receive rejection after rejection with no idea what you’re doing wrong.\n\nBut interviewing for product design internships is like any other skill. With time and practice, you improve. It never hurts to interview for a few companies you have no intention of working at, just to practice your interviewing skills.\n\nHave notes prepared before you start each interview. Especially the portfolio review. I found it extremely helpful to write down a list of talking points for each project. This list prevents you from nervously skipping over any important items.\n\nLast but not least, the design community is small and tight-knit and people are more than willing to help if you can just find the courage to ask.\n\n![](\"https://i.loli.net/2018/03/21/5ab1c8723d6de.jpg\")