Frontend Development 2019 – What's in your stack?

Transcript

1. Frontend Development 2019 What's in your stack? @stefanjudis
2. STEFAN JUDIS @stefanjudis www.stefanjudis.com sjudis@twilio.com
3. Frontend
4. Frontend 2011
5. Frontend today
6. Frontend today It became Engineering
7. Frontend today Engineering with new tools and practices every year...
9. What's in your stack 2019?
10. What's in your stack 2020?
11. What's in your stack 2021?
12. Highly opinionated...
13. I'm not covering religious questions...
14. Not covering religious questions It doesn't matter!
17. “ Nobody loves what prettier does to their syntax. Everyone loves what prettier does to their coworkers' syntax. "Grensley" on Reddit
19. Ask yourself "Why?"
20. Solve a problem Keep you productive Make you happy A tool should...
21. medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
22. The web platform is a tool, too!
23. A big ecosystem change
26. Chromium Webkit Gecko
28. We got more cross-browser supported features...
29. ... but let's see where this goes.
30. The good stuff
31. Grid
32. www.stefanjudis.com/today-i-learned/
33. .o-list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20em, 1fr)); }
34. .o-list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20em, 1fr)); }
35. .o-list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20em, 1fr)); } .area-javascript { @media (min-width: 70em) { grid-row: 2 / 5; } }
36. .o-list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20em, 1fr)); } .area-javascript { @media (min-width: 70em) { grid-row-start: 2; grid-row-end: 5; } }
37. Grid support caniuse.com/#feat=css-grid
38. cssgrid.io
39. font-display
40. www.zachleat.com/foitfout/
41. @font-face { font-family: "Open Sans Regular"; font-weight: 400; font-style: normal; src: url("fonts/OpenSans-Regular-BasicLatin.woff2") format("woff2"); // browser default behaviour font-display: auto; }
42. @font-face { font-family: "Open Sans Regular"; font-weight: 400; font-style: normal; src: url("fonts/OpenSans-Regular-BasicLatin.woff2") format("woff2"); // browser default behaviour // font-display: auto; // fallback font first // -> custom font when available font-display: swap; }
43. @font-face { font-family: "Open Sans Regular"; font-weight: 400; font-style: normal; src: url("fonts/OpenSans-Regular-BasicLatin.woff2") format("woff2"); // browser default behaviour // font-display: auto; // fallback font first // -> custom font when available // font-display: swap; // invisible until custom font is loaded (FOIT deluxe) font-display: block; }
44. @font-face { font-family: "Open Sans Regular"; font-weight: 400; font-style: normal; src: url("fonts/OpenSans-Regular-BasicLatin.woff2") format("woff2"); // browser default behaviour // font-display: auto; // fallback font first // -> custom font when available // font-display: swap; // invisible until custom font is loaded (FOIT deluxe) // font-display: block; // invisible very short then fallback font // -> custom font when available font-display: fallback; }
45. font-display support caniuse.com/#feat=css-font-rendering-controls
47. www.zachleat.com/web/comprehensive-webfonts/
48. :focus-within
49. <nav class="modal"> <ul> <li><a href="#">One</a></li> <li> <span>Two</span> <ul class="dropdown"> <li> <label> <span>Sub-1</span> <input type="text"> </label> </li> <li> <label> <span>Sub-2</span> <input type="text"> </label> </li> </ul> </li> <li><a href="#">Three</a></li> </ul> </nav> li:focus-within { background: #ddd; }
51. :focus-within support caniuse.com/#feat=css-focus-within
52. Observer power
53. const options = { threshold: 0 };
54. const options = { threshold: 0 }; const intersectionObserver = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { const {target} = entry; target.src = target.dataset.src; intersectionObserver.unobserve(target); } }); }, options);
55. const options = { threshold: 0 }; const intersectionObserver = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { const {target} = entry; target.src = target.dataset.src; intersectionObserver.unobserve(target); } }); }, options); [...document.querySelectorAll('.lazyload')] .forEach(elem => intersectionObserver.observe(elem));
56. const options = { threshold: 0 }; const intersectionObserver = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { const {target} = entry; target.src = target.dataset.src; intersectionObserver.unobserve(target); } }); }, options); [...document.querySelectorAll('.lazyload')] .forEach(elem => intersectionObserver.observe(elem)); Congratulations, that's lazy loading!
57. Intersection Observer Mutation Observer Performance Observer Resize Observer Reporting
 Observer
