Making Modern Websites - Front-Trends 2016

It seems like new APIs for the web are released every week. It would be cool to be able to use them, but if you need to make websites for the average user, you won't be able to use them for years – right? Wrong. Patrick will go over how creating feature rich and super fast front end applications, integrating over a dozen cutting edge web features, all while supporting even the oldest of web clients.

Transcript

1. Making Modern Websites Patrick Kettner
2. @PatrickKettner
3. @PatrickKettner
4. @PatrickKettner
5. @PatrickKettner
6. @PatrickKettner
7. @PatrickKettner
8. Websites . @PatrickKettner
9. Making Websites . @PatrickKettner
10. Making Websites is Hard. @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 Audio Tracks Autofocus attribute Canvas (basic support) Canvas blend modes classList (DOMTokenList) Color input type 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 ::first -letter CSS pseudo- element selecto r ::place holder CSS pseudo- element ::selec features SVG Inline SVG in HTML5 SVG (basic support) SVG effects for HTML SVG favicons SVG filters Internationalizatio API JSON parsing let matches() DOM metho matchMedia maxlength attribute input and textarea elements Media Source Extens Mutation Observer Navigation Timing A
13. tools . @PatrickKettner
14. @PatrickKettner
15. @PatrickKettner
16. Second most used lib @PatrickKettner
17. Over two thirds of Fortune 500 websites @PatrickKettner
18. @PatrickKettner
19. @PatrickKettner
20. commit a9a90192ea11dc0ff916431b40227734af9074b6 Author: Patrick Kettner <patrickkettner@gmail.com> Date: Fri Sep 11 18:59:17 2015 -0700 release 3.0 @PatrickKettner
21. @PatrickKettner
22. {{months of work}} @PatrickKettner
23. @PatrickKettner
24. @PatrickKettner
25. @font-face @PatrickKettner
26. @PatrickKettner
27. @PatrickKettner
28. @PatrickKettner
29. the site works, it just looks broken @PatrickKettner
30. @PatrickKettner
31. document.fonts.ready.then(() => { let body = document.body body.classList.toggle("fontzL0ad3d") }); @PatrickKettner
32. document.fonts.ready.then(() => { let body = document.body body.classList.toggle("fontzL0ad3d") }); @PatrickKettner
33. document.fonts.ready.then(() => { let body = document.body body.classList.toggle("fontzL0ad3d") }); @PatrickKettner
34. document.fonts.ready.then(() => { let body = document.body body.classList.toggle("fontzL0ad3d") }); @PatrickKettner
35. document.fonts.ready.then(() => { let body = document.body body.classList.toggle("fontzL0ad3d") }); @PatrickKettner
36. body { font-family: 'T0t411y-R4D-Sans', 'Helvetica', 'Sans-Serif' } @PatrickKettner
37. body { font-family: 'Helvetica', 'Sans-Serif' } body.fontzL0ad3d { font-family: 'T0t411y-R4D-Sans' } @PatrickKettner
38. @PatrickKettner
39. @PatrickKettner
40. @PatrickKettner
41. @PatrickKettner
42. FontFaceObserver @PatrickKettner github.com/bramstein/fontfaceobserver
43. document.fonts.ready.then(() => { let body = document.body body.classList.toggle("fontzL0ad3d") }); @PatrickKettner
44. let font = new FontFaceObserver("T0t411y-R4D-Sans") font.load().then(() => { let body = document.body body.classList.toggle("fontzL0ad3d") }); @PatrickKettner
45. let font = new FontFaceObserver("T0t411y-R4D-Sans") font.load().then(() => { let body = document.body body.classList.toggle("fontzL0ad3d") }); @PatrickKettner
46. let font = new FontFaceObserver("T0t411y-R4D-Sans") font.load().then(() => { let body = document.body body.classList.toggle("fontzL0ad3d") }); @PatrickKettner
47. let font = new FontFaceObserver("T0t411y-R4D-Sans") font.load().then(() => { let body = document.body body.classList.toggle("fontzL0ad3d") }); @PatrickKettner
48. @PatrickKettner
49. @PatrickKettner
50. Chrome 50 @PatrickKettner
52. @PatrickKettner
53. @PatrickKettner
54. @PatrickKettner
55. @PatrickKettner
56. @PatrickKettner localStorage.setItem("fontzL0ad3d", true)
57. if it is cached properly @PatrickKettner
58. and the user didn’t clear part of the cache @PatrickKettner
59. and the browser didn’t automatically remove it @PatrickKettner
60. this was always an educated guess @PatrickKettner
61. ServiceWorker @PatrickKettner
62. kindof a big deal... @PatrickKettner
63. @PatrickKettner Offline Experiences Push Notifications Background Sync and much, much more...
64. @PatrickKettner Fetch Cache -  Network Proxy -  Programmable Cache
66. @PatrickKettner
67. 262 modules @PatrickKettner
68. single module = dozens of requests @PatrickKettner
69. ServiceWorker! @PatrickKettner
70. navigator.serviceWorker.register('/serviceworker.js') @PatrickKettner
71. 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
72. 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
73. 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
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. 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
76. 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
77. self.addEventListener('fetch', event => { event.respondWith(caches.match(event.request) .then((response) => { if (response) { return response; } return fetch(event.request) .then(response => response); })); }); @PatrickKettner
78. self.addEventListener('fetch', event => { event.respondWith(caches.match(event.request) .then((response) => { if (response) { return response; } return fetch(event.request) .then(response => response); })); }); @PatrickKettner
79. self.addEventListener('fetch', event => { event.respondWith(caches.match(event.request) .then((response) => { if (response) { return response; } return fetch(event.request) .then(response => response); })); }); @PatrickKettner
80. self.addEventListener('fetch', event => { event.respondWith(caches.match(event.request) .then((response) => { if (response) { return response; } return fetch(event.request) .then(response => response); })); }); @PatrickKettner
81. self.addEventListener('fetch', event => { event.respondWith(caches.match(event.request) .then((response) => { if (response) { return response; } return fetch(event.request) .then(response => response); })); }); @PatrickKettner
82. self.addEventListener('fetch', event => { event.respondWith(caches.match(event.request) .then((response) => { if (response) { return response; } return fetch(event.request) .then(response => response); })); }); @PatrickKettner
83. @PatrickKettner
84. :( @PatrickKettner
85. AppCache @PatrickKettner
86. @JaffaTheCake
87. ServiceWorker > AppCache @PatrickKettner
88. ...but it covers our use @PatrickKettner
89. @PatrickKettner
90. if('serviceWorker' in navigator) { navigator.serviceWorker.register('/serviceworker.js') } else if ('applicationCache' in window) { // add AppCache } @PatrickKettner
91. <html lang="en" manifest="/offline.appcache"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ... @PatrickKettner
92. <html lang="en" manifest="/offline.appcache"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ... @PatrickKettner
93. can’t be added by js @PatrickKettner
94. can’t easily be added by js @PatrickKettner
95. let iframe = document.createElement('iframe') iframe.style.display = 'none' iframe.src = '/load-appcache.html' document.body.appendChild(iframe) @PatrickKettner
96. CACHE MANIFEST / /download /css/main.css /img/logo.svg /js/build.js NETWORK: * @PatrickKettner
97. CACHE MANIFEST / /download /css/main.css /img/logo.svg /js/build.js NETWORK: * @PatrickKettner
98. CACHE MANIFEST / /download /css/main.css /img/logo.svg /js/build.js NETWORK: * @PatrickKettner
99. CACHE MANIFEST / /download /css/main.css /img/logo.svg /js/build.js NETWORK: * @PatrickKettner
100. <html manifest="/offline.appcache"> <head> <title>loading douchebags</title> </head> <body></body> </html> @PatrickKettner
101. 20.7 seconds @PatrickKettner
102. 190 milliseconds @PatrickKettner
103. ServiceWorkers! @PatrickKettner
104. ServiceWorkers @PatrickKettner
105. WebWorkers @PatrickKettner
106. commit 90b52e847359ae902d3f7ce7bc511cadfbc29ea8 Author: Alexey Proskuryakov <ap@webkit.org> Date: Thu Nov 6 07:04:47 +0000 Implement Worker global object @PatrickKettner
107. 2008! @PatrickKettner
108. Version 2 @PatrickKettner
109. Version 2 @PatrickKettner
110. WebWorkers @PatrickKettner
111. WebWorkers? @PatrickKettner
112. single threaded by default @PatrickKettner
113. everything is fighting for CPU time @PatrickKettner
114. lots of number crunchin’ === hardcore jank @PatrickKettner
115. Offload tasks to background thread @PatrickKettner
116. super expensive fns become pretty cheap @PatrickKettner
117. dynamic filesize calculation @PatrickKettner
118. @PatrickKettner
121. 100% clientside! @PatrickKettner
122. if ('Worker' in window) { let gzipWorker = new Worker('/gzip.js'); window.gziper = (config, cb) => { gzipWorker.postMessage(config); gzipWorker.onmessage = (e) => cb(e.data); } } @PatrickKettner
123. if ('Worker' in window) { let gzipWorker = new Worker('/gzip.js'); window.gziper = (config, cb) => { gzipWorker.postMessage(config); gzipWorker.onmessage = (e) => cb(e.data); } } @PatrickKettner
124. if ('Worker' in window) { let gzipWorker = new Worker('/gzip.js'); window.gziper = (config, cb) => { gzipWorker.postMessage(config); gzipWorker.onmessage = (e) => cb(e.data); } } @PatrickKettner
125. if ('Worker' in window) { let gzipWorker = new Worker('/gzip.js'); window.gziper = (config, cb) => { gzipWorker.postMessage(config); gzipWorker.onmessage = (e) => cb(e.data); } } @PatrickKettner
126. if ('Worker' in window) { let gzipWorker = new Worker('/gzip.js'); window.gziper = (config, cb) => { gzipWorker.postMessage(config); gzipWorker.onmessage = (e) => cb(e.data); } } @PatrickKettner
127. if ('Worker' in window) { let gzipWorker = new Worker('/gzip.js'); window.gziper = (config, cb) => { gzipWorker.postMessage(config); gzipWorker.onmessage = (e) => cb(e.data); } } @PatrickKettner
128. @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); }
129. @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); }
130. @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); }
131. @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); }
132. @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); }
133. @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); }
134. @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); }
135. @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); }
136. @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); }
137. @PatrickKettner
139. /download if ('Worker' in window) { window.buildWorker = new Worker('/build.js'); } @PatrickKettner
140. /download buildWorker.postMessage(JSON.stringify({config})); @PatrickKettner
141. @PatrickKettner /build.js importScripts('/r.js', '/modernizr/build.js’); require(['build'],(builder) => { onmessage = (msg) => { let config = JSON.parse(msg.data).config; builder(config, postMessage); } });
142. @PatrickKettner /build.js importScripts('/r.js', '/modernizr/build.js’); require(['build'],(builder) => { onmessage = (msg) => { let config = JSON.parse(msg.data).config; builder(config, postMessage); } });
143. @PatrickKettner /build.js importScripts('/r.js', '/modernizr/build.js’); require(['build'],(builder) => { onmessage = (msg) => { let config = JSON.parse(msg.data).config; builder(config, postMessage); } });
144. @PatrickKettner /build.js importScripts('/r.js', '/modernizr/build.js’); require(['build'],(builder) => { onmessage = (msg) => { let config = JSON.parse(msg.data).config; builder(config, postMessage); } });
145. @PatrickKettner /build.js importScripts('/r.js', '/modernizr/build.js’); require(['build'],(builder) => { onmessage = (msg) => { let config = JSON.parse(msg.data).config; builder(config, postMessage); } });
146. @PatrickKettner /build.js importScripts('/r.js', '/modernizr/build.js’); require(['build'],(builder) => { onmessage = (msg) => { let config = JSON.parse(msg.data).config; builder(config, postMessage); } });
147. @PatrickKettner /build.js importScripts('/r.js', '/modernizr/build.js’); require(['build'],(builder) => { onmessage = (msg) => { let config = JSON.parse(msg.data).config; builder(config, postMessage); } });
148. by the time BUILD is clicked its already built @PatrickKettner
149. “what if their browser don’t have workers?” @PatrickKettner
150. @PatrickKettner
151. ¯\_(ϑ)_/¯ nbd @PatrickKettner
152. we’ll just build then @PatrickKettner
154. @PatrickKettner
155. @PatrickKettner
156. let content = build() ... zeroClipboard.on('copy', (e) => { let clipboard = e.clipboardData; clipboard.setData('text/plain', content); }); @PatrickKettner
157. let content = build() ... zeroClipboard.on('copy', (e) => { let clipboard = e.clipboardData; clipboard.setData('text/plain', content); }); @PatrickKettner
158. let content = build() ... zeroClipboard.on('copy', (e) => { let clipboard = e.clipboardData; clipboard.setData('text/plain', content); }); @PatrickKettner
159. let content = build() ... zeroClipboard.on('copy', (e) => { let clipboard = e.clipboardData; clipboard.setData('text/plain', content); }); @PatrickKettner
160. @PatrickKettner
161. :( @PatrickKettner
162. :( @PatrickKettner
163. @PatrickKettner if (Modernizr.flash) { // ZeroClipboard } else { // somethingElse }
164. somethingElse? @PatrickKettner
165. @PatrickKettner
166. let content = build() ... let output = document.querySelector(’#output') output.innerHTML = content output.style.display = 'block' output.select() @PatrickKettner
167. let content = build() ... let output = document.querySelector(’#output') output.innerHTML = content output.style.display = 'block' output.select() @PatrickKettner
168. let content = build() ... let output = document.querySelector(’#output') output.innerHTML = content output.style.display = 'block' output.select() @PatrickKettner
169. let content = build() ... let output = document.querySelector(’#output') output.innerHTML = content output.style.display = 'block' output.select() @PatrickKettner
170. let content = build() ... let output = document.querySelector(’#output') output.innerHTML = content output.style.display = 'block' output.select() @PatrickKettner
171. let content = build() ... let output = document.querySelector(’#output') output.innerHTML = content output.style.display = 'block' output.select() @PatrickKettner
172. @PatrickKettner
173. @PatrickKettner
174. @PatrickKettner
175. @PatrickKettner
176. Blobs, URL, & [download] @PatrickKettner
177. let content = build() let blob = new Blob([content], { type: 'text/plain' }); let href = URL.createObjectURL(blob) let download = 'modernizr.custom.js' @PatrickKettner
178. let content = build() let blob = new Blob([content], { type: 'text/plain' }); let href = URL.createObjectURL(blob) let download = 'modernizr.custom.js' @PatrickKettner
179. let content = build() let blob = new Blob([content], { type: 'text/plain' }); let href = URL.createObjectURL(blob) let download = 'modernizr.custom.js' @PatrickKettner
180. let content = build() let blob = new Blob([content], { type: 'text/plain' }); let href = URL.createObjectURL(blob) let download = 'modernizr.custom.js' @PatrickKettner
181. let content = build() let blob = new Blob([content], { type: 'text/plain' }); let href = URL.createObjectURL(blob) let download = 'modernizr.custom.js' @PatrickKettner
182. let content = build() let blob = new Blob([content], { type: 'text/plain' }); let href = URL.createObjectURL(blob) let download = 'modernizr.custom.js' @PatrickKettner
183. @PatrickKettner <a href={href} download={download}>DOWNLOAD</a>
184. @PatrickKettner
185. @PatrickKettner
186. @PatrickKettner
187. @PatrickKettner
188. ~ 61% :/ @PatrickKettner
189. @PatrickKettner
190. @PatrickKettner
191. Just POST It @PatrickKettner
192. @PatrickKettner <a href={href} download={download}>DOWNLOAD</a>
193. @PatrickKettner if (supportsEurythang) { download = <a href={href} download={download}>DOWNLOAD</a> } else { download = <button type='submit’>DOWNLOAD</button> }
194. @PatrickKettner if (supportsEurythang) { download = <a href={href} download={download}>DOWNLOAD</a> } else { download = <button type='submit’>DOWNLOAD</button> }
195. @PatrickKettner if (supportsEurythang) { download = <a href={href} download={download}>DOWNLOAD</a> } else { download = <button type='submit’>DOWNLOAD</button> }
196. Decent Markup @PatrickKettner
197. @PatrickKettner
198. CSS @PatrickKettner
199. CSS @PatrickKettner
201. JavaScript @PatrickKettner
202. JavaScript @PatrickKettner
204. lynx https://modernizr.com/download/ @PatrickKettner
205. 100% clientside! @PatrickKettner
206. 100% clientside! unless it can’t @PatrickKettner
207. Server Side @PatrickKettner
208. 100% static files @PatrickKettner
209. @PatrickKettner let server = new Hapi.Server() server.routes([{ method: 'GET', path: '/{param*}', handler: { directory: { path: './dist' } } }]) server.start()
210. @PatrickKettner let server = new Hapi.Server() server.routes([{ method: 'GET', path: '/{param*}', handler: { directory: { path: './dist' } } }]) server.start()
211. @PatrickKettner let server = new Hapi.Server() server.routes([{ method: 'GET', path: '/{param*}', handler: { directory: { path: './dist' } } }]) server.start()
212. @PatrickKettner let server = new Hapi.Server() server.routes([{ method: 'GET', path: '/{param*}', handler: { directory: { path: './dist' } } }]) server.start()
213. @PatrickKettner let server = new Hapi.Server() server.routes([{ method: 'GET', path: '/{param*}', handler: { directory: { path: './dist' } } }]) server.start()
214. @PatrickKettner let server = new Hapi.Server() server.routes([{ method: 'GET', path: '/{param*}', handler: { directory: { path: './dist' } } }]) server.start()
215. 99.999% static files @PatrickKettner
216. 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
217. 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
218. 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
219. 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
220. 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
221. 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
222. @PatrickKettner
223. @PatrickKettner
224. @PatrickKettner let server = new Hapi.Server() server.routes([{ method: 'GET', path: '/{param*}', handler: {directory: {path: './dist'}} }, { method: 'POST', path: '/download', handler: buildFromPostedQuery }]) server.start()
225. @PatrickKettner let server = new Hapi.Server() server.routes([{ method: 'GET', path: '/{param*}', handler: {directory: {path: './dist'}} }, { method: 'POST', path: '/download', handler: buildFromPostedQuery }]) server.start()
226. works for all browsers! @PatrickKettner
227. srsly. @PatrickKettner
228. @PatrickKettner
229. @PatrickKettner
230. @PatrickKettner if (supportsEurythang) { download = <a href={href} download={download}>DOWNLOAD</a> } else { download = <button type='submit’>DOWNLOAD</button> }
231. @PatrickKettner if (supportsEurythang) { download = <a href={href} download={download}>DOWNLOAD</a> } else { download = <input type='submit' value='download'/> }
232. HTML is cool! @PatrickKettner
233. @PatrickKettner
234. @PatrickKettner
235. “I want to bower install!” @PatrickKettner
236. “I want to npm install!” @PatrickKettner
237. “There isn’t a file to install” @PatrickKettner
238. “...” @PatrickKettner
239. “I want to npm install!” @PatrickKettner
240. can’t publish every combo @PatrickKettner
241. 262 modules @PatrickKettner
242. 262 ^ 262 @PatrickKettner
243. 3.9349 x 10633 @PatrickKettner
244. Server already builds for anything POSTed @PatrickKettner
245. * 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.name.toLowerCase()),t.opti ons&&t.options.aliases&&t.options.aliases.length))for(n=0;n< t.options.aliases.length;n+ +)e.push(t.options.aliases[n].toLowerCase());for(o=r(t.fn,"f unction")?t.fn():t.fn,i=0;i<e.length;i+ +)s=e[i],a=s.split("."),1===a.length?Modernizr[a[0]]=o:(! Modernizr[a[0]]||Modernizr[a[0]]instanceof 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
246. * 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.name.toLowerCase()),t.opti ons&&t.options.aliases&&t.options.aliases.length))for(n=0;n< t.options.aliases.length;n+ +)e.push(t.options.aliases[n].toLowerCase());for(o=r(t.fn,"f unction")?t.fn():t.fn,i=0;i<e.length;i+ +)s=e[i],a=s.split("."),1===a.length?Modernizr[a[0]]=o:(! Modernizr[a[0]]||Modernizr[a[0]]instanceof 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
247. npm install --save https://modernizr.com/download/?-csstransforms- csstransforms3d-csstransitions-svg @PatrickKettner
248. let handler = (request, reply) => { if (userAgent.match(/bower/)) { buildForBower(config) } else if (userAgent.match(/npm/)) { buildForNPM(config) } else { reply.view('/download', config); } } @PatrickKettner
249. 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
250. 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
252. “wait… require(‘moderznir’)?” @PatrickKettner
253. @PatrickKettner
254. require(‘moderznir’) !== modernizr @PatrickKettner
255. @PatrickKettner Modernizr.build(config, (build) => { fs.writeFileSync('./modernizr.js’) }
256. very flexible @PatrickKettner
257. not super friendly @PatrickKettner
258. we already have a interface we like... @PatrickKettner
259. lets reuse it! @PatrickKettner
261. ssh fronttrends@patrickkettner.com passwd: fronttrends @PatrickKettner
262. React is cool! @PatrickKettner
263. make awesome stuff. @PatrickKettner
264. use the new shiny. @PatrickKettner
265. have a lot of fun. @PatrickKettner
266. github.com/PatrickKettner twitter.com/PatrickKettner facebook.com/PatrickKettner PatrickKettner@microsoft.com
267. github.com/PatrickKettner twitter.com/PatrickKettner facebook.com/PatrickKettner PatrickKettner@microsoft.com
268. github.com/PatrickKettner twitter.com/PatrickKettner facebook.com/PatrickKettner PatrickKettner@microsoft.com
269. github.com/PatrickKettner twitter.com/PatrickKettner facebook.com/PatrickKettner PatrickKettner@microsoft.com
270. github.com/PatrickKettner twitter.com/PatrickKettner facebook.com/PatrickKettner PatrickKettner@microsoft.com
271. Thanks!