SlideShare a Scribd company logo
WHAT’S NEW IN
      HTML5, CSS3 & JAVASCRIPT?
                           James Pearce
                           @jamespearce



Thursday, November 3, 11
2011 HAS BEEN AN
                   EXCITING YEAR FOR
                         HTML5



Thursday, November 3, 11
EVERYTHING
                           EXCITING IN 2011
                           HAS BEEN CALLED
                                HTML5



Thursday, November 3, 11
Thursday, November 3, 11
CSS   JS




Thursday, November 3, 11
Where is all this good
                        stuff coming from?




Thursday, November 3, 11
WHATWG




Thursday, November 3, 11
Thursday, November 3, 11
Thursday, November 3, 11
Thursday, November 3, 11
font-face
                           accelerometer
                                                       @page
       localStorage
                                                             CSS Text
         @media
                                                               manifest
 transform
                                                             <video>
         WebSQL
                                                           GeoLocation

          type=camera                                     canvas

                                    keyframe   gradient

Thursday, November 3, 11
Thursday, November 3, 11
Thursday, November 3, 11
Thursday, November 3, 11
Thursday, November 3, 11
WebFont        Video     Audio    Graphics
        Device Access

              Camera                 CSS Styling & Layout               Network

             Location                                                    HTTP
                                             JavaScript
             Contacts                                                    AJAX

                 SMS                      Semantic HTML                 Events

           Orientation                                                  Sockets
                           File Systems      Workers &
                                                            Cross-App
                 Gyro       Databases          Parallel                  SSL
                                                            Messaging
                           App Caches        Processing




Thursday, November 3, 11
State of
                           the Art




Thursday, November 3, 11
Thursday, November 3, 11
HTML5 Semantics
Thursday, November 3, 11
Document Structure

      <!DOCTYPE html>
      <html>

         <head>

             <script src="app.js"></script>

             <link rel="stylesheet" href="theme.css">




Thursday, November 3, 11
Document Structure


                                 <header>

                                <section>
                                <article>
                   <nav>                    <aside>
                                <article>

                                 <footer>



Thursday, November 3, 11
Thursday, November 3, 11
Input Types

                           <form>
                             <input type='date' />
                             <input type='time' />
                             <input type='datetime' />
                           </form>




Thursday, November 3, 11
Opera...

                           <input type='datetime' />




Thursday, November 3, 11
Input Types

                           datetime         number
                           date             range
                           time             color
                           month            search
                           week             tel
                           datetime-local   url
                                            email




Thursday, November 3, 11
iOS5 Support




Thursday, November 3, 11
Progress and meters

           <progress max="10"></progress>

           <progress max="10" value="6"></progress>




Thursday, November 3, 11
Progress and meters

       <meter max="10" value="7"></meter>

       <meter min="5" max="10" value="7"></meter>




Thursday, November 3, 11
Progress and meters

    <meter max="10" high="8" value="1"></meter>

    <meter max="10" high="8" value="9"></meter>




Thursday, November 3, 11
Data Attributes

      <div id='el' data-smell='fish'></div>
      <script>
        var el = document.getElementById('el');
        console.log(el.dataset);
      </script>




Thursday, November 3, 11
Data Attributes

      <script>
        el.dataset.generalAppearance = 'slimy';
        console.log(el.outerHTML);
      </script>




Thursday, November 3, 11
Contenteditable

                           <div contenteditable=""></div>




Thursday, November 3, 11
Contenteditable

                           <!doctype html>
                           <html>
                             <head>
                               <style contenteditable="">
                                  html {}
                                  head, style {
                                    display:block;
                                    font-size:2em;
                                  }
                               </style>
                             </head>
                           </html>                          Demo
Thursday, November 3, 11
Multimedia
Thursday, November 3, 11
Video

             <video width="320" height="240" controls="">
               <source src="movie.mp4" type="video/mp4" />
               <source src="movie.ogg" type="video/ogg" />
               Your browser does not support the video tag.
             </video>




Thursday, November 3, 11
Audio

             <audio autoplay="" controls="">
               <source src="horse.ogg" type="audio/ogg" />
               <source src="horse.mp3" type="audio/mp3" />
               Your browser does not support the audio element.
             </audio>




Thursday, November 3, 11
Connectivity
Thursday, November 3, 11
Web Sockets

                           var socket = new WebSocket(
                              'ws://echo.websocket.org'
                           );

                           socket.onopen = function(e) {
                              socket.send('Echo... echo...');
                           };

                           socket.onmessage = function(e) {
                              console.log(e.data);
                           };




Thursday, November 3, 11
Server-sent Events

                var source = new EventSource('/status.php');

                source.onmessage = function (e) {
                   console.log(e.data);
                };




                              data: My messagenn

                              data: Line 1n
                              data: Line 2nn


Thursday, November 3, 11
Performance &
                            Integration
