►
Description
We have all heard that joke about how if you can think of a word or phrase, then you can probably find a JavaScript library for it. This is why this month, each of the Jozi.js wizards will tell you a bit about a new JavaScript library (or browser API) that they have learned recently and why you should be excited about using it. Join us online 🌍 bring your questions, and your favourite libraries and APIs.
Agenda:
• 18:30 - Introduction
• 18:40 - Your new favourite JS library/API in 10 minutes
• 19:30 - End
Speakers and topics:
• Gergana Young - Web HID (https://web.dev/hid/)
• Ruddy Riba - tiptap (https://www.tiptap.dev/)
• Mike Geyser - web-vitals.js (https://github.com/GoogleChrome/web-vitals)
• Ryan Kotzen - check-types (https://www.npmjs.com/package/check-types)
💛Code of conduct: https://docs.google.com/document/d/1j-OfcTwYejEj-WiQq9F9AcVv2L-Ki81RuhFTjquDJyk/edit?usp=sharing
A
A
We
are
so.
We've
talked
quite
a
bit
about
this
topic
among
the
panel
people
that
you
see
today
and
we
feel
like
in
software.
There
is
quite
a
lot
of
issues
that
not
like
one
thing
fits
all
type
situations
and
we're
gonna
spend
the
time
tonight
just
saying
that
these
are
the
kind
of
problems
that
you
can
have,
and
these
are
the
kind
of
tools
or
libraries
that
you
could
use
to
kind
of
solve
those
problems,
or
at
least
yeah.
A
B
B
Of
course,
of
course,
so
I'm
going
to
be
talking
about
the
web
hid
api,
which,
as
mike
said,
is
a
browser
api,
but
first
before
we
get
to
what
it
actually
does.
Let
me
tell
you
a
little
bit
about
what
it's
there
for
so,
firstly,
what
is
hid
well.
Hid
stands
for
human
interface
devices
and
a
human
interface
device
is
pretty
much
any
device
that
can
take
input
from
a
person
to
the
computer
and
provide
output.
B
So
things
like
keyboards
masses
are
game,
pads
game
controllers,
all
of
those
things
all
operating
systems
have
a
hid
protocol
which
they
implement
it's
a
standardized
protocol
and
when
I
say
operating
systems
I
don't
just
mean
windows
and
mac
and
computer
operating
systems.
I
mean
all
operating
systems,
including
all
consoles
playstations,
nintendo
switches,
all
of
those
things
they
use
the
same
protocol
to
use
their
input
devices
and
originally
the
hid
protocol.
B
B
You
don't
have
to
change
anything,
but
then
we
get
other
devices
which
are
slightly
different,
they're
too
new
or
too
old
or
too
uncommon
to
be
used
on
a
certain
operating
system
and
those
devices
implement
their
own
standards
for
certain
inputs
and
outputs.
So
if
you
take,
for
example,
a
playstation
controller
and
a
nintendo
switch
controller,
the
way
you
push
the
buttons
on
each
of
those
is
different.
He's
implemented
differently
because
they
were
implemented
by
different
developers
and
therefore
they
only
work
on
that
console.
B
But
sometimes
we
want
to
make
them
work
on
our
computers,
because
you
know
it's
fun:
to
connect
your
nintendo
switch
controller
and
play
the
dinosaur
game
with
the
nintendo
switch
controller,
because
you
can
do
that
and
if
you
go
to
the
link,
which
is
in
the
in
the
description
of
the
video,
I
think
you
can
see
an
implementation
of
that
that
someone
did,
and
if
you
have
a
nintendo
switch
controller,
you
should
try
it
out.
It's
quite
fun.
You
have
to
actually
jump
when
the
dinosaur
jumps
anyway.
B
Second
problem
is
that
there's
very
good
support
for
some
devices,
so
some
devices
are
very
old
back
in
the
day
when
we
all
used
to
play
lan
games,
we
used
to
get
those
face:
fancy
gamepad
controller
things
that
you
could
program
yeah
most
games
these
days,
don't
support
those
anymore.
It
would
be
cool
if
you
could
actually
still
support
them,
because
you
know
those
things
were
pretty
cool.
B
What
is
the
web
hid
api?
Well,
it's
a
browser.
Api,
like
I
said
earlier,
which
means
it's
supported
in
browsers,
we'll
talk
about
which
browsers
a
little
bit
later,
because
it's
still
relatively
new
and
experimental,
but
it
pretty
much
uses
the
hid
protocol
to
allow
you
access
to
the
device
and
to
allow
you
to
receive
inputs
and
provide
outputs
to
the
human
interface
device
using
javascript,
which
is
the
best
part
right,
because
we
all
know
javascript
and
we
know
how
to
use
it
and
let's
talk
about
how
it
works.
B
B
There
are
two
ways
of
accessing
the
device.
That's
the
code
that
you
see
on
the
screen
right
now.
The
one
is
by
calling
request
device.
So,
as
you
can
see
it's
available
on
navigator,
you
can
check
if
hid
is
on
navigator
before
doing
this,
so
that
you
don't
try
to
run
this
in
a
browser
that
doesn't
support
it.
It
just
won't
work
anyway,
but
the
request
would
prompt
the
user,
so
a
little
pop-up
will
come
up
and
prompt
you
to
select
the
device
you're
requesting.
B
You
do
have
to
provide
some
photos
for
that
before
you
can
access
those
devices.
You
can't
just
request
all
of
the
hid
devices
that
are
connected
to
the
computer.
The
photos
you
have
to
provide
are
the
vendor
id
and
product
id
of
the
device.
There's
a
way
to
find
that
it's
relatively
easy
and
I'll
share
a
link
a
little
bit
later
to
a
talk.
B
B
B
We
have
to
open
a
connection
to
the
device.
We
just
do
that
by
calling
device.open
and
then
we
can
start
listening
for
the
input
report.
Events,
the
messages
sent
between
the
hid
devices
and
the
computer
are
called
reports,
input
of
output
reports
and
they're,
pretty
much
unsigned,
integer
arrays
with
a
bunch
of
data
in
them
they
have
actually
three
parts
to
them.
They
have
a
device
id.
So
you
can.
If
you
have
multiple
devices
connected,
you
can
tell
them
apart.
B
So
the
if
you
have
both
like
a
playstation
controller
and
a
nintendo
controller
or
something
they
have
a
report
id
which
is
defines
which
part
of
the
device
was
used.
So
what
you're,
using
the
little
navigation
stick
or
the
buttons
or
the
whatever
it
was,
and
then
they
have
a
bunch
of
data
and
you
can
output
that
data
display
it
unsigned
into
jra.
B
You
have
to
do
a
little
bit
of
bitwise
maths
to
figure
out
what
the
data
is
saying
and
then
you
figure
out
how
the
device
works
based
on
that
for
output
stuff.
So
that's
input
from
the
device
into
the
computer
for
output
stuff.
It's
things
like
making
the
controller,
vibrate
or
changing
the
lights.
So
one
of
the
other
examples
on
the
link
that
you
see
is
a
thing
that
changes
your
max
mac,
keyboard's
lights.
B
It
makes
them
blink,
it's
a
little
bit
scary
with
the
first
time
you
try
it
because
it's
a
website
accessing
your
mac's
keyboard,
but
yeah.
It's
it's
quite
cool.
So
that's
that's
the
kind
of
output
stuff
you
do.
The
thing
you
have
to
be
careful
of
with
the
output
things
is
that
you
start
when
you
start
accessing
the
output
parts
of
the
device.
If
you
send
the
wrong
set
of
data,
you
can
damage
the
firmware
on
the
devices.
B
B
B
So,
but
for
what
you
can
send
to
the
actual
things
you
can
find
it
online?
It's
and
it's
people
who've,
actually
accomplished
those
things
by
trial
and
error,
and
that's
one
of
the
things
that,
for
those
of
you
who
know
me,
you
know
that
I
talk
about
these
web
apis,
a
lot
with
the
blue
web,
bluetooth
and
web
usb
apis.
B
So
what
those
device
ids
and
the
report
ids
are,
so
you
can
identify
them
and
then
find
descriptions.
So
it's
I
think
it's
a
little
bit
easier
to
use
than
those
other
apis,
because
they
have
those
options
for
actually
listing
the
features
that
are
on
the
device.
Rather
than
you
having
to
go
and
dig
them
out
using
other
listeners
and
apps
and
things
like
that
yeah,
that's
how
and
then,
on
that
same
note,
how
is
it
different
to
web
bluetooth
and
web
usb?
B
B
So
it's
different
because
actually
web
bluetooth
and
web
usb
don't
support,
hid
devices
for
security
reasons
so
because,
where
bluetooth
and
web
usb
are
actually
a
bit
less
secure,
they
have
less
security
implementations.
They
don't
support
the
hid
devices
because
it
would
be
an
easy
way
for
someone
to
create.
B
B
Cool
now
problem
with
experimental
apis
is,
they
are
experimental,
so
they
haven't
been
approved
by
the
web
standards
committee
and
unfortunately,
they
are
only.
This
api
is
currently
only
supported
in
chromium-based,
browsers,
so
chrome,
edge
and
opera
are
the
only
ones
who
support
it,
because
it's
it's
built
into
chromium
as
a
base.
Other
operating
I
mean
browsers,
haven't
specified
whether
they're
going
to
support
it.
Safari
is
always
iffy
on
these
things.
Firefox
usually
supports
things
that
get
accepted
into
the
web
standards.
B
Yeah.
So
we'll
see
how
that
goes.
But
this
is
really
really
new.
I
think
the
first
proper
version
of
it
was
released
at
the
end
of
last
year,
so
it's
still
a
lot
newer
than
most
of
the
other
ones
as
well
right
and
then
one
last
thing
I
need
to
mention
is
security,
so
I
mentioned
the
whole
keylogger
thing
and
how
you'd
be
skeptical
about
allowing
a
website
to
access
a
device,
and
that's
the
nice
thing
about
a
lot
of
these
apis
is
that,
firstly,
they
they're
always
user
triggered.
B
So,
in
order
for
your
website
to
access
a
device,
there
has
to
be
a
user
action
that
initiates
the
scanning
for
the
device.
So
there
has
to
be
a
click
or
something
like
that,
and
it
can't
just
be
a
click
from
inside
javascript.
It
has
to
be
an
actual
interaction
from
the
user,
so
they
have
to
click
a
button
to
say,
scan
for
devices.
So
that's
the
first
line
of
defense.
It's
still
not
a
great
line
of
defense,
but
but
it's
there.
B
C
So
I've
got
a
question
I'm
going
to
ask
so
like
I
just
need
to
be
sure.
I'm
hearing
this
correct
a
website
can
probably
have
a
button
on
the
page
that
says,
click
this
button
for
me
to
do
awesome
things
with
your
with
your
keyboard
and
you're
like
yeah,
that
sounds
cool,
I'm
going
to
click
that
button.
Are
you
sure
yes,
and
then
it
breaks
your
whatever's
connected
to
your
your
computer,
like
is,
does
that?
Is
that
really?
B
No,
no,
so
so,
look
like
the
warning.
The
warning
that
I
read
about
for
the
outputs
thing
was
was
someone
I
think
who
was
just
trying
to
not
get
in
trouble,
so
I
don't
think
you
would
break
it
completely.
So
I
think
I
think
the
main
thing
that
it
said
is
that
it
might
struggle
with
firmware
updates
in
future,
so
like
it,
won't
it
won't
destroy
it.
It's
just
it
just
might
may
sell
slightly
so
like
the
thing
slightly
inconvenient.
B
So
the
thing
I'm
worried
about
with,
like
the
joy-con
controllers,
is
that
it
connecting
them
to
your
computer
like
this,
if
you're
experimenting
and
changing
the
data
you're
sending
to
them
that
you
make
it
so
that
they
can
connect
to
your
actual
nintendo
stuff.
Like
that,
I
think
that
that's
the
kind
of
problem
you
could
introduce,
I
don't
think
you
could
actually
like
break
it
completely.
Destroy
your
max
keyboard.
You
know.
C
C
A
B
So
so
it
so
it
does
it.
You
can
list
all
of
the
things
that
are
that
are
connected
and
all
of
the
features
that
that
thing
has
so
so
like,
for
example,
when
you
connect
a
device
in
that
code
snippet
where
all
of
those
different
report
ids
they
have
like
descriptions
so
so
that
this
is
the
keys.
This
is
the
lights.
This
is
the
little
controller.
Stick
thing
whatever
it's
called.
I
don't
even
know
what
it's
called,
but.
D
C
Cool,
if
there
are
any
questions,
please
feel
free
to
smash
them
in
the
chat.
We'll
bring
up
the
question
up
on
screen
so
just
make
sure
you're
comfortable
having
your
your
question
brought
up
on
screen
before
asking
it,
and
I
suppose
we
thanks
jerry
that
that's
terrifying
and
super
cool
and
like
both
at
the
same
time,
but
I
think.
C
A
Yes,
I
I
wanted
to
ask.
Ideally
these
are
technologies
that
we,
you
know
put
in
business
or
in
our
lives,
to
improve
the
way
we
currently
do.
Whatever
we're
currently
doing
right
now,
and
most
of
the
examples
that
you
have
mentioned
were
like
some
game
related,
some,
like
you
know,
switch
in
the
house
related.
B
Yes,
so
this
is,
I
mean
a
lot
of
this
is
mostly,
I
would
say,
for
things
like
building
games
that
run
in
browsers
and
accessing
for
now
at
least
and
accessing
the
devices
that
that
you'd
use
for
gaming
purposes.
However,
I
do
think
that
there
are
certain
hid
devices
that
we
would
eventually
get
to
a
point
where
they're
not
cross-platform
enough
for
us
to
be
able
to
actually
find
the
drivers
for
them.
C
C
A
Yes,
I
am
going
to
talk
about
something
called
tipped
app
and
this
concept
that
actually
is
not
super
foreign
to
everyone,
especially
if
ever
you've
used
any
like
code
review
stuff
like
gitlab
and
try
to
put
some
text
and
want
to
customize
it
and
make
it
bold
and
make
it
do
all
those
things.
These
things
are
called
rich
text,
editors
that
a
lot
of
organizations
use
to
allow
their
customers
to
customize
content
and
one
of
them
and
fairly
new
is
called
tiptap.
A
The
second
thing
is
that
it
is
framework
agnostic,
meaning
that
you
don't
necessarily
have
to
stick
to
react
or
angular.
It
comes
with
vue.js
out
of
the
box
and
vanilla
javascript,
so
you
can
just
like
see
where
you
land
from
that,
but
you
can
then
make
it
work
for
other
frameworks
as
well.
So
it's
yeah
kind
of
cool
in
that
sense
yeah.
So
let's
go
on
to
the
next
play,
so
we
can
talk
about
how
you
can
actually
start
using
it.
A
So
if
you
don't
want
text
to
ever
be
bold,
we
don't
want
to
shove
that
down
your
throat
kind
of
situation,
but
the
starter
kit
then
gives
you
that
out
of
the
box.
So
as
soon
as
you
add
that,
then
you
already
like
miraculously
have
an
editor
that
you
can
modify
and
like
put
good
stuff
in
and
like
gitlab
actually
uses
this,
which
is
also
a
surprise
and
a
good
find,
because
I
work
a
lot
with
gitlab
and
okay.
I
am
going
to
reserve
my
comments,
but
it
is.
A
It
is
very
widely
used
in
the
wild
outside
of
the
fact
that
it's
actually
in
beta
it's
open
source
and
they've,
got
really
really
cool
developers
behind
it,
trying
to
use
it
and
make
it
really
great
and
it
has
cool
documentation.
I
must
say
the
version
two
tip
tattoo
is
so
much
better
in
documentation
than
the
previous
one.
So
really
it's
really
quick
to
start
with
this
library,
and
I
really
like
how
it's
like
easy
to
customize.
A
A
Like
library,
I
mean,
and
you
can
like
style
it
the
way
you
want
to
do
it,
and
I
feel
like
that
kind
of
freedom
when
it
comes
to
these
kind
of
things
because,
like
you,
don't
want
to
be
highlighting
content
and
it's
not
behaving
like
all
the
other
content
in
all
the
other
places
that
you
expect
it
to.
So
it's
very
important
to
have
that
consistent
user
interface.
A
You
can
also
allow
keyboard
shortcuts
so
again,
when
you're
trying
to
type
something
in
your
content,
you
want
to
be
able
to
still
do
what
you
would
do
in
word.
Also
in,
like
whatever
text
which
text
editor
you
add
in
your
application.
It
has
mobile
support
and
also
which
is
amazing,
is
that
you
can
import
and
export
html
and
json.
A
So
you
are
not
really
typed
into
only
working
with
html
like
most
other
rich
text
editors,
but
you
can
actually
work
with
the
json
structure,
which
makes
life
a
little
bit
easy
because
there's
quite
a
lot
of
information.
That's
coming
at
you,
and
ideally
you
want
to
be
able
to
know
that.
Okay,
I
can
get
this
kind
of
schema
to
do
these
kind
of
things
and
all
of
that
personal
experience,
we
do
quite
a
bit
of
this
content-
manipulation
type
behavior
in
the
current
organization
that
I'm
in
and
basically
after
that
content.
A
We
need
to
save
that
content
some
way
and
it's
really
hard
to
make
sure
that
whenever
that
content
is
read
back
again,
it
actually
is
formatted
nicely
into
the
page.
You
get
situations
where,
like
things
that
were
in
line
when
you
were
editing
your
car,
your
content
decided
to
split
into
multiple
lines
when
you
are
in
the
like.
A
Whatever
way
that
information
is
displayed
so
handling,
that
kind
of
information
with
care
is
really
important,
because
what
the
user
see
is
what
they
expect
to
get
at
the
end
of
the
thing,
and
this
is
pretty
much
what
rich
text
editing
is
all
about
again.
The
cons
of
this
is
that
it's
in
beta
phase
and
we
in
a
lot
of
people,
are
already
using
it,
meaning
that
they
have
a
really
like
huge
confidence
in
allowing
it
to
be
part
of
like
their
money
making
organizations.
A
So
I
don't
necessarily
would
name
it
as
a
con.
I
really
struggle
to
also
find
it
a
con
for
tip
tattoo,
but
another
thing
is
that
it's
based
on
something
called
purse
mirror
prisoner
is
also
like
somewhat
a
rich
text
editor,
but
is
really
really
really
like
in
detail
and
you
might.
It
hasn't
really
like,
like
a
really
high
learning
curve,
for
you
to
start
actually
working
in
it
and
like
to
try
to
abstract
it.
A
A
little
bit,
but
you
can't
avoid
having
to
go
as
deep
as
to
prose
mirror
to
do
some
of
that
customized
stuff
because,
like
you,
can
have
extension
on
how
you
add
images
into
the
text.
If
you
want
those
images
to
be
dragged
and
dropped
and
deleted,
you
can
add
those
extension
to
the
rich
text
editing.
But
sometimes
you
have
to
go
really
deep
within
prose
mirror
to
actually
get
these
features
working,
and
I
feel
like
it's
a
slight
of
a
miss
from
a
tip-top
perspective
and
that's
why
it's
a
con
anyway
yeah.
C
Everyone
to
please
ask
your
questions,
because
I'm
sure
you
have
some,
I
think,
a
good
rich
text.
Editor
is
always
like
you're
not
going
to
use
it
for
every
project,
but
you
are
going
to
use
one
at
some
point
in
time
and
it's
a
really
difficult
problem
to
mean
to
to
reinvent
yourself
actually
and
there's
no
value
in
doing
it.
C
So,
and
I
only
have
one
question
myself
and
I
hate
myself
for
being
the
one
to
ask
this,
but
I
have
to
is
that
like
if
you
had
a
react
front
end
and
you
wanted
to
use
tip
tap
too
right?
How
would
you?
How
would
you
use
it?
Well,
what
does
that
interface
look
like?
Is
it?
Is
there
just
a
hook
that
feeds
into
another
component
or.
A
I've
never
actually
tried
to
work
with
it
on
a
react
application,
but
I
think
that
you
could
just
like
import
the
editor,
get
the
same
starter
kit
and
then
start
mapping
the
functions
that
are
there
yeah.
Please
go
there
yeah.
So
you
see
I
it's
so
it's
such
a
shame
that
it
doesn't
have
line
numbers
but
instantiating
that
editor
like
that
and
then
and
editor
does
give
you
content.
A
So
that
thing
is
literally
going
to
put
hello
world
in
a
paragraph
and
then
you
can
start
in
the
html
start
adding
buttons,
and
I
have
no
screenshot
for
this
as
well,
but
the
you
would
have
like
a
button
tag
and
in
that
button
you
can
then
define
a
bold
function
and
then
it
will
be
bold.
So
you
can
highlight
the
content
that
you
see
there
and
then
click
on
that
button,
and
it
will
be
bold,
so
it
will
be
probably
easier
with
the
screenshot
but
yeah
okay.
A
Yes,
to
an
extent,
I
think
there
is
in
the
editor
functions
like
events
and
views
so
that
whenever
a
user
actually
puts
information,
you
can
then
read
those
from
that.
It
has
a
state,
it
has
a
schema.
It
has
all
these
things
and
that
that
state
you
it
like
keeps
on
inputting
information
that
it's
probably
receiving
into
the
front
end,
and
then
you
can
manipulate
that
kind
of
information.
That's
as
I
think
that
was
how
it
would
work,
but
yeah.
A
It
yeah
I.
I
also
think
that
it
is
not
light
rich
in
terms
of
like
megabytes
and
all
of
that,
but
it's
like
it
doesn't
require
a
lot
of
learning
compared
to
like,
let's
say,
first
mirror,
for
example,
it's
almost
straightforward
if
and
and
I'm
biased
to
this,
because
I
have
been
using
it
for
a
bit
for
some
time.
A
You
know
not
a
long
enough
time
for
me
to
know
in
depth
knowledge
about
it,
but
like
enough
to
to
know
that
when
I
wanted
to
learn
it,
it
was
kind
of
like
okay.
I
get
that
I
get
that
you
know.
I
didn't
have
to
work
hard
to
get
everything
started.
It
could
have
been
worse
based
on
how
prismera
is,
which
is
the
library
that
it's
built
on
top
of
so
yeah
cool.
B
A
That
is
a
really
good
question
jerry
because,
yes,
that's
what
we're
currently
doing
in
my
phone
trying
to
upgrade
to
tip
tap
two
from
situp
one,
and
there
is
a
lot
of
major
changes,
so
tip
top
one.
You
used
to
have
to
specifically
specify
editor
content
within
your
html,
so
that
it
knows
that
this
is
where
the
content
goes.
While
now,
all
you
have
to
do
is
pretty
much
create
that
new
instance
and
then
things
automatically
automatic
kelly
work
right.
A
We
have
created
quite
a
few
extensions
at
the
company
because
we
are
trying
to
do
cool
things
with
the
content
that
we
are
trying
to
customize,
and
that
is
a
pain
now,
because
a
lot
of
things
have
changed.
One
of
them
is
that
tip
tip
one
was
class
based
and
now
we
are
functional
component
based
in
tiptop2,
so
all
of
that
needs
to
change,
meaning
that
the
way
we
now
actually
create
the
entire
thing
has
to
change.
A
We
have
new
functions,
we
have
new
event,
handlers
that
actually
bring
a
lot
of
benefit
because
they
are,
you
know,
I'd
say
like
easy
to
integrate
the
documentation
on.
It
is
better
so
yeah,
it
has
been
a
headache
and
a
half
to
try
to
keep
that.
The
other
thing
that
was
a
gotcha
was
that
both
of
them
can't
exist,
meaning
that
we
have
a
gigantic
marriage
request.
That's
sitting
somewhere.
A
C
A
It's
it's
gonna
be
massive
and
it's
like
at
the
core
of
some
of
the
things
that
we
do,
but
you
know
we
are
great
at
doing
this
been
doing
for
a
long
time.
We've
got
this,
but
yeah
it's
it's.
It
has
been
quite
a
challenge
to
move
things
across
because
they
have
really
improved.
So
it's
a
really
good
step
forward
for
the
library.
C
I'm
going
to
take
very
little
time,
so
we
can
get
on
to
ryan's
I'm
staying
on
brand.
For
those
that
know
me,
I
like
making
things
go
fast,
so
so
I
thought
I
would
talk
about
my
favorite
library,
which
is
something
that
I
use
in
production
on
a
big
site.
I
use
every
single
day.
It
is.
It
is
the
the
first
tool
that
I
reach
for
in
the
toolbox
at
the
moment.
So,
like
I
promise
you
I
I
love
this.
I
have
spent
a
lot
of
time
in
this
library
and
it's
awesome
now.
C
Anybody
that's
tried
to
do
any
kind
of
performance.
Stuff
would
have
run
a
lifetime
report
or
something
at
some
point
in
time
and
then
maybe
learn
some
stuff
from
the
light.
Hustle
report,
which
is,
is
lab
data
or
a
synthetic
test.
So
it's
faking
a
user
interaction
loading,
the
page
right,
so
you
get
some
stuff
from
it.
You
get
some
stuff
to
optimize
for
you'll,
be
like
okay
cool.
C
Take
a
look
at
pagespeed
insights,
because
google
tells
you
that
you
need
to
look
at
real
user
data,
so
field
data,
not
lab
data
and
actual
results,
as
opposed
to
synthetic
tests,
which
can
only
do
so
much
and
when
you
look
at
that
you're
like,
but
but
my
cls
score
is
so
awful
in
live
or
my
this
data
looks
terrible
and
google
thinks
that
my
performance
is
awful,
but
my
lighthouse
report
looks
okay
like
it's.
I
don't
I
don't
know.
I
can't
marry
these
two
worlds
together.
C
So
so
maybe
that's
you
and
then
maybe
you're
like
okay
cool.
Well,
what
real
user
monitoring
stuff
is
there
and
you
go,
take
a
look
at
either
speed,
curve,
lux
or
new
relic,
or
I
think
I
think
fastly
has
one.
I
think
akamai
has
one
and
you
look
at
the
exorbitant
insane
pricing
and
you
look
at
your
site,
whatever
it
may
be,
or
your
product
owner
who's
trying
to
save
as
much
money
as
possible
and
you
think
to
yourself.
C
C
So,
like
you
have
to
trust
that
they're
measuring
things
correctly
right
now.
I
have
trust
issues,
big
trust
issues,
which
is
part.
The
reason
why
I
love
wherever
I
know
so.
This
was
released
by
google
by
the
the
performance
team.
It's
it's
tiny,
absolutely
time,
minuscule,
less
than
a
kilobyte
worth
of
code
and
it's
designed
to
be
modular,
so
you
can
plug
into
it
now.
The
crucial
part
is
that
this
is
calculating
all
of
those
real
user
metrics
stuff,
the
same
way
that
google
calculates
it
when
they
measure
it
and
report
it
to
cracks.
C
C
Now,
I'm
going
to
show
you
some
code
and
I
do
have
line
numbers
rudy,
so
there's
that
I
may
not
be
as
slick
as
everybody
else,
but
I've
got
lined
up,
hey
wow,
so
the
web
vitals
library
you
can
either
import
it
from
unpackage
or
you
can
import
it
as
an
npm
module
and
build
it
yourself
and
like
I've,
just
shown
cls,
fid
and
lcp
here,
but
there's
also
fcp
and
ttfb,
and
they
also
like
tested
the
new
stuff.
That's
coming
through.
That
might
be
included
in
the
bike.
B
C
So
it's
just
a
case
of
importing
those
functions
from
the
library
and
then
once
you
call
them,
it
takes
in
a
a
almost
a
callback
function
right
and
that
callback
function
has
an
object
on
it
and
that
object
has
a
bunch
of
data.
So
it
tells
you
like
what
type
of
event
or
vital
event
is
coming
through.
What
the
value
is,
what
entries
constitute
that
and
a
whole
bunch
of
of
of
other
data
like
really
really
detailed
stuff
I'll
give
a
use
case
of
like
a
real
world
use
case
that.
C
That
we
do
and
then
you
can,
you
can
do
stuff
like
log
them
out.
You
can
save
it,
you
can
aggregate
them
and
crucially,
crucially,
you
can
do
things
like
use
your
analytics
because
you
probably
have
signed
up
for
some
kind
of
analytics,
even
if
it's
google
analytics
right,
so
you
can
use
google
analytics,
which
you
can
get
virtually
for
free
and
then
just
take
all
of
this
data
and
ship
it
to
wherever
your
business
users
are
making
the
decisions
right.
C
So
a
product
cares
about
the
seo
seo
impact
or
which
pages
are
more
expensive
or
valuable
or
click
through
or
conversion
rate
put
performance
data
next
to
it
right
and
have
people
look
at
like
the
ransom
sense
of
it
alongside
performance
data
and
correlate
those
two
trends
together.
That's
the
quickest
easiest
way
to
convince
your
business.
That
performance
is
a
feature
by
the
way
and
it's
easy
like
I'm,
not
I'm
not
joking.
I
copied
and
pasted
this
code
from
the
github
library,
it's
really
cool,
then
this
can
go
really
really
in-depth.
C
D
C
Stuff,
like
that,
it's
small,
it's
lightweight
it's
fast
and
you
can
get
access
to
lots
of
real
user
data
that
you
can
store
virtually
for
free
and
really
get
a
handle
on
what
your
users
are
experiencing
from
performance
perspective,
and
this
is
the
best
way
to
actually
make
your
site
faster
or
this
kind
of
data.
Using
this
data
over
you
know
synthetic
tools.
A
A
C
No,
I
think,
that's
a,
I
think.
The
reason
why
is
because
your
javascript
cannot
access
across
the
domain
into
the
iframe?
If
that
makes
sense,
you
can't
like
it's
a
separate,
separate
url.
It's
a
separate
origin.
Essentially
the
two
get
sandboxed
from
one
another,
so
like
no
javascript
code
is
ever
going
to
be
able
to
give
you
that
you
would
need
browser
level
instrumentation
to
be
able
to
pick
up
those
values
so
like
a
plugin
might
be
able
to,
but
I
don't
know
if
it
would
or
you'd
have
to
script
the
browser
directly
externally.
A
A
A
C
That's
a
wonderful
question
and
like
so
web
vitals.js
doesn't
do
that,
but
you
can
use
the
performance
observer
and
you
can
progressively
enhance
see.
Well,
does
the
performance
server
exist?
Is
the
the
browser
at
least
new
enough
to
give
me
this
kind
of
information?
And
then
you
can
ask
for
network
connection
speed
information
from
the
browser
agent
and
then,
when
you
send
the
google
analytics
stuff,
you
can
send
that
with
as
well.
C
C
Fingerprint
level
stuff,
because
that's
the
other
part
right,
you
don't
want
to
be
able
to
instrument
and
fingerprint
individual
human
beings,
but
you
can
get
enough
to
say.
Oh
this
person
was
on
a
bad
connection
and
this
experience
this
experience
was
tied
to
this
bad
connection
very
useful
and
like
like
it's
a
lego
block
right
and
it
fits
into
so
many
things
because
you
can.
You
can
do
this
on
a
you
know
on
a
request
idle
callback,
so
it
doesn't
impact
your
page
load.
C
B
So
I
have
a
quick
question
too,
what
you
were
talking
about
like
using
this
kind
of
thing
for
very
large
websites,
so
you
can
get
to
real
user
data
because
you
have
so
many
different
users,
but
would
something
like
this
be
useful,
even
just
like,
as
you
are
starting
out
like
just
to
get
on
top
of
the
performance
issues
before
you
even
get
to
that
point?
Where
you
have
millions
of
users.
C
C
C
B
C
C
D
So
has
this
ever
happened
to
you?
Sorry,
no!
Let's,
let's
put
the
infomercial
stuff
aside,
so
the
library
I'm
going
to
be
talking
to
you
about
today
helps
us
with
validation.
So
a
lot
of
the
time.
What
will
have
happened
is
you've
written
a
function
and
you've
made
certain
assumptions
about
what
what
information
is
actually
being
passed
in
and
what
the
types
are
of
those
for
those
of
you
who
are
using
typescript
and
think
you're
safe
I've
got
some
bad
news.
Typescript
doesn't
actually
help
with
runtime
types.
D
D
So
I've
got
a
function
over
here
and
if
you
hate
my
theme,
then
sorry
about
that.
If
you
love
it
and
you
want
to
get
get
it
set
up,
I've
got
a
github
gist
that
I'll
put
in
the
show
notes
a
bit
later,
but
yeah
back
to
what
we're
doing
so.
We've
got
a
function
over
there
takes
in
a
value
that
could
potentially
be
a
number,
and
we
want
to
check
and
make
sure
in
this
particular
instance.
D
It
is
only
valid
if
the
number
is
exactly
5.,
so
this
is
a
bit
of
a
contrived
example
and
I
could
have
just
checked
for.
Is
it
strictly
equal
to
five
right
at
the
start,
but
I'm
going
to
just
show
you
some
of
the
things
that
we
might
check
and
in
this
particular
instance,
I
want
to
throw
an
error
as
soon
as
it's
invalid.
D
So
it's
not
like
I'm
going
to
do
some
type
of
error,
recovery
and
also
by
the
way,
while
we're
talking
about
errors,
one
of
the
upcoming
shows
is
going
to
have
a
lot
of
information
on
how
to
handle
errors.
So
look
out
for
that,
if
you're,
if
you're
into
using
errors,
which
you
should
be
don't
throw
strings,
please
cool.
So,
for
example,
we
check
the
type
to
make
sure
that
it's
a
primitive
specifically
of
type
number.
D
We
use
the
modulus
function
to
check
if
it's
auto,
even
we
use
the
built-in
number
dot
is
integer
and
you
can
see
that
this
code,
you
know
if
you
were
going
to
do
some
complex
logic
in
this
function.
You've
taken
up
a
whole
bunch
of
lines
just
doing
some
validation
on
what's
actually
being
passed
in
and
as
we
go
to
the
next
slide.
What
we'll
see
is
using
across
earth
across
env
check
types
library
so
to
make
this
a
little
bit
cleaner.
Well,
actually,
a
lot
cleaner.
So
let's
go
to
the
next
slide.
D
So
here
you
can
see
what
the
library
has
built
in
so
I've
taken
the
exact
same
code.
It's
the
same
logic.
I've
just
done
it
using
the
library
so
you'll
see
here
we
use
check
types.assert
and
what
that
does.
Is
it
tells
the
library
that
if
it
fails
the
check,
it
must
throw
an
error
and
if
you
look
at
line
14
you'll
see
I've.
I'm
also
able
to
provide
a
custom
error
message.
D
If
I'm
not
happy
with
the
error
message
that
the
library
has
built
in
and
I
can
inject
all
sorts
of
values
in
there
using
templated
strings,
which
I
love
and
the
nice
thing
is,
if
you
don't
want
to
throw
an
error,
say,
for
example,
you're
going
to
use
some
sort
of
logic.
So
if
this
thing
wasn't
a
number,
maybe
it
was
a
string.
Let
me
try
and
parse
it
to
a
number
you
can.
You
can
just
take
out
the
dot
assert,
so
it
uses
a
fluent
api.
D
In
this
particular
instance,
I've
just
included
the
some
of
the
some
of
the
methods
we
can
use
on
the
number
type
specifically,
but,
as
I'll
show
you
in
a
little
bit,
the
library
has
a
lot
of
different
primitives
and
objects
supported.
So
it's
very
useful
one
of
the
slight
drawbacks
is
it's
gonna,
add
7.2
ks
to
your
your
bundle,
size,
unminified
gzip
that
goes
down
to
2.6
k.
D
So
it's
still
very
fairly
small,
and
you
know
I'm
a
big
fan
of
start
from
a
place
where
your
code
is
as
maintainable
as
possible
and
from
that
position
you
can
get
to
performance.
If
you
need
it
and
in
this
particular
instance,
I
think
that
the
trade-off
of
having
your
code,
a
lot
more
readable,
is
well
worth
the
effort
of
having
7.2
ks
in
your
in
your
bundle
size
if,
if
you're
not
minifying,
mike's
gonna
have
some
words
to
say
about
that.
D
We'll
we'll
have
a
fight
about
that
a
little
bit
later,
all
right
so
yeah,
there's
some
really
useful
things
like
between
you
can
check
that
a
number
is
greater
than
positive,
integer.
Even
odd.
There's
a
bunch
that
I
didn't
include
here,
but
if
you
go
to
the
docs
which
are
linked
linked
there
at
the
bottom
of
the
slides
on
npm,
you
can
read
through
that
all
right.
So
let's
go
to
the
next
slide
and
I
will
take
you
through
what
else
is
included
like
this
is
again
not
comprehensive.
D
I
just
wanted
to
highlight
a
few
things.
Oftentimes.
We
want
to
check
if
something's
null,
specifically
or
undefined,
specifically,
rather
than
checking.
Is
it
just
falsy
and
there's
also
a
shorthand
for
us,
for
if
it
is
no
or
undefined
and
that's
called
assigned
and
that's
useful
so
that
you
don't
have
to
include
low
dash
for
argument's
sake,
for
there
is
no
check
if
you
aren't,
if
you
already
have
this
involved
in
your
in
your
package,
there's
some
really
nice
string
assertions
that
you
can
use,
for
example,
empty
string,
non-empty
string
does
it
contains?
D
D
It's
either
a
boolean
or
not
a
function
checks
if
it's
a
function
or
not-
and
it
also
has
does
this
thing
throw-
which
is
quite
quite
interesting,
so
you
can
check
check
for
that
if
you
need
to
the
object
keyword
so
that
that,
basically
you
know
you
want
to
see,
is
this
object
empty,
so
is
it
just
like
no
keys
have
been
assigned?
Is
it
a
non-empty
object?
Is
it
then-able
I.e?
D
Is
it
a
promise
or
following
the
particular
promise
practice
you
can
use
instance
that
basically
uses
the
type
of
sorry
instance
of
under
the
hood
contains
is
useful
to
check
if
it
contains
a
specific
value
on
any
of
the
keys.
I
haven't
had
a
chance
yet
to
check
if
that
walks
the
whole
object
tree.
I
suspect
it's
only
the
top
level
and
then
obviously
contains
key
that'll
check.
If
your
object
has
that
specific
key
and
then
like,
which
is
basically
doing
duct
typing,
to
see
if
two
objects
are
duck
equivalent.
D
There
is
the
array
method,
so
you
can
use
to
check
for
an
empty
array
or,
if
something's
array-like,
so
for
those
of
you
who've
ever
done
some
dodgy
stuff,
where
you're
using
the
arguments,
keyword,
you'll
notice,
that
it's
kind
of
an
array,
but
it
actually
isn't
an
array.
It's
array-like,
there's
also
iterable
on
that
and
then
the
date
keyword
helper
is
just
a
thin
wrapper
around
his
date
for
for
dates.
D
So
I
just
wanted
to
point
out
a
note
on
validating
very
complicated
objects,
so
if
you've
got
all
sorts
of
deep
nested
properties
on
your
object,
and
you
want
to
check
very
specific
rules,
this
is
often
used
when
you
are
building
an
api
and
you
want
to
validate
what
the
user
has
posted
or
put
through
to
your
api,
and
if
you
find
that
you're
doing
this,
then
check
types
is
not
the
appropriate
library.
For
that,
I
would
highly
recommend
you
check
out.
D
Json
schema
and
in
particular
the
ajv
library,
is
one
of
the
best
that
I've
used
for
using
json
schema.
So
it's
an
actual
open
format
for
those
of
you,
crazy
kids
like
me,
who
use
mongodb
you'll,
probably
already
be
fairly
familiar
with
json
schema.
It's
how
we
do
semi-structured
data
in
j
in
and
that
allows
us
to
write
fairly
complicated
business
rules
around
how
the
data
should
actually
be
structured
and
under
what
conditions
is
it
actually
valid?
You
can
use
json
schema,
also
to
do
default,
values
and
type
coercion.
C
C
I'm
going
to
try
and
summon
the
spirit
of
karen
and
say:
well,
it's
less,
it's
less
a
question
and
more
a
comment,
and
I
I
really
like
it.
I,
like,
I
think
it's
a
good
library.
I
think
it's
really
really
elegant.
I,
like
the
fluent
api
and
like
you
to
be
clear-
and
I
think
we
can
agree
on
this-
you
don't
include
something
like
check
types.
If
you're
going
to
validate
one
field
right.
C
D
A
Okay,
cool,
so
I'm
also
in
favor
of
this
library.
I
I
I
think
I
like
it
and
building
on
to
the
idea
that
you
won't
be
using
this
for
just
one
field
right
got
me
thinking
that
the
idea
of
dynamic
typing
right
is
that
when
there's
likely
not
information
that
you
have
within
your
application,
it's
things
that
are
coming
out
from
the
outside,
so
apis
to
information
that
you
get
on
the
database
and
all
of
those
things.
A
The
last
thing
that
you
mentioned
in
the
slides
that
you
have
was
a
json
schema,
which
would
likely
be
a
place
to
be
able
to
make
sure
that
you
build
your
types
coming
into
your
application.
The
way
you
would
want
them
and
therefore
maybe
not
use
check
type
that
much,
but
my
assumptions
are
wrong.
So
how?
Because
you
won't
necessarily
just
use
the
json
schema,
because
your
json
is
really
super
complex,
but
you
can
also
actually
use
this
to
have
some
confidence
at
the
types
that
are
coming
into
your
application
from
these
external
things.
A
D
Yeah,
that's
a
great
question
so
generally
the
way
that
I
do
it,
it
might
not
be
right,
but
anything
that
comes
into
my
application,
whether
it
was
from
an
api
call
or
you
know,
even
if
I
retrieved
it
from
because
I'm
not
necessarily
sure
which
version
of
the
document
schema.
It
was
because
you
know
over
time.
You
have
older
documents
that
had
a
schema
and
then
it's
evolved
over
time,
so
I
tend
to
validate
them
against
the
schema
adjacent
schema
and
then,
where
I
tend
to
use
check
types.
D
A
lot
is,
if
I
am
writing
functions
that
do
bits
and
pieces
of
business
logic,
and
I
want
to
make
sure
that
the
value
that
I'm
passing
in
is
actually
a
string
or
a
number
that
sort
of
thing.
I
I
tend
to
write
some
unit
tests
around
that
to
make
sure
that
they
they
fail
correctly
with
a
readable
error
message,
as
opposed
to
you
know,
split
does
not
exist
on
number
or
you
know,
so
I
find
that
quite
useful
in
debugging
later
on.
D
So
it's
it's
kind
of
for
me
check
types
is
like
a
little
god.
The
interesting
thing
is,
if
you
are
taking
in
user
input
and
then
that's
passed
through
a
json
schema
and
then
you're
going
to
pass
it
to
a
function
along
with,
let's
say
one
or
two
other
primitives
I'll.
Basically,
at
that
point,
I'll
assume
that
the
the
data
coming
in
is
already
valid
because
it's
run
through
a
validator
and
I'll
add
the
two
check
types
for
the
two
primitives
and
that'll.
D
D
You
sorry
and
another
thing
that
can
also
help
you
here
is,
if
you
so
the
way
I
like
to
use
typescript
and
this
is
going
to
come
up
a
little
bit
later.
Is
I
write
a
typescript
file
with
my
type
definitions,
but
then
I
don't
like
to
transpile
my
my
code
or
compile
it.
So
I
use
js
doc
comments
and
I
import
those
types
and
I
just
use
it
to
annotate
my
functions
and
objects
so
that
I
can
get
better
dev
time.
D
A
C
C
C
D
So
yeah
there's
almost
no
noticeable
performance.
You
know,
we've
we've
run
quite
a
bit
of
tests
at
the
moment
on
what
we're
doing
with
with
workers
and
stuff
on
aws,
and
you
know
we
we
profiled
it
before
and
after
and
it
was,
is
very
unnoticeable.
I
think
I
haven't
looked
at
the
source
code,
but
I
suspect,
what's
happening
under
the
hood.
Is
it's
just
convenience
methods
to
like
number
dot
is
integer,
so
it
that
which
explains
why
it's
almost
zero
performance
impact.
D
D
C
D
If
I'm
not
mistaken,
it's
it's
also
got
like
a
little
bit
more
of
a
fancier
interface
for
validating
objects.
Yep,
I
haven't
actually
used,
but
I've
seen
it.
I
think
it's
popular
in
next,
not
next
year's
one
of
the
the
new
frameworks,
but
I
don't
know
enough
to
comment
about
yep,
but
I
think
joy
is
a
little
bit
more
actively
used
so
you're
more
likely
to
come
across
that.
B
B
D
D
B
D
D
That
is
bad
advice
like
check
types
is
older.
It's
been
around
for
a
lot
longer,
but
I
think
that
it's
it's
fairly
stable
in
the
number
of
downloads
and
like
I'm
looking
at
the
joy
one
now
that
was
last
published
25
days,
the
curve
is
going
up
it's
on
3.8,
so
it's
almost
caught
check
types,
so
very
healthy
ecosystem.
C
B
C
B
C
C
But
that
was
really
really
awesome,
so
thanks
for
everybody
that
stuck
around
and
full
for
listening
to
us
ramble
on,
we
appreciate
it.
If
you
have
any
questions,
please
feel
free
to
put
them
in
the
comments
after
this
and
I'll
listen
to
it.
Otherwise,
we'll
see
you
next
month,
where
we
talk
about
error,
handling
and
it'll,
be
interesting
to
see
different
people's
perspectives.