JavaScript

We are seeing more and more use of HTML5, however, it is being held back largely due to the use of Internet Explorer 8. IE8 will be with us for some time because it works on Windows XP and IE9+ require at least Windows Vista.

Well, I've stumbled over some code that creates most HTML5 tags correctly in IE7 and IE8 through JavaScript.

The script is very easy to use. Just put something like the below in the head portion of your code.

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js">
<style type="text/css">
abbr, article, aside, audio, bdi, canvas, data, datalist, details, figcaption, figure, footer, header, hgroup, mark, meter, nav, output, progress, section, summary, time, video {
 display: block;
}
</style>
<![endif]—>

After you put this in the code you can use these tags and for the most part they should work correctly (a few still may have problems, so you will need to test your page in IE7 or IE8).

You can get the code here. here.

HTML5 is the future of the web, although it is taking some time before all browsers have full support for it. The things that can be done with it are nothing short of amazing, especially considering how easy the code really is. Well John Esposito over at the HTMLZone (part of DZone) has written a very good HTML5 example. The example is of an interactive 3D dodecahedron. The post gives a brief overview of the code as will as all of the code that was used to create the effect.

Below is an excerpt from the post.

Thursday's CSS3 bitmaps were clever and fun, but a little counter-HTML5-cultural: the whole point of SVG, Canvas, and so forth, is that vectors are better, because simpler, than bitmaps.

Today's interactive geometric CSS3 shape is just the opposite: far more pixels than pre-rendering could possibly justify, emphatically composed of 2D surfaces, and fully animated in 3D.

It's a folding/unfolding dodecahedron (not in FF/IE):

You can read the full post here.

You can checkout the demo here.

This winter break (or as we used to call it when I was still in school, Christmas vacation), I worked on a little web application. The application was going to be for an automotive related blog that I write on, but once I started working on it I realized that the application was better if it wasn't restricted to just automotive information.

The application is called scovry and it is a web discovery application. You may notice that we at Ajaxonomy love spy applications (notice that in Ajaxonomy labs we wrote delicious Spy and TubeSpy). scovry is kind of a blend of these spy applications along with gathering information from many other social media sites and social networks. Beyond this the site adds a social element by allowing comments and easy sharing of items found on the site.

From a programming side, in order to load all of the data and keep the server happy I used a lot of caching. The caching code I used was based on the Easy Server Side Caching in PHP article that I wrote a while back. With some small changes, the biggest of which was using readfile() instead of include(). I even modified the caching script to cache images that are loaded from the thumbnail service to make loading much faster (not to mention to reduce requests for images).

You can check out scovry here.

The much anticipated Firefox 6 release is out. In keeping with its new Chrome-like strategy, Mozilla has done away with large, major releases and is instead releasing on a faster, more "agile" schedule, releases batches of features and improvements as they get fully baked.

So What's New?

• Mozilla claims that Firefox 6 is 20% than Firefox 5. This is a nice speed boost.
• The new JavaScript scratchpad (in Web Console). Yes, LISP fans, JavaScript now has a REPL. Awesome. This should prove to be a really nice tool for web developers.
• Added support for EventSource (server-sent events). This API permits push notifications from the server in the form of DOM events.
• A touch event for touch-sensitive screens.
• Support for the latest draft of WebSockets.
• The result of a media query string can be evaluated programmatically using the window.matchMedia() method.
• Support for HMTL 5's progress element has been added.
• Support for HTML 5's track element has been added.
• A host of -moz-* CSS properties for styling progress bars, text decorations, and hyphens.

The release notes are here.

3D on the web is getting very close to being a reality. With the release of Google Chrome 9 and Firefox 4, that uses WebGL (a subset of the OpenGL library) coupled with HTML 5 and JavaScript, 3D on the web could soon become used in many websites.

With 3D likely becoming mainstream on the web within the next few years, I thought that now is the time to build tools to model 3D models using a small easy to handle format that could be easily used in JavaScript.

You may remember my post from a while back about JSON 3D. I feel that using JSON for 3D modelling would be the best format to handle 3D models on the web. This would allow for quick Ajax calls to allow loading 3D models as needed on a page and the format is about as small as you can get on the web for holding this type of data. Additionally JSON already has a huge footprint in Ajax development and has virtually replaced XML in being used for most Ajax calls.

You can read my original post on JSON 3D here. My hope is that some of you will find this useful and will begin to write the tools that will be used to have 3D available all over the web.

Also, if you are looking to have some fun, you can view a bunch of Chrome WebGL 3D demos here.

Should the Ajax term be changed to Ajaj? Since Ajax stands for Asynchronous JavaScript and XML, but with more and more the web favoring JSON (especially in rich Ajax applications), should it now be called Ajaj and stand for Asynchronous JavaScript and JSON?

The reason that I bring this up is that James Clark one of the major contributors of XML is now saying that JSON is now the way of, at least, the "Cool" web. The post where James talks about this is called XML vs the Web.

Below is an excerpt from his post.

If other formats start to supplant XML, and they support these goals better than XML, I will be happy rather than worried.

From this perspective, my reaction to JSON is a combination of "Yay" and "Sigh".

It's "Yay", because for important use cases JSON is dramatically better than XML. In particular, JSON shines as a programming language-independent representation of typical programming language data structures. This is an incredibly important use case and it would be hard to overstate how appallingly bad XML is for this. The fundamental problem is the mismatch between programming language data structures and the XML element/attribute data model of elements. This leaves the developer with three choices, all unappetising:

* live with an inconvenient element/attribute representation of the data;
* descend into XML Schema hell in the company of your favourite data binding tool;
* write reams of code to convert the XML into a convenient data structure.

By contrast with JSON, especially with a dynamic programming language, you can get a reasonable in-memory representation just by calling a library function.

Norman argues that XML wasn't designed for this sort of thing. I don't think the history is quite as simple as that. There were many different individuals and organisations involved with XML 1.0, and they didn't all have the same vision for XML. The organisation that was perhaps most influential in terms of getting initial mainstream acceptance of XML was Microsoft, and Microsoft was certainly pushing XML as a representation for exactly this kind of data. Consider SOAP and XML Schema; a lot of the hype about XML and a lot of the specs built on top of XML for many years were focused on using XML for exactly this sort of thing.

You can read the full post here.

While I don't think that XML will ever totally go away (nor should it), I do think that in most Ajax applications that JSON makes more sense to use (with the biggest exception being if you just want to display the data). So go out there and start using Ajaj!

Recently, I needed to create a small JavaScript that would make links for documents and outside web sites open the links in a new window. However, any link from the web site that held the links needed to open in the same window. This was made a bit more complicated by the fact that the system that was holding the links (a third party web content management system) did not allow for the user to decide if they wanted the link to open in a new window when they created a new link.

Because I could edit the JavaScript that loaded when the page was loaded, the solution that I came up with was to call the below function in a function that was called onload. What this JavaScript does is go through all of the links on the page and any link that matches the criteria is changed to have a target of blank.

function AddTarget(){
	var TargetTag2 = document.getElementsByTagName("a");
	
	for(var a=0; a

Sometimes a simple JavaScript can save the day.