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
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
PLaMo 3.0 Primeの事後学習
Avatar for Preferred Networks pfn
PRO
0
260
システム監視入門
Avatar for gr1m0h grimoh
5
810
ガバメントクラウドでのランサムウェア対策
Avatar for 高橋広和 techniczna
1
660
SnowflakeCoCoでデータエンジニアリング！
Avatar for numa foursue
0
150
コンポーネント名には何を含めるべきなのか？ / what-should-be-included-in-component-names
Avatar for airRnot airrnot1106
0
250
【CEDEC2026】『ウマ娘 プリティーダービー』 英語版のキャラクターの方言や口調をローカライズするための創造的アプローチ
Avatar for Cygames, Inc. cygames
PRO
1
150
AIがAPIを書く時代に、私たちは何を設計すべきか
Avatar for 草薙昭彦 nagix
0
200
【CEDEC2026】コードレビュー支援ツール開発から学ぶ：LLMを用いた業務システムの実践的な運用設計と誤出力対策
Avatar for Cygames, Inc. cygames
PRO
0
450
Retriever と Reranker、結局どうする？
Avatar for hkazuakey kazuaki
2
610
今こそ聞きたいソフトウェア設計　ドメイン駆動設計再入門
Avatar for 増田 亨 masuda220
PRO
7
2.1k
最高のシステムプロンプトを作るためにフィードバック機能を導入した話
Avatar for Ryotaro Harada alchemy1115
1
300
「待ち時間」の消滅と「自我消耗」の加速：生成AI時代のエンジニアを救うメンタル・リソース管理
Avatar for フクイ poropinai1966
0
420

Featured

See All Featured
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
880
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
440
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
560
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
400
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.7k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.8k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
8
36k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
64
56k

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