Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Strategies For Progressive Enhancement

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

Strategies For Progressive Enhancement

Avatar for Drew McLellan

Drew McLellan

September 27, 2011
Tweet

More Decks by Drew McLellan

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

Other Decks in Technology

See All in Technology
Databricksアシスタントが自分で考えて動く時代に! エージェントモード体験もくもく会
Avatar for Takaaki Yayoi taka_aki
0
320
パネルディスカッション資料 (at Tableau Now! - 2026-02-26)
Avatar for Yoshitaka Arakawa yoshitakaarakawa
0
1.1k
Claude Cowork Plugins を読む - Skills駆動型業務エージェント設計の実像と構造
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
0
260
オンプレとGoogle Cloudを安全に繋ぐための、セキュア通信の勘所
Avatar for Yuta Ozaki waiwai2111
3
1.1k
OSSで構築するIT基盤管理実践事例: NetBox・Snipe-IT・FreeRADIUS+PrivacyIDEA / Practical Case Studies of IT Infrastructure Management Using OSS
Avatar for NTT docomo Business nttcom
0
200
どこで打鍵するのが良い？ IaCの実行基盤選定について
Avatar for NRI Netcom nrinetcom
PRO
2
170
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
5
18k
Oracle Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
1.1k
DX Improvement at Scale
Avatar for ntk1000 ntk1000
2
290
入門DBSC
Avatar for Yoshikazu Nojima ynojima
0
130
Oracle Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
1.6k
トップマネジメントとコンピテンシーから考えるエンジニアリングマネジメント
Avatar for Toru Yamaguchi a.k.a zigorou zigorou
3
540

Featured

See All Featured
Claude Code のすすめ
Avatar for schroneko schroneko
67
220k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.1k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
930
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.5k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
300
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.9k

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