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
170
HTML5 APIs Confoo Montreal
Avatar for Drew McLellan drewm
1
250
PHP Payments with Omnipay
Avatar for Drew McLellan drewm
0
110
HTML5 APIs Confoo Vancouver
Avatar for Drew McLellan drewm
0
270
Learn to Love Regular Expressions
Avatar for Drew McLellan drewm
0
140
Ecommerce Projects with Moltin
Avatar for Drew McLellan drewm
0
690
Writing Portable PHP
Avatar for Drew McLellan drewm
0
110
Getting to Grips with Regular Expressions
Avatar for Drew McLellan drewm
1
260
Back to Front Performance - Oct 2013
Avatar for Drew McLellan drewm
0
120

Other Decks in Technology

See All in Technology
TypeScript入門
Avatar for Recruit recruitengineers
PRO
35
12k
モダンフロントエンド 開発研修
Avatar for Recruit recruitengineers
PRO
10
6.3k
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
Avatar for Yuji Oshima yuj1osm
2
260
シークレット管理だけじゃない！HashiCorp Vault でデータ暗号化をしよう / Beyond Secret Management! Let's Encrypt Data with HashiCorp Vault
Avatar for ののし nnstt1
3
160
DDD集約とサービスコンテキスト境界との関係性
Avatar for Aja9tochin pandayumi
2
240
ヒューリスティック評価を用いたゲームQA実践事例
Avatar for gree_tech gree_tech
PRO
0
450
Nstockの一人目エンジニアが 3年間かけて向き合ってきた セキュリティのこととこれから〜あれから半年〜
Avatar for わだよし yo41sawada
0
190
生成AI時代のデータ基盤
Avatar for shibuiwilliam shibuiwilliam
4
2.7k
コスト削減の基本の「キ」～ コスト消費3大リソースへの対策 ～
Avatar for Makky12 smt7174
2
330
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
Avatar for MasahiroKawahara masahirokawahara
2
1.1k
ZOZOマッチのアーキテクチャと技術構成
Avatar for ZOZO Developers zozotech
PRO
3
1.2k
Language Update: Java
Avatar for Yuichi.Sakuraba skrb
2
230

Featured

See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k
Code Review Best Practice
Avatar for Trisha Gee trishagee
70
19k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
696
190k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
It's Worth the Effort
Avatar for 3n 3n
187
28k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
The Language of Interfaces
Avatar for Des Traynor destraynor
160
25k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k

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