众成翻译每周精选 · 第19期

每周精选 · 第19期 2016-10-29 JavaScript 模块简史 砖模块和依赖 你是否是 JavaScript 新手，搞不清楚模块、模块加载器和模块打包器？或者你已经写了 JavaScript 一段时间，但是没法掌握模块的一些行话？你是否听过像 CommonJS、AMD、Browserify、SystemJS、Webpac…… 译者 网络埋伏纪事 约5977字 React 初学者教程 15：设置 React 开发环境 概述：学习如何配置 Node、Babel 和 Webpack 来高效创建 React 应用。 最后要学习的是如何设置创建 React 应用的开发环境。 迄今为止，我们都是通过包含几个 JS 文件来创建 React 应用的： <script src=&qu…… 译者 网络埋伏纪事 约3899字 React 初学者教程 14：在 React 中访问 DOM 元素 有时我们需要直接访问 HTML 元素上的属性和方法。在 React 的缤纷世界里，JSX 代表纯粹的标记，那么为什么你会想要直接处理可怕的 HTML 呢？因为你会发现，很多时候直接通过 JavaScript DOM API 处理 HTML 元素，比用 Reac…… 译者 网络埋伏纪事 约1872字 React 初学者教程 13：用 React 创建一个简单的 Todo List 应用 概述：通过学习如何创建经典的 Todo List 应用，将所有学过的 React 技巧投入到实战中。 如果说创建 “Hello, World!” 示例是庆祝你开始涉足 React，那么创建一个经典的 Todo List 应用是庆祝你接近掌握 React！在本教…… 译者 网络埋伏纪事 约3757字 React 初学者教程 12：在 React 中用 React Router 创建单页应用 概述：通过学习如何使用 React Router 来创建一个单页应用，来提升 React 技能。 现在我们已经熟悉了 React 的基础知识，该提升几个档次了。下面我们要用 React 创建一个单页应用程序（即 SPA）。如同我们在 React 介绍中所言，单…… 译者 网络埋伏纪事 约5520字 纯CSS过滤内容 纯CSS过滤内容 译者提示： 边看demo边食用，效果更佳 科普一下伪元素：target 仅仅通过CSS过滤内容，这是一个非常有趣且有吸引力的方法。 （译者注：作者在这里是说，他在半夜两点的时候喝了酒，然后突然想做个实践，就是纯CSS过滤内容） 通过CSS…… 译者 cherryvenus 约2492字 网页设计和开发的55个顶尖博客 Top Blogs About Web Design And Web Development 在这篇推文中，我收集使到一些使得网页设计师和开发人员更方便网站建设的站点。这些站点都有精心编写的，明确的，内容充实的的文章，内容包含对CMS之如WordP…… 译者 Alecc 约5975字 React 初学者教程 11：组件的生命周期 概述：学习生命周期方法，从而更好地理解组件能做和不能做什么。 在开始，我们以一个很简单的视图组件以及他们要做什么开始。随着我们对 React 更多，做了更酷以及更复杂的事情，结果发现组件并非那么简单。它们帮助处理属性、状态、事件，并且经常负责其它组件的幸福。跟…… 译者 网络埋伏纪事 约2487字 React 初学者教程 10：React 中的事件 概述：通过学习如何处理事件，学习如何将无趣的 React 应用变为有趣而具互动性的应用。 迄今为止，我们所有的示例都是只在页面加载时执行。你可能会猜到，这是不正常的。在很多应用中，特别是重 UI 类型的应用中，应用程序要做的很多事情只是对某种事情的响应。这里，…… 译者 网络埋伏纪事 约4321字 React 初学者教程 9：从数据到 UI 简介：利用 JSX 的灵活性，将烦人的数据转化为甜蜜的 UI 元素。 在创建应用时，术语 props、state、组件、JSX 标记、render 方法以及其它 React 主义也许是你脑袋中最后考虑的事情。大部分时间，你是处理 JSON 对象、数组以及其它数…… 译者 网络埋伏纪事 约1876字 你可能不知道的PostCSS 最近我尝试在几个不同的工作流中使用PostCSS——Meteor工作流, 简单的React以及Webpack工作流。由于所有人都如此兴奋地去使用它，我意识到我该试试并且它没有让我失望。你将看到我在了解PostCSS之前对它的一些看法，因此这可以说是一篇给那些还…… 译者 echodis 约1937字 React 初学者教程 8：处理状态 到目前为止，我们已经创建的组件都是无状态的（stateless）。它们有从它们的父组件传递进来的属性（亦称 props），但是一旦组件活跃起来，就没有什么能改变它们。一旦属性被设置了，就被当作是不可修变的（immutable）。对于很多交互场景来说，你肯定不想…… 译者 网络埋伏纪事 约2169字 React 初学者教程 7：深入 JSX 你可能已经注意到，在前面的教程中我们用到很多 JSX。但是我们确实还没有认真看看 JSX 到底是什么。它实际上是如何工作的呢？为什么我们不就把它叫 HTML 呢？它到底有哪些怪癖？在本教程中，我们将回答所有这些问题。我们将做一些严肃的回溯（以及一些前溯），来深…… 译者 网络埋伏纪事 约2321字 React 初学者教程 6 ：传递属性 处理属性有令人沮丧的一面，在前一个教程中我们已经看到了一点。在只处理一层组件时，将属性从一个组件传递到另一个很简单。但是如果你想将一个属性在多层组件之间传递，事情就开始变得复杂了。 事情变得复杂从来不是一件好事情，所以在本教程中，我们来看看我们怎么做才能让在多…… 译者 网络埋伏纪事 约2842字 React 初学者教程 5 ：创建复杂的组件 简介：通过学习如何识别和创建依赖于其它组件的组件，从而轻松创建复杂 UI。即根据组件可组合性，来创建复杂的组件。 在前一教程中，我们学习了组件以及组件可以做的很棒的一些事情。我们知道组件是主要的方式，React 允许我们的界面元素像可重用的砖块一样，组件包含自…… 译者 网络埋伏纪事 约4486字 React 初学者教程 4: 在 React 中设置样式 长期以来，我们都是用 CSS 格式化 HTML 内容。用 CSS，可以很好地分离内容和表现形式。CSS 的选择器语法给我们很大的灵活性，来选择哪个要格式化，哪个会略过。你甚至找不到太多的问题来憎恨 CSS 的层叠。 好了，不要告诉 React 这些。React 译者 网络埋伏纪事 约3545字 Web Share API 介绍 告诉大家一个好消息！Chrome 团队的 Matt Giuca 正在开发一个叫做 Web Share 的简单 API，它允许网站调用本地平台的分享功能。 一直存在好几种方式在平台上调用本地的分享功能，但这些方式都有显著的缺陷。有 Web Intents （已死……译者 kayson 约913字 React 初学者教程 3: React 中的组件 组件是让 React 变得美好的事情之一，它是定义人们在使用应用程序时所看到的视觉和交互的主要方式之一。假如我们要完成的 app 是下面这个样子： 这是完成了的界面。在开发期间，从 React 项目的角度看，就不那么动人了。这个应用的视觉的几乎每一个部分都被…… 译者 网络埋伏纪事 约4190字 React 初学者教程 2: 创建第一个 React 应用 通过前面一章的学习，我们已经了解了有关 React 的基本信息，以及它是如何帮助我们轻松创建即使是最复杂的用户界面。但是对于 React 提供的所有精彩来说，刚开始学习它可不是最简单的事情。React 的学习曲线相当陡峭，里面大大小小的障碍不少。 本章会从创…… 译者 网络埋伏纪事 约2988字 CSS中的响应式图片 “响应式图片”这个术语的意思是“在html中的响应式图片”，换句话说，srcset和sizes属性是适用于<img>和<picture>元素的。但是这些html属性该如何映射在CSS中？ 过去几年，CSS一般不真正地参与响应式图片之旅的…… 译者 cherryvenus 约1940字 手把手教你处理下划线 译者百科： descenders:降部(不明白的看wiki百科) 设计链接的下划线可能是一件棘手的事，我总是忘记在什么情况下用什么方法。 然而谢天谢地, John Jameson 让我们在这篇博客中加快了处理这个问题的速度. 有许多不同的方法让你设计下划线。也…… 译者 cherryvenus 约2648字 React 初学者教程 1：React 简介 今天的 Web 应用程序除了外观比过去更好看以外，应用程序的架构和创建方式已经和过去有很大的不同。为突出这点，我们来看看如下的应用： 这是一个简单的商品目录浏览应用程序，它和这种类型的其它应用程序一样，通常包含一个主页、一个搜索结果页、一个详情页等等。 老式…… 译者 网络埋伏纪事 约2978字 控制ECMAScript版本发布的TC39流程 本博客文章解释了所谓TC39的过程，它指导了从2016年开始的ECMAScript（ES7）功能是如何设计的。 相关博文: ECMAScript 2016 (ES7)的最后功能级 关注ECMAScript 2017的功能 谁设计了ECMAScript? 答…… 译者 ron 约1626字 BBC网站性能的秘密 Jamie Knight揭露了BBC的网站技术，BBC是如何提升网站响应速度，以及引导用户从当前页流向下一页。 去年，在用户测试BBC新闻APP的会议期间，其中一位用户评论真的打击到了我、 他们声称：“我喜欢流向”。性能对我们的用户来说意味着什么，我认为没有…… 译者 cherryvenus 约2822字 React 进阶: Redux 本文是 Brad Westfall 的 React 三篇系列教程的最后一篇。我们将学习如何以高效而并非超级复杂的方式管理整个应用程序的状态。在 React 的旅程中，我们已经走了这么远，该在这里穿过终点线，并从这种开发方法中获得最大的回报了。 系列文章 第…… 译者 网络埋伏纪事 约6355字 无钥加密套接字协议层：技术细节追踪溯源 无钥SSL: 技术细节的追踪溯源 2014年9月19日 Nick Sullivan. Tweet 我们昨天宣布无钥SSL后，收到了排山倒海般积极的响应。我们从博客、Reddit、 Hacker News上通读了评论，人们看来对相关知识很有兴趣并希望了解更多…… 译者 hi 约7123字 2016年 HTML5 游戏开发现状 Andrzej Mazur 的客座文章 有人让我给 JS Kongress 大会写一篇 web 游戏开发的简短介绍， 在大会上我是编程委员会的成员，并且我打算成立一个 用 Phaser 开发 HTML5 游戏的工作室。我觉得从自己的角度回顾近几年来开发 HT…… 译者 kayson 约1156字 何时该使用 继承，何时该使用混合？ 20 November, 2014 何时该使用 @extend，何时该使用mixin 这是一个我曾被问到过许多次的问题：在什么时候我们应该使用mixin(混合)，而在什么时候我们应该使用@extend（继承）呢？ 有一条经验法则，说的是没有参数的mixin是不…… 译者 HappyAdu 约2766字 React 进阶: 容器组件 本文是 Brad Westfall 编写的 React 系列三篇教程中的第二篇。本系列讲授的都是基础 React 技能之上的晋级内容，用来创建更大的事情，比如完整的单页应用（SPA）。本文是上篇 React Router 的继续。 系列文章 第一部分: R…… 译者 网络埋伏纪事 约3770字 React 进阶: React Router 本文是 Brad Westfall 编写的 React 系列三篇教程中的第一篇。Brad 将本文投递给我时指出： React 初级教程有很多，但是晋级教程却不多。如果你是 React 新手，我推荐你观看这个介绍视频。本系列教程在这个视频的基础上继续。 系列文…… 译者 网络埋伏纪事 约4448字 12个酷炫的Chrome开发者工具建议 在JavaScirpt里设置断点，检阅HTML和CSS元素并在它们更新时实时查看变化，性能分析...没错，这周的文章主题就是IE8里的开发者工具。 [那是什么？真的假的？你确定？我知道了，谢谢，再见，不过真的没必要]。 好吧，刚才有人告诉我没人像我一样喜欢IE…… 译者 MinweiShen 约1899字 Yarn vs npm: 你需要知道的一切 作者的其它文章 HTML5 Input 元素状态 通过实验提高你的 JavaScript 学习乐趣 Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。就像我们可以从官方文档…… 译者 米粒 约2153字 逃离回调地狱 这篇文章已经由Mallory van Achterberg, Dan Prince 和 Vildan Softic 三位同行审核，在此感谢所有同行为创造优秀网站做出的努力。 作者的其他文章 Quick Tip: How to Throttle Scroll…… 译者 zhongshan 约2791字 新系统字体栈？ 几个月前，我写了篇关于如何在浏览器里使用内置关键词与font缩写属性使用系统字体的文章 (see Using System Fonts in the Browser) 。这些关键词很有用，但它们也一些缺点，其中主要的一点就是它们仅使用缩写的font属性。这意味…… 译者 SunshineLXH 约622字 我开始制作完美像素图标，以下是这一路探索所得 我开始制作完美像素图标。以下是这一路探索所得。 有些设计师对这种深入到像素的制作并不足够重视，其他人会认为它会魔性地从天而降，而只有极少数人接受这个挑战并切实地去创作。我个人深信不疑，图标是一个好的设计的非常重要的一环，因此，每个设计师都应该能够设计出一套图标…… 译者 showzeng 约3887字 使用 A-Frame 创建 3D 全景图 在 Mozilla 工作的五年里我见过许多很棒的项目。它们有的很受欢迎，有的很小众，但它们始终没有激起我与 MozVR 团队做 WebVR 和 A-Frame 项目的热情。 A-Frame 是一个致力于成为“构建 Web 虚拟现实的模块”，一个使用标记语言 …… 译者 米粒 约768字 了解并使用 CSS 中的 rem 单位 在 SitePoint 上有几篇是以 CSS 单位为主题的文章（比如：CSS 长度单位一览, CSS 3 中新的文字大小单位, and CSS 中 em 单位的作用） 今天我们深度了解一下 rem 单位，这个单位目前已经得到了优秀浏览器的支持，并且有一些兼容方…… 译者 耳机 约2685字