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

Build Anything

Remy Sharp
April 02, 2012
Technology
5
1.9k

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
80
Recreating the ZX Spectrum loader with Web APIs
rem
0
150
Living Standard
rem
1
220
State of the Gap
rem
1
740
The Art of Debugging
rem
2
2k
EdgeConf - Progressive Enhancement
rem
0
210
Toxic Side of Free. Or: how I lost the love for my side project.
rem
0
650
Muddling my way through real time
rem
0
590
The Bits Behind JS Bin
rem
4
800

Other Decks in Technology

See All in Technology
強みを伸ばすキャリアデザイン
yug1224
0
200
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
310
Databricks:『生成AI World Cup』のご案内
databricksjapan
2
140
Data and AI Governance: Existing Challenges and Emerging Trends
scotthsieh825
0
150
Apple Vision Pro trial session
akkeylab
0
120
「ふりかえりのふりかえり」をふりかえり、実のあるふりかえりにする
naitosatoshi
0
220
**強い**エンジニアのなり方 - フィードバックサイクルを勝ち取る / grow one day each day
soudai
60
17k
DevOpsDays History and my DevOps story
kawaguti
PRO
8
1.5k
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
24
4.9k
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
680
Google Cloud の AI を支える裏側のインフラを垣間見る！
maroon1st
0
150
2024/4/26 コンピュータ歴史博物館解説告知
toshi_atsumi
0
190

Featured

See All Featured
Fireside Chat
paigeccino
20
2.6k
A better future with KSS
kneath
231
16k
Design by the Numbers
sachag
274
18k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
119
38k
Docker and Python
trallard
33
2.7k
Building an army of robots
kneath
300
41k
It's Worth the Effort
3n
180
27k
For a Future-Friendly Web
brad_frost
171
8.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
Writing Fast Ruby
sferik
620
60k

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