Thursday, November 3, 11
Web Workers

                var worker = new Worker('task.js');
                worker.onmessage = function(e) {
                   alert('Worker says ' + e.data);
                };
                worker.postMessage();



                // task.js:
                self.onmessage = function(e) {
                   // calculate Fibonacci series or something
                  self.postMessage("Answer is...");
                };


Thursday, November 3, 11
Navigation Timing

                <script>
                  function onLoad() {
                    console.log(
                       new Date().getTime() -
                      performance.timing.navigationStart
                    );
                  }
                </script>

                <body onload="onLoad()">
                  ...




Thursday, November 3, 11
Thursday, November 3, 11
History API

                           window.history.pushState(
                              {key:"value"},
                              "Title",
                              "/newpage.html"
                           );


                           window.onpopstate = function(e) {  
                             console.log(e.state);
                           };


                                                         Demo

Thursday, November 3, 11
Drag and Drop

                    <div draggable="true">Apple</div>
                    <div draggable="true">Orange</div>
                    <div draggable="true">Pear</div>

                    <div id='basket'>Basket: </div>




Thursday, November 3, 11
Drag and Drop
           window.ondragstart = function (e) {
              e.dataTransfer.setData(
                 'text/plain', e.target.innerHTML
              );
           };

           var basket = document.getElementById('basket');
           basket.ondragover = function (e) {
              e.preventDefault();
           };
           basket.ondrop = function (e) {
              e.target.innerHTML +=
                e.dataTransfer.getData('text/plain') + ' ';
           };
                                                         Demo
Thursday, November 3, 11
Offline & Storage
Thursday, November 3, 11
Web Storage

           sessionStorage.setItem("user", "John");
           console.log(sessionStorage.getItem("user"));


           localStorage.setItem("prefs", {a:'b'});
           console.log(localStorage.getItem("prefs"));


           localStorage.removeItem("prefs");
           localStorage.clear();




Thursday, November 3, 11
Web SQL




Thursday, November 3, 11
Indexed DB

                           indexedDB.open('my_database')

                           db.createObjectStore('my_store', {
                             keyPath: 'record_id'
                           });

                           store.put({
                             record_id: 123,
                             name: 'My record'
                           });
                           store.get(123);




Thursday, November 3, 11
Indexed DB

                store.openCursor().onsuccess = function(e) {  

                  var cursor = e.target.result;

                  if (cursor) {  
                    console.log(cursor.value);  
                    cursor.continue();  
                  } else {
                    console.log('Got them all');  
                  }  

                };



Thursday, November 3, 11
File API

         <input type="file" id="picker">

         <script>
           var picker = document.getElementById('picker');
           picker.onchange = function (e) {
              console.log(picker.files[0]);
           };
         </script>




Thursday, November 3, 11
App cache

                           CACHE MANIFEST
                           # v556

                           CACHE:
                           theme.css
                           app/app.js

                           NETWORK:
                           login.php
                           http://api.twitter.com

                           FALLBACK:
                           /login.php /static.html


Thursday, November 3, 11
3D, Graphics, Effects
Thursday, November 3, 11
Web GL



                                    Demo

Thursday, November 3, 11
CSS3 Styling
Thursday, November 3, 11
The clichés

                              border-radius: 5px 10px;




                              text-shadow: -1px -1px #fff,
                                            1px 1px #333;



                              box-shadow: 0 0 5px 5px #888;


                                                         Demo
Thursday, November 3, 11
Element.classList

            <div id='el' class='extjs'></div>

            var el = document.getElementById('el');
            el.classList.remove('extjs');  
            el.classList.add('sencha');  
              
            el.classList.toggle('rocks');
            el.classList.contains('rockstars');

            console.log(el.classList);




Thursday, November 3, 11
Element.matchesSelector

            <div id='el' class='sencha'></div>

            <script>
              var el = document.getElementById('el');
              console.log(el.matchesSelector('.sencha'));
              console.log(el.matchesSelector('#extjs'));
            </script>




Thursday, November 3, 11
window.matchMedia

                           @media screen and (min-width: 400px) {
                             * { font-family: sans-serif }
                           }

                           window.matchMedia(
                             "screen and (min-width: 400px)"
                           )




Thursday, November 3, 11
Transformations
                            & Translations




                                             Demo

Thursday, November 3, 11
CSS Shaders

                           div.waving {
                               filter: custom(url('wave.vs'),
                                   20 20, phase 0, amplitude 50
                               );
                           }




Thursday, November 3, 11
CSS Shaders

                           div.waving {
                               filter: grayscale(1.0)
                                        custom(
                                            url('book.vs')
                                            url('page.fs')
                                        );
                           }




                                                             Demo


Thursday, November 3, 11
Device Access
Thursday, November 3, 11
Geolocation
                                 &
                           Accelerometer




