Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Strategies For Progressive Enhancement

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Drew McLellan Drew McLellan
September 27, 2011
Technology
96
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
210
HTML5 APIs Confoo Montreal
Avatar for Drew McLellan drewm
1
270
PHP Payments with Omnipay
Avatar for Drew McLellan drewm
0
120
HTML5 APIs Confoo Vancouver
Avatar for Drew McLellan drewm
0
290
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
130
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
Data Intelligence Engineering Unit　部門と各ポジション紹介
Avatar for SansanTech sansantech
PRO
0
130
OPENLOGI Company Profile for engineer
Avatar for OPENLOGI hr01
1
62k
「できない」のアウトプット 同人誌『精神を壊してからの』シリーズ出版を 通して得られたこと
Avatar for comi comi190327
3
620
ASTのGitHub CopilotとCopilot CLIの現在地をお話しします/How AST Operates GitHub Copilot and Copilot CLI
Avatar for AEON aeonpeople
1
200
Hooks, Filters & Now Context: Why MCPs Are the “Hooks” of the AI Era
Avatar for Miriam Schwab miriamschwab
0
120
AIにより大幅に強化された AWS Transform Customを触ってみる
Avatar for arap / 0air 0air
0
330
Podcast配信で広がったアウトプットの輪～70人と音声発信してきた7年間～/outputconf_01
Avatar for FORTE fortegp05
0
240
ふりかえりがなかった職能横断チームにふりかえりを導入してみて学んだこと 〜チームのふりかえりを「みんなで未来を考える場」にするプロローグ設計〜
Avatar for Masahiro Shimokawa masahiro1214shimokawa
0
240
不確実性と戦いながら見積もりを作成するプロセス/mitsumori-process
Avatar for hiro@miraito hirodragon112
1
200
制約を設計する - 非決定性との境界線 / Designing constraints
Avatar for soudai sone soudai
PRO
6
2.3k
Webアクセシビリティは“もしも”に備える設計
Avatar for tomokusaba tomokusaba
0
170
Databricks Appsで実現する社内向けAIアプリ開発の効率化
Avatar for R-Miura r_miura
0
340

Featured

See All Featured
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
210
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
340
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
110
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.4k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
230
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.1k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.6k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
240k

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