IE8 - Version Switching

There has been much talk over the past few days about IE8 and its new concept of version targeting.

There is a lovely post by Robert Nyman where he considers an alternative. I agree with much of what he says.

My feelings on this matter do differ in some ways. I have a strong conviction that IE8 should render things as well as it can all the time. I wont object to the doctype switch - it has been around too long now - but there should be strong discouragement of its use.

I am well aware that for some the web will be "broken". But surely this is OK. It seems that browser vendors and especially Microsoft are helping those amateurs who think they can do web interface development. I have no problem with people building their own websites at all, but it is time to realise that writing good XHTML and CSS is not easy. Its time to put things right, have some short term pain but get that long term gain.

This combined with Robert's approach of standalone versions could make the world a better place. Tools for building websites "properly" will appear in time.

Just remember, XHTML and CSS are hard to do well, we want to encourage amateurs to have websites - everyone should be able to have a website - but its not easy.

Asynchronous JavaScript Part 3 - Using ADIJ

In part 1 and part 2 of this series on asynchronous JavaScript techniques, I have introduced the ADIJ object. Now, I will demonstrate just how easy it is to use the object with an extremely simple code example.

var myAdij = new J2.ADIJ( {

URL: "/getADIJdata.json",

onSuccess: successHandler

} );

myAdij.send();

function successHandler(myAdij) {

var jsonData = myAdij.getResponseText();

....

}

In this example, I create a variable called myAdij which is set to a new instance of the ADIJ object. I pass an object literal of values into the constructor of the ADIJ object containing the URL which I wish to request and the success handler which will get called when the ADIJ object gets a response to this request.

I then call the send method which will send the request.

When the ADIJ object gets its response, successHandler will be called. It will be passed one argument which is a different form of the ADIJ object now containing a method getResponseText which will return the JSON object sent as the response to the ADIJ request.

Once successHandler had finished being executed, the original ADIJ object can be garbage collected by the browser assuming there are no other live references to it.

It is also possible to create and send the ADIJ request in one line of code and without assigning it to a variable. This can be useful in instances when the original ADIJ object will not be needed again.

new J2.ADIJ( {

URL: "/getADIJdata.json",

onSuccess: successHandler

} ).send();

function successHandler(myAdij) {

var jsonData = myAdij.getResponseText();

....

}

Note that the send method is now called in line with the construction of the new ADIJ object.

It is as simple and easy as that! So go, play and enjoy and when this series returns, we will be discussing AJAX and particularly JSquared AJAX.

Structured CSS

One of the most challenging aspects of starting a new project is deciding how to structure the CSS. Often, not all the designs are complete, and sometimes very few are done and things are not signed off etc. Therefore it is always important to have a structure which allows for quick and easy changes and even the retrospective coding of a style guide into the CSS.

I am personally not a fan of CSS resets such as Eric Meyer's but I do like to have flexibility and structure in my work.

Whilst I get some arguments from colleagues about my approach, those who work on projects with me have so far not had cause for complaint and have commented that my approach seems to work. The crux of it is that I like to do the majority of the CSS work up-front and do as little as possible as more and more pages are added into the site.

I still subscribe to the global reset:

* {

margin: 0;

padding: 0;

}

I then like to set all the defaults from scratch on the core elements: headers, tables, anchors, paragraphs, lists etc.

My other practice which causes discussion is my file structure. There are different ways of organising CSS files and some people like to take the one file approach where everything is put into one massive file. I cannot abide this approach - how can you find anything!? The answer is often that good commenting helps, but I don't think developers are very good at commenting well!

My other issue with the single CSS file is that for every page the user has to download every line of CSS and in a rich website, there can be a lot!

I prefer to separate the basic CSS into the following files:

global.css
All global styles including my mini-reset as above, basic styles for the common tags (lists, tables etc). Styling for global site elements.

typography.css
Basic typography styles - paragraphs, headers and text colouring for different elements. Anchor styles as well including hover styles etc.

forms.css
Basic form styling. I always insist upon forms looking very similar across the website so I can style them once.

navigation.css
All global navigation styles typically including primary and secondary navigation (tertiary if it is applicable), footer styles, any in page tabbed navigation etc

ie.css
Included for all IE versions 7 and lower through conditional comments.

ie6.css
Included for all IE versions 6 and lower through conditional comments.

Each of the above files would be included on every page of the website. I would then create further style sheets by section or template or functional usage depending on the website. I would normally not create a style sheet per page or per module, but I do normally create additional special style sheets for the website home page and for search results if it is different enough.

Within my style sheets I try and implement rules such that each section of CSS is commented eg:

/* Inbox styles */

table#Inbox {

....

}

....

I like to have the styles in a sensible order which is normally the same as the markup order. So styling for elements which are children of or appear after the table with ID Inbox would appear later in the CSS file.

And that's it. No magic, nothing too special, just a structure borne out of experience and specifically the experiencing of managing badly written CSS.

CSS is not easy, but a good approach can at least make it simple.

One special note - consistency of approach to CSS on a project is absolutely key until some decent development tools come along.

Asynchronous JavaScript Part 2 - The ADIJ Object

In a previous post, I discussed what ADIJ is.

ADIJ is now open source and you can get ADIJ here.

This is part 2 of my series on asynchronous JavaScript and today I will focus on how the ADIJ object itself works. In part 3 of this series, I will discuss how to use the object. Later in the series, I will introduce my AJAX object which is also open source and available along with ADIJ. These 2 objects share a simple interface and so can be interchanged fairly easily.

