Why I love CodePen

If you follow me on twitter, you’ve seen me post a myriad of links to various CodePen Pens. It might even paint the picture that I’m a bit obsessed with CodePen. To date I have created 35 public and 31 private pens and counting.

CodePen.io is a front-end code playground and I love it. Here’s why.

It’s Open Source (MIT License)

All public pens on CodePen are MIT Licensed. Anyone can use my code and I theirs as long as the new code retains that license. Make something amazing and let others build on it  and improve it.

It’s fast

Sketching is efficient because it’s the fastest way to visualize an idea. CodePen is my webby sketchbook because setting up a new pen is fast. There’s no setup. I don’t have to clone my files and folders. I don’t have to add a new project to CodeKit. I can just design.

Setting up a pen isn’t the only part of CodePen that’s fast. If you pause when writing code, it updates the preview pane very quickly with a few exceptions. In fact, I love to play the “Let’s See If I Can Finish This Line of Code Before CodePen Refreshes and Throws an Error” game.

I can easily test my design

I frequently test out various designs to see what works and what doesn’t. The ability to build small pieces of an interface independently speeds up my design process (which I will talk about in depth in a later post).

Iteration is very simple. You can just fork your work over and over or you can do my preferred method and just keep all the iterations on one page. I’m often surprised at some the discoveries I’ve made during these iterations.

Debugging is a breeze as well. It takes no time to pull code from your design that only applies to that bugged out element and figure out why it’s misbehaving.

CodePen enables hands-on learning

I often glance at other pens to see how the author accomplished an effect. Sometimes I even fork it or just mess with the code a bit to see what happens. However, I learn far more when I attempt effects using only CSS. I highly recommend trying to code something you’ve seen without falling back on images. You’ll really solidify your understanding of how CSS, JS, and HTML work together.

There is inspiring work

There are brilliant people writing inspiring code. Several of which, I would never see or hear about if they hadn’t decided to share on CodePen. The pens range from clever design to mathematical eye candy to artwork to JS magic.

You can show off

Before CodePen, I built some nifty snippets that lived comfortably on my laptop. And nowhere else. Especially not on the web. They never seemed portfolio worthy so I didn’t see a reason to add them. Few seemed important enough to blog about. So they just sat there. Sad and lonely.

Then CodePen happened! Woo! I immediately migrated a couple with mild success and then totally forgot about CodePen for ten months. For some reason, in July this year I decided to take another look. Instead of just porting over code, I decided to build in CodePen. I started getting very positive feedback which encouraged me to do more. Then, one day I took a look at my profile and something clicked… This was my work. My portfolio. A glimpse into my process was finally documented for other designers and potential employers.

Jobby jobs growing on jobbees

I assure you employers are looking for talent on CodePen. And why not? CodePen is a treasure trove of excellent designers. And the employers are hiring, I promise you. 😉 Start making pens and strap on your job helmet.

It’s built by an amazing team

Not only is CodePen a well-built website (and gets better daily), but its team also provide excellent support. I’ve encountered a few bugs here and there, all of which the CodePen team (of three) has addressed quickly. Alex Vazquez, Tim Sabat, and Chris Coyier, you guys rock!

My pet peeve

It’s not super clear when a pen is forked until you dig into the details a bit. I occasionally see work receiving praise that simply is an unchanged fork of the original.¹ If you’re going to blog or post someone’s pen, just use their pen. If you’re going to fork it, please reference the original in the Pen info. I do take pride in my work and it sucks to see something you created plastered all over Twitter crediting the wrong person.

Other playgrounds

Before CodePen, I used a myriad of other playgrounds, my favorite being Lea Verou’s dabblet. It’s pretty dang useful, well-designed, and integrates nicely with Github. For helping others troubleshoot random issues I tend to use JSFiddle anonymously (I hang out in IRC #css and a few others).