Turns out Exceptional.io has a third-party PHP client that is incredibly simple to set up, even using WordPress: exceptional-php. Here are the steps I used to set it up:

1. Sign for for a free 1-month trial on Exceptional.io, and retrieve your API key from the App Settings.
2. Checkout the exceptional-php repo somewhere in your WordPress installation, I dropped in the root folder.
3. Now we need to include and set up the library. To do this we are going to hook into the ‘init’ action with the code below. I placed this in my theme’s functions.php, but  feel free to place this anywhere whether the add_action function is available (in a plugin for example):
   

   add_action('init',function(){
   	require(ABSPATH . '/exceptional/exceptional.php');
   	Exceptional::setup('YOUR_API_KEY');
   });

4. That should be it!

I recommend you find a way to produce an error on you local or development setup, Exceptional will record the error regardless. Once Exceptional tracks the error, you should get an e-mail for each new error message, which you can follow up on the online interface which provides a trace and list of sources for the error.

NB: I have only tested this with WordPress 3.3+, but I imagine the PHP version matters more.

I spent 6 weeks in June and July building an Android app for me alma mater, and it is finally available on the Android Marketplace. A great learning experience (layouts and style in XML and plenty of Java) but I’d have to say that I would be comfortable doing one again but I’d love to explore other options.

I’ve also moved backed to London after an incredible three years at University and was lucky enough to land a job at a great company in London called Forward. They have a great mentality and I have been pushed every day to learn something new, namely technique at table tennis on most days as my form is fluctuating (curses!). In terms of actual work it’s been mainly internal, but we launched a new version of the developer’s site at called Forward Technology complete with our own curated blog. I’ve used Ruby, Sass and Haml almost exclusively since I got (no more PHP for me) and even managed to write a post of my own post on responsive grid systems.

So its been a hectic couple of weeks, but I’m going to have some interesting points to write about over the coming months as I learn more so stay tuned.

I’m still down in Canterbury fulfilling some exciting contract work (more on that soon) till the end of July, but I’m looking to move back to London and back into the web development circuit. I’ve sent my CV around already and there’s some exciting prospects, here’s hoping any interviews I get go well.

And UR!KA? Well, the plan had been to launch this weekend, I’m currently writing a Safari extension to complement the Chrome version, but I am in fact moving out of one house into another for July, so tidying and packing are taking up most of my time this weekend. Just to wet your appetites though, here’s a preview of said Chrome Extension in action:

Video Tutorial 3: Chrome Extension from Luke Williams on Vimeo.

For those who can’t view that, here’s a screenshot and link to the full link on Forrst:

I’ve been meaning to use some sort of HTML5 boilerplate for a while, but most seem so heavy or excessive for something like this. That was until I came across Skeleton, a stripped down starting point that was just what I needed. My favourite feature is the grid system is kept entirely separate from the reset/base CSS file (which I in fact dropped), meaning you have all the fun with a frankly awesome grid system without having to deal with inheriting unwanted styles. The naming a nice touch, allowing class combinations such as ten columns offset-by-two, and the default media query holders were such a great help, covering pretty much every base I needed.

Now to start sending this out! And to convert it to a PDF format for those who enjoy the old school.

I was struck by an idea: recreate this button using only markup and CSS3, no images allowed! I knew from spending basically my entirely adult life studying web development a button of this design was perfectly possible: multiple CSS3 gradients for background, use of outline and border for the, well, borders, CSS triangles for the arrow, and box-shadows for the flourishes.

The result of a few hours well spent can be seen in the result tab of the iFrame below. Whilst not a perfect match due to typefaces, the image version and the markup version are pretty much identical. This shows just how powerful CSS3 can be (it even degrades nicely in IE).

One downside is the button is a little markup heavy due to the arrow section. This could easily be remedied if you included this as a background image if you ignored the ‘no images’ rule, but otherwise the markup isn’t that obtrusive.

UR!KA is a social inspiration web application built as part of my final year at the University of Kent, worth 30% of my degree. A year in the making, UR!KA is the best place on the web for creatives to share inspiration. Users can upload and crop images, tag with categories, create moodboards and much more.

Built using CodeIgniter and the jQuery libraries this was an education in time management and learning how to build a large scale web application.

