html5 bootcamp: essential html, css, & javascript

HTML5 BootcampEssential HTML, JavaScript & CSS

Todd AnglinEVP Product Strategy, Telerik

Workshop Downloads:

http://bit.ly/TaskListDemo(https://github.com/toddanglin/TaskListDemo.git)

http://bit.ly/workshoplabs

(Case sensitive)

20% Hear

30% See

50% Hear + See

70% Say + Write

90% Experience

You generally remember...

EVP Product Strategy, Telerik5x Microsoft MVP, ASP Insider, O'Reilly Author

@toddanglin

anglin@telerik.comTexMex

5’ 9”41 (Birkenstock)

Workshop Agenda

Time Topic

8:30 AM to Noon HTML5

Noon to 1:00 PM LUNCH

1:00 PM to 4:30 PM JavaScript & CSS3

WHY + HOW

Morning Agenda

Time Topic

8:30 AM Intro to HTML5 & Fundamentals

11:00 AM HANDS ON

11:25 AM Modern HTML App Patterns Overview

Noon Lunch

HTML5 SitesHTML5 AppsHTML5 Enriched

the "plan"the

optionsHTML5

the browsers

use it today

Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.” -Steve Jobs

April, 2010

Why is HTML5 #winning the web?

It's Important.

It's Unifying.

It's Everywhere.

“While it continues to serve as a rough guide to many of the core features of HTML, it does not provide enough information to build implementations that interoperate with each other and, more importantly, with a critical mass of deployed content.”

-W3C on HTML416:32

HTML4 = Rough Guide

Unpredictable Browser Support

How is the web evolving?

<HTML>CSS:3;

ECMAScript();{ }“HTML5”

“Living Standard”

WebSockets FileAPI WebGL

HTML5 FormsGeolocation

Offline

Canvas Video

Canvas

Geolocation

Semantic Tags

SVGWHATWG | W3C | IETF

Which browsers matter?

Know your users.Know your browsers.

of internet browses withIE, FF, Safari, Chrome, or Opera

Source: comScore, Alexa, Flurry Analytics

Jun-10 Dec-10 Jun-11 Dec-110

102030405060708090

100 PC & Mobile Web BrowsingMobile Apps

64MINUTES43

MINUTES

70MINUTES

66MINUTES

74MINUTES

81MINUTES 72

MINUTES

94MINUTES

ble Canvas | Local Storage |

Microdata | Document Editing | Geolocation Semantic Tags | Video/Audio | Selectors

ress WebGL | WebSockets | File API | Drag-Drop

API | IndexedDB | Offline API | Web Workers | HTML5 Forms

IE9 offers support for the most relevant, real-world web patterns that developers are using today as well as the HTML5 patterns we expect to become more mainstream.”

Dean HachamovitchCorporate VP, IE

html5labs.interoperabilitybridges.com

ie.microsoft.com/testdrive

+Platform Previews

r 6 »

r 7 »

r 8 »

r 9 »

ile »

25 26 41

138138

286287303320329337374378386389390397415430434448498505

relative HTML5 scores

In the future, browsers compete

on speed, not on features

What is usable today?

X X X X X

Adoption Strategies

Lowest Common DominatorOnly use features natively available in all target browsers

X X X X X

Adoption Strategies

Polyfill EnrichedOnly use features either natively available OR available via JavaScript polyfill

polyfill(n) poly • fill: JavaScript that implants HTML5 functionality in a browser that does not offer native support

X X X X X

Adoption Strategies

Alternate ExperiencesOnly use features available in target browsers AND design alternate experience for other browsers

progressiveenhancementgracefuldegradation

[Source: Aaron Olaf, Flickr]

