So now, you’ve taken the plunge and swapped your content-types. Whoa! Why did everything on your site just break? The first reason, of course, is invalid HTML. If you’re getting the Yellow Screen of Death in Firefox, just fix what it asks and you’ll be back on track. However, if your JavaScript suddenly bites it, chances are that you were using methods that are deprecated and no longer supported. You see, when traversing an XML DOM, everything must be viewed in terms of elements. You can’t munge or alter the raw code, because you might generate invalid markup. Instead, you must insert, delete, or change existing elements.

“But but!” you cry. “I used the latest version of jQuery, just like you taught me! And I didn’t use anything but jQuery methods!” Well that’s great, but even jQuery can only do so much. Some of its methods rely on the unsupported innerHTML. So here’s how you fix the issues. Hey, it could be worse; you could have been using document.write!

html() & html(val)

These methods rely on innerHTML. Consider using text() instead to only replace the text inside elements. If you were using html() to copy an element’s contents, try clone(). Finally, if you used html() because you really wanted all the elements inside, use children(). The key is to think of an element’s contents as nodes along the DOM tree, rather than a bunch of tag soup. Is there an <img /> inside your element? Don’t try to copy the HTML somewhere else. Just think, “Hey, I have an image element there. I can query for its src value, which is the important part. Then, I can recreate that image anywhere I want.” Elements are always replaceable– you need only give them back their attributes.

$(“html here”)

This is a slightly lesser-used aspect of jQuery. It’s used to inject raw HTML into the DOM. See a problem? Yep, XHTML+XML doesn’t do raw HTML. Everything is elements! Fortunately, it’s easy to fix this in your code. Instead of $("<img src='muu.png' />"), try using $(document.createElement("img")).attr("src","muu.png"); Not too hard, right?

There are four main scripts that I’m using to make things nice. My Where’s Seth script is back, but now instead of just pulling from my Google Calendar, it also works off Jabber away messages that my Trillian client sends. I need to make it more robust, so we’ll see what other ways I can pull information, such as Twitter feeds. For my linkblog, I rolled a little bit of jQuery to fetch JSON data from Ma.gnolia (which is like del.icio.us but nicer), so I don’t have to maintain links in two separate places.

On the WordPress plugins side, I’ve added OpenID and Gravatar support. WP-OpenID allows commenters to use their OpenID, both to verify their identity and to obviate having to type all that commenter info every time. Gravatar was acquired by WordPress, which makes me finally comfortable enough to use it on a blog. Before, it was just too unstable– the service was unavailable all the time and I didn’t feel like it was “official” enough to make it widespread and worth using. With official adoption by WordPress, it should become more of a de facto standard, one that I feel comfortable supporting.

Javascript is fun :O