macc

Another Site Update

I've added a little toggle for the right hand menu, to allow for better reading of the content. I'm still debating whether or not to move the main site navigation to a tab menu above the content, which would allow for a much wider area for the page content.

I definitely need to get a half decent banner graphic up instead of what I currently have.

I've also changed the font size and spacing, and am thinking about working on some source code colouring. It wouldn't be too hard to parse through any code in PHP to generate tags around certain words or groups of words with a style class (i.e., 'keyword' or 'comment'). This would then be encased in a <pre> with a class labelling which language the code is written in. Some simple selectors like:

.javascript .comment {
	color: green;
}
.php .keyword {
	color: red;
	font-weight: bold;
}

could easily be written for any language.

Private and Public Variables and Functions in Javascript

A good way to write your javascript is to encase it inside a single object literal. This allows your code to be easily ported into other sites or applications without any fear of using the same variable names, since everything is only defined within the scope of the single unique global object.

var macc = {
	x : 1,
	y : function () {
		return this.x * 2;
	}
};

Once you get used to placing everything inside a single object, the next step is to hide some of your variables and functions from being [easily?] read from and called during execution. This is possible through a little trick that allows you to call a function when you declare it.

var macc = function () {
	return {
		x : 1,
		y : function () {
			return this.x * 2;
		}
	}
}();

This looks pretty useless at the moment. It is pretty much the exact same as the example code above with macc being defined as an object literal - the variable x and the function y are public members of the object macc.

The trick is to declare anything you want as a private variable before the return statement. When you do this, all of the functions of the object literal will have full read and write access to all of the private variables and functions, but anything external will not have access.

var macc = function () {
	//private members
	var x = 1;
	var y = function () {
		return x * 2;
	};
	//public interface
	return {
		setx : function (newx) {
			x = newx;
		},
		usey : function () {
			return y();
		}
	}
}();
var test1 = macc.x; // undefined
var test2 = macc.y; // undefined
var test3 = macc.usey(); // 2
macc.setx(5);
var test4 = macc.usey(); // 10

Using this little trick, we can now limit access to the variables and functions inside our global object. It also gets rid of the need for the use of the 'this' keyword, as all of the functions are defined within the scope of the private variables.

Site update

I've updated to site to stop using the UW template. I didn't like the absolute positioning that it used, and decided to use some floats instead. I like how the Ext JS framework, divides its layouts into north, south, east and west sections, so I mocked up a simple layout that has the same idea (without all the flashy javascript), with a little help from easy clearing.

The north section contains the title of the page; the east contains the searchbox and the external links; the west has the site navigation; the center contains the content; and the south contains the footer.

The home page is now a place for updates, and will be updated the most frequently. Previously it held information about me and some links to some of the projects that I've been working on, but that belongs elsewhere (the About Me page, and the site navigation for links).

The right hand navigation has been divided up into a few different categories of links, and new links will be added as I come across any.

ScriptSauce!

Dingle and I finally bought our domain (ScriptSauce). This is where we will be developing our shared projects as well as our own javascript framework. We've had our noses in javascript for a while, familiarizing ourselves with prototyping, inheritance, animations, AJAX, and JSON; basically, pushing the language to its limits. We've realized that javascript has a lot of power when used properly.