Search This Blog

JS fiddle (old news?) - updated

posted on Thursday, September 20, 2012

This might be old news, but I only just picked this up and think it's a really nice application: JSFiddle.

Honestly, Javascript is not my strong suit. I have always found the syntax to 'different' but then again I don't think I use it enough to really get familiar with it.
I'll put it on the to-do list :)

Back to the point: as with all forms of programming, it can be pretty annoying when you're troubleshooting and constantly have to adjust your code and run again. It can be a very time-consuming process of trial and error.

And then all of the sudden I stumbled on to this: JSFiddle!

This allows you to test a combination of HTML, CSS and JavaScript in real-time.
On top of that it has a nice sharing feature with which you can save your code and distribute the link to it: imagine being stuck on some code, this is a nice way to present the problem on a forum. Syntax-highlighting is -luckily- included as well. And oh yeah, it's free :)

Moral of the story: JSFiddle is a great application that can save you a whole lot of time, so it could be useful :)


I'd like to add some extra information about JSFiddle since I've been using it quite a lot since I wrote this post and I feel like it deserves some more explanation.

So, back to basics! An important feature, the most important one probably,  is that you can choose a framework and a time (read: event) when your code should be executed. By default this is Mootools 1.4.5 and the onLoad method. I mostly use this for jQuery but you could also use this for plain old JS, Prototype, Knockout.js, Underscore and many others. On top of that you can add extra resources, for example a custom script file or CSS or whatever. So this really expands the functionality of what kind of code you can test using JSFiddle.

You can mess around with the panels a bit, set some info and specifiy the body and the DTD for the HTML part. There is some extra funcitonality for testing Ajax request, but I haven't got around to testing that yet.

So what else can you do? JSFiddle allows you to validate your JS code through JSLint (discussed here:, which is on the list of most useful developer tools. I'll make sure to add JSFiddle to the list as well!

You can also register for an account (for free) to get some extra options: all of your fiddles will be listed in your account for an easy overview with all revisions.

The rest in a short list: you can tidy up your code, embed a fiddle, integrate with GitHub and there's even an API you could use to implement JSFiddle functionality in your application!

Could be useful, right?

No comments:

Post a Comment