Fair warning, this is a long post. I needed something to space out the images.

The Shelf

A few months ago, I pitched a couple of friends this idea of turning my site into a shelf of fake game cartridges, one per job. They were very supportive, which is exactly what you don't want when you're trying to talk yourself out of something.

None of this is original. Around 2008, maybe 2009, I spent a lot of time on the YayHooray forum, where I found the My Famicase Exhibition. A retro game shop in Tokyo called METEOR invites designers to make labels for games that don't exist, and picks the best for a show. I never submitted anything, so technically I'm undefeated. Still, for years, every time a Famicase label popped up on Dribbble or Behance, I had to stop and look. I guess it is like running into an ex who's doing really well. The exhibition is still going.

Anyway, at the time I was too busy, so the cartridges went on the shelf where I keep the ideas I'll never work on. It's a big shelf.

Creative therapy, but with shaders

Then it was the end of June, my last day at what I considered the best job I'd ever have. I was in London, surrounded by family and friends who were thrilled for me, and I was the only one in the room not having a great time. I felt like I was walking out on an incredible team. I kept replaying months of decisions in my head, and I couldn't shake the feeling that I'd let a bunch of folks down.

And to be clear, I was (am!) extremely lucky. I had an incredible job waiting for me, and I knew it. My brain just didn't care, and I couldn't feel any of it yet.

I had time on my hands and a perfectly good idea collecting dust on a shelf. So I started giving it thirty minutes every night, sometimes an hour. Mostly, I wanted to clear my head and remember what making something for fun felt like.

Felt cute, might share later

Those nights added up, and one day the cartridge escaped Blender and landed on a web page. It was technically lacking and about as stiff as a LinkedIn post, but it was "done."

I tried to make a fun label for each job. Some were easy. I'm very proud of the Windows 95 floppy disk reference. Then there was Azure DevOps, which is not a phrase that sounds fun in any font.

I spent nights trying to make plastic look like plastic. I even tried animating them, which in my head was a Pixar short and on screen was very much a PowerPoint transition.

None of it was exceptional, which made it very fun and easy to share. Nobody expects anything from a work in progress, including me.

Staring at the same little idea every night for two weeks makes it a lot less exciting (I think this is true of most things). I also knew that making it actually run well on a real website, on a real phone, for real people, was going to take way more nights than I had in me.

On the other hand, a fake Famicom cartridge is a pretty good way to announce a real job. All that work finally had somewhere to go.

Tilted

If you overshare long enough and your friends are kind enough, you eventually run out of excuses. So I gave in and started turning the cartridges into the hero of the site.

This part was not glamorous. Most nights went into making the model smaller and fighting the renderer, which fought back harder than I expected and, honestly, won most rounds.

