前端聚焦周刊：第 442 期

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

原文：Frontend Focus issue 442

翻译及校对：richshaw2015，Yully Che

🚀 刊首

响应式网站设计十岁了

Ten years ago the phrase ‘responsive web design’ was first coined. This guiding blog post, outlining the three ‘ingredients’ needed (fluid grids, flexible images, and media queries), soon followed. Here, Ethan takes a look back at just how responsive design came to be.

来源：Ethan Marcotte

Edge 自 2020 年以来的所有新功能

Microsoft Build 2020 took place entirely online for the first time last week but it wasn’t short of announcements and great talks, particularly for MS’s Edge browser. Here’s a video roundup of what’s new if you’d prefer.

来源：Kyle Pflug (Microsoft)

Google Fonts 很快，现在变得更快了

Using Google Fonts? It can often prove to be one of the bigger performance bottlenecks, but in this thorough guide Harry Roberts runs through several optimisations you can put in place to make things snappy.

来源：CSS Wizardry

WebGL 完全指南

A really detailed walkthrough of getting started with WebGL at the low level, complete with integrated, editable examples and coverage of the math behind 3D rendering. If you’ve ever wondered what libraries like Three.js are using behind the scenes, it’s all here.

来源：Maxime Euzière

⚡️ Quick bits:

You can now emulate vision impairments and color blindness in Chrome 83 to see how your site may appear to certain visitors.
Sure, you can play the dino game in Chrome when offline, but you how about a bit of offline surfing in Edge?
Enhanced Safe Browsing protection is now available in Chrome

📙 文章、教程、观点

掌握 Line Height 属性

Caleb Williams looks at the line-height property, “probably one of the most misunderstood, yet commonly-used attributes”.

来源：CSS Tricks

▶ 如何使用 Flexbox 水平和垂直居中

You’ve heard all the jokes about the difficult of center aligning things with CSS, but laugh no more as Ali demonstrates how to do it in just a minute.

来源：Ali Spittel

iPhone 本地调试

You should be testing on a real-world mobile device, so here’s a nice and quick way to get your localhost server running on an iPhone with the help of ngrok.

来源：Josh Comeau

微前端的现状

“One of the more controversial topics in frontend web dev is microfrontends. Are they worth it? Should you really split up your application?”

来源：Florian Rappl

这些是我不知道的 `content` 用法

You’ll no doubt learn something here.

.new-item::before {
  /* "Highlighted item" and element content is read out */
  content: "★" / "Highlighted item";
}

来源：Manuel Matuzović

使用 Cloudflare、GitHub Actions、Metalsmith 开发一个简单的 CMS 系统

Let’s say you want to build a CMS but don’t want to mess with the fiddly UI bit.. how about using GitHub itself? Couple that with the Metalsmith static site generator and Cloudflare Workers.. and here you go.

├── build.js
├── dist
│   └── worker.js
├── layouts
│   ├── about.hbs
│   ├── article.hbs
│   ├── index.hbs
│   └── partials
│       └── navigation.hbs
├── package-lock.json
├── package.json
├── public
├── src
│   ├── about.md
│   ├── articles
│   │   ├── post1.md
│   │   └── post2.md
│   └── index.md
├── workers-site
│   ├── index.js
│   ├── package-lock.json
│   ├── package.json
│   └── worker
│       └── script.js
└── wrangler.toml

来源：Jon Paul Uritis

`target="_blank"` — 一个被低估的安全漏洞

Why rel="noopener" should be added to links containing target="_blank" as a precaution against reverse ‘tabnabbing’.

<a href= '/share' rel="noopener noreferrer" target="_blank"/>

来源：Manjula Dube

▶ Using Chrome DevTools Console Utilities to Make Debugging Easier

来源：Tomasz Łakomy

🔧 代码、工具、资源

instant.page 5：通过预读让网站体感更快

A reasonably simple piece of JavaScript you can drop onto a page that adds link preloading (upon mouse or pointer hover on a link) to make page transitions seem unnaturally fast.

<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>

来源：Alexandre Dieulot

Tailblocks: Ready-to-Use Tailwind CSS Blocks

This is a set of 60+ ready-to-use UI blocks built with Tailwind, the popular CSS framework. 15 categories of blocks, which you can preview here.

来源：Mert Cukuren

Blunt: A CSS Framework That Helps with Layouts and Leaves Your Styling Alone

This is a little different. This framework doesn’t have any effect on design visuals, it only provides helper classes for positioning and responsive layouts.

来源：Frankie

LaTeX.css：让你的网站更像一个 LaTeX 文档

LaTeX is a popular typesetting system frequently used in academia and mathematic or scientific documentation.

<link rel="stylesheet" href="https://latex.now.sh/style.min.css" />

来源：Vincent Dörig

💻 招聘

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

🗓 未来大事记