Here is a taste of what I’ve been working on recently:
http://www.aucadia.com
http://lastpiccadilly.com
http://lastnorthern.com
More sites will soon be added to the “Last Tube Back” series.
New Websites
June 17th, 2010The Worst Example of Web Form Validation Ever
November 20th, 2009I make websites. I spend a lot of my time thinking about how to make websites more user-friendly and efficient. As a result of this, whenever I see a website that has an extraordinarily bad user interface it makes me angry. This particular example of eye-watering inefficiency came in a letter from Camden Borough Town Hall (my local council). Read the rest of this entry »
Beware of the & (ampersand) character when parsing XML using PHP’s SimpleXML
November 15th, 2009If you are getting errors like “parser error : EntityRef: expecting ‘;’” when trying to parse some XML using SimpleXML, it could be because your XML file or string contains an & character. Do the following to remedy the situation:
$correct_xml = str_replace('&','&',$problem_xml);
Ajax content, jQuery page transitions and why you should ditch the browser refresh
October 31st, 2009
Down with the browser refresh
I’ve just finished a project I’ve been working on over the last couple of months that was a jQuery-based ajax application without page refreshes. I thought I’d take this opportunity to share some of the problems I encountered whilst they were still fresh in my mind.
If you’re thinking of making your own jQuery online app I’d recommend trying out the ‘no refresh’ method. Once you’ve got it working, you’ll wonder how you’ve managed to cope so long with all these page refreshes, and each time somebody else’s site forces your browser to refresh, you’ll throw up a bit in your mouth.
In my humble opinion, asynchronous data transfer is the future and soon it will be very unusual to have your page refresh every time you want to see new content. Browser refreshes are clunky, ugly are an unnecessary interruption to the user experience flow.
With jQuery and ajax ruling your content you can have:
Restoring conventional page navigation to your javascript application with jQuery history plugin
October 1st, 2009I’m not sure how, but my jQuery application suddenly got very complicated. One minute I was adding cool onmouseover effects and then BANG I’m inserting new elements all over the place and I have to look into heavy compression just to get the thing to download this side of the apocalypse.
Browsing through my application is a breeze. All the links are rewired to AJAX requests with smooth transitions and lots of slideUp-and-downs. There’s one glaring hole that might just bring this happy user experience down quicker than a Lehman brother wearing Iron Boots.
Whenever my lovely users click ‘back’ on their browser they get taken back to the obscenity that is the non-standards-compliant flashing gif-ridden site they came from, not the last thing they were viewing on my site. And if he or she clicks ‘refresh’ the application state goes back to the original and my user has to navigate back to the page he or she was viewing all over again. What a knightmare.
The browser navigation controls – back, forwards and refresh – are a staple of any user’s experience. Of course, being a web developer you will recognise the lack of page refreshes and the changing of page elements and automatically look for site-specific navigation links on the page itself. However, your average user is going to get very confused, thinking their browser buttons are broken or worse – your website is broken.
And it’s not only the user that’s going to encounter problems. If a Google Spider can’t see pages with unique URLs it’s not going to index them. So all I’m going to get on a Google search is whatever is on the landing page, which is just header information and a footer – not very useful. If my user wants to bookmark a page for later, he or she is going to have to start again, before all the AJAX fun began. The list goes on. It’s like building a vast palace with turrets and different wings but neglecting to build any doors. Your guests are going to walk over the drawbridge and marvel at the splendour of your architecture, the complete set of Power Ranger themed bedrooms, yet have no idea how to get there.
Anyway, here’s how I solved it:
Image map rollover effects using jQuery’s MapHilight plugin
August 8th, 2009Update: you can see the finished version of my map here.
So I want to make a big map of europe that hilights the different countries when you move your mouse over them. Initially I thought this would be really easy using a bit of CSS and :hover . . . . no dice. But to my surprise I found out that it’s possible to use an ordinary HTML image map to define some pretty complex shapes, and let’s face it, shapes don’t get much more complex than this.
OK, so it’s possible to create clickable areas in HTML using an image map, but how do I add rollover effects to this? CSS didn’t seem to work so my next port of call was the wonderful jQuery. I found a plugin call mapHilight that takes an HTML image map, and adds some javascript hilighting wizardry to it. You can see a really cool example using a map of the states, this is almost exactly what I want but for Europe. I’m going to try and record everything I do, in the hope that someone else might find this useful, so here goes.
JQuery Image Dimensions
June 30th, 2009Simple code to grab the dimensions of any image on your page. Here’s an example:
Tell JQuery to find out how big this image is by using:
var width = $("#my_image").width();
var height = $("#my_image").height();
spEak You’re bRanes – the pile of steaming faeces that is the BBC’s “Have Your Say” site
March 25th, 2009Working for the BBC’s “Have Your Say” site is a position to aspire to. On the one hand, you are trying to stop the plague of racist, vacant armchair generals spreading their hatewords. And on the other hand, you are trying to promote the independent, unbisased journalism that has made the BBC a household name worldwide.
At least, that’s what you’d think.
Two examples of how this is not the case come in the forms of ifyoulikeitsomuchwhydontyougolivethere.com - “A collection of ignorance, narcissism, stupidity, hypocrisy and bad grammar” that are comments taken from the site, and NewSniffer.co.uk - a site that dsiaplys comments that have been censored, and tracks changes to BBC articles. The ‘Recommended Revisions’ section shows that many article updates have a different agenda to the average typo corrections you’d expect.
8-bit Exeter
March 7th, 2009Here is a short film made for a contest at Exeter University. It’s using a combination of tilt-shift and speedframe techniques, as inspired by the work of Keith Loutit .
A musical paradox:
February 16th, 2009A one man band duet. If two one man bands play together are they still one man bands? A question I’m sure Dick van Dyke would have the answer to. I’ve googled “one man band duet” and can’t seem to find evidence of this ever occuring. So, as soon as I can get my hands on two one man band setups, I’ll post a video.
“God bless you Mary Poppins” ~ Dick van Dyke