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
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
260
Back to Front Performance - Oct 2013
Avatar for Drew McLellan drewm
0
120

Other Decks in Technology

See All in Technology
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
Avatar for shonansurvivors shonansurvivors
3
380
PLaMoの事後学習を支える技術 / PFN LLMセミナー
Avatar for Preferred Networks pfn
PRO
9
3.9k
実装で解き明かす並行処理の歴史
Avatar for ZOZO Developers zozotech
PRO
1
580
AWS 잘하는 개발자 되기 - AWS 시작하기: 클라우드 개념부터 IAM까지
Avatar for KimJaewook kimjaewook
0
120
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
Avatar for Sansan R&D sansan_randd
0
120
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
Avatar for BrainPad brainpadpr
2
300
バイブコーディングと継続的デプロイメント
Avatar for nwiizo nwiizo
2
480
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
Avatar for mtskhs matsu0228
7
3.1k
Escaping_the_Kraken_-_October_2025.pdf
Avatar for Maarten Dalmijn mdalmijn
0
150
ガバメントクラウド（AWS）へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
140
SOC2取得の全体像
Avatar for shonansurvivors shonansurvivors
1
560
そのWAFのブロック、どう活かす？ サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
Avatar for 株式会社カミナシ kaminashi
0
110

Featured

See All Featured
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
11
890
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
4
680
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
352
21k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.3k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.6k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k

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