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

New Web API & Stylings

1a73ecdb082f212bf8d81eb9a3a53e29?s=47 Jecelyn Yeen
December 07, 2019

New Web API & Stylings

Introducing New Web API & Stylings


Jecelyn Yeen

December 07, 2019


  1. Web can do these meh? Introducing New Web APIs &

    Styling ✨
  2. Web worker since 2008. Having nightmare since then

  3. @JecelynYeen (twitter / facebook)

  4. Story of a Low Budget High Requirements Project

  5. Typical Customer ALI Help me make a website like X,

    very easy one lah, right? Professional Developer ADRIAN So easy then you do yourself lo….
  6. JE VENTS PWA Awesome website to discover fantastic events

  7. Typical Customer ALI Let’s start with a page where user

    can discover events!
  8. <section> <article *ngFor="let e of events"> <img [src]="e.imageUrl"> </article> </section>

    section { display: grid; justify-items: center; gap: 1rem; }
  9. This is good, Typical Customer ALI But can scroll and

    center each event ah?
  10. Professional Developer ADRIAN Oh… what he wants is scroll snap

  11. <section> <article *ngFor="let e of events"> <img [src]="e.imageUrl"> </article> </section>

    section { display: grid; justify-items: center; gap: 1rem; } max-height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory; article { scroll-snap-align: center; }
  12. Could snap x, y or both! css-at-cds.netlify.com/ css-tricks.com/practical-css-scroll-snapping/

  13. I heard that... Dark mode is a thing right now,

    can we have that? Really need meh... Can I say no...
  14. Dark mode is usually a system setting.

  15. <section> <article *ngFor="let e of events"> <img [src]="e.imageUrl"> </article> </section>

    img { border: 5px solid black; } @media (prefers-color-scheme: dark) { img { border-color: white; } } Can be light
  16. init() { const darkModeMediaQuery = window .matchMedia('(prefers-color-scheme: dark)'); } You

    may need to listen to the changes actively. darkModeMediaQuery .addListener((e) => { const isDarkMode = e.matches; // do what you want ... });
  17. I don’t want to keep changing my system setting! Use

    Chrome Dev Tools! Professional Developer ADRIAN
  18. @media (prefers-reduced-motion: reduce) {} @media (prefers-contrast: high) {} @media (prefers-reduced-transparency:

    reduce) {} @media (forced-colors: high) {} @media (light-level: dim) {} More @media (prefers-*) are coming soon!
  19. Nice. Typical Customer ALI How can user signup? I want

    their valid mobile number.
  20. <form> <input type="tel" name="phone" autocomplete="tel" required> ... </form> <form> <input

    type="number" name="otp" pattern="^([0-9]{6})$" required /> ... </form>
  21. Okay, but... Typical Customer ALI When I install native app,

    it can read my SMS and autofill OTP. Web can ah?
  22. Because it’s a native app, we are building web app

    bro! Professional Developer ADRIAN
  23. Close the capabilities gap with native to enable developers to

    build new experiences on the web Project Fugu developers.google.com/web/updates/capabilities
  24. SMS Receiver API

  25. Can be any text. Must include “For [the website url

    + query param otp + browser apk hash in SMS” (currently) SMS Receiver API - Message Format web.dev/sms-receiver-api-announcement/
  26. <form> <input type="tel" name="phone" autocomplete="tel" required> ... </form> <form> <input

    type="number" name="otp" autocomplete="one-time-code" pattern="^([0-9]{6})$" required /> ... </form> Add autocomplete
  27. async sendSMStoUser(phone: string) { await callApiToSendSMS(phone); await receiveSMS(); ... }

  28. async receiveSMS() { if (!navigator.sms) return; } This is the

    SMS Receiver API const sms = await navigator.sms.receive(); const regex = '...'; // explain later const code = sms.content.match(regex)[1]; if (code) { // success } else { // failed }
  29. SMS Receiver API - Regex web.dev/sms-receiver-api-announcement/ const regex = /^[\s\S]*jevents:

    Your OTP is ([0-9]{6})[\s\S]*$/m
  30. SMS Receiver API consideration - Security Concerns - Handle failure

    - Wait time / Cancellation web.dev/sms-receiver-api-announcement/
  31. Great, what’s next... Typical Customer ALI Display attendee list, sort

    and group by name first char.
  32. <dl> <dt> A </dt> <dd> Abu </dd> <dd> Ahmad </dd>

    <dt> B </dt> <dd> Bala </dd> <dd> Billy </dd> ... </dl> dt - alphabet dd - list
  33. Maybe I can add sticky alphabet scroll effects. (exceed expectations)

    Professional Developer ADRIAN
  34. dl { height: 100vh; overflow-y: auto; } dt { position:

    sticky; top: 0; } Sticky alphabet <dl> <dt> A </dt> <dd> Abu </dd> ... </dl>
  35. Different “levels” of stickiness! css-at-cds.netlify.com/

  36. Typical Customer ALI Each event should have hover menu &

    accessibility friendly!
  37. <article> <img src="..." alt="desc"> <div> <a href="...">...</a> <a href="...">...</a> </div>

    </article> Accessibility!
  38. <article> <img src="..." alt="desc"> <div> <a href="...">...</a> <a href="...">...</a> </div>

    </article> div { visibility: hidden; } article:hover > div, article:focus > div { visibility: visible; }
  39. Typical Customer ALI - Accessibility: Failed! - Not working in

    desktop & screen reader. - User not able to tab through and open menu
  40. <article tabindex="0"> ... </article> div { visibility: hidden; } article:hover

    > div, article:focus-within > div { visibility: visible; } Enable tabbing Swap focus with focus-within
  41. article:is(:hover, :focus-within) > div { visibility: visible; } article:hover >

    div, article:focus-within > div { visibility: visible; } Clean my css code with :is()! article:hover > div, article:focus-within > div { visibility: visible; }
  42. I have a crazy idea Typical Customer ALI Can we

    allow the user download the attendee list as file, use our app to tick attendance offline?
  43. It’s a website bro, but maybe Fugu has something. Professional

    Developer ADRIAN
  44. Native File API Access to system files or folders and

    modify them if granted permissions.
  45. Native File API - Tick Attendance 1. Allow user download

    list as JSON. 2. User can go offline 3. Allow user open file, view and edit. 4. Allow user to save.
  46. let fileHandle; async openFile() { if ('chooseFileSystemEntries' in window) return;

    } Open file fileHandle = await window.chooseFileSystemEntries(); const file = await this.fileHandle.getFile(); const data = await this.readFile(this.file);
  47. async saveFile(content) { const writer = await fileHandle.createWriter(); await writer.write(0,

    content); await writer.close(); }; Save file
  48. Typical Customer ALI Let’s allow our users to share event

    to Twitter, Facebook native app.
  49. Web Share API (Send) Share files to other native apps.

  50. share() { if (!navigator.share) return; navigator.share({ title: 'Join me at

    awesome event!', text: 'Dont miss the chance...', url: window.location.href }).then(() => { … }) .catch(err => { … }); } Web Share API (Send) Can be just either one prop, can share files too!
  51. Web Share Target (Receive) Receive sharing from other native apps,

    could be text, url, files (images, videos, etc)! web.dev/web-share-target/ fugu-journal.web.app Let’s allow user to share event images to our app natively.
  52. "share_target": { "action": "/_share-target", "enctype": "multipart/form-data", "method": "POST", "params": {

    "files": [ { "name": "media", "accept": ["image/*", "video/*"] } ] } } Define Web manifest.json Handle action in your page Can be GET Can be one or more params - title, url, text, etc
  53. Typical Customer ALI Can you let user to design the

    event poster like the Instagram?
  54. Phew… lucky I just read about backdrop-filter. Professional Developer ADRIAN

  55. <section> <div class="filter"></div> <img src="..."> </section> Overlay div on img

    .filter { backdrop-filter: hue-rotate(229deg); }
  56. backdrop-filter Many filters (blur, opacity, contrast, sepia, ...) You can

    mix them too! css-tricks.com/almanac/properti es/b/backdrop-filter/ .filter { backdrop-filter: hue-rotate(229deg) blur(4px); }
  57. Upcoming Features - Check in attendee with QR Code (Web

    Shape API - BarcodeDetector) - Notification Badge (Badging API) - Pick contact and invite them (Contact Picker API) - Offline experiences, show fresh events (Periodic Background Sync API) Fugu can do all these yea?
  58. How to experience new features in Chrome? • Got to

    chrome://flags > Enable Experimental Web Platform features • Origin Trials - Test features in our domains, register developers.chrome.com/origintr ials Excited? Wanna test it yourself?
  59. Watch Chrome Dev Summit (CDS) Talks developer.chrome.com/devsummit/schedule

  60. Fugu Demos: web-sandbox.glitch.me/ Fugu Codelabs: codelabs.developers.google.com/codelabs/web-capa bilities Fugu Overview and

    API list (and video) developers.google.com/web/updates/capabilities CSS @ CDS css-at-cds.netlify.com/
  61. web Started from small group of coders to 17M developers

  62. What do you think is missing from the web platform

    today? Maybe it’s coming soon!
  63. Terima Kasih! Follow @JecelynYeen (Twitter / Facebook) Github (Angular): github.com/chybie/jevents

    slides: speakerdeck.com/chybie/new-web-api- and-stylings Instagram or FB me also lah! @ngmykia