前端聚焦周刊：第 431 期

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

原文：Frontend Focus issue 431

翻译及校对：richshaw2015，Yully Che

🚀 刊首

使用可变字体的性能优势

This is a good look at the performance gains you can expect when using variable fonts, with a focus on font requests, file sizes and time to first render. If you’re just starting to explore using variable fonts, this is a great related resource.

来源：Mandy Michael

同时设置图片的高宽很重要

Thanks to some recent changes in browsers, it’s now well worth setting width and height attributes on your images to prevent layout shifts and improve the experience of your site visitors.

来源：Barry Pollard

今年晚些时候很多播客节目将无法在浏览器中播放

An estimated 1 million+ podcast episodes aren’t available over secure connections, and it’s about to become a problem.

来源：Dan Misener

URL 的历史

This is a great deep-dive into the anatomy of the humble URL and how it came into being.

来源：Zack Bloom (Cloudflare)

Firefox 74 发布

Version 74 of Firefox arrived today. We’ve linked to the developer release notes as the headline features are minimal. Developer level changes include Feature Policy support enabled by default, TLS 1.0 and 1.1 support removed, text-underline-position CSS property now enabled, and JavaScript gains the optional chaining operator.

来源：Mozilla

More Accessible Defaults, Please

Due to the complex nature of web apps, it’s no longer correct to say the web is ‘accessible by default’. As Hidde points out, we need browser accessibility bugs to be prioritized.

来源：Hidde de Vries

📙 文章、教程、观点

我们是如何创建生成苏格兰格子衫样式 SVG 的静态站点的

There are thousands of Tartan patterns (the cloth that’s typically associated with Scotland) - here’s a look at how they were all digitally weaved with code (React).

来源：Paulina Hetman

布局变化后的滚动对齐

Starting in Chrome 81, scrollers remain snapped when the page layout changes, no longer requiring event listeners to force snapping, which fixes a shortcoming of this feature.

来源：Yi Gu, Kaan Alsan, Adam Argyle

向页面添加滚动动画

This detailed tutorial was first published last year but has recently been updated to include IntersectionObserver methods.

const callback = function(entries) {
  entries.forEach(entry => {
    entry.target.classList.toggle("is-visible");
  });
};
const observer = new IntersectionObserver(callback);
const targets = document.querySelectorAll(".show-on-scroll");
targets.forEach(function(target) {
  observer.observe(target);
});

来源：CSS Animation

Intersection Observer API 快速实现懒加载

Related to the above item, here’s a decent overview of IntersectionObserver, using the example of lazy loading elements.

来源：Leonardo Maldonado

如何使用 Express 和 DropzoneJS 构建文件上传表单

Lukas White takes an in-depth look at DropzoneJS — a configurable JavaScript library that makes it easier to deal with file uploads.

来源：Lukas White

▶ 使用 JavaScript 构建带特效的计数器

JavaScript has just gotten so serious nowadays, so I like to frequently link to tutorials like this that cover building neat Web page effects.. like we used JavaScript for back in the 90s 😄 18 minutes.

来源：Traversy Media

为什么我们在2020年选择 Svelte 进行大型 Web 项目开发

来源：Ryan Atkinson

Google 宣布优先索引移动站点

来源：Google

‘IsLoggedIn’ API 提议的解释

来源：Theresa O’Connor

来源：Ryan Neufeld

import requests
resp = requests.get("https://geo-info.co/45.6479,-74.3451")
json = resp.json()
print(json['city'])

来源：geo-info

基于浏览器的 SVG 编辑器列表

来源：Chris Coyier

💻 招聘

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

🗓 未来大事记