With the onset of HTML5 becoming increasingly supported among the many browsers out there, there are going to be a number of important changes coming to the way things work. Things such as… the MathML and SVG support, a large number of new elements and deprecation of some older obsolete ones, and most importantly (for the purposes of this article) an important change to the history API functionality!

Unfortunately, HTML5 isn’t supported in every browser… largely because older versions of browser either can’t support it or just aren’t being updated to support it. People should update their browser anyway… so many unnecessary headaches caused by having to go back and debug some random old version of IE or Firefox because someone is reluctant to update. I will say, props to Chrome for silently updating itself to the latest version and indicating that a core app restart is required with those little coloured arrows!

Due to this lack of support in all browser, *glares at IE*, another solution is required to properly combat this looming headache menace! One of the best tools at our disposal as web developers is the History.js HTML5/HTML4 wrapper.

You can find it here: https://github.com/balupton/history.js
…and a demo here: http://balupton.github.com/history.js/demo/

Straight from the description on github: “History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState.”

The key thing that the History.js adds is complete cross browser support for history behaviour on all websites. Of course, browsers that support HTML5 have a much nicer experience, but it still works very neatly in general. Thankfully, it also includes plugins for major javascript frameworks, including jQuery, Mootools and Prototype.

An implementation using History.js

One of the tasks I was working on at work was to transition an aging web application which was still using a frameset for it’s layout into a single-page application. The catch was that part of the page load was an EXTREMELY heavy client side javascript menu. As a result, simply loading the entire page each time while navigating around the application was a bit of a performance issue, resulting in page load times nearly doubled.

My solution was to implement a chromeless loading system based around caching pages in the DOM and utilizing HTML5 history API calls wherever possible to allow for fast page transitions going back and forward in the browser.

I quickly found that HTML5 wasn’t fully supported (as expected), and also that it there was still inconsistent behaviour between different browsers. After a bit of searching around online, I came across History.js, realized its potential, and began implementing it into the application.

The basic idea behind what I wanted to do was keep enough meta information about each page the user navigated to such that I could determine if it was either cached already and could be swapped in, or if it needed to be requested and cached again. This was particularly important, because closing the browser would typically cause you to lose your history for that session, but it is possible to keep track of your history even between browser loads with History.js.

As a result, the general behaviour was to to either push a new page on to the history when performing new navigation, replace an existing cached page when a forced load was required (stale data or no longer cached due to browser reload), and wrap normal browser back and forward with a history state change event.

I actually found a funny little bug while working on this solution (which may be fixed now, I haven’t bothered to confirm), where if you are using the amplify.store.js storage solution for page caching via History.js, after 1000 page loads it would simply go into an infinite loop because it couldn’t find the next “unique” page identifier to use. Page identifiers were generated by selecting a number at random between 1 and 1000… and of course testing this on development, I would constantly be reloading pages and changing states… which lead to some fun times debugging the infinite loop.

Ultimately I had to skip using the storage system, and I implemented a version of it myself in the DOM itself. I like this solution better anyway, because it gave me direct control over what was cached and how it was manipulated more so than the storage system would.

At any rate, here are a few simple code snippets of how I was using History.js:

// set up history change event
var History = window.History;
History && History.Adapter.bind(window, 'statechange', function(){ … });
 
// pushing new state data (History.pushState and History.replaceState have identical syntax)
History.pushState({
	state: customState,
	timestamp: pageLoadTimestamp,
	page: pageKey,
	extraData: dataObject
}, pageTitle, pageUrl, false);
 
// state change event
var onHistoryStateChange = function(e){
	var HistoryState = History.getState();
 
	// access the custom data you've assigned to the history state
	// HistoryState .data.state;
	// HistoryState .data.timestamp;
	// HistoryState .data.page;
	//
	// handle state change by either loading new page or loading cached page etc ...
}

And lastly for more reading about manipulating the browser history, Mozilla Dev has a nice article that I found useful on it here:

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Your friend,
Jeff

Home Fires by Gene Wolfe

While it wasn’t quite what I’d expected, that is very much a good thing. I enjoyed it.

If you’re looking for something a little science-fiction-y and a little adventure-y you might enjoy this one, especially if you take to the writing styles of Gene Wolfe (which I tend to). I would recommend it.

Harry Potter (all seven)

Apparently after they made the sixth movie, somone decided to write some books! At least that’s how it seemed to me, as I read all seven within this last month. There’s a good chance you’ve read these and that’s now true of me as well!

