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

Build Anything

Remy Sharp
April 02, 2012
Technology
5
2k

Build Anything

Using web technology to build anything you want, and how you should change your web sites today to use the latest tech without blocking out older browsers.

Remy Sharp

April 02, 2012
Tweet

More Decks by Remy Sharp

See All by Remy Sharp
Using a Modern Web to Recreate 1980s Horribly Slow & Loud Loading Screens
rem
0
91
Recreating the ZX Spectrum loader with Web APIs
rem
0
190
Living Standard
rem
1
260
State of the Gap
rem
1
830
The Art of Debugging
rem
2
2.1k
EdgeConf - Progressive Enhancement
rem
0
260
Toxic Side of Free. Or: how I lost the love for my side project.
rem
0
730
Muddling my way through real time
rem
0
700
The Bits Behind JS Bin
rem
4
870

Other Decks in Technology

See All in Technology
FlutterアプリにおけるSLI/SLOを用いたユーザー体験の可視化と計測基盤構築
ostk0069
0
120
なぜ今 AI Agent なのか _近藤憲児
kenjikondobai
4
1.4k
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
3
640
iOS/Androidで同じUI体験をネ イティブで作成する際に気をつ けたい落とし穴
fumiyasac0921
1
110
CDCL による厳密解法を採用した MILP ソルバー
imai448
3
180
Lambda10周年！Lambdaは何をもたらしたか
smt7174
2
130
アジャイルでの品質の進化 Agile in Motion vol.1/20241118 Hiroyuki Sato
shift_evolve
0
180
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
130
日経電子版のStoreKit2フルリニューアル
shimastripe
1
150
【Startup CTO of the Year 2024 / Audience Award】アセンド取締役CTO 丹羽健
niwatakeru
0
1.4k
OCI Security サービス 概要
oracle4engineer
PRO
0
6.5k
OCI Vault 概要
oracle4engineer
PRO
0
9.7k

Featured

See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
How GitHub (no longer) Works
holman
310
140k
It's Worth the Effort
3n
183
27k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Making Projects Easy
brettharned
115
5.9k
A designer walks into a library…
pauljervisheath
204
24k
How to Ace a Technical Interview
jacobian
276
23k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Ruby is Unlike a Banana
tanoku
97
11k
GraphQLとの向き合い方2022年版
quramy
43
13k

