This is good news as it shows that Microsoft are no longer looking to support the past. It’s a big deal for them to take this decision and I feel that this is a clear sign that they are supporting web-standards moving forward.

This is also a great result for the few people that stood-up and constructively criticised the initial announcement. Their voice was heard.

One paragraph made me think of the DOMContentLoaded Problem:

“In practice, setTimeout() tells the browser to invoke the function when it has finished running the event handlers for any currently pending events and has finished updated the current state of the document”

I thought to myself; what if you apply that to a situation where you don’t want to wait for window.onload to fire and use it as a way of emulating DOMContentLoaded.

So I remembered this today and set about creating a noddy little test to see if setTimeout would behave in the way that it sounded like it should do.

I found that setTimeout with a delay of zero milliseconds calls the function without waiting for other resources to finish loading on most modern browsers (IE6/7, firefox and Safari). The only fly in the ointment is Opera. However Opera (Like Mozilla) does have DOMContentLoaded, so it makes sense to use DOMContentLoaded for both Mozilla and Opera.

function DOMReady(f){
  if (/(?!.*?compatible|.*?webkit)^mozilla|opera/i.test(navigator.userAgent)){ // Feeling dirty yet?
    document.addEventListener("DOMContentLoaded", f, false);
  }else{
    window.setTimeout(f,0);
  }
} 

Try the demo and see what you think.

In Conclusion

setTimeout seems to be another possibility for working around the DOMContentLoaded issues. To be clear however, I’m not saying this is the most bombproof method and it certainly warrants further testing before being considered as a trusted solution.

Any thoughts and suggestions welcome.

Related Reading

• Further testing on this idea from Jonathan Snook
• The window.onload Problem – Solved!
• window.onload (again)
• DOMContentLoaded for IE, Safari, everything, without document.write
• IEContentLoaded

Note: if you don’t want to go to the lengths of creating your own Safari Standalone Michel has provided ready made apps for download.

Although these versions appear (from my limited testing) to work fully as expected please do bear in mind that this isn’t 100% the same as having the original version of Safari (see the comment by Alex Rosenberg on Michel’s site).
Michel has done a great job providing these standalone versions but I would ideally like to see Apple go to the lengths of providing “official” standalone Safari builds for developers.

Additional points to note

I renamed the binary to safari-2.04 instead of TrueSafari and I edited the shell-script linked in the instructions accordingly. This is the same process Michel used to create the ready-made apps available from here: http://michelf.com/projects/multi-safari/

To show the version in the taskbar you can change the appropriate key in /Applications/Safari-2.04.app/Contents/info.plist from this:

<key>CFBundleName</key>
<string>Safari</string>

to

<key>CFBundleName</key>
<string>Safari-2.04</string>

An issue I came across with the standalone that I had built was that one of my colleague’s machines failed to load the standalone app. Console reported the following:

dyld: NSAddImage() error
dyld: Symbol not found: __ZNK3KJS6JSCell9getUInt32ERj
 Referenced from: /System/Library/PrivateFrameworks/JavaScriptGlue.framework/Versions/A/JavaScriptGlue
 Expected in: /Applications/Safari-2.04.app/Contents/MacOS/../Frameworks/JavaScriptCore.framework/Versions/A/JavaScriptCore
/System/Library/PrivateFrameworks/JavaScriptGlue.framework/Versions/A/JavaScriptGlue

To fix this I dropped a copy of my /System/Library/PrivateFrameworks/JavaScriptGlue.framework (prior to 10.4.11 update) inside the app in /Applications/Safari-2.04.app/Contents/Frameworks/ and this resolved the issue.

Lastly and purely from an aesthetic point of view I decided to use a bronze Safari icon so that the three versions of Safari on my machine will be represented as follows:

Safari 2.04

Bronze

Safari 3

Current

Webkit

Gold

You can download my icon as both an icns file and the icon applied to a folder here: http://muffinresearch.co.uk/downloads/safari-bronze.zip

If you’d like to do something different with your Safari icon, Ian lloyd has some nice instructions on how to modify app icons

IE6 doesn’t have any problem with the same code which is interesting and suggests that this bug has been introduced into IE7.

I also noted that the same problem doesn’t exist when the page is rendered in quirksmode.

Figure 1: IE7 See the horizontal scrollbar.

