前端聚焦周刊：第 428 期

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

原文：Frontend Focus issue 428

翻译及校对：richshaw2015，Yully Che

🚀 刊首

理解 CSS Grid Template Areas

grid-template-areas is one of my personal favorite parts of CSS Grid as it lets you specify layouts in the form of strings of text that visually represent the outcome you want. This is a thorough introduction to the idea.

来源：Rachel Andrew

为什么 JavaScript 正在吞噬 HTML

主要是前端越来越复杂，维护分离的 HTML 和 JavaScript 十分痛苦。

The idea of JavaScript and HTML remaining separate and never the twain shall meet is now decidedly old-school and HTML-in-JS (a la JSX) is definitely A Thing™. Here’s a tour of all the parts involved.

来源：Mike Turley

网站链接和按钮完全指南

A great resource from CSS Tricks with a lot to digest here. Starts with the basic implementation of both but quickly moves into accessibility, UX flourishes, and styling.

来源：Chris Coyier

你可能没关注，CSS 渐变正变得更好

Unless you are some sort of CSS gradient expert, you are going to learn something here. Avoiding repetition by not having to repeat colors anymore is a huge win, IMHO.

来源：Ana Tudor

Chrome 80 以后支持 ‘Scroll To Text Fragment’

Last year we mentioned the Text Fragments spec which will let you link directly to specific content within Web pages that doesn’t have an associated anchor element.. and Chrome now supports it although the formatting of the fragment name isn’t particularly elegant.

来源：Chrome Platform Status

调整元素大小的第一份公共草案

An interesting new spec from the W3C (based on the same concept as MutationObserver or IntersectionObserver) that lets you observe for changes to an element’s size.

来源：W3C

📙 文章、教程、观点

相同的 HTML，不同的 CSS

This is a step-by-step tutorial based on a concept from the old CSS Zen Garden site: Creating different designs via CSS while never touching the markup.

来源：Ahmad Shadeed

构建高性能的前端架构

A technical writeup of the key things to consider performance-wise when building a front-end.

来源：DebugBear

四种创新方法实现 JavaScript 计时

介绍了如下四种方法：Web Worker 中使用无限同步循环、CSS 动画、SVG 标签、Web Animations API。

Interesting alternatives for setTimeout, setInterval, and requestAnimationFrame.

来源：Omar Alshaker

如何用 D3 和 Three.js 开发基于 WebGl 的美国地图

Creating a simple SVG-based map is one thing, but if you want the best performance, leaning on WebGL and your GPU is a good option. This tutorial covers how to approach moving from SVG to WebGL by way of Three.js.

来源：Mika Iriarte

如何在 JavaScript 中构建 Tinder 效果的轮播图

来源：Simone Manzi

使用 PixiJS 和 WebGL 构建图库

This goes beyond your typical image gallery with an interesting 3D effect. Lots of bits and pieces here to learn.

来源：Luis Torres

中止 API 请求

The Fetch API didn’t have the ability to abort a request in its early days (unlike XMLHttpRequest) but AbortController and AbortSignal can help you get the job done on all modern browsers.

来源：Ganapati V S

如何将 CSS3 转换特效应用于背景图像

A neat trick for applying CSS3 transforms (rotating and skewing elements) to your backgrounds.

来源：Craig Buckler

请在 CSS 中使用 `a:visited`

Help your visitors know which links they already visited. I can’t really argue with this.

来源：Evert Pot

不要碰我的剪切板

You can (but shouldn’t) change how people copy text from your site.

来源：Alex Ellis

Squarespace、Wix、Weebly 在可访问性方面的实践回顾

If you’re reading this newsletter you’re probably building your own pages from scratch or with a framework, but have you ever wondered just how good pages produced by tools like Squarespace or Wix are?

来源：Terrill Thompson

仍然使用 Sass 的四个原因

来源：Sonny Recio

JetBrains Mono 字体

From the creators of many a popular IDE comes a free and open source font specifically aimed at developers. I admit I’m a sucker for a monospaced font on the Web, but your mileage may vary.

💻 招聘

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

🗓 未来大事记