It did take me about three books to get into the series, but in the end I enjoyed it and even now miss my friends Ron and Hermoine a little (not so much Harry, I never truly considered him a friend).

There are things I liked and things I didn’t, though that is true of all books but the truly and completely terrible. I would recommend them, though with some qualifications.

The Sorcerer’s House by Gene Wolfe

More fantastic than future-set, I’d recommend it for anyone looking for that set in present-day. It features the same sort of protagonist I’ve become familiar with from some of his other works.

Rant: An Oral Biography of Buster Casey by Chuck Palahniuk

A friend and I agreed to read each other’s recommendations, and this was one of hers. It was interesting, and I might recommend it (though with more than a few qualifications).

Lightning by Dean Koontz

Another book that she recommended; though fine, it really wasn’t my style.

But what to read next?

There’s an __autoload function that I wrote a while ago and often use to, you know, automatically include files when instantiating classes. But it didn’t work at all.
The file itself with the __autoload function included fine, but autoload function was not being called. It was pretty confusing, to be honest.

Jeff and I eventually traced this back to one line in my code — the line including the Smarty source file.

So I had a look in there and found this:

/**
 * register the class autoloader
 */
if (!defined('SMARTY_SPL_AUTOLOAD')) {
    define('SMARTY_SPL_AUTOLOAD', 0);
}
 
if (SMARTY_SPL_AUTOLOAD && set_include_path(get_include_path() . PATH_SEPARATOR . SMARTY_SYSPLUGINS_DIR) !== false) {
    $registeredAutoLoadFunctions = spl_autoload_functions();
    if (!isset($registeredAutoLoadFunctions['spl_autoload'])) {
        spl_autoload_register();
    }
} else {
    spl_autoload_register('smartyAutoload');
}

Which looked suspiciously culpable. So I added this line to my code:

spl_autoload_register('__autoload');

And then it worked!

Even so, I wanted to try out some isometry. You know, get some stuff displaying and sorting. That sort of thing? Big news: I did it!

That’s all for isometry, on to youtube powered video galleries!

• http://www.youtube.com/watch?v=L5JHMpLIqO4
• http://www.youtube.com/watch?v=VG82USg5mtE
• http://www.youtube.com/watch?v=-jMruFHTwrY
• http://www.youtube.com/watch?v=zxK8y7XuEu8
• http://www.youtube.com/watch?v=ADBKdSCbmiM
• http://www.youtube.com/watch?v=28sAsvzMW6s
• http://www.youtube.com/watch?v=V-24m-KRkn0

That’s one I made quickly. It works like this:

First you have some HTML.

<ul class="video library">
	<li>http://www.youtube.com/watch?v=L5JHMpLIqO4</li>
	<li>http://www.youtube.com/watch?v=VG82USg5mtE</li>
	<li>http://www.youtube.com/watch?v=-jMruFHTwrY</li>	
	<li>http://www.youtube.com/watch?v=zxK8y7XuEu8</li>	
	<li>http://www.youtube.com/watch?v=ADBKdSCbmiM</li>	
	<li>http://www.youtube.com/watch?v=28sAsvzMW6s</li>	
	<li>http://www.youtube.com/watch?v=V-24m-KRkn0</li>
</ul>

Just throw the Youtube URLs into a list and add the classes video and library to it, and that’s all there is to the HTML! (Well, there’s some minor javascript to include).

<link href="http://www.gigglingcorpse.com/dev/video-gallery/style.css" rel="stylesheet" type="text/css" media="screen" />
<script src="http://www.gigglingcorpse.com/dev/video-gallery/video-library.js" type="text/javascript"></script> 
<script src="http://www.google.com/jsapi" type="text/javascript"></script> 
<script type="text/javascript"> 
		google.load("jquery", "1");
		google.setOnLoadCallback(function() {
			videofy();
		});		
</script>

I included the Javascript file for you know doing stuff, as well as CSS file for some basic formatting. It makes use of JQuery, which i’ve included by way of Google’s JsAPI (out of laziness). And then when everything has loaded, there’s the one call to videofy().

After that, the list gets converted into the video gallery you should see above!

Thank you for your time.

I found that I retrieve the data as JSON, which is super handy because of PHP’s json_decode function. You can retrieve the JSON through a URL like this: http://blog.alteredeffect.com/feeds/posts/default?alt=json

But I did run into an issue. Most things, when deJSONed, turned into stdClass objects. One property I needed to access was named “$t“, which as you may imagine I had some trouble accessing. I tried single quotes and escaping the $ character, but nothing seemed to work.

There’s almost definitely a better way, but I ended up casting to Array:

