delusionworld blog

What is progressive Enhancement? (from wikipedia)

Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.

So in other words you start with the most basic concept and evolve it with every step (but the basic concept always stays the same). So let’s do an example (there you can see the actual code) [please don't use IE :p]:

Basic

Here we have the basic setup – simple html so even without css and everything the user will still be able to know what’s going on.
As you can see it’s just about providing a Headline + some Help for a bunch of Input fields.

<h4>Server Configuration</h4>
<a href="help.php?id=Server"><span>(Help)</span></a>
<div> Here are a lot of Inputs </div>
<h4>General Configuration</h4>
<a href="help.php?id=General"><span>(Help)</span></a>
<div> Here are a lot of Inputs </div>

CSS Enhanced

So now the HTML is completely the same we just add some CSS. With this it just looks nicer, but if at any time we remove the CSS it still makes sense. However I’m sure most of you know how to handle CSS.

.cssEnhanced h4 { display: inline-block; margin: 10px 0 5px; }
.cssEnhanced a { background: url('img/help.png'); width: 16px; height: 16px; display: inline-block; margin-left: 5px; }
.cssEnhanced a span { display: none; }

JS Enhanced

With a little javascript we can do even more.

$require('jsEnhanced.css'); //load a css with js, so it will only be included if js is enabled

window.addEvent('domready', function() {
	$require(MPR.path + 'Tools/Roar/Roar.js');
	var roar = new Roar();

	$$('.jsEnhanced a').each( function(el) {
		// load all message on startup - could also be done on mouseenter or click (would require a cache check)
		new Request.JSON({
			'url' : el.get('href') + '&ajax=1',
			'method' : 'get',
			onComplete : function(tree, elements, html) {
				el.store('content', tree);
			}
		}).send();

		el.addEvents({
			'mouseenter': function() {
				roar.alert(el.retrieve('content').header, el.retrieve('content').msg );
			},
			'click': function(e) {
				e.stop(); // or return false; as we don't want to go to the page as the info is provided with js
			}
		});
	});  // $$('.jsEnhanced a').each(

});

First at line 1 we load an additional css with javascript to modify the image to show it doesn’t require a click. If javascript is disabled the icon will just stay as it was.

Then we wait for the dom to be ready(3), as afterward we just loop through all jsEnhanced links(7) and request all the messages we will need for this page(9-15). For the Request Url we just us the href from the link and add an ajax=1. By doing this the script that provides the messages will know that we don’t need all the usual html stuff – just the data encoded in json.
After the Request is Complete(12) we just save the output to the link(13). Finally we just add 2 Events to the links. One to display the message on hover(18) and one to stop the default click as we don’t want to see the standalone info page. [Note: we could also reshow the message on click or do something else]

Javascript multi-language support for free

So if you stick to the progressive enhancement you don’t even need to create a multi-language support for javascript on your own. Just create proper html code with your favorite server side programming language. And with proper I mean make the whole page with html first and enhance it afterward. So what do I mean by “get it for free”. Until now the html code has always been the same, just enhanced with css and javascript. So if I just create a multi-language support for html (and you will always need that) I don’t even need to touch my css or javascript as it will then just enhance my different language. So let’s change the html a little:

<h4>Konfiguration des Servers</h4>
<a href="help.php?id=Server&lang=de"><span>(Hilfe)</span></a>
<div>Hier gibt es eine Menge Inputs</div>
<h4>Allgemein Konfiguration</h4>
<a href="help.php?id=General&lang=de"><span>(Hilfe)</span></a>
<div>Hier gibt es eine Menge Inputs</div>

Now it’s some German HTML with links to German help files (or in this case just a config for the script). I didn’t changed any css or js and it still works. So the only reason you need multi-language support in javascript is when you are lazy and don’t want to create proper html/css. I mean even if you have some messages that only make sense if you have javascript – just include them hidden?.

There are only TWO thing I can think of where you might want to have multi-language support in javascript. ONE is validation of inputs on the client and you don’t want to submit the form every time a user changes something so you can provide error messages. However it’s not even a real good exception, as

1. with ajax request you could submit a form without disturbing the user
2. you still need a server side validation
3. you could include the messages as hidden content

TWO would be real javascript applications like a RichTextEditors or drawing canvas/svg – things that won’t display in any way as html.

So I would forgive you if you use multi-language support for javascript in these special cases.

What you can expect next – development comparison progressive enhancement vs non-progressive.