So, assuming that you have an authenticated session, here’s what you need to do:

var params = {};
params['message'] = 'Message';
params['name'] = 'Name';
params['description'] = 'Description';
params['link'] = 'http://apps.facebook.com/summer-mourning/';
params['picture'] = 'http://summer-mourning.zoocha.com/uploads/thumb.png';
params['caption'] = 'Caption';
 
FB.api('/me/feed', 'post', params, function(response) {
  if (!response || response.error) {
	alert('Error occured');
  } else {
	alert('Published to stream - you might want to delete it now!');
  }
});

If you do this right you should get something like this appearing:

Spamtastic.

One situation might be in displaying a place name. Say for instance that place name had to be rendered in block that has a width of 200px, with a height that can flex as necessary to accomodate the content. This won’t be a problem in 99.9% of situations, but what happens if the place name is Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch?! Yes this place does exist! In cases like this you might want to apply a special class name, or maybe dynamically adjust the font-size so that it fits within the allowed container. The consequences of not defending against this situation might be that the layout behaves unpredicatably, breaks, or perhaps some of the word could be hidden by the overflow property in the CSS being set to hidden or something.

So, should you find yourself in a situation where you need to measure the height and width of a text element, this code might help you:

HTML

<p id="place-name"> Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</p>

CSS

#place-name{
    position: absolute;
    height: auto;
    width: auto;
}

JavaScript

var oPlaceName = document.getElementById("place-name");
if (oPlaceName){
	var iHeight = oPlaceName.clientHeight + 1;
	var iWidth = oPlaceName.clientWidth + 1;
	if (iWidth > 200){
		//Deal with the long text.
	}
}

I have prepared a quick standalone example should you want to see this in action.

A place name might have been a bad example, but it could have quite easily have been any other type of field who’s length or height you might want explicit control over. Other applications of this that I can think of quickly could be adjusting the font-size of headings so that they never wrap, perhaps adjusting letter spacings so that they have aligned edges, or whatever else the designers .psd file shocks you with! With a clever implementation, this sort of thing could be achieved without the user even noticing, but that’s a job for someone else!

var l = bigArray.length;
for(var i = 0; i < l; i++){
	//Do stuff
}

Another less well known way is to cache the length property in the for loop decleration e.g.

for(var i = 0, l = bigArray.length; i < l; i++){
	//Do stuff
}

if (object.property){
	var foo = object.property;
}else{
	var foo = "foo";
}

Or:

var foo = "foo";
if (object.property){
	foo = object.property;
}

Then there is more elegant way to achieve this by using the logical OR (||) operator in setting the variable. The same result as above can be achieved by this line of code:

var foo = object.property || "foo";

What this is in effect doing is testing the result of the logical OR operator based on the existence of the two conditions i.e. object.property and “foo”. As “foo” will always resolve to true because it exists, it is just down to the ambiguity of object.property to determine the output i.e. if object.property exists, then foo will take the value of object.property, otherwise it will adopt the value “foo”.

function sum() {
  var total = 0;
  for (var i=0; i < arguments.length; i++) {
    total = total + arguments[i];
  }
  return total;
}
sum(5,4,3); //returns 12

What this function does is take any number of parameters and then add them together.

You can also do the arguments.length technique in reverse by using the length method against the function. This will then give you the number of variables that are expected by a function. For example:

function sum(x, y, z){
    return x + y + z;
}
console.log(sum.length); // returns 3, as that is the number of expected parameters.

I can't say I use either of these techniques a great deal, but they are useful to know nonetheless!

I wrote this simple bit of code to get around that problem:

if(!window.console){
	var console = {
		log : function(msg){
			alert(msg);  //You could leave this statement out if you wanted the debugging to be silent when firebug isn't enabled
		}
	}
}

All it does is test for the existence of the console object, and if it doesn’t exist use the classic debuggers friend, alert(). You could extend this to incorporate console.debug() etc. but if you’re going to go to them lengths, then you may as well just use firebug lite.

Another way I’ve seen described in the past for manging this problem is to use a log() function that might look something like:

function log(msg) {
	if(console){
		console.log(msg);
	}else{
		alert(msg);
	}
}
log("debug message");

Another way would be to do it the other way around and overwrite the alert function with console.log if it exists:

if ( window.console ){
	if ( window.console.log ) {
		window.alert = console.log;
	}
}

All three methods mentioned above are a lot more effective than commenting out every instance of console.log in your code! Come on, we’ve all done it…

Include jQuery by using the @require statement

Greasemonkey doesn’t inherit the jQuery library if it is just loaded onto the web page as normal, you need to figure out a way of allowing your Greasemonkey script to use it another way. If I had read the Greasemonkey docs from the off, I would have stumbled across the correct method within about 5 minutes, but I didn’t, I just dived straight on in and it took a lot longer…

