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

Strategies For Progressive Enhancement

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Drew McLellan Drew McLellan
September 27, 2011
Technology
97
1

Strategies For Progressive Enhancement

Avatar for Drew McLellan

Drew McLellan

September 27, 2011

More Decks by Drew McLellan

See All by Drew McLellan
HTML5 APIs PHP Yorkshire 2017
Avatar for Drew McLellan drewm
1
210
HTML5 APIs Confoo Montreal
Avatar for Drew McLellan drewm
1
270
PHP Payments with Omnipay
Avatar for Drew McLellan drewm
0
120
HTML5 APIs Confoo Vancouver
Avatar for Drew McLellan drewm
0
290
Learn to Love Regular Expressions
Avatar for Drew McLellan drewm
0
170
Ecommerce Projects with Moltin
Avatar for Drew McLellan drewm
0
700
Writing Portable PHP
Avatar for Drew McLellan drewm
0
140
Getting to Grips with Regular Expressions
Avatar for Drew McLellan drewm
1
280
Back to Front Performance - Oct 2013
Avatar for Drew McLellan drewm
0
130

Other Decks in Technology

See All in Technology
AWS Transform CustomでIaCコードを自由自在に変換しよう
Avatar for k-kun duelist2020jp
0
200
Shipping AI Agents — Lessons from Production
Avatar for vvatanabe vvatanabe
0
290
社内エンジニア勉強会の醍醐味と苦しみ/tamadev
Avatar for Ichiro Nishiuma nishiuma
0
260
GitHub Copilot Dev Days
Avatar for tomokusaba tomokusaba
0
100
データを"持てない"環境でのアノテーション基盤設計
Avatar for SansanTech sansantech
PRO
1
160
ファインディの事業拡大を支える 拡張可能なデータ基盤へのリアーキテクチャ
Avatar for Noriaki Hiraki hiracky16
0
120
AgentCore Managed Harness を使ってみよう
Avatar for やくも yakumo
2
250
ハーネスエンジニアリングをやりすぎた話 ~そのハーネスは解体された~
Avatar for Gota gotalab555
5
1.9k
【技術書典20】OpenFOAM（自宅で深める流体解析）流れと熱移動（２）
Avatar for kamakiri1225 kamakiri1225
0
320
Google Cloud Next '26 の裏でこっそりリリースされたCloud Number Registry & Cloud Hub コスト分析 を試してみた
Avatar for hikaru hikaru1001
0
120
はじめての MagicPod生成AI機能 機能紹介から活用方法まで
Avatar for MagicPod magicpod
0
120
AIはハッカーを減らすのか、増やすのか？──現役ホワイトハッカーから見るAI時代のリアル【MEGU-Meet】
Avatar for サイバーセキュリティクラウド cscengineer
PRO
0
220

Featured

See All Featured
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
170
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
33k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.4k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
430
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
180
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
360
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
530
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.5k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
110

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