Progressive Enhancement

[00:00:00]
>> Jason Pamental: So the notion of progressive enhancement is creating a good baseline experience for any device, any user, any browser. Everything else is an enhancement. So the core experience is the HTML document, that's really the basis. So no styles whatsoever, that's the core. Is it marked up semantically correctly?

[00:00:22]
So, do you have things in a sensible order? If you were to turn off the stylesheet and load it on your phone, that's kind of the litmus test right there. If you can read the page and you can get the content, and you can understand the hierarchy of headings to give you an idea of what you should be looking at and what's more important than something else, that's the basis.

[00:00:41]
That's the baseline, right there. So, notice I said that it's the HTML without anything else. So, where does that leave things that are entirely driven and delivered by JavaScript? Nowhere. And again, I'm not trying to dig on JavaScript at all here, especially not in Mark's house cuz I think he'd get pretty upset with me, but it is important.

[00:01:07]
gov.uk, about 1% of the users don't get JavaScript, they don't know why. Maybe 0.3% have actively turned it off, the rest of them? Somewhere along the line the delivery failed. So if the gov.uk site required that the JavaScript be present in order to function, they would not be serving literally millions of people a day.

[00:01:33]
I mean, it's a small percentage of a really, really big number, the people that go to the gov.uk site, it's still a very large number of users. So the whole premise of progressive enhancement is that you're delivering something that will still function, everything else is an enhancement. So CSS is an enhancement to make the layout better, start to add more definition and hierarchy and structure to the way things layout on the page.

[00:02:00]
The fonts are another enhancement. So that, the CSS, should be there to style things and create greater levels of more intentional hierarchy. But then the font itself coming in is another enhancement that will add a little bit more tone of voice, a little bit more brand recognition, a little bit more emotional appeal.

[00:02:23]
So, what we want to make sure when we are adding in our fonts, notice the first line is just linking to the CSS. So that could be linking out to Google Web Fonts, it could be linking to Typekit, it could be linking to fonts.com, doesn't matter. First thing is you're linking to a style sheet.

[00:02:44]
It's not dependent upon JavaScript. The stuff that comes after is another enhancement. So, in this case, we're going to be using Bram Stein's Font Face Observer, which is a really great JavaScript library that manages the loading process for us. But it's all based on, first, you load it with CSS, that's the first link.

[00:03:04]
And then JavaScript will handle that process asynchronously, if JavaScript is working. So that's the interesting little layer on top of that. And looking down at what's happening in those first few lines of JavaScript, first, we've called for the CSS. And then as it starts to get in here, we're going to be adding and removing some classes that will allow our CSS to tie into whether or not those web fonts have loaded.

[00:03:35]
And that's using the font loading API, that's at the browser level, but it's also using session storage. So there's a weird little thing that Chrome does. Even if a font is in cache, it's probably still going to repaint the screen one page to the next. This completely avoids that.

[00:03:53]
So, it's one simple little thing that gets rid of this really annoying bug, where even after a subsequent page loads the content comes in, then it redraws the whole screen in order to flip it over to the web fonts. For whatever reason, instead of having it go look at the browser cache, using session storage is faster.

[00:04:12]
So, you don't see all of the code here, but what it's doing is it's going through, and we're constructing a promise that will list each of the different fonts that are being loaded, and it will check if they have been loaded, it'll set that session storage variable, and it just works every time.

[00:04:31]
So it really dramatically speeds up the shift from content loading and content now in the web font itself. In some cases it becomes totally imperceptible. Again, this is the important part here. We're backwards compatible and we are future friendly by using that link to the CSS, and then adding everything else beyond that.

[00:04:53]
There are two things that you have to remember when you link to CSS, it's a blocking request. When you link to JavaScript, unless you do something specifically, that is likewise a blocking request. So in the life cycle of that page, the HTML is downloaded, then it starts to parse through the DOM and it looks for external assets that it needs to go get.

[00:05:14]
It's gonna find the CSS, you want that CSS to come in. You want it to process all of that CSS before it starts rendering the rest of the page, and there's a few good reasons for that. But JavaScript, in most cases, if it is enhancing what's going on on the page, it's okay to either have some things load asynchronously or deferred.

[00:05:36]
Depends on the order in which you need them to process. So I'm not gonna get too deeply into that, but you have those two main choices when you're adding JavaScript to a page to decide, is it okay if this is an isolated thing? And it just goes off and does its thing and then it starts to work.

[00:05:52]
Or, is it a dependency? I need to have jQuery load before this plugin. You can defer them both, and it starts dealing with them after it has drawn the page, then it will go get the JavaScript.