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
220
PHP Payments with Omnipay
drewm
0
100
HTML5 APIs Confoo Vancouver
drewm
0
250
Learn to Love Regular Expressions
drewm
0
120
Ecommerce Projects with Moltin
drewm
0
680
Writing Portable PHP
drewm
0
97
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
2025-02-21 ゆるSRE勉強会 Enhancing SRE Using AI
yoshiiryo1
1
370
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.7k
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.3k
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
7
1.8k
全文検索+セマンティックランカー+LLMの自然文検索サ−ビスで得られた知見
segavvy
2
110
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
2
1.5k
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
210
人はなぜISUCONに夢中になるのか
kakehashi
PRO
6
1.7k
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
740
Oracle Cloud Infrastructure：2025年2月度サービス・アップデート
oracle4engineer
PRO
1
220
運用しているアプリケーションのDBのリプレイスをやってみた
miura55
1
740
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.6k

Featured

See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Embracing the Ebb and Flow
colly
84
4.6k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Thoughts on Productivity
jonyablonski
69
4.5k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Building Adaptive Systems
keathley
40
2.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Building Applications with DynamoDB
mza
93
6.2k

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