This document discusses making modern websites and some of the challenges involved. It covers tools like Service Workers that can help make sites faster by caching resources and working offline. Font loading techniques are presented to avoid broken designs as fonts load. JavaScript features like Web Workers are highlighted for offloading intensive tasks. Overall it emphasizes the importance of performance and user experience.

1. Making Modern Websites
Patrick Kettner

2. @PatrickKettner

3. @PatrickKettner

4. @PatrickKettner

5. @PatrickKettner

6. @PatrickKettner

7. Websites .
@PatrickKettner

8. Making Websites .
@PatrickKettner

9. Making Websites is Hard.
@PatrickKettner

10. srsly.
@PatrickKettner

12. 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

13. @PatrickKettner

14. @PatrickKettner

15. tools .
@PatrickKettner

16. @PatrickKettner

17. @PatrickKettner

18. Second most used lib
@PatrickKettner

19. @PatrickKettner

20. @PatrickKettner

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

22. @PatrickKettner

23. {{months of work}}
@PatrickKettner

24. @PatrickKettner

25. no one cares.
@PatrickKettner

26. (other than me)
@PatrickKettner

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

28. we are just a pitstop
@PatrickKettner

29. we still need to
make users happy
@PatrickKettner

30. how?
@PatrickKettner

31. make it
really, really fast
@PatrickKettner

32. @PatrickKettner

33. @PatrickKettner

34. @joecritchley

35. @PatrickKettner

36. @font-face
@PatrickKettner

37. @PatrickKettner

38. @PatrickKettner

39. the site works, it
just looks broken
@PatrickKettner

40. @PatrickKettner

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

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

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

44. @PatrickKettner

45. @PatrickKettner

46. @PatrickKettner

47. @PatrickKettner

48. FontFaceObserver
@PatrickKettner
github.com/bramstein/fontfaceobserver

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

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

51. @PatrickKettner

52. @PatrickKettner

53. December 1, 2015
@PatrickKettner

55. @PatrickKettner

56. @PatrickKettner

57. @PatrickKettner

58. @PatrickKettner

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

60. if it is cached properly
@PatrickKettner

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

62. and the browser didn’t
automatically remove it
@PatrickKettner

63. this was always
an educated guess
@PatrickKettner

64. ServiceWorker
@PatrickKettner

65. kindof a big deal...
@PatrickKettner

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

67. @PatrickKettner
Fetch
Cache
- Network Proxy
- Programmable
Cache

69. @PatrickKettner

70. 259 modules
@PatrickKettner

71. single module =
dozens of requests
@PatrickKettner

72. ServiceWorker?
@PatrickKettner

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

74. 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

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

76. @PatrickKettner

77. :(
@PatrickKettner

78. hero
@PatrickKettner

79. savior
@PatrickKettner

80. douchebag
@PatrickKettner

81. AppCache
@PatrickKettner

82. @JaffaTheCake

83. AppCache
@PatrickKettner

84. ServiceWorker > AppCache
@PatrickKettner

85. @PatrickKettner

86. ...but it covers our use
@PatrickKettner

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

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

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

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

91. ServiceWorker > AppCache
@PatrickKettner

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

93. can’t be added by js
@PatrickKettner

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

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

96. 20.7 seconds
@PatrickKettner

97. 190 milliseconds
@PatrickKettner

98. ServiceWorker > AppCache
@PatrickKettner

99. ServiceWorkers!
@PatrickKettner

100. ServiceWorkers
@PatrickKettner

101. WebWorkers
@PatrickKettner

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

103. 2008!
@PatrickKettner

104. Version 2
@PatrickKettner

105. Version 2
@PatrickKettner

106. WebWorkers
@PatrickKettner

107. WebWorkers?
@PatrickKettner

108. single threaded
by default
@PatrickKettner

109. everything is fighting
for CPU time
@PatrickKettner

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

111. Offload tasks to
background thread
@PatrickKettner

112. super expensive fns
become pretty cheap
@PatrickKettner

113. dynamic filesize
calculation
@PatrickKettner

114. @PatrickKettner

117. 100% clientside!
@PatrickKettner

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

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

120. @PatrickKettner

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

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

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

125. by the time BUILD is clicked
its already built
@PatrickKettner

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

127. @PatrickKettner

128. ¯_(ツ)_/¯
nbd
@PatrickKettner

129. we’ll just build then
@PatrickKettner

131. @PatrickKettner

132. @PatrickKettner

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

134. @PatrickKettner

135. :(
@PatrickKettner

136. :(
@PatrickKettner

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

138. somethingElse?
@PatrickKettner

139. @PatrickKettner

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

141. @PatrickKettner

142. @PatrickKettner

143. @PatrickKettner

144. Blobs, URL, & [download]
@PatrickKettner

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

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

147. @PatrickKettner

148. @PatrickKettner

149. @PatrickKettner

150. @PatrickKettner

151. ~ 61% :/
@PatrickKettner

152. @PatrickKettner

153. @PatrickKettner

154. Just POST It
@PatrickKettner

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

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

157. Decent Markup
@PatrickKettner

158. @PatrickKettner

159. CSS
@PatrickKettner

160. CSS
@PatrickKettner

162. JavaScript
@PatrickKettner

163. JavaScript
@PatrickKettner

165. 100% clientside!
@PatrickKettner

166. 100% clientside!
unless it can’t
@PatrickKettner

167. Server Side
@PatrickKettner

168. 100% static files
@PatrickKettner

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

170. 99.999% static files
@PatrickKettner

171. 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

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

173. works for all browsers!
@PatrickKettner

174. srsly.
@PatrickKettner

175. @PatrickKettner

176. @PatrickKettner

177. HTML is cool!
@PatrickKettner

178. no one cares.
@PatrickKettner

179. @PatrickKettner

180. @PatrickKettner

181. “I want to bower install!”
@PatrickKettner

182. “I want to npm install!”
@PatrickKettner

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

184. “...”
@PatrickKettner

185. “I want to npm install!”
@PatrickKettner

186. no one cares.
@PatrickKettner

187. no one cares.
@PatrickKettner

188. can’t publish every combo
@PatrickKettner

189. 259 modules
@PatrickKettner

190. 259 ^ 259
@PatrickKettner

191. 3.2317 x 10616
@PatrickKettner

192. no one cares.
@PatrickKettner

193. Server already builds
for anything POSTed
@PatrickKettner

194. /*! 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

195. /*! 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

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

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

198. 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

199. let Archiver = require('archiver')
let archive = Archiver('tar')
let pkg = makePackageJSON()
let buildForNPM = (config) => {
Modernizr.build(config, (build) => {
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

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

202. @PatrickKettner

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

204. @PatrickKettner
Modernizr.build(config, (build) => {
fs.writeFileSync('./modernizr.js’)
}

205. very flexible
@PatrickKettner

206. not super friendly
@PatrickKettner

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

208. lets reuse it!
@PatrickKettner

210. React is cool!
@PatrickKettner

212. no one cares.
@PatrickKettner

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

214. make awesome stuff.
@PatrickKettner

215. use the new shiny.
@PatrickKettner

216. have a lot of fun.
@PatrickKettner

217. Thanks!
@PatrickKettner