Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Strategies For Progressive Enhancement

Avatar for Drew McLellan Drew McLellan
September 27, 2011
Technology
99
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
230
HTML5 APIs Confoo Montreal
Avatar for Drew McLellan drewm
1
290
PHP Payments with Omnipay
Avatar for Drew McLellan drewm
0
140
HTML5 APIs Confoo Vancouver
Avatar for Drew McLellan drewm
0
300
Learn to Love Regular Expressions
Avatar for Drew McLellan drewm
0
180
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
290
Back to Front Performance - Oct 2013
Avatar for Drew McLellan drewm
0
130

Other Decks in Technology

See All in Technology
WAF 運用改善の承認サイクル/SRE_BizReach_MIXI_1
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
2
420
omasushiというライブラリを作った
Avatar for polidog polidog
PRO
0
200
AI時代だからこそ、スケールしないことをやろう
Avatar for 重村優太 yutashigemura
1
130
Adaptive Warehouse を今すぐ導入すべき理由と迷ったときの判断基準
Avatar for あれ __allllllllez__
0
170
多層防御と最⼩権限で実現する、安全なAIエージェント設計パターン
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
260
TinyGo 開発サイクルを高速化する：Go で作るエミュレータ入門
Avatar for ZOZO Developers zozotech
PRO
1
600
GuardDuty 検知対応を DevOps Agent で効率化しようとしている話 / GuardDuty Investigations with DevOps Agent
Avatar for MasahiroKawahara masahirokawahara
1
350
「重なり」は迎える側がつくる ― 人もAIエージェントも歓迎するプロダクトエンジニアリング ―
Avatar for Go Akazawa go0517go
PRO
0
280
2026-09-10 【Snowflake World Tour Tokyo 2026】dbt Core と Snowflake で実現する多層的なデータガバナンス / Multi-Layered Data Governance Powered by dbt Core and Snowflake
Avatar for civitaspo civitaspo
0
310
enechainの内製セルフサービスプラットフォーム
Avatar for Tomoya Usami hiyosi
0
150
Amazon S3 Tablesに全部任せてみた結果——コンパクション/スナップショット管理は本当に手放せるか
Avatar for ShigeruOda shigeruoda
1
460
HRC_Frontend_Conference_Fukuoka_2026.pdf
Avatar for takanori sugawara ts020
0
410

Featured

See All Featured
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
69
65k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
210
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
240
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.3k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.7k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.8k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
520
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.7k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1.6k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.3k

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