html5 bootcamp: essential html, css, & javascript

243
HTML5 Bootcamp ssential HTML, JavaScript & CSS Todd Anglin EVP Product Strategy, Telerik

Upload: todd-anglin

Post on 28-Jan-2015

158 views

Category:

Technology


7 download

DESCRIPTION

HTML5 and CSS3 have arrived and they are redefining rich, standards-based web development. Features previously the exclusive domain of browser plug-ins can now be added to web applications as easily as images. Understanding the new power that these standards define, as well as the rapidly increasing power and speed of JavaScript in modern browsers and devices is essential. These slides accompany a full-day workshop, where attendees are guided through the new features in HTML5 and CSS3, with special attention to how these technologies can be used today in new and old browsers.

TRANSCRIPT

Page 1: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

HTML5 BootcampEssential HTML, JavaScript & CSS

Todd AnglinEVP Product Strategy, Telerik

Page 2: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Workshop Downloads:

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

http://bit.ly/workshoplabs

(Case sensitive)

Page 3: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

10 %

Read

20% Hear

30% See

50% Hear + See

70% Say + Write

90% Experience

You generally remember...

Page 4: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

@toddanglin

[email protected]

5’ 9”41 (Birkenstock)

Page 5: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

Page 6: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 7: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

Page 8: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 9: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 10: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 11: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

HTML5 SitesHTML5 AppsHTML5 Enriched

Page 12: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

16:32

Page 13: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

the "plan"the

optionsHTML5

the browsers

use it today

A&Q

Page 14: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

Page 15: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

16:32

Page 16: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

16:32

Page 17: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Why is HTML5 #winning the web?

16:32

Page 18: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

It's Important.

Page 19: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

82%

Page 20: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

It's Unifying.

Page 21: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 22: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

It's Everywhere.

Page 23: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 24: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 25: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

“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

Page 26: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

HTML4 = Rough Guide

Unpredictable Browser Support

Page 27: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

How is the web evolving?

Page 28: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

<HTML>CSS:3;

ECMAScript();{ }“HTML5”

Page 29: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

“Living Standard”

WebSockets FileAPI WebGL

HTML5 FormsGeolocation

Offline

Canvas Video

Audio

Canvas

Video

Geolocation

Semantic Tags

SVGWHATWG | W3C | IETF

16:32

Page 30: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Which browsers matter?

Page 31: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Know your users.Know your browsers.

Page 32: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

99%

Page 33: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 34: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 35: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 36: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 37: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 38: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

Page 39: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Sta

ble Canvas | Local Storage |

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

In P

rog

ress WebGL | WebSockets | File API | Drag-Drop

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

16:32

Page 40: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

16:32

Page 41: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

Page 42: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

html5labs.interoperabilitybridges.com

ie.microsoft.com/testdrive

+Platform Previews

Page 43: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 44: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Inte

rnet

Exp

lore

r 6 »

Inte

rnet

Exp

lore

r 7 »

Inte

rnet

Exp

lore

r 8 »

Inte

rnet

Exp

lore

r 9 »

Win

Phon

e 7.

Andro

id 4

.0 »

Andro

id 4

.3 »

Safa

ri 5.

1 »

Win

Phon

e 8

»

Opera

11.

60 »

Fire

fox

8 »

Chrom

e 17

»

Safa

ri 6.

0 »

iOS

6.0

»

Opera

12

»

Chrom

e Mob

ile »

Safa

ri 7.

0 »

iOS

7.0

»

Fire

fox

24 »

Chrom

e 22

»

Fire

fox

28 »

Chrom

e 32

»

Chrom

e 33

»0

100

200

300

400

500

600

25 26 41

138138

286287303320329337374378386389390397415430434448498505

relative HTML5 scores

IE10

IE11

Page 45: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

In the future, browsers compete

on speed, not on features

Page 46: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

DEMO

Page 47: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

What is usable today?

Page 48: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

X X X X X

X X X

X X

X X X

X X

Adoption Strategies

Lowest Common DominatorOnly use features natively available in all target browsers

16:32

Page 49: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

X X X X X

X X X

X X

X X X

X X

Adoption Strategies

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

X X

16:32

Page 50: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

16:32

Page 51: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

X X X X X

X X X

X X

X X X

X X

Adoption Strategies

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

X X

X X X

X X

16:32

Page 52: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

progressiveenhancementgracefuldegradation

