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:
- Go to CodePen’s editor.
- Put the HTML in the HTML area, the CSS in the CSS area, and the JavaScript in the JavaScript area
- See if the result is demonstrating the problem, adjust as needed to make the problem very clear.
- Press Save to get a public URL.
- 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.
XOXOXO,
-Chris
It really is so handy.
You don’t even need to have any of the <head> information in the HTML section!
jsFiddle also allows you to save ‘revisions’ to keep track of your progress.
This is genius, definitely bookmarking this!
the seriously wording is too insulting, was it necessary?
Yes.
yea it was….sometimes you just need to stress the importance of an issue…seriously.
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
yes
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. :-|
It really great tool on net. Easy to access & great link sharing facility.
I learn it from you & use on my post
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.
Nice one ginger!
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!
thanks for sharing chris..this make me easy…
Now if only all the people who don’t already do this get to read this.
SPAM THE FORUMZ >.<
JSBin has the nicest interface – super minimal.
Disclosure: I designed the interface :)
I definitely prefer the panel layout of jsFiddle. Why did you guys decide to go with 3 columns?
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.
Nice use case!
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**
Why is it a pain in the ass for you?
“Doing this will make you a better coder and better in bed. I promise.”
– awesome LOL :)
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
Fine, I’ll try it.
I’ve seen it before but in your context it makes good sense.
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.
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!
thank you for promoting jsfiddle. maybe this article will help remove the step where we have to ask someone to "please post a fiddle".
these tools are useful only for debugging and not for heavy work and not for checking hacks or css arrows…
Uhm, mark up can be checked on jsFiddle.
Using the site now as we speak. There is so much truth in this article!
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.
This is great, to think all this time I’ve been using Pastebin :s
Apparantly it doesn’t let you change the prototype of an object. That’s a real pitty.
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.
I only wish it had a useable iPad UI. It is impossible to use keystrokes to hide panels on iPad.
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.
@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.
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.
Nice site… now if it just had a scroll bar instead of making me play super roller ball to scroll down the page ;)
Nice. Thanks for the tip. I am sure I will have to do it sometime.
simple navigation
http://jsfiddle.net/arck7/DakDQ/
use it if needed
nice menu and smooth transition, I like it, thanks!
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.
I had never heard of any of these services but they seem like they’re going to be a real time saver!
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!
Hey, that’s great. Thanks for sharing. We used JotForm on a site once and spent days trying to debug and find out where the JavaScript problems were coming from.
By the way, wore my free CSS Tricks shirt the other day. Got from you at #frontendconf. Much thanks! :)
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…)
I recently started using it. It makes getting help so much easier. :)
For expert only he3x.
Im newbie
Oh yea, weird I just added that to a page on my site. This is a must share.
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
not everything gets rendered correctly on these tools ex: css arrows!
This article inspired me to start using jsfiddle, I’m loving it.
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!
thanks Chris.
It’s really helpfull.
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 :)
JSFiddle is my jam. Makes my life so much easier
http://kodtest.com my best live code editor..
Chris, you did really a very helpful job by introducing the CodePen I use it for my front-end design needs. Many thanks!
http://liveweave.com has a nice code-hinting feature and lets you download all the code in a .zip file
Those are great features. Just to be clear, CodePen also has zip exporting (amongst other ways to export) and robust code hinting for all of CSS, HTML, and JS.