• STRATEGIES FOR - PROGRESSIVE ENHANCEMENT THINK VITAMIN JAVASCRIPT CONFERENCE - 13 SEPTEMBER 2010 -

DREW MCLELLAN

FRONT END DEVELOPER (SOMETIMES)

JQUERY

GOOD JAVASCRIPT DESIGN STARTS WITHOUT JAVASCRIPT

THE WEB WORKS IN LAYERS

1 HTML IMPLEMENTATION

2 STYLE WITH CSS

3 ENHANCE WITH JAVASCRIPT

4 CHECK YOU’VE NOT BROKEN ANYTHING

PROGRESSIVE ENHANCEMENT !== GRACEFUL DEGRADATION

BE THE BEST DEVELOPER YOU CAN BE

“WE REQUIRE JAVASCRIPT”

DESIGNING A FEATURE TO WORK WITHOUT JAVASCRIPT IS NOT EXTRA EFFORT

IT’S BASE EFFORT.

ADDING JAVASCRIPT IS THE EXTRA BIT

PRIORITISE BASIC FUNCTIONALITY

HIJACK!

SIMPLE, RIGHT?

A SIDE NOTE ON CSS...

<body> $(‘body’).addClass(‘js’); <body class=“js”> .js #thing

PREVENT CSS FOR HIJACKED ELEMENTS MESSING WITH THE DEFAULT STATE

THUMBNAIL IMAGES

“ADD A FRIEND” LINK

BASIC AJAX FORM

DRAG’N’DROP REORDERING

MODAL DIALOGUES

CAROUSELS

MORE CAROUSELS

REMEMBER:

1 HTML IMPLEMENTATION

2 STYLE WITH CSS

3 ENHANCE WITH JAVASCRIPT

4 CHECK YOU’VE NOT BROKEN ANYTHING