Making Modern Websites

Making Modern Websites
Patrick Kettner

Making Websites .
@PatrickKettner

Making Websites is Hard.
@PatrickKettner

Clipboard API
const
Cross-document messaging
Cross-Origin Resource Sharing
crypto.getRandomValues()
CSS Font Loading
CSS.supports() API
CustomEvent
DeviceOrientation & DeviceMotion events
Document Object Model Range
DOM Parsing and Serialization
ECMAScript 5
Element.getBoundingClientRect()
Element.insertAdjacentHTML()
ES6 Number
Fetch
FIDO U2F API
File API
KeyboardEvent.key
KeyboardEvent.location
MathML
MP3 audio format
MPEG-4/H.264 video format
Node.textContent
Ogg Vorbis audio format
Ogg/Theora video format
Opus
PNG alpha transparency
Public Key Pinning
querySelector/querySelectorAll
Referrer Policy
Resource Hints: dns-prefetch
Resource Hints: preconnect
Resource Hints: prefetch
Resource Hints: prerender
WebGL - 3D Canvas graphics
Offline web applications
All HTML5 features
Other
AAC audio file format
asm.js
async attribute for external scripts
autocomplete attribute: on & off values
Brotli Accept-Encoding/Content-Encoding
Client Hints: DPR, Width, Viewport-Width
Content Security Policy 1.0
Content Security Policy Level 2
Data URIs
defer attribute for external scripts
document.head
DOMContentLoaded
ECMAScript 5 Strict Mode
Minimum length attribute
Multiple file selection
New semantic elements
Number input type
Pattern attribute for input field
Picture element
PNG favicons
progress element
Range input type
relList (DOMTokenList)
Reversed attribute of ordered lis
Ruby annotation
sandbox attribute for iframes
Scoped CSS
seamless attribute for iframes
Search input type
Session history management
Autofocus attribute
Canvas (basic support)
Canvas blend modes
classList (DOMTokenList)
Color input type
contenteditable attribute
Custom Elements
Custom protocol handling
Datalist element
dataset & data-* attributes
Date and time input types
Details & Summary elements
Dialog element
disabled attribute
Download attribute
Drag and Drop
Email, telephone & URL input types
letter-spacing CSS property
Media Queries: interaction media features
Media Queries: resolution feature
rem (root em) units
text-decoration styling
text-emphasis styling
TTF/OTF
Viewport units: vw, vh, vmin, vmax
:placeholder-shown CSS pseudo-class
Crisp edges/pixelated images
Backdrop Filter
Canvas Drawings
Cross-Fade Function
font-smooth
image-set
Logical Properties
Motion Path
pointer-events (for HTML)
Background-image options
Border images
Border-radius (rounded corners)
Box-shadow
Box-sizing
Colors
Cursors (original values)
Cursors: zoom-in & zoom-out
font-kerning
image-orientation
Media Queries
Multiple backgrounds
Multiple column layout
object-fit/object-position
Opacity
Overflow-wrap
selectors
tab-size
font-stretch
font-variant-alternates
Generated content
Gradients
Grid Layout
Hyphenation
initial value
inline-block
Masks
min/max-width/height
outline
page-break properties
position:fixed
Regions
Repeating Gradients
resize property
Scroll snap points
Shapes Level 1
element selector
::placeholder CSS pseudo-
element
::selection CSS pseudo-element
@font-face Web fonts
Blending of HTML/SVG elements
calc() as CSS unit value
2.1 selectors
all property
Animation
Appearance
background-attachment
background-blend-mode
background-position edge
offsets
box-decoration-break
clip-path property
Counter Styles
Counters
Node.innerText
Resource Hints: Lazyload
SPDY protocol
WebP image format
WebVTT - Web Video Text Tracks
XHTML+SMIL animation
All Other features
SVG
Inline SVG in HTML5
SVG (basic support)
SVG effects for HTML
SVG favicons
SVG filters
SVG fonts
SVG fragment identifiers
SVG in CSS backgrounds
SVG in HTML img element
SVG SMIL animation
Internationalization API
JSON parsing
let
matches() DOM method
matchMedia
maxlength attribute for input and textarea elements
Media Source Extensions
Mutation Observer
Navigation Timing API
Object RTC (ORTC) API for WebRTC
Online/offline status
Page Visibility
PageTransitionEvent
Pointer events
PointerLock API
Promises
Proximity API
Proxy object

Second most used lib
@PatrickKettner

commit a9a90192ea11dc0ff916431b40227734af9074b6
Author: Patrick Kettner <patrickkettner@gmail.com>
Date: Fri Sep 11 18:59:17 2015 -0700
release 3.0
@PatrickKettner

{{months of work}}
@PatrickKettner

(other than me)
@PatrickKettner

at best,
we don’t get in the way
@PatrickKettner

we are just a pitstop
@PatrickKettner

we still need to
make users happy
@PatrickKettner

make it
really, really fast
@PatrickKettner

the site works, it
just looks broken
@PatrickKettner

document.fonts.ready.then(() => {
let body = document.body
body.classList.toggle("fontzL0ad3d")
});
@PatrickKettner

