--- title: "Remembering the first decade of web design" publication: "Frontend Focus" issue: 658 published_at: "2024-09-04" canonical_url: "https://frontendfoc.us/issues/658" --- Also, a mutation observer, but for CSS. | Together with [![Posthog\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_2303,h_420/e_make_transparent/co_white,e_outline:12/i4lkeq9vxu5ccjyxdkep.png)](https://newsletter.posthog.com/p/beyond-the-10x-engineer/?utm_source=focus&utm_campaign=focus) 🚀 **Frontend** Focus #​658 — September 4, 2024 | [Read on the web](https://frontendfoc.us/issues/658) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1725449476/wnsbojvwq0yim9qhqdde.png)](https://eieio.games/essays/the-secret-in-one-million-checkboxes/) [The Secret Inside One Million Checkboxes](https://eieio.games/essays/the-secret-in-one-million-checkboxes/) — [One Million Checkboxes](https://onemillioncheckboxes.com/) 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](https://www.debugbear.com/blog/website-font-performance) — 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) [![\](https://copm.s3.amazonaws.com/e61a035e.png)](https://newsletter.posthog.com/p/beyond-the-10x-engineer/?utm_source=focus&utm_campaign=focus) [Beyond the 10x Engineer](https://newsletter.posthog.com/p/beyond-the-10x-engineer/?utm_source=focus&utm_campaign=focus) — 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](https://developers.google.com/search/blog/2024/08/happy-avifriday) — Image format [AVIF](https://en.wikipedia.org/wiki/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](https://www.webdesignmuseum.org/) — 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](https://open-web-advocacy.org/blog/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](https://web.dev/blog/web-platform-08-2024). - ↔️ [Firefox 130](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/130) adds [WebDriver BiDi updates](https://fxdx.dev/firefox-webdriver-newsletter-130/), including `browsingContext.navigationFailed` event support. - ⌨️ _Server Mono_ is [a neat monospace font](https://servermono.com) inspired by typewriters, ASCII art, and command-line interfaces. - 🗳️ ICYMI, the 2024 [State of CSS survey is now open](https://survey.devographics.com/en-US/survey/state-of-css/2024) and seeking your input. - 🪲 Chrome's [bug bounty is now up](https://www.bleepingcomputer.com/news/google/google-increases-chrome-bug-bounty-rewards-up-to-250-000/) to $250,000. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1725448889/n0ak9hkrhvzv8b6pg5cr.png)](https://www.youtube.com/watch?v=mSMb-aH6sUw) ▶[Caching Demystified: Inspect, Clear, and Disable Caches](https://www.youtube.com/watch?v=mSMb-aH6sUw) — 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](https://component-odyssey.com/articles/13-improving-performance-by-changing-two-lines-of-css) — Upon launching the [Learn Web Components](https://learn-wcs.com/) 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](https://component-odyssey.com/articles/12-improving-the-screen-reader-experience-for-learn-wcs) for visitors to[Learn WCs.](https://learn-wcs.com/) 🗓️ [Join us at ViteConf!](https://viteconf.org/?utm_source=fe_focus&utm_medium=secondary) — 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](https://www.differentshelf.com/lazy-loading-isnt-just-lazy-its-late-the-web-deserves-faster/) — “_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](https://www.youtube.com/watch?v=YGxOh85VtFg) — 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'](https://meiert.com/en/blog/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](https://evilmartians.com/chronicles/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)](https://dev.to/safdarali/top-5-html-features-youre-not-using-but-should-be-2i0e) Safdar Ali 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/ucmrm1unxigphtqoozdg.jpg)](https://reasonable.work/colors/) [Reasonable Colors: An Open-Source Color System for Building Beautiful, Accessible Color Palettes](https://reasonable.work/colors/) — 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](https://www.bram.us/2024/08/31/introducing-bramus-style-observer-a-mutationobserver-for-css/) — Bramus has created a MutationObserver for CSS. It, dubbed [style-observer](https://www.npmjs.com/package/@bramus/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](https://fusionauth.io/blog/announcing-fusionauth-1-52?utm_medium=newsletter&utm_source=frontend_focus&utm_campaign=sep24_newsletter) — FusionAuth just [added passkeys to their free tier](https://fusionauth.io/blog/announcing-fusionauth-1-52?utm_medium=newsletter&utm_source=frontend_focus&utm_campaign=sep24_newsletter), which is a paid feature for almost every other auth provider. Try it out yourself. FusionAuth sponsor [The Dev Tools Performance Monitor Panel](https://daverupert.com/2024/09/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 [![\](https://res.cloudinary.com/cpress/image/upload/w_280,e_sharpen:60,q_auto/v1725446482/eefxky8i5rgjxntjpv3k.png)](https://alohe.github.io/avatars/) [Avatars: A Collection of Diverse Free Avatar Images](https://alohe.github.io/avatars/) — 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](https://tailscan.com/resources/grids) — 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..** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1725446258/rwkonxob4bc2doeauwpy.png)](https://anatolyzenkov.com/stolen-buttons/button-stealer) [Button Stealer: A Chrome Extension That "Steals" a Button from Every Website You Open](https://anatolyzenkov.com/stolen-buttons/button-stealer) — A funny way of 'collecting' an inspiration gallery of buttons, which the author has done and you can [view here](https://anatolyzenkov.com/stolen-buttons). anatoly zenkov 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/658/*|UID|*?ipx=t)