Another post based on a previous tweet. This took me at least an hour to debug, so I thought it might be worthwhile sharing.

IE, apparently, gets unhappy when you append nodes to the end of a node it hasn’t finished rendering yet. In practice, this means it blows up when you say document.body.appendChild before the page has loaded. The easy solution? Append to a node that has already loaded! What node is almost guaranteed to be there when the body is rendering? The head node of course! Here is code:

document.getElementsByTagName('head')[0].appendChild(script);

So it’s time for a post on technologies. A specific set of competing technologies in the client-side scripting market. I will look at the following technologies (I know, it’s not a complete list) : Flash (/Shockwave), Silverlight, ActiveX, JavaFX, Java, and JavaScript.

Introductory Notes

I love standards. If you’ve been around for any amount of time you know that. Required browser plugins, closed technologies, or incompatible formats / protocols make me cringe. They make life on the Internet so much more complicated. I want to be able to open ANY browser on ANY system and surf to ANY page and have it just work. I also want to be able to develop without having to purchase software (IDE, compiler, whatever) to do it with. Anything else is a headache for both developers and users, at least IMHO.

Flash / Shockwave

The Adobe family of client-side applications is one of the most popular. Flash movies will run on almost any computer, because there is a flash plugin available for all major browsers and Operating Systems. This plugin sometimes comes installed by default, but is free otherwise. MANY sites require the use of this plugin, so to assume users have it is not that bad of an assuption.

BUT, you have to purchase a flash-authoring tool from Adobe to create these wonderful snippets. Then, what of the browsers, OSs, or architectures NOT supported (there are some)? What about systems you do not have rights on where you cannot install plugins? And think of the hassle when you must upgrade that plugin! You are surfing just like normal on a site you often frequent when suddenly: “Adobe Flash 10 Required…”

Silverlight

This is a new Flash competitor with MS. Browser, OS, and architecture support is promised by official release. It’s still free, but I believe that (like Flash) one must purchase software to author it. Being new, it is not nearly so widespread as Flash, meaning that if one uses it in the development of a site MANY people are going to be forced to install Yet Another Plugin to view your page.

ActiveX

An older MS offering, this system was never implemented outside of Internet Explorer (to my knowledge). This limits one’s audience tremendously. It also has a reputation for security holes. That said, it is a very powerful plugin-free (but IE-only) system that can easily allow direct access onto the local system. It competes more with Java Applets than with Flash.

JavaFX

A new plugin from Sun Microsystems that uses Java syntax to create Flash-competing content. I believe that the free-to-use Java toolkits can be used to create the apps, which is a benefit. An additional plugin MAY (not sure) be required to view it, however. If so, similar issues to Silverlight.

Java (applets)

Java is a full-fledged programming language meant to replace C++. It has been used to create small programs (applets) that execute inside a browser. Open, standard, and recently open-source licensed, the language lacks only default adoption. A plugin install is required to run applets. This plugin is, however, quite widespread and supports more browsers, OSs, and architectures than any other system I am considering here. Because the language is a complete language, it has the power of ActiveX to reach the local systems. It has a better reputation when it comes to security, but has a reputation for being slow in the browser environment.

JavaScript

Any webdev reading this knew I would end up here. JavaScript is lightweight, open, and standard. Available in most major browsers, OSs, and architectures, JavaScript code can be written that will, mostly, JUST WORK for users WITHOUT the need to install a plugin. It can be written directly into a webpage, or in a separate file, requiring only a text editor to produce working snippets. JavaScript has it’s own share of problems, but is, IMHO, the best solution at this point.

Conclusion

Many will argue that JavaScript does not have the power of the other systems. This is certainly true when comparing it to Java or ActiveX. However, none of these systems overlap 100%. They are merely used for many similar tasks. Most of which JavaScript can handle just fine. Slideshows, user interfaces, fancy animations, all can and have been done in JavaScript. I vote we make things simpler for everyone and stick to it wherever possible (and that’s a lot more than you may think!)

JScripts, my Ning app for storing JavaScript includes, has got some upgrades! At Johan‘s prodding I have added the following:

• Include multiple JavaScripts with just one request to save time! It even has a form!
• Tack ?minify on to a script to have JScripts compress it before transfer (more time saving!)
• Tack ?callback=whoever on to have whoever() called after the script has loaded

Lightbox Gone Wild is a JavaScript tool used to overlay other pages on the current page using AJAX. It looks nice and is really user-friendly. One problem : we on Blogger cannot create a static HTML page on the same domain to be included via AJAX.

So I have modified the code slightly. My version will include snippets from your local page instead. Just include these lines in your <head> section:

<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&id=1093361"></script>
<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&id=2655847"></script>
<link rel="stylesheet" type="text/css" href="http://singpolyma.googlepages.com/lightbox.css" />

Then, insert the HTML you want to be displayed in the lightbox like so:

<div id="lightbox-id" style="display:none;">
HTML HERE
</div>

Make sure you have a link similar to this in the code to be inserted so that the lightbox can be closed again:

<a href="#" class="lbAction" rel="deactivate">Close</a>

Then, insert a link to open the lightbox, like so:

<a class="lbOn" href="#lightbox-id">Open Lightbox</a>

To see an example, click the calendar icon next to the archives in my sidebar.

Not sure why I’m linking to translations today. I usually don’t. They show up in the backlinks, and saying in English ‘here’s a translation’ doesn’t make loads of sense. They deserve a link though. A translation of this post.

JScripts is a new Ning app of mine for hosting JavaScript includes. The benefits of a semi-centralised location for hosting JavaScript APIs/hacks (from the FreshTags system to the prototype framework) are many, but the greatest ones are (1) it makes it easier for us to find ones others have written (2) browsers can then cache the same JavaScript for use across sites. I have put my FreshTags system on the app, but will also keep it hosted in the other location for now. This blog now includes the file hosted on JScripts, however.

JScripts (and its parent app, FileSS, which I also wrote) has a coComment-integrated comment system and also integrates features from Sweeties. There are RSS feeds for new scripts (which can be filtered by tag, user, and search query) and for comments on each script.