Why is this a good idea for (some) websites

I’ll use the page that got dugg as an example. It’s basically a page with a video from Google Video with some controls on the right side which can be used for adding comments or sending the video to a friend.

A couple of facts: - These controls are AJAX based, and I use the infamous prototype.js for this. - prototype.js is 47k - About 0,03% of the visitors write comments/send e-mail and prototype.js is only used when this is done - When I was dugg, I used 1,7GB in bandwidth only for prototype.js!

Starting to get the picture?

If some javascripts are only used by a small percentage of your visitors – why load them each time? It will only cost you bandwidth and your visitors download time. It took me digg to drain 1.7GB of my bandwidth unnecessary for me to get this … Lazy loading is the key. Or dynamic loading of .js files if you will.

So, I started doing some research, and asked around in #javascript on ef-net. One user there, km0tion, linked me to this script which was exactly what I needed. Here’s the code:

/** include – including .js files from JS – bfults@gmail.com – 2005-02-09 ** ** Code licensed under Creative Commons Attribution-ShareAlike License ** ** http://creativecommons.org/licenses/by-sa/2.0/ **/ var hIncludes = null; function include(sURI) { if (document.getElementsByTagName) { if (!hIncludes) { hIncludes = {}; var cScripts = document.getElementsByTagName(“script”); for (var i=0,len=cScripts.length; i < len; i++) if (cScripts[i].src) hIncludes[cScripts[i].src] = true; } if (!hIncludes[sURI]) { var oNew = document.createElement(“script”); oNew.type = “text/javascript”; oNew.src = sURI; hIncludes[sURI]=true; document.getElementsByTagName(“head”)[0].appendChild(oNew); } } }

So the clue would be to only include include.js when loading the page, and then using it’s include() function to retrieve prototype.js and the other files. This is only done the first time a user uses the controls on your page that needs the AJAX libraries. Of course, it would be a good idea to show that familiar ajax loading image when doing this

Can’t wait to implement this on 43min.com.

Also, I plan on analyzing the digg effect in a post the next days, and also letting you know how Codeigniter handled the traffic (43min is built on CI) – so if this is stuff you find interesting you might want to subscribe to my feed.

I’m don’t how well this development model works with dynamic data etc. but I’m sure they have a clever way to do that too. Will report more later when I’ve tested it

The form data is sent encoded in UTF-8 regardless of the page encoding.

I was recommended to use iconv to convert back to ISO-8859-1 on the server. Unfortunately this was not an option for me, as it wasn’t available on the production server. Of course, there is PHP’s utf8_decode(), but anyone who has used it will tell you it is totally unreliable.

So, here’s how to get it to use the encoding of your page (e.g. ISO-8859-1) instead of UTF-8. This is based on the info I found in this bug report.

• Open prototype.js and replace all calls to encodeURIComponent() with escape(). There should be three instances.
• On the server side, make sure you send all output wrapped with htmlentities(), or else you may experience that the editor ‘hangs’ when updating.

That’s it!

Until now, that fable has been a good metaphor of my struggle with the seven headed beast called JavaScript. I’ve written my lines of code, gotten inane script errors from IE, tried, failed and tried again. Also known, and forever hated, as trial and error programming.

Of course, jolly, happy and cheerful memories from BW2 (before Web 2.0) – when I coded Java all day and all night, with the best tools of the trade – didn’t help much either.

So, I felt like the frog. But that was until I discovered that I could debug javascript with Visual Studio. Yes, that’s right – actual debugging in javascript.

I’m not saying this is news, I’m just saying it’s news to me (and probably to a couple of others as well – those weird looking geeks in the corner, there. See them?). And, yes, I am aware of Venkman.

If you’re not a .net developer, it isn’t in-your-face obvious how you do this, so often you rely on someone just showing it to you. I’ve done some screenshots for you guys and gals.

How to do it!

Just visit the webpage you want to debug with IE. Then fire up Visual Studio, and select Tools -> Attach to Process…

Then you find the iexplore.exe instance you want. Click “Attach”.

And voilá! You’re in a full-featured debugger; a script explorer, code-view where you can set breakpoints etc. and a panel where you can add watches and view values of locals.

This is brilliant. Now this JavaScript programming should feel less like thrashing in a pail of milk, and more like enjoying a cup of hot chocolate.

It recently struck me how ingenious this is from a marketing point of view. Releasing quality content like this, on a single site and on an pre-known schedule (in this case every day) – you’re bound to get dugg a lot. People also seem find it delicious, and it’s probably just a coincidence that this wasn’t “news for nerds, stuff that matters“.

This will without doubt create a sort of a synergy effect where all the authors get extra traffic (they are all linked to from the article listing in additon to the article). When bloggers get together and release something like this, their chances of getting large amounts of traffic multiplies. Sure, the main site gets hit the most (in this case 24ways.org) – but I suspect the individual authors also got their share (looking at the alexa traffic rankings for a couple of them it seems they had quite an increase in december/january, but that might be coincidental.

Anyway, why didn’t anyone think of this before? (allright, I’m sure someone did and I just failed to do some research, but still – it seems like a good idea to do this for something else than ajax).