Edge of the Web

So good, it hurts.
Workshop Demo Download:
bit.ly/TaskListDemo

10 %
Read
20%
Hear
30% See
50% Hear + See
70% Say + Write
90% Experience

Hello, my name is…
@toddanglin
VP, Technology & Developer Relations
Telerik (a Progress Company)

AM
oBrowsers & Debugging
oNew web APIs
o Markup
o Media
o Storage
o Offline
PM
oModern JavaScript (ES6)
oModern CSS
o Styling
o Layouts
o Mobile & Media Queries

1. Expand awareness of modern web
technologies
2. Introduce techniques for using modern web
3. Enhance knowledge of existing web
technologies
4. Provide practical “next steps” on modern
web journey

Source: Wikipedia, https://en.wikipedia.org/wiki/HTML5

<HTML>
CSS:3;
ECMAScript();
“HTML5”

“Living Standard”
WebSockets FileAPI
WebGL
HTML5 Forms
Geolocation
Offline
Canvas Video
Audio
Canvas
Video
Geolocation
Semantic
Tags
SVG
WHATWG | W3C | IETF

Where the word “standard” reeks with irony

Browser
Layout/Rendering Engine
JavaScript Engine
Browser Layout Engine JavaScript Engine
Mozilla Gecko Spidermonkey
Chrome/Opera
Blink
(fork from WebKit)
V8
Safari WebKit JavaScriptCore
IE/Edge Trident/EdgeHTML Chakra
Node.js V8

of internet browses with
IE, FF, Safari, Chrome, or Opera
99%

StatCounter NetMarketShare
Records data from 3 million websites Analyzes data from 40 thousand websites
Analyzes 17.5 billion page views per month Analyzes 160 million unique visits per month
Make no adjustments or weightings other than
removing bot activity and pre-rendering
Applies country weightings according to CIA
Internet Traffic data. For example, if Brazil
accounts for 4% of global traffic but only 2% of
NetMarketShare data, the results are doubled
Is independent and has no commercial partners
Is a commercial company with partners paying
for data
Reports are based on page views Reports are based on daily unique visitors
Source: http://www.sitepoint.com/browser-trends-april-2015-statcounter-vs-netmarketshare/

“Evergreen” Versioned
WinXP
WinVista
< v9

0
20
40
60
80
100
120
140
160
180
200
IE7 IE8 IE9 IE10 IE11 Edge
(13)
FeatureCount
Supported HTML5/CSS3 Features
As reported by CanIUse.com

Selectors (2.1)
position:fixed
7.0 LocalStorage
DragDrop API
JSON
querySelector
8.0
Video
Audio
WOFF
SVG
Canvas
Geolocation
Semantic Tags
Lots of CSS3
9.0
XHR2
Web Workers
Web Sockets
IndexedDB
History API
File API
CORS
Blob URLs
Typed Arrays
Defer/Async
Form Validation
New Input Types
Offline App Cache
Much more CSS3
10.0

Selectors (2.1)
position:fixed
7.0 LocalStorage
DragDrop API
JSON
querySelector
8.0
Video
Audio
WOFF
SVG
Canvas
Geolocation
Semantic Tags
Lots of CSS3
9.0
XHR2
Web Workers
Web Sockets
IndexedDB
History API
File API
CORS
Blob URLs
Typed Arrays
Defer/Async
Form Validation
New Input Types
Offline App Cache
Much more CSS3
10.0
3D Transforms
Web Crypto
CustomEvent
X-Doc Messaging
DeviceOrientation
FileReader API
HTTP/2
CSP 1.0
SVG effects
Touch events
Video tracks
ES6
getUserMedia
Templates
Picture
Meter
PointerLock API
ASM.js
Gamepad API
Date/time inputs
…
Edge (13)

17 18 33
113 113
222 250 270 300 304 322 329 346
396 396 396 405
449 452 467 470 493 497 501 526
0
100
200
300
400
500
600
IE10
IE11
Edge

X X X X X
X X X
X X
X X X
X X
Only use features
natively available in all
target browsers

X X X X X
X X X
X X
X X X
X X
Only use features
either natively available
OR available via
JavaScript polyfill
X X

X X X X X
X X X
X X
X X X
X X
Only use features
available in target
browsers AND design
alternate experience
for other browsers
X X
X X X
X X
22:31

[Source: Aaron Olaf, Flickr]
22:31

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

