New Web API & Stylings

Introducing New Web API & Stylings

Transcript

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 lah...
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 worldwide.
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