It's Not About no-JS

I recently took the plunge into GitHub at work, and it has proven to be an invaluable tool, not just for the code-versioning safety net it provides, but more for the collaborative workflow it enables: issues get raised and assigned, code commits are referenced and quality-assured, and everything is documented without much effort. It’s pretty neat.

Issues can be tagged with labels, and we get to make them up ourselves. Our colleague Tracy has “repurposed” a set of labels she found on her travels, and thought they might be useful for the rest of the team. We had a chance to chat about the new labels at an agile planning poker session last week, and a few questions arose, so Tracy sent us a couple of links to websites which would provide clarification.

I had a look at the websites this morning, and one of them had a link to a tutorial on Gitflow Workflow, which Tracy had mentioned too.

“Hmm,” I thought, “I don’t know what that is; maybe I should take a look.”

So I did, and was prompted to write this.

Sigh; JavaScript

I steadfastly refuse to upgrade my installation of Internet Explorer. Microsoft has kindly infected my PC with nagware that triggers with unpredictable regularity and tells me how much more awesome my experience of the Web could be, all of which I am politely ignoring.

I realise I could install a virtual server on which to test with older versions of browsers - or even just sign up to BrowserStack - but this way I get to feel a bit nonconformist, like I’m rebelling against The Man.

Or I’m lazy. Either way, I’ve got a folder filled with screenshots of websites that won’t work in IE9, and I discovered recently I’m not alone in this endeavour. My screenshots range from slow-loading blank pages, through non-functional layouts, to friendly messages saying my browser is “unsupported” and wouldn’t I like to try a different one.

That last example is interesting: note the browser chrome - it’s Firefox, which I keep up to date. It’s not the browser that’s unsupported, it’s my chosen setup Disqus takes objection to.

Po-tay-to, po-tat-to. The point is, I’m seeing a lot of this sort of thing, on websites where the public-facing functionality is not that complicated. LinkedIn displays profiles of their users. Disqus takes user-submitted content and adds it to a conversation thread. Static content and form submissions. Bread and butter stuff for HTML.

However, when I looked at the tutorial on Gitflow Workflow, I realised this was something special, something I hadn’t seen before.

First, let’s look at Atlassian’s Gitflow tutorial in all its fully-loaded and rendered glory in IE9:

What got my attention was the loading behaviour. It’s very faint, but can you spot the content?

The page comes in with content (albeit barely visible) and after loading, it goes blank. Intriguing. The next step is always the same: open Firefox, switch off both JavaScript and CSS, load the page and see what happens. Here’s where it got weird:

All the content is there. Keyboard navigable, NVDA screen reader is happy with it - it’s even responsive. WTF?

So I dug a little deeper.

That’s not the React-tion I was looking for

Looking at the code, I suspect the website may be running on React.js.

As you can see, the content is in there, buried under swathes of generated markup.

However, using the crappy IE developer tools to inspect the DOM after page load, what’s left is this:

<noscript data-reactid=".0"/>

For reasons that I’m insufficiently interested in to bother investigating, React and IE9 don’t get along. Rather than just leave users with the content, the content is dynamically removed.

On the other hand, with JS disabled and a tiny CSS tweak...

It’s even responsive:

I confess I just don’t get it.

I freely admit that I have no experience of developing what many in the community might call “real” web apps: your GitHubs, and your Google Maps - applications where the user’s experience hinges on aspects which have no equivalent in plain HTML and CSS, like dragging and zooming and instant notifications.

But this is not that. This is a tutorial. This is a bunch of text with related figures, on pages linked to one another. This is sharing information - the foundational reason behind the creation of the World Wide Web.

Why on earth would you spend all that time making content for other people, taking care to write it well so it’s easy to understand, creating diagrams to illustrate the points for even more clarity, and then deliver it in a way that not only makes it inaccessible to some users, but also breaks the inherent fault-tolerant nature of the medium and purposely removes the content?

I just don’t get it, but what worries me more is that so many folks appear to accept this kind of thing as normal, as just the way things are done on the modern Web.