jsFiddle.net is an outstanding tool for sharing and collaborating on client-side development. Some key uses for it are:

• Keeping a scrapbook of useful samples that you can access anywhere.
• Sharing a sample of an issue that you are encountering. The exercise of reproducing the problem in its most simple form will often be enough to discover the issue on your own.
• Sharing a potential answer to another person’s question in jsFiddle helps you gain a deeper understanding of their issue and helps you move past suggestions into actual working solutions.

Using KnockoutJS in jsFiddle

The documentation for jsFiddle describes the basics of how to use the site. Here are the steps that you need to follow to get KnockoutJS working in it:

1. In the Choose Framework section choose a recent version of jQuery:

2. In the Manage Resources section, add the other scripts that we need by entering a URL and hitting the plus icon. You will want to add them in the appropriate order listed. There are several locations to find hosted versions of these scripts, here are a couple of options for each:

   jQuery Templates plugin:

   • Latest: https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js
   • “Safe” copy from KO downloads: https://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js

   Knockout:

   • Latest debug: https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js
   • 1.12 release: http://github.com/downloads/SteveSanderson/knockout/knockout-1.1.2.js

   Mapping Plugin (if you need it):

   • Latest debug: https://github.com/SteveSanderson/knockout.mapping/raw/master/build/output/knockout.mapping-latest.debug.js

   Should look like this:

3. At this point you are ready to use KnockoutJS in your fiddle. Your HTML and jQuery Templates (enclosed in script tags) should go in the HTML pane. Your JavaScript can go in the JavaScript pane (without a script tag) and your style information can go in the CSS pane (without a style tag).

Forking/updating/Set as base

• Use the Update button when you are happy with your code. This will save a copy of the code under an incrementing revision number appended to the address (/1 to start).
• Use the Set as Base button to indicate that this revision should be loaded when the base address (no revision) of the fiddle is accessed.
• Use the Fork button to create a new copy of this fiddle. Very useful when starting with someone else’s sample or when you want to use a past fiddle of your own as a base.

Base Fiddles

Here are a couple of basic fiddles that can easily be forked:

• Latest jQuery templates, Knockout, and mapping plugin: http://jsfiddle.net/rniemeyer/gNJN5/
• KO 1.12 with jQuery templates from KO downloads: http://jsfiddle.net/rniemeyer/6Uf9S/

Other Features

Quick mention of a few other great features of jsFiddle.net:

• TidyUp – this button will help format your code. It generally does a decent job of cleaning up JavaScript formatting, which can get messy if you are specifying complex object literals.
• JSLint – this button will help verify that your JavaScript is valid. It is a bit hard to match up the reported line numbers with the actual code, but generally gives you a good idea where something is wrong. Definitely one of the first things to check if your code is not behaving properly.
• Keyboard shortcuts – Ctrl+R runs it. Ctrl+S saves it. Ctrl up or down switches between the panes.
• If you are a member, you can also easily access all of your past fiddles. For example, here is a list of all of mine: http://jsfiddle.net/user/rniemeyer/fiddles/

Support jsFiddle

I asked the other day if there was a way to support jsFiddle.net and was directed to a mousepad that you could order here, which I did. If you like the site, consider supporting them. Anyone else have other tips or tricks related to jsFiddle?