这里是 Frontend Focus 的中文翻译项目，每周在 己思 平台首发。
Revealed at this week’s WWDC, Safari 14 will ship alongside iOS 14 & macOS 11 later this year. Here are the headlines:
Adds support for WebP images and HDR video playback;
Support for HTTP/3;
Will support both the
…and adds Web Extensions support to the macOS version (more below).
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.
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.
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.
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.
If you use Google Analytics, be prepared to see the Safari stats tumble, as Safari is going to start blocking Google Analytics entirely.
It has been five years since the first line of code for AMP was written.
Chrome is working on an experimental implementation of upload streams so you can start uploading data to a server before you necessarily have all of it to hand.
Work continues on Mozilla’s paid VPN, (a U.S. only beta is available now).
Version 69 of Opera has Twitter (and other social media services) ‘built-in’, accessible via the sidebar.
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.
A look at using CSS Custom Properties to manage/control both cascade and inheritance.
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)
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.
来源：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.
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.
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).
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.
The official IANA time zone list has over 500 entries but you can simplify this substantially, as done here.
Similar in concept to create-react-app, but for kickstarting projects based on the popular HTML5 Boilerplate project.
Makes it easy to collect data from Google’s new Web Vitals API.
来源：Lynn Fisher codepen
Copyright © 2015-2022 BY-NC-ND 4.0