Page 53: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

[Source: Aaron Olaf, Flickr]

16:32

Page 54: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

16:32

Page 55: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

X X X X X

X X X

X X

X X X

X X

Adoption Strategies

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

X X

X X X

X X

16:32

Page 56: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

16:32

Page 57: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

Page 58: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

modernizr

Page 59: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Modernizr.[featureName]

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

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

.no-canvas { //Styles }

.canvas { //Other Styles}

Page 60: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

DEMOModernizr

Page 61: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

<meta http-equiv="X-UA-Compatible"

content="chrome=1">

Page 62: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Inte

rnet

Exp

lore

r 6 »

Inte

rnet

Exp

lore

r 7 »

Inte

rnet

Exp

lore

r 8 »

Inte

rnet

Exp

lore

r 9 »

Safa

ri 5.

1 »

Inte

rnet

Exp

lore

r 10

»

Opera

11.

60 »

Fire

fox

8 »

Chrom

e 17

»

Safa

ri 6.

0 »

Opera

12

»

Chrom

e 22

»0

50100150200250300350400450500

25 26 41138

303 320 329 337 374 378 389 434

relative HTML5 scores

Page 63: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

<HTML5>

Page 64: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

The Basics

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

16:32

Page 65: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

compatible

Page 66: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

stuff you can do todaystuff you can do tomorrow

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

Page 67: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

Page 68: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

semantic tagsaudio & videoHTML5 Formsgeolocationweb storagedrag & dropcanvas

offlineweb sql

indexedDBweb sockets

history apifile api

Page 69: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

WebGLweb workersXHR2querySelectorclassListCORScryptoperformancevisibility apionline/offlinecustom protocol

typed arraysWeb Audio APIinline SVGFS APICanvas animationnotificationsorientationmicrodataflexboxmore...

For homework.

Page 70: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

Add IntelliSense & Schema Validation

to Visual Studio 2008/2010 (pre SP1)

16:32

Page 71: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

16:32

HTML5 Forms

Geolocation

Video

CSS3

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

Page 72: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

16:32

Page 73: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

semantic tags

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

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

<body> <div id=“header”> </div> <div id=“content”> <div id=“nav”></div> </div> <div id=“footer”> </div></body>

<body> <header> </header> <section> <nav></nav> </section> <footer></footer></body>

VS.

Page 74: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

fixing IE<head> <meta charset="utf-8" /> <title>My Weblog</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

</head>

*Polyfill required to trigger styling in old IE

16:32

Page 75: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

16:32

Page 76: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

semantic datadata-*

Valid approach to storing data in HTML

<!--Store values in data-* attributes--><div id="mydiv" data-key="26" data-name="My product name">...</div>

<!--Access values with JavaScript-->var key = mydiv.getAttribute("data-key") //ORvar key = mydiv.dataset.key

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

Page 77: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Why use it?• Embed data in page

16:32

Page 78: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

video & audioSemantic rich media

Reach more people on more devices

Container

Codec

Silverlight

FlashHTML5

MP4H.264

Page 79: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

video for all browsers*

<video src="clip.mp4" controls type="video/mp4"><object classid="..."> <param name="flashvars" value="file=clip.mp4" /> <param name="movie" value=“player.swf" /> <embed src="player.swf” type="application/x-shockwave-flash” flashvars="file=clip.mp4" />

Your browser does not support video

</object></video>

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

Page 80: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Why use it?• Video for plug-less

mobile devices• Eliminate

dependencies on Flash/Silverlight (future proofing)

16:32

Page 81: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

canvastag: <canvas />

<canvas id=“b" width="300" height="225"></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

Page 82: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

fixing IE<head> <!--[if IE]> <script src="excanvas.js"></script> <![endif]--></head>

Explorercanvas

16:32

Page 83: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Scalable Vector

GraphicsCanvas

Bitmap-output

Good for animation

JavaScript-based

Vector-output

Good for interaction

XML-based

16:32

Page 84: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Why use it?

• Dashboards• Charts/Gauges• Resolution

independence

16:32

• Games• Super custom

rendering

SVG Canvas

Page 85: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

Page 86: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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" />

<input type="submit" value="Go" /></form>

Page 87: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

via A List Apart (bit.ly/html5validation)

16:32

Page 88: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 89: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

16:32

iOS 7 deprecated datetime support & handles week poorly

Page 90: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

progressive enhancement

<form name="f"> <input id="q" autofocus>

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

Page 91: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

16:32

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

increase risk of foodborne illness.”

Page 92: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

16:32

Page 93: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

COOKEDRAW

html5 forms

16:32

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

Page 94: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Why use it?• Mobile input• Improved form

behavior in modern browsers

• Semantic forms• New styling options

16:32

Page 95: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

Page 96: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

COOKEDRAW

geolocation

16:32

Page 97: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Why use it?• Enrich apps with

location awareness• Track user position

16:32

Page 98: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

local storagesessionStorage = per windowlocalStorage = per browser

<script>sessionStorage.setItem('value', this.value);localStorage.setItem('value', this.value);

sessionStorage.getItem(‘value’);

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

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

5 MB limit

Page 99: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

http://htmlui.com:80

protocol

host port

(+ browser mode)

Page 100: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

COOKEDRAW

local storage

16:32

Available heat:- localstorage polyfill- amplifyJS- lawchairJS

Page 101: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Why use it?• Better than cookies• Simple API

16:32

Page 102: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

drag & drop APIeasy drag & drop for any HTML element

<!-- Make an HTML element draggable --><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

Page 103: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

IMG

File

HTML

draggable

dragstart

drag

dragenter

dragleave

dragover

drop

dragend

Change appearance,Set payload

Change drop targetappearance

Process DnDpayload

Page 104: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

dragstart

drop

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

e.dataTransfer.getData([MIME type])

e.dataTransfer.files; //FileList object

Page 105: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

COOKEDRAW

drag & drop

16:32

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

Page 106: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Why use it?• Support DnD files in

the browser• Reduce JS footprint

16:32

Page 107: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

stuff you can do todaystuff you can do tomorrow

Page 108: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 109: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

Page 110: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

COOKEDRAW

offline

16:32

Page 111: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Why use it?• Aggressive resource

caching• Foundation for offline

16:32

Page 112: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

Page 113: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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)

Page 114: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

COOKEDRAW

indexedDB

16:32

Available heat:- IDBWrapper- PouchDB- lawnchairJS

Page 115: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Why use it?• Browser storage of

larger datasets• Offline data• Better than local

storage for complex data operations

16:32

Page 116: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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*

Page 117: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Socket.IO

SignalR

SockJS

Page 118: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

COOKEDRAW

web sockets

16:32

Available heat:- SignalR- Socket.IO- Sockjs

Page 119: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Why use it?• 2-way real-time

messaging• Replace long-polling &

interval “hacks”• Eliminate

dependencies on plug-ins

16:32

Page 120: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

Page 121: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

COOKEDRAW

file api

16:32

Page 122: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Why use it?• Process files with fewer

server trips• Improve usability• Desktop-like

experiences• Better file upload

16:32

Page 123: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

Page 124: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

</html>

Page 125: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

Page 126: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

Page 127: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 128: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 129: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

HTMLApp

Patterns

Page 130: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

You are not a web developer.

Page 131: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 132: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

You are a web standards developer.

Page 133: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

<HTML>CSS:3;

ECMAScript();

Page 134: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 135: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

DEMO

Page 136: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

In browserOut-of-browser{

}Always connectedSometimes connected{

}

Site experienceApp experience{

}

PackagedServed{

}

Page 137: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

16:32

1. Website2. Single Page App (SPA)

3. Mix

Page 138: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Website

HTML

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

Page 139: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Website:Always connected

In-browserServed

Site experience

16:32

Page 140: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Single Page Application (SPA)

16:32

JS

Data

Page 141: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Single Page Application (SPA)

JS

Data

16:32

Concepts: Web Services, Client-side, Application

Page 142: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

SPAs provide a more fluid user

experience, similar to a "desktop"

application.

16:32

Page 143: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

SPA:App Experience

16:32

Page 144: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 145: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Native Shell +SDK Proxy

NativeApp

HTML/JS/CSS App

Page 146: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Hybrid Approaches

16:32

JS

Data

JS

Data

SlicesofSPA

Page 147: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Hybrid Approaches

16:32

JS

SPAShellSPA

Website

Page 148: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Just because you're using web

standards, doesn't mean you're

building websites.

16:32

Page 149: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 150: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

16:32

Page 151: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

JAVASCRIPT!

Page 152: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

<TODO: HAPPY PLACE IMAGE>

JAVASCRIPT.

Page 153: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Why JavaScript?

WHY?!

Page 154: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

It’s the first?

Page 155: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

It’s the best?

Page 156: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

It’s the easiest?

Page 157: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

It’s the fastest?

Page 158: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

It’s everywhere.

Page 159: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

JavaScript.

I am your father.

No, really.Brendan Eich.Netscape.

Page 160: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

“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”

Page 161: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

::::

Page 162: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Sept 1995Netscape

Aug 1996Microsoft

June 1997ECMAScript

//

Mar 1999XHR

Feb 2005Ajax

Aug 2001IE6

FirefoxSafari

ChromeMobile

Page 163: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

Page 164: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Can’t Beat ‘em,Join ‘em.

Page 165: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Modern JavaScriptFaster. Easier. Better.

Page 166: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 167: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 168: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Attwood’s Law:Any application that can be

written in JavaScript, will eventually be written in

JavaScript

2007

Page 169: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

MOST COMMON PROBLEMS

Page 170: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

1.Slow Execution2.Memory leaks3.Poor Code

Organization4.Lack of Understanding

Page 171: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

5(ISH) TIPS

Page 172: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

From real masters:JordanIvan

TsvetomirAtanasBurkeJohn

Brandon

Page 173: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

TIP #1jQuery is a friend…

…that will stab you in the back.

Prove It

Page 174: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

SUB-T

IP

1.1

CACHE OBJECTS

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

BAD

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

.css("opacity",1);

BETTER

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

BEST*

Prove It

Page 175: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

SUB-T

IP

1.2

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

BEST*

Prove It

Page 176: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

TIP #2Avoid Global Variables

They're slow & rude.

Page 177: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

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

Prove It

Page 178: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

alert(name);}

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

