Pro Yearly is on sale from $80 to $50! »

How I stopped worrying and learned to love the <body/>

D7826ab49f74589fcada00cb92e5ede7?s=47 James Pearce
November 10, 2012

How I stopped worrying and learned to love the <body/>

The Web's place in history as a flexible & fluid way to store documents is well assured. But in a post-PC world, it's got work to do, and it's looking a little out of its depth. The Web's best hope for the future is if we think about it a little differently and admit what we must do to address its shortcomings.

D7826ab49f74589fcada00cb92e5ede7?s=128

James Pearce

November 10, 2012
Tweet

Transcript

  1. <script> var src='http://facebook.com/jamesgpearce'; </script> <!-- How I stopped worrying and

    learned to love the --> <body/>
  2. <!DOCTYPE html> <html> <head> <title>Sushi!</title> <link href='sushi.css' rel='stylesheet' type='text/css' />

    <script src='library.js' type='text/javascript'></script> <script type='text/javascript'> window.addEventListener('load', function () { // and now I get on with my craft }, false); </script> </head><body/> </html>
  3. // I trust my styles // I trust my libraries

    // I trust my runtime // I trust my code
  4. <body/>

  5. <!DOCTYPE html> <html> <head> <title>Sushi!</title> <link href='sushi.css' rel='stylesheet' type='text/css' />

    <script src='library.js' type='text/javascript'></script> <script src='sushi.js'></script> </head> <body/> </html>
  6. None
  7. None
  8. console.log(document.body.outerHTML); <body id="ext-element-3" style="width: 100% !important; height: 100% !important;" class="x-desktop

    x-macos x-chrome x-landscape"><div class="x-container x-sized" id="ext-viewport" style="width: 100% !important; height: 100% !important;"><div class="x-body" id="ext-element-4"><div class="x-inner x-layout-card" id="ext- element-2"><div class="x-container x-carousel-dark x-carousel x-size-monitored x-paint-monitored x-layout-card-item x-sized" id="ext-carousel-1"><div class="x- body" id="ext-element-20"><div class="x-unsized x-carousel-indicator x-floating x-carousel-indicator-vertical x-carousel-indicator-dark" id="ext- carouselindicator-2" style="z-index: 2 !important; right: 0px !important;"><span id="ext-element-21" class="x-carousel-indicator-active"></span><span id="ext- element-34"></span><span id="ext-element-47"></span><span id="ext-element-60"></span></div><div class="x-inner x-carousel-inner" id="ext-element-7"><div class="x- carousel-item x-sized" id="ext-component-4" style="-webkit-transform: translate3d(0px, -637px, 0px);"></div><div class="x-carousel-item x-sized" id="ext- component-5" style="-webkit-transform: translate3d(0px, 637px, 0px);"><div class="x-container x-carousel-dark x-carousel x-size-monitored x-paint-monitored x- sized" id="ext-carousel-3"><div class="x-body" id="ext-element-23"><div class="x-unsized x-carousel-indicator x-carousel-indicator-horizontal x-floating x- carousel-indicator-dark" id="ext-carouselindicator-3" style="bottom: 0px !important; z-index: 2 !important;"><span id="ext-element-24" class="x-carousel- indicator-active"></span><span id="ext-element-25"></span><span id="ext-element-26"></span><span id="ext-element-27"></span><span id="ext-element-28"></span><span id="ext-element-29"></span><span id="ext-element-30"></span><span id="ext-element-31"></span><span id="ext-element-32"></span><span id="ext-element-33"></span></ div><div class="x-inner x-carousel-inner" id="ext-element-22"><div class="x-carousel-item x-sized" id="ext-component-7" style="-webkit-transform: translate3d(-884px, 0px, 0px);"></div><div class="x-carousel-item x-sized" id="ext-component-8" style="-webkit-transform: translate3d(884px, 0px, 0px);"><div class="x-img my-carousel-item-img x-img-background x-paint-monitored x-size-monitored x-sized" id="ext-image-12" style="background-image: url(http://localhost/ sencha-touch-2.1.0-gpl/examples/carousel/resources/photos/Animals/2.jpg);"><div class="x-paint-monitor overflowchange"></div><div class="x-size-monitors overflowchanged"><div class="expand"><div style="width: 885px; height: 638px;"></div></div><div class="shrink"><div style="width: 884px; height: 637px;"></div></ div></div></div></div><div class="x-carousel-item x-sized" id="ext-component-9" style="-webkit-transform: translate3d(0px, 0px, 0px);"><div class="x-img my- carousel-item-img x-img-background x-paint-monitored x-size-monitored x-sized" id="ext-image-11" style="background-image: url(http://localhost/sencha-touch-2.1.0- gpl/examples/carousel/resources/photos/Animals/1.jpg);"><div class="x-paint-monitor overflowchange"></div><div class="x-size-monitors overflowchanged"><div class="expand"><div style="width: 885px; height: 638px;"></div></div><div class="shrink"><div style="width: 884px; height: 637px;"></div></div></div></div></ div></div></div><div class="x-size-monitors overflowchanged"><div class="expand"><div style="width: 885px; height: 638px;"></div></div><div class="shrink"><div style="width: 884px; height: 637px;"></div></div></div><div class="x-paint-monitor overflowchange"></div></div></div><div class="x-carousel-item x-sized" id="ext- component-6" style="-webkit-transform: translate3d(0px, 0px, 0px);"><div class="x-container x-carousel-dark x-carousel x-size-monitored x-paint-monitored x-sized" id="ext-carousel-2"><div class="x-body" id="ext-element-9"><div class="x-unsized x-carousel-indicator x-carousel-indicator-horizontal x-floating x-carousel- indicator-dark" id="ext-carouselindicator-1" style="bottom: 0px !important; z-index: 2 !important;"><span id="ext-element-10" class="x-carousel-indicator- active"></span><span id="ext-element-11"></span><span id="ext-element-12"></span><span id="ext-element-13"></span><span id="ext-element-14"></span><span id="ext- element-15"></span><span id="ext-element-16"></span><span id="ext-element-17"></span><span id="ext-element-18"></span><span id="ext-element-19"></span></div><div class="x-inner x-carousel-inner" id="ext-element-8"><div class="x-carousel-item x-sized" id="ext-component-1" style="-webkit-transform: translate3d(-884px, 0px, 0px);"></div><div class="x-carousel-item x-sized" id="ext-component-2" style="-webkit-transform: translate3d(884px, 0px, 0px);"><div class="x-img my-carousel- item-img x-img-background x-paint-monitored x-size-monitored x-sized" id="ext-image-2" style="background-image: url(http://localhost/sencha-touch-2.1.0-gpl/ examples/carousel/resources/photos/Food/2.jpg);"><div class="x-paint-monitor overflowchange"></div><div class="x-size-monitors overflowchanged"><div class="expand"><div style="width: 885px; height: 638px;"></div></div><div class="shrink"><div style="width: 884px; height: 637px;"></div></div></div></div></ div><div class="x-carousel-item x-sized" id="ext-component-3" style="-webkit-transform: translate3d(0px, 0px, 0px);"><div class="x-img my-carousel-item-img x-img- background x-paint-monitored x-size-monitored x-sized" id="ext-image-1" style="background-image: url(http://localhost/sencha-touch-2.1.0-gpl/examples/carousel/ resources/photos/Food/1.jpg);"><div class="x-paint-monitor overflowchange"></div><div class="x-size-monitors overflowchanged"><div class="expand"><div style="width: 885px; height: 638px;"></div></div><div class="shrink"><div style="width: 884px; height: 637px;"></div></div></div></div></div></div></div><div class="x-size-monitors overflowchanged"><div class="expand"><div style="width: 885px; height: 638px;"></div></div><div class="shrink"><div style="width: 884px; height: 637px;"></div></div></div><div class="x-paint-monitor overflowchange"></div></div></div></div></div><div class="x-size-monitors overflowchanged"><div class="expand"><div style="width: 885px; height: 638px;"></div></div><div class="shrink"><div style="width: 884px; height: 637px;"></div></div></div><div class="x-paint-monitor overflowchange"></div></div></div></div></div></body>
  9. // WYSITMINWYGITD

  10. var importantThing = document.body.appendChild( document.createElement('div') );

  11. <div id='thing' class='things' /> <script> // now we have to

    go back and get it var thing = document.getElementById('thing'); // oh, or maybe there were several of them var things = document.getElementsByClassName('things'); // oh, no! NodeList is not an array! for (var i=0, l=things.length; i < l; i++) { // do something to things.item(i); } // finally try to be awesome </script>
  12. $('#warning').html('<p>You might be doing it <em>wrong</em></p>');

  13. var addElement = function(name, attrs, innerText, parent) { var element

    = document.createElement(name); for (a in attrs) { element.setAttribute(a, attrs[a]); } if (innerText !== undefined) { element.innerText = innerText; } if (parent === undefined) { parent = document.body; } return parent.appendChild(element); };
  14. var video = addElement('video', {autoplay: false}), play = addElement('button', null,

    'Play'); play.addEventListener('click', function () { video.play(); });
  15. // no post-load, post-render, DOM traversal // well-scoped variable references

    to DOM elements // easy iterative or recursive element creation // no markup verbosity on the wire // no need to overload attribute semantics // reduce class or ID collisions
  16. // avoid the impedance mismatch between markup and script

  17. <!DOCTYPE html> <html> <head> <title>Sushi!</title> <link href='sushi.css' rel='stylesheet' type='text/css' />

    <script src='library.js' type='text/javascript'></script> <script type='text/javascript'> window.addEventListener('load', function () { // magic }, false); </script> </head><body/> </html>
  18. <!DOCTYPE html> <html> <head> <title>Sushi!</title> <link href='sushi.css' rel='stylesheet' type='text/css'> <script

    src='library.js' type='text/javascript'></script> <script type='text/javascript'> window.addEventListener('load', function () { // magic }, false); </script> <body/>
  19. <!DOCTYPE html> <title>Sushi!</title> <link href='sushi.css' rel='stylesheet' type='text/css'> <script src='library.js' type='text/javascript'></script>

    <script type='text/javascript'> window.addEventListener('load', function () { // magic }, false); </script>
  20. document.head.appendChild( document.createElement('title') ).innerText = 'Sushi';

  21. var style = document.head.appendChild( document.createElement('link') ); style.href = 'style.css'; style.rel

    = 'stylesheet'; // kicks off the request
  22. var library = document.head.appendChild( document.createElement('script') ); library.addEventListener('load', function () {

    // now we're in business }; library.src = 'library.js'; // kicks off the request
  23. <!-- the minimum viable index.html, purists notwithstanding --> <script src='awesome.js'></script>

  24. <script> switch (reaction) { case SEEMS_REASONABLE: // sure, why not?

    break; default: throw ('HOW ABOUT NO?'); } </script>
  25. try { // provoke } catch (e) { }

  26. // there is no one way to do web

  27. declarative <!-- ------------- --> imperative thin client <!-- ------------- -->

    thick client web sites <!-- ------------- --> web apps large screen <!-- ------------- --> small screen sedentary <!-- ------------- --> mobile read-only <!-- ------------- --> read-write stateless <!-- ------------- --> stateful anonymous <!-- ------------- --> social
  28. <body/> <!-- it's a dysphemism -->

  29. // When did the web start to dream about being

    an app platform?
  30. <input type='submit' />

  31. <wml> <card id="enter" title="Enter Number"> <p> Telephone: <br/> <input name="tel"

    size="10" format="*N"/> <anchor> <go href="#confirm"/> </anchor> </p> </card> <card id="confirm" title="Confirm"> <p>Your number is $(tel)</p> </card> </wml>
  32. None
  33. var superficialDebate() { if (arguments) { return NATIVE; } else

    { return WEB; } }
  34. // "the web will always win"

  35. <blockquote> Television won’t be able to hold on to any

    market it captures after the first six months. People will soon get tired of staring at a plywood box every night <footer> - Darryl Zanuck, 20th Century Fox, 1946 </footer> </blockquote>
  36. // what can the web learn? // how can it

    stay relevant & competitive? // how can it keep the lights on?
  37. <blockquote> The web is wearing out <footer> - Matt DeBergalis,

    Meteor, 2012 </footer> </blockquote>
  38. // server - cpu - - - - - -

    - - - - - client // mainframes // server - - - - - - - - - - - cpu - client // workstations // server - cpu - - - - - - - - - - - client // the web // ? cpu - client // mobile
  39. <input type='submit' />

  40. var xhr = new ActiveXObject('Microsoft.XMLHTTP');

  41. switch (tag.name) { case 'input' switch (tag.getAttribute('type')) { case 'date':

    // something interesting case 'color': // something interesting ... } ... }
  42. switch (tag.name) { case 'input' switch (tag.getAttribute('type')) { case 'date':

    // something interesting case 'color': // something interesting ... } ... default: // may as well be a <div> or a <span> }
  43. <element extends='div' name='x-carousel' constructor='Carousel'> <template> <style scoped> :host { display:

    contents; } div.carousel { overflow-x: hidden; ... } </style> <div class='carousel'><content></content></div> </template> </element> <div is='x-carousel'> // show all the pictures </div>
  44. document.createElement('x-carousel');

  45. var carousel = new Carousel();

  46. <body/> <!-- are we there yet? -->

  47. <blockquote> When I'm introspective about the last few years, I

    think the biggest mistake that we made as a company was betting too much on HTML5 as opposed to native. Because it just wasn't there. <footer> - Mark Zuckerberg, 2012 </footer> </blockquote>
  48. None
  49. <blockquote> It's not that HTML5 is bad. I'm actually, in

    the long-term, really excited about it. One of the things that's interesting is we actually have more people on a daily basis using Facebook on the mobile Web than we have using our iOS or Android apps combined. </blockquote>
  50. None
  51. // the web as first class app platform

  52. <!-- the web's survival is a not a right -->

    // but it is a privilege it can earn
  53. <body />