|
|
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 |
|
📙 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.
|
Five HTML Features You’re Not Using (But Should Be)
|
🔧 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 |