alert(name);}

16:32

BAD

BETTER

Page 179: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Closures & Module Pattern

Page 180: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

function doInitStuff(){ ...}

function loadSomething(){ ...}

function handleButtonClick(){ ...}

function harlemShake(){ ...}

yourFile.js

Page 181: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

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

function handleButtonClick(){ ...}

function harlemShake(){ ...}

yourFile.js

Page 182: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

var user = "";function doInitStuff(){

user = "Todd";}

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

function handleButtonClick(){ ...}

function harlemShake(){ ...}

yourFile.js

Page 183: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

user = "Todd";}

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

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

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

yourFile.js

Page 184: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

return{ sayHello: function(){

alert(_name); }

}}());

app.sayHello();

16:32

BEST(ISH)

Page 185: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

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

16:32

BEST(ISH)

Your“Public” API

Page 186: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

SUB-T

IP

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

Page 187: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

TIP #3Bind to Events & Pub/Sub

Just listen.

Page 188: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

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

});

16:32

BAD

BETTER

Page 189: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

sayHello);

16:32

BEST

Why?Compare

ACompare

B

Page 190: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

function doSomthing{...doSomethingElse();

doOneMoreThing();}

16:32

BAD

Page 191: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

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

16:32

BETTER

Example

Page 192: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

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

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