I opened and closed those cartridges so many times (to test something, to debug something, to test the fix for the thing I'd just debugged) that I started to resent them, which is a weird way to feel about your own homepage.

So I added a little random rotation, just enough that every click landed a bit differently, mostly so I could stand to look at them. That was supposed to be it. Instead, I started to obsess over giving everything a slightly different angle, a little wobble. Death to the straight line. Make it random.

Then Cursor joined SpaceXAI, which, among many more important things, meant new stickers! Have you ever tried to place a sticker on top of another? It's always a little off. On the cartridge, the black sticker never quite covers the colorful one underneath, it misses differently every time, and I LOVE it.

The more imperfect it got, the more it felt like mine (and like me).

Laptop first, laptop second, laptop third

I'd love to tell you I designed this mobile first. I did not. Then one night, weeks into the project, I opened it on my phone and had a small, private crisis.

The composition that looked so good on a laptop did not survive being turned vertical. And it had to work with thumbs, which are a lot less precise and a lot more impatient than a mouse. Tap to open, swipe to the next one, and please, whatever you do, don't hijack the scroll.

Once I had it working, the most obvious feature in the world became impossible to ignore. If you grew up with a Nintendo, and even if you didn't, you know the ritual. The game doesn't start, you pull the cartridge out, you blow on it like it's a birthday cake, you put it back in, and you believe. Everybody did it, nobody remembers who taught them, and it (probably) never helped. A few people pointed out that the site should let you do it too, and they were right.

So, on your phone, open a cartridge, long-press it, allow the microphone (nothing gets recorded or sent anywhere, I promise), and blow. The cartridge tilts back and shakes in the wind. Yelling at it works too, which is more than you can say for most software. The results are about as scientific as they were in 1988.

Paper cuts

I'm obsessed with photography, so naturally I started the photo gallery the way I start anything I'm a little nervous about, which is by making it extremely boring. A grid, some stacks. Very respectable. It looked like the photo section of a hotel website.

But then I got drunk on view transitions. And while I was at it, I worked on yet another shader so the little info card next to each photo feels like actual paper. A bit of grain, a crease here, a folded corner there, a dent from who knows what, all slightly different for every photo. Nobody will ever notice it, and I think about it daily.

When I shared it, the feedback was clear. It needed to feel more tactile, like a pile of real prints. Now you can pick the prints up, drag them around, and leave them wherever you want.

It was a really good time.

Bike shedding and yak shaving

You've probably figured this out by now, but this site has been done for a while.

I started to work on it to stretch some creative muscles and keep my head busy, and it worked a little too well, because once it was done, the fun part was over. It's like getting to the last two episodes of a show you love and starting to ration them. One a week, max, and only if you've earned it.

So I did what any reasonable person would do, which is invent reasons to keep going.

Splitting photos and notes into their own pages exposed something embarrassing. I hadn't written anything on this site in two years. Two! The notes section looked like an apartment where someone had clearly moved out and left the lights on. The least I could do was make the gap look intentional.

Then the "more" links needed to be funnier, so I made them funnier.

The footer looked a little sad, so now it shows the last song I listened to. You can judge my design and my music taste without clicking a thing.

And then, of course, OG cards, the little preview image that shows up when you share a link. No respectable site ships without proper OG cards, right? RIGHT?

Eventually, I ran out of excuses. Again.

Making things imperfect was so much fun that I'm a little sad it's over. The cartridges finally came off the shelf, which means there's an empty spot on it now, and I'm trying very hard not to look at it.

If anything on this site stops working, you know what to do.

He talks about writing but touches on a couple of topics that seem transferable and relevant to design:

• Fail fast: find out what isn’t working while there’s still room to change direction. In design, sharing early and often can help with that. I’d add: explore wide before you go deep.
• Giving feedback: focus on explaining what isn’t working and why. Hold off on suggesting solutions unless people specifically ask for suggestions.
• Receiving feedback: synthesize it and reflect on it. When others suggest solutions, use your judgment instead of accepting them outright.

It’s not flashy, but it’s beautiful, and I enjoy the close-friends vibe: you get to see everyday life, kids and all. It feels like a private photo journal: focused, delightful, no hashtags or filters.

★★★★★ – will watch it again.

I have been trying to be more intentional about the photos I take, and I always go out with a few topics in mind. I’m obsessed with the beauty of decay: old buildings, abandoned places and cars, and rusty shop signs. I'm also a sucker for symmetry.

After a few unsuccessful attempts to get the kids interested in photography, I’ve been enjoying this book of photo prompts for kids. The projects are approachable, the examples are fantastic, and the layout is beautiful. The kids are already working on a photo-alphabet!

Aperture also publishes "Seeing things", which might be my favorite photography book.

I covered my fixation with automation, revisited the "Design tool as CMS" concept, showed how to build your own "Wayback machine", and tried to get the team excited about automating repetitive tasks.

I'm particularly proud of this actual footage of me successfully getting my GitHub Actions to green.

Still, I used the metaphor way too many times this week. A compact, versatile tool is appealing: a collection of small, sharp tools at your service.

Building this little lamp was a blast. We did a terrible job casting the resin, and the finish could be a lot better. But now Marco and Alex have the coolest resin lamp 💖

We also started on other characters from The New Zealand Story.

Going through 1,200 old Flickr photos, I found out that between 2005 and 2014, I took a lot of pictures of urban typography.

I’ve spent months trying to bring my photo collections together in one place, and photo services make exporting frustrating. Flickr sends images and metadata as separate files and leaves the merging to you. Its export sat in my Downloads folder for weeks until today. After a bit of JavaScript and some ExifTool magic, I had everything ready for review.

I know how it started. Back in 2003, I got a copy of América Sánchez’s Barcelona Gráfica. The book clusters lettering, typography, and signs that represent the character of the city. I liked the idea of treating the urban environment as a graphic canvas.

I don’t know why I stopped, though. I enjoyed the letter hunting and still enjoy those pictures, so I created a site.

Choosing colors is hard. Respecting your visitors’ color preferences shouldn’t be.

You need two things: CSS variables and the media feature prefers-color-scheme.

1. You can define your color variables and their values for light (default) and dark modes in your CSS file:

:root {
  --text: #333333;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #ffffff;
  }
}

