前端聚焦周刊：第 418 期

这里是 Frontend Focus 的中文翻译项目，每周在 Oh My RSS 平台首发。

如有翻译错误或国外优质文章推荐，欢迎提交 issue。

原文：Frontend Focus issue 418

翻译及校对：richshaw2015，Yully Che

🚀 刊首

传统报纸教给我们的网页设计法则

报纸教给我们很多网页设计的基本法则，例如阅读比重分布控制、相似内容的网格划分、突出核心内容等。

Frederick O’Brien 深入研究了从印刷媒体上学到的东西。

Smashing Magazine

解密 Blink 开发流程

新特性是如何一步步被添加到 Chrome（Chromium, Blink）中的？这篇是整个流程的概述，也有对话/视频版本。

Google

GSAP ‘GreenSock’ 3.0版本发布

号称瑞士军刀的流行 JavaScript 动画库刚刚发布了3.0版本。这是一个大版本升级，有超过50个新特性和变更，包括简化的 API、新的运动路径插件、ES6模块支持等。

您可以在这里查看完整的发行说明，或者观看推介视频。

GreenSock

▶ 基于 SVG 的 Web 交互动画

一次愉快的 SVG 动画探索之旅，本篇讲述了这个格式是如何打通设计和开发之路的。

Cassie Evans

Firefox 的未来复兴之路

“Ultimately, Firefox’s future is as much down to the decisions of a few regulators as it is about anything Mozilla can do”.

Alex Hern (The Guardian)

Chrome、Edge、Safari 在中国黑客大赛上被攻破

中国的顶级白帽黑客在成都对当下主流浏览器进行了0 day 测试。

Catalin Cimpanu

📙 文章、教程、观点

用 JavaScript 将图像裁剪成特定比例

本篇用三分钟的教程讲述了用 HTML canvas API 和一些基本的数学知识开发一个简单的裁剪函数，以裁剪出不同比例的图像。

Rik Schennink

▶ 看完 Rémi Parmentier 的这些视频，你就能成为 HTML 邮件极客

对于开发兼容各种奇怪邮件客户端（和浏览器的差异巨大）的 HTML 邮件十分有用。

Rachel Andrew

▶ 开发者应该了解的 HTTP 头部

探讨 HTTP 头部是如何直接影响到用户体验的，点此查看相关演示。

Stefan Judis

你是如何删除冗余 CSS 的？

Chris Coyier 提出了对现有识别冗余 CSS 工具（宣称可以完美处理）的质疑，列举它们的问题并给出了替代的实践方案。

CSS Tricks

▶ `:focus` 我们都用错了

本篇讲述了 focus 的各种状态，以及其如何提升键盘用户浏览体验的。

提醒：请不要关闭:focus。

Kevin Powell

开发 Steam 平台热门 HTML5 游戏所需的工具大全

他们的游戏卖了20多万份，所以很有参考价值。

Maschinen-Mensch

iPad 上的 Web 开发

概述了如何在 iPad 上进行全栈开发，包括 iOS 的自动化辅助手段。

Lachlan Campbell

CSS 中的吃豆人…

使用 clip path 属性开发的“快乐的吃豆人”游戏小教程。哇哇哇！

Maks Akymenko

JS 本地弹窗的几种不同类型比较

Elliot Goldman

🔧 代码、工具、资源

siriwave：一个模仿 Apple Siri 波形的 JS 库

这不是一个新项目，但是最近更新了所以被我们收录了。一个 JS 版的 Siri 波形外观库，这里有篇详细的博客讲述了其效果的实现细节，点此查看演示。

Flavio Maria De Stefano

ScrollTrigger：页面的滚动触发器

一个基于当前滚动位置触发行为的库。例如当元素进入视口时实现淡入效果。

Erik Terwan

bootlint：Bootstrap 项目的 HTML 校验工具

尽管刚刚发布1.0版本，但是其相当流行和成熟，它用很普通的方式检查使用 Bootstrap 网页中的常见 HTML 错误。

Bootstrap

Flynt：面向开发者的基于组件的 WordPress 主题

它是开源的，有一个商业变种。

Bleech

💻 招聘

译者注：如需了解，请查看原文。

🗓 未来大事记