See You Again

前端聚焦周刊:第 446 期

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

原文:Frontend Focus issue 446

翻译及校对:richshaw2015Yully Che

🚀 刊首

Safari 14 Beta 版发布说明

Revealed at this week’s WWDC, Safari 14 will ship alongside iOS 14 & macOS 11 later this year. Here are the headlines:


欢迎 Safari 加入到 WebExtensions 社区

Yup, Safari is adopting a Web-based API for browser extensions similar to Firefox’s WebExtensions API making it easy to build once and port to multiple browsers (including Chrome). Here’s Apple’s intro video on how to get started.

来源:Mozilla Hacks

Prefetching? At This Age?

An excellent trip down the rabbit hole of caching, CDNs, what issues can occur when both clients and CDNs are caching content, and how the Age HTTP header helps. Plus a Chromium bug, just for good measure.

来源:Tim Kadlec


There are a number of scroll related technologies out there (parallax, scroll snap, etc), so this article’s aim is to provide an overview of them and tools to help choose the one that’s right for you.

来源:Zach Saucier

Safari 和 WebKit 的新特性和功能提升

More from Apple! Following the main WWDC 2020 Keynote, Apple are sharing a number of sessions throughout the week covering extensions, privacy, APIs, CSS and JS, web inspector changes and more. Worth bookmarking and coming back to at the weekend once all sessions are live.


⚡️ Quick bits:

📙 文章、教程、观点

WebP 真的比 JPEG 更好吗?

According to Google, WebP is 25-34% smaller than JPEG at equivalent quality. But how much of it is really true? To find out, Johannes ran a few tests.

来源:Johannes Siipola

Using Custom Property ‘Stacks’ to Tame the Cascade

A look at using CSS Custom Properties to manage/control both cascade and inheritance.

来源:Miriam Suzanne

运行 3 年后,Chrome 私自下架了我的扩展

This is a story worth checking out if your work ends up on the Chrome Webstore in any way (such as if you’re distributing a browser extension): “Complaining on the internet should not be a support channel. Developers should not have to rely on the internet attention lottery. The Chrome Webstore has been around 10 years and needs to get its act together.”



Some sites prevent pasted passwords (which can even break some password managers). The UK’s cyber security officials stress that this a security anti-pattern. Today I also learnt that “Sociotechnical Security Researcher” is an actual job title – cool!

来源:National Cyber Security Centre (UK)

90 年代 Web 的回归

Max asks if we’re ready to revisit some of the ideas of the early web (no-code tools, personal sites, etc), adding that certain trends suggest that we might just have come full circle.

来源:Max Böck

如何报浏览器的 bug

来源:Robert Nyman, Pete LePage

🔧 代码、工具、资源


A CSS library to easily build a diverse set of button styles that can be adapted to your brand via CSS variables. Includes a playground for fiddling with the variety of modifiers.


keen-slider: An Agnostic Touch Slider

Think ‘carousels’ but comfortable and smooth when using touch. They work with the mouse and touchpads as well, of course, and there are no dependencies. Live examples here.

来源:Eric Beyer

Tailwind CSS Cheat Sheet

This clear, scannable resource has been around for a while, however it remains up-to-date with the latest version of Tailwind (plus we’ve not shared it here before).

来源:Jay Elaraj可视化创建站点地图

An online tool that allows you to build a website’s sitemap (e.g. for prototyping structure) or you can import an existing sitemap.xml from a URL and work with that.


🕰 Tzdb: A Simplified and Grouped List of Time Zones and Offsets

The official IANA time zone list has over 500 entries but you can simplify this substantially, as done here.

来源:Vincent Voyer

Create HTML5 Boilerplate:HTML5 Boilerplate 快速入门

Similar in concept to create-react-app, but for kickstarting projects based on the popular HTML5 Boilerplate project.


web-vitals-reporter:简化 Web Vitals 报告的小工具

Makes it easy to collect data from Google’s new Web Vitals API.


CSS 生成影印杂志效果

来源:Lynn Fisher codepen

💻 招聘


🗓 未来大事记


2020-09-18 喜欢

Copyright © 2015-2022 BY-NC-ND 4.0

回到顶部 ↑