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
130
HTML5 APIs Confoo Montreal
drewm
1
200
PHP Payments with Omnipay
drewm
0
99
HTML5 APIs Confoo Vancouver
drewm
0
240
Learn to Love Regular Expressions
drewm
0
100
Ecommerce Projects with Moltin
drewm
0
680
Writing Portable PHP
drewm
0
96
Getting to Grips with Regular Expressions
drewm
1
240
Back to Front Performance - Oct 2013
drewm
0
120

Other Decks in Technology

See All in Technology
Taming you application's environments
salaboy
0
190
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
150
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
300
Lexical Analysis
shigashiyama
1
150
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
530
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
130
なぜ今 AI Agent なのか _近藤憲児
kenjikondobai
4
1.4k
Zennのパフォーマンスモニタリングでやっていること
ryosukeigarashi
0
140
[CV勉強会@関東 ECCV2024 読み会] オンラインマッピング x トラッキング MapTracker: Tracking with Strided Memory Fusion for Consistent Vector HD Mapping (Chen+, ECCV24)
abemii
0
220
Engineer Career Talk
lycorp_recruit_jp
0
180
SREが投資するAIOps ~ペアーズにおけるLLM for Developerへの取り組み~
takumiogawa
1
390
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
5
480

Featured

See All Featured
4 Signs Your Business is Dying
shpigford
180
21k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
What's in a price? How to price your products and services
michaelherold
243
12k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Into the Great Unknown - MozCon
thekraken
32
1.5k

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