用于数据可视化的 SVG 模式，作者 Riccardo Scalco。

这就像我所有最喜欢的网络事物融合在一起。美丽的设计、SVG、可访问性、JavaScript 的程序化控制以及开源。#swoon

我第一次做这样的事情。很有趣。

随着平均网站大小接近 2 MB（！），Tim Kadlec 的新网站迫使我们思考，当您在移动连接上支付数据费用时，加载单个网站需要花费多少金钱。在德国，一个网站的费用相当于 25 美分。

（请鼓掌）

Stephanie Rewis（来自 Susan Robertson 的线索）

媒体查询中的em基准来自用户的设置（如果用户未更改，则为 16px 浏览器默认值）。

直观地看，似乎在:root / html级别更改font-size会改变1em的值，从而改变断点的位置，但事实并非如此。

在 Lyza Gardner详细介绍浏览器缩放时断点无法按预期命中后，基于 em 的媒体查询变得非常流行。这种情况现在已经不存在了，但我仍然发现很多人引用这个事实。因此，请注意，如果您不需要或不希望使用基于 em 的媒体查询，则不必强迫自己使用它们——如果您确实使用了它们，假设 1em = 16px 是您可以做到的最好的事情。

Heydon Pickering 使用了一些巧妙的 CSS 选择器，例如

li:nth-last-child(n+6),
li:nth-last-child(n+6) ~ li {
  /* Selects all list items if there are 6 or more */
}

类似于 Matt Mastracci 的文章，他专注于特定数字组的样式。

First，Last，Invert，Play。

Paul Lewis 演示了一种高效的方法来处理动画。这与您通常思考动画的方式相反。在这种方法中，您首先看到的元素状态是对元素最终状态进行操作的结果。然后，您删除所有转换（等等）以触发动画。

仅仅在一年前，Shane Osborne在这里介绍了 BrowserSync。它执行了我们作为前端开发人员真正喜欢的事情：样式注入、在必要时重新加载以及运行服务器，以便您可以在多个设备上进行测试并查看这些内容在所有设备上发生。但它还做了更多：同步即时输入的表单，同步跨设备的滚动位置，甚至跟随链接，因此当您浏览网站时，所有设备都会跟随您。

很高兴看到 2.0 版本发布了用于配置它的 UI 和一些不错的新功能。

Ana Tudor 制作了数十个美丽的示例，所有这些示例都只使用了一个<input type="range">。我们之前已经介绍过方法，但 Ana 进行了更深入的探讨，添加了有用的功能并使用了诸如/deep/之类的全新内容。

来自 Jason Garber 的合理建议。

对于大多数关注性能或隐私的网站来说，使用 Twitter 或 Facebook（等）提供的实际社交分享按钮是不可能的。太慢，太危险。这有点可惜，因为这些按钮功能很不错。一种替代方案是“分享意图”URL，这些 URL 通常链接到一个简单的页面，用于分享内容。Jonathan Suh 分享了如何使用弹出窗口稍微美化它们。我喜欢它，感觉好多了。