Figure 2: IE6 No problem

I published some instructions for updating your extensions to work for 1.5 when that was launched so I though I’d update those instructions for Firefox 2 in case it’s useful to one or two people.

Increasing maxVersion to allow extensions to work in Firefox 2.0

1. Download to your desktop the extension you wish to get working
2. Rename the .xpi file to .zip
3. Open the zip file
4. Either unpack the install.rdf file or open it for editing within your zip application if that is supported.
5. Change the maxVersion to 2.*
6. Repack the zip file or update the zip if you are editing within your archive app (should happen automatically – double check the file has been updated)
7. Rename the .zip file to .xpi
8. Test the extension. To install drag the xpi file onto an open window.

In due course the developers will no doubt release new version in which case these temporary hacked versions will be overwritten by the automated update process. However if the developer doesn’t use this method you will need to manually check their sites for updates.

Feel free to drop a comment linking your favorite extensions that you have fixed to work in Firefox 2.0.

Update: AlastairC mentions in the comments below, the possibility of using the local install extension to be able to override the maxVersion on a per plugin basis. Sounds well worth checking out.

NB: I am aware that there is a way to bypass maxVersion checks on extensions using the nightly tester tools, but I personally would avoid this and prefer to fix each extension individually as this gives more control.

I was amused to find when I visited the O2.co.uk website with camino, an alert box popped up saying “Your browser is out of date. Would you like to upgrade it now for a better user experience? (Highly recommended)”.

Of course I clicked “ok” as I am always up for a better user experience. I was sent to this page: http://www.o2.co.uk/browserupgrade?check=Netscape which offered me a shiny new version of netscape to replace my outdated Camino. The icing on the cake being the message, “There’s no version of Netscape 8 for mac!”.

Here’s the code that prompted the upgrade; a choice piece of hard to maintain browser detection.