2. Then you can use those variables in your CSS declarations:

element {
  color: var(--text);
}

And that’s it! Your website will react to the user's color theme preference.

You can play with a simple but functional example in this CodePen; switch your OS appearance setting to see the colors change. This foundation also works like a charm in more complex scenarios:

• Check Joshua Comeau's post. He implements light/dark mode in Gatsby using CSS variables.
• Or this example using CSS variables with Next.js and styled-components.

It’s been a while since I last drew a paper cup for Papercups. I’d missed this.

The Chromium version I was using can’t process images taller than 16,384 px. It took me days to figure that out.

My full-page captures of long pages were coming back full of white patches, and I chased every other suspect first. Do images have enough time to load? Is a CSS property causing a rendering issue? What about animations?

The fix: capture, scroll, repeat, and stitch the result. That brings its own fun problems:

• Capturing sticky headers and footers (solved!)
• Fixed sidebar repetition (no clue how to work around this problem sustainably)
• Animation loops at the seams between captures (🤷🏼‍♂️)

All the screenshots from the current report, grouped by device.

I started scaffolding the pages for browsing screenshots. I’m using Next.js and Prisma behind the scenes.

I spent most of the weekend working on breaking the paparazzi pipeline into pieces. It turns out that trying to run all the steps in a single process doesn't scale well, and the process stalls when we have many URLs in the config.

I sketched an initial interface for browsing the screenshots. Not terribly happy about it, but we need to start somewhere.

WELL, WELL! Fluxcapacitor (formerly Timesled, I’m terrible at naming projects) runs like a charm on GitHub Actions, and I rewrote a big chunk of the code to make it easier to maintain:

• It runs every three days
• The first stable run (capture, process, compare, store) had 104 endpoints and 3 devices
• It took 1h 32m to finish
• The next run will process over 140 endpoints

The infra is more sophisticated than it was a few months ago. The images and the tgzs of the captures are blobs in Azure, and Prisma 2 handles the data layer.

So far, so good :)

Today I don’t feel like doing much coding, so I’m crossing one of the easier tasks off my list. I put together a simple Next.js starter and deployed it.

Why have one side project when you can have two? 😏

I'm starting to work with Adrián on transforming the concept of this work feed into a real product. I'll write more about it as we build it.

We want to have something ready to ship fast, so we are using Max Stoiber and Brian Lovin's product boilerplate as our initial foundation. I’m impressed by how quickly we went from an empty project to working on our data model.

Today was cleanup time. I broke a gigantic index.js into manageable pieces and tidied up the mess I made while I was building the concept.

Storage is moving along, and I have ideas for abstracting different storage providers. I'd love to start capturing screenshots three times a week so I have data to feed into the project’s frontend.

Got stuck on something that looked simple and wrote a bunch of spaghetti code I’ll probably throw away tomorrow.

On the bright side, I think I have a much better understanding of how to work with Azure Storage. 🤷🏼‍♂️

The action now iterates over a few devices and a list of URLs. It is slow, but that was expected.

I'm worried about the amount of image data each run produces, to the point where I'm considering implementing the storage layer straight away. I also added image optimization, but I wonder if it is going to mess with pixelmatch.

Today I played with pixelmatch. I want to detect differences between screens from day to day.

The tricky part is comparing full-page screenshots with different dimensions. If the images don’t match in size, the script raises an error. I’m writing code to handle that.

I’m starting a project to automatically take screenshots of a bunch of web pages. I want to compare how those pages change over time.

Years ago, I imagined a simpler version of this project and even registered uihop.com, intending to build a service around it. Later, at Yammer, Brendan McKeon impressed the whole company with the many uses of his "time machine". His work inspired me, and I was bummed that the technology wasn’t available to more designers.

For now, I’ve built a simple action that runs Puppeteer in a Docker container and reads a configuration file containing viewport sizes and URLs.

Polishing the hover states before the basics are done. Naturally.

Keeping it veeeery simple.

I finished the action that will send me a daily PR with a starter template for a post. I learned a lot from dissecting Jason's code and filled in the gaps with Jeff Rafter's thorough article.

I want GitHub to hand me a pull request every evening when I get home, so this feed keeps itself alive. 🎉

To keep this feed alive without spending too much time maintaining it, I want to automate the hell out of it. I'm learning a lot from the actions that Jason Etcovitch has published.

Inspired by Grant Custer, I’m starting a small feed of things I’m working on: half-finished ideas, side projects, and the occasional win. Let’s do this!