Seriously, Just Make a Pen

Avatar of Chris Coyier
Chris Coyier on (Updated on )

The original title of this post was “Seriously, Just Make a JSFiddle”. It was written before I beame the co-founder of CodePen. It’s no secret or surprise that CodePen was inspired by apps like JSFiddle and JSBin. It’s my job to point you to CodePen and my opinion that it’s a good choice for you.

Has anyone ever asked you for help troubleshooting some combination of HTML, CSS, and JavaScript, and they copy and paste the entirety of all the files into an email or forum post? It’s super common, and so consider this an intervention. When you are having trouble figuring something out:

  1. Go to CodePen’s editor.
  2. Put the HTML in the HTML area, the CSS in the CSS area, and the JavaScript in the JavaScript area
  3. See if the result is demonstrating the problem, adjust as needed to make the problem very clear.
  4. Press Save to get a public URL.
  5. Share that URL where you are trying to get the troubleshooting help.

Also, if you can whittle it down to the bare minimum still showing the problem, that’s ideal.

The key is being able to see the result. It’s 100 times easier for your potential troubleshooter to play with that than trying to guess what is happening by looking at your code alone.

A lot of times, during the process of creating this Pen (let’s call it what it is: a reduced test case) you’ll solve the problem yourself. And if not, the chances of you getting help from someone else goes way up.

Doing this will make you a better coder and better in bed. I promise.