Thursday, November 3, 11
Compass

                window.ondeviceorientation = function(e) {
                   console.log(e.webkitCompassHeading);
                }




Thursday, November 3, 11
Media Capture

                           <input type="file" id="picker"
                               accept="image/*"
                               capture='camera'
                           >

                           // camcorder
                           // microphone
                           // filesystem




Thursday, November 3, 11
Media Capture

         <input type="file" id="picker" accept="image/*" />

         <script>
           var picker = document.getElementById('picker');
           picker.onchange = function (e) {
              var image = picker.files[0];
              image.getFormatData(
                 function (data) {
                   console.write(data);
                 }
              );
           };
         </script>


Thursday, November 3, 11
Everything Else
                                 :-(



Thursday, November 3, 11
ES 5




Thursday, November 3, 11
Object

                           Object.create
                           Object.defineProperty
                           Object.defineProperties
                           Object.getPrototypeOf
                           Object.keys

                           Object.seal
                           Object.freeze
                           Object.preventExtensions
                           Object.isSealed
                           Object.isFrozen
                           Object.isExtensible
Thursday, November 3, 11
Array.prototype

                             arr.indexOf
                             arr.lastIndexOf
                             arr.every
                             arr.some
                             arr.forEach
                             arr.map
                             arr.filter
                             arr.reduce




Thursday, November 3, 11
What’s coming down
                               the track?




Thursday, November 3, 11
ES.6
                             ‘.next’
                           ‘Harmony’



Thursday, November 3, 11
Block Scope

                           for (...) {
                             let myvar='scoped';
                             const myconst=42;
                             function myfunc() {
                               //...
                             }
                           }

                           console.log(myvar); //RefError




Thursday, November 3, 11
Destructuring

                    var [x, y] = [1, 2];

                    var {a:x, b:y} = {a:1, b:2};

                    function myfunc( {a:x, b:y} ) {...}
                    myfunc({a:1, a:2});




Thursday, November 3, 11
Default Arguments

                           function myfunc(a=1, b=2) {
                             console.log(a);
                             console.log(b);
                           }

                           myfunc();




Thursday, November 3, 11
Rest

                           function myfunc(a, ...b) {
                             console.log(a);

                               b.forEach(function (i) {
                                 console.log(b);
                               });

                           }

                           myfunc(1, 2, 3, 4);



Thursday, November 3, 11
Spread

                           function myfunc(a, b, c, d) {
                             console.log(a);
                             //...
                           }

                           var args = [2, 3, 4];

                           myfunc(1, ...args);




Thursday, November 3, 11
Modules

          module MyModule {
            export function a() {};
            export function b() {};
          }

          import MyModule.*;

          module Ext = require('http://../ext.js');




Thursday, November 3, 11
Classes

                           class MyClass {
                             constructor(a, b) {
                               private a = a;
                               //...
                             }
                             myMethod() {
                               //...
                             }
                           }




Thursday, November 3, 11
Iterators
                             Generators
                           Comprehensions



Thursday, November 3, 11
Device Access




Thursday, November 3, 11
Camera
                           Microphone
                            Contacts
                            Calendar
                           Messaging
                           Telephony
                             NFC...

Thursday, November 3, 11
Funky Stuff




Thursday, November 3, 11
Web Components
                             Shadow DOM
                           Model Driven Views




Thursday, November 3, 11
What does this
                           mean for you?




Thursday, November 3, 11
Stay on top of change

                              http://blogs.msdn.com/b/ie/
                              https://developer.mozilla.org
                                http://chromestatus.com




Thursday, November 3, 11
Stay on top of diversity

                              CanIUse
                           BrowserScope
                             Modernizr
                            DeviceAtlas
                           HTML5 Rocks




Thursday, November 3, 11
Stay on top of change
                                                  100%
              Support




                                Browsers




                                           Capabilities & specifications

Thursday, November 3, 11
Stay on top of change
                                                  100%
              Support




                                Browsers         Polyfills Frameworks




                                           Capabilities & specifications

Thursday, November 3, 11
Relish the opportunity...

                           ...to do amazing things!




Thursday, November 3, 11
THANKS
                             James Pearce
                             @jamespearce



Thursday, November 3, 11

More Related Content

Similar to What's new in HTML5, CSS3 and JavaScript, James Pearce (20)

Hacking Webkit & Its JavaScript Engines
Hacking Webkit & Its JavaScript EnginesHacking Webkit & Its JavaScript Engines
Hacking Webkit & Its JavaScript Engines
Sencha
 
HTML5 & CSS3 in Drupal (on the Bayou)
HTML5 & CSS3 in Drupal (on the Bayou)HTML5 & CSS3 in Drupal (on the Bayou)
HTML5 & CSS3 in Drupal (on the Bayou)
Mediacurrent
 
HTML XHTML HTML5
HTML XHTML HTML5HTML XHTML HTML5
HTML XHTML HTML5
timstone
 
Tim stone.html5.rjug.20110316
Tim stone.html5.rjug.20110316Tim stone.html5.rjug.20110316
Tim stone.html5.rjug.20110316
Richmond Java User's Group
 
Devon 2011-f-4-improve your-javascript
Devon 2011-f-4-improve your-javascriptDevon 2011-f-4-improve your-javascript
Devon 2011-f-4-improve your-javascript
Daum DNA
 
A Look at the Future of HTML5
A Look at the Future of HTML5A Look at the Future of HTML5
A Look at the Future of HTML5
Tim Wright
 
Cloud9 IDE Talk at meet.js Poznań
Cloud9 IDE Talk at meet.js PoznańCloud9 IDE Talk at meet.js Poznań
Cloud9 IDE Talk at meet.js Poznań
zefhemel
 
HTML5: State of the Union
HTML5: State of the UnionHTML5: State of the Union
HTML5: State of the Union
Sencha
 
让开发也懂前端
让开发也懂前端让开发也懂前端
让开发也懂前端
lifesinger
 
Intro to HTML5 Game Programming
Intro to HTML5 Game ProgrammingIntro to HTML5 Game Programming
Intro to HTML5 Game Programming
James Williams
 
Linked data: not just theory
Linked data: not just theoryLinked data: not just theory
Linked data: not just theory
Richard Wallis
 
HTML5 and jQuery for Flex Developers
HTML5 and jQuery for Flex DevelopersHTML5 and jQuery for Flex Developers
HTML5 and jQuery for Flex Developers
Ryan Stewart
 
1 the web environment
1   the web environment1   the web environment
1 the web environment
Rick Ogden
 
Introducing Designer 2
Introducing Designer 2Introducing Designer 2
Introducing Designer 2
Sencha
 
HTML5 and Sencha Touch
HTML5 and Sencha TouchHTML5 and Sencha Touch
HTML5 and Sencha Touch
Patrick Sheridan
 
Introduction to Web Programming
Introduction to Web ProgrammingIntroduction to Web Programming
Introduction to Web Programming
Ynon Perek
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
Adrian Olaru
 
The facilities of Features Drupal module
The facilities of Features Drupal moduleThe facilities of Features Drupal module
The facilities of Features Drupal module
Kálmán Hosszu
 
Intro to HTML
Intro to HTMLIntro to HTML
Intro to HTML
UC Berkeley Graduate School of Journalism
 
HTML5 Pearson preso
HTML5 Pearson presoHTML5 Pearson preso
HTML5 Pearson preso
Chris Mills
 
Hacking Webkit & Its JavaScript Engines
Hacking Webkit & Its JavaScript EnginesHacking Webkit & Its JavaScript Engines
Hacking Webkit & Its JavaScript Engines
Sencha
 
HTML5 & CSS3 in Drupal (on the Bayou)
HTML5 & CSS3 in Drupal (on the Bayou)HTML5 & CSS3 in Drupal (on the Bayou)
HTML5 & CSS3 in Drupal (on the Bayou)
Mediacurrent
 
HTML XHTML HTML5
HTML XHTML HTML5HTML XHTML HTML5
HTML XHTML HTML5
timstone
 
Devon 2011-f-4-improve your-javascript
Devon 2011-f-4-improve your-javascriptDevon 2011-f-4-improve your-javascript
Devon 2011-f-4-improve your-javascript
Daum DNA
 
A Look at the Future of HTML5
A Look at the Future of HTML5A Look at the Future of HTML5
A Look at the Future of HTML5
Tim Wright
 
Cloud9 IDE Talk at meet.js Poznań
Cloud9 IDE Talk at meet.js PoznańCloud9 IDE Talk at meet.js Poznań
Cloud9 IDE Talk at meet.js Poznań
zefhemel
 
HTML5: State of the Union
HTML5: State of the UnionHTML5: State of the Union
HTML5: State of the Union
Sencha
 
让开发也懂前端
让开发也懂前端让开发也懂前端
让开发也懂前端
lifesinger
 
Intro to HTML5 Game Programming
Intro to HTML5 Game ProgrammingIntro to HTML5 Game Programming
Intro to HTML5 Game Programming
James Williams
 
Linked data: not just theory
Linked data: not just theoryLinked data: not just theory
Linked data: not just theory
Richard Wallis
 
HTML5 and jQuery for Flex Developers
HTML5 and jQuery for Flex DevelopersHTML5 and jQuery for Flex Developers
HTML5 and jQuery for Flex Developers
Ryan Stewart
 
1 the web environment
1   the web environment1   the web environment
1 the web environment
Rick Ogden
 
Introducing Designer 2
Introducing Designer 2Introducing Designer 2
Introducing Designer 2
Sencha
 
Introduction to Web Programming
Introduction to Web ProgrammingIntroduction to Web Programming
Introduction to Web Programming
Ynon Perek
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
Adrian Olaru
 
The facilities of Features Drupal module
The facilities of Features Drupal moduleThe facilities of Features Drupal module
The facilities of Features Drupal module
Kálmán Hosszu
 
HTML5 Pearson preso
HTML5 Pearson presoHTML5 Pearson preso
HTML5 Pearson preso
Chris Mills
 

More from Sencha (20)

Breathe New Life into Your Existing JavaScript Applications with Web Components
Breathe New Life into Your Existing JavaScript Applications with Web ComponentsBreathe New Life into Your Existing JavaScript Applications with Web Components
Breathe New Life into Your Existing JavaScript Applications with Web Components
Sencha
 
Ext JS 6.6 Highlights
Ext JS 6.6 HighlightsExt JS 6.6 Highlights
Ext JS 6.6 Highlights
Sencha
 
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha
 
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha
 
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App TestingSencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha
 
Sencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha TestSencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha Test
Sencha
 
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha
 
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha Roadshow 2017: Modernizing the Ext JS Class System and ToolingSencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha
 
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha
 
Sencha Roadshow 2017: Mobile First or Desktop First
Sencha Roadshow 2017: Mobile First or Desktop FirstSencha Roadshow 2017: Mobile First or Desktop First
Sencha Roadshow 2017: Mobile First or Desktop First
Sencha
 
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and BeyondSencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha
 
Leveraging React and GraphQL to Create a Performant, Scalable Data Grid
Leveraging React and GraphQL to Create a Performant, Scalable Data GridLeveraging React and GraphQL to Create a Performant, Scalable Data Grid
Leveraging React and GraphQL to Create a Performant, Scalable Data Grid
Sencha
 
Learn Key Insights from The State of Web Application Testing Research Report
Learn Key Insights from The State of Web Application Testing Research ReportLearn Key Insights from The State of Web Application Testing Research Report
Learn Key Insights from The State of Web Application Testing Research Report
Sencha
 
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React AppsIntroducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
Sencha
 
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark BrocatoSenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
Sencha
 
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
Sencha
 
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
Sencha
 
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web AppsSenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
Sencha
 
Ext JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell SimeonsExt JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell Simeons
Sencha
 
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
Sencha
 
Breathe New Life into Your Existing JavaScript Applications with Web Components
Breathe New Life into Your Existing JavaScript Applications with Web ComponentsBreathe New Life into Your Existing JavaScript Applications with Web Components
Breathe New Life into Your Existing JavaScript Applications with Web Components
Sencha
 
Ext JS 6.6 Highlights
Ext JS 6.6 HighlightsExt JS 6.6 Highlights
Ext JS 6.6 Highlights
Sencha
 
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha
 
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha
 
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App TestingSencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha
 
Sencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha TestSencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha Test
Sencha
 
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha
 
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha Roadshow 2017: Modernizing the Ext JS Class System and ToolingSencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha
 
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha
 
Sencha Roadshow 2017: Mobile First or Desktop First
Sencha Roadshow 2017: Mobile First or Desktop FirstSencha Roadshow 2017: Mobile First or Desktop First
Sencha Roadshow 2017: Mobile First or Desktop First
Sencha
 
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and BeyondSencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha
 
Leveraging React and GraphQL to Create a Performant, Scalable Data Grid
Leveraging React and GraphQL to Create a Performant, Scalable Data GridLeveraging React and GraphQL to Create a Performant, Scalable Data Grid
Leveraging React and GraphQL to Create a Performant, Scalable Data Grid
Sencha
 
Learn Key Insights from The State of Web Application Testing Research Report
Learn Key Insights from The State of Web Application Testing Research ReportLearn Key Insights from The State of Web Application Testing Research Report
Learn Key Insights from The State of Web Application Testing Research Report
Sencha
 
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React AppsIntroducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
Sencha
 
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark BrocatoSenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
Sencha
 
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
Sencha
 
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
Sencha
 
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web AppsSenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
Sencha
 
Ext JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell SimeonsExt JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell Simeons
Sencha
 
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
Sencha
 
Ad

Recently uploaded (20)

Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Shashikant Jagtap
 
TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025
Suyash Joshi
 
Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.
hok12341073
 
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Infrassist Technologies Pvt. Ltd.
 
Co-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using ProvenanceCo-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using Provenance
Paul Groth
 
Top 25 AI Coding Agents for Vibe Coders to Use in 2025.pdf
Top 25 AI Coding Agents for Vibe Coders to Use in 2025.pdfTop 25 AI Coding Agents for Vibe Coders to Use in 2025.pdf
Top 25 AI Coding Agents for Vibe Coders to Use in 2025.pdf
SOFTTECHHUB
 
6th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 20256th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 2025
DanBrown980551
 
Jeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software DeveloperJeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software Developer
Jeremy Millul
 
LSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection FunctionLSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection Function
Takahiro Harada
 
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
Jasper Oosterveld
 
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOMEstablish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Anchore
 
Compliance-as-a-Service document pdf text
Compliance-as-a-Service document pdf textCompliance-as-a-Service document pdf text
Compliance-as-a-Service document pdf text
Earthling security
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI FoundationsOracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptxISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
AyilurRamnath1
 
If You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FMEIf You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FME
Safe Software
 
Improving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevExImproving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevEx
Justin Reock
 
IntroSlides-May-BuildWithAi-EarthEngine.pdf
IntroSlides-May-BuildWithAi-EarthEngine.pdfIntroSlides-May-BuildWithAi-EarthEngine.pdf
IntroSlides-May-BuildWithAi-EarthEngine.pdf
Luiz Carneiro
 
Palo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity FoundationPalo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity Foundation
VICTOR MAESTRE RAMIREZ
 
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und AnwendungsfälleDomino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
panagenda
 
Data Virtualization: Bringing the Power of FME to Any Application
Data Virtualization: Bringing the Power of FME to Any ApplicationData Virtualization: Bringing the Power of FME to Any Application
Data Virtualization: Bringing the Power of FME to Any Application
Safe Software
 
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Shashikant Jagtap
 
TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025
Suyash Joshi
 
Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.
hok12341073
 
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Infrassist Technologies Pvt. Ltd.
 
Co-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using ProvenanceCo-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using Provenance
Paul Groth
 
Top 25 AI Coding Agents for Vibe Coders to Use in 2025.pdf
Top 25 AI Coding Agents for Vibe Coders to Use in 2025.pdfTop 25 AI Coding Agents for Vibe Coders to Use in 2025.pdf
Top 25 AI Coding Agents for Vibe Coders to Use in 2025.pdf
SOFTTECHHUB
 
6th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 20256th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 2025
DanBrown980551
 
Jeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software DeveloperJeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software Developer
Jeremy Millul
 
LSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection FunctionLSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection Function
Takahiro Harada
 
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
Jasper Oosterveld
 
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOMEstablish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Anchore
 
Compliance-as-a-Service document pdf text
Compliance-as-a-Service document pdf textCompliance-as-a-Service document pdf text
Compliance-as-a-Service document pdf text
Earthling security
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI FoundationsOracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptxISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
AyilurRamnath1
 
If You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FMEIf You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FME
Safe Software
 
Improving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevExImproving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevEx
Justin Reock
 
IntroSlides-May-BuildWithAi-EarthEngine.pdf
IntroSlides-May-BuildWithAi-EarthEngine.pdfIntroSlides-May-BuildWithAi-EarthEngine.pdf
IntroSlides-May-BuildWithAi-EarthEngine.pdf
Luiz Carneiro
 
Palo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity FoundationPalo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity Foundation
VICTOR MAESTRE RAMIREZ
 
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und AnwendungsfälleDomino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
panagenda
 
Data Virtualization: Bringing the Power of FME to Any Application
Data Virtualization: Bringing the Power of FME to Any ApplicationData Virtualization: Bringing the Power of FME to Any Application
Data Virtualization: Bringing the Power of FME to Any Application
Safe Software
 
Ad

What's new in HTML5, CSS3 and JavaScript, James Pearce

  • 1. WHAT’S NEW IN HTML5, CSS3 & JAVASCRIPT? James Pearce @jamespearce Thursday, November 3, 11
  • 2. 2011 HAS BEEN AN EXCITING YEAR FOR HTML5 Thursday, November 3, 11
  • 3. EVERYTHING EXCITING IN 2011 HAS BEEN CALLED HTML5 Thursday, November 3, 11
  • 5. CSS JS Thursday, November 3, 11
  • 6. Where is all this good stuff coming from? Thursday, November 3, 11
  • 11. font-face accelerometer @page localStorage CSS Text @media manifest transform <video> WebSQL GeoLocation type=camera canvas keyframe gradient Thursday, November 3, 11
  • 16. WebFont Video Audio Graphics Device Access Camera CSS Styling & Layout Network Location HTTP JavaScript Contacts AJAX SMS Semantic HTML Events Orientation Sockets File Systems Workers & Cross-App Gyro Databases Parallel SSL Messaging App Caches Processing Thursday, November 3, 11
  • 17. State of the Art Thursday, November 3, 11
  • 20. Document Structure <!DOCTYPE html> <html> <head> <script src="app.js"></script> <link rel="stylesheet" href="theme.css"> Thursday, November 3, 11
  • 21. Document Structure <header> <section> <article> <nav> <aside> <article> <footer> Thursday, November 3, 11
  • 23. Input Types <form> <input type='date' /> <input type='time' /> <input type='datetime' /> </form> Thursday, November 3, 11
  • 24. Opera... <input type='datetime' /> Thursday, November 3, 11
  • 25. Input Types datetime number date range time color month search week tel datetime-local url email Thursday, November 3, 11
  • 27. Progress and meters <progress max="10"></progress> <progress max="10" value="6"></progress> Thursday, November 3, 11
  • 28. Progress and meters <meter max="10" value="7"></meter> <meter min="5" max="10" value="7"></meter> Thursday, November 3, 11
  • 29. Progress and meters <meter max="10" high="8" value="1"></meter> <meter max="10" high="8" value="9"></meter> Thursday, November 3, 11
  • 30. Data Attributes <div id='el' data-smell='fish'></div> <script> var el = document.getElementById('el'); console.log(el.dataset); </script> Thursday, November 3, 11
  • 31. Data Attributes <script> el.dataset.generalAppearance = 'slimy'; console.log(el.outerHTML); </script> Thursday, November 3, 11
  • 32. Contenteditable <div contenteditable=""></div> Thursday, November 3, 11
  • 33. Contenteditable <!doctype html> <html> <head> <style contenteditable=""> html {} head, style { display:block; font-size:2em; } </style> </head> </html> Demo Thursday, November 3, 11
  • 35. Video <video width="320" height="240" controls=""> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag. </video> Thursday, November 3, 11
  • 36. Audio <audio autoplay="" controls=""> <source src="horse.ogg" type="audio/ogg" /> <source src="horse.mp3" type="audio/mp3" /> Your browser does not support the audio element. </audio> Thursday, November 3, 11
  • 38. Web Sockets var socket = new WebSocket( 'ws://echo.websocket.org' ); socket.onopen = function(e) { socket.send('Echo... echo...'); }; socket.onmessage = function(e) { console.log(e.data); }; Thursday, November 3, 11
  • 39. Server-sent Events var source = new EventSource('/status.php'); source.onmessage = function (e) { console.log(e.data); }; data: My messagenn data: Line 1n data: Line 2nn Thursday, November 3, 11
  • 40. Performance & Integration Thursday, November 3, 11
  • 41. Web Workers var worker = new Worker('task.js'); worker.onmessage = function(e) { alert('Worker says ' + e.data); }; worker.postMessage(); // task.js: self.onmessage = function(e) { // calculate Fibonacci series or something   self.postMessage("Answer is..."); }; Thursday, November 3, 11
  • 42. Navigation Timing <script> function onLoad() { console.log( new Date().getTime() - performance.timing.navigationStart ); } </script> <body onload="onLoad()"> ... Thursday, November 3, 11
  • 44. History API window.history.pushState( {key:"value"}, "Title", "/newpage.html" ); window.onpopstate = function(e) {     console.log(e.state); }; Demo Thursday, November 3, 11
  • 45. Drag and Drop <div draggable="true">Apple</div> <div draggable="true">Orange</div> <div draggable="true">Pear</div> <div id='basket'>Basket: </div> Thursday, November 3, 11
  • 46. Drag and Drop window.ondragstart = function (e) { e.dataTransfer.setData( 'text/plain', e.target.innerHTML ); }; var basket = document.getElementById('basket'); basket.ondragover = function (e) { e.preventDefault(); }; basket.ondrop = function (e) { e.target.innerHTML += e.dataTransfer.getData('text/plain') + ' '; }; Demo Thursday, November 3, 11
  • 47. Offline & Storage Thursday, November 3, 11
  • 48. Web Storage sessionStorage.setItem("user", "John"); console.log(sessionStorage.getItem("user")); localStorage.setItem("prefs", {a:'b'}); console.log(localStorage.getItem("prefs")); localStorage.removeItem("prefs"); localStorage.clear(); Thursday, November 3, 11
  • 50. Indexed DB indexedDB.open('my_database') db.createObjectStore('my_store', { keyPath: 'record_id' }); store.put({ record_id: 123, name: 'My record' }); store.get(123); Thursday, November 3, 11
  • 51. Indexed DB store.openCursor().onsuccess = function(e) {     var cursor = e.target.result;   if (cursor) {       console.log(cursor.value);       cursor.continue();     } else {     console.log('Got them all');     }   }; Thursday, November 3, 11
  • 52. File API <input type="file" id="picker"> <script> var picker = document.getElementById('picker'); picker.onchange = function (e) { console.log(picker.files[0]); }; </script> Thursday, November 3, 11
  • 53. App cache CACHE MANIFEST # v556 CACHE: theme.css app/app.js NETWORK: login.php http://api.twitter.com FALLBACK: /login.php /static.html Thursday, November 3, 11
  • 55. Web GL Demo Thursday, November 3, 11
  • 57. The clichés border-radius: 5px 10px; text-shadow: -1px -1px #fff, 1px 1px #333; box-shadow: 0 0 5px 5px #888; Demo Thursday, November 3, 11
  • 58. Element.classList <div id='el' class='extjs'></div> var el = document.getElementById('el'); el.classList.remove('extjs');   el.classList.add('sencha');      el.classList.toggle('rocks'); el.classList.contains('rockstars'); console.log(el.classList); Thursday, November 3, 11
  • 59. Element.matchesSelector <div id='el' class='sencha'></div> <script> var el = document.getElementById('el'); console.log(el.matchesSelector('.sencha')); console.log(el.matchesSelector('#extjs')); </script> Thursday, November 3, 11
  • 60. window.matchMedia @media screen and (min-width: 400px) { * { font-family: sans-serif } } window.matchMedia( "screen and (min-width: 400px)" ) Thursday, November 3, 11
  • 61. Transformations & Translations Demo Thursday, November 3, 11
  • 62. CSS Shaders div.waving { filter: custom(url('wave.vs'), 20 20, phase 0, amplitude 50 ); } Thursday, November 3, 11
  • 63. CSS Shaders div.waving { filter: grayscale(1.0) custom( url('book.vs') url('page.fs') ); } Demo Thursday, November 3, 11
  • 65. Geolocation & Accelerometer Thursday, November 3, 11
  • 66. Compass window.ondeviceorientation = function(e) { console.log(e.webkitCompassHeading); } Thursday, November 3, 11
  • 67. Media Capture <input type="file" id="picker" accept="image/*" capture='camera' > // camcorder // microphone // filesystem Thursday, November 3, 11
  • 68. Media Capture <input type="file" id="picker" accept="image/*" /> <script> var picker = document.getElementById('picker'); picker.onchange = function (e) { var image = picker.files[0]; image.getFormatData( function (data) { console.write(data); } ); }; </script> Thursday, November 3, 11
  • 69. Everything Else :-( Thursday, November 3, 11
  • 71. Object Object.create Object.defineProperty Object.defineProperties Object.getPrototypeOf Object.keys Object.seal Object.freeze Object.preventExtensions Object.isSealed Object.isFrozen Object.isExtensible Thursday, November 3, 11
  • 72. Array.prototype arr.indexOf arr.lastIndexOf arr.every arr.some arr.forEach arr.map arr.filter arr.reduce Thursday, November 3, 11
  • 73. What’s coming down the track? Thursday, November 3, 11
  • 74. ES.6 ‘.next’ ‘Harmony’ Thursday, November 3, 11
  • 75. Block Scope for (...) { let myvar='scoped'; const myconst=42; function myfunc() { //... } } console.log(myvar); //RefError Thursday, November 3, 11
  • 76. Destructuring var [x, y] = [1, 2]; var {a:x, b:y} = {a:1, b:2}; function myfunc( {a:x, b:y} ) {...} myfunc({a:1, a:2}); Thursday, November 3, 11
  • 77. Default Arguments function myfunc(a=1, b=2) { console.log(a); console.log(b); } myfunc(); Thursday, November 3, 11
  • 78. Rest function myfunc(a, ...b) { console.log(a); b.forEach(function (i) { console.log(b); }); } myfunc(1, 2, 3, 4); Thursday, November 3, 11
  • 79. Spread function myfunc(a, b, c, d) { console.log(a); //... } var args = [2, 3, 4]; myfunc(1, ...args); Thursday, November 3, 11
  • 80. Modules module MyModule { export function a() {}; export function b() {}; } import MyModule.*; module Ext = require('http://../ext.js'); Thursday, November 3, 11
  • 81. Classes class MyClass { constructor(a, b) { private a = a; //... } myMethod() { //... } } Thursday, November 3, 11
  • 82. Iterators Generators Comprehensions Thursday, November 3, 11
  • 84. Camera Microphone Contacts Calendar Messaging Telephony NFC... Thursday, November 3, 11
  • 86. Web Components Shadow DOM Model Driven Views Thursday, November 3, 11
  • 87. What does this mean for you? Thursday, November 3, 11
  • 88. Stay on top of change http://blogs.msdn.com/b/ie/ https://developer.mozilla.org http://chromestatus.com Thursday, November 3, 11
  • 89. Stay on top of diversity CanIUse BrowserScope Modernizr DeviceAtlas HTML5 Rocks Thursday, November 3, 11
  • 90. Stay on top of change 100% Support Browsers Capabilities & specifications Thursday, November 3, 11
  • 91. Stay on top of change 100% Support Browsers Polyfills Frameworks Capabilities & specifications Thursday, November 3, 11
  • 92. Relish the opportunity... ...to do amazing things! Thursday, November 3, 11
  • 93. THANKS James Pearce @jamespearce Thursday, November 3, 11