X X X X X
X X X
X X
X X X
X X
Create experiences
targeted at specific
browsers (or classes of
browsers)
X X
X X X
X X
22:31

Modernizr.[featureName]
if (Modernizr.canvas) { //Use It! }
.[featureName] || .no-[featureName]
.no-canvas { //Styles }
.canvas { //Other Styles}

It’s more than the DOM and Images

DOM/Markup
JavaScript API
CSS States
WebAPI

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

HTML5 Forms
Geolocation
Video
CSS3
{Web Sockets}
{Storage}
{IndexedDb}
{Semantic Data}

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.

oAccessibility*
oSEO*
oCode readability
oDeveloper street cred
oWhy not?

data-*
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")
//OR
var key = mydiv.dataset.key

Semantic rich media
Reach more people on more devices
Container
Codec
Silverlight
FlashHTML5

<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>
22:31

oVideo for plug-less mobile
devices
oEliminate dependencies
on Flash/Silverlight (future
proofing)
22:31

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

oHTML: Required, Type, Pattern
oJS: checkValidity()
oCSS: :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>

via A List Apart (bit.ly/html5validation)
22:31

22:31
iOS 7 & 8 deprecated datetime support
& handles week poorly

22:31
“Consuming raw or undercooked meat, poultry,
seafood, shellfish or eggs may increase risk of
foodborne illness.”

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

oMobile input
oImproved form behavior in
modern browsers
oSemantic forms
oNew styling options
22:31

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

oEnrich apps with location
awareness
oTrack user position
22:31

sessionStorage = per window
localStorage = per browser
<script>
sessionStorage.setItem('value', this.value);
localStorage.setItem('value', this.value);
sessionStorage.getItem(‘value’);
sessionStorage.clear();
localStorage.clear();
</script>
5 MB limit

protocol
host port
(+ browser mode)

COOKEDRAW
22:31
Available heat:
- localstorage polyfill
- amplifyJS
- lawnchairJS

oBetter than cookies
oSimple API
22:31

easy drag & drop for any HTML element

<div id=“myDiv” draggable=“true”>...</div>
//Handle the DnD events, such as Drop
function 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

IMG
File
HTML
draggable
dragstart
drag
dragenter
dragleave
dragover
drop
dragend
Change appearance,
Set payload
Change drop target
appearance
Process DnD
payload

dragstart
drop
e.dataTransfer.setData([MIME type], [payload])
e.dataTransfer.getData([MIME type])
e.dataTransfer.files; //FileList object

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

oSupport DnD files in the
browser
oReduce JS footprint
22:31

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

oProcess files with fewer
server trips
oImprove usability
oDesktop-like experiences
oBetter file upload
22:31

<img-slider>
<img src="images/sunset.jpg" alt="a dramatic sunset”>
<img src="images/arch.jpg" alt="a rock arch”>
<img src="images/grooves.jpg" alt="some neat grooves”>
<img src="images/rock.jpg" alt="an interesting rock”>
</img-slider>

1. Custom Elements
2. Shadow DOM
3. Templates
4. HTML Imports
<head>
<link rel=“import” href=“/components/my-tag.html”>
...
</head>
<body>
<my-tag ranking=“2” />
</body>

Shadow Root
<img-slider>
</img-slider>
Shadow Host Shadow Boundary
Component CSS
Component JS
Component DOM

COOKEDRAW
22:31
Available heat:
- X-Tags
- Polymer

Polymer
(Google)
IE10+
X-Tag
(Mozilla)
IE9+
*Custom Elements only

<kendo-dropdownlist style="width: 100%;">
<option value="male" selected>Male</option>
<option value="female">Female</option>
<option value="notsay">Rather not say</option>
</kendo-dropdownlist>
<select id="ddl" style="width: 100%;">
<option value="male" selected>Male</option>
<option value="female">Female</option>
<option value="notsay">Rather not say</option>
</select>
<script>
$("#ddl").kendoDropDownList();
</script>

oImproved page composition
oEncapsulate/isolate related DOM/CSS
oHigher cohesion
oCreate reusable building blocks
oEasier to ready

api: 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

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
22:31
Available heat:
- IDBWrapper
- PouchDB
- lawnchairJS

oBrowser storage of larger
datasets
oOffline data
oBetter than local storage
for complex data
operations
22:31

api: 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*

COOKEDRAW
22:31
Available heat:
- SignalR
- Socket.IO
- Sockjs

o2-way real-time messaging
oReplace long-polling &
interval “hacks”
oEliminate dependencies
on plug-ins
22:31

tag: <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 cache
window.applicationCache.update();
alert(window.applicationCache.status);
support: FF3.5, Safari, Chrome, Opera 10.6

oAggressive resource
caching
oFoundation for offline
22:31

Service Workers
Superior to AppCache by providing programmatic control offline
cache. Background thread for web apps with control over network
requests.

No, really.
Brendan Eich.
Netscape.

Sept 1995
Netscape
Aug 1996
Microsoft
June 1997
ECMAScript
//
Mar 1999
XHR
Feb 2005
Ajax
Aug 2001
IE6
Firefox
Safari
Chrome
Mobile

1. Slow Execution
2. Memory leaks
3. Poor Code Organization
4. Lack of Understanding

jQuery is a friend…
…that will stab you in the back.
Prove It

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

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

Avoid Global Variables
They're slow & rude.

function add(num1, num2){
return num1 + num2;
}
var result = add(5, 10);
22:31
Prove It

var name = "Todd";
function sayHello(){
alert(name);
}
function sayHello(){
var name = "Todd";
alert(name);
}
22:31
BAD
BETTER

function doInitStuff(){
...
}
function loadSomething(){
...
}
function handleButtonClick(){
...
}
function harlemShake(){
...
}
yourFile.js

var user = "Todd";
}
if (user == "Todd") ...
}
...
}
...
}
yourFile.js

