Free: Remaking DMXzone in CSS and XHTML

Read for free the trials and tribulations of our intrepid tech team as they wade through 6000 articles-worth of tag spag hell, nested table horror, and emerge victorious with a fully validating CSS and XHTML site that loads twice as fast, renders better and is more maintainable!

The ASP and JavaScript we used to convert the all our articles into xhtml and the full DMXzone.com CSS file is included for download too!

The Conversion Mechanism

The xhtml conversion was a significant amount of work as we had to change almost all HTML tags to xhtml compliant tags. The w3c validator helped us here a lot but it was a lot of manual work as we trawled through our HTML templates and checked the ASP code for residual HTML. Of all the fun things to be doing at night in the Netherlands, this was pretty low on the list, I can promise you.

After all the CSS and xhtml was in place, we faced yet another challenge. All our content gets stored in the database as HTML which xhtml compliant so we needed to convert it all. Happily most was pretty basic HTML so with a simple JavaScript function we were able to convert the majority. The function we used is the same that we use for xhtml conversion in our own Advanced HTML Editor extension, so we had it developed and road-tested already.

Here's the code:

    function convert2Xhtml(theHtml) {
 var html;
 html = theHtml;
 
 // Make xhtml compatible
 html = html.replace(/<.*>?>/g,function(m,p,s){return m.replace(/\s(\w+=)([#\w,;]+)/g,function(m,p,s){return ' ' + p.toLowerCase() + '"' + s + '"';});});
 html = html.replace(/<(\/?\w+)([^>]*>)/g,function(m,p,s){return '<' + p.toLowerCase() + s;});
 html = html.replace(/<(meta|base|basefont|param|link|img|br|hr|area|input)([^>]*)>/g,function(m,p,s){return m.indexOf(' />') == -1 ? '<' + p + s + ' />' : m;}); 
 
 // Add empty ALT if not present in the IMG tag 
 html = html.replace(/<(img)([^>]*)\/>/g,function(m,p,s){return m.indexOf('alt=') == -1 ? '<' + p + s + ' alt="" />' : m;}); 
 
 return html;
}

How does it work? Well, this is all regular expression magic … but mainly it makes all tags lower case, then make sure all attributes have quotes, includes an end slash for the tags that require it, and also add empty alt attribute to images that don't already have an alt attribute. All that in 4 lines code - cute huh? Then it pours a beer and gives you a body massage, if you add the secret functions that we don't have room here to show you.

Next, we need to run the server side in ASP against the database. In VBscript, regular expression support is not that great, so we left the function in Jscript. It needs JScript/VBScript 5.5+ (available free from Microsoft) to be installed on your server if you want to use this for yourself.

The final code for the ASP converter (convert2xhtml.asp) can be found in the downloadable code file (it's too long to include here). It cycles through all articles in our database and for each one it reads its description and content and converts those to xhtml by calling the function convert2xhtm. Note that this function is in JScript and that's why we needed to convert its parameter to CStr first before calling it. I've also build in some progress information so you see how far the conversion is going.

To my surprise the conversion went really fast - converting about 6000 articles took just about one minute to complete!