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
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
750
dev 補講: プロダクトセキュリティ / Product security overview
wa6sn
1
2.3k
Shopifyアプリ開発における Shopifyの機能活用
sonatard
4
250
Lambdaと地方とコミュニティ
miu_crescent
2
370
OCI 運用監視サービス 概要
oracle4engineer
PRO
0
4.8k
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
130
SSMRunbook作成の勘所_20241120
koichiotomo
2
130
iOS/Androidで同じUI体験をネ イティブで作成する際に気をつ けたい落とし穴
fumiyasac0921
1
110
SREが投資するAIOps ~ペアーズにおけるLLM for Developerへの取り組み~
takumiogawa
1
190
Security-JAWS【第35回】勉強会クラウドにおけるマルウェアやコンテンツ改ざんへの対策
4su_para
0
180
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
760
Terraform Stacks入門 #HashiTalks
msato
0
350

Featured

See All Featured
Side Projects
sachag
452
42k
KATA
mclloyd
29
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
89
Done Done
chrislema
181
16k
Adopting Sorbet at Scale
ufuk
73
9.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k

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