I have been updating dependencies and getting ready to add a few more cups. I always find it interesting how quickly side projects can become stale if you don't spend time on them regularly; this may be worth a longer post.

Building this little lamp has been awesome! We did a TERRIBLE job casting the resin, and the finish of the piece could be a lot better. But now Marco and Alex have the coolest resin lamp 💖

We also had some time to work on other characters from the game.

I have tried to merge all my photo collections in a single place for months. Photo storage services make data export incredibly frustrating. Some services send you images and metadata in different files, and it is up to you to merge that information.

Flickr is one of those services. Their data export was waiting in my Downloads folder for weeks, and today I decided it was time to cross this task from the list. After a bit of JavaScript and some ExifTool magic, I got over 1200 pictures ready for review.

I rediscovered that, between 2005 to 2014, I took a good amount of pictures of urban typography.

I know how it started. Back in 2003, I got a copy of America Sánchez’s Barcelona Gráfica. The book clusters lettering, typography, and signals 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 silly site.

Choosing colors is hard. Adapting the color mode of your website to your users' preferences is (it should) not.

For this deceivingly short recipe, you will need a couple of ingredients: 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);
}

3. 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; fidget with your OS appearance preferences to see 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.

I'm screenshotting programmatically a bunch of very very long pages, and I noticed that some captures were coming back full of white patches. For days I tried to find the source of the problem. Do images have enough time to load? Is there any CSS property in the page that is causing a misrender? What about animations?

It turns out chromium has a hard time processing images over 16384px, so you need to capture-scroll-repeat and stitch the result.

This approach brings other fun problems to the table:

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

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 drafted a first potential interface for consuming the screenshots. Not terribly happy about it, but we need to start somewhere.

WELL, WELL! Fluxcapacitor (formerly Timesled, I'm the worst naming projects) runs like a charm over GitHub Actions, and I rewrote a big chunk of the code for sustainability:

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

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

I'm really happy with the progress so far :)