前端聚焦周刊:第 439 期

原文转载自 「前端聚焦周刊」 ( https://github.com/richshaw2015/frontendfocus-cn/blob/master/docs/issue-439.md ) By 小车

预计阅读时间 0 分钟(共 0 个字, 0 张图片, 0 个链接)

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

原文:Frontend Focus issue 439

翻译及校对:richshaw2015Yully Che

🚀 刊首

Web Vitals 介绍:健康网站的关键指标

Web Vitals is a new Google initiative to provide guidance on quality signals (think first input delay, load speed, etc.) that are key to delivering good user experiences on the web.

来源:Google

CSS 函数完全指南

A thorough resource detailing everything you need to know about functions in CSS. They can be inserted where you’d place a value, or in some cases, accompanying another value declaration — this is a good look at how to use them.

来源:CSS Tricks

HTML5 Boilerplate 十岁了

A look at some of the history behind the front-end framwork that started them all: HTML5 Boilerplate, which is now 10 years old.

来源:Rob Larsen

Firefox 76: Audio Worklets and Other Tricks

This latest version delivers new features for web platform support, such as Audio Worklets and Intl improvements, on the JavaScript side. Also a number of improvements to the DevTools have been added. Here’s the list of dev-focused changes.

来源:Chris Mills & Harald Kirschner (Mozilla)

⚡️ Quick bytes:

📙 文章、教程、观点

CSS Grid 布局令人兴奋的事

…such as a new Grid inspector for Chrome, the ‘gap’ property in Chrome Canary, and (amazingly) masonry-style grids in Firefox Nightly.

来源:Michelle Barker

选择文本的 CSS

Another one of Ahmad’s great deep dives, this time covering the ::selection pseudo-element and the user-select property in CSS.

来源:Ahmad Shadeed

在 WebKit 中共享文件

Looks like more Web Share API support (Level 2 / file sharing) is landing in WebKit — spotted via this tweet from Jake Archibald.

来源:WebKit Bugzilla

很多人并不知道可用性是啥,更别提优化了

“Accessibility is, for all intents and purposes, duct-taped onto the web. We need to make it a first class citizen in browsers. Until we do, we’ll keep wondering why developers aren’t making accessible websites.”

来源:Kilian Valkhof

Is It Time for A Web Performance Rebrand?

“Web Performance is a niche term in a broad market, should we broaden our appeal to reach more people?”

来源:Simon Hearne

Eleventy 入门指南

This is an extensive and down-to-earth multi-part introductory guide to using Eleventy the popular static site generator.

来源:Tatiana Mac

window.location 指南

A breakdown that covers most of the methods and properties available on the DOM’s window.location object.

来源:samantha ming

Styling in the Shadow DOM With CSS Shadow Parts

Using the ::part() selector.

来源:Ollie Williams

使用 SVG 逐步增强单选按钮的体验

<input type="radio" id="r1" name="aligned" value="left" checked> 
<label for="r1">
  <svg xmlns="http://www.w3.org/2000/svg" 
       fill="#ffffff" height="3em" width="3em" 
       viewBox="0 0 100 100" x="0px" y="0px" 
       aria-labelledby="title-r1" role="img">
    <title id="title-r1">Aligned Left</title>
    <rect x="17.04" y="25.36" width="65.91" height="6"></rect>
    <rect x="17.04" y="39.79" width="43.87" height="6"></rect>
    <rect x="17.04" y="54.21" width="65.91" height="6"></rect>
    <rect x="17.04" y="68.64" width="43.87" height="6"></rect>
  </svg>
</label>

来源:Christian Heilmann

How to Create Pure CSS Games (No JS)

来源:Elad Shechter

🔧 代码、工具、资源

Pico: Take Browser Screenshots Client-Side with JavaScript

Different from capturing a webpage using Puppeteer or a similar tool in that the screenshot taking happens entirely client side.

来源:Gripeless

🌍 I18n Ally:VS Code 的一站式 i18n 插件

Got some internationalization work to do? I18n Ally gives you inline annotations, automated translations via Google Translate (which you can review), progress indication, etc. Supports React, Angular, Vue and other frameworks.

来源:Anthony Fu

web-vitals-extension:测量网站核心性能指标的 Chrome 插件

This extension measures three core web vitals metrics (Largest contentful paint, cumulative layout shift, and first input delay) in a way that matches how they’re measured by Chrome and reported to other Google tools (see top feature in this issue).

来源:Google Chrome

utfu:将损坏的字符替换成合法的 UTF-8 字符

Useful when old content contains characters like “— in place of a single quote, and similar legacy text issues.

import { hex, htx, txt } from 'utfu'

const dirty = 'On a certain level, it�s like shouting �fire� in a crowded theater.'

const cleanHex = hex(dirty)
// --> 'On a certain level, it\u2019s like shouting \u201Cfire\u201D in a crowded theater.'
const cleanHTML = htx(dirty)
// --> 'On a certain level, it&#x2019;s like shouting &#x201C;fire&#x201D; in a crowded theater.'
const cleanTxt = txt(dirty)
// --> 'On a certain level, it’s like shouting “fire” in a crowded theater.'

来源:Daniel Sieradski

Sitesauce:将动态站点转换成静态,且保持内容同步

This paid tool converts dynamic websites (e.g. WordPress, Ghost, Joomla, etc.) into static sites, and keeps content in sync.

来源:Miguel Piedrafita

💻 招聘

译者注:如需了解,请查看原文

🗓 未来大事记

译者注:如需了解,请查看原文

more_vert