$30 off During Our Annual Pro Sale. View Details »

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
Oracle Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
0
640
Oracle Cloud Infrastructure：2025年11月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
1
110
MCP・A2A概要 〜Google Cloudで構築するなら〜
Avatar for Shu Kobuchi shukob
0
160
セキュリティAIエージェントの現在と未来 / PSS #2 Takumi Session
Avatar for GMO Flatt Security flatt_security
3
1.4k
なぜ使われないのか？──定量×定性で見極める本当のボトルネック
Avatar for KAKEHASHI kakehashi
PRO
1
750
こがヘンだよ！Snowflake?サービス名称へのこだわり
Avatar for タロウ tarotaro0129
0
110
HIG学習用スライド
Avatar for 野瀬田　裕樹 yuukiw00w
0
110
段階的に進める、 挫折しない自宅サーバ入門
Avatar for yut yu_kod
5
2.2k
命名から始めるSpec Driven
Avatar for Kurowi kuruwic
3
830
「え？！それ今ではHTMLだけでできるの！？」驚きの進化を遂げたモダンHTML
Avatar for Riya Amemiya riyaamemiya
10
4.4k
GitLab Duo Agent Platformで実現する“AI駆動・継続的サービス開発”と最新情報のアップデート
Avatar for Taisuke Inoue jeffi7
0
140
Playwrightのソースコードに見る、自動テストを自動で書く技術
Avatar for Yusuke Iwaki yusukeiwaki
1
370

Featured

See All Featured
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7k
Navigating Team Friction
Avatar for Lara Hogan lara
191
16k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
460
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.9k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Visualization
Avatar for Eitan Lees eitanlees
150
16k
KATA
Avatar for Megan Lloyd mclloyd
PRO
32
15k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.2k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
7.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