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

New Web API & Stylings

Jecelyn Yeen
December 07, 2019

New Web API & Stylings

Introducing New Web API & Stylings

Jecelyn Yeen

December 07, 2019

More Decks by Jecelyn Yeen

Other Decks in Programming


  1. 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….
  2. <section> <article *ngFor="let e of events"> <img [src]="e.imageUrl"> </article> </section>

    section { display: grid; justify-items: center; gap: 1rem; }
  3. <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; }
  4. I heard that... Dark mode is a thing right now,

    can we have that? Really need meh... Can I say no...
  5. <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
  6. 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 ... });
  7. I don’t want to keep changing my system setting! Use

    Chrome Dev Tools! Professional Developer ADRIAN
  8. @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!
  9. <form> <input type="tel" name="phone" autocomplete="tel" required> ... </form> <form> <input

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

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

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

    build new experiences on the web Project Fugu developers.google.com/web/updates/capabilities
  13. 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/
  14. <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
  15. 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 }
  16. SMS Receiver API consideration - Security Concerns - Handle failure

    - Wait time / Cancellation web.dev/sms-receiver-api-announcement/
  17. <dl> <dt> A </dt> <dd> Abu </dd> <dd> Ahmad </dd>

    <dt> B </dt> <dd> Bala </dd> <dd> Billy </dd> ... </dl> dt - alphabet dd - list
  18. dl { height: 100vh; overflow-y: auto; } dt { position:

    sticky; top: 0; } Sticky alphabet <dl> <dt> A </dt> <dd> Abu </dd> ... </dl>
  19. <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; }
  20. Typical Customer ALI - Accessibility: Failed! - Not working in

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

    > div, article:focus-within > div { visibility: visible; } Enable tabbing Swap focus with focus-within
  22. 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; }
  23. 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?
  24. Native File API Access to system files or folders and

    modify them if granted permissions.
  25. 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.
  26. 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);
  27. 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!
  28. 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.
  29. "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
  30. Typical Customer ALI Can you let user to design the

    event poster like the Instagram?
  31. 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); }
  32. 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?
  33. 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?
  34. 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/
  35. What do you think is missing from the web platform

    today? Maybe it’s coming soon!
  36. 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