Not the most polished piece of work but the focus is on utility. The most difficult aspects were deciding which deprecated elements to flag forapparently b and i tags are no deprecated?! and deciding what level different warnings should be, such as a missing summary on a table element or missing title’s on links. I should really add that the diagnostic takes into account best practice and accessibility as well, hence the latter being an error level rather than a warning.

Ruby on Rails app is in the works. Oh yeah and that UR!KA thing too.

1) Self-executing anonymous function

This is pretty much a basis for quite a few things in this list. If you are at all familiar with programming, the title should make sense. If not, what this means is a nameless function which is defined and calls itself immediately after its definition ends. The basic definition is:

(function()
{
// code here
})();

There are two important points of interest here. Firstly, the brackets around the nameless function definition. This sets the function alone with a bubble as such, so no name is needed. I assume this is the same as assigning a function to variable and then calling it as somevar(); later. The second bit is the (); immediately after these brackets. This calls the function immediately after it has been defined, so this runs as soon as the browser’s engine. This is what jQuery uses to wrap around almost it’s entire library code.

But how is this useful you say? Well its an important part of the next few examples, so read on to find the use

2) Safely capture safe variables within the scope of your function

Apparently, it is perfectly possible for a user script to pop this at the top of you page

undefined = true;

Imagine the havoc that would cause a JS script! So what we do is was pass our own version through this large anonymous function.

(function(window,document,undefined){
// code
})(this,document);

This allows to know for certain that no malicious user scripts can mess with our window, document or undefined methods. Consequentially, this also helps with compressors and reduces load on the native JS system since we have a local snapshot of important and oft-used objects within our library or function:

(function(a,b,c){

})(this,document);

3) Conditionals and self-executing anonymous functions

Consider:

var base = null;
var fake = false;
var head = // header element

if(document.getElementsByTagName("base")[0])
{
	base = document.getElementsByTagName("base")[0];
}
else
{
	fake = true;
	base = head.insertBefore(document.createElement("base"));
}

We’ve all seen something like this before, where we have a conditional were the alternative option is two fold and we need some calculation. Well with the self-executing function we can make this a bit neater (depending on your preference) but processing the alternative option in said function.

var fake = false;
var header = // header element

var base = document.getElementsByTagName("base")[0] || (function()
{
	fake = true;
	return head.insertBefore(document.createElement("base"));
})();

Now for something completely different.

4) Nested ternary usage

Sometimes a switch statement just won’t do. Sometimes each of your multiple cases requires a slightly different test. For example consider this:

if(data === "true")
{
	data = true;
}
else if(data === "false")
{
	data = false;
}
else if(data === "null")
{
	data = null;
}
else
{
	data = someFunc(data);
}

I personally never had a problem with this sort of layered if/else if each case has complex logic to work through. But when the task at each case is pretty simple it seems that this could be streamlined. And this is what jQuery source taught me:

data = data === "true" ? true :
data === "false" ? false :
data === "null" ? null : someFunc(data);

Of course this wouldn’t work for complex conditionals but for the meticulous programmer out there this looks quite neat.

5) Live vs Static Nodelists

This is an interesting feature of Javascript I never actually knew about. When you use the document.getElementByClass,document.getElementByTagName,document.querySelectorAll etc, you are returned a Nodelist. However, depending of which function you use, you might get a LIVE or STATIC nodelist.

Consider:

var all = document.getElementsByTagName("div"); // all is 4 at the start

while(some_condition)
{
	// loop adds 2 more divs
}

document.write(all); // would now write 6! updates automatically and is not a snapshot.

On the flipside, document.querySelectorAll(“div”); returns a static nodelist so it would remain 4 when additional divs were added. Clever Javascript, very clever.

Hope that was a fairly informative read, if you have time I definitely recommend watching the videos.

I’ve learnt a great deal of things during the development of this project. Time management skills, the importance of researching every single design/technological decision, how to build a Google Chrome extension from the ground up. But probably the most important thing I’ve learnt is the importance of being thorough when developing and not cuttings corners. The amount of times in these latter stages I have had to go back and modify old core code was not to be underestimated, but most of the time, due to my meticulous dungeon-crawler-esque coding styles of thinking of every possibility, everything stayed together. For the most part.

Since I’m getting to the end of my university life now I should really begin job hunting, so expect some wholesale changes on the site while I prepare it for CV mode!