Bloggy Hell

TwitThis || StumbleUpon || Digg it || del.icio.us || Reddit

As anyone who has ever received the dreaded Object doesn’t support this property or method error in IE can attest, debugging using everyone favourite browser is a right, royal pain in the heiny. Using Firebug in Firefox really has spoilt us as frontend developers (Hey, what am I talking? These ARE BASIC TOOLS that every other development platform has had since Ada Lovelace was in small britches, but I digress), so what is a cross-platform developer to do?

Little known fact outside of the .NET world: Visual Studio has a complete JavaScript debugger built in, which allows you to set breakpoints, add watches, mess around with variable values and more importantly, gives you better error messages, and actually highlights the line where things went wrong.

1. Download and Install Visual Studio Express Edition (which is free as in beer).
2. Create a new Web Site - call it what ever you like, it’s just a placeholder
3. Hit “Run” (or F5) on the blank problem - a local server should start, and IE7 should load a blank page
4. Change the URL to the page you want to debug. Once the page is loaded the debugger is good to go - in fact, if your page has any errors, Visual Studio will get focus, and politely tell you as such
5. To add a break point, flick back to Visual Studio Express and open the JavaScript file you wish to add the break point to, and then refresh the browser - once context hits the point, you will be able to step through the code.

Whilst still lacking a DOM browser (Firebug Lite might be able to help out with that), this takes some of the fun out of debugging JavaScript IE, from the point of view that it is now actually possible.

TwitThis || StumbleUpon || Digg it || del.icio.us || Reddit

Since I’m trying to milk the Mario Brothers in JavaScript thing for all it’s worth, I’d like to announce part two of my SitePoint article, which gets into the juicy bits - collision engines and physics as well as side scrolling screens. Go forth, read and learn.

TwitThis || StumbleUpon || Digg it || del.icio.us || Reddit

First off, thank to WA government for having the foresight for ignoring the actual birthday of the Queen and making today a public holiday - my couch has been-a callin’. So what has been happening over the past couple of days?

Day 0

After getting in early morning on the Wednesday, I toddled along to Stories for one of their famous egg and bacon rolls with Simon, Lachlan and Nick.  Oh how I’ve waited for that. I could have gone home at this point a happy man, but then there was work to do! Spending the day tweaking my presentation, next it was up to the Kirk for memories of last year (Yes, they still only have five pint glasses) and then on to Port80 Sydney: Wednesday edition. We had a fantastic turnout, with over 80 people - most of which were new faces. Big ups to Clever starfish, radharc and Saasu.com for throwing dollars on the bar. I’m seeing a definate pattern here in regards to free beer.

Day 1

Waking up slightly hung over, I was off to the registration desk, and then the games began. Highlights for me was Dmitry Baranovskiy’s web vector graphics  talk. I’m about to go download raphael and build some stuff - not only if the guy a genius, but his talks are hilarious. Unfortunately, I missed the JavaScript workshop, where I hear Cameron Adams wowed the crowds with a JavaScript drum machine - with visualizations. The final keynote from August de los Reyes tied software and psycology together, something that I think is the crux of what we do. It was also a great talk, although the ads were a little too much to take.

What I learnt:

• Seeing cool stuff is inspiring.
• When giving a presentation, find out about the audience - it’s better to pitch a bit to high than to low.
• Don’t try to squeeze in 2 hours of material into 55 minutes

Day 1.2

Next up was WebJam8. The one big disappointment of this trip is that I didn’t get something entered in WebJam, but having a Web Directions talk to do and a stupid amount of work took priority… Some really cool stuff was shown: Dmitry came third with a live code, that added reflections and animation to images on a web page, Diana came second with a crazy funny fast presentation about governments and bike helmets and the winners, Mr Speaker and Henry Tapia did a awesome YouTube remixer. In a moment of unlike-me-ness, I wentback to the hotel at a reasonable hour…

Day 2

…and for the first time EVER made it to the first session of the second day! So no one can joke that I missed the best talk of the conference (as happened the past couple of years) and I wasn’t dissapointed. Jeffrey Veen is a brilliant speaker, and I wanted to pull my laptop out right there and then and cut some code. This is the sort of stuff that makes these conferences. After lunch, I gave my presentation on OpenID, OAuth and webservices (Available on slideshare here), and I think it went pretty well. The backchannel was only positive, so I count that as a win. Next I headed over to Douglas Crockford for a good old fashioned Computer Science lecture, god that takes me back! Whilst a little dry, and technical (Who am I kidding - I wanted that) it generated some great discussion.

What I learnt:

• Great talks bring in personal experience
• You need to get the audience to think
• Dual monitor Powerpoint never works properly when you need it to

Closing night

With all of the festivities over, it was time to let the hair down at the Shellbourne, for a quick shandy.  Had a debate about designers vs UX experts (We were actually arguing the same point, it turns out), and had many an indepth conversation, including one with Charles from Opera, about webservice brokering. So much so, my plans to build one may now be possible (Huzzah!).

What I learnt:

• Finding random “locals” to go out with doesn’t mean they know where they are going
• Peanuts 2u is actually a brand of salted almonds
• There is a “No redheads” policy in NSW pubs
• Bats are weird and scary

So that was my Web Directions experience in a nutshell! Roll on Edge of the Web - only five weeks until we get to do it all over again!

TwitThis || StumbleUpon || Digg it || del.icio.us || Reddit

Unobtrusive JavaScript does for JavaScript what CSS did for HTML design. Separating the design and business logic client side means better re-use and compatibility.

To make a truly unobtrusive site, you should start with a base, non-JavaScript version of the site, and then add functionality dynamically. One of the issues with this is quite often you are left with elements that are required for HTML-only functions, but not for the JS version. Obviously, it’s easy to traverse the DOM tree and hide elements that not required like this:

var elementToHide = document.getElementById('hide_me');
if(elementToHide) {
    elementToHide.style.display = 'none';
}

but this can be pretty slow if you have lot of elements to hide. Sure, you could use XPath, but it isn’t supported in many browsers.

CSS is pretty darn quick when applying styles (well, you would hope so - that’s what it is designed for), so by dynamically including a CSS file via JavaScript we can hide (and show) elements really quickly. It’s all pretty simple:

1. Create the style sheet (We’ll call it /stylesheets/css.js)
2. Set up the desired styles in the style sheet as you would any another CSS file
3. Drop the following code is to a JavaScript file and include it in your header

function unobtrusiveCSS() {
    head = document.getElementsByTagName('head');
    head = head[0];
    link = document.createElement('link')
    link.href = '/stylesheets/js.css';
    link.setAttribute('media', 'screen')
    link.setAttribute('rel', 'stylesheet');
    link.setAttribute('type', 'text/css');
    head.appendChild(link);
  }

  FastInit.addOnLoad(unobtrusiveCSS);

Now, you might have noticed that I’m using the FastInit library (written by the ever so talented Andrew Tetlaw). Because we are modifying the DOM, we need to wait for it to load before we can append anything. I could have used window.onload, but that would defeat the purpose, as we would have to wait for all of the images on the page to load, negating the speed up we would get.

The FastInit library will fire the JavaScript as soon as the DOM is loaded. (Go to the site to find out how it works - it’s quite ingenious), At the end of the day, you would need to a library like this regardless of whether you use the CSS include hack.

Caveat: Another way of doing it would be to use document.write, which would eliminate the need for an external library, but hacks like that make baby jeebus cry.

TwitThis || StumbleUpon || Digg it || del.icio.us || Reddit

What is a developer to do with all of that spare time between 1am and 3am? Write a JavaScript platform game of course!  I’ve been sitting on this for the last couple of months, waiting for a good time to release it, but as this guy just released his (freaking awesome) canvas element version, I didn’t want to be out done. So as a proof of concept of how far you can push semantic HTML, CSS and JavaScript, I present to you: JavaScript Mario Brothers!

• The level is built using plain old HTML and CSS. Using absolute positioning and class names give each sprite a location and look (Yes, I know it should be in a separate CSS file - it was just easier for debugging at the time), so no cheating with the canvas element
• Sprite actions are determined by class names - so all divs with the class name koopa-sprite instantly start acting like koopas.
• The collision engine and animation is all done via un-obtrusive JavaScript (Except for a few bits that I couldn’t get running after window.onload for various reasons).

The JavaScript is based on the Prototype JS library, and the level is a complete write from scratch (which is why it isn’t quite correct), but as a proof of concept in both game development and pushing the limits of JS, I think it’s pretty cool.