How does ADIJ work?
Whilst answering this question, we must bear in mind that ADIJ is an asynchronous tool which ultimately will make an HTTP request and indirectly handle the response of that request. JavaScript is simply the intermediate layer which processes the HTTP response and passes that response back to the ADIJ object.

ADIJ is an instance based tool. You create instances of the ADIJ object and apply properties to that instance. Each ADIJ instance is given a unique ID which is used to identify each ADIJ object. This is most useful when handling responses.

The following properties can be applied to each ADIJ instance (and ultimately each request made):

• URL - this is the URL which ADIJ will use for the src attribute of the script tag which will be injected into the document when the ADIJ request is sent. The response from this URL has to be JavaScript formed to work with ADIJ.
• onSuccess - this is the function which will handle the response. It is similar to the handler for onReadyStateChange in an AJAX request.
• scope (optional) - this defines the scope that the onSuccess handler will run within. Scope is a larger JavaScript topic which cannot be covered within this post. Suffice to say that if this optional property is supplied, it should be an object and defines the value of the this keyword in the onSuccess handler function.

Once you are ready to send your ADIJ request, call the send method. The ADIJ object will write out a script tag into the document which will look something like this:

<script type="text/javascript" src="MyADIJUrl.js?rid=ADIJ_1&uqid=1199900579224">

</script>

ADIJ will add 2 items to the querystring of the request:

• rid - this is the ADIJ request ID which the server will need to be aware of
• uqid - this is a date and time stamp of when the request was sent. This is used to stop ADIJ requests being cached.

How does ADIJ process the response?
When the server gets an ADIJ request, it needs to respond with JavaScript. It is very important that the interface developer works closely with an application developer to ensure the server side of the application is setup to handle ADIJ correctly.

The final response to the onSuccess handler defined on the ADIJ object will be JSON, but the response from the server will be a function call which will look something like:

Tools.ADIJ.prototype.handleResponse( id, json );

Tools.ADIJ is the ADIJ object itself.
Tools.ADIJ.prototype.handleResponse is a function on the prototype of Tools.ADIJ
id is the ID of the ADIJ request as passed to the server in the querystring of the request. This ID is auto-generated by the ADIJ object and automatically appended to the specified URL for the ADIJ request
json is the JSON object to pass back to the onSuccess handler defined in the instance of the ADIJ object given the ID id

By this method, multiple ADIJ requests can be sent from and handled by the client side code with ease.

In part 3 of this series, I will show just how simple it is to write the JavaScript code to use ADIJ.

No $

Over the past few months, I have been developing and testing my own JavaScript library. I am delighted to announce that JSquared is now open source software and available at Google Code.

I will be blogging about the features of the library over the coming few months. The library includes some asynchronous JavaScript tools and you can read part 1 of my series on asynchronous JavaScript.

Is CSS the ultimate expression of progressive enhancement?

Following up on my previous post about progressive enhancement, I wish to pose the question:
Is CSS the ultimate expression of progressive enhancement?

To help us address the question, lets briefly remind ourselves that progressive enhancement is a technique whereby the way a web page operates is enhanced if the user agent being used supports certain features but if the user agent does not, then nothing is lost. The user can still see all content and use all features of the web page.

So, does this hold true of CSS? Well, given valid markup, I believe it does and I certainly believe it should.

That does not answer the question posed though. I am firmly of the opinion that the answer is yes. CSS is so powerful and so able to change the way a web page looks but without itself forming any part of the content or functionality of that web page, that I believe it must be the ultimate expression of progressive enhancement.

Do you agree? Do you disagree?

Asynchronous JavaScript Part 1 - ADIJ

This is the first in a series of posts regarding asynchronous JavaScript techniques and tools.

In this edition, I will introduce ADIJ. I will ultimately provide code and examples for each of the tools I recommend using.

The What
Asynchronous DOM Injected JSON or ADIJ is what I have termed a fairly common technique found today for getting data from a server using JavaScript in an asynchronous fashion. This technique is more commonly known as the script tag hack.

The How
Its a very simple technique which involves simply adding a script tag with a valid src attribute to the DOM tree. When the script tag is added to the document, the browser will make a request to the URL specified in the src, and load the returned content which will be interpreted and executed immediately.

The Why
I have found ADIJ most useful thus far in mapping mashups. The data returned will normally be in JSON format and this is efficient for parsing and adding points to a map. But the technique can work very well for any public data which needs to be delivered asynchronously to the browser.

Any issues?
Any data returned using ADIJ can be intercepted and in theory, scripts can be injected into your page. However, I normally ensure that I only accept valid JSON containing Objects and Strings. I would never execute a function returned by this technique. This is not a major issue, but one to be aware of. Only ever use ADIJ for fully public data, never for secure data. Be aware that all cookies are provided when the request is made.

Why ADIJ?
ADIJ is more than just a silly name for the script tag hack. ADIJ is a helper object which can allow you to send multiple requests on demand and receive valid JSON data back with co-operation from the server.

Using ADIJ, you provide a handler function (similar to the callback in AJAX) which will receive the JSON data when the request completes successfully. The ADIJ object will manage your requests and handle all the responses for you, ultimately passing the response back to your specified handler function.

The ADIJ object provides a powerful first item in your asynchronous JavaScript toolkit.

In part 2 of this series I will go through the ADIJ object and provide an example.