body {
font-family: 'T0t411y-R4D-Sans',
'Helvetica', 'Sans-Serif'
}
@PatrickKettner

body {
font-family: 'Helvetica', 'Sans-Serif'
}
body.fontzL0ad3d {
font-family: 'T0t411y-R4D-Sans'
}
@PatrickKettner

FontFaceObserver
@PatrickKettner
github.com/bramstein/fontfaceobserver

@PatrickKettner
let observer = new
FontFaceObserver("T0t411y-R4D-Sans");
observer.check().then(() => {
let body = document.body
body.classList.toggle("fontzL0ad3d")
});

December 1, 2015
@PatrickKettner

@PatrickKettner
observer.check().then(() => {
localStorage.setItem("fontzL0ad3d", true)
});

if it is cached properly
@PatrickKettner

and the user didn’t clear
part of the cache
@PatrickKettner

and the browser didn’t
automatically remove it
@PatrickKettner

this was always
an educated guess
@PatrickKettner

kindof a big deal...
@PatrickKettner

@PatrickKettner
Offline Experiences
Push Notifications
Background Sync
and much, much more...

@PatrickKettner
Fetch
Cache
- Network Proxy
- Programmable
Cache

single module =
dozens of requests
@PatrickKettner

ServiceWorker?
@PatrickKettner

navigator.serviceWorker.register('/serviceworker.js')
@PatrickKettner

let CURRENT_CACHE = {
prefetch: 'prefetch-cache-v1'
};
self.addEventListener('install', event => {
let prefetch = ['/T0t411y-R4D-Sans']
event.waitUntil(caches.open(CURRENT_CACHE['prefetch'])
.then(cache =>
cache.addAll(prefetch.map((url) =>
new Request(url, { 'mode': 'no-cors' })
))
)
)
})
@PatrickKettner

self.addEventListener('fetch', event => {
event.respondWith(caches.match(event.request)
.then((response) => {
if (response) {
return response;
}
return fetch(event.request)
.then(response => response);
}));
});
@PatrickKettner

ServiceWorker > AppCache
@PatrickKettner

...but it covers our use
@PatrickKettner

CACHE MANIFEST
#__CACHE_VERSION__
/
/download
/css/main.css
/img/logo.svg
/js/build.js
__ASSETS__
NETWORK:
*
@PatrickKettner

<html lang="en" manifest="/offline.appcache">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
...
@PatrickKettner

if('serviceWorker' in navigator) {
navigator.serviceWorker.register('/serviceworker.js')
} else if ('applicationCache' in window) {
// add AppCache
}
@PatrickKettner

can’t be added by js
@PatrickKettner

let iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src = '/load-appcache.html'
document.body.appendChild(iframe)
@PatrickKettner

<html manifest="/offline.appcache">
<head>
<title>loading douchebags</title>
</head>
<body></body>
</html>
@PatrickKettner

190 milliseconds
@PatrickKettner

ServiceWorkers!
@PatrickKettner

ServiceWorkers
@PatrickKettner

commit 90b52e847359ae902d3f7ce7bc511cadfbc29ea8
Author: Alexey Proskuryakov <ap@webkit.org>
Date: Thu Nov 6 07:04:47 +0000
Implement Worker global object
@PatrickKettner

single threaded
by default
@PatrickKettner

everything is fighting
for CPU time
@PatrickKettner

lots of number crunchin’
===
hardcore jank
@PatrickKettner

Offload tasks to
background thread
@PatrickKettner

super expensive fns
become pretty cheap
@PatrickKettner

dynamic filesize
calculation
@PatrickKettner

100% clientside!
@PatrickKettner

if ('Worker' in window) {
let gzipWorker = new Worker('/gzip.js');
window.gziper = (config, cb) => {
gzipWorker.postMessage(config);
gzipWorker.onmessage = (e) => cb(e.data);
}
}
@PatrickKettner

