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

Strategies For Progressive Enhancement

Drew McLellan
September 27, 2011
Technology
1
91

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
120
HTML5 APIs Confoo Montreal
drewm
1
200
PHP Payments with Omnipay
drewm
0
94
HTML5 APIs Confoo Vancouver
drewm
0
210
Learn to Love Regular Expressions
drewm
0
78
Ecommerce Projects with Moltin
drewm
0
670
Writing Portable PHP
drewm
0
89
Getting to Grips with Regular Expressions
drewm
1
240
Back to Front Performance - Oct 2013
drewm
0
110

Other Decks in Technology

See All in Technology
【基本】データベース設計
oracle4engineer
PRO
2
180
認知症フレンドリーテックとスタックチャン
naokiuc
0
240
社内アプリで Cloudflare D1を プロダクト運用してみた体験談(Tokyo)
haochenx
0
120
成長をサポートするピープルマネジメントのやり方
sioncojp
9
1.2k
生成AIの変革の時代に、 直近1年で直面した課題とその解決策
ktc_wada
0
650
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
250
Python と Snowflake はズッ友だょ！~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
2
140
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな（2024年版）
infiniteloop_inc
5
18k
本当のAWS基礎
toru_kubota
1
630
ワールドカフェI ／チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
150
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
150
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
1
1.7k

Featured

See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
13
8.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
79
43k
Building Your Own Lightsaber
phodgson
100
5.7k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
21
6.4k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
The Cost Of JavaScript in 2023
addyosmani
20
3.9k
Robots, Beer and Maslow
schacon
PRO
155
7.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