jsfiddle.net – what is it and why is it so useful?

If your writing a web application and using any kind of JavaScript library then jsfiddle is something worth taking 5-10 minutes to look at in my opinion.

You can try out your JavaScript (any library you can think of) add some HTML and sprinkle with CSS and quickly see the results, its a no brainer.

At work we are starting out on a web application which we will be using KnockoutJs on and jsfiddle will be invaluable, I have been watching the Pluralsight and Tekpub videos on KnockoutJs and wanted to blog about jsfiddle after watching John Papa talk about it in one of his KnockoutJS modules.

John’s courses on Pluralsight are awesome and I highly recommend them, the one I refer to was his course on Buiding HTML 5 apps (middle one below):-

jsfiddle.net is a website where you can test out some JavaScript code snippets you have, before you add them to your project, it’s an excellent little test harness for ideas and trying things out.

You can save the fiddles you create and share fiddles with others if you can’t get something working and could use some help with some tricky JavaScript.

Ok less talk more action:-

• Browse to jsfiddle.net and then sign up for an account, the reason you want an account is so you can save fiddles for later and come back to them in the future.
• You can add in pretty much any JavaScript library as a a managed resource so that you test all kinds of stuff, jquery, jquery ui, knockoutj, kendoui and more.
• If you see a blog post that mentions a js fiddle and you want to it then I will show you how to use it below:-

How to create your first fiddle using jsfiddle

• For simplicity we will use the demo from the knockoutJs website which has fantastic tutorials on how to use knockout.

1. Since this demo is going to use KnockoutJS we will add a reference to KnockoutJS
2. Browse to https://github.com/SteveSanderson/knockout/downloads and then copy the location to the latest version of the knockoutJS library, at this moment in time this link to the file we need is :- https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js
3. To add this to our jsfiddle look at the left hand side looking for ‘Add Resources’ and then paste in the link to the js file and then click the plus icon.

   

4. The screen is split into 4 sections:-

   

   • Top Left is for HTML
   • Top Right is for any css styling you wish to add/try out
   • Bottom Left is where you add your JavaScript code.
   • Bottom right shows the output you would see in the browser
5. Add the following into the top left hand window pane (Html):- [sourcecode language=”csharp”] <p>First name: <strong data-bind="text: firstName"></strong></p>
   <p>Last name: <strong data-bind="text: lastName"></strong></p>
   [/sourcecode]
6. Now add the following into the bottom left window pane (JavaScript):-
   [sourcecode language=”csharp”] // This is a simple *viewmodel* – JavaScript that defines the data and behavior of your UI
   function AppViewModel() {
   this.firstName = "Bert";
   this.lastName = "Bertington";
   }

   // Activates knockout.js
   ko.applyBindings(new AppViewModel());
   [/sourcecode]

7. And thats it we are ready to save the fiddle and test it out.
8. To test out our code click Run up at the top and you can use your favourite browser to check for any errors that may arise as you play around with the code.
9. A very simple demo but you get the idea on whats possible, and if like me your trying to learn KnockoutJS its an invaluable tool.

Ok now that you get the idea, go create some fiddles and test our your ideas using any JavaScript library you can think of – enjoy!