ANOTHER PROBLEM

Page 193: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

Page 194: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

TIP #4Don't fondle the DOM.

Go with the flow.

Page 195: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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.

Page 196: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

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

16:32

BAD

Page 197: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

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

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

16:32

BETTER

Page 198: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

SUB-T

IP

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

Page 199: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

<script type="text/x-kendo-template" id="tmp">

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

}

16:32

BEST

Prove It

Page 200: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

TIP #5Learn a module pattern.

(Or some kind of app structure)

Page 201: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

PERFORMANCE CONVENIENCE

Page 202: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

A.js

B.js

Manual (index.html)

<script src="B.js"></script><script src="A.js"></script><script src="main.js"></script>

Module Loader (main.js)

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

loaded});

Page 203: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

Page 204: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

USE JSLINTGuaranteed to Hurt Your Feelings™

16:32

BONUS

TIPS

MINIFY YOUR JSWords are for humans.

MASTER BROWSER DEV TOOLS

Debug JavaScript where it runs.

Page 205: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Debugging

Page 206: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

console.log()

Page 207: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

<!--Console global variable fix for IE-->

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

log: function() {} };}

</script>

16:32

Page 208: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Resources for Study

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

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

16:32

Page 209: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

console.clear();

Page 210: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

JAVASCRIPT, mon.