function browserUpgrade(){
	setCookie('alreadyVisitedOnce','yes');
	var NS, IE, aaa, OP, OP34, Moz, Pho, Saf, CW, PDA, LX;
	var NSVer, IEVer, OPVer, MozVer;

	Pho = navigator.vendor == "Phoenix";
	Moz = navigator.vendor == "Firefox";
	NS = (navigator.appName == "Netscape") && !(Pho) && !(Moz);
	IE = navigator.appVersion.indexOf("MSIE")!=-1;
	OP = navigator.userAgent.indexOf("Opera") > -1;
	Saf = navigator.userAgent.indexOf("Safari") > -1;
	CW = navigator.userAgent.indexOf("DigExt") > -1; //Is the browser a Carphone Warehouse?
	PDA = navigator.userAgent.indexOf("PPC") > -1; // Is the device a PDA?
	LX = navigator.platform.indexOf("Linux") > -1; //Is the OS platform Linux?
	// OD = navigator.userAgent == null; // OD = Old Devices

	if (NS) {
		if (navigator.vendorSub == null) {
		navvensub = navigator.appVersion;
		NSVer = navvensub.substr(navvensub.indexOf(" ").length, 1);
		NSVer = parseFloat(NSVer);
		} else {
		// using vendorSub object, as appVersion comes out as 5.0 (from Mozilla/5) also if it is NS 6 or NS 7 !!!
		navvensub = navigator.vendorSub;
		NSVer = navvensub.substr(navvensub.indexOf(".").length, 1);
		NSVer = parseFloat(NSVer);
			}
		}

	if (Moz) {
		//MozVer = parseFloat(navigator.vendorSub);
		/*this used to be fine previously. FireFox uses different ways to define the vendorSub dependin on the release.
		FireFox .93	  = 0.9.3
		FireFox 1.0PR = 0.1
		FireFox .93   = 1.0.3
		*/
		MozVer = navigator.vendorSub.split(".");
			if (MozVer[2] == null) {
			MozVer = MozVer[0]+MozVer[1];
			} else {
			MozVer = MozVer[0]+MozVer[1]+MozVer[2];
			}
		}

	else if (IE) {
		navag = navigator.userAgent;
		IEVer = navag.substr(navag.indexOf("MSIE ")+("MSIE ").length, 4);
		IEVer = parseFloat(IEVer); 

		if (OP) {
			OPVer = navag.substr(navag.indexOf("Opera ")+("Opera ").length, 4);
			OPVer = parseFloat(OPVer);
			}
		}

	//if ((NS) && !(Saf) && !(LX) && (NSVer < 7)) {
	if ((NS) && !(LX) && !(Saf) && (NSVer < 7)) {
			redir("Netscape");
	}

	if (Pho) {
		var redirectURL = "http://www.o2.co.uk/browserupgrade?check=Mozilla";
		if (document.images) window.location.replace(redirectURL); // if Netscape
		else window.location = redirectURL; // else if not Netscape
	}

	if (Moz) {// in case browser is Mozilla Firefox
			if (MozVer<103) { // and navigator.vendorSub is less than 1.0.3
			redir("Mozilla");
			}
	}

	else if ((IE) && !(CW) && !(PDA) && !(LX)) {
		if ((OP) && ( OPVer < 8 ) {
				redir("Opera");
		}
		else if(IEVer <= 5) {
				redir("IE");
			}
		}
}

Update: I’ve updated the mac instructions – 27/10/06

Instructions for mac (OSX 10.4+ only):

Note: To save yourself the trouble of carrying out steps 1-9 you can download a custom version of Portable firefox with the script fix and the Firefox 1.5.0.7 already inside the Portable Firefox.app. All you need to do then is run it and copy your profile across as per steps 10-14.

1. Back-up your current firefox 1.5 profile found in /Users/<username>/Library/Application Support/Firefox/Profiles/xxxxxxxx.default first.
2. Next download portable PortableFirefox_2.0_en-US-OSX_r4.0 from http://www.freesmug.org/portableapps/firefox/
3. Download Firefox 1.5.0.7 from http://releases.mozilla.org/pub/mozilla.org/firefox/releases/1.5.0.7/
4. Open the PortableFirefox_2.0_en-US-OSX_r4.0.dmg and drag the Portable Firefox folder to your Desktop.
5. Open Firefox 1.5.0.7.dmg
6. Open the Portable Firefox folder on your desktop.
7. Right Click Portable Firefox.app and select “Show package contents”
8. Copy the the Firefox.app from the mounted Firefox 1.5.0.7.dmg into Content/Resources/ of the Portable Firefox.app package.
9. Next edit the script file and comment out (with a #) the line quitapp at the bottom of the file
10. Run Portable Firefox.app
11. You will be asked do you want to copy an existing profile. Click copy, and then select the 1.5 profile to be copied.
12. Once this is done successfully firefox 1.5.0.7 will open.
13. Once you are happy quit this version of firefox and drag the Portable Firefox.app into your applications folder. If you want by all means rename it to Firefox.1.5.app
14. Next download and install firefox 2.0 in the usual way by dragging the firefox.app into applcations overwriting the old firefox.app If you want to be super careful you can rename the 1.5 firefox.app first so that it make rolling back easier (you did keep a copy of your profile right?) .

Instructions for mac:

1. Back-up your current firefox 1.5 profile found in /Users/<username>/Library/Application Support/Firefox/Profiles/xxxxxxxx.default first.
2. Next download portable firefox (Portable Firefox_1.5.0.7_en-US-OSX_r3.0.dmg) from http://www.freesmug.org/portableapps/firefox/
3. Open the .dmg and drag the portable firefox folder to your applications directory.
4. Copy the 1.5 profile you just backed up to /Applications/Portable Firefox OS X/app/
5. Rename the profile directory in /Applications/Portable Firefox OS X/app/
6. Rename the profile you copied to profile
7. Test the standalone firefox 1.5.0.7
8. Next download and install firefox 2.0 in the usual way by dragging the firefox.app into applcations overwriting the old firefox.app If you want to be super careful you can rename the 1.5 firefox.app first so that it make rolling back easier (you did keep a copy of your profile right?) .
9. Finally Drag the “OPEN Portable Firefox OSX.app” from /Applications/Portable Firefox OS X/ to your dock to run the standalone.

Instructions for PC:

1. Backup your current profile at C:\Documents and Settings\<username>\Application Data\Mozilla\Firefox\Profiles\xxxxxxx.default
2. Download portable firefox from http://portableapps.com/news/2006-09-26_-_firefox_portable_1.5.0.7
3. Double click the .exe you’ve just downloaded. I recommend saving it to C:\Program Files\ the installer will create the directory FirefoxPortable for you in the location you specify
4. Copy the backed up firefox 1.5.0.7 profile to C:\Program Files\FirefoxPortable\Data\
5. Rename C:\Program Files\FirefoxPortable\Data\profile to profile.old
6. Rename your copied profile C:\Program Files\FirefoxPortable\Data\xxxxxx.default to profile
7. Test the installation by running: C:\Program Files\FirefoxPortable\FirefoxPortable.exe
8. Download and install firefox 2.0 over your original firefox installation. Make sure you keep a separate copy of your profile handy incase you need to roll back to 1.5.

The only downside with the windows version is that you can’t run both portable firefox 1.5 and firefox 2.0 at exactly the same time but I guess I can live with that. PortableFirefox complains when Firefox 2.0 is already open and if you open firefox 2.0 when the portable app is open Firefox ends up loooking like firefox 1.5!

The end result of this little oddity is that you are best using fully qualified urls in form actions. However if you do need to use a relative url as an action you need to be careful to make sure that you end up with what you are expecting. For example I’d use getAttribute(‘action’) and just fix the result coming from opera by checking for the presence of ‘http’.

See the simple example

Getting APS up and running

First step is to install the latest version of Python for windows if you don’t already have it. This is available from Python.org. Make a note where this is installed as you will require the details later on. The default installation installs to C:\python24\ by default.

Second step is to download APS. The current version at time of writing is 0.9.8 and can be downloaded from here. I unpacked it to C:\APS for simplicity.

To get APS working all that’s required is to edit the server.cfg file to match your settings,edit runserver.bat and set Opera up to use the local proxy.

First edit server.cfg. In my case I made the following changes:

PARENT_PROXY:my.proxy.hostname
PARENT_PROXY_PORT:8080
NT_DOMAIN:myntdomain
USER:myusername
PASSWORD:mypassword

Once you have made the changes save the file. Open up the C:\APS\runserver.bat and check that the path for python matches that of your installation. E.g: “C:\python24\python.exe” rember if you path has spaces put the path in quotes!

Next step is to run the server by double-clicking the batch file runserver.bat. This should open a command shell showing that it’s running.

Once that is done you just need to reconfigure the proxy settings in Opera to make it work with APS. In Opera go to Tools→Preferences→Advanced and hit the proxy servers button. Tick the box that says HTTP and write 127.0.0.1. Set the port to 5865. Do this for all the protocols you require (HTTPS FTP etc).

Press ok and then try navigating to your homepage e.g. Google. If this works then you’re halfway there. If not go back over the steps above and check you’ve got everything set-up right.

Setting up APS to run as a service

To get APS running as a service you will need to download instsrv.exe and srvany.exe or install them from the Windows 2k Resource kit. They are available as a download from various sites if you google it. Once you have them, run the following command: (this assumes you installed the two files to “C:\Program Files\Resource Kit\” – note the quotes in the example theses are required due to the space between “program” and “files”)

"C:\Program Files\Resource Kit\instsrv" NTLMProxy "C:\Program Files\Resource Kit\srvany.exe"

Check in the service management tool in administrative tools (start→Programs→administrative tools) and make sure there’s a service called NTLMProxy.

Next open up regedt32 (or regedit) (Press “Start” hit run and type regedt32 and hit enter) and find:
HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\NTLMProxy

1. Add a new key called Parameters.
2. add new entry for Parameters key (Edit→Add Value) to set the Application name
3. Value Name should be Application
4. Data Type is REG_SZ
5. Set the String value to C:\APS\runserver.bat

Add another new value for Parameters key (Edit→Add Value) to set the working directory:

1. Value Name should be AppDirectory (That’s what worked for me though I’ve read in other placed you can use AppDir)
2. Data Type should be REG_SZ
3. String Value should be C:\APS

Alternatively you can copy this text and create a reg file for easier registry manipulation.

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\NTLMProxy\Parameters]
"Application"="C:\\APS\\runserver.bat"
"AppDirectory"="C:\\APS"

Test the service starts and stops successfully from “services” in administrative tools. Open Opera and make sure everything works and that when it looks like it’s working you’re not viewing a cached page!

Resources:

• NTLM APS
• Python.org
• Running Python Scripts as a service