I’m a big fan of applications that do a simple thing well; jsFiddle.net is an innovative environment to work on HTML, CSS and JavaScript in the browser. Coded by Piotr Zalewa and designed by Oskar Krawczyk, it’s a tool I’ve found really useful for me and my team – the simple four-pane layout is brilliantly suited to front-end development:
Prototyping
jsFiddle is really fast to work with – the layout means all your code is available at once, and it comes with ‘batteries included’ – you can select from common JavaScript libraries to have preloaded. All this means it’s great for prototyping little interaction ideas – say a menu or dialog box.
Collaboration is easy – send the url to a colleague for them to comment on your work, or edit it and send you the updated version – code as conversation. Even versioning is supported- every change adds a number to the URL, eg. http://jsfiddle.net/ATFcS/1 becomes http://jsfiddle.net/ATFcS/2 when saved, so it’s easy to go back and review older versions – a brilliant touch.
Teaching
Learning is always easier when you’re given examples, and being able to then play with the examples is even better. I’ve found jsFiddle perfect for explaining aspects of web development to people – I’ll knock up a simple example with just the features that we’re discussing, and the recipient can see what I’m talking about and modify the code to really cement their understanding. There’s even a lovely embedded mode – next time you talk about a JavaScript/CSS/HTML technique online, why not make it in jsFiddle and embed an interactive example?
Debugging
When faced with a bug in a complex design, it can be hard to track down exactly what’s causing the issue. I’ve found it can be very helpful to recreate a simplified set-up in jsFiddle – if I can replicate the issue it’s then very fast to manipulate the code to find a solution.
So those are a few uses for jsFiddle – please feel free to leave your own tips and tricks in the comments.
I love it as well. I have found that http://jsbin.com by Remy Sharp does a better job of demonstrating prototypes because the page doesn’t have the header bar that jsFiddle puts at the top of the embedded page, and I can share links that show the result directly, without my customer needing to click to the results.
Also, they could make the experience quicker by adding access keys to the four panes, or at LEAST to the run button to see the updated results more quickly.
Still; it’s only in Beta so these features might yet make the final cut.
jsFiddle just tweeted to tell me that it is possible to provide a link to preview a page without the header bar, and only showing the results. Just append /show/ to the URL. Like this: http://jsfiddle.net/zalun/xBFKF/1/show/
Bernard, jsbin doesn’t have extjs support, so it doesn’t work for me. What’s wrong with a useful header bar anyway? Would be nice to be able to move it out of the way if you don’t need it I suppose.
Woops – I said it’s in Beta when it’s still only in ALPHA.
It’s also very handy for submitting reproducible problems in bug reports to browser and js lib developers.
Hi, thanks for the post.
Beta version is coming as soon as it will be ready (http://blog.jsfiddle.net/post/721507037/jsfiddle-beta-is-coming), there will be quite a lot of beta testing user accounts given away, so follow http://twitter.com/js_fiddle to catch the first wave.
I just wish they had an option to work offline. And I wish it worked on the iPad.
Can we see an example of something you have prototyped using this method?
I am starting to get intrigued by this.
How does one actually debug in jsFiddle? I sometimes find nothing in the results panel even if the syntax is correct. I can fire this up in firebug, but there are times when I cannot properly set breakpoints in firebug (or other browser-based javascript debuggers).