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.

The vanilla HTML implementations of these two methods are shown below:

1) Select tag:

(Hold ctrl or command to select multiple values)

2) Checkboxes and Label tag:

Note that the <label> tag allows users to click the label to toggle the checkbox on and off.

In terms of usability,  the checkbox method is more straightforward – it is obvious how to select multiple values, whereas with the select method we have to tell the user which keys to hold down. In addition to that, if a user has selected multiple items, and then forgets to hold the correct key on the next click, their selection is lost and only the last value clicked is selected. On a list that can be scrolled, it may not even be apparent that the other selections have been lost.

The disadvantages of the checkbox method are:

• It’s not obvious that the label can be clicked.
• It would be nice if a larger area were clickable, as with the SELECT example
• It would be nice if the entire row were highlighted, as with the SELECT example
• The values are not scrollable – adding more will simply show a longer list

We’re going to fix all that with some simple CSS and Javascript (using JQuery).

Click to see an example page

Edit 1 – 9/4/09: Simplify code as per Victor’s comments, and fix refresh issue in Firefox

Edit 2 – 9/4/09: Simplified again, using just the label tags, without <a> tags, from the reddit comments

	$(document).ready(function() {

		// make sure labels are drawn in the correct state

		$('label').each(function()
		{

			if ($(this).find(':checkbox').attr('checked'))
				$(this).addClass('selected');

		});

		// toggle label css when checkbox is clicked

		$(':checkbox').click(function(e)
		{

			var checked = $(this).attr('checked');
			$(this).closest('label').toggleClass('selected', checked);

		});

	});

my_string.startswith('pre')

The same thing can be achieved in Javascript using the rather powerful search and replace methods.

These methods can either accept strings or regular expressions.  To search for a plain string, use quote marks, for example:

my_string.search('tom');

This will return the index of the first occurence of ‘tom’ in my_string.

To search for a regular expression, use slashes. Regular expressions use special characters to search for particular patterns in strings – we’ll just be using the ‘starts with’ (^)  and ‘ends with’ ($) characters. Therefore, our Python-style startswith and endswith tests looks like this:

my_string.search(/^prefix/) ;

my_string.search(/suffix$/);

Note from Alex Macmillan (honorary proof reader)

While the Python functions return a boolean value depending on the match, the Javascript versions return the index of the matched string. If they are not found, the return value will be -1, not false.

I wrote the first version of my CMS back-end in PHP, and sent data to a Javascript front-end using JSON. This was fantastically fast and simple – the string only need be checked for dangerous syntax, and then eval-ed and it becomes Javascript objects ready to use. The pot-noodle of data formats.

Pot noodles are all very well but my friend Alex prefers XML. It’s much more readable, and pretty much every language and its dog can parse it. I wrote a function to turn my Python data into XML which I’ll post later, but this post is about my Javascript XML parser, as it was harder to get right.

In summary the parser function takes a complex heirarchical XML tree with nodes and attributes, and turns it into equivalent JS objects and properties. The full code as it stands is at the end of the post, I’ll go through the main steps here:

1. The function accepts the first child of the XML file and a parent object as arguments.
2. If the node name ends with ‘_array’ then it is, unsurprisingly, an array. This is a naming convention, but I couldn’t see how else to make sure arrays were consistently dealt with.
3. If the node has no attributes of its own, treat it as an attribute itself. Again, this is a weird convention on my part, so I can use nodes to store large sections of text, instead of putting them in XML attributes, which would be hard to read.
4. Check whether the object can be pushed into a parent array, if that fails the parent must be an object – append the the new object to the parent.
5. Loop the attributes and assign them as properties to the object.
6. Loop the child nodes and send them to the function with the current array/object as parent.

Javascript code:

xmlToObj : function(xml,parent_obj) {

	if (parent_obj == null)
	{

		// base object

		var new_obj = {};
		xml = xml.firstChild;

	} else if (xml.nodeName.search(/_array$/) != -1) {

		// array

		var new_obj = parent_obj[xml.nodeName] = [];

	} else if(xml.attributes.length == 0) {

		// node which is really a string attribute

		try {

			parent_obj[xml.nodeName] = xml.firstChild.nodeValue;

		} catch(error) {

			parent_obj[xml.nodeName] = '';

		}

	} else {

		if (parent_obj instanceof Array) {

			//member of an array

			var new_obj = {};
			parent_obj[$(xml).attr('id')] = new_obj;

		} else {

			// new object

			var new_obj = parent_obj[xml.nodeName] = {};

		}				

	}

	// map xml attributes to object properties

	$(xml.attributes).each(function()
	{
		if (this.nodeValue.toLowerCase() == 'true') {

			new_obj[this.nodeName] = true;

		} else if (this.nodeValue.toLowerCase() == 'false') {

			new_obj[this.nodeName] = false;

		} else {

			new_obj[this.nodeName] = parseInt(this.nodeValue);

		}
	});

	if ($(xml).children().length > 0)
	{

		$(xml).children().each(function()
		{
			page_edit.xmlToObj(this, new_obj);

		});

	}

	return new_obj;

}

XML data

<page active="True" id="1" is_template="False" position="1" template_id="1" visible="True">
	<title>
		project
	</title>
	<sections_array>
		<page_section id="1" page_id="1" position="0" section_id="1" visible="True">
			<section active="True" attribs="None" id="1">
				<elements_array>
					<section_element element_id="1" id="1" position="0" section_id="1" visible="True">
						<element active="True" attribs="None" id="1">
							<content>

								test
							</content>
							<title>
								title
							</title>
						</element>
					</section_element>
					<section_element element_id="2" id="2" position="1" section_id="1" visible="True">
						<element active="True" attribs="None" content="None" id="2">
							<title>
								test
							</title>

						</element>
					</section_element>
				</elements_array>
				<title>
					test_section
				</title>
			</section>
		</page_section>
		<page_section id="2" page_id="1" position="1" section_id="2" visible="True">
			<section active="True" attribs="None" id="2">

				<elements_array>
					<section_element element_id="4" id="4" position="0" section_id="2" visible="True">
						<element active="None" attribs="None" id="4">
							<content>
								Hello my name is Joe
							</content>
							<title>
								Fred
							</title>
						</element>
					</section_element>

					<section_element element_id="3" id="3" position="1" section_id="2" visible="True">
						<element active="None" attribs="None" id="3">
							<content>
								some content
							</content>
							<title>
								Feedy doo da
							</title>
						</element>
					</section_element>
				</elements_array>

				<title>
					arab
				</title>
			</section>
		</page_section>
	</sections_array>
</page>