~frontendfocus | Issue 658 - Remembering the first decade of web design (18)

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..

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.. ;-)

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.

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.

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.

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. 😵‍💫

▶  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.

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.

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.

▶  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.

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

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.

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.

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.

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.

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.

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.

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.