See You Again

前端聚焦周刊:第 431 期

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

原文:Frontend Focus issue 431

翻译及校对:richshaw2015Yully 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.


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.

  1. const callback = function(entries) {
  2. entries.forEach(entry => {
  4. });
  5. };
  6. const observer = new IntersectionObserver(callback);
  7. const targets = document.querySelectorAll(".show-on-scroll");
  8. targets.forEach(function(target) {
  9. observer.observe(target);
  10. });

来源: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 宣布优先索引移动站点


‘IsLoggedIn’ API 提议的解释

来源:Theresa O’Connor

Modal vs Page:一个决策框架

来源:Ryan Neufeld

🔧 代码、工具、资源

OpenSilver:一个现代的、无需插件的 Silverlight 实现

This is a replacement for Microsoft’s deprecated Silverlight. It’s open-source and runs in current browsers via WebAssembly. Here’s the announcement post.


Bootstrap Treeview:使用 Bootstrap 4 构建树状视图的插件

Here’s a live demo.

来源:Sami Chniter


Written in Go but clearly aimed at JS/front-end dev use cases. ls-lint provides a way to enforce rules for file naming and directory structures.

来源:Lucas Löffel

geo-info:反向地理坐标 API

Used to to turn coordinates into human readable locations.

  1. import requests
  2. resp = requests.get(",-74.3451")
  3. json = resp.json()
  4. print(json['city'])


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

来源:Chris Coyier

💻 招聘


🗓 未来大事记


2020-06-18 喜欢

Copyright © 2015-2021 BY-NC-ND 4.0

回到顶部 ↑