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
170
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
Claude CodeでKiroの仕様駆動開発を実現させるには...
Avatar for Gota gotalab555
3
1k
2時間で300+テーブルをデータ基盤に連携するためのAI活用 / FukuokaDataEngineer
Avatar for Sansan R&D sansan_randd
0
150
家族の思い出を形にする 〜 １秒動画の生成を支えるインフラアーキテクチャ
Avatar for Ojima Hikaru ojima_h
3
1.1k
専門分化が進む分業下でもユーザーが本当に欲しかったものを追求するプロダクトマネジメント/Focus on real user needs despite deep specialization and division of labor
Avatar for moriyuya moriyuya
1
1.3k
Claude Codeが働くAI中心の業務システム構築の挑戦―AIエージェント中心の働き方を目指して
Avatar for os1ma os1ma
9
2.6k
Amazon Q Developerを活用したアーキテクチャのリファクタリング
Avatar for k1nakayama k1nakayama
2
210
Infrastructure as Prompt実装記 〜Bedrock AgentCoreで作る自然言語インフラエージェント〜
Avatar for Yusuke Shimizu yusukeshimizu
1
120
【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする～遊びやすさと競技性の両立～
Avatar for Cygames cygames
PRO
1
370
僕たちが「開発しやすさ」を求め 模索し続けたアーキテクチャ #アーキテクチャ勉強会_findy
Avatar for 弁護士ドットコム bengo4com
0
2.4k
生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 #BetAIDay
Avatar for LayerX layerx
PRO
1
1.2k
テストを実行してSorbetのsigを書こう！
Avatar for SansanTech sansantech
PRO
1
100
Foundation Model × VisionKit で実現するローカル OCR
Avatar for SansanTech sansantech
PRO
1
370

Featured

See All Featured
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
278
23k
Scaling GitHub
Avatar for Zach Holman holman
461
140k
Navigating Team Friction
Avatar for Lara Hogan lara
188
15k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.4k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.8k

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