Living Standard

The web is a beautiful place. On the face of it: open to all. Complicated and yet still simple. Why do I still so strongly believe in the web? What’s different today that makes the web so much more exciting than ever? And how can we help to keep the web a welcome and open place?

Transcript

1. LIVING STANDARD Remy Sharp • @rem
2. I ❤ the web. Remy Sharp • @rem
3. I ❤ the web. Remy Sharp • @rem
4. I ❤ the web. Remy Sharp • @rem
5. I ❤ the web. and coding for browsers Remy Sharp • @rem
7. I am humbled by the web.
8. The web is the most hostile software engineering environment imaginable. “
9. I am not an engineer. I am a web developer. I am a tinkerer.
14. You do not have to learn everything
17. You do not have to learn everything Be kind to yourself.
19. Understand your tools
20. Solve problems Don’t apply solutions
21. have fun too This was slide was going to be about ES6, but I changed it to…
22. Arrow functions, but mostly because it looks cool: fn = () => …; Default param arguments: (ctx = document, s = ‘’) => ctx.querySelector(s); Property shorthand: return { nodes, length } Destructuring: const { nodes } = fn(‘span’);
23. Browser APIs
24. Get out of your comfort zone
25. Read Write Share
26. Raise the voices of others !
27. Work for diversity
28. People learn at different speeds It’s not just simple.
29. Why be excited about the web today?
30. WebVR https://webvr.info https://copresence.herokuapp.com
31. https://bit.ly/web-bluetooth-demos
32. Progressive Web Apps
33. Progressive Web Apps
34. Control over the network: offline, li-fi, cache, etc…
35. First class citizens on homescreen
36. 3X more time on site 40% high re-engagement 3X lower data usage 70% greater conversion from homescreen https://bit.ly/flipkart-study
37. “Push notifications allowed us to bring one of the most compelling capabilities from our native app to our mobile site. We see a direct 20% click through rate from push notifications…” http://bit.ly/pwa-study-btr – Beyond the Rack
38. Reliable: control over the network Security: TLS/HTTPS, permissions Performance: fast, responsive (in all senses) Availability: homescreen, push notifications
39. Service worker: network control, offline, li-fi HTTPS & HTTP2: security, performance, push Manifest: add to homescreen, icons, standalone, orientation Push notifications: re-engagement …more
40. { "short_name": "My sweet app", "name": "This be the bees knees sweet app", "icons": [ { "src": "icon-144.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "/?utm_source=web_app_manifest", "display": "standalone", "orientation": "portrait", "background_color": "#ff0000", "theme_color": "#00ff00" } <link rel="manifest" href="/manifest.json">
43. Polymer: starter kit & elements WebRTC: PeerJS WebSockets: BinaryJs NodeJS Material Design
44. Polymer: starter kit & elements WebRTC: PeerJS WebSockets: BinaryJs NodeJS Material Design UX:
45. Requires manifest
 and service worker.
46. If I add this app to my home screen, it will work when I open it.
47. If I add this app to my home screen, it must work when I open it.
48. view source Rally behind
49. open source Rally behind
50. browsers Rally behind
51. web community Rally behind
52. contributing Rally behind
53. learning Rally behind
54. the web Rally behind
55. Thanks • @rem