var user = "";
user = "Todd";
}
}
...
}
...
}
yourFile.js

var [window].user = "";
function [window].doInitStuff(){
user = "Todd";
}
function [window].loadSomething(){
}
function
[window].handleButtonClick(){
...
}
function [window].harlemShake(){
...
yourFile.js

var app = (function(){
var _name = "Todd";
return{
sayHello: function(){
alert(_name);
}
}
}());
app.sayHello();
22:31
BEST(ISH)

var app = (function(){
var _name = "Todd";
return{
sayHello: function(){
alert(_name);
},
sayGoodbye: function(){
alert(_name);
}
}
}());
22:31
BEST(ISH)
Your
“Public” API

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

Bind to Events & Pub/Sub
Just listen.

<button id="btn" onclick="sayHello();">
Click Me
</button>
$(function(){
$(“#btn").on("click",sayHello);
});
22:31
BAD
BETTER

$(document).on("click",
"button", sayHello);
22:31
BEST
Why?
Compare A Compare B

function doSomthing{
...
doSomethingElse();
doOneMoreThing();
}
22:31
BAD

function doSomething() {
...
$(document).trigger("DO_SOMETHING_DONE");
}
$(document).on("DO_SOMETHING_DONE",
function(){
doSomethingElse();
});
22:31
BETTER
Example

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);
}
22:31
ANOTHER SOLUTION

Don'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>")
}
}
22:31
BAD

...
var $domChunk = $("<ul>");
for(var i = 0; i < 10; i += 1){
$domChunk.append("<li>"+ i +"</li>");
}
$("body").append($domChunk);
}
22:31
BETTER

DOM SPEED WITH
STRINGS & INNERHTML
...
var domString = "<ul>";
for(var i = 0; i < 10; i += 1){
domString += "<li>"+ i +"</li>";
}
domString += "</ul>"
$("body")[0].innerHTML = domString;
}
Prove It

Begin adopting ES6.
(Just get ready to compile your
JavaScript)

obreak
ocase
ocatch
ocontinue
odebugger
odefault
odelete
oelse
ofinally
ofor
ofunction
oif
oin
oinstanceof
onew
oreturn
oswitch
othis
othrow
otry
otypeof
ovar
owhile
owith

o break
o case
o class
o catch
o const
o continue
o debugger
o default
o delete
o else
o export
o extends
o finally
o for
o function
o if
o import
o in
o instanceof
o let
o new
o return
o super
o switch
o this
o throw
o try
o typeof
o var
o while
o with
o yield

o arrows
o classes
o enhanced object literals
o template strings
o destructuring
o default + rest + spread
o let + const
o iterators + for..of
o generators
o unicode
o modules
o module loaders
o map + set + weakmap +
weakset
o proxies
o symbols
o subclassable built-ins
o promises
o math + number + string + array
+ object APIs
o binary and octal literals
o reflect api
o tail calls

