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

WHAT’S NEW IN
HTML5, CSS3 & JAVASCRIPT?
James Pearce
@jamespearce

Thursday, November 3, 11

2011 HAS BEEN AN
EXCITING YEAR FOR
HTML5


EVERYTHING
EXCITING IN 2011
HAS BEEN CALLED
HTML5


CSS JS


Where is all this good
stuff coming from?


WHATWG


font-face
accelerometer
@page
localStorage
CSS Text
@media
manifest
transform
<video>
WebSQL
GeoLocation

type=camera canvas

keyframe gradient


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


State of
the Art


HTML5 Semantics

Document Structure

<!DOCTYPE html>
<html>

<head>

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

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


Document Structure

<header>

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

<footer>


Input Types

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


Opera...

<input type='datetime' />


Input Types

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


iOS5 Support


Progress and meters

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

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


Progress and meters

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

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


Progress and meters

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

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


Data Attributes

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


Data Attributes

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


Contenteditable

<div contenteditable=""></div>


Contenteditable

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

Multimedia

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>


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>


Connectivity

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);
};


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


Performance &
Integration

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...");
};


Navigation Timing

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

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


History API

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

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

Demo


Drag and Drop

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

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


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

Offline & Storage

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();


Web SQL


Indexed DB

indexedDB.open('my_database')

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

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


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');
  }

};


File API

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

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


App cache

CACHE MANIFEST
# v556

CACHE:
theme.css
app/app.js

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

FALLBACK:
/login.php /static.html


3D, Graphics, Effects

Web GL

Demo


CSS3 Styling

The clichés

border-radius: 5px 10px;

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

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

Demo

Element.classList

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

el.classList.remove('extjs');
el.classList.add('sencha');

el.classList.toggle('rocks');
el.classList.contains('rockstars');

console.log(el.classList);


Element.matchesSelector

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

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


window.matchMedia

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

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


Transformations
& Translations

Demo


CSS Shaders

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


CSS Shaders

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

Demo


Device Access

Geolocation
&
Accelerometer


Compass

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


Media Capture

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

// camcorder
// microphone
// filesystem


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>


Everything Else
:-(


ES 5


Object

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

Object.seal
Object.freeze
Object.preventExtensions
Object.isSealed
Object.isFrozen
Object.isExtensible

Array.prototype

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


What’s coming down
the track?


ES.6
‘.next’
‘Harmony’


Block Scope

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

console.log(myvar); //RefError


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});


Default Arguments

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

myfunc();


Rest

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

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

}

myfunc(1, 2, 3, 4);


Spread

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

var args = [2, 3, 4];

myfunc(1, ...args);


Modules

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

import MyModule.*;

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


Classes

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


Iterators
Generators
Comprehensions


Device Access


Camera
Microphone
Contacts
Calendar
Messaging
Telephony
NFC...


Funky Stuff


Web Components
Shadow DOM
Model Driven Views


What does this
mean for you?


Stay on top of change

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


Stay on top of diversity

CanIUse
BrowserScope
Modernizr
DeviceAtlas
HTML5 Rocks


100%
Support

Browsers

Capabilities & speciﬁcations


100%
Support

Browsers Polyﬁlls Frameworks

Capabilities & speciﬁcations


Relish the opportunity...

...to do amazing things!


THANKS
James Pearce
@jamespearce


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

Recommended

Recommended

More Related Content

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

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

More from Sencha

More from Sencha (20)

Recently uploaded

Recently uploaded (20)

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