@PatrickKettner
importScripts('/pako_deflate.js’, '/pretty-bytes.js');
onmessage = (msg, cb) => {
let build = JSON.parse(msg.data).build;
let response = {
original: prettyBytes(build.length),
compressed: prettyBytes(pako.deflate(build, {
'level’: 6
}).length)
};
postMessage(response);
}

/download
if ('Worker' in window) {
window.buildWorker = new Worker('/build.js');
}
@PatrickKettner

/download
buildWorker.postMessage(JSON.stringify({config}));
@PatrickKettner

@PatrickKettner
/build.js
importScripts('/r.js', '/modernizr/build.js’);
require(['build'],(builder) => {
onmessage = (msg) => {
let config = JSON.parse(msg.data).config;
builder(config, postMessage);
}
});

by the time BUILD is clicked
its already built
@PatrickKettner

“what if their browser
don’t have workers”
@PatrickKettner

¯_(ツ)_/¯
nbd
@PatrickKettner

we’ll just build then
@PatrickKettner

let content = build()
...
zeroClipboard.on('copy', (e) => {
let clipboard = e.clipboardData;
clipboard.setData('text/plain', content);
});
@PatrickKettner

@PatrickKettner
if (Modernizr.flash) {
// ZeroClipboard
} else {
// somethingElse
}

somethingElse?
@PatrickKettner

...
let output = document.querySelector('output')
output.innerHTML = build
output.style.display = 'block'
output.select()
@PatrickKettner

Blobs, URL, & [download]
@PatrickKettner

let blob = new Blob([content], {
type: 'text/plain'
});
let href = URL.createObjectURL(blob)
let download = 'modernizr.custom.js'
@PatrickKettner

@PatrickKettner
<a href={href} download={download}>DOWNLOAD</a>

@PatrickKettner
if (supportsEurythang) {
download = <a href={href} download={download}>DOWNLOAD</a>
} else {
download = <input type='submit' value='download'/>
}

100% clientside!
unless it can’t
@PatrickKettner

100% static files
@PatrickKettner

@PatrickKettner
let server = new Hapi.Server()
server.routes([{
method: 'GET',
path: '/{param*}',
handler: {
directory: {
path: './dist'
}
}
}])
server.start()

99.999% static files
@PatrickKettner

let buildFromPostedQuery = function(request, reply) {
let config = generateConfig(request.payload);
Modernizr.build(config,(build) => {
reply(build)
.header('Content-Type', 'text/javascript')
.header('Content-Disposition', 'attachment;
filename=modernizr-custom.js')
})
}
@PatrickKettner

@PatrickKettner
let server = new Hapi.Server()
server.routes([{
method: 'GET',
path: '/{param*}',
handler: {directory: {path: './dist'}}
}, {
method: 'POST',
path: '/download',
handler: buildFromPostedQuery
}])
server.start()

works for all browsers!
@PatrickKettner

“I want to bower install!”
@PatrickKettner

“I want to npm install!”
@PatrickKettner

“There isn’t a file to install”
@PatrickKettner

can’t publish every combo
@PatrickKettner

3.2317 x 10616
@PatrickKettner

Server already builds
for anything POSTed
@PatrickKettner

/*! modernizr 3.2.0 (Custom Build) | MIT *
* https://modernizr.com/download/?-csstransforms-
csstransforms3d-csstransitions-svg !*/
!function(e,t,n){function r(e,t){return typeof e===t}function
o(){var e,t,n,o,i,s,a;for(var l in
y)if(y.hasOwnProperty(l)){if(e=[],t=y[l],t.name&&(e.push(t.na
me.toLowerCase()),t.options&&t.options.aliases&&t.options.ali
ases.length))for(n=0;n<t.options.aliases.length;n++)e.push(t.
options.aliases[n].toLowerCase());for(o=r(t.fn,"function")?t.
fn():t.fn,i=0;i<e.length;i++)s=e[i],a=s.split("."),1===a.leng
th?Modernizr[a[0]]=o:(!Modernizr[a[0]]||Modernizr[a[0]]instan
ceof Boolean||(Modernizr[a[0]]=new
Boolean(Modernizr[a[0]])),Modernizr[a[0]][a[1]]=o),C.push((o?
"":"no-")+a.join("-"))}}function i(e){var t = E.className,A
@PatrickKettner

npm install --save https://modernizr.com/download/?-
csstransforms-csstransforms3d-csstransitions-svg
@PatrickKettner

let handler = (request, reply) => {
if (userAgent.match(/bower/)) {
buildForBower(config)
} else if (userAgent.match(/npm/)) {
buildForNPM(config)
} else {
reply.view('/download', config);
}
}
@PatrickKettner

let Archiver = require('archiver')
let archive = Archiver('tar')
let bowerJSON = makeBowerJSONFile()
let buildForBower = (config) => {
Modernizr.build(config, (build) => {
var module = archive
.append(build, {name: bowerJSON.main})
.append(JSON.stringify(bowerJSON), {name: 'bower.json'})
.finalize();
reply(module)
.header('Content-disposition', 'attachment;
filename=Modernizr.custom.tar')
})
}
@PatrickKettner

let Archiver = require('archiver')
let archive = Archiver('tar')
let pkg = makePackageJSON()
let buildForNPM = (config) => {
var module = archive
.append(build, {name: pkgJSON.main})
.append(JSON.stringify(pkgJSON), {name: package.json'})
.finalize();
reply(module)
.header('Content-disposition', 'attachment;
filename=Modernizr.custom.tar')
})
}
@PatrickKettner

“wait…
require(‘moderznir’)?”
@PatrickKettner

require(‘moderznir’) !== modernizr
@PatrickKettner

@PatrickKettner
fs.writeFileSync('./modernizr.js’)
}

not super friendly
@PatrickKettner

we already have a
interface we like...
@PatrickKettner

lets reuse it!
@PatrickKettner

React is cool!
@PatrickKettner

get out of the way,
in the best ways possible
@PatrickKettner

make awesome stuff.
@PatrickKettner

use the new shiny.
@PatrickKettner

have a lot of fun.
@PatrickKettner

Making Modern Websites

More Related Content

What's hot (11)

Viewers also liked (9)

Similar to Making Modern Websites (20)

Recently uploaded (20)

Making Modern Websites