To add jQuery, include the @require line in your script header. This needs to be done before you install the script and cannot be done retrospectively.

// ==UserScript==
// @name          Awesome Tool
// @namespace     http://daipratt.co.uk
// @description   Top Secret
// @include       http://daipratt.co.uk/*
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js
// ==/UserScript==

Make sure that your Greasemonkey script ends in .user.js

If it doesn’t, you’ll spend ages wondering why it won’t let you install a local script.

Store session data

You don’t need an elaborate method of storing data for retrieval between sessions and pages, there are a pair of functions built into Greasemonkey that do the job nicely:

//Sets a key value pair that Greasemonkey should store
GM_setValue(key, value);
//Retrieves a value, given an existing key
var v = GM_getValue(key);

Since then, I have embraced JavaScripts namespacing ability (along with anonymous functions) to complement the defensive style that I quickly felt the need to adopt! I think that coding defensively is especially important because it is often impossible to conceive what the future business requirements of a site will be, what client side code could be thrown at it, or the caliber of developer working on it. The last thing you want is a developer from the marketing department innocuously dropping a “cool” image rotating script site wide in the document <head> and taking out business critical code as a result. It’s embarrassing for the guilty developer, but I think more so for the senior guy who should’ve coded more defensively in the first place.

This may or may not work for you, but I namespace everything to mitigate the chances of collision of functions, variables, objects, anything bar the root global variable name, from any new code that follows later, or more broadly OPC.

Anyway, a namespace essentially provides a container for all of your code to sit within. At its simplest, it can be defined like so:

var myFirstNamespace = {};

This can then be extended in any manner you please. For example:

//Extend myFirstNamespace
myFirstNamespace.helloWorld= function() {
	console.log('Hello World!');
};
 
//Use the myFirstNamespace properties
myFirstNamespace.helloWorld();

This would then write the following into your Fire Bug console:

Hello World!

Easy peasy.

As a real world example, at Bounty, everything new went into a bounty namespace, which in turn had things like bounty.utils, bounty.ui to separate the various functions that were held within. Here’s a skeleton namespace that might make it easier to understand what I mean:

var bounty = {
	init : function(){
		//Initialise functions within the bounty namespace
		bounty.advert.fInit();
		bounty.ui.fInit();
		bounty.utils.fInit();
	},
	advert : {
		fInit : function(){
			//Initialise bounty.advert
		},
		fAdvertFunction1: function(){
			//An advert function
		},
		fAdvertFunction2: function(){
			//Another advert function
		}
	},
	ui : {
		fInit : function(){
			//Initialise bounty.ui
		},
		tabBox : {
			fInit : function(){
				//Initialise bounty.ui.tabBox
			}
		}
	},
	utils : {
		fInit : function(){
			//Initialise bounty.utils
		}
	}
};
$(document).ready(function(){
	//Initiliase bounty.
	bounty.init();
});

I find that this style of coding helps in enforcing a structure to the code, which is particularly helpful when there are large quantities of it, and when it comes to debugging. Another positive side effect is that if your chosen code editor supports code folding, then you can quickly collapse everything and get a very clear architectural overview of what it does without having to trace your way through functions to understand what’s going on.

Anyway, I intend this post to be the first in a series of posts about where some JavaScripters go wrong with the basics.

So, pet hate number 1 is… When the same line or sequence of code is repeated in a number of locations across a file. Here’s what I mean:

//Calculate grade
grade = (userTotal / maxPossible) * 100;
grade = Math.round(grade);

Fairly simple I’m sure you’ll agree – the code is calculating some sort of grade and then rounding it off. Nothing wrong with this in itself, but we can make it cleaner by abstracting it into a function:

function calculateGrade(userTotal){
    grade = (userTotal / maxPossible) * 100;
    grade = Math.round(grade);
    return grade;
}

You could even do it on one line if you really wanted too:

function calculateGrade(userTotal){
    return Math.round((userTotal / maxPossible) * 100);
}

The original line of code can now be replaced with something a lot more readable:

grade = calculateGrade(userTotal);

If this were just in one place in your code then fine, no massive benefit has been gained bar a bit of readability, but if this same calculation is carried out in multiple places, then the benefits really begin to emerge:

• If the grade calculation changes, then it only needs to be amended in one place.
• It avoids duplicate code, and uses less of it.
• Improves performance.
• Reduces complexity, and also isolates it.
• The program becomes a little more self-documenting.
• Enables code re-use.

If I sat down and thought about it, I’m sure I could reel off many more reasons, but even for just these few it has got to be worth investing the time to understand the basics of functions and abstraction.