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

Strategies For Progressive Enhancement

Avatar for Drew McLellan Drew McLellan
September 27, 2011
Technology
1
94

Strategies For Progressive Enhancement

Avatar for Drew McLellan

Drew McLellan

September 27, 2011
Tweet

More Decks by Drew McLellan

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

Other Decks in Technology

See All in Technology
Shadow DOM & Security - Exploring the boundary between light and shadow
Avatar for Masato Kinugawa masatokinugawa
0
660
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
Avatar for Toshiaki Baba netmarkjp
0
220
「AI駆動開発」のボトルネック『言語化』を効率化するには
Avatar for Tomohiro Tani taniiicom
1
120
P2P ではじめる WebRTC のつまづきどころ
Avatar for tnoho tnoho
1
220
スプリントゴール未達症候群に送る処方箋
Avatar for KAKEHASHI kakehashi
PRO
1
200
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
Avatar for Kyosuke Awata wooootack
1
120
激動の時代、新卒エンジニアはAIツールにどう向き合うか。　[LayerX Bet AI Day Countdown LT Day1 ツールの選択]
Avatar for tak tak848
0
550
地図と生成AI
Avatar for なかしょ nakasho
0
700
ML Pipelineの開発と運用を OpenTelemetryで繋ぐ @ OpenTelemetry Meetup 2025-07
Avatar for Yoshimura Naoya getty708
0
260
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
Avatar for HASEGAWA Tomoki tomzoh
2
390
Wasmで社内ツールを作って配布しよう
Avatar for asuka askua
0
130
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
Avatar for NTT docomo Business nttcom
1
170

Featured

See All Featured
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.6k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
50
5.5k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
1.9k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
530
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
21k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.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