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

Build Anything

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

Other Decks in Technology

Transcript

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

    WSH / .hta ๏Made apps: wallpaper changer http://www.flickr.com/photos/43805896@N00/3657783366/
  2. ๏Data storage ๏Real-time notifications ๏Desktop integration ๏Access to hardware ๏Local

    "install" ๏Go naked http://www.flickr.com/photos/21966325@N00/537474857/
  3. 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
  4. 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
  5. "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
  6. 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);
  7. 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);
  8. 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);
  9. 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);
  10. 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);
  11. 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);
  12. 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);
  13. ๏ WebRTC - audio ๏ Web Audio / Audio Data

    ๏ WebGL / 2D API ๏ Full Screen