Transcript

  1. Loading. Please wait...

  2. None

  3. BUILD ANYTHING

  4. http://www.flickr.com/photos/12173213@N00/6410825167

  5. '97 Yeah, I used to be thinner :(

  6. ๏JavaScript in the browser ๏Browser easy to obtain ๏Also discovered

    WSH / .hta ๏Made apps: wallpaper changer http://www.flickr.com/photos/43805896@N00/3657783366/

  7. ๏Data storage ๏Real-time notifications ๏Desktop integration ๏Access to hardware ๏Local

    "install" ๏Go naked http://www.flickr.com/photos/21966325@N00/537474857/

  8. Making your apps more appish. AKA progressive enhancement i.e. stuff

    you need to use today.

  9. <!DOCTYPE html>

  10. JSON parsing

  11. Web Storage

  12. sessionStorage.state = ↵ JSON.stringify(app.state); localStorage.lastLogin; delete localStorage.user;

  13. http://www.flickr.com/photos/redux/6188900810 "we have to stop advocating localStorage as a great

    opportunity for storing data as it performs badly" http://rem.io/link/182

  14. Be sensible. Think: cookie killer. http://flickr.com/photos/41214178@N00/2822774896/

  15. Events!!! window.addEventListener('storage', sync);

  16. Web Forms

  17. /([\w-\.]+)@((?:[\w]+\.)+)([a-z]{2,4})/gi /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/ Valid email anyone?

  18. Valid email anyone?

  19. Valid email anyone? '@[10.10.10.10] user@[IPv6:2001:db8:1ff::a0b:dbd0] "much.more\ unusual"@example.com "[email protected]"@example.com "very.(),:;<>[]\".VERY.\"very@\\\ \"very

    \".unusual"@strange.example.com 0@a !#$%&'*+-/=?^_`{}|[email protected] "()<>[]:;@,\\\"!#$%&'*+-/=?^_`{}|\ \ \ \ \ ~\ \ \ \ \ \ \ ?\ \ \ \ \ \ \ \ \ \ \ \ ^_`{}| ~.a"@example.org ""@example.org postbox@com

  20. Valid email anyone? <input type=email>

  21. Make use of free validation

  22. History API

  23. None

  24. ๏Build non-JS version ๏Detect history.pushState support ๏Progressively enhance ๏Pat yourself

    on the back

  25. AppCache for performance

  26. "you might still want to use app cache to boost

    performance of online apps as well" http://flickr.com/photos/48889073931@N01/5079921433/ http://rem.io/link/184
  27. None

  28. EventSource

  29. ๏Runs over HTTP ๏API filthy simple ๏Polyfill-able!

  30. Drag & Drop + File API for uploads

  31. None
  32. None

  33. function drop(event) { event.preventDefault(); readFiles(event.dataTransfer.files); } var root = document.documentElement;

    root.addEventListener('dragover', function (event) { event.preventDefault(); // bind drop handler root.addEventListener('drop', drop, false); }, false); root.addEventListener('dragend', function () { event.preventDefault(); // bind drop handler root.removeEventListener('drop', drop, false); }, false);

  34. function drop(event) { event.preventDefault(); readFiles(event.dataTransfer.files); } var root = document.documentElement;

    root.addEventListener('dragover', function (event) { event.preventDefault(); // bind drop handler root.addEventListener('drop', drop, false); }, false); root.addEventListener('dragend', function () { event.preventDefault(); // bind drop handler root.removeEventListener('drop', drop, false); }, false);

  35. function drop(event) { event.preventDefault(); readFiles(event.dataTransfer.files); } var root = document.documentElement;

    root.addEventListener('dragover', function (event) { event.preventDefault(); // bind drop handler root.addEventListener('drop', drop, false); }, false); root.addEventListener('dragend', function () { event.preventDefault(); // bind drop handler root.removeEventListener('drop', drop, false); }, false);

  36. function drop(event) { event.preventDefault(); readFiles(event.dataTransfer.files); } var root = document.documentElement;

    root.addEventListener('dragover', function (event) { event.preventDefault(); // bind drop handler root.addEventListener('drop', drop, false); }, false); root.addEventListener('dragend', function () { event.preventDefault(); // bind drop handler root.removeEventListener('drop', drop, false); }, false);

  37. function drop(event) { event.preventDefault(); readFiles(event.dataTransfer.files); } var root = document.documentElement;

    root.addEventListener('dragover', function (event) { event.preventDefault(); // bind drop handler root.addEventListener('drop', drop, false); }, false); root.addEventListener('dragend', function () { event.preventDefault(); // bind drop handler root.removeEventListener('drop', drop, false); }, false);

  38. function drop(event) { event.preventDefault(); readFiles(event.dataTransfer.files); } var root = document.documentElement;

    root.addEventListener('dragover', function (event) { event.preventDefault(); // bind drop handler root.addEventListener('drop', drop, false); }, false); root.addEventListener('dragend', function () { event.preventDefault(); // bind drop handler root.removeEventListener('drop', drop, false); }, false);

  39. function drop(event) { event.preventDefault(); readFiles(event.dataTransfer.files); } var root = document.documentElement;

    root.addEventListener('dragover', function (event) { event.preventDefault(); // bind drop handler root.addEventListener('drop', drop, false); }, false); root.addEventListener('dragend', function () { event.preventDefault(); // bind drop handler root.removeEventListener('drop', drop, false); }, false);

  40. Real-Time Communication

  41. None
  42. None

  43. Still early. Audio not working. Sorta.

  44. None

  45. Warning, challenge ahead:

  46. ๏ WebRTC - audio ๏ Web Audio / Audio Data

    ๏ WebGL / 2D API ๏ Full Screen

  47. Chromeless

  48. None

  49. ๏ Not headless ๏ Not just fullscreen ๏ Sans-chrome ๏

    Business as usual: HTML, CSS, JS

  50. Windows: .hta IE7 FTW!!!

  51. Chrome: app shortcuts http://rem.io/link/185

  52. Opera Widgets

  53. WebRT http://rem.io/link/186 http://rem.io/link/187 navigator.mozApps.install

  54. .webapp?

  55. It's not "HTML5". It's JavaScript.

  56. Cheers, ʵ @rem