前端聚焦周刊：第 421 期

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

原文：Frontend Focus issue 421

翻译及校对：richshaw2015，Yully Che

🚀 刊首

年尾将至，我们整理了过去12个月最受欢迎的文章，这基本是2019年的所有亮点了。

一如既往的感谢支持我们的读者，希望在下一个十年能够继续保持知识同步。

我们将在1月上旬回来。

📈 2019文章点击排行

1. 2019前端开发手册

这份详细的指南一直都是很受欢迎的，4月份又更新了一些有用的资源、学习资料和开发工具，很值得参考。

来源：Cody Lindley

2. 你不知道却需要的10个 HTML 标签

这些有用的 HTML 标签可能你还不知道，包括 <output>、<meter>、<progress> 。

来源：Emma Wedekind

3. 深入 Edge 更换内核的决策过程

:format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/63734938/chromiumedgestoryhed.5.jpg)

在浏览器领域，今年最大的惊喜之一是 微软决定改用 Chromium 作为 Edge 的浏览器引擎。这个重大决定的幕后引起了很多关注，第一个版本预计在2020年初发布。

来源：Tom Warren

4. 前端开发的鸿沟

这篇文章在1月份发布，作者认为不同类型的前端开发人员之间的鸿沟正在扩大。前端是否往交互工程师和 JS 开发者两个方向走？

来源：Chris Coyier

5. CSS 2019调查报告

6月推出了第一期 ‘State of CSS’ 调查报告，调研了一万多名开发者钟爱的 CSS 特性和工具，值得了解一下。

来源：Sacha Greif and Raphaël Benitte

6. W3C 批准了 WebAuthn 作为 Web 免密登录标准

早在3月份，W3C 就宣布了 WebAuthn 成为正式的 Web 免密登录标准。从那时起，这个以安全为核心的标准得到了厂商逐步的支持，例如 Safari 、Firefox、Twitter 、 eBay。

来源：Emil Protalinski

7. 2019前端性能清单

这个清单已经发布了数年，本次更新了2019年新增的建议。它着重强调了响应速度、用户交互、网络宽带占用等方面需要考虑的问题。这里也有 PDF 版本。

来源：Smashing Magazine

📊 2019最受欢迎的教程排行

异步加载 CSS 最简单的方法

“我们能做的最有效的提升页面加载性能手段之一是异步加载 CSS”

SCOTT JEHL

我们在 CSS 中还做不到的事

了解一下通过现阶段普遍被支持的 CSS 标准还不能实现的通用布局模型，以及即将到来的针对性的新标准。

Rachel Andrew

我最喜欢的 CSS Hack

* { border: 1px solid red } 是一个经典的“技巧”，通过在每个元素周围放置边框来调试样式问题。这虽然需要一些额外的操作，但是更方便查看，特别嵌套元素。

GAJUS KUIZINAS

如何在 CSS 中实现对齐

有若干种对齐的实现方式，Rachel Andrew 解释了每种方式的实现原理以及适用场景。

SMASHING MAGAZINE

现如今的 select 样式

如果你曾经尝试过用 CSS 美化表单组件，十有八九会受挫。特别是 select 下拉列表很难处理。这篇文章介绍了基础知识，以及开发者真正想了解的东西。

来源：CHRIS COYIER

基于资源的性能优化

提前预测并加载资源是一种简单有效的前端优化手段，例如 DNS 预加载。

DREW MCLELLAN

⚙️ 2019最流行的代码片段

CSS Grid：电子表格

使用 CSS Grid 重构电子表格的用户界面。

OLIVIA NG

Infinite Burger

通过拖拽或缩放浏览器窗口来改变汉堡的大小，主要靠 background-repeat: round; 属性，看饿了……

THIYAGARAJ T

CSS 卡片悬停特效

很不错的卡片样式的鼠标悬停效果。

JHONIER RIASCOS ZAPATA

CSS 动效代码片段

使用 Vue 创建的 CSS 动效合集，可一键复制代码。

EMIL KOWALSKI

纯 CSS 实现：Bob Ross Doing the Floss, Like a Boss

一个有趣的纯 CSS 实现的动画效果。

STEVE GARDNER

augmented-ui：科幻朋克风格的 UI 库

仓库地址，你可以先看看示例。

PROPJOCKEY

💻 招聘

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

🗓 未来大事记

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