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
130
Ecommerce Projects with Moltin
Avatar for Drew McLellan drewm
0
680
Writing Portable PHP
Avatar for Drew McLellan drewm
0
100
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
GeminiとNotebookLMによる金融実務の業務革新
Avatar for abenben abenben
0
230
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
Avatar for Mitsuki Ogasahara yamitzky
0
430
PostgreSQL 18 cancel request key長の変更とRailsへの関連
Avatar for Yasuo Honda yahonda
0
120
Oracle Audit Vault and Database Firewall 20 概要
Avatar for oracle4engineer oracle4engineer
PRO
3
1.7k
Postman AI エージェントビルダー最新情報
Avatar for 草薙昭彦 nagix
0
110
生成AIでwebアプリケーションを作ってみた
Avatar for tajimon tajimon
2
150
2025-06-26_Lightning_Talk_for_Lightning_Talks
Avatar for hashimo2 _hashimo2
2
100
エンジニア向け技術スタック情報
Avatar for 株式会社カウシェ kauche
1
250
OpenHands🤲にContributeしてみた
Avatar for kotauchisunsun kotauchisunsun
1
430
Welcome to the LLM Club
Avatar for Koichi ITO koic
0
170
製造業からパッケージ製品まで、あらゆる領域をカバー！生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
140
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
26k

Featured

See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
20
1.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
5.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
42
7.3k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
234
140k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
277
23k
Scaling GitHub
Avatar for Zach Holman holman
459
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
252
21k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
430
65k

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