SlideShare une entreprise Scribd logo
1  sur  7
Télécharger pour lire hors ligne
www.html5hacks.com/	
  




Battle of the HTML5
      Hackers
http://nerdclustr.jit.su	
  
                          	
  
Github:	
  https://github.com/html5hacks/nerdclustr	
  
Form	
  Validation	
  
	
  
	
  <input	
  type="text"	
  required	
  />	
  


Input	
  types	
  
	
  
	
  <input	
  type=“email"	
  	
  />	
  


CSS	
  UI	
  pseudo	
  classes	
                     Jeff	
     Jesse	
  

	
  .formEl:required	
  {	
  


                                                     0 3
	
  	
  	
  	
  border:	
  2px	
  solid	
  red	
  
	
  	
  }	
  
CSS	
  Transforms	
  
	
  
	
  transform:	
  rotateY(	
  180deg	
  );	
  


CSS	
  Back	
  face	
  Visibility	
  
	
  
	
  backface-­‐visibility:	
  hidden;	
  


CSS	
  Transitions	
                             Jeff	
     Jesse	
  

	
  
	
  transition:	
  transform	
  1s;	
  


Canvas	
  
	
  
<canvas></canvas>	
  
	
  
                                                 4 3
Web	
  sockets	
  
	
  
	
  var	
  connection	
  =	
  new	
  WebSocket('ws://app.html5hacks.org/echo',	
  ['soap',	
  'xmpp']);	
  


GeoLocation	
  
	
  
	
  
	
  var	
  location	
  =	
  navigator.geolocation.getCurrentPosition(showPos);	
  
	
                                                                                 Jeff	
                 Jesse	
  




                                                                                     4 5
Windows	
  8	
  App	
  




Windows	
  8	
  JS	
  App	
  

                                                  Jeff	
     Jesse	
  




                                                  5 5
Jesse	
  Cravens	
     Jeff	
  Burtoft	
  
@jdcravens	
           @boyofgreen	
  
frog	
                 Microsoft	
  

Contenu connexe

Similaire à Sxsw2013

SXSW 2012 JavaScript MythBusters
SXSW 2012 JavaScript MythBustersSXSW 2012 JavaScript MythBusters
SXSW 2012 JavaScript MythBustersElena-Oana Tabaranu
 
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFabio Akita
 
Web Performance Part 4 "Client-side performance"
Web Performance Part 4  "Client-side performance"Web Performance Part 4  "Client-side performance"
Web Performance Part 4 "Client-side performance"Binary Studio
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and moreYan Shi
 
Web app and more
Web app and moreWeb app and more
Web app and morefaming su
 
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com RubyConsegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com RubyFabio Akita
 
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...tdc-globalcode
 
JavaScript MV* Framework - Making the Right Choice
JavaScript MV* Framework - Making the Right ChoiceJavaScript MV* Framework - Making the Right Choice
JavaScript MV* Framework - Making the Right ChoiceDmitry Sheiko
 
Html5 : stockage local & synchronisation
Html5 : stockage local & synchronisationHtml5 : stockage local & synchronisation
Html5 : stockage local & synchronisationgoldoraf
 
Persistent mobile JavaScript
Persistent mobile JavaScriptPersistent mobile JavaScript
Persistent mobile JavaScriptYorick Phoenix
 
Site Testing with CasperJS
Site Testing with CasperJSSite Testing with CasperJS
Site Testing with CasperJSJoseph Scott
 
JavaScript Security
JavaScript SecurityJavaScript Security
JavaScript SecurityJason Harwig
 
Webpack packing it all
Webpack packing it allWebpack packing it all
Webpack packing it allCriciúma Dev
 
Packing it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to nowPacking it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to nowDerek Willian Stavis
 
Moving to the Client - JavaFX and HTML5
Moving to the Client - JavaFX and HTML5Moving to the Client - JavaFX and HTML5
Moving to the Client - JavaFX and HTML5Stephen Chin
 
JavaScript tracing, debugging, profiling made simple with spy-js
JavaScript tracing, debugging, profiling made simple with spy-jsJavaScript tracing, debugging, profiling made simple with spy-js
JavaScript tracing, debugging, profiling made simple with spy-jsArtem Govorov
 

Similaire à Sxsw2013 (20)

SXSW 2012 JavaScript MythBusters
SXSW 2012 JavaScript MythBustersSXSW 2012 JavaScript MythBusters
SXSW 2012 JavaScript MythBusters
 
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
 
Web Performance Part 4 "Client-side performance"
Web Performance Part 4  "Client-side performance"Web Performance Part 4  "Client-side performance"
Web Performance Part 4 "Client-side performance"
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
Web app and more
Web app and moreWeb app and more
Web app and more
 
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com RubyConsegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
 
ICEfaces and JSF 2.0 on GlassFish
ICEfaces and JSF 2.0 on GlassFishICEfaces and JSF 2.0 on GlassFish
ICEfaces and JSF 2.0 on GlassFish
 
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
 
Webpack
Webpack Webpack
Webpack
 
JavaScript MV* Framework - Making the Right Choice
JavaScript MV* Framework - Making the Right ChoiceJavaScript MV* Framework - Making the Right Choice
JavaScript MV* Framework - Making the Right Choice
 
Html5 : stockage local & synchronisation
Html5 : stockage local & synchronisationHtml5 : stockage local & synchronisation
Html5 : stockage local & synchronisation
 
Persistent mobile JavaScript
Persistent mobile JavaScriptPersistent mobile JavaScript
Persistent mobile JavaScript
 
Scripting GeoServer
Scripting GeoServerScripting GeoServer
Scripting GeoServer
 
