Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Living Standard

Remy Sharp
September 21, 2016

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?

Remy Sharp

September 21, 2016
Tweet

More Decks by Remy Sharp

Other Decks in Technology

Transcript

  1. LIVING STANDARD
    Remy Sharp ● @rem

    View Slide

  2. I ❤ the web.
    Remy Sharp ● @rem

    View Slide

  3. I ❤ the web.
    Remy Sharp ● @rem

    View Slide

  4. I ❤ the web.
    Remy Sharp ● @rem

    View Slide

  5. I ❤ the web.
    and coding for browsers
    Remy Sharp ● @rem

    View Slide

  6. View Slide

  7. I am humbled
    by the web.

    View Slide

  8. The web is the most hostile
    software engineering
    environment imaginable.

    View Slide

  9. I am not an engineer.
    I am a web developer.
    I am a tinkerer.

    View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. You do not have to
    learn everything

    View Slide

  15. View Slide

  16. View Slide

  17. You do not have to
    learn everything
    Be kind to yourself.

    View Slide

  18. View Slide

  19. Understand your tools

    View Slide

  20. Solve problems
    Don’t apply solutions

    View Slide

  21. have fun too
    This was slide was going to be about ES6, but I changed it to…

    View Slide

  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’);

    View Slide

  23. Browser APIs

    View Slide

  24. Get out of your
    comfort zone

    View Slide

  25. Read
    Write
    Share

    View Slide

  26. Raise the
    voices of others
    !

    View Slide

  27. Work for diversity

    View Slide

  28. People learn at
    different speeds
    It’s not just simple.

    View Slide

  29. Why be excited
    about the web
    today?

    View Slide

  30. WebVR
    https://webvr.info
    https://copresence.herokuapp.com

    View Slide

  31. https://bit.ly/web-bluetooth-demos

    View Slide

  32. Progressive
    Web
    Apps

    View Slide

  33. Progressive
    Web
    Apps

    View Slide

  34. Control
    over the
    network:
    offline, li-fi,
    cache, etc…

    View Slide

  35. First class
    citizens on
    homescreen

    View Slide

  36. 3X more time on site
    40% high re-engagement
    3X lower data usage
    70% greater conversion
    from homescreen
    https://bit.ly/flipkart-study

    View Slide

  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

    View Slide

  38. Reliable: control over the network
    Security: TLS/HTTPS, permissions
    Performance: fast, responsive (in all senses)
    Availability: homescreen, push notifications

    View Slide

  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

    View Slide

  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"
    }

    View Slide

  41. View Slide

  42. View Slide

  43. Polymer: starter kit & elements
    WebRTC: PeerJS
    WebSockets: BinaryJs
    NodeJS
    Material Design

    View Slide

  44. Polymer: starter kit & elements
    WebRTC: PeerJS
    WebSockets: BinaryJs
    NodeJS
    Material Design
    UX:

    View Slide

  45. Requires manifest

    and service worker.

    View Slide

  46. If I add this app to my
    home screen, it will
    work when I open it.

    View Slide

  47. If I add this app to my
    home screen, it must
    work when I open it.

    View Slide

  48. view source
    Rally behind

    View Slide

  49. open source
    Rally behind

    View Slide

  50. browsers
    Rally behind

    View Slide

  51. web community
    Rally behind

    View Slide

  52. contributing
    Rally behind

    View Slide

  53. learning
    Rally behind

    View Slide

  54. the web
    Rally behind

    View Slide

  55. Thanks ● @rem

    View Slide