Nicholas Zakas: Progressive Enhancement 2.0

Uploaded by yuilibrary on 19.03.2012

>> NICHOLAS ZAKAS: Okay, excellent. So I did used to work at Yahoo!. I'm now a consultant,
which is why I wear these jackets, because it makes you look more professional when you
go in and talk with people. I want to apologize upfront: I lost my voice a couple of days
ago and it's just starting to come back, so this talk may actually sound a lot like a
conversation with an iPhone user which just kind of drops out randomly.
What else do I do? I write a bunch of books. I wrote this one, High Performance JavaScript,
this one, which just came out last month -- and we have three to give away at the end of the
night, so stay tuned for that -- and another one that will be coming out later this year.
And yes, that's a lot of books, but the NFL season is over and I have nothing else to
do on Sundays. The jokes don't get any better, so you might as well laugh at these.
And on Twitter, I am @slicknet.
>> NICHOLAS ZAKAS: Thank you.
Before I get started with progressive enhancement, I want to talk a little bit about the history
of web development, where we came from leading to where we are today. In the beginning there
was Mosaic. How many people have used Mosaic? Wow, that's a lot of people. Way more than
I expected. That's great. So Mosaic was the first web browser, created at the University
of Illinois where they have this great plaque that says 'Web Browser'. It's great. This
is like the only plaque that just has a regular noun at the top; I don't think that there's
any that's like 'Telephone' or 'Television', but for a web browser we have it.
This is what Mosaic looked like. Yeah, very pretty. This is what the web looked like at
the beginning. Everything was a gray background, black text, blue links, and if you were lucky,
a few images thrown in for good measure. Then came Netscape. Pretty much the same. We still
had these gray pages with black text and blue links. Netscape 2 -- same thing. The big change
there is we got the cool logo in the corner, which actually began the animated gif throbber
thing that browsers do all the time now, so thank you Netscape.
Then Netscape 3. This is where things started to get interesting, because you start to see
the beginning of page layout, right? How do you think that was laid out? Tables. Damn
straight. We had different size fonts, but the really interesting thing about Netscape
3 is that you could add color to your page. All of a sudden, the web went from being a
gray background on every single page to where you were now able to choose a different background,
which could be a color, a background image. You could change the text color as well. It
was very exciting. So you started to see these appear everywhere, these little buttons: 'Best
viewed in Netscape'. That's because that was the only browser that supported color, and
that gave us awesome web pages like this. 'Best viewed in Netscape', right there it
says it. Although I would argue there's no best way to view this.
Then came Internet Explorer. This is IE 2. Anybody ever use IE 2? Yeah? Wow, a bunch
of people too. Very much like Mosaic and Netscape 2 until we got to IE 3, which had color. You
know what quickly followed after that? It was these buttons showing up everywhere: 'Best
viewed in Internet Explorer'. Okay. So now developers started to say we have two browsers
that have similar capabilities -- well, I'm going to make my page so that it's best viewed
in both, and that awesome page that we saw earlier is also best viewed in Internet Explorer.
That little button is actually an animated gif that rotates between Netscape and IE.
Yeah, it's just a screenshot so you don't get to really see the awesome of it.
This was very frustrating to Tim Berners-Lee, because this was not what the internet was
supposed to be about. The whole idea was you write a document anywhere and then you can
access it from anywhere, and yet all of a sudden we had all of these little buttons
popping up saying best viewed with this browser, best viewed with that browser. It ended up
being a pain.
And so we entered the graceful degradation phase of web development. Graceful degradation
comes from physical products, because physical products, if something goes wrong, they can
hurt you. If your toaster just stopped working, it shouldn't explode in your face. In these
physical products, we build them with an anticipation of what could possibly fail, and then providing
some sort of logical fallback for that. For example, in real life, if you were to fear
that zombies would attack, you would come up with a logical fallback plan. I took this
photo in Hawaii, actually, which is not a huge bed of zombie activity.
Thank you for laughing. Seriously, if you look at any zombie movies, they don't take
place in Hawaii. But the fact of the matter is you have to be prepared just in case, so
this bunker is property of Bri if zombies attack.
There's a really good article written by Peter Paul Koch -- you may have heard of, founder
of QuirksMode -- down on Digital Web Magazine. This is all about graceful degradation. It's
ten years old now, but it's kind of nice to go back and read through. He talks about the
decisions that he went through with deciding whether he should support Netscape or not.
It's really great to go back and read these old articles to see just how far we've come
in web development.