59. Speaking of lazy loading...
60. addyosmani.com/blog/lazy-loading/
61. loading support caniuse.com/#feat=loading-lazy-attr * * behind a flag * ** ** ** ** polyfillable
62. <img intrinsicsize="400x300" style="width: 100%"> <img src="img/carousel-2.jpg" alt="I'm a carousel image!" importance="low"> The future is bright
63. <img intrinsicsize="400x300" style="width: 100%"> <img src="img/carousel-2.jpg" alt="I'm a carousel image!" importance="low"> The future is bright Images will get super powers.
64. webp the winning image format?
65. jpeg (Q65) 399KB webp 121KB
66. bitsofco.de/why-and-how-to-use-webp-images-today/
67. <picture> <source type="image/webp" srcset="image.webp"> <source type="image/jpeg" srcset="image.jpg"> <img src="image.jpg" alt="My Image"> </picture>
68. webp support caniuse.com/#feat=webp * * "experimenting"
69. Evergreen browsers evolve quickly.
70. The next JavaScript
71. ESM (EcmaScript modules)
72. <html> <head> <title>ES6 modules tryout</title> <!-- in case ES6 modules are supported --> <script src="app/index.js" type="module"></script> <!-- in case ES6 modules aren't supported --> <script src="dist/bundle.js" defer nomodule></script> </head> <body> <!-- ... --> </body> </html>
73. <script src="app/index.js" type="module"></script> 'use strict'; // strict mode by default
74. <script src="app/index.js" type="module"></script> 'use strict'; // strict mode by default console.log(this); // undefined
75. <script src="app/index.js" type="module"></script> 'use strict'; // strict mode by default console.log(this); // undefined const a = 1; // local to the script
76. <script src="app/index.js" type="module"></script> 'use strict'; // strict mode by default console.log(this); // undefined const a = 1; // local to the script import main from './main.js';
77. // loaded asynchronous // executed after finished HTML parsing <script src="app/index.js" type="module"></script> 'use strict'; // strict mode by default console.log(this); // undefined const a = 1; // local to the script import main from './main.js';
78. ESM support caniuse.com/#feat=es6-module
79. www.contentful.com/.../es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling/
80. www.contentful.com/.../es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling/
84. The future is there!
85. nodejs.org/api/esm.html
86. The power of types
87. www.typescriptlang.org
88. www.typescriptlang.org "Who needs that?"
90. export async function migration (migrationCreator: Function): Promise<Intent[]> { // ... } The async function migration accepts the argument migrationCreator of type Function and returns a Promise that resolves with a collection of type Intent.
91. export async function migration (migrationCreator: Function, makeRequest: Function): Promise<Intent[]> { // ... } test/unit/bin/lib/config.spec.ts test/unit/lib/content-types-in-chunks.spec.ts test/unit/lib/deleted-ct-entries.spec.ts test/unit/lib/fetcher.spec.ts test/unit/lib/intent-list/intent-list.spec.ts src/lib/migration-steps/index.ts ...
92. github.com/webpack/webpack/pull/6862
94. Take all the safety and help you can get for large scale applications.
95. PWAs will become the standard
96. Reliable Fast Engaging
97. The holy "service worker"
98. jakearchibald.github.io/isserviceworkerready/
99. self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return response if (response) { return response; } return fetch(event.request); } ) ); });
100. developers.google.com/web/tools/workbox/
101. importScripts('https://storage.googleapis.com/.../workbox-sw.js'); workbox.routing.registerRoute( new RegExp('(/|.*\.css)'), workbox.strategies.networkFirst() );
102. importScripts('https://storage.googleapis.com/.../workbox-sw.js'); workbox.routing.registerRoute( new RegExp('(/|.*\.css)'), workbox.strategies.networkFirst() );
103. Know how it works but use what is out there.
105. The web truly becomes an application platform.
106. GraphQL
107. “ Backend Engineer: Hmm. So you’re saying this “GraphQL” will allow any web or native engineer to arbitrarily query basically any field in any backend service, recursively, however they want, without any backend engineers involved? Frontend Engineer: Yeah, right? It’s amazing! […silence…] Backend Engineer: Guards, seize this person. medium.com/airbnb-engineering/reconciling-graphql-and-thrift-at-airbnb-a97e8d290712
109. One request per resource
111. POST query { course (id: "1toEOumnkEksWakieoeC6M") { fields { title slug skillLevel } } ... } { "data": { "course": { "fields": { "title": "Hello Contentful", "slug": "hello-contentful", "skillLevel": "beginner" } } ... } }
112. POST query { course (id: "1toEOumnkEksWakieoeC6M") { fields { title slug skillLevel } } ... } { "data": { "course": { "fields": { "title": "Hello Contentful", "slug": "hello-contentful", "skillLevel": "beginner" } } ... } } One request for everything
114. github.com/prisma/graphql-playground
115. API
119. As an API provider life becomes easier.
120. GraphQL will change the way we work completely.
121. GraphQL will lower the barrier for Frontend developers.
122. New approach to static sites
123. SSG Build tool content & templates CSS & JavaScript
124. SSG Build tool content & templates CSS & JavaScript
125. SSG Build tool content & templates CSS & JavaScript Constant context switch
126. SSG Build tool content & templates CSS & JavaScript
127. SSG Build tool content & templates CSS & JavaScript
128. SSG Build tool content & templates CSS & JavaScript API data has to be written to disk
129. SSG Build tool content & templates CSS & JavaScript
131. Universal JavaScript Apps (completely JS driven)
133. Rich ecosystem Unified code base Cutting edge technologies Advantages Developer tooling Static HTML
134. www.contentful.com/blog/2018/04/11/new-era-static-sites-rise-future/
137. www.gatsbyjs.org/blog/2018-10-04-journey-to-the-content-mesh
138. Every website is a web app and every web app is a website.
139. #0CJS (Zero-Config JavaScript)
140. Bundlers
141. Executive webpack configuration engineer Senior webpack config manager
143. parceljs.org
144. Demo
146. Works also with Typescript, Sass, ...
148. Toolkits
149. Improved DX
150. Improved DX
151. { "name": "hello-world-react", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.4.0", "react-dom": "^16.4.0", "react-scripts": "3.0.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } } { "name": "hello-world-vue", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "vue": "^2.5.16" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.0.0-beta.15", "@vue/cli-plugin-eslint": "^3.0.0-beta.15", "@vue/cli-service": "^3.0.0-beta.15", "vue-template-compiler": "^2.5.16" }, }
152. { "name": "hello-world-react", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.4.0", "react-dom": "^16.4.0", "react-scripts": "3.0.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } } { "name": "hello-world-vue", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "vue": "^2.5.16" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.0.0-beta.15", "@vue/cli-plugin-eslint": "^3.0.0-beta.15", "@vue/cli-service": "^3.0.0-beta.15", "vue-template-compiler": "^2.5.16" }, }
153. { "name": "hello-world-react", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.4.0", "react-dom": "^16.4.0", "react-scripts": "1.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } } { "name": "hello-world-vue", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "vue": "^2.5.16" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.0.0-beta.15", "@vue/cli-plugin-eslint": "^3.0.0-beta.15", "@vue/cli-service": "^3.0.0-beta.15", "vue-template-compiler": "^2.5.16" }, } A single dependency
154. github.com/reyronald/awesome-toolkits
155. Good tools should just work, but should also be configurable.
156. Easy to use automation tools
157. Testing
158. “ I love writing end-to-end tests! said no one ever...
159. www.cypress.io
161. www.youtube.com/watch?v=zTHQqiu_y0Q
162. Utilities
163. Wrong or broken links
164. Does anyone remember this friend?
165. pptr.dev
166. const puppeteer = require('puppeteer'); const URL = 'https://www.stefanjudis.com/useful-talk-quotes/'; (async() => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(URL, {waitUntil: 'networkidle0'}); await browser.close(); })();
167. const puppeteer = require('puppeteer'); const URL = 'https://www.stefanjudis.com/useful-talk-quotes/'; (async() => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(URL, {waitUntil: 'networkidle0'}); // evaluate URLs let urls = await page.evaluate(_ => { }); await browser.close(); })();
168. const puppeteer = require('puppeteer'); const URL = 'https://www.stefanjudis.com/useful-talk-quotes/'; (async() => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(URL, {waitUntil: 'networkidle0'}); // evaluate URLs let urls = await page.evaluate(_ => { return [... [...document.querySelectorAll('a')] .reduce((acc, {href}) => acc.add(href) && acc, new Set()) ]; }); await browser.close(); })();
169. const puppeteer = require('puppeteer'); const URL = 'https://www.stefanjudis.com/useful-talk-quotes/'; (async() => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(URL, {waitUntil: 'networkidle0'}); // evaluate URLs let urls = await page.evaluate(_ => { return [... [...document.querySelectorAll('a')] .reduce((acc, {href}) => acc.add(href) && acc, new Set()) ]; }); await browser.close(); })();
170. const puppeteer = require('puppeteer'); const URL = 'https://www.stefanjudis.com/useful-talk-quotes/'; (async() => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(URL, {waitUntil: 'networkidle0'}); // evaluate URLs let urls = await page.evaluate(_ => { return [... [...document.querySelectorAll('a')] .reduce((acc, {href}) => acc.add(href) && acc, new Set()) ]; }); await browser.close(); })();
171. const puppeteer = require('puppeteer'); const URL = 'https://www.stefanjudis.com/useful-talk-quotes/'; (async() => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(URL, {waitUntil: 'networkidle0'}); // evaluate URLs let urls = await page.evaluate(_ => { /* ... */ }); await browser.close(); })();
172. const puppeteer = require('puppeteer'); const fetch = require('node-fetch'); const URL = 'https://www.stefanjudis.com/useful-talk-quotes/'; (async() => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(URL, {waitUntil: 'networkidle0'}); // evaluate URLs let urls = await page.evaluate(_ => { /* ... */ }); // map URLs to include status code urls = await Promise.all(urls.map(href => { return new Promise(async resolve => { const {status} = await fetch(href); resolve({ url: href, status }); }) })); await browser.close(); })();
173. const puppeteer = require('puppeteer'); const fetch = require('node-fetch'); const URL = 'https://www.stefanjudis.com/useful-talk-quotes/'; (async() => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(URL, {waitUntil: 'networkidle0'}); // evaluate URLs let urls = await page.evaluate(_ => { /* ... */ }); // map URLs to include status code urls = await Promise.all(urls.map(href => { /* ... */ })); await browser.close(); })();
174. const puppeteer = require('puppeteer'); const fetch = require('node-fetch'); const URL = 'https://www.stefanjudis.com/useful-talk-quotes/'; (async() => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(URL, {waitUntil: 'networkidle0'}); // evaluate URLs let urls = await page.evaluate(_ => { /* ... */ }); // map URLs to include status code urls = await Promise.all(urls.map(href => { /* ... */ })); // filter invalid URLs const invalidLinks = urls .filter(href => href.status !== 200) .map(({url}) => url) await browser.close(); })();
175. const puppeteer = require('puppeteer'); const fetch = require('node-fetch'); const URL = 'https://www.stefanjudis.com/useful-talk-quotes/'; (async() => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(URL, {waitUntil: 'networkidle0'}); // evaluate URLs let urls = await page.evaluate(_ => { /* ... */ }); // map URLs to include status code urls = await Promise.all(urls.map(href => { /* ... */ })); // filter invalid URLs const invalidLinks = urls .filter(href => href.status !== 200) .map(({url}) => url) if (invalidLinks.length) { console.error(`Found invalid links: \n ${invalidLinks.join('\n')}`); } else { console.log('All cool!'); } await browser.close(); })();
177. github.com/GoogleChromeLabs/puppeteer-examples
179. github.com/GoogleChromeLabs/puppeteer-examples/blob/master/side-by-side-pageload.js
180. Automate everything and spend your time with fun stuff.
181. "Serverless"
182. “ You can take your front-end skills and do things that typically only a back-end can do. Chris Coyier
186. There's a service for that!
187. Deploy sites easily
189. Netlify
190. Function as a Service
191. No servers to maintain Automatically upscaling No payment for idle time
192. serverlesscalc.com
193. exports.sayHello = async (event) => { return 'Hello from Lambda!'; };
194. exports.sayHello = async (event) => { return 'Hello from Lambda!'; }; Lambda
195. Lambda exports.sayHello = async (event) => { return 'Hello from Lambda!'; }; API Gateway GET /.../eu-central-1.amazonaws.com/prod/ POST /.../eu-central-1.amazonaws.com/prod/ PUT /.../eu-central-1.amazonaws.com/prod/ ...
196. Lambda API Gateway GET /.../eu-central-1.amazonaws.com/prod/ POST /.../eu-central-1.amazonaws.com/prod/ PUT /.../eu-central-1.amazonaws.com/prod/ ... exports.sayHello = async (event) => { return { statusCode: 200, body: JSON.stringify({ "msg": "Hello from Lambda!" }) }; };
199. Can be tedious
200. Google AWS Microsoft IBM AWS
201. Google AWS Microsoft IBM AWS
202. service: say-hello provider: name: aws runtime: nodejs8.10 functions: sayHello: handler: handler.sayHello events: - http: path: / method: get
203. service: say-hello provider: name: aws runtime: nodejs8.10 functions: sayHello: handler: handler.sayHello events: - http: path: / method: get handler.js exports.sayHello = async (event) => { return { statusCode: 200, body: JSON.stringify({ "msg": "Hello from Lambda!" }) }; }; serverless.yml
205. Serverless weekends
206. module.exports.redirect = async ({ pathParameters }, context) => { };
207. module.exports.redirect = async ({ pathParameters }, context) => { try { } catch (e) { console.log(e); return { statusCode: 500, body: e.message }; } };
208. module.exports.redirect = async ({ pathParameters }, context) => { try { const { shortUrl } = pathParameters; const queryUrl = `https://cdn.contentful.com/spaces/${ process.env.SPACE_ID }/environments/master/entries?content_type=${ process.env.CONTENT_TYPE }&fields.shortUrl=${shortUrl}&access_token=${process.env.ACCESS_TOKEN}`; } catch (e) { console.log(e); return { statusCode: 500, body: e.message }; } };
209. const got = require('got'); module.exports.redirect = async ({ pathParameters }, context) => { try { const { shortUrl } = pathParameters; const queryUrl = `https://cdn.contentful.com/spaces/${ process.env.SPACE_ID }/environments/master/entries?content_type=${ process.env.CONTENT_TYPE }&fields.shortUrl=${shortUrl}&access_token=${process.env.ACCESS_TOKEN}`; const response = JSON.parse((await got(queryUrl)).body); const redirect = response.items[0]; return { statusCode: 301, headers: { Location: redirect.fields.targetUrl } }; } catch (e) { console.log(e); return { statusCode: 500, body: e.message }; } };
210. const got = require('got'); module.exports.redirect = async ({ pathParameters }, context) => { try { const { shortUrl } = pathParameters; const queryUrl = `https://cdn.contentful.com/spaces/${ process.env.SPACE_ID }/environments/master/entries?content_type=${ process.env.CONTENT_TYPE }&fields.shortUrl=${shortUrl}&access_token=${process.env.ACCESS_TOKEN}`; const response = JSON.parse((await got(queryUrl)).body); const redirect = response.items[0]; return { statusCode: 301, headers: { Location: redirect.fields.targetUrl } }; } catch (e) { console.log(e); return { statusCode: 500, body: e.message }; } }; www.my-links.online/ devday
211. const got = require('got'); module.exports.redirect = async ({ pathParameters }, context) => { try { const { shortUrl } = pathParameters; const queryUrl = `https://cdn.contentful.com/spaces/${ process.env.SPACE_ID }/environments/master/entries?content_type=${ process.env.CONTENT_TYPE }&fields.shortUrl=${shortUrl}&access_token=${process.env.ACCESS_TOKEN}`; const response = JSON.parse((await got(queryUrl)).body); const redirect = response.items[0]; return { statusCode: 301, headers: { Location: redirect.fields.targetUrl } }; } catch (e) { console.log(e); return { statusCode: 500, body: e.message }; } }; www.my-links.online/ devday (yes, I bought this domain)
212. twitter.com/randomMDN
213. twitter.com/randomMDN You can schedule functions!!!
214. Don't be afraid your admins won't give you enough access to be dangerous.
215. Functions are everywhere!
216. Connect all the dots (the power of web hooks)
217. “ Web hooks are the API of the web. Phil Hawksworth
218. ? ?
219. ? ? module.exports.handleDiscourse = (event, context, callback) => { };
220. ? ? module.exports.handleDiscourse = (event, context, callback) => { const post = JSON.parse(event.body).post; };
221. ? ? module.exports.handleDiscourse = (event, context, callback) => { const post = JSON.parse(event.body).post; if (post && event.headers['X-Discourse-Event'] !== 'post_edited') { const { name, topic_title, topic_slug, topic_id, post_number } = post; } };
222. ? ? module.exports.handleDiscourse = (event, context, callback) => { const post = JSON.parse(event.body).post; if (post && event.headers['X-Discourse-Event'] !== 'post_edited') { const { name, topic_title, topic_slug, topic_id, post_number } = post; // send it to Slack // ... // ... } };
223. https://www.contentful.com/slack/
224. ? ?
225. ? ?
227. "Just write a Lambda function"
228. 8-bit-revolution.netlify.com/
229. require('dotenv').config(); const { TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN, CONTACT_NUMBERS, BOT_NUMBER, BOT_MESSAGE } = process.env; const client = require('twilio')(TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN); exports.handler = function(event, context, callback) { Promise.all( CONTACT_NUMBERS.split(';').map(num => { return client.messages.create({ from: BOT_NUMBER, to: num, body: BOT_MESSAGE }); }) ) .then(() => callback(null, { statusCode: 200, body: 'Created' })) .catch(e => callback(e)); };
230. youtu.be/vXJpOHz3_sY
231. Spend your time building your business and connect all the dots.
232. Have fun!
233. thepowerofserverless.info
234. codepen.io/chriscoyier/project/editor/ZepgLg
235. codesandbox.io
236. That is VSCode running in your browser!
237. New awareness
239. webhint.io
241. Let's build good products!
242. My wish
244. class AppDrawer extends HTMLElement {...} window.customElements.define('app-drawer', AppDrawer); Custom Elements
247. <date-picker>
249. Let's bet on our platform!
250. How to stay up-to-date?
251. Newsletters
252. www.stefanjudis.com/staying-up-to-date/
253. webplatform.news
254. GitHub
255. github.com/Fyrd/caniuse/
256. github.com/mdn/browser-compat-data/
257. www.chromestatus.com/features
258. Don't worry about falling behind...
260. You can't be always cutting-edge.
261. Use what works for you!
262. THANKS FOR LISTENING www.my-links.online/devday
 @stefanjudis