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
95

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
250
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
150
Ecommerce Projects with Moltin
Avatar for Drew McLellan drewm
0
690
Writing Portable PHP
Avatar for Drew McLellan drewm
0
120
Getting to Grips with Regular Expressions
Avatar for Drew McLellan drewm
1
270
Back to Front Performance - Oct 2013
Avatar for Drew McLellan drewm
0
130

Other Decks in Technology

See All in Technology
今のコンピュータ、AI にも Web にも 向いていないので 作り直そう!!
Avatar for piacerex piacerex
0
770
Snowflake Marketplaceには”PODB”という便利なオープンデータがあってAI Ready対応してるらしいよ/the-snowflake-marketplace-has-a-useful-open-data-source-called-PODB-that-is-apparently-AI-ready
Avatar for shinyaa31 shinyaa31
0
270
設計は最強のプロンプト - AI時代に武器にすべきスキルとは？-
Avatar for Ken'ichirou Kimura kenichirokimura
1
330
Claude Code 10連ガチャ
Avatar for uhyo uhyo
1
360
コミュニティと共に変化する 私とFusicの8年間
Avatar for MasayaYoshino ayasamind
0
430
Logik: A Free and Open-source FPGA Toolchain
Avatar for Masanori Ogino omasanori
0
260
ソフトウェアテストのAI活用_ver1.50
Avatar for fumisuke fumisuke
0
270
AIエージェントを導入する [ 社内ナレッジ活用編 ] / Implement AI agents
Avatar for Akira Maeda glidenote
1
340
“それなりに”安全なWebアプリケーションの作り方
Avatar for Ryusei Ishikawa xryuseix
0
240
從裝潢設計圖到 Home Assistant：打造智慧家庭的實戰與踩坑筆記
Avatar for Kewang kewang
0
150
Datadog On-Call と Cloud SIEM で作る SOC 基盤
Avatar for Yoshiki Kurihara kuriyosh
0
110
嗚呼、当時の本番環境の状態で AI Agentを再評価したいなぁ...
Avatar for po3rin po3rin
0
370

Featured

See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
2
310
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.6k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k

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