Site Testing with CasperJS
Site Testing with CasperJSSite Testing with CasperJS
Site Testing with CasperJS
 
JavaScript Security
JavaScript SecurityJavaScript Security
JavaScript Security
 
OneRing @ OSCamp 2010
OneRing @ OSCamp 2010OneRing @ OSCamp 2010
OneRing @ OSCamp 2010
 
Webpack packing it all
Webpack packing it allWebpack packing it all
Webpack packing it all
 
Packing it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to nowPacking it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to now
 
Moving to the Client - JavaFX and HTML5
Moving to the Client - JavaFX and HTML5Moving to the Client - JavaFX and HTML5
Moving to the Client - JavaFX and HTML5
 
JavaScript tracing, debugging, profiling made simple with spy-js
JavaScript tracing, debugging, profiling made simple with spy-jsJavaScript tracing, debugging, profiling made simple with spy-js
JavaScript tracing, debugging, profiling made simple with spy-js
 

Plus de Jesse Cravens

The Art and Science of Shipping Ember Apps
The Art and Science of Shipping Ember AppsThe Art and Science of Shipping Ember Apps
The Art and Science of Shipping Ember AppsJesse Cravens
 
Oredev 2013: Building Web Apps with Ember.js
Oredev 2013: Building Web Apps with Ember.jsOredev 2013: Building Web Apps with Ember.js
Oredev 2013: Building Web Apps with Ember.jsJesse Cravens
 
JavaScript Makers: How JS is Helping Drive the Maker Movement
JavaScript Makers: How JS is Helping Drive the Maker MovementJavaScript Makers: How JS is Helping Drive the Maker Movement
JavaScript Makers: How JS is Helping Drive the Maker MovementJesse Cravens
 
HTML5.tx 2013: Embedded JavaScript, HTML5 and the Internet of Things
HTML5.tx 2013: Embedded JavaScript, HTML5 and the Internet of ThingsHTML5.tx 2013: Embedded JavaScript, HTML5 and the Internet of Things
HTML5.tx 2013: Embedded JavaScript, HTML5 and the Internet of ThingsJesse Cravens
 
Client Server 3.0 - 6 Ways JavaScript is Revolutionizing the Client/Server Re...
Client Server 3.0 - 6 Ways JavaScript is Revolutionizing the Client/Server Re...Client Server 3.0 - 6 Ways JavaScript is Revolutionizing the Client/Server Re...
Client Server 3.0 - 6 Ways JavaScript is Revolutionizing the Client/Server Re...Jesse Cravens
 
Rapid Prototyping HTML5 Applications with Node.js
Rapid Prototyping HTML5 Applications with Node.jsRapid Prototyping HTML5 Applications with Node.js
Rapid Prototyping HTML5 Applications with Node.jsJesse Cravens
 

Plus de Jesse Cravens (6)

The Art and Science of Shipping Ember Apps
The Art and Science of Shipping Ember AppsThe Art and Science of Shipping Ember Apps
The Art and Science of Shipping Ember Apps
 
Oredev 2013: Building Web Apps with Ember.js
Oredev 2013: Building Web Apps with Ember.jsOredev 2013: Building Web Apps with Ember.js
Oredev 2013: Building Web Apps with Ember.js
 
JavaScript Makers: How JS is Helping Drive the Maker Movement
JavaScript Makers: How JS is Helping Drive the Maker MovementJavaScript Makers: How JS is Helping Drive the Maker Movement
JavaScript Makers: How JS is Helping Drive the Maker Movement
 
HTML5.tx 2013: Embedded JavaScript, HTML5 and the Internet of Things
HTML5.tx 2013: Embedded JavaScript, HTML5 and the Internet of ThingsHTML5.tx 2013: Embedded JavaScript, HTML5 and the Internet of Things
HTML5.tx 2013: Embedded JavaScript, HTML5 and the Internet of Things
 
Client Server 3.0 - 6 Ways JavaScript is Revolutionizing the Client/Server Re...
Client Server 3.0 - 6 Ways JavaScript is Revolutionizing the Client/Server Re...Client Server 3.0 - 6 Ways JavaScript is Revolutionizing the Client/Server Re...
Client Server 3.0 - 6 Ways JavaScript is Revolutionizing the Client/Server Re...
 
Rapid Prototyping HTML5 Applications with Node.js
Rapid Prototyping HTML5 Applications with Node.jsRapid Prototyping HTML5 Applications with Node.js
Rapid Prototyping HTML5 Applications with Node.js
 

Sxsw2013

  • 2. http://nerdclustr.jit.su     Github:  https://github.com/html5hacks/nerdclustr  
  • 3. Form  Validation      <input  type="text"  required  />   Input  types      <input  type=“email"    />   CSS  UI  pseudo  classes   Jeff   Jesse    .formEl:required  {   0 3        border:  2px  solid  red      }  
  • 4. CSS  Transforms      transform:  rotateY(  180deg  );   CSS  Back  face  Visibility      backface-­‐visibility:  hidden;   CSS  Transitions   Jeff   Jesse      transition:  transform  1s;   Canvas     <canvas></canvas>     4 3
  • 5. Web  sockets      var  connection  =  new  WebSocket('ws://app.html5hacks.org/echo',  ['soap',  'xmpp']);   GeoLocation        var  location  =  navigator.geolocation.getCurrentPosition(showPos);     Jeff   Jesse   4 5
  • 6. Windows  8  App   Windows  8  JS  App   Jeff   Jesse   5 5
  • 7. Jesse  Cravens   Jeff  Burtoft   @jdcravens   @boyofgreen   frog   Microsoft