Together with  Posthog
🚀 Frontend Focus

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

The Secret Inside One Million CheckboxesOne 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

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