Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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
180
HTML5 APIs Confoo Montreal
Avatar for Drew McLellan drewm
1
260
PHP Payments with Omnipay
Avatar for Drew McLellan drewm
0
110
HTML5 APIs Confoo Vancouver
Avatar for Drew McLellan drewm
0
280
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
接客歴・営業歴の方が長いエンジニアから見たre:Invent2025
Avatar for Yuuki Yamashita yama3133
0
100
シニアソフトウェアエンジニアになるためには
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
3
250
AI との良い付き合い方を僕らは誰も知らない
Avatar for Asei Sugiyama asei
0
230
Fashion×AI「似合う」を届けるためのWEARのAI戦略
Avatar for ZOZO Developers zozotech
PRO
2
1.1k
NIKKEI Tech Talk #41: セキュア・バイ・デザインからクラウド管理を考える
Avatar for Ryosuke Sekido sekido
PRO
0
200
Agent Skillsがハーネスの垣根を超える日
Avatar for Gota gotalab555
5
3.6k
SQLだけでマイグレーションしたい！
Avatar for MakKi makki_d
0
1.2k
さくらのクラウド開発ふりかえり2025
Avatar for kazeburo kazeburo
2
310
Strands AgentsとNova 2 SonicでS2Sを実践してみた
Avatar for Yuuki Yamashita yama3133
1
1.6k
ExpoのインダストリーブースでみたAWSが見せる製造業の未来
Avatar for 濱田孝治 hamadakoji
0
190
意外と知らない状態遷移テストの世界
Avatar for nihonbuson nihonbuson
PRO
1
190
日本Rubyの会: これまでとこれから
Avatar for Koji SHIMADA snoozer05
PRO
5
220

Featured

See All Featured
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
400
A Soul's Torment
Avatar for Nat Ma seathinner
1
2k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
0
240
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
91
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon szymonslowik
1
160
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
0
180
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
0
430
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
1
83

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