前端聚焦周刊：第 426 期

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

原文：Frontend Focus issue 426

翻译及校对：richshaw2015，Yully Che

🚀 刊首

网站的二氧化碳排量

网站的二氧化碳排量以能量消耗为计算依据，现在是十年前的四倍，看看怎么节能减排吧。

Sites are said to now be four times bigger than they were in 2010. This post looks at the energy costs of data transfer and what you can do to reduce your web carbon footprint.

来源：Danny van Kooten

This is a tale of one individuals personal history with CSS and web design, offering a comprehensive, detailed “blend of memory and research”. A great trip down memory lane for any of you who got started on the web in the 90s.

来源：Evelyn Woods

Smashing Magazine 的内容管理工具：从 WordPress 到 JAMStack

JAMStack 是一种静态化的网站解决方案，这篇介绍了 Smashing Magazine 的迁移过程。

An interesting look at how a big site like Smashing Magazine went about migrating from WordPress to a static infrastructure. This technical case study covers the gains and losses, things the Smashing team had wished they’d known earlier, and what they were surprised by.

来源：Sarah Drasner

▶ Chrome 80 开发者工具的新功能

New features include improved WebAssembly debugging, network panel updates, support for let and class redeclarations and more.

来源：Google Chrome Developers

一种制作响应式无 Javascript 图表的新技术

SVG 技术的使用。

There are countless libraries for generating charts on the web, but they all seem to require JavaScript. Here’s how the New York Times approached JS-free charts with SVG.

来源：Rich Harris

Edge DevTools 适配多国语言

来源：Erica Draud (Microsoft)

📙 文章、教程、观点

提升用户登陆体验的 HTML 属性

例如 type、pattern、autocomplete 属性可以适配手机键盘、短信验证码等。

How to use the HTML autocomplete, inputmode and pattern attributes to improve the user experience of logging in.

来源：Phil Nash

▶ 英国铁路网的前端性能探索

Runs through using the layers panel in Chrome DevTools to diagnose performance issues on a high traffic website.

来源：Umar Hansa

隐藏元素的出场动画

Paul Hebert has written a little JavaScript utility to wrap up all of the intricacies of dealing with transitioning hidden elements - often tricky as they’re not in the document flow.

来源：Cloud Four

使用 CSS Gradients 重绘拍立得相机图标

A high-level tutorial showing how to recreate physical products with just CSS. The end result here is a Polaroid camera made entirely out of gradients.

来源：Sarah L. Fossheim

How To Create A Headless WordPress Site On The JAMstack

将 JAMstack 整合到 WordPress。

来源：Sarah Drasner & Geoff Graham

使用 CSS `line-height` 属性提升可读性

来源：William Le

可能是最简单的运行静态网站的方法

来源：CSS Tricks

Getting Keyboard-focusable Elements

A quick JavaScript function for managing focus.

来源：Zell Liew

eBay 的性能优化

“搜索页加载时间每减少 100ms，加入购物车的数量增加 0.5%。”

This case study explains how eBay increased key metrics by optimizing the performance of their web/app experiences.

来源：Addy Osmani

将性能视为和功能同等重要

A non-technical guide to the decisions HubSpot made (and the tools they now utilise) that helped them start treating frontend performance as a feature.

来源：Adam Markon

💻 招聘

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

🗓 未来大事记