Progressive Enhancement With JavaScript

Aaron Gustafson

AN EVENT APART - 25 APRIL 2008

Progressive Enhancement with JavaScript

PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT


What isProgressive

Enhancement?

2



ProgressiveEnhancement

vs.Graceful

Degradation

3



Graceful Degradation! A holdover from engineering

! Build for the latest browsers

! Test on older devices

! Happens at the end

! Accounts for few versions

! Expects a poor experience for older browsers

! Fixes major issues but little else

4


AN EVENT APART - 25 APRIL 2008 5



Progressive Enhancementfocuses on contentcontent

6



Content is why we build websites

and should beour central focus

7



How does it work?

8



Flavorful nugget of content(semantic goodness)



Rich, indulgent design



Sweet interactivity(keeps it from melting in your hands)



Technologies applied as layers

14



(Mr. Clarke’s web standards trifle)



Why a peanut m&m?



The peanut is good for

18

! diabetics

! search engine spiders

! mobile devices



It’s a basic levelof support



! some browsers only handle a certain level of CSS

! some companies turn o" JavaScript

Rich, chocolaty goodness



It can be beautiful(and progressive)



The candy coating

22

! JavaScript can turn a website into an experience

! we can deliver our scripts a la carte



How do we do it?



Restraint& Planning

24



Wieldyour power

wisely

25



Dear George Lucas, please don’t sue me. Kthxbye.

A long time ago, in acubicle far, far away...

26



DHTML

27

(was awful)



Spaghetti code

28

(our HTML was spaghetti too)



Things are better now,but we have new challenges

29



What canJavaScript do?

30



How shouldJavaScriptbe used?

31

JavaScript



Progressive Enhancementhelps us by reminding usto focus on the content

32



Back to basics

33

XHTML + HTTP



Back to basics

33

solid foundation



All code neededto understandand use a site

should exist beforeany scripts run

PE Maxim:

34



Period.

PE Maxim:

34



Consider lala.com

35



Without JavaScript

36



Without JavaScript

36

Doh!



And looking at the markup...

37



And looking at the markup...

37

Ugh!



What about search?

38



What aboutalternative devices?

39



EnterUnobtrusiveJavaScript

40

the cornerstone of ProgressiveEnhancement with JavaScript( )



Don’t do this

41

<a href="javascript:someFunction();">some text</a>

or

<a href="javascript:void(null);" onclick="someFunction();">some text</a>

or

<a href="#" onclick="someFunction();">some text</a>



An improvement, but still...

42

<a href="http://offsite.com" onclick="newWin( this.href ); return false;"> some text</a>

http://offsite.com

http://offsite.com



document.getElementsByTagName( 'body' )[0].onclick = clickDelegator;

function clickDelegator( e ){ e = ( e ) ? e : event; var el = e.target || e.srcElement;

// external links

if( el.nodeName.toLowerCase() == 'a' && el.getAttribute( 'rel' ) == 'external' ){ newWin( el.href ); }}

You’re hot

44



Keep the hot side hotand the cold side cold

45

or getting some separationbetween your CSS and JS( )



Remember stu" like this?

46

<a href="foo.html" style="color:blue;" onmouseover="this.style.color='red'"

onmouseout="this.style.color='blue'">Foo</a>



Remember stu" like this?

46

<a href="foo.html" style="color:blue;" onmouseover="this.style.color='red'"

onmouseout="this.style.color='blue'">Foo</a>

Obvisouly, we should be doing this instead:

a, a:link, a:visited { color: blue;}

a:hover { color: red;}



CSS waspoorly understood

back then

47



but we knowbetter now



don’t we?



Hmm...

48

for( i=0; i<objects.length; i++){ objects[i].style.display = 'none';}



Better

49

for( i=0; i<objects.length; i++){ objects[i].style.position = 'absolute'; objects[i].style.left = '-999em';

}



Separation

50

CSS:

.hidden { position: absolute; left: -999em;}

JavaScript:

for( i=0; i<objects.length; i++){ objects[i].addClassName( 'hidden' );

}



Maintenance options

51

! external style rules added to master CSS file by hand

! external CSS file added to the document by hand

! external CSS file added to the document via script

! embedding CSS in the document via script



But keep in mind

52



you need toavoid applying

script-related styles



until you knowyour script can run

and it hasinitialized properly



How do we do that?

53

! make your style rules specific:

.TabInterface-folder {

...

}

or

#TabInterface .tab {

...

}

#TabInterface .tab.active {

...

}



How do we do that?

54

! turn “on” script-related rules at run-time:

<div id="main" class="tabbed">

becomes

<div id="main" class="tabbed-on">



How do we do that?

54

! turn “on” script-related rules at run-time:

Default Activated

add “-on” to the class .tabbed .tabbed-on

add an activation class .auto-submit .auto-submit.active

change the form of the class .replace-me .replaced



Become a detective

55



Look for methods

56

function someFunction(){ if( !document.getElementsByTagName ) return; // code that uses document.getElementsByTagName()

...}



Look for methods

57

function someFunction(){ if( !document.getElementsByTagName || !document.getElementById ) return;

/* code that uses document.getElementsByTagName() and document.getElementById() */}



Look for elements

58

function someFunction(){ if( !document.getElementsByTagName || !document.getElementsByTagName( 'p' ) ) return;

/* code that uses document.getElementsByTagName() and requires the presence of a P element */ ...}



Look for identified elements

59

function someFunction(){ if( !document.getElementById || !document.getElementById( 'content' ) ) return;

// code that requires the presence of #content ...}



Look for objects

60

function someFunction(){ if( typeof( Prototype ) == 'undefined' ) return; // code that uses Prototype

...}



Look for object versions

61

function someFunction(){ if( typeof( Prototype ) == 'undefined' || parseFloat( Prototype.Version ) < 1.5 ) return;

// code that uses Prototype 1.5 or higher ...}



Look before you leap

62

window.onload = function(){ if( document.getElementsByTagName && document.getElementById ){

someFunction(); }};



Be progressive

63

! Start with the content, then work your way out

! Get unobtrusive

! Keep some distance between your styles & your scripts

! Put on your detective hat



Questions?

Progressive Enhancement With JavaScript

Technology

Transcript of Progressive Enhancement With JavaScript