function getT( $obj ) {
	$t = (Array) $obj;
	return $t['$t'];
}

And it seemed to work fine.

Eventually I give up and make a dedicated PHP file just to test the regular expression against various inputs. In fact, I have done the same with other functions to ensure that they do what I expect them to.

And you know what they say: If you’ve done something more than once, and will probably do it again, why not automate it? And if you can’t automate it, make a tool for it. There’s even the more appropriate: Make a web-tool for testing functions with arguments.
(I have no idea if those are real saying or not.)

I like to listen to people and what they say, and so that is exactly what I did: http://gigglingcorpse.com/dev/phpfunctions

Here it is in iframe, although it doesn’t really fit:

A couple of nights ago I made a rock/paper/scissors bot arena. You can make bots using Javascript and have them compete.
It seemed like it’d be fun to make, and who knows, maybe it’ll trick some people into trying out some easy programming since it’s all web-based.

It’s a little weirder than normal Javascript, but that’s because the code gets wrapped into an object before use:

 
function bot1() {
 
	this.name = "Random (from array)";
 
	// Actual bot code starts here
 
	this.ROCK = 0;
	this.PAPER = 1;
	this.SCISSORS = 2;
 
	/**
	 * This is the deciding function for your bot.
	 * It should return ROCK, PAPER, or SCISSORS.
	 **/
	this.evaluate = function() {
		var values = [0, 1, 2];
		// Pick a random element in the array
		return values[ Math.floor( Math.random()*values.length ) ];	
	}
 
	 // And ends here
}

There are a couple of special functions:

• this.evaluate = function() gets called when it’s time for the bot to throw down.
• this.opponentPicked = function( v ) (if it exists) gets called with your opponents choice for the game that’s just finished.

A good example of the opponentPicked function is the Watcher bot.

this.ROCK = 0;
this.PAPER = 1;
this.SCISSORS = 2;
 
this.memory = [0,0,0];
 
/**
 * This is the deciding function for your bot.
 * It should return ROCK, PAPER, or SCISSORS.
 **/
this.evaluate = function() {
	var total = 0;
	for( var i=0; i < this.memory.length; i++ )
		total += this.memory[i];
	var po = Math.floor( Math.random()*total );
 
	for( var i=0; i < this.memory.length; i++ )
		if ( po > this.memory[i] ) {
			po - this.memory[i];	
		} else 
			return (i+1)%3;
	return 0;	
}
 
/**
 * Let's you know what you're opponent has picked.  
 * This gets called after evaluate.
 * @param int v
 */
this.opponentPicked = function( v ) {
	if ( v >= 0 && v < this.memory.length ) 
		this.memory[ Math.floor( v ) ]++;
}

There are a bunch of example bots anyway. Just don’t try this is going to be bad!

HTML

<table border="1">
	<tr>
		<td>0</td>
		<td>
			<table border="1">
				<tr>
					<td>0</td>
					<td>
						<table border="1">
							<tr>
								<td>1</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</td>
		<td>0</td>
	</tr>
</table>

So basically just three tables nested.

CSS

