Why developing for IE is a royal PITA, part 1: The DOM.

Everyone knows, the DOM is cool, and with it, you can manipulate your pages to do whatever you want!... unless you are developing for IE.

Here's a breakdown of the most common tasks with the DOM, and the typical DOM Methods. For fun, lets color code them as green for fully supported in IE, and red for not fully supported, or not supported at all.

Finding Nodes:
getElementById(...)
getElementsByTagName(...)

Creating Nodes:
createElement(...)
createTextNode(...)

Editing Nodes:
setAttribute(...)
getAttribute(...)

Moving/Copying Nodes:
cloneNode(...)


Managing Events:
addEventListener(...)
removeEventListener(...)

Managing Status:


So, by any chance, did you notice that there are a few of the main methods, that just don't work! Now, we should clarify... some of these work most of the time, but they all fail to some extent. Lets start with getElementById(), as the name implies, it should return whatever it finds, that matches the ID you supply... and it does, but it ALSO returns anything it finds, with a NAME attribute, that matches the ID you requested! [WRONG!]

Okay you say, thats not too bad, well, lets try setAttribute(). This too works fine, as long as you are not trying to set any of the following attributes (they all fail). 'class', 'style', 'for', 'accesskey', 'usemap', 'checked' (on a radio or checkbox field, that has not been appended to the DOM yet), 'type' (on an input field that has already been appended to the DOM), on* (* = any inline event, e.g. 'onclick', 'onchange', 'onkeypress').

...there's much more, but I'll have to finish this post later...

Bugs, Bugs, Bugs:

Every browser will have bugs. But as a developer, some are more annoying than others, as they stall your development process, or cause you to spend a great deal of time trying to solve what appears to be the simplest little problem.

I'm going to use this post, as a starting point, for the "Top Ten" bugs in each browser, that drive developers up the wall in frustration. Feel free to post your own... and We'll revise this list as we go.

Mozilla Firefox

1. The title attribute, is limited to about 60 characters, and doesn't support line breaks.
2. ???
   

Internet Explorer 6

1. The rendering of select lists is on top... of everything! so if you want to float a cool little calendar, or funky menu on top, you're SOL. (unless you hide the select lists, or slip in additional iframe layers underneath your your floating content.
2. ???
   

Internet Explorer 7

1. The button element, is still not useable to this day, because it submits the innerHTML, not the content of the value attribute
   
2. No Javascript on about:blank
3. Colors of PNG images have the wrong gamma
4. onchange doens't fire, on fields where autocomplete is selected
5. onchange doesn't fire, on radio buttons, until you click elsewhere on the page
6. No CSS support for :focus or :active
7. ???
   

Opera

1. ???
   

Safari

1. ???
   

Konqueror

1. ???
   

Feel that you have a candidate for the top ten? Share it! Maybe we've overlooked something.

Essential Web Development Tools (2 of 2):


Alright, so we have all of our Web Browsers installed, now lets stock up on tools to make developing a breeze.

For each browser listed below, I'm going to list the "Essential" extensions/addons that you'll want to pick up.

Mozilla Firefox
Web Developer Toolbar
FireBug
Live HTTP Headers
Colorzilla


Internet Explorer
Microsoft Developer Toolbar
Microsoft Script Debugger
Microsoft Fiddler Tool

Opera

Konqueror

Safari


Yes, there is a slightly heavier set of options available for Firefox. This is not a big surprise since the Web Development community was so actively participating in its design, enhancements, and success.

Essential Web Development Tools (1 of 2):

Before getting into the nitty gritty of Web Development, you need to make sure you have the right tools to make your job quick and easy, so you can spend more time designing, and less time debugging, and searching for information.

The first key, is the Web Browser itself. As a developer leaning towards Web Standards, you'll want a browser, that will do a good job, steering you in the right direction, and helping you stick to the standards.

My recommendation, is to use Mozilla Firefox, as your default Web Browser. There's several reasons why, and I'll get to them later, but it is important to start with a default browser that will give you lots of tools to help you out.

That said, you'll need to install other browsers, (and virtual machines) to test out other systems.

In terms of priority, I would be inclined to follow the list below;

1. Mozilla Firefox
2. Internet Explorer v6.0
3. Internet Explorer v7.0 (currently in Beta*)[update! Its out! go get it!]
4. Opera
5. Safari
6. Konqueror
7. Camino
   

Items 2 and 3 (MSIE) will switch in terms of priority, within ~ 3 months from when it goes live, since it will be distirbuted automatically, most users will upgrade without blinking.




*Well, not Beta officially, as it is at RC1 stage, but for those familiar with its progress, Beta would be the more appropriate term.
(Update! Microsoft says that it will be out this October (2006))

Welcome to the Advanced Web Development Blog.

The plan is to provide an advanced web development blog with a keen focus on web standards HTML, XHTML, JavaScript & CSS. Technology neutral in terms of PHP/ASP/JSP/XML, .Net, ColdFussion, MVC/Struts etc.

Likewise it will be Platform neutral too, since the Internet and all of its users, have the freedom to choose their OS.

It will be a Tell-It-Like-It-Is Blog... if "feature x" in "browser y" is a piece of junk, I'll tell it like it is, and explain why it sucks, and hopefully provide links to the applicable bug tracking systems, to get them fixed ASAP.

Thanks for checking out my Blog.
xyz