Codepen is my new playground is definitely the easiest way to hack something on the front end.


Because my usual setup includes jade/coffee/scss/vim. In the old way, that means I’ll need to use bower, grunt, an editor, and a browser.

On codepen, everything I need is already there, and it’s free.


Just today I’m trying to move all my FreshStart sessions to Evernote. I have about 20 sessions stored in FreshStart and the oldest one is back in 2012.The only export fucntion in FreshStart spits JSON data.

So, to move all my sessions, I’ll need to:

  • export all session to JSON
  • parse the JSON data
  • show them as hyper links in a page
  • clip the page to Evernote

I created this little tool on codepen to help the process and I’m really happy with the develop experience.

Just take a look of what I get with codepen:

  • write html in jade
  • write coffeescript
  • use scss
  • very easy to add underscore, jquery
  • very easy to add bootstrap

I’m spoiled.


I did some research on other tools, and jsbin seems also good too. But the main difference between jsbin and codepen is that codepen is trying to build a community around people, where jsbin acts as a simple tool.

On codepen, people can like, comment, follow and show off.

And I think that’s what it makes codepen valuable. Similar to github, it’s where “cool” people hang out.

It’s 2015 and it’s pretty amazing to see what a developer can do with online only tools or IDEs. I think it’s fair to see in the future everything will just be moved to web.