Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Strategies For Progressive Enhancement
Search
Drew McLellan
September 27, 2011
Technology
1
94
Strategies For Progressive Enhancement
Drew McLellan
September 27, 2011
Tweet
Share
More Decks by Drew McLellan
See All by Drew McLellan
HTML5 APIs PHP Yorkshire 2017
drewm
1
160
HTML5 APIs Confoo Montreal
drewm
1
240
PHP Payments with Omnipay
drewm
0
110
HTML5 APIs Confoo Vancouver
drewm
0
270
Learn to Love Regular Expressions
drewm
0
140
Ecommerce Projects with Moltin
drewm
0
690
Writing Portable PHP
drewm
0
110
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
Shadow DOM & Security - Exploring the boundary between light and shadow
masatokinugawa
0
660
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
220
「AI駆動開発」のボトルネック『言語化』を効率化するには
taniiicom
1
120
P2P ではじめる WebRTC のつまづきどころ
tnoho
1
220
スプリントゴール未達症候群に送る処方箋
kakehashi
PRO
1
200
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
wooootack
1
120
激動の時代、新卒エンジニアはAIツールにどう向き合うか。 [LayerX Bet AI Day Countdown LT Day1 ツールの選択]
tak848
0
550
地図と生成AI
nakasho
0
700
ML Pipelineの開発と運用を OpenTelemetryで繋ぐ @ OpenTelemetry Meetup 2025-07
getty708
0
260
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
390
Wasmで社内ツールを作って配布しよう
askua
0
130
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
170
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
GitHub's CSS Performance
jonrohan
1031
460k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Code Reviewing Like a Champion
maltzj
524
40k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Transcript
- STRATEGIES FOR - PROGRESSIVE ENHANCEMENT THINK VITAMIN JAVASCRIPT CONFERENCE
- 13 SEPTEMBER 2010 -
DREW MCLELLAN
FRONT END DEVELOPER (SOMETIMES)
JQUERY
GOOD JAVASCRIPT DESIGN STARTS WITHOUT JAVASCRIPT
THE WEB WORKS IN LAYERS
HTML IMPLEMENTATION 1
STYLE WITH CSS 2
ENHANCE WITH JAVASCRIPT 3
CHECK YOU’VE NOT BROKEN ANYTHING 4
PROGRESSIVE ENHANCEMENT !== GRACEFUL DEGRADATION
BE THE BEST DEVELOPER YOU CAN BE
“WE REQUIRE JAVASCRIPT”
DESIGNING A FEATURE TO WORK WITHOUT JAVASCRIPT IS NOT EXTRA
EFFORT
IT’S BASE EFFORT.
ADDING JAVASCRIPT IS THE EXTRA BIT
PRIORITISE BASIC FUNCTIONALITY
HIJACK!
SIMPLE, RIGHT?
A SIDE NOTE ON CSS...
<body> $(‘body’).addClass(‘js’); <body class=“js”> .js #thing
PREVENT CSS FOR HIJACKED ELEMENTS MESSING WITH THE DEFAULT STATE
THUMBNAIL IMAGES
“ADD A FRIEND” LINK
BASIC AJAX FORM
DRAG’N’DROP REORDERING
MODAL DIALOGUES
CAROUSELS
MORE CAROUSELS
REMEMBER:
HTML IMPLEMENTATION 1
STYLE WITH CSS 2
ENHANCE WITH JAVASCRIPT 3
CHECK YOU’VE NOT BROKEN ANYTHING 4