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
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
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
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
キャリアの中で本を作る / Making a Book During Your Career
Avatar for akihisa1210 ak1210
0
130
なぜ人は自分のプロジェクトを 「なんちゃってアジャイル」と 自嘲するのか
Avatar for Kozo Taira kozotaira
0
280
ローカルLLMとLINE Botの組み合わせ その3 / LINE DC Generative AI Meetup #8
Avatar for you（@youtoy） you
PRO
0
130
AIに「使われる」時代のSaaS戦略 〜既存WebAPIのMCPサーバー化における開発ノウハウ〜
Avatar for 駅すぱあと API ekispert_api
0
310
CIで使うClaude
Avatar for TomoyaIwata iwatatomoya
0
220
DatabricksにおけるMCPソリューション
Avatar for Takaaki Yayoi taka_aki
1
190
デジタル・デザイン構想 by Sayaka Ishizuka
Avatar for Sayaka Ishizuka y150saya
0
200
完全自律ロボットを作りたくて、先に開発を自律させた話(ROS Japan UG #63 LT)
Avatar for ありさん ( ari-san ) rryz09
0
440
“全部コピーしない”ファイルデータの活用 ： — FSx for ONTAP × S3 Tables × Icebergで作るメタデータカタログ
Avatar for Yoshiki Fujiwara yoshiki0705
0
670
SRE Lounge Hiroshimaへの招待
Avatar for gr1m0h grimoh
0
600
product engineering with qa
Avatar for Nealle nealle
0
160
KiCAD講習会②
Avatar for TUTものづくりサークル tutcreators
0
100

Featured

See All Featured
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
280
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
11
38k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.7k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
300
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.2k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
550
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
180
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.6k

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