Falling in love with CodePen

April 19, 2014 - By

Typically the best learnings I’ve had in front end development start with a question, and end with me in raw HTML experimenting.

Recently I’ve been wanting to reduce the obstacles between the idea and the answer. Long post short, Codepen.io is amazing (I’ll elaborate, but maybe you should just go see for yourself).

My local HTML experiments have served me well over the years, but there are some problems:

  1. If they’re just on my machine I have more work to do to share my experiment
  2. Over the course of years these findings get lost and unorganized
  3. Tools like Sass require some setup. Grunt or Codekit aren’t hard to use, but I need less steps between an idea’s conception and its execution. I loathe when this kind of overhead brings its own problems to troubleshoot that distract me from the ONE THING I want to answer.

CodePen has been pretty awesome. It acts as an easily shared way to show your code and its result (and encourages the developer I share with to tinker themselves), it keeps all the experiments together, and it can instantly include sass compiling, and common JS libraries natively without mucking around with files.

The user experience is pretty amazing. There is so much attention to detail in this seemingly simple app. Things like built in Emmet, multiple cursors, live reload, and the various views for arranging and expanding code areas. It’s perfect. I’m a Sublime Text user, and this feels very natural to use – perhaps more enticing; it’s what Sublime Text would be like as a wysiwyg. I love the way that CSS Tricks embeds pens as demos. I’ll probably start doing something similar here!

The CodePen community is pretty interesting too! One of my Pens got a bit of commenting attention which helped me tweak the demo a bit, and learn even more. CodePen feels like the front end equivalent of Dribbble. I highly recommend it.

Categorized in:

This post was written by ArleyM