How I Made Advent of Pixels

About three years ago I couldn't find a nice way to save inspiration while working on projects (screenshot folder hell 🔥) so I made Klart.io, a place to save bookmarks and screenshots. A few months later I made Pixels, a collection of handpicked lovely designs updated every day. Now I thought that it would be nice to show you some of the best designs as an advent calendar. So I started working on this project called Advent of Pixels. I'll show you the process of making it in this post 🤓.

Getting something on paper

Staring out a pitch black window during Sweden's winter period can be both depressing and encouraging. This is the first autumn and winter I'm spending at home in three years and I wasn't prepared 🍂❄️. To make something nice out of it I figured an advent calendar would be fun and I had a rough idea about what I wanted it to look like. Nothing fancy, just a simple grid of 24 designs, one for each day in December until Christmas. But I wanted to add a little Santa-touch too. Maybe I could make the subscribe section into kind of a 🎅? Lacking paper for the moment I started making some mockups instead (I prefer pen and paper for sketching ideas).

Anyway, this is what the initial mockup looked like:

And the Santa-style subscribe section

More ideas

I let the idea sink for about a week and then I picked up a pen to do some more sketches on this. And this time on paper 📝.

I had a bunch of ideas that I wanted to do. Among them was: confetti animation when revealing a day in the calendar, unlock animation when unlocking a day, lock animation when not allowed to unlock, twinkling stars, flying santas. A lot of stuff. And I think this is usually the case for me until I start coding. Then it becomes much clearer what I actually want to put in there, what works and what doesn't.

Iterating and coding

I started coding to get a clearer picture of what I wanted the app to look like. Deciding on a stack was pretty easy since I already had an API for doing all the server stuff for Klart and Pixels. I settled with Create React App to get a nice out-of-the-box environment with hot-reloading etc without any configuration. I also have a lot of previous React experience and enjoy working with it. After a quick npx create-react-app advent-of-pixels, feeling a bit nauseous about all the dependencies and deploy on Netlify I was up and running. Going from 0 to deploy in minutes 🎉.

This is a screenshot of the first iteration:

Inspired by the darkness of winter in Sweden and the current trend of dark mode I decided to try it out 🌚:

And this is what the subscribe section ended up like (no Santa 🎅)

I think the darker theme shows of the designs better and I'm even going to implement it on Klart and Pixels as an optional setting. Super happy 🤗.

Animations and Final touches

Now that I had the basic structure in place I could focus on adding some sugar on top 🍭. I didn't want to make too much animations and stuff but I really wanted a confetti animation when revealing a day. Like a Christmas cracker 🎉. There were a bunch of libraries out there to make confetti rain but I wanted something more like an explosion. So after some research and looking at other's examples I got something working:

I did some more tweaks on it and I'm pretty happy with it. I also realized that I didn't really need a lot more animations. It would probably just feel weird. So I decided to stick to that and start making final touches on the design.

Locked or not locked?

One of the tricky things to figure out was whether or not to trust you with not revealing designs in advance. My first idea was to lock them and definitely not trust you. Showing a padlock instead of a present. But eventually I decided to trust you anyway and if you really really really want to, you can go ahead and open up everything 🎁 (But pls wait. I know you wont. But I tried...).

Selecting designs

This was a super hard task. Out of all the thousands of designs I have hand-picked during the last years I had to pick just 24 of them for this calendar. Unfortunately (and part of the reason why Klart takes screenshots) some designs were taken down or had changed since I saved them. So I decided to only select designs that were still available.

It still took serious effort. I was quite happy that Pixels has a shuffling function so I could just sit back and press space until I found something that I liked. I also checked all previous newsletters I had sent and pick the best ones from there.

I ended up with about 70 designs that I really loved and had to narrow it down to 24 😰. Took me some time but I'm happy with the result.

Ready to Launch

Now I was ready to launch, just in time for December. Let's see what it looks like 🚀

And heres the final confetti explosion 🎉

You can find it live on advent.klart.io. I hope you enjoy it and I'd love to hear your thoughts on Twitter or Telegram @drikerf 😀.