Weekly 2016-08-04

文章

Full Width Containers in Limited Width Parents

作者就如何用 CSS 在一个已经限定宽度的容器里放一个和浏览器视窗宽度大小一样的容器（即类似我们常见的 100% width）的多种场景进行讨论，并给出解决方案。解决问题的思路并不复杂，但其中提及的一些比较新的 CSS 特性可以留意下，例如 calc，@supports，vw 等。

CSS Containment in Chrome 52

在 Chrome 52 版本中已经支持一个非常新的 CSS 属性：contain。这个属性可以用来限定浏览器样式，布局绘制工作的一个作用域，从而提升页面渲染和动画的一个性能。举个简单的例子，一个 div 如果声明了 contain: layout，那么表示这个元素的布局不会影响外部的布局，外部的布局也不会影响它内部的布局。原本假设当我们调整一个元素的 padding-left 时，浏览器需要检查每一个独立的元素来确定布局的变化。但如果你修改的元素是在一个声明了 contain: layout 的元素内部时，则可以大大减少浏览器检测和重绘的动作，详情请查看文章内容，contain 属性更多说明可以查阅 W3C Draft

A Comprehensive Look at jQuery Selectors

这篇文章比较全面地介绍了 jQuery 的各种选择器，某些程度上可以帮助我们更加方便地获取需要的元素。虽然 jQuery 的选择器引擎很好很强大，但是日常使用中还是建议能用 CSS 选择器搞定的，便使用原生浏览器提供的方法来获取元素吧，例如 querySelector 和 querySelectorAll 等。

web-scraping-with-nightmare-js

nightmare 是基于 PhantomJS 封装的一个 web 页面自动化的类库，适合用来做页面自动化的测试，提供的 API 相对来说比较舒服，类似 thenable 的方式。这篇文章是一个使用 nightmare 的介绍，使用 ngihtware 访问页面，操作页面，对页面截图，执行脚本等，还附带了一个操作的视频，可以在这个的基础上添加合适的断言库来做 UI 自动化的测试，也可以进行截图查看页面变更等。

Node.js 发布 6.3.1 版本

Node.js 又发布新的版本，详细的 commit 可以参考上述链接。主要还是做 issue 的 fix。变更的内容不多，主要就是提升 Buffer#form 和 Buffer#write 的性能，升级 V8 引擎到 5.0.71.xx 版本。

我们是如何做好前端工程化和静态资源管理

京东凹凸实验室前端团队出的文章，内容比较详细，涉及前端开发时的组件化，性能优化，以及自动化的资源构建管理等，值得一看，对改善我们现有的前端开发模式和工具等有一定的借鉴意义。

扒一扒 CSS 语言的诞生史

这是一篇译文，原文：The Languages Which Almost Became CSS。
可以当成一个故事来看，讲述了从有 HTML 到 CSS 诞生过程中发生的一些事情，以及为什么最后会是 CSS 来处理 HTML 的样式。在期间出现过很多其他的样式解决方案，有一些方案的特性甚至出现在我们现在的 css 预处理器中。

代码

Aurelia 1.0 is Here!!!

外国遍地是轮子，一言不合我就造。Aurelia 1.0 发布，Aurelia 是以前 Angular 2 核心团队成员之一的 Rob Eisenberg 创建的，一个面向未来，全面提供模块化，结构化的前端框架，和 angular 2 有点类似，也包括了 MV* 和数据双向绑定等功能。由于使用了比较多新的 JavaScript 特性，所以对浏览器版本要求较高。有兴趣的人可以了解一下，个人感觉更多是应用在对浏览器无要求的项目上，或者 Electron 类的桌面应用上可以一玩。

GianlucaGuarini/allora

一个简单的库，利用 ES6 的 proxy 把一个对象的所有 API 转化为返回 promise 的方法。proxy 浏览器支持现在还未普及，但是 Node 6 以上已经可以使用，附一篇详细介绍 Proxy 的文章：深入浅出ES6（十二）：代理 Proxies

工具

hyperterm

一个用 Electron + React 开发的 terminal 客户端，暂时只有 Mac 版本下载（官网说很快有 windows 和 Linux 版本），对中文支持不好（估计会在新版本中优化），但是特点是可以使用 node 来开发各种各样的插件。

cssstats

一个可视化的站点 CSS 分析网站，输入 url 便可以获得相关 CSS 文件的信息，包括使用了多少个选择器，多少个属性声明，多少颜色值，背景颜色值等等。

starred

通过你的 Github 帐号 star 的内容帮你创建一个 awesome list，如：awesome-stars。可以方便快速查找和分享自己 Github star 的东西。