td td td:hover { background-color: #aeaeae; }

td td td:hover means that when the mouse is over a td tag, that is a descendant (within) of a td tag that is a descendant of a td tag this style is active.

I have read many, many books. It has led me to point where I have become far too picky about those which I’ll like, and not in a way that seems match well with the groupings many seem to make. Worse, I’m not sure how to describe my taste in such a way as to convince the internet to assist me.
My experience has taught me, though perhaps not well.

I enjoy the fantastic, to distract me from a familiar world. I hope for a certain moral ambiguity, not just for itself but for the way it enforces greater believability in characters – especially antagonists. I am so very opposed to the idea of good versus evil.
I strongly dislike prophecies, especially as contrivance to propel the plot as they so often are. In general, I tend away from wars and politics. I find them boring and the sides often unrelateable or unrespectable. An unexpected conclusion can be amazing.

I’m sure many people must share my taste, so maybe I can help them and they can help me in turn. That or better, I can at least provide a list of books I’ve read recently and enjoyed just for something to post.

In no particular order save that which they came to mind (which I suspect may correlate to time elapsed since reading), I present to you:

A book for any occassion (that involves reading one of these books)

Noise: A novel by Darin Bradley

Two friends prepare very rationally for the zombie-less apocolypse. I could respect the reasoning behind every decision they made and every action they took.

The Reapers are the angels by Alden Bell

Zombies flow through the streets with the sun, but at night dream of better days when flesh was abundant and humans were surprised.  This isn’t the average zombie story. The protagonist is a girl  born after their rise, and the zombied world is all she knows.  None of this boring and usual holing up to wait it out, hoping for the world to go back to normal. It is normal to her.
After reading the first page, I thought I would hate this book. It was actually really good.

Sharp Teeth by Toby Barlow

People and jobs and dogs and love. Easy to read and different and good.

Six bad things by Charlie Huston

The second of three or four. I read it first, as I sometimes do, and think it stands best alone. Full of action and crime and even bits of mexico.  Quick and easy to read.

Anathem by Neal Stephenson

It took a while to get into, but I was soon captivated. I remember reading it during the night over pizza, after long days spent walking the streets and parks of San Francisco.

Shadow & Claw: The First Half of ‘The Book of the New Sun’ by Gene Wolfe

This and all the books that follow. It takes place in a future so far distant. Detailed, and vivid, and surreal at times. Intricate with layers and beauty and characters and stories. I’d like to read it again soon I think. More difficult a read than the former entries, but more rewarding for it.

The Crying of Lot 49 by Thomas Pynchon

Strange and surreal, but that can be good. More difficult a read than a few of the formers.

So those are the books I’ve enjoyed most recently (ambiguity intended).  There have been many more in the past, but that was long ago.   I’ll leave them but for two that come to mind.

The Diamond Age: Or, A Young Lady’s Illustrated Primer by Neal Stephenson

My favourite.

Chasm City by Alastair Reynolds

Awesome if you’re down for some noiry science fiction.  Good if you’re not.  One of my favourites.

Last Game Demo Festival (GDF4, if i’ve decremented correctly) I thought up a neat but simple game idea, and my implementation was truly terrible. The result? A submission known as Worst Game Demo Ever (WGDE) which shames me even today.

The problem was of course laziness.
At least some representation of physics was important to the design, and I had a very specific use of sound in mind. Without those it wasn’t so much a game demo, and very much wasn’t the one I’d intended.

I tried again with GDF5, but decided to try a physics library and settled on Box2d for flash. It wasn’t as difficult as I’d expected! I’m happy with how using it turned out. There were some strange issues that were almost definitely due to my misuse of the library, but avoidance solved those as it does most things.

In order to add a certain potential for complexity, each x position was to play a different note on collision. I totally (sorta) accomplished this using frequencies, sine waves, and the SampleDataEvent. For consistency in representation, the sound generated is stereo – loudest on the side it’s closest to (this is not the case in the example below).
Click the grey box below and then hit keys to play sounds:

Once sounds and physics were basically implemented, I added the import game-elements including and consisting solely of an ability to accrue points. The point system works as follows:

	var coeff = 1;
	var bonus = 0;
	var base = 10;
	switch( e.value ) {
		case 2:
			coeff = 1.2;
			break;
		case 1:
			coeff = 1.4;
			break;
		case 0:
			coeff = 1.6;
			bonus = 5*(++explosionChain);
			if ( ballPool >= maxBalls )
				ballPool++;
	}
	var p:Number = base*coeff+bonus;
	points += p;
	dispatchEvent( new GameEvent( GameEvent.SCORE_CHANGE, points ) );
 
	// Make it harder
	if ( points > 25 ) {
		maxBalls = 2;
	}
	if ( points > 100 )
		maxBalls = 3;
	if ( points > 200 )
		maxBalls = 4;
	if ( points > 350 )
		maxBalls = 5;
	if ( points > 600 ) {
		maxBalls = 6;			
	}

Pretty simple! The more times you hit a ball, the more points you get. If you eliminate a ball, you get a bonus proportional to the length of your elimination-chain (the number of balls you have eliminated in a row).
At certain score levels, your number of maximum balls in current play increases. If the number of balls in the ball pool is greater than or equal to that value on an elimination, a ball will be added to your ball pool. This is done so that players can’t simply eliminate the last one ball over and over.

So that is Chromatic Restitution! It’s closer to what I’d wanted, and I am happy with the result.

Of course there are some things I wish I’d added but forgot with the distraction of ever decreasing distance to deadline. Additional sound events would have added texture: wooshes when you miss a ball, some sort of triumphant ring when you eliminate one – that sort of thing.
Particles or some other animation on elimination, or even bounce (sparks) would have been nice. In general more colours, lights and sounds and movement. Casinos have taught me people love those things.

Karl added an OpenID thing to the GDF library. I attempted to add it to the GDF Overlay prior to my submission, but failed and was too tired and confused to worry about it. That would have been a nice addition as well.