Modern and Ancient

It is amazing how some things on the web end up with some weird mix of modern and ancient code. While using the latest HTML 5 tags for your page markup is becoming more and more popular, using it with equivalent JavaScript is not. There are so many sites out there with HTML so modern that it will not run properly on IE8 and JavaScript so ancient that it is more appropriate for use with Netscape 4 than with any more modern browser.

It seems that those who like to use the latest and greatest HTML appear to not know JavaScript much at all as the JavaScript they are using with it most of the time is the JavaScript equivalent of using HTML 2 (or possibly even an earlier version). As a result their pages end up a jumbled mess because of the mix they are using of the latest HTML and the earliest JavaScript. The equivalent (that you never see) would be to use HTML 1 with the latest JavaScript - if you were to imagine that HTML 1 were to actually support the script tag.

The problem with this hybrid mix of modern and ancient is that you miss out on most of the benefits of using the modern code because of the ancient code that it is mixed with.

As an example let's consider an HTML 5 template called HTML 5 Boilerplate. This template includes a number of things that are intended to allow the page to work in older browsers that don't fully support HTML 5. It has a meta tag at the top of the page to force the antiquated Internet Explorer browser to use the most standard compliant mode available (at the time of writing this even IE8 is still too popular for some people to ignore). It has a meta viewport tag to help make the page mobile friendly. It even uses the modernizr JavaScript to add classes to the html tag that indicate what parts of JavaScript the browser supports. These tags are ones that help ensure that the page will display as well as it can be in older browsers that don't support the absolute latest HTML and JavaScript. So far so good.

The start of the body of the page displays a message to any IE8 users telling them their browser is out of date and to upgrade. Unfortunately the only people still using IE8 are those running it on obsolete versions of Windows where the option to upgrade to a more recent Microsoft browser is not available. Those using obsolete versions of windows who know what a browser is are using an alternative to IE anyway so the only people this message is actually telling to upgrade are those who can't.

The scripts at the bottom of the page are at least being added at the right spot in the page - immediately before the </body> tag - where almost all JavaScript belongs (modernizr is one of the few exceptions that must go in the head). This is where the page content detiriorates the most. That there are so many script tags rather than just one or two means that the page has to make lots of requests to the server to load scripts. Worse is that there are a couple of scripts actually embedded into the page rather than external to it (the plugins.js, main.js and analytics code ought to all be in a single external file). The other embedded script also ought to be in the top of that file except that it also needs a complete rewrite as it is using a document.write statement (as obsolete as Netscape 4) instead of using JavaScript properly to add the script tag.

Of course looking at the code leaves me wondering why that antiquated script code is there at all since the previous line loads an equivalent script from a common repository while the Netscape 4 script loads a local copy of what should be the same script. Interestingly that local copy isn't even included in the template library.

That this template uses such antiquated JavaScript in some spots is even harder to understand when you examine what JavaScript is actually provided in the external scripts as what little code is provided for the template is actually written in a reasonably modern fashion and just lacks "use strict"; to make it the JavaScript equivalent of HTML 5. That this is a template for use by lots of different web sites makes the ancient code inexcusable.

go to top

FaceBook Follow
Twitter Follow