前端聚焦周刊：第 449 期

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

原文：Frontend Focus issue 449

翻译及校对：richshaw2015，Yully Che

🚀 刊首

The Cicada Principle, Revisited with CSS Variables

The Cicada Principle is the idea that when creating repetitive patterns, backgrounds, etc. using prime numbers can increase the appearance of organic randomness. Lea shows how she used a modern approach to this idea to format her code examples in a visually striking way.

来源：Lea Verou

Style Stage：现代 CSS 展示平台

A modern twist on the CSS Zen Garden idea of yesteryear where people submit their own manipulations of a concept using the most modern of CSS features. Here are the submissions so far with Vaporwave being my favorite. They all have a very “90s Web design renaissance” feel to them though.

来源：Stephanie Eckles et al.

▶ Chrome 开发者工具的新特性

Two of Google’s best known faces on the Chrome side of things give a twenty minute run through a whole bunch of new bits and pieces available in the DevTools in areas like performance monitoring, WebAssembly source mapping, and cookies.

来源：Paul Lewis and Surma (Google)

⚡️ Quick bits:

• Adobe Flash passes off into the sunset later this year, and Ars Technica have taken a look back at its story. A nice bit of nostalgia.

• You can now start up a new Codepen by visiting pen.new.

• Got a flashlight to hand? This personal site takes an amusing unique approach to dark mode.

• I like this: A curated list of whimsical websites that have a bit of fun and spark joy.

📙 文章、教程、观点

跨页面前记录当前页面的滚动位置

An interesting UX enhancement that involves saving the current scroll position in localstorage before the user navigates away.

let sidebar = document.querySelector(".sidebar");
let top = localStorage.getItem("sidebar-scroll");
if (top !== null) {
  sidebar.scrollTop = parseInt(top, 10);
}
window.addEventListener("beforeunload", () => {
  localStorage.setItem("sidebar-scroll", sidebar.scrollTop);
});

来源：Chris Coyier / Hakim El Hattab

Sass 生成响应式的 CSS 类名后缀

An interesting look at automating classes with Sass mixins and maps.

@mixin loop-mq {
  @content;
  @each $key, $value in $breakpoints {
    @media (min-width: #{$value}) {
      &\@#{$key} {
        @content;
      }
    }
  }
}

来源：Philip Zastrow

适配暗黑模式的网站 Logo

Logos often suit dark or light contexts and not the other, but you can swap them dynamically with a bit of CSS.

来源：Gift Egwuenu

我的网站有 13% 的用户屏蔽了 Google Analytics

It’s not just ads that get blocked but trackers too. Every site will have a different audience profile and a different likelihood of having its tracking blocked, so maybe it’s better to track requests behind the scenes or focus on other metrics instead.

来源：Marko Saric

适配 Firefox 的 prefers-contrast 媒体查询属性

This upcoming media query works in a similar way to prefers-colour-scheme, and is to be used to detect if the user has requested the system increase or decrease the amount of contrast between adjacent colors. This blog post walks through its design and implementation in Firefox.

来源：Zeke Medley (Mozilla)

你需要知道的关于 Core Web Vitals 的一切

Core Web Vitals is a set of metrics portraying three aspects of user experience: loading, interactivity and visual stability.

来源：Karolina Szczur

75 行代码的标准 WebGL

WebGL is pretty intimidating but this boils it down to the bare essentials. And if you want to go further, I still think this thorough guide is one of the best. Of course, you may see all of the boilerplate needed and just use Three.js instead, which is fine too! 😄

来源：Avik Das

Always Bet on HTML.. Being Misunderstood

来源：Christian Heilmann

🔧 代码、工具、资源

Tabler Icons：超过 500 个可定制的 SVG 图标

Simple, monochrome, line art SVG icons covering lots of concepts from (mostly) computer and browser based concepts to arrows and weather.

来源：Paweł Kuna

Squircley: A SVG ‘Squircle’ Maker

If you don’t find it hip to be square, consider a cross between the square and the circle: the squircle.

来源：georgedoescode

Headless WordPress with Gatsby Cloud

Gatsby is an increasingly popular React-based site building framework and this new plugin brings it to WordPress. The idea is you can use WordPress as a headless CMS with Gatsby taking care of the front-end.

来源：Hashim Warren (Gatsby)

shareon：简单可定制的分享按钮组件

They also boast good ethics as there’s no tracking code involved.

来源：Nikita Karamov

Halfmoon：内置暗黑模式的前端框架

A responsive frontend framework designed for quickly building dashboards and product pages. Uses Bootstrap-like classes, and is compatible with IE11.

来源：Halfmoon

EmailComb：从邮件模板中移除未使用的 CSS

A handy online tool to try out.

来源：Codsen ltd

纯 CSS 实现的打字机效果

I’m quite impressed how simple this is - it leans on the steps directive to make the animation jerky enough to look like typing.

来源：CodePen demo

💻 招聘

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

🗓 未来大事记

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