整理并总结下面的文章，返回50字摘要，返回为中文









🚀 Frontend Focus
#​658 — September 4, 2024 | Read on the web









The Secret Inside One Million Checkboxes — One Million Checkboxes is/was a site with one million global checkboxes on it where checking (or unchecking) a box changed it for everyone on the site, instantly. This fun post-mortem digs into how the internet (and, specifically, a group of smart teenagers) played with the project to reach ends you'd never expect..
Nolen 


The Ultimate Guide to Font Performance Optimization — This is quite the rabbit hole indeed, but a useful one to go down if your site is using custom fonts and you’re serving them up directly yourself. Of course, step one is to consider sticking to system/web-safe fonts.. ;-)
Anna Monus (DebugBear) 



Beyond the 10x Engineer — Incredible technical skills can’t save a product that no one wants. That’s why engineers should care about non-technical product skills. To help you figure out which of these skills matter, we wrote about the ones we look for (and use) at PostHog.
PostHog sponsor


Supporting AVIF in Google Search — Image format AVIF is now a supported file type in Google Search and Google Images, as well as any place that uses images in Google Search.
John Mueller (Google) 


The Web Design Museum: The First Decade of Web Design — Exhibits thousands of unique old website designs from the early 90s to mid-00s. A fun way to discover forgotten trends in web design.
Web Design Museum 


Apple 'Appears to Mislead' UK Regulator Over Deceptive Default Browser User Interface — Looks like Apple is claiming that a previously implemented pattern for picking default browsers in iOS, in fact, never even existed. 😵‍💫
Open Web Advocacy 




⚡️ Quick Links


✨ Rachel Andrew from the Chrome team brings us a recent round-up of all that's new to the web platform.


↔️ Firefox 130 adds WebDriver BiDi updates, including browsingContext.navigationFailed event support.


⌨️ Server Mono is a neat monospace font inspired by typewriters, ASCII art, and command-line interfaces.


🗳️ ICYMI, the 2024 State of CSS survey is now open and seeking your input.


🪲 Chrome's bug bounty is now up to $250,000.






📙 Tutorials, Articles & Opinion




▶  Caching Demystified: Inspect, Clear, and Disable Caches — Dives into the different types of browser cache and how to inspect and manage them in Chrome DevTools.
Jecelyn Yeen 


Finding Two Lines of CSS That Tanked Performance — Upon launching the Learn Web Components site, Andrico discovered one of its animations caused a sharp drop in performance on Firefox. Here’s what he discovered and how he fixed it.
Andrico Karoulla 

💡 Andrico has also written about how he improved the screen reader experience for visitors to Learn WCs.

🗓️ Join us at ViteConf! — On October 3rd & 4th, get ready to learn from the builders pushing modern web development forward. Don’t miss out—get your ticket now!
StackBlitz sponsor


Lazy Loading Isn't Just Lazy, It's Late: We Can Do Better — “We tend only to fetch more content as the user scrolls it into view or navigates to the next page, which isn’t just lazy: it’s often late and an awful user experience”. This post suggests a more proactive approach.
Jupiter Jayna 


▶  Scroll-Enhanced Experiences — A 52-minute journey through the art of 'scrollytelling' with CSS, guiding you through the process of creating dynamic experiences that leverage a user’s scroll behavior. Covers controlling pace/rhythm of a page with the CSS Scroll Timeline API.
Carmen Ansio 


'Why I Don’t Block AI Scrapers' — “let thieves do thief things until our justice system(s) do justice system things”.
Jens Oliver Meiert 


How to Quickly (and Weightlessly) Convert Chrome Extensions to Safari — Goes into more depth than you might expect.
  Nina Torgunakova



Five HTML Features You’re Not Using (But Should Be)
Safdar Ali


🔧  Code, Tools & Resources




Reasonable Colors: An Open-Source Color System for Building Beautiful, Accessible Color Palettes — Just drop in the base stylesheet, then use the provided CSS variables that provide built-in “shades” for each color.
matthew howell 


Introducing style-observer, A MutationObserver for CSS — Bramus has created a MutationObserver for CSS. It, dubbed style-observer, allows you to attach JavaScript callbacks to changes in computed values of CSS properties.
Bramus Van Damme 


Passkeys for Everyone! Make Your User Login Simpler with FusionAuth — FusionAuth just added passkeys to their free tier, which is a paid feature for almost every other auth provider. Try it out yourself.
FusionAuth sponsor


The Dev Tools Performance Monitor Panel — In Chrome, if you open 'Dev Tools > More Tools > Performance Monitor' you’ll see some helpful high-level charts and graphs of the realtime performance data of your UI.
Dave Rupert 



Avatars: A Collection of Diverse Free Avatar Images — Downloadable in PNG format, but also accessible directly via a public CDN and there’s a Figma plugin available.
alohe 


Tailwind Grid Builder: Learn and Build CSS Grids with Tailwind — A simple tool to generate the HTML with Tailwind classes for a custom grid. Just select number of items, rows, columns, and number of breakpoints as needed. Useful also for learning the Tailwind class names.
Tailscan 

🎁 And one for fun..




Button Stealer: A Chrome Extension That "Steals" a Button from Every Website You Open — A funny way of 'collecting' an inspiration gallery of buttons, which the author has done and you can view here.
anatoly zenkov 


Ipx.