Save 37% off PRO during our Black Friday Sale! »

Build Anything

C8b387c489181844b3ffc704fadc0f14?s=47 Remy Sharp
April 02, 2012

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.

C8b387c489181844b3ffc704fadc0f14?s=128

Remy Sharp

April 02, 2012
Tweet

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 "very.unusual.@.unusual.com"@example.com "very.(),:;<>[]\".VERY.\"very@\\\ \"very

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