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

Strategies For Progressive Enhancement

Drew McLellan
September 27, 2011
Technology
1
94

Strategies For Progressive Enhancement

Drew McLellan

September 27, 2011
Tweet

More Decks by Drew McLellan

See All by Drew McLellan
HTML5 APIs PHP Yorkshire 2017
drewm
1
140
HTML5 APIs Confoo Montreal
drewm
1
210
PHP Payments with Omnipay
drewm
0
100
HTML5 APIs Confoo Vancouver
drewm
0
250
Learn to Love Regular Expressions
drewm
0
110
Ecommerce Projects with Moltin
drewm
0
680
Writing Portable PHP
drewm
0
96
Getting to Grips with Regular Expressions
drewm
1
250
Back to Front Performance - Oct 2013
drewm
0
120

Other Decks in Technology

See All in Technology
いま現場PMのあなたが、 経営と向き合うPMになるために 必要なこと、腹をくくること
hiro93n
9
7.6k
データ基盤におけるIaCの重要性とその運用
mtpooh
4
500
2024年活動報告会（人材育成推進WG・ビジネスサブWG） / 20250114-OIDF-J-EduWG-BizSWG
oidfj
0
220
2024AWSで個人的にアツかったアップデート
nagisa53
1
110
CDKのコードレビューを楽にするパッケージcdk-mentorを作ってみた/cdk-mentor
tomoki10
0
210
embedパッケージを深掘りする / Deep Dive into embed Package in Go
task4233
1
210
今年一年で頑張ること / What I will do my best this year
pauli
1
220
AWSの生成AIサービス Amazon Bedrock入門！（2025年1月版）
minorun365
PRO
7
470
AWS re:Invent 2024 re:Cap Taipei (for Developer): New Launches that facilitate Developer Workflow and Continuous Innovation
dwchiang
0
160
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
54k
Alignment and Autonomy in Cybozu - 300人の開発組織でアラインメントと自律性を両立させるアジャイルな組織運営 / RSGT2025
ama_ch
1
2.4k
なぜfreeeはハブ・アンド・スポーク型の データメッシュアーキテクチャにチャレンジするのか？
shinichiro_joya
2
450

Featured

See All Featured
Visualization
eitanlees
146
15k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
960
Six Lessons from altMBA
skipperchong
27
3.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.5k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
Making the Leap to Tech Lead
cromwellryan
133
9k
Speed Design
sergeychernyshev
25
740
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k

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