</>
— Jun 26, 2013 —

What JavaScript is really for

Enhancement.

I could leave it at that, but I'd look back in the years to come and just think I was too lazy to write anything more on the subject.

I have a confession. Until this month (it's currently June of 2013), I can hold my hand up and say I have never built a truly progressively enhanced website.

Actually, I'll add a caveat to that; Until this month, I have never knowingly built a truly progressively enhanced website that utilised JavaScript.

A combination of circumstance and laziness

The reasons why I haven't until now are many and varied, but I can probably group the vast majority into the 'budget and deadline' category.

In order to speed up the build process, jQuery was always included from the very beginning of the development process, which meant that it was far too easy for me to just add a bit of JavaScript to get some interactions working.

Sending forms, generating search results without leaving the page, auto-suggest, etc. All of these nice things we take for granted on modern day sites were built with no real acknowledgement of browsers with diminished capabilities.

And I don't just mean earlier versions of Internet Explorer here, I mean screen readers, text-only browsers and anything else that concerns accessibility and that which requires basic working functionality.

Websites need to 'cut the mustard'.

Boiling it down

It comes down to the fact that certain 'corners were cut' to meet deadlines and/or budgetary constraints in most cases. In other cases it was down to my lack of knowledge in the areas of progressive enhancement and accessibility.

I used to plump for the graceful degradation approach, but the more you learn, the more you realise you didn't know. To re-use the quote from the end of my talk at MK Geek Night:

“To know is to know that you know nothing. That is the meaning of true knowledge.” - Confucius

So I began advocating the progressive enhancement approach without having ever really put it fully into practice. I knew it was right. It was how I should be building all of my websites. But actually doing it? Far more difficult.

It's not that difficult

OK, it's not difficult.

You build the entire site, with all working functionality, without JavaScript, but bearing in mind the advantages of utilising JavaScript as a further layer of interaction. The enhancement I referred to right at the beginning.

The difficult bit was changing the way I work, and my mindset, to build a far more robust solution.

So how did I change the way I went about this particular project that has changed the way I will approach all future projects?

Turn off JavaScript

It's as easy as that.

By developing and testing in a browser with JavaScript always turned off, you have no choice but to make the site work.

When you're happy that it's all working, switch it back on and make magical javasript-y (that's a word, right?) things happen.

Add hero sliders, use instant form validation, load your search results without loading a new page, drop in infinite scrolling.

But not until your site works without all that flashy gubbins.

To close on a rant

All these amazing looking, interactive websites that appears on sites like Awwwards, I can probably visit 9 out of 10 sites (he says pulling statistics out of thin air), turn off JavaScript, and they will fundamentally break.

I've even seen some that just display a blank white page.

Really?

That's not good enough in my books.

And I don't intend to fail on this front again. I hope that you will all try to do the same.