[Source: Mercedes USA, http://mbusa.com/]

X X X X X

Adoption Strategies

Vertical TargetCreate experiences targeted at specific browsers (or classes of browsers)

Don't sniff browsers.(Test for features.)

modernizr

Modernizr.[featureName]

if (Modernizr.canvas) { //Use It! }

.[featureName] || .no-[featureName]

.no-canvas { //Styles }

.canvas { //Other Styles}

DEMOModernizr

content="chrome=1">

r 6 »

r 7 »

r 8 »

r 9 »

50100150200250300350400450500

25 26 41138

303 320 329 337 374 378 389 434

relative HTML5 scores

<HTML5>

The Basics

• <!DOCTYPE html>• 9 new “structure” tags• 16 new HTML elements• 13 new <input> types

compatible

stuff you can do todaystuff you can do tomorrow

(or today, too, if IE support is not critical)

We'll cover a lot!But not nearly everything.

semantic tagsaudio & videoHTML5 Formsgeolocationweb storagedrag & dropcanvas

offlineweb sql

indexedDBweb sockets

history apifile api

WebGLweb workersXHR2querySelectorclassListCORScryptoperformancevisibility apionline/offlinecustom protocol

typed arraysWeb Audio APIinline SVGFS APICanvas animationnotificationsorientationmicrodataflexboxmore...

For homework.

http://bit.ly/vsHTML5http://bit.ly/vsSVG

Add IntelliSense & Schema Validation

to Visual Studio 2008/2010 (pre SP1)

HTML5 Forms

Geolocation

{Web Sockets}{Storage}{IndexedDb}{Semantic Data}

semantic tags

tag: <header> <footer> <nav> <article> <hgroup>

support: IE9, FF3.5, Safari, Chrome, Opera

fixing IE<head> <meta charset="utf-8" /> <title>My Weblog</title>

</head>

*Polyfill required to trigger styling in old IE

Why use it?• Accessibility*• SEO*• Code readability• Developer street cred• Why not?

semantic datadata-*

Valid approach to storing data in HTML

<div id="mydiv" data-key="26" data-name="My product name">...</div>

var key = mydiv.getAttribute("data-key") //ORvar key = mydiv.dataset.key

Why use it?• Embed data in page

video & audioSemantic rich media

Reach more people on more devices

Container

Silverlight

FlashHTML5

MP4H.264

video for all browsers*

Your browser does not support video

</object></video>

support: IE9, FF3.6, Safari, Chrome, Opera16:32

Why use it?• Video for plug-less

mobile devices• Eliminate

dependencies on Flash/Silverlight (future proofing)

canvastag: <canvas />

function draw_b() { var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100);}

support: IE*, FF3, Safari, Chrome, Opera

fixing IE<head> </head>

Explorercanvas

Scalable Vector

GraphicsCanvas

Bitmap-output

Good for animation

JavaScript-based

Vector-output

Good for interaction

XML-based

Why use it?

• Dashboards• Charts/Gauges• Resolution

independence

• Games• Super custom

rendering

SVG Canvas

html5 forms*

tag: time, date, search, email, etc.Web Forms 2.0 HTML5 Forms

<form><input type="email" autofocus="autofocus"

placeholder="Enter your email" /></form>

support: Safari, FF4*, Chrome, Opera

validation• HTML: Required, Type, Pattern• JS: checkValidity()• CSS: :invalid, :valid, :required

<form><input type="email" placeholder="Enter your email"

required title="Please enter a valid email address" />

via A List Apart (bit.ly/html5validation)

iOS 7 deprecated datetime support & handles week poorly

progressive enhancement

<script> if (!("autofocus" in document.createElement("input"))) { document.getElementById("q").focus(); } </script> <input type="submit" value="Go"></form>

“Consuming raw or undercooked meat, poultry, seafood, shellfish or eggs may

increase risk of foodborne illness.”

COOKEDRAW

html5 forms

Available heat:- Kendo UI (validation + UI)- jQuery HTML5 Form- H5F

Why use it?• Mobile input• Improved form

behavior in modern browsers

• Semantic forms• New styling options

geolocation

navigator.geolocation.getCurrentPosition(callback);

function callback(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var acc = position.coords.accuracy;}

support: IE9, Safari, FF3.5, Chrome, Opera

opt-in user feature to share physical position

COOKEDRAW

geolocation

Why use it?• Enrich apps with

location awareness• Track user position

local storagesessionStorage = per windowlocalStorage = per browser

sessionStorage.getItem(‘value’);

sessionStorage.clear();localStorage.clear();</script>

5 MB limit

http://htmlui.com:80

protocol

host port

(+ browser mode)

COOKEDRAW

local storage

Available heat:- localstorage polyfill- amplifyJS- lawchairJS

Why use it?• Better than cookies• Simple API

drag & drop APIeasy drag & drop for any HTML element

<div id=“myDiv” draggable=“true”>...</div>

//Handle the DnD events, such as Dropfunction onDrop(e){ //e.target is the current target element

if(e.stopPropigation) e.stopPropigation(); //Prevent redirect

//Do something with payload

return false;}

support: IE9, FF, Safari, Chrome, Opera

draggable

dragstart

dragenter

dragleave

dragover

dragend

Change appearance,Set payload

Change drop targetappearance

Process DnDpayload

dragstart

e.dataTransfer.setData([MIME type], [payload])

e.dataTransfer.getData([MIME type])

e.dataTransfer.files; //FileList object

COOKEDRAW

drag & drop

Available heat:- Kendo UI (DnD & Upload)- jQuery UI Draggable

Why use it?• Support DnD files in

the browser• Reduce JS footprint

stuff you can do todaystuff you can do tomorrow

offlinetag: <html manifest="html5demo.manifest">MIME type: text/cache-manifest

CACHE MANIFEST# Files you want cached for your app to work offline

myLogo.jpg

//Interacting with cachewindow.applicationCache.update();alert(window.applicationCache.status);

support: FF3.5, Safari, Chrome, Opera 10.6

COOKEDRAW

offline

Why use it?• Aggressive resource

caching• Foundation for offline

web sqlapi: openDatabase

db = openDatabase("html5demos", "1.0", "HTML 5 Database API example", 200000);if (db) { db.transaction(function(tx) { tx.executeSql("CREATE TABLE IF NOT EXISTS tweets (id REAL UNIQUE, text TEXT, created_at TEXT, screen_name TEXT, mention BOOLEAN)", [], callback); });}

db.transaction(function (tx) { tx.executeSql('SELECT * FROM tweets WHERE mention = ? AND id > ? ORDER BY id DESC', [mention, latest], callbackFunc);});

support: Safari, Chrome, Opera

“This specification has reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.”

–W3C

indexedDB

JavaScript API for indexed local storage

var request = window.indexedDB.open("CandyDB", "My candy store database");

request.onsuccess = function(event) { var db = event.result; if (db.version != "1") { // User's first visit, initialize database. ... }}

support: IE9*, FF4, (Chrome)

COOKEDRAW

indexedDB

Available heat:- IDBWrapper- PouchDB- lawnchairJS

Why use it?• Browser storage of

larger datasets• Offline data• Better than local

storage for complex data operations

web socketsapi: WebSocket

ws = new WebSocket("ws://localhost:8282/test”);

ws.onopen = WSonOpen;ws.onmessage = WSonMessage;ws.onclose = WSonClose;ws.onerror = WSonError;

function WSonMessage(event) { $(“#myDiv”).html(event.data);};

support: IE9**, Safari 5, Chrome, FF4*, Opera 11*

Socket.IO

SignalR

SockJS

COOKEDRAW

web sockets

Available heat:- SignalR- Socket.IO- Sockjs

Why use it?• 2-way real-time

messaging• Replace long-polling &

interval “hacks”• Eliminate

dependencies on plug-ins

file api

access to local file system & data streaming

var file = e.dataTransfer.files[0], reader = new FileReader(); reader.onload = function (event) { var dataUrl = event.target.result;};

reader.readAsDataURL(file); .readAsBinaryString(file); .readAsText(file); .readAsArrayBuffer(file);

support: IE10, FF4, Chrome, Opera 11.1

COOKEDRAW

file api

Why use it?• Process files with fewer

server trips• Improve usability• Desktop-like

experiences• Better file upload

history api

direct access to browser history

var stateObj = { foo: "bar" };history.pushState(stateObj, "page 2", "bar.html");

support: FF4, Safari 5, Chrome, Opera 11.5

</html>

LUNCH <BR />1-Hour Pit Stop. Resume @ 1:00 PM.

Afternoon Agenda

Time Topic

1:00 PM Tips for Better JavaScript

2:45 PM Intro to CSS3 & Fundamentals

4:00 PM Final Workshop Q&A

4:30 PM Fin

HTMLApp

Patterns

You are not a web developer.

You are a web standards developer.

<HTML>CSS:3;

ECMAScript();

In browserOut-of-browser{

}Always connectedSometimes connected{

Site experienceApp experience{

PackagedServed{

1. Website2. Single Page App (SPA)

3. Mix

Website

Concepts: Pages, Server-side Views, Links, Thin Client

Website:Always connected

In-browserServed

Site experience

Single Page Application (SPA)

Concepts: Web Services, Client-side, Application

SPAs provide a more fluid user

experience, similar to a "desktop"

application.

SPA:App Experience

Native Shell +SDK Proxy

NativeApp

HTML/JS/CSS App

Hybrid Approaches

SlicesofSPA

Hybrid Approaches

SPAShellSPA

Website

Just because you're using web

standards, doesn't mean you're

building websites.

JAVASCRIPT!

<TODO: HAPPY PLACE IMAGE>

JAVASCRIPT.

Why JavaScript?

It’s the first?

It’s the best?

It’s the easiest?

It’s the fastest?

It’s everywhere.

JavaScript.

I am your father.

No, really.Brendan Eich.Netscape.

“JS had to 'look like Java' only less so, be

Java’s dumb kid brother or boy-

hostage sidekick. Plus, I had to be done

in ten days or something worse than

JS would have happened”

Sept 1995Netscape

Aug 1996Microsoft

June 1997ECMAScript

Mar 1999XHR

Feb 2005Ajax

Aug 2001IE6

FirefoxSafari

ChromeMobile

JavaScript won by default.

If you're the last man left on earth, it doesn't matter how

ugly you are when the women come to re-populate the

planet.

Scott Koon

Can’t Beat ‘em,Join ‘em.

Modern JavaScriptFaster. Easier. Better.

Attwood’s Law:Any application that can be

written in JavaScript, will eventually be written in

JavaScript

MOST COMMON PROBLEMS

1.Slow Execution2.Memory leaks3.Poor Code

Organization4.Lack of Understanding

5(ISH) TIPS

From real masters:JordanIvan

TsvetomirAtanasBurkeJohn

Brandon

TIP #1jQuery is a friend…

…that will stab you in the back.

Prove It

CACHE OBJECTS

$("#myDiv").css("color","red");$("#myDiv").css("opacity",1);

$("#myDiv").css("color","red")

.css("opacity",1);

BETTER

var $myDiv = $("#myDiv");$myDiv.css("color","red");$myDiv.css("opacity",1);

Prove It

NATIVE LOOPS

$.each(arr, function (i) {i / 2;});BAD

arr.forEach(function (i) {i / 2;});BETTER

var i = 0, len = arr.length;for (i = 0; i < len; i += 1) {

i / 2;}

Prove It

TIP #2Avoid Global Variables

They're slow & rude.

function add(num1, num2){ return num1 + num2;}

var result = add(5, 10);16:32

Prove It

var name = "Todd";function sayHello(){

alert(name);}

function sayHello(){ var name = "Todd";

alert(name);}

BETTER

Closures & Module Pattern

function doInitStuff(){ ...}

function loadSomething(){ ...}

function handleButtonClick(){ ...}

function harlemShake(){ ...}

yourFile.js

function doInitStuff(){ var user = "Todd";}

function loadSomething(){ if (user == "Todd") ...}

yourFile.js

var user = "";function doInitStuff(){

user = "Todd";}

function loadSomething(){ if (user == "Todd") ...}

yourFile.js

var [window].user = "";function [window].doInitStuff(){

user = "Todd";}

function [window].loadSomething(){ if (user == "Todd") ...}

function [window].handleButtonClick(){ ...}

function [window].harlemShake(){ ...}

yourFile.js

var app = (function(){ var _name = "Todd";

return{ sayHello: function(){

alert(_name); }

}}());

app.sayHello();

BEST(ISH)

var app = (function(){ var _name = "Todd";

return{ sayHello: function(){ alert(_name); }, sayGoodbye: function(){ alert(_name); } }}());

BEST(ISH)

Your“Public” API

2.1 SUPER PATTERN

(function(window,$,c){ var _private = "Todd"; function privateClass(){} function myWidget(){} myWidget.doSomething = function(){};

window.myWidget = myWidget;}(window,jQuery,console));

Immediately Invoked Function Expressions (IIFE) + Global Imports + [Prototype]

Prove It

TIP #3Bind to Events & Pub/Sub

Just listen.

<button id="btn" onclick="sayHello();">Click Me</button>

$(function(){$(“#btn").on("click",sayHello);

BETTER

$(document).on("click","button",

sayHello);

Why?Compare

ACompare

function doSomthing{...doSomethingElse();

doOneMoreThing();}

function doSomething() { ... $(document).trigger("DO_SOMETHING_DONE");}

$(document).on("DO_SOMETHING_DONE", function(){ doSomethingElse(); });

BETTER

Example

function doSomething(successCallback, failCb){ //Do something async...

if(error){ failCb(); } else { successCallback(); }}

function doSomethingElse(){ doSomething(function(){...}, function()...);}16:32

ANOTHER PROBLEM

function doSomething(){ var dfd = new $.Deferred();

//Do something async, then... //dfd.resolve(); //OR //dfd.reject();

return dfd.promise(); //Returns immediately!

function doSomethingElse(){ doSomething().done(//Success!).fail(//Error);}16:32

ANOTHER SOLUTION

TIP #4Don't fondle the DOM.

Go with the flow.

My Awesome Page

Copyright Fo'eva

Lorem ipsumy samplish jibber jabbish text only meant to serve as a placeholder, and much like Pi, should never repeat or be read much beyond the first few characters.

function doSomething{...var $list = $("body").append("<ul>");for(var i = 0; i < 10; i++){

$list.append("<li>"+ i +"</li>") }}

function doSomething{...var $domChunk = $("<ul>");for(var i = 0; i < 10; i += 1){

$domChunk.append("<li>"+ i +"</li>"); }

$("body").append($domChunk);}

BETTER

4.1 DOM SPEED WITH

STRINGS & INNERHTML

function doSomething{...var domString = "<ul>";for(var i = 0; i < 10; i += 1){

domString += "<li>"+ i +"</li>"; }

domString += "</ul>"$("body")[0].innerHTML = domString;

} Prove It

<ul> #for(var i = 0; i < data.length; i

+= 1){# <li>#= data[i] #</li>

#}#</ul>

</script>

function doSomething(){var myData = [1,..,10];var template = kendo.template($

("#tmp").html());$("body").append(template(myData));

Prove It

TIP #5Learn a module pattern.

(Or some kind of app structure)

PERFORMANCE CONVENIENCE

Manual (index.html)

Module Loader (main.js)

require(["A","B"], function(){//Dependencies are

loaded});

1.Do a sanity check2.Don’t over optimize

USE JSLINTGuaranteed to Hurt Your Feelings™

MINIFY YOUR JSWords are for humans.

MASTER BROWSER DEV TOOLS

Debug JavaScript where it runs.

Debugging

console.log()

Fix IE<script type="text/javascript">

if (!this.console) { window.console = {

log: function() {} };}

</script>

Resources for Study

• Books– JavaScript: The Good Parts (Crockford)– JavaScript: The Definitive Guide

(Flanagan)– JavaScript Patterns (Stefanov)– High Performance JavaScript (Zakas)

console.clear();

JAVASCRIPT, mon.

[before CSS]

<html> <head>…</head> <body> <table> <tr><td> <font size=“3” color=“red”> <h1>Hello World!</h1> </font> </td></tr> <font color=“green”> <font face=“Tahoma”> <h2>I’m green! I think.</h2> </font> <p>Lorem ipsum</p> </font> </table> </body></html>

{HTML}

Separation of Concerns*

<html> <head>…</head> <body> <header>…</header> <article> <h1>Hello!</h1> <p>Lorem ipsum</p> </article> <nav>…</nav> <footer>…</footer> </body></html>

structure

body { color:#FFF; }

header { margin:5px; }

article { margin:5px 0; padding: 10px; background: #333;}

{HTML} {CSS}

CSS has been plagued with

inconsistencies & browser bugs

What's CSS3?

CSS 2.0++++Module Status

Animations WD

2D/3D Transformations WD

Selectors (Level 3) REC

Media Queries (Level 3) REC

Backgrounds & Borders (rounded corners)

Text Decoration (text shadows, outline)

CSS 2.1 RECWD LC CR PR REC

WD LC CR PR RE

CSS 2.1CSS3 ColorSelectorsMedia Queries

Backgrounds &BordersMulti-columnFlex BoxMarquee

25+ DraftsTransitionsTransformationsAnimationsGradientsCSS3 Text

Browser Prefixes

-webkit-moz-o-ms

"standard" way browsers

implement custom features.

Prefixes are going away (eventually)

html5 bootcamp: essential html, css, & javascript

Technology

html5 and css3 formatting with css page 1 and css3...

build an html5 game a developer’s guide with css and...

html5 features on tizen...html5 forms, selectors api, media...

html5 & css - wayne state...

noveo web intership html5, css, interface

pro html5 with css, javascript, and multimedia -...

good css and html5

html5, css, javascript style guide and coding conventions

html5 & css 3

psd to html5 service by css chopper

html5 & css - wayne state...

building web applications with html5, css3, and...

html and css 6 th edition getting started with html5

manual certification microsoft html5 css javascript

mta html5 application › ... › 09 ›...

html5 and mobilejason/talks/alamw2012-mobile-html5.pdfterms:...

learning : php, mysql, javascript, css & html5 by robin...

html5 and css seventh edition

introduction to html5+css

making it work for everyone: html5 and css level 3 for