Slide 1
Slide 1 text
Web can do these meh?
Introducing New
Web APIs &
Styling ✨
Slide 2
Slide 2 text
Web worker since 2008.
Having nightmare since then
Slide 3
Slide 3 text
@JecelynYeen (twitter / facebook)
Slide 4
Slide 4 text
Story of a Low Budget
High Requirements
Project
Slide 5
Slide 5 text
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….
Slide 6
Slide 6 text
JE VENTS PWA
Awesome website to
discover fantastic events
Slide 7
Slide 7 text
Typical Customer
ALI
Let’s start with a
page where
user can discover
events!
Slide 8
Slide 8 text
Slide 9
Slide 9 text
This is good,
Typical Customer
ALI
But can scroll
and center
each event
ah?
Slide 10
Slide 10 text
Professional Developer
ADRIAN
Oh… what he
wants is
scroll snap lah...
Slide 11
Slide 11 text
Slide 12
Slide 12 text
Could snap x, y or both!
css-at-cds.netlify.com/
css-tricks.com/practical-css-scroll-snapping/
Slide 13
Slide 13 text
I heard that...
Dark mode is
a thing right
now, can we
have that?
Really need
meh... Can I say
no...
Slide 14
Slide 14 text
Dark mode is
usually a
system setting.
Slide 15
Slide 15 text
Slide 16
Slide 16 text
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
...
});
Slide 17
Slide 17 text
I don’t want to
keep changing
my system
setting!
Use Chrome Dev Tools!
Professional Developer
ADRIAN
Slide 18
Slide 18 text
@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!
Slide 19
Slide 19 text
Nice.
Typical Customer
ALI
How can user
signup?
I want their valid
mobile number.
Slide 20
Slide 20 text
...
...
Slide 21
Slide 21 text
Okay, but...
Typical Customer
ALI
When I install
native app, it can
read my SMS and
autofill OTP. Web
can ah?
Slide 22
Slide 22 text
Because it’s a
native app, we
are building
web app bro!
Professional Developer
ADRIAN
Slide 23
Slide 23 text
Close the capabilities gap
with native to enable
developers to build new
experiences on the web
Project Fugu
developers.google.com/web/updates/capabilities
Slide 24
Slide 24 text
SMS Receiver API
Slide 25
Slide 25 text
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/
Slide 26
Slide 26 text
...
...
Add
autocomplete
Slide 27
Slide 27 text
async sendSMStoUser(phone: string)
{
await callApiToSendSMS(phone);
await receiveSMS();
...
}
Slide 28
Slide 28 text
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
}
Slide 29
Slide 29 text
SMS Receiver API - Regex
web.dev/sms-receiver-api-announcement/
const regex = /^[\s\S]*jevents: Your OTP is
([0-9]{6})[\s\S]*$/m
Slide 30
Slide 30 text
SMS Receiver API consideration
- Security Concerns
- Handle failure
- Wait time / Cancellation
web.dev/sms-receiver-api-announcement/
Slide 31
Slide 31 text
Great, what’s
next...
Typical Customer
ALI
Display attendee
list, sort and
group by name
first char.
Slide 32
Slide 32 text
- A
- Abu
- Ahmad
- B
- Bala
- Billy ...
Slide 33
Slide 33 text
Maybe I can add sticky
alphabet scroll effects.
(exceed expectations)
Professional Developer
ADRIAN
Slide 34
Slide 34 text
dl {
height: 100vh;
overflow-y: auto;
}
dt {
position: sticky;
top: 0;
}
Sticky alphabet
- A
- Abu ...
Slide 35
Slide 35 text
Different “levels” of stickiness!
css-at-cds.netlify.com/
Slide 36
Slide 36 text
Typical Customer
ALI
Each event should
have hover menu
& accessibility
friendly!
Slide 39
Slide 39 text
Typical Customer
ALI
- Accessibility: Failed!
- Not working in desktop &
screen reader.
- User not able to tab
through and open menu
Slide 40
Slide 40 text
...
div {
visibility: hidden;
}
article:hover > div,
article:focus-within > div {
visibility: visible;
}
Enable tabbing
Swap focus with
focus-within
Slide 41
Slide 41 text
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;
}
Slide 42
Slide 42 text
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?
Slide 43
Slide 43 text
It’s a website bro, but
maybe Fugu has
something.
Professional Developer
ADRIAN
Slide 44
Slide 44 text
Native File API
Access to system files or
folders and modify them
if granted permissions.
Slide 45
Slide 45 text
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.
Slide 46
Slide 46 text
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);
Slide 47
Slide 47 text
async saveFile(content) {
const writer = await fileHandle.createWriter();
await writer.write(0, content);
await writer.close();
};
Save file
Slide 48
Slide 48 text
Typical Customer
ALI
Let’s allow our users to
share event to Twitter,
Facebook native app.
Slide 49
Slide 49 text
Web Share API (Send)
Share files to other native apps.
Slide 50
Slide 50 text
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!
Slide 51
Slide 51 text
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.
Slide 52
Slide 52 text
"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
Slide 53
Slide 53 text
Typical Customer
ALI
Can you let user to
design the event
poster like the
Instagram?
Slide 54
Slide 54 text
Phew… lucky I just read
about
backdrop-filter.
Professional Developer
ADRIAN
Slide 55
Slide 55 text
Slide 56
Slide 56 text
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);
}
Slide 57
Slide 57 text
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?
Slide 58
Slide 58 text
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?
Slide 59
Slide 59 text
Watch Chrome Dev Summit (CDS) Talks
developer.chrome.com/devsummit/schedule
Slide 60
Slide 60 text
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/
Slide 61
Slide 61 text
web
Started from small group of coders
to 17M developers worldwide.
Slide 62
Slide 62 text
What do you think is
missing from the
web platform today?
Maybe it’s
coming
soon!
Slide 63
Slide 63 text
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