Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Strategies For Progressive Enhancement

Avatar for Drew McLellan Drew McLellan
September 27, 2011
Technology
110
1

Strategies For Progressive Enhancement

Avatar for Drew McLellan

Drew McLellan

September 27, 2011

More Decks by Drew McLellan

See All by Drew McLellan
HTML5 APIs PHP Yorkshire 2017
Avatar for Drew McLellan drewm
1
240
HTML5 APIs Confoo Montreal
Avatar for Drew McLellan drewm
1
290
PHP Payments with Omnipay
Avatar for Drew McLellan drewm
0
140
HTML5 APIs Confoo Vancouver
Avatar for Drew McLellan drewm
0
300
Learn to Love Regular Expressions
Avatar for Drew McLellan drewm
0
190
Ecommerce Projects with Moltin
Avatar for Drew McLellan drewm
0
700
Writing Portable PHP
Avatar for Drew McLellan drewm
0
150
Getting to Grips with Regular Expressions
Avatar for Drew McLellan drewm
1
290
Back to Front Performance - Oct 2013
Avatar for Drew McLellan drewm
0
130

Other Decks in Technology

See All in Technology
遠藤な_めぐろLT #38 「社内のAI活用推進」@麻布台_20261009
Avatar for Naoya Endo endonanana
0
130
Claude Code本は、どのように執筆チームで書かれたか
Avatar for Oikon oikon48
1
380
"優秀な誰か"の下位互換にならないために
Avatar for Yuto Nagai(Future) yut0naga1_fa
1
1.8k
実践！Cloud Run ハンズオン！！ / Cloud Run handson
Avatar for y-ohgi y0hgi
2
280
How to Design Configuration for Rails Applications
Avatar for Shinichi Maeshima willnet
1
780
Rustuna: Rustによる高速なOptuna実装
Avatar for Preferred Networks pfn
PRO
0
190
大型犬好きによるPugの紹介
Avatar for yamanoku yamanoku
1
160
「Docker Desktop不要の時代」は 来たのか？
Avatar for ueponx ueponx
0
770
「事実」を「計測」して、「解釈」する 〜AWS Lambdaのメモリ最適解の見つけ方〜
Avatar for maimyyym maimyyym
0
170
触りたくないデータに、どう触るか AI時代のRBACアクセスガバナンス
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
0
260
サブエージェントと Claude Mods で作る独自 Advisor ツールの話
Avatar for Kenichi Odo kenichiodo
2
160
DevelopersIO 2026 知識の地図を描く ─ オントロジーとは何か？
Avatar for Satoru Ishikawa ishikawa_satoru
1
1.7k

Featured

See All Featured
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
2
2.9k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
3.4k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
1
400
Design in an AI World
Avatar for tapps tapps
1
350
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
940
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.8k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
1
400
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
520
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
550
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
516
110k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
520
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
620

Transcript

  1. - STRATEGIES FOR - PROGRESSIVE ENHANCEMENT THINK VITAMIN JAVASCRIPT CONFERENCE

    - 13 SEPTEMBER 2010 -

  2. DREW MCLELLAN

  3. FRONT END DEVELOPER (SOMETIMES)

  4. JQUERY

  5. GOOD JAVASCRIPT DESIGN STARTS WITHOUT JAVASCRIPT

  6. THE WEB WORKS IN LAYERS

  7. HTML IMPLEMENTATION 1

  8. STYLE WITH CSS 2

  9. ENHANCE WITH JAVASCRIPT 3

  10. CHECK YOU’VE NOT BROKEN ANYTHING 4

  11. PROGRESSIVE ENHANCEMENT !== GRACEFUL DEGRADATION

  12. BE THE BEST DEVELOPER YOU CAN BE

  13. “WE REQUIRE JAVASCRIPT”

  14. DESIGNING A FEATURE TO WORK WITHOUT JAVASCRIPT IS NOT EXTRA

    EFFORT

  15. IT’S BASE EFFORT.

  16. ADDING JAVASCRIPT IS THE EXTRA BIT

  17. PRIORITISE BASIC FUNCTIONALITY

  18. HIJACK!

  19. SIMPLE, RIGHT?

  20. A SIDE NOTE ON CSS...

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

  22. PREVENT CSS FOR HIJACKED ELEMENTS MESSING WITH THE DEFAULT STATE

  23. THUMBNAIL IMAGES

  24. “ADD A FRIEND” LINK

  25. BASIC AJAX FORM

  26. DRAG’N’DROP REORDERING

  27. MODAL DIALOGUES

  28. CAROUSELS

  29. MORE CAROUSELS

  30. REMEMBER:

  31. HTML IMPLEMENTATION 1

  32. STYLE WITH CSS 2

  33. ENHANCE WITH JAVASCRIPT 3

  34. CHECK YOU’VE NOT BROKEN ANYTHING 4