Page 211: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

16:32

Page 212: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

16:32

Page 213: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

[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}

Page 214: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

style

{HTML} {CSS}

Page 215: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

16:32

Page 216: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

CSS has been plagued with

inconsistencies & browser bugs

Page 217: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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)

CR

Text Decoration (text shadows, outline)

CR

CSS 2.1 RECWD LC CR PR REC

16:32

Page 218: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

WD LC CR PR RE

C

CSS 2.1CSS3 ColorSelectorsMedia Queries

Backgrounds &BordersMulti-columnFlex BoxMarquee

25+ DraftsTransitionsTransformationsAnimationsGradientsCSS3 Text

16:32

Page 219: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Browser Prefixes

-webkit-moz-o-ms

"standard" way browsers

implement custom features.

16:32

Page 220: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Prefixes are going away (eventually)

16:32

RECENT NEWS

Browser "flags" will handle emerging feature

Page 221: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

-moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px;border-radius: 5px;

-moz-box-shadow: 2px 2px 2px #333;-webkit-box-shadow: 2px 2px 2px #333;box-shadow: 2px 2px 2px #333;

-webkit-background-size: 137px 50px;-o-background-size: 137px 50px;background-size: 137px 50px;

16:32

Page 222: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

SelectorsColorCustom FontsBorders & BackgroundsGradientsMedia QueriesAnimationsTransitionsLayouts (Grid, Flex, etc)

Page 223: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

1. Selectors2. Custom Fonts3. Whiz Bang Styley

Whimey4. Layouts

Page 224: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

*E[foo]E[foo="bar"]E[foo~="bar"]E[foo|="en"]E:first-childE:lang(fr)E:hoverE:focusE:disabledE::beforeE::afterE > FE + F

EE:linkE:activeE:visitedE::first-lineE::first-letterE.warningE#myidE F

E[foo^="bar"]E[foo$="bar"]E[foo*="bar"]E:rootE:nth-child(n)E:nth-last-child(n)E:nth-of-type(n)E:nth-last-of-type(n)E:last-childE:first-of-typeE:last-of-typeE:only-childE:only-of-typeE:emptyE:targetE:enabledE:checkedE:not(s)E ~ F

Page 225: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

CSS3 Selectors• Powerful new selector options//Alternating Itemsli:nth-child(odd) { color: blue; }li:nth-child(even) { color: green; }li:nth-child(3n) { color: red; } //Every 3rd item

//First/Last Itemsli:first-of-type { color: blue; }li:not(:first-of-type):not(:last-of-type) { color: orange; } //All *but* first/last

//Enabled/Disabledinput:enabled { border: 2px solid green; }input:disabled { background-color: #BBB; }

*Use jQuery to support legacy browsers

Page 226: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Biggest problem with custom fonts?

16:32

Licensing.(And then file format.)

(And then performance.)(And then Comic Sans.)

Page 227: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Custom Fonts

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf') format(“opentype”);

}

//Usageh3 { font-family: Delicious, sans-serif; }

Page 228: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

WebFont Providers+

WOFF

16:32

Page 229: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Borders, Backgrounds,

Gradients, Shadows, Text Shadows,

Colors

16:32

Page 230: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

-moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px;border-radius: 5px;

-moz-box-shadow: 2px 2px 2px #333;-webkit-box-shadow: 2px 2px 2px #333;box-shadow: 2px 2px 2px #333;

-webkit-background-size: 137px 50px;-o-background-size: 137px 50px;background-size: 137px 50px;

16:32

Page 231: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Two cautions:

1. Older browsers2. Mobile

Performance

16:32

Page 232: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Media QueriesConditional CSS

rules/sheets based on screen properties

16:32

Page 233: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 234: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

/*These two rules do the same thing*/@media all and (min-width:500px) { … } @media (min-width:500px) { … }

/*Multiple conditions*/@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; }}

Page 235: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

• width/height• device-width/height• aspect-ratio• orientation• color/color-index• resolution

+

media type & logical operators

Page 236: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

LayoutsFlex & Grid

16:32

Page 237: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Page 238: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

The end of complicated float layouts.(Eventually.)

Page 239: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

display: none;

Page 240: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

16:32

Page 241: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Final Q&A

Page 242: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Thank You!

Page 243: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Your Feedback is Important

Please fill out a session evaluation using the EventBoard app.

Thank you!