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
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
220
HTML5 APIs Confoo Montreal
Avatar for Drew McLellan drewm
1
280
PHP Payments with Omnipay
Avatar for Drew McLellan drewm
0
130
HTML5 APIs Confoo Vancouver
Avatar for Drew McLellan drewm
0
300
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
Snowflakeと仲良くなる第一歩
Avatar for あべ coco_se
4
500
SONiC Scale-Up Working Group から探る Scale-UpやUltraEthernet機能の実装方法
Avatar for ebiken ebiken
PRO
2
370
マルチアカウント環境での コーディングエージェントを使った障害調査が大変なので AIエージェントにReadOnly権限を付与してみた / ReadOnly AI Agents for Multi-Account AWS Incident Response
Avatar for Takashi Yamaguchi yamaguchitk333
2
110
作って終わりにしない タイミーのセマンティックレイヤー育成の現在地
Avatar for chanyou0311 chanyou0311
4
2.4k
不要なレビューをAIにまかせて AIコーディングの環境改善を加速した
Avatar for shoota shoota
1
210
アンオフィシャルな､オフィシャルからのお願い
Avatar for wataru yamazaki (DevRel) wyamazak_devrel
0
130
小さく始める AI 活用推進 ― 日経電子版 Web チームの事例/nikkei-tech-talk47
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
290
FinOps × AIエージェントで実現する コストインシデントの自動調査
Avatar for T.REX oasis1994liveforever
0
150
SONiCのLinuxベースを活かしたZabbix監視
Avatar for SONiC Users Group Japan sonic
0
200
現地で盛り上がった WWDC26 Keynote
Avatar for ZOZO Developers zozotech
PRO
1
260
Bedrock AgentCore RuntimeでAuth0 Changelog調査AIをアップグレードした話
Avatar for t.t t5u8a5a
1
180
エンジニアリング戦略の作り方 / Crafting Engineering Strategy
Avatar for iwashi iwashi86
21
7.1k

Featured

See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.2k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
430
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.5k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.5k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
220
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
107
250k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
820
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.7k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
810

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