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
190
HTML5 APIs Confoo Montreal
Avatar for Drew McLellan drewm
1
260
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
690
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
2026年はチャンキングを極める！
Avatar for shibuiwilliam shibuiwilliam
8
1.7k
Claude Codeベストプラクティスまとめ
Avatar for みのるん minorun365
55
31k
開発メンバーが語るFindy Conferenceの裏側とこれから
Avatar for sontixyou sontixyou
2
420
20260129_CB_Kansai
Avatar for Takuya Yonezawa takuyay0ne
1
240
エンジニアとマネジメントの距離/Engineering and Management
Avatar for 小田中育生 ikuodanaka
3
690
あたらしい上流工程の形。 0日導入からはじめるAI駆動PM
Avatar for 熊井悠 kumaiu
4
600
3分でわかる！新機能 AWS Transform custom
Avatar for sato4mi sato4mi
1
270
2人で作ったAIダッシュボードが、開発組織の次の一手を照らした話― Cursor × SpecKit × 可視化の実践 ―　Qiita AI Summit
Avatar for NOBORU ITOU noalisaai
1
310
ファインディの横断SREがTakumi byGMOと取り組む、セキュリティと開発スピードの両立
Avatar for adachi.ryo rvirus0817
1
600
EventBridge API Destination × AgentCore Runtimeで実現するLambdaレスなイベント駆動エージェント
Avatar for Har1101 har1101
7
290
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
Avatar for ないとー bwkw
2
480
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
13k

Featured

See All Featured
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.3k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
61
52k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
120
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.7k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
390
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
120
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
3.9k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.2k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
9.5k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
170
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
0
260

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