jQuery, XML and XSLT (jqXSLT)

Hey.

jQuery has been a boon to JavaScript programmers and designers ever since it's introduction. With the official support of Microsoft with it's inclusion in MVC frameworks and the default application in VS 2010, it's here to stay!!.

Anyway, while having an extremely "jQuery"-fied conversation with a buddy of mine, I decided to put together a simple jQuery extension that puts data into a DOM element given an XML and a XSL document. The documents could either be provided as URLs or as JS objects in code. The syntax is pretty simple:

//HTML snippet
< div id='content' >< /div>

//JS code
$(document).ready(function(){
      $('#content').xslt('XslDocument.xsl','XmlDocument.xml');
});

Simple enough? The extension itself if less than 3kb (lesser than 2kb minified). This example has been tested in the following browsers:

• Firefox 3.6.10
• Chrome 6.0.472.63
• IE 9 beta (9.0.7930.16406)
• Opera 10.62
• Safari for Win (5.0.2)

Here is the jqXSLT.js file I wrote as well as compressed versions of all required files. Run "test.html" from either of the compressed files to view the example. Note that the example does not work in Chrome when run as a local file. This is due to the security restriction (that's also labelled as a bug here) in Chrome that prevents reading local files using AJAX. There's a work-around suggested as well there, though I couldn't get it to work. Take a shot it it and let me know if it does work for you!!

jqXSLT.rar
jqXSLT.zip
jqXSLT.js
jqXSLT-min.js

Cheers.

My new Nokia Neuron and the S60 app

Hey.

I just purchased a Nokia Neuron from Costco (for T-Mobile) for $120, along wih the unlimited internet data plan for just 10 bucks!! Yep! For some reason, the Neuron isn't considered a smart phone, although it has a lot of it's features. A few of them are listed below:

• Preloaded with Ovi maps, the free navigation software from Nokia


• The Ovi app, which gives one access to plenty of apps written specifically for the phone and platform (called S60)


• An accelerometer thats nice to view/type in portrait mode

One of the things it lacks is support for WiFi networks, but that's negated by the cheapest data plan around. It comes with a 2GB micro SD memory card (expandable to 32 gigs). Not much else is loaded on the phone, but it's easy to fill up the 2 gigs with all the apps from the Ovi store. Besides, there are plenty of websites around from where one can download free apps, music, themes etc. Just search for "S60 free applications" in Google and you can download and install any app.

I'll post some pics and reviews of the phone soon. And yeah..have also submitted an app to the Ovi store that reads the RSS feed from this blog and displays it in a default application skin. Here's where I went to create it:
Ovi app wizard beta

Their developer program is currently closed but I'm hoping to get my hands dirty soon with writing some apps I'd like to see in the Ovi store.

Cheers.

HTML5 getElementsByClassName

Hi.

Here is one great addition to HTML5 I had nearly forgotten about. The function "getElementsByClassName" has been added to nearly every javascript framework in existance, and now it's part of the (upcoming) standard!! Wohoo!!! And here's the best news...it's already supported in all the latest browsers (except IE (8), of course!!).

Here's a simple way to check if your browser supports it: Click here

I've added the detection of this function to the detections files I've been blogging about. In addition, I've included a minified version of the file (using the YUI compressor).

Here is the updated zip file: Html5.zip

Cheers.

Simple worker example in HTML5

Hi.

I just added an example of workers to the HTML5 detection and examples code on which I talked about in my two previous posts. Workers are, undoubtedly, the most interesting feature of the HTML5 specs. A lot of the specifications derive from the work done by the Google gears team. Kudos for finally bringing multi-threaded applications to the web!!!

Here's a statement on web workers in the current specifications:

This specification defines an API that allows Web application authors to spawn background workers running scripts in parallel to their main page. This allows for thread-like operation with message-passing as the coordination mechanism.

It also has the following statement:

Workers are relatively heavy-weight, and are not intended to be used in large numbers. Generally, workers are expected to be long-loved, have a high start-up cost, and a high per-instance memory cost.

Example initialization: (in parent page)
var worker = new Worker("worker.js");
worker.onmessage = function(){}

In worker.js:
postMessage();//used to send a message back to the "parent" thread.

Currently, most browsers support just strings being passed as messages, although the developers working with the W3C are also trying to get it into the specifications to pass around generic objects.

There are also some stipulations on what can be done within a worker thread:

1. Workers have no access to the DOM
2. Workers do not have direct access to the 'parent' page.

The first point above means that one cannot do any DOM manipulations within the worker thread. i.e. no access to document, window, document.body or any of the DOM elements.

The second stipulation means that the worker thread can communicate with only it's parent thread, and cannot call any functions or use any variables on the "parent" page that initialized it.

The demo I have put together works quite well in Chrome 4 and Safari 4. The demo works quite weirdly in FF 3.5, but only for the "terminate" call, where it seems to terminate the worker thread after a random period of time after I click the "Stop" button. However, that might be due to Firebug or any other extensions I may have installed. Do let me know in case you experience otherwise.

Here is the zip file once more: Html5.zip

Cheers.

Some more HTML5 tags and attributes

I've been hooked on HTML5 since I last posted on this blog. I was watching a cool video on YouTube about HTML5 features that have been defined in the specifications but do not have full support in all browsers yet. Here it is:



I updated the detection code in the sample I had posted earlier to include some new attributes and tags. I also included a simple test page that can help one determine support for input types in the various browsers. Here is is again: Html5.zip

Cheers.

HTML5 browser support

The emergence of the HTML5 specifications has gotten me all excited about the future of web pages and the possibility of web applications finally catching up with their desktop counterparts (in terms of speed and richness). For just getting my hands a little dirty with the "magical" HTML5 dust, I decided to quickly write up some sample code to detect some features I thought were important. Of course, I have skipped quite a few (I haven't read the complete specs yet).

If you want to take a look at what I've coded up, click here to download the files. The Html5Detect object queries most properties as simple getter functions.

The following table lists some of the HTML5 elements and properties supported in 4 of the latest browsers (Windows versions only tested here):

Property	Chrome4	Opera10	Safari4	Firefox3.5
canvas	TRUE	TRUE	TRUE	TRUE
canvasText	TRUE	FALSE	TRUE	TRUE
video	TRUE	FALSE	TRUE	TRUE
h264 video	probably	FALSE	probably	FALSE
OGG video	probably	FALSE	FALSE	probably
localStorage	TRUE	FALSE	TRUE	TRUE
workers	TRUE	FALSE	TRUE	TRUE
applicationCache	FALSE	FALSE	TRUE	TRUE
geoLocation	FALSE	FALSE	TRUE	TRUE
placeholder	TRUE	FALSE	FALSE	FALSE
autofocus	TRUE	TRUE	TRUE	FALSE
microdata	FALSE	FALSE	FALSE	FALSE
inputTypes.search	TRUE	FALSE	TRUE	FALSE
inputTypes.number	TRUE	TRUE	TRUE	FALSE
inputTypes.range	TRUE	TRUE	TRUE	FALSE
inputTypes.color	TRUE	FALSE	FALSE	FALSE
inputTypes.tel	TRUE	FALSE	TRUE	FALSE
inputTypes.url	TRUE	TRUE	TRUE	FALSE
inputTypes.email	TRUE	TRUE	TRUE	FALSE
inputTypes.date	FALSE	TRUE	FALSE	FALSE
inputTypes.month	FALSE	TRUE	FALSE	FALSE
inputTypes.time	FALSE	TRUE	FALSE	FALSE
inputTypes.datetime	FALSE	TRUE	FALSE	FALSE
inputTypes.datetimeLocal	FALSE	TRUE	FALSE	FALSE

For all values of "probably", I haven't tried them out myself yet, but that's the value the detection returns. "probably" indicates that the browser is fairly confident that it can play this format. IE8 doesn't support any of the HTML5 elements I've tested for.

Let me know if there are any other browsers you would like to see included in this list. For further reading, I'd recommend following the HTML5 specification itself, as it is rapidly evolving.

Cheers.