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

SXSW 2013 - Battle of the HTML5 Hackers

SXSW 2013 - Battle of the HTML5 Hackers

Hackers Jeff Burtoft and Jesse Cravens, co-authors of O’Reilly ‘HTML5 Hacks’, approach HTML5 and JavaScript technologies from vastly different vantage points.

Jeff works as an HTML5 Evangelist for Microsoft focusing on IE10 implementations of the new HTML5 specifications and JavaScript powered native applications. Jeff’s job consists of continuous outreach to the HTML5 community, and building wicked cool HTML5 games that push the boundaries of modern browsers.

Jesse works in a small studio in Austin, TX for the innovative agency, frog, and evangelizes the use of free and open source software. He spends his time hacking on JavaScript frameworks and evangelizing Node.js as the ideal rapid prototyping environment. His ultra hack? Outfitting his Fleetwood Pegasus Ultralite to collect data, and actuate tasks from his embedded JavaScript, microcontroller toolkit: trailr.

From canvas to web workers and file transfer to blob management, come see HTML5 demos and code samples that will have you rethinking the possibilities of browser based apps. Watch the competitiveness mount, as these two innovative Hackers try to one-up each other through demonstrations of each of their most inspired hacks.

Jesse Cravens

March 12, 2013
Tweet

More Decks by Jesse Cravens

Other Decks in Technology

Transcript

  1. #BUUMFPGUIF)5.-
    )BDLFST
    www.html5hacks.com/  

    View full-size slide

  2. http://nerdclustr.jit.su  
     
    Github:  https://github.com/html5hacks/nerdclustr  

    View full-size slide

  3. Form  Validation  
     
    Input  types  
     
    CSS  UI  pseudo  classes  

    Jeff   Jesse  

       
       
     .formEl:required  {  
           border:  2px  solid  red  
       }  

    View full-size slide

  4. CSS  Transforms  
     
    CSS  Back  face  Visibility  
     
    CSS  Transitions  
     
    Canvas  
     
     

    Jeff   Jesse  

     transform:  rotateY(  180deg  );  
     transition:  transform  1s;  
     backface-­‐visibility:  hidden;  
     

    View full-size slide

  5. Web  sockets  
     
    GeoLocation  
     
     
     

    Jeff   Jesse  

     var  connection  =  new  WebSocket('ws://app.html5hacks.org/echo',  ['soap',  'xmpp']);  
     var  location  =  navigator.geolocation.getCurrentPosition(showPos);  

    View full-size slide


  6. Jeff   Jesse  

    Windows  8  JS  App  
    Windows  8  App  

    View full-size slide

  7. Jesse  Cravens  
    @jdcravens  
    frog  
    Jeff  Burtoft  
    @boyofgreen  
    Microsoft  

    View full-size slide