oShort-hand for function
BEFORE:
myArray.forEach(function(item){
alert(item);
});
NOW:
myArray.forEach(item => {
alert(item);
});
Example:

Guaranteed to Hurt Your Feelings™
22:31
MINIFY YOUR JS
Words are for humans.
MASTER BROWSER
DEV TOOLS
Debug JavaScript where it runs.

Everything you always wanted in 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}

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

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 REC
WD LC CR PR REC

WD LC CR PR REC
CSS 2.1
CSS3 Color
Selectors
Media Queries
Backgrounds &
Borders
Multi-column
Flex Box
Marquee
25+ Drafts
Transitions
Transformations
Animations
Gradients
CSS3 Text

-webkit
-moz
-o
-ms
"standard" way
browsers
implement custom
features.
22:31

RECENT NEWS
Browser "flags" will handle emerging feature

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

*
E[foo]
E[foo="bar"]
E[foo~="bar"]
E[foo|="en"]
E:first-child
E:lang(fr)
E:hover
E:focus
E:disabled
E::before
E::after
E > F
E + F
E
E:link
E:active
E:visited
E::first-line
E::first-letter
E.warning
E#myid
E F
E[foo^="bar"]
E[foo$="bar"]
E[foo*="bar"]
E:root
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:last-child
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty
E:target
E:enabled
E:checked
E:not(s)
E ~ F

oPowerful new selector options
//Alternating Items
li:nth-child(odd) { color: blue; }
li:nth-child(even) { color: green; }
li:nth-child(3n) { color: red; } //Every 3rd item
//First/Last Items
li:first-of-type { color: blue; }
li:not(:first-of-type):not(:last-of-type) { color: orange; } //All *but*
first/last
//Enabled/Disabled
input:enabled { border: 2px solid green; }
input:disabled { background-color: #BBB; }
*Use jQuery to support legacy browsers

22:31
Licensing.
(And then file format.)
(And then performance.)
(And then Comic Sans.)

@font-face {
font-family: Delicious;
src: url('Delicious-Roman.otf') format(“opentype”);
}
//Usage
h3 { font-family: Delicious, sans-serif; }

-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;
22:31

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

• width/height
• device-width/height
• aspect-ratio
• orientation
• color/color-index
• resolution
+
media type & logical operators

Flex Container
display: flex;
Flex
Item
Flex
Item
Flex
Item
Flex container
controls items
width/ height/
order

Flex Container
display: flex;
Flex
Item
Flex
Item
Flex
Item
order: -1;

Flex Container
display: flex;
Flex
Item
Flex Item
flex: 2;
Flex
Item
order:
-1;

Flex Container
display: flex;
flex-direction: column;
Flex Item
Flex Item
flex: 2;
Flex Item
order: -1;

Flex Container
display: flex;
justify-content: flex-start;
Flex
Item
Flex Item
flex: 2;
Flex
Item
order:
-1;

Flex Container
display: flex;
justify-content: flex-end;
Flex
Item
Flex Item
flex: 2;
Flex
Item
order:
-1;

Flex Container
display: flex;
justify-content: center;
Flex
Item
Flex Item
flex: 2;
Flex
Item
order:
-1;

Flex Container
display: flex;
align-items: flex-start;
Flex
Item Flex Item
flex: 2;
Flex
Item
order:
-1;

Flex Container
display: flex;
align-items: flex-end;
Flex
Item
Flex Item
flex: 2;
Flex
Item
order:
-1;

Flex Container
display: flex;
align-items: stretch;
Flex
Item
Flex Item
flex: 2;
Flex
Item
order:
-1;

display: flex;
margin:auto;
Extra

.parent .parent {
display:grid;
grid-columns: auto 100px 1fr 2fr;
grid-rows: 50px 5em auto;
}
100px 1fr 2frauto
50px
5em

.header {
grid-column-span: 3;
grid-row: 1;
}
100px 1fr 2frauto
50px
5em
.header
.side
.side {
grid-column: 4;
grid-row: 2;
grid-row-span: 2;
}

Good Bye. Adios. Auf Wiedersehen.
E: anglin@telerik.com
T: @toddanglin
S: slideshare.net/toddanglin

Edge of the Web

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (13)

Similaire à Edge of the Web

Similaire à Edge of the Web (20)

Plus de Todd Anglin

Plus de Todd Anglin (7)

Dernier

Dernier (20)

Edge of the Web

Notes de l'éditeur