Let’s do CSS stuff this week. Why not — kinda my thing. Did you know Alvaro Montoro has a whole site of comics on the subject of CSS? There is a lot of satire in there, which I really enjoy. So they changed CSS nesting a bit. I heard that the usage of it was […]
Making the website for Research By The Sea
UX London isnât the only event from Clearleft coming your way in 2025. Thereâs a brand new spin-off event dedicated to user research happening in February. Itâs called Research By The Sea.
Iâm not curating this one, though I will be hosting it. The curation is being carried out most excellently by Benjamin, who has written more about how heâs doing it:
Weâve invited some of the best thinkers and doers from from in the research space to explore how researchers might respond to todayâs most gnarly and pressing problems. Theyâll challenge current perspectives, tools, practices and thinking styles, and provide practical steps for getting started today to shape a better tomorrow.
If that sounds like your cup of tea, you should put February 27th 2025 in your calendar and grab yourself a ticket.
Although Iâm not involved in curating the line-up for the event, I offered Benjamin my swor⦠my web dev skillz. I made the website for Research By The Sea and I really enjoyed doing it!
I felt like I was truly designing in the browser. Adjusting spacing, playing around with layout, and all that squishy stuff. Some of the best results came from happy accidentsâthe way that certain elements behaved at certain screen sizes would lead me into little experiments that yielded interesting results.
I took the same approach with Research By The Sea. I had a design language to work with, based on UX London, but with more of a playful, brighter feel. The idea was that the website (and the event) should feel connected to UX London, while also being its own thing.
I kept the typography of the UX London site more or less intact. The page structure is also very similar. That was my foundation. From there I was free to explore some other directions.
I took the opportunity to explore some new features of CSS. But before I talk about the newer stuff, I want to mention the bits of CSS that I donât consider new. These are the things that are just the way things are done âround here.
Custom properties. Theyâve been around for years now, and theyâre such a life-saver, especially on a project like this where Iâm messing around with type, colour, and spacing. Even on a small site like this, itâs still worth having a section at the start where you define your custom properties.
Logical properties. Again, theyâve been around for years. At this point Iâve trained my brain to use them by default. Now when I see a left, right, width or height in a style sheet, it looks like a bug to me.
Fluid type. Itâs kind of a natural extension of responsive design to me. If a websiteâs typography doesnât adjust to my viewport, it feels slightly broken. On this project I used Utopia because I wanted different type scales as the viewport increased. On other projects Iâve just used on clamp declaration on the body element, which can also get the job done.
Okay, so those are the things that feel standard to me. So what could I play around with that was new?
View transitions. So easy! Just point to an element on two different pages and say âHey, do a magic move!â You can see this in action with the logo as you move from the homepage to, say, the venue page. Iâve also added view transitions to the speaker headshots on the homepage so that when you click through to their full page, you get a nice swoosh.
Unless, like me, youâre using Firefox. In that case, you wonât see any view transitions. Thatâs okay. They are very much an enhancement. Speaking of whichâ¦
Scroll-driven animations. Youâll only get these in Chromium browsers right now, but again, theyâre an enhancement. Iâve got multiple background imagesâa bunch of cute SVG shapes. Iâm using scroll-driven animations to change the background positions and sizes as you scroll. Itâs a bit silly, but hopefully kind of cute.
You might be wondering how I calculated the movements of each background image. Good question. I basically just messed around with the values. I had fun! But imagine what an actually-skilled interaction designer could do.
That brings up an interesting observation about both view transitions and scroll-driven animations: Figma will not help you here. You need to be in a web browser with dev tools popped open. Youâve got to roll up your sleeves get your hands into the machine. I know that sounds intimidating, but itâs also surprisingly enjoyable and empowering.
Oh, and I made sure to wrap both the view transitions and the scroll-driven animations in a prefers-reduced-motion: no-preference @media query.
Iâm pleased with how the website turned out. It feels fun. More importantly, it feels fast. There is zero JavaScript. Thatâs the main reason why itâs very, very performant (and accessible).
Smooth transitions across pages; smooth animations as you scroll: itâs great what you can do with just HTML and CSS.
I Remember, Part 1
Her voice, when she spoke to us from the doorway, was strange. I was in 3rd Grade. Our teacher went away for a few minutes, then came back, crying. She was a tough public school teacher of the old school, the kind my father’s friends would have called “an old bat.” She was not like […]
Itâll be be back in CodeNode. Thatâs the venue we tried for the first time this year and it worked out really well.
You can look forward to three days of UX talks and workshops:
Tuesday, June 10th is Discovery Dayâuser research, content strategy, and planning.
Wednesday, June 11th is Design Dayâinteraction design, accessibility, and interface design.
Thursday, June 12th is Delivery Dayâiteration, design ops, and cross-team collaboration.
I realise that the alliteration of discovery, design, and delivery is a little forced but you get the idea. The flow of the event will follow the process of a typical design project.
The best way to experience UX London is to come for all three days, but each day also works as a standalone event.
Iâm now starting the process of curating the line-up for each day: a mix of inspiring talks and hands-on workshops. If you trust me, you can get your ticket already at the super early-bird price.
Now, Iâll be up-front here: if youâre a typical white dude like me, youâre not going to be top of the pile. My priority for UX London is creating a diverse line-up of speakers.
So if youâre not a typical white dude like me and youâve ever thought about giving a conference talk, fill out that form!
If you donât fancy speaking, but you want to see your company represented at UX London, check out our sponsorship options.
If you donât want to speak and you donât want to sponsor, but you want to be at the best design conference of 2025, get your ticket now.
Hammers
I bet if you were someone who could make a hammer that would have been a good stable job for years, centuries even. Almost everyone needs a hammer at some point in their life.
“Hey, where’d you get that hammer?”
“Oh, you gotta talk to Bartholomew.”
Then some guy, Greg, would see how busy the hammersmith is making hammers one at-a-time and say, “I’m going to make hammers one hundred at a time!” He’d pay Bartholomew not to make him one hammer, but to make a mold that could make one hundred hammers at a time. Greg has rich parents, he can afford this sort of risky business venture. One hundred hammers for the price of ten, that’s profit.
After the hammer mold, Bartholomew would still get paid. No one actually likes pouring molten iron and hammering, but Bartholomew doesn’t mind. He’s making less money per hammer, but he’s also producing more hammers with a lot less effort, so it nets out okay. The job is less interesting – making hammers and nothing else – but he didn’t like being a salesman and dealing with wayward customer requests anyways. There’s lots of money in churning out hammers this way, it’s more efficient and people like Greg love selling them and making money. Bartholomew buys himself a new ox cart.
Then some other guy, Jeff, seeing all those hammers and all that money, would say “I’m going to make a machine that makes a million hammers a day.” Jeff knows a regional lord who is friends with the king and has big treasure chests. He’d hire Bartholomew and his hammersmith friends to build a giant complex machine with whistles and gauges and a furnace that makes ten hammers a second. A million hammers a day for the price of a thousand hammers, now that’s profit!
The profit charts are going up. Hammers are about as cheap as possible to mass produce… except now Bartholomew and his hammersmith friends are starting to catch the ire of bookkeepers. They’re starting to look expensive compared to the penny hammers that sell for $10. They fire Bartholomew. He’s given three months of pay, which is nice, but in exchange he has to sign a contract saying he’ll never make another hammer machine again in his life. Hopefully Bartholomew squirreled away enough money to retire with dignity, otherwise what’s an old hammersmith do when there’s no more hammers to make?
A Penny
I have a killer business idea. I’m just going to take one penny from every bank account in the world. I’m not going to ask; you can’t say no. It really won’t affect you. You probably won’t even notice, and even if you do, again, it will not affect you. What’s a penny? Nothing. It […]
Chris’ Corner: If This Then Splat
I love the little typographic thing where if you’re reading a block of text that is in italics, that when an italic word is needed within that, it is unitalicized (like that). I’ve seen that expressed in CSS like: That’s probably smart to have, but not all italics are necessarily within an <em> tag. You […]
Where web components shine
In this job we need to think a lot about the tools we choose and why, so I cataloged all the places where web components (for me) feel like “the right tool for the job”. Your list may be different and I’d love to read it. And because I don’t want this to be 100% propaganda, I’ll also cover some of the not-so-great parts of web components as well.
The good parts
Here’s an incomplete list of situations where I think web components are a good choice.
For presentational components that wrap other components - The <slot> element is fantastic for this, but you could write a basic CSS class instead. The first rule of web components is: Not everything needs to be a web component.
When you want to View Source - Most folks don’t care about this anymore but debugging my-button is a lot easier than div.spf50 and you don’t have to rely on sourcemaps.
When building a one-off project - In the same vein as “buildless” components, eliminating dependencies decreases maintenance burdens over the long haul when you have to come back to the project weeks, months, or years later.
For prototyping - More buildless talk, but if you need to get up and going fast, web components zoom.
When you want small, atomic template updates - Some (not all) web component libraries use an html tagged template literal which gives you JSX-like template authoring without a transformer or compiler. Tagged template literals are also blazingly fast with atomic updates over full component re-renders.
When your components need to exist across different tech stacks - If your company lets departments pick their own tech stack or your company acquires other companies and you need a bit of UI consistency between projects, web components are a great choice.
When you’re demoing an accessibility pattern, animation, or CSS-Trick - Why not package it in a web component so people can pick it up and drop it into their project? These puppies are hyper-distributable.
When you make a third-party embed widget - If you need a spicy <iframe>, web components do that and the style encapsulation of the Shadow DOM would probably make your life easier with less code.
When you want to build big applications - You can build Photoshop with web components. Companies build apps with web components every day. And they use Shadow DOM.
When you have designers who can code - Most designers don’t have an appetite or ability to spin up a whole dev environment, but you might be able to convince some to write HTML in a CodePen. If your designer is cool with spinning up a local dev environment, pay them more.
The not-so great parts
No technology is perfect so here are some of the rough edges of web components, where people commonly have trouble, or where I’ve found them to not be the best abstraction.
Shadow DOM - I think everyone’s first encounter with the Shadow DOM ends in catastrophe. It can be confusing and even smart people I know have beef with it. I can say that the more you work with it the more intuitive it becomes, but Shadow DOM does have some gotcha moments that can be frustrating.
SSR - You can SSR web components using Declarative Shadow DOM, but there’s not a lot of literature out there which leads me to believe it’s either kludgy, too library-specific, or both. If this is a non-starter for you, check out Enhance which does this out of the box.
Pages - You can use a web component as your page-level abstraction and leverage some kind of web component-based router… but you’re probably better off keeping it simple and using server generated HTML as your page-level abstraction.
Accessibility - There’s been some long standing issues with Cross-Root ARIA (e.g. associating a label in the document with an input inside a shadow root). Workarounds exist but the good news is that referencetarget is rolling out in Chromium and solves this problem. Hopefully other browsers pick it up soon.
Making a compiler for your JS framework - This is another post entirely, but I can say that over the last couple weeks I’ve had about three years worth of Community Group discussions. Hopefully some ombudsman-ship and progress can happen here.
As always, your mileage may vary. Ultimately the technologies you choose probably come down to what’s cool at the time, what people think solves their problems, and what your team and decision makers feel comfortable with at the time. That said, in the year 2024 of our LORD, despite the apparent limitations I do think these are scenarios where web components are a great fit.
The use-case is slightly differentâthis is about personal archives, like paperwork, screenshots, and bookmarks. But we both came up with the same process:
Iâm deliberately going low-scale, low-tech. Thereâs no web server, no build system, no dependencies, and no JavaScript frameworks.
And we share the same hope:
Because this system has no moving parts, and itâs just files on a disk, I hope it will last a long time.
You should read the whole thing, where Alex describes all the other approaches they took before settling on plain olâ HTML files in a folder:
HTML is low maintenance, itâs flexible, and itâs not going anywhere. Itâs the foundation of the entire web, and pretty much every modern computer has a web browser that can render HTML pages. These files will be usable for a very long time â probably decades, if not more.
Iâm enjoying this approach, so Iâm going to keep using it. What I particularly like is that the maintenance burden has been essentially zero â once I set up the initial site structure, I havenât had to do anything to keep it working.
They also talk about digital preservation:
Iâd love to see static websites get more use as a preservation tool.
I concur! And itâs particularly interesting for Alex to be making this observation in the context of working with the Flickr foundation. Thatâs where theyâre experimenting with the concept of a data lifeboat
I would hate if catching up on RSS feeds felt like catching up on email.
Instead itâs like this:
When I open my RSS reader to catch up on the feeds Iâm subscribed to, it doesnât feel like opening my email client. It feels more like opening a book.
I have a richer picture of the group of people in my feed reader than I did of the people I regularly interacted with on social media platforms like Instagram.
Thereâs also the blessed lack of any algorithm:
Because blogs are much quieter than social media, thereâs also the ability to switch off that awareness that Someone Is Always Watching.
This conduit is anti-lock-in, it works for nearly the whole internet. It is surveillance-resistant, far more accessible than the web or any mobile app interface.
Like Lucy, he emphasises the lack of algorithm:
By default, you’ll get everything as it appears, in reverse-chronological order.
Does that remind you of anything? Right: this is how social media used to work, before it was enshittified. You can single-handedly disenshittify your experience of virtually the entire web, just by switching to RSS, traveling back in time to the days when Facebook and Twitter were more interested in showing you the things you asked to see, rather than the ads and boosted content someone else would pay to cram into your eyeballs.
The only algorithm at work in my feed readerâor on Mastodonâis good old-fashioned serendipity, when posts just happened to rhyme or resonate. Like this morning, when I read this from Alice:
There is no better feeling than walking along, lost in my own thoughts, and feeling a small hand slip into mine. There you are. Here I am. I love you, you silly goose.
I pass a mother and daughter, holding hands. The little girl is wearing a sequinned covered jacket. She looks up at her mother who says ââ¦And the sunâs going to come out and youâre just going to shine and shine and shine.â
The technology addiction trope
Rupert Murdoch’s media have been a key source of moral panic about the internet and technology — see, for example, this from his Times declaring that phones are “dope” that imprison us all in an epidemic of addiction causing cognitive decline: On the latest episode of This Week in Google, we discussed parents’ legitimate concerns about their […]
If you say content-visibility: auto youâre telling the browser not to bother calculating the layout and paint for an element until it needs to. But you need to combine it with the contain-intrinsic-block-size property so that the browser knows how much space to leave for the element.
I mentioned the browser support:
Right now content-visibility is only supported in Chrome and Edge. But thatâs okay. This is a progressive enhancement. Adding this CSS has no detrimental effect on the browsers that donât understand it (and when they do ship support for it, itâll just start working).
But â¦I think Iâve discovered a little bug in Safariâs implementation.
(I say I think itâs a bug with the browser because, like Jim, Iâve made the mistake in the past of thinking I had discovered a browser bug when in fact it was something caused by a browser extension. And when I say âin the pastâ, I mean yesterday.)
So hereâs the issue: if you apply content-visibility: auto to an element that contains an SVG, and that SVG contains a text element, then Safari never paints that text to the screen.
To see an example, take a look at the fourth setting of Cooleyâs reel on The Session archive. Thereâs a text element with the word âslideâ (actually the text is inside a tspan element inside a text element). On Safari, that text never shows up.
Iâm using a link to the archive of The Session I created recently rather than the live site because on the live site Iâve removed the content-visibility declaration for Safari until this bug gets resolved.
Iâve also created a reduced test case on Codepen. The only HTML is the element containing the SVGs. The only CSSâapart from the content-visibility stuffâis just a little declaration to push the content below the viewport so you have to scroll it into view (which is when the bug happens).
Iâm happy to report that after upgrading to Sequoia, the latest version of macOS, the bug has been fixed! Excellent!
Not only that, but thereâs another really great little improvementâ¦
Letâs say youâve installed a website like The Session by adding it to the dock. Now letâs say you get an email in Apple Mail that includes a link to something on The Session. It used to be that clicking on that link would open it in your default web browser. But now clicking on that link opens it in the installed web app!
Itâs a lovely little enhancement that makes the installed website truly feel like a native app.
I wonder if thereâs much point using wrappers like Electron any more? I feel like they were mostly aiming to get that parity with native apps in having a standalone application launched from the dock.
Now all you need is a website.
The biggest issue remains discovery. Unless you already know that itâs possible to add a website to the dock, youâre unlikely to find out about it. Thatâs why Iâve got a page with installation instructions on The Session.
Still, the discovery possibilities on Applesâs desktop devices are waaaaay better than on Appleâs mobile devices.
Apple are doing such great work on their desktop operating system to make websites first-class citizens. Meanwhile, theyâre doing less than nothing on their mobile operating system. For a while there, they literally planned to break all websites added to the homescreen. Fortunately they were forced to back down.
But itâs still so sad to see how Apple are doing everything in their power to prevent people from finding out that you can add websites to your homescreenâdespite (or perhaps because of) the fact that push notifications on iOS only work if the website has been added to the home screen!
At this point Iâve pretty much given up on Apple ever doing anything about this pathetic situation.
Chris’ Corner: There is a Turtle at the Bottom
If you were in charge of the curriculum at a college teaching web development, would you ensure the curriculum was regularly updated with bleeding edge technology? Or would you establish a slower moving curriculum with tried and true technologies? That’s tough. You can’t just flip a coin. It may be impractical to re-invent the curriculum […]
I always like getting together with Remy. We usually end up discussing sci-fi books weâre reading, commiserating with one another about conference-organising, discussing the minutiae of browser APIs, or talking about the big-picture vision of the World Wide Web.
On this train ride we ended up talking about the march of time and how death comes for us all â¦and our websites.
Take The Session, for example. Itâs been running for two and a half decades in one form or another. I plan to keep it running for many more decades to come. But Iâm the weak link in that plan.
If I get hit by a bus tomorrow, The Session will keep running. The hosting is paid up for a while. The domain name is registered for as long as possible. But inevitably things will need to be updated. Even if no new features get added to the site, someoneâs got to install updates to keep the underlying software safe and secure.
Remy and I discussed the long-term prospects for widening out the admin work to more people. But we also discussed smaller steps I could take in the meantime.
Like, thereâs the actual content of the website. Now, I currently share exports from the database every week in JSON, CSV, and SQLite. Thatâs good. But you need to be tech nerd to do anything useful with that data.
The more I talked about it with Remy, the more I realised that HTML would be the most useful format for the most people.
Thereâs a cute acronym in the world of digital preservation: LOCKSS. Lots Of Copies Keep Stuff Safe. If there were multiple copies of The Sessionâs content out there in the world, then Iâd have a nice little insurance policy against some future catastrophe befalling the live site.
With the seed of the idea planted in my head, I waited until I had some time to dive in and see if this was doable.
Fortunately I had plenty of opportunity to do just that on some other train rides. When I was in Spain and France recently, I spent hours and hours on trains. For some reason, I find train journeys very conducive to coding, especially if you donât need an internet connection.
By the time I was back home, the code was done. Hereâs the result:
If you want to grab a copy for yourself, go ahead and download this .zip file. Be warned that itâs quite large! The .zip file is over two gigabytes in size and the unzipped collection of web pages is almost ten gigabytes. I plan to update the content every week or so.
Iâve put a copy up on Netlify and Iâm serving it from the subdomain archive.thesession.org if you want to check out the results without downloading the whole thing.
Because this is a collection of static files, thereâs no search. But you can use your browserâs âFind in Pageâ feature to search within the (very long) index pages of each section of the site.
You donât need to a web server to click around between the pages: they should all work straight from your file system. Double-clicking any HTML file should give a starting point.
I wanted to reduce the dependencies on each page to as close to zero as I could. All the CSS is embedded in the the page. Likewise with most of the JavaScript (youâll still need an internet connection to get audio playback and dynamic maps). This keeps the individual pages nice and self-contained. That means they can be shared around (as an email attachment, for example).
Iâve shared this project with the community on The Session and people are into it. If nothing else, it could be handy to have an offline copy of the siteâs content on your hard drive for those situations when you canât access the site itself.
Travels in Europe
One of the perks of speaking at conferences is that I get to travel to new and interesting places. Iâd say that most of my travel over the past couple of decades was thanks to conferences. Recently though, Iâve been going places for non-work related reasons.
A couple of weeks ago I was in Spain, making my way to the beautiful medieval town of Cáceres for a traditional Irish music festival there. This was the second year that Jessica have been.
Itâs kind of perfect. Not only is it a beautiful locationâthe stand-in for Kingâs Landing in House Of The Dragonâbut there are non-stop sessions late into night, often outdoors. And of course the food is great.
Itâs not easy to get to though. Last year we flew into Madrid and then took the train to Cáceres the next day. This year we did it slightly differently and flew into Seville instead. Then we took the four-hour train journey the next day. After the festival, we did it all in reverse.
That meant we had two evenings in Seville to sample its many tapas. On our last night in Seville, we had local guides. Blogger Dirk Hesse and his parter took us to all the best places. Dirk had seen that I was going to be in town and very kindly got in touch with an offer to meet up. Iâm very glad we took him up on the offer!
Going to Spain in mid September felt like getting a last blast of Summer sun before returning to Autumn in England. The only downside was that the trip involved flying. But weâve been on one more journey since then and that was done the civilised way, by train.
Jessica went to a translatorâs conference in Strasbourg. I tagged along. We got the train from Brighton straight to Saint Pancras, where we got the Eurostar to Paris. From there it was a super fast connection straight to Strasbourg.
While Jessica was at her event all day, I was swanning around the beautiful streets, sampling the local wine and taking plenty of time to admire the details of Strasbourgâs awesome cathedral.
Vibe Check №35
School is back in session, sports are in full swing, we’re tossed and turned by the weekly routine. This past month has been a season of fixing and repair and I’m thankful everything went well and we’re (hopefully) through the hard parts.
Fixing electrical problems
Ramping up to Spooky Month, the lights in our house were acting up. We’ve always had the occasional power problem; lights dimming, oven clocks resetting, but they were random and isolated. But around the beginning of September our lights would flicker for a solid minute every time the A/C kicked on. I was getting concerned about a potential fire – and no matter what anyone says, I was not concerned about a ghost, ghoul, specter, gremlin, dracula or otherwise – so I scheduled a bunch of maintenance calls:
An electrician - He didn’t see any ghosts red flags, but a bar in our main breaker panel was a little loose and possibly shaking when the A/C kicked on, causing the flicker. He also swapped out a non-LED dimmer for an LED dimmer and that seems to have fixed the extra-spooky dining room.
A dryer vent cleaner - Thanks to a D80 code on our LG dryer, I got suspicious that a clogged dryer vent was causing extra draw on electrical system. An older gentleman who liked to talk helped us clean out the 7ft pipe that shoots hot air and lint out of our roof. Works great now and no gremlins.
A refrigerator repair man - The stainless steel column in the middle of our side-by-side fridge was hot to the touch. Heat means energy. Heat is also not what you want in a fridge. Our fridge was over-working to keep itself cool but also freezing our groceries in the non-freezer side. A repair man pulled the fridge out and vacuumed the condenser unit like Luigi’s mansion. Easy enough and cool to the touch again.
A new garage door opener - The electrical surges in our house fried the motherboard in our garage door opener, so we replaced the unit and now it has Wi-Fi, an app, and other features I don’t need. It’s so much quieter now and does not sounds like a T-Rex or a howling wolf man anymore.
The flickering lights seem to have resolved. All ghosts busted.
Fixing a knee
It wouldn’t be a year at the Ruperts house without maxing out our deductible. This time my wife’s tennis habit got the best of her and she needed to undergo laparoscopic surgery to repair a torn meniscus. Surgery went fine, she was walking the same day and (even in bandages) was walking better than before. Surgeries are no fun, but necessary at times.
Fixing the dogs
The week after my wife’s surgery our two new adopted pups had their scheduled appointment from the adoption center to get spayed. A non-event except that two young dogs in two cones is an absolute ruckus. Days and days of bonking into doors and knees (some of which had surgery the week before).
After a week the cones were off and they’re back to themselves; eating rocks, wrassling, and digging holes in my yard and whatnot.
Fixes on the horizon
Thousands of dollars and a handful of stressful weeks later we’re on a path to recovery. Shaking off the stress of the last six weeks is yet another thing to fix. And the fixes don’t stop. The near future is going to be figuring out our next major family expense. We need to update both our cars, the kids want a camper again, and almost all the rooms in our house need updating. I also made an enormous mess decanting all our hoarding piles while trying to clean the garage and need new shelving and storage. Oops, will fix.
Stats
🧠 Learning
Went on a deep dive about Kowloon Walled City, the densest city in the world renown for its lawlessness, crime, and poverty. Kowloon has a deep history under Chinese and British occupation in Hong Kong. A Chinese settlement within Hong Kong territory, Kowloon self-regulated. While I knew about pre-modern China’s opiod crisis, I didn’t understand England’s role and learned how they were the drug dealers in this situation, trading opium from (occupied) India so they could get cheap tea and dinnerware. Fast-forward a few wars, opium dens and organized crime play a prominent role in the story of Kowloon but somehow the urban maze of dystopian unregulated buildings has a charming sense of community to it.
The Adventure Zone Vol. 6 by McElroy, Pietsch, McElroy - My annual reading of tres horny boys. Its been long enough I forget moments from the original podcast so it’s fun to relive them in graphic novel form.
Awe by Dacher Keltner - I love the notion of “micromoments of awe” and consider myself an awe-seeker, but I don’t think I’m new age enough for this book.
The Anxious Generation by Jonathan Haidt - Phones and access to social media are harming our children. As a parent, I think there are valid concerns about device usage but I don’t think you can take this book as gospel. There’s a If Books Could Kill episode on Anxious Generation that makes for a good pairing.
Coda: False Dawns by Spurrier & Bergara - A continuation of the super good Coda post-apocalyptic fantasy universe. This time a preacher comes to town.
Where Good Ideas Come From by Stephen Johnson - A recommendation from a coworker and probably my favorite book of the past two months. Validates a lot of how my own brain works by making connections in adjacent ideas and technologies.
Beetlejuice, Beetlejuice (2024) - A more surreal sequel. Perhaps too many plot lines crammed into one 90 minute film but a fun addition to the series with most of the original cast plus some welcome additions.
Podcasts
Scene on Radio S7: Capitalism - An in-depth examination on the origins of capitalism and its impact on democracy. A MUST LISTEN!
Living Planet - An environmentalist podcast that seeks to answer questions like: What’s better: coffee or tea? What’s better: dairy vs plant-based milk? I think about these dichotomies a lot so this feels like a podcast engineered in a lab for me.
The Adventure Zone Versus Dracula - Finished this actual play arc. Not my favorite but still fun.
The Adventure Zone: Abnimals - New season, I’m a bit lost.
🎙 Recording
Some great guests talking about everything from game dev, to AI, to WordPress, to bespoke apps for adding multimedia experiences to live music.
Been active in the Web Components Community Group for { reasons }
👾 Video games
Brawl Stars - Got roped into playing this with my son and his friends again. There was a Spongebob Squarepants even and that was fun but I’m maxed out and am not picking it up much anymore. It’s a repetitive game but they do good to make it seem different (daily map rotations and updates, etc).
Bought the new Zelda, haven’t played it but my son is almost done.
Design for Real Life: Online for Free AND On Sale for Money
Design for Real Life is now available, for free, in its entirety, at dfrlbook.com. And is also for sale!
I’m certainly not above government criticism nor do I think lying for political gain is a new trick. I am bummed that a website needs to exist called Hurricane Rumor Response from FEMA in order to combat a barrage of lies accusing them of everything stealing donations to literally preventing aid. Hey, I’m not on […]
Mismatch
This seems to be the attitude of many of my fellow nerdsâdesigners and developersâwhen presented with tools based on large language models that produce dubious outputs based on the unethical harvesting of other peopleâs work and requiring staggering amounts of energy to run:
This is the future! I need to start using these tools now, even if theyâre flawed, because otherwise Iâll be left behind. Theyâll only get better. Itâs inevitable.
Whereas this seems to be the attitude of those same designers and developers when faced with stable browser features that can be safely used today without frameworks or libraries:
Iâm sceptical.
Chris Corner: View Transition Performance
I was mystified the other day about why some navigational View Transitions weren’t working for me. It was just a demo thing, so it wasn’t a big deal, not to mention this API is Chrome-only and just a progressive enhancement anyway. But I did learn why! The way I understand it now is that navigation […]
I stayed.
My insight into corporate legal disputes is as meaningful as my opinion on Quantum Mechanics. What I do know is that, when given the chance this week to leave my job with half a year’s salary paid in advance, I chose to stay at Automattic. Listen, I’m struggling with medical debts and financial obligations incurred […]
Boost Client Trust and Team Performance with an Agency Playbook
Learn how creating an agency playbook can enhance your team's efficiency, improve client relationships, and drive continuous improvement.
Chris’ Corner: Web Combinements
A little bit ago David Darnes made a <code-pen> web component that you’d chuck HTML, CSS, and JS inside of and it would show the code and give you an “Open in CodePen” button. That’s enabled by our Prefill API. Miriam Suzanne has played with web components making an <embed-pen> that is like a replacement […]
Preventing automated sign-ups
The Session goes through periods of getting spammed with automated sign-ups. Iâm not sure why. Itâs not like they do anything with the accounts. Theyâre just created and then they sit there (until I delete them).
In the past Iâve dealt with them in an ad-hoc way. If the sign-ups were all coming from the same IP addresses, I could block them. If the sign-ups showed some pattern in the usernames or emails, I could use that to block them.
Recently though, there was a spate of sign-ups that didnât have any patterns, all coming from different IP addresses.
I decided it was time to knuckle down and figure out a way to prevent automated sign-ups.
I knew what I didnât want to do. I didnât want to put any obstacles in the way of genuine sign-ups. Thereâd be no CAPTCHAs or other âprove youâre a humanâ shite. Thatâs the airport security model: inconvenience everyone to stop a tiny number of bad actors.
The first step I took was the bare minimum. I added two form fieldsâcalled âwheatâ and âchaffââthat are randomly generated every time the sign-up form is loaded. Thereâs a connection between those two fields that I can check on the server.
Hereâs how Iâm generating the fields in PHP:
$saltstring = 'A string known only to me.';
$wheat = base64_encode(openssl_random_pseudo_bytes(16));
$chaff = password_hash($saltstring.$wheat, PASSWORD_BCRYPT);
See how the fields are generated from a combination of random bytes and a string of characters never revealed on the client? To keep it from goint stale, this stringâthe saltâincludes something related to the current date.
Now when the form is submitted, I can check to see if the relationship holds true:
if (!password_verify($saltstring.$_POST['wheat'], $_POST['chaff'])) {
// Spammer!
}
Thatâs just the first line of defence. After thinking about it for a while, I came to conclusion that it wasnât enough to just generate some random form field values; I needed to generate random form field names.
Previously, the names for the form fields were easily-guessable: âusernameâ, âpasswordâ, âemailâ. What I needed to do was generate unique form field names every time the sign-up page was loaded.
Now I generate form field names by hashing that random value with known strings (âusernameâ, âpasswordâ, âemailâ) together with a salt string known only to me.
(Remember, the nameâor the IDâof the form field makes no difference to semantics or accessibility; the accessible name is derived from the associated label element.)
The one-time password also becomes a form field on the client:
If those form fields donât exist, the sign-up is rejected.
As an added extra, I leave honeypot hidden forms named âusernameâ, âpasswordâ, and âemailâ. If any of those fields are filled out, the sign-up is rejected.
I put that code live and the automated sign-ups stopped straight away.
Itâs not entirely foolproof. It would be possible to create an automated sign-up system that grabs the names of the form fields from the sign-up form each time. But this puts enough friction in the way to make automated sign-ups a pain.
You can view source on the sign-up page to see what the form fields are like.
I used the same technique on the contact page to prevent automated spam there too.
Chris’ Corner: It DOM Matter
“Regardless of where it is in the DOM.” That’s a phrase that goes through my mind in regard to a number of new CSS features and it’s so cool. I certainly spent most of my formative HTML & CSSin’ years being very careful about where things needed to go in the DOM specifically because CSS […]
Announcing BCD Watch
A new service to help you keep up to date with changes in browser support.
Media Diet
Masonry and good defaults
I’ve been writing about and teaching people CSS layout for a very long time. People sometimes call me an expert in CSS. I don’t know about that, but I’m confident in claiming expertise in teaching and writing about CSS. I’ve been doing this for a long time, about 25 years. Over that time I’ve learned […]
How they have failed us
It is as if the editorial department at The Washington Post woke up one morning asking, in headlines I will quote below, “What are we doing wrong?” I will start by trying to answer the question for them, The New York Times, CNN, and the rest of incumbent journalism: You have refused to recognize fascism […]
Jeff Bridgforth: A front-end developer is the one that makes the design come alive. He or she is the person responsible for bringing the creative vision of the designer into being through code and can even push the design further by adding the interactivity or animation layer that the designer may not have even thought […]
Hibiclens
Every two-to-four years my body chemistry changes and my armpits start to reject my deodorant with an intense itch. All that aluminum has gunked up the works I guess. Usually cycling out deodorants works fine, but this time it didn’t work because my armpits were overpowering all the other deodorants.
I tried a tactical reset and took the “No deodorant challenge”, the legend –which I remember my hippie step-brother Nik telling me about thirty years ago– that if you stop using deodorant for two weeks the oils in your body naturally recalibrate and you stops smelling… but this urban legend very much did not work. I smelled horrible all the time.
I casually mentioned this issue to my dermatologist and he was quick to recommend this homely teal bottle of over-the-counter 1970s logotype, Hibiclens.
I like to think the “hibi” part of Hibiclens stands for “hibiscus” because it’s a pink liquid (or foam) that you apply like soap and rinse off. It’s colored pink because it’s an anti-septic and hospitals like to color their liquids, but the reason it works –as my dermatologist explained– is that bacteria creates the odor in your armpits. That was news to me. My prior understanding was that puberty causes teenagers to grow green stink lines that shoot out from their bodies. Guess the science there has evolved.
I’m happy to report that Hibiclens works wonderfully and I’m pleased with the results. I don’t wear deodorant everyday anymore, my armpits aren’t irritated, and I only need to apply a squeeze of Hibiclens every three days or so (but even that timeline appears to be stretching out). I do sometimes wear deodorant when the stakes are high, but day-to-day working form home is au naturale. There’s a small satisfaction that the answer to my fragile-masculine deodorant FOR MEN problems is a pink liquid in a Tiffany blue teal bottle. Time will tell, however, if it really does solve my problems. I’ll follow up in two-to-four years to see if it still works.
Good forms
Brian LeRoux posted a few thoughts about forms and the idea of a “good form” resonated with me so I dogpiled some of my own thoughts and experiences on it. Here’s a compilation of those ideas. I’m sure this is incomplete and would love to see your list.
Good forms work without client JavaScript (Brian LeRoux)
Good forms always submit (Brian LeRoux)
Good forms remember values and display problems inline (Brian LeRoux)
Good login forms work with password managers (Mingo Hogan)
Good forms use a <form> tag
Good forms use appropriate input types
Good forms have clear labelled inputs and buttons
Good forms have focus states
Good forms have logical tab order
Good forms allow paste
Good form elements leverage the inputmode attribute
Good form elements leverage the autocomplete attribute
Good search forms wrap the <form> tag in a <search> element
Good forms can be reset with a <button type=reset>
Good forms participate in formData
Good forms don’t use placeholder as a label
Good forms work on phones
Good forms don’t popup and ask for personal information
Good forms only ask for what is necessary and aren’t too long
Good forms use HTTPS
Good forms use the proper HTTP verbs
Good forms validate on the client AND on the server
Good forms have been driven with a screen reader before going to production
Good forms clearly denote required attributes
Good forms warn about costly or destructive actions
Good forms make the baby Jesus smile
Good authenticated forms should have a server-generated nonce value
Good forms should do a pre-flight check for navigator.onLine before attempting a submit
Good forms start with accent-color for styling and only get more complex if necessary
Good forms see custom controls as a radioactive asset that must be removed at the earliest opportunity
Anyways. People should talk about forms more. Here’s some more resources on good form design.
Of all the injustices happening in the world… you know who needs to be taken down a peg? The Book-a-Week People. Fuck those guys. With their books in their Zoom backgrounds. That bothers me. Fuck them.
I know the original post is part of some weird hustle culture subgenre, but it’s probably no surprise to folks reading that I like books and fit this targeted demographic. After pondering whether I’m “finding answers to questions or questions to answer” my answer is a resounding, “…I guess?”
A lot of why I read is about juxtaposition. I read business books to juxtapose my experience against the Platonic ideal of “good business”. I read about social justice to juxtapose my lived experience against others lived experience. I read science fiction to juxtapose the present against futures I haven’t imagined. I read non-fiction airport books because I like facts and social science garbage. I read books on topics I’m already an expert in to see if there’s information that further informs my perspective. I read to teleport to different places, minds, times, and rooms where it happened.
I read to escape. I read to find myself. I read because I like facts. I read because I like fiction. I read for entertainment. I read to fall asleep. I listen to books to help me finish mundane tasks like doing the dishes every night. And I listen to books because there’s a slight communistic thrill of getting them from the library.
There’s a widely accepted idea out there that “the best way to become a better writer is to become a better reader.” I think Stephen King said it, but I can’t find the quote. Either way, I want to become a better writer. Whether fact or fiction, I want the ability to not struggle when putting thoughts on the page. Oh to partake in this magical osmosis! The transitive impartation of skills! Let me flex the language encoding and decoding synapses in my 40-watt brain.
And sometimes reading is out of due diligence. Like… if you’re going to start a job as a manager… read a book on management? Or ten? You’re dealing with people’s lives and careers, seems like the least you could do. If you’re going to talk or blog on a topic and there’s a relevant book… read that before showing your ass? A thought backed by some literature seems better than regurgitating TikToks.
Books are strange objects. Chapters and chapters of coherent research and lived experiences assembled by people who wanted to put it all down in one place. Edited by actual editors who like editing. Designed— down to the weight of the paper, the typography, and the illustration on the cover— to make the experience of reading it enjoyable. Books are uncanny and impractical objects. A terribly inefficient way to encode information from one brain to another, but an excellent way to tell a story.
You can also just like books for no reason.
Anyways, books. Check ‘em out.
The West Just Burns Now
It really wasn’t that long ago when the Western U.S. wasn’t absolutely guaranteed to be on fire every summer and into the fall. Now, it’s just what happens. August and September? That’s “smoke season”. What should be absolutely beautiful months to enjoy the outdoors are now when it rains ash, the sky is a deep […]
9/13/01
“I’m reassuring myself that New York City is still here.”
As often as I am disappointed in and critical of them lately, I will not cancel my subscriptions to The New York Times or The Washington Post. They should be so lucky, for I will stay on their cases. I also wish to support the good reporting that still comes from them. I’ve been thinking […]
Recently Heikki Lotvonen cooked up a very cool idea: what if the colorization of code output on the web could be handled by the font itself. Syntax highlighting, as it were. So rather than accomplish this with a heaping pile of <span>s with classes to colorize the text, the font file knows how to apply […]
Broken Blossoms
“Raising loved children is the only consistent and lasting healing some will know.”
As Nicolle Wallace exclaimed on her show Friday, Liz Cheney and Dick Cheney, Alexandria Ocasio-Cortez and Bernie Sanders have all gathered together around a cause. That cause is democracy and its standard bearer is Kamala Harris. This is a momentous time in the United States, unprecedented at least in this century and likely since long […]
I love the product name. Ruby has just learned two-wheel bike riding and is loving it. But we live in a very hilly area. This little tow strap thing is very easy to pop on and off so I can tug her up hills when she needs it, then remove when she doesn’t (it’s kind […]
How to Download a YouTube Video or Channel
The ability to download media on the internet almost feels like a lost art. When I was in my teens, piracy of mp3s, movies, and just about everything else via torrents and apps like Kazaa, LimeWire, Napster, etc. was in full swing. These days sites use blob URLs and other means to prevent downloads. Luckily […]
Weeks ago I was looking in to a performance issue for our animated spinner component and stumbled across a tool in DevTools I hadn’t used before: The Performance Monitor Panel. In 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.
The Performance Monitor collects performance data in realtime and puts it on a graph. It’s handy for detecting performance problems at a high-level. If your CPU, memory, DOM node count, or event listeners only go up while clicking around, you probably have a leak in your code. The part I was most interested in were style recalculations per second and layouts per second. Our spinner component was triggering style recalculations and layout calls at a rate of 120 per second. Yikes! That’s a lot of extra work on the CPU.
Next I turned on Dev Tools > More Tools > Rendering > Show Paint Flashes and I could immediately see the tactile feedback of green boxes thrashing around as the browser repainted the component hundreds of times per second. The green paint boxes confirmed that this UI work was happening on the main thread instead of the compositor thread. The Performance Monitor showed my CPU usage at 5-9% of my Mackbook Pro. Double Yikes.
The Performance Monitor panel pairs nicely with the top-level Performance panel. While the Performance Monitor panel is very high-level, the Performance panel is an in-depth debugging tool where you can inspect a snapshot of your app down to each function and render call.
Capturing a snapshot in the Performance panel confirmed what I was now seeing. I could see the “red line of death” of dropped frames where I locked the main thread. The remediation steps were pretty simple but I did need to strip down and recode how our animation worked.
It took a couple of prototypes to shop around a workable solution. The good news is our animation is off-loaded to the compositor instead of the main thread now. CPU use is now at 0.2% (down from 5-9%) and our recalcs and layouts are down to 0 but the animation still chugs along. Truth be told, a loading spinner is a pretty insignificant component and is only temporary, but reducing CPU usage by 10% here makes room for other JavaScript activities… like… y’know… fetching and parsing data.
How Murdoch makes a meme
I’ve long said that Rupert Murdoch is the single most malign influence in English-speaking democracy. He executes his strategy in small ways that add up. Here is an example: how a trope is born across Murdoch’s worldwide empire. Here is the editorial board of #MurdochJournal with its paternalistic, patronizing, sexist, diminishing take on the Harris/Walz […]
CSS still gives me the warm fuzzies sometimes. We’ve gotten so many amazing CSS features the past few years, that each alone makes me happy. But when those features are combined, I’m often stunned and get thinking about how we’re only scratching the surface of what is to come. Take a new demo by Adam […]
Vibe Check №34
The temperatures soared over 100ºF and the yard is dead and everything smells roasted. But the ten day forecast shows a ten degree dip and that is cause for celebration. Another school year has started. My son has started middle school and my daughter is now in third grade. It’s shocking how fast life goes. And on the workfront, the pace is picking up now that everyone has come back from summer vacation.
A lot has transpired since the previous vibe check (vacations, new pets, rock shows). To start it off, my family escaped the heat and went to San Diego (as is the custom) for one good week and one awful week…
San Diego: The First Good Week
We flew out to Phoenix to join up with my wife’s family and caravan out to San Diego. We had a family dinner the night before and got to see my one year old grandnephew for the first time in a long while. He’s a sweet kid but does not want his Granduncle Dave holding him yet.
The next day we loaded up the beach gear and drove to a resort in Mission Beach in San Diego for a four day stay. We had a great time with my wife’s family letting the cousins run loose while grown-ups played tennis, pickleball, and I played my annual round of golf with my male in-laws. After four days of big family time we scooted up to Encinitas to stay for two nights with our Austin friends whose summer rental had a guest house.
Encinitas was super charming. We stayed near Beacons Beach which is one of those cool beaches at the bottom of a cliffside. We beached pretty hard. My daughter and her oldest bestie pranced up and down the shoreline for hours and she even learned to surf. The contrast between Mission and Encinitas couldn’t be more stark. The trip could have ended there and would have been one of the best vacations in the books. But we weren’t done! We planned to extend the trip with a one-week rental in Mission Bay.
San Diego: The Second Awful Week
The minute we checked into our beachside rental the whole vibe shifted. From tranquil Encinitas to getting blasted with the sounds (and smells) of Mission Beach. Honking, motorcycles, bottles clanking, fighting, garbage trucks, neighbors blasting bad music, and smells drifting up from the alleyway. It felt like going from a yoga retreat to a frat house. Then it got worse. That night our daughter said she didn’t feel well and the next day my wife started going downhill.
A week of beach fun turned into spending thousands of dollars to be sick inside a beach-adjacent summer rental watching SpongeBob Squarepants on repeat. After three urgent care visits over two days the sick members of our party had the required antibiotics to start feeling better. The next day, we went home.
And –as if it couldn’t get any better– I got COVID on the plane ride back. Ughck.
We adopted two new pups
Laneige (aka “Laney”) - A black lab mix with one brown eye and one blue eye. She’s an attention thief who is not shy about demanding pets.
Rosebud - A lab mix with expressive pointy ears and two blue eyes (some heeler in there?). She’s the more anxious of the two, but once befriended will roll over for belly rubs.
Our kids have been asking for a new dog for over a year. Every day this summer I’d step into the house and my daughter would spin a laptop around to show me the new dogs she found on the Austin Pets Alive! website. She even wrote a song to try to convince me to get a dog. 🥺 They were dead set on a pup named “Laneige” (named by the shelter after a Korean lip balm).
After dropping the kids off at grandma’s house for a long weekend, we set our plan into action: adopt a dog and surprise the kids. But our plans changed when the shelter brought out Laneige’s sister Rosebud (also named after a lip balm) to our meet and greet. Her pointy ears and blue eyes were too cute. We tend to play it more conservative when it comes to big life choices but we decided to go full stupid for once and surprise the kids with not one dog, but two dogs!
Names may change and we daily ask ourselves “Did we overdo it?” but generally we’re happy with the new additions.
Frostapalooza
A year ago Brad Frost called my wife and I to share a wild idea for his 40th birthday party: get all his musician friends from all over the world together on one stage for one night of rocking out. Over the course of the next year we picked songs, learned parts, recorded tracks, hoping –but never knowing– how it would all turn out when we assembled in Pittsburgh for one night of rock.
It. Was. Phenomenal.
Nothing could have prepared me for the blast from the five piece horn section. It sounded perfect. It felt big. Dozens of people on stage playing together for the first time, but you wouldn’t know it. Music –good music– filling the halls of an old church. I’m a foot away from a bass guitar amp but I can’t hear the bass because there’s so much music happening. In the crowd I see people listening to my wife sing –they’re singing along– and it takes me back to when I first heard her sing at a karaoke bar in Los Angeles when I fell in love with her.
Outside the main event, it felt good to put kindling on some friendships. I got to see Chris, which is always pleasant to see the one person I’m guaranteed to have an hour long conversation every week. Zach & Danh (my co-hosts from Aside Quest) flew up on the same flight. But I got to see and chat with new and old friends as well; Ian, Dan, Ben, Phil, Mike, Jina, Burton, Adekunle, Kevin, Brian, Scott, Josh, Veronika, Ryan, Joshua, Jeff & Jenn & Arlo, Jeremy & Jessica, Daniel & Jessi, Rebecca & Ryan, and countless more folks. Since the US web development conference scene has more or less imploded since the pandemic, this felt a bit like a family reunion with some of my favorite people from around the world.
In the end, Frostapalooza was a magical night celebrating the power of music and friendship. It feels a bit like a dream now and when I explain it to people my words fall short. An ephemeral joyous moment and I have no idea if I’ll do anything like that in my life again. That’s special. The biggest thanks to Brad, Melissa, and Ella who sacrificed a lot of time, money, and life-force to pull it off.
The stats, o the stats.
Okay, quantifiers. Calm down. Here’s your beefsteak of itemized inputs and outputs.
🧠 Learning
When I got sick I did a deep dive in playing with Obsidian and building a vault. I’m still on Notion (for now) but the jump is less intimidating. I like the indie/privacy angle of Obsidian a lot but from a UX perspective it feels “finicky” when mousing over content in a way that Notion doesn’t. The level of customization is also nicer in Obsidian, but also a potential endless rabbit hole for my distracted brain. Moving my “second brain” is not a task I want to take lightly.
Watching countless Obsidian videos exposed me to a new organization system: August Bradley’s “Pillars, Pipelines, and Vaults” (PPV) system. I’m not ready to ditch my Notion PARA setup, but the idea PPV introduces that I’m gravitating towards is that my brain is a system of “Inputs” (links, books, and notes vaults) and “Outputs” (blog posts, side projects, and task pipelines) and those exist across “Areas” (pillars) in my life. Inputs need organization (e.g. folders and/or tags) and outputs need a process (e.g. a kanban). I think Obsidian fits this paradigm better than Notion.
📖 Reading
Not my best summer of reading but I’m enjoying the slower pace.
Finished
Like, Comment, Subscribe by Mark Bergen - The history of YouTube. A great look into how this product which changed the world evolved (and also failed to evolve).
Read Write Own by Chris Dixon - On a recommendation I read a book about crypto. Shockingly, I didn’t disagree with much here… except that crypto is the solution to the problems outlined in the book. He spent chapters pitching ideas that crypto could solve (decentralized social networks, carrying over video game assets, etc) and those have since been debunked. There’s still no job that crypto does better than a database. Ultimately I think it’s a question of “Who benefits?” when it comes to this technology and I think the answer is: the people who already own a lot of it.
Humankind by Rutger Bregman - I’ve read this book before but it’s a pleasant little dose of positivity. Are we humans that trample each other while leaving a burning plane? Or are we humans that help each other get off the plane? The answer might surprise you.
Slow Productivity by Cal Newport - I liked this book better than the last but I think it suffers from the same problems all his books do… he’s shielded by academia and not that busy of a person. I laughed out loud when he used Jane Austen as an example of Slow Productivity (paraphrasing) “After her father sold the farm and the school and they moved to a beach town, she was able to slow down.” Like, yeah dude, I could slow down too if my dad retired and sold the literal farm.
Goldenboy (1995) - Full of fan service but has a main character that flips the genre on its head a bit.
Mob Psycho 100 S2 (2019) - Mob is at it again. Such a weird, fun series.
Gundam Breaker Battlogue (2021) - A short web series to promote a new line of Gundam models. Not my favorite “Builder” series nor is it my favorite line of Gundam models. Battlogue on all fronts feels rushed and cheap.
🧶 Crafts
Tamiya Mini 4WD Blast Arrow Starter Pack - I got into watching min-cars race around a track. I bought one for me and one for my son. I finished mine. My son didn’t finish his. But we don’t have a track to race on… so I either need to pony up cash or figure out another way to race.
🤖 Gunpla
I built the Perfect Grade Unleashed RX-78-2 Gundam - The granddaddy of all granddaddies. This was an incredible build start to finish. I stalled out for two weeks over adhering some metal etching parts but I tried out different glues and cements and ended up using a Scotch Restickable Glue Stick (the same glue for Post-it Notes) and it worked great.
From the inner frame to the outer shell of the body armor, this model is jaw dropping. It has heft, but not too heavy. It poses but feels sturdy. Bandai nestled in gimmicks everywhere but also so subtle you’d never know they were there from a distance. I need to finish putting on all the stickers, but it’s already so incredible to look at that I fear over-decorating.
⌨️ Open source
Nothing official. Except for my job I guess which is technically open source.
This post annotates a talk I gave on August 24, 2024 at the final XOXO Festival in Portland, Oregon. The talk was about why I left the internet, how the Covid Tracking Project got me back online, and most of all how the work we did at CTP led to me to believe that we—the weirdos of internet-making and online life—have to not merely retreat from the big-world social internet, but fix it. You can watch it on YouTube now, and the text as written is below with some margin notes.
Andys Baio and McMillan made the festival and conference such an intensely sweet, thoughtful, and welcoming place for digging all the way down into what the past several years have done to us, and I feel wildly fortunate that they brought me along for the final round.
Since delivering this talk, I’ve launched a tiny studio, wreckage/salvage, to do the things—deep research, deliberate experimentation, careful network thinking—I ended the talk exhorting all of us at XOXO to do.
The talk
In the few places where I had text in my slides that didn’t get echoed in the narration, I’ve included them as text in [brackets].
A few months ago, I went back and rewatched a bunch of XOXO talks, and it turns out that not all, but a lot of them, break down into two categories, which are, roughly:
Here Is a Cool and Meaningful Thing I Did With the Internet
(Yay)
and
Here Is a Horrifying Thing the Internet Did to Me
(Oh no)
And the tension between those two kinds of talks, and these two kinds of experiences, is the central tension of the internet. And especially of the social internet.
Because to live and work online now is to exist in a rolling disaster in which it is increasingly impossible to tell the difference between 4chan-style amateur griefing, inept political destabilization campaigns, and just randos who’ve normalized on acting like nightmares.
It’s to be goaded, manipulated, and shadowbanned by systems that hide the people and reality we need and serve us brain-scrambling streams of misinformation, creepy AI, Nazis in wretched abundance, and increasingly few chances to just be human. But a lot of us can’t leave, because these systems have such a stranglehold on our work, our reputations, and our lives.
They have all of this because we gave it to them in exchange for what they offered ten or fifteen years ago. And then, as our societies became more and more enmeshed with and dependent on these systems, the deal got worse and worse for us, and it got harder and harder to escape.
This is an increasingly terrible bargain.
And this is the experience within the empire that brought the world Facebook and YouTube and Instagram and Twitter. The things the social internet does to people outside the US and Canada and Western Europe are orders of magnitude worse.
I started working on the internet straight out of undergrad at the end of the last century.
Behold Ruffilus the illuminator and his…colleagues.
This was my office. People forget what it was like before React.
My career in tech and publishing and journalism was completely tangled in the internet, and it gave me so many gifts. And the internet gave me so many gifts: Early on, at A List Apart, I got to advocate for web standards and accessibility. Later, at design agencies, I got help some brilliant people do good and important things. At OpenNews, I got to work with some of the best and kindest data journalists in the world. Sometimes I got to travel around and give talks with my friends.
I got my friends.
But also the work I did was grounded in understanding complex socio-technical systems, and when you do that for a long time, you start to get a feeling for what it looks like when a system is going off the rails. Which meant that it was hard for me to look at the the platforms and systems growing up around us and not feel deep unease.
And some of the gross internet things happened to me too, though I got off much more lightly than many. But I was also just getting worse, as a person. Meaner and sharper. And every time the platforms rewarded my moments of aggression or contempt, it felt like something tightening around my brain. So when I got the chance to get off the internet, I took it. I moved to the literal woods, planted a garden, wrote a book, and hung out with my extremely great kid. And when she got older and started school, I started trying to figure out how far from the center of tech I could possibly work and still be able to pay the bills.
For orientation purposes, this was in the very early spring of 2020.
(shark noises)
And in the early spring of 2020, my friend Robinson Meyer is the only other person I know who is obsessing about the virus that would be covid. I’m sitting on my kitchen floor in the middle of the night one night texting with Rob about covid numbers because my partner is traveling and I’ve gone feral. And at this point, we know that we have a couple hundred official covid cases in the US. What we don’t know, because the CDC has silently stopped reporting it, is how many tests we’re doing. And if you don’t know how many tests you’re doing, or where you’re doing them, case numbers really don’t tell you all that much.
And I, being me, was like, “Well, we have to assume covid’s everywhere, cause I don’t think we’re really testing enough to say otherwise.”
And Robinson, being a journalist, was like “Huh.” And then he rounded up his friend and fellow Atlantic journalist Alexis Madrigal and they stayed up all night and went to all the websites and called all the state public health departments and got the numbers.
(The answer was that despite the White House and the FDA talking about making millions of tests available, the US had done a couple of thousand tests, total. Which meant we had no idea what was happening.)
The COVID Tracking Project (CTP) was a volunteer collective that formed to build on Alexis and Robinson’s initial investigation and continue that data-gathering work for just a few weeks, until the CDC started publishing better data. When Alexis put out an initial call for volunteers on Twitter, I said I could throw in a couple hours a day for about a week or two.
A couple months later we had a real website, an API, several hundred dedicated volunteers, and I was co-running the project with Alexis and ended up doing something closer to 12-to-18-hour days for a year.
Because what we discovered after we’d done the work for a few weeks—expecting every day that the CDC would publish their data and let us get back to our lives—is that the CDC did not have the data. That the wealthiest country in the world was unprepared to count cases or tests at scale, and which relied on 56 separate state and territorial data systems with their own chronologies and data definitions and whose pipelines often included literal fax machines.
The reasonable thing for a volunteer collective to do in the face of this shambles was to stop. Instead, our volunteers put more than 20,000 person hours into just collecting, maintaining, and reconciling the data it as more and more information came online. Because the other thing we learned was that the same federal government that had failed to assemble the data was now relying on our numbers as vital infrastructure. That FEMA was using to plan testing sites and distribute ventilators. That when Mike Pence did his White House covid briefings, he was often reading our numbers.
And also this time, our numbers were everywhere. In national and international newsrooms and massive data projects and all these local FOXTV affiliates. So we went out every day and got the numbers and kept the beat. By the time we’d wound down, our work had been featured in the Trump Administration’s Opening Up America Again plan in 2020, and the Biden Administration’s Day One covid strategy in 2021. Our data was cited by the CDC, the FDA, the Department of Energy, and the Department of Defense, used in more than 40 Congressional reports, and referenced in lawsuits by the NAACP and the Southern Poverty Law Center.
DJ Patil, a former White House Chief Data Scientist, said, of CTP: “You filled a gap that is essential and I fundamentally believe you and the team saved an incredible number of lives.”
I am so grateful that we were able to do what we did.
And without the social internet, we’d never have been able to do it. First of all, we’d never have been able to find each other—like, all of us, but even specifically just me. I met Robinson on Twitter. Rob met Alexis on Twitter. But also the range and quality of our randos from the internet was just unparalleled. We had people from big tech and startups and students and artists and academics and even a few actual public health experts.
And Twitter was quite bad then but still usable for a lot of people and that’s where all the reporters hung out and found our data and APIs and explainers. And through the internet, we helped a lot of justifiably frightened people deeply understand the data and use it to make informed decisions about their organizations and communities and families.
Living through the experience of standing up a volunteer data organization that did so much made it blindingly clear to me that the exact networks we’re often having a pretty miserable time with are essential for building the agency and capacity to deal with emergent crises when our institutions fail us.
Which is a thing we are all continuously living through.
[pandemics]
[climate disasters]
[genocide]
The networks are worse now than they were four years ago. So much that I don’t think we could do CTP now if we needed to. And there’s a pretty strong belief in many quarters that because of corporate predation and human nature, no many-to-many social system can ultimately be anything but corrosive.
The Dark Forest model, which gained popularity because of Three Body Problem and was adapted for the web I think most elegantly by Maggie Appleton, sort of formalizes this. It posits that the public internet is now so hostile to authentic human sociability that real interaction has to go underground, into private Slacks and Discords and group chats. And this is happening both because the platforms themselves are extractive surveillance monsters and because they’ve incentivized so many predatory, PvP behaviors.
In this light, going underground seems wise and protective.
My fundamental discomfort with that conclusion is that when those of us who have found our people and managed to get even semi-stable retreat into private spaces, we are slamming the doors on all the people who haven’t got there yet. In Dark Forest terms, we’re leaving them up there to get eaten.
And yes, we do need few-to-few connections. We need spaces of trust in which we can acknowledge meaningful disagreements and still pursue our common goals collectively, which is essentially impossible to do in public.
So I think the answer can’t be to cede everything above ground to billionaires and demagogues and the predatory forces they’ve incentivized.
And we can’t keep accepting the increasing poisonous status quo the social internet…
[(capitalism)]
…has backed us into.
Which leaves us with only one option, which is we fix the fucking networks.
Fortunately, a lot of people have had personally had enough and bailed on Twitter or Facebook. And even when they land on other big platforms, it works against the idea that the current state of affairs is inevitable and eternal. There are a lot of projects—some new, some simmering for years—trying to build better networks. I don’t know if any of these systems will be the thing itself, rather than what Thomas Kuhn called pretender technologies—the things that seem like the next paradigm shift, but don’t really go anywhere
But “pretender” technologies are also laboratories for trying out better futures.
I’m saying this in this room, now, because a lot of us remember working and living in internet systems that were flawed but not systematically designed to burn our time and emotions and safety as fuel.
We all have a role to play in making networks that are genuinely better for all of us, as network builders or writers or artists and game designers and all the other people whose presence makes networks better and richer.
There’s a real crack in the foundations of the current order. And I believe that if we each brought our weird talents and gifts and treated the problem of making better networks as our problem, instead of hoping someone else will figure it out—we would have this thing in the bag.
At around the six-month mark of Covid Tracking, The Atlantic asked for a piece about how we were doing so after my tracking work was done for the day, I stayed up and wrote something and sent it in and they were like “Ohhh we meant something…reported,” and I was like “Ahhh, that’s cool but you gotta find someone else to write that.” So this has never actually been seen, but I want to read you a piece of it.
In the project’s first few months, we talked a lot about building a plane as we flew it. Now it feels more like we’re building a bridge as we walk it. Each day’s work is an act of faith in the dark, putting down a little more knowledge to stand on. We still can’t see the other side.
But every day at 3:30 Eastern, a dozen strangers turned colleagues ignore the the weirdness of daily life in 2020 and fight their way through the eccentricities of 56 individual multi-tabbed dashboards to fish out the numbers we need. Later, their counterparts in Data Quality and Race and Ethnicity Data and Long-Term Care will log on and do their rounds. Because every day, no matter what the government does or doesn’t do, we count the sick, the very sick, and the dead, because we believe their lives and deaths should count.
And also because there are healthcare workers and epidemiologists and officials all over the country fighting for the living. We do this work in the belief that the millions of data points we assemble will give them the clarity to help us all, somehow, find our way out.
And we’re still not out. But we’re also not back in the summer of 2020, when the hospitals were overflowing and the air in LA was unbreathable because the crematoria were working around the clock. Helping people understand what the pandemic was doing around them was only one tiny piece of what got more people through from those days to now, but it mattered.
I never meant to work in public health data, and I don’t, anymore. It’s too hard on the heart. I’m also not a climate scientist or a human rights expert. But I’m pretty okay at the internet. So I’ve spent most of the past year and a half trying to map out some of the cultural territory of our networks and explain what I find.
I am doing this because I think we need to understand, as concretely and as close to the ground as possible, what has happened to us. And then use that knowledge to try out new ways to be together, purposefully and with a careful eye on the human costs of our experiments.
Because no matter what happens here in November, we all know that in the future, there will be more crises. The next pandemic. The next climate disaster. The next genocide.
So I think we have to fix the networks now, so that when that time comes, we can put all our energy into getting more of us safely across to the other side.
Thank you.
Notes
The paintings and illustrations in the talk are from Lawrence Alma-Tadema’s beautiful and deeply hilarious Spring, Hieronymus Bosch’s Hell panel in his famous triptych, the Passionary of Weissenau (Weißenauer Passionale), an illuminated 12th century life of the Christian saints known in manuscript-nerd land as Cod. Bodmer 127, and Paulo Uccello’s hypnotic The Hunt in the Forest. The Bodmer manuscript illumination depicts the illuminator himself, and I think it’s especially charming.
The photograph at the end was taken by me and shows the Astoria-Meglar bridge, a steel cantilever through-truss bridge that spans the Columbia River a few miles inland from its egress into the Pacific. I don’t actually love being on that bridge, but I love looking at it from below.
On the subject of the bad bargain we’ve made with the social internet and its entanglement with broader systems of surveillance and hyper-financialization, I super-highly recommend Kieran Healy and Marion Fourcade’s wonderful book, The Ordinal Society, which is so clearly and tightly written that it feels like a beautiful knife; this effect is softened only slightly by the inclusion of so many load-bearing puns. (It’s funny and important, everyone should read it.)
Those curious about The Covid Tracking Project will find lots of documentation here, and the recently updated podcast about the project—and the broader failures of public health data during the pandemic—from Reveal is very good and features a lot of audio from inside the project as we worked in 2020 and 2021.
Maybe you knew Brad Frost played the bass? What you might not know is Brad is a monster on the bass. His love for performing music is off the charts. So for Brad’s 40th birthday he had an idea: throw a concert. It came fully named: Frostapalooza. The way Brad envisioned it, it was a […]
Web Unleashed — Front-End Developer Conference in Toronto in October
WEB UNLEASHED is the ultimate front-end developer conference. Here’s the important details: I’ll be there to give a talk and be around. I’ve decided that it would be fun to talk about DX, Developer Experience that is, as a general topic. I have the pleasure of getting to care about it as a developer myself, one […]
California’s Deal for News
A deal has just been struck in California by Assembly member Buffy Wicks that averts what could have been, in my opinion, disastrous legislation written by lobbyists to benefit primarily incumbent, investor- and hedge-fund-controlled news media in and out of the state. I am gratified that the outline of the announcement approaches what I had […]
Objection Handling: The Secret to Improving Your Website Conversion Rate
Learn how to boost website conversion rates through effective objection handling. Identify concerns, address them proactively, and implement strategies to build trust and drive sales.
The fediverse governance processes of moderation, server leadership, and federated diplomacy. (Courtesy Bayerische Staatsbibliothek)
Back in the fall, I wrote about a research project I was diving into with Darius Kazemi. Now, after a few months of prepping and conducting interviews with people who run Mastodon and Hometown servers about how they govern their parts of the network and then many more months of analyzing and writing up what we found, we’re releasing our findings. We found so much.
The main report is a little over 40,000 words and 110 pages long, and includes dozens of excerpts from interviews with our extremely generous research participants, who spoke with us for many hours back in the spring. There’s a lot there. Much of it will be familiar to veteran fedi mods and admins, but I suspect most people will encounter at least a few things they haven’t encountered before.
In the findings, we get into…
Why we think the fediverse’s structure can allow for particularly humane and high-context moderation—and which of the cultural, technical, and financial gaps that our participants identified must be filled before the network can achieve its potential.
The interrelated governance configurations that make a server more or less manageable, and the different ways servers in our sample approached those configurations to serve their various communities.
The biggest gaps and annoyances in available governance tooling—spoiler, it’s mostly moderation stuff, but it also includes some fascinating things related to shared/coalitional moderation and better communication between servers.
What kinds of future threats are most on server operators’ minds, and which things they’re not particularly concerned about.
The things that keep volunteer server runners on the fediverse, give them hope, and make them feel excited about possible futures.
I wouldn’t have guessed, going in, that we’d end up with the major structural categories we landed on—moderation, server leadership, and federated diplomacy—but after spending so much time eyeball-deep in interview transcripts, I think it’s a pretty reasonable structure for discussing the big picture of governance. (The real gold is of course in the excerpts and summaries from our participants, who continuously challenged and surprised us.)
There are no manifestos to be found here, except in that our participants often eloquently and sometimes passionately express their hopes for the fediverse. There are a lot of assumptions, most of which we’ve tried to be pretty scrupulous about calling out in the text, but anything this chunky contains plentiful grist for both principled disagreement and the other kind. Our aim is to describe and convey the knowledge inherent in fediverse server teams, so we’ve really stuck close to the kinds of problems, risks, needs, and challenges those folks expressed.
I have a lot of sympathy for journalists and other professional explainers who are trying to make sense of new networks without themselves being deep in the networks’ development or maintenance ecosystems. Partly because of that sympathy, I threw in some basic theory about the fediverse in the plainest, least dashing way I could. I think talking about the fediverse as a social component of the open web, with all the joys and horrors that entails, is useful in helping non-fedi people understand that a.) it’s not a platform at all, and b.) that this genuinely does confer benefits for people who want to build communities that interconnect—carefully—with other communities. I don’t think the fediverse is fully equipped for that use, yet, but it’s my hope that the experiences, insights, and recommendations we’ve collected will help the network move in the right direction(s).
Process stuff
Although we intentionally limited our research sample to servers of a given size and with a fairly strong public commitment to intentional governance, our findings reflect a pretty high degree of heterogeneity in the specifics, which I’m really happy about. I don’t myself think that there’s a right way to approach the fediverse—some ways are obviously bad and destructive to people and communities I care about, but there are a lot of paths toward being together in better ways. I also think, even more now more than before we did this work, that the relatively subtle differences in the way our participants run medium-sized fedi servers are actually extremely meaningful for the shape of the community they end up hosting.
A brief word about how this came together: Darius and I pitched the project last fall, designed the interviews in the winter, and conducted the interviews over the spring and into early summer. When analysis and writing time arrived, Darius crunched through endless hours of transcript corrections and built out the tooling, legal, and financial findings and recs, and I wrote up the other sections of the report and the introductory analysis. Darius also built a great mini-site for the main report, which you can also read as a PDF if you’re into that.
Gratitude
Huge thanks to our participants, to Katharina Meyer and the other folks at DIIF, to the many kind experts who read early drafts and offered generous suggestions, and to my partner and kid, who cleared a lot of time and offered a lot of support so I could hole up and write yet another giant crunchy thing about the internet.
Chris’ Corner: Filtering
We updated the Your Work section of CodePen recently. See, it used to have a dropdown menu like this that we labelled “View”: This allowed you to scope down the Pens you were looking at below (in a Grid or List view). A single <select> element like that started to feel a little awkward. Especially […]
Exploring 21 Unique Custom Cursors for Your Site
Microinteractions play an role in creating engaging and intuitive user experiences. These subtle animations and feedback can guide users, provide valuable information, and make interactions more enjoyable and generally look cool! One often overlooked yet super powerful micro-interaction is the use of custom cursors. Custom cursors can add a unique touch to your site, making navigation […]
Media Diet
Could a new day dawn at The Times?
Since I’ve been constantly criticial of The Times and its coverage of the election, here is a thread from the socials in which I note a Sunday morning of positive coverage of Kamala Harris leading the paper online: Well knock me over with a bald eagle feather: The Times leads today with positive coverage of Kamala Harris. […]
Not to bury my point: contextual is the normal, good, fair, effective type of advertising. Targeted is the creepy, resource intensive, privacy invading, and, (?!?!?!!) not particularly effective type of advertising. We’ll get there. A billboard is contextual advertising. You’re driving on the highway and are told there is a McDonalds in 7 miles. The […]
What ‘Press’?
Margaret Sullivan — whom I greatly respect and with whom I almost always agree — wrote a Guardian column asserting that “Kamala Harris must speak to the press.” Go read it first. I disagree. That resulted in a thread on the socials I duplicate (with mended typos) here: What “press”? The broken and vindictive Times? The newly Murdochian Post? […]
A week from today is Frostapalooza, Brad’s big show he’s throwing incorporating a ton of friends and family. In addition to the 40 musicians rotating on stage, now there will be visual artists showing off their work as well. Brad writes: Jeff Robbins makes some really amazing music software called Visibox that helps bands easily create, manage, and […]
The cost of fueling my body
I’ve become a bit obsessed with how much it costs to fuel my body during the working hours.
To keep me and my brain running during working hours costs me ~$359.26/month. Not much to say beyond that –no grand epiphanies– except that I think it’s too expensive. Sitting in an office by myself costs me $16.33/day (or $2/hour). This budget doesn’t include breakfast, dinner, exercise, healthcare, transit, internet, electricity, or office supplies… all necessities that enable the work. This is just the daily cost of caloric fuel to keep my body going during the nine-to-five. My family has three other humans in it too, so this seems collossaly expensive.
If I wanted to save money (I sort of do), here’s what I’d could try to optimize from top to bottom:
I could make my own pre-made meals for about ~$2/meal. I’ve had success with this but it requires a lot of weekend logistics to execute properly. This would be the most significant cost reduction, costing only $44/month and saving $176/month.
I could buy whey protein in bulk. A 5 lb bag of Muscle Milk (nearest approximate flavor) is $72/bag and contains 68 servings for a reduced costs of $1.05/serving. However, one serving only has 25g of protein, so if I’d need to double the scoops. The total cost would then be $2.11/serving or $46.42/month. Buying bulk powder makes fiscal sense, but $30/month to not have to deal with drinking clumpy protein shakes and washing crusted stinky shakers seems almost worth it.
I considered eggs as an alternate source of protein instead. A single egg has ~6g of protein and costs about 50¢. The cost could potentially come down but the bigger issue is to get the same 42g of protein I’d need to eat 7 eggs. I don’t know if you’ve eaten eggs before but 7 eggs is a lot of eggs. Imagine woofing down 7 sweaty hard-boiled orbs a couple times a day, yikes.
I could brew my own agave-sweetened tea. I’ve done this once, but the crisp flavor profile wasn’t the same so I wouldn’t call it a success. Needs more experimentation.
Thanks to Costco selling our favorite local coffee roaster in bulk, we have caffeine ritual costs dialed down about as low as they can go. Feel comfortable there.
Lowering my lunch costs stands out as the best candidate for improvement. But as I noted before, adding even a small pile of extra duties risks toppling the wagon and I’m back to eating emergency $14 Spicy Chicken Sando Combos to quench my hunger. I wonder where my daily costs fit on a graph of national statistics. Is this average? Is this Bidenomic inflation? Am I making myself poor with my avocado toast? Someone who understands finances help me budget! Ack!
Chris’ Corner: Here’s some things you should know
Fine fine fine, here’s some things you could know if you were hip and into knowing things about building websites well.
How to Add a Header to a curl Request
curl is one of those great utilities that’s been around seemingly forever and has endless use cases. These days I find myself using curl to batch download files and test APIs. Sometimes my testing leads me to using different HTTP headers in my requests. To add a header to a curl request, use the -H […]
I’ve abstained from alcohol for 102 consecutive days. This is the longest streak I’ve had in my life other than from the ages of 0 to 19. The previous high was 100 days, but I quit after that because I thought, “Hey, I can do this.” Why the change? The person I could become under […]