Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Back in November I got to go to SNDMakes Austin and it was quite a cool experience. It’s a “prototyping” event in that you are assigned to a team and you build something over a weekend. But there is no competition or pressure and the people are always wildly interesting and intentionally from outside your sphere.

CodePen was an “event host” again. I thought I’d mark the experience.

At Cards Against Humanity

After a kickoff Friday night at the Pitchfork offices, the rest of the weekend was at the Cards Against Humanity offices. It was a treat to even get to visit the CAH offices, let alone get to work from there.

They were generous to let us use their beautiful space. It couldn’t have been more perfect for the event.

Team Printer’s Row

Everybody there was interesting, but to narrow that down, my Team was me and:

Nicole Zhu wrote up her own experience on the weekend as well: Why you should do a news designathon.

The first one I went to, I barely knew how to use GitHub and only vaguely knew what “human-centered design” was. I was mostly an observer because I didn’t feel super confident in my own abilities, but my additions to brainstorming and prototyping were always welcome and valued by my teammates. The latest one I attended (almost two years later), I was the one setting up the GitHub repo and helping others clone it on their laptops.

Indeed you were, Nicole!

Our team talking to Michael Block.

Prototyping Tools


I happened to stumble across these things the other day and I bought a couple of them. I was thinking how useful they would be at something like a SNDMakes. I was right! I did a TON of prototyping / wireframing / note taking in it.

Now I can just wipe the pages and use it again as if for the first time.

Big sheets of paper and Sharpies

Sometimes you just can’t beat that, too.

Dropbox Paper

Collaboration is so key during these things. It’s helpful when computer communication is just as easy/quick/fluid as in-person communication. Realtime! We tried out Dropbox Paper (again a first time for me) and found it pretty slick.

Not only is it realtime, but I liked how you could see who wrote what in the sidebar, the fact you could embed things (other documents / code / task lists), the interactions felt really well-considered, and the UI delightfully minimal.

Google Slides

I’m a Slides.com man myself, and confirmed that while we really struggled with Google Slides. But, Google Slides was realtime collaborative and that’s such a vital feature it was worth it.


This was my first experience using the static site generator Middleman. It was fairly comfortable as a person who has worked on and does work on some Ruby/Rails apps. Lots of similar syntax and structure. I found a few things quirky (like the routing), although to be fair I probably didn’t grok it completely.

I’m not sure I’d reach for it over Jekyll just yet, but I immensely enjoyed learning a new tool. It also says something about a product when a team can pick it up for the first time in a weekend and use it productively.

GitHub & Heroku

We hosted the project on GitHub, which of course made collaboration quick and easy. We even popped the final demo on Heroku so people could check it out themselves.

Our Prototype: “I Want In”

The big idea:

Connecting gamemakers and playtesters.

Here’s our slide presentation explaining it:

We started with the idea that gamemakers should be testing more, and that they have trouble finding the playtesters they are looking for. After talking to quite a lot of actual gamemakers, that turned out to be true, and we prototyped a website that could bridge that gap.

More from the Weekend

The SND website has reports from about half-way through the event and the wrap-up.

new things come out of every #sndmakes event. this one includes a coveted job title: “Office Dad”

A photo posted by SND (@societyfornewsdesign) on

And a couple photos from Pete Karl: