Knowing what's on your page

So in work the other day I was asked to help a colleague with an interesting error he was experiencing. In IE he would find on usually the second page load of the site IE would bomb out with an exception: "Internet Explorer cannot open the Internet site", "Operation aborted".

Now I had seen this error before and usually it was down to people forgetting or even not knowing that they had to wait for the DOM to finish loading before trying to fire off JavaScript that manipulates or uses the DOM.

Of course most of us know we can solve this by using event listeners to attach functions to load on the window.load event or my personal favourite by using some sort of .onDOMReady method. Just like the one in jQuery or YUI.

Now in this case it looked like my colleague had set up his JavaScript properly, it was using the YUI onDomReady so this wasn't the issue, so where was the problem. We ended up turning to his JavaScript JSLint'n it to see if there was something I had missed but still the code eventually validated and we still had the IE error.

So we scratched our heads and then by chance I noticed that the page with the error had a flash movie embedded into it. Now I'm very much in the camp of not liking how many developers embed flash into a page and I always use UFO (Unobtrusive Flash Object. It was at this point my colleague mentioned that he was also using UFO after seeing me use it in a few projects, as it allowed him to put alt content in place for non Flash peeps. It was at this point I realised what had happened.

In case your not fully knowledgeable on UFO, "UFO is a DOM script that detects the Flash plug-in and embeds Flash objects (files with the .swf extension)." What you can then do is replace the contents of one Div Container, say one which contains alternative content for non flash users, with a Flash object. It does this using JavaScript and I find it to be the only way of allowing flash on any sites that I work on.

Now as this JavaScript manipulates the DOM, i.e remove the contents of our Flash Div and then put our Flash object into it, it must run once the DOM is ready otherwise we run the risk of trying to manipulate the DOM before it's even ready. This is what our page was trying to do.

Now I mentioned earlier that my colleague had wrapped his JavaScript functionality into a onDomReady, now what he didn't check and I initially missed was what else was in the page and what other JavaScript was loading. In this case his new functionality was causing the page to load a little slower which meant that the UFO code, which wasn't wrapped in a nice onDomReady, was firing before the DOM had finished loading. Such that the Flash DIV wasn't actually available at the point that the UFO code was trying to run.

So we simple moved the UFO method call into our onDomReady function and we were sorted. This example clearly shows that especially when writing JavaScript you need to be aware of what else is on your page and in particular what else is interacting with it. Before writing some JavaScript that does X Y and Z take alook at the page or even site and see what else is running / loading. Not only will this allow you to ensure your code doesn't break or break anything else but you will also find if there is some code you may want to reuse.

For example I often find myself writing JavaScript that uses the YUI library as this is what i have used most however recently I was writing some new functionality for a site and started to use YUI as its what I use most, got the functionality working on my example page, then went to put it into the site and found that it was already using JQuery. I then had to go back and quickly change my code so that it used JQuery instead of YUI as using more than one JavaScript library in my opinion is stupid and means that the end user has to download far more and it will end up with page load times being sacrificed.

So when writing JavaScript ensure you know whats going on in your page before writing your code, otherwise you may end up with a situation like my colleague did or you may end up re writing you code like I did. And you may find that your work load is actually reduced as you may be able to reuse code that's already in the page.

Whose Problem is it anyway?

As a developer I on a daily basis make assumptions. These assumptions often vary from whether some sort of functionality is required or if SQL is the best database for the job, or if IE supports a JavaScript event or CSS selector. Now the problem with this is that sometimes our assumptions are wrong. For Me this has happened Multiple times in the last few days, in one case I had assumed that IE understood the 'onChange' event and the ‘target’ DOM attribute. Sadly this was not the case and as a result a JavaScript script I had made only worked in FireFox. This then lead to me wasting another hour rewriting the code so it worked in IE. The issue for me was that IE treated ‘on Change’ events on input fields as ‘on blur’ which lead to the event listener never firing the attached code. Also IE has the ‘original target’ attribute and not ‘target’, most annoying.

Who's to blame?

So whose problem is this? Me as the developer? lE for not supporting all DOM events and properties ? FireFox for supporting the W3C spec? Or even the end user for using a browser as buggy as IE? Of course the problem really lies with the developers. In this day and age it's our job to be aware and able to cater for browser inconsistencies. It's part of being a good developer, and it’s what we’re paid for. We should not rely or make assumptions on how something should work, we should spend a little extra time to ensure our code is consistent and cross browser compatible.

What can we do

In my opinion, check for browser inconstancies should be part of our development cycle. We should try to foresee these issues and ensure appropriate action and code is written to handle unforeseen circumstances. Even if we just catch the error and report in a friendly way that this functionality won’t work. The same principle should be applied to data, all too often we assume data will be neatly given to us in a clean format and that foreign keys are nice int key values so we can perform simple look ups or key bag techniques. This isn't always the case, especially when working with older systems or other developer’s / companies that have a different coding standard than your own. The key to working with data is to know your data, I have touched on this before when I was writing about my Google Data code, unless you know what data you are going to receive and use within your application and how you can use it, your application will never stand the test of time. So what this really comes down to is that as developer's we must stop assuming and check web browsers behaves as we think it should or does. We must check that any data we use will always be in the format we expect, and we must ensure we document our code. If we don’t document our code other developers that may have to / want to use our code won't have to mane assumptions about how our code works and will be able to concentrate on things that really matter, coding, not bug fixing!

Return of the Flash Object

Well today I had another run in with multiple flash objects within a page of a site. However today it wasn't flagged by using IE6, it was IE7. The problem I was experiencing was, that the page loaded up fine with it's various flash animation, but if you refreshed the page IE7 crashed out. What made matters worse was that it was only happening on one of our IE7 test machines, annoying, at this point I knew it had to be down to the version of flash. This test machine was using Flash Player 6 and after some web trawling I stumbled upon the following: If you are running Internet Explorer and Flash Player version 6.0.21, 6.0.23, or 6.0.29, the browser will crash if you call GetVariable or SetVariable (or a number of other methods that are built into the Flash Player plugin). However this doesn't seem quite right, as it was only happening on a reload, I am still puzzled, but for now I have taken the cheats way out. I looked at Adobe's penetration stats of its various flash players and came to the conclusion that flash player 6 is only used by 1% of majorly developed country's. So decided to up the required Flash to version 7 within my UFO detection script, which miraculously cured the bug. But I am not satisfied with this, it is a cop out and a cheats way out. I need to find out whats doing it, I know that if you try to look at the revision numbers of flash player 6 the lower revisions cause the browser to crash, but this should happen on every load, not upon a refresh. So needless to say I am looking into this further, if anyone has any ideas or advice let me know so I can cure this problem and then share the information on here.

A Follow On

After my last post about my woe's with Flash and my misuse of UFO I have just caught up with my blog readings to read the latest on A List Apart. In particular Bobby van der Sluis has wrote a nice article on the various methods of embedding Flash objects. Well worth a read. However the bit i found most interesting is that he is teaming up with Geoff Stearns to create ultimate JavaScript library for embedding Flash content. - SWFFix This looks very good and I will definitely keep a close eye on it.

Flash but not of the Gordon variety

We all like a bit of Flash, not too much so that it ends up taking over your entire page and looking like something hideous from the 90's where we all thought the more flash the better. But just enough to add to enhance your page. This week I have had the pleasure of using flash for some interactive maps and for some animated buttons on a home page. Now the first issue I, and I'm sure a lot of other people, have is how you should embed these flash objects into your code. Now rather cleverly I have just mentioned the two ways, embed or use objects, but this post isn't about the method you use but rather my experience with 's Bobby van der Sluis UFO. Now I have used UFO a few times in the past and never had any problems, in fact to be honest its always been a painless experience. yesterday though proved to me that sometimes things just happen and when they do it sucks :( I managed to find myself in the rather odd situation where one of my pages worked totally fine in Firefox, IE7, Safari and Opera but in our favourite browser, IE6 It totally crashed the browser after loading the header. When I mean crash I mean IE eats your memory alive and consumes as much virtual memory as possible and then chews up your PC and spits it at you. Nice. I straight away knew it was due to the fact I had multiple flash objects on the page and some how it was memory leaking. A few Google searches later and after revisting the UFO site I found this enlightening bit of information.

Q How do I fix a "Line 56: Out of Memory" error, when unloading a page in Internet Explorer using Flash Player 9 and multiple SWFs using ExternalInterface? A This is a Flash Player 9 bug I instantly thought this was the problem as it sounded roughly about right and could easily be transferred on to my issue. I implemented the javascript fix and thought off we go lets try this again. One quick refresh later and I was again out of virtual memory and a PC that was as good as a feather paperweight. So back to the drawing board for me, I decided that there must be something daft, lets go through and disable all the flash objects within the page and then activate each one, and see if the problem is specific to one object. Due to the ultimate law that is Sod's law it so happened to be that the last flash file I activated was the one that pushed it over the edge and into the ever downward spiral. To cut a long story a paragraph shorter so that I can go get some sleep I had found a very blatant bug that I should have spotted sooner. Within the ID attribute of the 6'ths flash div container a naughty whitespace had appeared, instead of flashcontainer6 the code had flash container6. Amazingly though was the fact that no other browser was put off by this and ran fine, it was only IE6 that fell on its face. Now to be honest I havn't looked into the matter further to find out why this was the case, my suspicions lie in the way IE6 handles DOM but then as it's using javascript to create the flash object maybe its the javascript engine in IE6 working with the DOM. So take note, if you ever have your IE6 browser crash when trying to run a flash file using UFO, or maybe even SWF, check your ID tags for whitespace!

It's all about the kitchen sink...

Well I came home to find that our friends over at Google have made public their "Web Toolkit". Very exciting news, well so I thought. Now I'm very big on Ajax and I want to see it used more wide spread, infact at the moment im developing 2 Ajax powered applications, one in ASP.Net 2 and one in PHP using the SAJAX. More on those when I get time, the point I'm trying to make is that making the development of such applications easier is almost a God send. So far I have explored the Web Toolkit using the demo's provided over at http://code.google.com/webtoolkit/ and taking a peak at some of the source code. Before I highlight some of the features of the toolkit I need to first and foremost state something that has bothered me since I first read the Official Google Blog.... "Google Web Toolkit (GWT) is an open source Java software development framework". Now with out trying to put a dampener on things does anyone else thing that developing web applications in Java and then compiling it into HTML and JavaScript seem insane to anyone?? I've written many an application in Java but never have i conceived or even given a second thought to writing a website/application in it and then compile it to HTML and JavaScript. However before I give up on Google's Toolkit its probably worth looking into it further and seeing what it can actually do. Enter our Kitchen Sink, the first demo I tried out was the Kitchen Sink which shows off everything. Now I won't bore everyone by going into every aspect in great detail but to give an overview the Google Toolkit does do some cool bits and pieces, I personally liked the way it implements tabs, funky popups that look more like something that should be in a desktop application and the tree structure. Now you may be thinking haven't I seen alot of this before else where, and in the Yahoo YUI library. It's true you probably have but Google has at least in the demo's made it look good and shows how easy it is to do, thus provoking alot of thoughts and ideas from this simple web developer anyway. Now the secret of the Google Toolkit is that it wraps everything up for you, all you will have to do is develop these Web 2.0 apps in Java, all the hard work and headaches to do with browser compatibility is handled by the toolkit's compiler. You can write in classes and be as object oriented as you like. This does sound great, as well as being able to use Eclipse and having a full debugger on hand but I some how feel code ownership and knowing exactly whats going on with ones code is being taken away. Maybe this isn't such a bad thing, if we all start developing better and compliant code maybe our support teams will have an easier job, who knows. As I mentioned earlier at present I have only dabbled with the toolkit. So far I have mixed feelings, learning to develop in Java again will frustrate some but will excite others, a lot of its features many will have seen else where, but the fact remains it appears to be wrapped up very nicely and with the Google machine backing it and it being Open source and all that should mean its kept up to date and any issues that crop up should be resolved swiftly. Before I make my final judgement on this latest offering from the Google machine I intend to spend some time using it, getting to grips with it and developing with it. I'm hoping to be pleasantly surprised and enjoy developing in Java again ...

Four Geeks, a road trip and a conference

Well here I am writing my first post on my new blog. With any luck this new one will be kept upto date and be of use to the world. This weekend the Developer Developer Developer community was holding its fourth conference at Microsoft UK in Reading. 4 of us at New Mind went down on Friday night to be all ready for the conference on Saturday. After a grueling day in work the prospect of a long journey was not welcoming however everyone was in good spirit and after a hearty meal we set off. Now this is where the fun begins :D I brought the works tablet with me and Thom had his new SPV (which Derek was very excited about), a crazy idea of networking these two devices, bridging the SPV's odem to try to get on the net as well trying to access the SPV's built in web server suddenly semmed very appealing as we joined onto the M6. Now sadly after a good hour of faffing with the devices we could only get the wifi network up and access file shares and the tablets web server, tinkering with the SPV's webserver ended up being a no no :( There's always next time. The DDD4 conference was very good, it was my first time at Microsoft and I was very impressed, looks like a nice environment to work in. The hospitality provided by Microsoft was also very good, lots of refreshments and plenty to eat. I attended four sessions and listened to the lunch time grok talkros. Each session trigger some thought proccesses mainly ideas but beneficial none the less. The main thoughts from the sessions were: what an impact using string builder has on .Net performance, i knew it was better but had not seen examples. Ruby on rails is magic but probably not that exciting once you have seen the magic once. The main thing i like about rails is the Database migration stuff, that looked very good and something we could do with in the office. Sarah Blow's session on Web 2.0 although not bringing anything new did highlight how new tech should be used more, having a wiki, blog, podcasts etc should all be brought together and used together rather than a bit here and a bit there. Finally the javascript session clarified objects and how you can bodge namespaces. ! The groktalks were short bursts of interesting tidbits, the MCML stuff looked interesting, the vista speech recognition was very cool and although Thoms was unprepared did highlight a new avenue of web api i hadnt thought about. How jammy was he with winning the MSDN subscription! Overall a good weekend and am looking forward to attending barcamp and the next DDD. Hopefully tomorrow ill finish my template for this blog so it doesnt look so stadard and this week i will post about my recent and current developments with using Ajax in .Net and in more detail in PHP using SAJAX all good fun i can assure you :D