Grow your CSS skills. Land your dream job.

Seriously, Just Make a JSFiddle

Published by Chris Coyier

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 JSFiddle. Update: Or CodePen!
  2. Put the HTML in the HTML area, the CSS in the CSS area, and the JavaScript in the JavaScript area
  3. Press Run and 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 (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.

It doesn't have to be JSFiddle either, could be JS Bin, CSSDesk, a temporary test page you toss up on your own site, whatever.

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

XOXOXO,
-Chris

Comments

  1. Permalink to comment#

    It really is so handy.

    You don’t even need to have any of the <head> information in the HTML section!

  2. This is genius, definitely bookmarking this!

  3. KAMiKZ
    Permalink to comment#

    the seriously wording is too insulting, was it necessary?

    • Tom
      Permalink to comment#

      Yes.

    • yea it was….sometimes you just need to stress the importance of an issue…seriously.

    • Kevin
      Permalink to comment#

      YES!
      I have recently started contributing answers to StackOverflow and I don’t think that I have ever seen a post which included a jsFiddle that didn’t lead to a quick and painless solution.
      This is the “pics or it didn’t happen of web development. I don’t want to hear your crappy excuses as to why you can’t include a link to your page, just make a fiddle.

    • If you think that is insulting, you really need to grow some thicker skin.

    • did somebody feel like this post was directed towards that sombody? hehe :D

    • Austin Williams
      Permalink to comment#

      yes

    • Bob
      Permalink to comment#

      Wow. Are you SERIOUSLY insulted by that?
      I’m thinking there might be a larger population (in Hawaii) that could be insulted by your nom-de-plum.
      …seriously. :-|

  4. It really great tool on net. Easy to access & great link sharing facility.

    I learn it from you & use on my post

  5. I always use jsFiddle because of its slick and easy to use UI, plus its really handy for quick cross browser testing for really small snippets of code.

  6. Great post!
    I will refer people to this post when wanting help since you have a great step-by-step guide for people who are not familiar with those tools.

    I created a j.mp Link for the post: http://j.mp/makeajsfiddle

    Good to have that handy :D

    Cheers!

  7. Permalink to comment#

    thanks for sharing chris..this make me easy…

  8. Now if only all the people who don’t already do this get to read this.

    SPAM THE FORUMZ >.<

  9. JSBin has the nicest interface – super minimal.

    Disclosure: I designed the interface :)

    • Permalink to comment#

      I definitely prefer the panel layout of jsFiddle. Why did you guys decide to go with 3 columns?

  10. Sean
    Permalink to comment#

    I used jsFiddle last month to do a jQuery 101 for some of my colleagues. I was able to set up a multi-step project, saving each step as a different revision. This allowed me to show each step in the project without having to recode or have 10 different files, plus it gave me the opportunity to share that link with them, so they could go back over it on their own whenever they started working on a jQuery project.

  11. Christopher
    Permalink to comment#

    Why is everyone so enamored with JSFiddle?

    I’ve used it. I’ve helped others with it. But, I hate it. Its a royal pain in the a**

  12. hardik
    Permalink to comment#

    “Doing this will make you a better coder and better in bed. I promise.”
    - awesome LOL :)

    • Mike Erickson
      Permalink to comment#

      Better in bed because you have more time to be in bed cuz your code works! :-)

    • I use jsFiddle alot! I guess that makes me a master in bed *beam*… now if there was just someone with me o.O

  13. Fine, I’ll try it.
    I’ve seen it before but in your context it makes good sense.

  14. I just bookmarked it, thanks Chris. I really dig the interface and although I do upload issues to my own server for public view (because I too realized people like playing around with the code), this is a nice tool to have.

  15. Chris, thanks for this post! I help out a lot on #jquery on IRC freenode and end up also helping people to use jsfiddle too!

  16. thank you for promoting jsfiddle. maybe this article will help remove the step where we have to ask someone to "please post a fiddle".

  17. these tools are useful only for debugging and not for heavy work and not for checking hacks or css arrows…

    • Permalink to comment#

      Uhm, mark up can be checked on jsFiddle.

      Using the site now as we speak. There is so much truth in this article!

  18. Chris,
    I’ve seen the comments and guidelines in JSfiddle to “save” to make a public url but in the JSfiddle I’m using that button reads “Update” not “Save”? Am I doing something wrong?

    • Ignore me… it’s been a long day and I’m very tired! I’ve already clicked “save” and of course the next logical step would be to “update”!
      Doh!

      *Jon hangs his head in shame as he goes to make another kettle of coffee!

    • Once you’ve saved, then you update.

  19. This is great, to think all this time I’ve been using Pastebin :s

  20. Apparantly it doesn’t let you change the prototype of an object. That’s a real pitty.

  21. I’ve been using this for months now! It’s always a pain trying to help people on forums when you have to copy and paste everything locally.

  22. I only wish it had a useable iPad UI. It is impossible to use keystrokes to hide panels on iPad.

  23. Daniel
    Permalink to comment#

    A lot of times, during the process of creating this (let’s call it what it is: a reduced test case) you’ll solve the problem yourself.

    yes, and you and any one else will be able to easily access your solution in its simplest state whenever. this makes sharing your *genius* with others super simple.

    great read, as always.

  24. @Chris – Nice last statement.

    Personally, I like the real-time view in JSBIN but hate the pre-template stuff.

    You should also mention that people should post clickable links. I really dislike when people post text as links that you have to copy/paste into a new tab.

  25. I totally agree with you and this is one of the reasons why I created my web app, http://qip.li , it lets you host webpages, you can also use it to share your code with others which makes troubleshooting a lot easier.

  26. Nice. Thanks for the tip. I am sure I will have to do it sometime.

  27. simple navigation

    http://jsfiddle.net/arck7/DakDQ/

    use it if needed

  28. I must admit i really like jsfiddles interface a lot more than jsdo.it which i have been using recently.

    • jsdo.it is a new one for me. But yeah, I agree with you, I prefer JSFiddle’s interface too. Everything just seems to be in the right place for you.

  29. I had never heard of any of these services but they seem like they’re going to be a real time saver!

  30. Mike Erickson
    Permalink to comment#

    Ya, that’s all fine and good when it works in a basic HTML/CSS/JS framework, but what about when you have a stupid ASP.NET issue and can’t make things work :-)

    I know, I know, ASP.NET is a different beast – jsFiddle DOES ROCK!

  31. Agreed, JSFiddle is awesome! So much help when using a site such as StackOverflow.

    • I’m surprised more people on StackOverflow don’t use it (or the people leaving comment don’t ‘require’ using it before they help…)

  32. I recently started using it. It makes getting help so much easier. :)

  33. For expert only he3x.
    Im newbie

  34. Oh yea, weird I just added that to a page on my site. This is a must share.

  35. http://jsfiddle.net/Amelecuk/LnmpR/

    I want make the current selected heading close once you have clicked on the heading e.g. ‘Key features’.

    So it expands back into itself and so the effect is of open and close:

    Click 1 – Open the heading, to read text
    Click 2- Close that heading

  36. not everything gets rendered correctly on these tools ex: css arrows!

  37. Permalink to comment#

    This article inspired me to start using jsfiddle, I’m loving it.

  38. I posted a question to Stack Overflow the other day, used a fiddle and it turned out great…really helped me “get it”…thanks for the suggestion Chris!

  39. Akbar
    Permalink to comment#

    thanks Chris.
    It’s really helpfull.

  40. Shailesh Das
    Permalink to comment#

    Indeed very useful online tools! Someone at Stackoverflow suggested me jsfiddle….didnt knew about jsbin and cssdesk…..

    I wonder how many hours of sleep I missed without these :)

  41. JSFiddle is my jam. Makes my life so much easier

  42. CanGomec
    Permalink to comment#

    http://kodtest.com my best live code editor..

  43. Chris, you did really a very helpful job by introducing the CodePen I use it for my front-end design needs. Many thanks!

  44. http://liveweave.com has a nice code-hinting feature and lets you download all the code in a .zip file

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".